/* Arirang Post -- public stylesheet.
 *
 * One stylesheet, no JavaScript, no web fonts, no third-party CSS. INP is
 * trivially good because nothing is interactive beyond links and one search
 * field, and CLS is zero because every image reserves its box from its intrinsic
 * width/height and nothing is inserted after render. The LCP element is the lead
 * headline on a page without a photograph; where a hero photograph is shown it is
 * currently served from the host that holds its licence, so that request is the
 * one third-party dependency the site has (docs/OPERATIONS.md covers what
 * production has to do about it).
 *
 * The visual language is drawn from Korean newspaper conventions observed on
 * live Korean and English-language Korean front pages: a centred authoritative
 * masthead, serif headlines carrying the hierarchy, hairline rules instead of
 * boxes and shadows, and a single restrained accent used only for section marks.
 * Nothing is copied: no brand mark, colour, wordmark or asset is reused.
 *
 * Patterns deliberately rejected, having seen them fail on live sites: dense
 * three-column front pages with a video rail, banner advertising, subscriber and
 * newsletter chips, a crowded seven-item menu, and mobile layouts that overflow
 * horizontally.
 */

:root {
  /* Restrained newsprint palette. The accent is a single deep red, used only for
     section marks and kickers -- never for large areas. */
  --ink: #14171c;
  --ink-2: #3c444f;
  --ink-3: #6b7480;
  --paper: #ffffff;
  --tint: #f5f6f8;
  --rule: #dcdfe4;
  --rule-strong: #14171c;
  --accent: #a4172a;
  --accent-dark: #7d1120;
  --alert-bg: #fdf3f2;
  --alert-rule: #a4172a;
  --note-bg: #f6f7f9;

  --serif: "Iowan Old Style", "Apple Garamond", Palatino, "Palatino Linotype",
    "Times New Roman", "Nanum Myeongjo", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo",
    "Malgun Gothic", Arial, sans-serif;

  --gutter: 1.25rem;
  --shell: 72rem;
  --measure: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  /* 17px base on small screens, comfortably above the 16px readability floor. */
  font-size: 1.0625rem;
  line-height: 1.68;
}

img,
svg,
video,
table,
pre {
  max-width: 100%;
}

/* Long unbroken strings (URLs, romanised names) must wrap, never widen the page. */
p,
li,
dd,
dt,
h1,
h2,
h3,
h4,
a {
  overflow-wrap: break-word;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- accessibility -------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: #fff;
  padding: 0.65rem 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}

.skip-link:focus {
  left: 0;
}

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

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--accent);
}

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

/* --- masthead ------------------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 0 0.5rem;
  flex-wrap: wrap;
}

.masthead-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-align: center;
}

.masthead-title a {
  text-decoration: none;
}

.masthead-dateline {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  width: 100%;
  padding-bottom: 0.6rem;
  margin: 0;
}

/* Double rule under the masthead: a newspaper convention, one hairline of cost. */
.masthead-rule {
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  height: 3px;
}

.masthead-nav {
  padding: 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0.55rem 0;
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-list a {
  display: block;
  padding: 0.15rem 0;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
}

.nav-list a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.nav-list a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.masthead-utility {
  border-top: 1px solid var(--rule);
  padding: 0.5rem 0;
}

.search-form {
  display: flex;
  gap: 0.4rem;
  max-width: 26rem;
  margin: 0 auto;
}

.search-form input {
  flex: 1 1 auto;
  min-width: 0; /* lets the field shrink instead of forcing overflow */
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.45rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
}

button {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* --- main ----------------------------------------------------------------- */
main {
  display: block;
  padding: 1.5rem 0 3rem;
}

.section {
  margin-top: 2.25rem;
}

.section:first-child {
  margin-top: 0;
}

/* Section bar: label sitting on a strong rule, the standard Korean section mark. */
.section-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--rule-strong);
  padding-bottom: 0.35rem;
  margin: 0 0 1rem;
}

.section-bar h2,
.section-bar h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-bar .section-more {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  text-decoration: none;
}

.section-bar .section-more:hover {
  color: var(--accent);
}

.kicker {
  margin: 0 0 0.35rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.meta {
  margin: 0.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
}

.muted {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
}

.empty {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink-3);
  border-left: 2px solid var(--rule);
  padding-left: 0.75rem;
  margin: 0;
}

/* --- lead ---------------------------------------------------------------- */
.lead {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5rem;
}

.lead-headline {
  margin: 0 0 0.5rem;
  font-size: clamp(1.75rem, 5.2vw, 2.85rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.lead-headline a {
  text-decoration: none;
}

.lead-headline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.lead-dek {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

.lead-impact {
  margin: 1rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--rule);
  font-size: 0.98rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

.lead-impact strong {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 0.25rem;
}

/* --- story lists --------------------------------------------------------- */
.story-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-list > li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}

.story-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.story-title {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 600;
}

.story-title a {
  text-decoration: none;
}

.story-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.story-dek {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Two columns on wide screens only, with a hairline divider between them. */
.columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.dateline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.92rem;
}

.dateline-list > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}

.dateline-list > li:first-child {
  border-top: 0;
}

.dateline-list .when {
  flex: 0 0 auto;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.dateline-list .what {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1rem;
}

.dateline-list .detail {
  flex: 1 1 100%;
  color: var(--ink-3);
  font-size: 0.8rem;
}

/* --- article ------------------------------------------------------------- */
.article {
  max-width: 42rem;
}

.article-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.article-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.article-dek {
  margin: 0;
  font-size: 1.08rem;
  color: var(--ink-2);
}

.article-body {
  font-size: 1.0625rem;
}

.article-body h2 {
  margin: 2rem 0 0.6rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.article-body h3 {
  margin: 1.5rem 0 0.4rem;
  font-size: 1.08rem;
}

.article-body ul,
.article-body ol {
  padding-left: 1.2rem;
}

.article-body li {
  margin: 0.3rem 0;
}

.article-body code {
  background: var(--tint);
  padding: 0.1em 0.3em;
  font-size: 0.92em;
}

.article-body blockquote {
  margin: 1.4rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
}

/* The traveller-impact box: the one element that must never be missed. */
.impact {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  background: var(--note-bg);
  border-left: 3px solid var(--accent);
}

.impact h2 {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.impact p {
  margin: 0;
  font-size: 1rem;
}

.factbox {
  margin: 2rem 0;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0 1rem;
}

.factbox h2 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.factbox dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 1rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
}

.factbox dt {
  font-weight: 600;
  color: var(--ink-3);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.55rem;
}

.factbox dd {
  margin: 0;
  color: var(--ink);
}

.sources,
.corrections,
.related {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}

.sources h2,
.corrections h2,
.related h2 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sources ul,
.corrections ul,
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.88rem;
}

.sources li,
.corrections li,
.related li {
  padding: 0.35rem 0;
  border-top: 1px solid var(--rule);
}

.sources li:first-child,
.corrections li:first-child,
.related li:first-child {
  border-top: 0;
}

/* Non-official material is listed under its own subhead so it cannot be read as
   a cited source. */
.sources-subhead {
  margin: 1rem 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- notices ------------------------------------------------------------- */
.notice {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  background: var(--note-bg);
  border-left: 3px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9rem;
}

.notice-warning {
  background: var(--alert-bg);
  border-left-color: var(--alert-rule);
}

/* --- breadcrumb and pagination ------------------------------------------ */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
}

.breadcrumb li + li::before {
  content: "\203a";
  margin-right: 0.5rem;
  color: var(--rule);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}

/* --- footer -------------------------------------------------------------- */
.site-footer {
  border-top: 2px solid var(--rule-strong);
  padding: 1.5rem 0 2.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-2);
}

.site-footer p {
  margin: 0 0 0.5rem;
  max-width: 44rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

/* --- search page --------------------------------------------------------- */
.search-page {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.25rem;
}

.search-page label {
  flex: 1 1 100%;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.search-page input {
  flex: 1 1 14rem;
  min-width: 0;
  border: 1px solid var(--rule);
  padding: 0.5rem 0.6rem;
  font-family: var(--sans);
  font-size: 1rem;
}

.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin: 1.9rem 0 0.5rem;
  font-size: 1.2rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}

.prose ol,
.prose ul {
  padding-left: 1.2rem;
}

/* --- wide screens -------------------------------------------------------- */
@media (min-width: 48rem) {
  body {
    font-size: 1.0625rem;
  }

  .columns {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.25rem;
  }

  /* Hairline column divider, drawn on the sidebar rather than as an element. */
  .columns > .column-side {
    border-left: 1px solid var(--rule);
    padding-left: 2.25rem;
  }

  .lead {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2.25rem;
    align-items: start;
  }

  .lead-secondary {
    border-left: 1px solid var(--rule);
    padding-left: 2.25rem;
  }

  .factbox dl {
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: 0.45rem 1.25rem;
  }

  .factbox dt {
    margin-top: 0;
  }

  .story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 1.75rem;
  }
}

@media (min-width: 64rem) {
  main {
    padding-top: 2rem;
  }
}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 47.99rem) {
  :root {
    --gutter: 1rem;
  }

  /* True single column: every multi-column construct collapses. */
  .lead,
  .columns,
  .story-grid,
  .factbox dl {
    display: block;
  }

  .lead-secondary,
  .columns > .column-side {
    border-left: 0;
    padding-left: 0;
    margin-top: 1.5rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.25rem;
  }

  .masthead-top {
    padding-top: 0.75rem;
  }

  .nav-list {
    gap: 0 1.1rem;
    font-size: 0.8rem;
  }

  .article,
  .prose,
  .lead-dek,
  .lead-impact {
    max-width: 100%;
  }

  .section-bar {
    flex-wrap: wrap;
  }
}

@media print {
  .masthead-nav,
  .masthead-utility,
  .site-footer,
  .search-form {
    display: none;
  }
}

/* --- photography ---------------------------------------------------------
 * Every figure reserves its box from the intrinsic width/height attributes, so
 * loading a photograph never shifts the text around it. Images are only rendered
 * when their dimensions and licence are known, so there is no placeholder state
 * to style.
 *
 * Photographs appear in hero positions only: the front-page lead, an article, an
 * entity record. There is deliberately no list thumbnail. A credit line small
 * enough to sit under a 7rem thumbnail is not legible, and licensed material has
 * to carry readable attribution wherever it appears, so the photograph is used
 * where it earns the space instead.
 */
.figure {
  margin: 0 0 1rem;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tint);
}

/* A hero is capped by height rather than cropped. Source photographs are whatever
   shape the photographer chose: a 3:4 portrait rendered at full column width is
   taller than the viewport and pushes the story off the screen. Constraining the
   height and letting the width follow keeps the whole frame visible -- cropping to
   a house aspect ratio would quietly cut the subject out of the picture. A
   portrait is aligned with the text column rather than centred in it, so it reads
   as part of the story instead of floating between two margins. The width/height
   attributes still describe the file, so the box is reserved before the bytes
   arrive and nothing shifts. */
.figure-hero img {
  width: auto;
  max-width: 100%;
  max-height: 22rem;
  margin-inline: 0;
}

.figure-credit {
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.figure-credit a {
  color: inherit;
}

.figure-generated {
  font-weight: 600;
  color: var(--accent);
}