/*
  Landing-page-only styles (redesigned 2026-09-17, trimmed 2026-09-19).

  Everything here is scoped under `.landing-page`, which only index.html
  carries, and everything left here is genuinely landing-only: the hero
  carousel, the chalkboards, the marker annotations, the journey loop and the
  consultation block.

  The parts of this redesign the whole site now shares — the type tokens, the
  vertical drop shadows, the tags, the buttons, the nav and the card chrome —
  moved into style.css. Change those there, not here.
*/

/* ---------- Tokens ---------- */

.landing-page {
  /* Illustration-only colours: the chalkboards and the marker scribbles. */
  --board: #24211d;
  --chalk: #f3eee1;
  --marker: #3a352e;

  /* style.css adds an amber glow here; the landing page keeps to yellow. */
  background-image:
    radial-gradient(circle at 10% 6%, rgba(246, 213, 27, 0.6), transparent 32%),
    radial-gradient(circle at 94% 40%, rgba(246, 213, 27, 0.35), transparent 30%),
    radial-gradient(var(--ink) 1px, transparent 1px);
}

.landing-page :where(a, button):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.landing-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Type ---------- */

/*
  The display face on this page's big titles. Elsewhere section titles take
  the heading face (style.css), but here they are page-title size, where the
  dot-matrix reads well and carries the brand.
*/
.landing-page .hero-title,
.landing-page .section-heading h2,
.landing-page .consult-block h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}

.landing-page .section-heading h2,
.landing-page .consult-block h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}

.landing-page .behind-card h3,
.landing-page .journey-step h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
}

.landing-page .hero-text,
.landing-page .section-intro,
.landing-page .behind-card p,
.landing-page .journey-step p,
.landing-page .consult-copy p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.75;
}

/* The level chip and the illustration tag borrow the shared tag's face. */
.landing-page .journey-level,
.landing-page .art-placeholder-tag {
  font-family: "Bungee", var(--font-label);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* ---------- Panels ---------- */

.landing-page .content-block {
  border-radius: 22px;
}

.landing-page .section-kicker {
  margin: 12px 0 0;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.35;
}

.landing-page .section-intro {
  margin: 14px 0 0;
}

.landing-page .feature-card {
  border-radius: 18px;
}

/* ---------- Hero carousel ---------- */

.landing-page .hero {
  display: block;
  margin-bottom: 36px;
  padding: 32px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.landing-page .hero-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 32px;
  align-items: center;
}

/* Without the script both slides stack, separated by a rule. */
.landing-page .hero-slide + .hero-slide {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 3px dashed var(--ink);
}

/* With it, the slides share one grid cell so the panel is always as tall as the
   taller slide and never jumps when they swap. */
.landing-page .hero-carousel.is-ready .hero-slides {
  display: grid;
}

.landing-page .hero-carousel.is-ready .hero-slide {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.landing-page .hero-carousel.is-ready .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}

.landing-page .hero h1,
.landing-page .hero-title {
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 4.4vw, 3.7rem);
}

.landing-page .hero-text {
  margin: 0;
  max-width: 34ch;
  font-size: 1.15rem;
}

.landing-page .hero-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

/* The one-line statement of what Yaask is, on a highlighter swash. The swash is
   a rough SVG shape rather than a straight background so it reads as a marker
   stroke; it stretches to whatever the line wraps to. */
.landing-page .hero-tagline {
  position: relative;
  /* Own stacking context, so the swash's negative z-index puts it behind this
     text but still in front of the hero panel's white background. */
  isolation: isolate;
  margin: 0;
  padding: 10px 20px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  line-height: 1.45;
}

.landing-page .hero-swash {
  position: absolute;
  inset: -2px -6px;
  z-index: -1;
  width: calc(100% + 12px);
  height: calc(100% + 4px);
  fill: var(--yellow);
  stroke: none;
}

.landing-page .hero-dots {
  display: none;
  gap: 10px;
  align-items: center;
}

.landing-page .hero-carousel.is-ready .hero-dots {
  display: flex;
}

.landing-page .hero-dot {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  transition: width 0.25s ease;
}

.landing-page .hero-dot.is-active {
  width: 56px;
  background: var(--yellow-soft);
}

.landing-page .hero-dot-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--yellow);
}

/* The autoplay timer. When the fill completes, landing.js moves to the next
   slide; pausing the fill pauses the carousel. */
.landing-page .hero-dot.is-active .hero-dot-fill {
  animation: dot-timer 8s linear forwards;
}

.landing-page .hero-carousel:hover .hero-dot-fill,
.landing-page .hero-carousel:focus-within .hero-dot-fill {
  animation-play-state: paused;
}

@keyframes dot-timer {
  from { width: 0; }
  to { width: 100%; }
}

/* ---------- Chalkboards ---------- */

/* A yellow frame around a dark board: the brand colours standing in for wood. */
.landing-page .chalkboard {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 10px var(--yellow),
    inset 0 0 0 13px var(--ink),
    var(--shadow-sm);
  background:
    radial-gradient(ellipse at 28% 38%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(ellipse at 74% 72%, rgba(255, 255, 255, 0.05), transparent 50%),
    var(--board);
  overflow: hidden;
}

.landing-page .chalkboard .sketch {
  position: absolute;
  inset: 13px;
  width: calc(100% - 26px);
  height: calc(100% - 26px);
}

.landing-page .sketch {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.landing-page .sketch text {
  fill: var(--chalk);
  stroke: none;
  font-family: var(--font-hand);
}

.landing-page .chalkboard .sketch {
  opacity: 0.92;
}

/* Only in the hero: the doodles sit back so the cycling question, which is the
   one moving thing on the board, reads first. The diagrams in the cards are the
   content, so they stay at full strength. */
.landing-page .hero .chalkboard .sketch {
  opacity: 0.55;
}

/* Chalk-style artwork dropped straight onto a board (the tutor drawing). Its
   own background is already board-dark, so it blends into the frame. */
.landing-page .board-art {
  position: absolute;
  inset: 13px;
  width: calc(100% - 26px);
  height: calc(100% - 26px);
  object-fit: contain;
}

.landing-page .sketch .chalk-yellow {
  stroke: var(--yellow);
}

.landing-page .sketch .chalk-yellow text {
  fill: var(--yellow);
  font-weight: 700;
}

.landing-page .board-question {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* A patch of clean board behind the question so doodles never run through it. */
.landing-page .board-cycle {
  position: relative;
  min-width: 58%;
  min-height: 2.1em;
  padding: 0 0.5em;
  border-radius: 14px;
  background: var(--board);
  box-shadow: 0 0 24px 18px var(--board);
  color: var(--yellow);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 3.2rem);
  line-height: 1.2;
}

.landing-page .board-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: inherit;
  white-space: nowrap;
  opacity: 0;
  animation: board-cycle 9s linear infinite;
}

.landing-page .board-frame:nth-child(2) {
  animation-delay: 3s;
}

.landing-page .board-frame:nth-child(3) {
  animation-delay: 6s;
}

@keyframes board-cycle {
  0% { opacity: 0; }
  4% { opacity: 1; }
  29% { opacity: 1; }
  33% { opacity: 0; }
  100% { opacity: 0; }
}

/*
  A square box with the glyph optically centred inside it. Kalam's "?" carries
  uneven side bearings and sits high in its em box, so flex centring alone
  leaves it off to one side; .board-blank-mark exists purely to take the nudge
  that puts it right. The values come from measuring the rendered glyph box
  against the dashed box.
*/
.landing-page .board-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  margin: 0 0.16em;
  border: 3px dashed var(--chalk);
  border-radius: 10px;
  color: var(--yellow);
  line-height: 1;
  vertical-align: -0.2em;
}

/* Measured: the ink of Kalam's "?" sits 0.071em right of the centre of its
   advance box and 0.15em above the centre of the line box. */
.landing-page .board-blank-mark {
  display: block;
  line-height: 1;
  transform: translate(-0.071em, 0.15em);
}

/* ---------- Drawing in ---------- */

/*
  Every stroke carries pathLength="1", so a dash of 1 is the whole line and
  sliding the offset from 1 to 0 draws it. Each group sets --d to stagger the
  scribbling. Motion-only: with reduced motion (and in the visual suite, which
  runs with it) every drawing is simply shown complete.
*/
@media (prefers-reduced-motion: no-preference) {
  .landing-page .is-waiting .sketch :is(path, line, circle, ellipse, rect, polyline),
  .landing-page .is-waiting.sketch :is(path, line, circle, ellipse, rect, polyline) {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .landing-page .is-waiting .sketch text {
    opacity: 0;
  }

  .landing-page .is-drawing .sketch :is(path, line, circle, ellipse, rect, polyline) {
    stroke-dasharray: 1;
    animation: sketch-draw 0.8s ease-out var(--d, 0s) both;
  }

  .landing-page .is-drawing .sketch text {
    animation: sketch-write 0.7s ease-out var(--d, 0s) both;
  }
}

@keyframes sketch-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes sketch-write {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ---------- Marker annotations ---------- */

.landing-page .marker .sketch {
  stroke: var(--marker);
  stroke-width: 3;
}

.landing-page .marker-underline,
.landing-page .marker-circle {
  position: relative;
  white-space: nowrap;
}

.landing-page .marker-underline .sketch {
  position: absolute;
  left: -4%;
  bottom: -0.32em;
  width: 108%;
  height: 0.5em;
}

.landing-page .marker-circle {
  margin: 0 0.3em;
}

.landing-page .marker-circle .sketch {
  position: absolute;
  left: -14%;
  top: -34%;
  width: 128%;
  height: 168%;
  stroke-width: 2.5;
}

.landing-page .marker-note,
.landing-page .marker-reply {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  color: var(--marker);
  font-family: var(--font-hand);
  font-size: 1.15rem;
  line-height: 1.2;
}

.landing-page .marker-note span,
.landing-page .marker-reply span {
  font-family: var(--font-hand);
}

.landing-page .journey-heading {
  position: relative;
}

.landing-page .marker-note {
  position: absolute;
  top: 26px;
  left: calc(100% + 12px);
  width: 210px;
  transform: rotate(-4deg);
}

.landing-page .marker-note .sketch {
  flex: none;
  width: 64px;
  height: 52px;
  margin-top: 14px;
}

.landing-page .marker-reply {
  align-items: flex-end;
  justify-content: center;
  transform: rotate(-3deg);
}

.landing-page .marker-reply .sketch {
  flex: none;
  width: 44px;
  height: 32px;
}

/* ---------- Behind every lesson ---------- */

.landing-page .behind-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.landing-page .behind-card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 22px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.landing-page .behind-art {
  aspect-ratio: 16 / 10;
  margin-bottom: 20px;
}

.landing-page .behind-card .chalkboard {
  box-shadow:
    inset 0 0 0 7px var(--yellow),
    inset 0 0 0 10px var(--ink);
}

.landing-page .behind-card .chalkboard .sketch {
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.landing-page .behind-card h3 {
  margin: 0 0 10px;
}

.landing-page .behind-card p {
  margin: 0 0 10px;
}

.landing-page .behind-card p:last-child {
  margin-bottom: 0;
}

/* ---------- Journey ---------- */

.landing-page .journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-page .journey-step {
  position: relative;
  z-index: 1;
  padding: 22px 20px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* Arrow to the next step, in the gap between cards. */
.landing-page .journey-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -36px;
  width: 32px;
  height: 24px;
  transform: translateY(-50%);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='%2317140f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h24M19 4l8 8-8 8'/%3E%3C/svg%3E");
}

.landing-page .journey-level {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px 1px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-page .journey-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(246, 213, 27, 0.35);
}

.landing-page .journey-icon svg {
  width: 24px;
  height: 24px;
  color: var(--yellow);
}

.landing-page .journey-step h3 {
  font-size: 1.3rem;
}

.landing-page .journey-step p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

/*
  The return path: a dashed bracket under the row, running from the last card
  back to the first, with an arrowhead pointing up into step 1.
*/
/* The gap above the path leaves the arrowhead in clear space: at -3px it sat
   under step 1's drop shadow and read as a blob rather than an arrow. */
.landing-page .journey-loop {
  position: relative;
  height: 64px;
  margin: 20px 12.5% 0;
  border: 3px dashed var(--ink);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  text-align: center;
}

.landing-page .journey-loop::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -10.5px;
  border: 9px solid transparent;
  border-top: 0;
  border-bottom: 14px solid var(--ink);
}

.landing-page .journey-loop-label {
  position: absolute;
  left: 50%;
  bottom: -0.8em;
  transform: translateX(-50%) rotate(-2deg);
  padding: 0 12px;
  background: var(--yellow-soft);
  color: var(--marker);
  font-family: var(--font-hand);
  font-size: 1.2rem;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .landing-page .journey.is-waiting .journey-step {
    opacity: 0;
  }

  .landing-page .journey.is-drawing .journey-step {
    animation: step-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .landing-page .journey.is-drawing .journey-step:nth-child(2) { animation-delay: 0.15s; }
  .landing-page .journey.is-drawing .journey-step:nth-child(3) { animation-delay: 0.3s; }
  .landing-page .journey.is-drawing .journey-step:nth-child(4) { animation-delay: 0.45s; }
}

@keyframes step-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* ---------- Consultation ---------- */

.landing-page .consult-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 28px;
  align-items: center;
  background: var(--yellow);
}

.landing-page .consult-block h2 {
  margin-bottom: 16px;
}

.landing-page .consult-copy p:not(.eyebrow) {
  margin: 0 0 12px;
}

/* The envelope, small, above the button it points at. The artwork carries its
   own white background, which is the card's colour anyway. */
.landing-page .consult-art {
  position: relative;
  display: flex;
  justify-content: flex-start;
  margin: 0 0 4px;
  padding: 0 0 0 12px;
}

.landing-page .consult-art img {
  display: block;
  width: 84px;
  height: auto;
}

/* Hand-drawn dotted curve from the envelope down to the button, in the same
   style as the "start here!" arrow. Static: it is a pointer, not an animation. */
.landing-page .consult-arrow {
  width: 108px;
  height: 64px;
  margin: 18px 0 0 -6px;
  fill: none;
  stroke: var(--marker);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 11;
}

/* The arrowhead stays solid; only the tail is dotted. */
.landing-page .consult-arrow path + path {
  stroke-dasharray: none;
}

.landing-page .consult-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.landing-page .consult-actions .button {
  width: 100%;
}

.landing-page .consult-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---------- Footer ---------- */

/* The two route names in the footer note point at the two buttons above it, so
   they get room to stand apart from the words around them. */
.landing-page .footer-note strong {
  margin: 0 0.35em;
  color: var(--yellow);
  font-weight: 600;
}

/* ---------- Motion off ---------- */

/* Also pins the visual suite (reducedMotion: "reduce") to a stable first frame. */
@media (prefers-reduced-motion: reduce) {
  .landing-page .board-frame {
    animation: none;
  }

  .landing-page .board-frame:first-child {
    opacity: 1;
  }

  .landing-page .hero-dot.is-active .hero-dot-fill {
    animation: none;
  }

  .landing-page .hero-carousel.is-ready .hero-slide,
  .landing-page .button {
    transition: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  /* No margin left beside the heading for the note; tuck it underneath. */
  .landing-page .marker-note {
    position: static;
    width: auto;
    margin-top: 10px;
  }

  .landing-page .marker-note .sketch {
    transform: rotate(-60deg);
    width: 44px;
    height: 36px;
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .landing-page .consult-block {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .landing-page .hero-slide,
  .landing-page .behind-grid,
  .landing-page .consult-block {
    grid-template-columns: 1fr;
  }

  .landing-page .consult-art img {
    width: 72px;
  }

  /* The journey turns vertical: arrows point down, and the return path runs
     up the left-hand side into step 1. */
  .landing-page .journey {
    position: relative;
    padding-left: 38px;
  }

  .landing-page .journey-steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .landing-page .journey-step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .landing-page .journey-loop {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 0;
    width: 38px;
    height: auto;
    margin: 0;
    border: 3px dashed var(--ink);
    border-right: 0;
    border-radius: 24px 0 0 24px;
  }

  .landing-page .journey-loop::before {
    top: -10.5px;
    left: auto;
    right: -4px;
    border: 9px solid transparent;
    border-right: 0;
    border-left: 13px solid var(--ink);
  }

  .landing-page .journey-loop-label {
    left: -10px;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: 1.05rem;
  }
}

@media (max-width: 560px) {
  .landing-page .hero {
    padding: 20px;
    border-radius: 18px;
  }

  .landing-page .hero-slide {
    gap: 22px;
  }

  .landing-page .hero-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-page .hero-dots {
    justify-content: center;
  }

  .landing-page .chalkboard {
    box-shadow:
      inset 0 0 0 7px var(--yellow),
      inset 0 0 0 10px var(--ink),
      var(--shadow-sm);
  }

  .landing-page .chalkboard .sketch {
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }

  .landing-page .journey-loop-label {
    font-size: 0.95rem;
  }
}

/* ---------- Phone menu ---------- */

/*
  The button exists in the markup on every width but only ever shows below
  640px. Keeping the breakpoint here and nowhere else is deliberate: landing.js
  never checks the width, it only toggles a class, so there is one place to
  change and no chance of the two disagreeing.
*/
.landing-page .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.landing-page .nav-toggle:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--ink);
}

/*
  Three bars drawn from one element: the middle is the box itself, the outer
  two are its pseudo-elements. They cross into an X when the menu is open, so
  the control says what it will do next rather than what it did.
*/
.landing-page .nav-toggle-bars,
.landing-page .nav-toggle-bars::before,
.landing-page .nav-toggle-bars::after {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.landing-page .nav-toggle-bars::before,
.landing-page .nav-toggle-bars::after {
  content: "";
  position: absolute;
}

.landing-page .nav-toggle-bars::before {
  transform: translateY(-8px);
}

.landing-page .nav-toggle-bars::after {
  transform: translateY(8px);
}

.landing-page .nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  /* The middle bar goes, so the two that remain can cross cleanly. */
  background: transparent;
}

.landing-page .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: rotate(45deg);
}

.landing-page .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .nav-toggle,
  .landing-page .nav-toggle-bars,
  .landing-page .nav-toggle-bars::before,
  .landing-page .nav-toggle-bars::after {
    transition: none;
  }
}

@media (max-width: 640px) {
  /*
    style.css turns the header into a column at 860px, which is what stacked
    five nav items into a 248px-tall block on a phone. Back to a row here: the
    wordmark and the button share the top line and the nav wraps underneath as
    a full-width panel.
  */
  .landing-page .site-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
  }

  .landing-page .nav-toggle {
    display: inline-flex;
    /* Anchors the absolutely positioned bars above. */
    position: relative;
  }

  /*
    In flow rather than overlaid. The header sits at the top of the page, so
    pushing the hero down is honest about what opened, and it avoids an overlay
    that would need its own z-index and scroll handling on a small screen.
  */
  .landing-page .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border: 3px solid var(--ink);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: var(--shadow-sm);
  }

  .landing-page .site-nav.is-open {
    display: flex;
  }

  /* Full-width rows, each a comfortable tap target. */
  .landing-page .site-nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 10px;
  }

  .landing-page .site-nav a:not(.button) + a.button {
    margin-top: 6px;
  }

  .landing-page .site-nav a.button {
    justify-content: center;
  }

  /*
    The footer links stack for the same reason the nav does: four items wrapped
    across a phone read as one run-on block rather than five destinations.
  */
  .landing-page .footer-links {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .landing-page .footer-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
  }

  .landing-page .footer-links a.button {
    justify-content: center;
  }
}