@charset "UTF-8";
/* ==========================================================================
   The Seoul Glow Magazine.

   v2, 2026-08-19. Adam: "VEA does not exist; design this as The Seoul Glow
   Magazine and nothing else." v1 wore the brand's palette and type but built the
   page as a numbered ruled index, and that skeleton was VEA's, not the brand's:
   VEA's direction was the public record, and a register wants every entry to
   look identical while a magazine wants hierarchy. So the skeleton changed.

   Kept, brand-owned since the card news was approved 2026-08-02, justification
   table in DESIGN-READ.md: cream ground, ink, a gold token used only as a
   hairline, Fraunces + Inter (literally the card news' own two variable files).

   New in v2: photographs lead. One story opens the page, two sit under it, the
   rest are a photograph-led list. No running numerals. Media radius softened to
   8px so the page reads warm rather than forensic. Coral is present rather than
   reserved for links.

   Still absent by decision: shadows, pill radius, hover-lift, eyebrow stacks,
   three-column card grids, 96px bands.
   ========================================================================== */

:root {
	/* v5.0 "The Chart", 2026-08-22. Paper white, carbon ink, and one accent:
	   surgical-drape cobalt, because drapes are blue for contrast against
	   blood and this publication's whole job is contrast against the sell.
	   The token NAMES below are historic (v2 was cream/coral/gold) and are
	   kept so 1,300 lines of layout did not need retouching; the VALUES are
	   the redesign. Per the divergence ledger: no gold, no cream, no warm
	   ink, no Fraunces, radius 0. */
	--cream:   #FFFFFF;
	--cream-2: #F2F3F1;
	--sheet:   #F7F8F6;
	--ink:     #101114;
	--ink-2:   #40434A;
	--ink-3:   #6E727B;

	/* The one interactive accent, locked page-wide: --drape. The two coral
	   tokens carry it for the layout's sake. AA on white as text: 8.1:1. */
	--drape:      #1B3AC2;
	--coral:      var(--drape);
	--coral-deep: #10248C;
	--rose:       #DDE3F9;   /* fills and marks only, never text */

	/* Historic name, current value: the hairline accent is the drape blue.
	   It never carries a word. */
	--gold: var(--drape);

	--rule:      rgba(16, 17, 20, 0.16);
	--rule-soft: rgba(16, 17, 20, 0.08);
	--rule-firm: rgba(16, 17, 20, 0.42);

	/* Historic names, current roles: --serif is the DISPLAY face (a grotesk),
	   --sans is the PROSE face (a serif with a real italic). The furniture
	   layer at the end of this file assigns the grotesk to labels, buttons
	   and captions, which is the broadsheet division of labour. */
	--serif: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
	--sans:  'Source Serif 4', 'Iowan Old Style', Georgia, serif;

	/* One radius rule, stated: none. This is a printed chart, not an app. */
	--r: 0px;
	--rm: 0px;

	/* Band rhythm varies with the weight of the section and is never 96px. */
	--band:   clamp(44px, 6.5vw, 92px);
	--band-t: clamp(30px, 3.8vw, 56px);

	--wrap:    1180px;
	--measure: 68ch;

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "tnum" 1;   /* registration numbers line up */
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, ul, ol, dl, figure, blockquote { margin: 0; }

a { color: var(--coral); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--coral-deep); }

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

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

.skip {
	position: absolute;
	left: -9999px;
}
.skip:focus {
	left: 12px;
	top: 12px;
	z-index: 99;
	background: var(--ink);
	color: var(--cream);
	padding: 10px 14px;
	border-radius: var(--r);
}

/* ---------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 12px 18px;
	border: 1px solid var(--ink);
	border-radius: var(--r);
	background: var(--ink);
	color: var(--cream);
	font: 500 15px/1.2 var(--sans);
	text-decoration: none;
	transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: var(--cream); }
.btn--sm { padding: 9px 14px; font-size: 14px; }

/* The door that costs us money is the loud one. Carried over from VEA, and it
   is the reason a reader can believe the rest of the page. Do not soften it. */
.btn--direct {
	background: var(--coral);
	border-color: var(--coral);
}
.btn--direct:hover { background: var(--coral-deep); border-color: var(--coral-deep); }

.out {
	color: var(--coral);
	text-decoration: underline;
}

/* ------------------------------------------------------------- prelaunch */

.prelaunch {
	margin: 0;
	padding: 9px 20px;
	background: var(--ink);
	color: var(--cream);
	font-size: 13px;
	text-align: center;
}

/* -------------------------------------------------------------- masthead */

/* v5.1. Three tiers: a folio line carrying every utility, the wordmark alone,
   then a bar that is a table of contents. What stood here was an application
   header (wordmark left, links centre, button right), which was inherited from
   the build this theme replaced rather than chosen for a magazine. */

.mast { background: var(--cream); }

/* Tier 1 --------------------------------------------------------------- */

.folio { border-bottom: 1px solid var(--rule-soft); }
.folio__in {
	min-height: 38px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 18px;
}
.folio__place,
.folio__end { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
.folio__place {
	margin: 0;
	font-family: var(--serif);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--ink-3);
	min-width: 0;
}
/* The consultation door is a text link up here, never a filled button. The
   loud version of it belongs at the end of an article, where the reader has
   been given a reason to want it. */
.folio__cta {
	font-family: var(--serif);
	font-size: 12px;
	font-weight: 620;
	letter-spacing: 0.02em;
	color: var(--coral);
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	border-bottom: 1px solid var(--rose);
	padding-bottom: 2px;
}
.folio__cta:hover { border-bottom-color: var(--coral); }

/* Tier 2 --------------------------------------------------------------- */

.mast__id { padding-block: 26px 22px; text-align: center; position: relative; }
.mast__id > a { text-decoration: none; color: var(--ink); display: inline-block; }
.mast__name {
	font-family: var(--serif);
	font-size: clamp(23px, 5.1vw, 50px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	display: block;
}
.mast__stand {
	margin: 9px 0 0;
	font-size: 14px;
	color: var(--ink-3);
	font-style: italic;
}

/* The toggle is mobile only. It is a labelled control rather than three bars,
   because "Contents" says what opens and a hamburger does not. */
.mast__toggle { display: none; }

/* Tier 3 --------------------------------------------------------------- */

.sb {
	border-top: 1px solid var(--rule-firm);
	border-bottom: 1px solid var(--rule);
}
.sb__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sb__list li { min-width: 0; }
.sb__list a {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 11px 0 10px;
	text-decoration: none;
	color: var(--ink-2);
	font-family: var(--serif);
	font-size: 15px;
	border-top: 3px solid transparent;
	margin-top: -1px;
	min-width: 0;
}
.sb__list a:hover { color: var(--ink); }
/* The current section is marked with the same 3px drape rule the article
   pages use for a verified box, so the device means one thing site-wide. */
.sb__list .current-menu-item > a,
.sb__list a[aria-current] {
	color: var(--ink);
	font-weight: 620;
	border-top-color: var(--gold);
}
/* The description is written for the mobile contents page and is not shown in
   the bar, where it would turn a table of contents into a menu of blurbs. */
.sb__d { display: none; }
.sb__cta { display: none; }

@media (max-width: 767px) {
	.mast__id { text-align: left; padding-block: 13px; display: flex; align-items: center; gap: 12px; }
	.mast__id > a { flex: 1; min-width: 0; }
	.mast__name { font-size: 17px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
	.mast__stand { display: none; }

	.mast__toggle {
		display: block;
		font-family: var(--serif);
		font-size: 12px;
		font-weight: 620;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ink);
		background: none;
		border: 0;
		border-bottom: 2px solid var(--gold);
		border-radius: var(--r);
		padding: 3px 0 2px;
		cursor: pointer;
		white-space: nowrap;
	}

	/* Open, this is a contents page rather than a drawer: each section keeps
	   its one line of description, which a hamburger drawer never gives. */
	.sb { border-top: 0; }
	.sb[hidden] { display: none; }
	.sb__in { padding-block: 4px 20px; }
	.sb__list { display: block; }
	.sb__list li { border-top: 1px solid var(--rule-soft); }
	.sb__list li:first-child { border-top: 1px solid var(--rule-firm); }
	.sb__list a {
		display: block;
		padding: 13px 0 12px;
		border-top: 0;
		margin-top: 0;
		font-size: inherit;
	}
	.sb__list .current-menu-item > a,
	.sb__list a[aria-current] { font-weight: 400; }
	.sb__t {
		font-family: var(--serif);
		font-weight: 680;
		font-size: 20px;
		letter-spacing: -0.015em;
		color: var(--ink);
		display: block;
		overflow-wrap: anywhere;
	}
	.sb__list .current-menu-item > .sb__t,
	.sb__list a[aria-current] .sb__t { color: var(--coral); }
	.sb__d {
		display: block;
		margin-top: 3px;
		font-family: var(--sans);
		font-size: 13.5px;
		line-height: 1.45;
		color: var(--ink-3);
		overflow-wrap: anywhere;
	}
	.sb__cta {
		display: block;
		margin: 16px 0 0;
		border-top: 1px solid var(--rule-firm);
		padding-top: 14px;
	}
	.sb__cta .btn { display: flex; justify-content: center; white-space: normal; }
}

/* ------------------------------------------------------------------ intro */

.intro { padding-block: var(--band) var(--band-t); }
.intro__h {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(27px, 4.4vw, 46px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	max-width: 22ch;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
.intro__b {
	margin-top: 16px;
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 17px;
}

/* archive, search and 404 headers */
.lede { padding-block: var(--band) var(--band-t); }
.lede__label { font-size: 13px; color: var(--coral); margin-bottom: 12px; }
.lede__h {
	text-wrap: balance;
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	max-width: 20ch;
}
.lede__h--sm { font-size: clamp(27px, 4.2vw, 42px); max-width: 24ch; }
.lede__b { margin-top: 18px; max-width: 58ch; color: var(--ink-2); font-size: 17px; }
.lede__cred { margin-top: 10px; font-size: 14.5px; color: var(--coral); }
.lede__meta { margin-top: 16px; font-size: 14.5px; }

/* ------------------------------------------------- the section label mark */

.sec {
	display: block;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--coral);
}

/* --------------------------------------------------------------- the lead */

.lead { padding-bottom: var(--band-t); }
.lead__link {
	grid-template-columns: minmax(0, 1fr);
	display: grid;
	gap: 18px;
	text-decoration: none;
	color: var(--ink);
}
.lead__img img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--rm);
}
.lead__h {
	font-family: var(--serif);
	font-weight: 300;
	/* Capped at 42px rather than 50: against a 5-column text well a longer
	   headline ran to five lines and stopped reading as a headline. */
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.lead__link:hover .lead__h { color: var(--coral-deep); }
.lead__sum {
	display: block;
	margin-top: 14px;
	color: var(--ink-2);
	font-size: 17px;
	max-width: 52ch;
}
.lead__more {
	display: inline-flex;
	gap: 0.45em;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 500;
	color: var(--coral);
	border-bottom: 1px solid var(--gold);
	padding-bottom: 2px;
}

/* ------------------------------------------------------------ two seconds */

/* -------------------------------------------------------------------------
   A grid track is minmax(auto, …) by default, and `auto` as a minimum means
   min-content. For a track holding a photograph, min-content is the image's
   intrinsic width: a 1448px photograph forces a 1448px column inside a 320px
   phone, and `max-width: 100%` on the image cannot resolve it because the
   column it is measuring against is the thing being sized.

   This was in v2 and shipped, because the QA sweep measured pages before their
   lazy images had loaded and an unloaded <img> contributes its width attribute
   rather than its intrinsic width. Making the sweep wait for decode surfaced it
   on every article page at 320 and 360, +1128px.

   Every track in this stylesheet is therefore minmax(0, …), and every grid item
   that can hold media carries min-width: 0.
   ---------------------------------------------------------------------- */

.seconds { padding-bottom: var(--band-t); }
.seconds__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.card, .item, .strip__i, .band, .door, .foot__col, .readnext__grid > * { min-width: 0; }

.card__link { display: block; text-decoration: none; color: var(--ink); }
.card__img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--rm);
	margin-bottom: 14px;
}
.card__h {
	text-wrap: balance;
	display: block;
	font-family: var(--serif);
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.008em;
}
.card__link:hover .card__h { color: var(--coral-deep); }
.card__sum {
	display: block;
	margin-top: 8px;
	color: var(--ink-3);
	font-size: 15px;
}

/* ------------------------------------------------------------- the list */

.more { padding-bottom: var(--band); }
.band__h {
	font-size: 13px;
	color: var(--ink-3);
	padding-bottom: 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--gold);
}

.list { list-style: none; margin: 0; padding: 0; }
.item { border-bottom: 1px solid var(--rule-soft); }
.item__link {
	grid-template-columns: minmax(0, 1fr);
	display: grid;
	gap: 14px;
	padding: 22px 0;
	text-decoration: none;
	color: var(--ink);
}
.item__img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--rm);
}
.item__h {
	text-wrap: balance;
	display: block;
	font-family: var(--serif);
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.22;
}
.item__link:hover .item__h { color: var(--coral-deep); }
.item__sum {
	display: block;
	margin-top: 7px;
	color: var(--ink-3);
	font-size: 15px;
	max-width: 62ch;
}
.item__date { display: block; margin-top: 9px; font-size: 13px; color: var(--ink-3); }

.empty { padding: 28px 0; color: var(--ink-3); }

/* ---------------------------------------------------------- section bands */

.bands {
	background: var(--cream-2);
	border-top: 1px solid var(--rule-soft);
	padding-block: var(--band-t) var(--band);
}
.bands__list { list-style: none; margin: 0; padding: 0; min-width: 0; }
/* The whole index is guarded against the min-content bug class in one place,
   per the house mobile standard: grid and flex items default to min-width:auto
   and a single long headline otherwise sets the width of the page. */
.bands .wrap, .band, .band > *, .band__art, .band__art > * { min-width: 0; }
.band__name, .band__d { overflow-wrap: anywhere; }

/* Each section now carries a piece, so a band is a two-part row: the section
   on the left as a standing label, the newest piece on the right as the thing
   worth clicking. Below 800px they simply stack. */
.band {
	border-bottom: 1px solid var(--rule-soft);
	padding-block: 20px;
	display: grid;
	gap: 10px 34px;
	grid-template-columns: minmax(0, 1fr);
}
.band > * { min-width: 0; }
.band__sec { display: block; text-decoration: none; color: var(--ink); }
.band__name {
	display: block;
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.2;
}
.band__sec:hover .band__name { color: var(--coral-deep); }
.band__d {
	display: block;
	margin-top: 5px;
	color: var(--ink-3);
	font-size: 14.5px;
	max-width: 46ch;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* The piece. A thumbnail is allowed here because the band is an index rather
   than a page of prose, but it stays small: the headline is what is being
   offered, not the photograph. */
.band__art {
	display: grid;
	min-width: 0;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 0 16px;
	align-items: start;
	text-decoration: none;
	color: var(--ink);
}
/* Three children into two columns auto-place as image, headline, then the
   excerpt wrapping onto row two of column ONE, which is the 96px thumbnail
   column. It measured 96px wide with the text shredded down it. Placing all
   three explicitly is the fix; auto-placement cannot express "the picture
   spans both rows". */
.band__img { display: block; grid-column: 1; grid-row: 1 / span 2; }
.band__t { grid-column: 2; grid-row: 1; }
.band__x { grid-column: 2; grid-row: 2; }
/* Without a picture the text simply takes the whole row. */
.band__art:not(:has(.band__img)) { grid-template-columns: minmax(0, 1fr); }
.band__art:not(:has(.band__img)) .band__t,
.band__art:not(:has(.band__img)) .band__x { grid-column: 1; }
.band__img img {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--r);
}
.band__t {
	display: block;
	font-family: var(--serif);
	font-weight: 620;
	font-size: 16.5px;
	line-height: 1.24;
	letter-spacing: -0.008em;
	overflow-wrap: anywhere;
}
.band__art:hover .band__t { color: var(--coral-deep); }
.band__x {
	display: block;
	margin-top: 5px;
	color: var(--ink-2);
	font-size: 14.5px;
	max-width: 52ch;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.band__none {
	margin: 0;
	color: var(--ink-3);
	font-size: 14.5px;
	font-style: italic;
}

@media (min-width: 800px) {
	.band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* ---------------------------------------------------------------- read next */

.readnext {
	border-top: 1px solid var(--rule);
	padding-block: var(--band-t) var(--band);
}
.readnext__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 20px; }

/* ------------------------------------------------------------- pagination */

.pagination {
	margin-top: var(--band-t);
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	font-size: 15px;
}
.nav-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.page-numbers {
	text-decoration: none;
	color: var(--ink-2);
	padding: 4px 2px;
	border-bottom: 1px solid transparent;
}
.page-numbers:hover { color: var(--coral-deep); border-bottom-color: var(--gold); }
.page-numbers.current { color: var(--ink); border-bottom-color: var(--ink); }

/* --------------------------------------------------------------- article */

/* Full bleed, and the only full-bleed element on an article page. The
   photograph is why the reader stopped; the headline is why they stay. */
/* The opener: one treatment for every page (v5.10.0).

   Adam, 2026-09-06: "제가 원하는 것은 동일하고 얼라인된 레이아웃입니다." Until
   now there were three: a full-bleed banner crop on articles and records, a
   contained illustration on treatment pages, and a contained portrait on
   Doctors pieces. Three answers to one question is the opposite of aligned.

   So every lead photograph is now handled the same way — the way the
   treatment page already handled its illustrations. It sits on the sheet
   colour in a band the full width of the page, centred, contained, capped by
   height so the width follows the image's own ratio, and never enlarged past
   its own pixels. A 1600x1067 interior, a 520x620 portrait and a 631x493
   diagram all get the same band, the same cap and the same centred caption.

   ⛔ Do not reintroduce `object-fit: cover` here for landscapes "because they
   would look bigger". Bigger was the full-bleed crop, and it is what put a
   doctor's collar at the top of his own article. */
.opener {
	margin: 0;
	background: var(--sheet);
	border-bottom: 1px solid var(--rule-soft);
	padding-block: 26px;
}
.opener img {
	width: auto;
	max-width: min(100%, 880px);
	height: auto;
	max-height: min(64vh, 520px);
	object-fit: contain;
	margin-inline: auto;
}
.opener figcaption {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 20px;
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--ink-3);
	text-align: center;
}

.art__head { padding-block: var(--band-t) 0; }
.opener + .art__head { padding-top: var(--band-t); }
.art__h {
	text-wrap: balance;
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(30px, 5.2vw, 54px);
	line-height: 1.09;
	letter-spacing: -0.015em;
	max-width: 21ch;
}
.art__h--page { max-width: 24ch; }
.art__stand {
	margin-top: 20px;
	max-width: 56ch;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink-2);
}

.byline {
	margin-top: 26px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	max-width: var(--measure);
}
.byline__who { font-size: 15.5px; }
.byline__who a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.byline__who a:hover { color: var(--coral-deep); }
.byline__cred {
	display: block;
	color: var(--ink-3);
	font-size: 14px;
	margin-top: 2px;
}
.byline__when {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 20px;
	font-size: 13.5px;
	color: var(--ink-3);
}

.art__body {
	padding-block: var(--band-t);
}
.art__body > * { max-width: var(--measure); }
.art__body > p { margin-bottom: 1.15em; font-size: 17.5px; }
.art__body > h2 {
	font-family: var(--serif);
	font-size: clamp(23px, 3vw, 31px);
	line-height: 1.2;
	margin: 1.9em 0 0.5em;
	max-width: 26ch;
}
.art__body > h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 1.7em 0 0.4em;
}
.art__body > ul,
.art__body > ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.art__body li { margin-bottom: 0.4em; }
.art__body > figure { margin-bottom: 1.4em; max-width: 100%; }
.art__body img { border-radius: var(--rm); }
.art__body a { color: var(--coral); }

.art__foot { padding-bottom: var(--band); }

/* ------------------------------------------------- editorial furniture */

/* The signature element. A claim the reader can test instead of trust. */
.verify {
	max-width: var(--measure);
	margin: 1.9em 0;
	padding: 20px 22px;
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--coral);
	border-radius: var(--r);
}
.verify__h {
	font-family: var(--serif);
	font-size: 18px;
	margin-bottom: 8px;
}
.verify__b p { margin-bottom: 0.7em; font-size: 16px; }
.verify__b > :last-child { margin-bottom: 0; }
.verify__b ol, .verify__b ul { padding-left: 1.2em; font-size: 16px; }

.limits {
	max-width: var(--measure);
	margin: 1.9em 0;
	padding: 20px 22px;
	background: var(--cream-2);
	border: 1px solid var(--rule);
	border-radius: var(--r);
}
.limits__h {
	font-family: var(--serif);
	font-size: 18px;
	margin-bottom: 8px;
}
.limits__b p, .limits__b li { font-size: 16px; }
.limits__b p { margin-bottom: 0.7em; }
.limits__b > :last-child { margin-bottom: 0; }

.facts {
	max-width: var(--measure);
	margin: 1.9em 0;
	border-top: 1px solid var(--rule-firm);
}
.facts__h {
	font-size: 13px;
	color: var(--ink-3);
	padding: 10px 0 0;
}
.facts__r {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.facts dt { font-size: 13.5px; color: var(--ink-3); }
.facts dd { margin: 0; font-size: 16px; }
.unpub { color: var(--ink-3); font-style: italic; }

.pull {
	max-width: var(--measure);
	margin: 1.9em 0;
	padding-left: 20px;
	border-left: 2px solid var(--gold);
}
.pull p {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(21px, 2.8vw, 27px);
	line-height: 1.3;
}
.pull cite {
	display: block;
	margin-top: 10px;
	font-family: var(--sans);
	font-size: 14px;
	font-style: normal;
	color: var(--ink-3);
}

/* ------------------------------------------------------- cta, disclosure */

.cta {
	max-width: var(--measure);
	margin-block: var(--band-t);
	padding-top: 22px;
	border-top: 2px solid var(--ink);
}
.cta__lead {
	font-family: var(--serif);
	font-size: 23px;
	margin-bottom: 8px;
}
.cta__body {
	color: var(--ink-2);
	font-size: 16px;
	margin-bottom: 18px;
	max-width: 54ch;
}

.disclose {
	max-width: var(--measure);
	margin-top: var(--band-t);
	padding: 18px 20px;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	background: var(--cream-2);
}
.disclose__h {
	font-size: 13px;
	color: var(--ink-3);
	margin-bottom: 6px;
}
.disclose p { font-size: 14.5px; color: var(--ink-2); }

.disclaimer {
	max-width: var(--measure);
	margin-top: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-3);
}

/* ---------------------------------------------------------------- record */

.rec__head { padding-block: var(--band) 0; }
.rec__label { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.rec__h {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(30px, 5vw, 50px);
	line-height: 1.1;
	letter-spacing: -0.015em;
}
.rec__stand {
	margin-top: 16px;
	max-width: 56ch;
	color: var(--ink-2);
	font-size: 17.5px;
}
.rec__flag {
	margin-top: 20px;
	padding: 12px 16px;
	border: 1px solid var(--coral);
	border-radius: var(--r);
	color: var(--coral-deep);
	font-size: 14.5px;
	max-width: 60ch;
}

.rec__grid { padding-block: var(--band-t); }
.facts--rec { max-width: none; margin-top: 0; }

.rec__doors {
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--band-t);
	display: grid;
	gap: 16px;
}
.door {
	padding: 22px;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	background: var(--sheet);
}
.door--direct { border-top: 3px solid var(--coral); }
.door--agency { border-top: 3px solid var(--ink); }
.door__h {
	font-family: var(--serif);
	font-size: 20px;
	margin-bottom: 8px;
}
.door__b {
	color: var(--ink-2);
	font-size: 15px;
	margin-bottom: 16px;
}

/* ------------------------------------------------------------ search form */

.sform {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 52ch;
}
.sform__l { position: absolute; left: -9999px; }
.sform__i {
	flex: 1 1 200px;
	min-width: 0;
	padding: 11px 13px;
	border: 1px solid var(--rule-firm);
	border-radius: var(--r);
	background: var(--sheet);
	font: 400 16px var(--sans);
	color: var(--ink);
}
.sform__b {
	padding: 11px 18px;
	border: 1px solid var(--ink);
	border-radius: var(--r);
	background: var(--ink);
	color: var(--cream);
	font: 500 15px var(--sans);
	cursor: pointer;
}
.sform__b:hover { background: var(--coral-deep); border-color: var(--coral-deep); }

/* ---------------------------------------------------------------- footer */

.foot {
	margin-top: var(--band);
	border-top: 1px solid var(--rule-firm);
	background: var(--cream-2);
}
/* The front page ends in .bands, which is cream and already carries a band of
   bottom padding. The footer's own top margin then rendered as a white stripe
   between two cream blocks — the page background showing through a gap that
   exists to give white article pages air they do not need here. */
.home .foot { margin-top: 0; }
.foot__in {
	grid-template-columns: minmax(0, 1fr);
	display: grid;
	gap: 28px;
	padding-block: var(--band-t);
}
.foot__name { font-family: var(--serif); font-size: 20px; }
.foot__desc { margin-top: 6px; color: var(--ink-3); font-size: 14.5px; max-width: 40ch; }
.foot__h { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list li { margin-bottom: 7px; }
.foot__list a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.foot__list a:hover { color: var(--coral-deep); text-decoration: underline; }

.foot__reg {
	padding-block: 20px var(--band-t);
	border-top: 1px solid var(--rule-soft);
}
.foot__reg p {
	font-size: 13px;
	color: var(--ink-3);
	max-width: 82ch;
}
.foot__nosale { margin-top: 8px; color: var(--ink-2); }

/* ============================================================== responsive
   QA sizes are 320 / 360 / 384 / 412 first, then the breakpoints below.
   Galaxy is 360; nothing may overflow there.
   ========================================================================= */

@media (min-width: 600px) {
	.facts__r { grid-template-columns: 15rem minmax(0, 1fr); gap: 0 24px; align-items: baseline; }
	.rec__doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.foot__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.seconds__grid,
	.readnext__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.item__link { grid-template-columns: 220px minmax(0, 1fr); gap: 0 22px; align-items: start; }
	.item__link:not(:has(.item__img)) { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 860px) {
	.wrap { padding-inline: 32px; }

	/* The cover story: photograph and text side by side, text vertically
	   centred against it. Stacked on a phone, where side-by-side would make
	   both halves too small to be worth having. */
	.lead__link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 40px; align-items: center; }

	/* Was two columns of section links. Each band now carries a piece, so a
	   second column would nest a two-column row inside a two-column list and
	   leave four narrow measures of prose. One column, wider rows. */
	.bands__list { display: block; }

	.readnext__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

	.opener figcaption { padding-inline: 32px; }

	/* An article is a column, and a column centres. */
	.art__head, .art__body, .art__foot { max-width: calc(var(--measure) + 90px); }
	.rec__head { max-width: calc(var(--measure) + 90px); }

	.foot__in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
	body { font-size: 17.5px; }
	.seconds__grid { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition-duration: 0.01ms !important; }
}

/* Print: an article should survive being printed for a doctor's appointment. */
@media print {
	.mast, .foot, .cta, .prelaunch, .pagination, .readnext, .bands { display: none; }
	body { background: #fff; font-size: 11pt; }
	.art__body > * { max-width: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ================================================================ photographs
   Twenty-two photographs supplied by three clinics. Every one is captioned and
   attributed, because an uncaptioned clinic interior on a facilitator's site is
   doing the work of an advertisement without admitting to it.
   ========================================================================= */

.shot {
	max-width: var(--measure);
	margin: 1.9em 0;
}
.shot img { width: 100%; border-radius: var(--rm); }
.shot figcaption,
.strip figcaption {
	margin-top: 9px;
	font-size: 13.5px;
	color: var(--ink-3);
}

.strip {
	max-width: var(--measure);
	margin: 1.9em 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}
/* The supplied photographs are not all the same ratio (1187x659 next to
   1078x757), so a plain row leaves one image hanging below the others. Crop to
   a shared 3:2 and the row reads as one row. */
.strip__i img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--r);
}
.strip__i { display: flex; flex-direction: column; }
.strip__c {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink-3);
}
.strip figcaption { grid-column: 1 / -1; margin-top: 0; }

.portrait {
	max-width: var(--measure);
	margin: 1.6em 0;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 0 18px;
	align-items: center;
}
.portrait__img {
	width: 96px;
	height: 120px;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--rm);
}
.portrait figcaption { align-self: center; }
.portrait__n {
	display: block;
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.25;
}
.portrait__r {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	color: var(--ink-3);
}

/* The record banner was the one full-bleed element on the site until v5.10.0.
   It now uses `.opener`, the same band as every other lead photograph — Adam
   asked for one aligned layout, and a record that opens differently from the
   article about the same clinic was the largest remaining difference. */
.opener + .rec__head { padding-top: var(--band-t); }

@media (min-width: 700px) {
	/* Three photographs in a row is a photo strip, not the banned three-column
	   card grid skeleton. Justified so the pre-flight scan hit is not a mystery. */
	.strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.portrait { grid-template-columns: 120px minmax(0, 1fr); gap: 0 22px; }
	.portrait__img { width: 120px; height: 150px; }
}

/* ==================================================================== v3
   The dental section, the featured clinic, and the language switcher.

   Added 2026-08-20 when the magazine was rebuilt around one dental clinic.
   Nothing here introduces a new colour, a new radius, a new font or a shadow;
   the whole section is built from the tokens above. The two genuinely new
   shapes are the featured-clinic band at the top of the front page and the
   before/after pair, and both are argued for in the templates that use them.
   ========================================================================= */

/* -------------------------------------------------------- language switch */

.langs {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 10px;
	align-items: center;
	font-size: 13px;
}
.langs li + li { border-left: 1px solid var(--rule); padding-left: 10px; }
.langs a {
	color: var(--ink-3);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}
.langs a:hover { color: var(--coral-deep); }
/* The current language is stated rather than merely styled: aria-current is on
   the anchor, so this rule and the screen reader are saying the same thing. */
.langs a.is-on { color: var(--ink); border-bottom-color: var(--gold); }

.foot .langs { margin-top: 14px; }

/* ------------------------------------------------------------------- hero */

/* Three pieces on rotation. Not a promotional banner: each slide is an article
   this magazine published, so the photograph belongs to a piece of writing
   rather than to a sales panel. Radius 0 and no shadow, like everything else.

   Slides are stacked in one grid cell rather than translated on a track, so
   the section is exactly as tall as its tallest slide and nothing reflows when
   one becomes current.

   v5.5.0, 2026-09-06. Adam: "메인 배너가 너무 어둡습니다 … 의학 매거진과
   어울리게 Clean한 느낌으로." The hero was a full-bleed carbon slab directly
   under a white masthead, so the first thing the page did was go dark, and a
   dark slab under a medical wordmark reads as a campaign panel rather than as
   an opening spread. It is now the same white paper as the masthead above it:
   the page runs white from the folio line to the section blocks, the
   photograph is the only dark mass on the screen, and the accent — the one
   drape blue — carries the section label and the current slide marker. The
   structure did not change; only the ground it sits on.

   ⛔ Do not put the ink ground back to "make the hero stand out". It stood out
   by being dark, which is exactly the thing that was wrong: contrast was doing
   the work that scale and white space should do. */

.hero {
	background: var(--cream);
	color: var(--ink);
	padding-top: clamp(22px, 3vw, 44px);
}
/* No bottom rule: .bands opens with its own hairline and a sheet-grey ground,
   so the hero's old border would now print two hairlines of different weights
   on top of each other. It was invisible while the hero was ink. */
/* Slides are stacked in one grid cell, and a grid item defaults to
   min-width:auto, which is min-content. Without the guard below the longest
   unbreakable headline sets the width of the whole hero and the page scrolls
   sideways: measured at +224px on a 320px English viewport and +277px in
   Japanese, where there are fewer break opportunities. */
.hero__track { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__slide { grid-area: 1 / 1; min-width: 0; }
.hero__slide[hidden] { display: none; }

.hero__link {
	display: grid;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr);
	text-decoration: none;
	color: inherit;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 22px;
	gap: 0;
}
.hero__img { display: block; margin: 0 -22px; }
.hero__img img {
	display: block;
	width: 100%;
	height: clamp(200px, 46vw, 380px);
	object-fit: cover;
	border-radius: var(--r);
}
.hero__text { display: block; padding-block: 20px 24px; min-width: 0; }
/* .hero__link--text is gone with the magazine's own slide (v5.6.0). Every
   slide is now the newest piece in a section and a piece without a photograph
   is skipped, so the textual variant can no longer be rendered. If a textual
   slide is ever wanted again it needs its styling written back, not merely
   $allow_textual passed. */
.hero__label {
	display: block;
	font-family: var(--serif);
	font-size: 12px;
	font-weight: 620;
	letter-spacing: 0.04em;
	color: var(--drape);
}
.hero__h {
	display: block;
	margin-top: 10px;
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(25px, 3.9vw, 44px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--ink);
	max-width: 22ch;
	text-wrap: balance;
}
.hero__link:hover .hero__h { text-decoration: underline; text-underline-offset: 4px; }
.hero__stand {
	display: block;
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 56ch;
	overflow-wrap: anywhere;
}

/* The controls, v5.6.0.

   The anonymous dots and the Pause button are both gone. Every slide is now
   the newest piece in one section, so the control that selects it carries the
   section's name and the reader chooses a subject instead of guessing what the
   third dot holds. The current tab is marked with the house 3px drape rule —
   the same mark the masthead's section bar uses — so the two bars answer
   "where am I" in one vocabulary.

   Where Pause stood there is now a door into that section, which follows the
   slide. The links are stacked in one grid cell rather than rewritten in
   place, so the bar keeps its width when the label changes length.

   ⚠️ The stop control did not disappear with the button: clicking a tab stops
   the rotation permanently (mag.js). If Pause ever comes back, put it here and
   take that behaviour out, or the two will fight. */
.hero__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	flex-wrap: wrap;
	padding-block: 6px 16px;
	border-top: 1px solid var(--rule-soft);
	margin-top: 18px;
}
.hero__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
/* A mark, not a label (v5.7.0). The name of the section is on the button for a
   screen reader and nowhere on the screen: the masthead's section bar is
   directly above the banner, the slide's kicker names the section, and the door
   on the right names it a third time. Printing it here made four, two of them
   inside the same 40px of bar.

   The mark is 3px tall and the button is 31px tall: `padding` builds the touch
   target and `background-clip: content-box` keeps the paint inside the 3px, so
   a finger has something to hit without the rule getting fat. `content-box`
   sizing is deliberate against the global border-box — the 3px must be the
   mark itself, not the mark minus its padding. */
.hero__tab {
	display: block;
	box-sizing: content-box;
	width: 40px;
	height: 3px;
	padding: 14px 0;
	border: 0;
	border-radius: var(--r);
	background: var(--rule);
	background-clip: content-box;
	cursor: pointer;
}
.hero__tab:hover { background: var(--rule-firm); background-clip: content-box; }
.hero__tab.is-on { background: var(--drape); background-clip: content-box; }

/* Stacked, not swapped: one grid cell holds every section's link and only the
   current one is shown, so "See all in Doctors" and "See all in Devices &
   Injectables" occupy the same box and the bar never jumps. */
.hero__gos { display: grid; min-width: 0; }
.hero__go {
	grid-area: 1 / 1;
	align-self: center;
	justify-self: end;
	font-family: var(--serif);
	font-size: 14px;
	font-weight: 620;
	letter-spacing: 0.01em;
	color: var(--drape);
	text-decoration: none;
	border-bottom: 1px solid var(--drape);
	padding-bottom: 2px;
	white-space: nowrap;
}
.hero__go[hidden] { display: none; }
.hero__go:hover { color: var(--coral-deep); border-bottom-color: var(--coral-deep); }

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

.u-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Five marks fit on one line at 320px; "See all in Devices & Injectables" does
   not fit beside them. Below 640px the bar stacks and the door sits under the
   marks, left-aligned with everything else on the page. */
@media (max-width: 639px) {
	.hero__bar { flex-direction: column; align-items: stretch; gap: 2px; padding-block: 4px 18px; }
	.hero__go { justify-self: start; white-space: normal; }
}

@media (min-width: 900px) {
	.hero__link {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: 0 48px;
		padding-block: 0;
	}
	/* Off the ink ground a photograph with a pale edge — a clinic interior, a
	   white-on-white device shot — dissolves into the page. The hairline is
	   inset so it never adds width, and it is only here: below 900px the
	   picture is full-bleed and a border would draw a box against the two
	   viewport edges. */
	.hero__img { margin: 0; box-shadow: inset 0 0 0 1px var(--rule-soft); }
	.hero__img img { height: clamp(300px, 34vw, 440px); }
	.hero__text { padding-block: 28px; }
}

/* ------------------------------------------------------- featured clinic */

/* The band that leads the front page. Cream-2 rather than a new colour, and a
   hairline top and bottom rather than a card, because the clinic is the first
   thing on the page and boxing it would read as an advertisement slot. */
.feat {
	background: var(--cream-2);
	border-bottom: 1px solid var(--rule-soft);
	padding-block: var(--band) var(--band-t);
}
.feat__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.feat__label { font-size: 13px; color: var(--coral); margin-bottom: 12px; }
.feat__h {
	font-family: var(--serif);
	font-size: clamp(31px, 5.6vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	max-width: 16ch;
}
.feat__stand {
	margin-top: 16px;
	max-width: 54ch;
	font-size: 17px;
	color: var(--ink-2);
}

/* Two figures, set large, because they are the clinic's whole claim and the
   reader should be able to see exactly what is being asserted before reading
   the sentence that qualifies it. */
.feat__nums {
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: 0 44px;
	border-top: 1px solid var(--gold);
	padding-top: 16px;
}
.feat__nums dt { font-size: 13px; color: var(--ink-3); }
.feat__nums dd {
	margin: 4px 0 0;
	font-family: var(--serif);
	font-size: clamp(28px, 4.6vw, 40px);
	line-height: 1;
	font-feature-settings: "tnum" 1;
}
.feat__asof {
	margin-top: 14px;
	max-width: 56ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-3);
}
.feat__acts {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
}
.out--feat { font-size: 15px; }

.feat__img { margin: 0; }
.feat__img img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 12%;
	border-radius: var(--rm);
}

/* The groups, as a ruled row rather than four cards. Same reasoning as the
   sections list further down the page: these are destinations, not stories. */
.feat__groups {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.feat__groups li { border-bottom: 1px solid var(--rule-soft); }
.feat__groups a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 15px 0;
	text-decoration: none;
	color: var(--ink);
}
.feat__gname { font-family: var(--serif); font-size: 19px; }
.feat__groups a:hover .feat__gname { color: var(--coral-deep); }
.feat__gn { font-size: 13.5px; color: var(--ink-3); font-feature-settings: "tnum" 1; }
.feat__all .feat__gname { color: var(--coral); }

/* ------------------------------------------------------- treatment index */

.tgroup { padding-block: 0 var(--band-t); }
.tgroup:first-of-type { padding-top: var(--band-t); }
.tgroup__h {
	font-family: var(--serif);
	font-size: clamp(23px, 3.2vw, 31px);
	line-height: 1.2;
}
.tgroup__h a { color: var(--ink); text-decoration: none; }
.tgroup__h a:hover { color: var(--coral-deep); }
.tgroup__d {
	margin-top: 10px;
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 16px;
}
.tgroup__back { margin-top: 30px; font-size: 15px; }

.tgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; }
.tcard { min-width: 0; }

.tcard__link { display: block; text-decoration: none; color: var(--ink); }
.tcard__img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--sheet);
	border-radius: var(--rm);
	margin-bottom: 13px;
}
/* Many of these are clinical illustrations on a white ground rather than
   photographs of a room, so they get `contain` and keep their own background
   instead of being cropped through the middle of a diagram. */
.tcard__img img[src*="od-gbr-"],
.tcard__img img[src*="od-sinus-"],
.tcard__img img[src*="od-process"],
.tcard__img img[src*="od-structure"],
.tcard__img img[src*="od-abut-"],
.tcard__img img[src*="od-overdenture"],
.tcard__img img[src*="od-bridge"],
.tcard__img img[src*="od-implant-bridge"],
.tcard__img img[src*="od-rootcanal"],
.tcard__img img[src*="od-perio-"],
.tcard__img img[src*="od-flipper"],
.tcard__img img[src*="od-short-implant"],
.tcard__img img[src*="od-membrane-"],
.tcard__img img[src*="od-systems"] { object-fit: contain; }

.tcard__h {
	display: block;
	margin-top: 7px;
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.24;
}
.tcard__link:hover .tcard__h { color: var(--coral-deep); }
.tcard__sum {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
}

/* ------------------------------------------------------- treatment page */

.sec--link { text-decoration: none; }
.sec--link:hover { color: var(--coral-deep); border-bottom-color: var(--coral); }

.tclinic {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid var(--rule-soft);
	font-size: 14.5px;
	color: var(--ink-3);
}
.tclinic a { margin-left: 6px; }

.tsection { padding-bottom: var(--band-t); }

/* The gallery. One column, full body measure, captioned. Deliberately not a
   masonry or a lightbox: on a procedure page the caption is load-bearing, and
   a lightbox hides it behind a click. */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 20px; }
.gallery__f { margin: 0; min-width: 0; }
.gallery__f img {
	width: 100%;
	max-height: 520px;
	object-fit: contain;
	object-position: 50% 50%;
	background: var(--sheet);
	border-radius: var(--rm);
}
.gallery__f figcaption {
	margin-top: 9px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-3);
}

/* ------------------------------------------------------------ case pairs */

.cases { margin-top: 8px; }
.cases__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 20px; }
.pair { margin: 0; min-width: 0; }
.pair__imgs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pair__i { display: block; }
/* `cover` at 16/9 was cropping the right-hand edge off every supplied case
   photograph, and what lives on that edge is the clinic's own date stamp:
   the one piece of provenance the image carries. The pairs are also not all
   the same ratio (615x288 against 1133x600), so `contain` in a 2:1 box on the
   sheet colour is the only treatment that neither crops evidence nor lets the
   two halves of a pair sit at different heights. */
.pair__i img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: contain;
	background: var(--sheet);
	border-radius: var(--r);
}
/* The label sits under the photograph, not on it.

   Overlaying it failed twice. Top-left landed on top of the burnt-in BEFORE or
   AFTER badge the clinic had already put there, two labels reading the same
   word with one half-hidden. Bottom-left cleared the collision and still left
   the same word printed twice on the same image.

   Under it, there is no overlay to collide with, the clinic's own badge stays
   the loudest thing on its own photograph, and — the part that actually decides
   this — the word is real text in the DOM. A burnt-in badge is invisible to a
   screen reader, and roughly half the case pairs here (every implant one) carry
   no badge at all, so the label cannot simply be dropped. */
.pair__l {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.pair__l--a { color: var(--coral); }
.pair figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--ink-3);
	font-feature-settings: "tnum" 1;
}

/* The statutory disclosure. Coral rule rather than a warning box: it has to be
   read, and a yellow box with a triangle in it is the thing readers have been
   trained to skip. */
.cases__warn {
	margin-top: 26px;
	padding: 16px 0 0;
	border-top: 2px solid var(--coral);
	max-width: 68ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}

@media (min-width: 600px) {
	.tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
	.cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
	/* Text first, photograph second, 6/4. The clinic's claim reads before its
	   portrait, which is the order a record has and an advertisement does not. */
	.feat__in { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 0 48px; align-items: center; }
	.feat__groups { grid-column: 1 / -1; }
	.tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
	.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
	/* An article column is centred; the gallery and the cases are wider than the
	   column on purpose, because the photograph is the argument here. */
	.art--treatment .tsection { max-width: var(--wrap); }
	.tbody { max-width: calc(var(--measure) + 90px); }
}

/* The note that stands where before-and-after photographs would have gone.

   Set as a statement, not as a placeholder. A greyed-out apology would read as
   something missing; this is a position, and on a facilitator's site it is the
   most persuasive paragraph on the page. Coral rule, same as the case
   disclosure it replaces, so the two occupy the same visual slot. */
.nocases {
	max-width: 68ch;
	padding-top: 16px;
	border-top: 2px solid var(--coral);
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-2);
}

/* The treatment page opener needs no override since v5.10.0: every opener
   is contained on the sheet. See `.opener` above. */

@media print {
	.feat__acts, .feat__groups, .langs, .tgroup__back { display: none; }
	.cases__warn { border-top-color: #000; }
}

/* ------------------------------------------------------------------ trust
 * v4.1, the Wirecutter tier: disclosure where the reader starts, the reasons
 * to trust a page as part of the page, the method visible before the verdict.
 * Existing tokens only. The trust box takes the gold rule so it cannot be
 * mistaken for the coral verify box it introduces. The jump list is a single
 * wrapping line, not a block: it is furniture, and furniture stays small.
 * -------------------------------------------------------------------- */
.dline {
	max-width: var(--measure);
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--ink-3);
}
.dline a { color: var(--coral); }

.trust {
	max-width: var(--measure);
	margin: 0 0 2em;
	padding: 18px 22px;
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--gold);
	border-radius: var(--r);
}
.trust__h {
	font-family: var(--serif);
	font-size: 17px;
	margin-bottom: 7px;
}
.trust p { font-size: 14.5px; color: var(--ink-2); margin-bottom: 0.55em; }
.trust p:last-child { margin-bottom: 0; }

.onpage {
	max-width: var(--measure);
	margin: 0 0 1.7em;
}
.onpage__h {
	font-family: var(--serif);
	font-style: italic;
	font-size: 15px;
	color: var(--ink-3);
	margin-bottom: 6px;
}
.onpage ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px 18px;
	font-size: 14.5px;
}
.onpage a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--gold);
}
.onpage a:hover { color: var(--coral-deep); }

/* ---------------------------------------------------------------- monocle
 * v4.2: every section states its rule under its standfirst, and Patient
 * Guides reads as a numbered guide rather than a dated feed. The number is
 * the only new ornament and it takes the serif and the gold hairline the
 * rest of the furniture already uses.
 * -------------------------------------------------------------------- */
.lede__rule {
	margin-top: 12px;
	max-width: 58ch;
	font-size: 14.5px;
	color: var(--coral);
}

.gseq { list-style: none; margin: 0; padding: 0; }
.gseq__note {
	font-family: var(--serif);
	font-style: italic;
	font-size: 15px;
	color: var(--ink-3);
	margin-bottom: 18px;
}
.gseq__item { border-top: 1px solid var(--rule); }
.gseq__item:last-child { border-bottom: 1px solid var(--rule); }
.gseq__link {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 22px 0;
	text-decoration: none;
	color: var(--ink);
}
.gseq__link:hover .item__h { color: var(--coral-deep); }
.gseq__n {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1;
	color: var(--gold);
	min-width: 40px;
	padding-top: 4px;
}
@media (max-width: 560px) {
	.gseq__link { gap: 14px; }
	.gseq__link .item__img { display: none; }
}

/* ----------------------------------------------------------------- cereal
 * v4.3, the photograph tier. Two moves, both about pacing rather than
 * ornament: a landscape photograph 1400px or wider takes the spread instead
 * of the text column, and a strip of rooms always does, because three rooms
 * in 68ch were three thumbnails. The breakout is transform-centred so it
 * cannot widen the page, and the caption stays small and grey where it was:
 * the photograph carries the spread, the caption does not fight it.
 * -------------------------------------------------------------------- */
.shot--wide,
.strip--wide {
	width: min(100vw - 40px, 1100px);
	max-width: min(100vw - 40px, 1100px);
	margin-left: 50%;
	transform: translateX(-50%);
}
.shot--wide { margin-top: 2.6em; margin-bottom: 2.6em; }
.strip--wide { margin-top: 2.4em; margin-bottom: 2.4em; }
.shot--wide figcaption,
.strip--wide figcaption { max-width: var(--measure); }
@media (max-width: 700px) {
	.shot--wide,
	.strip--wide {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		transform: none;
	}
}


/* ---------------------------------------------------------------- harvard
 * v4.4: the named medical reviewer. One quiet line in the byline register;
 * the gold hairline under the name is the same one every checkable claim on
 * this site already wears.
 * -------------------------------------------------------------------- */
.review {
	max-width: var(--measure);
	margin-top: 8px;
	font-size: 14.5px;
	color: var(--ink-2);
}
.review--alone { margin-top: 14px; }
.review__sep { color: var(--ink-3); }

/* ============================================================ v5 "The Chart"
   The furniture layer of the redesign. Everything above keeps its layout;
   this section reassigns voice and rules: grotesk for furniture (labels,
   buttons, captions, numbers), serif for prose, hard rules instead of soft
   panels, and the drape blue as the only colour that is not ink or paper.
   ========================================================================= */

/* Display type: the grotesk carries weight now, not lightness. */
.art__h, .lede__h, .lead__h, .rec__h, .feat__h {
	font-weight: 760;
	letter-spacing: -0.015em;
	line-height: 1.03;
}
.card__h, .item__h, .tcard__h, .band__name, .gseq .item__h {
	font-weight: 640;
	letter-spacing: -0.008em;
}
.mast__name { font-weight: 740; }

/* Furniture speaks grotesk; prose stays serif. */
.btn, .sec, .byline__who, .byline__when, .item__date, .langs, .dline,
.facts dt, .facts__h, .strip__c, figcaption, .review,
.onpage ol, .band__h, .foot__h, .foot li, .foot p, .pagination,
.verify__h, .limits__h, .trust__h, .disclose__h, .rec__label, .feat__label {
	font-family: var(--serif);
}
.byline__who a { border-bottom-color: var(--rule-firm); }
.btn { font-weight: 620; letter-spacing: 0.01em; }

/* Small tags: single-word furniture may set caps; never stacked over a
   heading as an eyebrow. */
.sec, .rec__label, .feat__label, .facts__h, .onpage__h {
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 11.5px;
	font-weight: 640;
}
.onpage__h {
	font-family: var(--serif);
	font-style: normal;
	color: var(--ink-3);
}
.gseq__note { font-family: var(--sans); }

/* Boxes become ruled sections: a chart is ruled, not upholstered. */
.verify, .limits, .trust {
	background: transparent;
	border: 0;
	border-top: 3px solid var(--ink);
	border-radius: 0;
	padding: 16px 0 0;
}
.verify { border-top-color: var(--drape); }
.trust { border-top-width: 1px; border-top-color: var(--rule-firm); padding-top: 14px; }
.trust__h { font-weight: 640; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; }
.verify__h, .limits__h { font-weight: 680; font-size: 16px; }
.facts { border-top: 3px solid var(--ink); }

/* The number is furniture. */
.gseq__n { font-family: var(--serif); font-weight: 760; }

/* The doors on a record: flat, ruled, one blue. */
.door { border-radius: 0; }

/* Wide photographs lose the corner the tokens already removed and gain a
   hairline base rule, which is how a broadsheet sits a picture on a page. */
.shot--wide img, .strip--wide .strip__i img { border-radius: 0; }

/* ==================================================== v5.3 section blocks
   The front page under the banner: one block per section, each a rule, a
   name, its sub-links, and up to three pieces. The reference Adam sent is a
   Wirecutter category block, and the structure is copied; the voice is not.
   Their rule is a thick black bar because it is a shop aisle; ours is the
   same 3px carbon rule the verify and limits boxes already use, so a section
   heading reads as another entry in the same chart rather than a new idiom.

   Every track is minmax(0, …) and every item carries min-width: 0, for the
   reason set out at length above the .seconds grid: `1fr` is minmax(auto,1fr)
   and `auto` means min-content, which for a track holding a 1448px photograph
   is 1448px, inside a 320px phone.
   ---------------------------------------------------------------------- */

.sblock {
	border-top: 3px solid var(--ink);
	padding-top: 16px;
	margin-top: var(--band-t);
	min-width: 0;
}
.sblock:first-child { margin-top: 0; }

.sblock__h {
	font-family: var(--serif);
	font-weight: 760;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.sblock__h a { color: var(--ink); text-decoration: none; }
.sblock__h a:hover { color: var(--coral-deep); }

/* The sub-links are furniture, so they speak grotesk and stay small. They are
   underlined because they are the one line here that is a list of links rather
   than a heading that happens to be clickable. */
.sblock__nav {
	font-family: var(--serif);
	margin-top: 6px;
	font-size: 15px;
	color: var(--ink-2);
	overflow-wrap: anywhere;
}
.sblock__nav a { color: var(--ink-2); text-decoration-color: var(--rule-firm); }
.sblock__nav a:hover { color: var(--coral-deep); }

.sblock__grid {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px 28px;
}
.scard { min-width: 0; }
.scard__link {
	display: block;
	min-width: 0;
	text-decoration: none;
	color: var(--ink);
}
.scard__img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--rm);
	margin-bottom: 14px;
}
.scard__h {
	display: block;
	font-family: var(--serif);
	font-weight: 640;
	font-size: clamp(19px, 2.1vw, 23px);
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
.scard__link:hover .scard__h { color: var(--coral-deep); }
.scard__x {
	display: block;
	margin-top: 9px;
	color: var(--ink-2);
	font-size: 15.5px;
	line-height: 1.5;
	overflow-wrap: anywhere;
	/* Three of these sit side by side, and an index is unreadable when one
	   column runs to eight lines and its neighbour to two. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
/* The date is the last thing read and the first thing checked, so it is
   furniture: grotesk, small, grey, and never confused with the standfirst. */
.scard__d {
	font-family: var(--serif);
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--ink-3);
}

/* A section holds what it holds. Doctors currently holds one piece, and one
   card sitting in the first of three columns with two empty ones beside it
   reads as a broken grid rather than as a thin section, which is a different
   claim from the true one. So the track count follows the item count: the
   section still says how much is in it, and says it in a shape that looks
   deliberate. */
@media (min-width: 620px) {
	.sblock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sblock__grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
	.sblock__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sblock__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sblock__grid:has(> :only-child) { grid-template-columns: minmax(0, 560px); }
}

/* ================================================= v5.4 the clinic record
   Adam, 2026-09-02: keep "Clinic Records" as the section name and build the
   record on The Infatuation's review page.

   What is borrowed is the order, not the ornament: identity as a row of small
   facts under the headline, the ways out of the page immediately after, prose,
   then the rundown — their Food Rundown, which walks the menu one dish at a
   time with a photograph of each, and which here walks the procedures.

   What is not borrowed is the score and the "Perfect For" row. Both are
   recommendations, and a publisher paid by the subject cannot make one. The
   house rules still hold over all of it: radius 0, 3px rules instead of
   panels, grotesk furniture over serif prose, minmax(0, 1fr) everywhere.
   ====================================================================== */

/* --- the identity row ------------------------------------------------- */

.rchips {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 3px solid var(--ink);
	border-bottom: 1px solid var(--rule-firm);
}
.rchip {
	min-width: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.rchip:last-child { border-bottom: 0; }
.rchip__k {
	display: block;
	font-family: var(--serif);
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--ink-3);
}
.rchip__v {
	display: block;
	margin-top: 3px;
	font-size: 16px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* The doors used to sit inside .rec__grid and inherited its top padding.
   They are their own band now, above the prose. */
.rec__doors.wrap { margin-top: var(--band-t); }

/* --- section furniture shared by the rundown and the record ----------- */

.rund { padding-block: var(--band-t) 0; }
.rec__grid { padding-block: var(--band-t) 0; }

.rund__h {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.12;
	letter-spacing: -0.012em;
	padding-top: 14px;
	border-top: 3px solid var(--drape);
}
.rund__b {
	margin-top: 12px;
	max-width: var(--measure);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
}

/* --- the rundown ------------------------------------------------------ */

.rund__g { margin-top: 34px; }
.rund__gh {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.25;
	padding-top: 10px;
	border-top: 1px solid var(--rule-firm);
}
.rund__gh a { color: var(--ink); text-decoration: none; }
.rund__gh a:hover { color: var(--coral-deep); }
.rund__gd {
	margin-top: 7px;
	max-width: var(--measure);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-3);
}

.rund__list { list-style: none; margin: 18px 0 0; padding: 0; }
.rund__i { min-width: 0; border-bottom: 1px solid var(--rule-soft); }
.rund__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: 18px 0;
	text-decoration: none;
	color: var(--ink);
}
/* The wrapper also carries .tcard__img, so the clinical illustrations that
   must be `contain` rather than `cover` keep that rule without the file list
   being written out a second time. */
.rund__img { min-width: 0; }
.rund__img img { margin-bottom: 0; }
.rund__t { min-width: 0; }
.rund__ih {
	display: block;
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.25;
}
.rund__link:hover .rund__ih { color: var(--coral-deep); }
.rund__d {
	display: block;
	margin-top: 7px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
}

/* The photograph takes a fixed column once there is room for the sentence to
   keep a readable measure beside it. Below that it stacks, which is why the
   base rule is a single minmax(0, 1fr) track. */
@media (min-width: 620px) {
	.rund__link { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; align-items: start; }
}
@media (min-width: 900px) {
	.rund__link { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; }
}

/* The identity strip only becomes a strip once the columns have room to hold
   a value without breaking it into a paragraph. Below that it stacks, ruled
   like a list, which is a different shape from the record's own dl further
   down the page: that one is dt over dd with the label in the same register,
   and two blocks that look identical are how a reader stops reading either. */
@media (min-width: 620px) {
	.rchips { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
	.rchip {
		padding: 12px 18px;
		border-bottom: 0;
		border-left: 1px solid var(--rule-soft);
	}
	.rchip:first-child { padding-left: 0; border-left: 0; }
}