/* ============================================================
   ORNAMENT, FLOCK, AND THE 3D BOXES  (meeting, 2026-09-24)
   White ground with her butterfly lattice drifting behind
   everything, pink rosettes breathing in and out of it, and the
   3D colour blocks. The butterflies themselves moved to
   butterflies.css on 2026-09-29 when the client's flock arrived.
   Every moving thing here animates transform or opacity only,
   so it stays on the compositor. Loaded after core.css.
   ============================================================ */

.app{position:relative;z-index:1}

/* ---------- the lattice ----------
   Each layer is a tile larger than the screen on every side and
   slides by exactly one tile, so the loop has no seam. */
.bgorn{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;--tile:150px}
.bgorn__lattice,.bgorn__glow{
  position:absolute;left:calc(var(--tile) * -1);top:calc(var(--tile) * -1);
  width:calc(100% + var(--tile) * 2);height:calc(100% + var(--tile) * 2);
  background-size:var(--tile) var(--tile);
  will-change:transform;
  animation:latt 48s linear infinite;
}
.bgorn__lattice{background-image:url(../assets/web/ornament.svg);opacity:.36}
.bgorn__glow{
  background-image:url(../assets/web/ornament-glow.svg);
  opacity:.26;
  animation:latt 48s linear infinite, glowin 7s ease-in-out infinite;
}
/* a soft white wash through the middle so copy never sits hard on the pattern */
.bgorn::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 45%, rgba(255,255,255,.7), rgba(255,255,255,0) 100%);
}
@keyframes latt{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--tile),var(--tile),0)}}
@keyframes glowin{0%,100%{opacity:.08}50%{opacity:.28}}

@media (min-width:900px){
  .bgorn{--tile:190px}
}

/* ---------- 3D boxes, in colour ----------
   A solid edge under each box reads as thickness, the soft shadow
   below that reads as height. The colour lives in the bodies. */
:root{
  --edge-lav:#CDB9F3;
  --edge-pink:#F2AAD9;
  --edge-plum:#0E0920;
  --lift3d:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 0 var(--edge,var(--edge-lav)), 0 12px 20px rgba(39,26,77,.12), 0 28px 50px rgba(39,26,77,.12);
}
.hero,.dark{--edge:var(--edge-plum);box-shadow:var(--lift3d)}
.bigcard{--edge:var(--edge-lav);box-shadow:var(--lift3d)}
.momday{--edge:var(--edge-pink);box-shadow:var(--lift3d)}
.tile,.prod{--edge:var(--edge-lav);box-shadow:var(--lift3d)}
.tile__body,.prod__body{background:linear-gradient(165deg,#F5EEFF,#EADCFF)}
.duo .tile:nth-child(2),.prod:nth-child(2){--edge:var(--edge-pink)}
.duo .tile:nth-child(2) .tile__body,.prod:nth-child(2) .prod__body{background:linear-gradient(165deg,#FFF0F9,#FFDDF1)}
.shelf{padding-bottom:20px}

.tracks{gap:10px}
.trk{
  background:linear-gradient(165deg,#fff,#F4ECFF);
  box-shadow:0 4px 0 var(--edge-lav), 0 10px 18px rgba(39,26,77,.08);
}
.tracks li:nth-child(even) .trk{
  background:linear-gradient(165deg,#fff,#FFEEF8);
  box-shadow:0 4px 0 var(--edge-pink), 0 10px 18px rgba(39,26,77,.08);
}
.trk__i{color:var(--violet)}

/* the pill buttons get a real edge too, and press down into it */
.cta{box-shadow:0 4px 0 #C94A9F, 0 10px 18px rgba(0,0,0,.2);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.cta:active{transform:translateY(3px);box-shadow:0 1px 0 #C94A9F, 0 4px 10px rgba(0,0,0,.18)}
.cta--violet{box-shadow:0 4px 0 #46288F, 0 10px 18px rgba(0,0,0,.2)}
.cta--violet:active{box-shadow:0 1px 0 #46288F}
.cta--ghost,.cta--ghost:active{box-shadow:none}
.circ{box-shadow:0 3px 0 var(--edge-lav)}
.circ--dark{box-shadow:0 3px 0 #000}

@media (hover:hover) and (min-width:900px){
  .tile,.prod,.trk{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .tile:hover,.prod:hover{
    transform:translateY(-5px);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 11px 0 var(--edge), 0 22px 30px rgba(39,26,77,.14), 0 40px 70px rgba(39,26,77,.14);
  }
  .trk:hover{transform:translateY(-3px)}
}

/* ---------- card corner ornaments ---------- */
.momday,.dark{position:relative}
.momday::before,.momday::after,.dark::before{
  content:"";position:absolute;width:118px;height:118px;pointer-events:none;z-index:0;
  -webkit-mask:url(../assets/web/ornament-corner.svg) no-repeat 0 0/100% 100%;
          mask:url(../assets/web/ornament-corner.svg) no-repeat 0 0/100% 100%;
}
.momday::before{top:4px;left:4px;background:#EE8FCB;opacity:.7}
.momday::after{bottom:4px;right:4px;background:#EE8FCB;opacity:.7;transform:rotate(180deg)}
.dark::before{top:4px;right:4px;background:var(--lav-300);opacity:.4;transform:scaleX(-1)}
.momday__in{position:relative;z-index:1}
@media (max-width:899px){
  .momday::before,.momday::after{width:78px;height:78px;opacity:.55}
  .momday__in{padding-top:30px}
}

/* ---------- hero: the hand, with its meaning beside it ---------- */
.asl{position:absolute;z-index:3;left:10px;top:10px;display:flex;align-items:flex-start}
.asl__hand{
  width:62px;height:62px;flex:none;
  transform:rotate(-8deg);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.asl .sticker--note{position:relative;top:14px;left:-4px;max-width:none;white-space:nowrap;font-size:16px}
.hero__in{padding-top:86px}
@media (min-width:900px){
  .asl{left:26px;top:22px}
  .asl__hand{width:84px;height:84px}
  .asl .sticker--note{top:22px;font-size:19px}
  .hero__in{padding-top:120px}
}

/* ---------- the note on her photo, bigger so it gets read ---------- */
.sticker--big{font-size:25px;padding:11px 17px;max-width:none;line-height:1.05}
@media (min-width:900px){ .sticker--big{font-size:34px;padding:14px 22px} }

/* ---------- music for the signing community ---------- */
.signed{
  --edge:var(--edge-plum);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;
  padding:22px 20px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--plum-800),var(--plum-900) 70%);
  color:var(--on-dark);
  box-shadow:var(--lift3d);
}
.signed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 60% at 10% 20%, rgba(255,110,199,.25), transparent 70%);
}
.signed > *{position:relative;z-index:1}
.signed__hand{width:88px;height:88px;transform:rotate(-8deg);filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.signed__k{font-size:12px;font-weight:700;color:var(--pink-soft);margin-bottom:4px}
.signed p:not(.signed__k){color:var(--on-dark-2);font-size:14px;margin-top:8px;max-width:48ch}
.signed .pill{margin-top:14px}
@media (max-width:420px){
  .signed{grid-template-columns:1fr}
  .signed__hand{width:72px;height:72px}
}
@media (min-width:900px){
  .signed{grid-template-columns:150px 1fr;gap:34px;padding:40px 44px}
  .signed__hand{width:150px;height:150px}
  .signed p:not(.signed__k){font-size:16px}
}

/* ---------- a programme whose photos are still on the way ---------- */
.prog__ph{
  display:grid;place-items:center;width:56px;height:56px;border-radius:12px;
  background:linear-gradient(160deg,#FFE9F7,#E7DBFA);
}
.prog__ph img{width:60%;height:auto;opacity:.45;border-radius:0}
@media (min-width:900px){
  .prog__ph{width:100%;height:210px;border-radius:14px}
  .prog__ph img{width:34%;height:auto}
}

/* Desktop fills the window; one narrow gutter and full-width media columns. */
@media (min-width:900px){
  .app{--pad:0px;max-width:none;padding-inline:clamp(20px,1.5vw,32px)}
  .split__media{min-width:0}
  .bigcard{width:100%}
  #story .bigcard > img{object-position:50% 0%}
  .prog img{height:auto;aspect-ratio:16/10;object-fit:cover}
  .tile__ph{width:100%;aspect-ratio:16/10;max-height:480px}
  .tile.is-playing .tile__ph{max-height:none}
  .prod__ph{width:100%;max-height:620px}
  .hero-wrap{margin-top:40px}
  .perch--hero-a{right:-8px!important}
}

@media (prefers-reduced-motion:reduce){
  .bgorn__lattice,.bgorn__glow{animation:none!important}
}


/* ============================================================
   CLIENT DELIVERABLES, 2026-09-29. The layout stays as it was;
   these only make room for what she sent.
   ============================================================ */

/* ---------- hero: the video plays where the photo was ----------
   Same rules as the photo: no transition on the transform, js
   writes finished pixel lengths into --px/--py. Starts muted, looped,
   inline; her sound comes on from the Start listening button. The
   poster is a frame of the same encode. */
.hero__ph video{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.46;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.08);
  will-change:transform;
  background:var(--plum-900);
}
/* the wall is brighter than the photo was, so the wash behind the copy
   goes deeper: solid plum under the button, near solid under the headline */
.hero__ph::after{
  background:
    linear-gradient(to top, var(--plum-900) 26%, rgba(27,18,54,.9) 54%, rgba(27,18,54,.3) 80%),
    radial-gradient(70% 50% at 78% 12%, rgba(255,110,199,.3), transparent 70%);
}
@media (min-width:900px){
  .hero__ph::after{
    background:
      linear-gradient(to right, var(--plum-900) 8%, rgba(27,18,54,.9) 40%, rgba(27,18,54,.18) 72%),
      radial-gradient(48% 62% at 84% 18%, rgba(255,110,199,.3), transparent 72%);
  }
  /* portrait footage on a landscape card: the reel covers the whole card,
     js/site.js follows the changing face position through the supplied reel;
     the left wash keeps the copy readable over her. */
  .hero__ph video{
    position:absolute;inset:0;width:100%;height:100%;
    object-position:50% 35%;opacity:.58;
    -webkit-mask-image:none;mask-image:none;
  }
}
@media (prefers-reduced-motion:reduce){ .hero__ph video{transform:none!important} }
.hero-wrap{position:relative}

/* ---------- the tiles play their songs in place ----------
   Press play and the tile's photo becomes the player; it widens to the
   full row and goes 16:9 so the video is not letterboxed in a square.
   One at a time: the next one closes the last. */
.tile__ph{position:relative}
.tile__ph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.tile.is-playing{grid-column:1/-1}
.tile.is-playing .tile__ph{aspect-ratio:16/9}
.tile.is-playing .tile__play{display:none}
.tile__m{overflow-wrap:anywhere}

/* three tiles now: on a phone the third takes the full row and goes
   landscape, on desktop the row is three across */
@media (max-width:899px){
  .duo .tile:nth-child(3):last-child{grid-column:1/-1}
  .duo .tile:nth-child(3):last-child .tile__ph{aspect-ratio:16/9}
}
@media (min-width:900px){
  .duo{grid-template-columns:repeat(3,1fr)}
}

/* the track rows that start a player are buttons now */
.trk{width:100%;text-align:left}

/* ---------- her three marks, inline in her own sentence ---------- */
.mk{display:inline-block;width:1.7em;height:1.7em;vertical-align:-.5em;margin:0 .05em}
.mk--bf{position:relative;width:1.7em;height:1.5em}
.mk--bf .bfy{position:absolute;left:0;top:-.1em}
img.mk{object-fit:contain;filter:drop-shadow(0 2px 3px rgba(39,26,77,.35))}
.mk--heart{fill:var(--violet);stroke:none;width:1.35em;height:1.35em;vertical-align:-.3em}