/* The four scenes carry their own faces and colors, the ones the first version
   had: the site itself has no --serif, so these words were falling back to the
   plain body font (her word, 5 Oct 2026). */
.drop, .drop-dark, .sun, .win, .rows, .float-layer {
  --serif: 'Fraunces', Georgia, serif;
  --display: 'Anton', sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --price: 'Space Grotesk', system-ui, sans-serif;
  --navy: #001E2D; --ink: #003049; --cream: #EAE2B7; --amber: #FFB627; --flag: #D62828; --red: #AE2012; --paper: #F7F3E8;
}
/* The four scenes on the home page (her word, 5 Oct 2026), taken from the
   three recordings she sent: Drop, Rising sun, Window, and The people. */

/* A1 · Drop — built from her first recording: the product travels through the
   page as you scroll, tilted, crossing a word the width of the screen, and a
   torn panel wipes the page from paper to navy. */
.drop { position: relative; background: var(--paper); }
.drop-run { position: relative; height: 320vh; }           /* the stretch the scene plays over */
.drop-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.drop-sky { position: absolute; inset: 0; background: var(--paper); }
/* the navy that wipes up over the paper, with a torn top edge */
.drop-night { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: translateY(calc(100% - var(--wipe, 0) * 100%)); will-change: transform; }
.drop-night i { position: absolute; inset: 30px 0 0; background: var(--navy); display: block; }
.drop-night svg { position: absolute; left: -2vw; top: 0; width: 104%; height: 34px; display: block; }
/* The words, in the face the first version had — and the designs pass behind
   them, turning the letters they cross the other way round (her word, 7 Oct
   2026).

   That is the difference blend doing it, not a second copy cut to the circles:
   a copy had to be re-cut every frame from where six circles had swum to, which
   cost more than the whole rest of the page and still left ragged edges. Here
   the browser does it per pixel, for nothing, and it cannot bleed.

   What you see is the gap between a letter's color and whatever lies under it,
   so over the plain page the letters have to be written as the background minus
   the color she wants:
     paper #F7F3E8 − navy  #001E2D = #F7D5BB   (reads navy over the paper)
     paper #F7F3E8 − flag  #D62828 = #21CBC0   (reads red over the paper)
     navy  #001E2D + cream #EAE2B7 = #EAFFE4   (reads cream over the navy)
     navy  #001E2D + amber #FFB627 = #FFD454   (reads amber over the navy) */
.drop-word { font-family: 'Anton', var(--display); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(var(--wordY, 0px)); width: max-content; text-align: center;
  font: 400 min(9vw, 150px)/.9 'Anton', var(--display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  z-index: 5; mix-blend-mode: difference; color: #F7D5BB; }
.drop-word em { display: block; font-style: normal; color: #21CBC0; }
.drop-word.on-night { color: #EAFFE4; opacity: 0; }
.drop-word.on-night em { color: #FFD454; }
/* a browser without blend modes gets the plain words, never the raw colors */
@supports not (mix-blend-mode: difference) {
  .drop-word { mix-blend-mode: normal; color: var(--navy); }
  .drop-word em { color: var(--flag); }
  .drop-word.on-night { color: var(--cream); }
  .drop-word.on-night em { color: var(--amber); }
}
/* the designs, tall like a can, tilted, travelling */
/* circles, and they travel with the scroll (her word, 5 Oct 2026) — across the
   whole page, not just the first screen, the way the cans do in her reference.
   The two designs named Dutertismo are the big ones, out in front. */
.float-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.can { pointer-events: auto; position: absolute; top: 0; transform: translate3d(var(--fx, 0px), calc(var(--ty,120vh) + var(--fl, 0px)), 0) rotate(var(--rot,0deg)) scale(var(--sc,1)); width: clamp(120px,14vw,210px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; text-decoration: none;
  box-shadow: 0 46px 60px -36px rgba(0,25,40,.7);
  will-change: transform; }
.can img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* the stars: the shirts named Dutertismo, larger and in front */
.can.star { z-index: 2; box-shadow: 0 60px 80px -40px rgba(0,25,40,.8); }
/* the copy that arrives with the navy */
.drop-copy { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%) translateY(calc((1 - var(--copy,0)) * 40px)); opacity: var(--copy, 0);
  width: min(460px, 86vw); text-align: center; color: var(--cream); }
.drop-copy p { margin: 0 0 20px; font-size: clamp(15px,1.4vw,18px); line-height: 1.6; }
.drop-cta { display: inline-block; padding: 15px 28px; border-radius: 999px; background: var(--amber); color: var(--navy); text-decoration: none;
  font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.drop-eyebrow { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
/* the little dashes that cross the screen in her recording */
.drop-bits { position: absolute; inset: 0; pointer-events: none; }
.drop-bits i { position: absolute; width: 14px; height: 5px; border-radius: 5px; background: var(--navy); opacity: .25; transform: translate3d(0, var(--ty,0px), 0) rotate(var(--r,0deg)); }
.drop-night-bits i { background: var(--cream); opacity: .35; }
/* the row of designs that follows, on the navy */
.drop-dark { position: relative; background: var(--navy); color: var(--cream); padding: clamp(60px,9vh,110px) 20px clamp(70px,11vh,130px); }
.drop-head { text-align: center; margin: 0 auto clamp(30px,5vh,52px); max-width: 620px; }
.drop-head h2 { margin: 0 0 10px; font: 400 clamp(30px,4.2vw,56px)/1 var(--display); text-transform: uppercase; }
.drop-head small { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--amber); }
.drop-row { display: flex; gap: clamp(14px,3vw,40px); justify-content: center; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.drop-card { width: clamp(150px,17vw,230px); text-decoration: none; }
.drop-card .shot { display: block; aspect-ratio: 5/7; border-radius: 14px; overflow: hidden; background: #0d2030; }
.drop-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.drop-card:hover img { transform: scale(1.05); }
.drop-card span.nm { display: block; margin-top: 12px; font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.drop-card b { display: inline-block; margin-top: 8px; padding: 6px 11px; border-radius: 4px; background: var(--amber); color: var(--navy); font: 700 15px var(--price); }
@media (max-width: 760px) { .can.hide-sm { display: none; } .drop-run { height: 280vh; } }
@media (prefers-reduced-motion: reduce) { .drop-run { height: auto; } .drop-pin { position: relative; height: auto; padding: 60px 0; } .drop-night { display: none; } .drop-copy { position: static; transform: none; opacity: 1; color: var(--navy); margin: 30px auto 0; } .drop-cta { background: var(--flag); color: #fff; } .drop-eyebrow { color: var(--red); } }


/* a little taller than the screen, so the reflection has its water and the
   pager still lies clear underneath it (her word, 6 Oct 2026) */
.sun { position: relative; min-height: calc(100svh + 120px); background: #05121c; color: var(--cream); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
/* clear of the sticky header, so BEST SELLERS is read, not hidden under it */
.sun-top { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--head-h, 76px) + 26px) var(--edge) 26px; }
/* Best Sellers exactly in the middle, whatever the words either side (her word, 9 Oct 2026) */
.sun-top small:first-child { justify-self: start; }
.sun-top small:last-child { justify-self: end; }
.sun-top small { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
/* what the scene is carrying, said at the top of it (her word, 6 Oct 2026) */
.sun-tag { font: 600 13px var(--mono); letter-spacing: .34em; text-transform: uppercase; color: #FCBF49; padding-left: .34em; }  /* the spacing after the last letter, matched in front */
@media (max-width: 700px) { .sun-top small { display: none; } .sun-top { grid-template-columns: 1fr; justify-items: center; } }
.sun-stage { position: relative; display: grid; place-items: center; }
.sun-disc { position: absolute; top: 50%; left: 50%; width: min(62vh,560px); aspect-ratio: 1; margin: -3vh 0 0 0; transform: translate(-50%,-50%);   /* same center as the photo, which sits 3vh up (her word, 9 Oct 2026) */
  border-radius: 50%; background: var(--glow,#E8590C); filter: blur(.2px); transition: background 1.1s ease; }
.sun-disc::after { content:''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow,#E8590C) 55%, transparent) 0%, transparent 62%); }
.sun-water { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, color-mix(in srgb, var(--glow,#E8590C) 22%, #05121c) 0%, #05121c 72%); }
.sun-water i { position: absolute; left: 50%; top: 0; width: min(46vh,420px); height: 60%; transform: translateX(-50%);
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--glow,#E8590C) 70%, transparent), transparent 70%); filter: blur(10px); opacity: .75;
  animation: ripple 6s ease-in-out infinite alternate; }
@keyframes ripple { from { transform: translateX(-50%) scaleY(1); } to { transform: translateX(-50%) scaleY(1.12); } }
.sun-shot { position: relative; z-index: 4; width: min(40vh,360px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.9); transform: translateY(-3vh); }
.sun-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transition: opacity .7s, transform 1.1s; }
.sun-shot.is-out img { opacity: 0; transform: scale(1.06); }
/* the reflection is 300px of water and no more (her word, 6 Oct 2026) */
.sun-mirror { position: absolute; z-index: 3; top: calc(50% + min(17vh,152px)); left: 50%; width: 300px; height: 300px; transform: translateX(-50%) scaleY(-1);
  border-radius: 50%; overflow: hidden; opacity: .3; filter: blur(1.5px); -webkit-mask-image: linear-gradient(0deg, transparent 12%, #000 86%); mask-image: linear-gradient(0deg, transparent 12%, #000 86%); }
.sun-mirror img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.sun-words { position: absolute; z-index: 5; left: clamp(20px,5vw,70px); top: 50%; transform: translateY(-50%); max-width: 360px; }
.sun-words h1 { margin: 0 0 14px; font: 500 clamp(34px,4.4vw,62px)/1.02 var(--serif); letter-spacing: -.01em; }
.sun-words p { margin: 0; font-size: 15px; line-height: 1.65; opacity: .8; max-width: 270px; }
.sun-note { position: absolute; z-index: 5; right: clamp(20px,5vw,70px); top: 50%; transform: translateY(-50%); text-align: right; }
.sun-note b { display: block; padding: 8px 13px; border-radius: 4px; background: var(--amber); color: var(--navy); font: 700 17px var(--price); }
.sun-note small { display: block; margin-top: 12px; font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
/* the pager lies under the reflection, on its side (her word, 6 Oct 2026) */
/* the five dots sit in the space between the photo and its reflection (her word, 9 Oct 2026) */
.sun-dots { position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); top: calc(50% - 3vh + min(20vh,180px) + 24px);
  display: flex; align-items: center; gap: 14px; }
.sun-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(234,226,183,.3); cursor: pointer; transition: background .3s, transform .3s; }
.sun-dots button.on { background: var(--amber); transform: scale(1.5); }
.sun-foot { position: static; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--edge) 30px; font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .65; }
.sun-go { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.sun-go i { width: 34px; height: 34px; border: 1px solid rgba(234,226,183,.4); border-radius: 50%; display: grid; place-items: center; font-style: normal; }
/* leaves, the way the recording has them crossing the sun */
.sun-bits { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.sun-bits i { position: absolute; width: 7px; height: 7px; border-radius: 40% 60% 55% 45%; background: color-mix(in srgb, var(--glow,#E8590C) 70%, #fff); opacity: .5;
  animation: cross var(--t) linear infinite; }
@keyframes cross { from { transform: translate3d(-10vw, 0, 0) rotate(0); } to { transform: translate3d(110vw, var(--dy), 0) rotate(540deg); } }
@media (max-width: 700px) {
  /* Her word, 10 Oct 2026: the shirt's name at the top of the phone is hers to
     move. Pinned at 16% of the scene she could only ever push it further down;
     from 0 the whole distance is the space she sets on the words themselves,
     so she can bring it up as well. */
  .sun-words { top: 0; left: 20px; right: 20px; transform: none; max-width: none; text-align: center; }
  /* the round arrow beside "See all 30 designs" — her word, 10 Oct 2026:
     "hindi ko type ang circle sa mobile which is nasa right" */
  .sun-go i { display: none; }
  /* the words are centred, so the narrow box they sit in has to be centred too,
     or the line hangs off the left under a centred name (her word, 10 Oct 2026) */
  .sun-words p { max-width: 34ch; margin-inline: auto; }
  /* Her word, 10 Oct 2026: "ayoko mag-overlap 'ung presyo sa circle kahit anong
     mangyari." The price was pinned 20vh up from the foot, which on a short
     screen put it across the bottom of the photograph. It hangs off the
     photograph itself now — half the photo's own height below the middle, plus
     16px — so whatever the screen, it begins where the circle ends. */
  .sun-note { top: calc(50% - 1.1vh + min(20vh, 145px) + 62px); bottom: auto;
    right: 0; left: 0; transform: none; text-align: center; }
  /* The amber box keeps to its own words, and the old price drops under it the
   way it already does on a pad — side by side they ran into each other
   (her word, 10 Oct 2026). */
  /* Her word, 10 Oct 2026: on a phone the price goes under the batch number.
     The three read batch, price, old price down the middle. */
  .sun-note { display: flex; flex-direction: column; align-items: center; }
  .sun-note small { order: -1; margin: 0 0 12px; }
  .sun-note b { display: inline-block; }
  .sun-note s { display: block; margin-top: 8px; }
  /* the dots keep to the foot of the stage, out of the price's way, instead of
     being measured off the old 58vw photograph (10 Oct 2026) */
  /* the dots sit under the circle exactly as they do on a pad and a desktop —
     24px below it — rather than down at the foot of the stage (her word,
     10 Oct 2026) */
  .sun-dots { gap: 12px; top: calc(50% - 1.1vh + min(20vh, 145px) + 24px); bottom: auto; }
  /* Her word, 10 Oct 2026: the circle on a phone is the same size as it is on a
     pad and a desktop. It had been measured against the width of the screen —
     58vw for the photograph, and a sun bounded only by the height — so on a
     narrow screen it grew to 560px and swallowed the scene. The same numbers
     the wide screens settle at are used here: a 448px sun and a 289px
     photograph, still bounded by the height so a short screen cannot overflow. */
  /* and they sit at the same depth in the water as they do on a pad and a
     desktop — a third of the sun under the line, a quarter of the photograph.
     At 2vh lower they were sinking 39% and 33%, which is what made the arc
     above the water read thinner on a phone (her word, 10 Oct 2026). */
  .sun-disc { margin-top: -1.1vh; width: min(62vh, 448px); }
  .sun-shot { width: min(40vh, 289px); transform: translateY(-1.1vh); }
  .sun-mirror { width: min(40vh, 289px); top: calc(50% + min(20vh, 145px)); }
}
@media (prefers-reduced-motion: reduce) { .sun-bits i, .sun-water i { animation: none !important; } }


.win { position: relative; min-height: 100svh; background: var(--paper); color: var(--navy); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.win-top { display: flex; justify-content: space-between; align-items: center; padding: 26px var(--edge); font: 600 var(--tiny) var(--mono); letter-spacing: .28em; text-transform: uppercase; }
.win-stage { position: relative; display: grid; place-items: center; padding: 0 var(--edge); }
.win-line { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px,3vw,46px); width: 100%; max-width: 1240px; }
.win-l, .win-r { font: 500 clamp(26px,4.6vw,66px)/1.02 var(--serif); }
.win-l { text-align: right; } .win-r { text-align: left; }
.win-l em, .win-r em { display: block; font-style: normal; opacity: .45; }
.win-frame { position: relative; width: clamp(200px,26vw,330px); aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: #d9d4c6;
  box-shadow: 0 50px 90px -50px rgba(0,30,45,.7); transform: translateY(var(--drift,0)) rotate(var(--tilt,0deg)); transition: transform .5s ease-out; }
.win-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: opacity .55s, transform 1.4s ease-out; }
.win-frame.is-out img { opacity: 0; transform: scale(1.07); }
.win-frame b { position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; border-radius: 4px; background: var(--amber); color: var(--navy); font: 700 15px var(--price); }
.win-meta { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin-top: clamp(26px,5vh,54px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.win-meta small { font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.win-meta p { margin: 6px 0 0; max-width: 330px; font-size: 15px; line-height: 1.6; }
.win-pick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.win-pick button { width: 44px; height: 56px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; background: none; opacity: .4; transition: opacity .3s, transform .3s; }
.win-pick button img { width: 100%; height: 100%; object-fit: cover; }
.win-pick button.on { opacity: 1; transform: translateY(-4px); box-shadow: 0 10px 18px -10px rgba(0,30,45,.8); }
.win-foot { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--edge) 30px; font: 600 var(--tiny) var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.win-foot a { text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.win-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.win-rings i { position: absolute; border: 1px solid rgba(0,30,45,.08); border-radius: 50%; width: var(--d); height: var(--d); animation: pulse 9s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(.97); opacity: .6; } to { transform: scale(1.04); opacity: 1; } }
@media (max-width: 860px) {
  .win-line { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .win-l, .win-r { text-align: center; }
  .win-frame { width: min(62vw, 280px); }
  .win-meta { flex-direction: column; align-items: center; text-align: center; }
  .win-pick { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .win-rings i { animation: none; } .win-frame { transition: none; } }


.rows { background: #E9D8A6; color: #003049; padding: clamp(60px,9vh,120px) var(--edge) clamp(70px,11vh,140px); }
.rows-head { max-width: 1240px; margin: 0 auto clamp(30px,5vh,56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rows-head small { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #BB3E03; }
.rows-head h2 { margin: 6px 0 0; font: 400 clamp(32px,4.6vw,64px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.rows-head a { text-decoration: none; font: 600 var(--tiny) var(--mono); letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.rows-list { max-width: 1240px; margin: 0 auto; border-top: 1px solid rgba(0,48,73,.22); }
.row { position: relative; border-bottom: 1px solid rgba(0,48,73,.22); overflow: hidden; cursor: pointer; }
.row-bar { position: relative; z-index: 3; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 18px; padding: clamp(18px,2.4vh,26px) 4px; transition: color .45s; }
.row-no { font: 600 var(--tiny) var(--mono); letter-spacing: .18em; opacity: .55; }
.row-name { font: 500 clamp(22px,3vw,40px)/1.1 var(--serif); }
.row-side { font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .6; text-align: right; }
/* the drawer: shut at nothing, open to its own height */
.row-open { position: relative; z-index: 3; height: 0; overflow: hidden; transition: height .62s cubic-bezier(.22,.7,.2,1); }
.row-inner { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 0 4px clamp(22px,3vh,34px); }
.row-copy { max-width: 560px; }
.row-copy p.q { margin: 0 0 12px; font: 500 clamp(18px,2vw,27px)/1.3 var(--serif); }
.row-copy p.t { margin: 0 0 16px; font-size: 15px; line-height: 1.65; opacity: .82; }
.row-copy a { text-decoration: none; font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
/* the photo that slides in behind the row */
.row-photo { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1.1s cubic-bezier(.22,.7,.2,1); }
.row-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.row-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(233,216,166,.96) 32%, rgba(233,216,166,.55) 62%, rgba(233,216,166,.1)); }
.row.is-open .row-photo { opacity: 1; transform: none; }
.row.is-open .row-name { color: #AE2012; }
.row .row-mark { position: absolute; right: clamp(10px,3vw,60px); top: 50%; transform: translateY(-50%); z-index: 2; font: 400 clamp(90px,13vw,190px)/1 var(--display); color: rgba(0,48,73,.08); pointer-events: none; transition: color .5s; }
.row.is-open .row-mark { color: rgba(174,32,18,.16); }
@media (max-width: 760px) {
  .row-bar { grid-template-columns: 34px 1fr; gap: 12px; }
  .row-side { display: none; }
  .row-inner { grid-template-columns: 34px 1fr; gap: 12px; }
  .row-photo::after { background: linear-gradient(180deg, rgba(233,216,166,.9) 40%, rgba(233,216,166,.65)); }
}
@media (prefers-reduced-motion: reduce) { .row-open, .row-photo { transition: none; } }

/* Once she has set a size of her own on the Drop scene's words, the line is
   allowed to wrap and is kept inside the screen. The words are set in one
   unbroken line at the size they were designed at; at a size she chooses they
   would otherwise run off both edges and read as broken (her word, 9 Oct 2026:
   "ayaw matweak ng maayos"). */
.drop-word[data-tw-set] { white-space: normal; max-width: calc(100vw - var(--edge, 35px) * 2); }