/* 08 Why I built it. Green band. One composition with one DOM order (photo, headline, note, talk clip, link), laid
   out by grid areas per size; .fd-text is display:contents so its children take part in the grid.
   Laptop: the photo (4:5) beside the note, the note centred on it; the clip is the shared compact talk card (the size
   03 uses: a small frame beside its words). Tablet: the same pair, the clip full width below. Phone: headline, the
   photo full width, the note, the clip, the link – nothing beside the photo, so no empty column.
   data-shape="wide" on .fd-photo: the photo becomes a band under the headline, the note and the clip side by side
   below it. */
.fd-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  grid-template-areas: "photo ." "photo head" "photo lead" "photo talk" "photo link" "photo .";
  column-gap: var(--s8);
}
.fd-text { display: contents; }

/* The photo: a media frame like every picture on the page. Its name sits inside it at the bottom, on a soft shade
   over the backs of the heads, like a caption in a magazine. */
.fd-photo { grid-area: photo; align-self: center; position: relative; margin: 0; border-radius: var(--r-media); overflow: hidden; background: #2a2b26; box-shadow: var(--sh-dark); }
.fd-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--fd-pos, 50% 40%); }
.fd-photo::after { content: ""; position: absolute; inset: 55% 0 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 16, 12, 0), rgba(14, 16, 12, .42) 55%, rgba(14, 16, 12, .72)); }
.fd-name { position: absolute; left: var(--s4); right: var(--s4); bottom: 20px; z-index: 1; margin: 0; color: #fff; font: 600 17px/1.3 var(--font); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* The headline: the logo's yellow, drawn across the words like a marker when it comes into view (js/08). Without JS
   or with reduced motion it is simply yellow. The overlay copy (span.fd-hl, aria-hidden, so it is read once) lies
   exactly on the words and is uncovered left to right.
   RU: «Я ненавижу монтаж.» is 9.7 em wide with the marker's padding (the English "I hate editing." 6.2 em). On a
   laptop it stays one line, so its size follows the text column (64px from 1280 up; the English is 86–88px); on a
   tablet and a phone it breaks into two lines at the English size («Я ненавижу» / «монтаж.»: the build ties «Я» to
   the next word), each line its own yellow stroke (box-decoration-break; at this line height the two strokes join
   into one block), never hyphenated. Both copies wrap the same way: same box, padding, font and width. The h2's
   padding holds the strokes (the marker's padding plus the line box), so the yellow starts at the natural stop. */
.fd-h { grid-area: head; position: relative; padding-block: .09em; font-size: min(64px, calc((100vw - 176px) * 7 / 120)); line-height: 1.2; letter-spacing: -0.045em; font-weight: 800; -webkit-hyphens: manual; hyphens: manual; }
.fd-h mark { padding: .03em .13em .09em; border-radius: .13em; background: var(--yellow); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fd-hl { display: none; }
.js .fd-h > mark { background: transparent; color: var(--night-ink); }
.js .fd-hl { display: block; position: absolute; inset: 0; padding: inherit; -webkit-user-select: none; user-select: none; pointer-events: none; clip-path: inset(-.3em 100% -.3em -.3em); transition: clip-path .8s cubic-bezier(.65, 0, .25, 1); }
.js .fd-h.is-marked .fd-hl { clip-path: inset(-.3em -.3em -.3em -.3em); }
@media (prefers-reduced-motion: reduce) { .js .fd-hl { transition: none; } }

/* Shown at once when the keyboard lands inside before the scroll reveal ran (js/08), so focus is never invisible. */
.js .fd .reveal.fd-now { transition: none; }

/* The note: one paragraph in the page's lead size, the "now" in white. */
.fd-lead { grid-area: lead; margin: var(--s4) 0 0; max-width: 30em; }
.fd-lead b { display: block; margin-top: var(--s1); }

/* The talk clip: the shared compact card (base.css), a hairline above it so the note and the clip read as two beats.
   While closed it shows its own still (data-card: he faces the room, the projected thumbnails behind him blurred). */
.fd-talk { grid-area: talk; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid rgba(242, 240, 233, .14); }
.fd .tc-q { text-wrap: balance; }
.fd-link { grid-area: link; margin-top: var(--s3); align-self: start; justify-self: start; }

/* Narrow laptops: a smaller gap, so the words beside the clip keep a readable measure; the headline still one line in
   the 7fr column (its width over 10, the marker's 9.7 em plus a little air). */
@media (min-width: 1000px) and (max-width: 1199px) {
  .fd-grid { column-gap: var(--s6); }
  .fd-h { font-size: calc((100vw - 128px) * 7 / 120); }
}

/* Tablet: the photo and the note side by side in two equal columns, the clip full width under them. */
@media (max-width: 999px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); grid-template-rows: 1fr auto auto auto 1fr auto; grid-template-areas: "photo ." "photo head" "photo lead" "photo link" "photo ." "talk talk"; }
  .fd-h { font-size: clamp(44px, 6.2vw, 60px); }
  .fd-talk { margin-top: var(--s6); padding-top: var(--s6); }
}

/* Phone: one column. The headline, then the photo the full width of the text, the note, the clip, the link. */
@media (max-width: 719px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "photo" "lead" "talk" "link"; }
  .fd-h { font-size: clamp(40px, 13vw, 56px); }
  .fd-photo { margin-top: var(--s5); }
  .fd-name { left: var(--s3); right: var(--s3); bottom: var(--s3); font-size: 16px; }
  .fd-lead { margin-top: var(--s5); }
  .fd-talk { margin-top: var(--s4); padding-top: var(--s4); }
  .fd-link { margin-top: var(--s2); }
}

/* ---------- A wide photo (data-shape="wide"): a band under the headline, the note and the clip below it ---------- */
.fd-grid:has(> .fd-photo[data-shape="wide"]) { grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "head head" "photo photo" "lead talk" "link talk" ". talk"; }
.fd-photo[data-shape="wide"] { align-self: start; margin-top: var(--s6); }
.fd-photo[data-shape="wide"] img { aspect-ratio: 16 / 7; object-position: var(--fd-pos, 50% 35%); }
.fd-grid:has(> .fd-photo[data-shape="wide"]) .fd-lead { margin-top: var(--s6); }
.fd-grid:has(> .fd-photo[data-shape="wide"]) .fd-talk { margin-top: var(--s6); padding-top: 0; border-top: 0; }
@media (max-width: 999px) {
  .fd-grid:has(> .fd-photo[data-shape="wide"]) { grid-template-rows: none; grid-template-areas: "head head" "photo photo" "lead lead" "link link" "talk talk"; }
  .fd-photo[data-shape="wide"] img { aspect-ratio: 16 / 9; }
  .fd-grid:has(> .fd-photo[data-shape="wide"]) .fd-talk { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid rgba(242, 240, 233, .14); }
}
@media (max-width: 719px) {
  .fd-grid:has(> .fd-photo[data-shape="wide"]) { grid-template-areas: "head" "photo" "lead" "talk" "link"; }
  .fd-photo[data-shape="wide"] { margin-top: var(--s5); }
  .fd-photo[data-shape="wide"] img { aspect-ratio: 4 / 3; }
  .fd-grid:has(> .fd-photo[data-shape="wide"]) .fd-lead { margin-top: var(--s5); }
  .fd-grid:has(> .fd-photo[data-shape="wide"]) .fd-talk { margin-top: var(--s4); padding-top: var(--s4); }
}