/* INK & LIGHT — the Next Level Human design system.
   One source of truth. Every page loads this. */
@font-face{font-family:"Stevens Sable";src:url("/fonts/StevensTitlPro-SableBrush.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Stevens Wolf";src:url("/fonts/StevensTitlPro-WolfBrush.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Stevens Boar";src:url("/fonts/StevensTitlPro-BoarBrush.woff2") format("woff2");font-display:swap}

:root{
  --paper:#fff;--smoke:#f7f7f6;--stone:#efefed;
  --ink:#141414;--ink-2:#4b4b4b;--ink-3:#8a8a8a;
  --line:#e7e7e7;--red:#b01f2e;--red-deep:#8f1824;
  --serif:"Shippori Mincho","Hiragino Mincho ProN",Georgia,serif;
  --carved:"Stevens Sable","Shippori Mincho",Georgia,serif;
  --carved-hero:"Stevens Wolf","Shippori Mincho",Georgia,serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",-apple-system,"Helvetica Neue",sans-serif;
  --gut:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--red);color:#fff}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px;margin:0 auto;padding:0 var(--gut)}

/* ---------- the red thread ---------- */
.thread-rail{position:fixed;top:0;left:clamp(8px,1.6vw,22px);width:1.5px;height:100vh;
  background:var(--line);z-index:60;pointer-events:none}
.thread-rail i{position:absolute;top:0;left:0;width:100%;height:0;background:var(--red);transition:height .1s linear}
@media(max-width:820px){.thread-rail{display:none}}

/* ---------- nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;height:66px;max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:auto}
.mark b{font-family:var(--carved);font-weight:400;font-size:16px;letter-spacing:.11em}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
.nav a.link{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500;position:relative;padding:4px 0;white-space:nowrap}
.nav a.link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--ink);
  transition:right .35s cubic-bezier(.22,1,.36,1)}
.nav a.link:hover::after{right:0}
.nav a.link:hover{color:var(--ink)}
@media(max-width:940px){.nav a.link{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;text-decoration:none;
  font-weight:700;font-size:15.5px;letter-spacing:.01em;padding:15px 30px;border-radius:3px;border:1px solid var(--red);
  transition:background .25s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.btn:hover{background:var(--red-deep);transform:translateY(-1px);box-shadow:0 10px 28px -14px rgba(176,31,46,.55)}
.btn.small{padding:10px 20px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.btn .arw,.quiet .arw{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.btn:hover .arw,.quiet:hover .arw{transform:translateX(4px)}
.quiet{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:700;
  font-size:15.5px;border-bottom:1.5px solid var(--ink);padding-bottom:2px;transition:color .2s,border-color .2s}
.quiet:hover{color:var(--red);border-color:var(--red)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.15;
  letter-spacing:-.015em;margin:0;text-wrap:balance}
h1.plain{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.2;
  letter-spacing:-.012em;margin:0 0 20px;text-wrap:balance}
h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.3;margin:0 0 9px;text-wrap:balance}
p{color:var(--ink-2);max-width:66ch;text-wrap:pretty;margin:0}
p+p{margin-top:15px}
p b,li b,td b{color:var(--ink);font-weight:700}
.kicker{font-family:var(--carved);font-weight:400;font-size:12.5px;letter-spacing:.24em;color:var(--red);
  text-transform:uppercase;margin:0 0 20px}
.lede{font-size:19px;color:var(--ink-2);max-width:58ch;margin-top:26px;text-wrap:pretty}
.sub{color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 14px}

/* ---------- rhythm ---------- */
section{padding:clamp(64px,10vh,120px) 0}
section.tight{padding:clamp(44px,6vh,70px) 0}
section.smoke{background:var(--smoke)}
section.ink{background:#0d0d0d;color:#fff}
section.ink h2,section.ink h3{color:#fff}
section.ink p{color:#c4c4c4}
section.ink .quiet{color:#fff;border-color:#fff}
section.ink .quiet:hover{color:#ff8d99;border-color:#ff8d99}
.shead{max-width:62ch;margin-bottom:clamp(30px,4vh,52px)}

/* ---------- hero ---------- */
.hero{padding:clamp(60px,9vh,110px) 0 clamp(48px,7vh,86px);border-bottom:1px solid var(--line)}
.hero .cta{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ---------- the chain (numbered steps) ---------- */
ol.chain{counter-reset:s;margin:0;padding:0;list-style:none}
ol.chain li{counter-increment:s;position:relative;padding:20px 0 20px 62px;border-top:1px solid var(--line)}
ol.chain li:last-child{border-bottom:1px solid var(--line)}
ol.chain li::before{content:counter(s);position:absolute;left:0;top:19px;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:14px;font-weight:600}
ol.chain li b{display:block;color:var(--ink);font-family:var(--serif);font-size:1.12rem;font-weight:600;margin-bottom:5px}
ol.chain li span{color:var(--ink-2);display:block;max-width:64ch}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(14px,2vw,24px)}
.card{border:1px solid var(--line);border-radius:3px;padding:clamp(22px,2.6vw,32px);background:var(--paper);
  transition:border-color .3s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.card:hover{border-color:var(--ink-3);transform:translateY(-3px);box-shadow:0 22px 40px -32px rgba(0,0,0,.45)}
.card .n{font-family:var(--carved);font-size:13px;letter-spacing:.2em;color:var(--red);display:block;margin-bottom:12px}
.card p{font-size:15.5px}
.card.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.card.dark h3{color:#fff}.card.dark p{color:#c4c4c4}
a.card{text-decoration:none;color:inherit;display:block}

/* ---------- rows (a list that reads like a table) ---------- */
.rows{margin:0;padding:0;list-style:none}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;
  padding:17px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows li b{font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--ink)}
.rows li span{color:var(--ink-2);font-size:15.5px}
.rows li .r{color:var(--ink-3);font-size:13px;letter-spacing:.05em;white-space:nowrap;text-align:right}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
th{font-size:11px;letter-spacing:.11em;text-transform:uppercase;text-align:left;color:var(--ink-3);
  font-weight:700;padding:0 16px 11px 0;border-bottom:1.5px solid var(--ink)}
td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
td:first-child{color:var(--ink);font-weight:500}
.tick{color:var(--red);font-weight:700}

/* ---------- pull quote / light wash ---------- */
.pull{background:linear-gradient(180deg,var(--smoke),var(--paper));border-left:2px solid var(--red);
  padding:clamp(26px,3.4vw,42px);border-radius:0 3px 3px 0}
.pull p{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.42;color:var(--ink);max-width:34ch}
.pull cite{display:block;font-style:normal;font-size:13px;letter-spacing:.1em;color:var(--ink-3);
  text-transform:uppercase;margin-top:16px}

/* ---------- price ---------- */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(14px,2vw,22px)}
.price{border:1px solid var(--line);border-radius:3px;padding:clamp(26px,3vw,36px);display:flex;flex-direction:column}
.price.feature{border-color:var(--ink);border-width:1.5px;position:relative}
.price.feature::before{content:"MOST CHOOSE THIS";position:absolute;top:-9px;left:24px;background:var(--red);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.15em;padding:3px 10px;border-radius:2px}
.price .amt{font-family:var(--serif);font-size:2.5rem;font-weight:600;line-height:1;margin:6px 0 4px}
.price .per{font-size:13px;color:var(--ink-3);letter-spacing:.05em}
.price ul{list-style:none;margin:22px 0;padding:0;flex:1}
.price li{padding:9px 0 9px 22px;border-top:1px solid var(--line);position:relative;font-size:15px;color:var(--ink-2)}
.price li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:7px;background:var(--red);border-radius:50%}

/* ---------- the enso ---------- */
.enso{width:clamp(150px,20vw,236px);height:auto;display:block}
.enso path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.6s cubic-bezier(.33,.9,.4,1)}
.enso.in path{stroke-dashoffset:0}
.enso .accent{stroke:var(--red)}

/* ---------- closing ---------- */
.close{text-align:center}
.close h2{max-width:20ch;margin-left:auto;margin-right:auto}
.close p{margin-left:auto;margin-right:auto;max-width:48ch}
.close .cta{justify-content:center;margin-top:36px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.breathe{width:14px;height:14px;border-radius:50%;background:var(--red);margin:0 auto 28px;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.32);opacity:.62}}

/* ---------- related / where to next ---------- */
.next{border-top:1px solid var(--ink);padding-top:clamp(28px,4vh,44px)}
.nextgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
a.nextcard{background:var(--paper);padding:22px 24px;text-decoration:none;color:var(--ink);transition:background .25s}
a.nextcard:hover{background:var(--smoke)}
a.nextcard em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:7px}
a.nextcard b{font-family:var(--serif);font-size:1.04rem;font-weight:600;display:block;line-height:1.32}
a.nextcard span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.55}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:42px 0 58px}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  font-size:13.5px;color:var(--ink-3);max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--red)}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .enso path{transition:none;stroke-dashoffset:0}
  .breathe{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- long-form article ---------- */
section.article h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:44px 0 14px}
section.article h3{font-size:1.14rem;margin:30px 0 8px}
section.article p{font-size:17.5px;margin-top:16px;max-width:100%}
section.article ul.artlist{margin:18px 0;padding:0;list-style:none}
section.article ul.artlist li{position:relative;padding:9px 0 9px 26px;color:var(--ink-2);border-bottom:1px solid var(--line)}
section.article ul.artlist li::before{content:"";position:absolute;left:2px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--red)}
section.article > div > *:first-child{margin-top:0}
.foot.legal{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px}
.foot.legal a{color:var(--ink-3)}
.formwrap{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper);margin-top:8px}
.formwrap iframe{width:100%;min-height:640px;border:0;display:block}
/* ---------- termly-hosted policies ---------- */
.termly{font-size:16px;color:var(--ink-2)}
.termly h1,.termly h2{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.termly h1{font-size:clamp(1.5rem,2.6vw,2rem);margin:38px 0 14px}
.termly h2{font-size:1.22rem;margin:32px 0 10px}
.termly h3,.termly h4{font-family:var(--serif);font-size:1.05rem;color:var(--ink);margin:24px 0 8px}
.termly p,.termly li{color:var(--ink-2);max-width:100%}
.termly ul,.termly ol{padding-left:22px}
.termly li{margin:7px 0}
.termly a{color:var(--red)}
.termly table{font-size:14.5px;min-width:0}
.termly [data-custom-class="title"]{font-family:var(--serif);font-size:1.7rem;color:var(--ink)}
.legallinks a{display:inline-block;margin:0 20px 8px 0;color:var(--ink);font-weight:700;
  text-decoration:none;border-bottom:1.5px solid var(--line);font-size:15px}
.legallinks a:hover{color:var(--red);border-color:var(--red)}

/* ---------- small screens ---------- */
@media(max-width:940px){
  .nav{gap:14px;height:60px}
  .mark b{font-size:14px;letter-spacing:.09em;white-space:nowrap}
  .nav .btn.small{padding:9px 15px;font-size:13px;white-space:nowrap}
}
@media(max-width:430px){
  body{font-size:16.5px}
  .nav{gap:10px}
  .mark b{font-size:12px;letter-spacing:.06em}
  .nav .btn.small{padding:8px 12px;font-size:12px}
  .hero .cta{gap:16px}
  .hero .cta .btn,.hero .cta .quiet{width:100%;justify-content:center}
  ol.chain li{padding-left:46px}
  ol.chain li::before{width:28px;height:28px;font-size:12.5px;top:20px}
  .rows li{grid-template-columns:1fr}
  .rows li .r{text-align:left}
  .foot,.foot nav{gap:14px}
}
/* ---------- phase navigation ---------- */
.phasenav{display:flex;flex-wrap:wrap;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.phasenav a{flex:1 1 128px;background:var(--paper);padding:13px 16px;text-align:center;text-decoration:none;
  color:var(--ink-2);font-size:14px;font-weight:500;transition:background .25s,color .25s;white-space:nowrap}
.phasenav a:hover{background:var(--smoke);color:var(--ink)}
.phasenav a.on{background:var(--ink);color:#fff;font-weight:700}
/* ---------- embedded video ---------- */
.vid{position:relative;padding-top:56.25%;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--smoke)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidcap{margin-top:12px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);text-align:center}

/* ═══ IMAGERY ═══════════════════════════════════════════════════════════════
   Brief (PRODUCT.md): white ground, black ink imagery, red as an event, one
   idea per viewport. Register guidance: let the photograph be the design; one
   decisive photo beats five mediocre ones.
   Three treatments. Which one a page gets depends on what the picture is and
   what the page is for, never on a global rule. The previous approach put one
   image in one fixed slot on every page, which is what read as template.
   ------------------------------------------------------------------------- */

/* ── 3. PLATE ──  full bleed between sections, sized to the picture's own
   proportion. A tall image is allowed to be tall; that is what it is. */
.plate{margin:clamp(48px,8vh,104px) 0;width:100vw;margin-inline:calc(50% - 50vw)}
.plate img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.02)}
.plate.tall img{max-height:88vh;object-fit:contain;background:#0b0b0d}


/* ============================================================================
   ART TREATMENT  (2026-09-04)
   Standards taken from ~/.claude/skills/00-design-references (Apple, measured),
   not from anyone's opinion. Two rules do the work:
     - "Full-bleed section backgrounds persist at every size. The cinematic
        rhythm never breaks."  So the treatment does NOT change on a phone.
     - "MUST NOT hide essential content on mobile - restructure instead."
   Named .artghost, not .ghost: .btn.ghost already exists and the two collided.
   ========================================================================= */

/* every piece of art on the site is monochrome, so one rule instead of 43 */
.artband img,
.artghost-img img{filter:grayscale(1) contrast(1.06)}

/* The figure as ground. It is NOT allowed to bleed off the edge.
   Apple's reference, the one rule every site in the library shares:
   "products scale proportionally, never crop - the product silhouette is sacred"
   and "product photography maintains aspect ratio at all breakpoints".
   A face is a silhouette, so the whole picture stays inside the viewport and the
   only softening is a mask on the side that meets the text. */
.artghost{position:relative;isolation:isolate}
.artghost > .artghost-img{
  position:absolute; z-index:-1; pointer-events:none;
  top:50%; translate:0 -50%;
  right:clamp(0px, calc(50vw - 50%), 40px);   /* never past the right edge */
  width:min(44vw,620px);
  opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);
}
.artghost > .artghost-img img{display:block;width:100%;height:auto}

/* Phone keeps the SAME treatment: whole picture, same side, aspect intact.
   Apple: "full-bleed maintained at all sizes, text scales down" and the responsive
   standard "MUST NOT hide essential content on mobile, restructure instead."
   Opacity drops only as far as body-text contrast requires, which is a hard 4.5:1
   rule rather than a taste call. */
@media (max-width:900px){
  .artghost > .artghost-img{
    width:92vw;
    right:4vw;
    opacity:.08;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  }
}
@media (prefers-reduced-motion:reduce){.artghost > .artghost-img{transition:none}}


/* ============================================================================
   ART SIZE CEILING  (2026-09-04, from the sweep)
   23 pages shipped an image taller than the screen. Worst was 222%, over two
   screens for one picture. Jade called this out months ago ("this image takes
   up almost the entire page, this is ridiculous") and my first fix cropped the
   meaning out of an iceberg, which was worse.

   Apple's reference gives the correct move and it is not cropping:
     "products scale proportionally, never crop - the product silhouette is sacred"
     "hero product images scale down but stay centered"
   So the WHOLE picture scales down to fit the screen. width:auto is what keeps
   it honest: no object-fit crop, no letterbox, just a smaller picture.
   ========================================================================= */
.artband{margin-inline:auto;text-align:center}
.artband img{
  display:block;
  max-height:82vh;
  width:auto;
  max-width:100%;
  margin-inline:auto;
}

/* Tap targets. The responsive standard is a hard rule: "MUST ensure touch
   targets are at least 44px". Inline links inside a sentence are exempt (they
   are part of running text), so this only lifts standalone link-buttons. */
/* :not(p a) is legal but was not reliably applying. Plain rule plus an explicit
   override for links that sit inside running text, which are exempt. */
a.quiet{min-height:44px;display:inline-flex;align-items:center}
p a.quiet, li a.quiet{min-height:0;display:inline;align-items:initial}
.btn,button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* Embedded GoHighLevel form (contact). The iframe is sized by GHL's form_embed.js
   over postMessage, so it has no height of its own until that script runs. The
   min-height stops the section collapsing in the meantime, and on a slow phone
   that gap is what a visitor would otherwise stare at. */
.formwrap{margin:clamp(24px,4vh,40px) 0}
.formwrap iframe{
  display:block;width:100%;min-height:560px;border:0;
  background:var(--paper,#fff);
}
@media (max-width:520px){.formwrap iframe{min-height:640px}}

/* Footer social. Icons only, small, quiet. The old Kajabi footer put five bright
   white glyphs above the links; here they sit under them at the weight of body text
   so they read as a footnote rather than a second call to action. */
.foot .social{display:flex;gap:20px;align-items:center;margin-top:20px;flex-wrap:wrap}
.foot .social a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-11px;color:var(--ink-3,#807c78);transition:color .2s}
.foot .social a:hover{color:var(--red,#b01f2e)}
.foot .social svg{width:19px;height:19px;fill:currentColor;display:block}

/* ── FOOTER, rebuilt 2026-09-05 ───────────────────────────────────────────
   Measured on stripe.com, linear.app and vercel.com the same day: all three
   run titled columns with 16px links, and Linear's own reference notes say
   "footer: multi-column -> stacked single column" on mobile. Ours was fifteen
   links in one row that wrapped and left three orphans behind. */
/* :not(.legal) matters. The legal strip is a .foot too, so the grid below caught it
   and threw Delivery onto its own line with the copyright stranded mid-row. */
footer.site .foot:not(.legal){
  display:grid;
  grid-template-columns:minmax(190px,1fr) 3fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
footer.site .foot:not(.legal) nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px 24px;
}
/* the legal strip stays one quiet line: links left, copyright right */
footer.site .foot.legal{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:baseline; justify-content:space-between;
}
footer.site .foot.legal nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.fcol{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.fcol h4{
  margin:0 0 3px; font-family:var(--sans,inherit); font-size:12px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3,#807c78);
}
.fcol a{font-size:15px;line-height:1.45;color:var(--ink-2,#4b4b4b);text-decoration:none}
.fcol a:hover{color:var(--red,#b01f2e)}
.fbrand{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.fbrand img{display:block;height:44px;width:auto}
.fbrand .social{margin-top:0}

/* Linear's own rule: multi-column collapses to a stack. Two columns on a
   tablet, one on a phone, so a heading never sits alone above one link. */
@media (max-width:1000px){
  footer.site .foot:not(.legal){grid-template-columns:1fr;gap:36px}
  footer.site .foot:not(.legal) nav{grid-template-columns:repeat(2,1fr);gap:30px 20px}
}
@media (max-width:560px){
  footer.site .foot:not(.legal) nav{grid-template-columns:1fr;gap:26px}
  footer.site .foot.legal{justify-content:flex-start}
}

/* Venue gallery (The Awakening). The one place on the site that keeps its colour:
   the product here is a mountain, and a grey mountain sells nobody a retreat.
   Apple's rule is that the product is shown as it is. Everything else stays mono. */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px);margin:clamp(26px,4vh,42px) 0;
}
.gallery figure{margin:0}
.gallery img{
  display:block;width:100%;height:clamp(150px,19vw,240px);
  object-fit:cover;filter:none;background:var(--smoke,#f6f5f3);
}
.gallery figcaption{
  margin-top:8px;font-size:13px;line-height:1.4;color:var(--ink-3,#807c78);
}
@media (max-width:820px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){
  .gallery{grid-template-columns:1fr}
  .gallery img{height:auto;aspect-ratio:3/2}
}

/* ── HERO ART: a band, not a block (2026-09-05) ─────────────────────────────
   Jade: "It's a big block... I think it needs to bleed across the page." He is
   right and the reference backs him. Measured on apple.com the same week: their
   section images run 100% of the viewport WIDTH, full bleed, every time. A square
   sitting in the middle of a column is the thing they never do.

   The 82vh ceiling stays, because it is what stopped the older problem ("this
   image takes up almost the entire page"). Width goes edge to edge; height is
   capped. That is a band. */
.hero .artband{
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-top:clamp(34px,6vh,64px);
  text-align:initial;
}
.hero .artband img{
  width:100vw;
  max-width:none;
  height:clamp(280px,52vh,560px);
  object-fit:cover;
  object-position:center 46%;   /* holds the figure and the shaft in frame */
  margin-inline:0;
  max-height:none;
}
@media (max-width:640px){
  .hero .artband img{height:clamp(230px,40vh,340px)}
}

/* ---- The Architect application (build/pages_apply.py), 2026-09-05 ----
   "tplate" = teaching plate. NOT ".plate", which is the full-bleed image plate above. */
.video16{position:relative;width:100%;max-width:760px;aspect-ratio:16/9;background:var(--stone);border:1px solid var(--line);margin:8px 0 10px;overflow:hidden}
.video16 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cap{font-size:14px;color:var(--ink-3);margin:0 0 28px}
.tplate{background:var(--smoke);border:1px solid var(--line);padding:clamp(20px,3vw,30px);margin:30px 0;max-width:640px}
.tplate-t{font-family:var(--serif);font-size:1.28rem;font-weight:600;margin:0 0 4px;line-height:1.3}
.tplate-s{color:var(--ink-3);font-size:14.5px;margin:0 0 16px}
.tplate-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:13px 16px;background:var(--paper);border:1px solid var(--line);margin-top:8px}
.tplate-row b{font-family:var(--serif);font-size:1.05rem;font-weight:600}
.tplate-row span{grid-column:1;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.tplate-row em{grid-column:2;grid-row:1;font-style:normal;color:var(--ink-3);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tplate-row.deep{background:var(--stone)}
.tplate-row.hot{background:var(--red);border-color:var(--red)}
.tplate-row.hot b,.tplate-row.hot span,.tplate-row.hot em{color:#fff}
.tplate-mark{color:var(--red);font-size:13.5px;font-weight:700;border-top:2px dashed var(--red);padding-top:8px;margin-top:14px}
.tplate-f{margin:18px 0 0;font-weight:600;font-size:15px;line-height:1.55;border-top:1px solid var(--line);padding-top:14px}
.apply{max-width:640px}
.apply .field{margin-top:22px}
.apply label{display:block;font-family:var(--serif);font-size:1.08rem;line-height:1.4;margin-bottom:8px;color:var(--ink)}
.apply input,.apply textarea{width:100%;font:inherit;font-size:16px;line-height:1.5;padding:14px 16px;border:1px solid var(--ink-3);border-radius:3px;background:var(--paper);color:var(--ink);min-height:48px}
.apply textarea{min-height:150px;resize:vertical}
.apply input:focus,.apply textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.apply [aria-invalid="true"]{border-color:var(--red)}
.apply .help{font-size:14px;color:var(--ink-3);margin:8px 0 0;line-height:1.55}
.apply .err{color:var(--red);font-size:14px;margin:6px 0 0}
.apply .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.apply .row2{grid-template-columns:1fr}}
.apply button.btn{margin-top:26px;border:0;cursor:pointer;font:inherit;font-weight:700}
.apply button.btn[disabled]{opacity:.6;cursor:wait}
#apply-received h3{font-family:var(--serif);font-size:1.5rem;margin:0 0 12px}
.shelf{margin:0 0 44px;max-width:760px}
.shelf h3{font-family:var(--serif);font-size:1.3rem;margin:0 0 12px}
.shelf p{font-size:15.5px;color:var(--ink-2)}

/* The sticky action bar (render.py "sticky"). Phones only; desktop has the hero button. */
.stickycta{display:none}
@media (max-width:640px){
  .stickycta{display:flex;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;justify-content:center;
    align-items:center;gap:10px;min-height:52px;background:var(--red);color:#fff;text-decoration:none;
    font-weight:700;font-size:16px;border-radius:3px;box-shadow:0 14px 34px -14px rgba(0,0,0,.45)}
  .stickycta[hidden]{display:none}
}

/* The Site Survey (build/pages_apply.py). Rooms shown one at a time. */
.survey .room h3{font-family:var(--serif);font-size:1.5rem;margin:0 0 10px}
.survey .intro{color:var(--ink-2);margin:0 0 6px}
.survey .opt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:8px;font-family:var(--sans)}
.survey select{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--ink-3);border-radius:3px;background:var(--paper);color:var(--ink);min-height:48px}
.survey .scale{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.survey .scale-btn{min-height:44px;border:1px solid var(--ink-3);background:var(--paper);color:var(--ink);font:inherit;font-weight:600;border-radius:3px;cursor:pointer}
.survey .scale-btn.on{background:var(--red);border-color:var(--red);color:#fff}
.survey .nav2{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.survey .nav2 .btn{border:0;cursor:pointer;font:inherit;font-weight:700}
.survey .nav2 .btn.ghost{border:1px solid var(--ink)}
@media (max-width:420px){.survey .scale{grid-template-columns:repeat(5,1fr)}}

/* ---- The room sign-up (build/pages_rooms.py form()), 2026-09-05 ---- */
.roomform .nlh-when{font-size:15px;color:var(--ink-3);margin:0 0 22px}
.roomform .nlh-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.roomform .nlh-row{grid-template-columns:1fr}}
.roomform label{display:block;font-family:var(--serif);font-size:1.05rem;margin:18px 0 8px;color:var(--ink)}
.roomform .nlh-opt{font-size:13px;color:var(--ink-3);font-family:var(--sans);margin-left:8px}
.roomform input[type=text],.roomform input[type=email],.roomform input[type=tel]{width:100%;font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--ink-3);border-radius:3px;background:var(--paper);color:var(--ink);min-height:48px}
.roomform input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.roomform .nlh-consent{border-top:1px solid var(--line);margin:26px 0 0;padding:22px 0 0}
.roomform .nlh-consent-lead{font-family:var(--serif);font-weight:600;margin:0 0 8px}
.roomform .nlh-consent p{font-size:15px;color:var(--ink-2);margin:0 0 16px}
.roomform .nlh-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-weight:600;font-family:var(--sans);font-size:16px;margin:0}
.roomform .nlh-check input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--red);flex:0 0 auto}
.roomform .nlh-submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:26px;padding:14px 28px;background:var(--red);color:#fff;border:0;border-radius:3px;font:inherit;font-weight:700;cursor:pointer}
.roomform .nlh-submit:hover{background:var(--red-deep)}
.roomform .nlh-err{display:none;color:var(--red);font-size:14.5px;margin:12px 0 0}
.roomform .nlh-ty{display:none}
.roomform .nlh-ty .nlh-eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 10px}
.roomform .nlh-ty h1{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 12px;line-height:1.15}
.roomform .nlh-ty h2{font-family:var(--serif);font-size:1.3rem;margin:26px 0 12px}
.roomform .nlh-ty-block{background:var(--paper);border:1px solid var(--line);padding:22px 24px;margin:0 0 14px}
.roomform .nlh-ty-block h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 8px}
.roomform .nlh-ty-block p{font-size:15.5px;color:var(--ink-2);margin:0 0 10px}
.roomform .nlh-ty-block a.nlh-inline{color:var(--ink);font-weight:700}
.roomform .nlh-ty-note{color:var(--ink-3);font-size:15px;margin-top:22px}

/* ---- Start Here: the fork and the linked doors (build/pages_core.py) ---- */
.fork{display:flex;gap:14px;flex-wrap:wrap;margin:-10px 0 0}
.doors-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.doors-list li{border-bottom:1px solid var(--line)}
.doors-list a{display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;padding:22px 6px;text-decoration:none;color:var(--ink);transition:background .2s}
.doors-list a:hover{background:var(--smoke)}
.doors-list .n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--carved);font-size:13px;display:flex;align-items:center;justify-content:center}
.doors-list .t b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;line-height:1.3;margin-bottom:4px}
.doors-list .t span{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.doors-list .arw{color:var(--red);font-size:22px;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.doors-list a:hover .arw{transform:translateX(4px)}
.alsoline{margin-top:22px;color:var(--ink-3);font-size:15px}
.alsoline a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ink)}
@media (max-width:560px){.doors-list a{grid-template-columns:34px 1fr auto;gap:12px;padding:18px 2px}.doors-list .n{width:26px;height:26px;font-size:12px}}

/* anchored jumps land below the sticky header */
[id]{scroll-margin-top:84px}