@font-face{font-family:Outfit;src:url('/assets/outfit.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{font-family:Outfit,Arial,sans-serif;color:#eef2ef;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;background:#2a241f}body{overflow-x:hidden}#journey{position:relative;height:calc(1459.9473684211vh + 187vh)}#stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}#room,#studio,canvas{position:absolute;inset:0;width:100%;height:100%}#room{object-fit:cover;z-index:0}#studio{background:radial-gradient(ellipse 92% 82% at 53% 34%,#d2b39b 0%,#c6a68b 36%,#b39278 70%,#9f7f67 100%);z-index:-1}#studio:after{content:'';position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}canvas{z-index:1;pointer-events:none;filter:blur(.20px)}header{position:absolute;z-index:3;top:38px;left:48px;right:48px;display:flex;justify-content:space-between;align-items:start;color:var(--ink)}#brand{font-size:24px;font-weight:500;letter-spacing:-1px;text-decoration:none;color:inherit}#brand span{display:block;font-size:8px;letter-spacing:2.5px;margin-top:8px;font-weight:400}#edition{font-size:11px;letter-spacing:.2em;padding-top:8px}h1{font-size:clamp(48px,5.4vw,84px)}h2{font-size:clamp(42px,4.4vw,70px)}#grey,#grey-warm{position:absolute;inset:0;z-index:-1;opacity:0}#grey{background:radial-gradient(ellipse 78% 70% at 56% 38%,#a9a9a9 0%,#999a9a 34%,#818283 70%,#6f7071 100%)}#grey-warm{background:radial-gradient(ellipse 86% 78% at 62% 34%,#a38d78 0%,#8c7764 42%,#6a5645 78%,#574536 100%)}#grey:after,#grey-warm:after{content:'';position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}#grade{position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(ellipse 90% 82% at 60% 32%,#bc9c82 0%,#a6876e 46%,#8a6d58 100%)}#chapter{position:absolute;z-index:2;right:48px;bottom:40px;font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--ink);opacity:.72}#status{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;background:#10272be6;padding:14px 20px;border-radius:5px}#status:empty{display:none}#controls{position:absolute;z-index:8;bottom:25px;left:50%;transform:translateX(-50%);width:530px;max-width:calc(100% - 32px);padding:12px 18px 10px;border:1px solid #d4ece02a;background:#0c1d24d9;backdrop-filter:blur(22px);border-radius:12px;box-shadow:0 8px 40px #0002}.control-top{display:flex;gap:10px;align-items:center}button,select{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #b8dbd5;outline-offset:3px}button:hover{color:#b1e2df}#play{font-size:11px;min-width:60px;text-align:left}#restart{font-size:20px}#time{font-size:10px;font-variant-numeric:tabular-nums;opacity:.7;margin-left:4px}.speed-label{margin-left:auto;font-size:9px;color:#b0c0c0}.speed-label select{background:#183139;border-radius:3px;font-size:10px;padding:3px}#hide{font-size:20px;margin-left:7px}#scrub{appearance:none;display:block;width:100%;height:2px;background:#567375;margin:17px 0 15px;cursor:ew-resize;accent-color:#c3dfd7}#scrub::-webkit-slider-thumb{appearance:none;background:#d8eee6;border-radius:50%;height:9px;width:9px;box-shadow:0 0 0 4px #b9d9cd15}nav{display:flex;justify-content:space-between}nav button{font-size:9px;padding:2px 0;color:#a8bbbb;letter-spacing:.3px}nav button.active{color:#fff}#show{position:absolute;z-index:8;bottom:28px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:1px;display:none;background:#0c1d248a;padding:9px 15px;border-radius:20px}.clean header,.clean .editorial,.clean #chapter,.clean #controls,.clean #show{display:none!important}.hidden-controls #controls{display:none}.dev-only{display:none}.film #controls,.film #show{display:none!important}.dev nav button.dev-only{display:inline-block}.hidden-controls #show{display:block}
/* ── Editorial type ────────────────────────────────────────────────────────────────
   Titles: Gabarito (OFL, hosted locally), soft and full-bodied, bold in the film. Folios and
   ledes: the logo's own sans (Outfit). Sizes follow the viewport height, because the photographs
   always fill the height on desktop: the type keeps its proportion to the image at 16:10 and 16:9.
   In the film the type is light, chosen per backdrop: ivory on the warm scenes, white on the grey
   ones. Where a backdrop is too bright for it, the block carries a discreet local veil in the
   scene's own shadow tone, which appears and leaves with the type (--vis, set by typeset()).
   The scroll hint and the header keep the dark ink. (Newsreader, the previous title face, stays
   declared for reference; it is no longer used and therefore never downloaded.) */
@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations'),url('/assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:block}
@font-face{font-family:'Gabarito';src:url('/assets/fonts/gabarito-latin-wght-normal.woff2') format('woff2-variations'),url('/assets/fonts/gabarito-latin-wght-normal.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:block}
:root{--ink:#17130f;--serif:'Newsreader',Georgia,'Times New Roman',serif;--display:'Gabarito',Outfit,Arial,sans-serif;--sans:Outfit,Arial,sans-serif;
 --light-white:#FFFFFF;--light-ivory:#F2F0EC;--light-pearl:#E4E4E7}
.editorial{position:absolute;z-index:2;margin:0;pointer-events:none;color:var(--ink)}
/* Each line rises through its own mask; the padding keeps ascenders and descenders whole. */
.mask{display:block;overflow:hidden;padding:.1em 0 .16em;margin:-.1em 0 -.16em}
/* The titles are tracked tight (−.035em), and the tracking is applied after the last letter too: the
   line box ends before the ink of a round final letter (the "o" of «modo» lost ~1 px plus its shadow
   to the mask, the widest line setting the width). Side padding, cancelled by an equal negative margin,
   widens the clip box without moving the text or changing the block's width. */
.title .mask{padding-left:.06em;padding-right:.14em;margin-left:-.06em;margin-right:-.14em}
.mask>span{display:block;white-space:nowrap;will-change:transform,opacity;transform:translate3d(0,104%,0);opacity:0}
.folio{margin:0;font:500 max(13px,1.5vh)/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.folio .mask>span{display:flex;align-items:center;gap:16px}
.folio .mask>span::before{content:'';width:32px;height:1px;background:currentColor;opacity:.55}
.title{margin:2.1vh 0 0;font:700 7.6vh/.98 var(--display);letter-spacing:-.035em;font-kerning:normal;text-rendering:optimizeLegibility}
#intro .title{margin-top:2vh;font-size:9.4vh;line-height:.96}#intro .lede{margin-top:2vh;font-size:max(16px,1.98vh)}
.lede{margin:2.4vh 0 0;font:400 max(17px,2.14vh)/1.38 var(--sans);letter-spacing:.005em;color:inherit}
/* Light type in the film: ivory on the warm scenes (room one, warm atmosphere, room two), white on
   the grey stage. A faint shadow of the scene's tone keeps the edges crisp on busy photography. */
#intro,#reveal,#arrival{color:var(--light-ivory)}#aircopy,#bridge{color:var(--light-white)}
#intro,#reveal,#arrival,#aircopy,#bridge{text-shadow:0 1px 2px rgba(24,19,14,.22)}
/* The small lines (folio, lede) take the brightest of the three references: they need the contrast. */
#intro .folio,#intro .lede,#reveal .folio,#reveal .lede,#arrival .folio,#arrival .lede,#aircopy .folio,#aircopy .lede{color:var(--light-white)}
#intro .folio,#reveal .folio,#arrival .folio,#aircopy .folio{text-shadow:0 1px 3px rgba(24,19,14,.4),0 0 14px rgba(24,19,14,.28)}
/* The veil is a wide, soft falloff anchored to the edge or corner of the frame nearest the type (like
   a graduated filter or the light's own falloff), never a halo around the words. It fades out well
   before the unit. Box = an ellipse of radii (--rx, --ry) centred on (--cx, --cy) in the block's frame. */
#intro::before,#reveal::before,#arrival::before,#aircopy::before,#bridge::before{content:'';position:absolute;z-index:-1;pointer-events:none;opacity:var(--vis,0);
 left:calc(var(--cx) - var(--rx));top:calc(var(--cy) - var(--ry));width:calc(var(--rx)*2);height:calc(var(--ry)*2);
 background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(var(--veil),var(--veil-a)) 0%,rgba(var(--veil),calc(var(--veil-a)*.86)) 30%,rgba(var(--veil),calc(var(--veil-a)*.45)) 64%,rgba(var(--veil),0) 100%)}
/* Room one: from the left edge, over the bright sky behind the title (centre at the frame's edge). */
#intro{--veil:52,40,26;--veil-a:.68;--cx:calc(-1 * max(72px,6vw));--cy:15vh;--rx:60vw;--ry:38vh}
/* Warm atmosphere: from the bottom-left corner (tall enough for the three-line title). */
#reveal{--veil:84,62,44;--veil-a:.54;--cx:-48px;--cy:calc(100% + 12.5vh);--rx:62vw;--ry:68vh}
/* Grey stage, airflow: from the bottom-right corner. */
#aircopy{--veil:38,39,41;--veil-a:.42;--cx:36.5vw;--cy:calc(100% + 12.5vh);--rx:50vw;--ry:58vh}
/* Room two: on the wall, around the caption, broad and low. */
#arrival{--veil:46,36,26;--veil-a:.4;--cx:45%;--cy:50%;--rx:38vw;--ry:30vh}
/* Grey stage, first section: from the right edge. The veil fades out before the frame's bottom edge
   (box from −16 to 116 vh: 81.8% = 92 vh, 87.9% = 100 vh): when the finished scene scrolls up as one block,
   its lower edge meets the site's grey without a line. */
#bridge{--veil:46,47,49;--veil-a:.42;--cx:45vw;--cy:50%;--rx:52vw;--ry:66vh}
#bridge::before{-webkit-mask:linear-gradient(#000 0,#000 81.8%,transparent 87.9%);mask:linear-gradient(#000 0,#000 81.8%,transparent 87.9%)}
/* Header. In the hero it takes the hero's own light type: the logo in the title's ivory, the payoff
   and the small edition line in the folio's white, with the folio's shadow. Behind it, a discreet veil
   in the room's shadow tone falls off from the two top corners (the bright ceiling would otherwise eat
   the small lines). As room one leaves (4.8–5.9 s) it all returns to the dark ink that reads on the
   later backdrops. --hl (1 → 0) is set by scene.js from the timeline, so it is reversible. */
header{--hl:1;text-shadow:0 1px 3px rgba(24,19,14,calc(.4 * var(--hl))),0 0 14px rgba(24,19,14,calc(.28 * var(--hl)))}
#brand{color:color-mix(in srgb,var(--light-ivory) calc(var(--hl) * 100%),var(--ink))}
#brand span,#edition{color:color-mix(in srgb,var(--light-white) calc(var(--hl) * 100%),var(--ink))}
header::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:-48px;right:-48px;top:-38px;height:34vh;opacity:var(--hl);
 background:radial-gradient(ellipse 32vw 25vh at 0 0,rgba(52,40,26,.64) 0%,rgba(52,40,26,.5) 40%,rgba(52,40,26,.2) 72%,rgba(52,40,26,0) 100%),
  radial-gradient(ellipse 30vw 20vh at 100% 0,rgba(52,40,26,.58) 0%,rgba(52,40,26,.34) 42%,rgba(52,40,26,0) 100%)}
/* When the hero title leaves, its own veil goes with it: the header's left corner takes over (--hx). */
header::after{content:'';position:absolute;z-index:-1;pointer-events:none;left:-48px;top:-38px;width:30vw;height:20vh;opacity:var(--hx,0);
 background:radial-gradient(ellipse 100% 100% at 0 0,rgba(52,40,26,.34) 0%,rgba(52,40,26,.24) 45%,rgba(52,40,26,0) 100%)}
/* Hero: the first title is the largest of the film (9.4 vh, so its longest line stays clear of the dark
   window frame), closer to the frame's vertical centre, with more air on the left. */
#intro{left:max(72px,6vw);top:22vh}
#hint{left:50%;bottom:38px;transform:translateX(-50%);font:500 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
#hint .mask>span{display:flex;align-items:center;gap:14px}#hint svg{width:9px;height:20px}
#reveal{left:48px;bottom:12.5vh}
#aircopy{left:63.5vw;bottom:12.5vh}
/* Act six: the first section of the site. Right half, vertically centred against the unit
   that settles centre-left. One sentence on three lines, evenly set. */
#bridge{left:55vw;top:50vh;transform:translateY(-50%)}
#bridge .title{margin:0;font-size:8vh;line-height:.98}
/* After the film (docs/SCENOGRAFIA_FILM.md § 12): #journey is the film's scroll (1359.95 vh, up to
   #film-end, where the film's ScrollTrigger ends) plus 187 vh of hand-over (70 exit, 42 grey, 75 cards) in which the stage stays
   pinned: the backdrop never moves while site.js lifts the unit (the canvas, as a whole) and this title
   out of the frame, holds the empty grey, then brings in the three cards of "Tre qualità". The veil above stays: it is part
   of the backdrop. If the film's DURATION changes, update both numbers. */
#film-end{position:absolute;left:0;top:1359.9473684211vh;width:1px;height:1px;pointer-events:none;visibility:hidden}
@media(max-width:700px){header{top:24px;left:24px;right:24px}#brand{font-size:21px}#edition{font-size:7px;letter-spacing:1px}.editorial{left:8%}#intro{top:25%}#intro h1{font-size:40px;letter-spacing:-1.2px}#intro p{font-size:13px}h1,h2{letter-spacing:-1.5px}#reveal,#aircopy{top:57%}.editorial p{font-size:12px;max-width:220px}.eyebrow{font-size:8px;letter-spacing:1.5px}#chapter{right:24px;bottom:140px;font-size:8px}#controls{bottom:20px}#time{font-size:9px}.speed-label{font-size:0}.scroll-hint{margin-top:35px}}




@media(max-width:700px){.title{font-size:44px}#intro .title{font-size:50px}#intro{left:24px;top:22%}#reveal,#aircopy{left:24px;bottom:auto;top:56%}.lede{font-size:14px;white-space:normal}#hint{left:24px}}