:root{
  --stone:#EDE8DE; --stone-dark:#CFC6B4; --ink:#1B1815;
  --brick:#9C4A2E; --brick-dark:#7A3721; --river:#24504C; --gold:#B08A3E; --paper:#F7F4EC;
  --serif:'Noto Serif', serif; --sans:'Be Vietnam Pro', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.6; overflow-x:hidden;}
img,video{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--serif); font-weight:600;}
.eyebrow{font-size:0.72rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--brick); margin-bottom:14px; display:inline-block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
@media(max-width:640px){ section{padding:56px 0;} }

/* HERO */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--ink); overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg video{width:100%; height:100%; object-fit:cover; opacity:0.55;}
.hero-fallback{position:absolute; inset:0; background:radial-gradient(ellipse 60% 40% at 20% 100%, rgba(176,138,62,0.18), transparent 60%), linear-gradient(180deg, #100E0C 0%, #1B1815 55%, #241F1A 100%);}
.hero-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(19,16,13,0.15) 0%, rgba(19,16,13,0.65) 75%, rgba(19,16,13,0.92) 100%);}
.hero-content{position:relative; z-index:2; width:100%; padding-bottom:64px;}
.hero-content .wrap{max-width:840px;}
.hero-mark{font-family:var(--serif); font-style:italic; color:var(--gold); font-size:0.95rem; margin-bottom:18px; opacity:0.9;}
.hero h1{color:var(--stone); font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.04; letter-spacing:-0.01em; margin-bottom:20px;}
.hero p.sub{color:var(--stone-dark); font-size:clamp(1rem,1.6vw,1.2rem); max-width:560px; margin-bottom:40px; font-weight:300;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{font-weight:600; font-size:0.95rem; padding:16px 30px; border-radius:2px; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:transform .25s ease, background .25s ease;}
.btn-primary{background:var(--brick); color:var(--paper);}
.btn-primary:hover{background:var(--brick-dark); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--stone); border-color:rgba(237,232,222,0.4);}
.btn-ghost:hover{background:rgba(237,232,222,0.08); border-color:var(--stone); transform:translateY(-2px);}

/* SECTION HEADERS */
.sec-head{max-width:640px; margin-bottom:48px;}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:16px;}
.sec-head p{color:#5A5348; font-size:1.02rem; font-weight:300;}

/* ORDER */
.order-sec{background:var(--stone);}
.progress-block{display:flex; align-items:center; gap:20px; margin-bottom:44px; flex-wrap:wrap;}
.progress-bar{flex:1; min-width:200px; height:6px; background:var(--stone-dark); border-radius:3px; overflow:hidden;}
.progress-fill{height:100%; background:var(--brick); transition:width .6s ease;}
.progress-label{font-family:var(--serif); font-size:0.95rem; color:var(--river); font-weight:600; white-space:nowrap;}
.plaque-grid{display:grid; grid-template-columns:repeat(10,1fr); gap:8px;}
@media(max-width:760px){ .plaque-grid{grid-template-columns:repeat(6,1fr);} }
@media(max-width:420px){ .plaque-grid{grid-template-columns:repeat(5,1fr);} }
.plaque{aspect-ratio:1; background:var(--paper); border:1px solid var(--stone-dark); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:0.85rem; font-weight:600; color:var(--ink); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 3px rgba(0,0,0,0.08); transition:transform .15s ease, background .15s ease; padding:0;}
.plaque:hover{transform:translateY(-2px); background:#fff;}
.plaque.pending{background:var(--gold); color:var(--paper); border-color:var(--gold); cursor:default;}
.plaque.pending:hover{transform:none;}
.plaque.sold{background:var(--ink); color:var(--stone-dark); border-color:var(--ink); cursor:default;}
.plaque.sold:hover{transform:none;}
.legend{display:flex; gap:22px; margin-top:22px; flex-wrap:wrap; font-size:0.82rem; color:#5A5348;}
.legend span{display:inline-flex; align-items:center; gap:8px;}
.dot{width:12px; height:12px; border-radius:2px; display:inline-block;}
.dot.available{background:var(--paper); border:1px solid var(--stone-dark);}
.dot.pending{background:var(--gold);}
.dot.sold{background:var(--ink);}

/* MODAL */
.modal-overlay{position:fixed; inset:0; background:rgba(19,16,13,0.72); z-index:100; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--paper); max-width:460px; width:100%; max-height:90vh; overflow-y:auto; padding:40px 34px; position:relative; border-top:4px solid var(--brick);}
.modal-close{position:absolute; top:16px; right:18px; background:none; border:none; font-size:1.4rem; cursor:pointer; color:#8a8171;}
.modal h3{font-size:1.4rem; margin-bottom:6px;}
.modal-sub{color:#8a8171; font-size:0.88rem; margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.8rem; font-weight:600; margin-bottom:6px;}
.field input, .field textarea{width:100%; padding:11px 13px; border:1px solid var(--stone-dark); background:#fff; font-family:var(--sans); font-size:0.92rem; border-radius:2px;}
.field textarea{resize:vertical; min-height:64px;}
.hp{position:absolute; left:-9999px;}
.bank-box{background:var(--stone); padding:18px 20px; margin:22px 0; font-size:0.86rem;}
.bank-box .row{display:flex; justify-content:space-between; padding:4px 0;}
.bank-box .row b{font-family:var(--serif);}
.content-note{margin-top:10px; padding-top:10px; border-top:1px dashed var(--stone-dark); font-weight:600; color:var(--brick);}
.modal .btn-submit{width:100%; justify-content:center; margin-top:6px; padding:14px; background:var(--brick); color:#fff; border:none; font-weight:600; cursor:pointer; font-size:0.95rem;}
.modal .btn-submit:hover{background:var(--brick-dark);}
.modal .btn-submit:disabled{opacity:0.6;}
.form-note{font-size:0.78rem; color:#8a8171; margin-top:14px; text-align:center;}
.form-error{color:#b3261e; font-size:0.85rem; margin-bottom:10px; min-height:1em;}
.success-state{text-align:center; padding:12px 0;}
.success-state .check{font-size:2.4rem; color:var(--river); margin-bottom:14px;}

/* EBOOK */
.ebook-sec{background:var(--ink); color:var(--stone);}
.ebook-inner{display:flex; gap:56px; align-items:center; flex-wrap:wrap;}
.ebook-inner .col{flex:1; min-width:260px;}
.ebook-sec .eyebrow{color:var(--gold);}
.ebook-sec h2{color:var(--stone);}
.ebook-sec p{color:var(--stone-dark); font-weight:300; margin-bottom:28px;}
.ebook-cover{aspect-ratio:3/4.4; background:linear-gradient(160deg, var(--river) 0%, #163634 100%); display:flex; align-items:center; justify-content:center; padding:30px; text-align:center; border:1px solid rgba(237,232,222,0.15);}
.ebook-cover span{font-family:var(--serif); font-style:italic; color:var(--stone-dark); font-size:0.95rem;}

/* ABOUT */
.about-sec .wrap{display:flex; gap:60px; flex-wrap:wrap;}
.about-sec .col{flex:1; min-width:280px;}
.excerpt{font-family:var(--serif); font-style:italic; font-size:1.15rem; line-height:1.75; border-left:2px solid var(--brick); padding-left:24px; margin-bottom:20px;}
.excerpt-toggle{background:none; border:none; color:var(--river); font-weight:600; cursor:pointer; font-size:0.85rem; text-decoration:underline;}
.excerpt-more{display:none;}
.excerpt-more.open{display:block;}

/* AUTHOR */
.author-sec{background:var(--stone);}
.author-inner{display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap;}
.author-photo{width:140px; height:140px; border-radius:50%; background:linear-gradient(160deg, var(--brick), var(--river)); flex-shrink:0;}
.author-inner .col p{color:#5A5348; font-weight:300;}
.author-inner .col h3{font-size:1.2rem; margin-bottom:4px;}
.author-inner .col .role{font-size:0.82rem; color:var(--brick); font-weight:600; margin-bottom:14px; display:block;}

/* FAQ */
.faq-item{border-bottom:1px solid var(--stone-dark);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 0; cursor:pointer; font-family:var(--serif); font-size:1.05rem; display:flex; justify-content:space-between; align-items:center;}
.faq-q .plus{font-size:1.3rem; color:var(--brick); transition:transform .2s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:#5A5348; font-weight:300;}
.faq-item.open .faq-a{max-height:200px; padding-bottom:20px;}

footer{background:var(--ink); color:var(--stone-dark); padding:40px 0; text-align:center; font-size:0.82rem;}
footer .brand{font-family:var(--serif); font-style:italic; color:var(--stone); margin-bottom:6px; font-size:1rem;}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }