/* Home V2 — Sarah's illustrated collage composition, rebuilt against
   authoritative Figma geometry. Desktop and mobile are SEPARATE,
   independently art-directed frames (not one scaled into the other):

     DESKTOP reference frame: 1440 x 900
     MOBILE  reference frame:  393 x 852

   Every layer below is positioned as a percentage of its frame's own
   width/height, computed directly from the Figma left/top/width/height
   in px (e.g. leftPct = left / frameWidth * 100). The desktop frame is
   scaled uniformly to CONTAIN the real viewport (like background-size:
   contain — nothing in the frame is ever cropped), so the pixel
   relationships Figma specified are preserved exactly at any viewport
   size. Rotated layers use CSS transform: rotate() applied
   after that positioning, around the layer's own center by default
   (Figma's default rotation pivot) or top-left where Figma specifies
   transform-origin explicitly (the spiral).

   This supersedes the earlier video-led Home direction (preserved,
   unused, at assets/video/home-loop.mp4 and assets/images/home/) and
   the prior percentage-estimated Home V2 pass. */

body.page-home {
  margin: 0;
  overflow: hidden;
  height: 100vh;    /* legacy fallback */
  height: 100dvh;   /* modern mobile viewport (accounts for browser chrome) */
}

.home-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;    /* legacy fallback */
  height: 100dvh;
  overflow: hidden;
  background: #6d1f2c; /* fallback: sampled from home-paper-red.png while it loads */
}

/* Everything below the ticker strip. The collage stage is fitted inside
   this box (cqw/cqh), so the strip never covers or crops a layer. */
.home-v2__frame {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
}

.hv2-layer {
  display: block;
  position: absolute;
  max-width: none;   /* override base.css's img{max-width:100%} — these
                         layers are intentionally sized well over 100%
                         of the stage to reproduce Figma's composition */
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP — fixed 1440:900 stage, CONTAIN-fitted to any viewport:
   scaled by whichever viewport dimension is more limiting, so the
   whole frame is always visible (short laptop windows no longer crop
   the nav or the leopard/crate). Wider-than-16:10 viewports leave
   side space around the frame, filled by Sarah's bleed artwork
   (.home-v2__stage::before/::after) out to a 1840:900 (~2.04:1)
   viewport.
   ══════════════════════════════════════════════════════════════ */
.home-v2__stage {
  position: absolute;
  inset: 0;
  margin: auto;   /* centers on whole pixels; a translate(-50%) put the
                     frame half a pixel off at odd viewport sizes */
  width: min(100vw, 160vh);    /* 160 = 100 * 1440 / 900 */
  width: min(100cqw, 160cqh);  /* fit inside .home-v2__frame */
  height: min(100vh, 62.5vw);  /* 62.5 = 100 * 900 / 1440 */
  height: min(100cqh, 62.5cqw);
  aspect-ratio: 1440 / 900;
}

@media (min-width: 601px) {
  /* Lets nav/credit type scale with the frame (cqw) instead of the
     viewport, so their Figma proportions hold at every fit size. */
  .home-v2__stage {
    container-type: inline-size;
    /* Clip to Sarah's Extended Bleed frame (Figma "Desktop Home —
       Extended Bleed", 1840x900): the 1440x900 frame plus 200px each
       side. Layers overflowing further (paper, navy band, spiral)
       stay hidden; .home-v2 clips anything past the viewport. */
    clip-path: inset(0 -13.8889%);
  }

  /* Bleed strips (200x900 each) as stage layers, so they scale with
     it and stack above the background layers (z 1-7) but below the
     girl/carpet, crate and leopard (z 9-11), which render whole into
     the side space. Pseudo-element backgrounds: mobile never loads them. */
  .home-v2__stage::before,
  .home-v2__stage::after {
    content: "";
    position: absolute;
    z-index: 8;
    top: 0;
    height: 100%;
    background: no-repeat left top / 100% 100%;
    pointer-events: none;
  }

  .home-v2__stage::before {
    left: -13.8889%;
    width: 14.0972%; /* 203px: overlaps the frame's dark left-edge column (2px at 1x, a hair wider once scaled) */
    background-image: url('/assets/images/home-v2/home-bleed-left.webp');
  }

  .home-v2__stage::after {
    left: 99.8611%;  /* 2px over the frame's yellow right-edge column
                        (1px at 1x; 2px covers it at fractional scales) */
    width: 14.0278%; /* 202px */
    background-image: url('/assets/images/home-v2/home-bleed-right.webp');
  }
}

.hv2-bg {
  top: -19.6667%;
  left: 0%;
  width: 100.7639%;
  height: 100.5556%;
  z-index: 1;
}

.hv2-spiral {
  top: 100.0844%;
  left: 42.8611%;
  width: 82.6264%;
  height: 95.2044%;
  transform: rotate(-90deg);
  transform-origin: top left;
  z-index: 2;
}

.hv2-cloud-tan {
  top: 17.4444%;
  left: -10.4167%;
  width: 107.3611%;
  height: 65.1111%;
  z-index: 3;
}

.hv2-scallop {
  top: 0%;
  left: 7.2917%;
  width: 92.7083%;
  height: 28.7778%;
  z-index: 4;
}

.hv2-blue {
  top: 55.7778%;
  left: -22.9167%;
  width: 130.4167%;
  height: 44.3333%;
  z-index: 5;
}

.hv2-title {
  position: absolute;
  z-index: 6;
  top: 17.4444%;
  left: 12.0833%;
  width: 84.6528%;
  height: 55.7778%;
  margin: 0;
}

.hv2-title img {
  display: block;
  width: 100%;
  height: 100%;
}

.hv2-moon {
  top: 5.4089%;
  left: 4.8569%;
  width: 23.125%;
  height: 41.2222%;
  transform: rotate(9deg);
  z-index: 7;
}

.hv2-girl {
  top: 56%;
  left: -0.9521%;
  width: 60.4861%;
  height: 42.4444%;
  transform: rotate(5deg);
  z-index: 9;
}

.hv2-crate {
  top: 79.1111%;
  left: 46.8243%;
  width: 16.3285%;
  height: 18.4833%;
  transform: rotate(16deg);
  z-index: 10;
}

.hv2-leopard {
  top: 89.0222%;
  left: -1.0417%;
  width: 22.6715%;
  height: 13.0022%;
  transform: rotate(-7deg);
  z-index: 11;
}

/* Real HTML nav, styled as five individual torn-paper tabs (per Sarah's
   revised Figma nav design), positioned across the upper-right portion
   of the pink scallop. Row is right-anchored so it reads as a cluster
   bled toward the top-right corner. Each tab reuses Sarah's actual
   blank paper-tab export (assets/images/shared/nav-paper-tab.png) as
   its background — real asset, not a CSS approximation — stretched to
   each tab's own auto-sized box so every label (HOME..CONTACT) gets
   its own appropriately-sized copy of the same shape. */
.hv2-nav {
  position: absolute;
  z-index: 12;
  top: 0%;
  left: 43%;
  width: 50%; /* right edge pulled in from 100% to 93% of the stage,
                 shifting the whole right-anchored tab group left as
                 one unit — top/height/gap/justify-content unchanged */
  height: 10%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 1.4%;
}

.hv2-nav ul {
  display: flex;
  align-items: flex-start;
  gap: 1.4%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hv2-nav a {
  display: block;
  position: relative;
  padding: 1em 1.6em 0.85em;
  background-image: url('/assets/images/shared/nav-paper-tab.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(0.75rem, 1.2cqw); /* 17.28px in the 1440 frame */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #201812;
  white-space: nowrap;
}

.hv2-nav li:nth-child(1) a { transform: rotate(-1.5deg); }
.hv2-nav li:nth-child(2) a { transform: rotate(1deg); }
.hv2-nav li:nth-child(3) a { transform: rotate(-1deg); }
.hv2-nav li:nth-child(4) a { transform: rotate(1.5deg); }
.hv2-nav li:nth-child(5) a { transform: rotate(-0.8deg); }

.hv2-nav a:hover {
  text-decoration: underline;
}

.hv2-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hv2-menu-btn {
  display: none;
}

.hv2-mobile-nav {
  display: none;
}

/* Small handwritten-style credit, reinstated per Sarah's request —
   PROJECT-SPEC.md previously retired this alongside the video-hero
   direction; this is a conscious revision, kept deliberately minor
   (Sue Ellen Francisco is marginalia-only per the design hierarchy,
   never essential UI) rather than a return to the old hero treatment. */
.hv2-credit {
  position: absolute;
  z-index: 13;
  bottom: 2%;
  right: 2.5%;
  margin: 0;
  font-family: var(--font-marginalia);
  font-size: max(0.75rem, 1.2778cqw); /* 18.4px in the 1440 frame */
  color: #fdf6e8;
  transform: rotate(-3deg);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — fixed 393:852 stage, a separately art-directed
   recomposition (NOT a scaled-down desktop scene). Reference:
   Figma mobile frame, percentages computed the same way as
   desktop but against 393x852.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  body.page-home,
  .home-v2 {
    height: 100svh; /* stable phone-chrome-safe viewport, this breakpoint only */
  }

  .home-v2__stage {
    transform: none;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .hv2-bg {
    top: -12.0892%;
    left: 0%;
    width: 441.9847%;
    height: 127.1127%;
  }

  .hv2-spiral {
    top: 131.2207%;
    left: 255.4351%;
    width: 338.3257%;
    height: 112.3838%;
    transform: rotate(-164deg);
    transform-origin: top left;
  }

  /* Not part of the mobile frame — desktop-only accents. */
  .hv2-cloud-tan,
  .hv2-moon {
    display: none;
  }

  .hv2-scallop {
    top: 0%;
    left: -15.2672%;
    width: 339.6947%;
    height: 30.3991%;
  }

  .hv2-blue {
    top: 49.4131%;
    left: -130.5344%;
    width: 516.285%;
    height: 50.5869%;
  }

  .hv2-title {
    top: 34.8592%;
    left: -3.3079%;
    width: 106.6158%;
    height: 20.3052%;
  }

  .hv2-girl {
    top: 76.1737%;
    left: -10.7583%;
    width: 117.9898%;
    height: 23.8697%;
    transform: rotate(5deg);
  }

  .hv2-crate {
    top: 89.1702%;
    left: 86.0025%;
    width: 31.8524%;
    height: 10.3944%;
    transform: rotate(16deg);
  }

  .hv2-leopard {
    top: 92.723%;
    left: 3.0636%;
    width: 44.2265%;
    height: 7.3122%;
    transform: rotate(5deg);
  }

  .hv2-nav {
    display: none;
  }

  /* Real <button>, not decorative divs — a single accessible control
     stacking the "Menu"/"Close" label above the hamburger lines, sized
     and placed to match the Figma label (left 317, top -3) and
     hamburger frame (60x58, left 317, top 32). */
  .hv2-menu-btn {
    display: flex;
    position: absolute;
    z-index: 20;
    top: -0.3521%;
    left: 80.6616%;
    width: 15.2672%;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #1a1a1a;
  }

  .hv2-menu-btn__label {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .hv2-menu-btn__lines {
    display: block;
    width: 100%;
    aspect-ratio: 60 / 58;
    position: relative;
  }

  .hv2-menu-btn__lines::before,
  .hv2-menu-btn__lines::after,
  .hv2-menu-btn__lines span {
    content: "";
    display: block;
    position: absolute;
    left: 5%;
    width: 90%;
    height: 3px;
    background: #1a1a1a;
  }

  .hv2-menu-btn__lines::before {
    top: 5%;
  }

  .hv2-menu-btn__lines span {
    top: 45%;
  }

  .hv2-menu-btn__lines::after {
    top: 84%;
  }

  .hv2-mobile-nav[hidden] {
    display: none;
  }

  .hv2-mobile-nav {
    display: block;
    position: absolute;
    z-index: 20;
    top: 12%;
    right: 4%;
    background: #ede6d6;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 0.75em 1.25em;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  }

  .hv2-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    text-align: right;
  }

  .hv2-mobile-nav a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #4a1520;
  }

  .hv2-mobile-nav a[aria-current="page"] {
    text-decoration: underline;
  }

  .hv2-credit {
    bottom: 1.5%;
    right: 4%;
    font-size: 0.9rem;
  }
}

/* ── Title card → Listen ──
   The link box is trimmed to the torn-paper card inside the logo image
   (its transparent margins are 5.696% / 7.493% / 6.646% / 6.724% of
   the image, left/top/right/bottom), so only the card is clickable and
   the focus ring hugs it. The image is offset back out by the same
   amounts, so it renders exactly where it did before. */
.hv2-title__link {
  position: absolute;
  top: 7.493%;
  left: 5.696%;
  width: 87.658%;
  height: 85.783%;
  display: block;
}

.hv2-title__link img {
  position: absolute;
  top: -8.735%;
  left: -6.498%;
  width: 114.08%;
  height: 116.573%;
  max-width: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hv2-title__link {
    transition: transform 0.25s ease;
  }

  .hv2-title__link:hover,
  .hv2-title__link:focus-visible {
    transform: translateY(-0.8%) rotate(-0.6deg);
  }
}

/* ── Ticker ──
   A thin navy strip across the top of Home, above the collage (which
   is fitted into the space below it, see .home-v2__frame). Without JS,
   or with reduced motion, .hv2-ticker__line is shown as a still line.
   With motion, js/home-ticker.js keeps that line for screen readers
   only and adds an aria-hidden moving copy. */
.hv2-ticker {
  position: relative;
  z-index: 30;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem 0.25rem 1rem;
  box-sizing: border-box;
  background: #283c51; /* the collage's navy band */
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #fdf6e8;
}

.hv2-ticker__line,
.hv2-ticker__window {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Still line: centered, and wraps rather than cutting off on narrow
   screens. */
.hv2-ticker__line {
  text-align: center;
  text-wrap: balance;
}

.hv2-ticker__window {
  overflow: hidden;
  white-space: nowrap;
}

.hv2-ticker__track {
  display: inline-block;
  animation: hv2-ticker-scroll var(--ticker-duration, 60s) linear infinite;
}

.hv2-ticker.is-paused .hv2-ticker__track {
  animation-play-state: paused;
}

@keyframes hv2-ticker-scroll {
  to { transform: translateX(-50%); }
}

.hv2-ticker__toggle {
  flex: none;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgba(253, 246, 232, 0.7);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.hv2-ticker__toggle[hidden] {
  display: none;
}

.hv2-ticker__toggle:hover {
  background: rgba(253, 246, 232, 0.15);
}

/* Focus ring on the navy strip: cream ring, navy gap. */
.hv2-ticker__toggle:focus-visible {
  outline-color: #fdf6e8;
  box-shadow: 0 0 0 2px #283c51;
}

/* Pause: two bars. Play: a triangle. */
.hv2-ticker__icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.55rem;
  height: 0.6rem;
  border-left: 0.18rem solid currentColor;
  border-right: 0.18rem solid currentColor;
  box-sizing: border-box;
}

.hv2-ticker.is-paused .hv2-ticker__icon {
  width: 0;
  height: 0;
  left: 0.12rem;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  border-color: transparent transparent transparent currentColor;
}

@media (max-width: 600px) {
  /* layout.css pads <main> on phones; the collage has always bled past
     that padding, so the strip steps out of it too and runs edge to
     edge along the very top. */
  .hv2-ticker {
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-3)) 0;
    font-size: 0.85rem;
    padding-left: 0.75rem;
    gap: 0.5rem;
  }

  /* The MENU button's box started 3px above the stage; keep it clear of
     the strip. */
  .hv2-menu-btn {
    top: 0.4%;
  }
}