/* /history/ — the first edition's archive.

   LAYOUT AND STYLE FOLLOW THE CLIENT'S PAGE DESIGN (1.png, 2026-09-10),
   section by section and at its proportions — the design is 1024px wide, so
   every size here is its measurement × 1.4 at a 1440px window:
     header 73 · hero 345 · chapter 01 274 · anchor bar 56 · judges 345 ·
     partners 225 · highlights 500 · archive band 112 · 2026 band 120.
   Black-brown ground, gold hairlines between every band, cream serif titles,
   gold letter-spaced labels.

   Content the design does not draw — the nine official placements and the
   team — is set in the design's own judges layout rather than invented anew.
   Where the design showed an interface that never existed (score sheet,
   upload screen, certificate), the same frame holds the real archive image. */

@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-history {
  --hx-bg: #0b0907;
  --hx-bg2: #120e0b;
  --hx-gold: #c9a26a;
  --hx-gold-2: #e3c68f;
  --hx-cream: #f3e6d0;
  --hx-dim: rgba(243, 230, 208, .72);
  --hx-line: rgba(201, 162, 106, .38);
  --hx-pad: clamp(20px, 4.6vw, 72px);
  --hx-serif: "Cormorant Garamond", var(--font-display);
  --hx-latin: "Cormorant Garamond", Georgia, serif;
  --hx-sans: var(--font-body);
  --hx-script: "Great Vibes", cursive;
  --hx-ease: cubic-bezier(.22, 1, .36, 1);
  --hx-hd: 76px;
  background: var(--hx-bg);
}
html:lang(zh-Hant) body.is-history {
  --hx-serif: "Cormorant Garamond", "WLSC Serif TC", var(--font-display);
}

.hx {
  background: var(--hx-bg); color: var(--hx-cream);
  font-family: var(--hx-sans); font-size: 16px; line-height: 1.7;
  overflow-x: clip;
}
/* Resets at zero specificity, so every component rule below wins. */
:where(.hx) a { color: inherit; text-decoration: none; }
:where(.hx) p { max-width: none; margin: 0; }
:where(.hx) figure { margin: 0; }
:where(.hx) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.hx) button { font: inherit; color: inherit; }
:where(.hx) img { display: block; width: 100%; height: auto; }
.hx [id] { scroll-margin-top: calc(var(--hx-hd) + 8px); }

.hx-eyebrow {
  margin: 0 0 10px; color: var(--hx-gold);
  font-size: 12px; font-weight: 500; letter-spacing: .32em; line-height: 1.4; text-transform: uppercase;
}
.hx-smallcaps {
  color: var(--hx-dim); font-size: 10.5px; letter-spacing: .36em; line-height: 2.05; text-transform: uppercase;
}
.hx-rule { display: block; width: 40px; height: 1px; background: var(--hx-gold); }
.hx-h2 {
  margin: 0; color: var(--hx-cream);
  font: 600 clamp(2rem, 3.4vw, 3.1rem)/1.15 var(--hx-serif); letter-spacing: .04em;
  font-variant-numeric: lining-nums;
}
.hx-num { font-family: var(--hx-latin); font-variant-numeric: lining-nums; }
.hx-gold-text {
  background: linear-gradient(180deg, #f7e9cb 0%, #e2c38c 55%, #c89c5c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hx-btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 13px 36px;
  border: 1px solid var(--hx-cream); color: var(--hx-cream);
  font-size: 15px; letter-spacing: .12em; line-height: 1.2; white-space: nowrap;
  transition: background .3s, color .3s;
}
.hx-btn--gold { border-color: var(--hx-gold); color: var(--hx-gold-2); padding: 13px 58px; letter-spacing: .3em; }
.hx-btn:hover, .hx-band:hover .hx-btn { background: var(--hx-cream); color: var(--hx-bg); }
.hx-btn--gold:hover { background: var(--hx-gold); color: var(--hx-bg); }
.hx-check {
  flex: 0 0 auto; display: inline-block; width: 13px; height: 13px; border-radius: 2px;
  background: var(--hx-gold) center / 9px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1' fill='none' stroke='%230b0907' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- header
   The design's bar: solid black, gold hairline under it, nav centred, the
   register button a light rectangle rather than a pill. */
body.is-history .hd {
  position: sticky; top: 0; background: var(--hx-bg);
  border-bottom: 1px solid var(--hx-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 */
.hx-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .43fr) minmax(0, .45fr) minmax(0, .12fr);
  min-height: clamp(300px, 24vw, 380px);
  border-bottom: 1px solid var(--hx-line);
  background:
    linear-gradient(112deg, transparent 22%, rgba(214, 170, 104, .30) 26%, transparent 31%),
    linear-gradient(112deg, transparent 33%, rgba(214, 170, 104, .16) 35%, transparent 38%),
    linear-gradient(112deg, transparent 86%, rgba(214, 170, 104, .22) 88%, transparent 91%),
    radial-gradient(ellipse at 22% 40%, rgba(120, 76, 36, .6), transparent 65%),
    var(--hx-bg);
}
.hx-hero__copy { align-self: center; padding: 36px 24px 36px var(--hx-pad); position: relative; z-index: 2; }
.hx-hero__h1 {
  margin: 4px 0 12px;
  font: 600 clamp(2.4rem, 4.55vw, 4.2rem)/1.08 var(--hx-serif); letter-spacing: .01em;
  background: linear-gradient(180deg, #fffaf0 0%, #f6e6c6 55%, #e2c28a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: lining-nums;
}
.hx-hero__h1 { white-space: nowrap; }
@media (max-width: 1100px) { .hx-hero__h1 { white-space: normal; } }
.hx-hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.5rem); letter-spacing: .08em; color: var(--hx-cream); }
.hx-pill {
  display: inline-block; margin-top: 18px; padding: 5px 22px;
  border: 1.5px solid var(--hx-gold-2); border-radius: 999px;
  color: var(--hx-gold-2); font-size: 16px; letter-spacing: .2em; line-height: 1.5;
}
.hx-hero__small { margin-top: 18px; color: var(--hx-gold); }
.hx-strips { display: flex; align-self: stretch; margin-left: 12px; transform: skewX(-9deg); }
.hx-strip { position: relative; flex: 1 1 0; overflow: hidden; border-left: 3px solid var(--hx-bg); }
.hx-strip:last-child { border-right: 3px solid var(--hx-bg); }
.hx-strip img {
  /* The poster is placed so its FACE CENTRE (--fx/--fy, per strip) sits on
     the strip's centre line, then zoomed around that point. Centring on the
     face rather than the poster is what keeps the whole face in view: every
     face sits right of centre (64–72%), so a centred crop cut them in half. */
  position: absolute; top: 0; left: 50%; width: auto; height: 100%; max-width: none;
  transform-origin: var(--fx) var(--fy);
  transform: translateX(calc(var(--fx) * -1)) skewX(9deg) scale(var(--hx-zoom, 1.5));
  transition: transform 1s var(--hx-ease), filter .6s;
  filter: saturate(.92);
}
.hx-strip:hover img { transform: translateX(calc(var(--fx) * -1)) skewX(9deg) scale(calc(var(--hx-zoom, 1.5) + .05)); filter: saturate(1.05); }
.hx-hero__side { align-self: center; padding: 0 var(--hx-pad) 0 18px; }
.hx-hero__side .hx-smallcaps { color: var(--hx-gold); font-size: 11px; }
.hx-hero__side .hx-rule { margin-top: 18px; }

/* ---------------------------------------------------------- 01 */
.hx-intro {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .14fr) minmax(0, .36fr) minmax(0, .5fr);
  align-items: center; gap: 20px; min-height: clamp(260px, 19vw, 300px);
  padding: 0 var(--hx-pad); border-bottom: 1px solid var(--hx-line); background: var(--hx-bg);
}
.hx-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--hx-bg) 50%, rgba(11, 9, 7, .72) 72%, rgba(11, 9, 7, .35) 100%),
    url("/assets/img/history/2025/eyes/P05_S01_DNnPnn1Bh90.webp") right top / 36% auto no-repeat;
  opacity: .38;
}
.hx-intro > * { position: relative; }
.hx-bignum {
  font: 500 clamp(5rem, 9.6vw, 8.6rem)/.86 var(--hx-latin); font-variant-numeric: lining-nums;
  background: linear-gradient(180deg, #c89560 0%, #9c6a3e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hx-intro__num .hx-smallcaps { margin-top: 14px; }
.hx-intro__copy .hx-h2 { font-size: clamp(1.6rem, 2.55vw, 2.45rem); letter-spacing: .04em; }
.hx-intro__sub { margin-top: 12px; font-size: 16px; letter-spacing: .08em; color: var(--hx-cream); }
.hx-intro__copy .hx-rule { margin: 26px 0 24px; }
.hx-intro__tag { font-size: 14px; letter-spacing: .12em; color: var(--hx-dim); }
.hx-intro__art { position: relative; align-self: stretch; min-height: 270px; }
.hx-laptop { position: absolute; left: 0; top: 24px; width: 49%; }
.hx-laptop__screen {
  padding: 10px 14px 12px; background: #111213;
  border: 7px solid #1d1e20; border-bottom-width: 9px; border-radius: 12px 12px 0 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.hx-laptop__brand { text-align: center; color: var(--hx-gold-2); font: 600 17px/1 var(--hx-latin); letter-spacing: .32em; }
.hx-laptop__title { text-align: center; margin: 4px 0 8px; color: var(--hx-cream); font-size: 9px; letter-spacing: .24em; }
.hx-laptop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hx-laptop__grid img { height: auto; }
.hx-laptop__grid span { display: block; text-align: center; font-size: 8px; color: var(--hx-dim); line-height: 1.8; }
.hx-laptop__base {
  height: 12px; width: 116%; margin-left: -8%;
  background: linear-gradient(180deg, #d4d4d7, #86868a); border-radius: 0 0 14px 14px;
}
.hx-sheet {
  position: absolute; left: 50%; top: 30px; width: 26%;
  padding: 12px 14px; background: #f4efe7; color: #2a221c;
  border: 8px solid #161514; border-radius: 16px; transform: rotate(3deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.hx-sheet__t { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; margin-bottom: 6px; }
.hx-sheet li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid rgba(42, 34, 28, .12); font-size: 10px; line-height: 1.3;
}
.hx-sheet li b { grid-column: 2; font-weight: 600; font-size: 10.5px; }
.hx-sheet__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding: 6px 10px; background: #1d1712; color: var(--hx-gold-2);
  font-size: 11px; letter-spacing: .12em;
}
.hx-sheet__total b { font: 600 18px/1 var(--hx-latin); }
.hx-sheet__date { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .16em; color: rgba(42, 34, 28, .6); }
.hx-script {
  position: absolute; right: 0; top: 16%; text-align: right; z-index: 2;
  font: 400 clamp(1.5rem, 2.3vw, 2.2rem)/1 var(--hx-script); color: var(--hx-gold-2);
  transform: rotate(-12deg); white-space: nowrap; line-height: 1.05;
}
.hx-intro__global { position: absolute; right: 2%; bottom: 36px; font-size: 10px; color: var(--hx-cream); }

/* ---------------------------------------------------------- anchor bar */
.hx-anchors { border-bottom: 1px solid var(--hx-line); background: var(--hx-bg); }
.hx-anchors ul { display: flex; justify-content: center; gap: clamp(20px, 5.4vw, 88px); overflow-x: auto; scrollbar-width: none; padding-inline: var(--hx-pad); }
.hx-anchors a {
  display: block; padding: 16px 14px; white-space: nowrap;
  font-size: 15px; letter-spacing: .08em; color: var(--hx-dim); transition: color .3s;
}
.hx-anchors a:hover { color: var(--hx-cream); }
.hx-anchors a.is-active { color: var(--hx-gold-2); box-shadow: inset 0 -2px 0 var(--hx-gold); }

/* ---------------------------------------------------------- side + main sections */
.hx-sec {
  display: grid; grid-template-columns: minmax(0, .22fr) minmax(0, .78fr); gap: 28px; align-items: center;
  padding: 26px var(--hx-pad); border-bottom: 1px solid var(--hx-line);
}
.hx-side .hx-h2 { margin-bottom: 18px; }
.hx-side__lead { font-size: 15px; line-height: 1.9; color: var(--hx-cream); }
.hx-side .hx-smallcaps { margin-top: 26px; font-size: 9.5px; }

.hx-rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--hx-gold) transparent; padding-bottom: 8px;
}
.hx-juror { position: relative; flex: 0 0 calc((100% - 36px) / 4); scroll-snap-align: start; }
/* Visually hidden captions are position:absolute. Without a positioned card
   around them they resolve against the page and sit at their static spot far
   along the rail — 6,000px out — widening the whole document. */
.hx-logos figure, .hx-card { position: relative; }
.hx-rail--static .hx-juror { flex-basis: calc((100% - 48px) / 5); }
.hx-juror__img { aspect-ratio: .93; overflow: hidden; border: 1px solid var(--hx-line); background: #120d0a; }
.hx-juror__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform .8s var(--hx-ease); }
.hx-juror:hover .hx-juror__img img { transform: scale(1.03); }
.hx-juror__link { display: block; }
.hx-railbar { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.hx-railbar[hidden] { display: none; }
.hx-count { font: 500 15px var(--hx-latin); letter-spacing: .14em; color: var(--hx-dim); }
.hx-count b { color: var(--hx-cream); font-weight: 600; font-size: 19px; }
.hx-railbar button {
  width: 38px; height: 38px; margin-right: 6px; cursor: pointer;
  border: 1px solid var(--hx-line); background: transparent; color: var(--hx-cream);
}
.hx-railbar button:hover, .hx-railbar button:focus-visible { background: var(--hx-gold); color: var(--hx-bg); }

/* results: the judges layout, three placement cards to a category */
.hx-results { align-items: start; padding-block: 34px; }
.hx-minifacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 22px 0 14px; }
.hx-minifacts b { display: block; font: 600 28px/1 var(--hx-latin); color: var(--hx-gold-2); font-variant-numeric: lining-nums; }
.hx-minifacts span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--hx-dim); }
.hx-dl { border-top: 1px solid var(--hx-line); }
.hx-dl div { display: grid; grid-template-columns: minmax(0, 88px) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hx-line); }
.hx-dl dt { font-size: 12px; color: var(--hx-gold); }
.hx-dl dd { margin: 0; font-size: 13px; }
.hx-dl a { border-bottom: 1px solid currentColor; }
.hx-tabs { display: flex; gap: clamp(16px, 3vw, 44px); border-bottom: 1px solid var(--hx-line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.hx-tabs[hidden] { display: none; }
.hx-tabs button {
  padding: 12px 4px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font-size: 15px; letter-spacing: .08em; color: var(--hx-dim);
}
.hx-tabs button[aria-selected="true"] { color: var(--hx-gold-2); box-shadow: inset 0 -2px 0 var(--hx-gold); }
.hx-panel + .hx-panel { margin-top: 40px; }
.hx-panel__t { margin: 0 0 14px; font: 600 1.25rem/1.3 var(--hx-serif); color: var(--hx-gold-2); }
.hx.hx-js .hx-panel + .hx-panel { margin-top: 0; }
.hx.hx-js .hx-panel__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hx-panel[hidden] { display: none; }
.hx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hx-card__link { display: block; }
.hx-card__imgs { position: relative; display: block; aspect-ratio: 1080 / 1346; overflow: hidden; border: 1px solid var(--hx-line); background: #120d0a; }
.hx-card__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .65s var(--hx-ease), transform 1s var(--hx-ease); }
.hx-card__imgs img:last-child { opacity: 0; }
.hx-card__link:hover .hx-card__imgs img:first-child, .hx-card__link:focus-visible .hx-card__imgs img:first-child { opacity: 0; }
.hx-card__link:hover .hx-card__imgs img:last-child, .hx-card__link:focus-visible .hx-card__imgs img:last-child { opacity: 1; transform: scale(1.02); }
.hx-card__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 0 6px; }
.hx-card__place {
  grid-row: span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--hx-gold); border-radius: 50%;
  font: 600 1.25rem/1 var(--hx-latin); color: var(--hx-gold-2); font-variant-numeric: lining-nums;
}
.hx-card__name { margin: 0; color: var(--hx-cream); font: 600 1.35rem/1.1 var(--hx-latin); letter-spacing: .06em; }
.hx-card__code { font-size: 11px; letter-spacing: .14em; color: var(--hx-dim); }

/* partners: text · ten logo tiles · the tools photograph, full bleed right */
.hx-partners { grid-template-columns: minmax(0, .2fr) minmax(0, .57fr) minmax(0, .23fr); padding-right: 0; padding-block: 0; min-height: clamp(210px, 15.6vw, 250px); }
.hx-partners .hx-side { padding-block: 24px; }
.hx-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-block: 18px; }
.hx-logos figure { aspect-ratio: 1.3; overflow: hidden; border: 1px solid var(--hx-line); background: #0e0b09; }
.hx-logos img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); transition: filter .4s; }
.hx-logos figure:hover img { filter: none; }
.hx-deco {
  align-self: stretch; position: relative; min-height: 100%;
  /* The tools photograph is the design's own panel, lettering included, so no
     HTML type is set over it (that doubled the words). */
  background: url("/assets/img/history/2025/deco-tweezers.webp") left center / cover no-repeat;
  border-left: 1px solid var(--hx-line);
}

/* team: the judges layout, five cards */
.hx-team { padding-block: 30px; }
.hx-team .hx-h2 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); }

/* ---------------------------------------------------------- highlights */
.hx-high { padding: 30px var(--hx-pad) 34px; border-bottom: 1px solid var(--hx-line); }
.hx-high__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.hx-high__head .hx-h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.hx-high__head p { margin-top: 8px; font-size: 15px; letter-spacing: .06em; }
.hx-link { font-size: 15px; letter-spacing: .06em; border-bottom: 1px solid var(--hx-cream); padding-bottom: 3px; white-space: nowrap; }
.hx-link:hover { color: var(--hx-gold-2); border-color: var(--hx-gold); }
.hx-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.98fr) minmax(0, 2.52fr) minmax(0, 1.4fr) minmax(0, 1.47fr);
  grid-template-rows: clamp(150px, 13.4vw, 196px) clamp(130px, 11.6vw, 168px);
  gap: 8px;
}
.hx-t { position: relative; display: block; overflow: hidden; border: 1px solid var(--hx-line); background: #100c0a; color: var(--hx-cream); }
.hx-t img { transition: transform 1s var(--hx-ease); }
.hx-t:hover img { transform: scale(1.04); }
.hx-t::before {
  content: ""; position: absolute; z-index: 3; inset: 0 0 auto; height: 58px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 5, .78), transparent);
}
.hx-t__label { position: absolute; z-index: 4; top: 8px; left: 10px; font-size: 13px; line-height: 1.35; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.hx-t__label b { display: block; font: 600 13px/1.2 var(--hx-latin); }
.hx-t--submission { grid-area: 1 / 1; }
.hx-t--detail { grid-area: 1 / 2; }
.hx-t--results { grid-area: 1 / 3; }
.hx-t--jury { grid-area: 1 / 4; }
.hx-t--poster { grid-area: 1 / 5; }
.hx-t--team { grid-area: 2 / 1 / 3 / 3; }
.hx-t--social { grid-area: 2 / 3; }
.hx-t--more { grid-area: 2 / 4 / 3 / 6; }
/* A tile that shows a WORK shows all of it: contain, never cover, so no eye
   or brow is trimmed. Portrait posters of people may still fill their frame. */
.hx-t__frame, .hx-t__zoom { position: absolute; inset: 44px 12px 12px; display: flex; align-items: center; justify-content: center; }
.hx-t__frame img, .hx-t__zoom img { width: 100%; height: 100%; object-fit: contain; }
.hx-t__photo img { width: 100%; height: 100%; object-fit: cover; }
.hx-t__photo { position: absolute; inset: 0; overflow: hidden; }
.hx-t__photo img { object-position: 50% 28%; }
.hx-t--results .hx-t__photo { right: 46%; }
.hx-t--results .hx-t__photo::after, .hx-t--jury .hx-t__photo::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 40%);
}
.hx-t__list { position: absolute; top: 12px; right: 10px; bottom: 12px; width: 44%; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.hx-t__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid rgba(243, 230, 208, .12); font-size: 10.5px; line-height: 1.3;
}
.hx-t__list li b { grid-column: 2; font: 600 12px/1.2 var(--hx-latin); letter-spacing: .04em; color: var(--hx-gold-2); }
.hx-t__list .hx-t__total { display: flex; justify-content: space-between; border: 0; padding-top: 6px; font-size: 11px; letter-spacing: .1em; }
.hx-t__list .hx-t__total b { font-size: 18px; }
.hx-t__cert { position: absolute; inset: 40px 12px 10px; display: flex; justify-content: center; }
.hx-t__cert img { width: auto; height: 100%; max-width: 100%; object-fit: contain; outline: 1px solid var(--hx-gold); outline-offset: 3px; }
.hx-t__cert--wide { inset: 12px auto 12px 22%; width: 36%; }
.hx-t__roles { position: absolute; top: 14px; right: 14px; bottom: 14px; width: 36%; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.hx-t__roles li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; font-size: 11px; line-height: 1.3; }
.hx-t__roles i { grid-row: span 2; width: 12px; height: 12px; margin-top: 2px; border: 1px solid var(--hx-gold); border-radius: 2px; }
.hx-t__roles em { font-style: normal; font-size: 9px; letter-spacing: .16em; color: var(--hx-gold); }
.hx-t--social { background: radial-gradient(ellipse at 30% 60%, rgba(201, 162, 106, .35), transparent 60%), #100c0a; }
.hx-phone {
  position: absolute; left: 36%; top: 8px; width: 33%;
  background: #f5efe6; border: 6px solid #1a1918; border-radius: 22px; overflow: hidden;
  transform: rotate(-9deg); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.hx-phone__bar { display: block; padding: 10px 10px 6px; color: #1a1512; }
.hx-phone__bar b { display: block; font: 600 13px/1 var(--hx-latin); letter-spacing: .12em; }
.hx-phone__bar em { font-style: normal; font-size: 8px; }
.hx-phone img { height: auto; }
.hx-phone__script {
  display: block; padding: 4px 10px 8px; color: #3a2a1f;
  font: 400 clamp(1rem, 1.5vw, 1.4rem)/1 var(--hx-script); transform: rotate(-8deg);
  text-shadow: 0 0 8px rgba(255, 255, 255, .8);
}
.hx-t__wall {
  position: absolute; top: 40px; bottom: 10px; left: 10px; width: 66%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: 6px; align-items: center;
}
.hx-t__wall img { width: 100%; height: 100%; object-fit: contain; }
.hx-t__words { position: absolute; z-index: 3; left: calc(66% + 26px); bottom: 12px; color: var(--hx-cream); font-size: 9.5px; text-align: left; }
.hx-t__arrow {
  position: absolute; z-index: 4; right: 12px; top: 10px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hx-gold); border-radius: 50%; color: var(--hx-gold-2);
}

/* ---------------------------------------------------------- archive band */
.hx-archive-d > summary { list-style: none; }
.hx-archive-d > summary::-webkit-details-marker { display: none; }
.hx-band {
  position: relative; overflow: hidden; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  min-height: clamp(100px, 7.8vw, 120px); padding: 20px var(--hx-pad) 20px calc(var(--hx-pad) + 6vw);
  border-bottom: 1px solid var(--hx-line); background: var(--hx-bg2);
}
.hx-band__bg {
  position: absolute; inset: 0 0 0 30%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px; align-items: center; opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
  mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.hx-band__bg img { height: auto; }
.hx-band__copy, .hx-band .hx-btn { position: relative; z-index: 1; }
.hx-band__t { margin: 0; color: var(--hx-cream); font: 600 clamp(1.5rem, 2.5vw, 2.25rem)/1.2 var(--hx-serif); letter-spacing: .06em; }
.hx-band__sub { display: block; margin-top: 4px; font-size: 15px; letter-spacing: .06em; }
.hx-band .hx-btn { margin-right: 5vw; background: rgba(11, 9, 7, .55); }
.hx-archive-d[open] .hx-band .hx-btn span { transform: rotate(90deg); }
.hx-btn span { transition: transform .3s var(--hx-ease); }
.hx-archive-body { padding: 36px max(20px, calc((100vw - 1600px) / 2 + 32px)) 56px; border-bottom: 1px solid var(--hx-line); }
.hx-gallery__count { font: 500 1.1rem var(--hx-latin); letter-spacing: .14em; color: var(--hx-dim); }
.hx-filters { display: flex; gap: 8px; overflow-x: auto; margin: 18px 0 24px; padding-bottom: 6px; scrollbar-width: none; }
.hx-filters[hidden] { display: none; }
.hx-filters button {
  white-space: nowrap; padding: 9px 18px; cursor: pointer; font-size: 14px; color: var(--hx-dim);
  background: transparent; border: 1px solid var(--hx-line); border-radius: 2px;
}
.hx-filters button[aria-pressed="true"] { color: var(--hx-bg); background: var(--hx-gold-2); border-color: var(--hx-gold-2); }
.hx-archive { columns: 5 210px; column-gap: 10px; }
.hx-archive li { break-inside: avoid; margin: 0 0 10px; }
.hx-archive li[hidden] { display: none; }
.hx-tile { position: relative; display: block; overflow: hidden; background: #1a1411; cursor: zoom-in; border: 1px solid var(--hx-line); }
.hx-tile img { filter: saturate(.85); transition: filter .35s, transform .7s var(--hx-ease); }
.hx-tile:hover img, .hx-tile:focus-visible img { filter: saturate(1); transform: scale(1.015); }
.hx-tile span { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; color: #fff; background: rgba(0, 0, 0, .66); font-size: 12px; line-height: 1.2; }

/* ---------------------------------------------------------- lightbox */
.hx-lightbox {
  width: min(1000px, calc(100vw - 40px)); height: min(92svh, 1040px); max-width: none; max-height: none;
  padding: 0; border: 0; color: #fff; background: transparent; overflow: visible;
}
.hx-lightbox::backdrop { background: rgba(12, 10, 9, .94); backdrop-filter: blur(10px); }
.hx-lightbox figure {
  width: 100%; height: 100%; margin: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 10px;
}
.hx-lightbox img { width: auto; height: auto; max-width: 100%; max-height: calc(92svh - 48px); object-fit: contain; }
.hx-lightbox figcaption { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .64); }
.hx-lightbox__close, .hx-lightbox__arrow {
  position: fixed; z-index: 2; cursor: pointer; color: #fff; font: inherit;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .25);
}
.hx-lightbox__close { top: 24px; right: 24px; width: 48px; height: 48px; font-size: 1.5rem; }
.hx-lightbox__arrow { top: 50%; width: 52px; height: 52px; transform: translateY(-50%); }
.hx-lightbox__arrow--prev { left: 22px; }
.hx-lightbox__arrow--next { right: 22px; }
.hx-lightbox__close:hover, .hx-lightbox__arrow:hover { background: rgba(255, 255, 255, .15); }

/* ---------------------------------------------------------- 2026 band */
.hx-next {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap;
  min-height: clamp(104px, 8.3vw, 130px); padding: 18px var(--hx-pad);
  border-bottom: 1px solid var(--hx-line);
  background:
    linear-gradient(112deg, transparent 40%, rgba(201, 162, 106, .12) 42%, transparent 45%),
    linear-gradient(112deg, transparent 70%, rgba(201, 162, 106, .10) 71.5%, transparent 74%),
    var(--hx-bg);
}
.hx-next__t {
  margin: 0; font: 600 clamp(2.3rem, 4.7vw, 4.25rem)/1.1 var(--hx-serif); letter-spacing: .02em;
  background: linear-gradient(180deg, #f7e9cb 0%, #e2c38c 60%, #c99d5e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: lining-nums;
}
.hx-next__meta { color: var(--hx-gold); font-size: 13px; letter-spacing: .32em; }
.hx-next .hx-btn--gold { margin-left: auto; }

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

/* ---------------------------------------------------------- motion (JS-armed) */
.hx.hx-motion .hx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--hx-ease), transform .9s var(--hx-ease); }
.hx.hx-motion .hx-reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- scripts
   Han display type takes slight tracking, as in the design; Thai and Myanmar
   need natural spacing and room for their stacked marks. */
html:lang(th) .hx-hero__h1 { letter-spacing: 0; line-height: 1.3; }
html:lang(my) .hx-hero__h1 { letter-spacing: 0; line-height: 1.6; font-size: clamp(1.8rem, 3vw, 2.7rem); }
html:lang(vi) .hx-hero__h1, html:lang(en) .hx-hero__h1 { font-size: clamp(2.2rem, 4vw, 3.8rem); }
html:lang(th) .hx-h2, html:lang(my) .hx-h2 { letter-spacing: 0; line-height: 1.45; }
html:lang(my) .hx-h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
html:lang(en) .hx-h2, html:lang(vi) .hx-h2 { letter-spacing: .01em; }

/* ---------------------------------------------------------- 761–1100 */
@media (max-width: 1100px) {
  .hx-hero { grid-template-columns: minmax(0, .5fr) minmax(0, .5fr); }
  .hx-hero__side { display: none; }
  .hx-intro { grid-template-columns: minmax(0, .2fr) minmax(0, .8fr); padding-block: 28px; }
  .hx-intro__art { grid-column: 1 / -1; min-height: 280px; }
  .hx-sec, .hx-partners { grid-template-columns: minmax(0, 1fr); padding: 30px var(--hx-pad); }
  .hx-deco { min-height: 180px; }
  .hx-juror { flex-basis: calc((100% - 24px) / 3); }
  .hx-rail--static .hx-juror { flex-basis: calc((100% - 24px) / 3); }
  .hx-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, 180px); }
  .hx-t--submission { grid-area: 1 / 1; } .hx-t--detail { grid-area: 1 / 2; } .hx-t--jury { grid-area: 1 / 3; }
  .hx-t--results { grid-area: 2 / 1 / 3 / 3; } .hx-t--poster { grid-area: 2 / 3; }
  .hx-t--team { grid-area: 3 / 1 / 4 / 3; } .hx-t--social { grid-area: 3 / 3; }
  .hx-t--more { grid-area: 4 / 1 / 5 / 4; }
}

/* ---------------------------------------------------------- ≤760, 390 is the base */
@media (max-width: 760px) {
  .hx-hero { display: block; }
  .hx-hero__copy { padding: 34px 20px 26px; }
  .hx-hero__h1 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  html:lang(my) .hx-hero__h1 { font-size: 1.7rem; }
  .hx-strips { height: 300px; margin: 0 -14px 0 -8px; --hx-zoom: 1.05; }
  .hx-intro { display: block; padding: 30px 20px; }
  .hx-intro__num { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
  .hx-bignum { font-size: 5rem; }
  .hx-intro__art { min-height: 250px; margin-top: 26px; }
  .hx-laptop { width: 64%; left: 0; top: 10px; }
  .hx-sheet { left: auto; right: 0; top: 30px; width: 44%; }
  .hx-script { top: auto; bottom: 8px; right: 4%; font-size: 1.7rem; }
  .hx-intro__global { display: none; }
  .hx-anchors ul { justify-content: flex-start; gap: 6px; padding-inline: 12px; }
  .hx-anchors a { font-size: 14px; padding: 14px 10px; }
  .hx-sec, .hx-partners { display: block; padding: 32px 20px; }
  .hx-side { margin-bottom: 22px; }
  .hx-juror, .hx-rail--static .hx-juror { flex-basis: 62vw; }
  .hx-cards { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 0 20px 8px; }
  .hx-card { flex: 0 0 72vw; scroll-snap-align: start; }
  .hx-minifacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hx-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-deco { min-height: 150px; margin-top: 8px; }
  .hx-high { padding: 32px 14px; }
  .hx-high__head { display: block; padding-inline: 6px; }
  .hx-high__head .hx-link { display: inline-block; margin-top: 14px; }
  .hx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, 170px); }
  .hx-t--submission { grid-area: 1 / 1; } .hx-t--detail { grid-area: 1 / 2; }
  .hx-t--results { grid-area: 2 / 1 / 3 / 3; }
  .hx-t--jury { grid-area: 3 / 1; } .hx-t--poster { grid-area: 3 / 2; }
  .hx-t--team { grid-area: 4 / 1 / 5 / 3; }
  .hx-t--social { grid-area: 5 / 1; } .hx-t--more { grid-area: 5 / 2; }
  .hx-t__words { display: none; }
  .hx-t__wall { width: auto; right: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-band { display: block; padding: 26px 20px; }
  .hx-band__bg { inset: 0 0 0 10%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-band .hx-btn { margin: 16px 0 0; }
  .hx-archive-body { padding: 24px 12px 40px; }
  .hx-archive { columns: 2; column-gap: 6px; }
  .hx-archive li { margin-bottom: 6px; }
  .hx-next { display: block; padding: 30px 20px; }
  .hx-next__meta { margin: 10px 0 18px; }
  .hx-lightbox__arrow { top: auto; bottom: 18px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .hx.hx-motion .hx-reveal { opacity: 1; transform: none; }
}