/* Metropolis, served from the site itself (assets/fonts). */
@font-face {
  font-family: "Metropolis";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/metropolis-400.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/metropolis-500.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/metropolis-600.woff2") format("woff2");
}
@font-face {
  font-family: "Metropolis";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/metropolis-700.woff2") format("woff2");
}

:root {
  --pad: 50px;
  --sidebar: 200px;
  --gap-sidebar: 60px;
  --gutter: 10px;
  --ink: #1f1f1f;
  --ink-strong: #121212;
  --muted: #a3a3a3;
  --text: #666;
  --bg: #fff;
  --placeholder: #f5f5f5;
  --logo-green: #2f6b1e;
  /* Menu letter spacing, e.g. 0.02em to loosen or -0.01em to tighten. */
  --menu-letter-spacing: 0.03em;
  --font: "proxima-nova", "Metropolis", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img { display: block; }

/* ---------- Sidebar ---------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(var(--pad) + var(--sidebar));
  padding: var(--pad) 0 var(--pad) var(--pad);
  overflow-y: auto;
  z-index: 10;
}

.logo { display: block; width: var(--sidebar); }
.logo img { width: 100%; height: auto; }

/* Text fallback when no logo.png is in the Drive root */
.logo-text {
  display: inline-flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.logo-text span:last-child {
  background: var(--logo-green);
  color: #fff;
  padding: 2px 4px 0;
  margin-top: 2px;
}

/* Offsets measured against the original site at 1440px wide. */
.nav { margin-top: 30px; padding-left: 3.6px; }

.nav a,
.nav-secondary a {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: var(--menu-letter-spacing);
  transition: color 0.15s;
}
.nav a:hover,
.nav a.active,
.nav-secondary a:hover,
.nav-secondary a.active { color: var(--muted); }

.nav-secondary { margin-top: 20px; padding-left: 2.6px; }
.nav-secondary a { font-size: 13px; font-weight: 400; line-height: 26px; }

.social { display: flex; gap: 10px; margin-top: 20px; }
.social a { color: #000; width: 16px; height: 16px; }
.social a:hover { opacity: 0.6; }
.social svg { width: 16px; height: 16px; display: block; }

.viewer-controls {
  position: fixed;
  left: var(--pad);
  bottom: var(--pad);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 2;
  text-transform: uppercase;
}
.viewer-controls[hidden] { display: none; }
.viewer-controls button,
.viewer-controls a { text-transform: uppercase; letter-spacing: inherit; }
.viewer-controls button:hover,
.viewer-controls a:hover { color: var(--muted); }

.mobile-bar { display: none; }

/* ---------- Content ---------- */

.content {
  margin-left: calc(var(--pad) + var(--sidebar) + var(--gap-sidebar));
  padding: var(--pad) var(--pad) var(--pad) 0;
  min-height: 100vh;
  outline: none;
}

.status { color: var(--muted); font-size: 14px; }

/* Loading placeholders, shown only on a first visit while the content loads.
   They fade in after a short delay, so a fast load never flashes them. */
.nav-skeleton { display: block; animation: skel-in 0.3s ease 0.25s both; }
.nav-skeleton i {
  display: block;
  height: 12px;
  margin: 12px 0;
  border-radius: 3px;
  background: #ececec;
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.mozaic.skeleton { animation: skel-in 0.3s ease 0.25s both; }
.mozaic.skeleton .tile { background: #f3f3f3; animation: skel-pulse 1.4s ease-in-out infinite; }
.mozaic.skeleton .mozaic-col:nth-child(2) .tile { animation-delay: 0.15s; }
.mozaic.skeleton .mozaic-col:nth-child(3) .tile { animation-delay: 0.3s; }
@keyframes skel-in { from { opacity: 0; } }
@keyframes skel-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .nav-skeleton, .nav-skeleton i, .mozaic.skeleton, .mozaic.skeleton .tile { animation: none; }
}

/* New content fades in gently instead of popping in. */
.nav a { animation: fade-in 0.25s ease both; }
@keyframes fade-in { from { opacity: 0; } }

/* Mozaic (masonry) */

.mozaic { display: flex; gap: var(--gutter); align-items: flex-start; }
.mozaic-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gutter); }

.tile {
  display: block;
  background: var(--placeholder);
  position: relative;
  overflow: hidden;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s;
}
.tile img.loaded { opacity: 1; }
.tile:hover img.loaded { opacity: 0.85; }

/* Single image viewer */

.viewer {
  height: calc(100vh - 2 * var(--pad));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.viewer img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Flipbooks (assets/flipbook.js) */

/* Up to 1500px wide (a two-page spread at the 1000px stage cap), centred on
   the whole window like the About page, but never closer to the menu than 10px. */
.flipbooks {
  --content-left: calc(var(--pad) + var(--sidebar) + var(--gap-sidebar));
  --books-w: min(calc(100% - 10px), 1500px);
  width: var(--books-w);
  margin-left: max(10px, calc((100vw - var(--books-w)) / 2 - var(--content-left)));
}

.book + .book { margin-top: 80px; }

.book-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
}

.fb { position: relative; user-select: none; -webkit-user-select: none; }

/* The book fits inside the stage; the bar sits underneath it. */
.fb-stage {
  position: relative;
  height: clamp(360px, calc(100vh - 2 * var(--pad) - 56px), 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Trim the sides only: the book's shadow may spill above and below. */
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
}

.fb-wrap {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}
.fb-mount, .fb-mount > div { display: flex; align-items: center; justify-content: center; }
.fb canvas { touch-action: pan-y; -webkit-touch-callout: none; }

.fb-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  touch-action: manipulation;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.fb-side:hover { background: #fff; color: var(--ink); }
.fb-side.prev { left: 8px; }
.fb-side.next { right: 8px; }
.fb-side svg { width: 14px; height: 14px; fill: currentColor; }
.fb .prev svg { transform: rotate(180deg); }
.fb-stage.is-tall .fb-side { display: none; }

.fb button:disabled { opacity: 0.3; pointer-events: none; }
.fb-single .fb-side,
.fb-single .fb-btn.prev,
.fb-single .fb-btn.next,
.fb-single .fb-count,
.fb-single .fb-rule { display: none; }
.fb button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.fb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  margin-top: 16px;
  color: var(--ink);
  white-space: nowrap;
}
.fb-count {
  min-width: 84px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.fb-count span { margin: 0 0.25em; color: var(--muted); }
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
}
.fb-btn:hover { background: var(--ink); color: #fff; }
.fb-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fb-btn.prev svg, .fb-btn.next svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.fb-btn .exit { display: none; }
.fb:fullscreen .fb-btn .enter { display: none; }
.fb:fullscreen .fb-btn .exit { display: block; }
.fb-rule { width: 1px; height: 20px; background: #ddd; }

/* Full screen: the book fills the screen on white. */
.fb:fullscreen { background: #fff; display: flex; flex-direction: column; padding: 24px; }
.fb:fullscreen .fb-stage { flex: 1; height: auto; }

/* Loader: a small book turning its page, with a progress line. */
.fb-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  transition: opacity 0.35s, visibility 0.35s;
}
.fb-loader.done { opacity: 0; visibility: hidden; }
.fb-loader-book { position: relative; width: 52px; height: 36px; perspective: 180px; }
.fb-loader-book span {
  position: absolute;
  top: 0;
  width: 25px;
  height: 36px;
  border: 1px solid var(--ink);
  background: var(--bg);
}
.fb-loader-book span:nth-child(1) { left: 0; border-radius: 3px 0 0 3px; }
.fb-loader-book span:nth-child(2) { right: 0; border-radius: 0 3px 3px 0; }
.fb-loader-book span:nth-child(3) {
  right: 0;
  border: 0;
  border-radius: 0 3px 3px 0;
  background: var(--ink);
  transform-origin: left center;
  animation: fb-turn 1.1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
@keyframes fb-turn {
  from { transform: rotateY(0deg); background: var(--ink); }
  to { transform: rotateY(-180deg); background: var(--muted); }
}
.fb-progress { width: 170px; height: 3px; background: #e6e6e6; overflow: hidden; }
.fb-progress div { width: 0; height: 100%; background: var(--ink); transition: width 0.15s; }
.fb-error { color: var(--muted); font-size: 14px; }

/* Galleries: slideshows of work in order. --r is the first image's height/width.
   The stage fits the window (up to 1000px tall), so the image, the thumbnail
   strip and the counter are all visible without scrolling. */
.gal + .gal, .gal + .book, .book + .gal { margin-top: 80px; }
.gal { outline: none; }

.gal-stage {
  --chrome: 150px;
  width: min(100%, calc(min(100vh - 2 * var(--pad) - var(--chrome), 1000px) / var(--r)));
  aspect-ratio: 1 / var(--r);
  margin: 0 auto;
  position: relative;
  background: var(--placeholder);
  overflow: hidden;
  user-select: none;
}
.gal-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 60px;
  background: rgba(255, 255, 255, 0.55);
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 1;
}
.gal-arrow:hover { background: rgba(255, 255, 255, 0.85); }
.gal-arrow.prev { left: 0; }
.gal-arrow.next { right: 0; }
.gal-arrow svg { width: 14px; height: 24px; }
.gal-arrow:focus-visible, .gal-strip button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.gal-strip {
  display: flex;
  justify-content: safe center;
  margin-top: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.gal-strip button {
  flex: 0 0 auto;
  height: 80px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.gal-strip button:hover,
.gal-strip button.active { opacity: 1; }
.gal-strip img { height: 100%; width: auto; }

.gal-count {
  margin-top: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* About */

/* Option D: the portrait stands on the bottom edge of a soft green panel
   (from the logo), its head breaking out over the panel's top edge, with the
   text centred beside it.
   Panel, portrait and text form one "scene" whose height follows the window
   (so on a laptop he stands on the bottom of the window), up to 1000px. On
   taller screens the scene stops growing and sits centred, so he never takes
   over a big monitor. Every size inside the scene is derived from its height;
   at 1440 x 900 (scene 850px) it matches the original page. */
.about {
  --panel: #edf2e8;
  --photo-ratio: 0.6459; /* portrait width / height */
  --scene-h: min(calc(100vh - var(--pad)), 1000px);
  --u: calc(var(--scene-h) / 850); /* 1px of the 1440 x 900 design */
  --photo-w: calc(var(--scene-h) * var(--photo-ratio) + 26px);
  --text-w: clamp(340px, calc(367 * var(--u)), 440px);
  --scene-gap: clamp(40px, calc(60 * var(--u)), 80px);
  --scene-w: calc(var(--photo-w) + var(--scene-gap) + var(--text-w));
  --content-left: calc(var(--pad) + var(--sidebar) + var(--gap-sidebar));
  min-height: calc(100vh - var(--pad));
  margin-bottom: calc(-1 * var(--pad));
  /* Centred on the whole window, but never closer to the menu than 10px. */
  padding-left: max(10px, calc((100vw - var(--scene-w)) / 2 - var(--content-left)));
  display: grid;
  grid-template-columns: minmax(0, var(--photo-w)) minmax(0, var(--text-w));
  grid-template-rows: var(--scene-h);
  column-gap: var(--scene-gap);
  align-content: center;
  align-items: center;
}

/* The column is a size container, so the portrait and panel can be sized from
   it: the portrait fills the column height unless the column is too narrow,
   and the panel always starts a quarter of the way down the portrait. */
.about-photo { position: relative; align-self: stretch; min-height: 420px; container-type: size; }
.about-photo img,
.about-panel { --fig-h: min(100cqh, (100cqw - 26px) / var(--photo-ratio)); }
.about-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--fig-h) * 0.74);
  background: var(--panel);
}
.about-photo img {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: var(--fig-h);
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}

.about-text {
  padding: 40px 0;
  color: #949494;
  font-size: clamp(13.5px, calc(13.5 * var(--u)), 16px);
  line-height: 1.63;
}
.about-text strong { font-weight: 600; }
.about-text p { margin: 0 0 1.02em; }
.about-text p:last-child { margin-bottom: 0; }
.about-heading {
  margin: 0 0 0.46em;
  padding-bottom: 0.34em;
  color: #000;
  font-size: clamp(35px, calc(35 * var(--u)), 42px);
  font-weight: 700;
  line-height: 1.17;
}
.about-text h2, .about-text h3 { color: var(--ink); font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
.about-text a { color: var(--ink); text-decoration: underline; }
.about-text img { max-width: 100%; height: auto; margin: 14px 0; }

/* Get in touch: small capitals, like the Prev / Next controls. */
.about-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e6e6e6;
}
.about-contact span,
.about-contact a {
  color: var(--ink);
  font-size: clamp(10px, calc(10 * var(--u)), 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.about-contact span { color: var(--muted); }
.about-contact a:hover { color: var(--muted); }

/* Recent work: thumbnails filled in from the galleries by app.js. */
.about-work { margin-top: 32px; display: grid; gap: 10px; }
.about-label,
.about-tiles a span {
  color: var(--ink);
  font-size: clamp(10px, calc(10 * var(--u)), 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.about-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.about-tiles a { display: grid; gap: 6px; }
.about-tiles a div { aspect-ratio: 1; background: var(--placeholder); overflow: hidden; }
.about-tiles img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: opacity 0.2s; }
.about-tiles a:hover img { opacity: 0.85; }
.about-tiles a:hover span { color: var(--muted); }

/* ---------- Mid-width ---------- */

@media (max-width: 1100px) {
  :root { --pad: 30px; --sidebar: 160px; --gap-sidebar: 30px; }
  .logo-text { font-size: 32px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  :root { --pad: 20px; }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    padding: 20px var(--pad);
  }
  .mobile-bar .logo { width: 80px; }
  .mobile-bar .logo-text { font-size: 16px; }
  .menu-toggle { color: var(--ink); font-size: 16px; font-weight: 500; }

  .sidebar {
    width: 100%;
    padding-top: 90px;
    background: var(--bg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar > .logo { display: none; }
  body.menu-open .sidebar { transform: none; }
  body.menu-open { overflow: hidden; }
  .nav { margin-top: 0; }
  .nav a { font-size: 22px; line-height: 44px; }

  .viewer-controls { display: none !important; }

  .content { margin-left: 0; padding: 0 var(--pad) var(--pad); }

  .viewer { height: auto; min-height: 60vh; }

  .about { grid-template-columns: 1fr; grid-template-rows: none; padding-left: 0; min-height: 0; margin-bottom: 0; }
  .about-photo { min-height: 0; padding-top: 16vw; container-type: normal; }
  .about-panel { top: 40%; height: auto; }
  .about-photo img { position: relative; left: auto; transform: none; width: 100%; height: auto; }
  .about-text { padding: 24px 0 0; }
  .about-heading { font-size: 30px; }
  .flipbooks { width: auto; margin-left: 0; }
  .fb-stage { height: min(calc(100svh - 170px), 150vw); }
  .gal-stage { width: 100%; }
  .gal-arrow { width: 34px; height: 48px; }
  .gal-strip button { height: 60px; }
}