/* Anita Līcis-Ribak — portfolio. Hand-written, no build step, no external fonts. */
:root{
  --bg:#fbfaf8; --panel:#f3f1ed; --ink:#191817; --soft:#605c57; --faint:#8d8882;
  --rule:#e2ded7; --accent:#191817;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pad:clamp(1rem,4vw,2.5rem); --maxw:1180px; --prose:64ch;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121211; --panel:#1c1b1a; --ink:#ece9e4; --soft:#a8a39c; --faint:#7d7872;
        --rule:#2e2c29; --accent:#ece9e4;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--serif);
     padding:0 0 env(safe-area-inset-bottom,0px)}
img,picture{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);
  transition:border-color .18s,color .18s}
a:hover{border-bottom-color:var(--accent)}
code{font:0.85em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--soft)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:.5rem;background:var(--bg);padding:.5rem;z-index:50}

/* ---------- header / nav ---------- */
header.site{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 2rem;
  padding:calc(env(safe-area-inset-top,0px) + 1.6rem) var(--pad) 1.1rem;
  border-bottom:1px solid var(--rule);margin-bottom:clamp(1.5rem,5vw,3.5rem)}
.brand{margin:0;font:400 1.02rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.brand a{border:0}
header.site nav{margin-left:auto}
header.site ul{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.35rem;margin:0;padding:0}
header.site nav a{font:400 .78rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);border:0;padding-bottom:2px;border-bottom:1px solid transparent}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  color:var(--soft);font:.72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem .7rem;border-radius:2px;cursor:pointer}
@media (max-width:860px){
  .navtoggle{display:block}
  header.site nav{flex-basis:100%;margin:0;display:none}
  header.site nav.open{display:block}
  header.site ul{flex-direction:column;gap:0;padding-top:.75rem}
  header.site nav a{display:block;padding:.6rem 0;border-bottom:1px solid var(--rule)}
}

/* ---------- layout ---------- */
main{padding:0 var(--pad);max-width:var(--maxw);margin:0 auto}
body.wide main{max-width:none;padding:0}
.page{margin:0 auto 5rem}
.pagehead{max-width:var(--prose);margin:0 auto clamp(1.5rem,4vw,2.75rem)}
.pagehead h1{font:400 clamp(1.5rem,3.4vw,2.1rem)/1.2 var(--serif);margin:0 0 .35rem;
  letter-spacing:-.005em;text-wrap:balance}
.pagehead .meta,.pagehead .crumb{margin:.2rem 0 0;font:.76rem/1.5 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.pagehead .crumb{margin-bottom:.6rem;order:-1}
.pagehead{display:flex;flex-direction:column}
.crumb a{border:0;color:var(--faint)}
.crumb a:hover{color:var(--ink)}

/* ---------- prose ---------- */
.prose{max-width:var(--prose);margin:0 auto clamp(1.75rem,4vw,3rem)}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.05em}
.prose h2{font:400 1.28rem/1.3 var(--serif);margin:2.2em 0 .6em}
.prose h3{font:600 .82rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);margin:2.4em 0 .7em}
.prose h4{font:600 1rem/1.4 var(--serif);margin:1.8em 0 .5em}
.prose blockquote{margin:1.6em 0;padding-left:1.1em;border-left:2px solid var(--rule);
  color:var(--soft);font-style:italic}
.prose em{font-style:italic}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.5em 0}
.prose.intro{color:var(--soft)}
.cvlink a{font:.8rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}

/* ---------- galleries ---------- */
.gallery{display:flex;flex-direction:column;align-items:center;gap:clamp(2rem,6vw,4.5rem);
  margin:clamp(2rem,6vw,4rem) auto}
.gallery figure,figure.single{margin:0;max-width:1000px;width:100%}
figure.single{margin:clamp(2rem,6vw,4rem) auto}
.gallery img,figure.single img{width:100%}
figcaption{margin-top:.7rem;font:.78rem/1.5 var(--sans);color:var(--faint);
  max-width:var(--prose)}
.zoomable{cursor:zoom-in}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:60vh;display:grid;place-items:center;padding:0 var(--pad) 4rem}
.hero picture{max-width:min(1200px,92vw)}
.hero img{width:100%}
.heroname{text-align:center;padding:2rem 0 0}
.heroname h1{font:400 clamp(1.5rem,4vw,2.4rem)/1.2 var(--serif);margin:0;letter-spacing:.02em}
.heroname p{margin:.5rem 0 0;font:.8rem/1.5 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

/* ---------- card grids ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,4vw,2.75rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.cards a{border:0;display:block}
.cards picture{overflow:hidden;background:var(--panel)}
.cards img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .25s}
.cards a:hover img{opacity:.82}
.cards .noimg{display:block;aspect-ratio:4/3;background:var(--panel)}
.cardtitle{display:block;margin-top:.75rem;font:400 1rem/1.35 var(--serif);text-wrap:balance}
.cardmeta{display:block;margin-top:.2rem;font:.73rem/1.5 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.plainlist{list-style:none;padding:0;margin:0 auto;max-width:var(--prose)}
.plainlist li{padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.plainlist code{display:inline-block;margin-left:.4rem}

/* ---------- embeds, pager, footer ---------- */
.embed{max-width:1000px;margin:clamp(2rem,6vw,4rem) auto;aspect-ratio:16/9}
.embed iframe{width:100%;height:100%;border:0;display:block;background:var(--panel)}
.pager{display:flex;justify-content:space-between;gap:1.5rem;max-width:var(--prose);
  margin:4rem auto 0;padding-top:1.25rem;border-top:1px solid var(--rule);
  font:.78rem/1.5 var(--sans);letter-spacing:.04em}
.pager a{border:0;color:var(--soft);max-width:46%}
.pager a:hover{color:var(--ink)}
.pager .next{text-align:right;margin-left:auto}
footer.site{border-top:1px solid var(--rule);margin-top:4rem;padding:1.75rem var(--pad) 3rem;
  font:.76rem/1.6 var(--sans);color:var(--faint);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:.5rem 2rem}
footer.site p{margin:0}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.94);
  display:grid;place-items:center;padding:2.5rem 1rem;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lightbox button{position:absolute;top:0;background:none;border:0;color:#fff;opacity:.6;
  font:1.6rem/1 var(--sans);padding:1rem;cursor:pointer}
.lightbox button:hover{opacity:1}
.lb-close{right:0}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:0}.lb-next{right:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}