/* ═══════════════════════════════════════════════════════════
   FIELDCUT — SHARED DESIGN SYSTEM
   Used by the public surfaces: /about (landing) and /manual (guide).
   The app itself (style.css) keeps its own chrome; this file is the
   editorial layer — square edges, one accent, hierarchy by size alone.

   TWO TYPEFACES. Delight for everything a person reads, Basis Grotesque
   Mono for anything that stands for a key, a filename or a machine value.
   Nothing else. No web fonts are fetched — both files are ours.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Delight';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/Delight-Regular.woff2') format('woff2')}
@font-face{font-family:'Delight';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/Delight-Medium.woff2') format('woff2')}
@font-face{font-family:'BG';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/BasisGrotesqueMono-Regular.woff2') format('woff2'),
      url('fonts/BasisGrotesqueMono-Regular.ttf') format('truetype')}

:root{
  /* ── CANVAS ── near-black, never pure. Two surfaces, no more. */
  --bg:#0a0a0a;
  --sf:rgba(255,255,255,.035);      /* raised panel */
  --sf2:rgba(255,255,255,.06);      /* hover / active cell */

  /* ── INK ── three steps of quiet, that is the whole scale.
     All three clear 4.5:1 on the canvas, so any of them can carry body
     copy: 14.9:1, 8.3:1, 5.7:1. The old --mu sat at 3.7:1 and failed. */
  --tx:#ededed;
  --di:#a8a8a8;
  --mu:#8a8a8a;

  /* ── LINE ── hairlines carry the structure, fills almost never do */
  --br:rgba(255,255,255,.10);
  --bh:rgba(255,255,255,.22);

  /* ── ACCENT ── one colour. Actions, state, emphasis. Nothing decorative. */
  --ac:#ff2e00;
  --ad:rgba(255,46,0,.12);
  --ab:rgba(255,46,0,.42);
  --ok:#4ec77a;
  --er:#ff6b6b;

  /* ── TYPE ── */
  --sans:'Delight',system-ui,-apple-system,sans-serif;
  --mono:'BG',ui-monospace,monospace;
  --display:var(--sans);

  /* Fluid scale. Every step is a real jump — no near-identical sizes. */
  --t-display:clamp(64px,15vw,176px);
  --t-h1:clamp(40px,7.6vw,96px);
  --t-h2:clamp(30px,4.8vw,62px);
  --t-h3:clamp(22px,2.8vw,34px);
  --t-lead:clamp(17px,2vw,23px);
  --t-body:16px;
  --t-small:14px;
  --t-micro:10px;

  /* ── SPACE ── 4px base, only these steps */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:96px;--s10:140px;

  --gut:clamp(20px,5vw,80px);       /* page gutter */
  --max:1180px;                     /* measure of the page */
  --read:58ch;                      /* measure of a paragraph */

  /* ── MOTION ── one curve, two speeds */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.28s;
  --dur-slow:.7s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* display on the primitives below would otherwise beat [hidden] */
[hidden]{display:none!important}

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

body{
  background:var(--bg);color:var(--tx);
  font-family:var(--sans);font-size:var(--t-body);font-weight:400;
  line-height:1.6;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--ac);color:#fff}

/* ── PRIMITIVES ─────────────────────────────────────────── */

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

/* Micro label. Mono, uppercase, accent. Marks the start of a section. */
.eyebrow{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ac);
}
.eyebrow.quiet{color:var(--mu)}

/* Display type. One family, so size and tightness do all the work. */
.display{font-weight:500;letter-spacing:-.035em;line-height:.92}
.display em{font-style:normal;color:var(--ac)}

.lead{font-size:var(--t-lead);color:var(--di);line-height:1.5;max-width:var(--read);font-weight:400}

.rule{height:1px;background:var(--br);border:0}

/* Buttons — outlines, square, the fill only on the one primary action. */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border:1px solid var(--br);background:transparent;
  color:var(--tx);font-family:var(--sans);font-size:15px;font-weight:400;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
/* the wipe fills from the left on hover, it does not fade */
.btn::before{content:'';position:absolute;inset:0;background:var(--sf2);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease)}
.btn>*{position:relative}
.btn:hover{border-color:var(--bh)}
.btn:hover::before{transform:scaleX(1)}
/* Near-black on the orange, not white: white sits at 3.7:1 and fails, the
   canvas colour reads 5.3:1 and looks more deliberate anyway. */
.btn--primary{background:var(--ac);border-color:var(--ac);color:var(--bg);font-weight:500}
.btn--primary::before{background:rgba(0,0,0,.18)}
.btn--ghost{border-color:transparent;padding-inline:0;color:var(--di)}
.btn--ghost::before{display:none}
.btn--ghost:hover{color:var(--tx)}

kbd{
  font-family:var(--mono);font-size:11px;line-height:1;
  padding:6px 9px;border:1px solid var(--br);background:var(--sf);
  color:var(--tx);letter-spacing:.04em;white-space:nowrap;
}

a{color:inherit}

/* Keyboard users need to see where they are. Mouse users never see this. */
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

/* Straight to the content, for anyone tabbing in. */
.skip{position:absolute;left:var(--gut);top:-100px;z-index:200;
  padding:12px 20px;background:var(--ac);color:#fff;font-size:14px;
  text-decoration:none;transition:top var(--dur) var(--ease)}
.skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}