/* ==========================================================================
   Achba Iashta — sub-pages (/wines/, /wines/<slug>/, /family/, /abkhazia/ …)
   Loaded after styles.css, whose tokens and components it uses (ink / cream / gold, Cormorant + Onest,
   .container, .copy, .pill, .style-line, .grows__list, and the fade/bleed seam masks).
   Built from the prototypes in site/dev/pages/ (wine.css, family.css, abkhazia.css), deduplicated.
   Phones first: the rules below are the 375px layout; tablets from 601px, the desktop layout from 901px.
   The pages are generated by 09_Deploy/build_pages.py from 12_Pages/templates/.
   ========================================================================== */

/* ---------- Entry: the 18+ question only when it has not been answered ---------- */
html.is-adult .preloader { display: none; }            /* set before paint by the head script (localStorage ai-adult) */
body[data-page="sub"] .preloader__logo { width: clamp(150px, 18vw, 260px); }
body[data-page="sub"] { --section-y: clamp(64px, 7vw, 144px); }
/* Wine pages have an in-flow stockist link; keep the floating badge off editorial copy. */
body[data-page="sub"] > .finder { display: none; }
body[data-page="sub"] main { overflow: clip; }
body[data-page="sub"] main :is(section, header) { scroll-margin-top: calc(var(--nav-h) + 20px); }
body[data-page="sub"] main :is(.page-pair__copy, .timeline__text) { min-width: 0; }
body[data-page="sub"] main .copy { color: var(--cream-2); }

/* ---------- Shared type and pieces ---------- */
.page-h1, .page-h2 {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: -.005em; color: var(--cream); text-wrap: balance;
}
.page-h1 { font-size: clamp(40px, 11vw, 64px); line-height: .95; }
.page-h2 { font-size: clamp(32px, 9vw, 46px); line-height: 1; }
.page-answer { max-width: 46ch; font-size: clamp(17px, 1.25vw, 30px); line-height: 1.55; color: var(--cream-2); text-wrap: pretty; }
:is(.copy, .page-answer) a { color: var(--cream); border-bottom: 1px solid rgba(201,164,92,.6); transition: color .4s var(--ease-out), border-color .4s var(--ease-out); }
:is(.copy, .page-answer) a:hover { color: var(--gold-2); border-color: var(--gold-2); }
.page-block { position: relative; padding-top: var(--section-y); }
.page-lead { padding-top: clamp(40px, 6vw, 120px); }
.page-lead--centre { display: grid; justify-items: center; text-align: center; }
.page-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 2.4vw, 56px); }
.page-links--centre { justify-content: center; }
.page-links--closing { padding-block: var(--section-y); margin-top: 0; }
/* one photographic grade for every picture, as on the landing page */
:is(.page-hero__media, .page-pair__fig, .timeline__fig, .page-close__media, .people__card, .ph) img { filter: saturate(.8) contrast(1.05) brightness(.9); }

/* ---------- Breadcrumbs: the full trail on wide screens, «‹ parent» on phones ---------- */
.crumbs { position: relative; z-index: 1; font-size: var(--fs-label); line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 .6em; margin: 0; padding: 0; list-style: none; color: rgba(242,235,221,.62); }
.crumbs li { display: inline-flex; align-items: center; gap: .6em; min-width: 0; }
.crumbs li + li::before { content: "›"; letter-spacing: 0; color: rgba(227,198,134,.7); }
.crumbs a { display: inline-block; padding-block: 10px; color: rgba(242,235,221,.8); transition: color .4s var(--ease-out); }
.crumbs a:hover { color: var(--gold-2); }
.crumbs [aria-current="page"] { color: rgba(242,235,221,.92); }
@media (max-width: 600px) {
  .crumbs li { display: none; }
  .crumbs li:nth-last-child(2) { display: inline-flex; }
  .crumbs li:nth-last-child(2)::before { content: "‹"; }
}

/* ---------- Where to find the wines: the finder, on a breath of wine colour ---------- */
.where-block {
  padding-block: var(--section-y);
  background: radial-gradient(70% 60% at 50% 50%, rgba(58,24,36,.78) 0%, rgba(58,24,36,.32) 52%, rgba(58,24,36,0) 100%);
}
.where-block__inner { display: grid; justify-items: center; gap: 18px; text-align: center; }
.where-block .copy { max-width: 40ch; color: var(--cream-2); }
.where-block .pill { margin-top: 8px; }

/* ---------- Bottle cards: «Другие вина», the six bottles on /wines/ and /abkhazia/; a snap row on phones ---------- */
.others-block { padding-bottom: var(--section-y); }
.others-block--first { padding-top: clamp(40px, 5vw, 100px); }
.others-block .page-h2 { margin-bottom: 28px; }
.others {
  display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
}
.others::-webkit-scrollbar { display: none; }
.others > li { flex: 0 0 min(46vw, 220px); scroll-snap-align: start; }
.wine-card {
  display: flex; flex-direction: column; align-items: center; height: 100%; padding: 22px 12px 20px; border-radius: 4px; text-align: center;
  background: radial-gradient(80% 55% at 50% 38%, rgba(255,255,255,.08), rgba(255,255,255,0)), var(--wine-bg, var(--ink-2));
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(20px, 5.6vw, 26px); line-height: 1; color: rgba(242,235,221,.94);
}
.wine-card__img { display: block; height: clamp(190px, 52vw, 250px); margin-bottom: 16px; }
.wine-card__img img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 14px 16px rgba(0,0,0,.4)); transition: transform .9s var(--ease-out); }
.wine-card:hover .wine-card__img img, .wine-card:focus-visible .wine-card__img img { transform: translateY(-6px); }
.wine-card__name { display: block; }
.wine-card .style-line { font-weight: 400; font-size: .62em; line-height: 1.15; margin-top: .3em; padding-left: 0; }
.others-block .page-links { margin-top: clamp(32px, 3vw, 64px); }
.others-block + .page-block, .others-block + .page-links--closing { padding-top: 0; } /* the cards already end on a section gap */

/* ---------- /wines/: the title block and the comparison table (one card per wine on phones) ---------- */
.page-head { padding: calc(var(--nav-h) + 24px) 0 0; }
.page-head .crumbs { margin-bottom: clamp(24px, 4vw, 80px); }
.page-head .page-answer { margin-top: clamp(20px, 2vw, 44px); }
.page-head__copy { margin-top: 1.2em; }
.page-head__copy .copy + .copy { margin-top: 1em; }
.compare-intro { margin-top: 1em; }
.compare { width: 100%; margin-top: clamp(24px, 2.6vw, 56px); border-collapse: collapse; font-size: var(--fs-small); }
.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compare tbody { display: grid; gap: 12px; }
.compare tr {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 20px 18px; border-radius: 4px;
  background: radial-gradient(90% 80% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--wine-bg, var(--ink-2));
}
.compare th[scope="row"] { grid-column: 1 / -1; text-align: left; font-weight: 400; }
.compare th[scope="row"] a { display: block; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(24px, 6.6vw, 32px); line-height: 1; color: var(--cream); }
.compare th[scope="row"] .style-line { font-size: .62em; margin-top: .25em; padding-left: 0; }
.compare .compare__name { display: block; }
.compare td { color: var(--cream); }
.compare td::before { content: attr(data-label); display: block; margin-bottom: .3em; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: rgba(242,235,221,.62); }

/* ---------- Photo hero (/family/, /abkhazia/): the H1 centred over the photograph, which settles into ink ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; min-height: min(78svh, 720px); text-align: center; }
.page-hero__media { position: absolute; inset: 0; margin: 0; pointer-events: none; } /* no z-index: the picture sits under the scrims, the caption over them */
.page-hero__media picture { position: absolute; inset: 0; z-index: -2; display: block; background: var(--ink-2); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.page-hero::before { /* a centre-weighted scrim, so the title reads */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 55%, rgba(14,13,11,.55), rgba(14,13,11,.25) 70%, rgba(14,13,11,.1));
}
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: var(--bleed); pointer-events: none;
  background: var(--ink); -webkit-mask-image: var(--fade-up); mask-image: var(--fade-up);
}
.page-hero__inner {
  display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 20px;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(36px, 7vh, 96px);
}
.page-hero .crumbs ol { justify-content: center; }
.page-hero__title { align-self: center; max-width: 18ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
/* hero caption: under the photograph on phones (a band is kept free below it), over it on desktop */
.page-hero__caption {
  position: absolute; z-index: 1; top: 100%; left: 0; right: 0; padding: 14px var(--gutter) 0; text-align: center;
  font-size: var(--fs-label); line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,235,221,.62);
}
.page-hero--captioned { --cap-h: 64px; padding-bottom: var(--cap-h); }
.page-hero--captioned .page-hero__media, .page-hero--captioned::before, .page-hero--captioned::after { bottom: var(--cap-h); }
.page-hero--plain { min-height: 0; }
.page-hero--plain::before, .page-hero--plain::after { display: none; }
.page-hero--plain .page-hero__inner { padding-bottom: 0; }

/* ---------- Timeline (/family/): one column, a thin gold rule on the left ---------- */
.timeline { --rule-x: 4px; --indent: 28px; position: relative; list-style: none; margin: 0; padding: 0; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--rule-x); width: 1px;
  background: linear-gradient(180deg, rgba(201,164,92,0), rgba(201,164,92,.7) 6%, rgba(201,164,92,.7) 94%, rgba(201,164,92,0));
}
.timeline__step { position: relative; display: flex; flex-direction: column; }
.timeline__step + .timeline__step { margin-top: clamp(64px, 7vw, 180px); }
.timeline__fig { position: relative; z-index: 1; margin: 0 calc(-1 * var(--gutter)) 32px; }
.timeline__fig picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); }
.timeline__fig img { width: 100%; height: 100%; object-fit: cover; }
.timeline__fig .ph__cap { padding-inline: var(--gutter); }
.timeline__media { position: relative; z-index: 1; margin-bottom: 32px; }
.timeline__gallery { margin-top: clamp(32px, 3vw, 72px); }
.timeline__text { padding-left: var(--indent); }
.timeline__title {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(28px, 2.6vw, 64px); line-height: 1; letter-spacing: -.005em; color: var(--cream); margin-bottom: clamp(16px, 1.4vw, 30px);
}
.timeline__title::before { /* the dot on the rule, level with the title */
  content: ""; position: absolute; left: calc(var(--rule-x) - 4px); margin-top: calc(.4em - 5px);
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid var(--gold);
}
.timeline__text .copy { max-width: 44ch; }
.timeline__text .copy + .copy { margin-top: 1em; }

/* ---------- People cards (only when the content has names and photographs) ---------- */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 28px; }
.people__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink-2); }
.people__name { margin-top: 12px; font-family: var(--font-display); font-size: clamp(22px, 1.6vw, 36px); line-height: 1.1; color: var(--cream); }
.people__role { color: var(--stone); font-size: var(--fs-small); }

/* ---------- The house mark read three ways (/family/): a snap row on phones ---------- */
.readings-block { text-align: center; }
.readings {
  display: flex; gap: 16px; margin: clamp(32px, 4vw, 100px) calc(-1 * var(--gutter)) 0; padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
}
.readings::-webkit-scrollbar { display: none; }
.readings__intro { margin: 1.2em auto 0; max-width: 52ch; color: var(--cream-2); text-wrap: pretty; }
.reading { flex: 0 0 min(78vw, 320px); display: grid; justify-items: center; align-content: start; gap: 18px; margin: 0; scroll-snap-align: center; }
.reading__mark { width: clamp(140px, 11vw, 260px); height: auto; overflow: visible; stroke-width: .32; color: var(--gold-2); }
.reading__mark g { opacity: .16; transition: opacity .6s var(--ease-out); }
.reading--tamga .reading__mark g.tamga,
.reading--glasses .reading__mark g.glasses,
.reading--bottle .reading__mark g.bottle { opacity: 1; }
.reading figcaption { max-width: 30ch; color: var(--stone); font-size: var(--fs-small); line-height: 1.6; }
.reading__name { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(22px, 1.6vw, 40px); line-height: 1.1; color: var(--cream); }

/* ---------- Closing block: text over the photograph, centred ---------- */
.page-close { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--section-y); text-align: center; }
.page-close__media { position: absolute; inset: 0; z-index: -1; background: var(--ink-2); }
.page-close__media img { width: 100%; height: 100%; object-fit: cover; }
.page-close__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,13,11,.55), rgba(14,13,11,.72));
}
.page-close::after { /* rises out of ink at the top */
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: var(--bleed); pointer-events: none;
  background: var(--ink); -webkit-mask-image: var(--fade-down); mask-image: var(--fade-down);
}
.page-close__inner { display: grid; justify-items: center; gap: clamp(28px, 2.4vw, 56px); padding-block: clamp(120px, 14vw, 300px) clamp(96px, 12vw, 280px); }
.page-close__title { max-width: 16ch; }
.page-close .page-links { margin-top: 0; }
.page-close .pill:not(.pill--solid) { background: rgba(14,13,11,.35); }

/* ---------- Text sections beside photographs (/abkhazia/ and the other text pages) ---------- */
.page-section { position: relative; isolation: isolate; padding-top: var(--section-y); }
.page-section--alt { background: var(--ink-2); padding-bottom: var(--section-y); }
.page-section--alt::before { /* ink eases into ink-2 at the top and back out at the bottom: no hard seams */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ink);
  -webkit-mask-image: var(--fade-down), var(--fade-up); mask-image: var(--fade-down), var(--fade-up);
  -webkit-mask-size: 100% var(--bleed); mask-size: 100% var(--bleed);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.page-section--alt + .page-section { padding-top: 0; }
.page-pair { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 72px); }
.page-pair__copy { display: flex; flex-direction: column; align-items: flex-start; }
.page-pair__copy .page-h2 { margin-bottom: .6em; }
.page-pair__copy .copy + .copy { margin-top: 1em; }
.page-pair__copy .grows__list { width: 100%; grid-template-columns: 1fr; margin-top: 28px; }
.page-pair__copy .page-links { margin-top: 28px; }
.page-pair__fig { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.page-pair__fig picture { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); }
.page-pair__fig img { width: 100%; height: 100%; object-fit: cover; }
.page-pair__fig picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(14,13,11,.45)); }
.page-pair__fig .ph__cap { padding-inline: var(--gutter); }
.files { margin-top: 24px; width: 100%; border-top: 1px solid rgba(242,235,221,.12); }
.files li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(242,235,221,.12); }
.files a { color: var(--cream); }
.files a:hover { color: var(--gold-2); }
.files__size { color: var(--stone); font-size: var(--fs-small); }

/* ---------- Article photographs (SCHEMA «Extension for articles»): figures with captions, pairs, galleries, facts strips ----------
   .ph ph--full | ph--tall | ph--pair | ph--gallery | ph--beside (.page-pair__fig) | ph--step (.timeline__fig); .ph__cap the caption */
:where(.ph) { margin: 0; min-width: 0; }   /* zero specificity: .page-pair__fig and .timeline__fig keep their own margins */
.ph picture { display: block; background: var(--ink-2); }
.ph img { display: block; width: 100%; height: auto; }
.ph.page-pair__fig img { height: 100%; object-fit: cover; }
body[data-page="sub"] .page-answer { hyphens: none; -webkit-hyphens: none; }
.ph__cap {
  margin-top: 12px; max-width: 60ch; font-size: var(--fs-label); font-weight: 500; line-height: 1.5;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(242,235,221,.62); text-wrap: pretty;
}
/* between paragraphs: margins on both sides; inside the flex column of .page-pair__copy they stretch */
:is(.page-pair__copy, .timeline__text, .page-lead) > :is(.ph, .ph-pair, .ph-gallery, .fact-strip) { margin-block: clamp(28px, 3vw, 72px); }
.page-pair__copy > :is(.ph, .ph-pair, .ph-gallery, .fact-strip) { align-self: stretch; }
:is(.page-pair__copy, .timeline__text) > .copy + :is(.ph, .ph-pair, .ph-gallery) + .copy { margin-top: 0; }
/* full: edge to edge on phones (the landing page's photo blocks), the container's width from tablets on */
.ph--full { margin-inline: calc(-1 * var(--gutter)); }
.ph--full img { max-height: 86svh; object-fit: cover; }
.ph--full .ph__cap { padding-inline: var(--gutter); }
/* tall: a portrait, centred, at most 560px wide */
.ph--tall { width: 100%; max-width: 560px; margin-inline: auto; }
.page-pair__copy > .ph--tall { align-self: center; }
.ph--tall .ph__cap { text-align: center; margin-inline: auto; }
/* pair: stacked on phones, side by side from tablets on */
.ph-pair { display: grid; gap: 28px; }
/* gallery: a horizontal snap row on phones */
.ph-gallery {
  display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
}
.ph-gallery::-webkit-scrollbar { display: none; }
.ph--gallery { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
.ph--gallery picture { aspect-ratio: 4 / 5; overflow: hidden; }
.ph--gallery img { height: 100%; object-fit: cover; }
.page-pair__copy > .ph-gallery { align-self: stretch; }
.page-media { display: grid; gap: clamp(28px, 3vw, 72px); margin-top: clamp(36px, 4vw, 96px); }
.page-media .page-links { margin-top: 0; }
/* facts strip: the figures large, the labels small, between hairlines */
.fact-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(242,235,221,.14); border-bottom: 1px solid rgba(242,235,221,.14);
}
.fact-strip__item { display: grid; align-content: start; gap: 6px; padding: 18px 0; min-width: 0; }
.fact-strip__n { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 8vw, 40px); line-height: 1; color: var(--cream); }
.fact-strip__label { font-size: var(--fs-label); line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,235,221,.62); overflow-wrap: anywhere; }
.page-pair--wide { max-width: none; }

/* ---------- Phones: long words break rather than push ---------- */
@media (max-width: 600px) {
  :is(.page-answer, .timeline__text .copy, .page-pair__copy .copy) { hyphens: auto; -webkit-hyphens: auto; }
  .page-h1 { font-size: clamp(30px, 8.6vw, 44px); } /* a long title stays on two lines at 360–430px, as on the landing page */
  .page-hero__title, .page-close h2, .page-close .page-h2 { max-width: none; } /* the hero and closing titles use the full width, so «Семья Ачба: четыре поколения» stays on two lines */
  .page-hero__title { font-size: clamp(26px, 7.6vw, 40px); }
  .page-h2 { font-size: clamp(28px, 8vw, 40px); }
}

/* ---------- Tablets ---------- */
@media (min-width: 601px) {
  .compare tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-pair__fig { margin-inline: 0; }
  .page-pair__copy .grows__list { grid-template-columns: 1fr 1fr; }
  .ph--full { margin-inline: 0; }
  .ph--full .ph__cap { padding-inline: 0; }
  .ph-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 40px); }
  .ph--pair picture { aspect-ratio: 4 / 5; overflow: hidden; }
  .ph--pair img { height: 100%; object-fit: cover; }
  .page-pair__fig .ph__cap { padding-inline: 0; }
  .fact-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---------- Desktop ---------- */
@media (min-width: 901px) {
  .page-h1 { font-size: clamp(56px, 5vw, 140px); }
  .page-h2 { font-size: clamp(40px, 3.4vw, 96px); }

  .others { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 28px); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .others--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .others > li { flex: none; }
  .wine-card { padding: clamp(28px, 2.4vw, 48px) 14px clamp(24px, 2vw, 40px); font-size: clamp(22px, 1.7vw, 44px); }
  .wine-card__img { height: clamp(240px, 21vw, 520px); margin-bottom: 22px; }
  .others--six .wine-card { font-size: clamp(20px, 1.45vw, 40px); }
  .others--six .wine-card__img { height: clamp(220px, 17vw, 440px); }

  /* /wines/: a real table */
  .page-head .page-answer, .page-head__copy { max-width: 60ch; }
  .compare thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
  .compare tbody { display: table-row-group; }
  .compare tr { display: table-row; background: none; }
  .compare th, .compare td { padding: clamp(18px, 1.4vw, 32px) clamp(12px, 1.4vw, 32px) clamp(18px, 1.4vw, 32px) 0; border-bottom: 1px solid rgba(242,235,221,.12); text-align: left; vertical-align: baseline; }
  .compare thead th { font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,235,221,.62); border-bottom-color: rgba(242,235,221,.2); }
  .compare th[scope="row"] { position: relative; padding-left: 28px; }
  .compare th[scope="row"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; translate: 0 -50%; border-radius: 50%; background: var(--wine-bg); box-shadow: 0 0 0 1px rgba(242,235,221,.25); }
  .compare th[scope="row"] a { font-size: clamp(24px, 1.8vw, 44px); }
  .compare th[scope="row"] a:hover { color: var(--gold-2); }
  .compare td::before { display: none; }

  /* photo hero */
  .page-hero { min-height: min(92svh, 1200px); }
  .page-hero__title { max-width: 20ch; }

  /* timeline: photograph and text alternate beside the rule */
  .timeline { --rule-x: 0px; --indent: 0px; padding-left: clamp(56px, 5vw, 120px); }
  .timeline__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(48px, 6vw, 160px); }
  .timeline__fig { grid-column: 1; grid-row: 1; margin: 0; aspect-ratio: 4 / 3; }
  .timeline__text { grid-column: 2; grid-row: 1; }
  .timeline__step--flip .timeline__fig { grid-column: 2; }
  .timeline__step--flip .timeline__text { grid-column: 1; }
  .timeline__title::before { left: calc(clamp(56px, 5vw, 120px) * -1 - 4px); }

  .people { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 120px); margin-inline: auto; padding-inline: 0; overflow: visible; max-width: 1500px; }
  .reading { flex: none; }

  .page-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 160px); align-items: center; }
  .page-pair__copy { padding-right: clamp(0px, 3vw, 80px); }
  .page-pair--flip .page-pair__fig { order: -1; }
  .page-pair--flip .page-pair__copy { padding-right: 0; padding-left: clamp(0px, 2vw, 40px); }
  .page-pair--solo { grid-template-columns: minmax(0, 1fr); max-width: 60ch; }
  .page-pair--wide { max-width: none; }   /* an article column: the text keeps its measure (.copy 52ch), the photographs take the container */
  .page-pair__fig picture { aspect-ratio: 5 / 4; }
  .page-pair { align-items: start; }

  /* article photographs: galleries become a row of equal-height figures */
  .ph--pair picture { aspect-ratio: 1; }   /* two portraits side by side would run taller than the screen */
  .ph-gallery { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 40px); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .ph--gallery { flex: none; }
  .fact-strip__n { font-size: clamp(40px, 3vw, 80px); }
  .fact-strip__item { padding: clamp(22px, 2vw, 44px) 0; }
  .timeline__media { grid-column: 1; grid-row: 1; margin: 0; }
  .timeline__step--flip .timeline__media { grid-column: 2; }
  .timeline__fig .ph__cap { padding-inline: 0; }
  .timeline__gallery { grid-column: 1 / -1; grid-row: 2; }
  /* hero caption over the photograph, bottom right */
  .page-hero--captioned { --cap-h: 0px; }
  .page-hero__caption { top: auto; bottom: clamp(18px, 3vh, 44px); left: auto; padding: 0 var(--gutter); max-width: 60ch; text-align: right; color: rgba(242,235,221,.8); }
}

/* phones: stacked closing pills share one width; a paragraph can never outgrow its column */
@media (max-width: 600px) {
  .page-links--centre .pill, .page-links--closing .pill { width: min(100%, 300px); justify-content: center; }
  .page-pair__copy > *, .page-section p, .page-answer { min-width: 0; max-width: 100%; }
  .page-section .copy, .page-answer { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Wine page /wines/<slug>/ — «Стол» (option E, site/dev/wine-options/e/): the wine at the table.
   The table photograph (hero_scene), the bottle on its colour with the facts set like a wine list, the courses,
   the food strip (pairing.plates), the evening, the question, the shop and the other wines on one shelf.
   Everything is scoped to .table-page (12_Pages/templates/wine.html). Spacing keeps the 8px rhythm.
   Phones up to 700px (as the option), desktop from 701px.
   ========================================================================== */
.table-page {
  --t-h2: clamp(32px, 2.6vw + 8px, 64px);
  --t-gap: clamp(24px, 4vw, 96px);
  --t-copy: clamp(16px, .35vw + 13px, 21px);
  background: var(--ink);
  overflow-x: clip;
}
.table-page .t-h2 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-h2);
  line-height: 1.02; letter-spacing: -.005em; color: var(--cream); text-wrap: balance;
}
.table-page .copy { max-width: 46ch; color: var(--stone); font-size: var(--t-copy); text-wrap: pretty; }
.table-page .copy + .copy { margin-top: 1em; }
.table-page .copy a { color: var(--gold-2); border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; }
.table-page .copy a:hover { color: var(--cream); }
body[data-page="sub"] main .t-break { display: block; margin-top: .5em; }   /* build_pages.py phone_breaks: one sentence per block */

/* ---------- 1. The table (hero): the photograph on the right fading into ink, the lockup beside it ---------- */
.t-hero {
  position: relative; isolation: isolate;
  min-height: max(640px, 100svh);
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--ink);
}
.t-hero__photo, .t-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-hero__photo { z-index: -2; display: block; }
.t-hero__photo img {
  object-fit: cover; object-position: 42% 46%;
  filter: saturate(1.02) sepia(.1) contrast(1.03) brightness(.94);   /* warm grading: a touch of amber, never orange */
}
/* reading shade: ink from the lower left, so the lockup sits on the table's shadow */
.t-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 12% 100%, rgba(14,13,11,.86) 0%, rgba(14,13,11,.55) 38%, rgba(14,13,11,0) 70%),
    linear-gradient(to bottom, rgba(14,13,11,.42) 0%, rgba(14,13,11,0) 22%);
}
/* seam: the photograph dissolves into the ink before the wine's colour arrives */
.t-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: var(--bleed); background: var(--ink);
  -webkit-mask-image: var(--fade-up); mask-image: var(--fade-up);
}
.t-hero__top { padding-top: calc(var(--nav-h) * .8 + 16px); }
.t-hero .crumbs ol { color: rgba(242,235,221,.7); }
.t-hero .crumbs a { color: rgba(242,235,221,.86); }
.t-hero__copy { grid-row: 3; padding-bottom: clamp(56px, 9vh, 120px); text-shadow: 0 2px 24px rgba(14,13,11,.35); }
.t-lockup {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(56px, 6.6vw + 12px, 168px); line-height: .9; letter-spacing: -.01em; color: var(--cream);
}
.t-lockup__name { display: block; }
.t-lockup .style-line { font-size: .34em; margin-top: .24em; }
.t-hero__note { margin-top: clamp(16px, 1.6vw, 32px); max-width: 30ch; font-size: clamp(17px, .6vw + 12px, 24px); color: var(--cream-2); }
.t-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(24px, 2.4vw, 40px); }
.t-hero__actions .pill { background: rgba(14,13,11,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.t-hero__actions .pill:hover { background: var(--gold); }
.t-hero--plain { min-height: 0; padding-bottom: 0; }

/* ---------- 2. The bottle on its colour, the facts set like a wine list ---------- */
.t-bottle {
  position: relative; isolation: isolate; margin-top: -2px;
  background: var(--wine-bg);
  padding-top: calc(var(--bleed) * .55);
  padding-bottom: calc(var(--bleed-long) * .7);
}
/* the wine's colour arrives from the ink and leaves into it */
.t-bottle::before, .t-bottle::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; background: var(--ink); }
.t-bottle::before { top: -2px; height: var(--bleed); -webkit-mask-image: var(--fade-down); mask-image: var(--fade-down); }
.t-bottle::after { bottom: 0; height: var(--bleed-long); -webkit-mask-image: var(--fade-up); mask-image: var(--fade-up); }
.t-bottle__grid, .t-course__inner, .t-pairing__head, .t-label__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--t-gap);
}
.t-bottle__grid, .t-label__grid { align-items: center; }
.t-course__inner, .t-pairing__head { align-items: start; }
.t-bottle__fig { position: relative; display: flex; justify-content: center; margin: 0; }
.t-bottle__fig::before { /* lamplight behind the bottle */
  content: ""; position: absolute; left: 50%; top: 46%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(227,198,134,.13), rgba(227,198,134,.04) 55%, rgba(227,198,134,0));
}
.t-bottle__fig::after { /* the bottle's shadow on the table */
  content: ""; position: absolute; left: 50%; bottom: 1.2%; width: 46%; height: 24px; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(10,8,12,.62), rgba(10,8,12,0));
}
.t-bottle__fig img { height: clamp(460px, 74vh, 760px); width: auto; }
.t-answer {
  max-width: 36ch;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 1.3vw + 12px, 40px); line-height: 1.22; color: var(--cream);
}
.t-facts { margin: clamp(32px, 3.4vw, 64px) 0 0; max-width: 624px; border-top: 1px solid rgba(227,198,134,.34); }
.t-facts__row { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(242,235,221,.1); }
.t-facts dt {
  flex: 1 1 auto; display: flex; align-items: baseline; gap: 16px; min-width: 0; white-space: nowrap;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,235,221,.62);
}
.t-facts dt::after { /* the dotted leader of a restaurant's wine list */
  content: ""; flex: 1 1 auto; min-width: 24px; height: 1px; transform: translateY(-.3em);
  background-image: radial-gradient(circle, rgba(227,198,134,.55) .8px, transparent 1.2px);
  background-size: 7px 2px; background-repeat: repeat-x;
}
.t-facts dd {
  margin: 0; flex: 0 1 auto; text-align: right;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, .5vw + 16px, 28px); line-height: 1.15; color: var(--cream);
}
.t-facts__row--serve dd { color: var(--gold-2); }

/* ---------- 3. The courses: the headed sections, the questions ---------- */
.t-course { position: relative; padding-block: clamp(56px, 7vw, 160px); }
.t-course--first { padding-top: 0; }
.t-label__fig { margin: 0; }
.t-label__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; }
.t-label__copy .copy:first-of-type { margin-top: clamp(16px, 1.8vw, 32px); }
.t-q {
  margin-bottom: 16px;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, .9vw + 16px, 40px); line-height: 1.12; color: var(--cream);
}
.t-course__text .copy + .t-q { margin-top: clamp(32px, 3vw, 56px); }
.t-labels .labels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 40px); }
.t-labels .labels__fig { margin: 0; }
.t-labels .labels__fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--ink-2); }
.t-labels .labels__fig figcaption { margin-top: 16px; font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: rgba(242,235,221,.72); }

/* ---------- 4. The pairing: the food strip, every other plate a little lower ---------- */
.t-pairing { position: relative; isolation: isolate; padding-block: clamp(48px, 6vw, 144px) clamp(40px, 4vw, 96px); background: var(--ink-2); }
.t-pairing::before, .t-pairing::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; height: var(--bleed); background: var(--ink); }
.t-pairing::before { top: 0; -webkit-mask-image: var(--fade-down); mask-image: var(--fade-down); }
.t-pairing::after { bottom: 0; -webkit-mask-image: var(--fade-up); mask-image: var(--fade-up); }
.t-pairing__head { margin-bottom: clamp(40px, 4.4vw, 96px); }
.t-strip {
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(16px, 1.3vw, 32px);
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) clamp(32px, 3vw, 64px); list-style: none;
}
.t-dish figure { margin: 0; }
.t-dish img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink);
  filter: saturate(1.03) sepia(.06); transition: filter 1.2s var(--ease-out);
}
.t-dish:hover img { filter: saturate(1.1) sepia(.03) brightness(1.04); }
.t-dish figcaption {
  display: flex; align-items: baseline; gap: 12px; margin-top: 16px;
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(19px, .45vw + 14px, 26px); line-height: 1.15; color: var(--cream-2);
}
.t-dish figcaption::before { content: ""; flex: 0 0 24px; height: 1px; background: var(--gold); transform: translateY(-.32em); }
.t-gallery { padding-bottom: 0; }

/* ---------- 5. The evening: the scene dissolving into ink ---------- */
.t-scene { position: relative; margin: 0; }
.t-scene img {
  display: block; width: 100%; height: clamp(420px, 82vh, 900px); object-fit: cover; filter: sepia(.06) saturate(1.02);
  -webkit-mask-image: var(--fade-up), linear-gradient(#000, #000), var(--fade-down);
          mask-image: var(--fade-up), linear-gradient(#000, #000), var(--fade-down);
  -webkit-mask-size: 100% 24%, 100% 54%, 100% 24%; mask-size: 100% 24%, 100% 54%, 100% 24%;
  -webkit-mask-position: top, center, bottom; mask-position: top, center, bottom;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.t-scene figcaption {
  position: relative; margin-top: -2.6em;
  font-family: var(--font-display); font-style: italic; font-size: clamp(18px, .4vw + 14px, 24px); color: var(--cream-2);
}
.t-scene--tall { max-width: 560px; margin-inline: auto; padding-block: clamp(32px, 4vw, 96px) 0; }
.t-scene--tall img { height: auto; max-height: 86svh; aspect-ratio: 2 / 3; -webkit-mask-image: none; mask-image: none; }
.t-scene--tall figcaption { margin-top: 16px; text-align: center; }

/* ---------- 6. Where to find it: «Магнит» ---------- */
.t-where { padding-block: clamp(40px, 5vw, 120px) clamp(56px, 7vw, 160px); }
.t-where__inner {
  display: grid; justify-items: center; gap: 24px; text-align: center;
  padding-block: clamp(40px, 4vw, 88px);
  border-top: 1px solid rgba(227,198,134,.22); border-bottom: 1px solid rgba(227,198,134,.22);
}
.t-where .copy { max-width: none; }

/* ---------- 7. The other wines, standing on one shelf line ---------- */
.t-shelf { padding-bottom: clamp(64px, 7vw, 160px); }
.t-shelf .t-h2 { margin-bottom: clamp(32px, 3.6vw, 72px); }
.t-shelf__row {
  --bottle-h: clamp(220px, 22vw, 380px);
  display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 56px);
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); list-style: none;
}
.t-shelf__row li { position: relative; flex: 0 1 224px; }
.t-bottle-link { display: flex; flex-direction: column; align-items: center; text-align: center; }
.t-bottle-link__img {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  width: 100%; height: var(--bottle-h); padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(242,235,221,.16);
}
.t-bottle-link__img::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 140%; height: 90%; transform: translateX(-50%); opacity: 0;
  background: radial-gradient(closest-side at 50% 70%, var(--tint), transparent); transition: opacity .8s var(--ease-out);
}
.t-bottle-link__img::after {
  content: ""; position: absolute; left: 50%; bottom: 8px; width: 46%; height: 12px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.t-bottle-link__img img { position: relative; z-index: 1; height: 100%; width: auto; max-width: none; transition: transform .8s var(--ease-out); }
.t-bottle-link:is(:hover, :focus-visible) .t-bottle-link__img img { transform: translateY(-8px); }
.t-bottle-link:is(:hover, :focus-visible) .t-bottle-link__img::before { opacity: .9; }
.t-bottle-link__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, .5vw + 14px, 26px); line-height: 1.1; color: var(--cream); }
.t-bottle-link .style-line { margin-top: .3em; padding: 0; font-size: clamp(16px, .35vw + 12px, 21px); }
.t-shelf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(48px, 5vw, 96px); }

@media (min-width: 701px) {
  .t-hero__photo { left: 34%; width: auto; }
  .t-hero__photo img {
    object-position: 30% 50%;
    -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .04) 7%, rgb(0 0 0 / .14) 13%, rgb(0 0 0 / .3) 19%, rgb(0 0 0 / .5) 25%, rgb(0 0 0 / .7) 31%, rgb(0 0 0 / .86) 37%, rgb(0 0 0 / .96) 43%, rgb(0 0 0) 50%);
            mask-image: linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .04) 7%, rgb(0 0 0 / .14) 13%, rgb(0 0 0 / .3) 19%, rgb(0 0 0 / .5) 25%, rgb(0 0 0 / .7) 31%, rgb(0 0 0 / .86) 37%, rgb(0 0 0 / .96) 43%, rgb(0 0 0) 50%);
  }
  .t-hero::before { background: linear-gradient(to bottom, rgba(14,13,11,.36) 0%, rgba(14,13,11,0) 20%); }
  .t-hero__copy { align-self: center; padding-block: 0 clamp(40px, 8vh, 112px); }
  .t-hero__copy > * { max-width: 44vw; }
  .t-dish:nth-child(even) { transform: translateY(clamp(24px, 2.4vw, 56px)); }   /* a quiet table rhythm */
}
@media (max-width: 1100px) and (min-width: 701px) {
  .t-strip { grid-template-columns: repeat(var(--n, 5), minmax(200px, 1fr)); overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 700px) {
  .table-page { --t-h2: clamp(28px, 8vw, 40px); --t-copy: 16px; }
  .t-hero { --photo-h: min(124vw, 76svh); display: block; min-height: 0; }
  .t-hero__photo { position: relative; inset: auto; height: var(--photo-h); }
  .t-hero__photo img { object-position: 50% 62%; }
  .t-hero::before { bottom: auto; height: var(--photo-h); background: linear-gradient(to bottom, rgba(14,13,11,.5) 0%, rgba(14,13,11,0) 22%); }
  .t-hero::after { height: calc(var(--photo-h) * .42); bottom: auto; top: calc(var(--photo-h) * .58 + 2px); }
  .t-hero__top { position: absolute; left: 0; right: 0; top: 0; }
  .t-hero__copy { position: relative; margin-top: -72px; padding-bottom: 40px; }
  .t-hero--plain .t-hero__top { position: relative; }
  .t-hero--plain .t-hero__copy { margin-top: 24px; }
  .t-hero .crumbs li { display: none; }
  .t-hero .crumbs li:nth-last-child(2) { display: inline-flex; }
  .t-hero .crumbs li:nth-last-child(2)::before { content: "‹"; }
  .t-hero__actions .pill { padding: 1em 1.6em; }

  .t-bottle { padding-top: 8px; }
  .t-bottle__grid, .t-course__inner, .t-pairing__head, .t-label__grid { grid-template-columns: 1fr; gap: 24px; }
  .t-bottle__fig img { height: clamp(360px, 62svh, 520px); }
  .t-answer { font-size: 20px; }
  .t-facts__row--wide { flex-direction: column; align-items: flex-start; gap: 8px; }
  .t-facts__row--wide dt::after { display: none; }
  .t-facts__row--wide dd { text-align: left; }
  .t-facts dt { letter-spacing: .14em; }

  .t-strip {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .t-strip::-webkit-scrollbar { display: none; }
  .t-dish { flex: 0 0 74vw; scroll-snap-align: start; }
  .t-dish:last-child { margin-right: var(--gutter); }
  .t-dish figcaption { margin-top: 12px; }

  .t-label__fig { margin-inline: calc(var(--gutter) * -1); }
  .t-label__fig img { aspect-ratio: 1 / 1; }
  .t-scene img { height: 72svh; }
  .t-scene--tall img { height: auto; }

  .t-shelf__row {
    --bottle-h: 232px;
    justify-content: flex-start; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .t-shelf__row::-webkit-scrollbar { display: none; }
  .t-shelf__row li { flex: 0 0 40vw; scroll-snap-align: start; }
  .t-shelf__row li:last-child { margin-right: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .t-dish img, .t-bottle-link__img img, .t-bottle-link__img::before { transition: none; }
}