/* Will Kreibich Architect
   Warm off-white, near-black, one grey. No accent colour, no radii, no shadow.
   The images carry the colour; whitespace carries the emphasis. */

/* Subset to Latin + typographic punctuation, WOFF2. 297 KB of TTF -> 32 KB. */
@font-face{font-family:'Neue Haas';src:url('/fonts/NeueHaasDisplayLight.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas';src:url('/fonts/NeueHaasDisplayRoman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Haas';src:url('/fonts/NeueHaasDisplayMedium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#f4f3f0;
  --ink:#131311;
  --mute:#716e66;          /* 4.59:1 on --bg — WCAG AA for body text */
  --line:rgba(19,19,17,.13);       /* decorative rules only */
  --line-field:rgba(19,19,17,.55); /* 3.99:1 — form boundaries */
  --gut:clamp(20px,5vw,72px);
  --hd:62px;
  --font:'Neue Haas','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:15px;line-height:1.5;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,figure{margin:0}
dl{display:grid}

/* Accessibility ------------------------------------------------------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:12px 18px}
.skip:focus{left:0}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}

/* Header -------------------------------------------------------------- */
.hd{
  position:sticky;top:0;z-index:50;background:var(--bg);
  display:flex;justify-content:space-between;align-items:baseline;gap:32px;
  padding:22px var(--gut);min-height:var(--hd);
}
.hd-name{font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.hd-nav{display:flex;gap:28px}
.hd-nav a{font-size:13px;color:var(--mute);transition:color .3s var(--ease)}
.hd-nav a:hover,.hd-nav a[aria-current]{color:var(--ink)}

/* Home — project sequence ---------------------------------------------
   Name sits on the image's midline. Year and sector are set on the image
   itself, at its left and right edges. Clicking the image reveals a short
   description in place rather than navigating away; scrolling clears it. */
.pj{
  display:grid;grid-template-columns:minmax(190px,25%) 1fr;
  gap:clamp(24px,4vw,64px);
  padding:0 var(--gut) 13vh;
  align-items:center;
}
.pj:first-of-type{padding-top:2vh}
.pj-meta{position:relative}
.pj-title{font-size:clamp(17px,1.35vw,20px);font-weight:400;letter-spacing:-.016em;line-height:1.2}
.pj-toggle{
  font:inherit;background:none;border:0;padding:0;margin:0;color:inherit;
  text-align:left;cursor:pointer;transition:opacity .3s var(--ease);
}
.pj-toggle:hover{opacity:.55}
.pj-num{margin-top:10px;font-size:12px;letter-spacing:.09em;color:var(--mute)}

/* Revealed description. Positioned out of flow so showing it never nudges
   the project name off the image's midline. */
.pj-desc{margin-top:26px;max-width:42ch}
.js .pj-desc{
  position:absolute;top:calc(100% + 26px);left:0;right:0;margin-top:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s linear .55s;
}
.js .pj[data-open='true'] .pj-desc{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s;
}
.pj-desc p{font-size:15px;line-height:1.55;color:var(--mute)}

.pj-fig{display:flex;justify-content:flex-end}
.pj-shot{
  position:relative;display:block;padding:0;border:0;background:none;
  cursor:pointer;font:inherit;max-width:100%;
}
.pj-shot picture{display:block}
.pj-shot img{width:auto;max-width:100%;max-height:92vh}
/* Set on the image, so a soft shadow carries them over light and dark alike */
.pj-year,.pj-sector{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:12px;letter-spacing:.07em;color:#fff;white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.4);
  pointer-events:none;
}
.pj-year{left:16px}
.pj-sector{right:16px}

/* About ---------------------------------------------------------------- */
/* A single column of prose — no sidebar. */
.ab{padding:9vh var(--gut) 14vh}
.ab-text{max-width:60ch;display:flex;flex-direction:column;gap:20px}
.ab-lede{font-size:clamp(18px,1.6vw,23px);line-height:1.4;letter-spacing:-.016em}
.ab-text p:not(.ab-lede){font-size:16px;line-height:1.62}

.lnk{border-bottom:1px solid var(--line);padding-bottom:1px}
.lnk:hover{border-color:var(--ink)}

/* Journal -------------------------------------------------------------- */
.jn-intro{padding:9vh var(--gut) 6vh;max-width:56ch;color:var(--mute)}
.jn{columns:2;column-gap:clamp(24px,4vw,64px);padding:0 var(--gut) 14vh}
.jn-item{break-inside:avoid;margin:0 0 clamp(24px,4vw,56px)}
.jn-item figcaption{padding-top:10px;font-size:11px;letter-spacing:.05em;color:var(--mute)}

/* Footer --------------------------------------------------------------- */
.ft{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;
  padding:5vh var(--gut) 6vh;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute);
}
.ft-name{font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.ft-col{display:flex;flex-direction:column;gap:4px}
.ft-end{text-align:right}
.ft a:hover{color:var(--ink)}

/* Reveal — opacity only. No scale, no parallax, no cursor. -------------- */
.reveal{opacity:0;transition:opacity 1.1s var(--ease)}
.reveal.in{opacity:1}
.no-js .reveal,.reveal.in{opacity:1}

/* Responsive ----------------------------------------------------------- */
@media (max-width:860px){
  .pj{grid-template-columns:1fr;gap:18px;padding-bottom:10vh;align-items:start}
  .pj-meta{order:2}                          /* §29 — image first on mobile */
  .pj-fig{order:1}
  .pj-num{margin-top:8px}
  .js .pj-desc{position:static;margin-top:18px;transform:none}
  .jn{columns:1}
  .ft{grid-template-columns:1fr;gap:18px}
  .ft-end{text-align:left}
}
@media (max-width:600px){
  /* Full name + four links will not sit on one line at this width, so the
     header stacks. No hamburger — every link stays visible and tappable. */
  .hd{flex-direction:column;align-items:flex-start;gap:9px;
      padding:13px var(--gut) 12px;min-height:0}
  .hd-name{font-size:11px;letter-spacing:.13em}
  .hd-nav{gap:20px}
  .hd-nav a{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transition:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}