/* ============================================================================
   ORIGIN DESIGN SYSTEM  ·  origin.css  ·  Volume I
   The single source of truth for the Origin suite
   (Origin · Waybill · Manifest · Dispatch).

   THREE COLOURS, IN EXACT RATIO
     Stone  #E8E2D8  — the page, ~80% of every layout
     Ink    #111110  — type & rules, ~19%
     Magenta#FF2E93  — the accent, <=1%. One magenta moment per layout, never more.

   THREE FAMILIES, FOUR ROLES
     Display   Inter 900   (-4% tracking)     Headline  Inter 800 (-3.5%)
     Editorial Instrument Serif Italic         Metadata  JetBrains Mono 500, +tracking, UPPERCASE

   FIVE LAWS
     1. Hard-left. Never centred, never right-aligned.
     2. A mono label above every headline — the label is the entry point.
     3. Zero corner radius. Pills are reserved for the mark alone.
     4. Rules & hairlines, never shadows.
     5. Stone breathes — 96-144px between major blocks. Generosity is the system.

   Each app loads the three fonts itself (Google Fonts <link> or next/font);
   this file only assumes they resolve as 'Inter', 'Instrument Serif',
   'JetBrains Mono'. Import once and style from the tokens below — never
   hard-code a colour, weight or size in a component.
   Pair with origin.js for the motion (reveal / magnetic / marquee / pulse).
   ============================================================================ */

:root{
  /* ---- palette : the only three colours ---- */
  --stone:#e8e2d8;                 /* the page */
  --stone-2:#ded7ca;               /* a stone half-tone for grouped panels */
  --field-bg:#f4f1ea;              /* form field fill */
  --ink:#111110;                   /* type & rules */
  --ink-70:rgba(17,17,16,.66);
  --ink-58:rgba(17,17,16,.58);
  --ink-45:rgba(17,17,16,.45);       /* hairline-weight text only — fails AA, never for labels */
  --ink-label:rgba(17,17,16,.62);    /* mono labels on stone — lightest that passes WCAG AA (4.7:1) */
  --line:rgba(17,17,16,.16);       /* hairline divider / border */
  --line-strong:rgba(17,17,16,.25);
  --rule:rgba(17,17,16,.85);       /* heavy rule anchor */
  --magenta:#ff2e93;               /* the accent */
  --magenta-press:#e62984;
  --accent-ink:#111110;
  /* on ink (off-black) surfaces */
  --paper:#e8e2d8;
  --paper-70:rgba(232,226,216,.7);
  --paper-45:rgba(232,226,216,.45);   /* fills/hairlines on ink only — fails AA for text */
  --paper-label:rgba(232,226,216,.55);/* mono labels on ink — lightest that passes WCAG AA (5.0:1) */
  --line-ink:rgba(232,226,216,.16);

  /* legacy aliases — keep the existing suite grammar working unchanged */
  --paper-raised:rgba(237,232,222,.5);
  --ink-muted:var(--ink-58);
  --accent:var(--magenta);

  /* ---- type : 'Inter' etc. if loaded by name, else the app's font var ---- */
  --font-body:'Inter',var(--font-inter,ui-sans-serif),system-ui,sans-serif;
  --font-serif:'Instrument Serif',var(--font-instrument,Georgia),serif;
  --font-data:'JetBrains Mono',var(--font-jetbrains,ui-monospace),Menlo,Consolas,monospace;
  --font-sans:var(--font-body);

  /* ---- system ---- */
  --radius:0px;                    /* square everything; pills only for the mark */
  --gutter:clamp(1.5rem,6vw,7rem); /* page side margin */
  --block:clamp(6rem,12vw,10rem);  /* space between major blocks — stone breathes */
}

body{background:var(--stone);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--magenta);color:var(--ink);}

/* ============================================================================
   THE MARK — Origin's logo file, never redrawn (her ruling of 15 October 2026:
   "The mark is Origin's own logo image (Origin/public/logo.png: the pink dot
   and 'rigin'; a light-on-dark copy for ink pages), never a dot and type set
   by hand"). The magenta dot is the "o" of "origin", in the file itself.
     <a class="wordmark" href="/" aria-label="Origin"></a>
     <span class="wordmark" role="img" aria-label="Origin"></span>  (no link)
   Size it by font-size, as before. .wordmark.on-ink wears the light copy
   (/logo-reversed.png) on dark surfaces. For the heartbeat, put
   <span class="pulse" aria-hidden="true"></span> inside: a ring laid on the
   file's own dot, header only, never print.
   The rule below is src/origin-logo.mjs ORIGIN_LOGO_CSS character for
   character (verify:design holds every copy equal): the picture at the house
   face's x-height, its dot's left edge on the box's left, its baseline on the
   line the mark stands on, the box the drawn mark's (2.702em wide, so nothing
   beside it moves; the file's letters run .19em past it on the right).
   Until 17 October 2026 this rule drew a pink circle .6em across and set
   "rigin" in Inter 900 (board row 58ba7c1e).
   Clear space = one dot on all sides. Min size: 120px lockup / 24px mark alone.
   ============================================================================ */
.wordmark{display:inline-block;position:relative;width:2.702em;font-family:'Inter',system-ui,sans-serif;line-height:1;text-decoration:none;}
.wordmark::before{content:"";position:absolute;left:-.2004em;top:calc(50% - .4489em);width:3.3398em;height:1.1133em;background:url(/logo.png) 0 0/100% 100% no-repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.wordmark::after{content:"";display:inline-block;}
.wordmark.on-ink::before{background-image:url(/logo-reversed.png);}
.wordmark .pulse{position:absolute;left:0;top:calc(50% - .2012em);width:.6067em;height:.6067em;border-radius:50%;}
.pulse{animation:o-pulse 3s ease-in-out infinite;}
@keyframes o-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,46,147,.5)}55%{box-shadow:0 0 0 .3em rgba(255,46,147,0)}}

/* ============================================================================
   TYPE ROLES
   ============================================================================ */
.display{font-family:var(--font-body);font-weight:900;letter-spacing:-.04em;line-height:.92;}
.headline{font-family:var(--font-body);font-weight:800;letter-spacing:-.035em;line-height:1;}
.subhead{font-family:var(--font-body);font-weight:800;letter-spacing:-.03em;line-height:1.05;}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;line-height:1.15;}
/* the flourish — the expressive "wink": an oversized magenta italic-serif word,
   the one place the clean grotesk and the cursive collide. Set its size where
   it is used; keep it to a single word or two. This is a magenta moment. */
.flourish{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--magenta);line-height:.9;letter-spacing:-.01em;}
.accent-period{color:var(--magenta);}

/* mono metadata label — "the label is the entry point": one above every headline */
.doc-label,.kicker{font-family:var(--font-data);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-label);}
.doc-label.on-ink,.kicker.on-ink{color:var(--paper-label);}
.doc-data{font-family:var(--font-data);font-size:.8125rem;font-weight:500;}

/* ============================================================================
   RULES & SURFACES  (depth is hairlines and heavy rules — never shadows)
   ============================================================================ */
.doc-rule,.rule-strong{height:0;border:0;border-top:2px solid var(--rule);}
.doc-rule.on-ink,.rule-strong.on-ink{border-top-color:var(--line-ink);}
.hairline{height:0;border:0;border-top:1px solid var(--line);}
.hairline.on-ink{border-top-color:var(--line-ink);}
.doc-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);}

/* alternating plane — a full-bleed off-black section (the editorial rhythm) */
.ink-section{background:var(--ink);color:var(--paper);}

/* ============================================================================
   CONTROLS  (the suite grammar)
   ============================================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-body);font-size:.875rem;font-weight:600;padding:.625rem 1rem;border-radius:var(--radius);border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;}
.btn:hover{background:rgba(17,17,16,.9);}
.btn:disabled{opacity:.5;cursor:default;}
.btn-secondary{background:transparent;border-color:rgba(17,17,16,.8);color:var(--ink);}
.btn-secondary:hover{background:rgba(17,17,16,.06);}
.btn-accent{background:var(--magenta);border-color:var(--magenta);color:var(--accent-ink);}
.btn-accent:hover{background:var(--magenta-press);border-color:var(--magenta-press);}

/* expressive marketing buttons */
.btn-mag{display:inline-flex;align-items:center;gap:.7rem;background:var(--magenta);color:var(--ink);font-family:var(--font-body);font-weight:700;font-size:.98rem;letter-spacing:-.01em;padding:.95rem 1.5rem;border:0;cursor:pointer;will-change:transform;text-decoration:none;}
.btn-mag svg{width:17px;height:17px;transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.btn-mag:hover svg{transform:translateX(5px);}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-data);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);border-bottom:1px solid var(--line);padding-bottom:3px;text-decoration:none;}
.btn-ghost.on-ink{color:var(--paper-70);border-color:var(--line-ink);}
.btn-ghost:hover{color:var(--ink);border-color:var(--magenta);}
.btn-ghost.on-ink:hover{color:var(--paper);}

.field{width:100%;background:var(--field-bg);border:1px solid var(--line);border-radius:var(--radius);padding:.625rem .75rem;font-family:var(--font-body);font-size:.875rem;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;}
.field::placeholder{color:var(--ink-muted);}
.field:focus{border-color:var(--ink);}

/* keyboard focus — a system-wide ink ring (kept off the magenta budget). :where()
   keeps specificity 0 so components can override; it shows only for keyboard users. */
:where(a,button,.btn,.btn-secondary,.btn-accent,.btn-mag,.btn-ghost,.tab,.wordmark,.field,.row,.chip):focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.ink-section :where(a,button,.tab,.wordmark,.field,.row,.chip):focus-visible,
:where(.wordmark.on-ink,.btn-ghost.on-ink):focus-visible{outline-color:var(--paper);}
textarea.field{font-family:var(--font-data);font-size:.8125rem;line-height:1.6;}
.field-label{display:block;font-family:var(--font-data);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.5rem;}
.field-hint{font-size:.75rem;color:var(--ink-muted);margin-top:.375rem;}

/* chips & tabs */
.chip{display:inline-flex;align-items:center;gap:.375rem;font-family:var(--font-data);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-strong);padding:.125rem .625rem;color:var(--ink);}
.chip-accent{border-color:var(--magenta);background:var(--magenta);color:var(--accent-ink);}
.tab{font-family:var(--font-data);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .125rem;color:var(--ink-muted);border-bottom:2px solid transparent;text-decoration:none;}
.tab:hover{color:var(--ink);}
.tab-active{color:var(--ink);border-bottom-color:var(--magenta);}

/* ============================================================================
   THE SUITE SWITCHER  (rendered by origin.js into [data-origin-suite])
   ============================================================================ */
.o-suite{position:relative;display:inline-block;}
.o-suite-btn{font-family:var(--font-data);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-70);background:none;border:0;padding:.25rem 0;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;}
.o-suite-btn:hover{color:var(--ink);}
.o-suite .car{transition:transform .2s;font-size:.8em;}
.o-suite.open .car{transform:rotate(180deg);}
.o-suite.on-ink .o-suite-btn{color:var(--paper-70);}
.o-suite.on-ink .o-suite-btn:hover{color:var(--paper);}
.o-suite-panel{position:absolute;left:0;top:100%;margin-top:12px;width:300px;max-width:86vw;z-index:60;background:var(--stone);border:1px solid var(--line-strong);display:none;}
.o-suite.open .o-suite-panel{display:block;}
.o-suite-head{padding:12px 16px 8px;border-top:2px solid var(--rule);}
.o-suite-app{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 16px;text-decoration:none;color:var(--ink);}
a.o-suite-app:hover{background:rgba(17,17,16,.05);}
.o-suite-app .nm{font-size:.9rem;font-weight:700;}
.o-suite-app .ln{font-family:var(--font-serif);font-style:italic;font-size:.9rem;color:var(--ink-muted);margin-left:8px;}
.o-suite-app .mk{font-family:var(--font-data);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);flex:none;}
.o-suite-foot{padding:6px 16px 14px;font-family:var(--font-serif);font-style:italic;font-size:.85rem;color:var(--ink-muted);}

/* row */
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);}
.row:hover .row-title{color:var(--magenta);}
.row:hover .row-arrow{color:var(--magenta);transform:translateX(2px);}
.row-arrow{color:var(--ink-muted);transition:transform .15s,color .15s;}

/* ============================================================================
   MOTION  (behaviour lives in origin.js; these are the styles it toggles)
   Fails open: content is hidden only when JS is present (html.js).
   ============================================================================ */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);}
html.js .reveal.in{opacity:1;transform:none;}

.marquee{background:var(--ink);color:var(--paper);border-top:2px solid var(--ink);border-bottom:1px solid var(--line-ink);overflow:hidden;padding:.9rem 0;white-space:nowrap;}
.marquee .track{display:inline-flex;gap:2.5rem;align-items:center;animation:o-scroll 26s linear infinite;font-family:var(--font-data);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-70);}
.marquee .track span{display:inline-flex;gap:2.5rem;align-items:center;}
.marquee .d{width:.5em;height:.5em;border-radius:50%;background:var(--magenta);display:inline-block;}
@keyframes o-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* tactile paper grain — apply to a full-bleed wrapper or body via .grain */
.grain{position:relative;}
.grain::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============================================================================
   LAYOUT HELPERS
   ============================================================================ */
.o-max{max-width:1180px;margin:0 auto;}
.o-section{padding:var(--block) var(--gutter);}

@media(prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none;}
  .marquee .track,.pulse{animation:none;}
  .btn-mag svg,.row-arrow{transition:none;}
  .btn-mag:hover svg,.row:hover .row-arrow{transform:none;}
}

/* ============================================================================
   THE TAP TARGET  (Livery spec §10.2, the laws of use: Fitts)
   On a phone every control a finger lands on is at least 44px tall: the box
   grows, the type does not. Held by `npm run verify:design`, which renders
   every class below at phone width in headless Chrome and reads the heights
   off the page. Measured before this block (2026-09-20): buttons 39 to 41,
   fields 39, tabs 32, the suite switcher 22, the ghost link 19.
   Every class here is border-box, because a <button> is border-box by the
   browser's default and an <a> is not: without it the 44 landed on an anchor's
   content box and the control's own padding stacked on top (a.btn 66, a.btn-mag
   74, a.tab 62, found by the review of 2026-09-20), and the tab's magenta
   underline sat 25px under its word. The tab grows upward (align-items:
   flex-end) so its line stays the same 8px under the word it is on a desktop.
   The ghost link swaps its hairline for an underline at this width so the
   line stays on the word rather than 15px under it in a taller box.
   ============================================================================ */
@media(max-width:767px){
  .btn,.btn-mag,.btn-ghost,.field,.tab,.o-suite-btn,a.wordmark,a.chip,button.chip{box-sizing:border-box;min-height:44px;}
  .tab,a.chip,button.chip{display:inline-flex;align-items:center;}
  /* the mark has no words to centre: its line grows to the 44, so the logo
     sits in the middle of the taller box as its letters did */
  a.wordmark{line-height:max(44px,1em);}
  .tab{align-items:flex-end;}
  .btn-ghost{border-bottom:0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);}
  .btn-ghost.on-ink{text-decoration-color:var(--line-ink);}
  .btn-ghost:hover{text-decoration-color:var(--magenta);}
}