*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f9f8f6;
  --text:#1a1a1a;
  --muted:#999;
  --border:#d8d5cf;
  --placeholder:#e8e5e0;
  --gutter:16px;
  --split:33.333vw;   /* line at 1/3 from left — images left of it, text right */
}

html,body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  font-size:13px;
  min-height:100vh;
}
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:200px 200px;
}

/* VERTICAL LINES */
.vline-l{position:fixed;top:0;bottom:0;left:var(--gutter);width:0.5px;background:var(--border);z-index:50;pointer-events:none}
.vline-r{position:fixed;top:0;bottom:0;right:var(--gutter);width:0.5px;background:var(--border);z-index:50;pointer-events:none}
.vline-c{position:fixed;top:0;bottom:0;left:var(--split);width:0.5px;background:var(--border);z-index:50;pointer-events:none}

nav,main,section{position:relative;z-index:1}

/* NAV — no bottom border, all caps */
nav{
  position:fixed;top:0;left:0;right:0;
  background:var(--bg);z-index:100;
  padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
}
.nav-name{
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.06em;text-transform:uppercase;
  cursor:pointer;
}
.nav-name:hover{opacity:0.6}
.nav-left-links{display:flex;gap:24px;align-items:center}
.nav-section-links{display:flex;gap:20px}
.nav-link{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;
  text-decoration:none;transition:color 0.15s;
}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active::before{content:'○ ';font-size:7px;vertical-align:1px}
.nav-center{display:flex;gap:20px;align-items:center}
.basket-btn{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);
  cursor:pointer;background:none;border:none;padding:0;transition:color 0.15s;
}
.basket-btn:hover,.basket-btn.active{color:var(--text)}
.basket-btn.active::before{content:'○ ';font-size:7px;vertical-align:1px}
.nav-right{display:flex;gap:20px;align-items:center}
.view-toggle{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);
  cursor:pointer;background:none;border:none;padding:0;
}
.view-toggle.active{color:var(--text)}
.view-divider{color:var(--border);font-size:9px}
#clock{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em}

/* MAIN */
main{padding-top:44px}
section{display:none}
section.active{display:block}

/* ── IMAGE LIST VIEW ── */
#list-view{padding:0 var(--gutter)}

.project-row{
  padding:20px 0 28px;
  transition:opacity 0.2s;
}
.project-row.dimmed{opacity:0.18}

/* Layout: images in left 1/3, then description, then meta on far right */
.project-body{
  display:flex;
  align-items:flex-start;
  gap:0;
}
.project-left{
  /* image column — constrained to left of the split line */
  flex:0 0 calc(var(--split) - var(--gutter) * 2);
  padding-bottom:4px;
}
.project-num-name{
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.01em;
  display:block;
  margin-bottom:12px;
}
.project-images{
  display:flex;
  flex-direction:row;
  gap:8px;
  flex-wrap:wrap;
}
.img-slot{background:var(--placeholder);flex-shrink:0;display:block}
.img-slot.hero{ width:200px; height:155px; }
.img-slot.thumb{ width:100px; height:130px; }
.img-slot.sq{ width:120px; height:120px; }
.img-slot img{width:100%;height:100%;object-fit:cover;display:block}

.project-center{
  /* description — starts just right of the split line */
  flex:1 1 auto;
  padding-left:24px;
  padding-top:2px;
}
.project-desc{
  font-size:11px;color:var(--muted);line-height:1.6;
}
.project-right{
  flex:0 0 auto;
  text-align:right;
  line-height:1.9;
  padding-left:40px;
  padding-top:2px;
}
.project-office{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);display:block}
.project-year{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);display:block}
.project-tag{font-family:'DM Mono',monospace;font-size:9px;color:var(--border);display:block;letter-spacing:0.06em;text-transform:uppercase}

/* ── TEXT-ONLY LIST VIEW ── */
#text-view{padding:8px var(--gutter) 48px;display:none}
#text-view.show{display:block}
.text-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0;transition:opacity 0.2s;
}
.text-row.dimmed{opacity:0.18}
.text-name{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.01em}
.text-right{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);display:flex;gap:16px;align-items:baseline}
.text-tag{font-size:9px;color:var(--border);letter-spacing:0.06em;text-transform:uppercase}

/* ── GRID / COLLAGE VIEW ── */
#grid-view{padding:0;display:none}
#grid-view.show{display:block}
.grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px}
.grid-card{cursor:pointer;transition:opacity 0.2s;overflow:hidden}
.grid-card.dimmed{opacity:0.18}
.grid-img{width:100%;aspect-ratio:3/2;background:var(--placeholder);overflow:hidden}
.grid-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ── ABOUT ── */
#about-section{padding:60px var(--gutter) 80px;max-width:560px}
.about-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:40px}
.about-bio{font-size:13px;line-height:1.9;margin-bottom:40px}
.about-block-title{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.about-contact a{font-size:12px;color:var(--text);text-decoration:none;border-bottom:0.5px solid var(--border);transition:border-color 0.15s}
.about-contact a:hover{border-color:var(--text)}