:root{
  --pitch:#0B3B2E;
  --pitch-2:#145A45;
  --signal:#F5C518;
  --red:#D7263D;
  --varblue:#6C5CE7;
  --chrome:#F4F7F5;
  --ink:#101815;
  --chalk:#DDEADF;
  --night:#1B2A41;
  --cream:#F7F1E3;
  --font-head:'Arial Narrow','Noto Sans SC','PingFang SC',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono','Noto Sans Mono CJK SC',monospace;
  --step-1:1.25rem;
  --step-2:1.5625rem;
  --step-3:1.953rem;
  --maxw:1220px;
  --pad-x:clamp(1rem,4vw,2.5rem);
  --shadow-hard:8px 8px 0 0 rgba(11,59,46,.16);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--chrome);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(16px,.35vw + 15.2px,17.5px);
  line-height:1.75;
  text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.12;
  letter-spacing:.02em;
  margin:0 0 .6em;
  color:inherit;
}

h1{ font-size:clamp(2.15rem,5.2vw,3.6rem); }
h2{ font-size:clamp(1.55rem,3.2vw,2.3rem); }
h3{ font-size:clamp(1.18rem,2vw,1.5rem); }

p{ margin:0 0 1em; }

a{ color:inherit; }

ul,ol{ margin:0 0 1em; padding-left:1.15em; }

table{ border-collapse:collapse; }

:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(11,59,46,.45);
}

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- shell ---------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed;
  top:-140px;
  left:clamp(.75rem,3vw,1.5rem);
  z-index:200;
  background:var(--signal);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  font-weight:700;
  padding:.65rem 1rem;
  text-decoration:none;
  border:2px solid var(--pitch);
  border-radius:0 0 10px 10px;
  transition:top 140ms var(--ease);
}
.skip-link:focus{ top:0; }

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  padding-block:.7rem;
  background:rgba(244,247,245,.92);
  border-bottom:1px solid var(--chalk);
  backdrop-filter:blur(10px);
}

.header-shell{
  position:relative;
  display:flex;
  align-items:center;
  gap:.9rem;
  background:var(--pitch);
  color:var(--chrome);
  border:2px solid rgba(11,59,46,.9);
  border-radius:999px;
  padding:.5rem clamp(.6rem,1.4vw,1rem);
  box-shadow:0 6px 0 -2px rgba(11,59,46,.2);
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex:0 0 auto;
  text-decoration:none;
  color:inherit;
}

.brand-mark{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  font-weight:700;
  background:var(--signal);
  color:var(--ink);
  padding:.35rem .5rem;
  border-radius:5px;
}

.brand-text{ display:flex; flex-direction:column; line-height:1.15; }

.brand-name{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--chrome);
}

.brand-tagline{
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.06em;
  color:rgba(244,247,245,.55);
}

.nav-toggle{
  display:none;
  margin-inline-start:auto;
  align-items:center;
  gap:.5rem;
  background:transparent;
  color:var(--chrome);
  border:1px solid rgba(244,247,245,.32);
  border-radius:999px;
  padding:.45rem .85rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:border-color 150ms var(--ease),color 150ms var(--ease);
}
.nav-toggle:hover{ border-color:var(--signal); color:var(--signal); }

.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  width:16px;
}
.nav-toggle__bars span{
  display:block;
  height:2px;
  width:100%;
  background:currentColor;
  transition:transform 160ms var(--ease),opacity 160ms var(--ease);
}

.site-header[data-open] .nav-toggle__bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.site-header[data-open] .nav-toggle__bars span:nth-child(2){ opacity:0; }
.site-header[data-open] .nav-toggle__bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.site-nav{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:.4rem;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:.12rem;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-link{
  display:block;
  padding:.45rem .7rem;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.9rem;
  color:rgba(244,247,245,.78);
  text-decoration:none;
  white-space:nowrap;
  transition:color 150ms var(--ease),background-color 150ms var(--ease),border-color 150ms var(--ease);
}
.nav-link:hover{
  color:var(--signal);
  background:rgba(245,197,24,.12);
  border-color:rgba(245,197,24,.4);
}
.nav-link[aria-current="page"]{
  background:var(--signal);
  border-color:var(--signal);
  color:var(--ink);
  font-weight:700;
}

.nav-cta{
  margin-inline-start:.4rem;
  padding:.42rem .95rem;
  border:2px solid rgba(245,197,24,.7);
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--signal);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease);
}
.nav-cta:hover{
  background:var(--signal);
  border-color:var(--signal);
  color:var(--ink);
}

@media (max-width:1100px){
  .brand-tagline{ display:none; }
  .nav-link{ padding:.45rem .55rem; font-size:.86rem; }
}

@media (max-width:980px){
  .nav-toggle{ display:inline-flex; }

  .site-nav{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + .65rem);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.4rem;
    margin:0;
    padding:.85rem;
    background:var(--pitch);
    border:2px solid var(--signal);
    border-radius:20px;
    box-shadow:0 16px 0 -8px rgba(11,59,46,.3);
  }

  .site-header[data-open] .site-nav{ display:flex; }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
  }

  .nav-link{
    padding:.75rem .9rem;
    border-radius:12px;
    font-size:.98rem;
  }

  .nav-cta{
    margin:.45rem 0 0;
    text-align:center;
    padding:.7rem 1rem;
  }
}

@media (max-width:520px){
  .header-shell{ border-radius:18px; }
  .brand-name{ font-size:.98rem; }
}

/* ---------- footer ---------- */
.site-footer{
  margin-top:clamp(3rem,8vw,6rem);
  background:var(--pitch);
  color:var(--chrome);
}

.footer-stripe{
  height:6px;
  background:linear-gradient(90deg,var(--signal) 0 62%,var(--pitch-2) 62% 88%,var(--red) 88% 94%,var(--varblue) 94% 100%);
}

.footer-shell{ padding-block:clamp(2.3rem,5vw,4rem) 1.6rem; }

.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.5fr;
  gap:clamp(1.6rem,3vw,3rem);
}

.footer-brand__mark{
  font-size:.7rem;
  letter-spacing:.12em;
  color:var(--signal);
  margin:0 0 .55rem;
}

.footer-brand__name{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:.02em;
  margin:0 0 .35rem;
  color:var(--chrome);
}

.footer-brand__tagline{
  font-size:.85rem;
  color:rgba(244,247,245,.62);
  margin:0;
}

.footer-note{
  margin:1rem 0 0;
  max-width:24ch;
  font-size:.78rem;
  line-height:1.7;
  color:rgba(244,247,245,.48);
}

.footer-col__title{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  margin:0 0 .9rem;
}

.footer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.footer-list a{
  font-size:.9rem;
  color:rgba(244,247,245,.8);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color 140ms var(--ease),border-color 140ms var(--ease);
}
.footer-list a:hover{
  color:var(--signal);
  border-bottom-color:var(--signal);
}

.footer-contact{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.footer-contact li{
  display:grid;
  grid-template-columns:3.4rem 1fr;
  gap:.6rem;
  align-items:baseline;
}

.footer-contact__k{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:rgba(244,247,245,.45);
}

.footer-contact__v{
  font-size:.85rem;
  color:rgba(244,247,245,.86);
  word-break:break-word;
}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.6rem 1.4rem;
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.1rem;
  border-top:1px solid rgba(244,247,245,.16);
  font-size:.76rem;
  color:rgba(244,247,245,.5);
}
.footer-base p{ margin:0; }

.footer-icp{
  font-family:var(--font-mono);
  letter-spacing:.06em;
  color:rgba(244,247,245,.68);
}

@media (max-width:960px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-base{ flex-direction:column; }
}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  z-index:150;
  pointer-events:none;
  background:transparent;
}

.scroll-progress__bar{
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--signal) 0 70%,var(--varblue) 100%);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.72rem 1.25rem;
  border:2px solid var(--pitch);
  border-radius:999px;
  background:var(--pitch);
  color:var(--chrome);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.94rem;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:4px 4px 0 0 rgba(11,59,46,.2);
  transition:transform 140ms var(--ease),box-shadow 140ms var(--ease),background-color 140ms var(--ease),color 140ms var(--ease),border-color 140ms var(--ease);
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 0 rgba(11,59,46,.24); }
.btn:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 0 rgba(11,59,46,.22); }

.btn--signal{
  background:var(--signal);
  border-color:var(--pitch);
  color:var(--ink);
}

.btn--ghost{
  background:transparent;
  color:var(--pitch);
  box-shadow:none;
}
.btn--ghost:hover{
  background:var(--chalk);
  transform:none;
  box-shadow:none;
}

/* ---------- breadcrumb ---------- */
.breadcrumb{ padding-block:1.1rem .3rem; }

.breadcrumb__list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin:0;
  padding:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:#5b6d66;
}

.breadcrumb__list li{ display:flex; align-items:center; gap:.45rem; }
.breadcrumb__list li + li::before{ content:"/"; color:#9fb3aa; }

.breadcrumb__list a{
  color:var(--pitch-2);
  text-decoration:none;
  border-bottom:1px solid var(--chalk);
  transition:color 140ms var(--ease),border-color 140ms var(--ease);
}
.breadcrumb__list a:hover{ color:var(--ink); border-bottom-color:var(--signal); }

.breadcrumb__list [aria-current="page"]{ color:var(--ink); font-weight:700; }

/* ---------- text blocks ---------- */
.page-head{ padding-block:clamp(1.6rem,3vw,2.6rem) clamp(.8rem,2vw,1.2rem); }

.lede{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.7;
  max-width:32em;
  color:#2c3c36;
}

.prose{
  max-width:34em;
  font-size:1.02rem;
  line-height:1.78;
  color:#21302a;
}
.prose h2,.prose h3{ color:var(--ink); }
.prose ul,.prose ol{ padding-left:1.2em; }
.prose li{ margin-bottom:.4em; }
.prose strong{ font-weight:700; }

.mono-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pitch-2);
  margin:0 0 .5rem;
}

.index-num{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.04em;
  background:var(--pitch);
  color:var(--signal);
  padding:.14rem .45rem;
  border-radius:4px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  padding:.18rem .5rem;
  border:1px solid currentColor;
  border-radius:4px;
  color:var(--pitch-2);
}
.tag--var{ color:var(--varblue); }
.tag--red{ color:var(--red); }
.tag--signal{ color:#7a5d00; background:rgba(245,197,24,.2); border-color:rgba(245,197,24,.6); }

/* ---------- sections & grid ---------- */
.section{ padding-block:clamp(2.4rem,6vw,5rem); }
.section--chalk{ background:var(--chalk); }
.section--deep{ background:var(--pitch); color:var(--chrome); }
.section--night{ background:var(--night); color:var(--chrome); }
.section--cream{ background:var(--cream); }

.grid{
  display:grid;
  gap:clamp(1.2rem,2.6vw,2.4rem);
}
.grid--7-5{ grid-template-columns:7fr 5fr; }
.grid--4-8{ grid-template-columns:4fr 8fr; }

@media (max-width:900px){
  .grid--7-5,.grid--4-8{ grid-template-columns:1fr; }
}

.rule{
  height:3px;
  border:0;
  margin:0;
  background:var(--pitch);
}
.rule--dashed{
  height:0;
  border-top:2px dashed var(--chalk);
  background:none;
}
.section--deep .rule,.section--night .rule{ background:var(--signal); }

/* ---------- media frames ---------- */
.media-frame{
  position:relative;
  display:block;
  margin:0;
  border:3px solid var(--pitch);
  background:var(--chalk);
  overflow:hidden;
  box-shadow:var(--shadow-hard);
}
.media-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(11,59,46,.08) 0 12px,rgba(11,59,46,0) 12px 24px);
  pointer-events:none;
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame--16-9{ aspect-ratio:16 / 9; }
.media-frame--4-3{ aspect-ratio:4 / 3; }
.media-frame--3-4{ aspect-ratio:3 / 4; }
.media-frame--1-1{ aspect-ratio:1 / 1; }
.media-frame--tilt{ transform:rotate(-1.2deg); }

.media-frame__tag{
  position:absolute;
  left:0;
  bottom:0;
  z-index:1;
  background:var(--signal);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.08em;
  padding:.35rem .6rem;
}

/* ---------- table ---------- */
.table{
  width:100%;
  font-size:.9rem;
  border-collapse:collapse;
}
.table th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--chalk);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.08em;
  text-align:left;
  color:var(--pitch);
  padding:.6rem .7rem;
  border-bottom:2px solid var(--pitch);
}
.table td{
  padding:.6rem .7rem;
  border-bottom:1px solid var(--chalk);
  vertical-align:top;
}
.table tbody tr:hover td{ background:rgba(221,234,223,.5); }
.table .num,.table td.num,.table th.num{
  text-align:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ---------- details ---------- */
details{
  border-bottom:1px solid var(--chalk);
  padding:.85rem 0;
}
summary{
  cursor:pointer;
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.02em;
  font-size:1.02rem;
}
summary::marker{ color:var(--signal); }
details > *:not(summary){ margin-top:.6rem; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}