/* ============================================================
   Zelia Lerch — shared styles
   One color per section. To retune a section, change its --c
   in the .sec-* blocks below (and the matching nav dot color,
   which is set inline on each nav link).
     Writing  #c25b73   Knitting #c0922f
     Reading  #5f9072   Things I saw #5f72a6
   Fonts are close stand-ins (Fraunces + Newsreader) until we
   swap in the exact faces from elliotgross.com.
   ============================================================ */
:root{
  --bg:#f7f3ea;
  --ink:#221f1a;
  --muted:#6f695d;
  --faint:#9a9182;
  --rule:#e2dbcd;
  --display:'Fraunces', Georgia, serif;
  --body:'Newsreader', Georgia, serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased;}
.wrap{max-width:880px; margin:0 auto; padding:0 40px;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--c,#5f72a6); outline-offset:3px; border-radius:2px;}

/* section accents */
.sec-home{--c:#5f72a6;}
.sec-writing{--c:#c25b73;}
.sec-knitting{--c:#c0922f;}
.sec-reading{--c:#5f9072;}
.sec-saw{--c:#5f72a6;}

/* ---------- header / nav ---------- */
.site-header{padding:30px 0 0;}
.headrow{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; border-bottom:1px solid var(--ink); padding-bottom:14px;}
.brand{font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:0.005em;}
.nav{display:flex; gap:18px; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:#4a443a;}
.navlink{position:relative; display:inline-flex; align-items:center; gap:7px; padding-bottom:11px; white-space:nowrap;}
.navlink .dot{width:7px; height:7px; border-radius:50%; background:var(--c); display:inline-block;}
.navlink.current{color:var(--ink);}

/* the hover/active squiggle */
.squig{position:absolute; left:0; right:0; bottom:2px; width:100%; height:9px; color:var(--c); opacity:0; transition:opacity .14s ease; pointer-events:none;}
.squig path{stroke-dasharray:300; stroke-dashoffset:300;}
.navlink:hover .squig{opacity:1;}
.navlink:hover .squig path{animation:draw .5s ease forwards;}
.navlink.current .squig{opacity:1;}
.navlink.current .squig path{stroke-dashoffset:0;}
@keyframes draw{to{stroke-dashoffset:0;}}

/* ---------- labels ---------- */
.eyebrow{font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin:0 0 14px;}

/* ---------- home: about ---------- */
.intro{margin-top:36px; display:grid; grid-template-columns:1fr 220px; gap:40px; align-items:start;}
.statement{font-family:var(--display); font-size:30px; line-height:1.32; font-weight:400; margin:0;}
.portrait{position:relative; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#ece5d6; display:flex; align-items:center; justify-content:center;}
.portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.portrait .ph{color:#a99f87; font-size:13px; font-style:italic;}

/* ---------- home: table of contents ---------- */
.toc{margin-top:46px;}
.toc-row{display:flex; align-items:baseline; gap:14px; padding:14px 0; border-top:1px solid var(--rule);}
.toc-row:last-of-type{border-bottom:1px solid var(--rule);}
.toc-row .num{font-family:var(--display); font-size:15px; color:var(--c); width:26px; flex-shrink:0;}
.toc-row .titlewrap{position:relative; padding-bottom:10px;}
.toc-row .title{font-family:var(--display); font-size:22px;}
.toc-row .leader{flex:1; border-bottom:1px dotted #cdc6b6; transform:translateY(-4px);}
.toc-row .desc{font-style:italic; color:var(--muted); font-size:15px; white-space:nowrap;}
.toc-row:hover .squig{opacity:1;}
.toc-row:hover .squig path{animation:draw .5s ease forwards;}

.scroll{display:flex; justify-content:center; margin-top:30px;}
.scroll a{width:38px; height:38px; border-radius:50%; border:1px solid #d4ccbb; display:flex; align-items:center; justify-content:center; color:#8a8475; transition:border-color .2s ease, color .2s ease;}
.scroll a:hover{border-color:var(--c); color:var(--c);}

/* ---------- section pages ---------- */
.page-title{font-family:var(--display); font-weight:600; font-size:clamp(38px,7vw,54px); line-height:1; margin:34px 0 0;}
.title-rule{height:2px; background:var(--c); margin-top:16px;}
.entry{padding:22px 0 20px; border-bottom:1px solid var(--rule);}
.entry-top{display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
.entry .e-title{font-family:var(--display); font-weight:600; font-size:clamp(22px,4vw,27px);}
.entry .e-meta{font-style:italic; color:var(--muted); font-size:15px; white-space:nowrap;}
.entry .e-desc{color:var(--muted); font-size:16px; margin:6px 0 0;}

/* ---------- things i saw: cork board of polaroids ---------- */
.photo-grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:30px 34px; margin-top:30px; padding:42px 30px 50px;
  border:14px solid #7a5230; border-radius:6px;
  background-color:#c79f60;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.40 0 0 0 0 0.28 0 0 0 0 0.12 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 70px rgba(60,38,14,.38), inset 0 0 0 2px #5f3d22, 0 16px 36px rgba(40,28,12,.22);
}
.shot{
  position:relative; margin:0; width:216px; background:#fffdf7;
  padding:12px 12px 0; border-radius:2px;
  box-shadow:0 9px 20px rgba(30,20,8,.30);
  transition:transform .2s ease, box-shadow .2s ease;
}
.shot:nth-child(6n+1){transform:rotate(-4deg);}
.shot:nth-child(6n+2){transform:rotate(3deg);}
.shot:nth-child(6n+3){transform:rotate(-2deg);}
.shot:nth-child(6n+4){transform:rotate(4.5deg);}
.shot:nth-child(6n+5){transform:rotate(-3deg);}
.shot:nth-child(6n+6){transform:rotate(1.5deg);}
.shot:hover{transform:rotate(0) translateY(-5px) scale(1.02); box-shadow:0 16px 32px rgba(30,20,8,.36); z-index:4;}
.shot .frame{position:relative; aspect-ratio:1/1; border-radius:0; overflow:hidden; background:#ece5d6; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.shot .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.shot .frame .ph{color:#a99f87; font-size:12px; font-style:italic; padding:0 8px; text-align:center;}
.shot .cap{display:block; text-align:center; font-family:'Caveat', var(--body); font-weight:600; font-size:23px; line-height:1.12; color:#3a332a; padding:9px 6px 14px;}
/* push pins (color cycles) */
.shot::before{
  content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:17px; height:17px; border-radius:50%; z-index:5;
  background:radial-gradient(circle at 35% 30%, #ff9a9a, #d23b3b 58%, #9e1b1b);
  box-shadow:0 3px 4px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.25);
}
.shot:nth-child(4n+2)::before{background:radial-gradient(circle at 35% 30%, #9fc0ff, #3b6fd2 58%, #1c3c96);}
.shot:nth-child(4n+3)::before{background:radial-gradient(circle at 35% 30%, #ffe59a, #e0a72f 58%, #b07d18);}
.shot:nth-child(4n+4)::before{background:radial-gradient(circle at 35% 30%, #a9e6b3, #4fa06a 58%, #2c7042);}
/* empty state = a note pinned to the board */
.empty-note{
  position:relative; align-self:center; margin:20px auto; background:#fffdf7; color:#6f695d;
  font-style:italic; font-size:16px; padding:20px 30px; border-radius:2px;
  box-shadow:0 8px 18px rgba(30,20,8,.3); transform:rotate(-2deg);
}
.empty-note::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9a9a, #d23b3b 58%, #9e1b1b);
  box-shadow:0 3px 4px rgba(0,0,0,.4);
}

/* ---------- footer ---------- */
.site-footer{margin-top:64px; border-top:1px solid var(--rule); padding:26px 0 56px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:14px;}
.site-footer .links{display:flex; gap:12px; align-items:center;}
.site-footer a{transition:color .18s ease;}
.site-footer a:hover{color:var(--ink);}
.site-footer .links a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--rule); color:var(--muted);
  transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;}
.site-footer .links a:hover{color:#fff; background:var(--c); border-color:var(--c); transform:translateY(-2px);}
.site-footer .links svg{width:18px; height:18px; display:block;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .wrap{padding:0 22px;}
  .headrow{flex-direction:column; align-items:flex-start; gap:14px;}
  .nav{flex-wrap:wrap; gap:14px 18px;}
  .intro{grid-template-columns:1fr; gap:26px;}
  .portrait{max-width:200px; order:-1;}
  .statement{font-size:26px;}
  .toc-row .desc{display:none;}
  .photo-grid{padding:26px 14px 32px; gap:24px 20px; border-width:10px;}
  .shot{width:150px; padding:9px 9px 0;}
  .shot .cap{font-size:19px;}
}
@media (prefers-reduced-motion: reduce){
  .squig path{animation:none !important;}
  .navlink:hover .squig path,.toc-row:hover .squig path,.navlink.current .squig path{stroke-dashoffset:0 !important;}
}