/* ============================================================
   МОЙ АЙТМАТОВ — site layout
   Page-level composition only. Everything visual comes from the
   design-system tokens and component classes.
   ============================================================ */

/* Page container, matched to the reference (german-films.de): a 1140px box
   with 20px gutters, so text and media line up on a 1100px measure instead of
   stretching to the viewport. Colour bands stay full-bleed — only what sits
   inside them is capped. Bands centre their content with a single-column grid,
   which keeps the markup free of wrapper divs. */
:root {
  --content-max: 1140px;
  --content-pad: 20px;
  --content-inner: calc(var(--content-max) - 2 * var(--content-pad));
}

.band {
  display: grid;
  grid-template-columns: minmax(0, var(--content-inner));
  justify-content: center;
}

body { background: var(--paper-100); }

a { color: var(--ink-900); }
a:hover { opacity: var(--hover-dim); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink-900);
  color: var(--paper-100);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; opacity: 1; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper-100);
  border-bottom: var(--rule) solid var(--ink-900);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* border-box, so the cap includes the gutters — content lands on 1100px,
     exactly the measure the bands below use. */
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 14px var(--content-pad);
}
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-500);
}
.site-nav a:hover { color: var(--ink-900); opacity: 1; }
.lang-chip {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border: var(--hair) solid var(--ink-900);
  padding: 5px 10px;
  appearance: none;
  background: transparent;
  color: var(--ink-900);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.lang-chip:hover { background: var(--ink-900); color: var(--paper-100); }
.lang-chip:active { transform: scale(var(--press-scale)); }

/* ---- Poster band ----
   Sits on the page grid rather than full-bleed, so it lines up with every
   section below it. It carries the hero's powder field and no top padding, so
   the band meets the header directly and the colour runs unbroken into the
   trailer section below. */
.poster {
  padding: 0 var(--content-pad);
  background: var(--pastel-powder);
}
.poster__inner {
  position: relative;
  overflow: hidden;
  line-height: 0;
  max-width: var(--content-inner);
  margin-inline: auto;
}
.poster .ait-frame__box {
  aspect-ratio: 21 / 6;
  border: none;
  min-height: 320px;
}
/* The banner is a composed shot — the group sits right, the left is clear
   ground for the title. No crop transform: any zoom would push people out.
   It also keeps its colour: the design system greys out every image, and this
   one is the exception, so the filter is switched off here deliberately. */
.poster .ait-frame__box img {
  object-position: right center;
  filter: none;
}
/* Scrim under the title only. The shot's left side is a light ochre — bone
   type measured 2.4:1 against it, well under the 4.5:1 body text needs — so a
   soft wash carries the left third and fades out before the group starts at
   ~41% of the frame. Deliberate exception to the system's "no transparency"
   rule: the alternative is dark type, which the brief rules out. */
.poster .ait-frame__box::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(19, 18, 16, 0.34) 0%,
    rgba(19, 18, 16, 0.28) 26%,
    rgba(19, 18, 16, 0) 48%
  );
}
/* Centred in the band rather than sitting on its floor — the title block
   reads higher against the clear left side of the shot. */
.poster__caption {
  position: absolute;
  left: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  right: var(--space-6);
  /* Bone, the palette's warm off-white — not pure white, not ink. */
  color: var(--paper-100);
  line-height: var(--lh-body);
}
.poster__title {
  font-family: var(--font-grotesk);
  font-weight: var(--w-bold);
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  line-height: var(--lh-poster);
  letter-spacing: var(--track-mega);
  margin: 0;
}
/* Breaks are authored in the copy (three lines), so nothing re-wraps here. */
.poster__standfirst {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  line-height: 1.35;
  margin: var(--space-3) 0 0;
  max-width: none;
}

/* ---- Presentation stubs ----------------------------------------------
   Temporary notes for the client walkthrough, marking blocks whose real
   content is not shot yet. Dashed keyline + ink chip so they read as a
   spec annotation over photography, never as final copy. Delete this
   block and the .stub markup once the poster and the trailer land. */
.stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: rgba(19, 18, 16, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--paper-100);
  text-align: center;
  line-height: var(--lh-body);
}
/* A hairline rule under the eyebrow instead of a box around everything —
   the system draws structure with rules, not with frames. */
.stub__label {
  position: relative;
  padding-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.65);
}
.stub__label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 0;
  border-top: var(--hair) solid var(--signal-red);
  transform: translateX(-50%);
}
.stub__text {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--type-h4);
  letter-spacing: 0;
  line-height: 1.3;
  max-width: none;
}
.stub__text--lg {
  font-family: var(--font-grotesk);
  font-weight: var(--w-bold);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
}

/* Dead-centre of the trailer still. */
.stub--trailer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 15rem;
}

/* ---- Sections ---- */
.section { padding: var(--space-8) var(--content-pad); }
.section--hero { padding: var(--space-6) var(--content-pad) var(--space-7); background: var(--pastel-powder); }
.section--surface { background: var(--paper-000); }
.section--inverse { background: var(--ink-1000); color: var(--paper-100); }
.section--butter { background: var(--pastel-butter); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.section__title {
  font-family: var(--font-grotesk);
  font-weight: var(--w-bold);
  font-size: var(--type-h1);
  letter-spacing: var(--track-tight);
  margin: 0;
}

/* ---- Hero / trailer ----
   Video sits left and dominates, a speaker column runs down the right — the
   proportion the reference site uses for its player plus sidebar. */
.trailer-row {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;   /* the speaker column matches the player's height */
}
.trailer { margin: 0; }
.trailer .ait-frame__box { aspect-ratio: 16 / 9; flex: none; }
.trailer__caption {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-700);
}
.trailer .ait-frame__box img { transform: scale(1.15); transform-origin: center; }

/* The player lies over the still and covers it completely once the file is
   there. If the source is missing, site.js hides the player and the still
   shows through instead — hence the layering rather than a poster attribute,
   which browsers letterbox inside the 16:9 box. */
.trailer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--ink-1000);
}
/* The author `display: block` above outranks the UA rule for [hidden], so the
   hidden state has to be spelled out or the empty player stays on screen. */
.trailer video[hidden] { display: none; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-6); }

/* ---- Speaker column ----
   The column is exactly as tall as the 16:9 player beside it: name and text
   sit at their natural height and the portrait absorbs whatever is left, so
   both columns end on the same line whatever the viewport. */
.speaker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.speaker__portrait {
  margin: 0;
  flex: 1;
  min-height: 0;   /* without this the frame refuses to shrink below its content */
}
.speaker__portrait .ait-frame__box {
  aspect-ratio: auto;   /* height comes from the flex row, not from a ratio */
  height: 100%;
  min-height: 0;
}
/* Out of flow, so the photo's own height cannot push the row taller than the
   16:9 player — the player alone sets how tall the row is, and the portrait
   takes whatever is left under the name and the line of text. */
.speaker__portrait img {
  position: absolute;
  inset: 0;
  object-position: center 58%;   /* sits the head a little higher in the frame */
}
.speaker__name {
  font-family: var(--font-grotesk);
  font-weight: var(--w-bold);
  font-size: var(--type-h4);
  letter-spacing: var(--track-tight);
  margin: 0;
}
.speaker__speech {
  font-family: var(--font-serif);
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--ink-700);
  margin: 0;
  max-width: none;
}

/* ---- Two-column editorial split ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.split--center { align-items: center; }
/* Right column starts level with the heading rather than under it, so the
   band loses the separate title row and sits lower overall. */
.split--top { align-items: start; }
.about__intro { display: flex; flex-direction: column; gap: var(--space-4); }
.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  margin: 0;
  max-width: 26ch;
}
.prose { font-size: var(--type-body); line-height: 1.6; color: var(--ink-700); }
.prose p { margin: 0 0 var(--space-4); }
.prose p:last-child { margin: 0; }

/* ---- Directors ---- */
.directors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}
.director { display: flex; flex-direction: column; gap: 10px; }
.director__name {
  font-family: var(--font-grotesk);
  font-weight: var(--w-bold);
  font-size: var(--type-small);
}
.director__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 2px;
}

/* ---- Pull quote ---- */
.pullquote {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15;
  max-width: 26ch;
  margin: 0 0 var(--space-5);
}

/* ---- Contact ---- */
.contact__email {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin: var(--space-4) 0 0;
}
.contact__form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.contact__form .ait-field { width: 100%; }
.contact__form-status {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-700);
  min-height: 1.3em;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--ink-1000);
  color: var(--paper-100);
  padding: var(--space-8) var(--content-pad) var(--space-6);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: var(--type-small); color: var(--ink-300); }
.footer-links a:hover { color: var(--paper-100); opacity: 1; }
.site-footer__meta {
  margin-top: var(--space-7);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .directors { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; row-gap: var(--space-3); }
  .site-nav { order: 3; width: 100%; gap: 18px; }
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  /* Speaker drops under the player and turns into a row: a narrow portrait
     beside the text reads better than a full-width one. */
  .trailer-row { grid-template-columns: 1fr; gap: var(--space-5); }
  .speaker {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
    height: auto;   /* nothing to match once the columns are stacked */
  }
  .speaker__portrait { grid-row: span 2; flex: none; }
  .speaker__portrait .ait-frame__box { aspect-ratio: 3 / 4; height: auto; }
  .speaker__portrait img { position: static; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  /* A 3.3:1 group shot cannot survive a tall crop — anything narrower than
     2:1 starts cutting people off the left edge. The caption comes out of the
     image and sits under it, where dark type on the powder field stays
     readable instead of landing on someone's face. */
  .poster .ait-frame__box { aspect-ratio: 2 / 1; min-height: 0; }
  /* Caption leaves the image here, so it goes back to ink on the powder field
     — bone would be invisible there — and the scrim has nothing to protect. */
  .poster .ait-frame__box::after { content: none; }
  .poster__caption {
    position: static;
    transform: none;
    color: var(--ink-900);
    padding: var(--space-4) 0 var(--space-5);
  }
}
@media (max-width: 640px) {
  .section { padding: var(--space-7) var(--space-4); }
  .speaker { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .speaker__portrait { grid-row: auto; max-width: 220px; }
  .directors { grid-template-columns: repeat(2, 1fr); }
  .site-footer__cols { grid-template-columns: 1fr; }
  .hero__actions .ait-btn { width: 100%; }
  .site-nav { gap: 14px; font-size: var(--type-micro); }
  .poster { padding-inline: var(--space-4); }
  .stub { padding: var(--space-3) var(--space-4); }
  .stub__text { font-size: var(--type-small); }
}