/* ===== reset ===== */
*,
*::before,
*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
h1,h2,h3,h4{text-wrap:balance}

/* ===== tokens ===== */
:root{
  --ink-950:#08120F;
  --ink-850:#0F1F1A;
  --teal-700:#16473C;
  --cyan-400:#3DF2D2;
  --cyan-700:#0B6B5C;
  --amber-500:#F2B23C;
  --amber-100:#FFE6B8;
  --paper-100:#F4EFE4;
  --paper-300:#DED3BE;
  --moss-400:#6E8E7F;
  --slate-200:#C9D6D0;

  --line-dark:rgba(110,142,127,.32);
  --line-dark-soft:rgba(110,142,127,.18);
  --line-light:#DED3BE;

  --font-display:"Barlow Condensed","Oswald","Noto Sans SC","PingFang SC",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","Roboto Mono",ui-monospace,"SFMono-Regular",monospace;

  --shell:1320px;
  --pad:clamp(16px,3vw,40px);
  --rail-w:clamp(196px,17vw,248px);
  --radius:18px;
  --focus-ring:var(--cyan-400);
}

/* ===== base ===== */
body{
  min-height:100vh;
  background-color:var(--ink-950);
  background-image:radial-gradient(1100px 620px at 84% -14%,rgba(22,71,60,.55),transparent 68%);
  background-repeat:no-repeat;
  color:var(--slate-200);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cyan-400);color:var(--ink-950)}
a{
  color:var(--cyan-400);
  text-decoration:underline;
  text-decoration-color:rgba(61,242,210,.4);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .18s ease-out,text-decoration-color .18s ease-out;
}
a:hover{text-decoration-color:var(--cyan-400)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:6px}

/* ===== skip link ===== */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:300;
  padding:10px 18px;
  border-radius:999px;
  background:var(--cyan-400);
  color:var(--ink-950);
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transform:translateY(-180%);
  transition:transform .18s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible{transform:none;text-decoration:none}

/* ===== header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background-color:var(--ink-850);
  background-image:repeating-linear-gradient(90deg,rgba(110,142,127,.09) 0 1px,transparent 1px 72px);
  border-bottom:1px solid var(--line-dark);
  color:var(--slate-200);
}
.header-shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  align-items:stretch;
}
.header-rail{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 20px 16px 0;
  border-right:1px solid var(--line-dark);
  background-image:linear-gradient(180deg,rgba(22,71,60,.5),rgba(15,31,26,0) 82%);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--paper-100);
}
.brand__mark{
  flex:0 0 auto;
  padding:3px 9px 4px;
  border:1px solid var(--teal-700);
  border-radius:10px;
  background:rgba(61,242,210,.08);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.1;
  color:var(--cyan-400);
  transition:border-color .18s ease-out,background-color .18s ease-out;
}
.brand:hover .brand__mark{border-color:var(--cyan-400);background:rgba(61,242,210,.16)}
.brand:hover{text-decoration:none}
.brand__text{display:flex;flex-direction:column;gap:2px}
.brand__name{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--paper-100)}
.brand__line{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--moss-400);
}
.rail-season{
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.6;
  color:var(--moss-400);
}
.version{position:relative;margin-top:auto}
.version__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border:1px solid rgba(242,178,60,.55);
  border-radius:999px;
  background:rgba(242,178,60,.1);
  color:var(--amber-500);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:11.5px;
  letter-spacing:.06em;
  cursor:pointer;
  transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out;
}
.version__btn:hover{background:rgba(242,178,60,.22)}
.version__btn[aria-expanded="true"]{background:var(--amber-500);border-color:var(--amber-500);color:var(--ink-950)}
.version__panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:120;
  width:min(292px,72vw);
  padding:16px;
  border:1px solid var(--line-dark);
  border-top:2px solid var(--cyan-400);
  border-radius:14px;
  background:var(--ink-850);
  box-shadow:0 22px 48px rgba(0,0,0,.5);
}
.version__title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--amber-500);
  text-transform:uppercase;
}
.version__list{display:grid;gap:6px;margin-top:10px}
.version__list li{
  padding-left:14px;
  position:relative;
  font-size:13px;
  line-height:1.6;
  color:var(--slate-200);
}
.version__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan-400);
}
.version__link{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  color:var(--cyan-400);
  text-decoration:none;
}
.version__link:hover{text-decoration:underline}
.header-main{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  padding-left:clamp(14px,2vw,26px);
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0 10px;
  border-bottom:1px solid var(--line-dark-soft);
}
.header-note{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--moss-400);
}
.header-note::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--cyan-400);
}
.header-actions{display:flex;align-items:center;gap:10px}
.header-cta{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border-radius:999px;
  background:var(--amber-500);
  color:var(--ink-950);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  text-decoration:none;
  transition:background-color .18s ease-out,box-shadow .18s ease-out;
}
.header-cta:hover{background:var(--amber-100);text-decoration:none;box-shadow:0 0 0 4px rgba(242,178,60,.16)}
.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid var(--moss-400);
  border-radius:999px;
  background:transparent;
  color:var(--slate-200);
  font-size:13px;
  cursor:pointer;
  transition:border-color .18s ease-out,color .18s ease-out;
}
.nav-toggle:hover{border-color:var(--cyan-400);color:var(--cyan-400)}
.nav-toggle__bars{position:relative;display:inline-block;width:16px;height:10px}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1.5px;
  background:currentColor;
  transition:top .2s ease-out,transform .2s ease-out;
}
.nav-toggle__bars::before{top:1px}
.nav-toggle__bars::after{top:7px}
.site-header[data-open] .nav-toggle__bars::before{top:4px;transform:rotate(45deg)}
.site-header[data-open] .nav-toggle__bars::after{top:4px;transform:rotate(-45deg)}
.header-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:8px 0 12px;
}
.site-nav{min-width:0}
.nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.nav-link{
  position:relative;
  display:block;
  padding:8px 12px;
  border-radius:9px;
  color:var(--slate-200);
  font-size:14px;
  letter-spacing:.01em;
  text-decoration:none;
  transition:color .18s ease-out,background-color .18s ease-out;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:3px;
  height:2px;
  background:var(--cyan-400);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .18s ease-out;
}
.nav-link:hover{color:var(--cyan-400);background:rgba(61,242,210,.07);text-decoration:none}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{color:var(--cyan-400);font-weight:600}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.search-entry{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:clamp(240px,27vw,352px);
  padding:8px 14px;
  border:1px solid var(--line-dark);
  border-radius:999px;
  background:rgba(8,18,15,.5);
  color:var(--moss-400);
  font-size:13px;
  text-decoration:none;
  transition:border-color .18s ease-out,color .18s ease-out,background-color .18s ease-out;
}
.search-entry:hover{
  border-color:var(--cyan-400);
  color:var(--slate-200);
  background:rgba(61,242,210,.07);
  text-decoration:none;
}
.search-entry__icon{
  position:relative;
  flex:0 0 auto;
  width:12px;
  height:12px;
  border:1.5px solid currentColor;
  border-radius:50%;
}
.search-entry__icon::after{
  content:"";
  position:absolute;
  right:-4px;
  bottom:-3px;
  width:6px;
  height:1.5px;
  background:currentColor;
  transform:rotate(45deg);
  transform-origin:0 50%;
}
.search-entry__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.scroll-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  overflow:hidden;
}
.scroll-progress__bar{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--cyan-400),var(--amber-500));
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* ===== footer ===== */
.site-footer{
  margin-top:clamp(48px,8vw,96px);
  background-color:var(--ink-950);
  background-image:radial-gradient(900px 420px at 12% 0%,rgba(22,71,60,.45),transparent 70%);
  background-repeat:no-repeat;
  border-top:1px solid var(--line-dark);
  color:var(--slate-200);
}
.footer-band{
  height:16px;
  border-bottom:1px solid var(--line-dark-soft);
  background-image:repeating-linear-gradient(90deg,var(--moss-400) 0 1px,transparent 1px 26px);
  opacity:.34;
}
.footer-shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:clamp(32px,5vw,58px) var(--pad) clamp(20px,3vw,28px);
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(260px,.92fr) minmax(0,1.5fr);
  gap:clamp(28px,4vw,72px);
}
.footer-wordmark{
  font-family:var(--font-display);
  font-size:clamp(30px,4.6vw,52px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--paper-100);
}
.footer-signoff{
  margin-top:10px;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--moss-400);
}
.contact-list{
  display:grid;
  gap:8px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line-dark);
}
.contact-list__row{display:flex;align-items:baseline;gap:10px}
.contact-list__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--amber-500);
  min-width:44px;
}
.contact-list__value{font-size:13.5px;line-height:1.6;color:var(--slate-200)}
.footer-hours{
  margin-top:12px;
  font-size:12px;
  line-height:1.65;
  color:var(--moss-400);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  align-content:start;
}
.footer-col__title{
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line-dark);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--paper-300);
}
.footer-links{display:grid;gap:10px}
.footer-link{
  color:var(--slate-200);
  font-size:14.5px;
  text-decoration:none;
  transition:color .18s ease-out;
}
.footer-link:hover{color:var(--cyan-400);text-decoration:none}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 24px;
  margin-top:clamp(28px,4vw,48px);
  padding-top:18px;
  border-top:1px solid var(--line-dark);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--moss-400);
}
.footer-legal,.footer-version{margin:0}

/* ===== layout ===== */
.container{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding-inline:var(--pad);
}
.section{padding-block:clamp(40px,6vw,88px)}
.section__head{display:grid;gap:14px;max-width:72ch}
.section__eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--cyan-400);
}
.section__title{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,48px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.06;
  color:var(--paper-100);
}
.section__lead{
  max-width:62ch;
  font-size:17px;
  line-height:1.78;
  color:var(--slate-200);
}
.paper-zone{
  background:var(--paper-100);
  color:var(--ink-950);
  border-block:1px solid var(--line-light);
}
.paper-zone a{color:var(--cyan-700);text-decoration-color:rgba(11,107,92,.45)}
.paper-zone a:hover{text-decoration-color:var(--cyan-700)}
.paper-zone .section__title{color:var(--ink-950)}
.paper-zone .section__lead{color:var(--ink-950)}
.paper-zone .section__eyebrow{color:var(--cyan-700)}
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--stagger > *:nth-child(even){transform:translateY(clamp(20px,4vw,56px))}

/* ===== breadcrumb ===== */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-block:18px 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--moss-400);
}
.breadcrumb__link{color:var(--moss-400);text-decoration:none}
.breadcrumb__link:hover{color:var(--cyan-400);text-decoration:none}
.breadcrumb__sep{color:var(--teal-700)}

/* ===== buttons & labels ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out;
}
.btn:hover{text-decoration:none}
.btn--amber{background:var(--amber-500);color:var(--ink-950)}
.btn--amber:hover{background:var(--amber-100)}
.btn--cyan{background:var(--cyan-400);color:var(--ink-950)}
.btn--cyan:hover{background:#77f7e0}
.btn--ghost{border-color:var(--moss-400);background:transparent;color:var(--slate-200)}
.btn--ghost:hover{border-color:var(--cyan-400);color:var(--cyan-400)}
.label-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.12em;
  color:var(--cyan-400);
}
.label-pill--amber{color:var(--amber-500)}

/* ===== cards & readouts ===== */
.data-readout{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(22px,3vw,36px);
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--cyan-400);
}
.card{
  position:relative;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background:var(--ink-850);
  transition:border-color .18s ease-out,transform .18s ease-out;
}
.card::before{
  content:"";
  position:absolute;
  left:-1px;
  top:18px;
  width:2px;
  height:34px;
  background:var(--cyan-400);
  opacity:.6;
}
.card:hover{border-color:var(--cyan-400)}
.card__title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--paper-100);
}
.card__meta{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--moss-400);
}
.card__text{margin-top:12px;font-size:15px;line-height:1.75;color:var(--slate-200)}

/* ===== media ===== */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  background-color:var(--ink-850);
  background-image:
    repeating-linear-gradient(90deg,rgba(110,142,127,.14) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(110,142,127,.1) 0 1px,transparent 1px 48px);
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--portrait{aspect-ratio:3/4}
.media-frame__caption{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(8,18,15,.78);
  color:var(--slate-200);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
}

/* ===== tabs ===== */
.tabs{display:grid;gap:18px}
.tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line-dark);
}
.tabs__tab{
  padding:8px 14px;
  border:1px solid var(--line-dark);
  border-radius:999px;
  background:transparent;
  color:var(--moss-400);
  font-size:14px;
  cursor:pointer;
  transition:color .18s ease-out,background-color .18s ease-out,border-color .18s ease-out;
}
.tabs__tab:hover{color:var(--cyan-400);border-color:var(--moss-400)}
.tabs__tab[aria-selected="true"]{
  background:var(--cyan-400);
  border-color:var(--cyan-400);
  color:var(--ink-950);
  font-weight:600;
}
.tabs__panel{padding-top:4px}
.tabs__panel[hidden]{display:none}

/* ===== reveal ===== */
.has-reveal [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .48s ease-out,transform .48s ease-out;
}
.has-reveal [data-reveal].is-visible{opacity:1;transform:none}

/* ===== responsive ===== */
@media (max-width:1080px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .header-shell{grid-template-columns:minmax(0,1fr)}
  .header-rail{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-right:0;
    border-bottom:1px solid var(--line-dark);
    background-image:none;
  }
  .rail-season{display:none}
  .version{margin-top:0}
  .version__panel{left:auto;right:0;width:min(280px,84vw)}
  .header-main{padding-left:0}
  .header-top{padding:10px 0;border-bottom:0}
  .header-note{display:none}
  .nav-toggle{display:inline-flex}
  .header-bottom{flex-direction:column;align-items:stretch;gap:10px;padding:0 0 12px}
  .search-entry{display:none}
  .site-nav{display:none}
  .site-nav[data-open]{
    display:block;
    animation:nav-drop .24s ease-out;
  }
  @keyframes nav-drop{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:none}
  }
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-link{
    padding:12px;
    border-bottom:1px solid var(--line-dark-soft);
    border-radius:0;
    font-size:15px;
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{background:rgba(61,242,210,.08);border-radius:8px}
  .nav-list__item:last-child .nav-link{border-bottom:0}
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .grid--stagger > *:nth-child(even){transform:none}
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .header-cta{padding:7px 12px;font-size:12px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ===== motion & focus preferences ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .has-reveal [data-reveal]{opacity:1;transform:none}
  .site-nav[data-open]{animation:none}
}