/* Lantern Road Studio: home page v2 ("full-bleed bands" look).
   Every rule is scoped to body.studio so the 10-4 Send It page (body.tf / tenfour.css)
   and the shared site.css are untouched. Fonts are the self-hosted OFL faces from site.css. */

body.studio{background:var(--ink);font-size:1.125rem}
body.studio section{padding:0}

/* ---------- header: light bar, dark type ---------- */
body.studio .site-header{position:sticky;top:0;z-index:20;background:var(--cream);backdrop-filter:none;border-bottom:1px solid rgba(34,36,39,.12)}
body.studio .site-header .wrap{max-width:1240px;min-height:64px}
body.studio .brand{color:var(--ink);font-size:1.2rem}
body.studio .brand img{border-radius:6px}
body.studio .nav{gap:28px}
body.studio .nav a{position:relative;color:var(--ink);font:600 1rem/1 var(--body);letter-spacing:.01em;text-transform:none;padding:8px 0}
body.studio .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
body.studio .nav a:hover,body.studio .nav a[aria-current="page"]{color:var(--ink)}
body.studio .nav a:hover::after,body.studio .nav a[aria-current="page"]::after{transform:scaleX(1)}
body.studio :focus-visible{outline-color:var(--burnt)}

/* ---------- shared band ---------- */
.studio .lr-band{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;text-align:center;min-height:clamp(540px,44vw,680px);padding:72px 0}
.studio .lr-art{position:absolute;inset:0;z-index:-2;margin:0}
.studio .lr-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.studio .lr-art img.pixel{image-rendering:pixelated}
.studio .lr-band:hover .lr-art img{transform:scale(1.025)}
.studio .lr-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.studio .lr-copy{width:min(760px,100% - 40px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.studio .lr-band h1,.studio .lr-band h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:.01em}
.studio .lr-line{margin:0;max-width:44ch;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5}
.studio .lr-actions{display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;align-items:center;margin-top:4px}
.studio .lr-actions .status{align-self:center}

/* pill buttons: dark capsule, bright type */
.studio .lr-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;border-radius:999px;background:var(--ink);color:var(--orange);font:700 1rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .2s ease}
.studio .lr-pill:hover{background:var(--orange);color:var(--ink);transform:translateY(-1px)}
.studio .lr-pill.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

/* ---------- 1. hero: dusk road ---------- */
.studio .lr-hero{min-height:min(calc(100vh - 64px),880px);min-height:min(calc(100svh - 64px),880px);align-items:start;padding:clamp(72px,12vh,140px) 0 96px}
.studio .lr-hero .lr-art img{object-position:50% 70%}
.studio .lr-hero::after{background:radial-gradient(ellipse 46% 30% at 50% 34%,rgba(14,18,30,.55),rgba(14,18,30,0) 100%),linear-gradient(180deg,rgba(20,24,36,.35) 0%,rgba(20,24,36,0) 45%,rgba(20,24,36,0) 80%,rgba(34,36,39,.6) 100%)}
.studio .lr-hero h1{width:min(760px,100%)}
.studio .lr-wordmark{width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
.studio .lr-hero .lr-line{color:var(--cream);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.studio .lr-hero .lr-pill{background:var(--orange);color:var(--ink)}
.studio .lr-hero .lr-pill:hover{background:var(--cream);color:var(--ink)}

/* ---------- 2. 10-4 Send It: bright golden-hour band, dark type in the sky ---------- */
.studio .lr-tfsi{align-items:start;padding-top:clamp(48px,4.5vw,72px);min-height:clamp(560px,50vw,760px)}
.studio .lr-tfsi .lr-art img{object-position:62% 0%}
.studio .lr-tfsi .lr-copy{gap:14px}
.studio .lr-tfsi::after{background:radial-gradient(ellipse 60% 55% at 50% 22%,rgba(246,236,220,.55),rgba(246,236,220,0) 70%)}
.studio .lr-tfsi .lr-line{color:var(--ink)}
.studio .lr-plate{width:min(360px,74vw);height:auto;filter:drop-shadow(0 6px 16px rgba(34,36,39,.28))}
.studio .lr-tfsi .wip{top:auto;right:16px;bottom:16px;z-index:1}

/* ---------- 3. The Ninth Setting: pixel-art band, light type ---------- */
.studio .lr-tns{align-items:start;padding-top:clamp(56px,6vw,88px)}
.studio .lr-tns .lr-art img{object-position:46% 100%}
.studio .lr-tns::after{background:linear-gradient(180deg,rgba(18,22,40,.86) 0%,rgba(18,22,40,.7) 42%,rgba(18,22,40,0) 66%)}
.studio .lr-tns h3{font-size:clamp(2.6rem,5.2vw,4.4rem);color:var(--cream);text-shadow:0 3px 14px rgba(0,0,0,.45)}
.studio .lr-tns .lr-line{color:var(--cream);text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* ---------- newsletter (hidden until Kit is set up) ---------- */
.studio .lr-news{padding:72px 0;background:var(--ink-2)}

/* ---------- footer: wordmark, nav, legal, socials ---------- */
.studio .lr-footer{border-top:0;background:var(--ink);padding:44px 0 36px;font-size:1rem;color:var(--muted)}
.studio .lr-footer .wrap{display:block;max-width:1240px}
.studio .lr-foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.studio .lr-foot-brand img{width:260px;height:auto}
.studio .lr-foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.studio .lr-foot-nav a{color:var(--cream);text-decoration:none;font-weight:600}
.studio .lr-foot-nav a:hover{color:var(--orange)}
.studio .lr-foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-top:20px}
.studio .lr-foot-bottom p{margin:0}
.studio .lr-social{display:flex;align-items:center;gap:12px}
.studio .lr-social-title{margin:0;font:600 1rem/1.2 var(--body);letter-spacing:0;color:var(--muted)}
.studio .lr-social .social li{padding:6px 12px;font-size:.95rem}
.studio .lr-social .social small{display:inline;margin-left:4px}

/* ---------- motion layers added by studio.js (never with reduced motion) ----------
   .lr-fxwrap wraps a band's picture plus its canvas so they move as one. */
.studio .lr-fxwrap{overflow:visible}
.studio .lr-pic{position:absolute;inset:0;display:block}
.studio .lr-fx{position:absolute;pointer-events:none;max-width:none}
.studio .lr-fx.px{image-rendering:pixelated;image-rendering:crisp-edges}
.studio .lr-fx.lr-glow{mix-blend-mode:screen}
.studio .lr-fxwrap img{transition:none}
.studio .lr-band:hover .lr-fxwrap img{transform:none}
.studio .lr-hero .lr-fxwrap{will-change:transform}
.studio .lr-tns .lr-fxwrap{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.studio .lr-tns:hover .lr-fxwrap{transform:scale(1.025)}
.studio .lr-tfsi .lr-fxwrap{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.studio .lr-tfsi:hover .lr-fxwrap{transform:scale(1.025)}

/* ---------- motion: gentle reveal (only when motion is welcome) ---------- */
@media (prefers-reduced-motion:no-preference){
  .lr-js .studio [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .lr-js .studio [data-reveal].is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .studio .lr-band:hover .lr-art img{transform:none}
}

/* ---------- small screens ---------- */
@media (max-width:820px){
  .studio .lr-hero::after{background:radial-gradient(ellipse 80% 26% at 50% 30%,rgba(14,18,30,.55),rgba(14,18,30,0) 100%),linear-gradient(180deg,rgba(20,24,36,.35) 0%,rgba(20,24,36,0) 45%,rgba(20,24,36,0) 80%,rgba(34,36,39,.6) 100%)}
  body.studio .site-header .wrap{flex-wrap:wrap;justify-content:center;gap:4px 16px;padding-top:10px;padding-bottom:6px}
  body.studio .brand span{display:inline}
  body.studio .nav{gap:6px 20px;justify-content:center}
  body.studio .nav a{font-size:.95rem}
  .studio .lr-band{min-height:640px;padding:56px 0}
  .studio .lr-hero{min-height:min(calc(100svh - 90px),760px);padding-top:64px}
  .studio .lr-tfsi .lr-art img{object-position:66% 50%}
  .studio .lr-tfsi::after{background:radial-gradient(ellipse 90% 45% at 50% 24%,rgba(246,236,220,.6),rgba(246,236,220,0) 75%)}
  .studio .lr-tns .lr-art img{object-position:48% 100%}
  .studio .lr-tns::after{background:linear-gradient(180deg,rgba(18,22,40,.86) 0%,rgba(18,22,40,.6) 50%,rgba(18,22,40,0) 75%)}
  .studio .lr-foot-top,.studio .lr-foot-bottom{flex-direction:column;align-items:flex-start}
  .studio .lr-foot-brand img{width:220px}
}
@media (max-width:420px){
  body.studio .nav a:first-child{display:none} /* brand already links home */
  .studio .lr-pill{padding:0 24px}
}