/* ===== Shared brand hero (F2) — DRAFT for clips.richiegriffin.com =====
   Ported verbatim from richiegriffin.com static/style.css lines 1858-1957 so
   the clips page renders the SAME hero as the main site, the hub, every client
   portal and every /d/ delivery page. Loaded AFTER styles.css so it overrides
   the old .profile-top rules without editing the live stylesheet.

   The brand variables are redeclared here because the clips palette is the
   Instagram-derived one and never carried them. Values are copied from the
   site's :root, not re-picked, so the orange cannot drift between surfaces. */
:root {
  --brand-accent: #ff7a18;
  --brand-accent-hover: #ff9440;
  --brand-gradient: linear-gradient(100deg, #ff8a00 0%, #ff5a1f 45%, #e01f00 100%);
}

/* BEGIN GENERATED: site-header -- DO NOT EDIT. Source: projects/site-header/src/. Regenerate: python3 projects/site-header/build.py --write */
/* ================================================================== TOKENS
   The single source of truth for colour, font and button shape on every
   surface. Emitted into every CSS target inside the site-header generated
   fence, so `build.py --check` detects palette drift exactly the way it
   already detects header drift.

   Driven from the main page (richiegriffin.com) per Rich, 2026-08-17.
   Two values are taken from the portals rather than the main page, because
   the main page's own CSS already asks for them and never got them:
     - font-family leads with Inter (main site's .brand already names it)
     - --accent exists as the generic UI accent (main site uses IG blue for
       article buttons and links; the portals had already named it)

   Every surface reads these. A surface that must differ declares the
   override in its own surfaces/*.json entry, so divergence is a deliberate,
   reviewable act instead of drift. Do not hard-code a hex anywhere else. */

:root {
  /* ---- Base ---- */
  --bg: #000;
  --surface: #121212;
  --surface-2: #1a1a1a;
  --surface-3: #1f1f1f;
  --border: #262626;
  --border-strong: #3a3a3a;
  --text: #fafafa;
  --muted: #a8a8a8;
  --mut: #a8a8a8;              /* alias: two live rules reference --mut */
  --link: #e0f1ff;

  /* ---- Brand palette ----
     Every brand accent keys off these. Change them and the whole estate
     follows, on all four surfaces, in one build. */
  --brand-accent: #ff7a18;
  --brand-accent-hover: #ff9440;
  --brand-gradient: linear-gradient(100deg, #ff8a00 0%, #ff5a1f 45%, #e01f00 100%);
  --brand-gradient-rev: linear-gradient(280deg, #ff8a00 0%, #ff5a1f 45%, #e01f00 100%);
  --brand-gradient-blue: linear-gradient(280deg, #3ea8ff 0%, #0095f6 45%, #0b4fc4 100%);
  --brand-gradient-blue-fwd: linear-gradient(100deg, #3ea8ff 0%, #0095f6 45%, #0b4fc4 100%);
  --brand-amber: #ffb257;      /* accent that rides on top of a blue fill */
  --brand-ink: #0a0a0a;        /* text that sits on a brand fill */

  /* ---- Generic UI accent ----
     Secondary actions, links, form focus. Blue, matching the main page's
     article buttons. The portals' seven competing accents all collapse
     into these two lines. */
  --accent: #0095f6;
  --accent-hover: #1877f2;

  /* Legacy names kept because ~15 live rules reference them. The VALUES are
     Rich's brand, not Instagram's. */
  --ig-blue: #0095f6;
  --ig-blue-hover: #1877f2;
  --ig-red: #e01f00;
  --ig-gradient: var(--brand-gradient);

  /* ---- Semantic ---- */
  --ok: #00c853;
  --warn: #ffb257;
  --danger: #e01f00;

  /* ---- Type ----
     Inter is now actually loaded on every surface. Before this, only the
     clips gallery linked it, so three of four surfaces silently rendered in
     whatever the OS supplied. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* ---- Button primitives ----
     Radius previously varied 4/8/10/12/14/999px and weight 700-950 across
     surfaces with no rule. One scale now: sm for chrome, md for standard
     actions, pill for hero CTAs. */
  --btn-radius-sm: 6px;
  --btn-radius: 10px;
  --btn-radius-pill: 999px;
  --btn-weight: 800;
  --btn-tracking: 0.01em;
  --btn-font-size: 14px;
  --btn-pad-y: 10px;
  --btn-pad-x: 18px;

  /* ---- Layout ---- */
  --col-w: 480px;
}

html, body {
  font-family: var(--font-sans);
}

/* ------------------------------------------------------------- buttons
   One shared scheme. `.btn` had no standalone rule anywhere, so four buttons
   in the clips gallery rendered completely unstyled; they pick this up
   automatically.

   Wrapped in :where() ON PURPOSE. :where() contributes ZERO specificity, so
   this acts as a base layer that every existing surface rule still beats.
   Without it this file loads after each surface's stylesheet and silently
   repaints skinned buttons -- it flattened the clips week-unlock green to
   accent blue on first build. Base defaults go in :where(); anything meant
   to win is an explicit opt-in modifier below. */

:where(.btn) {
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

:where(.btn:hover) { background: var(--accent-hover); }

:where(.btn:disabled) { opacity: .5; cursor: default; }

.btn.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.btn.btn-secondary:hover { background: var(--surface-3); }

/* Brand CTA. The hero and nav call to action, orange, on every surface. */
.btn.btn-brand {
  background: var(--brand-gradient);
  color: var(--brand-ink);
  border-radius: var(--btn-radius-pill);
  font-weight: 900;
}
.btn.btn-brand:hover { background: var(--brand-gradient-rev); }

:where(.btn:focus-visible, a:focus-visible, button:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Canonical hero header + door row styling. Single source for every surface.
   Extracted verbatim from the SHIPPED richiegriffin.com static/style.css block
   (lines 1858-1970) after the hero door row Rich approved on 2026-08-17, so the
   refactor preserves exactly what he saw and signed off on.
   Surface-specific brand variables are injected by build.py from the surface
   config prelude, never edited here. */

/* ── PROPORTIONAL SCALE RULE (2026-08-17) ─────────────────────────────────────
   The header is designed at a 375px viewport (original modern iPhone). At 375
   and wider every value is its exact design pixel size. BELOW 375 the whole
   header shrinks together, in proportion, with no floor — so nothing ever
   crops, truncates, ellipses or reflows; it just gets smaller.

   This replaces the previous clamp()-with-a-floor approach, which held elements
   at a minimum size and therefore had to fight overflow element by element
   (stat ellipsis, label tracking hacks, avatar floors).

   The idiom is `min(<N>vw, <design>px)` where N = design / 375 * 100:
     88px -> 23.4667vw    34px -> 9.0667vw     12px -> 3.2vw
     22px -> 5.8667vw     14px -> 3.7333vw     11px -> 2.9333vw
      9px -> 2.4vw         7px -> 1.8667vw      6px -> 1.6vw
      4px -> 1.0667vw      3px -> 0.8vw

   vw includes the page gutter, so this errs a fraction toward smaller than the
   true container ratio. That is deliberate: it guarantees fit on every surface
   regardless of that surface's column padding.

   Hairline borders stay at 1px. Scaling a 1px rule only makes it blurry.
   ────────────────────────────────────────────────────────────────────────── */

.pt-doors { display: flex; align-items: center; gap: min(3.2vw, 12px); margin-bottom: min(2.6667vw, 10px); }
.pt-doors .avatar-wrap { align-self: center; padding: min(0.8vw, 3px); }
/* Scoped to .pt-doors so this wins over each surface's own bare .avatar rule
   without needing seven separate per-surface edits. */
.pt-doors .avatar {
  width: min(23.4667vw, 88px);
  height: min(23.4667vw, 88px);
  font-size: min(9.6vw, 36px);
  border-width: min(0.8vw, 3px);
}
.rightcol {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  min-height: min(25.0667vw, 94px);
  display: flex;
  flex-direction: column;
  gap: min(1.8667vw, 7px);
  justify-content: center;
}

.igstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: min(1.0667vw, 4px);
  flex: 1;
  align-content: center;
}
.igstats .s {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}
.igstats b {
  /* 5.6vw not 5.8667vw: the stat columns are equal thirds, so "4.6m+" was ~4%
     wider than its own column at every width. Scaling cannot fix a ratio, only
     a smaller ratio can. Desktop still lands on the design 22px (from 393px up). */
  font-size: min(5.6vw, 22px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.igstats span {
  /* Same ratio fix as the number above: "subs reached" is the widest label and
     was ~5% over its third. Desktop still reaches the design 9px (from 402px up). */
  font-size: min(2.24vw, 9px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: min(0.8vw, 3px);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.igstats .s-accent b { color: var(--brand-accent-hover); }

/* The 374px letter-spacing hack that used to live here is gone. It existed to
   claw back ~3px because the type had a floor; with proportional scaling the
   label shrinks with its column and always fits. */

/* One never-wrapping row, COLUMN-LOCKED TO THE STATS ABOVE IT (2026-08-17).
   The row used to be `width: max-content` sized to its widest label, so three
   doors came out ~243px under a ~283px stat grid: same left edge, ragged right
   edge, and no door ever sat under its own stat. Sharing the stat grid's
   geometry -- full rightcol width, equal 1fr columns, the SAME 4px gap -- makes
   every column edge line up with the stat column above it.
   The gap value must stay identical to .igstats or the columns drift apart. */
.doorrow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: min(1.0667vw, 4px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.door {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: min(9.0667vw, 34px);
  box-sizing: border-box;
  /* 8px a side, not 12px. Column width is now set by the stat grid above, so a
     door gets 76px at a 375px viewport; the longest labels in play ("Game Clips",
     "Footage Brain") clear that at 8px and ellipse at 12px. Measured, not guessed. */
  padding: 0 min(2.1333vw, 8px);
  border-radius: min(3.2vw, 12px);
  border: 1px solid #ff8a00;
  background: #1a1a1a;
  text-decoration: none;
  overflow: hidden;
}
.door .d-top { display: none; }
.door .d-label {
  /* 2.4vw, NOT 2.9333vw. The old rule was clamp(8px, 2.4vw, 11px): 11px was the
     DESKTOP cap, reached at 458px+, and a phone at 375px got 9px. Treating 11px
     as the 375px design size made every door label 22% bigger and truncated it. */
  font-size: min(2.4vw, 11px);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.door:hover { filter: brightness(1.06); }

.hero-actions { grid-template-columns: 1fr; padding: 0; }
.hero-actions .profile-actions { display: none; }

/* F2: the name moves up into the avatar row, left-aligned with the door chips
   and at its original size. The space it used to occupy above the bio is kept
   on purpose so the bio does not read cramped against the row. */
.rc-name {
  min-width: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-name .display-name { font-weight: 700; font-size: min(3.7333vw, 14px); color: var(--text); }
.rc-name .pronoun { color: var(--muted); font-size: min(3.2vw, 12px); font-weight: 500; margin-left: min(1.6vw, 6px); }
.rightcol { gap: min(1.6vw, 6px); }
.name-moved { height: min(5.0667vw, 19px); }

/* Per-surface override, declared in this surface's surfaces/*.json.
   Emitted last so it beats the shared palette above. */
:root {
  --brand-accent: #ff7a18;
  --brand-accent-hover: #ff9440;
  --brand-gradient: linear-gradient(100deg, #ff8a00 0%, #ff5a1f 45%, #e01f00 100%);
}
/* END GENERATED: site-header */

/* The clips avatar is a plain div on the live page; the shared hero fills it
   with Rich's animated avatar, so it needs the same clipping the site gives it. */
.pt-doors .avatar { overflow: hidden; }