@charset "utf-8";
/* ==========================================================================
   lifecapital.ca — «СУКНО І ФОРМУЛЯР» / Baize & Ledger
   The only stylesheet the site loads. Written against DESIGN.md; every value
   below is a token from §4. No raw hex outside :root, no third family, no
   gradient fills, no glass, no dark theme.
   ========================================================================== */

/* ------------------------------------------------------------------ 0. fonts */
@import url("/assets/fonts/lc/fonts.css");

/* ------------------------------------------------------------------ 1. tokens */
:root{
  /* core */
  --baize:#10504A;
  --baize-deep:#0A3833;
  --form:#EFF1EC;
  --ink:#141A18;
  --brand-green:#026C3B;
  --gold:#FFD600;

  /* support */
  --ink-muted:#5A6560;
  --form-dim:#C6D2CD;
  --rule:#C2CBC4;
  --rule-strong:#6F7B74;
  --gold-ink:#6B5200;
  --turquoise:#05D5B3;

  /* semantics — meaning only */
  --verified:#026C3B;
  --pending:#6B5200;
  --flag:#B3261E;

  /* deck edge — the printed header rule of a Legend card. ONE colour: the same
     brand green as the формуляр header rule. (Was five hues; five hues on cream
     is a rainbow strip, which is both a palette break and a stock card tell.) */
  --deck-edge:#026C3B;

  /* geometry */
  --r:2px;
  --r-round:999px;
  --lift:0 1px 0 rgb(4 26 23 / .30), 0 10px 22px -8px rgb(4 26 23 / .42);
  --hairline:1px solid var(--rule);
  --header-rule:2px solid var(--brand-green);
  --pad:clamp(3.25rem, 2.1rem + 3.4vw, 6.5rem);
  --gut:clamp(1.25rem, .6rem + 2.4vw, 3rem);
  --measure:66ch;
  --ease:cubic-bezier(.32,.72,0,1);
  --land:cubic-bezier(.2,.9,.25,1);

  /* families */
  --display:"Geologica","Fira Sans",system-ui,sans-serif;
  --text:"Fira Sans",system-ui,sans-serif;
  --mono:"Fira Mono",ui-monospace,monospace;
}

/* ------------------------------------------------------------------ 2. reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

/* ------------------------------------------------------------- 3. the cloth */
/* Woven baize: two ±45° repeating gradients at alpha ≤ .022 (the weave) plus one
   very soft radial (the lamp over the table). CSS only — no image, no noise. */
body{
  background-color:var(--baize);
  background-image:
    radial-gradient(120% 62% at 50% -14%, rgb(255 255 255 / .085) 0%, rgb(255 255 255 / 0) 62%),
    repeating-linear-gradient(45deg,  rgb(255 255 255 / .022) 0 1px, rgb(0 0 0 / 0) 1px 3px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / .022)       0 1px, rgb(0 0 0 / 0) 1px 3px);
  background-attachment:fixed,scroll,scroll;
  color:var(--form);
  font-family:var(--text);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:min(1240px,100% - var(--gut)*2);margin-inline:auto}
.wrap--narrow{width:min(940px,100% - var(--gut)*2);margin-inline:auto}
section{padding-block:var(--pad)}
.band{background:var(--baize-deep)}

/* ------------------------------------------------------------------ 4. type */
.d1,.d2,.d3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.04;text-wrap:balance;hyphens:manual}
.d1{font-size:clamp(2.15rem,1.35rem + 2.7vw,3.9rem);font-weight:500;letter-spacing:-.03em;line-height:.98}
.d2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.1rem)}
.d3{font-size:clamp(1.3rem,1.05rem + .9vw,1.75rem)}
.lede{font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);line-height:1.5;max-width:56ch}
p{max-width:var(--measure)}
strong{font-weight:700}

/* the mono brow — max one per section (DESIGN §4.3) */
.brow{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--form-dim);margin:0 0 24px;display:block;
}
.brow--ink{color:var(--ink-muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}

a{color:inherit}
.lnk{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .16s var(--ease);
}
.lnk:hover,.lnk:focus-visible{background-size:100% 1px}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--baize),0 0 0 4px var(--gold)}
.paper :focus-visible{box-shadow:0 0 0 2px var(--form),0 0 0 4px var(--gold-ink)}

/* --------------------------------------------------------------- 5. topbar */
.topbar{background:var(--baize-deep);border-bottom:1px solid rgb(255 255 255 / .07)}
.topbar__in{display:flex;align-items:center;gap:24px;min-height:64px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.mark__disc{
  width:34px;height:34px;border-radius:var(--r-round);flex:0 0 34px;
  background:var(--brand-green);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--gold);letter-spacing:.02em;
}
.mark__name{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--form)}
.topbar__meta{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:12px;color:var(--form-dim)}
.topbar__meta a{text-decoration:none}
.lang{display:flex;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.lang a{text-decoration:none;color:var(--form-dim);padding:2px 4px}
.lang [aria-current]{color:var(--turquoise)}
.topbar__cta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.topbar__cta:hover{text-decoration:underline}

.live-pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--r-round);
  background:rgba(0,245,160,.12);border:1px solid rgba(0,245,160,.35);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--turquoise);
}
.live-pulse{width:6px;height:6px;border-radius:50%;background:var(--turquoise);animation:pulse 2s infinite}

/* ------------------------------------------------------------------ 6. nav & mega-menu */
.nav{border-bottom:1px solid rgb(255 255 255 / .08);background:rgb(4 26 23 / .45);position:relative;z-index:90}
.nav__in{display:flex;align-items:center;min-height:52px}
.nav-list{display:flex;align-items:center;gap:4px;width:100%;margin:0;padding:0;list-style:none}
.nav-item{position:relative}
.nav-link, .nav-btn{
  text-decoration:none;color:var(--form-dim);font-size:14px;font-weight:500;padding:14px 14px;display:inline-flex;
  align-items:center;gap:6px;border-bottom:2px solid transparent;background:none;border:none;cursor:pointer;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.nav-link:hover, .nav-btn:hover{color:var(--form)}
.nav-link[aria-current="page"], .nav-btn[aria-current="true"]{color:var(--form);border-bottom-color:var(--gold)}
.nav-chevron{transition:transform .2s var(--ease);color:var(--form-dim)}
.nav-item:hover .nav-chevron{transform:rotate(180deg);color:var(--gold)}

/* Mega Dropdown */
.mega-dropdown{
  position:absolute;top:100%;left:0;min-width:340px;max-width:440px;background:rgb(6 25 21 / .98);
  border:1px solid rgba(255,214,0,.3);border-radius:var(--r);box-shadow:0 18px 48px -12px rgba(0,0,0,.75);
  padding:16px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  z-index:100;
}
.nav-item--mega:hover .mega-dropdown,
.nav-item--mega:focus-within .mega-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
.mega-dropdown__header{
  display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px;
}
.mega-dropdown__tag{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;
}
.mega-dropdown__all{font-family:var(--mono);font-size:11px;color:var(--form-dim);text-decoration:none}
.mega-dropdown__all:hover{color:var(--form);text-decoration:underline}

.mega-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.mega-subitem{}
.mega-link{
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:var(--r);text-decoration:none;
  transition:background-color .15s var(--ease);
}
.mega-link:hover{background:rgba(255,255,255,.06)}
.mega-link[aria-current="page"]{background:rgba(255,214,0,.1);border-left:2px solid var(--gold)}
.mega-link__title{
  font-family:var(--display);font-size:14px;font-weight:600;color:var(--form);display:flex;align-items:center;gap:8px;
}
.mega-ext{font-size:12px;color:var(--turquoise)}
.mega-link__desc{font-size:12px;line-height:1.4;color:var(--form-dim)}
.badge{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:var(--r-round);
}
.badge--gold{background:rgba(255,214,0,.2);color:var(--gold);border:1px solid rgba(255,214,0,.4)}

/* Small screens header */
@media (max-width:860px){
  .topbar__in{gap:14px;min-height:56px;flex-wrap:nowrap}
  .topbar__meta{display:none}
  .topbar__cta{white-space:nowrap}
  .nav__in{
    overflow-x:auto;min-height:46px;scrollbar-width:none;-ms-overflow-style:none;
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
  }
  .nav__in::-webkit-scrollbar{display:none}
  .nav-list{flex-wrap:nowrap;width:max-content}
  .nav-link, .nav-btn{white-space:nowrap;padding:12px 10px}
  .mega-dropdown{display:none} /* on narrow touch, clicking parent opens main route */
}
@media (max-width:620px){
  .mark__name{font-size:15px;white-space:nowrap}
  .topbar__cta{display:none}
  .topbar__in{gap:12px}
}

/* --------------------------------------------------------------- 7. buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:var(--r);
  font-family:var(--text);font-weight:500;font-size:16px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .16s var(--ease),background-color .16s var(--ease),color .16s var(--ease);
}
.btn--gold{background:var(--gold);color:var(--ink);font-weight:700}
.btn--gold:hover{transform:translateY(-2px)}
.btn--outline{border-color:var(--form);color:var(--form);background:none}
.btn--outline:hover{background:rgb(239 241 236 / .1);transform:translateY(-2px)}
.btn--ink{background:var(--brand-green);color:var(--form);font-weight:500}
.btn--ink:hover{transform:translateY(-2px)}
.btn--quiet{border-color:var(--rule-strong);color:var(--ink);background:none}
.btn--quiet:hover{background:rgb(20 26 24 / .05)}
/* A wrapped button row must look wrapped on purpose: when the Ukrainian label
   is too long to sit beside the primary, both buttons take the full row and
   line up on both edges instead of staggering at two different widths. */
.btns{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:32px}
.btns > .btn{justify-content:center;text-align:center}
@media (max-width:560px){.btns{display:grid;grid-template-columns:1fr}}

/* ------------------------------------------------------- 8. hero: СТІЛ */
.stol{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) clamp(3rem,2rem + 4vw,6rem);position:relative}
.stol__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.stol__mat{padding:12px;background:var(--form);border-radius:var(--r);box-shadow:var(--lift)}
/* Portrait photographs must not run the hero to 1200px tall and push the
   subject out of frame: cap the mat and crop toward the top, where faces are. */
.stol__mat img{border-radius:0;width:100%;max-height:min(70vh,600px);object-fit:cover;object-position:50% 70%}
.stol__cap{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--form-dim);margin-top:14px;max-width:none}
@media (max-width:900px){.stol__grid{grid-template-columns:1fr;gap:2.5rem}}

/* The pawn gutter — the one signature effect, on the home page only.
   It used to be absolutely positioned inside the hero, which meant three of its
   four steps fired after the lane had scrolled off screen: the signature was
   there in the code and invisible in the pixels. The lane is now pinned to the
   left margin of the viewport (only drawn at ≥1340px, where that margin is
   ~100px of empty cloth) so the move can actually be watched. It is still one
   element, one gesture, four discrete positions — nothing else moves. */
.pawnlane{
  position:fixed;left:calc((100vw - min(1240px,100vw - var(--gut)*2))/2 - 26px);
  top:26vh;height:46vh;width:2px;background:rgb(239 241 236 / .16);z-index:1;pointer-events:none;
}
.pawn{
  position:absolute;left:-4px;top:0;width:10px;height:10px;border-radius:var(--r-round);
  background:var(--gold);box-shadow:0 0 0 3px rgb(16 80 74 / .55);
}
@media (max-width:1340px){.pawnlane{display:none}}

/* ----------------------------------------------- 9. spec strip (back of box) */
.spec{
  display:inline-flex;flex-wrap:wrap;margin-top:34px;border:1px solid var(--rule-strong);border-radius:var(--r);
}
.spec > span{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--form);
  padding:13px 20px;border-right:1px solid var(--rule-strong);
}
.spec > span:last-child{border-right:0}
.spec--ink > span{color:var(--ink)}
@media (max-width:560px){.spec{display:block}.spec > span{display:block;border-right:0;border-bottom:1px solid var(--rule-strong)}.spec > span:last-child{border-bottom:0}}

/* ------------------------------------------------------- 10. legend cards */
.deal{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch}
@media (max-width:1100px){.deal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.deal{grid-template-columns:1fr}}
.legend{
  background:rgb(4 26 23 / .8);color:var(--form);border:1px solid rgba(255,214,0,.25);border-radius:var(--r);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.6);
  padding:24px 22px;display:flex;flex-direction:column;gap:14px;position:relative;
  text-decoration:none;transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.legend::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--deck-edge);border-radius:var(--r) var(--r) 0 0}
.legend__role{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.25;color:var(--form)}
.legend__hook{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--form-dim);flex:1}
.legend__cta{font-size:14px;font-weight:600;color:var(--gold);margin-top:auto}
.legend__cta::after{content:" →"}
.legend:hover,.legend:focus-visible{
  border-color:var(--gold);box-shadow:0 16px 40px -10px rgba(255,214,0,.25);transform:translateY(-4px);
}

/* ------------------------------------- 11. THE SIGNATURE: form sheet & paper */
.paper{
  background:rgb(4 26 23 / .82);color:var(--form);border:1px solid rgba(255,214,0,.22);
  border-radius:var(--r);box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  padding:clamp(1.5rem,1rem + 2vw,3rem);position:relative;
}
.paper--sheet{padding-left:clamp(1.8rem,1.2rem + 2vw,3.2rem)}
.sheet{max-width:900px;margin-right:auto}
.sheet--wide{max-width:none}
.sheet__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px;margin-bottom:8px;
}
.sheet__no{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.sheet__as{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--turquoise)}

.row{
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(240px,1.9fr) minmax(130px,1fr);
  gap:16px 28px;align-items:center;min-height:56px;padding:10px 0 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);position:relative;
}
.row:last-child{border-bottom:0}
.row::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:rgba(255,214,0,.3);
  transition:transform .16s var(--ease),background-color .16s var(--ease);
}
.row:hover::before{transform:translateX(6px);background:var(--gold)}
.row__k{font-weight:500;font-size:15.5px;line-height:1.35;color:var(--form)}
.row__v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;line-height:1.5;text-align:left;color:var(--form)}
.row__s{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--form-dim);
  opacity:.85;transition:opacity .16s var(--ease);
}
.row:hover .row__s{opacity:1}
.row__s a{color:var(--turquoise);text-decoration:none}
.row__s a:hover{text-decoration:underline}
.row--verified .row__s::before{content:"✓ ";color:var(--turquoise)}
@media (max-width:900px){
  .row{grid-template-columns:1fr;gap:4px;padding-block:14px}
}

/* the honest empty cell: hatched, never an em dash */
.hatch{
  display:block;min-height:26px;border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.08) 0 1px,
    transparent 1px 5px);
}
.row--pending .row__s{color:var(--form-dim);opacity:1}

.sheet__foot{font-size:13.5px;color:var(--form-dim);margin-top:22px;max-width:70ch;line-height:1.6}

/* --------------------------------------------------------------- 12. matrix */
.matrix{width:100%;border-collapse:collapse;font-size:14.5px}
.matrix th{
  text-align:left;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);padding:12px 14px 12px 0;border-bottom:1px solid rgba(255,214,0,.3);
  vertical-align:bottom;
}
.matrix td{padding:14px 14px 14px 0;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top;line-height:1.5;color:var(--form)}
.matrix tr:last-child td{border-bottom:0}
.matrix td:first-child{font-weight:500}
.matrix td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--turquoise)}
.matrix tbody tr{transition:background-color .16s var(--ease)}
.matrix tbody tr:hover{background:rgba(255,255,255,.03)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scrollx table{min-width:640px}

/* ------------------------------------------------------- 13. proof band */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.proof{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proof{grid-template-columns:1fr}}
.proof figure{margin:0}
.proof img{border-radius:var(--r);aspect-ratio:3/2;object-fit:cover;transition:transform .16s var(--ease)}
.proof__mask{overflow:hidden;border-radius:var(--r)}
.proof figure:hover img{transform:scale(1.03)}
.proof figcaption{
  font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--form-dim);margin-top:12px;letter-spacing:.01em;
}
.proof figcaption a{color:var(--turquoise);text-decoration:none}
.proof figcaption a:hover{text-decoration:underline}

/* institutional rows — logo · name · role · domain. Never a bare logo strip. */
.patron{margin-top:72px;border-top:1px solid rgb(239 241 236 / .16)}
.patron-row{
  display:grid;grid-template-columns:120px minmax(180px,1fr) minmax(180px,1.4fr) auto;
  gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid rgb(239 241 236 / .12);
}
.patron-row__logo{background:var(--form);border-radius:var(--r);padding:10px 14px;display:grid;place-items:center;min-height:56px;box-shadow:var(--lift)}
.patron-row__logo img{max-height:34px;width:auto;object-fit:contain}
.patron-row__name{font-family:var(--display);font-weight:600;font-size:15px}
.patron-row__role{font-family:var(--mono);font-size:11.5px;color:var(--form-dim)}
.patron-row__dom{font-family:var(--mono);font-size:11.5px;color:var(--turquoise);text-decoration:none;white-space:nowrap}
.patron-row__dom:hover{text-decoration:underline}
.hatch--dark{
  border-color:rgb(255 214 0 / .35);
  background-image:repeating-linear-gradient(45deg,rgb(255 214 0 / .22) 0 1px,transparent 1px 5px);
}
@media (max-width:820px){
  .patron-row{grid-template-columns:80px 1fr;gap:12px 16px}
  .patron-row__role,.patron-row__dom{grid-column:2}
}

/* ------------------------------------------------------- 14. origin lines */
.origin{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
@media (max-width:900px){.origin{grid-template-columns:1fr}}
.oline{
  display:grid;grid-template-columns:76px 1fr;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgb(239 241 236 / .14);
}
.oline:last-child{border-bottom:0}
.oline__y{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;color:var(--gold)}
.oline__t{font-size:15.5px;line-height:1.5;color:var(--form)}
.oline__t b{font-weight:500}

/* ----------------------------------------------------- 15. closing index */
.hid{position:relative}
.hid__row{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid rgb(239 241 236 / .16);text-decoration:none;
  transition:transform .16s var(--ease);
}
.hid__row:first-child{border-top:1px solid rgb(239 241 236 / .16)}
.hid__row:hover{transform:translateX(8px)}
.hid__act{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1rem + .7vw,1.6rem);letter-spacing:-.01em}
.hid__meta{font-family:var(--mono);font-size:11.5px;color:var(--form-dim);letter-spacing:.03em}
.hid__wheel{
  position:absolute;right:-4%;bottom:-46%;width:min(460px,52vw);aspect-ratio:1;border-radius:var(--r-round);
  border:2px solid rgb(239 241 236 / .07);pointer-events:none;
}
.hid__wheel::after{content:"";position:absolute;inset:14%;border-radius:var(--r-round);border:1px solid rgb(239 241 236 / .06)}

/* --------------------------------------------------------------- 16. prose */
.prose{color:var(--ink)}
.prose > * + *{margin-top:20px}
.prose h2{font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,1.2rem + 1vw,2.1rem);letter-spacing:-.02em;line-height:1.12;margin-top:56px;text-wrap:balance}
.prose h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);letter-spacing:-.01em;margin-top:40px}
.prose h4{font-family:var(--text);font-weight:700;font-size:17px;margin-top:32px}
.prose p{line-height:1.65}
.prose ul{margin-left:0}
.prose li{padding-left:22px;position:relative;margin-top:10px;line-height:1.6;max-width:var(--measure)}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--rule-strong)}
.prose ol{counter-reset:o}
.prose ol li{counter-increment:o}
.prose ol li::before{content:counter(o,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--ink-muted);top:.28em;width:auto;height:auto;background:none}
.prose a{color:var(--brand-green);text-decoration:underline;text-underline-offset:2px}
.prose img{border-radius:var(--r);margin-top:28px}
.prose figure{margin:28px 0 0}
.prose figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-muted);margin-top:10px}
.prose blockquote{border-left:2px solid var(--brand-green);padding-left:20px;font-size:18px;line-height:1.55}
.prose table{font-size:14.5px;margin-top:24px}
.prose th{text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);padding:0 14px 10px 0;border-bottom:var(--header-rule)}
.prose td{padding:12px 14px 12px 0;border-bottom:var(--hairline);vertical-align:top}
.pull{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);line-height:1.25;letter-spacing:-.02em;color:var(--ink);border-top:var(--header-rule);border-bottom:var(--header-rule);padding:24px 0;margin-top:48px;text-wrap:balance}

/* light prose on the cloth */
.oncloth{color:var(--form)}
.oncloth a{color:var(--turquoise)}
/* --ink-muted is a colour for cream paper. On the cloth it measured 2.13:1 and
   the caption under the pilot steps was effectively unreadable — the dim tone
   here has to be the light one. */
.oncloth .muted-ink,.oncloth figcaption,.oncloth li::before{color:var(--form-dim)}
.oncloth li::before{background:var(--form-dim)}

/* ------------------------------------------------------------------ 17. faq */
.faq{border-top:var(--hairline)}
.faq__q{font-weight:700;font-size:16.5px;line-height:1.4;padding-top:22px}
.faq__a{font-size:15.5px;line-height:1.65;color:var(--ink-muted);padding:8px 0 22px;border-bottom:var(--hairline);max-width:72ch}

/* --------------------------------------------------------------- 18. forms */
.lcform{display:grid;gap:18px;max-width:640px}
.lcform label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:7px}
.lcform input,.lcform select,.lcform textarea{
  width:100%;padding:13px 14px;background:#fff;color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:var(--r);font-size:16px;font-family:var(--text);
}
.lcform textarea{min-height:130px;resize:vertical}
.lcform .req{color:var(--flag)}
.lcform .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.lcform .two{grid-template-columns:1fr}}
.lead-thanks{font-weight:700;margin-top:14px}

/* ---------------------------------------------------------------- 19. cards */
.papers{display:grid;gap:24px}
.papers--2{grid-template-columns:repeat(2,1fr)}
.papers--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.papers--2,.papers--3{grid-template-columns:1fr}}
.evcard{
  background:rgb(4 26 23 / .82);color:var(--form);border:1px solid rgba(255,214,0,.22);
  border-radius:var(--r);box-shadow:0 12px 32px -8px rgba(0,0,0,.6);padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);
}
.evcard__when{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.evcard h3{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);letter-spacing:-.015em;line-height:1.2;color:var(--form)}
.evcard p{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--form-dim)}
.evcard__links{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.evcard__links a{color:var(--turquoise);text-decoration:none}
.evcard__links a:hover{text-decoration:underline}

/* --------------------------------------------------------------- 20. footer */
.foot{background:var(--baize-deep);padding-block:72px 88px;margin-top:0}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr;gap:32px}}
.foot h4{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot li{margin-bottom:9px}
.foot a{color:var(--form);text-decoration:none;font-size:14.5px}
.foot a:hover{text-decoration:underline}
.foot address{font-style:normal;font-size:14.5px;line-height:1.7;color:var(--form-dim)}
.foot__meta{
  margin-top:56px;padding-top:22px;border-top:1px solid rgb(239 241 236 / .14);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--form-dim);
  display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;
}

/* -------------------------------------------------------- 21. bug widget */
.lc-bug{position:fixed;right:18px;bottom:18px;z-index:60;font-family:var(--text)}
.lc-bug__fab{
  background:var(--baize-deep);color:var(--form);border:1px solid var(--rule-strong);border-radius:var(--r);
  padding:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:var(--lift);
}
.lc-bug__fab:hover{background:var(--baize)}
@media (max-width:820px){
  .lc-bug{right:10px;bottom:10px}
  .lc-bug__fab{padding:8px 10px;font-size:10px;letter-spacing:.04em;opacity:.82}
  .lc-bug__fab:hover,.lc-bug__fab:focus-visible{opacity:1}
}
.lc-bug__panel{
  position:absolute;right:0;bottom:52px;width:min(340px,86vw);background:rgb(4 26 23 / .95);color:var(--form);
  border:1px solid rgba(255,214,0,.3);border-radius:var(--r);box-shadow:var(--lift);padding:20px;
}
.lc-bug__panel h4{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:8px;color:var(--gold)}
.lc-bug__panel p{font-size:13.5px;line-height:1.5;color:var(--form-dim)}
.lc-bug__panel form{display:grid;gap:10px;margin-top:14px}
.lc-bug__panel textarea,.lc-bug__panel input{
  width:100%;padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:var(--r);font-size:14px;background:rgb(2 16 14 / .9);color:var(--form)
}
.lc-bug__panel button[type=submit]{
  background:var(--gold);color:var(--ink);border:0;border-radius:var(--r);padding:11px;cursor:pointer;font-weight:700
}
.lc-bug__x{position:absolute;top:6px;right:8px;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--form-dim)}
.lc-bug__ok{color:var(--turquoise);font-weight:700;margin-top:10px}
.lc-bug__fail{color:var(--flag);font-weight:700;margin-top:10px}

/* --------------------------------------------------------------- 22. 404 */
.e404{min-height:70svh;display:grid;place-items:center;text-align:left}

/* ------------------------------------------------------------- 23. motion */
/* Content is always fully visible by default. Progressive enhancements only decorate. */
.js .lands{opacity:1}
.js .legend.lands{opacity:1}
.js .sheet--anim .row > *{opacity:1}
.js .sheet--anim.is-in .row::after{animation:rule 260ms linear forwards;animation-delay:calc(var(--i) * 45ms)}
.js .sheet--anim.is-in .row > *{animation:written 140ms linear forwards;animation-delay:calc(var(--i) * 45ms + 200ms)}
@keyframes rule{to{transform:scaleX(1)}}
@keyframes written{to{opacity:1}}

/* the pawn: four discrete steps, no interpolation, no scroll-scrub */
.js .pawn{top:0;transition:none}
.js .pawn[data-step="0"]{top:0}
.js .pawn[data-step="1"]{top:33.333%}
.js .pawn[data-step="2"]{top:66.666%}
.js .pawn[data-step="3"]{top:calc(100% - 10px)}

@media (prefers-reduced-motion:reduce){
  .js .lands,.js .legend.lands,.js .sheet--anim .row > *{opacity:1!important;transform:none!important;animation:none!important}
  .js .sheet--anim .row::after{transform:scaleX(1)!important;animation:none!important}
  .js .deal.is-in .legend{animation:none!important;opacity:1!important}
  .js .legend:nth-child(1){transform:rotate(-1.5deg)}
  .js .legend:nth-child(2){transform:rotate(.8deg)}
  .js .legend:nth-child(3){transform:rotate(-.6deg)}
  .js .legend:nth-child(4){transform:rotate(1.5deg)}
  .js .legend:nth-child(5){transform:rotate(-1deg)}
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------------- 24. print */
/* The sheet prints one-to-one — @media print only takes the cloth away. */
@media print{
  body{background:#fff!important;color:#000}
  .topbar,.nav,.lc-bug,.btns,.hid__wheel,.pawnlane{display:none!important}
  .paper,.legend,.evcard{box-shadow:none;border:1px solid #999}
  .band,.foot{background:#fff!important;color:#000}
  .oncloth,.oline__t,.foot a,.foot address{color:#000!important}
  section{padding-block:24px}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px}
}

/* ------------------------------------------------------------- 25. utility */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:var(--r)}
.stack-24 > * + *{margin-top:24px}
.stack-48 > * + *{margin-top:48px}
.stack-72 > * + *{margin-top:72px}
.mt-72{margin-top:72px}
.mt-48{margin-top:48px}
.mt-32{margin-top:32px}
.muted{color:var(--form-dim)}
.muted-ink{color:var(--ink-muted)}
.small{font-size:14px;line-height:1.6}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}

/* ------------------------------------------------------------- 26. sim & tactical components */
.brow--mint{color:var(--turquoise)}
.brow--gold{color:var(--gold)}
.text-gold{color:var(--gold)}

/* Sim Deck */
.sim-header{max-width:58ch}
.sim-deck{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:28px;align-items:stretch;
}
@media (max-width:960px){
  .sim-deck{grid-template-columns:1fr;gap:24px}
}

.sim-cards{display:flex;flex-direction:column;gap:14px}
.sim-card{
  background:rgb(4 26 23 / .65);border:1px solid rgb(255 255 255 / .1);border-radius:var(--r);
  padding:20px 22px;cursor:pointer;position:relative;transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.sim-card:hover{
  border-color:rgba(255,214,0,.45);background:rgb(4 26 23 / .85);transform:translateX(4px);
}
.sim-card.is-active{
  border-color:var(--gold);background:rgb(14 51 43 / .9);
  box-shadow:0 0 0 1px var(--gold), 0 4px 20px -4px rgba(255,214,0,.3);
}
.sim-card.is-active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);
  border-radius:var(--r) 0 0 var(--r);
}

.sim-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sim-card__tag{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;
}
.sim-card__risk{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;padding:3px 8px;border-radius:var(--r-round);
}
.sim-card__risk--low{background:rgba(2,108,59,.35);color:var(--turquoise);border:1px solid rgba(5,213,179,.4)}
.sim-card__risk--mid{background:rgba(255,214,0,.15);color:var(--gold);border:1px solid rgba(255,214,0,.4)}
.sim-card__risk--high{background:rgba(179,38,30,.3);color:#FF7B72;border:1px solid rgba(255,123,114,.4)}

.sim-card__title{font-family:var(--display);font-size:17px;font-weight:600;color:var(--form);margin-bottom:6px}
.sim-card__desc{font-size:13.5px;line-height:1.45;color:var(--form-dim);margin-bottom:14px}
.sim-card__metrics{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
}
.sim-card__label{display:block;font-family:var(--mono);font-size:11px;color:var(--form-dim);text-transform:uppercase}
.sim-card__val{display:block;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--form);margin-top:2px}
.sim-card__val--green{color:var(--turquoise)}

/* Telemetry Screen */
.sim-telemetry{
  background:rgb(2 16 14 / .95);border:1px solid rgba(255,214,0,.35);border-radius:var(--r);
  padding:24px 26px;display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px -8px rgba(0,0,0,.6);
  position:relative;
}
.sim-telemetry__head{
  display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px;
}
.sim-telemetry__badge{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--turquoise);
  display:inline-flex;align-items:center;gap:8px;
}
.sim-pulse{
  width:8px;height:8px;border-radius:var(--r-round);background:var(--turquoise);
  box-shadow:0 0 10px var(--turquoise);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.85)}
}
.sim-telemetry__id{font-family:var(--mono);font-size:11px;color:var(--form-dim);letter-spacing:.06em}

.sim-telemetry__stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.sim-stat{border-left:2px solid rgba(255,214,0,.45);padding-left:12px}
.sim-stat__k{display:block;font-family:var(--mono);font-size:11px;color:var(--form-dim);text-transform:uppercase;margin-bottom:4px}
.sim-stat__v{display:block;font-family:var(--mono);font-size:18px;font-weight:700;color:var(--form)}
.sim-stat__v--green{color:var(--turquoise)}

.sim-telemetry__verdict{
  margin-top:24px;padding:16px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);
}
.sim-verdict__label{
  display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--gold);margin-bottom:6px;
}
.sim-verdict__text{font-size:14px;line-height:1.55;color:var(--form);max-width:none}

/* Bridge Section */
.bridge-section{padding-block:clamp(3rem,2rem + 4vw,6rem)}
.bridge-card{
  background:radial-gradient(100% 120% at 50% 0%, rgb(14 51 43 / .95) 0%, rgb(4 26 23 / .98) 100%);
  border:1px solid rgba(255,214,0,.4);border-radius:var(--r);padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) clamp(2rem,1.2rem + 3vw,4rem);
  position:relative;overflow:hidden;box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
}
.bridge-card__glow{
  position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:70%;height:100%;
  background:radial-gradient(ellipse at center, rgba(255,214,0,.15) 0%, rgba(5,213,179,.08) 40%, transparent 70%);
  pointer-events:none;
}
.bridge-card__tags{display:flex;flex-wrap:wrap;gap:8px}
.tag-pill{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:5px 12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-round);
  color:var(--form);
}
.btn--glow{
  box-shadow:0 0 20px rgba(255,214,0,.35);
}
.btn--glow:hover{
  box-shadow:0 0 28px rgba(255,214,0,.55);
}

/* 3D Dice Canvas */
.stol__mat{position:relative}
.dice-canvas{
  position:absolute;top:-45px;right:-35px;width:180px;height:180px;
  pointer-events:none;z-index:10;filter:drop-shadow(0 12px 24px rgba(0,0,0,.65));
}
@media(max-width:768px){
  .dice-canvas{width:130px;height:130px;top:-25px;right:-15px}
}

/* Tabs Section */
.tabs-section{padding-block:clamp(3.5rem,2rem + 4vw,6.5rem)}
.tab-nav{
  display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px;
}
.tab-btn{
  font-family:var(--display);font-size:14px;font-weight:600;color:var(--form-dim);background:none;border:none;
  padding:10px 18px;border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  border:1px solid transparent;transition:color .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease);
}
.tab-btn:hover{color:var(--form);background:rgba(255,255,255,.05)}
.tab-btn.is-active{
  color:var(--ink);background:var(--gold);border-color:var(--gold);font-weight:700;
  box-shadow:0 0 16px rgba(255,214,0,.3);
}
.tab-panels{}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:land 200ms var(--land) forwards}
.tab-panel__grid{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:36px;align-items:center;
  background:rgb(4 26 23 / .65);border:1px solid rgba(255,214,0,.25);border-radius:var(--r);
  padding:clamp(2rem,1.2rem + 2.5vw,3.5rem);box-shadow:0 12px 32px -8px rgba(0,0,0,.6);
}
@media(max-width:900px){.tab-panel__grid{grid-template-columns:1fr;gap:24px}}
.tab-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.tab-bullets li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--form)}
.bullet-dot{width:6px;height:6px;border-radius:50%;background:var(--turquoise);flex:0 0 6px;margin-top:8px}

/* Gallery Section */
.gallery-section{padding-block:clamp(3.5rem,2rem + 4vw,6.5rem)}
.photo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.photo-grid{grid-template-columns:1fr}}
.photo-card{
  background:rgb(4 26 23 / .8);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
  overflow:hidden;position:relative;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.photo-card:hover{
  transform:translateY(-4px);border-color:rgba(255,214,0,.4);box-shadow:0 12px 32px -8px rgba(0,0,0,.7);
}
.photo-card__img img{width:100%;height:240px;object-fit:cover}
.photo-card__overlay{padding:16px 18px}
.photo-card__tag{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:6px;
}
.photo-card__title{font-family:var(--display);font-size:16px;font-weight:600;color:var(--form);margin-bottom:6px}
.photo-card__caption{font-size:13px;line-height:1.45;color:var(--form-dim)}