@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Inter:wght@400;500;600&family=Pacifico&display=swap');

:root {
  --paper: #f4eee4;
  --paper-2: #f7f2ea;
  --ink: #26201c;
  --blue: #315e73;
  --rule: #d9c7ad;
  --dark: #1c1915;
  --dark-2: #11100d;
  --gold: #d7ad61;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --script: "Pacifico", cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; }
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px clamp(28px, 4vw, 72px);
}
.site-header nav { display: flex; gap: 22px; }
.site-header nav a { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; text-decoration: none; }
.wordmark { opacity: 0; pointer-events: none; }
.hero {
  min-height: 710px; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: center; gap: 24px; padding: 80px clamp(28px, 4vw, 72px) 64px;
  background: radial-gradient(circle at 45% 20%, #fbf8f2 0, var(--paper) 68%);
}
.hero-copy { max-width: 620px; min-width: 0; }
.signature, .closing-signature {
  font-family: var(--script); font-size: 38px; margin-bottom: 34px;
}
.eyebrow, dt, .card span, .artifact-grid h3 {
  margin: 0 0 18px; color: var(--blue); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.hero h1 {
  margin: 0; font: 500 clamp(66px, 6.2vw, 100px)/.85 var(--serif);
  text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
}
.rule { width: 56px; height: 4px; background: #7d9daf; margin: 30px 0 20px; }
.hero-line { font: 500 30px/1.08 var(--serif); margin: 0; }
.hero-image { margin: 0; }
.hero-image img { display: block; width: 100%; height: 500px; object-fit: cover; border-radius: 22px; }

.story-section {
  padding: 120px max(7vw, 42px) 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 110px;
  background: var(--paper);
}
.story-column { max-width: 540px; justify-self: center; }
.story-column h2, .recovered h2, .notebook h2 {
  margin: 0 0 26px; font: 500 clamp(48px, 5vw, 72px)/.86 var(--serif);
}
.story-column p { font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.see-also { margin-top: 28px !important; padding-top: 20px; border-top: 1px solid var(--rule); font-style: italic; }
.facts {
  grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--rule); border-bottom: 0;
}
.facts div { min-height: 130px; padding: 28px 24px; border-right: 1px solid var(--rule); }
.facts div:last-child { border-right: 0; }
.facts dd { margin: 0; font: 500 19px/1.25 var(--serif); }

.recovered { padding: 110px max(8vw, 44px) 120px; text-align: center; background: #f8f2e8; }
.recovered h2 { max-width: 850px; margin-left: auto; margin-right: auto; }
.artifact-grid { max-width: 1050px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; text-align: left; }
.artifact-grid img { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; }
.artifact-grid h3 { margin: 14px 0 8px; font-size: 10px; }
.artifact-grid p { margin: 0; font: 500 14px/1.28 var(--serif); }

.notebook { padding: 120px max(6vw, 36px); text-align: center; background: var(--paper-2); border-top: 1px solid #e8dccc; }
.notebook h2 { max-width: 850px; margin-left: auto; margin-right: auto; }
.notebook-grid { max-width: 1100px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; text-align: left; }
.card {
  min-height: 230px; padding: 28px 24px; border: 1px solid var(--rule);
  border-radius: 14px; text-decoration: none; background: rgba(255,255,255,.2);
  display: flex; flex-direction: column; transition: transform .2s ease, background .2s ease;
}
.card:hover { transform: translateY(-3px); background: rgba(255,255,255,.55); }
.card span { font-size: 10px; }
.card h3 { margin: 0 0 28px; font: 600 25px/.95 var(--serif); }
.card p { margin: auto 0 0; font-size: 14px; line-height: 1.55; }

.closing {
  min-height: 410px; padding: 50px max(3vw, 40px) 70px;
  display: grid; grid-template-columns: 46% 54%; align-items: center;
  background: var(--dark); color: #fff;
}
.closing-image-wrap {
  position: relative; overflow: hidden; min-height: 260px; display: flex; align-items: center;
}
.closing-image-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0 72%, var(--dark) 100%),
              linear-gradient(0deg, var(--dark) 0, transparent 25%, transparent 78%, var(--dark) 100%);
  pointer-events: none;
}
.closing-image-wrap img { width: 100%; height: 260px; object-fit: cover; filter: saturate(.8) contrast(1.03); }
.closing-copy { padding-left: clamp(36px, 7vw, 120px); }
blockquote { margin: 0; font: 500 clamp(54px, 6vw, 96px)/.85 var(--serif); }
.closing-signature { color: var(--gold); margin: 52px 0 0; font-size: 34px; }

.site-footer {
  position: relative; min-height: 78px; padding: 24px 40px 18px;
  background: var(--dark-2); color: #efe8dc;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
}
.site-footer p { margin: 0; font: 500 15px var(--serif); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.site-footer nav a { font-size: 9px; letter-spacing: .17em; text-transform: uppercase; text-decoration: none; }
.copyright { grid-column: 1 / -1; opacity: .65; font: 400 9px var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 900px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 100px; }
  .hero h1 { white-space: normal; }
  .hero-image { order: -1; }
  .hero-image img { height: 54vw; min-height: 340px; }
  .story-section { grid-template-columns: 1fr; gap: 70px; }
  .facts { grid-template-columns: repeat(2,1fr); }
  .artifact-grid { grid-template-columns: repeat(2,1fr); gap: 34px 18px; }
  .notebook-grid { grid-template-columns: repeat(2,1fr); }
  .closing { grid-template-columns: 1fr; }
  .closing-copy { padding: 24px 0 0; }
}
@media (max-width: 560px) {
  .hero { min-height: auto; padding: 86px 22px 54px; }
  .hero h1 { font-size: 62px; }
  .signature { margin-bottom: 26px; }
  .hero-image img { height: 330px; min-height: 0; border-radius: 16px; }
  .story-section, .recovered, .notebook { padding-left: 22px; padding-right: 22px; }
  .story-column h2, .recovered h2, .notebook h2 { font-size: 45px; }
  .facts, .artifact-grid, .notebook-grid { grid-template-columns: 1fr; }
  .facts div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .artifact-grid { gap: 42px; }
  .artifact-grid img { aspect-ratio: 1.5; }
  .closing { padding: 32px 22px 50px; }
  .closing-image-wrap, .closing-image-wrap img { min-height: 210px; height: 210px; }
  blockquote { font-size: 56px; }
  .site-footer { padding: 24px 22px; grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
}


/* NPX PRODUCTION BLOCK */
.npx-production{padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem);background:#f3eee5;color:#231d19;text-align:center;}
.npx-production__inner{max-width:760px;margin:0 auto;}
.npx-production__eyebrow{margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;}
.npx-production h2{margin:.1rem 0 1rem;font:inherit;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.25rem);line-height:1.05;}
.npx-production p{max-width:650px;margin:0 auto 1.5rem;line-height:1.7;}
.npx-production__button{display:inline-block;padding:.9rem 1.25rem;border:1px solid currentColor;color:inherit;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;}
.npx-production__button:hover,.npx-production__button:focus-visible{transform:translateY(-1px);}