/* The billboard: a dusk scene, one board whose art scales with its size, and three formats. */
.bb-head{padding-bottom:18px}
.bb-head h1{max-width:15ch}

/* ---------- the board artwork. Every measure inside is relative to the board itself. ---------- */
.board{position:relative;margin:0;width:100%;aspect-ratio:var(--ar);border-radius:var(--rad,10px);overflow:hidden;background:#000;
  /* tall layout (city wall) is the base */
  --ar:3/4; --rad:10px;
  --mark-l:17cqw; --mark-t:4.5cqh; --mark-w:66cqw;
  --tag-l:0; --tag-r:0; --tag-t:33.5cqh; --tag-fs:4.5cqw; --tag-al:center;
  --bub-l:4cqw; --bub-t:39.5cqh; --bub-w:49cqw; --bub-h:16cqh; --bub-fs:5.5cqw;
  --d1-l:90%; --d1-t:84%; --d2-l:103%; --d2-t:104%; --d3-l:112%; --d3-t:118%;
  --mod-r:-4cqw; --mod-h:51cqh;
}
.board[data-format="wide"]{
  --ar:12/5; --rad:6px;
  --mark-l:5cqw; --mark-t:12cqh; --mark-w:38cqw;
  --tag-l:5.6cqw; --tag-r:auto; --tag-t:72cqh; --tag-fs:3.15cqw; --tag-al:left;
  --bub-l:46cqw; --bub-t:8cqh; --bub-w:27cqw; --bub-h:40cqh; --bub-fs:3.2cqw;
  --d1-l:88%; --d1-t:92%; --d2-l:103%; --d2-t:106%; --d3-l:113%; --d3-t:114%;
  --mod-r:1cqw; --mod-h:97cqh;
}
@media (min-width:760px){
  .board[data-format="auto"]{
    --ar:12/5; --rad:6px;
    --mark-l:5cqw; --mark-t:12cqh; --mark-w:38cqw;
    --tag-l:5.6cqw; --tag-r:auto; --tag-t:72cqh; --tag-fs:3.15cqw; --tag-al:left;
    --bub-l:46cqw; --bub-t:8cqh; --bub-w:27cqw; --bub-h:40cqh; --bub-fs:3.2cqw;
    --d1-l:88%; --d1-t:92%; --d2-l:103%; --d2-t:106%; --d3-l:113%; --d3-t:114%;
    --mod-r:1cqw; --mod-h:97cqh;
  }
}
.board__art{position:absolute;inset:0;container-type:size;overflow:hidden;background:
  radial-gradient(54cqw 74cqh at 86% 84%,rgba(255,138,36,.34),transparent 64%),
  radial-gradient(46cqw 62cqh at 4% 104%,rgba(99,217,54,.3),transparent 62%),
  linear-gradient(180deg,#262b24 0,#11140f 43.6%,#060706 44%,#000 100%)}
.board__mark{position:absolute;left:var(--mark-l);top:var(--mark-t);width:var(--mark-w)}
.board__mark img{width:100%;height:auto;filter:drop-shadow(0 1.2cqw 2cqw rgba(0,0,0,.7))}
.board__tag{position:absolute;left:var(--tag-l);right:var(--tag-r);top:var(--tag-t);margin:0;font:800 var(--tag-fs)/1.1 var(--display);letter-spacing:-.005em;color:#fff;text-align:var(--tag-al);white-space:nowrap}
.board__bubble{position:absolute;left:var(--bub-l);top:var(--bub-t);width:var(--bub-w);min-height:var(--bub-h);display:grid;place-items:center;padding:3cqw 4cqw;background:#fff;color:#0a0c0a;border-radius:46% 54% 52% 48% / 56% 52% 48% 44%;box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.55),inset 0 -1cqw 1.6cqw rgba(0,0,0,.08)}
.board__words{margin:0;font:800 calc(var(--bub-fs)*var(--fit,1))/1.08 var(--display);letter-spacing:-.01em;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
.board__bubble i{position:absolute;display:block;border-radius:50%;background:#fff;box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.45)}
.board__bubble i:nth-of-type(1){left:var(--d1-l);top:var(--d1-t);width:4.4cqw;height:4.4cqw}
.board__bubble i:nth-of-type(2){left:var(--d2-l);top:var(--d2-t);width:2.8cqw;height:2.8cqw}
.board__bubble i:nth-of-type(3){left:var(--d3-l);top:var(--d3-t);width:1.7cqw;height:1.7cqw}
.board[data-format="wide"] .board__bubble i:nth-of-type(1){width:3cqw;height:3cqw}
.board[data-format="wide"] .board__bubble i:nth-of-type(2){width:2cqw;height:2cqw}
.board[data-format="wide"] .board__bubble i:nth-of-type(3){width:1.2cqw;height:1.2cqw}
@media (min-width:760px){
  .board[data-format="auto"] .board__bubble i:nth-of-type(1){width:3cqw;height:3cqw}
  .board[data-format="auto"] .board__bubble i:nth-of-type(2){width:2cqw;height:2cqw}
  .board[data-format="auto"] .board__bubble i:nth-of-type(3){width:1.2cqw;height:1.2cqw}
}
.board__model{position:absolute;right:var(--mod-r);bottom:0;height:var(--mod-h)}
.board__model picture{display:block;height:100%}
.board__model img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 0 2.6cqw rgba(0,0,0,.75)) drop-shadow(0 0 1cqw rgba(255,138,36,.35))}
.board[data-photo="a"] .ph-b,.board[data-photo="b"] .ph-a{display:none}
.anim .board__bubble.pulse{animation:bub .5s var(--spring)}
@keyframes bub{from{transform:scale(.9)}to{transform:none}}

/* ---------- the dusk scene around the main board ---------- */
.bb-stage{position:relative}
.scene{position:relative;overflow:hidden;padding:26px var(--gut) 0;background:linear-gradient(180deg,#04060b 0%,#0a1220 34%,#2a1c14 72%,#8a4514 100%);border-block:1px solid var(--line)}
.scene::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1.5px 1.5px at 12% 14%,#fff,transparent),radial-gradient(1px 1px at 28% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 20%,#fff,transparent),
  radial-gradient(1px 1px at 63% 9%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 16%,#fff,transparent),radial-gradient(1px 1px at 91% 6%,#fff,transparent),
  radial-gradient(1px 1px at 6% 30%,#fff,transparent),radial-gradient(1px 1px at 86% 30%,#fff,transparent);opacity:.7}
.scene::after{content:"";position:absolute;left:50%;bottom:-140px;width:900px;height:320px;margin-left:-450px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,138,36,.75),transparent)}
.scene__sky{position:absolute;inset:0;pointer-events:none}
.palm{position:absolute;bottom:26px;width:90px;height:auto;opacity:.96}
.palm--1{left:3%;width:84px}
.palm--2{left:14%;width:60px;bottom:18px;opacity:.85}
.palm--3{right:4%;width:96px}
@media (max-width:759.98px){.palm--2{display:none}.palm--1{left:-18px;width:66px}.palm--3{right:-22px;width:74px}}
.scene__rig{position:relative;z-index:2;width:min(100%,430px);margin:0 auto}
.scene__lamps{display:flex;justify-content:space-around;padding:0 9%;height:16px}
.scene__lamps i{display:block;width:26px;height:6px;margin-top:10px;border-radius:3px 3px 0 0;background:#1a1d1a;box-shadow:0 6px 18px 3px rgba(255,236,200,.5)}
.board#board-main{border:5px solid #15181a;box-shadow:0 0 0 1px #2c3033,0 30px 80px -20px #000,0 0 90px -20px rgba(255,214,150,.35)}
.scene__walk{height:9px;margin:0 -8px;border-radius:2px;background:linear-gradient(180deg,#2b3033,#0d0f10);box-shadow:0 2px 0 #000}
.scene__pole{width:26px;height:86px;margin:0 auto;background:linear-gradient(90deg,#0d0f10,#2a2f32 45%,#0d0f10)}
.scene__city{position:relative;z-index:1;height:44px;margin:-44px calc(var(--gut)*-1) 0;background:
  linear-gradient(#030403,#030403) 0 100%/100% 14px no-repeat,
  linear-gradient(#030403,#030403) 4% 100%/7% 30px no-repeat,linear-gradient(#030403,#030403) 13% 100%/5% 22px no-repeat,
  linear-gradient(#030403,#030403) 21% 100%/8% 38px no-repeat,linear-gradient(#030403,#030403) 33% 100%/4% 26px no-repeat,
  linear-gradient(#030403,#030403) 66% 100%/6% 34px no-repeat,linear-gradient(#030403,#030403) 75% 100%/9% 24px no-repeat,
  linear-gradient(#030403,#030403) 87% 100%/5% 40px no-repeat,linear-gradient(#030403,#030403) 95% 100%/6% 28px no-repeat}
@media (min-width:760px){
  .scene{padding-top:44px}
  .scene__rig{width:min(100%,920px)}
  .scene__rig:has(.board[data-format="tall"]){width:min(100%,440px)}
  .scene__pole{height:120px;width:34px}
  .scene__lamps i{width:40px}
}

/* ---------- controls ---------- */
.bb-ctl{display:grid;gap:18px;max-width:920px;margin:22px auto 0;padding:22px 20px 24px}
.bb-ctl .label{font-size:.92rem;font-weight:700;margin-bottom:8px}
.bb-ctl .chip{white-space:normal;text-align:left;min-height:44px;height:auto;padding-block:9px}
.bb-ctl__row{display:grid;gap:18px}
@media (min-width:760px){.bb-ctl{padding:28px 30px 30px}.bb-ctl__row{grid-template-columns:1fr 1fr}}

/* ---------- three sizes ---------- */
.bb-sizes__grid{display:grid;gap:30px}
.bb-sizes__grid li{display:grid;gap:8px;align-content:start}
.bb-sizes__grid h3{margin-top:10px;font-size:1.4rem}
.bb-sizes__grid p{opacity:.85}
.board--mini{box-shadow:0 24px 50px -22px rgba(60,20,0,.9);border:3px solid #111}
.board--mini[data-format="tall"]{max-width:260px}
.flyer{max-width:240px;padding:10px 10px 0;background:#f6f1e7;border-radius:4px;box-shadow:0 24px 50px -22px rgba(60,20,0,.9);transform:rotate(-2.5deg);transform-origin:50% 0}
.flyer .board--mini{border:0;box-shadow:none;border-radius:2px;max-width:none}
.flyer__strip{display:flex;align-items:center;gap:10px;padding:10px 2px 12px;color:#111}
.flyer__code{flex:none;width:54px;height:54px;background:#fff;border:3px solid #111;display:grid;grid-template-columns:repeat(7,1fr);padding:3px;gap:1px}
.flyer__code i{display:block;background:#111}
.flyer__code i.off{background:transparent}
.flyer__txt{display:grid;font-size:.86rem;line-height:1.25}
.flyer__txt b{font:800 1.05rem/1.1 var(--display)}
@media (min-width:860px){.bb-sizes__grid{grid-template-columns:1.5fr .8fr .8fr;gap:36px;align-items:start}}

/* ---------- what is still needed ---------- */
.bb-need__steps{margin-top:26px}
.bb-need__note{display:grid;gap:14px;justify-items:start;padding:26px 24px}
.bb-need__note p{color:var(--text-2)}