/* ============================================================
   THE CRONUS PORTFOLIO, design system
   ============================================================ */
:root{
  --ink:#0a0b0e;            /* sovereign night */
  --ink-2:#101218;
  --panel:#14161d;
  --panel-2:#191c25;
  --line:#262a35;
  --line-2:#333846;
  --paper:#ece7db;         /* parchment for reading mode */
  --text:#e9e5db;          /* warm off-white */
  --text-dim:#a9a595;
  --text-mute:#726f63;
  --gold:#c9a227;          /* Cronus gold */
  --gold-2:#e0bd4a;
  --crimson:#a8322d;       /* devoured red */
  --crimson-2:#c9524b;
  --teal:#3f8f86;
  --blue:#5b7fb0;
  --v1:#c9a227;  /* Sovereign */
  --v2:#a8322d;  /* Surveillance */
  --v3:#b5794b;  /* Elite time & status */
  --v4:#4a7fa5;  /* Compute & power */
  --v5:#3f8f86;  /* Rails & consolidation */
  --res:#726f63; /* Reserve */
  --pos:#4c9a6a;
  --neg:#c9524b;
  --maxw:1180px;
  --readw:720px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(201,162,39,.28);color:#fff}

/* ---- language switching ---- */
[data-lang="en"] .tr{display:none}
[data-lang="tr"] .en{display:none}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.read{max-width:var(--readw);margin-left:auto;margin-right:auto}
section{position:relative}
.band{padding:96px 0}
.band-tight{padding:64px 0}
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);border:0;margin:0}

/* ---- typography ---- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.12;color:#fff}
h2{font-size:clamp(30px,4.4vw,50px);margin:0 0 8px}
h3{font-size:clamp(22px,2.6vw,30px);margin:44px 0 10px;font-weight:500}
h4{font-size:19px;margin:28px 0 6px;font-weight:600;font-family:var(--sans);letter-spacing:.01em;color:var(--gold-2)}
p{margin:0 0 20px}
.lede{font-size:clamp(19px,2.1vw,23px);line-height:1.55;color:var(--text);font-family:var(--serif);font-weight:340}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;font-weight:500}
.dropcap:first-letter{font-family:var(--serif);float:left;font-size:76px;line-height:.72;padding:10px 12px 0 0;color:var(--gold);font-weight:500}
a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid rgba(224,189,74,.3)}
a:hover{border-color:var(--gold-2)}
em{color:var(--gold-2);font-style:italic}
strong{color:#fff;font-weight:600}
blockquote{margin:34px 0;padding:6px 0 6px 26px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:22px;line-height:1.5;color:#f2eee2;font-style:italic}
.small{font-size:14px;color:var(--text-dim);line-height:1.6}
.mono{font-family:var(--mono)}

/* ============================================================ NAV */
#topbar{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:rgba(10,11,14,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
#topbar.stuck{border-bottom-color:var(--line);background:rgba(10,11,14,.9)}
.brand{font-family:var(--serif);font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em;border:0}
.brand b{color:var(--gold)}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);border:0}
.navlinks a:hover{color:var(--gold-2)}
/* two-tier nav: prominent pages + small in-page section toc */
.nav-pages{display:inline-flex;gap:18px;align-items:center}
.nav-pages a{font-size:12.5px;color:var(--gold-2);font-weight:600}
.nav-pages a:hover{color:var(--gold)}
.nav-pages a.on{color:#fff}
.nav-sep{width:1px;height:13px;background:var(--line-2);display:inline-block}
.nav-sections{display:inline-flex;gap:13px;align-items:center}
.nav-sections a{font-size:9.5px;letter-spacing:.1em;color:var(--text-mute)}
.nav-sections a:hover{color:var(--text-dim)}
@media(max-width:860px){.navlinks a:not(.langtoggle){display:none}.nav-sep{display:none}}
.langtoggle{display:inline-flex;border:1px solid var(--line-2);border-radius:100px;overflow:hidden;font-family:var(--mono)}
.langtoggle button{background:transparent;border:0;color:var(--text-dim);
  padding:5px 12px;font-size:11px;letter-spacing:.1em;cursor:pointer;font-family:var(--mono);font-weight:500}
.langtoggle button.on{background:var(--gold);color:#111}

/* ============================================================ HERO */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;padding:120px 0 70px}
#hero .wrap{position:relative;z-index:3}
.hero-bg{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(168,50,45,.20),transparent 46%),
    radial-gradient(90% 80% at 12% 96%,rgba(201,162,39,.14),transparent 50%),
    linear-gradient(180deg,#08090c 0%,#0a0b0e 60%,#0c0d11 100%);}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
.hero-orbit{position:absolute;z-index:2;top:50%;right:-8%;width:70vh;height:70vh;
  transform:translateY(-50%);opacity:.55;pointer-events:none}
.hero-title{font-size:clamp(46px,9vw,116px);line-height:.94;letter-spacing:-.03em;font-weight:500;margin:0}
.hero-title .g{color:var(--gold);font-style:italic;font-weight:400}
.hero-sub{max-width:640px;margin:30px 0 0;font-size:clamp(18px,2.2vw,23px);
  font-family:var(--serif);font-weight:340;color:#d8d3c6;line-height:1.5}
.hero-meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}
.hero-meta b{display:block;color:var(--gold-2);font-weight:500;margin-top:4px;font-size:12.5px;letter-spacing:.08em}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--text-mute);text-transform:uppercase}
.scroll-hint::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0;
  background:linear-gradient(var(--gold),transparent);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ============================================================ COMPONENTS */
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 9px;border-radius:4px;border:1px solid var(--line-2);color:var(--text-dim)}
.tag.wide{color:var(--pos);border-color:rgba(76,154,106,.45)}
.tag.narrow{color:var(--gold-2);border-color:rgba(224,189,74,.4)}
.tag.none{color:var(--text-mute)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;position:relative}
.card.soft{background:linear-gradient(180deg,var(--panel),var(--ink-2))}
.stat{font-family:var(--serif);font-size:clamp(30px,4vw,44px);color:#fff;line-height:1;font-weight:500}
.stat-l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:10px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}

/* pull panels, clean bordered cards with a subtle lit top edge (no colour bars) */
.vector{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:14px 0;position:relative}
.vector .vh{font-family:var(--sans);font-weight:700;color:#fff;font-size:16px;letter-spacing:.01em;margin-bottom:5px}
.scorecard,.gate{position:relative}
.card::before,.vector::before,.scorecard::before,.gate::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);pointer-events:none}
.v1,.v2,.v3,.v4,.v5{}

/* tables */
table.data{width:100%;border-collapse:collapse;font-size:14px;margin:20px 0}
table.data th,table.data td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
table.data th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);font-weight:500;cursor:default;white-space:nowrap}
table.data td{color:var(--text)}
table.data td.num,table.data th.num{text-align:right;font-family:var(--mono)}
table.data tr:hover td{background:rgba(255,255,255,.02)}
.sortable th[data-k]{cursor:pointer;user-select:none}
.sortable th[data-k]:hover{color:var(--gold-2)}
.sortable th.sorted::after{content:" ▾";color:var(--gold)}
.sortable th.sorted.asc::after{content:" ▴"}

/* engine funnel */
.funnel{display:flex;flex-direction:column;gap:10px;margin:30px 0}
.gate{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px;
  position:relative;transition:transform .2s,border-color .2s}
.gate:hover{border-color:var(--gold);transform:translateX(4px)}
.gate .gn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.gate h4{margin:6px 0 4px;color:#fff;font-size:20px;font-family:var(--serif);font-weight:500}
.gate .arrow{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);color:var(--line-2);font-size:16px;z-index:2}

/* moat radar + scorecards */
.scorecard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px}
.scorecard .sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sc-tk{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--gold);letter-spacing:.08em}
.sc-nm{font-family:var(--serif);font-size:22px;color:#fff;font-weight:500;line-height:1.1}
.sc-score{text-align:right}
.sc-score b{font-family:var(--serif);font-size:34px;color:#fff;font-weight:500;line-height:1}
.sc-score span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-dim);display:block;text-transform:uppercase}
.ff{height:26px;border-radius:6px;background:var(--panel-2);position:relative;margin:6px 0 2px;overflow:hidden}
.ff .range{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,rgba(63,143,134,.35),rgba(76,154,106,.5));border-radius:6px}
.ff .mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff}
.ff .mark::after{content:attr(data-l);position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;color:#fff;white-space:nowrap}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:3px 8px;border-radius:20px;
  background:var(--panel-2);color:var(--text-dim);border:1px solid var(--line)}

/* heatmap */
.hm td{font-family:var(--mono);font-size:12px;text-align:center;padding:9px 8px;border:1px solid var(--ink)}
.hm th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);padding:8px;text-align:center;font-weight:500}
.hm td.lab{text-align:left;color:var(--text);font-family:var(--sans);font-size:13px;white-space:nowrap}

/* callout */
.callout{background:linear-gradient(135deg,rgba(201,162,39,.08),rgba(168,50,45,.06));
  border:1px solid var(--line-2);border-radius:14px;padding:26px 28px;margin:30px 0}
.callout .kicker{color:var(--gold)}

/* footnote list */
ol.refs{font-size:13px;color:var(--text-dim);line-height:1.6;padding-left:22px}
ol.refs li{margin-bottom:7px}

/* disclaimer */
.disc{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:22px 26px;font-size:13px;color:var(--text-mute);line-height:1.65}

/* section header block */
.sec-h{margin-bottom:34px}
.sec-n{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
svg .axis{stroke:var(--line-2)}
svg text{font-family:var(--mono)}
.tt{position:fixed;z-index:100;pointer-events:none;background:#000;border:1px solid var(--line-2);
  border-radius:8px;padding:8px 11px;font-size:12px;color:#fff;opacity:0;transition:opacity .12s;max-width:240px;font-family:var(--sans)}
.tt .tt-t{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase}

footer{padding:70px 0 90px;border-top:1px solid var(--line);color:var(--text-mute);font-size:13px}
footer .brand{font-size:22px;margin-bottom:8px;display:inline-block}

@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .reveal{opacity:1 !important;transform:none !important}
  #topbar,.scroll-hint{display:none}
  html,body{background:var(--ink)}
  #hero{min-height:auto;padding:60px 0 40px}
  .band{padding:40px 0}
  .card,.scorecard,.gate,.callout,.vector,table,blockquote,.disc{page-break-inside:avoid}
  h2,h3{page-break-after:avoid}
  #engine,#portfolio,#names,#risk,#appendix{page-break-before:always}
}