/* Loftfile — consent banner + ad slots. Uses site tokens from style.css :root. */
:root{--ad-r:10px;--ad-label:#8f8a83;--consent-h:0px}

/* ---------- Ad slots ---------- */
.ad-zone{margin:64px auto 0;display:flex;flex-direction:column;align-items:center}
.ad-slot{position:relative;box-sizing:border-box;width:var(--ad-w);height:calc(var(--ad-h) + 22px);max-width:100%;contain:layout size paint;overflow:hidden}
.ad-slot--leader{--ad-w:728px;--ad-h:90px}
.ad-slot--rect{--ad-w:300px;--ad-h:250px}
.ad-label{display:block;height:22px;font:500 10.5px/22px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ad-label);text-align:center}
.ad-frame{width:100%;height:var(--ad-h);border-radius:var(--ad-r);background:#0f0f12;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-frame>ins,.ad-frame>iframe{display:block;width:100%;height:100%}
/* Before consent / after reject: zone takes zero space (it sits after all interactive UI, so nothing above it moves). */
.ad-zone[data-state=off]{display:none}
/* Consent granted: size reserved immediately, BEFORE the ad request, so fill never shifts layout. Unfilled slots keep their box. */
.ad-zone[data-state=on] .ad-frame:empty::after{content:'';width:28px;height:28px;border-radius:50%;border:1px solid var(--line)}
@media(max-width:760px){.ad-slot--leader{--ad-w:320px;--ad-h:100px}}

/* ---------- Consent banner ---------- */
.consent{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:900;box-sizing:border-box;width:min(720px,calc(100% - 24px));
 background:var(--panel);border:1px solid var(--line);border-top-color:rgba(201,169,110,.35);border-radius:var(--ad-r);
 box-shadow:0 24px 60px -20px rgba(0,0,0,.8);padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:center;
 animation:consent-in .35s var(--ease) both;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.consent[hidden]{display:none}
.consent h2{font:400 18px/1.25 Fraunces,serif;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.consent p{margin:0;color:var(--mute);font-size:13px;line-height:1.5}
.consent p a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.consent-actions{display:flex;gap:10px;align-items:center}
.consent-btn{box-sizing:border-box;min-width:112px;height:44px;padding:0 18px;border-radius:var(--ad-r);border:1px solid var(--gold);background:none;color:var(--gold2);
 font:600 14px Inter,system-ui,sans-serif;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.consent-btn:hover{background:var(--gold);color:#121214}
.consent-manage{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin:-8px 0 -10px;padding:0 2px;background:none;border:0;color:var(--mute);font:500 13px Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.consent-manage:hover{color:var(--gold2)}
.consent :focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
body.has-consent{padding-bottom:calc(var(--consent-h) + 32px)}
@keyframes consent-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:560px){
 .consent{grid-template-columns:1fr;bottom:12px;padding:16px}
 .consent-actions{display:grid;grid-template-columns:1fr 1fr}
 .consent-btn{min-width:0;width:100%}
}
@media(prefers-reduced-motion:reduce){.consent{animation:none}.consent-btn{transition:none}}

/* Manage preferences (inline expansion inside banner, still non-modal) */
.consent-prefs{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.consent-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;font-size:13px;color:var(--ink)}
.consent-row small{display:block;color:var(--mute);font-size:12px}
.switch{appearance:none;flex:0 0 auto;width:44px;height:26px;border-radius:13px;background:#26262b;border:1px solid var(--line);position:relative;cursor:pointer;margin:9px 0}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--mute);transition:transform .2s var(--ease)}
.switch:checked{background:rgba(201,169,110,.25);border-color:var(--gold)}
.switch:checked::after{transform:translateX(18px);background:var(--gold2)}
.switch:disabled{opacity:.6;cursor:default}
@media(prefers-reduced-motion:reduce){.switch::after{transition:none}}