/* ============================================================
   COLLECTIVE EDGE — design system v3, "Instrument & Field"
   ------------------------------------------------------------
   One identity, two registers. Tavahn's correction, 2026-07-26:
   not five competing looks, but "a couple different looks where
   we have that clean and kind of digital look, and then
   something a little more organic" — one company in two moods.

     INSTRUMENT  steel and blue-black, mono, tight grid, a single
                 cyan signal. Used for what we SECURE: municipal
                 infrastructure, water, data, proof, capability.
                 His reference: "less hippie, more like cop,
                 like clean security."

     FIELD       cool paper and bone, the serif set large,
                 photography carrying the feeling. Used for what
                 we GROW: land, people, story, portfolio.

   The rule: colour never supplies the warmth — photographs do.
   That is what killed v2, which read (his words) too tan, too
   green, too happy, too hippie.

   Type families are unchanged across both registers; that is
   what makes them one identity rather than two websites.
   ============================================================ */

/* ============================================================
   GROUNDS — night is the default, day is one click away
   ------------------------------------------------------------
   2026-07-27-tavahn-02:276 — "the dark blue is definitely the
   background colour for the steel lane, and I think we should
   have that be the DEFAULT, but have day mode where people can
   click it."
   2026-07-27-tavahn-02:194 — "this page when you click on the
   steel ground is essentially what the whole website should
   look like… you basically nailed it."
   2026-07-27-tavahn-02:270 — "instead of paper and steel we
   call it day and night."

   So: :root is NIGHT. [data-ground="day"] is the override.
   Day is byte-for-byte the palette that shipped before this
   change, except the earth accent, which he closed on the call.

   Every surface flows from --bg / --paper / --ink / --line, so
   the whole site retunes from this block. Nothing below the
   token layer knows which ground it is on.
   ============================================================ */

:root{
  /* ---- the four approved pigments. Identity, not UI text. ----
     Ring semantics are locked; he built the elemental story on
     them and tells it to clients. Do not reassign.
       indigo    O   Sovereignty     water
       verdigris C   Opportunity     air    (what air does to copper)
       ochre     E   Sustainability  earth
       iron ox   bar The edge        fire
     2026-07-27-tavahn-02:301 — "then you have wind, water, fire
     and earth, then you're elemental, you're everything."

     ⚠ These are MARK colours. Measured against both grounds,
     ochre reaches only 3.64:1 on paper and 3.40:1 on steel, and
     verdigris only 4.15:1 on paper — all below AA for small
     text. So the pigments drive rules, bars, the mark and large
     display; the small-text accents below are the same hues
     pulled to a passing contrast on each ground. */
  --indigo:#2B3A5B;
  --verdigris:#3F7A6D;
  --ochre-pigment:#A86B2E;
  --iron-oxide:#7C3B2A;              /* "we redden up that goddamn brown" */

  /* ---- fixed lights and darks ----
     Used anywhere the context is dark on BOTH grounds: the dark
     bands, the quote band, the footer, the intake form. These
     must not flip or the text inverts into its own background. */
  --fixed-light:#E9EBE8;
  --fixed-ink:#0E1418;

  /* ---- NIGHT (default) ---- */
  --bg:#16293A;                      /* the sperm-whale blue */
  --paper:#1E3346;                   /* panels lift off the ground */
  --paper-2:#25405A; --paper-3:#2C4A67;
  --bone:#2A3F52;
  --ink:#DCE6EE;                     /* 11.75:1 */
  --ink-soft:#A2B4C1;                /* 7.1:1  */
  --ink-faint:#8698A8;               /* 5.0:1  */

  --living:#5FD2C9;                  /* 8.18:1 on ground */
  --clay:#D98B70;                    /* iron oxide lifted for steel, 5.58:1 */
  --blueprint:#7FB3D0;               /* 6.56:1 */
  --ochre:#D98B70;
  --datagray:#8EA0AE;

  /* bands recede on night, and the hairline does the separating —
     his note: "the horizontal lines are popping, the white
     through that fucking blue" (2026-07-27-tavahn-02:178) */
  --band-a:#0D1C29; --band-b:#091620;
  --band-edge:rgba(220,230,238,.16);
  --nav-bg:rgba(22,41,58,.93);

  --line:rgba(220,230,238,.18); --line-soft:rgba(220,230,238,.10);
  --tint:rgba(220,230,238,.05); --tint-2:rgba(220,230,238,.09);
  --grid-ink:rgba(127,179,208,.07);

  /* ---- constants, ground-independent ---- */
  --steel:#16293A; --steel-2:#0F1D2A;
  --onsteel:#DCE6EE; --onsteel-soft:#93A7B6;
  --signal:#3DA9A2; --signal-lum:#5FD2C9;
  --forest:#0F1D2A; --forest-2:#16293A;
  --living-lum:#5FD2C9; --amber:#C7B79A; --sensor:#5FD2C9;
  --line-lum:rgba(95,210,201,.22);

  --display:"Fraunces",Georgia,serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Menlo,monospace;
  --wrap:1080px; --wrap-wide:1240px;
}

/* ---- DAY ---- the field register: paper, four pigments, warm.
   Hand this link to schools, community and homesteaders. */
:root[data-ground="day"]{
  --bg:#E9EBE8;
  --paper:#E9EBE8; --paper-2:#DFE2DE; --paper-3:#D2D7D2;
  --bone:#D9D3C6;
  --ink:#0E1418;                     /* 15.47:1 */
  --ink-soft:#39434A;                /* 8.44:1  */
  --ink-faint:#5C666D;               /* 4.90:1  */

  --living:#2F6D5F;                  /* verdigris, darkened to 5.04:1 */
  --clay:#7C3B2A;                    /* iron oxide itself — 6.96:1 on paper */
  --blueprint:#446E8C;               /* 4.54:1 */
  --ochre:#7C3B2A;
  --datagray:#6B767E;
  --sensor:#2F6D5F;

  --band-a:#0F1D2A; --band-b:#16293A;
  --band-edge:transparent;
  --nav-bg:rgba(233,235,232,.92);

  --line:rgba(14,20,24,.16); --line-soft:rgba(14,20,24,.08);
  --tint:rgba(14,20,24,.03); --tint-2:rgba(14,20,24,.06);
  --grid-ink:rgba(78,124,151,.075);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--ink);transition:background-color .32s ease,color .32s ease;font-family:var(--body);font-size:1.02rem;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;max-width:100%}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.wrap-wide{max-width:var(--wrap-wide)}
a{color:inherit}
img{max-width:100%;display:block}
em{font-style:italic}
[hidden]{display:none !important}
:focus-visible{outline:2.5px solid var(--living);outline-offset:3px}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--fixed-ink);color:var(--fixed-light);padding:.7rem 1rem;border-radius:3px;font-size:.75rem;font-weight:600}

/* ---------- type utilities ---------- */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.display{font-family:var(--display);font-weight:500;letter-spacing:-.012em;line-height:1.06}
.markname{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;border:1px solid var(--line);border-radius:2px;padding:.45rem .7rem;display:inline-block}
.note{margin-top:1.6rem;font-size:.97rem;color:var(--ink-soft);font-style:italic;max-width:62ch;line-height:1.68}
.handnote{font-family:var(--display);font-style:italic;font-weight:400;color:var(--ochre);font-size:.98rem}
.tilt{display:inline-block;transform:rotate(-1.6deg)}

/* the data voice — mono chips */
.datum{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sensor);border:1px solid rgba(61,169,162,.32);border-radius:2px;padding:.34rem .6rem;display:inline-block;background:rgba(61,169,162,.05);white-space:nowrap}
.datum b{color:var(--ink);font-weight:500}
.datum-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}

/* dimension line (blueprint margin device) */
.dim{position:relative;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--blueprint);text-transform:uppercase}
.dim::before,.dim::after{content:'';position:absolute;background:var(--blueprint);opacity:.55}

/* ---------- blueprint grid + contour layers ---------- */
.bp-grid{position:relative}
.bp-grid::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(0deg, var(--grid-ink) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid-ink) 0 1px, transparent 1px 64px);
}
.bp-grid > *{position:relative;z-index:1}
.band-dark.bp-grid::before{background:
    repeating-linear-gradient(0deg, rgba(95,210,201,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(95,210,201,.05) 0 1px, transparent 1px 64px);}

.contours{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.contours svg{width:140%;height:100%;min-width:1400px}
@media (prefers-reduced-motion:no-preference){
  .contours svg{animation:drift 46s ease-in-out infinite alternate}
  .contours.slow svg{animation-duration:70s}
}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-6%)}}

/* self-drawing paths (growth curves, contour reveals) */
.draw path{stroke-dasharray:1600;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .draw path{stroke-dashoffset:1600;transition:stroke-dashoffset 2.4s cubic-bezier(.3,.6,.2,1)}
  .draw.in-view path{stroke-dashoffset:0}
}

/* sensor constellation points */
.sensor-pt circle{fill:none;stroke:var(--blueprint);stroke-width:1.4}
.sensor-pt .core{fill:var(--living);stroke:none}
@media (prefers-reduced-motion:no-preference){
  .sensor-pt .halo{transform-origin:center;transform-box:fill-box;animation:pulse 3.2s ease-out infinite}
}
@keyframes pulse{0%{transform:scale(.4);opacity:.85}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line-soft);box-shadow:0 2px 8px rgba(14,20,24,.04)}
.nav-inner{max-width:var(--wrap-wide);margin:0 auto;padding:.9rem clamp(1.25rem,5vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0}
.nav .brand{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:var(--ink);text-decoration:none;
  /* min-width:0 lets this flex item shrink below its own text width, which it
     regularly needs to (measured: 227px of content in a row that only has
     ~1144px total for four items — see the nav-inner comment below). Without
     overflow:hidden the shrunk box doesn't clip the overflowing glyphs, so
     they render on top of the next nav link instead — the header-overlap bug.
     inline-block+ellipsis is the safety net: it degrades to a clipped "OUR
     COLLECTIVE ED…" instead of overlapping text if the row is ever this
     tight again. 2026-08-11. */
  display:inline-block;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav ul{list-style:none;display:flex;gap:1.5rem;align-items:center}
/* Six items since "Current projects" joined the nav on 2026-08-06, and the CTA
   is a full sentence of his copy. Measured at 1440: brand + six links + toggle
   + CTA came to ~1311px inside a ~1304px track, so every label wrapped down a
   line. Three things fix it and all three are needed — labels never break
   mid-phrase, the gaps tighten from 1500 rather than 1240, and the hamburger
   takes over at 1140 instead of 920.

   ⚠️ If a seventh nav item is ever added, re-measure at 1440 before shipping.
   This row has no slack left in it. */
.nav ul a{white-space:nowrap}
@media (max-width:1500px){ .nav ul{gap:1.05rem} .nav-inner{gap:.7rem} .nav .cta{padding:.55rem .7rem} }
@media (max-width:1320px){ .nav ul{gap:.75rem} .nav ul a{font-size:.67rem;letter-spacing:.02em} }
.nav ul a{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ink-soft);text-decoration:none;transition:color .2s,border-bottom-color .2s;position:relative;padding-bottom:.2rem;border-bottom:1px solid transparent}
.nav ul a:hover{color:var(--ink);border-bottom-color:var(--living)}
.nav ul a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--clay)}
/* Two-line CTA. Was one line of his full sentence (~298px, no slack in the
   row — see the nav-inner budget note above .nav-toggle). Splitting the ask
   from the urgency onto its own smaller, muted, italic line keeps both
   phrases but claims less than half the horizontal width, since the widest
   line is now "Contact us today" rather than the whole sentence. The two
   spans are sized in em so the existing mobile collapse (.nav .cta{font-size:0})
   still zeroes them both out untouched — see the 720px rule below. 2026-08-11. */
.nav .cta{font-family:var(--mono);font-size:.72rem;border:1.5px solid var(--ink);border-radius:3px;padding:.5rem .85rem;color:var(--ink);text-decoration:none;transition:all .22s;white-space:nowrap;
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;line-height:1.2}
.nav .cta .cta-main{font-size:1em;letter-spacing:.06em;text-transform:uppercase}
.nav .cta .cta-sub{font-family:var(--display);font-style:italic;font-weight:400;font-size:.92em;letter-spacing:0;color:var(--ink-faint);transition:color .22s}
.nav .cta:hover{background:var(--ink);color:var(--bg)}
.nav .cta:hover .cta-sub{color:var(--bg);opacity:.7}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:3px;padding:.5rem .65rem;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink);min-height:44px}
/* Measured, not guessed: brand 227 + six links 547 + ground toggle 45 + CTA 298
   + gaps 34 = 1151px of content, and the wrap padding adds 96. So the row needs
   ~1262px of viewport and the hamburger has to take over below ~1280. It used
   to be 920, which was right for five shorter labels and a narrower row. */
@media (max-width:1280px){
  .nav ul{display:none}
  .nav-toggle{display:inline-block}
  .nav.open ul{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(14,20,24,.12)}
  .nav.open ul li{width:100%}
  .nav.open ul a{display:block;padding:1rem clamp(1.25rem,5vw,3rem);border-bottom:1px solid var(--line-soft);width:100%}
}

/* Phone nav width budget. Measured 2026-08-10 on a 390px viewport: brand 227
   + menu + day + the full-sentence CTA (297px, white-space:nowrap) forced
   document scrollWidth to ~685px. Body overflow-x hid the sideways scroll at
   1× zoom, but iOS pinch-zoom-out revealed a blank rail beside the page —
   Khalob's IMG_3293. Shorten the bar label below 720; keep the HTML text so
   the accessible name stays the full sentence. Tighten brand tracking so the
   row still fits a 320 logical-pixel phone. */
@media (max-width:720px){
  .nav-inner{gap:.4rem;padding:.75rem clamp(.85rem,4vw,1.25rem)}
  .nav .brand{letter-spacing:.12em;font-size:.66rem;min-height:44px;display:inline-flex;align-items:center}
  .nav .brand .mk{--mk-size:20px}
  .nav .cta{
    font-size:0;
    letter-spacing:0;
    padding:.55rem .75rem;
    flex:0 0 auto;
    max-width:none;
    min-height:44px;
    display:inline-flex;
    flex-direction:row;
    align-items:center;
  }
  .nav .cta::after{
    content:"Contact";
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .ground-toggle{margin-left:auto;margin-right:0;padding:.55rem .65rem;min-height:44px;min-width:44px}
}
@media (max-width:360px){
  /* Mark carries the brand; the wordmark no longer fits beside Menu + Day + Contact. */
  .nav .brand > span:not(.mk){
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
  }
}

/* ---------- page hero (subpages) ---------- */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:clamp(3.4rem,7vw,5.2rem) 0}
.page-hero .crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--living);display:block;margin-bottom:1.1rem;font-weight:500}
.page-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,1.7rem + 2.8vw,3.6rem);line-height:1.1;letter-spacing:-.015em;max-width:22ch}
.page-hero .lede{margin-top:1.3rem;color:var(--ink-soft);max-width:62ch;font-size:1.12rem;line-height:1.7}

/* ---------- SECTIONS ---------- */
section{padding:clamp(3.6rem,7vw,5.8rem) 0;border-bottom:1px solid var(--line);position:relative}
.sec-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;color:var(--living);display:block;margin-bottom:1.1rem;font-weight:500;text-transform:uppercase}
.sec-title{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,1.5rem + 2vw,2.85rem);line-height:1.12;letter-spacing:-.015em;max-width:25ch}
.sec-lede{margin-top:1.4rem;color:var(--ink-soft);max-width:66ch;font-size:1.1rem;line-height:1.72}
p.body{margin-top:1.3rem;max-width:68ch;color:var(--ink);line-height:1.75}
p.body + p.body{margin-top:1.4rem}
.more-link{display:inline-flex;align-items:center;min-height:44px;margin-top:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);text-decoration:none;border-bottom:1px solid rgba(178,106,56,.4);padding:.45rem 0;transition:all .2s;font-weight:600}
.more-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* dark bands (deep forest) */
.band-dark{background:linear-gradient(168deg, var(--band-a) 0%, var(--band-b) 100%);color:var(--fixed-light);border-top:1px solid var(--band-edge);border-bottom:1px solid var(--band-edge);position:relative;overflow:hidden}
.band-dark .sec-num{color:var(--living-lum)}
.band-dark .sec-title{color:var(--fixed-light)}
.band-dark .sec-lede{color:rgba(233,235,232,.75)}
.band-dark p.body{color:rgba(233,235,232,.85)}
.band-dark .note{color:rgba(233,235,232,.6)}
.band-dark .datum{color:var(--living-lum);border-color:rgba(95,210,201,.3);background:rgba(95,210,201,.06)}
.band-dark .datum b{color:var(--fixed-light)}
.band-dark .more-link{color:var(--amber);border-bottom-color:rgba(224,175,122,.4)}
.band-dark .more-link:hover{color:var(--fixed-light);border-bottom-color:var(--fixed-light)}
.band-dark .handnote{color:var(--amber)}

/* Topographic horizon on dark bands — Creasol's contour device, retinted to
   the collective's living cyan so the mark colours stay the authority. Opt in
   with .band-dark.topo; content stays above via z-index. */
.band-dark.topo > *:not([aria-hidden="true"]){position:relative;z-index:1}
.band-dark.topo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:36%;
  background:url(/img/texture/topo-horizon.webp) center bottom / cover no-repeat;
  -webkit-mask-image:linear-gradient(to top,#000 32%,transparent);
          mask-image:linear-gradient(to top,#000 32%,transparent);
  filter:sepia(1) hue-rotate(132deg) saturate(2.6) brightness(1.2);
  opacity:.26;pointer-events:none;z-index:0;
}

/* Terrain map strip — horizontal scroll of site-analysis plates. The product
   is the reading of the ground; these plates are that reading, not decoration. */
.terrain{margin-top:2rem;display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.7rem;-webkit-overflow-scrolling:touch}
.terrain figure{flex:0 0 min(72%,340px);margin:0;scroll-snap-align:start;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper)}
.terrain img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.terrain figcaption{padding:.65rem .85rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--line-soft)}
.terrain::-webkit-scrollbar{height:6px}
.terrain::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.band-dark .terrain figure{border-color:rgba(233,235,232,.16);background:rgba(15,29,42,.55)}
.band-dark .terrain figcaption{color:rgba(233,235,232,.55);border-top-color:rgba(233,235,232,.12)}
.terrain-note{margin-top:.35rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.band-dark .terrain-note{color:rgba(233,235,232,.45)}

/* Ground photography strip — ambient delivered-work photos without inventing
   project claims. Cover crop, not contain: these are photographs, not plans. */
.ground-strip{margin-top:2.2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.ground-strip figure{margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper-3)}
.ground-strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease}
.ground-strip figure:hover img{transform:scale(1.03)}
.ground-strip figcaption{padding:.55rem .7rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:900px){ .ground-strip{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .ground-strip{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .ground-strip img,.ground-strip figure:hover img{transition:none;transform:none} }

/* ink quote band (kept from v1) */
.band-quote{background:var(--fixed-ink);color:var(--fixed-light);border-bottom:none;position:relative}
.band-quote .sec-num{color:#8FB2C4}
.pull{margin:2.6rem 0 0;max-width:34ch}
.pull blockquote{font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(1.5rem,1.25rem + 1.2vw,2.15rem);line-height:1.28;letter-spacing:-.012em}
.band-quote .pull blockquote{color:var(--fixed-light)}
.pull cite{display:block;margin-top:1.1rem;font-family:var(--mono);font-style:normal;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.band-quote .pull cite{color:rgba(233,235,232,.65)}

/* promise block */
.promise{margin-top:2.2rem;border-left:3px solid var(--clay);padding:.6rem 0 .6rem 1.8rem;max-width:62ch;background:rgba(178,106,56,.04);border-radius:0 2px 2px 0}
.promise b{font-family:var(--display);font-weight:500;font-style:italic;font-size:1.5rem;display:block;margin-bottom:.5rem;line-height:1.25}
.band-dark .promise{background:rgba(224,175,122,.06);border-left-color:var(--amber)}
.band-dark .promise b{color:var(--fixed-light)}

/* ethics chips */
.ethics-row{margin-top:2.4rem;display:flex;gap:.8rem;flex-wrap:wrap}
.ethics-row span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;padding:.6rem .95rem;border:1px solid var(--line);border-radius:3px;color:var(--ink-soft);transition:all .18s;background:var(--tint)}
.ethics-row span:hover{border-color:var(--ink-soft);background:var(--tint)}

/* ---------- buttons ---------- */
.btn{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:.8rem 1.35rem;border-radius:3px;transition:all .22s ease;cursor:pointer;display:inline-block;border:1.5px solid;font-weight:500}
.btn-solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-solid:hover{background:var(--sensor);border-color:var(--sensor);transform:translateY(-1px);box-shadow:0 4px 14px rgba(61,169,162,.22)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--tint)}
.band-dark .btn-solid{background:var(--fixed-light);color:var(--fixed-ink);border-color:var(--fixed-light)}
.band-dark .btn-solid:hover{background:var(--living-lum);border-color:var(--living-lum);color:var(--forest)}
.band-dark .btn-ghost{color:var(--fixed-light);border-color:rgba(233,235,232,.35)}
.band-dark .btn-ghost:hover{border-color:var(--fixed-light);background:rgba(233,235,232,.06)}

/* ---------- margin annotation card ---------- */
.annot{border:1px solid rgba(155,127,95,.5);background:var(--paper);border-radius:3px;padding:1.1rem 1.25rem;max-width:19rem;box-shadow:0 2px 10px rgba(14,20,24,.05)}
.annot .a-eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--datagray);display:block;margin-bottom:.5rem}
.annot p{font-family:var(--display);font-style:italic;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.annot .spark{margin-top:.7rem}

/* ---------- cards & grids ---------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:2.4rem;box-shadow:0 2px 8px rgba(14,20,24,.05)}
.tri{background:var(--paper);padding:1.8rem;border-top:4px solid var(--ink);transition:all .24s ease;position:relative}
.tri:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,20,24,.09)}
.tri.form{border-top-color:var(--clay)} .tri.systems{border-top-color:var(--blueprint)} .tri.life{border-top-color:var(--living)}
.tri .role{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--living);display:block;margin-bottom:.85rem;font-weight:500}
.tri h3{font-family:var(--display);font-weight:500;font-size:1.4rem;margin-bottom:.6rem;line-height:1.15}
.tri p{color:var(--ink-soft);font-size:.95rem;line-height:1.65}
@media (max-width:780px){ .triad{grid-template-columns:1fr} }

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:2rem;box-shadow:0 1px 4px rgba(14,20,24,.04)}
.card{background:var(--paper);padding:1.8rem;min-height:200px;display:flex;flex-direction:column;gap:.9rem;transition:all .24s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(14,20,24,.08)}
/* A last card landing in column 2 of a 3-up grid leaves a dead cell beside it.
   Let it span the gap instead — applies to the 5 services and the 5 people. */
.cards > .card:last-child:nth-child(3n+2){grid-column:span 2}
.card h4{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.2}
.card .meta{color:var(--ink-soft);font-size:.95rem;flex-grow:1;line-height:1.7}
.card .role{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--living);font-weight:600;text-transform:uppercase}
.card .card-link{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--clay);text-decoration:none;font-weight:600;text-transform:uppercase}
.card .card-link:hover{color:var(--ink)}
@media (max-width:780px){ .cards{grid-template-columns:1fr} }

/* offer list (business in a box) */
.offer-grid{margin-top:2.2rem;display:grid;grid-template-columns:1.05fr 1fr;gap:2.8rem;align-items:start}
.offer-list{list-style:none;border-top:2px solid rgba(233,235,232,.5);margin-top:.4rem}
.offer-list li{padding:1rem 0;border-bottom:1px solid rgba(233,235,232,.14);display:grid;grid-template-columns:minmax(11rem,auto) 1fr;gap:1rem;align-items:baseline;transition:padding .18s}
@media (max-width:640px){ .offer-list li{grid-template-columns:1fr;gap:.35rem} }
.offer-list li:hover{padding-left:.2rem}
.offer-list li .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--living-lum);min-width:9rem;font-weight:600}
.offer-list li .v{color:rgba(233,235,232,.78);font-size:.97rem;line-height:1.65}
.light .offer-list{border-top-color:var(--ink-soft)}
.light .offer-list li{border-bottom-color:var(--line-soft)}
.light .offer-list li .k{color:var(--living)}
.light .offer-list li .v{color:var(--ink-soft)}
@media (max-width:780px){ .offer-grid{grid-template-columns:1fr;gap:1.8rem} .offer-list li{flex-direction:column;gap:.3rem} }

/* offer groups (services catalog) */
.ogroup{margin-top:2.4rem}
.ogroup h4{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding-bottom:.9rem;border-bottom:2px solid var(--ink);color:var(--ink)}
.ogroup ul{list-style:none;margin-top:.2rem}
.ogroup li{padding:1rem 0;border-bottom:1px solid var(--line-soft);transition:padding .18s}
.ogroup li:hover{padding-left:.15rem}
.ogroup li b{font-weight:600;color:var(--ink)} .ogroup li span{color:var(--ink-soft);font-size:.96rem;line-height:1.6}

/* catalog columns */
.catalog{margin-top:2.2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 2.8rem}
.catcol h5{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--living);margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:2px solid var(--line);font-weight:600}
.catcol p{font-size:.96rem;color:var(--ink-soft);line-height:1.7}
@media (max-width:680px){ .catalog{grid-template-columns:1fr;gap:1.6rem 2rem} }

/* tier ladder table */
.ladder-table{margin-top:2.4rem;border:1px solid var(--line);border-radius:4px;overflow:hidden;font-size:.94rem;box-shadow:0 1px 4px rgba(14,20,24,.03)}
.ladder-table .lr{display:grid;grid-template-columns:56px 1.1fr 1.6fr .9fr;gap:1.2rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line-soft);align-items:baseline;transition:background .18s}
.ladder-table .lr:hover{background:var(--tint)}
.ladder-table .lr:last-child{border-bottom:none}
.ladder-table .lr.head{background:var(--paper-2);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.ladder-table .tno{font-family:var(--mono);color:var(--sensor);font-weight:600}
.ladder-table .tname{font-weight:600;color:var(--ink)}
.ladder-table .tchar{color:var(--ink-soft);line-height:1.6}
.ladder-table .tcost{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft)}
@media (max-width:680px){ .ladder-table .lr{grid-template-columns:40px 1fr;gap:.6rem} .ladder-table .tchar,.ladder-table .tcost{grid-column:2} }

/* house rules */
.rules{margin-top:2.4rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(14,20,24,.03)}
.rule{background:var(--paper);padding:1.4rem 1.6rem;display:flex;gap:1.1rem;transition:background .18s;align-items:flex-start}
.rule .rn{font-family:var(--mono);font-size:.78rem;color:var(--clay);padding-top:.25rem;font-weight:600;min-width:2rem}
.rule p{font-size:.97rem;line-height:1.68;color:var(--ink)}
@media (max-width:680px){ .rules{grid-template-columns:1fr} }

/* serve ladder + tags + verticals */
.ladder{margin-top:2rem;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(14,20,24,.03)}
.rung{display:grid;grid-template-columns:170px 1fr;gap:1.2rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line-soft);align-items:center;transition:background .18s}
.rung:hover{background:var(--tint)}
.rung:last-child{border-bottom:none}
.rung b{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--living);font-weight:600;text-transform:uppercase}
.rung span{color:var(--ink-soft);font-size:.97rem;line-height:1.65}
@media (max-width:600px){ .rung{grid-template-columns:1fr;gap:.4rem} }
.serve-tags{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem}
.serve-tags span{font-family:var(--mono);font-size:.7rem;padding:.6rem 1rem;border:1px solid var(--line);border-radius:3px;color:var(--ink-soft);transition:all .18s;background:var(--tint);letter-spacing:.05em}
.serve-tags span:hover{border-color:var(--ink-soft)}
.verticals{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(14,20,24,.03)}
.vert{background:var(--paper);padding:1.7rem;transition:all .24s ease}
.vert:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(14,20,24,.07)}
.vert h4{font-family:var(--display);font-weight:500;font-size:1.2rem;margin-bottom:.7rem;line-height:1.15}
.vert p{color:var(--ink-soft);font-size:.95rem;line-height:1.7}
@media (max-width:780px){ .verticals{grid-template-columns:1fr} }

/* campaign spots */
.anthem{margin-top:2.4rem;border-left:3px solid var(--clay);padding-left:1.8rem;max-width:62ch;position:relative;z-index:1}
.anthem h3{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,1.3rem + 1.5vw,2.2rem);line-height:1.2;margin-bottom:1rem;color:var(--fixed-light)}
.anthem p{color:rgba(233,235,232,.8);font-size:1.04rem;line-height:1.75}
.anthem .signoff{margin-top:1.2rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--amber);font-weight:500}
.spots{margin-top:2.8rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(233,235,232,.12);border:1px solid rgba(233,235,232,.16);border-radius:4px;overflow:hidden;position:relative;z-index:1}
.spot{background:rgba(15,29,42,.6);padding:1.8rem;transition:all .24s ease;display:flex;flex-direction:column}
.spot:hover{background:rgba(22,41,58,.85);transform:translateY(-2px)}
.spots.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){ .spots.three{grid-template-columns:1fr} }
.spot .st{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--living-lum);display:block;margin-bottom:.9rem;font-weight:500}
.spot h4{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.25;margin-bottom:.7rem;color:var(--fixed-light)}
.spot p{color:rgba(233,235,232,.75);font-size:.95rem;line-height:1.7;flex-grow:1}
.spot .signoff{margin-top:1.2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--amber);font-weight:500}
@media (max-width:680px){ .spots{grid-template-columns:1fr} }

/* membership list */
.memlist{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2.2rem}
.memlist div{display:flex;gap:.8rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);font-size:.97rem;line-height:1.6}
.memlist .dot{color:var(--living);font-weight:600;font-size:1.1rem}
.band-dark .memlist div{border-bottom-color:rgba(233,235,232,.12);color:rgba(233,235,232,.8)}
.band-dark .memlist .dot{color:var(--living-lum)}
@media (max-width:600px){ .memlist{grid-template-columns:1fr} }

/* featured project */
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-top:2rem;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--paper);text-decoration:none;color:inherit;box-shadow:0 2px 10px rgba(14,20,24,.05);transition:transform .24s ease,box-shadow .24s ease}
.feature:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,20,24,.13)}
.feature-media{position:relative;overflow:hidden;min-height:300px;background:var(--paper-3)}
.feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.feature:hover .feature-media img{transform:scale(1.04)}
.feature-media .stamp{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.45rem;flex-wrap:wrap}
.feature-media .stamp span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fixed-light);background:rgba(15,29,42,.72);backdrop-filter:blur(4px);border:1px solid rgba(233,235,232,.25);border-radius:2px;padding:.34rem .55rem}
.feature-body{padding:2rem 2.2rem;display:flex;flex-direction:column;justify-content:center}
.feature-body .ct{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--living);font-weight:600;margin-bottom:.9rem}
.feature-body h3{font-family:var(--display);font-weight:500;font-size:1.55rem;line-height:1.16;margin-bottom:.7rem;color:var(--ink)}
.feature-body .meta{color:var(--ink-soft);font-size:.98rem;line-height:1.7}
.feature-link{margin-top:1.3rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--clay);font-weight:600;transition:color .2s}
.feature:hover .feature-link{color:var(--ink)}
@media (max-width:780px){ .feature{grid-template-columns:1fr} .feature-media{min-height:220px} }

/* engage phases */
.phases{margin-top:2.2rem;counter-reset:ph}
.phase{display:grid;grid-template-columns:52px 1fr;gap:1.4rem;padding:1.5rem 0;border-bottom:1px solid var(--line-soft);align-items:start;transition:padding .18s}
.phase:hover{padding-left:.2rem}
.phase:last-child{border-bottom:none}
.phase .pn{counter-increment:ph;font-family:var(--mono);font-size:.88rem;color:var(--living);padding-top:.3rem;font-weight:600}
.phase .pn::before{content:"0" counter(ph)}
.phase h4{font-family:var(--display);font-weight:500;font-size:1.35rem;margin-bottom:.5rem;line-height:1.15}
.phase p{color:var(--ink-soft);font-size:.98rem;max-width:62ch;line-height:1.7}
.phase .deliver{margin-top:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--clay);font-weight:500}

/* compact phase strip (homepage) */
.phase-strip{margin-top:2.6rem;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.pstep{background:var(--paper);padding:1.3rem 1.1rem;position:relative;transition:background .2s}
.pstep:hover{background:var(--paper-2)}
.pstep .pn{font-family:var(--mono);font-size:.72rem;color:var(--sensor);font-weight:600;display:block;margin-bottom:.55rem}
.pstep h4{font-family:var(--display);font-weight:500;font-size:1.02rem;line-height:1.2;margin-bottom:.4rem}
.pstep p{font-size:.8rem;color:var(--ink-soft);line-height:1.5}
@media (max-width:920px){ .phase-strip{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .phase-strip{grid-template-columns:repeat(2,1fr)} }

/* ---------- signup / contact ---------- */
.contact{border-bottom:none}
.contact-lede{margin-top:1.2rem;color:rgba(233,235,232,.78);max-width:54ch;font-size:1.1rem;line-height:1.7}
.signup{margin-top:2.2rem;max-width:38rem}
.signup-row{display:flex;gap:.8rem;flex-wrap:wrap}
.signup input[type=email],.signup textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--fixed-light);background:rgba(233,235,232,.08);border:1.5px solid rgba(233,235,232,.32);border-radius:3px;padding:.9rem 1rem;transition:all .22s}
.signup input[type=email]{flex:1;min-width:min(14rem,100%)}
@media (max-width:520px){
  .signup-row{flex-direction:column}
  .signup input[type=email]{min-width:0;width:100%}
  .signup .btn-solid{width:100%}
}
.signup input::placeholder,.signup textarea::placeholder{color:rgba(233,235,232,.5)}
.signup input:focus,.signup textarea:focus{border-color:var(--living-lum);background:rgba(233,235,232,.12);outline:none;box-shadow:0 0 0 3px rgba(95,210,201,.15)}
.signup textarea{margin-top:.8rem;resize:vertical;font-family:var(--body)}
.signup .btn-solid{background:var(--fixed-light);color:var(--fixed-ink);border-color:var(--fixed-light);white-space:nowrap;font-weight:600}
.signup .btn-solid:hover{background:var(--living-lum);color:var(--forest);border-color:var(--living-lum);transform:translateY(-1px)}
.signup .btn-solid:disabled{opacity:.5;cursor:default;transform:none}
.signup-status{margin-top:.9rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--amber);min-height:1.3em;font-weight:500}
.signup-alt{margin-top:1.1rem;font-size:.88rem;color:rgba(233,235,232,.65)}
.signup-alt a{color:rgba(233,235,232,.9);text-decoration:underline;transition:color .18s}
.signup-alt a:hover{color:var(--fixed-light)}
.signup-thanks{margin-top:2.2rem;border-left:3px solid var(--amber);padding-left:1.8rem;max-width:42rem}
/* Shown only when a submission failed, so the address is reachable by hand. */
.signup-fallback{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.9rem;padding:.8rem 1rem;border:1.5px solid rgba(233,235,232,.28);border-radius:3px;background:rgba(233,235,232,.06)}
.signup-fallback-address{font-family:var(--mono);font-size:.86rem;color:var(--fixed-light);text-decoration:underline}
.signup-fallback-copy{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(233,235,232,.8);background:none;border:1.5px solid rgba(233,235,232,.32);border-radius:3px;padding:.4rem .8rem;cursor:pointer;transition:all .18s}
.signup-fallback-copy:hover{color:var(--fixed-light);border-color:var(--fixed-light)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--band-edge);background:linear-gradient(180deg, #0F1D2A 0%, #080F16 100%);color:rgba(233,235,232,.75);padding:clamp(2.8rem,6vw,3.8rem) 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4rem;max-width:var(--wrap-wide);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.foot-brand .fn{font-family:var(--display);font-weight:500;font-size:1.5rem;color:var(--fixed-light);margin-bottom:.8rem;line-height:1.1}
/* The rule running off the wordmark IS the edge in "Our Collective Edge" — Tavahn
   found it himself on the drawing stamp and asked for it here: "when it's written
   out like that like at the footer, that line is the edge" (2026-07-27-tavahn-02).
   .fn is already display:flex, so the pseudo-element becomes a flex item. */
.foot-brand .fn::after{content:'';flex:1 1 auto;height:1px;background:rgba(233,235,232,.4);align-self:center}
.foot-brand p{font-size:.93rem;max-width:36ch;line-height:1.75}
footer h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,235,232,.6);margin-bottom:1.1rem;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:.7rem}
footer a{color:rgba(233,235,232,.85);text-decoration:none;font-size:.93rem;transition:color .18s}
footer a:hover{color:var(--fixed-light)}
footer li a{display:inline-flex;align-items:center;min-height:40px;padding:.2rem 0}
.foot-bottom a{display:inline-flex;align-items:center;min-height:40px}
.foot-bottom{max-width:var(--wrap-wide);margin:2.8rem auto 0;padding:1.8rem clamp(1.25rem,5vw,3rem);border-top:1px solid rgba(233,235,232,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:rgba(233,235,232,.6)}
@media (max-width:780px){ .foot-grid{grid-template-columns:1fr;gap:2rem} }

/* ---------- entrance / reveal ---------- */
.fx{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:no-preference){
  .fx{opacity:0;transform:translateY(16px);will-change:opacity,transform}
  .fx.reveal-now{animation:revealUp .7s cubic-bezier(.16,.77,.2,.92) forwards}
}
@keyframes revealUp{to{opacity:1;transform:none}}
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.16,.77,.2,.92), transform .65s cubic-bezier(.16,.77,.2,.92)}
  .reveal.in-view{opacity:1;transform:none}
}
@media print{
  .nav{position:static}
  section,.band-dark,.band-quote,footer{background:#fff !important;color:#000 !important}
  section{break-inside:avoid}
}

/* ---------- product pages: process strip + capture slots ----------
   The design process is the proof. Tavahn: people must see how a plan is
   made, "so they don't think we're spitting a bunch of words at Claude and
   sending a bunch of renderings." Slots are deliberately visible and labelled
   so Neal and Adriana know exactly what to shoot. */
.procshots{margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.procshot{border:1px dashed var(--line);border-radius:4px;background:var(--paper-2);min-height:186px;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;gap:.35rem}
.procshot .pl{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blueprint)}
.procshot .pd{font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.procshot img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.procshot.filled{border-style:solid;padding:0;background:var(--paper-3)}
.band-dark .procshot{border-color:rgba(233,235,232,.22);background:rgba(15,29,42,.55)}
.band-dark .procshot .pl{color:var(--living-lum)}
.band-dark .procshot .pd{color:rgba(233,235,232,.7)}
.band-dark .procshot.filled{border-color:rgba(233,235,232,.18);background:rgba(15,29,42,.7)}
.band-dark .note a{color:var(--amber)}
.band-dark .note a:hover{color:var(--fixed-light)}
@media (max-width:820px){ .procshots{grid-template-columns:1fr} }

/* a reconstructed image is never presented as a photograph */
.recon{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);border:1px solid var(--clay);border-radius:2px;padding:.24rem .5rem;display:inline-block}

/* product index */
.prodlist{margin-top:2.4rem;display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.prodlist a{background:var(--paper);padding:1.7rem 1.8rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:baseline;text-decoration:none;transition:background .2s}
.prodlist a:hover{background:var(--paper-2)}
.prodlist .pn{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--living)}
.prodlist h3{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1.15;letter-spacing:-.01em}
.prodlist p{margin-top:.4rem;color:var(--ink-soft);font-size:.95rem;line-height:1.6;max-width:64ch}
.prodlist .go{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);white-space:nowrap}
@media (max-width:680px){ .prodlist a{grid-template-columns:1fr;gap:.5rem} .prodlist .go{display:none} }

/* ============================================================
   THE MARK, AND THE DAY / NIGHT CONTROL
   ============================================================ */

/* The nav mark is drawn from the ground's own ink, so it is never
   the colour mark sitting on steel — the one misuse rule he read
   aloud and endorsed. 2026-07-27-tavahn-03:7 — "instrument steel
   that shows just the white circles with the blue background, and
   that shit looks so professional." One element, both grounds. */
.mk{width:var(--mk-size,24px);height:var(--mk-size,24px);flex:0 0 auto;display:block;background:currentColor;
  -webkit-mask:url(/img/identity/oce-mark-primary.svg) center/contain no-repeat;
          mask:url(/img/identity/oce-mark-primary.svg) center/contain no-repeat}

/* Findable, not loud. Both of his instructions pull against each
   other and both are real: "it shows people that they can interact
   with our design choices, that's genius" (02:266) and "there can
   be a button hidden somewhere that says switch to day mode"
   (03:52). So: present on every page, in the nav, quiet, and never
   competing with the CTA. */
/* A real switch, not a word in a box — it read as a second nav button
   fighting the CTA for attention. Track + sliding thumb; the accessible
   name still comes from the dynamic aria-label the bootstrap script sets
   ("Switch to day/night mode"), and .gt-off/.gt-on stay in the DOM for that
   but are visually hidden (sr-only) rather than the old display swap that
   showed literal "Day"/"Night" text. 2026-08-11. */
.ground-toggle{background:none;border:none;cursor:pointer;padding:.5rem;
  min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-faint);transition:color .2s}
.ground-toggle:hover{color:var(--ink)}
.ground-toggle .gt-switch{position:relative;flex:0 0 auto;width:2.3rem;height:1.2rem;
  border:1px solid var(--line);border-radius:999px;background:var(--tint);
  transition:border-color .2s,background-color .2s}
.ground-toggle .gt-switch::after{content:"";position:absolute;top:2px;left:2px;
  width:calc(1.2rem - 6px);height:calc(1.2rem - 6px);border-radius:50%;
  background:currentColor;transition:transform .22s ease}
:root[data-ground="day"] .ground-toggle .gt-switch{border-color:var(--living)}
:root[data-ground="day"] .ground-toggle .gt-switch::after{background:var(--living);transform:translateX(calc(2.3rem - 1.2rem - 4px))}
.ground-toggle .gt-off,.ground-toggle .gt-on{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ground-toggle .gt-on{display:none}
:root[data-ground="day"] .ground-toggle .gt-on{display:inline}
:root[data-ground="day"] .ground-toggle .gt-off{display:none}
@media (max-width:920px){ .ground-toggle{margin-left:auto;margin-right:.5rem} }

@media (prefers-reduced-motion:reduce){
  body{transition:none}
}

/* A filled process slot that keeps its caption. The plain .filled variant is
   image-only; a design drawing is unreadable without being told what it is. */
.procshot.filled.cap{padding:0;display:block;overflow:hidden}
.procshot.filled.cap img{display:block;width:100%;height:186px;object-fit:cover;border-radius:3px 3px 0 0}
.procshot.filled.cap figcaption{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem}