/* Home page, sections 01–08 below the hero.

   Desktop: 1:1 to wlsc-home-redesign-desktop-v2.png (772px wide; sizes
   × 1.865 at 1440): 01 status bar (cream) · 02 ONE WORK. ONE RECORD. (dark) ·
   03 needs (cream) · 04 desk (dark, globe) · 05 record lookup (cream) ·
   06 index (cream) · 07 access (dark) · 08 call (cream).
   Phone (≤760): wlsc-home-redesign-mobile-v2.png. .hm-d = desktop-only,
   .hm-m = phone-only (layout and ornament; the words are one set). */

@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-home {
  --hm-dark: #120d0a; --hm-paper: #f6efe4; --hm-paper-2: #efe5d5; --hm-ink: #1d140b; --hm-ink-dim: rgba(29, 20, 11, .7);
  --hm-gold: #d8b479; --hm-gold-2: #efd3a0; --hm-bronze: #8a6537; --hm-cream: #f2e7d6; --hm-dim: rgba(242, 231, 214, .7);
  --hm-line: rgba(216, 180, 121, .35); --hm-rule: rgba(29, 20, 11, .2);
  --hm-pad: clamp(16px, 3.3vw, 56px);
  --hm-serif: "Cormorant Garamond", var(--font-display); --hm-latin: "Cormorant Garamond", Georgia, serif;
}
html:lang(zh-Hant) body.is-home { --hm-serif: "Cormorant Garamond", "WLSC Serif TC", var(--font-display); }
@media (min-width: 761px) { body.is-home .hm .hm-m { display: none; } }
@media (max-width: 760px) { body.is-home .hm .hm-d { display: none; } }

.hm { color: var(--hm-ink); font-family: var(--font-body); line-height: 1.55; overflow-x: clip; }
:where(.hm) a { color: inherit; text-decoration: none; }
:where(.hm) p { max-width: none; margin: 0; }
:where(.hm) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.hm) :is(h2, figure) { margin: 0; color: inherit; }
:where(.hm) img { display: block; width: 100%; height: auto; }
.hm section { position: relative; overflow: hidden; padding: 30px var(--hm-pad); }
.hm-i { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* A band image fills its section. `inset: 0` alone loses to the later
   `.hm-s4 > *` / `.hm-s5 > *` rules that make the copy position:relative, so
   the size is stated here too. */
.hm-bg { position: absolute !important; inset: 0; z-index: 0 !important; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hm-words { font: 500 10px/1.85 var(--hm-latin); letter-spacing: .22em; text-transform: uppercase; color: var(--hm-ink-dim); }
.hm-num { font: 500 clamp(1.6rem, 2.4vw, 2.3rem)/1 var(--hm-latin); }
.hm-kick { font: 500 11.5px var(--hm-latin); letter-spacing: .18em; text-transform: uppercase; }
.hm-h { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.hm-h__dash { width: 36px; height: 1px; background: currentColor; opacity: .6; }
.hm-h > div { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hm-h h2 { font: 600 clamp(1.35rem, 2vw, 1.9rem)/1.2 var(--hm-serif); letter-spacing: .1em; }
.hm-ring { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; }
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 40px; border-radius: 999px; background: linear-gradient(180deg, #f3dfb6, #dcb57a); color: #2a1c0e; font-weight: 600; letter-spacing: .08em; box-shadow: 0 6px 18px rgba(138, 101, 55, .25); }

/* 01 · status bar */
.hm-s1 { display: grid; grid-template-columns: minmax(0, .26fr) minmax(0, .22fr) minmax(0, .32fr) minmax(0, .2fr); align-items: center; min-height: 150px; background: var(--hm-paper); }
.hm-s1 > *:not(.hm-bg) { position: relative; z-index: 1; }
.hm-s1__t { display: flex; align-items: flex-start; gap: 26px; padding-right: 20px; border-right: 1px solid var(--hm-rule); }
.hm-s1__t .hm-num { position: relative; padding-bottom: 10px; }
.hm-s1__t .hm-num::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 1px; background: var(--hm-ink); }
.hm-s1__t h2 { font: 600 1.6rem/1.3 var(--hm-serif); letter-spacing: .1em; }
.hm-s1__t .hm-kick { color: var(--hm-ink-dim); font-size: 10.5px; }
.hm-s1__ed { padding: 0 26px; border-right: 1px solid var(--hm-rule); }
.hm-s1__ed p:first-child { font: 500 clamp(1.6rem, 2.3vw, 2.2rem)/1 var(--hm-latin); letter-spacing: .04em; }
.hm-s1__ed b { font-weight: 500; font-size: 1.35em; }
.hm-s1__ed p + p { margin-top: 8px; font: 500 11px var(--hm-latin); letter-spacing: .2em; color: var(--hm-ink-dim); }
.hm-s1__date { display: flex; align-items: center; gap: 12px; padding: 0 26px; font: 500 1.05rem var(--hm-latin); letter-spacing: .06em; border-right: 1px solid var(--hm-rule); }
.hm-s1__date .hm-i { font-size: 26px; }
.hm-s1__go { justify-self: end; font-size: 1rem; letter-spacing: .06em; }
.hm-s1__go span { margin-left: 12px; }

/* 02 · one work, one record */
.hm-s2 { min-height: 560px; color: var(--hm-cream); background: var(--hm-dark); display: flex; align-items: center; }
.hm-s2 .hm-bg { object-position: 70% 50%; }
.hm-s2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 13, 10, .9) 0%, rgba(18, 13, 10, .55) 40%, rgba(18, 13, 10, 0) 65%); pointer-events: none; }
.hm-s2__copy { position: relative; z-index: 1; max-width: 640px; }
.hm-s2 .hm-h { color: var(--hm-gold); margin-bottom: 18px; }
.hm-s2 .hm-kick { color: var(--hm-cream); }
.hm-s2__title { font: 500 clamp(3.3rem, 6vw, 5.6rem)/.98 var(--hm-latin); letter-spacing: .01em; color: #e8cdb2; }
.hm-s2__lead { margin-top: 14px; font: 600 clamp(1.1rem, 1.6vw, 1.5rem)/1.5 var(--hm-serif); letter-spacing: .08em; }
.hm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 30px; max-width: 620px; }
.hm-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; font: 500 11.5px var(--hm-latin); letter-spacing: .12em; }
.hm-steps li + li::before { content: ""; position: absolute; left: -36px; top: 34px; width: 30px; height: 1px; background: var(--hm-dim); }
.hm-steps__img { width: 78px; height: 78px; object-fit: cover; border-radius: 50%; border: 1px solid var(--hm-gold); }
.hm-steps__doc { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; font-size: 44px; color: var(--hm-gold); }
.hm-steps b { margin-top: 6px; font: 500 16px var(--hm-latin); }
.hm-s2__seal { position: absolute; z-index: 1; right: 8%; bottom: 14%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 120px; height: 120px; border: 1.3px solid var(--hm-gold); border-radius: 50%; color: var(--hm-gold); font-size: 34px; }
.hm-s2__seal span { margin-top: 6px; font: 500 10px var(--hm-latin); letter-spacing: .2em; }
.hm-s2__words { position: absolute; z-index: 1; right: var(--hm-pad); top: 30px; text-align: right; color: var(--hm-cream); }

/* 03 · needs */
.hm-s3 { background: var(--hm-paper); padding-bottom: 34px; }
.hm-needs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-right: 12%; }
.hm-need { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1.5; padding: 26px 26px 24px; overflow: hidden; background: #f3ebe0; }
.hm-need img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.hm-need::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(246, 239, 228, .98) 0%, rgba(246, 239, 228, .8) 34%, rgba(246, 239, 228, 0) 64%); }
.hm-need:hover img { transform: scale(1.03); }
/* The photograph is an absolutely-positioned sibling, so every text span has
   to be lifted above it. NOTE: this also lands on any span that WANTS to be
   absolute — `.hm-need > span` outranks a plain `.hm-go` — which is why the
   phone card below places the chevron with the grid instead of with
   `position: absolute`. */
.hm-need > span { position: relative; z-index: 1; }
/* The letter and the title are one line on the phone and two on the desktop;
   `display: contents` lets the desktop rules see them as before. */
.hm-need__h { display: contents; }
.hm-need__l { font: 500 clamp(1.8rem, 2.5vw, 2.3rem)/1 var(--hm-latin); }
.hm-need__t { margin-top: 6px; font: 600 clamp(1.4rem, 2.1vw, 1.95rem)/1.25 var(--hm-serif); letter-spacing: .08em; }
.hm-need__s { margin-top: 14px; font-size: 14px; letter-spacing: .06em; }
.hm-need__s span { margin-left: 10px; }
.hm-s3__words { position: absolute; right: var(--hm-pad); top: 30px; text-align: right; }

/* 04 · desk */
.hm-s4 { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); column-gap: 30px; min-height: 430px; color: var(--hm-cream); background: radial-gradient(ellipse at 20% 60%, rgba(216, 180, 121, .14), transparent 55%), var(--hm-dark); }
.hm-s4 .hm-h { grid-column: 1 / -1; color: var(--hm-gold); }
.hm-s4 .hm-h h2 { color: var(--hm-cream); }
.hm-s4 .hm-kick { color: var(--hm-cream); }
.hm-legend { margin-left: auto; display: flex; align-items: center; gap: 10px; font: 500 11px var(--hm-latin); letter-spacing: .18em; }
.hm-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--hm-gold); box-shadow: 0 0 8px var(--hm-gold); }
/* The globe is in the band image itself (left of centre), so the copy and
   the desk sit over it and nothing is drawn twice. */
.hm-s4__globe {
  right: auto; left: 0; width: auto; height: 100%; max-width: 58%;
  object-fit: contain; object-position: left center;
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 26%);
  mask-image: linear-gradient(270deg, transparent, #000 26%);
}
.hm-s4::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 13, 10, 0) 0%, rgba(18, 13, 10, .3) 22%, rgba(18, 13, 10, .9) 44%, var(--hm-dark) 62%); pointer-events: none; }
.hm-s4 > *:not(.hm-bg) { position: relative; z-index: 1; }
.hm-s4__words { position: absolute; left: var(--hm-pad); bottom: 30px; color: var(--hm-cream); }
.hm-desk { grid-column: 2; border-top: 1px solid var(--hm-line); }
.hm-desk a { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--hm-line); transition: color .3s; }
.hm-desk a:hover { color: var(--hm-gold-2); }
.hm-desk__k { font: 500 15px var(--hm-latin); letter-spacing: .08em; }
.hm-desk__t { font: 600 16px var(--hm-serif); letter-spacing: .06em; }
.hm-desk .hm-i { font-size: 22px; color: var(--hm-cream); }
.hm-desk__all { grid-column: 2; justify-self: end; margin-top: 20px; font-size: 15px; letter-spacing: .06em; }

/* 05 · record lookup */
.hm-s5 { min-height: 390px; color: var(--hm-cream); background: var(--hm-dark); }
.hm-s5__bg { object-position: right center; height: 100%; }
.hm-s5::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 9, 7, .95) 0%, rgba(12, 9, 7, .8) 42%, rgba(12, 9, 7, .15) 78%); pointer-events: none; }
.hm-s5 > *:not(.hm-bg) { position: relative; z-index: 1; }
.hm-s5 .hm-h, .hm-s5 .hm-kick { color: var(--hm-gold); }
.hm-s5 .hm-h h2 { color: var(--hm-cream); }
.hm-find { position: relative; z-index: 1; display: flex; max-width: 760px; margin-top: 10px; border: 1px solid rgba(29, 20, 11, .3); border-radius: 6px; overflow: hidden; background: #fbf8f3; }
.hm-find__box { flex: 1; display: flex; align-items: center; gap: 14px; padding: 0 20px; font-size: 22px; color: var(--hm-ink-dim); }
.hm-find input { flex: 1; min-width: 0; height: 62px; border: 0; background: none; font: 400 16px var(--font-body); color: var(--hm-ink); outline: none; }
.hm-find button { flex: 0 0 auto; padding: 0 44px; border: 0; background: #6b4a38; color: #fff; font-size: 16px; letter-spacing: .08em; cursor: pointer; }
.hm-find button:hover { background: #573b2c; }
.hm-find:focus-within { outline: 2px solid var(--hm-bronze); outline-offset: 2px; }
.hm-s5__note { position: relative; z-index: 1; margin-top: 18px; font-size: 14px; }
.hm-s5__words { position: absolute; right: var(--hm-pad); bottom: 26px; text-align: right; color: var(--hm-cream); }

/* 06 · index (no numbers, as asked) */
.hm-s6 { min-height: 520px; background: var(--hm-paper); }
.hm-s6__tag { margin-left: auto; font: 500 11px var(--hm-latin); letter-spacing: .18em; }
.hm-index { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 74%; border-top: 1px solid var(--hm-rule); }
.hm-index li { border-bottom: 1px solid var(--hm-rule); }
.hm-index li:not(:nth-child(4n + 1)) { border-left: 1px solid var(--hm-rule); }
.hm-index a { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 150px; padding: 26px 24px; transition: background .3s; }
.hm-index a:hover { background: rgba(216, 180, 121, .12); }
.hm-index span { font: 600 clamp(1.1rem, 1.6vw, 1.45rem)/1.3 var(--hm-serif); letter-spacing: .08em; }
.hm-index .hm-i { font-size: 22px; }
.hm-s6__img { position: absolute; right: 0; top: 0; bottom: 0; width: 30%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.hm-s6__words { position: absolute; right: var(--hm-pad); bottom: 28px; text-align: right; }

/* 07 · access */
.hm-s7 { min-height: 440px; color: var(--hm-cream); background: var(--hm-dark); }
.hm-s7 .hm-h { color: var(--hm-gold); }
.hm-s7 .hm-h h2 { color: var(--hm-cream); }
.hm-s7 .hm-kick { color: var(--hm-cream); }
.hm-s7__words { position: absolute; right: var(--hm-pad); top: 30px; text-align: right; color: var(--hm-cream); }
.hm-access { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hm-role { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 26px 28px; overflow: hidden; border: 1px solid var(--hm-line); background: #1a130e; }
.hm-role__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-role::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 13, 10, .95) 0%, rgba(18, 13, 10, .45) 50%, rgba(18, 13, 10, .1) 82%); }
.hm-role > :not(img) { position: relative; z-index: 1; }
.hm-role__t span { display: block; font: 500 clamp(1.3rem, 1.9vw, 1.75rem)/1.1 var(--hm-latin); letter-spacing: .08em; color: var(--hm-gold-2); }
.hm-role__t b { display: block; margin-top: 4px; font: 600 clamp(1.6rem, 2.4vw, 2.2rem)/1.2 var(--hm-serif); letter-spacing: .12em; }
.hm-role__go { align-self: flex-start; display: inline-flex; gap: 12px; margin-top: 20px; padding: 11px 36px; border: 1px solid var(--hm-gold-2); border-radius: 999px; font-size: 14px; letter-spacing: .08em; }
.hm-role--0 .hm-role__go { border: 0; background: linear-gradient(180deg, #f3dfb6, #dcb57a); color: #2a1c0e; font-weight: 600; }

/* 08 · call */
.hm-s8 { display: grid; grid-template-columns: auto minmax(0, .62fr) minmax(0, .38fr); column-gap: 40px; align-items: start; min-height: 340px; background: var(--hm-dark); }
.hm-s8 > .hm-num { padding-bottom: 12px; border-bottom: 1px solid var(--hm-ink); align-self: start; }
/* The 08 band's globe sits on the right of the image; the copy keeps the left. */
.hm-s8 { color: var(--hm-cream); }
/* The band is 3.2:1 but the section is nearly 6:1, so `cover` had to blow the
   image up and crop it — which is why the globe filled the band's whole
   height. It is anchored to the right at its own proportions instead: height
   100%, width auto, and the dark ground shows through on the left. */
.hm-s8__globe {
  left: auto; right: 0; width: auto; height: 100%; max-width: 62%;
  object-fit: contain; object-position: right center;
  /* fade the inner edge, so the panel has no visible seam where it ends */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%);
  mask-image: linear-gradient(90deg, transparent, #000 26%);
}
.hm-s8::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hm-dark) 0%, rgba(12, 9, 7, .92) 34%, rgba(12, 9, 7, .35) 58%, rgba(12, 9, 7, 0) 78%); pointer-events: none; }
.hm-s8 > *:not(.hm-bg) { position: relative; z-index: 1; }
.hm-s8 > .hm-num { border-bottom-color: var(--hm-gold); }
.hm-s8__en, .hm-s8__words { color: var(--hm-dim); }
.hm-s8__t { position: relative; z-index: 1; }
.hm-s8 h2 { font: 600 clamp(2.2rem, 3.8vw, 3.5rem)/1.22 var(--hm-serif); letter-spacing: .1em; }
.hm-s8__btns { display: flex; align-items: center; gap: 36px; margin-top: 26px; }
.hm-s8__ask { font-size: 16px; letter-spacing: .1em; }
.hm-s8__ask span { margin-left: 10px; }
.hm-s8__en { position: relative; z-index: 1; font: 500 12px/1.8 var(--hm-latin); letter-spacing: .16em; color: var(--hm-ink-dim); }
.hm-s8__words { position: absolute; right: var(--hm-pad); bottom: 26px; text-align: right; }

.hm :focus-visible { outline: 2px solid var(--hm-bronze); outline-offset: 3px; }
html:is(:lang(th), :lang(my)) .hm h2 { letter-spacing: 0; line-height: 1.45; }

/* 761–1100 */
@media (max-width: 1100px) {
  .hm-s1 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .hm-s1__ed, .hm-s1__date { border-right: 0; }
  .hm-s1__go { justify-self: start; }
  .hm-needs { margin-right: 0; }
  .hm-s3__words, .hm-s2__words, .hm-s6__words, .hm-s7__words, .hm-s4__words { display: none; }
  .hm-s4 { grid-template-columns: minmax(0, 1fr); }
  .hm-desk, .hm-desk__all { grid-column: 1; }
  .hm-index { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-index li:not(:nth-child(4n + 1)) { border-left: 0; }
  .hm-index li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--hm-rule); }
  .hm-s6__img { display: none; }
  .hm-access { grid-template-columns: minmax(0, 1fr); }
  .hm-role { min-height: 180px; }
  .hm-s8 { grid-template-columns: auto minmax(0, 1fr); row-gap: 16px; }
  .hm-s8__en { grid-column: 2; }
}

/* ≤760 · phone */
@media (max-width: 760px) {
  .hm section { padding: 18px 14px; }
  .hm-h { gap: 12px; margin-bottom: 12px; align-items: flex-start; }
  .hm-h__dash { display: none; }
  .hm-h > div { flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
  .hm-h h2 { font-size: 18px; }
  .hm-num { font-size: 34px; }
  .hm-kick { font-size: 9.5px; }
  .hm-words { font-size: 8px; line-height: 1.7; }

  .hm-s1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; min-height: 0; padding: 20px 14px; color: var(--hm-cream); background: var(--hm-dark); }
  .hm-s1 .hm-bg { object-position: 60% 20%; opacity: .55; }
  .hm-s1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 13, 10, .92) 0%, rgba(18, 13, 10, .5) 70%, rgba(18, 13, 10, .6) 100%); }
  .hm-s1__t { grid-column: 1 / -1; gap: 14px; border: 0; padding: 0; align-items: center; }
  .hm-s1__t .hm-num::after { display: none; }
  .hm-s1__t .hm-kick { color: var(--hm-gold-2); }
  .hm-s1__t h2 { font-size: 18px; }
  .hm-s1__ed { grid-column: 1; margin-top: 8px; padding: 0 0 0 14px; border: 0; border-left: 1px solid var(--hm-line); }
  .hm-s1__ed p:first-child { font-size: 20px; }
  .hm-s1__ed p + p { color: var(--hm-dim); font-size: 9.5px; margin-top: 4px; }
  .hm-s1__date { grid-column: 1; padding: 0 0 0 14px; border: 0; border-left: 1px solid var(--hm-line); font-size: 12px; }
  .hm-s1__date .hm-i { display: none; }
  .hm-s1__go { grid-column: 1; justify-self: start; margin: 12px 0 0 14px; padding: 9px 22px; border-radius: 999px; background: linear-gradient(180deg, #f3dfb6, #dcb57a); color: #2a1c0e; font-size: 13px; font-weight: 600; }
  .hm-s1__words { grid-column: 2; grid-row: 2 / 5; align-self: end; text-align: right; color: var(--hm-cream); }

  .hm-s2 { display: block; min-height: 0; padding: 16px 14px 20px; color: var(--hm-ink); background: var(--hm-paper); }
  .hm-s2::after { display: none; }
  .hm-s2__side { position: absolute; right: 0; top: 0; width: 52%; height: 100%; object-fit: cover; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
  .hm-s2 .hm-h { color: var(--hm-ink); }
  .hm-s2 .hm-kick { color: var(--hm-ink-dim); }
  .hm-s2__title { font-size: 40px; color: var(--hm-ink); }
  .hm-s2__lead { font-size: 14px; }
  .hm-steps { gap: 10px; margin-top: 16px; max-width: 62%; }
  .hm-steps li { align-items: center; text-align: center; font-size: 8.5px; letter-spacing: .06em; }
  .hm-steps li + li::before { left: -6px; top: 8px; width: 1px; height: 46px; background: var(--hm-rule); }
  .hm-steps .hm-ring { width: 44px; height: 44px; border: 1px solid var(--hm-bronze); color: var(--hm-bronze); font-size: 20px; }
  .hm-s2__words { right: 14px; top: auto; bottom: 18px; color: var(--hm-cream); }

  .hm-s3 { padding-bottom: 18px; background: linear-gradient(180deg, #f6efe4, #efe5d5); }
  .hm-needs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* Grid, not an absolutely-positioned chevron: the round ⟩ gets a column of
     its own, so it cannot land on top of the line under the title however
     long that line runs in any of the seven languages. */
  .hm-need { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; column-gap: 12px; aspect-ratio: auto; min-height: 94px; padding: 12px 14px 12px 18px; background: var(--hm-dark); color: var(--hm-cream); border-radius: 4px; }
  .hm-need img { left: 42%; width: 58%; }
  .hm-need::after { background: linear-gradient(90deg, rgba(18, 13, 10, 1) 38%, rgba(18, 13, 10, .45) 62%, rgba(18, 13, 10, .15) 100%); }
  .hm-need__h { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
  .hm-need__l { font-size: 22px; }
  .hm-need__t { margin: 0; font-size: 20px; }
  .hm-need__l, .hm-need__t { float: none; }
  .hm-need__s { grid-column: 1; grid-row: 2; margin-top: 6px; font-size: 12.5px; }
  .hm-go { grid-column: 2; grid-row: 1 / span 2; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--hm-gold-2); border-radius: 50%; font-size: 15px; color: var(--hm-cream); }

  .hm-s4 { display: block; min-height: 0; padding-bottom: 16px; }
  .hm-s4__globe, .hm-s8__globe { left: 0; right: 0; width: 100%; max-width: none; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
  .hm-s4__globe { object-position: left center; }
  .hm-s8__globe { object-position: right center; }
  .hm-s4::after { background: linear-gradient(180deg, rgba(18, 13, 10, .6) 0%, rgba(18, 13, 10, .9) 45%); }
  .hm-s4 .hm-h, .hm-s4 .hm-h h2 { color: var(--hm-cream); }
  .hm-s4 .hm-kick { color: var(--hm-gold); }
  .hm-legend { display: none; }
  .hm-desk { border: 1px solid var(--hm-line); border-radius: 4px; background: rgba(12, 9, 7, .8); color: var(--hm-cream); }
  .hm-desk li + li { border-top: 1px solid var(--hm-line); }
  .hm-desk a { grid-template-columns: minmax(0, .36fr) minmax(0, 1fr) auto auto; gap: 8px; padding: 10px 10px; border: 0; }
  .hm-desk__k { font-size: 11px; }
  .hm-desk__t { font-size: 12.5px; }
  .hm-badge { padding: 1px 8px; border: 1px solid var(--hm-gold); border-radius: 999px; font: 500 8px var(--hm-latin); letter-spacing: .1em; color: var(--hm-gold-2); }
  .hm-desk .hm-i { font-size: 14px; color: var(--hm-cream); }
  .hm-desk__all { display: block; width: 76%; margin: 12px auto 0; padding: 10px; text-align: center; border-radius: 999px; background: linear-gradient(180deg, #f3dfb6, #dcb57a); color: #2a1c0e; font-weight: 600; font-size: 13px; }

  .hm-s5 { min-height: 0; padding-bottom: 20px; }
  .hm-s5::after { background: linear-gradient(180deg, rgba(12, 9, 7, .92) 0%, rgba(12, 9, 7, .8) 55%, rgba(12, 9, 7, .55) 100%); }
  .hm-s5 .hm-h { max-width: 72%; }
  .hm-s5__note { margin: 0 0 10px; max-width: 72%; font-size: 12px; }
  .hm-find { flex-direction: column; max-width: 72%; border: 0; background: none; overflow: visible; }
  .hm-find__box { border: 1px solid var(--hm-line); border-radius: 6px; background: rgba(251, 248, 243, .95); padding: 0 12px; font-size: 16px; }
  .hm-find__box .hm-i { display: none; }
  .hm-find input { height: 42px; font-size: 14px; }
  .hm-find button { height: 42px; margin-top: 8px; border-radius: 6px; background: linear-gradient(180deg, #f3dfb6, #dcb57a); color: #2a1c0e; font-weight: 600; font-size: 14px; }
  .hm-s5__note { order: -1; }
  .hm-s5__words { bottom: 12px; right: 14px; }

  .hm-s6 { min-height: 0; }
  .hm-index { width: 64%; grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .hm-index li, .hm-index li:not(:nth-child(n)) { border-left: 0 !important; }
  .hm-index a { flex-direction: row; align-items: center; min-height: 0; padding: 8px 4px; }
  .hm-index span { font-size: 15px; }
  .hm-index .hm-i { font-size: 14px; }
  .hm-s6__img { display: block; width: 44%; }
  .hm-s6__words { bottom: 18px; right: 14px; }

  .hm-s7 { min-height: 0; }
  /* 82% left the row about 20px short of what ring + label + button need, and
     a flex row answers that by letting the label's single word run under the
     button. Grid with an `auto` button column cannot: whatever is left is the
     label's, and it wraps. */
  .hm-access { gap: 6px; max-width: 94%; }
  .hm-role { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 0; padding: 10px 12px; border: 1px solid var(--hm-line); border-radius: 4px; background: var(--hm-dark); color: var(--hm-cream); }
  .hm-role__img { left: 40%; width: 60%; }
  .hm-role::after { background: linear-gradient(90deg, rgba(18, 13, 10, 1) 42%, rgba(18, 13, 10, .5) 68%, rgba(18, 13, 10, .15) 100%); }
  .hm-role .hm-ring { width: 40px; height: 40px; border: 1px solid var(--hm-gold); color: var(--hm-gold); font-size: 20px; }
  .hm-role__t { min-width: 0; }
  .hm-role__t span, .hm-role__t b { overflow-wrap: anywhere; }
  .hm-role__t span { font-size: 12px; color: var(--hm-gold-2); }
  .hm-role__t b { font-size: 13px; margin: 0; }
  .hm-role__go { align-self: center; margin: 0; padding: 7px 13px; font-size: 11.5px; gap: 6px; white-space: nowrap; border-color: var(--hm-gold-2); background: rgba(12, 9, 7, .55); color: var(--hm-cream); }
  .hm-role--0 .hm-role__go { background: linear-gradient(180deg, #f3dfb6, #dcb57a); }

  .hm-s8 { display: block; min-height: 0; padding: 18px 14px 20px; }
  .hm-s8::after { background: linear-gradient(180deg, rgba(12, 9, 7, .92) 0%, rgba(12, 9, 7, .82) 60%, rgba(12, 9, 7, .6) 100%); }
  .hm-s8 > .hm-num { position: absolute; left: 14px; top: 18px; border: 0; }
  .hm-s8__t { padding-left: 64px; }
  .hm-s8 h2 { font-size: 24px; }
  .hm-s8__btns { flex-direction: column; gap: 10px; margin-top: 14px; }
  .hm-btn { width: 100%; }
  .hm-s8__ask { border-bottom: 1px solid currentColor; font-size: 13px; }
  .hm-s8__ask span { display: none; }
  .hm-s8__en { margin-top: 14px; padding-left: 64px; font-size: 9px; }
  .hm-s8__words { position: static; margin-top: 10px; text-align: left; }
}

.hm, .hm * { font-variant-numeric: lining-nums !important; }