/* Create: three screens and one to share, ported from the create-2 lab (01 B their name in sugar, 02 A the
   portrait, 03 B what your family will see). Every class starts with cf-. Each screen runs edge to edge out of
   the page column and up behind the floating header pill, so its painting starts at the top of the window. */

:root:has(.cf-flow) { overflow-x: clip; }
.cf-flow {
  --cf-head: 4rem; /* the header: .75rem above a 3.25rem pill (3.5rem from 80rem) */
  --cf-ease: cubic-bezier(.2, .75, .25, 1);
  --cf-land: cubic-bezier(.3, 1.2, .5, 1);
}
@media (min-width: 80.0625rem) { .cf-flow { --cf-head: 4.25rem; } }
/* the footer's garland hangs straight under the last screen */
body:has(.cf-flow) .site-footer { margin-top: 0; }

/* resets at class strength, so any cf- class later in this file still sets its own margins */
.cf-flow :where(p) { margin: 0; }
.cf-flow :where(label) { margin-top: 0; }
.cf-flow :where(img) { max-width: 100%; }
.cf-screen {
  position: relative; isolation: isolate; overflow: hidden; margin-inline: calc(50% - 50vw); margin-top: calc(-1 * var(--cf-head));
  padding: 0; min-height: 100svh;
}
.cf-frame { position: relative; z-index: 1; max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .cf-frame { padding: 0 1.5rem; } }

.cf-eyebrow { font-size: .8125rem; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--marigold); }
.cf-title { margin: .35rem 0 0; font: italic 400 clamp(2rem, 3.4vw + 1rem, 3.3rem)/1.04 var(--display); text-wrap: balance; }
.cf-title:focus, .cf-q:focus { outline: none; }
.cf-title:focus-visible, .cf-q:focus-visible { outline: 3px solid var(--marigold); outline-offset: 4px; border-radius: .25rem; }
.cf-head { text-align: center; }

/* fields: dark wells with a cream edge; the marigold ring shows where you are */
.cf-well { width: 100%; min-height: 48px; }
.cf-lbl { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .95rem; color: var(--cream-dim); }
.cf-text-btn {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 0; padding: 0 .5rem; border: 0; border-radius: .5rem; background: none; box-shadow: none;
  color: var(--cream-dim); font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(245 237 224 / .35); cursor: pointer;
}
.cf-text-btn:hover { background: none; color: var(--cream); text-decoration-color: var(--marigold); }
.cf-text-btn:active { transform: none; }
.cf-text-btn:disabled { opacity: .5; }
.cf-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* the hero's uneven bank of painted marigolds along the foot of a box */
.cf-bank { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 0; pointer-events: none; overflow: visible; }
.cf-bank img { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 .4rem .6rem rgb(10 4 8 / .55)); }

/* ===== 01 B: their name in sugar ===== */
.cf-steps {
  display: flex; flex-direction: column; padding-bottom: clamp(5.5rem, 9vw, 9rem);
  background: radial-gradient(110% 60% at 50% 8%, #2a1520, var(--ground) 70%);
}
/* the top band of the hero's own painting, cut so the flags hang across the width and fade into the night */
.cf-picado {
  --h: max(6.5rem, 10.3vw); position: absolute; left: 0; right: 0; top: 0; height: var(--h); z-index: -1; pointer-events: none;
  background: url('/hero/calaveras-wide-1920.webp') center top / calc(var(--h) * 9.68) auto no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
@media (min-width: 120rem) { .cf-picado { background-image: url('/hero/calaveras-wide-2560.webp'); } }
@media (max-width: 39.99rem) { .cf-picado { background-position: 22% top; } }

.cf-deck {
  position: relative; z-index: 1; flex: 1; display: grid; gap: clamp(.75rem, 2.5svh, 2rem); align-content: center; align-items: center;
  width: 100%; max-width: 64rem; margin: 0 auto; padding: calc(max(6.5rem, 10.3vw) + clamp(.5rem, 2svh, 1.5rem)) 1rem 0;
}
@media (min-width: 40rem) { .cf-deck { padding-inline: 1.5rem; } }
@media (min-width: 52rem) { .cf-deck { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; } }

/* the sugar skull: the How it works painting, their name piped on its band as it is typed */
.cf-mate { display: grid; place-items: center; height: clamp(9.5rem, 25svh, 14rem); }
/* the skull's file is 462px tall: shown at most 24rem (384px) it stays sharp, where at 30rem it was stretched past its pixels (preview note 11) */
@media (min-width: 52rem) { .cf-mate { height: clamp(18rem, 50svh, 24rem); } }
.cf-skull { position: relative; height: 100%; aspect-ratio: 349 / 462; container-type: inline-size; filter: drop-shadow(0 1.5rem 2rem rgb(0 0 0 / .5)); }
.cf-skull img { display: block; width: 100%; height: 100%; }
.cf-skull-name {
  position: absolute; left: 13%; right: 13%; top: 19.6%; height: 16%; display: grid; place-items: center; justify-items: unsafe center; overflow: hidden;
  font: italic 400 15cqw/1 var(--display); color: #7a1d43; white-space: nowrap;
}
.cf-skull-name span { display: inline-block; width: max-content; transform-origin: 50% 60%; }
.cf-skull-name span.cf-ink { animation: cf-ink .5s var(--cf-ease); }
@keyframes cf-ink { from { opacity: .2; filter: blur(1px); } }

.cf-cards { display: grid; }
.cf-card { grid-area: 1 / 1; display: grid; align-content: center; gap: .8rem; transition: opacity .38s var(--cf-ease), translate .5s var(--cf-ease); }
.cf-card[hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; }
.cf-card.cf-out-l { translate: -2.5rem 0; }
.cf-card.cf-out-r { translate: 2.5rem 0; }
@media (max-width: 51.99rem) { .cf-card { text-align: center; } .cf-cards { width: min(100%, 30rem); justify-self: center; } }
.cf-count { font-size: .8125rem; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--marigold); }
.cf-q { margin: 0; font: italic 400 clamp(2rem, 3.4vw + 1rem, 3.4rem)/1.04 var(--display); text-wrap: balance; }
.cf-big { min-height: 56px; font: italic 400 1.6rem/1.2 var(--display); color: var(--marigold); text-align: inherit; }
.cf-years { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; text-align: left; }
.cf-loved { min-height: 4.5rem; resize: vertical; font-size: 1.05rem; line-height: 1.45; text-align: left; }
.cf-nav { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .2rem; }
@media (max-width: 51.99rem) { .cf-nav { justify-content: center; } }
.cf-nav .btn-primary { min-width: 9rem; }

/* ===== 02 A: the portrait ===== */
.cf-photo {
  padding: calc(var(--cf-head) + clamp(1.75rem, 5vw, 3.5rem)) 0 clamp(2.5rem, 6vw, 4.5rem);
  background: radial-gradient(90% 60% at 50% 30%, #2a1520, var(--ground) 75%);
}
.cf-photo .cf-head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.cf-photo-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
/* the controls column is wide enough for the security check to sit beside its flower, so Build stays in view */
@media (min-width: 56rem) { .cf-photo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); } }
.cf-stage { display: grid; justify-items: center; gap: .9rem; }
.cf-niche {
  position: relative; isolation: isolate; width: min(100%, 27rem); aspect-ratio: 4 / 4.6; border-radius: 999px 999px 1.75rem 1.75rem; overflow: hidden;
  background: radial-gradient(70% 50% at 50% 40%, #3a1d2a, rgb(42 21 32 / 0) 70%), linear-gradient(#2a1520, #170b12);
  box-shadow: inset 0 0 0 1px rgb(245 237 224 / .1), inset 0 -3rem 4rem rgb(0 0 0 / .35), 0 2rem 4rem rgb(0 0 0 / .4);
}
/* an arco of painted marigolds heaped along the curve of the niche, uneven in size and turn, as on a real altar */
.cf-arco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cf-arco img { position: absolute; max-width: none; height: auto; translate: -50% -50%; filter: drop-shadow(0 .35rem .5rem rgb(10 4 8 / .55)); }

/* their frame: tap it to choose the photo */
.cf-tin {
  position: absolute; z-index: 3; left: 50%; top: 17%; width: 47%; min-height: 0; aspect-ratio: 331 / 428; translate: -50% 0; padding: 0;
  border: 0; border-radius: 1rem; background: none; box-shadow: none; cursor: pointer;
}
.cf-tin:hover, .cf-tin:disabled:hover { background: none; }
.cf-tin:active { transform: none; }
.cf-tin:disabled { opacity: 1; cursor: progress; }
.cf-tin .cf-frame-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; filter: drop-shadow(0 .7rem 1rem rgb(0 0 0 / .55)); }
.cf-window {
  position: absolute; left: 25.4%; top: 24.1%; width: 48.9%; height: 52.3%; z-index: 3; overflow: hidden; background: #120a0e;
  box-shadow: inset 0 0 .8rem rgb(0 0 0 / .8); display: grid; place-items: center;
}
.cf-tap { padding: .3rem; font-size: clamp(.8rem, 2.2vw, .9rem); font-weight: 600; line-height: 1.25; color: rgb(245 237 224 / .78); text-align: center; }
.cf-tap::before {
  content: '+'; display: block; margin: 0 auto .25rem; width: 1.8em; height: 1.8em; border-radius: 50%; border: 1.5px dashed rgb(242 193 78 / .7);
  color: var(--marigold); font-size: 1.1em; line-height: 1.6em;
}
.cf-tin:hover .cf-tap { color: var(--cream); }
/* the frame's window is only about 140px wide on a 320px phone; the hint and its plus must fit inside it */
@media (max-width: 22rem) {
  .cf-tap { padding: .2rem; font-size: .75rem; }
  .cf-tap::before { width: 1.4em; height: 1.4em; line-height: 1.2em; margin-bottom: .15rem; }
}
.cf-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: cf-dev 2.6s var(--cf-ease) both; }
.cf-has .cf-tap { visibility: hidden; }
@keyframes cf-dev { 0% { opacity: 0; filter: brightness(.2) sepia(.9) blur(3px); scale: 1.08; } 25% { opacity: 1; } 100% { opacity: 1; filter: none; scale: 1; } }

/* the candles either side: always lit, they swell once when the photo comes */
.cf-cand { position: absolute; z-index: 2; bottom: 17%; height: 40%; aspect-ratio: 203 / 453; display: grid; }
.cf-cand.cf-l { left: 5%; }
.cf-cand.cf-r { right: 5%; }
.cf-cand.cf-l2 { left: 20%; bottom: 13%; height: 30%; }
.cf-cand.cf-r2 { right: 20%; bottom: 13%; height: 30%; }
.cf-cand > img, .cf-cand > .cf-fw { grid-area: 1 / 1; width: 100%; height: 100%; }
.cf-cand .cf-fw { transform-origin: 50% 29%; transition: scale 1.4s var(--cf-land); }
.cf-cand .cf-fw img { display: block; width: 100%; height: 100%; transform-origin: 50% 29%; }
.cf-pool {
  position: absolute; left: 50%; top: 22%; width: 300%; aspect-ratio: 1; translate: -50% -50%; opacity: .85; pointer-events: none;
  transition: scale 1.6s var(--cf-ease), opacity 1.6s;
}
.cf-pool > span {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 186 96 / .34), rgb(255 150 60 / .15) 42%, rgb(255 130 40 / .05) 72%, rgb(255 120 40 / 0));
}
.cf-swell .cf-cand .cf-fw { scale: 1.2 1.35; }
.cf-swell .cf-cand .cf-pool { scale: 1.3; opacity: 1; }

.cf-ledge { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 4; pointer-events: none; }
.cf-ledge .cf-bank { z-index: 4; }
.cf-gifts { position: absolute; z-index: 3; left: 0; right: 0; bottom: 11%; display: flex; justify-content: center; align-items: flex-end; gap: 4%; pointer-events: none; }
.cf-gifts img { width: 13%; filter: drop-shadow(0 .4rem .4rem rgb(0 0 0 / .55)); }

.cf-who { text-align: center; max-width: 100%; }
.cf-who-name { font: italic 400 clamp(1.7rem, 2vw + 1rem, 2.3rem)/1.1 var(--display); overflow-wrap: anywhere; }
.cf-who-years { margin-top: .15rem; font: italic 400 1.3rem/1.2 var(--display); color: var(--marigold); }
.cf-icing { display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem; color: var(--cream-dim); font-size: .95rem; overflow-wrap: anywhere; }
.cf-icing img { width: 1.6rem; height: auto; flex: none; }

.cf-controls { display: grid; gap: 1rem; width: 100%; max-width: 32rem; margin: 0 auto; }
@media (min-width: 56rem) { .cf-controls { margin: 0; } }
.cf-pf { display: grid; gap: .55rem; }
.cf-pf-label { font-weight: 600; color: var(--cream); }
.cf-file { font: italic 400 1.15rem/1.3 var(--display); color: var(--marigold); overflow-wrap: anywhere; }
.cf-act { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.cf-act .btn-primary { min-width: 13rem; }

/* ===== 03: ready to share =====
   Two halves, "ready" and "want to make edits", with three actions in view at once: view the altar, share it,
   and the private edit link. The grid is subgridded so the heads line up and the action cards start on one line. */
.cf-ready {
  padding: calc(var(--cf-head) + clamp(.75rem, 2.5vw, 1.75rem)) 0 clamp(2rem, 5vw, 4rem);
  background: radial-gradient(80% 50% at 50% 30%, #2f1726, var(--ground) 72%);
}
.cf-ready-grid { display: grid; gap: .25rem 0; max-width: 34rem; margin-inline: auto; }
.cf-half { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 1rem; }
.cf-half-head { align-self: start; text-align: center; }
.cf-ready .cf-title { margin: .25rem 0 0; font-size: clamp(1.9rem, 1.4vw + 1.35rem, 2.9rem); line-height: 1.05; text-wrap: balance; }
.cf-lede { margin: .5rem auto 0; max-width: 38rem; color: var(--cream-dim); font-size: 1rem; }
.cf-acts { display: grid; gap: .75rem; align-content: start; }
.cf-half-edit { margin-top: .75rem; }
@media (min-width: 52rem) {
  .cf-ready-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem clamp(2rem, 4vw, 3.5rem); max-width: none; }
  .cf-half { gap: 1.25rem; }
  .cf-half-edit { margin-top: 0; position: relative; }
  /* a thin line down the middle between the two halves */
  .cf-half-edit::before { content: ''; position: absolute; left: calc(clamp(2rem, 4vw, 3.5rem) / -2); top: 0; bottom: 0; width: 1px; background: rgb(245 237 224 / .12); }
  .cf-half-head { text-align: left; }
  .cf-lede { margin-left: 0; }
  .cf-acts { grid-template-columns: 1fr 1fr; }
  .cf-half-edit .cf-acts { grid-template-columns: 1fr; }
  /* the view card sizes to its content beside the taller share card instead of stretching to its height */
  .cf-half:not(.cf-half-edit) .cf-acts { align-items: start; }
}

/* the three actions share one dark card shape; the ticket for the edit link is paper */
.cf-do { display: grid; gap: .6rem; align-content: start; padding: .9rem; border-radius: 1rem; border: 1px solid rgb(245 237 224 / .16); background: rgb(245 237 224 / .05); }
.cf-do h2 { margin: 0; font: italic 400 1.45rem/1.15 var(--display); color: var(--cream); }
.cf-do-view {
  align-content: center; justify-items: start; gap: .2rem; text-decoration: none; color: var(--ground);
  background: var(--marigold); border-color: var(--marigold); transition: background .15s, border-color .15s, translate .15s;
}
.cf-do-view b { font: italic 400 1.6rem/1.1 var(--display); }
.cf-do-view span { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.cf-do-view::after { content: '\2192'; font-size: 1.4rem; font-weight: 700; line-height: 1; margin-top: .25rem; }
.cf-do-view:hover { background: #ffd36b; border-color: #ffd36b; color: var(--ground); }
.cf-do-view:active { translate: 0 1px; }
.cf-do-view:focus-visible { outline-color: var(--cream); }
.cf-share-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.cf-share-btns .btn { width: 100%; padding-inline: .75rem; }
.cf-mono { font: 500 .85rem/1.3 ui-monospace, Consolas, monospace; }
.cf-s-status { min-height: 1.2em; color: #9fe0b2; font-weight: 600; font-size: .92rem; text-align: center; }
.cf-code { color: var(--cream-dim); font-size: .9rem; text-align: center; }
.cf-code b { color: var(--marigold); letter-spacing: .12em; font-family: ui-monospace, Consolas, monospace; }

/* the ticket: the private edit link, on paper */
.cf-ticket {
  display: grid; gap: .6rem; align-content: start; padding: 1rem 1rem .9rem; border-radius: 1rem; color: #2a1a20;
  background: linear-gradient(#f7efe3, #efe3d1); border: 2px dashed rgb(90 22 49 / .35); box-shadow: 0 1rem 1.6rem rgb(0 0 0 / .35);
}
.cf-ticket h3 { margin: 0; font: italic 400 1.45rem/1.15 var(--display); color: #5a1631; }
.cf-ticket p { font-size: .92rem; line-height: 1.45; }
.cf-ticket-lbl { display: block; font-weight: 700; font-size: .9rem; }
.cf-flow .cf-link {
  width: 100%; min-height: 48px; margin-top: .3rem; padding: .6rem .8rem; border-radius: .75rem; border: 1.5px solid rgb(42 26 32 / .28);
  background: #fffaf2; color: #2a1a20; font: 500 .85rem/1.3 ui-monospace, Consolas, monospace;
}
.cf-flow .cf-link:focus { outline: none; border-color: #b4235a; box-shadow: 0 0 0 3px rgb(180 35 90 / .25); }
.cf-flow .cf-paper-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.15rem; border-radius: 999px; border: 1.5px solid #2a1a20;
  background: transparent; color: #2a1a20; box-shadow: none; font-weight: 600; font-size: .95rem; line-height: 1.2; cursor: pointer;
}
.cf-flow .cf-paper-btn:hover { background: rgb(42 26 32 / .07); border-color: #2a1a20; color: #2a1a20; }
.cf-flow .cf-paper-btn.cf-dark { background: #5a1631; border-color: #5a1631; color: #f7efe3; }
.cf-flow .cf-paper-btn.cf-dark:hover { background: #7a1d43; border-color: #7a1d43; color: #f7efe3; }
.cf-flow .cf-paper-btn:focus-visible { outline-color: #b4235a; }
.cf-e-status { min-height: 1.2em; font-size: .9rem; font-weight: 600; color: #1d6b3a; }
.cf-notice { margin: 0; }

/* Phones: the halves stack, and everything is tightened so view, share and the private link all sit on the first
   screen (390 by 780) with no scrolling. The lede and the small caps lines give way before any action does. */
@media (max-width: 51.99rem) {
  .cf-ready { padding-top: calc(var(--cf-head) + .75rem); padding-bottom: 1.25rem; }
  .cf-ready-grid { gap: 0; }
  .cf-half { gap: .6rem; }
  .cf-half-head .cf-eyebrow, .cf-lede { display: none; }
  .cf-ready .cf-title { margin: 0; font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
  .cf-half-edit { margin-top: .9rem; }
  .cf-half-edit .cf-title { font-size: 1.3rem; }
  .cf-acts { gap: .55rem; }
  .cf-do { padding: .7rem .85rem; gap: .45rem; }
  .cf-do h2, .cf-ticket h3 { font-size: 1.2rem; }
  .cf-do-view { grid-template-columns: 1fr auto; align-items: center; column-gap: .75rem; padding-block: .6rem; }
  .cf-do-view b { grid-column: 1; font-size: 1.35rem; }
  .cf-do-view span { grid-column: 1; font-size: .88rem; }
  .cf-do-view::after { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1.6rem; }
  .cf-share-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .cf-share-btns .btn { min-height: 44px; padding: .4rem .5rem; font-size: .92rem; }
  .cf-share-btns .btn:only-child, .cf-share-btns .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cf-do-share input.cf-well { min-height: 40px; padding-block: .3rem; }
  .cf-s-status:empty { display: none; }
  .cf-code { font-size: .85rem; line-height: 1.3; }
  .cf-ticket { padding: .7rem .85rem .65rem; gap: .45rem; }
  .cf-ticket p { font-size: .85rem; line-height: 1.35; }
  .cf-ticket-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cf-flow .cf-link { min-height: 40px; margin-top: 0; padding-block: .35rem; }
  .cf-flow .cf-paper-btn { min-height: 44px; }
  .cf-e-status:empty { display: none; }
}

/* Wider screens: the view card fills its column, the name at the top and the arrow at the foot. */
@media (min-width: 52rem) {
  .cf-do-view { grid-template-rows: auto 1fr auto; align-content: stretch; padding: 1.25rem; }
  .cf-do-view b { font-size: 2rem; }
  .cf-do-view span { align-self: start; }
  .cf-do-view::after { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-flow *, .cf-flow *::before, .cf-flow *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .cf-portrait { animation: none; }
}
/* The find page: open an altar (the calaverita lights up), the altars this device has visited (sugar skulls with
   their names) and, before there are any, where a code comes from (the family's message). Ported from the round 2
   lab (lab/sections/find-2), in the site's tokens and frame. */

/* ---------- painted candles: a body, the light it throws, its flame on its own layer ---------- */
.fd-candle { position: absolute; display: block; aspect-ratio: 101 / 226; }
.fd-candle > img, .fd-flame-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fd-flame { transform-origin: 50% 27%; }
.fd-light {
  position: absolute; left: 50%; top: 13%; width: 300%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 186 96 / .34), rgb(255 150 60 / .15) 42%, rgb(255 130 40 / .05) 72%, rgb(255 120 40 / 0));
}
.fd-flame-wrap, .fd-light-wrap { position: absolute; inset: 0; transform-origin: 50% 27%; }
.fd-flame-wrap { transition: opacity .5s ease, transform 1.1s cubic-bezier(.2, .75, .25, 1); }
.fd-light-wrap { transition: opacity 1.2s ease; }
.fd-candle.is-unlit .fd-flame-wrap { opacity: 0; transform: scale(.15); }
.fd-candle.is-unlit .fd-light-wrap { opacity: 0; }

/* the name iced on the cream band across a painted forehead (19 to 30 percent of its height, 17 to 83 of its width) */
.fd-brow {
  position: absolute; left: 17%; width: 66%; top: 18.9%; height: 11.6%; display: grid; place-content: center; overflow: hidden;
  font: italic 400 1rem/1.02 var(--display); color: #8e1f4c; white-space: nowrap; text-align: center;
}
.fd-brow span { display: block; }

/* ---------- 01 open an altar ---------- */
.fd-open { position: relative; overflow: clip; padding: clamp(1.75rem, 5vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.fd-grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: center; }
.fd-head { text-align: center; }
.fd-head h1 { margin: 0 0 .75rem; font-size: clamp(2.5rem, 7vw, 4.25rem); }
.fd-lede { margin: 0 auto; max-width: 34rem; text-wrap: pretty; }
.fd-form { display: grid; gap: 1.1rem; max-width: 34rem; width: 100%; margin: 0 auto; }
.fd-field { display: grid; gap: .35rem; }
.fd-field label { margin: 0; }
.fd-field .field-hint { margin: .2rem 0 0; color: var(--cream-dim); font-size: .95rem; }
.fd-field .field-error { margin: 0; color: var(--danger); font-weight: 600; }
#find-input { min-height: 3.5rem; font-size: 1.2rem; letter-spacing: .04em; }
#find-input.is-guide { border-color: var(--marigold); box-shadow: 0 0 0 3px rgb(242 193 78 / .3); }
#find-input.is-guide::placeholder { color: rgb(245 237 224 / .62); letter-spacing: .18em; font-weight: 700; }
.fd-submit { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
.fd-nf-help { margin: 0; color: var(--cream-dim); }
.fd-nf-help .text-link { min-height: 44px; }
.fd-found:empty { display: none; }
.fd-found-line { margin: 0; font-size: 1.15rem; color: var(--cream); animation: fd-rise .6s cubic-bezier(.2, .75, .25, 1) both; }
.fd-found-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; animation: fd-rise .6s cubic-bezier(.2, .75, .25, 1) .08s both; }
.fd-found-acts .btn { flex: 1 1 13rem; min-height: 3.25rem; font-size: 1.05rem; }
button.fd-again {
  background: none; border: 0; border-radius: .25rem; padding: 0; min-width: 44px; font: inherit; font-weight: 600; color: var(--marigold);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; box-shadow: none;
}
button.fd-again:hover { background: none; color: #ffd77a; border: 0; }
@keyframes fd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* a painted calaverita waits in the low light between two unlit candles, marigolds banked at her feet; the right code
   lights the candles, she warms to full colour and her name is iced across her forehead */
.fd-altar { position: relative; width: clamp(12.5rem, 52vw, 21rem); margin: 0 auto; padding-bottom: 10%; }
.fd-calav {
  position: relative; z-index: 1; width: 76%; margin: 0 auto; transform-origin: 50% 100%;
  filter: brightness(.74) saturate(.82) drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / .55));
  transition: filter 1.8s ease .2s, transform 1.4s cubic-bezier(.2, .75, .25, 1) .2s;
}
.fd-calav > img { display: block; width: 100%; height: auto; }
.fd-altar.is-found .fd-calav { filter: brightness(1) saturate(1) drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / .55)); transform: translateY(-4px); }
.fd-calav .fd-brow { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.5, 0, .3, 1) 1s; }
.fd-altar:not(.is-found) .fd-calav .fd-brow { transition-delay: 0s; transition-duration: .5s; }
.fd-altar.is-found .fd-calav .fd-brow { clip-path: inset(0 0 0 0); }
/* the candles stand in front of her lower cheeks */
.fd-altar .fd-candle { z-index: 2; bottom: 13%; width: 23%; }
.fd-altar .c1 { left: -4%; }
.fd-altar .c2 { right: -3%; width: 19.5%; bottom: 11%; }
.fd-altar.is-found .c2 .fd-flame-wrap, .fd-altar.is-found .c2 .fd-light-wrap { transition-delay: .35s; }
.fd-bank { position: absolute; z-index: 3; left: -10%; right: -10%; bottom: -2%; height: 30%; pointer-events: none; }
.fd-bank img { position: absolute; max-width: none; height: auto; filter: drop-shadow(0 .4rem .6rem rgb(0 0 0 / .5)); }
.fd-bank .m1 { width: 29%; left: 4%; bottom: 0; rotate: -14deg; }
.fd-bank .m2 { width: 19%; left: 26%; bottom: 6%; rotate: 22deg; }
.fd-bank .m3 { width: 23%; left: 41%; bottom: -10%; rotate: 4deg; }
.fd-bank .m4 { width: 17%; left: 60%; bottom: 3%; rotate: -30deg; }
.fd-bank .m5 { width: 26%; right: 3%; bottom: -4%; rotate: 12deg; }
.fd-bank .fd-petal { width: 5%; }
.fd-bank .p1 { left: 22%; bottom: 46%; rotate: 30deg; }
.fd-bank .p2 { left: 75%; bottom: 52%; rotate: -60deg; }
.fd-bank .p3 { left: 52%; bottom: 60%; rotate: 100deg; width: 4%; }

@media (min-width: 52rem) {
  .fd-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(3rem, 6vw, 6rem); }
  .fd-head, .fd-form { text-align: left; margin: 0; }
  .fd-lede { margin: 0; }
  .fd-copy { display: grid; gap: 2.25rem; }
  .fd-altar { width: clamp(17rem, 28vw, 22rem); margin-right: 3rem; }
}
@media (max-width: 51.99rem) {
  .fd-copy { display: contents; }
  .fd-head { order: 1; }
  .fd-altar-slot { order: 2; }
  .fd-form { order: 3; }
}

/* ---------- 02 altars visited on this device: sugar skulls with their names ---------- */
.fd-visited { position: relative; overflow: clip; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 8vw, 6rem); text-align: center; }
.fd-visited h2 { margin: 0 auto .6rem; max-width: 22ch; font-size: clamp(1.9rem, 4.6vw, 2.75rem); text-wrap: balance; }
.fd-sub { margin: 0 auto clamp(2rem, 5vw, 3.25rem); max-width: 30rem; color: var(--cream-dim); text-wrap: pretty; }

/* each tier is one painted altar step as wide as the frame; the skulls stand on its top edge.
   --sw (skull width) and --colw are measured by the script so every name fits */
.fd-shelves { display: grid; gap: 1.25rem; }
.fd-shelves.is-measuring { visibility: hidden; }
.fd-shelf { position: relative; container-type: inline-size; --sh: calc(var(--sw) * 1.3238); --ch: 17.03cqi; }
.fd-cloth { position: absolute; z-index: 0; left: 0; width: 100%; height: auto; max-width: none; top: calc(var(--sh) - var(--ch) * .15); pointer-events: none; }
.fd-row {
  position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(var(--k), var(--colw)); justify-content: center; column-gap: .5rem;
}
.fd-row li { min-width: 0; }
.fd-skull-link {
  display: grid; justify-items: center; color: var(--cream); text-decoration: none; -webkit-tap-highlight-color: transparent;
  border-radius: 1rem; padding: .25rem 0;
}
.fd-skull-link:hover { color: var(--cream); }
.fd-skull-link:focus-visible { outline-offset: 6px; }

/* the skull, standing on the step, a couple of marigolds at its foot */
.fd-stand { position: relative; display: block; width: var(--sw); height: var(--sh); }
.fd-stand::after {
  content: ''; position: absolute; z-index: 0; left: 12%; right: 12%; bottom: -3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 25 10 / .5), rgb(60 25 10 / 0));
}
.fd-skull {
  position: absolute; z-index: 1; left: 0; bottom: 0; display: block; width: 100%;
  transform-origin: 50% 100%; filter: drop-shadow(0 .5rem .6rem rgb(0 0 0 / .4));
}
.fd-skull img { display: block; width: 100%; height: auto; }
.fd-bed { position: absolute; z-index: 2; left: -16%; right: -16%; bottom: -7%; height: 34%; pointer-events: none; }
.fd-bed img { position: absolute; bottom: 0; max-width: none; height: auto; filter: drop-shadow(0 .3rem .4rem rgb(0 0 0 / .45)); }
.fd-bed .m1 { width: 34%; left: 0; rotate: -16deg; }
.fd-bed .m2 { width: 26%; right: 2%; bottom: -4%; rotate: 18deg; }
.fd-bed .pt { width: 8%; left: 64%; bottom: 8%; rotate: 60deg; }
.fd-row li:nth-child(2n) .fd-bed .m1 { width: 26%; left: 4%; bottom: -4%; }
.fd-row li:nth-child(2n) .fd-bed .m2 { width: 34%; right: 0; bottom: 0; rotate: -10deg; }

/* under the step: when it was last opened, and the way in. The name is on the skull, so it is not said twice */
.fd-label { display: grid; gap: .1rem; margin-top: calc(var(--ch) * .85 + .7rem); padding: 0 .25rem; }
.fd-when { font-size: clamp(.85rem, 2.4vw, .95rem); color: var(--cream-dim); }
.fd-wd { white-space: nowrap; }
.fd-go {
  font-size: .95rem; font-weight: 600; color: var(--marigold); min-height: 1.4em; opacity: 0; transform: translateY(-3px);
  transition: opacity .25s ease, transform .3s ease;
}

/* the narrowest phones: one skull a tier, its date beside it, so the skull stays big enough for a long name */
.fd-shelf.is-side .fd-row { grid-template-columns: minmax(0, 1fr); }
.fd-shelf.is-side .fd-skull-link { grid-template-columns: var(--sw) minmax(0, 1fr); align-items: end; justify-items: start; column-gap: .9rem; text-align: left; }
.fd-shelf.is-side .fd-label { margin: 0 0 calc(var(--ch) * .15 + .6rem); padding: 0; }
.fd-shelf.is-side .fd-row li { padding-bottom: calc(var(--ch) * .85); }

/* turned to: the skull tips its head toward you; the way in shows under the date */
.fd-skull { transition: transform .6s cubic-bezier(.2, .75, .25, 1); }
.fd-skull-link:hover .fd-skull, .fd-skull-link:focus-visible .fd-skull, .fd-skull-link.is-on .fd-skull { transform: translateY(-6px) rotate(-5deg); }
.fd-skull-link:hover .fd-go, .fd-skull-link:focus-visible .fd-go, .fd-skull-link.is-on .fd-go { opacity: 1; transform: none; }
@media (hover: none) { .fd-go { opacity: .9; transform: none; } }

/* set down one by one when the tiers come into view */
.fd-shelves:not(.is-in) .fd-skull { opacity: 0; transform: translateY(-22px) rotate(var(--r0, -8deg)); }
.fd-shelves:not(.is-in) .fd-label { opacity: 0; }
.fd-shelves .fd-skull { transition: transform .75s cubic-bezier(.2, .75, .25, 1), opacity .4s ease; transition-delay: calc(var(--i) * 140ms); }
.fd-shelves .fd-label { transition: opacity .6s ease; transition-delay: calc(var(--i) * 140ms + 300ms); }
.fd-shelves.is-in.is-settled .fd-skull, .fd-shelves.is-in.is-settled .fd-label { transition-delay: 0s; }

/* ---------- 03 no altars opened yet: where your code is ---------- */
.fd-empty {
  position: relative; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); grid-template-areas: 'copy' 'msg' 'acts'; justify-items: center; text-align: center;
}
@media (min-width: 52rem) {
  .fd-empty {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'copy msg' 'acts msg'; grid-template-rows: auto 1fr;
    justify-items: start; text-align: left; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
  }
  .fd-msg-wrap { align-self: center; justify-self: center; }
}
.fd-copy3 { grid-area: copy; max-width: 30rem; }
.fd-copy3 h2 { margin: 0 0 .75rem; font-size: clamp(1.9rem, 4.6vw, 2.75rem); text-wrap: balance; }
.fd-copy3 p { margin: 0 0 .6rem; color: var(--cream-dim); text-wrap: pretty; }
.fd-copy3 .fd-how { color: var(--cream); margin-top: 1rem; }
.fd-acts { grid-area: acts; }
.fd-acts .btn-primary { min-width: 13rem; min-height: 3.25rem; }

/* the message, as it lands on the phone: one bubble in the site's own colours, no app chrome */
.fd-msg-wrap { grid-area: msg; width: min(100%, 23rem); }
.fd-msg-from { margin: 0 0 .5rem .9rem; color: var(--cream-faint); font-size: .85rem; text-align: left; }
.fd-bubble {
  position: relative; padding: .45rem .45rem .8rem; border-radius: 1.25rem 1.25rem 1.25rem .35rem; background: var(--raised);
  border: 1px solid var(--line); box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / .35); text-align: left;
}
.fd-preview { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .5rem; border-radius: .9rem; background: rgb(10 4 8 / .45); }
.fd-preview img { width: 4.5rem; height: 4.5rem; border-radius: .6rem; object-fit: cover; }
.fd-preview b { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--cream); }
.fd-preview span { display: block; margin-top: .2rem; color: var(--cream-faint); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-bubble p { margin: .7rem .55rem 0; line-height: 1.5; }
.fd-lnk { color: #8fd3dc; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.fd-bubble time { display: block; margin: .35rem .55rem 0 auto; width: max-content; color: var(--cream-faint); font-size: .75rem; }
.fd-bubble p.fd-codep { line-height: 2.9rem; margin-top: .35rem; }
.fd-nw { white-space: nowrap; }
.fd-tap-hint { display: block; margin: .9rem .55rem 0; color: var(--marigold); font-size: .9rem; font-weight: 600; }
.fd-bubble .fd-status { margin: .9rem .55rem 0; color: var(--cream); font-size: .95rem; min-height: 0; }
.fd-bubble .fd-status:empty { margin: 0; }

/* the code: a marigold chip in the message; it catches the light once when it comes into view */
.fd-chip, button.fd-chip {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 .1rem; vertical-align: middle; padding: 0 .7rem;
  border-radius: .6rem; border: 1px solid var(--marigold); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 1.1rem; line-height: 1; letter-spacing: .14em; color: #2a1408;
  background: var(--marigold) linear-gradient(105deg, transparent 35%, rgb(255 246 214 / .85) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 160% 0;
  box-shadow: 0 .35rem 1rem rgb(242 193 78 / .3); transition: transform .3s cubic-bezier(.2, .75, .25, 1), box-shadow .3s ease;
}
button.fd-chip:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgb(242 193 78 / .42); background-color: var(--marigold); border-color: var(--marigold); color: #2a1408; }
.fd-chip.is-shine { animation: fd-shine 1.3s ease .2s 1 both; }
@keyframes fd-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
button.fd-chip.is-sent, button.fd-chip.is-sent:hover { background-color: rgb(242 193 78 / .25); color: var(--marigold); box-shadow: none; }
.fd-flyer { position: fixed; z-index: 50; margin: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fd-calav, .fd-calav .fd-brow, .fd-flame-wrap, .fd-light-wrap, .fd-skull, .fd-label, .fd-go { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .fd-found-line, .fd-found-acts, .fd-chip.is-shine { animation: none; }
  .fd-shelves:not(.is-in) .fd-skull, .fd-shelves:not(.is-in) .fd-label { opacity: 1; transform: none; }
}
.tr-page .tr-que { position: relative; padding: clamp(.5rem, 2vw, 1.5rem) 0 clamp(4rem, 9vw, 7rem); }
  .tr-arch-wrap { overflow-x: clip; }

  /* the arch: full width, flowers on half ellipses whose centre is the middle of the floor */
  .tr-arch { position: relative; width: 100%; max-width: 110rem; margin: 0 auto; aspect-ratio: 1 / 1.36; }
  .tr-arch-w { display: none; }
  @media (min-width: 48rem) {
    .tr-arch { aspect-ratio: 1.62 / 1; }
    .tr-arch-n { display: none; }
    .tr-arch-w { display: block; }
  }
  .tr-arch-set { position: absolute; inset: 0; pointer-events: none; }
  .tr-arch .tr-f, .tr-arch .tr-h {
    position: absolute; width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); z-index: var(--z, 2);
    transform: rotate(var(--r)); transition: transform 1.1s var(--tr-land) var(--d), opacity .5s ease var(--d);
  }
  .tr-arch .tr-f img, .tr-arch .tr-h img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
  .tr-arch .tr-f img { filter: drop-shadow(0 .35rem .35rem rgb(10 4 8 / .55)); }
  .tr-arch .tr-f.tr-back img { filter: drop-shadow(0 .25rem .3rem rgb(10 4 8 / .6)) brightness(.7) saturate(.9); }
  .tr-js .tr-arch:not(.is-in) .tr-f { opacity: 0; transform: rotate(calc(var(--r) - 70deg)) scale(.25); }

  /* strings of blooms hanging from the shoulders */
  .tr-arch .tr-str { position: absolute; width: 0; border-left: 1.5px solid #c9b796; z-index: 1; transform-origin: 50% 0;
    transition: transform 1s var(--tr-land) var(--d), opacity .4s ease var(--d); }
  .tr-arch .tr-h { transition-property: opacity, transform; }
  .tr-js .tr-arch:not(.is-in) .tr-str, .tr-js .tr-arch:not(.is-in) .tr-h { opacity: 0; transform: translateY(-1.5rem); }

  /* the words inside the arch */
  .tr-inside { position: absolute; left: 21%; right: 21%; top: 38%; bottom: 14%; z-index: 5; display: grid; align-content: center; justify-items: center; text-align: center; }
  @media (min-width: 48rem) { .tr-inside { top: 36%; bottom: 16%; left: 26%; right: 26%; } }
  .tr-page .tr-inside .tr-kicker { margin-bottom: .7rem; }
  .tr-page .tr-inside h1 { margin: 0; font: italic 400 clamp(2.4rem, 11.5vw, 3.4rem)/.98 var(--display); text-wrap: balance; }
  /* the title keeps the approved lab size at every width (the lab's wider size never applied, so the approved stills
     show this one); a larger title crowds the arch's inner blooms from 48rem to 90rem */
  @media (max-width: 22.5rem) { .tr-page .tr-inside .tr-kicker { font-size: .75rem; letter-spacing: .08em; } .tr-page .tr-inside h1 { font-size: 2.2rem; } }
  .tr-inside .tr-rule { display: block; width: clamp(2.5rem, 6vw, 4rem); height: 1px; margin: clamp(.8rem, 1.6vw, 1.1rem) auto 0; background: rgb(242 193 78 / .6); }
  .tr-page .tr-inside .tr-dates { margin: clamp(.7rem, 1.4vw, .95rem) 0 0; letter-spacing: .01em; font: italic 400 clamp(1.05rem, 2.2vw, 1.5rem)/1.2 var(--display); color: var(--marigold); text-wrap: balance; }

  .tr-page .tr-que-lede { margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 36rem; text-align: center; font-size: clamp(1.1rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--cream); text-wrap: pretty; }
  .tr-page .tr-que-line { margin: 1.25rem auto 0; max-width: 34rem; text-align: center; font: italic 400 clamp(1.25rem, 2.4vw, 1.6rem)/1.3 var(--display); color: var(--cream-dim); text-wrap: balance; }

  @media (prefers-reduced-motion: reduce) {
    .tr-arch .tr-f, .tr-arch .tr-h, .tr-arch .tr-str { transition: none !important; }
    .tr-js .tr-arch:not(.is-in) .tr-f { opacity: 1; transform: rotate(var(--r)); }
    .tr-js .tr-arch:not(.is-in) .tr-str, .tr-js .tr-arch:not(.is-in) .tr-h { opacity: 1; transform: none; }
  }.tr-page .tr-lot { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 6.5rem); }
  .tr-game { display: grid; gap: clamp(1.75rem, 4vw, 3rem); margin: clamp(2.25rem, 5vw, 3.5rem) auto 0; max-width: 60rem; align-items: center; }
  @media (min-width: 52rem) { .tr-game { grid-template-columns: 1.55fr 1fr; } }

  /* the tabla: a cream board, four across, two down */
  .tr-tw { position: relative; }
  .tr-tabla { position: relative; z-index: 1; list-style: none; margin: 0; padding: clamp(.45rem, 1.4vw, .8rem); display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(.35rem, 1.2vw, .7rem); background: #e9dcc4; border-radius: .5rem; box-shadow: 0 1.2rem 2.5rem rgb(0 0 0 / .45); transform: rotate(-.6deg); }
  .tr-tabla li { display: flex; min-width: 0; }
  .tr-page .tr-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); place-content: stretch; gap: 0; width: 100%; height: 100%; min-width: 0; min-height: 44px;
    padding: 5% 6% 6%; border: 0; border-radius: .3rem; cursor: pointer; font-weight: 400; line-height: 1;
    background: var(--cream); color: var(--tr-ink); box-shadow: inset 0 0 0 2px var(--tr-ink), inset 0 0 0 4px var(--cream), inset 0 0 0 5px var(--tr-ink);
    text-align: center; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--tr-ease); }
  .tr-page .tr-card:hover { background: var(--cream); color: var(--tr-ink); }
  @media (hover: hover) and (pointer: fine) { .tr-page .tr-card:hover { transform: translateY(-2px); } }
  .tr-page .tr-card:active { transform: none; }
  .tr-card .tr-n { justify-self: start; padding-left: 4%; font: italic 400 clamp(.85rem, 2vw, 1.15rem)/1 var(--display); }
  .tr-card .tr-art, .tr-face .tr-art { position: relative; display: grid; place-items: center; justify-self: stretch; width: 100%; aspect-ratio: 1 / 1.05; margin: 4% 0; background: var(--tr-bg); border-radius: 2px; overflow: hidden; }
  .tr-card .tr-art > img { width: 80%; height: 82%; object-fit: contain; filter: drop-shadow(0 .2rem .25rem rgb(0 0 0 / .3)); }
  .tr-card .tr-name { font: italic 400 clamp(1rem, 2.3vw, 1.3rem)/1.05 var(--display); letter-spacing: .005em; hyphens: manual; text-wrap: balance; min-height: 2.1em; display: grid; place-items: center; }
  .tr-retrato { position: relative; width: 80%; height: 82%; display: grid; place-items: center; }
  .tr-art .tr-retrato img { position: absolute; width: auto; height: 100%; max-width: none; left: 50%; translate: -50% 0; }
  .tr-art .tr-retrato .tr-pic { z-index: 1; height: 58%; top: 21%; aspect-ratio: 59 / 58; object-fit: cover; border-radius: 1px; filter: none; }
  /* the marker: a painted marigold with a dark outline, so it reads on every card colour */
  .tr-card .tr-art .tr-mark { position: absolute; left: 70%; top: 70%; width: 46%; height: auto; object-fit: initial; translate: -50% -50%; rotate: var(--r, 20deg); pointer-events: none;
    filter: drop-shadow(1.5px 0 0 #2a1408) drop-shadow(-1.5px 0 0 #2a1408) drop-shadow(0 1.5px 0 #2a1408) drop-shadow(0 -1.5px 0 #2a1408) drop-shadow(0 .25rem .25rem rgb(0 0 0 / .5)); }
  .tr-flyer { position: fixed; z-index: 30; pointer-events: none;
    filter: drop-shadow(1.5px 0 0 #2a1408) drop-shadow(-1.5px 0 0 #2a1408) drop-shadow(0 1.5px 0 #2a1408) drop-shadow(0 -1.5px 0 #2a1408); }

  /* tabla llena: a ring of painted marigolds blooms around the board, and the cards settle in a wave */
  .tr-ring { position: absolute; inset: .5rem; z-index: 2; pointer-events: none; }
  .tr-ring img { position: absolute; width: clamp(2rem, 5vw, 3.8rem); max-width: none; translate: -50% -50%; transform: scale(0) rotate(-60deg); opacity: 0;
    transition: transform .7s var(--tr-land) var(--d), opacity .3s ease var(--d); filter: drop-shadow(0 .3rem .4rem rgb(0 0 0 / .45)); }
  .tr-tw.is-full .tr-ring img { transform: rotate(var(--r)); opacity: 1; }
  .tr-tw.is-full .tr-card { animation: tr-settle .7s var(--tr-land) both; animation-delay: var(--d); }
  @keyframes tr-settle { 0% { transform: none; } 40% { transform: translateY(-.45rem) rotate(-1.2deg); } 100% { transform: none; } }
  .tr-card[aria-pressed="true"] .tr-art > img:not(.tr-mark), .tr-card[aria-pressed="true"] .tr-retrato { opacity: .9; }

  /* the caller: the drawn card, its name, and why it is on the ofrenda */
  .tr-caller { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 1.25rem; align-items: center; }
  @media (min-width: 52rem) { .tr-caller { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
  .tr-drawn { width: clamp(6.5rem, 22vw, 11rem); aspect-ratio: 1 / 1.45; perspective: 50rem; }
  .tr-face { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); padding: 7% 8% 8%; border-radius: .4rem; background: var(--cream); color: var(--tr-ink);
    box-shadow: inset 0 0 0 2px var(--tr-ink), inset 0 0 0 5px var(--cream), inset 0 0 0 6px var(--tr-ink), 0 1rem 2rem rgb(0 0 0 / .45); text-align: center; transform-origin: 50% 50%; }
  .tr-face.tr-back { background: #1f3f8a repeating-linear-gradient(45deg, rgb(245 237 224 / .14) 0 6px, transparent 6px 14px); box-shadow: inset 0 0 0 4px var(--cream), 0 1rem 2rem rgb(0 0 0 / .45); }
  .tr-face.tr-flip { animation: tr-flipin .6s var(--tr-ease); }
  @keyframes tr-flipin { 0% { transform: rotateY(90deg) translateX(-30%); } 100% { transform: none; } }
  .tr-face .tr-n { justify-self: start; font: italic 400 1.1rem/1 var(--display); }
  .tr-face .tr-art { aspect-ratio: auto; margin: 6% 0; }
  .tr-face .tr-art > img { width: 82%; height: 84%; object-fit: contain; }
  .tr-face .tr-name { font: italic 400 clamp(.95rem, 2.6vw, 1.35rem)/1.05 var(--display); }
  .tr-face .tr-mark { display: none; }
  .tr-say { min-width: 0; }
  .tr-page .tr-say .tr-count { margin: 0 0 .5rem; font-weight: 600; font-size: .8125rem; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-faint); }
  .tr-page .tr-say h3 { margin: 0; font: italic 400 clamp(2rem, 4.6vw, 2.8rem)/1.05 var(--display); color: var(--cream); text-wrap: balance; }
  .tr-page .tr-say .tr-say-why { margin: .7rem 0 0; max-width: 24rem; color: var(--cream-dim); line-height: 1.6; text-wrap: pretty; }
  @media (min-width: 52rem) { .tr-page .tr-say .tr-say-why { margin-inline: auto; } }
  .tr-say .tr-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
  @media (min-width: 52rem) { .tr-say .tr-btns { justify-content: center; } }
  .tr-say .tr-call { min-height: 48px; padding-inline: 1.6rem; }

  @media (prefers-reduced-motion: reduce) {
    .tr-face.tr-flip { animation: none; } .tr-page .tr-card { transition: none; } .tr-tw.is-full .tr-card { animation: none; } .tr-ring img { transition: none; }
  }.tr-page .tr-rg { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 6.5rem); }

  /* the field: full bleed, rows of painted candles and marigolds, back rows small and dim */
  .tr-field-wrap { overflow-x: clip; }
  .tr-field { position: relative; width: 100%; aspect-ratio: 1 / 1.05; margin-top: clamp(1rem, 3vw, 2rem);
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 88%, transparent); }
  .tr-field-set { position: absolute; inset: 0; }
  .tr-field-w { display: none; }
  @media (min-width: 48rem) {
    .tr-field { aspect-ratio: 3 / 1; }
    .tr-field-n { display: none; }
    .tr-field-w { display: block; }
  }
  .tr-row { position: absolute; inset: 0; transition: transform 1.1s var(--tr-land) var(--d), opacity .8s ease var(--d); }
  .tr-js .tr-field:not(.is-in) .tr-row { transform: translateY(12%); opacity: 0; }
  .tr-it { position: absolute; translate: -50% -100%; filter: brightness(var(--b)); }
  .tr-it img { display: block; width: 100%; height: auto; max-width: none; }
  .tr-it .tr-fl { position: absolute; inset: 0; }
  .tr-page .tr-cap { margin: .6rem auto 0; text-align: center; font: italic 400 clamp(1rem, 2vw, 1.2rem)/1.3 var(--display); color: var(--cream-dim); }

  /* the four places, all at rest: a staggered spread, no tabs and no boxes */
  .tr-places { list-style: none; margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; padding: 0; max-width: 60rem; display: grid; gap: clamp(2.5rem, 5vw, 3rem) clamp(2rem, 6vw, 5rem); }
  @media (min-width: 48rem) { .tr-places { grid-template-columns: 1fr 1fr; } .tr-places > li:nth-child(even) { margin-top: 5rem; } }
  /* each place: its candle on the left, the words on the right; the candle and the words both light it */
  .tr-places > li { display: grid; grid-template-columns: clamp(2.75rem, 5.5vw, 3.1rem) 1fr; gap: 0 clamp(.9rem, 2.4vw, 1.4rem); align-items: start; }
  .tr-page .tr-light { position: relative; display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: .1rem; padding: 0; border: 0; border-radius: .5rem;
    background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: none; }
  .tr-page .tr-light:hover, .tr-page .tr-light:active { background: none; transform: none; }
  .tr-light .tr-body { display: block; width: 100%; height: auto; filter: brightness(.5) saturate(.8); transition: filter .7s ease; }
  .tr-light .tr-fl { position: absolute; inset: 0; transform-origin: 50% 22%; transform: scale(0); opacity: 0; transition: transform .7s var(--tr-land), opacity .3s ease; }
  .tr-light .tr-fl img { position: absolute; inset: 0; width: 100%; height: auto; }
  .tr-places > li.is-lit .tr-light .tr-body { filter: none; }
  .tr-places > li.is-lit .tr-light .tr-fl { transform: none; opacity: 1; }
  .tr-places > li:not(.is-lit) .tr-txt { cursor: pointer; }
  .tr-places > li.is-lit .tr-light { cursor: default; }
  .tr-txt { min-width: 0; }
  @media (hover: hover) and (pointer: fine) { .tr-places > li:not(.is-lit):hover .tr-light .tr-body { filter: brightness(.7) saturate(.9); } }
  .tr-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--tr-ease), opacity .5s ease .1s; }
  .tr-more > p { overflow: hidden; }
  .tr-more .tr-ln { display: block; padding-top: .8rem; font: italic 400 clamp(1.2rem, 2.2vw, 1.4rem)/1.35 var(--display); color: var(--cream); text-wrap: pretty; }
  .tr-places > li.is-lit .tr-more { grid-template-rows: 1fr; opacity: 1; }
  .tr-more .tr-day { color: var(--tr-day-nov01); }
  .tr-page .tr-places .tr-where { margin: 0 0 .5rem; font-weight: 600; font-size: .8125rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold); }
  .tr-page .tr-places h3 { margin: 0; font: italic 400 clamp(2.2rem, 5vw, 3.2rem)/1.02 var(--display); }
  .tr-page .tr-places .tr-pname { margin: .15rem 0 0; font: italic 400 clamp(1.35rem, 2.6vw, 1.7rem)/1.15 var(--display); color: var(--marigold); }
  .tr-page .tr-places .tr-body-txt { margin: .75rem 0 0; color: var(--cream-dim); line-height: 1.6; text-wrap: pretty; }

  @media (prefers-reduced-motion: reduce) {
    .tr-row, .tr-light .tr-fl, .tr-light .tr-body, .tr-more { transition: none !important; }
    .tr-js .tr-field:not(.is-in) .tr-row { transform: none; opacity: 1; }
  }.tr-page .tr-close { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(1rem, 3vw, 2rem); text-align: center; }
  .tr-page .tr-close-title { margin: 0 auto; max-width: 16ch; font: italic 400 clamp(2.4rem, 6.4vw, 4.2rem)/1.06 var(--display); text-wrap: balance; }
  .tr-page .tr-close-lead { margin: 1rem auto 0; color: var(--cream-dim); line-height: 1.6; text-wrap: pretty; max-width: 28rem; }

  /* the stage: a full-bleed row of candles, the skull in front of its middle */
  .tr-stage-wrap { overflow-x: clip; }
  .tr-stage { position: relative; margin-top: clamp(2rem, 5vw, 3rem); height: clamp(16rem, 31vw, 26rem); }
  .tr-crow { position: absolute; inset: 0; }
  .tr-crow-w { display: none; }
  @media (min-width: 48rem) { .tr-crow-n { display: none; } .tr-crow-w { display: block; } }
  .tr-cn { position: absolute; bottom: var(--b); translate: -50% 0; width: var(--w); }
  .tr-cn > img { display: block; width: 100%; height: auto; max-width: none; filter: brightness(.5); transition: filter .8s ease var(--d); }
  .tr-cn .tr-fl { position: absolute; inset: 0; transform-origin: 50% 20%; transform: scale(0); opacity: 0;
    transition: transform .8s var(--tr-land) var(--d), opacity .3s ease var(--d); }
  .tr-cn .tr-fl img { position: absolute; inset: 0; width: 100%; height: auto; max-width: none; }
  .tr-stage.is-lit .tr-cn > img { filter: none; }
  .tr-stage.is-lit .tr-cn .tr-fl { transform: none; opacity: 1; }
  .tr-mg { position: absolute; z-index: 2; translate: -50% 0; bottom: -4%; }
  .tr-mg img { display: block; width: 100%; height: auto; max-width: none; }
  .tr-skull { position: absolute; z-index: 3; left: 50%; bottom: 0; width: clamp(11rem, 26vw, 17rem); translate: -50% 0; }
  .tr-skull > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1rem 1.5rem rgb(0 0 0 / .55)); }
  /* the name is inked in a deep cacao red, so no pink reads as a day colour */
  .tr-band { position: absolute; left: 20%; right: 20%; top: 19.8%; height: 10.4%; display: flex; align-items: center; justify-content: center; overflow: hidden;
    font: italic 400 var(--fs, 1.6rem)/1 var(--display); color: #5c1626; white-space: nowrap; }
  .tr-band.is-ph { color: rgb(92 22 38 / .4); }
  .tr-band.is-hidden { visibility: hidden; }
  .tr-band .tr-ink { display: inline-block; flex: none; white-space: nowrap; }
  .tr-band .tr-ink span { display: inline-block; white-space: pre; }
  .tr-band .tr-ink span.is-new { animation: tr-inkin .45s var(--tr-land) both; }
  @keyframes tr-inkin { 0% { opacity: 0; transform: translateY(-.25em) scale(1.3); } 100% { opacity: 1; transform: none; } }

  .tr-name-form { max-width: 26rem; width: 100%; margin: clamp(1.5rem, 4vw, 2.25rem) auto 0; }
  .tr-name-form label { display: block; margin: 0 0 .45rem; font-weight: 600; }
  .tr-name-row { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
  .tr-name-row input { flex: 1 1 12rem; width: auto; min-width: 0; min-height: 48px; padding: 0 1rem; border-radius: .75rem; font-size: 1.0625rem; }
  .tr-name-row .tr-put { min-height: 48px; padding-inline: 1.4rem; }
  .tr-page .tr-err { margin: .5rem 0 0; color: var(--danger); font-size: .9375rem; min-height: 1.4em; }
  .tr-next { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.1rem; margin-top: .5rem; }
  .tr-page .tr-next .tr-said { flex-basis: 100%; color: var(--cream); font: italic 400 clamp(1.2rem, 2.6vw, 1.45rem)/1.3 var(--display); }
  .tr-next .tr-cta { min-height: 48px; padding-inline: 1.4rem; }
  .tr-next .tr-free { color: var(--cream-faint); font-size: .9375rem; }
  .tr-page .tr-note { margin: 1.1rem 0 0; color: var(--cream-faint); font-size: .875rem; }

  @media (prefers-reduced-motion: reduce) { .tr-band .tr-ink span.is-new { animation: none; } .tr-cn .tr-fl, .tr-cn > img { transition: none; } }/* the page's own motion curves and the one day colour it uses (1 November, for the children, from the shared
     day colour set in src/styles/days.css, which keeps it for that day only) */
  .tr-page {
    --tr-ease: cubic-bezier(.2, .75, .25, 1);
    --tr-land: cubic-bezier(.3, 1.35, .45, 1);
    --tr-ink: #2a1408;
    --tr-day-nov01: var(--day-nov01);
  }
  /* full-bleed scenes run edge to edge out of the page column; nothing may scroll the page sideways */
  :root:has(.tr-page) { overflow-x: clip; }
  .tr-bleed { margin-inline: calc(50% - 50vw); }
  .tr-page section { padding: 0; }
  .tr-page p { margin: 0; }

  .tr-page .tr-kicker { margin: 0 0 .9rem; font-weight: 600; font-size: .8125rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold); }
  .tr-page .tr-title { margin: 0 0 .75rem; font: italic 400 clamp(2.25rem, 5.5vw, 3.5rem)/1.05 var(--display); text-wrap: balance; }
  .tr-page .tr-lead { margin: 0 auto; max-width: 36rem; color: var(--cream-dim); text-wrap: pretty; }
  .tr-head { text-align: center; }
  .tr-page .tr-src { margin: 2rem auto 0; max-width: 40rem; color: var(--cream-faint); font-size: .875rem; line-height: 1.5; text-align: center; text-wrap: pretty; }

  /* a painted flame flickers like the hero's: a small, uneven sway around the wick */
  @keyframes tr-flick {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    20% { transform: scale(.97, 1.04) rotate(-1.4deg); }
    45% { transform: scale(1.03, .96) rotate(.8deg); }
    70% { transform: scale(.98, 1.03) rotate(1.2deg); }
    85% { transform: scale(1.02, .98) rotate(-.6deg); }
  }
  .tr-flicker { transform-origin: 50% 85%; animation: tr-flick var(--fd, 2.6s) ease-in-out var(--fdel, 0s) infinite; }
  @media (prefers-reduced-motion: reduce) { .tr-flicker { animation: none !important; } }.ws {
    --ws-paper: #f4ead6;
    --ws-paper-ink: #3a2216;
    --ws-ease: cubic-bezier(.2, .75, .25, 1);
    --ws-land: cubic-bezier(.3, 1.3, .45, 1);
    position: relative; isolation: isolate;
    padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(8rem, 15vw, 12rem);
  }
  .ws-head { text-align: center; max-width: 46rem; margin: 0 auto; }
  .ws-kicker { margin: 0 0 .9rem; font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold); }
  .ws-title { margin: 0 auto .75rem; max-width: 16ch; font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem); line-height: 1.05; text-wrap: balance; }
  .ws-open { margin: 1.1rem auto 0; max-width: 34rem; color: var(--cream-dim); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); text-wrap: pretty; }

  /* the sentence that reads the picked flag out */
  .ws-now { margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 40rem; min-height: 3.75em; text-align: center;
    font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.05rem); line-height: 1.25;
    color: var(--cream); text-wrap: balance; }
  .ws-now b { font-weight: 400; color: var(--marigold); }

  .ws-figure { margin: 0; }
  /* each place hangs its own stretch of cord, so a wrapped row is its own string; the row clips sideways only,
     so a tag still turned up while it drops stays inside the screen */
  .ws-cord { overflow-x: clip; overflow-y: visible; }
  .ws-places { list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; padding: .75rem 0 0; max-width: 60rem; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 1.75rem; }
  .ws-place { position: relative; flex: 0 0 33.333%; display: grid; justify-items: center; min-width: 0; }
  @media (min-width: 48rem) { .ws-place { flex-basis: calc(100% / var(--n, 5)); } }
  .ws-place::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: #c9a26a; }
  .ws-place:first-child::before, .ws-place:nth-child(3n + 1)::before { left: 8%; }
  .ws-place:last-child::before, .ws-place:nth-child(3n)::before { right: 8%; }
  @media (min-width: 48rem) {
    .ws-place:nth-child(3n + 1)::before { left: 0; } .ws-place:nth-child(3n)::before { right: 0; }
    .ws-place:first-child::before { left: 8%; } .ws-place:last-child::before { right: 8%; }
  }

  .ws .ws-flag { all: unset; box-sizing: border-box; position: relative; display: grid; justify-items: center; width: 100%; min-height: 44px;
    padding: 6px .25rem .25rem; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: .75rem; }
  .ws .ws-flag:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
  .ws-f { display: block; width: min(86%, 8.25rem); transform-origin: 50% 0; transition: scale .6s var(--ws-land) var(--d, 0s), opacity .2s ease var(--d, 0s); }
  .ws-f img { display: block; width: 100%; height: auto; transform-origin: 50% 0; animation: ws-sway var(--sd, 5s) ease-in-out var(--sdel, 0s) infinite alternate;
    filter: drop-shadow(0 .4rem .5rem rgb(0 0 0 / .45)); transition: filter .3s ease; }
  @keyframes ws-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.4deg); } }

  /* the paper tag on its thread, with the time there */
  .ws-tag { position: relative; display: grid; justify-items: center; gap: .1rem; margin-top: .9rem; padding: .55rem .55rem .5rem; width: min(92%, 9rem);
    border-radius: .35rem; background: var(--ws-paper); color: var(--ws-paper-ink); box-shadow: 0 .6rem 1rem rgb(0 0 0 / .4); transform-origin: 50% -.9rem;
    transition: rotate .7s var(--ws-land) calc(var(--d, 0s) + .25s), opacity .3s ease calc(var(--d, 0s) + .25s), background-color .3s ease; }
  .ws-tag::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: .9rem; background: rgb(201 162 106 / .8); }
  .ws-pname { font-family: var(--display); font-style: italic; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.05; text-wrap: balance; text-align: center; overflow-wrap: anywhere; }
  .ws-ptime { font-weight: 700; font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ws-pday { display: grid; font-size: .75rem; line-height: 1.25; color: rgb(58 34 22 / .78); text-align: center; }
  .ws-you { position: absolute; top: -.75rem; left: 50%; translate: -50% 0; padding: .1rem .5rem; border-radius: 999px; background: #b8336a; color: #fff;
    font-size: .6875rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
  .ws-you[hidden] { display: none; }
  /* room under the badge so it never sits on the place name */
  .ws-tag:has(> .ws-you:not([hidden])) { padding-top: 1rem; }
  /* the picked place: its tag turns marigold and its flag glows */
  .ws-flag[aria-pressed="true"] .ws-tag { background: var(--marigold); }
  .ws-flag[aria-pressed="true"] .ws-f img { filter: drop-shadow(0 0 .9rem rgb(242 193 78 / .55)) drop-shadow(0 .4rem .5rem rgb(0 0 0 / .45)); }
  .ws-flag.ws-swing .ws-tag { animation: ws-swing .9s var(--ws-ease); }
  @keyframes ws-swing { 20% { rotate: -9deg; } 45% { rotate: 6deg; } 70% { rotate: -3deg; } 100% { rotate: 0deg; } }

  /* before the string comes into view: flags folded up onto the cord, tags turned up */
  .ws-places.ws-arm:not(.ws-in) .ws-f { scale: 1 0; opacity: 0; }
  .ws-places.ws-arm:not(.ws-in) .ws-tag { rotate: -70deg; opacity: 0; }

  .ws-cap { display: grid; justify-items: center; gap: .35rem; margin: 1.5rem auto 0; text-align: center; font-size: .875rem; color: var(--cream-dim); }
  .ws-credit { font-size: .75rem; color: var(--cream-faint); letter-spacing: .01em; }

  .ws-close { max-width: 40rem; margin: clamp(2.5rem, 6vw, 3.75rem) auto 0; text-align: center; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); text-wrap: pretty; }
  .ws-close em { font-style: normal; color: var(--marigold); }

  /* the hero's uneven flower border along the foot of the section, laid edge to edge by story.ts */
  .ws-edge-clip { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-x: clip; overflow-y: visible; pointer-events: none; z-index: -1; }
  .ws-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: visible; }
  .ws-edge img { position: absolute; max-width: none; translate: -50% 0; filter: drop-shadow(0 .4rem .5rem rgb(0 0 0 / .5)); }

  @media (hover: hover) {
    .ws-flag:hover .ws-tag { rotate: -4deg; }
    .ws-flag:hover .ws-pname { color: #8a3a12; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ws-f, .ws-tag { transition: none !important; }
    .ws-f img, .ws-flag.ws-swing .ws-tag { animation: none !important; }
  }.wt {
    --wt-paper: #f4ead6;
    --wt-paper-ink: #3a2216;
    --wt-ease: cubic-bezier(.2, .75, .25, 1);
    --wt-land: cubic-bezier(.3, 1.3, .45, 1);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 3rem);
  }
  .wt p { margin: 0; }
  /* phone: intro, the picker, the phone right under it, then the facts; desktop: the text left, the phone right */
  .wt-grid { display: grid; row-gap: 1.25rem; grid-template-areas: "intro" "who" "phone" "facts"; }
  .wt-intro { grid-area: intro; } .wt-who { grid-area: who; } .wt-phone { grid-area: phone; } .wt-facts { grid-area: facts; }
  .wt-grid > * { min-width: 0; }
  @media (min-width: 56rem) {
    .wt-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: 0;
      grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". phone" "intro phone" "facts phone" "who phone" ". phone"; }
    .wt-who { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
    .wt-phone { align-self: center; }
  }
  .wt-kicker { margin: 0 0 .9rem !important; font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold); }
  .wt-title { margin: 0; font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); line-height: 1.05; text-wrap: balance; }

  .wt-facts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 34rem; }
  @media (min-width: 56rem) { .wt-facts { margin-top: 1.5rem; } }
  .wt-facts li { position: relative; padding-left: 2rem; text-wrap: pretty; }
  .wt-facts li::before { content: ''; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.15rem; background: url('/how/marigold-sm.webp') center / contain no-repeat; }
  .wt-facts b { color: var(--marigold); font-weight: 700; }

  .wt-who-q { margin: 0 0 .7rem !important; font-family: var(--display); font-style: italic; font-size: 1.5rem; line-height: 1.15; }
  .wt-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; max-width: 30rem; border-radius: 999px;
    background: rgb(245 237 224 / .07); border: 1px solid var(--line); }
  .wt .wt-seg button { min-height: 44px; min-width: 0; padding: .4rem .5rem; border: 0; border-radius: 999px; background: transparent; color: var(--cream);
    font-size: .9375rem; font-weight: 600; line-height: 1.15; box-shadow: none; transition: background-color .25s ease, color .25s ease; }
  .wt .wt-seg button:hover { background: rgb(245 237 224 / .08); color: var(--cream); }
  .wt .wt-seg button[aria-pressed="true"] { background: var(--marigold); color: var(--ground); }
  .wt-who-note { margin: .7rem 0 0 !important; min-height: 3.2em; max-width: 30rem; color: var(--cream-dim); font-size: .9375rem; }

  /* the phone: a plain dark device, the three screens stacked in one cell so its height never jumps */
  .wt-phone { justify-self: center; width: min(100%, 20.5rem); padding: .6rem; border-radius: 2.6rem; background: #2a1d24;
    box-shadow: 0 2rem 4rem rgb(0 0 0 / .5), inset 0 0 0 1px rgb(245 237 224 / .12); }
  .wt-screen { position: relative; display: grid; min-height: 30rem; border-radius: 2.1rem; overflow: hidden; background: #1d1017; }
  .wt-screen::before { content: ''; position: absolute; top: .55rem; left: 50%; translate: -50% 0; width: 4.5rem; height: 1.1rem; border-radius: 999px; background: #0c0609; z-index: 3; }
  .wt-scr { grid-area: 1 / 1; min-width: 0; padding: 2.4rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; font-size: .875rem; line-height: 1.4;
    transition: opacity .35s ease, translate .45s var(--wt-ease), visibility 0s linear .35s; }
  .wt-scr[data-off] { opacity: 0; translate: 0 .75rem; visibility: hidden; pointer-events: none; }
  .wt-scr:not([data-off]) { transition: opacity .35s ease .1s, translate .45s var(--wt-ease) .1s, visibility 0s; }
  .wt-bar { display: flex; align-items: center; gap: .45rem; font-family: var(--display); font-style: italic; font-size: 1.05rem; line-height: 1; color: var(--cream-dim); }
  .wt-bar::before { content: ''; width: .4rem; height: .65rem; flex: none; background: radial-gradient(circle at 50% 70%, #fff3c4, var(--marigold) 55%, #e07a1f); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }

  /* the family's view: the painted altar itself, with the candles visitors light standing on its tiers */
  .wt-alt { position: relative; aspect-ratio: 3 / 2; margin: 0 -.35rem; border-radius: .9rem; overflow: hidden; container-type: inline-size; }
  .wt-alt > .wt-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
  .wt-alt .wt-portrait { position: absolute; left: 43.88%; top: 16.6%; width: 12.17%; height: 20.22%; object-fit: cover; max-width: none; }
  .wt-alt .wt-v { position: absolute; width: 7.6%; height: auto; translate: -50% -100%; max-width: none;
    filter: drop-shadow(0 0 1.6cqw rgb(255 190 90 / .55)) drop-shadow(0 .4cqw .5cqw rgb(0 0 0 / .45)); }
  .wt-alt .wt-v.wt-new { animation: wt-arrive .7s var(--wt-land); }
  @keyframes wt-arrive { from { opacity: 0; transform: translateY(-.75rem) scale(.6); } }
  .wt-alt-name { text-align: center; }
  .wt-alt-name b, .wt-who-card b { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.05; }
  .wt-alt-name span, .wt-who-card span { color: var(--cream-dim); font-size: .8125rem; }
  .wt-who-card { display: grid; grid-template-columns: 4.25rem 1fr; gap: .8rem; align-items: center; }
  .wt-who-card img { width: 4.25rem; height: 4.25rem; object-fit: cover; border-radius: .7rem; border: 3px solid var(--marigold); }

  .wt-count { margin: auto 0 0 !important; text-align: center; color: var(--cream-dim); }
  .wt .wt-light { min-height: 44px; padding: .4rem 1rem; border: 0; border-radius: 999px; background: var(--marigold); color: var(--ground); font-size: .9375rem; font-weight: 600; box-shadow: none; }
  .wt .wt-light:hover { background: #ffd36b; color: var(--ground); }
  .wt-toast { min-height: 1.4em; text-align: center; color: var(--marigold); font-weight: 600; opacity: 0; transition: opacity .3s ease; }
  .wt-toast.wt-on { opacity: 1; }

  /* the owner's view: a paper card in the altar's style, with a printed double rule and marigold corners */
  .wt-card { position: relative; display: grid; gap: .55rem; padding: 1.1rem 1rem 1rem; border-radius: .5rem; background: var(--wt-paper); color: var(--wt-paper-ink);
    box-shadow: 0 1rem 2rem rgb(0 0 0 / .4); }
  .wt-card::before { content: ''; position: absolute; inset: .35rem; border: 1px solid rgb(58 34 22 / .3); outline: 3px double rgb(58 34 22 / .2); outline-offset: -.35rem;
    border-radius: .25rem; pointer-events: none; }
  .wt-card > [data-stage] { position: relative; display: grid; gap: .55rem; }
  .wt-card [hidden] { display: none !important; }
  .wt-mg { position: absolute; width: 2.1rem; max-width: none; filter: drop-shadow(0 .15rem .2rem rgb(0 0 0 / .3)); pointer-events: none; }
  .wt-mg-a { top: -.8rem; right: -.6rem; rotate: 20deg; } .wt-mg-b { bottom: -.7rem; left: -.7rem; rotate: -30deg; }
  .wt-card h3 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.1; color: #8a3a12; }
  .wt-card p { color: rgb(58 34 22 / .85); font-size: .8125rem; }
  .wt-card h4 { margin: .25rem 0 0; font-size: .75rem; font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: rgb(58 34 22 / .72); }
  .wt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .25rem 0; border-top: 1px solid rgb(58 34 22 / .18); }
  .wt-what { transition: opacity .3s ease; overflow-wrap: anywhere; }
  .wt-what small { display: block; color: #a3164e; font-size: .75rem; font-weight: 600; }
  .wt-row.wt-hid .wt-what > span { opacity: .6; }
  .wt .wt-sm { min-height: 44px; min-width: 44px; padding: 0 .85rem; border-radius: 999px; border: 1px solid rgb(58 34 22 / .4); background: transparent; color: var(--wt-paper-ink);
    font-size: .8125rem; font-weight: 600; line-height: 1; box-shadow: none; }
  .wt .wt-sm:hover { background: rgb(58 34 22 / .07); color: var(--wt-paper-ink); border-color: rgb(58 34 22 / .55); }
  .wt .wt-del { display: flex; width: 100%; min-height: 44px; margin-top: .5rem; border-radius: 999px; border: 1px solid rgb(163 22 78 / .6); background: transparent; color: #a3164e;
    font-size: .875rem; font-weight: 600; line-height: 1.1; box-shadow: none; }
  .wt .wt-del:hover { background: rgb(212 63 122 / .1); color: #a3164e; border-color: #a3164e; }
  .wt .wt-del.wt-solid { margin-top: 0; background: #a3164e; color: #fff; border-color: #a3164e; }
  .wt .wt-del.wt-solid:hover { background: #8c1243; color: #fff; }
  .wt-confirm p { color: var(--wt-paper-ink); font-size: .875rem; }
  .wt-two { display: grid; gap: .5rem; }
  .wt-gone { text-align: center; padding: 1rem .25rem; justify-items: center; }
  .wt-gone b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.15; color: var(--wt-paper-ink); }
  .wt-gone small { color: rgb(58 34 22 / .75); }

  /* the stranger: the papel picado drawn shut across a dark doorway, a plain web search, then the find page */
  .wt-shut { position: relative; height: 9.5rem; margin: 0 -.35rem; border-radius: .9rem .9rem .4rem .4rem; overflow: hidden;
    background: radial-gradient(ellipse 70% 90% at 50% 100%, #2b1720, #0c0609 75%); border: 1px solid rgb(245 237 224 / .1); }
  .wt-shut::before, .wt-shut::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #c9a26a; z-index: 2; }
  .wt-shut::before { top: .5rem; } .wt-shut::after { top: 4.6rem; }
  .wt-shut-row { position: absolute; left: -4%; right: -4%; display: flex; justify-content: center; }
  .wt-shut-row.wt-r1 { top: .5rem; } .wt-shut-row.wt-r2 { top: 4.6rem; }
  .wt-shut img { width: 26%; margin: 0 -2%; flex: none; filter: brightness(.6) saturate(.85) drop-shadow(0 .3rem .4rem rgb(0 0 0 / .6)); transform-origin: 50% 0; }
  .wt-shut img:nth-child(odd) { rotate: -2deg; } .wt-shut img:nth-child(even) { rotate: 2.5deg; }
  .wt-search { display: flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 999px; background: var(--cream); color: var(--ground); font-size: .8125rem; min-width: 0; }
  .wt-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-search svg { flex: none; width: 1rem; height: 1rem; }
  .wt-none { padding: .6rem .25rem; color: var(--cream-dim); }
  .wt-none b { color: var(--cream); }
  .wt-find { display: grid; gap: .45rem; padding: .85rem; border-radius: 1rem; background: rgb(245 237 224 / .06); border: 1px solid var(--line); }
  .wt-find h3 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.2rem; line-height: 1.1; }
  .wt-field { min-height: 44px; display: flex; align-items: center; padding: 0 .8rem; border-radius: .7rem; border: 1px solid rgb(245 237 224 / .3);
    color: var(--cream-dim); font-size: .8125rem; }
  .wt-find small { color: var(--cream-dim); font-size: .75rem; }

  .wt-go { margin-top: clamp(2rem, 5vw, 3rem) !important; text-align: center; }

  @media (prefers-reduced-motion: reduce) {
    .wt-scr, .wt-scr:not([data-off]), .wt .wt-seg button, .wt-what, .wt-toast { transition: none !important; }
    .wt-alt .wt-v.wt-new { animation: none; }
  }