/* ===========================================================================
   Ridge Nelson, portfolio base layer (grid, nav, components, state logic).
   Typography, colour tokens and the section language live in v5.css, which
   every page loads after this file. See docs/career/PORTFOLIO_DIRECTION_V5.md.
   =========================================================================== */

:root{
  color-scheme:light;

  /* shell */
  /* One palette. Paper, ink, dim, accent, the same four the page sheets
     use as --pp/--ik/--dm/--ac. The extra names are kept because older
     markup still asks for them; they are aliases, not new colours. */
  --paper:#F3F1EC; --paper-2:#E8E5DE; --paper-3:#D9D5CB; --white:#FBFAF7;
  --ink:#14120F; --ink-2:#6B6559; --ink-3:#6B6559;
  --rule:rgba(20, 18, 15, 0.14); --rule-2:rgba(20, 18, 15, 0.28);
  --signal:#1F3AC6;

  /* type */
  --sans:"Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:var(--sans);

  --t-giga:clamp(3.3rem, 0.4rem + 12.4vw, 14rem);
  --t-mega:clamp(2.9rem, 0.7rem + 8.4vw, 9.6rem);
  --t-xl:clamp(2.2rem, 0.9rem + 4.6vw, 5.6rem);
  --t-l:clamp(1.55rem, 1.05rem + 1.9vw, 2.9rem);
  --t-m:clamp(1.12rem, 0.98rem + 0.62vw, 1.5rem);
  --t-body:clamp(16px, 15.3px + 0.2vw, 18px);
  --t-s:14.5px;
  --t-cap:12.5px;

  /* space + grid */
  --m:clamp(16px, 3.6vw, 64px);          /* page margin */
  --g:clamp(12px, 1.6vw, 28px);          /* gutter */
  --sec:clamp(72px, 10vw, 184px);        /* section rhythm */
  --nav-h:56px;

  /* motion: fast feedback, standard UI, editorial */
  --fast:140ms; --ui:240ms; --ed:680ms; --step:70ms;   /* --step: one beat of a stagger */
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --mask:cubic-bezier(0.77, 0, 0.18, 1);

  /* v2 aliases so older markup keeps rendering inside the new system */
  --disp:var(--sans); --num:var(--mono);
  --t-md:var(--t-m); --t-title:var(--t-m); --t-lead:var(--t-l);
  --pad:var(--m); --gap:var(--g);
  --bg:var(--paper); --fg:var(--ink); --dim:var(--ink-2); --line:var(--rule); --sig:var(--signal);
  --t-meta:var(--t-cap); --stack:clamp(18px, 2.4vw, 40px);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.55;
  font-feature-settings:"ss01", "cv11"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,picture,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--signal); color:#fff; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--paper);
  padding:10px 14px; font:500 14px var(--sans); }
.skip:focus{ left:8px; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* ----------------------------------------------------------------- nav */
.nav3{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 var(--m); background:rgba(241, 239, 232, 0.86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--ui) var(--ease);
}
.nav3.is-scrolled{ border-bottom-color:var(--rule); }
.nav3 .mark{ font:600 15px/1 var(--sans); letter-spacing:-0.01em; text-decoration:none; display:flex; gap:10px; align-items:center; }
.nav3 .mark i{ width:7px; height:7px; background:var(--signal); display:inline-block; }
.nav3 ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(14px, 2.2vw, 34px); }
.nav3 a.l{
  position:relative; font:500 14px/1 var(--sans); text-decoration:none; color:var(--ink-2);
  padding:6px 0; transition:color var(--fast) var(--ease);
}
.nav3 a.l::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform var(--ui) var(--ease); }
.nav3 a.l:hover{ color:var(--ink); }
.nav3 a.l:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav3 a.l[aria-current="page"]{ color:var(--ink); }
.nav3 a.l[aria-current="page"]::after{ transform:scaleX(1); background:var(--signal); }
.nav3 .avail{ font:500 12.5px/1 var(--mono); color:var(--ink-2); display:flex; gap:8px; align-items:center; white-space:nowrap; }
.nav3 .avail::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 3px rgba(46, 85, 255, 0.16); }
@media (max-width:860px){ .nav3 .avail{ display:none; } }
@media (max-width:520px){
  .nav3{ height:52px; } :root{ --nav-h:52px; }
  .nav3 ul{ gap:14px; } .nav3 a.l{ font-size:13.5px; }
  .nav3 .mark span{ display:none; }
}
.node.k{ border-color:#2E55FF; background:rgba(46, 85, 255, 0.2); }

@keyframes node-in{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@media (max-width:760px){
  .lane{ grid-template-columns:1fr; gap:6px; }
  .nodes{ flex-direction:column; }
  .node + .node{ margin-left:0; margin-top:8px; }
  .node + .node::before{ right:auto; left:14px; top:auto; bottom:100%; width:1px; height:8px; }
  .arch{ overflow-y:auto; }
  .arch pre{ display:none; }
}

/* shared: section intro line + "open the case" link */
.go{ display:inline-flex; align-items:center; gap:10px; font:500 14px/1 var(--sans); text-decoration:none;
  padding:12px 0; border-bottom:1.5px solid currentColor; }
.go .ar{ display:inline-block; transition:transform var(--ui) var(--ease); }
.go:hover .ar{ transform:translateX(4px); }

/* ---------------------------------------------------------------- reveals */

@media (prefers-reduced-motion:reduce){
  
  *,*::before,*::after{ transition-duration:1ms !important; animation-duration:1ms !important; animation-delay:0ms !important; }
}

/* hover previews exist only where hovering exists; the hero never scrolls sideways */

/* ---- opening, pass 2: fill the hero, fix collisions ---- */

.nav3 .mark{ white-space:nowrap; }
/* mobile system state: the same plate, recomposed as a numbered two-column grid */
@media (max-width:760px){
  
  .arch{ padding:16px; gap:10px; overflow:hidden; }
  .arch .hd{ font-size:11px; }
  .arch .hd span:last-child{ display:none; }
  .arch .lanes{ align-content:start; gap:12px; counter-reset:n; }
  .lane{ grid-template-columns:1fr; gap:6px; }
  .lane > span{ font-size:11px; }
  .nodes{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
  .node{ min-height:0; padding:7px 8px 7px 26px; font-size:11.5px; line-height:1.3; counter-increment:n; }
  .node::after{ content:counter(n, decimal-leading-zero); position:absolute; left:7px; top:8px; font-size:9.5px; color:#8E96B3; }
  .node small{ font-size:10px; margin-top:2px; }
  .node + .node{ margin:0; }
  .node + .node::before{ display:none; }
  
  
  
}

/* nav at the narrowest phones */
@media (max-width:420px){ .nav3 ul{ gap:11px; } .nav3 a.l{ font-size:13px; } .nav3{ gap:10px; } }

/* shared section scaffolding */

.kick{ font:500 12.5px/1.3 var(--mono); letter-spacing:0.03em; text-transform:uppercase; color:var(--dim, var(--ink-2)); margin:0; }
.recs .sc{ overflow-x:auto; }
.red{ display:inline-block; height:0.8em; background:var(--fg); vertical-align:-0.05em; }
.st{ display:inline-flex; gap:7px; align-items:center; }
.st::before{ content:""; width:7px; height:7px; background:currentColor; }
.st.f{ color:var(--flag); } .st.o{ color:var(--dim); } .st.b{ color:var(--ok); } .st.s{ color:var(--sig); }
@media (max-width:760px){ .recs .hide-s{ display:none; } }

/* pipeline: nine stages across one horizontal band */

/* message ↔ record: hover a variable, see the field that fills it */
.map{ display:grid; grid-template-columns:7fr 5fr; gap:var(--g); padding:0 var(--m) var(--sec); align-items:start; }
.msg{ background:var(--fg); color:#F2F4F8; padding:clamp(22px, 3vw, 48px); }
.msg .kick{ color:#9AA6B8; }
.msg p{ margin:18px 0 0; font:400 clamp(1.2rem, 0.95rem + 1vw, 1.9rem)/1.4 var(--sans); letter-spacing:-0.015em; }
.msg p + p{ margin-top:0.8em; }
.v{ font:500 0.8em var(--mono); color:#9FB2FF; border-bottom:1.5px solid rgba(159, 178, 255, 0.5); padding:0 2px; cursor:help;
  transition:background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.v:hover,.v:focus-visible{ background:#2E55FF; color:#fff; outline:none; }
.fields{ border-top:1.5px solid var(--fg); }
.fields div{ display:grid; grid-template-columns:minmax(0, 12ch) minmax(0, 1fr); gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line); font:500 13px/1.4 var(--mono); transition:background-color var(--fast) var(--ease), padding var(--ui) var(--ease); }
.fields dt{ color:var(--dim); } .fields dd{ margin:0; }
.fields .note{ font:500 12px/1.5 var(--mono); color:var(--dim); border:0; display:block; padding-top:12px; }
.map:has([data-v="business"]:is(:hover, :focus-visible)) [data-f="business"],
.map:has([data-v="finding"]:is(:hover, :focus-visible)) [data-f="finding"],
.map:has([data-v="trade"]:is(:hover, :focus-visible)) [data-f="trade"],
.map:has([data-v="first"]:is(:hover, :focus-visible)) [data-f="first"],
.map:has([data-v="area"]:is(:hover, :focus-visible)) [data-f="area"]{ background:#E3E9FF; padding-left:10px; }
@media (max-width:860px){ .map{ grid-template-columns:1fr; } }

/* ========================================================== Facility world */

/* the walkthrough: seven steps, one diagram */

/* state by step: 0 customer 1 bay 2 time 3 reservation 4 rules 5 authorisation 6 door */

 

.msg p.kick{ margin:0; font:500 12.5px/1.3 var(--mono); letter-spacing:0.03em; color:#9AA6B8; }
.beats .n{ font:500 12px/1 var(--mono); color:var(--dim); }
.beats li:first-child .n{ color:#9A968D; }
.beats .ok{ color:#1D6B47; }
@media (max-width:900px){
  .beats{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78vw; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--m)); padding:0 var(--m); scrollbar-width:none; }
  .beats::-webkit-scrollbar{ display:none; }
  .beats li{ scroll-snap-align:start; min-height:360px; }
}
@media (max-width:760px){ .csec{ grid-template-columns:1fr; row-gap:14px; } .csec > *{ grid-column:1 / -1 !important; } }
.artifact .scroll{ overflow-x:auto; }

/* contact bits on subpages */
.copy{ appearance:none; cursor:pointer; background:transparent; border:1.5px solid var(--fg, var(--ink)); color:var(--fg, var(--ink));
  padding:11px 16px; font:500 13px/1 var(--mono); letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
  transition:background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.copy:hover,.copy[data-done="1"]{ background:var(--fg, var(--ink)); color:var(--bg, var(--paper)); }
@media (max-width:700px){ .note-row{ grid-template-columns:1fr; gap:8px; } }
.spec{ font:500 12.5px/1.45 var(--mono); letter-spacing:0.02em; color:var(--ink-2); }
figcaption.spec,p.spec{ text-transform:uppercase; }
.doc .body .note{ margin-top:clamp(30px, 4vw, 56px); padding-top:14px; border-top:1px solid var(--rule); font:500 12.5px/1.6 var(--mono); color:var(--ink-2); }
.doc .plate{ margin:clamp(28px, 4vw, 64px) calc(-1 * var(--m)) 0; }
.doc .plate img{ width:100%; }
.doc .plate figcaption{ padding:10px var(--m) 0; }
.doc .sec > h2.spec{ font-size:12.5px; }
.doc .flag{ margin:clamp(24px, 3vw, 40px) 0 0; padding:4px 0 4px 14px; border-left:3px solid var(--signal); font:500 13px/1.6 var(--mono); color:var(--ink-2); max-width:78ch; }
.doc .next > .spec{ font-size:var(--t-l); transition:transform var(--ui) var(--ease); }
.doc .next:hover > .spec{ transform:translateX(8px); }
@media (max-width:760px){
  .dochead{ grid-template-columns:1fr; }
  .doc .two,.doc .cols,.doc .sec.split{ grid-template-columns:1fr; }
}
/* contrast: the worksite accent is darkened wherever it is text on concrete */

/* ==========================================================================
   v3.1, final quality pass. Group 1.
   ========================================================================== */

/* ---- mobile header: RIDGE NELSON · WORK · INDEX, with a sheet ---- */
.navm{ display:none; align-items:center; gap:20px; }
.navm .l{ font:500 14px/1 var(--sans); text-decoration:none; color:var(--ink); padding:8px 0; }
.idx{ appearance:none; background:transparent; border:0; cursor:pointer; padding:8px 0; display:inline-flex; gap:8px; align-items:center;
  font:500 12.5px/1 var(--mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
.idx i{ position:relative; width:14px; height:8px; }
.idx i::before,.idx i::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform var(--ui) var(--ease), top var(--ui) var(--ease); }
.idx i::before{ top:0; } .idx i::after{ top:6.5px; }
.idx[aria-expanded="true"] i::before{ top:3.25px; transform:rotate(45deg); }
.idx[aria-expanded="true"] i::after{ top:3.25px; transform:rotate(-45deg); }
.sheet{ position:fixed; z-index:49; left:0; right:0; top:var(--nav-h); bottom:0; background:var(--paper);
  padding:clamp(20px, 5vw, 40px) var(--m) calc(24px + env(safe-area-inset-bottom)); overflow-y:auto;
  display:flex; flex-direction:column; justify-content:space-between;
  clip-path:inset(0 0 100% 0); transition:clip-path var(--ui) var(--mask); }
.sheet.open{ clip-path:inset(0 0 0 0); }
.sheet[hidden]{ display:none; }
.sheet ol{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink); }
.sheet li a{ display:flex; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule);
  font:500 clamp(2rem, 9vw, 2.9rem)/1 var(--sans); letter-spacing:-0.04em; text-decoration:none; }
.sheet li a span{ font:500 12px/1 var(--mono); color:var(--ink-3); letter-spacing:0.04em; width:2.4ch; }
.sheet li a[aria-current="page"]{ color:var(--signal); }
.sheet .foot-s{ margin-top:30px; font:500 13px/1.6 var(--mono); }
.sheet .foot-s a{ font:500 1.25rem/1.2 var(--sans); letter-spacing:-0.02em; text-decoration:none; border-bottom:1.5px solid var(--ink); }
html.nav-open{ overflow:hidden; }
@media (max-width:760px){
  .nav3 nav[aria-label="Primary"],.nav3 .avail{ display:none; }
  .navm{ display:flex; }
  .nav3 .mark{ font-size:15px; }
}
/* 320 px phones: the mark, Work and Index together ran 5 px past the edge */
@media (max-width:340px){ .navm{ gap:12px; } }
@media (min-width:761px){ .sheet{ display:none !important; } }
.node.k{ border-color:var(--signal); background:rgba(46, 85, 255, 0.18); }
.red{ height:0.72em; background:linear-gradient(var(--fg), var(--fg)) 0 0 / 100% 100% no-repeat; opacity:0.9; }

@media (max-width:760px){ .recs .hide-xs{ display:none; } .recs th:nth-child(2),.recs td:nth-child(2){ padding-left:var(--m); } }

/* ==========================================================================
   v3.1, Group 2: selected client work, visual practice
   ========================================================================== */

/* visual practice: an image essay */

/* ==========================================================================
   v3.1, Group 3: systems atlas, notes, quiet ending
   ========================================================================== */
.atlas{ background:var(--paper-2); padding:var(--sec) var(--m); }
.atlas .ah{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:10px 30px; margin-bottom:clamp(20px, 3vw, 44px); }
.atlas h2{ margin:0; font:600 var(--t-xl)/0.9 var(--sans); letter-spacing:-0.05em; }
.atlas-body{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(20px, 3vw, 56px); align-items:start; }
.atlas-hd,.sx summary{ display:grid; grid-template-columns:3.4ch minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1.25fr) 9ch 1.4ch; gap:clamp(10px, 1.2vw, 20px); align-items:baseline; }
.atlas-hd{ padding:0 0 10px; border-bottom:1.5px solid var(--ink); font:500 11.5px/1 var(--mono); text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-3); }
.sx{ border-bottom:1px solid var(--rule-2); }
.sx summary{ list-style:none; cursor:pointer; padding:clamp(12px, 1.2vw, 16px) 0; position:relative; transition:background-color var(--fast) var(--ease); }
.sx summary::-webkit-details-marker{ display:none; }
.sx summary::before{ content:""; position:absolute; left:calc(-1 * clamp(10px, 1vw, 16px)); top:0; bottom:0; width:3px; background:var(--signal);
  transform:scaleY(0); transform-origin:top; transition:transform var(--ui) var(--ease); }
.sx.on summary::before,.sx[open] summary::before{ transform:scaleY(1); }
.sx summary:hover{ background:rgba(17, 17, 15, 0.035); }
.sx .n{ font:500 12px/1 var(--mono); color:var(--ink-3); }
.sx .nm{ font:600 clamp(14.5px, 1.1vw, 17px)/1.2 var(--sans); letter-spacing:-0.015em; }
.sx .io{ font:500 12px/1.45 var(--mono); color:var(--ink); }
.sx .sk{ font:500 12px/1.45 var(--mono); color:var(--ink-2); }
.sx .st{ font:500 11.5px/1 var(--mono); text-transform:uppercase; letter-spacing:0.05em; display:inline-flex; gap:6px; align-items:center; }
.sx .st::before{ content:""; width:6px; height:6px; background:currentColor; }
.sx .st.live{ color:var(--signal); } .sx .st.use{ color:#1D6B47; } .sx .st.done{ color:var(--ink); } .sx .st.built,.sx .st.used{ color:var(--ink-2); }
.sx .pl{ position:relative; width:10px; height:10px; justify-self:end; }
.sx .pl::before,.sx .pl::after{ content:""; position:absolute; left:0; right:0; top:4.5px; height:1.5px; background:var(--ink-2); transition:transform var(--ui) var(--ease); }
.sx .pl::after{ transform:rotate(90deg); }
.sx[open] .pl::after{ transform:rotate(0deg); }
.spec{ padding:4px 0 18px; }
.sp-cap{ margin:6px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-2); max-width:58ch; }
.sp-cap b{ color:var(--ink); font-weight:600; margin-right:6px; }

/* the specimen drawing */
.spx{ width:100%; height:auto; overflow:visible; }
.spx text{ font-family:var(--mono); font-weight:500; }
.spx .br{ fill:none; stroke:var(--ink-3); stroke-width:1; }
.spx .bt{ font-size:11px; fill:var(--ink-3); text-transform:uppercase; letter-spacing:0.06em; }
.spx .ln{ fill:none; stroke:var(--ink); stroke-width:1.2; }
.spx .ah{ fill:none; stroke:var(--ink); stroke-width:1.2; }
.spx .nd rect{ fill:var(--paper-2); stroke:var(--ink); stroke-width:1.4; }
.spx .nd.first rect{ fill:var(--ink); }
.spx .nd.last rect{ fill:var(--signal); stroke:var(--signal); }
.spx .ni{ font-size:10.5px; fill:var(--ink-3); }
.spx .nl{ font-size:13px; fill:var(--ink); }
.spx .stt{ font-size:11px; fill:var(--ink-3); text-transform:uppercase; letter-spacing:0.06em; }
.spx .stt.live{ fill:var(--signal); }
/* drawing on: the path draws, the nodes arrive in order */
.draw .spx .ln{ stroke-dasharray:1; stroke-dashoffset:1; animation:sx-draw var(--ed) var(--ease) forwards; animation-delay:var(--d); }
.draw .spx .ah,.draw .spx .nd{ opacity:0; animation:sx-in var(--ui) var(--ease) forwards; animation-delay:var(--d); }
.draw .spx .br{ stroke-dasharray:1; stroke-dashoffset:1; animation:sx-draw var(--ed) var(--ease) forwards; }
@keyframes sx-draw{ to{ stroke-dashoffset:0; } }
@keyframes sx-in{ to{ opacity:1; } }

/* desktop: a sticky plate beside the index */
.atlas-plate{ position:sticky; top:calc(var(--nav-h) + 24px); background:var(--white); border:1.5px solid var(--ink); padding:clamp(16px, 1.6vw, 26px); }
.atlas-plate::before{ content:"Specimen"; display:block; margin-bottom:12px; font:500 11.5px/1 var(--mono); text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-3); }
.atlas-plate .spx .nd rect{ fill:var(--white); }
.atlas-plate .spx .nd.first rect{ fill:var(--ink); }
.atlas-plate .spx .nd.last rect{ fill:var(--signal); }
@media (min-width:1024px){
  html.js .atlas .sx .spec{ display:none; }
}
@media (max-width:1023px){
  .atlas-body{ grid-template-columns:1fr; }
  .atlas-plate{ display:none; }
  .atlas-hd{ display:none; }
  .sx summary{ grid-template-columns:3ch minmax(0, 1fr) auto 1.4ch; row-gap:5px; }
  .sx .io{ grid-column:2 / -1; grid-row:2; }
  .sx .sk{ display:none; }
  .spec{ padding:0 0 16px 0; }
}
html:not(.js) .atlas-plate{ display:none; }
html:not(.js) .atlas-body{ grid-template-columns:1fr; }

/* notes: one editorial object */

/* the ending: commerce ledger + profile, quiet, on paper */

.links{ list-style:none; margin:clamp(24px, 3vw, 40px) 0 0; padding:0; border-top:1.5px solid var(--ink); }
.links li{ display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--rule); }
.links a{ flex:1; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:15px 0; text-decoration:none; }
.links .k{ font:600 var(--t-m)/1 var(--sans); letter-spacing:-0.02em; }
.links .v{ font:500 12.5px/1.3 var(--mono); color:var(--ink-2); overflow-wrap:anywhere; text-align:right; }
.links a:hover .k{ color:var(--signal); }
.links a:hover .v{ color:var(--ink); }
.copy4{ appearance:none; cursor:pointer; background:transparent; border:1.5px solid var(--ink); padding:7px 10px; font:500 11.5px/1 var(--mono);
  text-transform:uppercase; letter-spacing:0.05em; transition:background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.copy4:hover,.copy4[data-done="1"]{ background:var(--ink); color:var(--paper); }

/* atlas: legible drawing sizes; phones get a vertical chain instead of a shrunken drawing */
.spx .nl{ font-size:15px; } .spx .ni{ font-size:12px; } .spx .bt,.spx .stt{ font-size:12px; }
.chain{ display:none; list-style:none; margin:4px 0 10px; padding:0 0 0 2px; }
.chain li{ position:relative; display:flex; gap:14px; align-items:center; padding:7px 0 7px 26px; font:500 13.5px/1.2 var(--mono); }
.chain li span{ font-size:11px; color:var(--ink-3); width:2.2ch; }
.chain li::before{ content:""; position:absolute; left:0; top:50%; width:12px; height:12px; margin-top:-6px; border:1.4px solid var(--ink); background:var(--paper-2); box-sizing:border-box; }
.chain li.first::before{ background:var(--ink); }
.chain li.last::before{ background:var(--signal); border-color:var(--signal); }
.chain li + li::after{ content:""; position:absolute; left:5.5px; top:-7px; height:14px; width:1.2px; background:var(--ink); }
.draw .chain li{ opacity:0; animation:sx-in var(--ui) var(--ease) forwards; }
.draw .chain li:nth-child(2){ animation-delay:var(--step); }
.draw .chain li:nth-child(3){ animation-delay:calc(var(--step) * 2); }
.draw .chain li:nth-child(4){ animation-delay:calc(var(--step) * 3); }
.draw .chain li:nth-child(5){ animation-delay:calc(var(--step) * 4); }
@media (max-width:1023px){ .sx .spx{ display:none; } .sx .chain{ display:block; } }
.atlas-plate .chain{ display:none !important; }

/* small cobalt text on the warm-grey atlas field is darkened for contrast; marks keep the true signal */
.sx .st.live{ color:#2140C8; }
.spx .stt.live{ fill:#2140C8; }
/* OVREL storefront capture: trim the page footer band so the frame ends on the product grid */



/* --- target size (WCAG 2.2 AA) -------------------------------------------
   The wordmark and the mobile Work link are flex items, so a min-height grows
   the hit box while they stay centred in the bar, nothing moves. */
.nav3 .mark{ display:inline-flex; align-items:center; min-height:24px; }
.navm .l{ display:inline-flex; align-items:center; min-height:24px; }
.sp-cap a{ padding-block:4px; }

/* no scripting: the poster stands in for a film that cannot play */
.film-ns{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* the poster sits under the video; the video shows once it has really started */
.film-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.has-poster video{ opacity:0; }
.has-poster.has-played video{ opacity:1; transition:opacity 240ms linear; }
@media (prefers-reduced-motion:reduce){ .has-poster.has-played video{ transition:none; } }