/* Generated by build_site.py. The store is a workshop at sunset. */
:root{
  --ground:#F4EEE3;  --paper:#FFFBF4;  --ink:#2B2118;
  --felt:#2F6B4F;    --brass:#B8742A;  --walnut:#6B4226;
  --soft:#6E6054;    --line:#E2D6C3;
  /* the room: deep olive walls, walnut panelling, a dark plank floor */
  --olive:#5B6347;   --olive-lit:#6E7553;  --olive-deep:#3E4632;
  --panel-wood:#4A3122; --panel-line:#5E4130;
  --floor:#2E1F14;    --floor-dark:#241810;
  --linen:#F0E6D2;    /* the label cards and the painted words */
  --case:#7A4D2E;     --case-dark:#4E2F1A;  --case-lite:#8D5C39;
  --brass-lite:#DBA35C; --brass-dark:#8F5518;
  --felt-dark:#255740; --felt-lite:#3C8260;
  --dusk:#2A1B10;     /* the room with the lights down, behind an open drawer */
  --head:Fraunces,Georgia,'Times New Roman',serif;
  --body:'Atkinson Hyperlegible',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.6}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ---- the wordmark: Corey's logo files, never redrawn ---- */
/* the wordmark is a link home, so it gets a finger-sized target like every other link */
.mark{display:inline-flex;align-items:center;text-decoration:none;line-height:0;min-height:48px}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#FBF3E6}
.mark .logo{height:30px;width:30px;max-width:none}
/* the header's icon: a rounded square, shaped like the app icon on a home screen */
.mark .logo,.hs-mark{border-radius:22.5%;box-shadow:0 1px 2px rgba(20,12,6,.18),0 2px 6px rgba(20,12,6,.12)}
.mark-word{font-family:var(--head);font-weight:700;font-size:24px;line-height:1;letter-spacing:.08em}
.mark:focus-visible{outline:3px solid var(--brass-lite);outline-offset:3px;border-radius:4px}

/* ---- the bar across the top of every page but the room ---- */
.top{background:var(--walnut);color:#FBF3E6;padding:10px 0}
.top .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.top .mark{padding:4px 0}
.top .mark .logo{height:30px;width:30px}
.top nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.top nav a{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border-radius:999px;
  background:rgba(251,243,230,.12);color:#FBF3E6;text-decoration:none;font-weight:700;font-size:15px}
.top nav a:hover,.top nav a:focus-visible{background:rgba(251,243,230,.26)}

/* ---- the way back to the house: small, cream, top left of every store page ---- */
.brand{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.ie-link{display:inline-flex;align-items:center;min-height:44px;color:#F2E9D6;opacity:.86;
  font-size:14px;font-weight:700;text-decoration:none;letter-spacing:.01em}
.ie-link:hover,.ie-link:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}
.ie-link:focus-visible{outline:3px solid var(--brass-lite);outline-offset:2px;border-radius:4px}
.room .roombar .ie-link{margin-right:auto}

/* ---- Preview as ---- */
.pv{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pv .lbl{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.8}
.pv .row{display:flex;flex-wrap:wrap;gap:6px}
.pv button{font:inherit;font-weight:700;font-size:14px;min-height:44px;padding:0 14px;
  border-radius:999px;cursor:pointer;border:2px solid rgba(251,243,230,.3);
  background:rgba(251,243,230,.1);color:#FBF3E6}
.pv button[aria-pressed=true]{background:var(--felt-lite);border-color:var(--felt-lite);color:#F6FBF7}
.pv button:focus-visible{outline:3px solid var(--brass-lite);outline-offset:2px}
/* on the cream pages the same control sits on paper */
.pv.onpaper .lbl{color:var(--soft);opacity:1}
.pv.onpaper button{border-color:var(--line);background:var(--ground);color:var(--ink)}
.pv.onpaper button[aria-pressed=true]{background:var(--felt);border-color:var(--felt);color:#F6FBF7}

/* ---- See it at the table ---- */
.films{background:var(--ground);padding:46px 0 10px}
.films h2{font-family:var(--head);font-weight:700;font-size:clamp(25px,3.4vw,34px);margin:0 0 8px}
.films .lede{margin:0 0 24px;color:var(--soft);max-width:44em}
.reel{list-style:none;margin:0;padding:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.reel li{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.reel .box{aspect-ratio:16/9;background:#1A2128;position:relative;display:flex;
  align-items:center;justify-content:center}
.reel .box video{width:100%;height:100%;object-fit:cover}
.reel .box .ph{color:#A9C2CE;font-size:15px;text-align:center;padding:14px;line-height:1.45}
.reel h3{font-family:var(--head);font-weight:700;font-size:19px;margin:0;padding:13px 16px 15px}
.films .after{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.films .note{margin:14px 0 0;color:var(--soft);font-size:15px;max-width:46em}

/* ================================================================ A DRAWER */
body.drawer-page{background:var(--dusk);color:#F3E9DA}
.drawerbar{padding:16px 0 0}
.drawerbar .wrap{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  justify-content:space-between}
.drawerbar .mark .logo{height:32px;width:32px}
.drawerbar .side{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.crumbs{margin:12px 0 0;font-size:15px;color:#C9B49A;display:flex;flex-wrap:wrap;
  gap:2px 8px;align-items:center}
.crumbs a{color:#E7D6BC;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.crumbs span{opacity:.6}
.shut{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;
  border:2px solid #9A7B57;background:transparent;color:#F7EEDF}
.shut:hover,.shut:focus-visible{background:rgba(247,238,223,.12);border-color:var(--brass-lite)}
.pv[hidden]{display:none}
/* the way in for the grown-up who looks after the table; quiet, and never in a kid's way */
.drawerbar .acct{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;
  border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;color:#F7EEDF;
  border:1px solid rgba(247,238,223,.3)}
.drawerbar .acct:hover,.drawerbar .acct:focus-visible{background:rgba(247,238,223,.12)}
/* the sign-in page's own field and list */
.panel .lbl{display:block;font-weight:700;margin:0 0 6px}
.panel input[type=email]{display:block;width:100%;max-width:22rem;min-height:48px;padding:0 14px;
  margin:0 0 14px;border:1px solid #d9cdb8;border-radius:10px;background:#fff;color:var(--ink);
  font:16px/1.4 inherit}
.panel input[type=email]:focus-visible{outline:3px solid var(--brass);outline-offset:1px}
.panel .said{margin:12px 0 0;color:#6b5c48}
.plainlist{list-style:none;padding:0;margin:0 0 14px}
.plainlist li{margin:0 0 8px}

.drawer-grid{display:grid;gap:24px;align-items:start;margin:14px 0 0;
  grid-template-columns:minmax(0,1fr) minmax(290px,345px)}
/* the drawer: walnut carcase, green felt lining */
.open-drawer{background:var(--walnut);border-radius:12px;padding:15px;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),0 12px 28px rgba(0,0,0,.4);position:relative}
.tab{position:absolute;left:50%;top:-16px;transform:translateX(-50%);
  background:var(--brass);color:#2B2118;font-family:var(--head);font-weight:700;font-size:16px;
  padding:5px 20px;border-radius:7px 7px 0 0;white-space:nowrap;
  box-shadow:0 -2px 0 rgba(0,0,0,.12)}
.felt{background:linear-gradient(180deg,var(--felt-lite) 0%,var(--felt) 22%,var(--felt-dark) 100%);
  border-radius:7px;padding:17px;box-shadow:inset 0 3px 12px rgba(0,0,0,.35)}
.boxes{list-style:none;margin:0;padding:0;display:grid;gap:15px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr))}
/* a game box sitting in the felt */
.box{display:flex;flex-direction:column;gap:0;text-decoration:none;color:var(--ink);
  background:var(--paper);border-radius:7px;padding:9px 9px 11px;
  box-shadow:0 4px 0 rgba(0,0,0,.28),0 7px 14px rgba(0,0,0,.25);
  transition:transform .13s ease,box-shadow .13s ease}
/* 4:3, the shape make_shot gives a lid, so a Deck's picture shows whole and nothing is cropped */
.box .lid{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.box .lid.none{display:flex;align-items:center;justify-content:center;
  background:hsl(var(--hue) 36% 71%)}
.box .lid.none span{font-size:12px;color:rgba(43,33,24,.62)}
.box .bname{display:block;font-family:var(--head);font-weight:700;font-size:15px;line-height:1.22;
  margin:9px 2px 2px;text-align:center}
.box .btier{display:block;font-size:12.5px;font-weight:700;color:var(--soft);text-align:center}
/* a short title with the big question under it. Inside the heading, so a Deck without one is
   laid out exactly as before. */
.box .bname .sub{display:block;font-family:var(--body);font-weight:400;font-size:12px;
  line-height:1.25;color:var(--soft);margin-top:3px}
.box:hover,.box:focus-visible{transform:translateY(-7px);
  box-shadow:0 11px 0 rgba(0,0,0,.26),0 16px 24px rgba(0,0,0,.3);outline:none}
.box.sel{transform:translateY(-7px);
  box-shadow:0 11px 0 rgba(0,0,0,.26),0 16px 24px rgba(0,0,0,.3),0 0 0 3px var(--brass-lite)}
.box:focus-visible{outline:3px solid var(--brass-lite);outline-offset:3px}
/* A drawer sorted into rows, for a shelf whose decks.json entry has a "rows" list. The label is
   a small brass-on-felt heading, and each row keeps its own grid of boxes. */
.felt .row + .row{margin-top:16px;padding-top:14px;border-top:1px solid rgba(247,238,223,.16)}
.felt .rowname{margin:0 0 9px;font-family:var(--head);font-weight:700;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brass-lite)}

/* an open slot cut into the felt */
.slot{border:3px dashed rgba(247,238,223,.5);border-radius:7px;padding:16px 12px;
  display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;
  text-align:center;color:#EAF3ED;min-height:150px}
.slot .tag{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  margin:0;opacity:.85}
.slot .sname{font-family:var(--head);font-weight:700;font-size:16px;margin:0}

/* the panel beside the drawer */
.panes{position:sticky;top:18px}
.pane{display:none;background:var(--paper);color:var(--ink);border-radius:14px;padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.35)}
.pane.on{display:block}
.pane .lid{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.pane .lid.none{display:flex;align-items:center;justify-content:center;
  background:hsl(var(--hue) 36% 71%)}
.pane .lid.none span{font-size:13px;color:rgba(43,33,24,.62)}
.pane h2{font-family:var(--head);font-weight:700;font-size:25px;margin:14px 0 8px;line-height:1.15}
.pane h2 .sub{display:block;font-family:var(--body);font-weight:400;font-size:15px;
  line-height:1.3;color:var(--soft);margin-top:4px}
.pane .pitch{margin:0 0 12px;color:var(--soft);font-size:16px}
.pane .chips{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pane .chips li{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;
  background:var(--ground);color:var(--walnut)}
.pane .avail{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--felt)}
.pane .acts{display:flex;flex-direction:column;gap:9px}
.pane .nopage{margin:10px 0 0;font-size:14px;color:var(--soft)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn.play{background:var(--felt);color:#F6FBF7}
.btn.play:hover,.btn.play:focus-visible{background:#26583F}
.btn.quiet{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn.quiet:hover,.btn.quiet:focus-visible{border-color:var(--brass)}
.btn:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.avail{margin:0;font-size:16px;font-weight:700;color:var(--felt)}
.nopage{margin:0;font-size:15px;color:var(--soft)}

/* ================================================================ A DECK, SET UP, ABOUT */
.sheet{padding:0 0 10px}
.crumb{padding:20px 0 0;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;
  color:var(--soft);font-size:15px}
.crumb a{color:var(--walnut);font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.crumb span{opacity:.6}
.deck-head{padding:4px 0 0}
.deck-head h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4.4vw,44px);
  line-height:1.15;margin:0 0 12px}
.deck-head h1 .sub{display:block;font-family:var(--body);font-weight:400;
  font-size:clamp(17px,2.2vw,23px);line-height:1.25;color:var(--soft);margin-top:8px}
/* the imprint a book belongs to: its own line, small, never read as part of the title */
.deck-head p.series{margin:-4px 0 12px;font-family:var(--head);font-style:italic;font-size:16px;
  color:var(--walnut)}
/* the small line under the devices: a pen mark and one sentence, never its own paragraph */
.spec .bestwith{display:flex;align-items:flex-start;gap:6px;margin-top:4px;font-weight:400;
  font-size:14px;line-height:1.35;color:var(--soft);max-width:30em}
.spec .bestwith svg{flex:none;margin-top:2px;color:var(--brass)}
.deck-head p.pitch{margin:0 0 10px;font-size:20px;color:var(--soft);max-width:34em}
.stage-img{margin:24px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  overflow:hidden}
.stage-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.stage-img.empty{border-style:dashed;aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;padding:24px}
.stage-img.empty p{margin:0;text-align:center;color:var(--soft);font-size:17px;max-width:30em}
.cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
.cols.one{grid-template-columns:1fr}
  margin:24px 0 0;align-items:start}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.panel h2{font-family:var(--head);font-weight:700;font-size:23px;margin:0 0 12px}
.panel p{margin:0 0 12px}
.panel p:last-child{margin-bottom:0}
.panel.saves{border-left:6px solid var(--felt)}
.spec{margin:0;display:grid;gap:13px;grid-template-columns:auto 1fr}
.spec dt{font-weight:700;color:var(--soft);font-size:16px}
.spec dd{margin:0;font-weight:700}
.acts-row{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-head{padding:18px 0 0}
.page-head h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4.2vw,42px);
  margin:0 0 8px;line-height:1.15}
.page-head p{margin:0;color:var(--soft);max-width:42em}
.steps{counter-reset:step;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px}
.steps li{counter-increment:step;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px 22px 76px;position:relative}
.steps li::before{content:counter(step);position:absolute;left:22px;top:22px;
  width:38px;height:38px;border-radius:50%;background:var(--felt);color:#F6FBF7;
  font-family:var(--head);font-weight:700;font-size:20px;
  display:flex;align-items:center;justify-content:center}
.steps h2{font-family:var(--head);font-weight:700;font-size:22px;margin:0 0 8px}
.steps p{margin:0 0 10px}
.steps p:last-child{margin-bottom:0}
.prose{max-width:40em}
.prose h2{font-family:var(--head);font-weight:700;font-size:25px;margin:34px 0 10px}
.prose p{margin:0 0 14px}

/* ---- foot ---- */
footer{margin:48px 0 0;background:var(--walnut);color:#FBF3E6;padding:28px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;align-items:center}
footer p{margin:0;font-size:16px;max-width:42em}
footer a{color:#FBF3E6;display:inline-flex;align-items:center;min-height:44px}
body.drawer-page footer{background:#1C1209;margin-top:36px}

/* ---- a drawer folds down to one column on a narrow screen ---- */
@media (max-width:980px){
  .drawer-grid{grid-template-columns:1fr}
  .panes{position:static}
}

/* ---- Meet Corey: a page you can read by skimming it ---- */
.mc{padding:0 0 10px}
.mc .wrap{max-width:1100px}
.mc h2{font-family:var(--head);font-weight:700;font-size:clamp(23px,3vw,30px);
  margin:0 0 6px;letter-spacing:.01em}
.mc .sub{margin:0 0 26px;color:var(--soft);max-width:34em}
.mc p{margin:0 0 12px;max-width:34em}

/* Meet Corey: six pieces, each one idea. Nothing here is a wall of words. */
.mc-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;
  align-items:center;padding:34px 0 40px}
.mc-hero.solo{grid-template-columns:1fr;text-align:center;padding:52px 0 40px;justify-items:center}
.mc-hero h1{font-family:var(--head);font-weight:700;margin:0 0 14px;
  font-size:clamp(34px,6vw,58px);line-height:1.05}
.mc-hero .line{font-size:clamp(17px,1.6vw,21px);color:var(--soft);margin:0;max-width:24em}
.mc-film{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:10px;
  box-shadow:0 14px 30px rgba(43,33,24,.09)}
.mc-film video{display:block;width:100%;height:auto;border-radius:10px;background:#1b130c}
.mc-film figcaption{margin:10px 2px 2px;font-weight:700;font-size:15px;color:var(--soft)}

/* a piece: a heading and a line or two under it */
.mc-piece{padding:0 0 38px}
.mc-piece h2{font-family:var(--head);font-weight:700;font-size:clamp(22px,2.6vw,30px);
  margin:0 0 12px;line-height:1.15}
.mc-piece p{margin:0 0 10px;font-size:17px;line-height:1.6;max-width:36em}

/* how I teach: three numbered steps, one line each */
.mc-order{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.mc-order li{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.mc-order .n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--felt);color:#F6FBF7;
  font-family:var(--head);font-weight:700;display:flex;align-items:center;justify-content:center}
.mc-order b{display:block;font-family:var(--head);font-size:18px;margin:0 0 3px}
.mc-order span{display:block;color:var(--soft);line-height:1.5}

/* the quote band, the full width of the page */
.mc-quote{background:var(--felt);color:#F4FBF6;padding:52px 0;margin:10px 0 0}
.mc-quote blockquote{margin:0;font-family:var(--head);font-weight:700;
  font-size:clamp(26px,4vw,42px);line-height:1.18;letter-spacing:.01em;max-width:24em}

/* the close */
.mc-close{background:var(--paper);border-top:1px solid var(--line);padding:44px 0 52px}
.mc-close .big{font-family:var(--head);font-weight:700;margin:0 0 24px;
  font-size:clamp(22px,3vw,32px);line-height:1.2;max-width:20em}
.mc-close .seat{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.mc-close .quiet-link{color:var(--walnut);font-weight:700;text-decoration:underline;
  min-height:44px;display:inline-flex;align-items:center}

@media (max-width:900px){
  .mc-hero{grid-template-columns:1fr;gap:24px;padding:24px 0 30px}
  .mc-order{grid-template-columns:1fr}
  .mc-quote br{display:none}   /* let the quote wrap where it likes on a narrow screen */
}
@media (max-width:480px){
  .steps li{padding:68px 20px 22px}
  .steps li::before{left:20px;top:18px}
  .boxes{grid-template-columns:repeat(auto-fill,minmax(min(100%,138px),1fr))}
}

/* ---- the house: intentional.education's front page, the painting with a way in at every room ---- */
.hs-top{background:var(--paper);border-bottom:1px solid var(--line);padding:10px 0}
.hs-top .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
.hs-name{font-family:var(--head);font-weight:700;font-size:24px;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:48px}
.hs-top nav{display:flex;flex-wrap:wrap;gap:6px}
.hs-top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--walnut);text-decoration:none;font-weight:700;font-size:15px}
.hs-top nav a:hover,.hs-top nav a:focus-visible{background:var(--ground);border-color:var(--brass)}
.hs-head{padding:34px 0 18px;text-align:center}
.hs-head h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4.4vw,48px);line-height:1.15;
  margin:0}
.hs-head p{max-width:46em;margin:12px auto 0;color:var(--soft);font-size:clamp(16px,1.6vw,19px)}
.hs-art{padding:0 0 26px}
.house{position:relative;container-type:inline-size;aspect-ratio:1672/941;border-radius:14px;
  overflow:hidden;box-shadow:0 10px 30px rgba(43,33,24,.22);background:#14203F}
.house img{width:100%;height:100%;object-fit:cover}
.house .way{position:absolute;display:block;color:var(--ink);text-decoration:none;border-radius:4px;
  -webkit-tap-highlight-color:transparent}
/* the room's own light, a little warmer while someone is touching or pointing at it */
.house .way .glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 70% 75% at 50% 35%,rgba(255,190,105,.42),rgba(255,170,80,0) 72%);
  mix-blend-mode:screen;transition:opacity .25s ease}
.house .way .tag{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;text-align:center;white-space:nowrap;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;padding:.45cqw .9cqw .5cqw;
  box-shadow:0 2px 5px rgba(43,33,24,.28);transition:transform .2s ease,box-shadow .2s ease}
.house .way .tag b{font-family:var(--head);font-weight:700;font-size:clamp(11px,1.2cqw,20px);line-height:1.15}
.house .way .tag span{font-size:clamp(10px,.86cqw,15px);line-height:1.25;color:var(--soft)}
.house .way:hover .glow,.house .way:focus-visible .glow,.house .way:active .glow{opacity:1}
.house .way:hover .tag,.house .way:focus-visible .tag,.house .way:active .tag{
  transform:translateX(-50%) translateY(-4px);box-shadow:0 7px 14px rgba(43,33,24,.34)}
.house .way:focus-visible{outline:3px solid var(--brass-lite);outline-offset:-3px}
.house .way .tag{left:var(--tx);top:var(--ty)}
/* narrower than a laptop: the name only, and the cards below the painting say the rest */
@container (max-width:900px){
  .house .way .tag{padding:2px 7px}
  .house .way .tag span{display:none}
}
/* a phone: each name moves to the middle of its room, so two neighbours can never touch */
@container (max-width:620px){
  .house .way .tag{left:var(--txn,50%);padding:1px 5px}
  .house .way .tag b{font-size:10px}
}
.hs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;
  padding:0 0 44px;margin:0;list-style:none}
.hs-cards a{display:flex;flex-direction:column;gap:4px;height:100%;min-height:96px;padding:16px 18px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);
  text-decoration:none;box-shadow:0 2px 6px rgba(43,33,24,.08)}
.hs-cards a:hover,.hs-cards a:focus-visible{border-color:var(--brass);box-shadow:0 6px 14px rgba(43,33,24,.14)}
.hs-cards b{font-family:var(--head);font-size:21px;line-height:1.2}
.hs-cards span{color:var(--soft);font-size:16px;line-height:1.4}
.hs-room{padding:48px 0 60px;text-align:center}
.hs-room h1{font-family:var(--head);font-size:clamp(30px,5vw,46px);margin:0 0 8px}
.hs-room p{margin:0 0 26px;color:var(--soft)}
.hs-room .btn-home{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--walnut);color:#FBF3E6;font-weight:700;text-decoration:none}

/* ---- the reading nook: the painting fills the page, the books stand face-out on its shelves ---- */
body.nook-page{background:#2E1A12 url(tex/rug.webp)}
.nook-main{padding:0}
.nook{position:relative;container-type:inline-size;aspect-ratio:1672/941;margin:0 auto;
  width:min(100%,calc((100vh - 70px) * 1672 / 941));width:min(100%,calc((100svh - 70px) * 1672 / 941))}
.nook .paint{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent)}
/* a featured book's small cover on its painted plate stand, leaning back against the stand's
   board, its foot tucked behind the ledge's lip: a bookshop's display of a new release */
.nook .display{position:absolute;display:block;-webkit-tap-highlight-color:transparent}
.nook .display .lean{position:absolute;inset:0;display:block;container-type:inline-size;
  transform-origin:50% 100%;transform:perspective(260px) rotateX(8deg);transition:transform .2s ease}
.nook .display img{width:100%;height:100%;object-fit:cover;max-width:none;display:block;border-radius:1px;
  box-shadow:1px 0 0 #F3EBDC,2px 0 0 #CDBFA6,0 6px 9px -3px rgba(20,12,6,.55)}
.nook .display:hover .lean,.nook .display:focus-visible .lean{transform:perspective(260px) rotateX(4deg) translateY(-3%)}
.nook .stand-lip{position:absolute;display:block;max-width:none;pointer-events:none}
/* the decorations at the end of each shelf, and the plate stand: painted objects standing on the
   shelf with a soft shadow, like the spines. Never links. */
.nook .prop{position:absolute;display:block;pointer-events:none}
.nook .prop img{width:100%;height:100%;max-width:none;display:block}
/* they were painted in daylight, and the nook is lit by a lamp */
.nook .prop img,.nook .stand-lip{filter:brightness(.84) saturate(.92)}
.nook .prop::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-3%;height:9%;z-index:-1;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,12,6,.55),rgba(20,12,6,0) 70%)}
.nook .prop.stand::after{bottom:-2%;height:6%}
/* on a phone the decorations step aside; the books and the featured display stay */
@container (max-width:699px){.nook .prop:not(.stand){display:none}}
.nook .display:focus-visible{outline:3px solid var(--brass-lite);outline-offset:3px;border-radius:3px}
.nook .ct{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;line-height:1;
  pointer-events:none;padding:.09em .11em;border-radius:.33em;
  /* the books' own cream patch behind the title (their .words .ink), scaled to the title */
  background:rgba(251,245,236,.86);box-shadow:0 0 .33em .17em rgba(251,245,236,.86)}
.nook .ileaf{position:relative;display:inline-block}
.nook .ileaf svg{position:absolute;left:44%;top:.02em;width:.3em;height:.37em;
  transform:translateX(-50%) rotate(14deg);transform-origin:50% 100%;overflow:visible}
/* a book standing as a spine: its painted spine, the title stamped down it in soft gold
   between the raised bands, and a soft shadow where it meets the shelf */
.nook .sp{position:absolute;display:block;transform-origin:50% 100%;
  transition:transform .25s ease,filter .25s ease;-webkit-tap-highlight-color:transparent}
.nook .sp img{width:100%;height:100%;max-width:none;display:block}
.nook .sp::after{content:"";position:absolute;left:-10%;right:-25%;bottom:-2.5%;height:4%;z-index:-1;
  background:radial-gradient(ellipse at 45% 40%,rgba(20,12,6,.6),rgba(20,12,6,0) 72%)}
.nook .bookend{position:absolute;display:block;max-width:none}
.nook .sp .st-wrap{position:absolute;left:50%;transform:translate(-50%,-50%);display:block;pointer-events:none}
.nook .sp .st{display:block;writing-mode:vertical-rl;white-space:nowrap;line-height:1;color:#E6C57E;
  text-shadow:0 1px 0 rgba(30,15,4,.65),0 -1px 0 rgba(255,238,196,.22)}
/* pulled a little way out of the shelf, toward whoever is looking */
.nook .sp.out{transform:translateY(-6%) scale(1.07);filter:drop-shadow(0 6px 7px rgba(10,5,2,.55));z-index:3}
.nook .sp:focus-visible{outline:3px solid var(--brass-lite);outline-offset:2px}
/* the pulled-out book's cover, large, on the wall beside the bookcase */
.nook .pulls{position:absolute;left:38%;top:8%;width:27%;pointer-events:none;z-index:4}
.nook .pull{pointer-events:auto;background:var(--paper);border-radius:12px;padding:3.5%;text-align:center;
  box-shadow:0 12px 30px rgba(20,12,6,.5)}
.nook .pull[hidden]{display:none}
.nook .pull-cover{position:relative;container-type:inline-size;aspect-ratio:1672/941;border-radius:4px;
  overflow:hidden;box-shadow:0 2px 6px rgba(20,12,6,.35)}
.nook .pull-cover img{width:100%;height:100%;object-fit:cover}
.nook .pull h2{font-family:var(--head);font-weight:700;font-size:clamp(15px,1.6cqw,30px);line-height:1.15;
  margin:.55em 0 .15em}
.nook .pull p{margin:0 0 .7em;color:var(--soft);font-size:clamp(12px,.95cqw,18px);line-height:1.35}
.nook .pull .btn{min-height:44px;width:100%;justify-content:center}
@container (max-width:700px){.nook .pulls{display:none}}   /* too small to show: a tap opens the book */
/* under the painting, at every size: the heading, and every book as a line you can tap */
.nook-books{max-width:720px;margin:0 auto;padding:30px 16px 40px;text-align:center}
.nook-books h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.15;
  color:#F4EADA;margin:0}
.nook-books > p{margin:6px 0 20px;color:rgba(244,234,218,.75);font-size:17px}
.nook-list{display:grid;list-style:none;margin:0;padding:0;gap:12px;text-align:left}
.nook-list a{display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 14px;color:var(--ink);
  text-decoration:none}
.nook-list img{width:96px;height:auto;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.nook-list b{display:block;font-family:var(--head);font-size:19px;line-height:1.2}
.nook-list em{display:block;font-style:normal;color:var(--soft);font-size:15px}

/* ---- the cabinet: living-room.png, with each drawer's name on its painted card ---- */
.cab{padding:0 0 40px}
.cab-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  padding-top:26px;padding-bottom:6px}
.cab-sign h1{font-family:var(--head);font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1;
  letter-spacing:.08em;margin:0}
.cab-sign p{margin:6px 0 0;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--soft)}
.cab-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cab-nav > a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--walnut);text-decoration:none;font-weight:700;font-size:15px}
.cab-nav > a:hover,.cab-nav > a:focus-visible{background:var(--paper);border-color:var(--brass)}
.plaque{background:linear-gradient(180deg,var(--brass-lite),var(--brass));color:#2B2118;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,240,215,.6),0 1px 3px rgba(0,0,0,.4)}
.lr-wrap{width:100%;max-width:1540px;margin:14px auto 0;padding:0 20px}
.lr{position:relative;container-type:inline-size;aspect-ratio:1672/941;border-radius:12px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.4)}
.lr img{width:100%;height:100%;object-fit:cover}
.lr .dw{position:absolute;display:block;border-radius:3px;color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background-color .2s ease}
.lr .dw:hover,.lr .dw:focus-visible,.lr .dw:active{background:rgba(255,214,150,.14)}
.lr .dw:focus-visible{outline:3px solid var(--brass-lite);outline-offset:-2px}
.lr .card{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1.1;overflow:hidden}
.lr .card b{font-family:var(--head);font-weight:700;font-size:clamp(8px,.9cqw,16px);white-space:nowrap}
.lr .card span{font-size:clamp(7px,.74cqw,13px);color:#5A4A3C;white-space:nowrap;margin-top:.15em}
@container (max-width:700px){.lr .card{display:none}}   /* too small to read: the list below says it */
.lr-books{margin:12px 0 0;text-align:right}
.lr-books .plaque{display:inline-flex;align-items:center;min-height:36px;margin:0;padding:0 14px;
  font-size:13px;text-decoration:none}
.lr-books .plaque:hover,.lr-books .plaque:focus-visible{filter:brightness(1.08)}
.lr-list{display:none;list-style:none;margin:14px 0 0;padding:0;gap:10px}
.lr-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:54px;
  padding:0 16px;border-radius:10px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.lr-list b{font-family:var(--head);font-size:18px}
.lr-list span{color:var(--soft);font-size:15px}
@media (max-width:1000px){.lr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}}

/* ---- the cream header stays on screen in every room, and leads back to the house ---- */
.hs-top{position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--line),0 4px 12px rgba(43,33,24,.08)}
.hs-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;
  border-radius:999px;background:var(--walnut);color:#FBF3E6;font-weight:700;font-size:15px;
  text-decoration:none;white-space:nowrap}
.hs-back:hover,.hs-back:focus-visible{background:#55331C}
.hs-back span{font-size:18px;line-height:1}
.hs-top.in-room .wrap{justify-content:flex-start}
.hs-top.in-room nav{margin-left:auto}
/* Sign in: at the far right, set a little apart from the five rooms */
.hs-name{gap:10px}
.hs-mark{width:30px;height:30px;flex:none}
.hs-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 18px;margin-left:6px;
  border-left:1px solid var(--line);color:var(--walnut);font-weight:700;font-size:15px;text-decoration:none}
.hs-signin:hover,.hs-signin:focus-visible{text-decoration:underline;text-underline-offset:4px}
/* wide: one row, the way back, the name, the five rooms and Sign in */
@media (min-width:1101px){
  .hs-top .wrap{flex-wrap:nowrap}
  .hs-top nav{flex-wrap:nowrap}
}
@media (min-width:1101px){.hs-top.in-room .wrap{gap:8px 14px}.hs-top.in-room .hs-name{font-size:22px}}
.hs-top nav a,.hs-signin,.hs-name{white-space:nowrap}
@media (min-width:1101px) and (max-width:1180px){.hs-top nav a{padding:0 11px}}
/* narrower: the name, the way back and Sign in on the first row, and the rooms below in one
   row that slides sideways, so the header stays two rows at most */
@media (max-width:1100px){
  .hs-top{padding:6px 0}
  .hs-top .wrap{gap:4px 12px}
  .hs-name{font-size:20px;min-height:44px}
  .hs-top nav{flex-wrap:nowrap;overflow-x:auto;width:100%;margin:0 -20px;padding:0 20px 2px;
    width:calc(100% + 40px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hs-top nav::-webkit-scrollbar{display:none}
  .hs-top nav a{flex:none}
  .hs-top.in-room nav{margin-left:-20px}
  /* on a phone it stays on the first row, at the far right, and the rooms slide below */
  .hs-signin{order:2;margin-left:auto;border-left:0;padding:0 2px}
  .hs-top nav{order:3}
}
/* a phone, in a room: the blocks stay beside the way back, the words step aside */
@media (max-width:460px){.hs-top.in-room .hs-name span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* ---- the house's tags: each stays inside its own room, its small line wrapping if it must ---- */
.house .way .tag{max-width:calc(100% - 8px)}
.house .way .tag span{white-space:normal}

/* ---- the house at night: stars, the moon's breath, fireflies, a wisp of smoke ---- */
.house .alive{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.house .alive span{position:absolute;display:block}
.alive .tw{width:.42cqw;height:.42cqw;margin:-.21cqw 0 0 -.21cqw;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFF8E2 0,rgba(255,244,214,.75) 30%,rgba(255,240,200,0) 70%);
  box-shadow:0 0 .5cqw .12cqw rgba(255,240,205,.5);
  animation:tw var(--d,11s) ease-in-out var(--w,0s) infinite}
@keyframes tw{0%,70%,100%{opacity:0;transform:scale(.6)}82%{opacity:var(--peak,.9);transform:scale(1.15)}}
.alive .moon-glow{aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,196,.34) 0,rgba(255,232,178,.16) 34%,rgba(255,226,170,0) 68%);
  animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.45;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.alive .ff{width:0;height:0;animation:wander var(--d,22s) ease-in-out var(--w,0s) infinite}
.alive .ff i{position:absolute;left:-.3cqw;top:-.3cqw;width:.6cqw;height:.6cqw;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFF6B0 0,rgba(236,240,120,.85) 28%,rgba(210,230,90,0) 70%);
  box-shadow:0 0 .9cqw .25cqw rgba(225,235,110,.35);
  animation:glim var(--f,6s) ease-in-out var(--fw,0s) infinite}
@keyframes wander{0%,100%{transform:translate(0,0)}33%{transform:translate(var(--x1),var(--y1))}
  66%{transform:translate(var(--x2),var(--y2))}}
@keyframes glim{0%,100%{opacity:0}35%,60%{opacity:.95}}
.alive .smoke{width:0;height:0}
.alive .smoke i{position:absolute;left:-1.1cqw;top:-1cqw;width:2.2cqw;height:1.5cqw;border-radius:50%;opacity:0;
  background:radial-gradient(ellipse,rgba(214,218,228,.30),rgba(214,218,228,0) 70%);filter:blur(.25cqw);
  animation:wisp 13s ease-out infinite}
.alive .smoke i:nth-child(2){animation-delay:-4.3s}
.alive .smoke i:nth-child(3){animation-delay:-8.6s}
@keyframes wisp{0%{opacity:0;transform:translate(0,0) scale(.6)}
  20%{opacity:.75}
  100%{opacity:0;transform:translate(2.4cqw,-6cqw) scale(2.4)}}
.house .alive.paused,.house .alive.paused *{animation-play-state:paused}
/* anyone who asks for less motion gets the still painting */
@media (prefers-reduced-motion:reduce){.house .alive{display:none}}

/* ---- here's what's inside: under the house, in its night sky ---- */
.inside{padding:20px 0 30px}
.inside h2{margin:0 0 30px;text-align:center;font-family:var(--head);font-weight:700;color:#F6ECDA;
  font-size:clamp(28px,4vw,42px);line-height:1.15}
.in-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);
  align-items:center;margin:0 0 clamp(36px,5vw,60px)}
.in-row:nth-of-type(even) .in-pic{order:2}
.in-row.no-pic{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto;
  text-align:center}
/* each preview in a cream border, like a postcard */
.in-pic{background:#FFF8EC url(tex/paper.webp);padding:10px;border-radius:4px;
  box-shadow:0 2px 3px rgba(0,0,0,.3),0 18px 34px -12px rgba(0,0,0,.6)}
.in-pic img,.in-pic video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:2px;display:block}
.in-corey .in-pic video{aspect-ratio:auto}
.in-words{color:#F6ECDA}
.in-words h3{margin:0 0 8px;font-family:var(--head);font-weight:700;font-size:clamp(25px,3vw,32px);line-height:1.15}
.in-words p{margin:0 0 12px;font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:rgba(246,236,218,.86)}
.in-words ul{margin:0 0 14px;padding:0;list-style:none}
.in-words li{position:relative;padding-left:22px;margin:0 0 6px;font-size:17px;line-height:1.45;
  color:rgba(246,236,218,.86)}
.in-words li::before{content:"";position:absolute;left:3px;top:.55em;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3CE8A,#B8742A 60%)}
.in-words .btn{margin-top:6px}
@media (max-width:760px){
  .in-row{grid-template-columns:minmax(0,1fr)}
  .in-row:nth-of-type(even) .in-pic{order:0}
}

/* ---- every room keeps its own surfaces all the way down: faint tiles cut from its painting ---- */
/* a paper note: cream paper, a brass pin, a soft shadow on the wood or the plaster behind it */
.paper,.hs-cards a,.nook-list a,.lr-list a{position:relative;background:#FFF8EC url(tex/paper.webp);
  border:0;border-radius:3px;color:var(--ink);
  box-shadow:0 1px 2px rgba(30,18,8,.22),0 10px 22px -10px rgba(30,18,8,.55)}
.paper::before,.hs-cards a::before,.nook-list a::before,.lr-list a::before{content:"";position:absolute;
  left:50%;top:7px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3CE8A,#B8742A 55%,#7A4A16);box-shadow:0 1px 2px rgba(0,0,0,.45)}
.hs-cards a,.nook-list a,.lr-list a{transition:transform .2s ease,box-shadow .2s ease}
.hs-cards a:hover,.hs-cards a:focus-visible,.nook-list a:hover,.nook-list a:focus-visible,
.lr-list a:hover,.lr-list a:focus-visible{transform:translateY(-2px);
  box-shadow:0 2px 3px rgba(30,18,8,.25),0 16px 26px -10px rgba(30,18,8,.6);outline:none}
.hs-cards a:focus-visible,.nook-list a:focus-visible,.lr-list a:focus-visible{outline:3px solid var(--brass-lite);outline-offset:2px}
.hs-cards a{padding-top:22px}
.lr-list a::before,.nook-list a::before{top:50%;left:12px;margin:-5px 0 0}
.lr-list a,.nook-list a{padding-left:32px}

/* the house: the night sky around it, and the painting's edges melting into it */
body.house-page{background:#10264A url(tex/sky.webp)}
.house-page .hs-head h1{color:#F6ECDA}
.house-page .hs-head p{color:rgba(246,236,218,.78)}
.house-page .house{box-shadow:none;border-radius:0;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),
    linear-gradient(180deg,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),
    linear-gradient(180deg,#000 93%,transparent);
  mask-composite:intersect}

/* the cabinet: the living room's warm plaster wall */
body.cab-page{background:#ECCB91 url(tex/plaster.webp)}
.cab-page .lr{box-shadow:none;border-radius:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),
    linear-gradient(180deg,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),
    linear-gradient(180deg,#000 95%,transparent);
  mask-composite:intersect}
.cab-page .cab-sign p{color:#5E4630}
.cab-page .cab-nav > a{border-color:rgba(107,66,38,.35);background:rgba(255,248,236,.35)}

/* ---- the study: the painting still and whole, each object a target with its own note ---- */
body.study-page{background:#E6CC9E url(tex/study.webp)}
.study-main{padding:0}
.st-stage{display:none;background:#2A1B10;padding:0 0 14px}
.st-room{position:relative;margin:0 auto;width:100%;aspect-ratio:1672/941;overflow:hidden;
  width:min(100%,calc((100vh - var(--hdr,69px) - 56px) * 1.7768));
  width:min(100%,calc((100svh - var(--hdr,69px) - 56px) * 1.7768));container-type:inline-size}
.st-room > img{display:block;width:100%;height:100%}
.st-room .screen{position:absolute;background:#111;object-fit:cover}
/* the room's line, on its own paper note pinned at the top centre of the corkboard */
.st-line{position:absolute;text-align:center;pointer-events:none;padding:1.55cqw 1.8cqw 1.2cqw}
.st-line h1{margin:0;font-family:var(--head);font-weight:700;font-size:max(20px,2.15cqw);line-height:1.1;color:var(--ink)}
.st-line p{margin:.5em 0 0;font-size:max(13px,1.08cqw);line-height:1.4;color:#4A3B2E}
/* the targets: nothing shows until pointed at, but a keyboard sees where it is */
.st-room .spot{position:absolute;z-index:2;display:block;margin:0;padding:0;border:0;border-radius:1cqw;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.st-room .spot:focus-visible{outline:3px solid var(--brass-lite);outline-offset:2px}
/* the spotlight: the room dims a little and a warm glow sits on the object */
.st-hl,.st-hint{position:absolute;z-index:1;border-radius:1.7cqw;pointer-events:none;opacity:0}
.st-hl{background:radial-gradient(ellipse at 50% 55%,rgba(255,214,150,.22),rgba(255,200,130,0) 72%);
  box-shadow:0 0 40px 12px rgba(255,196,118,.45),inset 0 0 50px rgba(255,206,140,.32),
    0 0 80px 4000px rgba(20,11,4,.46);
  transition:opacity .35s ease,left .45s cubic-bezier(.45,.05,.2,1),top .45s cubic-bezier(.45,.05,.2,1),
    width .45s cubic-bezier(.45,.05,.2,1),height .45s cubic-bezier(.45,.05,.2,1)}
.st-hl.on{opacity:1}
/* the faint glow that wanders from object to object while nothing is open */
.st-hint{background:radial-gradient(ellipse at 50% 55%,rgba(255,220,160,.24),rgba(255,200,130,0) 72%);
  box-shadow:0 0 34px 10px rgba(255,196,118,.42),inset 0 0 40px rgba(255,206,140,.3)}
.st-hint.go{animation:st-hint 2.6s ease-in-out}
@keyframes st-hint{0%,100%{opacity:0}45%,60%{opacity:1}}
/* each object's paper note, beside it */
.st-note{position:absolute;z-index:3;left:0;top:0;width:clamp(240px,24vw,330px);padding:22px 22px 18px;
  opacity:0;visibility:hidden;transform:translateY(6px) rotate(-.6deg);
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.st-note.on{opacity:1;visibility:visible;transform:rotate(-.6deg);transition-delay:0s}
.st-note h2,.study-list h2{margin:0 0 6px;font-family:var(--head);font-weight:700;font-size:23px;line-height:1.2}
.st-note p,.study-list .paper p{margin:0;font-size:17px;line-height:1.5;color:#4A3B2E}
.st-note .btn,.study-list .btn{margin-top:14px}
.st-more{display:block;margin-top:12px;font-size:15px;font-weight:700;color:var(--brass-dark);
  text-decoration:underline;text-underline-offset:3px}
.st-more:focus-visible{outline:3px solid var(--brass-lite);outline-offset:2px;border-radius:3px}
.st-tip{margin:12px 16px 0;text-align:center;color:#F1E3C8;font-size:17px}
@media (prefers-reduced-motion:reduce){.st-hl,.st-note{transition:none}.st-hint{display:none}}
/* the same notes in order, each under its close-up: a phone, and a browser without scripts */
.study-list{background:#4C2E19 url(tex/walnut.webp);padding:0 0 30px}
.study-list .st-tip{margin:14px 16px 0}
.sl-head{background:#E6CC9E url(tex/study.webp);text-align:center;padding:26px 18px 20px}
.sl-head h1{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(30px,6vw,44px);line-height:1.1}
.sl-head p{margin:8px auto 0;max-width:30em;color:#4A3B2E;font-size:18px}
.sl-room{position:relative;aspect-ratio:1672/941}
.sl-room img{width:100%;height:100%}
.sl-room .spot{position:absolute;display:block}
.study-list ol{list-style:none;margin:0 auto;padding:22px 16px 0;max-width:680px;display:grid;gap:26px}
.study-list li{scroll-margin-top:150px}
.study-list li img{width:100%;height:auto;border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.study-list li .paper{margin:-14px 12px 0;padding:24px 20px 18px}
@media (min-width:761px){
  .js .st-stage{display:block}
  .js .study-list{display:none}
}
/* the thinking behind it: paper notes on the study's walnut */
.thinking{background:#4C2E19 url(tex/walnut.webp);padding:44px 16px 40px}
.th-wrap{max-width:820px;margin:0 auto;display:grid;gap:26px}
.th-wrap > h2{margin:0;text-align:center;font-family:var(--head);font-weight:700;color:#F6ECDA;
  font-size:clamp(30px,5vw,44px);line-height:1.1}
.th-wrap .paper{padding:30px clamp(18px,4vw,42px) 26px}
.th-wrap h3{margin:0 0 12px;font-family:var(--head);font-weight:700;font-size:clamp(24px,3vw,30px);line-height:1.2}
.th-wrap p{margin:0 0 .8em;font-size:18px;line-height:1.6}
.th-wrap .paper > :last-child{margin-bottom:0}
.th-wrap ul{margin:0 0 .9em;padding-left:1.2em}
.th-wrap li{margin:0 0 .35em;font-size:17px;line-height:1.55}
.th-idea,.th-behind,.th-read{scroll-margin-top:calc(var(--hdr,69px) + 18px)}
.th-action{margin-top:20px}
.th-action h4{margin:0 0 10px;font-family:var(--head);font-weight:700;font-size:19px}
.th-pic{max-width:560px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#2A1B10;
  box-shadow:0 6px 16px rgba(43,33,24,.25)}
.th-pic img,.th-pic video{display:block;width:100%;height:100%;object-fit:cover}
.th-read{margin:0;text-align:center}
.th-sources{color:#E9D9BF}
.th-sources h3{margin:0 0 8px;font-size:16px;color:#F6ECDA}
.th-sources ul{padding-left:1.1em}
.th-sources li,.th-sources p{font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.th-sources a{color:#F3D9A6}

/* ---- the research: Corey's notes pinned to the study's corkboard ---- */
body.research-page{background:#B98552 url(tex/cork.webp)}
.rs-main{padding:30px 16px 10px}
.rs-wrap{max-width:780px;margin:0 auto;display:grid;gap:22px}
.rs-wrap .paper{padding:30px clamp(18px,4vw,40px) 24px}
.rs-head h1{margin:0;text-align:center;font-family:var(--head);font-weight:700;font-size:clamp(32px,5vw,46px);line-height:1.1}
.rs-wrap h2{margin:0 0 10px;font-family:var(--head);font-weight:700;font-size:clamp(23px,3vw,28px);line-height:1.2}
.rs-wrap p{margin:0 0 .6em;font-size:18px;line-height:1.6}
.rs-wrap p strong:only-child{display:block;margin-top:.9em;font-family:var(--head);font-size:19px}
.rs-wrap ul{margin:0 0 .8em;padding-left:1.2em}
.rs-wrap li{margin:0 0 .35em;font-size:17px;line-height:1.55}