/* ─── MyIceland hero · scroll to the live demo (scroll/PLAN.md) ─────────────────
   One sticky stage over a tall track. The stage is 100lvh: the large viewport, which never changes while you scroll
   (dvh would, and plain vh differs between browsers). Everything drawn moves by transform and opacity only. */
html{scroll-behavior:auto}
/* (06.10.2026) the track's lvh line is in @supports, not second in the rule: with a var() in the value the second line
   always wins, and a browser without lvh then drops the height altogether (the track was only as tall as the stage
   there: no travel to the demo). The stage's own two lines below hold no var(), so they fall back as written */
.ms-track{position:relative;height:calc(100vh + var(--ms-d,120vh))}
@supports (height:1lvh){.ms-track{height:calc(100lvh + var(--ms-d,120lvh))}}
.ms-stage{--cream:#FAF8F2;position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#FAF8F2}
/* (06.10.2026) once the sky has drawn its first frame (scroll.js adds .ms-bare) the stage and the sky's holder paint
   nothing of their own: the sky's canvas is opaque and covers both, and the page behind them is the same cream (html,
   body). A full-screen layer with a picture of its own was drawn again by iOS Safari while the page scrolled; with
   nothing to paint there is nothing to draw again. Before that first frame, without WebGL (.mi-aurora--static) and
   with ?fx=stagebg the cream stays exactly as it was */
.ms-stage.ms-bare,.ms-stage.ms-bare>.mi-aurora{background:none}
/* (06.10.2026) Safari's bars on an iPhone: two flat night boxes in the track, behind the stage (scroll.js makes them on
   iOS only, places them and fades them in with the night: BARS). The bars are clear glass and show the page behind the
   pinned stage, which was cream above and below the night. 1 px tall, stretched by a transform: a layer with no picture */
.ms-bar{position:absolute;left:0;top:0;width:100%;height:1px;transform-origin:0 0;background:#05060D;opacity:0;pointer-events:none;will-change:transform,opacity}
.ms-stage>.mi-aurora{z-index:0}
/* the warm glow keeps the hero's own box (the layout frame), so it looks exactly as before at scroll 0 */
.ms-stage .mi-aurora::after{inset:auto;left:0;top:0;width:var(--ms-fw,100%);height:var(--ms-fh,100%);will-change:opacity}
.ms-stage>.mi-hero{position:relative;z-index:2;overflow:visible;background:none;pointer-events:none}
/* the hero lets clicks through to section 2 underneath; only its copy (the CTA) takes them, and only while it's shown */
.ms-stage>.mi-hero .mi-hero__inner{pointer-events:none}
/* groups: the copy (day + pre-rendered night copy), chapter 3's lifted tabs */
.ms-g-copy{position:absolute;inset:0;z-index:7;pointer-events:none}
.ms-g-copy>.mi-copy{pointer-events:auto}
.ms-copyN{position:absolute;inset:0;opacity:0;pointer-events:none}
.mi-hero .ms-copyN.mi-hero--aurora a.mi-copy__cta{background:#fff;color:#0A1014;box-shadow:0 14px 34px -14px rgba(0,0,0,.65)}
.ms-phx{position:absolute;inset:0;z-index:4;pointer-events:none}
/* (06.10.2026) the stage's layer diet (scroll.js adds .ms-diet; ?fx=biglayers leaves it off). iOS Safari keeps a layer's
   picture at the size of its layout box at 3x, whatever is drawn in it, and draws every such picture in the stage again
   in the one frame the stage comes back on screen. A box that is a point at the stage's corner has no size of its own,
   so its picture is only what is in it; its children are placed from that same corner, so nothing moves:
   · the phone's layer was the whole 1280 x 760 stage (33 MB): now the phone alone (scroll.js sets its transform origin
     in px, from that corner);
   · phones: the headline's group was the stage plus the headline above it (1280 x 1158, 51 MB): now the headline alone
     (hero.css places the headline and its night copy in px there: --cx, --cy, --cw). Not on a computer, where the
     headline is centred in the group's height. will-change keeps the group ONE layer at its own corner while the hero
     is at rest, as it was when it was the stage's size: without it Safari gives the headline and its night copy a
     layer each, placed on whole device pixels of their own, and the button's bottom edge is drawn a third of a device
     pixel lower (seen as one row of 394 px in a Simulator screenshot; with it nothing differs by more than 4 of 255).
   The two soft shadows are laid out small and scaled back up by scroll.js (SHK) */
.ms-diet .mi-layer--phone{inset:auto;left:0;top:0;width:0;height:0}
@media (max-width:760px){.ms-diet .ms-g-copy{inset:auto;left:0;top:0;width:0;height:0;will-change:transform}}
/* the phone's two pre-drawn shadows: contact (on the page) and bloom (lifted); only opacity and transform change.
   Soft gradients, not box-shadows: no hard box edge can ever show round the phone */
.ms-sh{position:absolute;pointer-events:none;opacity:0}
.ms-sh::before{content:'';position:absolute}
.ms-sh--contact::before{inset:1% -5% -3%;background:radial-gradient(closest-side,rgba(8,10,18,.34),rgba(8,10,18,.16) 62%,rgba(8,10,18,0))}
.ms-sh--bloom{transform-origin:50% 60%}
.ms-sh--bloom::before{inset:-4% -30% -16%;background:radial-gradient(closest-side,rgba(8,10,18,.36),rgba(8,10,18,.16) 50%,rgba(8,10,18,.05) 78%,rgba(8,10,18,0))}
/* the demo's screen, over the frozen frame (never touching it): the still (the Tour overview, the app's placeholder),
   the live app (it takes over while the still is hidden: demo.js), then the status bar */
.ms-still{position:absolute;inset:0;z-index:8;opacity:0;visibility:hidden;pointer-events:none;background:#fff}
.ms-still>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ms-still.is-bare>img{display:none}
.ms-live{position:absolute;inset:0;visibility:hidden;contain:strict;background:var(--ms-live-bg,#f7f0e8);transition:background-color .25s}
.ms-still.is-live>.ms-live{visibility:inherit}
.ms-live>iframe{position:absolute;left:0;width:402px;border:0;display:block;transform-origin:0 0;pointer-events:none}
.ms-live.is-on>iframe{pointer-events:auto}
.ms-still>.mi-status{transition:color .25s}
/* the fingertip over the landed phone (demo.js): translucent, no blur; ~38 pt, a real touch's size on the display */
.ms-tap{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .16s ease;will-change:transform}
.ms-tap.is-on{opacity:1}
.ms-tap>i{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.3) 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(20,18,14,.15),0 3px 10px -3px rgba(20,18,14,.34);transform:scale(.6);transition:transform .24s cubic-bezier(.2,.9,.3,1.15),background-color .12s,box-shadow .12s}
.ms-tap.is-on>i{transform:scale(1)}
.ms-tap.is-down>i{transform:scale(.84);transition-duration:.09s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 0 0 1px rgba(20,18,14,.22),0 1px 4px -1px rgba(20,18,14,.36)}
.ms-stage.ms-touch{cursor:none}
/* the header at night: a pre-rendered light copy over the real one (the real one stays interactive underneath) */
.mh .mh__in.mh__in--night{position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none}
.mh .mh__in--night a.mh__link,.mh .mh__in--night .mh__feat{color:rgba(255,255,255,.8)}
.mh .mh__in--night a.mh__btn{background:#FAF8F2;color:#161513}
.mh .mh__in--night .mh__menu,.mh .mh__in--night .mh__lv{color:#fff}
/* section 2: one line and one link, behind the phone; each has an ink twin for the cream page and a white one for night */
.ms-sec{position:absolute;inset:0;z-index:1;pointer-events:none;font-family:'Schibsted Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* the line takes the hero headline's voice: 700 with the payoff in 800, tight tracking; at night the lead-in sits back
   (white at 72%) so the payoff carries it, with a soft shadow that keeps it off the curtains */
.ms-sec__t{position:absolute;left:var(--gutter,24px);right:var(--gutter,24px);top:0;margin:0;display:grid;text-align:center;font-size:clamp(30px,2.3vw + 14px,52px);line-height:1.04;font-weight:700;letter-spacing:-.03em;text-wrap:balance;opacity:0;visibility:hidden}
.ms-sec__t strong{font-weight:800}
.ms-sec__t>span,.ms-sec__a>span{grid-area:1/1}
.ms-sec__t .ms-d{color:#5c5750}.ms-sec__t .ms-d strong{color:#161513}
.ms-sec__t .ms-n{position:relative;color:rgba(255,255,255,.72);opacity:0;text-shadow:0 2px 26px rgba(4,6,14,.55)}.ms-sec__t .ms-n strong{color:#fff}
/* the sweep: a feathered window of white travelling through the line (mask static on the window; both move by transform) */
.ms-sec__t.has-sweep .ms-n strong{color:inherit}
.ms-sweep{position:absolute;left:0;top:0;height:100%;overflow:hidden;visibility:hidden;pointer-events:none}
.ms-sweep__in{position:absolute;left:0;top:0;color:#fff;text-shadow:none}.ms-sweep__in strong{color:#fff}
.ms-sec a.ms-sec__a{position:absolute;left:50%;top:0;display:grid;text-decoration:none;opacity:0;visibility:hidden;pointer-events:none}
.ms-sec__a>span{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.ms-sec__a .ms-d{color:#161513;box-shadow:inset 0 0 0 1px rgba(22,21,19,.3)}
.ms-sec__a .ms-n{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);opacity:0}
.ms-sec a.ms-sec__a:hover .ms-n{background:rgba(255,255,255,.1)}
.ms-sec a.ms-sec__a:hover .ms-d{background:rgba(22,21,19,.06)}
.ms-sec a.ms-sec__a:focus-visible{outline:none}
.ms-sec a.ms-sec__a:focus-visible>span{outline:2px solid #fff;outline-offset:3px}
/* Sleep & Wake: black glass, the lock screen, the unlock (a copy of the still, opening out of the island), the glint */
.ms-sleep{position:absolute;inset:0;z-index:8;background:#000;opacity:0;visibility:hidden;pointer-events:none}
.ms-lock{position:absolute;inset:0;z-index:8;background:#000;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}
.ms-lock__in{position:absolute;left:0;top:0;width:402px;height:870px;transform-origin:0 0;display:flex;flex-direction:column;align-items:center;padding-top:112px;box-sizing:border-box;color:#fff;font-family:-apple-system,'SF Pro Display','Schibsted Grotesk',system-ui,sans-serif}
.ms-lock__d{font-size:21px;font-weight:600;letter-spacing:.005em;opacity:.92}
.ms-lock__t{font-size:110px;line-height:1;font-weight:600;letter-spacing:-.025em;margin-top:4px}
.ms-wake{position:absolute;inset:0;z-index:8;opacity:0;visibility:hidden;pointer-events:none;background:#fff;transform-origin:50% 3.4%;border-radius:inherit;overflow:hidden}
.ms-wake>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ms-glint{position:absolute;top:-25%;left:0;width:70%;height:150%;z-index:10;opacity:0;visibility:hidden;pointer-events:none;background:linear-gradient(104deg,rgba(255,255,255,0) 22%,rgba(190,255,230,.07) 38%,rgba(255,255,255,.2) 49%,rgba(215,195,255,.09) 58%,rgba(255,255,255,0) 74%)}
/* ── section 2's choices: tiles that hug the landed phone, as tall as its body. 8 colours down its left, light over dark
   down its right, the phone's own curve on their outer corners at the top and bottom. Sizes come from land() (--ms-*) ── */
.ms-pick{position:absolute;left:0;top:0;width:var(--ms-s,66px);visibility:hidden}
.ms-pick__hd,.ms-pick>.ms-pick__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ms-sws,.ms-modes{display:flex;flex-direction:column;gap:var(--ms-tg,10px)}
.ms-sw,.ms-mode{position:relative;flex:none;width:var(--ms-s,66px);margin:0;padding:0;border:0;border-radius:var(--ms-r,11px);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:scale .18s cubic-bezier(.2,.8,.2,1)}
.ms-sw{height:var(--ms-s,66px);background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ms-mode{height:var(--ms-mh,296px);display:flex;align-items:center;justify-content:center;font:600 15px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.01em}
.ms-pick--col .ms-sw:first-child{border-top-left-radius:var(--ms-ro,52px)}.ms-pick--col .ms-sw:last-child{border-bottom-left-radius:var(--ms-ro,52px)}
.ms-pick--mode .ms-mode:first-child{border-top-right-radius:var(--ms-ro,52px)}.ms-pick--mode .ms-mode:last-child{border-bottom-right-radius:var(--ms-ro,52px)}
.ms-mode i{display:none}
.ms-mode[data-v="light"]{background:#F6F4EF;color:#161513}
.ms-mode[data-v="dark"]{background:#111215;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ms-sw:hover,.ms-mode:hover{scale:1.035}
.ms-sw[aria-checked="true"],.ms-mode[aria-checked="true"],.ms-sw:focus-visible,.ms-mode:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* placeholder: the page carries on below the demo */
.ms-next{position:relative;background:#080c19;color:#fff;font-family:'Schibsted Grotesk',system-ui,sans-serif;padding:120px 0 160px}
.ms-next__in{width:min(100% - 2*var(--gutter,24px),var(--container-max,1200px));margin-inline:auto}
.ms-next__lbl{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.5)}
.ms-next h2{margin:0 0 40px;font-size:clamp(30px,2.6vw + 10px,46px);font-weight:700;letter-spacing:-.025em}
.ms-next__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ms-next__card{min-height:220px;border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ms-next__card h3{margin:0;font-size:18px;font-weight:600}
.ms-next__card p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.62)}