
:root{--navy:#102b42;--navy2:#173c55;--parchment:#f5ead4;--ivory:#fffbf1;--paper2:#e9d8b7;--gold:#dcb277;--copper:#9a6227;--text:#162c3b;--muted:#4b6070;--border:#c9b38f;--focus:#ad5518}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",Arial,sans-serif;background:var(--parchment);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,blockquote{font-family:"Libre Baskerville",Georgia,serif}a{color:inherit}img{max-width:100%;height:auto;display:block}button{font-family:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.skip-link{position:absolute;left:15px;top:-110px;z-index:99;background:white;padding:10px 14px}.skip-link:focus{top:10px}.tiny-label{letter-spacing:.18em;font-size:11px;font-weight:700;text-transform:uppercase}.muted{color:var(--muted)}
.topbar{background:#f8f0df;border-bottom:1px solid #d5c5a7;height:82px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 clamp(22px,5vw,75px);position:relative;z-index:5}.wordmark{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;letter-spacing:-.03em;font-size:21px;text-decoration:none;display:flex;align-items:center;gap:13px}.wordmark-symbol{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--navy);font-weight:400;font-size:15px;letter-spacing:0}.wordmark small{font-family:"DM Sans",Arial,sans-serif;display:block;font-weight:700;font-size:9px;letter-spacing:.17em;margin-top:-4px}.menu-toggle{display:none;border:1px solid var(--navy);background:transparent;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}.nav{display:flex;gap:33px;align-items:center}.nav a{text-decoration:none;position:relative;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11px}.nav a:not(.nav-buy):hover{color:#956022}.nav a[aria-current=page]:not(.nav-buy):after{content:"";position:absolute;bottom:-8px;left:0;right:0;border-bottom:2px solid var(--copper)}.nav .nav-buy{background:var(--navy);color:#fff9ed;padding:12px 17px}.nav .nav-buy:hover{background:#2d5671}
.eyebrow{font-size:11px;letter-spacing:.19em;font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:13px}.eyebrow:before{content:"✦";color:var(--gold);font-size:19px}.light{color:#fff5db}.page-kicker{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(239,218,172,.29);padding-bottom:15px;max-width:1280px;margin:0 auto 45px;font-size:10px;letter-spacing:.21em;font-weight:700}
.button{display:inline-flex;gap:24px;align-items:center;justify-content:space-between;text-decoration:none;background:var(--parchment);color:var(--navy);font-size:12px;text-transform:uppercase;font-weight:800;letter-spacing:.1em;min-height:56px;padding:15px 24px;border:1px solid transparent}.button:hover{background:#fffdf6}.button.dark{background:var(--navy);color:white}.button.dark:hover{background:#28526d}.secondary-link{font-size:13px;text-underline-offset:7px;font-weight:700}.secondary-link:hover{color:var(--copper)}
.home-after{max-width:1350px;padding:95px clamp(25px,7vw,105px) 105px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:11%;align-items:center}.home-after h2,.page-heading{font-size:clamp(35px,4.3vw,60px);letter-spacing:-.065em;line-height:1.29;margin:17px 0 22px}.home-after h2 em,.page-heading em{color:var(--copper);font-weight:400}.home-after p{font-size:17px;max-width:560px}.after-card{border:1px solid #bfa985;background:#fdf6e8;padding:38px 38px 30px;box-shadow:14px 14px #e5d4b4}.after-card:before{content:"";display:block;margin-bottom:20px;width:65px;border-top:2px solid #a17844}.after-card p{font-family:"Libre Baskerville",Georgia,serif;font-size:26px;line-height:1.6;letter-spacing:-.04em}.after-card span,.after-card .card-link{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.after-card .card-link{text-underline-offset:6px}
.foot{background:#0b2539;color:#f6e9d0;padding:45px clamp(28px,6vw,92px);display:flex;gap:30px;justify-content:space-between;align-items:start}.foot a{text-decoration:none}.foot a:hover{color:#f1c48c}.foot b{font:700 22px "Libre Baskerville",Georgia,serif}.foot p{font-size:12px;color:#c9c1b5}.foot>div:last-child{text-align:right}
.page-hero{background:#16374e;color:#f6ead1;padding:58px clamp(28px,6vw,90px) 75px}.page-hero .page-head-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr .96fr;gap:8%;align-items:center}.page-hero h1{font-size:clamp(44px,5vw,73px);letter-spacing:-.07em;line-height:1.23;margin:15px 0 30px}.page-hero h1 em{color:#e9c38f;font-weight:400}.page-hero p{font-size:16px;max-width:560px}.page-photo{border:10px solid #e5ceab;transform:rotate(2deg);box-shadow:22px 22px 35px #06192966}.page-photo img{width:100%;aspect-ratio:1;object-fit:cover}
.route-wrap{padding:105px clamp(25px,6vw,90px);background:#f8efdf}.route-wrap .inner{max-width:1160px;margin:auto}.route-wrap h2{font-size:clamp(31px,3.7vw,50px);letter-spacing:-.06em;margin:14px 0 35px}.route-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.route-steps article{padding:38px 25px 20px;border-top:2px solid #c9af82;position:relative}.route-steps article:before{position:absolute;content:"";width:15px;height:15px;background:#96632a;border:4px solid #f8efdf;border-radius:50%;top:-11px;left:21px}.route-steps article:last-child{border-top:2px dashed #96632a}.route-steps small{letter-spacing:.16em;font-size:11px;color:#8d6034;font-weight:700}.route-steps h3{font-size:23px;line-height:1.4;letter-spacing:-.04em;margin:12px 0}.route-steps p{font-size:14px;color:#53616e}
.stoppage{padding:100px clamp(25px,6vw,90px);background:#122d42;color:#f9edd1}.stoppage .inside{display:grid;grid-template-columns:.85fr 1.15fr;gap:9%;max-width:1150px;align-items:center;margin:auto}.stoppage-art{border:11px solid #ead8b7;box-shadow:20px 20px 25px #07192966;transform:rotate(-2deg)}.stoppage-art img{aspect-ratio:1;object-fit:cover}.stoppage h2{font-size:clamp(40px,4.4vw,65px);line-height:1.24;letter-spacing:-.065em}.stoppage h2 em{color:#ecc186;font-weight:400}.stoppage p{font-size:17px;max-width:535px}.stoppage .button{margin-top:20px}.boundary{font-size:12px;color:#cfc9bc!important;margin-top:24px}
.preview-main{background:linear-gradient(145deg,#f4ead6,#e5d0ae);padding:86px 24px 120px;min-height:72vh}.preview-inner{max-width:950px;margin:auto}.preview-inner .page-heading{max-width:760px}.paper-fragment{margin:58px auto 0;max-width:725px;background:#fffaf0;box-shadow:19px 22px 0 #d5bd97;padding:60px clamp(30px,7vw,90px);border:1px solid #c7a87c;position:relative}.paper-fragment:before{content:"CHAPTER ONE  /  THE LETTER";display:block;text-align:center;letter-spacing:.26em;font-weight:700;font-size:11px;color:#79572e;padding-bottom:20px;border-bottom:1px solid #d8c7a9}.paper-fragment details{margin-top:34px}.paper-fragment summary{cursor:pointer;font-family:"Libre Baskerville",Georgia,serif;color:#123d58;font-size:23px;font-weight:700;line-height:1.5}.paper-fragment details[open] summary{padding-bottom:18px;border-bottom:1px dashed #a58a67}.excerpt{font:19px/1.95 "Libre Baskerville",Georgia,serif}.excerpt p{margin-bottom:17px}.paper-fragment .excerpt-note{font-size:12px;color:#716555;margin-top:20px}.forward{margin:75px auto 0;max-width:900px;text-align:center}.forward h2{font-size:clamp(31px,3vw,42px);letter-spacing:-.04em}.forward p{margin:0 auto 26px;max-width:550px}
.author-main{background:#f8efdf;padding:90px clamp(28px,6vw,90px) 110px}.author-grid{max-width:1090px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}.author-grid h1{font-size:clamp(57px,6vw,85px);letter-spacing:-.065em;line-height:1.17;margin:25px 0}.author-grid h1 em{color:var(--copper);font-weight:400}.author-copy p{font-size:17px}.author-copy .note{border-top:1px solid #c2a779;margin-top:38px;padding-top:24px;font:italic 21px "Libre Baskerville",Georgia,serif;color:#8b5c2a}
.book-main{background:#14344b;color:#f8eed7;padding:90px clamp(28px,7vw,105px) 120px}.book-grid{max-width:1120px;display:grid;grid-template-columns:.82fr 1.18fr;gap:10%;align-items:center;margin:auto}.book-cover{max-width:375px;justify-self:center;box-shadow:27px 29px 35px #07192777}.book-cover img{width:100%}.book-main h1{font-size:clamp(39px,4.3vw,61px);letter-spacing:-.06em;line-height:1.26}.book-main h1 em{color:#e9c389;font-weight:400}.book-main p{font-size:16px;max-width:540px}.retailer-box{border:1px solid #a3a292;margin-top:33px;padding:24px 26px;max-width:540px}.retailer-box strong{font-family:"Libre Baskerville",Georgia,serif;font-size:18px}.retailer-box p{font-size:13px;color:#ddd7c9}.retailer-box span{font-weight:700;font-size:11px;letter-spacing:.15em;color:#ecc186}
@media(max-width:960px){.nav{gap:20px}.topbar{padding:0 28px}.home-after{gap:6%}}
@media(max-width:720px){.topbar{height:68px;padding:0 19px}.wordmark{font-size:17px}.wordmark-symbol{width:31px;height:31px;font-size:13px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:68px;left:0;right:0;padding:17px 22px 24px;background:#f8f0df;box-shadow:0 15px 25px #102b4229;border-bottom:1px solid #cbb591;flex-direction:column;align-items:stretch;gap:0}.nav.open{display:flex}.nav a{padding:14px 8px}.nav .nav-buy{text-align:center;margin-top:9px}.nav a[aria-current=page]:not(.nav-buy):after{display:none}.home-after,.page-hero .page-head-inner,.stoppage .inside,.book-grid,.author-grid{grid-template-columns:1fr}.home-after{padding:70px 26px 100px;gap:35px}.home-after h2,.page-heading{font-size:clamp(33px,8vw,47px)}.after-card{padding:25px}.after-card p{font-size:22px}.page-hero{padding:45px 26px 76px}.page-hero .page-head-inner{gap:35px}.page-hero h1{font-size:clamp(43px,10vw,60px)}.page-photo{max-width:430px;margin:auto;width:88%}.route-wrap{padding:74px 26px}.route-steps{grid-template-columns:1fr;padding-left:20px;border-left:2px dashed #bda172}.route-steps article{border-top:0!important;border-left:0;padding:0 15px 30px 28px}.route-steps article:before{top:3px;left:-29px}.route-steps h3{margin:5px 0}.stoppage{padding:75px 26px}.stoppage .inside{gap:48px}.stoppage-art{max-width:410px;width:88%;margin:auto}.stoppage h2{font-size:clamp(41px,9vw,58px)}.preview-main{padding:60px 24px 100px}.paper-fragment{margin:35px 15px 0;padding:35px 28px}.excerpt{font-size:16px}.forward{margin:70px 0 0}.author-main,.book-main{padding:65px 28px 100px}.author-grid{gap:25px}.author-grid h1{font-size:60px}.book-grid{gap:48px}.book-cover{max-width:225px}.book-main h1{font-size:clamp(38px,8.6vw,55px)}.foot{flex-direction:column;gap:22px;padding:40px 27px}.foot>div:last-child{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* --- NEW HERO STYLES --- */

/* --- NEW HERO STYLES --- */
.home-hero { background: var(--navy); color: #fcf1d8; min-height: 800px; position: relative; overflow: visible; clip-path: inset(0 0 -100px 0); padding-bottom: 50px; }
.hero-bg-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-bg-fx:after { content: ""; position: absolute; inset: 0; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMiIvPjwvc3ZnPg=='); opacity: 0.8; mix-blend-mode: overlay; }
.glow { position: absolute; width: 1200px; height: 1200px; background: radial-gradient(circle, rgba(233,195,143,0.15) 0%, rgba(233,195,143,0) 65%); top: -100px; right: -200px; border-radius: 50%; animation: fadeGlow 2.5s ease-out; }
.stars { position: absolute; inset: 0; }
.star { position: absolute; width: 12px; height: 12px; color: #e9c38f; opacity: 0; animation: twinkle 4s infinite alternate; }
.s1 { top: 15%; left: 10%; animation-delay: 0.2s; }
.s2 { top: 25%; left: 45%; animation-delay: 1.5s; width: 8px; height: 8px; }
.s3 { top: 10%; left: 80%; animation-delay: 0.7s; }
.s4 { top: 75%; left: 5%; animation-delay: 2.1s; width: 16px; height: 16px; }
.s5 { top: 65%; left: 90%; animation-delay: 1.1s; }

.hero-inside { max-width: 1440px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 75px clamp(28px, 6vw, 85px) 40px; position: relative; z-index: 2; align-items: center; }
.hero-text { position: relative; z-index: 3; animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.hero-text h1 { font-size: clamp(52px, 5.8vw, 88px); line-height: 1.15; letter-spacing: -0.06em; margin: 24px 0 30px; font-weight: 700; max-width: 760px; }
.hero-text h1 em { font-weight: 400; color: #e9c38f; }
.hero-simple { position: relative; display: inline-block; }
.scribble { position: absolute; bottom: -18px; left: -5px; width: 110%; height: 40px; overflow: visible; }
.scribble-path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 0.8s ease-out 2.1s forwards; }

.hero-text p.intro { font-size: 17px; max-width: 480px; color: #e5e2d9; line-height: 1.8; margin-bottom: 40px; }
.hero-buttons { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.wax-btn { background: #f5ead4; color: var(--navy); border-radius: 4px; border: none; padding-right: 20px; transition: transform 0.2s, background 0.2s; }
.wax-btn:hover { background: #fff; transform: translateY(-2px); }
.wax-icon { width: 32px; height: 32px; margin-left: 10px; }
.hero-buttons .secondary-link { color: #f5ead4; }

/* Right Side: Art Stage */
.hero-art-stage { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; perspective: 1200px; animation: floatIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }

.route-line { position: absolute; inset: -100px; width: calc(100% + 200px); height: calc(100% + 200px); z-index: 0; pointer-events: none; }
.route-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawRoute 1.5s ease-in-out 0.9s forwards; }

.art-envelope { position: absolute; right: 5%; bottom: 10%; width: 220px; height: 150px; background: #e8dcc4; border-radius: 4px; box-shadow: 15px 15px 30px rgba(0,0,0,0.4); transform: translate(calc(var(--px, 0) * 15px), calc(var(--py, 0) * 15px)) rotate(12deg); z-index: 1; transition: transform 0.3s ease-out; }
.art-envelope:after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(139, 92, 42, 0.2); }
.env-flap { position: absolute; top: 0; left: 0; right: 0; height: 60%; background: #dfd1b5; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1)); }
.env-wax { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -20%); width: 45px; height: 45px; }

.art-print { position: absolute; left: 10%; top: 15%; width: 320px; padding: 12px; background: #fdfaf3; box-shadow: 20px 25px 40px rgba(0,0,0,0.5); transform: translate(calc(var(--px, 0) * -15px), calc(var(--py, 0) * -15px)) rotate(-8deg); z-index: 2; transition: transform 0.3s ease-out; }
.art-print img { width: 100%; height: auto; border: 1px solid #e2d8c3; }

.art-book { position: absolute; z-index: 3; right: 15%; top: 5%; width: 340px; transform: translate(calc(var(--px, 0) * -35px), calc(var(--py, 0) * -35px)) rotate(3deg); transition: transform 0.3s ease-out; }
.book-3d { position: relative; width: 100%; transform-style: preserve-3d; transform: perspective(1000px) rotateY(-18deg); box-shadow: 35px 45px 50px rgba(0,0,0,0.6); }
.book-3d:before { content: ""; position: absolute; top: 2%; bottom: 2%; left: -25px; width: 25px; background: #dcd0b8; transform-origin: right; transform: rotateY(-90deg); border-left: 1px dashed #b8a685; }
.book-front { width: 100%; height: auto; border-radius: 2px 6px 6px 2px; }
.book-spine { position: absolute; left: -32px; top: 0; height: 100%; width: 32px; transform-origin: right; transform: rotateY(-85deg); border-radius: 4px 0 0 4px; }
.book-3d:after { content: ""; position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; box-shadow: inset 4px 0 10px rgba(255,255,255,0.2), inset -1px 0 2px rgba(0,0,0,0.1); pointer-events: none; }

/* Ticket Bottom */
.ticket-card { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); background: #fdf6e8; border: 2px dashed #c2ae8b; padding: 25px 60px; display: flex; align-items: center; justify-content: center; gap: 45px; z-index: 10; box-shadow: 0 15px 35px rgba(0,0,0,0.15); border-radius: 8px; animation: stampDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s both; }
.ticket-content { display: flex; align-items: center; gap: 40px; }
.t-section { text-align: center; }
.t-section span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: #8e7149; margin-bottom: 4px; }
.t-section strong { display: block; font-size: 18px; letter-spacing: 0.05em; color: #2a3a47; }
.t-arrow { font-size: 24px; color: #b8a07c; }
.ticket-stamp { position: absolute; right: -25px; top: -20px; font-family: "DM Sans", Arial, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.1em; color: #a4312a; border: 3px solid #a4312a; padding: 6px 12px; transform: rotate(-15deg); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); opacity: 0; animation: stampPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.4s forwards; }

/* Animations */
@keyframes fadeGlow { from { opacity: 0; } to { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.8; transform: scale(1.2); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
@keyframes stampDown { from { transform: translate(-50%, 50px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes stampPop { 0% { transform: scale(1.5) rotate(-25deg); opacity: 0; } 100% { transform: scale(1) rotate(-15deg); opacity: 0.85; } }

@media (max-width: 1024px) {
  .hero-inside { grid-template-columns: 1fr; text-align: center; gap: 60px; padding: 40px 24px; }
  .hero-text h1 { margin: 20px auto; }
  .hero-text p.intro { margin: 0 auto 30px; }
  .hero-buttons { justify-content: center; }
  .hero-art-stage { height: 500px; transform: scale(0.9); transform-origin: top center; }
  .route-line { display: none; }
  .ticket-card { width: 90%; padding: 20px 30px; gap: 20px; flex-direction: column; }
  .ticket-content { width: 100%; justify-content: space-between; }
}
@media (max-width: 600px) {
  .hero-art-stage { height: 400px; transform: scale(0.7); }
  .ticket-card { bottom: -50px; }
  .home-hero { padding-bottom: 70px; }
}

