:root{
  --ink:#0B1B2B;
  --indigo:#1B1F45;
  --teal:#0E2F33;
  --wine:#6E1F35;
  --cyan:#35E0D6;
  --cyan-deep:#0F7C77;
  --amber:#F2B33D;
  --cloud:#F4F7F9;
  --text-dark:#101820;
  --muted:#8CA0B3;
  --line:#DDE7EC;
  --rose:#E8A7B8;
  --shell:1120px;
  --cut:18px;
  --rail-w:124px;
  --font-display:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --dur:180ms;
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--cloud);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
main{display:block}
main:focus{outline:none}
h1,h2,h3,h4,h5{
  margin:0 0 .6em;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.04em;
  color:var(--cloud);
}
h1{font-size:clamp(32px,6vw,56px)}
h2{font-size:clamp(23px,3.6vw,34px)}
h3{font-size:clamp(18px,2.4vw,22px)}
h4{font-size:17px}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--amber)}
strong,b{font-weight:800;color:var(--amber)}
b{font-family:var(--font-mono)}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.panel :focus-visible,.quick-rail :focus-visible,.media-frame :focus-visible{outline-offset:-2px}

/* ---------- shell ---------- */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 22px}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:50%;top:-70px;transform:translateX(-50%);
  z-index:200;background:var(--cyan);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.1em;
  padding:10px 20px;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:8px;color:var(--ink)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--ink);
  border-bottom:1px solid rgba(53,224,214,.18);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.site-header[data-compact]{
  border-bottom-color:rgba(53,224,214,.38);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.95);
}
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--cyan),var(--amber));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 90ms linear;
  z-index:6;pointer-events:none;
}
.header-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:
    "meta brand actions"
    "nav nav nav";
  align-items:center;
  padding-top:16px;padding-bottom:8px;
  row-gap:2px;
}
.header-bar__meta{
  grid-area:meta;
  display:flex;align-items:center;gap:14px;
  margin:0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--muted);
}
.header-bar__edition{white-space:nowrap}
.header-bar__edition b{color:var(--amber);font-size:15px;letter-spacing:0}
.header-bar__region{white-space:nowrap;color:rgba(140,160,179,.75)}
.brand{
  grid-area:brand;justify-self:center;
  display:flex;align-items:center;gap:12px;
  color:var(--cloud);
  padding:2px 8px;
}
.brand:hover{color:var(--cloud)}
.brand__mark{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;line-height:1;
  color:var(--cyan);border:1px solid rgba(53,224,214,.5);
  padding:6px 8px 5px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.brand__text{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.brand__name{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(21px,3vw,29px);letter-spacing:.16em;line-height:1.1;
  transition:color var(--dur) var(--ease);
}
.brand:hover .brand__name{color:var(--cyan)}
.brand__tagline{font-size:12.5px;letter-spacing:.18em;color:var(--muted);line-height:1.2}
.header-bar__actions{
  grid-area:actions;justify-self:end;
  display:flex;align-items:center;gap:10px;
}
.site-nav{
  grid-area:nav;
  position:relative;
  margin-top:12px;
  padding:9px 0 11px;
  border-top:1px solid rgba(140,160,179,.18);
}
.site-nav__list{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:2px 4px;
}
.site-nav__link{
  display:inline-block;
  padding:8px 14px;
  color:var(--cloud);
  font-family:var(--font-display);font-weight:700;
  font-size:15px;letter-spacing:.09em;line-height:1.2;
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.site-nav__link:hover{color:var(--cyan);border-bottom-color:rgba(53,224,214,.6)}
.site-nav__link[aria-current="page"]{color:var(--cyan);border-bottom-color:var(--cyan)}
.site-nav__utility{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;gap:16px;
}
.site-nav__util-link{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;
  color:var(--muted);
  transition:color var(--dur) var(--ease);
}
.site-nav__util-link:hover{color:var(--amber)}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  background:transparent;
  border:1px solid rgba(53,224,214,.45);
  color:var(--cyan);
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.14em;
  padding:9px 12px;
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav-toggle:hover{background:rgba(53,224,214,.12);border-color:var(--cyan)}
.nav-toggle__bars{position:relative;display:block;width:16px;height:2px;background:currentColor;transition:background var(--dur) var(--ease)}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
  transition:transform var(--dur) var(--ease),top var(--dur) var(--ease);
}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

/* 紧凑单行（仅桌面/平板） */
@media (min-width:881px){
  .site-header[data-compact] .header-bar{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"brand nav actions";
    padding-top:8px;padding-bottom:8px;
    column-gap:20px;row-gap:0;
  }
  .site-header[data-compact] .header-bar__meta{display:none}
  .site-header[data-compact] .brand{justify-self:start;padding-left:0;gap:9px}
  .site-header[data-compact] .brand__tagline{display:none}
  .site-header[data-compact] .brand__name{font-size:20px;letter-spacing:.13em}
  .site-header[data-compact] .brand__mark{font-size:11px;padding:5px 7px 4px}
  .site-header[data-compact] .site-nav{
    grid-area:nav;margin-top:0;padding:0;
    border-top:0;justify-self:center;
  }
  .site-header[data-compact] .site-nav__list{gap:0 2px}
  .site-header[data-compact] .site-nav__link{padding:6px 11px;font-size:14px}
  .site-header[data-compact] .site-nav__utility{display:none}
  .site-header[data-compact] .header-bar__actions{justify-self:end}
}
@media (max-width:1200px){
  .site-nav__utility{display:none}
}

/* ---------- quick rail：桌面左栏 ---------- */
.quick-rail{
  position:fixed;z-index:75;
  left:max(14px,calc(50% - 708px));
  top:50%;transform:translateY(-50%);
  width:var(--rail-w);
  background:linear-gradient(180deg,rgba(27,31,69,.97),rgba(14,47,51,.97));
  border-left:2px solid var(--cyan);
  padding:14px 12px 16px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.quick-rail__label{
  margin:0 0 10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  color:var(--amber);
}
.quick-rail__list{display:block}
.quick-rail__item{
  display:flex;align-items:baseline;gap:7px;
  padding:9px 0;
  border-bottom:1px dashed rgba(140,160,179,.25);
  color:var(--cloud);
  font-size:13px;line-height:1.45;
  transition:color var(--dur) var(--ease);
}
.quick-rail__item:hover{color:var(--cyan)}
.quick-rail__list li:last-child .quick-rail__item{border-bottom:0}
.quick-rail__idx{font-family:var(--font-mono);font-size:11px;color:var(--cyan);flex:none}
.quick-rail__txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 中屏：页头下方路径条 */
@media (min-width:880px) and (max-width:1399px){
  .quick-rail{
    position:static;transform:none;width:auto;
    background:var(--indigo);
    border-left:0;border-top:1px solid rgba(53,224,214,.28);
    padding:0;clip-path:none;
  }
  .quick-rail__label{display:none}
  .quick-rail__list{
    display:flex;max-width:var(--shell);margin:0 auto;padding:0 22px;
  }
  .quick-rail__list li{flex:1 1 0;min-width:0}
  .quick-rail__item{
    border-bottom:0;border-right:1px dashed rgba(140,160,179,.25);
    padding:11px 14px;font-size:13.5px;
  }
  .quick-rail__list li:last-child .quick-rail__item{border-right:0}
  .site-header[data-compact] .quick-rail{display:none}
}

/* 手机：底部固定条 */
@media (max-width:879px){
  .quick-rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:auto;transform:none;
    background:rgba(11,27,43,.97);
    border-left:0;border-top:1px solid rgba(53,224,214,.42);
    padding:0;clip-path:none;
    z-index:90;
  }
  .quick-rail__label{display:none}
  .quick-rail__list{display:flex;width:100%}
  .quick-rail__list li{flex:1 1 0;min-width:0}
  .quick-rail__item{
    justify-content:center;
    border-bottom:0;border-right:0;
    padding:12px 8px;font-size:12.5px;gap:5px;
  }
  .quick-rail__list li+li .quick-rail__item{border-left:1px dashed rgba(140,160,179,.22)}
  body{padding-bottom:62px}
}

/* 手机导航展开 */
@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  .header-bar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    padding-top:11px;padding-bottom:11px;
  }
  .header-bar__meta{display:none}
  .brand{justify-self:start;padding-left:0}
  .brand__tagline{display:none}
  .brand__name{font-size:20px;letter-spacing:.13em}
  .site-nav{display:none;grid-area:nav}
  .site-nav[data-open]{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--indigo);
    border-top:1px solid rgba(53,224,214,.35);
    padding:10px 22px 20px;
    box-shadow:0 24px 40px -26px rgba(0,0,0,.95);
    max-height:calc(100vh - 70px);overflow-y:auto;
  }
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__link{
    display:block;padding:13px 2px;
    border-bottom:1px solid rgba(140,160,179,.18);
    border-left:2px solid transparent;
  }
  .site-nav__link:hover{border-bottom-color:rgba(53,224,214,.35)}
  .site-nav__link[aria-current="page"]{
    color:var(--cyan);
    border-bottom-color:rgba(140,160,179,.18);
    border-left-color:var(--cyan);
    padding-left:12px;
  }
  .site-nav__utility{
    position:static;transform:none;
    display:flex;gap:20px;
    margin-top:16px;padding-top:14px;
    border-top:1px dashed rgba(53,224,214,.3);
  }
}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  background:var(--indigo);
  color:var(--cloud);
}
.site-footer::before{
  content:"";display:block;height:2px;
  background:linear-gradient(90deg,var(--cyan) 0%,rgba(53,224,214,.2) 55%,var(--amber) 100%);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,2fr);
  gap:38px;
  padding:50px 22px 34px;
}
.footer-brand__mark{
  margin:0 0 10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
  color:var(--cyan);
  display:inline-block;
  border:1px solid rgba(53,224,214,.45);
  padding:5px 8px 4px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.footer-brand__name{
  margin:0 0 10px;
  font-family:var(--font-display);font-weight:800;
  font-size:20px;letter-spacing:.16em;color:var(--cloud);
}
.footer-brand__contact{
  margin:0 0 6px;
  font-size:13.5px;line-height:1.7;color:var(--muted);
  max-width:34ch;
  font-family:var(--font-mono);letter-spacing:.02em;
}
.footer-brand__addr{
  margin:0;font-size:13px;color:rgba(140,160,179,.7);letter-spacing:.04em;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.footer-col__title{
  margin:0 0 14px;
  font-family:var(--font-display);font-weight:700;
  font-size:13px;letter-spacing:.22em;color:var(--cyan);
}
.footer-col__list li{margin:0}
.footer-link{
  display:inline-block;
  padding:4px 0;
  color:rgba(244,247,249,.82);
  font-size:15px;letter-spacing:.04em;
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.footer-link:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.footer-base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 22px;
  padding:16px 22px 24px;
  border-top:1px solid rgba(140,160,179,.2);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);
}
.footer-base p{margin:0}
.footer-base__copy{color:rgba(140,160,179,.7)}

/* ---------- zones ---------- */
.zone{padding:clamp(40px,6vw,80px) 0}
.zone--ink{background:var(--ink)}
.zone--indigo{background:var(--indigo)}
.zone--teal{background:var(--teal)}
.zone--wine{background:var(--wine)}
.zone--light{background:var(--cloud);color:var(--text-dark)}
.zone--light h1,.zone--light h2,.zone--light h3,.zone--light h4{color:var(--text-dark)}
.zone--light a{color:var(--cyan-deep)}
.zone--light a:hover{color:#0A5B57}
.zone--light .eyebrow{color:var(--cyan-deep)}
.zone--light .stat__label,.zone--light .step__index{color:#5A6B79}
.zone-divider{
  position:relative;height:26px;overflow:hidden;
}
.zone-divider::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--cyan);transform:skewY(-1.1deg);transform-origin:left center;
}

/* ---------- grid ---------- */
.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:26px;align-items:start}
.split--wide{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
@media (max-width:960px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--wide{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;
  font-family:var(--font-display);font-weight:700;
  font-size:15px;letter-spacing:.09em;line-height:1;
  border:1px solid transparent;border-radius:2px;
  background:transparent;color:var(--cloud);
  cursor:pointer;text-align:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn--primary{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.btn--primary:hover{background:#5cebe2;color:var(--ink);border-color:#5cebe2}
.btn--ghost{border-color:rgba(53,224,214,.5);color:var(--cyan)}
.btn--ghost:hover{background:rgba(53,224,214,.13);border-color:var(--cyan);color:var(--cyan)}
.btn--amber{border-color:rgba(242,179,61,.55);color:var(--amber)}
.btn--amber:hover{background:rgba(242,179,61,.14);border-color:var(--amber);color:var(--amber)}
.btn--sm{padding:8px 14px;font-size:13px;letter-spacing:.12em}
.zone--light .btn--ghost{border-color:rgba(15,124,119,.5);color:var(--cyan-deep)}
.zone--light .btn--ghost:hover{background:rgba(15,124,119,.1);border-color:var(--cyan-deep);color:var(--cyan-deep)}

/* ---------- panels ---------- */
.panel{
  --panel-bg:var(--indigo);
  --panel-pad:26px;
  position:relative;
  background:var(--panel-bg);
  padding:var(--panel-pad);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.panel--ink{--panel-bg:var(--ink)}
.panel--indigo{--panel-bg:var(--indigo)}
.panel--teal{--panel-bg:var(--teal)}
.panel--wine{--panel-bg:var(--wine)}
.panel--focus{--panel-bg:linear-gradient(148deg,var(--indigo) 0%,var(--teal) 100%)}
.panel--light{--panel-bg:var(--cloud);color:var(--text-dark)}
.panel--light h2,.panel--light h3{color:var(--text-dark)}
.panel--light a{color:var(--cyan-deep)}
.panel__trail{
  position:absolute;left:0;top:0;
  width:74px;height:2px;
  background:linear-gradient(90deg,var(--cyan),rgba(53,224,214,0));
}
.tex-grid{
  background-image:
    linear-gradient(rgba(53,224,214,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,224,214,.07) 1px,transparent 1px);
  background-size:36px 36px;
}

/* ---------- typography atoms ---------- */
.eyebrow{
  display:inline-block;
  margin:0 0 12px;
  font-family:var(--font-mono);font-size:12px;font-weight:400;
  letter-spacing:.24em;color:var(--cyan);
}
.numeral{
  display:block;
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(40px,7vw,68px);line-height:1;
  letter-spacing:-.02em;color:var(--amber);
}
.stat{display:flex;flex-direction:column;gap:6px}
.stat__value{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(32px,5vw,54px);line-height:1;
  color:var(--amber);letter-spacing:-.01em;
}
.stat__label{font-size:13px;letter-spacing:.12em;color:var(--muted)}
.note-hand{
  display:inline-block;
  transform:rotate(-2.2deg);
  background:rgba(242,179,61,.13);
  border:1px solid rgba(242,179,61,.55);
  color:var(--amber);
  font-size:13px;letter-spacing:.06em;line-height:1.5;
  padding:5px 12px;
}
.note-hand--cyan{
  transform:rotate(1.7deg);
  background:rgba(53,224,214,.1);
  border-color:rgba(53,224,214,.5);
  color:var(--cyan);
}
.trail{
  position:relative;height:2px;margin:26px 0;
  background:linear-gradient(90deg,rgba(140,160,179,.35),rgba(140,160,179,.05));
}
.trail::after{
  content:"";position:absolute;left:0;top:-3px;
  width:8px;height:8px;background:var(--cyan);transform:rotate(45deg);
}

/* ---------- status ---------- */
.status{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px 3px;
  border:1px solid currentColor;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;line-height:1.4;
}
.status::before{content:"";width:6px;height:6px;background:currentColor;border-radius:50%;flex:none}
.status--available{color:var(--cyan)}
.status--updating{color:var(--amber)}
.status--pending{color:var(--muted)}
.status--submitted{color:var(--rose)}

/* ---------- steps ---------- */
.steps{display:flex;flex-wrap:wrap;gap:10px}
.step{
  flex:1 1 170px;min-width:0;
  position:relative;
  padding:16px 16px 18px 18px;
  background:rgba(244,247,249,.045);
  border-left:2px solid rgba(140,160,179,.35);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.step__index{
  display:block;margin-bottom:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--muted);
}
.step__title{
  display:block;margin:0 0 4px;
  font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.06em;
  color:var(--cloud);
}
.step__desc{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.step__dot{
  position:absolute;right:14px;top:16px;
  width:8px;height:8px;background:rgba(140,160,179,.4);
}
.step.is-current{border-left-color:var(--cyan);background:rgba(53,224,214,.09)}
.step.is-current .step__index{color:var(--cyan)}
.step.is-current .step__title{color:var(--cyan)}
.step.is-current .step__dot{background:var(--cyan)}
@media (prefers-reduced-motion:no-preference){
  .step.is-current .step__dot{animation:stepPulse 2.4s ease-in-out infinite}
}
@keyframes stepPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- media ---------- */
.media-frame{
  --cut:18px;
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
  background:linear-gradient(140deg,#12263a 0%,var(--teal) 100%);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.media-frame::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(53,224,214,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,224,214,.08) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:4/5}
.media-frame--square{aspect-ratio:1/1}
.media-frame__cap{
  position:absolute;left:0;right:0;bottom:0;
  margin:0;padding:10px 14px;
  background:linear-gradient(0deg,rgba(11,27,43,.92),rgba(11,27,43,0));
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--cloud);
}

/* ---------- prose & breadcrumbs ---------- */
.prose{max-width:36em}
.prose p{margin:0 0 1.1em}
.prose h2,.prose h3{margin-top:1.5em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.2em;list-style:disc}
.prose li{margin:0 0 .5em}
.prose--on-light{color:var(--text-dark)}
.prose--on-light h1,.prose--on-light h2,.prose--on-light h3{color:var(--text-dark)}
.prose--on-light a{color:var(--cyan-deep)}
.breadcrumbs{
  padding:18px 0 0;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--muted);
}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:rgba(140,160,179,.55)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--cyan)}
.breadcrumbs [aria-current="page"]{color:var(--cloud)}

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