/* DESIGN FLOOR - loaded LAST on every page, hand-built ones included.

   Eight pages (home, the quiz, The Build, The Human Game, About, Architect,
   jadeteta, awakened-human) predate the shared stylesheet and carry their own
   private styles. Every fix made in nlh.css was landing on 44 pages and missing
   those 8, which is why the same faults kept coming back on the biggest pages.

   This file holds ONLY the non-negotiables, each traceable to a measured
   reference or a hard rule. It sets minimums and ceilings, never layout, so it
   cannot fight a page's own design. checks/design_sweep.py enforces every line.
   Jade, 2026-09-04: "every single page needs to match this new design." */

/* Tap targets. Responsive standard, hard rule: at least 44px.
   Links inside running text are exempt; they are part of the sentence. */
a.btn, button, a.quiet, .cta > a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
p a.quiet, li a.quiet, p a.btn, li a.btn{
  min-height:0; display:inline; align-items:initial;
}

/* Art never taller than the screen, and never cropped.
   Apple: "products scale proportionally, never crop, the silhouette is sacred"
   and "hero product images scale down but stay centered". */
figure img, .artband img, .heropic img, .plate img{
  max-height:82vh;
  width:auto;
  max-width:100%;
  height:auto;
  margin-inline:auto;
}

/* THE BAND, on every page. Jade, 2026-09-05, on /architect: "big, huge, rectangular
   images taking up the whole page and not aligned in any way." The full-bleed band
   rule below used to live only in nlh.css, which the four hand-built pages (about,
   architect, build, the-human-game) never load, so on those pages the hero art fell
   through to the plain figure rule above and sat there as a box. This file reaches
   every page, so the band lives here too. Edge to edge, height capped, never cropped
   on the subject (object-position holds the figure). */
.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%;margin-inline:0;max-height:none}
@media (max-width:640px){.hero .artband img{height:clamp(230px,40vh,340px)}}

/* The 16:9 video frame (application, welcome shelf, About). Lives here because the
   hand-built About page never loads nlh.css. */
.video16{position:relative;width:100%;max-width:760px;aspect-ratio:16/9;background:#efefed;border:1px solid #e7e7e7;margin:8px 0 10px;overflow:hidden}
.video16 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cap{font-size:14px;color:#8a8a8a;margin:0 0 28px}

/* Readability floor. Responsive standard: body text at least 16px. */
body{font-size:max(16px,1rem)}

/* Reduced motion is not optional. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.enso{opacity:1 !important;transform:none !important}
}

/* The "→" appended to link and button text.
   The frontend-design skill lists this by name as template chrome: "a '→'
   appended to link and button text", alongside all-caps eyebrows and middle-dot
   meta strings. 222 of them across the site, roughly four a page, on every CTA
   without exception. That uniformity is the tell, not the character itself.
   These are my own template default, not a mark Jade designed, so they go.
   To bring them all back, delete this one rule. */
.arw{display:none}
a.btn, a.quiet, .cta > a{gap:0}

/* Phone navigation.
   Measured on the home page at 390px: the brand needs 238px, the quiz button
   128px, and the flex gap adds 32px. That is 398px of content in 334px of room,
   so the brand broke onto two lines and the button onto THREE. It had been
   shipping that way; the design floor did not cause it, the browser sweep found
   it. Apple's reference: navigation collapses on small screens rather than
   wrapping. Sized so the row fits with room to spare. */
@media (max-width:520px){
  .nav, .wrap.nav, header nav{gap:10px}
  /* The brand is the flexible one; the CTA is not. flex-shrink:1 on the button
     let a 238px brand squeeze "Take the quiz" into an 84px box, where it wrapped.
     The button now keeps its natural width and the brand gives way instead. */
  .nav > a:first-child, .wrap.nav > a:first-child{
    font-size:12px; min-width:0; flex:0 1 auto;
    white-space:nowrap;
  }
  /* Seven items were competing for 334px, so the brand and the CTA both broke
     onto two lines. Apple's reference: "full horizontal nav -> compact mobile
     menu". Every one of these links is repeated in the footer, so nothing is
     lost, which is what separates restructuring from the banned "hide essential
     content on mobile". */
  .nav a.link, .wrap.nav a.link, header nav a.link{display:none}
  /* No nowrap on the button: "Take the diagnostic" then pushed /architect to
     404px in a 390px window. Smaller type and tighter padding are enough. */
  .nav a.btn, .wrap.nav a.btn, header nav a.btn{
    font-size:13px;
    padding-inline:14px;
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* The NLH lockup in the menu bar (2026-09-05).
   It replaced a red dot plus the words NEXT LEVEL HUMAN. Sized by height so it
   sits on the same optical line as the menu text at every width, and it keeps
   flex:0 0 auto for the reason the CTA does: a wide brand must never squeeze
   the things beside it into wrapping. */
.mark img{display:block;height:38px;width:auto}
.mark{flex:0 0 auto;min-width:0}
@media (max-width:520px){ .mark img{height:28px} }
/* Jade's screenshot of /architect at phone width, 2026-09-05: the wordmark read
   "NEXT LEVEL HU" with the red button sitting over the rest. The hand-built pages set
   the wordmark's <b> at 16px with .14em tracking (224px), while the phone rule above
   only shrank the link box (159px), so the text was clipped and the button covered it.
   The <b> itself now shrinks with the box. Measured: 224px > 159px before, fits after. */
@media (max-width:520px){
  /* The row is 334px on a 390 phone: button 165 + gap 10 leaves 159 for the brand.
     At 12px/.12em the wordmark needs 170 and the gate refused it (5 pages). 11px/.09em
     needs ~135 and fits with room. */
  .mark b{font-size:11px;letter-spacing:.06em;white-space:nowrap}
  .mark{overflow:visible;flex:0 0 auto}
  /* The row on a 360px phone is ~316px. Wordmark ~140 + gap 8 + button ~150 = 298.
     Measured in WebKit (Safari's engine), not only Chromium: Safari renders the
     wordmark 5px wider, which is exactly what clipped "NEXT LEVEL HUMA" on Jade's
     iPhone, 2026-09-05, after Chromium had passed it. */
  .nav, .wrap.nav, header nav, header > .nav{gap:8px}
  .nav a.btn, .wrap.nav a.btn, header nav a.btn, header .btn{font-size:12.5px;padding:0 12px;min-height:44px;line-height:1.1;white-space:nowrap;display:inline-flex;align-items:center}
}
/* 360px phones (the smallest still common): the wordmark needs ~152px in Safari, so the
   button gives up a little more. Measured, not guessed: 316 row - 8 gap - 140 button = 168. */
@media (max-width:400px){
  .nav a.btn, .wrap.nav a.btn, header nav a.btn, header .btn{font-size:12px;padding:0 10px}
  .mark{gap:8px}
  .mark b{font-size:10.5px;letter-spacing:.04em}
}

/* iOS Safari inflates text in some layouts unless told not to. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}


/* The quiet sign-in. Present but never competing with the red button. */
a.navlogin{
  font-size:14px; color:var(--ink-2,#4b4b4b); text-decoration:none;
  margin-left:auto; margin-right:16px; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
}
a.navlogin:hover{color:var(--ink,#141414); text-decoration:underline}
/* On a phone the middle links are hidden, so the sign-in goes to the footer
   with them rather than crowding the brand and the CTA. */
@media (max-width:520px){ a.navlogin{display:none} }

/* The sticky header must not let body text show through it while scrolling (seen on an
   iPhone, 2026-09-05). Near-solid, with a blur for the sliver that remains. */
header, header.site{background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}

/* ---- FOOTER (shared). Copied from nlh.css so the hand-built pages, which never load
   nlh.css, render the same four-column footer as every rendered page. 2026-09-05. ---- */
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)}
.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)}
.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.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;
}
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}

/* Linear's own rule: multi-column collapses to a stack. Two columns on a tablet, one on
   a phone. These must live here too: the floor loads after nlh.css, so its desktop grid
   above was overriding nlh.css's phone rules and every page scrolled sideways at 360. */
@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}
}

/* headings: one standard face everywhere (Jade, 2026-09-05: "standard font", no light brush stroke on headings) */
h1,h2,h3,.cc h3{font-family:"Shippori Mincho","Hiragino Mincho ProN",Georgia,serif}
h1{font-weight:600;letter-spacing:-.015em}

/* Jade's own story on a brand page: his words, his name under them. Site-voice rule, 2026-09-05. */
blockquote.story{margin:0;padding:0}
blockquote.story p{font-family:"Shippori Mincho","Hiragino Mincho ProN",Georgia,serif;font-size:clamp(1.05rem,1.45vw,1.18rem);line-height:1.65;color:var(--ink,#141414);max-width:62ch}
blockquote.story p+p{margin-top:16px}
blockquote.story cite{display:block;margin-top:20px;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#807c78)}