@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400;1,6..96,500&family=Inter:wght@400;500&display=swap');
        /* Display: Ambrose Std when installed; Didot renders natively on iOS/macOS. */
        :root {
          --serif: 'Ambrose Std', 'Didot', 'Bodoni Moda', 'Playfair Display', serif;
          --sans: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', 'Inter', -apple-system, sans-serif;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
        ::selection { background: #E9E4DA; }

        .serif { font-family: var(--serif); }
        .sans  { font-family: var(--sans); }
        .plate { display: block; }

        .bubbles {
          position: fixed; inset: 0; z-index: 0;
          overflow: hidden; pointer-events: none;
        }
        .bubble {
          position: absolute; bottom: -180px;
          border-radius: 50%;
          border-style: solid; border-width: 1px;
          background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 62%);
          animation-name: rise;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          will-change: transform;
        }
        @keyframes rise {
          0%   { transform: translate3d(0, 0, 0) scale(0.86); }
          50%  { transform: translate3d(26px, -52vh, 0) scale(1); }
          100% { transform: translate3d(-14px, -108vh, 0) scale(1.08); }
        }
        header, section, footer { position: relative; z-index: 1; }
        @media (prefers-reduced-motion: reduce) { .bubbles { display: none; } }

        /* — playful — */
        .plate {
          border-radius: 22px;
          transition: transform 0.6s cubic-bezier(0.34,1.4,0.5,1), box-shadow 0.6s ease;
          box-shadow: 0 14px 40px rgba(17,17,16,0.10);
        }
        .tilt-l { transform: rotate(-1.6deg); }
        .tilt-r { transform: rotate(1.6deg); }
        .tilt-l:hover, .tilt-r:hover {
          transform: rotate(0deg) translateY(-8px) scale(1.02);
          box-shadow: 0 26px 60px rgba(17,17,16,0.16);
        }
        .pill {
          display: inline-block; padding: 7px 16px; border-radius: 100px;
          background: #78C1B433; color: #111110;
        }
        .wave { display: block; width: 100%; height: 42px; }
        @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
        .bob { animation: bob 5.5s ease-in-out infinite; }
        @keyframes swell { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
        .dot { display:inline-block; width:9px; height:9px; border-radius:50%; animation: swell 3s ease-in-out infinite; }

        .caps {
          font-family: var(--sans); font-size: 10px; font-weight: 500;
          letter-spacing: 0.32em; text-transform: uppercase; color: #77726B;
        }
        .prose {
          font-family: var(--sans); font-size: 15px; font-weight: 400;
          line-height: 1.9; color: #77726B;
        }
        .ulink {
          font-family: var(--sans); font-size: 10px; font-weight: 500;
          letter-spacing: 0.32em; text-transform: uppercase;
          color: #111110; text-decoration: none;
          padding-bottom: 8px; border-bottom: 1px solid #111110;
          transition: opacity 0.3s ease;
        }
        .ulink:hover { opacity: 0.45; }

        .f-input {
          width: 100%; font-family: var(--sans); font-size: 16px; color: #111110;
          background: transparent; border: none; border-bottom: 1px solid #E5E1DA;
          padding: 10px 0 16px; outline: none; border-radius: 0;
          transition: border-color 0.3s ease;
        }
        .f-input:focus { border-color: #111110; }
        .f-input::placeholder { color: #BDB7AD; }

        .hero   { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
        @media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }
        .wrap   { max-width: 1140px; margin: 0 auto; padding-left: clamp(22px, 5vw, 60px); padding-right: clamp(22px, 5vw, 60px); }
        .dip    { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); }
        .split  { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px); align-items: end; }
        .duo    { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

        @media (max-width: 880px) {
          .split { grid-template-columns: 1fr; }
        }
        @media (max-width: 560px) {
          .dip { grid-template-columns: 1fr; gap: 40px; }
          .duo { grid-template-columns: 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
          *, *::before, *::after { animation: none !important; transition: none !important; }
          html { scroll-behavior: auto; }
        }
        :focus-visible { outline: 1px solid #111110; outline-offset: 4px; }
      
/* ── layout carried over from the app build ───────────────────────── */
body { background: #FCFCFA; color: #111110; }
.page { position: relative; }
a { color: inherit; }
img { max-width: 100%; }

.hero   { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: all .4s ease;
}
.site-header.scrolled {
  background: rgba(252,252,250,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: #E5E1DA;
}
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: .04em; text-decoration: none; }

.hero-title { font-family: var(--serif); font-size: clamp(54px, 7.6vw, 116px); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; }
.sec-title  { font-family: var(--serif); font-size: clamp(36px, 5vw, 68px); font-weight: 400; line-height: 1.1; }
.manifesto  { font-family: var(--serif); font-size: clamp(34px, 5.8vw, 84px); font-weight: 400; font-style: italic; line-height: 1.22; max-width: 18ch; }
.book-title { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 28px); font-weight: 400; }
.note-value { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 28px); font-weight: 400; line-height: 1.45; }

.reveal-box { position: relative; aspect-ratio: 1/1; cursor: ew-resize; user-select: none; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px rgba(17,17,16,.14); }
.reveal-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal-clip { position: absolute; inset: 0; overflow: hidden; }
.reveal-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.75); transform: translateX(-50%); pointer-events: none; }
.reveal-handle { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(17,17,16,.88); display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }

.dip  { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.duo  { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px); align-items: end; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dip, .duo { grid-template-columns: 1fr; } }

.note-row { display: flex; gap: clamp(28px, 6vw, 90px); padding: 26px 0; border-top: 1px solid #E5E1DA; flex-wrap: wrap; }
.note-key { flex: 0 0 130px; padding-top: 6px; }
.note-val { flex: 1; min-width: 230px; }

.figcap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; gap: 12px; flex-wrap: wrap; }

.site-footer { background: #111110; color: #FCFCFA; }
.footer-mark { font-family: var(--serif); font-size: clamp(44px, 8vw, 110px); font-weight: 400; line-height: 1.02; margin-bottom: clamp(56px, 8vw, 96px); }
.footer-stripes { display: flex; height: 5px; margin-bottom: 40px; }
.footer-stripes span { flex: 1; }
.footer-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-fine { font-family: var(--sans); font-size: 11px; color: rgba(252,252,250,.35); margin-top: 26px; letter-spacing: .03em; }

.sec { padding: clamp(72px, 10vw, 140px) 0; }
.sec-tight { padding: 0 0 clamp(72px, 10vw, 140px); }
.hero-sec { background: #EAF4F8; padding-top: 130px; padding-bottom: clamp(56px, 8vw, 110px); }
.sun-sec  { background: #FDF3E0; }
.mint-sec { background: #EAF5F1; }
form { display: flex; flex-direction: column; gap: 46px; }
label.caps { display: block; margin-bottom: 14px; }
textarea.f-input { resize: vertical; }
button.ulink { background: none; border: none; border-bottom: 1px solid #111110; cursor: pointer; }
.sent-note { display: none; }

/* ── scroll-in reveal (JS adds .in) ───────────────────────────────── */
.reveal-up { opacity: 0; transform: translateY(20px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.reveal-up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; } }