/* =================================================================
   SOZO HOMEPAGE -- picture-book scenes, scrap accents, no rectangle cards
   =================================================================
   Page rhythm (palette evolution as you scroll, like turning pages):

     i.   Hero       cream #fdf3da   morning sky
     ii.  Programs   cream #fdf3da   warm afternoon
     iii. Day        navy  #2d3e54   night-sky canvas, day drawn on it
     iv.  About      cream #fdf9f1   garden, sage wash
     v.   Closing    terra #6f2510   dusk postcard

   The seams between pages are illustrative, not architectural --
   a torn edge with a small sun, a soft wash, a paper plane crossing.
   ================================================================= */

:root {
  --cream:        #fdf3da;
  --cream-soft:   #fdf9f1;
  --cream-warm:   #f6e9c2;
  --terra:        #a43716;
  --terra-deep:   #6f2510;
  --mustard:      #d4a72c;
  --mustard-soft: #e7c25b;
  --sage:         #708566;
  --sage-soft:    #93a487;
  --teal:         #1f6e7e;
  --navy:         #2d3e54;
  --navy-deep:    #1d2c40;
  --ink:          #1a1612;
  --ink-soft:     #3a2e22;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   SHARED: type and accents
   ============================================================ */

.hp-eyebrow {
  display: inline-block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hp-eyebrow-mustard { color: var(--mustard); }
.hp-eyebrow-terra   { color: var(--terra); }
.hp-eyebrow-sage    { color: var(--sage); }
.hp-eyebrow-cream   { color: var(--cream); opacity: 0.8; }

.hp-h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(56px, 8vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.022em;
  margin: 18px 0 22px;
  color: var(--ink);
}
.hp-h1 em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
  font-family: "Fraunces", serif;
}

.hp-h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.014em;
  margin: 10px 0 14px;
  color: var(--ink);
}
.hp-h2 em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.hp-h2-cream { color: var(--cream); }
.hp-h2-cream em { color: var(--mustard); }

.hp-lede {
  font-family: "Spectral", "Fraunces", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30ch;
  margin: 0 0 28px;
}
.hp-lede em { font-style: italic; color: var(--terra); }

.hp-hand {
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
}
.hp-hand-terra   { color: var(--terra); }
.hp-hand-teal    { color: var(--teal); }
.hp-hand-mustard { color: var(--mustard); }
.hp-hand-sage    { color: var(--sage); }
.hp-hand-cream   { color: var(--cream); }

/* a phrase circled with an organic ink loop */
.hp-circled {
  position: relative;
  display: inline-block;
  padding: 0 4px;
  white-space: nowrap;
  z-index: 0;
}
.hp-circled::before {
  content: "";
  position: absolute;
  inset: -3px -2px -2px -2px;
  border: 1.6px solid var(--mustard);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  transform: rotate(-2.4deg);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   SHARED: buttons (rotated stamps, not rounded-corner pills)
   ============================================================ */
.hp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 3px;
  transform: rotate(-1deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hp-btn:hover { transform: rotate(0deg) translateY(-1px); }
.hp-btn-arrow { font-family: "Be Vietnam Pro", sans-serif; font-weight: 400; }

.hp-btn-primary {
  background: var(--terra);
  color: var(--cream);
  box-shadow: 4px 4px 0 0 var(--ink);
}
.hp-btn-primary:hover { box-shadow: 5px 5px 0 0 var(--ink); }

.hp-btn-ghost {
  color: var(--ink);
  border: 2px solid var(--ink);
}

.hp-btn-mustard {
  background: var(--mustard);
  color: var(--ink);
  box-shadow: 4px 4px 0 0 var(--cream);
}

/* ============================================================
   SHARED: scrap (rare paper accent, only used once or twice)
   ============================================================ */
.hp-scrap {
  position: relative;
  display: inline-block;
  background: var(--cream-soft);
  padding: 18px 24px 16px;
  font-family: "Caveat", cursive;
  color: var(--ink);
  box-shadow:
    2px 4px 0 rgba(26,22,18,0.04),
    8px 12px 24px rgba(60,40,20,0.10);
  transform: rotate(-1.6deg);
  /* deckle paper edge */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'><path d='M2,4 L296,2 L298,8 L296,18 L298,30 L296,44 L298,58 L296,72 L298,86 L296,96 L4,98 L2,88 L4,72 L2,56 L4,40 L2,24 L4,10 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'><path d='M2,4 L296,2 L298,8 L296,18 L298,30 L296,44 L298,58 L296,72 L298,86 L296,96 L4,98 L2,88 L4,72 L2,56 L4,40 L2,24 L4,10 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hp-scrap-byline {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}
.hp-scrap-tape {
  position: absolute;
  width: 70px; height: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(212,167,44,0.7) 0 6px, rgba(212,167,44,0.5) 6px 12px);
  mix-blend-mode: multiply;
  box-shadow: 0 1px 4px rgba(26,22,18,0.12);
}
.hp-scrap-tape-l  { top: -6px; left: 24px;  transform: rotate(-12deg); }
.hp-scrap-tape-tl { top: -10px; left: -10px; transform: rotate(-22deg); }

/* ============================================================
   SHARED: arrow scribble + page numbers
   ============================================================ */
.hp-arrow { width: 100%; height: 100%; pointer-events: none; }

.hp-pagenum {
  position: absolute;
  top: 26px; right: 36px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(26,22,18,0.4);
  z-index: 6;
}
.hp-pagenum-cream { color: rgba(253,243,218,0.5); }

.hp-stk { filter: drop-shadow(2px 4px 8px rgba(60,40,20,0.10)); pointer-events: none; }

/* ============================================================
   NAV STRIP -- the only "rectangle" on the page; reads as tape
   ============================================================ */
.hp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px dashed rgba(26,22,18,0.18);
}
.hp-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hp-mark {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hp-mark-line {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hp-mark-sub {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hp-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.hp-links a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.hp-links a:hover { color: var(--terra); }
.hp-link-cta {
  background: var(--ink);
  color: var(--cream) !important;
  padding: 8px 14px;
  border-radius: 3px;
  font-weight: 700 !important;
  text-transform: uppercase;
}
.hp-link-cta:hover { background: var(--terra); }

/* ============================================================
   SCENE COMMON
   ============================================================ */
.hp-scene {
  position: relative;
  padding: 100px 32px 120px;
  overflow: hidden;
}

/* ============================================================
   SCENE 01 -- HERO
   ============================================================ */
.hp-hero {
  background: var(--cream);
  min-height: 92vh;
}
.hp-hero-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background:
    radial-gradient(800px 400px at 75% 20%, rgba(231,194,91,0.22), transparent 60%),
    radial-gradient(700px 400px at 20% 30%, rgba(112,133,102,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hp-hero-cloud-a { position: absolute; top: 14%; left: 6%;  width: 180px; opacity: 0.85; transform: rotate(-4deg); z-index: 1; }
.hp-hero-cloud-b { position: absolute; top: 8%;  right: 18%; width: 130px; opacity: 0.65; transform: rotate(8deg);  z-index: 1; }
.hp-hero-moon    { position: absolute; top: 6%;  right: 6%;  width: 80px;  z-index: 2; }
.hp-hero-star    { position: absolute; top: 22%; left: 38%;  width: 44px;  z-index: 2; opacity: 0.85; }
.hp-hero-birds   { position: absolute; top: 28%; right: 32%; width: 110px; z-index: 2; opacity: 0.85; }

.hp-hero-grid {
  position: relative;
  z-index: 4;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding-top: 40px;
}
@media (min-width: 920px) {
  .hp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 60px;
  }
}
.hp-hero-copy { position: relative; }
.hp-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.hp-hero-note-a {
  display: inline-block;
  margin-top: 28px;
  font-size: 28px;
  transform: rotate(-3deg);
}

.hp-hero-art {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
}
.hp-hero-portrait {
  width: min(82%, 420px);
  transform: rotate(-2deg);
  filter: drop-shadow(8px 14px 24px rgba(60,40,20,0.22));
  z-index: 4;
}
.hp-hero-note-b {
  position: absolute;
  top: 14%; left: 4%;
  font-size: 30px;
  transform: rotate(-6deg);
  z-index: 6;
}
.hp-hero-arrow {
  position: absolute;
  top: 22%; left: 18%;
  width: 160px; height: 70px;
  z-index: 6;
}

.hp-hero-scrap {
  position: absolute;
  bottom: 70px; left: 8%;
  max-width: 320px;
  z-index: 5;
}
.hp-hero-scrap .hp-hand-teal { font-size: 24px; line-height: 1.15; display: block; }

.hp-hero-kite {
  position: absolute;
  bottom: -40px; right: 8%;
  width: 120px;
  transform: rotate(20deg);
  z-index: 7;
}

/* ============================================================
   SEAM 01 -- dotted horizon (no hard rule)
   ============================================================ */
.hp-seam-1 {
  background: var(--cream);
  height: 24px;
  position: relative;
}
.hp-seam-line {
  width: 100%; height: 100%;
  display: block;
}

/* ============================================================
   SCENE 02 -- PROGRAMS
   Three illustrated vignettes laid out side by side. NO BOXES.
   Each program is an illustration + copy; they share the page.
   ============================================================ */
.hp-programs {
  background: var(--cream);
  position: relative;
}
/* a soft sage paper-grain wash, just to differentiate from hero */
.hp-programs::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(112,133,102,0.10), transparent 60%),
    radial-gradient(700px 500px at 95% 100%, rgba(212,167,44,0.10), transparent 60%);
  pointer-events: none;
}

.hp-programs-head {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto 70px;
  text-align: center;
}
.hp-programs-handnote {
  display: inline-block;
  margin-top: 12px;
  transform: rotate(-1.2deg);
}

.hp-programs-list {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
@media (min-width: 920px) {
  .hp-programs-list { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}

.hp-program {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp-prog-1 { transform: rotate(-0.6deg); }
.hp-prog-2 { transform: rotate(0.4deg) translateY(28px); }
.hp-prog-3 { transform: rotate(-0.4deg); }

.hp-prog-art {
  position: relative;
  height: 220px;
  /* No background patch -- illustrations float on the cream page.
     A hand-drawn brush underline anchors each scene to the spread. */
}
.hp-prog-art::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 4px;
  height: 18px;
  background: var(--sage);
  opacity: 0.55;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'><path d='M2,12 Q40,4 80,10 T160,10 Q210,2 260,12 T298,8 L298,16 Q260,18 220,14 T140,16 Q90,18 40,14 T2,16 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'><path d='M2,12 Q40,4 80,10 T160,10 Q210,2 260,12 T298,8 L298,16 Q260,18 220,14 T140,16 Q90,18 40,14 T2,16 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hp-prog2-art::after { background: var(--mustard); opacity: 0.7; }
.hp-prog3-art::after { background: var(--terra); opacity: 0.6; }

.hp-prog-art .hp-stk { position: absolute; }

.hp-prog1-leaf { width: 110px; bottom: 18%; left: 18%; transform: rotate(-12deg); }
.hp-prog1-boat { width: 130px; bottom: 12%; right: 14%; transform: rotate(8deg); }
.hp-prog2-brush { width: 130px; top: 10%;  left: 16%; transform: rotate(-22deg); }
.hp-prog2-crayons { width: 140px; bottom: 8%; right: 8%; transform: rotate(14deg); }
.hp-prog3-moon  { width: 90px; top: 14%;  right: 22%; }
.hp-prog3-star  { width: 40px; top: 28%;  left: 28%; }
.hp-prog3-book  { width: 130px; bottom: 8%; left: 18%; transform: rotate(-6deg); }

.hp-prog-num {
  position: absolute;
  top: 6px; left: 8px;
  font-family: "Caveat", cursive;
  font-size: 26px;
  color: var(--sage);
  transform: rotate(-3deg);
  z-index: 2;
}
.hp-prog-num-mustard { color: var(--mustard); }
.hp-prog-num-terra   { color: var(--terra); }

.hp-prog-copy { padding: 0 4px; }
.hp-prog-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.012em;
  margin: 6px 0 4px;
}
.hp-prog-when {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.hp-prog-body {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 8px;
  max-width: 38ch;
}
.hp-prog-body em { font-style: italic; color: var(--terra); }

.hp-prog1-note { display: inline-block; margin-top: 6px; transform: rotate(-2deg); }
.hp-prog2-note { display: inline-block; margin-top: 6px; transform: rotate(1deg); }
.hp-prog3-note { display: inline-block; margin-top: 6px; transform: rotate(-1.5deg); }

/* ============================================================
   PROGRAMS v2 -- two FULL painted scenes (Field Days, Atelier)
   alternating sides + a quieter coda for Quiet Hour. No cards.
   The painted illustrations are the layout; copy sits beside.
   ============================================================ */
.hp-programs-stage {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.hp-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  /* feature row is a SCENE; sky/ground/props can spill across columns */
  overflow: visible;
}

/* watercolor ground silhouette spans the WHOLE feature row */
.hp-feat-ground {
  position: absolute;
  left: -2%; right: -2%; bottom: -10px;
  width: 104%;
  height: 160px;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 920px) {
  .hp-feature {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
  }
  /* alternating side: art right, copy left */
  .hp-feat-flip .hp-feat-art  { order: 2; }
  .hp-feat-flip .hp-feat-copy { order: 1; padding-right: 24px; padding-left: 0; }
}

.hp-feat-art {
  position: relative;
  min-height: 520px;
}
.hp-feat-art .hp-stk { position: absolute; }

.hp-feat-copy {
  position: relative;
  padding-left: 16px;
}
.hp-feat-copy .hp-prog-num {
  position: static;
  display: inline-block;
  margin-bottom: 6px;
  transform: rotate(-2deg);
  font-size: 24px;
}
.hp-feat-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.014em;
  margin: 4px 0 6px;
}
.hp-feat-when {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.hp-feat-body {
  font-family: "Spectral", "Fraunces", Georgia, serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 36ch;
}
.hp-feat-body em { font-style: italic; color: var(--terra); }

.hp-feat-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hp-feat-list li {
  font-family: "Caveat", cursive;
  font-size: 22px;
  color: var(--ink);
  position: relative;
  padding-left: 20px;
}
.hp-feat-list li::before {
  content: "+";
  position: absolute;
  left: 0; top: -1px;
  color: var(--terra);
  font-family: "Fraunces", serif;
  font-style: italic;
}

/* ============= FIELD DAYS painted scene =============
   The ENTIRE feature row is the scene. Tree + dog live in the art column,
   but clouds and birds drift across the copy column too. The squirrel has
   wandered out of the picture into the copy area, beside the "no shoes"
   note. Everyone stands on the watercolor ground silhouette. */
.hp-feat-field-art {
  transform: rotate(-0.6deg);
  position: relative;
}

/* tree anchored center, roots land on the ground silhouette */
.hp-field-tree {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%) rotate(-1.2deg);
  width: min(78%, 380px);
  filter: drop-shadow(8px 14px 28px rgba(60,40,20,0.22));
  z-index: 4;
}
/* Dog on the LEFT of the trunk, looking up at the kids climbing.
   Source faces right -- mirror so the dog faces the trunk. */
.hp-field-dog {
  position: absolute;
  bottom: 9%;
  left: 8%;
  width: 72px;
  transform: rotate(2deg) scaleX(-1);
  z-index: 5;
}

/* Sky elements spread ACROSS the whole feature row (these elements live
   directly on .hp-feature, not inside .hp-feat-art) */
.hp-feat-field > .hp-field-cloud-a {
  position: absolute;
  top: 4%;  left: 2%;
  width: 130px; opacity: 0.95;
  transform: rotate(-4deg);
  z-index: 2;
}
.hp-feat-field > .hp-field-cloud-b {
  position: absolute;
  top: 0%;  right: 4%;
  width: 110px; opacity: 0.85;
  transform: rotate(6deg) scaleX(-1);
  z-index: 2;
}
.hp-feat-field > .hp-field-bird-a {
  position: absolute;
  top: 14%; right: 14%;
  width: 58px;
  transform: rotate(-6deg);
  z-index: 6;
}
.hp-feat-field > .hp-field-bird-b {
  position: absolute;
  top: 32%; right: 36%;
  width: 42px;
  transform: rotate(10deg);
  z-index: 6;
}

/* Squirrel lives in the copy column, RIGHT of the "no shoes" handnote. */
.hp-field-copy-squirrel-wrap { display: inline; }
.hp-feat-field .hp-feat-copy {
  position: relative;
}
.hp-feat-field .hp-field-squirrel {
  position: absolute;
  bottom: -12px;
  left: 240px;
  width: 38px;
  transform: rotate(-4deg);
  z-index: 5;
  filter: drop-shadow(2px 4px 8px rgba(60,40,20,0.10));
}

.hp-field-note-a {
  position: absolute;
  top: 6%; right: 14%;
  font-size: 26px;
  transform: rotate(-3deg);
  z-index: 6;
}
.hp-field-arrow {
  position: absolute;
  top: 12%; right: 4%;
  width: 130px; height: 80px;
  z-index: 6;
}
.hp-field-note-b {
  display: inline-block;
  margin-top: 4px;
  transform: rotate(-1.6deg);
  font-size: 26px;
}

.hp-field-note-a {
  position: absolute;
  top: 6%; right: 14%;
  font-size: 26px;
  transform: rotate(-3deg);
  z-index: 6;
}
.hp-field-arrow {
  position: absolute;
  top: 12%; right: 4%;
  width: 130px; height: 80px;
  z-index: 6;
}
.hp-field-note-b {
  display: inline-block;
  margin-top: 4px;
  transform: rotate(-1.6deg);
  font-size: 26px;
}

/* ============= ATELIER painted scene =============
   Girl LEFT, easel RIGHT -- she's facing her canvas (her brush hand reaches
   right, toward the easel). Paint props are scattered across the WHOLE
   feature row: some near her feet, some across the studio floor in the copy
   area. Bird + butterfly drift through the air across both columns. */
.hp-feat-atelier { position: relative; }
.hp-feat-atelier-art {
  transform: rotate(0.4deg);
  position: relative;
}

.hp-feat-atelier-wash {
  position: absolute;
  inset: 6% 4% 18% 4%;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(231,194,91,0.22), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Girl LEFT, easel RIGHT. Source girl faces right -> no flip needed. */
.hp-atel-girl {
  position: absolute;
  left: 4%; bottom: 0%;
  width: min(56%, 260px);
  transform: rotate(-1.5deg);
  z-index: 5;
  filter: drop-shadow(8px 14px 24px rgba(60,40,20,0.22));
}
.hp-atel-easel {
  position: absolute;
  right: 4%; bottom: 0%;
  width: min(58%, 260px);
  transform: rotate(2deg);
  z-index: 4;
  filter: drop-shadow(8px 14px 22px rgba(60,40,20,0.22));
}

/* Paint props live on .hp-feat-atelier (the feature row), not in art panel.
   Scattered across the floor: some by her feet, some across the copy side. */
.hp-feat-atelier > .hp-atel-tubes {
  position: absolute;
  bottom: 4%; right: 28%;
  width: 64px;
  transform: rotate(-18deg);
  z-index: 5;
}
.hp-feat-atelier > .hp-atel-jar {
  position: absolute;
  bottom: 6%; right: 14%;
  width: 48px;
  transform: rotate(-4deg);
  z-index: 5;
}
.hp-feat-atelier > .hp-atel-palette {
  position: absolute;
  bottom: 2%; left: 18%;
  width: 70px;
  transform: rotate(10deg);
  z-index: 5;
}

/* Bird + butterfly cross both columns */
.hp-feat-atelier > .hp-atel-bird {
  position: absolute;
  top: 6%; right: 6%;
  width: 56px;
  transform: rotate(-8deg);
  z-index: 7;
}
.hp-feat-atelier > .hp-atel-butterfly {
  position: absolute;
  top: 36%; left: 38%;
  width: 50px;
  transform: rotate(-14deg);
  z-index: 7;
}

.hp-atel-note-a {
  position: absolute;
  top: 4%; left: 36%;
  font-size: 26px;
  transform: rotate(-3deg);
  z-index: 7;
}
.hp-atel-arrow {
  position: absolute;
  top: 14%; left: 30%;
  width: 130px; height: 70px;
  z-index: 7;
}
.hp-atel-note-b {
  display: inline-block;
  margin-top: 4px;
  transform: rotate(-1deg);
  font-size: 26px;
  line-height: 1.15;
}
.hp-atel-note-b em {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ============= QUIET HOUR ============= */
/* Was sized as a small coda; now scaled to match Atelier/Field Days
   (full feature width) so the Story Corner scene reads at proper scale */
.hp-feat-coda {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed rgba(26,22,18,0.18);
}
@media (min-width: 920px) {
  .hp-feat-coda {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 88px;
  }
}
.hp-feat-coda-art {
  position: relative;
  min-height: 520px;
}
@media (max-width: 920px) {
  .hp-feat-coda-art { min-height: 380px; }
}
/* Story Corner scene -- locked composition (floor + shelf + reading group + cat).
   aspect-ratio 5/4 (not 5/6 like Field Days/Atelier) because Quiet Hour content
   is bottom-heavy (short shelf, low reading group, cat) not tall-fill like the
   tree or easel+girl. Shorter container = no empty top space, text auto-centers
   alongside the visible action instead of floating above it. */
.hp-sc-scene {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  background: transparent;
  overflow: hidden;
}
.hp-sc-scene > div { position: absolute; }
.hp-sc-scene img { display: block; width: 100%; height: auto; background: transparent; }
.hp-sc-floor   { width: 104%; left: -2%; bottom: 0;   z-index: 1; }
.hp-sc-shelf   { right: 10%;  bottom: 34%; width: 36%; z-index: 2; }
.hp-sc-reading { left: 8%;    bottom: 17%; width: 55%; transform: rotate(0.5deg); z-index: 3; }
.hp-sc-cat     { left: 62%;   bottom: 19%; width: 22%; transform: rotate(-2deg); z-index: 4; }

.hp-feat-coda-copy {
  padding-top: 8px;
  padding-left: 24px;
  transform: translateY(-12px);
}

/* Quiet Hour marginalia -- mirrors Field Days/Atelier sticker pattern */
.hp-feat-coda > .hp-quiet-butterfly {
  position: absolute;
  top: 6%; right: 4%;
  width: 56px;
  transform: rotate(-12deg);
  z-index: 5;
}
.hp-feat-coda > .hp-quiet-books {
  position: absolute;
  bottom: 8%; right: 6%;
  width: 78px;
  transform: rotate(-4deg);
  z-index: 5;
}
.hp-feat-coda-copy .hp-prog-num {
  position: static;
  display: inline-block;
  margin-bottom: 4px;
  transform: rotate(-2deg);
  font-size: 22px;
}
.hp-feat-coda-copy .hp-feat-name { font-size: clamp(34px, 4vw, 42px); }
.hp-feat-coda-copy .hp-feat-body { font-size: 17px; }
.hp-coda-note {
  display: inline-block;
  margin-top: 6px;
  transform: rotate(-1.6deg);
  font-size: 26px;
}

/* mobile: collapse rotations and let scenes stack with breathing room */
@media (max-width: 720px) {
  .hp-programs-stage { gap: 80px; }
  .hp-feature { transform: none !important; }
  .hp-feat-field-art, .hp-feat-atelier-art { transform: none !important; }
  .hp-feat-art { min-height: 380px; }
  .hp-field-cloud-a, .hp-field-bird-b, .hp-atel-butterfly, .hp-atel-bird,
  .hp-quiet-butterfly, .hp-quiet-books,
  .hp-field-arrow, .hp-atel-arrow { display: none; }
  .hp-field-note-a, .hp-atel-note-a { font-size: 22px; }
  .hp-feat-copy { padding-left: 0; }
}

/* ============================================================
   SEAM 02 -- torn-page edge with a sun
   ============================================================ */
.hp-seam-2 {
  position: relative;
  height: 80px;
  background: var(--navy);
  margin-top: 0;
}
.hp-seam-tear-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: var(--cream);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,18 Q1140,4 1080,16 T940,18 Q860,32 780,18 T620,20 Q540,4 460,18 T300,16 Q220,30 140,18 T0,16 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,18 Q1140,4 1080,16 T940,18 Q860,32 780,18 T620,20 Q540,4 460,18 T300,16 Q220,30 140,18 T0,16 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hp-seam-sun {
  position: absolute;
  top: -50px; right: 12%;
  width: 100px;
  z-index: 3;
  filter: drop-shadow(2px 4px 8px rgba(60,40,20,0.22));
}

/* ============================================================
   SCENE 03 -- A DAY (navy night canvas; the day is drawn on it)
   ============================================================ */
.hp-day {
  background: var(--navy);
  color: var(--cream);
  padding-top: 80px;
}
.hp-day::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 12% 30%, rgba(212,167,44,0.10), transparent 60%),
    radial-gradient(700px 400px at 88% 70%, rgba(112,133,102,0.10), transparent 60%);
  pointer-events: none;
}

.hp-day-head {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto 70px;
  text-align: center;
}
.hp-day-handnote {
  display: inline-block;
  margin-top: 8px;
  transform: rotate(-1deg);
}

.hp-day-stage {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 320px;
}
.hp-day-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 90px;
  width: 100%; height: 80px;
  z-index: 1;
}
.hp-day-sun     { position: absolute; left: 2%;  top: 0;     width: 96px; z-index: 2; }
.hp-day-moon    { position: absolute; right: 2%; top: -10px;  width: 88px; z-index: 2; }

.hp-day-row {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  position: relative;
  z-index: 3;
  padding-top: 80px;
}
@media (max-width: 760px) {
  .hp-day-row { grid-template-columns: repeat(2, 1fr); gap: 28px; padding-top: 40px; }
  .hp-day-horizon { display: none; }
}

.hp-day-step {
  text-align: center;
  position: relative;
  padding-top: 70px; /* room for the icon to sit on the horizon */
}
.hp-day-step:nth-child(odd)  { transform: translateY(-8px) rotate(-0.6deg); }
.hp-day-step:nth-child(even) { transform: translateY(8px)  rotate(0.6deg); }

.hp-day-icon {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 72px;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.3));
}
.hp-day-time {
  display: inline-block;
  font-size: 22px;
  color: var(--mustard-soft);
  margin-bottom: 2px;
}
.hp-day-time-mustard { color: var(--mustard); }
.hp-day-h {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--cream);
}
.hp-day-h-mustard { color: var(--mustard); }

.hp-day-favorite {
  position: absolute;
  top: 18px; left: 60%;
  font-size: 28px;
  transform: rotate(-2deg);
  z-index: 4;
}
.hp-day-favorite-arrow {
  position: absolute;
  top: 28px; left: 50%;
  width: 100px; height: 60px;
  z-index: 4;
}
@media (max-width: 760px) {
  .hp-day-favorite, .hp-day-favorite-arrow { display: none; }
}

/* ============================================================
   SEAM 03 -- soft sage wash (no hard line)
   ============================================================ */
.hp-seam-3 {
  height: 80px;
  background:
    linear-gradient(to bottom, var(--navy) 0%, rgba(45,62,84,0.0) 40%),
    linear-gradient(to bottom, rgba(112,133,102,0.0) 60%, rgba(112,133,102,0.16) 100%),
    var(--cream-soft);
}

/* ============================================================
   SCENE 04 -- ABOUT (garden + paragraph that breathes)
   ============================================================ */
.hp-about {
  background: var(--cream-soft);
  padding-top: 60px;
  position: relative;
}
.hp-about::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 500px at 80% 30%, rgba(112,133,102,0.14), transparent 60%);
  pointer-events: none;
}
.hp-about-head {
  position: relative; z-index: 2;
  max-width: 1240px;
  margin: 0 auto 50px;
}
.hp-about-grid {
  position: relative; z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}
@media (min-width: 920px) {
  .hp-about-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 80px; }
}

.hp-about-art {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}
.hp-about-portrait {
  width: min(80%, 380px);
  transform: rotate(2deg);
  filter: drop-shadow(8px 14px 22px rgba(60,40,20,0.22));
  z-index: 4;
}
.hp-about-rainbow   { position: absolute; top: 2%;  left: -2%;  width: 200px; transform: rotate(-8deg); z-index: 2; }
.hp-about-seed-a    { position: absolute; bottom: 6%; left: 4%;  width: 100px; transform: rotate(-4deg); z-index: 5; }
.hp-about-butterfly { position: absolute; top: 18%; right: 4%;  width: 90px;  transform: rotate(-12deg); z-index: 5; }

.hp-about-cap {
  position: absolute;
  bottom: 4%; right: 12%;
  font-size: 24px;
  text-align: right;
  transform: rotate(-3deg);
  z-index: 6;
}

.hp-about-copy { position: relative; }
.hp-about-text {
  font-family: "Spectral", "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 32px;
}
.hp-about-text em { font-style: italic; color: var(--terra); }

.hp-about-scrap {
  margin-top: 20px;
  max-width: 320px;
  background: var(--cream);
}
.hp-about-scrap-q {
  font-size: 26px;
  line-height: 1.15;
  display: block;
}

/* ============================================================
   SEAM 04 -- paper plane launching toward closing
   ============================================================ */
.hp-seam-4 {
  position: relative;
  height: 110px;
  background: var(--terra-deep);
}
.hp-seam-tear-bottom {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: var(--cream-soft);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,18 Q1130,4 1060,18 T920,16 Q850,32 770,18 T620,20 Q540,4 460,18 T320,18 Q240,30 160,18 T0,16 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,18 Q1130,4 1060,18 T920,16 Q850,32 770,18 T620,20 Q540,4 460,18 T320,18 Q240,30 160,18 T0,16 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hp-seam-trail {
  position: absolute;
  inset: 24px 0 0 0;
  width: 100%; height: 80%;
  z-index: 2;
  opacity: 0.5;
}
.hp-seam-plane {
  position: absolute;
  top: 36px; right: 8%;
  width: 110px;
  transform: rotate(-12deg);
  z-index: 3;
  filter: drop-shadow(4px 6px 10px rgba(0,0,0,0.3));
}

/* ============================================================
   SCENE 05 -- CLOSING (terracotta dusk postcard)
   ============================================================ */
.hp-closing {
  background: var(--terra-deep);
  color: var(--cream);
  text-align: center;
  padding: 120px 32px 140px;
  position: relative;
  overflow: hidden;
}
.hp-closing::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 30% 30%, rgba(212,167,44,0.18), transparent 60%),
    radial-gradient(700px 500px at 80% 70%, rgba(45,62,84,0.30), transparent 60%);
  pointer-events: none;
}
.hp-close-moon    { position: absolute; top: 14%; right: 12%; width: 120px; z-index: 2; opacity: 0.95; }
.hp-close-star-a  { position: absolute; top: 22%; left: 22%;  width: 40px;  z-index: 2; opacity: 0.9; }
.hp-close-star-b  { position: absolute; bottom: 30%; right: 30%; width: 30px; z-index: 2; opacity: 0.85; }

.hp-close-card {
  position: relative;
  z-index: 3;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hp-close-line {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.014em;
  margin: 14px 0 6px;
  color: var(--cream);
}
.hp-close-line em { font-style: italic; color: var(--mustard); font-weight: 500; }
.hp-close-meta {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253,243,218,0.7);
  margin: 12px 0 24px;
}
.hp-close-ps {
  display: inline-block;
  margin-top: 18px;
  font-size: 28px;
  transform: rotate(-2deg);
}

/* ============================================================
   FOOT
   ============================================================ */
.hp-foot {
  background: var(--ink);
  color: rgba(253,243,218,0.7);
  padding: 28px 32px;
}
.hp-foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hp-foot-verse {
  flex-basis: 100%;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
  color: rgba(253, 243, 218, 0.45);
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid rgba(253, 243, 218, 0.12);
  line-height: 1.5;
}
.hp-foot-verse em { font-style: italic; }
.hp-foot-mark {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-transform: none;
}
@media (max-width: 720px) {
  .hp-foot-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE -- kill the rotation drift on mobile so layout reads
   ============================================================ */
@media (max-width: 720px) {
  .hp-scene { padding: 60px 22px 80px; }
  .hp-program, .hp-prog-1, .hp-prog-2, .hp-prog-3 { transform: none !important; }
  .hp-day-step { transform: none !important; }
  .hp-pagenum { display: none; }
  .hp-hero-arrow, .hp-hero-note-b { display: none; }
  .hp-hero-art { min-height: 360px; }
  .hp-about-art { min-height: 380px; }
}