/* About page — version 2.
   Implements Figma wC5383GSncabfPynmGpSzw node 738:1376 (1280 x 832).
   Loaded after landing.css, which supplies the tokens, body, grid canvas,
   stage and nav shell. */

:root {
  --link-navy: #1c304e;
}

/* ── "new york city" caption (rule at 1124,198; text at 1119,206) ─────── */

.place {
  position: absolute;
  left: 85.92cqw; /* 1119 / 1280, nudged −1.5cqw */
  top: 16.09cqw; /* 206 / 1280 */
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-size: 1.40625cqw; /* 18px */
  letter-spacing: -0.028125cqw; /* -0.36px */
  color: #000;
  white-space: nowrap;
  z-index: 3;
  /* Figma applies a 1px blur to these labels; it sharpens under the cursor
     so the word is always legible on demand. */
  filter: blur(1px);
  transition: filter 0.3s ease;
}

.place:hover,
.place:focus-within {
  filter: none;
}

.place-rule {
  position: absolute;
  /* Share the caption’s left edge; width reaches the designed right gutter
     (was 1124→1213 absolute before the place nudge). */
  left: 0;
  bottom: 100%;
  margin-bottom: 0.31cqw;
  width: 8.843cqw; /* 1213/1280 − place left (85.92cqw) */
  height: 0.3125cqw; /* 4px stroke */
  background: #000;
}

/* ── Portrait (627, 263 — 586.311 x 463.727, inner rotated -0.23deg) ──── */

.portrait {
  position: absolute;
  left: 48.984cqw; /* 627 / 1280 */
  top: 20.547cqw; /* 263 / 1280 */
  width: 45.806cqw; /* 586.311 / 1280 */
  height: 36.229cqw; /* 463.727 / 1280 */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.portrait img {
  width: 45.663cqw; /* 584.484 / 1280 */
  height: 36.048cqw; /* 461.411 / 1280 */
  object-fit: cover;
  transform: rotate(-0.23deg);
}

/* ── Intro block (69, 605 — width 339) ────────────────────────────────── */

.intro {
  position: absolute;
  left: 5.391cqw; /* 69 / 1280 */
  top: 47.266cqw; /* 605 / 1280 */
  width: 26.484cqw; /* 339 / 1280 */
  display: flex;
  flex-direction: column;
  gap: 0.78125cqw; /* 10px */
  z-index: 3;
}

.intro h1 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 2.34375cqw; /* 30px */
  line-height: normal;
  letter-spacing: -0.1171875cqw; /* -1.5px */
  color: #000;
  white-space: nowrap;
}

.intro h1 span {
  color: #252525;
}

.intro p {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-size: 1.25cqw; /* 16px */
  line-height: normal;
  letter-spacing: -0.025cqw; /* -0.32px */
  text-align: justify;
  color: #000;
}

.intro .hl {
  color: var(--link-navy);
}

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 43rem) {
  .stage--about {
    aspect-ratio: auto;
    min-height: 100svh;
    padding: 1.5rem 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    container-type: normal;
  }

  .place {
    position: static;
    align-self: flex-end;
    margin: 1.5rem 0 0.5rem;
    font-size: 0.95rem;
    filter: none;
  }

  .place-rule {
    position: static;
    display: block;
    width: 5rem;
    height: 3px;
    margin: 0 0 0.35rem auto;
  }

  .portrait {
    position: static;
    width: 100%;
    height: auto;
    margin: 1rem 0 2.5rem;
  }

  .portrait img {
    width: 100%;
    height: auto;
    aspect-ratio: 584 / 461;
  }

  .intro {
    position: static;
    width: auto;
    margin-top: auto;
    gap: 0.6rem;
  }

  .intro h1 {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    letter-spacing: -0.04em;
    white-space: normal;
  }

  .intro p {
    font-size: 1rem;
    letter-spacing: -0.01em;
    text-align: left;
  }
}

/* ══ Scroll panels ══════════════════════════════════════════════════════
   Sections below the first screen. Each is another 1280x832 frame, so they
   reuse .stage and position against the same cqw grid.
   Figma nodes 742:1395, 742:1505, 742:1563, 742:1594. */

.stage--panel {
  overflow: visible;
}

/* Snap mirrors landing: mandatory on the document scroller, stage starts +
   footer end. Scoped with :has(.stage--about) so other pages stay free.
   .not-designing is a zero-height sticky rail, not a snap target. */
html:has(.stage--about) {
  scroll-snap-type: y mandatory;
}

html:has(.stage--about) .stage--about,
html:has(.stage--about) .stage--panel {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

html:has(.stage--about) .foot {
  scroll-snap-align: end;
  scroll-snap-stop: normal;
}

/* The caption sits at a different x per frame; the rule is always 89px. */
.place--panel {
  left: 87.25cqw; /* 1136 / 1280, nudged −1.5cqw */
  top: 14.609cqw; /* 187 / 1280 */
}

.place--wide {
  left: 79.75cqw; /* 1040 / 1280, nudged −1.5cqw */
  top: 14.219cqw; /* 182 / 1280 */
}

/* ── The pinned "when I'm not designing" caption ───────────────────────
   The three panels below share one caption. Rather than repeating it and
   letting it blink at each frame boundary, a single copy sticks while the
   panels scroll past it.

   The stickiness lives on .nd-rail; .nd-rail-inner carries the container
   query so the caption can keep its cqw coordinates. Keeping those on
   separate elements matters — container-type applies containment, which
   interferes with position: sticky on the same element. Both are zero
   height, so the caption takes no space in the flow. */

.not-designing {
  position: relative;
}

.nd-rail {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 4;
}

.nd-rail-inner {
  position: relative;
  width: min(100vw, calc(var(--canvas-w) * 1px));
  height: 0;
  margin-inline: auto;
  container-type: inline-size;
}

/* No backdrop on the caption itself: it sits on whatever scrolls behind it,
   and the rule keeps its own black fill. (An earlier cream backdrop here also
   overrode .place-rule's background, which painted the line cream on cream
   and hid it entirely.) */
.nd-rail .place {
  background: none;
}

/* The caption is pinned at 1040–1218 x 182, which is exactly where the food
   stack, the third poster and the third album travel. Rather than painting a
   cream scrim over them — which would hide the dot grid in that band — the
   panel content is masked to transparent as it rises past the caption, so it
   dissolves and the fixed grid stays visible straight through. The gradient
   is viewport-tracked, so js/panel-fade.js owns the actual mask values. */

/* Rules share each caption’s left edge; width stretches to the same right
   gutter (was 1116→1205 absolute before the place nudge). */
.place--panel .place-rule,
.place--wide .place-rule {
  right: auto;
  bottom: auto;
  margin-bottom: 0;
  left: 0;
}

.place--panel .place-rule {
  top: -0.9375cqw; /* 175 − 187 */
  width: 6.891cqw; /* 1205/1280 − place left (87.25cqw) */
}

.place--wide .place-rule {
  top: -0.547cqw; /* 175 − 182 */
  width: 14.391cqw; /* 1205/1280 − place left (79.75cqw) */
}

/* ── Shared prose column (all four sit at x=69) ───────────────────────── */

.prose {
  position: absolute;
  left: 5.391cqw; /* 69 / 1280 */
  width: 26.484cqw; /* 339 / 1280 */
  display: flex;
  flex-direction: column;
  gap: 0.78125cqw; /* 10px */
  z-index: 3;
}

.prose h2 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 2.34375cqw; /* 30px */
  line-height: normal;
  letter-spacing: -0.0703125cqw; /* -0.9px */
  color: #323232;
}

.prose p {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
    Helvetica, Arial, sans-serif;
  font-size: 1.25cqw; /* 16px */
  line-height: normal;
  letter-spacing: -0.025cqw; /* -0.32px */
  text-align: justify;
  color: #000;
}

/* The design leaves a blank line between paragraphs rather than a margin. */
.prose p + p {
  margin-top: 1.25cqw;
}

.prose .tealed {
  color: #436871;
}

/* Vertical placement differs per frame (all are centre-offsets in Figma). */
.prose--why { top: 24.7cqw; }
.prose--cook { top: 40.938cqw; } /* 524 / 1280 */
.prose--watch { top: 29.6cqw; }
.prose--music { top: 35.4cqw; }

.prose--watch h2 { width: 16.484cqw; line-height: 2.34375cqw; }
.prose--music h2 { width: 17.656cqw; }
.prose--cook { width: 31.016cqw; } /* 397 / 1280 */

/* ── Why design: the three value cards ────────────────────────────────── */

.values {
  position: absolute;
  left: 62.5cqw; /* 800 / 1280 */
  top: 20.547cqw; /* 263 / 1280 */
  width: 31.641cqw; /* 405 / 1280 */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* Figma stacks these on a 143px pitch (263 / 406 / 549). The cards size to
     their text and come out 132 here, so the gap carries the remainder. */
  gap: 0.859cqw;
  z-index: 3;
}

.values li {
  display: flex;
  align-items: center;
  gap: 1.5625cqw; /* 20px */
  padding: 2.656cqw; /* 34px */
  background: #436871;
  color: #e7e7dd;
  transition:
    transform 0.35s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

/* Not specified in the frame. Kept quiet: the card lifts a little, warms a
   shade, and the numeral comes up from grey to match the body text. */
.values li:hover {
  transform: translateY(-3px);
  background: #4c757f;
  box-shadow: 0 10px 22px -8px rgba(29, 77, 78, 0.45);
}

.values-num,
.values li:hover .values-num {
  transition: color 0.35s ease;
}

.values li:hover .values-num {
  color: #e7e7dd;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.stage--about) {
    scroll-snap-type: none;
  }

  .values li,
  .values li:hover {
    transform: none;
    transition: background-color 0.2s ease;
  }
}

.values-num {
  flex: none;
  width: 2.813cqw;
  font-size: 2.34375cqw; /* 30px */
  letter-spacing: -0.046875cqw;
  text-align: right;
  color: #c3c3c3;
}

.values-body {
  display: flex;
  flex-direction: column;
  gap: 0.156cqw; /* 2px */
  min-width: 0;
}

.values-body strong {
  font-weight: 700;
  font-size: 1.40625cqw; /* 18px */
  line-height: 2.694cqw; /* 34.483px */
  letter-spacing: -0.0140625cqw;
}

.values-body span {
  font-size: 0.9375cqw; /* 12px */
  line-height: normal;
}

/* ── Cooking: photo grid (569, 302) ───────────────────────────────────── */

.food {
  position: absolute;
  left: 44.453cqw; /* 569 / 1280 */
  top: 23.594cqw; /* 302 / 1280 */
  display: flex;
  gap: 1.016cqw; /* 13px */
  z-index: 3;
}

.food-main {
  width: 30.858cqw; /* 394.98 / 1280 */
  height: 26.775cqw; /* 342.715 / 1280 */
  object-fit: cover;
}

.food-stack {
  display: flex;
  flex-direction: column;
  gap: 1.016cqw;
  width: 17.78cqw; /* 227.59 / 1280 */
}

.food-stack img {
  width: 100%;
  object-fit: cover;
}

.food-stack img:first-child { aspect-ratio: 223 / 163; }
.food-stack img:last-child { aspect-ratio: 183 / 132; }

/* ── Watching + music: numbered picks (546, 364 / 546, 410) ───────────── */

.picks {
  position: absolute;
  left: 42.656cqw; /* 546 / 1280 */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.5625cqw; /* 20px */
  z-index: 3;
}

.picks--posters { top: 28.438cqw; align-items: center; }
.picks--albums { top: 32.031cqw; align-items: flex-start; }

.picks li {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.78125cqw; /* 10px */
}

.picks-num {
  width: 100%;
  font-size: 2.34375cqw; /* 30px */
  letter-spacing: -0.046875cqw;
  text-align: right;
  color: #c3c3c3;
}

.picks--posters li img {
  width: 15.763cqw; /* 201.768 / 1280 */
  height: 23.645cqw; /* 302.652 / 1280 */
  object-fit: cover;
}

.picks--posters li:last-child img {
  width: 16.361cqw;
  height: 23.691cqw;
}

.picks--albums li img {
  width: 15.625cqw; /* 200px */
  height: 15.625cqw;
  object-fit: cover;
}

.picks-label {
  width: 11.328cqw; /* 145 / 1280 */
  font-size: 1.25cqw; /* 16px */
  letter-spacing: -0.025cqw;
  text-align: right;
  color: #000;
}

.picks--albums li:first-child .picks-label {
  width: auto;
  white-space: nowrap;
}

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 43rem) {
  /* Stacked mobile panels are variable height — snap would feel sticky. */
  html:has(.stage--about) {
    scroll-snap-type: none;
  }

  .stage--panel {
    aspect-ratio: auto;
    min-height: 0;
    padding: 3rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    container-type: normal;
  }

  /* Pinning a caption over a single-column phone layout just eats screen,
     so the rail collapses back into normal flow. */
  .nd-rail {
    position: static;
    height: auto;
  }


  .nd-rail-inner {
    width: auto;
    height: auto;
    padding: 3rem 1.25rem 0;
    container-type: normal;
  }

  .place--panel,
  .place--wide {
    position: static;
    align-self: flex-end;
    margin: 0;
    font-size: 0.95rem;
    filter: none;
  }

  .nd-rail-inner .place--wide {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .place--panel .place-rule,
  .place--wide .place-rule {
    position: static;
    display: block;
    width: 5rem;
    height: 3px;
    margin: 0 0 0.35rem auto;
  }

  .prose,
  .values,
  .food,
  .picks {
    position: static;
    width: auto;
  }

  .prose h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); letter-spacing: -0.03em; width: auto; line-height: 1.15; }
  .prose p { font-size: 1rem; letter-spacing: -0.01em; text-align: left; }
  .prose p + p { margin-top: 1rem; }

  .values { gap: 0.75rem; }
  .values li { gap: 1rem; padding: 1.25rem; }
  .values-num { width: 2.2rem; font-size: 1.5rem; }
  .values-body strong { font-size: 1.05rem; line-height: 1.6; }
  .values-body span { font-size: 0.85rem; }

  .food { flex-direction: column; gap: 0.75rem; }
  .food-main { width: 100%; height: auto; aspect-ratio: 395 / 343; }
  .food-stack { flex-direction: row; width: 100%; gap: 0.75rem; }
  .food-stack img { width: 50%; }

  .picks { gap: 0.75rem; }
  .picks li { flex: 1; min-width: 0; }
  .picks-num { font-size: 1.3rem; }
  .picks--posters li img,
  .picks--posters li:last-child img { width: 100%; height: auto; aspect-ratio: 2 / 3; }
  .picks--albums li img { width: 100%; height: auto; aspect-ratio: 1; }
  .picks-label { width: auto; font-size: 0.8rem; }
  .picks--albums li:first-child .picks-label { white-space: normal; }
}