:root {
  --paper: #fdfcfa;
  --ink: #0a0a0a;
  --mute: #6b7280;
  --chop: #c9a96e;
  --chop-ink: #ffffff;
  --harbour: #c9a96e;
  --ticket: #ffffff;
  --rule: #e5e7eb;
  --gold: #c9a96e;
  --off-white: #f9fafb;
  --charcoal: #1c1c1c;
  --font-sans: "Noto Sans HK", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-en: "Inter", "Noto Sans HK", sans-serif;
  --max: 72rem;
  /* Type scale: 16px body, 1.25 major-third, 13px floor (WCAG readable) */
  --fs-min: 0.875rem;  /* 14px floor */
  --fs-sm: 0.9375rem;  /* 15px */
  --fs-md: 1rem;       /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --lh-tight: 1.25;
  --lh-body: 1.7;
  --measure: 40rem;
  /* 4px spacing grid */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
}

* { box-sizing: border-box }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-md)/var(--lh-body) var(--font-sans);
}
img { max-width: 100%; height: auto }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { color: var(--harbour) }
:focus-visible { outline: 2px solid var(--chop); outline-offset: 2px }
.sr, .skip { position: absolute; left: -999px; top: auto }
.skip:focus { left: 1rem; top: 1rem; background: var(--ticket); padding: .4rem .7rem; z-index: 80 }

.wrap { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto }

.mast { background: var(--ticket); border-bottom: 1px solid var(--rule) }
.mast-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  padding: 1.5rem 0 1.1rem;
}
.mast-kicker {
  margin: 0;
  font: 500 var(--fs-min)/1.3 var(--font-en);
  letter-spacing: .04em;
  color: var(--mute);
  text-transform: uppercase;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; justify-self: center }
.brand:hover { color: var(--ink) }
.chop {
  display: grid; place-items: center;
  width: 2.65rem; height: 2.65rem;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: 700 var(--fs-min)/1.15 var(--font-en);
  transform: none;
  box-shadow: none;
  letter-spacing: -.02em;
}
.chop.sm { width: 2.25rem; height: 2.25rem; font-size: var(--fs-min); position: absolute; top: -.45rem; right: -.3rem; background: var(--gold); color: var(--ink); border-radius: 8px }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1 }
.brand-name { font: 700 1.65rem/1 var(--font-en); letter-spacing: .02em }
.brand-sub { font-size: var(--fs-min); color: var(--mute) }
.mast-tools { justify-self: end }
.find { display: flex; border: 1px solid var(--rule); background: #fff }
.find input { border: 0; padding: .45rem .65rem; min-width: 10rem; font: inherit; background: transparent }
.find button {
  border: 0; border-left: 1px solid var(--rule);
  background: var(--off-white); color: var(--ink);
  padding: 0 .75rem; font: 500 var(--fs-min) var(--font-en); cursor: pointer
}
.find.lg { margin-top: 1rem; max-width: 28rem }
.find.lg input { flex: 1 }

.dir { background: var(--ticket); color: var(--ink); border-bottom: 1px solid var(--rule) }
.dir-inner { display: flex; flex-wrap: wrap; gap: .15rem 0; align-items: center }
.dir a, .dir-more {
  color: var(--ink);
  text-decoration: none;
  font: 500 var(--fs-sm)/1 var(--font-sans);
  padding: .7rem .85rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.dir a:hover, .dir a.is-on, .dir-more:hover { color: var(--ink); background: transparent; box-shadow: inset 0 -2px 0 var(--gold) }
.dir-more-wrap { position: relative }
.dir-pop {
  display: none;
  position: absolute; left: 0; top: 100%;
  background: var(--ticket); color: var(--ink);
  border: 1px solid var(--ink);
  min-width: 10rem; z-index: 40;
}
.dir-more-wrap.open .dir-pop { display: flex; flex-direction: column }
.dir-pop a { color: var(--ink) }
.dir-pop a:hover { background: var(--paper); color: var(--ink) }

.hero { padding: 2rem 0 1.5rem }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-height: 22rem;
}
.hero-main { min-height: 22rem }
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; min-height: 22rem }
.hero-tile {
  position: relative;
  display: block;
  height: 100%;
  min-height: 10.5rem;
  overflow: hidden;
  background: var(--charcoal);
  color: #fff;
  text-decoration: none;
}
.hero-tile:hover { color: #fff }
.hero-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.72);
}
.hero-tile-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  padding: 1.1rem 1.15rem 1.15rem;
  background: linear-gradient(transparent 20%, rgba(0,0,0,.62));
}
.hero-tile .slip-kicker { color: var(--gold) }
.hero-main .hero-tile h1 {
  font: 700 var(--fs-3xl)/var(--lh-tight) var(--font-sans);
  margin: .25rem 0 0;
}
.hero-side .hero-tile h2 {
  font: 700 var(--fs-lg)/1.3 var(--font-sans);
  margin: .2rem 0 0;
}
@media (max-width: 800px) {
  .hero-grid, .hero-side { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0 }
  .hero-main { min-height: 16rem }
  .hero-tile { min-height: 12rem }
}
.hero-flag, .eyebrow, .slip-kicker, .slip-label {
  font: 500 var(--fs-min)/1 var(--font-en);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chop);
  margin: 0 0 .5rem;
}
.article-top h1, .list-hero h1 {
  font: 700 var(--fs-3xl)/var(--lh-tight) var(--font-sans);
  margin: .2rem 0 .7rem;
  letter-spacing: -.01em;
}
.slip-body { margin: 0; font-size: var(--fs-lg); color: var(--ink) }
.slip-go {
  display: inline-block;
  margin-top: 1rem;
  font: 500 var(--fs-min) var(--font-en);
  border-bottom: 2px solid var(--chop);
  text-decoration: none;
}

.cluster { width: min(var(--max), calc(100% - 2rem)); margin: 2.75rem auto }
.cluster-head, .section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--rule);
  padding: .5rem 0 .9rem;
}
.cluster-head h2, .related h2 {
  font: 700 var(--fs-xl)/var(--lh-tight) var(--font-sans);
  margin: 0;
}
.cluster-head a { font-size: var(--fs-sm); color: var(--harbour) }

.card-row, .card-grid {
  display: grid;
  gap: 1rem;
}
.card-row { grid-template-columns: repeat(3, 1fr) }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin-bottom: 3rem }
.card {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--ticket);
  border: 1px solid var(--rule);
  padding: 1rem 1rem .85rem;
  text-decoration: none;
  min-height: 100%;
}
.card { border: 0; border-radius: 0; overflow: hidden; padding: 0 0 .85rem; background: transparent }
.card-media { aspect-ratio: 16/9; overflow: hidden; background: var(--off-white); margin-bottom: .65rem }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block }
.card-cat { padding-top: 0 }
.card:hover { color: var(--ink); box-shadow: none }
.card:hover .card-title { color: var(--mute) }
.hero-cover, .article-cover img { width: 100%; height: auto; display: block; border-radius: 8px }
.hero-cover { margin: 0 0 1.25rem; border-radius: 2px; aspect-ratio: 16/9; object-fit: cover; max-height: 26rem }
.article-cover { margin: 0 0 1.5rem }
.card-cat { font: 500 var(--fs-min) var(--font-en); color: var(--harbour); letter-spacing: .06em }
.card-title { font: 700 var(--fs-lg)/1.35 var(--font-sans); margin: 0 }
.card-ans { margin: 0; color: var(--mute); font-size: var(--fs-sm); flex: 1 }
.card-meta { font: 400 var(--fs-min) var(--font-en); color: var(--mute) }

.linelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.linelist li { border-bottom: 1px solid var(--rule) }
.linelist a {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1rem;
  padding: .7rem 0;
  text-decoration: none;
  align-items: baseline;
}
.linelist a:hover .ll-title { color: var(--harbour) }
.ll-cat { font: 500 var(--fs-min) var(--font-en); color: var(--mute) }
.ll-title { font-weight: 600 }
.linelist time { font: 400 var(--fs-min) var(--font-en); color: var(--mute) }

.list-hero { padding: 2rem 0 1rem }
.lede { color: var(--mute); max-width: 36rem }
.empty { padding: 2rem 0 4rem; color: var(--mute) }

.article { padding: 2.5rem 0 4rem; max-width: var(--measure) }
.crumbs { font-size: var(--fs-sm); color: var(--mute); margin-bottom: 1rem }
.crumbs a { color: var(--harbour) }
.crumbs span { margin: 0 .35rem }
.article-top h1 { margin-top: .2rem }
.byline { font: 400 var(--fs-min) var(--font-en); color: var(--mute); margin: 0 0 1.25rem }
.article .answer-slip { margin: 0 0 1.75rem }

.prose { font-size: var(--fs-lg); line-height: var(--lh-body); overflow-wrap: anywhere }
.prose > *:first-child { margin-top: 0 }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-sans); line-height: 1.3; margin: 2rem 0 .7rem; font-weight: 700
}
.prose h1 { font-size: var(--fs-3xl) }
.prose h2 { font-size: var(--fs-2xl) }
.prose h3 { font-size: var(--fs-xl) }
.prose h4 { font-size: var(--fs-lg) }
.prose h5, .prose h6 { font-size: var(--fs-md) }
.prose p, .prose address { margin: 0 0 1rem }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1rem }
.prose li { margin: .3rem 0 }
.prose li > ul, .prose li > ol { margin: .2rem 0 }
.prose dl { margin: 0 0 1rem }
.prose dt { font-weight: 700 }
.prose dd { margin: 0 0 .6rem 1.2rem }
.prose a { color: var(--harbour) }
.prose strong, .prose b { font-weight: 700 }
.prose em, .prose i, .prose cite { font-style: italic }
.prose small { font-size: var(--fs-sm) }
.prose sub, .prose sup { font-size: .75em; line-height: 0 }
.prose mark { background: #f3e6c4; padding: 0 .15em }
.prose abbr[title] { text-decoration: underline dotted }
.prose hr, .prose .wp-block-separator {
  border: 0; border-top: 1px solid var(--rule); margin: 2rem 0
}
.prose table, .prose .wp-block-table table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 1rem 0
}
.prose .wp-block-table, .article .prose {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}
.prose th, .prose td { border: 1px solid var(--rule); padding: .45rem .6rem; text-align: left; vertical-align: top }
.prose th { background: var(--off-white); font-weight: 600 }
.prose caption { caption-side: bottom; font-size: var(--fs-sm); color: var(--mute); padding-top: .4rem }
.prose blockquote, .prose .wp-block-quote, .prose .wp-block-pullquote {
  margin: 1.4rem 0;
  padding: .15rem 0 .15rem 1rem;
  border-left: 3px solid var(--gold);
  color: var(--mute);
}
.prose blockquote p:last-child, .prose .wp-block-quote p:last-child { margin-bottom: 0 }
.prose pre, .prose .wp-block-code, .prose .wp-block-preformatted {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.55;
  background: var(--off-white);
  border: 1px solid var(--rule);
  padding: .9rem 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.prose code, .prose kbd, .prose samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--off-white);
  padding: .08em .3em;
}
.prose pre code { background: none; padding: 0; font-size: inherit }
.prose img, .prose video, .prose iframe, .prose figure {
  max-width: 100%; height: auto
}
.prose figure, .prose .wp-block-image, .prose .wp-block-embed, .prose .wp-block-video {
  margin: 1.4rem 0
}
.prose figcaption, .prose .wp-element-caption, .prose .wp-caption-text {
  font-size: var(--fs-sm); color: var(--mute); margin-top: .4rem
}
.prose .alignleft { float: left; margin: .3rem 1.2rem .8rem 0; max-width: 46% }
.prose .alignright { float: right; margin: .3rem 0 .8rem 1.2rem; max-width: 46% }
.prose .aligncenter, .prose .aligncenter img { display: block; margin-left: auto; margin-right: auto }
.prose .alignwide { width: 100% }
.prose .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) }
.prose .wp-block-gallery, .prose .gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; margin: 1rem 0
}
.prose .wp-block-gallery img, .prose .gallery img { width: 100%; height: auto }
.prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 }
.prose .wp-block-column { flex: 1 1 12rem }
.prose .wp-block-spacer { display: block }
.prose .has-text-align-left { text-align: left }
.prose .has-text-align-center { text-align: center }
.prose .has-text-align-right { text-align: right }
.prose iframe { width: 100%; aspect-ratio: 16/9; border: 0 }
.prose audio, .prose video { width: 100%; margin: 1rem 0 }
.prose details { margin: 1rem 0 }
.prose summary { cursor: pointer; font-weight: 600 }
.prose article { margin: 0 }
.prose article > h1 { font-size: var(--fs-2xl) }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 2rem 0 1rem }
.tags a {
  font: 500 var(--fs-min) var(--font-sans);
  border: 1px solid var(--rule);
  padding: .2rem .5rem;
  text-decoration: none;
}
.share { display: flex; gap: .75rem; align-items: center; font-size: var(--fs-sm); margin: 1rem 0 2rem; color: var(--mute) }
.share a { color: var(--harbour) }
.related { border-top: 1px solid var(--rule); padding-top: 1rem }

.board { margin: 0 auto 3rem }
.slip-form {
  background: transparent;
  border-top: 1px solid var(--rule);
  padding: 2rem 0 0;
}
.slip-lede { margin: 0 0 .7rem; color: var(--mute); font-size: var(--fs-sm) }
.slip-row { display: flex; gap: 0; max-width: 28rem; border: 1px solid var(--ink) }
.slip-row input { flex: 1; border: 0; padding: .5rem .7rem; font: inherit }
.slip-row button { border: 0; background: var(--gold); color: var(--ink); padding: 0 1rem; font: 500 var(--fs-min) var(--font-en); cursor: pointer }
.slip-msg { min-height: 1.2em; font-size: var(--fs-sm); margin: .5rem 0 0 }

.colophon { background: var(--charcoal); color: #d1d5db; padding: 2rem 0 2.4rem; font-size: var(--fs-sm) }
.colo-inner { display: grid; gap: .8rem }
.colophon a { color: #fff }
.colophon nav { display: flex; flex-wrap: wrap; gap: .6rem 1rem }
.copy { margin: 0; font: 400 var(--fs-min) var(--font-en); opacity: .7 }

@media (max-width: 800px) {
  .mast-top { grid-template-columns: 1fr; justify-items: start }
  .brand { justify-self: start }
  .mast-tools { justify-self: stretch }
  .find { width: 100% }
  .find input { flex: 1; min-width: 0 }
  .card-row { grid-template-columns: 1fr }
  .linelist a { grid-template-columns: 1fr; gap: .15rem }
  .dir-inner { overflow-x: auto; flex-wrap: nowrap }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}