/* Liz Spooner: styles. White base, deep sea-blue accents. */
:root{
  --paper:#fff;--ink:#14232e;--muted:#5b6b75;--line:#dbe3e7;--mat:#eef2f4;--accent:#2f6f8f;
  --ease:cubic-bezier(.22,.61,.36,1);--pad:clamp(1.25rem,5vw,4rem);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.7 var(--serif);
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto;width:100%;padding:0 var(--pad) 5rem}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-weight:400}
h2{margin:3.5rem 0 1rem;font-size:1.6rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;font:.9rem var(--sans)}
.skip:focus{left:1rem;top:1rem}
.page-title{margin:1rem 0 1.25rem;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1}
.section-title{margin:3.5rem 0 1.5rem}
.eyebrow{margin:0 0 .9rem;font:.72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{color:var(--accent)}
.empty{color:var(--muted);font-family:var(--sans)}

/* ---- header ---- */
header.site{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 2rem;
  padding:1.5rem var(--pad);view-transition-name:site-header}
.name{font:500 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
nav#menu{display:flex;gap:1.5rem;font:500 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase}
nav#menu a{text-decoration:none;color:var(--ink);padding:.25rem 0;border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
nav#menu a:hover,nav#menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.burger{display:none}

/* ---- footer ---- */
footer{flex:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;margin-top:1rem;
  padding:2.5rem var(--pad);background:var(--ink);color:rgba(255,255,255,.72);font:.85rem var(--sans)}
footer a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.flinks{display:flex;gap:1.5rem}

/* ---- frames, images ---- */
.frame{position:relative;display:block;overflow:hidden;background:var(--mat);aspect-ratio:4/5}
.frame img,.frame-missing{position:absolute;inset:0;width:100%;height:100%}
.frame img{object-fit:contain;padding:7%}
.frame.soon::after{content:"Photograph to come";position:absolute;inset:0;display:grid;place-items:center;
  font:.8rem var(--sans);color:var(--muted)}
img.fade{transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.js img.fade:not(.in){opacity:0;animation:safe 1s 5s forwards}
@keyframes safe{to{opacity:1}}

/* ---- buttons / links ---- */
.more{display:inline-block;font:.95rem var(--sans);letter-spacing:.02em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:.2rem;transition:color .35s var(--ease),border-color .35s var(--ease)}
.more span{display:inline-block;transition:transform .45s var(--ease)}
.more:hover{color:var(--accent);border-color:var(--accent)}
.more:hover span{transform:translateX(4px)}

/* ---- home: a quiet index of the categories ---- */
.home-intro{max-width:46ch;margin:2rem 0 0;color:var(--muted);font-size:1rem;line-height:1.65}
.idx{margin-top:clamp(2.5rem,7vw,5.5rem);counter-reset:row}
.idx-row{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:1.25rem;row-gap:.9rem;
  margin-bottom:clamp(3.5rem,9vw,7rem);counter-increment:row;transition:opacity .5s var(--ease)}
.idx-n,.idx-title,.idx-tag{margin:0;font:500 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase}
.idx-n{grid-column:1;grid-row:1}
.idx-n::before{content:counter(row)}
.idx-title{grid-column:2/4;grid-row:1}
.idx-title a{text-decoration:none}
.idx-title a::after{content:"";position:absolute;inset:0;z-index:1}
.idx-title a:focus-visible{outline:none}
.idx-title a:focus-visible::after{outline:2px solid var(--accent);outline-offset:6px}
.idx-tag{grid-column:4/7;grid-row:1;align-self:center;font-size:.64rem;color:var(--muted)}
.idx-img{grid-row:2;align-self:start;min-width:0}
.idx-img.s1{grid-column:span 1}
.idx-img.s2{grid-column:span 2}
.idx-img img{display:block;width:100%;height:auto}
@media (hover:hover){
  .idx:hover .idx-row{opacity:.4}
  .idx .idx-row:hover{opacity:1}
  .idx-row:hover .idx-title a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.3em}
  .card:hover .frame img{transform:scale(1.035)}
}

/* ---- work page ---- */
.work-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-top:1rem}
.cats{position:sticky;top:1.5rem;display:flex;flex-direction:column;font:.95rem var(--sans)}
.cats .sep{display:none}
.cats .grp{margin:1.6rem 0 .5rem;font:500 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cats a{position:relative;display:flex;justify-content:space-between;gap:.75rem;padding:.4rem 0 .4rem .9rem;color:var(--muted);
  text-decoration:none;transition:color .35s var(--ease)}
.cats a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--accent);transition:width .45s var(--ease)}
.cats a:hover,.cats a[aria-current="page"]{color:var(--ink)}
.cats a[aria-current="page"]::before{width:.5rem}
.cats .n{font-size:.78rem;opacity:.8}
.work-head{margin:0 0 2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.work-head h2{margin:0;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1}
.work-head p{margin:.6rem 0 0;font:.95rem var(--sans);color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:2.25rem 1.5rem}
.card{display:block;color:inherit;text-decoration:none}
.card .meta{display:block;margin-top:.7rem;font:.85rem/1.45 var(--sans);color:var(--muted)}
.card .meta strong{color:var(--ink);font-weight:500}
.card.soon{cursor:default}

/* ---- artwork page ---- */
.art-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;padding:1rem 0 1.75rem}
.art-head h1{margin:0;font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.08}
.art-next{font:.95rem var(--sans);text-decoration:none;color:var(--muted);transition:color .35s var(--ease)}
.art-next span{color:var(--ink)}
.art-next:hover{color:var(--accent)}
.art-hero{margin:0 calc(-1*var(--pad));padding:clamp(1rem,4vw,3.5rem) var(--pad);background:var(--mat);display:grid;place-items:center}
.art-hero img{width:auto;height:auto;max-width:100%;max-height:78vh;max-height:78svh}
.art-body{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:2rem clamp(2rem,6vw,5rem);padding:3rem 0 1rem}
.info h2{margin:0 0 1rem;font:500 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.info div{display:grid;grid-template-columns:6rem 1fr;gap:.5rem;padding:.7rem 0;border-top:1px solid var(--line);font:.95rem/1.5 var(--sans)}
.info dt{color:var(--muted)}
.info dd{margin:0}
.info a{text-decoration-color:var(--line)}
.art-desc{max-width:60ch}
.art-desc p{margin:0 0 1.2rem}
.related h2{margin:3.5rem 0 1.5rem}
.art-pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3.5rem;padding-top:1.5rem;
  border-top:1px solid var(--line);font:.95rem var(--sans)}
.art-pager a{text-decoration:none;color:var(--muted);transition:color .35s var(--ease)}
.art-pager a:hover{color:var(--accent)}

/* ---- about, contact ---- */
.about-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.prose{max-width:60ch}
.prose p{margin:0 0 1.2rem}
.portrait{margin:0;max-width:440px}
.portrait .frame img{padding:0;object-fit:cover}
.portrait .frame-missing{display:grid;place-items:center;border:1px dashed var(--line)}
.portrait .frame:has(.frame-missing)::after{content:"Photograph of Liz";position:absolute;inset:0;display:grid;place-items:center;font:.9rem var(--sans);color:var(--muted)}
.yr{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.25rem 1.5rem;padding:1rem 0;border-top:1px solid var(--line)}
.yr h3{margin:0;font:500 .95rem var(--sans);color:var(--muted)}
.yr p{margin:0 0 .3rem;max-width:62ch}
.contact{min-height:min(60vh,520px)}
.contact-list{font:1rem/2 var(--sans)}
.contact-list a:first-child{font:clamp(1.4rem,4.5vw,2.4rem)/1.3 var(--serif)}

/* ---- motion: page changes crossfade, header stays put ---- */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.55s;animation-timing-function:var(--ease)}
::view-transition-old(root){animation:.3s var(--ease) both vt-out}
::view-transition-new(root){animation:.6s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---- tablet and phone ---- */
@media (max-width:860px){
  header.site{position:sticky;top:0;z-index:30;background:var(--paper);view-transition-name:none;flex-wrap:nowrap;align-items:center;
    padding-top:calc(.9rem + env(safe-area-inset-top,0px));padding-bottom:.9rem}
  .name{position:relative;z-index:2}
  .burger{display:block;position:relative;z-index:2;width:44px;height:44px;margin-right:-11px;background:none;border:0;cursor:pointer;color:var(--ink)}
  .burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .55s var(--ease),top .55s var(--ease)}
  .burger span:first-child{top:18px}
  .burger span:last-child{top:25px}
  .open .burger span:first-child{top:21.5px;transform:rotate(45deg)}
  .open .burger span:last-child{top:21.5px;transform:rotate(-45deg)}
  html.menu-open{overflow:hidden}
  nav#menu{position:fixed;inset:0;z-index:1;background:var(--ink);flex-direction:column;justify-content:center;gap:.3rem;
    padding:5rem var(--pad) 3rem;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
  .open nav#menu{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
  nav#menu a{font:2.2rem/1.2 var(--serif);letter-spacing:0;text-transform:none;color:#fff;padding:.5rem 0;border-bottom:0;width:max-content;
    opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .8s var(--ease),color .3s var(--ease)}
  .open nav#menu a{opacity:1;transform:none}
  .open nav#menu a:nth-child(1){transition-delay:.1s}
  .open nav#menu a:nth-child(2){transition-delay:.17s}
  .open nav#menu a:nth-child(3){transition-delay:.24s}
  nav#menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:#8fc3dc;text-underline-offset:.3em;text-decoration-thickness:1px}
  .open .name,.open .burger{color:#fff}

  .idx-row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.75rem;row-gap:.8rem;margin-bottom:3.5rem}
  .idx-n{display:none}
  .idx-title{grid-column:1/-1;grid-row:1}
  .idx-title::before{content:counter(row) "\00a0\00a0"}
  .idx-tag{grid-column:1/-1;grid-row:2}
  .idx-img{grid-row:auto}
  .idx-img.s1,.idx-img.s2{grid-column:span 1}
  .idx-img.first{grid-column:1/-1}

  .work-layout{grid-template-columns:1fr;gap:1.25rem}
  .cats{position:static;flex-direction:row;align-items:center;gap:.5rem;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1*var(--pad));padding:0 var(--pad) .25rem}
  .cats::-webkit-scrollbar{display:none}
  .cats .grp{display:none}
  .cats .sep{display:block;flex:none;width:1px;align-self:stretch;background:var(--line);margin:.35rem .2rem}
  .cats a{flex:none;padding:.6rem 1rem;border:1px solid var(--line);border-radius:2rem;white-space:nowrap}
  .cats a::before,.cats .n{display:none}
  .cats a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .work-head{margin-bottom:1.5rem}
  h2{margin-top:2.5rem}

  .art-body,.about-top{grid-template-columns:1fr}
  .portrait{order:-1}
}
@media (max-width:560px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
  .card .meta{font-size:.78rem}
  .yr{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,::before,::after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;transition:none!important}
  .js img.fade:not(.in){opacity:1}
}

/* ---- news ---- */
.news{max-width:980px}
.post{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.5rem 2rem;padding:1.75rem 0;border-top:1px solid var(--line)}
.post:last-child{border-bottom:1px solid var(--line)}
.post-date{margin:.4rem 0 0;font:.85rem var(--sans);color:var(--muted)}
.post h2{margin:0 0 .8rem;font-size:1.5rem;line-height:1.25}
.post-img{margin:0 0 1.2rem;max-width:560px}
.post-img img{width:100%;height:auto}
@media (max-width:560px){.post{grid-template-columns:1fr}}