/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — WHO WE ARE
   experience · our-history · doctors · dr-elias · dr-milena
   Loaded after treatment.css, whose tokens, chapter bar, hero, "in brief",
   chapters, shared blocks, final moment and booking drawer these pages use
   as they are. Only what these pages add lives here:
     · the walk (experience)       · the story rows (our-history)
     · portraits (doctors)         · the at-work gallery, dated lists,
     · the rating strip              quotes and link lists (doctor pages)
   Everything is scoped to .tx; no treatment page loads this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: a portrait whose top edge must stay in frame drifts down, not up ── */
.tx .txh--top .txh__drift { inset: 0 0 -6%; }

/* ── In brief / final ────────────────────────────────────────────────────── */
.tx .txi--who .txi__statement { grid-column: 4 / 12; text-wrap: balance; }
.tx .txi--who .txi__answer { grid-column: 4 / 10; }
.tx .txf__title--long { font-size: clamp(46px, 6.2vw, 116px); }

/* blocks from the treatment pages, on grounds they were not drawn for */
.tx [data-tone="light"] .txcr__num { color: var(--tx-champ); }
.tx [data-tone="light"] .txcr__unit, .tx [data-tone="light"] .txcr__mmtext { color: var(--tx-soft); }
.tx [data-tone="light"] .txcr__mmtext strong { color: var(--tx-ink); }
.tx [data-tone="light"] .txcr__ruler {
  background:
    repeating-linear-gradient(90deg, rgba(168, 135, 90, .6) 0 1px, transparent 1px 100%) 0 100% / 10% 22px repeat-x,
    repeating-linear-gradient(90deg, rgba(168, 135, 90, .35) 0 1px, transparent 1px 100%) 0 100% / 2% 10px repeat-x;
  border-bottom-color: rgba(168, 135, 90, .5);
}
.tx [data-tone="dark"] .txplay { border-color: rgba(241, 233, 221, .55); color: var(--tx-od); }
.tx [data-tone="dark"] .txplay:hover { background: var(--tx-ivory); color: var(--tx-esp); }
.tx [data-tone="dark"] .txexp__films { border-top-color: var(--tx-od-line); }
.tx [data-tone="dark"] .txexp__filmtitle em { color: var(--tx-champ-lt); }
.tx .txc__head + .txexp__films { margin-top: clamp(56px, 7vw, 110px); }

.tx .txwho__lead { max-width: 760px; }
.tx .txc__head .tx-h2 .ln > span { text-wrap: balance; }
.tx [data-tone="light"] .txc__sub { color: var(--tx-champ); }
.tx .txc > .txmedia:not(.txmedia--wide) { max-width: 1040px; }
.tx .txwho__link { margin-top: clamp(40px, 5vw, 70px); }
.tx .txwho__h3 { margin-bottom: clamp(28px, 3vw, 44px); }
.tx .txwho__note { margin-top: 28px; max-width: 560px; font-size: 14.5px; line-height: 1.75; color: var(--tx-soft); }

/* ══ THE WALK (experience) ══════════════════════════════════════════════════ */
.tx .txstop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.tx .txstop + .txstop { margin-top: clamp(100px, 12vw, 200px); }
.tx .txstop__media { grid-column: 1 / 8; grid-row: 1; margin: 0; }
.tx .txstop__media > div { overflow: hidden; background: var(--tx-beige); }
.tx .txstop__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tx .txstop__text { grid-column: 9 / 13; grid-row: 1; position: relative; }
.tx .txstop--rev .txstop__media { grid-column: 6 / 13; }
.tx .txstop--rev .txstop__text { grid-column: 1 / 5; }
.tx .txstop--tall .txstop__media { grid-column: 8 / 12; }
.tx .txstop--tall .txstop__media img { aspect-ratio: 4 / 5; object-position: 50% 60%; }
.tx .txstop--rev.txstop--tall .txstop__text { grid-column: 2 / 7; }
.tx .txstop--tall:not(.txstop--rev) .txstop__media { grid-column: 2 / 6; }   /* a tall photo on the left (Block B stills, 2026-09-25) */
.tx .txstop--tall:not(.txstop--rev) .txstop__text { grid-column: 7 / 12; }
.tx .txstop__no {
  display: block; margin-bottom: clamp(18px, 2vw, 30px);
  font: 400 clamp(84px, 9vw, 160px)/.8 var(--serif); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(168, 135, 90, .55);
}
.tx .txstop__text .tx-h3 { margin-top: 20px; }
.tx .txstop__lead { margin-top: 22px; max-width: 440px; font: 400 clamp(19px, 1.5vw, 24px)/1.45 var(--serif); color: var(--tx-ink); }
.tx .txstop__body { margin-top: 16px; max-width: 420px; font-size: 15px; line-height: 1.75; color: var(--tx-soft); }
.tx .txstop__act { margin-top: 34px; }

.tx .txwho__close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.tx .txwho__small { grid-column: 1 / 5; font-size: 15px; line-height: 1.75; color: var(--tx-od-soft); }
.tx .txwho__big { grid-column: 6 / 13; font: 400 clamp(40px, 4.8vw, 86px)/1 var(--serif); letter-spacing: -.035em; }
.tx .txwho__big em { font-style: italic; color: var(--tx-champ-lt); }

/* ══ THE STORY (our-history) ════════════════════════════════════════════════ */
.tx .txstory { border-top: 1px solid var(--tx-line); }
.tx .txstory__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: clamp(52px, 6.5vw, 110px) 0; border-bottom: 1px solid var(--tx-line);
}
.tx .txstory__mark { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--nav-h, 92px) + var(--tx-bar) + 36px); }
.tx .txstory__no {
  display: block; font: 400 clamp(72px, 8vw, 140px)/.8 var(--serif); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(168, 135, 90, .6);
}
.tx .txstory__mark .tx-label { margin-top: 24px; max-width: 300px; }
.tx .txstory__body { grid-column: 5 / 12; }
.tx .txstory__body > p:not(.txstory__links) { margin-top: 24px; max-width: 660px; font: 400 clamp(19px, 1.45vw, 23px)/1.6 var(--serif); color: var(--tx-ink); }
.tx .txstory__fig { margin: clamp(40px, 4.5vw, 70px) 0 0; }
.tx .txstory__fig > div { overflow: hidden; }
.tx .txstory__fig img { width: 100%; height: auto; }
.tx .txstory__fig--portrait { max-width: 380px; }
.tx .txstory__links { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 34px; }

/* ══ PORTRAITS (doctors) ════════════════════════════════════════════════════ */
.tx .txleads { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.tx .txperson--lead:nth-child(1) { grid-column: 1 / 6; }
.tx .txperson--lead:nth-child(2) { grid-column: 7 / 12; margin-top: clamp(100px, 14vw, 240px); }
.tx .txperson figure { margin: 0; }
.tx .txperson figure > div { overflow: hidden; background: var(--tx-beige); }
.tx .txperson img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.6s var(--tx-ease); }
.tx .txperson:hover img { transform: scale(1.03); }
.tx .txperson__no { margin-top: 20px; font: italic 500 20px/1 var(--serif); color: var(--tx-champ); }
.tx .txperson__name { margin-top: 10px; font: 500 clamp(24px, 2vw, 34px)/1.05 var(--serif); letter-spacing: -.02em; }
.tx .txperson--lead .txperson__name { font-size: clamp(34px, 3.2vw, 56px); }
.tx .txperson__role { margin-top: 12px; font: 500 10px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txperson .txlink { margin-top: 22px; }
.tx .txcrew { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); align-items: start; }
.tx .txcrew .txperson:nth-child(even) { margin-top: clamp(40px, 5vw, 90px); }

/* ══ AT WORK (dr-elias) ═════════════════════════════════════════════════════ */
.tx .txgal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.tx .txgal figure { margin: 0; }
.tx .txgal figure > div { overflow: hidden; background: #1c1612; }
.tx .txgal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--tx-ease); }
.tx .txgal figure:hover img { transform: scale(1.03); }
.tx .txgal__i--1 { grid-column: 1 / 7; } .tx .txgal__i--2 { grid-column: 7 / 13; }
.tx .txgal__i--1 img, .tx .txgal__i--2 img { aspect-ratio: 4 / 3; }
.tx .txgal__i--3 { grid-column: 1 / 5; } .tx .txgal__i--4 { grid-column: 5 / 9; } .tx .txgal__i--5 { grid-column: 9 / 13; }
.tx .txgal__i--3 img, .tx .txgal__i--4 img, .tx .txgal__i--5 img { aspect-ratio: 16 / 9; }

/* dated lists: the first column is a year */
.tx .txsteps--years li { grid-template-columns: clamp(120px, 12vw, 190px) minmax(0, 1fr) minmax(0, 1fr); }
.tx .txsteps--years .txsteps__no { font-size: clamp(22px, 2vw, 32px); white-space: nowrap; }
.tx .txsteps--years h3 { font-size: clamp(24px, 2.3vw, 38px); line-height: 1.08; }

/* two ruled lists side by side */
.tx .txcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 110px); }

/* a quotation set large */
.tx .txwho__quote { max-width: 1120px; }
.tx .txwho__quote p { font: 400 clamp(28px, 3.1vw, 52px)/1.16 var(--serif); letter-spacing: -.02em; text-indent: -.4em; }
.tx .txwho__quote cite { display: block; margin-top: 30px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--tx-soft); }
.tx .txwho__quote cite::before { content: "— "; }

/* link lists ("Explore further", "Treatments performed by…") */
.tx .txmore { display: block; gap: 0; font-size: inherit; text-transform: none; letter-spacing: normal; }
.tx .txmore ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; margin-top: 24px; border-top: 1px solid var(--tx-line); }
.tx .txmore li { border-bottom: 1px solid var(--tx-line); }
.tx .txmore a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 4px 22px 0;
  font: 500 clamp(21px, 1.8vw, 29px)/1.15 var(--serif); letter-spacing: -.015em; color: var(--tx-ink); transition: color .4s;
}
.tx .txmore a::after { content: "→"; font: 400 15px/1 Inter, sans-serif; transition: transform .6s var(--tx-ease); }
.tx .txmore a:hover { opacity: 1; color: var(--tx-champ); }
.tx .txmore a:hover::after { transform: translateX(6px); }
.tx [data-tone="dark"] .txmore ul, .tx [data-tone="dark"] .txmore li { border-color: var(--tx-od-line); }
.tx [data-tone="dark"] .txmore a { color: var(--tx-od); }
.tx [data-tone="dark"] .txmore a:hover { color: var(--tx-champ-lt); }
.tx .txmore--4 ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ══ RATING STRIP (as on treatments.html) ═══════════════════════════════════ */
.tx .txrate { background: var(--tx-ivory); padding: clamp(80px, 9vw, 150px) var(--tx-g); }
.tx .txrate .tx-label { margin-bottom: 26px; }
.tx .txrate__in {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(22px, 3.4vw, 64px); padding: clamp(28px, 3vw, 44px) 0;
  border-top: 1px solid var(--tx-line); border-bottom: 1px solid var(--tx-line); color: var(--tx-ink);
}
.tx .txrate__in::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--tx-champ);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--tx-ease);
}
.tx .txrate__in:hover::after { transform: scaleX(1); }
.tx .txrate__score { font: 500 clamp(72px, 8vw, 132px)/.8 var(--serif); letter-spacing: -.045em; transition: color .6s var(--tx-ease); }
.tx .txrate__in:hover .txrate__score { color: var(--tx-champ); }
.tx .txrate__stars { display: grid; gap: 12px; }
.tx .txrate__row { font-size: 17px; line-height: 1; letter-spacing: .3em; color: var(--tx-champ); }
.tx .txrate__src { font: 500 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txrate__text { font: italic 400 clamp(26px, 2.6vw, 44px)/1.1 var(--serif); letter-spacing: -.015em; }
.tx .txrate__in:hover .txlink::before { transform: scaleX(.35); }
.tx .txrate__in:hover .txlink::after { transform: translateX(5px); }

/* ══ TABLET ═════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) and (min-width: 801px) {
  .tx .txsteps--years li { grid-template-columns: 130px minmax(0, 1fr); }
  .tx .txsteps--years p { grid-column: 2; }
  .tx .txcrew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx .txcrew .txperson:nth-child(even) { margin-top: 0; }
  .tx .txmore ul, .tx .txmore--4 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx .txstop__text { grid-column: 8 / 13; }
  .tx .txstop--rev .txstop__text { grid-column: 1 / 6; }
}

/* ══ MOBILE ═════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .tx .txi--who .txi__statement { font-size: 30px; }
  .tx .txh__title--long { font-size: clamp(46px, 15vw, 72px); }  /* a later treatment.css rule restores 20vw on phones */
  .tx .txf__title--long { font-size: clamp(44px, 12.5vw, 64px); }

  .tx .txstop, .tx .txstop--rev { display: flex; flex-direction: column; align-items: stretch; }
  .tx .txstop__media, .tx .txstop--rev .txstop__media { margin: 0 calc(var(--tx-g) * -1); }
  .tx .txstop__media .tx-cap { padding: 0 var(--tx-g); }
  .tx .txstop--tall .txstop__media { margin: 0 12% 0 0; }
  .tx .txstop--tall .txstop__media .tx-cap { padding: 0; }
  .tx .txstop__text { margin-top: 30px; }
  .tx .txstop__no { position: absolute; right: 0; top: -12px; margin: 0; font-size: 84px; }
  .tx .txstop + .txstop { margin-top: 90px; }

  .tx .txwho__close { display: block; }
  .tx .txwho__big { margin-top: 30px; font-size: 44px; }

  .tx .txstory__row { display: block; padding: 48px 0 52px; }
  .tx .txstory__mark { position: static; display: flex; align-items: flex-end; gap: 18px; margin-bottom: 26px; }
  .tx .txstory__no { font-size: 64px; }
  .tx .txstory__mark .tx-label { margin: 0 0 6px; }
  .tx .txstory__mark .tx-label::before { display: none; }
  .tx .txstory__body > p:not(.txstory__links) { font-size: 19px; }
  .tx .txstory__fig { margin-left: calc(var(--tx-g) * -1); margin-right: calc(var(--tx-g) * -1); }
  .tx .txstory__fig .tx-cap { padding: 0 var(--tx-g); }
  .tx .txstory__fig--portrait { max-width: none; margin-right: 18%; margin-left: 0; }
  .tx .txstory__fig--portrait .tx-cap { padding: 0; }

  .tx .txleads { display: block; }
  .tx .txperson--lead + .txperson--lead { margin-top: 64px; }
  .tx .txperson--lead:nth-child(2) { margin-left: 14%; }
  .tx .txcrew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .tx .txcrew .txperson:nth-child(even) { margin-top: 44px; }
  .tx .txperson__name { font-size: 24px; }

  .tx .txgal { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 calc(var(--tx-g) * -1); gap: 8px; }
  .tx .txgal__i--1, .tx .txgal__i--2 { grid-column: 1 / 3; }
  .tx .txgal__i--3 { grid-column: 1 / 3; }
  .tx .txgal__i--4 { grid-column: 1 / 2; } .tx .txgal__i--5 { grid-column: 2 / 3; }
  .tx .txgal__i--4 img, .tx .txgal__i--5 img { aspect-ratio: 1; }

  .tx .txsteps--years li { grid-template-columns: 1fr; gap: 8px; }
  .tx .txsteps--years p { grid-column: 1; }
  .tx .txsteps--years h3 { font-size: 26px; }

  .tx .txcols { grid-template-columns: 1fr; gap: 56px; }
  .tx .txwho__quote p { font-size: 27px; text-indent: -.35em; }
  .tx .txmore ul, .tx .txmore--4 ul { grid-template-columns: 1fr; }

  .tx .txrate { padding: 80px var(--tx-g); }
  .tx .txrate__in { grid-template-columns: auto minmax(0, 1fr); row-gap: 22px; column-gap: 22px; padding: 30px 0 32px; }
  .tx .txrate__score { font-size: 84px; }
  .tx .txrate__text, .tx .txrate__in .txlink { grid-column: 1 / -1; justify-self: start; }
  .tx .txrate__text { font-size: 30px; }

  /* the framed final keeps its desktop right offset on phones (treatment.css); here it sits full width */
  .tx .txf--frame .txf__media { right: auto; }
}
/* without JavaScript nothing scrubs the final moment, so show it finished (line and buttons included) */
html:not(.js) .tx .txf { --p: 1; }

@media (prefers-reduced-motion: reduce) {
  .tx .txperson img, .tx .txgal img { transition: none; }
}

/* The Who We Are heroes have no facts row (removed on request, 2026-09-22), so
   the buttons are the last thing in the hero; give them the room the row had. */
.tx .txh__main:last-child { margin-bottom: clamp(28px, 7vh, 72px); }
@media (max-width: 800px) {
  .tx .txh__main:last-child { margin-bottom: 36px; }
}

/* "In brief" runs straight into the first chapter on the same ivory ground, so
   its bottom padding and the chapter's top padding (about 320px together) read
   as an empty band. They share one smaller space instead. */
.tx .txi--who { padding-bottom: 0; }
.tx .txi--who + .txc { padding-top: clamp(90px, 8vw, 130px); }
@media (max-width: 800px) {
  .tx .txi--who + .txc { padding-top: 100px; }
}

/* Experience · the consultation room: two portrait stills from the clinic's
   footage. The shared pair is made for landscapes (the first spans 8 of 12
   columns and the second overlaps it); portraits that wide would run about
   1150px tall, so here they stand side by side, the second set lower. */
.tx .txpair--tall .txpair__a { grid-column: 2 / 7; }
.tx .txpair--tall .txpair__b { grid-column: 7 / 12; margin-top: clamp(80px, 10vw, 180px); }
.tx .txpair--tall .txpair__b > div { box-shadow: none; }
@media (max-width: 800px) {
  .tx .txpair--tall .txpair__a { margin-right: 0; }
}

/* ══ IN PRACTICE (dr-milena): the microscope film beside its line of words ══ */
.tx #practice .txsplit { align-items: center; }
.tx #practice .txsplit__media { position: relative; top: auto; }
.tx #practice .txsplit__text .tx-lead { max-width: 22ch; font: 400 clamp(26px, 2.4vw, 40px)/1.22 var(--serif); letter-spacing: -.01em; }

/* ══ Press photographs, shown whole (atelier, 2026-09-24; build_who.press) ═══ */
.tx .txpress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.tx .txpress__i { margin: 0; }
.tx .txpress__i img { display: block; width: 100%; height: auto; }
.tx .txpress__i figcaption { margin-top: 10px; font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.tx .txpress__h { margin: clamp(56px, 7vw, 96px) 0 clamp(24px, 3vw, 40px); }
@media (max-width: 800px) { .tx .txpress { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tx .txpress { grid-template-columns: minmax(0, 1fr); } }

/* ══ OUR TEAM: one size for everyone (2026-09-25) ═══════════════════════════
   All seven portraits share one grid: four to a row, three on tablets, two
   on phones, the last row centred. No staggered offsets. */
.tx .txcrew--even { --gap: clamp(18px, 2vw, 32px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(44px, 4.5vw, 72px) var(--gap); }
.tx .txcrew--even .txperson { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); min-width: 0; }
.tx .txcrew--even .txperson:nth-child(even) { margin-top: 0; }
@media (max-width: 1100px) and (min-width: 801px) {
  .tx .txcrew--even .txperson { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}
@media (max-width: 800px) {
  .tx .txcrew--even { --gap: 14px; row-gap: 38px; }
  .tx .txcrew--even .txperson { flex-basis: calc((100% - var(--gap)) / 2); }
  .tx .txcrew--even .txperson:nth-child(even) { margin-top: 0; }
}

/* ── Beirut, between visits (dental-tourism #between, 2026-09-27) ──────────
   A concierge's list in four tabs: Stay, Time, Taste, See. Each opens on a
   collage of three photographs (a tall lead, two 5:4 companions, the last one
   laid over the lead's corner) with the tab's word drawn large in outline
   behind it, beside a numbered list of places. media.js makes the tabs work
   (.cg--live); without it, every list shows one after another. */
.tx #between .txc__sub { max-width: 30em; }   /* stays clear of the chapter's big numeral */
.tx .cg { margin-top: clamp(36px, 4.5vw, 64px); }

.tx .cg__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tx-line); border-bottom: 1px solid var(--tx-line); }
.tx .cg:not(.cg--live) .cg__tabs { display: none; }
.tx .cg__tab {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no word count" "no label label";
  align-items: baseline; column-gap: 12px; padding: clamp(18px, 2vw, 28px) clamp(12px, 1.6vw, 24px);
  background: none; border: 0; border-left: 1px solid var(--tx-line); color: var(--tx-soft); font: inherit; text-align: left; cursor: pointer;
}
.tx .cg__tab:first-child { border-left: 0; }
.tx .cg__tno { grid-area: no; font: italic 500 16px/1 var(--serif); color: var(--tx-champ); }
.tx .cg__tword { grid-area: word; font: 500 clamp(30px, 3.2vw, 52px)/1 var(--serif); letter-spacing: -.02em; color: var(--tx-ink); opacity: .38; transition: opacity .5s var(--tx-ease); }
.tx .cg__tlabel { grid-area: label; margin-top: 10px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.tx .cg__tcount { grid-area: count; font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--tx-champ); }
.tx .cg__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tx-champ); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--tx-ease); }
.tx .cg__tab:hover .cg__tword { opacity: .75; }
.tx .cg__tab[aria-selected="true"] .cg__tword { opacity: 1; font-style: italic; }
.tx .cg__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tx .cg__tab:focus-visible { outline: 2px solid var(--tx-champ); outline-offset: -4px; }

.tx .cg__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding-top: clamp(40px, 5vw, 72px); }
.tx .cg--live .cg__panel[hidden] { display: none; }
.tx .cg:not(.cg--live) .cg__panel + .cg__panel { margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--tx-line); }
.tx .cg__panel:focus-visible { outline: 2px solid var(--tx-champ); outline-offset: 8px; }

.tx .cg__mosaic { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); padding-bottom: clamp(56px, 6vw, 96px); }
.tx .cg__fig { position: relative; z-index: 1; margin: 0; overflow: hidden; aspect-ratio: 5 / 4; background: var(--tx-cream); }
.tx .cg__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tx .cg__fig--lead { grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.tx .cg__fig:nth-of-type(3) { z-index: 2; transform: translate(-16%, clamp(28px, 3vw, 52px)); box-shadow: 0 0 0 clamp(6px, .8vw, 12px) var(--tx-ivory); }
.tx .cg__ghost {
  position: absolute; z-index: 0; left: -.04em; bottom: -.16em; white-space: nowrap; pointer-events: none;
  font: italic 500 clamp(110px, 14vw, 230px)/1 var(--serif); letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px var(--tx-champ); opacity: .55;
}

.tx .cg__kicker { margin: 0; font: 500 10px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-champ); }
.tx .cg__kicker b { margin-right: 8px; font: italic 500 15px/1 var(--serif); letter-spacing: 0; }
.tx .cg__title { margin: 14px 0 0; font: 500 clamp(30px, 2.8vw, 44px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--tx-ink); }
.tx .cg__list { list-style: none; margin: clamp(22px, 2.4vw, 32px) 0 0; padding: 0; border-top: 1px solid var(--tx-line); }
.tx .cg__place { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; padding: clamp(16px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--tx-line); }
.tx .cg__no { padding-top: .5em; font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--tx-champ); }
.tx .cg__name { margin: 0; font: 500 clamp(21px, 1.7vw, 26px)/1.15 var(--serif); color: var(--tx-ink); }
.tx .cg__where { margin: 6px 0 0; font: 500 9.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-soft); }
.tx .cg__note { margin: 8px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.6; color: var(--tx-soft); }

/* opening a tab: the photographs are uncovered from the top one after another,
   the word slides in behind them and the places rise in turn */
@media (prefers-reduced-motion: no-preference) {
  .tx .cg--live:not(.cg--seen) .cg__fig { clip-path: inset(0 0 100% 0); }
  .tx .cg--live.cg--seen .cg__panel.is-on .cg__fig { animation: cg-clip 1.1s var(--tx-ease) both; animation-delay: calc(var(--i) * 120ms); }
  .tx .cg--live.cg--seen .cg__panel.is-on .cg__fig img { animation: cg-zoom 1.9s var(--tx-ease) both; animation-delay: calc(var(--i) * 120ms); }
  .tx .cg--live.cg--seen .cg__panel.is-on .cg__ghost { animation: cg-ghost 1.5s var(--tx-ease) both; }
  .tx .cg--live.cg--seen .cg__panel.is-on .cg__place { animation: cg-rise .8s var(--tx-ease) both; animation-delay: calc(220ms + var(--i) * 60ms); }
}
@keyframes cg-clip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cg-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes cg-ghost { from { opacity: 0; transform: translateX(-5%); } to { opacity: .55; transform: none; } }
@keyframes cg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .tx .cg__tab { grid-template-columns: 1fr; grid-template-areas: "word" "count"; justify-items: center; row-gap: 8px; padding: 14px 6px; text-align: center; }
  .tx .cg__tno, .tx .cg__tlabel { display: none; }
  .tx .cg__tword { font-size: clamp(22px, 6.4vw, 30px); }
  .tx .cg__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 32px; }
  .tx .cg__mosaic { padding-bottom: 48px; }
  .tx .cg__fig:nth-of-type(3) { transform: translate(-12%, 24px); }
  .tx .cg__ghost { font-size: clamp(90px, 27vw, 150px); }
}

.tx .txguide__foot { margin-top: clamp(28px, 3vw, 44px); font: italic 500 clamp(17px, 1.3vw, 20px)/1.4 var(--serif); color: var(--tx-soft); }
.tx .txguide__credit { margin-top: 12px; font: 400 9.5px/1.7 var(--mono); letter-spacing: .05em; color: var(--tx-soft); }
.tx .txguide__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }