/* 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; }
}