/* Not So Common: a bespoke series page.
   Art direction: the series' own art. A pink engraved brain, blue grain stripes and pink scribbles on black,
   COMMON in heavy white letters, "not so" and the part titles in a soft serif, and a small white light bulb
   whose blue line runs down through the N. Here that line is a pull cord: the page opens in a dark room
   and the light comes on when you pull it (or scroll).
   Grounds: black room -> hot pink (the brain in ink) -> black (four chairs) -> blue (foundation)
   -> bone (the light) -> black (a sign of life) -> pink (WISE) -> black (the download, the series in the light).
   Lime is SMR's accent only (buy, focus, label tick). The accent voice on every screen is the serif. */

@view-transition { navigation: auto; }

:root{
  --ink:#050407;
  --pink:#dc477e;
  --blue:#0288d9;
  --bone:#ece9e3;
  --paper:#fbfaf8;
  --mist:#b9b3bf;
  --lime:#b6ff00;
  --gutter:64px;
  --cond:'Barlow Condensed',Impact,sans-serif;
  --serif:Fraunces,Georgia,'Times New Roman',serif;
  --body:Manrope,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
body.nsc{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* shared atoms */
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--mist)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.label.ink{color:#fff}
.label.ink i{background:var(--ink)}
.label.dark{color:#2b2730}
.label.dark i{background:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .14s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}
.btn.lime{background:var(--lime);color:var(--ink)}.btn.lime:hover{background:#fff}
.btn.line{border:1px solid rgba(251,250,248,.42);color:var(--paper)}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--mist)}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--paper);border-bottom:1px solid rgba(251,250,248,.35)}
.follow:hover{color:var(--lime);border-color:var(--lime)}
.wall{margin:0;font-family:var(--cond);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.005em}
.wall em{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.025em;line-height:.9}
blockquote{margin:0}
.verse p{margin:0;font:500 clamp(18px,1.45vw,22px)/1.5 var(--serif);letter-spacing:-.005em}
.verse cite{display:block;margin-top:12px;font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.say{margin:0;font:600 clamp(20px,1.7vw,26px)/1.36 var(--body);letter-spacing:-.015em}

/* header: the shared SMR lockup, floating in the room */
.top{position:absolute;top:0;left:0;right:0;z-index:30;height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 var(--gutter)}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mist);transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--paper)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--paper)}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}

/* ============ 1 · the dark room ============ */
.room{--lit:0;--fs:clamp(120px,min(29.5vw,52svh),560px);position:relative;z-index:2;min-height:max(780px,100svh);padding:96px var(--gutter) 0;overflow-x:clip;background:#000}
.no-js .room,.room.is-static{--lit:1}
.room-art{position:absolute;inset:0;z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.room-art picture{display:block;height:100%}
.room-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:brightness(calc(.15 + .85 * var(--lit))) saturate(calc(.25 + .75 * var(--lit)))}
.room-pool{position:absolute;inset:0;pointer-events:none;opacity:var(--lit);
  background:radial-gradient(ellipse 46% 52% at 74% 22%,rgba(255,250,240,.20),rgba(255,250,240,0) 70%),
             linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 30%,rgba(0,0,0,.28) 64%,rgba(0,0,0,.72))}
.room::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(1 - var(--lit));
  background:radial-gradient(ellipse 30% 34% at 74% 20%,rgba(255,244,220,.05),rgba(0,0,0,0) 70%)}

.crumbs{position:relative;z-index:3}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--mist)}
.crumbs li+li::before{content:'/';margin-right:10px;color:#6d6672}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;color:var(--paper)}

.lockup{position:relative;z-index:4;width:max-content;max-width:100%;margin:clamp(6px,2.2vh,28px) auto 0;font-size:var(--fs)}
.title{margin:0;font-size:1em;font-weight:400;line-height:1;color:#fff}
.t-not{display:block;font-family:var(--serif);font-weight:600;font-size:.26em;line-height:1;letter-spacing:-.03em;margin:0 0 -.1em .04em;
  color:rgba(255,255,255,calc(.34 + .66 * var(--lit)));
  text-shadow:0 0 calc(.16em * var(--lit)) rgba(255,245,225,calc(.55 * var(--lit)))}
.t-common{display:block;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:1em;line-height:.8;letter-spacing:-.012em;
  transform:scaleY(1.14);transform-origin:50% 100%;padding-top:.1em}
.sub{margin:.07em calc(var(--fs) * .2) 0 0;text-align:right;font:500 .118em/1.1 var(--serif);letter-spacing:-.015em;color:#fff}
.sub::after{content:'';display:block;width:2.6em;height:.28em;margin:.34em 0 0 auto;background:#fff}

/* the bulb, as drawn in the series art, sitting over the N */
.lamp{position:absolute;z-index:3;width:calc(var(--fs) * .62);aspect-ratio:1;right:calc(var(--fs) * -.2);top:calc(var(--fs) * -.08);pointer-events:none}
.lamp img{position:absolute;inset:0;width:100%;height:100%}
.lamp-bulb{opacity:calc(.5 + .5 * var(--lit));filter:drop-shadow(0 0 calc(18px * var(--lit)) rgba(255,248,230,calc(.9 * var(--lit))))}
.lamp-rays{opacity:var(--lit);transform:scale(calc(.86 + .14 * var(--lit)))}
.lamp-halo{position:absolute;left:50%;top:44%;width:330%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:var(--lit);
  background:radial-gradient(circle,rgba(255,250,236,.42) 0,rgba(255,236,214,.16) 22%,rgba(255,236,214,0) 60%);mix-blend-mode:screen}

/* the cord: the art's blue line, hanging from the bulb's base through the N */
.cord{--pull:0px;--swing:0deg;position:absolute;z-index:5;right:calc(var(--fs) * .115);top:calc(var(--fs) * .4);width:0;height:calc(var(--fs) * 1.02 + var(--pull));
  transform:rotate(var(--swing));transform-origin:50% 0}
.cord-line{position:absolute;left:-2px;top:0;bottom:0;width:4px;border-radius:2px;background:linear-gradient(180deg,#0aa0ff,var(--blue));box-shadow:0 0 calc(10px * var(--lit)) rgba(2,136,217,.7)}
.pull{position:absolute;left:0;bottom:0;transform:translate(-50%,58%);display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:72px;min-height:72px;padding:6px;background:none;border:0;color:#fff;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;font:inherit}
.pull:active{cursor:grabbing}
.pull-bead{display:block;width:22px;height:30px;border-radius:11px;background:#fff;box-shadow:0 0 0 4px var(--blue),0 6px 18px rgba(0,0,0,.6);transition:transform .2s}
.pull:hover .pull-bead{transform:translateY(3px)}
.pull-word{font:800 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.pull[aria-pressed="true"] .pull-word{color:var(--mist)}

.room-copy{position:relative;z-index:4;max-width:min(520px,44vw);margin-top:calc(var(--fs) * -.2);padding-bottom:24vh}
.lede{margin:20px 0 0;font:600 clamp(19px,1.55vw,23px)/1.42 var(--body);letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.buyrow{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}

.room-cover{position:absolute;z-index:5;right:31vw;bottom:-19vh;width:clamp(200px,18vw,340px);margin:0;perspective:1600px;view-transition-name:cover-not-so-common}
.room-cover img{display:block;width:100%;height:auto;transform:rotate(5deg);box-shadow:-30px 50px 90px rgba(0,0,0,.75),-6px 12px 24px rgba(0,0,0,.5);
  filter:brightness(calc(.3 + .7 * var(--lit)))}

/* ============ 2 · pink: the brain in ink ============ */
.sense{position:relative;z-index:1;min-height:100svh;padding:34vh var(--gutter) 22vh;overflow-x:clip;
  background:linear-gradient(180deg,var(--ink) 0,var(--pink) 26vh,var(--pink) 100%);color:#fff}
.sense-brain{position:absolute;z-index:0;right:-17vw;top:26vh;width:66vw;pointer-events:none;
  /* feathered on every cut edge: top and bottom (the stem is cut) by a vertical fade, the left (the frontal lobe meets
     the crop) by a wide elliptical fade, intersected so no straight edge or box shows on the pink at any width */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 99%),radial-gradient(88% 120% at 82% 42%,#000 69%,rgba(0,0,0,.84) 75%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.15) 88%,transparent 94%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 99%),radial-gradient(88% 120% at 82% 42%,#000 69%,rgba(0,0,0,.84) 75%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.15) 88%,transparent 94%);
  mask-composite:intersect}
.sense-brain img{display:block;width:100%;height:auto}
/* the current: one canvas laid exactly over the art (fold map traced from the art; see not-so-common.js) */
.sense-volt{position:absolute;inset:0;width:100%;height:100%;display:block}
.sense-copy{position:relative;z-index:2;max-width:min(640px,44vw)}
.sense .wall{margin-top:26px;font-size:clamp(56px,6.3vw,118px);color:var(--ink)}
.sense .wall em{display:block;color:#fff;font-size:1.06em;margin:.04em 0 .02em}
.loud{margin:34px 0 0;font:600 clamp(26px,2.3vw,36px)/1.15 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.sense .body{margin:22px 0 0;max-width:470px;font:600 17px/1.6 var(--body);color:#fff}
.src{margin:18px 0 0;font-size:12px;line-height:1.5;color:#fff;opacity:.92}

/* ============ parts (shared) ============ */
.part{position:relative;overflow-x:clip;padding:22vh var(--gutter) 18vh}
.part-head{position:relative;z-index:3;max-width:min(640px,46vw)}
.part-title{margin:20px 0 0;font:500 clamp(58px,7vw,128px)/.92 var(--serif);letter-spacing:-.035em;text-transform:none}
.pn{display:block;margin-bottom:.16em;font:900 .36em/1 var(--cond);letter-spacing:.04em}
.part-lede{margin:24px 0 0;max-width:440px;font:600 17px/1.6 var(--body);color:var(--mist)}
.slide{margin:0;position:relative;z-index:1}
.slide img{display:block;width:100%;height:auto;box-shadow:0 40px 90px rgba(0,0,0,.55),0 10px 24px rgba(0,0,0,.35)}

/* ============ 3 · Part I: four chairs (black) ============ */
.p1{background:linear-gradient(180deg,var(--pink) 0,var(--ink) 24vh,var(--ink) 100%);padding-top:30vh}
.p1 .slide-r{position:absolute;top:26vh;right:-15vw;width:66vw;transform:rotate(-3deg)}
.p1 .part-head{min-height:36vw;max-width:46vw}
.p1 .part-title{font-size:clamp(64px,9vw,170px)}
.p1 .pn{color:var(--pink)}
.chairs{list-style:none;margin:6vh 0 0;padding:0;position:relative;z-index:3}
.chair{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:24px 5vw;align-items:center;padding:3.4vh 0;border-top:1px solid rgba(255,255,255,.14)}
.chair-word{margin:0;font:900 clamp(64px,10.6vw,200px)/.84 var(--cond);text-transform:uppercase;letter-spacing:-.01em;color:#fff;transition:color .5s,-webkit-text-stroke-color .5s,text-shadow .6s}
.chairs.is-live .chair-word{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.42)}
.chairs.is-live .chair.is-on .chair-word{color:#fff;-webkit-text-stroke-color:#fff}
.chairs.is-live .chair-wise.is-on .chair-word{color:var(--pink);-webkit-text-stroke-color:var(--pink)}
.chair-text p{margin:0;font:600 16px/1.55 var(--body);color:var(--mist)}
.chair-text blockquote{margin-top:14px}
.chair-text blockquote p{font:500 19px/1.45 var(--serif);color:#fff}
.chair-text cite{display:block;margin-top:10px;font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--pink)}
.ask{position:relative;z-index:3;margin:12vh 0 0;font:900 clamp(56px,7.4vw,140px)/.88 var(--cond);text-transform:uppercase;letter-spacing:-.005em}
.ask em{font:italic 500 1.06em/.9 var(--serif);text-transform:none;letter-spacing:-.03em;color:var(--pink)}

/* ============ 4 · Part II: blue, the foundation ============ */
.p2{color:var(--ink);background:linear-gradient(180deg,var(--ink) 0,var(--blue) 24vh,var(--blue) calc(100% - 28vh),var(--bone) 100%);padding-top:32vh}
.stripes{position:absolute;z-index:0;left:0;right:0;top:12vh;bottom:18vh;pointer-events:none;mix-blend-mode:screen;opacity:.62;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 76%,transparent 100%)}
.stripes img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.p2 .part-head{max-width:none}
.p2 .pn{color:var(--ink)}
.p2-wall{position:relative;z-index:3;margin-top:5vh;max-width:11.5em;font-size:clamp(60px,8.4vw,160px);color:var(--ink)}
.p2-wall em{color:#fff}
.p2-row{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:5vw;align-items:center;margin-top:9vh}
.p2 .slide-l{margin-left:calc(var(--gutter) * -1 - 12vw);transform:rotate(2.4deg)}
.qs{margin:0 0 30px;padding:0;list-style:none;font:900 clamp(26px,2.2vw,36px)/1 var(--cond);text-transform:uppercase}
.qs li+li{margin-top:10px}
.p2 .verse p{color:var(--ink)}
.p2 .verse cite{color:var(--ink)}
.p2 .say{margin-top:28px;color:var(--ink)}

/* ============ 5 · Part III: bone, the light ============ */
.p3{color:var(--ink);background:linear-gradient(180deg,var(--bone) 0,var(--bone) calc(100% - 26vh),var(--ink) 100%);padding-top:16vh}
.p3-lamp{position:absolute;z-index:0;right:-11vw;top:-6vh;width:min(64vw,1000px);aspect-ratio:1;pointer-events:none}
.p3-lamp img{position:absolute;inset:0;width:100%;height:100%;filter:brightness(0)}
.p3-rays{opacity:.92}
.p3 .pn{color:var(--pink)}
.p3-wall{position:relative;z-index:2;margin-top:6vh;max-width:9.6em;font-size:clamp(60px,8vw,156px);color:var(--ink)}
.p3-wall em{display:block;color:var(--pink);margin-top:.06em;font-size:.98em}
.p3-cite{position:relative;z-index:2;margin:22px 0 0;font:800 12px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase}
.p3-row{position:relative;z-index:2;display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:5vw;align-items:center;margin-top:10vh}
.p3 .slide-r{margin-right:calc(var(--gutter) * -1 - 12vw);transform:rotate(-2.2deg)}
.p3-text .verse{margin-top:28px}
.p3-text .verse cite{color:#9b2a55}

/* ============ 6 · Part IV: black, a sign of life ============ */
.p4{background:var(--ink);padding-top:18vh;padding-bottom:6vh}
.pulse{position:absolute;z-index:0;left:-6vw;right:-6vw;top:4vh;height:min(100vh,78vw);pointer-events:none;opacity:.92;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 70%,transparent 100%)}
.pulse img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% 60%}
.p4 .part-head{max-width:none}
.p4 .pn{color:var(--pink)}
.p4-wall{position:relative;z-index:2;margin-top:6vh;font-size:clamp(66px,10vw,190px);color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.p4-wall em{color:#fff}
.p4-row{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:5vw;align-items:center;margin-top:12vh}
.p4 .slide-l{margin-left:calc(var(--gutter) * -1 - 12vw);transform:rotate(2.6deg)}
.p4 .verse cite{color:var(--pink)}
.p4-k{margin:34px 0 0;font:900 clamp(28px,2.4vw,40px)/.95 var(--cond);text-transform:uppercase}
.think{margin:16px 0 0;padding:0;list-style:none}
.think li{padding:10px 0;border-top:1px solid rgba(255,255,255,.14);font:600 16px/1.5 var(--body);color:var(--mist)}

/* ============ 7 · pink: WISE ============ */
.wise{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:clip;
  padding:30vh var(--gutter) 26vh;background:linear-gradient(180deg,var(--ink) 0,var(--pink) 24vh,var(--pink) calc(100% - 24vh),var(--ink) 100%);color:var(--ink)}
.wise-line{position:relative;z-index:2;margin:0;font-family:var(--cond);font-weight:900;text-transform:uppercase;letter-spacing:-.005em}
.w-small{display:block;font-size:clamp(30px,4.2vw,80px);line-height:.95}
.w-big{position:relative;display:inline-block;margin-top:.24em;font-size:clamp(150px,31vw,600px);line-height:.8;letter-spacing:-.015em}
.w-lamp{position:absolute;right:-.04em;top:-.56em;width:.56em;aspect-ratio:1;pointer-events:none}
.w-lamp img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 18px rgba(255,255,255,.55))}
.wise-src{position:relative;z-index:2;margin:30px 0 0;font:800 12px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#fff}

/* ============ 8 · the download ============ */
.kit{position:relative;overflow-x:clip;padding:16vh 0 14vh;background:var(--ink)}
.kit-head{padding:0 var(--gutter);display:flex;flex-direction:column;align-items:flex-start}
.kit-wall{margin-top:24px;font-size:clamp(58px,8.4vw,160px);color:#fff}
.kit-wall em{color:var(--pink)}
/* the rollout: one phone plays the nine stories in order (new series, next week, tomorrow, tonight, the four parts,
   continues); beside it every other piece of the download appears once, as an object: a lesson page, a title screen, a feed post */
.kit-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:90px;max-width:1440px;margin:11vh auto 0;padding:0 var(--gutter);align-items:start}
.story{grid-column:1/5;grid-row:1/3;justify-self:center;width:100%;max-width:400px;margin:0}
.phone{position:relative;width:min(340px,100%);margin:0 auto;padding:10px;border-radius:52px;
  background:linear-gradient(150deg,#3a3741 0%,#16141b 34%,#08070b 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 0 0 5px #08070b,0 0 0 1px rgba(255,255,255,.06),0 60px 110px -40px rgba(2,136,217,.42),0 30px 70px -30px rgba(220,71,126,.34)}
.phone::before,.phone::after{content:'';position:absolute;width:4px;border-radius:2px;background:#2a2730}
.phone::before{left:-3px;top:21%;height:62px;box-shadow:0 78px 0 #2a2730}
.phone::after{right:-3px;top:28%;height:92px}
.phone-screen{position:relative;aspect-ratio:9/16;border-radius:42px;overflow:hidden;background:#000;isolation:isolate;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.phone-screen::before{content:'';position:absolute;z-index:4;top:11px;left:50%;width:31%;height:27px;margin-left:-15.5%;border-radius:20px;background:#000}
.phone-screen::after{content:'';position:absolute;z-index:2;inset:0 0 auto;height:22%;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0));pointer-events:none}
.story-shot{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;opacity:0;transition:opacity .26s ease;-webkit-user-drag:none}
.story-shot.on{opacity:1;z-index:1}
.story-bars{position:absolute;z-index:3;left:12px;right:12px;top:48px;display:flex;gap:4px;pointer-events:none}
.story-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.36);overflow:hidden}
.story-bars b{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.story-cap{display:flex;align-items:center;gap:8px;width:100%;margin:28px auto 0}
.sc-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.sc-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--mist);white-space:nowrap}
.sc-n{color:#837d89;margin-left:4px}
/* the story's own word, in the art's soft serif, with the art's short bar under it drawn as a pink marker stroke */
.sc-v{position:relative;font:400 26px/1.05 var(--serif);color:#fff;min-height:2.3em;display:flex;align-items:center;padding-bottom:10px;text-wrap:balance}
.sc-v::after{content:'';position:absolute;left:50%;bottom:0;width:2.1em;height:5px;margin-left:-1.05em;border-radius:3px 1px 4px 2px;background:var(--pink);transform:rotate(-2deg)}
.sc-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.sc-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.sc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sc-play{position:absolute;z-index:5;top:58px;right:6px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.sc-play:hover{background:rgba(255,255,255,.14)}
.sc-play svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sc-play .i-play{display:none;fill:currentColor;stroke-width:1.6}
.sc-play[aria-pressed="true"] .i-play{display:inline}
.sc-play[aria-pressed="true"] .i-pause{display:none}
.sc-play[hidden]{display:none}
html:not(.js) .sc-btn,html:not(.js) .sc-play{visibility:hidden}
.piece{margin:0}
.obj{transform:rotate(var(--t,0deg))}
.obj img{display:block;width:100%;height:auto;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 90px -34px rgba(0,0,0,.95),0 34px 80px -40px rgba(2,136,217,.36)}
.piece-page .obj img{background:#ececec;box-shadow:0 50px 90px -34px rgba(0,0,0,.95),0 30px 90px -40px rgba(220,71,126,.42)}
.piece-l{margin:24px 0 0;display:flex;flex-direction:column;gap:6px}
.piece-l strong{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px}
.piece-l strong::before{content:'';flex:none;width:8px;height:8px;background:var(--lime)}
.piece-l span{font-size:13px;line-height:1.5;color:var(--mist)}
.story .piece-l{align-items:center;text-align:center;margin-top:20px}
.piece-page{grid-column:5/13;grid-row:1;--t:-1.4deg;margin-top:30px}
.piece-slide{grid-column:5/10;grid-row:2;--t:1.6deg;margin-top:10px}
.piece-feed{grid-column:10/13;grid-row:2;--t:-2.6deg;margin-top:-50px}
.ledger{margin:14vh var(--gutter) 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6vw}
.ledger div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid rgba(255,255,255,.14)}
.ledger dt{font:800 11px/1.6 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.ledger dd{margin:0;font:600 16px/1.55 var(--body);color:#fff}

/* ============ 9 · the series in the light ============ */
.get{position:relative;overflow-x:clip;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:end;
  padding:34vh var(--gutter) 14vh;background:radial-gradient(ellipse 40% 58% at 27% 46%,rgba(255,246,230,.16),rgba(255,246,230,0) 70%),var(--ink)}
.get-lamp{position:absolute;z-index:1;left:calc(27% - 9vw);top:0;width:18vw;min-width:150px;aspect-ratio:1;margin-top:9vh;pointer-events:none}
.get-lamp img{position:absolute;inset:0;width:100%;height:100%}
.get-bulb{filter:drop-shadow(0 0 22px rgba(255,248,230,.9))}
.get-cord{position:absolute;left:50%;bottom:83%;width:3px;height:9vh;margin-left:-1px;background:rgba(255,255,255,.5)}
.get-lamp::before{content:'';position:absolute;left:50%;top:44%;width:320%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,236,.32) 0,rgba(255,236,214,.1) 26%,rgba(255,236,214,0) 60%)}
.get-cover{position:relative;z-index:2;margin:0 0 0 auto;width:min(30vw,500px);justify-self:center}
.get-cover img{display:block;width:100%;height:auto;transform:rotate(-3deg);box-shadow:0 50px 100px rgba(0,0,0,.8),0 12px 30px rgba(0,0,0,.5)}
.get-copy{position:relative;z-index:2;padding-bottom:2vh}
.get-wall{margin-top:24px;font-size:clamp(56px,6.4vw,118px);color:#fff}
.get-wall em{display:block;margin-top:.08em;color:var(--pink);font-size:.86em}
.get-desc{margin:26px 0 0;max-width:460px;font:600 17px/1.6 var(--body);color:var(--mist)}
.price-row{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.price{margin:0;display:flex;align-items:baseline;gap:12px}
.price strong{font:900 72px/1 var(--cond);letter-spacing:-.01em;color:#fff}
.price span{font:800 11px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.back{margin-top:30px}

/* footer */
.foot{position:relative;z-index:2;padding:40px var(--gutter) 40px;background:var(--ink)}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:40px;align-items:start;border-top:1px solid rgba(255,255,255,.12)}
.fbrand{grid-column:1/5}.fbrand p{margin:20px 0 0;font-size:13px;line-height:1.7;color:var(--mist);max-width:300px}
.fnav{display:flex;flex-direction:column;gap:4px}
.fnav:nth-of-type(1){grid-column:7/10}.fnav:nth-of-type(2){grid-column:10/13}
.fnav a{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:var(--mist)}
.fnav a:hover{color:var(--paper)}
.fline{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:48px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}

/* reduced motion: the light is simply on, nothing moves */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .room{--lit:1}
}

@media (min-width:1700px){
  :root{--gutter:88px}
}
@media (max-width:1100px){
  .nav{gap:22px}
  .room-copy{max-width:min(500px,56vw)}
  .chair{grid-template-columns:minmax(0,1fr) minmax(260px,340px)}
  .ledger{grid-template-columns:1fr}
  .kit-stage{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:76px;margin-top:9vh}
  .story{grid-column:1/-1;grid-row:auto;max-width:380px}
  .piece-page{grid-column:1/-1;grid-row:auto;justify-self:center;width:100%;max-width:820px;margin-top:0}
  .piece-slide{grid-column:1/5;grid-row:auto;margin-top:30px}
  .piece-feed{grid-column:5/7;grid-row:auto;margin-top:0}
}
@media (max-width:900px){
  :root{--gutter:32px}
  .nav{display:none}
  .p2-row,.p3-row,.p4-row{grid-template-columns:1fr;gap:6vh}
  .p3-row .slide-r{order:-1}
  .p2 .slide-l,.p4 .slide-l{margin-left:calc(var(--gutter) * -1 - 10vw);width:108vw}
  .p3 .slide-r{margin-right:calc(var(--gutter) * -1 - 10vw);margin-left:auto;width:108vw}
  .get{grid-template-columns:1fr;align-items:start;padding-top:40vh}
  .get-lamp{left:calc(50% - 9vw)}
  .get{background:radial-gradient(ellipse 60% 40% at 50% 34%,rgba(255,246,230,.16),rgba(255,246,230,0) 70%),var(--ink)}
  .get-cover{width:min(56vw,420px);margin:0 auto}
}
@media (max-width:700px){
  :root{--gutter:20px}
  .top{height:72px;gap:12px}
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .top .btn.sm{padding:10px 12px;font-size:10px;gap:8px}
  .room{--fs:28vw;min-height:0;padding-top:78px}
  .room-art img{object-position:50% 0}
  .lockup{margin-top:3vh}
  .t-not{font-size:.34em}
  .sub{font-size:.16em;margin-right:calc(var(--fs) * .3)}
  .cord{height:calc(var(--fs) * 1.2 + var(--pull))}
  .pull{flex-direction:row-reverse;gap:10px;transform:translate(calc(-100% + 23px),58%)}
  .room-copy{max-width:none;margin-top:10vh;padding-bottom:44vw}
  .buyrow .btn{width:100%}
  .room-cover{right:auto;left:50%;bottom:-22vw;width:52vw;transform:translateX(-50%)}
  .sense{padding:calc(10vh + 86vw) var(--gutter) 16vh}
  .sense-brain{right:-34vw;top:10vh;width:128vw}
  .sense-copy{max-width:none}
  .sense .wall{font-size:15.4vw;text-shadow:0 0 30px rgba(220,71,126,.9)}
  .part{padding:16vh var(--gutter) 14vh}
  .part-head{max-width:none}
  .part-title{font-size:16vw}
  .p1{padding-top:22vh}
  .p1 .slide-r{position:relative;top:auto;right:auto;width:118vw;margin:0 0 8vh 2vw}
  .p1 .part-head{min-height:0}
  .chair{grid-template-columns:1fr;gap:14px;padding:4.4vh 0}
  .chair-word{font-size:19vw}
  .ask{font-size:15vw}
  .p2-wall,.p3-wall{font-size:14.6vw}
  .p4-wall{font-size:17vw}
  .p3-lamp{width:84vw;right:-40vw;top:-4vh}
  .stripes{top:20vh;bottom:30vh}
  .p2 .slide-l,.p4 .slide-l{width:118vw;margin-left:calc(var(--gutter) * -1 - 22vw)}
  .p3 .slide-r{width:118vw;margin-right:calc(var(--gutter) * -1 - 22vw)}
  .wise{padding:24vh var(--gutter) 22vh}
  .w-small{font-size:8.6vw}
  .w-big{font-size:33vw}
  .kit-wall{font-size:15vw}
  .kit-stage{display:block;margin-top:7vh}
  .phone{width:min(74vw,300px);border-radius:46px;padding:9px}
  .phone-screen{border-radius:37px}
  .phone-screen::before{top:9px;height:22px}
  .story-bars{top:38px;left:10px;right:10px;gap:3px}
  .sc-play{top:46px;right:4px}
  .story-cap{gap:6px}
  .sc-v{font-size:23px}
  .piece{margin-top:72px}
  .piece-slide .obj{margin:0 2%}
  .piece-feed{width:76%;margin-left:auto;margin-right:auto}
  .ledger{margin-top:12vh}
  .ledger div{grid-template-columns:1fr;gap:6px}
  .get{padding:36vh var(--gutter) 10vh;gap:8vh}
  .get-lamp{width:36vw;left:32vw;margin-top:6vh}
  .get-cover{width:70vw}
  .get-wall{font-size:13.6vw}
  .price-row .btn{width:100%}
  .foot{padding-top:24px}
  .fgrid{display:block}.fnav{margin-top:24px}
}
@media (max-width:350px){
  .top .btn.sm span{display:none}
  .brand-name{font-size:8.5px}
}

/* Closing bulb is a light switch (Aaron 2026-10-26): click/tap to turn it off and on */
.get-lamp{pointer-events:none}
.get-switch{position:absolute;z-index:3;left:22%;top:8%;width:56%;height:70%;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.get-switch:focus-visible{outline:3px solid #d4ff2a;outline-offset:4px}
.get-lamp img,.get-lamp::before{transition:opacity .18s ease,filter .25s ease}
.get-cover img{transition:filter .35s ease,transform .3s ease}
.get.is-dark .get-rays,.get.is-dark .get-lamp::before{opacity:0}
.get.is-dark .get-bulb{filter:brightness(.38) saturate(.4) drop-shadow(0 0 0 rgba(0,0,0,0))}
.get.is-dark .get-cover img{filter:brightness(.45) saturate(.7)}
.get.is-flick .get-rays,.get.is-flick .get-lamp::before{animation:nscFlick .42s steps(1) 1}
@keyframes nscFlick{0%{opacity:.2}25%{opacity:1}45%{opacity:.35}70%{opacity:1}}
@media (prefers-reduced-motion: reduce){.get.is-flick .get-rays,.get.is-flick .get-lamp::before{animation:none}.get-lamp img,.get-lamp::before,.get-cover img{transition:none}}