/* ============================================================================
   No Hype AI — holding page ("The Verdict" system).

   Spec of record:  you-tube-channels/channels/channel_06_ai_academy/00_strategy/
                    brand_kit.md  ·  brand_review_2026-08.md §3.4 §3.6
   Token + component source: pixel-brand/engine/styles/editorial/tokens.css
   — the blocks marked "LIFTED" below are copied from it rather than re-derived,
   so the site and the social assets cannot drift apart. If this file and the
   spec disagree, the spec is right and this file is a bug.

   This is Phase 1 only. Phase 2 swaps main.css's :root to the same tokens; the
   hero markup here is written to be reused as the real home page hero, not
   thrown away.
   ========================================================================= */

/* fonts.css is a separate <link> in the document head, not an @import — an
   @import here would serialise the font CSS behind this file's download. */

/* --- LIFTED: the approved system, verbatim from editorial/tokens.css ------- */
:root {
  --ink: #0B0D10;
  --ink-2: #15181D;
  --paper: #F7F6F3;
  --paper-2: #EDEBE6;
  --lime: #CDF546;
  --lime-deep: #A8CC22;
  --crimson: #FF2E5B;
  --amber: #F2B01E;
  --graphite-400: #8A9099;
  --graphite-600: #4B5158;
  --font-display: 'Archivo', system-ui, sans-serif;   /* wdth 62–125, wght 100–900 */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* cap-height / em, MEASURED from the shipped woff2 — not from a table.
     Everything sized "by cap-height" derives from these; a wrong value here
     silently fails an acceptance test. See docs/FONTS.md. */
  --cap-display: 0.676;   /* Archivo */
  --cap-mono: 0.676;      /* JetBrains Mono */
  --cap-body: 0.661;      /* Inter */

  /* verdict block, brand_review §3.4 — ratios are against the CAP-HEIGHT */
  --verdict-h-per-cap: 1.6;
  --verdict-padx-per-cap: 0.6;
  --verdict-track: 0.06em;

  /* page furniture */
  --hairline: rgba(138, 144, 153, .22);   /* graphite-400 at low alpha — a neutral, not an accent */
  --measure: 62rem;
  --gutter: clamp(1.5rem, 5vw, 5rem);
}

/* --- reset + ground ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  /* Flat --ink. No gradients, no glow/bloom, no pixel textures (brand_kit
     prohibitions). The only raised surface allowed is a flat --ink-2 panel. */
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* the verdict rule runs off the left edge by design — clip it, don't scroll it */
  overflow-x: hidden;
}

::selection { background: var(--lime); color: var(--ink); }

/* Lime IS a text colour on ink (15.5:1). The prohibition is lime on PAPER
   (1.2:1), which this page never has. */
a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
}
a:hover { color: var(--lime-deep); }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* --- LIFTED: display type (editorial/tokens.css) --------------------------
   `font-stretch` drives Archivo's wdth axis; `font-variation-settings` is set
   alongside it because some engines honour the axis more reliably that way. */
.display {
  font-family: var(--font-display);
  font-weight: 900; font-stretch: 62%;
  font-variation-settings: 'wdth' 62, 'wght' 900;
  text-transform: uppercase;
  letter-spacing: -.01em; line-height: .92;
  margin: 0;
}
/* Sentence-case headings keep the normal width axis — the condensed axis stays
   on marketing surfaces only (§3.2). */
.heading {
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: -.02em; line-height: 1.06; margin: 0;
}
.mono { font-family: var(--font-mono); letter-spacing: .08em; }

/* --- LIFTED: the verdict block (§3.4) -------------------------------------
   ONE per surface. Height 1.6 × cap-height, x-padding 0.6 × cap-height, 0
   radius, JetBrains Mono Bold uppercase +0.06em, ink text on an accent fill.
   The trailing letter-spacing on the last glyph is subtracted back out of the
   right padding so the optical padding really is 0.6 × cap.
   Set --v-size (font-size) and --v-fill on the element.                     */
.verdict {
  --cap: calc(var(--v-size) * var(--cap-mono));
  --v-h: calc(var(--cap) * var(--verdict-h-per-cap));
  --v-pad: calc(var(--cap) * var(--verdict-padx-per-cap));
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--v-h);
  padding-left: var(--v-pad);
  padding-right: calc(var(--v-pad) - var(--verdict-track));
  background: var(--v-fill, var(--lime));
  color: var(--ink);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--v-size);
  text-transform: uppercase; letter-spacing: var(--verdict-track);
  line-height: 1; border-radius: 0;
}
/* The block always sits on a rule of the same colour running to the nearest
   canvas edge. Thickness max(4px, 0.10 × block height) — at body sizes that
   resolves to the literal 4px the spec draws. Derived from --v-size so the rule
   can be a SIBLING of the block. */
.verdict-rule {
  height: max(4px, calc(var(--v-size, 40px) * var(--cap-mono)
                        * var(--verdict-h-per-cap) * .10));
  background: var(--v-fill, var(--lime));
}
.verdict-group { position: relative; width: max-content; }
.verdict-group > .verdict-rule {
  position: absolute; top: 100%; right: 0;
  /* "to the nearest canvas edge" — on a centred web column that is the left
     edge of the viewport, whatever the gutter is. body clips the overflow. */
  left: -100vw;
}
/* State picks the fill, not the lane (brand_review Part 10 #2). A lane colour
   only applies when the block carries a bare number or date. */
.lane-pass    { --v-fill: var(--lime);    }
.lane-fail    { --v-fill: var(--crimson); }
.lane-unknown { --v-fill: var(--amber);   }
.lane-evals   { --v-fill: var(--lime);    }

/* ==========================================================================
   Holding page
   ========================================================================== */

.shell {
  max-width: var(--measure);
  margin-inline: auto;
  /* Top padding is deliberately much smaller than the bottom: 4.5rem of dead
     space above a 40px mark pushed the whole hero below the fold on a laptop.
     Measured 2026-08-09 — see the note above .masthead. */
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}


/* --- kicker: the mark + wordmark lockup, --lime on ink (15.5:1) -------------
   The mark sits ON the kicker line rather than floating above it. Standing alone
   it read as an orphan and cost ~90px of vertical space for a piece of furniture;
   beside the words it stands for, it is the lockup brand_kit describes and the
   hero starts 90px higher.
   ⚠️ Deviation for sign-off: brand_kit sets the wordmark in that lockup as
   Archivo 700, but the Phase 1 spec asks for the kicker in JetBrains Mono. This
   keeps the mono kicker. Switching to the letter of the lockup is one line —
   swap font-family to var(--font-display) and drop the tracking. */
.kicker {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.5vw, .75rem);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(.8125rem, 2.6vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lime);
  margin: 0 0 clamp(.625rem, 1.5vw, .875rem);
}
.kicker-mark {
  flex: none;
  width: clamp(28px, 6.5vw, 38px);
  height: auto;
}

/* --- headline: the approved question -------------------------------------- */
.hero-headline {
  font-size: clamp(2.5rem, 8.4vw, 5.5rem);
  color: var(--paper);
  text-wrap: balance;
  margin-bottom: clamp(.75rem, 1.75vw, 1rem);
}

/* the system's signature: a 4px lime rule under the headline */
.hero-rule {
  height: 4px;
  background: var(--lime);
  border: 0;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.standfirst {
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  line-height: 1.55;
  color: var(--paper);
  max-width: 46ch;
  margin: 0 0 clamp(1rem, 2vw, 1.25rem);
}
/* The credential sentence is the quieter of the two — it supports the first
   rather than competing with it, and graphite keeps one voice dominant. 6.05:1
   on ink, so it is still body-legible. */
.standfirst--credential {
  color: var(--graphite-400);
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* --- byline: photo beside the host + credential lockup --------------------
   The carousel close-slide pattern (brand_review §7.3), not a new device. */
/* Stacked by default, side-by-side only once there is room. The credential
   lockup's second line needs ~309px at the spec'd size, and a 390px phone has a
   342px content column — so the moment a photo sits beside it, the lockup takes
   a THIRD break it is not supposed to take. Stacking below 640px keeps the
   two-line lockup the 2026-08-09 decision specifies. */
.byline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.875rem, 3vw, 1.75rem);
}
@media (min-width: 640px) {
  .byline { flex-direction: row; align-items: center; }
}
/* Alpha cut-out sitting DIRECTLY on the ink field — no tile, no circle, no
   border. §3.5: the subject is lit out of the field, not pasted onto it.
   `object-fit: contain` because the source is already a 1:1 cut-out; nothing
   here may crop through the face. */
.byline-photo {
  flex: none;
  width: clamp(104px, 24vw, 160px);
  height: auto;
  object-fit: contain;
}
.byline-text { min-width: 0; }

.host {
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  letter-spacing: -.01em;
  color: var(--paper);
  margin: 0 0 .35rem;
}
/* The credential lockup. Two spans, each its own line, each `nowrap` — the break
   is specified (brand_kit.md → Host / Presenter), so it is never left to the
   browser. Set in sentence case, matching the canonical string and the carousel
   close slide: uppercasing renders the degree as "MSC", which reads as an
   acronym rather than a qualification.
   Tracking is .06em, not the kicker's .08em: at .08em the 39-character second
   line needs 328px and overflows a 320px phone. Everything else about the
   register — mono, small, graphite — is unchanged. */
.credentials {
  font-family: var(--font-mono);
  font-size: clamp(.75rem, 2.4vw, .8125rem);
  letter-spacing: .06em;
  color: var(--graphite-400);
  margin: 0;
}
.credentials .cred-line { display: block; }
/* Every leaf part is nowrap, so the only break opportunities on the whole lockup
   are the ones authored in the markup. Nothing here re-breaks on its own. */
.credentials .cred-line > span {
  display: inline-block;
  white-space: nowrap;
}

/* --- the launch statement, carried by the one verdict block ---------------- */
/* 2rem top, not 2.5: at 2.5 the verdict block's 4px rule was clipped by 7px on a
   1440x800 laptop, which reads as a rendering fault rather than as a fold. */
.launch { margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(3rem, 8vw, 4.5rem); }
.launch-label {
  font-family: var(--font-mono);
  font-size: clamp(.6875rem, 2.2vw, .75rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--graphite-400);
  margin: 0 0 .75rem;
}
/* Set on the GROUP: the rule is a sibling of the block, and custom properties
   inherit — so this is the only element both of them can read it from. Setting
   it on .verdict instead leaves the rule on its 40px fallback and it comes out
   ~4.33px instead of the literal 4px the spec draws. */
.launch .verdict-group { --v-size: clamp(1.0625rem, 3.4vw, 1.5rem); }

/* --- sections -------------------------------------------------------------- */
.section {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(2rem, 5vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}
.section-title {
  font-size: clamp(1.375rem, 1.2rem + 1vw, 1.875rem);
  color: var(--paper);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.section-lede {
  color: var(--graphite-400);
  max-width: 52ch;
  margin: -.5rem 0 clamp(1.5rem, 3vw, 2rem);
}
/* A handle quoted inside running text is an identifier, so it is set in mono and
   never allowed to break mid-string. */
.lede-handle {
  font-family: var(--font-mono);
  font-size: .9em;
  letter-spacing: .02em;
  color: var(--paper);
  white-space: nowrap;
}

/* --- "what's coming": mono numeral + one line each ------------------------- */
.lanes { list-style: none; margin: 0; padding: 0; }
.lanes li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: .25rem 1rem;
  padding: clamp(.875rem, 2.5vw, 1.125rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.lanes li:last-child { border-bottom: 0; }
.lane-no {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.125rem, 4vw, 1.5rem);
  letter-spacing: .02em;
  color: var(--graphite-400);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.lane-name {
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: clamp(1.0625rem, 3.6vw, 1.25rem);
  letter-spacing: -.01em;
  color: var(--paper);
  line-height: 1.25;
}
.lane-what {
  grid-column: 2;
  color: var(--graphite-400);
  font-size: clamp(.9375rem, 2.9vw, 1rem);
  line-height: 1.5;
}

/* --- email slot — built, empty in v1 (no form, no fake input) -------------- */
.signup {
  background: var(--ink-2);   /* the flat alternative to a bloom */
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.signup p { margin: 0 0 .75rem; }
.signup p:last-child { margin-bottom: 0; }
.signup .status {
  font-family: var(--font-mono);
  font-size: clamp(.75rem, 2.4vw, .8125rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--graphite-400);
}

/* --- channels -------------------------------------------------------------- */
/* 22rem is the floor because a row has to hold the icon, the platform name and
   `@no.hype.ai.expert` on ONE line. Narrower and the handle breaks mid-word,
   which reads as a bug rather than as a wrap. Borders sit on the rows, not on a
   grid gap — a gap-coloured grid paints a visible empty cell when the item count
   is odd. */
.channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* min() so the 22rem floor cannot itself overflow a narrower container — a bare
     minmax(22rem, 1fr) forces a 352px track and scrolls a 320px phone sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  column-gap: clamp(1rem, 3vw, 2.5rem);
}
.channels li { border-bottom: 1px solid var(--hairline); }
.channels a {
  display: flex;
  align-items: center;
  /* On a very narrow phone the handle drops to its own line rather than breaking
     mid-string; `margin-left: auto` keeps it right-aligned either way. */
  flex-wrap: wrap;
  gap: .25rem .875rem;
  padding: clamp(.875rem, 2.5vw, 1.0625rem) clamp(.25rem, 1.5vw, .625rem);
  color: var(--paper);
  text-decoration: none;
}
/* Lime is the accent on hover/focus, not the resting state: five lime rows would
   blow the "≤12% of any surface" budget and put a second visual centre on the
   page next to the verdict block. */
.channels a:hover,
.channels a:focus-visible { background: var(--ink-2); color: var(--lime); }
.social-icon { flex: none; color: var(--graphite-400); }
.channels a:hover .social-icon,
.channels a:focus-visible .social-icon { color: currentColor; }
.channel-name {
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.channel-handle {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: clamp(.75rem, 2.4vw, .8125rem);
  letter-spacing: .04em;
  color: var(--graphite-400);
  /* the handle is long and the column is narrow — never let it force a scrollbar */
  overflow-wrap: anywhere;
  text-align: right;
}
.channels a:hover .channel-handle,
.channels a:focus-visible .channel-handle { color: currentColor; }

/* --- footer ---------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--graphite-400);
  font-size: clamp(.8125rem, 2.6vw, .875rem);
  line-height: 1.6;
}
.site-footer p { margin: 0 0 .75rem; max-width: 62ch; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer strong { color: var(--paper); font-weight: 600; }
.site-footer .copyright {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(.6875rem, 2.2vw, .75rem);
  /* the 62ch measure is for the disclosure paragraph; this line is a single
     statement and must not be wrapped by it */
  max-width: none;
}

/* --- 404 -------------------------------------------------------------------- */
.notfound .hero-headline { font-size: clamp(2.25rem, 7vw, 4.5rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}