/* strangefolk — components */

/* ---- ticker ---- */
.sf-ticker { background: var(--surface2); border-bottom: 1px solid var(--rule); padding: 7px 0 }
.sf-ticker .u { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.sf-ticker .lbl { color: var(--dim) }
.sf-ticker .lbl b { color: var(--amber); font-weight: 400 }

/* ---- primary nav ---- */
.sf-nav {
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	background: rgba(10, 13, 10, .94);
	backdrop-filter: blur(9px);
	z-index: 100;
}
.sf-nav .u { display: flex; align-items: center; gap: 34px; padding-top: 17px; padding-bottom: 17px }

.sf-brand { font-family: var(--mono); font-weight: 700; font-size: 13.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--bone); white-space: nowrap; text-decoration: none }
.sf-brand__slash { color: var(--amber) }

.sf-nav__links { display: flex; gap: 26px; margin-left: auto }
.sf-nav__list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0 }
.sf-nav__list a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase; color: var(--fog); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s }
.sf-nav__list a:hover { color: var(--bone); border-bottom-color: var(--amber) }

@media (max-width: 860px) {
	.sf-nav__links { display: none }
}

.sf-cart { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--amber); border: 1px solid var(--amber-dim); padding: 6px 12px; text-transform: uppercase; text-decoration: none }

/* ---- footer ---- */
.sf-footer { border-top: 1px solid var(--rule); padding: 46px 0 60px; margin-top: 34px }
.sf-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 32px }
.sf-footer__col h2 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin: 0 0 13px; font-weight: 400 }
.sf-footer__list { list-style: none; margin: 0; padding: 0 }
.sf-footer__list a { display: block; font-size: 14.5px; color: var(--fog); text-decoration: none; margin-bottom: 8px }
.sf-footer__list a:hover { color: var(--amber) }
.sf-footer__bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }

/* ---- section head ---- */
.sf-shead { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 28px }
.sf-shead__title { font-family: var(--mono); font-size: 13px; letter-spacing: .21em; text-transform: uppercase; margin: 0; font-weight: 700 }
.sf-shead__no { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--amber) }
.sf-shead__more { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); text-decoration: none }

/* ---- stamp ----
   sf_stamp() (inc/template-tags.php) emits sf-stamp--active/dormant/sealed,
   but until now only the base .sf-stamp existed, so every stamp rendered
   identically regardless of status. Reusing the .sf-status--* colours below
   (rather than inventing new ones) keeps the stamp and the data-panel
   status in agreement — the same specimen never disagrees with itself. */
.sf-stamp { display: inline-block; border: 1.5px solid var(--amber-dim); color: var(--amber-dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; font-weight: 700; padding: 5px 10px; text-transform: uppercase; transform: rotate(-3deg) }
.sf-stamp--active { border-color: var(--amber-dim); color: var(--amber) }
.sf-stamp--dormant { border-color: var(--rule-hi); color: var(--fog) }
.sf-stamp--sealed { border-color: var(--rule-hi); color: var(--dim) }

/* ---- data panel ---- */
.sf-data { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 28px 0 0; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 10.5px }
.sf-data dt { color: var(--dim); text-transform: uppercase; letter-spacing: .17em; white-space: nowrap }
.sf-data dd { margin: 0; color: var(--bone); font-variant-numeric: tabular-nums; letter-spacing: .06em }

.sf-status--active { color: var(--amber); }
.sf-status--dormant { color: var(--fog); }
.sf-status--sealed { color: var(--dim); }

/* ---- specimen card ---- */
.sf-card { text-decoration: none; color: inherit; display: block }
.sf-card__img { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--rule); position: relative; display: flex; align-items: center; justify-content: center; transition: border-color .18s; overflow: hidden }
.sf-card:hover .sf-card__img { border-color: var(--rule-hi) }
.sf-card__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 54px 14px rgba(8,10,8,.62) }
.sf-card__img img { width: 100%; height: 100%; object-fit: cover; display: block }
.sf-card__desig { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--dim); margin-top: 13px }
.sf-card__title { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 6px 0 5px; font-weight: 700; line-height: 1.35 }
.sf-card__row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--fog); font-variant-numeric: tabular-nums }
.sf-card__row b { color: var(--bone); font-weight: 400 }

/* ---- breadcrumb ----
   Ported from page-layouts.html:32-33 (.crumb -> .sf-crumb). Shared chrome:
   the mockup reuses this same block on both the specimen page and the
   product page (Task 9), so it lives here with the other reusable pieces
   rather than in pages.css alongside page-specific layout. */
.sf-crumb { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--dim); padding: 26px 0 0 }
.sf-crumb a { color: inherit; text-decoration: none }
.sf-crumb a:hover { color: var(--amber) }
.sf-crumb b { color: var(--amber); font-weight: 400 }

/* ---- collections ----
   Ported from homepage-mockup.html:66-81 (.cols/.col -> .sf-cols/.sf-col).
   The per-collection gradient swatches (.c1-.c4) and the "Series A" desig
   tag are mockup-only decoration with no corresponding markup/data in
   front-page.php, so they are not ported. */
.sf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule) }
.sf-col { background: var(--surface); text-decoration: none; color: inherit; display: block; transition: background .18s }
.sf-col:hover { background: var(--surface2) }
.sf-col__img { height: 168px; position: relative; border-bottom: 1px solid var(--rule) }
.sf-col__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 60px 18px rgba(8, 10, 8, .8) }
.sf-col__body { padding: 17px 18px 21px }
.sf-col__title { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 8px 0 7px; font-weight: 700 }
.sf-col p { margin: 0; font-size: 14.5px; color: var(--fog); line-height: 1.5 }
/* Markup pairs this with .lbl (font-family/text-transform come from there);
   only the properties that differ from .lbl are declared here. */
.sf-col__n { font-size: 9.5px; letter-spacing: .16em; color: var(--dim); margin-top: 12px; display: block }

/* ---- field notes ---- ported from homepage-mockup.html:112-119 (.notes3/.note -> .sf-notes3/.sf-note). */
.sf-notes3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule) }
.sf-note { background: var(--surface); padding: 24px 22px 28px; text-decoration: none; color: inherit; transition: background .18s; display: block }
.sf-note:hover { background: var(--surface2) }
/* Markup pairs this with .lbl too; only the differing properties are here. */
.sf-note__k { font-size: 9px; letter-spacing: .2em; color: var(--amber-dim) }
.sf-note__title { font-family: var(--serif); font-size: 19.5px; line-height: 1.32; margin: 12px 0 10px; font-weight: 600; text-wrap: balance }
.sf-note p { margin: 0; font-size: 14.5px; color: var(--fog); line-height: 1.55 }

/* ---- sparse bands ----
   Both grids above stretch when they hold fewer items than a row can take.
   `auto-fit` collapses the empty tracks to 0 and hands their width to the
   real ones, so the homepage as it stands today — two collections, one
   field note — renders two 572px collection cards whose images are still
   locked to `height: 168px` (a 3.4:1 letterbox where the design intends
   1.7:1), and one field-note card 1146px wide and 137px tall. Measured in
   a browser, not inferred.

   The one-line `auto-fit` -> `auto-fill` swap that fixed .sf-grid4
   (layout.css) is NOT the fix here, and applying it would have shipped
   something worse. .sf-grid4 has a 22px gap and no container background;
   these two are gapless bordered BANDS — `gap: 1px` over
   `background: var(--rule)` is what draws the hairlines between cards, so
   the container's background is a visible slab wherever a cell is empty.
   Under auto-fill at 1148px the collections band computes four 285.75px
   tracks and paints the two unoccupied ones as a wide grey rectangle
   beside the two real cards. Confirmed by eye before choosing this
   approach, not argued from the spec.

   So: cap the band's width instead of the track count, and let auto-fit
   do the rest. front-page.php (and archive.php/index.php) emit the item
   count as a modifier; each max-width below is one natural track per item
   plus the 1px gaps and the 1px borders. Because the container is then
   exactly wide enough for n tracks, auto-fit fits exactly n and has no
   empty track left to collapse or to paint. Every value is measured: the
   resulting tracks come out at 285.5-286px against a full row's 285.75px,
   and 381-381.5px against 381.33px, so a sparse band is indistinguishable
   from the leading cards of a full one and nothing shifts when the next
   collection populates.

   No media query, deliberately. These are max-widths, so they simply stop
   binding once the viewport is narrow enough that the band is smaller than
   the cap — at 390px both bands measure byte-identical to their
   pre-modifier behaviour (338px wide, one full-width column). The counts
   that fill a row (.sf-cols--4, .sf-notes3--3 and up) get no rule at all
   and were confirmed byte-identical to today with the class applied.

   KNOWN, NOT FIXED HERE — a separate, pre-existing defect in the same
   band: when .sf-notes3 holds MORE items than one row (5+ on
   /field-notes/, which paginates at 10), every track is occupied, nothing
   collapses, and the unfilled cells of the LAST row paint that same grey
   slab. Reproduced by eye at five items. It is latent today because only
   one field note is published, and curing it means changing how the band
   draws its rules — moving the hairlines onto the cards so an empty cell
   is invisible — which is a visual-system decision, not a fix-wave
   one-liner. Recorded in docs/STATE.md rather than changed silently. */
.sf-cols--1   { max-width: 288px }
.sf-cols--2   { max-width: 574px }
.sf-cols--3   { max-width: 861px }
.sf-notes3--1 { max-width: 383px }
.sf-notes3--2 { max-width: 766px }

/* ---- button ---- ported from homepage-mockup.html:53-56 (.btn -> .sf-btn, .btn.solid -> .sf-btn--solid). */
.sf-btn { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 13px 24px; text-decoration: none; border: 1px solid var(--amber-dim); color: var(--amber); transition: background .16s, color .16s; display: inline-block }
.sf-btn:hover { background: var(--amber-dim); color: var(--bone) }
.sf-btn--solid { background: var(--amber); border-color: var(--amber); color: var(--ground); font-weight: 700 }
.sf-btn--solid:hover { background: var(--amber-hi); border-color: var(--amber-hi) }

/* ---- registry ----
   Ported from homepage-mockup.html:120-130 (.reg -> .sf-registry). .form and
   .fine were carried over unprefixed in Task 4 — the only unprefixed rules
   in this stylesheet, and a collision risk once WooCommerce or a plugin
   injects its own .form/.fine. Task 5 renames them to .sf-registry__form
   and .sf-registry__fine (BEM-ish, matching the markup's existing
   .sf-registry__ok/.sf-registry__error siblings) and updates
   template-parts/registry.php to match. Declaration values are unchanged —
   only the selectors moved. */
.sf-registry { border: 1px solid var(--rule-hi); background: var(--surface); padding: 46px 34px; text-align: center }
.sf-registry h2 { font-family: var(--mono); font-size: clamp(18px, 2.7vw, 26px); letter-spacing: .13em; text-transform: uppercase; margin: 14px 0 12px; font-weight: 700 }
.sf-registry p { color: var(--fog); max-width: 50ch; margin: 0 auto 26px; font-size: 16px }
/* Both selectors are scoped under .sf-registry (0,2,0) so they reliably beat
   .sf-registry p (0,1,1) regardless of source order. No seventh hue: "ok"
   reuses Lichen, already this system's positive/confirming accent
   (.sf-log__d, .sf-ptype); "error" reuses Signal Flare with the same
   border+tint treatment .sf-made already uses for an attention panel, so it
   reads as a flagged message rather than a plain paragraph or a CTA. */
.sf-registry .sf-registry__ok { color: var(--lichen); }
.sf-registry .sf-registry__error { color: var(--amber); background: var(--amber-alpha); border: 1px solid var(--amber-dim); padding: 12px 16px; }
.sf-registry__form { display: flex; gap: 9px; max-width: 430px; margin: 0 auto; flex-wrap: wrap }
.sf-registry__form input { flex: 1; min-width: 190px; background: var(--ground); border: 1px solid var(--rule-hi); color: var(--bone); padding: 13px 15px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em }
.sf-registry__form input::placeholder { color: var(--dim) }
.sf-registry__form input:focus { outline: none; border-color: var(--amber) }
.sf-registry__form button { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 13px 22px; background: var(--amber); border: 1px solid var(--amber); color: var(--ground); font-weight: 700; cursor: pointer }
.sf-registry__form button:hover { background: var(--amber-hi) }
.sf-registry__fine { font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; color: var(--dim); margin-top: 18px; text-transform: uppercase }

/* Honeypot field: present in the DOM for bots that fill in every input,
   hidden from sighted users and skipped by assistive tech via aria-hidden. */
.sf-hp { position: absolute; left: -9999px; }

/* Standard WordPress convention, unprefixed on purpose (core itself never
   prefixes it): visually hidden but readable by screen readers. Needed here
   because this is a classic PHP theme — WP only auto-loads this rule for
   block themes. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }