:root{color-scheme:light;--bg:#f7f5ed;--ink:#211e2c;--muted:#514b5b;--line:#d8d2df;--accent:#5c3ca1;--white:#fdfcf8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 system-ui,sans-serif}
a{color:inherit;text-underline-offset:.22em}
a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
img{display:block;max-width:100%}
.wrap{width:min(1100px,calc(100% - 3rem));margin-inline:auto}
.header,.footer,.section-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.header{min-height:5.5rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:750;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:clamp(.65rem,3vw,2rem);font-weight:650;font-size:.9rem}
nav a,.hero-link,.back{color:var(--accent)}
.hero{padding:clamp(3.8rem,10vw,8rem) 0 clamp(3rem,7vw,5.5rem)}
h1,h2,h3,p{margin:0 0 1rem}
h1,h2,h3{font-family:Georgia,serif;font-weight:500;line-height:1.04}
h1{font-size:clamp(3.25rem,8vw,7.75rem);letter-spacing:-.075em}
.hero h1{font-size:clamp(4.4rem,14vw,10.4rem)}
h1 em{font-weight:400;color:var(--accent)}
h2,h3{font-size:clamp(1.9rem,4vw,3.3rem);letter-spacing:-.05em}
.intro{font-size:clamp(1.12rem,2vw,1.35rem);color:var(--muted);max-width:39rem}
.eyebrow{font:700 .72rem/1.4 ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dot{display:inline-block;width:.62rem;height:.62rem;border-radius:50%;background:var(--accent);margin-right:.35rem}
.hero-link,.back{display:inline-block;font-weight:700}
.section-head{border-bottom:1px solid var(--line);margin-bottom:1.3rem}
.card{display:grid;grid-template-columns:1.2fr 1fr;background:var(--white);border:1px solid var(--line);border-radius:1.2rem;overflow:hidden;margin-bottom:1.25rem}
.art{display:grid;align-items:stretch;min-width:0;overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover}
.card-text{padding:clamp(1.4rem,4vw,2.7rem)}
.card-text h3{margin:.65rem 0 .85rem}
.card-text p:not(.eyebrow){color:var(--muted)}
.pill{display:inline-block;background:#ede7f5;color:#3e2c62;padding:.22rem .63rem;border-radius:2rem;font-size:.76rem;font-weight:700}
.button{display:inline-block;padding:.52rem .82rem;border:1px solid var(--line);border-radius:.5rem;text-decoration:none;font-weight:700;max-width:100%;overflow-wrap:anywhere}
.button:hover{border-color:var(--accent);color:var(--accent)}
.dark{background:var(--ink);color:white;border-color:var(--ink)}
.dark:hover{background:var(--accent);color:white}
.links,.actions{display:flex;flex-wrap:wrap;gap:.6rem 1rem}
.links{margin-top:1rem;color:var(--accent);font-size:.91rem}
.footer{border-top:1px solid var(--line);margin-top:3.5rem;padding-block:1.5rem;color:var(--muted);font-size:.9rem;flex-wrap:wrap}
.detail{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,4rem);margin-block:2rem 4rem}
.detail h1{margin:.75rem 0 1rem;font-size:clamp(3.05rem,7vw,6.1rem)}
.detail .art{border-radius:1.2rem}
.back{margin-top:2rem}
.doc{max-width:43rem;margin:0 auto 4rem}
.doc .eyebrow{margin-top:2rem}
.doc h1{font-size:clamp(3.15rem,7vw,5.5rem)}
.doc h2{margin-top:2rem;font-size:1.7rem}
.doc .button{margin-bottom:1rem}
.directory{padding:0;list-style:none;margin-block:1.5rem}
.directory a{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-weight:700}
.skip{position:absolute;top:0;left:1rem;padding:.6rem;background:white;transform:translateY(-120%)}
.skip:focus{transform:none}
@media(max-width:740px){.card,.detail{grid-template-columns:1fr}.art img{height:auto}.detail .art{max-width:36rem}.header{min-height:4.25rem}}
@media(max-width:380px){.wrap{width:calc(100% - 1.5rem)}.brand img{width:27px;height:27px}.brand{gap:.35rem}nav{font-size:.82rem}}