/* ============================================================
   MAXDECAL 麥斯 — Brand Gateway + About
   Concept: THE MARK 麥斯之印 — the peel corner (from the logo's
   dog-ear sticker) as architecture + vermilion seal for 麥斯.
   Palette: carbon / maxdecal red / white / release-liner grey.
   ============================================================ */

:root {
  --carbon: #0A0A0C;
  --carbon-2: #121216;
  --white: #FFFFFF;
  --liner: #EFEEEA;          /* release-liner grey-white (material quote) */
  --liner-deep: #E4E3DE;
  --ink: #141418;
  --sub: #4B4D54;            /* body muted on white/liner  ≥ 7:1 */
  --line: #DEDDD8;
  --red: #E32027;            /* brand red — fills & large display only */
  --red-t: #C8161D;          /* red for small text on light bg (5.2:1) */
  --red-td: #FF5A60;         /* red for small text on carbon (6.4:1) */
  --red-deep: #8F1015;
  --mut-d: #A9ADB6;          /* muted on carbon ≥ 7:1 */
  --sp1:#E32027; --sp2:#F07818; --sp3:#F5C400; --sp4:#1E9E4B;
  --sp5:#1279C8; --sp6:#5A3FBF; --sp7:#C42B94;
  --disp: 'Archivo', 'Noto Sans TC', sans-serif;
  --body: 'IBM Plex Sans', 'Noto Sans TC', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --pad: clamp(20px, 5vw, 72px);
  --peel-shadow: drop-shadow(-6px 8px 14px rgba(0,0,0,.38));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.disp { font-family: var(--disp); font-stretch: 125%; font-weight: 900; }
.mono { font-family: var(--mono); }

/* zh display: solid Noto 900, relaxed leading — never stroked */
html[lang^="zh"] .disp { font-family: 'Noto Sans TC', var(--disp); font-stretch: 100%; letter-spacing: .015em; }
html[lang^="zh"] h1.disp, html[lang^="zh"] h2.disp { line-height: 1.18; }

/* ------------------------------------------------ topbar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 12px var(--pad);
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tb-logo { display: flex; align-items: center; gap: 12px; min-height: 38px; text-decoration: none; }
.tb-logo img { height: 30px; width: auto; }

/* scroll progress */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--red); z-index: 120; }
.tb-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tb-nav a, .tb-nav button {
  font: 500 13px/1 var(--mono); letter-spacing: .06em;
  color: #E9EAEE; text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 12px 12px; min-height: 38px; display: inline-flex; align-items: center;
}
.tb-nav a:hover, .tb-nav button:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.tb-cta {
  border: 1px solid rgba(255,255,255,.4) !important; border-radius: 3px;
}
.tb-cta:hover { border-color: #fff !important; text-decoration: none !important; }
#langBtn { border: 1px solid rgba(255,255,255,.25); border-radius: 3px; }

/* ------------------------------------------------ hero (gateway page) */
.hero {
  position: relative; min-height: 100svh; background: var(--carbon);
  color: #fff; display: grid; align-items: center; overflow: hidden;
  padding: 120px var(--pad) 84px;
}
.hero-img {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  background-position: 62% center; background-size: cover;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0A0A0C 12%, rgba(10,10,12,.88) 48%, rgba(10,10,12,.16) 100%);
}
.hero-slash {
  position: absolute; left: -12%; top: 30%; width: 44%; height: clamp(64px, 9vw, 130px);
  background: var(--red); transform: rotate(-11deg); transform-origin: left center;
  z-index: 1;
}
.hero-in { position: relative; z-index: 2; max-width: 860px; }
.hero-eyebrow {
  font: 600 12px/1.5 var(--mono); letter-spacing: .34em; color: var(--mut-d);
  margin-bottom: 22px;
}
.hero-eyebrow b { color: var(--red-td); font-weight: 600; }
.hero-word {
  font-family: var(--disp); font-stretch: 125%; font-weight: 900;
  font-size: clamp(52px, 11vw, 158px); line-height: .94; letter-spacing: .005em;
  color: #fff; text-transform: uppercase; position: relative;
  white-space: nowrap; /* brand rule: MAXDECAL never breaks — JS fitWord() scales it to the column */
}
.hero-word .lt { display: inline-block; }
.hero-word::after { /* red full stop — the mark */
  content: '.'; color: var(--red);
}
.hero-tag {
  margin-top: 26px; max-width: 640px;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.85; color: #DDDEE3;
}
.hero-tag em { font-style: normal; font-weight: 600; color: var(--red-td); }
/* light streaks racing along the slash axis (decorative, away from text) */
.hero-streak {
  position: absolute; height: 3px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  transform: rotate(-11deg); opacity: 0;
  animation: streak 4.6s ease-in-out infinite;
}
.hero-streak.s1 { top: 8%; left: 44%; width: 30%; }
.hero-streak.s2 { top: 62%; left: 70%; width: 22%; animation-delay: 2.2s;
  background: linear-gradient(90deg, transparent, rgba(255,90,96,.9), transparent); }
@keyframes streak {
  0% { transform: rotate(-11deg) translateX(-46%); opacity: 0; }
  18% { opacity: .75; }
  40% { transform: rotate(-11deg) translateX(46%); opacity: 0; }
  100% { transform: rotate(-11deg) translateX(46%); opacity: 0; }
}
.hero-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 13px 26px; text-decoration: none;
  font: 600 15px/1 var(--body); letter-spacing: .04em;
  border-radius: 3px; transition: transform .18s ease, background-position .55s ease, border-color .18s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.btn:hover { transform: translateY(-2px) ; }
.btn-red {
  color: #fff;
  background: linear-gradient(105deg, var(--red) 0 42%, #F2494F 50%, #C4151C 58% 100%);
  background-size: 300% 100%; background-position: 0% 0;
}
.btn-red:hover { background-position: 96% 0; }
.btn-ghost { border: 1px solid rgba(255,255,255,.45); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-dark { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-dark:hover { background: var(--ink); color: #fff; }
.hero-stats {
  display: flex; gap: clamp(18px, 3.4vw, 52px); margin-top: 48px; flex-wrap: wrap;
}
.hst { min-width: 96px; }
.hst b { display: block; font-family: var(--disp); font-stretch: 125%; font-weight: 900; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; color: #fff; }
.hst span { font: 500 12px/1.6 var(--mono); letter-spacing: .12em; color: var(--mut-d); }
.hero-note { margin-top: 18px; font: 400 12px/1.7 var(--mono); color: #83878F; letter-spacing: .03em; }

/* hero peel corner — the signature */
.peel {
  position: absolute; top: 0; right: 0; width: clamp(84px, 10vw, 148px); aspect-ratio: 1;
  z-index: 8; cursor: pointer; border: 0; background: none; padding: 0;
}
.peel-under {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--sp1) 0%, var(--sp2) 18%, var(--sp3) 36%, var(--sp4) 54%, var(--sp5) 72%, var(--sp6) 88%, var(--sp7) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.peel-fold {
  position: absolute; inset: 0;
  background: linear-gradient(225deg, #FFFFFF 8%, #D9D8D3 52%, #B9B8B2 100%);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  filter: var(--peel-shadow);
}
.peel-lab {
  position: absolute; left: 6px; bottom: 10px; transform: rotate(-45deg);
  transform-origin: left bottom;
  font: 600 10.5px/1 var(--mono); letter-spacing: .22em; color: #26272B;
  white-space: nowrap; pointer-events: none;
}
.peel:hover .peel-fold { background: linear-gradient(225deg, #FFFFFF 16%, #E4E3DE 58%, #C6C5BF 100%); }

/* boot animation */
.boot .hero-slash { animation: slashIn .8s cubic-bezier(.2,.8,.2,1) both; }
.boot .hero-in > * { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.boot .hero-in > *:nth-child(2) { animation-delay: .08s; }
.boot .hero-in > *:nth-child(3) { animation-delay: .26s; }
.boot .hero-in > *:nth-child(4) { animation-delay: .36s; }
.boot .hero-in > *:nth-child(5) { animation-delay: .44s; }
.boot .hero-in > *:nth-child(6) { animation-delay: .5s; }
.boot .hero-word .lt {
  animation: ltRise .68s cubic-bezier(.16,.9,.24,1) both;
  animation-delay: calc(.1s + var(--i, 0) * .05s);
}
.boot .hero-img { animation: kburns 26s ease-in-out infinite alternate; will-change: transform; }
.boot .peel { animation: peelIn .7s cubic-bezier(.2,.8,.2,1) .8s both; transform-origin: top right; }
.peel-fold { animation: flut 4.5s ease-in-out 2.4s infinite; }
@keyframes slashIn { from { transform: rotate(-11deg) translateX(-24%); opacity: 0; } to { transform: rotate(-11deg) translateX(0); opacity: 1; } }
@keyframes rise { from { transform: translateY(26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ltRise { from { transform: translateY(.66em) skewY(5deg); opacity: 0; } to { transform: translateY(0) skewY(0); opacity: 1; } }
@keyframes kburns { from { transform: scale(1.02); } to { transform: scale(1.09) translateX(-1.2%); } }
@keyframes flut { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2.5px, 2.5px); } }
@keyframes peelIn { from { transform: scale(0); } to { transform: scale(1); } }

/* ------------------------------------------------ marquee */
.marq {
  background: var(--carbon); border-top: 1px solid #1E1F24; overflow: hidden;
  padding: 16px 0; position: relative;
}
.marq::before {
  content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--sp1) 0 14.3%, var(--sp2) 0 28.6%, var(--sp3) 0 42.9%, var(--sp4) 0 57.2%, var(--sp5) 0 71.5%, var(--sp6) 0 85.8%, var(--sp7) 0 100%);
}
.marq-track { display: flex; gap: 46px; width: max-content; animation: marq 34s linear infinite; padding-top: 5px; }
.marq-track span { font: 600 13px/1 var(--mono); letter-spacing: .3em; color: var(--mut-d); white-space: nowrap; }
.marq-track span i { font-style: normal; color: var(--red-td); }
.marq-track.rev { animation: marqRev 46s linear infinite; margin-top: 12px; padding-top: 0; }
.marq-track.out span {
  font-family: var(--disp); font-stretch: 125%; font-weight: 900; font-size: 22px;
  letter-spacing: .18em; color: transparent;
  -webkit-text-stroke: 1px #5A5F6A; /* Latin outline only — CJK never stroked */
}
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes marqRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ghost display words (decorative Latin outlines) */
.ghost {
  position: absolute; pointer-events: none; user-select: none; z-index: 0;
  font-family: var(--disp); font-stretch: 125%; font-weight: 900; line-height: 1;
  color: transparent; white-space: nowrap;
}
.ghost-gate { top: 30px; right: -10px; font-size: clamp(64px, 11vw, 150px); -webkit-text-stroke: 1.5px rgba(20,20,24,.09); }
.ghost-ab { top: 132px; right: -8px; font-size: clamp(46px, 9vw, 128px); -webkit-text-stroke: 1.5px rgba(255,255,255,.13); }

/* ------------------------------------------------ gateway (sticker sheet) */
.gate {
  background:
    repeating-linear-gradient(-32deg, transparent 0 92px, rgba(20,20,24,.028) 92px 93px),
    var(--liner);
  padding: clamp(66px, 9vw, 120px) var(--pad);
  position: relative; overflow: hidden;
}
.gate-wm { /* printed-liner watermark, decorative (SVG bg, not DOM text) */
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-repeat: repeat;
}
.sec-kick { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sec-kick .no { font: 600 12px/1 var(--mono); letter-spacing: .26em; color: var(--red-t); }
.sec-kick .rule { height: 1px; width: 64px; background: var(--red-t); }
.sec-h {
  font-family: var(--disp); font-stretch: 125%; font-weight: 900;
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.06; text-transform: uppercase;
  color: var(--ink); max-width: 900px;
}
html[lang^="zh"] .sec-h { text-transform: none; }
.sec-sub { margin-top: 14px; max-width: 640px; font-size: clamp(15px, 1.35vw, 17px); color: var(--sub); }
.tiles {
  margin-top: clamp(34px, 4.5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px;
  position: relative; z-index: 1;
}
.tile {
  background: #fff; border: 1px solid #D6D5CF; border-radius: 14px;
  padding: 26px 24px 24px; text-decoration: none; position: relative;
  box-shadow: 0 2px 6px rgba(15,15,18,.05), 0 14px 30px rgba(15,15,18,.07);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column; gap: 10px; min-height: 178px;
  overflow: hidden;
}
.tile::before { /* kiss-cut edge */
  content: ''; position: absolute; inset: 7px; border: 1px dashed #D9D8D2; border-radius: 9px;
  pointer-events: none;
}
.tile::after { /* peel corner on hover */
  content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
  background: linear-gradient(225deg, #fff 10%, #DCDBD5 60%, #C3C2BC 100%);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  filter: drop-shadow(-3px 4px 6px rgba(0,0,0,.22));
  transition: width .22s ease, height .22s ease;
}
.tile:hover::after, .tile:focus-visible::after { width: 34px; height: 34px; }
.tile:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 4px 10px rgba(15,15,18,.07), 0 24px 44px rgba(15,15,18,.12); }
.tile .tno { font: 600 12px/1 var(--mono); letter-spacing: .2em; color: var(--red-t); }
.tile h3 { font-family: var(--disp); font-stretch: 118%; font-weight: 900; font-size: 21px; line-height: 1.28; color: var(--ink); }
html[lang^="zh"] .tile h3 { font-stretch: 100%; }
.tile h3 small { display: block; font: 500 11.5px/1.6 var(--mono); letter-spacing: .14em; color: var(--sub); text-transform: uppercase; margin-top: 3px; }
.tile p { font-size: 15px; line-height: 1.72; color: var(--sub); flex: 1; }
.tile .go { font: 600 13px/1 var(--mono); letter-spacing: .12em; color: var(--red-t); }
.tile:hover .go { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------ full-bleed image bands */
.band {
  position: relative; color: #fff; overflow: hidden;
  padding: clamp(80px, 12vw, 168px) var(--pad);
  background-size: cover; background-position: center;
}
.band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.72) 48%, rgba(8,8,10,.3) 100%); }
.band-in {
  position: relative; max-width: 760px;
  background: rgba(6,6,8,.78);
  border-left: 3px solid var(--red);
  padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3vw, 40px);
}
.band .sec-kick .no { color: #fff; }
.band .sec-kick .rule { background: var(--red-td); }
.band .sec-h { color: #fff; }
.band p { margin-top: 16px; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.85; color: #EBECEF; max-width: 620px; }
.band .btn { margin-top: 28px; }
.band-badges { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.band-badges span {
  font: 600 12px/1 var(--mono); letter-spacing: .16em; color: #fff;
  border: 1px solid rgba(255,255,255,.5); padding: 12px 14px; border-radius: 3px;
  background: rgba(6,6,8,.85);
}
.img-tag {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  font: 400 12px/1 var(--mono); letter-spacing: .1em; color: #DADCE1;
  background: rgba(5,5,7,.92); padding: 7px 10px; border-radius: 3px;
}

/* ------------------------------------------------ manifesto */
.mani { background: var(--white); padding: clamp(80px, 11vw, 150px) var(--pad); }
.mani-in { max-width: 980px; margin: 0 auto; }
.mani blockquote {
  font-family: var(--disp); font-stretch: 112%; font-weight: 900;
  font-size: clamp(24px, 3.6vw, 46px); line-height: 1.34; color: var(--ink);
}
html[lang^="zh"] .mani blockquote { font-stretch: 100%; font-weight: 900; line-height: 1.5; }
.mani blockquote em { font-style: normal; color: var(--red-t); }
.mani figcaption { margin-top: 22px; font: 500 13px/1.6 var(--mono); letter-spacing: .18em; color: var(--sub); }
.mani .mani-ctas { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* ------------------------------------------------ footer */
.foot {
  background: var(--carbon); color: var(--mut-d);
  padding: 52px var(--pad) 40px; border-top: 4px solid var(--red);
}
.foot-grid { display: flex; gap: 34px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.foot img { height: 34px; width: auto; }
.foot-brand p { margin-top: 14px; font: 500 12.5px/1.8 var(--mono); letter-spacing: .06em; max-width: 380px; }
.foot-links { display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.foot-links div { display: flex; flex-direction: column; gap: 4px; }
.foot-links b { font: 600 11.5px/2.4 var(--mono); letter-spacing: .22em; color: #7E828B; text-transform: uppercase; }
.foot-links a { font: 500 14px/1.5 var(--body); color: #D4D6DB; text-decoration: none; padding: 7px 0; min-height: 38px; display: inline-flex; align-items: center; }
.foot-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-note { margin-top: 40px; padding-top: 18px; border-top: 1px solid #1E1F24; font: 400 12px/1.9 var(--mono); color: #8A8E97; letter-spacing: .04em; }

/* ------------------------------------------------ reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
.rv-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.2,.8,.2,1), opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rv-clip.in { clip-path: inset(0 0 0 0); }

/* ============================================================
   ABOUT page
   ============================================================ */
.ab-hero {
  background: var(--carbon); color: #fff;
  padding: 150px var(--pad) clamp(64px, 9vw, 110px);
  position: relative; overflow: hidden;
}
.ab-hero::before { /* diagonal red kick, top-right, clear of text */
  content: ''; position: absolute; top: 44px; right: -140px; width: 380px; height: 74px;
  background: var(--red); transform: rotate(-11deg); opacity: .96;
}
.ab-hero::after { /* film spectrum baseline */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg, var(--sp1) 0 14.3%, var(--sp2) 0 28.6%, var(--sp3) 0 42.9%, var(--sp4) 0 57.2%, var(--sp5) 0 71.5%, var(--sp6) 0 85.8%, var(--sp7) 0 100%);
}
.ab-hero .kick { font: 600 12px/1.5 var(--mono); letter-spacing: .32em; color: var(--red-td); margin-bottom: 20px; }
.ab-title {
  font-size: clamp(52px, 9.6vw, 138px); line-height: .96; text-transform: uppercase;
  color: #fff; position: relative; z-index: 1;
  white-space: nowrap; /* brand rule: MAXDECAL never breaks — JS fitWord() scales it to fit */
}
.ab-hero .ab-open { color: #EDEEF1; }
.ab-hero .ab-open em { color: var(--red-td); }
.ab-hero .ab-lede { color: #C9CCD3; }
.ab-title .lt { display: inline-block; }
.ab-title::after { content: '.'; color: var(--red); }
.boot .ab-title .lt {
  animation: ltRise .68s cubic-bezier(.16,.9,.24,1) both;
  animation-delay: calc(.05s + var(--i, 0) * .045s);
}
.ab-open {
  margin-top: 30px; max-width: 860px;
  font-family: var(--disp); font-stretch: 116%; font-weight: 900;
  font-size: clamp(22px, 3.1vw, 40px); line-height: 1.4; color: var(--ink);
}
html[lang^="zh"] .ab-open { font-stretch: 100%; line-height: 1.52; }
.ab-open em { font-style: normal; color: var(--red-t); }
.ab-lede { margin-top: 22px; max-width: 700px; font-size: clamp(15.5px, 1.45vw, 18px); line-height: 1.9; color: var(--sub); }

.ab-hero .kick .kick-yr { color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; padding: 3px 8px; margin-left: 4px; letter-spacing: .22em; }

/* journey strip — five chapters, one glance (anchor nav under the about hero) */
.ab-way { background: #fff; border-bottom: 1px solid var(--line); padding: 0 var(--pad); }
.ab-way ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1280px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-way li { border-right: 1px solid var(--line); }
.ab-way li:last-child { border-right: 0; }
.ab-way a { display: block; height: 100%; padding: 22px 18px 24px 0; margin-right: 18px; text-decoration: none; color: inherit; border-top: 3px solid transparent; transition: border-color .25s ease; }
.ab-way li + li a { padding-left: 0; }
.ab-way a:hover, .ab-way a:focus-visible { border-top-color: var(--red); outline: none; }
.ab-way .no { display: block; font: 600 11px/1 var(--mono); letter-spacing: .24em; color: var(--red-t); }
.ab-way .yr { display: block; margin-top: 9px; font-family: var(--disp); font-stretch: 120%; font-weight: 900; font-size: clamp(20px, 2vw, 26px); line-height: 1.05; color: var(--ink); text-transform: uppercase; }
html[lang^="zh"] .ab-way .yr { font-stretch: 100%; text-transform: none; }
.ab-way .lb { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--sub); }
.ab-way a:hover .yr { color: var(--red-t); }

/* chapters */
.chap { padding: clamp(64px, 9vw, 128px) var(--pad); position: relative; scroll-margin-top: 72px; }
.chap.alt { background: var(--liner); }
.chap-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 5vw, 76px); align-items: center; max-width: 1280px; margin: 0 auto;
}
.chap-grid.flip .chap-txt { order: 2; }
.chap-no {
  font-family: var(--disp); font-stretch: 125%; font-weight: 900;
  font-size: clamp(64px, 9vw, 132px); line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px rgba(200,22,29,.4); /* Latin digits only — CJK never stroked */
  position: absolute; top: clamp(18px, 3vw, 40px); right: var(--pad); pointer-events: none;
}
.chap.alt .chap-no { -webkit-text-stroke-color: rgba(200,22,29,.5); }
.chap-txt .ck { display: flex; align-items: center; gap: 12px; font: 600 12px/1 var(--mono); letter-spacing: .26em; color: var(--red-t); margin-bottom: 16px; }
.chap-txt .ck::before { content: ''; width: 34px; height: 1px; background: var(--red-t); }
.chap-txt h2 {
  font-family: var(--disp); font-stretch: 120%; font-weight: 900;
  font-size: clamp(27px, 3.6vw, 46px); line-height: 1.14; color: var(--ink); text-transform: uppercase;
}
html[lang^="zh"] .chap-txt h2 { font-stretch: 100%; text-transform: none; line-height: 1.3; }
.chap-txt p { margin-top: 18px; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.92; color: var(--sub); max-width: 560px; }
.chap-txt p b { color: var(--ink); }
.chap-fig { position: relative; border-radius: 6px; overflow: hidden; }
.chap-fig img { width: 100%; height: clamp(280px, 34vw, 470px); object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.chap-fig:hover img { transform: scale(1.05); }
.chap-fig::before {
  content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 44px; z-index: 2;
  background: linear-gradient(225deg, var(--liner) 12%, #D8D7D1 58%, #BBBAB4 100%);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  filter: drop-shadow(-3px 4px 6px rgba(0,0,0,.25));
}
.chap-fig .under {
  content: ''; position: absolute; top: 0; right: 0; width: 44px; height: 44px; z-index: 1;
  background: linear-gradient(135deg, var(--sp1), var(--sp3), var(--sp5));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.chap-quote {
  margin-top: 20px; border-left: 3px solid var(--red); padding: 6px 0 6px 18px;
  font-size: 15px; line-height: 1.85; color: var(--sub); font-style: normal;
}

/* stats (about today) */
.ab-stats {
  margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.ab-stats div { background: #fff; padding: 20px 18px; }
.ab-stats b { display: block; font-family: var(--disp); font-stretch: 125%; font-weight: 900; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; color: var(--ink); }
.ab-stats b i { font-style: normal; color: var(--red-t); }
.ab-stats span { font: 500 12px/1.7 var(--mono); letter-spacing: .1em; color: var(--sub); }

/* mission quote band */
.mission {
  background: var(--red); color: #fff; padding: clamp(70px, 10vw, 130px) var(--pad);
  position: relative; overflow: hidden;
}
.mission::before {
  content: ''; position: absolute; top: -40%; right: -6%; width: 42%; height: 190%;
  background: rgba(255,255,255,.07); transform: rotate(-11deg);
}
.mission blockquote {
  position: relative; max-width: 1020px;
  font: 900 clamp(23px, 3.4vw, 44px)/1.5 'Noto Sans TC', var(--disp), sans-serif;
  color: #fff;
}
.mission blockquote.en-face { font-family: var(--disp); font-stretch: 112%; line-height: 1.34; }
.mission figcaption { position: relative; margin-top: 20px; font: 600 12.5px/1.6 var(--mono); letter-spacing: .2em; color: #fff; }

/* ------------------------------------------------ responsive: mobile is its own design */
@media (max-width: 940px) {
  .tb-nav a.tb-hide { display: none; }
  .hero { display: block; padding: 104px 20px 40px; }
  .hero-streak { display: none; }
  .marq-track.out span { font-size: 17px; }
  .ghost-gate { font-size: 15vw; top: 18px; }
  .ghost-ab { font-size: 12vw; top: 84px; }
  .ab-title { font-size: clamp(44px, 11.4vw, 72px); }
  .hero-img {
    position: relative; width: calc(100% + 40px); margin: 26px -20px -40px;
    height: 300px; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  }
  .hero-img::after { background: linear-gradient(180deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,.05) 55%); }
  .hero-slash { display: none; }
  .hero-word { font-size: clamp(36px, 10.9vw, 72px); }
  .hero-word::after {
    content: ''; display: block; width: 130px; height: 10px; margin-top: 16px;
    background: var(--red); transform: skewX(-30deg);
  }
  .hero-tag { font-size: 15.5px; }
  .hero-stats { gap: 20px 26px; margin-top: 34px; }
  .peel { width: 74px; }
  .peel-lab { display: none; }
  .chap-grid { grid-template-columns: minmax(0, 1fr); }
  .chap-grid.flip .chap-txt { order: 0; }
  .chap-fig img { height: 240px; }
  .chap-no { font-size: 64px; top: 12px; }
  .ab-hero { padding-top: 118px; }
  .ab-hero .kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
  .ab-way { padding: 0 20px; }
  .ab-way ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ab-way li { border-right: 0; border-bottom: 1px solid var(--line); }
  .ab-way li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .ab-way a { padding: 16px 0 18px; margin-right: 0; }
  .ab-way .yr { font-size: 19px; }
  .ab-way .lb { font-size: 15px; line-height: 1.5; }
  .band { padding: 72px 20px; }
  .tile { min-height: 0; }
  .tile:hover { transform: translateY(-3px); }
  .foot-grid { flex-direction: column; }
}
@media (max-width: 420px) {
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marq-track, .marq-track.rev { animation: none; }
  .boot .hero-slash, .boot .hero-in > *, .boot .peel, .boot .hero-img,
  .boot .hero-word .lt, .boot .ab-title .lt, .peel-fold, .hero-streak { animation: none; }
  .hero-streak { display: none; }
  .rv, .rv-clip { opacity: 1; transform: none; transition: none; clip-path: none; }
  .btn, .tile, .chap-fig img { transition: none; }
}

/* ============================================================
   IN THE FIELD — real event photos (2026-08-24)
   about: .ab-heroimg hero band + .field gallery · index: .fstrip
   ============================================================ */

/* about hero photo band — sits right under the carbon hero's spectrum baseline */
.ab-heroimg { margin: 0; background: var(--carbon); }
.ab-heroimg img {
  width: 100%; height: clamp(300px, 52vw, 620px);
  object-fit: cover; object-position: 50% 42%;
}
.ab-heroimg figcaption {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 13px var(--pad) 15px; background: var(--carbon);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ab-heroimg .fh-kick { font: 600 11px/1 var(--mono); letter-spacing: .28em; color: var(--red-td); white-space: nowrap; }
.ab-heroimg .fh-lab { font: 400 13px/1.6 var(--body); color: #C9CCD3; }

/* field gallery (about) */
.field { background: var(--liner); padding: clamp(64px, 9vw, 120px) var(--pad); scroll-margin-top: 72px; }
.field-in { max-width: 1280px; margin: 0 auto; }
.field-sub { margin-top: 16px; max-width: 640px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.85; color: var(--sub); }
.field-grid {
  margin-top: 36px; display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-auto-rows: clamp(190px, 23vw, 292px);
}
.fg-cell { position: relative; margin: 0; border-radius: 6px; overflow: hidden; }
.fg-tall { grid-row: span 2; }
.fg-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.fg-cell:hover img { transform: scale(1.04); }

/* photo caption chips (shared) */
.fg-cell figcaption, .fs-cell figcaption {
  position: absolute; left: 12px; bottom: 10px; z-index: 2; max-width: calc(100% - 24px);
  font: 400 12px/1.5 var(--mono); letter-spacing: .06em; color: #DADCE1;
  background: rgba(5,5,7,.92); padding: 7px 10px; border-radius: 3px;
}

/* field strip (gateway index) */
.fstrip { background: var(--liner); padding: clamp(64px, 9vw, 120px) var(--pad); }
.fstrip-in { max-width: 1280px; margin: 0 auto; }
.fstrip-grid {
  margin-top: 34px; display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fs-cell { position: relative; margin: 0; border-radius: 6px; overflow: hidden; height: clamp(190px, 22vw, 300px); }
.fs-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.fs-cell:hover img { transform: scale(1.04); }
.fstrip-cta { margin-top: 30px; }

@media (max-width: 940px) {
  .ab-heroimg img { height: clamp(240px, 62vw, 380px); }
  .ab-heroimg figcaption { padding: 12px 20px 14px; gap: 6px 14px; }
  .field, .fstrip { padding-left: 20px; padding-right: 20px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 230px; }
  .fg-tall { grid-row: auto; }
  .fstrip-grid { grid-template-columns: minmax(0, 1fr); }
  .fs-cell { height: 230px; }
  .fg-cell figcaption, .fs-cell figcaption { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-cell img, .fs-cell img { transition: none; }
}