@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ===================================================================
   Datassier — shared site chrome.
   Loaded after each page's own <style>, so it is authoritative for
   anything defined in both. One container, one header, one footer.
   =================================================================== */

:root{
  --sunset-deep:#B8391A; --sunset-mid:#D2691E; --sand:#E8B54D; --sand-light:#F2D08C;
  --denim:#9DBFCF; --denim-light:#D6E6ED;
  --white:#FFFFFF; --paper:#FFFFFF; --ink:#2B1B12; --line:#E7DFD4;
  --ink-soft:#5c5044; --ink-faint:#8a7a68; --line-soft:#F0EBE3;
  --grad:linear-gradient(100deg,#B8391A 0%,#D2691E 45%,#E8B54D 100%);
  --display:'Archivo Expanded','Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --container:1120px;
  --gutter:1.75rem;
}

/* one container everywhere */
.wrap,.site-head-in,.site-foot-in{
  max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);
}
.wrap{padding-top:0;padding-bottom:0}

/* text measures in ch, so they hold if the container ever moves */
h1{max-width:16ch}
.lede,.hero-lede,.stand,.sub,.section-intro,.band p,.who p,.after,.keep p{max-width:66ch}
.ps,.cta-note{max-width:54ch}

/* hero: give the copy column the larger share */
.hero{grid-template-columns:1.15fr .85fr;gap:3rem}

/* ---------- HEADER ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-head-in{display:flex;align-items:center;gap:1rem;padding-top:.75rem;padding-bottom:.75rem}
.site-mark{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-size:17px;font-weight:400;letter-spacing:.01em;white-space:nowrap;
}
.site-mark-icon{
  width:24px;height:26px;flex-shrink:0;
  background:url(/assets/mark.svg) center/contain no-repeat;
}
.site-nav{display:flex;gap:1.5rem;font-size:13.5px;margin-left:auto;margin-right:1.25rem}
.site-nav a{
  color:var(--ink-soft);text-decoration:none;padding-bottom:2px;
  border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--sunset-mid)}
.site-login{
  font-size:13.5px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  margin-right:1rem;padding-bottom:2px;border-bottom:1.5px solid transparent;
  transition:color .15s,border-color .15s;
}
.site-login:hover{color:var(--ink);border-bottom-color:var(--sunset-mid)}
.site-cta{
  background:linear-gradient(120deg,#B8391A,#D2691E);color:#fff;text-decoration:none;
  padding:.45rem 1.05rem;border-radius:4px;font-size:13.5px;font-weight:500;white-space:nowrap;
  box-shadow:0 6px 20px -12px rgba(184,57,26,.6);transition:filter .15s,transform .15s;
}
.site-cta:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff}

/* ---------- FOOTER ---------- */
.site-fline{height:3px;background:linear-gradient(90deg,#9DBFCF,#FFFFFF,#F2D08C,#B8391A)}
.site-foot{padding:2rem 0 2.5rem;font-size:12.5px;color:var(--ink-faint);line-height:1.75;
  background:var(--white);border-top:none}
.site-foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
.site-foot h4{font-family:var(--mono);font-size:10.5px;color:var(--ink);font-weight:500;margin-bottom:.4rem}
.site-foot a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--line)}
.site-foot a:hover{color:var(--sunset-deep);border-bottom-color:var(--sunset-deep)}
.site-foot-bot{margin-top:1.75rem;padding-top:.9rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px}

/* ---------- NOTES: reading column inside the shared container ---------- */
.note-body,article .wrap{max-width:720px;margin:0 auto}
.note-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px}
.note-nav a{color:var(--sunset-deep);text-decoration:none;
  border-bottom:1px solid rgba(232,181,77,.85);padding-bottom:2px}
.note-nav a:hover{border-bottom-color:var(--sunset-deep)}

@media(max-width:900px){
  .site-head-in{flex-wrap:wrap;row-gap:.6rem}
  .site-nav{order:3;flex-basis:100%;margin:0;overflow-x:auto;scrollbar-width:none;
    padding-top:.55rem;border-top:1px solid var(--line-soft);gap:1.3rem}
  .site-nav::-webkit-scrollbar{display:none}
  .site-login{margin-left:auto}
  .hero{grid-template-columns:1fr;gap:2rem}
  .site-foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  :root{--gutter:1.2rem}
  .site-foot-grid{grid-template-columns:1fr;gap:1.4rem}
}

/* eyebrow: the category line above the hero */
.site-eyebrow{
  font-size:13px;line-height:1.5;color:var(--ink-soft);background:none;
  letter-spacing:.01em;margin:0 0 1rem;max-width:60ch;
}

/* console: fixed height, scrolls like a transcript instead of growing */
.console-body{height:360px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.console-body::-webkit-scrollbar{width:6px}
.console-body::-webkit-scrollbar-track{background:transparent}
.console-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.console-body::-webkit-scrollbar-thumb:hover{background:var(--denim)}
.console-body{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
@media(max-width:900px){.console-body{height:340px}}
@media(max-width:620px){.console-body{height:300px}}