@font-face {
  font-family: 'Surph Dialogue Ss';
  src: url('../fonts/SurphDialogueSs-Regular.ttf') 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; }

html { scroll-behavior: smooth; }

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

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

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

.nav-toggle span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* animate into an X when open */
.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%;
  /* height is viewport-width-relative (not a fixed px) because
     object-fit:cover scales this image by width first, so a fixed px
     crop shows a different fraction of the art at every screen width
     (fine at one width, but crops the moon out on a wider one) */
  height: 40vw;
  min-height: 260px;
  max-height: 780px;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

.hero-inner {
  position: relative;
  z-index: 1;
  margin-top: -320px;
}

.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: var(--font-marker);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.card-blurb { margin: 0; font-size: 1rem; }
.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;
}

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

.hero-bubble {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 5;
  transform: translateX(-50%) rotate(-4deg);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 46% 54% 60% 40% / 55% 45% 55% 45%;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.3rem;
  text-align: center;
  white-space: nowrap;
  box-shadow: 3px 3px 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;
}

/* ---------- 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 {
  background: linear-gradient(180deg, var(--accent-warm-mid) 0%, var(--night) 100%);
}

/* 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: var(--night);
}

/* 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.37cqw, 4.8px); }
.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: flex-start;
}

/* 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 */
.modal-fullbody {
  flex: 0 0 auto;
  align-self: flex-start;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 58vh;
  max-width: min(300px, 40vw);
}

.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;
    width: min(240px, 80vw);
    align-self: center;
    height: min(440px, 52vh);
  }
  .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;
  transition: 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;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.process-panels {
  display: flex;
  gap: 16px;
  flex: 1 1 380px;
}

.process-copy { flex: 1 1 320px; }

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

/* ---------- 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: var(--night);
  color: var(--cream);
  padding: 60px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.strip-img {
  width: min(520px, 100%);
  display: block;
  border: 3px solid var(--ink);
  border-radius: 6px;
}

.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(520px, 100%);
  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; }

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

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

  .hero-cards { grid-template-columns: 1fr; }
  .hero-bubble { position: static; transform: rotate(-4deg); margin: 0 auto 16px; }
  .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); }

  /* 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;
  /* soft desk backing so the paper sheet reads as sitting on a surface */
  background: linear-gradient(180deg, var(--butter), var(--cream-deep));
}

.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: 26px 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 */
.jr-polaroid::before {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 66px; height: 21px;
  background: rgba(187, 210, 194, 0.78);
  border: 1px solid rgba(23, 11, 17, 0.14);
}
.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;
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(23, 11, 17, 0.15);
  background: var(--cream);
  line-height: 0;
}
.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 shown until the Shopify Buy Button code is pasted in */
.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;
}