/* Axis design lab — shared site chrome.
   Type formatting comes from Monolith (04). The contents rail comes from
   Ledger (05). Section order matches the live axis-site so this can drop in.
   Each page overrides only the palette variables. */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
  /* palette defaults, overridden per page */
  --bg:#050f0d; --ink:#dbe7e2; --ink-2:rgba(219,231,226,.55); --ink-3:rgba(219,231,226,.28);
  --line:rgba(219,231,226,.11); --panel:rgba(219,231,226,.03);
  --teal:#2f7d6c; --brass:#cfa96a;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif; font-weight:300;
  overflow-x:hidden;
}

/* ---------- background canvas ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(18px,3.4vw,48px);
  transition:background .6s var(--ease),border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
header.stuck{background:var(--headerbg,rgba(5,15,13,.82));backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand svg{width:34px;height:34px;display:block;flex:0 0 auto}
.wm{font-size:12px;letter-spacing:.28em;font-weight:400}
.wm i{font-style:normal;color:var(--brass)}
header nav{display:flex;gap:clamp(14px,2vw,30px);
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
header nav a{color:var(--ink-3);text-decoration:none;transition:color .5s var(--ease)}
header nav a:hover,header nav a.active{color:var(--brass)}

/* ---------- contents rail (from 05) ---------- */
.rail{position:fixed;left:clamp(16px,2.6vw,40px);top:50%;translate:0 -50%;z-index:20;
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.rail .track{position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.rail .fill{position:absolute;left:5px;top:8px;width:1px;background:var(--brass);height:0}
.rail ol{list-style:none;display:flex;flex-direction:column;gap:22px;position:relative}
.rail a{display:flex;align-items:center;gap:14px;color:var(--ink-3);text-decoration:none;
  transition:color .7s var(--ease)}
.rail a s{width:11px;height:11px;border:1px solid currentColor;border-radius:50%;flex:0 0 auto;
  background:var(--bg);text-decoration:none;transition:all .7s var(--ease)}
.rail a em{font-style:normal;transition:letter-spacing .7s var(--ease)}
.rail a.on{color:var(--brass)}
.rail a.on s{background:var(--brass);border-color:var(--brass);box-shadow:0 0 0 4px var(--brassglow,rgba(207,169,106,.14))}
.rail a.on em{letter-spacing:.3em}

/* ---------- sections ---------- */
main{position:relative;z-index:5}
section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:110px clamp(18px,3.4vw,48px) 110px clamp(88px,10vw,168px);max-width:var(--maxw)}
section.auto{min-height:0}

.label{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.36em;
  color:var(--brass);text-transform:uppercase;margin-bottom:34px}

/* the Monolith headline treatment, without the hover trick */
h1,h2{font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:400;letter-spacing:.02em}
h1{font-size:clamp(38px,7.4vw,104px);line-height:1.0;text-transform:uppercase;
  max-width:13ch;margin-bottom:30px}
h2{font-size:clamp(27px,4.2vw,58px);line-height:1.06;text-transform:uppercase;
  max-width:15ch;margin-bottom:26px}
h3{font-family:"Space Grotesk";font-size:15px;font-weight:500;letter-spacing:.01em;margin-bottom:10px}
h1 .lo,h2 .lo{text-transform:none;font-style:italic;color:var(--brass)}

.serif{font-family:"Bodoni Moda",Didot,Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(20px,2.7vw,34px);line-height:1.35;color:var(--brass);
  max-width:26ch;margin-bottom:32px}
.serif em{font-style:normal;color:var(--ink)}

p{max-width:46ch;font-size:15px;line-height:1.9;color:var(--ink-2)}
.sub{font-size:16px;max-width:48ch;margin-bottom:40px}

/* ---------- buttons ---------- */
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;padding:16px 32px;border:1px solid var(--brassline,rgba(207,169,106,.34));
  color:var(--brass);transition:background .6s var(--ease),border-color .6s var(--ease),color .6s var(--ease)}
.btn:hover{background:var(--brassfill,rgba(207,169,106,.1));border-color:var(--brass)}
.btn.ghost{border-color:var(--line);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink);background:transparent}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:14px}
/* No hover fade. On a one-pixel gap it fired unreliably and read as a glitch. */
.grid3 .card{background:var(--bg);padding:30px 26px 32px}
.card .n{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em;
  color:var(--brass);margin-bottom:20px;display:block}
.card p{font-size:13.5px;line-height:1.85}

/* ecosystem: a quiet index, not an advert */
.apps{max-width:600px;margin-top:6px}
.apps a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink-3);
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:color .5s var(--ease),border-color .5s var(--ease),padding-left .5s var(--ease)}
.apps a:hover{color:var(--ink);border-color:var(--brassline,rgba(207,169,106,.45));padding-left:12px}
.apps a b{font-weight:400;color:var(--ink);letter-spacing:.08em;flex:0 0 auto}
.apps a i{font-style:normal;flex:1;text-align:right;color:var(--ink-3);font-size:10px}
.more{display:inline-flex;align-items:center;gap:11px;margin-top:30px;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);text-decoration:none}
.more i{display:block;width:28px;height:1px;background:var(--brass);transition:width .7s var(--ease)}
.more:hover i{width:54px}

/* ---------- closing band ---------- */
.band{border:1px solid var(--line);padding:clamp(34px,5vw,64px);background:var(--panel);
  max-width:820px}

footer{position:relative;z-index:5;border-top:1px solid var(--line);
  padding:26px clamp(18px,3.4vw,48px) 34px clamp(88px,10vw,168px);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- reveals ---------- */
.r{opacity:0;transform:translateY(26px);
   transition:opacity 1.15s var(--ease),transform 1.15s var(--ease)}
.r.in{opacity:1;transform:none}

@media (max-width:900px){
  .rail{display:none}
  section{padding-left:clamp(18px,4vw,30px)}
  footer{padding-left:clamp(18px,4vw,30px)}
  .grid3{grid-template-columns:1fr}
  header nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{opacity:1;transform:none;transition:none}
}