:root { --ivory:#F2F3EB; --aubergine:#102D2C; --coral:#C9EA85; --muted:#5E716A; }
body { background:var(--ivory); }
nav { padding:32px clamp(24px,5vw,80px); border-bottom:1px solid rgba(16,45,44,.15); }
.logo-mark { overflow:visible; }
.logo-mark i { inset:auto; left:3px; top:2px; width:28px; height:23px; border-radius:40px 40px 0 0; }
.logo-mark b { top:auto; bottom:2px; right:auto; left:0; width:34px; height:3px; clip-path:none; }
.content { max-width:1000px; padding:90px clamp(24px,5vw,60px); }
h1 { font-size:clamp(48px,7vw,88px); font-weight:500; letter-spacing:-.06em; }
h2 { font-size:30px; letter-spacing:-.035em; border-color:rgba(16,45,44,.15); }
.updated { color:var(--muted); }
.link { border-bottom-color:var(--aubergine); }
::selection { color:#102D2C; background:#C9EA85; }
nav { gap:20px; }
.logo { flex-wrap:wrap; row-gap:4px; }
.link { display:inline-flex; align-items:center; min-height:40px; flex-shrink:0; }
.content { padding-block:64px 80px; }
h1 { margin:0 0 32px; line-height:1.1; overflow-wrap:break-word; }
h2 { line-height:1.3; }
p { overflow-wrap:break-word; }
a:focus-visible { outline:2px solid var(--aubergine); outline-offset:5px; }
@media(max-width:600px) {
 nav { padding:20px; }
 .logo { gap:8px; font-size:21px; }
 .logo small { font-size:7px; }
 .content { padding:40px 24px 56px; }
 h1 { font-size:42px; margin-bottom:24px; }
 h2 { font-size:25px; margin-top:32px; }
 p { font-size:15px; line-height:1.85; }
 .section { margin-bottom:36px; }
}