/* The phone (v1, Daniel 2026-11-07: "the mobile experience of the home screen, make that something very special too").
   Loaded last, only below 700px. One hand, one film: the picture above, the words where the thumb is, every scene the
   same rhythm. Desktop never reads this file. */
@media (max-width:700px){

/* how it works: the scene first, the words below it, left aligned like every other scene on the phone */
#readin .stick{flex-direction:column}
#readin .scene{order:0;flex:1;margin-top:58px}
#readin .rw{order:1;text-align:left;padding:0 24px calc(env(safe-area-inset-bottom) + 46px)}
#readin .sc h2{font-size:31px;max-width:none;margin:0}
#readin .sc p{margin:12px 0 0;max-width:none}
#readin .sc .eyebrow{margin-bottom:10px}
#readin .scene canvas,#readin .scene .poster{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 100%)}

/* why now: a quiet breath, left aligned on the same line as the rest */
.sec.pause .pause-in{text-align:left;padding-left:24px;padding-right:24px}
.sec.pause .pause-in>*{margin-left:0;margin-right:0}

/* the windows: the photo holds the upper part of the screen and opens like an iris, crisp, then rests on the ground;
   the words sit below it on the dark, never over a busy photo */
.win{height:165vh}
.win .pic{inset:0 0 26% 0;
 -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 calc(var(--r,0) * 96% - 3%),transparent calc(var(--r,0) * 96%)),linear-gradient(180deg,transparent 0%,#000 14%,#000 66%,transparent 100%);
 mask-image:radial-gradient(circle at 50% 48%,#000 calc(var(--r,0) * 96% - 3%),transparent calc(var(--r,0) * 96%)),linear-gradient(180deg,transparent 0%,#000 14%,#000 66%,transparent 100%)}
.win .pic::before{display:none}
.win .over{padding:0 24px calc(env(safe-area-inset-bottom) + 42px)}
.win .over h2{font-size:32px}
.win .over p{font-size:16px;line-height:1.55;margin-top:12px}

/* where we are at work: one screen, a swipe in the hand */
.fields2.m-sw{height:auto}
.fields2.m-sw .f2-stick{position:relative;height:auto;min-height:100svh;overflow:visible}
.fields2.m-sw .f2-in{grid-template-areas:"head" "stage" "wheel" "line" "ticks";gap:0;padding:92px 0 calc(env(safe-area-inset-bottom) + 40px);align-content:center}
.fields2.m-sw .f2-head,.fields2.m-sw .f2-wheel,.fields2.m-sw .f2-line,.fields2.m-sw .m-ticks{padding:0 24px}
.fields2.m-sw .f2-head{margin-bottom:22px}
.m-tr{grid-area:stage;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
 padding:8px calc(50% - 27vw) 26px;overscroll-behavior-x:contain}
.m-tr::-webkit-scrollbar{display:none}
.m-tr .m-ph{position:relative;left:auto;top:auto;flex:none;width:54vw;height:auto;aspect-ratio:390/844;scroll-snap-align:center;scroll-snap-stop:always;
 transform-origin:50% 50%;transition:none;will-change:transform,opacity;margin:0 -7vw}
.m-tr .m-ph:first-child{margin-left:0}.m-tr .m-ph:last-child{margin-right:0}
.fields2.m-sw .f2-wheel{--row:44px;height:calc(var(--row) * 1);margin-top:6px;-webkit-mask-image:none;mask-image:none}
.fields2.m-sw .f2-names{top:0;left:24px;right:24px}
.fields2.m-sw .f2-names button{font-size:28px}
.fields2.m-sw .f2-names button:not([data-d="0"]){opacity:0}
.fields2.m-sw .f2-line p{margin:8px 0 0;min-height:3.1em}
.m-ticks{grid-area:ticks;display:flex;gap:5px;margin-top:22px}
.m-ticks i{flex:1;height:2px;border-radius:2px;background:rgba(241,239,233,.12);transition:background .5s}
.m-ticks i.on{background:rgba(var(--fh,143,190,242),.95)}
.fields2.m-sw .f2-glow{background:radial-gradient(120% 60% at 50% 40%,rgba(var(--fh,143,190,242),.2),transparent 70%)}

/* who it is for: four lines; the one you touch opens in place, no card in a card */
.who .w-grid.m-acc{display:block}
.who .m-acc .w-pan{display:none}
.who .m-acc .w-tabs li{border-bottom:1px solid rgba(241,239,233,.08)}
.who .m-acc .w-p{display:block;max-height:0;overflow:hidden;opacity:0;padding:0;background:none;border:0;box-shadow:none;transition:max-height .6s var(--ease),opacity .5s ease,padding .6s var(--ease)}
.who .m-acc .w-p.on{max-height:420px;opacity:1;padding:4px 0 26px}
.who .m-acc .w-p h3{font-size:22px;margin:0 0 12px}

/* one ground: the pinned scenes show the page's own ground, so no band shows where one scene hands over to the next */
#readin .stick,#see.nv .nv-stick{background:transparent!important}
#see.nv .nv-stick::after{background:linear-gradient(180deg,rgba(7,9,13,0),rgba(7,9,13,.78) 40%,rgba(7,9,13,.78) 84%,rgba(7,9,13,0))}
#see.nv canvas,#see.nv .nv-poster{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%)}
}