/* MJ's Studio, the one site. Shell, tracks, stages, the page, the ending.
   Sources: mj-current (Desktop/studio-mj/index.html) for the rooms (the canvas) and the wordmark; igloo.inc (the
   archive's 126 frames and the live probe, references/igloo/evidence) for the mark top left and the control top right
   with a soft glow, the small mono labels of the form (its declared faces IBMPlexMono-Regular and -Medium);
   design B (the owner's pick of 2026-09-22, work/designs3/B-14-on-9-background.png, work/contract-b.md) for the page:
   Laurenti Web Design's first screen (laurentiwebdesign.it, references/laurenti, its stylesheet at evidence/site.css):
   its #f3f3f3 rounded bar (inset 40, top 24) with the name at the left and the burger (two 2px lines in a 32x20 box)
   at the right, its centered h1 (400, -2px, line-height 1.1; 38px and -1px on phones), the owner's sentence under it,
   its red form button (.form button: #ff2433, white, 15px uppercase at .04em, padding 16px 28px, radius 6px; its
   hover #a10e18, lifted 2px, a red shadow, .3s), its five small picture cards (.media-img: radius 6px, no shadow) at
   its own places, wide and narrow; all in Manrope, Laurenti's own face; on Studio375's full-screen picture ground
   (375.studio, references/studio375), filled with the glass fins; the same red button in the bar;
   k95.it (references/k95, home only, the owner's pick) for the nav: its 14/14 uppercase with 0.5px tracking, white
   (the number, the bottom row), in DM Sans 400, the rank-one measured match for K95's face
   (evidence/typeface-match-k95.json); its hover from Laurenti's links (.links a:hover: opacity .6, .3s);
   oryzo.ai for the contact's hierarchy (#footer-title 45.33/40.8, the sparse grouping) in Urbanist, the rank-one
   match for its Halyard; aether1.ai (plan 4's hand study) for the deep ground rgb(5,13,21) of the code space and
   the ending, the glow rgb(65,165,255), thin lines at 0.2 alpha. */
:root{
  --ground:#05070a; --deep:rgb(5,13,21); --field:rgb(160,165,177); --page:#000000;
  --white:#ffffff; --wink:rgba(255,255,255,.92); --wink-2:rgba(255,255,255,.62); --line:rgba(255,255,255,.2); --glow:rgb(65,165,255);
  --acc:#8ea3b8; --acc-lo:#6e7f90; --acc-hi:#bfc9d4; --panel:#10151b; --mut:#a8b0b9; --btn-ink:#e6edf5;
  --sans:'Urbanist',system-ui,sans-serif; --disp:'Familjen Grotesk',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --nav:'DM Sans',system-ui,sans-serif;
  --manrope:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ground);color:var(--wink);-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis{scroll-behavior:auto!important}
body{margin:0;font-family:var(--sans);font-size:18px;line-height:24px;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
.skip{position:fixed;left:16px;top:-60px;z-index:60;background:var(--panel);color:var(--white);padding:11px 16px;border-radius:2px;font:600 13px/1 var(--disp);text-transform:uppercase;text-decoration:none}
.skip:focus{top:16px;outline:2px solid var(--white);outline-offset:2px}
/* the small label: Igloo's mono label role (uppercase, spaced) in its own face (the form's labels) */
.lbl{font-family:var(--mono);font-weight:500;font-size:14px;line-height:20px;letter-spacing:.08em;text-transform:uppercase;color:var(--wink);margin:0;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 14px rgba(0,0,0,.5)}

/* the bar: the wordmark at Igloo's place (the mark top left at 50/60) with its glow; the number as K95's nav at the
   top right (14/14 uppercase with 0.5px tracking, white); Get in touch as design B's red button (Laurenti's form
   button: #ff2433, white, 15px uppercase at .04em, padding 16px 28px, radius 6px, its 21px line) */
.mast{position:fixed;inset:20px 0 auto 0;height:46px;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 50px;pointer-events:none}
.mast>*{pointer-events:auto}
/* over the contact the bar keeps a band of the ground behind it, so the panel slides under it cleanly (the overnight
   polish: at the foot of the page the panel's edge ran under the number) */
.mast::before{content:"";position:absolute;left:0;right:0;top:-20px;height:118px;background:linear-gradient(to bottom,rgba(5,13,21,.97) 58%,rgba(5,13,21,0));opacity:0;transition:opacity .3s linear;pointer-events:none;z-index:-1}
body[data-act="ending"] .mast::before{opacity:1}
/* the bar's and the bottom row's small words stay readable over the brightest screens */
.mast .k-nav,.foot-row .k-nav{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35)}
.m-mark{font:700 15px/1 var(--disp);letter-spacing:.09em;text-decoration:none;color:var(--white);white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 18px rgba(255,255,255,.55);transition:color .3s linear,text-shadow .3s linear}
.m-mark i{font-style:normal;letter-spacing:.06em}
.m-right{display:flex;align-items:center;gap:44px}
.k-nav{font-family:var(--nav);font-weight:400;font-size:14px;line-height:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--white);text-decoration:none;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.b-btn{display:inline-block;box-sizing:border-box;font:400 15px/1.4 var(--manrope);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;padding:16px 28px;border:0;border-radius:6px;background:#ff2433;cursor:pointer}
/* the hover (Active Theory v5, the owner's pick of 2026-09-22: a control that answers as the pointer reaches it), in
   design B's terms: the red button darkens, lifts 2px and casts its red shadow (Laurenti's .form button:hover:
   #a10e18, translateY(-2px), 0 10px 30px #c1121f40, .3s; :active back down); the nav lines fade (Laurenti's
   .links a:hover: opacity .6, .3s) */
.b-btn{transition:background-color .3s,transform .3s,box-shadow .3s}
.b-btn:hover{background:#a10e18;transform:translateY(-2px);box-shadow:0 10px 30px rgba(193,18,31,.25)}
.b-btn:active{transform:translateY(0)}
.k-nav{transition:opacity .3s}
.k-nav:hover{opacity:.6}
.page-final .p-cta a{transition:background-color .3s,transform .3s,box-shadow .3s}
.page-final .p-cta a:hover{background:#a10e18;transform:translateY(calc(-2 * var(--u)));box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(193,18,31,.25)}
.page-final .p-cta a:active{transform:translateY(0)}
/* the bar leaves while the page fills the screen (the giant at the square's end, the dots, the drawing: body[data-fill], main.js),
   so the page's own bar is the only one; hidden, not only transparent, so its links leave the tab order */
.mast{transition:opacity .3s linear,visibility 0s linear 0s}
body[data-fill="page"] .mast{opacity:0;visibility:hidden;transition:opacity .3s linear,visibility 0s linear .3s}
/* the bottom row: K95's footer row (the same 14px uppercase at the corners): the headline at the left, the number and
   Get in touch at the right; on through the rooms and act one, gone from the dots on */
.foot-row{position:fixed;left:50px;right:50px;bottom:26px;z-index:36;display:flex;justify-content:space-between;align-items:baseline;gap:24px;pointer-events:none;transition:opacity .3s linear}
.foot-row .k-nav{pointer-events:auto}
.foot-row .fr-right{display:flex;gap:44px}
.foot-row .fr-left{transition:opacity .26s linear}.foot-row .fr-left.swap{opacity:0}
body[data-act="dots"] .foot-row,body[data-act="drawing"] .foot-row,body[data-act="hover"] .foot-row,body[data-act="skeleton"] .foot-row,body[data-act="explode"] .foot-row,body[data-act="tunnel"] .foot-row,body[data-act="ending"] .foot-row,body[data-fill="page"] .foot-row{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s linear,visibility 0s linear .3s}
/* phones, as K95's phone has it: the mark and one button at the top, one text at each bottom corner (the number at
   the right; Get in touch is the button above); the button at design B's phone size (13px, padding 14px 22px) */
@media (max-width:640px){.foot-row{left:16px;right:16px;bottom:22px}.foot-row .k-nav{font-size:12px;line-height:12px}.foot-row{align-items:flex-end}.foot-row .fr-left{flex:1 1 auto;min-width:0;margin:0;line-height:16px;white-space:normal}.foot-row .fr-right{gap:20px;flex:none}.foot-row .fr-right a[href="#contact"]{display:none}.mast{padding:0 16px;inset:16px 0 auto 0}.m-right{gap:20px}.mast .m-phone{display:none}.b-btn{font-size:13px;padding:14px 22px}}
/* a phone on its side keeps the phone's bar and bottom line: the mark and one button at the top, one text at each
   bottom corner (the viewport sweep, 2026-09-24: the wireframe phone rose behind the bar's number, and the bottom
   line's number and Get in touch ran into a billboard's ticker) */
@media (max-height:500px) and (min-width:641px){.mast .m-phone{display:none}.foot-row .fr-right a[href="#contact"]{display:none}}
/* phones, upright and on their side: the bottom line, the bar's links and the note take the side text's halo (.phase)
   over the square's brightest screens (the viewport sweep: white words on white billboards) */
@media (max-width:640px),(max-height:500px){.foot-row .k-nav,.mast .k-nav{text-shadow:0 0 6px rgba(16,20,27,.95),0 0 16px rgba(16,20,27,.7)}}
.m-mark:focus-visible,.k-nav:focus-visible,.b-btn:focus-visible,input:focus-visible,textarea:focus-visible,.c-send:focus-visible,.p-cta a:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* the current site's controls */
.contact{ --mj-size:13px; --mj-pad:9px 16px; --mj-tel-size:14px }
.mj-btn{display:inline-block;box-sizing:border-box;font-family:var(--disp);font-weight:600;font-size:var(--mj-size);line-height:1.2;letter-spacing:.01em;text-transform:none;padding:var(--mj-pad);border:1px solid #6e7f90;border-radius:2px;background:rgba(16,21,27,.82);color:#e6edf5;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-font-smoothing:antialiased;transition:background-color .55s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1),color .2s cubic-bezier(.16,1,.3,1)}

.mj-btn[aria-pressed="true"]{background:#8ea3b8;border-color:#8ea3b8;color:#080a0d}
.mj-btn.mj-lg{--mj-size:15px;--mj-pad:14px 26px}
button.mj-btn{appearance:none;font:inherit;font-family:var(--disp);font-weight:600;font-size:var(--mj-size)}
/* the Send button's hover: Laurenti's own contact form button's (.form button:hover: #a10e18, lifted 2px, the red
   shadow, .3s), its border gone into the red as Laurenti's button has none */
.mj-btn{transition:background-color .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s}
.mj-btn:hover{background:#a10e18;border-color:#a10e18;color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px rgba(193,18,31,.25)}
.mj-btn:active{transform:translateY(0)}
.mj-tel{display:inline-block;box-sizing:border-box;font-family:var(--sans);font-weight:500;font-size:var(--mj-tel-size);line-height:1.55;color:#a8b0b9;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;background:rgba(9,9,14,.94);border:1px solid transparent;border-radius:2px;padding:.6rem .95rem;transition:color .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1)}
.mj-tel:hover{color:#bfc9d4;border-color:#6e7f90}
@media (max-width:640px){.contact{--mj-size:12px;--mj-pad:8px 12px;--mj-tel-size:13px}.mj-tel{padding:.45rem .7rem}}
@media (prefers-reduced-motion:reduce){.mj-btn,.mj-tel,.b-btn,.k-nav,.page-final .p-cta a{transition:none}}

/* the loading screen: Capsules' (capsules.moyra.co, the owner's pick of 2026-09-24; measured on the live site,
   logs/loader-capsules-study.md), in the site's colours and wordmark: the ground with a pill-shaped window at its
   middle (their mask: 876 x 252, corners 110; 23% of the screen's height on a computer, never wider than three
   quarters of the screen, their phones'), the dark panel in the window, the fill from the screen's left edge
   (src/js/loader.js), the wordmark in exclusion over both (their word's height in the pill: 15% of it, 22% on phones),
   their caption's two lines (18/1920 of the width, 600, 60/1920 above the bottom; 14 px and 52 px on phones); the
   page does not scroll while it holds */
html.loading,html.loading body{overflow:hidden}
.loader{position:fixed;inset:0;z-index:100;--ph0:min(23vh,21.58vw);--ph:var(--ph0);touch-action:none}
html.no-js .loader,html.capture .loader,body.static .loader{display:none}
@media (prefers-reduced-motion:reduce){.loader{display:none}}
.ld-hole,.ld-pill{position:absolute;left:50%;top:50%;width:calc(var(--ph) * 3.4762);height:var(--ph);border-radius:calc(var(--ph) * .4365);transform:translate(-50%,-50%)}
.ld-hole{box-shadow:0 0 0 max(100vw,100vh) var(--ground)}
/* (the fill: the screen's width from its left edge, scaled; its first step (half the screen) is the stylesheet's own
   animation from the first paint, the later steps transitions (src/js/loader.js): the browser runs them while the page
   is busy building the world) */
.ld-pill{overflow:hidden;background:var(--panel);isolation:isolate}
.ld-fill{position:absolute;top:0;bottom:0;left:calc(var(--ph) * 1.7381 - 50vw);width:100vw;background:var(--white);transform:scaleX(0);transform-origin:0 50%;will-change:transform;animation:ld-first .92s cubic-bezier(.45,0,.55,1) .3s forwards}
@keyframes ld-first{from{transform:scaleX(0)}to{transform:scaleX(.5)}}
.ld-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 calc(var(--ph0) * .2186)/1 var(--disp);letter-spacing:.09em;color:var(--white);white-space:nowrap;mix-blend-mode:exclusion}
.ld-word i{font-style:normal;letter-spacing:.06em}
@media (max-aspect-ratio:1/1){.ld-word{font-size:calc(var(--ph0) * .319)}}
.ld-cap{position:absolute;left:0;right:0;bottom:max(45px,3.125vw);margin:0;text-align:center;font:600 max(13.5px,.9375vw)/1.278 var(--manrope);letter-spacing:-.011em;color:var(--mut)}
@media (max-width:640px){.ld-cap{bottom:52px;font-size:14px}}
.ld-cap>span{display:block;overflow:hidden}
.ld-cap>span>span{display:block;transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ld-cap>span:nth-child(2)>span{transition-delay:.08s}
.ld-cap.in>span>span{transform:none}
.ld-cap.out{opacity:0;transition:opacity .3s linear}

/* the world: one fixed canvas behind the document, a poster over it until the world draws, the site's vignette; the
   canvas (sized by the script) and the poster keep to the tall screen's height, the one with a phone's bar hidden
   (src/js/viewport.js), so neither moves when the bar hides or shows and the poster meets the first frame's framing */
.gl{position:fixed;inset:0;width:100%;height:100%;z-index:2;display:block;background:transparent}
.grade{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 128% 104% at 50% 50%, rgba(0,0,0,0) 46%, rgba(0,0,0,.30) 100%);transition:opacity .4s linear}
body[data-act="square"] .grade,body[data-act="dots"] .grade,body[data-act="drawing"] .grade{opacity:.55}
body[data-ground="paper"] .grade{opacity:0}
body[data-act="hover"] .grade,body[data-act="skeleton"] .grade,body[data-act="explode"] .grade,body[data-act="tunnel"] .grade,body[data-act="ending"] .grade{opacity:.7}
html.f-h2-glow body[data-act="drawing"]:not([data-ground="paper"]) .grade,html.f-h2-glow body[data-act="hover"]:not([data-ground="paper"]) .grade,html.f-h2-glow body[data-act="skeleton"]:not([data-ground="paper"]) .grade,html.f-h2-glow body[data-act="explode"]:not([data-ground="paper"]) .grade,html.f-h2-glow body[data-act="tunnel"]:not([data-ground="paper"]) .grade,html.f-h2-glow body[data-act="ending"]:not([data-ground="paper"]) .grade{opacity:var(--h2-grade,.7);transition:none}
html.no-js .grade,body.static .grade,body[data-state="nogl"] .grade{display:none}
.poster{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:3;background:#05070a;opacity:1;transition:opacity .45s ease}
.poster img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
body[data-state="world"] .poster{opacity:0;pointer-events:none}
body.ign .poster{opacity:0;transition:none;pointer-events:none}
body[data-state="nogl"] .gl,body[data-state="nogl"] .poster{display:none}

/* tracks and stages */
.track{position:relative;pointer-events:none}   /* the tracks are scroll spacers: a later one passing over the fixed stage took its clicks (the dead scroll taken out, 2026-09-23: with the drawing shorter the phone act's track reached the page's button) */
.stage{position:fixed;top:0;left:0;right:0;height:100vh;overflow:hidden;pointer-events:none}
.page-final.is-on{pointer-events:auto}
.t-rooms{height:var(--t-rooms,310vh)}
.t-square{height:var(--t-square,230vh)}
.t-dots{height:var(--t-dots,210vh)}
.t-drawing{height:var(--t-drawing,160vh)}
.t-hover{height:var(--t-hover,180vh)}
.t-skeleton{height:var(--t-skeleton,200vh)}
.t-explode{height:var(--t-explode,200vh)}
.t-tunnel{height:var(--t-tunnel,200vh)}
main{position:relative;z-index:4}
/* the page: design B, Laurenti's first screen on Studio375's full-screen picture (the owner's picture,
   work/designs3/B-14-on-9-background.png, and work/contract-b.md): the glass fins filling the box, the #f3f3f3 bar
   with the name and the burger, the centered headline, the sentence and the red button as one block centered in the
   box, the five picture cards at Laurenti's own places. The screen is composed once, at 1440x900 (390x844 on phones and
   on portrait windows: Laurenti's narrow first screen), and that composition is scaled as one piece to fit the stage
   (every size in the unit --u, one 1440th of the box's width): its proportions are the capture's at any viewport, so
   the page built in three dimensions and its drawing register to it exactly. Outside the box the stage shows the world. */
.stage{container-type:size;display:flex;align-items:center;justify-content:center}
.page{color:var(--white)}
.page-final{--u:calc(min(100cqw,160cqh) / 1440);position:relative;flex:none;width:calc(1440 * var(--u));height:calc(900 * var(--u));overflow:hidden}
.page-final{visibility:hidden;pointer-events:none}
.page-final>.p-bar,.page-final>.p-col,.page-final>.p-cards{opacity:var(--pf-content,0)}
.page-final.is-on{visibility:visible;pointer-events:auto}
.page-final.warm{visibility:visible}
.page-final.warm:not(.is-on) .p-cta a{visibility:hidden}
.page-final.warm>.p-bar,.page-final.warm>.p-col,.page-final.warm>.p-cards{will-change:opacity}
/* the ground: Studio375's full-screen picture, the glass fins, cropped from the left as the owner saw it. In the live
   site the world's plate carries the same picture under the flying pieces (a picture here, above the canvas, would
   cover them), so it shows only in the capture and the static route (a lazy picture, drawn nowhere else) */
.page-final>.p-bg{position:absolute;inset:0;z-index:0;overflow:hidden;visibility:hidden}
.page-final>.p-bg img{display:none;width:100%;height:100%;object-fit:cover;object-position:0% 50%}
html.capture .page-final>.p-bg,.page-static>.p-bg{visibility:visible}
html.capture .page-final>.p-bg img,.page-static>.p-bg img{display:block}
/* the bar: Laurenti's header (.header-inner #f3f3f3, rounded, 40 in from the sides and 24 from the top), the name at
   the left (Manrope 600, black), the burger at the right (two 2px black lines in a 32x20 box, the second 3px off its
   bottom); the burger is a picture of the control only: nothing on this page opens a menu */
.page-final .p-bar{position:absolute;z-index:3;left:calc(40 * var(--u));top:calc(24 * var(--u));width:calc(1360 * var(--u));height:calc(71 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(20 * var(--u));border-radius:calc(8 * var(--u));background:rgb(243,243,243)}
.page-final .p-name{margin:0;font:600 calc(21 * var(--u))/1 var(--manrope);letter-spacing:0;color:#000;white-space:nowrap}
.page-final .p-menu{position:relative;display:block;flex:none;width:calc(32 * var(--u));height:calc(20 * var(--u))}
.page-final .p-menu i{position:absolute;left:0;width:100%;height:calc(2 * var(--u));background:#000}
.page-final .p-menu i:first-child{top:0}
.page-final .p-menu i:nth-child(2){bottom:calc(3 * var(--u))}
/* the block: Laurenti's hero title (h1 400, -2px tracking, line-height 1.1, centered, above the cards) at the owner's
   60, the owner's sentence (15/24) 21 under it with its break after "applications,", the red button (Laurenti's form
   button; its 21px line makes it 53 tall) 24 under that; the three centered in the box as one */
.page-final .p-col{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 calc(40 * var(--u))}
.page-final .p-head{margin:0;font:400 calc(60 * var(--u))/1.1 var(--manrope);letter-spacing:calc(-2 * var(--u));color:#fff;white-space:pre-line}
.page-final .p-sent{margin:calc(21 * var(--u)) 0 0;font:400 calc(15 * var(--u))/1.6 var(--manrope);letter-spacing:0;color:#fff;white-space:pre-line}
.page-final .p-cta{margin:calc(24 * var(--u)) 0 0;display:flex;justify-content:center}
.page-final .p-cta a{display:block;box-sizing:border-box;font:400 calc(15 * var(--u))/1.4 var(--manrope);letter-spacing:.04em;text-transform:uppercase;padding:calc(16 * var(--u)) calc(28 * var(--u));border-radius:calc(6 * var(--u));background:#ff2433;color:#fff;text-decoration:none;white-space:nowrap}
/* the cards: Laurenti's five floating pictures (.media-img: radius 6px, no shadow), at its own places (x, y, w, h):
   161,240,180,113; 1069,222,189,119; 1159,533,198,124; 147,646,207,130; 960,695,216,136 */
.page-final .p-cards{position:absolute;inset:0;z-index:1}
.page-final .p-card{position:absolute;overflow:hidden;border-radius:calc(6 * var(--u))}
.page-final .p-card img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.page-final .p-card:nth-child(1){left:calc(161 * var(--u));top:calc(240 * var(--u));width:calc(180 * var(--u));height:calc(113 * var(--u))}
.page-final .p-card:nth-child(2){left:calc(1069 * var(--u));top:calc(222 * var(--u));width:calc(189 * var(--u));height:calc(119 * var(--u))}
.page-final .p-card:nth-child(3){left:calc(1159 * var(--u));top:calc(533 * var(--u));width:calc(198 * var(--u));height:calc(124 * var(--u))}
.page-final .p-card:nth-child(4){left:calc(147 * var(--u));top:calc(646 * var(--u));width:calc(207 * var(--u));height:calc(130 * var(--u))}
.page-final .p-card:nth-child(5){left:calc(960 * var(--u));top:calc(695 * var(--u));width:calc(216 * var(--u));height:calc(136 * var(--u))}
/* the page's own ground is its picture; under it, in the capture, black */
.page-final{background:transparent}
html.capture .page-final,html.capture .stage{background:var(--page)}
/* the capture: the composition alone, at rest (nothing animates or eases), its pictures in place; two more modes for
   the phone's layers: the ground alone (?capture=page-bg) and everything but the ground on no ground at all
   (?capture=page-fg, taken with alpha) */
html.capture body{overflow:hidden}
html.capture *,html.capture *::before,html.capture *::after{animation:none!important;transition:none!important}
html.capture .mast,html.capture .m-note,html.capture .foot-row,html.capture .gl,html.capture .poster,html.capture .grade,html.capture #rooms,html.capture #dots,html.capture #contact,html.capture .foot,html.capture .skip{display:none!important}
html.capture .t-drawing{height:100vh}
html.capture .page-final{--pf-content:1;visibility:visible}
html.capture-page-bg .page-final>:not(.p-bg){visibility:hidden!important}
html.capture-page-fg,html.capture-page-fg body,html.capture-page-fg .stage,html.capture-page-fg .page-final{background:transparent!important}
html.capture-page-fg .page-final>.p-bg{visibility:hidden!important}
/* portrait viewports (phones): Laurenti's narrow first screen at 390x844 (its bar 310 wide with 19 inside, the name
   at 18, its h1 at 38 with -1px tracking wrapping by width inside the bar's 40 margins, three lines; the sentence
   13/1.6 and the button 13px with padding 14px 22px; its cards at its own narrow places, two running off the right
   edge), the ground cropped to its middle (Studio375 centers its scene on phones); the block moved down (never the
   cards) to stand clear of them: its middle halfway between the first card's bottom (304) and the fourth card's top
   (576). The same box scaled to fit; the world's page follows the same rule (tall when the width is at most the
   height) */
@media (max-aspect-ratio:1/1){
  .page-final{--u:calc(min(100cqw,46.2085cqh) / 390);width:calc(390 * var(--u));height:calc(844 * var(--u))}
  .page-final>.p-bg img{object-position:50% 50%}
  .page-final .p-bar{width:calc(310 * var(--u));padding:0 calc(19 * var(--u))}
  .page-final .p-name{font-size:calc(18 * var(--u))}
  .page-final .p-col{padding-top:calc(36 * var(--u))}
  .page-final .p-head{font-size:calc(38 * var(--u));letter-spacing:calc(-1 * var(--u));white-space:normal}
  .page-final .p-sent{font-size:calc(13 * var(--u))}
  .page-final .p-cta a{font-size:calc(13 * var(--u));padding:calc(14 * var(--u)) calc(22 * var(--u))}
  .page-final .p-card:nth-child(1){left:calc(55 * var(--u));top:calc(235 * var(--u));width:calc(110 * var(--u));height:calc(69 * var(--u))}
  .page-final .p-card:nth-child(2){left:calc(319 * var(--u));top:calc(211 * var(--u));width:calc(116 * var(--u));height:calc(73 * var(--u))}
  .page-final .p-card:nth-child(3){left:calc(299 * var(--u));top:calc(509 * var(--u));width:calc(121 * var(--u));height:calc(76 * var(--u))}
  .page-final .p-card:nth-child(4){left:0;top:calc(576 * var(--u));width:calc(127 * var(--u));height:calc(79 * var(--u))}
  .page-final .p-card:nth-child(5){left:calc(264 * var(--u));top:calc(633 * var(--u));width:calc(132 * var(--u));height:calc(83 * var(--u))}
}

/* the ending: Oryzo's contact hierarchy (#footer-title 45.33/40.8 at the top left, the field grouping, the small
   columns) on Aether's ground under the assembled name (the name stands across the top of the view; the panel
   arrives below it), with the current site's button and number */
/* the panel arrives over the last half viewport of the code (the name is across the top by then): no stretch of the
   document where only a dark panel creeps up a dark ground */
.contact{position:relative;z-index:5;background:transparent;color:var(--white);padding:10vh 50px 0 50px;margin-top:-50vh}
html.no-js .contact,body.static .contact{margin-top:0}
.c-in{max-width:1100px;margin:0 auto;background:rgba(5,13,21,.96);border:1px solid var(--line);border-radius:16px;padding:56px 56px 52px}
/* fin-light (09-25): the finale lands on Times Square alive behind the form, so the panel is glass over it: the city's light through it, a hairline of the steps' red round it */
html.f-fin .c-in{background:rgba(7,9,18,.6);-webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 -24px 70px rgba(255,36,51,.16),0 30px 90px rgba(0,0,0,.55)}
.c-title{margin:0 0 48px;font:500 45.33px/40.8px var(--sans);letter-spacing:-0.018em;max-width:12em}
.c-form{display:block;width:100%}
.gotcha{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.c-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:30px}
.f{margin:0;display:flex;flex-direction:column;gap:10px}
.f-wide{grid-column:1 / -1}
.f label{font-family:var(--mono);font-weight:500;font-size:13px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--wink)}
.f input,.f textarea{appearance:none;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--white);font:400 18px/24px var(--sans);padding:6px 0 10px;border-radius:0;width:100%;resize:vertical;-webkit-font-smoothing:antialiased}
.f textarea{min-height:72px}
.f input,.f textarea{transition:border-color .25s linear}
.f input:focus,.f textarea:focus{border-bottom-color:#ff2433;outline:none}   /* the overnight polish: the field being filled takes the site's red (design B's button colour) */
.c-actions{margin:40px 0 0;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.c-send{min-width:171px;text-align:center}   /* design B's red button, as the bar's Get in touch (the overnight polish: the grey outline read as a disabled button) */
.b-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.c-status{font-family:var(--mono);font-weight:500;font-size:13px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--wink)}
.c-status[data-kind="err"]{color:var(--acc-hi)}
.c-status[data-kind="ok"]{color:var(--white)}
.c-form.sent .c-grid{display:none}
.c-phone{margin:40px 0 0;font:400 18px/24px var(--sans);color:var(--wink-2)}
.c-phone a{color:var(--acc-hi);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}   /* the number never breaks across lines */
@media (max-width:999px){
  .contact{padding:12vh 16px 0}
  .c-in{max-width:none;margin:0;padding:40px 22px 40px}
}
@media (max-width:700px){
  .c-title{font-size:39.52px;line-height:35.568px;margin-bottom:36px}
  .c-grid{grid-template-columns:1fr;row-gap:26px}
  .c-actions{margin-top:34px}
}
/* the legal row: the wordmark and the number */
.foot{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:28px 50px 30px;color:var(--wink-2)}
.f-phone{font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--wink-2);text-decoration:none}
@media (max-width:640px){.foot{padding:24px 16px 28px}}

/* the static route (reduced motion, no WebGL, no JavaScript): the entrance, the page, the form, in flow */
.static-flow{display:none}
html.no-js .track,body.static .track{height:auto!important}
html.no-js .stage,body.static .stage{position:static;height:auto;overflow:visible}
html.no-js .gl,html.no-js .poster,html.no-js .grade,body.static .gl,body.static .poster{display:none}
html.no-js .foot-row,body.static .foot-row{display:none}
html.no-js .track,body.static .track{display:none}
html.no-js .static-flow,body.static .static-flow{display:block}
/* without scripts nothing removes the hidden attribute: this rule outranks [hidden] */
html.no-js .static-flow[hidden]{display:block!important}
html.no-js .contact,body.static .contact{padding-top:80px}
html.no-js .c-in,body.static .c-in{margin:0 auto}
.static-in{padding:96px 50px 0}
.static-poster{max-width:1400px;margin:0 auto 40px;border-radius:12px;overflow:hidden}
.page-static{--u:calc(min(100vw - 100px,1400px) / 1440);position:relative;margin:0 auto;overflow:hidden;opacity:1;visibility:visible;pointer-events:auto;background:var(--page)}
.page-static>.p-bar,.page-static>.p-col,.page-static>.p-cards{opacity:1}
@media (max-aspect-ratio:1/1){.page-static{--u:calc((100vw - 100px) / 390)}}
@media (max-width:640px){.static-in{padding:84px 16px 0}.page-static{--u:calc((100vw - 32px) / 390)}}
@font-face{font-family:'Urbanist';src:url("../fonts/urbanist.woff2?v=7981ef90c2") format("woff2");font-weight:400 700;font-style:normal;font-display:block}
@font-face{font-family:'Familjen Grotesk';src:url("../fonts/familjen-grotesk.woff2?v=414d5dfe5f") format("woff2");font-weight:400 700;font-style:normal;font-display:block}
@font-face{font-family:'IBM Plex Mono';src:url("../fonts/ibm-plex-mono.woff2?v=01d2854474") format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'DM Sans';src:url("../fonts/dm-sans.woff2?v=9fea608a94") format("woff2");font-weight:100 1000;font-style:normal;font-display:block}
@font-face{font-family:'Manrope';src:url("../fonts/manrope.woff2?v=a30ddcd349") format("woff2");font-weight:200 800;font-style:normal;font-display:block}

/* the overlay of the phone's acts: the line at the left in the page's own headline style (Manrope 400, white, line
   height 1.1, the headline's -2px at 60 as -0.0333em), the labels in the form's own label style (the mono
   uppercase), each on a leader line to its layer, the white-out */
.overlay{position:fixed;inset:0;z-index:34;pointer-events:none}
.phase{position:absolute;left:50px;top:50%;transform:translateY(-50%);margin:0;max-width:min(11.5em,calc(50vw - 22vh - 100px));font:400 clamp(28px,3.6vw,52px)/1.1 var(--manrope);letter-spacing:-0.0333em;color:var(--white);opacity:0;text-wrap:balance;text-shadow:0 0 6px rgba(16,20,27,.95),0 0 16px rgba(16,20,27,.7)}
/* the line ends before the phone: the phone stands centred at a share of the view height (its rim at most 22vh left of the
   centre in the hover and the skeleton's swing, tools/probe-phone-edge.mjs), with the site's own 50px inset between them */
.phase .w{display:inline;opacity:0;transition:opacity .12s linear}
.phase .w.on{opacity:1}
/* phones, and every screen taller than wide (where the world already shows the phone-shaped page and there is no room
   beside the phone): the line under the phone, as the phone has it */
@media (max-width:640px),(max-aspect-ratio:1/1){.phase{left:16px;right:16px;top:auto;bottom:96px;transform:none;max-width:none;font-size:26px}}
.label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:500;font-size:13px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);white-space:nowrap;opacity:0}
.label::before{content:"";display:block;width:72px;height:1px;background:var(--white);opacity:.7}
.label.left{flex-direction:row-reverse}
.label.left .label-t{text-align:right}
@media (max-width:640px){.label::before{width:28px}}
/* x-pop (Aether's labels): the hairline with a dot at each end, the one at the layer and the one at the words */
html.f-xpop .label::before{height:7px;opacity:.8;background:radial-gradient(circle at 3.5px 50%,var(--white) 0 1.8px,transparent 2.4px),radial-gradient(circle at calc(100% - 3.5px) 50%,var(--white) 0 1.8px,transparent 2.4px),linear-gradient(var(--white),var(--white)) 0 50%/100% 1px no-repeat}
.white{position:absolute;inset:0;background:#fff;opacity:0}
/* h2-clock (src/js/ideas.js): the vignette, the bar, the band behind it and the bottom row fade on the world's own
   clock (main.js chrome(), written from the world's frame as these variables), with no timer of their own: scrubbing
   back and forth never shows one catching up (outranks the per-act rules above, which stay as they were without it) */
html.h2-clock .grade{opacity:var(--grade,1)!important;transition:none!important}
html.h2-clock .mast{opacity:var(--mast,1)!important;visibility:var(--mast-vis,visible)!important;transition:none!important}
html.h2-clock .mast::before{opacity:var(--band,0)!important;transition:none!important}
html.h2-clock .foot-row{opacity:var(--foot,1)!important;visibility:var(--foot-vis,visible)!important;transition:none!important}