:root{
    --bg: #FCFBFF;
    --ink: #17162E;
    --ink-soft: #6E6B87;
    --indigo: #4F3FF5;
    --indigo-dark: #3F2FE0;
    --mint: #B9EEDA;
    --mint-ink: #1B7A56;
    --yellow: #FCE39C;
    --lavender: #DAD3F8;
    --lavender-ink: #5A4EBF;
    --peach: #FFD6C6;
    --peach-ink: #C4562F;
    --coral: #FFADA3;
    --coral-dark: #FF8C7F;
    --card: #FFFFFF;
    --border: #ECE9F7;
    --pill-bg: #E4F1FF;
    --pill-border: #C9E3FF;
    --radius-lg: 28px;
    --radius-md: 18px;
    --max: 1180px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family:'Inter', sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3{ font-family:'Baloo 2', sans-serif; margin:0; font-weight:700; color:var(--ink); }
  a{ color:inherit; }
  button{ font-family:'Inter', sans-serif; }

  .wrap{ max-width: var(--max); margin:0 auto; padding: 0 32px; }

  /* ---------- Header ---------- */
  header{ padding: 28px 32px 0; }
  .nav{
    max-width: var(--max); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .brand img{ height:36px; width:auto; display:block; }
  .nav-right{ display:flex; align-items:center; gap: 28px; }
  .nav-link{
    text-decoration:none; color: var(--ink-soft); font-weight:600; font-size:0.98rem;
  }
  .nav-link:hover{ color: var(--ink); }
  .keeps-btn{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--coral); color: var(--ink);
    text-decoration:none; font-weight:700; font-size:0.95rem;
    padding: 10px 20px; border-radius:999px;
    transition: background .15s ease, transform .1s ease;
  }
  .keeps-btn:hover{ background: var(--coral-dark); transform: translateY(-1px); }
  .keeps-btn svg{ width:16px; height:16px; color:#D42E1F; }

  /* ---------- Hero ---------- */
  .hero{ position:relative; padding: 64px 0 40px; text-align:center; }
  .hero .wrap{ display:flex; flex-direction:column; align-items:center; }
  .hero-copy{ position:relative; z-index:2; max-width: 680px; }

  .eyebrow{
    display:inline-block; background: var(--lavender); color: var(--lavender-ink);
    font-weight:700; font-size:0.78rem; letter-spacing:0.03em;
    padding: 7px 16px; border-radius:999px; margin-bottom: 22px;
  }

  .hero h1{
    font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    line-height:1.12;
  }
  .hero h1 .accent{ color: var(--indigo); }

  .hero p{
    max-width: 46ch; margin: 20px auto 0;
    color: var(--ink-soft); font-size:1.08rem; font-weight:500;
  }

  /* ---------- Pills ---------- */
  .pills-section{ padding: 30px 32px 10px; }
  .pills{
    display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width: 980px; margin: 0 auto;
  }
  .pill{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:700; font-size:0.95rem; color: var(--ink);
    padding: 11px 20px; border-radius:999px;
    background: var(--pill-bg); border: 1.5px solid var(--pill-border);
    cursor:pointer;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
  }
  .pill svg{ width:18px; height:18px; flex:none; }
  .pill:hover{ transform: translateY(-2px); border-color: var(--indigo); }
  .pill.active{ background: var(--indigo); border-color: var(--indigo); color:#fff; }
  .pill:focus-visible{ outline: 3px solid var(--indigo); outline-offset:2px; }
  .pill.more-pill{ display:none; }
  #pills.show-more .pill.more-pill{ display:inline-flex; }
  .more-toggle-wrap{ display:flex; justify-content:center; margin-top: 16px; }
  .more-toggle{
    font-weight:700; font-size:0.92rem; color: var(--indigo);
    background: transparent; border: 1.5px dashed var(--indigo);
    padding: 10px 22px; border-radius:999px; cursor:pointer;
    transition: background .15s ease, transform .12s ease;
  }
  .more-toggle:hover{ background: rgba(79,63,245,0.08); transform: translateY(-1px); }
  .more-toggle:focus-visible{ outline: 3px solid var(--indigo); outline-offset:2px; }

  /* ---------- Generator ---------- */
  .generator{ position:relative; padding: 60px 32px 70px; }
  .gen-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .blob{ position:absolute; border-radius:50%; filter: blur(2px); opacity:0.55; }
  .blob-peach{ width:340px; height:340px; background: var(--peach); left: 6%; top: 30%; }
  .blob-lav{ width:300px; height:300px; background: var(--lavender); right: 8%; top: 10%; }

  .result-card{
    position:relative; z-index:2;
    max-width: 720px; margin: 0 auto;
    background: var(--card); border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(23,22,46,0.10);
    padding: 56px 44px 40px;
  }
  .card-sparkle{ position:absolute; top:24px; right:28px; color: var(--indigo); }
  .card-sparkle svg{ width:26px; height:26px; }

  .result-label{
    font-size:0.85rem; font-weight:700; color: var(--ink-soft); text-align:center; margin-bottom:8px;
  }
  #result-text{
    font-family:'Baloo 2', sans-serif; font-weight:700;
    font-size: clamp(1.8rem, 4.2vw, 2.5rem);
    text-align:center;
    min-height: 1.3em;
    display:flex; align-items:center; justify-content:center;
    color: var(--ink);
  }
  #result-text.pop{ animation: pop .32s cubic-bezier(.34,1.56,.64,1); }
  @keyframes pop{
    0%{ transform: scale(0.85); opacity:0.4; }
    60%{ transform: scale(1.06); opacity:1; }
    100%{ transform: scale(1); }
  }

  .result-actions{
    display:flex; gap:12px; justify-content:center; margin-top: 32px; flex-wrap:wrap;
  }
  .btn{
    font-weight:700; font-size:1rem;
    padding: 15px 28px; border-radius:999px; border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:9px;
    transition: transform .1s ease, background .15s ease;
  }
  .btn:active{ transform: translateY(1px) scale(0.98); }
  .btn-primary{ background: var(--indigo); color:#fff; }
  .btn-primary:hover{ background: var(--indigo-dark); }
  .btn-ghost{ background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
  .btn-ghost:hover{ background: rgba(23,22,46,0.05); }
  .btn-ghost.saved{ background: var(--indigo); color:#fff; border-color: var(--indigo); }
  .btn svg{ width:18px; height:18px; }

  .recent{
    position:relative; z-index:2;
    max-width: 720px; margin: 26px auto 0; display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  }
  .recent-chip{
    font-size:0.85rem; font-weight:700; color: var(--ink-soft);
    background: rgba(23,22,46,0.05); padding:7px 16px; border-radius:999px;
    border: none; font-family:'Inter', sans-serif; cursor: pointer;
    transition: background .15s ease, transform .1s ease, color .15s ease;
  }
  .recent-chip:hover{ background: rgba(23,22,46,0.1); transform: translateY(-1px); }
  .recent-chip.is-saved{ background: var(--indigo); color:#fff; }
  .recent-chip:focus-visible{ outline: 3px solid var(--indigo); outline-offset:2px; }

  /* ---------- How it works ---------- */
  .how{ padding: 30px 32px 70px; text-align:center; }
  .how h2{ font-size: clamp(1.9rem,3.4vw,2.6rem); }
  .how .sub{ color: var(--ink-soft); font-size:1.05rem; font-weight:500; margin: 12px 0 50px; }

  .steps{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    max-width: var(--max); margin:0 auto;
  }
  .step{ position:relative; }
  .step-icon-wrap{ position:relative; display:inline-block; margin-bottom: 20px; }
  .step-num{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1rem; color: var(--ink);
    position:absolute; top:-10px; left:-14px; z-index:2;
  }
  .step:nth-child(1) .step-num{ background: var(--lavender); }
  .step:nth-child(2) .step-num{ background: var(--mint); }
  .step:nth-child(3) .step-num{ background: var(--peach); }
  .step-icon{
    width: 88px; height: 88px; border-radius: 22px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(23,22,46,0.03);
  }
  .step-icon svg{ width:38px; height:38px; color: var(--ink); }
  .step-graphic{ width: 170px; max-width: 100%; height:132px; object-fit:contain; display:block; margin:0 auto 4px; }
  .step h3{ font-size:1.2rem; margin-bottom:10px; }
  .step p{ color: var(--ink-soft); font-size:0.96rem; margin:0; max-width:32ch; margin-inline:auto; }

  /* ---------- Keepers banner ---------- */
  .keepers{
    background: var(--mint);
    border-radius: 32px;
    max-width: calc(var(--max) - 64px);
    margin: 0 auto 70px;
    padding: 44px 44px;
  }
  .keepers .inner{
    display:flex; align-items:center; gap: 28px; flex-wrap:wrap;
  }
  .keepers-icon{
    flex:none; width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  }
  .keepers-graphic{ width:72px; height:auto; display:block; }
  .keepers-text{ flex: 1 1 320px; }
  .keepers .eyebrow{ background: rgba(255,255,255,0.6); color: var(--mint-ink); margin-bottom:10px; }
  .keepers h2{ font-size: clamp(1.4rem,2.4vw,1.8rem); margin-bottom:6px; }
  .keepers .sub-text{ color: rgba(23,22,46,0.65); font-weight:600; font-size:0.98rem; margin:0; }

  #keepers-list{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }
  .keeper-chip{
    background: var(--card); border:1.5px solid rgba(23,22,46,0.12); color:var(--ink);
    font-weight:700; padding:9px 18px; border-radius:999px;
    display:flex; align-items:center; gap:8px;
  }
  .keeper-chip button{
    background:none; border:none; cursor:pointer; color: var(--ink-soft);
    font-weight:900; font-size:1rem; line-height:1; padding:0;
  }
  .keepers-actions{ display:flex; gap:12px; margin-top: 22px; flex-wrap:wrap; }
  .keepers-actions .btn-ghost{ border-color: rgba(23,22,46,0.25); background: rgba(255,255,255,0.5); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .hero .wrap{ grid-template-columns: 1fr; }
    .hero-bubbles{ display:none; }
    .steps{ grid-template-columns: 1fr; gap: 46px; }
  }
  @media (max-width: 640px){
    header{ padding: 22px 20px 0; }
    .hero{ padding: 44px 20px 20px; }
    .pills-section{ padding: 24px 20px 10px; }
    .generator{ padding: 40px 20px 50px; }
    .result-card{ padding: 40px 22px 30px; }
    .keepers{ border-radius: 24px; padding: 32px 24px; max-width: calc(100% - 32px); }
    .explainer{ padding: 10px 20px 40px; }
    .explainer-inner{ padding: 30px 24px; }
    .nav-right{ gap:14px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
  }

/* ---------- Generators directory (added for multi-page site) ---------- */
.generators-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; max-width: var(--max); margin: 0 auto;
}
.generator-link{
  display:flex; align-items:center; gap:8px;
  background: var(--pill-bg); border: 1.5px solid var(--pill-border);
  color: var(--ink); text-decoration:none; font-weight:600; font-size:0.85rem; white-space:nowrap;
  padding: 11px 16px; border-radius:12px;
  transition: background .15s ease, transform .12s ease;
}
.generator-link:hover{ background: var(--indigo); color:#fff; transform: translateY(-1px); }

/* ---------- Generator explainer (who / how copy) ---------- */
.explainer{ padding: 10px 32px 50px; }
.explainer-inner{
  max-width: 760px; margin: 0 auto;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 44px;
  box-shadow: 0 18px 45px rgba(23,22,46,0.06);
}
.explainer h2{ font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 14px; }
.explainer h3{ font-size: 1.1rem; margin: 26px 0 10px; }
.explainer p{ color: var(--ink-soft); font-size: 1rem; line-height: 1.7; margin: 0; }

/* ---------- Customizer (fill-in-the-blanks generator) ---------- */
.customizer{
  max-width: 720px; margin: 40px auto 0;
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(23,22,46,0.10);
  padding: 40px 36px;
}
.customizer h2{ font-size: 1.5rem; margin-bottom: 6px; }
.customizer .custom-sub{ color: var(--ink-soft); font-size:0.98rem; margin: 0 0 26px; }
.custom-fields{ display:grid; gap:18px; margin-bottom: 24px; }
.custom-field label{
  display:block; font-weight:700; font-size:0.9rem; color: var(--ink); margin-bottom:6px;
}
.custom-field input{
  width:100%; padding: 12px 16px; border-radius:12px;
  border: 1.5px solid var(--pill-border); background: var(--pill-bg);
  font-family:'Inter', sans-serif; font-size: 0.98rem; color: var(--ink);
}
.custom-field input::placeholder{ color: var(--ink-soft); opacity:0.7; }
.custom-field input:focus{ outline: none; border-color: var(--indigo); background: var(--card); color: var(--ink); }
.custom-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom: 8px; }
.custom-random-link{
  background:none; border:none; color: var(--indigo); font-weight:700; font-size:0.92rem;
  cursor:pointer; text-decoration: underline; padding: 8px 4px;
}
.custom-results{ display:grid; gap:10px; margin-top: 22px; }
.custom-result{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--pill-bg); border: 1.5px solid var(--pill-border);
  border-radius: 12px; padding: 12px 16px;
}
.custom-result span{ font-family:'Baloo 2', sans-serif; font-weight:600; font-size:1.05rem; color: var(--ink); }
.custom-result-actions{ display:flex; gap:6px; flex:none; }
.icon-btn{
  background: transparent; border: 1.5px solid var(--ink); border-radius:999px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--ink); transition: background .15s ease, transform .1s ease;
}
.icon-btn svg{ width:16px; height:16px; }
.icon-btn:hover{ background: rgba(23,22,46,0.06); }
.icon-btn.is-saved{ background: var(--indigo); border-color: var(--indigo); color:#fff; }

/* Customizer: two-column field grid on wider screens */
.custom-field{ min-width:0; }
@media (min-width: 640px){
  .custom-fields{ grid-template-columns: 1fr 1fr; gap: 18px 20px; }
}

/* ---------- Calistoga: generated names + hero headline ---------- */
.hero h1{ font-family:'Calistoga', Georgia, serif; font-weight:400; letter-spacing:0.2px; }
#result-text{ font-family:'Calistoga', Georgia, serif; font-weight:400; }
.custom-result span{ font-family:'Calistoga', Georgia, serif; font-weight:400; }

/* ---------- Theme toggle ---------- */
.theme-toggle{
  background:transparent; border:1.5px solid var(--border); color:var(--ink);
  width:40px; height:40px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; flex:none;
  transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ background: rgba(23,22,46,0.06); border-color: var(--ink-soft); }
.theme-toggle:focus-visible{ outline:3px solid var(--indigo); outline-offset:2px; }
.theme-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .ic-sun{ display:none; }
html[data-theme="dark"] .theme-toggle:hover{ background: rgba(255,255,255,0.09); }
html[data-theme="dark"] .theme-toggle .ic-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .ic-moon{ display:none; }

/* ---------- Home "customize" callout ---------- */
.custom-note{ padding: 0 32px 8px; }
.custom-note-inner{
  max-width: var(--max); margin:0 auto;
  background: var(--pill-bg); border:1.5px solid var(--pill-border); border-radius: var(--radius-md);
  padding: 22px 26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.custom-note .cn-text{ flex:1 1 320px; }
.custom-note .eyebrow{ margin-bottom:8px; }
.custom-note h2{ font-size:1.15rem; margin:0 0 6px; }
.custom-note p{ margin:0; color: var(--ink-soft); font-size:0.97rem; }
.custom-note .btn{ padding: 12px 22px; font-size:0.95rem; flex:none; }
@media (max-width: 640px){ .custom-note{ padding: 0 20px 8px; } .custom-note-inner{ padding: 18px 18px; } }

/* ---------- Dark theme ---------- */
html[data-theme="dark"]{
  --bg:#121120; --ink:#F2F0FF; --ink-soft:#A9A4C9;
  --indigo:#8B7BFF; --indigo-dark:#7A69F5;
  --card:#1B1930; --border:#302C4C;
  --pill-bg:#221F3C; --pill-border:#3B3565;
  --mint:#1C3A31; --mint-ink:#8FE3C0;
  --yellow:#3A3320; --lavender:#2A2550; --lavender-ink:#C9C0FF;
  --peach:#3A2620; --peach-ink:#FFC0A8;
  --coral:#B0503F; --coral-dark:#C55B49;
}
html[data-theme="dark"] .step-icon{ background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .recent-chip{ background: rgba(255,255,255,0.07); }
html[data-theme="dark"] .recent-chip:hover{ background: rgba(255,255,255,0.12); }
html[data-theme="dark"] .recent-chip.is-saved{ background: var(--indigo); color:#fff; }
html[data-theme="dark"] .btn-ghost:hover{ background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .icon-btn:hover{ background: rgba(255,255,255,0.1); }
html[data-theme="dark"] .keepers .eyebrow{ background: rgba(255,255,255,0.14); }
html[data-theme="dark"] .keepers .sub-text{ color: rgba(242,240,255,0.72); }
html[data-theme="dark"] .keepers-actions .btn-ghost{ border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .keeper-chip{ border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] .result-card{ box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
html[data-theme="dark"] .customizer{ box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
html[data-theme="dark"] .explainer-inner{ box-shadow: 0 18px 45px rgba(0,0,0,0.35); }
html[data-theme="dark"] .blob{ opacity:0.3; }

/* ---------- Logo swap for dark mode ---------- */
.brand .logo-dark{ display:none; }
html[data-theme="dark"] .brand .logo-light{ display:none; }
html[data-theme="dark"] .brand .logo-dark{ display:block; }

/* ---------- Customizer: H1-sized heading + tighter spacing ---------- */
.customizer-section{ padding-top: 0; }
.customizer-section .customizer{ margin-top: 0; }
.customizer h2#custom-title{ font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 0 0 12px; }

/* ---------- Home callout: H1 heading on desktop, CTA under the heading ---------- */
.custom-note-inner{ flex-direction: column; align-items: flex-start; gap: 0; width: fit-content; max-width: 100%; }
.custom-note .cn-row{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; }
.custom-note .cn-title{ margin: 0; }
.custom-note .cn-title{ font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 0 0 14px; }
.custom-note .cn-cta{ margin: 0 0 8px; padding: 12px 22px; font-size: 0.95rem; align-self: center; }
.custom-note p{ max-width: 68ch; }

/* ---------- Header: nav toggle / mobile menu ---------- */
.nav-right{ margin-left: auto; }
.nav-actions{ display: flex; align-items: center; gap: 12px; flex: none; }
.nav-toggle{
  display: none; background: transparent; border: 1.5px solid var(--border); color: var(--ink);
  width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: none;
}
.nav-toggle:hover{ background: rgba(23,22,46,0.06); border-color: var(--ink-soft); }
.nav-toggle:focus-visible{ outline: 3px solid var(--indigo); outline-offset: 2px; }
.nav-toggle svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .ic-close{ display: none; }
body.nav-open .nav-toggle .ic-close{ display: block; }
body.nav-open .nav-toggle .ic-menu{ display: none; }
html[data-theme="dark"] .nav-toggle:hover{ background: rgba(255,255,255,0.09); }

@media (max-width: 760px){
  .nav{ flex-wrap: wrap; row-gap: 6px; }
  .nav-right{ display: none; order: 3; flex-basis: 100%; margin-left: 0; }
  body.nav-open .nav-right{
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 16px; padding: 18px 0 6px;
  }
  .nav-right .nav-link{ font-size: 1.05rem; }
  .keeps-btn{ padding: 9px 18px; }
  .nav-toggle{ display: inline-flex; }
}

/* ---------- About page: flush-left body copy, full measure (keeps paragraphs <=5 lines) ---------- */
.hero-copy.about-copy{ max-width: none; }
.hero-copy.about-copy p{ max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- Homepage supporting content ---------- */
.seo-content{ padding: 10px 32px 60px; }
.seo-content .wrap{ max-width: 820px; }
.seo-content h2{ font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 40px 0 14px; }
.seo-content h2:first-child{ margin-top: 0; }
.seo-content h3{ font-size: 1.15rem; margin: 26px 0 8px; }
.seo-content p{ color: var(--ink-soft); font-size: 1rem; line-height: 1.7; margin: 0 0 16px; }
@media (max-width: 640px){ .seo-content{ padding: 10px 20px 40px; } }

/* ---------- Home hero: copy left, folder graphic right ---------- */
.hero-split{
  display: flex; align-items: center; justify-content: center; gap: 44px;
  width: 100%; max-width: 880px; margin: 0 auto; text-align: left;
}
.hero-split .hero-copy{ flex: 1 1 420px; max-width: 560px; }
.hero-split .hero-copy h1{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
.hero-split .hero-copy p{ max-width: none; margin: 20px 0 0; }
.hero-split .hero-art{ flex: 0 0 auto; }
.hero-split .hero-art img{ width: 100%; max-width: 260px; height: auto; display: block; }
@media (max-width: 860px){
  .hero-split{ flex-direction: column; gap: 26px; }
  .hero-split .hero-copy{ max-width: none; }
  .hero-split .hero-art{ display: none; }
}

/* ---------- Section titles use the same display font as the h1 ---------- */
h1, h2{ font-family:'Calistoga', Georgia, serif; font-weight: 400; }