:root { --accent:#305c77; --wash:#e8eff4; }

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif&display=swap');
:root { color-scheme: light; --paper:#f8f7f3; --ink:#192825; --muted:#4f605a; --line:#d4dbd3; --serif:"Instrument Serif",Georgia,serif; }
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 "DM Sans",system-ui,sans-serif; }
.wrap { width:min(1070px,calc(100% - 64px)); margin-inline:auto; }
a { color:var(--accent); text-underline-offset:.22em; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.skip { position:absolute; left:.5rem; top:.5rem; padding:.5rem; background:var(--paper); transform:translateY(-180%); }
.skip:focus { transform:none; }
.bar { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { font:1.8rem var(--serif); color:var(--ink); text-decoration:none; }
nav { display:flex; gap:clamp(.8rem,3vw,1.8rem); flex-wrap:wrap; }
nav a { font-weight:700; font-size:.9rem; }
.hero { background:var(--wash); border-block:1px solid var(--line); }
.grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); align-items:end; gap:clamp(1.5rem,6vw,5rem); padding-block:clamp(3rem,8vw,6rem); }
h1,h2,h3 { font:400 2.4rem/1.04 var(--serif); margin:0; }
h1 { font-size:clamp(3.45rem,7vw,6.45rem); letter-spacing:-.025em; }
.eyebrow { color:var(--accent); font-size:.73rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin:0 0 .8rem; }
.intro { font-size:1.15rem; color:var(--muted); max-width:33rem; margin:1.3rem 0 0; }
.example { padding:1.5rem; background:var(--paper); border:1px solid var(--line); }
.example h2 { font-size:2.05rem; margin-bottom:.75rem; }
dl { margin:0; }
dl div { display:flex; justify-content:space-between; gap:.75rem; padding:.62rem 0; border-top:1px solid var(--line); }
dd { margin:0; color:var(--accent); font-weight:700; text-align:right; }
ul { margin:.5rem 0 0; padding-left:1.25rem; }
ul li { padding:.2rem 0; }
.details { padding-block:clamp(2.6rem,5vw,4.5rem); }
.details > h2 { font-size:clamp(2.65rem,4vw,3.7rem); margin-bottom:1.4rem; }
.details section { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:1.5rem; border-top:1px solid var(--line); padding:1.4rem 0; }
.details section p { margin:0; max-width:41rem; }
footer { border-top:1px solid var(--line); color:var(--muted); }
footer .bar { flex-wrap:wrap; padding-block:.7rem; }
@media(max-width:740px) {
    .wrap { width:calc(100% - 36px); }
    .grid,.details section { grid-template-columns:1fr; }
    .details section { gap:.65rem; }
    header .bar { align-items:flex-start; justify-content:center; flex-direction:column; gap:.25rem; padding:.55rem 0; }
}