/* OFF SCRIPT prototype: Chapters 1-3
   Every colour, length and easing is a variable in :root. main.js reads them,
   so tune here, reload, and the scroll timeline follows. */

/* Registered so the folded corners can transition (brand.md §9) */
@property --frame-fold-ratio { syntax: '<number>'; inherits: true; initial-value: 0.2; }
@property --button-fold-size { syntax: '<length>'; inherits: true; initial-value: 14px; }

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/Fonts/BricolageGrotesque-Variable.ttf') format('truetype');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/Fonts/InstrumentSans-Variable.ttf') format('truetype');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colour (brand.md §3) ---------- */
  --paper-white: #F4EFE6;
  --paper-white-rgb: 244 239 230;
  --charcoal: #1F1F1E;
  --charcoal-rgb: 31 31 30;
  --orange: #FF5B1F;
  --orange-fold: #B93A0B;
  --concrete: #8C8A85;
  --concrete-rgb: 140 138 133;
  --paper-shade: #DCD4C6;
  --raw-timber: #C9A27A;              /* imagery only: stands in for the barn photo */
  --shadow-paper: rgba(31, 31, 30, 0.14);

  /* ---------- Placeholders ---------- */
  --ph-routine: var(--charcoal);      /* hero tiles */
  --ph-barn: var(--raw-timber);       /* warm neutral */
  --ph-discovery: var(--paper-white); /* Chapter 3 background while the photo loads */
  --routine-ratio: 1 / 1;             /* 00-routine.webp */

  /* ---------- Images ---------- */
  --discovery-focus: 50% 50%;         /* crop focus of 01-discovery (object-position) */

  /* Chapter 3 text overlay: Paper White gradient under the text (left to right; bottom up on phones) */
  --discovery-scrim-strong: 0.82;     /* opacity at the edge behind the text */
  --discovery-scrim-soft: 0.62;       /* opacity where the text block ends */
  --discovery-scrim-hold: 55%;        /* how far across the soft opacity reaches */
  --discovery-scrim-end: 85%;         /* where the gradient has fully faded */
  --discovery-scrim-direction: 90deg;

  /* ---------- Type ---------- */
  --font-headline: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --fs-display: clamp(44px, 8vw, 128px);
  --lh-display: 0.9;                  /* hero headline line height */
  --display-mask-bleed: 0.15em;       /* extra room in the hero's line masks so tight lines don't clip letters */
  --fs-h2: clamp(32px, 5vw, 72px);
  --fs-h3: clamp(24px, 3vw, 40px);
  --fs-body-lg: clamp(18px, 1.6vw, 22px);
  --fs-label: 15px;
  --fw-headline: 600;
  --fw-subhead: 300;                  /* Bricolage subheads; Instrument Sans can't go below 400 */
  --fw-body: 400;                     /* lightest weight in Instrument Sans */
  --body-alpha: 0.6;                  /* body text: charcoal (or paper white) at 60% */

  /* ---------- Shapes ---------- */
  --fold-angle: 8deg;
  --door-ratio: 5 / 8;
  --sheet-ratio: 4 / 5;               /* sheet.svg is 400 x 500 */

  /* ---------- Spacing / layout ---------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --side-pad: clamp(20px, 5vw, 72px);
  --wordmark-width: 112px;
  --footer-logo-w: clamp(240px, 56vw, 880px);  /* the footer's huge wordmark */
  --footer-credit-size: 14px;
  --focus-width: 2px;
  --focus-offset: 3px;

  /* ---------- Scroll lengths (storyboard §2) ---------- */
  --ch1-length: 100dvh;               /* the hero viewport; Chapter 2 pins from here */
  --ch2-length: 250vh;
  --ch3-length: 150vh;
  --scrub: 0.6;

  /* ---------- Chapter 1: the routine ---------- */
  --grid-cols: 4;
  --grid-rows: 3;
  --grid-gutter: 2px;
  --grid-line: rgb(var(--concrete-rgb) / 0.45);  /* quiet lines so the headline reads first */
  --grid-tint: 0;                     /* charcoal overlay on each cell */
  --sheet-col: 2;                     /* 0-based cell that holds the sheet */
  --sheet-row: 0;
  --sheet-cell-fit: 0.72;             /* sheet height as a share of the cell */
  --sheet-offset-x: 6px;              /* "slightly out of line with the grid" */
  --sheet-offset-y: 6px;
  --shadow-rest-x: 6px;
  --shadow-rest-y: 8px;
  --shadow-blur: 6px;

  --ease-load: power3.out;
  --load-cell-duration: 0.6s;
  --load-cell-stagger: 0.05s;
  --load-sheet-delay: 0.4s;
  --load-sheet-duration: 0.6s;
  --load-sheet-drop: 40px;
  --load-sheet-overshoot: 1.5deg;
  --load-sheet-settle: 0.3;           /* share of the drop spent settling the overshoot */
  --load-headline-delay: 0.15s;
  --load-headline-duration: 0.7s;
  --load-headline-stagger: 0.12s;
  --cue-line-length: 48px;
  --cue-duration: 1.6s;
  --cue-pause: 0.6s;
  --cue-fade: 0.1;                    /* share of beat A before the cue is gone */

  /* ---------- Chapter 2: the interruption ---------- */
  /* Beat boundaries, as a share of --ch2-length (D runs to the end) */
  --beat-a-end: 0.3;                  /* A: headline fades up, card straightens and grows, grid recedes */
  --beat-b-end: 0.45;                 /* B: a darker-orange 8° crease draws across the card */
  --beat-c-end: 0.75;                 /* C: the door panel swings open, the photo shows through */

  /* A. Lift */
  --ease-lift: power2.inOut;
  --lift-headline-y: -40px;
  --lift-grid-scale: 0.96;            /* the grid recedes */
  --card-grow: 1.08;                  /* the card grows slightly as it straightens */
  --lift-shadow-x: 18px;
  --lift-shadow-y: 28px;

  /* B. Outline: a darker-orange line traces the door, one continuous stroke
     (up the hinge side, across the top, down, back along the bottom) */
  --ease-outline: power1.inOut;
  --outline-width: 2px;               /* in card units (it grows with the card) */
  --crease-y: 30%;                    /* static sheet only: where its two faces meet */
  --crease-width: 2px;

  /* C. Door */
  --ease-door: power2.inOut;
  --door-height: 0.66;                /* door height as a share of the card height */
  --door-perspective: 1400px;
  --door-swing: -80deg;               /* rotateY on the left hinge */
  --door-shade: 0.45;                 /* charcoal over the panel as it turns away from the light */
  --photo-dim: 0.15;                  /* the photo behind the door at 85% brightness */

  /* D. Reveal */
  --ease-open: power3.inOut;
  --open-grid-scale: 0.9;
  --card-exit-scale: 1.8;             /* the card scales up... */
  --card-exit-x: 0.45;                /* ...and slides out (share of the screen width) */
  --card-exit-y: -0.8;                /* (share of the screen height; negative = up) */

  /* Legacy pieces still referenced by the static sheet */
  --flap-perspective: 1200px;

  /* ---------- Chapter 3: the discovery (storyboard §6) ---------- */
  --ease-settle: power2.out;
  --settle-share: 0.35;
  --drift-scale: 1.04;
  --ease-text: power3.out;
  --text-reveal-duration: 0.7s;
  --text-stagger: 0.5s;                /* relative spacing of the lines within the reveal */
  --text-reveal-end: 0.85;            /* share of Chapter 3 by which all text is in (starts at --settle-share) */

  /* ---------- Chapter 4: the possibilities ---------- */
  /* Scroll lengths (desktop). Beat A runs at the end of Chapter 3's pin. */
  --ch4-takeover-length: 80vh;        /* A: orange sheet rises along the 8° fold and fills the screen */
  --intro-reveal-length: 100vh;       /* B: "Make." "Connect." "Reset." mask up slowly, one after another */
  --intro-hold-length: 80vh;          /* B: ...then hold still */
  --intro-fade-length: 60vh;          /* C: Connect and Reset fade out, Make stays */
  --tag-shrink-length: 100vh;         /* D: the orange shrinks into the tilted tag beside Make */
  --make-step-length: 90vh;           /* step: Make intro (02-make) */
  --step-length: 80vh;                /* steps: each studio */
  --word-step-length: 130vh;          /* steps: Connect and Reset (orange sweep + title card) */
  --ch4-scrub: 1.1;                   /* slower, softer smoothing than the rest of the page */

  --ease-takeover: power2.inOut;      /* A: the orange rising along the fold */
  --ease-intro: sine.inOut;
  --ease-tag: power1.inOut;
  --ease-step: sine.inOut;
  --ease-scene: sine.inOut;           /* phones: door-shaped wipe as each photo scrolls in */
  --intro-size: min(22vh, 14vw);      /* the three stacked words */
  --intro-stagger: 0.25;              /* share of the reveal between one word and the next */
  --label-fade-start: 0.5;            /* share of D before the small label row fades in */
  --step-swap: 0.4;                   /* share of each studio step spent changing; the rest holds still */
  --ease-sweep: power1.inOut;
  --sweep-in: 0.25;                   /* share of a Connect/Reset step: the sheet sweeps up and covers */
  --sweep-hold: 0.3;                  /* ...the word holds on the orange (the scene swaps underneath) */
  --sweep-out: 0.25;                  /* ...the sheet lifts away along the 8° edge; the rest holds */

  /* Layout (desktop): text column on the left, photo on the right */
  --left-w: 38%;
  --ch4-col-gap: var(--space-8);
  --ch4-top: var(--space-12);
  --ch4-bottom: var(--space-6);
  --tag-w: 12.5em;                    /* one tag size that fits every label ("Graphic design") */

  --scene-subhead-gap: var(--space-1); /* space between subhead and body (other text: --space-2) */
  --scene-ratio: 3 / 2;
  --scene-short-side: 2 / 3;          /* shorter side as a share of the width (fold maths) */
  --scene-exit-y: -8;                 /* % the Make photo moves up as Connect wipes in */
  --scene-parallax: 2%;               /* photo moves this much slower than the scroll (photo box 1.02) */
  --scene-push: 1.02;                 /* slow push-in; with the parallax box, never above 1.04 */
  --label-underline-width: 2px;
  --label-underline-duration: 0.4s;
  --ease-label-underline: cubic-bezier(0.33, 1, 0.68, 1);  /* power2.out */
  /* Phones: time-based reveals as each part scrolls in */
  --ease-scene-text: power3.out;
  --scene-text-duration: 0.4s;
  --scene-text-stagger: 0.06s;
  --studio-ratio: 1 / 1;
  /* Folded-corner frame (brand.md §6, §9) */
  --frame-fold: 0.2;                  /* fold = 20% of the shorter side */
  --frame-fold-open: 0.26;            /* "opens slightly" on hover */
  --hover-duration: 200ms;
  --hover-ease: ease-out;

  /* ---------- Chapter 5: the invitation (storyboard §8) ---------- */
  --ch5-length: 120vh;
  --invite-scale: 1.04;               /* never scale a photo above 1.04 */
  --ease-invite: power1.out;
  --invite-focus: 50% 50%;
  --invite-content-top: var(--space-16);
  --invite-text-duration: 0.7s;
  --invite-text-stagger: 0.7s;
  --ease-invite-text: power3.out;
  --cta-fade-duration: 0.6s;
  --invite-reverse-speed: 3;          /* text hides this many times faster when scrolling back up */

  /* Primary button (brand.md §9) */
  --button-height: 56px;
  --button-pad-x: 32px;
  --button-font-size: 18px;
  --button-fold: 14px;                /* shapes/README.md button fold */
  --button-fold-open: 22px;
  --button-fold-duration: 200ms;
  --button-fold-ease: ease-out;
}

@media (max-width: 640px) {
  :root {
    --grid-cols: 3;
    --grid-rows: 4;
    --grid-gutter: 2px;
    --sheet-col: 1;
    --sheet-row: 0;
    --ch2-length: 190vh;
    --ch3-length: 112vh;
    --discovery-focus: 50% 50%;       /* no portrait crop: the centre holds the open doors and the orange sheet */
    --discovery-scrim-direction: 0deg;
    --discovery-scrim-hold: 45%;
    --discovery-scrim-end: 75%;
    --wordmark-width: 96px;
    --ch4-scene-length: 90vh;
    --ch5-length: 90vh;
    --scene-parallax: 0%;             /* no parallax on mobile */
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.5;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-headline);
  font-optical-sizing: auto;
}

p { margin: 0; }

img { display: block; max-width: 100%; }

:focus-visible {
  outline: var(--focus-width) solid var(--charcoal);
  outline-offset: var(--focus-offset);
}

/* Visually hidden until keyboard focus; then shown top-right, clear of the logo (top-left). */
.skip-link {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 100;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--paper-white);
  color: var(--charcoal);
  font-weight: 600;
}
.skip-link:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  overflow: visible;
  clip-path: none;
}

/* ---------- Header + chapter indicator ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  padding: var(--space-3) var(--side-pad);
}

.site-header[data-solid] { right: 0; background: var(--paper-white); }
.site-header__home { display: block; }
.site-header[data-theme="dark"] .site-header__home:focus-visible { outline-color: var(--paper-white); }

.wordmark { width: var(--wordmark-width); height: auto; }
.site-header[data-theme="dark"] .wordmark--charcoal,
.site-header[data-theme="light"] .wordmark--white,
.site-header[data-solid] .wordmark--white { display: none; }
.site-header[data-solid] .wordmark--charcoal { display: block; }

.chapter-dots {
  position: fixed;
  top: 50%;
  right: var(--space-3);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  color: var(--paper-white);
}
.chapter-dots[data-theme="light"] { color: var(--charcoal); }
.chapter-dots.is-visible { display: flex; }
.chapter-dots li {
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.chapter-dots li.is-active { background: currentColor; }

@media (max-width: 640px) {
  .chapter-dots.is-visible { display: none; }
}

/* ---------- Shared type styles ---------- */

.scroll-cue {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Chapter 1: the routine ---------- */
/* Grid geometry uses container units: the container is .routine (static)
   or .story (motion), both exactly one viewport. Cells stay 1:1 and the
   grid covers the viewport, top-aligned. */

.chapter { position: relative; }

.routine {
  --grid-w: max(100cqw, 100cqh * var(--grid-cols) / var(--grid-rows));
  --cell: calc(var(--grid-w) / var(--grid-cols));
  height: var(--ch1-length);
  overflow: hidden;
  background: var(--charcoal);
  color: var(--paper-white);
}
html:not(.motion) .routine { container-type: size; }

.routine__grid {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  width: var(--grid-w);
  margin-left: calc(var(--grid-w) / -2);
  transform-origin: 50% 50cqh;
}

.cell {
  aspect-ratio: var(--routine-ratio);
  padding: calc(var(--grid-gutter) / 2);
  background: var(--grid-line);
}

.cell__img {
  position: relative;
  height: 100%;
  background: var(--ph-routine);
}
.cell__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--charcoal);
  opacity: var(--grid-tint);
}

/* The sheet and its shadow share one geometry: centred on their cell, plus the offset. */
.sheet,
.sheet-shadow {
  --sheet-h: calc(var(--cell) * var(--sheet-cell-fit));
  --sheet-w: calc(var(--sheet-h) * var(--sheet-ratio));
  position: absolute;
  left: calc(50% - var(--grid-w) / 2 + (var(--sheet-col) + 0.5) * var(--cell) - var(--sheet-w) / 2 + var(--sheet-offset-x));
  top: calc((var(--sheet-row) + 0.5) * var(--cell) - var(--sheet-h) / 2 + var(--sheet-offset-y));
  width: var(--sheet-w);
  height: var(--sheet-h);
  transform: rotate(var(--fold-angle));
}

.sheet-shadow { z-index: 2; }
.sheet { z-index: 5; }

.sheet-shadow__body,
.sheet__body { position: absolute; inset: 0; }

.sheet-shadow__fill {
  position: absolute;
  inset: 0;
  background: var(--shadow-paper);
  filter: blur(var(--shadow-blur));
  transform: translate(var(--shadow-rest-x), var(--shadow-rest-y));
}

.sheet__body {
  --crease-y-right: calc(var(--crease-y) - 100% * var(--sheet-ratio) * tan(var(--fold-angle)));
  perspective: var(--flap-perspective);
  perspective-origin: 0 50%;
}

/* Upper part, above the crease. It runs 1% under the flap so no seam shows. */
.sheet__band {
  position: absolute;
  inset: 0;
  background: url('../assets/shapes/sheet.svg') center / 100% 100% no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--crease-y-right) + 1%), 0 calc(var(--crease-y) + 1%));
}

/* Lower-left part, below the crease. Hinges on the sheet's left edge. */
.sheet__flap {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}

.sheet__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sheet__face--front {
  background: url('../assets/shapes/sheet.svg') center / 100% 100% no-repeat;
  clip-path: polygon(0 var(--crease-y), 100% var(--crease-y-right), 100% 100%, 0 100%);
}
.sheet__face--back {
  background: var(--orange-fold);
  clip-path: polygon(100% var(--crease-y), 0 var(--crease-y-right), 0 100%, 100% 100%);
  transform: rotateY(180deg);
}

.sheet__crease {
  position: absolute;
  top: var(--crease-y);
  left: 0;
  width: calc(100% / cos(var(--fold-angle)));
  height: var(--crease-width);
  transform-origin: 0 50%;
  transform: translateY(-50%) rotate(calc(-1 * var(--fold-angle)));
}
.sheet__crease-line {
  height: 100%;
  background: var(--orange-fold);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.routine__title {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: min(13ch, calc(100% - 2 * var(--side-pad)));
  height: fit-content;
  margin: auto;
  color: var(--paper-white);
  font-size: var(--fs-display);
  font-weight: var(--fw-headline);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-align: center;
}
/* SplitText line masks: grow the clip box (padding) without moving the lines. Only top
   margins pull lines back, so adjacent masks overlap by exactly the extra room. */
.routine__title > div {
  padding-block: var(--display-mask-bleed);
  margin-top: calc(-2 * var(--display-mask-bleed));
}
.routine__title > div:first-child { margin-top: calc(-1 * var(--display-mask-bleed)); }
.routine__title > div:last-child { margin-bottom: calc(-1 * var(--display-mask-bleed)); }

.scroll-cue {
  position: absolute;
  right: 0;
  bottom: var(--space-4);
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--paper-white);
  white-space: nowrap;
}
.scroll-cue__line {
  width: 1px;
  height: var(--cue-line-length);
  background: currentColor;
  transform-origin: 50% 0;
}

/* ---------- Chapter 2: the interruption ---------- */
/* Static (reduced motion): fold divider, then the door-shaped image. */

.interruption {
  padding-bottom: var(--space-12);
  background: var(--paper-white);
}

.fold-divider { width: 100%; height: auto; }

.door {
  position: relative;
  width: min(70vw, calc(70dvh * var(--door-ratio)));
  aspect-ratio: var(--door-ratio);
  margin: var(--space-6) auto 0;
}
.door__img {
  position: absolute;
  inset: 0;
  background: var(--ph-barn);
  overflow: hidden;
  -webkit-mask: url('../assets/shapes/door.svg') center / 100% 100% no-repeat;
  mask: url('../assets/shapes/door.svg') center / 100% 100% no-repeat;
}
.door__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--discovery-focus);
}
.door__edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.door-frame { display: none; }

/* ---------- Chapter 2 card pieces (motion only) ---------- */
/* In motion the card is one face (.sheet__wall) with a door panel centred on it.
   Without motion the band + flap faces draw the plain sheet, as before. */

.sheet__wall,
.sheet__door { display: none; }

.t-card .sheet__band,
.t-card .sheet__flap,
.t-card .sheet__crease { display: none; }

.t-card .sheet__wall,
.t-card .sheet__door { display: block; }

/* The card face; main.js opens a door-shaped hole in it as the door swings */
.sheet__wall {
  position: absolute;
  inset: 0;
  background: url('../assets/shapes/sheet.svg') center / 100% 100% no-repeat;
}

/* Door: 5:8, centred on the card */
.sheet__door {
  --door-w: calc(var(--door-height) * 100% * var(--door-ratio) / (var(--sheet-ratio)));
  position: absolute;
  top: calc(50% - var(--door-height) * 50%);
  left: calc(50% - var(--door-w) / 2);
  width: var(--door-w);
  height: calc(var(--door-height) * 100%);
  perspective: var(--door-perspective);
  perspective-origin: 0 50%;
}
.sheet__door-leaf {
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform-origin: 0 50%;   /* left hinge */
}
.sheet__door-shade {
  position: absolute;
  inset: 0;
  background: var(--charcoal);
  opacity: 0;
}

/* The traced outline stays on the card as the door frame while the panel swings */
.sheet__door-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sheet__door-edge {
  position: absolute;
  background: var(--orange-fold);
}
.sheet__door-edge--left {   /* 1: up the hinge side */
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--outline-width);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.sheet__door-edge--top {    /* 2: across the top */
  top: 0;
  right: 0;
  left: 0;
  height: var(--outline-width);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.sheet__door-edge--right {  /* 3: down the other side */
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--outline-width);
  transform-origin: 50% 0;
  transform: scaleY(0);
}
.sheet__door-edge--bottom { /* 4: back along the bottom */
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--outline-width);
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

/* ---------- Chapter 3: the discovery ---------- */

.discovery {
  height: 100dvh;
  overflow: hidden;
}

.discovery__media {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.discovery__img {
  position: absolute;
  inset: 0;
  background: var(--ph-discovery);
}

.discovery__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--discovery-focus);
}

.discovery__dim {
  position: absolute;
  inset: 0;
  background: var(--charcoal);
  opacity: 0;
}

.discovery__scrim {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: linear-gradient(var(--discovery-scrim-direction),
    rgb(var(--paper-white-rgb) / var(--discovery-scrim-strong)) 0%,
    rgb(var(--paper-white-rgb) / var(--discovery-scrim-soft)) var(--discovery-scrim-hold),
    rgb(var(--paper-white-rgb) / 0) var(--discovery-scrim-end));
  pointer-events: none;
}

.discovery__text {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16) var(--side-pad) var(--space-8);
}

.discovery__copy {
  display: grid;
  gap: var(--space-2);
  max-width: min(720px, 55%);
}

.discovery__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-headline);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.nowrap { white-space: nowrap; }

.discovery__subhead {
  font-family: var(--font-headline);
  font-optical-sizing: auto;
  font-size: var(--fs-h3);
  font-weight: var(--fw-subhead);
  line-height: 1.1;
}

.discovery__subhead + .discovery__body { margin-top: calc(var(--scene-subhead-gap) - var(--space-2)); }

.discovery__body {
  max-width: 34em;
  color: rgb(var(--charcoal-rgb) / var(--body-alpha));
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-body);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .discovery__text { justify-content: flex-end; }
  .discovery__copy { max-width: none; }
}

/* ---------- Folded-corner frame (studios and Chapter 4 scenes) ---------- */
/* Fold = --frame-fold of the shorter side; the triangle shows the paper's back. */

.frame {
  --frame-fold-ratio: var(--frame-fold);
  --f: calc(100cqw * var(--frame-short) * var(--frame-fold-ratio));
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--frame-ratio);
}
.frame--scene { --frame-ratio: var(--scene-ratio); --frame-short: var(--scene-short-side); }
.frame--studio { --frame-ratio: var(--studio-ratio); --frame-short: 1; }

.frame__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper-shade);
  clip-path: polygon(0 0, calc(100% - var(--f)) 0, 100% var(--f), 100% 100%, 0 100%);
}

.frame__img {
  position: absolute;
  top: calc(var(--scene-parallax) / -2);
  left: 0;
  width: 100%;
  height: calc(100% + var(--scene-parallax));
  object-fit: cover;
}
.frame--studio .frame__img { top: 0; height: 100%; }

.frame__fold {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--f);
  height: var(--f);
  background: var(--paper-shade);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* ---------- Chapter 4: the possibilities ---------- */
/* Default (reduced motion, no JS): the steps stacked in the page, each with its text on
   the left and its photo on the right. Phones put the text above the photo. */

.possibilities {
  padding: var(--space-12) var(--side-pad);
  background: var(--paper-white);
}

.possibilities__sheet,
.possibilities__intro,
.possibilities__sweep,
.possibilities__title,
.takeover { display: none; }

.possibilities__label {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  margin: 0 0 var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.possibilities__word {
  position: relative;
  padding-bottom: 4px;
}
.possibilities__word::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--label-underline-width);
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--label-underline-duration) var(--ease-label-underline);
}
.possibilities__word.is-active::after { transform: scaleX(1); }
/* Without motion every step is on the page at once, so no word is "active". */
html:not(.motion) .possibilities__word::after { transform: scaleX(0); }

.step {
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4) var(--ch4-col-gap);
  margin-bottom: var(--space-12);
}
.step:last-child { margin-bottom: 0; }

.step__left {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.step__counter {
  min-height: 1.3em;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
}

.step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.step__word-box--ghost { display: none; }

/* The counter's mask and number must be blocks: inline elements can't clip or move */
.step__counter .mask { display: block; width: fit-content; }
.step__count { display: block; }

.mask { overflow: hidden; }

.step__word {
  font-family: var(--font-headline);
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  font-weight: var(--fw-headline);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Label tag (brand.md §9): small orange sheet beside the headline, 8° tilt, charcoal text */
.tag {
  display: inline-flex;
  margin: 0;
  padding: 6px 14px;
  background: var(--orange);  /* flat fill: sheet.svg is fixed at 4:5 and would only draw a centred band */
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  rotate: var(--fold-angle);
}
.tag__label { display: block; }

.step__text {
  display: grid;
  gap: var(--space-2);
  max-width: 30em;
}

.step__subhead,
.step__copy {
  font-size: var(--fs-body-lg);
  line-height: 1.45;
}
.step__subhead { font-weight: var(--fw-subhead); }

/* Body text: lighter and at --body-alpha */
.step__copy,
.step__body {
  color: rgb(var(--charcoal-rgb) / var(--body-alpha));
  font-weight: var(--fw-body);
}

.mask:has(.step__subhead) + .mask:has(.step__body) { margin-top: calc(var(--scene-subhead-gap) - var(--space-2)); }

.step__body { line-height: 1.5; }

@media (max-width: 640px) {
  .step { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-8); }
  .step--reset { --scene-ratio: 1080 / 1340; --scene-short-side: 1; }  /* portrait crop */
}


/* ---------- Chapter 5: the invitation ---------- */

.invitation {
  position: relative;
  height: var(--ch5-length);
  overflow: hidden;
}

.invitation__media {
  position: absolute;
  inset: 0;
}
.invitation__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--invite-focus);
}

.invitation__content {
  position: absolute;
  top: var(--invite-content-top);
  right: var(--side-pad);
  left: var(--side-pad);
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.invitation__title {
  max-width: 14em;
  font-size: var(--fs-h2);
  font-weight: var(--fw-headline);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* ---------- Primary button: orange sheet with a folded corner ---------- */
/* The sheet is ::before (clipped) so the focus outline on the link is never clipped. */

.button {
  --button-fold-size: var(--button-fold);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 var(--button-pad-x);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  font-weight: 600;
  text-decoration: none;
  transition: --button-fold-size var(--button-fold-duration) var(--button-fold-ease);
}
.button::before,
.button::after {
  content: '';
  position: absolute;
  z-index: -1;
}
.button::before {
  inset: 0;
  background: var(--orange);
  clip-path: polygon(0 0, calc(100% - var(--button-fold-size)) 0, 100% var(--button-fold-size), 100% 100%, 0 100%);
}
.button::after {
  top: 0;
  right: 0;
  width: var(--button-fold-size);
  height: var(--button-fold-size);
  background: var(--orange-fold);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.button:hover,
.button:focus-visible { --button-fold-size: var(--button-fold-open); }
.button:focus-visible {
  outline: var(--focus-width) solid var(--charcoal);
  outline-offset: var(--focus-offset);
}

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

.site-footer {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--side-pad) var(--space-12);
  background: var(--charcoal);
  color: var(--paper-white);
  text-align: center;
}
.site-footer__wordmark { width: var(--footer-logo-w); height: auto; }
.site-footer__credit {
  color: rgb(var(--paper-white-rgb) / var(--body-alpha));
  font-size: var(--footer-credit-size);
  font-weight: var(--fw-body);
}

/* ---------- Motion mode (added by main.js when motion is allowed) ---------- */
/* All three chapters stack inside one pinned, viewport-sized stage. */

.motion .story {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  container-type: size;
  background: var(--charcoal);
}

.motion .story > .chapter {
  position: absolute;
  inset: 0;
  height: auto;
  padding: 0;
  background: none;
}

.motion .interruption > :not(.door-frame) { display: none; }

.motion .door-frame {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--orange);
  opacity: 0;
  pointer-events: none;
}

.motion .discovery__media,
.motion .discovery__scrim,
.motion .discovery__text { opacity: 0; }

.motion .discovery__text { pointer-events: none; }

/* Chapter 4 on desktop: one pinned stage. The shared orange sheet fills the screen behind
   the stacked words, then shrinks into the tag beside "Make."; steps sit on top of each other. */
@media (min-width: 641px) {
  /* Beat A layer at the end of Chapter 3; Chapter 4 starts under it, already orange */
  .motion .takeover {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 9;
    background: var(--orange);  /* flat fill: sheet.svg is fixed at 4:5 and would only draw a centred band */
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  .motion .story { z-index: 2; }
  .motion .fold-divider--end { display: none; }
  .motion .possibilities {
    position: relative;
    z-index: 1;
    margin-top: -100dvh;
    padding: 0;
  }
  /* Once Chapter 4 takes over it sits in front of Chapter 3, so its first beat isn't
     hidden while Chapter 3 scrolls away (both are fully orange at that moment) */
  .motion .possibilities.is-front { z-index: 3; }

  .motion .possibilities__stage {
    position: relative;
    height: 100dvh;
    overflow: hidden;
  }
  .motion .possibilities__sheet {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--orange);  /* flat fill: sheet.svg is fixed at 4:5 and would only draw a centred band */
  }
  .motion .possibilities__intro {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--charcoal);
    font-family: var(--font-headline);
    font-optical-sizing: auto;
    font-size: var(--intro-size);
    font-weight: var(--fw-headline);
    line-height: 1.05;
    letter-spacing: -0.01em;
    pointer-events: none;
  }
  .motion .possibilities__intro > .mask { width: fit-content; }
  .motion .possibilities__intro-slot { visibility: hidden; }
  .motion .possibilities__intro-word { display: block; }
  .motion .possibilities__label {
    position: absolute;
    top: var(--space-4);
    right: 0;
    left: 0;
    z-index: 3;
    margin: 0;
  }

  .motion .possibilities__sweep {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--orange);  /* flat fill: sheet.svg is fixed at 4:5 and would only draw a centred band */
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  .motion .possibilities__title {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: var(--charcoal);
    font-family: var(--font-headline);
    font-optical-sizing: auto;
    font-size: var(--intro-size);
    font-weight: var(--fw-headline);
    line-height: 1.05;
    letter-spacing: -0.01em;
    pointer-events: none;
  }
  .motion .possibilities__title > .mask { grid-area: 1 / 1; transform-origin: 0 0; }
  .motion .possibilities__title-word { display: block; }

  .motion .step {
    position: absolute;
    inset: var(--ch4-top) var(--side-pad) var(--ch4-bottom);
    z-index: 1;
    margin: 0;
  }
  .motion .step__head { flex-wrap: nowrap; }
  .motion .step__word-box {
    width: fit-content;
    transform-origin: 0 0;
  }
  /* Studio steps keep an invisible "Make." so their tag lands exactly on the Make tag */
  .motion .step__word-box--ghost { display: block; visibility: hidden; }
  .motion .tag { min-width: var(--tag-w); }
  .motion .step--studio .tag { background: none; }  /* the label sits on the Make tag */
}

/* Elements with a load animation stay hidden until main.js sets their start state. */
.js-loading .cell__img,
.js-loading .sheet__body,
.js-loading .sheet-shadow__body,
.js-loading .routine__title,
.js-loading .scroll-cue { opacity: 0; }

/* ---------- Reduced motion ---------- */
/* main.js never adds .motion here, so the chapters stay stacked and static. */
@media (prefers-reduced-motion: reduce) {
  /* Button: a simple underline instead of the fold animation */
  .button:hover,
  .button:focus-visible { --button-fold-size: var(--button-fold); text-decoration: underline; }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}