/* home.css. The personal-brand front door.
   Layers on ai2020.css; defines only what the events page never needed.
   Every spacing value is a multiple of 4, per the brand's grid rule.

   2026-09-03: rebuilt against Lisa's revised copy. The page is now
   hero > wants > truth > about > definition > newsletter > FAQ > close.
   The motion system is unchanged in kind: the hero's six planes, the
   About reading line, the join slash and the lit mark all survive. The
   sticky learn stack is retired with the section it carried; the wants
   ladder and the FAQ are the two new movements. */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- topbar nav ---------- */
.topnav{display:flex;gap:32px;margin-left:auto;margin-right:20px}
.topnav a{
  font:600 13px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:8px 0;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.topnav a:hover{color:var(--paper);border-bottom-color:var(--orange)}
@media (max-width:860px){ .topnav{display:none} }

/* ---------- section grounds ----------
   The dark equivalent of the v2 tonal ladder: no two neighbouring
   sections share a ground, and the step is one panel value, never a
   wash of the accent. */
.sec--panel{background:var(--black-2)}

/* ---------- 01 hero ---------- */
.home-hero{padding:80px 0 96px;overflow:hidden}
.home-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:64px;align-items:center;
}
.home-hero-copy h1{
  /* px, not a clamp with a unitless ratio: the display face at fluid sizes
     produces fractional line-heights and breaks the 4px baseline */
  font:400 88px/80px var(--display);
  letter-spacing:.01em;text-transform:uppercase;
  color:var(--paper);margin:8px 0 20px;
}
.home-hero-copy h1 .accent{color:var(--orange)}
.home-hero-copy .lede{
  font:400 19px/32px var(--sans);color:var(--dim);
  max-width:52ch;margin:0 0 24px;
}
.hero-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 16px}
.hero-form input[type=email]{
  flex:1 1 280px;min-width:0;
  background:var(--black-2);border:1px solid var(--line-strong);
  border-radius:4px;padding:16px 20px;
  font:400 16px/1 var(--sans);color:var(--paper);
}
.hero-form input[type=email]::placeholder{color:var(--graphite)}
.hero-form input[type=email]:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,90,31,.16);
}
.hero-form .form-note{flex:1 0 100%;margin:0}
.hero-sub{font:400 14px/20px var(--sans);color:var(--graphite);margin:0;max-width:46ch}

@media (max-width:960px){
  .home-hero{padding:88px 0 64px}
  .home-hero-copy h1{font-size:64px;line-height:60px}
  .home-hero-grid{grid-template-columns:1fr;gap:40px}
}

/* ---------- shared section furniture ---------- */
.sec-lede{
  font:400 18px/28px var(--sans);color:var(--dim);
  max-width:60ch;margin:0 0 48px;
}
/* the one large-body register on the page: the sentence a section is
   built around, set above its own supporting copy */
.sec p.statement{
  font:400 24px/36px var(--sans);color:var(--paper);
  max-width:52ch;margin:0 0 28px;
}
@media (max-width:760px){ .sec p.statement{font-size:20px;line-height:32px} }

/* ---------- 02 the wants stack ----------
   Five cards, one per want. With script they go sticky at a per-card
   offset and pile up under the scroll; a covered card dims and scales
   back by --cover, which home.js writes. Without script, or under
   reduced motion, they are a plain list. */
.wants-head{margin:16px 0 0;max-width:900px}
/* narrower than the wrap: at full width a one-sentence card is mostly
   empty panel, and the sentence has to be the thing that fills it */
.want-stack{list-style:none;display:flex;flex-direction:column;gap:24px;margin:56px 0 0;padding:0;max-width:1080px}
.want-card{
  position:relative;
  display:grid;grid-template-columns:152px minmax(0,1fr);gap:32px;align-items:start;
  background:var(--black-2);border:1px solid var(--line);border-radius:8px;
  padding:40px;
  box-shadow:inset 0 1px 0 rgba(243,241,234,.05);
  transition:border-color .18s;
}
.want-card:hover{border-color:var(--line-strong)}
.want-card .wc-side{display:flex;flex-direction:column;gap:20px}
.want-card .num{
  display:block;font:400 72px/64px var(--display);letter-spacing:.02em;
  color:var(--orange);margin:0;
}
.want-card .card-mascot{width:40px;height:40px}
.want-card p{font:400 32px/44px var(--sans);color:var(--paper);margin:0;max-width:34ch}
@media (min-width:761px){ .want-card{min-height:240px} }
@media (max-width:760px){
  .want-card{grid-template-columns:1fr;gap:20px;padding:32px}
  .want-card .wc-side{flex-direction:row;align-items:center;justify-content:space-between}
  .want-card .num{font-size:56px;line-height:48px}
  .want-card p{font-size:22px;line-height:32px}
}

.js .want-stack{gap:0}
.js .want-stack .want-card{
  position:sticky;position:-webkit-sticky;
  top:calc(96px + var(--i,0) * 20px);
  margin-bottom:240px;
  transform:scale(calc(1 - var(--cover,0) * .05));transform-origin:50% 0;
  box-shadow:inset 0 1px 0 rgba(243,241,234,.05),0 24px 48px -24px rgba(0,0,0,.8);
}
/* the last card needs travel of its own, and it has to be MARGIN, not the
   list's padding: a sticky flex item is constrained to the flex container's
   CONTENT box, so padding-bottom does not extend the run. With the padding
   the whole pile released the moment card 05 reached the bottom of the
   content box, so 05 slid over 04 and left in the same beat. Measured, not
   guessed: docs/superpowers/specs/2026-09-03-homepage-copy-rebuild-design.md */
.js .want-stack .want-card:last-child{margin-bottom:280px}
.js .want-stack .want-card::after{
  content:"";position:absolute;inset:-1px;border-radius:8px;
  background:var(--black);opacity:calc(var(--cover,0) * .55);
  pointer-events:none;
}
/* the outgoing card's copy fades ahead of the scrim, so the incoming
   card's edge never crosses a sentence at full contrast */
.js .want-stack .want-card .wc-body,
.js .want-stack .want-card .wc-side{opacity:max(0, calc(1 - var(--cover,0) * 1.6))}
@media (max-width:760px){
  .js .want-stack .want-card{top:calc(80px + var(--i,0) * 12px);margin-bottom:160px}
  .js .want-stack .want-card:last-child{margin-bottom:200px}
  /* smaller offsets on a phone mean the cut lands sooner: darken harder */
  .js .want-stack .want-card::after{opacity:min(.92, calc(var(--cover,0) * 1.6))}
  .js .want-stack .want-card .wc-body,
  .js .want-stack .want-card .wc-side{opacity:max(0, calc(1 - var(--cover,0) * 2.2))}
}

/* ---------- 03 the truth ----------
   The narrowest measure on the page. The mascot squints above it, which
   is the expression sheet's scrutiny state and this brand's native
   emotion (brand-guide section 7). */
/* the mark gets a column of its own so the section is not one narrow
   measure against an empty half-page. Fixed track, not a fraction:
   see the note on .about-grid. */
.truth-grid{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:80px;align-items:start}
.truth{max-width:680px}
svg.truth-mark{width:96px;height:96px;opacity:.92}
.truth h2{margin:16px 0 24px}
.truth p{font:400 17px/28px var(--sans);color:var(--dim);margin:0 0 20px}
p.truth-pull{
  font:500 28px/40px var(--sans);color:var(--paper);
  border-left:4px solid var(--orange);padding-left:24px;
  margin:32px 0;
}
/* the thesis line, set between the pull and the body: paper weight so it
   reads as a stated belief, no accent rule so it does not compete with the
   pull directly above it */
p.truth-gap{
  font:500 20px/32px var(--sans);color:var(--paper);margin:0 0 24px;max-width:52ch;
}
p.truth-close{
  font:600 20px/32px var(--sans);color:var(--paper);margin:32px 0 0;
}
@media (max-width:960px){
  .truth-grid{grid-template-columns:1fr;gap:32px}
  svg.truth-mark{width:56px;height:56px;grid-row:1}
  .truth{grid-row:2}
}
@media (max-width:760px){
  p.truth-pull{font-size:22px;line-height:32px;padding-left:20px}
  p.truth-gap,p.truth-close{font-size:18px;line-height:28px}
}

/* ---------- 04 about ----------
   The heading holds the left rail while the story runs past it. One
   reading column, so the word-by-word reveal has a single path to
   follow. */
/* a fixed rail, not a fraction: fractional columns land the reading
   column on a half pixel at some viewport or other, and this brand
   treats a grid violation as a brand violation (brand-guide 6) */
.about-grid{
  display:grid;grid-template-columns:340px minmax(0,1fr);
  gap:80px;align-items:start;
}
/* static, not sticky: Lisa asked for the portrait to hold still while
   the story runs past it (2026-09-03) */
.about-rail h2{margin:16px 0 0}
/* the second headshot: the square version, framed the way the hero panel
   frames the cutout, so the two read as one system rather than two photos */
.about-portrait{
  position:relative;margin:32px 0 0;
  /* an outline, not a border, for the same reason the FAQ uses one: a 1px
     border insets the image to 121px, one pixel off the column every other
     block on the page sits on */
  outline:1px solid var(--line);outline-offset:-1px;border-radius:8px;
  background:var(--black-2);
  box-shadow:inset 0 1px 0 rgba(243,241,234,.06),0 24px 48px -32px rgba(0,0,0,.72);
}
.about-portrait img{display:block;width:100%;height:auto;border-radius:8px;filter:saturate(.92) contrast(1.04)}
/* the accent edge sits outside the frame, exactly as it does on the hero
   panel, so the two portraits read as the same object in two places */
.about-portrait::after{
  content:"";position:absolute;left:-12px;top:24px;bottom:24px;width:4px;
  background:var(--orange);border-radius:4px;
}
@media (max-width:960px){ .about-portrait::after{display:none} }
.about-text p{
  font:400 19px/32px var(--sans);color:var(--dim);margin:0 0 24px;max-width:58ch;
}
.about-text .pull{
  font:500 24px/36px var(--sans);color:var(--paper);
  border-left:4px solid var(--orange);padding-left:24px;margin:40px 0 0;
}
@media (max-width:960px){
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-portrait{max-width:280px;margin-top:24px}
  .about-text p{font-size:17px;line-height:28px}
  .about-text .pull{font-size:20px;line-height:32px}
}

/* ---------- 05 what it is, who it is for ---------- */
.def-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;
  gap:80px;align-items:start;
}
.def-what h2{margin:16px 0 24px}
/* ai2020.css colours the slash only inside .wordmark; in a heading the
   rule is the same one from brand-guide section 4 */
.def-what h2 .slash{color:var(--orange);display:inline-block;transform:skewX(-12deg);padding:0 4px}
.def-what p{font:400 17px/28px var(--sans);color:var(--dim);margin:0 0 20px;max-width:52ch}
/* the inverted card: the page ground, on the panel ground */
.def-who{
  background:var(--black);border:1px solid var(--line);
  border-radius:8px;padding:36px 32px;
}
.def-who .eyebrow{margin:0 0 24px}
.ticks{list-style:none;margin:0 0 24px;padding:0}
.ticks li{
  position:relative;padding-left:24px;margin-bottom:16px;
  font:400 16px/24px var(--sans);color:var(--dim);
}
.ticks li:last-child{margin-bottom:0}
.ticks li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:2px;background:var(--orange);
}
.def-who .note{
  font:500 15px/24px var(--sans);color:var(--paper);
  border-top:1px solid var(--line);padding-top:24px;margin:0;
}
@media (max-width:960px){ .def-grid{grid-template-columns:1fr;gap:48px} }

/* ---------- 06 the newsletter ---------- */
.join{padding-bottom:96px}
.join-mark .mascot{width:96px;height:96px}
/* the strip carries the form alone now: four cells across, the button
   sitting on the inputs' baseline so the row reads as one control */
.join .sub-strip{grid-template-columns:1fr}
.join .sub-form{
  grid-column:1;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end;
}
.join .sub-form .btn{align-self:end;min-height:50px;justify-content:center}
.join .sub-form .sub-wide{grid-column:1 / -1}
@media (max-width:900px){ .join .sub-form{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .join .sub-form{grid-template-columns:1fr} }

.rung-strip{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  background:var(--black-2);border:1px solid var(--line);border-radius:8px;
  padding:28px 32px;margin:48px 0 0;
}
.rung-copy h3{font:600 16px/24px var(--sans);color:var(--paper);margin:0 0 8px}
.rung-copy p{font:400 15px/24px var(--sans);color:var(--dim);margin:0;max-width:64ch}
.rung-strip .btn{flex:0 0 auto}
/* btn--ghost was never defined anywhere, so inside .join the strip's button
   inherited the ink-on-orange rules and rendered ink on the ink panel.
   Paper on panel with a strong hairline: 14.9:1 measured against --black-2. */
.join .rung-strip .btn--ghost{color:var(--paper);border-color:var(--line-strong);background:transparent}
.join .rung-strip .btn--ghost:hover{background:var(--paper);color:var(--black);border-color:var(--paper)}
@media (max-width:760px){ .rung-strip{flex-direction:column;align-items:flex-start} }

/* ---------- 07 FAQ ---------- */
.faq-sec h2{margin:16px 0 0}
.faq{display:flex;flex-direction:column;gap:12px;margin:48px 0 0;max-width:880px}
/* the frame is an outline, not a border, on purpose: a 1px border would
   inset every summary to 121px and put the whole section 1px off the page
   edge the rest of the layout sits on (verify-grid --strict catches it).
   An outline paints the same hairline and takes no layout space. */
.faq-item{
  background:var(--black-2);border-radius:8px;
  outline:1px solid var(--line);outline-offset:-1px;
  transition:outline-color .18s;
}
.faq-item:hover,.faq-item[open]{outline-color:var(--line-strong)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:24px;padding:24px 28px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item .q{font:600 18px/28px var(--sans);color:var(--paper);flex:1 1 auto}
/* a plus that becomes a minus: the accent's only job in this section */
.faq-item .mk{position:relative;width:16px;height:16px;flex:0 0 auto}
.faq-item .mk::before,.faq-item .mk::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--orange);
  transform:translate(-50%,-50%);
  transition:transform .24s ease,opacity .24s ease;
}
.faq-item .mk::before{width:16px;height:2px}
.faq-item .mk::after{width:2px;height:16px}
.faq-item[open] .mk::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item[open] summary{border-bottom:1px solid var(--line)}
.faq-item .a{padding:20px 28px 24px}
.faq-item .a p{font:400 17px/28px var(--sans);color:var(--dim);margin:0;max-width:60ch}
.js .faq-item[open] .a{animation:faqIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .faq-item summary{padding:20px;gap:16px}
  .faq-item .q{font-size:16px;line-height:24px}
  .faq-item .a{padding:16px 20px 20px}
}

/* ---------- 08 the close ----------
   The hero's grid comes back and the mark opens wide, the expression
   sheet's reveal state. The page ends where it started, one decision
   further on. */
/* left-aligned like every other section, not centred: the page's whole
   grammar anchors to the wrap edge, and a centred block's left slides
   half a pixel per pixel of viewport, which drifts into the reading
   column's edge at some widths and nowhere else. The bookend is the
   grid and the mark coming back, not the alignment changing. */
.close-sec{position:relative;overflow:hidden}
.close-sec .grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:120px 120px;opacity:.4;
  mask-image:radial-gradient(ellipse 70% 90% at 30% 50%,#000 8%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 30% 50%,#000 8%,transparent 74%);
}
.close-sec .wrap{position:relative;z-index:1}
.close{max-width:720px}
svg.close-mark{width:64px;height:64px;margin:0 0 28px}
.close h2{margin:0 0 24px}
.close p{font:400 18px/28px var(--sans);color:var(--dim);margin:0 0 8px;max-width:52ch}
/* the two sentences are two lines by construction: letting them wrap
   split "AI" from "is the multiplier" at some widths, which is exactly
   the orphan the caption rule exists to stop */
p.close-line{
  font:500 28px/40px var(--sans);color:var(--paper);margin:40px 0;
}
p.close-line span{display:block}
p.close-line .accent{color:var(--orange)}
/* an even, fixed width so the centred button always lands on a whole
   pixel: an odd intrinsic width put it on a half pixel and 3.5px off the
   reading column at 1100 */
.close-btn{margin-top:8px}
@media (max-width:760px){
  .close p{font-size:16px;line-height:24px}
  p.close-line{font-size:22px;line-height:32px;margin:32px 0}
}

/* ---------- footer ---------- */
.foot-strip{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  margin-top:36px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;line-height:16px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);
}
.foot-strip .site{color:var(--paper)}
.foot-strip .rights{margin-left:auto;letter-spacing:.12em}
@media (max-width:760px){ .foot-strip .rights{margin-left:0} }

/* ---------- display type scale ----------
   Stepped, never fluid: clamp() cannot land on the 4px baseline, and in
   this brand a grid violation is a brand violation (brand-guide 6). */
.sec h2,.close h2{font-size:40px;line-height:40px}
@media (min-width:700px){ .sec h2,.close h2{font-size:56px;line-height:52px} }
@media (min-width:1100px){ .sec h2,.close h2{font-size:60px;line-height:56px} }
@media (max-width:560px){
  .home-hero-copy h1{font-size:48px;line-height:44px}
  .home-hero-copy .lede{font-size:17px;line-height:28px}
  .sec h2,.close h2{font-size:36px;line-height:36px}
  .join-copy h2{font-size:40px;line-height:40px}
}

/* ---------- line-break discipline (Lisa, 2026-08-27) ----------
   Same rule as the video captions: no orphan words, keep phrases together.
   balance evens heading lines; pretty stops paragraphs stranding a short
   last line. Both degrade to normal wrapping in older engines. */
.home-hero-copy h1,
.sec h2, .join-copy h2, .close h2,
.rung-copy h3, .faq-item .q{
  text-wrap:balance;
}
.home-hero-copy .lede, .hero-sub, .sec-lede,
.about-text p, .def-what p, .truth p, .close p,
.want-card p, .faq-item .a p,
.join-copy p, .rung-copy p, .ticks li, .def-who .note{
  text-wrap:pretty;
}

/* ---------- the two lit section marks (Lisa, 2026-09-03) ----------
   The brand keeps the lit treatment rare (brand-guide section 4): flat
   --paper marks everywhere, dimensional ones only where they carry a
   section. These are the two, plus the accent block's.

   The truth mark is the orange lit body on the panel ground, holding its
   squint, which is the expression sheet's scrutiny state and this brand's
   native emotion. The closing mark is the same construction in cream, using
   the white gradients already declared in .mascot-defs, and holds no
   expression at all so its eyes blink on their own and follow the cursor
   like every other mark on the page. */
svg.truth-mark,svg.close-mark{width:96px;height:96px;flex:0 0 auto}

.mascot--cream .m-body{fill:url(#mWhite)}
.mascot--cream .m-gloss{fill:url(#mWhiteGloss)}
.mascot--cream .m-rim{stroke:url(#mWhiteRim);stroke-width:1}
.mascot--cream .eye{fill:var(--black)}
/* the .lit glow is warm orange; cream needs its own or the mark reads as a
   white chip sitting in an orange haze */
.mascot--cream{
  filter:
    drop-shadow(0 0 6px rgba(255,250,240,.52))
    drop-shadow(0 0 20px rgba(243,241,234,.30))
    drop-shadow(0 0 38px rgba(243,241,234,.12))
    drop-shadow(0 8px 18px rgba(0,0,0,.55));
  animation:creambreathe 7s ease-in-out infinite;
  will-change:filter;
}
@keyframes creambreathe{
  0%,100%{filter:
    drop-shadow(0 0 6px rgba(255,250,240,.52))
    drop-shadow(0 0 20px rgba(243,241,234,.30))
    drop-shadow(0 0 38px rgba(243,241,234,.12))
    drop-shadow(0 8px 18px rgba(0,0,0,.55))}
  50%{filter:
    drop-shadow(0 0 8px rgba(255,250,240,.66))
    drop-shadow(0 0 26px rgba(243,241,234,.38))
    drop-shadow(0 0 48px rgba(243,241,234,.16))
    drop-shadow(0 8px 18px rgba(0,0,0,.55))}
}

/* ---------- card mascots (Lisa, 2026-08-27) ----------
   Flat paper mascots per the brand rule: the lit treatment stays reserved
   for the accent instances; card mascots are the --paper face, one
   expression per placement. */
.card-mascot{width:32px;height:32px;flex:0 0 auto;opacity:.92}

/* ---------- mascot expressions (Lisa, 2026-08-27) ----------
   Rest state on data-x, hover state on data-hx; the geometry is the
   expression sheet's, brand-guide section 7. */
.card-mascot .cl,.card-mascot .cr{
  transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .22s ease;
}
.card-mascot .cl{transform:rotate(-7deg)}
.card-mascot .cr{transform:rotate(7deg)}
.card-mascot[data-x="blink"] .cl{transform:rotate(-7deg) scale(1,.12)}
.card-mascot[data-x="blink"] .cr{transform:rotate(7deg) scale(1,.12)}
.card-mascot[data-x="squint"] .cl{transform:rotate(-7deg) scale(1,.45)}
.card-mascot[data-x="squint"] .cr{transform:rotate(7deg) scale(1,.45)}
.card-mascot[data-x="glance"] .cl{transform:rotate(-7deg) translate(2.4px,0)}
.card-mascot[data-x="glance"] .cr{transform:rotate(7deg) translate(2.4px,0)}
.card-mascot[data-x="wide"] .cl{transform:rotate(-7deg) translate(0,-1px) scale(1,1.2)}
.card-mascot[data-x="wide"] .cr{transform:rotate(7deg) translate(0,-1px) scale(1,1.2)}

/* the wordmark lockups wake too: topbar opens wide, footer blinks awake */
.topbar .lockup .eye,.topbar .lockup .track,
footer .lockup .eye,footer .lockup .track{transition:transform .22s ease}
.topbar .lockup:hover .eye-l{transform:translate(0,-1px) scale(1,1.2)}
.topbar .lockup:hover .eye-r{transform:translate(0,-1px) scale(1,1.2)}
footer .lockup:hover .eye-l{transform:scale(1,.12)}
footer .lockup:hover .eye-r{transform:none}

@media (prefers-reduced-motion:reduce){
  .card-mascot .cl,.card-mascot .cr,
  .topbar .lockup .eye,footer .lockup .eye{transition:none}
}

/* ---------- pillar page capture (2026-08-27) ----------
   The two guides had no subscribe form at all: 2,000 words of the site's
   best work with nowhere to convert, and the behavioral enrichment branch
   keyed to those pages could never fire. */
.pillar-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 0;max-width:560px}
.pillar-form input[type=email]{
  flex:1 1 260px;min-width:0;background:var(--black-2);
  border:1px solid var(--line-strong);border-radius:4px;padding:16px 20px;
  font:400 16px/20px var(--sans);color:var(--paper);
}
.pillar-form input[type=email]::placeholder{color:var(--graphite)}
.pillar-form input[type=email]:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,90,31,.16)}
.pillar-form .form-note{flex:1 0 100%;margin:0}

/* ============================================================
   THE LAYERS (2026-09-02). The premium-site pass, done in the brand's
   own materials: the grid, the slash, the panel, the portrait, the mono
   label, the mascot. Behaviour in home.js; record in
   docs/superpowers/specs/2026-09-02-homepage-layers-design.md.
   Every entry state hangs off html.js so a visitor without script sees
   the finished page. Every spacing value stays a multiple of 4.
   ============================================================ */

html:not(.js) .reveal{opacity:1;transform:none}
.reveal{transition-delay:calc(var(--i,0) * 100ms)}

/* ---------- the top bar knows where you are ---------- */
.topnav a.is-on{color:var(--paper);border-bottom-color:var(--orange)}

/* ---------- hero copy: blur to sharp, one line at a time ----------
   The brand's own eye-chart expression (brand-guide section 9). */
.home-hero-copy h1 .ln{display:block}
.home-hero-copy h1 .ln-in{display:inline-block}
.js .home-hero-copy .rise,
.js .home-hero-copy .ln-in{
  opacity:0;transform:translateY(14px);filter:blur(10px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease;
  transition-delay:calc(var(--d,0) * 90ms);
}
.home-hero.ready .rise,
.home-hero.ready .ln-in{opacity:1;transform:none;filter:none}

/* ---------- hero art: six planes ---------- */
.home-hero .grid-bg{will-change:transform}
.home-hero-art{
  position:relative;justify-self:end;width:100%;max-width:520px;
  aspect-ratio:4 / 5;
}
.home-hero-art > [data-depth]{position:absolute;will-change:transform}
.home-hero-art .l-in{display:block}
/* the copy always paints above the art planes: on a phone the art sits
   first visually but second in the DOM, so its overhangs would cover the
   eyebrow without this */
.home-hero-copy{position:relative;z-index:2}

/* the range. A parallax scene wants overlapping silhouettes at different
   distances; this brand's silhouette is the slash, so the range is three of
   them, receding in tone and each on its own depth.

   A landscape was built here twice and removed twice (Lisa, 2026-09-03):
   jagged ridgelines, then the fora.so construction in full, a warm dusk sky
   with smooth bezier ridges receding into it. Both are in git. The bands are
   what ships. */
.art-band{inset:-16% -80px -16% 0;pointer-events:none}
.art-band::before{
  content:"";position:absolute;inset:0;
  opacity:0;transition:opacity .9s ease .25s;
}
.home-hero.ready .art-band::before{opacity:1}
.band-a::before{
  background:linear-gradient(102deg,
    transparent calc(34% - 68px),rgba(36,43,51,.42) calc(34% - 68px),
    rgba(36,43,51,.42) calc(34% + 68px),transparent calc(34% + 68px));
}
.band-b::before{
  background:linear-gradient(102deg,
    transparent calc(96% - 30px),rgba(36,43,51,.66) calc(96% - 30px),
    rgba(36,43,51,.66) calc(96% + 30px),transparent calc(96% + 30px));
}

/* the deepest plane on the page: the numerals at a size type is never set
   at, barely above the ground, moving slowest of anything. Type and spacing
   carry this design (brand-guide section 7), so the atmosphere is type. */
.hero-ghost{
  /* The box spans the viewport so its left edge IS the page's outermost
     edge, an exact match rather than a near miss. Any percentage or fixed
     width instead puts the left edge a few pixels off one of the real
     column edges at some viewport or other, which is the same trap the
     centred closing block fell into. text-align and the padding hold the
     numerals in the right half, clear of the lede. */
  position:absolute;left:0;right:0;width:auto;top:50%;
  text-align:right;padding-right:96px;
  transform:translateY(-50%);
  font:400 420px/380px var(--display);letter-spacing:.01em;
  color:rgba(243,241,234,.028);
  pointer-events:none;user-select:none;white-space:nowrap;
  z-index:0;
}
/* the numerals are generated, not markup: as page text they landed in the
   copy extract the tone graders read, where decoration is not copy */
.hero-ghost::after{content:"20/20"}
.home-hero .wrap{position:relative;z-index:1}
@media (max-width:1180px){ .hero-ghost{font-size:320px;line-height:300px} }
@media (max-width:860px){ .hero-ghost{display:none} }

/* back: the slash, drawn in on arrival */
/* drawn as a diagonal band inside an edge-aligned box, not a skewed
   element: a skew's bounding box lands off-grid at some width or other.
   The draw-in is a clip, so no geometry ever changes. */
.art-slash{left:0;right:-80px;top:-12%;bottom:-12%;pointer-events:none}   /* bleeds right so the band exits through the top, not a vertical cut */
.art-slash .l-in{
  width:100%;height:100%;
  background:linear-gradient(102deg,
    transparent calc(72% - 40px),var(--black-3) calc(72% - 40px),
    var(--black-3) calc(72% + 40px),transparent calc(72% + 40px));
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s cubic-bezier(.16,1,.3,1) .1s;
}
.home-hero.ready .art-slash .l-in{clip-path:inset(0)}

/* mid: the panel she is too big for */
.art-plate{inset:26% 0 0 0}
.art-plate .l-in{
  position:relative;height:100%;
  background:var(--black-2);border:1px solid var(--line);border-radius:8px;
  /* a 1px edge light sells a raised surface better than blur; the shadow
     carries offset and blur, tinted to the ground, never a halo */
  box-shadow:inset 0 1px 0 rgba(243,241,234,.06),0 32px 64px -32px rgba(0,0,0,.72);
  opacity:0;transform:scale(.96);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.art-plate .l-in::after{
  content:"";position:absolute;left:-12px;top:24px;bottom:24px;width:4px;
  background:var(--orange);border-radius:4px;
}
.home-hero.ready .art-plate .l-in{opacity:1;transform:none}

/* subject: the cutout, bottom edge married to the panel's, corners clipped
   to the panel's radius so the sweater never overhangs them */
.art-subject{inset:0;clip-path:inset(0 0 0 0 round 0 0 8px 8px)}
.art-subject .l-in{
  position:absolute;left:0;right:0;bottom:0;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease .15s,transform .9s cubic-bezier(.16,1,.3,1) .15s;
}
.art-subject img{display:block;width:100%;height:auto;filter:saturate(.92) contrast(1.04)}
.home-hero.ready .art-subject .l-in{opacity:1;transform:none}

/* front: the label on the panel, and the face that watches the cursor */
.art-label{
  right:20px;top:calc(26% + 20px);
  font:700 11px/16px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--graphite);white-space:nowrap;
  opacity:0;transition:opacity .5s ease .7s;
}
.art-label .tick{color:var(--orange)}
.home-hero.ready .art-label{opacity:1}

.art-mark{right:-24px;bottom:-24px;width:80px;height:80px}
.art-mark .l-in{
  width:100%;height:100%;
  opacity:0;transform:scale(.6);
  transition:opacity .4s ease .55s,transform .7s cubic-bezier(.34,1.56,.64,1) .55s;
}
.home-hero.ready .art-mark .l-in{opacity:1;transform:none}
/* lit, not flat (Lisa, 2026-09-03): the body, gloss and rim gradients come
   from .mascot-defs and the glow from .lit, so nothing is overridden here
   except the grounding shadow the accent needs on the dark panel */
.art-mark .mascot{width:100%;height:100%}

/* Without script nothing adds .home-hero.ready, so the five art planes above
   would sit at their entry state forever: a headline beside an empty column.
   The .js gate covers the copy (those rules are scoped to .js) but the art's
   entry states are unconditional, so they need the counterpart explicitly.
   Found 2026-09-03 by driving the page with JavaScript disabled. */
html:not(.js) .art-slash .l-in{clip-path:inset(0)}
html:not(.js) .art-plate .l-in,
html:not(.js) .art-subject .l-in,
html:not(.js) .art-mark .l-in{opacity:1;transform:none}
html:not(.js) .art-label{opacity:1}
html:not(.js) .art-band::before{opacity:1}

@media (max-width:960px){
  .home-hero-art{max-width:320px;justify-self:start;order:-1}
  .art-slash{bottom:0;right:-40px}   /* ends at the art's bottom edge, never over the copy */
  .art-band{inset:-8% -40px 0 0}
  .art-slash .l-in{background:linear-gradient(102deg,transparent calc(70% - 28px),var(--black-3) calc(70% - 28px),var(--black-3) calc(70% + 28px),transparent calc(70% + 28px))}
  .art-plate .l-in::after{display:none}
  .art-mark{width:64px;height:64px;right:-16px;bottom:-16px}
  .art-label{right:16px;top:calc(26% + 16px)}
}

/* ---------- about: the words come in as you read ---------- */
.words-live .w{color:var(--graphite);transition:color .35s ease}
.words-live .w.on{color:var(--dim)}

/* ---------- section headings sharpen on arrival ---------- */
.js .sharpen{
  opacity:0;filter:blur(12px);transform:translateY(10px);
  transition:opacity .6s ease,filter .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.js .sharpen.in{opacity:1;filter:none;transform:none}

/* ---------- join: the layering comes back ---------- */
/* same construction as the hero slash: a band painted inside a box that
   bleeds 48px past the section (which clips it) so the scroll travel
   never exposes an edge */
.join-slash{
  position:absolute;left:0;right:0;top:-48px;bottom:-48px;
  background:linear-gradient(102deg,
    transparent calc(30% - 56px),rgba(11,14,17,.10) calc(30% - 56px),
    rgba(11,14,17,.10) calc(30% + 56px),transparent calc(30% + 56px));
  pointer-events:none;z-index:1;will-change:transform;
}
.join-mark{position:relative;z-index:3;will-change:transform}

/* ---------- reduced motion: everything static, nothing hidden ---------- */
@media (prefers-reduced-motion:reduce){
  .js .home-hero-copy .rise,.js .home-hero-copy .ln-in,.js .sharpen,
  .art-plate .l-in,.art-subject .l-in,.art-mark .l-in,.art-label{
    opacity:1;transform:none;filter:none;transition:none;
  }
  .art-slash .l-in{clip-path:inset(0);transition:none}
  .art-band::before{opacity:1;transition:none}
  .lit,.mascot--cream{animation:none}
  .words-live .w{color:inherit;transition:none}
  .js .want-stack{gap:24px;padding-bottom:0}
  .js .want-stack .want-card{position:static;margin-bottom:0;transform:none;box-shadow:inset 0 1px 0 rgba(243,241,234,.05)}
  .js .want-stack .want-card::after{display:none}
  .js .want-stack .want-card .wc-body,
  .js .want-stack .want-card .wc-side{opacity:1}
  .js .faq-item[open] .a{animation:none}
}

/* Keep names and individual words intact in the founder story. */
.about-text p { word-break: normal; overflow-wrap: normal; hyphens: none; }
.about-text .keep-together, .about-text .w { white-space: nowrap; }