/* /judges/ — the 2026 jury index.

   Built to the client's design of 2026-09-12 (924px mock-up; every size below
   is the mock-up figure scaled to a 1180 content column). Top to bottom:
   narrow hero on the supplied plate · trust bar on ivory · roster head with
   the confirmed / pending legend · search and filters · the 30-seat grid, five
   across · the dark "seats light up" band · the ivory closing CTA.

   Only the desktop screen was drawn. The phone rules below are this site's own
   folding — two seats across, the hero's side words dropped, the filters
   wrapped — and are marked where they start. */

/* The Latin display face the rest of the designed pages are set in. */
@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;
}
/* Only the Han characters this site's designed copy uses (see
   tools/build-history-fonts.py); anything else 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;
}

body.is-judges {
  --jd-black: #0a0807;
  --jd-panel: #16110c;
  --jd-gold: #d8b479;
  --jd-gold-2: #f0d6a4;
  --jd-gold-dim: rgba(216, 180, 121, .55);
  --jd-line: rgba(216, 180, 121, .3);
  --jd-cream: #f2e7d6;
  --jd-dim: rgba(242, 231, 214, .64);

  /* The light half, sampled off the mock-up: the trust bar and the roster sit
     on a cooler, lighter paper than the site's ivory. */
  --jd-paper: #f5f2ed;
  --jd-paper-2: #f8f5f0;
  --jd-ink: #241a12;
  --jd-ink-2: #4d4239;
  --jd-ink-line: rgba(36, 26, 18, .16);
  --jd-bronze: #9a6a33;

  --jd-pad: clamp(16px, 2.6vw, 40px);
  --jd-serif: "Cormorant Garamond", "WLSC Serif TC", var(--font-display);
  --jd-latin: "Cormorant Garamond", Georgia, serif;
  background: var(--jd-paper);
}
html:lang(zh-Hant) body.is-judges,
html:lang(ja) body.is-judges { --jd-serif: "Cormorant Garamond", "WLSC Serif TC", var(--font-display); }

/* The design draws a solid bar above the plate, not a header floating on it. */
body.is-judges .hd {
  position: sticky; top: 0;
  background: var(--jd-black);
  border-bottom: 1px solid var(--jd-line);
  backdrop-filter: none;
}

.jd { overflow-x: clip; }
.jd-wrap { width: min(100%, 1180px); margin-inline: auto; padding-inline: var(--jd-pad); }

.jd-i { width: 1.45em; height: 1.45em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* The letterspaced English set vertically down both margins. */
.jd-words {
  margin: 0;
  font-family: var(--font-body);
  font-size: .625rem; font-weight: 600; line-height: 1.85;
  letter-spacing: .17em; text-transform: uppercase;
}
.jd-rule { display: block; width: 34px; height: 1px; margin-top: .7rem; background: var(--jd-gold-dim); }

.jd-kick {
  margin: 0;
  font-family: var(--jd-latin);
  font-size: clamp(.72rem, 1vw, .85rem); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--jd-gold);
}
.jd-kick--ink { color: var(--jd-ink); letter-spacing: .26em; }

/* ---------------------------------------------------------------- 1 hero */

/* The band is the supplied plate, full bleed: 2560 × 545 is 4.7:1, which at a
   1440 window is ~306px tall. The three text blocks are stacked on it in one
   grid cell; the plate itself is taken out of flow so it cannot open a second
   grid row. */
.jd-hero {
  position: relative;
  background: var(--jd-black);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(260px, 20vw, 340px);
  isolation: isolate;
}
.jd-hero picture {
  position: absolute; inset: 0; z-index: -2;
  display: block;
}
.jd-hero__img,
.jd-hero picture img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* The plate's light burst is on the right; the type sits on the left, so the
   left third gets a scrim and the artwork is untouched. */
.jd-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 8, 7, .92) 0%, rgba(10, 8, 7, .72) 34%, rgba(10, 8, 7, 0) 62%);
}
/* Not the 1180 content column: in the design the headline sits ~10% in from
   the window edge and the side words ~4%, so the hero is measured off the
   window like the plate it stands on. */
.jd-hero__copy {
  grid-area: 1 / 1;
  padding: clamp(2rem, 4.4vw, 3.6rem) var(--jd-pad);
  padding-left: clamp(3.2rem, 10vw, 9rem);
  color: var(--jd-cream);
}
.jd-hero h1 {
  margin: .55rem 0 0;
  font-family: var(--jd-serif);
  font-size: clamp(2.6rem, 5.4vw, 4.15rem);
  font-weight: 600; line-height: 1.06; letter-spacing: .04em;
  color: #fff;
}
.jd-hero__sub {
  position: relative;
  margin: 1.15rem 0 0; padding-top: 1.05rem;
  font-family: var(--jd-serif);
  font-size: clamp(1.25rem, 2.25vw, 1.85rem);
  font-weight: 500; line-height: 1.4; letter-spacing: .02em;
  color: var(--jd-gold-2);
}
.jd-hero__sub::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: clamp(120px, 26vw, 330px); height: 1px;
  background: linear-gradient(90deg, var(--jd-gold-dim), rgba(216, 180, 121, 0));
}
.jd-hero__lede {
  margin: .7rem 0 0; max-width: 46ch;
  font-size: clamp(.85rem, 1.2vw, .98rem); line-height: 1.75;
  color: rgba(255, 255, 255, .86);
}
.jd-hero__left,
.jd-hero__right {
  grid-area: 1 / 1;
  align-self: center;
  color: var(--jd-dim);
  pointer-events: none;
}
.jd-hero__left { justify-self: start; padding-left: var(--jd-pad); }
.jd-hero__left > i {
  display: block; width: 1px; height: clamp(48px, 8vw, 96px);
  margin: 0 0 1rem 2px; background: var(--jd-gold-dim);
}
.jd-hero__right { justify-self: end; padding-right: var(--jd-pad); text-align: left; }

/* ---------------------------------------------------------------- 2 trust */

.jd-trust {
  margin: 0; padding: clamp(1.5rem, 2.6vw, 2.2rem) var(--jd-pad);
  list-style: none;
  background: var(--jd-paper-2);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
/* The dividers are full-height rules between the thirds, so each cell is a
   stretched column with its own content centred inside it. */
.jd-trust li {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem, 1.6vw, 1.35rem);
  padding-inline: clamp(.5rem, 2vw, 2rem);
  color: var(--jd-ink);
}
.jd-trust li + li { border-left: 1px solid var(--jd-ink-line); }
.jd-trust__ic {
  display: grid; place-items: center; flex: none;
  width: clamp(44px, 4.2vw, 58px); aspect-ratio: 1;
  border: 1px solid rgba(36, 26, 18, .42); border-radius: 50%;
}
.jd-trust__ic .jd-i { width: 1.5rem; height: 1.5rem; stroke-width: 1.2; }
.jd-trust__t { display: block; }
.jd-trust__t b {
  display: block;
  font-family: var(--jd-latin);
  font-size: clamp(.68rem, .9vw, .8rem); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--jd-ink-2);
}
.jd-trust__t span {
  display: block; margin-top: .22rem;
  font-family: var(--jd-serif);
  font-size: clamp(1.05rem, 1.65vw, 1.4rem); font-weight: 600; letter-spacing: .05em;
}

/* ---------------------------------------------------------------- 3 roster */

.jd-roster {
  background: var(--jd-paper);
  padding-block: clamp(2.2rem, 4vw, 3.4rem) clamp(2.6rem, 5vw, 4.4rem);
  color: var(--jd-ink);
}
.jd-rhead {
  display: grid;
  grid-template-columns: auto minmax(2rem, 1fr) auto;
  align-items: end;
  column-gap: clamp(1rem, 2.4vw, 2.2rem);
}
.jd-rhead__t h2 {
  margin: .2rem 0 0;
  font-family: var(--jd-serif);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem); font-weight: 600;
  line-height: 1.1; letter-spacing: .04em;
  color: #1b130d;
}
.jd-rhead__line { height: 1px; background: var(--jd-ink-line); margin-bottom: .9rem; }
.jd-legend {
  margin: 0 0 .55rem; padding-bottom: .75rem;
  display: flex; gap: clamp(1rem, 2.4vw, 2.4rem);
  border-bottom: 1px solid var(--jd-ink-line);
  font-size: clamp(.8rem, 1.1vw, .93rem); letter-spacing: .06em;
  white-space: nowrap;
}
.jd-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.jd-legend b { font-family: var(--jd-latin); font-weight: 600; font-size: 1.05em; }
.jd-legend i { width: .8rem; height: .8rem; border-radius: 50%; }
.jd-legend__on i { background: #c39a5c; }
.jd-legend__off i { border: 1px solid rgba(36, 26, 18, .38); }

/* filters --------------------------------------------------------------- */

.jd-ctl {
  margin-top: clamp(1rem, 2vw, 1.6rem);
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: clamp(.5rem, 1vw, .85rem);
}
.jd-search { position: relative; flex: 1 1 clamp(220px, 26vw, 340px); min-width: 0; }
.jd-search__i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; color: var(--jd-ink-2); pointer-events: none;
}
.jd-ctl input,
.jd-ctl select {
  width: 100%;
  font: inherit; font-size: clamp(.82rem, 1.1vw, .93rem); color: var(--jd-ink);
  background: var(--jd-paper-2);
  border: 1px solid var(--jd-ink-line); border-radius: 999px;
  padding: .72rem 1.1rem;
  appearance: none; -webkit-appearance: none;
}
.jd-ctl input { padding-left: 2.6rem; }
.jd-ctl input::-webkit-search-cancel-button { -webkit-appearance: none; }
.jd-ctl input:focus-visible,
.jd-ctl select:focus-visible { outline: 2px solid var(--jd-bronze); outline-offset: 2px; }
.jd-sel { position: relative; display: block; flex: 0 1 auto; }
.jd-sel select { padding-right: 2.5rem; }
/* Chrome renders a native select's arrow in the browser's UI language and at
   its own size; ours is drawn so the four controls match in every locale. */
.jd-chev {
  position: absolute; right: .95rem; top: 50%; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--jd-ink-2);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.jd-sel--year select { min-width: 6.5rem; }

/* grid ------------------------------------------------------------------ */

.jd-grid {
  margin: clamp(1rem, 2vw, 1.6rem) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.5rem, 1vw, .9rem);
}
.jd-seat {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--jd-panel);
  border: 1px solid var(--jd-line);
  color: var(--jd-cream);
}
.jd-seat[hidden] { display: none; }
.jd-seat > a {
  display: block; height: 100%;
  color: inherit; text-decoration: none;
}
.jd-seat__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
}
/* The portrait fades into the plate so the name sits on black, not on a face. */
.jd-seat--on > a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 8, 7, .58) 0%, rgba(10, 8, 7, 0) 26%),
    linear-gradient(180deg, rgba(10, 8, 7, 0) 34%, rgba(10, 8, 7, .82) 56%, rgba(10, 8, 7, .97) 72%);
}
/* Every element inside a seat is positioned, so a seat has no content height
   of its own and the ratio IS the height. The two ratios are the design's:
   a confirmed seat is slightly taller than square to carry the name block and
   the button, an empty plate is landscape. Grid stretch then lifts every plate
   sharing a row with a confirmed seat to the taller of the two — which is what
   the design shows in row one, where seat 05 stands as tall as 01–04. */
.jd-seat--on { aspect-ratio: 1 / 1.05; }
.jd-seat--off { aspect-ratio: 6 / 5; }

.jd-seat__no {
  position: absolute; top: clamp(.35rem, .9vw, .7rem); left: clamp(.6rem, 1.2vw, 1rem);
  font-family: var(--jd-latin);
  font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; letter-spacing: .02em;
  color: var(--jd-gold-2);
}
.jd-arw {
  position: absolute; top: clamp(.6rem, 1.2vw, 1rem); right: clamp(.6rem, 1.2vw, 1rem);
  display: grid; place-items: center;
  width: clamp(26px, 2.6vw, 34px); aspect-ratio: 1;
  border: 1px solid var(--jd-gold-dim); border-radius: 50%;
  color: var(--jd-gold-2);
  transition: background .25s ease, border-color .25s ease;
}
.jd-arw svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jd-seat--on:hover .jd-arw { background: rgba(216, 180, 121, .16); border-color: var(--jd-gold); }

/* Only the name now: the page is the jury index, so "JUDGE" said nothing the
   heading had not, the flag is already in the poster, and the whole seat is
   the link — a second "VIEW PROFILE" inside it was a button inside a button.
   The corner arrow carries the affordance. */
.jd-seat--on .jd-seat__body {
  position: absolute; left: 0; right: 0; bottom: clamp(.85rem, 2vw, 1.4rem);
  display: block; padding-inline: .6rem; text-align: center;
}
.jd-seat__n {
  display: block;
  font-family: var(--jd-latin);
  font-size: clamp(.88rem, 1.3vw, 1.1rem); font-weight: 600; letter-spacing: .045em;
  color: #fff;
}
.jd-seat__ln {
  display: block; margin-top: .12rem;
  font-family: var(--jd-serif);
  font-size: clamp(.95rem, 1.4vw, 1.2rem); font-weight: 600; letter-spacing: .05em;
  color: #fff;
}

.jd-seat--off .jd-seat__body {
  position: absolute; inset-inline: 0; top: 42%; transform: translateY(-50%);
  text-align: center;
}
.jd-seat__tbaen {
  display: block;
  font-family: var(--jd-latin);
  font-size: clamp(.6rem, .88vw, .76rem); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--jd-gold-2);
}
.jd-seat__tba {
  display: block; margin-top: .3rem;
  font-family: var(--jd-serif);
  font-size: clamp(.95rem, 1.5vw, 1.22rem); font-weight: 600; letter-spacing: .08em;
  color: #fff;
}
/* The gold swoosh in the lower half of an empty plate, drawn rather than
   shipped: thirty copies of one small artwork would be thirty HTTP requests or
   one sprite that cannot follow the plate's changing width. */
.jd-wave {
  position: absolute; inset-inline: 0; bottom: 0; z-index: -1;
  width: 100%; height: 58%;
  fill: none; stroke: var(--jd-gold); stroke-width: 1.1;
  opacity: .55;
}
.jd-wave path + path { opacity: .5; }

.jd-empty {
  margin: 2.5rem 0 0; text-align: center;
  font-size: .95rem; color: var(--jd-ink-2);
}

/* ---------------------------------------------------------------- 5 band */

.jd-band {
  position: relative; overflow: hidden;
  background: #1b120a;
  color: var(--jd-cream);
  padding: clamp(1.8rem, 3.4vw, 2.9rem) var(--jd-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(1.2rem, 3vw, 3rem);
}
/* The same arcs as the hero plate, as light as the design draws them. */
.jd-band::before,
.jd-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 240% at 100% 50%, rgba(216, 180, 121, .2) 0%, rgba(216, 180, 121, 0) 46%),
    radial-gradient(90% 200% at 0% 50%, rgba(216, 180, 121, .12) 0%, rgba(216, 180, 121, 0) 44%);
}
.jd-band > * { position: relative; }
.jd-band__t { border-left: 1px solid var(--jd-gold-dim); padding-left: clamp(1rem, 2.2vw, 1.9rem); }
.jd-band__t h2 {
  margin: 0;
  font-family: var(--jd-serif);
  font-size: clamp(1.35rem, 2.5vw, 1.95rem); font-weight: 600;
  line-height: 1.25; letter-spacing: .05em; color: #fff;
}
.jd-band__t p {
  margin: .55rem 0 0;
  font-size: clamp(.82rem, 1.1vw, .95rem); line-height: 1.7; color: var(--jd-dim);
}
.jd-band__side { color: var(--jd-dim); }

.jd-lnk {
  display: inline-flex; align-items: center; gap: .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--jd-gold-dim);
  font-size: clamp(.85rem, 1.15vw, .96rem); letter-spacing: .04em;
  color: var(--jd-cream); text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.jd-lnk:hover { color: #fff; border-color: var(--jd-gold-2); }
.jd-lnk--ink { color: var(--jd-ink); border-bottom-color: rgba(36, 26, 18, .45); }
.jd-lnk--ink:hover { color: #000; border-color: var(--jd-bronze); }

/* ---------------------------------------------------------------- 6 cta */

.jd-cta {
  position: relative; overflow: hidden;
  background: var(--jd-paper-2);
  color: var(--jd-ink);
  padding: clamp(2rem, 3.6vw, 3rem) var(--jd-pad);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(1.2rem, 3vw, 3rem);
}
.jd-cta::before {
  background:
    radial-gradient(110% 220% at 100% 50%, rgba(154, 106, 51, .16) 0%, rgba(154, 106, 51, 0) 44%),
    radial-gradient(90% 200% at 0% 50%, rgba(154, 106, 51, .1) 0%, rgba(154, 106, 51, 0) 42%);
}
.jd-cta > * { position: relative; }
.jd-cta__left,
.jd-cta__right { color: rgba(36, 26, 18, .6); }
.jd-cta__right { text-align: right; }
.jd-cta__t {
  margin: 0; justify-self: center;
  font-family: var(--jd-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 600;
  line-height: 1.3; letter-spacing: .05em; color: #17110c;
}
.jd-cta__t span { display: block; }
.jd-cta__t span + span { text-indent: 1.4em; }
.jd-cta__btns { display: grid; justify-items: center; gap: .85rem; }
.jd-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem clamp(1.6rem, 3vw, 2.6rem);
  border-radius: 999px;
  background: linear-gradient(100deg, #c79a58 0%, #f0d6a4 40%, #d8b479 72%, #b98d4e 100%);
  color: #2a1b0b; text-decoration: none;
  font-size: clamp(.9rem, 1.25vw, 1.02rem); font-weight: 600; letter-spacing: .06em;
  box-shadow: 0 6px 18px rgba(154, 106, 51, .24);
}
.jd-btn:hover { filter: brightness(1.05); }

/* ------------------------------------------------------- phone (≤ 760px)

   Built to the client's phone design of 2026-09-12. The shape changes, not
   just the size: the hero keeps its band but the side words move to the right
   margin, the trust bar stays three across, and a seat turns on its side —
   photograph on the left, name and button on the right, the whole roster two
   cards across. */

@media (max-width: 760px) {
  .jd-hero { min-height: clamp(150px, 45vw, 200px); }
  .jd-hero__copy { padding: clamp(1rem, 4vw, 1.4rem) 0 clamp(1rem, 4vw, 1.4rem) clamp(.7rem, 3vw, 1rem); }
  /* The gold hairline the design runs down the left of the type. */
  .jd-hero__copy { margin-left: var(--jd-pad); border-left: 1px solid var(--jd-gold-dim); }
  .jd-hero::after { background: linear-gradient(90deg, rgba(10, 8, 7, .94) 0%, rgba(10, 8, 7, .78) 42%, rgba(10, 8, 7, .08) 88%); }
  .jd-hero h1 { font-size: clamp(1.45rem, 7vw, 2rem); }
  .jd-hero__sub { margin-top: .5rem; padding-top: .5rem; font-size: clamp(.8rem, 3.6vw, 1rem); }
  .jd-hero__sub::before { width: 40%; }
  .jd-hero__lede { margin-top: .35rem; font-size: clamp(.56rem, 2.5vw, .7rem); line-height: 1.6; max-width: none; }
  /* One set of side words on the phone, at the right margin, as drawn. */
  .jd-hero__right { display: none; }
  .jd-hero__left { justify-self: end; justify-content: end; padding: 0 var(--jd-pad) 0 0; text-align: right; }
  .jd-hero__left > i { display: none; }
  .jd-words { font-size: .42rem; line-height: 2; letter-spacing: .14em; }

  .jd-trust { padding: clamp(.7rem, 3vw, 1rem) calc(var(--jd-pad) / 2); }
  .jd-trust li { gap: clamp(.3rem, 1.6vw, .55rem); padding-inline: clamp(.2rem, 1.2vw, .6rem); }
  .jd-trust__ic { width: clamp(26px, 8vw, 34px); }
  .jd-trust__ic .jd-i { width: .95rem; height: .95rem; }
  .jd-trust__t b { font-size: clamp(.4rem, 1.9vw, .5rem); letter-spacing: .12em; }
  .jd-trust__t span { font-size: clamp(.72rem, 3.4vw, .9rem); letter-spacing: .03em; }

  /* Head and legend stay on one row, as drawn. */
  .jd-rhead { grid-template-columns: auto minmax(.6rem, 1fr) auto; column-gap: .6rem; }
  .jd-rhead__t h2 { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .jd-kick--ink { font-size: clamp(.5rem, 2.4vw, .62rem); letter-spacing: .18em; }
  .jd-legend { gap: .7rem; font-size: clamp(.56rem, 2.7vw, .7rem); white-space: nowrap; }
  .jd-legend i { width: .6rem; height: .6rem; }

  /* Search on its own row, then the three controls in one. */
  .jd-ctl { justify-content: stretch; gap: .45rem; }
  .jd-search { flex: 1 1 100%; }
  .jd-sel { flex: 1 1 0; min-width: 0; }
  .jd-sel select { width: 100%; }
  .jd-ctl input, .jd-ctl select { padding: .55rem .7rem; font-size: clamp(.6rem, 2.9vw, .75rem); }
  .jd-ctl input { padding-left: 2.1rem; }
  .jd-sel select { padding-right: 1.7rem; }
  .jd-search__i { left: .75rem; width: .85rem; height: .85rem; }
  .jd-chev { right: .55rem; width: .8rem; height: .8rem; }

  /* Two across, and a seat laid on its side. */
  .jd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .jd-seat--on { aspect-ratio: 2.4 / 1; }
  .jd-seat--off { aspect-ratio: 4 / 1; }

  /* The photograph is a band down the left, cropped from the top so the whole
     head is in frame, and faded into the plate where the name begins. */
  .jd-seat__img {
    left: 0; width: 64%;
    object-position: 50% 6%;
    -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 96%);
    mask-image: linear-gradient(90deg, #000 46%, transparent 96%);
  }
  .jd-seat--on > a::before {
    background:
      linear-gradient(90deg, rgba(10, 8, 7, .8) 0%, rgba(10, 8, 7, .1) 26%, rgba(10, 8, 7, 0) 44%),
      linear-gradient(90deg, rgba(10, 8, 7, 0) 40%, rgba(10, 8, 7, .78) 58%, rgba(10, 8, 7, .96) 72%);
  }
  .jd-seat__no { top: .3rem; left: .45rem; font-size: clamp(1rem, 5vw, 1.3rem); }
  .jd-arw { top: .3rem; right: .4rem; width: clamp(18px, 5.4vw, 24px); }

  /* The name sits centred in the right half, beside the photograph. */
  .jd-seat--on .jd-seat__body { left: 50%; right: .35rem; bottom: auto; top: 50%; transform: translateY(-50%); padding-inline: 0; }
  .jd-seat__n { font-size: clamp(.54rem, 2.6vw, .68rem); letter-spacing: .02em; }
  .jd-seat__ln { font-size: clamp(.62rem, 3vw, .8rem); }

  .jd-seat--off .jd-seat__body { top: 46%; }
  .jd-seat__tbaen { font-size: clamp(.42rem, 2vw, .54rem); letter-spacing: .14em; }
  .jd-seat__tba { margin-top: .12rem; font-size: clamp(.62rem, 3vw, .8rem); }
  .jd-wave { height: 76%; stroke-width: .8; }

  .jd-band, .jd-cta { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; text-align: left; }
  .jd-band__side, .jd-cta__left, .jd-cta__right { display: none; }
  .jd-cta__t { justify-self: start; }
  .jd-cta__t span + span { text-indent: 0; }
  .jd-cta__btns { justify-items: start; }
}

/* One card across only on a genuinely small screen; the design's two-across
   roster holds down to about 360px. */
@media (max-width: 340px) {
  .jd-grid { grid-template-columns: minmax(0, 1fr); }
  .jd-seat--on { aspect-ratio: 3 / 1; }
  .jd-seat--off { aspect-ratio: 5.5 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .jd-arw,
  .jd-lnk { transition: none; }
}