/* GenCents — "The Marker Ledger" design system.
   One loud color (marker orange), everything else is black, white, and ink. */

:root{
  --paper:#F5F5F2;
  --paper-raised:#FFFFFF;
  --paper-sunken:#EDEDE7;
  --ink:#101010;
  --ink-soft:#57554C;
  --line:#101010;
  --copper:#FF5A1F;
  --copper-soft:#FFE2D2;
  --teal:#17A673;
  --teal-soft:#D8F3E7;
  --rust:#D93F2B;
  --rust-soft:#FBDAD5;
  --navy-deep:#101010;
  --shadow: 3px 3px 0 rgba(16,16,16,.9);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#101010;
    --paper-raised:#1A1A18;
    --paper-sunken:#080807;
    --ink:#F5F5F2;
    --ink-soft:#A8A69C;
    --line:#F5F5F2;
    --copper:#FF7A47;
    --copper-soft:#3A2115;
    --teal:#3FCE9C;
    --teal-soft:#0F2B22;
    --rust:#F0685A;
    --rust-soft:#3A1712;
    --navy-deep:#101010;
    --shadow: 3px 3px 0 rgba(245,245,242,.85);
    color-scheme: dark;
  }
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
  line-height:1.6;
  font-size:16px;
}
h1,h2{font-family:"Anton","Archivo Black",Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; margin:0 0 .4em; line-height:1.0;}
h3,h4{font-family:"Archivo",sans-serif; font-weight:800; text-wrap:balance; margin:0 0 .4em; line-height:1.15;}
p{margin:0 0 1em;}
a{color:var(--copper);}
.mono, .num{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}

.wrap{max-width:1080px; margin:0 auto; padding-inline:20px;}
.narrow{max-width:720px; margin:0 auto; padding-inline:20px;}

/* header */
header.site{
  position:sticky; top:0; z-index:20;
  background:var(--paper); border-bottom:2px solid var(--line);
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand .mark{
  width:34px; height:34px; border-radius:50%;
  background:var(--copper); color:var(--navy-deep); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:1.15rem;
}
.brand .word{font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em;}
nav.links{display:flex; gap:22px; font-size:.92rem; font-weight:500;}
nav.links a{color:var(--ink-soft); text-decoration:none;}
nav.links a:hover, nav.links a.active{color:var(--copper);}
.nav-toggle{display:none; background:none; border:2px solid var(--line); border-radius:0; padding:6px 10px; color:var(--ink); font-size:1.1rem;}

@media (max-width:720px){
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:2px solid var(--line);
    flex-direction:column; padding:14px 20px; gap:14px;
    display:none;
  }
  nav.links.open{display:flex;}
  .nav-toggle{display:block;}
}

/* hero */
.hero{padding-block:56px 40px;}
.eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:.75rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--teal); display:inline-block; margin-bottom:12px;
}
.hero h1{font-size:clamp(2rem,5.5vw,3.1rem); line-height:1.06; font-weight:700; max-width:16ch;}
.hero .sub{color:var(--ink-soft); font-size:1.08rem; max-width:56ch; margin-top:16px;}
.hero-actions{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:0; text-decoration:none;
  font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:.86rem; border:2px solid var(--ink); cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(0,0); box-shadow:1px 1px 0 var(--ink);}
.btn-primary{background:var(--copper); color:var(--navy-deep);}
.btn-ghost{background:var(--paper-raised); color:var(--ink);}

/* the number strip */
.number-strip{
  background:var(--paper-raised); border:2px solid var(--line); border-radius:0;
  padding:22px 26px; margin-top:8px; display:flex; gap:28px; flex-wrap:wrap;
  box-shadow:var(--shadow);
}
.number-strip .stat b{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:1.5rem; color:var(--copper);
  font-variant-numeric:tabular-nums;
}
.number-strip .stat span{color:var(--ink-soft); font-size:.82rem;}

section{padding-block:44px; border-top:2px solid var(--line);}
section h2{font-size:1.7rem;}
.lede{color:var(--ink-soft); max-width:62ch; margin-bottom:24px;}

.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.card{
  background:var(--paper-raised); border:2px solid var(--line); border-radius:0;
  padding:20px 22px; box-shadow:var(--shadow);
}
.card h3{font-size:1.05rem; font-family:"Archivo",sans-serif; font-weight:800;}
.card p{color:var(--ink-soft); font-size:.92rem; margin-bottom:0;}
.card .tag{
  display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.68rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
  background:var(--teal-soft); border:1px solid var(--ink); padding:3px 8px; border-radius:0; margin-bottom:10px;
}
.card .tag.priority{color:var(--ink); background:var(--copper-soft);}

.perf{
  height:1px; margin-block:0;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}

/* footer */
footer.site{border-top:2px solid var(--line); padding-block:36px; color:var(--ink-soft); font-size:.85rem;}
footer.site .foot-inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;}
footer.site a{color:var(--ink-soft);}
.disclaimer{font-size:.8rem; color:var(--ink-soft); margin-top:10px; max-width:70ch;}

/* tools page */
.tab-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
.tab-btn{
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; letter-spacing:.03em;
  padding:9px 14px; border-radius:0; border:2px solid var(--ink);
  background:var(--paper-raised); color:var(--ink-soft); cursor:pointer;
}
.tab-btn.active{background:var(--copper); border-color:var(--ink); color:var(--navy-deep); box-shadow:var(--shadow);}
.tool-panel{display:none;}
.tool-panel.active{display:block;}

.calc{
  background:var(--paper-raised); border:2px solid var(--line); border-radius:0;
  padding:26px 28px; display:grid; gap:22px; grid-template-columns:1fr 1fr;
}
@media (max-width:680px){.calc{grid-template-columns:1fr;}}
.calc h3{font-size:1.2rem;}
.field{margin-bottom:14px;}
.field label{
  display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); font-family:"IBM Plex Mono",monospace; margin-bottom:5px;
}
.field .input-row{display:flex; align-items:center; gap:8px;}
.field input[type=number], .field input[type=text]{
  width:100%; padding:9px 11px; border:2px solid var(--line); border-radius:0;
  background:var(--paper); color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:.95rem;
}
.field input:focus{outline:2px solid var(--copper); outline-offset:1px;}
.field .unit{color:var(--ink-soft); font-size:.85rem;}

.result{
  background:var(--paper-sunken); border:2px solid var(--line); border-radius:0;
  padding:18px 20px;
}
.result .line{
  display:flex; justify-content:space-between; padding:7px 0;
  border-bottom:1px dashed var(--line); font-size:.92rem;
}
.result .line:last-child{border-bottom:none;}
.result .line b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
.result .total{font-size:1.25rem; color:var(--copper); font-weight:700;}
.result .total b{font-size:1.25rem;}
.result .note{font-size:.8rem; color:var(--ink-soft); margin-top:10px;}
.result .flag{color:var(--rust); font-weight:600;}
.result .good{color:var(--teal); font-weight:600;}
canvas.chart{width:100%; height:auto; display:block; margin-bottom:18px;}

.share-btn{margin-top:14px;}

/* episode page */
.ep-meta{display:flex; gap:20px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft); margin-bottom:20px;}
.ep-meta .mono{color:var(--ink-soft);}
.transcript{
  background:var(--paper-raised); border:2px solid var(--line); border-radius:0;
  padding:24px 26px; font-size:.95rem;
}
.transcript .who{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--copper); margin-top:16px; display:block;}
.transcript .who.jackson{color:var(--teal);}
.video-frame{
  position:relative; padding-top:56.25%; border-radius:0; overflow:hidden;
  border:2px solid var(--line); margin-bottom:24px; background:var(--paper-sunken);
}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}