/*
 * public/assets/v4-arrival.css — Word Of Clout agency, Direction v4 checkpoint 1
 * (the creator arrival). IBM Plex Mono only, white-first canvas, zero radius,
 * 1px #E5E5E5 hairlines, no motion of any kind, zero JavaScript.
 * Canon: inbox/canon-yeezy2099 design-tokens.ts (sha256 23ba13584e1b…, VERIFIED)
 * + woc-design-system-v2.md §14 (sha256 d9837a9c12b4…, VERIFIED).
 * Binding spec: inbox/woc-agency/DIRECTION-v4-CREATOR-ARRIVAL.md
 * (sha256 551ea8bad45417c8…, VERIFIED). Loaded by /creators only;
 * the other pages keep /assets/style.css (untouched this checkpoint).
 */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/ibmplexmono-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibmplexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibmplexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* V142b (Tani msg 35325): the V142-03 single-family fallback GAP — Mac/iOS/Windows/
 * Android ship no DejaVu Sans Mono, so that one face never loaded there and the Plex
 * swap shifted layout exactly as before the fix. Replaced with ONE metric-matched
 * fallback family PER PLATFORM FONT, each with its OWN overrides vs IBM Plex Mono.
 * Metrics from PINNED sources, never typed from memory:
 *   - @capsizecss/metrics@4.4.0 (npm install --save-exact in a /tmp scratch dir — this
 *     repo stays dependency-free): courierNew / notoSansMono / robotoMono `regular`,
 *     unitsPerEm + xWidthAvg (latin subset).
 *   - fontTools 4.68.0 parses of the pinned binaries: Menlo-Regular.ttf (github.com/
 *     ueaner/fonts @ 8c1bccdc1622a2538c35abbd004ce367a949f642, sha256 49103b494429…),
 *     Consolas-Regular.ttf (github.com/pensnarik/consolas-font @ 95f0db80d7316f20cb
 *     912a7bb003f5ea83c06cee, sha256 5f8d58e719a7…), DejaVuSansMono.ttf (/usr/share/
 *     fonts/truetype/dejavu/, sha256 0f5db4f17499…).
 *   - IBM Plex Mono reference from ITS OWN woff2 (fontTools): unitsPerEm 1000, hhea
 *     ascender 1025 / descender -275 / lineGap 0, xAvgCharWidth 600 — reconciled with
 *     the CP13 in-browser measurement (Chromium rounds each metric: ascent 103,
 *     descent 28, line box 131, advance 60.0/100px em, identical across 300/400/500).
 *     The RENDERED values are the layout the overrides must hold → they are the
 *     formula inputs: ascent 103 / descent 28 / line-gap 0 / advance 60.0 per 100px em.
 * Capsize formula (the norm used): size-adjust = (plex.xAvgCharWidth/plex.unitsPerEm)
 * / (fb.xAvgCharWidth/fb.unitsPerEm); ascent-override = (plex.ascender/plex.unitsPerEm)
 * / size-adjust; descent-override = (|plex.descender|/plex.unitsPerEm)/size-adjust;
 * line-gap-override = (plex.lineGap/plex.unitsPerEm)/size-adjust. ONE source per
 * family; no mixing. Per-family arithmetic (advance em = xAvgCharWidth/unitsPerEm):
 *   Menlo             1233/2048 = 0.60205078125 → size-adjust 60/60.205078125 = 99.6594%;
 *                     ascent 103/99.6594 = 103.3521%; descent 28/99.6594 = 28.0957%
 *   Consolas          1126/2048 = 0.5498046875 → size-adjust 60/54.98046875 = 109.1297%;
 *                     ascent 103/109.1297 = 94.3831%; descent 28/109.1297 = 25.6576%
 *   DejaVu Sans Mono  1233/2048 = 0.60205078125 → 99.6594% / 103.3521% / 28.0958% / 0%
 *                     (existing V142-03 face kept byte-identical; the binary advance
 *                     1233/2048 == the CP13 in-browser 60.205078125/100px em EXACTLY)
 *   Courier New       1229/2048 = 0.60009765625 → 99.9837% / 103.0168% / 28.0046% / 0%
 *   Noto Sans Mono     600/1000 = 0.6 → 100% / 103% / 28% / 0%
 *   Roboto Mono       1229/2048 = 0.60009765625 → 99.9837% / 103.0168% / 28.0046% / 0%
 * Droid Sans Mono: NOT sourceable from the pinned metrics package (@capsizecss/metrics
 * carries no droidSansMono); modern Android resolves monospace to Noto/Roboto Mono,
 * both in the stack. Faces whose local() font is absent simply do not load — the stack
 * falls through to the next family; the platform that has the font loads it.
 * Plex delivery UNCHANGED: font-display stays swap, no inlining, no font-display
 * change, zero JS. (public/assets/style.css carried the same latent gap on /join and
 * /login — FIXED by the V142c follow-up, Tani msg 35336, same stack copied verbatim.)
 */
@font-face {
  font-family: 'IBM Plex Mono Fallback Menlo';
  font-style: normal;
  font-weight: 300;
  src: local('Menlo');
  size-adjust: 99.6594%;
  ascent-override: 103.3521%;
  descent-override: 28.0957%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Menlo';
  font-style: normal;
  font-weight: 400;
  src: local('Menlo');
  size-adjust: 99.6594%;
  ascent-override: 103.3521%;
  descent-override: 28.0957%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Menlo';
  font-style: normal;
  font-weight: 500;
  src: local('Menlo');
  size-adjust: 99.6594%;
  ascent-override: 103.3521%;
  descent-override: 28.0957%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Consolas';
  font-style: normal;
  font-weight: 300;
  src: local('Consolas');
  size-adjust: 109.1297%;
  ascent-override: 94.3831%;
  descent-override: 25.6576%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Consolas';
  font-style: normal;
  font-weight: 400;
  src: local('Consolas');
  size-adjust: 109.1297%;
  ascent-override: 94.3831%;
  descent-override: 25.6576%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Consolas';
  font-style: normal;
  font-weight: 500;
  src: local('Consolas');
  size-adjust: 109.1297%;
  ascent-override: 94.3831%;
  descent-override: 25.6576%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback DejaVu';
  font-style: normal;
  font-weight: 300;
  src: local('DejaVu Sans Mono');
  size-adjust: 99.6594%;
  ascent-override: 103.3521%;
  descent-override: 28.0958%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback DejaVu';
  font-style: normal;
  font-weight: 400;
  src: local('DejaVu Sans Mono');
  size-adjust: 99.6594%;
  ascent-override: 103.3521%;
  descent-override: 28.0958%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback DejaVu';
  font-style: normal;
  font-weight: 500;
  src: local('DejaVu Sans Mono');
  size-adjust: 99.6594%;
  ascent-override: 103.3521%;
  descent-override: 28.0958%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Courier New';
  font-style: normal;
  font-weight: 300;
  src: local('Courier New');
  size-adjust: 99.9837%;
  ascent-override: 103.0168%;
  descent-override: 28.0046%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Courier New';
  font-style: normal;
  font-weight: 400;
  src: local('Courier New');
  size-adjust: 99.9837%;
  ascent-override: 103.0168%;
  descent-override: 28.0046%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Courier New';
  font-style: normal;
  font-weight: 500;
  src: local('Courier New');
  size-adjust: 99.9837%;
  ascent-override: 103.0168%;
  descent-override: 28.0046%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Noto Sans Mono';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans Mono');
  size-adjust: 100%;
  ascent-override: 103%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Noto Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans Mono');
  size-adjust: 100%;
  ascent-override: 103%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Noto Sans Mono';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Sans Mono');
  size-adjust: 100%;
  ascent-override: 103%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Roboto Mono';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Mono');
  size-adjust: 99.9837%;
  ascent-override: 103.0168%;
  descent-override: 28.0046%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono');
  size-adjust: 99.9837%;
  ascent-override: 103.0168%;
  descent-override: 28.0046%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback Roboto Mono';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Mono');
  size-adjust: 99.9837%;
  ascent-override: 103.0168%;
  descent-override: 28.0046%;
  line-gap-override: 0%;
}

:root {
  --font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback Menlo', 'IBM Plex Mono Fallback Consolas', 'IBM Plex Mono Fallback DejaVu', 'IBM Plex Mono Fallback Courier New', 'IBM Plex Mono Fallback Noto Sans Mono', 'IBM Plex Mono Fallback Roboto Mono', monospace;   /* YEEZY.font.mono + V142b per-platform metric-matched fallbacks */
  --white: #FFFFFF;                          /* YEEZY.color.white */
  --black: #000000;                          /* YEEZY.color.black */
  --ink: #171717;                            /* YEEZY.color.gray[900] */
  --secondary: #525252;                      /* YEEZY.color.gray[600] — floor, 7.81:1 on white */
  --hairline: #E5E5E5;                       /* YEEZY.color.gray[200] */
  --maxw: 1200px;                            /* YEEZY.layout.maxWidth (agency alias) */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 18px;          /* reading text — the one canon exception (canon body is 14px) */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* --- header: wordmark left, Support right (secondary) --- */
header.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 20px;
}
header.top .home-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--black); text-decoration: none; }  /* wordmark SVG + clear space: v6-creator-offer.css */
header.top nav a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
/* V141-05 narrow-width header reflow: WRAP the header and nav; never
 * clip (no overflow-x:hidden), never cap zoom (no user-scalable/max-scale),
 * never shrink the mark inversely to pinch zoom — the bounds below are
 * layout-viewport-relative only (CSS %, not visualViewport scale), so
 * magnification keeps working and the mark keeps its 160/192px geometry
 * at 320+ and only yields to the available layout width under that.
 * 320px stays the AA reflow standard; 195-320px is supported beyond it. */
header.top { flex-wrap: wrap; row-gap: 8px; }
header.top .home-link { max-width: 100%; }
header.top .home-link svg { max-width: 100%; }
header.top nav { max-width: 100%; }

/* --- type scale --- */
h1, h2 { margin: 0; font-weight: 400; }

h1 {
  font-size: 48px;              /* YEEZY.text.display */
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--black);
}
h2 {
  font-size: 24px;              /* YEEZY.text.heading */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--black);
}

p { margin: 0; }
p, h1, h2, dt, dd, a { overflow-wrap: break-word; }  /* 200% text / text-spacing overrides: grow, never clip */

.eyebrow {
  font-size: 14px;              /* YEEZY.text.body.size + micro tracking */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 12px;
}

.intro, .reading { max-width: 62ch; }

/* --- DOM order §2 (v6): invitation → campaign-formats object → availability+action → clock → footer --- */
.arrival { padding-top: 24px; }
.arrival-grid > * + * { margin-top: 24px; }

.formats {
  border: 1px solid var(--hairline);
  padding: 32px;               /* same hairline surface, same 32px padding as the retired example object */
  background: var(--white);
}
.formats h2 { margin: 0; }
.format-list { margin: 0; }
.format-row { border-top: 1px solid var(--hairline); margin: 0; padding: 16px 0; }  /* row rules: #E5E5E5, non-interactive */
.format-status, .format-note {
  display: block;
  font-size: 16px;              /* YEEZY.text.subheading.size */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--secondary);
}
.format { border-top: 1px solid var(--hairline); padding: 16px 0; margin: 0; }
.format dt {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--black);
}
.format dd {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--black);
}

.avail, .question {
  font-size: 16px;              /* YEEZY.text.subheading.size */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--secondary);
}
.avail { margin-bottom: 12px; }

/* --- availability + action: one unit --- */
.avail { margin-bottom: 12px; }
.action {
  display: inline-block;
  /* V141-05 narrow-width reflow: cap to the container and let the label wrap
   * (box-sizing border-box incl. padding) — a WRAP fix: no clipping, no zoom
   * caps, no shrinking; the action stays a real inline-block at 390/1440. */
  max-width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 13px 24px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-decoration: none;
}
.action:hover { background: var(--ink); border-color: var(--ink); }
.action:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.question { margin-top: 12px; }

/* --- supporting brief: REMOVED (Direction v6) — "Before a real campaign opens" retired with the block premise --- */

/* --- footer: privacy · terms · Support · legal line --- */
footer.bottom {
  border-top: 1px solid var(--hairline);
  padding: 32px 20px 48px;
}
footer.bottom .wrap { padding-left: 0; padding-right: 0; }
footer.bottom nav a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
footer.bottom .legal-line { margin-top: 8px; font-size: 16px; line-height: 1.3; color: var(--secondary); }

/* --- 1440: 1200px two-region grid, 1px #E5E5E5 vertical divider.
       Grid placement only — the DOM keeps §2 order; no duplicated action. --- */
@media (min-width: 1440px) {
  h1 { font-size: 64px; }  /* agency display alias at 1440 (documented, not a named TS token) */
  .arrival { padding-top: 128px; }
  .arrival-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .invitation { grid-column: 1; grid-row: 1; padding-right: 64px; }
  .formats {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding-left: 64px;
    border-left: 1px solid var(--hairline);
    border-top-left-radius: 0;
  }
  .avail-action { grid-column: 1; grid-row: 2; margin-top: 64px; padding-right: 64px; }
}

/* --- C7 design re-cut (Tani msg 15:33Z 2026-11-12, Claude screen verdict F2/F4):
 * F2 — inline links inside .question copy read like every other link on the
 * site: black, underlined (the v6 .write-line .mailto precedent), never the
 * browser default blue. /join + /login carry them; the rule loads site-wide
 * for consistency.
 * F4 — the same bottom gap before the footer rule on EVERY page: 64px on main,
 * so card bottom edges and reading text never sit on the footer. */
.question a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
main { padding-bottom: 64px; }

/* --- C7 screens-fix (Tani msg 50, 17:06Z 2026-11-12, Claude screen verdict G1):
 * G1 — /join + /login: the primary button sat flush under the lead paragraph;
 * .action-gap gives it the same space above it as on /creators and /brands
 * (the 12px .avail margin-bottom there). Scoped to the two account pages —
 * the audience pages keep their .avail-spaced action untouched. --- */
.action-gap { margin-top: 12px; }

/* --- no motion of any kind: nothing to reduce, nothing to animate --- */
@media (prefers-reduced-motion: no-preference) {
  /* intentionally empty — opacity is 1 from first paint, no transforms,
     no transitions, no reveal. Focus feedback is instant. */
}