@font-face {
  font-family: "Typewriter_Condensed Regular";
  src: url("assets/fonts/Typewriter_Condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f9f9f9;
  --ink: #111111;
  --red: rgb(255, 55, 35);
  --hover-red: rgb(255, 45, 45);
  --muted: rgb(120, 120, 120);
  --font: "Typewriter_Condensed Regular", sans-serif;
  /* The original references an undefined "Typewriter_Condensed" family in a few places, so those fall back: */
  --font-fallback: "Typewriter_Condensed Regular", "Arial Narrow", Arial, sans-serif;
  --font-mono: "Typewriter_Condensed Regular", "Courier New", Courier, monospace;

  --pad: 32px;          /* header side padding */
  --content: 624px;     /* grid width */
  --img: 280px;         /* grid image size */
  --col-gap: 64px;
  --row-gap: 32px;
}

/* ≥1280: fluid two-column layout, capped at 1280px wide */
@media (min-width: 1280px) {
  :root {
    --pad: 60px;
    --content: min(calc(100vw - 120px), 1280px);
    --col-gap: 30px;
    --row-gap: 30px;
    --img: calc((var(--content) - var(--col-gap)) / 2);
  }
}
@media (min-width: 1440px) {
  :root { --col-gap: 40px; --row-gap: 40px; }
}
/* ≤809: compact grid — fluid columns with a visible gap between them and
   a small margin from the viewport edges (was full-bleed with 0 edge
   margin, which crowded the images against the sides). */
@media (max-width: 809.98px) {
  :root {
    --content: calc(100vw - 24px);
    --col-gap: 16px;
    --img: calc((100vw - 24px - 16px) / 2);
    --row-gap: 16px;
  }
}

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

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-transform: lowercase;
}

p, h2 { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.icon {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 24px; left: 0; right: 0;
  z-index: 7;
  pointer-events: none;
}
.header__inner {
  width: min(calc(100% - 2 * var(--pad)), 1280px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 20px;
}
.header__inner > * { flex: none; white-space: nowrap; text-transform: lowercase; }
.header__name { font-size: 20px; line-height: 1; letter-spacing: 1.6px; color: var(--red); pointer-events: auto; }
.header__name:hover, .header__about:hover { opacity: 0.7; }
.header__roles { display: flex; gap: 37px; }
.header__roles p,
.header__about { font-size: 16px; line-height: 1.2; letter-spacing: 1.28px; }
.header__roles p { color: var(--muted); }
.header__about { color: var(--red); pointer-events: auto; text-transform: lowercase; }
.header__email { font-size: 16px; line-height: 1; letter-spacing: 1.28px; color: var(--ink); margin-top: 2px; pointer-events: auto; text-decoration: none; }
.header__email { transition: color 0.2s; }
.header__email:hover, .header__email:focus-visible { color: var(--red); }

/* Header stacks on phones and small tablets, where one row gets crowded. */
@media (max-width: 899.98px) {
  .header { top: 16px; }
  .header__inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 8px;
  }
  .header__roles { gap: 20px; }
  .header__email { margin-top: 0; }
}

/* ---------- Grid ---------- */
.page {
  position: relative;
  padding: 92px 0 60px;
  overflow-x: clip;
}
@media (max-width: 899.98px) {
  .page { padding-top: 168px; }
}
@media (max-width: 809.98px) {
  .page { padding-bottom: 30px; }
}
.cols {
  width: var(--content);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.col {
  width: var(--img);
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  will-change: transform;
}
.col--up { padding-bottom: 107px; }
@media (max-width: 809.98px) {
  .col--up { padding-bottom: 32px; }
}

.item {
  position: relative;
  width: var(--img);
  height: var(--img);
  overflow: hidden;
  cursor: none;
  outline: none;
}
.item img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.item--logo { background: #fff; }
.item--logo img { object-fit: contain; }
.item__dim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
}
.item__title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--hover-red);
  font-family: var(--font-fallback);
  font-size: 25px;
  text-align: center;
  width: 88%;
  line-height: 1.15;
  -webkit-text-stroke: 0.35px var(--hover-red);
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
}
.item:hover .item__dim,
.item:hover .item__title,
.item:focus-visible .item__dim,
.item:focus-visible .item__title { opacity: 1; }

@media (max-width: 809.98px) {
  .item__title { font-size: 15px; letter-spacing: 0.02em; }
}

/* ---------- Cursor labels ---------- */
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  will-change: transform;
}
.cursor-label.is-on { opacity: 1; }
.cursor-label p {
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 1.44px;
  color: #fff;
  white-space: pre;
  text-transform: lowercase;
}

/* ---------- Entry hints ---------- */
.hints {
  position: fixed; inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition: opacity 400ms ease;
}
.hints.is-fading { opacity: 0; }
.hints[hidden] { display: none; }
.hint {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-fallback);
  font-size: 28px;
  letter-spacing: 0.08em;
  line-height: 1;
  font-weight: 400;
  text-transform: lowercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: hint-bounce 1.35s ease-in-out infinite;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hint svg { width: 34px; height: 34px; }
.hint span { transition: opacity 160ms ease-out, transform 480ms cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hint svg  { transition: transform 480ms cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hints.is-leaving .hint { animation: none; }
.hints.is-leaving .hint span { opacity: 0; transform: translateY(96px); }
.hints.is-leaving .hint svg  { transform: translateY(96px); }
@keyframes hint-bounce {
  0%   { transform: translate(-50%, -50%) translateY(0); }
  50%  { transform: translate(-50%, -50%) translateY(8px); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}

/* ---------- Gallery overlay ---------- */
.overlay[hidden] { display: none; }
.overlay__backdrop {
  position: fixed; inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.58);
  animation: fade-in 300ms ease both;
}
.overlay__veil {
  position: fixed; inset: 0;
  z-index: 3;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  pointer-events: none;
  animation: fade-in 300ms ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.panel {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1060px, 100vw);
  height: 100vh;
  padding: 110px 20px 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  animation: fade-in 300ms ease both;
}
.panel::-webkit-scrollbar { display: none; }

.gallery__main { width: min(var(--w, 480px), 100%); flex: none; overflow: hidden; }
.gallery__main img,
.gallery__main video,
.photo video,
.photo img { width: 100%; height: 100%; object-fit: cover; }

.gallery__heading {
  width: 780px; min-height: 32px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
}
.gallery__heading h2 {
  font-size: 18px; line-height: 1em; font-weight: 400;
  color: var(--red);
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
}
.info-btn { display: flex; padding: 6px; border-radius: 100px; }
.info-btn .icon { width: 16px; height: 16px; stroke: var(--red); transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1); }
.info-btn.is-open .icon { transform: rotate(180deg); }

/* Accordion: animates open/closed via max-height (set inline by JS to the
   content's real measured height — animating to a fixed value much taller
   than the content makes an eased reveal finish almost instantly, since
   the visible range is covered in a small fraction of the duration).
   Standard ease-in-out, about half a second. */
.gallery__details {
  width: 820px; flex: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 520ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery__details-inner {
  padding: 0 28px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  font-size: 16px; line-height: 1.35em;
  opacity: 0;
  transition: opacity 260ms ease-out;
}
.gallery__details.is-open .gallery__details-inner {
  opacity: 1;
  transition: opacity 380ms ease-out 140ms;
}
.gallery__details-inner p { width: 100%; max-width: 690px; user-select: none; }
.gallery__details-inner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.gallery__details-inner a:hover { color: var(--red); }
.gallery__details-inner .credit-heading:not(:first-child) { margin-top: 12px; }
.gallery__details-inner .credit-heading { font-size: 18px; line-height: 1.35; color: var(--hover-red); }
.gallery__details-inner .credit-heading--group:not(:first-child) { margin-top: 28px; }
.gallery__details-inner .credit-subheading { font-size: 14px; line-height: 1.35; color: var(--muted); margin-top: 10px; }

.gallery__supporting {
  width: 780px; flex: none;
  display: grid;
  grid-template-columns: repeat(2, 382px);
  grid-auto-rows: min-content;
  gap: 16px;
  justify-content: center;
}
.photo { overflow: hidden; }
.photo--wide, .photo--solo { grid-column: span 2; width: min(var(--w, 100%), 100%); justify-self: center; }
.photo-row { grid-column: span 2; display: flex; gap: 16px; align-items: flex-start; }
.photo--half { min-width: 0; }

/* Filmstrip: sits at the end of each project and scrolls with it */
.strip {
  width: min(780px, 100%); flex: none;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  margin-top: 40px;
}
.strip__title {
  font-size: 17px; line-height: 1; letter-spacing: 1.28px;
  color: var(--red);
  text-align: center;
}
.strip__track {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 16px calc(50% - var(--thumb, 56px) / 2 - 6px);
  overflow-x: auto;
  scrollbar-width: none;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__thumb {
  flex: none;
  width: var(--thumb, 56px); height: var(--thumb, 56px);
  overflow: hidden;
  opacity: 0.5;
  filter: blur(1.5px);
  transform: scale(0.92);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.strip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.strip__thumb--logo { background: #fff; }
.strip__thumb--logo img { object-fit: contain; }
.strip__thumb:hover, .strip__thumb:focus-visible { opacity: 1; filter: none; transform: scale(1.3); }
.strip__thumb.is-current { opacity: 1; filter: none; transform: scale(1.3); margin: 0 6px; }

@media (max-width: 859.98px) {
  .panel { padding: 100px 16px 220px; }
  .gallery__heading, .gallery__supporting, .gallery__details { width: 100%; }
  .gallery__details-inner { padding: 0 12px 32px; }
  .gallery__supporting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .panel { padding-top: 140px; }
  #about-panel { padding-top: 140px; }
}
@media (max-width: 809.98px) {
  .panel { padding-bottom: 120px; }
  .hint { font-size: 21px; gap: 8px; }
  .hint svg { width: 28px; height: 28px; }
  .panel .back-btn, #about-back { display: flex; }
  .panel .back-btn { align-self: flex-start; margin-left: -6px; }
  #about-back { margin-left: -6px; width: auto; align-self: flex-start; }
}

/* Back to the front page (mobile only) */
.back-btn {
  display: none;
  align-items: center; gap: 6px;
  padding: 8px 6px;
  font-size: 16px; line-height: 1; letter-spacing: 1.28px;
  color: var(--red);
}
.back-btn .icon { width: 20px; height: 20px; stroke: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .hint { animation: none; }
}

/* ---------- About overlay ----------
   Opens instantly (no fade), unlike the gallery panel. */
#about .overlay__backdrop,
#about .overlay__veil,
.about {
  animation: none;
}
.about {
  position: fixed; inset: 0;
  z-index: 4;
  overflow-y: auto;
  padding: 80px 20px 64px;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
  scrollbar-width: none;
  outline: none;
}
.about::-webkit-scrollbar { display: none; }
.about > * { width: min(780px, 100%); flex: none; }

.about__portrait { width: min(440px, 100%); aspect-ratio: 650 / 742; }
.about__portrait video { display: block; width: 100%; height: 100%; object-fit: contain; }

.about__acc { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.about .gallery__heading, .about .gallery__details { width: 100%; }
.about .gallery__details-inner > p:not(.credit-heading) + p:not(.credit-heading) { margin-top: 10px; }
#acc-about p { max-width: 540px; text-wrap: balance; }
#acc-clients p { text-wrap: balance; }
.about__social { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.about__social a { display: flex; width: 20px; height: 20px; }
.social-icon { width: 20px; height: 20px; fill: var(--red); }

/* Drawing board */
.trace {
  display: flex; flex-direction: column; gap: 12px;
  color: var(--hover-red);
  font-family: var(--font-mono);
}
.trace[hidden] { display: none; }
.trace p { text-transform: lowercase; color: var(--hover-red); }
.trace__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.trace__title { font-size: 15px; letter-spacing: 0.02em; line-height: normal; }
.trace__help { font-size: 12px; line-height: 1.35; }
.trace__actions { display: flex; justify-content: center; gap: 8px; }
.trace__actions button {
  border: 1px solid var(--hover-red);
  color: var(--hover-red);
  font-family: inherit;
  font-size: 12px; text-transform: lowercase;
  padding: 8px 12px;
}
.trace__board { position: relative; height: 420px; border: 1px solid transparent; }
.trace__board canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.trace__save {
  position: absolute; right: 10px; bottom: 10px;
  width: 78px; height: 34px;
  border: 1px solid var(--hover-red);
  z-index: 2;
}
.trace__save svg { display: block; }
.trace__gallery { display: flex; flex-direction: column; gap: 8px; }
.trace__gallery-label { font-size: 13px; letter-spacing: 0.02em; line-height: normal; }
.trace__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
  padding-bottom: 20px;
}
.trace__grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block;
  border: 1px solid rgba(255, 45, 45, 0.45);
}
.trace__count { position: absolute; right: 0; bottom: 0; font-size: 11px; letter-spacing: 0.01em; text-align: right; line-height: normal; }

/* Scroll cue under the filmstrip */
.strip__bar { position: relative; width: min(180px, 50%); height: 2px; background: rgba(17, 17, 17, 0.14); margin-top: 6px; }
.strip__bar-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--red); }