@import url('../fonts/newsreader.css');
@import url('../fonts/inter.css');

/* =====================================================================
   Gulf Korean Times — public site
   Editorial system: hairlines not cards, rules not shadows, one
   institutional blue and a red held in reserve.
   ===================================================================== */

/* Hangul. Loaded only when Korean glyphs appear on the page, which is what
   the unicode-range buys us — the 2 MB face is never fetched for English. */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --serif: 'Newsreader', 'Pretendard', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Pretendard', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace;

  /* Brand, literal */
  --blue: #08469a;
  --navy: #122a88;
  --red:  #e83428;

  /* Derived — what keeps a strong palette from reading as Bootstrap */
  --blue-ink:  #073b84;
  --blue-tint: #f2f5fa;
  --blue-line: #d6dfec;

  --paper:   #fcfcfa;
  --surface: #ffffff;
  --rule:    rgba(11, 20, 45, 0.13);
  --rule-strong: rgba(11, 20, 45, 0.26);

  --ink-100: #0b0d10;
  --ink-90:  #1a1d22;
  --ink-55:  #5a6068;
  --ink-30:  #9aa0a8;

  /* Scrollbar, tinted toward the navy so it belongs to the palette. */
  --sb-thumb: rgba(11, 20, 45, 0.24);
  --sb-thumb-hover: rgba(11, 20, 45, 0.42);

  /* Type scale */
  --fs-kicker:  0.6875rem;
  --fs-meta:    0.75rem;
  --fs-caption: 0.8125rem;
  --fs-ui:      0.875rem;
  --fs-base:    1rem;
  --fs-rail:    1.0625rem;
  --fs-body:    1.1875rem;
  --fs-h5:      1.375rem;
  --fs-h4:      clamp(1.5rem, 1.3rem + 0.9vw, 1.75rem);
  --fs-h3:      clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 2.875rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.6vw, 4rem);
  --fs-hero:    clamp(2.75rem, 1.9rem + 4.2vw, 4.75rem);

  --gutter: 24px;
  --shell:  1280px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:   #0d1017;
    --surface: #151a23;
    --rule:    rgba(255, 255, 255, 0.14);
    --rule-strong: rgba(255, 255, 255, 0.28);
    --ink-100: #edeff2;
    --ink-90:  #d9dde3;
    --ink-55:  #97a0ad;
    --ink-30:  #626b78;
    --sb-thumb: rgba(255, 255, 255, 0.2);
    --sb-thumb-hover: rgba(255, 255, 255, 0.36);
    --blue:      #6fa8f5;
    --blue-ink:  #8fbefb;
    --blue-tint: #131a28;
    --blue-line: #253347;
    --red:       #ff6f62;
  }
}

:root[data-theme='dark'] {
  --paper:   #0d1017;
  --surface: #151a23;
  --rule:    rgba(255, 255, 255, 0.14);
  --rule-strong: rgba(255, 255, 255, 0.28);
  --ink-100: #edeff2;
  --ink-90:  #d9dde3;
  --ink-55:  #97a0ad;
  --ink-30:  #626b78;
  --sb-thumb: rgba(255, 255, 255, 0.2);
  --sb-thumb-hover: rgba(255, 255, 255, 0.36);
  --blue:      #6fa8f5;
  --blue-ink:  #8fbefb;
  --blue-tint: #131a28;
  --blue-line: #253347;
  --red:       #ff6f62;
}

/* Light-on-dark optically bolds; pull the weight back. */
:root[data-theme='dark'] body { font-weight: 380; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body { font-weight: 380; }
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-90);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--serif); color: var(--ink-100); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

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

::selection { background: var(--blue); color: #fff; }

/* Scrollbars. Chrome ignores ::-webkit-scrollbar once scrollbar-color is set,
   so the two paths are kept apart rather than declared together. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: 999px;
  border: 3px solid transparent;   /* insets the thumb without drawing a track */
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-hover); }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}

/* Korean typesetting. Hangul must never break mid-word, never take positive
   tracking, and needs more leading than Latin to look equally airy. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; letter-spacing: -0.005em; }
:lang(ko) .prose p { line-height: 1.85; max-width: 34em; }
:lang(ko) .kicker { letter-spacing: 0.02em; }
@media (max-width: 480px) { :lang(ko) { word-break: normal; } }

/* ----------------------------------------------------------------- layout */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Grid and flex children default to min-width:auto, so an item refuses to
   shrink below its longest unbreakable word — "BLACKPINK" in a 40px headline
   is enough to push a phone layout sideways. Note that overflow-wrap alone
   does not fix this: it permits a break during layout but does not reduce the
   intrinsic min-content width. min-width:0 does. */
.grid > *,
.article-layout > *,
.event-hero > *,
.event-row > *,
.footer__grid > * { min-width: 0; }

@media (max-width: 980px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; } }
@media (max-width: 620px) { .grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; } }

.band { padding-block: clamp(40px, 6vw, 72px); }
.band--tint { background: var(--blue-tint); border-block: 1px solid var(--rule); }
.band--tight { padding-block: clamp(28px, 4vw, 44px); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-100); color: var(--paper);
  padding: 12px 18px; font: 600 var(--fs-ui)/1 var(--sans);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------- typography */
.kicker {
  font: 600 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  display: inline-block;
}
.kicker--red { color: var(--red); }
.kicker--mute { color: var(--ink-55); }

.hed-hero { font: 700 var(--fs-hero)/1.04 var(--serif); letter-spacing: -0.025em; font-variation-settings: 'opsz' 72; text-wrap: balance; }
.hed-lead { font: 700 var(--fs-h1)/1.08 var(--serif);   letter-spacing: -0.02em;  font-variation-settings: 'opsz' 48; text-wrap: balance; }
.hed-2    { font: 700 var(--fs-h2)/1.1  var(--serif);   letter-spacing: -0.018em; font-variation-settings: 'opsz' 40; text-wrap: balance; }
.hed-sec  { font: 600 var(--fs-h3)/1.14 var(--serif);   letter-spacing: -0.013em; font-variation-settings: 'opsz' 32; text-wrap: balance; }
.hed-card { font: 600 var(--fs-h5)/1.2  var(--serif);   letter-spacing: -0.01em;  font-variation-settings: 'opsz' 24; text-wrap: balance; }
.hed-rail { font: 600 var(--fs-rail)/1.26 var(--serif); letter-spacing: -0.004em; font-variation-settings: 'opsz' 18; text-wrap: balance; }

/* Headlines carry names like "BLACKPINK" and "HUNTR/X" that are wider than a
   narrow phone column; let them break rather than push the page sideways. */
.hed-hero, .hed-lead, .hed-2, .hed-sec, .hed-card, .hed-rail,
.standfirst, .event-row__title { overflow-wrap: break-word; min-width: 0; }

.standfirst {
  font: 400 1.0625rem/1.5 var(--sans);
  color: var(--ink-55);
  max-width: 44em;
}

.byline { font: 400 var(--fs-meta)/1.3 var(--sans); letter-spacing: 0.02em; color: var(--ink-55); }
.byline strong { font-weight: 600; color: var(--ink-90); }
.byline .dot { color: var(--ink-30); margin-inline: 6px; }

/*
 * The writer's mark. A shared component, not a pack rule — every layout drops
 * it into a meta line of its own (.byline, .mq-band__meta, .dg-entry__meta…).
 *
 * inline-block and vertical-align rather than flex on the container: turning
 * any of those meta lines into a flex row would change how the byline wraps in
 * eleven compositions at once, to place one 20px square.
 */
.byline-av {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--av, var(--blue));
  color: #fff;
  text-align: center;
  overflow: hidden;
  flex: none;              /* harmless in a text line; keeps it from being squashed
                              where a pack does lay its meta row out as flex */
}

/* The square rides on the text baseline, so its own line-height sets its height. */
.byline-av--sm { width: 20px; height: 20px; font: 600 9px/20px var(--sans); letter-spacing: 0.04em; }
.byline-av--md { width: 24px; height: 24px; font: 600 10px/24px var(--sans); letter-spacing: 0.04em; }
.byline-av--lg { width: 44px; height: 44px; font: 600 15px/44px var(--sans); letter-spacing: 0.04em; margin-right: 10px; }
.byline-av--xl { width: 72px; height: 72px; font: 600 24px/72px var(--sans); letter-spacing: 0.04em; margin-right: 14px; }

/*
 * All six palette colours are deep, and dark mode's paper is #0d1017 — left
 * alone, the navy sits at 1.55:1 against it and the square disappears. Lifting
 * the tone fixes the edge but costs contrast for the white initials on top,
 * and the two pull in opposite directions: 72% is where the worse of the pair
 * peaks, at 3.33:1. Measured across all six, not chosen by eye — moving it
 * either way makes something worse.
 *
 * The photograph gets an outline instead: it has no say in its own edges.
 */
/* outline, not an inset shadow: an inset shadow on a replaced element paints
   under the image content and would never be seen. */
:root[data-theme='dark'] .byline-av { background: color-mix(in srgb, var(--av, #08469A) 72%, #ffffff); }
:root[data-theme='dark'] img.byline-av { outline: 1px solid var(--rule); outline-offset: -1px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .byline-av { background: color-mix(in srgb, var(--av, #08469A) 72%, #ffffff); }
  :root:not([data-theme='light']) img.byline-av { outline: 1px solid var(--rule); outline-offset: -1px; }
}

.caption { font: 400 var(--fs-caption)/1.45 var(--sans); color: var(--ink-55); padding-top: 8px; }
.caption .credit { color: var(--ink-30); }

/* ------------------------------------------------------------------ links */
.link-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue-line);
  transition: text-decoration-color 200ms;
}
.link-underline:hover { text-decoration-color: var(--blue); }

.more-link {
  font: 600 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.more-link::after { content: '→'; transition: transform 200ms; }
.more-link:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------- masthead */
/* Height of the utility strip — the sticky offset below depends on it. */
:root { --utility-h: 35px; }
@media (max-width: 620px) { :root { --utility-h: 31px; } }

/* The supplied logos are opaque PNGs on white; database/logos.php keys the
   ground out and produces a knocked-out variant, so the masthead can follow
   the theme instead of forcing a white block onto a dark page. */
.topbar__brand { display: grid; align-items: center; flex: 0 0 auto; }
.topbar__brand .logo { grid-area: 1 / 1; width: clamp(150px, 15vw, 200px); height: auto; }
.logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo--light { display: none; }
  :root:not([data-theme='light']) .logo--dark  { display: block; }
}
:root[data-theme='dark'] .logo--light { display: none; }
:root[data-theme='dark'] .logo--dark  { display: block; }
:root[data-theme='light'] .logo--light { display: block; }
:root[data-theme='light'] .logo--dark  { display: none; }

/* ------------------------------------------------------- breaking bar */
/*
 * Above the masthead, and outside it: the masthead is the sticky box, so a band
 * placed inside would ride along and hold a second strip at the top of the
 * screen for the whole visit. This one scrolls away with the page.
 *
 * A shared component, not a pack rule — no html[data-layout] scope, because it
 * belongs to all eleven.
 *
 * The ground is the brand red at 90%. At full strength, paper on #e83428 is
 * 4.13:1, under the 4.5:1 floor for text this size; 90% reads as the same red
 * and measures 4.93:1. Dark mode does not invert it: --red is already a lighter
 * red there, and paper on it collapses to 2.65:1, while ink on it is 6.98:1 —
 * so the dark palette flips the text instead of the ground.
 */
.breaking {
  background: color-mix(in srgb, var(--red) 90%, #000);
  color: var(--paper);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.breaking__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding-block: 7px;
}

.breaking__label {
  flex: none;
  font: 700 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

/* min-width: 0 or the headline refuses to shrink below its longest word and
   pushes the close button off a narrow screen. */
.breaking__headline {
  min-width: 0;
  flex: 1 1 auto;
  font: 600 0.9375rem/1.35 var(--sans);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms;
}
.breaking__headline:hover { text-decoration-color: currentColor; }

.breaking__time {
  flex: none;
  font: 400 var(--fs-meta)/1 var(--sans);
  opacity: 0.8;
}

.breaking__close {
  flex: none;
  width: 26px; height: 26px;
  border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font: 400 1rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 160ms;
}
.breaking__close:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 620px) {
  /* Two lines rather than an ellipsis: on a phone the headline is the point,
     and the timestamp is the first thing that can go. */
  .breaking__headline {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.875rem;
  }
  .breaking__time { display: none; }
  .breaking__inner { gap: 10px; }
  .breaking__label { padding-right: 10px; }
}

:root[data-theme='dark'] .breaking {
  background: var(--red);
  color: #0d1017;
  border-bottom-color: rgba(0, 0, 0, 0.35);
}
:root[data-theme='dark'] .breaking__label { border-right-color: rgba(0, 0, 0, 0.3); }
:root[data-theme='dark'] .breaking__headline { text-decoration-color: rgba(0, 0, 0, 0.35); }
:root[data-theme='dark'] .breaking__close { background: rgba(0, 0, 0, 0.16); }
:root[data-theme='dark'] .breaking__close:hover { background: rgba(0, 0, 0, 0.3); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .breaking {
    background: var(--red);
    color: #0d1017;
    border-bottom-color: rgba(0, 0, 0, 0.35);
  }
  :root:not([data-theme='light']) .breaking__label { border-right-color: rgba(0, 0, 0, 0.3); }
  :root:not([data-theme='light']) .breaking__headline { text-decoration-color: rgba(0, 0, 0, 0.35); }
  :root:not([data-theme='light']) .breaking__close { background: rgba(0, 0, 0, 0.16); }
  :root:not([data-theme='light']) .breaking__close:hover { background: rgba(0, 0, 0, 0.3); }
}

/* Slim utility strip. Scrolls away; the bar below it does not. It carries its
   own ground because the masthead is transparent — the bar below is frosted. */
.utility {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font: 500 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-55);
}
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 34px;
}
.utility__group { display: flex; align-items: center; gap: 16px; }
.utility__sep { color: var(--ink-30); }
.utility a:hover { color: var(--blue-ink); }

/*
 * The whole header is the sticky element, offset upward by the height of the
 * utility strip. The date/locale row scrolls away while the identity-and-
 * navigation bar pins to the top and rides over the page.
 *
 * Only .masthead may be the sticky box: a sticky element can travel no further
 * than its parent, so making .topbar sticky inside <header> would let it
 * scroll straight off.
 */
.masthead {
  position: sticky;
  top: calc(-1 * var(--utility-h, 35px));
  z-index: 60;
}

.topbar {
  position: relative;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms, box-shadow 220ms;
}

/*
 * Frosted glass. The blur lives on a pseudo-element rather than on .topbar
 * itself, because backdrop-filter makes an element a containing block for its
 * position:fixed descendants — and the mobile drawer is a fixed descendant of
 * .topbar. On ::before, which has no descendants, there is nothing to break.
 */
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  -webkit-backdrop-filter: saturate(175%) blur(16px);
  backdrop-filter: saturate(175%) blur(16px);
}
.topbar__inner { position: relative; }   /* paints above the frosted layer */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar::before { background: var(--paper); }
}
/* No rule at rest — only a hairline once the bar is actually pinned. */
.topbar.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 10px 24px -22px rgba(11, 20, 45, 0.55);
}
:root[data-theme='dark'] .topbar.is-stuck { box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.8); }

.topbar__inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  min-height: 62px;
}

/* Nowrap: the bar must stay one line at every desktop width, so the section
   list never drops a stray item onto a second row. */
.nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 2px clamp(11px, 1.35vw, 21px); min-width: 0; }
.nav a {
  /* --cat is set inline from the category's colour in the CMS; items without
     a category (Home, About) fall back to the institutional blue. */
  --cat-ink: var(--cat, var(--blue-ink));
  font: 600 0.8125rem/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-90);
  padding-block: 21px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 180ms, border-color 180ms;
}
.nav a:hover { color: var(--cat-ink); border-bottom-color: var(--cat-ink); }
.nav a.is-active { border-bottom-color: var(--cat-ink); }
.nav a[data-external]::after { content: '↗'; font-size: 0.8em; margin-left: 3px; color: var(--ink-30); }

/* The CMS colours are chosen against white; on a dark ground they need lifting
   or a navy category reads as unlit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .nav a { --cat-ink: color-mix(in srgb, var(--cat, #6fa8f5) 52%, #ffffff); }
}
:root[data-theme='dark'] .nav a { --cat-ink: color-mix(in srgb, var(--cat, #6fa8f5) 52%, #ffffff); }
:root[data-theme='light'] .nav a { --cat-ink: var(--cat, var(--blue-ink)); }

.topbar__search { margin-left: auto; display: flex; align-items: center; }
.topbar__search input {
  width: clamp(90px, 11vw, 150px);
  font: 400 var(--fs-ui)/1 var(--sans);
  color: var(--ink-90);
  background: none;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 7px 4px; border-radius: 0;
  transition: border-color 200ms, width 220ms;
}
.topbar__search input::placeholder { color: var(--ink-30); }
.topbar__search input:focus {
  outline: none; border-bottom-color: var(--blue); width: clamp(140px, 16vw, 210px);
}
.topbar__search button {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-55); padding: 7px 4px 7px 8px; display: grid; place-items: center;
}
.topbar__search button:hover { color: var(--blue-ink); }

/* --------------------------------------------------------- mobile drawer */
.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 12px 10px 12px 0; margin-left: -2px;
  color: var(--ink-100);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 21px; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), opacity 160ms;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(6px) rotate(-90deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { opacity: 0; }

.nav-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 10, 14, 0.5);
  opacity: 0; transition: opacity 220ms;
}
.nav-scrim.is-visible { opacity: 1; }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }

  .topbar__inner { min-height: 56px; }

  /* Off-canvas panel rather than a squeezed inline row. */
  .nav {
    /* --bar-bottom is written by site.js when the drawer opens, because the
       bar sits lower before the utility strip has scrolled away. */
    position: fixed; inset: var(--bar-bottom, 56px) auto 0 0; z-index: 55;
    width: min(320px, 84vw);
    flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; gap: 0;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    padding: 8px 0 24px;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform 260ms cubic-bezier(.2,.7,.3,1);
    visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav a {
    padding: 16px clamp(18px, 5vw, 28px);
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    font-size: 0.9375rem;
    white-space: normal;
  }
  /* In the drawer the section colour moves to a left marker. */
  .nav a.is-active { border-bottom-color: var(--rule); border-left-color: var(--cat-ink); }
  .nav a:hover { border-bottom-color: var(--rule); border-left-color: var(--cat-ink); }

  .topbar__brand { margin-right: auto; }
  .topbar__search input { width: clamp(84px, 20vw, 130px); }
}

@media (max-width: 620px) {
  .topbar__brand .logo { width: 152px; }
  .utility { font-size: 0.5625rem; letter-spacing: 0.08em; }
  .utility__inner { min-height: 30px; }
  .utility__group { gap: 12px; }
  .topbar__search input { width: 0; padding-inline: 0; border-bottom-color: transparent; }
  .topbar__search input:focus { width: min(46vw, 190px); padding-inline: 4px; border-bottom-color: var(--blue); }
  .nav { inset-block-start: var(--bar-bottom, 52px); }
  .topbar__inner { min-height: 52px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-scrim, .nav-toggle__bars,
  .nav-toggle__bars::before, .nav-toggle__bars::after { transition: none; }
}

/* --------------------------------------------------------------- sections */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 2px solid var(--blue);
  padding-top: 11px;
  margin-bottom: 22px;
}
.section-head--red { border-top-color: var(--red); }
.section-head--ink { border-top-color: var(--ink-100); }
.section-head__title {
  font: 600 var(--fs-h5)/1 var(--serif);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 24;
}
.section-head__note { font: 400 var(--fs-meta)/1 var(--sans); color: var(--ink-55); }
.section-head .more-link { margin-left: auto; }

/* ------------------------------------------------------------------ media */
.frame { position: relative; overflow: hidden; background: var(--blue-tint); }
.frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.3,1); }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--3x2  { aspect-ratio: 3 / 2; }
.frame--4x5  { aspect-ratio: 4 / 5; }
.frame--1x1  { aspect-ratio: 1 / 1; }

a:hover > .frame img, .card:hover .frame img { transform: scale(1.035); }

:root[data-theme='dark'] .frame img { filter: brightness(0.92) contrast(1.02); }

/* Placeholder when a record has no photography yet. */
.frame--empty {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-tint), var(--surface));
}
.frame--empty span {
  font: 600 var(--fs-kicker)/1 var(--sans);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-30);
}

/* ------------------------------------------------------------------ cards */
.card { display: block; }
.card .frame { margin-bottom: 13px; }
.card .kicker { margin-bottom: 7px; }
.card .hed-card, .card .hed-rail { margin-bottom: 8px; transition: color 180ms; }
.card:hover .hed-card, .card:hover .hed-rail {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--blue);
}
.card .standfirst { font-size: var(--fs-ui); margin-bottom: 9px; }

/* Hairlines between grid children — the single most editorial detail here. */
.rule-split > * + * { border-left: 1px solid var(--rule); padding-left: var(--gutter); }
@media (max-width: 620px) {
  .rule-split > * + * {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 22px;
  }
}

/* Text-only list — the density contrast that makes a homepage feel like print */
.list-plain { list-style: none; }
.list-plain li { border-top: 1px solid var(--rule); padding-block: 15px; }
.list-plain li:first-child { border-top: 0; padding-top: 0; }
.list-plain .hed-rail { margin-bottom: 5px; }

.numbered { counter-reset: rank; }
.numbered li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; }
.numbered li::before {
  counter-increment: rank; content: counter(rank);
  font: 500 1.5rem/0.9 var(--serif); color: var(--ink-30);
  font-variation-settings: 'opsz' 24;
}

/* ------------------------------------------------------------------- hero */
.hero { padding-block: clamp(30px, 4vw, 48px) 0; }
.hero__lead { grid-column: span 8; }
.hero__aside {
  grid-column: span 4;
  border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
}
@media (max-width: 980px) {
  .hero__lead { grid-column: span 6; }
  .hero__aside { grid-column: span 6; border-left: 0; padding-left: 0; margin-top: 34px; padding-top: 26px; border-top: 2px solid var(--ink-100); }
}
@media (max-width: 620px) {
  .hero__lead, .hero__aside { grid-column: 1 / -1; }
}

.hero__lead .frame { margin-bottom: 18px; }
.hero__lead .standfirst { margin-block: 12px 14px; font-size: 1.125rem; }

/* ----------------------------------------------------------------- events */
.event-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  padding-block: 17px;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.event-row:first-of-type { border-top: 0; padding-top: 0; }

.event-date {
  text-align: center;
  border-right: 1px solid var(--rule);
  padding-right: 13px;
  padding-top: 2px;
}
.event-date__mon {
  display: block;
  font: 600 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--red);
}
.event-date__day {
  display: block; margin-top: 4px;
  font: 500 1.875rem/1 var(--serif); letter-spacing: -0.02em;
  color: var(--ink-100);
  font-variation-settings: 'opsz' 30;
  font-variant-numeric: tabular-nums;
}
/* Both are spans, so they need the display declared: left inline they run into
   one paragraph — "WAGYU PATTY MASTERCLASS Sun 26 Jul 2026 · 12:00 AM" — and
   the title's margin does nothing at all. */
.event-row__body { display: block; min-width: 0; }
.event-row__title { display: block; font: 600 var(--fs-rail)/1.3 var(--serif); margin-bottom: 5px; }
.event-row:hover .event-row__title {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: var(--blue);
}
.event-row__meta { display: block; font: 400 var(--fs-meta)/1.4 var(--sans); color: var(--ink-55); }
.event-row__meta .sep { color: var(--ink-30); margin-inline: 6px; }

/* Trailing-edge thumbnail. The frame is a span here, so it has to be told to
   be a block before aspect-ratio means anything. */
.event-row--thumb { grid-template-columns: 58px minmax(0, 1fr) 88px; }
.event-row__thumb { display: block; }
.event-row__thumb .frame { display: block; }
@media (max-width: 620px) {
  .event-row--thumb { grid-template-columns: 58px minmax(0, 1fr) 64px; gap: 12px; }
}

/* Place-line above an event title — geography as kicker, the Monocle move. */
.place-line {
  font: 600 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-55); margin-bottom: 6px; display: block;
}

.event-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 780px) { .event-hero { grid-template-columns: minmax(0, 1fr); } }

.event-figures { display: flex; flex-wrap: wrap; gap: 28px 44px; margin-block: 24px; }
.event-figures dt {
  font: 600 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-55);
  margin-bottom: 7px;
}
.event-figures dd { margin: 0; font: 500 var(--fs-base)/1.4 var(--sans); color: var(--ink-90); max-width: 22em; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.chip {
  font: 600 var(--fs-meta)/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-55); padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.chip:hover { color: var(--ink-100); }
.chip.is-active { color: var(--ink-100); border-bottom-color: var(--red); }

/* ---------------------------------------------------------------- gallery */
.mosaic { display: flex; flex-wrap: wrap; gap: 4px; }
.mosaic a { flex: var(--ar, 1.5) 1 var(--basis, 240px); position: relative; }
.mosaic a .frame { height: 100%; aspect-ratio: var(--ar, 1.5); }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 34px var(--gutter); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 10, 14, 0.96);
  display: none; place-items: center;
  padding: clamp(16px, 5vw, 64px);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox img { max-height: 82vh; width: auto; margin-inline: auto; }
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding: clamp(16px, 4vw, 34px);
  color: #d9dde3; font: 400 var(--fs-caption)/1.45 var(--sans);
}
.lightbox__count { font-variant-numeric: tabular-nums; color: #97a0ad; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: #edeff2; font: 400 1.75rem/1 var(--sans); padding: 14px;
}
.lightbox__close { top: 8px; right: 12px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 2.25rem; }
.lightbox__nav--prev { left: 4px; }
.lightbox__nav--next { right: 4px; }

/* The player fills the same space a photograph would, at 16:9 and never taller
   than the frame the image gets. */
.lightbox__player {
  width: min(100%, 1280px);
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  background: #000;
}
.lightbox__player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------- play badge */
/*
 * Marks a gallery tile as a video. Drawn as a triangle in a ring rather than
 * shipped as an image: it has to sit legibly on any photograph, and a border
 * plus a CSS triangle costs no request and scales without blurring.
 */
.play-badge {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(8, 10, 14, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color 200ms, scale 200ms;
  pointer-events: none;
}
.play-badge::after {
  content: '';
  width: 0; height: 0;
  margin-left: 4px;             /* optical centring: a triangle sits left-heavy */
  border-left: 15px solid rgba(255, 255, 255, 0.95);
  border-block: 9px solid transparent;
}
a:hover > .frame > .play-badge,
a:hover .play-badge { background: var(--red); scale: 1.06; }

@media (prefers-reduced-motion: reduce) {
  .play-badge { transition: none; }
  a:hover .play-badge { scale: 1; }
}

/* --------------------------------------------------------------- partners */
/*
 * Sponsors, partners and official links — three rows, each a ladder of tiers.
 *
 * Nothing here is captioned "Platinum" or "Gold": the level is carried by size
 * and rhythm alone. Every step changes three things at once — the logo height,
 * the plaque width and how many fit on a line — because one of them on its own
 * is too quiet to read as a hierarchy.
 */
.partners { display: grid; gap: clamp(38px, 5vw, 64px); }

.partners__row { display: grid; gap: 18px; }

.partners__label {
  font: 600 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-55); text-align: center;
  margin-bottom: 4px;
}

/* One grid per tier. The minmax is the ladder's second rung: a platinum plaque
   cannot fit more than two to a line, a standard one fits seven. */
.partners__tier {
  display: grid;
  gap: 14px;
  justify-content: center;
}
.partners__tier--platinum { grid-template-columns: repeat(auto-fit, minmax(300px, 320px)); --logo-h: 104px; --plaque-p: 30px; }
.partners__tier--gold     { grid-template-columns: repeat(auto-fit, minmax(210px, 230px)); --logo-h: 76px;  --plaque-p: 24px; }
.partners__tier--silver   { grid-template-columns: repeat(auto-fit, minmax(168px, 180px)); --logo-h: 58px;  --plaque-p: 18px; }
.partners__tier--standard { grid-template-columns: repeat(auto-fit, minmax(132px, 148px)); --logo-h: 42px;  --plaque-p: 14px; }

/*
 * The plaque keeps a light surface in BOTH themes, and that is deliberate.
 * Of the thirty logos only six carry alpha: most of the rest are baked onto
 * white, two onto navy, one onto yellow. On a dark page the white ones would
 * burn as cut-out rectangles and the navy ones would vanish. A constant light
 * plaque gives every one of them the background it was drawn for — a lit
 * display case on dark paper, which is how print handles the same problem.
 */
.partners__plaque {
  display: grid;
  gap: 10px;
  justify-items: center;
  align-content: center;
  padding: var(--plaque-p) 16px;
  background: #fbfbf9;
  border: 1px solid rgba(11, 20, 45, 0.12);
  border-top: 1px solid rgba(11, 20, 45, 0.12);
  border-radius: 2px;
  transition: border-color 240ms, box-shadow 240ms;
}

/* The one silent nod to rank beyond size: the top rule gains weight. */
.partners__tier--platinum .partners__plaque { border-top: 2px solid var(--blue); }
.partners__tier--gold     .partners__plaque { border-top: 1px solid rgba(11, 20, 45, 0.34); }

a.partners__plaque:hover {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
a.partners__plaque:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* A fixed box, so a square crest and a 4:1 wordmark both sit correctly: the
   crest uses the height, the wordmark uses the width, neither is distorted. */
.partners__mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--logo-h);
}
/*
 * max-height is pinned to the token, not to 100%. The mark box has a fixed
 * height, but the grid row inside it is auto-sized, so a percentage resolves
 * against a track that grows to fit the image — and a 264×264 crest happily
 * paints at 264 inside a 104px box. Measuring caught it; the token does not
 * have that escape hatch.
 */
/*
 * Full colour at rest. Desaturating until hover would leave every logo grey
 * on a phone, where there is no hover to give — and phones are most of this
 * readership. The plaque and the hairline grid are what keep thirty clashing
 * palettes orderly; the colour does not need suppressing as well.
 */
.partners__mark img {
  max-width: 100%;
  max-height: var(--logo-h);
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Stands in when no logo has been uploaded yet. */
.partners__fallback {
  font: 600 var(--fs-caption)/1.35 var(--sans);
  color: #4a5058;
  text-align: center;
  overflow-wrap: break-word;
}

.partners__name {
  font: 500 var(--fs-meta)/1.35 var(--sans);
  letter-spacing: 0.02em;
  color: #5a6068;
  text-align: center;
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  /*
   * Fewer columns, but the heights keep their distance. Flattening the ladder
   * here would delete the hierarchy exactly where there is least room to
   * re-explain it.
   */
  .partners__tier--platinum { grid-template-columns: minmax(0, 300px); --logo-h: 84px; }
  .partners__tier--gold     { grid-template-columns: repeat(2, minmax(0, 1fr)); --logo-h: 62px; }
  .partners__tier--silver   { grid-template-columns: repeat(2, minmax(0, 1fr)); --logo-h: 48px; }
  .partners__tier--standard { grid-template-columns: repeat(3, minmax(0, 1fr)); --logo-h: 34px; }
  .partners__tier { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .partners__plaque { transition: none; }
}

/* -------------------------------------------------------------------- ads */
.ad {
  display: grid; place-items: center;
  margin-block: clamp(34px, 5vw, 52px);
  padding-block: 20px;
  border-block: 1px solid var(--rule);
}
/* The run-of-site band sits between the page and the footer, so it needs no
   top rule of its own — the page above already ends on one. */
.ad-footer .ad { margin-bottom: 0; border-bottom: 0; }

/* Inside article prose the slot must not inherit the measure of the column it
   was spliced into, and it should read as an interruption, not a paragraph. */
.prose .ad { margin-inline: 0; max-width: none; }
.ad::before {
  content: 'Advertisement';
  font: 400 0.625rem/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-30); margin-bottom: 12px;
}
/* Reserve the exact box so an ad can never shift the layout. */
.ad__slot { width: 300px; min-height: 250px; display: grid; place-items: center; background: var(--blue-tint); }
.ad__slot img { width: 100%; height: 100%; object-fit: cover; }
.ad__slot--billboard { width: 100%; max-width: 970px; min-height: 180px; }
/* --ink-55, not --ink-30: on the tinted slot the lighter grey came out at
   2.41:1, under the 4.5:1 floor, so the house invitation read as an empty box
   rather than as an invitation. The ADVERTISEMENT label above keeps --ink-30 —
   it is meant to recede. */
.ad__placeholder { font: 500 var(--fs-caption)/1.5 var(--sans); color: var(--ink-55); text-align: center; padding: 22px; }

/* ------------------------------------------------------------- instagram */
.social-band { display: grid; gap: 26px; }
.social-band__head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.social-band__handle {
  font: 600 clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem)/1 var(--serif);
  letter-spacing: -0.02em; font-variation-settings: 'opsz' 36;
}
.social-band__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
@media (max-width: 780px) { .social-band__strip { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ prose */
.prose {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: var(--ink-90);
  max-width: 40em;
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font: 600 var(--fs-h4)/1.2 var(--serif);
  letter-spacing: -0.012em; margin-top: 1.9em;
  font-variation-settings: 'opsz' 28;
}
.prose h3 { font: 600 var(--fs-h5)/1.25 var(--serif); margin-top: 1.7em; }
.prose a { color: var(--blue-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 1.1em; margin-left: 0;
  font-size: 1.3125rem; line-height: 1.45; color: var(--ink-100);
}
.prose .lede { font-size: 1.3125rem; line-height: 1.48; color: var(--ink-100); }
.prose figure { margin: 2em 0; }

/* Drop cap on features only, sitting on the third baseline. */
.prose--feature > p:first-of-type::first-letter {
  float: left; font-family: var(--serif); font-weight: 500;
  font-size: 3.9em; line-height: 0.82;
  margin: 0.06em 0.08em 0 0;
  font-variation-settings: 'opsz' 72;
  color: var(--ink-100);
}
:lang(ko) .prose--feature > p:first-of-type::first-letter { float: none; font-size: inherit; margin: 0; }

/* ---------------------------------------------------------------- article */
.article-head { max-width: 46em; }
.article-head .hed-lead { margin-block: 12px 16px; }
.article-head .standfirst { font-size: 1.1875rem; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule);
}

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 980px) { .article-layout { grid-template-columns: minmax(0, 1fr); } }
.article-aside { position: sticky; top: 24px; display: grid; gap: 34px; }

.share-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.share-row a, .share-row button {
  font: 600 var(--fs-meta)/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-55); border: 1px solid var(--rule);
  background: none; cursor: pointer;
  padding: 9px 13px; border-radius: 2px;
  transition: border-color 180ms, color 180ms;
}
.share-row a:hover, .share-row button:hover { color: var(--ink-100); border-color: var(--rule-strong); }

/* ----------------------------------------------------------------- footer */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(44px, 6vw, 72px) 30px;
  margin-top: clamp(48px, 7vw, 88px);
}
.footer a { color: rgba(255, 255, 255, 0.78); }
.footer a:hover { color: #fff; }
.footer h3 {
  font: 600 var(--fs-kicker)/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55); margin-bottom: 15px;
}
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px var(--gutter); }
@media (max-width: 880px) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.footer__links { list-style: none; display: grid; gap: 9px; font-size: var(--fs-ui); }
.footer__brand img { width: 230px; }
.footer__bottom {
  margin-top: 42px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: var(--fs-meta); color: rgba(255, 255, 255, 0.55);
}

/*
 * Powered-by credit, taken from hisseoulherheart.com so the two read as one
 * hand. Its values are kept rather than translated into this site's kicker
 * convention — the point was to match, and the letter-spacing is wider here
 * than the 0.1em used elsewhere.
 *
 * Two deliberate departures from the source:
 *   colour, because --ivory-dim is a token of that site; rgba(255,255,255,.55)
 *     is the same role here and is what .footer__bottom already uses (4.71:1
 *     on the navy);
 *   opacity, because the source fades the logo to 0.85 until hover, which
 *     blends 15% of the ground into it. The mark stays in its own colours.
 */
.footer__powered {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.footer__powered a { display: inline-flex; align-items: center; }
.footer__powered img { height: 20px; width: auto; display: block; }

/* ------------------------------------------------------------------ forms */
.field { display: grid; gap: 7px; }
.field label { font: 600 var(--fs-meta)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-55); }
.field input, .field textarea, .field select {
  font: 400 var(--fs-base)/1.4 var(--sans);
  color: var(--ink-90); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: 11px 13px; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.field .hint { font-size: var(--fs-meta); color: var(--ink-30); }
.field .error { font-size: var(--fs-meta); color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 var(--fs-ui)/1 var(--sans); letter-spacing: 0.04em;
  padding: 13px 22px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; transition: background 180ms, border-color 180ms, color 180ms;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-ink); }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink-90); background: none; }
.btn--ghost:hover { border-color: var(--ink-55); }

.newsletter { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 220px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; padding: 12px 14px; border-radius: 2px;
  font: 400 var(--fs-ui)/1.3 var(--sans);
}
.newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter .btn { background: #fff; color: var(--navy); }

/* Shown only to a signed-in editor previewing a layout that is not live. */
.layout-preview {
  background: var(--ink-100);
  color: var(--paper);
}
.layout-preview__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 20px;
  padding-block: 9px;
  font: 500 var(--fs-meta)/1.4 var(--sans);
}
.layout-preview b { font-weight: 700; }
.layout-preview a {
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--fs-kicker); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ flash */
.flash { border: 1px solid var(--rule-strong); border-left-width: 3px; padding: 13px 16px; border-radius: 2px; font-size: var(--fs-ui); margin-bottom: 16px; }
.flash--success { border-left-color: #0b7a4b; }
.flash--error   { border-left-color: var(--red); }
.flash--info    { border-left-color: var(--blue); }

/* ------------------------------------------------------------- pagination */
.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
.pagination a, .pagination span {
  font: 500 var(--fs-ui)/1 var(--sans);
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-55);
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--ink-55); color: var(--ink-100); }
.pagination .is-current { background: var(--ink-100); border-color: var(--ink-100); color: var(--paper); }
.pagination .gap { border: 0; }

/* ------------------------------------------------------------------ misc */
.empty-state { border: 1px dashed var(--rule-strong); padding: clamp(28px, 5vw, 52px); text-align: center; color: var(--ink-55); }
.empty-state h3 { font: 600 var(--fs-h5)/1.2 var(--serif); color: var(--ink-90); margin-bottom: 8px; }

.breadcrumb { font: 500 var(--fs-meta)/1 var(--sans); color: var(--ink-55); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb .sep { color: var(--ink-30); }

.page-head { padding-block: clamp(32px, 5vw, 52px) 0; }
.page-head .hed-2 { margin-block: 10px 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Icon buttons and links in the utility strip. */
.icon-link {
  background: none; border: 0; cursor: pointer; padding: 2px;
  color: inherit; display: inline-grid; place-items: center;
  transition: color 180ms;
}
.icon-link:hover { color: var(--blue-ink); }
.icon-link svg { display: block; }

/* The icon shows the theme the button switches TO, matching its aria-label:
   on a light page you see a moon, on a dark page a sun. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme='dark'] .theme-toggle .icon-sun  { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
:root[data-theme='light'] .theme-toggle .icon-sun  { display: none; }
:root[data-theme='light'] .theme-toggle .icon-moon { display: block; }

@media (max-width: 620px) { .hide-sm { display: none; } }

.stack-8  { display: grid; gap: 8px; }
.stack-16 { display: grid; gap: 16px; }
.stack-24 { display: grid; gap: 24px; }
.stack-32 { display: grid; gap: 32px; }
.stack-48 { display: grid; gap: 48px; }

.col-12 { grid-column: 1 / -1; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 980px) {
  .col-8 { grid-column: span 6; }
  .col-4, .col-3 { grid-column: span 3; }
}
@media (max-width: 620px) {
  .col-8, .col-6, .col-4, .col-3 { grid-column: 1 / -1; }
}

@media print {
  .masthead__utility, .nav, .footer, .ad, .article-aside { display: none !important; }
  body { background: #fff; }
}