/*
 * Production overrides for the byte-for-byte v4 styles loaded before this file.
 * 1. Bricolage Grotesque replaces all provisional demo families.
 * 2. Mobile uses a full-width page; desktop-phone.css adds a phone frame on larger viewports.
 * 3. On mobile, natural document scrolling replaces the demo slide viewport; the page
 *    background stays viewport-fixed and the sticky header reuses it, as the demo header did.
 * 4. The intro title is allowed to shrink for long translated words.
 * 5. Mobile dialog overlays target the real viewport; the product halo is slightly reinforced.
 * No demo component styling is altered or removed from base.css/screens.css.
 */
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2");font-display:swap}

*,button,input,select,textarea{font-family:"Bricolage Grotesque",system-ui,sans-serif!important}
html,body{height:auto;min-height:100%;background:var(--paper)}
body{display:block;padding:0}
.phone{width:min(100%,760px);max-width:760px;margin:0 auto;padding:0;border-radius:0;background:transparent;box-shadow:none}
.phone::before{display:none}
.screen{min-height:100dvh;height:auto;padding-top:0;border-radius:0;overflow:visible}
.scroll{flex:0 0 auto;overflow:visible}
.hdr{position:sticky;top:0;padding:0 16px}
/* The demo screen had the viewport height and a fixed background, with the header transparent over it.
   The page background is now a viewport-fixed layer; the sticky header repaints the same gradient on
   the same box, so it takes the page colour while still masking the scrolled content. */
.screen{--screen-bg:radial-gradient(120% 80% at 78% 8%,#fbfbfe 0%,transparent 55%),linear-gradient(155deg,#e7e7f1,#eef0f8 45%,#f4f4fa);background:none;isolation:isolate}
.screen--violet{--screen-bg:radial-gradient(110% 70% at 50% 0%,#908dce 0%,transparent 60%),linear-gradient(170deg,#807dc3,#605da6 52%,#4d4a93)}
.screen::before,.snow{position:fixed;top:0;left:50%;width:min(100%,760px);height:100dvh;transform:translateX(-50%)}
.screen::before{content:"";z-index:-1;background:var(--screen-bg)}
.hdr{background-image:var(--screen-bg);background-size:100% 100dvh;background-repeat:no-repeat}
.snow{z-index:11}
/* Chevron drawn in CSS: the Bricolage « ‹ » glyph is too small and sits below the centre. */
/* Official wordmark: reserve space for the back button even at 320px. */
.hdr__logo{display:block;width:210px;max-width:calc(100% - 80px);height:auto}
.hdr--violet .hdr__logo{filter:brightness(0) invert(1)}
.hdr__back{font-size:0}
.hdr__back::before{content:"";width:6px;height:6px;margin-left:2px;border-left:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg)}
.fullpage{min-height:auto}
.intro__title{font-size:clamp(32px,10vw,52px);overflow-wrap:anywhere}
.lang{min-height:calc(100dvh - 58px);flex:1}
.gate,.lightbox{position:fixed}
.day-visual::before{background:radial-gradient(circle at 50% 45%,rgba(122,127,180,.42),rgba(174,175,213,.16) 48%,transparent 68%)}
@media(max-width:760px){.phone{width:100%;max-width:none}.screen{min-height:100dvh}.hdr{padding-top:env(safe-area-inset-top,0)}}
@media(prefers-reduced-motion:reduce){.snow i,.scrolldown,.chev{animation:none!important}}
/* Leave enough document height to land on the mosaic below the persistent header. */
.grid-reveal{min-height:calc(100dvh - 58px)}
#mosaic{scroll-margin-top:58px}
/* Locked cases open the spoiler popup on click: no "not-allowed" cursor. */
.case--locked{cursor:pointer}
.contains__txt{white-space:normal;font-size:clamp(9px,2.7vw,11px);hyphens:auto}
.day-manuals__list{display:flex;flex-direction:column;gap:10px}