:root{
  --bg: #F1F0E9;
  --bg-raised: #E9E7DD;
  --ink: #1A1D1B;
  --ink-soft: #3A3E3A;
  --muted: #6B7068;
  --line: #CFCABA;
  --line-strong: #A7A192;
  --accent: #3F7A6E;
  --accent-strong: #2A564C;
  --accent-tint: #DCE7E2;
  --tbd: #A8683A;
  --tbd-tint: #F1E4D6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #14171A;
    --bg-raised: #1B1F22;
    --ink: #ECEAE1;
    --ink-soft: #C7C4B8;
    --muted: #8D9289;
    --line: #33362F;
    --line-strong: #494C43;
    --accent: #5FA396;
    --accent-strong: #86C2B4;
    --accent-tint: #1E2C29;
    --tbd: #D89A66;
    --tbd-tint: #2B241C;
  }
}
:root[data-theme="dark"]{
  --bg: #14171A;
  --bg-raised: #1B1F22;
  --ink: #ECEAE1;
  --ink-soft: #C7C4B8;
  --muted: #8D9289;
  --line: #33362F;
  --line-strong: #494C43;
  --accent: #5FA396;
  --accent-strong: #86C2B4;
  --accent-tint: #1E2C29;
  --tbd: #D89A66;
  --tbd-tint: #2B241C;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  padding-inline:20px;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-tint); color:var(--accent-strong); }
a{ color:inherit; }
h1,h2,h3{
  font-family:"Zilla Slab", Georgia, serif;
  font-weight:600;
  text-wrap:balance;
  margin:0;
}
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.wrap{ max-width:920px; margin-inline:auto; }

/* ---------- nav ---------- */
nav{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:920px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:14px;
  gap:16px;
  flex-wrap:wrap;
}
.nav-name{ font-family:"Zilla Slab", serif; font-weight:600; font-size:1rem; }
.nav-links{
  display:flex; flex-wrap:wrap; gap:14px 22px; list-style:none; margin:0; padding:0;
  font-family:"IBM Plex Mono", monospace; font-size:0.74rem;
  letter-spacing:0.08em; text-transform:uppercase;
}
.nav-links a{
  text-decoration:none; color:var(--muted);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--ink); border-color:var(--accent); }

/* ---------- hero ---------- */
header.hero{
  padding-block:56px 40px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
}
.titleblock{
  border:1px solid var(--line-strong);
  background:color-mix(in srgb, var(--bg) 70%, var(--bg-raised));
  padding:28px clamp(20px,4vw,40px) 24px;
}
.titleblock h1{ font-size:clamp(2rem, 5.5vw, 3rem); line-height:1.05; }
.role{ margin-top:10px; font-size:clamp(1rem, 2.2vw, 1.15rem); color:var(--ink-soft); max-width:56ch; }
.crumb{
  display:inline-block;
  margin-bottom:14px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.76rem;
  color:var(--accent-strong);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
}
.crumb:hover{ border-color:var(--accent); }

section{ padding-block:52px; border-top:1px solid var(--line); }

/* ---------- password gate ---------- */
#gate{
  max-width:460px;
  margin:0 auto;
  padding:36px clamp(20px,4vw,36px);
  border:1px solid var(--line-strong);
  background:var(--bg-raised);
  text-align:center;
}
#gate .lock{
  width:34px; height:34px; margin:0 auto 18px;
  border:1.5px solid var(--ink-soft);
  border-radius:3px;
  position:relative;
}
#gate .lock::before{
  content:"";
  position:absolute;
  top:-16px; left:50%;
  width:18px; height:18px;
  margin-left:-9px;
  border:1.5px solid var(--ink-soft);
  border-bottom:none;
  border-radius:9px 9px 0 0;
}
#gate h2{ font-size:1.3rem; margin-bottom:8px; }
#gate p.hint{ color:var(--muted); font-size:0.88rem; margin:0 0 22px; line-height:1.55; }
#gate-form{ display:flex; flex-direction:column; gap:12px; }
#gate-password{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.95rem;
  padding:11px 13px;
  border:1px solid var(--line-strong);
  background:var(--bg);
  color:var(--ink);
  outline:none;
}
#gate-password:focus-visible{ border-color:var(--accent); }
#gate-submit{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:11px 13px;
  border:1px solid var(--accent-strong);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease;
}
#gate-submit:hover{ background:var(--accent-strong); }
#gate-submit:disabled{ opacity:0.6; cursor:default; }
#gate-error{
  display:none;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.8rem;
  color:var(--tbd);
  background:var(--tbd-tint);
  border:1px dashed var(--tbd);
  padding:8px 10px;
}
#gate-error.show{ display:block; }

/* ---------- gated content ---------- */
#content{ display:none; }
#content.show{ display:block; }
.archive-intro{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:64ch;
  margin:0 0 44px;
}

/* ---------- index listing grid ---------- */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:24px;
}
.project-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line-strong);
  background:var(--bg-raised);
  transition:border-color .15s ease;
}
.project-card:hover, .project-card:focus-visible{ border-color:var(--accent); }
.project-card .thumb{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line-strong);
}
.project-card .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.project-card .card-body{ padding:16px 18px 20px; }
.project-card h3{ font-size:1.1rem; margin-top:6px; }

/* ---------- project detail ---------- */
.project-media img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line-strong);
}
.project-body{ margin-top:22px; }
.project-body h1{ font-size:clamp(1.7rem, 4vw, 2.3rem); margin-top:8px; }
.project-body p{ font-size:1rem; line-height:1.68; color:var(--ink-soft); max-width:68ch; margin:16px 0 0; }
.project-link a{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.82rem;
  color:var(--accent-strong);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
}
.project-link a:hover{ border-color:var(--accent); }

.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line);
  margin-top:22px;
}
.stat{ background:var(--bg); padding:14px clamp(12px,3vw,18px); }
.stat .num{
  font-family:"Zilla Slab", serif; font-weight:600; font-size:1.4rem;
  color:var(--accent-strong); line-height:1; font-variant-numeric:tabular-nums;
}
.stat .lbl{
  display:block; margin-top:6px; font-family:"IBM Plex Mono", monospace;
  font-size:0.64rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); line-height:1.4;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:12px;
  margin-top:22px;
  align-items:start;
}
.gallery img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line-strong);
}

.project-nav{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-family:"IBM Plex Mono", monospace;
  font-size:0.8rem;
}
.project-nav a{
  text-decoration:none;
  color:var(--accent-strong);
  border-bottom:1px solid var(--line-strong);
}
.project-nav a:hover{ border-color:var(--accent); }
.project-nav .next{ text-align:right; margin-left:auto; }

footer{
  padding-block:30px 40px;
  border-top:1px solid var(--line);
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  color:var(--muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}