/* Stolan home v7 (Mason, 2026-10-20). One story on one thread: a wall of real work, one tile is pulled out into its
   world and put back, and the page closes on an empty slot that is the reader's. Hand-built, not the scene kit.
   Pass two follows the Awwwards gap report: the wall owns the first screen at full brightness, it assembles on
   arrival, the work sits in real places, and type runs on one five-step scale (t1 to t5). */
.h7{--ink:#060507;--cream:#EBDED0;--stone:#9A938A;--pink:#FF2D78;--yel:#F8F206;--green:#81FF28;--blue:#0083FC;--purple:#762AED;
  --t1:13px;--t2:16px;--t3:22px;--t4:44px;--t5:120px;--gx:clamp(16px,4.2vw,64px);
  --e:cubic-bezier(.3,0,.1,1);background:var(--ink);color:var(--cream);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:var(--t2)}
@media (max-width:760px){.h7{--t1:12px;--t2:15px;--t3:20px;--t4:36px;--t5:64px}}
@media (min-width:761px) and (max-width:1200px){.h7{--t4:38px;--t5:92px}}
.h7 *{box-sizing:border-box}
.h7 .lab7{font-size:var(--t1);font-weight:600;letter-spacing:.02em;color:var(--stone);margin:0}
.h7 .big7{font-size:var(--t4);font-weight:700;letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance}
.h7 .big7.t5{font-size:var(--t5);letter-spacing:-.045em;line-height:.94}
.h7 .go7{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:4px;background:var(--pink);color:#160008;
  font-weight:700;font-size:var(--t2);text-decoration:none;transition:transform .24s var(--e),box-shadow .24s var(--e)}
.h7 .go7:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,45,120,.28)}
.h7 .more7{color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(235,222,208,.35)}
.h7 p{line-height:1.55}

/* ---- Stage A: the wall, the tile, Four-99, Search Party, and back into the wall ---- */
.h7-a{position:relative;height:1280vh}
.h7-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.h7-wall{position:absolute;inset:-12vh -4vw 0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.h7-col{display:grid;gap:14px;align-content:start;will-change:transform}
.h7-col:nth-child(odd){animation:h7up 90s linear infinite}
.h7-col:nth-child(even){animation:h7dn 100s linear infinite;margin-top:-30vh}
@keyframes h7up{to{transform:translateY(-50%)}}
@keyframes h7dn{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.h7-paused .h7-col,.h7-wall:hover .h7-col{animation-play-state:paused}
.t7{aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#141214;position:relative;transition:transform .5s var(--e),box-shadow .5s var(--e)}
a.t7{display:block;cursor:pointer}
.t7 img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.t7.im:hover,.t7.real:hover{transform:scale(1.05);z-index:2;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.t7.real{box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 50px rgba(255,140,60,.35)}
.t7.real img{object-position:50% 50%}
.h7-band{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 5vw;align-items:end;
  padding:34px var(--gx) 40px;background:var(--ink);border-top:1px solid rgba(235,222,208,.12);box-shadow:0 -40px 80px rgba(6,5,7,.55)}
.h7-band .l{display:grid;gap:12px}
.h7-band .r{display:grid;gap:18px;justify-items:start}
.h7-band .lead7{margin:0;color:rgba(235,222,208,.84);max-width:560px}
.h7-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.h7-one{position:absolute;left:0;right:0;bottom:0;padding:34px var(--gx) 40px;background:var(--ink);border-top:1px solid rgba(235,222,208,.12);pointer-events:none}

/* layers that become the whole screen */
.h7-ly{position:absolute;inset:0;overflow:hidden;clip-path:inset(100% 0 0 0)}
.h7-ly>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.h7-ly .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,5,7,.9) 0%,rgba(6,5,7,.45) 28%,rgba(6,5,7,0) 52%)}
.h7-cap{position:absolute;left:var(--gx);right:var(--gx);bottom:9vh;display:grid;gap:12px;max-width:820px;opacity:0}
.h7-cap p{margin:0;color:rgba(235,222,208,.84);max-width:600px}
.h7-cap .n7{display:flex;gap:10px;align-items:center;font-size:var(--t1);font-weight:600;color:var(--stone)}
.h7-cap .n7 i{display:inline-block;width:28px;height:2px;background:var(--cream)}
.h7-cap .dom7{font-size:var(--t3);font-weight:700;letter-spacing:-.02em;color:var(--green)}
.h7-cap .fine7{font-size:var(--t1);color:var(--stone)}

/* Four-99's badge on their own carbon black, their colors rising */
.h7-badge{background:#0D0D0D}
.h7-badge .bwrap{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6vw;padding:0 var(--gx) 14vh}
.h7-badge .bimg{justify-self:end;width:min(44vw,62vh);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 120px rgba(255,45,120,.25)}
.h7-badge .bimg img{width:100%;height:100%;object-fit:cover}
.h7-chips{display:flex;gap:10px;align-items:flex-end;height:38vh}
.h7-chips span{flex:1;max-width:84px;border-radius:4px;transform-origin:50% 100%}
/* Four-99's live site, held up in front of their truck: sharp, no blur behind it */
.h7-site>img.bg{filter:brightness(.62);object-position:50% 60%}
.h7-phone{position:absolute;right:11vw;top:8vh;height:78vh;aspect-ratio:780/1688;perspective:1600px}
.h7-phone .scr{width:100%;height:100%;border-radius:34px;border:9px solid #1d1b1e;overflow:hidden;transform:rotateY(-16deg) rotateX(5deg) rotateZ(3deg);
  box-shadow:-30px 50px 90px rgba(0,0,0,.75),0 0 90px rgba(0,188,212,.22)}
.h7-phone img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
/* quotes sit on clean ground on the left; the art stays sharp on the right */
.h7-left{position:absolute;inset:0;background:linear-gradient(to right,rgba(6,5,7,.95) 0%,rgba(6,5,7,.86) 38%,rgba(6,5,7,0) 66%);opacity:0}
.h7-q{position:absolute;left:var(--gx);top:0;bottom:0;width:min(46vw,640px);display:grid;align-content:center;gap:22px;opacity:0}
.h7-q blockquote{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.06;font-size:var(--t4);text-wrap:balance}
.h7-q blockquote .w{opacity:.18}
.h7-q .by{font-size:var(--t1);color:var(--stone);margin:0}
.h7-q .by b{color:var(--cream)}

/* ---- Stage B: us, and the steps, the picture changing with each step ---- */
.h7-b{position:relative;height:360vh}
.h7-b .h7-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.h7-b .txt{display:grid;align-content:center;gap:24px;padding:12vh var(--gx)}
.h7-b .ph{position:relative;overflow:hidden}
.h7-b .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.h7-b .ph img+img{opacity:0}
.h7-steps{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid rgba(235,222,208,.14)}
.h7-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;padding:15px 0;border-bottom:1px solid rgba(235,222,208,.14);opacity:.3}
.h7-steps b{font-size:var(--t1);color:var(--blue);padding-top:5px}
.h7-steps h3{margin:0;font-size:var(--t3);letter-spacing:-.02em}
.h7-steps p{grid-column:2;margin:0;color:rgba(235,222,208,.8)}
.h7-b .fine7{font-size:var(--t1);color:var(--stone);margin:0}

/* ---- prices, a ledger you can click; purple is the price ---- */
.h7-sec{padding:11vh var(--gx);position:relative}
.h7-sec .shd{display:grid;gap:14px;margin-bottom:6vh;max-width:900px}
.h7-led{display:grid;border-top:1px solid rgba(235,222,208,.16)}
.h7-led a{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:16px 4vw;align-items:baseline;
  padding:30px 0;border-bottom:1px solid rgba(235,222,208,.16);color:var(--cream);text-decoration:none;isolation:isolate}
.h7-led a::before{content:"";position:absolute;inset:0 calc(-1*var(--gx));background:#141114;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .3s var(--e);z-index:-1}
.h7-led a:hover::before{transform:scaleY(1)}
.h7-led h3{margin:0;font-size:var(--t3);letter-spacing:-.02em}
.h7-led p{margin:0;color:rgba(235,222,208,.78)}
.h7-led .pr{font-size:var(--t4);font-weight:700;letter-spacing:-.04em;text-align:right;line-height:1}
.h7-led .pr::after{content:"";display:block;height:4px;width:100%;margin-top:10px;background:var(--purple);transform:scaleX(.3);transform-origin:100% 50%;transition:transform .4s var(--e)}
.h7-led a:hover .pr::after{transform:scaleX(1)}
.h7-led .pr small{display:block;font-size:var(--t1);font-weight:600;letter-spacing:0;color:var(--stone);margin-top:8px}
.h7-led a:hover .pr small{color:var(--cream)}
.h7-after{margin:5vh 0 0;max-width:820px;color:rgba(235,222,208,.75)}

/* ---- not for you: struck out as you read; yellow is the stance ---- */
.h7-not ul{list-style:none;margin:0;padding:0;display:grid;gap:2vh}
.h7-not li{font-weight:700;letter-spacing:-.03em;line-height:1.08;font-size:var(--t4);color:rgba(235,222,208,.9)}
.h7-not li span{background:linear-gradient(var(--yel),var(--yel)) no-repeat 0 58%/var(--sx,0%) 5px}
.h7-not .fin{margin:6vh 0 0;font-size:var(--t3);font-weight:600;max-width:760px;line-height:1.35}

/* ---- the close: the wall comes back with one empty slot ---- */
.h7-end{position:relative;padding:12vh var(--gx) 16vh;display:grid;gap:8vh}
.endwall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.endwall .t7.e{opacity:.35}
.t7.you{display:grid;place-items:center;background:transparent;border:2px dashed rgba(235,222,208,.55);text-align:center;padding:12px}
.t7.you span{font-size:var(--t3);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.h7-end .in{display:grid;gap:20px;max-width:820px}
.h7-end .in p{margin:0;color:rgba(235,222,208,.85);max-width:600px}
.h7-end .fine7{font-size:var(--t1);color:var(--stone)}

@media (max-width:760px){
  .h7-a{height:1050vh}
  .h7-wall{grid-template-columns:repeat(3,1fr);gap:10px;inset:-10vh -18vw 0}
  .h7-col:nth-child(1),.h7-col:nth-child(n+5){display:none}
  .h7-col{gap:10px}
  .h7-band{grid-template-columns:1fr;padding:22px var(--gx) 28px;gap:14px}
  .h7-band .r{gap:14px}
  .h7-badge .bwrap{grid-template-columns:1fr;align-content:center;gap:4vh;padding:12vh var(--gx) 34vh}
  .h7-badge .bimg{justify-self:center;width:min(66vw,40vh)}
  .h7-chips{height:12vh;justify-content:center}
  .h7-phone{right:auto;left:50%;margin-left:-11.6vh;top:9vh;height:50vh}
  .h7-left{background:linear-gradient(to top,rgba(6,5,7,.96) 30%,rgba(6,5,7,.7) 60%,rgba(6,5,7,.3) 100%)}
  .h7-q{width:auto;right:var(--gx);top:auto;bottom:9vh;align-content:end}
  .h7-b{height:300vh}
  .h7-b .fine7{display:none}
  .h7-b .h7-stage{grid-template-columns:1fr;grid-template-rows:30vh 1fr}
  .h7-b .ph{order:-1}
  .h7-b .txt{padding:3vh var(--gx) 4vh;gap:14px;align-content:start}
  .h7-steps li{padding:10px 0}
  .h7-led a{grid-template-columns:minmax(0,1fr) auto;padding:24px 0}
  .h7-led p{grid-column:1/-1;grid-row:2}
  .endwall{grid-template-columns:repeat(3,1fr);gap:10px}
  .endwall .t7:nth-child(n+10){display:none}
}
/* Reduce Motion: no drift and no arrival; the story still moves only as you scroll it, never on its own. */
@media (prefers-reduced-motion:reduce){.h7-col{animation:none!important}.t7{transition:none}}

/* the 2006 editor keeps its stage; its heading speaks in the same type as the rest of the home */
.rt .head{font-family:"Hanken Grotesk",system-ui,sans-serif!important;font-weight:700!important;text-transform:none!important;letter-spacing:-.035em!important;line-height:1!important;font-size:44px!important}
@media (max-width:760px){.rt .head{font-size:36px!important}}

/* the nav reads on the first screen: an ink band behind it over the wall (REAUDIT N3) */
.bar{background:rgba(6,5,7,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* the keys chapter gets a warm ground instead of near-black (REAUDIT N8) */
.rt{background:radial-gradient(90% 70% at 70% 50%,#2a1a1e 0%,#060507 72%)}
/* page to page: hold the ink and the header, never a black blink (REAUDIT N6) */
@view-transition{navigation:auto}
.bar{view-transition-name:bar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:cubic-bezier(.3,0,.1,1)}
::view-transition-group(hero){animation-duration:.6s;animation-timing-function:cubic-bezier(.3,0,.1,1)}
::view-transition-old(hero),::view-transition-new(hero){height:100%;object-fit:cover;overflow:hidden}

/* the story layers never catch a click meant for a tile */
.h7-ly{pointer-events:none}
.h7-ly a{pointer-events:auto}

/* hover: the tile says whose it is, in one line (REAUDIT gap 8) */
.t7 .cap7{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 11px;background:linear-gradient(rgba(6,5,7,0),rgba(6,5,7,.92) 55%);
  font-size:13px;font-weight:600;line-height:1.3;color:var(--cream);opacity:0;transform:translateY(10px);transition:opacity .3s var(--e),transform .3s var(--e)}
.t7:hover .cap7{opacity:1;transform:none}
.endwall .t7 .cap7{display:none}
@media (hover:none){.t7 .cap7{display:none}}