:root{--paper:#f7f4ee;--ink:#14213d;--body:#2d3748;--muted:#6b7280;--rule:#d9d2c3;--accent:#8a6d3b;--card:#fffdf9;--draft:#fbe9a6}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:"Source Serif 4",Georgia,serif;font-size:18px;line-height:1.65}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
/* header */
header{padding:28px 0;border-bottom:1px solid var(--rule)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.mark{width:44px;height:44px;flex:none}
.brand-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:600;letter-spacing:.02em;color:var(--ink);line-height:1}
.brand-sub{display:block;font-family:"Inter",Arial,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:6px}
nav{display:flex;gap:28px}
nav a{font-family:"Inter",Arial,sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{border-bottom-color:var(--accent)}
/* hero */
.hero{padding:120px 0 112px}
.eyebrow{font-family:"Inter",Arial,sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 24px}
.hero h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;color:var(--ink);font-size:clamp(40px,6.2vw,76px);line-height:1.04;letter-spacing:-.01em;margin:0 0 40px;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--accent)}
.lede{max-width:34em;font-size:20px;margin:0 0 20px}
.aside{max-width:34em;margin:40px 0 0;padding-left:20px;border-left:2px solid var(--accent);font-style:italic;color:var(--ink);font-size:20px}
/* inner pages */
.page{padding:88px 0 96px}
.page h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;color:var(--ink);font-size:clamp(38px,5vw,58px);line-height:1.1;margin:0 0 48px;max-width:18ch}
.principles{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.principles li{display:grid;grid-template-columns:88px 1fr;gap:24px;padding:36px 0;border-bottom:1px solid var(--rule)}
.num{font-family:"Cormorant Garamond",Georgia,serif;font-size:40px;color:var(--accent);line-height:1}
.principles h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;color:var(--ink);font-size:28px;line-height:1.2;margin:0 0 10px}
.principles p{margin:0;max-width:36em}
.doc>*{max-width:40em}
.doc h2{font-family:"Inter",Arial,sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:40px 0 8px;font-weight:600}
.doc .updated{font-family:"Inter",Arial,sans-serif;font-size:13px;color:var(--muted);margin:-32px 0 32px}
.card{background:var(--card);border:1px solid var(--rule);padding:32px 36px;margin:0 0 32px}
.card ul{margin:0;padding:0;list-style:none}
.card li{padding:12px 0 12px 32px;position:relative;border-bottom:1px solid #eee7da}
.card li:last-child{border-bottom:0}
.card li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:1px;background:var(--accent)}

/* footer */
footer{border-top:1px solid var(--rule);padding:40px 0 48px;font-family:"Inter",Arial,sans-serif;font-size:13px;color:var(--muted);line-height:1.6}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
footer .links a{margin-left:20px;text-decoration:none;color:var(--ink)}footer .links a:first-child{margin-left:0}
footer .links a:hover{text-decoration:underline}
footer .eeo{max-width:60em;margin:0}
@media (max-width:640px){
 body{font-size:17px}
 header{padding:20px 0}nav{gap:20px}
 .hero{padding:64px 0 64px}.lede,.aside{font-size:18px}
 .page{padding:56px 0 64px}.page h1{margin-bottom:32px}
 .principles li{grid-template-columns:1fr;gap:8px;padding:28px 0}
 .card{padding:20px}
}