:root{
  --paper:#ffffff;
  --ink:#1d1c1a;
  --ink-soft:#6b6a64;
  --ink-faint:#a8a69e;
  --note:#3a6ea5;
  --accent:#c2603a;
  --line:#d9d5c9;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:#ffffff;color:var(--ink);font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;}

/* ---------- stage ---------- */
.stage-wrap{display:flex;justify-content:center;}
.stage{
  position:relative;width:100%;max-width:1240px;min-height:780px;
  background:var(--paper);
  display:grid;grid-template-columns:25% 50% 25%;
}

.col{position:relative;padding:48px 34px;display:flex;flex-direction:column;}
.col-left{align-items:center;justify-content:center;}
.col-right{align-items:flex-start;justify-content:center;}
.col-mid{justify-content:flex-start;padding-top:44px;min-width:0;}

.ham{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;padding:22px 10px;}
.ham .lines{display:flex;flex-direction:column;gap:9px;transition:opacity .22s,transform .22s;}
.ham .lines i{display:block;width:46px;height:3px;background:var(--ink);border-radius:2px;}
.ham .menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;pointer-events:none;}
.ham .menu a{text-decoration:none;color:var(--ink);font-size:14px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:2px;cursor:pointer;}
.ham .menu a.cur{color:var(--accent);border-bottom-color:var(--accent);}
.ham .menu a.dim{color:var(--ink-faint);cursor:not-allowed;}
.ham .menu a:not(.dim):hover{border-bottom-color:var(--ink);}
.ham:hover .lines,.ham.open .lines{opacity:0;transform:translateY(-6px);}
.ham:hover .menu,.ham.open .menu{opacity:1;transform:translateY(0);pointer-events:auto;}

/* ---------- middle ---------- */
.topnav{display:flex;gap:12px;align-items:center;margin-bottom:54px;flex-wrap:wrap;}
.topnav a{text-decoration:none;color:var(--ink-soft);font-size:15px;letter-spacing:.02em;cursor:pointer;}
.topnav a.cur{color:var(--ink);font-weight:600;}
.topnav a.dim{color:var(--ink-faint);cursor:not-allowed;}
.topnav .dot{color:var(--ink-faint);font-size:13px;}

/* nav separator glyph */
.topnav .nav-sep{color:var(--ink);font-size:18px;line-height:1;margin:0 7px;display:inline-block;vertical-align:middle;user-select:none;}
.page{display:none;}
.page.active{display:block;animation:fade .28s ease;}
@keyframes fade{from{transform:translateY(6px);}to{transform:none;}}

.name{font-family:var(--display);font-size:var(--name-size,46px);font-weight:var(--name-weight,400);line-height:1.02;letter-spacing:var(--name-track,-0.01em);margin:0 0 8px;text-wrap:balance;}
.name em{font-style:italic;font-weight:inherit;}
.role{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.05em;margin-bottom:42px;}

.sec{margin-bottom:40px;scroll-margin-top:80px;}
.kick{font-family:'Space Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.kick::before{content:"";width:18px;height:1px;background:var(--accent);display:inline-block;}
.kick .more{margin-left:auto;color:var(--ink-faint);text-transform:none;letter-spacing:.04em;cursor:pointer;}
.sec p{font-family:var(--body,'Spectral'),serif;font-size:var(--body-size,19px);line-height:1.62;color:var(--ink);margin:0 0 14px;max-width:48ch;text-wrap:pretty;}
.sec p strong{font-weight:600;}
.sec p a{color:var(--accent);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px;}
.sec p a:hover{opacity:.75;}

.tag{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}

/* skills / tech chips (soft pills, no lines) */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);border-radius:999px;padding:5px 13px;background:rgba(0,0,0,.045);}

/* education / latest rows */
.row{display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--line);align-items:baseline;}
.row:last-child{border-bottom:1px solid var(--line);}
.row .when{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);min-width:96px;flex-shrink:0;letter-spacing:.02em;}
.row .what{font-family:var(--body,'Spectral'),serif;font-size:16px;line-height:1.4;}
.row .what b{font-weight:600;}
.row .what span{display:block;font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:3px;letter-spacing:.02em;}

/* contact (soft pills, no lines) */
.contacts{display:flex;flex-wrap:wrap;gap:10px;}
.contacts a{text-decoration:none;font-family:'Space Mono',monospace;font-size:12px;color:var(--ink);border-radius:999px;padding:7px 15px;display:flex;gap:7px;align-items:center;background:rgba(0,0,0,.045);transition:background .15s;}
.contacts a:hover{background:rgba(0,0,0,.09);}

/* projects list (no boxes, whitespace separated) */
.proj-intro{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.05em;margin-bottom:30px;}
.proj{display:block;width:100%;text-align:left;background:none;border:none;border-radius:0;padding:4px 0 22px;margin:0;cursor:pointer;transition:transform .18s;}
.proj:hover{transform:translateX(4px);}
.proj .ptitle{font-family:var(--display);font-size:20px;font-weight:var(--name-weight,500);line-height:1.15;margin:4px 0 6px;transition:color .15s;}
.proj:hover .ptitle{color:var(--accent);}

/* ---------- dwellings (blog) ---------- */
.dwell-lede{font-family:var(--body,'Spectral'),serif;font-size:var(--body-size,18px);line-height:1.55;color:var(--ink-soft);max-width:44ch;margin:0 0 38px;text-wrap:pretty;}
.post{display:block;width:100%;text-align:left;background:none;border:none;padding:0 0 30px;margin:0 0 30px;cursor:pointer;position:relative;}
.post + .post{border-top:none;}
.post-meta{display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:10px;flex-wrap:wrap;}
.post-meta .tg-txt{color:var(--accent);}
.post-meta .when{color:var(--ink-soft);}
.dotsep{width:14px;height:14px;flex-shrink:0;background:no-repeat center/contain;}
.post-title{font-family:var(--display);font-size:24px;font-weight:var(--name-weight,500);line-height:1.18;margin:0 0 10px;transition:color .15s;text-wrap:balance;}
.post:hover .post-title{color:var(--accent);}
.post-blurb{font-family:var(--body,'Spectral'),serif;font-size:16px;line-height:1.5;color:var(--ink-soft);margin:0;max-width:50ch;text-wrap:pretty;}

/* reading view */
.dwell-read{display:none;}
#page-dwellings[data-mode="read"] .dwell-index{display:none;}
#page-dwellings[data-mode="read"] .dwell-read{display:block;animation:fade .3s ease;}
.back-link{background:none;border:none;cursor:pointer;font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.04em;padding:0;margin-bottom:24px;transition:color .15s;}
.back-link:hover{color:var(--accent);}
.read-title{font-size:calc(var(--name-size,46px) * .82);margin-bottom:14px;}
.read-meta{margin-bottom:34px;}
.lead-para{font-family:var(--body,'Spectral'),serif;font-size:calc(var(--body-size,19px) + 2px);line-height:1.55;color:var(--ink);margin:0 0 34px;max-width:46ch;text-wrap:pretty;}
.rsec{margin-bottom:46px;scroll-margin-top:30px;}
.rh{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink);text-transform:uppercase;margin:0 0 14px;}
.rsec p{font-family:var(--body,'Spectral'),serif;font-size:var(--body-size,18px);line-height:1.62;color:var(--ink);margin:0 0 20px;max-width:48ch;text-wrap:pretty;}

/* interactive figure placeholders */
.fig{margin:0;}
.fig-skel{width:100%;height:230px;border-radius:10px;background:rgba(47,107,94,.07);position:relative;overflow:hidden;}
.fig-skel::before{content:"";position:absolute;inset:22px 26px;background-repeat:no-repeat;opacity:.55;}
.fig-skel[data-kind="line"]::before{
  background-image:
    linear-gradient(rgba(31,28,26,.35),rgba(31,28,26,.35)),
    linear-gradient(rgba(31,28,26,.35),rgba(31,28,26,.35)),
    linear-gradient(90deg,transparent,transparent);
  background-size:1px 100%,100% 1px,0 0;
  background-position:left bottom,left bottom,0 0;
}
.fig-skel[data-kind="line"]::after{
  content:"";position:absolute;inset:22px 26px;
  background:
    no-repeat 0 0 / 100% 100%
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160' preserveAspectRatio='none'><polyline points='0,30 60,55 120,80 180,108 240,128 300,140' fill='none' stroke='%23c2603a' stroke-width='3'/><polyline points='0,60 60,72 120,96 180,118 240,134 300,148' fill='none' stroke='%232f6b5e' stroke-width='3' stroke-dasharray='7 6'/></svg>");
}
.fig-skel[data-kind="map"]::after{
  content:"";position:absolute;inset:22px 26px;display:flex;gap:10px;
  background:
    repeating-radial-gradient(circle at 22% 40%,rgba(194,96,58,.5) 0 6px,transparent 6px 16px),
    repeating-radial-gradient(circle at 60% 62%,rgba(47,107,94,.45) 0 5px,transparent 5px 15px),
    repeating-radial-gradient(circle at 82% 30%,rgba(217,154,43,.5) 0 5px,transparent 5px 14px);
}
.fig-skel[data-kind="diagram"]::after{
  content:"";position:absolute;inset:34px 30px;
  background:
    no-repeat 0 0 / 100% 100%
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'><g fill='none' stroke='%232f6b5e' stroke-width='2.5'><rect x='4' y='38' rx='8' width='44' height='44'/><rect x='84' y='30' rx='8' width='56' height='60'/><rect x='176' y='38' rx='8' width='44' height='44'/><rect x='252' y='38' rx='8' width='44' height='44'/><line x1='48' y1='60' x2='84' y2='60'/><line x1='140' y1='60' x2='176' y2='60'/><line x1='220' y1='60' x2='252' y2='60'/></g></svg>");
}
.fig-ctrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.fig-chip{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-soft);background:rgba(0,0,0,.05);border-radius:999px;padding:4px 11px;}
.fig-chip.on{background:var(--accent);color:#f6f4ee;}
.fig-slider{display:flex;align-items:center;gap:8px;margin-left:auto;font-family:'Space Mono',monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.04em;}
.fig-slider b{display:block;width:90px;height:4px;border-radius:999px;background:rgba(0,0,0,.1);position:relative;}
.fig-slider b::after{content:"";position:absolute;left:58%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translateY(-50%);}
.fig figcaption{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);line-height:1.5;margin-top:12px;letter-spacing:.02em;}
.fig-lbl{display:inline-block;color:var(--accent);margin-right:6px;}

.dwell-topics,.dwell-toc{display:none;flex-direction:column;gap:14px;}
#stage[data-page="dwellings"] #rail-dwellings .dwell-topics{display:flex;}
#stage[data-page="dwellings"][data-mode="read"] #rail-dwellings .dwell-topics{display:none;}
#stage[data-page="dwellings"][data-mode="read"] #rail-dwellings .dwell-toc{display:flex;}
.dwell-toc a{text-decoration:none;color:var(--ink-soft);display:flex;align-items:baseline;gap:10px;font-size:15px;cursor:pointer;}
.dwell-toc a .num{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);}
.dwell-toc a.cur{color:var(--ink);}
.dwell-toc a.cur .num{color:var(--accent);}
.dwell-toc a:hover{color:var(--ink);}
.proj .pdesc{font-family:var(--body,'Spectral'),serif;font-size:15px;color:var(--ink-soft);line-height:1.45;margin:0;}
.proj .pyear{float:right;font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);}

/* detail panel */
.detail{position:absolute;inset:0;background:rgba(28,27,25,.32);display:none;align-items:stretch;justify-content:flex-end;z-index:40;}
.detail.open{display:flex;}
.detail .sheet{width:62%;max-width:560px;background:var(--paper);height:100%;overflow:auto;padding:44px 40px;box-shadow:-18px 0 40px -24px rgba(0,0,0,.5);animation:slidein .28s ease;}
@keyframes slidein{from{transform:translateX(30px);opacity:.4;}to{transform:none;opacity:1;}}
.detail .close{position:sticky;top:0;float:right;font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-soft);background:rgba(0,0,0,.045);border:none;border-radius:999px;padding:6px 13px;cursor:pointer;transition:background .15s,color .15s;}
.detail .close:hover{background:rgba(0,0,0,.09);color:var(--ink);}
.detail h3{font-family:var(--display);font-size:30px;font-weight:var(--name-weight,500);margin:0 0 18px;line-height:1.05;clear:none;}
.detail .contrib{list-style:none;padding:0;margin:0 0 30px;}
.detail .contrib li{font-family:var(--body,'Spectral'),serif;font-size:16px;line-height:1.5;color:var(--ink);padding:0 0 12px 18px;position:relative;text-wrap:pretty;}
.detail .contrib li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.ph-bars span{display:block;height:10px;background:repeating-linear-gradient(45deg,var(--line),var(--line) 6px,transparent 6px,transparent 12px);border-radius:2px;margin-bottom:10px;}
.ph-bars span:nth-child(2){width:88%;}
.ph-bars span:nth-child(3){width:72%;}

/* ---------- right: anchors / filters ---------- */
.railset{display:none;flex-direction:column;gap:14px;}
.railset.active{display:flex;}
.lab{font-family:'Space Mono',monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;}
.anchors a{text-decoration:none;color:var(--ink-soft);display:flex;align-items:baseline;gap:10px;font-size:15px;cursor:pointer;}
.anchors a .num{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);}
.anchors a.cur{color:var(--ink);}
.anchors a.cur .num{color:var(--accent);}
.anchors a:hover{color:var(--ink);}
.filters a{text-decoration:none;color:var(--ink-soft);font-size:14px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;}
.filters a .ct{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-faint);}
.filters a.cur{color:var(--accent);font-weight:600;}
.filters a:hover{color:var(--ink);}


/* ============ VIBES ============ */
.stage[data-vibe="editorial"]{--display:'Spectral';--body:'Spectral';--accent:#9a5b3b;--name-size:50px;--name-weight:400;--name-track:-0.015em;}
.stage[data-vibe="editorial"] .topnav a,.stage[data-vibe="editorial"] .ham .menu a{font-family:'Archivo',sans-serif;}

.stage[data-vibe="mono"]{--display:'Space Mono';--body:'Space Mono';--accent:#3f7d6e;--name-size:32px;--name-weight:700;--name-track:-0.02em;--body-size:15px;
  background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);background-size:26px 26px,26px 26px;}
.stage[data-vibe="mono"] .topnav a,.stage[data-vibe="mono"] .ham .menu a,.stage[data-vibe="mono"] .sec p,.stage[data-vibe="mono"] .proj .pdesc{font-family:'Space Mono',monospace;}
.stage[data-vibe="mono"] .name{text-transform:uppercase;letter-spacing:0;}
.stage[data-vibe="mono"] .role{color:var(--accent);}

.stage[data-vibe="bold"]{--display:'Archivo';--body:'Archivo';--accent:#c2603a;--name-size:66px;--name-weight:900;--name-track:-0.035em;--body-size:18px;}
.stage[data-vibe="bold"] .name{text-transform:uppercase;line-height:.92;}
.stage[data-vibe="bold"] .topnav a,.stage[data-vibe="bold"] .ham .menu a{font-family:'Archivo',sans-serif;font-weight:600;}
.stage[data-vibe="bold"] .ham .lines i{height:4px;width:52px;}

@media (max-width:900px){
  .stage{grid-template-columns:22% 56% 22%;}
  .col{padding:34px 16px;}
  .stage[data-vibe="bold"]{--name-size:46px;}
  .detail .sheet{width:80%;}
}