/*
 * TheJainProject — the teaser site.
 *
 * One stylesheet, linked, never inlined: the CSP has no 'unsafe-inline', and a
 * page that silently loses its CSS on a strict header is a page nobody notices
 * is broken.
 *
 * The design is two rooms. The STAGE is dark and lit — a feed you swipe, where
 * the questions glow. Everything below it is the reading room: warmer, calmer,
 * and set for people who will read it on a phone in daylight, some of them over
 * sixty. Type is deliberately larger than a startup landing page would use.
 *
 * Loaded AFTER the platform's geo CSS (see views/layout.php) so the overrides at
 * the foot of this file can quieten the vendored address block without anyone
 * editing a vendored file.
 */

:root {
    color-scheme: dark light;

    /* The campaign palette — locked in marketing/launch/00-strategy-and-calendar.md §3 */
    --cream:  #FBF7F2;
    --ink:    #111827;
    --orange: #FF6600;
    --blue:   #005C94;
    --amber:  #D97706;

    /* The stage. Dark, so the glow has something to happen against. */
    --night:      #0A0D16;
    --night-2:    #121728;
    --night-edge: #1E2438;
    --on-night:   #F4F1EC;
    --on-night-2: #A7AEC4;

    /* Lit versions of the two dots. #005C94 is too dark to glow on near-black. */
    --orange-lit: #FF7A1A;
    --blue-lit:   #3FA9F5;

    /* ---------------------------------------------------------------------
     * The vendored address block and map picker are written against the
     * platform's design system. These are that contract, restated in this
     * palette — without them the map renders in its own fallback dark-gold and
     * looks like it came off another site.
     * ------------------------------------------------------------------- */
    --m-master:        #D97706;
    --m-master-soft:   #FDF1E3;
    --m-master-strong: #9A5408;

    --primary:       var(--m-master);
    --primary-soft:  var(--m-master-soft);
    --primary-hover: var(--m-master-strong);

    --text:    #111827;
    --muted:   #6B6257;
    --surface: #FFFFFF;

    --border:        #E6DED3;
    --border-strong: #CDC2B3;

    --focus-ring: rgba(217, 119, 6, .38);

    --color-text-secondary: #4B5563;
    --color-text-tertiary:  #6B7280;
    --color-danger-fg:      #B42318;
    --color-success-fg:     #15803D;

    --serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, Times New Roman, serif;
    --sans:  system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;

    --bar-h: 82px;
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * The hidden attribute is only a default in the UA stylesheet, so any rule here
 * that sets display — .verdict__said is inline, .sheet is a grid — silently
 * outranks it and the element stays on screen. Making it !important means
 * el.hidden works everywhere on this site, which is what anyone writing the
 * JavaScript will reasonably assume.
 */
[hidden] { display: none !important; }

html {
    background: var(--cream);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
}

a { color: #9A5408; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
}

.skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--cream);
    padding: 12px 18px;
    z-index: 60;
}
.skiplink:focus { left: 0; }

.wrap {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 0 22px;
}
.wrap--form { max-width: 620px; }
.wrap--doc  { max-width: 680px; padding-top: 40px; }

/* ==========================================================================
   THE BAR
   ========================================================================== */

.bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--bar-h);
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: rgba(10, 13, 22, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--night-edge);
}

/* Left: the two dots, then the wordmark, lit from behind. */
.bar__mark {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: .2em;
    text-decoration: none;
    font-family: var(--serif);
    font-size: clamp(21px, 6vw, 50px);
    letter-spacing: .012em;
    white-space: nowrap;
    line-height: 1;
    font-weight: 700;
}

/*
 * The dots are measured in em, so they track the wordmark's own clamp() at
 * every width instead of needing a second set of breakpoints to agree with.
 * .62em lands them between the cap height and the full line — smaller than the
 * letters, which is right: the name is what people read, the dots are what they
 * recognise.
 *
 * The two drop-shadows are the same light the wordmark gets, in the same two
 * colours, so the lockup reads as one lit object rather than a glowing name
 * with a flat icon next to it. Lit variants, not the flat #005C94 — the poster
 * blue disappears against near-black.
 */
.bar__dots {
    flex: none;
    width: auto;
    height: .62em;
    filter: drop-shadow(0 0 7px rgba(255, 122, 26, .55))
            drop-shadow(0 0 10px rgba(63, 169, 245, .4));
}

/* What the glow layer measures itself against. */
.bar__word { position: relative; }

.bar__name {
    position: relative;
    background: linear-gradient(92deg, #FFB067 0%, #FF7A1A 28%, #FFD9A8 52%, #3FA9F5 78%, #7FD2FF 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sheen 9s ease-in-out infinite;
}

/* The blur underneath is what actually glows; the sharp copy stays legible. */
.bar__glow {
    position: absolute;
    inset: 0;
    color: var(--orange-lit);
    filter: blur(13px);
    opacity: .55;
    animation: breathe 4.5s ease-in-out infinite;
}

@keyframes sheen {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes breathe {
    0%, 100% { opacity: .38; }
    50%      { opacity: .72; }
}

/* Right: the count. */
.bar__count {
    justify-self: end;
    margin: 0;
    text-align: right;
    line-height: 1.15;
    color: var(--on-night);
}
.bar__days {
    display: block;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bar__togo {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-night-2);
}
.bar__count.count--today .bar__days,
.bar__count.count--past .bar__days { color: var(--orange-lit); }

/* ==========================================================================
   THE STAGE
   ========================================================================== */

.stage {
    position: relative;
    background:
        radial-gradient(1100px 560px at 78% -8%, rgba(255, 122, 26, .17), transparent 62%),
        radial-gradient(900px 520px at 12% 108%, rgba(63, 169, 245, .15), transparent 60%),
        var(--night);
    padding-top: var(--bar-h);
    color: var(--on-night);
    overflow: hidden;
}

/* The track. Native scroll-snap gives touch swiping, momentum and trackpads
 * for free — the JavaScript only adds arrows, keys and the counter. */
.reels {
    display: flex;
    gap: 0;
    padding: 0 0 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.reels::-webkit-scrollbar { display: none; }
.reels:focus { outline: none; }
.reels:focus-visible { outline: 3px solid var(--orange-lit); outline-offset: -6px; }

.reel {
    flex: 0 0 auto;
    width: min(78vw, 380px, calc(58vh * 9 / 16));
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.reel:first-child { margin-left: max(22px, calc(50vw - min(39vw, 190px))); }
.reel:last-child  { margin-right: max(22px, calc(50vw - min(39vw, 190px))); }

/* The card is now only the film. The question lives below it, outside. */
.reel__inner {
    position: relative;
    aspect-ratio: 9 / 16;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px 24px 28px;
    border-radius: 22px;
    border: 1px solid var(--night-edge);
    background:
        linear-gradient(170deg, rgba(255, 122, 26, .09), transparent 46%),
        var(--night-2);
    overflow: hidden;

    /*
     * No scale on the inactive cards. It used to be scale(.9), which looked
     * good but put a visible 10% gutter either side of every card — so with the
     * flex gap already at zero the strip still read as separated tiles rather
     * than as one continuous film strip. The active card is marked by light
     * instead: full opacity, full colour, and a glow.
     */
    opacity: .42;
    filter: saturate(.65);
    transition: opacity .45s ease, filter .45s ease, box-shadow .45s ease;
}

/* The card in the middle of the track is the one that is alive. */
.reel.is-active .reel__inner {
    opacity: 1;
    filter: none;
    box-shadow:
        0 0 0 1px rgba(255, 122, 26, .45),
        0 28px 70px -28px rgba(0, 0, 0, .92),
        0 0 74px -22px rgba(255, 122, 26, .5);
}

.reel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    z-index: 0;
}

/*
 * A film that is not in the middle takes no clicks: a tap on it means "bring
 * this card here", not "play this one where it is". The click then lands on the
 * card, which site.js centres — and only then does it start playing.
 */
.reel:not(.is-active) .reel__video { pointer-events: none; }
.reel:not(.is-active) .reel__inner { cursor: pointer; }

/*
 * Just enough shade at the top for the day label and the share button to stay
 * legible over a bright first frame. The old full-height scrim went when the
 * question moved out of the card — there is nothing left down there to protect,
 * and it was dimming the bottom half of every film for no reason.
 */
.reel--film .reel__inner::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 88px;
    background: linear-gradient(to bottom, rgba(6, 8, 14, .72), transparent);
    z-index: 1;
    pointer-events: none;
}

/* Top-left, above the film, with its own shadow so it survives a bright frame. */

/*
 * The caption under the card. Three-quarters of its old size, and dimmed along
 * with its card until that card is the one in the middle — so the eye is drawn
 * to one question at a time rather than to a row of competing ones.
 */
.reel__line {
    margin: 14px auto 0;
    max-width: 92%;
    text-align: center;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(15px, 3.45vw, 20px);
    line-height: 1.32;
    color: var(--on-night-2);
    opacity: .5;
    transition: opacity .45s ease, color .45s ease;
}

.reel.is-active .reel__line {
    color: var(--on-night);
    opacity: 1;
}

/* --- a day the campaign has not reached ---------------------------------- */

/*
 * There is no film in the markup for these (see Content::reels — emitting one
 * behind a blur would let anybody watch it early from the page source). The
 * blur is of a placeholder, which is also why it can be this cheap.
 */
.reel--locked .reel__inner {
    background:
        linear-gradient(160deg, rgba(63, 169, 245, .10), transparent 50%),
        var(--night-2);
}

.reel__locked {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(60% 40% at 30% 28%, rgba(255, 122, 26, .30), transparent 70%),
        radial-gradient(52% 38% at 72% 62%, rgba(63, 169, 245, .26), transparent 72%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 34px);
    filter: blur(18px);
    opacity: .85;
}

/* Italic, so a locked card reads as a note rather than as another question. */
.reel--locked .reel__line { font-style: italic; }

.reel__badge {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3;
    margin: 0;
    padding: 5px 11px;
    border: 1px solid var(--night-edge);
    border-radius: 999px;
    background: rgba(8, 11, 18, .5);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

/* A locked card is not a target for a play attempt. */
.reel--locked { cursor: default; }

/*
 * Read, not seen.
 *
 * The page's h1 — the reel used to open on a card carrying it, and now opens on
 * a question instead. Clipped to a single pixel rather than display:none or
 * visibility:hidden, both of which take it out of the accessibility tree along
 * with the layout, which would defeat the entire point of keeping it.
 */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- controls ----------------------------------------------------------- */

.stage__controls {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto;
    padding: 4px 22px 6px;
}

.stage__arrow {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--night-edge);
    background: rgba(255, 255, 255, .045);
    color: var(--on-night);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.stage__arrow:hover:not([disabled]) {
    background: rgba(255, 122, 26, .18);
    border-color: var(--orange-lit);
    transform: translateY(-1px);
}
.stage__arrow[disabled] { opacity: .3; cursor: default; }

.stage__progress {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.stage__bar {
    display: block;
    height: 100%;
    width: 4%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--orange-lit), var(--blue-lit));
    transition: width .3s ease;
}

.stage__counter {
    flex: none;
    margin: 0;
    min-width: 70px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--on-night-2);
}

.stage__scroll {
    margin: 0;
    padding: 0 0 26px;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-night-2);
    animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge {
    0%, 100% { transform: translateY(0); opacity: .55; }
    50%      { transform: translateY(5px); opacity: 1; }
}

/* ==========================================================================
   THE MODULES
   ========================================================================== */

.mods { padding: clamp(58px, 10vw, 104px) 0 0; }

.mods__h {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(27px, 5.4vw, 40px);
    line-height: 1.16;
    margin: 0 0 12px;
    max-width: 18ch;
}

.mods__intro { margin-bottom: clamp(34px, 6vw, 60px); }

.mod {
    padding: clamp(38px, 6vw, 62px) 0;
    border-top: 1px solid var(--border);
}
.mod:nth-child(odd) { background: #F7F2EA; }

.mod__wrap { max-width: 760px; }

.mod__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}
.mod__num {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--cream);
    font-size: 12px;
    letter-spacing: 0;
}

.mod__title {
    margin: 0 0 18px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(23px, 4.6vw, 33px);
    line-height: 1.25;
    max-width: 22ch;
}

.mod__line {
    margin: 0 0 15px;
    max-width: 60ch;
    color: var(--color-text-secondary);
}

/* The turn. This is the sentence the whole section exists to deliver. */
.mod__question {
    margin: 26px 0 22px;
    padding-left: 20px;
    border-left: 3px solid var(--orange);
    font-family: var(--serif);
    font-size: clamp(19px, 3.6vw, 24px);
    line-height: 1.4;
    max-width: 46ch;
    color: var(--ink);
}

.mod__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin: 0;
}

.mod__cta {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease;
}
.mod__cta:hover { background: #000; color: #fff; transform: translateY(-2px); }

.mod__days { display: flex; flex-wrap: wrap; gap: 8px; }

.mod__chip {
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.mod__chip:hover { border-color: var(--amber); color: #7A4A0B; }

/* --- a section's own films ---------------------------------------------- */

/*
 * The films are 9:16 — shot for a phone feed. An earlier square frame with
 * object-fit:cover looked tidier in the grid and quietly threw away 44% of the
 * picture, top and bottom, which on a film whose whole point is the words on it
 * is the difference between a teaser and a smudge. The frame matches the film.
 *
 * The columns are correspondingly narrow: at 9:16 a wide thumbnail is a very
 * tall one, and one section holds six of them.
 */
.modfilms {
    list-style: none;
    margin: 26px 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 20px 16px;
    max-width: 700px;
}

.modfilm { min-width: 0; }

/*
 * The frame is what the share button positions against, and what holds the
 * aspect ratio steady before the film's metadata has loaded — without it the
 * whole section reflows the moment somebody presses play.
 */
.modfilm__frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #0A0D16;
    border: 1px solid var(--border);
}

.modfilm__video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #0A0D16;
}

/* Smaller than the reel's, and only on hover/focus on a pointer device: this
 * one sits on a light page and should not compete with the words. */
.modfilm .share--reel {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
}

.modfilm__meta { margin: 9px 0 0; }

.modfilm__day {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}

.modfilm__line {
    display: block;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* --- the verdict row ---------------------------------------------------- */

.verdict { margin: 0; }

/*
 * Yes / No / Share, on ONE line at every width.
 *
 * nowrap plus min-width:0 on the children is what makes that true: without the
 * min-width a flex item refuses to shrink below the width of its own text, and
 * the row overflows the page instead of tightening. The labels then ellipsis,
 * the counts and the icon never shrink because they are the parts that still
 * have to be readable at 320px.
 */
/* Thumbs hard left, share hard right, one line always. */
.verdict__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.verdict__row .share { margin-left: auto; }

/*
 * TWO THUMBS AND A SHARE ICON. NOTHING DRESSED AS A BUTTON.
 *
 * They were pills with words in them, and under a short question that made the
 * answer the loudest thing on the card — when it is the quietest. A thumb is
 * also read faster than a sentence and needs no translating when this site
 * gets its Hindi and its Gujarati.
 *
 * Still <button>s underneath, because that is what they do; only the paint is
 * gone. Each carries the full wording as its aria-label and its title, so the
 * meaning survives for a screen reader and for anybody who hovers.
 */
.verdict__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, transform .18s ease;
}
.verdict__btn:hover { color: var(--ink); transform: translateY(-1px); }
.verdict__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.verdict__thumb { flex: none; }

/* The one the reader has already chosen, on this device. Colour alone now —
 * there is no box left to thicken, and nothing moves when it changes. */
.verdict__btn--yes:hover { color: var(--orange); }
.verdict__btn--yes.is-chosen { color: var(--orange); }
.verdict__btn--no.is-chosen { color: var(--ink); }

/* Never shrinks: the number is the reason the thumb is there. */
.verdict__count {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.verdict__said {
    margin: 10px 0 0;
    font-size: 14.5px;
    color: var(--color-success-fg);
    font-weight: 600;
}

/* --- sharing ------------------------------------------------------------ */

/* On a reel: a quiet circle in the top-right, over whatever is behind it. */
.share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

/*
 * In an answer row: the icon and nothing else.
 *
 * It used to be the 'mod' variant here — a white pill with the word "Share" in
 * it — which made it the heaviest thing on a line whose other two controls are
 * now bare thumbs. The sharebtn partial only prints the word for 'mod', so
 * this variant needs no rule to hide it.
 */
.share--row {
    flex: none;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--muted);
    transition: color .18s ease, transform .18s ease;
}
.share--row:hover { color: var(--orange); transform: translateY(-1px); }
.share--row:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* On a dark panel the same icon needs the dark palette. */
.reel__panel .share--row { color: var(--on-night-2); }
.reel__panel .share--row:hover { color: var(--orange-lit); }

.share--reel {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(8, 11, 18, .55);
    color: var(--on-night);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.share--reel:hover {
    background: rgba(255, 122, 26, .28);
    border-color: var(--orange-lit);
    color: #fff;
    transform: scale(1.06);
}

/* In a verdict row: a third button, sitting with the other two.
 * flex:none — the icon must stay a recognisable size however tight it gets. */
.share--mod {
    flex: none;
    padding: 8px clamp(10px, 1.8vw, 14px);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: clamp(12.5px, 2.1vw, 14px);
    font-weight: 600;
    /*
     * The same tight line as its two neighbours, and not the body's 1.6.
     * The row is align-items:stretch, so the tallest item sets the height of
     * all three — leaving this one inheriting a loose line made the yes/no
     * buttons stretch straight back to the size they were before they were
     * made smaller.
     */
    line-height: 1.2;
    transition: border-color .18s ease, transform .18s ease;
}
.share--mod:hover { border-color: var(--amber); color: #7A4A0B; transform: translateY(-2px); }

/* Below this the word costs more than it says; the icon alone is understood. */
@media (max-width: 620px) {
}

/*
 * Back to the reel. Fourth item in a row that must stay on one line at every
 * width, so it is built like the share button: flex:none, and the word drops
 * below 620px leaving just the arrow.
 */
.verdict__top {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px clamp(10px, 1.8vw, 13px);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: clamp(12.5px, 2.1vw, 14px);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.verdict__top:hover {
    border-color: var(--amber);
    color: #7A4A0B;
    transform: translateY(-2px);
}

@media (max-width: 620px) {
    .verdict__topword { display: none; }
    .verdict__top { padding: 8px 11px; }
}

.share__icon { flex: none; }

/* --- the share sheet ---------------------------------------------------- */

.sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: end center;
    background: rgba(6, 8, 14, .62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.sheet__panel {
    width: min(100%, 460px);
    margin: 0 0 max(0px, env(safe-area-inset-bottom));
    padding: 22px 20px 26px;
    border-radius: 20px 20px 0 0;
    background: var(--cream);
    box-shadow: 0 -18px 60px -20px rgba(0, 0, 0, .6);
}

@media (min-width: 620px) {
    .sheet { place-items: center; }
    .sheet__panel { border-radius: 18px; margin: 0; }
}

.sheet__h {
    margin: 0 0 4px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
}

.sheet__what {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--muted);
    max-width: 44ch;
}

.sheet__row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

.sheet__btn {
    flex: 1 1 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.sheet__btn--wa { background: #25D366; color: #05341A; }
.sheet__btn--fb { background: #1877F2; }
.sheet__btn--copy { background: var(--ink); }
.sheet__btn:hover { filter: brightness(1.06); color: #fff; }
.sheet__btn--wa:hover { color: #05341A; }

.sheet__note {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text-tertiary);
}

.sheet__close {
    display: block;
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--muted);
    cursor: pointer;
}

/* --- the reveal --------------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* With scripting off nothing ever adds .is-in, which would leave the whole page
 * below the reel invisible. assets/noscript.css puts it back, loaded from a
 * <noscript><link> in the layout — the CSP-safe way, since an inline <style>
 * would be dropped by default-src 'none'. */

/* ==========================================================================
   UPDATES · FORM · FOOTER
   ========================================================================== */

.faq { padding: clamp(58px, 10vw, 96px) 0 0; }

h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(24px, 4.6vw, 32px);
    margin: 0 0 10px;
}

.lede { color: var(--muted); margin: 0 0 26px; max-width: 54ch; }

/*
 * One question and its answer.
 *
 * The rule down the left, rather than a rule across the top between each pair:
 * ten of these stacked with horizontal rules read as a table of contents, and
 * the eye stops at every line. A single vertical edge holds the whole run
 * together as one conversation and leaves the questions as the only thing that
 * breaks the column.
 */
.faq__item {
    padding: 0 0 4px 20px;
    margin: 0 0 30px;
    border-left: 2px solid var(--border);
    max-width: 62ch;
}
.faq__q {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(19px, 3.2vw, 22px);
    line-height: 1.3;
    margin: 0 0 12px;
}
.faq__item p { margin: 0 0 14px; }
.faq__item p:last-child { margin-bottom: 0; }

/* The end of the page's argument, and not the answer to the last question. */
.faq__close {
    margin: 46px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--border);
    max-width: 62ch;
}
.faq__close p { margin: 0 0 10px; }

/* Both scoped inside .faq__close so they outrank the paragraph rule above
 * without an !important — two classes beat one class and an element. */
.faq__close .faq__ask {
    margin: 22px 0;
    font-family: var(--serif);
    font-size: clamp(20px, 3.6vw, 26px);
    line-height: 1.35;
    text-wrap: balance;
}

/* The darker orange, not the lit one: this section sits on the cream ground,
 * where --orange-lit is the colour of a highlighter. */
.faq__close .faq__reveal {
    margin: 0;
    font-weight: 600;
    color: var(--orange);
}

.tell { padding: clamp(58px, 10vw, 96px) 0 clamp(40px, 7vw, 70px); }

.form { margin-top: 26px; }
.field { margin-bottom: 12px; }

.label {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
}

.opt { font-weight: 400; color: var(--color-text-tertiary); font-size: 14px; }
.opt::before { content: "\2014\00a0"; }

/*
 * Compact. The padding is 6px top and bottom — the outer limit of what was
 * asked for, and the right end of the range: 3px with a 17px face leaves the
 * descenders almost touching the border.
 *
 * min-height comes down to 38px with it. It was 52px to be a comfortable
 * thumb target; 38px is still above the 36px most accessibility guidance asks
 * for, so the form is tighter without becoming hard to hit on a phone.
 */
.input {
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    font: inherit;
    font-size: 17px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
}
.input:focus {
    border-color: var(--amber);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}
/* A box for a sentence is not a box for a word: the compact min-height above
 * would leave the suggestion field one line tall. */
textarea.input { min-height: 84px; }

.input--bad { border-color: var(--color-danger-fg); }

.fielderr { margin: 7px 0 0; color: var(--color-danger-fg); font-size: 15px; }

/* An empty error slot must take no room, or every field carries a blank line. */
.fielderr:empty { display: none; }

/*
 * The label-free form. The placeholder is the only name on screen, so it has to
 * stay readable rather than fading into the box — and the box needs more air
 * than a labelled one, because nothing above it is doing that work.
 */
.form--bare .field { margin-bottom: 16px; }
.form--bare .input { font-size: 17px; }
.form--bare .input::placeholder { color: #8C8577; opacity: 1; }
.form--bare .input:focus::placeholder { color: #B3ACA0; }

.hint {
    margin: 8px 0 0;
    font-size: 14.5px;
    color: var(--color-text-tertiary);
    line-height: 1.5;
}

.consent { margin-top: 26px; }

.check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 16.5px;
}
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--amber); flex: none; }

.submit {
    margin-top: 26px;
    width: 100%;
    min-height: 58px;
    padding: 14px 28px;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--orange-lit), #FF4D00);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
}
.submit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.submit[disabled] { opacity: .6; cursor: default; transform: none; }

.formerr {
    background: #FEF2F2;
    border: 1px solid #F3C9C4;
    color: var(--color-danger-fg);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 22px;
}
.formerr strong { display: block; }

.done {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--color-success-fg);
    border-radius: 12px;
    padding: 26px;
}
.done__h { font-family: var(--serif); font-size: 23px; margin: 0 0 8px; }
.done p:last-child { margin-bottom: 0; }

/* The honeypot. Off-screen rather than display:none — some bots skip anything
 * that is not rendered, and the point is that they do fill it in. */
.nope { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.addrwrap { margin-top: 4px; }

/* --- contact ------------------------------------------------------------ */

.hero__contact {
    margin: 30px 0 0;
    font-size: 16px;
    color: var(--muted);
    line-height: 1.9;
}
.hero__contact-lead { display: block; font-size: 14.5px; color: var(--color-text-tertiary); }
.hero__contact a { white-space: nowrap; }

.contact { margin: 0; border-top: 1px solid var(--border); padding-top: 18px; }
.contact__row { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; }
.contact dt {
    min-width: 68px;
    color: var(--color-text-tertiary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-top: 3px;
}
.contact dd { margin: 0; font-size: 18px; }
.contact__hours { display: block; font-size: 14px; color: var(--color-text-tertiary); }

/* Loud on purpose: shipping without a real phone number is the one
 * unforgivable bug on a page that asks strangers for their number. */
.contact__missing {
    background: #FEF2F2;
    color: var(--color-danger-fg);
    border: 1px dashed var(--color-danger-fg);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 15px;
}

/* --- footer ------------------------------------------------------------- */

.foot {
    border-top: 1px solid var(--border);
    padding: 30px 0 54px;
    background: var(--night);
    color: var(--on-night-2);
}
.foot a { color: var(--blue-lit); }
.foot a:hover { color: var(--on-night); }
.foot__links { margin: 0 0 6px; font-size: 15.5px; }
.foot__sep { opacity: .5; margin: 0 6px; }
.foot__note { margin: 0; font-size: 14.5px; opacity: .8; }

/* --- documents ---------------------------------------------------------- */

.doc__back { margin: 0 0 22px; font-size: 15.5px; }
.doc__head h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 5.6vw, 38px);
    margin: 22px 0 6px;
}
.doc__date { margin: 0 0 8px; color: var(--color-text-tertiary); font-size: 15px; }
.doc__section { margin-bottom: 34px; }
.doc__section h2 { font-size: clamp(20px, 3.6vw, 24px); margin-bottom: 8px; }
.doc__section p { margin: 0 0 14px; max-width: 64ch; }
.doc__list { margin: 0 0 14px; padding-left: 22px; max-width: 64ch; }
.doc__list li { margin-bottom: 8px; }

/* --- admin -------------------------------------------------------------- */

.admin__export { margin-left: 10px; }
.admin__sources { list-style: none; margin: 0; padding: 0; max-width: 340px; }
.admin__sources li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding: 7px 0;
}
.admin__n { font-variant-numeric: tabular-nums; color: var(--muted); }
.admin__scroll { overflow-x: auto; }
.admin__table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.admin__table th, .admin__table td {
    text-align: left;
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    white-space: nowrap;
}
.admin__table th { color: var(--color-text-tertiary); font-weight: 600; }
.admin__when { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ==========================================================================
   SMALL SCREENS · MOTION
   ========================================================================== */

@media (max-width: 560px) {
    :root { --bar-h: 55px; }
    body { font-size: 16.5px; }
    .bar { padding: 0 10px; gap: 6px; }
    .bar__cta { padding: 9px 15px; font-size: 14px; }
    .reel { width: min(84vw, calc(62vh * 9 / 16)); }
    .reel__inner { padding: 20px 18px 22px; }
    .stage__controls { gap: 10px; padding: 4px 14px 6px; }
    .stage__arrow { width: 42px; height: 42px; }
    .mod__question { padding-left: 15px; }
}

/*
 * Everything above is decoration. Strip it for anyone who has asked for less
 * motion — including the pulse on the Register button and the drifting sheen on
 * the wordmark, which are the two most likely to make someone feel unwell.
 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .reel__inner { transform: none; opacity: 1; }
}

/* ==========================================================================
   VENDORED BLOCK OVERRIDES
   Loaded after the platform's geo CSS, so these win without editing a
   vendored file.
   ========================================================================== */

.addr-collapse {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    margin: 4px 0 0;
}

.addr-collapse__head {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 16px;
    padding: 15px 16px;
    min-height: 52px;
}
.addr-collapse__head:hover { background: #FCFAF7; filter: none; }

details.addr-collapse[open] > .addr-collapse__head { border-bottom-color: var(--border); }

.addr-collapse__body { padding: 4px 16px 16px; }

.address-block .addr-search { min-height: 52px; font-size: 17px; }

/*
 * The block's inline labels are tinted with the module colour, which on an admin
 * screen separates one section from another. Here there is only one section, so
 * the tint is noise. Neutral tint, same structure.
 */
.address-block .addr-field .addr-field__label {
    background: #F7F4EF;
    color: var(--muted);
    border-right: 1px dashed var(--border-strong);
    font-size: 14px;
}

/*
 * 16px is the threshold below which iOS Safari zooms the page in when a field
 * takes focus — which on this form would throw the visitor across a map.
 */
.address-block .addr-field .addr-field__input { font-size: 16px; }
.address-block .addr-field { min-height: 46px; }

/*
 * The address block's "bar" variant is its own header — a search box with
 * [fields] and [map] toggles — so it has no collapsible title of its own.
 * This is the label that says the whole thing is optional.
 */
.addrwrap__label {
    margin: 4px 0 8px;
    font-size: 15px;
    font-weight: 600;
}

/* ==========================================================================
   THE FEATURE REGISTER  (/admin/setfeature)
   Each entry is laid out as the site lays it out — badge, short title, serif
   title, description — so what the operator edits is what the visitor reads.
   ========================================================================== */

.reg { padding-top: 34px; max-width: 780px; }

.reg__back { margin: 0 0 18px; font-size: 15px; }
.reg__head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 5vw, 38px); margin: 0 0 10px; }
.reg__tally { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.reg__state { color: var(--color-text-tertiary); }
.reg__state.is-saving { color: var(--amber); }
.reg__state.is-saved  { color: var(--color-success-fg); }
.reg__state.is-error  { color: var(--color-danger-fg); }

.reg__controls {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 12px 0; margin: 22px 0 4px;
    background: var(--cream); border-bottom: 1px solid var(--border);
}
.reg__search { flex: 1 1 200px; min-height: 42px; font-size: 15px; }

.reg__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.reg__chip {
    padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--muted); background: transparent;
    border: 1px solid var(--border-strong); border-radius: 4px; cursor: pointer;
}
.reg__chip:hover { border-color: var(--amber); color: #7A4A0B; }
.reg__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.reg__group { display: flex; align-items: baseline; gap: 12px; padding: 30px 0 4px; }
.reg__group h2 { font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 0; }
.reg__group span {
    font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------------ entry */

.reg__entry {
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    padding: 20px 22px 18px; margin-top: 13px;
}
.reg__entry--muted { background: transparent; border-style: dashed; opacity: .66; }
.reg__entry--muted:hover { opacity: 1; }
.reg__entry[hidden] { display: none !important; }

.reg__eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }

.reg__badge {
    display: inline-grid; place-items: center; flex: none;
    min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px;
    background: var(--ink); color: var(--cream);
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.reg__entry--muted .reg__badge { background: var(--border-strong); color: var(--ink); }
.reg__badge:focus { background: var(--orange); color: #fff; }

.reg__short {
    flex: 1 1 auto; min-width: 0;
    font-size: 12.5px; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--amber);
}

.reg__tools { display: flex; gap: 4px; flex: none; }
.reg__tool {
    padding: 5px 9px; font: inherit; font-size: 11.5px; line-height: 1;
    color: var(--muted); background: transparent;
    border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.reg__tool:hover { border-color: var(--amber); color: #7A4A0B; }
.reg__tool--on { background: var(--ink); border-color: var(--ink); color: #fff; }
.reg__tool--danger:hover { border-color: var(--color-danger-fg); color: var(--color-danger-fg); }

.reg__title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(21px, 3.2vw, 27px); line-height: 1.25;
    margin: 0 0 11px;
}

.reg__desc {
    font-size: 15px; line-height: 1.6; color: var(--color-text-secondary);
    white-space: pre-wrap;
}

/* Every editable field: faint until hover, because this is a document first. */
.reg .f {
    border-radius: 4px; padding: 3px 6px; margin: -3px -6px;
    outline: 1px solid transparent;
    transition: background .12s ease;
}
.reg .f:hover { background: #FAF7F2; }
.reg .f:focus { outline: 2px solid var(--amber); background: #FAF7F2; }

.reg__engine {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin-top: 15px; padding-top: 12px; border-top: 1px dashed var(--border);
    font-size: 12.5px;
}
.reg__label {
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--color-text-tertiary); font-weight: 600;
}
.reg__feature { color: var(--blue); font-weight: 600; font-size: 13px; }
.reg__code, .reg__module { font-size: 12px; color: var(--muted); }

.reg__video { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
.reg__film { font-size: 12px; color: var(--muted); padding: 6px 9px; border: 1px solid var(--border); border-radius: 4px; }
.reg__video .btn { padding: 7px 12px; font-size: 12.5px; border-radius: 4px; min-height: 0; width: auto; }

.reg__promptwrap { margin-top: 11px; }
.reg__shotline { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 9px; font-size: 13.5px; }
.reg__shot { flex: 1 1 240px; min-width: 0; color: var(--color-text-secondary); }

.reg__prompt {
    width: 100%; min-height: 300px; padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.6; color: var(--ink);
    background: #FAF7F2; border: 1px solid var(--border-strong);
    border-left: 3px solid var(--orange); border-radius: 4px;
    resize: vertical; white-space: pre; overflow-x: auto;
}
.reg__prompt:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

.reg__add {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--border-strong);
}
.reg__add .btn { width: auto; min-height: 0; padding: 11px 18px; font-size: 15px; border-radius: 6px; }

/* The notes that must NOT be in the paste box: instructions to the person. */
.reg__aftercare {
    margin-top: 12px; padding: 12px 14px;
    background: #FBF8F3; border: 1px dashed var(--border-strong); border-radius: 6px;
}
.reg__aftercare .reg__label { margin: 0 0 5px; }
.reg__aftercare .reg__label + ul { margin: 0 0 12px; }
.reg__aftercare ul { padding-left: 0; list-style: none; font-size: 13px; color: var(--color-text-secondary); }
.reg__aftercare li { margin-bottom: 3px; }
.reg__aftercare li span {
    display: inline-block; min-width: 38px;
    font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 700; font-size: 12px;
}
.reg__checks li::before { content: "☐ "; color: var(--muted); }
.reg__aftercare ul:last-child { margin-bottom: 0; }

/* The link across to the register, carrying the token so nobody types it. */
.admin__nav { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.admin__nav a { font-size: 16px; font-weight: 600; }
.admin__nav .hint { margin: 0; }

/*
 * Out, but the film is not finished. The question carries the card on its own.
 * Not blurred — this one IS revealed; it simply has no picture yet.
 */
.reel--card .reel__inner {
    justify-content: flex-end;
    background:
        linear-gradient(165deg, rgba(255, 122, 26, .12), transparent 52%),
        var(--night-2);
}
.reel--card .reel__line {
    position: relative;
    z-index: 2;
    color: var(--on-night);
    padding: 0 4px 2px;
}
.reel__badge--soon { background: rgba(255, 122, 26, .16); border-color: rgba(255, 122, 26, .4); }

/*
 * The permanent film number, beside the mute button. This is the one thing an
 * operator copies out of this screen and types into a filename, so it is shown
 * as the filename itself rather than as a bare number.
 */
.reg__filmno {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    margin-right: 2px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: #FBF8F3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}
.reg__filmno .f { padding: 0 2px; margin: 0; color: var(--ink); font-weight: 600; }
.reg__filmno .f:focus { background: var(--orange); color: #fff; }

/* ==========================================================================
   THE DAY, ABOVE THE CARD
   Day number and slot name, then three bands for the day's three questions.
   The band with a pointer under it is the card below.
   ========================================================================== */

.reel__when {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 4px 7px;
    line-height: 1.2;
}

.reel__dayno {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange-lit);
}

.reel__slotname {
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

/* The three bands: morning, afternoon, evening. */
.reel__bands {
    display: flex;
    gap: 3px;
    margin: 0 4px 12px;
}

.reel__band {
    position: relative;
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    opacity: .3;
    transition: opacity .35s ease;
}

/* Yellow, white, orange — the light of the day, morning to evening. */
.reel__band--1 { background: #F2C744; }
.reel__band--2 { background: #EFEAE1; }
.reel__band--3 { background: #FF6600; }

/*
 * The slot this card belongs to. Full strength, and a small arrowhead beneath
 * pointing down at the card — drawn as a rotated square so it inherits the
 * band's own colour and needs no second element.
 */
.reel__band.is-now { opacity: 1; }

.reel__band.is-now::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -3px 0 0 -3.5px;
    background: inherit;
    transform: rotate(45deg);
    border-radius: 1px;
}

/* A card whose turn has not come says so quietly here too. */
.reel--locked .reel__dayno { color: var(--on-night-2); }
.reel--locked .reel__bands { opacity: .45; }

/* Only the centred card's day block is at full strength, like its caption. */
.reel__when, .reel__bands { opacity: .5; transition: opacity .45s ease; }
.reel.is-active .reel__when,
.reel.is-active .reel__bands { opacity: 1; }

/* ==========================================================================
   THE ASK, FIXED AT THE FOOT
   It used to sit top-left, competing with the wordmark for the first thing the
   eye lands on. At the bottom it is under the thumb on a phone and stays in
   reach through a very long scroll.
   ========================================================================== */

.bar__spacer { justify-self: start; }

.ctabar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 55;
    display: flex;
    justify-content: center;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(10, 13, 22, .96) 62%, rgba(10, 13, 22, 0));
    pointer-events: none;   /* the gradient is decoration; only the button takes clicks */
}

.ctabar__btn {
    pointer-events: auto;
    display: inline-block;
    min-width: min(340px, 78vw);
    padding: 5px 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange-lit), #FF4D00);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 30px -8px rgba(255, 77, 0, .6);
    animation: pulse 2.8s ease-out infinite;
}
.ctabar__btn:hover { color: #fff; filter: brightness(1.08); }
.ctabar__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes pulse {
    0%   { box-shadow: 0 8px 30px -8px rgba(255, 77, 0, .6), 0 0 0 0 rgba(255, 102, 0, .5); }
    70%  { box-shadow: 0 8px 30px -8px rgba(255, 77, 0, .6), 0 0 0 16px rgba(255, 102, 0, 0); }
    100% { box-shadow: 0 8px 30px -8px rgba(255, 77, 0, .6), 0 0 0 0 rgba(255, 102, 0, 0); }
}

/* The footer must be able to clear it, or the last line sits under the button. */
.foot { padding-bottom: 110px; }

/* The glow layer has to grow with the wordmark, or it stops reaching the edges. */
.bar__glow { filter: blur(18px); }

/* Count hard right, now that the grid is two columns. */
.bar__count { justify-self: end; }

/* ----------------------------------------------- suggest, on a locked card */

/*
 * Filled, like every other thing on this site you are meant to press.
 *
 * It was a translucent outline over a blurred card, which is the look of a
 * label rather than of a control — on a card with nothing else to press, an
 * invitation nobody reads as pressable is an invitation that does not exist.
 * Same gradient as "Get Early Access", one size down.
 *
 * Laid out by .reel__soon's flex column, so no positioning of its own.
 */
.reel__suggest {
    z-index: 3;
    margin-top: 4px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange-lit), #FF4D00);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 7px 22px -7px rgba(255, 77, 0, .75);
    transition: filter .18s ease, transform .18s ease;
}
.reel__suggest:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.reel__suggest:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Only the centred locked card offers it — the others are too small to read. */
.reel:not(.is-active) .reel__suggest { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- the suggestion box */

.sug__panel { max-width: 520px; text-align: left; }

.sug__h {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 4.4vw, 28px);
}

.sug__intro { margin: 0 0 20px; font-size: 15.5px; color: var(--muted); max-width: 46ch; }

.sug__idea { min-height: 110px; resize: vertical; line-height: 1.5; }

.sug__send { margin-top: 6px; }

.sug__done { padding: 6px 0 18px; }
.sug .sheet__close { margin-top: 14px; }

/* --------------------------------------------------- suggestions, on /admin */

.admin__sugs { margin: 34px 0 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.admin__sugs h2 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 0 0 4px; }

.suglist { list-style: none; margin: 18px 0 0; padding: 0; }

.sugitem {
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: 6px;
}
.sugitem__idea { margin: 0 0 8px; font-size: 16px; line-height: 1.55; }
.sugitem__who {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0;
    font-size: 14px; color: var(--muted);
}

/* ==========================================================================
   THE COUNTDOWN, WITH A TICKER
   Days on one line, the exact time remaining under it. The ticker is the only
   thing on this site that moves by the second, and it earns that by being the
   one fact the whole campaign is built around.
   ========================================================================== */

.bar__count { line-height: 1.15; text-align: right; }

.bar__days {
    display: block;
    font-size: clamp(13px, 2.6vw, 16px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bar__togo {
    display: inline;
    margin-left: 4px;
    font-size: .72em;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

.bar__ticker {
    display: block;
    margin-top: 1px;
    font-size: clamp(11px, 2.2vw, 13px);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--orange-lit);
    opacity: .85;
}

/* ==========================================================================
   THE SWIPE HINT — shown once, on a first visit
   ========================================================================== */

.swipehint {
    position: absolute;
    inset: var(--bar-h) 0 0 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: rgba(8, 11, 18, .82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.swipehint__inner { display: flex; align-items: center; gap: 18px; padding: 0 22px; }

.swipehint__text {
    margin: 0;
    max-width: 15ch;
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(18px, 4vw, 24px);
    color: var(--on-night);
}

.swipehint__arrow {
    font-size: clamp(28px, 7vw, 40px);
    color: var(--orange-lit);
    line-height: 1;
}
.swipehint__arrow--l { animation: nudge-l 1.6s ease-in-out infinite; }
.swipehint__arrow--r { animation: nudge-r 1.6s ease-in-out infinite; }

@keyframes nudge-l {
    0%, 100% { transform: translateX(0); opacity: .55; }
    50%      { transform: translateX(-9px); opacity: 1; }
}
@keyframes nudge-r {
    0%, 100% { transform: translateX(0); opacity: .55; }
    50%      { transform: translateX(9px); opacity: 1; }
}

.swipehint__ok {
    padding: 11px 26px;
    border: 1px solid var(--orange-lit);
    border-radius: 999px;
    background: transparent;
    color: var(--on-night);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.swipehint__ok:hover { background: rgba(255, 122, 26, .2); }

/* ==========================================================================
   THE CARD THAT OPENS UNDER A FILM
   ========================================================================== */

.reel__line--open {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(15px, 3.45vw, 20px);
    line-height: 1.32;
    color: var(--on-night-2);
    text-align: center;
    cursor: pointer;
    padding: 14px 4px 0;
}
.reel.is-active .reel__line--open { color: var(--on-night); }

/* A caret that turns, so the caption reads as something you can open. */
.reel__chev {
    display: block;
    width: 8px;
    height: 8px;
    margin: 8px auto 0;
    border-right: 2px solid var(--orange-lit);
    border-bottom: 2px solid var(--orange-lit);
    transform: rotate(45deg);
    transition: transform .25s ease;
    opacity: .8;
}
.reel__line--open[aria-expanded="true"] .reel__chev { transform: rotate(-135deg); }

/*
 * The full width of the page, because it is no longer inside a card.
 *
 * It used to live in the slide it belonged to, which capped it at the width of
 * one card in a strip that clips its own overflow — narrow, and unable to be
 * anything else. The markup now prints these below the strip (see the note in
 * home.php), so this is an ordinary block and simply takes the room.
 */
.reel__panel {
    margin: 5px;
    padding: 14px clamp(16px, 3vw, 32px) 16px;
    border: 1px solid var(--night-edge);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    text-align: left;
}
.reel__body {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--on-night-2);
}

/*
 * The same thumbs on the dark panel.
 *
 * Only the ink changes now. These rules used to repaint a pill — background,
 * border, the count's own chip — and there is no pill left to repaint; left in
 * place they would have drawn the boxes back on.
 */
.reel__panel .verdict__btn { color: var(--on-night-2); }
.reel__panel .verdict__btn:hover { color: var(--on-night); }
.reel__panel .verdict__btn--yes:hover,
.reel__panel .verdict__btn--yes.is-chosen { color: var(--orange-lit); }
.reel__panel .verdict__btn--no.is-chosen { color: var(--on-night); }

.reel__panel .verdict__said { color: #5FCB8E; }

/* ==========================================================================
   THE SCROLLING LIST — newest first, one open at a time
   ========================================================================== */

.qlist { padding: clamp(52px, 9vw, 92px) 0 0; }
.qlist__h {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(26px, 5vw, 38px); line-height: 1.16; margin: 0 0 10px;
}
.qlist__intro { margin-bottom: 26px; }

.qlist__items { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.qitem { border-top: 1px solid var(--border); }
.qitem:last-child { border-bottom: 1px solid var(--border); }

.qitem__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    padding: 18px 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/*
 * The number is the thing an item collapses back to. Closed it is a quiet
 * dot-sized marker; open it fills in — so scrolling reads as one item handing
 * over to the next rather than as a list of identical rows.
 */
.qitem__no {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.qitem.is-open .qitem__no {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: scale(1.06);
}

.qitem__title {
    font-family: var(--serif);
    font-size: clamp(17px, 3.2vw, 23px);
    line-height: 1.3;
    color: var(--muted);
    transition: color .3s ease;
}
.qitem.is-open .qitem__title { color: var(--ink); }

/*
 * Collapsed with grid-template-rows rather than max-height: the row animates
 * from 0fr to 1fr, so it opens to exactly the content's height whatever that
 * is, instead of a guessed maximum that clips a long answer.
 */
.qitem__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .34s ease;
}
.qitem.is-open .qitem__body { grid-template-rows: 1fr; }

/* The single child the row collapses. Its own overflow has to be hidden or the
   paragraphs simply spill out of the zero-height row. */
.qitem__inner { overflow: hidden; }
.qitem__inner > :first-child { margin-top: 0; }

.qitem__para {
    margin: 0 0 14px 46px;
    max-width: 58ch;
    color: var(--color-text-secondary);
    font-size: 15.5px;
    line-height: 1.6;
}
.qitem .verdict { margin: 0 0 22px 46px; max-width: 520px; }

@media (max-width: 560px) {
    .qitem__para, .qitem .verdict { margin-left: 0; }
    .qitem__head { gap: 12px; }
}

/* With no script every entry is simply open, which reads fine. */
.no-js .qitem__body { grid-template-rows: 1fr; }

/* The last paragraph's margin would otherwise be the only thing between one
   entry's text and the next entry's number. */
.qitem__inner > :last-child { margin-bottom: 0; padding-bottom: 22px; }

/* display:flex beats [hidden], so say it out loud. */
.swipehint[hidden] { display: none; }

/* The bar steps aside once the form it points at is on screen. transform and
   opacity only, so nothing reflows as it goes; visibility keeps it off the tab
   order once it is gone. */
.ctabar {
    visibility: visible;
    transition: transform .32s ease, opacity .32s ease, visibility 0s;
}
.ctabar.is-away {
    transform: translateY(130%);
    opacity: 0;
    visibility: hidden;
    /* Hold visibility until the slide has finished — but only on the way out,
       or the bar would sit invisible for a third of a second on the way back. */
    transition: transform .32s ease, opacity .32s ease, visibility 0s linear .32s;
}

/* ==========================================================================
   A CARD THAT HAS NOT BEEN RELEASED YET
   Blurred, with the note, the countdown to its own moment, and the invitation.
   ========================================================================== */

/*
 * Centred in the card, not sitting on its floor.
 *
 * There is nothing else on a locked card — no film, no question, no share — so
 * anchoring the one thing it does have to the bottom edge left the whole top
 * two thirds as blur and no reason to look at it. In the middle it reads as the
 * content of the card rather than as a caption under an empty one.
 */
.reel__soon {
    position: absolute;
    inset: 0 18px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.reel__soonnote {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(15px, 3.2vw, 18px);
    line-height: 1.35;
    color: var(--on-night);
    text-wrap: balance;
}

/*
 * The countdown. Tabular figures so the width does not jitter every second —
 * a number that shifts the layout under itself reads as broken.
 */
.reel__timer {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.reel__timerlabel {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

.reel__timerval {
    font-size: clamp(19px, 4.4vw, 25px);
    font-weight: 700;
    color: var(--orange-lit);
    line-height: 1.15;
}

/* Only the centred card offers the invitation — the rest are too small to read. */
.reel:not(.is-active) .reel__soon .reel__suggest { opacity: 0; pointer-events: none; }

/* The two fields the pair-structured campaign added. Mood sits with the other
   short metadata; the voiceover gets its own line because it is a sentence and
   wrapping it into the meta row would squeeze it to two words a line. */
.reg__mood { font-size: 12px; color: var(--muted); min-width: 6ch; }

.reg__voiceline {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin: 9px 0 0; font-size: 13.5px;
}
.reg__voice {
    flex: 1 1 240px;
    min-width: 0;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ==========================================================================
   THE LAST HALF HOUR, AND THE ANSWER
   Two pages that exist for one morning between them. Both are a single column
   centred in the window on the campaign's own dark ground, because on both of
   them there is exactly one thing to look at.
   ========================================================================== */

.launch,
.reveal {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: calc(2px) 2px 4px;
    background:
        radial-gradient(760px 420px at 50% 0%, rgba(255, 122, 26, .16), transparent 70%),
        radial-gradient(620px 380px at 50% 100%, rgba(63, 169, 245, .12), transparent 70%),
        var(--night);
    color: var(--on-night);
    text-align: center;
}

/*
 * THE REVEAL STANDS AT THE TOP; the countdown stays in the middle.
 *
 * They shared `place-items: center`, which is right for the countdown — one
 * clock in the middle of an empty window — and wrong here. This page grew: a
 * name plate, two store buttons, the enter button and the way back. Centred,
 * the taller it gets the further it spreads in BOTH directions, so on a short
 * window the name itself starts getting cut off the top — the one thing on this
 * page that must never be.
 *
 * Anchored to the top, the name lands in the same place on every screen and
 * anything that does not fit falls off the BOTTOM, where a scroll reaches it.
 * On a window under about 620px tall the enter button is that overflow; it is
 * one flick away, and the alternative was losing the mark itself.
 *
 * align-items alone, so the justify-items: center above still holds.
 */
.reveal {
    align-items: start;
    padding-top: clamp(20px, 5vh, 60px);
}

.launch__inner,
.reveal__inner { max-width: 720px; }

.launch .dots,
.reveal .dots { margin: 0 auto 18px; }

/* --- the countdown ------------------------------------------------------- */

.launch__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

.launch__heading {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(30px, 6vw, 52px);
    line-height: 1.16;
    text-wrap: balance;
}

.launch__sub {
    margin: 0 0 38px;
    font-size: clamp(16px, 2.6vw, 19px);
    color: var(--on-night-2);
}

.launch__clock { margin: 0 0 34px; }

.launch__clocklabel {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

/*
 * Tabular figures, or the whole line jitters sideways once a second — a clock
 * that shifts under itself reads as broken at exactly the moment it must not.
 */
.launch__clockval {
    display: block;
    font-family: var(--serif);
    font-size: clamp(44px, 13vw, 96px);
    font-weight: 700;
    line-height: 1;
    color: var(--orange-lit);
    font-variant-numeric: tabular-nums;
}

.launch__teasers { margin: 0; font-size: 15px; }
.launch__teasers a { color: var(--on-night-2); }
.launch__teasers a:hover { color: var(--on-night); }

/* --- the reveal ---------------------------------------------------------- */

.reveal__welcome {
    margin: 0 0 10px;
    font-size: clamp(15px, 2.6vw, 18px);
    letter-spacing: .04em;
    color: var(--on-night-2);
}

/*
 * The name, once, as large as the page allows. Twenty days of not saying it
 * have been spent earning this line, so nothing else on the page competes.
 */
/*
 * THE LOGO, ON A PLATE.
 *
 * The mark is two colours designed for white paper — its blue is the one the
 * site's own palette notes is too dark to read on near-black — so it sits on
 * a cream plate rather than being faked with a glow. The plate also gives the
 * celebration something to pass BEHIND: fireworks bloom behind it, ribbons
 * and balloons drift across it, and the mark itself is never covered.
 *
 * The h1 stays the accessible name: the image inside it carries the name as
 * its alt text, so a screen reader announces exactly what a sighted reader
 * sees, and if the file ever fails to load the alt is printed in its place.
 */
.reveal__name {
    display: inline-block;
    margin: 0 0 22px;
    padding: clamp(16px, 3.2vw, 30px) clamp(22px, 4.5vw, 46px);
    border-radius: 24px;
    background: #FBF7F2;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        0 34px 90px -30px rgba(0, 0, 0, .85),
        0 0 120px -20px rgba(255, 122, 26, .45);
    font-size: 0;            /* the alt text, if it ever shows, sizes itself below */
    line-height: 0;
}

.reveal__logo {
    display: block;
    /*
     * Bounded by viewport HEIGHT as well as width. Width alone let the plate
     * grow to ~400px tall on a laptop and pushed the button — the one thing
     * this page exists for — below the fold. 48vh keeps the whole column,
     * plate included, inside a 768px window; on a phone the width wins anyway.
     */
    width: min(84vw, 560px, 48vh);
    height: auto;
    font: 700 clamp(28px, 6vw, 56px)/1.1 var(--serif);   /* alt text fallback only */
    color: #005C94;
}

.reveal__yours {
    margin: 0 0 26px;
    font-size: clamp(17px, 3vw, 22px);
    color: var(--on-night);
}

.reveal__go { margin: 0 0 18px; }

.reveal__enter {
    display: inline-block;
    padding: 17px 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange-lit), #FF4D00);
    color: #fff;
    font-size: clamp(16px, 2.8vw, 19px);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 34px -10px rgba(255, 77, 0, .75);
    animation: pulse 2.8s ease-out infinite;
}
.reveal__enter:hover { color: #fff; filter: brightness(1.08); }
.reveal__enter:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.reveal__back { margin: 0; font-size: 15px; }
.reveal__back a { color: var(--on-night-2); }
.reveal__back a:hover { color: var(--on-night); }

/* ==========================================================================
   THE CELEBRATION
   Fireworks on a canvas, ribbons falling over them, and — for anybody who
   arrives after the moment — five seconds of curtain before the name.
   All of it sits ON TOP of a page that is already complete without it.
   ========================================================================== */

/* The canvas covers the window and takes no clicks: the button underneath it
   is the entire point of the page and must stay pressable throughout. */
/*
 * THREE LAYERS, AND THE LOGO IS IN THE MIDDLE OF THEM.
 *
 * The fireworks canvas sits BEHIND the page content and the ribbons and
 * balloons float OVER it, so the celebration passes around the logo rather
 * than covering it. The canvas used to be on top, and its trail effect —
 * which works by painting a translucent dark wash over the whole frame sixty
 * times a second — was quietly dimming the name the page exists to show.
 *
 * z-index 0 on a fixed canvas still paints above the page background (a
 * positioned element beats in-flow content), and .reveal__inner at z-index 1
 * then sits above the canvas. .reveal itself carries NO z-index on purpose:
 * giving it one would wrap the canvas and the content into one stacking
 * context and undo the sandwich.
 */
.gala,
.ribbons,
.balloons {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.gala { z-index: 0; }
.ribbons,
.balloons { z-index: 2; overflow: hidden; }

.reveal { position: relative; }
.reveal__inner { position: relative; z-index: 1; }

/*
 * One streamer. Long, thin, and turning as it falls — a rectangle that only
 * drops reads as rain, and it is the rotation that makes it read as paper.
 * Everything that varies per ribbon (colour, position, timing) is set from
 * the script; CSSOM, not a style attribute, so the strict CSP is untouched.
 */
.ribbon {
    position: absolute;
    top: -14vh;
    width: 10px;
    height: 26px;
    border-radius: 2px;
    opacity: .9;
    animation: ribbonfall linear forwards;
}

@keyframes ribbonfall {
    0%   { transform: translateY(0) rotateZ(0deg) rotateY(0deg); }
    100% { transform: translateY(125vh) rotateZ(560deg) rotateY(900deg); }
}

/* --- the five-second curtain --------------------------------------------- */

.curtain {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(700px 420px at 50% 40%, rgba(255, 122, 26, .14), transparent 70%),
        var(--night);
    color: var(--on-night);
    cursor: pointer;
    animation: curtainin .5s ease both;
}

/* Lifting it fades the whole thing out at once, so the name is already in
   place underneath as the last of it goes. */
.curtain.is-lifting { animation: curtainout .55s ease forwards; }

@keyframes curtainin  { from { opacity: 0; } to { opacity: 1; } }
@keyframes curtainout { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

.curtain__yes {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: clamp(22px, 5vw, 38px);
    line-height: 1.2;
    text-wrap: balance;
}

.curtain__itis {
    margin: 0 0 30px;
    font-size: clamp(16px, 3vw, 21px);
    color: var(--on-night-2);
    letter-spacing: .04em;
}

/* The count, which is the whole drama of those five seconds. */
.curtain__count {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(64px, 18vw, 150px);
    font-weight: 700;
    line-height: 1;
    color: var(--orange-lit);
    font-variant-numeric: tabular-nums;
    animation: countbeat 1s ease-out infinite;
}

@keyframes countbeat {
    0%   { transform: scale(1);    opacity: 1; }
    70%  { transform: scale(.84);  opacity: .75; }
    100% { transform: scale(.8);   opacity: .6; }
}

.curtain__skip {
    margin: 34px 0 0;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

/* --- the name arriving ---------------------------------------------------- */

/*
 * Added the instant the curtain lifts. Over-shoots and settles rather than
 * simply scaling up — a thing that arrives and then steadies reads as landing,
 * where a straight scale reads as a slide.
 */
.reveal__name.is-arriving { animation: nameflash 1.15s cubic-bezier(.2, 1.4, .3, 1) both; }

@keyframes nameflash {
    0%   { transform: scale(.55); opacity: 0; filter: blur(14px); }
    45%  { transform: scale(1.09); opacity: 1; filter: blur(0); }
    70%  { transform: scale(.985); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* The page's own content, held back while the curtain is up so that nothing
   is half-visible behind it. */
.reveal.is-waiting .reveal__inner { opacity: 0; }
.reveal__inner { transition: opacity .5s ease; }

/*
 * ASKED FOR LESS MOTION, GIVEN LESS MOTION.
 * No fireworks, no ribbons, no curtain — the script checks the same query and
 * never builds them. These rules are the backstop for anything already drawn.
 */
@media (prefers-reduced-motion: reduce) {
    .gala, .ribbons { display: none; }
    .curtain { animation: none; }
    .curtain__count { animation: none; }
    .reveal__name.is-arriving { animation: none; }
    .reveal.is-waiting .reveal__inner { opacity: 1; }
}

/* --- balloons --------------------------------------------------------- */

/*
 * A balloon is a tall ellipse with a knot under it, rising from below the
 * fold and swaying as it climbs. The body is the element, the knot and the
 * string are its two pseudo-elements, so one span is a whole balloon.
 * Everything that varies — colour, lane, size, timing — comes from the
 * script through the CSSOM, never a style attribute (strict CSP).
 */
.balloon {
    position: absolute;
    bottom: -18vh;
    width: 46px;
    height: 58px;
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    opacity: .92;
    box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .14), inset 6px 8px 0 rgba(255, 255, 255, .28);
    animation: balloonrise linear forwards;
}
.balloon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: inherit;
    border-radius: 2px;
}
.balloon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1.5px;
    height: 70px;
    background: rgba(255, 255, 255, .45);
    transform-origin: top;
    animation: stringsway 1.8s ease-in-out infinite alternate;
}

@keyframes balloonrise {
    0%   { transform: translateY(0) translateX(0) rotate(-3deg); }
    25%  { transform: translateY(-32vh) translateX(18px) rotate(4deg); }
    50%  { transform: translateY(-64vh) translateX(-14px) rotate(-4deg); }
    75%  { transform: translateY(-96vh) translateX(16px) rotate(3deg); }
    100% { transform: translateY(-130vh) translateX(-8px) rotate(-2deg); }
}
@keyframes stringsway {
    from { transform: rotate(-8deg); }
    to   { transform: rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .balloons { display: none; }
}

/* ==========================================================================
   THE STORE BUTTONS, ON THE REVEAL PAGE
   Under the enter button and deliberately quieter than it: the page's own job
   is to open the platform, and a store is a detour through a download. They sit
   inside .reveal__inner, so the five-second curtain reveals them with
   everything else rather than needing any timing of their own.
   ========================================================================== */

.stores { margin: 0 0 20px; }

.stores__lead {
    margin: 0 0 11px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-night-2);
}

.stores__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.stores__btn {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 176px;
    padding: 11px 20px;
    border: 1px solid var(--night-edge);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: var(--on-night);
    text-decoration: none;
    text-align: left;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.stores__btn:hover {
    background: rgba(255, 255, 255, .11);
    border-color: var(--orange-lit);
    color: var(--on-night);
    transform: translateY(-2px);
}
.stores__btn:focus-visible { outline: 3px solid var(--orange-lit); outline-offset: 3px; }

.stores__kicker {
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--on-night-2);
}
.stores__name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

/* On a phone the pair goes full width and stacks, so neither is a small target
   and the row never leaves one button stranded on its own line. */
@media (max-width: 460px) {
    .stores__row { flex-direction: column; }
    .stores__btn { min-width: 0; width: 100%; justify-content: center; }
}

/* The mark sits above the words, which is what reads as a store badge rather
   than as a link with a bullet. Fixed block so the two buttons line their text
   up with each other whatever each glyph measures. */
/* The mark sits to the LEFT of the words, which is how every store badge is
   drawn and what makes the pair scan as badges rather than as two links.
   flex:none so a long kicker never squeezes the glyph. */
.stores__logo { flex: none; display: block; width: 30px; height: 30px; }

.stores__words { display: flex; flex-direction: column; align-items: flex-start; }