/* ============ Reset & base ============ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--surface-bg);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--text-link); text-decoration:none; }
a:hover{ color:var(--text-link-hover); }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); color:var(--text-heading); font-weight:600; }
p{ margin:0; line-height:1.65; }
button{ font-family:inherit; }
input,textarea{ font-family:var(--font-body); }

::selection{ background:rgba(255,144,0,0.28); color:var(--ink); }

/* faint seam texture down the page, like a bound ledger */
.seam{
  position:fixed; inset:0 0 0 0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(31,51,33,0.02) 0px, rgba(31,51,33,0.02) 1px, transparent 1px, transparent 3px);
}

.on-dark{ color:rgba(247,236,225,0.7) !important; }
.on-linen{ color:var(--linen) !important; }
.on-linen-soft{ color:rgba(247,236,225,0.82) !important; }

/* ============ Type helpers ============ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--black-cherry);
}
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--black-cherry);
  margin-bottom:var(--space-8);
}
.display-1{
  font-size:clamp(2.4rem, 5vw, 3.7rem);
  line-height:1.03;
  letter-spacing:0.01em;
  text-wrap:pretty;
}
.display-1b{
  font-size:clamp(2.1rem, 4vw, 2.9rem);
  line-height:1.05;
}
.display-2{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  line-height:1.08;
}
.lede{
  font-size:1.18rem;
  line-height:1.6;
  color:var(--ink);
  max-width:460px;
}

/* ============ Nav ============ */
.site-nav{
  position:sticky; top:0; z-index:100;
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px;
  padding:16px clamp(20px,4vw,56px);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background-color:rgba(247,236,225,0.88);
  border-bottom:1px solid var(--border-subtle);
}
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand-badge{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:var(--evergreen); border-radius:6px; flex:0 0 auto;
}
.brand-name{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  letter-spacing:var(--tracking-wide); color:var(--evergreen); text-transform:uppercase;
}
.primary-nav{
  display:flex; flex-wrap:wrap; align-items:center; gap:22px; flex:1 1 auto; justify-content:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-wider); text-transform:uppercase;
}
.nav-link{
  padding-bottom:3px; border-bottom:1px solid transparent; color:var(--evergreen);
  transition:color .2s ease, border-color .2s ease;
}
.nav-link:hover{ color:var(--black-cherry); }
.nav-link.is-active{ color:var(--black-cherry); border-color:var(--saffron); }
.nav-cta{ flex:0 0 auto; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease;
  will-change:transform;
}
.btn-sm{ padding:6px 14px; font-size:0.68rem; }
.btn-md{ padding:10px 20px; font-size:0.75rem; }
.btn-lg{ padding:13px 28px; font-size:0.85rem; }
.btn-primary{ background:var(--evergreen); color:var(--linen); border-color:var(--evergreen); text-shadow:0 1px 3px rgba(0,0,0,0.45); }
.btn-primary:hover{ border-color:var(--saffron); color:var(--linen); }
.btn-secondary{ background:transparent; color:var(--black-cherry); border-color:var(--black-cherry); }
.btn-secondary:hover{ border-color:var(--saffron); color:var(--black-cherry); }
.btn-ghost{ background:transparent; color:var(--evergreen); border-color:transparent; }
.btn-ghost:hover{ color:var(--black-cherry); }
.btn-ghost.on-dark-ghost{ color:var(--linen); text-shadow:0 1px 3px rgba(0,0,0,0.45); }
.btn-ghost.on-dark-ghost:hover{ color:var(--saffron); }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn[hidden]{ display:none; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

.badge{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:var(--tracking-wider); text-transform:uppercase;
}
.badge-accent{ background:var(--saffron); color:var(--black-cherry-deep); }

/* ============ Layout shells ============ */
main{ position:relative; z-index:1; max-width:1440px; margin:0 auto; background:var(--linen); box-shadow:var(--shadow-lg); overflow:hidden; }
.page{ display:block; }
.page[hidden]{ display:none; }
.section{ padding:clamp(48px,8vw,80px) clamp(20px,4vw,56px); border-top:1px solid var(--border-subtle); }
.band-shade{ background:var(--linen-shade); }
.band-inverted{ background:var(--black-cherry); border-top:none; }

/* ============ Hero ============ */
.hero{ display:flex; flex-wrap:wrap; align-items:stretch; min-height:640px; }
.hero-copy{
  flex:1 1 480px; display:flex; flex-direction:column; justify-content:space-between; gap:44px;
  padding:clamp(48px,7vw,80px) clamp(20px,4vw,56px) 44px;
}
.hero-copy > *{ display:flex; flex-direction:column; gap:24px; }
.hero-copy .lede{ max-width:440px; }

.hero-art{
  flex:1 1 480px; min-height:520px; position:relative; background:var(--evergreen);
  display:flex; align-items:flex-end; justify-content:center; padding:34px; overflow:hidden;
}
.hero-photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.06); will-change:transform;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,34,24,0.05) 0%, rgba(20,34,24,0.55) 100%);
}
.hero-photo-caption{
  position:relative; align-self:flex-end; width:100%; display:flex; justify-content:flex-end;
  font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:rgba(247,236,225,0.78);
}
.hero-photo-caption .caption-chip{ display:flex; align-items:center; gap:8px; }
.hero-photo-caption .dot{ width:8px; height:8px; border-radius:50%; background:var(--saffron); flex:0 0 auto; }

.hero-art-dark{ background:var(--evergreen-deep); align-items:center; }
.hero-art-cherry{ background:var(--black-cherry); align-items:center; }

/* ============ Home: wide photo banner, always across the top ============ */
.hero-banner-top{ flex-direction:column; min-height:0; }
.hero-art.hero-art-banner{
  flex:0 0 auto; min-height:0;
  width:calc(100% - 2 * clamp(20px,4vw,56px));
  aspect-ratio:1.5 / 1; max-height:720px;
  margin:28px clamp(20px,4vw,56px) 0;
  background:var(--linen);
  box-shadow:var(--shadow-md);
}
/* the photo itself fades to transparent at its edges, revealing the linen
   container behind it — a true feather, not just a shadow over a hard edge.
   A single radial mask (no mask-composite) keeps this reliable cross-browser. */
.hero-art-banner .hero-photo{
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 45%, transparent 100%);
  mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 45%, transparent 100%);
}
#page-home .hero-copy{ max-width:640px; justify-content:flex-start; }
/* the feathered edge means this corner may show photo, linen, or a blend of
   both depending on viewport — a solid chip keeps the caption legible either way */
.hero-art-banner .hero-photo-caption .caption-chip{
  background:rgba(20,34,24,0.55); padding:6px 12px; border-radius:999px;
  backdrop-filter:blur(2px);
}

/* ============ Home: signup form ============ */
.signup-form{ gap:14px; max-width:400px; }
.field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-body); }
.field label{
  font-size:0.7rem; text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--evergreen); font-family:var(--font-mono);
}
.field input, .field textarea{
  font-family:var(--font-body); font-size:0.95rem; padding:12px 14px;
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  color:var(--ink); outline:none; transition:border-color .2s ease;
  width:100%;
}
.field input:focus, .field textarea:focus{ border-color:var(--saffron); }
.field textarea{ resize:vertical; font-size:1rem; line-height:1.55; }

.check-row{
  display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--ink-soft); cursor:pointer;
}
.check-row input{ margin-top:4px; accent-color:var(--evergreen); }

.signup-hint{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-soft); }
/* Omnisend renders its own form inside this container once the launcher
   script loads; this just keeps it from feeling cramped against the copy
   above while it's empty/loading. */
[id^="omnisend-embedded-"]{ min-height:8px; }

.form-note{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--evergreen); min-height:1em; opacity:0; transition:opacity .3s ease;
}
.form-note.is-visible{ opacity:1; }

.stat-row{ display:flex; flex-wrap:wrap; gap:14px; }
.stat-card{ flex:1 1 150px; min-width:140px; padding:16px 18px; background:var(--linen-shade); border-radius:var(--radius-md); }
.stat-figure{ font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--evergreen); }
.stat-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }

/* ============ Home: what arrives ============ */
.col-3{ display:flex; flex-wrap:wrap; gap:28px; }
.col-3 .col{ flex:1 1 260px; display:flex; flex-direction:column; gap:12px; }
.col-3 .col h3{ font-size:22px; }
.col-3 .col p{ font-size:17px; color:var(--ink); }
.dash-top{ padding-top:18px; border-top:1px dashed var(--border-dashed); }
.dash-top h4{ font-size:21px; margin-bottom:10px; }
.dash-top p{ font-size:16px; }

/* ============ Home: series band ============ */
.band-series{ display:flex; flex-wrap:wrap; align-items:center; gap:40px; padding:clamp(48px,7vw,64px) clamp(20px,4vw,56px); }
.series-copy{ flex:1 1 380px; }
.series-copy .display-2{ color:var(--linen); }
.series-copy p{ max-width:440px; }
.series-art{ flex:1 1 300px; min-height:260px; display:flex; }
.series-photo{
  position:relative; flex:1 1 auto; min-height:260px; border-radius:var(--radius-md); overflow:hidden;
  background-size:cover; background-position:center 20%; box-shadow:var(--shadow-md);
}

/* ============ Lore ============ */
.fact-list{ display:flex; flex-direction:column; gap:16px; }
.fact-row{ display:flex; gap:16px; align-items:baseline; padding-top:14px; border-top:1px dashed var(--border-dashed); }
.fact-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--black-cherry); flex:0 0 96px; }
.fact-body{ font-size:16px; line-height:1.55; color:var(--ink); flex:1 1 auto; }

.beacon-map{ text-align:center; }
.beacon-map svg{ width:100%; max-width:460px; height:auto; }
.beacon{ fill:rgba(247,236,225,0.22); transition:fill .3s ease; }
.beacon-lit{ fill:var(--saffron); filter:drop-shadow(0 0 8px rgba(255,144,0,0.9)); }
.beacon-caption{
  font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:rgba(247,236,225,0.6); margin-top:12px;
}

.col-4{ display:flex; flex-wrap:wrap; gap:0; }
.timeline-item{ flex:1 1 220px; border-left:1px solid var(--border-dashed); padding-left:22px; padding-right:24px; }
.timeline-year{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--black-cherry); }
.timeline-item p{ margin-top:8px; font-size:16px; line-height:1.55; color:var(--ink); }
.timeline-now{ border-left-color:rgba(255,144,0,0.9); }

.letter-one-grid{ display:flex; flex-wrap:wrap; gap:36px; }
.letter-one-copy{ flex:1 1 300px; display:flex; flex-direction:column; gap:16px; }
.letter-one-copy p{ max-width:340px; color:var(--ink); font-size:17px; }
.letter-one-copy .btn{ align-self:flex-start; }
.letter-card{
  flex:1 1 420px; background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:34px 36px; transform-origin:top center;
}
.letter-card-head{
  display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px;
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--ink-soft); margin-bottom:22px;
}
.letter-excerpt{ font-family:var(--font-body-italic); font-style:italic; font-size:19px; line-height:1.62; color:var(--ink); margin-bottom:16px; }
.letter-sig{ display:flex; align-items:center; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--border-subtle); font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--ink-soft); }
.dot{ display:block; width:10px; height:10px; border-radius:50%; background:var(--saffron); }

/* ============ About: desk illustration ============ */
.desk-scene{ width:100%; max-width:340px; }
.desk-scene svg{ width:100%; height:auto; }
.flame{ transform-origin:263px 249px; }
.flame-inner{ transform-origin:263px 249px; }

/* ============ Subscribe ============ */
.subscribe-grid{ display:flex; flex-wrap:wrap; align-items:stretch; min-height:660px; }
.subscribe-copy{ flex:1 1 520px; padding:clamp(44px,6vw,64px) clamp(20px,4vw,56px); display:flex; flex-direction:column; gap:34px; position:relative; }
.subscribe-copy > .eyebrow, .subscribe-copy > .display-1b{ margin:0; }

.step-tabs{ position:relative; display:flex; flex-wrap:wrap; gap:22px; font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.step-tab{
  background:none; border:none; padding:0 0 5px; color:var(--ink-soft); border-bottom:1px solid transparent;
  cursor:pointer; font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  transition:color .2s ease;
}
.step-tab.is-active{ color:var(--black-cherry); }
.step-tab-indicator{
  position:absolute; bottom:0; left:0; height:1px; width:40px; background:var(--saffron); pointer-events:none;
  transition:transform .3s ease, width .3s ease;
}

.step-panels{ position:relative; min-height:280px; }
.step-panel{ display:none; max-width:560px; }
.step-panel.is-active{ display:block; }
.step-panel-done{ display:none; flex-direction:column; align-items:flex-start; gap:14px; max-width:460px; }
.step-panel-done.is-active{ display:flex; }
.step-panel-done p{ color:var(--ink-soft); font-size:16px; }

.plan-list{ display:flex; flex-direction:column; gap:14px; }
.plan-row{
  cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px;
  padding:20px 22px; background:#fff; border:1px solid var(--border-dashed); border-radius:var(--radius-md);
  text-align:left; width:100%; transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.plan-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.plan-row.is-selected{ border-color:var(--saffron); border-width:1px; box-shadow:var(--shadow-sm); }
.plan-info{ display:flex; flex-direction:column; gap:5px; }
.plan-title-row{ display:flex; align-items:center; gap:10px; }
.plan-title{ font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--evergreen); }
.plan-desc{ font-size:15px; color:var(--ink-soft); }
.plan-price{ font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-normal); color:var(--black-cherry); white-space:nowrap; }

.delivery-form{ display:flex; flex-wrap:wrap; gap:20px; }
.field-full{ flex:1 1 100%; }
.field-half{ flex:1 1 240px; }
.field-third{ flex:1 1 200px; }
.field-quarter{ flex:1 1 120px; }
.form-fineprint{ margin:0; font-size:15px; line-height:1.55; color:var(--ink-soft); }

.seal-stamp{ width:96px; }
.seal-stamp svg{ width:100%; height:auto; filter:drop-shadow(0 6px 14px rgba(102,22,20,0.3)); }

.step-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.order-summary{
  flex:1 1 340px; padding:clamp(44px,6vw,64px) clamp(20px,4vw,56px); background:var(--evergreen);
  display:flex; flex-direction:column; gap:26px;
}
.order-plan{ display:flex; flex-direction:column; gap:14px; padding-bottom:22px; border-bottom:1px solid rgba(247,236,225,0.22); }
.order-plan-title{ font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--linen); }
.order-plan-note{ font-size:17px; line-height:1.55; color:rgba(247,236,225,0.82); }
.order-line{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:rgba(247,236,225,0.8); }
.order-total{
  display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; border-top:1px solid rgba(247,236,225,0.22);
}
.order-total span:first-child{ font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:rgba(247,236,225,0.8); }
.order-total span:last-child{ font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--saffron); }
.order-seal{ display:flex; justify-content:center; margin-top:8px; }
.order-seal svg{ width:140px; height:140px; }

/* ============ Contact ============ */
.contact-grid{ display:flex; flex-wrap:wrap; align-items:stretch; min-height:600px; }
.contact-copy{ flex:1 1 460px; padding:clamp(48px,7vw,76px) clamp(20px,4vw,56px); display:flex; flex-direction:column; gap:30px; }
.contact-form{ display:flex; flex-wrap:wrap; gap:18px; max-width:520px; }
.contact-side{ flex:1 1 340px; padding:clamp(48px,7vw,76px) clamp(20px,4vw,56px); background:var(--evergreen); display:flex; flex-direction:column; gap:30px; }
.contact-block{ display:flex; flex-direction:column; gap:8px; padding-bottom:22px; border-bottom:1px solid rgba(247,236,225,0.22); }
.contact-block-last{ border-bottom:none; padding-bottom:0; }
.contact-mail{ font-size:18px; }
.contact-mail:hover{ color:var(--saffron); }

/* ============ Footer ============ */
.site-footer{
  position:relative; z-index:1; max-width:1440px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding:30px clamp(20px,4vw,56px); background:var(--linen-shade); border-top:1px solid var(--border-subtle);
  font-family:var(--font-mono); font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--ink-soft);
}
.footer-links{ display:flex; gap:18px; }

/* ============ Reveal defaults (JS/GSAP controlled) ============ */
.reveal{ opacity:1; }
.js-anim-ready .reveal{ opacity:0; }

/* ============ Launch gating ============ */
/* Subscribe is real-money checkout UI, not live yet — only the waitlist
   signup (Omnisend, in the hero) is open. Every link to #subscribe carries
   this class. To reopen Subscribe later, delete this rule — nothing else
   needs to change, the page and its routing are untouched. */
.hidden-for-launch{ display:none; }

/* ============ Responsive ============ */
@media (max-width:860px){
  .primary-nav{ order:3; flex-basis:100%; justify-content:flex-start; gap:16px; }
  .hero-copy, .contact-copy, .contact-side, .subscribe-copy, .order-summary{ padding-left:20px; padding-right:20px; }
  .hero{ min-height:0; }
  .hero-art{ min-height:340px; order:-1; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js-anim-ready .reveal{ opacity:1; }
  .hero-photo{ transform:none; }
}