/* Hallmark · shape: Contents Cover · genre: editorial · theme: Editorial (deal 2/3, seed korean-regional-culture-welfare-d288·16051be6·2026-10-28·r0) · job: read · draw: manual
 * hero: Stage · nav: masthead over a scrolling section line · footer: ruled colophon · imagery: the paper's own photographs, natural · signature: the day's lead story over contents rows under a heavy ink rule
 * axes: light/display-condensed/chromatic-green · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, Pretendard replaces the condensed Latin face on Korean heads so weight and rules carry the hierarchy */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2rem, 3vw + 0.75rem, 3.5rem); --text-section: clamp(1.75rem, 2vw + 1rem, 2.5rem); --text-title: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); --text-lead: clamp(1.0625rem, 0.4vw + 1rem, 1.3125rem);
  --dur-short: 180ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --color-paper: oklch(97% 0.007 86); --color-paper-2: oklch(94% 0.010 86); --color-paper-3: oklch(91% 0.012 84);
  --color-ink: oklch(16% 0.012 280); --color-ink-2: oklch(29% 0.011 280); --color-scrim: oklch(12% 0.01 280); --color-muted: oklch(46% 0.010 75);
  --color-rule: oklch(85% 0.009 85); --color-rule-2: oklch(64% 0.010 80);
  --color-accent: oklch(47% 0.130 152); --color-accent-ink: oklch(98% 0.005 88); --color-focus: oklch(52% 0.135 152);
  --font-display: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-body: "Noto Serif KR", "Source Han Serif K", "Batang", ui-serif, Georgia, serif;
  --rule-hair: 1px; --rule-heavy: 4px;
  --container: 1240px; --gutter: 32px; --measure: 44rem;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-md); line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; min-width: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:active { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
time { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: 100; padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus { top: var(--space-md); }
.meta { font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted); }
.tag { display: inline-block; font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); }
.rule-h { max-width: none; font-size: var(--text-xl); padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); margin-bottom: var(--space-md); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font-weight: 700; }
.btn:hover { background: var(--color-ink-2); text-decoration: none; }

/* header */
.site-header { border-bottom: var(--rule-heavy) solid var(--color-ink); }
.util { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.util-right { display: flex; align-items: center; gap: var(--space-lg); }
.today { display: block; min-height: calc(var(--text-sm) * 1.65); } /* filled by JS: reserve the line so the page does not jump */
.search { display: flex; }
.search input { width: 12rem; min-height: 38px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-right: 0; border-radius: 0; background: var(--color-paper); color: var(--color-ink); font: inherit; }
.search input:focus-visible { outline-offset: 0; }
.search button { min-height: 38px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: none; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-display); cursor: pointer; }
.search button:hover { background: var(--color-paper-2); }
.search button:active { background: var(--color-paper-3); }
.search-big { max-width: 36rem; margin-block: var(--space-lg); }
.search-big input, .search-big button { min-height: 52px; font-size: var(--text-md); }
.masthead { padding-block: var(--space-md) var(--space-sm); text-align: center; }
.logo { font: 800 clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); }
.logo:hover { text-decoration: none; }
.sections { border-top: var(--rule-hair) solid var(--color-rule-2); }
.sections ul { display: flex; gap: var(--space-xl); justify-content: center; padding-block: var(--space-sm); overflow-x: auto; scrollbar-width: none; }
.sections ul::-webkit-scrollbar { display: none; }
.sections a { display: block; padding-block: var(--space-2xs); font-weight: 700; white-space: nowrap; }
.sections a[aria-current="page"] { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em; }

/* cards and rows */
.card { display: grid; gap: var(--space-sm); align-content: start; }
.card-img { display: block; overflow: hidden; background: var(--color-paper-3); aspect-ratio: 3 / 2; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { display: grid; gap: var(--space-2xs); }
.card h2, .card h3 { font-size: var(--text-title); line-height: 1.35; }
.excerpt { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.7; color: var(--color-ink-2); }
.rows li { border-top: var(--rule-hair) solid var(--color-rule); }
.rows li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: baseline; padding-block: var(--space-sm); }
.row-title { font-weight: 700; line-height: 1.45; color: var(--color-ink); }
.rows a:hover { text-decoration: none; }
.rows a:hover .row-title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.rows .meta { white-space: nowrap; }

/* home */
/* photo tiles: the title sits on the picture */
.tile { position: relative; overflow: hidden; background: var(--color-ink); aspect-ratio: 4 / 3; }
.tile > a { display: block; position: absolute; inset: 0; color: var(--color-paper); }
.tile > a:hover { text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.tile > a:hover img { transform: scale(1.04); }
.tile-body { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: var(--space-2xs); justify-items: start; padding: var(--space-xl) var(--space-md) var(--space-md); background: linear-gradient(to top, color-mix(in oklch, var(--color-scrim) 92%, transparent), color-mix(in oklch, var(--color-scrim) 60%, transparent) 55%, transparent); }
.tile .tag { padding: 1px var(--space-xs); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); }
.tile h2, .tile h3 { color: var(--color-paper); font-size: var(--text-md); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile > a:hover h2, .tile > a:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent-ink); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tile .meta { color: var(--color-rule); }
.tile-lead { aspect-ratio: 16 / 10; }
.tile-lead .tile-body { padding: var(--space-2xl) var(--space-lg) var(--space-lg); gap: var(--space-xs); }
.tile-lead h2 { font-size: clamp(1.375rem, 1.6vw + 0.9rem, 2.125rem); line-height: 1.25; }
.tile-lead .tag { font-size: var(--text-sm); }

/* home zones: each band is one area */
.zone { padding-block: var(--space-xl); }
.zone-top { padding-block: var(--space-lg); }
.zone-latest { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md); }
.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.stack .tile { aspect-ratio: auto; }
.stack .tile-body { padding: var(--space-xl) var(--space-sm) var(--space-sm); }
.stack .tile h3 { font-size: var(--text-sm); -webkit-line-clamp: 3; }
.latest { padding: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
.two-col li:nth-last-child(2) { border-bottom: var(--rule-hair) solid var(--color-rule); }
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; padding-block: var(--space-xs); border-bottom: var(--rule-heavy) solid var(--color-ink); margin-bottom: var(--space-md); }
.block-head h2 { font-size: var(--text-xl); max-width: none; padding-left: var(--space-sm); border-left: 6px solid var(--color-accent); line-height: 1.2; }
.more { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.block-grid { display: grid; gap: var(--space-md); }
.block-grid .tile { aspect-ratio: 16 / 9; }
.block-grid .tile h3 { font-size: var(--text-lg); }
.desks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.desk h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.desk .rows a { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
.desk .rows li { border-top: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.desk .row-title { font-size: var(--text-sm); }

.videos { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl); }
.videos h2 { color: var(--color-paper); max-width: none; font-size: var(--text-section); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.video { display: grid; gap: var(--space-xs); align-content: start; }
.video:hover { text-decoration: none; }
.video:hover .vtitle { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-ink-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--color-paper); }
.vtitle { font-weight: 700; line-height: 1.4; color: var(--color-paper); }
.vch { font-size: var(--text-sm); color: var(--color-rule); }
.partner { background: var(--color-paper-2); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule-2); }
.partner h2 { font-size: var(--text-2xl); max-width: none; margin-bottom: var(--space-md); }
.note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }

/* ad areas (AdSense): space is reserved so a late ad does not move the page */
.ad { display: grid; justify-items: center; align-content: start; gap: var(--space-3xs); min-height: 130px; margin-block: var(--space-lg); }
.ad-label { justify-self: start; font-size: var(--text-xs); color: var(--color-muted); }
.ad-ph { display: grid; place-items: center; width: 100%; min-height: 100px; border: 1px dashed var(--color-rule-2); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-sm); }
.ad .adsbygoogle { width: 100%; min-height: 100px; }
.cat-list .ad { grid-column: 1 / -1; }

/* article */
.article-wrap { padding-block: var(--space-xl) var(--space-2xl); }
.article { max-width: var(--measure); margin-inline: auto; }
.crumbs { display: flex; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.crumbs a + a::before { content: "/"; margin-right: var(--space-sm); color: var(--color-rule-2); }
.crumbs a:last-child { color: var(--color-accent); font-weight: 600; }
.article h1 { max-width: none; font-size: clamp(1.875rem, 2.4vw + 1rem, 2.75rem); line-height: 1.22; margin-bottom: var(--space-md); }
.deck { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.deck p { font-weight: 600; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.byline span:first-child { color: var(--color-ink); font-weight: 700; }
.actions { display: flex; gap: var(--space-xs); min-height: 42px; padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-lg); }
.share { min-height: 34px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 0; background: none; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-display); cursor: pointer; }
.share:hover { background: var(--color-paper-2); }
.share:active { background: var(--color-paper-3); }
.hero-fig { margin: 0 0 var(--space-lg); }
.hero-fig img, .body figure img { width: 100%; height: auto; background: var(--color-paper-3); }
figcaption { padding-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.body { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.95; color: var(--color-ink-2); }
.body > * + * { margin-top: 1.25em; }
.body p { max-width: none; }
.body h2 { margin-top: 2em; font-size: var(--text-lg); padding-left: var(--space-sm); border-left: 4px solid var(--color-accent); line-height: 1.4; }
.body figure { margin-block: 1.75em; }
.body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.body strong { color: var(--color-ink); }
.body table { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: var(--text-sm); display: block; overflow-x: auto; }
.body th, .body td { padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); text-align: left; }
.body blockquote { margin-inline: 0; padding-left: var(--space-lg); border-left: 4px solid var(--color-rule-2); font-style: italic; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
.tags li { padding: var(--space-3xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); }
.prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-ink); }
.prevnext a { display: grid; gap: var(--space-2xs); font-weight: 700; color: var(--color-ink); line-height: 1.4; }
.prevnext a span { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.prevnext a[rel="next"] { text-align: right; }
.related { max-width: var(--container); margin: var(--space-2xl) auto 0; }
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.related .card h3 { font-size: var(--text-md); }

/* category, docs */
.cat-head { padding-block: var(--space-xl) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); margin-bottom: var(--space-lg); }
.cat-head h1 { font-size: var(--text-display-s); max-width: none; }
.cat-list { display: grid; }
.cat-list .card { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cat-list .card:not(:has(.card-img)) { grid-template-columns: minmax(0, 1fr); }
.cat-list .card h2 { font-size: var(--text-xl); max-width: none; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); padding-block: var(--space-xl) var(--space-2xl); }
.pager a, .pager .cur { min-width: 44px; min-height: 44px; padding: 0 var(--space-md); display: inline-flex; align-items: center; justify-content: center; border: var(--rule-hair) solid var(--color-rule-2); font-weight: 600; }
.pager a:hover { background: var(--color-paper-2); text-decoration: none; }
.pager .cur { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.pager .gap { align-self: center; color: var(--color-muted); }
.doc { max-width: 52rem; padding-block: var(--space-xl) var(--space-2xl); }
.doc h1 { font-size: var(--text-display-s); max-width: none; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: var(--rule-heavy) solid var(--color-ink); }
.doc h2 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.doc p { font-family: var(--font-body); line-height: 1.85; margin-bottom: var(--space-md); }
.facts { display: grid; gap: 0; margin: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.facts div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }

/* footer */
.site-footer { margin-top: var(--space-xl); border-top: var(--rule-heavy) solid var(--color-ink); padding-block: var(--space-xl) var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-xl); }
.foot-name { font: 800 var(--text-xl)/1.1 var(--font-display); color: var(--color-ink); margin-bottom: var(--space-sm); }
address { font-style: normal; }
.foot-id dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); }
.foot-id dl div { display: flex; gap: var(--space-sm); }
.foot-id dt { min-width: 7.5em; color: var(--color-ink-2); }
.foot-id dd { margin: 0; }
.foot-links ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-md); }
.foot-links a { color: var(--color-ink-2); }
.copy { max-width: 48ch; }

/* front page: a headline over a wide photo with its summary, wide cards below, tall cards beside */
.ph { display: block; overflow: hidden; background: var(--color-paper-2); aspect-ratio: 3 / 2; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
a:hover > img, .ph:hover img { transform: scale(1.03); }
.front { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-xl); }
.front-side { border-left: var(--rule-hair) solid var(--color-rule-2); padding-left: var(--space-xl); }
.ylist { display: grid; gap: var(--space-md); }
.ylist li:not(:first-child) .video { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); align-items: start; }
.ylist li:not(:first-child) .thumb { grid-row: 1 / 3; }
.ylist li:not(:first-child) .thumb::after { border-width: 7px 0 7px 12px; }
.ylist li:not(:first-child) .vtitle { font-size: var(--text-xs); line-height: 1.4; }
.ylist li:first-child .vtitle { font-size: var(--text-md); }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.flash { background: var(--color-accent); color: var(--color-accent-ink); }
.flash .wrap { display: flex; gap: var(--space-md); align-items: baseline; padding-block: var(--space-xs); font-size: var(--text-sm); }
.flash b { white-space: nowrap; border-right: 1px solid color-mix(in oklch, var(--color-accent-ink) 50%, transparent); padding-right: var(--space-md); }
.flash a { color: var(--color-accent-ink); font-weight: 700; }
.ad:has(.ad-ph) { min-height: 0; margin-block: var(--space-md); }
.ad-ph { min-height: 56px; }
.ytcol .video { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
.ytcol .vtitle { color: var(--color-ink); font-size: var(--text-sm); }
.ytcol .vch { color: var(--color-muted); font-size: var(--text-xs); }
.ytcol .yt-link { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: var(--space-md) 0 0; font-size: var(--text-sm); }
.ytcol .yt-link a { color: var(--color-ink-2); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.lead-title { font-size: clamp(1.5rem, 2vw + 0.9rem, 2.375rem); line-height: 1.25; max-width: none; padding-bottom: var(--space-md); }
.lead-title a { color: var(--color-ink); }
.lead-body { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--space-lg); align-items: start; padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.lead-body .ph { aspect-ratio: 4 / 3; }
.lead-sum { font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-2); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; max-width: none; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); padding-top: var(--space-lg); }
.hcard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-md); align-items: start; }
.hcard .ph { aspect-ratio: 4 / 3; }
.hcard h3, .vcard h3 { font-size: var(--text-md); line-height: 1.35; }
.hcard h3 a, .vcard h3 a { color: var(--color-ink); }
.hcard .excerpt { font-size: var(--text-sm); color: var(--color-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vcard { display: grid; gap: var(--space-xs); align-content: start; }
.vcard .tag, .hcard .tag { font-size: var(--text-xs); color: var(--color-accent); font-weight: 700; }
.vcard .excerpt { font-size: var(--text-sm); color: var(--color-ink-2); }
.triple { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 18rem; gap: var(--space-xl); }
.triple-left { display: grid; gap: var(--space-lg); align-content: start; }
.triple-left .vcard h3 { font-size: var(--text-sm); }
.triple-right { border-left: var(--rule-hair) solid var(--color-rule-2); padding-left: var(--space-xl); }
.triple .latest { border-inline: var(--rule-hair) solid var(--color-rule-2); padding-inline: var(--space-xl); }
.heads a { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding-block: var(--space-md); }
.heads .row-title { font-family: var(--font-display, inherit); font-size: var(--text-lg); font-weight: 700; line-height: 1.35; }
.sidelist .rows a { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
.tlist { display: grid; }
.tlist li { border-top: var(--rule-hair) solid var(--color-rule); }
.tlist li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.tlist a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); align-items: start; }
.tlist a:hover { text-decoration: none; }
.tlist a:hover .row-title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tlist .ph { grid-row: 1 / 3; aspect-ratio: 4 / 3; }
.tlist .meta { align-self: end; }

@media (max-width: 64rem) {
  .front, .triple { grid-template-columns: minmax(0, 1fr); }
  .front-side { border-left: 0; padding-left: 0; }
  .triple-left { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .triple .latest { border-inline: 0; padding-inline: 0; }
  .triple-right { border-left: 0; padding-left: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .stack { grid-template-rows: none; }
  .stack .tile { aspect-ratio: 4 / 3; }
  .blocks { grid-template-columns: minmax(0, 1fr); }
  .desks, .vgrid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 44rem) {
  :root { --gutter: 16px; }
  .lead-body, .pair, .triple-left { grid-template-columns: minmax(0, 1fr); }
  .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hcard { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .util { flex-wrap: wrap; }
  .util-right { width: 100%; justify-content: space-between; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .sections ul { justify-content: flex-start; gap: var(--space-lg); }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col li:nth-last-child(2) { border-bottom: 0; }
  .rows a { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .desks, .vgrid, .related-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-list .card { grid-template-columns: minmax(0, 1fr); }
  .zone { padding-block: var(--space-lg); }
  .tile-lead { aspect-ratio: 4 / 3; }
  .tile-lead .tile-body { padding: var(--space-xl) var(--space-md) var(--space-md); }
  .prevnext { grid-template-columns: minmax(0, 1fr); }
  .prevnext a[rel="next"] { text-align: left; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .foot-id dl { grid-template-columns: minmax(0, 1fr); }
  .body { font-size: 1.0625rem; line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
@media print {
  .site-header .util, .sections, .site-footer, .share, .related, .prevnext, .videos { display: none !important; }
  body { background: #fff; color: #000; }
  .body { font-size: 11pt; }
}
.doc ul.plain { list-style: disc; padding-left: var(--space-lg); margin-block: var(--space-sm); }
.doc ul.plain li { margin-bottom: var(--space-2xs); }
.videos .yt-link { margin: calc(var(--space-sm) * -1) 0 var(--space-lg); }
.videos .yt-link a { color: var(--color-paper); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }