/* ============================================================
   ALL EARS — the collage wall
   A Pinterest music collage that behaves like paper.
   Indian retro pop via pattern, halftone, stars, color.
   No Hindi text. Strictly brand palette.
   ============================================================ */

/* ---------- paper grounds — translucent washes over ONE continuous
   cream-fiber base (kept for tiles/prints) ---------- */
.paper-brick    { background: linear-gradient(rgba(113, 42, 23, 0.90), rgba(101, 36, 19, 0.92)),
                  url("../assets/real/paper-real-cream.jpg") center/cover; }
.paper-cream    { background: #FFF4E0 url("../assets/real/paper-real-cream.jpg") center/cover; }
.paper-espresso { background: linear-gradient(rgba(69, 52, 36, 0.86), rgba(62, 46, 31, 0.88)),
                  url("../assets/real/paper-real-cream.jpg") center/cover; }
.paper-ink      { background: linear-gradient(rgba(22, 26, 28, 0.88), rgba(22, 26, 28, 0.91)),
                  url("../assets/real/paper-real-cream.jpg") center/cover; }
.paper-sand     { background: linear-gradient(rgba(202, 186, 153, 0.62), rgba(202, 186, 153, 0.66)),
                  url("../assets/real/paper-real-cream.jpg") center/cover; }

/* ---------- SECTION GRADES — solid tones, seamless COMPACT boundaries.
   Sections hold their color; at each boundary the upper sheet casts a
   soft tone-shadow onto the lower one (fixed-px zones, never washy).
   All on one clean, evenly-lit fiber base. */
/* ---------- ONE CONTINUOUS COLOR GRADE ----------
   Opaque hue-to-hue ramps through warm midpoints (never through gray,
   never through alpha). Every boundary's end color equals the next
   section's start color, so the page is one unbroken grade. Fiber and
   grain ride on top as global layers. Content sits in the plateaus. */
section.hero { background:
  linear-gradient(180deg, #6E2916 0, #74301B 70%, #8A4526 100%); }
section.idea { background:
  linear-gradient(180deg, #8A4526 0, #DCC49B 150px, #F2E5C7 240px,
    #F2E5C7 calc(100% - 280px), #97764F calc(100% - 90px), #6B5138 100%); }
section.broken { background:
  linear-gradient(180deg, #6B5138 0, #55432F 200px, #3B2F23 calc(100% - 220px), #2E2D2A 100%); }
section.pinbeat { background:
  linear-gradient(180deg, #2E2D2A 0, #232729 40%, #212528 100%); }
section.line { background:
  linear-gradient(180deg, #212528 0, #262A2B 200px, #2B2A27 calc(100% - 320px), #2E2D2A 100%); }
/* vision carries the dark->cream lift (the old format transition). It sits
   FLAT below the sessions (no torn lap) with a short dark blend at its very
   top, then rises to cream where its content sits, and settles to warm sand
   at its base so the partner brick can rip over it — the signature tear.
   The real dark cushion below the clothesline lives in .line's bottom pad. */
section.vision { background:
  linear-gradient(180deg, #2E2D2A 0, #9A7A54 48px, #F2E5C7 112px,
    #F2E5C7 calc(100% - 110px), #9A7A54 100%); }
section.partner { background:
  linear-gradient(180deg, #7A3117 0, #712A17 45%, #67250F 100%); }
footer.foot { background:
  linear-gradient(180deg, #67250F 0, #641F0C 45%, #5F2410 100%); }

/* ---- THE TEAR, done physically: each arriving section laps OVER the
   previous one with a ragged top edge (real fiber masks on the section
   itself). Texture stays continuous because washes are translucent
   over the single body sheet. The old strip elements are retired. ---- */
.beat__torn { display: none; }

:root { --tear: clamp(48px, 7vw, 92px); }
/* NB: the PINNED section (.pinbeat) is exempt — GSAP pinning must never
   wrap an element that has negative margins or masks (mis-measures). */
section.idea, section.broken, section.line, section.partner, footer.foot {
  margin-top: calc(-1 * var(--tear));
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% var(--tear), 100% calc(100% - var(--tear) + 1px);
          mask-size: 100% var(--tear), 100% calc(100% - var(--tear) + 1px);
  -webkit-mask-position: top center, 0 calc(var(--tear) - 1px);
          mask-position: top center, 0 calc(var(--tear) - 1px);
}
section.idea {
  -webkit-mask-image: url("../assets/real/torn-alpha-a.png"), linear-gradient(#000, #000);
          mask-image: url("../assets/real/torn-alpha-a.png"), linear-gradient(#000, #000); }
section.broken, section.line {
  -webkit-mask-image: url("../assets/real/torn-alpha-b.png"), linear-gradient(#000, #000);
          mask-image: url("../assets/real/torn-alpha-b.png"), linear-gradient(#000, #000); }
/* the partner CTA rips in hard — dark brick over dusty cream, the signature
   dramatic tear (relocated here); the footer then continues brick-on-brick */
section.partner, footer.foot {
  -webkit-mask-image: url("../assets/real/torn-alpha-c.png"), linear-gradient(#000, #000);
          mask-image: url("../assets/real/torn-alpha-c.png"), linear-gradient(#000, #000); }

/* soft depth under each lap: previous sections shade at their base */
section.hero::after, section.idea::after, section.broken::after, section.line::after, section.pinbeat::after, section.vision::after, section.partner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none;
  background: linear-gradient(0deg, rgba(15, 8, 4, 0.16), transparent); }

/* real crumpled-sheet overlay — a whisper, not a wall */
.crumple { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/crumple-overlay.jpg") center/cover;
  mix-blend-mode: overlay; opacity: 0.26; }

/* ---------- motif (recolor via currentColor mask) ---------- */
.motif { background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; }
.m-stamp    { -webkit-mask-image: url("../assets/collage/stamp.svg");    mask-image: url("../assets/collage/stamp.svg"); }
.m-ticket   { -webkit-mask-image: url("../assets/collage/ticket.svg");   mask-image: url("../assets/collage/ticket.svg"); }
.m-paisley  { -webkit-mask-image: url("../assets/ornament/paisley.svg"); mask-image: url("../assets/ornament/paisley.svg"); }
.m-border   { -webkit-mask-image: url("../assets/ornament/border.svg");  mask-image: url("../assets/ornament/border.svg");
  -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }

/* ---------- beats + torn edges ---------- */
.beat { position: relative; width: 100%; overflow: clip; }
/* REAL torn-paper edges (masks derived from photographed tears) */
.beat__torn { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(48px, 7vw, 92px); z-index: 6; pointer-events: none;
  -webkit-mask: url("../assets/real/torn-alpha-a.png") bottom center / 100% 100% no-repeat;
          mask: url("../assets/real/torn-alpha-a.png") bottom center / 100% 100% no-repeat; }
.beat__torn.t-b { -webkit-mask-image: url("../assets/real/torn-alpha-b.png"); mask-image: url("../assets/real/torn-alpha-b.png"); }
.beat__torn.t-c { -webkit-mask-image: url("../assets/real/torn-alpha-c.png"); mask-image: url("../assets/real/torn-alpha-c.png"); }
.beat__torn::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 12px;
  background: linear-gradient(180deg, rgba(20, 8, 4, 0.09), transparent); }

.wrap { width: min(100% - 2 * var(--gutter), 1360px); margin-inline: auto; }
/* RX100 has one weight — never fake-bold it */
.meta { font-family: var(--mono); font-weight: 400; font-size: var(--step--1); letter-spacing: 0.26em; text-transform: uppercase; }

.eyebrow { display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--mono); font-weight: 400;
  font-size: var(--step--1); letter-spacing: 0.28em; text-transform: uppercase; color: var(--brick); }
.eyebrow--light { color: rgba(255, 244, 224, 0.72); }
.eyebrow .star { width: 0.8em; height: 0.8em; }

.statement { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.0;
  font-size: clamp(2.5rem, 1.4rem + 6.4vw, 6.6rem); }
.statement em { font-style: italic; color: var(--brick); }
.statement--dark { color: var(--espresso); }
.body { font-family: var(--mono); font-size: var(--step-0); line-height: 1.78; }
.body--dark { color: rgba(69, 52, 36, 0.82); }
.body--light { color: rgba(255, 244, 224, 0.78); }

.star { display: inline-block; width: 1em; height: 1em; color: var(--brick); flex: none; fill: currentColor; }
.star svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .star.tw { animation: twinkle 4.4s var(--ease-inout) infinite; transform-origin: center; }
  .star.tw.d2 { animation-delay: 1.2s; } .star.tw.d3 { animation-delay: 2.5s; } .star.tw.d4 { animation-delay: 3.3s; }
}

/* ---------- prints, tape, pins, barcode ---------- */
.print { position: relative; padding: 12px 12px 14px; background: #FFF4E0 url("../assets/real/paper-real-cream.jpg") center/cover;
  box-shadow: 0 1px 2px rgba(20, 8, 4, 0.4), 0 22px 40px -18px rgba(20, 8, 4, 0.5); }
.print img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* REAL tape cutouts (photographed, keyed, brand-tinted) */
.tape { position: absolute; z-index: 3; background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(20, 8, 4, 0.28)); }
.tape--t  { top: -14px; left: 50%; translate: -50% 0; rotate: -3deg; width: 124px; aspect-ratio: 660/202;
  background-image: url("../assets/real/tape-real-1.png"); }
.tape--tl { top: -12px; left: -30px; rotate: -38deg; width: 104px; aspect-ratio: 560/130;
  background-image: url("../assets/real/tape-real-3.png"); }
.tape--br { bottom: 20px; right: -34px; rotate: -42deg; width: 104px; aspect-ratio: 560/54;
  background-image: url("../assets/real/tape-real-2.png"); }

.develop { position: relative; }
.develop__stack { position: relative; overflow: hidden; }
.develop__color, .develop__duo { display: block; width: 100%; height: 100%; object-fit: cover; }
.develop__duo { position: absolute; inset: 0; opacity: 0; }
html.anim .develop__duo { opacity: 1; transition: opacity 1.3s var(--ease-out); }
.develop.is-developed .develop__duo { opacity: 0; }

.barcode { display: inline-flex; flex-direction: column; gap: 4px; }
.barcode i { display: block; height: 26px; width: 120px;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 7px, transparent 7px 8px, currentColor 8px 9px, transparent 9px 12px); }
.barcode span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.7; }

/* ============================================================
   HERO — the poster wall
   ============================================================ */
.hero { min-height: 100dvh; color: var(--paper); isolation: isolate;
  display: grid; align-content: center; padding-top: 64px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 100% at 50% 36%, transparent 52%, rgba(8, 3, 1, 0.52) 100%); }
/* the haseen wall — the 1868 textile pattern EMBOSSED into the paper
   (blind-emboss relief, not printed): soft-light neutral relief map */
:root { --wall-tile: clamp(560px, 52vw, 860px); }
.hero__damask { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/brocade-emboss.jpg") center / var(--wall-tile) repeat;
  mix-blend-mode: soft-light; opacity: 1; }
/* the pattern's raised curls catch warm light — a sand-colored glow
   masked to the emboss highlights, screened on so it reads as a visible
   pattern (not just paper texture) without ever breaking brand hue */
.hero__damask::before { content: ""; position: absolute; inset: 0;
  background: var(--sand);
  -webkit-mask: url("../assets/real/brocade-emboss-alpha.png") center / var(--wall-tile) repeat;
          mask: url("../assets/real/brocade-emboss-alpha.png") center / var(--wall-tile) repeat;
  mix-blend-mode: screen; opacity: 0.4; }
/* a second, tighter pass in hard-light gives the grooves real bite without
   ever tinting the brick — hard-light on a neutral-gray source only
   affects contrast/shadow, never hue */
.hero__damask::after { content: ""; position: absolute; inset: 0;
  background: url("../assets/real/brocade-emboss.jpg") center / var(--wall-tile) repeat;
  mix-blend-mode: hard-light; opacity: 0.22; }

.hero__meta-top { position: absolute; top: 0; height: 68px; left: var(--gutter); right: var(--gutter); z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; color: rgba(255, 244, 224, 0.62); }

.hero__stage { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto;
  padding-block: clamp(2.5rem, 5vh, 4rem) clamp(9rem, 15vh, 12rem); min-height: 72vh; }

/* the portrait print — right of center, star over the eye.
   NB: GSAP animates this element, which resets independent CSS
   translate/rotate — so the tilt lives on the inner .print. */
.hero__portrait { position: absolute; right: clamp(0px, 6vw, 120px); top: 9%;
  width: clamp(220px, 24vw, 330px); z-index: 1; }
.hero__portrait .print { padding-bottom: 3.2rem; rotate: 2.4deg; }
.hero__portrait .star--eye { position: absolute; z-index: 4; width: clamp(40px, 4.6vw, 62px); height: clamp(40px, 4.6vw, 62px);
  color: var(--brick); top: 18%; left: 23%; filter: drop-shadow(0 2px 5px rgba(8,3,1,0.25)); }
.hero__portrait .print__foot { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex;
  justify-content: space-between; align-items: flex-end; gap: 0.5rem; color: var(--espresso); }
.hero__portrait .print__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
/* narrowest phones: the label + barcode no longer fit on one row —
   stack them so tracking-heavy caps never wrap into the barcode */
@media (max-width: 360px) {
  .hero__portrait .print__foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero__portrait .print__label { white-space: normal; letter-spacing: 0.18em; }
}

/* the lockup overlaps the portrait like a poster title */
.hero__lockup { position: relative; z-index: 2; display: grid; justify-items: start; gap: clamp(0.9rem, 2vw, 1.5rem);
  max-width: 760px; padding-top: clamp(2rem, 8vh, 5rem); }
.hero__mark { width: min(100%, 680px); mix-blend-mode: normal; }
.hero__mark img { width: 100%; filter: drop-shadow(0 10px 24px rgba(8, 3, 1, 0.5)); }
@media (prefers-reduced-motion: no-preference) { html.anim .hero__mark img { animation: ink-wipe 1.2s var(--ease-out) 0.15s both; } }
@keyframes ink-wipe { from { clip-path: inset(0 100% 0 0); opacity: 0.3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.hero__tagline { width: min(100%, 680px); }
.hero__tagline img { width: min(64%, 340px); margin-inline: auto; filter: drop-shadow(0 4px 12px rgba(8, 3, 1, 0.4)); }
.hero__line { font-family: var(--mono); font-size: var(--step-0); line-height: 1.7; color: rgba(255, 244, 224, 0.82); max-width: 34ch; }

.ticket { position: relative; display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--mono); font-weight: 400;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.16em; color: var(--brick); padding: 0.95em 1.7em;
  rotate: -1.1deg;
  background: #FFF4E0 url("../assets/real/paper-real-cream.jpg") center/cover; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(8, 3, 1, 0.4), 0 14px 26px -12px rgba(8, 3, 1, 0.55);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  clip-path: polygon(0 8px, 4px 0, calc(100% - 4px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 8px)); }
.ticket:hover { transform: translateY(-2px) rotate(-0.6deg); box-shadow: 0 18px 32px -12px rgba(8, 3, 1, 0.66); }
.ticket:active { transform: translateY(0) scale(0.99); }
.ticket .star { width: 0.85em; height: 0.85em; color: var(--brick); }
.playlink { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 244, 224, 0.85); }
.playlink .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.hero__cta-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

/* floating collage pieces */
.hero__scrap { position: absolute; z-index: 1; pointer-events: none; }
.hero__scrap.tix { bottom: 26%; left: 44%; width: clamp(110px, 13vw, 170px); aspect-ratio: 260/120; color: rgba(255,244,224,0.85); }
.hero__scrap.tix .motif { rotate: 8deg; }
/* a REAL torn scrap of vintage wallpaper, collaged in */
.hero__scrap.frag { top: 74%; left: 36%; width: clamp(110px, 12vw, 170px); aspect-ratio: 1800/1453; }
.hero__scrap.frag img { width: 100%; height: 100%; rotate: -8deg; opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(20,8,4,0.4)) drop-shadow(0 10px 16px rgba(20,8,4,0.3)); }
.hero__scrap .motif { width: 100%; height: 100%; }
.hero__scrap.s1 { top: 13%; left: 5%; } .hero__scrap.s2 { top: 68%; right: 6%; } .hero__scrap.s3 { top: 8%; right: 4%; }
.hero__scrap .star { width: clamp(16px, 2vw, 26px); height: clamp(16px, 2vw, 26px); color: var(--sand); }
.hero__scrap.s2 .star { color: rgba(255, 244, 224, 0.9); }

/* the marquee — one per page, velocity-reactive */
.marquee { position: absolute; left: 0; right: 0; bottom: clamp(40px, 6vw, 80px); z-index: 5; overflow: hidden;
  border-block: 1px solid rgba(255, 244, 224, 0.22); background: rgba(8, 3, 1, 0.18);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.marquee__track { display: flex; width: max-content; align-items: center; padding-block: 0.7em; will-change: transform; }
.marquee__chunk { display: flex; align-items: center; gap: 1.6em; padding-right: 1.6em;
  font-family: var(--mono); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255, 244, 224, 0.85); white-space: nowrap; }
.marquee__chunk .star { width: 0.7em; height: 0.7em; color: var(--sand); }

/* ============================================================
   THE IDEA — annotated editorial (cream)
   ============================================================ */
.idea { padding-block: clamp(6rem, 4rem + 9vw, 11rem); }
/* the diamond-lattice medallion plate, engraved faint into the cream —
   gentle so it never fights the reading copy sitting above it */
.idea__damask { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/vine-emboss.jpg") center / clamp(420px, 40vw, 640px) repeat;
  mix-blend-mode: soft-light; opacity: 0.55; }
.idea > .wrap { position: relative; z-index: 1; }
.idea .statement { max-width: 17ch; }
.idea__row { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-top: clamp(1.6rem, 3.4vw, 3rem); }
.idea__copy { position: relative; }
.idea .body { max-width: 42ch; }
/* handwritten margin note + scribble arrow */
.note { position: relative; margin-top: 2rem; max-width: 320px; }
.note__text { font-family: var(--hand); font-size: var(--step-1); line-height: 1.25; color: var(--brick); rotate: -2deg; display: block; }
.note__arrow { position: absolute; right: -84px; top: -26px; width: 90px; height: 70px; color: var(--brick); overflow: visible; }
.note__arrow path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.idea__photo-wrap { justify-self: end; width: min(100%, 470px); }
.idea__photo { position: relative; rotate: -1.8deg; }
.idea__photo .develop__stack { aspect-ratio: 5 / 4; }

/* ============================================================
   THE LINE — sessions hung to dry (espresso)
   ============================================================ */
.line { padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(6rem, 4rem + 8vw, 11rem); color: var(--paper); }
.line__head { display: grid; gap: 1.1rem; margin-bottom: clamp(1.75rem, 2vw, 1.8rem); }
.line__head .statement { color: var(--paper); max-width: 16ch; }
.line__head .statement em { color: var(--sand); }
.line__head .body { max-width: 52ch; }

.wire { position: relative; }
.wire__svg { position: absolute; left: -2%; right: -2%; top: -12px; width: 104%; height: 120px; overflow: visible; z-index: 0; }
.wire__svg path { fill: none; stroke: rgba(255, 244, 224, 0.55); stroke-width: 2; }
.wire__row { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(0.9rem, 2.6vw, 2.4rem); flex-wrap: nowrap; }

/* live rope mode (JS-driven Verlet clothesline) */
.wire--live { height: 420px; margin-top: -50px; }
.wire--live .wire__svg { inset: 0; width: 100%; height: 100%; top: 0; left: 0; }
.wire--live .wire__row { position: absolute; inset: 0; display: block; }
.wire--live .peg { position: absolute; left: 0; top: 0; margin: 0 !important;
  width: clamp(150px, 17vw, 230px); will-change: transform; }

.peg { position: relative; flex: 0 1 clamp(150px, 17vw, 230px); }
/* follow the wire's sag */
.peg:nth-child(1) { margin-top: 20px; } .peg:nth-child(2) { margin-top: 48px; }
.peg:nth-child(3) { margin-top: 48px; } .peg:nth-child(4) { margin-top: 20px; }
@media (max-width: 900px) { .peg { margin-top: 0 !important; } }
.polaroid { position: relative; background: #FFF4E0 url("../assets/real/paper-real-cream.jpg") center/cover;
  padding: 8px 8px 2.6rem; box-shadow: 0 1px 2px rgba(8, 3, 1, 0.45), 0 20px 36px -16px rgba(8, 3, 1, 0.55);
  transform-origin: 50% -14px; rotate: var(--tilt, 0deg); }
@media (prefers-reduced-motion: no-preference) {
  .polaroid { animation: sway 5.2s var(--ease-inout) infinite alternate; animation-delay: var(--swd, 0s); }
}
@keyframes sway { from { transform: rotate(calc(var(--tilt, 0deg) - 1.4deg)); } to { transform: rotate(calc(var(--tilt, 0deg) + 1.4deg)); } }
.polaroid img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; display: block;
  filter: contrast(1.02); }
.polaroid__cap { position: absolute; left: 10px; right: 10px; bottom: 0.7rem; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--espresso); }
.polaroid__cap .star { width: 0.9em; height: 0.9em; }
.polaroid--empty { display: grid; place-items: center; aspect-ratio: 4 / 5.55; padding: 8px; }
.polaroid--empty .hand { font-family: var(--hand); color: var(--brick); font-size: var(--step-1); text-align: center; line-height: 1.2; rotate: -3deg; }
/* clothespin — a real one */
.pin-clip { position: absolute; top: -20px; left: 50%; translate: -50% 0; z-index: 3; width: 19px; height: 36px;
  background: url("../assets/real/pin-real.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(8, 3, 1, 0.4)); }

@media (max-width: 900px) {
  .wire__row { flex-wrap: wrap; justify-content: center; gap: 2.2rem; }
  .peg { flex: 0 1 clamp(150px, 40vw, 220px); }
  .wire__svg { display: none; }
}

/* the carpet, engraved INTO the sessions wall — a full-section relief
   overlay at low opacity (content stays above via .wrap) */
.line__rug { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/carpet-emboss.jpg") center / clamp(780px, 68vw, 1140px) repeat;
  mix-blend-mode: soft-light; opacity: 0.5; }
.line__rug img { display: none; }
.line .wrap { position: relative; z-index: 1; }

/* ============================================================
   RAW. LIVE. ONE TAKE. (ink, pinned)
   ============================================================ */
.pinbeat { min-height: 82vh; display: grid; place-items: center; text-align: center; color: var(--paper); padding-block: clamp(4rem, 8vh, 7rem); }
.pinbeat__inner { width: min(100% - 2 * var(--gutter), 1100px); display: grid; justify-items: center; gap: clamp(1.4rem, 3vw, 2.4rem); }
.pinbeat__statement { font-family: "Yatra", var(--serif); font-weight: 400; letter-spacing: 0.01em; line-height: 1.04;
  font-size: clamp(2.7rem, 1.3rem + 9vw, 8rem); color: var(--paper); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.35em; }
.pinbeat__statement span { display: inline-block; will-change: transform, opacity; white-space: nowrap; }
.pinbeat__body { max-width: 52ch; }

/* ============================================================
   WHAT'S BROKEN — the problem, stated plainly (espresso→ink)
   Centered, compact, light ink on the dark descent.
   ============================================================ */
.broken { padding-block: clamp(4.5rem, 3rem + 7vw, 8.5rem); color: var(--paper); }
.broken__ornament { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/carpet-emboss.jpg") center / clamp(640px, 60vw, 980px) repeat;
  mix-blend-mode: soft-light; opacity: 0.14; }
.broken__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center;
  gap: clamp(1rem, 2vw, 1.6rem); }
.broken__statement { color: var(--paper); max-width: 20ch; }
.broken__statement em { color: var(--sand); }
.broken__body { max-width: 54ch; }

/* ============================================================
   THE VISION — a home for real music (cream)
   ============================================================ */
.vision { padding-block: clamp(7rem, 5rem + 5vw, 10.5rem) clamp(4.5rem, 3rem + 7vw, 8.5rem); }
.vision__ornament { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/vine-emboss.jpg") center / clamp(420px, 40vw, 640px) repeat;
  mix-blend-mode: soft-light; opacity: 0.5; }
.vision__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center;
  gap: clamp(1rem, 2vw, 1.6rem); }
.vision__statement { max-width: 16ch; }
.vision__body { max-width: 48ch; }

/* ============================================================
   PARTNER WITH US — the ask (brick), a taped CTA
   ============================================================ */
.partner { padding-block: clamp(5rem, 3.5rem + 7vw, 9rem); color: var(--paper); }
.partner__ornament { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/scroll-emboss.jpg") center / clamp(560px, 52vw, 860px) repeat;
  mix-blend-mode: soft-light; opacity: 0.5; }
.partner__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center;
  gap: clamp(1.1rem, 2.2vw, 1.8rem); }
.partner__statement { color: var(--paper); max-width: 18ch; }
.partner__statement em { color: var(--sand); }
.partner__body { max-width: 54ch; }
.partner__cta { margin-top: 0.8rem; }

/* ============================================================
   FOOTER — backstage pass (brick)
   ============================================================ */
.foot { min-height: 86vh; display: grid; place-items: center; text-align: center; color: var(--paper); }
.foot::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 60%, transparent 50%, rgba(8, 3, 1, 0.5)); }
/* the framed carpet-and-lion plate, engraved bold into the brick — a
   closing bookend to the hero's brocade wall, same craft, different plate */
.foot__damask { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/real/scroll-emboss.jpg") center / clamp(560px, 52vw, 860px) repeat;
  mix-blend-mode: soft-light; opacity: 0.9; }
.foot__damask::after { content: ""; position: absolute; inset: 0;
  background: url("../assets/real/scroll-emboss.jpg") center / clamp(560px, 52vw, 860px) repeat;
  mix-blend-mode: hard-light; opacity: 0.2; }

.foot__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(1.1rem, 2.4vw, 1.8rem);
  width: min(100% - 2 * var(--gutter), 900px); padding-block: 5rem; }
.foot__mark { width: min(92%, 600px); filter: drop-shadow(0 10px 22px rgba(8, 3, 1, 0.45)); }
.foot__tag { width: min(50%, 300px); } .foot__tag img { width: 100%; }
.foot__row { display: flex; align-items: center; gap: 2rem; margin-top: 0.8rem; flex-wrap: wrap; justify-content: center; }
.foot__barcode { color: rgba(255, 244, 224, 0.8); }
.foot__contact { border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity 0.3s ease; }
.foot__contact:hover { opacity: 0.72; }
.foot__stamp { width: 92px; height: 92px; color: rgba(255, 244, 224, 0.85); rotate: 9deg; }
.foot__credit { color: rgba(255, 244, 224, 0.6); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero__stage { min-height: 0; display: grid; gap: 2.4rem; }
  .hero__portrait { position: relative; right: auto; top: auto; translate: none; order: 2;
    width: min(78%, 340px); justify-self: center; }
  .hero__lockup { order: 1; justify-items: center; text-align: center; padding-top: 3rem; }
  .hero__line { display: none; }
  .hero__scrap.tix, .hero__scrap.paisl { display: none; }
  .idea__row { grid-template-columns: 1fr; }
  .idea__photo-wrap { justify-self: center; order: -1; }
  .note__arrow { display: none; }
}

/* ---------- keyframes + reveals ---------- */
@keyframes twinkle { 0%,100% { transform: scale(1); opacity: 1; } 48% { transform: scale(0.78); opacity: 0.68; } 56% { transform: scale(1.16); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.anim [data-hero] { animation: enter-up 0.9s var(--ease-out) both; animation-delay: var(--hd, 0s); }
}
@keyframes enter-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

html.reveals-on [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.reveals-on [data-reveal].in { opacity: 1; transform: none; }
html.reveals-on [data-mask] { clip-path: inset(100% 0 0 0); transform: translateY(12px); transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
html.reveals-on [data-mask].in { clip-path: inset(0 0 0 0); transform: none; }