/* ============================================================
   index.html — responsive layer for the Pencil export.

   This file is index-only. It targets the export's
   `data-pencil-name` attributes and Tailwind arbitrary-value
   class names, none of which exist in guide.html, so it is kept
   separate from the shared styles.css (which holds the guide +
   the shared footer).

   Load order matters: index.html links tailwind.build.css, then
   styles.css, then this file — so these rules win the cascade
   exactly as the old inline <style> block did.

   The design is proportional: 1vw ≈ 12px of the original 1200px
   artboard. max() holds type at its design size on small screens
   and scales it up with the viewport above 1200px, so the page
   always fills the full width.
   ============================================================ */

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

body {
  margin: 0;
  overflow-x: clip;
}

/* ---- Hero: golden-ratio tall (1.618 screens) ---- */
/* The hero is a two-band grid: the first row is exactly one screen and
   holds the titles (centred by its own flex), the second row is the
   remaining 0.618 screens of photo. No magic offsets — the titles sit
   on the first screen by construction, however tall the hero gets.
   vh first as fallback; svh wins where supported (stable height on iOS
   with collapsing toolbars, no jump while scrolling). */
[data-pencil-name="01 · Hero"] {
  position: relative;
  display: grid;
  /* The export's all-round padding would inset the grid box, so the
     first row's one-screen band would start below the top padding and
     the titles would read as pushed down. The bands define the
     vertical rhythm here, so drop the vertical padding and keep the
     horizontal gutter for the cue and narrow screens. */
  padding-top: 0;
  padding-bottom: 0;
  grid-template-rows: max(480px, 100vh) 1fr;
  min-height: max(777px, 161.8vh);
}
@supports (height: 100svh) {
  [data-pencil-name="01 · Hero"] {
    grid-template-rows: max(480px, 100svh) 1fr;
    min-height: max(777px, 161.8svh);
  }
}

/* The titles sit in the first-screen band; the cue is pinned to the
   hero's bottom edge, at the foot of the tall photo. */
[data-pencil-name="01 · Hero"] [data-pencil-name="Hero Center"] {
  grid-row: 1;
}
[data-pencil-name="01 · Hero"] [data-pencil-name="Scroll Cue"] {
  position: absolute;
  bottom: max(28px, 5.333vw);
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   FLUID SCALE — the design system

   The export pins a px size on every text block. Rather than
   re-derive each one by hand, we express the whole page as three
   formulas driven by a single design value per element:

     type    font-size:      max(<floor>, <design>/12 * 1vw)
     track   letter-spacing: max(<floor>, <design>/12 * 1vw)
     frame   width:          calc(<w> / 1120 * 100cqw)

   The artboard is 1200px wide, so 1vw = 12px of design; the photo
   content column is 1120px, so 1cqw = 11.2px of design. Each
   element declares only its design number (--fs / --tr / --fw);
   the formulas below are written once and shared.

   Type has two tiers:
     body    (<= 22px)  floor = design size  — labels, copy; never shrink
     display (>= 24px)  floor ~= half       — headings; scale down on phones
   ============================================================ */

/* ---- Type: body tier (floor holds at the design size) ---- */
body [class*="text-[10px]"] { --fs: 10; }
body [class*="text-[11px]"] { --fs: 11; }
body [class*="text-[12px]"] { --fs: 12; }
body [class*="text-[13px]"] { --fs: 13; }
body [class*="text-[14px]"] { --fs: 14; }
body [class*="text-[16px]"] { --fs: 16; }
body [class*="text-[17px]"] { --fs: 17; }
body [class*="text-[19px]"] { --fs: 19; }
body [class*="text-[22px]"] { --fs: 22; }

/* ---- Type: display tier (floor ~= half the design size) ---- */
body [class*="text-[24px]"]  { --fs: 24;  --fs-floor: 15; }
body [class*="text-[30px]"]  { --fs: 30;  --fs-floor: 13; }
body [class*="text-[32px]"]  { --fs: 32;  --fs-floor: 20; }
body [class*="text-[34px]"]  { --fs: 34;  --fs-floor: 20; }
body [class*="text-[44px]"]  { --fs: 44;  --fs-floor: 22; }
body [class*="text-[46px]"]  { --fs: 46;  --fs-floor: 20; }
body [class*="text-[72px]"]  { --fs: 72;  --fs-floor: 36; }
body [class*="text-[96px]"]  { --fs: 96;  --fs-floor: 46; }

/* The one type formula. --fs-floor defaults to --fs, so the body
   tier needs no per-element floor declaration. The selector lists
   the size classes explicitly: a bare [class*="text-["] would also
   match colour utilities like text-[#2E2A26] and break them. */
body [class*="text-[10px]"],
body [class*="text-[11px]"],
body [class*="text-[12px]"],
body [class*="text-[13px]"],
body [class*="text-[14px]"],
body [class*="text-[16px]"],
body [class*="text-[17px]"],
body [class*="text-[19px]"],
body [class*="text-[22px]"],
body [class*="text-[24px]"],
body [class*="text-[30px]"],
body [class*="text-[32px]"],
body [class*="text-[34px]"],
body [class*="text-[44px]"],
body [class*="text-[46px]"],
body [class*="text-[72px]"],
body [class*="text-[96px]"] {
  font-size: max(calc(var(--fs-floor, var(--fs)) * 1px), calc(var(--fs) / 12 * 1vw));
}

/* ---- Year numerals: one crescendo, not eleven hand-tuned sizes ----
   The export gave each year its own size (72, 80, 88 … 150) — a
   deliberate ~8px step down the page. We keep the effect but derive
   it: each Year section declares its index (--year-i), and the size
   is 72 + index*8. Same /12 fluid formula as everything else.

   Declared by section name (not nth-child) so it survives reordering
   — the same pattern as --fw-scale below. */
body [data-pencil-name="Year 2017"] { --year-i: 0; }
body [data-pencil-name="Year 2018"] { --year-i: 1; }
body [data-pencil-name="Year 2019"] { --year-i: 2; }
body [data-pencil-name="Year 2020"] { --year-i: 3; }
body [data-pencil-name="Year 2021"] { --year-i: 4; }
body [data-pencil-name="Year 2022"] { --year-i: 5; }
body [data-pencil-name="Year 2023"] { --year-i: 6; }
body [data-pencil-name="Year 2024"] { --year-i: 7; }
body [data-pencil-name="Year 2025"] { --year-i: 8; }
body [data-pencil-name="Year 2026"] { --year-i: 9; }
body [data-pencil-name="Year 2027"] { --year-i: 10; }

body [data-pencil-name="Year Head"] [data-pencil-name="Year Num"] {
  --year-size: calc(72 + var(--year-i, 0) * 8);
  font-size: max(calc(var(--year-size) * 1px), calc(var(--year-size) / 12 * 1vw));
}

/* Pinned px line-heights from the export, as ratios so they scale */
body [class*="text-[11px]/[17px]"] { line-height: 1.55; }
body [class*="text-[13px]/[21px]"] { line-height: 1.62; }
body [class*="text-[14px]/[22px]"] { line-height: 1.57; }
body [class*="text-[14px]/[24px]"] { line-height: 1.71; }
body [class*="text-[34px]/[41px]"] { line-height: 1.2; }
body [class*="text-[72px]/[72px]"] { line-height: 1.05; }

/* ---- Tracking: same /12 formula, floor holds at the design size ---- */
body [class*="tracking-[0.5px]"] { --tr: 0.5; }
body [class*="tracking-[1px]"]   { --tr: 1; }
body [class*="tracking-[1.5px]"] { --tr: 1.5; }
body [class*="tracking-[2px]"]   { --tr: 2; }
body [class*="tracking-[3px]"]   { --tr: 3; }
body [class*="tracking-[8px]"]   { --tr: 8; --tr-floor: 2; }
body [class*="tracking-[9px]"]   { --tr: 9; --tr-floor: 2; }
body [class*="tracking-["] {
  letter-spacing: max(calc(var(--tr-floor, var(--tr)) * 1px), calc(var(--tr) / 12 * 1vw));
}

/* Year numerals: the export positions them absolutely inside
   fixed-size boxes — let them flow and center instead */
body [data-pencil-name="Year Head"] > div {
  width: auto !important;
  height: auto !important;
}
body [data-pencil-name="Year Head"] [data-pencil-name="Year Num"] {
  position: static !important;
}

/* ---- Flow whispers: give each one breathing room ----
   The whisper text overflows its tiny wrapper and lands on the
   curve below. Simplest fix: move the whole Flow row (whisper +
   curve) down as one unit. */
.flow-row {
  margin-top: max(36px, 3vw);
}
body [data-pencil-name="Whisper"] {
  font-size: max(22px, 1.8333vw);
}

/* ---- Photo collages: proportional width, aspect ratio preserved ----
   Rows become size containers. Each frame declares its design width
   and height once (--fw / --fh, matching its own w-[..] h-[..]
   classes); the single rule below turns those into a width that is
   the frame's proportion of the 1120px content column, and a ratio
   from the same two numbers. --fw-scale lets a whole year grow its
   frames without re-deriving every size. */
body [data-pencil-name="Photos"],
body [data-pencil-name="Photos · More"] {
  container-type: inline-size;
}
body [data-pencil-name="Caption"] {
  width: 100% !important;
  font-size: max(14px, 1.1667vw);
  line-height: 1.55;
  font-weight: 400;
}
/* The video caption reads as a title for the clip, so it runs larger
   than the photo captions. */
body [data-pencil-name="Caption"].caption-video {
  font-size: max(20px, 1.6667vw);
}

/* Design size per frame — one line per unique w/h pair. */
body [class*="w-[254px]"][class*="h-[338px]"] { --fw: 254; --fh: 338; }
body [class*="w-[274px]"][class*="h-[365px]"] { --fw: 274; --fh: 365; }
body [class*="w-[274px]"][class*="h-[486px]"] { --fw: 274; --fh: 486; }
body [class*="w-[293px]"][class*="h-[391px]"] { --fw: 293; --fh: 391; }
body [class*="w-[310px]"][class*="h-[174px]"] { --fw: 310; --fh: 174; }
body [class*="w-[328px]"][class*="h-[437px]"] { --fw: 328; --fh: 437; }
body [class*="w-[332px]"][class*="h-[187px]"] { --fw: 332; --fh: 187; }
body [class*="w-[365px]"][class*="h-[486px]"] { --fw: 365; --fh: 486; }
body [class*="w-[378px]"][class*="h-[284px]"] { --fw: 378; --fh: 284; }
body [class*="w-[385px]"][class*="h-[513px]"] { --fw: 385; --fh: 513; }
body [class*="w-[398px]"][class*="h-[224px]"] { --fw: 398; --fh: 224; }
body [class*="w-[459px]"][class*="h-[612px]"] { --fw: 459; --fh: 612; }
body [class*="w-[486px]"][class*="h-[273px]"] { --fw: 486; --fh: 273; }
body [class*="w-[486px]"][class*="h-[324px]"] { --fw: 486; --fh: 324; }
body [class*="w-[486px]"][class*="h-[365px]"] { --fw: 486; --fh: 365; }
body [class*="w-[611px]"][class*="h-[458px]"] { --fw: 611; --fh: 458; }
body [class*="w-[630px]"][class*="h-[354px]"] { --fw: 630; --fh: 354; }
body [class*="w-[630px]"][class*="h-[355px]"] { --fw: 630; --fh: 355; }

/* The one frame formula — scoped to the collage rows so it can't
   touch the curve tracks, dots, cue or divider (which also carry
   w-[..] h-[..] classes but are not photo frames). */
body [data-pencil-name="Photos"] [class*="w-["][class*="h-["],
body [data-pencil-name="Photos · More"] [class*="w-["][class*="h-["] {
  width: calc(var(--fw) * var(--fw-scale, 1) / 1120 * 100cqw);
  aspect-ratio: var(--fw) / var(--fh);
  height: auto;
}

/* Year sections grow their frames: 2019 by 40%, 2022/2023 by 8%,
   2024 by 50%, 2025 by 35%. One declaration per section, not one
   per frame. */
body [data-pencil-name="Year 2019"] { --fw-scale: 1.4; }
body [data-pencil-name="Year 2022"],
body [data-pencil-name="Year 2023"] { --fw-scale: 1.08; }
body [data-pencil-name="Year 2024"] { --fw-scale: 1.5; }
body [data-pencil-name="Year 2025"] { --fw-scale: 1.35; }

/* The 2022 video sits alone in its row, so it gets its own scale on
   top of the year's — a step up from the photos, not full-bleed. */
body [data-pencil-name="Card 3 · Video"] [class*="w-["][class*="h-["] {
  --fw-scale: 1.6;
}

/* The 2023 team photo also sits alone in its row, so it steps up the
   same way. */
body [data-pencil-name="Year 2023"] [data-pencil-name="Card 3"] [class*="w-["][class*="h-["] {
  --fw-scale: 1.6;
}

/* The first 2023 photo steps up too, matching the team photo. */
body [data-pencil-name="Year 2023"] [data-pencil-name="Card 1"] [class*="w-["][class*="h-["] {
  --fw-scale: 1.6;
}

/* Photos 2022-1 and 2023-3 are the frames whose photo is rotated 90°
   to fit a portrait frame (the source is landscape). The export sizes
   each <img> in fixed px (365×274), which no longer matches the fluid
   frame at other viewports — leaving gaps top and bottom. Size it to
   the frame's swapped dimensions instead: width = frame height,
   height = frame width, so the 90° rotation covers the frame exactly
   at every size.

   Scoped by the 274×365 size pair, not the name alone: the export
   reuses `data-pencil-name="Photo 2022-1"` on a second, unrotated
   486×365 frame, which must keep its own w-full/h-full image. */
body [data-pencil-name="Photo 2022-1"][class*="w-[274px]"][class*="h-[365px]"] img,
body [data-pencil-name="Photo 2023-3"][class*="w-[274px]"][class*="h-[365px]"] img {
  width: calc(var(--fh) * var(--fw-scale, 1) / 1120 * 100cqw);
  height: calc(var(--fw) * var(--fw-scale, 1) / 1120 * 100cqw);
  aspect-ratio: auto;
  max-width: none;
  max-height: none;
}

/* ---- Hover on the venue pills ----
   The export ships these two buttons with no hover state, so they
   read as inert. Lift them the same 3px the Guide Button already
   uses, and deepen the shadow to match. The solid pill also warms
   its fill a touch; the ghost pill fills in from transparent so the
   outline reads as a button rather than a label. */
@media (hover: hover) {
  body [data-pencil-name="Btn Directions"],
  body [data-pencil-name="Btn Instagram"] {
    transition: transform .225s ease, box-shadow .225s ease,
                background-color .225s ease, color .225s ease;
  }
  body [data-pencil-name="Btn Directions"]:hover,
  body [data-pencil-name="Btn Instagram"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(46, 42, 38, .25);
  }
  body [data-pencil-name="Btn Directions"]:hover {
    background-color: #3A342D;
  }
  body [data-pencil-name="Btn Instagram"]:hover {
    background-color: #2E2A26;
  }
  /* The Instagram label and icon are ink-on-transparent; flip them to
     the cream the solid pill uses once the fill goes dark. */
  body [data-pencil-name="Btn Instagram"]:hover [data-pencil-name="Btn Label"] {
    color: #FBF8F3;
  }
  body [data-pencil-name="Btn Instagram"]:hover path {
    fill: #FBF8F3;
  }
}

/* Reduced motion: keep the colour/shadow feedback, drop the lift. */
@media (prefers-reduced-motion: reduce) {
  body [data-pencil-name="Btn Directions"]:hover,
  body [data-pencil-name="Btn Instagram"]:hover {
    transform: none;
  }
}

/* ---- Visible keyboard focus on the interactive buttons ----
   The export ships no focus styles, so keyboard users get only the
   browser default (often invisible on the dark pills). Ring in the
   gold accent, offset so it reads on both light and dark surfaces. */
body [data-pencil-name="Btn Directions"]:focus-visible,
body [data-pencil-name="Btn Instagram"]:focus-visible,
body [data-pencil-name="Guide Button"]:focus-visible {
  outline: 2px solid #E7DCC8;
  outline-offset: 3px;
}

/* ---- Phones: collages stack full-width, long lines wrap ---- */
@media (max-width: 640px) {
  body [data-pencil-name="Photos"],
  body [data-pencil-name="Photos · More"] {
    flex-wrap: wrap;
    row-gap: 28px;
  }
  body [data-pencil-name="Photos"] > div,
  body [data-pencil-name="Photos · More"] > div {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body [class*="[outline:1px_solid_#E7E1D6]"] {
    width: 100% !important;
  }
  /* The two 90°-rotated photos (2022-1, 2023-3) are sized by the
     desktop rule above as a fraction of the design column (100cqw).
     On phones the frame is forced to 100% width instead, so that
     fraction no longer matches the frame and the image shrinks to a
     thumbnail (26%/39% coverage). Re-derive it from the frame's own
     box: the rotated image must be as wide as the frame is tall and
     as tall as the frame is wide. The frame's aspect-ratio is
     274/365, so H/W = 365/274. */
  body [data-pencil-name="Photo 2022-1"][class*="w-[274px]"][class*="h-[365px]"] img,
  body [data-pencil-name="Photo 2023-3"][class*="w-[274px]"][class*="h-[365px]"] img {
    width: calc(100% * 365 / 274);
    height: calc(100% * 274 / 365);
  }
  body [class*="white-space:nowrap"] {
    white-space: normal;
  }
  body [data-pencil-name="Whisper"] {
    white-space: nowrap !important;
  }
  body [data-pencil-name="Names"],
  body [data-pencil-name="Date Line"],
  body [data-pencil-name="Date"],
  body [data-pencil-name="Place"],
  body [data-pencil-name="Countdown Text"] {
    text-align: center;
  }
}

/* ============================================================
   Motion — hero entrance, reveal-on-scroll, drawn flow curves.
   Classes are added by the script at the end of <body>; without
   JS (or with reduced motion) the page is fully visible/static.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; }
  .reveal.in {
    opacity: 1;
    animation: rise-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--reveal-delay, 0s);
  }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(26px); }
  }

  .flow-curve {
    transition: stroke-dashoffset 1.95s cubic-bezier(0.4, 0, 0.2, 1) 0.1125s;
  }

  /* Hero parallax — the titles drift up slightly as the hero scrolls
     away. The script writes --hero-parallax (a px offset) on the
     section; the transform lives here so it composes with the
     children's own reveal transforms (they animate on the children,
     this moves the parent). will-change is scoped to the hero only. */
  body [data-pencil-name="01 · Hero"] [data-pencil-name="Hero Center"] {
    transform: translate3d(0, var(--hero-parallax, 0px), 0);
    will-change: transform;
  }

  body [data-pencil-name="Scroll Cue"] svg {
    animation: cue-bob 1.8s ease-in-out 1.35s infinite;
  }
  @keyframes cue-bob {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(3px); }
  }

  @media (hover: hover) {
    body [data-pencil-name="Photos"] > div,
    body [data-pencil-name="Photos · More"] > div {
      transition: transform 0.375s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body [data-pencil-name="Photos"] > div:hover,
    body [data-pencil-name="Photos · More"] > div:hover {
      transform: translateY(-8px);
    }
  }
}