/* Shared styles for the individual painting pages in work/ (generated by scripts/make-painting-pages.mjs) */
:root{
  --wall:#E6EAEC; --surface:#F6F7F7; --ink:#1D2B3A; --muted:#55626F;
  --ochre:#D9A23B; --alizarin:#9E2B3E; --viridian:#2E6B5E; --line:#C9D0D4;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --wall:#161D25; --surface:#1E2731; --ink:#E9ECEE; --muted:#A3AEB8;
    --ochre:#E8B85A; --alizarin:#D0596C; --viridian:#5FA593; --line:#33404C;
    color-scheme: dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--wall);color:var(--ink);font-family:Figtree,system-ui,sans-serif;font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
h1{font-family:"Young Serif",Georgia,serif;font-weight:400;line-height:1.1;font-size:clamp(2.2rem,5vw,3.6rem)}
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--wall) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:"Young Serif",serif;font-size:1.3rem;text-decoration:none}
.logo span{display:inline-block;width:.55em;height:.55em;border-radius:50% 40% 55% 45%;background:var(--alizarin);margin-left:.15em}
nav ul{display:flex;gap:clamp(1rem,3vw,2rem);list-style:none}
nav ul a{text-decoration:none;font-weight:500;font-size:.95rem}
nav ul a:hover{color:var(--alizarin)}
.btn{display:inline-block;padding:.85rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--wall)}
.btn:hover{background:var(--alizarin);border-color:var(--alizarin);color:#fff}

.piece{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-top:1.5rem;padding-bottom:clamp(3rem,7vw,5rem)}
.back,.pager{grid-column:1/-1}
.back a,.pager a{text-decoration:none;font-weight:500}
.back a:hover,.pager a:hover{color:var(--alizarin)}
.frame{background:var(--surface);padding:clamp(.6rem,1.5vw,1rem);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);justify-self:center}
.frame img{max-height:78vh;width:auto}
.medium{color:var(--muted);margin-top:.6rem}
.study{margin-top:1rem;padding:.8rem 1rem;border-left:4px solid var(--ochre);background:var(--surface);font-size:.95rem}
.poem{font-style:italic;margin-top:1.25rem;max-width:46ch;line-height:1.65}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.note{color:var(--muted);font-size:.92rem;margin-top:.8rem}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.5rem}
footer{border-top:1px solid var(--line);padding:2rem 0;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer .links{display:flex;flex-wrap:wrap;gap:1.25rem}
@media (max-width:820px){
  .piece{grid-template-columns:1fr}
  .frame img{max-height:none;width:100%}
  nav ul{gap:1rem}nav ul li:nth-child(3){display:none}
}