/* ============================================================
   georgio.hajjboutros.com — shared stylesheet for sub-pages
   Tokens mirror index.html exactly. Keep in sync.
   ============================================================ */

:root{
  --ground:#F7F6F3; --surface:#FFFFFF; --surface-2:#F0EEE9; --surface-3:#E7E4DD;
  --ink:#14161A; --ink-2:#4A4F58; --ink-3:#7C828C;
  --line:#DEDAD2; --line-2:#C9C4B9;
  --accent:#DF5B21; --accent-2:#B8420F; --accent-tint:#FBEDE5;
  --c1:#DF5B21; --c2:#0E7C7B; --c3:#5B54C9; --c4:#2563A8; --c5:#B03060; --c6:#6B8E23; --c7:#B7891A; --c8:#56657A; --c9:#0891B2;
  --ok:#15803D; --ok-soft:#E6F4EA; --warn:#B45309; --warn-soft:#FDF1DC; --bad:#B91C1C; --bad-soft:#FBEAE8;
  --shadow:0 1px 2px rgba(20,22,26,.05),0 8px 24px -12px rgba(20,22,26,.18);
  --shadow-lg:0 2px 4px rgba(20,22,26,.06),0 24px 60px -20px rgba(20,22,26,.26);
  --radius:10px;
  --grid-line:rgba(20,22,26,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B0C0E; --surface:#141619; --surface-2:#1B1E22; --surface-3:#242830;
    --ink:#ECEDEF; --ink-2:#A8AEB8; --ink-3:#767D88;
    --line:#272B31; --line-2:#363B43;
    --accent:#FF7A45; --accent-2:#FF9C6E; --accent-tint:#2A1509;
    --c1:#FF7A45; --c2:#2DD4BF; --c3:#A78BFA; --c4:#60A5FA; --c5:#F472B6; --c6:#A3E635; --c7:#E9C46A; --c8:#94A3B8; --c9:#22D3EE;
    --ok:#4ADE80; --ok-soft:#0F2A18; --warn:#FBBF24; --warn-soft:#2C2008; --bad:#F87171; --bad-soft:#2E1214;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.8);
    --grid-line:rgba(236,237,239,.08);
  }
}
:root[data-theme="dark"]{
  --ground:#0B0C0E; --surface:#141619; --surface-2:#1B1E22; --surface-3:#242830;
  --ink:#ECEDEF; --ink-2:#A8AEB8; --ink-3:#767D88;
  --line:#272B31; --line-2:#363B43;
  --accent:#FF7A45; --accent-2:#FF9C6E; --accent-tint:#2A1509;
  --c1:#FF7A45; --c2:#2DD4BF; --c3:#A78BFA; --c4:#60A5FA; --c5:#F472B6; --c6:#A3E635; --c7:#E9C46A; --c8:#94A3B8; --c9:#22D3EE;
  --ok:#4ADE80; --ok-soft:#0F2A18; --warn:#FBBF24; --warn-soft:#2C2008; --bad:#F87171; --bad-soft:#2E1214;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.8);
  --grid-line:rgba(236,237,239,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
a{color:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.wrap{width:min(1120px,calc(100vw - 40px));margin:0 auto}
.narrow{width:min(760px,calc(100vw - 40px));margin:0 auto}
@media(max-width:640px){.wrap,.narrow{width:calc(100vw - 32px)}}

.lab{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:500;margin:0}

/* ---------------- top bar ---------------- */
.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:56px}
.brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;letter-spacing:-.01em;
  text-decoration:none;display:flex;align-items:center;gap:9px;color:var(--ink)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.navl{display:none;margin-left:auto;gap:4px}
@media(min-width:880px){.navl{display:flex}}
.navl a{text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500;padding:7px 11px;
  border-radius:6px;transition:color .15s,background .15s}
.navl a:hover{color:var(--ink);background:var(--surface-2)}
.navl a.on{color:var(--accent)}
.tbtn{margin-left:auto;display:flex;gap:8px;align-items:center}
@media(min-width:880px){.tbtn{margin-left:14px}}
.iconbtn{width:34px;height:34px;border-radius:7px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.iconbtn:hover{color:var(--accent);border-color:var(--accent)}
.iconbtn svg{width:16px;height:16px}
.cta{text-decoration:none;background:var(--ink);color:var(--ground);font-size:13.5px;font-weight:600;
  padding:8px 15px;border-radius:7px;white-space:nowrap;transition:.15s}
.cta:hover{background:var(--accent);color:#fff}

/* ---------------- buttons ---------------- */
.btn{text-decoration:none;font-size:14px;font-weight:600;padding:11px 19px;border-radius:8px;
  border:1px solid var(--ink);background:var(--ink);color:var(--ground);transition:.16s;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
.btn svg{width:15px;height:15px;flex:0 0 auto}

/* ---------------- synthetic badge ---------------- */
.synth{position:fixed;bottom:14px;left:14px;z-index:55;display:flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:6px 13px 6px 10px;
  box-shadow:var(--shadow);font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em;
  color:var(--ink-3);text-transform:uppercase;max-width:calc(100vw - 28px)}
.synth b{width:6px;height:6px;border-radius:50%;background:var(--c2);flex:0 0 auto}
@media(max-width:560px){.synth{font-size:9px;padding:5px 10px 5px 8px}}

/* ---------------- case header ---------------- */
.chead{position:relative;padding:60px 0 0;overflow:hidden;border-bottom:1px solid var(--line)}
.chead-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 88% 66% at 50% 0%,#000 22%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 88% 66% at 50% 0%,#000 22%,transparent 76%)}
.chead .wrap{position:relative;z-index:1}
.crumb{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink-3);
  font-size:13px;font-weight:500;margin-bottom:26px;transition:color .15s}
.crumb:hover{color:var(--accent)}
.crumb svg{width:14px;height:14px}
.chead h1{font-size:clamp(2.05rem,5.2vw,3.5rem);letter-spacing:-.033em;margin:14px 0 0;max-width:20ch}
.chead .stand{font-size:clamp(1rem,1.8vw,1.16rem);color:var(--ink-2);max-width:60ch;margin:20px 0 0;line-height:1.62}

/* fact strip */
.facts{margin:42px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding:18px 18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact:nth-child(2n){border-right:0}
@media(min-width:760px){.fact{border-bottom:0}.fact:nth-child(2n){border-right:1px solid var(--line)}.fact:last-child{border-right:0}}
.fact dt{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px}
.fact dd{margin:0;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}

/* ---------------- body prose ---------------- */
.cbody{padding:64px 0 0}
.cbody section{margin:0 0 58px;scroll-margin-top:72px}
.cbody h2{font-size:clamp(1.42rem,2.9vw,1.92rem);letter-spacing:-.026em;margin:0 0 6px}
.cbody h2 + .kick{color:var(--ink-3);font-size:14px;margin:0 0 22px}
.cbody h3{font-size:1.1rem;margin:30px 0 9px}
.cbody p{color:var(--ink-2);font-size:1.02rem;line-height:1.72;max-width:70ch}
.cbody p strong{color:var(--ink);font-weight:600}
.cbody ul{color:var(--ink-2);font-size:1.02rem;line-height:1.72;max-width:70ch;padding-left:1.15em;margin:0 0 1em}
.cbody li{margin:0 0 .5em}
.cbody li strong{color:var(--ink);font-weight:600}
.secnum{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:block;margin:0 0 10px}

/* pull quote / key line */
.pull{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:28px 0;max-width:62ch}
.pull p{font-family:"Space Grotesk","Inter",sans-serif;font-size:1.18rem;line-height:1.5;
  color:var(--ink);font-weight:500;letter-spacing:-.015em;margin:0}

/* decision cards */
.decisions{display:grid;gap:14px;grid-template-columns:1fr;margin:24px 0 0}
@media(min-width:820px){.decisions{grid-template-columns:repeat(2,1fr)}}
.dec{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 21px;
  position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.dec:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.dec:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.dec:hover:before{transform:scaleY(1)}
.dec .dn{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink-3);letter-spacing:.1em}
.dec h3{font-size:1.06rem;margin:11px 0 9px}
.dec p{color:var(--ink-2);font-size:.93rem;margin:0;line-height:1.64;max-width:none}
.dec .tradeoff{margin-top:13px;padding-top:12px;border-top:1px dashed var(--line-2);
  font-size:.865rem;color:var(--ink-3)}
.dec .tradeoff b{color:var(--ink-2);font-weight:600}

/* outcome list */
.outs{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.outs li{display:flex;gap:13px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0;max-width:none}
.outs .tick{width:19px;height:19px;flex:0 0 auto;margin-top:2px;border-radius:50%;
  background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center}
.outs .tick svg{width:11px;height:11px}
.outs span.txt{color:var(--ink-2);font-size:.97rem;line-height:1.6}
.outs span.txt b{color:var(--ink);font-weight:600}

/* figure — breaks out of the reading column so diagram text stays legible */
figure.dia{margin:34px 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 24px 18px;overflow:hidden;
  width:min(1120px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%)}
@media(max-width:640px){figure.dia{width:calc(100vw - 32px);padding:20px 14px 14px}}
figure.dia svg{display:block;width:100%;height:auto;color:var(--ink-2)}
figure.dia figcaption{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-3);line-height:1.6;
  width:min(760px,100%);margin-left:auto;margin-right:auto}

/* stack chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 0;padding:0;list-style:none}
.chips li{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.03em;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  padding:5px 11px;border-radius:100px;margin:0}

/* retro / caveat block */
.retro{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--ink-3);
  border-radius:var(--radius);padding:24px 24px 10px;margin:26px 0 0}
.retro h3{margin:0 0 12px;font-size:1.05rem}
.retro p{font-size:.97rem;max-width:66ch}
.retro p:last-child{margin-bottom:14px}

/* ---------------- pager ---------------- */
.pager{margin:70px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:720px){.pager{grid-template-columns:1fr 1fr}}
.pager a{text-decoration:none;padding:26px 22px;display:block;transition:background .18s;
  border-bottom:1px solid var(--line)}
.pager a:hover{background:var(--surface-2)}
@media(min-width:720px){.pager a.prev{border-right:1px solid var(--line)}
  .pager a.next{text-align:right}}
.pager .dir{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:8px}
.pager .ttl{font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;font-size:1.05rem;
  color:var(--ink);letter-spacing:-.018em;line-height:1.3}
.pager a:hover .ttl{color:var(--accent)}

/* ---------------- footer ---------------- */
footer.sitefoot{margin-top:70px;border-top:1px solid var(--line);padding:34px 0 46px}
footer.sitefoot .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
footer.sitefoot p{margin:0;font-size:13px;color:var(--ink-3)}
footer.sitefoot nav{display:flex;flex-wrap:wrap;gap:16px}
footer.sitefoot nav a{text-decoration:none;font-size:13px;color:var(--ink-3);transition:color .15s}
footer.sitefoot nav a:hover{color:var(--accent)}

/* ---------------- reveal ---------------- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn:hover,.dec:hover{transform:none}
}

/* ---------------- print ---------------- */
@media print{
  .topbar,.synth,.pager,.iconbtn,.cta,.chead-grid{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .rv{opacity:1;transform:none}
  figure.dia{break-inside:avoid;border:1px solid #ccc}
  .dec,.outs li{break-inside:avoid}
  a{text-decoration:none;color:#000}
}

/* ---------------- back to main page ---------------- */
.homebtn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);padding:7px 13px 7px 10px;border-radius:7px;transition:.15s}
.homebtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
.homebtn svg{width:15px;height:15px;flex:0 0 auto}
@media(max-width:560px){.tbtn .cta{display:none}}
.backrow{margin:56px 0 0;display:flex;justify-content:center}
@media print{.homebtn,.backrow{display:none!important}}

/* ---------------- case charts ---------------- */
:root{--k1:#DF5B21;--k2:#2563A8;--k3:#0F8A6E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--k1:#E8622C;--k2:#4F8BE0;--k3:#17A085}}
:root[data-theme="dark"]{--k1:#E8622C;--k2:#4F8BE0;--k3:#17A085}
figure.chartfig{position:relative;margin:28px 0 30px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 16px;
  width:min(1120px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%)}
@media(max-width:640px){figure.chartfig{width:calc(100vw - 32px);padding:18px 14px 14px}}
.ch-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;justify-content:space-between}
.ch-title{margin:0;font-family:"Space Grotesk","Inter",sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.015em}
.ch-sub{margin:4px 0 0;font-size:.86rem;color:var(--ink-3);max-width:62ch}
.ch-tag{display:inline-block;margin-left:8px;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:100px;padding:2px 8px;vertical-align:2px}
.ch-ctrl{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;flex:0 0 auto}
.ch-ctrl button{border:0;background:transparent;color:var(--ink-2);font:600 12.5px "Inter",sans-serif;
  padding:8px 13px;cursor:pointer;transition:.15s}
.ch-ctrl button+button{border-left:1px solid var(--line-2)}
.ch-ctrl button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.ch-ctrl button:hover:not([aria-pressed="true"]){color:var(--accent)}
.ch-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 4px;font-size:12.5px;color:var(--ink-2)}
.ch-legend span{display:inline-flex;align-items:center;gap:7px}
.ch-legend i{display:inline-block;width:12px;height:12px;border-radius:3px}
.ch-legend i.ln{height:2px;border-radius:1px;width:16px}
.ch-legend i.dash{height:0;border-top:2px dashed;width:16px;border-radius:0;background:none!important}
.ch-legend i.ring{border-radius:50%;background:transparent!important;border:2px solid}
.ch-stat{display:flex;flex-wrap:wrap;gap:8px 26px;margin:12px 0 2px}
.ch-stat div{font-size:12px;color:var(--ink-3)}
.ch-stat b{display:block;font-family:"Space Grotesk","Inter",sans-serif;font-size:1.35rem;color:var(--ink);letter-spacing:-.02em;font-weight:600}
.ch-plot{position:relative;margin-top:6px}
.ch-plot svg{display:block;width:100%;height:auto;overflow:visible}
.ch-plot text{font-family:"Inter",sans-serif}
.ch-tip{position:absolute;pointer-events:none;z-index:5;background:var(--surface);border:1px solid var(--line-2);
  border-radius:8px;box-shadow:var(--shadow);padding:9px 11px;font-size:12px;color:var(--ink-2);min-width:150px;
  opacity:0;transition:opacity .12s;white-space:nowrap}
.ch-tip.on{opacity:1}
.ch-tip .tt{font-weight:600;color:var(--ink);margin-bottom:5px}
.ch-tip .tr{display:flex;align-items:center;gap:7px;justify-content:space-between}
.ch-tip .tr span{display:inline-flex;align-items:center;gap:6px}
.ch-tip .tr i{width:8px;height:8px;border-radius:2px;display:inline-block}
.ch-tip .tr b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ch-tip .tn{margin-top:5px;color:var(--ink-3);font-size:11.5px;white-space:normal;max-width:240px}
figure.chartfig figcaption{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:.84rem;color:var(--ink-3);line-height:1.6}
.ch-table{margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.ch-table summary{cursor:pointer;color:var(--ink-3);font-size:12px}
.ch-table table{border-collapse:collapse;margin-top:8px;width:100%}
.ch-table th,.ch-table td{text-align:left;padding:5px 10px 5px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.ch-table th{color:var(--ink-3);font-weight:500}
.ch-hit{cursor:pointer;outline:none}
.ch-hit:focus-visible rect.hl{stroke:var(--accent);stroke-width:1.5}
@media print{.ch-ctrl,.ch-tip{display:none}}

/* top-left back to main page */
.homebtn-l{margin-right:4px}
@media(max-width:560px){.homebtn-l span{display:none}.homebtn-l{padding:7px 9px}}
@media(max-width:560px){.homebtn-l span{display:inline;font-size:0}.homebtn-l span:after{content:"Main";font-size:12.5px}.homebtn-l{padding:7px 10px 7px 8px}}

/* synthetic-data note sits at the bottom of the page instead of floating */
.synth-row{display:flex;justify-content:center;padding:10px 16px 6px}
.synth-row .synth{position:static;box-shadow:none;max-width:100%;text-align:center}