:root{--violet:#7B6CC4;--peri:#9AA6E8;--umber:#2E2522;--cream:#F5F0E6;--leaf:#4E8A4A;--ink:#2b2622;--paper:#fffdf8}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 -apple-system,"Segoe UI",system-ui,Helvetica,Arial,sans-serif}
a{color:var(--violet)}img,svg{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid #e8e0d0;background:var(--paper);position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{font:600 1.35rem Georgia,"Times New Roman",serif;color:var(--umber);text-decoration:none;letter-spacing:.01em}
nav a{margin-right:20px;text-decoration:none;color:var(--umber);font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--violet);color:var(--violet)}
.hero{background:linear-gradient(160deg,#ECE6FA 0%,#F7F1E6 60%,#FBF6EC 100%);padding:64px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero h1{font:600 clamp(2rem,5vw,3.2rem)/1.15 Georgia,serif;color:var(--umber);margin:0 0 14px}
.hero p.lead{font-size:1.15rem;margin:0 0 22px;max-width:34ch}
.hero .art{border-radius:6px;overflow:hidden;box-shadow:0 14px 40px rgba(46,37,34,.18);aspect-ratio:4/5}
.btn{display:inline-block;background:var(--violet);color:#fff;text-decoration:none;padding:12px 24px;border-radius:999px;font-weight:600}
.btn:hover{background:#6554b0}.btn.ghost{background:transparent;color:var(--violet);border:2px solid var(--violet);margin-left:10px}
section{padding:56px 0}h2{font:600 1.9rem Georgia,serif;color:var(--umber);margin:0 0 8px}
.sub{color:#6b625a;margin:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:30px}
figure.work{margin:0;background:#fff;border:1px solid #ece4d4;border-radius:6px;overflow:hidden}
figure.work .pic{aspect-ratio:4/5;overflow:hidden;background:#eee}figure.work svg{width:100%;height:100%}
figure.work figcaption{padding:16px 18px 20px}
figure.work h3{font:600 1.2rem Georgia,serif;margin:0 0 2px;color:var(--umber)}
.meta{font-size:.85rem;color:#7a7066;margin:0 0 10px}.story{font-style:italic;margin:0 0 12px}
.band{background:var(--cream)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.card{background:#fff;border:1px solid #ece4d4;border-radius:6px;padding:22px}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.clip{aspect-ratio:9/16;max-height:360px;background:#2E2522;border-radius:6px;display:grid;place-items:center;color:#d9cfc0;font-size:.85rem;text-align:center;padding:14px}
footer{background:var(--umber);color:#e8dfcf;padding:34px 0;font-size:.92rem}footer a{color:#cfc4f5}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:9}
@media(max-width:760px){.hero .wrap,.two{grid-template-columns:1fr}.hero{padding:40px 0}.btn.ghost{margin:10px 0 0}section{padding:40px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}