/* ============================================================
   TENT-ACLES! — brand stylesheet for the marketing pages
   (/, /about/, /ollie/). The document pages - contact, privacy,
   terms, shipping, shop - use assets/site.css instead. Worth
   consolidating one day; not worth the regression risk today.
   ============================================================ */
/*
   Design system: "sticker sheet". Everything in the brand art is
   drawn with a thick black marker outline, so every object here
   gets a 3px ink border and a hard, unblurred offset shadow.
   Palette sampled directly from the Ollie logo file.
   ============================================================ */

:root {
  /* grounds — a pink-biased white, not a neutral gray */
  --paper:        #FFF9FD;
  --paper-2:      #FDEFF8;
  --surface:      #FFFFFF;
  --sticker:      #FFFFFF;   /* fixed in both themes: art has a white ground */

  /* ink — purple-biased near-black */
  --ink:          #1A0B2E;
  --ink-soft:     #55407C;
  --line:         #1A0B2E;
  --drop:         #1A0B2E;

  /* brand, sampled from the logo */
  --pink:         #FC84D8;
  --pink-hot:     #E8329B;
  --pink-ink:     #B01070;
  --purple:       #7824FC;
  --purple-deep:  #3D1080;
  --gold:         #FCC078;
  --gold-ink:     #8A5A12;
  --blue:         #7FC4F5;
  --mint:         #7FD9C0;

  /* blanket section (bold, fixed dark in both themes) */
  --blanket-bg:   #3D1080;
  --blanket-bg-2: #24074F;
  --blanket-fg:   #FFF0FA;
  --blanket-soft: #C9AAF5;

  --r-blob-a: 58% 42% 46% 54% / 47% 52% 48% 53%;
  --r-blob-b: 42% 58% 55% 45% / 55% 44% 56% 45%;
  --wrap: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #150724;
    --paper-2:    #1E0C33;
    --surface:    #261141;
    --ink:        #FFEEF9;
    --ink-soft:   #C3A8E8;
    --line:       #07010F;
    --drop:       #000000;
    --pink-hot:   #FF8FD4;
    --pink-ink:   #FFB3E2;
    --gold-ink:   #FCC078;
    --purple:     #9A5CFF;
  }
}
:root[data-theme="dark"] {
  --paper:      #150724;
  --paper-2:    #1E0C33;
  --surface:    #261141;
  --ink:        #FFEEF9;
  --ink-soft:   #C3A8E8;
  --line:       #07010F;
  --drop:       #000000;
  --pink-hot:   #FF8FD4;
  --pink-ink:   #FFB3E2;
  --gold-ink:   #FCC078;
  --purple:     #9A5CFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Grandstander", "Nunito", ui-rounded, sans-serif;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.015em;
}
p { margin: 0; }
a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.eyebrow {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-ink);
}

.hand {
  font-family: "Caveat", "Segoe Script", cursive;
  font-weight: 700;
}

/* ---------- shared sticker object ---------- */
.stick {
  border: 3px solid var(--line);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--drop);
}

/* ---------- mockup notice ---------- */
.mockbar {
  background: var(--gold);
  color: #2A1A05;
  border-bottom: 3px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 7px 20px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 3px solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
  flex-wrap: wrap;
}
.mark {
  font-family: "Grandstander", sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--pink-hot);
  -webkit-text-stroke: 1.5px var(--line);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 15px;
}
.nav-links a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--pink-hot); color: var(--pink-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: "Grandstander", sans-serif;
  font-weight: 800;
  font-size: 16px;
  padding: 12px 22px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--pink-hot);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--drop);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--drop); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--drop); }
.btn-gold { background: var(--gold); color: #2A1A05; }
.btn-purple { background: var(--purple); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* ---------- placeholder chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 2px dashed var(--gold-ink);
  border-radius: 6px;
  color: var(--gold-ink);
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  white-space: nowrap;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--line);
  background:
    radial-gradient(60% 55% at 78% 30%, color-mix(in srgb, var(--pink) 26%, transparent), transparent 70%),
    radial-gradient(50% 50% at 12% 80%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 70%),
    var(--paper);
}
.hero-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding-block: 64px 56px;
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(36px, 5.2vw, 62px);
  line-height: 1.02;
  font-weight: 900;
  margin-block: 14px 18px;
}
.hero h1 em {
  font-style: normal;
  color: var(--pink-hot);
  -webkit-text-stroke: 1.5px var(--line);
}
.hero-lede {
  font-size: 18px;
  max-width: 34em;
  color: var(--ink-soft);
}
.hero-art {
  padding: 14px;
  border-radius: 26px;
  background: var(--sticker);
  transform: rotate(-1.6deg);
}
.hero-art img { display: block; width: 100%; height: auto; border-radius: 14px; }
.hero-cap {
  display: block;
  text-align: right;
  font-size: 19px;
  color: var(--ink-soft);
  margin-top: 8px;
  transform: rotate(-1.6deg);
}

/* signup form */
.signup {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
  max-width: 520px;
}
.signup input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  padding: 12px 16px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--drop);
}
.signup input::placeholder { color: color-mix(in srgb, var(--ink-soft) 75%, transparent); }
.fineprint { font-size: 14px; color: var(--ink-soft); margin-top: 12px; max-width: 44em; }
.form-ok {
  margin-top: 16px;
  font-family: "Grandstander", sans-serif;
  font-weight: 800;
  color: var(--pink-ink);
}

/* drifting bubbles */
.bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bub {
  position: absolute;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--line) 35%, transparent);
  animation: drift 14s ease-in-out infinite;
}
@keyframes drift {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-22px) }
}
@media (prefers-reduced-motion: reduce) {
  .bub { animation: none; }
  .btn { transition: none; }
}

/* ---------- section scaffolding ---------- */
section { border-bottom: 3px solid var(--line); }
.sec { padding-block: 72px; }
.sec-head { max-width: 40em; margin-bottom: 40px; }
.sec-head h1,
.sec-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 900;
  line-height: 1.08;
  margin-block: 10px 14px;
}
.sec-head p { color: var(--ink-soft); font-size: 17.5px; }

/* ---------- the fort ---------- */
.fort { background: var(--paper-2); }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 34px;
}
.stat {
  padding: 22px 20px;
  border-radius: 18px;
}
.stat b {
  display: block;
  font-family: "Grandstander", sans-serif;
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 6px; }
.stat i { font-style: normal; display: block; font-size: 13px; color: var(--ink-soft); opacity: .8; margin-top: 8px; }

.fort-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: 20px;
}
.price {
  font-family: "Grandstander", sans-serif;
  font-weight: 900;
  font-size: 30px;
  color: var(--pink-hot);
  font-variant-numeric: tabular-nums;
}
.legal { font-size: 13.5px; color: var(--ink-soft); margin-top: 20px; }

/* ---------- crew ---------- */
.crew {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}
.card-crew {
  border-radius: 20px;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  transition: transform .14s ease;
}
.card-crew:nth-child(odd)  { transform: rotate(-1.1deg); }
.card-crew:nth-child(even) { transform: rotate(1deg); }
.card-crew:hover { transform: rotate(0deg) translateY(-4px); }
.card-crew figure {
  margin: 0 0 12px;
  background: var(--sticker);
  border: 2px solid var(--line);
  border-radius: 14px;
  height: 160px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.card-crew img { max-width: 92%; max-height: 92%; object-fit: contain; }
.card-crew .name { font-size: 26px; line-height: 1.1; color: var(--pink-ink); }
.card-crew .role { font-size: 14.5px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- comic ---------- */
.comic { background: var(--paper-2); }
.eps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.ep { border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ep .no {
  font-family: "Grandstander", sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--purple);
}
.ep h3 { font-size: 21px; font-weight: 800; line-height: 1.15; }
.ep p { font-size: 15px; color: var(--ink-soft); }
.ep .status { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 800; color: var(--pink-ink); }
.ep.soon { background: transparent; border-style: dashed; box-shadow: none; }

.pull {
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: 20px;
  background: var(--surface);
  border: 3px solid var(--line);
  box-shadow: 6px 6px 0 var(--drop);
}
.pull q {
  display: block;
  font-family: "Grandstander", sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.28;
  quotes: none;
}
.pull cite { display: block; margin-top: 12px; font-style: normal; font-size: 15px; color: var(--ink-soft); }

/* ---------- under the blanket (the one bold section) ---------- */
.blanket {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--blanket-bg) 0%, var(--blanket-bg-2) 100%);
  color: var(--blanket-fg);
}
.blanket .eyebrow { color: var(--gold); }
.blanket .sec-head p { color: var(--blanket-soft); }
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars span {
  position: absolute;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  opacity: .55;
  -webkit-text-stroke: 1px rgba(0,0,0,.55);
}
.missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; position: relative; }
.mission {
  background: rgba(255,255,255,.07);
  border: 3px solid rgba(0,0,0,.5);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.45);
}
.mission h3 { font-size: 21px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
.mission p { font-size: 15.5px; color: var(--blanket-soft); }
.blanket-note {
  margin-top: 28px;
  font-size: 14px;
  color: var(--blanket-soft);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.blanket .chip { color: var(--gold); border-color: var(--gold); background: rgba(0,0,0,.25); }

/* ---------- why play matters ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border: 3px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 6px 6px 0 var(--drop); }
.pillar { padding: 24px 22px; border-right: 3px solid var(--line); }
.pillar:last-child { border-right: 0; }
.pillar h3 {
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 10px;
}
.pillar:nth-child(1) h3 { color: var(--pink-ink); }
.pillar:nth-child(2) h3 { color: var(--purple); }
.pillar:nth-child(3) h3 { color: var(--gold-ink); }
.pillar:nth-child(4) h3 { color: #0E7B93; }
.pillar p { font-size: 15.5px; color: var(--ink-soft); }
.sources { font-size: 13.5px; color: var(--ink-soft); margin-top: 20px; }
.sources a { color: var(--pink-ink); }

/* ---------- shop ---------- */
.shop { background: var(--paper-2); }
.goods { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.good { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.good .swatch {
  height: 140px;
  border: 2px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 19px;
  color: #2A1A05;
  text-align: center;
  padding: 10px;
}
.good h3 { font-size: 18px; font-weight: 800; }
.good .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.good .amt { font-family: "Grandstander", sans-serif; font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }

/* ---------- team ---------- */
/* 280px rather than 220px so five people land as 3 + 2 on a desktop: the three
   Murs, then the two advisors. At 220px it was 4 + 1 and left one card orphaned. */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.person { border-radius: 18px; padding: 20px; }
.avatar {
  width: 76px; height: 76px;
  border: 3px solid var(--line);
  border-radius: var(--r-blob-a);
  display: grid; place-items: center;
  font-family: "Grandstander", sans-serif;
  font-weight: 900;
  font-size: 26px;
  color: #fff;
  margin-bottom: 14px;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person h3 { font-size: 19px; font-weight: 800; }
.person .title { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--purple); margin-top: 3px; }
.person p { font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; }
.person .chip { font-size: 10.5px; }

/* ---------- footer ---------- */
footer { background: var(--paper); border-bottom: 0; }
.foot-cta {
  padding: 40px 32px;
  border-radius: 24px;
  background: var(--pink);
  border: 3px solid var(--line);
  box-shadow: 8px 8px 0 var(--drop);
  text-align: center;
  color: #2A0A1D;
}
.foot-cta h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; margin-bottom: 10px; }
.foot-cta p { color: #46113190; color: rgba(42,10,29,.78); max-width: 38em; margin-inline: auto; }
.foot-cta .signup { margin-inline: auto; justify-content: center; }
.foot-cta .fineprint { color: rgba(42,10,29,.72); text-align: center; margin-inline: auto; }
.foot-cta .form-ok { color: #2A0A1D; }

.foot-grid {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: 40px 28px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.social { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 700; }
.social a { color: var(--pink-ink); text-decoration: none; border-bottom: 2px solid transparent; }
.social a:hover { border-bottom-color: var(--pink-ink); }
.colophon { border-top: 3px solid var(--line); padding-block: 20px 36px; font-size: 13px; color: var(--ink-soft); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 40px; }
  .hero-art { order: -1; max-width: 460px; }
  .hero-cap { text-align: left; }
  .stats { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 3px solid var(--line); }
  .pillar:last-child { border-bottom: 0; }
  .sec { padding-block: 52px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .card-crew, .card-crew:hover { transform: none; }
  /* The nav used to be display:none here, from when this was one long page and
     every link was an anchor further down it. The shop, the crew and the About
     page are separate pages now, so hiding these left a phone with no way to
     reach any of them. They wrap instead. */
  .nav-in { gap: 10px; }
  .nav-links { width: 100%; order: 3; gap: 12px; font-size: 13.5px; margin-left: 0; }
  .nav .btn { margin-left: auto; padding: 9px 18px; font-size: 14px; }
}
/* ---------- shop cards on the homepage ---------- */
a.good {
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.good:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--drop); }
a.good:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.good .shot {
  height: 170px; border: 2px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--sticker);
}
.good .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.good .go { font-size: 13.5px; font-weight: 800; color: var(--pink-ink); }
.good.soon { opacity: .72; }
.soon-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); border: 2px dashed var(--ink-soft); border-radius: 5px; padding: 2px 8px;
}


/* ============ COMIC READER ============
   One page at a time. The pages are roughly square, so stacking all four into
   a single tall image would land each one about a phone-width wide and make
   Raven's handwriting unreadable. Full-screen, one page, arrows. */
.ep.live { cursor: pointer; }
.ep.live:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--drop); }
.ep.live:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

.reader[hidden] { display: none; }
.reader {
  position: fixed; inset: 0; z-index: 90;
  background: var(--blanket-bg-2);
  display: flex; flex-direction: column;
}
.reader-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; color: var(--blanket-fg);
  border-bottom: 2px solid rgba(255,255,255,.14);
}
.reader-title { font-family: "Grandstander", sans-serif; font-weight: 900; font-size: 17px; }
.reader-count { font-size: 13.5px; font-weight: 800; color: var(--blanket-soft); margin-left: auto; }
.reader-x {
  background: none; border: 0; color: var(--blanket-fg);
  font-size: 30px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.reader-x:hover { color: var(--pink-hot); }

.reader-stage {
  flex: 1 1 0; min-height: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.reader-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 10px; background: #fff; cursor: zoom-in;
}
/* A page is near-square, so on a phone it fits by width and the handwriting
   ends up small. Tapping it blows the page up and lets you pan around. */
.reader-stage.zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.reader-stage.zoomed img { max-width: none; max-height: none; width: 190%; cursor: zoom-out; }
.reader-hint { font-size: 12.5px; color: var(--blanket-soft); text-align: center; padding: 0 16px 6px; }
.reader-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35);
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.reader-nav:hover { background: var(--pink-hot); border-color: var(--pink-hot); }
.reader-nav[disabled] { opacity: .25; cursor: default; }
.reader-nav.prev { left: 12px; }
.reader-nav.next { right: 12px; }

.reader-dots { display: flex; justify-content: center; gap: 9px; padding: 0 0 16px; }
.reader-dots button {
  width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--blanket-soft); background: none;
}
.reader-dots button[aria-current="true"] { background: var(--pink-hot); border-color: var(--pink-hot); }

@media (max-width: 560px) {
  .reader-title { font-size: 15px; }
  .reader-nav { width: 42px; height: 42px; font-size: 24px; }
  .reader-nav.prev { left: 4px; }
  .reader-nav.next { right: 4px; }
  .reader-stage { padding: 8px; }
}