@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Manrope:wght@300;400;500&display=swap');

:root { --ink:#3b2925; --soft:#795f56; --gold:#b98c66; --cream:#f3e7dc; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--cream); }
body { color:var(--ink); font-family:"Manrope",Arial,sans-serif; text-transform:lowercase; }
.hero { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate; }
.hero__image { position:absolute; inset:0; z-index:-3; background:url("assets/hero.webp") 64% center/cover no-repeat; transform:scale(1.015); animation:reveal-image 1.8s cubic-bezier(.2,.7,.2,1) both; }
.hero__veil { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(246,235,224,.96) 0%,rgba(242,225,209,.86) 32%,rgba(234,207,184,.25) 58%,rgba(70,43,34,.03) 100%); }
.hero::after { content:""; position:absolute; inset:14px; border:1px solid rgba(89,60,50,.16); pointer-events:none; }
.topbar, footer { position:absolute; left:clamp(34px,6vw,96px); right:clamp(34px,6vw,96px); display:flex; align-items:center; justify-content:space-between; }
.topbar { top:clamp(36px,6vh,70px); animation:rise .9s .15s both; }
.brand { color:var(--ink); text-decoration:none; font:500 clamp(22px,2vw,30px)/1 "Cormorant Garamond",serif; letter-spacing:.18em; }
.brand span { font-weight:300; }
.category { margin:0; display:flex; align-items:center; gap:11px; color:var(--soft); font-size:9px; letter-spacing:.34em; }
.category i { width:24px; height:1px; background:var(--gold); }
.content { position:absolute; left:clamp(34px,10vw,160px); top:50%; transform:translateY(-47%); max-width:650px; }
.eyebrow { margin:0 0 22px; color:var(--gold); font-size:10px; font-weight:500; letter-spacing:.45em; animation:rise .9s .3s both; }
h1 { margin:0; max-width:650px; font:300 clamp(52px,6.4vw,102px)/.84 "Cormorant Garamond",serif; letter-spacing:-.035em; animation:rise 1s .42s both; }
.intro { margin:30px 0 0; color:var(--soft); font:300 clamp(13px,1.1vw,16px)/1.8 "Manrope",sans-serif; letter-spacing:.06em; animation:rise .9s .58s both; }
.rule { width:150px; height:1px; margin:30px 0 22px; background:rgba(90,62,53,.2); overflow:hidden; }
.rule span { display:block; width:52px; height:100%; background:var(--gold); animation:draw 1.2s .9s both; }
.signature { margin:0; font:italic 400 clamp(15px,1.4vw,20px)/1.3 "Cormorant Garamond",serif; letter-spacing:.08em; animation:rise .9s .72s both; }
footer { bottom:clamp(34px,5vh,58px); color:rgba(59,41,37,.55); font-size:8px; letter-spacing:.25em; animation:rise .9s .9s both; }
.monogram { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(83,55,47,.3); border-radius:50%; font:400 13px/1 "Cormorant Garamond",serif; letter-spacing:0; }
@keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes reveal-image { from{opacity:0;transform:scale(1.06)} to{opacity:1;transform:scale(1.015)} }
@keyframes draw { from{transform:translateX(-100%)} to{transform:translateX(0)} }
@media (max-width:700px) {
  .hero__image { background-position:67% center; }
  .hero__veil { background:linear-gradient(180deg,rgba(246,235,224,.6) 0%,rgba(241,222,205,.22) 32%,rgba(246,235,224,.88) 64%,rgba(246,235,224,.98) 100%); }
  .hero::after { inset:9px; }
  .topbar { top:32px; left:27px; right:27px; }
  .category { font-size:7px; gap:7px; letter-spacing:.25em; }
  .category i { width:14px; }
  .content { top:auto; bottom:100px; left:28px; right:28px; transform:none; max-width:400px; }
  .eyebrow { margin-bottom:13px; }
  h1 { font-size:clamp(45px,14vw,68px); line-height:.88; }
  .intro { margin-top:19px; font-size:12px; line-height:1.65; }
  .rule { margin:20px 0 16px; }
  footer { left:28px; right:28px; bottom:28px; }
  .desktop-only { display:none; }
}
@media (max-height:650px) and (max-width:700px) { .content{bottom:75px} h1{font-size:44px}.intro{margin-top:12px}.rule{margin:13px 0 10px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; } }