/* ═══════════════════════════════════════════════════════════════
   CREATIVE · 項目總覽 hub

   配色與 hub.hopewell-pack.xyz 一致（2026-09-01 用戶要求）——
   牛皮紙底 + 朱紅／青瓷／靛藍／土金四色。

   為什麼由暖褐深色換成牛皮紙淺色：
   兩個 hub 是同一個人在同一天之內來回看的，配色不同會覺得走錯地方。
   而且 EYEON 2.0 的 app 與規格站都已改為牛皮紙系，
   hub 是它們的入口 —— 入口跟內容不同調會斷掉。

   深色版備份在 hub.css.dark.bak；logo 三原色淺色版在 hub.css.light.bak。
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 牛皮紙底 ── 對齊 hopewell hub 的 --paper / --paper2 */
  --paper:#f4ecdc;
  --paper2:#ece1cd;
  --paper3:#fffdf7;        /* 卡面：比紙面更亮，讓卡浮起來 */
  --ground-1:var(--paper);
  --ground-2:var(--paper2);
  --ground-3:var(--paper2);
  --surface:#fffdf7;
  --surface-2:#fffaf0;
  --surface-3:#ece1cd;     /* 凹陷區（編號牌、貼紙底） */
  --hairline:rgba(20,18,15,.12);
  --hairline-hi:rgba(20,18,15,.24);

  /* 文字：純墨，不是暖骨白 */
  --ink:#14120f;
  --ink-soft:rgba(20,18,15,.70);
  --ink-faint:rgba(20,18,15,.52);

  /* ── hopewell 六色盤 ──
     每色一深一淺：淺色作填底與描邊，深色作文字（在牛皮紙上達 WCAG AA）。
     機構 logo 三原色（紅 #E60012／黃 #FFF100／綠 #009944）保留給 SVG 貼紙，
     不用作介面文字色 —— 純紅純黃在米黃紙上對比不足。 */
  --kraft:#c9a227;   --kraft-deep:#6b5612;
  --verm:#c0492f;    --verm-deep:#842f1f;
  --celadon:#4f8f7a; --celadon-deep:#285848;
  --indigo:#3f5b78;  --indigo-deep:#26384d;
  --mint:#8fc9b4;    --mint-deep:#255447;
  --plum:#6d4e8f;    --plum-deep:#46305f;
  --teal:#1f7c88;    --teal-deep:#124f56;

  /* 舊變數名對映到新色盤 —— 元件 CSS 不用逐個改 */
  --red:var(--verm);        --red-soft:var(--verm);      --red-deep:var(--verm-deep);
  --red-pure:#e60012;
  --yellow:var(--kraft);    --yellow-soft:var(--kraft);  --yellow-deep:var(--kraft-deep);
  --yellow-pure:#fff100;
  --green:var(--celadon);   --green-soft:var(--celadon); --green-deep:var(--celadon-deep);
  --green-pure:#009944;
  --blue:var(--indigo);     --blue-deep:var(--indigo-deep);
  --clay:#c4662f;           --clay-deep:#7c3c17;

  --shadow:0 18px 50px rgba(20,18,15,.14), 0 6px 18px rgba(20,18,15,.08);
  --shadow-sm:0 2px 8px rgba(20,18,15,.06);
  --r-xl:30px; --r-lg:24px; --r-md:18px; --r-sm:12px;
  --max:1180px;
}
*{box-sizing:border-box}
html{color-scheme:light; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-size:18px; line-height:1.6; color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Hiragino Sans TC","Microsoft JhengHei",sans-serif;
  /* 三層光斑 —— 朱紅左上、青瓷右上、靛藍底部居中。
     跟 hopewell hub 同一組座標與透明度，所以兩站看起來是一家。 */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(192,73,47,.18), transparent 58%),
    radial-gradient(900px 520px at 100% 0%, rgba(79,143,122,.18), transparent 60%),
    radial-gradient(1000px 680px at 50% 100%, rgba(63,91,120,.13), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, #f7f1e4 38%, var(--paper2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* 暖調顆粒 + 暗角：令深色唔會睇落死板（三個模型都提到嘅關鍵） */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 58%, rgba(20,18,15,.06) 100%);
}
body > *{position:relative; z-index:1}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:8px}
img{max-width:100%; display:block}
.wrap{width:min(calc(100% - 28px), var(--max)); margin-inline:auto}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--ink); color:#fff9ef; padding:10px 14px; border-radius:10px}

.top-progress{
  position:fixed; inset:0 auto auto 0; height:6px; width:100%;
  background:linear-gradient(90deg,var(--red),var(--yellow-soft),var(--green),var(--blue),var(--plum),var(--teal));
  transform-origin:0 50%; transform:scaleX(0); z-index:90;
}

/* ── logo 牌 ──────────────────────────────────────────────────── */
.logo-plaque{
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(253,250,242,.95);   /* 官方彩色 logo 需要淺底，三原色才突出 */
  border-radius:18px; padding:11px 18px 11px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 30px rgba(20,18,15,.10);
}
.logo-plaque img{height:44px; width:auto}
.logo-plaque .lp-1{display:block; font-size:.9rem; font-weight:900; color:#17150f; letter-spacing:.02em; line-height:1.3}
.logo-plaque .lp-2{display:block; font-size:.7rem; font-weight:700; color:rgba(23,21,15,.55); letter-spacing:.15em}

/* ── hero ─────────────────────────────────────────────────────── */
header.hero{padding:30px 0 24px}
.hero-shell{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:34px 34px 30px; color:var(--ink);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,226,180,.13);
  border:1px solid rgba(255,240,208,.16);
  background:
    radial-gradient(700px 420px at 88% -20%, rgba(201,162,39,.28), transparent 62%),
    radial-gradient(620px 400px at 4% 112%,  rgba(79,143,122,.24), transparent 64%),
    linear-gradient(135deg, rgba(20,18,15,.98), rgba(38,56,77,.96) 34%, rgba(192,73,47,.92) 70%, rgba(201,162,39,.9) 100%);
}
.hero-shell::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:
    linear-gradient(90deg, rgba(255,226,180,.3) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(rgba(255,226,180,.3) 1px, transparent 1px) 0 0/26px 26px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 86%);
}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.4fr .78fr; gap:26px; align-items:center}
.overline{font-size:.78rem; font-weight:900; letter-spacing:.2em; color:#f0d98a; margin:18px 0 12px}
.hero h1{margin:0 0 8px; font-size:clamp(1.8rem,5.2vw,2.85rem); line-height:1.14; letter-spacing:-.015em; font-weight:900}
.hero h1 .hero-sub{display:block; font-size:.5em; font-weight:800; color:#fff0d0; opacity:.95; margin-top:8px; letter-spacing:.02em}
.hero-desc{margin:0 0 20px; color:rgba(255,250,241,.92); font-size:1.02rem; max-width:58ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.hero-link{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff9ef; color:var(--ink); font-weight:900;
  padding:13px 22px; border-radius:999px;
  box-shadow:0 12px 26px rgba(20,18,15,.28), 0 4px 12px rgba(20,18,15,.16);
  transition:transform .18s, box-shadow .18s;
}
.hero-link .arrow{transition:transform .18s}
.hero-link:hover{transform:translateY(-2px)} .hero-link:hover .arrow{transform:translateX(3px)}
.hero-link.secondary{background:rgba(255,250,241,.12); color:#fff9ef; box-shadow:inset 0 0 0 1.5px rgba(255,240,208,.38)}
.hero-side{position:relative; display:flex; flex-direction:column; gap:14px; justify-content:center}
.hero-panel{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.metric{
  background:rgba(255,196,120,.07); border:1.5px solid rgba(255,196,120,.22);
  border-radius:var(--r-md); padding:12px 8px; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,226,180,.1);
}
.metric strong{display:block; font-size:1.55rem; font-weight:900; line-height:1; color:var(--yellow)}
.metric span{font-size:.72rem; font-weight:700; color:rgba(255,250,241,.78); letter-spacing:.05em}
.sticker{position:absolute; pointer-events:none}
.sticker-hero{right:-8px; top:-16px; width:176px; opacity:.9; color:var(--ink)}

/* ── section ──────────────────────────────────────────────────── */
.section{margin:38px 0 0}
.section-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:18px}
.section-kicker{display:flex; align-items:center; gap:14px}
.section-kicker .num{
  font-size:2.5rem; font-weight:900; line-height:1; letter-spacing:-.04em;
  -webkit-text-stroke:2px currentColor; color:transparent; opacity:.95;
}
.section-kicker .title{margin:0; font-size:clamp(1.28rem,3.4vw,1.7rem); font-weight:900; letter-spacing:-.01em}
.section-sub{margin:0; color:var(--ink-faint); font-size:.95rem; font-weight:700}

/* ── 卡片 ─────────────────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.card{
  position:relative; border-radius:28px; overflow:hidden; min-height:250px;
  background:linear-gradient(157deg, var(--surface) 0%, var(--surface-2) 58%, #f6ecda 100%);
  border:1px solid var(--hairline);
  /* 上緣一道亮邊＋內側暖光：深色卡靠呢兩層才有厚度，唔會扁 */
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.8);
  isolation:isolate; display:flex;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--hairline-hi);
  box-shadow:0 22px 56px rgba(20,18,15,.13), inset 0 1px 0 rgba(255,255,255,.75);
}
/* wash 層改用「餘燼式」單點光暈 —— 淺色版嘅粉彩漸層在深底上會發糊光。
   每張卡嘅色相由 .t-* 覆寫 --ember。 */
.card .wash,.card .mesh,.card .blob{position:absolute; inset:0; pointer-events:none}
.card .wash{
  background:radial-gradient(circle at 88% 2%, var(--ember, rgba(255,140,60,.14)), transparent 62%);
}
.card .mesh{
  opacity:.045; mix-blend-mode:overlay;
  background:
    linear-gradient(90deg, rgba(20,18,15,.07) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(rgba(20,18,15,.07) 1px, transparent 1px) 0 0/22px 22px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 86%);
}
.card .blob::before,.card .blob::after{content:""; position:absolute; border-radius:50%; filter:blur(26px)}
.card .blob::before{
  width:190px;height:190px;right:-46px;top:-52px;
  background:radial-gradient(circle, var(--ember, rgba(255,140,60,.2)), transparent 66%);
  opacity:.5;
}
.card .blob::after{
  width:210px;height:210px;left:-58px;bottom:-70px;
  background:radial-gradient(circle, rgba(201,162,39,.10), transparent 70%);
}
.card-inner{position:relative; z-index:2; pointer-events:none; padding:22px 22px 20px; height:100%; display:flex; flex-direction:column}
.card-inner a,.card-inner button{pointer-events:auto}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.id{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:18px;
  font-weight:900; font-size:1.12rem; line-height:1; letter-spacing:.02em;
  background:var(--surface-3);
  box-shadow:inset 0 2px 5px rgba(20,18,15,.09), 0 1px 0 rgba(255,255,255,.65);
}
.id .idico{width:28px; height:28px}
.badges{display:flex; flex-direction:column; align-items:flex-end; gap:7px}
.badge{
  display:inline-flex; align-items:center; gap:6px; min-height:34px;
  padding:6px 13px; border-radius:999px; white-space:nowrap;
  font-size:.79rem; font-weight:900; letter-spacing:.03em;
  border:1px solid var(--hairline);
}
.badge-live{background:rgba(79,143,122,.16); color:var(--celadon-deep); border-color:rgba(79,143,122,.45)}
/* 建置中 —— 同樣有脈動點（同 badge-live 一致），但用琥珀色。
   語意上「建置中」唔等於「需密碼」，所以要獨立一態。 */
.badge-wip{background:rgba(201,162,39,.16); color:#6b5612; border-color:rgba(201,162,39,.45)}
.badge-wip .dot{background:#D9931C}
.badge-lock{background:rgba(20,18,15,.05); color:var(--ink-soft); border-color:var(--hairline)}
.badge-tag{
  background:rgba(20,18,15,.04); color:var(--ink-soft);
  border-color:var(--hairline); font-size:.74rem; min-height:28px; padding:4px 11px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green); animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.7)}}
.card h3{margin:15px 0 7px; font-size:1.22rem; line-height:1.3; font-weight:900; letter-spacing:-.01em}
.card .desc{margin:0 0 12px; color:var(--ink-soft); font-size:.95rem}
.feats{margin:0 0 14px; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.feats li{font-size:.85rem; color:var(--ink-soft); padding-left:20px; position:relative; line-height:1.5}
.feats li::before{
  content:""; position:absolute; left:4px; top:.56em; width:7px; height:7px;
  border-radius:2px; background:currentColor; opacity:.42; transform:rotate(45deg);
}
.card-foot{margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.url{font-weight:800; font-size:.9rem; color:rgba(20,18,15,.62)}
/* 「開啟 →」做成實心藥丸：右下角貼紙就在它底下，純文字疊在貼紙線條上讀不清。
   藥丸同時給出可點擊的視覺提示。 */
.open-hint{
  display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:.92rem;
  background:rgba(20,18,15,.05); color:var(--ink);
  padding:8px 15px; border-radius:999px;
  box-shadow:0 3px 10px rgba(20,18,15,.10), inset 0 0 0 1px var(--hairline);
  position:relative; z-index:2;
}
.open-hint .arrow{transition:transform .18s}
.card:hover .open-hint{background:var(--ink); color:#fff9ef}
.card:hover .open-hint .arrow{transform:translateX(4px)}
.url{position:relative; z-index:2}
.rowlink{position:absolute; inset:0; z-index:1; cursor:pointer}
/* 貼紙塞進右下角並讓 overflow:hidden 裁掉一部分 —— 像蓋上去的角章。
   放在 14px/14px 時它會橫穿 .card-foot 的「開啟 →」，看起來像印歪了。 */
.sticker-corner{right:-14px; bottom:-12px; width:112px; opacity:.42}

/* 每張卡嘅餘燼色相。--ember 餵入 .wash 與 .blob；
   標題與貼紙用提亮版品牌色（深底上原色對比不足）。
   色相按「範疇」分配，唔含優劣意味 —— 詳見 projects.js 註解。 */
/* 牛皮紙底上一律用 deep 版本作文字色 —— 深色主題的提亮色（#7ee0a8 那批）
   在米黃紙上對比只有 1.5:1，完全讀不到。
   ember 是卡角的裝飾光暈，仍用中間色（它是填色不是文字）。 */
.t-green {--ember:rgba(79,143,122,.18)}
.t-green  .id{color:var(--celadon-deep)} .t-green  h3{color:var(--celadon-deep)} .t-green  .sticker-corner{color:var(--celadon)}
.t-teal  {--ember:rgba(31,124,136,.18)}
.t-teal   .id{color:var(--teal-deep)}    .t-teal   h3{color:var(--teal-deep)}    .t-teal   .sticker-corner{color:var(--teal)}
.t-blue  {--ember:rgba(63,91,120,.18)}
.t-blue   .id{color:var(--indigo-deep)}  .t-blue   h3{color:var(--indigo-deep)}  .t-blue   .sticker-corner{color:var(--indigo)}
.t-plum  {--ember:rgba(109,78,143,.18)}
.t-plum   .id{color:var(--plum-deep)}    .t-plum   h3{color:var(--plum-deep)}    .t-plum   .sticker-corner{color:var(--plum)}
.t-red   {--ember:rgba(192,73,47,.18)}
.t-red    .id{color:var(--verm-deep)}    .t-red    h3{color:var(--verm-deep)}    .t-red    .sticker-corner{color:var(--verm)}
.t-yellow{--ember:rgba(201,162,39,.18)}
.t-yellow .id{color:var(--kraft-deep)}   .t-yellow h3{color:var(--kraft-deep)}   .t-yellow .sticker-corner{color:var(--kraft)}
.t-clay  {--ember:rgba(196,102,47,.18)}
.t-clay   .id{color:var(--clay-deep)}    .t-clay   h3{color:var(--clay-deep)}    .t-clay   .sticker-corner{color:var(--clay)}

/* 貼紙：深底上白色填充會過亮，改用低透明暖白 */
.card .sticker-corner path[fill^="rgba(255,255,255"],
.card .sticker-corner rect[fill^="rgba(255,255,255"],
.card .sticker-corner circle[fill^="rgba(255,255,255"]{fill:rgba(20,18,15,.08)}

/* ── hero 三範疇並列（無主次）───────────────────────────────────── */
.hero-domains{display:flex; flex-direction:column; gap:7px; margin-top:2px}
.hero-domains span{
  display:flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:800; color:rgba(244,232,214,.88);
}
.hero-domains i{width:9px; height:9px; border-radius:50%; flex:0 0 auto; display:block}

/* ── 黏頂範疇導覽 ─────────────────────────────────────────────── */
.navbar{
  position:sticky; top:0; z-index:60;
  padding:11px 0 10px; margin-bottom:4px;
  background:rgba(33,23,16,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.domnav{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* min-width:0 讓 flex 子項可以縮 —— 沒有它，nowrap 的藥丸會把容器撐爆，
     在 390px 上實測逸出（捲動容器本身反而超出視窗）。
     負 margin + padding 令捲動時貼齊邊緣，不會半個藥丸卡在邊界。 */
  min-width:0; max-width:100%;
  margin:0 -16px; padding:0 16px;
}
.domnav::-webkit-scrollbar{display:none}
.dompill{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; min-height:44px; border-radius:999px; white-space:nowrap;
  font-size:.85rem; font-weight:900; color:var(--ink-soft);
  background:rgba(255,253,247,.82); border:1.5px solid var(--hairline);
  transition:background .18s, color .18s, border-color .18s;
}
.dompill .dp-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; display:block}
.dompill .dp-n{
  font-size:.74rem; font-weight:900; padding:1px 7px; border-radius:999px;
  background:rgba(255,253,247,.95); color:var(--ink);
}
.dompill.on{background:var(--ink); color:#fff9ef; border-color:var(--ink)}
.dompill.on .dp-n{background:rgba(255,249,239,.22); color:#fff9ef}
.dompill:hover{border-color:var(--hairline-hi)}

/* ── 範疇說明句 ───────────────────────────────────────────────── */
.section-note{
  margin:0 0 15px; padding:11px 16px; border-radius:var(--r-md);
  background:rgba(255,253,247,.6); border:1.5px dashed var(--hairline);
  font-size:.9rem; font-weight:700; color:var(--ink-soft);
}

/* ── 平權：七張卡結構完全一致 ─────────────────────────────────────
   只有底紋方向按序交替（純裝飾）。禁止全寬卡、深色卡、不同卡寬。 */
.card.alt .mesh{
  background:
    linear-gradient(45deg, rgba(20,18,15,.06) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(-45deg, rgba(20,18,15,.06) 1px, transparent 1px) 0 0/24px 24px;
}
.card.alt .blob::before{right:auto; left:-30px; top:-34px}
.card.alt .blob::after{left:auto; right:-40px; bottom:-54px}

/* 卡片高度一致：特性列表限高，避免 2 條 vs 3 條時卡高差太遠 */
.grid{align-items:stretch}
.card{display:flex}
.card-inner{width:100%}

@media (max-width:560px){
  .navbar{padding:9px 0 8px}
  .dompill{font-size:.8rem; padding:7px 12px}
  .hero-domains span{font-size:.78rem}
}

/* ── footer ───────────────────────────────────────────────────── */
footer.foot{margin:44px 0 30px; padding:26px 0 0; border-top:2px dashed var(--hairline)}
.foot-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:start}
.foot h4{margin:0 0 10px; font-size:1rem; font-weight:900}
.foot p{margin:0; color:var(--ink-soft); font-size:.9rem}
.foot-box{
  border-radius:var(--r-lg); padding:18px 20px;
  background:rgba(255,253,247,.7); border:1.5px solid rgba(192,73,47,.28);
}
.foot-box h4{color:var(--red-deep)}
.foot-note{margin-top:20px; font-size:.82rem; color:var(--ink-faint); text-align:center}
.lockbtn{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  border:1px solid var(--hairline); cursor:pointer; font-family:inherit;
  font-size:.84rem; font-weight:900;
  background:rgba(20,18,15,.04); color:var(--ink-soft);
  padding:9px 15px; border-radius:999px; min-height:44px}
.lockbtn:hover{background:rgba(255,253,247,.95); color:var(--ink)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .sticker-hero{display:none}
  .grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero-shell{padding:26px 20px 24px; border-radius:24px}
  .section{margin-top:30px}
  .card{min-height:0; border-radius:24px}
  .card-inner{padding:18px}
  .hero-link{width:100%; justify-content:center}
  .section-kicker .num{font-size:2rem}
  .metric{padding:10px 4px}
  .metric strong{font-size:1.3rem}
  .metric span{font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}