/* ==========================================================================
   Resonance of Fate: Enhanced Remaster — 攻略站皮肤
   设计语言：Basel 铁板 + 黄铜钟表 + 六边地图（见 DESIGN-BRIEF.md）
   颜色全部由官方截图 PIL 采样得出，字体自托管，无外部请求。
   ========================================================================== */

@font-face{font-family:Cinzel;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cinzel-600.woff2) format('woff2')}
@font-face{font-family:Cinzel;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cinzel-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlowcond-600.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/barlow-700.woff2) format('woff2')}

:root{
  --iron-0:#0b1013; --iron-1:#11191d; --iron-2:#18242a; --iron-3:#22333a;
  --line:#33474f; --brass:#c39a5a; --brass-hi:#e8cd97; --brass-lo:#7c5c31;
  --teal:#6fa2b1; --rust:#a15c33; --bone:#efe6d4; --dim:#a89c88; --ok:#8db98c;
  --maxw:1200px; --radius:2px;
  --display:Cinzel,'Times New Roman',serif;
  --sans:Barlow,'Segoe UI',system-ui,sans-serif;
  --cond:'Barlow Condensed','Barlow',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--bone); background-color:var(--iron-0);
  background-image:
    radial-gradient(900px 420px at 12% -6%, rgba(195,154,90,.13), transparent 70%),
    radial-gradient(700px 380px at 96% 4%, rgba(111,162,177,.10), transparent 72%),
    url(assets/brand/hex-tile.png);
  background-repeat:no-repeat,no-repeat,repeat;
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass-hi);text-decoration:none;text-underline-offset:3px}
a:hover{color:#fff;text-decoration:underline}
strong,b{color:var(--brass-hi);font-weight:700}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;color:var(--brass-hi);background:rgba(195,154,90,.1);padding:1px 5px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brass);color:#0b1013;padding:8px 14px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- ribbon：压花铜铭牌 ---------- */
.ribbon{
  background:linear-gradient(180deg,#2a2119,#171310);
  border-bottom:1px solid var(--brass-lo);
  box-shadow:inset 0 1px 0 rgba(232,205,151,.16), inset 0 -1px 0 rgba(0,0,0,.7);
}
.ribbon .wrap{
  font-family:var(--cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-hi);padding:7px 22px;display:flex;align-items:center;gap:10px;
}
.ribbon .wrap::before,.ribbon .wrap::after{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#f0d8a8,#8a6a38 60%,#3b2c14);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 6px rgba(232,205,151,.25);
}

/* ---------- topbar / nav ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(17,25,29,.97),rgba(11,16,19,.97));
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(195,154,90,.18),0 10px 24px rgba(0,0,0,.45);
}
.bar{display:flex;align-items:center;gap:20px;min-height:70px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;color:var(--bone);font-family:var(--display);
  font-weight:700;font-size:19px;letter-spacing:.04em;line-height:1.15;flex:none}
.brand:hover{color:var(--brass-hi);text-decoration:none}
.brand img{
  width:40px;height:40px;border-radius:2px;object-fit:cover;
  border:1px solid var(--brass-lo);box-shadow:0 0 0 1px #000,0 0 12px rgba(195,154,90,.22);
}
.nav{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav > ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.nav > ul > li{position:relative}
.nav > ul > li > a{
  display:block;padding:9px 11px;color:var(--bone);font-family:var(--cond);
  font-size:15px;letter-spacing:.1em;text-transform:uppercase;border:1px solid transparent;border-radius:2px;
}
.nav > ul > li > a:hover{color:var(--brass-hi);background:rgba(195,154,90,.1);border-color:rgba(195,154,90,.4);text-decoration:none}
.nav > ul > li.active > a{color:var(--brass-hi);border-color:var(--brass-lo);background:rgba(195,154,90,.13)}
.nav li.has-kids > a::after{content:"\25BE";font-size:9px;margin-left:6px;opacity:.75;display:inline-block;transition:transform .18s}
.nav li.has-kids:hover > a::after,.nav li.has-kids:focus-within > a::after{transform:rotate(180deg)}
.nav .kids{
  display:none;position:absolute;left:0;top:100%;z-index:45;min-width:100%;
  list-style:none;margin:0;padding:6px 0;
  background:linear-gradient(180deg,#18242a,#101a1e);
  border:1px solid var(--brass-lo);border-top:2px solid var(--brass);
  box-shadow:0 16px 34px rgba(0,0,0,.6),inset 0 1px 0 rgba(232,205,151,.12);
}
.nav li.has-kids:hover > .kids,.nav li.has-kids:focus-within > .kids{display:block}
.nav .kids li a{
  display:block;padding:8px 16px;white-space:nowrap;color:var(--bone);
  font-family:var(--sans);font-size:15px;letter-spacing:.01em;text-transform:none;
}
.nav .kids li a:hover{background:rgba(195,154,90,.14);color:#fff;text-decoration:none}
.nav a.cta{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  background:linear-gradient(180deg,#8a6a38,#5d4423);color:#fff5e2;
  border:1px solid var(--brass);border-radius:2px;
  font-family:var(--cond);font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 0 #2c2010;
}
.nav a.cta:hover{background:linear-gradient(180deg,#a37c42,#6d5029);color:#fff;text-decoration:none;transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero{
  position:relative;border-bottom:1px solid var(--line);
  background:
    radial-gradient(760px 320px at 80% 0%, rgba(195,154,90,.16), transparent 70%),
    linear-gradient(180deg,#0e1518,#0b1013 78%);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(195,154,90,.6),transparent);
}
.hero-in{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:38px;align-items:center;padding:52px 22px 46px;
}
.eyebrow{
  margin:0 0 14px;font-family:var(--cond);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(195,154,90,.42);padding:5px 12px;border-radius:2px;
  background:rgba(195,154,90,.07);
}
.eyebrow::before{content:"";width:7px;height:8px;background:var(--brass);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hero h1{
  font-family:var(--display);font-weight:700;margin:0 0 16px;
  font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:.01em;
  color:#fff6e6;text-shadow:0 2px 0 #000,0 0 30px rgba(195,154,90,.22);
}
.lead{margin:0 0 22px;font-size:18px;color:#d8cfbe;max-width:52ch}
.hero-cta{margin:0;display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-block;padding:11px 20px;border-radius:2px;
  border:1px solid var(--brass);background:linear-gradient(180deg,#8a6a38,#5d4423);
  color:#fff5e2;font-family:var(--cond);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 #241a0d;
}
.btn:hover{color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brass-hi);box-shadow:inset 0 0 0 1px rgba(195,154,90,.2)}
.btn.ghost:hover{background:rgba(195,154,90,.12)}
.hero-fig{
  margin:0;padding:12px;border:1px solid rgba(195,154,90,.5);border-radius:2px;
  background:linear-gradient(180deg,rgba(34,51,58,.6),rgba(11,16,19,.9));
  box-shadow:0 0 0 1px #000,0 22px 44px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,205,151,.1);
  position:relative;
}
.hero-fig::before,.hero-fig::after{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f0d8a8,#7c5c31 65%,#2c2010);
  box-shadow:0 0 0 1px rgba(0,0,0,.7);
}
.hero-fig::before{left:4px;top:4px}
.hero-fig::after{right:4px;bottom:4px}
.hero-fig img{width:100%;height:auto;border:1px solid #000;cursor:zoom-in}
.hero-fig figcaption{
  margin-top:9px;font-size:12.5px;letter-spacing:.06em;color:var(--dim);
  font-family:var(--cond);text-transform:uppercase;
}

/* ---------- facts：黄铜仪表条 ---------- */
.facts-strip{
  background:linear-gradient(180deg,#18242a,#111a1e);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(232,205,151,.1);
}
.facts{display:flex;flex-wrap:wrap;gap:1px;padding:0 22px}
.fact{
  flex:1 1 200px;min-width:0;padding:16px 18px 22px;position:relative;
  border-left:1px solid rgba(195,154,90,.16);
}
.fact:first-child{border-left:0}
.fact-k{
  display:block;font-family:var(--cond);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:4px;
}
.fact-v{
  display:block;font-family:var(--display);font-size:20px;color:var(--brass-hi);
  font-variant-numeric:tabular-nums;line-height:1.25;
}
.fact::after{
  content:"";position:absolute;left:18px;right:18px;bottom:8px;height:5px;
  background:repeating-linear-gradient(90deg,rgba(195,154,90,.55) 0 1px,transparent 1px 7px);
  opacity:.6;
}

/* ---------- section head / grid / cards ---------- */
main{padding-bottom:8px}
.section-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:40px 0 18px;padding-bottom:10px;border-bottom:1px solid rgba(195,154,90,.28);
}
.overline{
  font-family:var(--cond);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);border:1px solid rgba(195,154,90,.4);padding:3px 9px;border-radius:2px;
}
.section-head h2{
  margin:0;font-family:var(--display);font-weight:600;font-size:26px;color:#fff6e6;
  letter-spacing:.01em;border:0;padding:0;display:flex;align-items:center;gap:10px;
}
.count-pill{
  display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;
  background:var(--brass);color:#12100a;font-family:var(--sans);font-weight:700;font-size:13px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.grid{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 8px}
.grid[data-n="2"] > .card{flex:1 1 calc(50% - 9px)}
.grid[data-n="3"] > .card{flex:1 1 calc(33.333% - 12px)}
.grid[data-n="4"] > .card{flex:1 1 calc(25% - 14px)}
.grid[data-n="5"] > .card{flex:1 1 calc(20% - 15px)}
.grid[data-n="6"] > .card{flex:1 1 calc(33.333% - 12px)}
.card{
  display:flex;flex-direction:column;min-width:0;
  background:linear-gradient(180deg,#162126,#101a1e);
  border:1px solid rgba(195,154,90,.34);border-radius:2px;
  box-shadow:0 6px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.55);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:transform .16s,border-color .16s,box-shadow .16s;
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;right:0;top:0;width:16px;height:16px;
  background:linear-gradient(225deg,rgba(195,154,90,.65) 0 48%,transparent 50%);
}
.card:hover{transform:translateY(-3px);border-color:rgba(195,154,90,.75);
  box-shadow:0 10px 0 rgba(0,0,0,.4),0 0 22px rgba(195,154,90,.16)}
.card .thumb{display:block;position:relative;overflow:hidden;border-bottom:1px solid rgba(195,154,90,.28);background:#0a0f11}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(.96)}
.card-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{margin:0;font-family:var(--display);font-size:17px;font-weight:600;color:#fff6e6;line-height:1.28}
.card p{margin:0;font-size:14.5px;color:#c9c0b0;line-height:1.55}
.pill-tag{
  position:absolute;left:0;bottom:0;padding:3px 9px;
  background:rgba(11,16,19,.88);border-top:1px solid rgba(195,154,90,.55);border-right:1px solid rgba(195,154,90,.55);
  color:var(--brass-hi);font-family:var(--cond);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
.go{margin-top:auto;font-family:var(--cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.stamp{font-size:12px;color:#8d8375;font-family:var(--cond);letter-spacing:.08em}

/* ---------- home prose ---------- */
.home-prose{
  background:linear-gradient(180deg,rgba(24,36,42,.75),rgba(17,25,29,.9));
  border:1px solid rgba(195,154,90,.26);border-radius:2px;
  padding:30px 34px 34px;margin:30px 0 10px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}
.home-prose h2{font-family:var(--display);font-size:25px;margin:34px 0 12px;color:#fff6e6}
.home-prose h2:first-child{margin-top:0}
.home-prose p{max-width:76ch}
.home-prose ul,.home-prose ol{max-width:76ch}

/* ---------- article ---------- */
.article-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:34px;
  align-items:start;margin:26px auto 44px;
}
.article-grid > div{min-width:0}
article{
  background:linear-gradient(180deg,rgba(23,34,39,.92),rgba(15,23,27,.96));
  border:1px solid rgba(195,154,90,.28);border-radius:2px;
  padding:28px 32px 34px;min-width:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 14px 34px rgba(0,0,0,.4);
  position:relative;
}
article::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(195,154,90,.75),transparent);
}
article h1{
  font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,38px);
  line-height:1.14;margin:0 0 18px;color:#fff6e6;letter-spacing:.01em;
}
article h2{
  font-family:var(--display);font-weight:600;font-size:23px;line-height:1.25;
  color:var(--brass-hi);margin:36px 0 12px;padding:0 0 8px 30px;position:relative;
  border-bottom:1px solid rgba(195,154,90,.22);max-width:74ch;
}
article h2::before{
  content:"";position:absolute;left:0;top:6px;width:19px;height:21px;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass-lo));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 10px rgba(195,154,90,.35);
}
article h3{font-family:var(--cond);font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal);margin:24px 0 8px}
article p{margin:0 0 15px;max-width:74ch}
article ul,article ol{margin:0 0 16px;padding-left:22px;max-width:74ch}
article li{margin:5px 0}
article li::marker{color:var(--brass)}
article img.zoom{
  width:100%;border:1px solid rgba(195,154,90,.4);border-radius:2px;
  box-shadow:0 0 0 1px #000,0 12px 26px rgba(0,0,0,.4);
  margin:8px 0 18px;cursor:zoom-in;background:#0a0f11;
}
article table strong,article table b{color:var(--brass-hi)}

.crumb{font-family:var(--cond);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--brass-hi)}
.crumb .sep{color:var(--brass-lo)}
.crumb .here{color:var(--brass-hi)}

.quick-answer{
  position:relative;margin:0 0 22px;padding:18px 20px 16px 22px;
  background:linear-gradient(180deg,rgba(195,154,90,.12),rgba(195,154,90,.04));
  border:1px solid rgba(195,154,90,.45);border-left:3px solid var(--brass);border-radius:2px;
}
.qa-stamp{
  display:inline-block;margin-bottom:7px;padding:2px 9px;
  background:var(--brass);color:#12100a;font-family:var(--cond);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;
}
.quick-answer p{margin:0;font-size:16.5px;color:#f2e9d8;max-width:none}

.toc{
  position:sticky;top:88px;background:linear-gradient(180deg,#18242a,#101a1e);
  border:1px solid rgba(195,154,90,.34);border-top:3px solid var(--brass);
  border-radius:2px;padding:14px 15px 16px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 8px 22px rgba(0,0,0,.35);
}
.toc .overline{display:inline-block;margin-bottom:10px;border:0;padding:0;color:var(--dim)}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{
  display:block;padding:6px 8px;font-size:14px;color:#cfc6b6;border-left:2px solid transparent;
  line-height:1.35;
}
.toc-list a:hover{color:var(--brass-hi);background:rgba(195,154,90,.1);border-left-color:var(--brass);text-decoration:none}

.callout{
  margin:0 0 18px;padding:14px 16px 14px 18px;border-radius:2px;
  background:rgba(111,162,177,.09);border:1px solid rgba(111,162,177,.4);
  border-left:3px solid var(--teal);font-size:15.5px;
}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:rgba(161,92,51,.12);border-color:rgba(161,92,51,.5);border-left-color:var(--rust)}

.tbl-wrap{width:100%;overflow-x:auto;margin:0 0 20px;border:1px solid rgba(195,154,90,.3);border-radius:2px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px;background:rgba(9,14,16,.5)}
thead th{
  background:linear-gradient(180deg,#22333a,#18242a);color:var(--brass-hi);
  font-family:var(--cond);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;padding:10px 12px;border-bottom:1px solid rgba(195,154,90,.45);white-space:nowrap;
}
tbody td{padding:9px 12px;border-bottom:1px solid rgba(51,71,79,.7);vertical-align:top;color:#ded5c4}
tbody tr:nth-child(even){background:rgba(34,51,58,.28)}
tbody tr:hover{background:rgba(195,154,90,.07)}
tbody tr:last-child td{border-bottom:0}

blockquote{
  margin:0 0 18px;padding:12px 16px;border-left:3px solid var(--brass-lo);
  background:rgba(195,154,90,.06);color:#ded5c4;font-style:italic;max-width:74ch;
}

.all-guides{
  margin:36px 0 0;padding:18px 0 8px;border-top:1px solid rgba(195,154,90,.3);
}
.all-guides .overline{display:inline-block;margin-bottom:10px}
.next-links{display:flex;flex-wrap:wrap;gap:8px 18px;padding-bottom:12px}
.next-links a{font-size:15px;color:#d7cebd;border-bottom:1px dotted rgba(195,154,90,.5)}
.next-links a:hover{color:var(--brass-hi);text-decoration:none;border-bottom-color:var(--brass-hi)}
.next-links a.all-link{color:var(--brass-hi);font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase;border-bottom:0}

/* ---------- ads ---------- */
.ad-slot{display:none;margin:26px auto;max-width:860px;padding:12px;
  background:rgba(24,36,42,.7);border:1px solid rgba(195,154,90,.26);border-radius:2px}
@media (hover: hover) and (pointer: fine){.ad-slot-native{display:block}}
@media not all and (hover: hover) and (pointer: fine){.ad-slot-mobile{display:block}}
@media print{.ad-slot{display:none}}
.ad-slot::before{content:"Advertisement";display:block;margin-bottom:8px;
  font-family:var(--cond);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.ad-inner{min-height:92px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-slot-mobile .ad-inner{min-height:66px}

/* ---------- footer ---------- */
.foot{
  margin-top:26px;border-top:3px solid var(--brass-lo);
  background:linear-gradient(180deg,#0e1518,#080c0e);
  box-shadow:inset 0 1px 0 rgba(232,205,151,.14);
  padding:26px 0 30px;
}
.foot .wrap{display:flex;flex-direction:column;gap:9px}
.disclaimer{color:var(--dim);font-size:13px;max-width:82ch;margin:0}
.foot-links{margin:0;font-family:var(--cond);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-lo)}
.foot-links a{color:var(--brass-hi)}
.foot .muted{color:#8d8375;font-size:12.5px;margin:0;font-family:var(--cond);letter-spacing:.08em}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:90;background:rgba(5,8,10,.95);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:18px;
}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;
  border:1px solid rgba(195,154,90,.6);box-shadow:0 0 60px rgba(0,0,0,.8)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:-1;margin-bottom:6px}
  .toc-list{flex-direction:row;flex-wrap:wrap;gap:4px}
  .grid[data-n="3"] > .card{flex:1 1 calc(50% - 9px)}
  .grid[data-n="4"] > .card{flex:1 1 calc(50% - 9px)}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:26px;padding:38px 22px 34px}
  .hero-fig{order:-1}
  .hero h1{font-size:clamp(28px,6vw,40px)}
}
@media (max-width:900px){
  .nav{margin-left:0;width:100%}
  .nav > ul{width:100%}
  .nav .kids{display:none !important}
  .nav li.has-kids > a::after{display:none}
  .bar{padding-top:10px;padding-bottom:10px;gap:10px}
  .nav a.cta{width:100%;justify-content:center}
}
@media (max-width:620px){
  body{font-size:16px}
  .grid[data-n="2"] > .card,.grid[data-n="3"] > .card,.grid[data-n="4"] > .card{flex:1 1 100%}
  article{padding:20px 16px 24px}
  article h2{font-size:20px;padding-left:26px}
  article h2::before{width:16px;height:18px;top:5px}
  .home-prose{padding:20px 16px 24px}
  .facts{display:grid;grid-template-columns:1fr 1fr}
  .fact{border-left:0;border-top:1px solid rgba(195,154,90,.16);padding:12px 8px 20px}
  .fact-v{font-size:17px}
  .brand{font-size:17px}
  .hero-fig{padding:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}