/* The Invisible Wealth - Homepage (UX-hardened)
 Story arc: Recognition → Curiosity → Promise → Proof → Action
 Brand: Ivory #F4EFE6 · Forest #104420 · Gold #B58A47 · Snow #FAFAFA
*/

:root {
 --ivory: #f4efe6;
 --ivory-soft: #fbfaf2;
 --ivory-deep: #ebe4d8;
 --charcoal: #1c1a18;
 --charcoal-soft: #2c2824;
 --forest: #104420;
 --forest-soft: #163d24;
 --gold: #b58a47;
 --gold-deep: #9a7339;
 --gold-btn: #c49a52;
 --earth: #6c5143;
 --olive: #5e6554;
 --white: #fafafa;
 --line: rgba(28, 26, 24, 0.09);
 --line-mid: rgba(28, 26, 24, 0.14);
 --shadow: 0 28px 64px rgba(28, 26, 24, 0.11);
 --max: 1360px;
 --gutter: 40px;
 /* Same left/right edge as other sections (max-width + 40px pad) */
 --content-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
 --header-h: 72px;
 --radius: 14px;
 --focus: 0 0 0 3px rgba(181, 138, 71, 0.35);
 --ease: cubic-bezier(0.22, 1, 0.36, 1);
 /* Type: Cormorant SemiBold for editorial headings; Inter for UI */
 --font-display: "Cormorant Garamond", Georgia, serif;
 --font-body: Inter, system-ui, -apple-system, sans-serif;
 --weight-display: 600;
 --lh-display: 1;
}

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

html {
 scroll-behavior: smooth;
 scroll-padding-top: calc(var(--header-h) + 36px);
}

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}

body {
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.6;
 color: var(--charcoal);
 background: var(--ivory);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

body.nav-open {
 overflow: hidden;
}

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

a {
 color: inherit;
 text-decoration: none;
}

button {
 font: inherit;
 color: inherit;
 background: none;
 border: none;
 cursor: pointer;
}

:focus-visible {
 outline: none;
 box-shadow: var(--focus);
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}

.skip-link {
 position: absolute;
 left: 12px;
 top: -48px;
 z-index: 100;
 background: var(--forest);
 color: var(--ivory);
 padding: 10px 14px;
 border-radius: 8px;
 font-size: 13px;
 font-weight: 600;
}

.skip-link:focus {
 top: 12px;
}

/* --- Launch bar --- */
.launch-bar {
 background: var(--forest);
 color: var(--ivory);
 text-align: center;
 padding: 9px 16px;
 font-size: 12.5px;
}

.launch-bar p {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 10px;
 justify-content: center;
 align-items: center;
}

.launch-bar strong {
 font-weight: 600;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 font-size: 11px;
 color: var(--gold-btn);
}

.launch-bar a {
 color: var(--ivory);
 border-bottom: 1px solid rgba(244, 239, 230, 0.35);
 font-weight: 600;
}

.launch-bar a:hover {
 border-bottom-color: var(--gold-btn);
 color: var(--gold-btn);
}

.sep {
 opacity: 0.45;
}

/* --- Header --- */
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(244, 239, 230, 0.94);
 backdrop-filter: blur(14px);
 border-bottom: 1px solid var(--line);
}

.header-inner {
 max-width: var(--max);
 margin: 0 auto;
 min-height: var(--header-h);
 padding: 0 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.logo-img {
  display: block;
  /* Compact nav mark — large enough to read, does not inflate the bar */
  height: 48px;
  width: auto;
  max-width: min(200px, 52vw);
  object-fit: contain;
}

.site-footer .logo-img {
  height: 56px;
  max-width: min(240px, 72vw);
}

.nav {
 display: flex;
 align-items: center;
 gap: 22px;
}

.nav a {
 font-size: 13px;
 font-weight: 500;
 color: var(--charcoal-soft);
 opacity: 0.75;
 padding: 6px 0;
 border-bottom: 1.5px solid transparent;
 transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}

.nav a:hover,
.nav a.is-active {
 opacity: 1;
 border-bottom-color: var(--gold);
}

.header-actions {
 display: flex;
 align-items: center;
 gap: 10px;
}

.menu-toggle {
 display: none;
 width: 42px;
 height: 42px;
 border-radius: 10px;
 border: 1px solid var(--line-mid);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}

.menu-toggle span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--charcoal);
 transition: transform 0.25s var(--ease);
}

.menu-toggle[aria-expanded="true"] span:first-child {
 transform: translateY(3.25px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
 transform: translateY(-3.25px) rotate(-45deg);
}

.mobile-nav {
 display: none;
 padding: 8px 40px 24px;
 border-top: 1px solid var(--line);
 background: var(--ivory);
}

.mobile-nav:not([hidden]) {
 display: block;
}

.mobile-nav nav {
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin-bottom: 16px;
}

.mobile-nav nav a {
 padding: 12px 0;
 font-size: 16px;
 font-weight: 500;
 border-bottom: 1px solid var(--line);
}

/* --- Buttons (very subtle 3D) --- */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 font-family: var(--font-body);
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.05em;
 text-transform: uppercase;
 padding: 13px 22px;
 border-radius: 999px;
 border: 1.5px solid transparent;
 cursor: pointer;
 position: relative;
 white-space: nowrap;
 transition:
 background 0.2s var(--ease),
 border-color 0.2s var(--ease),
 transform 0.15s var(--ease),
 box-shadow 0.2s var(--ease);
 transform: translateY(0);
}

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

.btn:active {
 transform: translateY(0);
}

.btn-sm {
 padding: 10px 16px;
 font-size: 11px;
}

.btn-gold {
 color: #fff;
 border-color: var(--gold-btn);
 background:
 linear-gradient(180deg, #cba45c 0%, var(--gold-btn) 55%, #b58a47 100%);
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.22),
 0 4px 12px rgba(181, 138, 71, 0.18);
}

.btn-gold:hover {
 background:
 linear-gradient(180deg, #d0aa62 0%, var(--gold-deep) 100%);
 border-color: var(--gold-deep);
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.26),
 0 6px 16px rgba(181, 138, 71, 0.22);
}

.btn-gold:active {
 box-shadow:
 inset 0 1px 2px rgba(90, 60, 20, 0.16),
 0 2px 6px rgba(181, 138, 71, 0.14);
}

.btn-ghost {
 color: var(--charcoal);
 border-color: rgba(28, 26, 24, 0.16);
 background:
 linear-gradient(180deg, rgba(255, 252, 247, 0.9) 0%, rgba(244, 239, 230, 0.65) 100%);
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.55),
 0 3px 10px rgba(28, 26, 24, 0.05);
}

.btn-ghost:hover {
 border-color: rgba(28, 26, 24, 0.28);
 background:
 linear-gradient(180deg, #fffcf7 0%, rgba(244, 239, 230, 0.85) 100%);
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.7),
 0 5px 14px rgba(28, 26, 24, 0.07);
}

.btn-ghost:active {
 box-shadow:
 inset 0 1px 2px rgba(28, 26, 24, 0.06),
 0 1px 4px rgba(28, 26, 24, 0.04);
}

.btn-outline-gold {
 color: var(--gold-deep);
 border-color: rgba(181, 138, 71, 0.5);
 background:
 linear-gradient(180deg, rgba(255, 252, 247, 0.75) 0%, rgba(244, 239, 230, 0.4) 100%);
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.5),
 0 3px 10px rgba(181, 138, 71, 0.08);
}

.btn-outline-gold:hover {
 border-color: var(--gold);
 background:
 linear-gradient(180deg, rgba(255, 252, 247, 0.9) 0%, rgba(244, 230, 200, 0.28) 100%);
 box-shadow:
 inset 0 1px 0 rgba(255, 255, 255, 0.6),
 0 5px 14px rgba(181, 138, 71, 0.1);
}

.btn-outline-gold:active {
 box-shadow:
 inset 0 1px 2px rgba(120, 85, 35, 0.08),
 0 1px 4px rgba(181, 138, 71, 0.06);
}

.btn-block {
 width: 100%;
}

@media (prefers-reduced-motion: reduce) {
 .btn,
 .btn:hover,
 .btn:active {
 transform: none;
 }
}

.play-icon {
 display: inline-flex;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 border: 1px solid currentColor;
 align-items: center;
 justify-content: center;
 opacity: 0.85;
}

.text-link {
 font-size: 14px;
 font-weight: 600;
 color: var(--gold-deep);
 border-bottom: 1px solid rgba(181, 138, 71, 0.35);
 padding-bottom: 2px;
 transition: border-color 0.2s;
}

.text-link:hover {
 border-bottom-color: var(--gold);
}

.eyebrow {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 12px;
}

.eyebrow.light {
 color: rgba(244, 239, 230, 0.72);
}

/* --- Hero --- */
.hero {
 position: relative;
 min-height: min(88vh, 820px);
 display: flex;
 flex-direction: column;
 justify-content: center;
 overflow: hidden;
 background: #e8d9c4;
}

.hero-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 /* Full hero image - no scrim/overlay */
 background: url("assets/hero-book-lifestyle.jpg") 62% center / cover no-repeat;
 background-color: #e8d9c4;
}

.hero-bg::after {
 display: none;
}

.hero-inner {
 position: relative;
 z-index: 1;
 max-width: var(--max);
 margin: 0 auto;
 width: 100%;
 padding: 72px 40px 80px;
 display: block;
}

.hero-copy {
 min-width: 0;
 max-width: 40rem;
 padding-right: 32px;
}

.kicker {
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--earth);
 margin-bottom: 20px;
}

.hero-verb {
 font-family: var(--font-body);
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--gold);
 margin: 0 0 14px;
}

.hero-copy h1 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(52px, 4.6vw, 66px);
 line-height: 0.98;
 letter-spacing: -0.015em;
 color: var(--charcoal);
 margin-bottom: 18px;
 max-width: none;
}

.hero-copy h1 .hero-title-main,
.hero-copy h1 .hero-title-sub {
 display: block;
 font-style: normal;
}

.lede {
 font-size: 17px;
 line-height: 1.65;
 color: var(--earth);
 margin-bottom: 12px;
 max-width: 44ch;
}

.hero-promise {
 font-size: 16px;
 line-height: 1.65;
 color: var(--earth);
 margin: 0 0 16px;
 max-width: 44ch;
}

.hero-tagline {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(18px, 1.8vw, 22px);
 line-height: 1.25;
 color: var(--olive);
 margin: 0 0 28px;
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 align-items: center;
 margin-bottom: 28px;
}

.hero-trust {
 font-size: 13px;
 color: var(--olive);
 display: flex;
 flex-wrap: wrap;
 gap: 8px 12px;
 letter-spacing: 0.01em;
 align-items: center;
}

.hero-community {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 color: var(--charcoal);
}

.hero-community-faces {
 display: flex;
 align-items: center;
}

.hero-community-faces img {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 object-fit: cover;
 object-position: center 20%;
 border: 2px solid rgba(255, 252, 247, 0.95);
 margin-left: -10px;
 box-shadow: 0 2px 8px rgba(28, 26, 24, 0.12);
}

.hero-community-faces img:first-child {
 margin-left: 0;
}

.hero-community-copy {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.01em;
 border-bottom: 1px solid rgba(181, 138, 71, 0.45);
 padding-bottom: 1px;
}

.hero-community:hover .hero-community-copy {
 border-bottom-color: var(--gold);
 color: var(--gold-deep);
}

/* Separator dots 50% larger than surrounding trust text */
.hero-trust .sep {
 font-size: 1.5em;
 line-height: 1;
 opacity: 0.5;
}

/* Shared book product treatment (order section) */
.pedestal-wrap {
 position: relative;
 width: min(100%, 420px);
 display: flex;
 flex-direction: column;
 align-items: center;
}

.book-hero {
 width: min(100%, 360px);
 height: auto;
 position: relative;
 z-index: 2;
 filter: drop-shadow(0 32px 56px rgba(28, 26, 24, 0.36));
 transform: perspective(900px) rotateY(-5deg) rotateX(2deg);
 aspect-ratio: 3 / 4;
 object-fit: contain;
}

.pedestal {
 width: 88%;
 height: 26px;
 margin-top: -6px;
 border-radius: 50%;
 background: radial-gradient(ellipse at 50% 30%, #f5efe4, #d4c4a8 55%, #b8a48a);
 box-shadow: 0 10px 28px rgba(28, 26, 24, 0.16), inset 0 2px 4px rgba(255, 255, 255, 0.4);
 z-index: 1;
}

.pedestal--light {
 background: radial-gradient(ellipse at 50% 30%, #faf6ee, #e2d5bc 55%, #cbb99a);
}

/* --- Recognition (curiosity beat) --- */
.recognition {
 padding: 56px 40px;
 background: var(--white);
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 text-align: center;
}

.recognition-inner {
 max-width: 760px;
 margin: 0 auto;
}

.recognition h2 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(42px, 3.8vw, 52px);
 line-height: var(--lh-display);
 margin-bottom: 16px;
 color: var(--charcoal);
}

.recognition-body {
 font-size: 15.5px;
 color: var(--earth);
 line-height: 1.65;
}

.recognition-actions {
 display: flex;
 justify-content: center;
 margin-top: 24px;
}

/* --- Journey (promise) --- */
.journey {
 padding: 64px 40px;
 background: var(--ivory-soft);
}

.journey-list {
 max-width: var(--max);
 margin: 0 auto;
 list-style: none;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
}

.journey-item {
 padding: 12px 22px 8px;
 border-right: 1px solid var(--line);
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.journey-item:last-child {
 border-right: none;
}

.journey-icon {
 width: 72px;
 height: 72px;
 color: var(--gold);
 margin: 0 auto 18px;
}

.journey-icon svg {
 width: 100%;
 height: 100%;
 stroke-width: 1.35;
}

.journey-item h3 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: 28px;
 line-height: var(--lh-display);
 margin-bottom: 8px;
 text-align: center;
}

.journey-item p {
 font-size: 13.5px;
 line-height: 1.55;
 color: var(--earth);
 max-width: 28ch;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

/* --- About book --- */
.about-book {
 position: relative;
 padding: 88px 40px;
 background: var(--ivory);
 overflow: hidden;
}

/* Blurred atmosphere bleeding in from the right edge */
.about-book-edge-blur {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 width: min(48vw, 560px);
 z-index: 0;
 pointer-events: none;
 background:
 url("assets/quote-bg-room-blur.jpg") right center / cover no-repeat;
 opacity: 0.55;
 /* Fade out as it enters the section - solid left, soft blur at right edge */
 -webkit-mask-image: linear-gradient(
 to left,
 #000 0%,
 rgba(0, 0, 0, 0.85) 18%,
 rgba(0, 0, 0, 0.45) 48%,
 rgba(0, 0, 0, 0.12) 72%,
 transparent 100%
 );
 mask-image: linear-gradient(
 to left,
 #000 0%,
 rgba(0, 0, 0, 0.85) 18%,
 rgba(0, 0, 0, 0.45) 48%,
 rgba(0, 0, 0, 0.12) 72%,
 transparent 100%
 );
}

/* Soft gold wash over the blur so it stays brand-warm */
.about-book-edge-blur::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
 to left,
 rgba(244, 239, 230, 0.15) 0%,
 rgba(196, 154, 82, 0.12) 35%,
 transparent 100%
 );
}

/* Thin vertical rule flush to the far right edge */
.about-book::after,
.order::after {
 content: "";
 position: absolute;
 top: 10%;
 bottom: 10%;
 right: 0;
 z-index: 2;
 width: 1px;
 background: linear-gradient(
 to bottom,
 transparent 0%,
 rgba(181, 138, 71, 0.18) 12%,
 rgba(181, 138, 71, 0.55) 50%,
 rgba(181, 138, 71, 0.18) 88%,
 transparent 100%
 );
 pointer-events: none;
}

.about-book-inner {
 position: relative;
 z-index: 1;
 max-width: var(--max);
 margin: 0 auto;
 display: grid;
 /* Portrait + copy: balanced columns, room for face and book */
 grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
 gap: 40px 48px;
 align-items: center;
}

.about-photo {
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: var(--shadow);
 border: 1px solid var(--line);
 /* Source is ~4:5 (1122×1402) - keep full portrait without cropping face/book */
 aspect-ratio: 4 / 5;
 max-width: 480px;
 width: 100%;
 margin: 0;
 justify-self: start;
}

.about-photo img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
 /* Prefer face + book cover in frame */
 object-position: 50% 18%;
}

.about-copy {
 min-width: 0;
 padding-left: 12px;
 max-width: 36rem;
}

.about-copy h2 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(42px, 3.8vw, 52px);
 line-height: var(--lh-display);
 margin-bottom: 16px;
 max-width: 20ch;
}

.about-body {
 font-size: 15.5px;
 line-height: 1.65;
 color: var(--earth);
 margin-bottom: 18px;
 max-width: 42ch;
}

.about-expand {
 margin-bottom: 22px;
 padding-top: 4px;
 border-top: 1px solid var(--line);
 animation: fadeIn 0.35s var(--ease);
}

.about-expand[hidden] {
 display: none;
}

.about-expand p {
 font-size: 14.5px;
 color: var(--earth);
 margin: 12px 0;
 max-width: 44ch;
 line-height: 1.6;
}

.about-points {
 list-style: none;
 margin-top: 12px;
}

.about-points li {
 position: relative;
 padding-left: 16px;
 font-size: 13.5px;
 color: var(--olive);
 margin-bottom: 6px;
}

.about-points li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.55em;
 width: 7px;
 height: 1px;
 background: var(--gold);
}

.about-actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 18px;
}

/* --- Quote / Meet Eugenia --- */
.quote-band {
 position: relative;
 overflow: hidden;
 background: #241e19;
 color: var(--ivory);
}

/* Blurred room plate - fades in from solid on the left */
.quote-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 background:
 linear-gradient(
 100deg,
 #241e19 0%,
 #241e19 22%,
 rgba(36, 30, 25, 0.92) 38%,
 rgba(36, 30, 25, 0.55) 58%,
 rgba(36, 30, 25, 0.28) 78%,
 rgba(36, 30, 25, 0.18) 100%
 ),
 url("assets/quote-bg-room-blur.jpg") right center / cover no-repeat;
 pointer-events: none;
}

.quote-inner {
 position: relative;
 z-index: 1;
 max-width: var(--max);
 margin: 0 auto;
 display: grid;
 grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr);
 gap: 0 16px;
 min-height: 380px;
 align-items: stretch;
}

.quote-copy {
 padding: 64px 24px 64px 48px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-width: 0;
}

.quote-copy blockquote p {
 font-family: var(--font-display);
 font-style: normal;
 font-size: clamp(28px, 3vw, 40px);
 line-height: 1.08;
 font-weight: var(--weight-display);
 max-width: 30ch;
 color: #fff;
}

/* Gold quotation marks */
.quote-copy .q-mark {
 color: var(--gold);
 font-weight: var(--weight-display);
}

.quote-copy footer {
 margin-top: 28px;
}

.quote-copy cite {
 font-family: var(--font-body);
 font-style: normal;
 font-size: 14px;
 font-weight: 600;
 display: block;
 color: var(--ivory);
}

.cite-role {
 display: block;
 margin-top: 4px;
 font-size: 12px;
 color: rgba(244, 239, 230, 0.6);
}

.quote-portrait {
  overflow: hidden;
  min-height: 300px;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.quote-portrait img {
  width: 100%;
  height: auto;
  max-height: min(92vh, 560px);
  object-fit: contain;
  object-position: center top;
  background: transparent;
  display: block;
  margin: 0;
  /* Hide ~20% of bottom only; shift so visible bottom is flush with section */
  clip-path: inset(0 0 20% 0);
  transform: translateY(20%);
  /* Subtle soft edge — light only, no heavy halo */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1))
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}

/* Meet Eugenia: portrait sits on section floor */
.quote-band {
  display: flex;
  flex-direction: column;
}
.quote-inner {
  flex: 1;
  align-items: end !important;
  min-height: 420px;
}
.quote-copy {
  padding-bottom: 56px !important;
}

/* --- Event --- */
.event {
 background: var(--ivory);
}

.event-inner {
 max-width: none;
 width: 100%;
 margin: 0;
 display: grid;
 /* Match hero/order: more room for copy; form sits closer */
 grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
 min-height: 580px;
}

.event-visual {
 position: relative;
 /* Full-bleed panel; left edge matches other sections; tight right gap to form */
 padding: 52px 16px 52px var(--content-inline);
 /* Warm still life (mug, candles, pampas) - soft left scrim for copy */
 background:
 linear-gradient(
 100deg,
 rgba(28, 26, 24, 0.58) 0%,
 rgba(28, 26, 24, 0.38) 38%,
 rgba(28, 26, 24, 0.12) 62%,
 transparent 82%
 ),
 url("assets/event-background.jpg") right center / cover no-repeat;
 background-color: #c4a882;
 color: var(--ivory);
 overflow: hidden;
 min-width: 0;
}

.event-visual h2 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(42px, 3.8vw, 52px);
 line-height: var(--lh-display);
 letter-spacing: -0.015em;
 margin-bottom: 14px;
 color: #fff;
 max-width: 20ch;
}

.event-promise {
 font-size: 15px;
 line-height: 1.65;
 color: rgba(255, 252, 247, 0.82);
 max-width: 42ch;
 margin-bottom: 28px;
}

.event-meta {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 12px;
 max-width: 42ch;
}

.event-meta li {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 14px;
}

.event-meta strong {
 display: inline-block;
 min-width: 42px;
 font-size: 11px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--gold-btn);
 font-weight: 600;
}

.event-still-life {
 position: absolute;
 right: 16px;
 bottom: 28px;
 width: 100px;
 filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.4));
 opacity: 0.95;
}

.event-book {
 width: 100%;
 transform: rotate(-4deg);
}

.event-form-wrap {
 background: var(--white);
 border-left: 1px solid var(--line);
 display: flex;
 min-width: 0;
}

.event-form {
 padding: 48px var(--content-inline) 48px 24px;
 width: 100%;
 display: flex;
 flex-direction: column;
}

.event-form h3 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(32px, 3vw, 42px);
 line-height: var(--lh-display);
 margin-bottom: 6px;
 max-width: 20ch;
}

.event-recap {
 display: flex;
 flex-direction: column;
 gap: 14px;
 justify-content: center;
}

.event-recap h3 { margin-bottom: 0; }
.event-recap .form-lead { margin-bottom: 8px; }
.event-recap .text-link {
 align-self: flex-start;
 margin-top: 4px;
}

.form-lead {
 font-size: 14px;
 color: var(--earth);
 margin-bottom: 22px;
}

.field {
 margin-bottom: 14px;
}

.field label {
 display: block;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.03em;
 color: var(--charcoal-soft);
 margin-bottom: 6px;
}

.field .optional {
 font-weight: 400;
 color: var(--olive);
 letter-spacing: 0;
}

.field input,
.field select {
 width: 100%;
 font-family: var(--font-body);
 font-size: 14px;
 padding: 12px 14px;
 border: 1px solid var(--line-mid);
 border-radius: 8px;
 background: #fff;
 color: var(--charcoal);
 outline: none;
 transition: border-color 0.2s, box-shadow 0.2s;
 appearance: none;
}

.field select {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236C5143' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 14px center;
 padding-right: 36px;
}

.field input:hover,
.field select:hover {
 border-color: rgba(28, 26, 24, 0.28);
}

.field input:focus,
.field select:focus {
 border-color: var(--gold);
 box-shadow: var(--focus);
}

.field input::placeholder {
 color: #a89b8c;
}

.check {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 font-size: 13px;
 color: var(--earth);
 margin: 4px 0 16px;
 cursor: pointer;
}

.check input {
 margin-top: 3px;
 accent-color: var(--gold);
 width: 16px;
 height: 16px;
}

.form-error {
 font-size: 13px;
 color: #8b3a2f;
 background: #f8ebe8;
 border: 1px solid #e8cfc8;
 border-radius: 8px;
 padding: 10px 12px;
 margin-bottom: 12px;
}

.form-error[hidden] {
 display: none;
}

.fine-print {
 margin-top: 12px;
 font-size: 12px;
 color: var(--olive);
 text-align: center;
 line-height: 1.45;
}

.form-success {
 text-align: center;
 padding: 24px 8px;
 animation: fadeIn 0.4s var(--ease);
}

.form-success[hidden] {
 display: none;
}

.success-mark {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: rgba(181, 138, 71, 0.12);
 color: var(--gold-deep);
 display: grid;
 place-items: center;
 font-size: 22px;
 font-weight: 600;
 margin: 0 auto 18px;
}

.form-success h3 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(28px, 3vw, 36px);
 line-height: var(--lh-display);
 margin-bottom: 10px;
}

.form-success p {
 font-size: 15px;
 color: var(--earth);
 margin-bottom: 24px;
 line-height: 1.55;
}

/* --- Order --- */
.order {
 position: relative;
 padding: 80px 40px;
 background: var(--ivory-soft);
 border-top: 1px solid var(--line);
}

.order-inner {
 max-width: var(--max);
 margin: 0 auto;
 display: grid;
 /* More width for copy; book closer */
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
 gap: 24px 28px;
 align-items: center;
}

.order-copy {
 min-width: 0;
 padding-right: 8px;
}

.order-copy h2 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(42px, 3.8vw, 52px);
 line-height: 1.02;
 margin-bottom: 14px;
 max-width: none;
}

.order-copy h2 .order-title-line {
 display: block;
}

.order-body {
 font-size: 15px;
 color: var(--earth);
 margin-bottom: 22px;
 max-width: 42ch;
}

.order-proof {
 list-style: none;
 margin-bottom: 28px;
}

.order-proof li {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 14px;
 color: var(--charcoal-soft);
 margin-bottom: 10px;
 font-weight: 500;
}

.order-proof svg,
.order-proof .proof-icon {
 color: var(--gold);
 flex-shrink: 0;
 width: 20px;
 height: 20px;
}

.order-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 align-items: center;
 margin-bottom: 18px;
}

/* Amazon “Available at Amazon” - third-party mark only (Ads brand-usage guidelines).
 Stacked min: 90px @1x screen (180px bitmap for @2x). We use SVG so 126px CSS is fine.
 Clear space: ~height of the “Amazon” letterforms; do not recolor, crop, or restyle. */
.amazon-badge {
 display: inline-block;
 /* Pulled up toward the stack - still clear of book shadows */
 margin: 4px 0 0;
 padding: 0;
 line-height: 0;
 background: transparent;
 border: 0;
 border-radius: 0;
 box-shadow: none;
 position: relative;
 z-index: 4;
}

.amazon-badge img {
 display: block;
 /* 30% under previous 180px → 126px (still ≥ 90px stacked minimum) */
 width: 126px;
 max-width: min(126px, 100%);
 min-width: 90px;
 height: auto;
}

.amazon-badge:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 8px; /* keeps focus ring outside clear space */
}

.retailer-badges {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 margin-top: 10px;
}

.takealot-badge {
 display: inline-block;
 margin: 0;
 padding: 0;
 line-height: 0;
 background: transparent;
 border: 0;
 border-radius: 0;
 box-shadow: none;
}

.takealot-badge img {
 display: block;
 width: 148px;
 max-width: min(148px, 100%);
 height: auto;
}

.takealot-badge:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 8px;
}

.order-book {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 520px;
 background: radial-gradient(ellipse at 50% 42%, rgba(181, 138, 71, 0.09), transparent 58%);
 border-radius: var(--radius);
 padding: 36px 28px 24px;
 overflow: visible;
}

/* Three-book cascade - spaced, tasteful depth */
.book-stack {
 position: relative;
 width: min(100%, 420px);
 height: min(58vw, 420px);
 max-height: 440px;
 margin: 0 auto 0;
}

.book-stack__item {
 position: absolute;
 left: 50%;
 bottom: 8%;
 width: min(58%, 250px);
 height: auto;
 object-fit: contain;
 filter: drop-shadow(0 18px 36px rgba(28, 26, 24, 0.28));
 transform-origin: center bottom;
 user-select: none;
 pointer-events: none;
}

.book-stack__item--back {
 z-index: 1;
 transform: translate(calc(-50% - 72px), -18px) rotate(-11deg);
 opacity: 0.92;
}

.book-stack__item--mid {
 z-index: 2;
 transform: translate(calc(-50% + 76px), -12px) rotate(10deg);
 opacity: 0.96;
}

.book-stack__item--front {
 z-index: 3;
 width: min(64%, 280px);
 transform: translate(-50%, 0) rotate(0deg);
 filter: drop-shadow(0 22px 44px rgba(28, 26, 24, 0.32));
 pointer-events: auto;
}

@media (max-width: 560px) {
 .book-stack {
 width: min(100%, 320px);
 height: 340px;
 }

 .book-stack__item--back {
 transform: translate(calc(-50% - 52px), -14px) rotate(-9deg);
 }

 .book-stack__item--mid {
 transform: translate(calc(-50% + 54px), -10px) rotate(8deg);
 }

 .book-stack__item {
 width: min(56%, 200px);
 }

 .book-stack__item--front {
 width: min(62%, 220px);
 }

 .about-book::after,
 .order::after,
 .about-book-edge-blur {
 display: none; /* edge accents are desktop-first */
 }
}

/* --- Contact --- */
.contact {
 position: relative;
 overflow: hidden;
 padding: 100px 40px;
 text-align: center;
 background: var(--ivory);
 border-top: 1px solid var(--line);
}

/* Journal still life at ~20% opacity (80% transparent) over solid ivory */
.contact-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 background:
 url("assets/contact-bg-journal.jpg") center / cover no-repeat;
 opacity: 0.2;
 pointer-events: none;
}

.contact-inner {
 position: relative;
 z-index: 1;
 max-width: 540px;
 margin: 0 auto;
}

.contact h2 {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: clamp(42px, 3.4vw, 52px);
 line-height: var(--lh-display);
 margin-bottom: 16px;
}

.contact-body {
 font-size: 15px;
 color: var(--earth);
 margin-bottom: 32px;
 line-height: 1.65;
}

.contact-actions {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 18px;
}

/* --- Trailer showcase --- */
.trailer-showcase {
 padding: 96px 40px 104px;
 color: var(--ivory);
 background: #241e19;
}

.trailer-showcase-inner {
 max-width: var(--max);
 margin: 0 auto;
}

.trailer-showcase h2 {
 max-width: 16ch;
 margin: 10px 0 30px;
 color: var(--ivory);
 font-family: var(--font-display);
 font-size: clamp(38px, 4vw, 56px);
 font-weight: var(--weight-display);
 line-height: var(--lh-display);
 text-wrap: balance;
}

.vimeo-frame {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 background: #1c1a18;
 border-radius: 14px;
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.vimeo-frame iframe {
 position: absolute;
 inset: 0;
 display: block;
 width: 100%;
 height: 100%;
 border: 0;
}

.trailer-showcase .vimeo-frame {
 max-width: 960px;
}

/* --- Footer (world-class, frontier spacing) --- */
.site-footer {
 border-top: 1px solid var(--line);
 padding: 72px 40px 40px;
 background: var(--forest);
 color: rgba(251, 250, 242, 0.82);
}

.footer-inner {
 max-width: var(--max);
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 56px;
}

.footer-top {
 display: grid;
 grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
 gap: 48px 80px;
 align-items: start;
}

.footer-brand .logo {
  display: inline-flex;
}

.footer-promise {
 margin-top: 20px;
 font-size: 14px;
 color: rgba(244, 239, 230, 0.62);
 max-width: 34ch;
 line-height: 1.65;
}

.footer-cols {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 32px 40px;
}

.footer-col {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 12px;
}

.footer-col-title {
 font-family: var(--font-body);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--gold);
 margin-bottom: 4px;
}

.footer-col a {
 font-size: 14px;
 font-weight: 400;
 color: rgba(244, 239, 230, 0.72);
 transition: color 0.2s var(--ease);
 line-height: 1.4;
}

.footer-col a:hover {
 color: #fff;
}

.footer-bottom {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 12px 24px;
 padding-top: 28px;
 border-top: 1px solid rgba(244, 239, 230, 0.1);
}

.footer-copy,
.footer-meta {
 font-size: 12px;
 color: rgba(244, 239, 230, 0.42);
 letter-spacing: 0.02em;
}

@media (max-width: 900px) {
 .footer-top {
 grid-template-columns: 1fr;
 gap: 40px;
 }

 .footer-cols {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px 20px;
 }
}

@media (max-width: 560px) {
 .footer-cols {
 grid-template-columns: 1fr;
 gap: 28px;
 }

 .site-footer {
 padding: 56px 24px 32px;
 }

 .footer-inner {
 gap: 40px;
 }

 .footer-bottom {
 flex-direction: column;
 align-items: flex-start;
 }
}

/* --- Modal --- */
.modal[hidden] {
 display: none;
}

.modal {
 position: fixed;
 inset: 0;
 z-index: 80;
 display: grid;
 place-items: center;
 padding: 24px;
}

.modal-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(28, 26, 24, 0.55);
 backdrop-filter: blur(4px);
}

.modal-panel {
 position: relative;
 z-index: 1;
 width: min(100%, 520px);
 background: var(--ivory);
 border-radius: 18px;
 padding: 32px 28px;
 box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
 animation: fadeIn 0.3s var(--ease);
}

.modal-close {
 position: absolute;
 top: 12px;
 right: 14px;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 font-size: 22px;
 line-height: 1;
 color: var(--earth);
}

.modal-close:hover {
 background: var(--ivory-deep);
}

.modal-panel h2 {
 font-family: var(--font-display);
 font-style: normal;
 font-size: clamp(28px, 3vw, 36px);
 font-weight: var(--weight-display);
 line-height: var(--lh-display);
 margin-bottom: 8px;
 padding-right: 28px;
}

.modal-note {
 font-size: 14px;
 color: var(--earth);
 margin-bottom: 20px;
}

.trailer-frame {
 background: #241e19;
 color: var(--ivory);
 border-radius: 12px;
 padding: 40px 28px;
 text-align: center;
}

.trailer-modal-video {
 margin-top: 20px;
 border-radius: 10px;
 box-shadow: none;
}

.trailer-q {
 font-family: var(--font-display);
 font-style: normal;
 font-weight: var(--weight-display);
 font-size: 22px;
 line-height: 1.05;
 margin-bottom: 24px;
}

@keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(6px);
 }
 to {
 opacity: 1;
 transform: none;
 }
}

/* --- Responsive --- */
@media (max-width: 980px) {
 .nav {
 display: none;
 }

 .menu-toggle {
 display: inline-flex;
 }

 .header-actions .btn-sm {
 display: none;
 }

 .hero-inner,
 .about-book-inner,
 .order-inner,
 .event-inner,
 .quote-inner {
 grid-template-columns: 1fr;
 }

 .journey-list {
 grid-template-columns: 1fr 1fr;
 }

 .journey-item {
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 }

 .journey-item p {
 max-width: 28ch;
 margin-left: auto;
 margin-right: auto;
 }

 .journey-icon {
 margin-left: auto;
 margin-right: auto;
 }

 .journey-item:nth-child(2) {
 border-right: none;
 }

 .journey-item:nth-child(1),
 .journey-item:nth-child(2) {
 border-bottom: 1px solid var(--line);
 }

 .hero {
 min-height: min(88vh, 720px);
 }

 /* Portrait lifestyle plate for small screens */
 .hero-bg {
 background: url("assets/hero-book-lifestyle-mobile.jpg") center top / cover no-repeat;
 background-color: #f3ebe0;
 }

 .hero-copy {
 max-width: 100%;
 padding-right: 0;
 }

 .hero-copy h1 {
 max-width: none;
 font-size: clamp(40px, 8.4vw, 46px);
 line-height: 0.98;
 }

 .event-still-life {
 position: static;
 margin-top: 28px;
 width: 100px;
 }

 /* Stacked: both columns share the same content gutters as other sections */
 .event-visual {
 padding: 48px var(--content-inline);
 }

 .event-form {
 padding: 48px var(--content-inline);
 }

 .event-visual h2,
 .event-form h3 {
 max-width: none;
 }

 .event-promise,
 .event-meta {
 max-width: none;
 }

 .quote-copy {
 padding: 40px 28px 24px;
 }

 .quote-copy blockquote p {
 max-width: none;
 }

 .quote-portrait img {
 min-height: 280px;
 }

 .about-copy,
 .order-copy {
 padding-left: 0;
 padding-right: 0;
 }

 .about-book-inner {
 gap: 28px;
 }

 .about-photo {
 max-width: 100%;
 justify-self: stretch;
 }

 .about-copy h2,
 .order-copy h2 {
 max-width: none;
 }
}

@media (max-width: 560px) {
 .header-inner,
 .hero-inner,
 .recognition,
 .journey,
 .about-book,
 .order,
 .contact,
 .trailer-showcase,
 .site-footer {
 padding-left: 18px;
 padding-right: 18px;
 }

 .trailer-showcase {
 padding-top: 72px;
 padding-bottom: 80px;
 }

 .book-hero {
 width: min(100%, 300px);
 }

 .journey-list {
 grid-template-columns: 1fr;
 }

 .journey-item {
 border-right: none;
 border-bottom: 1px solid var(--line);
 padding-left: 0;
 padding-right: 0;
 text-align: center;
 align-items: center;
 }

 .journey-item p {
 max-width: 32ch;
 }

 .event-visual {
 padding: 28px 20px 28px max(20px, var(--content-inline));
 }

 .event-form {
 padding: 28px max(20px, var(--content-inline)) 28px 20px;
 }

 .order-actions {
 flex-direction: column;
 align-items: stretch;
 }

 .order-actions .btn {
 width: 100%;
 }

 .launch-bar {
 font-size: 11.5px;
 }
}