/* ============================================================================
   Petit Play Café — design system.

   Lifted from the live Showit site so this reads as her site, not a
   redesign. Palette and type were sampled from computed styles on
   petitplaycafe.com; every value here appears on her pages today.

   ----------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED — read this before editing.

   There are TWO layers, and the order matters:

     LAYER 1 (from the top)  the flat baseline, faithful to her Showit site.
     LAYER 2 ("POP PASS")    depth, photography, motion. OVERRIDES layer 1.

   If a change you make in layer 1 seems to do nothing, layer 2 is almost
   certainly overriding it further down. Search for the same selector before
   assuming the rule is broken. The two layers were kept separate rather than
   merged so the original, faithful system stays readable as the reference it
   was built from.

   ----------------------------------------------------------------------------
   CONTENTS — search for the marker text to jump.

     :root ......................... colour + type tokens. Start here.
     ---------- buttons
     ---------- announcement bars .. the two stacked bars, brown over sage
     ---------- header
     ---------- hero
     ---------- generic grid + cards
     ---------- events
     ---------- comparison table
     ---------- faq
     ---------- forms
     ---------- waiver
     ---------- footer
     ---------- responsive ......... breakpoints for layer 1
     booking overlay ............... the in-page Play Sundae iframe

     POP PASS ...................... start of layer 2, everything below
                                     overrides the above
     ---------- journal / blog ..... article layout (also server-rendered)
     ---------- owner admin ........ /admin only, never seen by visitors

   ----------------------------------------------------------------------------
   No build step. This file is served as-is, so there is no Sass, no
   post-processing, and nothing to run after you edit it. Save and reload.
   ============================================================================ */

:root {
  --cream:    #F9F6EF;  /* page background */
  --cream-2:  #F6F3EC;  /* alternating section */
  --ink:      #110A03;  /* body copy, near-black warm */
  --brown:    #6D4522;  /* headings, primary accent, top bar */
  --brown-d:  #4E3018;
  --sage:     #9FAC9A;  /* secondary bar, quiet buttons */
  --sage-d:   #7D8C78;
  --blush:    #FFCACA;  /* primary CTA */
  --blush-d:  #F3A9A9;
  --tan:      #F1E0C6;
  --tan-2:    #E3CDAB;
  --forest:   #1C231A;  /* footer */
  --line:     rgba(109, 69, 34, 0.18);

  --font-body: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --font-script: 'Allura', cursive;
  --wide: .18em;   /* the site leans hard on letterspaced small caps */
  --radius: 2px;   /* almost square — Showit template is very rectilinear */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 130px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.18rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--brown);
  margin: 0;
  line-height: 1.15;
}
h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }
section { padding: 84px 0; }
.bg-2 { background: var(--cream-2); }
.bg-tan { background: var(--tan); }
.center { text-align: center; }

/* Small-caps label — used everywhere on her site above/below blocks */
.eyebrow {
  font-size: .82rem;
  letter-spacing: var(--wide);
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 14px;
}
.script { font-family: var(--font-script); font-size: 2.6rem; color: var(--brown); line-height: 1; }
.lead { font-size: 1.32rem; }
.muted { color: rgba(17, 10, 3, .72); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: .82rem;
  letter-spacing: var(--wide);
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: var(--font-body);
}
.btn-blush { background: var(--blush); color: var(--brown-d); }
.btn-blush:hover { background: var(--blush-d); }
.btn-sage  { background: var(--sage); color: #fff; }
.btn-sage:hover { background: var(--sage-d); }
.btn-brown { background: var(--brown); color: var(--cream); }
.btn-brown:hover { background: var(--brown-d); }
.btn-ghost { background: transparent; color: var(--brown); border: 1px solid var(--brown); }
.btn-ghost:hover { background: var(--brown); color: var(--cream); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; }

/* ---------- announcement bars ---------- */
/* Two stacked bars, brown over sage, exactly as she has today — except the
   contents come from Play Sundae so they cannot go stale. */
.bar {
  padding: 11px 20px;
  text-align: center;
  font-size: .82rem;
  letter-spacing: var(--wide);
  text-transform: uppercase;
}
.bar a { text-decoration: none; }
.bar-brown { background: var(--brown); color: var(--cream); }
.bar-sage  { background: var(--sage);  color: #fff; }
.bar[hidden] { display: none; }
/* The hidden attribute must win over any component display rule (cards use
   display:flex in places); data-launch elements rely on it. */
[hidden] { display: none !important; }
.bar .arrow { margin-left: 12px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; max-width: 1320px; margin: 0 auto; padding: 12px 28px;
}
.site-header nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; align-items: center; }
.site-header nav a {
  font-size: .78rem; letter-spacing: var(--wide); text-transform: uppercase; color: var(--ink);
}
.site-header nav a:hover, .site-header nav a.active { color: var(--brown); }
/* ---------- services flyout ---------- */
.site-header nav li.has-menu { position: relative; }
.site-header nav li.has-menu > a { display: inline-flex; align-items: center; gap: 5px; }
.site-header nav .caret { font-size: .6em; transition: transform .18s ease; }
.site-header nav li.has-menu:hover > a .caret,
.site-header nav li.has-menu.open > a .caret { transform: rotate(180deg); }

.site-header nav .submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  display: block; flex-direction: column; gap: 0;
  min-width: 208px; padding: 10px 0; margin: 0;
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(74, 54, 42, .12), 0 2px 6px rgba(74, 54, 42, .06);
  /* Hidden via opacity rather than display:none so the open/close can
     animate and so the links stay reachable by keyboard while focused. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* A small bridge across the gap between the trigger and the panel, so the
   menu does not snap shut while the pointer travels down to it. */
.site-header nav .submenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.site-header nav li.has-menu:hover > .submenu,
.site-header nav li.has-menu:focus-within > .submenu,
.site-header nav li.has-menu.open > .submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-header nav .submenu li { display: block; }
.site-header nav .submenu a {
  display: block; padding: 9px 18px; white-space: nowrap;
  font-size: .74rem; color: var(--ink);
}
.site-header nav .submenu a:hover { background: var(--tan); color: var(--brown); }

@media (prefers-reduced-motion: reduce) {
  .site-header nav .submenu,
  .site-header nav .caret { transition: none; }
}

.brandmark { display: flex; align-items: center; gap: 12px; }
.brandmark .mark {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--tan); color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; text-align: center;
  line-height: 1.15; border: 1px solid var(--tan-2);
}
.menu-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--brown); cursor: pointer; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 62vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 96px 0; background: var(--tan); color: var(--brown);
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: var(--brown); }
.hero .sub { font-size: clamp(1.3rem, 2.6vw, 2rem); font-style: italic; margin: 10px 0 22px; color: var(--brown); }
.hero p { max-width: 620px; margin-left: auto; margin-right: auto; }
.page-hero { min-height: 34vh; padding: 74px 0; }

/* ---------- generic grid + cards ---------- */
.grid { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.card.tan { background: var(--tan); border-color: var(--tan-2); }
.card .price { font-size: 2.4rem; color: var(--brown); line-height: 1.1; margin: 6px 0 4px; }
.card .per { font-size: .8rem; letter-spacing: var(--wide); text-transform: uppercase; color: var(--sage-d); }
.card ul { list-style: none; padding: 0; margin: 16px 0 0; }
.card li { padding: 5px 0 5px 20px; position: relative; font-size: 1.02rem; }
.card li::before { content: '·'; position: absolute; left: 4px; color: var(--sage); font-size: 1.4rem; line-height: 1; }

.section-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.section-head p { margin-top: 12px; }
.rule { width: 54px; height: 1px; background: var(--brown); margin: 18px auto; opacity: .5; }

/* ---------- events ---------- */
.event {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center;
  background: var(--cream); border: 1px solid var(--line);
  padding: 24px 26px; margin-bottom: 16px;
}
.event .when {
  text-align: center; border-right: 1px solid var(--line); padding-right: 20px;
}
.event .when .mon { font-size: .78rem; letter-spacing: var(--wide); text-transform: uppercase; color: var(--sage-d); }
.event .when .day { font-size: 2.6rem; color: var(--brown); line-height: 1; }
.event .when .time { font-size: .92rem; color: rgba(17,10,3,.7); }
.event h3 { margin-bottom: 6px; }
.event .meta { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); margin-top: 8px; }
.event .meta .full { color: #A33; }
.events-empty { text-align: center; padding: 54px 0; color: rgba(17,10,3,.7); }
.event .also { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.event .also .lbl {
  font-size: .78rem; letter-spacing: var(--wide); text-transform: uppercase;
  color: var(--sage-d); margin-right: 3px;
}
.event .also .chip {
  font-size: .92rem; padding: 4px 11px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--brown); text-decoration: none; white-space: nowrap;
}
.event .also a.chip:hover { background: var(--tan); border-color: var(--brown); }
.event .also .chip.gone { color: rgba(17,10,3,.38); text-decoration: line-through; }
@media (max-width: 720px) { .event { grid-template-columns: 1fr; gap: 16px; }
  .event .when { text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; }
  .event .cta { justify-self: start; } }

/* ---------- comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-size: .78rem; letter-spacing: var(--wide); text-transform: uppercase; color: var(--brown); }
.compare td:first-child { color: var(--sage-d); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- faq ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 0; font-size: 1.24rem; color: var(--brown);
  list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--sage-d); }
.faq[open] summary::after { content: '–'; }
.faq .body { padding: 0 0 22px; max-width: 820px; }

/* ---------- forms ---------- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .78rem; letter-spacing: var(--wide);
  text-transform: uppercase; color: var(--brown); margin-bottom: 7px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 1.02rem;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.field textarea { min-height: 140px; resize: vertical; }
.formmsg { margin-top: 14px; font-size: 1rem; }
.formmsg.ok { color: var(--sage-d); }
.formmsg.bad { color: #A33; }

/* ---------- waiver ---------- */
.legal { max-width: 820px; }
.legal h3 { margin: 34px 0 10px; font-size: 1.35rem; }
.legal p, .legal li { font-size: 1.06rem; }
.legal ol { padding-left: 22px; }

/* ---------- footer ---------- */
.site-footer { background: var(--forest); color: #D9D5CB; padding: 66px 0 30px; }
.site-footer h4 {
  color: var(--cream); font-size: .78rem; letter-spacing: var(--wide);
  text-transform: uppercase; margin-bottom: 14px;
}
.site-footer a { color: #D9D5CB; }
.site-footer a:hover { color: var(--blush); }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 34px; }
.site-footer nav a { display: block; padding: 4px 0; font-size: 1rem; }
.site-footer .base {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: #9A968D;
}
.signup form { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.signup input {
  flex: 1 1 160px; min-width: 0; padding: 13px 15px; font: inherit;
  border: 0; border-radius: var(--radius); background: var(--cream); color: var(--ink);
}

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

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  section { padding: 60px 0; }
  .g2, .g3, .g4, .split { grid-template-columns: 1fr; }
  .site-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: 18px 28px 24px;
  }
  .site-header nav.open { display: block; }
  .site-header nav ul { flex-direction: column; align-items: flex-start; gap: 16px; }
  .menu-toggle { display: block; }

  /* There is no hover on a touch screen, so the flyout becomes an inline
     list that expands in place when Services is tapped. Absolute positioning
     and the shadow are dropped so it reads as part of the stacked menu. */
  .site-header nav .submenu {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; box-shadow: none; border: 0; border-radius: 0;
    background: transparent; min-width: 0;
    padding: 0; margin: 10px 0 0 14px;
    border-left: 1px solid var(--line);
    display: none;
  }
  .site-header nav li.has-menu.open > .submenu { display: block; }
  .site-header nav li.has-menu:hover > .submenu { display: none; }
  .site-header nav li.has-menu.open:hover > .submenu { display: block; }
  .site-header nav .submenu a { padding: 8px 0 8px 14px; }
  .event { grid-template-columns: 92px 1fr; }
  .event .cta { grid-column: 1 / -1; }
  .site-footer .cols { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ booking overlay --------
   Play Sundae runs inside this frame so the visitor never leaves the site. */
.pp-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(17,10,3,.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px; animation:pp-fade .16s ease-out;
}
@keyframes pp-fade{from{opacity:0}to{opacity:1}}
.pp-modal{
  background:var(--cream);
  width:min(980px,100%); height:min(88vh,900px);
  border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(17,10,3,.34);
}
.pp-modal .bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 20px;
  background:var(--brown); color:var(--cream);
}
.pp-modal .bar .title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.35rem; letter-spacing:.02em;
}
.pp-modal .bar button{
  background:none; border:0; color:var(--cream);
  font-size:1.7rem; line-height:1; cursor:pointer;
  padding:0 4px; border-radius:4px;
}
.pp-modal .bar button:hover{opacity:.72}
.pp-modal .bar button:focus-visible{outline:2px solid var(--blush); outline-offset:2px}
.pp-modal iframe{flex:1; width:100%; border:0; background:var(--cream)}
@media (max-width:640px){
  .pp-overlay{padding:0}
  .pp-modal{width:100%; height:100%; border-radius:0}
}

/* ============================================================
   POP PASS — 2026-08-23
   Same palette, same fonts, same brand. What changes is depth:
   photography, layered warmth, shape, and motion. Everything below
   overrides the flat baseline above rather than replacing it, so the
   original system stays readable as the reference it was built from.
   ============================================================ */

:root {
  --shadow-sm: 0 2px 10px rgba(78, 48, 24, .06);
  --shadow-md: 0 12px 34px rgba(78, 48, 24, .10);
  --shadow-lg: 0 28px 70px rgba(78, 48, 24, .16);
  --ease: cubic-bezier(.22, .68, .32, 1);
}

/* Warm paper grain over the whole page. Very low opacity — you should
   feel it rather than see it. It's what stops large cream areas reading
   as "unstyled div". */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2; }

/* ---------- rhythm ----------
   The old uniform 84px made every page feel like a slideshow of empty
   rooms. Sections now breathe relative to the viewport and tighten up
   hard on mobile. */
section { padding: clamp(64px, 8vw, 116px) 0; }
section.tight { padding: clamp(44px, 5vw, 72px) 0; }
.section-head { margin-bottom: clamp(34px, 4vw, 54px); }

/* Alternating sections get a soft vertical wash instead of a flat fill,
   so the seam between them reads as light rather than as a border. */
.bg-2 {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 22%, var(--cream-2) 78%, var(--cream) 100%);
}
.bg-tan {
  background: linear-gradient(165deg, var(--tan) 0%, #EFDCC0 55%, var(--tan-2) 100%);
}

/* ---------- type ---------- */
h1 { letter-spacing: -.012em; }
h2 { letter-spacing: -.008em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--sage-d); opacity: .9;
}
.section-head .eyebrow::before { display: none; }
.section-head .eyebrow { display: block; }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .18s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
/* A slow sheen that crosses the button on hover. Subtle enough to read
   as "this is alive", not as a casino. */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .62s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn-ghost { border-width: 1px; backdrop-filter: blur(2px); }

/* ---------- header ---------- */
.site-header {
  background: rgba(249, 246, 239, .86);
  backdrop-filter: saturate(140%) blur(10px);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-md); background: rgba(249, 246, 239, .96); }
.site-header nav a { position: relative; transition: color .18s; }
/* Underline grows from the centre on hover — quiet, but it makes the nav
   feel responsive instead of static. */
.site-header nav ul li > a:not(.btn)::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -6px;
  height: 1px; background: var(--brown);
  transition: left .26s var(--ease), right .26s var(--ease);
}
.site-header nav ul li > a:not(.btn):hover::after,
.site-header nav ul li > a.active::after { left: 0; right: 0; }

.brandmark .mark {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--tan); border: 1px solid var(--tan-2);
  object-fit: contain; padding: 4px;
  transition: transform .3s var(--ease);
}
.brandmark:hover .mark { transform: rotate(-6deg) scale(1.05); }
.wordmark {
  display: none; line-height: 1.05; color: var(--brown);
  font-size: 1.24rem; letter-spacing: .04em;
}
.wordmark span { display: block; font-family: var(--font-script); font-size: 1.5rem; margin-top: -2px; }
@media (min-width: 900px) { .wordmark { display: block; } }

/* ---------- hero ----------
   Full-bleed photograph with a warm double-gradient so the type stays
   readable regardless of what's behind it, plus a slow drift so the
   first screen isn't a still image. */
.hero {
  min-height: min(88vh, 820px);
  padding: clamp(110px, 14vh, 170px) 0;
  background: var(--brown-d);
  color: var(--cream);
  overflow: hidden;
}
.hero .hero-media {
  position: absolute; inset: -3%;
  background-size: cover; background-position: center 42%;
  animation: heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.6%, 0); }
}
.hero .hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 82% at 50% 42%, rgba(78,48,24,.30) 0%, rgba(78,48,24,.62) 62%, rgba(28,35,26,.80) 100%),
    linear-gradient(180deg, rgba(28,35,26,.42) 0%, transparent 26%, transparent 62%, rgba(28,35,26,.52) 100%);
}
.hero h1, .hero .sub, .hero p { color: var(--cream); }
.hero h1 { text-shadow: 0 2px 30px rgba(28,35,26,.42); }
.hero .sub { font-family: var(--font-script); font-style: normal; font-size: clamp(2rem, 4.6vw, 3.4rem); opacity: .96; }
/* The tagline always reads as one line (Lito, Oct 2026). `.hero p` caps
   paragraphs at 620px, which broke it after "for" at desktop size. In Allura
   the line is about 13.2x its font size wide, so on narrow screens the size
   follows the viewport (less the 28px gutters) instead of wrapping. */
.hero .sub {
  max-width: none;
  white-space: nowrap;
  font-size: min(clamp(2rem, 4.6vw, 3.4rem), calc((100vw - 60px) / 13.8));
}
.hero .hero-note {
  margin-top: 22px; font-size: .86rem; letter-spacing: var(--wide);
  text-transform: uppercase; color: rgba(249,246,239,.86);
}
.hero .eyebrow { color: var(--tan); }
.hero .eyebrow::before { background: var(--tan); }
.hero .btn-ghost { color: var(--cream); border-color: rgba(249,246,239,.66); }
.hero .btn-ghost:hover { background: var(--cream); color: var(--brown); }

/* Scroll cue at the base of the home hero. */
.hero .scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: var(--wide); text-transform: uppercase;
  color: rgba(249,246,239,.72); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero .scroll-cue::after {
  content: ''; width: 1px; height: 40px;
  background: linear-gradient(180deg, rgba(249,246,239,.7), transparent);
  animation: cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* Inner-page heroes: same treatment, shorter, image optional. */
.page-hero { min-height: min(48vh, 460px); padding: clamp(88px, 11vh, 130px) 0; }
.page-hero.no-media { background: var(--tan); }
.page-hero.no-media h1,
.page-hero.no-media p,
.page-hero.no-media .eyebrow { color: var(--brown); }

/* ---------- figures ----------
   The arch is the one shape borrowed from her Showit layouts. Used
   sparingly it does a lot of work: it instantly reads as "designed". */
.figure { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.figure:hover img { transform: scale(1.045); }
.figure.arch { border-radius: 50vw 50vw 4px 4px / 30vw 30vw 4px 4px; }
.figure.tall { aspect-ratio: 3 / 4; }
.figure.wide { aspect-ratio: 4 / 3; }
.figure.square { aspect-ratio: 1 / 1; }
.figure.banner { aspect-ratio: 21 / 9; }

/* Photo pair with a deliberate offset — breaks the grid just enough. */
.figure-stack { position: relative; padding-bottom: 46px; padding-right: 42px; }
.figure-stack .back { width: 100%; }
.figure-stack .front {
  position: absolute; right: 0; bottom: 0; width: 52%;
  border: 6px solid var(--cream); box-shadow: var(--shadow-lg);
}

/* A thin tan rule with a dot — her site uses a lot of these separators. */
.rule { position: relative; width: 74px; opacity: .45; }
.rule::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sage-d);
  transform: translate(-50%, -50%);
}

/* ---------- cards ---------- */
.card {
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  background: linear-gradient(170deg, #FFFDF8 0%, var(--cream) 100%);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--tan-2); }
.card.tan { background: linear-gradient(170deg, #F6E7D2 0%, var(--tan) 100%); }
.card .price {
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  background: linear-gradient(120deg, var(--brown) 20%, #9A6634 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Feature card — one per section, visually louder than its neighbours. */
.card.feature { border-color: var(--blush-d); box-shadow: var(--shadow-md); }
.card.feature::before {
  content: 'Most popular'; position: absolute; top: 0; right: 0;
  background: var(--blush); color: var(--brown-d);
  font-size: .64rem; letter-spacing: var(--wide); text-transform: uppercase;
  padding: 6px 14px;
}
.card.feature { position: relative; overflow: hidden; }

/* ---------- events ----------
   Was a thin bordered strip floating in white. Now a proper card with
   the date block as a coloured plaque. */
.event {
  grid-template-columns: 132px 1fr auto;
  gap: 32px; padding: 28px 30px; margin-bottom: 20px;
  background: linear-gradient(170deg, #FFFDF8 0%, var(--cream) 100%);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--tan-2); }
.event .when {
  border-right: 0; padding: 18px 10px;
  background: linear-gradient(165deg, var(--tan) 0%, var(--tan-2) 100%);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.event .when .day { font-size: 3rem; font-weight: 500; }
.event .when .mon { color: var(--brown); opacity: .82; }
.event .meta .full { color: #A33; }
.events-empty {
  padding: 64px 28px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--cream-2);
}

/* ---------- gallery strip ---------- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.strip .figure { aspect-ratio: 1 / 1; box-shadow: var(--shadow-sm); }
.strip .figure:nth-child(1) { margin-top: 28px; }
.strip .figure:nth-child(3) { margin-top: 28px; }
@media (max-width: 760px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip .figure:nth-child(n) { margin-top: 0; }
}

/* ---------- quote / belief block ---------- */
.pull {
  text-align: center; max-width: 860px; margin: 0 auto;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.45; color: var(--brown);
}
.pull::before {
  content: '“'; display: block; font-size: 4rem; line-height: .6;
  color: var(--sage); opacity: .6; margin-bottom: 14px;
}

/* ---------- scroll reveal ----------
   Opacity + a small lift. Disabled wholesale under reduced-motion, and
   the .is-in class is added immediately if IntersectionObserver is
   missing, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .hero .hero-media { animation: none; }
  .hero .scroll-cue::after { animation: none; }
  .btn::after { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 12% 0%, rgba(159,172,154,.16) 0%, transparent 62%);
  pointer-events: none;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr; }
  .figure-stack { padding-bottom: 34px; padding-right: 26px; }
}
@media (max-width: 620px) {
  .g4 { grid-template-columns: 1fr; }
  .hero { min-height: 74vh; }
  .event { grid-template-columns: 1fr; }
  .event .when { display: flex; align-items: baseline; gap: 12px; justify-content: flex-start; padding: 12px 16px; }
  .event .when .day { font-size: 2rem; }
}

/* ---------- journal / blog ----------
   The single-column article layout. Same tokens as the rest of the site;
   measure is capped so the serif stays comfortable at 1.18rem. */
.post { max-width: min(72ch, 820px); margin: 0 auto; }
.post p { margin-bottom: 1.15rem; }
.post .meta { font-size: .78rem; letter-spacing: var(--wide); text-transform: uppercase; color: var(--sage-d); margin-bottom: 30px; }
.post h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 44px 0 14px; }
.post h3 { font-size: 1.3rem; margin: 22px 0 6px; }
.post ul { padding-left: 22px; margin: 0 0 1.15rem; }
.post li { margin-bottom: 8px; }
.post a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.post a:hover { color: var(--brown-d); }
.post a.btn { text-decoration: none; }
.post .faq-block { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 0 12px; margin-bottom: 1.4rem; }
.post .faq-block h3 { margin-top: 20px; }
.post .faq-block p { font-size: 1.06rem; color: rgba(17,10,3,.78); }
.card h3 a { color: var(--brown); }
.card h3 a:hover { color: var(--brown-d); }
.site-footer .base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .base a:hover { color: var(--blush); }

/* ---------- journal, server-rendered (api/blog.js) ----------
   Posts are written in /admin as simple markdown (js/md.js), which adds
   numbered lists, quotes, photos and dividers to the article above. */
.post ol { padding-left: 24px; margin: 0 0 1.15rem; }
.post b, .post strong { font-weight: 600; }
.post blockquote {
  margin: 0 0 1.4rem; padding: 14px 22px;
  border-left: 2px solid var(--sage); background: var(--cream-2);
  font-style: italic; color: var(--brown-d);
}
.post blockquote p { margin: 0; }
.post figure { margin: 10px 0 30px; }
.post figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.post figcaption { margin-top: 8px; text-align: center; font-size: .98rem; font-style: italic; color: rgba(17,10,3,.7); }
.post hr { border: 0; height: 1px; background: var(--line); margin: 40px 0; }
.post-more { max-width: min(72ch, 820px); margin: 60px auto 0; padding-top: 28px; border-top: 1px solid var(--line); }
.post-more h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 12px; }
.post-more ul { padding-left: 22px; margin: 0; }
.post-more li { margin-bottom: 8px; }
.post-more a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.blog-list { gap: 22px; }
.blog-card-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.blog-card-title a { color: var(--brown); }
.blog-card-title a:hover { color: var(--brown-d); }
.blog-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 20px; }
.hero a.eyebrow:hover { color: var(--cream); }
/* The Journal link (added by js/partials.js once a post is published) is a
   ninth item in the header. Between the mobile menu and about 1260px that
   pushed "Classes & Events" onto two lines, so the gap tightens a little,
   only when the link is there. Before launch the nav is unchanged. */
@media (min-width: 821px) and (max-width: 1260px) {
  .site-header nav ul:has([data-journal-link]) { gap: 20px; }
}

/* ---------- owner admin (/admin) ----------
   Lito's Journal editor (admin.html, js/admin.js). Same tokens as the
   site; never seen by visitors. */
.btn-sm { padding: 10px 20px; font-size: .74rem; }
.admin-gate {
  max-width: 470px; margin: 9vh auto; padding: 40px 36px; text-align: center;
  background: linear-gradient(170deg, #FFFDF8 0%, var(--cream) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.admin-gate .mark, .admin-bar .mark {
  border-radius: 50%; background: var(--tan); border: 1px solid var(--tan-2);
  object-fit: contain; padding: 5px;
}
.admin-gate .mark { width: 96px; height: 96px; margin: 0 auto 18px; }
.admin-gate .eyebrow::before { display: none; }
.admin-gate h1 { font-size: clamp(2.2rem, 5vw, 2.8rem); margin-bottom: 14px; }
.admin-gate form { margin-top: 18px; }
.admin-gate .btn { width: 100%; margin-top: 12px; }
.admin-gate .admin-msg { margin: 18px 0 0; text-align: left; }
.admin-shell { max-width: 1120px; margin: 0 auto; padding: 24px 28px 90px; }
.admin-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--line);
}
.admin-bar .mark { width: 52px; height: 52px; }
.admin-bar .title { font-size: 1.7rem; color: var(--brown); margin-right: 6px; }
.admin-bar .who { margin-left: auto; font-size: 1rem; color: rgba(17,10,3,.7); }
.admin-intro { max-width: 760px; color: rgba(17,10,3,.78); margin-bottom: 22px; }
.admin-intro a, .tbl a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.admin-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.admin-tools .count { margin-left: auto; font-size: 1rem; color: rgba(17,10,3,.7); }
.admin-msg { padding: 12px 18px; margin-bottom: 18px; border-radius: var(--radius); font-size: 1.04rem; }
.admin-msg.ok { background: rgba(159,172,154,.24); color: #4C5A48; }
.admin-msg.bad { background: rgba(255,202,202,.5); color: #8A2E2E; }
.admin-gate input,
.drawer input, .drawer textarea, .drawer select {
  width: 100%; padding: 12px 15px; font: inherit; font-size: 1.06rem;
  background: #FFFDF8; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.admin-gate input:focus,
.drawer input:focus, .drawer textarea:focus { outline: 2px solid var(--blush-d); outline-offset: 1px; border-color: var(--brown); }
.drawer input[readonly] { background: var(--cream-2); color: rgba(17,10,3,.6); }
.tbl { width: 100%; border-collapse: collapse; background: #FFFDF8; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tbl th, .tbl td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 1.06rem; vertical-align: top; }
.tbl th {
  font-weight: 400; font-size: .74rem; letter-spacing: var(--wide); text-transform: uppercase;
  color: var(--brown); background: var(--cream-2);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--cream-2); }
.pill { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.pill.draft { background: var(--tan); color: var(--brown); }
.pill.published { background: rgba(159,172,154,.32); color: #4C5A48; }
.pill.scheduled { background: rgba(255,202,202,.6); color: #8A3E3E; }
.drawer {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; justify-content: flex-end; background: rgba(28,35,26,.5);
}
.drawer .sheet {
  width: min(540px, 100%); height: 100%; overflow: auto;
  padding: 30px 30px 44px; background: var(--cream); box-shadow: var(--shadow-lg);
}
.drawer .sheet.wide { width: min(1080px, 100%); }
.drawer h3 { margin-bottom: 8px; }
.drawer label {
  display: block; margin: 18px 0 7px;
  font-size: .74rem; letter-spacing: var(--wide); text-transform: uppercase; color: var(--brown);
}
.drawer label.btn { display: inline-block; margin: 0; cursor: pointer; }
.drawer textarea { min-height: 90px; resize: vertical; }
.blog-edit { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; }
.blog-edit textarea.body { min-height: 380px; font: .95rem/1.6 ui-monospace, Menlo, Consolas, monospace; }
.blog-edit .preview { max-height: 72vh; overflow: auto; padding: 4px 24px 24px; background: #FFFDF8; border: 1px dashed var(--tan-2); }
.blog-edit .preview .post { max-width: none; }
.md-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.md-bar button {
  padding: 6px 13px; font: inherit; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brown); background: #FFFDF8; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.md-bar button:hover { background: var(--tan); border-color: var(--brown); }
.md-help { margin-top: 8px; padding: 10px 14px; font-size: .98rem; color: rgba(17,10,3,.74); background: var(--cream-2); border-radius: var(--radius); }
.md-help code { font-size: .86rem; padding: 1px 5px; background: #FFFDF8; border-radius: 3px; }
.blog-cover-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.blog-cover-row img { width: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
@media (max-width: 860px) {
  .blog-edit { grid-template-columns: 1fr; }
  .admin-shell { padding: 18px 16px 70px; }
  .drawer .sheet { padding: 22px 16px 36px; }
  .tbl thead { display: none; }
  .tbl tr { display: block; border-bottom: 1px solid var(--line); }
  .tbl td { display: block; border: 0; padding: 5px 16px; }
  .tbl td:first-child { padding-top: 14px; font-weight: 600; }
  .tbl td:last-child { padding-bottom: 14px; }
}