/* ========================================================================= Sightlines — child theme styles Tokens & fonts live in theme.json; this file carries the bespoke layout, the dark/light theme, the sticky header, galleries, lightbox and "Notes". ========================================================================= */ /* ---------- base & theme tokens ---------- */ body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); transition: background-color .4s ease, color .4s ease; } /* Dark "gallery" mode — set on (by the no-flash head script and the toggle) so the preset colour variables cascade to everything below. */ html.is-dark { --wp--preset--color--base: #131210; --wp--preset--color--contrast: #f1eee8; --wp--preset--color--muted: #b6b0a6; --wp--preset--color--faint: #8c867c; --wp--preset--color--line: rgba(255, 255, 255, .13); } a { color: var(--wp--preset--color--contrast); text-decoration: none; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--wp--preset--color--faint); } /* ---------- sticky / collapsing header ---------- */ .sl-site-header { position: sticky; top: 0; z-index: 100; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--line); margin-bottom: 48px; transition: background .4s ease, box-shadow .3s ease; } .sl-site-header.is-stuck { box-shadow: 0 3px 16px rgba(0, 0, 0, .07); } .sl-masthead { max-width: 1080px; margin: 0 auto; padding: 11px clamp(16px, 4vw, 32px); } .sl-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; } .sl-bar-left { align-items: center; gap: clamp(.6rem, 2vw, 1.2rem); flex-wrap: nowrap; } .sl-bar-center { justify-content: center; min-width: 0; } .sl-bar-right { align-items: center; gap: 1.2rem; flex-wrap: nowrap; justify-content: flex-end; } .sl-wordmark a, .sl-wordmark { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 1.4rem; letter-spacing: .24em; text-transform: uppercase; color: var(--wp--preset--color--contrast); white-space: nowrap; } /* Small title: hidden until the header collapses, then it replaces the full one. */ .sl-wordmark-small { display: none; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 1.02rem; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--contrast); white-space: nowrap; } .sl-site-header.is-stuck .sl-wordmark { display: none; } .sl-site-header.is-stuck .sl-wordmark-small { display: inline-flex; align-items: center; } .sl-nav .wp-block-navigation__container, .sl-nav ul { gap: 1.3rem; } .sl-nav a, .sl-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--faint); } /* dark toggle */ .sl-toggle { display: inline-flex; align-items: center; gap: .6rem; background: none; border: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .sl-toggle:focus { outline: none; } .sl-toggle:focus-visible .sl-toggle-track { box-shadow: 0 0 0 2px var(--wp--preset--color--faint); } .sl-toggle-label { font-family: var(--wp--preset--font-family--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--faint); width: 30px; text-align: right; } .sl-toggle-track { width: 46px; height: 26px; border-radius: 13px; background: rgba(0, 0, 0, .18); position: relative; display: inline-block; flex: 0 0 auto; transition: background .3s ease; } html.is-dark .sl-toggle-track { background: rgba(255, 255, 255, .24); } .sl-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .3s ease; } html.is-dark .sl-toggle-knob { transform: translateX(20px); background: #f1eee8; } /* social icons */ .sl-social { display: inline-flex; align-items: center; gap: .85rem; } .sl-social a { display: inline-flex; color: var(--wp--preset--color--faint); transition: color .2s ease; line-height: 0; } .sl-social a:hover { color: var(--wp--preset--color--contrast); } .sl-social svg { width: 17px; height: 17px; display: block; } /* ---------- home feed (magazine grid) ---------- */ .sl-main { padding-bottom: 90px; } .sl-feed .wp-block-post-template { gap: 54px 44px !important; } .sl-feed .wp-block-post { transition: transform .25s ease; } .sl-feed .wp-block-post:hover { transform: translateY(-4px); } .sl-feed .wp-block-post-featured-image { margin-bottom: 1.1rem; } .sl-feed .wp-block-post-featured-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; display: block; } .sl-meta { font-family: var(--wp--preset--font-family--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--faint); gap: .5em !important; margin: 0 0 .55rem !important; } .sl-meta > *, .sl-eyebrow > * { margin: 0; font-family: var(--wp--preset--font-family--mono); } .sl-meta a, .sl-eyebrow a { color: var(--wp--preset--color--faint); } .sl-meta > *:not(:first-child)::before, .sl-eyebrow > *:not(:first-child)::before { content: "\00B7\00A0"; } .sl-feed .wp-block-post-title { font-size: 1.85rem; line-height: 1.12; margin: 0 0 .5rem; } .sl-feed .wp-block-post-title a { color: var(--wp--preset--color--contrast); } .sl-feed .wp-block-post-excerpt { color: var(--wp--preset--color--muted); margin: 0; } .sl-feed .wp-block-post-excerpt p { font-size: 1.02rem; line-height: 1.55; margin: 0; } .sl-feed .wp-block-post-excerpt__more-text { display: none; } .sl-pagination { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; } /* ---------- single / reading view ---------- */ .sl-article { padding-top: 18px; } .sl-eyebrow { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--faint); gap: .5em !important; justify-content: center; margin-bottom: 1.2rem !important; } .sl-article .wp-block-post-title { text-align: center; font-size: clamp(2.4rem, 5vw, 3.3rem); line-height: 1.04; letter-spacing: -.015em; margin: 0; } .sl-article .wp-block-post-featured-image { margin-block: 2.6rem; } .sl-article .wp-block-post-featured-image.alignwide { max-width: 880px; margin-inline: auto; } .sl-article .wp-block-post-featured-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; display: block; } .entry-content { font-size: 1.18rem; line-height: 1.78; } .entry-content p { margin: 0 0 1.4rem; } .entry-content > p:first-of-type::first-letter { float: left; font-family: var(--wp--preset--font-family--body); font-size: 4.4em; line-height: .72; padding: .05em .14em 0 0; font-weight: 400; } .entry-content h2 { margin-top: 2.4rem; } .entry-content h3 { margin-top: 2rem; } .entry-content h4, .entry-content h5 { font-family: var(--wp--preset--font-family--body); font-size: 1.18rem; font-weight: 400; font-style: italic; line-height: 1.5; letter-spacing: 0; margin: 0; padding: 1.4rem 0; } .entry-content h4 { font-weight: 600; } .entry-content blockquote { border: none; margin: 2rem 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--wp--preset--color--contrast); font-style: italic; } /* 
 as a quiet callout that matches the reading type (not raw code) */
.entry-content pre {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.08rem; line-height: 1.7; color: var(--wp--preset--color--ink, var(--wp--preset--color--contrast));
	white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
	margin: 1.9rem 0; padding: 1.2rem 1.4rem;
	background: rgba(0, 0, 0, .035);
	border-left: 2px solid var(--wp--preset--color--faint);
	border-radius: 2px; tab-size: 2;
}
html.is-dark .entry-content pre { background: rgba(255, 255, 255, .05); }

/* tables */
.entry-content .table-responsive { overflow-x: auto; margin: 1.9rem 0; max-width: 100%; }
.entry-content table {
	display: block; width: max-content; max-width: 100%; overflow-x: auto;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--body); font-size: 1rem; line-height: 1.5;
}
.entry-content .table-responsive > table { margin: 0; }
.entry-content table th,
.entry-content table td {
	text-align: left; padding: .7rem .9rem;
	border: 1px solid var(--wp--preset--color--line);
}
.entry-content table th { font-weight: 600; }
.entry-content table.table-striped tbody tr:nth-child(even),
.entry-content table.table-striped tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .035); }
html.is-dark .entry-content table.table-striped tbody tr:nth-child(even),
html.is-dark .entry-content table.table-striped tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .05); }

/* ---------- tags / keywords on a story ---------- */
.sl-tags {
	max-width: 680px; margin: 2rem auto 0 !important;
	gap: 0 !important; align-items: baseline;
}
.sl-tags .wp-block-post-terms { font-family: var(--wp--preset--font-family--mono); }
.sl-tags a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px; padding: 5px 10px; margin: 0 6px 6px 0;
	transition: color .2s ease, border-color .2s ease;
}
.sl-tags a:hover { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--faint); }

/* "Shot on" gear line */
.sl-gear { max-width: 680px; margin: .9rem auto 0 !important; text-align: center; }
.sl-gear .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}
.sl-gear .wp-block-post-terms__prefix { margin-right: .5em; opacity: .8; }
.sl-gear a { color: var(--wp--preset--color--faint); }
.sl-gear a:hover { color: var(--wp--preset--color--contrast); }

/* ---------- galleries ---------- */
.wp-block-gallery img { border-radius: 2px; cursor: zoom-in; }

/* Classic [gallery] shortcode — match the block gallery look.
   !important + ID-proof selectors beat WP's inline #gallery-N styles. */
.sl-main .gallery,
.entry-content .gallery {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 14px !important;
	margin: 1.6rem 0 2rem !important;
}
.sl-main .gallery.gallery-columns-1,
.entry-content .gallery.gallery-columns-1 { grid-template-columns: 1fr !important; }
.sl-main .gallery.gallery-columns-2,
.entry-content .gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.sl-main .gallery.gallery-columns-4,
.entry-content .gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
.sl-main .gallery.gallery-columns-5,
.entry-content .gallery.gallery-columns-5 { grid-template-columns: repeat(5, 1fr) !important; }
.sl-main .gallery.gallery-columns-6,
.entry-content .gallery.gallery-columns-6 { grid-template-columns: repeat(6, 1fr) !important; }
.sl-main .gallery br,
.entry-content .gallery br { display: none !important; }
.sl-main .gallery .gallery-item,
.entry-content .gallery .gallery-item {
	width: auto !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important; float: none !important; text-align: left;
}
.sl-main .gallery .gallery-icon,
.entry-content .gallery .gallery-icon { margin: 0 !important; }
.sl-main .gallery .gallery-item img,
.sl-main .gallery img,
.entry-content .gallery img {
	width: 100% !important; height: auto !important;
	aspect-ratio: 3 / 2; object-fit: cover;
	border: 0 !important; border-radius: 2px; display: block; cursor: zoom-in;
}
.sl-main .gallery .gallery-caption,
.entry-content .gallery .gallery-caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	margin: .5em 0 0;
}
.wp-block-gallery figcaption,
.wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}
.wp-block-gallery.is-style-sl-strip {
	display: flex !important; flex-wrap: nowrap; overflow-x: auto;
	scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 14px;
}
.wp-block-gallery.is-style-sl-strip .wp-block-image {
	flex: 0 0 auto; width: clamp(220px, 32%, 320px); scroll-snap-align: start; margin: 0;
}
.wp-block-gallery.is-style-sl-strip .wp-block-image img { width: 100%; }

/* ---------- before / after slider ---------- */
.sl-ba {
	position: relative; max-width: 100%; margin: 1.8rem 0 2rem;
	overflow: hidden; border-radius: 2px; user-select: none; touch-action: pan-y;
	line-height: 0;
}
.sl-ba .sl-ba__img { display: block !important; width: 100% !important; height: auto !important; max-width: none; margin: 0 !important; float: none !important; }
.sl-ba .sl-ba__before-img {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
	object-fit: cover; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); margin: 0 !important;
}
.sl-ba__handle {
	position: absolute !important; top: 0; bottom: 0; left: var(--pos, 50%);
	width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .9);
	cursor: ew-resize; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); z-index: 3;
}
.sl-ba__handle:focus { outline: none; }
.sl-ba__handle:focus-visible .sl-ba__grip { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 3px var(--wp--preset--color--faint); }
.sl-ba__grip {
	position: relative; width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255, 255, 255, .95); color: #1a1916;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3); line-height: 0;
}
.sl-ba__grip svg { width: 20px; height: 20px; }
.sl-ba__label {
	position: absolute; top: 14px; z-index: 2;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
	color: #fff; background: rgba(0, 0, 0, .45);
	padding: 5px 10px; border-radius: 2px; pointer-events: none;
}
.sl-ba__label--before { left: 14px; }
.sl-ba__label--after { right: 14px; }

/* ---------- lightbox carousel ---------- */
.sl-lb {
	position: fixed; inset: 0; z-index: 99999; display: none;
	align-items: center; justify-content: center; background: rgba(12, 11, 10, .95);
}
.sl-lb.is-open { display: flex; }
.sl-lb__img {
	max-width: 86vw; max-height: 80vh; border-radius: 2px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
.sl-lb__cap {
	position: absolute; left: 0; right: 0; bottom: 40px; text-align: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255, 255, 255, .82); pointer-events: none;
}
.sl-lb__pos {
	position: absolute; top: 26px; right: 30px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; letter-spacing: .12em; color: rgba(255, 255, 255, .7);
}
.sl-lb__close {
	position: absolute; top: 22px; left: 28px; background: none; border: none; cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.sl-lb__close:hover { color: #fff; }
.sl-lb__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; border: none; color: #fff; cursor: pointer;
	font-size: 2.4rem; line-height: 1; padding: 14px 22px; opacity: .65; transition: opacity .2s ease;
}
.sl-lb__nav:hover { opacity: 1; }
.sl-lb__prev { left: 6px; }
.sl-lb__next { right: 6px; }
.sl-lb__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.sl-lb__dot {
	width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
	background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .25s ease, background .25s ease;
}
.sl-lb__dot.is-active { background: #fff; width: 22px; border-radius: 4px; }

/* ---------- notes (comments) ---------- */
.sl-notes { border-top: 1px solid var(--wp--preset--color--line); margin-top: 2.6rem !important; padding-top: 2.4rem; }
.sl-notes-title {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: .72rem !important; letter-spacing: .2em; text-transform: uppercase;
	color: var(--wp--preset--color--faint); font-weight: 400 !important; margin: 0 0 1.7rem !important;
}
.wp-block-comment-template { list-style: none; margin: 0; padding: 0; }
.wp-block-comment-template li { margin: 0 0 1.7rem; }
.wp-block-comment-template .wp-block-avatar,
.wp-block-comment-date,
.wp-block-comment-edit-link { display: none; }
.wp-block-comment-content p {
	font-family: var(--wp--preset--font-family--body); font-style: italic;
	font-size: 1.15rem; line-height: 1.6; margin: 0 0 .45rem; color: var(--wp--preset--color--contrast);
}
.sl-note-byline { gap: 1rem !important; align-items: baseline; }
.wp-block-comment-author-name,
.wp-block-comment-author-name a,
.comment-reply-link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--faint); font-style: normal;
}

/* note form */
.comment-respond { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--wp--preset--color--line); }
.comment-reply-title { font-family: var(--wp--preset--font-family--body); font-style: italic; font-weight: 400; font-size: 1.2rem; margin: 0 0 1rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	width: 100%; background: transparent; border: none;
	border-bottom: 1px solid var(--wp--preset--color--line); padding: .6rem 0;
	font-family: var(--wp--preset--font-family--body); font-size: 1.05rem;
	color: var(--wp--preset--color--contrast); margin-bottom: 1rem;
}
.comment-form textarea { font-style: italic; resize: vertical; }
.comment-form input::placeholder,
.comment-form textarea::placeholder { color: var(--wp--preset--color--faint); font-style: italic; }
.comment-form .form-submit input[type="submit"],
.comment-form .form-submit .wp-block-button__link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	background: none; border: 1px solid rgba(0, 0, 0, .2); color: var(--wp--preset--color--contrast);
	border-radius: 2px; padding: .7rem 1.4rem; cursor: pointer;
}
html.is-dark .comment-form .form-submit input[type="submit"],
html.is-dark .comment-form .form-submit .wp-block-button__link { border-color: rgba(255, 255, 255, .24); }
.comment-form-cookies-consent { display: none; }

/* ---------- post navigation ---------- */
.sl-postnav {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 3rem !important; padding: 1.9rem 0 4rem; gap: 1.5rem !important;
}
.sl-postnav .wp-block-post-navigation-link { font-family: var(--wp--preset--font-family--body); font-size: 1.3rem; }
.sl-postnav .wp-block-post-navigation-link a { color: var(--wp--preset--color--contrast); }

/* ---------- archive head ---------- */
.sl-archive-head { text-align: center; margin-bottom: 48px; }
.sl-archive-title { font-size: clamp(2rem, 4vw, 2.6rem); }

/* category keyword rail (refine in place) */
.sl-cat-tags,
.sl-gear-chips {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	max-width: 760px; margin: 1.4rem auto 0;
}
.sl-cat-chip {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
	background: none; border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px; padding: 6px 11px; cursor: pointer;
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.sl-cat-chip:hover { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--faint); }
.sl-cat-chip.is-active {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.sl-cat-count { font-size: .92em; opacity: .65; font-variant-numeric: tabular-nums; }
.sl-cat-count:empty { display: none; }
.sl-cat-hidden { display: none !important; }
.sl-cat-more {
	color: var(--wp--preset--color--faint);
	border-style: dashed;
	letter-spacing: .12em;
}

/* related-gear rail ("Used with …") — reuses the chip styling */
.sl-gear-rel { max-width: 760px; margin: 1.5rem auto 0; text-align: center; }
.sl-gear-rel__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--faint); margin-bottom: .9rem;
}
.sl-gear-chips { margin-top: 0; }

/* mobile chip disclosure — hidden on desktop; on phones the rail collapses
   behind this one-line toggle so it stops filling the screen. */
.sl-chip-toggle { display: none; }
@media (max-width: 680px) {
	.sl-chip-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		margin: 1.2rem auto 0;
		font-family: var(--wp--preset--font-family--mono);
		font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
		color: var(--wp--preset--color--contrast);
		background: none; border: 1px solid var(--wp--preset--color--faint);
		border-radius: 2px; padding: 8px 14px; cursor: pointer;
	}
	.sl-cat-tags.sl-collapsible,
	.sl-gear-chips.sl-collapsible { display: none; }
	.sl-cat-tags.sl-collapsible.is-open,
	.sl-gear-chips.sl-collapsible.is-open {
		display: flex; margin-top: 1rem;
		max-height: 42vh; overflow-y: auto;
		padding: 4px; -webkit-overflow-scrolling: touch;
	}
}

/* ---------- footer ---------- */
.sl-footer {
	width: 100%; max-width: 1080px; margin: 56px auto 0;
	padding: 38px clamp(16px, 4vw, 32px);
	border-top: 1px solid var(--wp--preset--color--line);
	align-items: flex-start; gap: 24px;
}
.sl-footer p {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}
.sl-footer-tagline { margin-top: .4rem !important; }
.sl-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; }

/* footer search */
.sl-search { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 4px; }
.sl-search:focus-within { border-color: var(--wp--preset--color--faint); }
.sl-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-search__field {
	background: transparent; border: none; outline: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; letter-spacing: .04em;
	color: var(--wp--preset--color--contrast);
	width: clamp(150px, 22vw, 220px); padding: 2px 0;
}
.sl-search__field::placeholder { color: var(--wp--preset--color--faint); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; }
.sl-search__field::-webkit-search-cancel-button { -webkit-appearance: none; }
.sl-search__go {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: none; padding: 0; cursor: pointer;
	color: var(--wp--preset--color--faint); transition: color .2s ease; line-height: 0;
}
.sl-search__go:hover { color: var(--wp--preset--color--contrast); }
.sl-search__go svg { width: 16px; height: 16px; display: block; }

/* ---------- search results page ---------- */
.sl-search-page { padding-top: 8px; }
.sl-searchbar {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1.5rem 2rem; flex-wrap: wrap;
	max-width: 880px; margin: 0 auto 8px;
	padding-bottom: 22px; border-bottom: 1px solid var(--wp--preset--color--line);
}
.sl-search-terms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sl-search-terms__empty {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}
.sl-term-chip {
	display: inline-flex; align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background: none; border: 1px solid var(--wp--preset--color--faint);
	border-radius: 2px; padding: 6px 10px;
	transition: background .2s ease, color .2s ease;
}
.sl-term-chip:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--contrast); }
.sl-term-x { margin-left: .55em; font-size: 1.15em; line-height: 1; opacity: .6; }
.sl-term-chip:hover .sl-term-x { opacity: 1; }
.sl-search--refine { margin: 0; }

.sl-results { max-width: 880px; margin: 36px auto 0; }
.sl-result {
	display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: center;
	padding: 26px 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
.sl-result--nothumb { grid-template-columns: 1fr; }
.sl-result-thumb-img {
	width: 100% !important; height: auto !important;
	aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; display: block;
	transition: opacity .2s ease;
}
.sl-result:hover .sl-result-thumb-img { opacity: .9; }
.sl-result-meta {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--faint); margin-bottom: .55rem;
}
.sl-result-title {
	display: block; font-family: var(--wp--preset--font-family--body);
	font-size: 1.55rem; line-height: 1.12; color: var(--wp--preset--color--contrast);
	margin-bottom: .5rem; transition: opacity .2s ease;
}
.sl-result:hover .sl-result-title { opacity: .62; }
.sl-result-snippet {
	display: block; font-family: var(--wp--preset--font-family--body);
	font-size: 1.02rem; line-height: 1.6; color: var(--wp--preset--color--muted);
}
.sl-result-snippet mark {
	background: none; color: var(--wp--preset--color--contrast);
	border-bottom: 1.5px solid var(--wp--preset--color--faint); padding-bottom: 1px;
}
.sl-noresults {
	max-width: 880px; margin: 48px auto; text-align: center;
	font-family: var(--wp--preset--font-family--body); font-style: italic;
	font-size: 1.25rem; color: var(--wp--preset--color--faint);
}
.sl-results-pagination {
	max-width: 880px; margin: 40px auto 0; padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex; justify-content: center; gap: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .72rem; letter-spacing: .12em;
}
.sl-results-pagination .page-numbers { color: var(--wp--preset--color--faint); text-decoration: none; }
.sl-results-pagination .page-numbers.current { color: var(--wp--preset--color--contrast); }
.sl-results-pagination a.page-numbers:hover { color: var(--wp--preset--color--contrast); }

/* footer keyword picker */
.sl-tagfilter { display: flex; align-items: center; gap: .7rem; }
.sl-tagfilter__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}
.sl-tagselect {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background: transparent; border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 5px 18px 5px 2px; cursor: pointer;
}
.sl-tagselect:focus { outline: none; border-color: var(--wp--preset--color--faint); }
.sl-tagselect option { color: #1a1916; }

/* ---------- responsive ---------- */
@media (max-width: 680px) {
	.sl-feed .wp-block-post-template { grid-template-columns: 1fr !important; }
	.sl-bar { gap: .7rem; }
	.sl-footer { flex-direction: column; }
	.sl-result { grid-template-columns: 1fr; gap: 14px; }
}