/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX 2026 — CONTACT + SECTION SHELL (Builder 2)
   Pat: "contact is ugly". A studio contact is one address, set large,
   with air around it. No box, no form chrome, no four identical pills.
   ─────────────────────────────────────────────────────────────────── */

.gb-section{
  width:var(--shell);margin-inline:auto;
  padding-block:0 var(--section-y);
}
.gb-section > .gb-chapter{padding-top:var(--section-y)}
.mast.gb-chapter{width:var(--shell);margin-inline:auto;padding-top:calc(var(--top-h) + var(--s-8))}

.gb-hero-act{margin:var(--s-6) 0 0}
.gb-cta{
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:48px;padding:0 var(--s-6);
  border-radius:var(--r-pill);
  background:var(--gb-bone);color:var(--gb-black);
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  text-decoration:none;
  transition:background var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out),color var(--d-sm) var(--e-out);
}
.gb-cta:hover{background:var(--gb-ember);color:var(--gb-bone);transform:translateY(-2px)}
.gb-cta:focus-visible{outline:2px solid var(--gb-ember);outline-offset:3px}

/* ── THE CONTACT / COMMISSION BLOCK ────────────────────────────────
   The whole viewport is the card. The address IS the design. */
.gb-commission{
  position:relative;
  width:100%;
  padding-block:clamp(6rem,16vh,13rem);
  margin-top:var(--section-y);
  background:
    radial-gradient(120% 100% at 50% 0%,var(--gb-ember-veil) 0%,transparent 62%),
    var(--gb-ink);
  border-top:1px solid var(--gb-line);
  overflow:hidden;
}
.gb-commission::before{ /* one deliberate irregularity: an off-centre ember arc */
  content:"";position:absolute;left:50%;top:-42%;
  width:min(120vw,1500px);aspect-ratio:1;transform:translateX(-52%);
  background:radial-gradient(circle,rgba(232,95,44,.10) 0%,transparent 58%);
  pointer-events:none;
}
.gb-commission-in{
  position:relative;
  width:var(--shell-narrow);margin-inline:auto;
  display:grid;gap:var(--s-5);
  text-align:left;
}
.gb-commission h2{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-xl);line-height:var(--lh-head);
  letter-spacing:var(--tr-mega);color:var(--gb-bone);
  margin:0;max-width:20ch;text-wrap:balance;
}
.gb-commission .gb-lede{
  font-size:var(--t-md);line-height:var(--lh-body);
  color:var(--gb-bone-soft);margin:0;max-width:54ch;
}

/* the address, set as display type — the one clear action */
.gb-mail{
  display:inline-block;justify-self:start;
  margin-top:var(--s-4);
  font-family:var(--f-display);font-weight:480;
  font-size:clamp(1.5rem,4.6vw,2.7rem);
  line-height:1.04;letter-spacing:var(--tr-mega);
  color:var(--gb-bone);text-decoration:none;
  padding-bottom:.12em;
  background-image:linear-gradient(var(--gb-ember),var(--gb-ember));
  background-size:0% 1px;background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size var(--d-lg) var(--e-out),color var(--d-md) var(--e-out);
  /* FINISH PASS 2026-09-07: the address is one word. "anywhere" broke it as
     "glammbox@gmai / l.com" at display size; it may only fold at the @ (a
     <wbr> in the markup), never inside a word. */
  overflow-wrap:normal;word-break:keep-all;hyphens:none;
  max-width:100%;
}
.gb-mail:hover,.gb-mail:focus-visible{background-size:100% 1px;color:var(--gb-ember-lift)}
.gb-mail:focus-visible{outline:2px solid var(--gb-ember);outline-offset:6px;border-radius:var(--r-xs)}

.gb-note{
  margin:var(--s-3) 0 0;
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--gb-mute);line-height:1.9;
}
.gb-note a{
  color:var(--gb-bone-soft);text-decoration:none;
  border-bottom:1px solid var(--gb-line-strong);
  padding-bottom:.2rem;
  transition:color var(--d-sm) var(--e-out),border-color var(--d-sm) var(--e-out);
}
.gb-note a:hover{color:var(--gb-ember);border-color:var(--gb-ember)}

@media (min-width:860px){
  .gb-commission-in{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"k k" "h mail" "l mail" "h2 note";
    align-items:start;column-gap:var(--s-8);
  }
  .gb-commission-in > .gb-kicker{grid-area:k}
  .gb-commission h2{grid-area:h}
  .gb-commission .gb-lede{grid-area:l}
  .gb-mail{grid-area:mail;align-self:center;margin-top:0}
  .gb-note{grid-area:note}
}

/* ── FILM FEATURE ROW ──────────────────────────────────────────────
   A portrait film beside its story. Replaces the bare native player
   sitting in a wall of empty black. */
.gb-feature{
  width:var(--shell);margin-inline:auto;
  padding-block:var(--section-y) 0;
  display:grid;gap:var(--s-6);
  align-items:center;
}
.gb-feature .gb-film{max-width:24rem;width:100%}
.gb-feature-copy{display:grid;gap:var(--s-4);max-width:48ch}
.gb-feature-copy h2{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-lg);line-height:var(--lh-head);
  letter-spacing:var(--tr-head);color:var(--gb-bone);margin:0;
  text-wrap:balance;
}
.gb-feature-copy .gb-lede{
  font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--gb-bone-soft);margin:0;
}
@media (min-width:860px){
  .gb-feature{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:var(--s-8)}
  .gb-feature:nth-of-type(even) .gb-film{order:2}
}

/* ── PEOPLE / PRINCIPLES ───────────────────────────────────────────
   No boxes. A hairline rule, a mono index, and air. */
.gb-people,.gb-principles{
  display:grid;gap:var(--s-6);
  border-top:1px solid var(--gb-line);
}
.gb-people > article,.gb-principles > article{
  display:grid;gap:var(--s-3);
  padding-top:var(--s-5);
  border-top:1px solid var(--gb-line-soft);
  align-content:start;
}
.gb-people > article:first-child,.gb-principles > article:first-child{border-top:0}
.gb-idx{
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);color:var(--gb-ember);
}
.gb-people h3{
  font-family:var(--f-display);font-weight:520;
  font-size:var(--t-lg);letter-spacing:var(--tr-head);
  line-height:1.06;color:var(--gb-bone);margin:0;
}
.gb-principles b{
  display:block;font-family:var(--f-display);font-weight:520;
  font-size:var(--t-md);letter-spacing:var(--tr-head);
  color:var(--gb-bone);
}
.gb-people p,.gb-principles p{
  margin:0;font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--gb-bone-soft);max-width:44ch;
}
.gb-disclose{
  font-family:var(--f-mono);font-size:var(--t-label)!important;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--gb-mute)!important;line-height:1.8!important;
}
@media (min-width:760px){
  .gb-people{grid-template-columns:repeat(2,1fr);gap:var(--s-7)}
  .gb-principles{grid-template-columns:repeat(3,1fr);gap:var(--s-7)}
  .gb-people > article,.gb-principles > article{border-top:1px solid var(--gb-line-soft)}
  .gb-people > article:first-child,.gb-principles > article:first-child{border-top:1px solid var(--gb-line-soft)}
}

/* ── ACTION ROW ────────────────────────────────────────────────────
   One primary action, the rest quiet. Never four identical pills. */
.gb-plays{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-5);margin:var(--s-8) 0 0;
}
.gb-quiet{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--gb-dim);text-decoration:none;
  border-bottom:1px solid var(--gb-line-strong);
  padding-bottom:.25rem;
  transition:color var(--d-sm) var(--e-out),border-color var(--d-sm) var(--e-out);
}
.gb-quiet:hover{color:var(--gb-bone);border-color:var(--gb-ember)}
.gb-quiet:focus-visible{outline:2px solid var(--gb-ember);outline-offset:4px}

/* ── THE REQUEST PAGE (make-one) ───────────────────────────────────
   The form itself was the "ugly contact": grey boxes with a squashed
   display face on top. Same fields, same mailto: contract, same
   disclosure — dressed as a studio brief. */
.room-make .card{
  background:var(--gb-ink)!important;
  border:0!important;
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--gb-line-soft);
  padding:clamp(1.4rem,4vw,2.6rem)!important;
}
.room-make .card h2{
  font-family:var(--f-display);font-weight:520;
  font-size:var(--t-lg);letter-spacing:var(--tr-head);
  line-height:1.06;color:var(--gb-bone);margin:0 0 var(--s-4);
}
.room-make .contact-name{
  font-family:var(--f-mono)!important;font-size:var(--t-label)!important;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--gb-mute)!important;margin:0 0 var(--s-2)!important;
}
.room-make .contact-email{margin:0 0 var(--s-6)!important}
.room-make .contact-email a{
  font-family:var(--f-display);font-weight:480;
  font-size:clamp(1.35rem,4.4vw,2.3rem);
  letter-spacing:var(--tr-mega);line-height:1.05;
  color:var(--gb-bone)!important;text-decoration:none;
  overflow-wrap:anywhere;
  background-image:linear-gradient(var(--gb-ember),var(--gb-ember));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:.1em;
  transition:background-size var(--d-lg) var(--e-out),color var(--d-md) var(--e-out);
}
.room-make .contact-email a:hover{background-size:100% 1px;color:var(--gb-ember-lift)!important}

.room-make .mk-field{margin:0 0 var(--s-5)!important}
.room-make .mk-field span{
  font-family:var(--f-mono)!important;font-size:var(--t-label)!important;
  letter-spacing:var(--tr-label)!important;text-transform:uppercase;
  color:var(--gb-mute)!important;margin-bottom:var(--s-2)!important;
}
.room-make .mk-field input,
.room-make .mk-field textarea{
  width:100%;
  min-height:48px;
  background:var(--gb-black)!important;
  border:0!important;
  box-shadow:inset 0 0 0 1px var(--gb-line-strong);
  border-radius:var(--r-sm);
  color:var(--gb-bone)!important;
  font-family:var(--f-text);font-size:1rem;
  letter-spacing:var(--tr-body);
  padding:var(--s-3) var(--s-4)!important;
  transition:box-shadow var(--d-sm) var(--e-out),background var(--d-sm) var(--e-out);
}
.room-make .mk-field input:focus,
.room-make .mk-field textarea:focus{
  outline:0;
  box-shadow:inset 0 0 0 1px var(--gb-ember),0 0 0 3px var(--gb-ember-veil);
  background:var(--gb-ink)!important;
}
.room-make .mk-field textarea{min-height:9rem!important;line-height:1.55}
.room-make form button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 var(--s-7);
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--gb-bone)!important;color:var(--gb-black)!important;
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  transition:background var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out),color var(--d-sm) var(--e-out);
}
.room-make form button[type="submit"]:hover{background:var(--gb-ember)!important;color:var(--gb-bone)!important;transform:translateY(-2px)}
.room-make form button[type="submit"]:focus-visible{outline:2px solid var(--gb-ember);outline-offset:3px}

/* the disclosure lines stay exactly as written — only the dress changes */
.room-make .mk-privacy{
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--gb-mute);line-height:1.9;margin:var(--s-4) 0 0;
}
.room-make .mk-privacy a{
  color:var(--gb-bone-soft);text-decoration:none;
  border-bottom:1px solid var(--gb-line-strong);padding-bottom:.15rem;
}
.room-make .mk-privacy a:hover{color:var(--gb-ember);border-color:var(--gb-ember)}
.room-make .voice-note{
  color:var(--gb-mute)!important;font-size:var(--t-sm)!important;
  line-height:1.6;max-width:46ch!important;
}
.room-make .voice-btn{
  min-height:48px;border-radius:var(--r-pill);
  background:var(--gb-bone);color:var(--gb-black);border:0;
  font-family:var(--f-mono);letter-spacing:var(--tr-label);text-transform:uppercase;
}
.room-make .voice-btn.ghost{
  background:transparent!important;color:var(--gb-bone)!important;
  border:0!important;box-shadow:inset 0 0 0 1px var(--gb-line-strong);
}
.room-make .jv-line .role{
  font-family:var(--f-mono)!important;color:var(--gb-mute)!important;
  letter-spacing:var(--tr-label)!important;
}
.room-make .jv-line.you .role{color:var(--gb-ember)!important}

/* ── THE STUDIO ROOM (make-one) ────────────────────────────────────
   The V1 page carried its own <style>: a fixed film, a 34rem glass
   card with a blur, aqua links and pill buttons. Pat: "contact is
   ugly." What replaces it is an architecture-studio letter — the film
   is the room, the address is the headline, the fields are hairlines,
   and the voice agent is a quiet second option underneath. */
.room-make{background:var(--gb-black)}
.mk-stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--gb-black)}
.mk-stage video,.mk-stage img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
}
.mk-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,8,10,.80) 0%,rgba(7,8,10,.34) 46%,rgba(7,8,10,.14) 100%),
    linear-gradient(180deg,rgba(7,8,10,.30) 0%,rgba(7,8,10,.12) 32%,var(--gb-black) 96%);
}
.room-make .top,.room-make .mk-hero,.room-make main,.room-make footer{position:relative;z-index:2}

.mk-hero{
  min-height:calc(100svh - var(--top-h,6.4rem));
  display:grid;align-items:end;
  width:var(--shell);margin-inline:auto;
  padding:calc(var(--top-h) + var(--s-8)) 0 var(--s-8);
}
.mk-hero-copy{max-width:46rem;display:grid;gap:var(--s-4)}
.mk-hero h1{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-xl);line-height:var(--lh-mega);
  letter-spacing:var(--tr-mega);color:var(--gb-bone);
  margin:0;text-wrap:balance;
}
.mk-hero .lede{
  font-size:var(--t-md);line-height:var(--lh-body);
  color:var(--gb-bone-soft);margin:0;max-width:52ch;
}

.room-make .page{
  width:var(--shell);max-width:none;margin-inline:auto;
  padding:0 0 calc(var(--section-y) + var(--dock-clear,4.75rem));
  display:grid;gap:var(--section-y);
}
@media (min-width:960px){
  .room-make .page{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-9) var(--s-9);align-items:start}
}

/* the letter — no box, no blur, no border. Type on the room. */
.mk-letter{
  max-width:none;margin:0;padding:var(--section-y) 0 0;
  border-top:1px solid var(--gb-line);
  background:none;box-shadow:none;
}
.mk-letter .contact-email{margin:0 0 var(--s-7)!important}
.mk-letter form{display:grid;gap:0;max-width:34rem}
.room-make .mk-field input,
.room-make .mk-field textarea{
  background:transparent!important;
  box-shadow:none;
  border:0!important;border-bottom:1px solid var(--gb-line-strong)!important;
  border-radius:0;
  padding:var(--s-3) 0!important;
}
.room-make .mk-field input:focus,
.room-make .mk-field textarea:focus{
  box-shadow:none;background:transparent!important;
  border-bottom-color:var(--gb-ember)!important;
}
.room-make form button[type="submit"]{border-radius:2px!important;margin-top:var(--s-4)}

/* the agent, deliberately quieter than the letter */
.mk-aside{
  padding:var(--section-y) 0 0;
  border-top:1px solid var(--gb-line);
  background:none;box-shadow:none;max-width:34rem;
}
.mk-aside h2{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-md);letter-spacing:var(--tr-head);
  line-height:1.14;color:var(--gb-bone-soft);margin:0 0 var(--s-3);
}
.mk-aside-lede{color:var(--gb-mute);font-size:var(--t-sm);line-height:1.6;margin:0 0 var(--s-5);max-width:44ch}
.room-make .mk-aside .voice-btn{
  background:transparent!important;color:var(--gb-bone-soft)!important;
  box-shadow:inset 0 0 0 1px var(--gb-line-strong);
  border-radius:2px!important;font-size:var(--t-label);
}
.room-make .mk-aside .voice-btn:hover{color:var(--gb-bone)!important;box-shadow:inset 0 0 0 1px var(--gb-ember)}
.room-make .jv-chat input{
  border-radius:2px!important;background:transparent!important;
  border:0!important;box-shadow:inset 0 0 0 1px var(--gb-line-strong);
  color:var(--gb-bone)!important;
}

/* site.css owns `.page` with a heavier hand than a single class can
   answer, so the studio room claims its own shell explicitly. */
body.room-make main.page{
  width:var(--shell);max-width:none;margin-inline:auto;
}
/* the room is a photograph; the letter needs a floor to be read on */
body.room-make .mk-shade{
  background:
    linear-gradient(90deg,rgba(7,8,10,.90) 0%,rgba(7,8,10,.55) 52%,rgba(7,8,10,.22) 100%),
    linear-gradient(180deg,rgba(7,8,10,.34) 0%,rgba(7,8,10,.55) 42%,var(--gb-black) 88%);
}
/* room-polish.js adds a "copy request" fallback and a status line.
   Useful; it just arrived dressed as 2024. */
body.room-make .mk-copy,
body.room-make form .copy-request,
body.room-make button[data-copy-request]{
  background:transparent!important;color:var(--gb-bone-soft)!important;
  border:0!important;box-shadow:inset 0 0 0 1px var(--gb-line-strong);
  border-radius:2px!important;min-height:52px;padding:0 var(--s-6)!important;
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
}
body.room-make .form-status,
body.room-make [data-empty-en],
body.room-make .mk-status{
  background:transparent!important;border:0!important;
  border-left:2px solid var(--gb-line-strong)!important;
  border-radius:0!important;
  padding:var(--s-2) 0 var(--s-2) var(--s-4)!important;
  color:var(--gb-mute)!important;font-size:var(--t-sm)!important;
}
body.room-make form{gap:0}
body.room-make form .mk-actions,
body.room-make form > div:has(button){display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}

body.room-make form button[type="submit"]{
  text-transform:uppercase!important;
  font-family:var(--f-mono)!important;font-size:var(--t-label)!important;
  letter-spacing:var(--tr-label)!important;
}
body.room-make .jv-chat{gap:var(--s-3);align-items:stretch}
body.room-make .jv-chat input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 var(--s-4)!important}
body.room-make .voice-note a,
body.room-make .mk-aside a{
  color:var(--gb-bone-soft);text-decoration:none;
  border-bottom:1px solid var(--gb-line-strong);padding-bottom:.12rem;
}
body.room-make .voice-note a:hover,
body.room-make .mk-aside a:hover{color:var(--gb-ember);border-color:var(--gb-ember)}

/* ── THE BILLBOARD (about, claudine, cartoons) ─────────────────────
   V1 sat the copy in a `.plate`: a bordered glass rectangle laid over
   the person's chest. Grok's note is right — the copy belongs in the
   lower-left safe zone on a gradient, with nothing drawn around it. */
.billboard .plate{
  background:none!important;border:0!important;border-left:0!important;
  box-shadow:none!important;padding:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.billboard .copy{max-width:min(46rem,72vw);padding-bottom:clamp(2.4rem,7vh,5rem)}
.billboard h1{
  font-family:var(--f-display);font-weight:500;
  font-size:var(--t-xl);line-height:var(--lh-mega);
  letter-spacing:var(--tr-mega);color:var(--gb-bone);
  text-shadow:0 10px 44px rgba(3,5,10,.62);
  max-width:18ch;
}
.billboard .plate .lede,.billboard .lede{
  color:var(--gb-bone-soft)!important;
  font-size:var(--t-body);line-height:var(--lh-body);max-width:52ch;
  text-shadow:0 2px 20px rgba(3,5,10,.8);
}
.billboard .shade{
  background:
    linear-gradient(90deg,rgba(7,8,10,.74) 0%,rgba(7,8,10,.30) 52%,transparent 100%),
    linear-gradient(180deg,transparent 34%,rgba(7,8,10,.72) 100%)!important;
}

/* A 9:16 portrait behind lower-third copy needs a real floor on a phone,
   or the headline lands on a face and neither survives. */
@media (max-width:768px){
  .billboard .shade{
    background:
      linear-gradient(180deg,rgba(7,8,10,.42) 0%,rgba(7,8,10,0) 26%,rgba(7,8,10,.55) 58%,var(--gb-black) 92%)!important;
  }
  .billboard .copy{max-width:none;padding-inline:var(--gutter);padding-bottom:clamp(1.6rem,5vh,3rem)}
  .billboard h1{font-size:clamp(2.1rem,8.6vw,3.2rem);max-width:15ch}
  .billboard .plate .lede,.billboard .lede{font-size:var(--t-sm)}
}

/* Round B, every page: "media letterboxed inside a box" is the hard fail.
   The billboard film fills its room — cover, edge to edge, focal point
   held high so the lower third stays clear for the type. */
.billboard{overflow:hidden}
.billboard .film-el,.billboard img,.billboard video{
  object-fit:cover!important;object-position:center 30%!important;
  opacity:1!important;
}