/* ==========================================================================
   Zak Ferenczhalmy — site styles
   Order: tokens, reset, layout, header, hero, sections, cards, portfolio,
          lightbox, footer, forms, utilities, motion/print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   Scanport by Eko Bimantara (1001fonts.com) — files live in /fonts.
   -------------------------------------------------------------------------- */
/* Headings — the static heaviest cut. */
@font-face {
  font-family: "Scanport 4";
  src: url("../fonts/Scanport-4.woff2") format("woff2"),
       url("../fonts/Scanport-4.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* Everything else — variable font, weight adjustable from 1 to 1000
   (Scanport 1 = 1, 2 = 400, 3 = 700, 4 = 1000). */
@font-face {
  font-family: "Scanport VF";
  src: url("../fonts/Scanport-VF.woff2") format("woff2-variations"),
       url("../fonts/Scanport-VF.woff2") format("woff2"),
       url("../fonts/Scanport-VF.ttf") format("truetype-variations"),
       url("../fonts/Scanport-VF.ttf") format("truetype");
  font-weight: 1 1000;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   TOKENS
   Change these first — most of the site's look comes from here.
   -------------------------------------------------------------------------- */
:root {
  /* DARK THEME (default): near-black panels, warm off-white text, classic
     hyperlink blue. The LIGHT THEME below swaps these for visitors whose
     device is set to light mode. */
  color-scheme: dark light;
  --heading:    #f4f2ed;  /* headings, primary button, current page */
  --ink:        #e4e1da;  /* body text */
  --ink-soft:   #b8b4ab;
  --ink-faint:  #8f8b83;
  --paper:      #0f1012;  /* panels */
  --paper-alt:  #17181b;
  --line:       #2a2c30;  /* quiet rules */
  --line-strong:#4a4d53;  /* borders you're meant to see */
  --link:         #8ab4ff; /* hyperlink blue, brightened for a dark page */
  --link-visited: #c5a3ff;
  --accent:      #f4f2ed;
  --accent-ink:  #0f1012;
  --accent-text: #8ab4ff;
  --glow-color:  #f4f2ed;  /* heading glow */
  --bg-loading:  #111214;  /* page colour while the background image loads */

  --font-display: "Scanport 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Background image + the veil laid over it. Raise the veil's last number
     (0–1) for a lighter, calmer page; lower it to show more of the static. */
  --bg-image: url("../images/bg-static.jpg");
  --bg-image-set: image-set(url("../images/bg-static.webp") type("image/webp"), url("../images/bg-static.jpg") type("image/jpeg"));
  --bg-veil:  rgb(12 15 20 / 42%);
  --bg-tile:  40vmax;      /* size of each repeat of the static texture */
  --grain-opacity: 0.8;    /* 0 = no grain; 1 = strongest (darkest) */

  --font-body:    "Scanport VF", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap:   72rem;
  --narrow: 42rem;

  --gap:    clamp(1.25rem, 3vw, 2.25rem);
  --pad-y:  clamp(3.5rem, 8vw, 7rem);

  --radius: 0;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 14px 30px -18px rgb(0 0 0 / 70%);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   LIGHT THEME — used automatically when the visitor's device is in light mode
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --heading:    #141518;
    --ink:        #26272b;
    --ink-soft:   #47494f;
    --ink-faint:  #5c5e64;
    --paper:      #ffffff;  /* white */
    --paper-alt:  #f2f2f2;
    --line:       #d4d4d4;
    --line-strong:#8a8a8a;
    --link:         #1546c7; /* classic hyperlink blue */
    --link-visited: #6a2fb0;
    --accent:      #141518;
    --accent-ink:  #ffffff;
    --accent-text: #1546c7;
    --glow-color:  #141518;
    --bg-loading:  #ffffff;
    --bg-veil:     rgb(255 255 255 / 97.5%);
    --grain-opacity: 0.05;
    --shadow: 0 1px 2px rgb(20 21 24 / 8%), 0 14px 30px -18px rgb(20 21 24 / 30%);
  }
}

/* SVG glow filters read their colour from the theme */
.glow-flood { flood-color: var(--glow-color); }

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .4vw + .95rem, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* keep the footer at the bottom even when a page is short */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1; }

/* Full-page background, pinned to the viewport. A fixed layer is used
   instead of background-attachment: fixed, which iOS Safari ignores.
   The static texture repeats as a seamless tile; change --bg-tile to make
   the repeats bigger or smaller. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--bg-veil), var(--bg-veil)),
    var(--bg-image) 0 0 / var(--bg-tile) repeat;
  background-color: var(--bg-loading);
  pointer-events: none;
}

/* Browsers that understand image-set get the smaller WebP. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  body::before {
    background-image:
        linear-gradient(var(--bg-veil), var(--bg-veil)),
      var(--bg-image-set);
  }
}

/* Film grain: fine dark specks over the background, behind the content.
   It jitters between offsets like TV static. To avoid a visible "pop":
   no blend mode, the layer is always larger than the furthest jump, and
   the jumps are pure transforms (the browser just moves an existing
   image, nothing is redrawn). --grain-opacity sets the strength; the
   1.2s sets the speed. */
body::after {
  content: "";
  position: fixed;
  inset: -160px;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -12 0 0 0 6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: var(--grain-opacity);
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  body::after { animation: grain 1.2s steps(1, end) infinite; }
}

/* Twelve evenly timed positions; the last one hands straight back to the
   first, so the loop point looks like any other jump. */
@keyframes grain {
  0%      { transform: translate3d(0, 0, 0); }
  8.333%  { transform: translate3d(-37px, 61px, 0); }
  16.667% { transform: translate3d(83px, -29px, 0); }
  25%     { transform: translate3d(-91px, -77px, 0); }
  33.333% { transform: translate3d(47px, 103px, 0); }
  41.667% { transform: translate3d(-113px, 17px, 0); }
  50%     { transform: translate3d(71px, 89px, 0); }
  58.333% { transform: translate3d(19px, -107px, 0); }
  66.667% { transform: translate3d(-61px, -23px, 0); }
  75%     { transform: translate3d(107px, 53px, 0); }
  83.333% { transform: translate3d(-29px, -97px, 0); }
  91.667% { transform: translate3d(59px, 31px, 0); }
  100%    { transform: translate3d(0, 0, 0); }
}

img, video, iframe { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3 {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.15rem; letter-spacing: -.005em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.wrap.narrow { max-width: var(--narrow); }
.center { text-align: center; }

.section { padding-block: var(--pad-y); }

.section-alt {
  background: color-mix(in srgb, var(--paper-alt) 45%, transparent);
  border-block: 1px solid var(--line);
}

.section-title { margin-bottom: .6em; }

.section-head {
  max-width: var(--narrow);
  margin-bottom: calc(var(--gap) * 1.4);
}

.section-blurb { color: var(--ink-soft); margin: 0; }

.eyebrow {
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede {
  font-size: 1.1em;
  color: var(--ink-soft);
  max-width: 40ch;
}

.center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   SKIP LINK + SR-ONLY
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  transition: top .15s var(--ease);
}

.skip-link:focus { top: 1rem; color: var(--accent-ink); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: -.01em;
}

.brand:hover { color: var(--heading); }

.brand-text { display: grid; gap: .1rem; }

/* Spinning logo. The PNG is used as a mask, so the logo takes the heading
   colour: white in dark mode, near-black in light mode. Change the 14s to
   speed it up or slow it down. */
.brand-logo {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  background-color: var(--heading);
  -webkit-mask: url("../images/logo.png") center / contain no-repeat;
          mask: url("../images/logo.png") center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-logo { animation: logo-spin 14s linear infinite; }
  .brand:hover .brand-logo { animation-duration: 3s; }
}

@keyframes logo-spin { to { transform: rotate(360deg); } }

.brand-sub {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.site-nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.site-nav a {
  position: relative;
  padding-block: .35rem;
  font-size: .95rem;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--accent-text); }

/* Hamburger — hidden on desktop, shown under 46rem */
.nav-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 50%;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease), opacity .15s linear;
}

.nav-toggle-bar {
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  left: 0;
  transform-origin: center;
}

.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after  { top: 6px; }

/* hide only the middle bar; opacity would also hide the two bars that form the × */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); opacity: 1; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateY(-6px) rotate(-45deg); opacity: 1; }

@media (max-width: 46rem) {
  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: .5rem clamp(1.25rem, 5vw, 3rem) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  /* Closed by default only once JS has taken over (avoids a no-JS dead end) */
  .site-nav[data-collapsed] { display: none; }

  .site-nav a { padding-block: .8rem; font-size: 1.05rem; }
  .site-nav a + a { border-top: 1px solid var(--line); }
  .site-nav a::after { display: none; }
}

/* --------------------------------------------------------------------------
   BUTTONS / LINKS
   -------------------------------------------------------------------------- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.button {
  display: inline-block;
  padding: .78em 1.5em;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  transition: transform .2s var(--ease), opacity .2s linear;
}

.button:hover {
  color: var(--accent-ink);
  opacity: .88;
  transform: translateY(-1px);
}

.button-quiet {
  background: none;
  color: var(--ink);
  border-color: var(--line);
}

.button-quiet:hover { color: var(--ink); border-color: var(--ink-soft); opacity: 1; }

.text-link {
  display: inline-block;
  margin-top: .5rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
}

.text-link:hover { border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero-text .lede { max-width: 46ch; }

.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.photo-credit {
  margin-top: calc(.75rem + var(--offset, 0px));
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

.hero-figure .photo-credit { text-align: center; }

.hero-figure figcaption {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--ink-faint);
}

/* Name lettering: Zak's hand-drawn "ZAK FERENCZHALMY" artwork, used as a
   mask so it takes the heading colour in light and dark mode. The real
   name stays in the heading as text for screen readers and search. */
.name-lettering {
  display: block;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1600 / 831;
  background-color: var(--heading);
  -webkit-mask: url("../images/name-lettering.png") left center / contain no-repeat;
          mask: url("../images/name-lettering.png") left center / contain no-repeat;
}
.has-glow h1:has(.name-lettering) { filter: none; }

/* Name as the hero headline, in the heading font */
.hero-name {
  font-size: clamp(2.6rem, 5.2vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.02em;
}

/* The hero photo is a 2:3 portrait — show it whole, never cropped, and no
   taller than the screen below the header */
.hero-figure img {
  aspect-ratio: 2 / 3;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 11.5rem);
  margin-inline: auto;
}

@media (max-width: 54rem) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .hero-figure { max-width: 26rem; }
}

/* --------------------------------------------------------------------------
   PAGE HEAD (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.page-head .lede { max-width: none; }

/* --------------------------------------------------------------------------
   SPLIT (two bodies of work)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--gap);
}

.split-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.split-card h3 { margin-bottom: .6rem; }
.split-card p { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   GRID + CARDS
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--gap);
}

.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

/* Recent work strip on the home page */
.recent-series { margin: -.2rem 0 1.5rem; }
.recent-series .text-link { margin-top: 0; font-size: inherit; }
.recent-more { margin: 1.75rem 0 0; }

/* Cards that show each photo at its own proportions, uncropped. Cards sit
   on a shared baseline so the titles line up even when photos differ. */
.grid-natural { align-items: end; }
.grid-natural .card-media img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-underline-offset: .2em; }

.card-media {
  display: block;
  overflow: hidden;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-media img,
.card-media video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .5s var(--ease), filter .3s linear;
}

a.card-media { cursor: zoom-in; }
a.card-media:hover img { transform: scale(1.03); }

/* 16:9 embed wrapper for Vimeo / YouTube */
.card-embed {
  position: relative;
  aspect-ratio: 16 / 9;
}

.card-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.card figcaption { padding-top: .9rem; }

.card-title { margin-bottom: .2rem; }

.card-meta {
  margin: 0;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
}

.card-desc {
  margin: .5rem 0 0;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   PORTFOLIO — one piece at a time, centred, caption underneath
   -------------------------------------------------------------------------- */
.works {
  display: grid;
  gap: clamp(6rem, 16vw, 11rem);
  padding: clamp(2rem, 4.5vw, 3.5rem) 1.25rem var(--pad-y);
}

.piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-margin-top: 6rem;
}

.piece-media {
  /* A full-width row that centres the image inside it. The link must not
     size itself from the photo: when the photo is scaled down to fit the
     screen height, a photo-sized link leaves it stuck to the left. */
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 64rem;
  pointer-events: none;      /* only the image itself is clickable */
}

.piece-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 68vh;          /* piece + title fit on one screen, any orientation */
  box-shadow: var(--shadow);
  cursor: zoom-in;
  pointer-events: auto;
}

/* Keyboard focus ring goes on the image, not the wide invisible row. */
.piece-media:focus-visible { outline: none; }
.piece-media:focus-visible img {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
}

.piece-info { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.piece-title {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin-bottom: .45rem;
}

/* Detail lines, stacked top-down: dimensions, materials, collection */
.piece-line {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.piece-collection {
  margin-top: .35rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* Pieces with several photos: thumbnail row under the main image */
.piece-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.piece-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1rem;
}

.piece-thumb {
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s linear, border-color .15s linear;
}

.piece-thumb img {
  width: 4.5rem;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.piece-thumb:hover { opacity: .85; }

.piece-thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--heading);
}

.piece-thumb:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Lightbox arrows for multi-photo pieces */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  background: rgb(0 0 0 / 40%);
  border: 1px solid rgb(255 255 255 / 30%);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-nav:hover { background: rgb(255 255 255 / 12%); }

/* A series: a heading with a rule above it, then its pieces stacked
   closer together than standalone pieces */
.series {
  display: grid;
  gap: clamp(4rem, 10vw, 7rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line-strong);
  max-width: 64rem;
  width: 100%;
  margin-inline: auto;
}

.series-head { text-align: center; }
.series-head .eyebrow { margin-bottom: .5rem; }
.series-title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.series-meta {
  margin: .6rem 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

.series .piece-title { font-size: clamp(1.15rem, 2vw, 1.45rem); }

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */
/* Shown at its own aspect ratio — never cropped */
.portrait {
  width: 100%;
  height: auto;
  background: var(--paper-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 54rem) {
  .about-inner { grid-template-columns: 1fr; }
}

.prose > * + * { margin-top: 1.1em; }
.prose h3 { margin-top: 2em; }

/* Definition-list CV: exhibitions, education, press */
.cv {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  column-gap: 1.5rem;
  margin: 0;
  font-size: .95rem;
}

/* Each year + entry is one row; a rule spans the full width between rows */
.cv dt,
.cv dd {
  margin: 0;
  padding-block: .85rem;
  border-top: 1px solid var(--line);
}
.cv dt:first-of-type,
.cv dd:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.cv dt {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 34rem) {
  .cv { grid-template-columns: 1fr; }
  .cv dt { padding-bottom: 0; }
  .cv dd { padding-top: .2rem; border-top: 0; }
}

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(10 10 8 / 92%);
  animation: fade .2s var(--ease);
}

.lightbox[hidden] { display: none; }

.lightbox-inner {
  max-width: min(100%, 80rem);
  max-height: 100%;
  text-align: center;
}

.lightbox-inner img {
  max-height: 80vh;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-inner figcaption {
  margin-top: 1rem;
  font-size: .88rem;
  color: #cfcbc0;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover { background: rgb(255 255 255 / 12%); }

@keyframes fade { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: 2.5rem;
  background: color-mix(in srgb, var(--paper-alt) 45%, transparent);
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-soft);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-nav { display: flex; gap: 1.25rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   STYLE — modern layout, old-web manners
   Square corners, bold deliberate rules, underlined blue hyperlinks and flat
   buttons, on a modern grid with generous spacing. Nothing decorative that
   doesn't do a job.
   -------------------------------------------------------------------------- */

/* Hyperlinks look like hyperlinks */
.prose a:not(.button),
.lede a:not(.button),
.cv a,
.text-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  border-bottom: 0;
}
.prose a:not(.button):visited,
.cv a:visited { color: var(--link-visited); }
.prose a:not(.button):hover,
.cv a:hover,
.text-link:hover { color: var(--heading); text-decoration-thickness: 2px; }

/* Header: plain bar, bottom rule, text nav with the current page underlined */
.site-header {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
}
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover { color: var(--heading); }
.site-nav a[aria-current="page"] { color: var(--heading); }

/* Buttons: flat, square, 1px border. Primary is solid, secondary outlined. */
.button {
  background: var(--heading);
  color: var(--paper);
  text-decoration: none;
  border: 1px solid var(--heading);
  font-size: .9rem;
}
.button:hover {
  background: transparent;
  color: var(--heading);
  opacity: 1;
  transform: none;
}
.button-quiet {
  background: transparent;
  color: var(--heading);
  border-color: var(--line-strong);
}
.button-quiet:hover { border-color: var(--heading); background: transparent; }

/* Panels and image frames: flat, square, a single visible rule */
.split-card,
.card-media {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.hero-figure img,
.portrait { box-shadow: none; border: 1px solid var(--line-strong); }

/* Section titles get an old-fashioned horizontal rule underneath */
.section-title {
  padding-bottom: .5em;
  border-bottom: 1px solid var(--line-strong);
}

/* Physical / Digital: two plain text tabs, current one underlined */
.work-switch {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  padding-top: clamp(2rem, 4vw, 3rem);
}

.work-switch a {
  padding-block: .3rem;
  font-size: .95rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.work-switch a:hover { color: var(--heading); }
.work-switch a[aria-current="page"] {
  color: var(--heading);
  border-bottom-color: var(--heading);
}

.works-empty {
  margin: 0;
  padding-block: 4rem;
  text-align: center;
  color: var(--ink-faint);
}

::selection { background: var(--heading); color: var(--paper); }

/* Posterized glow on headings (filters come from js/main.js). Big headings
   get a wider halo than small ones. */
.has-glow h1 { filter: url(#glow-lg); }
.has-glow h2,
.has-glow h3,
.has-glow .brand-name { filter: url(#glow-sm); }

/* --------------------------------------------------------------------------
   LINEWORK — fewer lines, each one bold and deliberate
   Hairlines are gone. What's left is drawn heavy in the heading colour:
   short thick bars under titles, 2px outlines on boxes and buttons, and
   hard offset shadows (no blur) like an old printed or early-web layout.
     --rule        weight of bars and outlines
     --bar         length of the bar under section titles
     --offset      how far hard shadows sit from their box
   -------------------------------------------------------------------------- */
:root {
  --rule: 2px;
  --bar: 2.75rem;
  --bar-weight: 5px;
  --offset: 6px;
  --offset-color: color-mix(in srgb, var(--heading) 26%, transparent);
  --hard-shadow: var(--offset) var(--offset) 0 var(--offset-color);
}

/* Header and footer: one solid rule each */
.site-header { border-bottom: var(--rule) solid var(--heading); }
.site-footer { border-top: var(--rule) solid var(--heading); }

/* No hairlines or flat colour bands between sections; the title bars
   do the separating */
.section-alt { border-block: 0; background: none; }
.hero { border-bottom: 0; }

/* Section titles: a short thick bar instead of a full-width hairline */
.section-title {
  padding-bottom: 0;
  border-bottom: 0;
}
.section-title::after {
  content: "";
  display: block;
  width: var(--bar);
  height: var(--bar-weight);
  margin-top: .45em;
  background: var(--heading);
}
.center .section-title::after { margin-inline: auto; }

/* Series heading gets the same bar, centred, and no rule above */
.series { border-top: 0; }
.series-title::after {
  content: "";
  display: block;
  width: var(--bar);
  height: var(--bar-weight);
  margin: .45em auto 0;
  background: var(--heading);
}

/* Panels: solid outline + hard offset shadow */
.split-card {
  border: var(--rule) solid var(--heading);
  box-shadow: var(--hard-shadow);
}

/* Photos: no outline, just the hard offset shadow */
.card-media,
.hero-figure img,
.portrait,
.piece-media img {
  border: 0;
  box-shadow: var(--hard-shadow);
}
.card-media img { transition: transform .5s var(--ease); }

/* Buttons: 2px outlines; they lift onto a hard shadow on hover */
.button,
.button-quiet {
  border-width: var(--rule);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease),
              background-color .15s linear, color .15s linear;
}
.button-quiet { border-color: var(--heading); }
.button:hover,
.button-quiet:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--offset-color);
}
.button:active,
.button-quiet:active {
  transform: none;
  box-shadow: none;
}

/* Nav: thicker current-page and hover underline */
.site-nav a::after { height: 3px; }
.nav-toggle { border: var(--rule) solid var(--heading); }

/* Physical / Digital tabs: same 3px underline */
.work-switch a { border-bottom-width: 3px; }

/* Links: a firmer underline */
.prose a:not(.button),
.lede a:not(.button),
.cv a,
.text-link { text-decoration-thickness: 2px; }

/* Thumbnails: 2px frame on the current photo only */
.piece-thumb {
  border: var(--rule) solid transparent;
  padding: 2px;
}
.piece-thumb[aria-current="true"] { border-color: var(--heading); }

/* Exhibitions list: no row rules, the spacing does the work */
.cv dt,
.cv dd {
  border-top: 0;
  padding-block: .55rem;
}
.cv dt:first-of-type,
.cv dd:first-of-type { padding-top: 0; }

@media (max-width: 46rem) {
  .site-nav {
    border-bottom: var(--rule) solid var(--heading);
    box-shadow: none;
  }
  .site-nav a + a { border-top: 0; }
}

/* --------------------------------------------------------------------------
   MOTION / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .filter, .lightbox, .skip-link, .button-row { display: none; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  h1, h2, h3, .brand { filter: none !important; }
  .section { padding-block: 1.5rem; }
}