/* C.O computer site: shared styles (header, type, footer, page layout).
   The homepage (index.html) adds its own styles for the scroll story. */
:root{
  --ground:#0A0A0B; --raise:#141517; --ink:#EDE9DF; --soft:#d6d2c8; --mute:#8B8F95; --faint:#7C8188; --rule:#26292E; --bone:#E6DCC3;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:"Karla","Helvetica Neue",Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit}
img{max-width:100%;display:block}

/* header: the mark, the pages, first access */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:36px;padding:24px 40px;
  background:linear-gradient(to bottom,rgba(10,10,11,.7),rgba(10,10,11,0))}
/* solid once the homepage story scrolls away at the end, so the last chapter doesn't show through the menu */
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ground);opacity:0;transition:opacity .35s ease;pointer-events:none}
.bar.solid::before{opacity:1}
.bar .home img{width:30px;height:auto}
.bar nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.bar nav a{font-family:"Jost",Arial,sans-serif;font-size:11px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--soft)}
.bar nav a:hover{color:var(--ink)}
.bar nav a.go{color:var(--ink);padding:12px 18px;border:1px solid rgba(237,233,223,.35);background:rgba(14,14,15,.72)}   /* no backdrop blur: over the 3D it is recomputed every frame */
.bar nav a.go:hover{background:var(--ink);color:var(--ground)}

/* type */
.eyebrow{font-family:"Jost",Arial,sans-serif;font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--faint);margin:0 0 18px}
h1,h2,h3{font-family:"Jost",Arial,sans-serif;font-weight:200;margin:0;letter-spacing:-.005em}
h1{font-size:64px;line-height:1.02}
h2{font-size:44px;line-height:1.08}
h3{font-size:22px;font-weight:300}
em{font-style:normal;color:#c9c5bb}
.btn{display:inline-block;font-family:"Jost",Arial,sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;padding:16px 24px;border:1px solid rgba(237,233,223,.4);transition:background .2s,color .2s}
.btn-main{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-main:hover{background:transparent;color:var(--ink)}
.btn:not(.btn-main):hover{background:rgba(237,233,223,.08)}

/* inner pages */
.page{max-width:1100px;margin:0 auto;padding:150px 40px 40px}
.page .lede{font-size:19px;color:var(--soft);max-width:620px}
.page section{margin:96px 0 0}
.note{border-left:2px solid #6b5e3c;padding:14px 18px;background:rgba(230,220,195,.04);color:var(--soft);font-size:15px;margin:28px 0}
.prose{max-width:680px;font-size:17px;color:var(--soft)}
.prose h2{font-size:28px;margin:48px 0 12px;color:var(--ink)}
.prose a{color:var(--ink)}
dl.spec{display:grid;grid-template-columns:200px 1fr;margin:0;border-top:1px solid var(--rule)}
dl.spec dt,dl.spec dd{margin:0;padding:14px 0;border-bottom:1px solid var(--rule)}
dl.spec dt{color:var(--mute);font-size:14px;letter-spacing:.04em}

/* footer */
footer.site{max-width:1180px;margin:0 auto;padding:60px 40px 70px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:24px 40px;align-items:baseline;color:var(--faint);font-size:13px}
footer.site nav{display:flex;gap:24px}
footer.site a{text-decoration:none;color:var(--mute)}
footer.site a:hover{color:var(--ink)}
footer.site .small{flex-basis:100%;font-size:12px;color:#9a9ea5;max-width:720px}   /* readable: at least 4.5:1 on the ground */

/* the list: a side panel with the Tally form (site.js) */
.list-scrim{position:fixed;inset:0;z-index:40;background:rgba(5,5,6,.7);opacity:0;pointer-events:none;transition:opacity .35s}
.list-scrim.open{opacity:1;pointer-events:auto}
.list-panel{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(480px,100vw);background:#171719;border-left:1px solid var(--rule);
  padding:64px 40px 32px;overflow-y:auto;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.list-panel.open{transform:none}
.list-panel h2{font-size:38px}
.list-panel .list-lede{color:var(--soft);font-size:16px;margin:16px 0 18px}
.list-panel iframe{width:100%;height:440px;border:0;display:block;color-scheme:normal}
.list-panel .list-small{font-size:12px;color:var(--faint)}
.list-close{position:absolute;top:18px;right:22px;width:40px;height:40px;font-size:26px;line-height:1;color:var(--soft);background:none;border:1px solid var(--rule);cursor:pointer}
.list-close:hover{color:var(--ink);border-color:var(--soft)}

/* phone width */
@media (max-width:820px){
  .bar{padding:16px 20px 22px;gap:16px;background:linear-gradient(to bottom,var(--ground) 72%,rgba(10,10,11,0))}   /* solid on phones: the words scroll under it */
  .bar nav{gap:16px}
  .bar nav a:not(.go){display:none}
  .bar nav a.go{padding:10px 14px;font-size:10px;letter-spacing:.24em}
  h1{font-size:42px} h2{font-size:32px}
  .page{padding:110px 20px 20px}
  .page section{margin-top:72px}
  dl.spec{grid-template-columns:120px 1fr}
  footer.site{padding:40px 20px 56px}
  footer.site nav{flex-wrap:wrap;gap:14px 20px}
  .list-panel{padding:60px 20px 24px}
}

/* "First chance at the 25": the benefit leads, in the brighter ink (no faux bold: Karla is loaded at 300 and 400) */
.final p b,.list p b,.list-lede b{font-weight:400;color:var(--ink)}