/* ── STATIC BAND ── */
  .static-band {
    background: #4A1614;
    padding: 0.85rem 24px;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    color: #EFE8DB;
    letter-spacing: 0.03em;
  }
  .static-band .sep {
    color: #8A6558;
    margin: 0 0.75em;
  }
  @media (max-width: 768px) {
    .static-band {
      font-size: 13px;
      line-height: 1.8;
    }
  }

  /* ── SECTION BASICS ── */
  .section-label {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--burgundy);
  }

  .section-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(36px, 3.8vw, 54px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 16px;
  }

  .section-title em { font-style: italic; color: var(--burgundy); }

  .section-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.9;
    font-weight: 300;
    max-width: 460px;
  }

  /* ── HOW IT WORKS ── */
  .how-section {
    padding: 110px 80px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .how-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 72px;
  }

  .steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--tan);
  }

  .step {
    background: var(--paper);
    padding: 44px 36px 52px;
    transition: background 0.35s;
    position: relative;
  }

  .step:hover { background: var(--cream); }
  .step:hover .step-number { color: var(--tan); }

  .step-number {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 64px;
    font-weight: 300;
    color: var(--cream);
    line-height: 1;
    margin-bottom: 28px;
  }

  .step-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 14px;
  }

  .step-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.85;
    font-weight: 300;
  }

  .step-accent {
    width: 24px;
    height: 2px;
    background: var(--burgundy);
    margin-bottom: 24px;
  }

  /* ── THREE-STEP VARIANT ── */
  .steps-grid.steps-three {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── EDITIONS ── */
  .editions-section {
    background: var(--cream);
    padding: 76px 80px 68px;
  }

  .editions-inner { max-width: 1400px; margin: 0 auto; }

  .editions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
  }

  .view-all {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
    text-decoration: none;
    border-bottom: 1px solid var(--tan);
    padding-bottom: 3px;
    transition: all 0.3s;
  }

  .view-all:hover { color: var(--burgundy); border-color: var(--burgundy); }

  /* Product tile, then a compact row of name, price and button beneath it -
     the tile is a frame the book sits in, not a card with text stuffed under.
     The old grid drew a tan divider between two edge-to-edge panels; these are
     separate objects on the ground instead. */
  .editions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1180px;
  }

  .edition-card { cursor: pointer; }

  .edition-tile {
    position: relative;
    aspect-ratio: 7 / 6;
    /* On a short window the ratio alone made the section taller than the
       screen, so the line under the button fell below the fold on arrival. */
    max-height: 42vh;
    background: var(--paper);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }
  .edition-card:hover .edition-tile { box-shadow: 0 10px 28px rgba(34,24,19,.12); }

  .edition-tile img {
    width: auto;
    max-width: 62%;
    max-height: 76%;
    height: auto;
    display: block;
  }

  .edition-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--tan);
    color: var(--paper);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
  }

  .edition-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
  }
  .edition-meta { min-width: 0; }

  .mini-book {
    width: 120px;
    height: 165px;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-shadow: 8px 14px 36px rgba(34,24,19,0.2);
    position: relative;
    transition: transform 0.4s;
    z-index: 1;
  }

  .edition-card:hover .mini-book { transform: translateY(-5px) rotate(-1.5deg); }

  .mini-book-inner {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(188,154,113,0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .mini-label {
    font-size: 7px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tan);
  }

  .mini-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--cream);
    text-align: center;
    line-height: 1.2;
  }

  .mini-line {
    width: 18px;
    height: 1px;
    background: var(--tan);
    opacity: 0.5;
  }



  .edition-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 23px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
  }



  .edition-price {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 19px;
    color: var(--brown);
    margin-top: 3px;
  }

  .edition-price sup {
    font-size: 0.62em;
    top: -0.5em;
    margin-right: 1px;
  }

  .btn-select {
    flex: 0 0 auto;
    background: var(--burgundy);
    color: var(--paper);
    border: none;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 26px;
    cursor: pointer;
    transition: opacity 0.25s ease;
  }

  .btn-select:hover { opacity: 0.86; }

  /* ── WIDE CARD (gift) ── */
  .wide-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* ── TESTIMONIALS ── */
  .testimonials-marquee {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }

  .testimonials-track {
    display: flex;
    gap: 32px;
    animation: testimonialScroll 40s linear infinite;
    width: max-content;
  }

  .testimonials-track:hover {
    animation-play-state: paused;
  }

  @keyframes testimonialScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .testimonial-pair {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-shrink: 0;
    width: 520px;
  }

  .testimonial-photo { flex-shrink: 0; }

  .testimonial-photo img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 0.5px solid #BC9A71;
    border-radius: 16px;
    display: block;
  }

  .testimonial-quote {
    background: #EFE8DB;
    padding: 24px 24px;
    border-radius: 16px;
    flex: 1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ── REVIEWS ── */
  .reviews-section {
    padding: 110px 80px;
    background: var(--cream);
  }

  .reviews-inner { max-width: 1400px; margin: 0 auto; }

  .reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 60px;
  }

  .big-quote {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 42px);
    font-style: italic;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 28px;
  }

  .quote-attr {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--brown);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .quote-attr::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--burgundy);
  }

  .stars { color: var(--burgundy); letter-spacing: 2px; font-size: 13px; margin-bottom: 16px; }

  .review-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .review-card {
    background: var(--paper);
    padding: 28px 32px;
    border-left: 3px solid var(--tan);
    transition: border-color 0.3s;
  }

  .review-card:hover { border-color: var(--burgundy); }

  .review-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .reviewer {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--brown);
  }

  /* ── FORM ── */
  .form-section {
    background: var(--ink);
    padding: 110px 80px;
  }

  .form-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
  }

  .form-left { padding-top: 8px; }

  .form-label {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .form-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--tan);
  }

  .form-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--cream);
    margin-bottom: 24px;
  }

  .form-title em { font-style: italic; color: var(--tan); }

  .form-note {
    font-size: 14px;
    color: rgba(239,232,219,0.5);
    line-height: 1.9;
    margin-bottom: 44px;
    font-weight: 300;
  }

  .form-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .form-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 13px;
    color: rgba(239,232,219,0.55);
    font-weight: 300;
    line-height: 1.6;
  }

  .form-features li::before {
    content: '◆';
    color: var(--tan);
    font-size: 7px;
    flex-shrink: 0;
    margin-top: 5px;
  }

  .form-right {
    background: var(--cream);
    padding: 48px 44px;
  }

  .form-heading {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 32px;
  }

  .form-group { margin-bottom: 24px; }

  .form-group label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tan);
    padding: 8px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
    appearance: none;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus { border-color: var(--burgundy); }

  .form-group textarea { resize: none; height: 72px; line-height: 1.6; }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

  .form-submit {
    width: 100%;
    background: var(--burgundy);
    color: var(--paper);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 18px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.3s;
  }

  .form-submit:hover { background: var(--burgundy-dk); }

  .form-note-small {
    font-size: 12px;
    color: var(--brown);
    text-align: center;
    margin-top: 16px;
    letter-spacing: 0.04em;
  }

  /* ── IG STRIP ── */
  .ig-section {
    padding: 80px;
    border-top: 1px solid var(--border);
  }

  .ig-inner { max-width: 1400px; margin: 0 auto; }

  .ig-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
  }

  .ig-handle {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.3s;
  }

  .ig-handle:hover { color: var(--burgundy); }

  .ig-follow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
    text-decoration: none;
    border-bottom: 1px solid var(--tan);
    padding-bottom: 2px;
    transition: all 0.3s;
  }

  .ig-follow:hover { color: var(--burgundy); border-color: var(--burgundy); }

  .ig-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
  }

  .ig-cell {
    aspect-ratio: 1;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .ig-cell:nth-child(2) { background: var(--cream); }
  .ig-cell:nth-child(3) { background: var(--tan); opacity: 0.6; }
  .ig-cell:nth-child(4) { background: var(--cream); }
  .ig-cell:nth-child(5) { background: var(--cream); }

  .ig-overlay {
    position: absolute;
    inset: 0;
    background: rgba(34,24,19,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .ig-cell:hover .ig-overlay { opacity: 1; }

  .ig-overlay span {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
  }

  .ig-icon { display:flex; align-items:center; justify-content:center; }

  /* ── FOOTER ── */
  footer {
    background: var(--brown);
    padding: 80px 80px 40px;
  }

  .footer-inner { max-width: 1400px; margin: 0 auto; }

  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(239,232,219,0.08);
    margin-bottom: 36px;
  }

  .footer-logo {
    margin-bottom: 18px;
    display: block;
  }

  .footer-logo img {
    height: 52px;
    width: auto;
    display: block;
    filter: brightness(0) invert(0.92) sepia(0.08) saturate(0.3);
  }

  .footer-tagline {
    font-size: 13px;
    color: var(--cream);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 28px;
    max-width: 240px;
  }

  .footer-social { display: flex; gap: 20px; }

  .footer-social a {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    transition: color 0.3s;
  }

  .footer-social a:hover { color: var(--tan); }

  .footer-col-title {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 22px;
  }

  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }

  .footer-links a {
    font-size: 14px;
    color: rgba(239,232,219,0.38);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s;
  }

  .footer-links a:hover { color: var(--cream); }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-copy {
    font-size: 11px;
    color: rgba(239,232,219,0.2);
    letter-spacing: 0.05em;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-left > * {
    opacity: 1;
  }

  /* ── BUYER ROTATING PHRASE ── */
  .buyer-line { line-height: 1.4; margin-bottom: 0; position: relative; z-index: 1; }
  .buyer-rotate {
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    min-width: 14em;
  }
  .buyer-phrase {
    transition: opacity 350ms ease;
  }
  .buyer-underline {
    transition: opacity 350ms ease;
  }

  /* ── HERO FORM PANEL ── */
  .hero-form-panel {
    margin-top: 0;
    position: relative;
    z-index: 1;
  }

  .hero-seal:focus-visible {
    outline: 2px solid #C4703F;
    outline-offset: 4px;
  }

  .hero-seal--primary:hover { opacity: 0.9; }
  .hero-seal--gift:hover { background: #F0E6D6 !important; }
  .hero-seal--gift:active { background: #E3D5C0 !important; }

  /* Respect reduced-motion: no animation */
  @media (prefers-reduced-motion: reduce) {
    .buyer-phrase, .buyer-underline { transition: none !important; }
  }


/* ── QUESTIONNAIRE STYLES ── */

  html, body {
    height: 100%;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 300;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }

  /* ── NAV ── */
  :root { --nav-h: 64px; --bar-h: 64px; }

  /* Anchor jumps landed under the fixed nav, pushing the bottom of the section
     off screen - which is where the size and shipping line sits. */
  section[id], div[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,253,249,0.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  .nav-logo {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .nav-logo img {
    height: 38px;
    width: auto;
    display: block;
  }

  .nav-back {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
  }

  .nav-back:hover { color: var(--burgundy); }

  /* ── MAIN LAYOUT ── */
  .page {
    min-height: 100vh;
    padding-top: calc(var(--nav-h) + var(--bar-h));
    display: grid;
    grid-template-columns: 38% 62%;
  }

  /* LEFT PANEL — fixed context */
  .left-panel {
    background: var(--cream);
    padding: 64px 56px;
    position: sticky;
    top: calc(var(--nav-h) + var(--bar-h));
    height: calc(100vh - var(--nav-h) - var(--bar-h));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 26px;
    overflow: hidden;
  }

  .left-panel::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: var(--tan);
    opacity: 0.25;
    bottom: -80px; right: -80px;
    pointer-events: none;
  }

  .panel-eyebrow {
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .panel-eyebrow::before {
    content: '';
    width: 20px; height: 1px;
    background: var(--burgundy);
  }

  .panel-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 24px;
  }

  .panel-title em { font-style: italic; color: var(--burgundy); }

  .panel-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.85;
    margin-bottom: 40px;
  }

  /* Progress */
  .progress-wrap {
    margin-bottom: 40px;
  }

  .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
  }

  .progress-bar {
    height: 2px;
    background: var(--tan);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: var(--burgundy);
    border-radius: 2px;
    transition: width 0.5s ease;
    width: 0%;
  }

  /* Mini book preview */
  .book-preview {
    width: 120px;
    height: 190px;
    background: var(--ink);
    position: relative;
    box-shadow: 8px 12px 32px rgba(34,24,19,0.2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px 8px;
    overflow: hidden;
  }

  .book-preview::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(98,29,27,0.2);
  }



  /* Fore-edge. One leaf per slice of progress, so the book visibly thickens as
     the questionnaire is answered. */
  .book-shelf { position: relative; flex-shrink: 0; }

  .fore-edge {
    position: absolute;
    left: 100%;
    top: 4%;
    bottom: 4%;
    display: flex;
    gap: 0;
    pointer-events: none;
    box-shadow: 2px 3px 7px rgba(31,18,11,.22);
  }

  .fore-leaf {
    /* The panel behind is cream, so pale leaves would vanish into it. Light
       leaf, dark separation, and a shadow under the whole stack. */
    flex: 0 0 var(--leaf, 3px);
    width: var(--leaf, 3px);
    /* Warmer than paper-white, or the stack reads as a blank slab beside the
       book rather than as its pages. */
    background: linear-gradient(to bottom, #F3E9D6 0%, #E2D3B7 58%, #C0A780 100%);
    border-right: 0.5px solid rgba(74,48,30,.5);
    animation: leafIn 0.5s cubic-bezier(.2,.7,.3,1) both;
  }

  /* A brief flare on the newest leaf, so each answer registers as a moment
     rather than only as 3 more pixels of stack. */
  .fore-leaf.is-new {
    animation: leafIn 0.5s cubic-bezier(.2,.7,.3,1) both,
               leafFlare 1.1s ease-out 0.08s both;
  }

  @keyframes leafFlare {
    0%   { box-shadow: 0 0 12px 4px rgba(255,238,198,.95); filter: brightness(1.45); }
    45%  { box-shadow: 0 0 8px 2px rgba(255,238,198,.55); filter: brightness(1.2); }
    100% { box-shadow: 0 0 0 0 rgba(255,238,198,0); filter: none; }
  }

  @keyframes leafIn {
    from { opacity: 0; transform: translateX(-5px) scaleY(0.8); }
    to   { opacity: 1; transform: none; }
  }


  /* ── Live cover preview ──
     The sidebar book renders as a real cover rather than a label on a dark
     rectangle: the vibe picks the layout, the palette picks the colour, and
     Warm & Earthy recolours an actual watercolour through that palette. Every
     size below is in em off the cover's own font-size, so the same rules work
     at any width - change .book-preview.cv's font-size and the type follows. */
  .book-preview.cv {
    height: clamp(150px, 30vh, 320px);
    width: auto;
    aspect-ratio: 210 / 297;
    padding: 0;
    align-items: stretch;
    justify-content: space-between;
    background: var(--cream);
    /* Type scales with the cover, so one set of rules works at every size. */
    font-size: clamp(9.5px, 1.9vh, 20px);
  }
  .book-preview.cv::before { display: none; }

  /* Stacking, explicitly. The ground div comes after the canvas in the DOM, so
     without this it paints straight over the wash and the artwork never shows. */
  .cv .bgc { position: absolute; inset: 0; z-index: 0; }
  .cv .cv-wash { position: absolute; left: 0; top: 0; width: 100%; height: 64%; z-index: 1; }
  .cv .shapes { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
  .cv .shapes i { position: absolute; display: block; }
  .cv > *:not(.cv-wash):not(.bgc):not(.shapes) { position: relative; z-index: 2; }

  .cv .mk {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.62em; font-weight: 500; letter-spacing: 0.15em;
    text-transform: lowercase; padding: 7% 8% 0;
  }
  .cv .mid {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 2% 8%;
  }
  .cv .mid svg { width: 52%; height: auto; }
  .cv .ft { padding: 0 8% 9%; text-align: center; }
  .cv .t-serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300; font-style: normal; letter-spacing: 0.16em;
    text-transform: uppercase; font-size: 1.15em; line-height: 1.2; margin: 0;
  }
  .cv .t-huge {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600; font-style: normal; letter-spacing: -0.01em;
    text-transform: uppercase; font-size: 3.1em; line-height: 0.86; margin: 0;
    transform: scaleX(0.82); transform-origin: center;
  }
  .cv .t-sans {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800; font-style: normal; letter-spacing: -0.02em;
    font-size: 1.7em; line-height: 1.02; margin: 0; text-align: left;
  }
  .cv .byl {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.5em; font-weight: 500; letter-spacing: 0.2em;
    text-transform: uppercase; margin: 0.7em 0 0; opacity: 0.7;
  }
  .cv .rule { height: 1px; width: 38%; margin: 0.8em auto; opacity: 0.5; }

  /* "Mystery Title: Coming Soon" is a stand-in, so it sits lighter and smaller
     than a title someone actually picked - and never at the huge display size,
     which would make a placeholder the loudest thing on the cover. */
  .cv .is-tbc { opacity: 0.55; font-style: italic; letter-spacing: 0.1em; }
  .cv .t-huge.is-tbc { font-size: 1.5em; line-height: 1.15; transform: none; }
  .cv .t-sans.is-tbc { font-size: 1.05em; }
  .cv.quiet .t-serif.is-tbc { font-size: 0.66em; letter-spacing: 0.18em; }

  /* Colour cannot separate the four vibes - each palette is four shades of one
     hue - so the layouts carry it, each pushed to its own extreme. */
  .cv.flip .ft  { order: 1; padding-top: 14%; }
  .cv.flip .mid { order: 2; align-items: flex-end; padding-bottom: 9%; }
  .cv.flip .mk  { order: 0; }

  .cv.quiet .mid svg { width: 26%; opacity: 0.62; }
  .cv.quiet .t-serif { font-size: 0.74em; letter-spacing: 0.34em; }
  .cv.quiet .byl     { font-size: 0.42em; opacity: 0.5; }
  .cv.quiet .rule    { width: 16%; }
  .cv.quiet .mk      { opacity: 0.45; }

  .cv.painted .mid     { padding: 0; align-items: center; }
  .cv.painted .mid svg { width: 40%; opacity: 0.9; }
  .cv.painted .t-serif { font-size: 1.3em; letter-spacing: 0.2em; }

  .cv.bold .mid { display: none; }
  .cv.bold .ft  { padding: 0 6% 8%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

  .cv.play .mid { display: none; }
  .cv.play .ft  { padding: 0 8% 10%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }

  .cover-note {
    max-width: 190px;
    margin: 12px 0 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    line-height: 1.45;
    color: var(--brown);
    opacity: 0.8;
  }
  .cover-note em { font-style: italic; }

  /* Labels for a screen that asks two things at once. */
  .pair-label {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin: 26px 0 10px;
  }
  .pair-label:first-of-type { margin-top: 8px; }

  .edition-chosen {
    margin: 10px 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brown);
  }
  .edition-chosen a {
    color: var(--burgundy);
    text-decoration: none;
    border-bottom: 1px solid var(--tan);
    margin-left: 8px;
    padding-bottom: 1px;
  }
  .edition-chosen a:hover { border-color: var(--burgundy); }
  .cover-mobile-slot { display: none; }

  /* ── The cover screens put the book first ──
     On the three screens that customise the cover, the panel stops being a
     progress readout and becomes the book: the copy and the checklist step
     back, the cover comes to the top and roughly doubles. Everywhere else the
     panel is unchanged. */
  .left-panel.cover-focus { justify-content: flex-start; }
  .left-panel.cover-focus .panel-desc { display: none; }
  .left-panel.cover-focus .panel-title { margin-bottom: 0; }
  .left-panel.cover-focus .book-preview.cv {
    height: clamp(190px, 42vh, 430px);
    font-size: clamp(12px, 2.65vh, 27px);
  }

  /* Short windows: the panel sheds what it can rather than clipping the
     progress readout off the bottom. Measured at 640-1050px tall. */
  @media (max-height: 1000px) {
    .left-panel { padding: 40px 56px; gap: 20px; }
    .panel-desc { display: none; }
  }
  /* ── Edition cards ──
     Three presentations behind ?ed=1|2|3 for review. 1 keeps the spec list,
     2 is the Willow reduction (image, name, price, button), 3 adds one line.
     Delete the [data-ed] rules once one is chosen. */
  .edition-card { overflow: hidden; }
  .edition-fine {
    margin: 10px 0 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-style: italic;
    color: var(--brown);
  }
  /* 2 — the Willow reduction: image, name, price, button. */


  /* ── Roadmap ──
     Replaces the accumulating tick list, which grew one line per answer and so
     said how much had been done and nothing about how much was left. It lives
     across the top rather than in the panel: it is wayfinding for the whole
     page, and the panel was carrying too much already. */
  .roadmap-bar {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    z-index: 99;
    height: var(--bar-h);
    padding: 0 48px;
    display: flex;
    align-items: center;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
  }
  .roadmap {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  /* Each stage owns a segment of the bar and is named above it, so how far
     along you are is legible without reading a word. */
  .rm-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    line-height: 1;
    color: var(--brown);
    white-space: nowrap;
  }
  .rm-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rm-line {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--tan);
    opacity: 0.4;
    transition: background 0.3s ease, opacity 0.3s ease;
  }

  .rm-step.is-done .rm-line { background: var(--burgundy); opacity: 0.6; }
  .rm-step.is-now { color: var(--burgundy); }
  .rm-step.is-now .rm-label { font-weight: 500; }
  /* Done and current are both filled, so the current one is also thicker -
     opacity alone was too fine a distinction to carry it. */
  .rm-step.is-now .rm-line { background: var(--burgundy); opacity: 1; height: 5px; margin: -1px 0; }
  .rm-step.is-next { opacity: 0.42; }

  .rm-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-left: 8px;
  }

  @media (prefers-reduced-motion: reduce) {
    .rm-line { transition: none; }
  }

  /* Narrow: the segments still tell the story, so the labels give way first. */
  @media (max-width: 1180px) {
    .roadmap-bar { padding: 0 24px; }
    .rm-step { font-size: 12px; gap: 7px; }
    .rm-sub { display: none; }
  }
  .rm-short { display: none; }

  /* Narrow: the full names cannot share 375px, so every stage shows its short
     one. All five stay named - which stage is done and which is coming is the
     point of the bar. */
  @media (max-width: 880px) {
    .roadmap-bar { padding: 0 14px; }
    .roadmap { gap: 7px; }
    .rm-step { gap: 6px; font-size: 11px; }
    .rm-full { display: none; }
    .rm-short { display: block; }
    .rm-line { height: 3px; }
    .rm-step.is-now .rm-line { height: 4px; margin: 0; }
  }


  @media (max-height: 680px) {
    .left-panel { padding: 28px 44px; gap: 14px; }
    .panel-title { font-size: 30px; margin-bottom: 0; }
    .book-preview.cv { height: clamp(120px, 24vh, 320px); }
    .left-panel.cover-focus .book-preview.cv { height: clamp(150px, 33vh, 430px); }
  }

  /* ── RIGHT PANEL — questions ── */
  .right-panel {
    padding: 80px 80px 80px 72px;
    display: flex;
    flex-direction: column;
  }

  /* ── SCREEN STATES ── */
  .screen { display: none; scroll-margin-top: 20px; }
  .screen.active { display: flex; flex-direction: column; animation: fadeUp 0.5s ease forwards; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── INTRO SCREEN ── */
  .path-card {
    border: 1.5px solid var(--tan);
    padding: 32px 28px;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--paper);
    position: relative;
  }

  .path-card:hover {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .path-card.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .path-card.selected::after {
    content: '✓';
    position: absolute;
    top: 14px; right: 16px;
    color: var(--burgundy);
    font-size: 14px;
  }

  /* ── COVER GALLERY (legacy, kept for compat) ── */
  .cover-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    max-width: 560px;
    margin-bottom: 36px;
  }

  .cover-card {
    border: 1.5px solid var(--tan);
    background: var(--paper);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }

  .cover-card:hover {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .cover-card.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .cover-card.selected::after {
    content: '✓';
    position: absolute;
    top: 10px; right: 12px;
    color: var(--paper);
    background: var(--burgundy);
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    z-index: 2;
  }

  .cover-thumb-wrap {
    width: 100%;
    aspect-ratio: 285 / 400;
    overflow: hidden;
    background: var(--cream);
  }

  .cover-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cover-card-info {
    padding: 14px 12px 16px;
  }

  .cover-card-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .cover-card-tagline {
    font-size: 11px;
    color: var(--brown);
    line-height: 1.5;
    font-style: italic;
  }

  /* ── VIBE PICKER ── */
  .vibe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 36px;
  }

  .vibe-card {
    border: 1.5px solid var(--tan);
    background: var(--paper);
    cursor: pointer;
    transition: all 0.3s;
    padding: 24px 20px;
    position: relative;
  }

  .vibe-card:hover { border-color: var(--burgundy); }

  .vibe-card.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .vibe-card.selected::after {
    content: '';
    position: absolute;
    top: 10px; right: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--burgundy);
  }

  .vibe-swatch {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
  }

  .vibe-swatch span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  .vibe-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .vibe-desc {
    font-size: 11px;
    color: var(--brown);
    line-height: 1.5;
    font-style: italic;
  }

  /* ── PALETTE PICKER ── */
  .palette-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 36px;
  }

  .palette-option {
    border: 1.5px solid var(--tan);
    background: var(--paper);
    cursor: pointer;
    transition: all 0.3s;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
  }

  .palette-option:hover { border-color: var(--burgundy); }

  .palette-option.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .palette-option.selected::after {
    content: '';
    position: absolute;
    top: 50%; right: 16px;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--burgundy);
  }

  .palette-colors {
    display: flex;
    gap: 6px;
  }

  .palette-colors span {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.08);
  }

  .palette-name {
    font-size: 13px;
    color: var(--ink);
    font-weight: 400;
  }

  .path-icon {
    margin-bottom: 14px;
    display: block;
    line-height: 1;
  }

  .path-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 6px;
  }

  .path-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.6;
  }

  /* ── GIFT EMAIL SCREEN ── */
  /* ── QUESTION SCREEN ── */
  .question-meta {
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .question-meta::before {
    content: '';
    width: 20px; height: 1px;
    background: var(--burgundy);
  }

  .question-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 10px;
  }

  .question-text em { font-style: italic; color: var(--burgundy); }

  /* Required-field asterisk, and the legend explaining it */
  .question-text .req {
    color: #C4703F;
    font-weight: 400;
    font-size: 0.72em;
    vertical-align: 0.34em;
    line-height: 0;
    margin-left: 4px;
  }

  .required-note {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 36px;
  }

  .required-note .req {
    color: #C4703F;
    font-size: 17px;
    line-height: 0;
    vertical-align: -2px;
    margin-right: 3px;
  }

  /* Shown on Q1 at every width; the sidebar copy is display:none under 768px. */
  .required-note-inline { margin: -22px 0 32px; }

  .question-hint {
    font-size: 19px;
    color: var(--brown);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 480px;
  }

  /* Answer input styles */
  .answer-input {
    width: 100%;
    max-width: 520px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--tan);
    padding: 12px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
    margin-bottom: 48px;
  }

  .answer-input:focus { border-color: var(--burgundy); }
  .answer-input::placeholder { color: var(--tan); font-style: italic; }

  .answer-textarea {
    width: 100%;
    max-width: 520px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--tan);
    padding: 12px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 20px;
    overflow: hidden;
    resize: none;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
    resize: none;
    min-height: 140px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .answer-textarea:focus { border-color: var(--burgundy); }
  .answer-textarea::placeholder { color: var(--tan); font-style: italic; font-size: 17px; line-height: 1.7; }

  /* ── VOICE DICTATION ── */
  .textarea-wrap {
    position: relative;
    max-width: 520px;
    width: 100%;
  }

  .textarea-wrap .answer-textarea {
    padding-right: 0;
  }

  .mic-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    font-style: normal;
    color: var(--brown);
    transition: color 0.25s;
    letter-spacing: 0.03em;
  }

  .mic-bar:hover, .mic-bar:focus-visible {
    color: var(--burgundy);
  }

  .mic-bar.recording {
    color: var(--burgundy);
  }

  .mic-bar.recording .mic-bar-dot {
    animation: mic-pulse 1.5s ease-in-out infinite;
  }

  .mic-bar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tan);
    flex-shrink: 0;
    transition: background 0.25s;
  }

  .mic-bar:hover .mic-bar-dot,
  .mic-bar.recording .mic-bar-dot {
    background: var(--burgundy);
  }

  .mic-btn {
    display: none;
  }

  .mic-btn:hover {
    border-color: var(--burgundy);
    color: var(--burgundy);
  }

  .mic-btn.recording {
    border-color: var(--burgundy);
    background: var(--burgundy);
    color: var(--paper);
    animation: mic-pulse 1.5s ease-in-out infinite;
  }

  @keyframes mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  .mic-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mic-status {
    font-size: 12px;
    color: var(--burgundy);
    font-weight: 400;
    letter-spacing: 0.05em;
  }

  .mic-status:empty {
    display: none;
  }

  .textarea-wrap .answer-textarea {
    margin-bottom: 0;
  }

  .mic-hint {
    display: none;
    pointer-events: none;
  }

  .textarea-wrap:hover .mic-hint,
  .textarea-wrap:focus-within .mic-hint {
    opacity: 1;
  }

  /* Chip options */
  .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 520px;
    margin-bottom: 48px;
  }

  .chip {
    padding: 10px 20px;
    border: 1.5px solid var(--tan);
    background: transparent;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--brown);
    cursor: pointer;
    transition: all 0.25s;
    border-radius: 0;
  }

  .chip:hover { border-color: var(--tan); color: var(--burgundy); }
  .chip.selected { border-color: var(--burgundy); background: var(--cream); color: var(--burgundy); }

  /* Edition select cards */
  .edition-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 48px;
  }

  .edition-opt {
    border: 1.5px solid var(--tan);
    padding: 24px 20px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
  }

  .edition-opt:hover { border-color: var(--tan); }
  .edition-opt.selected { border-color: var(--burgundy); background: var(--cream); }
  .edition-opt.selected::after { content: '✓'; position: absolute; top: 12px; right: 14px; color: var(--burgundy); font-size: 13px; }

  .edition-opt-badge {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 8px;
  }

  .edition-opt-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .edition-opt-pages {
    font-size: 11px;
    color: var(--brown);
    margin-bottom: 12px;
  }

  .edition-opt-price {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 300;
    color: var(--ink);
  }

  .edition-opt-price sup { font-size: 12px; font-family: 'EB Garamond', Georgia, serif; }

  /* Navigation buttons */
  .btn-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: 36px;
  }

  .btn-next {
    background: var(--burgundy);
    color: var(--paper);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 18px 36px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
  }

  .btn-next:hover { background: var(--burgundy-dk); }
  .btn-next:disabled { background: var(--cream); cursor: not-allowed; }

  .btn-prev {
    font-size: 16px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 0;
    transition: color 0.3s;
    font-family: 'EB Garamond', Georgia, serif;
  }

  .btn-prev:hover { color: var(--burgundy); }

  .skip-link {
    font-size: 14px;
    color: var(--brown);
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: color 0.3s;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'EB Garamond', Georgia, serif;
  }

  .skip-link:hover { color: var(--burgundy); }

  /* Form fields for gift + checkout */
  .field-group { margin-bottom: 28px; max-width: 520px; }

  .field-group label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
  }

  .field-group input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--tan);
    padding: 10px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
  }

  .field-group input:focus { border-color: var(--burgundy); }
  .field-group input::placeholder { color: var(--tan); font-style: italic; }

  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Review screen */
  .review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--tan);
    max-width: 520px;
    margin-bottom: 40px;
  }

  .review-item {
    background: var(--paper);
    padding: 18px 20px;
  }

  .review-label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 6px;
  }

  .review-value {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--ink);
    font-style: italic;
  }

  /* Checkout CTA */
  .checkout-summary {
    background: var(--cream);
    padding: 28px 32px;
    max-width: 520px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .checkout-edition-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .checkout-edition-detail {
    font-size: 12px;
    color: var(--brown);
  }

  .checkout-price {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 32px;
    font-weight: 300;
    color: var(--ink);
    flex-shrink: 0;
  }

  .checkout-price sup { font-size: 14px; font-family: 'EB Garamond', Georgia, serif; font-weight: 300; }

  .copies-selector {
    background: var(--cream);
    padding: 20px 32px;
    max-width: 520px;
    margin-bottom: 20px;
  }
  .copies-selector-label {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 12px;
  }
  .copies-stepper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
  }
  .copies-stepper button {
    width: 36px; height: 36px;
    border: 1px solid var(--tan);
    background: var(--paper);
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    font-family: 'EB Garamond', Georgia, serif;
    display: flex; align-items: center; justify-content: center;
  }
  .copies-stepper button:hover { background: var(--cream); }
  .copies-stepper button:disabled { opacity: 0.3; cursor: default; }
  .copies-stepper .copies-count {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 22px;
    color: var(--ink);
    min-width: 24px;
    text-align: center;
  }
  .copies-pricing {
    font-size: 13px;
    color: var(--brown);
    line-height: 1.6;
  }
  .copies-pricing .copies-total {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    color: var(--ink);
    margin-top: 6px;
  }
  .copies-note {
    font-size: 12px;
    color: var(--tan);
    font-style: italic;
    margin-top: 8px;
    line-height: 1.5;
  }

  .btn-checkout {
    width: 100%;
    max-width: 520px;
    background: var(--burgundy);
    color: var(--paper);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 16px;
  }

  .btn-checkout:hover { background: var(--burgundy-dk); }

  .save-toast {
    /* Was centred on the viewport, which is exactly where the questionnaire
       column sits — it covered whatever field you were filling in. */
    position: fixed;
    /* Clears the roadmap bar, which now occupies 64-128px and runs to the
       right edge - the toast was landing on the last stage. */
    top: 144px;
    right: 24px;
    bottom: auto;
    left: auto;
    width: fit-content;
    background: #53392A;
    color: #FFFDF9;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
  }
  .save-toast.visible { opacity: 0.55; }

  .checkout-note {
    font-size: 11px;
    color: var(--brown);
    text-align: center;
    max-width: 520px;
    letter-spacing: 0.04em;
  }

  /* Success / confirmation */
  .success-icon {
    width: 56px; height: 56px;
    border: 1.5px solid var(--burgundy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    color: var(--burgundy);
    font-size: 22px;
  }

  .success-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 16px;
  }

  .success-title em { font-style: italic; color: var(--burgundy); }

  .success-desc {
    font-size: 14px;
    color: var(--brown);
    line-height: 1.85;
    max-width: 460px;
    margin-bottom: 40px;
  }

  /* ── PREVIEW SCREEN ── */
  .preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    gap: 28px;
  }

  .preview-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--tan);
    border-top-color: var(--burgundy);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .preview-loading-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    color: var(--brown);
    text-align: center;
    max-width: 320px;
    line-height: 1.6;
  }

  .preview-loading-sub {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--tan);
  }

  /* Open book layout */
  .open-book {
    max-width: 640px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 20px 60px rgba(34,24,19,0.18);
    margin-bottom: 36px;
    position: relative;
  }

  /* spine shadow in middle */
  .open-book::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to right, rgba(34,24,19,0.15), rgba(34,24,19,0.05));
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
  }

  .book-page {
    background: var(--paper);
    padding: 44px 36px;
    min-height: 380px;
    position: relative;
  }

  .book-page-left {
    background: var(--cream);
    border-right: 1px solid rgba(34,24,19,0.06);
  }

  .book-page-number {
    position: absolute;
    bottom: 20px;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--tan);
  }

  .book-page-left .book-page-number { left: 36px; }
  .book-page-right .book-page-number { right: 36px; }

  .book-chapter-label {
    font-size: 8px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .book-chapter-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tan);
  }

  .book-drop-cap {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    color: var(--burgundy);
    float: left;
    line-height: 0.75;
    margin-right: 6px;
    margin-top: 8px;
  }

  .book-body-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.95;
    color: var(--ink);
  }

  .book-body-text p {
    margin-bottom: 14px;
    text-align: justify;
  }

  .book-body-text p:last-child { margin-bottom: 0; }

  .book-title-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .book-title-label {
    font-size: 8px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 24px;
  }

  .book-title-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 32px;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .book-title-divider {
    width: 32px;
    height: 1px;
    background: var(--tan);
    margin: 0 auto 16px;
    opacity: 0.5;
  }

  .book-title-sub {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 12px;
    font-style: italic;
    color: var(--brown);
    line-height: 1.6;
    max-width: 180px;
  }

  .book-publisher {
    position: absolute;
    bottom: 36px;
    left: 0; right: 0;
    text-align: center;
    font-size: 8px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--tan);
  }

  /* Preview actions */
  .preview-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 640px;
    margin-bottom: 12px;
  }

  .btn-regen {
    background: transparent;
    border: 1.5px solid var(--tan);
    color: var(--brown);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 13px 24px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .btn-regen:hover { border-color: var(--burgundy); color: var(--burgundy); }

  .preview-note {
    font-size: 12px;
    color: var(--brown);
    max-width: 580px;
    line-height: 1.7;
    font-style: italic;
  }

  .preview-disclaimer {
    font-size: 11px;
    color: var(--tan);
    max-width: 580px;
    margin-top: 6px;
    letter-spacing: 0.03em;
  }



  /* ── PHOTO UPLOAD ── */
  .upload-zone {
    max-width: 520px;
    border: 1.5px dashed var(--tan);
    padding: 48px 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    margin-bottom: 32px;
    background: transparent;
  }

  .upload-zone:hover { border-color: var(--burgundy); background: var(--cream); }
  .upload-zone.has-photos { border-color: var(--tan); border-style: solid; }

  .upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .upload-icon {
    margin-bottom: 16px;
    color: var(--burgundy);
    opacity: 0.6;
  }

  .upload-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .upload-sub {
    font-size: 12px;
    color: var(--brown);
    line-height: 1.6;
  }

  .photo-previews {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  .photo-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--border);
    position: relative;
  }

  .photo-thumb-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .photo-remove {
    position: absolute;
    top: -8px; right: -8px;
    width: 20px; height: 20px;
    background: var(--burgundy);
    color: var(--paper);
    border: none;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .upload-count {
    font-size: 11px;
    color: var(--burgundy);
    letter-spacing: 0.1em;
    margin-top: 8px;
  }

  /* ── BOOK ILLUSTRATION STYLES ── */
  .book-illustration-page {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    min-height: 380px;
    position: relative;
    overflow: hidden;
  }

  .book-illustration-page::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(34,24,19,0.08);
    pointer-events: none;
  }

  .book-pet-photo {
    width: 100%;
    height: 260px;
    object-fit: cover;
    filter: sepia(40%) contrast(1.1) brightness(0.95) saturate(0.8);
    display: block;
  }

  .book-photo-caption {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 300;
    color: var(--brown);
    text-align: center;
    margin-top: 12px;
    letter-spacing: 0.05em;
  }

  .book-no-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 260px;
    width: 100%;
    gap: 12px;
    opacity: 0.4;
  }

  .book-no-photo-text {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
  }


  /* ── TITLE CHOICE ── */
  .title-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 32px;
  }

  .title-suggestion {
    border: 1.5px solid var(--tan);
    padding: 20px 18px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
  }

  .title-suggestion:hover { border-color: var(--tan); background: var(--cream); }

  /* The generator. Dashed, so it reads as an action rather than a title you
     could pick. */
  .title-reroll {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title-reroll::after { display: none !important; }
  .title-reroll .title-suggestion-text { text-align: center; }

  .title-suggestion.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .title-suggestion.selected::after {
    content: '';
    position: absolute;
    top: 10px; right: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--burgundy);
  }

  .title-suggestion-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: var(--ink);
    line-height: 1.3;
  }

  .title-own-input {
    max-width: 520px;
    margin-bottom: 40px;
  }

  .title-own-label {
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
    display: block;
  }

  .title-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 520px;
    margin-bottom: 24px;
  }

  .title-divider-line {
    flex: 1;
    height: 1px;
    background: var(--tan);
  }

  .title-divider-text {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brown);
  }

  .faq-content { padding: 120px 40px 80px; }

  /* ── PRODUCT SHOWCASE ── */
  .product-showcase {
    padding: 0;
    background: var(--paper);
  }

  .product-showcase-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
  }

  .product-showcase-row.reverse { direction: rtl; }
  .product-showcase-row.reverse > * { direction: ltr; }

  .product-showcase-img {
    overflow: hidden;
  }

  .product-showcase-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  .product-showcase-img:hover img {
    transform: scale(1.02);
  }

  .product-showcase-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px;
  }

  .product-showcase-text .section-label {
    margin-bottom: 20px;
  }

  .product-showcase-text h3 {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 20px;
  }

  .product-showcase-text h3 em {
    font-style: italic;
    color: var(--burgundy);
  }

  .product-showcase-text p {
    font-size: 15px;
    color: var(--brown);
    line-height: 1.85;
    font-weight: 300;
    max-width: 400px;
  }

  .product-showcase-row.on-cream .product-showcase-text {
    background: var(--cream);
  }

  /* ══════════════════════════════════════════════════════════ */
  /* MOBILE RESPONSIVE                                         */
  /* ══════════════════════════════════════════════════════════ */

  @media (max-width: 768px) {

    /* ── NAV ── */
    :root { --nav-h: 56px; --bar-h: 54px; }
    nav { padding: 0 16px; }
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-logo img { height: 32px; }
    .hamburger { display: flex; }

    /* ── GIFT HERO ── */
    .gift-hero { min-height: auto; padding-top: 56px; }
    .gift-hero-inner { padding: 48px 24px; }

    /* ── HERO ── */
    .hero:not(.hero--video) {
      grid-template-columns: 1fr;
      min-height: auto;
      padding-top: 56px;
    }
    .hero-left { padding: 40px 24px 36px; }
    .hero-right { padding: 0 !important; height: 50vh; min-height: 300px; }
    .hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
    .hero--video .hero-content-overlay { padding: 0 20px 24px !important; max-width: 100% !important; }
    .hero--video .hero-headline { font-size: 2rem !important; margin-bottom: 0.5rem !important; }
    .hero--video .hero-sub { font-size: 0.9rem !important; margin-bottom: 0.5rem !important; line-height: 1.45 !important; }
    .hero--video .buyer-line { font-size: 15px !important; margin-bottom: 1.5rem !important; }
    .hero-cta-row { flex-direction: column; gap: 8px !important; }
    .hero-btn { justify-content: center; text-align: center; font-size: 1rem !important; padding: 0.8rem 1.2rem !important; }
    .hero-btn--primary { max-width: none; white-space: normal; }
    .montage-track { gap: 4px !important; padding: 0 !important; transform: translate(-8%, 20%); }
    .montage-col { gap: 4px !important; flex: 0 0 45% !important; transform: none !important; }
    .montage-col img { border-radius: 0 !important; flex: none !important; object-fit: initial !important; height: auto !important; width: 100% !important; }

    /* ── HOW IT WORKS ── */
    .how-section { padding: 40px 24px; }
    .how-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
    .editions-section { padding: 64px 24px; }
    /* One step per row, but each card laid out horizontally: the number sits
       in a left gutter beside the copy rather than stacked on top of it. Saves
       roughly 60px a card, so the section reads as a list instead of three
       screens of scrolling. */
    /* .steps-grid.steps-three (two classes) outranks a bare .steps-grid, and
       a media query adds no specificity - so this has to match it or the
       three-column desktop rule wins here too, which is what was happening:
       106px columns on a phone. */
    .steps-grid,
    .steps-grid.steps-three,
    .steps-grid.steps-four { grid-template-columns: 1fr; gap: 2px; }
    .step {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 16px;
      align-items: start;
      padding: 22px 22px 24px;
    }
    .step-number {
      font-size: 30px;
      line-height: 1;
      margin-bottom: 0;
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .step-accent { display: none; }
    .step-title { font-size: 19px; margin-bottom: 6px; grid-column: 2; grid-row: 1; }
    .step-desc { font-size: 15px; grid-column: 2; grid-row: 2; }

    /* ── EDITIONS ── */
    .editions-grid { grid-template-columns: 1fr; }
    .edition-card.wide { grid-column: span 1; }

    /* ── TESTIMONIALS ── */
    .testimonials-section { padding: 56px 24px !important; }
    .testimonial-pair { gap: 16px; width: 360px !important; }
    .testimonial-photo img { width: 120px !important; height: 120px !important; }
    .testimonial-quote { padding: 18px !important; min-height: 120px !important; }

    /* ── REVIEWS ── */
    .reviews-section { padding: 64px 24px; }
    .reviews-grid { grid-template-columns: 1fr; gap: 40px; }

    /* ── FORM SECTION ── */
    .form-section { padding: 64px 24px; }
    .form-inner { grid-template-columns: 1fr; gap: 40px; }
    .form-row { grid-template-columns: 1fr; }

    /* ── PRODUCT SHOWCASE ── */
    .product-showcase-row {
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .product-showcase-row.reverse { direction: ltr; }
    .product-showcase-img { height: auto; }
    .product-showcase-img img { object-fit: contain; }
    .product-showcase-text { padding: 48px 24px; }

    /* ── INSTAGRAM ── */
    .ig-section { padding: 40px 24px; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
    .ig-cell:nth-child(4),
    .ig-cell:nth-child(5) { display: none; }

    /* ── FOOTER ── */
    footer { padding: 48px 24px 32px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

    /* ── QUESTIONNAIRE LAYOUT ── */
    .page {
      grid-template-columns: 1fr;
      padding-top: calc(var(--nav-h) + var(--bar-h));
    }
    .left-panel {
      display: none;
    }

    /* The panel is hidden here, so the cover comes to the screen doing the
       asking - otherwise three screens in a row customise something unseen.
       It sticks, because the vibes and palettes sit below the fold: without
       this you scroll down to tap one and the thing it changes is off screen
       above you. */
    .cover-mobile-slot {
      position: sticky;
      top: calc(var(--nav-h) + var(--bar-h));
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 0 26px;
      padding: 14px 0 12px;
      background: var(--paper);
      box-shadow: 0 10px 14px -10px rgba(34,24,19,.18);
    }
    .cover-mobile-slot #coverBlock { align-items: center; }
    /* Smaller than it was, because it is on screen the whole time now. */
    .cover-mobile-slot .book-preview.cv { height: 168px; width: auto; font-size: 10.5px; }
    .cover-mobile-slot .cover-note { max-width: 300px; text-align: center; margin-top: 10px; font-size: 11px; }
    .right-panel {
      padding: 32px 24px 40px;
    }

    /* ── QUESTIONNAIRE SCREENS ── */
    .question-text { font-size: clamp(26px, 6vw, 38px); }
    .question-hint { font-size: 16px; }
    .answer-input { font-size: 18px; }
    .answer-textarea { font-size: 18px; }
    .field-row { grid-template-columns: 1fr; }
    .path-card { padding: 24px 20px; }
    .cover-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cover-card-info { padding: 10px 10px 14px; }
    .vibe-grid { grid-template-columns: 1fr; }
    .cover-card-name { font-size: 13px; }
    .cover-card-tagline { font-size: 10px; }

    /* ── CHIPS ── */
    .chip { padding: 10px 16px; font-size: 13px; }

    /* ── BUTTONS ── */
    .btn-next { padding: 16px 28px; font-size: 14px; }
    .btn-checkout { font-size: 14px; padding: 16px 24px; }

    /* ── REVIEW GRID ── */
    .review-grid { grid-template-columns: 1fr; }

    /* ── GIFTING SECTION ── */
    #gifting { padding: 56px 24px; }

    /* ── GIFT CHECKOUT ── */
    .checkout-summary { flex-direction: column; gap: 12px; align-items: flex-start; }

    /* ── FAQ PAGE ── */
    .faq-content { padding: 60px 20px 40px; }

  }

  /* ── BOOK SAMPLE VIEWER MODAL ── */
  .sample-modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(239,232,219,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
  }
  .sample-modal-overlay.active { display: flex; }

  .sample-modal-header {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; margin-bottom: 20px; width: 100%; max-width: 900px;
    position: relative;
  }
  .sample-toggle {
    display: flex; gap: 0; border: 1px solid var(--tan); border-radius: 2px; overflow: hidden;
  }
  .sample-toggle button {
    font-family: 'EB Garamond', Georgia, serif; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 8px 20px; border: none; cursor: pointer;
    background: transparent; color: var(--brown); transition: all 0.2s;
  }
  .sample-toggle button.active {
    background: var(--burgundy); color: var(--paper);
  }
  .sample-close {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: none; border: none; font-size: 28px; color: var(--brown);
    cursor: pointer; line-height: 1; padding: 4px 8px;
  }
  .sample-close:hover { color: var(--burgundy); }

  .sample-label { text-align: center; }
  .sample-label-primary {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 16pt;
    color: var(--brown);
  }
  .sample-label-qualifier {
    font-family: 'Inter', sans-serif;
    font-size: 10px; letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown); opacity: 0.6;
    margin-top: 0.4em;
  }
  .sample-label-ornament {
    font-size: 14pt; color: var(--burgundy);
    margin-top: 0.6em; margin-bottom: 1em;
  }

  .sample-carousel-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    min-height: 0;
    position: relative;
  }
  .sample-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .sample-carousel-track {
    display: flex;
    transition: transform 0.35s ease;
  }
  .sample-carousel-slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .sample-carousel-slide img {
    max-width: 100%;
    max-height: 65vh;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 8px 40px rgba(34,24,19,0.18), 0 2px 12px rgba(34,24,19,0.1);
  }
  .sample-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  .sample-carousel-nav button {
    background: none;
    border: 1px solid var(--tan);
    color: var(--brown);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 18px;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
  }
  .sample-carousel-nav button:hover {
    border-color: var(--burgundy);
    color: var(--burgundy);
  }
  .sample-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .sample-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--tan);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
  }
  .sample-dot.active {
    background: var(--burgundy);
    border-color: var(--burgundy);
  }
  .sample-page-count {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    color: var(--brown);
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-top: 12px;
  }

  @media (max-width: 767px) {
    .sample-carousel-wrap { max-width: 100%; }
    .sample-carousel-slide { padding: 0 8px; }
    .sample-carousel-slide img { max-height: 55vh; }
    .sample-carousel-nav button { padding: 6px 14px; font-size: 10px; }
  }



/* ── Family screen: the cast page and the contents page ─────────────────
   Both are drawn as pages of the book, double-ruled like a title page, so
   the owner is filling in the first page of the thing they are making. */
.cast-page, .toc-page { position: relative; border: 1px solid var(--tan); background: var(--paper); padding: 20px 18px 16px; margin-top: 6px; }
.cast-page::before, .toc-page::before { content: ''; position: absolute; inset: 6px; border: 0.5px solid rgba(188,154,113,0.55); pointer-events: none; }
.cast-title { margin: 0; text-align: center; font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--burgundy); }
.cast-sub { text-align: center; font-style: italic; font-size: 14px; color: #8A7A66; margin: 2px 0 10px; }
.cast-orn { text-align: center; color: var(--burgundy); font-size: 13px; margin: 0 0 4px; }
.cast-row { display: grid; grid-template-columns: 1fr 1fr 18px; gap: 6px 12px; margin: 12px 0 0; }
.cast-row input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--tan); border-radius: 0; padding: 6px 0 4px; font-family: 'EB Garamond', Georgia, serif; font-size: 15px; font-weight: 300; color: var(--ink); outline: none; appearance: none; }
.cast-row input:focus { border-bottom-color: var(--burgundy); }
.cast-row input::placeholder { color: #B3A793; }
.cast-row .cast-name { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; }
.cast-row .cast-name::placeholder { text-transform: none; letter-spacing: 0; }
.cast-row .cast-called { font-style: italic; color: var(--burgundy); }
.cast-row .cast-note { color: var(--brown); }
/* A mic for the fields that appear as you go - the cast's one line, a
   moment's answer. Same behaviour as the wide strip under the long answers,
   sized to sit on a single line. */
.mic-inline { flex: 0 0 auto; background: none; border: 0; padding: 2px; line-height: 0;
  color: var(--tan); cursor: pointer; transition: color 0.2s; }
.mic-inline svg { width: 15px; height: 15px; display: block; }
.mic-inline:hover, .mic-inline:focus-visible { color: var(--burgundy); }
.mic-inline.recording { color: var(--burgundy); animation: mic-pulse 1.5s ease-in-out infinite; }
.cast-note-line { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; }
.cast-note-line .cast-note { flex: 1; min-width: 0; }
.ch-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Under the answer: the way in by voice, and the way to send. An unlabelled
   icon beside a button with words on it reads as nothing at all. */
.ch-under { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 6px; }
.mic-inline--labelled { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; line-height: 1.2;
  font-family: 'EB Garamond', Georgia, serif; font-size: 13px; color: var(--brown); }
.mic-inline--labelled svg { width: 13px; height: 13px; }
.mic-inline--labelled.recording { color: var(--burgundy); }
.ch-under .ch-a-hint { margin: 0; }

.cast-del { grid-column: 3; grid-row: 1 / span 2; align-self: center; background: none; border: 0; padding: 0; width: 18px;
  font-family: 'EB Garamond', Georgia, serif; font-size: 17px; line-height: 1; color: var(--tan); cursor: pointer;
  opacity: 0; transition: opacity 0.2s, color 0.2s; }
.cast-row.has-content .cast-del { opacity: 1; }
.cast-del:hover, .cast-del:focus-visible { color: var(--burgundy); opacity: 1; }
.cast-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.cast-roles .chip { padding: 5px 10px; font-size: 13px; }
.cast-add, .toc-add { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--burgundy); border-bottom: 1px solid var(--tan); cursor: pointer; }
.pair-optional { font-style: italic; font-family: 'EB Garamond', Georgia, serif; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8A7A66; font-size: 13px; margin-left: 8px; }
.q-direction { font-size: 15px; font-style: italic; color: var(--brown); line-height: 1.5; margin: 0 0 12px; }
.toc-title { text-align: center; margin: 0 0 4px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--burgundy); }
.ch-row { margin: 12px 0 0; }
.ch-line { display: flex; align-items: baseline; gap: 10px; }
.ch-num { font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px; letter-spacing: 0.16em; color: #8A7A66; flex: 0 0 26px; }
.ch-del { flex: 0 0 18px; background: none; border: 0; padding: 0; font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px; line-height: 1; color: var(--tan); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s; }
.ch-row.has-content .ch-del { opacity: 1; }
.ch-del:hover, .ch-del:focus-visible { color: var(--burgundy); opacity: 1; }
.ch-title { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px dotted var(--tan); border-radius: 0; padding: 4px 0 2px; font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: 20px; color: var(--ink); outline: none; appearance: none; }
.ch-title:focus { border-bottom-color: var(--burgundy); }
.ch-title::placeholder { color: #B3A793; font-size: 17px; }
.ch-thread { margin: 0 0 0 36px; }
.ch-q { display: block; font-style: italic; font-size: 16px; color: var(--brown); margin: 12px 0 3px; line-height: 1.4; }
.ch-q::before { content: '\2726'; font-style: normal; font-size: 10px; color: var(--burgundy); margin-right: 7px; vertical-align: 1px; }
.ch-q.thinking { color: #8A7A66; }
.ch-done { display: block; font-style: italic; font-size: 14.5px; color: #8A7A66; margin: 10px 0 2px; }
.ch-done::before { content: '\2713'; font-style: normal; font-size: 12px; color: var(--burgundy); margin-right: 7px; }
.ch-row.done .ch-num { color: var(--burgundy); }
.ch-q.thinking::after { content: '\2026'; animation: rh-dots 1.2s steps(3, end) infinite; }
@keyframes rh-dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }
.ch-answer { display: flex; align-items: flex-end; gap: 10px; }
.ch-send { flex: 0 0 auto; background: none; border: 1px solid var(--tan); border-radius: 0; padding: 6px 13px;
  font-family: 'EB Garamond', Georgia, serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brown); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s; }
.ch-qa.has-text .ch-send { opacity: 1; }
.ch-send:hover, .ch-send:focus-visible { color: var(--burgundy); border-color: var(--burgundy); opacity: 1; }
.ch-qa.sent .ch-send { opacity: 0; pointer-events: none; }
/* The title's own Done: a phone keyboard has no obvious way to commit a
   single-line field, so the button is the way in. It goes once asked. */
.ch-send-title { opacity: 0; pointer-events: none; margin-right: 2px; }
.ch-row.has-content .ch-send-title { opacity: 1; pointer-events: auto; }
.ch-row.asked .ch-send-title { opacity: 0; pointer-events: none; }
.ch-answer .ch-a { flex: 1 1 auto; min-width: 0; }
.ch-a-hint { display: block; font-size: 13px; color: #8A7A66; margin: 5px 0 0; font-style: italic; }
.ch-a { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--tan); border-radius: 0; padding: 4px 0 3px; font-family: 'EB Garamond', Georgia, serif; font-size: 17px; font-weight: 300; line-height: 1.45; color: var(--brown); outline: none; resize: none; min-height: 32px; overflow: hidden; appearance: none; }
.ch-a:focus { border-bottom-color: var(--burgundy); }
@media (max-width: 600px) {
  .cast-page, .toc-page { padding: 16px 14px 14px; }
  .cast-title { font-size: 19px; }
  .ch-thread { margin-left: 30px; }
}
@media (prefers-reduced-motion: reduce) { .ch-q.thinking::after { animation: none; content: '\2026'; } }


/* Which photo leads. The book build makes the first one the author portrait,
   so the badge marks it and every other thumb offers to take its place. */
.photo-thumb-wrap.is-author .photo-thumb { outline: 2px solid var(--burgundy); outline-offset: -2px; }
.photo-badge, .photo-pick { position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 2px; border: 0; }
.photo-badge { background: var(--burgundy); color: var(--paper); }
.photo-pick { background: rgba(34,24,19,0.62); color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
.photo-thumb-wrap:hover .photo-pick, .photo-pick:focus-visible { opacity: 1; }
@media (hover: none) { .photo-pick { opacity: 1; background: rgba(34,24,19,0.5); } }