/* Shared styles for the inner pages (work list, project pages, about, contact).
   Same language as the home page — Poppins for the logic side, Newsreader for the creative side, a red dot as the
   only accent — but on paper-white: the home page is the stage, these pages are for reading. */
:root {
  --bg:#FFFFFF; --fg:#141414; --mute:#7A797E; --body:#3A3A3F; --line:#E4E2DC; --panel:#F3F3F1; --hair:rgba(20,20,20,.12);
  --accent:#EF3704; --m:56px;
  --sans:'Poppins', sans-serif; --serif:'Newsreader', serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body { background:var(--bg); color:var(--fg); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* header: same logo and nav as home; gains a blurred backdrop once the page scrolls */
.top { position:fixed; inset:0 0 auto; height:110px; padding:0 var(--m); display:flex; align-items:center; justify-content:space-between; z-index:20;
  transition:background .4s, height .4s; }
.top.scrolled { background:rgba(255,255,255,.85); backdrop-filter:blur(12px); height:84px; }
.top .logo img { width:46px; height:46px; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.top .logo:hover img { transform:scale(1.06); }
.top nav { display:flex; gap:52px; font-size:17px; }
.top nav a { position:relative; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.top nav a::before, .dot-link::before { content:''; position:absolute; left:-15px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--accent); transform:scale(0); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.top nav a:hover { transform:translateX(6px); }
.top nav a:hover::before, .top nav a.here::before, .dot-link:hover::before { transform:scale(1); }
/* one dot at a time: while the pointer is on the menu, the dot follows the pointer instead of marking the current page */
.top nav:hover a.here:not(:hover)::before { transform:scale(0); }
.dot-link { position:relative; }

/* type scale: display 120 · H1 72–84 · H2 40–44 · H3 22 · lead 22 · body 17 · small 13 */
.wrap { padding:0 var(--m); }
.display { font-size:120px; line-height:.95; font-weight:600; letter-spacing:-.045em; }
.h1 { font-size:76px; line-height:1.12; font-weight:600; letter-spacing:-.04em; }
.h1.serif { font-family:var(--serif); font-weight:400; font-size:88px; letter-spacing:-.025em; line-height:1.1; }
.h2 { font-size:40px; line-height:1.1; font-weight:400; letter-spacing:-.02em; }
.h2.serif { font-family:var(--serif); font-size:44px; }
.h2::after { content:''; display:inline-block; width:9px; height:9px; margin-left:10px; border-radius:50%; background:var(--accent); vertical-align:.12em; }
.h3 { font-size:22px; line-height:1.3; font-weight:500; letter-spacing:-.01em; }
.lead { font-size:22px; line-height:1.55; color:var(--fg); }
.body { font-size:17px; line-height:1.75; color:var(--body); }
.body + .body { margin-top:1em; }
.small { font-size:13px; line-height:1.6; color:var(--mute); }
.label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }

/* hairline mat around pictures, as on the home page — here a pale paper mat */
.mat { padding:10px; background:var(--panel); border:1px solid var(--hair); }
.mat img { width:100%; }

/* little wave on titles, same as home */
.wave span { display:inline-block; }
.wave .w { white-space:nowrap; }
.wave.go span:not(.w) { animation:wave .6s cubic-bezier(.3,.7,.3,1) both; animation-delay:calc(var(--i) * 30ms); }
.wave.sm.go span:not(.w) { animation-name:wave-sm; }
@keyframes wave { 0%,100% { transform:none } 40% { transform:translateY(-12px) } }
@keyframes wave-sm { 0%,100% { transform:none } 40% { transform:translateY(-6px) } }

/* filter row used on the work page */
.filters { display:flex; gap:40px; font-size:17px; }
.filters button { position:relative; font:inherit; color:var(--mute); background:none; border:0; cursor:pointer; transition:color .25s; }
.filters button:hover, .filters button.on { color:var(--fg); }
.filters button::before { content:''; position:absolute; left:-15px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent);
  transform:scale(0); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.filters button.on::before { transform:scale(1); }

/* footer on every inner page */
.foot { margin-top:180px; padding:56px var(--m) 48px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.foot .say { font-size:56px; line-height:1.05; font-weight:600; letter-spacing:-.04em; }
.foot .say em { font-style:normal; font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }
.foot .links { text-align:right; font-size:16px; line-height:1.9; }
.foot .links .mail { cursor:pointer; }
.foot .links .mute { color:var(--mute); }

/* gentle reveal as sections enter the viewport */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* project pages open on a dark title band; the header reads light over it, then dark once the white content arrives */
.dark { background:#010101; color:#F8F9F8; padding-bottom:96px; }
.dark .label, .dark .small { color:#8E8C92; }
.dark .lead { color:#D8D7DA; }
.dark .meta { border-top-color:#2A2A2A; }
.dark .mat { background:#0d0d0d; border-color:rgba(248,249,248,.14); }
.top.on-dark { color:#F8F9F8; }
.top.on-dark .logo img { filter:invert(1); }
.top.on-dark.scrolled { background:rgba(1,1,1,.72); }

/* slim picture strip that opens the white content, as on the original site */
.strip { margin-top:72px; }
.strip img { width:100%; height:auto; }
.strip.quad { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.strip.quad img { aspect-ratio:1.4; object-fit:cover; }

/* rows of pictures: widths follow each picture's proportions so every picture in the row shares one height */
.two, .three, .four, .five { display:flex !important; align-items:flex-start; gap:24px; }
.four, .five { gap:16px; margin-top:16px; }
.two > figure, .three > figure, .four > figure, .five > figure { flex:none; min-width:0; }
.two img, .three img, .four img, .five img { width:100%; }

/* every content picture opens in a viewer */
main img.zoomable { cursor:zoom-in; }
.lb { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:#FFFFFF;
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.lb.open { opacity:1; pointer-events:auto; }
.lb figure { display:flex; flex-direction:column; align-items:center; max-width:90vw; }
.lb img { max-width:90vw; max-height:82vh; object-fit:contain; transform:scale(.98); transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.lb.open img { transform:none; }
.lb img.swap { opacity:0; }
.lb figcaption { margin-top:16px; display:flex; gap:24px; font-size:13px; color:var(--body); }
.lb figcaption b { font-weight:400; color:var(--mute); }
.lb button { position:absolute; width:52px; height:52px; border-radius:50%; border:1px solid var(--hair); background:#fff; color:var(--fg); padding:0;
  font:20px var(--sans); cursor:pointer; transition:border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.lb button:hover { border-color:var(--accent); }
.lb .x { top:32px; right:var(--m); }
.lb .prev { left:var(--m); top:50%; margin-top:-26px; }
.lb .next { right:var(--m); top:50%; margin-top:-26px; }
.lb .prev:hover { transform:translateX(-4px); }
.lb .next:hover { transform:translateX(4px); }

/* ---------- phones and small tablets ---------- */
@media (max-width:760px) {
  :root { --m:20px; }
  .top { height:68px; }
  .top.scrolled { height:60px; }
  .top .logo img { width:38px; height:38px; }
  .top nav { gap:28px; font-size:14px; letter-spacing:.01em; }
  .top nav a::before { left:-12px; width:6px; height:6px; margin-top:-3px; }
  .top nav a:hover { transform:none; }

  .display { font-size:64px; }
  .h1 { font-size:38px; line-height:1.12; }
  .h1.serif { font-size:42px; line-height:1.08; }
  .h2 { font-size:28px; }
  .h2.serif { font-size:31px; }
  .h3 { font-size:19px; }
  .lead { font-size:17px; line-height:1.6; }
  .body { font-size:16px; line-height:1.7; }

  .dark { padding-bottom:56px; }
  .strip { margin-top:40px; }
  .strip.quad { grid-template-columns:repeat(2, 1fr); }

  /* picture rows: two across at most; the row script hands wider rows over to this grid */
  .three.stack, .four.stack, .five.stack { flex-wrap:wrap; gap:10px; }
  .four, .five { gap:10px; margin-top:10px; }
  .two, .three { gap:12px; }

  .foot { flex-direction:column; align-items:flex-start; margin-top:110px; padding:40px var(--m) 36px; gap:28px; }
  .foot .say { font-size:34px; }
  .foot .links { text-align:left; }

  .lb .x { top:16px; right:16px; }
  .lb .prev, .lb .next { top:auto; bottom:24px; margin-top:0; }
  .lb .prev { left:calc(50% - 64px); }
  .lb .next { right:calc(50% - 64px); }
  .lb img { max-width:94vw; max-height:72vh; }
}

/* the narrowest phones: keep the four menu items on one line */
@media (max-width:360px) {
  .top nav { gap:18px; font-size:13px; }
}