/* ==========================================================================
trylii.com — main stylesheet · "Field Guide" edition
An editorial, printed-catalogue aesthetic: Plus Jakarta Sans for both display
and body, hairline rules instead of card
shadows, uppercase teal labels, a numbered index, and golden-yellow used as
a marker / CTA accent. Teal palette. Self-hosted fonts + icons (CSP-safe).
========================================================================== */
/* ---- Self-hosted body font: Plus Jakarta Sans ---- */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plus-jakarta-sans/latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plus-jakarta-sans/latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans/latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans/latin-700-normal.woff2') format('woff2'); }
/* ---- Palette + tokens ---- */
:root {
--teal-dark: #00585E; /* hero / dark areas / footer */
--teal-darker: #003E43; /* deeper title band (category hero) */
--teal: #009B8D; /* brand accent — borders, backgrounds, icons */
--teal-ink: #007A70; /* interactive TEXT (links/labels) — AA on cream+white; brand --teal fails */
--teal-soft: #E0F0EE; /* tint surfaces (callouts) */
--yellow: #F2C135; /* logo accent, CTAs, markers */
--yellow-dark: #d9a91f;
--cream: #F5F2EA; /* body background */
--paper: #FBF9F3; /* card / surface */
--charcoal: #2F2F2F; /* primary text */
--muted: #6F6A60; /* warm grey text */
--rule: #DDD7C7; /* hairline on cream */
--rule-strong: #C9C2AE;
--rule-soft: #EDE7D7; /* faint internal dividers (toolbar, qf cells) */
/* ---- Design-audit v1 tokens (additive) ---- */
/* On-teal text: titles/copy on ANY teal band — never teal-on-teal. */
--on-teal: #FBF9F3;
--on-teal-mut: #CFE6E2;
--hero-mint: #9FD9D0; /* legible secondary text on teal-dark (two-tone hero) */
--yellow-hover: #E3AE1F;
--yellow-active: #D19E14;
/* radius / spacing / reading measure */
--r-button: 8px; --r-card: 10px; --r-input: 8px; --r-pill: 999px;
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-16: 64px; --s-22: 88px;
--measure: 66ch;
/* elevation — hover/focus ONLY (flat at rest); one focus ring everywhere */
--lift-shadow: 0 1px 3px rgba(10,40,44,.05), 0 6px 12px rgba(10,40,44,.06), 0 14px 26px rgba(10,42,46,.07), 0 26px 46px -8px rgba(10,45,50,.11);
--lift-rise: -4px;
--focus: 2px solid var(--teal);
--focus-offset: 2px;
--t-fast: .15s ease;
--t-med: .18s ease;
/* reserved data font — aliases sans until a mono is deliberately self-hosted */
--font-mono: var(--sans);
--sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Display face is the sans family (user preference). Kept the --serif name
so every heading rule still resolves; flip this one line to a self-hosted
serif to reintroduce one (the unused Fraunces files were removed). */
--serif: var(--sans);
--maxw: 1180px;
--pad-x: clamp(20px, 5vw, 56px);
--radius: 3px;
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--sans);
background: var(--cream);
color: var(--charcoal);
line-height: 1.6;
font-size: 16px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
/* Headings use the serif display face. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; color: var(--charcoal); letter-spacing: -0.01em; }
/* Reusable editorial kicker / eyebrow label. */
.kicker {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--teal-ink);
}
/* Safeguard: no page can scroll/overflow horizontally on mobile (a stray wide
child would otherwise widen the page and push centred panels off-screen).
`clip` (not `hidden`) keeps the sticky header working. */
html, body { overflow-x: clip; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.band-inner { max-width: var(--maxw); margin: 0 auto; }
/* ==========================================================================
Header — cream, hairline rule, editorial wordmark with yellow marker
========================================================================== */
.site-header { background: #fff; border-bottom: 1px solid var(--rule-strong); position: sticky; top: 0; z-index: 50; }
.nav { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { display: block; height: 34px; width: auto; }
.logo:hover { text-decoration: none; }
.nav-links { list-style: none; display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px); }
.nav-links a { color: #333333; font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--teal-ink); text-decoration: none; }
/* Persistent header search — a real input, centred in the header, with a live
results dropdown (search.js). The field grows/shrinks; the dropdown hangs
below it. */
.hdr-search { position: relative; flex: 0 1 400px; min-width: 0; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-pill); }
.hdr-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0, 155, 141, 0.15); }
.hdr-search-ic { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--teal-ink); font-size: 18px; }
.hdr-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--charcoal); padding: 0; }
.hdr-search-input::placeholder { color: var(--muted); opacity: 1; }
.hdr-search-input::-webkit-search-cancel-button, .hdr-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
/* Focus is one consistent cue for mouse and keyboard: the :focus-within rule
above (teal border + soft teal glow). No separate keyboard-only outline, so
the focused search looks the same however you got there. */
/* Live results dropdown */
.hdr-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 20px 44px -20px rgba(0, 60, 60, 0.4); padding: 6px; max-height: min(64vh, 440px); overflow-y: auto; }
.hdr-results[hidden] { display: none; }
.hdr-results a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 7px; color: var(--charcoal); }
.hdr-results a:hover, .hdr-results a.is-active { background: var(--cream); text-decoration: none; }
.hdr-r-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal-ink); }
.hdr-r-title { font-size: 14.5px; font-weight: 500; line-height: 1.25; }
.hdr-results-msg { padding: 12px; font-size: 13.5px; color: var(--muted); }
/* Keep the header on one line down to ~360px (logo + 3 links + EN + search). */
@media (max-width: 560px) {
.nav { gap: 12px; }
.nav-links { gap: 14px; }
.nav-links a { font-size: 13px; }
}
/* 404 page */
.nf { padding: clamp(60px, 12vh, 140px) 0; text-align: center; }
.nf-h1 { font-size: clamp(28px, 5vw, 44px); margin: 10px 0 14px; }
.nf-sub { font-family: var(--sans); font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 48ch; margin: 0 auto 26px; }
.nf-actions { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.nf-btn { background: var(--teal-dark); color: #fff; padding: 12px 22px; border-radius: var(--radius); font-family: var(--sans); font-weight: 600; }
.nf-btn:hover { background: var(--teal-ink); text-decoration: none; }
.nf-link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-ink); font-family: var(--sans); font-weight: 600; }
/* ==========================================================================
Homepage ("Field Guide") — cream-on-dark token + header over the hero
========================================================================== */
:root { --cream-light: #F9F6EF; } /* logo + text on dark teal */
/* On the homepage the header dissolves into the dark-teal hero: same surface,
cream logo + nav, not sticky. Every other page keeps the cream sticky bar. */
/* The header uses the teal wordmark everywhere; the cream ![]()
must stay hidden.
Selector is `.logo img.logo-cream` so it beats `.logo img{display:block}` on
specificity (0,0,2,1 > 0,0,1,1) — otherwise the cream logo ghosts through. */
.logo img.logo-cream { display: none; }
/* Belt-and-braces: the oversized hero type can sit a hair wide on tiny screens;
never let that become a horizontal scrollbar. `clip` (not `hidden`) so the
sticky header keeps working — `hidden` makes the body a scroll container. */
.page-home { overflow-x: clip; }
/* ---- Hero (dark teal) ---- */
.hp-hero { position: relative; overflow: hidden; background: var(--teal-dark); color: var(--cream-light); }
.hp-hero-inner { position: relative; z-index: 1; padding: clamp(26px, 4vw, 52px) var(--pad-x) clamp(16px, 2.2vw, 28px); }
.hp-h1 { font-size: clamp(34px, 7.6vw, 90px); font-weight: 700; line-height: 1.0; letter-spacing: -0.025em; max-width: 15ch; }
.hp-h1-a { display: block; color: var(--hero-mint); font-weight: 600; }
.hp-h1-b { display: block; color: var(--cream-light); }
.hp-hero-sub { margin-top: 18px; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.55; color: rgba(249, 246, 239, 0.82); max-width: 54ch; }
.hp-hero-sub strong { font-weight: 600; color: var(--cream-light); }
/* ---- Spotlight: featured carousel (asymmetric — one big landscape centre,
portrait siblings, cropped edge peeks). Sits in the lower hero, teal continues.
Base markup is a swipeable strip of landscape cards (works with JS off);
spotlight.js adds .is-live to switch on the absolute-positioned carousel. ---- */
.hp-spotwrap { position: relative; margin-top: clamp(4px, 1.2vw, 12px); margin-bottom: clamp(24px, 3vw, 40px); }
.spot { position: relative; }
/* Fallback (no JS): a swipeable horizontal strip of landscape cards. */
.spot-stage { display: flex; align-items: center; gap: 14px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; padding-bottom: 4px; min-height: clamp(290px, 36vw, 408px); }
.spot-stage::-webkit-scrollbar { display: none; }
.spot-card { position: relative; flex: 0 0 clamp(240px, 46vw, 360px); aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; scroll-snap-align: center; box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.6); text-decoration: none; }
.spot-card:hover { text-decoration: none; }
.spot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-ph { display: flex; align-items: center; justify-content: center; background: #EEE7D9; color: #B9B2A2; font-size: 30px; }
.spot-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 22, 24, 0.86) 0%, rgba(0, 22, 24, 0.34) 40%, rgba(0, 22, 24, 0) 66%); }
.spot-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(12px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 5px; color: #fff; }
.spot-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--hero-mint); }
.spot-title { font-weight: 700; letter-spacing: -0.01em; line-height: 1.14; font-size: 16px; }
/* Arrows — sit in the page's side gutter (out of the images), so the card panel
keeps the full content width and lines up with the sections below. Hidden until
JS enhances (native scroll otherwise). */
.spot-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: #fff; color: var(--teal-dark); align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55); transition: background var(--t-fast), transform var(--t-fast); }
.spot-arrow i { font-size: 24px; line-height: 1; }
.spot-arrow:hover { background: var(--cream-light); }
.spot-arrow:active { transform: translateY(-50%) scale(0.93); }
.spot-prev { left: calc(-1 * var(--pad-x)); }
.spot-next { right: calc(-1 * var(--pad-x)); }
/* JS-enhanced carousel: cards become absolute slots, class-driven by spotlight.js.
Giallo-Zafferano composition — a big centre, a TWO-STACKED column of cards on
each side, then a cropped tall peek at each outer edge. */
.spot.is-live .spot-arrow { display: inline-flex; }
.spot.is-live .spot-stage { display: block; position: relative; overflow: hidden; height: clamp(290px, 36vw, 408px); padding: 0; scroll-snap-type: none; }
.spot.is-live .spot-card {
position: absolute; left: 50%; top: 16%; height: 68%;
width: clamp(150px, 16vw, 208px); flex: none; aspect-ratio: auto;
transform: translateX(-50%); opacity: 1; z-index: 1;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s ease;
will-change: transform, top, height;
}
/* CLS: when JS is available (so spotlight.js WILL upgrade the strip into the
carousel), skip painting the flat fallback strip at all. Show the reserved-
height band with cards hidden; .is-live then fades them in at their final
carousel positions, so no visible card ever moves -> zero layout shift.
Pure CSS via the `scripting` media feature: browsers with no JS (or that do
not support the query) keep the working flex-strip fallback below. */
@media (scripting: enabled) {
.spot .spot-stage { display: block; position: relative; overflow: hidden; height: clamp(290px, 36vw, 408px); padding: 0; scroll-snap-type: none; }
.spot:not(.is-live) .spot-card { opacity: 0; }
}
/* Big centre. */
.spot.is-live .spot-card.is-centre { top: 0; height: 100%; width: min(45vw, 540px); z-index: 5; transform: translateX(-50%); }
/* Two-stacked side columns (top + bottom card each side). */
.spot.is-live .spot-card.is-col { height: 46%; z-index: 4; }
.spot.is-live .spot-card.is-col.is-top { top: 2%; }
.spot.is-live .spot-card.is-col.is-bottom { top: 52%; }
.spot.is-live .spot-card.is-col.is-left { transform: translateX(calc(-50% - min(35vw, 414px))); }
.spot.is-live .spot-card.is-col.is-right { transform: translateX(calc(-50% + min(35vw, 414px))); }
/* Cropped tall peek at each outer edge. */
.spot.is-live .spot-card.is-peek { top: 12%; height: 76%; width: clamp(120px, 13vw, 172px); z-index: 3; opacity: 0.5; }
.spot.is-live .spot-card.is-peek.is-left { transform: translateX(calc(-50% - min(49vw, 578px))); }
.spot.is-live .spot-card.is-peek.is-right { transform: translateX(calc(-50% + min(49vw, 578px))); }
/* Everything else parks off-stage. */
.spot.is-live .spot-card.is-gone { top: 20%; height: 60%; opacity: 0; pointer-events: none; z-index: 0; }
.spot.is-live .spot-card.is-gone.is-left { transform: translateX(calc(-50% - min(49vw, 578px))); }
.spot.is-live .spot-card.is-gone.is-right { transform: translateX(calc(-50% + min(49vw, 578px))); }
/* Type scales with the slot. */
.spot.is-live .spot-card .spot-title { font-size: 14.5px; }
.spot.is-live .spot-card.is-centre .spot-title { font-size: clamp(22px, 3vw, 34px); }
.spot.is-live .spot-card.is-centre .spot-cat { font-size: 12px; }
.spot.is-live .spot-card.is-col .spot-cat { font-size: 10px; }
.spot.is-live .spot-card.is-col .spot-cap { padding: 12px; gap: 3px; }
.spot.is-live .spot-card.is-peek .spot-cap { display: none; }
/* Tablet: centre + a 2-stacked column each side; peeks recede. */
@media (max-width: 980px) {
.spot.is-live .spot-card.is-centre { width: min(50vw, 420px); }
.spot.is-live .spot-card.is-col { width: clamp(118px, 15vw, 164px); }
.spot.is-live .spot-card.is-col.is-left { transform: translateX(calc(-50% - min(37vw, 320px))); }
.spot.is-live .spot-card.is-col.is-right { transform: translateX(calc(-50% + min(37vw, 320px))); }
.spot.is-live .spot-card.is-peek { opacity: 0; }
}
/* Mobile: single full-width card; swipe or arrow through. */
@media (max-width: 640px) {
.spot.is-live .spot-stage { height: clamp(230px, 64vw, 320px); }
.spot.is-live .spot-card.is-centre { width: min(86vw, 440px); }
.spot.is-live .spot-card.is-col, .spot.is-live .spot-card.is-peek { opacity: 0; pointer-events: none; }
.spot-arrow { width: 40px; height: 40px; }
.spot-arrow i { font-size: 21px; }
}
/* Reduced motion: no slide/resize animation, just a soft fade. */
@media (prefers-reduced-motion: reduce) {
.spot.is-live .spot-card { transition: opacity 0.25s ease; }
}
/* ---- Section scaffolding ---- */
.hp-sec { padding: clamp(48px, 7vw, 92px) 0; }
.hp-vibestrip { background: var(--teal-dark); border-top: 1px solid rgba(251, 249, 243, 0.12); padding: 15px 0; }
.hp-cats { background: #fff; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hp-cta { background: var(--cream); padding: clamp(54px, 8vw, 100px) 0; }
.hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.hp-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 8px; }
.hp-eyebrow-y { color: var(--yellow); letter-spacing: 0.2em; }
.hp-h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; color: var(--charcoal); }
.hp-h2-lg { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -0.025em; max-width: 18ch; }
.hp-headlink { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--teal-ink); white-space: nowrap; }
.hp-headlink i { transition: transform 0.15s; }
.hp-headlink:hover { text-decoration: none; }
.hp-headlink:hover i { transform: translateX(4px); }
.hp-head-intro { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 30ch; }
/* ---- Mood strip: "In the mood for" label + outlined chips, on the teal band. ---- */
.hp-vibestrip-inner { display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap; }
.hp-vibestrip-label { flex: 0 0 auto; color: var(--yellow); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.hp-vibestrip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; background: transparent; border: 1px solid var(--on-teal-mut); color: var(--on-teal); font-size: 14px; font-weight: 500; padding: 7px 15px; border-radius: 100px; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.hp-chip:hover { background: rgba(251, 249, 243, 0.1); border-color: var(--on-teal); text-decoration: none; }
/* ---- Find your corner: featured "In focus" tile + category grid ---- */
.hp-corner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px; align-items: stretch; }
.hp-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Featured tile (tall, left) */
.hp-feat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med); }
.hp-feat:hover, .hp-feat:focus-visible { border-color: var(--charcoal); transform: translateY(var(--lift-rise)); box-shadow: var(--lift-shadow); text-decoration: none; }
.hp-feat-img { position: relative; flex: 1 1 auto; min-height: 190px; background-color: #EEEAE0; background-image: repeating-linear-gradient(135deg, rgba(0, 88, 94, 0.05) 0 1px, transparent 1px 11px); display: flex; align-items: center; justify-content: center; color: #B9B2A2; border-bottom: 1px solid var(--rule); }
.hp-feat.has-photo .hp-feat-img { background: none; border-bottom: none; }
.hp-feat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-feat-body { padding: clamp(16px, 1.6vw, 22px); display: flex; flex-direction: column; gap: 8px; }
.hp-feat-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-ink); }
.hp-feat-name { font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--charcoal); }
.hp-feat-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
.hp-feat-foot { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hp-feat-start { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--teal-ink); }
.hp-feat-start i { transition: transform 0.15s; }
.hp-feat:hover .hp-feat-start i { transform: translateX(4px); }
.hp-feat-count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Category tiles */
.hp-ctile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med); }
.hp-ctile:hover, .hp-ctile:focus-visible { border-color: var(--charcoal); transform: translateY(var(--lift-rise)); box-shadow: var(--lift-shadow); text-decoration: none; }
.hp-ctile-img { position: relative; aspect-ratio: 16 / 9; background-color: #F1EEE4; background-image: repeating-linear-gradient(135deg, rgba(0, 88, 94, 0.045) 0 1px, transparent 1px 11px); display: flex; align-items: center; justify-content: center; color: #C2BBAB; border-bottom: 1px solid var(--rule); }
.hp-ctile.has-photo .hp-ctile-img { background: none; border-bottom: none; }
.hp-ctile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-ctile-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 3px; }
.hp-ctile-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--charcoal); }
.hp-ctile-count { font-size: 12.5px; font-weight: 600; color: var(--teal-ink); }
@media (max-width: 900px) {
.hp-corner { grid-template-columns: 1fr; }
.hp-feat { flex-direction: row; }
.hp-feat-img { flex: 0 0 40%; min-height: 0; border-bottom: none; border-right: 1px solid var(--rule); }
.hp-feat.has-photo .hp-feat-img { border-right: none; }
.hp-feat-body { flex: 1; justify-content: center; }
}
@media (max-width: 620px) {
.hp-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hp-feat { flex-direction: column; }
.hp-feat-img { flex: 1 1 auto; min-height: 150px; border-right: none; border-bottom: 1px solid var(--rule); }
.hp-feat.has-photo .hp-feat-img { border-bottom: none; }
}
/* ---- Activity cards (used inside the mood rails) ---- */
.hp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med); }
.hp-card:hover, .hp-card:focus-visible { border-color: var(--charcoal); transform: translateY(var(--lift-rise)); text-decoration: none; }
.hp-card-img { position: relative; aspect-ratio: 16 / 10; background-color: #EEEAE0; background-image: repeating-linear-gradient(135deg, rgba(0, 88, 94, 0.05) 0, rgba(0, 88, 94, 0.05) 1px, transparent 1px, transparent 11px); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--rule); color: #B9B2A2; }
.hp-card-img i { font-size: 30px; }
.hp-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hp-card-cat { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); }
.hp-card-title { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--charcoal); }
.hp-meta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--muted); flex-wrap: wrap; }
.hp-meta-i { display: inline-flex; align-items: center; gap: 5px; }
.hp-meta-i i { color: var(--teal-ink); font-size: 14px; }
.hp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule); }
/* subtle hover shadow (user-approved deviation; presentational, CSP-safe) */
/* Unified hover/focus lift for all cards — flat at rest, elevation is feedback. */
.acard:hover, .acard:focus-visible,
.hp-card:hover, .hp-card:focus-visible { box-shadow: var(--lift-shadow); }
/* ---- Mood rails: one arrow-driven horizontal carousel per vibe. Native scroll
is the no-JS fallback; vibe-rails.js wires the arrows + hides them at the ends.
Rails alternate cream/white so twelve stacked stay legible. ---- */
.vrow-sec { background: var(--cream); padding: clamp(15px, 1.8vw, 24px) 0; }
.vrow-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; margin-bottom: 15px; }
.vrow-title { font-size: clamp(19px, 2.1vw, 25px); font-weight: 700; letter-spacing: -0.02em; color: var(--charcoal); }
/* Header controls: prev/next arrows + See all, at the top-right of each rail. */
.vrow-nav { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vrow-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--teal-dark); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.vrow-arrow i { font-size: 20px; line-height: 1; }
.vrow-arrow:hover { background: var(--cream-light); border-color: var(--teal); }
.vrow-arrow:active { transform: scale(0.92); }
.vrow-arrow:disabled { opacity: 0.3; cursor: default; background: #fff; border-color: var(--rule); }
.vrow-seeall { margin-left: 6px; }
.vrow-track { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.vrow-track::-webkit-scrollbar { display: none; }
/* Exactly 4 cards fill the row on desktop (a quarter of the width minus the 3
gaps), so the 4th is never clipped. Fewer per row as the screen narrows. */
.vrow-track .hp-card { flex: 0 0 calc((100% - 3 * 18px) / 4); scroll-snap-align: start; }
@media (max-width: 900px) { .vrow-track .hp-card { flex: 0 0 calc((100% - 2 * 18px) / 3); } }
@media (max-width: 620px) { .vrow-track .hp-card { flex: 0 0 calc((100% - 18px) / 2); } }
@media (max-width: 440px) { .vrow-track .hp-card { flex: 0 0 84%; } }
.vrow-track .hp-card-body { padding: 15px 15px 17px; gap: 8px; }
.vrow-track .hp-card-title { font-size: 16.5px; letter-spacing: 0; }
.vrow-track .hp-meta { font-size: 12px; gap: 8px; }
/* ---- "What trylii is" — a light value-prop band that frames the browse
(teal is reserved for the hero + footer bookends, so this stays cream). ---- */
.hp-mission { background: var(--cream); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(34px, 4.5vw, 58px) 0; }
.hp-mission-h2 { margin-top: 10px; font-size: clamp(23px, 2.9vw, 35px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--charcoal); max-width: 22ch; }
.hp-mission-specs { margin-top: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.hp-mission-specs .hp-spec { padding: 22px 30px 0 0; }
.hp-mission-specs .hp-spec + .hp-spec { padding-left: 30px; border-left: 1px solid var(--rule); }
.hp-mission-specs .hp-spec-label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-ink); }
.hp-mission-specs .hp-spec-val { display: block; font-size: 15.5px; line-height: 1.45; color: var(--charcoal); }
@media (max-width: 640px) {
.hp-mission-specs { grid-template-columns: 1fr; }
.hp-mission-specs .hp-spec { padding: 16px 0 0 0; }
.hp-mission-specs .hp-spec + .hp-spec { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); }
}
/* ==========================================================================
Section scaffolding
========================================================================== */
.home-section { padding: clamp(40px, 6vw, 60px) 0; }
.section-eyebrow { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--teal-ink); margin-bottom: 6px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--charcoal); padding-bottom: 14px; margin-bottom: 6px; }
.section-head h2 { font-size: clamp(22px, 3.5vw, 30px); font-weight: 600; }
.section-head .count-note { font-family: var(--sans); font-size: 13px; color: var(--muted); white-space: nowrap; }
/* ==========================================================================
Category index (numbered ledger) — Discover page
========================================================================== */
.cat-index { list-style: none; }
.cat-index li { border-bottom: 1px solid var(--rule); }
.cat-index a {
display: grid;
grid-template-columns: 54px 1fr auto 28px;
align-items: center;
gap: 18px;
padding: 20px 6px;
color: var(--charcoal);
transition: background 0.15s, padding 0.15s;
}
.cat-index a:hover { text-decoration: none; background: var(--paper); padding-left: 14px; padding-right: 14px; }
.ci-num { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--teal-ink); font-feature-settings: 'tnum'; }
.ci-main { min-width: 0; }
.ci-name { font-family: var(--serif); font-size: clamp(19px, 2.6vw, 24px); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.ci-name i { font-size: 0.8em; color: var(--teal-ink); }
.ci-desc { font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.ci-count { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-ink); white-space: nowrap; }
.ci-arrow { font-family: var(--serif); font-size: 22px; color: var(--charcoal); text-align: right; transition: transform 0.15s, color 0.15s; }
.cat-index a:hover .ci-arrow { transform: translateX(4px); color: var(--teal-ink); }
.cat-index a:hover .ci-name { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* ==========================================================================
Discover page (/category/) — Direction A "The Index": a typographic table of
contents with a dotted leader to each count and subcategories in aligned
columns. Cream throughout, distinct from the home's dark-teal hero.
========================================================================== */
.dsc-masthead { padding: clamp(38px, 5vw, 64px) 0 clamp(28px, 4vw, 42px); }
/* Direction 01 "the contents page": a single calm left-aligned column. The live
counts sit as big teal numerals on a hairline spec line (scales with the
catalogue, repeats nothing), with the quiet random control at the far end. */
.dsc-title { font-family: var(--sans); font-size: clamp(34px, 5.4vw, 60px); font-weight: 700; line-height: 1.02; letter-spacing: -0.028em; color: var(--charcoal); margin: 14px 0 22px; }
.dsc-lede { font-family: var(--sans); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5; color: var(--muted); max-width: 52ch; margin: 0; }
/* Spec line: hairline rule, then the three stats (left) and the random control
(right), bottom-aligned like a printed contents-page header. */
.dsc-spec { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-top: clamp(30px, 4vw, 42px); padding-top: 24px; border-top: 1px solid var(--rule-strong); }
.dsc-stats { display: flex; align-items: flex-end; }
.dsc-stat { display: flex; flex-direction: column; gap: 8px; }
.dsc-stat + .dsc-stat { border-left: 1px solid var(--rule-strong); margin-left: 26px; padding-left: 26px; }
.dsc-stat-n { font-family: var(--sans); font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.dsc-stat-l { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* Random control: quiet ghost pill (designer's recommended variant). */
.dsc-random { display: inline-flex; align-items: center; gap: 9px; padding: 10px 20px; border: 1px solid var(--teal-ink); border-radius: 100px; background: transparent; color: var(--teal-ink); font-family: var(--sans); font-weight: 600; font-size: 15px; transition: background var(--t-fast), color var(--t-fast); }
.dsc-random:hover { text-decoration: none; background: rgba(0, 122, 112, 0.08); color: var(--teal-dark); }
.dsc-random i { font-size: 18px; }
.dsc-index { padding-bottom: clamp(40px, 7vw, 90px); }
.dsc-jump { display: none; } /* mobile-only sticky number rail (see media query) */
/* Chaptered scroll: four themed runs give the ten rows a shape. Markers stay on
cream — deep teal is reserved for the hero/footer bookends. */
.dsc-chapter { margin-top: clamp(34px, 5vw, 60px); scroll-margin-top: 84px; }
.dsc-chapter:first-child { margin-top: 0; }
.dsc-chapter-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 2px; }
.dsc-chapter-range { flex: 0 0 auto; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.dsc-chapter-title { font-family: var(--sans); font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.015em; color: var(--charcoal); }
.dsc-chapter-rule { flex: 1; min-width: 24px; border-bottom: 1px solid var(--rule-strong); transform: translateY(-5px); }
.dsc-list { list-style: none; }
.dsc-list > .dsc-row:first-child { border-top: none; }
.dsc-row { border-top: 1px solid var(--rule); padding: 24px 0 26px; }
.dsc-head { display: flex; align-items: baseline; gap: 14px; color: var(--charcoal); }
.dsc-head:hover { text-decoration: none; }
.dsc-num { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.dsc-icon { color: var(--teal-ink); font-size: 21px; line-height: 1; }
.dsc-name { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--charcoal); white-space: nowrap; }
.dsc-head:hover .dsc-name { color: var(--teal-ink); }
.dsc-leader { flex: 1; min-width: 24px; border-bottom: 1.5px dotted var(--rule-strong); transform: translateY(-2px); }
.dsc-count { white-space: nowrap; font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.dsc-count b { color: var(--teal-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Row body: a tall lead hero on the left fills the full row height beside a
two-column grid of subcategory bands (designer Point 2, Option A) — no more
dead space under a small top-left cover. Lead column width scales with the
category's weight (tierFor in generate.js). */
.dsc-body { display: grid; grid-template-columns: minmax(0, var(--lead-col, 37%)) 1fr; gap: 20px 32px; margin-top: 14px; padding-left: 32px; align-items: stretch; }
.dsc-w-lg { --lead-col: 40%; }
.dsc-w-md { --lead-col: 36%; }
.dsc-w-sm { --lead-col: 32%; }
/* Every other row puts the lead on the right (source order stays lead-first for
reading/tab order; grid re-places it). Resets to lead-on-top on mobile. */
.dsc-flip .dsc-body { grid-template-columns: minmax(0, 1fr) minmax(0, var(--lead-col, 37%)); }
.dsc-flip .dsc-aside { order: 2; }
.dsc-aside { display: flex; flex-direction: column; gap: 11px; color: var(--charcoal); }
.dsc-aside:hover { text-decoration: none; }
.dsc-thumb { position: relative; flex: 1 1 auto; min-height: 230px; border-radius: 9px; overflow: hidden; border: 1px solid var(--rule); background-color: #F1EEE4; background-image: repeating-linear-gradient(135deg, rgba(0, 88, 94, 0.045) 0 1px, transparent 1px 11px); display: flex; align-items: center; justify-content: center; color: #C2BBAB; transition: transform var(--t-med); }
.dsc-thumb.has-photo { background: none; border: none; }
.dsc-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dsc-thumb-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--scrim-rgb, 0, 62, 67), 0.76) 0%, rgba(var(--scrim-rgb, 0, 62, 67), 0.12) 38%, rgba(var(--scrim-rgb, 0, 62, 67), 0) 60%); }
.dsc-thumb-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 17px 18px; color: var(--on-teal); font-family: var(--sans); font-size: clamp(32px, 2.9vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }
.dsc-aside:hover .dsc-thumb { transform: translateY(-2px); }
.dsc-blurb { display: block; font-family: var(--sans); font-size: 14px; color: var(--muted); line-height: 1.55; }
/* Subcategory tiles — same hero language as the /category// pages: an
activity illustration under a teal scrim, title on top. Image varies per sub. */
.dsc-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.dsc-subtile { position: relative; display: block; aspect-ratio: 5 / 2; border-radius: 10px; overflow: hidden; background: rgb(var(--scrim-rgb, 0, 62, 67)); }
/* A lone last band (odd count in a 2-col grid) spans full width so the row closes. */
.dsc-subs > .dsc-subtile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 7 / 2; }
.dsc-subtile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.dsc-subtile:hover { text-decoration: none; }
.dsc-subtile:hover .dsc-subtile-img { transform: scale(1.05); }
/* Near-solid title plate on the left (~36%) so the title holds AA contrast over
any borrowed art — busy or pale — then fades to reveal the illustration. */
.dsc-subtile-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--scrim-rgb, 0, 62, 67), 0.87) 0%, rgba(var(--scrim-rgb, 0, 62, 67), 0.78) 39%, rgba(var(--scrim-rgb, 0, 62, 67), 0.28) 58%, rgba(var(--scrim-rgb, 0, 62, 67), 0) 80%); }
.dsc-subtile-t { position: absolute; inset: 0; right: 35%; display: flex; align-items: center; padding: 0 8px 0 17px; color: var(--on-teal); font-family: var(--sans); font-size: 21px; font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
/* Per-category scrim tint: each category colours its own lead + band scrims
(hue-matched, dark enough to hold white titles at WCAG AA). This gives the
ten rows warmth and identity while teal stays reserved for structure/UI. */
.dsc-cat-made_at_home { --scrim-rgb: 67, 53, 42; } /* warm sand */
.dsc-cat-in_the_kitchen { --scrim-rgb: 74, 66, 34; } /* golden olive */
.dsc-cat-skill_curiosity { --scrim-rgb: 43, 69, 82; } /* slate blue */
.dsc-cat-mind_at_play { --scrim-rgb: 53, 58, 94; } /* indigo */
.dsc-cat-visual_digital_arts { --scrim-rgb: 64, 54, 90; } /* violet */
.dsc-cat-together_time { --scrim-rgb: 77, 53, 58; } /* mauve */
.dsc-cat-wild_active { --scrim-rgb: 47, 77, 48; } /* forest green */
.dsc-cat-craft_creative_hands{ --scrim-rgb: 82, 58, 61; } /* rose brown */
.dsc-cat-body_being { --scrim-rgb: 47, 77, 71; } /* deep teal-green */
.dsc-cat-collectors_corner { --scrim-rgb: 71, 74, 37; } /* olive */
@media (max-width: 720px) {
.dsc-spec { gap: 18px 24px; }
.dsc-stat + .dsc-stat { margin-left: 16px; padding-left: 16px; }
.dsc-stat-l { font-size: 10px; letter-spacing: 0.1em; }
.dsc-head { flex-wrap: wrap; gap: 10px; }
.dsc-name { white-space: normal; }
.dsc-leader { display: none; }
.dsc-count { width: 100%; padding-left: 30px; }
.dsc-body { grid-template-columns: 1fr; padding-left: 0; }
/* Flip's 2-col grid (2 classes) outranks the single-col rule above, so reset
it explicitly here — otherwise flipped rows stay side-by-side on phones. */
.dsc-flip .dsc-body { grid-template-columns: 1fr; }
.dsc-flip .dsc-aside { order: 0; } /* keep the lead on top when stacked */
.dsc-thumb { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
.dsc-row { scroll-margin-top: 120px; } /* clear header (64px) + jump-rail on anchor jump */
/* Bands become one-up chips: a comfortable tap row (>=44px), title on a solid
plate, a chevron trailing, a sliver of art on the right. */
.dsc-subs { grid-template-columns: 1fr; gap: 10px; }
.dsc-subtile { aspect-ratio: auto; min-height: 78px; border-radius: 9px; }
.dsc-subs > .dsc-subtile:last-child:nth-child(odd) { grid-column: auto; aspect-ratio: auto; }
.dsc-subtile-scrim { background: linear-gradient(90deg, rgba(var(--scrim-rgb, 0, 62, 67), 0.86) 0%, rgba(var(--scrim-rgb, 0, 62, 67), 0.66) 60%, rgba(var(--scrim-rgb, 0, 62, 67), 0.4) 100%); }
.dsc-subtile-t { right: 34px; font-size: 20px; }
.dsc-subtile::after { content: '\203A'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--on-teal); font-size: 21px; line-height: 1; opacity: 0.82; }
/* Sticky number rail: 01–10, edge-to-edge, sits just under the header. */
.dsc-jump { display: flex; gap: 7px; overflow-x: auto; position: sticky; top: 64px; z-index: 20; margin: 0 calc(-1 * var(--pad-x)) 4px; padding: 9px var(--pad-x); background: var(--cream); border-bottom: 1px solid var(--rule); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dsc-jump::-webkit-scrollbar { display: none; }
.dsc-jump-a { flex: 0 0 auto; width: 37px; height: 37px; border-radius: 50%; border: 1px solid rgba(var(--scrim-rgb, 0, 62, 67), 0.4); background: rgba(var(--scrim-rgb, 0, 62, 67), 0.15); color: rgb(var(--scrim-rgb, 0, 62, 67)); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
.dsc-jump-a:hover { text-decoration: none; border-color: rgb(var(--scrim-rgb, 0, 62, 67)); }
}
/* ==========================================================================
Breadcrumb
========================================================================== */
.breadcrumb { background: var(--cream); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 12.5px; color: var(--muted); padding: 13px var(--pad-x); }
.breadcrumb .band-inner { display: block; }
.breadcrumb a { color: var(--teal-ink); }
.breadcrumb [aria-current] { color: var(--muted); }
/* ==========================================================================
Activity page
========================================================================== */
.activity-hero { background: var(--teal-dark); color: #fff; padding: clamp(40px, 6vw, 60px) var(--pad-x) clamp(44px, 6vw, 64px); }
.activity-hero-inner, .stats-bar, .activity-main, .related-wrap { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.category-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--yellow); border: 1px solid rgba(242, 193, 53, 0.5); padding: 5px 12px; border-radius: 2px; margin-bottom: 16px; }
.activity-title { font-family: var(--serif); font-size: clamp(30px, 5.5vw, 50px); font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.05; max-width: 18ch; }
/* ---- Split hero: the title panel and the illustration sit side by side, so the
image fills what was empty space beside the title. It stacks to the classic
full-width band on narrow screens (title, then image). Un-illustrated
activities keep the plain .activity-hero band. ---- */
.activity-hero--split { padding: 0; display: grid; grid-template-columns: 1fr; align-items: stretch; }
.activity-hero--split .activity-hero-inner { max-width: none; margin: 0; padding: clamp(34px, 6vw, 54px) var(--pad-x); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.activity-hero-media { position: relative; min-height: clamp(210px, 48vw, 300px); background: #EEEAE0; }
.activity-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
@media (min-width: 800px) {
.activity-hero--split { grid-template-columns: 1fr 1fr; }
.activity-hero-media { min-height: 100%; }
/* Align the title's left edge with the page content below it. */
.activity-hero--split .activity-hero-inner { padding-left: max(clamp(30px, 4vw, 52px), calc((100vw - var(--maxw)) / 2)); padding-right: clamp(30px, 4vw, 52px); }
}
/* ---- Quick Facts panel: glanceable meters + inline detail drawer ---- */
.quick-facts { margin: 0 0 8px; max-width: calc(100vw - var(--pad-x) - var(--pad-x)); background: #fff; border: 1px solid #DDD7C7; border-radius: 14px; overflow: hidden; position: relative; }
.qf-strip { display: flex; }
.qf-tab { flex: 1 1 0; min-width: 0; background: none; border: none; border-right: 1px solid #ECE8DA; padding: 16px 20px 18px; text-align: left; cursor: pointer; font-family: var(--sans); position: relative; transition: filter .22s ease, background .15s ease; }
.qf-tab:last-child { border-right: none; }
.qf-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qf-tab-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: #009B8D; white-space: nowrap; }
.qf-tab-label i { font-size: 13px; }
.qf-chev { font-size: 15px; color: #bcb9aa; transition: transform .2s ease, color .2s ease; flex-shrink: 0; }
.qf-tab-body { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.qf-tab-value { font-size: 13px; font-weight: 600; color: #2F2F2F; }
/* Active cell takes the drawer's tint (no "signature" colored top-border). */
.quick-facts.has-open .qf-tab.is-active { background: #FBFAF6; }
.qf-tab.is-active .qf-chev { transform: rotate(180deg); color: #009B8D; }
.qf-tab:focus-visible { outline: 2px solid #009B8D; outline-offset: -2px; }
.quick-facts.has-open .qf-tab:not(.is-active) { filter: grayscale(1) brightness(1.04); }
.quick-facts.has-open .qf-tab:not(.is-active):hover { filter: none; background: #FAFAF6; }
/* meters */
.m-cost { display: inline-flex; gap: 3px; font-size: 14px; font-weight: 700; line-height: 1; }
.m-cost b { font-style: normal; color: #D3CDBC; }
.m-cost b.on { color: #009B8D; }
.m-eco { display: inline-flex; align-items: flex-end; gap: 3px; }
.m-eco i { width: 5px; background: #D3CDBC; border-radius: 1px; display: block; }
.m-eco i:nth-child(1) { height: 7px; } .m-eco i:nth-child(2) { height: 10px; } .m-eco i:nth-child(3) { height: 13px; } .m-eco i:nth-child(4) { height: 16px; }
.m-eco i.on { background: #009B8D; }
.m-time { display: inline-flex; align-items: center; gap: 4px; }
.m-time i { width: 13px; height: 6px; background: #D3CDBC; border-radius: 2px; display: block; }
.m-time i.on { background: #009B8D; }
.m-time.is-flex i { background: #C7E2DD; }
.m-skill { display: inline-flex; align-items: center; gap: 5px; }
.m-skill i { width: 8px; height: 8px; border-radius: 50%; background: #D3CDBC; display: block; }
.m-skill i.on { background: #009B8D; }
.m-social { display: inline-flex; align-items: center; }
.m-social i { font-size: 17px; color: #D3CDBC; margin-left: -4px; }
.m-social i:first-child { margin-left: 0; }
.m-social i.on { color: #009B8D; }
/* inline drawer */
.qf-drawer { display: none; gap: 16px; align-items: flex-start; padding: 22px 30px; background: #FBFAF6; border-top: 1px solid #ECE8DA; }
.quick-facts.has-open .qf-drawer { display: flex; }
.qf-drawer-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: #E3EFEC; display: flex; align-items: center; justify-content: center; }
.qf-drawer-body { min-width: 0; }
.qf-drawer-icon i { font-size: 20px; color: #009B8D; }
.qf-drawer-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.qf-drawer-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: #009B8D; }
.qf-drawer-value { font-size: 15px; font-weight: 700; color: #2F2F2F; }
.qf-drawer-detail { font-size: 13.5px; line-height: 1.55; color: #5F5D52; max-width: 70ch; overflow-wrap: anywhere; }
@media (max-width: 900px) {
.qf-strip { flex-direction: column; }
.qf-tab { border-right: none; border-bottom: 1px solid #ECE8DA; padding: 14px 16px; }
.qf-tab-body { margin-top: 8px; }
.qf-drawer { padding: 16px; }
.quick-facts.has-open .qf-tab:not(.is-active) { filter: none; }
}
.activity-main { padding: 26px var(--pad-x) 8px; }
.section { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: none; }
.section h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.section h2 i { color: var(--teal-ink); font-size: 0.8em; }
.section p { font-family: var(--sans); font-size: 15.5px; line-height: 1.85; color: var(--charcoal); margin-bottom: 14px; }
.section p:last-child { margin-bottom: 0; }
.benefit-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.benefit-pill { display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; padding: 7px 14px; font-family: var(--sans); font-size: 13.5px; color: var(--charcoal); }
/* "What you need" — the Packing List: a field-guide margin, hairlines only.
The right source/product column is a seam for later manual Amazon picks;
empty today, so rows render single-column (.wyn-row--bare) and read as a
clean list. Class names are prefixed wyn- to avoid collisions. */
.wyn-intro { font-family: var(--sans); font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 52ch; margin-bottom: 20px; }
.wyn-affiliate-note { font-family: var(--sans); font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 52ch; margin: -8px 0 20px; }
.wyn-list { border-top: 1px solid var(--rule); }
.wyn-row { display: grid; grid-template-columns: 1fr 196px; gap: 28px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.wyn-row--bare { grid-template-columns: 1fr; }
.wyn-item { position: relative; padding-left: 19px; font-family: var(--sans); font-size: 15.5px; line-height: 1.45; color: var(--charcoal); }
.wyn-mk { position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; display: block; }
.wyn-mk-essential { background: var(--teal); border-radius: 1px; }
.wyn-mk-optional { border: 1.5px solid var(--teal); border-radius: 1px; background: transparent; }
.wyn-note { color: var(--muted); font-weight: 400; }
.wyn-row.is-optional .wyn-item { color: var(--muted); }
/* quiet neutral tag — no fill, no colour */
.wyn-tag { display: inline-block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 2px 6px; line-height: 1; vertical-align: 2px; margin-left: 8px; }
/* playful aside — full width, no marker square, a short dash instead */
.wyn-row--aside { grid-template-columns: 1fr; }
.wyn-row--aside .wyn-item { font-style: italic; color: var(--muted); font-size: 15px; }
.wyn-row--aside .wyn-item::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 11px; height: 0; border-top: 1.5px solid var(--muted); }
/* Recommended product card (dev handoff, option 2a) — the affiliate suggestion
attached to a checklist item. Photo-free: icon + text + yellow CTA. The card
sits inside .wyn-item beside the label; rows and markers stay unchanged. Its
--wyn-* tokens map onto the site palette (charcoal / teal-dark / yellow); only
the card tint, press-yellow, borders and the legible affiliate grey are new. */
.wyn-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.wyn-line__label { flex: 0 1 auto; min-width: 130px; }
.wyn-rec { flex: none; width: 480px; max-width: 100%; margin-left: auto; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px 14px; padding: 12px 15px; background: #ECF1EE; border: 1px solid rgba(0, 88, 94, 0.16); border-radius: 12px; }
.wyn-rec__main { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.wyn-rec__icon { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(0, 88, 94, 0.14); border-radius: 9px; color: var(--teal-dark); }
.wyn-rec__icon svg { width: 18px; height: 18px; }
.wyn-rec__text { min-width: 0; max-width: 240px; }
.wyn-rec__eyebrow { margin: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wyn-rec__suggested { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dark); }
.wyn-rec__dot { color: #C9C4B7; }
.wyn-rec__affiliate { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64605A; }
.wyn-rec__affiliate svg { width: 11px; height: 11px; }
.wyn-rec__name { margin: 3px 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--charcoal); }
.wyn-rec__cta { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--yellow); color: var(--charcoal); font-weight: 700; font-size: 13px; line-height: 1; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 9px; transition: transform 0.12s ease, background 0.12s ease; }
.wyn-rec__cta svg { width: 15px; height: 15px; }
.wyn-rec__cta:hover { background: #E7B52C; transform: translateY(-1px); text-decoration: none; }
.wyn-rec__cta:active { transform: translateY(0); }
.wyn-rec__cta:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
@media (max-width: 640px) {
.wyn-row { grid-template-columns: 1fr; gap: 9px; padding: 15px 0; }
.wyn-item { font-size: 15px; }
.wyn-rec { flex-wrap: wrap; margin-left: 0; max-width: none; width: 100%; }
}
/* Article callouts: Fun facts (end of "What it is") + Pro tip (end of "How it
works"). Facts stay quiet (hairline kicker only); the tip carries a hint of
surface because it's the actionable note. No shadows, no left-bar. */
.lii-facts { margin: 24px 0 6px; border-top: 1px solid var(--rule); padding-top: 14px; }
.lii-facts__label { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; font-family: var(--sans); font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-ink); }
.lii-facts__label i { font-size: 15px; }
.lii-facts__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lii-facts__item { display: grid; grid-template-columns: 5px 1fr; gap: 13px; font-family: var(--sans); font-size: 15.5px; line-height: 1.62; color: var(--charcoal); }
.lii-facts__item::before { content: ""; width: 5px; height: 5px; margin-top: 0.55em; background: var(--teal); border-radius: 1px; }
.lii-tip { margin: 24px 0 6px; background: var(--teal-soft); border-radius: 2px; padding: 15px 18px; }
.lii-tip__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--sans); font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal-dark); }
.lii-tip__label i { font-size: 15px; }
.lii-tip__text { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--charcoal); }
.lii-tip__text + .lii-tip__text { margin-top: 8px; }
@media (max-width: 640px) {
.lii-facts__item, .lii-tip__text { font-size: 14.5px; }
}
/* Amazon affiliate block (component arrives later; styles ready) */
.amazon-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px; }
.amazon-divider span { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); white-space: nowrap; }
.amazon-divider::before, .amazon-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }
.amazon-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.amazon-card { border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.amazon-card-img { background: var(--cream); height: 110px; display: flex; align-items: center; justify-content: center; color: var(--rule-strong); font-size: 32px; border-bottom: 1px solid var(--rule); }
.amazon-card-info { padding: 13px 14px; }
.amazon-card-name { font-family: var(--sans); font-size: 12.5px; font-weight: 500; margin-bottom: 6px; line-height: 1.45; }
.amazon-card-price { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.amazon-btn { display: block; background: var(--yellow); color: var(--charcoal); font-family: var(--sans); font-weight: 600; font-size: 12.5px; text-align: center; padding: 10px; border-radius: 2px; }
.amazon-btn:hover { background: var(--yellow-dark); text-decoration: none; }
/* ---- FAQs accordion ---- */
.faqs { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-question { width: 100%; background: none; border: none; font-family: var(--sans); font-size: 15.5px; font-weight: 600; color: var(--charcoal); text-align: left; padding: 16px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.faq-question i { color: var(--teal-ink); font-size: 18px; flex-shrink: 0; transition: transform 0.2s; }
.faq-answer { display: none; padding: 0 4px 18px; }
.faq-answer p { font-family: var(--sans); font-size: 14.5px; color: var(--muted); line-height: 1.8; margin-bottom: 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-item.open .faq-question { color: var(--teal-dark); }
.faq-item.open .faq-question i { transform: rotate(180deg); }
.faq-item.open .faq-answer { display: block; }
/* ---- Related scroll ---- */
.related-wrap { padding: 30px var(--pad-x); border-top: 1px solid var(--rule); }
.related-wrap h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.related-wrap h2 i { color: var(--teal-ink); font-size: 0.8em; }
.related-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.related-scroll::-webkit-scrollbar { height: 5px; }
.related-scroll::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; }
/* Related row reuses the category .acard design; fix their width so they line
up as a horizontal carousel instead of stretching. */
.related-scroll .acard { flex: 0 0 258px; }
/* Closing tile: "See all in " — a real navigation payoff at the end
of the carousel. Card-height, hairline, no card chrome. */
.related-seeall { flex: 0 0 190px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 22px; border: 1px solid var(--rule); border-radius: 8px; font-family: var(--sans); font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--teal-dark); transition: border-color 0.15s, color 0.15s, transform 0.15s; }
.related-seeall:hover { text-decoration: none; border-color: var(--teal); color: var(--teal-ink); transform: translateY(-2px); }
.related-seeall .ti { font-size: 20px; }
.disclaimer-strip { background: var(--cream); border-top: 1px solid var(--rule); padding: 18px var(--pad-x); }
.disclaimer-strip p { max-width: var(--maxw); margin: 0 auto; font-family: var(--sans); font-size: 12px; color: var(--muted); line-height: 1.65; }
/* ==========================================================================
Category listing page
========================================================================== */
/* One-band scrim'd masthead (audit v1) — illustration background + a left→right
teal scrim; breadcrumb + title + count ride the dark left. Replaces the old
illustration-band-plus-separate-teal-title-band (two bands became one). */
.cat-masthead { position: relative; overflow: hidden; background: var(--teal-darker); }
.cat-masthead-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cat-masthead-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 62, 67, 0.94) 0%, rgba(0, 62, 67, 0.82) 44%, rgba(0, 62, 67, 0.4) 64%, rgba(0, 62, 67, 0) 82%); }
.cat-masthead-body { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--pad-x) clamp(26px, 3.5vw, 40px); min-height: clamp(200px, 20vw, 250px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero-crumb { font-family: var(--sans); font-size: 12.5px; color: var(--on-teal-mut); margin-bottom: 14px; }
.hero-crumb a { color: rgba(251, 249, 243, 0.85); }
.hero-crumb a:hover { color: var(--yellow); }
.cat-masthead h1 { font-family: var(--sans); font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; margin-bottom: 12px; color: var(--on-teal); max-width: 18ch; text-shadow: 0 1px 10px rgba(0, 34, 38, 0.45); }
.category-desc { font-family: var(--sans); font-size: 15px; color: var(--on-teal-mut); max-width: 560px; line-height: 1.55; text-shadow: 0 1px 10px rgba(0, 34, 38, 0.4); }
@media (max-width: 640px) {
/* Shorter band on mobile — flip the scrim bottom-up so the title stays legible. */
.cat-masthead-scrim { background: linear-gradient(0deg, rgba(0, 62, 67, 0.94) 0%, rgba(0, 62, 67, 0.60) 46%, rgba(0, 62, 67, 0.12) 100%); }
.cat-masthead-body { min-height: clamp(180px, 44vw, 230px); }
}
/* "Browse by collection" — subcategory nav on category pages (gives each
subcategory page a second, in-context inbound link). */
.cat-subnav { background: var(--cream); padding: 20px 0 4px; }
.cat-subnav-h { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal-ink); margin-bottom: 12px; }
.cat-subnav-row { display: flex; flex-wrap: wrap; gap: 9px; }
.subnav-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--rule); color: var(--charcoal); font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; transition: border-color 0.15s, color 0.15s; }
.subnav-chip:hover { border-color: var(--teal); color: var(--teal-ink); text-decoration: none; }
.subnav-n { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.subnav-chip:hover .subnav-n { color: var(--teal-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Skip-to-content: off-screen until keyboard focus, then slides into view. */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--teal-dark); color: var(--on-teal); padding: 10px 16px; border-radius: 8px; font-family: var(--sans); font-weight: 600; font-size: 14px; transition: top var(--t-fast); }
.skip-link:focus { top: 12px; text-decoration: none; outline: 2px solid var(--on-teal); outline-offset: 2px; }
main:focus { outline: none; }
/* Card grid */
.cat-grid-section { padding-top: clamp(28px, 4vw, 40px); }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 22px; }
.acard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.acard:hover, .acard:focus-visible { text-decoration: none; border-color: var(--charcoal); transform: translateY(var(--lift-rise)); }
/* The `hidden` attribute (set by search JS) must beat .acard's display:flex. */
.acard[hidden] { display: none; }
.acard-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; min-height: 132px; background-color: #eef0ee; background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 9px); border-bottom: 1px solid var(--rule); }
/* Real activity illustration fills the card image area; placeholder hatch is
dropped when a photo is present. The category tag chip stays on top. */
.acard-img.has-photo, .hp-card-img.has-photo { background: none; overflow: hidden; }
.acard-photo, .hp-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.acard-tag { position: absolute; top: 12px; left: 12px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: var(--teal-dark); padding: 4px 9px; border-radius: 4px; }
.acard-imgname { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.04em; color: rgba(47, 47, 47, 0.32); text-transform: lowercase; text-align: center; padding: 0 18px; }
/* near-neutral, low-chroma per-category tints */
.t-BB { background-color: #eef1ef; } .t-CC { background-color: #f0eef3; } .t-CH { background-color: #eef1f1; }
.t-KT { background-color: #f3efe8; } .t-MH { background-color: #eef0f2; } .t-MP { background-color: #f1eef4; }
.t-SC { background-color: #eef2f2; } .t-TT { background-color: #f2eef0; } .t-VA { background-color: #eef0f3; }
.t-WA { background-color: #eff1ec; }
.acard-body { display: flex; flex-direction: column; flex: 1; padding: 16px 17px; }
.acard-title { font-family: var(--sans); font-size: 16.5px; font-weight: 700; color: var(--charcoal); line-height: 1.3; min-height: 2.58em; margin-bottom: 4px; }
.acard-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule-soft); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.acard-meta-i { display: inline-flex; align-items: center; gap: 5px; }
.acard-meta-i i { color: var(--teal-ink); font-size: 14px; }
.acard-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule); }
.acard-level, .hp-level { color: var(--teal-ink); font-weight: 600; }
.cost-scale { font-size: 13.5px; letter-spacing: 1.5px; line-height: 1; }
.cost-scale i { font-style: normal; color: var(--rule-strong); }
.cost-scale i.on { color: var(--charcoal); }
.skill-meter { display: flex; flex-direction: column; gap: 5px; }
.skill-dots { display: flex; gap: 4px; }
.skill-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); display: block; }
.skill-dots i.on { background: var(--teal); }
.skill-word { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--charcoal); }
/* ==========================================================================
Generic static pages (about, legal, contact)
========================================================================== */
.page-hero { background: var(--teal-dark); color: #fff; padding: clamp(44px, 6vw, 64px) var(--pad-x); }
.page-hero h1 { font-family: var(--serif); font-size: clamp(32px, 5.5vw, 52px); font-weight: 600; letter-spacing: -0.02em; color: var(--on-teal); }
.page-body { max-width: 720px; margin: 0 auto; padding: clamp(32px, 5vw, 52px) var(--pad-x) 60px; }
.page-body h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 32px 0 12px; }
.page-body h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 22px 0 8px; }
.page-body p { font-family: var(--sans); font-size: 16px; line-height: 1.85; margin-bottom: 16px; color: var(--charcoal); }
.page-body ul { margin: 0 0 16px 22px; }
.page-body li { font-family: var(--sans); font-size: 16px; line-height: 1.85; color: var(--charcoal); }
.page-body .updated { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.page-body .lead { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--charcoal); margin-bottom: 22px; }
/* Contact form — editorial underlined fields */
.contact-form { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.contact-form label { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-ink); margin-bottom: 7px; display: block; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; font-family: var(--sans); font-size: 16px; padding: 10px 2px; border: none; border-bottom: 1px solid var(--rule-strong); background: none; color: var(--charcoal); }
.contact-form select { cursor: pointer; }
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-bottom-color: var(--teal); }
/* Keep the global keyboard focus ring; only suppress the outline for mouse focus. */
.contact-form input:focus:not(:focus-visible), .contact-form textarea:focus:not(:focus-visible), .contact-form select:focus:not(:focus-visible) { outline: none; }
.btn-primary { align-self: flex-start; background: var(--yellow); color: var(--charcoal); font-family: var(--sans); font-weight: 600; font-size: 14px; border: none; border-radius: 2px; padding: 13px 30px; cursor: pointer; }
.btn-primary:hover { background: var(--yellow-dark); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ==========================================================================
Footer — dark teal, serif wordmark in yellow
========================================================================== */
/* Footer — the page's ONE deep-teal band (audit v1). Home for Contact + Legal +
language + category shortcuts pulled out of the header. */
.site-footer { background: var(--teal-dark); color: var(--on-teal-mut); margin-top: auto; }
.footer-grid { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--pad-x) 32px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px 28px; }
.footer-logo { display: block; height: 27px; width: auto; margin-bottom: 16px; }
.footer-tagline { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--hero-mint); margin-bottom: 12px; }
.footer-desc { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--on-teal-mut); max-width: 34ch; margin-bottom: 18px; }
.footer-browse { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--on-teal); border-bottom: 1px solid rgba(251, 249, 243, 0.35); padding-bottom: 2px; }
.footer-browse:hover { text-decoration: none; border-color: var(--hero-mint); }
.footer-browse i, .footer-all i { font-size: 15px; }
.footer-eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hero-mint); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col ul a { font-family: var(--sans); font-size: 14px; color: var(--on-teal-mut); }
.footer-col ul a { transition: color 0.15s; }
.footer-col ul a:hover { color: var(--yellow); text-decoration: none; }
.footer-all { display: inline-flex; align-items: center; gap: 5px; color: var(--on-teal); font-weight: 600; }
.footer-bar { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid #0C6A70; padding: 16px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.footer-copy { font-family: var(--font-mono); font-size: 12px; color: var(--on-teal-mut); }
.footer-meta { display: flex; align-items: center; gap: 18px; }
.footer-top { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--on-teal-mut); }
.footer-top:hover { color: var(--on-teal); text-decoration: none; }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 820px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.steps { grid-template-columns: 1fr; }
.step { border-left: none; border-top: 1px solid var(--rule); padding: 20px 0; }
.step:first-child { padding-top: 0; border-top: none; }
.amazon-cards { grid-template-columns: 1fr; }
.stat { flex-basis: 50%; min-width: 0; }
.h1-line2 { margin-left: 0; }
}
@media (max-width: 560px) {
.nav-links { gap: 14px; }
/* On phones the header wraps: logo + links on row 1, full-width search on row 2. */
.nav { height: auto; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px; row-gap: 11px; }
.hdr-search { order: 3; flex: 1 1 100%; }
/* Wrapped header is ~100px tall — drop the sticky jump-rail and anchor offset. */
.dsc-jump { top: 100px; }
.dsc-row { scroll-margin-top: 158px; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
.cat-index a { grid-template-columns: 40px 1fr 24px; gap: 14px; }
.ci-count { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
/* Cards keep the shadow + border on hover/focus, but drop the movement. */
@media (prefers-reduced-motion: reduce) {
.acard:hover, .acard:focus-visible,
.hp-card:hover, .hp-card:focus-visible { transform: none; }
}