/* The landing page. Tokens, the display face, the mark and the button all
   come from style.css; this file adds only what the wide layout needs.

   Four stills from the channel's own videos carry the page, so there is very
   little to read. The palette is the brand artwork's (cream ground, navy
   ink, a sky blue laid down as a flat shape), and the one piece of
   decoration is a sky slab behind the hero still, which is the same move the
   mark makes. No cards, no borders, no shadows: space separates the page. */

body.landing {
  margin: 0;
  padding: 0;
  display: block;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
}
body.landing main { display: block; }

.topbar,
.hero,
.shots,
.tail,
.foot {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: 22px;
}

/* Header: the mark, and where the videos live ---------------------------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 20px 10px;
}
.topbar .mark { text-decoration: none; margin: 0; }
.topbar .mark span { color: var(--text); font-size: 14.5px; }
.channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.channels a {
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 0;
}
.channels a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.channels a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Hero ------------------------------------------------------------------ */
.hero {
  display: grid;
  gap: 32px;
  align-items: center;
  padding-block: 24px 52px;
}
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(36px, 9.4vw, 50px);
  font-weight: 700;
  line-height: 0.97;
  letter-spacing: -0.035em;
}
.hero .note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--dim);
}
.hero-shot {
  position: relative;
  width: min(100%, 320px);
  justify-self: start;
}
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  background: var(--sky);
  border-radius: 18px;
}
.hero-shot img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: 16px;
}

/* Stills ---------------------------------------------------------------- */
.shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-block: 0 56px;
}
.shots img {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: 12px;
}

/* Closing line ---------------------------------------------------------- */
.tail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 20px;
  padding-block: 0 64px;
}
.tail p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Footer ---------------------------------------------------------------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 26px 36px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}
.foot a { color: var(--dim); }
.foot a:hover { color: var(--text); }

/* Wide ------------------------------------------------------------------- */
@media (min-width: 780px) {
  .topbar, .hero, .shots, .tail, .foot { padding-inline: 34px; }
  .hero {
    grid-template-columns: 1.35fr 0.65fr;
    gap: 48px;
    padding-block: 40px 76px;
  }
  .hero-shot { justify-self: end; }
  .shots { grid-template-columns: repeat(3, 1fr); gap: 20px; padding-block: 0 76px; }
  .tail { padding-block: 0 84px; }
  .foot { padding-block: 30px 44px; }
}