@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&display=swap');

:root {
  --ink: #161512;
  --paper: #eee8dc;
  --cream: #f7f3ea;
  --rust: #9f3d26;
  --brass: #b8975e;
  --forest: #18372f;
  --line: rgba(22, 21, 18, .2);
  --display: "Italiana", Georgia, serif;
  --sans: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.65; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20; background: var(--cream); padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem clamp(1.25rem, 5vw, 5rem); color: var(--cream); }
.site-header.compact { position: relative; color: var(--ink); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; font-family: var(--display); font-size: 1.3rem; line-height: .82; letter-spacing: .06em; }
.site-nav { display: flex; gap: 2rem; }
.site-nav a { text-decoration: none; font-size: .86rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.site-nav a:hover { color: var(--brass); }
.menu-button { display: none; border: 1px solid currentColor; color: inherit; background: transparent; padding: .5rem .75rem; font: inherit; }
.hero { min-height: 94vh; position: relative; overflow: hidden; display: grid; align-items: end; padding: 10rem clamp(1.25rem, 7vw, 7rem) 7rem; color: var(--cream); background: var(--forest); }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, transparent 0 13%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.58)); pointer-events: none; }
.hero-author { position: absolute; z-index: 0; right: 4%; bottom: -14%; width: min(43vw, 660px); height: 94%; object-fit: cover; object-position: center top; opacity: .14; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; }
.hero-copy { position: relative; z-index: 2; width: min(760px, 75vw); }
.eyebrow { margin: 0 0 1.25rem; color: var(--rust); font-size: .69rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hero .eyebrow { color: #e1b879; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: .98; letter-spacing: -.025em; }
h1 { margin: 0; font-size: clamp(3.7rem, 8.5vw, 9rem); }
.hero-deck { max-width: 570px; margin: 2rem 0; font-size: clamp(1rem, 1.6vw, 1.3rem); color: rgba(247,243,234,.78); }
.text-link { text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: .4rem; text-transform: uppercase; font-size: .75rem; letter-spacing: .18em; }
.text-link span { margin-left: .75rem; }
.hero-architecture { position: absolute; inset: 0; opacity: .5; }
.door { position: absolute; bottom: -4%; width: 23%; height: 78%; border: 2px solid rgba(184,151,94,.35); box-shadow: inset 0 0 0 1.4rem rgba(0,0,0,.08); }
.door::after { content: ""; position: absolute; top: 48%; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); }
.door-left { left: -3%; transform: perspective(500px) rotateY(13deg); }
.door-left::after { right: 12%; }
.door-right { right: -3%; transform: perspective(500px) rotateY(-13deg); }
.door-right::after { left: 12%; }
.hall-light { position: absolute; left: 50%; top: 16%; width: 11rem; height: 11rem; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(225,184,121,.68), rgba(225,184,121,.05) 52%, transparent 70%); }
.floor-line { position: absolute; left: 50%; bottom: -20%; width: 1px; height: 72%; background: rgba(184,151,94,.4); transform-origin: bottom; box-shadow: -25vw 0 rgba(184,151,94,.15), 25vw 0 rgba(184,151,94,.15); }
.hero-number { position: absolute; z-index: 2; right: 4vw; bottom: 2rem; margin: 0; font-family: var(--display); font-size: 8rem; color: rgba(247,243,234,.08); }
.book-section { position: relative; display: grid; grid-template-columns: minmax(260px, .75fr) 1fr; gap: clamp(3rem, 8vw, 10rem); padding: clamp(6rem, 11vw, 11rem) clamp(1.25rem, 10vw, 11rem); background: var(--cream); }
.section-marker { position: absolute; top: 3rem; left: 3vw; color: var(--brass); font-family: var(--display); font-size: 1rem; }
.book-art { position: relative; align-self: start; }
.book-art img { position: relative; z-index: 1; width: min(100%, 440px); aspect-ratio: 2 / 3; object-fit: cover; margin: auto; box-shadow: 0 2rem 4rem rgba(22,21,18,.24); }
.cover-shadow { position: absolute; width: 70%; height: 95%; left: 6%; top: 10%; background: var(--rust); transform: rotate(-5deg); }
.book-copy { align-self: center; max-width: 640px; }
.book-copy h2, .about-heading h2, .letters-copy h2 { margin: 0 0 2rem; font-size: clamp(3rem, 6vw, 6.2rem); }
.book-hook { font-family: var(--display); font-size: clamp(1.45rem, 2.5vw, 2.25rem); line-height: 1.25; }
.book-details { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0; }
.book-details span { border: 1px solid var(--line); padding: .45rem .75rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.availability { color: var(--rust); font-weight: 600; }
.home-about { display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; gap: clamp(3rem, 9vw, 10rem); align-items: center; padding: clamp(7rem, 12vw, 12rem) clamp(1.25rem, 9vw, 9rem); background: var(--paper); }
.home-about-photo { position: relative; margin: 0; max-width: 560px; }
.home-about-photo::before { content: ""; position: absolute; inset: -1.25rem 1.25rem 1.25rem -1.25rem; border: 1px solid var(--brass); }
.home-about-photo img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 58% center; filter: saturate(.9); box-shadow: 0 2rem 4rem rgba(22,21,18,.18); }
.home-about-photo figcaption { margin-top: .8rem; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }
.home-about-copy { max-width: 720px; }
.home-about-copy h2 { margin: 0 0 2rem; font-family: var(--display); font-size: clamp(3rem, 5.8vw, 6.4rem); font-weight: 400; line-height: 1; }
.home-about-copy p { font-size: clamp(1.05rem, 1.45vw, 1.25rem); }
.home-about-copy .text-link { display: inline-block; margin-top: 1.5rem; }
.about-section { position: relative; display: grid; grid-template-columns: minmax(280px, .8fr) 1.2fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; padding: clamp(7rem, 12vw, 12rem) clamp(1.25rem, 9vw, 9rem); }
.about-portrait { position: relative; max-width: 520px; }
.about-portrait::before { content: ""; position: absolute; inset: -1.25rem 1.25rem 1.25rem -1.25rem; border: 1px solid var(--brass); }
.about-portrait img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.88) contrast(1.03); box-shadow: 0 2rem 4rem rgba(22,21,18,.2); }
.about-portrait p { position: absolute; right: -1.2rem; bottom: 1rem; z-index: 1; margin: 0; padding: .45rem .7rem; color: var(--cream); background: var(--forest); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; }
.about-content { max-width: 720px; }
.about-copy { font-size: clamp(1.05rem, 1.45vw, 1.25rem); }
.about-copy p:first-child::first-letter { float: left; padding: .18rem .5rem 0 0; color: var(--rust); font-family: var(--display); font-size: 4.8rem; line-height: .7; }
.letters-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: clamp(6rem, 10vw, 10rem) clamp(1.25rem, 9vw, 9rem); color: var(--cream); background: var(--rust); }
.letters-section .eyebrow { color: #f0cc91; }
.signup-form { align-self: center; }
.signup-form label { display: block; margin-bottom: .75rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.signup-row { display: flex; border-bottom: 1px solid rgba(247,243,234,.6); }
.signup-row input { flex: 1; min-width: 0; padding: 1rem 0; border: 0; color: var(--cream); background: transparent; font: inherit; }
.signup-row input::placeholder { color: rgba(247,243,234,.55); }
.signup-row button { border: 0; color: var(--ink); background: var(--brass); padding: 0 1.4rem; font-weight: 600; }
.signup-row input:disabled, .signup-row button:disabled { opacity: .8; cursor: not-allowed; }
.form-note { font-size: .76rem; color: rgba(247,243,234,.72); }
.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; align-items: end; padding: 4rem clamp(1.25rem, 5vw, 5rem) 2rem; background: var(--paper); }
.footer-mark { font-size: 2rem; }
.site-footer nav { display: flex; gap: 1.5rem; }
.copyright { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--line); font-size: .72rem; }
.legal-content { min-height: 70vh; max-width: 760px; padding: 8rem max(1.25rem, calc((100vw - 760px)/2)); }
.legal-content h1 { font-size: clamp(4rem, 9vw, 8rem); }
.legal-updated { margin-top: 3rem; color: rgba(22,21,18,.6); }
.profile-hero { display: grid; grid-template-columns: 1.08fr .72fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; min-height: calc(100vh - 90px); padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 8vw, 9rem); background: var(--cream); }
.profile-intro h1 { font-size: clamp(3.7rem, 7.2vw, 8rem); }
.profile-deck { max-width: 640px; margin-top: 2rem; color: rgba(22,21,18,.68); font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.35; }
.profile-primary { position: relative; margin: 0; }
.profile-primary::before { content: ""; position: absolute; inset: -1.25rem 1.25rem 1.25rem -1.25rem; border: 1px solid var(--brass); }
.profile-primary img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.88); box-shadow: 0 2rem 4rem rgba(22,21,18,.2); }
.profile-primary figcaption, .profile-gallery figcaption { margin-top: .8rem; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }
.profile-story { display: grid; grid-template-columns: 1fr minmax(280px, .65fr); gap: clamp(4rem, 10vw, 12rem); align-items: center; padding: clamp(7rem, 12vw, 12rem) clamp(1.25rem, 10vw, 11rem); }
.profile-prose { max-width: 720px; font-size: clamp(1.08rem, 1.5vw, 1.3rem); }
.profile-prose h2, .profile-break h2, .profile-close h2 { margin: 0 0 2rem; font-family: var(--display); font-size: clamp(3rem, 5.8vw, 6rem); font-weight: 400; line-height: 1; }
.profile-prose > p:first-of-type::first-letter { float: left; padding: .18rem .5rem 0 0; color: var(--rust); font-family: var(--display); font-size: 4.8rem; line-height: .7; }
.story-image { margin: 0; }
.story-image img { width: 100%; object-fit: cover; box-shadow: 0 2rem 4rem rgba(22,21,18,.18); }
.story-image-tall img { aspect-ratio: 4 / 5; }
.profile-break { position: relative; min-height: 78vh; display: grid; align-items: end; overflow: hidden; color: var(--cream); background: var(--forest); }
.profile-break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.05) 70%); }
.profile-break > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-break-copy { position: relative; z-index: 1; max-width: 650px; padding: clamp(4rem, 8vw, 8rem); }
.profile-break-copy .eyebrow { color: #e1b879; }
.profile-break-copy p:last-child { color: rgba(247,243,234,.78); font-size: 1.1rem; }
.profile-gallery { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1rem, 3vw, 3rem); align-items: end; padding: clamp(6rem, 10vw, 10rem) clamp(1.25rem, 6vw, 6rem); background: var(--ink); color: var(--cream); }
.profile-gallery figure { margin: 0; }
.profile-gallery img { width: 100%; object-fit: cover; filter: saturate(.88); }
.gallery-wide img { aspect-ratio: 3 / 2; }
.gallery-tall img { aspect-ratio: 4 / 5; }
.profile-gallery figcaption { color: rgba(247,243,234,.62); }
.candid-section { display: grid; grid-template-columns: .72fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(7rem, 11vw, 11rem) clamp(1.25rem, 8vw, 8rem); background: var(--paper); }
.candid-heading { align-self: start; max-width: 520px; }
.candid-heading h2 { margin: 0 0 1.5rem; font-family: var(--display); font-size: clamp(3rem, 5.5vw, 5.8rem); font-weight: 400; line-height: 1; }
.candid-landscape { grid-column: 2; margin: 0; }
.candid-section img { width: 100%; object-fit: cover; box-shadow: 0 2rem 4rem rgba(22,21,18,.16); }
.candid-landscape img { aspect-ratio: 3 / 2; }
.profile-close { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: clamp(7rem, 12vw, 12rem) clamp(1.25rem, 9vw, 9rem); background: var(--cream); }
.profile-close .text-link { display: inline-block; margin-top: 2rem; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .site-header { align-items: flex-start; }
  .menu-button { display: block; }
  .site-nav { position: absolute; top: 5rem; right: 1.25rem; display: none; flex-direction: column; min-width: 11rem; padding: 1.5rem; color: var(--ink); background: var(--cream); box-shadow: 0 1rem 3rem rgba(0,0,0,.2); }
  .site-nav.is-open { display: flex; }
  .compact .site-nav { position: static; display: flex; flex-direction: row; padding: 0; background: none; box-shadow: none; }
  .hero { min-height: 88vh; padding-bottom: 4rem; }
  .hero-copy { width: 100%; }
  .hero-author { right: -25%; bottom: -8%; width: 95vw; height: 78%; opacity: .1; }
  .door { width: 32%; opacity: .65; }
  .book-section, .home-about, .about-section, .letters-section { grid-template-columns: 1fr; }
  .profile-hero, .profile-story, .profile-gallery, .candid-section, .profile-close { grid-template-columns: 1fr; }
  .profile-hero { min-height: auto; }
  .profile-primary { width: min(84vw, 500px); margin: 1rem auto 0; }
  .profile-story { gap: 3rem; }
  .story-image { width: min(82vw, 480px); margin: auto; }
  .profile-break { min-height: 75vh; }
  .profile-break::after { background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.05) 75%); }
  .profile-break-copy { padding: 3rem 1.25rem; }
  .profile-gallery { align-items: start; }
  .candid-landscape { grid-column: 1; grid-row: auto; width: 100%; margin: 0; }
  .book-art img { width: min(80vw, 390px); }
  .book-copy { padding-top: 1rem; }
  .home-about-photo { width: min(84vw, 470px); margin: 0 auto 1rem; }
  .about-copy { padding-top: 0; }
  .about-portrait { width: min(86vw, 470px); margin: 0 auto 2rem; }
  .site-footer { grid-template-columns: 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}