@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- OXBO BRAND TOKENS (swap these three to the exact site values) ---- */
  --bar:#241a3d;        /* dark purple — header & hero (per request; pairs with OXBO copper) */
  --orange:#e8872b;     /* EXACT OXBO copper/orange — active tab, CTA, fills on purple */
  --accent:#b0561a;     /* deep copper — links, eyebrows, accents on paper */
  /* ---------------------------------------------------------------------- */
  --paper:#f7f4ee; --panel:#fffdf9; --ink:#211d17; --soft:#5c554a; --faint:#8a8175;
  --line:#e2ddd2; --line2:#d6cfc1;
  --ochre:#8a6416; --ok:#356b4f; --blue:#2f5d86;
  --bar-ink:#efe9dd;
  --maxw:44rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:5.2rem}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:'Barlow',system-ui,sans-serif; font-size:1.06rem; line-height:1.62;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Libre Baskerville',Georgia,serif; line-height:1.2; color:var(--ink)}

/* ---------- top bar ---------- */
.topbar{position:fixed; top:0; left:0; right:0; height:4.4rem; z-index:50;
  display:flex; align-items:center; gap:1rem; padding:0 1.1rem;
  background:var(--bar); color:var(--bar-ink); box-shadow:0 1px 0 rgba(0,0,0,.25)}
.brand{display:flex; align-items:center; gap:.6rem; line-height:1.05; color:var(--bar-ink)}
.brand:hover{text-decoration:none}
.brand-logo{display:grid; place-items:center; width:2.05rem; height:2.05rem; border-radius:.5rem;
  background:#fbf8f2; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); flex:none}
.brand-logo img{width:1.35rem; height:auto; display:block}
.brand-tx{display:flex; flex-direction:column}
.brand-mark{font-family:'Barlow'; font-weight:800; letter-spacing:.16em; font-size:1.12rem; color:var(--orange)}
.brand-sub{font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.02em; color:#c9c0af; margin-top:2px}
.modtabs{display:flex; gap:.35rem; margin-left:auto}
.tab{display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:.45rem;
  font-family:'IBM Plex Mono',monospace; font-size:.95rem; color:#d9d1c1;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09)}
.tab:hover{text-decoration:none; background:rgba(255,255,255,.14)}
.tab-active{background:var(--orange); color:#241a3d; border-color:var(--orange); font-weight:700}
.tab-soon{opacity:.4; cursor:default}
.rail-toggle{display:none; margin-left:.4rem; background:transparent; color:var(--bar-ink);
  border:1px solid rgba(255,255,255,.2); border-radius:.4rem; padding:.4rem .6rem;
  font-family:'Barlow'; font-size:.8rem; cursor:pointer}

/* ---------- module layout ---------- */
.layout{display:grid; grid-template-columns:16rem minmax(0,1fr); gap:2rem;
  max-width:64rem; margin:0 auto; padding:5.6rem 1.4rem 4rem}
.rail{position:sticky; top:5.4rem; align-self:start; max-height:calc(100vh - 6.5rem); overflow:auto;
  font-family:'Barlow',sans-serif; font-size:.86rem}
.rail-head{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:.6rem}
.rail-list{list-style:none; margin:0; padding:0; border-left:2px solid var(--line)}
.rail-list li a{display:block; padding:.28rem 0 .28rem .8rem; margin-left:-2px;
  border-left:2px solid transparent; color:var(--soft); line-height:1.3}
.rail-list li a:hover{color:var(--ink); text-decoration:none}
.rail-list li a.active{color:var(--accent); border-left-color:var(--accent); font-weight:600}

/* ---------- document ---------- */
.masthead{border-bottom:2px solid var(--ink); padding-bottom:1.1rem; margin-bottom:1.6rem}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent)}
.masthead h1{font-size:2.3rem; margin:.35rem 0 .2rem}
.masthead .dek{font-size:1.12rem; color:var(--soft); margin:0; font-style:italic}
.prose{max-width:var(--maxw)}
.prose h3{font-size:1.45rem; margin:2.4rem 0 .5rem; padding-top:.4rem}
.prose h4{font-size:1.02rem; letter-spacing:.01em; color:var(--accent); margin:1.7rem 0 .3rem}
.prose p{margin:.7rem 0}
.prose ul,.prose ol{margin:.6rem 0; padding-left:1.3rem}
.prose li{margin:.3rem 0}
.prose hr{border:none; border-top:1px solid var(--line2); margin:2rem 0}
.prose strong{font-weight:700}
.prose blockquote{margin:1rem 0; padding:.4rem 1rem; border-left:3px solid var(--ochre); color:var(--soft)}
.prose code{font-family:'IBM Plex Mono',monospace; font-size:.9em; background:#efe9dd; padding:.05em .3em; border-radius:.25em}

/* math */
math{font-size:1.02em}
.prose p math[display="block"], .prose math[display="block"]{display:block; margin:1rem auto; text-align:center; overflow-x:auto}

/* tables */
.prose table{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.94rem;
  font-family:'Barlow',sans-serif}
.prose th,.prose td{border:1px solid var(--line2); padding:.5rem .65rem; text-align:left; vertical-align:top}
.prose thead th{background:var(--ink); color:var(--paper); font-weight:600; font-size:.82rem;
  letter-spacing:.02em}
.prose tbody tr:nth-child(even){background:#fbf8f2}

/* figures */
.fig{margin:1.8rem 0; padding:0}
.fig img{width:100%; height:auto; border:1px solid var(--line2); border-radius:.4rem; display:block}
.fig .fig-ph{display:none}
.fig.missing img{display:none}
.fig.missing .fig-ph{display:grid; place-items:center; text-align:center; gap:.3rem;
  min-height:12rem; border:2px dashed var(--line2); border-radius:.5rem; background:#fbf8f2;
  color:var(--faint); font-family:'IBM Plex Mono',monospace; font-size:.85rem; padding:1.5rem}
.fig.missing .fig-ph span{font-size:1.1rem; color:var(--accent); letter-spacing:.05em}
.fig figcaption{font-family:'Barlow',sans-serif; font-size:.85rem; color:var(--soft);
  margin-top:.55rem; line-height:1.4}

/* pager + footer */
.pager{display:flex; justify-content:space-between; gap:1rem; margin:3rem 0 1.5rem;
  border-top:1px solid var(--line); padding-top:1.2rem}
.pg{font-family:'Barlow'; font-size:.9rem; font-weight:600; display:flex; flex-direction:column}
.pg span{font-weight:400; font-size:.8rem; color:var(--soft)}
.pg-next{text-align:right}
.foot{color:var(--faint); font-family:'Barlow'; font-size:.78rem; margin-top:2rem}
.foot a{color:var(--soft)}

/* ---------- landing ---------- */
.hero{background:var(--bar); color:var(--bar-ink); padding:6.6rem 1.4rem 3.4rem}
.hero-inner{max-width:52rem; margin:0 auto}
.hero .eyebrow{color:#f7b27a}
.hero h1{font-size:2.9rem; margin:.4rem 0 .8rem; color:#fff; line-height:1.08}
.hero .lede{font-size:1.2rem; color:#e7dfd0; max-width:40rem; line-height:1.5}
.hero .by{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:#c9c0af; margin-top:1rem}
.cta{display:inline-block; margin-top:1.4rem; background:var(--orange); color:#241a3d;
  padding:.7rem 1.2rem; border-radius:.5rem; font-family:'Barlow'; font-weight:700}
.cta:hover{text-decoration:none; background:#f39b45}
.wrap{max-width:60rem; margin:0 auto; padding:3rem 1.4rem 2rem}
.modules-h,.about h2{font-family:'Barlow'; font-size:1rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:.5rem}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr)); gap:1rem; margin:1.4rem 0 2.6rem}
.card{display:block; background:var(--panel); border:1px solid var(--line2); border-radius:.7rem;
  padding:1.2rem 1.2rem 1.3rem; color:var(--ink); position:relative; transition:.15s}
.card:hover{text-decoration:none; border-color:var(--accent); box-shadow:0 6px 20px rgba(33,29,23,.09); transform:translateY(-2px)}
.card-off{opacity:.62} .card-off:hover{transform:none; box-shadow:none; border-color:var(--line2)}
.card-num{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--faint)}
.card h3{font-size:1.22rem; margin:.15rem 0 .2rem}
.card-full{font-family:'Barlow'; font-size:.82rem; color:var(--soft); margin:.1rem 0 .5rem; font-style:normal}
.card-blurb{font-size:.92rem; color:var(--soft); margin:.4rem 0 .9rem; line-height:1.45}
.card-go{font-family:'Barlow'; font-weight:600; font-size:.86rem; color:var(--accent)}
.card-soon{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--faint);
  border:1px solid var(--line2); border-radius:1rem; padding:.12rem .55rem}
.about{max-width:44rem} .about p{color:var(--soft); font-size:.98rem}
.foot-wide{text-align:center; padding:2rem 1rem; border-top:1px solid var(--line)}

/* ---------- coming-soon module page ---------- */
.coming{min-height:calc(100vh - 4.4rem); display:grid; place-items:center; padding:5.6rem 1.4rem 3rem}
.coming-inner{max-width:40rem; text-align:center}
.coming .eyebrow{color:var(--accent)}
.coming h1{font-size:2.5rem; margin:.4rem 0 .2rem}
.coming .dek{font-size:1.15rem; color:var(--soft); font-style:italic; margin:0 0 1.3rem}
.coming-desc{font-size:1.02rem; color:var(--ink); margin:0 auto 1.6rem; max-width:34rem}
.coming-badge{display:inline-block; background:var(--bar); color:var(--orange);
  font-family:'IBM Plex Mono',monospace; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem 1rem; border-radius:2rem}
.coming-note{font-size:.92rem; color:var(--soft); margin-top:1.4rem}
.coming .pager{max-width:34rem; margin:2.4rem auto 0}

.scrim{display:none; position:fixed; inset:0; background:rgba(20,16,12,.4); z-index:40}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .brand-sub{display:none}
  .rail-toggle{display:inline-block}
  .layout{grid-template-columns:1fr; padding-top:5.2rem}
  .rail{position:fixed; top:0; left:0; bottom:0; width:16rem; z-index:45; background:var(--panel);
    padding:5.4rem 1.2rem 1.2rem; box-shadow:2px 0 20px rgba(0,0,0,.15);
    transform:translateX(-102%); transition:transform .2s; max-height:none}
  body.rail-open .rail{transform:none}
  body.rail-open .scrim{display:block}
  .masthead h1{font-size:1.9rem}
  .hero h1{font-size:2.1rem}
}
@media print{
  .topbar,.rail,.pager,.rail-toggle,.scrim{display:none!important}
  .layout{display:block; padding:0} body{font-size:11pt}
  .fig{break-inside:avoid}
}

/* ---------- wide (full-bleed) figures on large screens ---------- */
.fig-wide img{max-width:none}
@media (min-width:66rem){
  body{overflow-x:clip}
  .fig-wide{
    width:68vw;
    margin-left:calc(12.6rem - 34vw);
    margin-right:calc(12.6rem - 34vw);
  }
  .fig-wide figcaption{max-width:60rem; margin-left:auto; margin-right:auto}
}