/* Wraith site: the "field manual" language shared by the landing page and the docs. A blueprint grid,
   crop-marked sheets, sheet headers with index numbers, ruled spec tables and engineering title blocks.
   Square corners and hairline rules throughout; Monero orange marks the index numbers and anything live.
   Colour tokens live in each page's :root. */
:root{
  --line:rgba(220,227,240,.30);
  --line-2:rgba(220,227,240,.14);
  --grid-major:rgba(220,227,240,.055);
  --grid-minor:rgba(220,227,240,.022);
  --glow:rgba(255,102,0,.07);
  --gutter:clamp(16px,3vw,32px);
}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;color:var(--ink);font-family:var(--font-display);font-size:16px;line-height:1.55;padding-inline:var(--gutter);padding-block:0 40px;overflow-x:hidden;
  background-color:var(--ground);
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0,var(--glow),transparent 70%),
    linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:100% 900px,160px 160px,160px 160px,32px 32px,32px 32px;
  background-repeat:no-repeat,repeat,repeat,repeat,repeat;
  background-position:0 0,-1px -1px,-1px -1px,-1px -1px,-1px -1px}
.wrap{max-width:1180px;margin-inline:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-mono)}

/* ---------- header: a sheet header that sticks ---------- */
.mhead{position:sticky;top:0;z-index:20;display:flex;align-items:stretch;height:58px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  background:color-mix(in srgb,var(--ground) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mhead-in{display:flex;align-items:stretch;gap:0;width:100%;max-width:1180px;margin-inline:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);padding-right:18px;flex:none}
.brand .wraith{width:24px;height:24px;display:block;color:var(--accent)}
.brand .word{height:15px;width:auto;display:block}
.brand .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-left:1px solid var(--line);padding-left:12px}
.mhead .rule{flex:1;align-self:center;height:1px;background:var(--line-2);min-width:16px}
.mlinks{display:flex;align-items:stretch}
.mlinks a{display:flex;align-items:center;gap:7px;padding:0 14px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mute);border-left:1px solid var(--line-2);white-space:nowrap;transition:color .15s,background .15s}
.mlinks a b{color:var(--accent);font-weight:700}
.mlinks a:hover{color:var(--ink);background:rgba(220,227,240,.04)}
.mlinks a.x-link{padding:0 14px}
.x-link svg{width:14px;height:14px;display:block}
.mlinks a.cta{background:var(--accent);color:var(--on-accent);font-weight:700;border-left:0;padding:0 18px;margin-block:9px;margin-left:10px}
.mlinks a.cta:hover{background:var(--ink);color:var(--ground)}
.word rect{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
@media (max-width:1060px){.mlinks a{padding:0 10px;letter-spacing:.08em}}
@media (max-width:920px){.mlinks a[href^="#"]{display:none}}
@media (max-width:600px){
  .mhead{height:52px}
  .mlinks a:not(.cta):not(.x-link){display:none}
  .brand{padding-right:10px;gap:9px}.brand .word{height:12px}
  .mlinks a.x-link{padding:0 12px}
  .mlinks a.cta{padding:0 12px;letter-spacing:.06em;margin-left:0}
}
@media (max-width:370px){.brand .word{display:none}}

/* ---------- sheets ---------- */
.sheet{position:relative;border:1px solid var(--line);margin-block:46px;padding:clamp(16px,3vw,34px)}
/* orange crop marks just outside each corner */
.crop{position:relative}
.sheet::before,.crop::before{content:"";position:absolute;inset:-9px;pointer-events:none;z-index:1;background:
  linear-gradient(var(--accent) 0 0) left top/22px 3px,linear-gradient(var(--accent) 0 0) left top/3px 22px,
  linear-gradient(var(--accent) 0 0) right top/22px 3px,linear-gradient(var(--accent) 0 0) right top/3px 22px,
  linear-gradient(var(--accent) 0 0) left bottom/22px 3px,linear-gradient(var(--accent) 0 0) left bottom/3px 22px,
  linear-gradient(var(--accent) 0 0) right bottom/22px 3px,linear-gradient(var(--accent) 0 0) right bottom/3px 22px;background-repeat:no-repeat}
.crop.sm::before{inset:-6px;background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px}

/* sheet header row: index, topic, a hairline, sheet count */
.sh{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 clamp(22px,3.4vw,40px);min-width:0}
.sh i{flex:1;height:1px;background:var(--line-2);min-width:12px}
.sh b{color:var(--accent);font-weight:700}
.sh svg{width:18px;height:18px;display:block;color:var(--accent);flex:none}
.sh .t{color:var(--ink)}
@media (max-width:600px){.sh{gap:10px;font-size:.62rem;letter-spacing:.1em}.sh .opt{display:none}}

/* text band: big orange index, kicker + headline, body column */
.band{display:grid;grid-template-columns:clamp(64px,8vw,112px) minmax(0,1.15fr) minmax(0,1fr);gap:clamp(14px,2.4vw,32px);align-items:start}
.band .ix{font:700 clamp(2.4rem,5vw,4.3rem)/.86 var(--font-mono);color:var(--accent);letter-spacing:-.04em}
.kick{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.band h2,.sheet h2{font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.02;letter-spacing:-.035em;margin:0;font-weight:700;text-wrap:balance}
.band .body{margin:0;color:var(--mute);font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.6;max-width:52ch;padding-top:6px}
.band .body b{color:var(--ink);font-weight:600}
.band.ruled{border-top:1px solid var(--line-2);padding-top:clamp(20px,3vw,34px)}
@media (max-width:860px){
  .band{grid-template-columns:auto minmax(0,1fr)}
  .band > :nth-child(n+3){grid-column:1/-1}
}

/* tags: small ruled boxes */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;color:var(--ink)}

/* buttons: square, mono */
.bt{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;font:700 .74rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:13px 16px;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.bt:hover{background:var(--ink);color:var(--ground)}
.bt.or{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bt.or:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.bt .ar{font-weight:400}

/* title block: a ruled grid of labelled cells (1px gaps over a rule-coloured backing) */
.tb{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.tb > *{background:var(--ground);padding:12px 14px;min-width:0}
.tb .lb{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-ink);margin-bottom:6px}
.tb .lb b{color:var(--accent);font-weight:700}
.tb .v{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tb a{text-decoration:none;display:block;transition:background .15s,color .15s}
.tb a:hover{background:var(--paper)}
.tb a.go{background:var(--accent);color:var(--on-accent)}
.tb a.go .lb{color:color-mix(in srgb,var(--on-accent) 70%,transparent)}
.tb a.go:hover{background:var(--ink)}
.tb .big-a{font:700 1.02rem var(--font-display);letter-spacing:-.01em;display:flex;justify-content:space-between;gap:10px}

/* figures: crop-marked frame, FIG. number caption */
.figure{margin:0;border:1px solid var(--line);background:color-mix(in srgb,var(--ground) 70%,transparent)}
.figure figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;border-top:1px solid var(--line);padding:11px 14px;font-family:var(--font-mono);font-size:.72rem;line-height:1.55;color:var(--mute)}
.figure figcaption .fn{color:var(--accent);font-weight:700;letter-spacing:.14em;white-space:nowrap}
.figure figcaption b{color:var(--ink)}
@media (max-width:600px){.figure figcaption{grid-template-columns:minmax(0,1fr);gap:4px}}

/* footer: an engineering title block */
.foot{margin-top:46px;grid-template-columns:minmax(0,2.1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
.foot > *{padding:16px 18px}
.foot .motto{font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:12px 0 0;text-wrap:balance}
.foot .word{height:16px;width:auto;display:block}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot nav a{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline}
.foot nav a:hover{color:var(--accent);background:none}
.foot .n{font:700 1.9rem/1 var(--font-mono);color:var(--accent);letter-spacing:-.03em}
.foot .n span{color:var(--mute-ink);font-size:.9rem}
@media (max-width:860px){.foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot > :first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){.word rect,.bt,.mlinks a,.tb a{transition:none}}