/* ============================================================
   YOMU TABLE LAMP — Xuduan You Studio
   Reconstructed 1:1 from YomuWebDev.pdf (1920 x 1080, 8 pages).

   SCALING MODEL  (unchanged from v1)
   --------------
   Every measurement is a *design pixel* from the PDF, multiplied by --u:
        --u = min(100vw, 1920px) / 1920
   So the site is pixel-identical to the PDF at 1920px wide and scales
   down proportionally. Below 1024px it becomes a single column.

   STRUCTURE
   ---------
   One .page per PDF page (8 total), grouped into 5 index sections by id:
   overview · prototype(2) · assembly · clientspace(2) · about(2)

   Each .page has a LEADING gap (padding-top: --gap) in its own background
   colour, so the gap between pages is consistent AND the header colour can
   flip cleanly over a solid band. .page--flush removes the gap (page 1, and
   page 6 so client-space pages 5+6 scroll as one continuous run of images).
   ============================================================ */

:root {
  --light: #ebe2d1;
  --dark:  #2e251c;

  --font-head: "adobe-jenson-pro-display", "Adobe Jenson Pro", Georgia, "Times New Roman", serif;
  --font-body: "solitaire-mvb-pro", "Helvetica Neue", Arial, sans-serif;

  --canvas: min(100vw, 1920px);
  --u: calc(var(--canvas) / 1920);
  --gutter: max(0px, calc((100vw - 1920px) / 2));

  --title-top:   calc(36 * var(--u));   /* Y of studio name + stuck Yomu title */
  --title-start: calc(525.5 * var(--u)); /* Y of Yomu title before it sticks (lowered for the landing image) */

  --gap: 12svh;                         /* consistent gap between pages */
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* smooth autoscroll is handled in script.js (tunable speed) — no CSS scroll-behavior */
body {
  position: relative;
  background: var(--light);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ============================================================
   FIXED OVERLAY UI  +  two-group colour system
   --ui-left  = studio name, caption, Yomu title
   --ui-right = the index
   They share one transition so they animate together, but can differ
   (e.g. page 8: dark name on cream, light index on the photo).
   ============================================================ */
body.lefttext-light  { --ui-left:  var(--light); }
body.lefttext-dark   { --ui-left:  var(--dark);  }
body.righttext-light { --ui-right: var(--light); }
body.righttext-dark  { --ui-right: var(--dark);  }

.brand, .project-title, .index { z-index: 50; }

/* ONE shared transition -> all header text changes colour simultaneously */
.brand__title, .brand__caption, .project-title, .index a, .index .dot {
  transition: color 0.5s ease, border-color 0.5s ease;
}

/* ---------- top-left: studio name + caption ---------- */
.brand {
  position: fixed;
  top: var(--title-top);
  left: calc(var(--gutter) + 60 * var(--u));
  max-width: calc(520 * var(--u));
}
.brand__title {
  display: block;
  color: var(--ui-left);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: calc(60 * var(--u));
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.002em;
}
.brand__caption {
  margin: calc(4 * var(--u)) 0 0;
  max-width: calc(470 * var(--u));
  color: var(--ui-left);
  font-size: calc(18 * var(--u));
  line-height: calc(21.6 * var(--u));
}

/* ---------- project title (Yomu): scrolls up, sticks, hides on page 8 ---------- */
.project-title {
  position: fixed;
  top: var(--title-start);                       /* script.js drives `top` */
  left: calc(var(--gutter) + 1064 * var(--u));
  color: var(--ui-left);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: calc(60 * var(--u));
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.002em;
  will-change: top;
  transition: color 0.5s ease, opacity 0.45s ease;
}
body.hide-title .project-title { opacity: 0; pointer-events: none; }

/* ---------- top-right: section index ---------- */
.index {
  position: fixed;
  top: calc(41 * var(--u));
  left: calc(var(--gutter) + 1720 * var(--u));
  font-size: calc(18 * var(--u));
}
.index ul { list-style: none; margin: 0; padding: 0; }
.index a {
  position: relative;
  display: block;
  padding-left: 0;
  color: var(--ui-right);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: calc(21.6 * var(--u));
  text-decoration: none;
  white-space: nowrap;
  clip-path: inset(-50% -50% -50% 0);            /* hides the parked dot off to the left (no fade) */
  transition: color 0.5s ease, padding-left 0.62s cubic-bezier(0.37, 0, 0.63, 1);
}
/* the circle: thicker stroke, smooth slide in/out — no fade; it's hidden by the
   link's clip-path while parked off to the left, and slides in with a gentle
   ease-in-out-sine curve. */
.index .dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border: calc(2 * var(--u)) solid var(--ui-right);
  border-radius: 50%;
  transform: translate(calc(-24 * var(--u)), -50%);   /* parked off-left, clipped */
  transition: border-color 0.5s ease, transform 0.62s cubic-bezier(0.37, 0, 0.63, 1);
}
.index a.is-active { padding-left: calc(24 * var(--u)); font-weight: 700; }
.index a.is-active .dot { transform: translate(0, -50%); }
.index a:hover { font-weight: 700; }

/* ============================================================
   PAGES + GAPS
   ============================================================ */
/* Every page (and therefore every leading gap) sits on the cream background.
   Full-bleed photos cover their own frame, so the cream only shows in the gaps. */
.page { position: relative; padding-top: var(--gap); background: var(--light); }
.page--flush { padding-top: 0; }
.page__inner { position: relative; }

/* shared caption that sits over a photo (always light) */
.caption--over {
  position: absolute;
  margin: 0;
  max-width: calc(560 * var(--u));
  color: var(--light);
  font-size: calc(18 * var(--u));
  line-height: calc(21.6 * var(--u));
}
.caption--bl { left: calc(var(--gutter) + 60 * var(--u));   bottom: calc(84 * var(--u)); }
.caption--br { left: calc(var(--gutter) + 1020 * var(--u)); bottom: calc(84 * var(--u)); }

/* ---------- full-bleed frames ---------- */
.hero, .pair { height: 100svh; overflow: hidden; }
.pair { display: flex; width: 100%; }
.pair__img { width: 50%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- 1) OVERVIEW (hero) ---------- */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.overview__body {
  position: absolute;
  left: calc(var(--gutter) + 1064 * var(--u));
  top: calc(611.5 * var(--u));
  width: calc(640 * var(--u));
  color: var(--light);
  font-size: calc(18 * var(--u));
  line-height: calc(21.6 * var(--u));
}
.overview__body p { margin: 0; }
.overview__body p + p { margin-top: calc(21.6 * var(--u)); }

/* ---------- 2) PROTOTYPE (big + 2 small + copy) ---------- */
.proto__inner { width: var(--canvas); margin: 0 auto; min-height: 100svh; }
.proto__body {
  position: absolute;
  left: calc(1060 * var(--u));
  top: calc(220 * var(--u));
  width: calc(610 * var(--u));
  color: var(--dark);
  font-size: calc(18 * var(--u));
  line-height: calc(21.6 * var(--u));
}
.proto__body p { margin: 0; }
.proto__body p + p { margin-top: calc(21.6 * var(--u)); }
.proto__fig { position: absolute; margin: 0; }
.proto__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.proto__fig figcaption {
  position: absolute; top: 100%; left: 0;
  margin-top: calc(5 * var(--u));
  white-space: nowrap;
  color: var(--dark);
  font-size: calc(18 * var(--u));
  line-height: calc(21.6 * var(--u));
}
.proto__fig--main { left: calc(60 * var(--u));   top: calc(224 * var(--u)); width: calc(900 * var(--u)); height: calc(733 * var(--u)); }
.proto__fig--2    { left: calc(1060 * var(--u)); top: calc(628 * var(--u)); width: calc(264 * var(--u)); height: calc(328 * var(--u)); }
.proto__fig--3    { left: calc(1410 * var(--u)); top: calc(628 * var(--u)); width: calc(262 * var(--u)); height: calc(328 * var(--u)); }

/* ---------- 4) ASSEMBLY (text left, two images right) ---------- */
.assembly__inner { width: var(--canvas); margin: 0 auto; min-height: 100svh; }
.assembly__body {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(535 * var(--u));
  width: calc(450 * var(--u));
  margin: 0;
  color: var(--dark);
  font-size: calc(18 * var(--u));
  line-height: calc(21.6 * var(--u));
}
/* page 4: one image (x 660, y 225, 1011 x 730 — matches the PDF frame exactly) */
.assembly__fig { position: absolute; left: calc(660 * var(--u)); top: calc(225 * var(--u)); width: calc(1011 * var(--u)); height: calc(730 * var(--u)); margin: 0; }
.assembly__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- 7) ABOUT — email list (image left, text right) ---------- */
.email__inner { width: var(--canvas); margin: 0 auto; min-height: 100svh; }
.email__fig { position: absolute; left: calc(59 * var(--u)); top: calc(224 * var(--u)); width: calc(602 * var(--u)); height: calc(733 * var(--u)); margin: 0; }
.email__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.email__text {
  position: absolute;
  left: calc(1060 * var(--u));
  top: calc(480 * var(--u));
  width: calc(600 * var(--u));
  color: var(--dark);
  font-size: calc(18 * var(--u));
  line-height: calc(21.6 * var(--u));
}
.email__text p { margin: 0; }
.email__text .email__meta { margin-top: calc(64 * var(--u)); }
.email__cta { font-weight: 700; text-decoration: none; }
.email__cta:hover { text-decoration: underline; }

/* ---------- 8) ABOUT — designer (text left, bike image right) ---------- */
.designer__inner { width: var(--canvas); margin: 0 auto; min-height: 100svh; }
.designer__text { position: absolute; left: calc(60 * var(--u)); top: calc(413 * var(--u)); width: calc(600 * var(--u)); }
.designer__title { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: calc(60 * var(--u)); line-height: 1; color: var(--dark); }
.designer__body { margin: calc(19 * var(--u)) 0 0; color: var(--dark); font-size: calc(18 * var(--u)); line-height: calc(21.6 * var(--u)); }
.designer__contact { margin: calc(22 * var(--u)) 0 0; color: var(--dark); font-size: calc(18 * var(--u)); line-height: calc(21.6 * var(--u)); }
.designer__fig { position: absolute; top: 0; right: 0; width: calc(961 * var(--u)); height: 100svh; margin: 0; }
.designer__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.designer__fig .caption--over { left: calc(59 * var(--u)); bottom: calc(48 * var(--u)); }

/* ============================================================
   MOBILE / NARROW  (single column)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --gap: 13svh; }

  .brand { top: 18px; left: 20px; max-width: 58vw; }
  .brand__title { font-size: clamp(20px, 5.4vw, 32px); }
  .brand__caption { margin-top: 4px; max-width: 52vw; font-size: clamp(11px, 2.6vw, 13px); line-height: 1.3; }

  .index { top: 18px; left: auto; right: 20px; }
  .index a { font-size: clamp(12px, 3vw, 15px); line-height: 1.55; }
  .index a.is-active { padding-left: 16px; }
  .index .dot { width: 9px; height: 9px; border-width: 2px; transform: translate(-18px, -50%); }
  .index a.is-active .dot { transform: translate(0, -50%); }

  /* Yomu title overlays the hero and scrolls away (script.js leaves it alone) */
  .project-title { position: absolute; top: 46svh; left: 20px; right: 20px; font-size: clamp(34px, 9vw, 64px); }

  /* generic: kill the absolute desktop placement, stack everything */
  .page__inner { width: auto !important; min-height: 0; height: auto; scroll-margin-top: 120px; }
  .page--hero .page__inner, .page--pair .page__inner { height: 100svh; }
  .page--pair.page--flush + .page--pair .page__inner,
  .page--pair .page__inner { height: auto; }

  /* OVERVIEW */
  .section--hero, .page--hero .hero { height: 100svh; }
  .overview__body { left: 20px; right: 20px; width: auto; top: auto; bottom: 7svh; font-size: clamp(13px, 3.4vw, 16px); line-height: 1.45; }
  .overview__body p + p { margin-top: 0.9em; }

  /* PROTOTYPE grid -> column */
  .page--proto .proto__inner { display: flex; flex-direction: column; gap: 30px; padding: 0 20px; }
  .proto__body { position: static; left: auto; top: auto; width: auto; max-width: 62ch; font-size: clamp(13px, 3.4vw, 16px); line-height: 1.45; }
  .proto__fig { position: static; width: auto !important; height: auto !important; }
  .proto__fig img { width: 100%; height: auto; }
  .proto__fig figcaption { position: static; margin-top: 8px; white-space: normal; font-size: clamp(12px, 3vw, 15px); line-height: 1.3; }

  /* PAIR pages -> stacked images (5+6 stay continuous = 4 images in a row) */
  .pair { flex-direction: column; height: auto; }
  .pair__img { width: 100%; height: 64svh; }
  .caption--over { font-size: clamp(12px, 3vw, 15px); line-height: 1.35; max-width: none; }
  .caption--bl, .caption--br { left: 20px; right: 20px; bottom: 4svh; }

  /* ASSEMBLY -> column */
  .page--assembly .assembly__inner { display: flex; flex-direction: column; gap: 26px; padding: 4svh 20px 0; }
  .assembly__body { position: static; left: auto; top: auto; width: auto; max-width: 62ch; font-size: clamp(13px, 3.4vw, 16px); line-height: 1.45; }
  .assembly__fig { position: static; width: auto !important; height: auto !important; }
  .assembly__fig img { width: 100%; height: auto; }

  /* ABOUT email -> column */
  .page--email .email__inner { display: flex; flex-direction: column; gap: 26px; padding: 0 20px; }
  .email__fig { position: static; left: auto; top: auto; width: auto !important; height: auto !important; }
  .email__fig img { width: 100%; height: auto; }
  .email__text { position: static; left: auto; top: auto; width: auto; max-width: 62ch; font-size: clamp(13px, 3.4vw, 16px); line-height: 1.45; }
  .email__text .email__meta { margin-top: 1.6em; }

  /* ABOUT designer -> column */
  .page--designer .designer__inner { display: flex; flex-direction: column; gap: 24px; padding: 4svh 20px 0; }
  .designer__text { position: static; left: auto; top: auto; width: auto; max-width: 62ch; }
  .designer__title { font-size: clamp(30px, 8vw, 60px); }
  .designer__body, .designer__contact { font-size: clamp(13px, 3.4vw, 16px); line-height: 1.5; }
  .designer__fig { position: static; width: auto !important; height: auto !important; }
  .designer__fig img { width: 100%; height: 60svh; object-fit: cover; }
  .designer__fig .caption--over { left: 20px; bottom: 4svh; }
}

/* ============================================================
   ACCESSIBILITY: respect reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}