/* Henning Gunnarsson — portfolio
   Layout: white intro that turns black as you scroll into About + a 2-up project grid.
   Project pages: full-bleed hero, title on white with a hairline, image gallery. */

:root {
  --paper: #ffffff;
  --ink: #0b0b0b;
  --ink-soft: #6f6f6f;
  --hair: #d9d9d9;

  --fg: var(--ink);
  --bg: var(--paper);

  --font: "neue-haas-grotesk-display", "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-theme: .6s;

  color-scheme: light;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--t-theme) var(--ease), color var(--t-theme) var(--ease);
}


img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10000;
  background: var(--fg); color: var(--bg); padding: 8px 12px; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- Custom crosshair cursor (only on mouse devices) ---------- */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  body.has-cursor .cursor {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 15px; height: 15px;
    pointer-events: none; z-index: 9999;
    transform: translate3d(-100px, -100px, 0);
    transition: width .25s var(--ease), height .25s var(--ease);
    will-change: transform;
  }
  .cursor::before, .cursor::after {
    content: ""; position: absolute; background: var(--fg);
    transition: background-color var(--t-theme) var(--ease);
  }
  .cursor::before { width: 100%; height: 1px; top: 50%; left: 0; }
  .cursor::after  { width: 1px; height: 100%; left: 50%; top: 0; }
  body.cursor-hover .cursor { width: 21px; height: 21px; }
  .cursor.is-hidden { opacity: 0; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gutter) 24px;
  pointer-events: none;
}
.site-header a { pointer-events: auto; text-decoration: none; transition: opacity .2s; }
.site-header a:hover { opacity: .55; }

.home-mark {
  font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap;
}
.site-header { gap: 16px; }
@media (max-width: 480px) { .home-mark .last-name { display: none; } }
.site-nav { display: flex; gap: clamp(16px, 2.5vw, 28px); }
.site-nav a { font-size: 1.1rem; font-weight: 300; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* On project pages the header sits over a photo */
.page-project .site-header { color: #fff; mix-blend-mode: difference; }

/* ---------- Intro: Hello. → (first scroll) → I'm Henning. ----------
   The intro is taller than the screen and its content is sticky, so the
   first part of the scroll swaps the greeting before the page moves on. */
.intro { position: relative; }
.js .intro { height: 175vh; height: 175svh; }
.intro-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  padding-inline: var(--gutter);
}
.hello {
  display: grid; margin: 0;
  font-size: clamp(3.4rem, 11vw, 8rem);
  font-weight: 500; line-height: 1.05; letter-spacing: -0.05em;
  text-align: center;
}
.hello span { grid-area: 1 / 1; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hello .hello-a { opacity: 0; }                     /* without JS: show the name */
.js .hello .hello-a { opacity: 1; }
.js .hello .hello-b { opacity: 0; transform: translateY(.12em); }
.js .intro.is-named .hello-a { opacity: 0; transform: translateY(-.12em); }
.js .intro.is-named .hello-b { opacity: 1; transform: none; }

.scroll-cue {
  position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: .8rem; font-weight: 300; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  transition: opacity .4s var(--ease);
  animation: cue-in 1s var(--ease) 1.2s both;
}
.intro.is-named .scroll-cue { opacity: 0; }
@keyframes cue-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- About ---------- */
.about {
  display: grid; place-items: center;
  padding: 120px var(--gutter);
}
.about-inner { max-width: 34rem; display: grid; gap: 1.1rem; }
.label {
  font-size: .75rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.about p:not(.label) { margin: 0; font-size: 1.05rem; font-weight: 300; line-height: 1.6; }
.about-meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: .6rem;
  font-size: .9rem; font-weight: 300; color: var(--ink-soft);
}

/* ---------- Projects grid ---------- */
.projects { padding: 40px var(--gutter) 160px; }
.projects-head {
  max-width: 1400px; margin: 0 auto 56px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--ink); padding-bottom: 12px;
}
.projects-head .count { font-size: .75rem; letter-spacing: .14em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Asymmetric catalogue grid: large and small images alternate sides and
   sit offset from each other. The pattern repeats every four projects. */
.grid {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1400px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px; row-gap: clamp(56px, 9vw, 140px);
  align-items: start;
}
.card { min-width: 0; }
.card:nth-child(4n + 1) { grid-column: 1 / span 7; }
.card:nth-child(4n + 2) { grid-column: 9 / span 4; margin-top: clamp(80px, 16vw, 260px); }
.card:nth-child(4n + 3) { grid-column: 2 / span 4; margin-top: clamp(40px, 6vw, 96px); }
.card:nth-child(4n + 4) { grid-column: 7 / span 6; }
.card:nth-child(4n + 1) .card-media, .card:nth-child(4n + 4) .card-media { aspect-ratio: 16 / 10; }
.card:nth-child(4n + 2) .card-media, .card:nth-child(4n + 3) .card-media { aspect-ratio: 4 / 3; }
/* A lone last project spans wider so the grid doesn't end on a small image */
.card:last-child:nth-child(4n + 1) { grid-column: 1 / span 8; }
.card:last-child:nth-child(4n + 3) { grid-column: 2 / span 7; }
.card:last-child:nth-child(4n + 3) .card-media { aspect-ratio: 16 / 10; }
/* A lead project can get a tall card (cardTall: true) so a portrait image shows in full */
.card.is-tall:nth-child(4n + 1) { grid-column: 1 / span 6; }
.card.is-tall .card-media { aspect-ratio: 4 / 5; }
.card.is-tall:nth-child(4n + 1) + .card { grid-column: 8 / span 5; margin-top: clamp(120px, 24vw, 380px); }

.card a { display: block; text-decoration: none; color: var(--ink); }
.card-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f0f0f0;
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter .45s var(--ease), transform .8s var(--ease);
}
.card-name {
  color: #fff;
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.01em;
  opacity: 0; transition: opacity .35s var(--ease);
}
.card-caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 14px; font-size: .85rem; font-weight: 300; color: var(--ink-soft);
}
.card-caption strong { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }

@media (hover: hover) {
  .card a:hover img, .card a:focus-visible img { filter: blur(10px); transform: scale(1.03); }
  .card a:hover .card-name, .card a:focus-visible .card-name { opacity: 1; }
}

/* Tablet: keep the rhythm with fewer columns */
@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card:nth-child(4n + 1) { grid-column: 1 / span 4; }
  .card:nth-child(4n + 2) { grid-column: 4 / span 3; margin-top: 0; }
  .card:nth-child(4n + 3) { grid-column: 1 / span 3; margin-top: 0; }
  .card:nth-child(4n + 4) { grid-column: 3 / span 4; }
  .card:last-child:nth-child(4n + 1), .card:last-child:nth-child(4n + 3) { grid-column: 1 / span 5; }
  .card.is-tall:nth-child(4n + 1) { grid-column: 1 / span 4; }
  .card.is-tall:nth-child(4n + 1) + .card { grid-column: 4 / span 3; margin-top: clamp(120px, 30vw, 300px); }
}
/* Phone: one column, alternating width left and right */
@media (max-width: 600px) {
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .card:nth-child(n), .card:last-child:nth-child(n) { grid-column: 1; margin-top: 0; }
  .card:nth-child(2n) { width: 82%; justify-self: end; }
  .card:nth-child(n) .card-media, .card:last-child:nth-child(n) .card-media { aspect-ratio: 4 / 3; }
  .card.is-tall:nth-child(n) .card-media { aspect-ratio: 4 / 5; }
  .card.is-tall:nth-child(n), .card.is-tall:nth-child(4n + 1) + .card { grid-column: 1; margin-top: 0; }
}

/* Missing image fallback */
.is-missing { position: relative; background: #eeeeee; }
.is-missing img { visibility: hidden; }
.is-missing::after {
  content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center;
  color: #9a9a9a; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: .85rem; font-weight: 300; color: var(--ink-soft);
  border-top: 1px solid currentColor;
  border-color: rgba(127,127,127,.25);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--fg); }

/* ---------- Project page ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 480px;
  overflow: hidden; background: #111; color: #fff;
}
.hero img, .hero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.hero-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-inline: var(--gutter); text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 300; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em;
}

.project-body { background: var(--paper); color: var(--ink); padding: 56px var(--gutter) 40px; }
.project-title-wrap { max-width: 1620px; margin: 0 auto; }
.project-title {
  margin: 0; font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1;
}
.project-rule { height: 1px; border: 0; background: var(--ink); margin: 14px 0 0; }
.project-meta {
  display: flex; flex-wrap: wrap; gap: 6px 32px; padding-top: 14px;
  font-size: .9rem; font-weight: 300; color: var(--ink-soft);
}
.project-intro { max-width: 40rem; margin: 32px 0 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 300; line-height: 1.5; text-wrap: pretty; }

/* Facts: Role / Year / Tools / Type */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 16px 32px; margin: 0; padding-top: 16px;
}
.facts div { min-width: 0; }
.facts dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: 4px 0 0; font-size: .95rem; font-weight: 300; }

/* Process / Result blocks */
.block { max-width: 1620px; margin: 0 auto; }
.block-head { margin-top: 72px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.block-head .label { color: var(--ink-soft); }
.block-head + .gallery, .block-head + .process { margin-top: 20px; }

.process {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px;
  align-items: start;
}
.step { margin: 0; display: grid; gap: 10px; }
.process .step.wide { grid-column: 1 / -1; }

/* Story chapters (project pages) */
.chapter { max-width: 1620px; margin: 96px auto 0; }
.chapter-head {
  display: flex; align-items: baseline; gap: 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hair);
}
.chapter-num { font-size: .75rem; letter-spacing: .14em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chapter-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.chapter-text { max-width: 40rem; margin-top: 24px; display: grid; gap: 1em; }
.chapter-text p { margin: 0; font-size: 1.05rem; font-weight: 300; line-height: 1.6; text-wrap: pretty; }
.media-grid {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; align-items: start;
}
.media { margin: 0; display: grid; gap: 10px; min-width: 0; grid-column: span 2; }
.media.half { grid-column: span 3; }
.media.wide { grid-column: 1 / -1; }
.media figcaption { font-size: .85rem; font-weight: 300; line-height: 1.45; color: var(--ink-soft); max-width: 36rem; }
.media.twothirds { grid-column: span 4; }
/* Feature: image on the left, caption as larger text on the right */
.media.feature { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center; }
.media.feature .step-media { aspect-ratio: 4 / 5; overflow: hidden; }
.media.feature .step-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.media.feature .model-view { aspect-ratio: 1 / 1; }
.media.feature figcaption { font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--ink); line-height: 1.45; max-width: 28rem; text-wrap: pretty; }
/* Parts list beside the 3D model */
.media.parts { align-self: stretch; align-content: start; padding-top: 4px; }
.media.parts .label { color: var(--ink-soft); }
.media.parts ol { margin: 0; padding: 0; list-style: none; counter-reset: part; border-top: 1px solid var(--hair); }
.media.parts li {
  counter-increment: part; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: .95rem; font-weight: 300;
}
.media.parts li::before { content: counter(part, decimal-leading-zero); color: var(--ink-soft); font-size: .8rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
/* Concepts: compact grid of sketches */
.media-grid.concepts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.media-grid.concepts .media { grid-column: auto; gap: 0; }
.media-grid.concepts .step-media { background: #fff; border: 1px solid var(--hair); }
.media-grid.concepts .is-highlight .step-media { border-color: var(--ink); }
.media-grid.concepts .is-highlight figcaption { color: var(--ink); }
@media (max-width: 960px) {
  .media, .media.twothirds { grid-column: span 3; }
  .media.wide, .media.feature { grid-column: 1 / -1; }
  .media-grid.concepts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .media.feature { grid-template-columns: minmax(0, 1fr); }
  /* Mobile: the two concepts taken forward first and large, the rest as small thumbnails */
  .media-grid.concepts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; grid-auto-flow: dense; }
  .media-grid.concepts .media.is-highlight { grid-column: span 2; order: -1; }
  .media-grid.concepts .media:not(.is-highlight) figcaption { display: none; }
}
@media (max-width: 600px) { .media-grid:not(.concepts) { grid-template-columns: minmax(0, 1fr); } .media-grid:not(.concepts) .media { grid-column: 1; } }

/* Side layout: text left, smaller images right */
.chapter-side {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: start;
}
.chapter-side .media-grid { margin-top: 24px; }
.media-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.media-grid.compact .media, .media-grid.compact .media.half, .media-grid.compact .media.wide { grid-column: auto; }
.media-grid.compact .media.full-row { grid-column: 1 / -1; }
.media-grid.compact .media.twothirds { grid-column: span 2; }
.chapter-left { min-width: 0; }
.chapter-left .media-grid.under-text { margin-top: clamp(32px, 4vw, 56px); max-width: 40rem; }
@media (max-width: 900px) { .chapter-side { grid-template-columns: minmax(0, 1fr); } .chapter-side .media-grid { margin-top: 8px; } }

/* Richard Kelly's three principles */
.principles-figure { margin: 0; }
.principles-block {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; margin-top: clamp(40px, 5vw, 64px);
}
.principles-block .principles-intro { margin: 0 0 20px; }
.principles-block .principles { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.principles-block .principle { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: 16px; row-gap: 2px; }
.principles-block .principle .principle-title { grid-row: span 2; font-size: 1.05rem; }
@media (max-width: 720px) {
  .principles-block { grid-template-columns: minmax(0, 1fr); }
  .principles-block .principles-figure { max-width: 420px; }
  .principles-block .principle { grid-template-columns: minmax(0, 1fr); }
  .principles-block .principle .principle-title { grid-row: auto; }
}
.principles-figure img { width: 100%; height: auto; display: block; }
.principles-figure figcaption { margin-top: 8px; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.principles-intro { margin: clamp(48px, 7vw, 88px) 0 0; max-width: 40rem; font-size: 1.05rem; font-weight: 300; line-height: 1.6; }
.step-media.is-cropped { overflow: hidden; }
.step-media.is-cropped img { width: 100%; height: 100%; object-fit: cover; }
.chapter-text.after-text { margin-top: clamp(48px, 7vw, 88px); }
.chapter-text.after-text + .media-grid.after { margin-top: 24px; }
.media-grid.after.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.media-grid.after.four .media { grid-column: auto; }
@media (max-width: 900px) { .media-grid.after.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .media-grid.after.four .media { grid-column: auto; } }
.media-grid.after { margin-top: clamp(32px, 5vw, 64px); }
.principles {
  margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.principle { border-top: 1px solid var(--hair); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.principle.is-highlight { border-top-color: var(--ink); }
.principle p { margin: 0; font-size: .95rem; font-weight: 300; line-height: 1.5; color: var(--ink-soft); }
.principle .principle-title { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.principle .principle-note { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 720px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* Hero on light video/images */
.hero.hero-dark { color: var(--ink); background: #f4f4f4; }
/* Hero image shown whole instead of cropped */
.hero.hero-contain img {
  object-fit: contain; object-position: 50% 50%;
  padding: calc(80px + env(safe-area-inset-top, 0px)) var(--gutter) 88px; box-sizing: border-box;
}
.hero.hero-contain::after { display: none; }

/* Soft shade behind a bottom tagline so white text reads on any image */
/* Soft shade at the top so the white menu stays readable on light images */
.hero:not(.hero-dark)::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,0)); pointer-events: none;
}
.hero.hero-text-bottom:not(.hero-dark)::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 35%;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); pointer-events: none;
}
.hero.hero-text-bottom .hero-text { z-index: 1; }
.hero.hero-text-bottom .hero-text {
  inset: auto 0 0 0; display: block; text-align: left;
  padding: 0 var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  font-size: clamp(1.1rem, 2vw, 1.5rem); text-transform: none; letter-spacing: 0;
}

.video-box { background: #f4f4f4; }
.video-box video { display: block; width: 100%; height: auto; }

/* 3D model viewer */
.model-view { position: relative; aspect-ratio: 16 / 9; background: #f3f3f3; overflow: hidden; touch-action: pan-y; }
.model-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.model-view canvas:active { cursor: grabbing; }
.model-note {
  position: absolute; left: 16px; bottom: 14px; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease);
}
.model-view.is-loading .model-loading,
.model-view.is-ready:not(.is-touched) .model-hint,
.model-view.is-error .model-fail { opacity: 1; }
@media (max-width: 600px) { .model-view { aspect-ratio: 4 / 3; } }
.step-media { background: #f3f3f3; }
.step-media img { width: 100%; height: auto; }
.step-media.is-missing { aspect-ratio: 4 / 3; background: #eeeeee; }
.step-media.is-missing::after { color: #9a9a9a; }
.step figcaption { font-size: .85rem; font-weight: 300; line-height: 1.45; color: var(--ink-soft); max-width: 32rem; }

/* About: tools + links */
.about-tools { margin: .2rem 0 0; font-size: .9rem; font-weight: 300; color: var(--ink-soft); }
.about-tools .label { display: inline; margin-right: 10px; }
.about-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: .8rem; font-size: .95rem; }
.about-links a { text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; transition: border-color .2s; }
.about-links a:hover { border-color: var(--ink); }

@media (max-width: 960px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .process { grid-template-columns: minmax(0, 1fr); } }

.gallery {
  max-width: 1620px; margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.gallery figure { margin: 0; background: #f3f3f3; }
.gallery .full { grid-column: 1 / -1; }
/* square = half width, image keeps its own proportions (no cropping) */
.gallery .square { align-self: start; }
.gallery .square img { width: 100%; height: auto; }
.gallery .square.contain { aspect-ratio: 1 / 1; align-self: stretch; }
.gallery .contain { display: grid; place-items: center; background: var(--paper); }
.gallery .contain img { width: 70%; height: 70%; object-fit: contain; }
.gallery .full img { width: 100%; height: auto; }
.gallery .is-missing { min-height: 240px; background: #eeeeee; }
.gallery .is-missing::after { color: #9a9a9a; }

.pager {
  max-width: 1620px; margin: 80px auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  border-top: 1px solid var(--ink); padding-top: 16px;
}
.pager a { text-decoration: none; display: grid; gap: 2px; }
.pager a:last-child { text-align: right; }
.pager small { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.pager span { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; letter-spacing: -0.02em; }
.pager a:hover span { opacity: .55; }

.page-project .site-footer { background: var(--paper); color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center; justify-items: center; gap: 64px;
  padding: 140px var(--gutter) 80px; text-align: center;
}
.contact h1 { margin: 0 0 18px; font-size: clamp(2.8rem, 8vw, 4rem); font-weight: 500; letter-spacing: -0.03em; }
.email-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; }
.email { font-size: clamp(1.1rem, 3.4vw, 1.5rem); font-weight: 300; text-decoration: none; overflow-wrap: anywhere; user-select: all; }
.email:hover { color: var(--ink-soft); }
.copy-btn {
  font: inherit; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--hair); padding: 6px 12px;
  border-radius: 999px; cursor: pointer; transition: color .2s, border-color .2s;
}
.copy-btn:hover { color: var(--ink); border-color: var(--ink); }
.socials { display: flex; justify-content: center; gap: 28px; margin-top: 28px; font-weight: 300; }
.socials a { text-decoration: none; }
.socials a:hover { color: var(--ink-soft); }

.contact-divider { width: min(50%, 420px); border: 0; border-top: 1px solid var(--hair); margin: 0; }

.education { width: min(100%, 560px); text-align: left; }
.education h2 { margin: 0 0 20px; font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; text-align: center; }
.edu-list { list-style: none; margin: 0; padding: 0; }
.edu-list li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--hair); font-weight: 300;
}
.edu-list li:last-child { border-bottom: 1px solid var(--hair); }
.edu-list time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.edu-list strong { display: block; font-weight: 400; }

/* ---------- 404 ---------- */
.notfound { min-height: 100svh; display: grid; place-items: center; text-align: center; padding-inline: var(--gutter); }
.notfound h1 { font-size: clamp(3rem, 10vw, 6rem); font-weight: 500; letter-spacing: -0.05em; margin: 0 0 12px; }

/* ---------- Scroll reveal (content is visible by default) ---------- */
.js .reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-pending { opacity: 0; transform: translateY(24px); }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .site-nav a { font-size: 1rem; }
  .pager span { font-size: 1.3rem; }
  .edu-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

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

/* ---------- Sketch pile (grid: "pile") ----------
   Without JS: a plain grid of sketches. With JS (.is-pile): loose sheets on a "desk". */
.media-grid.pile { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pile-sheet { margin: 0; display: grid; gap: 6px; min-width: 0; }
.pile-img { aspect-ratio: 3 / 4; overflow: hidden; background: #f6f5f2; }
.pile-img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pile-sheet figcaption { font-size: .85rem; font-weight: 300; color: var(--ink-soft); }
.pile-sheet.is-highlight figcaption { color: var(--ink); }
@media (max-width: 600px) { .media-grid.pile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.media-grid.pile.is-pile { display: block; position: relative; aspect-ratio: 16 / 9; max-width: 100%; }
@media (max-width: 700px) { .media-grid.pile.is-pile { aspect-ratio: 3 / 4.4; } }
.is-pile .pile-sheet {
  position: absolute; left: 0; top: 0; display: block;
  box-shadow: 0 1px 2px rgba(20,20,18,.16), 0 10px 24px -8px rgba(20,20,18,.16);
  will-change: transform; transition: box-shadow .25s var(--ease);
}
.is-pile .pile-img { height: 100%; aspect-ratio: auto; }
.is-pile .pile-sheet figcaption {
  position: absolute; left: 0; right: 0; bottom: -24px; white-space: nowrap;
  opacity: 0; transition: opacity .3s var(--ease);
}
.is-pile.is-grid .pile-sheet figcaption { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .is-pile:not(.is-grid) .pile-sheet { cursor: grab; }
  .is-pile .pile-sheet:hover { box-shadow: 0 2px 4px rgba(20,20,18,.16), 0 22px 40px -10px rgba(20,20,18,.16); }
}
.is-pile .pile-sheet.dragging { cursor: grabbing; box-shadow: 0 4px 8px rgba(20,20,18,.16), 0 30px 50px -12px rgba(20,20,18,.18); }
.pile-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pile-btn {
  font: inherit; font-size: .85rem; font-weight: 300; color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 999px; padding: 7px 16px; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.pile-btn:hover, .pile-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pile-controls + .media-grid.pile { margin-top: 20px; }

/* ---------- Shape morph (media with morph: { … }) ---------- */
.media.morph { gap: 18px; }
.morph-stage {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(28px, 12vw, 220px); padding-block: clamp(16px, 3vw, 40px);
}
.morph-item { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.morph-item img {
  height: clamp(220px, 34vw, 520px); width: auto; max-width: 100%;
  transition: opacity .2s linear;
}
.morph-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.morph-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.morph-line path {
  fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke;
}
.media.morph:not(.is-live) .morph-line { display: none; }
.media.morph figcaption { justify-self: center; text-align: center; }
@media (max-width: 600px) { .morph-item img { height: clamp(200px, 56vw, 320px); } }

/* ---------- GLB viewer (media with glb: "…") ---------- */
.glb-view { position: relative; aspect-ratio: 16 / 9; background: #f3f3f3; overflow: hidden; }
.glb-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.glb-view canvas:active { cursor: grabbing; }
.glb-view.is-loading .model-loading,
.glb-view.is-ready:not(.is-touched) .model-hint,
.glb-view.is-error .model-fail { opacity: 1; }
.media.feature .glb-view { aspect-ratio: 1 / 1; }
@media (max-width: 600px) { .glb-view { aspect-ratio: 4 / 3; } .media.feature .glb-view { aspect-ratio: 1 / 1; } }

/* ---------- Hotspots (image with hover labels) ---------- */
.media.hotspots { gap: 12px; }
.hs-stage { position: relative; overflow: hidden; background: #f3f3f3; }
.hs-stage img { width: 100%; height: auto; display: block; }
.hs { position: absolute; display: block; outline: none; cursor: default; transition: box-shadow .35s var(--ease); }
.hs-label {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -6px);
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--paper); padding: 6px 10px; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hs::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.9); opacity: 0; transition: opacity .3s var(--ease); }
@media (hover: hover) {
  .hs:hover, .hs:focus-visible { box-shadow: 0 0 0 200vmax rgba(255, 255, 255, .38); z-index: 2; }
  .hs:hover .hs-label, .hs:focus-visible .hs-label { opacity: 1; transform: translate(-50%, 0); }
  .hs:hover::after, .hs:focus-visible::after { opacity: 1; }
}
/* Phones and tablets: no hover, so the labels are always shown (smaller, no dimming) */
@media (hover: none) {
  .hs-label { opacity: 1; transform: translate(-50%, 0); font-size: .6rem; padding: 4px 6px; top: calc(100% + 4px); }
}

/* ---------- Screw lid (GLB with lid: …) ---------- */
/* The figure is tall; the model sticks to the screen while you scroll through it */
.media.screw-stage { --screw-length: 220vh; min-height: var(--screw-length); align-items: start; }
.media.screw-stage > .glb-view {
  position: sticky; top: max(64px, 11vh); width: min(100%, 78vh);
}
.media.screw-stage > figcaption { position: sticky; top: 50vh; }
@media (max-width: 600px) {
  .media.screw-stage { --screw-length: 200vh; }
  .media.screw-stage > .glb-view { top: max(64px, calc(50vh - 45vw)); width: 100%; }
  .media.screw-stage > figcaption { position: static; }
}
@media (prefers-reduced-motion: reduce) { .media.screw-stage { min-height: 0; } .media.screw-stage > * { position: static; } }

/* ---------- Scene reveal (media with scene: { … }) ---------- */
/* Tall figure; the picture sticks to the screen while the second image fades in */
.media.scene-reveal { --scene-length: 190vh; min-height: var(--scene-length); align-items: start; }
.scene-stage {
  position: sticky; top: max(64px, 10vh); width: min(100%, 80vh); aspect-ratio: 1 / 1;
  overflow: hidden; background: #fff;
}
.scene-img { position: absolute; inset: 0; }
.scene-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.scene-reveal.is-live .scene-to { opacity: 0; will-change: opacity; }
.scene-hint {
  position: absolute; left: 16px; bottom: 14px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0; transition: opacity .3s var(--ease, ease);
}
.media.scene-reveal.is-live .scene-hint { opacity: calc(1 - var(--scene-k, 0) * 3); }
.media.scene-reveal > figcaption { position: sticky; top: 50vh; }
@media (max-width: 600px) {
  .media.scene-reveal { --scene-length: 170vh; }
  .scene-stage { top: max(64px, calc(50vh - 50vw)); width: 100%; }
  .media.scene-reveal > figcaption { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .media.scene-reveal { min-height: 0; }
  .media.scene-reveal > * { position: static; }
  .scene-stage { position: relative; }
}

/* ---------- Lightbox (click an image to see it large) ---------- */
.lb-zoomable { cursor: zoom-in; }
.lb {
  position: fixed; inset: 0; z-index: 1000; display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: minmax(0, 1fr); align-items: center;
  background: #fff; opacity: 0; transition: opacity .2s ease;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 8px calc(28px + env(safe-area-inset-bottom, 0px));
}
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }
.lb-fig { grid-column: 2; grid-row: 1; margin: 0; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 14px; cursor: zoom-out; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.lb-cap { font-size: .85rem; font-weight: 300; color: var(--ink-soft, #666); text-align: center; max-width: 46rem; }
.lb-btn {
  font: inherit; color: var(--ink, #111); background: none; border: 0; cursor: pointer; padding: 12px;
  font-size: 1.4rem; line-height: 1; opacity: .7; transition: opacity .2s;
}
.lb-btn:hover, .lb-btn:focus-visible { opacity: 1; }
.lb-btn:focus:not(:focus-visible) { outline: none; }
.lb-prev { grid-column: 1; grid-row: 1; } .lb-next { grid-column: 3; grid-row: 1; }
.lb-close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.lb-count { position: absolute; top: calc(26px + env(safe-area-inset-top, 0px)); left: 24px; font-size: .75rem; letter-spacing: .14em; color: var(--ink-soft, #666); }
.lb.lb-single .lb-prev, .lb.lb-single .lb-next { visibility: hidden; }
html.lb-lock { overflow: hidden; }
@media (max-width: 600px) {
  .lb { grid-template-columns: 0 minmax(0, 1fr) 0; padding-inline: 10px; }
  .lb-prev, .lb-next { position: absolute; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
  .lb { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Lid hint (ring beside a screw-lid model) ---------- */
.lid-hint {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
  font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: var(--ink);
  transition: opacity .4s var(--ease, ease);
}
.lid-hint.is-gone { opacity: 0; }
.lid-ring { position: relative; flex: none; width: 36px; height: 36px; }
.lid-ring span { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.lid-ring .dot { width: 8px; height: 8px; background: var(--ink); }
.lid-ring .r1 { width: 22px; height: 22px; border: 1.5px solid var(--ink); filter: blur(.5px); opacity: .5; animation: lid-breathe 2.6s ease-in-out infinite; }
.lid-ring .r2 { width: 36px; height: 36px; border: 1.5px solid var(--ink); filter: blur(1.4px); opacity: .25; animation: lid-breathe 2.6s ease-in-out .3s infinite; }
@keyframes lid-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.9); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
@media (max-width: 600px) { .lid-hint { margin: 4px 0 14px; } }
@media (prefers-reduced-motion: reduce) { .lid-ring span { animation: none; } }

/* ---------- Sketches that draw themselves (draw: …) ---------- */
.step-media.draw-box { background: #fff; }
.draw-box .draw-svg { width: 100%; height: auto; display: block; }
.draw-box .draw-svg path { fill: none; stroke: #2c2b2f; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Material switcher + Sketchbook ---------- */
.swatch-stage { position: relative; overflow: hidden; background: #f3f3f3; max-width: 100%; }
.swatch-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.swatch-stage img.is-on { opacity: 1; }
.swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.swatch-row button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; overflow: hidden; background: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.swatch-row button img { width: 100%; height: 100%; object-fit: cover; }
.swatch-row button:hover { transform: scale(1.08); }
.swatch-row button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.swatch-label { font-size: .8rem; font-weight: 300; color: var(--ink-soft); margin-left: 6px; }
.chapter-text p.chapter-meta { font-size: .8rem; letter-spacing: .02em; color: var(--ink-soft); }
/* Sketchbook: text on the left, a wider image column on the right */
[aria-labelledby^="sketchbook-ch"] .chapter-side { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
[aria-labelledby^="sketchbook-ch"] .media-grid.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[aria-labelledby^="sketchbook-ch"] .media-grid.compact .media { grid-column: span 2; }
[aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.half { grid-column: span 3; }
[aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.twothirds { grid-column: span 4; }
[aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.full-row,
[aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.wide { grid-column: 1 / -1; }
@media (max-width: 900px) { [aria-labelledby^="sketchbook-ch"] .chapter-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  [aria-labelledby^="sketchbook-ch"] .media-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [aria-labelledby^="sketchbook-ch"] .media-grid.compact .media { grid-column: span 1; }
  [aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.half,
  [aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.twothirds,
  [aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.full-row,
  [aria-labelledby^="sketchbook-ch"] .media-grid.compact .media.wide { grid-column: 1 / -1; }
}

/* ---------- Falling sheets that draw themselves ---------- */
.desk { position: relative; width: 100%; max-width: 100%; background: #f4f3f0; overflow: hidden; }
.desk .sheet { position: absolute; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 28px -12px rgba(0,0,0,.25);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); transition: transform .75s cubic-bezier(.2,.85,.25,1.12), opacity .35s ease; }
.desk.armed .sheet:not(.landed) { opacity: 0; transform: translate(var(--x, 0), calc(var(--y, 0) - 70%)) rotate(calc(var(--r, 0deg) + 9deg)) scale(1.06); transition: none; }
.desk .sheet > svg { width: 100%; height: 100%; display: block; }
.desk .sheet[data-kind="cad"] svg path { stroke: #2b2a2e; }
.desk .sheet[data-kind="cad"] svg use { transition: opacity .8s ease; }
.desk.armed .sheet[data-kind="cad"]:not(.text-on) svg use { opacity: 0; }
.desk .sheet[data-kind="svg"] svg path { fill: none; stroke: #2c2b2f; stroke-linecap: round; stroke-linejoin: round; }
.desk .sheet[data-kind="mark"] { display: grid; place-items: center; }
.desk .sheet[data-kind="mark"] svg { width: 58%; height: auto; overflow: visible; }
.desk .sheet[data-kind="mark"] svg path, .desk .sheet[data-kind="mark"] svg circle { fill: #1d1d1b; stroke: #1d1d1b; stroke-width: 1; transition: fill-opacity .6s ease; }
.desk.armed .sheet[data-kind="mark"]:not(.text-on) svg path, .desk.armed .sheet[data-kind="mark"]:not(.text-on) svg circle { fill-opacity: 0; }
.desk .sheet[data-kind="card"] img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* pile: three sketches and the logo */
.desk.pile { aspect-ratio: 4 / 3; }
.desk.pile .sheet { width: 34%; aspect-ratio: 3 / 4; top: 9%; }
.desk.pile .n1 { left: 7%; --r: -7deg; }
.desk.pile .n2 { left: 31%; --r: 4deg; --y: 4%; }
.desk.pile .n3 { left: 56%; --r: -3deg; }
.desk.pile .n4 { left: 38%; width: 24%; top: 50%; --r: 6deg; }
/* cad: two drawing sheets */
.desk.cad { aspect-ratio: 1191 / 900; }
.desk.cad .sheet { width: 78%; aspect-ratio: 1191 / 842; left: 11%; top: 4%; }
.desk.cad .n2 { width: 62%; left: 30%; top: 30%; }
/* decals: five cards */
.desk.decals { aspect-ratio: 16 / 10; }
.desk.decals .sheet { width: 34%; aspect-ratio: 4 / 3; }
.desk.decals .n1 { left: 5%; top: 7%; --r: -6deg; }
.desk.decals .n2 { left: 33%; top: 4%; --r: 3deg; }
.desk.decals .n3 { left: 61%; top: 9%; --r: -2deg; }
.desk.decals .n4 { left: 14%; top: 50%; --r: 4deg; }
.desk.decals .n5 { left: 47%; top: 46%; width: 40%; --r: -3deg; }
/* paper: one sheet lying still, the drawing appears on it */
.desk.paper { aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--hair); }
.desk.paper .sheet { inset: 6%; box-shadow: none; background: none; transform: none; display: grid; place-items: center; }
.desk.paper.armed .sheet:not(.landed) { opacity: 1; transform: none; }
.desk.paper .sheet > svg { height: auto; }
.desk-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.replay { font: inherit; font-size: .78rem; font-weight: 300; color: var(--ink-soft); background: none; border: 0; border-bottom: 1px solid var(--hair); padding: 0 0 2px; cursor: pointer; white-space: nowrap; }
.replay:hover { color: var(--ink); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .replay { display: none; } }
/* ---------- Falling sheets: CAD layout v2 ---------- */
.desk.cad { aspect-ratio: 1191 / 820; }
.desk.cad .sheet { width: 64%; left: 3%; top: 4%; }
.desk.cad .n2 { width: 46%; left: 51%; top: 42%; }

/* ---------- Interactive shelf ---------- */
.shelf-builder { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: #f4f3f0; touch-action: none; user-select: none; -webkit-user-select: none; }
.shelf-builder canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shelf-builder.is-dragging canvas { cursor: grabbing !important; }
.sb-still { position: absolute; inset: 0; display: none; }
.sb-still img { width: 100%; height: 100%; object-fit: cover; }
.shelf-builder.is-error .sb-still { display: block; }
.shelf-builder.is-error ~ .sb-bar { display: none; }
.sb-note { position: absolute; left: 16px; bottom: 12px; margin: 0; font-size: .75rem; color: var(--ink-soft); display: none; }
.shelf-builder:not(.is-ready):not(.is-error) .sb-loading { display: block; }
.sb-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: .78rem; font-weight: 300; color: var(--ink-soft); }
.sb-btns { display: flex; gap: 16px; }

/* ---------- Interactive shelf: hints ---------- */
.sb-ring { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; pointer-events: none; transition: opacity .4s var(--ease, ease); margin: -18px 0 0 -18px; }
.shelf-builder.is-touched .sb-ring, .shelf-builder:not(.is-ready) .sb-ring { opacity: 0; }
.sb-ring-mark { position: relative; flex: none; width: 36px; height: 36px; }
.sb-ring-mark span { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.sb-ring-mark .dot { width: 8px; height: 8px; background: var(--ink); }
.sb-ring-mark .r1 { width: 22px; height: 22px; border: 1.5px solid var(--ink); filter: blur(.5px); opacity: .5; animation: sb-breathe 2.6s ease-in-out infinite; }
.sb-ring-mark .r2 { width: 36px; height: 36px; border: 1.5px solid var(--ink); filter: blur(1.4px); opacity: .25; animation: sb-breathe 2.6s ease-in-out .3s infinite; }
@keyframes sb-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.9); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
.sb-ring-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; background: rgba(255,255,255,.75); padding: 3px 6px; }
.sb-drop { position: absolute; border: 1.5px dashed rgba(11,11,11,.35); display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s ease, background-color .25s ease, border-color .25s ease; }
.sb-drop span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); writing-mode: vertical-rl; }
.shelf-builder.is-dragging .sb-drop { opacity: 1; }
.shelf-builder.is-over .sb-drop { background: rgba(11,11,11,.06); border-color: var(--ink); }
.shelf-builder.is-over .sb-drop span { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .sb-ring-mark span { animation: none; } }

/* ---------- Ekstrakt hero on phones (update-2026-10-15) ---------- */
@media (max-width: 720px) {
  .hero[data-label="Ekstrakt"] { height: 62svh; min-height: 340px; }
}
/* ---------- end Ekstrakt hero on phones ---------- */

/* ---------- Hotspots: no labels on touch screens (update-2026-10-16) ---------- */
@media (hover: none) {
  .hs-label { display: none; }
}

/* ---------- Header: first name only ---------- */
.home-mark .last-name { display: none; }

/* ---------- Sketchbook journal (tools/add-journal.mjs) ---------- */
.page-journal .site-header { color: var(--ink); mix-blend-mode: normal; background: var(--paper); }
.page-journal .project-body { padding-top: clamp(110px, 16vw, 180px); }
.journal-intro { max-width: 1620px; margin: 0 auto clamp(24px, 4vw, 48px); display: grid; gap: 20px; }
.journal-title { margin: 0; font-size: clamp(2.8rem, 9vw, 5.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: .95; }
.journal-lede { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 300; line-height: 1.55; }
.journal-filters { max-width: 1620px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 28px; }
.journal-filters button {
  font: inherit; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.journal-filters button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.page-journal .chapter {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); row-gap: 0;
}
.page-journal .chapter > * { grid-column: 2; min-width: 0; }
.page-journal .chapter > .journal-rail {
  grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: 88px;
  display: grid; gap: 6px; padding-top: 6px;
}
.page-journal .chapter-num { display: none; }
.journal-rail time { font-size: .95rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.journal-type { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.page-journal .chapter[data-type="note"] { position: relative; isolation: isolate; padding-bottom: clamp(20px, 3vw, 32px); }
.page-journal .chapter[data-type="note"]::before {
  content: ""; grid-column: 2; grid-row: 1 / span 60; background: #f6f6f4; z-index: -1;
  margin: clamp(-16px, -2vw, -8px) clamp(-24px, -2.5vw, -12px) calc(-1 * clamp(20px, 3vw, 32px));
}
@media (max-width: 720px) {
  .page-journal .chapter { display: block; }
  .page-journal .chapter > .journal-rail { position: static; display: flex; gap: 12px; align-items: baseline; padding-top: 0; margin-bottom: 8px; }
}
/* four links in the menu: keep it on one line on phones */
@media (max-width: 480px) {
  .site-nav { gap: 14px; }
  .site-nav a { font-size: .95rem; }
  .site-nav a[href$="#about"] { display: none; }
}

/* ---------- Sketchbook journal: cover image (tools/update-journal-2.mjs) ---------- */
.journal-cover { max-width: 1620px; margin: 0 auto clamp(8px, 2vw, 24px); aspect-ratio: 16 / 9; overflow: hidden; background: #f3f3f3; }
.journal-cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .journal-cover { aspect-ratio: 4 / 3; } }

/* ---------- Process map (tools/add-process-map.mjs) ---------- */
.pmap-overview { max-width: 1620px; margin: clamp(48px, 7vw, 88px) auto 0; }
.pmap-overview .label { margin-bottom: 14px; }
.pmap-ov { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pmap-ov a { display: grid; gap: 6px; align-content: start; height: 100%; padding: 14px 14px 18px 0; color: inherit; text-decoration: none; }
.pmap-ov li + li a { padding-left: 14px; border-left: 1px solid var(--hair); }
.pmap-n { font-size: .72rem; letter-spacing: .14em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pmap-name { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; }
.pmap-sum { font-size: .88rem; font-weight: 300; line-height: 1.45; }
.pmap-ch { font-size: .75rem; font-weight: 300; color: var(--ink-soft); }
.pmap-ov a:hover .pmap-name, .pmap-ov a:focus-visible .pmap-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (max-width: 900px) {
  .pmap-ov { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pmap-ov li:nth-child(3n + 1) a { border-left: 0; padding-left: 0; }
  .pmap-ov li:nth-child(n + 4) { border-top: 1px solid var(--hair); }
}
@media (max-width: 560px) {
  .pmap-ov { grid-template-columns: minmax(0, 1fr); }
  .pmap-ov li + li a { border-left: 0; padding-left: 0; }
  .pmap-ov li + li { border-top: 1px solid var(--hair); }
  .pmap-ov a { grid-template-columns: 2rem minmax(0, 1fr); column-gap: 8px; }
  .pmap-ov a > :not(.pmap-n) { grid-column: 2; }
  .pmap-n { grid-row: 1 / span 3; padding-top: 5px; }
}
.ch-phase { order: -1; min-width: 7rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 600px) { .ch-phase { min-width: 0; } }
.chapter[data-phase] { scroll-margin-top: 140px; }
.chapter[data-phase] .chapter-num { display: none; }
/* the sticky bar under the menu */
.pmap-band { position: fixed; z-index: 880; inset: 0 0 auto 0; height: calc(66px + env(safe-area-inset-top, 0px)); background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.pmap-band.on { opacity: 1; }
.pmap-bar {
  position: fixed; z-index: 890; left: 0; right: 0; top: calc(66px + env(safe-area-inset-top, 0px));
  padding: 8px var(--gutter) 12px; background: var(--paper); border-bottom: 1px solid var(--hair);
  transform: translateY(-140%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.pmap-bar.on { transform: none; opacity: 1; pointer-events: auto; }
.pmap-bar ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1620px; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; }
.pmap-bar a { display: grid; gap: 7px; color: var(--ink-soft); text-decoration: none; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.pmap-bar i { display: block; height: 2px; background: var(--hair); position: relative; overflow: hidden; }
.pmap-bar i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--fill, 0)); }
.pmap-bar a.done, .pmap-bar a.now { color: var(--ink); }
.pmap-cur { display: none; }
@media (max-width: 560px) {
  .pmap-bar a span { display: none; }
  .pmap-cur { display: flex; justify-content: space-between; max-width: 1620px; margin: 8px auto 0; font-size: .8rem; }
  .pmap-cur b { font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) { .pmap-bar, .pmap-band { transition: none; } }

/* ---------- Process map: no sticky bar (tools/remove-process-bar.mjs) ---------- */
.pmap-bar, .pmap-band { display: none !important; }
.chapter[data-phase] { scroll-margin-top: 96px; }

/* ---------- Process map: phase number (tools/add-phase-number.mjs) ---------- */
.ch-phase-n { margin-left: .9em; font-variant-numeric: tabular-nums; }