/*
Theme Name: Brainstorm Books and Games
Theme URI: https://brainstormbooksandgames.com
Author: Brainstorm Books and Games
Description: Block theme for Brainstorm Books and Games. The storm scene, the arch cards and the gold-on-slate palette are ported from the hand-built static site; the design lives here and in theme.json rather than in per-page customisations, so "Reset" in the editor is always a real recovery path.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brainstorm
*/

/* Brainstorm Books and Games
   Palette is lifted from the logo's interior: a cream-gold sky over slate
   water. The page is that scene expanded — night sky above, storm horizon
   behind the product grid, water below. Every colour below is either the
   logo's own or a darkened step toward it. */

:root {
  --void:      #05070C;
  --night:     #0B0D14;
  --deep:      #141827;   /* card interior */
  --stone:     #1C2133;
  --line:      #2B2E3D;
  --edge:      #3A4056;   /* arch frame */
  --slate:     #5E7A96;   /* the logo's water */
  --ash:       #9BA3B8;
  --bone:      #E8DFC8;
  --cream:     #F2E8B8;   /* the logo's sky */
  --gold:      #C9A45C;
  --gold-hot:  #E8C078;

  --font-display: "Chakra Petch", "Trebuchet MS", sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Share Tech Mono", ui-monospace, "Courier New", monospace;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--gold); }

:focus-visible {
  outline: 2px solid var(--gold-hot);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--void);
  padding: .6rem 1rem; z-index: 100;
  font-family: var(--font-mono);
}
.skip:focus { left: 1rem; top: 1rem; }

.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;
}

/* ---------------------------------------------------------------- scene
   Fixed backdrop: the logo's storm, full-bleed. Layers stack from the
   top of the sky down to the water. */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* The storm is decoration and must never win against body text. This veil
   sits over every scene layer, weighted toward the horizon where the
   backdrop is brightest, so card hooks keep their contrast at any scroll
   position. */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5,7,12,.12)  0%,
    rgba(5,7,12,.26) 50%,
    rgba(5,7,12,.58) 70%,
    rgba(5,7,12,.46) 80%,
    rgba(5,7,12,.24) 100%);
}

.scene__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      var(--void)   0%,
      #080B12      20%,
      #0E1320      42%,
      #141B27      56%,
      #1B2637      64%,
      #2C3D53    68.6%,
      #3E5470    70.1%,   /* horizon haze, deliberately soft-edged so the
                             fixed backdrop does not saw across the cards */
      #1B2634    71.4%,   /* water begins */
      #0E1521      82%,
      #070A11     100%);
}

/* Stars only live in the upper sky, so the mask fades them out before
   the horizon. */
.scene__stars {
  position: absolute;
  inset: 0 0 32% 0;
  background-image:
    radial-gradient(1.1px 1.1px at 12% 18%,  rgba(242,232,184,.85), transparent),
    radial-gradient(1px 1px   at 28% 8%,     rgba(242,232,184,.6),  transparent),
    radial-gradient(1.3px 1.3px at 43% 26%,  rgba(255,255,255,.7),  transparent),
    radial-gradient(1px 1px   at 61% 12%,    rgba(242,232,184,.55), transparent),
    radial-gradient(1.2px 1.2px at 74% 30%,  rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px   at 88% 16%,    rgba(242,232,184,.5),  transparent),
    radial-gradient(1.4px 1.4px at 20% 52%,  rgba(255,255,255,.38), transparent),
    radial-gradient(1px 1px   at 8% 40%,     rgba(255,255,255,.45), transparent),
    radial-gradient(1.1px 1.1px at 35% 48%,  rgba(242,232,184,.4),  transparent),
    radial-gradient(1px 1px   at 55% 38%,    rgba(255,255,255,.5),  transparent),
    radial-gradient(1.2px 1.2px at 80% 46%,  rgba(242,232,184,.42), transparent),
    radial-gradient(1px 1px   at 95% 34%,    rgba(255,255,255,.4),  transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  opacity: .9;
}

/* The triangulated network from inside the logo's brain, drawn across the
   sky as a constellation. Brand and backdrop become the same object. */
.scene__lattice {
  position: absolute;
  top: 4%; left: 50%;
  width: min(1500px, 130vw);
  transform: translateX(-50%);
  opacity: .11;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
}
.scene__lattice line { stroke: var(--slate); stroke-width: 1; }
.scene__lattice circle { fill: var(--cream); }

/* Storm glow sitting on the horizon, behind the grid. */
.scene__glow {
  position: absolute;
  left: 50%; top: 70.2%;
  width: 160vw; height: 46vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(242,232,184,.17) 0%,
    rgba(201,164,92,.09) 26%,
    rgba(94,122,150,.06) 48%,
    transparent 70%);
  transition: opacity .9s ease;
}

/* Water: horizontal banding plus a cream column reflecting the horizon. */
.scene__water {
  position: absolute;
  inset: 70.9% 0 0 0;
  background-image:
    linear-gradient(180deg, rgba(242,232,184,.13) 0%, rgba(242,232,184,.03) 14%, transparent 42%),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.045) 1px,
      transparent 1px,
      transparent 7px);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}

/* Lightning. Three cells fire at random intervals from site.js. */
.bolt {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
}
.bolt--a { left: 12%; top: 52%; width: 46vw; height: 26vh;
  background: radial-gradient(ellipse at center, rgba(226,214,168,.75), rgba(94,122,150,.22) 45%, transparent 72%); }
.bolt--b { right: 6%; top: 58%; width: 40vw; height: 22vh;
  background: radial-gradient(ellipse at center, rgba(255,248,214,.7), rgba(120,150,180,.2) 45%, transparent 72%); }
.bolt--c { left: 42%; top: 44%; width: 34vw; height: 30vh;
  background: radial-gradient(ellipse at center, rgba(210,224,240,.6), rgba(94,122,150,.18) 45%, transparent 72%); }

.bolt.is-striking { animation: strike 1.05s ease-out; }

@keyframes strike {
  0%   { opacity: 0; }
  4%   { opacity: .95; }
  9%   { opacity: .12; }
  14%  { opacity: .8; }
  22%  { opacity: .3; }
  30%  { opacity: .55; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------- shell */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5,7,12,.82);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
  padding-block: .55rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--bone);
}
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name {
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 2.2vw, .84rem);
  letter-spacing: .16em;
  color: var(--bone);
  white-space: nowrap;
}

/* Below this the wordmark and the nav fight for the same row; the mark
   alone still identifies the site. */
@media (max-width: 559px) {
  .brand__name { display: none; }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2.4vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
}
.nav a {
  color: var(--ash);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--bone); border-bottom-color: var(--edge); }
.nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--gold); }
.nav .nav__buy { color: var(--gold); }
.nav .nav__buy:hover { color: var(--gold-hot); border-bottom-color: var(--gold); }

/* ---------------------------------------------------------------- hero */

.hero {
  text-align: center;
  padding-block: clamp(2.2rem, 7vw, 4.2rem) clamp(1.4rem, 4vw, 2rem);
}
.hero__logo {
  width: clamp(190px, 42vw, 330px);
  margin-inline: auto;
  filter: drop-shadow(0 6px 28px rgba(5,7,12,.9));
}
.hero__line {
  margin: 1.1rem auto 0;
  max-width: 34ch;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color: var(--ash);
}
.hero__line em { color: var(--cream); font-style: normal; }

/* ---------------------------------------------------- kickstarter banner */

.ks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-block: clamp(1rem, 3vw, 1.6rem);
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(28,22,16,.92), rgba(15,13,20,.92));
  border: 1px solid var(--gold);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ks:hover {
  border-color: var(--gold-hot);
  box-shadow: 0 0 0 1px rgba(232,192,120,.35), 0 12px 34px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.ks__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--gold);
}
.ks__title {
  display: block;
  margin-top: .2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 3vw, 1.22rem);
  color: var(--bone);
  line-height: 1.3;
}
.ks__cta {
  flex: none;
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .06em;
  background: var(--gold);
  color: var(--void);
  padding: .6rem 1.1rem;
}
.ks:hover .ks__cta { background: var(--gold-hot); }

/* ---------------------------------------------------------------- games */

.section {
  padding-block: clamp(1.4rem, 4vw, 2.2rem);
}
.section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  letter-spacing: .01em;
  color: var(--cream);
}
.section__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.section__note {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--ash);
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.9rem, 2.6vw, 1.6rem);
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The arch. Top radius is half the card width so the curve is a true
   semicircle at the 5:7 aspect the covers are cut to. */
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card__arch {
  display: block;
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--deep);
  border: 2px solid var(--edge);
  border-radius: 50% 50% 5px 5px / 30% 30% 4px 4px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.card__art {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  /* covers are loud and clash with each other; damping them a touch is
     what lets nine of them sit on one page as a set */
  filter: saturate(.84) contrast(1.03) brightness(.92);
  transition: filter .3s ease, transform .5s ease;
}
/* vignette unifies wildly different cover art under one light */
.card__arch::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 42%, transparent 42%, rgba(5,7,12,.55) 100%),
    linear-gradient(180deg, transparent 55%, rgba(5,7,12,.6) 100%);
  pointer-events: none;
}
.card:hover .card__arch,
.card:focus-visible .card__arch {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201,164,92,.3), 0 16px 40px rgba(0,0,0,.55);
  transform: translateY(-4px);
}
.card:hover .card__art,
.card:focus-visible .card__art {
  filter: saturate(1.04) contrast(1.03) brightness(1);
  transform: scale(1.03);
}

.card__name {
  display: block;
  margin: .7rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.92rem, 2.3vw, 1.02rem);
  line-height: 1.25;
  color: var(--bone);
}
.card:hover .card__name { color: var(--cream); }
.card__hook {
  display: block;
  margin: .22rem 0 0;
  font-size: clamp(.8rem, 2vw, .88rem);
  line-height: 1.45;
  color: var(--ash);
}

/* Downcast has a wordmark, not a cover. Give it a plate of its own so the
   gap reads as deliberate. */
.card__plate {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  padding: 12% 7% 14%;
  /* light rising from the floor of the arch — the game is called Downcast
     and the pitch is "rise above", so the glow comes from below */
  background:
    radial-gradient(ellipse 90% 46% at 50% 104%, rgba(201,164,92,.34), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 30%, rgba(94,122,150,.13), transparent 68%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.022) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #0C0D13 30%, #1A1712 100%);
}
.card__plate img {
  width: 100%;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.85));
}

/* The mystery slot. Dashed, unlit, and never finished. */
.card--mystery .card__arch {
  border-style: dashed;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(94,122,150,.12), transparent 65%),
    var(--night);
}
.card--mystery .card__arch::after { background: none; }
.card--mystery .card__glyph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  letter-spacing: .2em;
  color: var(--slate);
  transition: color .25s ease;
}
.card--mystery:hover .card__arch { border-color: var(--slate); }
.card--mystery:hover .card__glyph { color: var(--cream); }

/* ---------------------------------------------------------- product page */

.product {
  display: grid;
  gap: clamp(1.4rem, 5vw, 3rem);
  padding-block: clamp(1.4rem, 4vw, 2.4rem);
}
@media (min-width: 860px) {
  .product { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; }
}

.product__cover {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--deep);
  border: 2px solid var(--edge);
  border-radius: 50% 50% 5px 5px / 30% 30% 4px 4px;
}
@media (min-width: 860px) { .product__cover { position: sticky; top: 84px; } }
.product__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.product__cover .card__plate img { width: 84%; height: auto; object-fit: contain; }

.product__eyebrow {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .18em;
  color: var(--gold);
  margin: 0 0 .4rem;
}
.product__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--cream);
}
.product__sub {
  margin: .5rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: var(--slate);
}
.product__hook {
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 2.6vw, 1.16rem);
  color: var(--bone);
  border-left: 2px solid var(--gold);
  padding-left: .9rem;
}
.product__body > p { margin: 1rem 0 0; color: var(--ash); }
.product__body > p strong { color: var(--bone); font-weight: 600; }

.spec {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.spec li {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ash);
  border: 1px solid var(--line);
  padding: .3rem .6rem;
}

.inside {
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}
.inside li {
  position: relative;
  padding-left: 1.3rem;
  margin-top: .3rem;
  line-height: 1.5;
  color: var(--ash);
}
.inside li::before {
  content: "◆";
  position: absolute; left: 0;
  color: var(--gold);
  font-size: .7em;
  top: .45em;
}

.buys {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.7rem;
}
.buy {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-decoration: none;
  padding: .68rem 1.1rem;
  border: 1px solid var(--edge);
  color: var(--bone);
  background: rgba(20,24,39,.7);
  transition: border-color .2s, color .2s, background .2s;
}
.buy:hover { border-color: var(--slate); color: var(--cream); background: var(--stone); }
.buy--primary { background: var(--gold); color: var(--void); border-color: var(--gold); }
.buy--primary:hover { background: var(--gold-hot); border-color: var(--gold-hot); color: var(--void); }

.subhead {
  margin: 2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--cream);
}

/* Move between titles without going back to the grid every time. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.pager a { color: var(--ash); text-decoration: none; }
.pager a:hover { color: var(--cream); }
.pager__all { color: var(--gold); }
.pager__all:hover { color: var(--gold-hot); }

/* ---------------------------------------------------------------- prose */

.page-head { padding-block: clamp(1.8rem, 5vw, 3rem) 0; }
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  color: var(--cream);
  line-height: 1.1;
}
.page-lede {
  margin: .8rem 0 0;
  max-width: 60ch;
  font-size: clamp(1.02rem, 2.6vw, 1.16rem);
  color: var(--ash);
}

.prose { max-width: 66ch; padding-block: clamp(1.2rem, 4vw, 2rem); }
.prose p { margin: 1rem 0 0; color: var(--ash); }
.prose h2 {
  margin: 2.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  color: var(--cream);
}
.prose a { color: var(--gold); }
.prose a:hover { color: var(--gold-hot); }

/* where to buy */
.shops {
  display: grid;
  gap: clamp(.9rem, 2.5vw, 1.4rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1rem, 3vw, 1.6rem);
}
/* Four storefronts: 2x2, then a single row. auto-fit left an orphan. */
@media (min-width: 560px) { .shops { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .shops { grid-template-columns: repeat(4, 1fr); } }
.shop {
  display: block;
  padding: 1.3rem;
  background: rgba(20,24,39,.72);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .2s, transform .2s, background .2s;
}
.shop:hover { border-color: var(--gold); transform: translateY(-3px); background: var(--stone); }
.shop__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--cream);
}
.shop__what { margin: .35rem 0 0; font-size: .92rem; color: var(--ash); }

/* ---------------------------------------------------------------- footer */

.footer {
  margin-top: clamp(2rem, 6vw, 3.5rem);
  border-top: 1px solid var(--line);
  background: rgba(5,7,12,.7);
}
.footer__in {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.6rem;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  font-family: var(--font-mono);
  font-size: .8rem;
}
.footer__links a { color: var(--ash); text-decoration: none; }
.footer__links a:hover { color: var(--cream); }
.footer__fine {
  width: 100%;
  font-size: .78rem;
  color: #6E748A;
  border-top: 1px solid var(--line);
  padding-block: 1rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .bolt { display: none; }
  .scene__glow { opacity: .85; }
}

/* ====================================================================
   WordPress layer
   Everything above is the authored design, unchanged. Everything below
   exists only because WordPress renders the same design through blocks,
   an admin bar and an editor canvas.
   ==================================================================== */

/* The masthead is sticky at top:0, which the logged-in admin bar would
   otherwise sit on top of. Roger is nearly always logged in, so getting
   this wrong makes the nav look broken to the one person who edits. */
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .masthead { top: 46px; }
}

/* Block wrappers must not reintroduce the horizontal padding .wrap
   already applies, or content sits in a double gutter. */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks { overflow-x: clip; }

/* Core blocks used inside prose areas inherit the authored prose rules
   rather than carrying their own. */
.prose > .wp-block-heading { margin: 2.2rem 0 0; }
.prose > p:first-child,
.prose > .wp-block-heading:first-child { margin-top: 0; }

.wp-block-list { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--ash); }
.wp-block-list li { margin-top: .3rem; line-height: 1.5; }

.wp-block-quote {
  margin: 1.4rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--gold);
  color: var(--bone);
  font-style: normal;
}

/* Buttons: match .buy so a core Buttons block Roger drops into a page is
   indistinguishable from the generated store links. */
.wp-block-button__link {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  border-radius: 0;
  padding: .68rem 1.1rem;
  border: 1px solid var(--edge);
  color: var(--bone);
  background: rgba(20,24,39,.7);
  transition: border-color .2s, color .2s, background .2s;
}
.wp-block-button__link:hover {
  border-color: var(--slate);
  color: var(--cream);
  background: var(--stone);
}
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--gold);
  color: var(--void);
  border-color: var(--gold);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--gold-hot);
  border-color: var(--gold-hot);
  color: var(--void);
}

/* Contact form (WPForms) inherits the palette instead of shipping its
   own light-theme defaults onto a dark page. */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
  background: rgba(20,24,39,.8) !important;
  border: 1px solid var(--line) !important;
  color: var(--bone) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
}
.wpforms-container input:focus,
.wpforms-container textarea:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}
.wpforms-container .wpforms-field-label { color: var(--bone) !important; }
.wpforms-container button[type="submit"] {
  font-family: var(--font-mono) !important;
  letter-spacing: .06em !important;
  background: var(--gold) !important;
  color: var(--void) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: .68rem 1.1rem !important;
}
.wpforms-container button[type="submit"]:hover {
  background: var(--gold-hot) !important;
  border-color: var(--gold-hot) !important;
}

/* Editor canvas: the scene is printed on wp_body_open on the front end and
   so is absent in the editor. Without a stand-in the editor shows dark text
   intentions on a white page and every colour choice looks wrong. */
.editor-styles-wrapper {
  background: var(--night) !important;
  color: var(--bone);
}

/* --------------------------------------------------------------------
   Block markup -> authored classes

   The authored design assumed hand-written markup: .spec was a <ul> of
   <li>, .product__hook was a bare <p>. Core blocks emit different
   elements with the same class names, so each of these rules re-points
   an authored rule at the element WordPress actually produces. Without
   them the classes are present, the design is not.
   -------------------------------------------------------------------- */

/* Brand lockup: site-logo + site-title standing in for the authored <a>. */
.brand .wp-block-site-logo,
.brand .wp-block-site-logo img { width: 34px; height: 34px; display: block; }
.brand .wp-block-site-title { margin: 0; }
.brand__name,
.brand__name a {
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 2.2vw, .84rem);
  letter-spacing: .16em;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
}
@media (max-width: 559px) {
  .brand .wp-block-site-title { display: none; }
}

/* Navigation block: strip the list chrome so .nav a takes over. */
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2.4vw, 1.5rem);
}
.nav .wp-block-navigation-item__content { text-decoration: none; }
.nav .wp-block-navigation-item.current-menu-item > a { color: var(--cream); border-bottom-color: var(--gold); }

/* post-terms emits anchors where the design had <li>. */
.spec {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.4rem 0 0;
}
.spec a,
.spec .wp-block-post-terms__separator { text-decoration: none; }
.spec a {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ash);
  border: 1px solid var(--line);
  padding: .3rem .6rem;
  transition: border-color .2s, color .2s;
}
.spec a:hover { border-color: var(--slate); color: var(--cream); }

/* post-excerpt wraps its text in an inner <p>, so the styling the design
   put on the container has to reach one level further in. */
.product__hook > p,
.page-lede > p { margin: 0; color: inherit; font-size: inherit; }
.wp-block-post-excerpt__more-link { display: none; }

/* post-content adds its own .entry-content wrapper inside .product__body. */
.product__body .entry-content > p { margin: 1rem 0 0; color: var(--ash); }
.product__body .entry-content > p:first-child { margin-top: 0; }
.product__body .entry-content > p strong { color: var(--bone); font-weight: 600; }
.product__body .entry-content > h2 { margin: 2rem 0 0; }

/* The "What's inside" list: a core list block styled as the authored one. */
.entry-content > .is-style-inside,
.wp-block-list.is-style-inside {
  list-style: none;
  padding-left: 0;
  margin: 1.3rem 0 0;
}
.is-style-inside li {
  position: relative;
  padding-left: 1.3rem;
  margin-top: .3rem;
  line-height: 1.5;
  color: var(--ash);
}
.is-style-inside li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: .7em;
  top: .45em;
}

/* Query pagination reuses the product pager's look. */
.pager .wp-block-query-pagination-previous,
.pager .wp-block-query-pagination-next { color: var(--ash); text-decoration: none; }
.pager .wp-block-query-pagination-previous:hover,
.pager .wp-block-query-pagination-next:hover { color: var(--cream); }

/* The search block on the search template. */
.wp-block-search__input {
  background: rgba(20,24,39,.8);
  border: 1px solid var(--line);
  color: var(--bone);
  border-radius: 0;
  padding: .6rem .8rem;
  font-family: var(--font-body);
}
.wp-block-search__button {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  background: var(--gold);
  color: var(--void);
  border: 1px solid var(--gold);
  border-radius: 0;
  padding: .6rem 1.1rem;
}

/* The storefront cards were an <a> wrapping a heading and a paragraph, which
   no core block produces. Rebuilt as a group whose heading holds the link and
   whose ::after stretches that link over the whole card: same click target,
   same look, but Roger edits it as ordinary text instead of raw HTML. */
.shop { position: relative; }
.shop .wp-block-heading { margin: 0; }
.shop__name a {
  text-decoration: none;
  color: var(--cream);
}
.shop__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.shop:hover .shop__name a { color: var(--cream); }

/* --------------------------------------------------------------------
   Vertical rhythm

   theme.json sets blockGap to 0 on purpose. WordPress's flow layout
   otherwise adds margin-block-start between every child of every group,
   which double-spaces a design that already sets its own margins — and,
   inside .shops and .product, offsets each grid cell so the columns no
   longer line up at the top.

   Spacing therefore comes from the rules above plus these, which cover
   the core blocks Roger might add to a page.
   -------------------------------------------------------------------- */
.entry-content > .wp-block-buttons,
.prose > .wp-block-buttons { margin: 1.6rem 0 0; }
.entry-content > .wp-block-image,
.prose > .wp-block-image { margin: 1.4rem 0 0; }
.entry-content > .wp-block-embed,
.prose > .wp-block-embed { margin: 1.4rem 0 0; }
.entry-content > .wp-block-separator,
.prose > .wp-block-separator { margin: 2rem 0 0; }
.entry-content > .wp-block-quote,
.prose > .wp-block-quote { margin: 1.4rem 0 0; }

/* The hero, page head and card grids keep the spacing the design gave
   them; these are here so a stray group inside them cannot collapse. */
.hero > * + * { margin-block-start: 0; }
.shops > * + * { margin-block-start: 0; }
.product > * + * { margin-block-start: 0; }

/* ------------------------------------------------------------- portrait
   Roger, in the same arch the covers get. The frame is the point: it makes
   the photo one of the set rather than a snapshot dropped into a bio, and
   the About copy pays the joke off two paragraphs later. */

.portrait {
  float: right;
  width: clamp(170px, 26vw, 230px);
  margin: .2rem 0 1.1rem 1.5rem;
}
.portrait img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  background: var(--deep);
  border: 2px solid var(--edge);
  border-radius: 50% 50% 5px 5px / 30% 30% 4px 4px;
}
.portrait figcaption {
  margin-top: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--slate);
  text-align: center;
}

/* Floating it on a phone would leave a text column too narrow to read, so
   below this it becomes a centred plate above the copy instead. */
/* .prose .portrait, not .portrait: core's `.wp-block-image { margin: 0 0 1em }`
   has the same specificity as a bare .portrait and is enqueued after the theme
   stylesheet, so `margin-inline: auto` loses on source order and the plate sits
   left-aligned instead of centred. */
@media (max-width: 600px) {
  .prose .portrait {
    float: none;
    width: min(210px, 62%);
    margin: 0 auto 1.4rem;
  }
}