/* Stolan site v7 layer for every inner page (Mason, 2026-10-20). Carries the home's pass-two system across the site
   (Awwwards gap report, _System/planning/2026-10-20-AWWARDS-GAP/GAP.md): one type family for headings in sentence
   case on one five-step scale (13 / 16 / 22 / 44 / 120, phone 12 / 15 / 20 / 36 / 64), Big Shoulders kept for the
   wordmark only; and the hero becomes the home's grammar, the picture owning the screen at full brightness with the
   line in a band at its foot, arriving on load. Loaded after kit.css and site-scenes.css. */
:root{--d:var(--b);--t1:13px;--t2:16px;--t3:22px;--t4:44px;--t5:120px}
@media (max-width:760px){:root{--t1:12px;--t2:15px;--t3:20px;--t4:36px;--t5:64px}}
@media (min-width:761px) and (max-width:1200px){:root{--t4:38px}}
.wm,.foot .wmb{font-family:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif}

/* headings: one face, one weight, sentence case, on the scale */
.hero-line,.head,.against{font-family:var(--b);font-weight:700;font-size:var(--t4);line-height:1;letter-spacing:-.035em;text-transform:none}
.against{color:var(--stone)}
.quote blockquote{font-family:var(--b);font-weight:700;font-size:var(--t4);line-height:1.06;letter-spacing:-.03em}
.wall .nm,.step h3,.size h3,.prod h3{font-family:var(--b);font-weight:700;font-size:var(--t3);line-height:1.1;letter-spacing:-.02em}
.size .pr,.prod .pr{font-family:var(--b);font-weight:700;font-size:var(--t4);line-height:1;letter-spacing:-.04em}
.cap-n b,.step b{font-family:var(--b);font-weight:700;font-size:var(--t1);line-height:1.4;color:#0083FC}
.faq summary{font-family:var(--b);font-weight:600;font-size:var(--t3);line-height:1.25;letter-spacing:-.015em}
.lab{font-size:var(--t1)}
.lead,.scene p,.scene li{font-size:var(--t2)}

/* the hero: the picture owns the screen; the words sit in a band at its foot */
.hero{display:block;position:relative;min-height:100vh;min-height:100svh;padding:0;background:var(--ink);overflow:hidden}
.hero .plate-img{position:absolute!important;inset:0;aspect-ratio:auto!important;max-height:none!important;border-radius:0;box-shadow:none!important;background:var(--ink)}
.hero .plate-img img{object-position:50% 40%;animation:s7in 1.6s cubic-bezier(.3,0,.1,1) both}
.hero .txt{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:5vw;row-gap:12px;
  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,.5);
  animation:s7up .9s cubic-bezier(.3,0,.1,1) .35s both}
.hero .txt .lab{grid-area:1/1/2/3}
.hero .txt .hero-line{grid-area:2/1/5/2;align-self:end}
.hero .txt .lead{grid-area:2/2/3/3;margin:0;max-width:560px}
.hero .txt .row{grid-area:3/2}
.hero .plate-img img[src*="f99-site.jpg"]{object-position:50% 75%}
.hero .txt .fine{grid-area:4/2;font-size:var(--t1);color:var(--stone);margin:0}
@keyframes s7in{from{transform:scale(1.06)}to{transform:none}}
@keyframes s7up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:760px){
  .hero .txt{grid-template-columns:1fr;padding:22px 16px 28px}
  .hero .txt .lab,.hero .txt .hero-line,.hero .txt .lead,.hero .txt .row,.hero .txt .fine{grid-area:auto}
  .hero .plate-img img{object-position:50% 30%}
  .hero .txt .fine,.hero .txt .row>:not(.go){display:none}
  .hero .txt .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
.hero .txt .hero-line,.hero h1{font-size:var(--t4);max-width:17em}
@media (prefers-reduced-motion:reduce){.hero .plate-img img,.hero .txt{animation:none}}

/* 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}

.hero .plate-img img{view-transition-name:hero}

/* the nav stays readable over bright hero photos (studio shots, 2026-10-20) */
.hero .plate-img::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;z-index:1;pointer-events:none;background:linear-gradient(rgba(6,5,7,.8),rgba(6,5,7,0))}

/* stranger panel 2026-10-20: the comparison table scrolls sideways on a phone, first column held */
@media (max-width:760px){.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.tbl th,.tbl td{min-width:150px}.tbl td:first-child,.tbl th:first-child{position:sticky;left:0;background:var(--ink);min-width:118px;z-index:1}}