/* === Theme variables (peach palette) === */
:root{
  --bg:#fdf7f3;
  --panel:#fff9f5;
  --text:#3a2a1f;
  --muted:#a66b40;
  --accent:#f4ab74;
  --border:#e0a070;
}

/* === Gradient props for animated glow (fallback) === */
@property --grad1 { syntax:'<color>'; inherits:false; initial-value:#f4ab74; }
@property --grad2 { syntax:'<color>'; inherits:false; initial-value:#90b3db; }

/* === Base layout sizing === */
html, body { height:100%; }

/* === Animated bottom glow (only if color-mix supported) === */
@supports (color: color-mix(in srgb, white, black)) {
  @property --grad1 { syntax:'<color>'; inherits:false; initial-value:#f4ab74; }
  @property --grad2 { syntax:'<color>'; inherits:false; initial-value:#90b3db; }

  html{
    background-image:
      var(--paperTex, none),
      radial-gradient(150% 85% at 50% 120%,
        color-mix(in srgb, var(--grad1) 70%, transparent) 0%,
        transparent 72%),
      radial-gradient(120% 65% at 50% 110%,
        color-mix(in srgb, var(--grad2) 55%, transparent) 0%,
        transparent 76%);
    background-size:200px 200px,100% 100%,100% 100%;
    background-repeat:repeat,no-repeat,no-repeat;
    background-attachment:fixed,fixed,fixed;
    background-blend-mode:multiply,normal,normal;
    --grad1:#f4ab74;
    --grad2:#90b3db;
    animation:bottomGlow 18s ease-in-out infinite;
  }

  @keyframes bottomGlow{
    0%   { --grad1:#f4ab74; --grad2:#90b3db; }
    50%  { --grad1:#ffd07a; --grad2:#a9d6ff; }
    100% { --grad1:#f4ab74; --grad2:#90b3db; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ animation:none; }
  }
}

/* === Accessible link color tokens === */
:root{
  --link:#aa4d00;
  --link-hover:#8b4108;
  --link-visited:#994400;
}

/* === Inline link styling (non-button) === */
a:not(.button):not([role="button"]) {
  color:var(--link);
  text-decoration-color:#f8dcc4;
  text-decoration-thickness:2px;
  text-underline-offset:.15em;
}
a:not(.button):not([role="button"]):hover,
a:not(.button):not([role="button"]):focus-visible {
  color:var(--link-hover);
  text-decoration-thickness:3px;
}
a:not(.button):not([role="button"]):visited { color:var(--link-visited); }

/* === Keyboard focus for inline links === */
a:not(.button):not([role="button"]):focus-visible {
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:2px;
}

/* === Content buttons (avoid nav buttons) === */
.page .button,
.page .button-ghost { color:var(--button-fg,#2b241e); }
.page .button:is(:hover,:focus-visible),
.page .button-ghost:is(:hover,:focus-visible) { color:#fff !important; }
.page .button-ghost:is(:hover,:focus-visible){ border-color:currentColor; }

/* === Body typography & transparent bg === */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:transparent;
  isolation:isolate;
}

/* === Books pages: let background show === */
body.books-page .page{
  background:transparent;
  border-color:transparent;
}

/* === Oil-in-water default hues (Books) === */
body.books-page { --oilA:var(--accent); --oilB:#ffd9bf; }

/* === Per-book color overrides === */
body.books-page.route-books-alan-cole-is-not-a-coward { --oilA:#f2ad76; --oilB:#c5e5f2; }
body.books-page.route-books-alan-cole-doesnt-dance   { --oilA:#90b3db; --oilB:#f09673; }

/* === Home: full-bleed sections and hero tweaks === */
.home-page .page > .home-section{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.home-page .page{
  background:transparent;
  border:0;
  padding:0;
}
.home-page .page > .breadcrumbs,
.home-page .page > h1{ display:none; }
.home-content.card{ margin-top:1.2rem; }
.home-section{ margin-top:clamp(8px,1.8vw,18px); }

/* === Books: particle canvas & glass veil layers === */
.books-particles{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  opacity:.7;
  filter:blur(.2px) saturate(110%);
  pointer-events:none;
}
.books-veil{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  background:color-mix(in srgb, var(--panel,#fff) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--text,#3a2a1f) 8%, transparent);
}
.books-bg-layer{ position:absolute; inset:0; z-index:0; }

/* === Books: featured cover positions === */
.books-cover-right{
  position:absolute;
  right:max(8px,4%);
  bottom:clamp(10px,6vw,30px);
  height:min(60vh,520px);
  width:auto;
  object-fit:contain;
  transform:rotate(-2deg);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.18));
  opacity:.95;
  pointer-events:none;
}
.books-feature{
  width:100%;
  height:auto;
  max-height:min(62vh,520px);
  object-fit:contain;
  transform:rotate(-2deg);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.18));
  pointer-events:none;
}

/* === Parallax helpers === */
.parallax{ overflow:clip; }
.parallax-layer{
  position:absolute;
  inset:0;
  will-change:transform;
  transform:translateZ(0);
}

/* === Books background stack (behind glass) === */
.books-bg{ display:grid; place-items:center; gap:3vw; padding:6vw; }
.books-bg img{
  height:min(42vh,420px);
  width:auto;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transform:rotate(-2deg);
}
.books-bg img + img{ transform:rotate(2deg); }

/* === Generic glass panel === */
.glass.panel{
  position:relative; margin:0 auto;
  background:color-mix(in srgb, #ffffff 65%, transparent);
  border:1px solid color-mix(in srgb, var(--text,#3a2a1f) 10%, transparent);
  border-radius:18px;
  padding:clamp(22px,3vw,38px);
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}
.section-title{ font-size:clamp(22px,3.2vw,34px); margin:0 0 .3em; }
.section-sub{ opacity:.9; margin:0 0 1em; }

/* === HOME → BOOKS: container draws nothing (no clipping) === */
.home-section.home-books,
.home-books{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  isolation:auto !important;
}

@media (max-width:900px){
  .home-section.home-books .books-panel .books-links .button{ display:none !important; }
  .home-section.home-books .books-panel .books-links .button-primary{ display:inline-flex !important; }
}

/* === HOME → BOOKS: glass panel owns clipping === */
.glass.panel.books-panel{
  position:relative;
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  clip-path:inset(0 round 18px);
  background:color-mix(in srgb, #ffffff 65%, transparent);
  border:1px solid color-mix(in srgb, var(--text,#3a2a1f) 10%, transparent);
  padding:clamp(22px,3vw,38px);
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
}

/* === HOME → BOOKS: soft internal color wash === */
.glass.panel.books-panel::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(120% 80% at 15% 15%, rgba(244,171,116,.22), transparent 90%),
    radial-gradient(120% 90% at 85% 85%, rgba(243,165,193,.18), transparent 90%);
  pointer-events:none;
}

/* === HOME → BOOKS: particle canvas inside panel === */
.glass.panel.books-panel > #books-particles{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.75;
  filter:blur(.2px) saturate(200%);
}

/* === HOME → BOOKS: text block (right column) === */
.glass.panel.books-panel .books-panel-text{
  grid-area:text;
  justify-self:end;
  align-self:center;
  text-align:right;
  max-width:640px;
  padding:50px;
  min-width:0;
}

/* === HOME → BOOKS: content grid === */
.glass.panel.books-panel .books-panel-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:min(36vw,360px) 1.5fr;
  grid-template-areas:"cover text";
  align-items:center;
  gap:clamp(12px,3vw,28px);
  min-width:0;
}

/* === HOME → BOOKS: featured cover (right) === */
.glass.panel.books-panel .books-feature{
  justify-self:end;
  align-self:center;
  display:block;
  width:auto;
  grid-area:cover;
  height:min(60vh,520px);
  max-width:100%;
  object-fit:contain;
  transform:rotate(-2deg);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.18));
  pointer-events:none;
  opacity:.95;
}

/* === HOME → BOOKS: mobile stacking === */
@media (max-width:900px){
  .glass.panel.books-panel{
    display:grid;
    align-items:center;
    justify-items:center;
    min-height:unset;
  }
  .glass.panel.books-panel .books-cap{
    width:100%;
    margin:0;
    padding-inline:var(--container-pad);
    box-sizing:content-box;
  }
  .glass.panel.books-panel .books-panel-inner{
    grid-template-columns:1fr;
    grid-template-areas:"text" "cover";
    justify-items:center;
    align-items:start;
    gap:clamp(10px,3vw,18px);
  }
  .glass.panel.books-panel .books-panel-text{
    grid-area:text;
    justify-self:center;
    align-self:start;
    text-align:center;
    max-width:min(72ch,92vw);
    padding:25px;
    min-width:0;
  }
  .glass.panel.books-panel .books-feature{
    grid-area:cover;
    justify-self:center;
    align-self:start;
    display:block;
    width:clamp(200px,76vw,420px);
    height:auto;
    max-height:46vh;
    transform:none;
  }
}

/* === Featured cover: load/settle animation hooks === */
#books-bg-random{ opacity:0; visibility:hidden; }
#books-bg-random.is-ready{ opacity:1; visibility:visible; }
@keyframes coverSettle{
  0%   { opacity:0; transform:rotate(-2deg) translateY(-8px) scale(.975); }
  60%  { opacity:1; transform:rotate(-2deg) translateY(3px)  scale(1.015); }
  100% { opacity:1; transform:rotate(-2deg) translateY(0)    scale(1); }
}
#books-bg-random.is-settling{ animation:coverSettle 480ms cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce){
  #books-bg-random.is-settling{ animation:none; }
}

/* === Home → Kidlit section (swirl + cloud card) === */
.home-kidlit{ min-height:560px; display:grid; place-items:center; }
.cloud-card{
  position:relative;
  isolation:isolate;
  overflow:clip;
}
.cloud-card .swirl-bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  border:0; padding:0; background:transparent;
}
.cloud-card > *:not(.swirl-bg){ position:relative; z-index:1; }
.cloud-card .swirl-bg .oilwater-bg-canvas{
  filter:blur(28px) saturate(115%) contrast(105%);
  opacity:.55;
}
.home-kidlit{ position:relative; }

/* === Cloud card visual (CSS gradients) === */
.cloud-card{
  z-index:1;
  width:min(900px,92vw);
  padding:clamp(24px,3vw,40px);
  text-align:center;
  border-radius:30px;
  background:
    radial-gradient(140px 100px at 25% 40%, #fff 70%, transparent 72%),
    radial-gradient(160px 120px at 50% 25%, #fff 70%, transparent 72%),
    radial-gradient(140px 100px at 75% 40%, #fff 70%, transparent 72%),
    radial-gradient(420px 200px at 50% 70%, #fff 70%, transparent 72%),
    #fff;
  box-shadow:
    0 10px 30px rgba(0,0,0,.10),
    0 0 0 1px rgba(0,0,0,.06) inset;
}
.cloud-title{ font-size:clamp(24px,4vw,42px); margin:0 0 .25em; }
.cloud-blurb{ margin:0 auto 1em; max-width:60ch; }
.cloud-cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* === Services section (cards grid) === */
.home-services{ background:color-mix(in srgb, var(--accent,#f4ab74) 6%, #fff); }
.services-inner{ max-width:1100px; margin:0 auto; }
.services-grid{
  margin-top:12px;
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.service-card{
  display:block;
  padding:18px 18px 20px;
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--text,#3a2a1f) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover, .service-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.service-card h4{ margin:0 0 .25em; }
.service-card p{ margin:0; opacity:.9; }

/* === Word from Eric (quote block) === */
.home-word{ padding-bottom:clamp(20px,10vw,120px); }
.word-inner{
  max-width:900px; margin:0 auto;
  text-align:center;
  border-radius:18px;
}
.word-avatar{
  width:86px; height:86px; object-fit:cover; border-radius:50%;
  margin:0 auto 10px; display:block;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.word-quote{ font-size:clamp(18px,2.6vw,15px); margin:0 0 8px; }
.word-meta{ opacity:.9; }

/* === Motion preferences (parallax off) === */
@media (prefers-reduced-motion: reduce){
  [data-parallax-speed]{ transform:none !important; }
}

/* === Oil-in-water canvas host === */
.oilwater-host{ position:relative; overflow:clip; z-index:0; }
.oilwater-bg-canvas{
  position:absolute; inset:0; z-index:-2;
  pointer-events:none;
  filter:blur(28px) saturate(115%) contrast(105%);
  opacity:.65;
}
.oilwater-host::after{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:radial-gradient(100% 60% at 50% 40%, transparent 50%, rgba(0,0,0,.04) 100%);
}

/* === Utilities and base blocks === */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:1100px; margin:0 auto; padding:1.25rem; }

/* === Header and nav layout === */
header.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.05) blur(6px);
  background:color-mix(in srgb, var(--bg) 85%, var(--accent));
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand .logo{
  width:38px; height:38px; border-radius:12px;
  background:var(--accent); display:grid; place-items:center; color:#fff; font-weight:800;
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}
.menu{ display:flex; gap:.5rem; align-items:center; }
.mobile-toggle{ display:none; }

/* === Generic buttons (nav + content) === */
nav a.button, .mobile-drawer a, .button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:10px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); cursor:pointer;
}
nav a.button:hover, .mobile-drawer a:hover, .button:hover{ background:var(--accent); color:#fff; }
.button-primary{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; }

/* === Nav dropdown overlay layer === */
#navDropdownLayer{
  position:fixed; inset:0; z-index:3500; pointer-events:none;
}

/* === Dropdown menus === */
details.menu-group{ position:relative; }
details.menu-group > summary{ list-style:none; }
details.menu-group[open] > summary .caret{ transform:rotate(180deg); }
.dropdown{
  position:absolute;
  left:0; top:calc(100% + .4rem);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.4rem;
  min-width:260px;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  z-index:1000;
}
.dropdown a{ display:block; padding:.55rem .7rem; border-radius:8px; }
.dropdown a:hover{ background:var(--accent); color:#fff; }
.dropdown.is-overlay{
  position:fixed !important;
  left:var(--dd-left,0);
  top:calc(var(--dd-top,0) + .4rem);
  min-width:260px;
  max-height:70vh;
  overflow:auto;
  pointer-events:auto;
  z-index:4000;
}

/* === Mobile drawer visibility toggles === */
#mobileToggle{ display:none; }
#mobileDrawer{ display:none; }

/* === Force-hide drawer on desktop === */
@media (min-width:901px){
  #mobileToggle{ display:none !important; }
  #mobileDrawer{ display:none !important; }
}

/* === Mobile nav & drawer === */
@media (max-width:900px){
  .menu{ display:none; }
  #mobileToggle{ display:inline-flex !important; }
  #mobileDrawer{
    position:fixed; inset:0 0 0 auto;
    width:min(85vw,380px);
    background:var(--panel);
    border-left:1px solid var(--border);
    padding:14px 14px 24px;
    display:block; transform:translateX(100%);
    transition:transform 260ms ease; overflow:auto; z-index:2000;
  }
  #mobileDrawer.open{ transform:translateX(0); }
  .scrim{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    opacity:0; transition:opacity 220ms ease; pointer-events:none; z-index:1999;
  }
  .scrim.show{ opacity:1; pointer-events:auto; }
}

/* === Mobile drawer contents === */
.mobile-drawer .md-header{
  position:sticky; top:0; background:var(--panel); z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:1px solid var(--border);
}
.mobile-drawer .md-title{ font-weight:800; font-size:1.05rem; }
.mobile-drawer .md-close{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem; border-radius:10px; border:1px solid var(--border); background:transparent;
}
.mobile-drawer .md-close:hover{ background:var(--accent); color:#fff; }
.mobile-drawer .md-nav{ display:grid; gap:.25rem; }
.mobile-drawer .md-link{
  display:block; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px; background:var(--panel);
}
.mobile-drawer .md-link:hover{ background:var(--accent); color:#fff; }
.mobile-drawer .md-section{ border:1px solid var(--border); border-radius:12px; background:var(--panel); }
.mobile-drawer .md-disclosure{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.7rem .8rem; background:transparent; border:0; cursor:pointer; font:inherit; color:inherit;
}
.mobile-drawer .md-disclosure:focus{ outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset:2px; }
.mobile-drawer .md-chevron{ transition:transform .2s ease; }
.mobile-drawer .md-disclosure[aria-expanded="true"] .md-chevron{ transform:rotate(180deg); }
.mobile-drawer .md-subnav{ list-style:none; padding:.25rem .25rem .6rem .25rem; margin:0; }
.mobile-drawer .md-subnav a{ display:block; padding:.55rem .65rem; border-radius:8px; }
.mobile-drawer .md-subnav a:hover{ background:var(--accent); color:#fff; }

/* === Main content panel === */
main{ min-height:60vh; }
.page{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.2rem;
}
h1,h2,h3{ line-height:1.15; }
.breadcrumbs{ font-size:.85rem; color:var(--muted); margin-bottom:.6rem; }

/* === Cards & responsive grids === */
.card{ border:1px solid var(--border); background:var(--panel); border-radius:16px; padding:1rem; }
.grid{ display:grid; gap:1rem; }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:800px){ .grid.cols-2,.grid.cols-3{ grid-template-columns:1fr; } }

/* === FAQ accordion === */
.faq details{
  border:1px solid var(--border); border-radius:12px; padding:.6rem .8rem; background:#fff2e8;
}
.faq details+details{ margin-top:.6rem; }

/* === Footer & utility pills === */
footer{ border-top:1px solid var(--border); color:var(--muted); }
.pill{
  display:inline-block; padding:.2rem .55rem; border:1px solid var(--border);
  border-radius:999px; font-size:.8rem; color:var(--muted); background:#fff2e8;
}
.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;
}

/* === Page content link flourish === */
.page a{
  color:var(--accent);
  background-image:linear-gradient(var(--accent), var(--accent));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .2s ease;
}
.page a:hover{ background-size:100% 2px; color:var(--accent); }

/* === Card media frame + optional oil-water === */
.card-media{
  border:1px solid var(--border); border-radius:12px; padding:6px; background:#fff2e8; margin-bottom:.8rem;
  height:var(--row-img-height,auto);
  position:relative; overflow:hidden;
}
.card-media > .card-img{
  width:100%; height:100%; object-fit:contain; display:block; border-radius:8px; position:relative; z-index:1;
}
.card-media .oilwater-bg-canvas{
  filter:blur(14px) saturate(115%) contrast(105%);
  opacity:.6;
}

/* === Header sizing & brand image === */
.site-header{ --header-h:60px; }
.nav-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand-image{ display:flex; align-items:center; }
.brand-img{
  display:block; max-height:42px; height:auto; width:auto; object-fit:contain;
}
.primary-nav{ display:flex; align-items:center; gap:.6rem; min-width:0; }

/* === Scrollable desktop menu with fade edges === */
.menu-rail{
  position:relative;
  display:flex; align-items:center; gap:.25rem;
  flex:1 1 auto; min-width:0;
}
.menu-scroller{
  --fade:18px;
  position:relative;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  -ms-overflow-style:none;
  scrollbar-width:none;
  scroll-behavior:smooth;
  padding-bottom:12px;
  margin-bottom:-12px;
  flex:1 1 auto; min-width:0;
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 100%);
          mask-image:linear-gradient(to right, #000 0%, #000 100%);
}
.menu-scroller::-webkit-scrollbar{ display:none; width:0; height:0; }
.menu{ display:flex; align-items:center; gap:.5rem; padding-inline:2px; width:max-content; white-space:nowrap; }
.menu-scroller.fade-both{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.menu-scroller.fade-left{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
}
.menu-scroller.fade-right{
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
}
.menu-arrow{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 auto;
  border:1px solid var(--border); border-radius:10px;
  background:var(--panel); color:var(--text); cursor:pointer; opacity:.9;
}
.menu-arrow:hover{ background:var(--accent); color:#fff; }
@media (max-width:900px){
  .brand-img{ max-height:32px; }
  .menu-rail{ display:none; }
  #mobileToggle{ display:inline-flex !important; }
}

/* === Social icon buttons === */
.social{ display:flex; gap:.35rem; margin-left:.75rem; }
.social .icon{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);
  color:var(--text);
}
.social .icon:hover{ background:var(--accent); color:#fff; }
.social .icon svg{ width:18px; height:18px; }

/* === Home hero container === */
.home-hero{
  position:relative;
  border:1px solid var(--border);
  border-radius:16px;
  background:
    radial-gradient(140% 110% at 10% 10%, color-mix(in srgb, var(--accent) 16%, white) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, white) 0%, var(--panel) 100%);
  padding:clamp(16px,3vw,28px);
  margin-bottom:1.2rem;
  overflow:clip;
}
.home-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:38%;
  pointer-events:none;
  background:
    radial-gradient(70% 120% at 15% 100%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
  filter:blur(20px) saturate(110%);
}

/* === Hero grid & text === */
.hero-inner{
  position:relative;
  min-height:clamp(200px,28vw,360px);
  display:grid;
  margin-bottom:5%;
  grid-template-columns:1.1fr 1fr;
  align-items:end;
  gap:clamp(10px,2.5vw,24px);
  z-index:10;
  isolation:isolate;
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; min-height:auto; }
}
.hero-copy{
  position:relative;
  z-index:1;
  padding:clamp(4px,1vw,8px);
}
.hero-kicker{
  margin:0 0 .25rem 0;
  font-weight:700;
  font-size:.9rem;
  color:var(--muted);
}
.hero-title{
  margin:0 0 .3rem 0;
  font-size:clamp(1.2rem,2.2vw,1.75rem);
  line-height:1.1;
}
.hero-lede{
  margin:0 0 .8rem 0;
  max-width:55ch;
  color:color-mix(in srgb, var(--text) 86%, white);
}
.hero-cta{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* === Hero portrait (right column image) === */
.hero-portrait{
  position:relative;
  justify-self:end;
  align-self:center;
}
.hero-portrait .portrait{
  display:block;
  width:clamp(220px,32vw,420px);
  aspect-ratio:4 / 5;
  object-fit:cover;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.12)) saturate(105%);
}

/* === Vignette mask utility === */
.vignette{
  -webkit-mask-image:radial-gradient(closest-side, #000 58%, rgba(0,0,0,0) 85%);
  -webkit-mask-size:100% 100%;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-image:radial-gradient(closest-side, #000 58%, rgba(0,0,0,0) 85%);
  mask-size:100% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
}
@media (max-width:900px){
  .hero-portrait{ justify-self:start; margin-top:8px; }
  .hero-portrait .portrait{ width:clamp(200px,60vw,360px); }
}
@supports not ((-webkit-mask-image: radial-gradient(#000, transparent)) or (mask-image: radial-gradient(#000, transparent))){
  .hero-portrait{ position:relative; }
  .hero-portrait::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--panel) 98%, transparent) 96%);
  }
}

/* === Full-height background portrait variant === */
.hero-inner{ position:relative; }
.hero-bg-portrait{
  position:absolute;
  top:0; right:0; bottom:0;
  height:100%;
  width:auto; max-width:none;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.12)) saturate(105%);
}
.hero-copy{ position:relative; z-index:1; }
.hero-bg-portrait.soft-left-fade{
  -webkit-mask-image:linear-gradient(to left, #000 78%, transparent 100%);
          mask-image:linear-gradient(to left, #000 78%, transparent 100%);
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}
.hero-bg-portrait{
  position:absolute;
  top:0; right:0; bottom:0;
  height:100%; width:auto; max-width:none;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; gap:12px; }
  .hero-bg-portrait{
    position:static;
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    z-index:auto;
    pointer-events:none;
    margin-bottom:.75rem;
    -webkit-mask-image:none;
            mask-image:none;
    filter:none;
  }
}

/* === Ensure dropdowns layer above panels === */
.dropdown{ z-index:1000; }

/* === Events page layout & calendar === */
.events-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-bottom:.8rem;
}
.cal-controls{ display:flex; align-items:center; gap:.4rem; }
.ev-month{ font-weight:700; }
.events-layout{
  display:grid; grid-template-columns:1fr 2fr; gap:1rem;
}
@media (max-width:900px){
  .events-layout{ grid-template-columns:1fr; }
}
.ev-calendar{
  border:1px solid var(--border); border-radius:12px;
  background:var(--panel); padding:.7rem;
}
.ev-grid-head, .ev-grid-body{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
}
.ev-grid-head > div{ text-align:center; font-size:.85rem; color:var(--muted); }
.ev-grid-body .pad{ height:40px; }
.ev-grid-body .cell{
  height:40px; border:1px solid var(--border); border-radius:10px; background:#fff;
  position:relative; display:flex; align-items:flex-start; justify-content:flex-start;
  padding:4px 6px; gap:4px; cursor:pointer;
}
.ev-grid-body .cell:hover{ background:color-mix(in srgb, var(--accent) 12%, white); }
.ev-grid-body .cell .n{ font-size:.9rem; line-height:1; }
.ev-grid-body .cell .dots{ display:flex; gap:2px; position:absolute; right:6px; bottom:6px; }
.ev-grid-body .cell .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7; }
.ev-month-head{ margin:.6rem 0 .4rem; color:var(--muted); }
.ev-card{ display:flex; gap:.6rem; align-items:flex-start; }
.ev-date{
  min-width:96px; padding:.4rem .5rem; border:1px solid var(--border); border-radius:10px;
  text-align:center; background:#fff2e8; color:var(--muted); font-weight:700;
}
.ev-title{ margin:.1rem 0 .25rem; }
.ev-meta{ color:var(--muted); font-size:.95rem; margin-bottom:.4rem; }
.ev-actions .button{ padding:.45rem .6rem; }

/* === Upcoming events: mobile card layout === */
@media (max-width:700px){
  .card.ev-card{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:.65rem;
    align-items:start;
  }
  .card.ev-card .ev-date{
    justify-self:start;
    margin:0;
    min-width:0;
    width:auto;
  }
  .card.ev-card .ev-content,
  .card.ev-card .ev-details,
  .card.ev-card .ev-body{ margin:0; width:100%; }
  .card.ev-card .ev-actions{
    display:flex; gap:.5rem; align-items:center; flex-wrap:nowrap; overflow-x:auto;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .card.ev-card .ev-actions::-webkit-scrollbar{ display:none; }
  .card.ev-card .ev-actions .button{
    white-space:nowrap; flex:0 0 auto;
  }
}

/* === Book pages: hide router H1 (custom hero used) === */
body.route-books-alan-cole-is-not-a-coward .page > h1{ display:none; }
body.route-books-alan-cole-doesnt-dance .page > h1{ display:none; }

/* === Book hero layout === */
.book-hero{
  overflow:clip;
  padding:clamp(16px,3vw,28px);
}
.book-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:clamp(12px,3vw,28px);
}
.book-title{
  margin:0 0 .35rem 0;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.1;
}
.buy-links{
  margin:0 0 .35rem 0;
  color:var(--muted);
}
.buy-links a{ color:var(--text); }
.buy-links a:hover{ color:#fff; background:var(--accent); text-decoration:none; }
.book-subtitle{
  margin:.25rem 0 0 0;
  font-style:italic;
  color:color-mix(in srgb, var(--text) 86%, white);
}

/* === Book cover frame === */
.book-cover-frame{
  margin:0;
  border:1px solid var(--border);
  border-radius:14px;
  padding:8px;
  background:#fff2e8;
  justify-self:end;
}
.book-cover{
  display:block;
  width:min(100%,420px);
  height:auto;
  border-radius:10px;
  object-fit:contain;
}

/* === Book hero: mobile stacking === */
@media (max-width:900px){
  .book-hero-grid{
    grid-template-columns:1fr;
    align-items:start;
  }
  .book-cover-frame{ justify-self:start; }
}

/* === Books: desktop hero swap (Alan Cole Doesn’t Dance) — grid variant === */
@media (min-width: 901px){
  body.route-books-alan-cole-doesnt-dance .book-hero-grid{
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
  }
  body.route-books-alan-cole-doesnt-dance .book-hero-grid > .book-cover-frame{
    grid-column: 1;
    justify-self: end;
    align-self: center;
  }
  body.route-books-alan-cole-doesnt-dance .book-hero-grid > :not(.book-cover-frame){
    grid-column: 2;
    justify-self: start;
    align-self: center;
    max-width: 640px;
  }
}

/* === Books: mobile hero reset (stack order preserved) === */
@media (max-width: 900px){
  body.route-books-alan-cole-doesnt-dance .book-hero-grid > .book-cover-frame,
  body.route-books-alan-cole-doesnt-dance .book-hero-grid > :not(.book-cover-frame){
    grid-column: auto;
  }
}

/* === Book: dark parallax blurb (fixed background) === */
.book-parallax{
  --parallaxA:#884023;
  --parallaxB:#000000;
  position: relative;
  border:1px solid var(--border);
  border-radius:16px;
  margin:1rem 0;
  background:
    radial-gradient(140% 110% at 10% 10%, color-mix(in srgb, var(--accent) 10%, #000) 0%, transparent 60%),
    linear-gradient(180deg, var(--parallaxA), var(--parallaxB));
  background-attachment: fixed, fixed;
  background-size: cover;
  overflow: clip;
}
.parallax-inner{
  padding: clamp(18px, 3.2vw, 32px);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.parallax-inner p{
  margin:0 0 .85rem 0;
  font-size:clamp(1rem, 1.15vw, 1.15rem);
  line-height:1.55;
}
@media (max-width: 900px){
  .book-parallax{ background-attachment: scroll, scroll; }
}

/* === Book: reviews block (cards + reveal) === */
.book-reviews{ margin:1.2rem 0; }
.reviews-kicker{
  text-align:center;
  max-width:70ch;
  margin:0 auto 1rem;
  font-weight:700;
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  color:color-mix(in srgb, var(--text) 85%, white);
}
.reviews-list{ display:grid; gap:.9rem; }

/* === Review card === */
.review{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:clamp(12px, 2vw, 18px);
  max-width:820px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  opacity:0;
  transition:transform 480ms ease, opacity 480ms ease;
}
.review p{ margin:0 0 .5rem 0; }
.review footer{ color:var(--muted); font-size:.95rem; }

/* === Review alignment (alternating) === */
.review.left  { justify-self:start; transform:translateX(-24px); }
.review.right { justify-self:end;   transform:translateX(24px); }

/* === Review reveal state (via JS) === */
.review.in{ opacity:1; transform:translateX(0); }

/* === Reviews: mobile centering === */
@media (max-width: 900px){
  .reviews-list{ justify-items:center; }
  .review{
    justify-self:center;
    width:min(100%, 640px);
  }
  .review.left,
  .review.right{
    justify-self:center;
    transform:none;
  }
}

/* === Book: stacking context above parallax === */
.book-hero,
.book-reviews{ position:relative; z-index:1; }

/* === Reviews: mobile full-width + centered text === */
@media (max-width: 900px){
  .reviews-list{ gap:.9rem; }
  .review{
    margin:0;
    width:100%;
    text-align:center;
  }
}

/* === Books: desktop hero swap (Alan Cole Doesn’t Dance) — flex variant === */
@media (min-width: 901px){
  body.route-books-alan-cole-doesnt-dance .book-hero-grid{
    display:flex;
    align-items:center;
    gap:clamp(12px, 3vw, 28px);
  }
  body.route-books-alan-cole-doesnt-dance .book-hero-grid .book-cover-frame{
    order:0;
    align-self:center;
    flex:0 1 42%;
    grid-column:auto !important;
    grid-row:auto !important;
    justify-self:auto !important;
  }
  body.route-books-alan-cole-doesnt-dance .book-hero-grid > :not(.book-cover-frame){
    order:1;
    align-self:center;
    flex:1 1 58%;
    max-width:640px;
    grid-column:auto !important;
    grid-row:auto !important;
    justify-self:auto !important;
  }
}

/* === Books index: layout shell (TOC + content) === */
.books-page-wrap{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:1rem;
}
@media (max-width: 900px){
  .books-page-wrap{ grid-template-columns:1fr; }
}

/* === Books index: sticky TOC === */
.books-toc{
  position:sticky;
  top:calc(var(--header-h, 60px) + 12px);
  align-self:start;
}
.toc-inner .toc-title{ margin:0 0 .4rem 0; font-weight:800; }
.books-toc nav a{
  display:block;
  padding:.55rem .7rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);
  margin-bottom:.35rem;
  color:var(--text);
  text-decoration:none;
}
.books-toc nav a:hover{
  background:color-mix(in srgb, var(--accent) 15%, white);
}
.books-toc nav a.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

/* === Books index: section card (active state + scroll margin) === */
.book-section{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  scroll-margin-top:calc(var(--header-h, 60px) + 16px);
}
.book-section.is-inview{
  border-color:color-mix(in srgb, var(--accent) 60%, white);
  background:color-mix(in srgb, var(--panel) 90%, white);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  transform:translateY(-2px);
}

/* === Books index: section grid + media === */
.book-section-inner{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:1rem;
  align-items:center;
}
.book-section-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  object-fit:contain;
}
.book-section-title{ margin:0 0 .3rem 0; }
.book-section-blurb{ margin:0 0 .6rem 0; color:var(--muted); }

/* === Books index: hover affordances (glow + lift) === */
.book-section{
  position:relative;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, filter .22s ease;
  will-change:transform, box-shadow;
}
.book-section::before{
  content:"";
  position:absolute; inset:-1px; border-radius:16px;
  background:radial-gradient(80% 60% at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%);
  opacity:0;
  transition:opacity .25s ease;
  z-index:0; pointer-events:none;
}
.book-section-inner{ position:relative; z-index:1; }

@media (hover: hover) and (pointer: fine){
  .book-section:hover,
  .book-section:focus-within{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--accent) 65%, white);
    background:color-mix(in srgb, var(--panel) 92%, white);
    box-shadow:0 18px 38px rgba(0,0,0,.16);
  }
  .book-section:hover::before,
  .book-section:focus-within::before{ opacity:.9; }

  .book-section-media img{ transform:scale(1); transition:transform .35s ease; }
  .book-section:hover .book-section-media img,
  .book-section:focus-within .book-section-media img{ transform:scale(1.04); }

  .book-section-actions{
    transform:translateY(4px);
    opacity:.88;
    transition:transform .22s ease, opacity .22s ease;
  }
  .book-section:hover .book-section-actions,
  .book-section:focus-within .book-section-actions{
    transform:translateY(0);
    opacity:1;
  }
}

/* === Books index: oil-in-water bloom (behind cover) === */
.book-section-media{ position:relative; overflow:hidden; }
.book-section-media .oilwater-bg-canvas{
  position:absolute; inset:0;
  z-index:0;
  filter:blur(14px) saturate(115%) contrast(105%);
  opacity:.58;
  pointer-events:none;
}
.book-section-media > img,
.book-section-media > .cover{
  position:relative; z-index:1;
}
@media (hover: hover) and (pointer: fine){
  .book-section:hover .book-section-media .oilwater-bg-canvas,
  .book-section:focus-within .book-section-media .oilwater-bg-canvas{ opacity:.72; }
}

/* === Books index: reduced motion === */
@media (prefers-reduced-motion: reduce){
  .book-section, .book-section *{ transition:none !important; }
}

/* === Books index: narrow screens === */
@media (max-width: 700px){
  .books-toc{ position:static; }
  .book-section-inner{ grid-template-columns:1fr; }
  .book-section-media img{ max-width:320px; }
}

/* === Books index: animated oil host (canvas behind content) === */
.book-section{ position:relative; overflow:hidden; }
.book-section-inner{ position:relative; z-index:1; }
.book-section .oilwater-bg-canvas{
  position:absolute; inset:0;
  z-index:0;
  filter:blur(22px) saturate(115%) contrast(105%);
  opacity:.58;
  pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
  .book-section.oil-active .oilwater-bg-canvas,
  .book-section:hover .oilwater-bg-canvas,
  .book-section:focus-within .oilwater-bg-canvas{ opacity:.72; }
}
.book-section.oil-active::before{ opacity:0 !important; }
@media (hover: hover) and (pointer: fine){
  .book-section:hover::before,
  .book-section:focus-within::before{ opacity:0; }
}

/* === Books index: oil-only hover (neutralize prior lifts) === */
.book-section{ position:relative; overflow:hidden; }
.book-section-inner{ position:relative; z-index:1; }
.book-section .oilwater-bg-canvas{
  position:absolute; inset:0;
  z-index:0;
  filter:blur(22px) saturate(115%) contrast(105%);
  opacity:.7;
  pointer-events:none;
}
.book-section::before{ display:none !important; }
@media (hover: hover) and (pointer: fine){
  .book-section:hover,
  .book-section:focus-within{ transform:none !important; box-shadow:none !important; }
  .book-section:hover .book-section-media img,
  .book-section:focus-within .book-section-media img{ transform:none !important; }
  .book-section:hover .book-section-actions,
  .book-section:focus-within .book-section-actions{
    transform:none !important; opacity:1 !important;
  }
}

/* === Books index: diffuse text halo (title + blurb) === */
.book-section{ position:relative; overflow:hidden; }
.book-section .oilwater-bg-canvas{ z-index:-2; }
.book-section .book-section-title,
.book-section .book-section-blurb{
  position:relative; z-index:1;
}
.book-section .book-section-title::before,
.book-section .book-section-blurb::before{
  content:"";
  position:absolute;
  inset:-8% -6%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120% 140% at 50% 45%,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.42) 55%,
      rgba(255,255,255,0) 80%);
  filter:blur(8px);
  opacity:.9;
}
.book-section .book-section-title{
  text-shadow:0 1px 8px rgba(0,0,0,.22), 0 2px 18px rgba(0,0,0,.16);
}
.book-section .book-section-blurb{
  text-shadow:0 1px 6px rgba(0,0,0,.18), 0 2px 14px rgba(0,0,0,.14);
}
@supports (mix-blend-mode: plus-lighter){
  .book-section .book-section-title::before,
  .book-section .book-section-blurb::before{ mix-blend-mode:plus-lighter; }
}
@media (hover: hover) and (pointer: fine){
  .book-section:hover,
  .book-section:focus-within{
    transform:none !important;
    box-shadow:none !important;
    filter:none !important;
  }
  .book-section:hover .book-section-media img,
  .book-section:focus-within .book-section-media img{ transform:none !important; }
  .book-section:hover .book-section-actions,
  .book-section:focus-within .book-section-actions{
    transform:none !important; opacity:1 !important;
  }
}

/* === Kidlit Playground: wrapper + stage tokens === */
.kp-root{
  position:relative;
  border:1px solid var(--border);
  border-radius:16px;
  background:
    var(--paperTex, none),
    linear-gradient(180deg, #fffdf8, #fff7ee);
  background-size:200px 200px, 100% 100%;
  background-blend-mode:multiply, normal;
  padding:clamp(12px, 2.4vw, 18px);
  overflow:visible;
  min-height:72vh;
  --kp-keepout:56;
  --kp-ring-extra:28;
  --kp-x-stretch:0;
}
.kp-root{
  --kp-edge-pad:24;
  --kp-gap:32;
  --kp-keepout:90;
  --kp-ring-extra:24;
  --kp-min-scale:.8;
  --kp-bubble-w:380;
  --kp-bubble-h:240;
  --kp-cloud-widen-x:1.18;
  --kp-cloud-stroke:1;
  --kp-underfill-x:.82;
  --kp-underfill-y:.78;
}
.kp-root::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(0deg, rgba(60,30,0,.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(60,30,0,.06) 0 1px, transparent 1px 28px);
  opacity:.6;
}

/* === Kidlit Playground: layers (arrows / center / bubbles) === */
.kp-arrows{ position:absolute; inset:0; z-index:9; pointer-events:none; }
.kp-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:7;
  text-align:center;
  max-width:min(560px,92%);
  background:color-mix(in srgb, var(--panel) 96%, white);
  border:1px solid var(--border);
  border-radius:16px;
  padding:clamp(12px, 2vw, 18px);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.kp-bubbles{ position:absolute; inset:0; z-index:8; }

/* === Kidlit Playground: center card text === */
.kp-center h1{
  margin:0 0 .3rem 0;
  font-size:clamp(1.25rem, 3.2vw, 2rem);
  line-height:1.1;
  text-shadow:0 8px 26px rgba(0,0,0,.18);
}
.kp-center p{ margin:0; color:color-mix(in srgb, var(--text) 75%, white); }

/* === Kidlit Playground: bubble color tokens === */
.bubble-blue{ --bubble:#90b3db; }
.bubble-green{ --bubble:#cfe9b8; }
.bubble-pink{ --bubble:#f3c3d2; }
.bubble-lilac{ --bubble:#d6ccff; }
.bubble-yellow{ --bubble:#f6df9d; }
.bubble-orange{ --bubble:#f5c19c; }

/* === Kidlit Playground: bubble content host === */
.kp-bubble .kp-content{
  position:absolute; left:50%; top:50%;
  transform:translate(calc(-50% + var(--kp-ox,0px)), calc(-50% + var(--kp-oy,0px)));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 16px;
  width:100%; height:100%; max-width:100%;
  z-index:2;
}
.kp-bubble:hover,
.kp-bubble:focus-within{ transform:translateY(-4px); z-index:9; }
.kp-bubble svg{ filter:none !important; }

/* === Kidlit Playground: bubble title + afterglow === */
.kp-title{
  margin:0; font-weight:900;
  font-size:clamp(1.15rem, 1.7vw, 1.35rem);
  line-height:1.15;
  transform:translateY(0);
  transition:transform .26s ease, font-size .26s ease;
  text-shadow:0 1px 0 rgba(0,0,0,.05);
}
.kp-title::after{
  content:attr(data-text);
  position:absolute; inset:0;
  transform:translateY(1px);
  filter:blur(6px) contrast(115%) saturate(110%);
  opacity:.5;
  color:transparent;
  background:radial-gradient(50% 50% at 50% 60%, #fff 0 35%, transparent 70%);
  -webkit-background-clip:text; background-clip:text;
  pointer-events:none; mix-blend-mode:screen;
}

/* === Kidlit Playground: bubble body (revealed on hover) === */
.kp-body{
  display:none;
  max-width:42ch;
  margin-top:.6rem;
  font-size:.95rem;
  line-height:1.35;
  opacity:0;
}
.kp-bubble:hover .kp-title,
.kp-bubble:focus-within .kp-title{ transform:translateY(-6px) scale(.94); }
@keyframes kpFadeInUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.kp-bubble:hover .kp-body,
.kp-bubble:focus-within .kp-body{ display:block; animation:kpFadeInUp .26s ease both; }

/* === Kidlit Playground: connecting arrows === */
.kp-arrows path{
  fill:none;
  stroke:color-mix(in srgb, var(--text) 45%, white);
  stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

/* === Kidlit Playground: neutral cloud rotation === */
.pos-1, .pos-2, .pos-3, .pos-4, .pos-5, .pos-6{ rotate:0deg !important; }

/* === Kidlit Playground: overflow safety === */
.kp-root, .kp-bubbles{ overflow:visible; }
.kp-root{ --kp-ring-boost:0; }

/* === Kidlit Playground: mobile layout adjustments === */
@media (max-width: 900px){
  .kp-bubbles .kp-bubble,
  .kp-bubbles .kp-bubble .kp-content{ box-sizing:border-box !important; }
  .kp-bubbles .kp-bubble{ padding:16px 18px !important; }
  .kp-bubbles .kp-bubble .kp-content{
    padding:0 !important; width:100% !important; margin:0 !important;
  }
  .kp-root .kp-center{
    position:static !important; transform:none !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    margin:0 auto .8rem !important;
    width:100% !important;
    max-width:min(560px, 92%) !important;
    text-align:center !important;
  }
  .kp-bubbles .kp-bubble .kp-face{ display:block !important; text-align:center !important; }
  .kp-bubbles .kp-bubble .kp-face > *{
    margin-left:auto !important; margin-right:auto !important; max-width:42ch;
  }
}

/* === Kidlit Playground: decorative lightbulb === */
.kp-lightbulb{
  position:absolute;
  transform:translate(-50%, -50%);
  width:var(--kp-bulb-size, 44px);
  height:var(--kp-bulb-size, 44px);
  display:grid; place-items:center;
  border:0; padding:0; background:transparent;
  cursor:pointer;
  z-index:10;
  filter:grayscale(.6) brightness(.9);
  transition:filter .18s ease, text-shadow .18s ease, transform .18s ease;
  pointer-events:auto;
}
.kp-lightbulb .emoji{
  font-size:calc(var(--kp-bulb-size, 44px) * .9);
  line-height:1;
}
.kp-lightbulb:hover,
.kp-lightbulb:focus-visible,
.kp-root:hover .kp-lightbulb{
  filter:none;
  text-shadow:
    0 0 10px rgba(255,240,168,.95),
    0 0 20px rgba(255,236,140,.75),
    0 0 36px rgba(255,210,80,.55);
}
@media (max-width:900px){
  .kp-lightbulb{ display:none; }
}

/* === KWI (workshop/info) section === */
.kwi{ display:grid; gap:1rem; }
.kwi-hero{ padding:2rem; position:relative; overflow:hidden; }
.kwi-hero-inner{ text-align:center; max-width:60ch; margin:0 auto; }
.kwi-title{ margin:0 0 .25rem 0; }
.kwi-tagline{ margin:0 0 1rem 0; font-size:1.125rem; }
.kwi-cta{ display:grid; gap:.4rem; justify-items:center; }
.kwi-seat-note{ opacity:.8; }
.kwi-facts{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.kwi-fact{ background:var(--paper, #fff); border-radius:10px; padding:.6rem .8rem; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.kwi-grid{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.kwi-card{ padding:1rem; }
.kwi-steps{ padding:1rem 1.2rem; }
.kwi-steps-list{ counter-reset:s; display:grid; gap:.8rem; margin:0; padding:0; list-style:none; }
.kwi-steps-list li{ padding-left:.25rem; }
.kwi-steps-list li h4{ margin:0 0 .25rem; }
.kwi-split{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.kwi-split .card{ padding:1rem; }
.kwi-pricing{ display:grid; gap:.8rem; padding:1rem; align-items:center; }
.kwi-price-main{ display:grid; gap:.6rem; }
.kwi-price{ font-size:2rem; line-height:1; }
.kwi-price-amount{ font-weight:800; }
.kwi-price-note{ font-size:.9rem; opacity:.8; margin-left:.4rem; }
.kwi-price-points{ margin:.25rem 0 0 0; padding-left:1.1rem; }
.kwi-price-cta{ display:grid; gap:.25rem; justify-items:start; }
.kwi-faq{ padding:1rem; }
.kwi-faq details{ border-top:1px solid rgba(0,0,0,.08); padding:.6rem 0; }
.kwi-faq details:first-of-type{ border-top:0; }

/* === Generic FAQ affordances === */
.faq details > summary{ cursor:pointer; }
.faq details > summary *{ cursor:inherit; }
.faq details[open] > summary::after{ transform:rotate(45deg); }
.faq details[open] > :not(summary){
  border-top:1px dashed rgba(0,0,0,.08);
  padding-top:.5rem;
}

.kwi-final-cta{ display:grid; gap:.4rem; justify-items:center; padding:.5rem 0 1rem; }
.kwi-footnote{ margin:0; opacity:.8; text-align:center; }
@media (min-width: 900px){
  .kwi-pricing{ grid-template-columns:1fr auto; }
}

/* === Home → Books: remove outer .page chrome (via :has) === */
@supports selector(.page:has(> .home-section.home-books)){
  .page:has(> .home-section.home-books){
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  .page:has(> .home-section.home-books) > .home-section{
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
}
.page:has(.home-section.home-books){
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
}
.page:has(.home-section.home-books) .page-body > .home-section{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* === Forms: inputs === */
input, textarea{
  width:100%;
  padding:.6rem .7rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
}
input:focus, textarea:focus{
  outline:2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* === Nav: disable underline animation on buttons === */
nav a.button{ background-image:none; }

/* === App boot: hide until ready === */
html.is-booting #app{
  opacity:0;
  transform:translateY(6px);
}
@media (prefers-reduced-motion: reduce){
  html.is-booting #app{ opacity:1; transform:none; }
}

/* === App page transitions (fade up) === */
#app{ transition:opacity 160ms ease, transform 160ms ease; }
#app.is-exiting{ opacity:0; transform:translateY(6px); }
@keyframes fadeUpIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
#app.is-entering{ animation:fadeUpIn 220ms ease both; }
#app:focus{ outline:none; }
.page h1:focus:not(:focus-visible){ outline:none; }

/* === Container tokens + books cap === */
:root{
  --container-w:1100px;
  --container-pad:1.25rem;
}
.home-section.home-books .books-cap{
  max-width:var(--container-w);
  width:100%;
  margin-inline:auto;
  padding-inline:var(--container-pad);
  box-sizing:content-box;
}

/* === Home Kidlit: background clouds (flat + tracks) === */
.home-kidlit{ position:relative; overflow:clip; }
@supports not (overflow: clip){ .home-kidlit{ overflow:hidden; } }
.home-kidlit .kidlit-sky{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  --spawn:-120vw;
  --despawn:20vw;
}
.home-kidlit{
  --kid-peach:#f4ab74; --kid-blue:#90b3db; --kid-pink:#f3c3d2;
  --kid-lilac:#d6ccff; --kid-yellow:#f6df9d; --kid-green:#cfe9b8;
}
.home-kidlit .kidlit-sky .cloud{
  --cloud-color:#fff;
  width:350px; height:120px; border-radius:100px;
  background:var(--cloud-color);
  position:relative; transform-origin:left center;
}
.home-kidlit .kidlit-sky .cloud::before,
.home-kidlit .kidlit-sky .cloud::after{
  content:""; position:absolute; z-index:-1; background:var(--cloud-color);
}
.home-kidlit .kidlit-sky .cloud::after{
  width:100px; height:100px; left:50px; top:-50px; border-radius:100px;
}
.home-kidlit .kidlit-sky .cloud::before{
  width:180px; height:180px; right:50px; top:-90px; border-radius:200px;
}

/* === Cloud tracks + timings === */
.home-kidlit .kidlit-sky .x1,
.home-kidlit .kidlit-sky .x2,
.home-kidlit .kidlit-sky .x3,
.home-kidlit .kidlit-sky .x4,
.home-kidlit .kidlit-sky .x5{
  position:absolute; left:0; will-change:transform;
  animation:kidlitCloudDrift linear infinite;
}
.home-kidlit .kidlit-sky .x1{ top:12%; animation-duration:35s; animation-delay:-8s; }
.home-kidlit .kidlit-sky .x2{ top:32%; animation-duration:20s; animation-delay:-4s; }
.home-kidlit .kidlit-sky .x3{ top:52%; animation-duration:30s; animation-delay:-12s; }
.home-kidlit .kidlit-sky .x4{ top:72%; animation-duration:18s; animation-delay:-9s; }
.home-kidlit .kidlit-sky .x5{ top:22%; animation-duration:25s; animation-delay:-6s; }

/* === Cloud scaling/tint per track === */
.home-kidlit .kidlit-sky .x1 .cloud{ transform:scale(.65); --cloud-color:var(--kid-peach); }
.home-kidlit .kidlit-sky .x2 .cloud{ transform:scale(.30); --cloud-color:var(--kid-blue); }
.home-kidlit .kidlit-sky .x3 .cloud{ transform:scale(.50); --cloud-color:var(--kid-pink); }
.home-kidlit .kidlit-sky .x4 .cloud{ transform:scale(.40); --cloud-color:var(--kid-lilac); }
.home-kidlit .kidlit-sky .x5 .cloud{ transform:scale(.55); --cloud-color:var(--kid-yellow); }

/* === Cloud motion keyframes === */
@keyframes kidlitCloudDrift{
  from{ transform:translateX(var(--spawn)); }
  to  { transform:translateX(calc(100vw + var(--despawn))); }
}

/* === Clouds: reduced motion === */
@media (prefers-reduced-motion: reduce){
  .home-kidlit .kidlit-sky .x1,
  .home-kidlit .kidlit-sky .x2,
  .home-kidlit .kidlit-sky .x3,
  .home-kidlit .kidlit-sky .x4,
  .home-kidlit .kidlit-sky .x5{ animation:none; }
}

/* === Clouds: global speed multiplier === */
.home-kidlit{ --cloud-speed:1.8; }
.home-kidlit .kidlit-sky .x1{ animation-duration:calc(35s * var(--cloud-speed)); animation-delay:calc(-8s * var(--cloud-speed)); }
.home-kidlit .kidlit-sky .x2{ animation-duration:calc(20s * var(--cloud-speed)); animation-delay:calc(-4s * var(--cloud-speed)); }
.home-kidlit .kidlit-sky .x3{ animation-duration:calc(30s * var(--cloud-speed)); animation-delay:calc(-12s * var(--cloud-speed)); }
.home-kidlit .kidlit-sky .x4{ animation-duration:calc(18s * var(--cloud-speed)); animation-delay:calc(-9s * var(--cloud-speed)); }
.home-kidlit .kidlit-sky .x5{ animation-duration:calc(25s * var(--cloud-speed)); animation-delay:calc(-6s * var(--cloud-speed)); }

/* === Kidlit Playground card sizing (desktop + mobile) === */
.home-kidlit{ --kp-card-max:800px; }
.home-kidlit .cloud-card{
  box-sizing:border-box;
  width:min(var(--kp-card-max), 92vw);
  margin:0 auto;
}
.home-kidlit .cloud-blurb{ max-width:58ch; }
@media (max-width: 900px){
  .home-kidlit{ padding-inline:0; }
  .home-kidlit .cloud-card{
    width:min(94vw, 620px);
    padding:clamp(18px, 4vw, 28px);
    border-radius:22px;
  }
  .home-kidlit .cloud-title{ font-size:clamp(22px, 6.2vw, 34px); }
  .home-kidlit .cloud-cta{ gap:8px; justify-content:center; flex-wrap:wrap; }
  .home-kidlit .cloud-cta .button{ flex:1 1 auto; min-width:min(46%, 260px); }
}

/* === Home → Services: section wrapper === */
.home-section.home-services{
  background:transparent;
  padding:clamp(18px, 3vw, 28px) 0;
}

/* === Home → Services: inner panel + wash === */
.home-section.home-services .services-inner{
  position:relative;
  box-sizing:border-box;
  max-width:1100px;
  margin:0 auto;
  padding:clamp(18px, 3vw, 28px);
  border:1px solid color-mix(in srgb, var(--text, #3a2a1f) 14%, transparent);
  border-radius:16px;
  background:
    var(--paperTex, none),
    linear-gradient(180deg, color-mix(in srgb, var(--panel, #fff9f5) 96%, white), var(--panel, #fff9f5));
  background-size:200px 200px, 100% 100%;
  background-blend-mode:multiply, normal;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  overflow:hidden;
}
.home-section.home-services .services-inner::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 12% 10%, color-mix(in srgb, var(--accent, #f4ab74) 18%, transparent) 0%, transparent 70%),
    radial-gradient(120% 80% at 90% 90%, color-mix(in srgb, #90b3db 14%, transparent) 0%, transparent 70%);
  opacity:.9;
}
.home-section.home-services .section-title,
.home-section.home-services .section-sub,
.home-section.home-services .services-grid{ position:relative; z-index:1; }
.home-section.home-services .section-title{
  text-align:center; margin:0 0 .25rem;
}
.home-section.home-services .section-sub{
  text-align:center;
  margin:0 0 clamp(10px, 2vw, 16px);
  color:color-mix(in srgb, var(--text, #3a2a1f) 70%, white);
  white-space:pre-line;
}

/* === Home → Services: card arrow cue + hover === */
.home-section.home-services .service-card::after{
  content:"→";
  position:absolute; right:12px; bottom:10px;
  font-weight:700; opacity:.35;
  transition:transform .18s ease, opacity .18s ease;
}
@media (hover: hover) and (pointer: fine)){
  /* Note: extra ) intentionally removed earlier; keep syntax valid */
}
@media (hover: hover) and (pointer: fine){
  .home-section.home-services .service-card:hover,
  .home-section.home-services .service-card:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.10);
    border-color:color-mix(in srgb, var(--accent, #f4ab74) 45%, transparent);
  }
  .home-section.home-services .service-card:hover::after,
  .home-section.home-services .service-card:focus-visible::after{
    transform:translateX(2px);
    opacity:.6;
  }
}
@media (max-width: 900px){
  .home-section.home-services .services-inner{
    border-radius:14px;
    padding:clamp(14px, 3.5vw, 22px);
  }
  .home-section.home-services .services-grid{ gap:12px; }
  }

/* === School Visits: root tokens === */
:root { --ruled-overhang: 32px; }

/* === Pinboard frame + cork === */
.sv-board{
  position: relative;
  overflow: visible;
  border-radius: 0;
  isolation: isolate;
  margin-bottom: var(--ruled-overhang);
  padding-bottom: calc(clamp(14px, 2.4vw, 24px) + var(--ruled-overhang));
  --frame-w: 13px;
  border: var(--frame-w) solid transparent;
  border-image: linear-gradient(145deg,#cfcfcf,#f6f6f6 28%,#bdbdbd 60%,#f3f3f3 85%) 1;
  box-shadow:
    0 16px 36px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 8px 18px rgba(0,0,0,.06);
  background-clip: padding-box;
  --cork:#dcbc8d; --cork-d:#caa975; --cork-l:#e8cc9b;
  background:
    radial-gradient(10px 10px at 12% 18%, rgba(0,0,0,.07) 0 1px, transparent 1px 100%) repeat,
    radial-gradient(12px 12px at 70% 62%, rgba(0,0,0,.06) 0 1px, transparent 1px 100%) repeat,
    radial-gradient(8px 8px at 35% 80%, rgba(0,0,0,.05) 0 1px, transparent 1px 100%) repeat,
    linear-gradient(180deg, var(--cork-l), var(--cork-d));
  background-size: 44px 44px, 56px 56px, 42px 42px, 100% 100%;
  padding: clamp(14px, 2.4vw, 24px);
  --sticky1-x: 8px;
  --sticky1-y: -14px;
  --sticky2-y: -12px;
}
.sv-board::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 0;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(0,0,0,.03);
  z-index: 0;
}
.sv-board::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, rgba(255,255,255,.03) 2px 6px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  opacity: .75;
}

/* === Torn title strip === */
.sv-torn-title{
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(10px, 2vw, 16px);
  width: max-content;
  padding: 0;
  transform: rotate(-0.7deg);
}
.sv-torn-title::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(253,253,200,.70), rgba(253,253,200,.50)) left 22px top -10px / 92px 22px no-repeat,
    linear-gradient(180deg, rgba(253,253,200,.70), rgba(253,253,200,.50)) right 22px top -12px / 92px 22px no-repeat;
  -webkit-mask:
    linear-gradient(#000, #000) left 22px top -10px / 92px 22px no-repeat,
    linear-gradient(#000, #000) right 22px top -12px / 92px 22px no-repeat;
          mask:
    linear-gradient(#000, #000) left 22px top -10px / 92px 22px no-repeat,
    linear-gradient(#000, #000) right 22px top -12px / 92px 22px no-repeat;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.18));
  z-index: 2;
}
.sv-title-text{
  margin: 0;
  padding: .7rem 1.1rem;
  background: #fff;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  font-size: clamp(4rem, 4.2vw, 2.4rem);
  line-height: 1.1;
  position: relative;
}
.sv-title-text::before{
  content:"";
  position:absolute;
  inset: -10px -12px -12px -12px;
  z-index: -1;
  border-radius: 6px;
  transform: rotate(.6deg);
}

/* === Board grid === */
.sv-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "a4 polaroid"
    "ruled ruled";
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}
.sv-torn-title, .sv-grid{ position: relative; z-index: 1; }

/* === Pushpin === */
.sv-pin{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7676, #e6483d 60%, #b32d24);
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 10px 14px rgba(0,0,0,.18);
}

/* === Paper base === */
.sv-sheet{
  position: relative;
  background: #fff;
  color: var(--text);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  padding: clamp(12px, 1.6vw, 18px);
  --sv-rot: -0.6deg;
  animation: svSettle .5s ease-out both;
  transform: translateY(var(--sv-drop)) rotate(var(--sv-rot));
}
.sv-sheet h3{ margin: 0 0 .4rem; }
.sv-sheet p{ margin: 0 0 .6rem; }
.sv-sheet ul{ margin: 0 0 .6rem 1.1rem; }

/* === A4 sheet (left) === */
.sv-sheet.a4{
  grid-column: 1;
  aspect-ratio: 210 / 297;
  min-height: 420px;
  display: grid;
  align-content: start;
  --tilt: -1.2deg;
  background:
    var(--paperTex, none),
    radial-gradient(140% 120% at 10% -10%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(180deg, #fffef9 0%, #ffffff 70%);
  background-size: 200px 200px, 100% 100%, 100% 100%;
  background-blend-mode: multiply, normal, normal;
  box-shadow:
    0 10px 22px rgba(0,0,0,.14),
    0 1px 0 rgba(255,255,255,.6) inset;
  border-radius: 8px;
}
.sv-sheet.a4::before{
  position:absolute;
  inset:0;
  border-radius:8px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 18px 24px rgba(0,0,0,.06),
    inset 0 -14px 20px rgba(0,0,0,.05);
  z-index: 0;
  aspect-ratio: 210 / 297;
}
.sv-sheet.a4 h3{
  display: inline-block;
  padding: 1.15rem;
  text-align: center;
  transform: rotate(-.4deg);
  font-size: 1.75rem;
}
.sv-sheet.a4 p{ margin: 0 0 .55rem; }
.sv-sheet.a4 ul{
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
}
.sv-sheet.a4 li{
  position: relative;
  padding-left: 1.15rem;
  margin: .35rem 0;
}
.sv-sheet.a4 li::before{
  content:"";
  position:absolute; left:.1rem; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background: #e07a4d;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 1px 2px rgba(0,0,0,.25);
  transform: rotate(6deg);
}
.sv-sheet.a4 hr{
  border: 0; height: 1px; margin: .6rem 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 6px, transparent 6px 14px);
  opacity: .45;
}

/* === Polaroid (right) === */
.sv-polaroid{
  grid-column: 2;
  position: relative;
  background: #fff;
  border-radius: 6px;
  padding: 10px 10px 34px;
  width: 100%;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  --sv-rot: 2.2deg;
  animation: svSettle .5s ease-out .06s both;
  transform: translateY(var(--sv-drop)) rotate(var(--sv-rot));
  animation-delay: .06s;
  z-index: 5;
}
.sv-polaroid img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}
.sv-polaroid figcaption{
  margin: .35rem 0 0;
  text-align: center;
  font-size: .9rem;
  color: color-mix(in srgb, var(--text) 70%, white);
}

/* === Small ruled note (right) === */
.sv-note{
  grid-area: note;
  justify-self: end;
  max-width: 360px;
  width: 100%;
  position: relative;
  padding: clamp(10px, 1.4vw, 16px);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  background: #fff;
  --sv-rot: 0.2deg;
  transform: translateY(var(--sv-drop)) rotate(var(--sv-rot));
  animation: svSettle .5s ease-out .08s both;
  z-index: 2;
}
.sv-note.ruled{
  background:
    linear-gradient(#fff,#fff) padding-box,
    repeating-linear-gradient(
      to bottom,
      rgba(50,110,255,.14) 0px,
      rgba(50,110,255,.14) 1px,
      transparent 1px,
      transparent 28px
    );
}
.sv-note.ruled::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,70,70,.22) 48px, transparent 0);
}
.sv-note h4{ margin: 0 0 .35rem; font-size: 1.05rem; }
.sv-note p{  margin: 0 0 .45rem; line-height: 1.45; }
.sv-note ul{ margin: .2rem 0 0 1.1rem; }
.sv-note.tuck-right{
  grid-column: 2;
  justify-self: end;
  max-width: 360px;
  width: 100%;
  margin-top: 14px;
  transform: translateY(22px) rotate(var(--sv-rot));
}
.sv-note .sv-pin{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff7676, #e6483d 60%, #b32d24);
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 10px 14px rgba(0,0,0,.18);
}
.sv-note--lined{
  background:
    linear-gradient(#fff,#fff) padding-box,
    repeating-linear-gradient(
      to bottom,
      rgba(60,110,220,.18) 0 1px,
      transparent 1px 28px
    );
}
.sv-note,
.sv-note strong{
  font-family:
    "Bradley Hand", "Segoe Print", "Noteworthy", "Comic Sans MS",
    "Trebuchet MS", Arial, sans-serif, cursive;
  letter-spacing: .15px;
  line-height: 1.45;
}
.sv-note .sv-pin{ top: -10px; }

/* === Mobile grid stacking (≤900px) === */
@media (max-width: 900px){
  .sv-grid{
    grid-template-areas:
      "a4"
      "polaroid"
      "note"
      "ruled";
    grid-template-columns: 1fr;
  }
  .sv-note{
    justify-self: center;
    max-width: 520px;
    transform: rotate(0.2deg);
  }
}

/* === Ruled sheet (bottom overhang) === */
.sv-sheet.ruled{
  grid-area: ruled;
  grid-column: 1 / -1;
  transform: rotate(0.8deg) translateY(16px);
  margin-bottom: calc(var(--ruled-overhang) * -1);
  animation-delay: .12s;
  background:
    linear-gradient(#fff,#fff) padding-box,
    repeating-linear-gradient(
      to bottom,
      rgba(50,110,255,.14) 0px,
      rgba(50,110,255,.14) 1px,
      transparent 1px,
      transparent 28px
    );
  position: relative;
  --sv-rot: .8deg;
  --shiftX: 0px;
  --shiftY: 0px;
  animation: svSettle .5s ease-out .12s both;
  transform: translate(var(--shiftX), calc(16px + var(--shiftY) + var(--sv-drop))) rotate(var(--sv-rot));
  z-index: 1 !important;
}
.sv-sheet.ruled::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,70,70,.22) 48px, transparent 0);
  border-radius: 8px;
  pointer-events: none;
}

/* === Drop/settle animation === */
@property --sv-drop { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes svSettle{
  0%   { --sv-drop: -8px; opacity: 0; }
  60%  { --sv-drop:  3px; opacity: 1; }
  100% { --sv-drop:  0px; opacity: 1; }
}

/* === Sticky notes (base + variants) === */
.sv-sticky{
  --note: #fff8b8;
  --note-border: #e7da86;
  --note-tape: rgba(255, 248, 184, .7);
  position: relative;
  inline-size: min(350px, 88%);
  max-width: 400px;
  padding: 12px 14px 14px;
  background: var(--note);
  border: 1px solid var(--note-border);
  border-radius: 6px;
  color: var(--text);
  box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04) inset;
  transform: rotate(var(--tilt, -3deg));
  z-index: 3;
}
.sv-sticky::before{
  content:"";
  position:absolute;
  left: 50%;
  top: -12px;
  width: 58%;
  height: 16px;
  background: var(--note-tape);
  transform: translateX(-50%) rotate(1.2deg);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55);
  pointer-events: none;
}
.sv-sticky p{ margin: 0 0 .4rem 0; font-size: .98rem; line-height: 1.35; }
.sv-sticky footer{ font-size: .9rem; opacity: .8; }
.sv-sticky-yellow{
  --note:#fff7b8; --note-border:#e8db76; --note-tape: rgba(255,248,184,.75);
  --tilt: -3.5deg;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: italic;
}
.sv-sticky-mint{
  --note:#eafff1; --note-border:#bfe5c9; --note-tape: rgba(220,245,232,.75);
  --tilt: 2.8deg;
  font-family: "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .1px;
}

/* === Sticky anchors (A4 / Polaroid) === */
.sv-sheet.a4, .sv-polaroid { position: relative; }
.sv-sheet.a4 > .sv-sticky--quote1{
  position: absolute;
  right: var(--s1-right, -8px);
  bottom: var(--s1-bottom, -10px);
  transform: rotate(var(--tilt, -3.5deg));
  z-index: 3;
}
.sv-polaroid > .sv-sticky--quote2{
  position: absolute;
  right: var(--s2-right, 8px);
  bottom: var(--s2-bottom, -18px);
  z-index: 3;
}
.sv-sticky--quote1,
.sv-sticky--quote2{
  grid-column: auto;
  justify-self: auto;
  align-self: auto;
  margin: 0;
}

/* === Sticky vertical anchoring fix === */
.sv-sheet.a4, .sv-polaroid { position: relative !important; }
.sv-sheet.a4 > .sv-sticky--quote1{
  position: absolute !important;
  right: var(--s1-right, -8px);
  top: auto !important;
  bottom: var(--s1-overhang, -10px);
  margin: 0 !important;
  transform: rotate(var(--tilt, -3.5deg)) !important;
  z-index: 3;
}
.sv-polaroid > .sv-sticky--quote2{
  position: absolute !important;
  left: 50%;
  top: calc(100% + var(--s2-gap, 8px));
  right: auto; bottom: auto;
  margin: 0 !important;
  transform: translateX(-50%) rotate(var(--tilt, -2.5deg)) !important;
  z-index: 3;
}
.sv-sticky--quote1,
.sv-sticky--quote2{
  justify-self: auto !important;
  align-self: auto !important;
}
.sv-sheet.a4{ position: relative !important; }
.sv-sheet.a4{ padding-bottom: calc(var(--s1-reserve) + var(--s1-gap)) !important; }

/* === Final sticky spacing fix === */
:root{
  --s1-gap: 100px;
  --s1-reserve: 220px;
}
.sv-sheet.a4{
  position: relative !important;
  padding-bottom: 0 !important;
}
.sv-sheet.a4 > .sv-sticky--quote1{
  position: absolute !important;
  top: calc(100% - var(--s1-gap)) !important;
  bottom: auto !important;
  right: var(--s1-right, -8px);
  margin: 0 !important;
  transform: rotate(var(--tilt, -3.5deg)) !important;
  z-index: 3;
}
.sv-sheet.ruled{ margin-top: var(--s1-reserve) !important; }
.sv-polaroid{ position: relative !important; }
.sv-sheet.a4{ position: relative !important; z-index: 30 !important; }
.sv-polaroid{ position: relative !important; z-index: 20 !important; }
.sv-sheet.ruled{ position: relative !important; z-index: 10 !important; }
.sv-sheet.a4::before{ z-index: -1 !important; }
.sv-sheet.a4 > .sv-sticky--quote1{ z-index: 40 !important; }

/* === Ruled sheet: typography + padding === */
.sv-sheet.ruled h3{
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 0 0 .6rem;
}
.sv-sheet.ruled{ padding-left: clamp(64px, 8vw, 88px); }

/* === Pricing cards === */
.sv-price-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 18px);
  margin: .6rem 0 1rem;
}
.sv-price{
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  padding: .9rem 1rem;
}
.sv-price h4{
  margin: 0 0 .35rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
.sv-price-amount{
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

/* === Responsive (≤900px) === */
@media (max-width: 900px){
  .sv-grid{
    grid-template-areas:
      "a4"
      "polaroid"
      "note ."
      "ruled";
    grid-template-columns: 1fr;
  }
  .sv-sheet.a4{ aspect-ratio: auto; min-height: 0; }
  .sv-polaroid{ max-width: 520px; justify-self: center; }
  .sv-sheet.a4 > .sv-sticky--quote1,
  .sv-polaroid > .sv-sticky--quote2{
    position: static;
    right: auto; bottom: auto;
    margin-top: 10px;
  }
  .sv-sheet.ruled{ margin-bottom: calc(var(--ruled-overhang) * -0.7); }
}

/* === Mobile layout (≤900px) — full bleed board === */
@media (max-width: 900px){
  :root{ --section-pad: 16px; }
  .sv-board{
    margin-left: calc(-1 * var(--section-pad));
    margin-right: calc(-1 * var(--section-pad));
    border-radius: 0;
    padding-left: var(--section-pad);
    padding-right: var(--section-pad);
  }
  .sv-grid{ display: block; }
  .sv-sheet.a4{
    aspect-ratio: auto; min-height: 0;
    transform: none; rotate: 0deg; width: 100%;
  }
  .sv-polaroid{ transform: none; rotate: 0deg; width: 100%; margin-top: 16px; }
  .sv-sticky{
    position: static !important;
    inline-size: min(520px, 92%);
    max-width: none;
    min-height: 260px;
    margin-top: 16px;
    transform: rotate(-1deg);
  }
  .sv-sticky--quote1{ margin-left: clamp(8px, 6vw, 28px); }
  .sv-sticky--quote2{ margin-left: auto; margin-right: clamp(8px, 6vw, 28px); }
  .sv-sheet.ruled{
    transform: none;
    width: 100%;
    margin-top: 18px;
    margin-bottom: 0;
    padding-left: clamp(56px, 8vw, 88px);
  }
  .sv-pin{ top: -8px; }
}

/* === Mobile polish (container queries + centering) === */
@media (max-width: 900px){
  .sv-board{ container-type: inline-size; }
  .sv-sheet.ruled{
    width: 100%;
    width: min(96cqw, 100%);
    margin-inline: auto;
    --ruled-padL: clamp(56px, 8vw, 88px);
    --ruled-padR: clamp(12px, 4vw, 18px);
    padding-left:  var(--ruled-padL);
    padding-right: var(--ruled-padR);
    transform: translateX(calc(-0.5 * (var(--ruled-padL) - var(--ruled-padR)))) !important;
  }
  .sv-board{
    --svb-pad: clamp(16px, 5vw, 24px);
    padding-left:  var(--svb-pad) !important;
    padding-right: var(--svb-pad) !important;
    margin-left:  calc(-1 * var(--svb-pad)) !important;
    margin-right: calc(-1 * var(--svb-pad)) !important;
  }
  .sv-sheet{ --shiftX: 0px !important; }
  .sv-polaroid{
    --ruled-padL: clamp(56px, 8vw, 88px);
    --ruled-padR: clamp(12px, 4vw, 18px);
    margin-left:  calc(-0.5 * (var(--ruled-padL) - var(--ruled-padR))) !important;
    margin-right: calc( 0.75 * (var(--ruled-padL) - var(--ruled-padR))) !important;
    transform: rotate(-1deg);
  }
  .home-section, .page{ --svb-pad: 20px; }
  .sv-title-text{
    margin: 0;
    padding: .55rem .9rem;
    background: #fff;
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    line-height: 1.1;
    font-size: clamp(2.25rem, 3.2vw, 1.8rem);
    position: relative;
  }
  .sv-sheet.ruled{
    --ruled-padL: clamp(56px, 8vw, 88px);
    --ruled-padR: clamp(12px, 4vw, 18px);
    padding-left:  var(--ruled-padL) !important;
    padding-right: var(--ruled-padR) !important;
    margin-left:  calc(-0.25 * (var(--ruled-padL) - var(--ruled-padR))) !important;
    margin-right: calc( 0.5 * (var(--ruled-padL) - var(--ruled-padR))) !important;
    margin-top:   calc( 0.5 * (var(--ruled-padL) - var(--ruled-padR))) !important;
  }
}

/* === Editing page: grids === */
.editing-page .quotes-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.2vw, 18px);
}
@media (min-width: 720px){
  .editing-page .quotes-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px){
  .editing-page .quotes-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
.editing-page .quote{ padding: 1rem 1.1rem; }

/* === Editing page: section shells === */
.editing-page .page-section{
  --ring: var(--sec-color, #f4ab74);
  --band: color-mix(in srgb, var(--ring) 10%, transparent);
  margin: clamp(14px, 2.4vw, 24px) 0;
  padding: clamp(8px, 1.2vw, 12px);
  border-left: 6px solid var(--ring);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--band), transparent 70%) no-repeat;
}
.editing-page .section-head{
  margin: 0 0 .5rem;
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
  line-height: 1.2;
}
.editing-page .section-card{
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  padding: clamp(12px, 1.6vw, 18px);
  background-image: var(--paperTex, none);
  background-size: 200px 200px;
  background-blend-mode: multiply;
}
.editing-page .section--editing  { --sec-color: #f4ab74; }
.editing-page .section--coaching { --sec-color: #90b3db; }
.editing-page .section--workshops{ --sec-color: #9ad6b4; }

/* === Editing page: quotes grid (alt) === */
.editing-page .quotes-grid{
  display: grid;
  gap: clamp(10px, 2vw, 16px);
  margin: .75rem 0 0;
}
@media (min-width: 720px){
  .editing-page .quotes-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px){
  .editing-page .quotes-grid{ grid-template-columns: 1fr 1fr 1fr; }
}
.editing-page .quote{
  position: relative;
  padding: .9rem 1rem .9rem 1.3rem;
  border-left: 4px solid var(--ring);
  background: linear-gradient(180deg, rgba(0,0,0,.015), transparent);
}
.editing-page .quote::before{
  content: "“";
  position: absolute;
  left: .4rem; top: .2rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ring);
  opacity: .5;
}

/* === Editing page: lists + CTAs === */
.editing-page .bullets{ margin: .6rem 0 .2rem 1.1rem; }
.editing-page .bullets li{ margin: .25rem 0; }
.editing-page .cta-row{
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: .8rem;
}
.editing-page .page-hero{ margin-bottom: clamp(10px, 2vw, 16px); }

/* === Editing page: interstitial rows === */
.editing-page .trow{
  display: flex;
  gap: clamp(12px, 3vw, 22px);
  align-items: center;
  margin: clamp(14px, 2.4vw, 24px) 0;
  padding: clamp(10px, 1.8vw, 16px);
}
.editing-page .trow-fig{ flex: 0 0 min(42%, 360px); }
.editing-page .trow-fig img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.editing-page .trow-quote{
  flex: 1 1 auto;
  margin: 0;
  padding: .6rem .8rem .6rem 1rem;
  border-left: 4px solid color-mix(in srgb, var(--text) 15%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border-radius: 10px;
}
.editing-page .trow-quote p{ margin: 0 0 .4rem; }
.editing-page .trow-quote footer{ opacity: .8; font-size: .95rem; }
.editing-page .trow.trow--flip{ flex-direction: row-reverse; }
.editing-page .trow.trow--flip .trow-quote{
  border-left: 0; border-right: 4px solid color-mix(in srgb, var(--text) 15%, transparent);
  padding: .6rem 1rem .6rem .8rem;
}
@media (max-width: 780px){
  .editing-page .trow{ flex-direction: column; text-align: left; }
  .editing-page .trow-fig{ width: 100%; flex-basis: auto; }
  .editing-page .trow.trow--flip{ flex-direction: column; }
  .editing-page .trow-quote{ border-left-width: 3px; border-right-width: 0; }
}

/* === Editing page: repeated section polish === */
.editing-page .page-section{
  --ring: var(--sec-color, #f4ab74);
  --band: color-mix(in srgb, var(--ring) 10%, transparent);
  margin: clamp(14px, 2.4vw, 24px) 0;
  padding: clamp(8px, 1.2vw, 12px);
  border-left: 6px solid var(--ring);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--band), transparent 70%) no-repeat;
}
.editing-page .section-card{
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  padding: clamp(12px, 1.6vw, 18px);
  background-image: var(--paperTex, none);
  background-size: 200px 200px;
  background-blend-mode: multiply;
}
.editing-page .section--editing  { --sec-color: #f4ab74; }
.editing-page .section--coaching { --sec-color: #90b3db; }
.editing-page .section--workshops{ --sec-color: #9ad6b4; }
.editing-page .section-head{ margin: 0 0 .5rem; font-size: clamp(1.2rem, 2.8vw, 1.6rem); }
.editing-page .cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.editing-page .bullets{ margin:.6rem 0 .2rem 1.1rem; }

/* === Editing page: bottom text rotator === */
.editing-page .trot{
  position: relative;
  max-width: 980px;
  margin: clamp(16px, 4vw, 28px) auto 0;
}
.editing-page .trot-shell{ overflow: hidden; outline: none; }
.editing-page .trot-list{ list-style: none; margin: 0; padding: 0; position: relative; }
.editing-page .trot-slide{
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: stretch;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms ease;
  padding: 0 clamp(20px, 2vw, 12px);
}
.editing-page .trot-slide.is-active{
  position: relative; opacity: 1; pointer-events: auto;
}


/* === Author services: glass panel tone === */
.author-services-page .glass.panel{
  background:color-mix(in srgb, #fff 70%, transparent);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

/* === Editing: testimonial quote card === */
.editing-page .trot-quote{
  margin: 0;
  padding: 1.5rem 1rem 1.5rem 1.1rem;
  border-left: 4px solid color-mix(in srgb, var(--text) 15%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border-radius: 12px;
  max-width: 840px;
  width: 100%;
}

/* === Editing: rotator arrows (desktop defaults) === */
.editing-page .trot .trot-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  cursor: pointer;
  user-select: none;
}
.editing-page .trot .trot-arrow.left  { left:  -12px; }
.editing-page .trot .trot-arrow.right { right: -12px; }
.editing-page .trot .trot-arrow:focus-visible{ outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent); }

/* === Editing: arrow tuck on small screens === */
@media (max-width: 700px){
  .editing-page .trot .trot-arrow.left  { left:  2px; }
  .editing-page .trot .trot-arrow.right { right: 2px; }
}

/* === Editing: rotator wrapper sizing + gutters === */
.editing-page .trot-wrap{
  max-width: 980px;
  margin: clamp(16px, 3vw, 24px) auto 0;
  padding: 0 clamp(8px, 2vw, 12px);
}

/* === Editing: rotator heading + spacing === */
.editing-page .trot-head{
  text-align: center;
  margin: 0 0 .6rem;
  margin-top: 50px;
}

/* === Editing: rotator margin reset under title === */
.editing-page .trot{ margin: 0; }

/* === Editing: mobile list + rotator layout === */
@media (max-width: 900px){
  .editing-page .bullets{
    --mobile-bullet-nudge: -0.5rem;
    margin-left: var(--mobile-bullet-nudge);
    padding-left: 1rem;
    list-style-position: outside;
  }
  .editing-page .bullets li{
    margin-left: 0;
    padding-left: 0;
    text-indent: 0;
  }

  .editing-page .trot-wrap{
    max-width: none;
    width: 100%;
    padding-left: clamp(10px, 4vw, 18px);
    padding-right: clamp(10px, 4vw, 18px);
    margin-left: 0;
    margin-right: 0;
  }
  .editing-page .trot{
    margin-left: 0;
    margin-right: 0;
  }
  .editing-page .trot-quote{
    max-width: none;
    width: 100%;
    padding-left: clamp(10px, 4vw, 18px);
    padding-right: clamp(10px, 4vw, 18px);
  }
  .editing-page .trot .trot-arrow.left  { left:  clamp(4px, 1.5vw, 12px); }
  .editing-page .trot .trot-arrow.right { right: clamp(4px, 1.5vw, 12px); }
}

/* === Editing: mobile rotator full-bleed polish === */
@media (max-width: 900px){
  :root{ --page-pad: 16px; }

  .editing-page .trot-wrap{
    max-width: none !important;
    width: auto !important;
    margin-left:  calc(-1 * var(--page-pad));
    margin-right: calc(-1 * var(--page-pad));
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }
  .editing-page .trot{
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .editing-page .trot-quote{
    max-width: none !important;
    width: 100% !important;
    padding-left: clamp(10px, 4vw, 18px);
    padding-right: clamp(10px, 4vw, 18px);
  }
  .editing-page .trot .trot-arrow.left  { left:  clamp(6px, 1.5vw, 12px); }
  .editing-page .trot .trot-arrow.right { right: clamp(6px, 1.5vw, 12px); }
}

/* === School Visits: grid area order (note under photo) === */
.sv-grid{
  grid-template-areas:
    "a4  polaroid"
    ".    note"
    "ruled ruled";
}

/* === School Visits: small note placement + sizing === */
.sv-note{
  grid-area: note;
  justify-self: end;
  max-width: 360px;
  margin-top: 14px;
}

/* === School Visits: lined-note rules only (no red margin) === */
.sv-note--lined{
  background:
    linear-gradient(#fff,#fff) padding-box,
    repeating-linear-gradient(to bottom, rgba(60,110,220,.18) 0 1px, transparent 1px 28px);
}
.sv-note--lined::before{ content: none !important; }

/* === School Visits: handwriting font stack on note === */
.sv-note,
.sv-note *{
  font-family:
    "Comic Sans MS", "Bradley Hand", "Segoe Print", "Noteworthy",
    "Trebuchet MS", Arial, sans-serif, cursive;
}

/* === School Visits: desktop note spacing + nudges === */
@media (min-width: 901px){
  :root{ --s1-reserve: 120px; }
  .sv-sheet.ruled{ margin-top: var(--s1-reserve) !important; }

  .sv-note{
    grid-area: note;
    justify-self: end;
    --note-x: 18px;
    --note-y: 50px;
    transform: translate(var(--note-x), calc(var(--sv-drop) + var(--note-y))) rotate(var(--sv-rot));
    margin-top: 0;
  }
}

/* === School Visits: lined-note variant (clean rules + pro font) === */
.sv-note--lined{
  background-color: #fff;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(60,110,220,.22) 0,
    rgba(60,110,220,.22) 1px,
    transparent 1px,
    transparent 28px
  );
  background-origin: padding-box;
  background-clip: padding-box;
  font-family:
    "Bradley Hand", "Segoe Print", "Noteworthy",
    "Trebuchet MS", system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;
}
.sv-note--lined strong{
  font-family:
    "Bradley Hand", "Segoe Print", "Noteworthy",
    "Trebuchet MS", system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;
}

/* === Contact: quick layout polish === */
.contact-page .contact-hero { text-align: center; }
.contact-email-row { display: flex; gap: .5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.contact-copy-hint { min-width: 90px; font-size: .9rem; color: var(--muted); }
.contact-grid .card p { margin: 0 0 .5rem; }
@media (max-width: 900px){
  .contact-grid { grid-template-columns: 1fr; }
}

/* === Contact: cozy sheet tokens === */
.contact-page.contact-cozy {
  --cp-sheet-bg: #fff;
  --cp-ink: var(--text, #3a2a1f);
  --cp-accent: var(--accent, #f4ab74);
  --cp-sep: color-mix(in srgb, var(--cp-ink), transparent 82%);
  --cp-shadow: 0 10px 30px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}

/* === Contact: board background === */
.contact-page .cp-board{
  position: relative;
  padding: clamp(18px, 3vw, 32px);
  background: var(--paperTex) no-repeat;
}

/* === Contact: main sheet (enter animation) === */
.contact-page .cp-sheet{
  position: relative;
  margin: 0 auto;
  max-width: 920px;
  background: var(--cp-sheet-bg);
  border-radius: 20px;
  box-shadow: var(--cp-shadow);
  padding: clamp(18px, 2.8vw, 32px);
  transform: translateY(8px);
  opacity: 0;
}
.contact-page.is-mounted .cp-sheet{
  transform: translateY(0);
  opacity: 1;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1), opacity 520ms ease;
}
@media (prefers-reduced-motion: reduce){
  .contact-page .cp-sheet{ transform:none; opacity:1; transition:none; }
}

/* === Contact: header + subcopy === */
.contact-page .cp-head{ text-align: center; margin-bottom: 10px; }
.contact-page .cp-title{ margin: 0 0 .25rem 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.contact-page .cp-sub{
  margin: 0 auto; max-width: 60ch;
  color: color-mix(in srgb, var(--cp-ink), white 35%);
}

/* === Contact: actions + ghost CTAs === */
.contact-page .cp-actions{
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem;
}
.contact-page .button-ghost{
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--cp-ink), transparent 60%);
}
.button-ghost.cp-copy{
  --ghost: var(--accent, #f4ab74);
  color: var(--ghost);
  border: 1px solid color-mix(in srgb, var(--ghost) 50%, transparent);
  background: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.button-ghost.cp-copy:hover,
.button-ghost.cp-copy:focus-visible{
  background: color-mix(in srgb, var(--ghost) 12%, transparent);
  border-color: var(--ghost);
  color: var(--ghost);
  opacity: 1;
}
@supports not (color: color-mix(in srgb, white, black)) {
  .button-ghost.cp-copy:hover,
  .button-ghost.cp-copy:focus-visible{
    background: rgba(0,0,0,.06);
    border-color: currentColor;
  }
}
.contact-page .cp-hint{
  min-height: 1.2em;
  font-size: .9rem;
  color: color-mix(in srgb, var(--cp-ink), white 25%);
  align-self: center;
}

/* === Contact: list rows === */
.contact-page .cp-list{ list-style: none; padding: 0; margin: 1.2rem 0 0 0; }
.contact-page .cp-list > li{ padding: 1rem 0; border-top: 1px dashed var(--cp-sep); }
.contact-page .cp-list > li:first-child{ border-top: 0; }
.contact-page .cp-list h3{ margin: 0 0 .25rem 0; font-size: clamp(1.05rem, 2.1vw, 1.2rem); }
.contact-page .cp-list p{
  margin: 0 0 .35rem 0;
  color: color-mix(in srgb, var(--cp-ink), white 30%);
}
.contact-page .cp-link{
  display: inline-flex; align-items: center; gap: .35rem;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.contact-page .cp-link:hover,
.contact-page .cp-link:focus{
  border-bottom-color: color-mix(in srgb, var(--cp-accent), transparent 30%);
  transform: translateY(-1px);
  transition: transform 180ms ease, border-color 180ms ease;
}

/* === Contact: footer note === */
.contact-page .cp-foot{
  margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--cp-sep);
}
.contact-page .cp-note{
  margin: 0; font-size: .95rem;
  color: color-mix(in srgb, var(--cp-ink), white 35%);
}

/* === Contact: corner sticky note === */
.contact-page .cp-sticky{
  position: absolute;
  right: clamp(4px, 3vw, 26px);
  top: clamp(-6px, -1.5vw, -2px);
  width: min(240px, 36vw);
  rotate: 2.2deg;
  padding: 12px 14px;
  background: linear-gradient(#fff799, #ffe57a);
  color: #3a2a1f;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.7) inset;
  z-index: 1;
}
.contact-page .cp-sticky .sticky-text{ margin: 0; font-size: .95rem; }
.contact-page .cp-sticky .pin{
  position: absolute; inset: -10px auto auto calc(50% - 10px);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8f8f, #e14c4c 65%, #b93030 66%);
  box-shadow: 0 8px 14px rgba(0,0,0,.15);
}

/* === App toast === */
#appToast{
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%) translateY(16px);
  padding: .55rem .8rem;
  background: rgba(20,20,20,.92);
  color: #fff; border-radius: 10px;
  font-size: .95rem; line-height: 1.2;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 9999;
}
#appToast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){
  #appToast{ transition: none; }
}

/* === Contact: sticky hover motion preference === */
@media (prefers-reduced-motion: no-preference){
  .contact-page .cp-sticky{
    transition: transform 400ms cubic-bezier(.2,.7,.2,1), box-shadow 400ms;
  }
  .contact-page .cp-sticky:hover{
    box-shadow: 0 12px 28px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.7) inset;
  }
}

/* === Contact: mobile sticky placement === */
@media (max-width: 768px){
  .contact-page .cp-sticky{ position: static; margin-bottom: .6rem; }
  .contact-cozy .cp-board{
    display: flex; flex-direction: column; gap: 1rem; align-items: stretch;
  }
  .contact-cozy .cp-sheet{ order: 1; }
  .contact-cozy .cp-sticky{
    order: 2;
    position: static !important;
    transform: none !important;
    align-self: center;
    display: inline-block;
    margin-inline: auto;
    max-width: min(92vw, 420px);
    text-align: center;
    rotate: 0deg;
  }
}