/* Lehagen — shared base for concept prototypes (Direction 03 system) */
:root{
  /* type scale (9 steps, ~1.25–1.5 ratio) */
  --fs-label:11px;
  --fs-small:13px;
  --fs-body:clamp(16px,1.12vw,17px);
  --fs-lead:clamp(19px,1.46vw,22px);
  --fs-h4:clamp(22px,1.85vw,28px);
  --fs-h3:clamp(26px,2.4vw,36px);
  --fs-h2:clamp(34px,3.7vw,56px);
  --fs-h1:clamp(44px,5.8vw,88px);
  --fs-display:clamp(56px,9vw,136px);

  --onyx:#0B0B0C; --carbon:#141416; --graphite:#1E1E21; --slate:#3A3A3F; --steel:#8A8A90;
  --mist:#C9C9CC; --paper:#FDFDFC; --porcelain:#F4F4F2; --ivory-ink:#F4F1EA;
  --bronze:#8C6634; --gold:#A67C45; --champagne:#C9A46A;
  --ok:#7CC6A2; --alert:#E0745A;
  --bg:var(--onyx); --surface:var(--carbon); --line:#2A2A2E; --fg:var(--ivory-ink); --fg2:var(--mist); --fg3:#9C9CA2;
  --acc:var(--champagne);
  --display:"Inter Tight",system-ui,sans-serif; --text:"Inter Tight",system-ui,sans-serif;
  --ui:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(16px,4vw,64px); --max:1440px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
.light{--bg:var(--paper); --surface:var(--porcelain); --line:#E2E2DF; --fg:var(--onyx); --fg2:#46464B; --fg3:#6B6B71; --acc:var(--bronze)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--text);font-synthesis:none;-webkit-font-smoothing:antialiased}
em,i{font-style:normal}
b,strong{font-weight:600}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.016em;line-height:.98}
.label{font:500 var(--fs-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.label.acc{color:var(--acc)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:999;background:var(--bg);padding:8px 12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}} /* transitions: see polish.css (fades kept, movement dropped) */
/* concept switcher (prototype chrome, not part of the design) */
.proto-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1000;display:flex;gap:4px;padding:4px;background:rgba(20,20,22,.92);border:1px solid #2A2A2E;border-radius:999px;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.proto-bar a{padding:9px 14px;border-radius:999px;text-decoration:none;color:#9C9CA2;white-space:nowrap}
.proto-bar a[aria-current]{background:#F4F1EA;color:#0B0B0C}
@media (max-width:480px){.proto-bar a{padding:8px 10px}.proto-bar .hide-s{display:none}}

/* ============ THE CHAIN — Lehagen's authorised chain as the thread of the site ============ */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
::view-transition-group(*){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* spine: fixed hairline in the left gutter on every screen; numbers + readouts only from 1800px, where the gutter is wide */
.chain-spine{display:none}
@media all{
  .chain-spine{display:block;position:fixed;left:max(4px,calc(var(--pad) * .5 - 6px));top:calc(var(--hdrH,72px) + 28px);bottom:28px;width:1px;z-index:45;pointer-events:none;view-transition-name:chain-spine;contain:layout style}
}
.cs-seg{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.cs-seg.l{-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
.cs-tr,.cs-ink{position:absolute;inset:0}
.cs-ink{transform-origin:50% 0;transform:scaleY(0);will-change:transform}
.cs-seg.d .cs-tr{background:#34343A}.cs-seg.d .cs-ink{background:var(--ivory-ink)}
.cs-seg.l .cs-tr{background:#D6D6D1}.cs-seg.l .cs-ink{background:var(--onyx)}
.cs-node{--ink:var(--ivory-ink);--gr:var(--onyx);--ac:var(--champagne);--dim:#5A5A60;position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.cs-node.t-l{--ink:var(--onyx);--gr:var(--paper);--ac:var(--bronze);--dim:#A9A9A4}
.cs-node i{position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;box-sizing:border-box;border:1px solid var(--dim);background:var(--gr);transition:background-color .3s,border-color .3s}
.cs-node i::after{content:"";position:absolute;inset:-5px;border:1px solid var(--ac);border-radius:50%;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.cs-node.on i{background:var(--ink);border-color:var(--ink)}
.cs-node.act i{background:var(--ac);border-color:var(--ac)}
.cs-node.act i::after{opacity:1;transform:none}
.cs-num{position:absolute;left:13px;top:-6px;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ink);opacity:0;transition:opacity .35s,color .3s}
.cs-node.on .cs-num{opacity:.6}
.cs-node.act .cs-num{opacity:1;color:var(--ac)}
.cs-node.hush .cs-num{opacity:0}
.cs-rd{position:absolute;left:13px;top:14px;writing-mode:vertical-rl;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--ac);opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .6s var(--ease)}
.cs-rd .v{color:var(--ink)}
.cs-rd .n{display:none}
/* the stage is named on every screen: beside the line from 1061px (laptops sit 2px tighter), in the header below that (the menu has collapsed) */
@media (max-width:1060px){.cs-rd{display:none}}
@media (min-width:1061px) and (max-width:1799px){.cs-rd{left:11px}}
.cs-node.up .cs-rd{top:auto;bottom:10px;transform:translateY(8px)}
.cs-node.flash .cs-rd{opacity:1;transform:none}
.cs-end{position:absolute;left:-4px;bottom:0;width:9px;height:1px;background:#6B6B71;transition:background-color .3s}
.chain-done .cs-end{background:var(--champagne)}

/* mobile: 2px progress rule under the header, ticks, readout in the header strip */
.chain-rule{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.chain-rule .tr{position:absolute;inset:0;background:var(--hair)}
.chain-rule .ink{position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.chain-rule .tk{position:absolute;bottom:0;width:1px;height:7px;margin-left:-.5px;background:var(--fg3);transition:background-color .3s,transform .3s}
.chain-rule .tk.on{background:var(--fg)}
.chain-rule .tk.act{background:var(--acc);transform:scaleX(3)}
.chain-hrd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;white-space:nowrap;color:var(--fg2);opacity:0;transition:opacity .3s;pointer-events:none}
.chain-hrd b{color:var(--acc);font-weight:500}
.chain-hrd.on{opacity:1}
/* one chain on screen, never two: the spine replaces the header rule everywhere; phones keep the stage readout in the header */
.chain-rule{display:none}
@media (min-width:1061px){.chain-hrd{display:none}}
/* phones: the margin is 16px, so the nodes shrink to 5px dots, no rings, nothing that reaches the content */
@media (max-width:767px){
  .chain-spine{top:calc(var(--hdrH,64px) + 16px);bottom:16px}
  .cs-node i{left:-2px;top:-2px;width:5px;height:5px;border-width:1px}
  .cs-node i::after{display:none}
  .cs-node.act i{left:-3px;top:-3px;width:7px;height:7px}
  .cs-end{left:-2px;width:5px}
}

/* the end of the chain is VERIFY */
.chips:has(.cv){overflow:visible}
.chips label .cv{position:absolute;right:-7px;top:-15px;z-index:2;display:flex;align-items:center;gap:4px;font:500 var(--fs-label)/1 var(--mono);font-style:normal;letter-spacing:.1em;color:var(--bronze);background:var(--paper);border:1px solid var(--bronze);outline:1px solid var(--bronze);outline-offset:2px;padding:3px 5px 2px;opacity:0;transform:rotate(-12deg) scale(1.6);transition:opacity .25s,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.chips label .cv svg{width:10px;height:10px}
.chips label.chain-v .cv{opacity:1;transform:rotate(-5deg) scale(1)}
.chips label.chain-v span{border-color:var(--bronze);box-shadow:inset 0 0 0 1px var(--bronze);color:var(--fg)}
.chips label.chain-v input:checked+span{color:var(--paper)}

/* page-to-page: the hairline that carries the chain across */
.chain-wipe,html.cw-in body::after{content:"";position:fixed;left:var(--cw-x,0px);right:0;top:var(--cw-y,72px);height:1px;background:var(--gold);z-index:70;transform-origin:0 50%;pointer-events:none}
.chain-wipe{transform:scaleX(0);transition:transform .42s cubic-bezier(.65,0,.25,1)}
.chain-wipe.go{transform:scaleX(1)}
html.cw-in body::after{transform:scaleX(1);transition:transform .46s cubic-bezier(.65,0,.25,1)}
html.cw-in.cw-go body::after{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.chain-wipe,html.cw-in body::after{display:none}.cs-rd{display:none}}

/* laptops: progress rule only, no header readout (it collides with the full nav) */
@media (min-width:1061px){.chain-hrd{display:none}}

/* footer site map (replaces the story paragraph) */
.sitemap{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:clamp(32px,4vw,72px);margin-top:28px}
.sitemap ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.sitemap a{color:var(--fg);text-decoration:none;font:500 var(--fs-body)/1.3 var(--text)}
.sitemap a:hover,.sitemap a:focus-visible{color:var(--champagne)}

/* impeccable pass: readable measure for FAQ answers */
.ans{max-width:68ch}