@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600&display=swap');

:root { --ink:#1a1a22; --paper:#f6f0e7; --coral:#d97963; --sea:#5c8584; --muted:#706a67; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 8% 10%, #e2c8b6 0, transparent 27rem), radial-gradient(circle at 95% 90%, #c6ddd4 0, transparent 30rem), var(--paper); font-family:Manrope, sans-serif; }
main { width:min(1120px, calc(100% - 40px)); min-height:100svh; margin:0 auto; padding:clamp(28px, 5vw, 70px) 0 26px; display:flex; flex-direction:column; }
.kicker, .tiny, footer { font-family:'DM Mono', monospace; letter-spacing:.08em; text-transform:uppercase; }
.kicker { margin:0 0 19px; color:var(--sea); font-size:11px; }
.card { flex:1; min-height:0; display:grid; grid-template-columns:minmax(290px, .88fr) 1.12fr; overflow:hidden; border:1px solid rgba(26,26,34,.22); border-radius:3px; background:rgba(255,253,249,.54); box-shadow:12px 14px 0 rgba(26,26,34,.08); }
.portrait-wrap { min-height:0; position:relative; overflow:hidden; background:#c7c6c3; }
.portrait-wrap img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:50% 33%; filter:saturate(.84) contrast(.96); }
.portrait-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(26,26,34,.2)); mix-blend-mode:multiply; }
.sun { position:absolute; z-index:1; right:25px; top:27px; width:13px; height:13px; border-radius:50%; background:#f9c94d; box-shadow:0 0 0 6px rgba(249,201,77,.18); }
.words { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(38px, 7vh, 100px) clamp(38px, 7vw, 100px); }
.tiny { margin:0 0 24px; color:var(--coral); font-size:10px; }
h1 { margin:0 0 30px; font-family:'DM Serif Display', Georgia, serif; font-size:clamp(66px, 9vw, 126px); font-weight:400; line-height:.76; letter-spacing:-.075em; }
p { max-width:470px; margin:0 0 18px; font-size:16px; line-height:1.75; }
.lede { color:var(--sea); font-size:clamp(18px, 2vw, 22px); line-height:1.5; }
.aside { margin-top:9px; font-family:'DM Serif Display', Georgia, serif; font-size:20px; font-style:italic; color:var(--coral); }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:24px; color:var(--muted); font-size:10px; }
@media (min-width:701px) and (max-height:850px) { main { padding:22px 0 16px; } .kicker { margin-bottom:12px; } .words { padding:28px clamp(38px, 6vw, 76px); } .tiny { margin-bottom:14px; } h1 { font-size:clamp(70px, 7vw, 94px); margin-bottom:19px; } p { margin-bottom:12px; font-size:14px; line-height:1.5; } .lede { font-size:18px; } .aside { margin-top:3px; font-size:18px; } footer { margin-top:24px; } }
@media (max-width:700px) { main { width:min(100% - 26px, 580px); } .card { flex:initial; grid-template-columns:1fr; } .portrait-wrap { min-height:480px; } .portrait-wrap img { object-position:50% 25%; } .words { padding:42px 29px 48px; } h1 { font-size:82px; } footer { align-items:flex-start; flex-direction:column; gap:7px; } }