/* ChronoLanes — shared shell: header, topic switcher, lang toggle, hub cards, footer */
:root{
  --bg:#0A0E16;
  --bg-1:#0D1220;
  --panel:#121a2b;
  --panel-2:#151f33;
  --hair:#232f47;
  --text:#EAE4D3;
  --text-dim:#93A0B8;
  --text-faint:#5C6883;
  --gold:#C9A227;
  --gold-2:#E4C158;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, #16203a 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Source Serif 4', Georgia, serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,.display{ font-family:'Spectral', serif; font-weight:600; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- SHELL HEADER ---------- */
.cl-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,14,22,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.cl-header-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding:12px 20px;
}
.cl-logo{
  display:flex; align-items:center; gap:8px;
  font-family:'Spectral', serif; font-weight:700; font-size:17px;
  color:var(--text); white-space:nowrap; flex:none;
}
.cl-logo .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px 1px rgba(201,162,39,.6); }
.cl-logo-mark{ flex:none; display:block; }
.cl-topics{
  display:flex; gap:4px; flex-wrap:wrap; flex:1; min-width:0;
  overflow-x:auto;
}
.cl-topic{
  display:flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--text-faint); border:1px solid transparent;
  white-space:nowrap; transition:all .15s ease;
}
.cl-topic .sw{ width:7px; height:7px; border-radius:50%; background:var(--topic-color, var(--text-faint)); flex:none; }
.cl-topic:hover{ color:var(--text); border-color:var(--hair); }
.cl-topic.is-active{ color:var(--text); background:var(--panel); border-color:var(--topic-color); }
.cl-topic.is-soon{ opacity:.55; cursor:default; }
.cl-topic.is-soon:hover{ color:var(--text-faint); border-color:transparent; }
.cl-lang{
  display:flex; align-items:center; gap:2px; flex:none;
  border:1px solid var(--hair); border-radius:8px; overflow:hidden;
}
.cl-lang a{
  padding:6px 10px; font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  color:var(--text-faint); transition:all .15s ease;
}
.cl-lang a.is-active{ background:var(--gold); color:#0d0f14; font-weight:600; }
.cl-lang a:not(.is-active):hover{ color:var(--text); background:var(--panel); }

/* ---------- SOON BADGE ---------- */
.cl-soon-badge{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--bg); background:var(--gold-2);
  padding:2px 7px; border-radius:5px; margin-left:6px; vertical-align:2px;
}

/* ---------- HUB PAGE ---------- */
.cl-hub-hero{
  max-width:820px; margin:0 auto; padding:64px 24px 34px; text-align:center;
}
.cl-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.cl-eyebrow::before, .cl-eyebrow::after{ content:"—"; color:var(--text-faint); margin:0 10px; }
.cl-hub-hero h1{ font-size:clamp(28px,5vw,44px); line-height:1.15; margin:0 0 16px; }
.cl-hub-hero h1 em{ color:var(--gold-2); font-style:italic; }
.cl-hub-hero p{ font-size:16px; line-height:1.7; color:var(--text-dim); max-width:600px; margin:0 auto; }

.cl-hub-stats{
  max-width:820px; margin:0 auto 8px; padding:0 24px 28px;
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px;
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--text-dim); letter-spacing:.04em;
}
.cl-hub-stats b{ color:var(--gold-2); font-weight:600; }

.cl-grid{
  max-width:1100px; margin:0 auto; padding:10px 20px 48px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px;
}
.cl-card{
  display:block; position:relative; border-radius:16px;
  border:1px solid var(--hair); background:var(--panel);
  padding:26px 24px; transition:all .2s ease; overflow:hidden;
}
.cl-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--card-color, var(--gold));
}
.cl-card:hover{ border-color:var(--card-color, var(--gold)); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.cl-card.is-soon{ opacity:.62; }
.cl-card.is-soon:hover{ transform:none; box-shadow:none; border-color:var(--hair); }
.cl-card .sw{ width:10px; height:10px; border-radius:50%; background:var(--card-color); margin-bottom:14px; box-shadow:0 0 0 5px color-mix(in srgb, var(--card-color) 20%, transparent); }
.cl-card h2{ font-size:20px; margin:0 0 8px; color:var(--text); }
.cl-card p{ font-size:14px; line-height:1.6; color:var(--text-dim); margin:0; }

/* ---------- HUB: about / why ---------- */
.cl-about{
  max-width:1100px; margin:0 auto; padding:8px 20px 20px;
}
.cl-about-head{ text-align:center; margin:0 auto 28px; max-width:640px; }
.cl-about-head h2{
  font-size:clamp(22px,3.4vw,30px); margin:0 0 10px; line-height:1.2;
}
.cl-about-head p{
  font-size:15.5px; line-height:1.7; color:var(--text-dim); margin:0;
}
.cl-feat-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px;
}
.cl-feat{
  border:1px solid var(--hair); background:var(--panel);
  border-radius:16px; padding:22px 22px 24px;
}
.cl-feat .n{
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  letter-spacing:.16em; color:var(--gold); margin-bottom:12px;
}
.cl-feat h3{ font-size:17.5px; margin:0 0 8px; line-height:1.3; }
.cl-feat p{ font-size:14px; line-height:1.65; color:var(--text-dim); margin:0; }

.cl-howto{
  margin-top:36px; padding-top:28px; border-top:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.cl-step .n{
  font-family:'IBM Plex Mono', monospace; font-size:11px;
  letter-spacing:.16em; color:var(--gold); margin-bottom:10px;
}
.cl-step h3{ font-size:16px; margin:0 0 6px; }
.cl-step p{ font-size:13.5px; line-height:1.6; color:var(--text-dim); margin:0; }

@media (max-width:720px){
  .cl-howto{ grid-template-columns:1fr; gap:20px; }
}

/* ---------- STUB / COMING SOON PAGE ---------- */
.cl-stub{
  max-width:640px; margin:0 auto; padding:110px 24px 140px; text-align:center;
}
.cl-stub .sw{ width:14px;height:14px;border-radius:50%; margin:0 auto 22px; background:var(--card-color); box-shadow:0 0 0 8px color-mix(in srgb, var(--card-color) 18%, transparent); }
.cl-stub h1{ font-size:clamp(26px,4.5vw,38px); margin:0 0 14px; }
.cl-stub p{ font-size:15.5px; line-height:1.7; color:var(--text-dim); margin:0 0 28px; }
.cl-stub .back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  color:var(--text-dim); border:1px solid var(--hair); border-radius:999px;
  padding:9px 18px; transition:all .15s ease;
}
.cl-stub .back:hover{ color:var(--text); border-color:var(--text-faint); }

/* ---------- STATIC CRAWLABLE INDEX (collapsed by default, real content for search engines & no-JS) ---------- */
.cl-static-index{
  max-width:820px; margin:40px auto 0; padding:0 20px;
}
.cl-static-index summary{
  cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  color:var(--text-faint); padding:10px 0; border-top:1px solid var(--hair);
}
.cl-static-index summary:hover{ color:var(--text-dim); }
.cl-static-content{ padding:20px 0 40px; }
.cl-static-content h2{
  font-size:16px; color:var(--gold-2); margin:28px 0 10px;
  border-bottom:1px solid var(--hair); padding-bottom:6px;
}
.cl-static-content h2:first-child{ margin-top:0; }
.cl-static-content article{ margin:0 0 14px; }
.cl-static-content h3{
  font-size:13.5px; font-weight:600; color:var(--text-dim); margin:0 0 3px; line-height:1.4;
}
.cl-static-content p{
  font-size:12.5px; line-height:1.55; color:var(--text-faint); margin:2px 0;
}
.cl-static-content p b{ color:var(--text-dim); font-weight:600; }

/* ---------- FOOTER ---------- */
.cl-footer{
  max-width:920px; margin:0 auto; padding:30px 24px 70px; text-align:center;
  color:var(--text-faint); font-size:12px; line-height:1.8;
  font-family:'IBM Plex Mono', monospace; border-top:1px solid var(--hair); margin-top:40px;
}
.cl-footer a{ color:var(--text-dim); }
.cl-footer a:hover{ color:var(--gold-2); }

@media (max-width:640px){
  .cl-header-inner{ flex-wrap:wrap; }
  .cl-topics{ order:3; width:100%; }
  .cl-logo{ order:1; }
  .cl-lang{ order:2; margin-left:auto; }
}