:root{
  --ink-abyss:#0E2A47;
  --ink-deep:#143A5E;
  --sea-mid:#2E6E8E;
  --electric-teal:#17C3B2;
  --coral-entry:#FF6B4A;
  --coral-text:#C43A1E;
  --pearl:#FAF8F4;
  --mist:#E7EBEF;
  --grid-line:#C9D3DC;
  --slate:#3A4A5A;
  --rail:clamp(210px,20vw,264px);
  --gutter:clamp(20px,4vw,48px);
  --max-w:1240px;
  --step:8px;
  --prose-max:36rem;
  --font-sans:'Noto Sans SC','Source Han Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'IBM Plex Mono','Roboto Mono','JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  padding-left:var(--rail);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.75;
  color:var(--slate);
  background:var(--pearl);
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
h1,h2,h3,h4,h5{margin:0 0 .5em;color:var(--ink-abyss);font-weight:700;line-height:1.18}
h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.08;letter-spacing:-.01em;font-weight:800}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700}
h3{font-size:1.05rem;font-weight:500;padding-left:12px;border-left:2px solid var(--sea-mid)}
p{margin:0 0 1.2em}
a{color:var(--coral-text);text-underline-offset:3px}
a:hover{color:var(--ink-abyss)}
a,button,input{font-family:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--electric-teal);outline-offset:2px}
main{display:block}
#main-content{scroll-margin-top:96px}

/* ---------- layout helpers ---------- */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.prose{max-width:var(--prose-max)}
.prose p{max-width:34em}
html[data-reading="tablet"]{--prose-max:30rem}
html[data-reading="tablet"] .prose{font-size:1.04rem;line-height:1.85}
.section{padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--grid-line)}
.section--mist{background:var(--mist)}
.section--bare{border-top:0}
.section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(24px,4vw,40px)}
.section__title{margin:0;max-width:22ch}
.section__note{margin:0;font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;color:var(--sea-mid);max-width:36ch}
.eyebrow{display:inline-block;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sea-mid);margin-bottom:12px}
.mono{font-family:var(--font-mono);font-size:16px;letter-spacing:.02em}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.lift-12{margin-top:12px}
.lift-24{margin-top:24px}

/* ---------- cards ---------- */
.card{background:var(--pearl);border:1px solid var(--grid-line);border-radius:2px;padding:20px}
.card:hover{border-color:var(--coral-entry)}
.card__meta{font-family:var(--font-mono);font-size:15px;letter-spacing:.02em;color:var(--sea-mid);margin:0 0 8px}

/* ---------- media ---------- */
.media-frame{position:relative;display:block;aspect-ratio:4/3;background:var(--mist);border:1px solid var(--grid-line);border-radius:2px;overflow:hidden}
.media-frame img,.media-frame svg{width:100%;height:100%;object-fit:cover}
.media-frame::after{content:"";position:absolute;inset:8px;border:1px solid rgba(14,42,71,.14);pointer-events:none}
.media-frame--wide{aspect-ratio:16/9}
.media-frame--tall{aspect-ratio:3/4}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--ink-abyss);background:transparent;color:var(--ink-abyss);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;border-radius:2px;cursor:pointer}
.btn:hover{background:var(--ink-abyss);color:var(--pearl)}
.btn--entry{border-color:var(--coral-entry);background:var(--coral-entry);color:var(--ink-abyss)}
.btn--entry:hover{background:var(--coral-text);border-color:var(--coral-text);color:var(--pearl)}
.btn--quiet{border-color:var(--grid-line);background:var(--mist);color:var(--ink-deep)}
.btn--quiet:hover{border-color:var(--sea-mid);background:var(--pearl);color:var(--coral-text)}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--sea-mid)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li::after{content:"/";color:var(--grid-line)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--sea-mid);text-decoration:none}
.breadcrumb a:hover{color:var(--coral-text);text-decoration:underline}

/* ---------- filters ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.filter-btn{appearance:none;padding:7px 14px;border:1px solid var(--grid-line);background:var(--pearl);color:var(--slate);font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;border-radius:2px;cursor:pointer}
.filter-btn:hover{border-color:var(--coral-entry);color:var(--coral-text)}
.filter-btn[aria-pressed="true"]{border-color:var(--electric-teal);background:var(--electric-teal);color:var(--ink-abyss)}
.empty-note{margin:0;padding:14px 18px;border-left:2px solid var(--coral-entry);background:var(--mist);font-family:var(--font-mono);font-size:14px;color:var(--slate)}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0 0 0 26px;border-left:1px solid var(--ink-deep)}
.timeline__item{position:relative;padding:0 0 clamp(24px,3vw,36px)}
.timeline__item::before{content:"";position:absolute;left:-31px;top:9px;width:9px;height:9px;background:var(--mist);border:1px solid var(--grid-line);transition:background .28s ease,border-color .28s ease}
.timeline__item.is-lit::before{background:var(--coral-entry);border-color:var(--coral-entry)}
.timeline__time{display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--sea-mid);margin-bottom:4px}

/* ---------- anchor nav ---------- */
.anchor-nav{position:sticky;top:24px;font-size:14px}
.anchor-nav__link{display:block;padding:6px 0 6px 14px;border-left:2px solid transparent;color:var(--slate);text-decoration:none}
.anchor-nav__link:hover{border-left-color:var(--coral-entry);color:var(--ink-abyss)}
.anchor-nav__link[aria-current="true"]{border-left-color:var(--electric-teal);color:var(--ink-abyss);font-weight:600}

/* ---------- skip link ---------- */
.skip-link{position:fixed;top:8px;left:8px;z-index:120;transform:translateY(-200%);padding:10px 16px;background:var(--ink-abyss);color:var(--pearl);font-size:14px;text-decoration:none;border-radius:2px}
.skip-link:focus{transform:none;color:var(--pearl)}

/* ---------- header ---------- */
.site-header{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--rail);
  z-index:60;
  display:flex;
  flex-direction:column;
  background:var(--pearl);
  border-right:1px solid var(--grid-line);
}
.site-header__rule{position:relative;flex:0 0 auto;height:2px;background:var(--ink-abyss);overflow:hidden}
.site-header__progress{display:block;width:0;height:100%;background:var(--electric-teal);transition:width 120ms linear}
.site-header__inner{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(18px,3vh,34px);
  padding:26px 22px 28px;
  overflow-y:auto;
}
.brand{margin:0}
.brand__link{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand__mark{flex:0 0 auto;width:3px;height:1.9rem;background:var(--coral-entry)}
.brand__text{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1;color:var(--ink-abyss)}
.brand__sub{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--sea-mid)}
.brand__link:hover .brand__text{color:var(--coral-text)}

.nav-toggle{display:none}
.nav-toggle__bars{position:relative;flex:0 0 auto;width:16px;height:10px}
.nav-toggle__bars::before{content:"";position:absolute;left:0;top:0;width:16px;height:2px;background:currentColor;box-shadow:0 4px 0 currentColor,0 8px 0 currentColor}
.nav-toggle__label{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em}

.site-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.site-nav__item{position:relative}
.site-nav__link{position:relative;display:block;padding:9px 0 9px 16px;font-size:1rem;font-weight:600;color:var(--ink-deep);text-decoration:none}
.site-nav__link::before{content:"";position:absolute;left:0;top:50%;width:6px;height:2px;background:var(--grid-line);transform:translateY(-50%);transition:width .2s ease,background .2s ease}
.site-nav__link:hover{color:var(--coral-text)}
.site-nav__link:hover::before{width:10px;background:var(--coral-entry)}
.site-nav__link[aria-current="page"]{color:var(--ink-abyss)}
.site-nav__link[aria-current="page"]::before{width:16px;background:var(--coral-entry)}

.header-utility{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.utility-btn{appearance:none;display:flex;align-items:center;justify-content:flex-start;min-height:38px;padding:0 12px;border:1px solid var(--grid-line);background:var(--mist);color:var(--ink-deep);font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-align:left;border-radius:2px;cursor:pointer}
.utility-btn:hover{border-color:var(--sea-mid);color:var(--coral-text)}
.utility-btn[aria-pressed="true"]{border-color:var(--electric-teal);background:var(--pearl);color:var(--ink-abyss)}

.site-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;background:var(--coral-entry);border:1px solid var(--coral-entry);color:var(--ink-abyss);font-size:.95rem;font-weight:700;text-decoration:none;border-radius:2px}
.site-cta::after{content:"\2192";font-family:var(--font-mono)}
.site-cta:hover{background:var(--pearl);border-color:var(--coral-text);color:var(--coral-text)}

.search-panel{border:1px solid var(--sea-mid);background:var(--mist);padding:14px;border-radius:2px}
.search-panel__label{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--sea-mid)}
.search-panel__input{width:100%;padding:9px 10px;border:1px solid var(--grid-line);background:var(--pearl);color:var(--ink-abyss);font-size:14px;border-radius:2px}
.search-panel__list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:210px;overflow-y:auto}
.search-panel__item a{display:block;padding:6px 8px;font-size:14px;color:var(--ink-deep);text-decoration:none}
.search-panel__item a:hover{background:var(--pearl);color:var(--coral-text)}
.search-panel__empty{margin:12px 0 0;font-family:var(--font-mono);font-size:13px;color:var(--coral-text)}

/* ---------- footer ---------- */
.site-footer{margin-top:clamp(64px,9vw,120px);background:var(--ink-abyss);color:var(--mist)}
.footer__inner{width:100%;max-width:var(--max-w);margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter) 32px;display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:clamp(28px,4vw,48px)}
.footer__brand{display:flex;flex-direction:column;gap:10px}
.footer__logotype{font-size:1.6rem;font-weight:800;letter-spacing:-.01em;line-height:1;color:var(--pearl)}
.footer__tagline{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--electric-teal)}
.footer__note{margin:0;font-size:14px;line-height:1.7;color:#B8C6D3}
.footer__columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.footer__title{margin:0 0 12px;padding-top:12px;border-top:1px solid rgba(250,248,244,.22);font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--pearl)}
.footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer__list a{color:#C6D3DE;font-size:14px;text-decoration:none}
.footer__list a:hover{color:var(--coral-entry);text-decoration:underline}
.footer__list--meta li{font-size:14px;line-height:1.6;color:#C6D3DE}
.footer__legal{grid-column:1/-1;margin-top:clamp(24px,4vw,40px);padding-top:18px;border-top:1px solid rgba(250,248,244,.18);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:#93A7B8}
.footer__legal p{margin:0}

/* ---------- mobile / tablet ---------- */
@media (max-width:1100px){
  .footer__inner{grid-template-columns:1fr}
  .footer__columns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  body{padding-left:0}
  .site-header{position:sticky;top:0;width:100%;height:auto;flex-direction:column;border-right:0;border-bottom:1px solid var(--grid-line)}
  .site-header__inner{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px var(--gutter) 14px;overflow:visible}
  .brand{flex:1 1 auto;min-width:0}
  .brand__mark{height:1.5rem}
  .brand__text{font-size:1.25rem}
  .nav-toggle{order:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--ink-deep);background:var(--pearl);color:var(--ink-deep);border-radius:2px;cursor:pointer}
  .nav-toggle[aria-expanded="true"]{border-color:var(--coral-entry);color:var(--coral-text)}
  .header-utility{order:3;flex:1 1 100%;flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:0}
  .utility-btn{flex:1 1 auto;justify-content:center;min-height:36px}
  .site-nav{order:4;flex:1 1 100%;display:none;padding-top:8px;border-top:1px solid var(--grid-line)}
  .site-nav[data-open]{display:block}
  .site-nav__list{flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .site-nav__item{flex:0 0 auto}
  .site-nav__link{padding:8px 12px;font-size:.92rem;white-space:nowrap;border:1px solid var(--grid-line);background:var(--mist);color:var(--ink-deep)}
  .site-nav__link::before{display:none}
  .site-nav__link[aria-current="page"]{border-color:var(--coral-entry);background:var(--pearl);color:var(--coral-text)}
  .site-cta{order:5;flex:1 1 100%;min-height:44px}
  .search-panel{order:6;flex:1 1 100%}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-3,.col-4{grid-column:span 3}
  .col-6,.col-8{grid-column:span 6}
  .lift-12,.lift-24{margin-top:0}
  .anchor-nav{position:static;top:auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .col-3,.col-4,.col-6,.col-8{grid-column:span 2}
  .section__head{flex-direction:column;align-items:flex-start}
  .footer__columns{grid-template-columns:1fr}
  .footer__inner{padding-bottom:24px}
  .btn{width:100%}
}

/* ---------- reveal & motion ---------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 420ms cubic-bezier(.22,.61,.36,1),transform 420ms cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js .site-header__progress{transition:width 120ms linear}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1;transform:none}
  .timeline__item::before{background:var(--coral-entry);border-color:var(--coral-entry)}
  .site-header__progress{transition:none}
}