/* ========== Tokens ========== */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#6b6b6b;
  --rule:#e9e9e9;
  --accent:#111111;
  --pillfg:#ffffff;
}

/* ========== Base ========== */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:Inter,system-ui,Arial,sans-serif;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none }
a:hover{ opacity:.8 }
img{ max-width:100%; display:block }
.wrap{ max-width:1100px; margin:auto; padding:0 20px }
.section-title{
  font-size:1.1rem; text-transform:uppercase;
  letter-spacing:.08em; margin:0 0 1rem; color:var(--muted)
}
.muted{ color:var(--muted) }

/* ========== Header & Nav ========== */
.site-head,.site-foot{ border-bottom:1px solid var(--rule) }
.site-foot{ border-top:1px solid var(--rule); border-bottom:0; margin-top:4rem }
.site-head{
  position:sticky; top:0; z-index:999;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px;
  backdrop-filter:saturate(120%) blur(8px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid var(--rule);
}
.logo{ font-weight:800; letter-spacing:.02em }
.nav{ display:flex; align-items:center; gap:18px }
.nav a{
  color:var(--muted);
  position:relative;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-size:0% 2px; background-position:0 100%;
  transition: color .15s ease, background-size .2s ease;
}
.nav a:hover, .nav a:focus-visible{
  color:var(--fg); background-size:100% 2px; outline:none;
}

/* Header logo clamp */
.site-head .nav-mark{
  width:40px; height:40px; object-fit:contain;
  display:block; border-radius:8px; border:1px solid var(--rule);
}
@media (max-width:820px){
  .site-head .nav-mark{ width:32px; height:32px }
}

/* Sticky header polish on scroll */
.site-head.is-stuck{
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(120%) blur(8px);
}

/* ---- Mobile header: lock height + alignment (fix iOS double-tall look) ---- */
@media (max-width: 820px){
  :root { --headH: 56px; }
  .site-head{
    height: var(--headH) !important;
    min-height: var(--headH) !important;
    padding: 0 14px !important;
    display:flex !important; align-items:center !important;
  }
  .site-head .logo, .site-head .nav{
    height:100% !important; display:flex !important; align-items:center !important;
  }
  .site-head .nav{ gap:14px; flex-wrap:nowrap; }
  .site-head .nav a{ line-height:1; }
  .nav-logo-link .nav-mark{ width:28px !important; height:28px !important; }

  @supports (padding: max(0px)){
    .site-head{
      padding-left: max(14px, env(safe-area-inset-left)) !important;
      padding-right: max(14px, env(safe-area-inset-right)) !important;
    }
  }
}
@media (min-width: 821px){
  .site-head{ height:auto; padding:16px 20px; }
}

/* ---------- Socials visibility logic ---------- */
/* Desktop: header icons visible, floating rail hidden */
.nav-social { display:flex; align-items:center; gap:12px; margin-left:12px; }
.nav-social .icon { width:28px; height:28px; border-radius:999px; }
.nav-social .icon svg { width:18px; height:18px; }
.social-rail { display:none !important; }

/* Mobile: hide header icons, show floating rail */
@media (max-width: 820px){
  .nav-social { display:none !important; }
  .social-rail {
    display:block !important;
    position:fixed; right:14px; bottom:14px; z-index:50;
  }
  .social-rail .icon-row{ display:flex; gap:8px }
  .social-rail .icon{
    width:34px; height:34px; border-radius:10px;
    backdrop-filter:saturate(120%) blur(6px);
    background:rgba(0,0,0,.06); border:1px solid var(--rule);
  }
}

/* ========== Hero (with right-side logo) ========== */
.hero{
  padding: clamp(44px, 6vw, 72px) 0 32px;
  border-bottom:1px solid var(--rule);
  background:
    radial-gradient(900px 350px at 20% -10%, rgba(255,90,31,.10), transparent 60%),
    radial-gradient(700px 280px at 80% -10%, rgba(255,255,255,.06), transparent 60%);
}
.hero-with-logo .wrap{ max-width:1040px; text-align:left }
.hero-split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap: clamp(16px, 3vw, 32px);
}
.hero-left{
  display:grid;
  grid-auto-rows:max-content;
  row-gap:10px;
  justify-items:start;
}
.hero-left .brand{
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin:0;
  line-height:1.1;
}
.hero-left .tag{ margin:0; line-height:1.35; color:var(--muted) }

.platforms{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:flex-start; margin-top:2px;
}
.platforms .icon{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--rule);
  background:var(--bg); color:var(--fg);
  transition:transform .15s ease, box-shadow .15s ease;
}
.platforms .icon:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.08) }
.platforms .icon svg{ width:18px; height:18px }

.hero-right{ display:flex; justify-content:center }
.hero-logo{
  width: min(260px, 32vw);
  height:auto; object-fit:contain;
  border:1px solid var(--rule); border-radius:16px; padding:10px;
  box-shadow:0 24px 50px rgba(0,0,0,.12);
  background-color: var(--bg);
  image-rendering: -webkit-optimize-contrast;
}

@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; gap:14px }
  .hero-with-logo .wrap, .hero-left{ text-align:center }
  .hero-left{ justify-items:center }
  .platforms{ justify-content:center }
  .hero-logo{ width:160px }
}

/* ========== Latest Episode section ========== */
.latest{ padding:36px 0; border-bottom:0; }
.feature{
  display:grid;
  grid-template-columns: 1fr clamp(220px, 24vw, 340px);
  align-items:start;
  gap:20px;
}
.feature-info h3{ margin-top:0 }
.feature-cover{
  width:100%; height:auto;
  border-radius:12px; margin-top:2px;
  box-shadow:0 10px 32px rgba(0,0,0,.18);
}
.player audio{ width:100%; border:1px solid var(--rule); border-radius:12px; padding:6px }

@media (min-width:1280px){
  .feature{ grid-template-columns:1fr 320px; }
}
@media (max-width:820px){
  .feature{ display:flex; flex-direction:column; gap:14px }
  .feature-cover{ order:-1; width:100% }
}

/* Read-more toggle inside Latest */
.more summary{ cursor:pointer; list-style:none; color:var(--muted); }
.more[open] summary{ color:var(--fg); }
.more summary::-webkit-details-marker{ display:none }
.more .toggle-label{ text-decoration:underline }
.more .latest-full{ margin-top:.5rem }

/* ========== Episode cards grid ========== */
.grid{ padding:36px 0 }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px }
.card{
  border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.1); border-color:transparent }
.card img{ aspect-ratio:16/9; object-fit:cover }
.card-body{ padding:14px }
.card-body h3{ margin:.25rem 0 .5rem; font-size:1.05rem }
.line-clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

/* Card hover “play” overlay */
a.card{ position:relative; overflow:hidden }
a.card:hover img{ transform:scale(1.02); filter:brightness(.95) }
a.card::after{
  content:"▶"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:30px; color:rgba(255,255,255,.95); text-shadow:0 6px 16px rgba(0,0,0,.25);
  opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
}
a.card:hover::after{ opacity:.9; transform:none }
@media (prefers-reduced-motion:reduce){
  a.card:hover img{ transform:none } a.card::after{ transition:none }
}

/* Blog list: no play overlay or zoom */
.blog-list a.card::after { content:none !important; }
.blog-list a.card:hover img { transform:none !important; filter:none !important; }

/* ========== Post / Blog page ========== */
.post{ padding:36px 0 }
.post-head{ border-bottom:1px solid var(--rule); padding-bottom:16px; margin-bottom:24px }
.post-head h1{ margin:0; font-size:clamp(1.6rem, 3.6vw, 2.2rem) }
.post-cover{
  display:block; width:100%; height:auto;
  max-width:720px; margin:16px auto; border-radius:12px;
}
.post .wrap{ max-width:900px }
.post-body{ max-width:720px; margin:0 auto }
.player.big{ max-width:720px; margin:12px auto 0 }
.listen-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.pill.small{ padding:8px 12px; font-size:.9rem; border-radius:999px }

/* ========== Episode detail layout (RSS pages) ========== */
.ep-hero{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(18px, 4vw, 36px);
  padding: 28px 0 0;
  align-items:center;
}
.ep-cover img{
  width:min(320px, 40vw);
  height:auto;
  border:1px solid var(--rule);
  border-radius:16px;
  box-shadow:0 24px 50px rgba(0,0,0,.12);
  display:block;
}
.ep-title{
  margin:0 0 .2rem;
  letter-spacing:-.01em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}
.ep-meta{ margin:.25rem 0 1rem }
.ep-audio{ width:100%; border:1px solid var(--rule); border-radius:12px; padding:6px; display:block }
.ep-body{ padding:18px 0 36px }
.ep-prose{ max-width:70ch }
.ep-actions{ margin-top:16px; display:flex; gap:16px; align-items:center; flex-wrap:wrap }

@media (max-width: 900px){
  .ep-hero{ grid-template-columns:1fr }
  .ep-cover{ order:-1; display:flex; justify-content:center }
  .ep-cover img{ width:200px }
  .ep-prose{ max-width:none }
}

/* ========== About page ========== */
.about .wrap{ max-width:1000px; padding:40px 20px }
.about-wrap{ display:grid; grid-template-columns:1.4fr .8fr; gap:32px }
.about-main h1{ margin:0 0 .5rem; letter-spacing:-.01em }
.prose p{ margin:1rem 0 }
.prose a{ text-decoration:underline; text-underline-offset:2px }
.prose ul,.prose ol{ margin:.75rem 0 .75rem 1.25rem }
.prose blockquote{ margin:1rem 0; padding:.75rem 1rem; border-left:3px solid var(--rule); background:rgba(0,0,0,.03); border-radius:8px }
.about-cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap }
.pill.outline{ background:transparent; color:var(--fg); border-color:var(--fg) }
.pill.outline:hover{ opacity:.9; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.08) }
.about-aside{ align-self:start; display:grid; gap:14px }
.about-logo{
  width:100%; max-width:280px;
  border:1px solid var(--rule); border-radius:12px; padding:10px;
}
.about-photo{ width:100%; border-radius:12px; border:1px solid var(--rule) }
@media (min-width:1200px){ .about-logo{ max-width:320px } }
@media (max-width:900px){
  .about-wrap{ grid-template-columns:1fr }
  .about-aside{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .about-logo{ max-width:100% }
}

/* ========== Episodes page (season groups + filter) ========== */
.season{
  margin:12px 0 20px;
  border:1px solid var(--rule);
  border-radius:12px;
  background:var(--bg);
  padding:6px 10px;
}
.season > summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:baseline; gap:8px;
  font-weight:600;
}
.season > summary::-webkit-details-marker{ display:none }
.season[open]{ padding-bottom:12px }
.season .cards{ margin-top:12px }

.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin:12px 0 8px;
}
.filter-bar .spacer{ flex:1 1 auto }
.filter-bar input[type="search"], .filter-bar select{
  padding:10px 12px; border:1px solid var(--rule);
  border-radius:10px; background:var(--bg); color:var(--fg);
  font:inherit;
}
.filter-bar button.pill.outline{ padding:8px 12px }

/* ========== Share buttons ========== */
.share-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.share-row .pill{ display:inline-flex; align-items:center; justify-content:center; line-height:1 }
button.pill{
  appearance:none; -webkit-appearance:none; font:inherit; font-weight:600;
  padding:10px 14px; border-radius:999px; border-width:1px;
}

/* ========== Social rail base (desktop hidden by default above) ========== */
.social-rail{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:50; pointer-events:none;
}
.social-rail .icon-row{
  display:flex; flex-direction:column; gap:10px; margin:0; pointer-events:auto;
}
.social-rail .icon{
  width:40px; height:40px; border-radius:12px;
  backdrop-filter:saturate(120%) blur(6px);
  background:rgba(0,0,0,.06); border:1px solid var(--rule);
}

/* ========== 404 ========== */
.nf{ padding: clamp(64px,8vw,96px) 0 96px; text-align:center }
.nf h1{ margin:0 0 .5rem; letter-spacing:-.01em; font-size:clamp(1.8rem,4vw,2.4rem) }
.nf .btns{ margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* ========== Accessibility: skip link ========== */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus-visible{
  left:16px; top:16px; width:auto; height:auto;
  padding:8px 12px; border:1px solid var(--rule); border-radius:8px;
  background:var(--bg); color:var(--fg); z-index:1000;
  box-shadow:0 6px 16px rgba(0,0,0,.08); outline:none;
}

/* ========== Dark mode tweaks ========== */
@media (prefers-color-scheme:dark){
  :root{ --bg:#0f0f10; --fg:#f5f5f5; --muted:#9aa0a6; --rule:#2a2c2e; --accent:#ffffff; --pillfg:#111 }
  .site-head{ background:rgba(15,16,16,.55) }
  .site-head.is-stuck{ background:rgba(15,16,16,.65); box-shadow:0 10px 24px rgba(0,0,0,.35) }
  .card{ background:#1a1c1e; border-color:#2a2c2e }
  .site-head,.site-foot{ border-color:#2a2c2e }
  .social-rail .icon{ background:rgba(255,255,255,.08) }
}
/* Hero + header socials: show only the icons (keep sr-only for a11y) */
.hero .platforms a span:not(.sr-only),
.nav-social a span:not(.sr-only){
  display: none !important;
}

/* Belt-and-suspenders: zero out any stray inline text */
.hero .platforms,
.nav-social{
  font-size: 0;
  line-height: 0;
}

/* Make sure SVGs still size nicely */
.hero .platforms a svg,
.nav-social a svg{
  width: 18px;
  height: 18px;
  /* reset line-height just for the icon box */
  line-height: 1;
}
/* --- Episode page: icon-only platform links (hide text labels) --- */

/* Hide any visible text inside social/subscribe links on episode pages */
.episode-detail .icon-row a span:not(.sr-only),
.episode-detail .platforms a span:not(.sr-only),
.ep-actions .icon-row a span:not(.sr-only),
.ep-actions .platforms a span:not(.sr-only) {
  display: none !important;
}

/* Collapse stray text nodes if the include outputs plain text */
.episode-detail .icon-row,
.episode-detail .platforms,
.ep-actions .icon-row,
.ep-actions .platforms {
  font-size: 0;
  line-height: 0;
}

/* Make sure SVGs keep a sane size */
.episode-detail .icon-row a svg,
.episode-detail .platforms a svg,
.ep-actions .icon-row a svg,
.ep-actions .platforms a svg {
  width: 18px;
  height: 18px;
  line-height: 1;
}
/* --- Normalize platform icon pills (hero + header) --- */

/* Perfect circles + remove any baseline/whitespace wobble */
.platforms .icon,
.nav-social .icon{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  font-size: 0;         /* kill inline text width */
  line-height: 0;       /* kill baseline wiggle */
  padding: 0;           /* no padding; use SVG size instead */
}

/* Make every glyph the same visual size and truly centered */
.platforms .icon > svg,
.platforms .icon > img,
.nav-social .icon > svg,
.nav-social .icon > img{
  width: 20px;          /* 18–20px looks best in a 40px pill */
  height: 20px;
  display: block;       /* avoids inline-img descender space */
}

/* If any SVG ships with hard-coded black fills/strokes, inherit our color */
.platforms .icon [fill="#000"],
.platforms .icon [fill*="#000"],
.platforms .icon [stroke="#000"],
.platforms .icon [stroke*="#000"],
.nav-social .icon [fill="#000"],
.nav-social .icon [fill*="#000"],
.nav-social .icon [stroke="#000"],
.nav-social .icon [stroke*="#000"]{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Subtle hover/focus polish (keeps icons crisp) */
.platforms .icon:hover,
.nav-social .icon:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.platforms .icon:focus-visible,
.nav-social .icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05), 0 0 0 6px rgba(0,0,0,.08);
}

/* Dark mode surface tweak so the pills don't glow */
@media (prefers-color-scheme: dark){
  .platforms .icon,
  .nav-social .icon{
    background: rgba(255,255,255,.06);
    border-color: var(--rule);
  }
}
/* Episode page: make the social icons a bit bigger */
.ep-actions .icon-row{
  display: flex;              /* in case the include renders a plain row */
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.ep-actions a.icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;        /* keeps them slightly rounded */
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--rule);
}

.ep-actions a.icon svg{
  width: 22px;
  height: 22px;
}

/* Optionally a touch larger on phones */
@media (max-width: 820px){
  .ep-actions a.icon{ width: 48px; height: 48px; }
  .ep-actions a.icon svg{ width: 24px; height: 24px; }
}
/* Mobile floating rail: perfectly center the icons */
.social-rail .icon-row{
  display: flex;
  gap: 8px;
  align-items: center;
}

.social-rail .icon{
  display: inline-grid;        /* grid = easy centering */
  place-items: center;         /* center both axes */
  line-height: 1;              /* kill baseline wiggle */
  padding: 0;                  /* no extra pad */
  box-sizing: border-box;
}

/* Center the actual glyph */
.social-rail .icon svg,
.social-rail .icon img{
  display: block;              /* remove baseline */
  width: 18px;
  height: 18px;
}

/* Your mobile size (keep what you already had, just centering applies too) */
@media (max-width: 820px){
  .social-rail .icon{ width: 34px; height: 34px; border-radius: 10px; }
  .social-rail .icon svg, .social-rail .icon img{ width: 18px; height: 18px; }
}
/* Mobile: float the social rail lower-right instead of center */
@media (max-width: 820px){
  :root{
    /* adjust this to taste: 40–120px usually works */
    --rail-offset: 72px;
  }

  .social-rail{
    position: fixed;
    top: auto !important;
    bottom: calc(var(--rail-offset) + env(safe-area-inset-bottom));
    right: max(14px, env(safe-area-inset-right));
    transform: none !important;
    z-index: 50;
  }

  /* keep the rail vertical; remove this if you prefer a row */
  .social-rail .icon-row{
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  /* make sure icons are perfectly centered inside their pills */
  .social-rail .icon{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}
/* Center footer text across the site */
.site-foot{
  display: flex;              /* robust centering regardless of child width */
  justify-content: center;
  padding: 20px 0;            /* keeps your existing spacing */
  text-align: center;
}
.site-foot p{ margin: 0; }    /* kill default paragraph margins */

/* unify page header label across layouts */
.page-title { color: #a7a7a7; font-size: 0.95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.page-title + hr { height:1px; border:0; background:#262626; margin: .75rem 0 1.25rem; }

/* ----- Unified page & form styling ----- */

/* Card wrapper so the form matches your "card" feel */
.form-card{
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg);
}

/* Grid for name/email on desktop */
.contact-form .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 820px){
  .contact-form .form-grid{ grid-template-columns: 1fr; }
}

/* Inputs/selects/textarea look like the filter/search controls */
.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  line-height: 1.4;
}

.contact-form .label{
  display: inline-block;
  font-weight: 600;
  margin: 10px 0 6px;
}
.contact-form label{ display:block; }

/* Keep the button style in-brand */
.contact-form .pill{ margin-top: 10px; }

/* Keep page content aligned with article reading width */
.post .post-body { max-width: 720px; margin: 0 auto; }

/* Optional helper to center narrower blocks */
.narrow { max-width: 720px; margin: 0 auto; }

/* Contact card */
.form-card{
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg);
}

/* Fields + labels */
.field { margin-bottom: 12px; }
.field label{
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Make inputs/selects/textarea full width and match site chrome */
.contact-form input,
.contact-form select,
.contact-form textarea{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  line-height: 1.4;
}

/* Two-column row for name/email on desktop */
.form-grid.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 820px){
  .form-grid.two{ grid-template-columns: 1fr; }
}

/* Button spacing */
.contact-form .pill{ margin-top: 6px; }

/* Tiny text helper */
.small { font-size: .95rem; }

/* Episodes page: add space under the sticky header */
section.episodes{
  padding-top: clamp(28px, 5vw, 56px);   /* tweak to taste */
}

/* Keep the title snug to that padding (no extra gap stacking) */
.episodes .section-title{ margin-top: 0; }

/* --- Shop page (scoped) --- */
.shop .wrap { max-width: 1100px; margin: 0 auto; }
.shop .shop-intro { margin: 0.75rem 0 1.25rem; color: var(--fg); opacity: 0.9; }
.shop .shop-cta { margin: 1rem 0 1.5rem; }
.shop .btn {
  display: inline-block; padding: 0.75rem 1.1rem; border-radius: 9999px;
  background: var(--accent); color: #111; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.shop .btn:hover { filter: brightness(0.95); }

.shop .shop-grid {
  display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 900px) {
  .shop .shop-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 600px) {
  .shop .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

.shop .shop-card {
  grid-column: span 4;
  display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden;
  background: var(--bg); border: 1px solid var(--rule); text-decoration: none; color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.shop .shop-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }

.shop .shop-card-art {
  aspect-ratio: 16 / 9; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0)),
  url('/assets/img/shop/placeholder.jpg') center/cover no-repeat;
}
.shop .shop-card-body { padding: 0.9rem 1rem 1rem; }
.shop .shop-card h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.shop .shop-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.shop .embed-tip { margin-top: 1rem; }
.shop .embed-tip summary { cursor: pointer; color: var(--muted); }