/* sbnoah.com — clinical / archival design system (IBM Plex) */
:root{
  --bg:#ffffff;
  --panel:#fbfbfc;
  --ink:#14161b;
  --muted:#5f6671;
  --faint:#949aa4;
  --line:#e6e8ec;
  --line-strong:#d2d6dd;
  --accent:#2f5d7c;
  --accent-deep:#234a64;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-size:17px; line-height:1.62; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* monospace labels — the clinical signature */
.label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); font-weight:500;
}

/* top + bottom site rules */
.topbar{border-top:2px solid var(--ink);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.wordmark{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;color:var(--ink);text-decoration:none;font-weight:500}
.wordmark .dot{color:var(--accent)}
.backlink{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .15s}
.backlink:hover{color:var(--accent)}

/* ================= ENTRY PAGE ================= */
/* Full-viewport, centered, no scroll. Scoped to body.entry-page so the
   album page (homestead.html) still scrolls normally. */
body.entry-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.entry-page .topbar,body.entry-page .site-foot{flex:0 0 auto}
body.entry-page .site-foot{margin-top:0}
body.entry-page>.wrap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0}
body.entry-page .entry{min-height:0;padding:24px 0}

.entry{display:flex;flex-direction:column;justify-content:center}
.entry-head{margin-bottom:clamp(36px,6vw,64px)}
.entry-head .label{margin-bottom:1rem}
.entry-head h1{
  font-size:clamp(2.1rem,5vw,3.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.04;
}
.entry-head p{color:var(--muted);max-width:40ch;margin-top:1rem;font-size:1.04rem}

.options{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.options{grid-template-columns:1fr}}
.opt{
  display:flex;flex-direction:column;min-height:230px;padding:26px;
  border:1px solid var(--line-strong);background:var(--panel);text-decoration:none;color:var(--ink);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.opt:hover,.opt:focus-visible{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(20,22,27,.4);outline:none}
.opt .idx{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--accent);font-weight:600}
.opt h2{font-size:1.7rem;font-weight:600;letter-spacing:-.01em;margin-top:auto;padding-top:28px}
.opt .desc{color:var(--muted);font-size:1.0rem;margin-top:.5rem}
.opt .foot{display:flex;align-items:center;justify-content:space-between;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line)}
.opt .meta{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--muted)}
.opt .arrow{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--accent);transition:background .18s,color .18s,border-color .18s}
.opt:hover .arrow,.opt:focus-visible .arrow{background:var(--accent);color:#fff;border-color:var(--accent)}
.opt .arrow svg{width:15px;height:15px}

/* ================= ALBUM PAGE ================= */
.album-head{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px)}
.album-head .label{margin-bottom:1.1rem}
.album-head h1{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.02}
.album-head .facts{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:1.1rem}
.album-head .summary{max-width:62ch;color:var(--muted);margin-top:1.4rem;font-size:1.06rem;line-height:1.7}

.figure{margin:8px 0 0;border:1px solid var(--line-strong)}
.figure img{display:block;width:100%;height:auto}
.figure figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:10px 14px;border-top:1px solid var(--line);background:var(--panel)}

section.block{padding:clamp(34px,5vw,60px) 0}
.block-head{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:24px}
.block-head .n{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--accent);font-weight:600}
.block-head h2{font-size:1.15rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.block-head .count{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px}
.tile{appearance:none;border:1px solid var(--line);padding:0;background:var(--panel);cursor:pointer;
  aspect-ratio:1/1;overflow:hidden;position:relative;transition:border-color .15s ease}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease}
.tile:hover,.tile:focus-visible{border-color:var(--accent);outline:none}
.tile:hover img{opacity:.86}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.vcard{border:1px solid var(--line-strong);background:var(--panel)}
.vcard video{width:100%;display:block;background:#0d0f12;aspect-ratio:4/3}
.vcard .vlabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:9px 12px;border-top:1px solid var(--line)}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:40px}
.site-foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;padding-bottom:40px}
.site-foot span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--faint)}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--accent)}

/* ================= LIGHTBOX ================= */
.lb{position:fixed;inset:0;background:rgba(13,15,18,.96);display:none;z-index:100;
  align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.lb.open{display:flex;opacity:1}
.lb img{max-width:92vw;max-height:86vh;border:1px solid rgba(255,255,255,.12)}
.lb-btn{position:absolute;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.lb-btn:hover,.lb-btn:focus-visible{background:var(--accent);border-color:var(--accent);outline:none}
.lb-btn svg{width:22px;height:22px}
.lb-prev{left:max(14px,3vw)}.lb-next{right:max(14px,3vw)}
.lb-close{top:max(14px,3vh);right:max(14px,3vw);width:46px;height:46px}
.lb-count{position:absolute;bottom:max(18px,3vh);left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:rgba(255,255,255,.8)}
@media(max-width:560px){.lb-btn{width:46px;height:46px}.lb-prev{left:6px}.lb-next{right:6px}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}