/* ============================================================
   BEERS N CODE — SOFT / MODERN LAYER
   Loaded AFTER brand.css on every page. Keeps the palette
   (gold / navy / green / cream) but trades the brutalist
   hard-offset shadows + sharp corners for rounded corners,
   soft floating shadows, pill buttons/tags, and adds floating
   decorative shapes + cover-art placeholder helpers.
   ============================================================ */

:root{
  --radius:14px;
  --shadow:0 14px 30px -16px rgba(15,23,42,.26);
  --shadow-lg:0 26px 52px -20px rgba(15,23,42,.32);
  --soft-border:1.5px solid rgba(30,41,59,.10);
}

/* ---- Buttons → pills with a soft lift ---- */
.btn{ border-radius:999px; border-width:2px; box-shadow:0 12px 24px -12px rgba(30,41,59,.55); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -14px rgba(30,41,59,.6); }
.btn:active{ transform:translateY(-1px); box-shadow:0 10px 20px -12px rgba(30,41,59,.55); }
.btn--ghost{ box-shadow:none; }
.btn--sm{ box-shadow:0 8px 18px -10px rgba(30,41,59,.5); }
.dark .btn--ghost,
.page-hero .btn--ghost{ box-shadow:none; border-color:rgba(248,250,252,.6); }
.dark .btn--ghost:hover,
.page-hero .btn--ghost:hover{ box-shadow:0 16px 30px -14px rgba(255,255,255,.3); }

/* ---- Tags / chips → pills ---- */
.tag{ border-radius:999px; padding:.34em .9em; }
.chip-btn{ box-shadow:0 10px 20px -12px rgba(30,41,59,.45); }
.chip-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -14px rgba(30,41,59,.5); }
.chip-btn.active{ box-shadow:0 12px 24px -12px rgba(201,154,18,.55); }

/* ---- Cards → rounded + soft, lighter borders ---- */
.card,
.pcard, .feat-post, .feat-card,
.pillar, .block, .form-card, .rcard, .author-box,
.code-card, .faq-item, .ep-row{
  border-radius:20px;
  border:var(--soft-border);
  box-shadow:0 20px 44px -22px rgba(15,23,42,.34);
}
.card--hover:hover,
.pcard:hover, .rcard:hover, .ep-row:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 56px -22px rgba(15,23,42,.42);
}

/* dark cards keep depth but go soft */
.dark .card,
.feat-card{
  border:1.5px solid rgba(255,255,255,.08);
  box-shadow:0 28px 56px -22px rgba(0,0,0,.7);
}

/* code blocks + form fields */
.code-block{ border-radius:18px; box-shadow:0 20px 44px -22px rgba(15,23,42,.4); }
.field input, .field textarea, .field select{ border:var(--soft-border); border-radius:14px;
  background:var(--card); box-shadow:inset 0 1px 2px rgba(15,23,42,.04); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(244,211,94,.28); }

/* social chips on contact */
.soc a{ border:var(--soft-border); border-radius:999px; box-shadow:0 8px 18px -10px rgba(30,41,59,.4); }
.soc a:hover{ background:var(--gold); transform:translateY(-3px); box-shadow:0 14px 24px -12px rgba(30,41,59,.5); }

/* nav toggle */
.nav-toggle{ border-radius:14px; border-width:2px; box-shadow:0 8px 18px -10px rgba(30,41,59,.5); }

/* play buttons — keep gold identity, soft shadow */
.play{ box-shadow:0 12px 22px -8px rgba(30,41,59,.5) !important; }
.play:hover{ transform:translateY(-3px) !important; box-shadow:0 18px 30px -10px rgba(30,41,59,.55) !important; }

/* placeholders → rounded soft */
.ph{ border-radius:18px; border:var(--soft-border); box-shadow:0 20px 44px -22px rgba(15,23,42,.30); }

/* statement highlight chip rounds off */
.statement .big em{ border-radius:8px; }

/* ============================================================
   FLOATING DECORATIVE SHAPES  (use inside any positioned section)
   ============================================================ */
.shapes{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.shapes .s{ position:absolute; }
.s.ring{ border:3px solid currentColor; border-radius:50%; background:transparent; }
.s.disc{ border-radius:50%; }
.s.rsq{ border-radius:22px; }
.s.blob{ border-radius:46% 54% 57% 43% / 49% 42% 58% 51%; }
.s.dotgrid{ background-image:radial-gradient(currentColor 2.4px, transparent 2.6px); background-size:20px 20px; }
@media(prefers-reduced-motion:no-preference){
  .s.float{ animation:bnc-bob 7s ease-in-out infinite; }
  .s.float.alt{ animation-duration:9s; animation-direction:alternate; }
}
@keyframes bnc-bob{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-16px) rotate(var(--r,0deg)); } }

/* keep page content above hero shapes */
.page-hero .wrap{ z-index:2; }

/* ============================================================
   COVER-ART PLACEHOLDER HELPERS  (episodes / blog covers)
   ============================================================ */
.ep-cover{ position:relative; border-radius:16px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(140deg,#1E293B,#2B3A52); }
.ep-cover::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px); }
.ep-cover .epnum{ font-family:var(--font-display); font-weight:900; line-height:.86; text-align:center;
  font-size:clamp(2.6rem,7vw,5rem); color:rgba(244,211,94,.22); letter-spacing:-.03em; position:relative; z-index:1; }
.ep-cover .cv-tag{ position:absolute; left:12px; bottom:12px; z-index:2; font-family:var(--font-mono);
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(248,250,252,.7);
  border:1.5px solid rgba(248,250,252,.3); border-radius:999px; padding:.3em .7em; }
.ep-cover.cv-gold{ background:linear-gradient(140deg,#F4D35E,#E7B93C); }
.ep-cover.cv-gold .epnum{ color:rgba(30,41,59,.28); }
.ep-cover.cv-gold .cv-tag{ color:rgba(30,41,59,.66); border-color:rgba(30,41,59,.32); }
.ep-cover.cv-gold::after{ background:repeating-linear-gradient(45deg, rgba(30,41,59,.06) 0 2px, transparent 2px 13px); }
.ep-cover.cv-green{ background:linear-gradient(140deg,#3E8E7E,#2F6E62); }
.ep-cover.cv-green .epnum{ color:rgba(255,255,255,.26); }
.ep-cover.cv-navy{ background:linear-gradient(140deg,#1E293B,#324A6D); }
.ep-cover.cv-navy .epnum{ color:rgba(244,211,94,.30); }