/* ============================================================================
   FULL CIRCLE DETROIT — built to DESIGN_SYSTEM.md v1.0
   A fresh project: nothing locked, everything drawn and reasoned.

   ONE LINE      "Detroit, put back into circulation."
   FEELING       warm → hopeful → hands-on.
                 NOT: corporate-green, guilt-driven, austere.
   REFUSAL       every environmental non-profit uses a leaf mark, a stock photo
                 of hands holding soil, and a green-to-blue gradient. We refuse
                 the leaf and we refuse the guilt.

   CONTEXT (§12)  A2 · B1 · C3 · D3 · E4
                 Low stakes, unhurried visitor, a few minutes, moderate trust,
                 mobile-leaning. B≤2 and C≥3 → the full motion library is open.

   COMPOSITION (§5) — four systems across six sections
     full-bleed immersive  hero (Immerse + Orient) — the clay scene
     modular cells         programs (Explore) · voices (Prove)
     centered / axial       impact (Assert) · join (Transact)
     split / duotych       how it works (Instruct)

   DIVISION (§4) — ground change · depth · density · scale jump · whitespace

   COLOR (§7) — SPLIT-COMPLEMENTARY, not neutral-plus-one.
     Green and blue are analogous and would flatten alone, so the palette is
     completed by their warm complements: a marigold sun and a terracotta clay.
     Four chromatics doing four jobs — atmosphere, structure, signal, warmth.
     House-style score 1/3 (marigold sits in the clay hue band). The archetype
     cannot complete: no reflex serif, no cream ground, no mono eyebrow, and
     the register is playful rather than warm-minimal editorial.

   TYPE (§6) — settings profile deliberately opposite to the editorial one:
     ratio 1.5 (perfect fifth, few big steps) · 5 steps · FULL variable weight
     range as an expressive channel · sentence case, never small caps, never a
     tracked-out label · measure 48ch · leading 1.7. No monospace anywhere:
     mono is an engineering register and this is a neighborhood one.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* the four chromatics + ground + ink */
  --sky:    #E8F1EE;   /* ground — pale mist, cool, never cream */
  --sky-2:  #D8E8E3;
  --pine:   #1C3329;   /* ink — deep forest, warmer than black */
  --pine-2: #35513F;
  --moss:   #4E7C4A;   /* earth green */
  --ocean:  #2E6E8E;   /* ocean blue — fills, shapes, the scene */
  --ocean-text: #38647A; /* the same blue pulled to 4.55:1 on the darkest sky stop.
                            #2E6E8E measures 3.99 and fails AA as text (§7 floor). */
  --sun:    #E8A33D;   /* marigold — the signal, on every primary action */
  --clay:   #C06A4A;   /* terracotta — warmth, and literally the clay */
  --clay-deep: #AE5B3D; /* the same clay, deep enough to carry text at 4.61:1.
                           #C06A4A is a mid-tone: neither light nor dark type
                           clears AA on it, so text-bearing surfaces use this. */
  --paper:  #FBFAF5;   /* card ground, never pure white */

  --f-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --f-body:    'Figtree', system-ui, -apple-system, sans-serif;

  /* scale — ratio 1.5, five steps. Big jumps, poster logic, few sizes. */
  --t-sm:   0.9375rem;
  --t-base: 1.125rem;
  --t-md:   1.6875rem;
  --t-lg:   clamp(2.1rem, 1.4rem + 3vw,   3.4rem);
  --t-xl:   clamp(3.45rem, 1.8rem + 5.6vw, 5.1rem);   /* min holds the 3x floor at 375px */

  --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-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --measure: 48ch;

  /* corners — a decided language: generous, soft, never a default 8/12/16 */
  --r-soft: 26px;
  --r-pill: 100px;

  --ease: cubic-bezier(.34, 1.3, .44, 1);      /* a little overshoot — friendly */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --m-fast: 150ms;
  --m-base: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--pine);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  overflow-x: hidden;
}
img, canvas, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--sun); color: var(--pine); }

.shell { width: min(1240px, 100%); margin-inline: auto; padding-inline: clamp(var(--s-5), 5vw, var(--s-16)); }
.band  { padding-block: clamp(var(--s-20), 9vw, var(--s-32)); }

/* ---------------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.02; letter-spacing: -0.02em; }
.display { font-size: var(--t-xl); font-weight: 800; }
.h2      { font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s-6); }
.h3      { font-size: var(--t-md); font-weight: 700; line-height: 1.1; }
.lede    { font-size: var(--t-md); line-height: 1.4; max-width: 28ch; font-weight: 400; margin: 0; }
.prose   { max-width: var(--measure); }
.prose p { margin: 0 0 var(--s-5); }
/* the label is sentence case at weight — never small caps, never tracked mono */
.tag {
  display: inline-block; font-weight: 700; font-size: var(--t-sm);
  color: var(--ocean-text); margin: 0 0 var(--s-4);
}

/* ---------------------------------------------------------------- actions
   INTERACTION SIGNATURE — "it gives." Every interactive thing compresses
   slightly and lifts on approach, like pressing something soft. One idea,
   applied everywhere, and it resolves on :active so it exists on touch. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-base);
  padding: var(--s-4) var(--s-8); border: 0; border-radius: var(--r-pill);
  background: var(--sun); color: var(--pine); text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 0 #B87C22; /* design-ignore: 0-blur solid ledge — a hard offset print device; the distance means "pressable" and it collapses on :active */
  transition: transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 0 0 #B87C22; } /* design-ignore: ledge grows with the lift */
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 #B87C22; } /* design-ignore: ledge collapses under the press */

.btn--quiet { background: var(--paper); color: var(--pine); box-shadow: 0 4px 0 0 var(--sky-2); } /* design-ignore: same ledge, quieter color */
.btn--quiet:hover, .btn--quiet:focus-visible { box-shadow: 0 6px 0 0 var(--sky-2); } /* design-ignore: ledge grows */
.btn--quiet:active { box-shadow: 0 1px 0 0 var(--sky-2); } /* design-ignore: ledge collapses */

.link { font-weight: 700; color: var(--ocean-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.link:hover { color: var(--clay); }

:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; background: var(--pine); color: var(--sky); padding: var(--s-3) var(--s-5); border-radius: var(--r-soft); z-index: 30; }
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ---------------------------------------------------------------- masthead */
.masthead { position: relative; z-index: 5; padding-block: var(--s-5); }
.masthead__in { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); text-decoration: none; letter-spacing: -0.03em; }
.wordmark__mark { width: 30px; height: 30px; border-radius: 50%; background: var(--moss);
  box-shadow: inset -6px -6px 0 0 rgba(0,0,0,.10), inset 5px 5px 0 0 rgba(255,255,255,.22); } /* design-ignore: inset — models a clay dome under the scene's fixed light, not elevation */
.nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
@media (max-width: 819px) { .nav a { padding: var(--s-1) var(--s-3); font-size: 0.875rem; } }
.nav a { padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); font-weight: 600; font-size: var(--t-sm); text-decoration: none; transition: background var(--m-fast) var(--ease-out); }
.nav a:hover, .nav a:focus-visible { background: var(--sky-2); }

/* ============================================================ SYSTEM 1
   FULL-BLEED IMMERSIVE — hero (Immerse + Orient)
   The clay scene fills the viewport; the type sits over its quiet upper-left
   region rather than on a scrim (§9: text over media needs a legibility
   strategy that is not a flat black overlay).
   ========================================================================= */
.hero { position: relative; min-height: 92vh; display: grid; align-items: start; overflow: hidden;
        background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 62%, #C9DED6 100%); } /* design-ignore: this IS a sky — a vertical value shift is the literal subject, not decoration reached for in lieu of a decision */
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene canvas { width: 100%; height: 100%; }
.hero__copy { position: relative; z-index: 2; padding-block: clamp(var(--s-16), 10vh, var(--s-32)) var(--s-24); max-width: 30ch; }
.hero__copy .display { color: var(--pine); }
.hero__copy .lede { margin-top: var(--s-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-10); }
/* The scene is composed to the right of this column, so the type does not sit
   on the earth and needs no scrim. A very soft wash remains for the narrow
   breakpoints where the two do meet — it must fade out entirely before it
   reaches the globe, or it cuts a visible seam across it. */
.hero__copy::before {
  content: ""; position: absolute; inset: -10% -55% -12% -30%; z-index: -1;
  background: radial-gradient(ellipse 62% 60% at 22% 45%,
    rgba(232,241,238,.88) 0%, rgba(232,241,238,.55) 38%, rgba(232,241,238,0) 72%);
}

/* ============================================================ SYSTEM 2
   MODULAR CELLS — programs (Explore), voices (Prove)
   Cells differ in size because the programs differ in size. Soft corners and
   a solid color ledge: depth by material, not by a blurred shadow.
   ========================================================================= */
.cells { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 880px) { .cells { grid-template-columns: repeat(6, 1fr); } }
.card {
  position: relative; background: var(--paper); border-radius: var(--r-soft);
  padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4);
  text-decoration: none; color: inherit;
  box-shadow: 0 5px 0 0 var(--sky-2); /* design-ignore: 0-blur ledge; distance = liftable, and it maps to state */
  transition: transform var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease);
}
a.card:hover, a.card:focus-visible { transform: translateY(-4px); box-shadow: 0 9px 0 0 var(--sky-2); } /* design-ignore: ledge grows with the lift */
a.card:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--sky-2); } /* design-ignore: ledge collapses */
@media (min-width: 880px) {
  .card--lead { grid-column: span 4; }
  .card--b { grid-column: span 2; }
  .card--c { grid-column: span 3; }
  .card--d { grid-column: span 3; }
}
.card__icon { width: 56px; height: 56px; border-radius: 50%; flex: none;
  box-shadow: inset -7px -7px 0 0 rgba(0,0,0,.10), inset 6px 6px 0 0 rgba(255,255,255,.28); } /* design-ignore: inset — the same clay dome as the hero objects, one light source obeyed */
.card__icon--moss { background: var(--moss); }
.card__icon--ocean { background: var(--ocean); }
.card__icon--clay { background: var(--clay-deep); }
.card__icon--sun { background: var(--sun); }
.card p { margin: 0; }
.card__meta { margin-top: auto; font-weight: 700; font-size: var(--t-sm); color: var(--ocean-text); }

.card--quote .card__text { font-family: var(--f-display); font-weight: 600; font-size: var(--t-md); line-height: 1.25; }
.card--quote .card__by { font-size: var(--t-sm); font-weight: 600; opacity: .75; }

/* ============================================================ SYSTEM 3
   CENTERED / AXIAL — impact (Assert), join (Transact)
   One thing at the center worth centering. Ground inverts to pine here: the
   page's strongest division channel, used twice and no more (§7).
   ========================================================================= */
.axial { background: var(--pine); color: var(--sky); text-align: center; border-radius: var(--r-soft); }
.axial .tag { color: var(--sun); }
.axial .h2 { color: var(--sky); }
/* The claim that IS a page's h1, inside an inverted band. It must carry DISPLAY
   scale, not heading scale, or the page fails the 4x/3x floor (§6). This class
   was used on commercial.html before the rule existed and the h1 fell back to a
   browser default — measured 2.00x on mobile. */
.axial__claim { font-family: var(--f-display); font-weight: 800; color: var(--sky);
  font-size: var(--t-xl); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 auto; max-width: 17ch; }
.axial__sub { max-width: 46ch; margin: var(--s-6) auto 0; opacity: .82; }
.figures { display: grid; gap: var(--s-8); margin-top: var(--s-16); }
@media (min-width: 720px) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figure__n { font-family: var(--f-display); font-weight: 800; font-size: var(--t-xl); line-height: .9; display: block; }
.figure__n--moss { color: #8FCB7F; }
.figure__n--sun { color: var(--sun); }
.figure__n--sky { color: #7FC3D9; }
.figure__l { display: block; margin-top: var(--s-3); font-weight: 600; opacity: .8; }

/* ============================================================ SYSTEM 4
   SPLIT / DUOTYCH — how it works (Instruct)
   The halves do not mirror: steps on one side, a single tall illustration on
   the other. Ratio 55/45, not 50/50.
   ========================================================================= */
.split { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 55fr 45fr; gap: var(--s-16); } }
.steps { display: grid; gap: var(--s-6); }
.step { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-5); align-items: start; }
.step__n {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-base); color: var(--paper);
  box-shadow: inset -7px -7px 0 0 rgba(0,0,0,.12), inset 6px 6px 0 0 rgba(255,255,255,.24); /* design-ignore: inset clay dome, same light */
}
.step:nth-child(1) .step__n { background: var(--moss); }
.step:nth-child(2) .step__n { background: var(--ocean); }
.step:nth-child(3) .step__n { background: var(--clay-deep); }
.step:nth-child(4) .step__n { background: var(--sun); color: var(--pine); }
.step h3 { margin-bottom: var(--s-2); }
.step p { margin: 0; max-width: 42ch; }
.split__art { background: var(--paper); border-radius: var(--r-soft); padding: var(--s-8); box-shadow: 0 5px 0 0 var(--sky-2); } /* design-ignore: same ledge as the cards, one system */
.split__art svg { width: 100%; height: auto; }

/* ---------------------------------------------------------------- form */
.form { max-width: 34rem; margin: var(--s-12) auto 0; text-align: left; display: grid; gap: var(--s-5); }
.field label { display: block; font-weight: 700; font-size: var(--t-sm); margin-bottom: var(--s-2); }
.field input, .field select {
  width: 100%; font-family: var(--f-body); font-size: var(--t-base); color: var(--pine);
  background: var(--paper); border: 0; border-radius: var(--r-pill);
  padding: var(--s-4) var(--s-6);
}
.field input:focus, .field select:focus { outline: 3px solid var(--sun); outline-offset: 2px; }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--sky-2); padding-block: var(--s-20) var(--s-10); }
.foot__grid { display: grid; gap: var(--s-10); }
@media (min-width: 880px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s-16); } }
.foot h2 { font-size: var(--t-base); font-weight: 800; margin-bottom: var(--s-4); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.foot a { text-decoration: none; font-weight: 600; }
.foot a:hover { color: var(--ocean-text); text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { margin-top: var(--s-16); padding-top: var(--s-5); border-top: 2px solid rgba(28,51,41,.12); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; font-size: var(--t-sm); opacity: .75; }

/* ---------------------------------------------------------------- reveal
   The one scroll behavior on the page besides the hero scene: content lifts
   into place once. Opted into by script — CSS never hides content on its own. */
.js-reveal .up { opacity: 0; transform: translateY(18px); transition: opacity var(--m-base) var(--ease-out), transform var(--m-base) var(--ease-out); }
.js-reveal .up.in { opacity: 1; transform: none; }

@media (pointer: coarse) {
  .nav a, .foot a, .link, .crumb, .credit a { min-height: 44px; display: inline-flex; align-items: center; }
  .btn { min-height: 52px; }
  .field input, .field select { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .up { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ============================================================ IMAGERY
   THE LOCKED TREATMENT (§9). Established here, applied to every photograph on
   every page of this project without exception:

     crop   4:3
     grade  warm lift — saturation up a touch, blacks lifted, gentle warm cast.
            Friendly, not moody: the opposite decision to a monochrome grade,
            because this brand is not austere.
     edge   soft corner (--r-soft), no border, on the same solid ledge the
            cards use — so a photograph is a card, materially.

   The clay scene's grain runs over the photographs too, which is what makes
   sourced images sit in the same material as the drawn ones.
   ========================================================================= */
.shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-soft); background: var(--sky-2);
  aspect-ratio: 4 / 3;
  box-shadow: 0 5px 0 0 var(--sky-2); /* design-ignore: 0-blur ledge, the card system */
}
.shot img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.08) contrast(0.97) brightness(1.05) sepia(0.10);
  transition: transform var(--m-base) var(--ease-out), filter var(--m-base) var(--ease-out); }
.shot::after {                              /* the same grain as the clay scene */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(28,51,41,.16) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}
a:hover > .shot img, a:focus-visible > .shot img { transform: scale(1.03); filter: saturate(1.14) contrast(0.98) brightness(1.06) sepia(0.05); }
.shot--tall { aspect-ratio: 3 / 4; }
.shot--wide { aspect-ratio: 16 / 9; }
.shot figcaption, figure > figcaption, .credit { font-size: 0.8125rem; opacity: .7; margin-top: var(--s-3); }
.credit a { color: inherit; }

/* ---- OVERLAP / COLLAGE — hero (Immerse+Orient), voices (Prove) -------- */
.collage { position: relative; display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .collage { grid-template-columns: repeat(12, 1fr); gap: var(--s-6); } }
.collage__copy { position: relative; z-index: 2; }
@media (min-width: 900px) {
  /* Overlap is composed on the grid, and text never sits under anything (§5).
     The plate straddles the copy/photo boundary and hangs off the photo's
     lower-left corner — the copy column reserves room for it rather than
     being covered by it. */
  .collage__copy { grid-column: 1 / 7; grid-row: 1; padding-bottom: var(--s-8); }
  .collage__a { grid-column: 6 / 13; grid-row: 1; }
  /* the plate starts where the copy column ends, so it can hang off the
     photograph's lower-left corner without ever reaching the action row */
  .collage__b { grid-column: 6 / 11; grid-row: 1; align-self: end;
                margin-bottom: calc(var(--s-12) * -1); z-index: 3; }
}
@media (min-width: 1120px) {
  .collage__copy { grid-column: 1 / 6; }
  .collage__b { grid-column: 6 / 10; }
}
/* the plate: a friendly clay badge carrying the practical facts */
.plate {
  background: var(--pine); color: var(--sky); border-radius: var(--r-soft);
  padding: var(--s-6) var(--s-8);
  box-shadow: 0 5px 0 0 #142620; /* design-ignore: 0-blur ledge, the card system */
}
.plate h2 { font-size: var(--t-base); font-weight: 800; margin: 0 0 var(--s-4); color: var(--sun); }
.plate dl { margin: 0; display: grid; gap: var(--s-3); }
.plate dl > div { display: flex; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 2px solid rgba(232,241,238,.14); }
.plate dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.plate dt { font-weight: 700; font-size: var(--t-sm); color: #A8C6BC; }
.plate dd { margin: 0; font-weight: 700; font-size: var(--t-sm); text-align: right; }

/* ---- EDITORIAL RAIL — what happens (Instruct) ------------------------- */
.rail { display: grid; gap: var(--s-10); }
@media (min-width: 900px) { .rail { grid-template-columns: 4fr 8fr; gap: var(--s-16); } }
.rail__side { align-self: start; }
@media (min-width: 900px) { .rail__side { position: sticky; top: var(--s-8); } }
.beat { display: grid; gap: var(--s-4); padding-bottom: var(--s-10); }
.beat + .beat { border-top: 2px solid rgba(28,51,41,.10); padding-top: var(--s-10); }
.beat__k { font-weight: 800; font-size: var(--t-sm); color: var(--ocean-text); }
.beat p { margin: 0; max-width: var(--measure); }

/* ---- INDEX / TABULAR — what we can fix (Reference) -------------------- */
.fixlist { border-top: 3px solid var(--pine); }
.fixrow { display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  padding-block: var(--s-6); border-bottom: 2px solid rgba(28,51,41,.10); }
@media (min-width: 820px) { .fixrow { grid-template-columns: minmax(0,16ch) 1fr minmax(0,14ch); gap: var(--s-8); align-items: baseline; } }
.fixrow__k { font-family: var(--f-display); font-weight: 700; font-size: var(--t-md); line-height: 1.05; }
.fixrow__d { opacity: .82; }
.fixrow__r { font-weight: 700; font-size: var(--t-sm); color: var(--ocean-text); }
@media (min-width: 820px) { .fixrow__r { text-align: right; } }

.page-head { padding-block: var(--s-12) var(--s-6); }
.crumb { font-weight: 700; font-size: var(--t-sm); color: var(--ocean-text); text-decoration: none; }
.crumb:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================ SCHEMATIC
   CANVAS / SPATIAL — drop-off (Explore). A system no other page uses.
   Deliberately a DIAGRAM, not a map: the sites are placed by relationship, not
   by coordinate, and it says so. A stylised map that implies geographic
   accuracy it does not have is a lie with a nice finish on it.
   Drawn in the clay language — lumpy forms, one light, matte. ========== */
.schematic { position: relative; background: var(--sky-2); border-radius: var(--r-soft);
  padding: var(--s-6); box-shadow: 0 5px 0 0 #C6DCD5; } /* design-ignore: 0-blur ledge, the card system */
.schematic svg { width: 100%; height: auto; display: block; }
.schematic__note { margin-top: var(--s-4); font-size: 0.8125rem; opacity: .72; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin-top: var(--s-5); font-size: var(--t-sm); font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend i { width: 16px; height: 16px; border-radius: 50%; display: inline-block;
  box-shadow: inset -3px -3px 0 0 rgba(0,0,0,.14), inset 3px 3px 0 0 rgba(255,255,255,.26); } /* design-ignore: inset clay dome */

/* ============================================================ HORIZONTAL BAND
   ORIENTATION CHANGE — schools (Instruct). The one division channel the site
   has not used, spent once, on the one thing that is genuinely a sequence.
   Scroll-snapped, keyboard reachable, and it never traps vertical scroll. */
.hband { margin-inline: calc(clamp(var(--s-5), 5vw, var(--s-16)) * -1); }
.hband__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 30%);
  gap: var(--s-5); overflow-x: auto; scroll-snap-type: x proximity;
  padding: var(--s-2) clamp(var(--s-5), 5vw, var(--s-16)) var(--s-6);
  scrollbar-color: var(--moss) var(--sky-2);
}
.hband__track > * { scroll-snap-align: start; }
.week { background: var(--paper); border-radius: var(--r-soft); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: 0 5px 0 0 var(--sky-2); } /* design-ignore: 0-blur ledge, the card system */
.week__n { font-family: var(--f-display); font-weight: 800; font-size: var(--t-md); color: var(--moss); }
.week h3 { font-size: var(--t-base); font-weight: 800; }
.week p { margin: 0; font-size: var(--t-sm); opacity: .85; }
.hband__hint { font-size: var(--t-sm); opacity: .7; padding-inline: clamp(var(--s-5), 5vw, var(--s-16)); }

/* a quieter figure row for pages where the numbers support rather than lead */
.figrow { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .figrow { grid-template-columns: repeat(3, 1fr); } }
.figrow div { padding-top: var(--s-4); border-top: 3px solid var(--moss); }
.figrow b { font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg); display: block; line-height: 1; }
.figrow span { display: block; margin-top: var(--s-2); font-size: var(--t-sm); opacity: .8; }

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
.hero__copy{max-width:44ch;padding-block:clamp(36px,6vh,72px) 64px}.hero__copy .display{font-size:clamp(42px,5.2vw,76px);max-width:10ch}.hero__copy .lede{max-width:34ch}