/* ==========================================================================
   Trái Tim Sư Tử — Phùng Khánh Linh · eMagazine
   Layout is measured from a 2000px-wide Figma frame: --u = 1 design px.
   ========================================================================== */

@font-face { font-family: "Domaine"; src: url("../fonts/SVN-DomaineText-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Domaine"; src: url("../fonts/SVN-DomaineText-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Domaine"; src: url("../fonts/SVN-DomaineText-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cossette"; src: url("../fonts/SVN-CossetteTexte-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cossette"; src: url("../fonts/SVN-CossetteTexte-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #eaeaea;
  --ink: #000;
  --paper: #eaeaea;
  --card: #d9d9d9;
  --ph: #c4c4c4;
  --u: calc(100vw / 2000);
  --gap: max(60px, calc(100 * var(--u)));
  --ease: cubic-bezier(.19, 1, .22, 1);
  --serif: "IBM Plex Serif", Georgia, serif;
  --display: "Domaine", "IBM Plex Serif", Georgia, serif;
  --label: "Cossette", "IBM Plex Serif", sans-serif;
  /* 1% of the viewport height. main.js freezes these to px on load (and only updates them on
     rotation), so in-app browsers (Telegram, Facebook…) whose toolbars resize the page don't
     re-layout everything while scrolling. */
  --svh: 1vh;
  --lvh: 1vh;
}
@supports (height: 1svh) { :root { --svh: 1svh; --lvh: 1lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
blockquote, figure, h1, h2, h3, p, dl, dd { margin: 0; }
.article { overflow: clip; } /* clip, not hidden: keeps position:sticky working */

/* ---------- Black strip above the viewport (fills the area under in-app browser top bars) ---------- */
.top-cap {
  position: fixed; left: 0; right: 0; bottom: 100%;
  height: 100vh; height: 100lvh;
  background: #000;
  z-index: 2147483000; pointer-events: none;
}

/* ---------- Grey placeholder until the image has loaded ---------- */
.ph { position: relative; overflow: hidden; background: var(--ph); }
.ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: ph-shimmer 1.5s linear infinite;
  transition: opacity .6s;
}
.ph picture { display: contents; }
.ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.ph.is-loaded { background: transparent; }
.ph.is-loaded::after { opacity: 0; animation: none; }
.ph.is-loaded img { opacity: 1; }
html:not(.js) .ph img { opacity: 1; }
@keyframes ph-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* ---------- Parallax: the image is taller than its frame and slides inside it ---------- */
.ph > canvas.water { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Photo protection: no drag, no long-press "save image" ---------- */
img, canvas.water { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------- Photographer logo (bottom-right of the whole-frame-parallax photos + lightbox) ---------- */
:root { --wm: url("data:image/svg+xml,%3Csvg width='26' height='133' viewBox='0 0 26 133' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.5'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.0918 128.518C15.8042 128.071 16.6466 126.835 16.6466 124.811C16.6466 123.522 16.1846 122.523 15.2877 121.865L16.9186 119.131C18.8486 120.419 19.8267 122.339 19.8267 124.863C19.8267 127.046 19.1472 128.781 17.7883 130.096C16.4294 131.411 14.7173 132.068 12.6514 132.068C10.613 132.068 8.92787 131.411 7.5417 130.122C6.15585 128.834 5.47607 127.177 5.47607 125.126C5.47607 123.18 6.15585 121.603 7.5417 120.367C8.92787 119.104 10.613 118.473 12.6514 118.473C13.0318 118.473 13.5211 118.526 14.0918 118.605L14.0918 128.518ZM11.374 121.865C9.5531 122.26 8.62888 123.338 8.62888 125.126C8.62888 126.993 9.5531 128.15 11.374 128.571L11.374 121.865Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1561 0.134109L14.1561 10.2305C15.8647 9.775 16.7053 8.51665 16.7053 6.45423C16.7053 5.14223 16.2444 4.12444 15.3494 3.45486L16.9768 0.669834C18.9024 1.98216 19.8784 3.93692 19.8784 6.50791C19.8784 8.73069 19.2004 10.4982 17.8445 11.8374C16.4886 13.1763 14.7803 13.8458 12.7189 13.8458C10.685 13.8458 9.00357 13.1762 7.62044 11.8642C6.23765 10.5519 5.55937 8.86454 5.55937 6.77594C5.55937 4.79403 6.23765 3.18715 7.62044 1.9285C9.00357 0.643001 10.685 0.000256753 12.7189 0.000256777C13.0985 0.000256782 13.5866 0.0539273 14.1561 0.134109ZM8.70524 6.77594C8.70524 8.67735 9.62743 9.8555 11.4443 10.2842L11.4443 3.45486C9.62743 3.85674 8.70524 4.95471 8.70524 6.77594ZM11.6072 18.8805C10.7122 18.8805 10.0343 19.1217 9.51892 19.6034C9.05766 20.0586 8.81375 20.7017 8.81375 21.5316C8.81375 23.4867 9.92575 24.4777 12.1766 24.4777L19.4988 24.4777L19.4988 27.9323L5.93932 27.9323L5.93932 24.4777L7.45817 24.4777C6.18323 23.6474 5.55937 22.3354 5.55937 20.4873C5.55937 19.0146 6.04784 17.8093 7.051 16.872C8.05449 15.9079 9.4104 15.4259 11.1732 15.4259L19.4988 15.4259L19.4988 18.8805L11.6072 18.8805ZM4.31197 32.1635C4.31197 32.726 4.09527 33.2346 3.68811 33.6633C3.25438 34.0649 2.73936 34.2792 2.16959 34.2792C1.60015 34.2792 1.0848 34.0649 0.651074 33.6633C0.217353 33.2346 9.83285e-07 32.726 9.89994e-07 32.1635C9.97018e-07 31.5744 0.217353 31.0655 0.651074 30.6371C1.0848 30.2352 1.60015 30.0212 2.16959 30.0212C2.73936 30.0212 3.25438 30.2352 3.68811 30.6371C4.09527 31.0655 4.31197 31.5744 4.31197 32.1635ZM17.1662 46.3304L9.22092 40.6799L9.22092 46.0627L5.93932 46.0627L5.93932 36.02L8.27152 36.02L16.2175 41.6974L16.2175 35.7523L19.4988 35.7523L19.4988 46.3304L17.1662 46.3304ZM17.8989 51.8203C19.2276 52.8649 19.8784 54.3108 19.8784 56.1854C19.8784 57.9801 19.2004 59.5064 17.8173 60.7919C16.4342 62.0506 14.7259 62.6933 12.7189 62.6933C10.7394 62.6933 9.03077 62.0506 7.64765 60.7919C6.26453 59.5064 5.55937 57.9801 5.55937 56.1854C5.55937 54.3108 6.21011 52.8649 7.53914 51.8203L5.93932 51.8203L5.93932 48.3657L19.4988 48.3657L19.4988 51.8203L17.8989 51.8203ZM9.97985 52.8914C9.2478 53.5879 8.89538 54.4715 8.89538 55.5429C8.89538 56.6141 9.2478 57.4977 9.97985 58.1941C10.685 58.8902 11.6072 59.2384 12.7189 59.2384C13.8309 59.2384 14.7531 58.8902 15.4851 58.1941C16.1903 57.4977 16.543 56.6141 16.543 55.5429C16.543 54.4715 16.1903 53.5879 15.4851 52.8914C14.7531 52.1685 13.8309 51.8203 12.7189 51.8203C11.6072 51.8203 10.685 52.1685 9.97985 52.8914ZM25.3024 71.4503C25.3024 74.4765 24.1904 76.5923 21.9939 77.7973L20.2852 74.8515C21.5598 74.182 22.1837 73.0303 22.1837 71.3433C22.1837 70.2453 21.885 69.3882 21.3159 68.7723C20.7465 68.1564 19.9056 67.835 18.848 67.835L17.3839 67.835C18.7667 68.8525 19.4443 70.2721 19.4443 72.1199C19.4443 74.0213 18.7667 75.6013 17.4377 76.8868C16.0546 78.1455 14.4275 78.7882 12.5019 78.7882C10.5765 78.7882 8.9498 78.1455 7.59323 76.86C6.23765 75.5748 5.55937 73.9944 5.55937 72.1199C5.55937 70.2721 6.23765 68.8525 7.62044 67.835L5.93932 67.835L5.93932 64.4606L18.848 64.4606C20.936 64.4606 22.5364 65.157 23.6481 66.5227C24.7598 67.8887 25.3024 69.5224 25.3024 71.4503ZM9.87166 68.9061C9.1665 69.6026 8.81375 70.4862 8.81375 71.5841C8.81375 72.6556 9.1665 73.566 9.87166 74.2893C10.5493 74.9854 11.4174 75.3336 12.5019 75.3336C13.5866 75.3336 14.482 74.9854 15.1599 74.2625C15.8647 73.5661 16.2175 72.6824 16.2175 71.5841C16.2175 70.4862 15.8647 69.6026 15.1599 68.9061C14.482 68.1832 13.5866 67.835 12.5019 67.835C11.4174 67.835 10.5493 68.1832 9.87166 68.9061ZM17.8989 84.0104C19.2276 85.0547 19.8784 86.5009 19.8784 88.3754C19.8784 90.1698 19.2004 91.6965 17.8173 92.9817C16.4342 94.2403 14.7259 94.8831 12.7189 94.8831C10.7394 94.8831 9.03077 94.2403 7.64765 92.9817C6.26453 91.6965 5.55937 90.1698 5.55937 88.3754C5.55937 86.5009 6.21011 85.0547 7.53914 84.0104L5.93932 84.0104L5.93932 80.5558L19.4988 80.5558L19.4988 84.0104L17.8989 84.0104ZM9.97985 85.0815C9.2478 85.7779 8.89538 86.6615 8.89538 87.7327C8.89538 88.8038 9.2478 89.6878 9.97985 90.3842C10.685 91.0803 11.6072 91.4285 12.7189 91.4285C13.8309 91.4285 14.7531 91.0803 15.4851 90.3842C16.1903 89.6878 16.543 88.8038 16.543 87.7327C16.543 86.6615 16.1903 85.7779 15.4851 85.0815C14.7531 84.3583 13.8309 84.0104 12.7189 84.0104C11.6072 84.0104 10.685 84.3583 9.97985 85.0815ZM7.18672 100.507L16.0001 105.783L16.0001 106.211L7.2136 111.487L19.4988 111.487L19.4988 115.183L0.515351 115.183L0.515351 111.38L9.49171 105.997L0.515351 100.641L0.515351 96.8378L19.4988 96.8378L19.4988 100.507L7.18672 100.507ZM19.4988 30.4228L19.4988 33.8774L5.93932 33.8774L5.93932 30.4228L19.4988 30.4228Z' fill='white'/%3E%3C/g%3E%3C/svg%3E"); }
[data-wm]::before, .lightbox__frame.has-wm::after {
  content: ""; position: absolute; z-index: 3; right: 20px; bottom: 20px;
  height: min(100px, 26%); aspect-ratio: 26 / 133;
  background: var(--wm) center / contain no-repeat;
  pointer-events: none;
}
[data-float] { will-change: transform; }
/* floating frames drift up to --fl × viewport height: keep that much air between them and text */
.s58__pair { margin-top: calc(11 * var(--svh) + 30 * var(--u)); }
.s62 { margin-top: calc(16 * var(--svh)); }
.bigimg { margin-top: calc(163 * var(--u) + 8 * var(--svh)); }
[data-parallax] img, [data-parallax] canvas.water {
  position: absolute; left: 0; top: -12%;
  width: 100%; height: 124%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
/* WebGL water layer: same box as the photo, fades in once its first frame is drawn */
canvas.water { display: block; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
canvas.water.is-ready { opacity: 1; }

/* ---------- Scroll reveal ---------- */
/* blur → sharp, slow */
html.js [data-reveal] {
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(0, 28px, 0);
  transition: opacity 1.33s cubic-bezier(.25,.6,.3,1), filter 1.47s cubic-bezier(.25,.6,.3,1), transform 1.54s var(--ease);
  transition-delay: var(--rd, 0s);
}
html.js [data-reveal].is-in { opacity: 1; filter: blur(0); transform: none; }

/* ---------- Line-by-line quote reveal (spans injected by JS) ---------- */
.js-lines .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .18em 0 .06em; margin: -.18em 0 -.06em; }
.js-lines .w > i {
  display: inline-block; font-style: inherit;
  opacity: 0; filter: blur(8px); transform: translate3d(0, 100%, 0);
  transition: transform 1.2s var(--ease), opacity 1.05s ease, filter 1.2s ease;
  transition-delay: var(--d, 0s);
}
.js-lines.is-in .w > i { opacity: 1; filter: blur(0); transform: none; }
@media (hover: none) {
  .js-lines .w > i { filter: none; transition: transform 1.05s var(--ease), opacity .9s ease; transition-delay: var(--d, 0s); }
}

/* ---------- Custom cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #fff; mix-blend-mode: difference;
  pointer-events: none; display: none;
  align-items: center; justify-content: center;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), opacity .3s;
}
.cursor span {
  font: 400 8px/1.15 var(--label); letter-spacing: .02em; text-transform: uppercase;
  color: #000; text-align: center; white-space: normal; width: 36px;
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .45s var(--ease);
}
.cursor.is-zoom { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.cursor.is-zoom span { opacity: 1; transform: none; }
.cursor.is-hidden { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor .cursor { display: flex; }
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}

/* ---------- Shared type ---------- */
.label {
  display: inline-block;
  font: 400 13px/0.9 var(--serif);
  text-transform: uppercase;
}
.label--light { color: #fcfcfc; }
.quote {
  font-family: var(--display); font-weight: 300;
  font-size: max(20px, calc(36 * var(--u)));
  line-height: 1.31;
  color: #030507;
}
.quote p + p { margin-top: 1.31em; }
.quote em { font-style: italic; }
.quote strong { font-weight: 400; }
.quote--it { font-style: italic; }
.quote--light { color: #fcfcfc; }

/* ---------- HERO + intro sequence ----------
   JS adds .st-photo → .st-logo → .st-title to .hero; scroll stays locked until the title is in */
.hero {
  position: relative;
  height: calc(125 * var(--svh));   /* taller than one screen */
  min-height: 700px;
  background: #000;
  color: var(--paper);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background: #000; }
.hero__bg::after { display: none; }
.hero__bg img, .hero__bg canvas.water { top: -6%; height: 112%; }
.hero__logo {
  position: absolute; left: 50%; top: calc(50 * var(--svh)); z-index: 2;  /* centred in the first screen */
  width: max(96px, calc(126 * var(--u))); height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__title {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: min(calc(795 * var(--u)), 86vw);
  min-width: 320px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__title img { width: 100%; height: auto; }
.hero::after {                      /* fade the hero photo into the black intro below */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 32%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, #000 100%);
}
.hero__credits { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(28px, calc(35 * var(--u))); }

html.js .hero__bg { opacity: 0; transform: scale(1.1); transition: opacity 2.6s ease, transform 5s cubic-bezier(.2,.7,.2,1); }
html.js .hero__logo { opacity: 0; filter: blur(18px); transition: opacity 1.6s ease, filter 1.8s ease; }
html.js .hero__title { opacity: 0; filter: blur(22px); transform: translate(-50%, -50%) scale(1.04);
  transition: opacity 2s ease .5s, filter 2.2s ease .5s, transform 2.6s var(--ease) .5s; }
html.js .hero__credits { opacity: 0; filter: blur(12px); transition: opacity 1.8s ease 1.3s, filter 1.8s ease 1.3s; }

html.js .hero.st-photo .hero__bg { opacity: 1; transform: none; }
html.js .hero.st-logo .hero__logo { opacity: 1; filter: blur(0); }
html.js .hero.st-title .hero__logo { opacity: 0; filter: blur(18px); transition-duration: 1s, 1s; }
html.js .hero.st-title .hero__title { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); }
html.js .hero.st-title .hero__credits { opacity: 1; filter: blur(0); }
html.is-locked, html.is-locked body { overflow: hidden; }
/* Host pages (the IMS) set overflow-x: hidden on html/body. That turns <body> into a scroll
   container, and position: sticky then sticks to <body> instead of the screen, so the pinned
   quote sections stop pinning. clip cuts the sideways overflow without creating a scroller. */
html:not(.is-locked), html:not(.is-locked) body { overflow-x: clip !important; overflow-y: visible !important; }

/* ---------- Credits ---------- */
.credits { display: grid; gap: 23px; justify-items: center; text-transform: uppercase; }
.credits__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 49px; }
.credits__item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.credits dt { font: 400 13px/0.9 var(--serif); }
.credits dd { font: 700 13px/1.31 var(--label); }
.credits--light { color: var(--paper); }
.credits--dark { color: #000; }

/* ---------- INTRO ---------- */
.intro {
  background: #000; color: #eaeaea;
  display: flex; flex-direction: column; align-items: center;
  gap: max(28px, calc(33 * var(--u)));
  padding: max(90px, calc(170 * var(--u))) 20px max(90px, calc(160 * var(--u)));
}
.intro__text {
  max-width: max(600px, calc(835 * var(--u))); text-align: center;
  font-size: clamp(15px, calc(18 * var(--u)), 18px); line-height: 1.55;
}
.intro__comp { width: min(max(360px, calc(732 * var(--u))), 92vw); aspect-ratio: 732 / 490; }
.intro__comp.is-loaded { background: transparent; }
.intro__comp.ph { background: transparent; }        /* no grey box on black */
/* the IMS styles its video figures (.alignJustifyFull etc.) with a negative left margin and a
   fixed width meant for its own article column; pin ours back to the centre of the intro */
.intro .intro__video {
  width: min(calc(1100 * var(--u) + 200px), 100%) !important; max-width: 100% !important;
  margin: max(20px, calc(40 * var(--u))) auto 0 !important; padding: 0 !important;
  float: none !important; left: auto !important; right: auto !important; position: relative !important;
}
.intro__video video { display: block; background: #111; }
@media (max-width: 768px) {
  .intro__video .desktop-video { display: none !important; }
  .intro__video .mobile-video { display: block !important; }
}

/* ---------- CHAPTER COVERS ---------- */
.chapter {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  margin-bottom: var(--gap);
}
.chapter--1 { height: calc(1691 * var(--u)); }
.chapter--2 { height: calc(1279 * var(--u)); }
.chapter--3, .chapter--4 { height: calc(2135 * var(--u)); }
.chapter { min-height: calc(100 * var(--svh)); }
.chapter__bg { position: absolute; inset: 0; background: #1a1410; }
.chapter--2 .chapter__bg > img { object-position: 50% 100%; }
.chapter__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: max(28px, calc(50 * var(--u)));
  padding: 0 20px;
  pointer-events: none;
}
.chapter--2 .chapter__inner, .chapter--3 .chapter__inner, .chapter--4 .chapter__inner { gap: max(32px, calc(67 * var(--u))); }
.chapter__num { width: max(170px, calc(238 * var(--u))); height: auto; }
.chapter__logo { width: max(60px, calc(89 * var(--u))); height: auto; }
.chapter__title {
  font-family: var(--display); font-weight: 400;
  font-size: max(30px, calc(54.56 * var(--u)));
  line-height: 1.11; letter-spacing: -0.05em; text-transform: uppercase; text-align: center;
  color: var(--paper);
}
.chapter__inner { container-type: inline-size; width: min(calc(1373 * var(--u)), calc(100vw - 40px)); }
.chapter--1 .chapter__inner { width: max(calc(480 * var(--u)), 330px); }
/* dot patterns, positioned from the Figma render bounds relative to the title stack */
.chapter__dots {
  position: absolute; z-index: -1; height: auto; max-width: none;
  left: calc(var(--x) / var(--w) * 100cqw);
  top: calc(var(--y) / var(--w) * 100cqw);
  width: calc(var(--dw) / var(--w) * 100cqw);
  opacity: .4;
}
.chapter--1 .chapter__dots { --w: 480; --x: -30; --y: 56; --dw: 540; }
.chapter--2 .chapter__dots { --w: 1373; --x: 19; --y: 73; --dw: 1335; opacity: 1; }
.chapter--3 .chapter__dots { --w: 1373; --x: 436; --y: -239; --dw: 502; }
.chapter--4 .chapter__dots { --w: 1373; --x: 439; --y: 129; --dw: 496; }

/* ---------- Q&A column ---------- */
.col {
  width: min(calc(100% - 40px), max(760px, calc(980 * var(--u))));
  margin: 0 auto var(--gap);
  display: flex; flex-direction: column;
  gap: calc(var(--gap) * 2);          /* Q&A pairs sit two gaps apart */
}
/* quote / image sections stand well apart from the interview text: 5× the normal gap */
.article > section:not(.chapter) + .col,
.col + section:not(.chapter) { margin-top: calc(var(--gap) * 4); }
.qa { display: flex; flex-direction: column; gap: 40px; }
.qa__q { display: grid; grid-template-columns: 30px 1fr; gap: 35px; align-items: start; }
.qa__badge {
  width: 30px; height: 30px; margin-top: .15em;
  display: grid; place-items: center;
  background: #000; color: #fff;
  font: 700 15.5px/1 var(--label);
}
.qa__q h3 { font: 600 clamp(17px, calc(22 * var(--u)), 22px)/1.55 var(--serif); }
.qa__a { display: grid; grid-template-columns: 75px 1fr; gap: 56px; padding-right: 15%; }
.qa__avatar { width: 75px; height: 75px; border-radius: 50%; }
.qa__text { font-size: clamp(15px, calc(18 * var(--u)), 18px); line-height: 1.55; }
.qa__text p + p { margin-top: 1.55em; }
.qa__text strong { font-weight: 700; }

/* ---------- Full-bleed quote row ---------- */
.bleed { margin-bottom: var(--gap); padding: 0 calc(30 * var(--u)); }
.quote-row {
  display: grid;
  grid-template-columns: calc(605 * var(--u)) 1fr;
  padding-left: 0;
}
.quote-row .quote { max-width: calc(1335 * var(--u)); }
.bigimg { position: relative; margin-top: calc(163 * var(--u)); aspect-ratio: 1940 / 2672; }
.bigimg__photo { position: absolute; inset: 0; }
.bigimg__card { position: absolute; z-index: 1; background: var(--card); }
.bigimg__card--a { left: calc(1057 / 1940 * 100%); top: calc(78 / 2672 * 100%); width: calc(816 / 1940 * 100%); aspect-ratio: 816 / 572; }
.bigimg__card--b { left: calc(74 / 1940 * 100%); top: calc(2208 / 2672 * 100%); width: calc(535 / 1940 * 100%); aspect-ratio: 535 / 375; }

/* ---------- Split (Frame 33) ---------- */
.split--33 {
  display: grid; grid-template-columns: 869fr 1041fr; gap: calc(30 * var(--u));
  padding: calc(30 * var(--u));
  margin-bottom: var(--gap);
}
.split__left { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; }
.thumb--33 { width: calc(357 * var(--u)); min-width: 180px; aspect-ratio: 357 / 416; }
.split__quote { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.split__right { aspect-ratio: 1041 / 1214; }

/* ---------- Frame 47 ---------- */
.s47 {
  position: relative;
  display: grid; grid-template-columns: 956fr 998fr; column-gap: calc(43 * var(--u));
  padding: calc(115 * var(--u)) calc(36 * var(--u)) calc(85 * var(--u)) calc(31 * var(--u));
  margin-bottom: var(--gap);
}
.s47__photo { grid-row: 1 / span 2; aspect-ratio: 956 / 1169; }
.s47__thumb { justify-self: end; width: calc(330 * var(--u)); min-width: 160px; aspect-ratio: 330 / 361; }
.s47__text { align-self: end; display: flex; flex-direction: column; gap: 35px; align-items: flex-start; }

/* ---------- Pinned quote on image ----------
   The section is 3 screens tall; its sticky child holds the photo for ~2 screens of scrolling.
   JS writes --dark (0..1) and toggles .is-in on the quotes (see main.js "pinned quotes"). */
.pinq { position: relative; height: calc(300 * var(--svh)); margin-bottom: var(--gap); }
/* lvh: tall enough to stay covered when the mobile toolbars hide */
.pinq__sticky { position: sticky; top: 0; height: calc(100 * var(--lvh)); overflow: hidden; display: grid; place-items: center; }
.pinq__bg { position: absolute; inset: 0; background: #1c130b; }
.pinq__shade { position: absolute; inset: 0; background: #000; opacity: calc(var(--dark, 0) * .62); pointer-events: none; }
.pinq__content { position: relative; z-index: 1; pointer-events: none; color: #d9d9d9; }
.pinq .quote--light { color: #d9d9d9; }
.pin-fade { opacity: 0; filter: blur(10px); transition: opacity 1s ease, filter 1.1s ease; }
.pinq.is-on .pin-fade { opacity: 1; filter: blur(0); }
.pinq.is-on .pinq__arc { transition-delay: .63s; }
/* 1: layout of Figma group 81:8139 (1412 × 563) */
.pinq__content--1 { width: calc(1412 * var(--u)); height: calc(563 * var(--u)); }
.pinq__content--1 .label { position: absolute; left: 0; top: 0; }
.pinq__main { position: absolute; left: 0; top: calc(46 / 563 * 100%); width: calc(985 / 1412 * 100%); }
.pinq__arc { position: absolute; left: calc(492 / 1412 * 100%); top: calc(334 / 563 * 100%); width: calc(105 / 1412 * 100%); height: auto; filter: invert(.85); }
.pinq.is-on .pinq__arc { filter: invert(.85); }
.pinq__it { position: absolute; left: calc(612 / 1412 * 100%); top: calc(491 / 563 * 100%); width: calc(800 / 1412 * 100%); }
/* 2: centred, Figma frame 62:7028 (1139 wide) */
.pinq__content--2 { width: min(calc(1139 * var(--u)), calc(100% - 40px)); display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }

/* ---------- Gallery ---------- */
.gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: calc(32 * var(--u));
  row-gap: calc(20 * var(--u));
  padding: calc(31 * var(--u)) calc(25 * var(--u)) calc(33 * var(--u)) calc(34 * var(--u));
  margin-bottom: var(--gap);
}
.g { grid-column: var(--c); grid-row: var(--r); }
.g--img { aspect-ratio: 297 / 282; }
.g--txt { font: 400 max(10px, calc(15.5 * var(--u)))/0.9 var(--label); text-transform: uppercase; }
.gallery__logo { position: absolute; left: calc(1573 * var(--u)); top: calc(420 * var(--u)); width: calc(210 * var(--u)); height: auto; }

/* ---------- Frame 59 ---------- */
.s59 {
  display: grid; grid-template-columns: 767fr 1203fr; column-gap: calc(30 * var(--u));
  padding: calc(100 * var(--u)) 0 calc(100 * var(--u));
  margin-bottom: var(--gap);
}
.s59__left { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; padding-left: calc(30 * var(--u)); }
.s59__quote { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; max-width: calc(707 * var(--u)); }
.s59__thumb { width: calc(504 * var(--u)); min-width: 200px; aspect-ratio: 504 / 588; }
.s59__photo { aspect-ratio: 1203 / 1404; }

/* ---------- Frame 58 ---------- */
.s58 { padding: 0 calc(30 * var(--u)); margin-bottom: var(--gap); }
.s58__head { position: relative; display: flex; flex-direction: column; gap: calc(30 * var(--u)); align-items: flex-start; padding-right: calc(460 * var(--u)); margin-bottom: calc(30 * var(--u)); }
.s58__head .quote { max-width: calc(1273 * var(--u)); }
.s58__logo { position: absolute; right: 0; top: calc(-2 * var(--u)); width: calc(210 * var(--u)); height: auto; }
.s58__pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(30 * var(--u)); }
.s58__pair > .ph { aspect-ratio: 957 / 1117; }

/* ---------- Frame 53 ---------- */
.s53 {
  display: grid; grid-template-columns: 922fr 988fr; column-gap: calc(30 * var(--u));
  padding: calc(100 * var(--u)) calc(30 * var(--u));
  margin-bottom: var(--gap);
}
.s53__left { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; }
.s53__quote { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.s53__thumb { width: calc(427 * var(--u)); min-width: 200px; aspect-ratio: 427 / 306; }
.s53__photo { aspect-ratio: 988 / 849; align-self: start; }

/* ---------- Frame 62 ---------- */
.s62 { display: grid; grid-template-columns: 1195fr 738fr; column-gap: calc(67 * var(--u)); align-items: start; margin-bottom: var(--gap); }
.s62__a { aspect-ratio: 1195 / 1394; }
.s62__b { aspect-ratio: 738 / 861; }

/* ---------- Ending ---------- */
.ending { position: relative; height: calc(2046 * var(--u)); min-height: calc(100 * var(--svh)); display: grid; place-items: center; overflow: hidden; }
.ending__bg { position: absolute; inset: 0; background: #140b05; }
.ending__text {
  position: relative; z-index: 1;
  width: min(calc(1256 * var(--u)), calc(100% - 40px));
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  text-align: center; pointer-events: none;
}

/* ---------- Outro ---------- */
.outro { display: flex; flex-direction: column; align-items: center; gap: max(28px, calc(40 * var(--u))); padding: max(80px, calc(120 * var(--u))) 20px max(90px, calc(140 * var(--u))); background: #000; color: #9a9a9a; }
.outro__source { font: 400 10px/1.2 var(--label); letter-spacing: .02em; }
.outro__source a { color: inherit; text-underline-offset: 2px; }
.outro__wish { max-width: 980px; text-align: center; font: 600 clamp(17px, calc(22 * var(--u)), 22px)/1.55 var(--serif); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: rgba(8, 6, 4, .94);
  opacity: 0; transition: opacity .4s;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
/* shown as a CSS background (not an <img>) so there is no "save image" target */
.lightbox__frame {
  position: relative;
  background: center / 100% 100% no-repeat;
  -webkit-touch-callout: none; user-select: none;
  transform: scale(.96); transition: transform .6s var(--ease);
}
.lightbox.is-open .lightbox__frame { transform: none; }
.lightbox__close {
  position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  min-width: 88px; min-height: 44px; padding: 12px 22px;        /* comfortable thumb target */
  background: none; border: 0; color: #eaeaea;
  font: 400 8px/1.2 var(--label); letter-spacing: .02em; text-transform: uppercase;
}
[data-zoom] { cursor: zoom-in; }

/* ==========================================================================
   Tablet / mobile
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], .js-lines .w > i, html.js .hero__bg, html.js .hero__title, html.js .hero__credits { transition: none !important; filter: none !important; opacity: 1 !important; }
  html.js [data-reveal], .js-lines .w > i { transform: none !important; }
  html.js .hero__logo { display: none; }
  [data-parallax] img { transform: none !important; }
  canvas.water { display: none; }
  .ph::after { animation: none; }
}