/* ===========================================================
   Nick Geurtsen — Architecture
   Shared tokens + primitives. One stylesheet, every page.
   =========================================================== */

:root{
  --paper:#F4F2ED;
  --paper-edge:#E7E4DC;
  --ink:#1C1B18;
  --graphite:#78756C;
  --rule:#D5D2C9;
  --hair:#E2DFD7;
  --grid:rgba(90,100,110,.05);

  /* pigments — homepage slots, permanent regardless of which project sits in them */
  --viridian:#2F6A5A;
  --caput:#6B2F38;
  --prussian:#1E3D4C;
  --sienna:#9C6329;
  --payne:#3F4A54; /* interface colour: links, focus, status — never a project colour */

  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,serif;

  --fs-hero:clamp(24px,4.5vw,34px);
  --fs-title:clamp(18px,2.6vw,21px);
  --fs-body:clamp(13px,1.6vw,14px);
  --fs-caption:8px;
  --fs-label:11px;

  --pad:clamp(20px,4vw,56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper-edge);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100svh;
  display:flex;
  padding:clamp(8px,2vw,24px);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ── the sheet — every page is a drawing sheet ─────────────── */
.sheet{
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:calc(100svh - clamp(16px,4vw,48px));
  background:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(28,27,24,.04),0 8px 30px rgba(28,27,24,.045);
  padding:var(--pad);
}
.sheet::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sheet>*{position:relative}

/* ── nav ─────────────────────────────────────────────────── */
.head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:15px;margin-bottom:clamp(20px,5vh,48px);
  border-bottom:1px solid var(--rule);
}
/* homepage: field-wrap already pads itself symmetrically top+bottom,
   so the header's own margin would double up the gap above vs below */
.home .head{margin-bottom:0}
.mark{font-size:clamp(12px,1.5vw,14px);font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.mark a{text-decoration:none}
.nav-r{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.nav-r a{text-decoration:none;color:var(--graphite);transition:color .2s;padding-bottom:2px;border-bottom:1px solid transparent}
.nav-r a:hover{color:var(--ink)}
.nav-r a[aria-current="page"]{color:var(--ink);border-color:var(--rule)}
.lang{display:flex;align-items:center;gap:1px}
.lang button{background:none;border:0;padding:2px 4px;color:var(--graphite);cursor:pointer;font:inherit;letter-spacing:inherit}
.lang button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.lang i{color:var(--rule);font-style:normal}

button:focus-visible,a:focus-visible{outline:1.5px solid var(--payne);outline-offset:3px}

/* ── footer / titleblock (shared: home + 404) ──────────────── */
.foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(26px,5vw,64px);padding-top:20px;margin-top:auto;border-top:1px solid var(--rule);
}
.statement{max-width:36ch;flex:1 1 280px}
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin-bottom:11px}
.statement p{font-family:var(--serif);font-size:clamp(15px,1.8vw,18px);line-height:1.58;font-weight:300}
.statement a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.statement a:hover{border-color:var(--payne)}

.titleblock{border:1px solid var(--rule);background:var(--paper);min-width:min(300px,100%);font-variant-numeric:tabular-nums}
.tb-name{padding:11px 15px 10px;border-bottom:1px solid var(--rule)}
.tb-name b{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.tb-name span{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--graphite)}
.tb-rows{display:grid;grid-template-columns:minmax(74px,auto) 1fr}
.tb-rows>div{padding:8px 15px;border-bottom:1px solid var(--hair);font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center}
.tb-rows .k{color:var(--graphite);border-right:1px solid var(--hair)}
.tb-rows .v{font-weight:500}
.tb-rows>div:nth-last-child(-n+2){border-bottom:0}
.status{color:var(--viridian)}
.status.pending{color:var(--sienna)}
.status::before{content:"";width:5px;height:5px;margin-right:7px;background:currentColor;border-radius:50%;flex-shrink:0}

/* ── homepage: fibonacci field ──────────────────────────────── */
.field-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(20px,6vh,64px) 0;min-height:0}
.field{display:grid;gap:5px;background:var(--paper);grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);width:min(100%,760px);aspect-ratio:5/3}
.piece{
  border:0;padding:0;display:flex;align-items:flex-end;justify-content:flex-start;
  text-decoration:none;position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px);
  opacity:0;transform:scale(.94);
  animation:settle .95s cubic-bezier(.2,.7,.25,1) forwards;
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.7,.25,1),filter .25s ease;
}
.piece .plabel{
  font-family:var(--sans);color:#fff;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(10px,1.1vw,13px);padding:12px 14px;text-shadow:0 1px 4px rgba(0,0,0,.35);
}
.p1{grid-area:1/1/2/2;background:var(--prussian);animation-delay:.14s}
.p2{grid-area:1/2/2/3;background:var(--sienna);animation-delay:.30s}
.p3{grid-area:2/1/4/3;background:var(--caput);animation-delay:.46s}
.p4{grid-area:1/3/4/6;background:var(--viridian);animation-delay:.62s}
@keyframes settle{to{opacity:1;transform:scale(1)}}
.field:hover .piece,.field:focus-within .piece{filter:brightness(.82)}
.field .piece:hover,.field .piece:focus-visible{filter:brightness(1);transform:translateY(-3px)}

@media (max-width:680px){
  .field{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr);aspect-ratio:3/5;width:min(100%,380px)}
  .p1{grid-area:4/3/5/4}.p2{grid-area:5/3/6/4}.p3{grid-area:4/1/6/3}.p4{grid-area:1/1/4/4}
}
@media (prefers-reduced-motion:reduce){.piece{animation-duration:.01ms;opacity:1;transform:none}*{transition-duration:.01ms!important}}

/* ── placeholder image blocks ───────────────────────────────── */
.ph{
  position:relative;display:flex;align-items:flex-end;
  background:var(--tone,var(--graphite));
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px);
  color:rgba(255,255,255,.88);overflow:hidden;
}
.ph span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;line-height:1.4}
.ph.landscape{aspect-ratio:16/10}
.ph.wide{aspect-ratio:21/9}
.ph.portrait{aspect-ratio:3/4}
.ph.square{aspect-ratio:1/1}
.ph.clickable{cursor:zoom-in}

/* ── lightbox ────────────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;background:rgba(28,27,24,.86);display:none;
  align-items:center;justify-content:center;z-index:999;padding:5vh 5vw;
}
.lightbox.open{display:flex}
.lightbox .lb-inner{width:85vw;height:85vh;max-width:1400px}
.lightbox .lb-inner .ph{width:100%;height:100%}

/* ── project index grid ─────────────────────────────────────── */
.controls{
  display:flex;flex-wrap:wrap;gap:20px 30px;padding-bottom:20px;margin-bottom:34px;
  border-bottom:1px solid var(--rule);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);
}
.ctrl-group{display:flex;align-items:center;gap:8px}
.controls select{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);padding:5px 10px;border-radius:2px;
}
.result-count{margin-left:auto;color:var(--graphite)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px 22px}
.pcard{display:block;text-decoration:none;color:inherit;transition:transform .2s ease}
.pcard:hover{transform:translateY(-4px)}
.pcard .ph{aspect-ratio:4/3;margin-bottom:11px;display:flex;align-items:center;justify-content:center;transition:box-shadow .2s ease}
.pcard:hover .ph{box-shadow:0 10px 24px rgba(28,27,24,.16)}
.pcard .init{font-weight:700;font-size:26px;color:rgba(255,255,255,.92);letter-spacing:.04em}
.pcard h3{font-size:15px;font-weight:600;margin-bottom:3px}
.pcard .pmeta{font-size:10.5px;color:var(--graphite);letter-spacing:.08em;text-transform:uppercase}

/* ── Long Table (project page style 3) ──────────────────────── */
.lt{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(46px,8vh,100px);padding:10px 0 100px}
.lt-hero{aspect-ratio:16/9}
.lt-meta h1{font-family:var(--sans);font-size:var(--fs-title);font-weight:600;margin-bottom:14px}
.lt-meta dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:var(--fs-caption);color:var(--graphite);letter-spacing:.04em;text-transform:uppercase;max-width:520px}
.lt-meta dt{font-weight:600;color:var(--ink)}
.lt-text{font-family:var(--serif);font-size:var(--fs-body);line-height:1.7;font-weight:300;max-width:66ch}
.lt-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.lt-pair{grid-template-columns:1fr}}
.lt-cap{font-size:var(--fs-caption);color:var(--graphite);margin-top:9px}
.lt-end{text-align:center;padding-top:36px;border-top:1px solid var(--rule)}
.lt-end a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--graphite);border-bottom:1px solid var(--rule);padding-bottom:2px}
.lt-end a:hover{color:var(--ink);border-color:var(--payne)}

/* ── Editorial blocks — asymmetric composition, Long Table v2 ─
   Replaces the old image/text/image rhythm. Each block type is a
   different move; a project mixes several rather than repeating one. */
.ed{display:flex;flex-direction:column;gap:clamp(60px,10vh,150px);padding:6px 0 120px}
.ed-lead{max-width:340px}
.ed-lead h1{font-family:var(--sans);font-size:var(--fs-title);font-weight:600;margin-bottom:12px}
.ed-lead dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.ed-lead dt{font-weight:600;color:var(--viridian)}

/* full-bleed: image runs to the sheet's own edges */
.ed-full{width:calc(100% + var(--pad) * 2);margin-left:calc(var(--pad) * -1)}
.ed-full .ph{aspect-ratio:21/9}

/* feature: a narrow text column beside a large image, generous gap between */
.ed-feature{display:grid;grid-template-columns:minmax(180px,270px) 1fr;gap:clamp(30px,7vw,100px);align-items:start}
.ed-feature.reverse{grid-template-columns:1fr minmax(180px,270px)}
.ed-feature.reverse .ed-feature-text{order:2}
.ed-feature.reverse .ed-feature-img{order:1}
.ed-feature-text{font-family:var(--serif);font-size:var(--fs-body);line-height:1.75;font-weight:300;padding-top:6px}
.ed-feature-img .ph{aspect-ratio:4/3}
@media (max-width:760px){.ed-feature,.ed-feature.reverse{grid-template-columns:1fr}.ed-feature.reverse .ed-feature-text{order:1}.ed-feature.reverse .ed-feature-img{order:2}}

/* strip: a contact-sheet row, deliberately uneven column widths */
.ed-strip{display:grid;gap:14px}
.ed-strip .ph{aspect-ratio:4/3}
@media (max-width:640px){.ed-strip{grid-template-columns:1fr !important}}

/* corner: one big image, a short passage tucked to one side rather than centered under it */
.ed-corner{display:flex;gap:clamp(20px,4vw,50px);align-items:flex-end}
.ed-corner .ph{flex:1;aspect-ratio:16/10}
.ed-corner-text{width:min(230px,32%);font-family:var(--serif);font-size:var(--fs-body);line-height:1.75;font-weight:300}
@media (max-width:640px){.ed-corner{flex-direction:column-reverse}.ed-corner-text{width:100%}}

.ed-text{font-family:var(--serif);font-size:var(--fs-body);line-height:1.75;font-weight:300;max-width:52ch}
.ed-cap{font-size:var(--fs-caption);color:var(--graphite);letter-spacing:.04em;text-transform:uppercase;margin-top:8px}
.ed-end{text-align:center;padding-top:36px;border-top:1px solid var(--rule)}
.ed-end a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--graphite);border-bottom:1px solid var(--rule);padding-bottom:2px}
.ed-end a:hover{color:var(--ink);border-color:var(--payne)}

/* ── Pin-up board (project page style 4) ────────────────────── */
.board-wrap{
  flex:1;position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:4px;
  margin-top:10px;cursor:grab;min-height:60vh;touch-action:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;background-color:var(--paper);
}
.board-wrap.dragging{cursor:grabbing}
.board-canvas{position:absolute;top:0;left:0;transform-origin:0 0;width:2200px;height:1650px;will-change:transform}
.pin{
  position:absolute;width:220px;background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 5px 16px rgba(28,27,24,.14);padding:8px;transform:rotate(var(--rot,0deg));
}
.pin::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:var(--payne);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.pin .ph{aspect-ratio:4/3;margin-bottom:7px;cursor:zoom-in}
.pin .cap{font-size:10.5px;color:var(--graphite);line-height:1.4}
.pin.note{font-family:var(--serif);font-size:13.5px;line-height:1.55;padding:16px;width:230px}
.pin.end-card{text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;min-height:110px}
.pin.end-card p{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.pin.end-card:hover p{color:var(--ink)}
.thread{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.board-hint{
  position:absolute;bottom:14px;left:14px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--graphite);background:var(--paper);padding:5px 11px;border:1px solid var(--rule);border-radius:20px;
  display:flex;align-items:center;gap:10px;
}
.board-hint button{background:none;border:0;color:var(--graphite);text-decoration:underline;cursor:pointer;font-size:inherit;letter-spacing:inherit}
.board-hint button:hover{color:var(--ink)}

/* ── About page — genuine corners, not grid-track tricks.
   bio+photo cluster pinned top-right; CV cluster pinned bottom-left
   and grows upward as entries are added; contact pinned bottom-right.
   .about is the positioning context — it already fills the space
   below the header via flex:1, same mechanism as the homepage field. ── */
.about{position:relative;flex:1;min-height:340px}

.about-top-cluster{
  position:absolute;top:0;right:0;
  display:flex;align-items:flex-start;gap:clamp(28px,4vw,48px);
}
.about-bio-cell{width:420px;max-width:56vw}
.about-bio-text{text-align:right}
.about-bio-text p{font-family:var(--serif);font-size:clamp(14px,1.7vw,16px);line-height:1.5;font-weight:300;margin-bottom:.7em}
.about-bio-text p:last-child{margin-bottom:0}
.about-photo-cell{width:320px;max-width:38vw;flex-shrink:0}
.about-photo-cell .ph{aspect-ratio:3/4;width:100%}

.about-bottom-cluster{
  position:absolute;left:0;bottom:0;
  display:flex;align-items:flex-end;gap:clamp(32px,4vw,56px);
}
.about-bottom-cluster h4{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-bottom:9px;border-bottom:1px solid var(--rule);padding-bottom:6px}
.about-bottom-cluster li{font-size:13px;margin-bottom:8px;line-height:1.4}
.about-bottom-cluster li b{display:block}
.about-bottom-cluster li span{color:var(--graphite);font-size:11px}

.about-contact-cell{position:absolute;right:0;bottom:0;text-align:right}
.about-contact-cell p{font-size:12px;color:var(--graphite);margin-bottom:8px}
.about-contact-cell a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);font-size:14px}
.about-contact-cell a:hover{border-color:var(--payne)}

@media (max-width:640px){
  .about-top-cluster{position:static;flex-direction:column-reverse;align-items:flex-start;gap:24px}
  .about-bio-cell{width:100%;max-width:none}
  .about-photo-cell{width:180px;max-width:45vw}
  .about-bio-text{text-align:left}
  .about-bottom-cluster{position:static;flex-direction:column;align-items:flex-start;gap:24px;margin-top:32px}
  .about-contact-cell{position:static;text-align:left;margin-top:32px}
}

/* ── 404 ─────────────────────────────────────────────────────── */
.notfound{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px;padding:40px 0}
.notfound .titleblock{width:min(340px,90%)}
.notfound p.line{font-family:var(--serif);font-size:15px;color:var(--graphite);font-style:italic}