/* =========================================================
   Nina portfolio — static build, pages 1 & 2
   Mobile-first. Layout matched to Canva references at 390px,
   expressed in container-query units (cqw) so proportions are
   identical at 320 / 390 / 430 and every other width.
   Aspect ratio of the original composition (1250 x 2694) is
   preserved — pages are NOT forced to 100svh, so nothing crops.
   ========================================================= */

:root {
  --ref-w: 1250;
  --ref-h: 2694;

  --cream:  #F5F1E1;   /* page-02 background */
  --ink:    #372318;   /* page-02 text (dark brown) */
  --ink-1:  #2E1B10;   /* page-01 title (near-black, per reference) */

  --text-brown: #503228;   /* shared brown for all brown live text (pages 2, 3, future) */

  --frame-max: 480px;  /* keep it phone-like on wide screens */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: #141210;
  /* Helvetica Now Display is the site-wide default (the exact Canva typeface). */
  font-family: "Helvetica Now Display", Arial, sans-serif;
  color: var(--ink);
}

/* Centered phone-width column; full pages stack and the body scrolls. */
.frame {
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto;
}

/* Each page keeps the exact reference aspect ratio.
   Height follows width, so the whole composition is always visible. */
.page {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ref-w) / var(--ref-h);
  overflow: hidden;
  container-type: inline-size;   /* 1cqw = 1% of page width */
}

/* ---- layers ---- */
.layer { position: absolute; inset: 0; }

.layer--bg,
.layer--object {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.layer--object { z-index: 2; }
.layer--text   { z-index: 3; }

/* =========================================================
   PAGE 1 — TELEPHONE
   Title lives inside the dial's empty centre.
   Dial centre measured at ~49.6% x / ~50.1% y.
   ========================================================= */
.page--01 { background: #241a12; }

/* discreet mute / unmute control (telephone sound). Small, semi-transparent,
   top-right; does not overlap the dial or change the phone's design. */
.page--01 .p1-mute {
  position: absolute; top: 3%; right: 4.5%; z-index: 6;
  width: 9cqw; height: 9cqw; max-width: 46px; max-height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  color: rgba(245, 241, 225, 0.55);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background 0.2s ease;
}
.page--01 .p1-mute:hover,
.page--01 .p1-mute:focus-visible { color: rgba(245, 241, 225, 0.95); background: rgba(0, 0, 0, 0.30); outline: none; }
.page--01 .p1-mute svg { width: 55%; height: 55%; display: block; }
.p1-mute .p1-slash { opacity: 0; }
.p1-mute.is-muted .p1-wave { opacity: 0; }
.p1-mute.is-muted .p1-slash { opacity: 1; }

.p1-title {
  position: absolute;
  top: 50.1%;
  left: 49.6%;
  transform: translate(-50%, -50%);
  width: 30%;                 /* wraps within the inner cream disc */
  text-align: center;
  text-transform: uppercase;
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 700;
  font-size: 3.7cqw;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink-1);
}

/* =========================================================
   PAGE 2 — YOU'VE REACHED NINA
   Copy is absolutely positioned per line to reproduce the
   reference order, line breaks, spacing and alignment exactly.
   Tops are % of page height (from reference measurement);
   font-sizes are cqw (% of page width).
   ========================================================= */
.page--02 { background: var(--cream); }

.page--02 .layer--text > * {
  position: absolute;
  left: 5%;
  color: var(--text-brown);
  font-family: "Helvetica Now Display", Arial, sans-serif;
  line-height: 1;
  white-space: nowrap;
}

/* sizes set to match the Canva reference widths in Helvetica Now Display */
.p2-hello    { top: 8.1%;  left: 5%;   font-weight: 400; font-size: 6.3cqw; }
.p2-reached  { top: 12.4%;            font-weight: 400; font-size: 12.5cqw; }
.p2-nina     { top: 18.2%; left: 5%;   font-weight: 400; font-size: 24.3cqw; }  /* nudged ~10px lower @390 */

.p2-role {
  top: 32.8%;
  font-weight: 700;
  font-size: 4.62cqw;
}

.p2-list {
  top: 37.2%;
  list-style: none;
  font-weight: 400;
  font-size: 4.45cqw;
  line-height: 4.74cqw;       /* exact per-line pitch from reference */
  white-space: normal;
}
.p2-list li { white-space: nowrap; }

.p2-location {
  top: 53%;
  font-weight: 400;
  font-size: 4.49cqw;
}

/* =========================================================
   INTERACTION + ANIMATION LAYER
   Added after the layout was approved. These rules DO NOT
   change typography size, spacing, alignment, line breaks,
   image positions, backgrounds, or page height. They only
   add invisible tap targets and animation start-states that
   resolve to the exact approved resting state.
   ========================================================= */

/* --- Page 1: invisible digit + centre tap targets --- */
.p1-hotspots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.p1-hotspots button {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.p1-num    { width: 12cqw;  height: 12cqw; }   /* over each number disc */
.p1-center { width: 30cqw;  height: 30cqw; }   /* centre = navigate */
.p1-hotspots button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

/* dial rotates (intro nudge + drag); origin at the dial's centre */
.page--01 .layer--object { transform-origin: 48.5% 50.3%; will-change: transform; }

/* circular pointer-drag surface confined to the dial (real rotary behaviour).
   touch-action:none keeps the dial gesture from scrolling the page while used;
   scrolling works normally everywhere outside this circle. */
.p1-drag {
  position: absolute;
  left: 48.5%;
  top: 50.3%;
  transform: translate(-50%, -50%);
  width: 90cqw;
  height: 90cqw;
  border-radius: 50%;
  z-index: 6;
  touch-action: none;
  cursor: grab;
}
.p1-drag:active { cursor: grabbing; }

/* ONE shared typography for every dialled message — size never depends on
   sentence length; longer lines simply wrap inside the same fixed area. */
.p1-msg {
  position: absolute;
  top: 50.1%;
  left: 49.6%;
  transform: translate(-50%, -50%);
  width: 34%;
  text-align: center;
  text-transform: uppercase;
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 3.5vw, 15px);
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--ink-1);
}

/* discreet one-time hint (same Inter family as the messages, small + spaced).
   Starts hidden; JS fades it in ~0.7s after load and removes it on first use. */
.p1-hint {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(10px, 2.8vw, 12px);
  letter-spacing: 0.14em;
  color: rgba(245, 241, 225, 0.72);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

/* --- Page 2: animation start-states (only when motion is allowed) --- */
html.anim [data-anim] { opacity: 0; }
html.anim .p2-nina { opacity: 0; }

/* fixed-width cells used only during the Nina scramble; final text is restored
   to the exact approved rendering afterwards. */
.p2-nina .nw { display: inline-block; text-align: center; }
.p2-nina .ni { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html [data-anim],
  html .p2-nina { opacity: 1; }
  .page--01 .layer--object { transform: none; }
}

/* =========================================================
   PAGE 3 — ISSUE 01 / I USED TO WONDER  (static, no animation)
   Fixed art-directed poster on the original 1250x2694 Canva grid.
   EVERY value is in cqw (1cqw = 1% of page width = 12.5 original px),
   so the whole composition scales by width as one unit. Line pitch is a
   fixed cqw value and every block is nowrap, so font substitution can
   never wrap text or shift a block into another (no overlap possible).
   Same type system as pages 1 & 2 (Montserrat display + Inter body).
   ========================================================= */
.page--03 { background: #D7D5B1; }          /* sage, matches the background asset */

.page--03 .layer--text > * {
  position: absolute;
  margin: 0;
  white-space: nowrap;                        /* <br> controls breaks; never auto-wrap */
}

/* "Issue 01" — white display, BOLD.
   Positioned so its VISIBLE top-left ink matches "Hello," on page 2 (top:8.1%,
   left:5%), giving Issue 01 the same proportional top and left margins as Hello.
   - left 4.06cqw: offsets the large bold left side-bearing so the visible left
     edge lands exactly on Hello's (Hello ink-left = 5.44% of width).
   - top 14.96cqw: with line-height:1 the big glyph's cap sits lower inside its
     line box, so the box top is raised to 14.96cqw so the VISIBLE cap-top lands
     at 8.54% of page height — identical to Hello's visible top. Both values are
     computed from Hello's actual position + the real font metrics, and are
     width-relative (cqw) so they stay identical at 320 / 390 / 430. */
.p3-issue {
  top: 14.96cqw;                              /* visible top aligns with page-2 "Hello," */
  left: 4.06cqw;                              /* visible left aligns with page-2 "Hello," */
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 700;                           /* bold, matching the Canva */
  font-size: 23cqw;
  line-height: 1;
  color: #FFFFFF;
}

/* "I used to wonder..." — display title on the same left guide, lighter than Issue 01 */
.p3-title {
  top: 54cqw;
  left: 5.1cqw;                               /* same left guide as body + Issue 01 */
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 400;
  font-size: 9.7cqw;
  line-height: 1;
  color: var(--text-brown);
}

/* =========================================================
   REUSABLE BODY COPY — standard for pages 3+ (NOT pages 1 & 2).
   Same family / weight / size / line-height everywhere it's used.
   ========================================================= */
.body-copy {
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 300;                           /* thinner / lighter */
  font-size: 4.66cqw;                         /* wider — reaches the reference right margin */
  line-height: 5.04cqw;                       /* fixed reference pitch */
  color: var(--text-brown);
}

/* page-3 body paragraph placement (type comes from .body-copy) */
.p3-p  { left: 5.1cqw; }
.p3-p1 { top: 74.5cqw;  }                     /* orig top 935 — fully in the sage section */
.p3-p2 { top: 104.5cqw; }                     /* orig top 1310 — over the sky of the photo */

/* =========================================================
   PAGE 3 — ANIMATION HOOKS (added after page 3 was approved).
   These do NOT change any approved position, size, colour, line break or
   spacing. The resting state is fully visible, so if JS/GSAP never runs the
   text and photo stay exactly as approved. JS only adds motion on scroll.
   ========================================================= */

/* Titles use the page-2 "You've reached" reveal (from-below fade); no CSS
   start-state needed because gsap.from() leaves the resting DOM visible, so
   no-JS = fully shown. */

/* Body copy is revealed line-by-line: JS wraps each <br>-delimited line in a
   block span. Block display keeps the exact same line pitch and breaks. */
.page--03 .p3-line { display: block; white-space: nowrap; }

/* --- Page 3 photograph band (uploaded, text-free image) ---
   The band sits exactly where the approved photo sits (top 47.44%, height
   52.56% of the page) and clips its contents, so the parallax movement stays
   inside it with no exposed edges or gaps against the cream area. The band's
   aspect ratio equals the photo's, so at rest the image fills it with the
   approved crop and no distortion. */
.page--03 .p3-photo-band {
  position: absolute;
  left: 0; right: 0;
  top: 47.44%;
  height: 52.56%;
  overflow: hidden;                 /* clip the oversized / drifting photo */
  z-index: 2;                       /* same layer level as before (below text) */
  pointer-events: none;
}
.page--03 .p3-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* container crops the full frame; no pixel edits */
  object-position: 50% 15%;        /* crop lifted to the reference: para 2 fully over
                                      sky, cactus + full scene still visible below */
  display: block;
  will-change: transform;
  /* At rest (no JS / reduced motion) this is the exact approved image. JS adds a
     small uniform over-scale + vertical drift only when motion is allowed. */
}

@media (prefers-reduced-motion: reduce) {
  .page--03 .p3-photo { transform: none !important; }
}

/* =========================================================
   PAGE 4 — SOME THINGS STAY WITH YOU  (static build)
   One static background, live HTML statement text (brown, Helvetica Now
   Display), and five independent transparent object layers. Every value is a
   width-relative unit (cqw) or a % of the page box, both derived from the
   original Canva canvas (1250 x 2694) measured off page-04-reference.jpg, so
   the whole composition scales proportionally at any width. No animation.
   ========================================================= */
.page--04 { background: #cfe3f2; }          /* pale sky, matches the background edges */

/* --- live statement text (sits UNDER the objects) --- */
.page--04 .layer--text { z-index: 3; }
.p4-stmt {
  position: absolute;
  margin: 0;
  white-space: nowrap;                       /* one word/phrase per line; exact breaks */
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 400;
  font-size: 23.2cqw;                        /* uniform display size from the reference */
  line-height: 1;
  color: var(--text-brown);                  /* #503228 */
}
.p4-l1 { top: 12.50cqw; left:  7.52cqw; }    /* Some      */
.p4-l2 { top: 34.98cqw; left: 26.40cqw; }    /* things    */
.p4-l3 { top: 59.54cqw; left:  7.60cqw; }    /* stay with */
.p4-l4 { top: 80.90cqw; left: 37.04cqw; }    /* you       */
.p4-l5 { top:106.50cqw; left:  7.52cqw; }    /* before    */
.p4-l6 { top:130.18cqw; left:  7.68cqw; }    /* you       */
.p4-l7 { top:153.46cqw; left:  7.52cqw; }    /* know      */
.p4-l8 { top:177.06cqw; left:  7.60cqw; font-style: italic; }  /* why. */

/* --- five transparent object layers, ON TOP of the text ---
   Each object is a positioned WRAPPER (placed by its content box: left/top/width
   as % of the page) holding the IMAGE. The wrapper carries the continuous float
   transform; the image carries the tap / hover transform — so the two never
   fight over one transform matrix. Base position/size are unchanged.
   z-index preserves the supplied object order (01 lowest → 05 highest). */
.page--04 .p4-obj {
  position: absolute;
  touch-action: pan-y;          /* taps react, but vertical scrolling still works */
  cursor: pointer;
}
.page--04 .p4-obj img {
  display: block;
  width: 100%;
  height: auto;                 /* keeps each object's exact aspect (no distortion) */
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;         /* pointer targets the wrapper, not the image */
}
.p4-o1 { left:  5.04%; top: 16.74%; width: 19.92%; z-index: 4; }  /* paint / Faith packet */
.p4-o2 { left: 49.12%; top:  6.27%; width: 27.92%; z-index: 5; }  /* hands  */
.p4-o3 { left: 12.48%; top: 39.12%; width: 13.92%; z-index: 6; }  /* icecream / popsicle */
.p4-o4 { left: 60.72%; top: 60.17%; width: 31.92%; z-index: 7; }  /* miles davis */
.p4-o5 { left:  1.84%; top: 88.57%; width: 25.92%; z-index: 8; }  /* books */

/* Reduced motion: objects stay exactly at their approved resting positions. */
@media (prefers-reduced-motion: reduce) {
  .page--04 .p4-obj, .page--04 .p4-obj img { transform: none !important; }
}

/* =========================================================
   PAGE 5 — ARCHIVE / ONE DAY OR DAY ONE?  (+ looping video)
   Variable-height page. The upper "Archive" block reproduces the reference
   exactly (grass image + live brown text). The lower BEIGE section holds the
   heading + paragraph and, below generous spacing, the uploaded video looping
   silently like a GIF. Only the beige section lengthens the page; the Archive
   block is unchanged. All type is live HTML, Helvetica Now Display, #503228.
   Positions are width-relative (cqw) off the 1250x2694 reference, so the
   composition is identical at 320 / 390 / 430. Split (grass→beige) at 46.25%.
   ========================================================= */
.page--05 {
  position: relative;
  width: 100%;
  container-type: inline-size;      /* 1cqw = 1% of page width */
  background: #F5F1E1;              /* beige — continues seamlessly below the grass */
  overflow: hidden;                 /* video is width-constrained inside; no h-scroll */
}

/* Upper block: fixed proportion so grass + all text match the reference.
   1250 x 2050 keeps every measured text line in place with a short beige tail. */
.p5-top { position: relative; width: 100%; aspect-ratio: 1250 / 2050; }
.p5-grass {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 60.78%;      /* 1246 / 2050 — grass ends exactly at the split */
  object-fit: cover; display: block;
  pointer-events: none; user-select: none;
}

/* shared live-text base (Archive block + beige heading/paragraph) */
.p5-t {
  position: absolute; margin: 0;
  white-space: nowrap;              /* separate lines control breaks; no auto-wrap */
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 400; line-height: 1;
  color: var(--text-brown);         /* #503228 */
}
.p5-b { font-weight: 700; }         /* bold rows: 2023 / 2025 / Worked… */

.p5-archive { top:   7.04cqw; left: 10.24cqw; font-size: 13.08cqw; }              /* Archive. */
.p5-y1      { top:  24.70cqw; left: 10.16cqw; font-size:  4.52cqw; }              /* 2023 */
.p5-e1      { top:  37.80cqw; left: 10.32cqw; font-size:  4.60cqw; }              /* Business Administration. CU - Tbilisi */
.p5-y2      { top:  50.70cqw; left: 10.16cqw; font-size:  4.52cqw; }              /* 2025 */
.p5-e2      { top:  63.80cqw; left: 10.32cqw; font-size:  4.60cqw; }              /* Master's in Marketing. UE - Madrid */
.p5-w1      { top:  76.75cqw; left: 10.08cqw; font-size:  4.68cqw; }              /* Worked across startups, agencies */
.p5-w2      { top:  84.11cqw; left: 10.08cqw; font-size:  4.68cqw; }              /* and brands. */
.p5-oneday  { top: 114.91cqw; left: 10.32cqw; font-size:  7.96cqw; }              /* One Day or Day One? */
.p5-p1      { top: 130.59cqw; left: 10.16cqw; font-size:  4.68cqw; }
.p5-p2      { top: 137.07cqw; left: 10.32cqw; font-size:  4.68cqw; }
.p5-p3      { top: 143.63cqw; left: 10.32cqw; font-size:  4.68cqw; }
.p5-p4      { top: 150.11cqw; left: 10.08cqw; font-size:  4.68cqw; }

/* Beige video section — flows below the Archive block, extending the page.
   Generous space above the video; the video keeps its natural 1:1 ratio,
   is centred, responsive, capped at 100% width, never cropped or distorted. */
.p5-video { width: 100%; padding: 9cqw 8cqw 13cqw; text-align: center; }
.p5-video video {
  display: block;
  width: 84cqw; max-width: 100%;
  aspect-ratio: 1 / 1;              /* natural 1080x1080 — no crop / distortion */
  height: auto; margin: 0 auto;     /* centred */
  object-fit: contain; background: #F5F1E1;
}

/* =========================================================
   PAGE 6 — INSTAGRAM CARD  (static background + one clickable object)
   Exact reference composition: full-bleed cream/handwriting background, and
   the Instagram profile card as ONE object placed at its measured box. The
   object is a real <a> link (opens Instagram in a new tab). A discreet brown
   hint invites the tap and disappears on first interaction. Hover/touch gives
   the card a refined micro-tilt. All measured off the 1250x2694 reference.
   ========================================================= */
.page--06 { background: #F5F1E1; }
.page--06 .layer--bg { z-index: 1; }

/* the clickable object — placed by its measured box; height auto keeps the
   card's exact aspect (no crop / distortion). z-index 2 (above background). */
.p6-card {
  position: absolute;
  /* box spans the card PLUS its full soft drop-shadow (the object PNG now
     includes the shadow's complete fade-to-zero, so it never ends in a hard
     line). The visible card sits at the exact same place as the reference —
     only transparent shadow margin was added on the left/bottom. */
  left: 4.08%; top: 20.04%; width: 92.96%;
  height: auto;
  z-index: 2;
  display: block;
  cursor: pointer;                         /* pointer on desktop */
  touch-action: manipulation;              /* taps work; page still scrolls */
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transform-origin: 50% 50%;
}
.p6-card img {
  display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}

/* discreet "tap to open" affordance, just under the card, removed on first use */
.p6-hint {
  position: absolute;
  top: 89.4%; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Helvetica Now Display", Arial, sans-serif;
  font-weight: 400; font-size: 3.3cqw; line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-brown);                /* #503228 */
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;                    /* never intercepts taps/scroll */
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .p6-hint { animation: p6pulse 2.2s ease-in-out infinite; }
}
@keyframes p6pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }

/* =========================================================
   PAGE 7 — TOOLBOX  (static background + live text + one object)
   Static paper/blue-blob background, live brown HTML text (title + two labelled
   lists), and the wrench as one separate object layer that floats gently.
   Everything measured off the 1250x2694 reference; width-relative (cqw) so the
   composition is identical at 320 / 390 / 430. Two type sizes: the display
   title, and one shared size for both blocks (headings bold, items regular).
   ========================================================= */
.page--07 { background: #D6D0CD; }               /* paper grey (matches bg edges) */

/* the wrench — one separate object layer, above the background, below the text.
   Full-canvas transparent PNG so its position/rotation match the reference
   exactly; only a soft continuous float transform is applied by JS. */
.page--07 .p7-wrench {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  z-index: 2;
  pointer-events: none; user-select: none;
  will-change: transform;
}
.page--07 .layer--text { z-index: 3; }
.p7-list { list-style: none; }

/* shared live-text base */
.p7-t {
  position: absolute; margin: 0;
  white-space: nowrap;
  font-family: "Helvetica Now Display", Arial, sans-serif;
  line-height: 1; color: var(--text-brown);       /* #503228 */
}
.p7-title { font-weight: 400; font-size: 13.16cqw; }   /* Toolbox. */
.p7-h     { font-weight: 700; font-size:  4.75cqw; }   /* Making / Thinking */
.p7-li    { font-weight: 400; font-size:  4.75cqw; }   /* list items */

/* positions (top = line-box top; left = pen origin).
   ALIGNMENT: left-column content (title + Thinking) sits on the site's shared
   left guide (5cqw, as pages 2 & 3); the right column (Making) is mirrored so
   its longest line ends at 95cqw — an equal 5cqw right margin. Vertical
   positions, sizes, weights, colours and line breaks are unchanged. */
.p7-title { top:  11.19cqw; left:  5.00cqw; }
.p7-mkh   { top:  30.66cqw; left: 68.72cqw; }
.p7-m1    { top:  37.54cqw; left: 68.72cqw; }
.p7-m2    { top:  42.29cqw; left: 68.72cqw; }
.p7-m3    { top:  47.05cqw; left: 68.72cqw; }
.p7-m4    { top:  51.80cqw; left: 68.72cqw; }
.p7-m5    { top:  56.55cqw; left: 68.72cqw; }
.p7-m6    { top:  61.30cqw; left: 68.72cqw; }
.p7-thh   { top: 161.46cqw; left:  5.00cqw; }
.p7-t1    { top: 168.90cqw; left:  5.00cqw; }
.p7-t2    { top: 173.65cqw; left:  5.00cqw; }
.p7-t3    { top: 178.40cqw; left:  5.00cqw; }
.p7-t4    { top: 183.15cqw; left:  5.00cqw; }
.p7-t5    { top: 187.90cqw; left:  5.00cqw; }
.p7-t6    { top: 192.65cqw; left:  5.00cqw; }

/* =========================================================
   PAGE 8 — DRAWN TO / KEEP  (static sunset background + live lists + book)
   Static background (golden sea + sailboat + baked book credit), live brown
   HTML lists, and the open book as one separate floating object layer. Matches
   page-08-reference.jpg; positions/sizes are width-relative (cqw). One shared
   text size (headings bold, items regular). Reference margins preserved. */
.page--08 { background: #DE9A54; }               /* warm fallback; bg image covers */
.page--08 .layer--bg { z-index: 1; }

/* the book — one object layer, above the background, below the text; floats. */
.page--08 .p8-book {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  z-index: 2;
  pointer-events: none; user-select: none;
  will-change: transform;
}
.page--08 .layer--text { z-index: 3; }
.p8-list { list-style: none; }

.p8-t {
  position: absolute; margin: 0;
  white-space: nowrap;
  font-family: "Helvetica Now Display", Arial, sans-serif;
  line-height: 1; color: var(--text-brown);       /* #503228 */
}
.p8-h  { font-weight: 700; font-size: 4.60cqw; }   /* Drawn To / Keep */
.p8-li { font-weight: 400; font-size: 4.60cqw; }   /* list items */

/* LEFT: Drawn To + 8 (ink-left 11.68cqw) */
.p8-dh { top: 23.48cqw; left: 11.68cqw; }
.p8-d1 { top: 31.32cqw; left: 11.68cqw; }
.p8-d2 { top: 36.08cqw; left: 11.68cqw; }
.p8-d3 { top: 40.83cqw; left: 11.68cqw; }
.p8-d4 { top: 45.59cqw; left: 11.68cqw; }
.p8-d5 { top: 50.34cqw; left: 11.68cqw; }
.p8-d6 { top: 55.09cqw; left: 11.68cqw; }
.p8-d7 { top: 59.85cqw; left: 11.68cqw; }
.p8-d8 { top: 64.60cqw; left: 11.68cqw; }
/* RIGHT: Keep + 9 (ink-left 54.40cqw) */
.p8-kh { top: 23.48cqw; left: 54.40cqw; }
.p8-k1 { top: 31.32cqw; left: 54.40cqw; }
.p8-k2 { top: 36.08cqw; left: 54.40cqw; }
.p8-k3 { top: 40.83cqw; left: 54.40cqw; }
.p8-k4 { top: 45.59cqw; left: 54.40cqw; }
.p8-k5 { top: 50.34cqw; left: 54.40cqw; }
.p8-k6 { top: 55.09cqw; left: 54.40cqw; }
.p8-k7 { top: 59.85cqw; left: 54.40cqw; }
.p8-k8 { top: 64.60cqw; left: 54.40cqw; }
.p8-k9 { top: 69.36cqw; left: 54.40cqw; }

/* =========================================================
   PAGE 9 — IF THIS FELT FAMILIAR  (static bg + live text + eye object)
   Static background (cream + baked "Yes or no?" photo section), live brown text
   in two sections (upper: title/intro/phone, lower: body/contact/final), and
   the hand-drawn eye as one object layer sitting between the two text sections.
   The eye was lifted out of the supplied background into its own transparent
   layer (its former pixels filled with the surrounding cream) so it can animate;
   nothing else in the background changed. Measured off page-09-reference.jpg. */
.page--09 { background: #F3F1E1; }               /* cream (matches bg) */
.page--09 .layer--bg { z-index: 1; }

/* the eye — one object layer, between the upper and lower text; floats. */
.page--09 .p9-eye-wrap {
  position: absolute;
  left: 6.96cqw; top: 54.64cqw; width: 40.72cqw;
  z-index: 2; pointer-events: none;
  will-change: transform;
}
.page--09 .p9-eye { display: block; width: 100%; height: auto; }

.page--09 .layer--text { z-index: 3; }
.p9-t {
  position: absolute; margin: 0; white-space: nowrap;
  font-family: "Helvetica Now Display", Arial, sans-serif;
  line-height: 1; color: var(--text-brown);       /* #503228 */
}
.p9-title { font-weight: 400; font-size: 9.88cqw; }
.p9-body  { font-weight: 400; font-size: 4.60cqw; }
.p9-b     { font-weight: 700; }                    /* bold rows / spans */
.p9-body strong { font-weight: 700; }
/* links keep the brown; clickable but visually identical to the reference */
.page--09 a { color: inherit; text-decoration: none; cursor: pointer; pointer-events: auto; }
.page--09 a:hover { text-decoration: underline; }

.p9-title { top:  13.99cqw; left: 7.28cqw; }
.p9-l1    { top:  28.52cqw; left: 6.80cqw; }
.p9-l2    { top:  33.64cqw; left: 6.80cqw; }
.p9-phone { top:  43.24cqw; left: 6.80cqw; }
.p9-l3    { top:  85.32cqw; left: 6.80cqw; }
.p9-l4    { top:  90.22cqw; left: 6.80cqw; }
.p9-l5    { top:  99.64cqw; left: 6.80cqw; }
.p9-l6    { top: 112.28cqw; left: 6.80cqw; }
.p9-l7    { top: 117.72cqw; left: 6.80cqw; }

@media (prefers-reduced-motion: reduce) {
  .page--09 .p9-eye-wrap { transform: none !important; }
}