/* Article-only loading policy: preloaded fonts must not replace visible fallback text late. */
@font-face { font-family: "Be Vietnam Pro Editorial"; src: url("assets/fonts/be-vietnam-pro-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Be Vietnam Pro Editorial"; src: url("assets/fonts/be-vietnam-pro-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: optional; }
/* Lora by Cyreal, SIL OFL. Loaded only on Góc Tré and its articles. */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("assets/fonts/lora-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("assets/fonts/lora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("assets/fonts/lora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
.article-page { --font: "Be Vietnam Pro Editorial", "Segoe UI", Arial, sans-serif; --font-literary: "Lora", Georgia, serif; }
.article-page ::selection { color: var(--paper); background: var(--brand); }
.editorial-index { background: var(--paper); --editorial-rule: #bda88e; --editorial-column-gap: 48px; --editorial-inset: 32px; }
.editorial-masthead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; padding: 48px var(--editorial-inset) 40px; }
.editorial-cover-title { padding-block: 8px; }
.editorial-masthead h1 { margin: 0; color: var(--brand); font: 600 clamp(64px, 6.7vw, 96px)/1.04 var(--font-literary); letter-spacing: -.035em; }
.editorial-masthead h1 span { display: block; margin-bottom: 10px; color: var(--olive); font-size: .54em; font-weight: 400; letter-spacing: -.025em; }
.editorial-prologue { max-width: 430px; padding-left: 32px; border-left: 1px solid var(--line); }
.editorial-prologue .editorial-invitation { margin: 0 0 16px; font: 400 25px/1.5 var(--font-literary); color: var(--olive); }
.editorial-prologue > p:not(.editorial-invitation) { margin: 0; font-size: 14px; line-height: 1.85; color: var(--muted); }
.editorial-begin { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 16px; color: var(--brand); font-size: 13px; text-underline-offset: .3em; }
.editorial-begin svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.editorial-stories { background: var(--surface-editorial); }
.editorial-chapter { position: relative; padding: 40px var(--editorial-inset); }
.editorial-divider { position: absolute; top: 0; left: var(--editorial-inset); right: var(--editorial-inset); display: flex; align-items: center; gap: 12px; height: 12px; transform: translateY(-50%); color: var(--editorial-rule); }
.editorial-divider::before, .editorial-divider::after { content: ""; flex: 1; border-top: 1px solid currentColor; }
.editorial-divider svg { flex: 0 0 40px; fill: currentColor; }
.editorial-chapter-heading { margin-bottom: 32px; }
.editorial-chapter-heading h2 { margin: 0; color: var(--olive); font: 400 clamp(23px, 2.4vw, 32px)/1.5 var(--font-literary); letter-spacing: -.025em; text-wrap: balance; }
.editorial-chapter-heading p { margin: 10px 0 0; max-width: 640px; color: var(--muted); font: 400 17px/1.75 var(--font-literary); text-wrap: pretty; }
.editorial-name { white-space: nowrap; }
.editorial-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--editorial-column-gap); row-gap: 28px; align-items: start; }
.editorial-illustration { grid-column: 2; grid-row: 1; min-width: 0; align-self: center; }
.editorial-feature { grid-column: 1; grid-row: 1; align-self: center; }
.editorial-story { min-width: 0; }
.editorial-story h3 { margin: 0 0 12px; font: 400 26px/1.45 var(--font-literary); letter-spacing: -.025em; text-wrap: pretty; }
.editorial-story h3 a { display: inline-block; padding-block: 4px; text-decoration: none; text-underline-offset: .15em; }
.editorial-story h3 a:hover { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; }
.editorial-story > p { max-width: 460px; margin: 0; font: 400 16px/1.8 var(--font-literary); color: var(--muted); text-wrap: pretty; }
.editorial-feature h3 { margin-bottom: 16px; font-size: clamp(32px, 3vw, 42px); line-height: 1.35; color: var(--brand); }
.editorial-feature > p { color: var(--ink); font-size: 18px; }
.editorial-read { display: inline-flex; align-items: center; min-height: 44px; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--brand); text-underline-offset: .3em; }
.editorial-companions { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--editorial-column-gap); }
.editorial-companions .editorial-story { padding-top: 20px; border-top: 1px solid var(--line); }
/* Three stories: opening spread, then two continuations with a gentle stagger. */
.stories-3 .editorial-companions .editorial-story:last-child { margin-top: 24px; }
/* Two stories: image supports the complete pair instead of an empty half-column. */
.stories-2 .editorial-illustration { grid-column: 1; grid-row: 1 / 3; }
.stories-2 .editorial-feature { grid-column: 2; }
.stories-2 .editorial-companions { grid-column: 2; grid-template-columns: 1fr; }
/* Four stories: two beside the photograph, followed by an open two-story ending. */
.stories-4 .editorial-illustration { grid-row: 1 / 3; }
.stories-4 .editorial-companions { display: contents; }
.stories-4 .editorial-companions .editorial-story:nth-child(1) { grid-column: 1; grid-row: 2; }
.stories-4 .editorial-companions .editorial-story:nth-child(2) { grid-column: 1; grid-row: 3; }
.stories-4 .editorial-companions .editorial-story:nth-child(3) { grid-column: 2; grid-row: 3; margin-top: 24px; }
.editorial-photo { margin: 0; min-width: 0; }
.editorial-photo-mount { position: relative; padding: 10px; background: var(--surface-editorial); }
.editorial-photo-mount::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 12px solid transparent; border-image: url("assets/ui/story-album-edge-v3.svg") 24 / 12px; }
.editorial-photo img { display: block; width: 100%; height: auto; }
.editorial-photo figcaption { max-width: 490px; margin-top: 10px; padding-inline: 20px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.editorial-photo figcaption a { display: inline; text-underline-offset: .2em; }
.editorial-index .editorial-photo-mount { position: relative; padding: 6px; border: 0; background: var(--paper); }
.editorial-index .editorial-photo figcaption { padding-inline: 6px; }
.chapter-nguon-coi { background: linear-gradient(rgb(243 239 230 / 86%), rgb(243 239 230 / 86%)), url("assets/ui/story-album-paper-v2.jpg") center / 100% 100%; }
.chapter-nguon-coi .editorial-chapter-heading { text-align: center; }
.chapter-nguon-coi .editorial-chapter-heading p { margin-inline: auto; }
.chapter-thanh-binh { background: #eee8df; }
.chapter-thanh-binh .editorial-chapter-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.chapter-thanh-binh .editorial-chapter-heading h2 { color: var(--brand); font: 700 22px/1.6 var(--font); letter-spacing: -.02em; }
.chapter-thanh-binh .editorial-chapter-heading p { margin: 0; font: 400 14px/1.85 var(--font); }
.chapter-thanh-binh .editorial-feature h3 { font-size: clamp(32px, 2.7vw, 40px); font-weight: 600; }
.chapter-thanh-binh .editorial-story > p { font-family: var(--font); font-size: 15px; }
.chapter-doi-song { background: var(--surface-sage); }
.chapter-doi-song .editorial-chapter-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.chapter-doi-song .editorial-chapter-heading h2 { font-size: 38px; }
.chapter-doi-song .editorial-chapter-heading p { margin: 0; max-width: 460px; font-size: 20px; }
.chapter-doi-song .editorial-story h3 { color: var(--olive); }
.chapter-doi-song .editorial-companions .editorial-story { border-color: var(--line); }
.chapter-nep-nghe { background: var(--surface-card-subtle); }
.chapter-nep-nghe .editorial-chapter-heading h2 { font: 700 22px/1.6 var(--font); letter-spacing: -.02em; color: var(--ink); }
.chapter-nep-nghe .editorial-chapter-heading p { font: 400 14px/1.85 var(--font); }
.chapter-nep-nghe .editorial-feature h3 { font: 700 clamp(25px, 2.2vw, 32px)/1.5 var(--font); letter-spacing: -.025em; color: var(--ink); }
.chapter-nep-nghe .editorial-companions h3 { font: 600 21px/1.6 var(--font); color: var(--ink); }
.chapter-nep-nghe .editorial-story > p { font-family: var(--font); font-size: 15px; }
.chapter-nep-nghe .editorial-read, .chapter-nep-nghe .editorial-story h3 a:hover { color: var(--ink); }
.editorial-colophon { margin: 0; padding: 16px var(--editorial-inset) 28px; background: var(--surface-card-subtle); font-size: 12px; color: var(--muted); text-align: center; }
/* A traditional article: one continuous reading column within a paper frame. */
.article-reading { background: var(--surface-editorial); }
.illustrated-article { padding-block: 20px 48px; --article-measure: 680px; --article-rule: #bda88e; }
.article-breadcrumb { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 16px; }
.illustrated-article .article-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding-block: 8px; text-decoration: none; }
.article-back svg, .article-pagination svg { fill: none; stroke: currentColor; stroke-width: 1.4; flex-shrink: 0; }
.article-part { display: inline-flex; align-items: center; min-height: 44px; color: var(--olive); font-size: 12px; line-height: 1.7; text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; text-underline-offset: .3em; }
.article-sheet { position: relative; padding: 40px 48px; background-color: var(--paper); background-image: linear-gradient(rgb(250 248 243 / 86%), var(--paper)), url("assets/ui/story-album-paper-v2.jpg"); background-position: top; background-size: 100% 560px; background-repeat: no-repeat; }
.article-sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: 20px solid transparent; border-image: url("assets/ui/article-book-frame-v1.svg") 30 / 20px; }
.illustrated-article .article-header, .article-frontispiece, .article-body, .illustrated-article .article-pagination { max-width: var(--article-measure); margin-inline: auto; }
.illustrated-article .article-header { padding: 0; border: 0; text-align: left; }
.illustrated-article .article-header h1 { margin: 0; font: 400 clamp(32px, 4vw, 48px)/1.3 var(--font-literary); color: var(--olive); letter-spacing: -.025em; text-wrap: pretty; }
.illustrated-article .article-summary { margin: 20px 0 0; font: 400 18px/1.8 var(--font-literary); color: var(--muted); text-wrap: pretty; }
.illustrated-article .article-status { margin: 12px 0 0; font-size: 12px; }
.article-frontispiece { margin-block: 32px; padding: 12px; background: var(--surface-editorial); }
.article-frontispiece .editorial-photo-mount { padding: 0; background: transparent; }
.article-frontispiece .editorial-photo-mount::after { inset: -8px; border-width: 12px; border-image-source: url("assets/ui/story-photo-corners-v1.svg"); }
.article-frontispiece .editorial-photo figcaption { margin-top: 16px; padding-inline: 4px; font: 400 14px/1.75 var(--font-literary); }
.article-frontispiece .editorial-photo figcaption a { display: block; margin-top: 6px; font: 400 12px/1.8 var(--font); }
.article-body { margin-top: 32px; }
.article-body > .journal-divider { position: static; transform: none; height: 28px; margin-block: 32px; }
.article-body > .journal-divider::before, .article-body > .journal-divider::after { border-color: var(--article-rule); opacity: .55; }
.illustrated-article .article-content { padding-top: 0; font-size: 17px; line-height: 1.95; }
.illustrated-article .article-content > p { margin: 0 0 24px; }
.illustrated-article .article-content h2 { margin: 40px 0 16px; font: 400 28px/1.45 var(--font-literary); color: var(--olive); letter-spacing: -.02em; text-wrap: pretty; scroll-margin-top: 112px; }
.illustrated-article .article-content > h2:first-child { margin-top: 0; }
.article-content a, .article-sources a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.article-content a:hover, .article-sources a:hover { color: var(--brand-dark); text-decoration-thickness: 2px; }
.article-sources { padding: 24px; background: var(--surface-card-subtle); }
.article-sources .sources-title { margin: 0 0 16px; padding: 0; border: 0; font: 700 17px/1.6 var(--font); color: var(--ink); letter-spacing: 0; scroll-margin-top: 112px; }
.article-sources :is(ul, p) { margin: 0; padding: 0; font-size: 14px; line-height: 1.85; color: var(--muted); }
.article-sources ul { list-style: none; }
.article-sources li { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.article-sources li:first-child { margin: 0; padding: 0; border: 0; }
.illustrated-article .article-pagination { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--article-rule); }
.illustrated-article .article-pagination a { min-width: 0; padding-block: 8px; text-decoration: none; }
.illustrated-article .article-pagination a + a { padding-left: 24px; border-left: 1px solid var(--line); text-align: right; }
.illustrated-article .article-pagination span { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.illustrated-article .article-pagination a + a span { justify-content: flex-end; }
.illustrated-article .article-pagination strong { font: 400 20px/1.5 var(--font-literary); color: var(--olive); }
.illustrated-article .article-pagination a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 960px) {
  .article-sheet { padding: 32px; }
  .editorial-index { --editorial-column-gap: 32px; --editorial-inset: 24px; }
  .editorial-masthead { gap: 32px; padding-block: 32px; }
  .editorial-prologue { padding-left: 24px; }
  .editorial-prologue .editorial-invitation { font-size: 22px; }
  .editorial-chapter { padding-block: 32px; }
  .editorial-story h3 { font-size: 24px; }
  .editorial-feature h3 { font-size: 32px; }
  .chapter-thanh-binh .editorial-chapter-heading, .chapter-doi-song .editorial-chapter-heading { gap: 28px; }
  .chapter-thanh-binh .editorial-chapter-heading h2, .chapter-nep-nghe .editorial-chapter-heading h2 { font-size: 20px; }
  .chapter-doi-song .editorial-chapter-heading h2 { font-size: 32px; }
  .chapter-doi-song .editorial-chapter-heading p { font-size: 18px; }
}
@media (max-width: 700px) {
  .illustrated-article { width: calc(100% - 24px); padding-block: 12px 28px; }
  .article-breadcrumb { gap: 0 16px; margin-bottom: 12px; }
  .article-part { font-size: 11px; }
  .article-sheet { padding: 24px 16px; }
  .article-sheet::before { border-width: 14px; border-image-width: 14px; }
  .illustrated-article .article-header h1 { font-size: 32px; line-height: 1.35; }
  .illustrated-article .article-summary { margin-top: 16px; font-size: 17px; }
  .article-frontispiece { margin-block: 24px; padding: 8px; }
  .article-frontispiece .editorial-photo figcaption { padding-inline: 0; font-size: 13px; }
  .article-body { margin-top: 24px; }
  .article-body > .journal-divider { margin-block: 24px; }
  .illustrated-article .article-content { font-size: 16px; line-height: 1.9; }
  .illustrated-article .article-content h2 { margin-top: 32px; font-size: 24px; }
  .article-sources { padding: 20px 16px; }
  .illustrated-article .article-pagination { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; padding-top: 16px; }
  .illustrated-article .article-pagination a + a { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); text-align: left; }
  .illustrated-article .article-pagination a + a span { justify-content: flex-start; }
  .editorial-index { --editorial-inset: 12px; }
  .editorial-index > .wrap { width: calc(100% - 24px); }
  .editorial-masthead { grid-template-columns: 1fr; gap: 20px; padding-block: 24px 28px; }
  .editorial-cover-title { padding: 0; }
  .editorial-masthead h1 { font-size: clamp(64px, 18vw, 78px); }
  .editorial-masthead h1 span { margin-bottom: 8px; }
  .editorial-prologue { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); max-width: 500px; }
  .editorial-prologue .editorial-invitation { font-size: 22px; margin-bottom: 12px; }
  .editorial-invitation br { display: none; }
  .editorial-prologue > p:not(.editorial-invitation) { font-size: 13px; }
  .editorial-begin { margin-top: 8px; }
  .editorial-chapter { padding-block: 28px; }
  .editorial-chapter-heading { margin-bottom: 24px; }
  .editorial-chapter-heading h2 { font-size: 23px; }
  .editorial-chapter-heading p { font-size: 16px; }
  .editorial-spread, .editorial-companions { display: flex; flex-direction: column; gap: 24px; }
  .stories-4 .editorial-companions { display: flex; }
  .editorial-illustration, .editorial-story, .editorial-companions { width: 100%; }
  .stories-3 .editorial-companions .editorial-story:last-child, .stories-4 .editorial-companions .editorial-story:nth-child(3) { margin-top: 0; }
  .editorial-feature h3, .chapter-thanh-binh .editorial-feature h3 { font-size: 32px; margin-bottom: 12px; }
  .editorial-feature > p { font-size: 17px; }
  .editorial-story h3 a { padding-block: 5px; }
  .editorial-companions .editorial-story { padding-top: 20px; }
  .chapter-thanh-binh .editorial-chapter-heading, .chapter-doi-song .editorial-chapter-heading { display: block; }
  .chapter-thanh-binh .editorial-chapter-heading h2, .chapter-nep-nghe .editorial-chapter-heading h2 { font-size: 21px; }
  .chapter-thanh-binh .editorial-chapter-heading p { margin-top: 12px; }
  .chapter-doi-song .editorial-chapter-heading h2 { font-size: 32px; }
  .chapter-doi-song .editorial-chapter-heading p { margin-top: 12px; font-size: 18px; }
  .chapter-nep-nghe .editorial-feature h3 { font-size: 25px; }
  .editorial-index .editorial-photo-mount { padding: 4px; }
  .editorial-photo-mount { padding: 6px; }
  .editorial-photo-mount::after { border-width: 8px; border-image-width: 8px; }
  .editorial-photo figcaption { padding-inline: 12px; }
}
@media print {
  .article-reading, .article-sheet, .article-sources { background: transparent; }
  .illustrated-article { width: 100%; padding: 0; }
  .article-sheet { padding: 0; }
  .article-sheet::before, .article-breadcrumb, .article-body > .journal-divider, .article-pagination { display: none; }
  .article-frontispiece { max-width: 400px; margin: 24px auto; }
  .editorial-photo { break-inside: avoid; }
  .editorial-chapter { background: transparent; }
  .editorial-photo-mount { padding: 0; }
  .editorial-photo-mount::after { display: none; }
}