@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#241a16; --red:#e94330; --cream:#fff7e9; --yellow:#ffc940; --line:#291d18; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Space Grotesk", Arial, sans-serif; }
a { color:inherit; }
.page-shell { max-width:1440px; margin:0 auto; padding:24px 5vw 0; overflow:hidden; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:34px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:Fraunces, Georgia, serif; font-size:22px; font-weight:900; text-decoration:none; letter-spacing:-1.1px; }
.brand img { width:43px; height:43px; object-fit:cover; border:2px solid var(--line); border-radius:50%; }
.nav-links, .footer div { display:flex; gap:20px; align-items:center; }
.nav-links a, .footer a { font-size:14px; font-weight:700; text-decoration-thickness:2px; text-underline-offset:4px; }
.hero { display:grid; grid-template-columns:minmax(270px, .9fr) minmax(360px, 1.1fr); align-items:center; gap:7vw; min-height:calc(100vh - 102px); padding:34px 4vw 70px; position:relative; }
.hero:before { content:""; position:absolute; width:340px; height:340px; left:-148px; top:4%; background:var(--yellow); border-radius:50%; z-index:-1; }
.eyebrow { margin:0 0 12px; font-family:"DM Mono", monospace; font-size:12px; font-weight:500; letter-spacing:.12em; }
h1, h2 { margin:0; font-family:Fraunces, Georgia, serif; letter-spacing:-.075em; line-height:.82; }
h1 { font-size:clamp(78px, 12vw, 172px); font-weight:900; }
h1 em { color:var(--red); font-style:normal; }
.intro { max-width:390px; margin:30px 0; font-size:clamp(17px, 1.7vw, 22px); line-height:1.35; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; gap:11px; align-items:center; border:2px solid var(--line); padding:14px 17px; font-weight:700; text-decoration:none; box-shadow:4px 4px 0 var(--line); transition:transform .15s, box-shadow .15s; }
.button:hover, .button:focus-visible { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--line); }
.button-red { background:var(--red); color:#fffdf5; }.button-plain { background:#fffdf5; }
.hero-image-wrap { width:min(100%, 590px); justify-self:end; position:relative; transform:rotate(2.2deg); }
.hero-image { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:4px solid #fffdf5; box-shadow:11px 13px 0 var(--line); }
.tape { position:absolute; z-index:1; width:110px; height:31px; background:rgba(255,201,64,.82); transform:rotate(-11deg); }.tape-one{ top:-14px; left:11%; }.tape-two{ bottom:-13px; right:7%; transform:rotate(8deg); }
.photo-note { margin:15px 0 0; font-family:"DM Mono", monospace; font-size:13px; text-align:right; transform:rotate(-2deg); }
.counter { margin:0 -5vw; padding:20px 5vw 17px; background:var(--red); border-block:3px solid var(--line); overflow:hidden; white-space:nowrap; transform:rotate(-1deg) scale(1.02); }.counter p { margin:0; color:#fffaf0; font-family:Fraunces, Georgia, serif; font-size:clamp(32px, 5.5vw, 76px); font-weight:700; letter-spacing:-.06em; text-align:center; }.counter strong { color:var(--yellow); }
.contract-section { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; padding:135px 8vw; }.contract-section h2 { font-size:clamp(48px, 6vw, 78px); }.contract-copy { max-width:300px; font-size:17px; line-height:1.4; }
.contract-card { position:relative; padding:17px 16px 16px; background:#fffdf5; border:3px solid var(--line); box-shadow:8px 8px 0 var(--yellow); }.contract-card code { display:block; padding:5px 0 17px; overflow-wrap:anywhere; font-family:"DM Mono", monospace; font-size:clamp(19px, 3vw, 33px); }.copy-button { width:100%; padding:12px; border:2px solid var(--line); background:var(--yellow); color:var(--ink); font:700 15px "Space Grotesk", sans-serif; cursor:pointer; }.copy-button:hover, .copy-button:focus-visible { background:var(--red); color:white; }.copy-status { display:block; min-height:18px; margin-top:7px; font-size:12px; }
.footer { display:flex; justify-content:space-between; gap:22px; padding:24px 0; border-top:2px solid var(--line); font-size:13px; }.footer p{margin:0;}
@media (max-width:760px) { .page-shell{ padding-inline:20px; }.nav-links{gap:12px;}.hero { grid-template-columns:1fr; gap:48px; min-height:auto; padding:40px 4px 75px; }.hero-image-wrap{ justify-self:center; width:min(100%, 460px); }.hero-copy{z-index:1;}.counter{margin-inline:-20px;}.contract-section{grid-template-columns:1fr;gap:36px;padding:90px 4px;}.footer{align-items:flex-start; flex-direction:column;}.footer div{gap:16px;} }
@media (max-width:390px) { .nav{align-items:flex-start;}.nav-links{flex-wrap:wrap;justify-content:flex-end;}.brand span{display:none;} h1{font-size:78px;} }