:root{
 --bg:#080705;--panel:#11100d;--text:#f7f2e9;--muted:#c8beaf;
 --gold:#d99a48;--line:rgba(217,154,72,.58);--max:1180px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
 margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;
 background:
 radial-gradient(circle at 50% 24%,rgba(217,154,72,.14),transparent 30rem),
 linear-gradient(180deg,#090806 0%,#050504 100%);
 min-height:100vh
}
a{color:inherit}
main{width:min(calc(100% - 28px),var(--max));margin:auto}
.gateway{padding:30px 0 0}
.intro{text-align:center;max-width:780px;margin:0 auto 28px}
.eyebrow{margin:0 0 10px;color:var(--gold);font-size:.76rem;font-weight:700;letter-spacing:.32em}
h1{margin:0;font:400 clamp(2.2rem,5vw,4.6rem)/1 Georgia,"Times New Roman",serif}
.lead{margin:13px 0 0;color:var(--muted);font:italic 400 clamp(1rem,2vw,1.35rem)/1.4 Georgia,"Times New Roman",serif}

.stage{
 display:grid;grid-template-columns:1fr 1fr;gap:18px;
 align-items:stretch
}
.placard{
 position:relative;min-height:430px;overflow:hidden;
 border:1px solid var(--line);border-radius:24px;
 text-decoration:none;box-shadow:0 22px 60px rgba(0,0,0,.48);
 background-color:#0a0907;background-repeat:no-repeat;background-size:auto 100%;
 transition:transform .2s ease,border-color .2s ease
}
.placard::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none
}
.placard-left{
 background-image:url("/panel-sounds.png");background-position:left center
}
.placard-left::after{
 background:linear-gradient(90deg,
   rgba(7,6,5,.02) 0%,
   rgba(7,6,5,.12) 28%,
   rgba(7,6,5,.82) 54%,
   rgba(7,6,5,.98) 74%,
   #080705 100%)
}
.placard-right{
 background-image:url("/panel-radio.png");background-position:right center
}
.placard-right::after{
 background:linear-gradient(270deg,
   rgba(7,6,5,.02) 0%,
   rgba(7,6,5,.12) 28%,
   rgba(7,6,5,.82) 54%,
   rgba(7,6,5,.98) 74%,
   #080705 100%)
}
.placard:hover,.placard:focus-visible{
 transform:translateY(-4px);border-color:var(--gold);outline:none
}
.placard-copy{
 position:relative;z-index:2;height:100%;min-height:430px;
 display:flex;flex-direction:column;justify-content:center;align-items:center;
 text-align:center;padding:38px 38px
}
.placard-left .placard-copy{margin-left:43%}
.placard-right .placard-copy{margin-right:43%}

.brand{display:flex;flex-direction:column;align-items:center}
.brand .monty{font:400 clamp(2.35rem,4vw,3.6rem)/.9 Georgia,"Times New Roman",serif}
.subbrand{margin-top:9px;color:var(--gold);font-weight:600;font-size:1rem;letter-spacing:.24em}
.rule{width:92px;height:1px;background:var(--gold);opacity:.72;margin:20px 0 24px}
.placard strong{font:400 1.48rem/1.15 Georgia,"Times New Roman",serif}
.copy{max-width:270px;margin:10px 0 26px;color:var(--muted);line-height:1.55;font-size:.94rem}
.button{
 margin-top:4px;padding:13px 18px;border:1px solid var(--line);border-radius:999px;
 color:var(--gold);font-size:.75rem;font-weight:700;letter-spacing:.14em
}
.button b{font-size:1rem;margin-left:5px}

.section-bar{
 display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
 width:min(100%,820px);margin:36px auto 0;padding:8px 0
}
.section-bar span{height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.section-bar span:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.section-bar b{
 display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);
 border-radius:50%;color:var(--gold);font:400 1.15rem Georgia,"Times New Roman",serif
}
footer{padding:20px 14px 34px;text-align:center;color:#8e867a;font-size:.76rem;letter-spacing:.09em}
footer p{margin:0}footer a{color:#a69c8e;text-decoration:none}

@media(max-width:850px){
 main{width:min(calc(100% - 18px),var(--max))}
 .gateway{padding-top:22px}
 .intro{margin-bottom:20px}
 .stage{grid-template-columns:1fr;gap:14px}
 .placard{min-height:360px;background-size:auto 100%}
 .placard-copy{min-height:360px;padding:28px 24px}
 .placard-left .placard-copy{margin-left:34%}
 .placard-right .placard-copy{margin-right:34%}
}
@media(max-width:600px){
 .eyebrow{font-size:.65rem;letter-spacing:.21em}
 .placard{min-height:390px;background-size:auto 62%;background-position:center top}
 .placard::after{background:linear-gradient(180deg,
   rgba(7,6,5,.02) 0%,
   rgba(7,6,5,.10) 34%,
   rgba(7,6,5,.76) 54%,
   #080705 68%,
   #080705 100%)}
 .placard-copy{
   min-height:390px;justify-content:flex-end;padding:195px 24px 28px
 }
 .placard-left .placard-copy,.placard-right .placard-copy{margin:0}
 .rule{margin:12px 0 15px}
 .copy{margin:8px 0 16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.placard{transition:none}}