/* Artwork pixels remain untouched. Frame, mat and shadow are CSS only. */
:root { color-scheme: light; --page:#faf9f6; --ink:#292d27; --muted:#77796f; --line:#deded4; --accent:#68714d; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font-family:Georgia,'Times New Roman',serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.page-shell { width:min(1320px,calc(100% - 96px)); margin:auto; }
.site-header { min-height:120px; display:flex; align-items:center; gap:40px; border-bottom:1px solid var(--line); }
.brand { font-size:35px; white-space:nowrap; letter-spacing:-1.5px; }
.brand span { display:block; margin-top:8px; text-align:center; font:9px Arial,sans-serif; letter-spacing:4px; }
nav { display:flex; gap:26px; margin-left:auto; flex-wrap:wrap; }
nav a { padding:8px 0; font-size:15px; }
nav a:hover,nav a[aria-current] { color:var(--accent); text-decoration:underline; text-underline-offset:7px; }
.language { font:12px Arial,sans-serif; color:var(--muted); }
.intro { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:end; padding:74px 0 64px; }
.eyebrow { font:10px Arial,sans-serif; letter-spacing:2px; color:var(--accent); margin:0 0 20px; }
h1 { font-size:clamp(36px,4.5vw,64px); font-weight:400; line-height:1.12; letter-spacing:-1.8px; margin:0; max-width:660px; }
.intro-copy { color:var(--muted); font-size:17px; line-height:1.8; max-width:440px; margin:0 0 3px auto; }
.home-brand { font-size:32px; letter-spacing:-1.2px; }
.home-intro { position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,6vw,76px); align-items:start; padding:30px 0 40px; }
.home-intro::after { content:""; position:absolute; right:0; bottom:0; width:72px; height:1px; background:var(--accent); }
.home-intro-title h1 { max-width:580px; font-size:clamp(38px,4vw,56px); line-height:1.08; letter-spacing:-1.8px; }
.home-intro-story { max-width:530px; padding-top:4px; }
.home-intro-story .intro-copy { margin:0; max-width:none; color:#5f635a; font-size:16px; line-height:1.7; letter-spacing:-.1px; }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding:23px 0 32px; flex-wrap:wrap; }
h2 { font-size:25px; font-weight:400; margin:0; }
.gallery-controls,.year-filter,.frame-control { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.gallery-controls { gap:24px; font:12px Arial,sans-serif; }
[hidden] { display:none !important; }
label { color:var(--muted); }
select,button { font:inherit; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:0; padding:10px 12px; cursor:pointer; }
button:hover { border-color:var(--accent); }
.art-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:46px 34px; --stage-height:clamp(250px,29vw,385px); --stage-padding:20px; --frame-color:#eeede7; --frame-border:3px; --mat-size:13px; --frame-shadow:0 8px 15px -9px #25291f50,0 1px 3px #25291f24; }
.art-card { margin:0; min-width:0; }
.art-stage { height:var(--stage-height); display:flex; justify-content:center; align-items:center; padding:var(--stage-padding); background:#f2f1ed; }
.art-frame { display:inline-flex; max-width:100%; max-height:100%; padding:var(--mat-size); border:var(--frame-border) solid var(--frame-color); background:#fffefa; box-shadow:var(--frame-shadow); transition:transform 180ms ease; }
.art-frame img { display:block; max-width:100%; max-height:calc(var(--stage-height) - 2 * var(--stage-padding) - 2 * var(--mat-size) - 2 * var(--frame-border)); width:auto; height:auto; object-fit:contain; min-width:0; }
.art-stage:hover .art-frame { transform:translateY(-3px); }
.art-grid[data-frame="wood"] { --frame-color:#a88a63; --frame-border:7px; --mat-size:12px; }
.art-grid[data-frame="none"] { --frame-border:0px; --mat-size:0px; --frame-shadow:none; }
/* Do not double-frame or crop legacy images with a baked-in frame. */
.art-frame--baked { --frame-border:0px; --mat-size:0px; --frame-shadow:none; background:transparent; }
figcaption { padding-top:17px; display:flex; gap:16px; justify-content:space-between; align-items:baseline; }
figcaption h3 { margin:0; font-size:17px; font-weight:400; line-height:1.4; }
figcaption span { color:var(--muted); font:12px Arial,sans-serif; }
.image-unavailable { color:var(--muted); font:14px Arial,sans-serif; }
.archive-link { text-align:center; padding:60px 0 70px; }
.archive-link a { color:var(--accent); border-bottom:1px solid #aeb498; padding-bottom:9px; }
.archive-link span { margin-left:15px; }
footer { border-top:1px solid var(--line); padding:27px 0 35px; display:flex; gap:24px; align-items:center; color:var(--muted); font:12px/1.6 Arial,sans-serif; }
footer p { margin:0; } footer a { margin-left:auto; white-space:nowrap; }
@media(max-width:1000px) { .page-shell { width:calc(100% - 48px); } .site-header { gap:22px; } nav { gap:17px; } .intro { gap:28px; } .art-grid { gap:34px 22px; --stage-padding:12px; } }
@media(max-width:760px) { .site-header { flex-wrap:wrap; padding:24px 0; gap:22px; } .language { margin-left:auto; } nav { width:100%; order:3; margin:0; gap:20px; } .intro { grid-template-columns:1fr; padding:46px 0 38px; } .intro-copy { margin:0; font-size:16px; } .home-intro { grid-template-columns:1fr; gap:20px; padding:28px 0 32px; } .home-intro-story { max-width:620px; padding-top:0; } .home-intro-story .intro-copy { font-size:15px; line-height:1.65; } .art-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } footer { flex-wrap:wrap; } }
@media(max-width:520px) { .page-shell { width:calc(100% - 36px); } .brand { font-size:30px; } .home-brand { font-size:27px; } nav { gap:16px; } nav a { font-size:13px; } .home-intro-title h1 { font-size:clamp(34px,10vw,44px); line-height:1.1; letter-spacing:-1.3px; } .gallery-controls { gap:16px; } .art-grid { grid-template-columns:1fr; gap:35px; --stage-height:390px; --stage-padding:22px; } footer p { order:3; width:100%; } }
@media(prefers-reduced-motion:reduce) { .art-frame { transition:none; } .art-stage:hover .art-frame { transform:none; } }