/* CTRL-V Digital — design tokens. See DESIGN.md for rationale. */
:root{
  /* Ground and surfaces. Neutrals tinted toward the signal's own hue (155), never
     toward generic warmth. */
  --ink:        oklch(0.158 0.006 155);
  --ink-raised: oklch(0.285 0.009 155);   /* 1.35:1 on ink — perceptible surface */
  --ink-line:   oklch(0.332 0.011 155);   /* 1.62:1 — structural hairlines  */
  --ink-line-2: oklch(0.482 0.013 155);   /* 3.00:1 — WCAG 1.4.11 floor for
                                             interactive component borders */

  /* Type */
  --bone:       oklch(0.962 0.005 140);   /* 17.62:1 on ink */
  --bone-dim:   oklch(0.760 0.010 150);   /*  9.11:1 on ink */

  /* One signal. A cold yellow-green — not phosphor terminal green, not orange,
     not purple. Never exceeds ~8% of a viewport. */
  --signal:     oklch(0.885 0.185 128);

  /* Keycap geometry — the one shape language on the site */
  --r-cap: 10px;
  --r-cap-sm: 7px;

  --wrap: 1120px;
  --measure: 68ch;

  --f-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* 1.25 modular scale, fluid. Display ceiling 5.5rem (cap is 6rem). */
  --t--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.90rem);
  --t-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --t-1:  clamp(1.25rem, 1.17rem + 0.38vw, 1.52rem);
  --t-2:  clamp(1.56rem, 1.42rem + 0.70vw, 2.11rem);
  --t-3:  clamp(1.95rem, 1.70rem + 1.24vw, 2.93rem);
  --t-4:  clamp(2.44rem, 2.02rem + 2.09vw, 4.07rem);
  --t-5:  clamp(2.85rem, 2.16rem + 3.44vw, 5.50rem);

  /* ease-out-expo. No bounce, no elastic. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic z-index scale — never arbitrary 999 */
  --z-sticky: 100;
  --z-panel: 200;
}

*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--signal);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink-line-2);border-radius:6px;
  border:3px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--bone-dim)}
html{scrollbar-color:var(--ink-line-2) var(--ink);scrollbar-width:thin}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);caret-color:var(--signal);
  font-family:var(--f-sans);font-size:var(--t-0);line-height:1.65;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.06;letter-spacing:-0.035em;font-weight:640;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--signal);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:0 0 var(--r-cap-sm) 0;font-weight:600;z-index:var(--z-panel)}
.skip:focus{left:0;top:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- keycap
   The one shape language. Logo, buttons and the hero visual are all the
   same object: a rounded square with a lit top edge and a mono legend. */
.cap{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-line-2);border-radius:var(--r-cap);
  background:linear-gradient(180deg, var(--ink-raised), var(--ink));
  box-shadow:inset 0 1px 0 oklch(0.98 0 0 / 0.07), 0 1px 0 oklch(0 0 0 / 0.5);
  font-family:var(--f-mono);font-weight:600;letter-spacing:0;
  white-space:nowrap;
}

/* Wordmark: "Ctrl V" set inside one keycap. */
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand .cap{padding:.34rem .62rem;font-size:.78rem;color:var(--signal)}
.brand b{font-weight:650;letter-spacing:-0.02em;font-size:1rem}
.brand span{color:var(--bone-dim);font-weight:450}

/* Visually hidden, still in the accessibility tree and the heading outline. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:var(--z-sticky);
  background:oklch(0.158 0.006 155 / 0.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-line)}
.nav .wrap{display:flex;align-items:center;gap:1.75rem;min-height:72px}
.nav .links{display:flex;gap:1.7rem;margin-left:auto}
.nav .links a{text-decoration:none;color:var(--bone-dim);font-size:var(--t--1);
  font-weight:500;padding:.3rem 0;position:relative;transition:color .2s var(--ease)}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav .links a:hover{color:var(--bone)}
.nav .links a:hover::after,.nav .links a[aria-current="page"]::after{transform:scaleX(1)}
.nav .links a[aria-current="page"]{color:var(--bone)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--ink-line-2);
  color:var(--bone);border-radius:var(--r-cap-sm);width:42px;height:42px;cursor:pointer}
.panel{display:none;flex-direction:column;padding-bottom:1rem;border-top:1px solid var(--ink-line)}
.panel a{text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--ink-line);color:var(--bone)}
.nav.open .panel{display:flex}
body.nav-open{overflow:hidden}
@media (max-width:880px){.nav .links,.nav .cta{display:none}.menu-btn{display:block}.panel{padding-inline:1.25rem}}

/* ---------------------------------------------------------------- buttons
   A button is a keycap. It depresses. */
.btn{display:inline-flex;font-family:inherit;cursor:pointer;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:600;font-size:var(--t--1);padding:.8rem 1.3rem;
  border-radius:var(--r-cap-sm);border:1px solid transparent;
  background:var(--signal);color:var(--ink);
  box-shadow:0 2px 0 oklch(0.640 0.140 130);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .2s var(--ease)}
.btn:hover{background:oklch(0.92 0.185 128)}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 oklch(0.640 0.140 130)}
.btn.ghost{background:transparent;border-color:var(--ink-line-2);color:var(--bone);
  box-shadow:inset 0 1px 0 oklch(0.98 0 0 / 0.05)}
.btn.ghost:hover{border-color:var(--bone-dim);background:var(--ink-raised)}
.btn.big{font-size:var(--t-0);padding:.95rem 1.6rem}

/* ---------------------------------------------------------------- rhythm
   Generous between movements, tight within them. */
section{padding-block:clamp(4rem,9vw,8rem)}
section.tight{padding-block:clamp(2.5rem,5vw,4rem)}
.lede{font-size:var(--t-1);color:var(--bone);max-width:var(--measure);line-height:1.5}
.sub{color:var(--bone-dim);max-width:var(--measure)}
h2{font-size:var(--t-3)}
h3{font-size:var(--t-1);letter-spacing:-0.02em}

.hero{padding-block:clamp(4.5rem,12vw,9rem) clamp(3rem,7vw,6rem);position:relative;overflow:hidden}
.hero h1{font-size:var(--t-5);max-width:15ch}
.hero .lede{margin-top:1.6rem;font-size:var(--t-1)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.5rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(2rem,6vw,5rem);align-items:center}
/* Generated keycap — the brand object, drawn not photographed. These base rules
   MUST precede the media query below: when they sat after it, they silently
   overrode the mobile treatment at identical specificity. */
.hero-art{display:grid;place-items:center}
.hero-art .cap-lg{width:100%;max-width:320px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  /* Keep the keycap on small screens — it is the only image on the page, and a
     text-only mobile hero reads as unfinished. Shown smaller and left-aligned
     under the copy rather than hidden. */
  .hero-art{place-items:start;margin-top:.5rem}
  .hero-art .cap-lg{max-width:210px}
}

/* facts strip — not a hero-metric template: no big numbers, just plain claims */
.facts{display:flex;flex-wrap:wrap;gap:.65rem 2.25rem;margin-top:3rem;
  padding-top:1.6rem;border-top:1px solid var(--ink-line);
  color:var(--bone-dim);font-size:var(--t--1)}
.facts b{color:var(--bone);font-weight:600}

/* ---------------------------------------------------------------- services
   A typographic list with hairlines — deliberately not six identical cards. */
.services{margin-top:3rem;border-top:1px solid var(--ink-line)}
.services li{border-bottom:1px solid var(--ink-line);transition:background .25s var(--ease)}
.services li:hover{background:var(--ink-raised)}
.svc{display:grid;grid-template-columns:minmax(0,25ch) minmax(0,1fr);gap:1rem 2.5rem;
  padding:1.6rem .25rem;align-items:baseline}
.svc h3{margin:0}
.svc p{color:var(--bone-dim);max-width:58ch}
@media (max-width:760px){.svc{grid-template-columns:1fr;gap:.5rem}}

/* ---------------------------------------------------------------- split */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* steps — a real sequence, so it is numbered; nothing else on the site is */
.steps{display:grid;gap:2.2rem;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem}
.steps li::before{content:counter(s);font-family:var(--f-mono);font-size:.7rem;
  color:var(--signal);border:1px solid var(--ink-line-2);border-radius:var(--r-cap-sm);
  width:34px;height:34px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--ink-raised),var(--ink));
  box-shadow:inset 0 1px 0 oklch(0.98 0 0 / 0.06)}
.steps h3{margin-bottom:.4rem}
.steps p{color:var(--bone-dim);max-width:var(--measure)}

/* ---------------------------------------------------------------- work */
.work{display:grid;gap:1px;background:var(--ink-line);border:1px solid var(--ink-line);
  border-radius:var(--r-cap);overflow:hidden;margin-top:3rem}
.work > *{background:var(--ink);padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.55rem;
  text-decoration:none;transition:background .25s var(--ease)}
a.work-item:hover{background:var(--ink-raised)}
.work .role{font-family:var(--f-mono);font-size:.66rem;color:var(--signal);letter-spacing:0}
.work h3{font-size:var(--t-1)}
.work p{color:var(--bone-dim);font-size:var(--t--1)}
.work .go{color:var(--signal);font-weight:600;font-size:var(--t--1);margin-top:.3rem}
@media (min-width:820px){.work{grid-template-columns:repeat(3,1fr)}}

/* ---------------------------------------------------------------- prose */
.prose h2{margin-top:3.2rem;margin-bottom:1rem}
.prose h3{margin-top:2.2rem;margin-bottom:.5rem}
.prose p{color:var(--bone);max-width:var(--measure);margin-bottom:1.1rem}
.prose li{padding-left:1.6rem;position:relative;color:var(--bone);margin-bottom:.6rem;max-width:var(--measure)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border:1px solid var(--signal);border-radius:2px}
.note{border:1px solid var(--ink-line);background:var(--ink-raised);padding:1.35rem 1.5rem;
  border-radius:var(--r-cap);margin:2rem 0}
.note p{margin:0;max-width:var(--measure);color:var(--bone)}

/* inline links inside prose and tables */
.prose a,.qa a,td a{color:var(--signal);text-decoration:none;
  border-bottom:1px solid oklch(0.885 0.185 128 / 0.35);
  transition:border-color .2s var(--ease)}
.prose a:hover,.qa a:hover,td a:hover{border-bottom-color:var(--signal)}

/* qa — each question is linkable so a buyer can forward one answer */
.qa h3 a.anchor{color:inherit;text-decoration:none;border:0;position:relative}
.qa h3 a.anchor::after{content:"#";position:absolute;margin-left:.45rem;color:var(--signal);
  opacity:0;transition:opacity .18s var(--ease)}
.qa h3 a.anchor:hover::after,.qa h3 a.anchor:focus-visible::after{opacity:1}
.qa:target{background:var(--ink-raised);box-shadow:-1.25rem 0 0 var(--ink-raised),1.25rem 0 0 var(--ink-raised)}

/* qa */
.qa{border-bottom:1px solid var(--ink-line);padding-block:1.8rem}
.qa:first-of-type{border-top:1px solid var(--ink-line)}
.qa h3{margin-bottom:.6rem}
.qa p{color:var(--bone-dim);max-width:var(--measure)}

/* table */
.tw{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--ink-line);border-radius:var(--r-cap)}
table{border-collapse:collapse;width:100%;font-size:var(--t--1);min-width:520px}
th,td{text-align:left;padding:.9rem 1.15rem;border-bottom:1px solid var(--ink-line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.66rem;color:var(--signal);font-weight:400}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--bone);font-weight:550}
td{color:var(--bone-dim)}

/* band */
.band{background:var(--ink-raised);border-top:1px solid var(--ink-line-2);
  border-bottom:1px solid var(--ink-line)}
.band h2{max-width:17ch}
.band .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* footer */
footer{border-top:1px solid var(--ink-line);padding-block:3.5rem 2.5rem;
  color:var(--bone-dim);font-size:var(--t--1)}
footer .cols{display:grid;gap:2.5rem;grid-template-columns:1.5fr 1fr 1fr;margin-bottom:3rem}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer .fh{font-family:var(--f-mono);font-size:.66rem;color:var(--bone);margin:0 0 1rem;font-weight:400}
footer a{color:var(--bone-dim);text-decoration:none;display:block;padding:.32rem 0;
  transition:color .2s var(--ease)}
footer a:hover{color:var(--signal)}
footer .legal{border-top:1px solid var(--ink-line);padding-top:1.75rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:space-between}
footer .legal p{margin:0}

/* ---------------------------------------------------------------- motion
   One orchestrated load: the hero keycap presses once, the headline settles.
   Content is visible by default — these enhance, they never gate. */
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes press{
  0%{transform:translateY(-7px);opacity:0}
  55%{transform:translateY(3px);opacity:1}
  100%{transform:translateY(0)}
}
.hero h1,.hero .lede,.hero .actions,.hero .facts{animation:settle .8s var(--ease) both}
.hero .lede{animation-delay:.08s}
.hero .actions{animation-delay:.16s}
.hero .facts{animation-delay:.24s}
.hero-art .cap-lg{animation:press .7s var(--ease) both;animation-delay:.1s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .hero h1,.hero .lede,.hero .actions,.hero .facts,.hero-art .cap-lg{animation:none;opacity:1;transform:none}
}