:root { --ink:#171412; --cream:#f7efdf; --paper:#fffaf0; --peach:#f1b294; --lime:#e3ee83; --line:rgba(23,20,18,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Arial,sans-serif; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid var(--peach); outline-offset:4px; }
.site-header { width:min(1220px,calc(100% - 48px)); margin:auto; min-height:92px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { font-family:Georgia,serif; font-size:1.45rem; font-weight:700; text-decoration:none; display:flex; align-items:center; gap:10px; letter-spacing:-.06em; }
.brand img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--ink); }
nav { display:flex; gap:20px; font-family:monospace; font-size:.78rem; }
nav a { text-decoration:none; border-bottom:1px solid transparent; }
nav a:hover { border-color:var(--ink); }
main { overflow:hidden; }
.hero { width:min(1220px,calc(100% - 48px)); min-height:660px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.hero-copy { position:relative; z-index:2; padding:50px 0; }
.eyebrow, .label { margin:0 0 17px; font:500 .7rem/1.3 monospace; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:20px; font:700 clamp(5rem,12vw,10.5rem)/.76 Georgia,serif; letter-spacing:-.105em; }
h1 span { color:var(--peach); }
.intro { max-width:355px; margin-bottom:30px; font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.35; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.button { display:inline-flex; align-items:center; gap:13px; padding:14px 18px; border-radius:99px; text-decoration:none; font-size:.9rem; font-weight:700; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { transform:translateY(-2px); }
.text-link { font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }
.hero-art { min-height:540px; position:relative; display:grid; place-items:center; }
.hero-art img { position:relative; z-index:1; width:min(100%,520px); aspect-ratio:1; object-fit:cover; border-radius:48% 52% 51% 49% / 47% 49% 51% 53%; transform:rotate(3deg); box-shadow:15px 18px 0 var(--ink); border:2px solid var(--ink); }
.sun { position:absolute; width:82%; aspect-ratio:1; background:var(--lime); border-radius:50%; transform:translate(4%,1%); }
.sticker { position:absolute; z-index:2; background:var(--paper); border:2px solid var(--ink); box-shadow:4px 5px 0 var(--ink); }
.sticker-star { top:7%; right:1%; width:70px; height:70px; display:grid; place-items:center; font-size:2rem; border-radius:50%; transform:rotate(12deg); color:#d56a5e; }
.sticker-note { bottom:9%; left:-1%; padding:11px 13px; border-radius:6px; font:500 .7rem/1.1 monospace; transform:rotate(-10deg); }
.details { width:min(1220px,calc(100% - 48px)); margin:20px auto 140px; display:grid; grid-template-columns:1.1fr 1fr .6fr; border:1px solid var(--ink); background:var(--paper); }
.details > * { min-height:190px; padding:27px; }
.details > * + * { border-left:1px solid var(--ink); }
.quote-card { font:600 clamp(1.25rem,2.1vw,1.85rem)/1.13 Georgia,serif; letter-spacing:-.04em; }
.quote-card p:last-child { max-width:420px; margin:0; }
.quote-mark { height:24px; color:var(--peach); font-size:4.5rem; line-height:.75; }
.contract-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--ink); }
code { overflow-wrap:anywhere; font:500 1.05rem monospace; }
button { cursor:pointer; border:0; background:transparent; padding:0; font:700 .8rem "DM Sans",sans-serif; text-decoration:underline; text-underline-offset:4px; }
.copy-status { min-height:16px; margin:12px 0 0; color:#875142; font:.7rem monospace; }
.ticker { margin:0; font:700 clamp(1.8rem,3vw,3rem)/1 Georgia,serif; letter-spacing:-.08em; }
.closing { width:min(1010px,calc(100% - 48px)); margin:0 auto 130px; display:flex; align-items:center; gap:clamp(30px,9vw,120px); }
.closing img { width:220px; aspect-ratio:1; object-fit:cover; border-radius:50%; border:2px solid var(--ink); box-shadow:9px 10px 0 var(--peach); }
h2 { margin-bottom:22px; font:700 clamp(2.8rem,6vw,5rem)/.91 Georgia,serif; letter-spacing:-.08em; }
footer { width:min(1220px,calc(100% - 48px)); margin:auto; padding:25px 0; display:flex; justify-content:space-between; gap:25px; border-top:1px solid var(--line); font:.68rem/1.4 monospace; text-transform:uppercase; }
footer p { margin:0; }
@media (max-width:768px) { .site-header,.hero,.details,.closing,footer { width:min(100% - 32px,600px); } .site-header { min-height:76px; } .hero { min-height:auto; grid-template-columns:1fr; gap:0; padding:74px 0 85px; } .hero-copy { padding:0; } .hero-art { min-height:390px; margin-top:28px; } .hero-art img { width:min(86vw,430px); box-shadow:10px 12px 0 var(--ink); } .details { margin-bottom:90px; grid-template-columns:1fr; } .details > * { min-height:auto; padding:24px; } .details > * + * { border-top:1px solid var(--ink); border-left:0; } .closing { margin-bottom:82px; gap:28px; } .closing img { width:135px; } footer { flex-direction:column; gap:7px; } }
@media (max-width:430px) { nav { gap:12px; font-size:.7rem; } .brand { font-size:1.25rem; } h1 { font-size:5.4rem; } .hero-art { min-height:330px; } .sticker-note { left:0; } .closing { align-items:flex-start; flex-direction:column; } .closing img { width:150px; } }