/* ============================================================
   极炫联盟 · 品牌视觉识别手册 v5 — EDITORIAL MASTER SYSTEM
   JIXUAN ALLIANCE · Visual Identity Manual / Vol.01
   ------------------------------------------------------------
   北极星语言 (codified from _northstar.html):
     · 强编辑意图 — 每章一个压倒性英雄锚点,非均匀小卡
     · 戏剧尺度对比 — 巨号 serif specimen 配 mono 微脚注
     · 色彩冲撞 5:3:2 — 大色块非均等 swatch 网格
     · 左侧罗马数字竖直 rail — 替代 01/02/03
     · 真实场景化 mockup — 海报/直播下三栏/球衣/社媒
     · 装饰动效极克制 — 色票 hover 扩展之类
   品牌锁 (NEVER break):
     强调色仅 = 洋红#FD10FD / 紫#703AFB / 青#01FAFE
     深空炭黑底 #08070d + 冷中性灰承托
     发光 X 标记 + 字标资产不重绘/不旋转/不改造
   ============================================================ */

/* ---- self-contained webfonts (CDN, no JS) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root{
  /* ============ BRAND CORE — LOCKED ============ */
  --magenta:#FD10FD;        /* 洋红 · HERO · 50% */
  --purple:#703AFB;         /* 品紫 · ACCENT · 30% */
  --cyan:#01FAFE;           /* 极青 · HIGHLIGHT · 20% */
  /* aliases used by north-star-derived components */
  --m:var(--magenta); --p:var(--purple); --c:var(--cyan);
  --grad:linear-gradient(95deg,var(--magenta) 0%,var(--purple) 48%,var(--cyan) 100%);
  --grad-rev:linear-gradient(95deg,var(--cyan) 0%,var(--purple) 52%,var(--magenta) 100%);
  --grad-v:linear-gradient(180deg,var(--magenta) 0%,var(--purple) 50%,var(--cyan) 100%);

  /* ============ DEEP-SPACE INK SCALE ============ */
  --bg:#08070d;             /* page base — 深空炭黑 */
  --ink-950:#08070d;
  --ink-900:#0a0911;        /* mockup body */
  --ink-850:#0d0c14;        /* raised panel */
  --ink-800:#100d1c;
  --ink-700:#15131e;        /* jersey/poster fabric */
  --ink-600:#1c1b26;        /* HAIRLINE token (north star --line) */
  --line:#1c1b26;           /* canonical hairline */
  --line-strong:rgba(255,255,255,.14);
  --paper:#f4f2ee;          /* light-mode demo paper */

  /* ============ TEXT / INK ============ */
  --ink:#f4f2ee;            /* primary ink (north star) */
  --t-hi:#f4f2ee;
  --t-mid:#b7b2c4;
  --t-low:#6b6a78;          /* mono footnote (north star --mute) */
  --mute:#6b6a78;
  --t-faint:#4a4956;

  /* ============ FUNCTIONAL — UI STATUS ONLY, SMALL AREA ============ */
  /* 仅服务 UI 状态示意,绝不作品牌强调色 */
  --fn-live:#FF3B5C;        /* live/error dot */
  --fn-ok:#2BE8A5;          /* success state */
  --fn-warn:#FFC53D;        /* warning state */

  /* ============ TYPE FAMILIES ============ */
  /* serif-italic display = the editorial voice (north star) */
  --serif:"Noto Serif SC","Songti SC",Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --cn:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --cn-serif:"Noto Serif SC","Songti SC",serif;

  /* ============ DISPLAY TYPE SCALE — DRAMATIC ============ */
  /* the heart of the editorial system: extreme jumps, no mid-tier soup */
  --fs-mega:clamp(96px,18vw,300px);   /* specimen / single glyph hero */
  --fs-hero:clamp(72px,13vw,220px);   /* chapter hero anchor */
  --fs-h1:clamp(54px,9vw,140px);      /* cover wordmark */
  --fs-h2:clamp(48px,7vw,108px);      /* section title (serif italic) */
  --fs-h3:clamp(28px,3.6vw,52px);     /* sub-hero */
  --fs-num:clamp(80px,11vw,200px);    /* jersey number / big stat */
  /* support scale — kept deliberately small to amplify contrast */
  --fs-body:15px;
  --fs-cap:13px;
  --fs-foot:11px;                     /* mono footnote */
  --fs-micro:10px;                    /* mono label/eyebrow */

  /* ============ SPACING — magazine rhythm ============ */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;
  --rail-w:110px;           /* left roman-rail gutter */
  --pad-x:clamp(28px,6vw,96px);
  --maxw:1320px;

  /* ============ TRACKING ============ */
  --tk-mono:.22em;          /* mono labels */
  --tk-mono-wide:.42em;     /* spaced latin */
  --tk-tight:-.04em;        /* big display negative tracking */

  /* ============ MOTION — extremely restrained ============ */
  --ease:cubic-bezier(.7,0,.2,1);
  --dur:.6s;
  --rad:14px; --rad-sm:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:var(--sp-7);
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--purple);color:#fff}

/* ============================================================
   ROMAN RAIL  —  fixed left vertical numeral guide
   Replaces "01/02/03". One <div class="rail"> + N ticks.
   Usage:
     <div class="rail"></div>
     <div class="tick" style="top:8vh">I · COVER</div>  (vertical text)
   Active state: add .is-active (ink-colored).
   ============================================================ */
.rail{position:fixed;left:24px;top:0;bottom:0;width:1px;background:var(--line);z-index:40}
.tick{
  position:fixed;left:16px;z-index:41;
  font:600 var(--fs-micro)/1 var(--mono);
  color:var(--mute);letter-spacing:.18em;text-transform:uppercase;
  writing-mode:vertical-rl;transition:color var(--dur) var(--ease);
}
.tick .rn{color:var(--ink);font-weight:700}     /* the roman numeral itself */
.tick.is-active{color:var(--ink)}
.tick.is-active::before{
  content:"";position:absolute;left:8px;top:-8px;width:1px;height:22px;background:var(--grad-v);
}
@media(max-width:900px){.rail{left:12px}.tick{left:6px}}

/* ============================================================
   CHAPTER SECTION  —  one full editorial spread per chapter
   Every chapter section is a <section class="chapter ...">.
   The left padding clears the roman rail. Bottom hairline only.
   Add a chapter-keyword class for accent (.is-cover/.is-color/etc).
   ============================================================ */
.chapter{
  position:relative;
  min-height:100vh;
  padding:var(--sp-6) var(--pad-x) var(--sp-6) var(--rail-w);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.chapter.flush{min-height:auto}      /* short interstitial chapters */

/* chapter running head — mono, justified across the top */
.chead{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  font:600 var(--fs-foot)/1 var(--mono);
  color:var(--mute);letter-spacing:var(--tk-mono);text-transform:uppercase;
  margin-bottom:var(--sp-5);
  flex-wrap:wrap;
}
.chead .vol,.chead b{color:var(--ink);font-weight:600}
.chead .rn{color:var(--ink);font-weight:700;font-size:var(--fs-cap)}

/* ============================================================
   HERO ANCHOR  —  the one overpowering element per chapter
   Use ONE per chapter. Giant serif-italic display + mono footnote.
   <div class="hero-anchor">
     <h2 class="hero-title">三主色,<i>一次冲撞。</i></h2>
     <p class="hero-foot">RATIO 50/30/20 · NEVER gradient-as-soup</p>
   </div>
   Variants:
     .hero-anchor.lead  — left-weighted, asymmetric (default)
     .hero-anchor.full  — title spans wide, breaks the grid
   ============================================================ */
.hero-anchor{position:relative;max-width:none}
.hero-title{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:var(--fs-h2);line-height:.88;letter-spacing:-.03em;
  color:var(--ink);
}
.hero-title.cn{font-family:var(--cn-serif)}
.hero-title i,.hero-title em{font-style:italic}
.hero-title .grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* the giant single-glyph / wordmark specimen */
.specimen{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:var(--fs-mega);line-height:.78;letter-spacing:var(--tk-tight);
  color:var(--ink);position:relative;margin:var(--sp-4) -.04em 0;
}
.specimen .slash,.specimen .grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* mono footnote that pins under any hero — the "micro" half of the contrast */
.hero-foot,.foot-note{
  font:500 var(--fs-foot)/1.7 var(--mono);
  color:var(--mute);letter-spacing:.1em;
}
.hero-foot b,.foot-note b{color:var(--ink);font-weight:600}
/* leftborder annotation block (the editorial aside) */
.aside{
  border-left:1px solid var(--line);padding-left:var(--sp-2);
  color:var(--mute);font-size:var(--fs-cap);line-height:1.7;max-width:36ch;
}
.aside.accent{border-left-color:var(--purple)}

/* ============================================================
   EDITORIAL GRID  —  asymmetric, magazine columns (NOT 4×equal)
   Pair a heavy hero column with a lighter support column.
   <div class="ed-grid split-2-3"> A | B </div>
   Ratios encode the drama; do not default to repeat(N,1fr).
   ============================================================ */
.ed-grid{display:grid;gap:var(--sp-5);align-items:start}
.ed-grid.split-1-2{grid-template-columns:1fr 2fr}        /* aside | hero */
.ed-grid.split-2-3{grid-template-columns:2fr 3fr}
.ed-grid.split-3-2{grid-template-columns:3fr 2fr}        /* hero | aside */
.ed-grid.split-5-3{grid-template-columns:5fr 3fr}        /* poster | rest */
.ed-grid.split-12-1{grid-template-columns:1.2fr 1fr}
.ed-grid.end{align-items:end}
/* footnote row — the only place small items align in a strip */
.foot-row{
  display:flex;gap:var(--sp-5);flex-wrap:wrap;
  margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--line);
}
.foot-row > div{font:500 var(--fs-foot)/1.7 var(--mono);color:var(--mute);letter-spacing:.06em}
.foot-row b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px;letter-spacing:.04em}
@media(max-width:900px){
  .ed-grid{grid-template-columns:1fr!important;gap:var(--sp-4)}
}

/* ============================================================
   COLOR BLOCKS  —  dramatic 5:3:2 collision, NOT equal swatches
   <div class="color-blocks">
     <div class="cblock m"> ...role/nm/hex... </div>   (flex 1.4 — hero)
     <div class="cblock p"> ... </div>                 (flex 1)
     <div class="cblock c"> ... </div>                 (flex 1)
   </div>
   Restrained interaction: hover expands the block (north star).
   ============================================================ */
.color-blocks{display:flex;height:clamp(360px,72vh,720px);gap:2px}
.cblock{
  flex:1;position:relative;overflow:hidden;
  padding:var(--sp-3);
  display:flex;flex-direction:column;justify-content:space-between;
  color:#08070d;font-weight:500;
  transition:flex var(--dur) var(--ease);
}
.cblock.m{background:var(--magenta);flex:1.5}          /* 50% — the hero block */
.cblock.p{background:var(--purple);color:var(--ink);flex:1}  /* 30% */
.cblock.c{background:var(--cyan);flex:.9}              /* 20% */
.cblock:hover{flex:2.6}
.cblock .role{font:500 var(--fs-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.72}
.cblock .nm{font-family:var(--serif);font-style:italic;font-size:clamp(34px,4.4vw,72px);line-height:.9}
.cblock .hex{font-family:var(--mono);font-size:var(--fs-foot);letter-spacing:.14em}
/* single full-bleed gradient band (use sparingly — spec only, not "soup") */
.grad-band{height:clamp(72px,9vw,120px);background:var(--grad);position:relative;border-radius:var(--rad-sm)}
.grad-band .stop{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.7)}
.grad-band .stop .lab{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  font:500 var(--fs-micro)/1 var(--mono);color:var(--mute);white-space:nowrap}
@media(max-width:900px){.color-blocks{flex-direction:column;height:auto}.cblock{min-height:180px}.cblock:hover{flex:1}}

/* ============================================================
   SPEC TABLE  —  "numbers from a table", mono, hairline rules
   <table class="spec"><thead>…</thead><tbody>…</tbody></table>
   First column = ink label, values lean mono. The rubric anchor
   for every measurable spec (sizes, ratios, hex, clearspace).
   ============================================================ */
table.spec{width:100%;border-collapse:collapse;font-size:var(--fs-cap)}
table.spec th,table.spec td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec thead th{
  font:600 var(--fs-micro)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
table.spec td:first-child{color:var(--ink);font-weight:500}
table.spec .mono,table.spec td .mono{font-family:var(--mono);color:var(--cyan);font-size:12.5px;letter-spacing:.04em}
table.spec .muted{color:var(--mute)}
table.spec tbody tr:hover td{background:rgba(255,255,255,.02)}

/* key-value mono line */
.kv{font:500 var(--fs-foot)/1.9 var(--mono);color:var(--mute);letter-spacing:.06em}
.kv b{color:var(--ink);font-weight:600}
.kv .c{color:var(--cyan)}

/* ============================================================
   TYPE SPECIMEN GRID  —  one mega glyph + 4 small role cells
   The mega specimen carries the chapter; the role cells are the
   only place a small even grid is allowed (they read as footnotes).
   <div class="type-roles">
     <div class="trole"><h4>Display</h4><p class="glyph">炫</p><p class="foot-note">…</p></div>
     …
   </div>
   ============================================================ */
.type-roles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);
  margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:1px solid var(--line);
}
.trole h4{font:600 var(--fs-micro)/1.4 var(--mono);color:var(--mute);letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--sp-2)}
.trole .glyph{font-family:var(--cn-serif);font-style:italic;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.02em}
.trole .latin{font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.01em}
.trole .num{font-family:var(--mono);font-size:clamp(20px,2.2vw,28px);font-weight:600;color:var(--cyan)}
.trole p.body{font-size:var(--fs-cap);line-height:1.6;color:var(--ink)}
/* size-ramp rows (display scale demo) */
.scale-row{display:flex;align-items:baseline;gap:var(--sp-3);padding:14px 0;border-bottom:1px solid var(--line)}
.scale-row .px{font:500 var(--fs-foot)/1 var(--mono);color:var(--mute);width:124px;flex:none;letter-spacing:.08em}
.scale-row .sample{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.type-roles{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   MOCKUP FRAME  —  real scenes, NOT "logo on a dark card"
   Generic frame; each child class is a fully art-directed scene.
   <figure class="mockup">
     <div class="mockup-stage poster"> … </div>
     <figcaption class="mockup-cap"><b>海报 POSTER</b><span>A1 · 决赛日</span></figcaption>
   </figure>
   Scenes provided: .poster .stream .jersey .social .avatar .ui-screen
   ============================================================ */
.mockup{position:relative}
.mockup-cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);
  margin-top:var(--sp-2);
  font:500 var(--fs-foot)/1.4 var(--mono);color:var(--mute);letter-spacing:.14em;text-transform:uppercase;
}
.mockup-cap b{color:var(--ink);font-weight:600}
.mockup-stage{position:relative;overflow:hidden;background:var(--ink-900);border:1px solid var(--line)}

/* --- POSTER (3:4) — X mark as structure, not decoration --- */
.poster{aspect-ratio:3/4;padding:var(--sp-4);display:flex;flex-direction:column;justify-content:space-between}
.poster::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(circle at 30% 38%,rgba(253,16,253,.32),transparent 50%),
            radial-gradient(circle at 76% 72%,rgba(1,250,254,.26),transparent 55%);
  filter:blur(40px)}
.poster .top,.poster .bot{position:relative;z-index:1}
.poster .top{display:flex;justify-content:space-between;font:500 var(--fs-micro)/1 var(--mono);color:var(--mute);letter-spacing:.2em}
.poster .center{position:relative;z-index:1;text-align:center;margin:auto 0}
.poster .center .big{font-family:var(--serif);font-style:italic;font-size:clamp(96px,16vw,240px);line-height:.85;letter-spacing:var(--tk-tight)}
.poster .center .big .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.poster .bot{display:flex;justify-content:space-between;align-items:flex-end;font:500 var(--fs-micro)/1.5 var(--mono);letter-spacing:.16em;color:var(--ink)}
.poster .bot .date{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em}

/* --- STREAM lower-third (16:9) — broadcast scoreboard --- */
.stream{aspect-ratio:16/9}
.stream .screen{position:absolute;inset:0;background:linear-gradient(180deg,#1a1925 0%,#0a0911 100%)}
.stream .live{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:6px;
  font:600 var(--fs-micro)/1 var(--mono);letter-spacing:.2em;color:var(--ink)}
.stream .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fn-live);box-shadow:0 0 8px var(--fn-live)}
.stream .views{position:absolute;top:14px;right:14px;z-index:2;font:500 var(--fs-micro)/1 var(--mono);color:var(--mute);letter-spacing:.15em}
.stream .lower{position:absolute;left:0;right:0;bottom:0;height:32%;z-index:2;
  display:grid;grid-template-columns:1fr 2fr 1fr;gap:1px;background:var(--line);padding:1px}
.stream .lower > div{background:rgba(8,7,13,.92);backdrop-filter:blur(8px);padding:10px 14px;
  display:flex;flex-direction:column;justify-content:space-between}
.stream .team{font-family:var(--serif);font-style:italic;font-size:clamp(16px,2vw,22px);line-height:1}
.stream .side{font:500 9px/1 var(--mono);letter-spacing:.2em}
.stream .side.home{color:var(--cyan)}
.stream .side.away{color:var(--magenta)}
.stream .mid{align-items:center;text-align:center}
.stream .score{font-family:var(--mono);font-weight:600;font-size:clamp(22px,3vw,30px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stream .clock{font:500 9px/1 var(--mono);color:var(--mute);letter-spacing:.15em}
.stream .lower > div.awayblock{text-align:right;align-items:flex-end}

/* --- JERSEY (4:5) — X mark becomes the number --- */
.jersey{aspect-ratio:4/5;padding:var(--sp-3);display:flex;flex-direction:column;justify-content:space-between;background:var(--ink-900)}
.jersey::before{content:"";position:absolute;left:50%;top:50%;width:120%;height:80%;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:linear-gradient(180deg,var(--ink-700) 0%,var(--bg) 100%);
  clip-path:polygon(20% 0,80% 0,90% 15%,75% 100%,25% 100%,10% 15%)}
.jersey .lab{position:relative;z-index:1;display:flex;justify-content:space-between;
  font:500 9px/1 var(--mono);letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.jersey .num{position:relative;z-index:1;margin-top:auto;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:var(--fs-num);line-height:.85;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jersey .player{position:relative;z-index:1;text-align:center;
  font:500 var(--fs-foot)/1.5 var(--mono);letter-spacing:.2em;color:var(--ink)}
.jersey .player .role{color:var(--mute);font-weight:400}

/* --- SOCIAL post (1:1) — editorial tile, not a card --- */
.social{aspect-ratio:1;padding:var(--sp-3);display:flex;flex-direction:column;background:linear-gradient(160deg,#150d2c,#070612)}
.social .topband{position:absolute;left:0;right:0;top:0;height:5px;background:var(--grad)}
.social .kick{font:500 var(--fs-micro)/1 var(--mono);letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.social h5{font-family:var(--serif);font-style:italic;font-size:clamp(28px,5vw,46px);line-height:.95;margin-top:auto;letter-spacing:-.01em}
.social h5 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.social .foot{display:flex;align-items:center;gap:8px;margin-top:var(--sp-2);font:500 9px/1 var(--mono);color:var(--mute);letter-spacing:.15em}

/* --- AVATAR — logo lockup in safe field --- */
.avatar{aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,var(--ink-700),var(--bg));border:1px solid var(--line)}
.avatar.round{border-radius:50%}
.avatar img{width:64%}

/* --- UI SCREEN (9:19 phone) — product surface --- */
.ui-screen{aspect-ratio:9/19;background:var(--bg);border:6px solid var(--ink-700);border-radius:26px;overflow:hidden}
.ui-screen .stat{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  font:500 8px/1 var(--mono);color:var(--mute)}
.ui-screen .hero-card{margin:10px;height:30%;border-radius:var(--rad);background:var(--grad);
  display:flex;align-items:flex-end;padding:12px}
.ui-screen .hero-card b{font-family:var(--serif);font-style:italic;font-size:18px;color:#fff}
.ui-screen .row{margin:0 10px 8px;height:42px;border-radius:10px;background:var(--ink-700);display:flex;align-items:center;gap:9px;padding:0 10px}
.ui-screen .row .dot{width:24px;height:24px;border-radius:7px;background:var(--grad);flex:none}
.ui-screen .tabbar{position:absolute;left:0;right:0;bottom:0;height:44px;background:var(--ink-850);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around}
.ui-screen .tabbar i{width:18px;height:18px;border-radius:5px;background:var(--ink-600)}
.ui-screen .tabbar i.on{background:var(--grad)}

/* ============================================================
   LOGO SHOWCASE  —  the locked X mark + lockup, presented big
   Never recolor/rotate/redraw the asset. These frames stage it.
   <div class="logo-stage dark"><img src="assets/jx_lockup_white.svg"></div>
   Backgrounds: .dark .light .grad .photo
   ============================================================ */
.logo-stage{display:flex;align-items:center;justify-content:center;min-height:clamp(220px,30vh,360px);padding:var(--sp-4);position:relative;overflow:hidden;border:1px solid var(--line)}
.logo-stage.dark{background:radial-gradient(circle at 50% 40%,var(--ink-700),var(--ink-850))}
.logo-stage.light{background:var(--paper)}
.logo-stage.grad{background:var(--grad)}
.logo-stage.photo{background:linear-gradient(135deg,#1a1030,#06121f)}
.logo-stage img{max-height:46%;width:auto;max-width:74%;position:relative;z-index:1}
.logo-stage .stage-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  padding:10px 16px;border-top:1px solid var(--line);
  font:500 var(--fs-foot)/1 var(--mono);color:var(--mute);letter-spacing:.1em}
.logo-stage .stage-foot b{color:var(--t-mid)}
/* glowing X hero (CSS clip-path version, for cover only) */
.xmark{position:relative;width:min(46vh,440px);aspect-ratio:1}
.xmark::before,.xmark::after{content:"";position:absolute;inset:0;background:var(--grad)}
.xmark::before{clip-path:polygon(0 8%,18% 0,50% 36%,82% 0,100% 8%,64% 50%,100% 92%,82% 100%,50% 64%,18% 100%,0 92%,36% 50%)}
.xmark::after{transform:scale(1.35);filter:blur(60px);opacity:.55;z-index:-1}
/* clearspace diagram */
.clearspace{position:relative;background:var(--ink-850);padding:var(--sp-5);display:flex;align-items:center;justify-content:center;min-height:300px;border:1px solid var(--line)}
.clearspace .frame{position:relative;padding:56px}
.clearspace .frame::before{content:"";position:absolute;inset:0;border:1px dashed rgba(1,250,254,.45)}
.clearspace .frame::after{content:"";position:absolute;inset:56px;border:1px dashed rgba(253,16,253,.5)}
.clearspace img{height:96px;position:relative;z-index:2}
.cs-dim{position:absolute;font:500 var(--fs-foot)/1 var(--mono);color:var(--cyan);letter-spacing:.1em}

/* ============================================================
   DO / DON'T  —  correctness rubric, hairline cells
   Status colors used here only (small, functional).
   <div class="dd ok"><div class="dd-vis">…</div><p class="dd-cap">…</p></div>
   ============================================================ */
.dd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.dd{border:1px solid var(--line);overflow:hidden;background:var(--ink-850)}
.dd-vis{height:130px;display:flex;align-items:center;justify-content:center;background:var(--ink-900);position:relative}
.dd-vis img{max-height:64%;max-width:74%}
.dd.no .dd-vis::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(255,59,92,.07) 9px,rgba(255,59,92,.07) 18px)}
.dd-cap{padding:11px 14px;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t-mid)}
.dd-cap .mark{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.dd.ok .dd-cap .mark{background:rgba(43,232,165,.16);color:var(--fn-ok)}
.dd.no .dd-cap .mark{background:rgba(255,59,92,.16);color:var(--fn-live)}
@media(max-width:760px){.dd-grid{grid-template-columns:1fr}}

/* ============================================================
   TONE OF VOICE  —  two-column we-say / we-don't
   ============================================================ */
.tov{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.tov .col{border:1px solid var(--line)}
.tov .col h4{padding:14px 18px;font:600 var(--fs-cap)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}
.tov .we h4{color:var(--fn-ok)}
.tov .not h4{color:var(--fn-live)}
.tov ul{list-style:none;padding:8px 18px 18px}
.tov li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--t-mid);display:flex;gap:10px}
.tov li:last-child{border-bottom:0}
.tov li::before{content:"";width:5px;height:5px;border-radius:50%;margin-top:8px;flex:none;background:var(--purple)}
@media(max-width:760px){.tov{grid-template-columns:1fr}}

/* ============================================================
   TAGS / PILLS / GRAPHIC MOTIFS
   ============================================================ */
.tag{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-micro)/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--t-mid)}
.tag.ok{color:var(--fn-ok);border-color:rgba(43,232,165,.4)}
.tag.no{color:var(--fn-live);border-color:rgba(255,59,92,.4)}
.tag.accent{color:var(--cyan);border-color:rgba(1,250,254,.4)}

/* speed-line motif (graphic language) */
.motif-stage{position:relative;height:200px;overflow:hidden;background:radial-gradient(circle at 50% 50%,var(--ink-700),var(--bg));border:1px solid var(--line)}
.speedlines{position:absolute;inset:0}
.speedlines i{position:absolute;height:3px;border-radius:3px;background:var(--grad);transform:skewX(-22deg);opacity:.85}
.xtess{position:absolute;inset:0;background-image:url('assets/jx_x_white.svg');background-size:64px;background-repeat:repeat;opacity:.1}

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */
.colophon{
  padding:var(--sp-5) var(--pad-x) 0 var(--rail-w);
  display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  font:500 var(--fs-foot)/1.6 var(--mono);color:var(--mute);letter-spacing:.18em;text-transform:uppercase;
}
.colophon b{color:var(--ink);font-weight:600}

/* ============================================================
   UTILITIES
   ============================================================ */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.serif-i{font-family:var(--serif);font-style:italic}
.mono{font-family:var(--mono)}
.cn{font-family:var(--cn)}
.mute{color:var(--mute)}
.hi{color:var(--ink)}
.lead{font-size:16px;color:var(--t-mid);line-height:1.7;max-width:62ch;font-weight:300}
.rule{height:1px;background:var(--line);margin:var(--sp-4) 0}
.mt2{margin-top:var(--sp-2)}.mt3{margin-top:var(--sp-3)}.mt4{margin-top:var(--sp-4)}.mt5{margin-top:var(--sp-5)}.mt6{margin-top:var(--sp-6)}

/* ============================================================
   GLOBAL RESPONSIVE + REDUCED MOTION
   ============================================================ */
@media(max-width:900px){
  .chapter{padding:var(--sp-4) clamp(20px,5vw,32px) var(--sp-4) 48px}
  .dd-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}