/* ==========================================================================
   Adloom — AI UGC ad studio
   Palette: warm dark brown ground + cream type + a single terracotta signal.
   No gradients, no glass, no drop shadows on cards. Hairlines and space only.
   ========================================================================== */

:root{
  /* Warm dark brown ground, cream type, terracotta signal.
     --paper is the page ground and --ink is the type on it; the names are kept
     from the light build so every component keeps working off the same tokens. */
  --paper:      #2C221A;   /* page ground */
  --paper-2:    #362A20;   /* lifted panels: mid-CTA, featured package */
  --paper-3:    #403327;   /* placeholder behind media */
  --ink:        #F2EBDF;   /* primary type */
  --ink-2:      #C6B9A9;   /* secondary type */
  --ink-3:      #94877A;   /* mono labels, muted */
  --accent:     #C9552F;
  --accent-2:   #E0663D;   /* on a dark ground hover brightens, never darkens */
  --screen:     #1B1410;   /* deepest: work "screening room" + contact */
  --screen-2:   #241C16;
  --line:       rgba(242,235,223,.14);
  --line-2:     rgba(242,235,223,.07);
  --line-inv:   rgba(242,235,223,.15);

  --wrap: 1220px;
  --gut: clamp(20px, 5vw, 68px);

  --ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Must outrank the display value set by component classes such as .btn,
   otherwise [hidden] elements (e.g. the optional Telegram button) still show. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }

/* Base colour for every link. Without this, any anchor a component rule does
   not explicitly colour falls back to the browser's default blue, which is
   unreadable on this ground. Components override as needed. */
a{ color:var(--ink); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:0 0 6px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- type ---------- */
.display{
  font-family:var(--ff-display);
  font-weight:400;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 120;
  letter-spacing:-.022em;
  line-height:1.02;
  margin:0;
}
.dot{ color:var(--accent); }

.mono-label{
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
  display:block;
}
.sechead--invert .mono-label,
.work .mono-label{ color:rgba(245,242,236,.45); }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:14.5px; font-weight:500; letter-spacing:-.005em;
  padding:14px 26px; border-radius:999px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ --btn-bg:var(--accent); --btn-bd:var(--accent); --btn-fg:#FFF7F2; }
.btn--solid:hover{ --btn-bg:var(--accent-2); --btn-bd:var(--accent-2); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--ghost:hover{ --btn-bd:var(--ink); }
.btn--lg{ padding:17px 34px; font-size:15.5px; }
.btn--sm{ padding:10px 19px; font-size:13px; }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

.linkish{
  background:none; border:0; padding:6px 0; cursor:pointer;
  font-size:14.5px; color:var(--ink-2);
  border-bottom:1px solid var(--line);
  transition:color .2s, border-color .2s;
}
.linkish:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- reveal ----------
   Scoped to .js so that if the script never runs, the content is simply
   visible rather than permanently invisible. */
.js .rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in{ opacity:1; transform:none; }
.rv[data-rv-delay="1"]{ transition-delay:.09s; }
.rv[data-rv-delay="2"]{ transition-delay:.18s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ==========================  NAV  ========================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(44,34,26,.88);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:16px var(--gut);
  display:flex; align-items:center; gap:26px;
}
.wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto; }
.wordmark__mark{
  width:29px; height:29px; border-radius:7px; background:var(--screen); color:var(--ink); border:1px solid var(--line);
  font-family:var(--ff-display); font-size:16px; display:grid; place-items:center; padding-bottom:2px;
}
.wordmark__name{ font-family:var(--ff-display); font-size:20px; letter-spacing:-.02em; }
.nav__links{ display:flex; gap:26px; }
.nav__links a{
  color:var(--ink-2); text-decoration:none; font-size:14.5px;
  padding-bottom:2px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav__links a:hover{ color:var(--ink); border-color:var(--ink); }
@media (max-width:760px){ .nav__links{ display:none; } }

/* ==========================  HERO  ========================== */
.hero{ padding-top:clamp(120px,15vh,190px); }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:clamp(30px,6vw,90px); align-items:end;
  padding-bottom:clamp(46px,6vw,74px);
}
@media (max-width:940px){ .hero__grid{ grid-template-columns:1fr; align-items:start; } }

.avail{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 26px;
  border:1px solid var(--line); border-radius:999px; padding:7px 15px 7px 13px;
}
.avail__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(201,85,47,.5); animation:pulse 2.6s infinite; }
.avail.is-closed .avail__dot{ background:var(--ink-3); animation:none; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(201,85,47,0); } 100%{ box-shadow:0 0 0 0 rgba(201,85,47,0); } }
@media (prefers-reduced-motion: reduce){ .avail__dot{ animation:none; } }

.hero__h1{ font-size:clamp(48px,8.4vw,112px); font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144; }
.hero__sub{ font-size:clamp(16.5px,1.55vw,19px); color:var(--ink-2); max-width:47ch; margin:30px 0 0; }
.hero__actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:36px; }

.hero__aside{ border-top:1px solid var(--line); padding-top:20px; }
.tick{ list-style:none; margin:16px 0 0; padding:0; }
.tick li{ position:relative; padding-left:22px; font-size:15px; color:var(--ink-2); margin-bottom:11px; }
.tick li::before{
  content:""; position:absolute; left:1px; top:.42em;
  width:6px; height:11px;
  border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(42deg);
}

/* ---------- marquee reel ---------- */
.marquee{
  overflow:hidden; padding:8px 0 10px;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{ display:flex; gap:12px; width:max-content; animation:slide 74s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__cell{
  width:clamp(96px,10vw,132px); aspect-ratio:9/16; flex:0 0 auto;
  border-radius:8px; overflow:hidden; background:var(--paper-3);
}
.marquee__cell video{ width:100%; height:100%; object-fit:cover; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  .marquee{ overflow-x:auto; }
}

/* ---------- facts ---------- */
.facts{
  list-style:none; margin:0; padding:clamp(34px,4.5vw,54px) 0 clamp(56px,7vw,96px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px);
}
@media (max-width:700px){ .facts{ grid-template-columns:repeat(2,1fr); } }
.facts li{ border-top:1px solid var(--line); padding-top:15px; }
.facts b{
  display:block; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(34px,4.4vw,54px); line-height:1; letter-spacing:-.03em; margin-bottom:8px;
}
.facts span{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

/* ==========================  SECTION HEADS  ========================== */
.sechead{ max-width:64ch; margin-bottom:clamp(34px,4.5vw,54px); }
.sechead__h{ font-size:clamp(32px,4.6vw,60px); margin-top:16px; }
.sechead__p{ margin:20px 0 0; color:var(--ink-2); max-width:50ch; }
.sechead--invert .sechead__p{ color:rgba(245,242,236,.62); }

/* ==========================  WORK (dark)  ========================== */
.work{
  background:var(--screen); color:var(--ink);
  padding:clamp(66px,9vw,120px) 0 clamp(70px,9vw,124px);
}

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,3.4vw,40px); }
.filters button{
  background:transparent; border:1px solid var(--line-inv); color:rgba(245,242,236,.72);
  border-radius:999px; padding:9px 17px; font-size:13.5px; cursor:pointer;
  transition:background-color .22s, color .22s, border-color .22s;
}
.filters button:hover{ border-color:rgba(242,235,223,.42); color:var(--ink); }
.filters button[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--screen); }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,20px); }
@media (max-width:1080px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .grid{ grid-template-columns:1fr; } }

.card{
  position:relative; display:block; width:100%; padding:0; text-align:left;
  background:var(--screen-2); border:0; border-radius:12px; overflow:hidden; cursor:pointer;
  aspect-ratio:9/16;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.card.in{ opacity:1; transform:none; }
/* The tile IS the video — it autoplays muted and loops. The poster attribute
   covers only the instant before the first frame decodes. */
.card video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.card:hover video{ transform:scale(1.035); }

.card__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,8,7,.82) 0%, rgba(10,8,7,.28) 34%, rgba(10,8,7,0) 62%);
}
.card__body{ position:absolute; inset:auto 0 0 0; padding:14px 15px 15px; pointer-events:none; }
.card__fmt{ display:block; font-size:14px; font-weight:500; line-height:1.3; margin:0 0 4px; color:#fff; }
.card__vert{ display:block; font-family:var(--ff-mono); font-size:10.5px; line-height:1.35; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.66); margin:0; }
/* The grid plays silently, so say how to get sound. */
.card__sound{
  position:absolute; top:11px; right:11px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff;
  background:rgba(10,8,7,.5); backdrop-filter:blur(4px);
  padding:4px 9px 4px 7px; border-radius:999px; pointer-events:none;
  opacity:.85; transition:opacity .3s, background-color .3s;
}
.card__sound::before{
  content:""; width:9px; height:9px; flex:0 0 auto;
  background:currentColor;
  /* speaker-with-slash glyph, drawn rather than loaded */
  clip-path:polygon(0 33%,30% 33%,60% 5%,60% 95%,30% 67%,0 67%);
}
.card:hover .card__sound{ opacity:1; background:rgba(10,8,7,.72); }

@media (prefers-reduced-motion: reduce){
  .card{ opacity:1; transform:none; }
  .card:hover video{ transform:none; }
}

/* Inline CTA band. Sits between two grids rather than inside one, so it can
   never leave an empty cell at any column count. */
.card-cta{
  background:var(--paper-2); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  margin:clamp(12px,1.5vw,20px) 0;
  padding:clamp(24px,3vw,38px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,3vw,40px); flex-wrap:wrap;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.card-cta.in{ opacity:1; transform:none; }
.card-cta__h{ font-size:clamp(22px,2.5vw,32px); margin:0 0 8px; }
.card-cta p{ margin:0; color:var(--ink-2); font-size:14.5px; max-width:46ch; }
.card-cta .btn{ flex:0 0 auto; }
@media (prefers-reduced-motion: reduce){ .card-cta{ opacity:1; transform:none; } }

.grid__empty{ color:rgba(245,242,236,.6); padding-top:30px; }

/* ==========================  SERVICES  ========================== */
.services{ padding:clamp(72px,9vw,124px) 0; }
.table{ border-top:1px solid var(--line); }
.table__row{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);
  gap:clamp(16px,4vw,60px);
  padding:clamp(22px,2.7vw,32px) 0;
  border-bottom:1px solid var(--line);
}
@media (max-width:820px){ .table__row{ grid-template-columns:1fr; gap:10px; } }
.table__k h3{ font-size:19px; font-weight:500; margin:0 0 6px; letter-spacing:-.012em; }
.table__v p{ margin:0; color:var(--ink-2); max-width:56ch; }
.table__for{
  margin-top:10px !important;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3) !important;
}

.packs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(38px,5vw,64px);
}
@media (max-width:880px){ .packs{ grid-template-columns:1fr; } }
.pack{
  border:1px solid var(--line); border-radius:14px;
  padding:clamp(24px,2.8vw,34px);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .3s, background-color .3s;
}
.pack:hover{ border-color:var(--ink); }
.pack--mark{ background:var(--paper-2); border-color:transparent; }
.pack--mark .mono-label{ color:var(--accent); }
.pack__h{ font-size:clamp(21px,2.1vw,27px); }
.pack p{ margin:0; color:var(--ink-2); font-size:15px; }

/* ==========================  MID CTA  ========================== */
.midcta{ background:var(--paper-2); border-block:1px solid var(--line); }
.midcta__in{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(26px,5vw,72px); align-items:center;
  padding-block:clamp(52px,6.5vw,88px);
}
@media (max-width:880px){ .midcta__in{ grid-template-columns:1fr; } }
.midcta__h{ font-size:clamp(29px,3.9vw,50px); }
.midcta__p{ margin:20px 0 0; color:var(--ink-2); max-width:46ch; }
.midcta__act{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.midcta__note{ margin:0; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ==========================  ABOUT  ========================== */
.about{ padding:clamp(72px,9vw,124px) 0; }
.about__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr); gap:clamp(28px,5vw,80px); }
@media (max-width:940px){ .about__grid{ grid-template-columns:1fr; } }
.about__left{ position:sticky; top:104px; align-self:start; }
@media (max-width:940px){ .about__left{ position:static; } }
.pull{ font-size:clamp(27px,3.3vw,42px); margin-top:18px; max-width:14ch; }
.lede{ font-size:clamp(17px,1.6vw,20px); color:var(--ink); margin:0 0 20px; }
.about__right p{ color:var(--ink-2); max-width:58ch; }

.steps{ list-style:none; margin:clamp(34px,4vw,52px) 0 0; padding:0; border-top:1px solid var(--line); }
.steps li{ display:flex; gap:clamp(16px,2.4vw,32px); padding:22px 0; border-bottom:1px solid var(--line); }
.steps__n{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em; color:var(--accent); padding-top:4px; }
.steps h4{ margin:0 0 4px; font-size:16.5px; font-weight:500; letter-spacing:-.01em; }
.steps p{ margin:0; font-size:14.5px; }

/* ==========================  CONTACT  ========================== */
.contact{ background:var(--screen); color:var(--ink); padding:clamp(76px,10vw,140px) 0; }
.contact .mono-label{ color:rgba(245,242,236,.45); }
.contact__h{ font-size:clamp(34px,5.6vw,74px); margin-top:16px; }
.contact__p{ margin:24px 0 0; color:rgba(245,242,236,.66); max-width:46ch; }
.contact__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.contact .btn--ghost{ --btn-fg:var(--ink); --btn-bd:var(--line-inv); }
.contact .btn--ghost:hover{ --btn-bd:var(--ink); }

/* The address written out, so it survives a broken funnel, a missing mail
   client, or JavaScript failing entirely. */
.about__mail a,
.q__fallback a{
  text-decoration:none;
  border-bottom:1px solid var(--accent); padding-bottom:1px;
  transition:color .2s;
}
.about__mail a:hover,.q__fallback a:hover{ color:var(--accent); }

.contact__info{
  margin:clamp(28px,3.2vw,42px) 0 0;
  border-top:1px solid var(--line-inv);
  max-width:640px;
}
.contact__info-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 32px;
  padding:16px 0; border-bottom:1px solid var(--line-inv);
}
.contact__info dt{
  margin:0; min-width:74px;
  font-family:var(--ff-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.contact__info dd{ margin:0; }
.contact__info a{
  font-size:16.5px; text-decoration:none;
  border-bottom:1px solid var(--line-inv); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.contact__info a:hover{ color:var(--accent); border-color:var(--accent); }

.about__mail{
  margin:clamp(26px,3vw,36px) 0 0; padding-top:22px;
  border-top:1px solid var(--line); color:var(--ink-2); font-size:15px;
}

.q__fallback{ margin-top:10px; }

.foot__mail{ color:var(--ink-3); text-decoration:none; transition:color .2s; }
.foot__mail:hover{ color:var(--ink); }

.fallback{ margin-top:clamp(34px,4vw,52px); border-top:1px solid var(--line-inv); padding-top:22px; max-width:640px; }
.fallback summary{
  cursor:pointer; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(245,242,236,.55); list-style:none;
}
.fallback summary::-webkit-details-marker{ display:none; }
.fallback summary::before{ content:"+ "; color:var(--accent); }
.fallback[open] summary::before{ content:"– "; }
.fallback summary:hover{ color:var(--ink); }

.form{ margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.form label{
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(245,242,236,.55);
}
.form input,.form textarea{
  font-family:var(--ff-body); font-size:15px; letter-spacing:normal; text-transform:none;
  background:rgba(242,235,223,.05); border:1px solid var(--line-inv); color:var(--ink);
  border-radius:9px; padding:13px 15px; width:100%; resize:vertical;
  transition:border-color .2s, background-color .2s;
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--accent); background:rgba(245,242,236,.08); }
.form .btn{ align-self:flex-start; }
.form__status{ margin:0; font-size:13.5px; color:rgba(245,242,236,.7); min-height:1.2em; }
.form__status.is-err{ color:#E8927A; }

/* ==========================  FOOTER  ========================== */
.foot{ border-top:1px solid var(--line); }
.foot__in{
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between;
  padding-block:26px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ==========================  STICKY MOBILE CTA  ========================== */
.sticky{
  position:fixed; z-index:80; left:12px; right:12px; bottom:12px;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  background:rgba(19,17,16,.94); backdrop-filter:blur(12px);
  color:var(--ink); border-radius:999px; padding:9px 9px 9px 20px;
  transform:translateY(140%); transition:transform .45s var(--ease);
}
.sticky.is-up{ transform:none; }
.sticky__t{ font-size:13.5px; }
@media (min-width:761px){ .sticky{ display:none; } }

/* ==========================  LIGHTBOX  ========================== */
.lb{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; }
.lb[hidden]{ display:none; }
.lb__scrim{ position:absolute; inset:0; background:rgba(8,7,6,.9); backdrop-filter:blur(6px); animation:fade .3s var(--ease); }
@keyframes fade{ from{ opacity:0; } }
.lb__box{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto minmax(260px,340px);
  gap:clamp(16px,2.4vw,34px); align-items:center;
  padding:clamp(14px,2vw,26px);
  max-width:min(1000px,94vw);
  animation:pop .38s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.985); } }
.lb__stage{
  width:min(38vh,330px); aspect-ratio:9/16;
  background:#000; border-radius:14px; overflow:hidden;
}
.lb__stage video{ width:100%; height:100%; object-fit:contain; background:#000; }
.lb__meta{ color:var(--ink); }
.lb__meta .mono-label{ color:rgba(245,242,236,.45); }
.lb__h{ font-size:clamp(23px,2.6vw,33px); margin:12px 0 0; }
.lb__vert{
  margin:10px 0 0; font-family:var(--ff-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.lb__note{ margin:16px 0 24px; color:rgba(245,242,236,.68); font-size:15px; }
.lb__x,.lb__nav{
  position:absolute; z-index:2; display:grid; place-items:center;
  background:rgba(242,235,223,.1); border:1px solid var(--line-inv); color:var(--ink);
  border-radius:50%; cursor:pointer; transition:background-color .2s, border-color .2s;
}
.lb__x:hover,.lb__nav:hover{ background:rgba(245,242,236,.2); border-color:rgba(245,242,236,.4); }
.lb__x{ top:-6px; right:-6px; width:38px; height:38px; font-size:24px; line-height:1; padding-bottom:3px; }
.lb__nav{ top:50%; margin-top:-21px; width:42px; height:42px; font-size:26px; line-height:1; padding-bottom:4px; }
.lb__nav--prev{ left:-58px; }
.lb__nav--next{ right:-58px; }
@media (max-width:920px){
  .lb__box{ grid-template-columns:1fr; align-content:center; max-height:94vh; overflow:auto; }
  .lb__stage{ width:min(52vh,300px); margin-inline:auto; }
  .lb__meta{ text-align:center; }
  .lb__note{ max-width:40ch; margin-inline:auto; }
  .lb__nav{ display:none; }
  .lb__x{ top:0; right:0; }
}

/* ==========================  QUALIFIER  ========================== */
.q{ position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:16px; }
.q[hidden]{ display:none; }
.q__scrim{ position:absolute; inset:0; background:rgba(8,7,6,.72); backdrop-filter:blur(6px); animation:fade .3s var(--ease); }
.q__box{
  position:relative; z-index:1; width:min(560px,100%);
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:clamp(28px,3.6vw,44px);
  max-height:92vh; overflow:auto;
  animation:pop .38s var(--ease);
}
.q__x{
  position:absolute; top:14px; right:16px; width:34px; height:34px;
  background:none; border:0; font-size:26px; line-height:1; color:var(--ink-3);
  cursor:pointer; border-radius:50%; padding-bottom:4px;
}
.q__x:hover{ color:var(--ink); background:var(--paper-2); }
.q__bar{ height:2px; background:var(--line); border-radius:2px; margin-bottom:26px; overflow:hidden; }
.q__bar span{ display:block; height:100%; width:0; background:var(--accent); transition:width .45s var(--ease); }
.q__h{ font-size:clamp(24px,3vw,33px); margin:12px 0 0; }
.q__hint{ margin:11px 0 0; color:var(--ink-3); font-size:14.5px; }
.q__opts{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.q__opts button{
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:12px 20px; font-size:14.5px; cursor:pointer; text-align:left;
  transition:border-color .2s, background-color .2s, color .2s, transform .25s var(--ease);
}
.q__opts button:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.q__opts button.is-picked{ background:var(--accent); border-color:var(--accent); color:#FFF7F2; }
@media (prefers-reduced-motion: reduce){ .q__opts button:hover{ transform:none; } }
.q__back{
  margin-top:24px; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.q__back:hover{ color:var(--ink); }

.q__summary{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line); }
.q__summary li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px;
}
.q__summary span:first-child{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding-top:3px;
}
.q__summary span:last-child{ text-align:right; font-weight:500; }
.q__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.q__fine{ margin:16px 0 0; font-size:12.5px; color:var(--ink-3); }