/* /rules/ — WLSC 2026 competition rules, version 1.0.

   A 1:1 build of the client's page design (2026-09-11). The design is 941px
   wide; every size here is its measurement × 1.53 at a 1440px window:
     hero 356 · category cards 255 · key dates 200 · chapter index 245 wide ·
     section titles 34 · video panel 3:1 (the background's own ratio, so the
     real phone frame in 12-video-verification-background lines up) ·
     photo row 184 · CTA band 200.
   Loaded on this page only, after site.css; every selector is under .rx or
   body.is-rules. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0300-0309, U+0323, U+1E00-1EFF, U+2000-206F, U+20AB, U+2122, U+2190-2194;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020, U+0030-0039, U+00B7;
}
/* Only the Han characters the zh-hant archive copy uses (see
   tools/build-history-fonts.py). Any other character falls through to the
   locale serif, and the test suite fails before that can happen to the copy. */
@font-face {
  font-family: "WLSC Serif TC";
  src: url("/assets/fonts/noto-serif-tc-history.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

@font-face {
  font-family: "Great Vibes";
  src: url("/assets/fonts/great-vibes-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0041-005A, U+0061-007A;
}


body.is-rules {
  --rx-bg: #0a0807;
  --rx-panel: #14100d;
  --rx-gold: #d8b479;
  --rx-gold-2: #efd3a0;
  --rx-cream: #f2e7d6;
  --rx-dim: rgba(242, 231, 214, .66);
  --rx-line: rgba(216, 180, 121, .28);
  --rx-pad: clamp(20px, 3.2vw, 46px);
  --rx-serif: "Cormorant Garamond", var(--font-display);
  --rx-latin: "Cormorant Garamond", Georgia, serif;
  --rx-script: "Great Vibes", cursive;
  background: var(--rx-bg);
}
html:lang(zh-Hant) body.is-rules { --rx-serif: "Cormorant Garamond", "WLSC Serif TC", var(--font-display); }

.rx { background: var(--rx-bg); color: var(--rx-cream); font-family: var(--font-body); line-height: 1.6; overflow-x: clip; font-variant-numeric: lining-nums; }
:where(.rx) a { color: inherit; text-decoration: none; }
:where(.rx) p { max-width: none; margin: 0; }
:where(.rx) figure { margin: 0; }
:where(.rx) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.rx) img { display: block; width: 100%; height: auto; }
.rx [id] { scroll-margin-top: 90px; }
.rx-i { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: var(--rx-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rx-words { color: var(--rx-dim); font: 500 13px/1.95 var(--rx-latin); letter-spacing: .3em; text-transform: uppercase; }
.rx-rule { display: block; width: 44px; height: 1px; background: var(--rx-gold); opacity: .8; }

/* ---------------------------------------------------------- header (design bar) */
body.is-rules .hd { position: sticky; top: 0; background: var(--rx-bg); border-bottom: 1px solid var(--rx-line); backdrop-filter: none; }
/* The bar's layout is the site's own on every page (links, language and
   register pushed to the right, as on the home page); this page only gives it
   a solid ground and a gold hairline. */

/* ---------------------------------------------------------- hero */
.rx-hero { position: relative; overflow: hidden; min-height: clamp(300px, 24.7vw, 380px); border-bottom: 1px solid var(--rx-line); display: flex; align-items: center; }
.rx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; }
.rx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 7, .92) 0%, rgba(10, 8, 7, .55) 34%, rgba(10, 8, 7, 0) 58%); pointer-events: none; }
.rx-hero__copy { position: relative; z-index: 1; padding: 34px var(--rx-pad) 36px calc(var(--rx-pad) + 26px); }
.rx-hero .crumb { margin: 0 0 14px; font-size: 13px; color: var(--rx-dim); }
.rx-hero .crumb ol { display: flex; gap: .5em; list-style: none; margin: 0; padding: 0; }
.rx-hero .crumb li + li::before { content: "/"; margin-right: .5em; color: var(--rx-dim); }
.rx-hero .crumb a { color: var(--rx-gold-2); }
.rx-hero .crumb [aria-current] { color: var(--rx-cream); }
.rx-hero h1 {
  margin: 0; color: var(--rx-cream);
  font: 600 clamp(3.2rem, 6.6vw, 6rem)/1.08 var(--rx-serif); letter-spacing: .06em;
  background: linear-gradient(180deg, #fffaf0 0%, #f1e2c6 70%, #dcc091 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rx-rulebook { margin-top: 8px; color: var(--rx-gold-2); font: 500 clamp(1.1rem, 1.7vw, 1.55rem)/1.2 var(--rx-latin); letter-spacing: .12em; }
.rx-tagline { margin-top: 12px; font: 500 clamp(1.15rem, 1.8vw, 1.65rem)/1.4 var(--rx-serif); letter-spacing: .1em; color: var(--rx-cream); }
.rx-pill { display: inline-block; margin-top: 18px; padding: 3px 18px; border: 1px solid var(--rx-cream); border-radius: 999px; font: 500 15px/1.6 var(--rx-latin); letter-spacing: .3em; }
.rx-hero__side { position: absolute; z-index: 1; right: var(--rx-pad); top: 50%; transform: translateY(-50%); text-align: right; }
.rx-hero__side .rx-rule { margin: 20px 0 20px auto; width: 34px; }
.rx-words--mark { color: var(--rx-cream); font-size: 14px; letter-spacing: .24em; }

/* ---------------------------------------------------------- category cards */
.rx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 22px var(--rx-pad) 24px; border-bottom: 1px solid var(--rx-line); }
.rx-card { position: relative; display: block; aspect-ratio: 325 / 255; overflow: hidden; border: 1px solid var(--rx-line); background: var(--rx-panel); }
.rx-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.rx-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 7, .35) 0%, rgba(10, 8, 7, 0) 30%, rgba(10, 8, 7, .1) 55%, rgba(10, 8, 7, .78) 100%); }
.rx-card:hover img { transform: scale(1.04); }
.rx-card > span { position: absolute; z-index: 1; left: 24px; }
.rx-card__no { top: 16px; font: 500 clamp(2.4rem, 3.8vw, 3.5rem)/1 var(--rx-latin); color: var(--rx-cream); font-variant-numeric: lining-nums; }
.rx-card__t { bottom: 64px; font: 500 clamp(1.25rem, 2vw, 1.9rem)/1.2 var(--rx-serif); letter-spacing: .06em; }
.rx-card__cta { bottom: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--rx-cream); font-size: 17px; letter-spacing: .08em; }
.rx-card__cta span { display: inline-block; margin-left: 10px; transition: transform .3s; }
.rx-card:hover .rx-card__cta span { transform: translateX(4px); }

/* ---------------------------------------------------------- key dates */
.rx-dates { display: grid; grid-template-columns: minmax(0, .17fr) minmax(0, .63fr) minmax(0, .2fr); align-items: center; gap: 24px; min-height: 200px; padding: 18px var(--rx-pad); border-bottom: 1px solid var(--rx-line); }
.rx-dates__t h2 { margin: 0; font: 600 clamp(1.8rem, 2.9vw, 2.65rem)/1.2 var(--rx-serif); letter-spacing: .06em; color: var(--rx-cream); }
.rx-dates__t p { margin-top: 6px; font: 500 13px var(--rx-latin); letter-spacing: .3em; color: var(--rx-gold); }
.rx-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 50px; }
.rx-line::before { content: ""; position: absolute; top: 17px; left: 17px; right: 17%; height: 1px; background: linear-gradient(90deg, var(--rx-gold), rgba(216, 180, 121, .45)); }
.rx-line li { position: relative; display: flex; align-items: center; gap: 18px; }
.rx-line__no { position: absolute; top: -50px; left: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dfb2, #c99c5c); color: #2a1c0e; font: 600 15px/1 var(--rx-latin); box-shadow: 0 0 16px rgba(216, 180, 121, .45); font-variant-numeric: lining-nums; }
.rx-line li:first-child .rx-line__no { left: 20px; }
.rx-line__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--rx-gold); border-radius: 50%; font-size: 26px; }
.rx-line__tx b { display: block; font-weight: 500; font-size: clamp(1rem, 1.35vw, 1.25rem); }
.rx-line__tx span { display: block; margin-top: 4px; color: var(--rx-gold-2); font-size: clamp(1.05rem, 1.5vw, 1.4rem); }
.rx-dates__side { align-self: stretch; display: flex; align-items: center; padding-left: 40px; border-left: 1px solid var(--rx-line); }
.rx-dates__side .rx-words { font-size: 12.5px; letter-spacing: .14em; line-height: 2; color: var(--rx-cream); }

/* ---------------------------------------------------------- chapter index + 01/02 */
.rx-top { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 32px; padding: 30px var(--rx-pad) 0; }
.rx-aside { padding-right: 24px; border-right: 1px solid var(--rx-line); padding-bottom: 24px; }
.rx-aside__t { font: 600 clamp(1.4rem, 2vw, 1.85rem)/1.2 var(--rx-serif); letter-spacing: .06em; }
.rx-aside__t span { display: block; margin-top: 6px; font: 500 13px var(--rx-latin); letter-spacing: .3em; color: var(--rx-dim); }
.rx-aside ol { margin: 30px 0 60px; display: grid; gap: 14px; }
.rx-aside a { position: relative; display: flex; align-items: baseline; gap: 16px; padding-left: 20px; font-size: clamp(1rem, 1.4vw, 1.3rem); letter-spacing: .06em; color: var(--rx-cream); transition: color .3s; }
.rx-aside a b { flex: 0 0 auto; font: 500 1.25em/1 var(--rx-latin); font-variant-numeric: lining-nums; }
/* The name is its own flex item that may shrink and break: as a bare text
   node it could not go narrower than its longest word, so "specification"
   and "disqualification" ran across the column rule in English. */
.rx-aside a span { min-width: 0; overflow-wrap: anywhere; }
/* Latin, Thai and Myanmar chapter names are several times longer than the
   Han ones the 200px column was measured for. */
html:is(:lang(en), :lang(vi), :lang(th), :lang(my)) .rx-top { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
html:is(:lang(en), :lang(vi), :lang(th), :lang(my)) .rx-aside a { font-size: clamp(.95rem, 1.15vw, 1.1rem); line-height: 1.35; }
.rx-aside a:hover { color: var(--rx-gold-2); }
.rx-aside a.is-active { color: var(--rx-gold-2); }
.rx-aside a.is-active::before { content: ""; position: absolute; left: 0; top: -4px; bottom: -4px; width: 2px; background: var(--rx-gold); }
.rx-aside .rx-rule { margin: 0 0 50px 20px; width: 40px; }
.rx-aside .rx-words { padding-left: 20px; font-size: 12px; }

.rx-sec { padding-bottom: 26px; }
.rx-sec--wide { padding-inline: var(--rx-pad); }
.rx-h { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 20px; }
.rx-h h2 { margin: 0; display: flex; align-items: baseline; gap: 24px; white-space: nowrap; font: 600 clamp(1.5rem, 2.35vw, 2.15rem)/1.2 var(--rx-serif); letter-spacing: .06em; color: var(--rx-cream); }
.rx-h h2 b { font: 500 1.3em/1 var(--rx-latin); color: var(--rx-gold); font-variant-numeric: lining-nums; }
.rx-h__line { flex: 1; height: 1px; margin-bottom: 10px; background: var(--rx-line); }
.rx-h p { margin-bottom: 4px; font: 500 13px var(--rx-latin); letter-spacing: .3em; color: var(--rx-gold); white-space: nowrap; }

.rx-tiles { display: grid; gap: 16px; }
.rx-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rx-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rx-tiles li { display: flex; align-items: center; gap: 22px; min-height: 104px; padding: 16px 28px; border: 1px solid var(--rx-line); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), var(--rx-panel); font-size: 44px; }
.rx-tiles p { min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.rx-tiles b { display: block; font-weight: 500; font-size: clamp(.95rem, 1.3vw, 1.15rem); line-height: 1.45; }
.rx-tiles span { display: block; color: var(--rx-dim); font-size: clamp(.9rem, 1.15vw, 1.05rem); line-height: 1.5; }

/* video panel: 3:1, the background's own ratio — the phone sits exactly in
   the frame drawn into 12-video-verification-background (x 59.6%, y 3.6%,
   16.8% × 90.5%, 9:16). */
.rx-video { position: relative; aspect-ratio: 2172 / 724; overflow: hidden; border: 1px solid var(--rx-line); background: var(--rx-panel); }
.rx-video__stage { position: absolute; inset: 0; z-index: 0; }
.rx-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rx-video__copy, .rx-video__side { z-index: 1; }
.rx-video__copy { position: absolute; left: 3.5%; top: 50%; transform: translateY(-50%); width: 55%; }
.rx-video__t { display: flex; align-items: center; gap: .45em; font: 600 clamp(1.35rem, 2.9vw, 2.75rem)/1.2 var(--rx-serif); letter-spacing: .04em; white-space: nowrap; }
.rx-video__t i { display: inline-block; width: 1px; height: .9em; background: var(--rx-cream); opacity: .7; }
.rx-video__sub { margin-top: 16px; font: 500 clamp(.95rem, 1.45vw, 1.35rem)/1.4 var(--rx-serif); letter-spacing: .12em; color: var(--rx-gold-2); }
.rx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.rx-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid var(--rx-line); border-radius: 3px; background: rgba(10, 8, 7, .45); font-size: clamp(.75rem, .98vw, .95rem); white-space: nowrap; }
.rx-chips .rx-i { font-size: 1.5em; }
.rx-phone { position: absolute; left: 59.6%; top: 3.6%; width: 16.8%; height: 90.5%; overflow: hidden; border: 3px solid #2c2a28; border-radius: 22px; background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 50px rgba(0, 0, 0, .6); }
.rx-phone::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 4px; width: 38%; height: 12px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0b0b0b; }
.rx-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.rx-phone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .55)); }
.rx-phone__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, .15); backdrop-filter: blur(2px); }
.rx-phone__play::after { content: ""; position: absolute; left: 38%; top: 28%; border-style: solid; border-width: .5em 0 .5em .8em; border-color: transparent transparent transparent #fff; font-size: clamp(10px, 1.1vw, 16px); }
.rx-phone__time { position: absolute; z-index: 1; left: 0; right: 0; bottom: 12%; text-align: center; font-size: clamp(10px, .95vw, 14px); color: #fff; letter-spacing: .04em; }
.rx-phone__bar { position: absolute; z-index: 1; left: 12%; right: 12%; bottom: 7.5%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.rx-phone__bar i { display: block; width: 72%; height: 100%; border-radius: 3px; background: #f3dfb6; }
.rx-video__side { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); color: var(--rx-cream); font-size: 13px; }
.rx-video__side::after { content: ""; display: block; width: 32px; height: 1px; margin-top: 16px; background: var(--rx-gold); }

/* 03 photo specification */
.rx-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 18px; border: 1px solid var(--rx-line); background: var(--rx-panel); }
.rx-photos__set { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.rx-photos__set + .rx-photos__set { padding-left: 22px; margin-left: 22px; border-left: 1px solid var(--rx-line); }
.rx-photos__tx h3 { margin: 4px 0 2px; font: 600 clamp(1.1rem, 1.7vw, 1.6rem)/1.3 var(--rx-serif); letter-spacing: .06em; color: var(--rx-cream); }
.rx-photos__sub { font-size: 13px; color: var(--rx-dim); }
.rx-specs { margin-top: 18px; display: grid; gap: 4px; }
.rx-specs li { font-size: 14px; color: var(--rx-dim); }
.rx-specs li::before { content: "· "; }
.rx-photos figure img { aspect-ratio: 1.1; object-fit: cover; }
.rx-photos figcaption { margin-top: 8px; text-align: center; font-size: 15px; font-weight: 500; }

/* 05 penalties */
.rx-pen { display: grid; grid-template-columns: minmax(0, .23fr) minmax(0, .28fr) minmax(0, .31fr) minmax(0, .18fr); gap: 18px; align-items: stretch; }
.rx-pen__lead { padding: 14px 22px; border-left: 1px solid var(--rx-line); border-top: 1px solid var(--rx-line); font: 600 clamp(1.25rem, 2.05vw, 1.9rem)/1.3 var(--rx-serif); letter-spacing: .04em; overflow-wrap: anywhere; }
/* One line, as drawn, only where the words are the design's own length. */
@media (min-width: 1101px) { html:lang(zh-Hant) .rx-pen__lead { white-space: nowrap; } }
.rx-pen__card { display: flex; align-items: center; gap: 20px; min-height: 108px; padding: 12px 22px; border: 1px solid var(--rx-line); background: var(--rx-panel); }
.rx-pen__card strong { font: 500 clamp(2.6rem, 4.3vw, 4rem)/1 var(--rx-latin); color: var(--rx-gold-2); font-variant-numeric: lining-nums; }
.rx-pen__card b { display: block; font-weight: 500; font-size: clamp(.95rem, 1.35vw, 1.2rem); line-height: 1.45; }
.rx-pen__card span { display: block; color: var(--rx-dim); font-size: clamp(.9rem, 1.3vw, 1.15rem); line-height: 1.5; }
.rx-pen__side { display: flex; align-items: center; padding-left: 40px; border-left: 1px solid var(--rx-line); margin-left: 24px; }
.rx-pen__side .rx-words { font-size: 12px; color: var(--rx-cream); }

/* ---------------------------------------------------------- CTA band */
.rx-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .22fr) minmax(0, .56fr) minmax(0, .22fr); align-items: center; min-height: 200px; margin-top: 26px; padding: 20px var(--rx-pad); border-top: 1px solid var(--rx-line); border-bottom: 1px solid var(--rx-line); }
.rx-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rx-cta > div { position: relative; }
.rx-cta__brand b { display: block; font: 500 clamp(1.5rem, 2.1vw, 1.9rem)/1 var(--rx-latin); letter-spacing: .2em; color: var(--rx-cream); }
.rx-cta__brand span { display: block; margin-top: 12px; font: 500 12.5px/1.6 var(--rx-latin); letter-spacing: .12em; color: var(--rx-cream); }
.rx-cta__btns { display: flex; justify-content: center; gap: 26px; }
.rx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: min(320px, 40vw); max-width: 100%; min-height: 76px; padding: 6px 36px; border-radius: 999px; font-size: clamp(1rem, 1.45vw, 1.35rem); font-weight: 500; letter-spacing: .04em; line-height: 1.25; text-align: center; transition: filter .3s, background .3s, color .3s; }
.rx-btn--gold { background: linear-gradient(180deg, #f3dfb6 0%, #dcb57a 100%); color: #2a1c0e; }
.rx-btn--gold .rx-i { stroke: #2a1c0e; font-size: 1.2em; stroke-width: 1.8; }
.rx-btn--gold:hover { filter: brightness(1.06); }
.rx-btn--gold[aria-disabled="true"] { cursor: default; }
.rx-btn--line { border: 1.5px solid var(--rx-gold-2); color: var(--rx-cream); background: rgba(10, 8, 7, .35); }
.rx-btn--line:hover { background: var(--rx-cream); color: var(--rx-bg); }
.rx-cta__sign { justify-self: end; text-align: right; }
.rx-script { font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/1.05 var(--rx-script); color: var(--rx-gold-2); transform: rotate(-14deg); text-align: left; }
.rx-cta__mark { margin-top: 18px; font: 500 13px var(--rx-latin); letter-spacing: .14em; color: var(--rx-cream); }

.rx :focus-visible { outline: 2px solid var(--rx-gold-2); outline-offset: 3px; }

/* Thai and Myanmar need natural spacing and taller lines for stacked marks. */
html:lang(th) .rx-hero h1, html:lang(my) .rx-hero h1 { letter-spacing: 0; line-height: 1.35; }
html:lang(my) .rx-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
html:lang(th) .rx-h h2, html:lang(my) .rx-h h2, html:lang(th) .rx-video__t, html:lang(my) .rx-video__t { letter-spacing: 0; line-height: 1.5; }
html:lang(en) .rx-hero h1, html:lang(vi) .rx-hero h1 { letter-spacing: .01em; font-size: clamp(2.6rem, 5vw, 4.6rem); }
html:lang(vi) .rx-video__t, html:lang(en) .rx-video__t, html:lang(th) .rx-video__t, html:lang(my) .rx-video__t, html:lang(ko) .rx-video__t, html:lang(ja) .rx-video__t { white-space: normal; font-size: clamp(1.2rem, 2.2vw, 2.1rem); }

/* ---------------------------------------------------------- 761–1100 */
@media (max-width: 1100px) {
  .rx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-dates { grid-template-columns: minmax(0, 1fr); }
  .rx-dates__side { display: none; }
  .rx-top { grid-template-columns: minmax(0, 1fr); }
  .rx-aside { border-right: 0; padding: 0; }
  .rx-aside ol { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 10px; }
  .rx-aside a { padding-left: 0; }
  .rx-aside a.is-active::before { display: none; }
  .rx-aside .rx-rule, .rx-aside .rx-words { display: none; }
  .rx-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-video { aspect-ratio: auto; min-height: 420px; }
  .rx-video__copy { width: 52%; }
  .rx-phone { left: auto; right: 16%; top: 6%; height: 88%; width: auto; aspect-ratio: 9 / 16; }
  .rx-photos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rx-photos__set + .rx-photos__set { padding: 20px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--rx-line); }
  .rx-pen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-pen__side { display: none; }
  .rx-cta { grid-template-columns: minmax(0, 1fr); gap: 22px; text-align: center; }
  .rx-cta__sign { justify-self: center; }
}

/* ---------------------------------------------------------- ≤760 · phone
   A 1:1 build of wlsc-rules-mobile-mockup-2026.png. The mockup's phone is
   582px wide; sizes are its measurements × 0.67, raised to a readable
   minimum where that would fall under 9px. Phone-only pieces carry .rx-m. */
.rx-m { display: none; }
@media (max-width: 760px) {
  .rx-m { display: revert; }
  body.is-rules { padding-bottom: 66px; }
  body.is-rules .langhint { bottom: 66px; }

  /* hero */
  .rx-hero { min-height: 0; display: block; }
  .rx-hero__img { object-position: 78% 40%; }
  .rx-hero::after { background: linear-gradient(90deg, rgba(10, 8, 7, .92) 0%, rgba(10, 8, 7, .62) 46%, rgba(10, 8, 7, .08) 78%); }
  .rx-hero__copy { padding: 14px 16px 16px; }
  .rx-hero .crumb { margin-bottom: 4px; font-size: 11px; }
  .rx-hero h1 { font-size: clamp(2.3rem, 10.6vw, 2.75rem); letter-spacing: .04em; }
  .rx-rulebook { margin-top: 2px; font-size: 12px; letter-spacing: .1em; }
  .rx-tagline { margin-top: 5px; font-size: 13px; letter-spacing: .08em; }
  .rx-pill { margin-top: 8px; padding: 0 12px; font-size: 10px; letter-spacing: .24em; }
  .rx-hero__mwords { display: block; margin-top: 12px; }
  .rx-hero__mwords .rx-words { font-size: 9px; line-height: 1.35; letter-spacing: .22em; }
  .rx-hero__side { display: none; }
  .rx-hero__mside { display: block; position: absolute; z-index: 1; right: 16px; top: 44%; text-align: right; }
  .rx-hero__mside .rx-words--mark { font-size: 12px; line-height: 1.5; letter-spacing: .2em; color: var(--rx-gold-2); }
  .rx-hero__mside .rx-rule { margin: 8px 0 12px auto; width: 30px; }
  .rx-hero__mside .rx-words:last-child { font-size: 8.5px; line-height: 1.45; letter-spacing: .12em; color: var(--rx-cream); }

  /* category carousel */
  .rx-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 12px 16px 0; scroll-padding-inline: 16px; border-bottom: 0; }
  .rx-cards::-webkit-scrollbar { display: none; }
  .rx-cards li { flex: 0 0 72vw; scroll-snap-align: start; }
  .rx-card { aspect-ratio: 410 / 115; border: 1px solid var(--rx-line); border-radius: 6px; }
  .rx-cards li.is-on .rx-card { border: 2px solid var(--rx-gold); box-shadow: 0 0 18px rgba(216, 180, 121, .25); }
  .rx-card::after { background: linear-gradient(90deg, rgba(10, 8, 7, .55) 0%, rgba(10, 8, 7, .15) 60%, rgba(10, 8, 7, .1) 100%); }
  .rx-card > span { left: 14px; }
  .rx-card__no { top: 8px; font-size: 26px; }
  .rx-card__t { bottom: 10px; font-size: 17px; letter-spacing: .06em; }
  .rx-card__cta { display: none; }
  .rx-go { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(242, 231, 214, .35); border-radius: 50%; background: rgba(10, 8, 7, .55); cursor: pointer; }
  .rx-go::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--rx-cream); border-top: 1.5px solid var(--rx-cream); transform: translateX(-2px) rotate(45deg); }
  .rx-card > .rx-go { left: auto; right: 12px; top: 50%; transform: translateY(-50%); }
  .rx-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 12px; }
  .rx-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 231, 214, .3); }
  .rx-dots i.is-on { background: var(--rx-gold-2); }
  .rx-dots[data-rx-dots="cards"] { border-bottom: 1px solid var(--rx-line); }

  /* key dates */
  .rx-dates { display: block; min-height: 0; padding: 10px 16px 14px; }
  .rx-dates__t { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
  .rx-dates__t h2 { font-size: 22px; }
  .rx-dates__t p { font-size: 9px; }
  .rx-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 0; }
  .rx-line::before { display: block; top: 11px; left: 11px; right: 30%; }
  .rx-line li { display: flex; align-items: center; gap: 6px; padding: 30px 0 0 14px; }
  .rx-line li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; border-left: 1px dashed rgba(216, 180, 121, .6); }
  .rx-line__no, .rx-line li:first-child .rx-line__no { display: flex; top: 0; left: 0; width: 22px; height: 22px; font-size: 10px; }
  .rx-line__ic { width: 32px; height: 32px; font-size: 17px; flex: 0 0 auto; }
  .rx-line__tx { min-width: 0; overflow-wrap: anywhere; }
  .rx-line__tx b { font-size: 11.5px; }
  .rx-line__tx span { margin-top: 1px; font-size: 11.5px; }

  /* chapter pills */
  .rx-top { display: block; padding: 12px 16px 0; }
  .rx-aside { border: 0; padding: 0 0 6px; }
  .rx-aside__t, .rx-aside .rx-rule, .rx-aside > .rx-words { display: none; }
  .rx-aside nav { display: flex; align-items: center; gap: 8px; }
  .rx-aside ol { flex: 1; display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .rx-aside ol::-webkit-scrollbar { display: none; }
  .rx-aside li { flex: 0 0 auto; }
  .rx-aside a, .rx-aside a.is-active { display: inline-flex; gap: 10px; padding: 7px 18px; border: 1px solid var(--rx-line); border-radius: 999px; font-size: 13px; white-space: nowrap; }
  .rx-aside a b { font-size: 15px; }
  .rx-aside a.is-active { color: #2a1c0e; background: linear-gradient(180deg, #f3dfb6, #dcb57a); border-color: transparent; }
  .rx-aside a.is-active::before { display: none; }
  .rx-aside__next { flex: 0 0 auto; width: 36px; height: 36px; border-color: var(--rx-line); }

  /* section headers */
  .rx-sec { padding-bottom: 14px; }
  .rx-sec--wide { padding-inline: 16px; }
  /* Title, rule and label share one row when they fit (zh-hant, as drawn);
     a longer title pushes the label to its own line, right-aligned. */
  .rx-h { flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 8px; }
  .rx-h h2 { gap: 12px; font-size: 19px; white-space: normal; min-width: 0; }
  .rx-h h2 b { font-size: 26px; }
  .rx-h__line { flex: 1 1 auto; min-width: 16px; order: 0; margin: 0 0 7px; }
  .rx-h p { margin-left: auto; font-size: 8.5px; letter-spacing: .22em; }

  /* 01 eligibility / 04 video: stacked rows */
  .rx-tiles--3, .rx-tiles--4 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rx-tiles li { position: relative; min-height: 58px; gap: 18px; padding: 10px 40px 10px 18px; font-size: 30px; border-radius: 3px; }
  .rx-tiles b { font-size: 14.5px; letter-spacing: .06em; line-height: 1.4; }
  .rx-tiles span { font-size: 12px; letter-spacing: .04em; }
  .rx-chev { display: block; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--rx-cream); border-top: 1.5px solid var(--rx-cream); transform: translateY(-50%) rotate(45deg); }

  /* 02 video panel: title, the phone in the glow, chips 2 × 2 over its foot */
  .rx-video { --S: 232px; display: flex; flex-direction: column; aspect-ratio: auto; min-height: 0; padding: 12px 12px 12px; border-radius: 3px; }
  .rx-video__copy { display: contents; }
  .rx-video__t { order: 0; flex-wrap: wrap; font-size: 19px; white-space: normal; letter-spacing: .02em; }
  .rx-video__sub { order: 0; margin-top: 6px; font-size: 12.5px; letter-spacing: .12em; }
  .rx-video__stage { order: 1; position: relative; height: var(--S); margin: 12px -12px 0; overflow: hidden; }
  .rx-video__bg { position: absolute; inset: auto; top: 0; left: calc(50% - var(--S) * 2.04); width: calc(var(--S) * 3); height: var(--S); max-width: none; object-fit: fill; }
  .rx-phone { position: absolute; left: calc(50% - var(--S) * .252); right: auto; top: calc(var(--S) * .036); width: calc(var(--S) * .504); height: calc(var(--S) * .905); margin: 0; aspect-ratio: auto; border-radius: 16px; }
  .rx-phone__play::after { font-size: 11px; }
  /* The four points sit below the phone, inside the panel, and wrap: an
     overlap on the phone's foot and one-line labels pushed long English and
     Thai labels past the panel edge. */
  .rx-chips { order: 2; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .rx-chips li { min-width: 0; min-height: 42px; gap: 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; background: rgba(10, 8, 7, .82); }
  .rx-chips .rx-i { font-size: 22px; }
  .rx-video__side { display: none; }

  /* 03 photos: one angle per slide */
  .rx-photos { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0; border: 0; background: none; }
  .rx-photos::-webkit-scrollbar { display: none; }
  .rx-photos__set, .rx-photos__set + .rx-photos__set { display: contents; }
  .rx-photos__tx { display: none; }
  .rx-photos figure { position: relative; flex: 0 0 100%; scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, .34fr) minmax(0, .32fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; height: 78px; overflow: hidden; border: 1px solid var(--rx-line); border-radius: 3px; background: var(--rx-panel); }
  .rx-photos__mtx { display: block; padding: 10px 0 0 12px; }
  .rx-photos__mtx b { display: block; font: 600 14px/1.3 var(--rx-serif); letter-spacing: .06em; }
  .rx-photos__mtx small { display: block; margin-top: 3px; padding-right: 6px; font-size: 9px; line-height: 1.35; color: var(--rx-dim); word-break: keep-all; }
  .rx-photos figure img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
  .rx-photos figcaption { align-self: end; margin: 0; padding: 0 0 10px 12px; text-align: left; font-size: 14px; }
  .rx-photos figure > .rx-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
  .rx-photos__mspecs { display: block; margin-top: 2px; text-align: center; font-size: 11px; color: var(--rx-dim); }
  #photos .rx-dots { padding: 8px 0 2px; }

  /* 05 penalties */
  .rx-pen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rx-pen__lead { display: none; }
  .rx-pen__card { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: 8px; min-height: 48px; padding: 6px 14px; border-radius: 3px; }
  .rx-pen__card strong { text-align: center; font-size: 40px; }
  .rx-pen__card b, .rx-pen__card span { font-size: 12.5px; line-height: 1.35; letter-spacing: .04em; }
  .rx-pen__card span { color: var(--rx-cream); }

  /* CTA band: brand · two stacked buttons · tag line */
  .rx-cta { grid-template-columns: minmax(0, .27fr) minmax(0, .46fr) minmax(0, .27fr); gap: 8px; min-height: 0; margin-top: 12px; padding: 8px 12px; text-align: left; }
  .rx-cta__brand b { font-size: 15px; letter-spacing: .14em; }
  .rx-cta__brand span { margin-top: 3px; font-size: 7.5px; line-height: 1.4; letter-spacing: .06em; }
  .rx-cta__btns { flex-direction: column; gap: 6px; }
  .rx-btn { width: 100%; min-width: 0; height: auto; min-height: 28px; padding: 4px 10px; gap: 6px; font-size: 11.5px; line-height: 1.25; white-space: normal; text-align: center; }
  .rx-btn--line { border-width: 1px; }
  .rx-cta__sign { justify-self: end; text-align: right; }
  .rx-script { display: none; }
  .rx-cta__mark { margin: 0; font-size: 9px; }
  .rx-cta__tag { display: block; margin-top: 3px; }
  .rx-cta__tag.rx-words { font-size: 7.5px; line-height: 1.35; letter-spacing: .06em; color: var(--rx-dim); }

  /* sticky register bar */
  .rx-sticky { display: flex; position: fixed; z-index: 85; left: 50%; bottom: 10px; transform: translateX(-50%); width: calc(100% - 64px); max-width: 420px; height: 44px; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: linear-gradient(180deg, #f3dfb6 0%, #dcb57a 100%); color: #2a1c0e; font-size: 16px; font-weight: 600; letter-spacing: .08em; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
}

/* The design sets lining figures (15–20, 2026, V1.0). Every `font:`
   shorthand above resets font-variant, so this comes last and wins. */
.rx, .rx * { font-variant-numeric: lining-nums !important; }

@media (prefers-reduced-motion: reduce) {
  .rx *, .rx *::before, .rx *::after { transition-duration: .01ms !important; }
}