@font-face {
  font-family: 'Surph Dialogue Ss';
  src: url('../fonts/SurphDialogueSs-Regular.ttf?v=2') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Surph Serif';
  src: url('../fonts/SurphSerifDialogue-Regular.ttf?v=2') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
/* SurphCo official palette */
:root {
  --cream: #f3efd8;
  --cream-deep: #d5d5b7;
  --ink: #170b11;
  --ink-soft: #362b2d;
  --sage: #bbd2c2;
  --peach: #fbd2bb;
  --accent-warm: #eccea7;
  --accent-warm-mid: #ebbe9e;
  --butter: #e7d0a6;
  --paper-line: rgba(23, 11, 17, 0.18);
  --night: #170b11;

  --font-hand: 'Surph Dialogue Ss', serif;
  --font-marker: 'Surph Dialogue Ss', serif;
  --font-body: 'Surph Dialogue Ss', serif;
}

* { box-sizing: border-box; }

/* footer-colored canvas so short pages never show a pale strip below the footer */
html { scroll-behavior: smooth; background: var(--ink); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  container-type: inline-size;
}

.wrap-wide {
  max-width: 1360px;
}

.section { padding: 72px 0; }

.section-title {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
  margin: 0 0 40px;
  letter-spacing: 0.5px;
}

.section-title.align-left { text-align: left; }

/* ---------- header ---------- */
.site-header {
  border-bottom: 2px solid var(--paper-line);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.wordmark img {
  display: block;
  height: clamp(52px, 8vw, 72px);   /* badge frame needs height for the letters to read */
  width: auto;
}

.brand-group a:not(.wordmark) {
  font-family: var(--font-marker);
  font-size: 0.95rem;
  line-height: 1;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.brand-group a:not(.wordmark):hover { border-color: var(--ink); }

.main-nav {
  display: flex;
  gap: 24px;
  margin-left: auto;        /* push the nav over to the right */
  font-family: var(--font-marker);
  font-size: 1rem;
}

.main-nav a {
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.main-nav a:hover { border-color: var(--ink); }

/* ---- nav dropdown groups (the artist / the story) + flat links (shop) ---- */
.nav-group { position: relative; }
.nav-trigger {
  font-family: var(--font-marker);
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.nav-trigger::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}
.nav-trigger:hover,
.nav-group.is-open .nav-trigger { border-color: var(--ink); }
.nav-group.is-open .nav-trigger::after { transform: rotate(180deg); }

.nav-flat {
  font-family: var(--font-marker);
  font-size: 1rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}
.nav-flat:hover { border-color: var(--ink); }

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 168px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 7px 0 rgba(23, 11, 17, 0.14);
  padding: 8px;
  z-index: 40;
}
.nav-group.is-open .nav-menu { display: flex; }
.nav-menu a {
  font-size: 0.98rem;
  padding: 8px 14px;
  border-radius: 9px;
  border-bottom: none;
  white-space: nowrap;
}
.nav-menu a:hover { background: var(--cream-deep); border-color: transparent; }

/* hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 8px 7px;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
}

/* the two drawn states stack on top of each other and cross-fade.
   flex-shrink is pinned off: the header is a flex row, and without it the
   toggle gets squeezed to a sliver once the wordmark and account badge
   are both competing for the same line. */
.nav-toggle { position: relative; flex: 0 0 auto; }

.nav-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: contain;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* fallback path: if the inline swap never happens (JS off, fetch failed) the
   two flat images just cross-fade */
.nav-icon-close { opacity: 0; transform: rotate(-25deg); }
.nav-open .nav-icon-menu { opacity: 0; transform: rotate(25deg); }
.nav-open .nav-icon-close { opacity: 1; transform: rotate(0deg); }

/* once the burger is inlined the drawn X is redundant — the burger's own
   three lines fold into one, same motion the CSS bars used to do */
.has-inline-burger .nav-icon-close { display: none; }

.nav-burger .mb-bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* the lines sit at y 44.8 / 150 / 255.2 in the 300-unit canvas, so ±105
   brings the outer two onto the middle before they rotate */
.nav-open .has-inline-burger .mb-bar-1 { transform: translateY(105px) rotate(45deg); }
.nav-open .has-inline-burger .mb-bar-2 { opacity: 0; }
.nav-open .has-inline-burger .mb-bar-3 { transform: translateY(-105px) rotate(-45deg); }

/* safety net: any page still shipping the old three-<span> toggle (the
   account pages have not been updated yet) keeps working */
.nav-toggle span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  background: var(--cream);
}

.hero-mountains {
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.mountain-img {
  width: 100%;
  /* full mountain at natural ratio (peaks + slopes), but nudged up so a little
     of the empty sky is trimmed off the top (clipped by .hero-mountains'
     overflow:hidden). Keeps the full bottom running down behind the cards. */
  height: auto;
  display: block;
  margin-top: -6vw;
}

.hero-inner {
  position: relative;
  z-index: 1;
  /* sits a little below the mountain ridgeline; vw-based so the overlap stays
     proportional as the (full-height) mountains scale with the window */
  margin-top: -20vw;
}

.hero-title {
  text-align: center;
  margin: 0 0 44px;
}

.hero-title span {
  display: inline-block;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 22px;
  background: var(--peach);
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 rgba(23, 11, 17, 0.12);
}

.hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
  align-items: stretch;
}

.hero-card {
  border: 3px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 32px 24px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
  transition: transform 0.15s ease;
}

.hero-card:hover { transform: translateY(-3px); }

.card-comic {
  background: var(--peach);
  transform: rotate(-1deg);
}

.card-newsletter {
  background: var(--sage);
  border-radius: 15px 225px 15px 255px / 225px 15px 255px 15px;
  transform: rotate(1deg);
}

.card-comic:hover { transform: rotate(-1deg) translateY(-3px); }
.card-newsletter:hover { transform: rotate(1deg) translateY(-3px); }

.hero-card h2 {
  font-family: 'Surph Serif', serif;
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.card-blurb { margin: 0; font-size: 1rem; max-width: 250px; }
.card-price {
  font-family: var(--font-marker);
  font-weight: 700;
  margin: 4px 0 6px;
}

/* custom drawn $ (SVG) used in place of the font's dollar glyph */
.dollar-sign {
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: -0.2em;
  margin-right: 2px;
}

/* inline symbol icons for glyphs the brand font lacks (+, etc.) */
.sym-ico {
  display: inline-block;
  height: 0.82em;
  width: auto;
  vertical-align: -0.02em;
}

.btn {
  font-family: var(--font-marker);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 2px 4px 0;
  margin-top: 6px;
}

/* matches the two hero cards: thick ink border, the same wonky asymmetric
   corner radii, and the hard offset shadow */
.hero-bubble {
  position: absolute;
  left: 50%;
  top: 34px;
  z-index: 5;
  transform: translateX(-50%) rotate(-3deg);
  width: 190px;
  height: auto;
  display: block;
  /* keep the cards' offset drop-shadow, shaped to the bubble art */
  filter: drop-shadow(5px 5px 0 rgba(23, 11, 17, 0.15));
}

.hero-forest {
  position: relative;
  z-index: 3;
  margin-top: -120px;
  line-height: 0;
  pointer-events: none;
}

/* the hero sits on cream, matching the tree graphic's transparent sky;
   the leads section picks up the tree's sand-dune ground color below */
.leads { background: var(--cream-deep); }

/* ---------- placeholders ---------- */
.art-placeholder {
  background: repeating-linear-gradient(
    135deg,
    rgba(23, 11, 17,0.06),
    rgba(23, 11, 17,0.06) 10px,
    rgba(23, 11, 17,0.02) 10px,
    rgba(23, 11, 17,0.02) 20px
  );
  border: 2px dashed var(--paper-line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
}

.art-wide {
  width: 100%;
  aspect-ratio: 16 / 7;
}

.art-figure {
  flex: 1 1 0;
  aspect-ratio: 3 / 5;
}

.art-panel {
  flex: 1 1 0;
  aspect-ratio: 4 / 5;
}

/* behind-the-scenes sketch panels: full pages tossed on a desk */
.art-panel-img {
  aspect-ratio: auto;
  flex: 0 1 460px;
  transition: transform 0.2s ease;
}
/* :*-of-type (not :*-child) so the arrow <img> between the figures doesn't
   knock these off — the figures are the only <figure> siblings here */
.art-panel-img:first-of-type {
  transform: rotate(-5deg);
  margin-top: 8px;
  z-index: 1;
}
.art-panel-img:last-of-type {
  transform: rotate(4deg);
  margin-left: -34px;   /* let the pages overlap a little */
  margin-top: 40px;
  z-index: 2;
}
.art-panel-img:hover {
  transform: rotate(-0.5deg) scale(1.04);
  z-index: 3;
}
.art-panel-img img {
  width: 100%;
  height: auto;
  display: block;
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 9px 18px rgba(23, 11, 17, 0.30);  /* paper-on-desk shadow */
}

/* ---------- process page: background step-by-step ---------- */
.step-section { background: var(--cream-deep); }

.step-strip {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.step-frame {
  margin: 0;
}

.step-img {
  width: 100%;
  display: block;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
}

.step-frame figcaption {
  margin-top: 12px;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  letter-spacing: 0.5px;
}

/* ---------- leads ---------- */
.leads-figure {
  margin: 0;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}

.leads-img {
  width: 100%;
  display: block;
}

.leads-captions {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- cast height chart ---------- */
.cast { background: var(--cream); }

body.page-characters { background: var(--butter); }
body.page-characters .cast,
body.page-characters .cast-group { background: var(--butter); }

/* alternating section tint so the three cast groups read as distinct bands */
body.page-characters .cast-group-alt { background: var(--cream-deep); }

/* ---------- forest divider ---------- */
/* matches the cast section's color above it; the graphic's own eggshell
   ground silhouette already matches the process section below, so the
   whole divider now reads as one flat eggshell band with trees on it */
.forest-divider {
  background: var(--cream);
  line-height: 0;
}

/* sky is transparent (shows the sand-dune leads section above it), the
   mountain's own eggshell ground fill matches the cast section below */
.mountain-divider {
  background: var(--cream-deep);
}

/* butter friends section above shows through the transparent sky; the
   graphic's own cream-deep (sand) ground matches the Kingsley section below */
.grass-divider {
  background: var(--butter);
}

/* flat color matching the bottom of .prologue-cta's gradient above it */
/* continues the fade from .prologue-cta above it down into the night
   section below, instead of sitting as a flat block of solid color */
.forest-divider-dark {
  position: relative;
  background: linear-gradient(180deg, var(--accent-warm-mid) 0%, #000 100%);
}
/* the SVG is pre-colored and ends in a dark brown, leaving a hard line against
   the pure-black prologue — fade the bottom of it into pure black to bridge it */
.forest-divider-dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;                 /* cover the 1px seam at the very edge */
  height: 190px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 88%);
  pointer-events: none;
}

/* sky matches the night prologue-strip above it; the sand graphic's own
   cream-deep ground fill matches the instagram-feed section below */
.forest-divider-night {
  background: #000;
}

/* the graphic's bottom edge lands on a fractional pixel and antialiases
   against the dark night background above, leaving a faint dark seam where
   it meets the section below — pull that section up 1px to cover it (both
   are cream-deep, so the overlap is invisible) */
.forest-divider-night + .instagram-feed {
  margin-top: -1px;
}

.forest-img {
  width: 100%;
  height: auto;
  display: block;
}

/* .wrap (the nearest ancestor with container-type set) lets --px-per-in
   below query the available width via cqw instead of the viewport, so the
   whole lineup (box + characters together) scales down as one continuous
   unit as its box narrows, rather than jumping between a fixed
   desktop/mobile size with an overflowing gap in between at tablet widths */
.height-chart {
  --px-per-in: clamp(2.2px, 0.68cqw, 7.5px);
}

/* the family (8) and side (5) charts hold more figures than the friends chart,
   so they get their own scale tuned to fill the row at desktop width. On
   narrow screens px hits the floor and the chart scrolls sideways (like the
   original wide cast lineup) instead of shrinking the figures to nothing */
.height-chart--family { --px-per-in: clamp(3px, 0.38cqw, 8px); }

/* let the Kingsley family lineup use the FULL page width (not the 1360px cap),
   so the big chart fits on wide screens instead of scrolling off-screen */
.cast-group-alt .wrap-wide { max-width: none; }
.height-chart--side { --px-per-in: clamp(3px, 0.54cqw, 5.6px); }

.height-chart--family,
.height-chart--side {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

/* full outlined box around the Kingsley family chart */
.height-chart--family .chart-stage {
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
}

/* min-width:max-content lets the stage grow past the container so overflow-x
   can scroll it; when it fits, it stays container-width and stays centered */
.height-chart--family .chart-stage,
.height-chart--family .chart-captions,
.height-chart--side .chart-stage,
.height-chart--side .chart-captions {
  min-width: max-content;
}

/* homepage cast lineup only (characters.html's chart-stage isn't wrapped
   in this class) — a colored panel behind the character row */
.lineup-box {
  background: var(--butter);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
  padding: clamp(20px, 6vw, 56px) clamp(16px, 5vw, 48px);
}

.chart-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.6cqw, 20px);
  height: calc(80 * var(--px-per-in));
  padding: 0 16px 0 56px;
  background: var(--butter);
  border-bottom: 3px solid var(--ink);
  background-image: repeating-linear-gradient(
    to top,
    var(--paper-line) 0,
    var(--paper-line) 1px,
    transparent 1px,
    transparent calc(12 * var(--px-per-in))
  );
  background-position: left bottom;
}

.ruler-mark {
  position: absolute;
  left: 12px;
  bottom: calc(var(--in) * var(--px-per-in));
  transform: translateY(50%);
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.chart-slot {
  /* Width is derived from each character's own height and their art's
     true aspect ratio (--ratio), NOT an equal share of the row — so a
     shorter character always renders narrower too, never forced to the
     same width (and therefore same apparent height) as a taller one. */
  flex: 0 0 auto;
  width: calc((var(--h-in) + var(--hair-in, 0)) * var(--px-per-in) * var(--ratio));
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chart-figure-art {
  /* --hair-in accounts for hair that extends above a character's true
     height, so their actual head/body still lines up with their real
     height on the chart instead of getting compressed to fit hair.
     The slot's width is already exactly right for this character (see
     .chart-slot), but its height always spans the full stage so ruler
     headroom works — object-fit anchors the art to the slot's bottom
     (the ground line) instead of floating it in the middle of that box. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  margin: 0;
}

.chart-captions {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.6cqw, 20px);
  padding: 14px 16px 0 56px;
  text-align: center;
}

.chart-caption {
  /* Matches .chart-slot's width formula exactly so each caption stays
     centered under its own character regardless of their varying widths. */
  flex: 0 0 auto;
  width: calc((var(--h-in) + var(--hair-in, 0)) * var(--px-per-in) * var(--ratio));
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.chart-caption strong {
  font-family: var(--font-marker);
  font-size: 0.88rem;
}

.chart-caption strong em { font-style: italic; font-weight: 400; }

@media (max-width: 720px) {
  .chart-stage,
  .chart-captions { padding-left: 44px; }
  .chart-caption { font-size: 0.7rem; }
}

/* ---------- portfolio gallery ---------- */
.pf-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 26px;
}

.pf-filter {
  font-family: var(--font-marker);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 20px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(23, 11, 17, 0.14);
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.pf-filter:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 rgba(23, 11, 17, 0.18); }

.pf-filter.is-active {
  background: var(--ink);
  color: var(--cream);
}

.pf-item.is-hidden { display: none; }

/* masonry via CSS columns — pieces of any aspect ratio pack naturally */
.pf-grid {
  columns: 4;
  column-gap: 16px;
}

.pf-item {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 6px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(23, 11, 17, 0.14);
  cursor: pointer;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.pf-item:hover,
.pf-item:focus-visible {
  transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: 6px 8px 0 rgba(23, 11, 17, 0.18);
  outline: none;
}

.pf-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

@media (max-width: 980px) { .pf-grid { columns: 3; } }
@media (max-width: 680px) { .pf-grid { columns: 2; } }
@media (max-width: 420px) { .pf-grid { columns: 1; } }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 20px 22px;
}

.lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 11, 17, 0.9);
}

.lb-stage {
  position: relative;
  z-index: 1;
  width: min(92vw, 1500px);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform-origin: 0 0;
  transition: transform 0.12s ease-out;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.lb-stage.is-zoomed .lb-img { cursor: grab; transition: none; }
.lb-stage.is-panning .lb-img { cursor: grabbing; transition: none; }

.lb-btn {
  position: absolute;
  z-index: 2;
  background: rgba(243, 239, 216, 0.92);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-marker);
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lb-btn:hover { background: #fff; transform: scale(1.06); }

.lb-close {
  top: 18px;
  right: 20px;
  width: 48px;
  height: 48px;
  font-size: 1.9rem;
}

.lb-prev,
.lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  font-size: 2.1rem;
  padding-bottom: 4px;
}

.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-prev:hover,
.lb-next:hover { transform: translateY(-50%) scale(1.06); }

/* caption sits in its own backing box below the image, never over it */
.lb-caption-box {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  max-width: 92vw;
  text-align: center;
  background: rgba(23, 11, 17, 0.72);
  border: 2px solid rgba(243, 239, 216, 0.28);
  border-radius: 14px;
  padding: 8px 22px 10px;
}

.lb-caption {
  color: var(--cream);
  font-family: var(--font-marker);
  font-size: 1.15rem;
  line-height: 1.2;
}

.lb-hint {
  color: rgba(243, 239, 216, 0.6);
  font-family: var(--font-body);
  font-size: 0.8rem;
  margin-top: 3px;
}

.lb-stage.is-zoomed ~ .lb-caption-box .lb-hint { opacity: 0; }

@media (max-width: 620px) {
  .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 1.7rem; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-close { top: 10px; right: 10px; }
}

/* plain lineup version (homepage teaser, no ruler/captions) */
.lineup-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.6cqw, 20px);
  height: calc(76 * var(--px-per-in));
}

.cast-link {
  text-align: center;
  margin: 28px 0 0;
  font-family: var(--font-marker);
  font-size: 1.05rem;
}

.cast-link a {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}

/* clickable character trigger (characters page) */
button.chart-slot {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}

button.chart-slot:hover { transform: translateY(-3px); }

.chart-caption-hint {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ---------- character modal ---------- */
body.modal-lock { overflow: hidden; }

.char-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23, 11, 17, 0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.char-modal.open { display: flex; }

.modal-card {
  position: relative;
  background: var(--butter);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 8px 8px 0 rgba(23, 11, 17, 0.2);
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-family: var(--font-marker);
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
  z-index: 1;
}

.modal-body {
  display: flex;
  gap: 32px;
  align-items: center;   /* the character box is centered vertically with the info */
}

/* white portrait frame that HUGS the figure (adapts to any aspect ratio —
   a tall single character or the wide twins) with even padding all around,
   instead of a fixed tall box that leaves big empty margins */
/* the character stands in a shorter green "frame" and steps out the bottom:
   the ::before is the green backdrop, stopping ~14% short of the image bottom
   so the feet spill onto the card below it (proportional to any figure) */
.modal-fullbody {
  flex: 0 0 auto;
  align-self: center;          /* vertically centered in the modal */
  position: relative;
  padding: 0 18px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-fullbody::before {
  content: "";
  position: absolute;
  top: 12%;                    /* inset top + bottom → head AND feet step out */
  left: 0;
  right: 0;
  bottom: 13%;
  background: #e6e0c6;         /* a lighter version of the 2nd-section tone */
  border: 3px solid var(--ink);
  border-radius: 10px;
  z-index: 0;
}

.modal-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;                 /* auto both ways = never squished */
  max-height: 66vh;
  max-width: min(420px, 46vw);
  object-fit: contain;
}

.modal-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.modal-name {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 1.7rem;
  margin: 0;
}

.modal-meta {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: -8px;
}

.modal-portrait {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.modal-bio {
  font-size: 1rem;
  margin: 0;
}

.modal-items {
  display: flex;
  gap: 12px;
}

.modal-item {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  .modal-body { flex-direction: column; align-items: center; }
  .modal-fullbody {
    flex-basis: auto;
    align-self: center;
    padding: 16px 16px 0;
  }
  .modal-img {
    height: auto;
    max-height: 52vh;
    max-width: min(300px, 74vw);
  }
  .modal-info { text-align: center; align-items: center; width: 100%; }
}

/* ---------- contact page: postcard in a night-forest clearing ---------- */
.contact-scene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #63515A 0%, #2a1c24 52%, var(--night) 100%);
  padding: 72px 0 0;
}

/* the tall dark-forest graphic (moon, stars, pines) covers the whole scene:
   object-fit cover + bottom anchoring keeps the trees pinned to the bottom
   and lets the starry sky fill upward, cropping (never distorting) as the
   window resizes — so wide screens crop the tall sky and narrow/mobile
   screens reveal more of it */
.scene-trees {
  position: absolute;
  inset: 0;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}
.scene-trees img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.scene-stars b {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0.7;
  z-index: 1;
}

.contact-inner {
  position: relative;
  z-index: 2;
  /* leave room at the bottom so the postcard floats above the treeline */
  padding-bottom: 320px;
}
/* backer panel so the heading + blurb stand out against the starry sky */
.contact-header {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto 36px;
  padding: 22px 32px 26px;
  background: rgba(23, 11, 17, 0.62);
  border: 2px solid rgba(243, 239, 216, 0.3);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.contact-inner .section-title { color: var(--cream); margin-bottom: 12px; }
.contact-intro {
  text-align: center;
  color: var(--cream-deep);
  max-width: 46ch;
  margin: 0 auto;
}

/* ---------- contact page: the letter (write -> seal -> send off) ---------- */
.letter { max-width: 440px; margin: 0 auto; }

.stage {
  position: relative;
  height: 580px;
  perspective: 1400px;
  /* height eases in sync with the paper so adding a line grows the letter —
     and the whole scene/background behind it — smoothly instead of snapping */
  transition: height 0.45s ease, transform 0.65s cubic-bezier(0.5, 0.05, 0.5, 0.95), opacity 0.5s ease;
}
.letter.is-sending .stage { transform: translateX(135%) rotate(7deg); opacity: 0; }

/* --- the message paper --- */
/* the long letter sheet, UNDER everything (z1) — its top sticks up to write
   on, its bottom disappears behind the flap and the envelope front */
.paper {
  position: absolute;
  left: 0; right: 0;
  bottom: 180px;
  height: 380px;
  z-index: 1;
  background: #fdfcf6;
  border: 3px solid var(--ink);
  border-radius: 10px 10px 0 0;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* clip the content as it slides into the envelope */
  transition: height 0.45s ease;
}
/* sealing collapses the letter's HEIGHT (bottom-anchored) so it slides down
   behind the envelope with no squish — its exact height is set in JS */
.letter.is-addressing .paper {
  pointer-events: none;
}
.paper-head {
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 10px;
}
.paper-msg {
  flex: none;
  height: 92px;
  width: 100%;
  border: none;
  resize: none;
  padding: 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  line-height: 31px;
  background: repeating-linear-gradient(
    #fdfcf6, #fdfcf6 30px,
    var(--paper-line) 30px, var(--paper-line) 31px
  );
  outline: none;
}
/* the seal button sits in the open flap triangle */
.seal-btn {
  position: absolute;
  left: 50%;
  bottom: 274px;
  transform: translateX(-50%);
  z-index: 4;
  cursor: pointer;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--peach);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  padding: 9px 24px;
  box-shadow: 3px 3px 0 rgba(23, 11, 17, 0.18);
  transition: opacity 0.3s ease, transform 0.15s ease;
}
.seal-btn:hover { transform: translateX(-50%) translateY(-2px); }
.letter.is-addressing .seal-btn { opacity: 0; pointer-events: none; }

/* --- envelope front (return address) --- */
.env-front {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  z-index: 3;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 8px 8px 0 rgba(23, 11, 17, 0.4);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  /* transition delay is set per-direction in JS so seal and edit sequence
     differently (seal: paper -> flap -> envelope; edit: flap -> paper) */
  transition: transform 0.5s ease;
}
/* rise is set in JS so the sealed envelope centers even when the letter grew */
.letter.is-addressing .env-front { transform: translateY(calc(-1 * var(--seal-rise, 150px))); }

.addr {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 60%;
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.letter.is-addressing .addr { opacity: 1; }
.addr-in {
  border: none;
  border-bottom: 2.5px solid var(--ink);
  background: transparent;
  font-family: var(--font-marker);
  font-size: 1.02rem;
  padding: 5px 2px;
  color: var(--ink);
  outline: none;
  pointer-events: none;
}
.addr-in::placeholder { color: var(--ink); opacity: 0.7; }
.letter.is-addressing .addr-in { pointer-events: auto; }
.addr-in:focus-visible { border-bottom-color: var(--accent-warm-mid); }

.stamp {
  position: absolute;
  top: 22px; right: 24px;
  width: 60px; height: 72px;
  background: var(--peach);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 1.15;
  transform: rotate(4deg);
}
.postmark {
  position: absolute;
  top: 28px; right: 100px;
  width: 56px; height: 56px;
  border: 2px solid var(--ink-soft);
  border-radius: 50%;
  opacity: 0.42;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-marker);
  font-size: 0.52rem;
  line-height: 1.1;
  color: var(--ink-soft);
  transform: rotate(-8deg);
}
.to-line {
  position: absolute;
  left: 0; right: 0;
  top: 132px;
  text-align: center;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 1.5rem;
  transform: rotate(-4deg);
}

.env-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.letter.is-addressing .env-actions { opacity: 1; pointer-events: auto; }
.env-actions .cta-btn { cursor: pointer; }

/* --- the flap: a rounded triangle pointing up while writing, hinged at its
   base so it folds down to seal --- */
/* z1: behind the letter (z2) and the envelope front (z3). No transform while
   writing, so plain z-index stacking keeps the apex tucked behind the letter
   (a resting 3D transform here would composite it in front). */
.env-flap {
  position: absolute;
  left: 0; right: 0;
  bottom: 260px;          /* base sits on the envelope-front top edge */
  height: 118px;          /* apex points up, over the letter (kept low so the
                             message area stays clear above it) */
  width: 100%;
  z-index: 2;
  pointer-events: none;   /* decorative — never intercept the field/button */
  transform-origin: bottom center;
  transition: transform 0.5s ease;   /* delay set per-direction in JS */
}
.env-flap polygon {
  fill: var(--accent-warm);
  stroke: var(--accent-warm);
  stroke-width: 26;
  stroke-linejoin: round;   /* rounds the triangle's corners */
}
/* seal: the flap folds down in place and tucks UNDER the envelope front
   (z2, behind the front's z3) — no fade, so pressing "edit message" folds it
   back up (the reverse of the seal fold) */
.letter.is-addressing .env-flap {
  transform: rotateX(158deg);
}

.step-error {
  color: #a32d2d;
  font-family: var(--font-marker);
  font-size: 0.85rem;
  margin: 8px 0 0;
}
/* sits in-flow right beneath the sender email input */
.addr-err { margin: 2px 0 0; max-width: 100%; }

.ghost-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-marker);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  padding: 2px 2px 1px;
}

@media (prefers-reduced-motion: reduce) {
  .stage, .paper, .env-front, .env-flap, .addr, .env-actions { transition: none; }
}

@media (max-width: 620px) {
  .contact-inner { padding-bottom: 200px; }
}

/* ---------- simple content pages ---------- */
.page-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

/* ---------- instagram feed ---------- */
.instagram-feed {
  background: var(--cream-deep);
  text-align: center;
}

.instagram-feed .page-intro a {
  font-family: var(--font-marker);
  font-weight: 700;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}

/* ---------- process ---------- */
.process { background: var(--cream-deep); }

.process-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.process-panels {
  position: relative;       /* anchor for the arrow that sits between the pages */
  display: flex;
  gap: 0;
  width: 100%;
  justify-content: center;
  padding: 28px 14px 8px;   /* breathing room for the tilted pages */
  align-items: flex-start;
}
/* curly arrow hovering on top, in the gap between the two pages */
.process-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: auto;
  transform: translate(-50%, -50%) rotate(-4deg);
  z-index: 4;               /* above both pages (z-index 1 & 2) */
  pointer-events: none;
  filter: drop-shadow(2px 3px 3px rgba(23, 11, 17, 0.35));
}
@media (max-width: 560px) { .process-arrow { width: 84px; } }

.process-copy {
  order: -1;            /* heading + note sit above the pages */
  text-align: center;
  max-width: 640px;
}
.process-copy .section-title.align-left { text-align: center; }
.process-cta { margin-top: 8px; }

.scroll-note {
  font-family: var(--font-hand);
  font-size: 1.4rem;
}

/* teaser "notify me" button inside the prologue strip (remove once released) */
.notify-btn { font-size: 1.05rem; }

/* ---------- prologue cta ---------- */
.prologue-cta {
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 50%, var(--accent-warm) 78%, var(--accent-warm-mid) 100%);
}

.cover {
  display: inline-block;
  width: min(420px, 90%);
  border: 3px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 8px 8px 0 rgba(23, 11, 17, 0.15);
  transition: transform 0.15s ease;
}

.cover:hover { transform: translateY(-3px); }

.cover-img {
  width: 100%;
  display: block;
}

/* ---------- prologue strip ---------- */
.prologue-strip {
  background: #000;             /* true black under the dark trees */
  color: var(--cream);
  padding: 60px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                       /* pages stack flush, end to end */
}
.prologue-strip .cta-btn { margin-top: 44px; }

/* one continuous strip: pages stack flush with no borders or gaps */
.strip-img {
  width: min(1000px, 92%);
  display: block;
  border-radius: 0;
  border: none;
}

.cta-btn {
  display: inline-block;
  font-family: var(--font-marker);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  background: var(--peach);
  color: var(--ink);
  padding: 16px 28px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(243, 239, 216, 0.2);
  transition: transform 0.15s ease;
}

.cta-btn:hover { transform: translateY(-3px); }

.strip-frame {
  width: min(1000px, 92%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 48px 0 24px;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  text-align: left;
  margin-bottom: 32px;
}

.footer-links h3 {
  font-family: var(--font-marker);
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.footer-links p { margin: 0; opacity: 0.85; }

/* site-wide footer signup (injected by site.js) */
.footer-signup { text-align: left; max-width: 260px; }
.footer-signup h3 { font-family: var(--font-marker); margin: 0 0 8px; font-size: 1.1rem; }
.footer-signup-lead { margin: 0 0 12px; font-size: 0.85rem; opacity: 0.85; }
.footer-signup-form { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-signup-form input[type="email"] {
  flex: 1 1 150px;
  min-width: 0;
  font: inherit;
  padding: 9px 11px;
  border: 2px solid var(--cream);
  border-radius: 8px;
  background: #fffdf5;
  color: var(--ink);
}
.footer-signup-form .cta-btn { flex: 0 0 auto; cursor: pointer; }
.footer-signup .signup-error { flex-basis: 100%; margin: 2px 0 0; font-size: 0.82rem; color: #ffb4a8; }
.footer-signup-success { font-family: var(--font-marker); margin: 6px 0 0; }

/* ---------- pre-launch "Coming Soon" gate (coming-soon.php) ---------- */
.gate-body { margin: 0; background: var(--cream); color: var(--ink); }
.gate-screen {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; position: relative;
}
.gate-hero { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%); justify-content: space-between; }
.gate-inner { max-width: 640px; margin: auto 0; }   /* centered in the space above the scroll cue */
.gate-wordmark { font-family: var(--font-marker); font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: 1px; margin: 0 0 10px; }
.gate-title { font-family: var(--font-marker); font-size: clamp(2.6rem, 10vw, 5rem); line-height: 1; margin: 0 0 18px; }
.gate-lead { font-size: 1.15rem; line-height: 1.5; max-width: 42ch; margin: 0 auto; }
.gate-scroll {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--ink); font-family: var(--font-marker); opacity: 0.85;
}
.gate-scroll:hover { opacity: 1; }
.gate-arrow { font-size: 1.6rem; animation: gate-bob 1.4s ease-in-out infinite; }
@keyframes gate-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.gate-enter { background: var(--ink); color: var(--cream); }
.gate-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.gate-form-title { font-family: var(--font-marker); font-size: 1.8rem; margin: 0 0 4px; }
.gate-form input[type="password"] {
  font: inherit; text-align: center; padding: 13px 15px;
  border: 2px solid var(--cream); border-radius: 10px; background: #fffdf5; color: var(--ink);
}
.gate-form .cta-btn { cursor: pointer; }
.gate-error { color: #ffb4a8; font-family: var(--font-marker); margin: 0; }
.gate-back { margin: 8px 0 0; }
.gate-back a { color: var(--cream); opacity: 0.8; text-decoration: none; font-family: var(--font-marker); }

.copyright {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 0;
}

/* ---------- responsive ---------- */

/* Stack the two hero cards a little early: below this the gap between them is
   too tight for the Howdy bubble to sit between them without overlapping the
   card text. Stacked, the bubble flows safely in between. */
@media (max-width: 1000px) {
  .hero-cards { grid-template-columns: 1fr; }
  .hero-bubble { position: static; transform: rotate(-4deg); margin: 0 auto 16px; }
}

@media (max-width: 720px) {
  /* the large negative margins/padding that let the hero content nestle
     into the mountains and let trees clip over the cards on desktop are
     fixed px values tuned for that layout — on a narrow stacked-card
     mobile view they're way oversized relative to the shorter mountain
     graphic, so scale them way down here */
  .hero-inner { margin-top: -20px; }
  .hero-card { padding: 28px 20px 40px; }
  .hero-forest { margin-top: -30px; }

  .cast-row { flex-wrap: wrap; }
  .art-figure { flex: 1 1 40%; }

  /* nav collapses into a hamburger dropdown at phone widths */
  .header-inner { flex-wrap: nowrap; }
  .nav-toggle { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: 2px solid var(--paper-line);
    box-shadow: 0 8px 16px rgba(23, 11, 17, 0.12);
    padding: 6px 0;
  }

  .nav-open .main-nav { display: flex; }

  .main-nav a {
    padding: 12px 24px;
    border-bottom: none;
    font-size: 1.1rem;
  }

  .main-nav a:hover { border-color: transparent; background: var(--cream-deep); }

  /* dropdown groups become inline accordions inside the hamburger panel */
  .nav-group { position: static; width: 100%; }
  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 12px 24px;
    font-size: 1.1rem;
    border-bottom: none;
  }
  .nav-menu {
    position: static;
    transform: none;
    display: none;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--cream-deep);
    padding: 0;
  }
  .nav-group.is-open .nav-menu { display: flex; }
  .nav-menu a { padding: 10px 24px 10px 42px; border-radius: 0; }
  .nav-flat {
    display: block;
    padding: 12px 24px;
    font-size: 1.1rem;
    border-bottom: none;
  }
  .nav-flat:hover { border-color: transparent; background: var(--cream-deep); }
  /* nav panel is out of flow on mobile — group the burger + account together on
     the right (logo left), instead of space-between spreading the burger to the middle */
  .nav-toggle { margin-left: auto; }
  .header-account { margin-left: 0; }

  /* stacked (column) process: align-items:center from the desktop row rule
     would center each child at its own intrinsic width and blow past the
     viewport, so stretch them and let the flex children shrink to fit */
  .process-row { flex-direction: column; align-items: stretch; }
  .process-panels,
  .process-copy { flex-basis: auto; min-width: 0; }
}

/* ================= about page — field journal ================= */
.journal-page {
  padding: 56px 0 96px;
  /* misty Montashka forest backing (softly blurred, baked into the image) that
     scrolls with the page: sky/mountains up top, down to the pines */
  background-color: var(--cream-deep);
  background-image: url(../images/about-paper-bg.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.journal-paper {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  color: var(--ink);
  background: #f7f2df;
  /* faint ruled lines */
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(23, 11, 17, 0.11) 33px 34px);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 20px 44px rgba(23, 11, 17, 0.32), inset 0 0 0 10px rgba(255, 255, 255, 0.28);
  padding: 52px 60px 64px 84px;
  overflow: hidden;
}

/* red margin rule down the left */
.journal-paper::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 58px;
  width: 2px;
  background: rgba(163, 45, 45, 0.4);
}

.journal-title {
  font-family: var(--font-hand);
  font-size: clamp(2.3rem, 6vw, 3.1rem);
  line-height: 1;
  margin-bottom: 12px;
}
.journal-head {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  margin: 40px 0 6px;
}
.journal-entry {
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.55;
  margin-bottom: 6px;
}
.journal-entry a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(163, 45, 45, 0.6);
  text-underline-offset: 2px;
}
.journal-entry a:hover { text-decoration-color: var(--ink); }

/* taped photos */
.polaroid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 60px 0 12px;
}
.jr-polaroid {
  position: relative;
  width: 194px;
  background: #fff;
  border: 1px solid rgba(23, 11, 17, 0.25);
  padding: 9px 9px 32px;
  box-shadow: 4px 6px 13px rgba(23, 11, 17, 0.26);
}
.jr-polaroid:nth-child(3n+1) { transform: rotate(-3deg); }
.jr-polaroid:nth-child(3n+2) { transform: rotate(2.4deg); }
.jr-polaroid:nth-child(3n+3) { transform: rotate(-1.4deg); }
.jr-polaroid img {
  width: 100%;
  height: 152px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.jr-polaroid figcaption {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-marker);
  font-size: 0.86rem;
}
/* washi-tape tab — sits above the photo, always on top */
.jr-polaroid::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 66px; height: 22px;
  background: rgba(187, 210, 194, 0.85);
  border: 1px solid rgba(23, 11, 17, 0.14);
  z-index: 6;                 /* above the (transformed) photo */
}
.jr-polaroid:nth-child(even)::before {
  transform: translateX(-50%) rotate(5deg);
  background: rgba(251, 210, 187, 0.8);
}

/* find-me links row */
.journal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 10px;
  font-family: var(--font-marker);
  font-size: 1.05rem;
}
.journal-links a {
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.journal-links a:hover { border-color: var(--ink); }

/* ---- doodles (placeholders — swap the inline SVGs for the real ones) ---- */
.doodle {
  position: absolute;
  pointer-events: none;
  color: var(--ink);
  z-index: 3;
}
.doodle svg { display: block; width: 100%; height: 100%; }
.doodle-note {
  font-family: var(--font-marker);
  font-size: 0.9rem;
  color: rgba(23, 11, 17, 0.62);
}
/* inline sparkle sits next to the title */
.doodle-inline {
  display: inline-block;
  width: 0.85em; height: 0.85em;
  vertical-align: 0.15em;
  margin-left: 4px;
  color: var(--accent-warm-mid);
}
.d-sparkle-1 { top: 44px; right: 60px; width: 46px; height: 46px; transform: rotate(-8deg); color: var(--sage); }
.d-arrow-me  { top: 300px; right: 74px; width: 118px; height: 92px; }
.d-sprig     { bottom: 40px; right: 54px; width: 96px; height: 96px; opacity: 0.75; }
.d-heart     { bottom: 150px; left: 20px; width: 30px; height: 30px; color: var(--peach); }

@media (max-width: 720px) {
  .journal-paper { padding: 44px 26px 52px 52px; }
  .journal-paper::before { left: 30px; }
  .d-arrow-me, .d-sparkle-1, .d-sprig, .d-heart { display: none; }
}

/* "that's me!" arrow anchored to the self-portrait polaroid */
.jr-pin { position: absolute; top: -50px; left: -52px; width: 118px; height: 74px; color: var(--ink); pointer-events: none; z-index: 4; }
.jr-pin .doodle-note { position: absolute; top: -2px; left: 0; white-space: nowrap; transform: rotate(-6deg); }
.jr-pin svg { position: absolute; bottom: -2px; right: 6px; width: 58px; height: 50px; }
@media (max-width: 720px) { .jr-pin { display: none; } }

/* zoomed-in crop for Jess's self-portrait polaroid */
.jr-me .jr-photo { display: block; overflow: hidden; height: 152px; }
.jr-me .jr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.7);
  transform-origin: 50% 52%;
}

/* ---------- process page: collapsible "finished piece" reveal ---------- */
.reveal {
  max-width: 1100px;
  margin: 26px auto 0;
  padding: 0 24px;
}
.reveal > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-marker);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--butter);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 9px 22px;
  box-shadow: 3px 3px 0 rgba(23, 11, 17, 0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 rgba(23, 11, 17, 0.2); }

/* + / − toggle icon */
.reveal-icon { position: relative; width: 15px; height: 15px; }
.reveal-icon::before,
.reveal-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.reveal-icon::before { top: 6px; left: 0; width: 15px; height: 3px; }
.reveal-icon::after  { left: 6px; top: 0; width: 3px; height: 15px; }
.reveal[open] .reveal-icon::after { transform: scaleY(0); opacity: 0; }
.reveal[open] > summary { border-radius: 16px; margin-bottom: 16px; }

.reveal-figure {
  margin: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
  background: var(--cream);
}
.reveal-figure img { width: 100%; display: block; }
.reveal-figure figcaption {
  font-family: var(--font-marker);
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 12px 16px;
}

/* ---------- process page: a "set" — finished piece + collapsible steps ---------- */
.set-finished {
  margin: 0 auto;
  padding: 0;                 /* override .wrap's side padding so the border hugs the image */
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
  line-height: 0;
}
.set-finished img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;   /* hug the rounded frame, no cream corners */
}
.set-finished img { width: 100%; display: block; }

/* the reveal holds the step strip; give the opened steps some breathing room */
.reveal[open] .step-strip { margin-top: 4px; }

/* ---------- store page ---------- */
.store-section { background: var(--cream-deep); min-height: 40vh; }

.shop-embed { min-height: 200px; }

/* placeholder card shown when the shop is not connected yet (see js/shop-config.js) */
.shop-placeholder {
  max-width: 620px;
  margin: 10px auto 0;
  text-align: center;
  background: var(--cream);
  border: 3px dashed var(--ink);
  border-radius: 16px;
  padding: 44px 32px;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.12);
}
.shop-placeholder-badge {
  display: inline-block;
  font-family: var(--font-marker);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
  padding: 4px 16px;
  margin-bottom: 16px;
}
.shop-placeholder p { font-family: var(--font-hand); font-size: 1.4rem; margin: 0; }
.shop-placeholder-sub { font-size: 1rem !important; color: var(--ink-soft); margin-top: 14px !important; }
.shop-placeholder-sub a { text-decoration: underline; text-underline-offset: 2px; }

/* contact form: confirmation shown after the letter flies off */
.letter-sent {
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  line-height: 1.35;
  color: var(--cream);
  max-width: 26ch;
  margin: 30px auto 0;
}

/* ---------- comic reader (/read/) ---------- */
.read-section { background: var(--cream-deep); }

.read-join {
  max-width: 560px;
  margin: 0 auto 34px;
  text-align: center;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.14);
}
.read-join-lead { font-family: var(--font-hand); font-size: 1.5rem; margin: 0 0 12px; }
.read-join-note { color: var(--ink-soft); font-size: 0.95rem; margin: 12px 0 0; }

.drop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.drop-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 4px 5px 0 rgba(23, 11, 17, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
a.drop-card:hover { transform: translateY(-4px); box-shadow: 6px 8px 0 rgba(23, 11, 17, 0.2); }

.drop-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--accent-warm);
  overflow: hidden;
}
.drop-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.drop-lock { font-size: 2.4rem; opacity: 0.55; }

.drop-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  font-family: var(--font-marker);
}
.drop-meta strong { font-size: 1.05rem; }
.drop-sub-line { font-size: 0.85rem; color: var(--ink-soft); }
.drop-free {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.75rem;
  background: var(--sage);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
}
.drop-locked { opacity: 0.92; }
.drop-subscribe {
  margin-top: 6px;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--ink);
}

/* the drop itself: vertical scroll of pages */
.drop-reader {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drop-page {
  width: 100%;
  display: block;
  border: 2px solid var(--ink);
  border-radius: 4px;
}
.read-back { max-width: 1120px; margin: 0 auto 10px; font-family: var(--font-marker); }
.read-back a { border-bottom: 2px solid transparent; }
.read-back a:hover { border-color: var(--ink); }
.read-back-bottom { margin: 18px auto 0; }

/* optional blurb under a drop title */
.drop-note {
  max-width: 720px;
  margin: 0 auto 22px;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-body);
}

/* ---------- creator dashboard (/admin/) ---------- */
.admin-body { background: var(--cream); }
.admin-bar {
  background: var(--ink);
  color: var(--cream);
  padding: 12px 0;
}
.admin-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-bar strong { font-family: var(--font-hand); font-size: 1.3rem; }
.admin-bar nav { display: flex; gap: 18px; font-family: var(--font-marker); font-size: 0.95rem; }
.admin-bar a { color: var(--cream); border-bottom: 2px solid transparent; }
.admin-bar a:hover { border-color: var(--cream); }
.admin-burger { display: none; background: none; border: 2px solid var(--cream); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.admin-burger-box { display: block; width: 22px; height: 16px; position: relative; }
.admin-burger-box span { position: absolute; left: 0; right: 0; height: 2.5px; background: var(--cream); border-radius: 2px; transition: transform .2s ease, opacity .2s ease, top .2s ease; }
.admin-burger-box span:nth-child(1) { top: 0; }
.admin-burger-box span:nth-child(2) { top: 6.75px; }
.admin-burger-box span:nth-child(3) { top: 13.5px; }
.admin-bar.is-open .admin-burger-box span:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
.admin-bar.is-open .admin-burger-box span:nth-child(2) { opacity: 0; }
.admin-bar.is-open .admin-burger-box span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }
@media (max-width: 720px) {
  .admin-burger { display: block; }
  .admin-bar nav { display: none; flex-direction: column; gap: 0; width: 100%; order: 3; padding-top: 8px; font-size: 1.05rem; }
  .admin-bar.is-open nav { display: flex; }
  .admin-bar nav a { padding: 10px 4px; border-bottom: 1px solid rgba(243, 239, 216, 0.16); }
  .admin-bar nav a:hover { border-color: rgba(243, 239, 216, 0.4); }
}

.admin-main { padding: 34px 24px 80px; }
.admin-h1 { font-family: var(--font-hand); font-size: 2rem; margin: 0; }
.admin-h2 { font-family: var(--font-hand); font-size: 1.4rem; margin: 34px 0 12px; }
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-muted { color: var(--ink-soft); font-size: 0.88rem; }
.admin-err { color: #a32d2d; font-family: var(--font-marker); }
.admin-ok { color: #2f7d43; font-family: var(--font-marker); }
.admin-warn { color: #8a5a1a; font-family: var(--font-marker); background: #fbf3e2; border: 1.5px solid #e6cf9e; border-radius: 8px; padding: 8px 12px; }
.admin-warn code, .admin-muted code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* launch emails */
.launch-compose { max-width: 640px; }
.launch-compose textarea { font-family: var(--font-marker); font-size: 1rem; line-height: 1.5; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--cream); resize: vertical; }
.launch-target { font-family: var(--font-marker); color: var(--ink-soft); margin: 0 0 4px; }
.launch-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.launch-item { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px 14px; background: var(--cream); }
.launch-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.launch-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.launch-actions { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 560px) { .launch-item { flex-wrap: wrap; } .launch-actions { width: 100%; } }

.admin-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 0 0 10px; }
.admin-form label { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-marker); }
.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="date"],
.admin-form input[name="title"],
.admin-form textarea,
.admin-form input[type="file"] {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 9px 11px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.admin-form .cta-btn { align-self: flex-start; cursor: pointer; }
.admin-login { margin-top: 20px; }

.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 14px 16px;
}
.admin-item-thumb { flex: 0 0 auto; display: block; width: 96px; height: 96px; border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--cream-deep); }
.admin-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-thumb-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0.65rem; color: var(--ink-soft); text-align: center; line-height: 1.15; }
.admin-item-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 200px; min-width: 0; }
.admin-item-main strong { font-size: 1.05rem; }
.admin-note-preview { color: var(--ink-soft); font-size: 0.85rem; font-style: italic; }
.admin-item-actions { display: flex; align-items: center; gap: 8px; }

.admin-btn {
  font-family: var(--font-marker);
  font-size: 0.9rem;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.admin-btn:hover { background: var(--accent-warm); }
.admin-btn[disabled] { opacity: 0.4; cursor: default; }
.admin-btn-danger { background: #f0d2d2; }
.admin-btn-danger:hover { background: #e6b8b8; }
.admin-item-actions form { margin: 0; }

.admin-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.admin-page { margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.admin-page img { width: 100%; display: block; }
.admin-page-actions { display: flex; align-items: center; gap: 6px; padding: 8px; flex-wrap: wrap; }
.admin-page-actions form { margin: 0; }

/* contact page: dark page/overscroll background so no cream shows past the
   footer (matches the forest/night, not the default cream) */
body.page-contact { background: var(--night); }
html:has(.page-contact) { background: var(--night); }

/* mail club: two-tier list inside the card */
.tier-list { margin: 2px 0 6px; }
.tier-list .tier { margin: 2px 0; }
.tier-list .tier strong { font-weight: 700; }

/* ---------- cutesy horizontal scrollbar + grab-drag for the wide charts ---------- */
.height-chart--family,
.height-chart--side {
  cursor: grab;
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: #779c96 transparent;         /* Firefox: thumb / track (tree green) */
  scroll-behavior: smooth;
}
.height-chart--family.is-dragging,
.height-chart--side.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;      /* don't fight the drag */
  user-select: none;
}
/* the figures are buttons (pointer) — keep grab as the "empty space" hint */
.height-chart--family .chart-slot,
.height-chart--side .chart-slot { cursor: pointer; }

/* WebKit / Blink (Chrome, Safari, most mobile): a rounded pill scrollbar */
.height-chart--family::-webkit-scrollbar,
.height-chart--side::-webkit-scrollbar {
  height: 14px;
}
.height-chart--family::-webkit-scrollbar-track,
.height-chart--side::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 12px;
}
.height-chart--family::-webkit-scrollbar-thumb,
.height-chart--side::-webkit-scrollbar-thumb {
  background: #779c96;                 /* sage-green of the trees above the section */
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.height-chart--family::-webkit-scrollbar-thumb:hover,
.height-chart--side::-webkit-scrollbar-thumb:hover {
  background: #6b8f89;
}

/* ---------- email signup toast (free updates + Spotify playlist reward) ---------- */
.signup-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  width: min(360px, calc(100vw - 32px));
  transform: translateY(150%);       /* parked off the bottom until shown */
  opacity: 0;
  transition: transform 0.55s cubic-bezier(.16, 1, .3, 1), opacity 0.45s ease;
}
.signup-toast[hidden] { display: none; }             /* fully gone until JS reveals it */
.signup-toast.is-visible { transform: translateY(0); opacity: 1; }

.signup-card {
  position: relative;
  margin: 0;
  padding: 22px 22px 24px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 24px 42px 26px 40px / 40px 24px 44px 26px;   /* wonky, like the cards */
  box-shadow: 6px 8px 0 rgba(23, 11, 17, 0.28);
  text-align: center;
}
.signup-toast-close {
  position: absolute;
  top: 4px;
  right: 12px;
  z-index: 2;
  padding: 4px 6px;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.signup-toast-close:hover { color: var(--ink-soft); }
.signup-toast-title {
  font-family: 'Surph Serif', serif;
  font-size: 1.5rem;
  margin: 0 0 6px;
}
.signup-blurb {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0 auto 16px;
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signup-form input[type="email"] {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  padding: 11px 14px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
}
.signup-form input[type="email"]:focus {
  outline: 3px solid var(--sage);
  outline-offset: 1px;
}
.signup-form .cta-btn { width: 100%; }

/* honeypot — visually gone, off-screen, never focusable */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.signup-error {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: #a3322b;
  font-family: var(--font-hand);
  font-size: 1.05rem;
}
.signup-success-title {
  font-family: 'Surph Serif', serif;
  font-size: 2rem;
  margin-bottom: 6px;
}
.playlist-link { margin-top: 16px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- process full-screen viewer ---------- */
.proc-open { cursor: zoom-in; }
.proc-open-hint {
  display: block;
  margin-top: 10px;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--ink-soft);
  text-align: center;
}
.step-frame[role="button"] { cursor: zoom-in; }
.step-frame[role="button"] .step-img { transition: transform 0.15s ease; }
.step-frame[role="button"]:hover .step-img { transform: scale(1.02); }

.proc-viewer {
  position: fixed;
  inset: 0;
  z-index: 1300;   /* above the signup toast (1200) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(23, 11, 17, 0.93);
}
.proc-viewer[hidden] { display: none; }
.proc-stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(1100px, 88vw);
}
.proc-stage img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border: 3px solid var(--cream);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5);
}
.proc-caption {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--cream);
  text-align: center;
}
.proc-close {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 46px;
  height: 46px;
  border: none;
  background: none;
  color: var(--cream);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}
.proc-nav {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.proc-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.proc-nav:disabled { opacity: 0.28; cursor: default; }

@media (max-width: 600px) {
  .proc-viewer { padding: 10px; gap: 4px; }
  .proc-nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .proc-caption { font-size: 1.2rem; }
}

/* ---------- minimized signup launcher (reopens the mail toast) ---------- */
.signup-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1150;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--peach);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(23, 11, 17, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.signup-launcher[hidden] { display: none; }
.signup-launcher:not([hidden]) { animation: launcher-pop 0.18s ease-out; }
.signup-launcher:hover { transform: translateY(-2px) rotate(-5deg); background: var(--accent-warm-mid); }
.signup-launcher svg { width: 28px; height: 28px; display: block; }
@keyframes launcher-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ---------- mobile: full-bleed, immersive prologue pages ---------- */
@media (max-width: 720px) {
  .prologue-strip { padding-left: 0; padding-right: 0; }
  .prologue-strip .strip-frame,
  .prologue-strip .strip-img { width: 100%; }
  .prologue-strip .strip-img { border-left: none; border-right: none; }  /* edge to edge */
}

/* ---------- polaroid "pull toward you" viewer ---------- */
.jr-polaroid { transition: box-shadow 0.15s ease; }
.jr-polaroid:hover,
.jr-polaroid:focus-visible {
  box-shadow: 6px 10px 22px rgba(23, 11, 17, 0.36);   /* lift hint (no transform — keeps the tilt) */
  outline: none;
}

.polaroid-viewer {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(23, 11, 17, 0.74);
  perspective: 1100px;               /* gives the pull real depth */
  cursor: zoom-out;
}
.polaroid-viewer[hidden] { display: none; }

.polaroid-big {
  position: relative;
  width: auto;
  max-width: min(500px, 92vw);
  margin: 0;
  background: #fff;
  border: 1px solid rgba(23, 11, 17, 0.25);
  padding: 16px 16px 84px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  transform-origin: center bottom;   /* hinge at the bottom edge */
  animation: polaroid-pull 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) both;
  cursor: default;
}
.polaroid-big img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(460px, 84vw);
  max-height: 72vh;
  object-fit: contain;   /* show the whole photo, no crop */
}
.polaroid-big figcaption {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-marker);
  font-size: 1.35rem;
  color: var(--ink);
}

/* the polaroid tips up from the bottom edge and grows toward the viewer */
@keyframes polaroid-pull {
  0% {
    transform: rotateX(54deg) scale(0.66) translateY(26px);
    opacity: 0;
  }
  55% { opacity: 1; }
  100% {
    transform: rotateX(0deg) scale(1) translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid-big { animation-duration: 0.001s; }
}

/* ---------- about page (reference redesign) ---------- */
.about-page .journal-head { font-size: 1.5rem; margin-top: 26px; }
.about-worldhead { text-transform: uppercase; letter-spacing: 0.5px; }
.about-aside { font-family: var(--font-marker); }

/* the journal paper is already a narrow measure (732px inside its padding),
   so the extra 60ch cap just left a ragged gutter down the right. Let the
   paragraphs run to the edge of the page and wrap around the doodles. */
.about-page .journal-entry { max-width: none; }

.about-row { display: flex; gap: 30px; align-items: flex-start; }
.about-row .about-col { flex: 1 1 auto; min-width: 0; }

/* doodle placeholders — swap for the real red-ink drawings later */
.doodle-ph {
  margin: 16px 0;
  border: 2.5px dashed #c76b62;
  border-radius: 12px;
  background: rgba(199, 107, 98, 0.06);
  color: #b0524b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 18px 16px;
  transform: rotate(-1deg);
}
.doodle-ph-tag  { font-family: var(--font-hand); font-size: 0.85rem; opacity: 0.8; }
.doodle-ph-note { font-family: var(--font-marker); font-size: 1.15rem; }
.doodle-ph-hi   { font-family: var(--font-marker); font-size: 1.4rem; margin-top: 4px; }

.doodle-ph--wide     { min-height: 240px; }
.doodle-ph--portrait { flex: 0 0 210px; align-self: flex-start; min-height: 230px; transform: rotate(2deg); margin-top: 4px; }
.doodle-ph--callout  { float: right; width: 230px; min-height: 96px; margin: 4px 0 14px 24px; transform: rotate(1.5deg); }
.doodle-ph--desert   { flex: 0 0 300px; align-self: flex-start; min-height: 220px; transform: rotate(1deg); }
.doodle-ph--jess     { width: 260px; min-height: 290px; margin: 0; transform: rotate(-1deg); }

/* closing scene: two speech bubbles flanking a Jess doodle */
.about-outro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 34px;
}
.about-bubble {
  align-self: center;
  max-width: 190px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 180px 24px 150px 20px / 22px 160px 26px 190px;
  padding: 12px 20px;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  box-shadow: 4px 4px 0 rgba(23, 11, 17, 0.12);
}
.about-bubble--l { transform: rotate(-2deg); border-radius: 24px 180px 20px 150px / 160px 22px 190px 26px; }
.about-bubble--r { transform: rotate(2deg); }

.about-cta { text-align: center; margin: 26px 0 6px; }
.read-story-btn {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 36px;
  border: 3px solid var(--ink);
  border-radius: 42px 16px 44px 14px / 16px 42px 14px 44px;
  box-shadow: 5px 5px 0 rgba(23, 11, 17, 0.18);
  transition: transform 0.15s ease;
}
.read-story-btn:hover { transform: translateY(-2px) rotate(-1deg); }

@media (max-width: 720px) {
  .about-row { flex-direction: column; gap: 6px; }
  .doodle-ph--portrait,
  .doodle-ph--desert { flex-basis: auto; width: 100%; }
  .doodle-ph--callout { float: none; width: 100%; margin: 12px 0; }
  .doodle-ph--jess { width: 100%; }
}

/* about-page: reuse the self-portrait polaroid, tucked top-right */
.about-portrait {
  flex: 0 0 auto;
  align-self: flex-start;
  transform: rotate(2.5deg);
  margin-top: 6px;
}
/* linked callout note (RAGJAM history) */
.doodle-ph-link {
  color: #b0524b;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
}
.doodle-ph-link:hover { color: #8f3f39; }
@media (max-width: 720px) {
  .about-portrait { align-self: center; }
}

/* portfolio page: a slightly darker cream than the default */
body.page-portfolio { background: #e8e1c2; }

/* about page: the leads drawn as a free doodle (no polaroid frame), with a
   hand-drawn arrow curving down to point at them */
.about-leads-doodle {
  position: relative;
  width: min(340px, 100%);
  margin: 78px 0 12px;   /* top room for the arrow */
  transform: rotate(-1.5deg);
  text-align: center;
}
.about-leads-doodle img { width: 100%; height: auto; display: block; }
.about-leads-doodle .rascals-arrow {
  position: absolute;
  top: -62px;    /* vertically centered in the gap above the drawing */
  left: -6px;    /* over on the left, above Raegen */
  width: 82px;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 2;
}

/* process page: click-to-play timelapse (poster image becomes the video) */
.video-player { position: relative; margin: 22px auto 0; line-height: 0; }
.process-video {
  display: block;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
  background: #000;
  cursor: pointer;
}
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 104px; height: 104px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
  /* soft shadow so the cream button reads on any frame */
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}
.video-play-btn img { width: 100%; height: 100%; display: block; }
.video-play-btn:hover { transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); }
.video-player.is-playing .video-play-btn { display: none; }

/* ---------- custom icons ---------- */
/* mail launcher envelope */
.signup-launcher .launcher-icon { width: 30px; height: 30px; display: block; }
/* music note on the playlist button */
.playlist-note { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-left: 3px; }
/* portfolio lightbox arrows (dark icons on the cream buttons) */
.lb-btn { display: flex; align-items: center; justify-content: center; }
.lb-prev img, .lb-next img { width: 56%; height: 56%; object-fit: contain; display: block; }

/* RAGJAM history arrow doodle (about page) — floats off to the right */
.ragjam-doodle {
  float: right;
  width: 44%;
  max-width: 330px;
  margin: 0 0 14px 30px;
  transition: transform 0.15s ease;
}
.ragjam-doodle svg { width: 100%; height: auto; display: block; fill: var(--ink); }
.ragjam-doodle text { fill: var(--ink); }
.ragjam-doodle:hover { transform: rotate(-1.5deg) scale(1.02); }

/* desert scene doodle (about page world section) */
.about-desert { float: right; width: 380px; max-width: 48%; margin: 6px 0 10px 30px; }
.about-desert img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .about-desert { float: none; width: 100%; max-width: none; margin: 8px 0 14px; }
  .ragjam-doodle { float: none; width: 100%; max-width: 340px; margin: 8px auto 14px; }
}

.about-outro { clear: both; }

/* process page: grass divider bg matches the cream section above; the SVG's
   own ground is cream-deep, so the step-section below stays cream-deep (the
   grass colour). The page title sits nestled between the trees. */
.grass-divider--cream { background: var(--cream); }
.grass-titled { position: relative; }
.grass-title-wrap {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 66%;
  text-align: center;
  line-height: normal;          /* .forest-divider sets line-height:0 for the img */
  z-index: 2;
  pointer-events: none;
}
.grass-title { margin: 0 0 8px; line-height: 1.05; }
.grass-blurb { margin: 0; line-height: 1.4; }
/* mobile: the divider is too short to hold the text, so stack the title +
   blurb above the trees instead of overlaying them */
@media (max-width: 720px) {
  .grass-titled { display: flex; flex-direction: column-reverse; }
  .grass-title-wrap {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    padding: 16px 22px 12px;
    line-height: normal;
  }
  .grass-title { font-size: 1.7rem; margin-bottom: 6px; }
  .grass-blurb { font-size: 1rem; }
}

/* ================= account / auth pages ================= */
.wrap-narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.auth-section { padding: 56px 0 90px; }

.auth-card {
  background: #f7f2df;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 8px 0 rgba(23, 11, 17, 0.14);
  padding: 34px 32px 30px;
}
.auth-card .section-title { margin: 0 0 10px; }
.auth-lead { color: var(--ink-soft); line-height: 1.5; margin: 0 0 20px; }
.auth-hint { font-size: 0.85rem; color: var(--ink-soft); font-weight: normal; }
.auth-alt  { margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.auth-alt a, .auth-lead a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(163,45,45,0.6); text-underline-offset: 2px; }

.auth-error {
  background: rgba(163, 45, 45, 0.1);
  border: 1.5px solid rgba(163, 45, 45, 0.55);
  color: #8f2f2f;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label {
  font-family: var(--font-marker);
  font-size: 0.95rem;
  margin-top: 12px;
}
.auth-form input {
  font: inherit;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fffdf5;
  color: var(--ink);
}
.auth-form input:focus { outline: 2px solid var(--accent-warm-mid); outline-offset: 1px; }
.auth-form .cta-btn { margin-top: 20px; width: 100%; cursor: pointer; text-align: center; }

/* newsletter opt-in checkbox (checkbox left, wrapping text right) */
.auth-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.35;
  cursor: pointer;
}
.auth-check input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  accent-color: #a32d2d;
  cursor: pointer;
}

.account-status {
  margin: 22px 0 6px;
  padding: 18px 18px;
  border-radius: 10px;
  border: 2px dashed rgba(23, 11, 17, 0.3);
}
.account-status--on  { border-color: rgba(87, 140, 90, 0.6); background: rgba(187, 210, 194, 0.28); }
.account-status--off { background: rgba(231, 208, 166, 0.28); }
.account-status-line { margin: 0 0 14px; font-family: var(--font-marker); }
.account-status .cta-btn { cursor: pointer; }

.auth-logout { margin-top: 22px; }
.text-btn {
  background: none;
  border: none;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(163,45,45,0.6);
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}
.text-btn:hover { color: var(--ink); }

/* account icon button in the header corner (placeholder icon for now) */
.header-account {
  margin-left: 22px;              /* sits just after the right-aligned nav */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;             /* hover halo; the badge SVG draws its own ring */
  transition: background 0.15s ease;
}
.header-account img { width: 100%; height: 100%; display: block; }
.header-account .avatar-img { object-fit: cover; border-radius: 50%; border: 2px solid var(--ink); }
.header-account:hover { background: var(--cream-deep); }

/* profile editor bits */
.auth-notice {
  background: rgba(187, 210, 194, 0.35);
  border: 1.5px solid rgba(87, 140, 90, 0.55);
  color: #3f6f47;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 0.95rem;
}
.auth-form textarea {
  font: inherit;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fffdf5;
  color: var(--ink);
  resize: vertical;
}
.auth-form textarea:focus { outline: 2px solid var(--accent-warm-mid); outline-offset: 1px; }
.auth-form input[type="file"] { font: inherit; font-size: 0.9rem; padding: 6px 0; }
.profile-avatar-row { display: flex; gap: 16px; align-items: flex-start; margin: 6px 0 4px; }
.avatar-preview {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

/* public profile view */
.profile-head { display: flex; gap: 18px; align-items: center; margin-bottom: 10px; }
.profile-avatar {
  flex: 0 0 auto;
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-role {
  font-family: var(--font-marker);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--sage);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 2px 9px;
}
.profile-bio { color: var(--ink-soft); line-height: 1.6; margin: 6px 0 0; }
.profile-favs { margin-top: 22px; }
.profile-favs .admin-h2 { font-size: 1.2rem; margin: 0 0 8px; }
.fav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fav-list a { color: var(--ink); text-decoration: none; font-family: var(--font-marker); }
.fav-list a:hover { text-decoration: underline; text-decoration-color: rgba(163,45,45,0.6); }

/* ---- admin: community moderation ---- */
.admin-h2 { font-family: var(--font-hand); font-size: 1.4rem; margin: 30px 0 12px; display: flex; align-items: center; gap: 10px; }
.admin-notice { background: rgba(187,210,194,0.4); border: 1.5px solid rgba(87,140,90,0.55); color: #3f6f47; border-radius: 8px; padding: 9px 13px; margin: 0 0 14px; }
.mod-count { font-family: var(--font-marker); font-size: 0.8rem; background: var(--ink); color: var(--cream); border-radius: 20px; padding: 1px 9px; }

.mod-avatar-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.mod-avatar-card { width: 150px; text-align: center; border: 2px solid var(--ink); border-radius: 10px; padding: 12px; background: #fff; }
.mod-avatar-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 2px solid var(--ink); }
.mod-avatar-card p { margin: 8px 0; font-size: 0.85rem; word-break: break-word; }

.mod-btn { font-family: var(--font-marker); font-size: 0.82rem; cursor: pointer; background: var(--cream); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 10px; margin: 2px 0; }
.mod-btn:hover { background: var(--cream-deep); }
.mod-btn.mod-ok { background: var(--sage); }
.mod-btn.mod-no { background: var(--peach); }

.mod-table-wrap { overflow-x: auto; }
.mod-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mod-table th, .mod-table td { text-align: left; padding: 10px 12px; border-bottom: 1.5px solid rgba(23,11,17,0.15); vertical-align: top; }
.mod-table th { font-family: var(--font-marker); }
.mod-email { color: var(--ink-soft); font-size: 0.82rem; }
.mod-actions form { margin: 0; }
.mod-tag { display: inline-block; font-size: 0.72rem; font-family: var(--font-marker); background: var(--accent-warm); border: 1px solid var(--ink); border-radius: 12px; padding: 1px 7px; }
.mod-tag--warn { background: var(--peach); }
.mod-muted { color: var(--ink-soft); font-size: 0.82rem; }

/* ---- favorite chapter button + comments ---- */
.fav-form { margin: 4px 0 20px; }
.fav-btn {
  font-family: var(--font-marker);
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 40px 14px 40px 14px / 14px 40px 14px 40px;
  padding: 7px 16px;
  transition: background 0.15s ease;
}
.fav-btn:hover { background: var(--cream-deep); }
.fav-btn.is-fav { background: var(--peach); }

.comments { max-width: 720px; margin: 40px auto 0; }
.comments-title { font-family: var(--font-hand); font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.comments-gate { color: var(--ink-soft); }
.comments-gate a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(163,45,45,0.6); }

.comment-form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 26px; }
.comment-form textarea {
  font: inherit; padding: 12px 14px; border: 2px solid var(--ink);
  border-radius: 10px; background: #fffdf5; color: var(--ink); resize: vertical;
}
.comment-form textarea:focus { outline: 2px solid var(--accent-warm-mid); outline-offset: 1px; }
.comment-form .cta-btn { align-self: flex-start; cursor: pointer; }

.comment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.comment { display: flex; gap: 12px; }
.comment-avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--ink); background: var(--cream);
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; font-size: 0.9rem; flex-wrap: wrap; }
.comment-meta a { font-family: var(--font-marker); color: var(--ink); }
.comment-time { color: var(--ink-soft); font-size: 0.82rem; }
.comment-hide { margin: 0; }
.comment-hide button { background: none; border: none; color: #b0524b; cursor: pointer; font-size: 0.78rem; text-decoration: underline; padding: 0; }
.comment-text { margin: 0; line-height: 1.5; color: var(--ink-soft); word-wrap: break-word; }
.comments-empty { color: var(--ink-soft); list-style: none; }

/* ---- forum + articles + member-area buttons ---- */
.wrap-wide-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.cta-btn--ink { background: var(--ink); color: var(--cream); }
.cta-btn--ink:hover { background: #2a1720; }
.account-links { margin: 16px 0 4px; }
.account-links a, .account-admin a { text-decoration: none; }
.account-admin { margin: 14px 0 4px; }

.forum-new { margin: 4px 0 22px; border: 2px dashed rgba(23,11,17,0.3); border-radius: 12px; padding: 10px 16px; }
.forum-new summary { cursor: pointer; font-family: var(--font-marker); }
.forum-new .comment-form { margin-top: 12px; }
.forum-new input[type="text"] { font: inherit; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: #fffdf5; }

.thread-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; }
.thread-row { padding: 14px 4px; border-bottom: 1.5px solid rgba(23,11,17,0.14); }
.thread-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.thread-title { font-family: var(--font-hand); font-size: 1.25rem; color: var(--ink); }
.thread-link:hover .thread-title { text-decoration: underline; text-decoration-color: rgba(163,45,45,0.6); }
.thread-meta { display: block; color: var(--ink-soft); font-size: 0.85rem; margin-top: 3px; }
.thread-op { border-bottom: 2px solid rgba(23,11,17,0.18); padding-bottom: 16px; margin-bottom: 20px; }
.thread-mod { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.thread-mod form { margin: 0; }

.article-card { border-bottom: 1.5px solid rgba(23,11,17,0.14); padding: 20px 0; }
.article-card-title { font-family: var(--font-hand); font-size: 1.6rem; margin: 0 0 4px; }
.article-card-title a { color: var(--ink); text-decoration: none; }
.article-card-title a:hover { text-decoration: underline; text-decoration-color: rgba(163,45,45,0.6); }
.article-meta { color: var(--ink-soft); font-size: 0.85rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.article-edit { color: #b0524b; text-decoration: underline; }
.article-excerpt { color: var(--ink-soft); line-height: 1.55; margin: 0 0 8px; }
.article-more { font-family: var(--font-marker); color: var(--ink); text-decoration: none; }
.article-more:hover { text-decoration: underline; text-decoration-color: rgba(163,45,45,0.6); }
.article-full .article-body { line-height: 1.7; color: var(--ink-soft); margin-top: 14px; }
.article-full .article-body a { color: var(--ink); }

.article-form label { display: block; font-family: var(--font-marker); margin-bottom: 12px; }
.article-form input[type="text"], .article-form textarea { display: block; width: 100%; font: inherit; margin-top: 5px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: #fffdf5; color: var(--ink); box-sizing: border-box; }
.article-publish { display: flex !important; align-items: center; gap: 8px; }
.article-form-actions { display: flex; gap: 10px; align-items: center; }

/* ================= account hub ================= */
.account-hub { padding: 48px 0 84px; }

.account-topbar { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.account-avatar-lg {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  overflow: hidden; border: 3px solid var(--ink); background: var(--cream);
  box-shadow: 4px 5px 0 rgba(23, 11, 17, 0.14);
}
.account-avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-name { font-family: var(--font-hand); font-size: 2rem; line-height: 1.05; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-role-pill {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px;
  background: var(--sage); border: 1.5px solid var(--ink); border-radius: 20px; padding: 2px 10px;
}
.account-email { margin: 3px 0 0; color: var(--ink-soft); font-size: 0.9rem; }

.account-nudge { background: rgba(231, 208, 166, 0.5); border: 1.5px solid var(--ink); border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; font-size: 0.95rem; }
.account-nudge a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(163,45,45,0.6); }

.account-membership {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 2px solid var(--ink); border-radius: 16px; padding: 18px 22px;
  box-shadow: 5px 6px 0 rgba(23, 11, 17, 0.12);
}
.account-membership--on  { background: rgba(187, 210, 194, 0.42); }
.account-membership--off { background: rgba(251, 210, 187, 0.38); }
.account-membership-text { display: flex; flex-direction: column; gap: 1px; }
.account-membership-text strong { font-size: 1.12rem; }
.account-membership-text span { color: var(--ink-soft); font-size: 0.92rem; }
.account-fineprint { color: var(--ink-soft); font-size: 0.82rem; margin: 9px 2px 0; }

.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
@media (max-width: 560px) { .account-grid { grid-template-columns: 1fr; } }

/* button-cards (all account actions are buttons now) */
.account-btn {
  font-family: var(--font-marker); color: var(--ink); text-decoration: none; cursor: pointer;
  border: 2px solid var(--ink); background: #fbf7e6;
  border-radius: 40px 16px 40px 16px / 16px 40px 16px 40px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.account-btn:hover { transform: translateY(-2px); box-shadow: 4px 6px 0 rgba(23, 11, 17, 0.15); }

.account-grid .account-btn { display: flex; flex-direction: column; padding: 15px 18px; }
.account-btn-ic { font-size: 1.5rem; line-height: 1; }
.account-btn-t  { font-size: 1.05rem; margin-top: 6px; }
.account-btn-s  { color: var(--ink-soft); font-size: 0.8rem; }
.account-btn--admin { background: var(--ink); color: var(--cream); }
.account-btn--admin .account-btn-s { color: rgba(243, 239, 216, 0.72); }

.account-membership .account-btn--primary {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; background: var(--peach);
  border-radius: 40px 14px 40px 14px / 14px 40px 14px 40px; white-space: nowrap;
}
.account-membership--on .account-btn--primary { background: var(--sage); }

.account-signout { margin-top: 22px; text-align: center; }
.account-btn--ghost { display: inline-block; background: none; padding: 9px 24px; color: var(--ink-soft); border-radius: 40px 14px 40px 14px / 14px 40px 14px 40px; }
.account-btn--ghost:hover { background: var(--cream-deep); color: var(--ink); box-shadow: none; transform: none; }

/* header account icon dropdown (quick links) */
.account-menu {
  position: fixed;
  z-index: 60;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 7px 0 rgba(23, 11, 17, 0.16);
  padding: 8px;
}
.account-menu[hidden] { display: none; }
.account-menu a, .account-menu button {
  font-family: var(--font-marker);
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  padding: 8px 14px;
  border-radius: 9px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
}
.account-menu a:hover, .account-menu button:hover { background: var(--cream-deep); }
.account-menu form { margin: 0; }

/* ---- rich-text article editor ---- */
.rte-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  border: 2px solid var(--ink); border-bottom: none; border-radius: 10px 10px 0 0;
  padding: 8px; background: var(--cream-deep);
}
.rte-toolbar button {
  font-family: var(--font-marker); font-size: 0.9rem; cursor: pointer;
  background: var(--cream); border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 9px; min-width: 30px;
}
.rte-toolbar button:hover { background: #fff; }
.rte-toolbar button:disabled { opacity: 0.6; cursor: default; }
.rte-size { font-family: var(--font-marker); font-size: 0.88rem; border: 1.5px solid var(--ink); border-radius: 6px; padding: 4px 6px; background: var(--cream); cursor: pointer; }
.admin-schedule { margin-bottom: 30px; }

/* Email Center */
.rte-color { width: 34px; height: 30px; padding: 0; border: 1.5px solid var(--ink); border-radius: 6px; background: none; cursor: pointer; vertical-align: middle; }
.email-form { max-width: 740px; }
.email-audience { border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px 16px; margin: 6px 0; display: flex; flex-direction: column; gap: 9px; }
.email-audience legend { font-family: var(--font-marker); padding: 0 6px; font-size: 0.95rem; }
.email-tag { display: flex; align-items: center; gap: 10px; font-family: var(--font-marker); cursor: pointer; }
.email-tag input { width: 18px; height: 18px; accent-color: #a32d2d; flex: none; }
.email-tag-count { color: var(--ink-soft); font-size: 0.85rem; }
.email-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.email-actions .cta-btn { width: auto; }
.email-test { display: inline-flex; align-items: center; gap: 8px; }
.email-test input, .email-template-bar input[type=text] { font: inherit; padding: 8px 11px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); }
.email-template-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 14px; border-top: 1px dashed rgba(23, 11, 17, 0.2); }
.email-template-load { display: inline-flex; align-items: center; gap: 6px; }
.email-template-bar select { font-family: var(--font-marker); padding: 6px 8px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--cream); cursor: pointer; }
.email-starter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.email-starter-bar select { font-family: var(--font-marker); padding: 6px 8px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--cream); cursor: pointer; }
.email-schedule { display: inline-flex; align-items: center; gap: 8px; }
.email-schedule input[type=datetime-local] { font: inherit; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); }
/* Email Center hub tabs */
.email-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); margin: 20px 0 0; }
.email-tab { cursor: pointer; font-family: var(--font-marker); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border: 2px solid var(--ink); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--cream-deep); color: var(--ink); margin-bottom: -2px; line-height: 1.1; }
.email-tab:hover { background: #e4dfc8; }
.email-tab.is-active { background: #fbf8ea; }
.email-tab .ti { font-size: 16px; }
.email-tab-badge { background: #a32d2d; color: #f7f2df; font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 20px; }
.email-panel { border: 2px solid var(--ink); border-top: none; border-radius: 0 0 12px 12px; padding: 20px; background: #fbf8ea; }
.email-panel > h2:first-child { margin-top: 0; }
/* Admin analytics */
.an-range { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.an-range-btn { font-size: 0.85rem; text-decoration: none; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 12px; background: #fbf8ea; }
.an-range-btn.is-on { background: #a32d2d; color: #f7f2df; }
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.an-tile { background: #fbf8ea; border: 2px solid var(--ink); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.an-tile-v { font-family: var(--font-hand); font-size: 1.9rem; line-height: 1; }
.an-tile-k { color: var(--ink-soft); font-size: 0.85rem; }
.an-chartbox { background: #fbf8ea; border: 2px solid var(--ink); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.an-chartbox .admin-h2 { margin-top: 0; }
.an-chart { width: 100%; height: auto; display: block; }
.an-chart rect { transition: opacity 0.1s; }
.an-chart rect:hover { opacity: 0.7; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.an-card { background: #fbf8ea; border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px; }
.an-card .admin-h2 { margin-top: 0; font-size: 1.05rem; }
.an-card-wide { grid-column: 1 / -1; }
.an-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.an-bars li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 9px; border-radius: 6px; overflow: hidden; font-size: 0.92rem; }
.an-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(163, 45, 45, 0.16); z-index: 0; }
.an-bar-label { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-bar-n { position: relative; z-index: 1; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* Admin dashboard */
.dash-status { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 26px; }
.dash-pill { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 16px; background: #fbf8ea; }
.dash-pill.is-locked { border-left: 8px solid #a32d2d; }
.dash-pill.is-live { border-left: 8px solid #2f7d4f; }
.dash-pill-k { font-family: var(--font-marker); }
.dash-pill-v { color: var(--ink-soft); }
.dash-attention { border: 2px solid var(--ink); border-radius: 12px; padding: 16px 20px; background: #fbf8ea; margin-bottom: 26px; }
.dash-attention .admin-h2 { margin-top: 0; }
.dash-attn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-attn-list a { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.dash-attn-list a:hover { text-decoration: underline; }
.dash-attn-n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; background: #a32d2d; color: #f7f2df; border-radius: 999px; font-family: var(--font-marker); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.dash-tile { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); background: #fbf8ea; border: 2px solid var(--ink); border-radius: 12px; padding: 16px; }
.dash-tile:hover { background: #fffdf5; }
.dash-tile-v { font-family: var(--font-hand); font-size: 2.1rem; line-height: 1; }
.dash-tile-k { color: var(--ink-soft); font-size: 0.95rem; }
.dash-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.dash-link { display: flex; flex-direction: row; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); background: #fbf8ea; border: 2px solid var(--ink); border-radius: 12px; padding: 14px 16px; }
.dash-link:hover { background: #fffdf5; }
.dash-link-ico { flex: 0 0 auto; width: 32px; height: 32px; }
.dash-link-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Site settings cards */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; }
.settings-card { border: 2px solid var(--ink); border-radius: 12px; padding: 20px; background: #fbf8ea; }
.settings-card.is-live { border-left: 8px solid #2f7d4f; }
.settings-card.is-locked { border-left: 8px solid #a32d2d; }
.settings-card .admin-h2 { margin-top: 0; }
.settings-state { font-size: 1.05rem; margin: 6px 0 10px; }
.settings-ico { vertical-align: -4px; margin-right: 4px; }
.settings-card.is-locked .settings-ico { color: #a32d2d; }
.settings-card.is-live .settings-ico { color: #2f7d4f; }
.settings-card .cta-btn { width: auto; margin-top: 6px; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.settings-head .admin-h2 { margin: 0; }
.settings-badge { font-family: var(--font-marker); border: 2px solid var(--ink); border-radius: 20px; padding: 3px 12px; background: var(--cream-deep); }
/* animated on/off switch */
.switch-form { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; width: 54px; height: 30px; border: 2px solid var(--ink); border-radius: 999px; background: #cfc9ae; transition: background 0.28s ease; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fffdf5; border: 2px solid var(--ink); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.switch-input:checked + .switch-track { background: #a32d2d; }
.switch-input:checked + .switch-track .switch-thumb { transform: translateX(24px); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--accent-warm-mid); outline-offset: 2px; }
.switch-state { font-family: var(--font-marker); min-width: 26px; }
.settings-pwbox { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(23, 11, 17, 0.25); }
.settings-pw { margin: 0 0 10px; }
.settings-pw code { background: var(--cream-deep); padding: 2px 7px; border-radius: 5px; }
.settings-pwform label { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 5px; }
.settings-pwrow { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-pwrow input[type=text] { font: inherit; padding: 8px 11px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); min-width: 200px; }
.settings-linkbtn { background: none; border: none; padding: 6px 0 0; margin: 0; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.85rem; }
.tpl-rename { display: inline-flex; gap: 6px; align-items: center; }
.tpl-rename input[type=text] { font: inherit; padding: 6px 9px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--cream); color: var(--ink); min-width: 150px; }
.tpl-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tpl-actions .cta-btn { width: auto; padding: 7px 16px; margin: 0; }
.tpl-actions form { margin: 0; }
.suppress-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.suppress-add input[type=email] { font: inherit; padding: 8px 11px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); min-width: 260px; }
/* The composer shows the ACTUAL email font (custom fonts don't render in email),
   so what you type on a cream card matches what recipients see. */
.email-form .rte-editor {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #170b11;
  background: #f7f2df;
}
.email-form .rte-editor h2 { font-size: 24px; }
.email-form .rte-editor h3 { font-size: 19px; }

.email-launches { margin-bottom: 28px; }
.launch-picker { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.launch-picker select { font-family: var(--font-marker); padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--cream); cursor: pointer; }

/* ---------- tiers / mail club page ---------- */
.tiers-section { text-align: center; }
.tiers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 940px; margin: 30px auto 0; }
.tier-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--cream); border: 3px solid var(--ink); border-radius: 14px; padding: 30px 24px 26px; box-shadow: 5px 6px 0 rgba(23, 11, 17, 0.12); }
.tier-featured { border-color: #a32d2d; }
.tier-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #a32d2d; color: var(--cream); font-family: var(--font-marker); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.tier-name { font-family: var(--font-marker); font-size: 1.35rem; margin: 4px 0 10px; }
.tier-price { font-family: var(--font-marker); font-size: 2.3rem; line-height: 1; margin: 0 0 16px; }
.tier-price span { font-size: 1rem; color: var(--ink-soft); }
.tier-perks { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; width: 100%; }
.tier-perks li { position: relative; padding-left: 26px; text-align: left; font-size: 0.95rem; line-height: 1.35; }
.tier-perks li::before { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid #a32d2d; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.tier-cta { width: 100%; margin-top: auto; cursor: pointer; }
.tiers-note { margin-top: 32px; font-family: var(--font-marker); }
.tiers-fallback { margin-top: 26px; }

/* comic "coming soon" note (teaser mode) */
.read-soon {
  text-align: center;
  background: #f7f2df;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 8px 0 rgba(23, 11, 17, 0.14);
  padding: 44px 32px;
  margin-top: 12px;
}
.read-soon-emoji { font-size: 3rem; display: block; line-height: 1; }
.read-soon-title { font-family: var(--font-hand); font-size: 2rem; margin: 12px 0 10px; }
.read-soon-text { color: var(--ink-soft); line-height: 1.6; max-width: 42ch; margin: 0 auto 24px; }
.read-soon .cta-btn { cursor: pointer; }
.rte-sep { width: 1px; height: 20px; background: rgba(23, 11, 17, 0.25); margin: 0 3px; }
.rte-editor {
  min-height: 440px;                 /* larger by default */
  height: 440px;
  resize: vertical;                  /* drag the bottom-right corner to grow it */
  overflow: auto;
  border: 2px solid var(--ink); border-radius: 0 0 10px 10px;
  background: #fffdf5; padding: 14px 16px; line-height: 1.6; color: var(--ink);
}
.rte-editor:focus { outline: 2px solid var(--accent-warm-mid); outline-offset: -1px; }
.rte-editor img { max-width: 100%; height: auto; border-radius: 6px; }
.rte-editor h2, .rte-editor h3 { font-family: var(--font-hand); }
.rte-editor blockquote { border-left: 3px solid rgba(163,45,45,0.5); margin: 0 0 12px; padding-left: 14px; color: var(--ink-soft); }

/* published article body (rendered HTML) */
.article-body h2 { font-family: var(--font-hand); font-size: 1.6rem; margin: 24px 0 8px; }
.article-body h3 { font-family: var(--font-hand); font-size: 1.3rem; margin: 18px 0 6px; }
.article-body p  { margin: 0 0 14px; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; border: 2px solid var(--ink); margin: 12px 0; display: block; }
.article-body ul, .article-body ol { margin: 0 0 14px 1.4em; }
.article-body li { margin-bottom: 4px; }
.article-body blockquote { border-left: 3px solid rgba(163, 45, 45, 0.5); margin: 0 0 14px; padding: 4px 0 4px 16px; color: var(--ink-soft); font-style: italic; }
.article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(163, 45, 45, 0.6); }


/* ---------- drawn icons (images/icons) ---------- */
/* sized in em so each one picks up the button it sits in */
.icon-x {
  width: 1em;
  height: 1em;
  display: block;
  object-fit: contain;
}

/* the close buttons used to hold a character, so they need to centre a box now */
.signup-toast-close,
.modal-close,
.lb-close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-toast-close .icon-x { width: 18px; height: 18px; }
.modal-close .icon-x { width: 20px; height: 20px; }
.lb-close .icon-x { width: 22px; height: 22px; }

/* journal titles: the drawn star replaces the old placeholder path */
.doodle-star { width: 100%; height: 100%; display: block; object-fit: contain; }