/*! ARTIPROPEL MUSIC TOOLS — visual system
 *
 * Direction: a studio meter, not a template.
 * Everything the product does is measurement, so measurement is the language:
 *  - monospaced type for every number, label and unit (tabular figures)
 *  - a tick-marked "meter rule" as the recurring structural divider
 *  - deep indigo as the instrument body, brass as the needle
 */

/* ============================== TOKENS ============================== */
:root{
  --bg:#0a0a0a; --bg-2:#111111; --bg-3:#17171a;
  --line:rgba(250,250,250,.1); --line-2:rgba(250,250,250,.18);
  --ink:#fafafa; --ink-2:#d4d4d8; --ink-3:#9a9aa0;
  --brand:#ffd400; --brand-2:#ffe066; --brand-ink:#0a0a0a; --brand-fill:#17171a;
  --deep:#000000; --deep-ink:#fafafa;
  --brass:#ffd400; --brass-lit:#ffd400;
  --ok:#34d97a; --warn:#fbbf24; --danger:#ef4444; --focus:#ffd400;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --shadow:0 10px 40px -14px rgba(0,0,0,.6);
  --shadow-lg:0 22px 60px -22px rgba(0,0,0,.75);
  --max:1160px;
  --display:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============================== BASE ============================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); margin:0 0 .5em}
h1{font-size:clamp(2rem,1.35rem + 2.5vw,3.05rem); font-weight:800; letter-spacing:-.035em; line-height:1.06}
h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.15rem); font-weight:750; letter-spacing:-.025em; line-height:1.14; margin-top:0}
h3{font-size:1.12rem; font-weight:700; letter-spacing:-.012em}
p{margin:0 0 1.05em; color:var(--ink-2)}
a{color:var(--brand); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
img,svg{max-width:100%; height:auto}
::selection{background:var(--brand); color:var(--brand-ink)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.narrow{max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--ink-3); font-size:.93rem}

.eyebrow,.unit,.f-key,.score-label,.stat .label,.tick-label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.eyebrow{color:var(--brass); display:block; margin-bottom:16px}

/* ---------- signature: the meter rule ---------- */
.meter-rule{
  height:15px; margin:0; border:0;
  background:
    repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 100%) 0 0/28px 7px repeat-x,
    linear-gradient(var(--line),var(--line)) 0 8px/100% 1px no-repeat;
}
.meter-rule.tall{
  background:
    repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 100%) 0 0/28px 11px repeat-x,
    repeating-linear-gradient(to right, var(--brass) 0 1px, transparent 1px 100%) 0 0/140px 15px repeat-x,
    linear-gradient(var(--line),var(--line)) 0 14px/100% 1px no-repeat;
}

/* ============================== HEADER ============================== */
.site-header{position:sticky; top:0; z-index:60; padding:14px 22px}
.header-in{display:flex; align-items:center; gap:14px; height:56px;
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:16px; padding:0 10px 0 18px;
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out), backdrop-filter .3s var(--ease-out), box-shadow .3s var(--ease-out)}
.site-header.is-scrolled .header-in{background:rgba(17,17,17,.88); border-color:var(--line-2); box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%)}
.wrap > .header-in{max-width:none}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:24px; height:24px; flex:0 0 auto; color:var(--brand)}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text b{font-family:var(--display); font-weight:700; letter-spacing:-.005em; font-size:1rem; color:var(--brand)}
.brand-text span{font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links a{padding:9px 12px; border-radius:var(--r-sm); color:var(--ink-2); font-size:.9rem; font-weight:550}
.nav-links a:hover{background:var(--bg-2); color:var(--ink); text-decoration:none}
.lang{display:flex; border:1px solid var(--line-2); border-radius:99px; overflow:hidden; margin-left:8px}
.lang a{padding:6px 11px; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; font-weight:600; color:var(--ink-3)}
.lang a:hover{text-decoration:none; background:var(--bg-2)}
.lang a[aria-current="true"]{background:var(--brand); color:var(--brand-ink)}
.icon-btn{display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink-2); border-radius:99px; cursor:pointer; margin-left:6px}
.icon-btn:hover{background:var(--bg-2); color:var(--ink)}
[data-theme-toggle]{display:none}
.menu-toggle{display:none}
@media(max-width:880px){
  .menu-toggle{display:grid}
  .nav-links{position:absolute; top:64px; left:22px; right:22px; flex-direction:column; align-items:stretch;
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:10px; display:none; box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 10px}
}

/* ============================== HERO ============================== */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding:64px 0 42px}
.hero h1{margin-bottom:.42em; max-width:15ch}
.hero .lead{font-size:1.13rem; max-width:46ch; color:var(--ink-2); margin-bottom:1.6em}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px}
.hero-facts{display:flex; flex-wrap:wrap; gap:8px 26px; list-style:none; padding:0; margin:0}
.hero-facts li{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-3);
  display:flex; align-items:center; gap:8px; text-transform:uppercase}
.hero-facts li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brass); flex:0 0 auto}
@media(max-width:900px){
  .hero{grid-template-columns:1fr; gap:34px; padding:40px 0 28px}
  .hero .lead{max-width:none}
}

.readout{background:var(--bg-2); border-radius:var(--r-lg); padding:26px 24px 22px; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.07); color:var(--deep-ink)}
.readout-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px}
.readout-head span{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-lit)}
.readout-head em{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; color:rgba(250,250,250,.55); font-style:normal}
.readout-row{display:grid; grid-template-columns:54px 1fr 88px; align-items:center; gap:14px; padding:9px 0}
.readout-row + .readout-row{border-top:1px solid rgba(255,255,255,.07)}
.readout-row .k{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:rgba(250,250,250,.6)}
.readout-row .v{font-family:var(--mono); font-size:1rem; font-weight:600; text-align:right; letter-spacing:-.01em}
.readout-bar{height:7px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.readout-bar i{display:block; height:100%; border-radius:99px; background:var(--brass-lit);
  transform-origin:left; animation:meterIn .9s cubic-bezier(.22,1,.36,1) both}
.readout-row:nth-of-type(2) .readout-bar i{animation-delay:.07s}
.readout-row:nth-of-type(3) .readout-bar i{animation-delay:.14s}
.readout-row:nth-of-type(4) .readout-bar i{animation-delay:.21s}
.readout-row.peak .readout-bar i{background:var(--danger)}
@keyframes meterIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.readout-foot{margin:16px 0 0; font-size:.82rem; color:rgba(250,250,250,.62); line-height:1.5}

/* ============================== BUTTONS ============================== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px;
  border-radius:var(--r-sm); border:1px solid transparent; background:var(--brand); color:var(--brand-ink);
  font:inherit; font-weight:650; font-size:.98rem; cursor:pointer; min-height:50px; text-decoration:none;
  transition:background .16s ease, transform .16s ease, border-color .16s ease}
.btn:hover{background:var(--brand-2); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
.btn.secondary,.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.secondary:hover,.btn.ghost:hover{background:var(--bg-2); border-color:var(--ink-3)}
.btn.wide{width:100%}
.btn .spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite; display:none}
.btn[data-state="loading"] .spinner{display:block}
.btn[data-state="loading"]{pointer-events:none; opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================== SECTIONS ============================== */
.band{padding:60px 0}
.band-alt{background:var(--bg-2); border-block:1px solid var(--line)}
.band-deep{background:var(--deep); color:var(--deep-ink)}
.band-deep h2,.band-deep h3{color:var(--deep-ink)}
.band-deep p{color:rgba(250,250,250,.72)}
.band-deep .eyebrow{color:var(--brass-lit)}
.section-head{margin-bottom:30px; max-width:62ch}
.section-head p{margin-bottom:0}

.feature{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.feature h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.3rem)}
.feature-list{list-style:none; padding:0; margin:22px 0 26px; display:grid; gap:11px}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:.98rem; color:rgba(250,250,250,.8)}
.feature-list li::before{content:""; width:14px; height:2px; background:var(--brass-lit); margin-top:.72em; flex:0 0 auto}
.sample{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:20px}
.sample-badge{display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:99px;
  background:rgba(180,35,24,.24); color:#ffb4ab; margin-bottom:14px}
.sample dl{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0 0 14px}
.sample dt{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,250,250,.5); align-self:center}
.sample dd{margin:0; font-family:var(--mono); font-weight:600; color:var(--deep-ink)}
.sample p{margin:0; color:rgba(250,250,250,.75); font-size:.92rem; line-height:1.55}
@media(max-width:900px){ .feature{grid-template-columns:1fr; gap:30px} }

.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); margin:0}
.card{position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px 20px; display:flex; flex-direction:column;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out)}
.card.is-visible{opacity:1; transform:translateY(0)}
.card:hover{border-color:var(--line-2); background:var(--bg-3)}
.card .unit{position:absolute; top:21px; right:20px; color:var(--ink-3)}
.card .ico{width:28px; height:28px; color:var(--brand); margin-bottom:16px; filter:drop-shadow(0 0 10px rgba(255,212,0,.35))}
.card h3{margin:0 0 6px; padding-right:76px}
.card p{font-size:.94rem; color:var(--ink-3); flex:1; margin-bottom:16px}
.card .go{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--brand); display:inline-flex; align-items:center; gap:7px; transition:gap .16s ease}
.card:hover .go{gap:11px}
.card .go::after{content:"\2192"}
.card a.stretch{position:absolute; inset:0; border-radius:var(--r)}
.card a.stretch:focus-visible{outline-offset:-3px}

.steps{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:0; padding:0;
  list-style:none; counter-reset:s}
.steps li{counter-increment:s; padding-top:16px; border-top:2px solid var(--brass); color:var(--ink-2); font-size:.95rem}
.steps li::before{content:"0" counter(s); font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  color:var(--ink-3); display:block; margin-bottom:10px}
.steps strong{display:block; font-family:var(--display); font-size:1.05rem; letter-spacing:-.01em; margin-bottom:5px; color:var(--ink)}

.faq-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:0 44px}
details.faq{border-bottom:1px solid var(--line); padding:16px 0}
details.faq summary{cursor:pointer; font-weight:650; list-style:none; display:flex; justify-content:space-between;
  gap:16px; align-items:flex-start; font-family:var(--display); letter-spacing:-.01em}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-family:var(--mono); color:var(--brass); font-weight:400; font-size:1.25rem; line-height:1.1}
details.faq[open] summary::after{content:"\2212"}
details.faq p{margin:11px 0 2px; font-size:.95rem}

.offer{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start}
.offer .price{font-family:var(--mono); font-size:2rem; font-weight:600; letter-spacing:-.02em; margin:0 0 4px; color:var(--deep-ink)}
.offer-list{list-style:none; padding:0; margin:0}
.offer-list li{padding:11px 0; border-bottom:1px solid rgba(255,255,255,.09); font-size:.95rem;
  display:flex; gap:12px; color:rgba(250,250,250,.82)}
.offer-list li::before{content:"\2713"; color:var(--brass-lit); font-size:.85rem}
@media(max-width:860px){ .offer{grid-template-columns:1fr; gap:26px} }

/* ============================== TOOL PAGES ============================== */
.tool-hero{padding:38px 0 22px; max-width:64ch}
.tool-hero h1{font-size:clamp(1.85rem,1.2rem + 2.4vw,2.8rem); margin-bottom:.35em}
.tool-hero .lead{font-size:1.06rem; margin-bottom:0}
.panel{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--shadow); margin:0 0 30px}
@media(max-width:600px){ .panel{padding:18px} }

.dropzone{border:1.5px dashed var(--line-2); border-radius:var(--r); padding:38px 22px; text-align:center;
  cursor:pointer; background:var(--bg-2); transition:border-color .16s, background .16s}
.dropzone:hover,.dropzone.drag{border-color:var(--brand); background:var(--bg-3)}
.dropzone strong{display:block; font-family:var(--display); font-size:1.08rem; letter-spacing:-.015em; margin-bottom:5px}
.dropzone .hint{font-size:.87rem; color:var(--ink-3)}
.dropzone p.hint{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase}
.file-row{display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap;
  padding:13px 15px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); margin-top:14px}
.file-row .name{font-weight:600; font-size:.93rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55%}
.progress{height:5px; background:var(--bg-3); border-radius:99px; overflow:hidden; margin:18px 0 8px}
.progress > i{display:block; height:100%; width:0; background:var(--brand); transition:width .2s ease}
.status{font-size:.92rem; color:var(--ink-3); min-height:1.4em; margin:10px 0 0}
.status.error{color:var(--danger)}

.results{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); margin-top:18px}
.stat{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.stat .label{color:var(--ink-3); display:block}
.stat .value{font-family:var(--mono); font-size:1.7rem; font-weight:600; letter-spacing:-.03em; margin-top:6px; line-height:1.1}
.stat .sub{font-family:var(--mono); font-size:.74rem; color:var(--ink-3); letter-spacing:.04em}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{display:inline-block; padding:7px 12px; border:1px solid var(--line-2); border-radius:99px;
  background:var(--bg-2); color:var(--ink-2); font-size:.82rem}
.chip.key{font-weight:600}
.notice{border-left:2px solid var(--brand); background:var(--bg-2); padding:12px 15px;
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.9rem; color:var(--ink-2); margin:16px 0}
.notice.warn{border-color:var(--warn)}

label.field{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3); margin-bottom:7px}
input[type=text],input[type=number],select{width:100%; padding:13px 15px; font:inherit; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm); min-height:50px}
input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--brand)}
input[type=range]{width:100%; accent-color:var(--brand)}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.row > *{flex:1 1 200px}
.row > .shrink{flex:0 0 auto}

.tap-btn{width:min(240px,68vw); aspect-ratio:1; border-radius:50%; border:2px solid var(--brand); background:var(--bg-2);
  color:var(--brand); font-family:var(--mono); font-size:1.3rem; font-weight:600; letter-spacing:.24em;
  cursor:pointer; display:grid; place-items:center; margin:10px auto; transition:transform .07s ease, background .07s ease}
.tap-btn:active,.tap-btn.hit{transform:scale(.955); background:var(--brand); color:var(--brand-ink)}

.rhyme-list{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; padding:0; list-style:none}
.rhyme-list li{padding:7px 13px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.95rem}
.rhyme-group h3{margin-top:1.5em; display:flex; align-items:baseline; gap:10px}
.rhyme-group h3 span{font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--brass); letter-spacing:.08em}

.score-block{display:flex; align-items:center; gap:22px; padding:24px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--bg-2); margin:0 0 14px}
.score-num{font-family:var(--mono); font-size:3rem; font-weight:600; letter-spacing:-.045em; line-height:1}
.score-num small{font-size:.95rem; font-weight:500; color:var(--ink-3); letter-spacing:0; margin-left:2px}
.score-label{color:var(--ink-3); display:block; margin-bottom:3px}
.score-ok .score-num{color:var(--ok)} .score-warn .score-num{color:var(--warn)} .score-fail .score-num{color:var(--danger)}
.score-note{font-size:.87rem; margin-bottom:24px; padding-left:14px; border-left:2px solid var(--line-2)}
.area-title{margin:2em 0 .8em; padding-bottom:.5em; border-bottom:1px solid var(--line)}
.finding{border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r-sm);
  padding:16px 18px; margin:10px 0; background:var(--bg)}
.finding.f-fail{border-left-color:var(--danger)}
.finding.f-warn{border-left-color:var(--warn)}
.finding.f-ok{border-left-color:var(--ok)}
.f-badge{display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; padding:4px 10px; border-radius:99px; background:var(--bg-3); color:var(--ink-2)}
.f-fail .f-badge{background:color-mix(in srgb,var(--danger) 13%,transparent); color:var(--danger)}
.f-warn .f-badge{background:color-mix(in srgb,var(--warn) 15%,transparent); color:var(--warn)}
.f-ok .f-badge{background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok)}
.f-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:12px; margin:13px 0}
.f-key{display:block; color:var(--ink-3); margin-bottom:2px}
.f-grid strong{font-family:var(--mono); font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
.f-fix{margin:0; font-size:.94rem; color:var(--ink-2)}
.f-ok .f-fix{color:var(--ink-3)}
#ap-report{scroll-margin-top:88px}

.prose h2{margin-top:2.2em; font-size:clamp(1.35rem,1.05rem + 1.1vw,1.75rem)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.02rem}
.prose strong{color:var(--ink); font-weight:650}
.related{display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 0; padding:0; list-style:none}
.related a{display:inline-block; padding:9px 15px; border:1px solid var(--line-2); border-radius:99px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.related a:hover{background:var(--bg-2); border-color:var(--ink-3); text-decoration:none; color:var(--ink)}

/* ---------- ads: reserved space, labelled, deliberate ---------- */
.ad-slot{position:relative; margin:44px auto; border:1px solid var(--line); border-radius:var(--r);
  background:repeating-linear-gradient(45deg, var(--bg-2) 0 10px, var(--bg) 10px 20px);
  display:grid; place-items:center; min-height:106px}
.ad-slot::before{content:attr(aria-label); position:absolute; top:-8px; left:16px; padding:0 8px;
  background:var(--bg); font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--ink-3)}
.ad-slot > span{display:none}
.ad-slot[data-format="in-content"]{min-height:250px}
.ad-slot[data-format="sidebar"]{min-height:600px; margin-top:0}
.layout-sidebar{display:grid; grid-template-columns:minmax(0,1fr); gap:44px; align-items:start}
@media(min-width:1120px){ .layout-sidebar{grid-template-columns:minmax(0,1fr) 300px} }
@media(max-width:1119px){ .ad-slot[data-format="sidebar"]{display:none} }

/* ============================== FOOTER ============================== */
.site-footer{margin-top:70px; padding:0 0 40px}
.footer-inner{background:var(--deep); color:var(--deep-ink); border-radius:var(--r-lg);
  border:1px solid var(--line); padding:44px 40px 30px}
@media(max-width:600px){ .footer-inner{padding:34px 22px 24px} }
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:36px}
.footer-top h4{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-lit); margin:0 0 14px; font-weight:600}
.footer-top ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer-top a{color:rgba(250,250,250,.72); font-size:.92rem}
.footer-top a:hover{color:var(--deep-ink)}
.footer-blurb{color:rgba(250,250,250,.62); font-size:.92rem; max-width:34ch; margin:12px 0 0}
.footer-bottom{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom nav{display:flex; flex-wrap:wrap; gap:20px}
.footer-bottom a{color:rgba(250,250,250,.6); font-size:.86rem}
.footer-bottom small{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:rgba(250,250,250,.45)}
@media(max-width:760px){ .footer-top{grid-template-columns:1fr 1fr; gap:26px} .footer-top > div:first-child{grid-column:1/-1} }