:root{color-scheme:light;--paper:#f3efe6;--ink:#252720;--accent:#ad3e27;--muted:#54574c;--line:#25272033}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,sans-serif}
a{color:inherit;text-underline-offset:5px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.skip{position:absolute;left:-10000px;top:10px;background:var(--paper);padding:8px 12px;z-index:5}.skip:focus{left:10px}
.site-header,.site-main,.site-footer{max-width:1200px;margin:auto;padding:28px 5%}
.site-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}
.brand{font-size:25px;font-weight:700;letter-spacing:-1px;text-decoration:none;white-space:nowrap}.brand span{color:var(--accent)}
.site-nav{display:flex;gap:25px;flex-wrap:wrap;font-size:14px}.site-nav a[aria-current="page"]{color:var(--accent);text-decoration-thickness:2px}
.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:13px;color:#686a60}
.eyebrow,.number{color:var(--accent);font-size:12px;letter-spacing:2px;text-transform:uppercase}
h1,h2,h3{font-family:Georgia,serif;font-weight:400;line-height:1.08}h1{font-size:clamp(48px,6.8vw,82px);letter-spacing:-3px;margin:20px 0}h2{font-size:clamp(34px,4vw,48px);margin:14px 0 28px}h3{font-size:27px;margin:16px 0}
p{margin:0 0 1.2em}.lead{font-size:20px;color:var(--muted);max-width:670px}.small{font-size:14px;color:var(--muted)}
.breadcrumbs{font-size:13px;color:var(--muted);margin:4px 0 24px}.breadcrumbs span{padding:0 9px;color:#8e9188}
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:44px 0 60px}
.intro-copy{max-width:620px}.intro .lead{max-width:550px}.intro-link{display:inline-block;margin-top:12px}
.canvas{min-height:350px;aspect-ratio:6/5;background:#d8b491;position:relative;overflow:hidden;isolation:isolate}
.canvas:before,.canvas:after,.canvas i{content:"";display:block;position:absolute}
.canvas:before{width:58%;height:78%;border-radius:50% 50% 0 0;left:20%;bottom:0;background:var(--shape,#ad3e27)}
.canvas:after{width:40%;aspect-ratio:1;border-radius:50%;left:9%;top:12%;background:var(--sun,#e9cb69);mix-blend-mode:multiply}
.canvas i{width:13%;height:120%;right:14%;top:-10%;transform:rotate(24deg);background:var(--stripe,#233f38)}
.motif-color{--shape:#ad3e27;--sun:#e9cb69;--stripe:#233f38}
.motif-composition{background:#c8c9ae;--shape:#233f38;--sun:#dfb177;--stripe:#8e3f30}
.motif-rhythm{background:#d9cbb7;--shape:#818b74;--sun:#e9cb69;--stripe:#ad3e27}
.motif-light{background:#a4a98d;--shape:#252720;--sun:#e9cb69;--stripe:#d8b491}
.motif-space{background:#d8b491;--shape:#667f79;--sun:#e9cb69;--stripe:#ad3e27}
.motif-texture{background:#c6a884;--shape:#ad3e27;--sun:#e5d0a2;--stripe:#233f38}
.motif-still-life{background:#ddc8a8;--shape:#233f38;--sun:#ad3e27;--stripe:#e9cb69}
.motif-looking{background:#9fa88d;--shape:#ad3e27;--sun:#e9cb69;--stripe:#252720}
figcaption{font-size:12px;color:#686a60;margin-top:10px}figure{margin:0}
.section{border-top:1px solid var(--line);padding:48px 0}.section-heading{max-width:700px}
.section-heading p{color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.card{padding-bottom:20px;border-bottom:1px solid var(--line)}.card .swatches{display:flex;height:94px;margin-bottom:20px}.swatches i{flex:1;background:var(--c)}
.card h3{margin:12px 0}.card h3 a{text-decoration:none}.card h3 a:hover{text-decoration:underline}.card p{font-size:15px;color:var(--muted)}
.card .read{font-size:13px;text-decoration:none;color:var(--accent)}.card .read:hover{text-decoration:underline}
.feature{display:grid;grid-template-columns:1fr 2fr;gap:35px}.feature p{max-width:710px}
.article-head{max-width:900px;padding:24px 0 50px}.article-head h1{max-width:850px}.article-head .lead{max-width:740px}
.article-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:70px;align-items:start;border-top:1px solid var(--line);padding-top:44px}
.prose{max-width:720px}.prose h2{font-size:35px;margin:42px 0 20px}.prose h2:first-child{margin-top:0}.prose p{line-height:1.8}.prose ul,.prose ol{padding-left:24px;margin:0 0 28px}.prose li{margin-bottom:11px}
.aside{position:sticky;top:25px}.aside .canvas{min-height:0;aspect-ratio:1}.aside figcaption{margin-bottom:28px}.aside h3{font-size:23px}.aside ul{padding-left:19px;font-size:14px;color:var(--muted)}
.practice{background:#e8e1d3;padding:28px 32px;margin:44px 0}.practice h2{font-size:30px;margin:8px 0 18px}.practice p,.practice li{font-size:16px}.practice ol{margin-bottom:0}
.next{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:36px 0 0;margin-top:50px;font-size:15px}.next a{max-width:45%}
.closing{max-width:760px;font:31px/1.4 Georgia,serif;margin:0 0 24px}
@media(max-width:800px){.intro,.article-layout,.feature{grid-template-columns:1fr;gap:25px}.aside{position:static;max-width:430px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro{padding-top:35px}.canvas{min-height:280px}}
@media(max-width:560px){.site-header{align-items:flex-start;flex-direction:column;gap:12px}.site-nav{gap:10px 18px}.card-grid{grid-template-columns:1fr}.site-footer{display:block}.site-footer span{display:block}.intro{gap:28px}.canvas{min-height:250px}.article-layout{gap:30px}.practice{padding:22px}.next{display:block}.next a{display:block;max-width:none;margin-bottom:18px}h1{letter-spacing:-2px}}