/* The phone opening of the home hero (under 768 px): the picture and the words wait while hero/loader.js paints one
   marigold and its ring on the dark ground; then the picture fades in and the words rise, all inside a second.
   Nothing here applies from 768 px up. */
@media (max-width: 767.98px) {
  .hero-wrap.ld .hero-copy { visibility: hidden; }
  .hero-wrap.pl .hero-under { transition: opacity .35s cubic-bezier(.45, 0, .55, 1); }
  /* no closed curtain on a phone: the burnt glow behind the title is never wanted, the soft darkening comes with the words */
  .hero-wrap.pl .hero-copy::after { opacity: 0; transition: none; }
  .hero-wrap.pl .hero-copy::before { transition-duration: .35s; }
  .hero-wrap.js.pl .hero-stage .hero-copy > * { transition: opacity .32s ease-out, transform .36s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .hero-wrap.js.pl .hero-stage .hero-copy > .hero-title { opacity: 0; }
  .hero-wrap.pl.on .hero-stage .hero-copy > .hero-title { opacity: 1; }
  .hero-wrap.pl.on .hero-stage .hero-copy > :nth-child(2) { transition-delay: calc(var(--d, 0s) + .04s); }
  .hero-wrap.pl.on .hero-stage .hero-copy > :nth-child(3) { transition-delay: calc(var(--d, 0s) + .08s); }
  .hero-wrap.pl.on .hero-stage .hero-copy > :nth-child(4) { transition-delay: calc(var(--d, 0s) + .12s); }
  /* a page opened part way down, and reduced motion: everything at once */
  .hero-wrap.pl.quick .hero-under,
  .hero-wrap.pl.quick .hero-stage .hero-copy > *,
  .hero-wrap.pl.quick .hero-copy::before { transition: none !important; }
}
.hl-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
@font-face {
    font-family: 'Linden Hill';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/hero/fonts/LindenHill-400i.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* the stage runs edge to edge out of the page column (data-bleed marks the two boxes that do so by design);
     the words stay in the column, and nothing may scroll the page sideways */
  :root:has(.hero-wrap) { overflow-x: clip; }
  .home-hero { padding: 0; }
  .hero-wrap { margin-inline: calc(50% - 50vw); }

  /* on the home page the header floats over the top of the stage, as the lab's chrome did, on a night veil
     dense enough to read over the flowers; it scrolls away with the page */
  body[data-hero] .site-header {
    position: absolute; inset: 0 0 auto 0; z-index: 3; border-bottom: 0; color: #f5ede0;
    background: linear-gradient(to bottom, rgba(20, 10, 16, 0.94), rgba(20, 10, 16, 0.8));
  }
  body[data-hero] .site-header a,
  body[data-hero] .site-header [aria-current] { color: #f5ede0; }
  body[data-hero] .site-header button { background: transparent; color: #f5ede0; border-color: rgba(245, 237, 224, 0.7); }
  body[data-hero] .site-header :focus-visible { outline-color: #f2c14e; }
  /* where the header wraps, the language switch joins the brand's row, so the header covers one row less of the
     scene; where both cannot fit (320), it wraps as before */
  @media (max-width: 56rem) {
    body[data-hero] .site-header .container { row-gap: 0; }
    body[data-hero] .site-header .lang-switch { order: 1; }
    body[data-hero] .site-header .container > nav:not(.lang-switch) { order: 2; flex-basis: 100%; }
  }
  /* the narrowest phones: a size smaller, so the brand and language still share a row and the links go two by two */
  @media (max-width: 22rem) {
    body[data-hero] .site-header { font-size: 0.875rem; }
    body[data-hero] .site-header .container { column-gap: 0.75rem; }
  }

  .hero-wrap { --ground: #140a10; position: relative; height: 200vh; height: calc(100lvh + 100svh); }
  /* the second screen of height is the curtain's scroll-through (the border leaves over it); a phone has the small loader
     instead (hero/boot.js, the same width), so there the hero is one screen and the next section follows at once */
  @media (max-width: 767.98px) { .hero-wrap { height: auto; } }
  .hero-stage {
    /* one pixel short of the screen, on purpose: Chrome leaves a picture that fills the whole screen out of its
       largest-paint timing, and the hero picture is the page's largest paint (the strip shows the same dark ground) */
    position: sticky; top: 0; height: calc(100vh - 1px); height: calc(100lvh - 1px); overflow: hidden;
    background: var(--ground); color: #f6eee2; isolation: isolate;
  }
  .hero-scene { position: absolute; inset: 0; }
  .hero-under { position: absolute; inset: 0; container-type: size; }
  /* the picture (and the candles laid on it) stays unseen until the curtain has landed and the script says so (.shown):
     the opening is the dark page and the title, then the curtain, then the picture under it, never the picture bare.
     The server-written picture and its preloads still start loading from the first bytes; only the reveal waits */
  .hero-under { opacity: 0; }
  /* the first paints of the two openings (hero/first-wide.css, first-phone.css) show only where their stylesheet applies */
  .hero-first, .hl-first { display: none; }
  .hero-under.shown { opacity: 1; }
  /* the script never came (or never finished): after the five seconds the page shows its picture, as without a script */
  .hero-wrap.js.done .hero-under { opacity: 1; }
  /* the picture covers the stage like object-fit: cover, as a box, so the candles laid on it in shares of the
     picture stay registered through any crop, resize and the whole scroll */
  .hero-wrap .pic { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
  .hero-wrap .pic.wide { width: max(100cqw, 150cqh); aspect-ratio: 3 / 2; }
  .hero-wrap .pic.tall { width: max(100cqw, calc(100cqh * 2 / 3)); aspect-ratio: 2 / 3; }
  .hero-wrap .pic > img, .hero-wrap .pic > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
  /* the picture the server wrote into the page is loading from the first bytes but stays unseen until the script has
     sized it and laid its candles on it, as a picture built by the script always was */
  @media (prefers-reduced-motion: reduce) { .hero-wrap .pic[data-seed]:not(.ready) { visibility: hidden; } }
  /* the server's picture is sized by the same media query that chose its file (the markup above), so it has its box
     before any script runs; the script's own .wide and .tall classes then say the same */
  .hero-wrap .pic[data-seed] { width: max(100cqw, 150cqh); aspect-ratio: 3 / 2; }
  .hero-wrap .cds { position: absolute; inset: 0; pointer-events: none; }
  .hero-wrap .cds-tall { display: none; }
  @media (max-aspect-ratio: 9999/10000) {
    .hero-wrap .pic[data-seed] { width: max(100cqw, calc(100cqh * 2 / 3)); aspect-ratio: 2 / 3; }
    .hero-wrap .cds-wide { display: none; }
    .hero-wrap .cds-tall { display: block; }
  }
  .hero-wrap .cd { position: absolute; display: block; max-width: none; pointer-events: none; }
  .hero-wrap .fl-s { will-change: transform; }
  .hero-wrap .glow {
    position: absolute; pointer-events: none; border-radius: 50%; will-change: opacity; opacity: 0.8;
    background: radial-gradient(closest-side, rgba(255, 186, 96, 0.34), rgba(255, 150, 60, 0.15) 42%, rgba(255, 130, 40, 0.05) 72%, rgba(255, 120, 40, 0));
  }
  /* the flowers: every one a canvas drawn once at its device pixels and moved only by compositor transforms;
     the field never takes a tap, so the buttons in the clearing always do */
  .hero-field { position: absolute; inset: 0; z-index: 1; overflow: hidden; contain: strict; pointer-events: none; }
  .hero-wrap .scene, .hero-wrap .grp { position: absolute; inset: 0; }
  .hero-wrap .grp.layer { will-change: transform; }
  .hero-wrap .bake { will-change: transform; }
  .hero-wrap .fl, .hero-wrap .bake { position: absolute; left: 0; top: 0; }
  .hero-wrap .fl { will-change: transform; }
  .hero-wrap .sw { position: absolute; inset: 0; will-change: transform; }
  .hero-wrap .fl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero-wrap .fl canvas.a { will-change: opacity; }

  /* the clearing's words: inside the page column, centred where the picture leaves room */
  .hero-copy {
    --t: clamp(3.2rem, 9vw, 8rem);
    position: absolute; top: 0; height: 100%; z-index: 2;
    left: max(1rem, calc(50% - 31rem)); right: max(1rem, calc(50% - 31rem));
    display: grid; align-content: center; justify-items: center; text-align: center;
    pointer-events: none;
  }
  .hero-copy > * { margin: 0; pointer-events: auto; }
  .hero-copy.measure { visibility: hidden; pointer-events: none; }
  .hero-wrap.js:not(.placed) .hero-copy { visibility: hidden; }
  .hero-title {
    font-family: 'Linden Hill', Georgia, serif; font-style: italic; font-weight: 400;
    font-size: var(--t); line-height: 1.02; letter-spacing: 0; text-wrap: balance; position: relative;
    color: #f6eee2; text-shadow: 0 0.02em 0.05em rgba(44, 12, 4, 0.7);
  }
  .hero-copy h1 {
    margin-top: 0.85rem; max-width: 28ch; color: #f6eee2; text-wrap: balance;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.25; font-weight: 600;
    text-shadow: 0 1px 2px rgba(20, 10, 16, 0.8);
  }
  .hero-copy ul { margin-top: 1.4rem; justify-content: center; gap: 0.75rem; }
  .hero-copy .btn {
    min-height: 48px; padding: 0 clamp(0.85rem, 3.2vw, 1.4rem); border-radius: 999px; font-weight: 600;
    background: rgba(20, 10, 16, 0.6); color: #f5ede0; border: 1px solid rgba(245, 237, 224, 0.75);
  }
  .hero-copy .btn-primary { background: #f2c14e; border-color: #f2c14e; color: #2a1408; }
  .hero-copy ul + p { margin-top: 0.6rem; }
  /* the scroll cue: a quiet chevron, no words; it drifts down a touch now and then */
  .hero-copy .cue {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
    color: rgba(245, 237, 224, 0.78); filter: drop-shadow(0 1px 2px rgba(20, 10, 16, 0.9));
  }
  .hero-copy .cue:hover { color: #f5ede0; }
  .hero-copy .cue svg { animation: cue-drift 3.2s ease-in-out 3s infinite; }
  @keyframes cue-drift { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }
  @media (prefers-reduced-motion: reduce) { .hero-copy .cue svg { animation: none; } }
  .hero-copy :focus-visible { outline: 3px solid #f2c14e; outline-offset: 3px; }
  /* on a phone the display title comes down a step, so it sits in the dark clearing, clear of the top skulls */
  @media (max-width: 30rem) {
    .hero-copy { --t: clamp(2rem, 9.2vw, 3.2rem); }
    .hero-copy h1 { font-size: 1.125rem; margin-top: 0.7rem; }
    .hero-copy ul { margin-top: 1.1rem; }
  }
  /* where the words run taller than the picture's clearing (phones), the script pins the scroll cue to the foot of
     the stage, just above the bottom border, on a dark disc so it reads over the flowers; --cue-dy undoes the shift
     the words' box takes, so the cue stays put */
  .hero-wrap.cue-pin .hero-copy > p:has(> .text-link) {
    position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 100%;
    bottom: calc(var(--cue-b, 3rem) + env(safe-area-inset-bottom, 0px));
    /* held back by the words' shift with translate, which moves it without a layout shift */
    translate: 0 calc(var(--cue-dy, 0px) * -1);
  }
  .hero-wrap.cue-pin .hero-copy .cue { background: rgba(18, 12, 16, 0.72); border: 1px solid rgba(245, 237, 224, 0.4); filter: none; }

  /* the title belongs to the picture: it stays hidden (opacity only, so it is still in the page for screen readers
     and search) through the dark start and the curtain, then fades in and settles a touch just before the rest rises */
  .hero-wrap.js .hero-copy > .hero-title {
    opacity: 0; transform: translateY(10px);
    transition: opacity 1.3s ease, transform 2.4s cubic-bezier(.2, .7, .2, 1);
  }
  .hero-wrap.on .hero-copy > .hero-title { opacity: 1; transform: none; }
  .hero-wrap.js.reduce .hero-copy > .hero-title { opacity: 1; }
  .hero-wrap.js .hero-copy > :not(.hero-title) {
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
  }
  .hero-wrap.on .hero-copy > :not(.hero-title) { opacity: 1; transform: none; pointer-events: auto; }
  .hero-wrap.on .hero-copy > :nth-child(3) { transition-delay: 0.2s; }
  .hero-wrap.on .hero-copy > :nth-child(4) { transition-delay: 0.4s; }
  .hero-wrap.on .hero-copy > :nth-child(5) { transition-delay: 0.6s; }
  .hero-wrap.js.reduce .hero-copy > * { transform: none; transition: none; }

  /* over the photograph: a soft local darkening behind the words, never a box. It hangs off the stage, laid on
     the words' own grid cells, so it can reach past them without their box overflowing */
  .hero-copy::before, .hero-copy::after {
    content: ''; position: absolute; pointer-events: none; z-index: -1;
    font-size: var(--t); transition: opacity 2s ease; will-change: opacity;
  }
  /* on the picture: behind every line, the title down to the scroll cue */
  .hero-copy::before {
    grid-area: 1 / 1 / 5 / 2; inset: -0.3em -0.5em -0.3em;
    background: radial-gradient(closest-side, rgba(20, 10, 16, 0.72), rgba(20, 10, 16, 0.46) 55%, rgba(20, 10, 16, 0));
  }
  /* on the closed curtain: a deeper, wider glow behind the title, so it reads over the flowers from the first
     frame; a burnt marigold shade, not plum: dark plum over yellow petals turns olive */
  .hero-copy::after {
    grid-area: 1 / 1 / 2 / 2; inset: -0.55em -0.8em -0.65em;
    background: radial-gradient(closest-side, rgba(46, 14, 6, 0.8), rgba(52, 16, 6, 0.66) 45%, rgba(60, 20, 6, 0.28) 75%, rgba(60, 20, 6, 0));
  }
  .hero-wrap.js:not(.on) .hero-copy::before { opacity: 0; }
  /* the deeper glow was for the title over the closed curtain; the title no longer shows there */
  .hero-wrap .hero-copy::after { opacity: 0; }
  .hero-wrap.reduce .hero-copy::before, .hero-wrap.reduce .hero-copy::after { transition: none; }.ha {
    --ha-ease: cubic-bezier(.22, .9, .3, 1);
    --ha-land: cubic-bezier(.3, 1.2, .5, 1);
    display: grid; justify-items: center;
  }

  /* the scene shows the middle of the painted altar: all of it on wide screens, its middle on phones, where its
     flowered sides would only shrink it. --c is how much of the picture is cut from each side, --k the scale that
     follows; every piece is placed by the picture's own shares through them */
  .ha-scene {
    --c: 0; --k: 1; --ar: 1.5;
    position: relative; width: 100%; aspect-ratio: var(--ar); container-type: inline-size; isolation: isolate;
    clip-path: inset(0);
  }
  @media (max-width: 71.99rem) { .ha-scene { --c: .08; --k: 1.1905; --ar: 1.2598; } }
  @media (max-width: 39.99rem) { .ha-scene { --c: .17; --k: 1.5152; --ar: .9902; } .ha-edge { display: none !important; } }
  /* sized to the screen's height, so with the section at the top the heading, the altar, her name and all three
     steps are seen at once; --rest is everything on that screen but the altar */
  .ha-scene { --rest: calc(2 * var(--sec-y, 4rem) + 31rem); width: max(min(100%, 15rem), min(100%, 64rem, (100svh - var(--rest)) * var(--ar))); }
  @media (min-width: 48rem) { .ha-scene { --rest: calc(2 * var(--sec-y, 4rem) + 26rem); } }
  @media (max-width: 71.99rem) and (min-width: 40rem) { .ha-edge { display: none !important; } }
  .ha-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; z-index: 0; }
  /* every edge melts into the night, so the altar has no box round it: the sides and top fade, and the floor
     fades deeper, where her name comes up under it */
  .ha-scene::after {
    content: ''; position: absolute; inset: 0; z-index: 200; pointer-events: none;
    background:
      linear-gradient(to right, var(--how-night), transparent 9%, transparent 91%, var(--how-night)),
      linear-gradient(to bottom, var(--how-night), transparent 8%, transparent 84%, var(--how-night));
  }

  /* before the candles, the altar waits in the dark, and her portrait comes into a little light of its own */
  .ha-dim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .72;
    background: radial-gradient(ellipse calc(22% * var(--k)) 30% at 50% 27%, rgb(18 12 16 / 0) 30%, rgb(18 12 16 / .55) 70%, rgb(18 12 16 / .9));
    transition: opacity 1.8s ease .3s;
  }
  .ha[data-step="2"] .ha-dim, .ha[data-step="3"] .ha-dim { opacity: 0; }

  .ha-portrait {
    position: absolute; z-index: 2; display: block; max-width: none; object-fit: cover;
    left: calc((var(--x) - var(--c)) * var(--k) * 100%); top: calc(var(--y) * 100%);
    width: calc(var(--w) * var(--k) * 100%); height: calc(var(--h) * 100%);
    opacity: 0; transform: scale(1.06); filter: brightness(.4);
    transition: opacity .3s ease, transform .3s ease, filter .3s ease;
  }

  .ha-it {
    position: absolute; left: calc((var(--x) - var(--c)) * var(--k) * 100%); top: calc(var(--y) * 100%);
    width: calc(var(--w) * var(--k) * 100%); translate: -50% -100%; display: block; pointer-events: none;
  }
  .ha-it > img { display: block; width: 100%; height: auto; max-width: none; position: relative; }

  /* hidden: each piece waits where it will come from; going back a step, things leave quickly and together */
  .ha-it, .ha-name > p { opacity: 0; transition: opacity .3s ease, transform .3s ease; }
  .ha-offer, .ha-skull { transform: translateY(-7cqw); }
  .ha-candle { transform: translateY(1.5cqw); }
  .ha-vela { transform: translateY(1cqw) scale(.94); }
  .ha-petal { transform: translate(calc(var(--fx) * 1cqw), -30cqw) rotate(calc(var(--r) - 160deg)); }
  .ha-name > p { transform: translateY(8px); }

  /* shown: what belongs to this step or an earlier one, each after its own delay */
  .ha:is([data-step="1"], [data-step="2"], [data-step="3"]) .ha-portrait {
    opacity: 1; transform: none; filter: none;
    transition: opacity 1.4s ease .15s, transform 2.6s var(--ha-ease) .15s, filter 2.4s ease .15s;
  }
  .ha:is([data-step="1"], [data-step="2"], [data-step="3"]) [data-s="1"],
  .ha:is([data-step="2"], [data-step="3"]) [data-s="2"],
  .ha[data-step="3"] [data-s="3"] {
    opacity: 1; transform: none;
    transition: opacity .6s ease var(--d), transform 1s var(--ha-ease) var(--d);
  }
  .ha:is([data-step="2"], [data-step="3"]) :is(.ha-offer, .ha-skull)[data-s="2"] { transition: opacity .4s ease var(--d), transform .8s var(--ha-land) var(--d); }
  .ha:is([data-step="2"], [data-step="3"]) .ha-petal { transform: rotate(var(--r)); transition: opacity .5s ease var(--d), transform 2.2s cubic-bezier(.25, .6, .3, 1) var(--d); }
  .ha[data-step="3"] .ha-vela { transition: opacity .9s ease var(--d), transform 1.2s var(--ha-ease) var(--d); }

  /* a flame: it catches at the wick a moment after its candle stands, and its pool of light grows with it; the
     flicker itself runs on the flame and the glow inside, so it never fights this */
  .ha-fw { position: absolute; inset: 0; transform-origin: 50% 27%; transform: scale(.15); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
  .ha:is([data-step="2"], [data-step="3"]) .ha-candle .ha-fw,
  .ha[data-step="3"] .ha-vela .ha-fw {
    transform: none; opacity: 1;
    transition: opacity .5s ease calc(var(--d) + .5s), transform .8s var(--ha-land) calc(var(--d) + .5s);
  }
  .ha-flame { position: absolute; inset: 0; width: 100%; height: auto; max-width: none; transform-origin: 50% 27%; }
  /* its pool of light is a shadow round a point, not a box, so light near the scene's sides takes no room and
     never pushes the page wider; --R is how far it reaches, in the scene's width */
  .ha-glow {
    --R: calc(var(--w) * var(--k) * 280cqw);
    position: absolute; left: 50%; top: 15%; width: 2px; height: 2px; margin: -1px; border-radius: 50%;
    opacity: .8; pointer-events: none;
    background: rgba(255, 186, 96, .3);
    box-shadow: 0 0 calc(var(--R) * 1.5) calc(var(--R) * .22) rgba(255, 160, 70, .26);
  }
  .ha-vela .ha-fw { transform-origin: 50% 40%; }
  .ha-vela .ha-glow { --R: calc(var(--w) * var(--k) * 210cqw); top: 36%; }

  /* a name written on the calaverita's forehead band */
  .ha-skull-name {
    position: absolute; left: 12%; right: 12%; top: 19.3%; height: 17%; display: grid; place-items: center;
    font-family: var(--how-display); font-style: italic; font-size: calc(var(--k) * 1.12cqw); line-height: 1; color: #7a1d43; white-space: nowrap;
  }

  /* her name under the altar, in the hero's display face */
  .ha-name { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; margin-top: clamp(-2.75rem, -4vw, -1rem); }
  .ha-name > p { margin: 0; }
  .ha-who-name { font-family: var(--how-display); font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.1; color: var(--how-cream);
    text-shadow: 0 0 .4rem var(--how-night), 0 0 1rem var(--how-night), 0 0 1.75rem var(--how-night); }
  .ha-years { margin-top: .2rem !important; font-family: var(--how-display); font-style: italic; font-size: 1.25rem; letter-spacing: .02em; color: var(--how-gold); }
  .ha-visited { margin-top: .5rem !important; font-size: .9375rem; line-height: 1.4; color: var(--how-muted); font-style: italic; max-width: 44ch; }

  /* the steps: one marigold string through all three; each flower opens as its step is reached, and the string
     fills to it. Each step but the last draws the piece of string to the next flower */
  .ha-steps {
    --g: 1.75rem;
    list-style: none; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; padding: 0; width: 100%; max-width: 60rem;
    display: grid; gap: var(--g);
  }
  .ha-steps li { position: relative; min-width: 0; }
  .ha-steps li:not(:last-child)::before, .ha-steps li:not(:last-child)::after { content: ''; position: absolute; pointer-events: none; }
  .ha-steps li::before { background: rgb(245 237 224 / .16); }
  .ha-steps li::after { background: var(--how-gold); transition: transform 1.2s var(--ha-ease) .2s; }
  .ha-step {
    position: relative; z-index: 1; display: grid; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0;
    background: none; color: var(--how-cream); font: inherit; text-align: left; cursor: pointer; border-radius: .375rem;
  }
  .ha-mark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; }
  .ha-mark img {
    width: 100%; height: auto; display: block; filter: grayscale(.85) brightness(.55); transform: scale(.72);
    transition: filter .6s ease, transform .9s var(--ha-land);
  }
  .ha-tt { font-family: var(--how-display); font-style: italic; font-size: 1.5rem; line-height: 1.15; color: rgb(245 237 224 / .6); transition: color .4s ease; }
  .ha-num { font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: .6em; vertical-align: .2em; color: var(--how-gold); margin-right: .35em; }
  .ha-tb { margin-top: .35rem; color: var(--how-muted); font-size: .9375rem; line-height: 1.5; max-width: 32ch; }
  .ha-step:hover .ha-tt,
  .ha:is([data-step="1"], [data-step="2"], [data-step="3"]) [data-n="1"] .ha-tt,
  .ha:is([data-step="2"], [data-step="3"]) [data-n="2"] .ha-tt,
  .ha[data-step="3"] [data-n="3"] .ha-tt { color: var(--how-cream); }
  .ha-step:hover .ha-tt { text-decoration: underline; text-decoration-color: rgb(242 193 78 / .6); text-underline-offset: .2em; }
  /* a reached step's flower is open and in colour, and the string up to it is gold */
  .ha:is([data-step="1"], [data-step="2"], [data-step="3"]) [data-n="1"] .ha-mark img,
  .ha:is([data-step="2"], [data-step="3"]) [data-n="2"] .ha-mark img,
  .ha[data-step="3"] [data-n="3"] .ha-mark img { filter: none; transform: none; }
  .ha:is([data-step="2"], [data-step="3"]) [data-n="1"]::after,
  .ha[data-step="3"] [data-n="2"]::after { transform: none !important; }

  /* phones: the string runs down the left through the flowers, the words beside them */
  @media (max-width: 47.99rem) {
    .ha-steps { --g: 1rem; max-width: 30rem; }
    .ha-tb { max-width: none; }
    .ha-step { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: .9rem; }
    .ha-mark { grid-row: 1 / 3; align-self: start; margin-top: -.6rem; }
    .ha-steps li::before, .ha-steps li::after { left: 1.625rem; width: 2px; margin-left: -1px; top: 1rem; height: calc(100% + var(--g)); }
    .ha-steps li::after { transform-origin: top; transform: scaleY(0); }
  }
  /* wider: three columns, the string across their tops */
  @media (min-width: 48rem) {
    .ha-steps { --g: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ha-step { justify-items: center; text-align: center; }
    .ha-tb { margin-inline: auto; }
    .ha-steps li::before, .ha-steps li::after { top: 1.625rem; height: 2px; margin-top: -1px; left: 50%; width: calc(100% + var(--g)); }
    .ha-steps li::after { transform-origin: left; transform: scaleX(0); }
    .ha-tt { margin-top: .4rem; font-size: 1.75rem; }
    .ha-tb { font-size: 1rem; max-width: 36ch; }
  }

  /* driven by the scroll (script on, motion allowed): only the step reached is lit and the rest dim, the string
     fills as far as the page has scrolled (--f per piece, 0 to 1, no easing of its own), and a "Scroll" cue waits
     above the first step until the page moves. Without script, or with reduced motion, none of this applies and
     all three steps show at once */
  .ha-cue { display: none; }
  .ha-live .ha-cue {
    display: flex; align-items: center; justify-content: center; gap: .3rem; margin: 0; pointer-events: none;
    height: clamp(1.25rem, 2.5vw, 1.75rem); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--how-gold);
    opacity: var(--cue, 1); transition: opacity .4s ease;
  }
  .ha-live .ha-cue svg { animation: ha-nudge 1.6s ease-in-out infinite; }
  @keyframes ha-nudge { 50% { translate: 0 3px; } }
  .ha-live .ha-steps { margin-top: 0; }
  .ha-tb { transition: opacity .4s ease; }
  .ha-live .ha-steps li:not(.on) .ha-tt { color: rgb(245 237 224 / .38); }
  .ha-live .ha-steps li:not(.on) .ha-tb { opacity: .7; }
  .ha-live .ha-steps li:not(.on) .ha-mark img { filter: grayscale(.85) brightness(.55); transform: scale(.72); }
  .ha-live .ha-steps li.on .ha-tt { color: var(--how-cream); }
  .ha-live .ha-steps li.on .ha-mark img { filter: none; transform: none; }
  @media (max-width: 47.99rem) { .ha-live .ha-steps li::after { transform: scaleY(var(--f, 0)) !important; transition: none; } }
  @media (min-width: 48rem) { .ha-live .ha-steps li::after { transform: scaleX(var(--f, 0)) !important; transition: none; } }
  .how .ha-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.6rem;
    border-radius: 999px; background: var(--how-gold); color: #2a1408; font-weight: 600; text-decoration: none;
    transition: background-color .2s ease;
  }
  .how .ha-cta:hover { background: #f6cf6d; }

  @media (prefers-reduced-motion: reduce) {
    .ha *, .ha-it, .ha-dim, .ha-portrait { transition: none !important; animation: none !important; }
  }@font-face { font-family: 'Linden Hill'; font-style: italic; font-weight: 400; font-display: swap; src: url('/hero/fonts/LindenHill-400i.woff2') format('woff2'); }
  .how {
    --how-night: var(--ground, #140a10);
    --how-plum: #1d0f1a;
    --how-cream: #f5ede0;
    --how-muted: #cdb9a6;
    --how-gold: #f2c14e;
    --how-marigold: #f08a1c;
    --how-magenta: #c8246b;
    --how-display: 'Linden Hill', Georgia, serif;
    position: relative;
    isolation: isolate;
    color: var(--how-cream);
    --sec-y: clamp(4rem, min(8vw, 9svh), 6.5rem);
    padding-block: var(--sec-y);
    /* the site header floats over the top padding, so the "#how" jump puts the section at the very top of the screen */
    scroll-margin-top: 0;
  }
  /* the night runs edge to edge out of the page column as a shadow, which takes no room, so nothing in the
     section reaches past the column or makes the page wider; the clip keeps it to the section's own height */
  .how { background: var(--how-night); box-shadow: 0 0 0 100vmax var(--how-night); clip-path: inset(0 -100vmax); }
  .how-inner { max-width: 72rem; margin: 0 auto; }
  /* pinned, the stage sticks --pin from the top and travels the runway --run: a block after it, inside the track's
     own content box (a sticky box moves only within that, so padding or a margin would give it no room) */
  .how-track:has(.ha-live)::after { content: ''; display: block; height: var(--run, 0px); }
  .how-track:has(.ha-live) .how-stage { position: sticky; top: var(--pin, 0px); }
  .how-go { display: grid; justify-items: center; margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
  .how-title {
    font-family: var(--how-display); font-style: italic; font-weight: 400;
    font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 1.05; margin: 0 0 clamp(.75rem, 1.5vw, 1rem);
    text-align: center; text-wrap: balance;
  }
  .how a { color: var(--how-gold); }
  .how :focus-visible { outline: 2px solid var(--how-gold); outline-offset: 3px; }/* full width out of the page column, so its night and spacing match its siblings; the frame inside is the
     site's own 64rem column */
  :root:has(.wl) { overflow-x: clip; }
  .wl {
    --wl-cobalt-deep: #13296a;
    --wl-grout: #e6dac2;
    --wl-ease: cubic-bezier(.2, .75, .25, 1);
    position: relative; overflow: clip; margin-inline: calc(50% - 50vw);
    padding-block: var(--sec-y, clamp(4rem, min(8vw, 9svh), 6.5rem));
  }
  .wl-frame { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
  @media (min-width: 40rem) { .wl-frame { padding: 0 1.5rem; } }

  /* the same head, lede and padding scale as "The week they come home", so the two sit as siblings */
  .wl-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
  .wl-title { margin: 0; font: italic 400 clamp(2.25rem, 5.5vw, 3.5rem)/1.05 var(--display); text-wrap: balance; }
  .wl-lede { margin: .85rem auto 0; max-width: 32rem; color: var(--cream-dim); font-size: 1.0625rem; text-wrap: pretty; }

  /* the tile panel: a cream edge, a cenefa band of small cobalt tiles, then the wall; its edges sit on the frame */
  .wl-panel {
    --band: clamp(14px, 2.4vw, 28px);
    position: relative; margin: 0 auto; max-width: 56rem; padding: var(--band);
    border: 3px solid #efe4cc; border-radius: 4px;
    background: url('/home/colour/cenefa.svg') 0 0 / var(--band) var(--band) round;
    box-shadow: 0 2.5rem 4rem -1.5rem rgb(0 0 0 / .7);
  }
  .wl-wall { list-style: none; margin: 0; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--wl-grout); }
  @media (min-width: 45rem) { .wl-wall { grid-template-columns: repeat(5, 1fr); } }
  .wl-wall li { display: block; min-width: 0; }

  /* the tile is a button: everything the site gives buttons is taken off it */
  .wl-wall .wl-tile {
    all: unset; box-sizing: border-box; display: block; position: relative; width: 100%; aspect-ratio: 1; cursor: pointer;
    container-type: inline-size; -webkit-tap-highlight-color: transparent;
    transition: opacity .45s ease, transform .75s var(--wl-ease);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .wl-wall .wl-tile:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; z-index: 2; }
  .wl-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--wl-ease); transform: perspective(900px) rotateY(0); }
  .wl-tile[aria-pressed="true"] .wl-inner { transform: perspective(900px) rotateY(180deg); }
  @media (hover: hover) and (pointer: fine) {
    .wl-tile:hover .wl-inner { transform: perspective(900px) rotateY(180deg); }
  }
  .wl-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
  /* glaze: a soft sheen across the top and a slightly darker pooled edge */
  .wl-face::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(150deg, rgb(255 255 255 / .22) 0%, rgb(255 255 255 / 0) 38%, rgb(0 0 0 / 0) 70%, rgb(40 20 10 / .1) 100%);
    box-shadow: inset 0 0 0 1px rgb(60 40 20 / .14), inset 0 -2px 3px rgb(60 30 10 / .12); }
  /* one glaze for every tile: cobalt on cream in front, cream on cobalt behind */
  .wl-front { background: #f7f0e0 url('/home/colour/front-azul.svg') center / 100% 100% no-repeat; }
  .wl-front img { position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; max-width: none; object-fit: contain; transform: translate(-50%, -50%);
    filter: drop-shadow(0 .25rem .2rem rgb(30 12 6 / .35)); }
  .wl-back { transform: rotateY(180deg); display: grid; place-items: center; padding: 24% 13% 21%;
    background: var(--wl-cobalt-deep) url('/home/colour/back-azul.svg') center / 100% 100% no-repeat; color: #fff4d6; }
  .wl-text { display: block; text-align: center; text-wrap: balance; }
  .wl-nm { display: block; margin-bottom: .35em; font-weight: 700; font-size: clamp(.5625rem, 7.2cqi, .8125rem); line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 244 214 / .78); }
  .wl-ln { display: block; font: italic 400 clamp(.75rem, 11cqi, 1.5rem)/1.08 var(--display); }

  .wl-close { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
  .wl-close p { margin: 0; color: var(--cream-dim); font-size: 1.0625rem; }
  .wl-cta { min-height: 48px; padding-inline: 1.6rem; }

  /* settle in: tiles are laid one by one when the wall comes into view (only once the script is ready for it) */
  .wl-wall[data-armed]:not(.in) .wl-tile { opacity: 0; transform: translateY(-16px) perspective(700px) rotateX(-24deg) scale(.94); }

  @media (prefers-reduced-motion: reduce) {
    .wl-wall .wl-tile, .wl-inner { transition: none !important; }
    .wl-wall[data-armed]:not(.in) .wl-tile { opacity: 1; transform: none; }
  }/* full width out of the page column, so the string runs edge to edge; the frame inside is the site's column */
  :root:has(.wk) { overflow-x: clip; }
  .wk {
    --wk-cord: #6b5a57;
    position: relative; overflow: clip; margin-inline: calc(50% - 50vw);
    padding-block: var(--sec-y, clamp(4rem, min(8vw, 9svh), 6.5rem));
  }
  .wk-mark { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
  .wk-frame { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
  @media (min-width: 40rem) { .wk-frame { padding: 0 1.5rem; } }

  /* the same head, lede and padding scale as "Leave what they loved", so the two sit as siblings */
  .wk-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
  .wk-title { margin: 0; font: italic 400 clamp(2.25rem, 5.5vw, 3.5rem)/1.05 var(--display); text-wrap: balance; }
  .wk-lede { margin: .85rem auto 0; max-width: 32rem; color: var(--cream-dim); font-size: 1.0625rem; text-wrap: pretty; }
  .wk-count { margin: .5rem auto 0; color: var(--cream); font-size: 1.0625rem; font-weight: 600; }

  /* the string: seven banners hung on one cord; phones hang it in two rows, 4 then 3 */
  .wk-row { list-style: none; margin: 0 auto; padding: 0; display: grid; --gap: clamp(.375rem, 1.4vw, 1rem); gap: 1.75rem var(--gap);
    grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 26rem; }
  .wk-row > li { grid-column: span 2; }
  .wk-row > li:nth-child(5) { grid-column: 2 / span 2; }
  @media (min-width: 48rem) {
    .wk-row { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 56rem; gap: 0 var(--gap); }
    .wk-row > li, .wk-row > li:nth-child(5) { grid-column: auto; }
  }
  .wk-night { position: relative; min-width: 0; }
  /* the cord: every banner draws it across the whole width at its fold, so each row is one string */
  .wk-night::before { content: ''; position: absolute; z-index: 0; top: var(--cord-y, 0px); left: -100vw; right: -100vw; height: 1.5px; background: var(--wk-cord); pointer-events: none; }

  /* the banner is a button: everything the site gives buttons is taken off it */
  .wk-row .wk-pick, .wk-row .wk-pick:hover, .wk-row .wk-pick:active {
    position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 0 0 .25rem;
    border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  .wk-row .wk-pick:focus-visible { outline: 3px solid var(--marigold); outline-offset: 4px; border-radius: 6px; }

  /* the banner hangs from the cord at its fold and swings about that point (--a is set by the sway) */
  .wk-banner { display: block; position: relative; width: 100%; max-width: 8.5rem; }
  .wk-hang { display: block; transform: rotate(var(--a, 0deg)); transform-origin: 50% 4.6%; will-change: transform; }
  .wk-paper { display: block; transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .55s ease; transform-origin: 50% 0; }
  .wk-paper svg { display: block; width: 100%; height: auto; overflow: visible; }
  .wk-night:not(.is-shown):not(.is-tonight) .wk-paper { filter: saturate(.8) brightness(.62); }
  .wk-night.is-shown .wk-paper { transform: translateY(-8px) scale(1.04); }

  /* the candle under each banner: tonight's burns, and the one you pick lights while it is picked */
  .wk-candle { display: block; position: relative; width: clamp(1.15rem, 2.4vw, 1.9rem); aspect-ratio: 203 / 453; margin-top: .35rem; }
  .wk-candle img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
  .wk-candle .wk-body { filter: brightness(.55) saturate(.8); transition: filter .5s ease; }
  .wk-candle .wk-flame { opacity: 0; transform-origin: 50% 24%; transition: opacity .45s ease; }
  .is-shown .wk-candle .wk-body, .is-tonight .wk-candle .wk-body { filter: none; }
  .is-shown .wk-candle .wk-flame, .is-tonight .wk-candle .wk-flame { opacity: 1; }
  .wk.wk-flick .wk-candle .wk-flame { animation: wk-flick 2.6s ease-in-out infinite; }
  .wk-night:nth-child(2n) .wk-candle .wk-flame { animation-duration: 3.1s; animation-delay: -.8s; }
  .wk-night:nth-child(3n) .wk-candle .wk-flame { animation-duration: 2.2s; animation-delay: -1.4s; }
  @keyframes wk-flick { 0%, 100% { transform: scale(1, 1) rotate(0); } 22% { transform: scale(.96, 1.05) rotate(-1.5deg); } 47% { transform: scale(1.03, .95) rotate(1deg); } 71% { transform: scale(.98, 1.03) rotate(-.6deg); } }

  /* the one caption: the picked night, centred under the string */
  .wk-caption { margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; max-width: 30rem; min-height: 7.5rem; text-align: center; }
  .wk-cap-tag { display: inline-flex; align-items: center; gap: .45rem; min-height: 1.4em; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    /* the night's colour, lifted toward cream just enough that the small words pass AA on the night (purple and pink
       alone do not); the diamond keeps the pure colour */
    color: color-mix(in oklab, var(--day, var(--cream)), var(--cream) 32%); }
  .wk-cap-tag::before { content: ''; width: .5rem; height: .5rem; rotate: 45deg; background: var(--day, var(--cream)); }
  .wk-cap-tag:empty::before { display: none; }
  .wk-cap-date { display: block; margin-top: .2rem; font: italic 400 clamp(1.75rem, 3.6vw, 2.25rem)/1.1 var(--display); }
  .wk-cap-line { display: block; margin: .4rem auto 0; max-width: 26rem; color: var(--cream-dim); text-wrap: balance; }
  .wk-cap-in { animation: wk-cap-in .45s cubic-bezier(.2, .8, .2, 1); }
  @keyframes wk-cap-in { from { opacity: 0; transform: translateY(6px); } }

  .wk-note { margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 34rem; text-align: center; color: var(--cream-faint); font-size: .8125rem; line-height: 1.5; text-wrap: balance; }

  @media (prefers-reduced-motion: reduce) {
    .wk-paper, .wk-candle .wk-flame, .wk-candle .wk-body { transition: none !important; }
    .wk-candle .wk-flame, .wk-cap-in { animation: none !important; }
  }/* full width out of the page column: on phones the wreath's sides run off the screen's edges, as the hero's
     border does */
  :root:has(.cr) { overflow-x: clip; }
  .cr {
    --cr-ease: cubic-bezier(.2, .75, .25, 1);
    --cr-land: cubic-bezier(.3, 1.2, .5, 1);
    position: relative; overflow: clip; isolation: isolate; margin-inline: calc(50% - 50vw);
    padding-block: var(--pad, clamp(5rem, 12vw, 9rem)) var(--padB, var(--pad, clamp(5rem, 12vw, 9rem)));
  }
  .cr-frame { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
  @media (min-width: 40rem) { .cr-frame { padding: 0 1.5rem; } }
  .cr-ring { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

  /* the words, in the wreath's clearing */
  .cr-copy { position: relative; z-index: 3; max-width: 38rem; margin: 0 auto; text-align: center; padding-inline: clamp(1rem, 6vw, 2rem); }
  .cr-title { margin: 0; font: italic 400 clamp(1.75rem, 1rem + 3.6vw, 3.75rem)/1.06 var(--display); text-wrap: balance;
    text-shadow: 0 0 .5rem var(--ground), 0 0 1.25rem var(--ground); }
  .cr-lead { margin: 1rem auto 0; max-width: 28rem; color: var(--cream-dim); font-size: 1.125rem; text-wrap: balance;
    text-shadow: 0 0 .4rem var(--ground), 0 0 1rem var(--ground); }
  .cr-go { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
  .cr-cta { min-height: 48px; padding-inline: 2rem; }
  .cr-free { margin: .85rem auto 0; max-width: 24rem; font-size: .9375rem; color: var(--cream-dim); text-wrap: balance;
    text-shadow: 0 0 .4rem var(--ground); }

  /* a flower of the wreath: placed by the script in px; its own turn lives on the image, its flight on the box */
  .cr-f { position: absolute; translate: -50% -50%; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
  .cr-f > img { display: block; width: 100%; height: auto; max-width: none; rotate: var(--r); filter: drop-shadow(0 .35rem .45rem rgb(0 0 0 / .45)); }
  .cr-f.back > img { filter: brightness(.72) saturate(.95) drop-shadow(0 .3rem .4rem rgb(0 0 0 / .5)); }
  /* two calaveras sit in the wreath, at ten and two o'clock, the way they sit in the hero's border */
  .cr-f.sk > img { filter: drop-shadow(0 .4rem .5rem rgb(0 0 0 / .55)); }
  .cr-f.turn > img { animation: cr-turn .9s var(--cr-land); }
  @keyframes cr-turn { 40% { transform: rotate(32deg) scale(1.07); } }

  /* the flight in: each flower waits off its nearest edge, turned, and comes to its place; the two halves meet at
     the top and the foot of the wreath */
  .cr-f { transition: transform 1.5s var(--cr-ease) var(--d), opacity .5s ease var(--d); }
  .cr[data-armed]:not(.in) .cr-f { transform: translate(var(--dx), var(--dy)) rotate(-110deg); opacity: 0; }
  .cr.still .cr-f, .cr.still .cr-c, .cr.still .cr-fw { transition: none; }

  /* candles in the foot of the wreath; they stand when it closes, then catch */
  .cr-c { position: absolute; translate: -50% -100%; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: opacity .8s ease 1.5s, transform 1s var(--cr-ease) 1.5s; }
  .cr-c > img { display: block; width: 100%; height: auto; max-width: none; }
  .cr[data-armed]:not(.in) .cr-c { opacity: 0; transform: translateY(12px); }
  .cr-fw { position: absolute; inset: 0; transform-origin: 50% 27%; transition: opacity .4s ease 2.2s, transform .8s var(--cr-land) 2.2s; }
  .cr[data-armed]:not(.in) .cr-fw { opacity: 0; transform: scale(.15); }
  .cr-flame { position: absolute; inset: 0; display: block; width: 100%; height: auto; max-width: none; transform-origin: 50% 27%; }
  /* a small pool of warm light at the wick, a shadow round a point so it takes no room */
  .cr-glow { position: absolute; left: 50%; top: 14%; width: 2px; height: 2px; margin: -1px; border-radius: 50%; pointer-events: none;
    opacity: .8; background: rgb(255 186 96 / .3); box-shadow: 0 0 2.4em .5em rgb(255 160 70 / .22); }
  /* tap a candle and it goes out and catches again, as the hero's candles do */
  .cr-c.relit .cr-fw { transition: opacity .3s ease, transform .6s var(--cr-land); }
  .cr-c.out .cr-fw { opacity: 0; transform: scale(.15); transition: opacity .18s ease, transform .2s ease; }

  /* the words come up as the wreath closes */
  .cr-copy > * { transition: opacity .9s ease, transform 1.1s var(--cr-ease); }
  .cr[data-armed]:not(.in) .cr-copy > * { opacity: 0; transform: translateY(12px); }
  .cr.in .cr-copy > :nth-child(1) { transition-delay: .7s; }
  .cr.in .cr-copy > :nth-child(2) { transition-delay: .95s; }
  .cr.in .cr-copy > :nth-child(3) { transition-delay: 1.15s; }
  .cr.in .cr-copy > :nth-child(4) { transition-delay: 1.3s; }

  @media (prefers-reduced-motion: reduce) {
    .cr-f, .cr-c, .cr-fw, .cr-copy > * { transition: none !important; }
    .cr-f.turn > img { animation: none; }
  }