/* ==========================================================================
   Samriddhi Origins — "Terracotta Earth" theme, rebuilt as a seasonal
   scrollytelling journey: "A Year in Spice".

   The page is one continuous downward journey through the Indian spice
   year — Winter, Spring, Monsoon, Shipping — stitched together by a fixed
   season thread (progress line) on the left. The visual identity remains:
   linen and sand grounds, terracotta clay, olive and burnt sienna, arch
   image masks, Lora + Nunito Sans + Caveat handwriting.
   ========================================================================== */

:root {
  --linen: #f7f0e3;
  --linen-deep: #f1e6d2;
  --sand: #ecdec6;
  --clay: #c96f4a;
  --clay-deep: #a5502f;
  --sienna: #8a3f24;
  --olive: #6f7444;
  --olive-deep: #565b31;
  --brown: #43301f;
  --brown-soft: #77604b;
  --slate: #45524f;
  --slate-deep: #35413f;
  --paper: #fdf9f0;
  --line: rgba(138, 63, 36, 0.18);
  --font-display: "Lora", Georgia, serif;
  --font-script: "Caveat", cursive;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --radius-lg: 30px;
  --radius-md: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--linen);
  color: var(--brown);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--clay-deep); }

.container { width: min(1140px, 90%); margin: 0 auto; }

.script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 600;
  font-size: 1.28em;
  color: var(--clay);
}

/* ---------- Arch frames (doorway-shaped image masks) ---------- */

.arch {
  overflow: hidden;
  border-radius: 999px 999px var(--radius-md) var(--radius-md);
  background: var(--sand);
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.arch:hover img { transform: scale(1.04); }

/* Warm terracotta duotone for the shared studio product shots — sepia base
   plus a clay colour-wash so they sit inside the earthy palette. */
.duotone { position: relative; }

.duotone img {
  filter: sepia(0.55) saturate(1.3) hue-rotate(-12deg) brightness(1.05) contrast(0.97);
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, rgba(201, 111, 74, 0.34), rgba(138, 63, 36, 0.18) 55%, rgba(111, 116, 68, 0.2));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Gentler warming for the dark flatlay photographs. */
.warm-tone img { filter: sepia(0.28) saturate(1.2) brightness(1.08); }

/* ---------- Hand-drawn flourishes ---------- */

.hand-rule, .squiggle { color: var(--clay); }

.hand-rule { margin: 1.4rem 0 1.6rem; }

.centered-squiggle { display: flex; justify-content: center; margin: 0.4rem 0 0; }

.hand-caption {
  text-align: center;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--sienna);
  margin-top: 1rem;
}

.hand-caption.light { color: #f0dcc4; }

.field-note {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.35;
  color: var(--sienna);
  margin-bottom: 1rem;
}

.field-note.wide {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0.45rem 0;
  transition: background 0.35s, box-shadow 0.35s;
}

.site-header.scrolled {
  background: rgba(247, 240, 227, 0.93);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(67, 48, 31, 0.35);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }

.brand-emblem { height: 48px; width: auto; }

.brand-word { display: flex; flex-direction: column; line-height: 1; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--brown);
}

.brand-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--clay);
  margin-top: 0.05rem;
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; }

.site-nav a {
  color: var(--brown);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.site-nav a i {
  font-style: normal;
  font-family: var(--font-script);
  font-size: 1.05rem;
  color: var(--clay);
  margin-right: 0.2rem;
  text-transform: none;
  letter-spacing: 0;
}

.site-nav a:hover { color: var(--clay-deep); }

.nav-cta {
  background: var(--clay);
  color: var(--linen) !important;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(165, 80, 47, 0.7);
  transition: background 0.25s, transform 0.2s;
}

.nav-cta:hover { background: var(--clay-deep); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span { width: 26px; height: 2.5px; background: var(--brown); border-radius: 3px; }

/* ---------- Season thread (fixed progress line) ---------- */

.thread {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  height: min(58vh, 480px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.thread.on-journey { opacity: 1; pointer-events: auto; }

.thread-track {
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(138, 63, 36, 0.22);
  border-radius: 2px;
}

.thread-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--clay), var(--sienna));
  border-radius: 2px;
  transition: height 0.15s linear;
}

.thread-stop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.thread-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--sienna);
  background: var(--linen);
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}

.thread-name {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--brown-soft);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
}

.thread-stop:hover .thread-name { opacity: 1; transform: none; }

.thread-stop.active .thread-dot {
  background: var(--clay);
  border-color: var(--clay-deep);
  transform: scale(1.25);
}

.thread-stop.active .thread-name { opacity: 1; transform: none; color: var(--sienna); }

/* On the two dark chapters, lighten the thread so it stays visible. */
.thread.on-dark .thread-track { background: rgba(247, 240, 227, 0.3); }
.thread.on-dark .thread-dot { background: transparent; border-color: rgba(247, 240, 227, 0.7); }
.thread.on-dark .thread-stop.active .thread-dot { background: var(--clay); border-color: var(--clay); }
.thread.on-dark .thread-name { color: rgba(247, 240, 227, 0.75); }
.thread.on-dark .thread-stop.active .thread-name { color: #f0dcc4; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.18s, background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.btn:hover { transform: translateY(-2px); }

.btn-clay {
  background: var(--clay);
  color: #fdf6ec;
  box-shadow: 0 12px 24px -12px rgba(165, 80, 47, 0.8);
}

.btn-clay:hover { background: var(--clay-deep); }

.btn-outline { border: 2px solid rgba(111, 116, 68, 0.55); color: var(--olive-deep); }

.btn-outline:hover { border-color: var(--olive-deep); background: rgba(111, 116, 68, 0.1); }

.link-download {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.8rem;
  border: 2px dashed rgba(165, 80, 47, 0.55);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-deep);
  text-decoration: none;
  background: rgba(201, 111, 74, 0.07);
  transition: background 0.25s, color 0.25s, transform 0.18s, border-color 0.25s;
}

.link-download:hover {
  background: var(--clay);
  border-color: var(--clay);
  color: #fdf6ec;
  transform: translateY(-2px);
}

/* ---------- Prologue ---------- */

.prologue {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 7.5rem 0 6rem;
  background:
    radial-gradient(ellipse at 85% 8%, rgba(201, 111, 74, 0.16), transparent 55%),
    radial-gradient(ellipse at 5% 90%, rgba(111, 116, 68, 0.14), transparent 55%),
    var(--linen);
}

.prologue-inner {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 3.5rem;
  align-items: center;
}

.prologue-kicker {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--olive-deep);
  margin-bottom: 1.4rem;
}

.prologue-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.4rem, 7.5vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brown);
}

.prologue-script {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 0.62em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--clay);
  transform: rotate(-2deg);
  margin-bottom: 0.2rem;
}

.prologue-lede {
  font-size: 1.1rem;
  color: var(--brown-soft);
  max-width: 560px;
  margin-bottom: 2.2rem;
}

.prologue-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }

.prologue-belief {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 2px dashed rgba(138, 63, 36, 0.28);
  max-width: 540px;
  font-size: 0.95rem;
  color: var(--brown-soft);
}

.prologue-belief strong { color: var(--clay-deep); font-weight: 800; }

.prologue-figure { position: relative; margin: 0 auto; width: min(100%, 380px); }

.arch-prologue {
  aspect-ratio: 4 / 5.4;
  border: 10px solid var(--paper);
  box-shadow: 0 30px 60px -30px rgba(138, 63, 36, 0.5);
}

.arch-prologue-mini {
  position: absolute;
  left: -34px;
  bottom: -26px;
  width: 44%;
  aspect-ratio: 1 / 1.2;
  border: 7px solid var(--paper);
  border-radius: 999px 999px 14px 14px;
  transform: rotate(-5deg);
  box-shadow: 0 22px 38px -22px rgba(67, 48, 31, 0.6);
}

.prologue-stamp {
  position: absolute;
  right: -24px;
  top: 30px;
  width: 122px; height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.15;
  color: var(--linen);
  background: var(--olive);
  border-radius: 54% 46% 50% 50% / 48% 52% 48% 52%;
  transform: rotate(7deg);
  box-shadow: 0 16px 30px -16px rgba(86, 91, 49, 0.8);
}

.prologue-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.prologue-scroll-line {
  width: 2px;
  height: 46px;
  background: linear-gradient(180deg, transparent, var(--clay));
  animation: unspool 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes unspool {
  0% { transform: scaleY(0.3); opacity: 0.4; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.prologue-scroll-word {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--sienna);
}

/* ---------- Chapters (shared) ---------- */

.chapter { position: relative; padding: 0 0 6rem; }

.chapter-head { padding: 6.5rem 0 3.5rem; text-align: center; }

.chapter-connector {
  display: block;
  width: 2px;
  height: 72px;
  margin: 0 auto 1.6rem;
  background-image: linear-gradient(180deg, currentColor 55%, transparent 55%);
  background-size: 2px 9px;
  color: rgba(138, 63, 36, 0.5);
}

.chapter-number {
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--olive-deep);
}

.chapter-season {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 1;
  color: var(--sienna);
  margin: 0.4rem 0 0.3rem;
}

.chapter-months {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--brown-soft);
  border-top: 2px dashed rgba(138, 63, 36, 0.32);
  border-bottom: 2px dashed rgba(138, 63, 36, 0.32);
  padding: 0.35rem 1.6rem;
  margin-bottom: 1.6rem;
}

.chapter-lede {
  max-width: 640px;
  margin: 0 auto;
  color: var(--brown-soft);
}

/* Per-season earthy ground shifts: sand, warm clay, deep olive, sea slate. */

.chapter-winter { background: linear-gradient(180deg, var(--linen), var(--sand) 14%, var(--sand) 88%, #e8d3b4); }

.chapter-spring { background: linear-gradient(180deg, #e8d3b4, #e3c3a6 16%, #e3c3a6 88%, #d9b494); }

.chapter-spring .chapter-connector { color: rgba(138, 63, 36, 0.55); }

.chapter-monsoon {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(201, 111, 74, 0.22), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(36, 26, 17, 0.5), transparent 60%),
    var(--olive-deep);
  color: #f1ead7;
}

.chapter-monsoon .chapter-connector { color: rgba(241, 234, 215, 0.5); }
.chapter-monsoon .chapter-number { color: #d9cf9f; }
.chapter-monsoon .chapter-season { color: #f0dcc4; }
.chapter-monsoon .chapter-months {
  color: #e5dcc2;
  border-color: rgba(241, 234, 215, 0.35);
}
.chapter-monsoon .chapter-lede { color: rgba(241, 234, 215, 0.85); }

.chapter-shipping {
  background:
    radial-gradient(ellipse at 80% 6%, rgba(201, 111, 74, 0.18), transparent 55%),
    radial-gradient(ellipse at 8% 95%, rgba(20, 28, 27, 0.55), transparent 60%),
    var(--slate);
  color: #eef0e6;
}

.chapter-shipping .chapter-connector { color: rgba(238, 240, 230, 0.45); }
.chapter-shipping .chapter-number { color: #c9d0b8; }
.chapter-shipping .chapter-season { color: #f0dcc4; }
.chapter-shipping .chapter-months {
  color: #dfe2d2;
  border-color: rgba(238, 240, 230, 0.3);
}
.chapter-shipping .chapter-lede { color: rgba(238, 240, 230, 0.85); }

/* ---------- Scenes (chapter-opening photograph + field note) ---------- */

.scene {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 4.5rem;
}

.scene-figure { width: min(100%, 400px); margin: 0 auto; }

.arch-scene {
  aspect-ratio: 4 / 4.9;
  border: 10px solid var(--paper);
  box-shadow: 0 30px 55px -30px rgba(67, 48, 31, 0.55);
}

.scene-note p:not(.field-note) { color: var(--brown-soft); max-width: 52ch; }

.chapter-monsoon .scene-note p:not(.field-note) { color: rgba(241, 234, 215, 0.85); }
.chapter-monsoon .field-note { color: #f0dcc4; }
.chapter-monsoon .hand-caption { color: #e5dcc2; }
.chapter-monsoon .arch-scene { border-color: rgba(253, 249, 240, 0.25); }

/* ---------- Product entries (a spice introduced inside its season) ---------- */

.entry { padding: 2.6rem 0; }

.entry-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 3.2rem;
  align-items: center;
  background: rgba(253, 249, 240, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.8rem 3rem;
  box-shadow: 0 30px 55px -38px rgba(67, 48, 31, 0.55);
  width: min(1140px, 90%);
}

.entry-flip .entry-media { order: 2; }
.entry-flip .entry-body { order: 1; }

.entry-media { width: min(100%, 330px); margin: 0 auto; }

.arch-entry {
  aspect-ratio: 4 / 5;
  border: 9px solid rgba(253, 249, 240, 0.95);
  box-shadow: 0 26px 45px -26px rgba(67, 48, 31, 0.55);
}

.entry-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 0.5rem;
}

.entry-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--brown);
}

.botanical {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--olive-deep);
  margin: 0.3rem 0 1rem;
}

.entry-desc { color: var(--brown-soft); margin-bottom: 1.3rem; max-width: 52ch; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }

.chips span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sienna);
  background: rgba(253, 249, 240, 0.75);
  border: 1px solid rgba(138, 63, 36, 0.25);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}

.chips-slate span {
  color: #fdf6ec;
  background: var(--clay);
  border-color: var(--clay);
}

.spec-table { border-top: 2px dashed rgba(138, 63, 36, 0.28); }

.spec-table > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 1.4rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(138, 63, 36, 0.2);
}

.spec-table dt {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown-soft);
}

.spec-table dd {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--sienna);
}

.chapter-turn { padding-top: 3rem; }

/* ---------- Monsoon: the quality season ---------- */

.quality-work {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  margin-bottom: 4rem;
}

.work-card {
  background: rgba(253, 249, 240, 0.08);
  border: 1px solid rgba(241, 234, 215, 0.25);
  border-radius: 999px 999px var(--radius-md) var(--radius-md);
  padding: 2.2rem 1.5rem 1.7rem;
  text-align: center;
  backdrop-filter: blur(2px);
}

.work-num {
  display: block;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.7rem;
  color: #f0c9a8;
}

.work-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fbf5e8;
  margin: 0.2rem 0 0.5rem;
}

.work-card p { font-size: 0.9rem; color: rgba(241, 234, 215, 0.8); }

.monsoon-close {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 3rem;
  align-items: center;
}

.monsoon-mortar { width: min(100%, 260px); margin: 0 auto; }

.arch-mortar {
  aspect-ratio: 4 / 4.7;
  border: 8px solid rgba(253, 249, 240, 0.25);
  box-shadow: 0 22px 38px -22px rgba(36, 26, 17, 0.6);
  transform: rotate(-2deg);
}

.medallions { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }

.medallion {
  width: 138px;
  height: 148px;
  border: 2px solid rgba(251, 245, 232, 0.4);
  border-radius: 999px 999px 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: rgba(251, 245, 232, 0.1);
  backdrop-filter: blur(2px);
}

.medallion b {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fbf5e8;
  letter-spacing: 0.05em;
}

.medallion span {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8dbb9;
  max-width: 105px;
  text-align: center;
}

/* ---------- Shipping season ---------- */

.shipping-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

.shipping-subhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: #f0dcc4;
  margin: 1.8rem 0 0.7rem;
}

.shipping-subhead:first-child { margin-top: 0; }

.shipping-copy p { color: rgba(238, 240, 230, 0.85); max-width: 54ch; }

.feature-list { list-style: none; }

.feature-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 2rem;
  color: rgba(238, 240, 230, 0.85);
}

.feature-list li::before {
  content: "❋";
  position: absolute;
  left: 0;
  top: 0.45rem;
  color: #f0c9a8;
  font-size: 0.95rem;
}

.incoterms-label {
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9d0b8 !important;
}

.shipping-figure { width: min(100%, 380px); margin: 0 auto; }

.arch-shipping {
  aspect-ratio: 4 / 4.8;
  border: 10px solid rgba(253, 249, 240, 0.22);
  box-shadow: 0 30px 55px -30px rgba(20, 28, 27, 0.8);
}

/* ---------- Epilogue ---------- */

.epilogue { background: var(--linen); }

.section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--olive-deep);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.3vw, 3rem);
  line-height: 1.16;
  color: var(--brown);
  margin-bottom: 1.2rem;
}

.centered { text-align: center; }

/* Fireside video: a warm dark hearth between the slate chapter and linen. */
.fireside {
  padding: 6.5rem 0;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(201, 111, 74, 0.45), transparent 62%),
    #372718;
}

.fireside .section-kicker { color: #d8b48c; }
.fireside .section-title { color: #fbf1e0; }
.fireside .script { color: #f0c9a8; }

.fireside-lede {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: rgba(251, 241, 224, 0.8);
}

.fireside-player {
  max-width: 880px;
  margin: 2.6rem auto 0;
  padding: 11px;
  background: linear-gradient(150deg, rgba(253, 249, 240, 0.18), rgba(201, 111, 74, 0.25));
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.6);
}

.fireside-player video {
  width: 100%;
  display: block;
  border-radius: calc(var(--radius-lg) - 9px);
  background: #241a11;
}

/* Veranda FAQ */
.veranda { padding: 6rem 0 5rem; }

.veranda-container { max-width: 800px; }

.faq {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-top: 1rem;
  padding: 0 1.6rem;
  box-shadow: 0 16px 28px -24px rgba(138, 63, 36, 0.4);
  transition: box-shadow 0.25s;
}

.faq:first-of-type { margin-top: 2.6rem; }

.faq[open] { box-shadow: 0 22px 34px -22px rgba(138, 63, 36, 0.5); }

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0.2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--brown);
  transition: color 0.2s;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.4rem;
  color: #fdf6ec;
  background: var(--clay);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.25s, background 0.25s;
}

.faq[open] summary::after { transform: rotate(45deg); background: var(--olive); }

.faq summary:hover { color: var(--clay-deep); }

.faq p { padding: 0 0.2rem 1.5rem; color: var(--brown-soft); max-width: 64ch; }

/* Handwritten invitation (contact) */
.invitation {
  padding: 3rem 0 7rem;
  background: linear-gradient(180deg, var(--linen), var(--linen-deep));
}

.letter {
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3.4rem 3.6rem 3rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 34px 55px -34px rgba(67, 48, 31, 0.55);
  transform: rotate(-0.6deg);
  position: relative;
}

.letter::before,
.letter::after {
  content: "";
  position: absolute;
  width: 96px;
  height: 26px;
  background: rgba(201, 111, 74, 0.28);
  transform: rotate(-4deg);
  top: -12px;
  left: 10%;
}

.letter::after { left: auto; right: 10%; transform: rotate(3deg); }

.letter-emblem { height: 62px; margin-bottom: 1.4rem; }

.letter-greeting {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 2.2rem;
  color: var(--sienna);
  margin-bottom: 0.8rem;
}

.letter-body { color: var(--brown-soft); max-width: 58ch; margin-bottom: 2rem; }

.letter-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  border-top: 2px dashed rgba(138, 63, 36, 0.28);
  border-bottom: 2px dashed rgba(138, 63, 36, 0.28);
  padding: 1.6rem 0;
  margin-bottom: 2rem;
}

.letter-details h3 {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--clay-deep);
  margin-bottom: 0.4rem;
}

.letter-details p { font-size: 0.92rem; color: var(--brown-soft); }

.letter-details a { color: var(--brown); text-decoration: none; }

.letter-details a:hover { color: var(--clay-deep); }

.break-word { word-break: break-all; }

.letter-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.letter-signoff {
  margin-top: 2.2rem;
  color: var(--brown-soft);
  font-size: 0.95rem;
}

.letter-signature {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--sienna);
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 4rem 0 3rem;
  text-align: center;
  background: var(--brown);
  color: #e6d8c4;
  border-radius: 60px 60px 0 0;
}

.footer-emblem { height: 72px; margin: 0 auto 1rem; }

.footer-brand .brand-name { font-size: 1.4rem; color: #fbf5e8; }

.footer-brand .brand-script { font-size: 1.8rem; margin-left: 0.4rem; color: #e8a887; }

.footer-tagline {
  margin-top: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  font-size: 0.7rem;
  font-weight: 800;
  color: #b9c08a;
}

.footer-copy { margin-top: 1.6rem; font-size: 0.8rem; color: rgba(230, 216, 196, 0.75); }

.footer-credit { margin-top: 0.9rem; font-size: 0.7rem; color: rgba(230, 216, 196, 0.45); }

/* ---------- Reveal ---------- */

/* Reveal-on-scroll is scoped to html.js (set by main.js) so that with
   JavaScript disabled every element stays fully visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.visible { opacity: 1; transform: none; }

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

/* ---------- Responsive ---------- */

@media (max-width: 1240px) {
  .thread { display: none; }
}

@media (max-width: 980px) {
  .prologue { padding-top: 7rem; min-height: 0; }

  .prologue-inner { grid-template-columns: 1fr; gap: 3.2rem; }

  .prologue-figure { width: min(74%, 330px); }

  .prologue-scroll { display: none; }

  .site-nav { gap: 1rem; }

  .site-nav a { font-size: 0.72rem; }

  .scene, .shipping-grid, .monsoon-close { grid-template-columns: 1fr; gap: 2.6rem; }

  .scene-figure { width: min(76%, 360px); }

  .entry-grid { grid-template-columns: 1fr; gap: 2.2rem; padding: 2.3rem 1.8rem; }

  .entry-flip .entry-media { order: 1; }
  .entry-flip .entry-body { order: 2; }

  .entry-media { width: min(76%, 300px); }

  .quality-work { grid-template-columns: 1fr 1fr; }

  .shipping-figure { order: -1; width: min(74%, 330px); }

  .letter { padding: 2.6rem 2.2rem 2.4rem; }

  .letter-details { grid-template-columns: 1fr; gap: 1.2rem; }
}

@media (max-width: 700px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(247, 240, 227, 0.98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 34px -24px rgba(67, 48, 31, 0.4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 0.6rem 5% 1.2rem;
  }

  .site-nav.open { display: flex; }

  .site-nav a { padding: 0.8rem 0; width: 100%; font-size: 0.8rem; }

  .nav-cta {
    background: none;
    box-shadow: none;
    color: var(--clay-deep) !important;
    padding: 0.8rem 0;
    border-radius: 0;
  }

  .nav-cta:hover { background: none; transform: none; }

  .prologue-stamp { right: -10px; width: 100px; height: 100px; font-size: 1.05rem; }

  .arch-prologue-mini { left: -14px; }

  .chapter-head { padding-top: 5rem; }

  .chapter-connector { height: 48px; }

  .quality-work { grid-template-columns: 1fr; }

  .medallion { width: 118px; height: 128px; }

  .spec-table > div { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.6rem 0; }

  .faq summary { font-size: 1.05rem; }

  .site-footer { border-radius: 34px 34px 0 0; }

  .letter { transform: none; }

  .letter-actions .btn, .letter-actions .link-download { width: 100%; justify-content: center; text-align: center; }
}