@font-face{font-family:'DM Sans';src:url('assets/dm-sans.woff') format('woff');font-style:normal;font-weight:100 1000;font-display:swap}
*{box-sizing:border-box}html{background:var(--lucy-cream);color:var(--lucy-charcoal)}body{margin:0;font:1rem/1.55 var(--lucy-reading)}a{color:inherit;text-underline-offset:.25em}a:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:5px;box-shadow:0 0 0 5px var(--lucy-cream)}.skip{position:absolute;left:20px;top:-100px;z-index:10;padding:12px 20px;background:var(--lucy-charcoal);color:var(--lucy-cream)}.skip:focus{top:16px}
.eyebrow{font-size:.8125rem;letter-spacing:.1em;font-weight:700;margin:0 0 18px}h1{font:700 clamp(2.75rem,4.6vw,4.5rem)/1.04 var(--lucy-display);letter-spacing:-.055em;margin:0}h1 span{background:var(--lucy-butter);box-shadow:8px 0 var(--lucy-butter),-5px 0 var(--lucy-butter)}

/* Retired homepage hero (large centered Lucy, note card, confetti). Kept, not deleted: the
   user wants this direction available as a candidate for the future Meet the friends/World
   page. Nothing below references these classes on the current page. */
.character-area{display:grid;grid-template-columns:1fr 420px 1fr;align-items:center;max-width:1100px;margin:8px auto 0;gap:16px;position:relative}.lucy-wrap{position:relative;isolation:isolate}.lucy{position:relative;z-index:1;display:block;width:100%;height:auto;image-rendering:pixelated}.color-block{position:absolute;inset:15% 5% 4%;background:var(--lucy-butter);clip-path:polygon(12% 0,88% 0,88% 12%,100% 12%,100% 88%,88% 88%,88% 100%,12% 100%,12% 88%,0 88%,0 12%,12% 12%);transform:rotate(-7deg);z-index:0}.note{background:var(--lucy-pink);padding:20px 22px;justify-self:end;transform:rotate(-7deg);font:700 1.25rem/1.4 var(--lucy-display);box-shadow:6px 6px 0 var(--lucy-cream);position:relative;z-index:2}.note span{display:block}.hello{justify-self:start;transform:rotate(4deg);padding-left:16px}.hello-label{font:700 .875rem/1.4 var(--lucy-display);display:inline-block;border-bottom:3px solid var(--lucy-charcoal);padding-bottom:4px}.hello p{font-size:1.0625rem;margin:12px 0 0;line-height:1.6}.confetti{position:absolute;width:20px;height:20px;background:var(--lucy-pink);z-index:0}.confetti-a{left:8%;top:24%;box-shadow:20px -20px var(--lucy-butter)}.confetti-b{right:9%;top:17%;background:var(--lucy-cream);box-shadow:20px 20px var(--lucy-cream),0 40px var(--lucy-butter)}.confetti-c{left:14%;bottom:8%;width:12px;height:12px;background:var(--lucy-cream);box-shadow:24px 12px var(--lucy-cream)}

/* Approved homepage hero, 21 September copy selection, Storybook Alternative C layout:
   design-system/src/colorful-compact.css .cw-intro + .cc-scene, values reused exactly. */
/* UX review F5, F14, F15, F24: one page gutter (16px phone, 32px from 761px) for hero, cards and friends, so edges
   line up at every width. Before, the hero and the cards sat at x=0 between 761px and 1100px. */
:root{--page-gutter:16px}
@media(min-width:761px){:root{--page-gutter:32px}}
.hero,.choices,.fr-world{width:min(1100px,calc(100% - 2 * var(--page-gutter)))}
.hero{background:var(--lucy-sky);border-radius:6px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:center;max-width:1100px;margin:16px auto 20px;padding:24px 36px}
.hero-scene{position:relative;width:260px;height:230px}
.hero-lucy{position:absolute;bottom:0;left:0;width:220px;height:220px;object-fit:contain;image-rendering:pixelated}
.hero-copy .eyebrow{margin:0}
.hero-copy p{margin:12px 0 16px}
.hero-cta{display:inline-flex;align-items:center;gap:20px;min-height:44px;padding:10px 18px;color:var(--lucy-charcoal);background:var(--lucy-pink);border:2px solid var(--lucy-charcoal);border-radius:4px;text-decoration:none;font-weight:700;box-shadow:2px 2px 0 var(--lucy-charcoal);transition:background 150ms,box-shadow 150ms}
.hero-cta:hover{background:var(--lucy-butter);box-shadow:1px 1px 0 var(--lucy-charcoal)}
.hero-cta:active{box-shadow:none}

/* Three destination cards, colors matched to the shared nav (design-system's own study used
   pink/butter/leaf here, which doesn't match what the nav already settled on). */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto 40px}
.choice{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 40px 20px 22px;border-radius:6px;color:var(--lucy-charcoal);text-decoration:none;min-width:0}
.choice .eyebrow{margin:0;font-size:.75rem}
.choice strong{font:700 26px/1.1 var(--lucy-display);letter-spacing:-.035em}
.choice>span:not(.eyebrow):not(.choice-arrow){font-size:14px}
.choice-arrow{position:absolute;right:18px;top:20px;font-size:24px}
.choice--play{background:var(--lucy-pink)}
.choice--watch{background:var(--lucy-butter)}
.choice--world{background:var(--lucy-leaf)}
a.choice:hover strong{text-decoration:underline;text-underline-offset:4px}
.choice[aria-disabled=true]{opacity:.6;cursor:default}
/* Buttons, ported for My Lucy from design-system library.css and used site wide. My Lucy page styles live in
   assets/my-lucy.css. */
.lucy-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:128px;min-height:44px;max-width:100%;padding:10px 22px;border:2px solid transparent;border-radius:4px;font:600 16px/20px var(--lucy-reading);text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:background-color 150ms,border-color 150ms;touch-action:manipulation;background:var(--lucy-charcoal);color:var(--lucy-cream)}
.lucy-button--secondary{background:var(--lucy-cream);color:var(--lucy-charcoal);border-color:var(--lucy-charcoal)}
.lucy-button:not(:disabled):not([aria-disabled=true]):hover{background:color-mix(in srgb,var(--lucy-charcoal) 85%,var(--lucy-cream))}
.lucy-button--secondary:not(:disabled):not([aria-disabled=true]):hover{background:var(--lucy-leaf)}
.lucy-button:focus-visible{outline:2px solid var(--lucy-charcoal);outline-offset:3px;box-shadow:0 0 0 3px var(--lucy-cream)}
.lucy-button:disabled{opacity:.4;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.lucy-button{transition:none}}


/* Sign-in: genuinely new, no existing design-system approval to port -- kept
   deliberately minimal and consistent with the site's card language. */
.signin-field{display:block;margin-bottom:16px}
.signin-field span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.signin-field input{width:100%;min-height:44px;padding:10px 14px;border:2px solid var(--lucy-charcoal);border-radius:4px;font:16px var(--lucy-reading);background:var(--lucy-cream);color:var(--lucy-charcoal)}
.signin-field input:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:2px}
.signin-status{margin-top:16px;font-size:14px}
.signin-status[data-tone=error]{color:#8a2f2f}


.next{max-width:1100px;margin:0 auto;padding:8px 32px 48px}.tag{display:inline-block;background:var(--lucy-leaf);padding:5px 10px;font-weight:700;font-size:.75rem;letter-spacing:.06em}h2{font:700 1.625rem/1.2 var(--lucy-display);letter-spacing:-.04em;margin:14px 0 10px}.next p{margin:0;max-width:55ch}
.footer{background:var(--lucy-charcoal);padding:48px 32px 40px}.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.footer-logo{width:200px;max-width:70%;height:auto;display:block}.footer-tagline{margin:0;font:700 .8125rem/1.3 var(--lucy-display);letter-spacing:.06em;text-transform:uppercase;color:var(--lucy-pink)}.footer-handle{margin:0;font-size:.875rem;color:var(--lucy-cream)}.footer-handle strong{color:var(--lucy-cream)}.footer-legal{margin:0;font-size:.875rem}.footer-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--lucy-cream);text-underline-offset:.25em}.footer-legal a:focus-visible{outline:3px solid var(--lucy-cream);outline-offset:4px}
/* Social icons now live in the footer (dark), not the coming-soon section (light): invert the
   dark icon glyphs and flip the tooltip to cream-on-charcoal so both stay legible here. */
.footer-social{margin:0}
.footer-social .social-link{background:transparent}
.footer-social .social-link img{filter:invert(1)}
.footer-social .social-link:hover,.footer-social .social-link:focus-visible{background:rgba(255,247,235,.14)}
.footer-social .social-link:active{background:rgba(237,135,150,.35)}
.footer-social .social-tooltip{background:var(--lucy-cream);color:var(--lucy-charcoal)}
@media(min-width:1600px){.hero{padding-top:48px}.character-area{grid-template-columns:1fr 470px 1fr}}
@media(max-width:1000px){.character-area{grid-template-columns:1fr 360px 1fr;gap:0}.note{font-size:1rem;padding:16px}.hello{padding-left:0}.hello p{font-size:1rem}.next{padding:32px;gap:24px}}
@media(max-width:760px){.hero{padding:30px 20px 0}.eyebrow{font-size:.75rem;letter-spacing:.04em;margin-bottom:16px}h1{font-size:clamp(2.1rem,7.6vw,3.3rem);line-height:1.12}.character-area{grid-template-columns:1fr;max-width:390px;margin-top:18px}.lucy-wrap{width:290px;max-width:92%;justify-self:center}.note{position:absolute;left:-3px;top:15px;z-index:3;font-size:.8125rem;padding:10px 12px;transform:rotate(-8deg)}.hello{transform:none;text-align:center;justify-self:center;margin:-2px 0 24px}.hello-label{display:none}.hello p{margin:0;font-size:1rem}.hello p br{display:none}.hello p br:after{content:' '}.confetti-a{left:5%;top:42%;width:12px;height:12px}.confetti-b{right:6%;top:52%;width:12px;height:12px}.confetti-c{display:none}.next{display:block;padding:30px 24px 36px;text-align:center}.next-copy p{font-size:1rem}h2{font-size:1.5rem}.actions{align-items:center;margin-top:24px;gap:10px}.button{max-width:100%;gap:12px}.footer{padding:32px 20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:760px){h1 span{display:inline-block}.note{max-width:65%}}
@media(max-width:760px){.note{position:relative;left:auto;top:auto;justify-self:start;max-width:90%;margin:0 0 -8px 8px}.lucy-wrap{margin-top:8px}}

@font-face{font-family:'Courier Prime';src:url('assets/courier-prime-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}

/* Equal prominence for all currently public, active channel destinations. */
.social-links{display:grid;grid-template-columns:repeat(8,44px);gap:8px;scroll-margin-top:24px;margin-bottom:6px}
.social-link{width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:4px;background:var(--lucy-cream);transition:background 150ms}
.social-link:hover,.social-link:focus-visible{background:var(--lucy-butter)}
.social-link:active{background:var(--lucy-pink)}
.social-link img{display:block;width:22px;height:22px}
.social-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:3px 8px;background:var(--lucy-charcoal);color:var(--lucy-cream);font-size:.75rem;white-space:nowrap;border-radius:4px;pointer-events:none;visibility:hidden;z-index:5}
.social-link:hover .social-tooltip,.social-link:focus-visible .social-tooltip{visibility:visible}
@media(min-width:761px) and (max-width:1000px){.social-links{grid-template-columns:repeat(4,44px)}}
@media(max-width:760px){.social-links{grid-template-columns:repeat(4,44px);gap:12px 20px;margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.social-link{transition:none}}

/* Shared primary navigation. Base rules copied from design-system/src/library.css's .lucy-nav
   (the approved, tested Navigation component), not reinvented. Scope + soon-state below are additive. */
.lucy-component-scope{container-type:inline-size;position:sticky;top:0;z-index:20;background:var(--lucy-cream);border-bottom:1px solid #26252325}
.lucy-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:20px 32px;flex-wrap:wrap;transition:padding 200ms ease}
.lucy-nav__brand{display:inline-flex;align-items:center;min-height:44px}
.lucy-nav__brand img,.lucy-nav__brand svg{width:180px;max-width:100%;height:auto;transition:width 200ms ease}
.lucy-nav__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;list-style:none;margin:0;padding:0}

/* Each destination is a small sticky note: a flat paper card, gently tilted, hard offset
   shadow, echoing the "Big ears. Bigger personality." note in the hero. Combines rotation
   with the scroll lift below via custom properties, so the two transforms don't fight. */
.lucy-nav__item{background:var(--lucy-cream);border:2px solid var(--lucy-charcoal);border-radius:3px;box-shadow:3px 3px 0 var(--lucy-charcoal);--tilt:-2deg;transform:rotate(var(--tilt)) translateY(var(--lift,0px));transition:transform 200ms ease,box-shadow 150ms ease}
/* Original asymmetric tilts, restored at the owner's request (11 Oct 2026) after the UX review F3 had flattened them.
   The review's concern (neighbouring chips look crowded) is kept in docs/ux-review/ as an open finding; the gap stays 12px. */
.lucy-nav__item:nth-child(2n){--tilt:2deg}
.lucy-nav__item:nth-child(3n){--tilt:-3deg}
.lucy-nav__item:nth-child(4n){--tilt:1.5deg}
.lucy-nav__item:hover,.lucy-nav__item:focus-within{--tilt:0deg;box-shadow:4px 4px 0 var(--lucy-charcoal)}
.lucy-nav__links a,.lucy-nav__links [aria-disabled],.lucy-nav__toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 14px;color:var(--lucy-charcoal);font:600 15px/22px var(--lucy-reading);text-decoration:none}
.lucy-nav__links a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.lucy-nav a:focus-visible,.lucy-nav button:focus-visible{outline:2px solid var(--lucy-charcoal);outline-offset:3px;box-shadow:0 0 0 3px var(--lucy-cream)}
.lucy-nav__toggle{display:none;background:var(--lucy-cream);border:2px solid var(--lucy-charcoal);cursor:pointer}
/* Icon-only menu button (owner decision 9 Oct 2026, no word): 44 x 44, name comes from aria-label. */
.lucy-nav__toggle{justify-content:center;width:44px;padding:0;color:var(--lucy-charcoal)}
.lucy-nav__toggle .ic-x{display:none}.lucy-nav.is-open .lucy-nav__toggle .ic-bars{display:none}.lucy-nav.is-open .lucy-nav__toggle .ic-x{display:block}
.lucy-nav.is-open .lucy-nav__toggle{background:var(--lucy-leaf)}
/* Unavailable destinations (Shop until the store exists): a flat dashed chip with no shadow and text at
   75 percent charcoal on an 8 percent tint (about 5.6:1), so it no longer looks like a live link (UX review F4, F17).
   No opacity is used: opacity .4 would give only about 2.4:1. The dot marker + title/aria-label stay. */
.lucy-nav__links [aria-disabled=true]{cursor:default;color:color-mix(in srgb,var(--lucy-charcoal) 75%,var(--lucy-cream))}
.lucy-nav__soon-dot{display:inline-block;width:5px;height:5px;margin-left:5px;border-radius:50%;background:currentColor;vertical-align:middle}

/* A color per destination. Final mapping matches the Storybook colorful-compact cards exactly
   (Play pink, Watch butter, Meet the friends leaf) plus the user's own extension for the two
   items that study doesn't cover (Shop sky, My Lucy full-strength butter as "the last one").
   Watch and My Lucy share yellow but aren't neighbors in the nav, so it doesn't repeat visibly.
   Same recipe for all: a light tint of the item's color plus a matching shadow, stronger tint
   on hover — kept uniform after an earlier pass left Play/Watch/Shop shadow-only by mistake. */
.lucy-nav__item--play{background:color-mix(in srgb,var(--lucy-pink) 18%,var(--lucy-cream));box-shadow:3px 3px 0 var(--lucy-pink)}
.lucy-nav__item--play:hover{box-shadow:4px 4px 0 var(--lucy-pink);background:color-mix(in srgb,var(--lucy-pink) 30%,var(--lucy-cream))}
.lucy-nav__item--watch{background:color-mix(in srgb,var(--lucy-butter) 18%,var(--lucy-cream));box-shadow:3px 3px 0 var(--lucy-butter)}
.lucy-nav__item--watch:hover{box-shadow:4px 4px 0 var(--lucy-butter);background:color-mix(in srgb,var(--lucy-butter) 30%,var(--lucy-cream))}
.lucy-nav__item--world{background:color-mix(in srgb,var(--lucy-leaf) 18%,var(--lucy-cream));box-shadow:3px 3px 0 var(--lucy-leaf)}
.lucy-nav__item--world:hover{box-shadow:4px 4px 0 var(--lucy-leaf);background:color-mix(in srgb,var(--lucy-leaf) 30%,var(--lucy-cream))}
.lucy-nav__item--shop{background:color-mix(in srgb,var(--lucy-sky) 18%,var(--lucy-cream));box-shadow:3px 3px 0 var(--lucy-sky)}
.lucy-nav__item--shop:hover{box-shadow:4px 4px 0 var(--lucy-sky);background:color-mix(in srgb,var(--lucy-sky) 30%,var(--lucy-cream))}
.lucy-nav__mylucy{background:var(--lucy-butter);box-shadow:3px 3px 0 var(--lucy-charcoal)}
.lucy-nav__mylucy:hover{box-shadow:4px 4px 0 var(--lucy-charcoal)}
.lucy-nav__item:has(>[aria-disabled=true]),.lucy-nav__item:has(>[aria-disabled=true]):hover{background:color-mix(in srgb,var(--lucy-charcoal) 8%,var(--lucy-cream));border-style:dashed;box-shadow:none}
/* UX review F27 (owner decision 9 Oct 2026): the logo with its slogan and five chips need about 1070px for one row, so
   below 1080px the five destinations sit behind an icon-only menu button and the slogan stays visible down to 600px. */
@container(max-width:1079px){.lucy-nav{padding:14px 32px;gap:16px;flex-wrap:wrap}.lucy-nav__toggle{display:inline-flex}.lucy-nav__links{display:none;width:100%;gap:12px}.lucy-nav.is-open .lucy-nav__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.lucy-nav__links a,.lucy-nav__links [aria-disabled]{width:100%;justify-content:center}.lucy-nav__item{transform:none}}
@container(max-width:760px){.lucy-nav{padding:14px 20px}}
@container(max-width:599px){.lucy-nav{padding:16px 20px}.lucy-nav__brand img{width:150px}.lucy-nav__links{flex-direction:column;align-items:stretch;gap:8px}.lucy-nav.is-open .lucy-nav__links{display:flex}.lucy-nav__links a,.lucy-nav__links [aria-disabled]{justify-content:flex-start}}

#main,#social{scroll-margin-top:80px}
/* UX review F1 (7 Oct 2026): on a short screen (landscape phone, 200 percent zoom) the sticky header took
   33 to 38 percent of the height. Below 520px tall it scrolls away with the page. */
@media(max-height:520px){.lucy-component-scope{position:static}}
/* Logo beside the slogan on wide screens, reconstructed with live text to match the game's
   header bar exactly (game/dist/shared/stage-screens/screens.css .header-bar-integrated
   .left-logo). On narrow screens, don't reconstruct at all: Storybook's own Foundations/Logo
   guidance says to keep the canonical outlined artwork "independent of the live text fonts",
   and reconstructing it at small size was exactly what looked wrong. So narrow just shows the
   one approved stacked-with-slogan SVG (assets/brand/approved/pixel-lucy/..-stacked-light-
   slogan.svg) as a single image, and the live-text version is hidden entirely. */
.lucy-nav__identity{display:flex;flex-direction:row;align-items:center;gap:10px}
.lucy-nav__brand--narrow{display:none}
.lucy-nav__brand--narrow img{width:160px;max-width:100%;height:auto;display:block}
/* Values copied exactly from the real game header (game/dist/shared/stage-screens, .slogan-text
   inspected live), not re-guessed: 14px, normal line-height/letter-spacing, 1px #ccc divider,
   10px padding. The earlier 18px/2px-charcoal-divider pass didn't match it and, being wider,
   pushed the nav row into wrapping at moderate widths. */
/* font-family is deliberately NOT var(--lucy-display)/Courier Prime here: the bounding-box
   math matched the game already (center 44px = 44px), but the glyphs still sat high in the
   box, because "normal" line-height is resolved from each font FILE's own internal vertical
   metrics, and Courier Prime's differ from the game's actual font. Using the exact same stack
   the game uses is what actually reproduces the same glyph position, not just the same box. */
.tagline{margin:0;padding-left:10px;border-left:1px solid #ccc;white-space:nowrap;font-weight:700;font-size:.875rem;line-height:normal;letter-spacing:normal;text-transform:uppercase;color:var(--lucy-charcoal);font-family:"Courier New",Courier,monospace;transition:font-size 200ms ease,padding 200ms ease}
@container(max-width:599px){.lucy-nav__brand--wide,.tagline{display:none}.lucy-nav__brand--narrow{display:block}}

/* The heart gives a little greeting when the page loads: two quick beats, then it rests. */
.logo-heart{transform-box:fill-box;transform-origin:50% 50%;animation:logo-heart-beat .7s ease-in-out 2}
@keyframes logo-heart-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

/* 12 Oct 2026, owner decision: the header keeps one size while scrolling. The earlier compact-on-scroll
   state (smaller logo and slogan, nav items dropping past the bottom line) is removed: there is room
   for the full header, and on short pages the height change made the page jump back and forth
   around the scroll threshold. */
@media(prefers-reduced-motion:reduce){.lucy-nav__item{transition:none}}

/* Small, finite feedback: a short lift on hover/press, never a persistent bounce. */
.lucy-nav__links a,.play-link{transition:transform 150ms ease,background-color 150ms ease}
.play-link:active{transform:translateY(1px)}
@media(hover:hover) and (pointer:fine){.lucy-nav__links a:hover{transform:translateY(-1px)}.play-link:hover{transform:translateY(-1px)}}

/* A small butterfly visits Lucy: two float cycles, then it settles. Reuses the approved
   butterfly-v01-transparent artwork and the finite cc-float timing from colorful-compact.css. */
.hero-butterfly{position:absolute;right:0;top:6px;width:90px;height:90px;object-fit:contain;image-rendering:pixelated;animation:hero-butterfly-float 2s ease-in-out 2}
@keyframes hero-butterfly-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:1000px){.hero{grid-template-columns:180px minmax(0,1fr);gap:20px;padding:24px}.hero-scene{width:180px;height:190px}.hero-lucy{width:170px;height:180px}.hero-butterfly{width:70px;height:70px;right:-6px}}
@media(max-width:760px){.hero{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:20px 16px;margin-top:8px}.hero-scene{width:84px;height:84px}.hero-lucy{width:84px;height:84px;bottom:auto;top:0}.hero-butterfly{width:34px;height:34px;top:-6px;right:-6px}.hero-copy .eyebrow{font-size:10px}.hero-copy h1{font-size:clamp(22px,6.8vw,30px)}.hero-copy p{font-size:14px}.hero-cta{gap:14px}.choices{grid-template-columns:1fr;gap:10px;margin-bottom:24px}.choice{padding:16px 40px 16px 18px}.episodes-wrap{padding:0 16px}.episodes{grid-template-columns:1fr;gap:14px}}
@media(prefers-reduced-motion:reduce){.lucy-nav *,.lucy-nav__links a,.lucy-nav__links a::after,.play-link,.tagline,.lucy-nav__brand img,.lucy-nav__brand svg{transition:none}.hero-butterfly,.logo-heart{animation:none}}

/* 11 Oct 2026 alignment pass. The Watch list and the Play hub now share the hero's outer edges
   (same --page-gutter formula as .hero, .choices and .friends) instead of sitting 32px inside them. */
.watch{width:min(1100px,calc(100% - 2 * var(--page-gutter)));margin:0 auto 56px}
/* Short pages (Play on a tall screen): the footer rests at the bottom of the window, not mid-page. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* 11 Oct 2026, owner request: the sky band runs edge to edge like the Coming Soon page, instead of a
   boxed card with cream margins. Content inside keeps the shared 1100px column and page gutter. */
.hero{width:100%;max-width:none;border-radius:0;margin-top:0;padding-left:max(var(--page-gutter),calc((100% - 1100px) / 2));padding-right:max(var(--page-gutter),calc((100% - 1100px) / 2))}
/* 11 Oct 2026, owner decision: on phones Lucy sits above the text at a readable size, as on Play. */
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:8px;padding-top:16px;padding-bottom:20px;margin-top:0}.hero-scene{width:150px;height:120px}.hero-lucy{width:120px;height:120px;top:auto;bottom:0}.hero-butterfly{width:40px;height:40px;top:0;right:0}.hero-copy .eyebrow{font-size:12px}.hero-copy h1{font-size:clamp(26px,7.6vw,34px)}.hero-copy p{font-size:16px}}

/* 11 Oct 2026: error red on the Sky sign-in panel was 3.26:1. Error text now sits on a Cream
   chip (7.81:1) and uses the registered --lucy-error helper color. */
.signin-status[data-tone=error]{color:var(--lucy-error);background:var(--lucy-cream);padding:8px 12px;border-radius:4px;font-weight:600;margin-top:12px}

/* 12 Oct 2026, owner request: the sky band on Home, Watch and Meet the friends uses the same layout
   as the Play page band (play.css .play-sky): same column split, Lucy size and position, heading,
   lede and button sizes, on desktop and on phones. */
.hero{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:24px;padding-top:20px;padding-bottom:20px;overflow:hidden}
.hero-scene{width:auto;height:auto;align-self:stretch;min-height:200px}
.hero-lucy{left:0;top:auto;bottom:-6px;height:96%;max-height:260px;width:auto;aspect-ratio:1}
.hero-butterfly{left:52%;right:auto;top:2%;height:32%;width:auto;aspect-ratio:1}
.hero-copy{min-width:0}
.hero-copy .eyebrow{margin:0 0 10px;font-size:.8125rem}
.hero-copy h1{font:700 clamp(1.75rem,4.4vw,3rem)/1.1 var(--lucy-display);letter-spacing:-.04em}
.hero-copy p:not(.eyebrow){margin:14px 0 18px;font:500 1.0625rem/1.4 var(--lucy-reading)}
.hero-cta{gap:10px;min-height:48px;padding:10px 22px;font:700 1.0625rem/1 var(--lucy-reading)}
@media(max-width:47.99rem){
  .hero{grid-template-columns:1fr;gap:8px;padding-top:16px;padding-bottom:16px}
  .hero-scene{min-height:120px;height:120px;width:auto}
  .hero-lucy{height:120px;max-height:none;bottom:-4px;width:auto}
  .hero-butterfly{left:calc(120px * .9);top:0;height:40px;width:auto}
}

/* 12 Oct 2026, owner decision: the footer stays dark but about a third lower, so it reads as a
   closing band. Same contents; the social links keep their 44px targets. */
.footer{padding:28px 32px 24px}
.footer-inner{gap:10px}
.footer-logo{width:170px}
/* 12 Oct 2026, owner request: the eight footer social links sit in one row whenever the width allows
   (from 480px, which covers phones in landscape). Narrow portrait phones keep two rows of four so
   every link stays 44px. */
@media(min-width:480px){.footer-social{grid-template-columns:repeat(8,44px);gap:8px}}

/* 12 Oct 2026, Meet the friends redesign: one section per world, a tile per friend, and a profile
   dialog per friend (who they are, where Lucy meets them in the game, their episodes). Tiles reuse the
   charcoal outline and hard offset shadow of the nav chips and hero button; portraits sit on a light
   tint of one palette color. The pixel heart from the logo marks "Say hi". Each tile opens the friend's
   own page (world/friend.njk): breadcrumb, one large framed portrait, the line, then boxed sections. */
.fr-world{margin:32px auto 8px}
.fr-world+.fr-world{margin-top:44px}
.fr-world:last-of-type{margin-bottom:56px}
.fr-world__head{margin:0 0 18px}
.fr-world__head .eyebrow{margin:0 0 6px;font-size:.75rem}
.fr-world__head h2{font:700 clamp(1.625rem,3vw,2.125rem)/1.1 var(--lucy-display);letter-spacing:-.04em;margin:0 0 6px}
.fr-world__head p:last-child{margin:0;font:500 1rem/1.4 var(--lucy-reading)}
.fr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fr-grid>li{display:flex}
.fr-tile{flex:1;display:flex;flex-direction:column;padding:10px 10px 14px;background:var(--lucy-cream);color:var(--lucy-charcoal);text-decoration:none;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-card);box-shadow:4px 4px 0 var(--lucy-charcoal);transition:transform 150ms ease,box-shadow 150ms ease}
.fr-tile:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:4px}
.fr-tile:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--lucy-charcoal)}
@media(hover:hover) and (pointer:fine){.fr-tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--lucy-charcoal)}.fr-tile:hover .fr-art img{transform:translateY(-4px)}}
.fr-art{position:relative;display:block;aspect-ratio:1;border-radius:4px;overflow:hidden}
.fr-art img{display:block;width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;transition:transform 150ms ease}
.fr-accent--pink{background:color-mix(in srgb,var(--lucy-pink) 45%,var(--lucy-cream))}
.fr-accent--butter{background:color-mix(in srgb,var(--lucy-butter) 60%,var(--lucy-cream))}
.fr-accent--leaf{background:color-mix(in srgb,var(--lucy-leaf) 55%,var(--lucy-cream))}
.fr-accent--sky{background:color-mix(in srgb,var(--lucy-sky) 45%,var(--lucy-cream))}
.fr-soon{position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:3px;background:var(--lucy-charcoal);color:var(--lucy-cream);font:700 .6875rem/1 var(--lucy-reading);letter-spacing:.06em;text-transform:uppercase}
.fr-tile__name{margin:12px 4px 4px;font:700 1.375rem/1.1 var(--lucy-display);letter-spacing:-.03em}
.fr-tile__line{flex:1;margin:0 4px;font:400 .9375rem/1.4 var(--lucy-reading)}
.fr-tile__more{display:inline-flex;align-items:center;gap:6px;margin:12px 4px 0;font:700 .875rem/1 var(--lucy-reading)}
.fr-tile__more svg{color:var(--lucy-pink)}

@media(max-width:1000px){.fr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.fr-world{margin-top:24px}.fr-world+.fr-world{margin-top:36px}.fr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.fr-tile{padding:8px 8px 12px}.fr-tile__name{font-size:1.1875rem;margin-top:10px}.fr-tile__line{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.fr-tile,.fr-art img{transition:none}.fr-tile:hover .fr-art img{transform:none}.fp-art img{transition:none}}

/* Friend page, /world/<id>/. Square-ish 8px frames and hard shadows, no soft rounding. */
.fp{width:min(1100px,calc(100% - 2 * var(--page-gutter)));margin:0 auto 56px}
.fp-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:20px 0 20px;padding:0;font:500 .9375rem/1.4 var(--lucy-reading)}
.fp-crumbs li+li::before{content:"/";margin:0 10px;color:color-mix(in srgb,var(--lucy-charcoal) 55%,var(--lucy-cream))}
.fp-crumbs a{color:var(--lucy-charcoal);text-underline-offset:3px}
.fp-crumbs a:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:2px}
.fp-crumbs [aria-current]{font-weight:700}
.fp-intro{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:center}
.fp-art{position:relative;aspect-ratio:1;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-card);box-shadow:6px 6px 0 var(--lucy-charcoal);overflow:hidden}
.fp-art img{display:block;width:100%;height:100%;object-fit:contain;padding:7%;box-sizing:border-box;animation:fp-hello .6s ease-out 1}
@keyframes fp-hello{0%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
.fp-copy .eyebrow{margin:0 0 10px;font-size:.8125rem}
.fp-copy h1{margin:0 0 12px;font:700 clamp(2.5rem,6vw,4rem)/1 var(--lucy-display);letter-spacing:-.05em}
.fp-line{margin:0 0 16px;font:500 clamp(1.125rem,2vw,1.375rem)/1.4 var(--lucy-reading)}
.fp-kind{display:inline-block;margin:0;padding:5px 10px;background:var(--lucy-leaf);font:700 .75rem/1.2 var(--lucy-reading);letter-spacing:.06em;text-transform:uppercase}
.fp-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:40px}
.fp-box{padding:22px 24px 24px;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-card);background:var(--lucy-cream);box-shadow:4px 4px 0 var(--lucy-charcoal)}
.fp-box h2{margin:0 0 10px;font:700 .8125rem/1.2 var(--lucy-reading);letter-spacing:.1em;text-transform:uppercase}
.fp-box p{margin:0;font:400 1.0625rem/1.5 var(--lucy-reading)}
.fp-action{margin-top:16px}
.fp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}.fp-actions .fp-action{margin-top:0}
.fr-episodes{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.fr-episodes li{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fr-episodes__meta{font:700 .75rem/1.3 var(--lucy-reading);letter-spacing:.06em}
.fr-episodes__title{font:700 1.25rem/1.25 var(--lucy-display);letter-spacing:-.02em}
.fr-episodes__desc{font:400 1rem/1.45 var(--lucy-reading)}
.fp-more{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;padding-top:16px;border-top:2px solid var(--lucy-charcoal)}
.fp-more a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--lucy-radius-control);color:var(--lucy-charcoal);text-decoration:none;font:700 1rem/1 var(--lucy-reading)}
.fp-more a:hover{background:color-mix(in srgb,var(--lucy-leaf) 45%,var(--lucy-cream))}
.fp-more a:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:2px}
.fp-more .fp-more__all{border:2px solid var(--lucy-charcoal);box-shadow:2px 2px 0 var(--lucy-charcoal)}
@media(max-width:760px){
  .fp-crumbs ol{margin:14px 0;font-size:.875rem}
  .fp-intro{grid-template-columns:1fr;gap:20px}
  .fp-art{width:min(100%,320px);justify-self:center;box-shadow:4px 4px 0 var(--lucy-charcoal)}
  .fp-copy{text-align:center}
  .fp-boxes{margin-top:28px;gap:16px}
  .fp-box{padding:18px 18px 20px}
  .fp-more{margin-top:28px}
  .fp-more a{padding:0 8px}
}
@media(prefers-reduced-motion:reduce){.fp-art img{animation:none}}

/* 12 Oct 2026 Watch page. A "Who's in it?" row of the approved portraits (all nine characters,
   grouped by world; no video yet = dimmed "Soon", not pickable), then one shelf per kind:
   Episodes 16:9 and Shorts 9:16. Posters are drawn from the portraits, so nothing loads from
   YouTube until the visitor clicks out. Each card opens /watch/<id>/, which follows the friend
   page layout (breadcrumb, framed art, short copy, boxed "Who's in it"). Square corners, hard shadows. */
.watch-label{margin:0 0 14px;font:700 .8125rem/1.2 var(--lucy-reading);letter-spacing:.1em;text-transform:uppercase}
.cast-filter{margin:28px 0 36px}
.cast-scroll{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 28px}
.cast-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.cast-group__label{font:700 .75rem/1.2 var(--lucy-reading);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--lucy-charcoal) 70%,var(--lucy-cream))}
.cast-group__row{display:flex;gap:10px}
.cast-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:0;background:none;border:0;color:var(--lucy-charcoal);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cast-face{display:block;width:72px;height:72px;box-sizing:border-box;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-control);box-shadow:3px 3px 0 var(--lucy-charcoal);overflow:hidden;transition:transform 150ms ease,box-shadow 150ms ease}
.cast-face img{display:block;width:100%;height:100%;object-fit:contain;padding:6%;box-sizing:border-box}
.cast-face--all{display:flex;align-items:center;justify-content:center;background:var(--lucy-cream);font:700 1.125rem/1 var(--lucy-display);letter-spacing:-.02em}
.cast-name{font:600 .875rem/1.2 var(--lucy-reading);text-align:center;text-underline-offset:3px}
.cast-btn[aria-pressed=true] .cast-face{outline:3px solid var(--lucy-pink);outline-offset:2px;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--lucy-charcoal)}
.cast-btn[aria-pressed=true] .cast-name{font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.cast-btn:focus-visible{outline:none}
.cast-btn:focus-visible .cast-face{outline:3px solid var(--lucy-charcoal);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.cast-btn:not(:disabled):not([aria-pressed=true]):hover .cast-face{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--lucy-charcoal)}}
.cast-btn:disabled{cursor:default}
.cast-btn:disabled .cast-face{filter:grayscale(.85);opacity:.5;box-shadow:none;border-style:dashed}
.cast-btn:disabled .cast-name{opacity:.6}
.cast-soon{position:absolute;top:-6px;right:-2px;padding:3px 5px;border-radius:2px;background:var(--lucy-charcoal);color:var(--lucy-cream);font:700 .625rem/1 var(--lucy-reading);letter-spacing:.06em;text-transform:uppercase}
.shelf+.shelf{margin-top:40px}
.vgrid{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.vgrid--episodes{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.vgrid--shorts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.vcard{display:flex}
.vcard[hidden],.shelf[hidden]{display:none}
.vcard__link{flex:1;display:flex;flex-direction:column;background:var(--lucy-cream);color:var(--lucy-charcoal);text-decoration:none;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-card);box-shadow:4px 4px 0 var(--lucy-charcoal);overflow:hidden;transition:transform 150ms ease,box-shadow 150ms ease}
.vcard__link:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:4px}
.vcard__link:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--lucy-charcoal)}
@media(hover:hover) and (pointer:fine){.vcard__link:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--lucy-charcoal)}}
.vcard__meta{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px;border-top:2px solid var(--lucy-charcoal)}
.vcard__eyebrow{font:700 .75rem/1.3 var(--lucy-reading);letter-spacing:.06em}
.vcard__title{font:700 1.25rem/1.2 var(--lucy-display);letter-spacing:-.02em}
.vcard__desc{font:400 .9375rem/1.45 var(--lucy-reading)}
.vposter{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(to bottom,color-mix(in srgb,var(--lucy-sky) 55%,var(--lucy-cream)) 0 78%,var(--lucy-leaf) 78% 100%);overflow:hidden}
.vposter--short{aspect-ratio:9/16;background:linear-gradient(to bottom,color-mix(in srgb,var(--lucy-sky) 55%,var(--lucy-cream)) 0 84%,var(--lucy-leaf) 84% 100%)}
.vposter__faces{position:absolute;left:6%;right:6%;bottom:6%;top:12%;display:flex;align-items:flex-end;justify-content:center}
.vposter__faces img{display:block;height:100%;width:auto;max-width:48%;object-fit:contain;object-position:bottom;image-rendering:pixelated}
.vposter__faces--2 img+img,.vposter__faces--3 img+img{margin-left:-6%}
.vposter__faces--3 img{height:82%}
.vposter__faces--3 img:first-child{height:100%}
.vposter--short .vposter__faces{flex-direction:column;align-items:center;justify-content:flex-end;top:18%}
.vposter--short .vposter__faces img{max-width:86%;height:auto;max-height:60%}
.vposter--short .vposter__faces img+img{margin:-12% 0 0}
.vposter--ground .vposter__faces{flex-direction:row;align-items:flex-end;justify-content:center;left:0;right:0;bottom:8%;top:auto}
.vposter--ground .vposter__faces img{max-width:none;max-height:none;width:64%;height:auto}
.vposter--ground .vposter__faces img+img{margin:0 0 0 -26%}
.vposter__badge{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:2px;background:var(--lucy-charcoal);color:var(--lucy-cream);font:700 .75rem/1 var(--lucy-display);letter-spacing:.02em}
.vposter__soon{position:absolute;top:10px;right:10px;padding:5px 8px;border-radius:2px;background:var(--lucy-butter);border:2px solid var(--lucy-charcoal);font:700 .6875rem/1 var(--lucy-reading);letter-spacing:.06em;text-transform:uppercase}
.vposter__play{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--lucy-pink);color:var(--lucy-charcoal);border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-control);box-shadow:3px 3px 0 var(--lucy-charcoal)}
.vposter__play svg{margin-left:3px;width:14px;height:17px}
.watch-empty{margin:20px 0 0;font:500 .9375rem/1.4 var(--lucy-reading)}
.watch-empty:empty{display:none}
.vp-intro{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;align-items:center}
.vp-art .vposter{border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-card);box-shadow:6px 6px 0 var(--lucy-charcoal)}
.vp-art .vposter--short{max-width:320px}
.vp-copy h1{font-size:clamp(2rem,4.6vw,3.25rem)}
.vp-note{margin:12px 0 0;font:400 .9375rem/1.4 var(--lucy-reading)}
.vp-art{display:block}
.vplayer{position:relative;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-card);box-shadow:6px 6px 0 var(--lucy-charcoal);overflow:hidden;background:var(--lucy-charcoal)}
.vplayer--short{max-width:320px}
.vplayer .vposter{border:0;border-radius:0;box-shadow:none}
.vplayer__start{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.vplayer__start:focus-visible{outline:3px solid var(--lucy-pink);outline-offset:-5px}
.vplayer__start .vposter__play{top:auto;bottom:14px;right:14px;width:64px;height:64px;transition:transform 150ms ease,box-shadow 150ms ease}
.vplayer__start .vposter__play svg{width:22px;height:26px}
@media(hover:hover) and (pointer:fine){.vplayer__start:hover .vposter__play{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--lucy-charcoal)}}
.vplayer iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vplayer--short iframe{aspect-ratio:9/16}
.vp-play svg{margin-left:2px}
.vp-cast{margin-top:40px;width:fit-content;max-width:100%;box-sizing:border-box;min-width:min(100%,320px)}
.vp-cast__list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px}
.vp-cast__item{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;color:var(--lucy-charcoal);text-decoration:none}
a.vp-cast__item .cast-name{text-decoration:underline;text-underline-offset:3px}
a.vp-cast__item:focus-visible{outline:none}
a.vp-cast__item:focus-visible .cast-face{outline:3px solid var(--lucy-charcoal);outline-offset:3px}
@media(hover:hover) and (pointer:fine){a.vp-cast__item:hover .cast-face{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--lucy-charcoal)}}
@media(max-width:760px){
  .cast-filter{margin:20px 0 28px}
  /* One swipeable row on a phone, bleeding to the screen edge so it reads as scrollable. */
  .cast-scroll{flex-wrap:nowrap;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(-1 * var(--page-gutter));padding:6px var(--page-gutter) 10px;scrollbar-width:none}
  .cast-scroll::-webkit-scrollbar{display:none}
  .cast-group{flex:none}
  .cast-btn{width:64px;scroll-snap-align:start}
  .cast-face{width:60px;height:60px}
  .cast-name{font-size:.8125rem}
  .vgrid{gap:16px}
  .vgrid--shorts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-intro{grid-template-columns:1fr;gap:20px}
  .vp-art .vposter{box-shadow:4px 4px 0 var(--lucy-charcoal)}
  .vp-art .vposter--short{margin:0 auto;max-width:240px}
  .vplayer{box-shadow:4px 4px 0 var(--lucy-charcoal)}
  .vplayer--short{margin:0 auto;max-width:240px}
  .vp-copy{text-align:left}
  .vp-cast{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){.cast-face,.vcard__link{transition:none}}

/* 12 Oct 2026, owner request: the seated Lucy file has more empty space around her than the other
   poses, so she is drawn 12% larger, anchored at her feet, to match them. The image file is unchanged. */
.hero-lucy--seated{transform:scale(1.12);transform-origin:16% 90%}

/* Watch video window (12 Oct 2026): a tapped card plays in a dialog over the page, like the game's
   video modal. Charcoal frame and hard shadow as on the cards; shorts get a narrow 9:16 window sized
   to the screen height. The dialog itself has no padding, so a click whose target is the dialog is a
   click on the backdrop. */
.vmodal{padding:0;width:min(1200px,calc(100vw - 32px),calc((100dvh - 170px) * 16 / 9));min-width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-dialog);box-shadow:6px 6px 0 var(--lucy-charcoal);background:var(--lucy-cream);color:var(--lucy-charcoal);overflow:auto}
.vmodal::backdrop{background:color-mix(in srgb,var(--lucy-charcoal) 72%,transparent)}
.vmodal--short{width:min(420px,calc((100dvh - 190px) * 9 / 16),calc(100vw - 32px))}
.vmodal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 12px 20px}
.vmodal__eyebrow{margin:0 0 4px;font:700 .75rem/1 var(--lucy-reading);letter-spacing:.08em}
.vmodal__title{margin:0;font:700 clamp(1.25rem,2.6vw,1.75rem)/1.1 var(--lucy-display);letter-spacing:-.03em}
.vmodal__close{flex:none;display:grid;place-items:center;width:var(--lucy-target-min);height:var(--lucy-target-min);padding:0;border:2px solid var(--lucy-charcoal);border-radius:var(--lucy-radius-control);background:var(--lucy-cream);color:var(--lucy-charcoal);box-shadow:3px 3px 0 var(--lucy-charcoal);cursor:pointer}
.vmodal__close:focus-visible{outline:3px solid var(--lucy-pink);outline-offset:2px}
.vmodal__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--lucy-charcoal)}
.vmodal__frame{background:var(--lucy-charcoal);border-block:2px solid var(--lucy-charcoal)}
.vmodal__frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vmodal--short .vmodal__frame iframe{aspect-ratio:9/16}
.vmodal__foot{margin:0;padding:12px 20px 16px;font:400 .9375rem/1.4 var(--lucy-reading)}
.vmodal__foot a{color:var(--lucy-charcoal);text-underline-offset:3px}
.vmodal__foot a:focus-visible{outline:3px solid var(--lucy-charcoal);outline-offset:2px}
@media(max-width:560px){.vmodal{box-shadow:4px 4px 0 var(--lucy-charcoal)}.vmodal__head{padding:12px 12px 10px 14px}.vmodal__foot{padding:10px 14px 14px}}
/* Phones held sideways: title, close and cast move into a column beside the video, so the video gets
   the full screen height (same arrangement as the game's video window). */
@media(orientation:landscape) and (max-height:540px){
  .vmodal[open],.vmodal--short[open]{display:grid;grid-template-columns:auto 168px;grid-template-rows:auto 1fr;width:fit-content;max-width:calc(100vw - 32px)}
  .vmodal__frame{grid-column:1;grid-row:1/3;border-block:0;border-inline-end:2px solid var(--lucy-charcoal)}
  .vmodal__frame iframe{width:auto;height:min(calc(100dvh - 36px),calc((100vw - 36px - 170px) * 9 / 16))}
  .vmodal--short .vmodal__frame iframe{height:calc(100dvh - 36px)}
  .vmodal__head{grid-column:2;flex-direction:column-reverse;align-items:stretch;gap:10px;padding:10px 10px 6px 12px}
  .vmodal__close{width:100%}
  .vmodal__title{font-size:1.125rem}
  .vmodal__foot{grid-column:2;align-self:end;padding:6px 10px 10px 12px;font-size:.8125rem}
}