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

:root { --ink:#000000; --blush:#f8f1ec; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--blush); }
body { color:var(--ink); font-family:"Montserrat",Arial,sans-serif; text-transform:lowercase; }
.hero { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate; }
.hero__media { position:absolute; inset:0; z-index:0; display:block; overflow:hidden; transform:scale(1.015); animation:reveal-image 1.8s cubic-bezier(.2,.7,.2,1) both; }
.hero__media img { width:100%; height:100%; display:block; object-fit:cover; object-position:64% center; }
.hero::after { content:""; position:absolute; inset:14px; z-index:3; border:1px solid rgba(0,0,0,.12); 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); z-index:2; animation:rise .9s .15s both; }
.brand { display:block; color:var(--ink); text-decoration:none; }
.brand img { display:block; width:clamp(150px,12vw,200px); height:auto; }
.content { position:absolute; left:clamp(34px,10vw,160px); top:50%; z-index:2; transform:translateY(-47%); max-width:650px; }
.eyebrow { margin:0 0 24px; color:var(--ink); font-size:clamp(13px,1.05vw,17px); font-weight:500; letter-spacing:.42em; animation:rise .9s .3s both; }
h1 { margin:0; max-width:700px; font:300 clamp(48px,5.9vw,92px)/.94 "Montserrat",sans-serif; letter-spacing:-.06em; animation:rise 1s .42s both; }
.intro { margin:30px 0 0; color:var(--ink); font:300 clamp(13px,1.1vw,16px)/1.8 "Montserrat",sans-serif; letter-spacing:.04em; animation:rise .9s .58s both; }
.rule { width:150px; height:1px; margin:30px 0 22px; background:rgba(0,0,0,.14); overflow:hidden; }
.rule span { display:block; width:52px; height:100%; background:rgba(0,0,0,.55); animation:draw 1.2s .9s both; }
.signature { margin:0; font:400 clamp(11px,1vw,14px)/1.4 "Montserrat",sans-serif; letter-spacing:.15em; animation:rise .9s .72s both; }
footer { bottom:clamp(34px,5vh,58px); z-index:2; color:rgba(0,0,0,.48); font-size:8px; letter-spacing:.25em; animation:rise .9s .9s both; }
@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__media img { object-position:80% center; }
  .hero::after { inset:9px; }
  .topbar {
    top:18px;
    left:18px;
    right:auto;
    width:max-content;
    padding:10px 14px 12px;
    background:var(--blush);
    border:1px solid rgba(0,0,0,.07);
    border-radius:20px;
    box-shadow:0 8px 26px rgba(0,0,0,.08);
  }
  .brand img { width:145px; }
  .content { top:auto; bottom:100px; left:28px; right:28px; transform:none; max-width:400px; }
  .eyebrow { margin-bottom:15px; font-size:12px; }
  h1 { font-size:clamp(40px,11.5vw,58px); line-height:.96; letter-spacing:-.055em; }
  .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; } }