/* Stolan site v6 scene kit (Mason, 2026-10-18). Built from the approved home opening: the woods, the window light,
   the plate. One object carries every page: the plate, a frame that holds a real business's world. The window light
   (warm radial) is the only glow. Five type sizes from kit.css. Pink is the button and nothing else. */
:root{--warm:radial-gradient(circle at 70% 40%,rgba(224,120,42,.32) 0%,rgba(106,52,16,.18) 28%,rgba(6,5,7,0) 62%);--ink3:#0e0c0f}
.page{position:relative}
.scene{position:relative;padding:10vh var(--gx);display:grid;gap:28px}
.scene+.scene{border-top:1px solid rgba(235,222,208,.07)}
.shead{display:grid;gap:14px;max-width:760px}
.shead .lead{margin-top:2px}
.plate-img{position:relative;overflow:hidden;border-radius:6px;background:var(--ink3)}
.plate-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.tg{position:absolute;z-index:3;left:8px;bottom:8px;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--cream);background:rgba(6,5,7,.72);padding:3px 7px;border-radius:2px}
.cap-n{display:flex;gap:10px;align-items:baseline;margin-top:12px}
.cap-n b{font-family:var(--d);font-weight:300;font-size:28px;line-height:1;color:var(--stone)}
.cap-n span{font-weight:600;font-size:15px}
.motion{font-size:var(--s-fine);color:var(--stone);border-left:2px solid #6a3410;padding-left:12px;max-width:46em}
.more{font-weight:600;font-size:15px;color:var(--cream);border-bottom:1px solid rgba(235,222,208,.35);padding-bottom:2px;justify-self:start}

/* hero: the plate beside the line, the window light behind it */
.hero{min-height:100vh;min-height:100svh;padding:120px var(--gx) 12vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:5vw;align-items:center;background:var(--warm)}
.hero .txt{display:grid;gap:20px;align-content:center}
.hero h1{font-size:clamp(52px,6.8vw,112px)}
.hero .plate-img{aspect-ratio:4/5;max-height:76vh;box-shadow:0 0 0 1px rgba(235,222,208,.08),0 40px 120px rgba(224,120,42,.16)}
.hero .row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.hero.forest{display:block;padding:0;background:none}

/* the plate story: one client, three states */
.story .states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.story .plate-img{aspect-ratio:4/5}
.story .chips{position:absolute;left:0;right:0;bottom:0;height:22%;display:flex}
.story .chips span{flex:1}

/* the wall of worlds */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters span{font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid rgba(235,222,208,.22);color:var(--soft)}
.filters span.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wall .plate-img{aspect-ratio:4/3}
.wall .nm{font-family:var(--d);font-weight:800;font-size:26px;line-height:1;margin-top:12px}
.wall .kd{font-size:14px;color:var(--stone)}

/* steps: the whole set visible, one lit */
.steps .row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step{border-radius:6px;padding:22px 20px 24px;background:var(--ink3);border:1px solid rgba(235,222,208,.08);display:grid;gap:10px;align-content:start;min-height:240px}
.step b{font-family:var(--d);font-weight:300;font-size:64px;line-height:.8;color:var(--stone)}
.step h3{font-family:var(--d);font-weight:800;font-size:28px;line-height:1}
.step p{font-size:15px;color:var(--soft)}
.step.lit{background:radial-gradient(circle at 80% 0%,rgba(224,120,42,.35),rgba(14,12,15,1) 70%);border-color:rgba(224,120,42,.45)}
.step.lit b{color:#f0a050}

/* sizes */
.sizes .row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.size{border-radius:6px;padding:22px 20px;background:var(--ink3);border:1px solid rgba(235,222,208,.08);display:grid;gap:12px;align-content:start}
.size .no{font-size:var(--s-fine);color:var(--stone);font-weight:600}
.size h3{font-family:var(--d);font-weight:800;font-size:30px;line-height:1}
.size .pr{font-family:var(--d);font-weight:300;font-size:56px;line-height:.9;color:var(--cream)}
.size p{font-size:15px;color:var(--soft)}
.after-line{color:var(--soft);max-width:52em}

/* quote */
.quote{padding-top:10vh;padding-bottom:10vh}
.quote blockquote{font-family:var(--d);font-weight:300;font-size:clamp(34px,4.4vw,68px);line-height:1;max-width:20em;text-wrap:balance}
.quote .by{font-size:15px;color:var(--stone);font-weight:400}

/* text */
.text{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5vw;align-items:start}
.text .body{display:grid;gap:16px;color:var(--soft);max-width:36em}
.text ul{list-style:none;display:grid;gap:10px;margin-top:4px}
.text li{padding-left:22px;position:relative}
.text li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:#e0782a}

/* faq */
.faq details{border-top:1px solid rgba(235,222,208,.12);padding:18px 0}
.faq details:last-child{border-bottom:1px solid rgba(235,222,208,.12)}
.faq summary{cursor:pointer;font-family:var(--d);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.1;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin-top:10px;color:var(--soft);max-width:40em}
.faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5vw;align-items:start}
.faq .shead{position:sticky;top:110px}
.faq .list{max-width:900px}

/* products shelf */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.prod{display:grid;gap:10px;align-content:start}
.prod .plate-img{aspect-ratio:4/5}
.prod h3{font-family:var(--d);font-weight:800;font-size:28px;line-height:1;margin-top:6px}
.prod .pr{font-family:var(--d);font-weight:300;font-size:40px;line-height:.9}
.prod p{font-size:15px;color:var(--soft)}

/* table (partners) */
.tbl{width:100%;max-width:900px;border-collapse:collapse;font-size:16px}
.tbl th{text-align:left;font-size:var(--s-fine);color:var(--stone);font-weight:600;padding:0 0 10px}
.tbl td{padding:16px 0;border-top:1px solid rgba(235,222,208,.12);color:var(--soft)}
.tbl td:first-child{color:var(--cream);font-weight:600}
.tbl td.big{font-family:var(--d);font-weight:300;font-size:34px;color:var(--cream)}

/* founders */
.founders{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center}
.founders .plate-img{aspect-ratio:4/3}
.founders .body{display:grid;gap:16px;color:var(--soft);max-width:34em}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:600;color:var(--cream)}

/* journal */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.note{border-top:1px solid rgba(235,222,208,.18);padding-top:16px;display:grid;gap:8px;align-content:start}
.note h3{font-family:var(--d);font-weight:300;font-size:30px;line-height:1}
.note p{font-size:15px;color:var(--soft)}

/* close */
.close{min-height:72vh;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:5vw;align-items:center;background:radial-gradient(circle at 75% 60%,rgba(224,120,42,.22),rgba(6,5,7,0) 55%)}
.close .ctxt{display:grid;gap:22px;align-content:center}
.close .plate-img{aspect-ratio:4/5;max-height:74vh;box-shadow:0 40px 120px rgba(224,120,42,.16)}
.close .go{justify-self:start}
.close .not{color:var(--stone);max-width:36em}

/* footer site map */
.foot{padding:12vh var(--gx) 14vh;display:grid;gap:44px;border-top:1px solid rgba(235,222,208,.1)}
.foot .wmb{font-family:var(--d);font-weight:800;font-size:clamp(60px,12vw,190px);line-height:.8;letter-spacing:-.02em;text-transform:uppercase;color:#1a1619}
.foot .map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.foot .map div{display:grid;gap:9px;align-content:start}
.foot .map b{font-size:var(--s-fine);color:var(--stone);font-weight:600}
.foot .map a{font-size:15px;color:var(--soft)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:var(--s-fine);color:var(--stone)}

/* phone menu overlay */
.mnu{position:fixed;inset:0;z-index:60;background:var(--ink);padding:90px 16px 40px;display:none;overflow:auto}
.mnu.open{display:grid;gap:26px;align-content:start}
.mnu a.big{font-family:var(--d);font-weight:300;font-size:44px;line-height:1}
.mnu .sm{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:15px;color:var(--soft)}
.mnu .x{position:absolute;top:16px;right:16px}

/* the editor chapter (the 2006 profile editor), ported from v5 */
.rt{display:grid;grid-template-columns:.85fr 1.15fr;gap:5vw;align-items:center}
.rt-list{list-style:none;display:grid;gap:10px}
.rt-list li{font-size:16px;padding-left:28px;position:relative;color:var(--soft)}
.rt-list li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2px solid #81FF28;border-bottom:2px solid #81FF28;transform:rotate(-45deg)}

@media (max-width:760px){
  .scene{padding:12vh 16px}
  .hero{grid-template-columns:1fr;padding:84px 16px 8vh;gap:26px;align-items:start}
  .hero .plate-img{aspect-ratio:4/3;order:-1;max-height:none}
  .story .states{grid-template-columns:1fr 1fr}.story .states>div:last-child{grid-column:1/-1}
  .wall{grid-template-columns:1fr 1fr;gap:12px}.wall .nm{font-size:20px}
  .steps .row4,.sizes .row4{grid-template-columns:1fr 1fr;gap:10px}
  .step{min-height:0;padding:18px 16px}.step b{font-size:44px}.step h3{font-size:22px}
  .size .pr{font-size:42px}.size h3{font-size:24px}
  .text,.founders{grid-template-columns:1fr}
  .shelf{grid-template-columns:1fr 1fr;gap:12px}.prod h3{font-size:22px}.prod .pr{font-size:30px}
  .notes{grid-template-columns:1fr}
  .foot .map{grid-template-columns:1fr 1fr}
  .rt{grid-template-columns:1fr}
}

.tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){.tbl{min-width:680px;font-size:14px}.tbl td.big{font-size:26px}.tbl-wrap{margin-right:-16px;padding-right:16px}}

/* journal post body */
.article{padding-top:6vh}
.art{max-width:40em;display:grid;gap:18px;color:var(--soft);font-size:clamp(17px,1.25vw,19px);line-height:1.65}
.art h2{font-family:var(--d);font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1;color:var(--cream);margin-top:28px}
.art h3{font-family:var(--d);font-weight:800;font-size:24px;line-height:1.05;color:var(--cream);margin-top:10px}
.art ul,.art ol{display:grid;gap:8px;padding-left:22px}
.art a{color:var(--cream);border-bottom:1px solid rgba(235,222,208,.35)}
.art strong,.art b{color:var(--cream)}

/* blank-hunt fixes (2026-10-19): phone stacks, a lone head scene never sits alone */
@media (max-width:760px){.close{grid-template-columns:1fr;min-height:0}.close .plate-img{aspect-ratio:16/10;order:-1;max-height:none}.faq{grid-template-columns:1fr}.faq .shead{position:static}}
.sizes .row4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

a.size{color:inherit;transition:border-color .24s cubic-bezier(.3,0,.1,1),transform .24s cubic-bezier(.3,0,.1,1)}
a.size:hover{border-color:rgba(224,120,42,.5);transform:translateY(-3px)}

/* screenshots of real sites never show that site's own menu bar inside our page (Steve 2026-10-19: a second hamburger read as broken) */
.plate-img img[src*="/scr-"],.plate-img img[src*="/w-"],.plate-img img[src*="f99-site"]{object-position:50% 16%}

/* the copy-paste economy, shown (2026-10-19): identical template tiles drawn in code, one real business in color */
.sameness{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5vw;align-items:center}
.sameness .body{display:grid;gap:14px;color:var(--soft);max-width:30em;margin-top:6px}
.tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tpl{position:relative;aspect-ratio:4/3;border-radius:5px;background:#1b181b;border:1px solid rgba(235,222,208,.06);padding:9% 9% 0;display:grid;align-content:start;gap:7%;overflow:hidden;filter:grayscale(1)}
.tpl i{display:block;background:#2b272b;border-radius:2px}
.tpl .tb{position:absolute;left:0;right:0;top:0;height:9%;border-radius:0}
.tpl .tl{width:18%;aspect-ratio:1;border-radius:50%;margin-top:4%}
.tpl b{font-family:system-ui,sans-serif;font-weight:600;font-size:clamp(9px,.85vw,13px);color:#5d575c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl .tx{height:5px;width:86%}.tpl .tx.s{width:60%}
.tpl .tc{display:grid;grid-template-columns:repeat(3,1fr);gap:6%}.tpl .tc i{aspect-ratio:1;border-radius:3px}
.tpl.real{padding:0;filter:none;border:1px solid rgba(255,45,120,.5);box-shadow:0 20px 60px rgba(0,188,212,.18);transform:scale(1.04);z-index:2}
.tpl.real .plate-img{position:absolute;inset:0;border-radius:5px}
.tpl.real .tn{position:absolute;z-index:3;left:8px;bottom:8px;font-size:12px;font-weight:700;color:var(--cream);background:rgba(6,5,7,.75);padding:3px 8px;border-radius:2px}
@media (max-width:760px){.sameness{grid-template-columns:1fr}.tpls{gap:8px}.tpl b{font-size:8px}}

/* the top bar gets a ground once you scroll, so it never sits on top of words (MIRROR 2026-10-19) */
.bar{transition:background .24s cubic-bezier(.3,0,.1,1)}
.bar.scrolled{background:rgba(6,5,7,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}