/*
 * Homepage v2 (Figma: "Homepage v2 — Scroll", H01–H10).
 *
 * Sizes are the Figma frame's px at 1440 × 900, written as calc(N * var(--u)).
 * --u is one design pixel: it scales with the window so each section keeps its
 * proportions, and never drops below ~0.6px so text stays legible.
 *
 * Fonts: Figma uses stand-ins; per the Foundations page they map to
 *   Bodoni Moda → Against (custom, "GOODALL,")
 *   Playfair Display → Ivyora Display 400
 *   Cormorant Garamond Light Italic → Ivyora Text 300 italic
 *   Pinyon Script → Altesse Std 24pt
 *   Jost → Soleil
 */
@font-face {
  font-family: "Against";
  src: url("../assets/cdn.prod.website-files.com/67e188bcae1b9517b8659be5/67e307938ae8ac14fce9a25a_against regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000;
  --cream: #ece7dc;
  --cream-50: #ece7dc80;
  --red: #811600;
  --ink: #222;

  --display: "Against", "Times New Roman", serif;
  --serif: ivyora-display, "Times New Roman", serif;
  --serif-italic: ivyora-text, "Times New Roman", serif;
  --script: altesse-std-24pt, cursive;
  --sans: soleil, sans-serif;

  --u: max(0.6px, min(100vw / 1440, 100vh / 900));
  --gutter: calc(72 * var(--u));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.script { font-family: var(--script); text-transform: none; }

/* Small uppercase label (Figma "Sans/Meta": 11/16, 12% tracking) */
.meta {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-50);
}
.meta--red { color: var(--red); }
.meta--cream { color: var(--cream); }

/* ---- Fixed chrome: nav, scroll rail ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 0 50px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__logo img { width: 70px; height: auto; }
.nav__link { font-family: var(--script); font-size: 18px; line-height: 18px; color: var(--cream); }

/* Right-edge rail (Figma component "Scroll rail"): active label red,
   others cream at 40%. On red sections: black, active cream. */
.rail {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rail__link { color: rgb(236 231 220 / 0.4); transition: color 0.4s var(--ease); }
.rail__link:hover { color: var(--cream); }
.rail__link.is-active { color: var(--red); }
body.on-red .rail__link { color: var(--black); }
body.on-red .rail__link.is-active { color: var(--cream); }

/* "Open page" link (Figma component): bottom-left of each section. */
.open-link {
  position: absolute;
  left: var(--gutter);
  bottom: 44px;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: pre;
  color: var(--cream);
  transition: color 0.3s var(--ease);
}
.open-link:hover { color: var(--red); }
.open-link--inline { position: static; display: inline-block; margin-top: calc(30 * var(--u)); }
.open-link[hidden] { display: none; }

/* ---- Sections ---- */
.sec { position: relative; min-height: 100vh; overflow: hidden; }

/* Scroll-driven scenes: a tall section with a pinned 100vh frame inside.
   js/home.js writes the scene's progress (0 → 1) to --p. */
.scene { overflow: visible; }
.scene__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* Reveal on enter (js/home.js adds .is-in) */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.services__item:nth-child(2) { transition-delay: 0.08s; }
.services__item:nth-child(3) { transition-delay: 0.16s; }
.services__item:nth-child(4) { transition-delay: 0.08s; }
.services__item:nth-child(5) { transition-delay: 0.16s; }
.services__item:nth-child(6) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- H01 Hero: just "GOODALL, Michelle", as on v1 ---- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 var(--gutter) calc(120 * var(--u));
}
/* As the hero scrolls away, the name slides left and the signature right (--q: 0 → 1). */
.hero__name {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: 1;
  text-align: center;
  transform: translate3d(calc(var(--q, 0) * -60vw), 0, 0);
}
.hero__sig {
  position: absolute;
  right: calc(-40 * var(--u));
  top: calc(130 * var(--u));
  font-family: var(--script);
  font-size: calc(60 * var(--u));
  line-height: 1;
  white-space: nowrap;
  transform: translate3d(calc(var(--q, 0) * 120vw), 0, 0);
}
.hero__blurb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(140 * var(--u));
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(90 * var(--u));
  transform: translateX(-50%);
  font-size: 7px;
  line-height: 20px;
  color: var(--cream-50);
  white-space: pre;
}

/* ---- H02 Manifesto ---- */
.manifesto { height: 260vh; }
.manifesto__text {
  position: absolute;
  left: var(--gutter);
  top: calc(184 * var(--u));
  width: calc(1222 * var(--u));
  font-family: var(--serif);
  font-size: calc(90 * var(--u));
  line-height: 1;
  text-transform: uppercase;
}
.w {
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.6s var(--ease), color 0.8s var(--ease);
}
.w.is-on { opacity: 1; }
.w--script {
  font-family: var(--script);
  font-size: 1.333em;
  line-height: 0;
  text-transform: none;
}
.w--script.is-on { color: var(--cream); }

/* ---- H03 I do the lot (red) ---- */
.services {
  background: var(--red);
  color: var(--black);
  padding: calc(120 * var(--u)) var(--gutter) 0;
}
.services__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(90 * var(--u));
  line-height: 1;
  text-transform: uppercase;
}
.services__list {
  display: grid;
  grid-template-columns: repeat(2, calc(560 * var(--u)));
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: calc(100 * var(--u));
  margin-top: calc(120 * var(--u));
}
.services__item {
  display: grid;
  grid-template-columns: calc(60 * var(--u)) 1fr;
  align-items: start;
  height: calc(150 * var(--u));
  border-top: 1px solid var(--black);
  padding-top: calc(22 * var(--u));
}
.services__item .meta { color: var(--black); }
.services__name {
  margin-top: calc(8 * var(--u));
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 300;
  font-size: calc(60 * var(--u));
  line-height: calc(64 * var(--u));
  color: var(--cream);
}
.services .open-link { color: var(--black); }

/* ---- H04 The glance: the cloud (js/cloud.js) ---- */
.cloud { height: 600vh; }
/* Everything here is placed in Figma px around the frame's centre (720, 450)
   and scaled by --k, the stage scale js/cloud.js writes on the pin. */
.cloud .scene__pin { --k: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cloud__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 1440px;
  height: 900px;
  transform: translate(-50%, -50%) scale(var(--k));
}
.cloud__card {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 150px;
  height: 200px;
  transform-origin: 50% 50%;
  overflow: hidden;
  background: var(--ink);
  will-change: transform, opacity;
}
.cloud__card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cloud__card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Disciplines around the edges (G1, G3) */
.cloud__magnets { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cloud__magnet {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 300;
  font-size: max(15px, calc(24px * var(--k)));
  line-height: 1.17;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.cloud__magnet:hover, .cloud__magnet.is-active { color: var(--red); }
.cloud__magnet:focus-visible { outline: 1px solid var(--cream-50); outline-offset: 4px; }
.cloud__count { margin-left: 0.45em; }
.cloud__magnet[data-pos^="tl"] { left: calc(50% + (72px - 720px) * var(--k)); }
.cloud__magnet[data-pos^="tr"] { right: calc(50% - (1368px - 720px) * var(--k)); }
.cloud__magnet[data-pos$="1"] { top: calc(50% + (150px - 450px) * var(--k)); }
.cloud__magnet[data-pos$="2"] { top: calc(50% + (450px - 450px) * var(--k)); }
.cloud__magnet[data-pos$="3"] { top: calc(50% + (690px - 450px) * var(--k)); }

/* G3 sorted heading */
.cloud__sorted {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + (170px - 450px) * var(--k));
  z-index: 3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.cloud__sorted-title { font-family: var(--script); font-size: calc(100px * var(--k)); line-height: 1.25; }
.cloud__sorted-count { margin-top: calc(5px * var(--k)); white-space: pre; }

/* G2 caption for the card under the cursor */
.cloud__focus {
  position: absolute;
  left: calc(50% + (72px - 720px) * var(--k));
  top: calc(50% + (700px - 450px) * var(--k));
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.cloud__focus.is-on { opacity: 1; }
.cloud__focus-meta { white-space: pre; }
.cloud__focus-name {
  margin-left: calc(-6px * var(--k));
  font-family: var(--script);
  font-size: calc(100px * var(--k));
  line-height: 1.25;
  white-space: nowrap;
}

/* G4: "Beloved Projects" arrives behind the gathering deck */
.cloud__beloved {
  position: absolute;
  left: calc(50% + (72px - 720px) * var(--k));
  top: calc(50% + (190px - 450px) * var(--k));
  z-index: 0;
  font-family: var(--script);
  font-size: calc(250px * var(--k));
  line-height: calc(200px * var(--k));
  opacity: 0;
  pointer-events: none;
}

.cloud__hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + (840px - 450px) * var(--k));
  z-index: 3;
  text-align: center;
  white-space: pre;
  pointer-events: none;
}
.cloud__hint--gather { opacity: 0; }

/* G4 → Beloved Projects. The photo opens out from the deck's top card
   (js/cloud.js animates its clip-path), then the heading fades in. */
.cloud__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.cloud__handoff {
  position: absolute;
  left: var(--gutter);
  top: calc(150 * var(--u));
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.cloud__handoff-title {
  margin-top: calc(24 * var(--u));
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(250 * var(--u));
  line-height: calc(200 * var(--u));
}
.cloud__open { z-index: 3; opacity: 0; visibility: hidden; }
/* "04 Projects" on the rail jumps to the cloud's last screen. */
.cloud__anchor { position: absolute; left: 0; right: 0; bottom: 0; height: 100vh; pointer-events: none; }

/* ---- H06–H08 Featured projects ---- */
.project {
  display: grid;
  grid-template-columns: calc(576 * var(--u)) 1fr;
}
/* Photo strip on the left 40% slides in from the left as the section enters. */
.project__strip {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(576 * var(--u));
  overflow: hidden;
  transform: translate3d(calc((1 - var(--e, 0)) * -100%), 0, 0);
}
.project__strip img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.project__card {
  position: absolute;
  left: calc(144 * var(--u));
  top: calc(230 * var(--u));
  width: calc(320 * var(--u));
}
.project__image { width: calc(315 * var(--u)); height: calc(315 * var(--u)); object-fit: cover; }
.project__label {
  position: absolute;
  left: 0;
  top: calc(312 * var(--u));
  font-family: var(--serif);
  font-size: calc(20 * var(--u));
  line-height: calc(50 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.project__script {
  position: absolute;
  left: calc(18 * var(--u));
  top: calc(320 * var(--u));
  font-family: var(--script);
  font-size: calc(100 * var(--u));
  line-height: calc(125 * var(--u));
  color: var(--red);
  white-space: nowrap;
}
.project__info {
  position: absolute;
  left: calc(720 * var(--u));
  top: calc(250 * var(--u));
  width: calc(560 * var(--u));
}
.project__blurb { margin-top: 24px; max-width: max(440px, calc(440 * var(--u))); font-size: 15px; line-height: 24px; }
.project__scope-label { margin-top: calc(90 * var(--u)); }
.project__scope {
  margin-top: 10px;
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 300;
  font-size: calc(50 * var(--u));
  line-height: 1;
}

/* ---- H09 The index & the lab ---- */
.more { padding: calc(150 * var(--u)) var(--gutter) 0; }
.more__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(90 * var(--u));
  line-height: 1;
  text-transform: uppercase;
}
.more__title .script { font-size: 1.333em; line-height: 0; }
.more__cols {
  display: grid;
  grid-template-columns: calc(648 * var(--u)) 1fr;
  margin-top: calc(90 * var(--u));
}
.more__col + .more__col { border-left: 1px solid var(--cream); padding-left: calc(47 * var(--u)); }
.more__name { font-family: var(--script); font-size: calc(100 * var(--u)); line-height: calc(125 * var(--u)); }
.more__desc { margin-top: calc(15 * var(--u)); font-size: 15px; line-height: 24px; }
.more__thumbs { display: flex; gap: calc(20 * var(--u)); margin-top: calc(36 * var(--u)); }
.more__thumbs > * { width: calc(130 * var(--u)); height: calc(170 * var(--u)); object-fit: cover; }
.more__empty { background: var(--ink); }

/* ---- H10 Contact (red) ---- */
.contact {
  background: var(--red);
  color: var(--black);
  padding: calc(200 * var(--u)) var(--gutter) 0;
}
.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(90 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.contact__title .script { font-size: 1.333em; line-height: 0; color: var(--cream); }
.contact__email {
  display: inline-block;
  margin-top: calc(130 * var(--u));
  padding-bottom: calc(6 * var(--u));
  border-bottom: 1px solid var(--cream);
  font-family: var(--serif);
  font-size: calc(40 * var(--u));
  line-height: calc(44 * var(--u));
  text-transform: uppercase;
  color: var(--cream);
}
.contact__links {
  display: flex;
  gap: calc(110 * var(--u));
  margin-top: calc(44 * var(--u));
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 300;
  font-size: calc(24 * var(--u));
  line-height: calc(28 * var(--u));
  white-space: pre;
}
.contact__footer { position: absolute; left: var(--gutter); bottom: 94px; color: var(--black); }
.contact .open-link { color: var(--black); }

/* ---- Mobile: no v2 mobile frames yet, so sections stack. ---- */
@media (max-width: 767px) {
  :root { --u: 0.62px; --gutter: 24px; }

  .nav { height: 64px; padding: 0 24px 0 20px; }
  .nav__logo img { width: 44px; }
  .rail { display: none; }
  .open-link { position: static; display: inline-block; margin-top: 40px; }
  .scene__pin .open-link { position: absolute; bottom: 28px; margin: 0; }

  .sec:not(.scene) { min-height: 0; padding-bottom: 72px; }
  .sec.contact { min-height: 100svh; }

  .sec.hero { height: 100svh; min-height: 0; padding-bottom: 0; }
  /* Against is wide: 14.5vw keeps "GOODALL," inside the gutters on phones. */
  .hero__name { font-size: 14.5vw; }
  .hero__sig { font-size: 9vw; top: 1.6em; right: 0; }
  .hero__blurb { bottom: 110px; font-size: 12px; line-height: 18px; }
  .hero__scroll { bottom: 70px; }

  .manifesto__text { top: 120px; width: auto; right: var(--gutter); font-size: 38px; }

  .services { padding-top: 100px; }
  .services__title { font-size: 44px; }
  .services__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; margin-top: 48px; }
  .services__item { height: auto; padding: 16px 0 24px; grid-template-columns: 40px 1fr; }
  .services__name { font-size: 34px; line-height: 38px; }

  .cloud__magnets { inset: 76px 16px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
  .cloud__magnet { position: static; font-size: 16px; }
  .cloud__sorted { top: 160px; }
  .cloud__sorted-title { font-size: 44px; }
  .cloud__sorted-count { white-space: normal; padding: 0 24px; }
  .cloud__focus { left: 24px; top: auto; bottom: 96px; }
  .cloud__focus-name { font-size: 48px; margin-left: -3px; }
  .cloud__beloved { left: 24px; top: 140px; font-size: 104px; line-height: 92px; }
  .cloud__hint { top: auto; bottom: 28px; padding: 0 24px; white-space: normal; }
  .cloud__handoff { top: 140px; }
  .cloud__handoff-title { font-size: 104px; line-height: 92px; }


  .project { display: block; padding: 0 var(--gutter) 72px; }
  .project__strip { position: relative; width: auto; height: 55vh; margin: 0 calc(var(--gutter) * -1); }
  .project__card { position: relative; left: auto; top: auto; width: auto; margin-top: -120px; padding-left: 24px; }
  .project__image { width: 200px; height: 200px; }
  .project__label { position: relative; top: auto; margin-top: -4px; font-size: 16px; line-height: 40px; }
  .project__script { position: relative; left: 12px; top: -48px; margin-bottom: -48px; font-size: 64px; line-height: 80px; }
  .project__info { position: relative; left: auto; top: auto; width: auto; margin-top: 24px; }
  .project__scope-label { margin-top: 32px; }
  .project__scope { font-size: 32px; }

  .more { padding-top: 120px; }
  .more__title { font-size: 44px; }
  .more__cols { grid-template-columns: 1fr; margin-top: 40px; }
  .more__col + .more__col { border-left: 0; border-top: 1px solid var(--cream); padding: 40px 0 0; margin-top: 48px; }
  .more__name { font-size: 64px; line-height: 80px; }
  .more__thumbs > * { width: calc((100vw - 48px - 24px) / 3); height: calc((100vw - 48px - 24px) / 3 * 1.3); }

  .contact { min-height: 100svh; padding-top: 140px; }
  .contact__title { font-size: 40px; white-space: normal; }
  .contact__email { margin-top: 64px; font-size: 22px; line-height: 28px; }
  .contact__links { flex-direction: column; gap: 12px; font-size: 22px; }
  .contact__footer { position: static; margin-top: 64px; }
}