/* Licensed Affairs webfonts, served with the portfolio. */
@font-face {
  font-family: "Affairs Local";
  src: url("assets/fonts/Affairs-Regular.woff2") format("woff2"),
       url("assets/fonts/Affairs-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Affairs Mono Local";
  src: url("assets/fonts/Affairs-Mono.woff2") format("woff2"),
       url("assets/fonts/Affairs-Mono.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Affairs Local";
  src: url("assets/fonts/Affairs-Italic.woff2") format("woff2"),
       url("assets/fonts/Affairs-Italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --page: #ffffff;
  --ink: #11110f;
  --muted: rgba(17,17,15,.48);
  --edge: 24px;
  --card-width: min(48.51vw, 716px);
  --card-gap: clamp(72px, 12vh, 150px);
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page); color: var(--ink); }
html { scroll-behavior: auto; }
body {
  font-synthesis: none;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  overflow-x: hidden;
  transition: background-color .55s var(--ease), color .55s var(--ease);
}
button, a { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }

.site-header {
  position: fixed;
  z-index: 40;
  inset: var(--edge) var(--edge) auto var(--edge);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  mix-blend-mode: normal;
  transition: color .45s var(--ease);
}
.site-header button, .site-header a { pointer-events: auto; }
.wordmark {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: none;
}
.info-button, .info-close, .viewer-close {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
}
.info-button::after, .info-close::after, .viewer-close::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.info-button:hover::after, .info-close:hover::after, .viewer-close:hover::after { transform: scaleX(1); transform-origin: left; }

.portfolio { position: relative; min-height: 100vh; }
.gallery {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: 45vh 0;
  perspective: 1200px;
}
.focus-line { position: fixed; top: 50%; left: 0; width: 100%; height: 1px; pointer-events: none; opacity: 0; }

.project {
  position: relative;
  width: var(--card-width);
  cursor: pointer;
  opacity: var(--project-opacity, .28);
  transform: translate3d(0, var(--project-shift, 0px), 0) scale(var(--project-scale, .84));
  filter: blur(var(--project-blur, 0px));
  transition: filter .3s linear;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}
.project.is-active { --project-opacity: 1; }
.project-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #ddd;
  border-radius: 4px;
}
.project video {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transform: scale(var(--media-scale, 1.035));
  transition: transform .9s var(--ease);
}
.project-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .015em;
  text-transform: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}

/* Desktop: keep the reel visually clean until the viewer chooses a project.
   Touch devices keep captions visible because hover is unavailable. */
@media (hover: hover) and (pointer: fine) {
  .project-label {
    opacity: 0;
    transform: translateY(5px);
  }
  .project:hover .project-label,
  .project:focus-visible .project-label,
  .project:focus-within .project-label {
    opacity: 1;
    transform: translateY(0);
  }
}
.project.is-active video { --media-scale: 1.01; }
.project-label span:first-child {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: normal;
}
.project-label span:last-child {
  color: var(--muted);
  text-align: right;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
}

.info-panel {
  position: fixed;
  z-index: 55;
  inset: 0 0 0 auto;
  width: min(520px, 100%);
  background: var(--ink);
  color: var(--page);
  transform: translateX(102%);
  transition: transform .65s var(--ease);
  visibility: hidden;
}
.info-panel.is-open { transform: translateX(0); visibility: visible; }
.info-panel__inner { min-height: 100%; padding: var(--edge); display: flex; flex-direction: column; }
.info-close { align-self: flex-end; }
.info-copy { margin-top: auto; padding: 12vh 0 8vh; }
.info-kicker { margin: 0 0 18px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.info-bio { margin: 0; max-width: 430px; font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif; font-size: clamp(25px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.info-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding-top: 20px; border-top: 1px solid rgba(246,245,241,.28); }
.info-links a { width: fit-content; text-decoration: none; font-size: 13px; }
.info-footer { margin: 45px 0 0; font-size: 11px; line-height: 1.45; opacity: .55; }

.viewer {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.viewer.is-open { visibility: visible; pointer-events: auto; }
.viewer-backdrop { position: absolute; inset: 0; background: rgba(10,10,9,.96); opacity: 0; transition: opacity .55s var(--ease); }
.viewer.is-open .viewer-backdrop { opacity: 1; }
.viewer-stage {
  position: relative;
  z-index: 1;
  width: min(88vw, 1500px);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .45s .12s var(--ease), transform .65s .08s var(--ease);
}
.viewer.is-open .viewer-stage { opacity: 1; transform: scale(1); }
.viewer-video { display: block; width: 100%; max-height: 78vh; background: #000; object-fit: contain; }
.viewer-meta { color: #f6f5f1; display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding-top: 13px; }
.viewer-meta h1, .viewer-meta p {
  margin: 0;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .015em;
  text-transform: none;
  font-weight: 400;
}
.viewer-meta h1 { font-style: normal; }
.viewer-meta p { opacity: .5; margin-top: 3px; font-style: italic; }

body.has-overlay { overflow: hidden; }
body.viewer-open .site-header { color: #f6f5f1; }
body.viewer-open .info-button { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  :root { --edge: 16px; --card-width: 88.2vw; --card-gap: 17vh; }
  .gallery { padding: 39vh 0; }
  .project { opacity: .25; transform: scale(.93); }
  .viewer-stage { width: calc(100vw - 24px); }
  .viewer-video { max-height: 72vh; }
  .info-panel { width: 100%; }
  .info-bio { font-size: 31px; }
}

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

.wordmark {
  display: inline-block;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}
.wordmark::after, .index-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.wordmark:hover::after, .index-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.index-link {
  position: fixed;
  z-index: 40;
  left: var(--edge);
  bottom: var(--edge);
  width: fit-content;
  color: inherit;
  text-decoration: none;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  transition: color .45s var(--ease), opacity .35s var(--ease);
}
body.viewer-open .index-link { color: #f6f5f1; }
body.has-overlay .index-link { pointer-events: none; }

.index-page { min-height: 100vh; }
.work-index {
  min-height: 100vh;
  padding: clamp(92px, 11vh, 132px) var(--edge) clamp(50px, 7vh, 84px);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(14px, 1.65vw, 28px);
  row-gap: clamp(34px, 4.5vw, 72px);
}
.grid-project {
  min-width: 0;
  cursor: pointer;
  outline: none;
}
.grid-project__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #ddd;
}
.grid-project__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.grid-project:hover .grid-project__media video,
.grid-project:focus-visible .grid-project__media video {
  transform: scale(1.04);
}
.grid-project__label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-top: 9px;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .015em;
  text-transform: none;
}
.grid-project__label span:first-child {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: normal;
}
.grid-project__label span:last-child {
  color: var(--muted);
  text-align: right;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: normal;
}

@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; row-gap: 38px; }
  .work-index { padding-top: 82px; }
  .grid-project__label { font-size: 12px; }
}

/* Full-screen editorial information view */
.info-panel {
  inset: 0;
  width: 100%;
  background: #11110f;
  color: var(--page);
  transform: translateY(101%);
  overflow-y: auto;
}
.info-panel.is-open { transform: translateY(0); }
.info-panel__inner {
  min-height: 100vh;
  padding: var(--edge);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(56px, 8vh, 110px);
}
.info-close { justify-self: end; }
.info-editorial {
  align-self: center;
  width: min(1280px, calc(100vw - (var(--edge) * 2)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(70px, 9vw, 170px);
}
.info-column { max-width: 580px; }
.info-column p {
  margin: 0 0 1.15em;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: clamp(28px, 3vw, 49px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 400;
}
.info-column p:last-child { margin-bottom: 0; }
.info-column em { font-style: italic; }
.info-contacts {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 76px);
  padding-top: 18px;
  border-top: 1px solid rgba(239,237,231,.22);
}
.contact-block { min-width: 0; }
.contact-label {
  margin: 0 0 5px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
}
.contact-block a {
  color: inherit;
  text-decoration: none;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: clamp(15px, 1.45vw, 23px);
  line-height: 1.15;
  overflow-wrap: anywhere;
  opacity: .75;
  transition: opacity .3s var(--ease);
}
.contact-block a:hover { opacity: 1; }

@media (max-width: 900px) {
  .info-panel__inner { gap: 60px; }
  .info-editorial { grid-template-columns: 1fr; gap: 0; }
  .info-column { max-width: 720px; }
  .info-column p { font-size: clamp(28px, 6vw, 44px); }
  .info-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

@media (max-width: 560px) {
  .info-panel__inner { padding: 16px; gap: 48px; }
  .info-column p { font-size: 29px; line-height: 1.08; }
  .info-contacts { grid-template-columns: 1fr; }
  .contact-block a { font-size: 18px; }
}

/* Version 14 — restrained right-hand information drawer */
.info-panel {
  inset: 0 0 0 auto;
  width: min(620px, 100%);
  background: #11110f;
  color: var(--page);
  transform: translateX(102%);
  overflow-y: auto;
  visibility: hidden;
  transition: transform .72s var(--ease), visibility 0s linear .72s;
}
.info-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .72s var(--ease), visibility 0s;
}
.info-panel__inner {
  min-height: 100%;
  padding: var(--edge);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.info-close {
  align-self: flex-end;
  justify-self: auto;
}
.info-editorial {
  width: 100%;
  margin: auto 0 0;
  display: block;
}
.info-column {
  max-width: 520px;
}
.info-column + .info-column {
  margin-top: 0;
}
.info-column p {
  margin: 0 0 18px;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: 14px;
  line-height: 1.42;
  letter-spacing: .01em;
  font-weight: 400;
}
.info-column p:last-child { margin-bottom: 18px; }
.info-column em { font-style: normal; }
.info-contacts {
  width: 100%;
  margin-top: 42px;
  padding-top: 0;
  border-top: 1px solid rgba(239,237,231,.22);
  display: block;
}
.contact-block {
  min-width: 0;
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(239,237,231,.16);
}
.contact-label {
  margin: 0;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: .5;
}
.contact-block a {
  color: inherit;
  text-decoration: none;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  opacity: 1;
  transition: opacity .3s var(--ease);
}
.contact-block a:hover { opacity: .55; }

@media (max-width: 760px) {
  .info-panel { width: 100%; }
  .info-panel__inner { padding: 16px; }
  .info-editorial { padding-top: 90px; }
  .info-column p { font-size: 13px; line-height: 1.45; }
  .info-contacts { margin-top: 34px; }
  .contact-block { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .contact-block a { font-size: 10px; }
}


/* Version 16 — information typography and links */
.info-column p {
  font-size: 17px;
  line-height: 1.44;
}
.info-column em {
  font-style: italic;
}
.info-inline-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(239,237,231,.42);
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.info-inline-link:hover {
  border-color: currentColor;
  opacity: .7;
}
.info-socials {
  padding-top: 14px;
}
.info-socials a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.info-socials a::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.info-socials a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media (max-width: 760px) {
  .info-column p { font-size: 15px; line-height: 1.48; }
}


/* Version 72 — staged homepage entrance.
   The centred film resolves first; the surrounding reel and chrome follow quickly. */
.home-intro .site-header,
.home-intro .index-link {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .56s var(--ease), transform .68s var(--ease);
}
.home-intro .index-link { transform: translateY(3px); }
.home-intro.intro-text-visible .site-header,
.home-intro.intro-text-visible .index-link {
  opacity: 1;
  transform: translateY(0);
}

/* Keep the rest of the reel absent for the opening beat. Its normal scroll-
   calculated opacity is preserved underneath and becomes the fade target. */
.home-intro .project:not(.intro-feature) {
  opacity: 0 !important;
  transition: opacity .78s var(--ease), filter .3s linear;
}
.home-intro.intro-reel-visible .project:not(.intro-feature) {
  opacity: var(--project-opacity, .28) !important;
}

/* The hero preview feels as though it resolves into focus rather than loads. */
.home-intro .project.intro-feature .project-media {
  opacity: 0;
  transform: scale(.96);
  transform-origin: center center;
  transition:
    opacity .78s var(--ease),
    transform 1.06s cubic-bezier(.16, 1, .3, 1);
}
.home-intro.intro-video-visible .project.intro-feature .project-media {
  opacity: 1;
  transform: scale(1);
}

/* Homepage project captions remain governed by the normal hover treatment.
   Only the structural site text participates in the automatic intro. */

.index-intro .site-header {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.index-intro.grid-text-visible .site-header {
  opacity: 1;
  transform: translateY(0);
}
.index-intro .grid-project__media {
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition:
    opacity .52s var(--ease),
    transform .72s var(--ease);
  transition-delay: calc(var(--reveal-order, 0) * 28ms);
}
.index-intro.grid-media-visible .grid-project__media {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.index-intro .grid-project__label {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .38s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--reveal-order, 0) * 22ms);
}
.index-intro.grid-text-visible .grid-project__label {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .home-intro .site-header,
  .home-intro .index-link,
  .home-intro .project.intro-feature .project-media,
  .home-intro .project:not(.intro-feature),
  .index-intro .site-header,
  .index-intro .grid-project__media,
  .index-intro .grid-project__label {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mux full-film player: the stream should feel native to the portfolio, not like an embed. */
.viewer-mux {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  cursor: pointer;
  --media-object-fit: contain;
  --media-object-position: center;
  --controls: none;
  --dialog: none;
  --loading-indicator: none;
  --play-button: none;
  --seek-backward-button: none;
  --seek-forward-button: none;
  --mute-button: none;
  --captions-button: none;
  --airplay-button: none;
  --pip-button: none;
  --fullscreen-button: none;
  --cast-button: none;
  --playback-rate-button: none;
  --volume-range: none;
  --time-range: none;
  --time-display: none;
  --title-display: none;
  --duration-display: none;
  --controls-backdrop-color: transparent;
}


/* Version 32 — deliberate full-film opening transition */
.viewer-backdrop {
  transition: opacity .72s cubic-bezier(.22,1,.36,1);
}
.viewer-stage {
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition:
    opacity .58s .12s cubic-bezier(.22,1,.36,1),
    transform .92s .06s cubic-bezier(.16,1,.3,1);
}
.viewer.is-open .viewer-stage {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.viewer .viewer-video,
.viewer .viewer-mux {
  opacity: 0;
  transition: opacity .78s cubic-bezier(.22,1,.36,1);
}
.viewer.is-media-ready .viewer-video,
.viewer.is-media-ready .viewer-mux {
  opacity: 1;
}
.viewer-meta {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .46s .34s var(--ease), transform .62s .30s var(--ease);
}
.viewer.is-open .viewer-meta {
  opacity: 1;
  transform: translateY(0);
}
.viewer-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 41px;
  background: #090909;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  transition: opacity .55s var(--ease);
}
.viewer.is-media-ready .viewer-stage::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .viewer-stage,
  .viewer .viewer-video,
  .viewer .viewer-mux,
  .viewer-meta,
  .viewer-backdrop { transition-duration: .01ms !important; }
}

/* Minimal custom playback controls */
.viewer-stage { overflow: visible; }
.viewer-video,
.viewer-mux { cursor: pointer; }
.viewer-controls {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 56px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: #f6f5f1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s var(--ease), transform .42s var(--ease);
  pointer-events: none;
}
.viewer.show-controls .viewer-controls,
.viewer.is-paused .viewer-controls {
  opacity: 1;
  transform: translateY(0);
}
.viewer-control,
.viewer-time {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.viewer-control {
  color: inherit;
  opacity: .88;
  transition: opacity .24s var(--ease);
  pointer-events: auto;
}
.viewer-control:hover,
.viewer-control:focus-visible { opacity: 1; }
.viewer-progress {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
}
.viewer-progress__track,
.viewer-progress__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
}
.viewer-progress__track {
  width: 100%;
  background: rgba(246,245,241,.28);
}
.viewer-progress__fill {
  width: 0%;
  background: #f6f5f1;
}
.viewer-progress::after {
  content: "";
  position: absolute;
  left: var(--progress-handle, 0%);
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #f6f5f1;
  transform: translate(-50%, -50%);
}
.viewer-time { opacity: .7; }
.viewer.is-media-ready .viewer-meta {
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) {
  .viewer-controls {
    left: 12px;
    right: 12px;
    bottom: 52px;
    gap: 10px;
    grid-template-columns: auto 1fr auto;
  }
  .viewer-control,
  .viewer-time { font-size: 9px; }
}


/* Version 37 — tighter archive-end contact reveal */
.archive-contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(14px, 1.65vw, 28px);
  align-items: end;
  padding-top: clamp(30px, 4.4vh, 56px);
  padding-bottom: clamp(30px, 3vh, 48px);
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .72s var(--ease),
    transform .92s cubic-bezier(.16, 1, .3, 1);
}
.archive-contact.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.archive-contact a {
  width: fit-content;
  color: inherit;
  text-decoration: none;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
}
.archive-contact a::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .38s var(--ease);
}
.archive-contact a:hover::after,
.archive-contact a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.archive-contact__email {
  grid-column: 1 / span 3;
}
.archive-contact__instagram {
  grid-column: 4;
  justify-self: end;
}

@media (max-width: 980px) {
  .archive-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-contact__email { grid-column: 1; }
  .archive-contact__instagram { grid-column: 2; }
}

@media (max-width: 560px) {
  .archive-contact {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: clamp(24px, 3.6vh, 38px);
    padding-bottom: 18px;
    transform: translateY(24px);
  }
  .archive-contact__email,
  .archive-contact__instagram {
    grid-column: 1;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-contact {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Version 38 — bottom contact inset matches fixed header inset */
.work-index {
  padding-bottom: 0;
}
.archive-contact {
  padding-bottom: var(--edge);
}
@media (max-width: 560px) {
  .archive-contact {
    padding-bottom: var(--edge);
  }
}


/* Version 40 — Archive header fades on scroll direction; no positional movement */
.index-header {
  transition:
    color .45s var(--ease),
    opacity .30s var(--ease);
  will-change: opacity;
}
.index-header.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.index-header.is-hidden a,
.index-header.is-hidden button {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .index-header {
    transition: color .01ms linear, opacity .01ms linear;
  }
}

/* Version 41 — frosted / pearlescent Information drawer */
.info-panel {
  background:
    linear-gradient(135deg, rgba(242, 241, 237, .78) 0%, rgba(229, 228, 225, .70) 48%, rgba(238, 235, 232, .76) 100%);
  color: var(--ink);
  border-left: 1px solid rgba(17, 17, 15, .08);
  box-shadow: -18px 0 48px rgba(17, 17, 15, .055);
  -webkit-backdrop-filter: blur(30px) saturate(112%);
  backdrop-filter: blur(30px) saturate(112%);
  isolation: isolate;
}

/* Soft colour drift in the glass itself — deliberately very restrained. */
.info-panel::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 58% at 18% 98%, rgba(154, 166, 178, .16), transparent 72%),
    radial-gradient(75% 48% at 84% 82%, rgba(207, 161, 147, .14), transparent 70%),
    radial-gradient(60% 44% at 68% 20%, rgba(255, 255, 255, .22), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
}

/* A microscopic surface texture so the layer feels material rather than flat. */
.info-panel::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, rgba(17,17,15,.018) 0, rgba(17,17,15,.018) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: soft-light;
}

.info-panel__inner {
  position: relative;
  z-index: 1;
}

.info-contacts {
  border-top-color: rgba(17, 17, 15, .14);
}
.contact-block {
  border-bottom-color: rgba(17, 17, 15, .10);
}
.contact-label {
  opacity: .46;
}
.info-inline-link {
  border-bottom-color: rgba(17, 17, 15, .28);
}
.info-inline-link:hover {
  border-bottom-color: currentColor;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .info-panel {
    background: rgba(236, 234, 230, .96);
  }
}

/* Version 42 — lighter, narrower Information glass */
.info-panel {
  width: min(580px, 100%);
  background:
    linear-gradient(135deg, rgba(242, 241, 237, .624) 0%, rgba(229, 228, 225, .56) 48%, rgba(238, 235, 232, .608) 100%);
  border-left: 0;
  box-shadow: none;
}

/* Let a little more of the moving work influence the pearlescent layer. */
.info-panel::before {
  background:
    radial-gradient(85% 58% at 18% 98%, rgba(154, 166, 178, .13), transparent 72%),
    radial-gradient(75% 48% at 84% 82%, rgba(207, 161, 147, .11), transparent 70%),
    radial-gradient(60% 44% at 68% 20%, rgba(255, 255, 255, .18), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, 0));
}

.info-panel::after {
  opacity: .13;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .info-panel {
    background: rgba(236, 234, 230, .77);
  }
}


/* Version 56 — homepage typography unified at 15px.
   Structural Mono titles and homepage Regular/Italic project captions share one size.
   Index project captions remain intentionally smaller for density. */


/* Version 58 — archive colophon / copyright */
.archive-copyright {
  grid-column: 1 / -1;
  justify-self: end;
  margin: 24px 0 0;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  word-spacing: -0.05em;
  white-space: nowrap;
}
.archive-copyright span {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
@media (max-width: 560px) {
  .archive-copyright {
    grid-column: 1;
    justify-self: end;
    margin-top: 20px;
    font-size: 9px;
  }
}

/* Version 59 — matching homepage colophon, anchored to the lower-right viewport edge */
.home-copyright {
  position: fixed;
  z-index: 39;
  right: var(--edge);
  bottom: var(--edge);
  margin: 0;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  word-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
  transition: color .45s var(--ease), opacity .35s var(--ease);
}
.home-copyright span {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
body.viewer-open .home-copyright { color: #f6f5f1; }
.home-intro .home-copyright {
  opacity: 0;
}
.home-intro.intro-text-visible .home-copyright {
  opacity: 1;
}
@media (max-width: 560px) {
  .home-copyright {
    right: var(--edge);
    bottom: var(--edge);
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-intro .home-copyright {
    opacity: 1 !important;
  }
}

/* Version 60 — slightly tighter copyright colophon spacing on both pages */


/* Version 61 — compact colophon spacing inspired by Serena Congiu.
   No gap after ©2026; Thomas Ralph keeps normal internal spacing;
   All Rights Reserved uses tighter word spacing. */
.archive-copyright,
.home-copyright {
  letter-spacing: -0.03em;
  word-spacing: 0;
}
.archive-copyright .copyright-name,
.home-copyright .copyright-name {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  margin-left: 0;
}
.archive-copyright .copyright-rights,
.home-copyright .copyright-rights {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-style: normal;
  font-weight: 400;
  word-spacing: -0.22em;
  letter-spacing: -0.03em;
}


/* Version 62 — smaller, more compact colophon.
   Restore the space after ©2026, close up the comma-to-rights gap,
   and tighten the wording while preserving the italic name. */
.archive-copyright,
.home-copyright {
  font-size: 9px;
  letter-spacing: -0.04em;
  word-spacing: -0.08em;
}
.archive-copyright .copyright-name,
.home-copyright .copyright-name {
  margin-left: 0;
  margin-right: 0;
  letter-spacing: -0.025em;
}
.archive-copyright .copyright-rights,
.home-copyright .copyright-rights {
  display: inline-block;
  margin-left: 0.10em;
  word-spacing: -0.30em;
  letter-spacing: -0.04em;
}
@media (max-width: 560px) {
  .archive-copyright,
  .home-copyright {
    font-size: 8px;
  }
}


/* Version 63 — remove home colophon and align Archive footer items on one line:
   Instagram left, email centered, copyright right. */
.home-copyright { display: none !important; }

.archive-contact.archive-contact--triple {
  grid-template-columns: auto 1fr auto;
  column-gap: clamp(18px, 2vw, 36px);
  align-items: end;
}
.archive-contact.archive-contact--triple .archive-contact__instagram {
  grid-column: 1;
  justify-self: start;
}
.archive-contact.archive-contact--triple .archive-contact__email {
  grid-column: 2;
  justify-self: center;
}
.archive-contact.archive-contact--triple .archive-copyright {
  grid-column: 3;
  justify-self: end;
  margin: 0;
}

@media (max-width: 980px) {
  .archive-contact.archive-contact--triple {
    grid-template-columns: auto auto;
    row-gap: 16px;
  }
  .archive-contact.archive-contact--triple .archive-contact__instagram {
    grid-column: 1;
    justify-self: start;
  }
  .archive-contact.archive-contact--triple .archive-contact__email {
    grid-column: 2;
    justify-self: end;
  }
  .archive-contact.archive-contact--triple .archive-copyright {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 6px;
  }
}

@media (max-width: 560px) {
  .archive-contact.archive-contact--triple {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .archive-contact.archive-contact--triple .archive-contact__instagram,
  .archive-contact.archive-contact--triple .archive-contact__email,
  .archive-contact.archive-contact--triple .archive-copyright {
    grid-column: 1;
    justify-self: start;
  }
  .archive-contact.archive-contact--triple .archive-copyright {
    margin-top: 0;
  }
}


/* Version 64 — colophon belongs in Information, not the public page footers.
   Archive contact returns to email-left / Instagram-right. */
.info-socials {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.info-colophon {
  margin: 0;
  color: inherit;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.04em;
  word-spacing: -0.08em;
  white-space: nowrap;
  text-align: right;
}
.info-colophon .copyright-name {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.info-colophon .copyright-rights {
  display: inline-block;
  margin-left: 0.10em;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-style: normal;
  font-weight: 400;
  word-spacing: -0.30em;
  letter-spacing: -0.04em;
}

@media (max-width: 560px) {
  .info-socials {
    align-items: flex-end;
    gap: 12px;
  }
  .info-colophon {
    font-size: 8px;
  }
}


/* Version 65 — more editorial Information composition + line-by-line reveal. */
.info-editorial.info-editorial--playful {
  width: 100%;
  margin: auto 0 0;
  padding-top: clamp(92px, 12vh, 152px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 7px;
  row-gap: 0;
  align-items: start;
}

.info-statement {
  margin: 0;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-size: 17px;
  line-height: 1.34;
  letter-spacing: .004em;
  font-weight: 400;
}
.info-statement em { font-style: italic; }

/* A little editorial tension without turning the bio into a poster. */
.info-statement--one {
  grid-column: 1 / 11;
}
.info-statement--two {
  grid-column: 2 / 13;
  margin-top: 27px;
}
.info-statement--three {
  grid-column: 1 / 12;
  margin-top: 30px;
}
.info-statement--four {
  grid-column: 3 / 13;
  margin-top: 29px;
}

/* Each designed line is its own clipping window, so the words drop into place. */
.info-line {
  display: block;
  overflow: hidden;
  min-height: 1.34em;
  white-space: nowrap;
}
.info-line__inner {
  display: block;
  transform: translate3d(0, -112%, 0);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .72s cubic-bezier(.16, 1, .3, 1),
    opacity .28s ease-out;
  transition-delay: calc(180ms + (var(--line-index) * 64ms));
}
.info-panel.is-copy-revealed .info-line__inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* The functional information arrives after the bio, keeping the opening focused on the words. */
.info-contacts,
.info-socials {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .46s var(--ease), transform .58s var(--ease);
}
.info-panel.is-copy-revealed .info-contacts {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 920ms;
}
.info-panel.is-copy-revealed .info-socials {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1010ms;
}

@media (max-width: 760px) {
  .info-editorial.info-editorial--playful {
    padding-top: 92px;
    display: block;
  }
  .info-statement {
    font-size: 16px;
    line-height: 1.42;
  }
  .info-statement--two,
  .info-statement--three,
  .info-statement--four {
    margin-top: 25px;
  }
  .info-statement--two { margin-left: 5vw; }
  .info-statement--three { margin-right: 4vw; }
  .info-statement--four { margin-left: 8vw; }
  .info-line {
    min-height: 1.42em;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .info-statement { font-size: 15px; }
  .info-statement--two,
  .info-statement--three,
  .info-statement--four { margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .info-line__inner,
  .info-contacts,
  .info-socials {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Version 66 — softer bottom-up line reveal + quieter contact typography. */
/* The bio now rises subtly into place rather than dropping from above. */
.info-line__inner {
  transform: translate3d(0, 48%, 0);
  opacity: 0;
  transition:
    transform .66s cubic-bezier(.16, 1, .3, 1),
    opacity .42s ease-out;
  transition-delay: calc(130ms + (var(--line-index) * 58ms));
}
.info-panel.is-copy-revealed .info-line__inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Contact emails: natural case, Affairs Mono, with less graphic shouting. */
.contact-block a {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 400;
}

/* Bring the functional information in with the same upward/fade logic. */
.info-contacts,
.info-socials {
  transform: translateY(6px);
}

/* Instagram + colophon share the exact same text baseline.
   The hover underline is absolutely positioned so it no longer lifts the link. */
.info-socials {
  align-items: baseline;
}
.info-socials a {
  position: relative;
  line-height: 1.2;
}
.info-socials a::after {
  position: absolute;
  left: 0;
  bottom: -6px;
  margin-top: 0;
}
.info-colophon {
  line-height: 1.2;
}

/* Version 67 — Information drawer typographic system:
   bio + contact labels + Instagram in Affairs Mono, with award/company names in Affairs Italic. */
.info-statement {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  letter-spacing: 0;
}
.info-statement em,
.info-statement .info-inline-link em {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.contact-label {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 400;
}

.contact-block a {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  text-transform: none;
  letter-spacing: .01em;
}

.info-socials a {
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 400;
}

/* Version 68 — tighter Mono bio, roomier support type, slower Information reveal. */
.info-statement {
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: -0.045em;
}
.info-statement--four {
  grid-column: 2 / 13;
}
.info-line {
  min-height: 1.32em;
}

/* Slower, softer rise: each line settles rather than snapping into place. */
.info-line__inner {
  transform: translate3d(0, 30%, 0);
  opacity: 0;
  transition:
    transform .92s cubic-bezier(.16, 1, .3, 1),
    opacity .72s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(170ms + (var(--line-index) * 105ms));
}
.info-panel.is-copy-revealed .info-line__inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Let the functional details arrive after the final bio line has settled. */
.info-contacts,
.info-socials {
  transform: translateY(5px);
  transition: opacity .72s var(--ease), transform .82s var(--ease);
}
.info-panel.is-copy-revealed .info-contacts {
  transition-delay: 1850ms;
}
.info-panel.is-copy-revealed .info-socials {
  transition-delay: 1970ms;
}

/* Supporting Information typography +1px; labels return to caps. */
.info-close {
  font-size: 16px;
}
.contact-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.contact-block a {
  font-size: 12px;
  letter-spacing: 0;
}
.info-socials a {
  font-size: 11px;
  letter-spacing: 0;
}
.info-colophon {
  font-size: 10px;
}

@media (max-width: 760px) {
  .info-statement {
    font-size: 14px;
    line-height: 1.38;
    letter-spacing: -0.04em;
  }
  .info-line { min-height: 1.38em; }
  .info-statement--four { margin-left: 6vw; }
  .contact-label { font-size: 10px; }
  .contact-block a { font-size: 11px; }
  .info-socials a { font-size: 11px; }
  .info-colophon { font-size: 9px; }
}

@media (max-width: 420px) {
  .info-statement { font-size: 13px; }
}

/* Version 69 — continuous Information reveal.
   The contact rows now pick up the motion before the final bio line has fully settled,
   so the whole drawer reads as one uninterrupted top-to-bottom sequence. */
.info-contacts {
  transition-delay: 0ms;
}
.info-panel.is-copy-revealed .info-contacts {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1320ms;
}

.contact-block {
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity .68s cubic-bezier(.22, .61, .36, 1),
    transform .78s cubic-bezier(.16, 1, .3, 1);
}
.info-panel.is-copy-revealed .contact-block {
  opacity: 1;
  transform: translateY(0);
}
.info-panel.is-copy-revealed .contact-block:nth-child(1) { transition-delay: 1370ms; }
.info-panel.is-copy-revealed .contact-block:nth-child(2) { transition-delay: 1480ms; }
.info-panel.is-copy-revealed .contact-block:nth-child(3) { transition-delay: 1590ms; }
.info-panel.is-copy-revealed .contact-block:nth-child(4) { transition-delay: 1700ms; }

.info-panel.is-copy-revealed .info-socials {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1810ms;
}

@media (prefers-reduced-motion: reduce) {
  .contact-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Version 70 — align contact typography sizes in Information drawer. */
.contact-label,
.contact-block a,
.info-socials a {
  font-size: 12px;
}

.info-colophon,
.info-colophon * {
  font-size: 10px;
}

/* Version 71 — frosted / pearlescent full-film viewer, matching Information drawer */
.viewer-backdrop {
  background:
    linear-gradient(135deg, rgba(242, 241, 237, .624) 0%, rgba(229, 228, 225, .56) 48%, rgba(238, 235, 232, .608) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(112%);
  backdrop-filter: blur(30px) saturate(112%);
  isolation: isolate;
}
.viewer-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 58% at 18% 98%, rgba(154, 166, 178, .13), transparent 72%),
    radial-gradient(75% 48% at 84% 82%, rgba(207, 161, 147, .11), transparent 70%),
    radial-gradient(60% 44% at 68% 20%, rgba(255, 255, 255, .18), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, 0));
}
.viewer-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    repeating-linear-gradient(0deg, rgba(17,17,15,.018) 0, rgba(17,17,15,.018) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: soft-light;
}

/* Film metadata becomes one clean line, matching Close in scale. */
.viewer-meta {
  color: var(--ink);
  align-items: baseline;
  padding-top: 13px;
}
.viewer-meta > div {
  display: flex;
  align-items: baseline;
  gap: .55em;
  min-width: 0;
}
.viewer-meta h1,
.viewer-meta p {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}
.viewer-meta h1 {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: normal;
}
.viewer-meta p {
  margin: 0;
  opacity: 1;
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
}
.viewer-close {
  color: var(--ink);
  flex: 0 0 auto;
}

/* Playback UI follows the light viewer rather than the old black overlay. */
.viewer-controls { color: var(--ink); }
.viewer-progress__track { background: rgba(17,17,15,.26); }
.viewer-progress__fill,
.viewer-progress::after { background: var(--ink); }
.viewer-time { opacity: .62; }

/* Avoid a black loading slab before the film is ready. */
.viewer-stage::before {
  background: rgba(236, 234, 230, .38);
}

/* Any persistent page UI glimpsed through the translucent viewer stays dark. */
body.viewer-open .site-header,
body.viewer-open .index-link { color: var(--ink); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .viewer-backdrop {
    background: rgba(236, 234, 230, .77);
  }
}

@media (max-width: 760px) {
  .viewer-meta h1,
  .viewer-meta p,
  .viewer-close { font-size: 15px; }
  .viewer-meta > div { gap: .45em; }
}


/* Version 73 — more legible homepage resolve: 96% → 100%, slightly slower fades. */


/* Version 75 — cleaner, brighter page background sampled from the supplied reference. */
:root { --page: #ffffff; }


/* Version 77 — Fraser Muggeridge Studio–influenced Information study.
   Content-led, asymmetrical typesetting with deliberate indents and active negative space.
   This is an interpretation of principles, not a copy of any specific FMS project. */
.info-editorial.info-editorial--fms {
  padding-top: clamp(88px, 11vh, 138px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 0;
}

.info-editorial--fms .info-statement {
  font-size: 14px;
  line-height: 1.26;
  letter-spacing: -0.055em;
  margin-top: 0;
}

/* Treat each paragraph as its own typographic object. */
.info-editorial--fms .info-statement--one {
  grid-column: 1 / 9;
  margin-top: 0;
}
.info-editorial--fms .info-statement--two {
  grid-column: 5 / 13;
  margin-top: 31px;
}
.info-editorial--fms .info-statement--three {
  grid-column: 2 / 11;
  margin-top: 34px;
}
.info-editorial--fms .info-statement--four {
  grid-column: 7 / 13;
  margin-top: 33px;
}

/* Small, purposeful line offsets: the text makes the layout. */
.info-editorial--fms .info-statement--one .info-line:nth-child(2) {
  margin-left: 11%;
}
.info-editorial--fms .info-statement--two .info-line:nth-child(2) {
  margin-left: 7%;
}
.info-editorial--fms .info-statement--two .info-line:nth-child(3) {
  margin-left: -4%;
}
.info-editorial--fms .info-statement--three .info-line:nth-child(2) {
  margin-left: 14%;
}
.info-editorial--fms .info-statement--three .info-line:nth-child(3) {
  margin-left: 4%;
}
.info-editorial--fms .info-statement--four .info-line:nth-child(2) {
  margin-left: 10%;
}

.info-editorial--fms .info-line {
  min-height: 1.26em;
  overflow: hidden;
}

/* Keep the italic names slightly softer than the mono body. */
.info-editorial--fms .info-statement em,
.info-editorial--fms .info-statement .info-inline-link em {
  letter-spacing: -0.012em;
}

/* Make the representation feel like marginal information, not a boxed footer. */
.info-editorial--fms ~ .info-contacts {
  border-top: 0;
  margin-top: clamp(42px, 6.2vh, 72px);
  padding-top: 0;
  column-gap: 14px;
}
.info-editorial--fms ~ .info-contacts .contact-block {
  border-bottom: 0;
  padding-bottom: 0;
}
.info-editorial--fms ~ .info-contacts .contact-label {
  margin-bottom: 5px;
  opacity: .42;
}

@media (max-width: 760px) {
  .info-editorial.info-editorial--fms {
    display: block;
    padding-top: 88px;
  }
  .info-editorial--fms .info-statement {
    font-size: 13px;
    line-height: 1.34;
  }
  .info-editorial--fms .info-statement--two,
  .info-editorial--fms .info-statement--three,
  .info-editorial--fms .info-statement--four {
    margin-top: 26px;
    margin-left: 0;
  }
  .info-editorial--fms .info-statement--two { margin-left: 9vw; }
  .info-editorial--fms .info-statement--three { margin-right: 7vw; }
  .info-editorial--fms .info-statement--four { margin-left: 17vw; }
  .info-editorial--fms .info-line {
    white-space: normal;
    min-height: 1.34em;
  }
  .info-editorial--fms .info-line:nth-child(n) {
    margin-left: 0 !important;
  }
}

@media (max-width: 420px) {
  .info-editorial--fms .info-statement--two,
  .info-editorial--fms .info-statement--three,
  .info-editorial--fms .info-statement--four {
    margin-left: 0;
    margin-right: 0;
  }
}


/* Version 78 — refined FMS-inspired Information composition.
   More asymmetry and editorial counterpoint, but every designed line is constrained
   to the drawer width so no copy is clipped. */
.info-editorial.info-editorial--fms-refined {
  padding-top: clamp(82px, 10vh, 126px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 0;
  overflow: visible;
}

.info-editorial--fms-refined .info-statement {
  font-size: 13px;
  line-height: 1.30;
  letter-spacing: -0.035em;
  width: 100%;
  max-width: 100%;
}
.info-editorial--fms-refined .info-line {
  min-height: 1.30em;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}
.info-editorial--fms-refined .info-line__inner {
  max-width: 100%;
}

/* Four distinct typographic objects, arranged as counterweights. */
.info-editorial--fms-refined .info-statement--one {
  grid-column: 1 / 9;
  justify-self: start;
  text-align: left;
  margin-top: 0;
}
.info-editorial--fms-refined .info-statement--one .info-line:nth-child(2) {
  margin-left: 10%;
}

.info-editorial--fms-refined .info-statement--two {
  grid-column: 4 / 13;
  justify-self: end;
  text-align: right;
  margin-top: 34px;
}
.info-editorial--fms-refined .info-statement--two .info-line:nth-child(1) {
  padding-right: 7%;
}
.info-editorial--fms-refined .info-statement--two .info-line:nth-child(2) {
  padding-right: 0;
  margin-left: 0;
}
.info-editorial--fms-refined .info-statement--two .info-line:nth-child(3) {
  padding-right: 5%;
  margin-left: 0;
}
.info-editorial--fms-refined .info-statement--two .info-line:nth-child(4) {
  padding-right: 12%;
}

.info-editorial--fms-refined .info-statement--three {
  grid-column: 1 / 11;
  justify-self: start;
  text-align: left;
  margin-top: 37px;
}
.info-editorial--fms-refined .info-statement--three .info-line:nth-child(2) {
  margin-left: 8%;
}
.info-editorial--fms-refined .info-statement--three .info-line:nth-child(3) {
  margin-left: 18%;
}
.info-editorial--fms-refined .info-statement--three .info-line:nth-child(4) {
  margin-left: 30%;
}

.info-editorial--fms-refined .info-statement--four {
  grid-column: 5 / 13;
  justify-self: end;
  text-align: left;
  margin-top: 38px;
}
.info-editorial--fms-refined .info-statement--four .info-line:nth-child(2) {
  margin-left: 18%;
}
.info-editorial--fms-refined .info-statement--four .info-line:nth-child(3) {
  margin-left: 7%;
}

/* Italic names remain regular Affairs, acting like changes of voice inside the Mono field. */
.info-editorial--fms-refined .info-statement em,
.info-editorial--fms-refined .info-statement .info-inline-link em {
  letter-spacing: -0.012em;
}

/* Keep the contact information visually marginal, but closer to the final text object. */
.info-editorial--fms-refined ~ .info-contacts {
  margin-top: clamp(38px, 5vh, 58px);
}

/* Re-time the longer 13-line sequence so it still reads continuously top-to-bottom. */
.info-editorial--fms-refined .info-line__inner {
  transform: translate3d(0, 26%, 0);
  transition:
    transform .84s cubic-bezier(.16, 1, .3, 1),
    opacity .66s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(120ms + (var(--line-index) * 74ms));
}
.info-panel.is-copy-revealed .info-editorial--fms-refined .info-line__inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.info-panel.is-copy-revealed .info-editorial--fms-refined ~ .info-contacts {
  transition-delay: 1500ms;
}
.info-panel.is-copy-revealed .info-editorial--fms-refined ~ .info-contacts .contact-block:nth-child(1) { transition-delay: 1530ms; }
.info-panel.is-copy-revealed .info-editorial--fms-refined ~ .info-contacts .contact-block:nth-child(2) { transition-delay: 1630ms; }
.info-panel.is-copy-revealed .info-editorial--fms-refined ~ .info-contacts .contact-block:nth-child(3) { transition-delay: 1730ms; }
.info-panel.is-copy-revealed .info-editorial--fms-refined ~ .info-contacts .contact-block:nth-child(4) { transition-delay: 1830ms; }
.info-panel.is-copy-revealed .info-editorial--fms-refined ~ .info-contacts + .info-socials {
  transition-delay: 1940ms;
}

@media (max-width: 760px) {
  .info-editorial.info-editorial--fms-refined {
    display: block;
    padding-top: 84px;
  }
  .info-editorial--fms-refined .info-statement {
    font-size: 13px;
    line-height: 1.34;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .info-editorial--fms-refined .info-statement--two,
  .info-editorial--fms-refined .info-statement--three,
  .info-editorial--fms-refined .info-statement--four {
    margin-top: 27px;
  }
  .info-editorial--fms-refined .info-line {
    min-height: 1.34em;
    white-space: normal;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }
  .info-editorial--fms-refined .info-statement--two { margin-left: 7vw; }
  .info-editorial--fms-refined .info-statement--three { margin-right: 5vw; }
  .info-editorial--fms-refined .info-statement--four { margin-left: 13vw; }
}

@media (max-width: 420px) {
  .info-editorial--fms-refined .info-statement--two,
  .info-editorial--fms-refined .info-statement--three,
  .info-editorial--fms-refined .info-statement--four {
    margin-left: 0;
    margin-right: 0;
  }
}


/* Version 79 — balanced FMS-inspired Information composition.
   Keep the useful asymmetry from V78, but reduce the number of typographic gestures:
   anchor → interruption → return → sign-off. */
.info-editorial.info-editorial--fms-refined {
  /* Pull the whole information composition upward without changing the drawer frame. */
  transform: translateY(-76px);
  margin-bottom: -76px;
  padding-top: clamp(72px, 8.5vh, 108px);
}

/* Let paragraph placement, rather than line-by-line nudges, create the composition. */
.info-editorial--fms-refined .info-line,
.info-editorial--fms-refined .info-line:nth-child(n) {
  margin-left: 0 !important;
  padding-right: 0 !important;
  text-align: left;
}

/* 1. Anchor: slightly more present and broad on the left. */
.info-editorial--fms-refined .info-statement--one {
  grid-column: 1 / 10;
  justify-self: start;
  text-align: left;
  font-size: 14px;
  margin-top: 0;
}

/* 2. Interruption: one decisive shift right, but left-aligned internally. */
.info-editorial--fms-refined .info-statement--two {
  grid-column: 5 / 13;
  justify-self: stretch;
  text-align: left;
  margin-top: 44px;
}

/* 3. Return: back across the drawer and deliberately close to paragraph two. */
.info-editorial--fms-refined .info-statement--three {
  grid-column: 2 / 11;
  justify-self: stretch;
  text-align: left;
  margin-top: 22px;
}

/* 4. Sign-off: the one stronger graphic gesture, kept narrow and right-biased. */
.info-editorial--fms-refined .info-statement--four {
  grid-column: 6 / 13;
  justify-self: stretch;
  text-align: left;
  margin-top: 52px;
}

/* The admin information follows the sign-off more closely, so it belongs to the same page. */
.info-editorial--fms-refined ~ .info-contacts {
  margin-top: clamp(24px, 3.2vh, 38px);
}

@media (max-width: 760px) {
  .info-editorial.info-editorial--fms-refined {
    transform: none;
    margin-bottom: 0;
    padding-top: 72px;
  }
  .info-editorial--fms-refined .info-statement--one {
    font-size: 14px;
  }
  .info-editorial--fms-refined .info-statement--two,
  .info-editorial--fms-refined .info-statement--three,
  .info-editorial--fms-refined .info-statement--four {
    margin-left: 0;
    margin-right: 0;
  }
  .info-editorial--fms-refined .info-statement--two { margin-top: 32px; margin-left: 8vw; }
  .info-editorial--fms-refined .info-statement--three { margin-top: 18px; }
  .info-editorial--fms-refined .info-statement--four { margin-top: 38px; margin-left: 14vw; }
}

@media (max-width: 420px) {
  .info-editorial--fms-refined .info-statement--two,
  .info-editorial--fms-refined .info-statement--four {
    margin-left: 0;
  }
}


/* Version 80 — representation as the fifth paragraph of the Information composition.
   Remove the administrative table feeling: no rules, no wide label/email columns.
   The four rep/contact lines become part of the same editorial grid and line reveal. */
.info-editorial--fms-refined .info-statement--five {
  grid-column: 2 / 12;
  justify-self: stretch;
  margin-top: 38px;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 12px;
  line-height: 1.48;
  letter-spacing: -0.018em;
  font-weight: 400;
  text-align: left;
}
.info-editorial--fms-refined .info-statement--five .info-line {
  min-height: 1.48em;
  white-space: nowrap;
  overflow: hidden;
}
.info-reps a {
  color: inherit;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
}
.info-reps a:hover { opacity: .55; }
.info-rep-label {
  color: rgba(17, 17, 15, .46);
  letter-spacing: -0.018em;
}
.info-rep-dash {
  color: rgba(17, 17, 15, .46);
}

/* The old contact table is no longer present; social/footer follows the fifth paragraph. */
.info-editorial--fms-refined + .info-socials {
  margin-top: clamp(22px, 2.8vh, 34px);
}
.info-panel.is-copy-revealed .info-editorial--fms-refined + .info-socials {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1640ms;
}

@media (max-width: 760px) {
  .info-editorial--fms-refined .info-statement--five {
    margin-top: 28px;
    font-size: 11px;
    line-height: 1.55;
  }
  .info-editorial--fms-refined .info-statement--five .info-line {
    min-height: 1.55em;
    white-space: normal;
  }
}


/* Version 81 — centre the five Information paragraphs as one composition.
   Equal vertical spacing, safer measures, footer remains pinned to the bottom. */
@media (min-width: 761px) {
  .info-panel__inner {
    position: relative;
  }

  .info-editorial.info-editorial--fms-refined {
    position: absolute;
    top: 50%;
    left: var(--edge);
    right: var(--edge);
    width: auto;
    max-width: none;
    margin: 0;
    padding-top: 0;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    column-gap: 8px;
    row-gap: clamp(28px, 3.1vh, 40px);
    align-content: center;
    overflow: visible;
  }

  .info-editorial--fms-refined .info-statement--one,
  .info-editorial--fms-refined .info-statement--two,
  .info-editorial--fms-refined .info-statement--three,
  .info-editorial--fms-refined .info-statement--four,
  .info-editorial--fms-refined .info-statement--five {
    margin-top: 0;
    margin-bottom: 0;
    min-width: 0;
  }

  .info-editorial--fms-refined .info-statement--one {
    grid-row: 1;
    grid-column: 1 / 9;
  }
  .info-editorial--fms-refined .info-statement--two {
    grid-row: 2;
    grid-column: 5 / 13;
  }
  .info-editorial--fms-refined .info-statement--three {
    grid-row: 3;
    grid-column: 2 / 10;
  }
  .info-editorial--fms-refined .info-statement--four {
    grid-row: 4;
    grid-column: 6 / 13;
  }
  .info-editorial--fms-refined .info-statement--five {
    grid-row: 5;
    grid-column: 2 / 10;
  }

  /* Designed lines stay single-line, but every measure is now wide enough to contain them. */
  .info-editorial--fms-refined .info-line {
    overflow: hidden;
    max-width: 100%;
  }

  /* Footer remains independent of the centred five-paragraph composition. */
  .info-editorial--fms-refined + .info-socials {
    margin-top: 0;
    align-self: end;
  }
}

/* On shorter desktop windows, preserve the centre idea but avoid footer collisions. */
@media (min-width: 761px) and (max-height: 780px) {
  .info-editorial.info-editorial--fms-refined {
    row-gap: 20px;
    transform: translateY(-48%);
  }
  .info-editorial--fms-refined .info-statement {
    font-size: 12px;
  }
  .info-editorial--fms-refined .info-statement--one {
    font-size: 13px;
  }
  .info-editorial--fms-refined .info-statement--five {
    font-size: 11px;
  }
}


/* Version 82 — fullscreen Information concept study.
   The Information layer no longer slides in: it fades over the whole site.
   Four large typographic statements form the composition; representation sits as a bottom baseline. */

.info-panel.info-panel--fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  min-height: 100vh;
  transform: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .72s;
  overflow: hidden;
}
.info-panel.info-panel--fullscreen.is-open {
  transform: none !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s;
}

.info-panel--fullscreen .info-panel__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: var(--edge);
  display: block;
  overflow: hidden;
}

.info-panel--fullscreen .info-close {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
  z-index: 4;
}

/* The four paragraphs become the page rather than sitting inside a text column. */
.info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
  position: absolute;
  inset: clamp(78px, 9vh, 118px) var(--edge) clamp(150px, 17vh, 188px);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  column-gap: clamp(8px, 1vw, 18px);
  row-gap: 0;
  align-items: center;
  overflow: visible;
}

.info-panel--fullscreen .info-statement {
  margin: 0;
  min-width: 0;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-align: left;
}
.info-panel--fullscreen .info-statement em,
.info-panel--fullscreen .info-inline-link em {
  font-family: "Affairs Local", "Affairs Test", "Affairs", Georgia, serif;
  font-style: italic;
  letter-spacing: -0.025em;
}

/* Four deliberately different scales/positions: graphic, but still readable. */
.info-panel--fullscreen .info-statement--one {
  grid-row: 1;
  grid-column: 1 / 7;
  align-self: end;
  font-size: clamp(24px, 2.35vw, 40px);
}
.info-panel--fullscreen .info-statement--two {
  grid-row: 2;
  grid-column: 6 / 13;
  align-self: center;
  font-size: clamp(20px, 1.8vw, 31px);
}
.info-panel--fullscreen .info-statement--three {
  grid-row: 3;
  grid-column: 2 / 9;
  align-self: center;
  font-size: clamp(21px, 2vw, 34px);
}
.info-panel--fullscreen .info-statement--four {
  grid-row: 4;
  grid-column: 7 / 13;
  align-self: start;
  font-size: clamp(23px, 2.15vw, 37px);
}

.info-panel--fullscreen .info-line {
  display: block;
  min-height: 1.06em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* Rather than the drawer arriving, the type materialises upward out of the glass. */
.info-panel--fullscreen .info-line__inner {
  display: block;
  transform: translate3d(0, 22px, 0);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .9s cubic-bezier(.16, 1, .3, 1),
    opacity .66s ease-out;
  transition-delay: calc(150ms + (var(--line-index) * 72ms));
}
.info-panel--fullscreen.is-copy-revealed .info-line__inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Representation becomes a calm horizontal credits line near the bottom. */
.info-panel--fullscreen .info-reps-row {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: calc(var(--edge) + 34px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 34px);
  align-items: end;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .62s ease-out, transform .78s cubic-bezier(.16, 1, .3, 1);
  transition-delay: 1130ms;
}
.info-panel--fullscreen.is-copy-revealed .info-reps-row {
  opacity: 1;
  transform: translateY(0);
}
.info-panel--fullscreen .info-rep-item {
  display: flex;
  align-items: baseline;
  gap: .55em;
  min-width: 0;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.info-panel--fullscreen .info-rep-item:nth-child(2),
.info-panel--fullscreen .info-rep-item:nth-child(3) {
  justify-self: center;
}
.info-panel--fullscreen .info-rep-item:last-child {
  justify-self: end;
}
.info-panel--fullscreen .info-rep-label {
  color: rgba(17, 17, 15, .48);
  flex: 0 0 auto;
}
.info-panel--fullscreen .info-rep-item a {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.info-panel--fullscreen .info-rep-item a:hover { opacity: .55; }

/* Existing Instagram/colophon remain the final, quiet baseline. */
.info-panel--fullscreen .info-socials {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: var(--edge);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .52s ease-out, transform .68s cubic-bezier(.16, 1, .3, 1);
  transition-delay: 1240ms;
}
.info-panel--fullscreen.is-copy-revealed .info-socials {
  opacity: 1;
  transform: translateY(0);
}

/* On narrower screens, keep the concept but let the page flow vertically. */
@media (max-width: 900px) {
  .info-panel--fullscreen .info-panel__inner {
    overflow-y: auto;
  }
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 110px 0 190px;
    display: block;
  }
  .info-panel--fullscreen .info-statement {
    font-size: clamp(20px, 4.3vw, 30px);
    line-height: 1.12;
    margin: 0 0 42px;
  }
  .info-panel--fullscreen .info-statement--two { margin-left: 10vw; }
  .info-panel--fullscreen .info-statement--three { margin-right: 6vw; }
  .info-panel--fullscreen .info-statement--four { margin-left: 16vw; }
  .info-panel--fullscreen .info-line {
    white-space: normal;
    min-height: 1.12em;
  }
  .info-panel--fullscreen .info-reps-row {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 62px;
  }
  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    justify-self: start;
    white-space: normal;
  }
  .info-panel--fullscreen .info-socials {
    position: absolute;
  }
}

@media (max-width: 560px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    padding-top: 94px;
  }
  .info-panel--fullscreen .info-statement {
    font-size: 19px;
    margin-bottom: 34px;
  }
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    margin-left: 0;
    margin-right: 0;
  }
  .info-panel--fullscreen .info-reps-row {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 74px;
  }
  .info-panel--fullscreen .info-rep-item {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-panel.info-panel--fullscreen,
  .info-panel--fullscreen .info-line__inner,
  .info-panel--fullscreen .info-reps-row,
  .info-panel--fullscreen .info-socials {
    transition: none !important;
  }
  .info-panel--fullscreen .info-line__inner,
  .info-panel--fullscreen .info-reps-row,
  .info-panel--fullscreen .info-socials {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Version 83 — coherent fullscreen Information refinement.
   One typographic scale for all four bio blocks; asymmetry comes from placement only.
   Representation is grouped into one compact bottom credits strip. */
.info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
  inset: clamp(92px, 10vh, 126px) clamp(28px, 3.2vw, 58px) clamp(142px, 16vh, 178px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  column-gap: clamp(12px, 1.25vw, 24px);
  row-gap: 0;
  align-items: center;
  overflow: visible;
}

.info-panel--fullscreen .info-statement,
.info-panel--fullscreen .info-statement--one,
.info-panel--fullscreen .info-statement--two,
.info-panel--fullscreen .info-statement--three,
.info-panel--fullscreen .info-statement--four {
  font-size: clamp(25px, 1.9vw, 34px);
  line-height: 1.09;
  letter-spacing: -0.035em;
  align-self: center;
  min-width: 0;
  max-width: none;
}

.info-panel--fullscreen .info-statement--one {
  grid-row: 1;
  grid-column: 1 / 7;
}
.info-panel--fullscreen .info-statement--two {
  grid-row: 2;
  grid-column: 7 / 13;
}
.info-panel--fullscreen .info-statement--three {
  grid-row: 3;
  grid-column: 2 / 8;
}
.info-panel--fullscreen .info-statement--four {
  grid-row: 4;
  grid-column: 7 / 13;
}

.info-panel--fullscreen .info-line {
  min-height: 1.09em;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
}
.info-panel--fullscreen .info-line__inner {
  width: fit-content;
  max-width: 100%;
}

/* Compact representation cluster: one coherent credits line instead of four distant anchors. */
.info-panel--fullscreen .info-reps-row {
  left: 50%;
  right: auto;
  bottom: calc(var(--edge) + 34px);
  width: max-content;
  max-width: calc(100vw - (var(--edge) * 2));
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(18px, 2vw, 34px);
  transform: translate(-50%, 8px);
  white-space: nowrap;
}
.info-panel--fullscreen.is-copy-revealed .info-reps-row {
  transform: translate(-50%, 0);
}
.info-panel--fullscreen .info-rep-item,
.info-panel--fullscreen .info-rep-item:nth-child(n) {
  display: inline-flex;
  justify-self: auto;
  align-items: baseline;
  gap: .45em;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.info-panel--fullscreen .info-rep-label {
  color: rgba(17, 17, 15, .48);
}

@media (max-width: 1180px) {
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    font-size: clamp(22px, 2.3vw, 29px);
  }
  .info-panel--fullscreen .info-reps-row {
    gap: 18px;
  }
  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    font-size: 10px;
  }
}

@media (max-width: 900px) {
  .info-panel--fullscreen .info-line {
    white-space: normal;
  }
  .info-panel--fullscreen .info-reps-row {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    transform: translateY(8px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin-bottom: 62px;
    white-space: normal;
  }
  .info-panel--fullscreen.is-copy-revealed .info-reps-row {
    transform: translateY(0);
  }
  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .info-panel--fullscreen .info-reps-row {
    grid-template-columns: 1fr;
  }
}

/* Version 84 — clean full-screen Information composition.
   Reset the four bio blocks into a balanced 2x2 editorial grid.
   All four use one typographic treatment; hierarchy comes from position and content only. */
.info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
  inset: clamp(104px, 11vh, 138px) clamp(44px, 4vw, 78px) clamp(156px, 18vh, 198px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(72px, 7vw, 132px);
  row-gap: clamp(64px, 8vh, 104px);
  align-content: center;
  align-items: start;
  overflow: visible;
}

.info-panel--fullscreen .info-statement,
.info-panel--fullscreen .info-statement--one,
.info-panel--fullscreen .info-statement--two,
.info-panel--fullscreen .info-statement--three,
.info-panel--fullscreen .info-statement--four {
  grid-row: auto;
  grid-column: auto;
  align-self: start;
  justify-self: start;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: clamp(25px, 1.7vw, 32px);
  line-height: 1.11;
  letter-spacing: -0.035em;
  text-align: left;
}

.info-panel--fullscreen .info-statement--one { grid-column: 1; grid-row: 1; }
.info-panel--fullscreen .info-statement--two { grid-column: 2; grid-row: 1; }
.info-panel--fullscreen .info-statement--three { grid-column: 1; grid-row: 2; }
.info-panel--fullscreen .info-statement--four { grid-column: 2; grid-row: 2; }

.info-panel--fullscreen .info-line {
  width: 100%;
  max-width: 100%;
  min-height: 1.11em;
  white-space: nowrap;
  overflow: visible;
}
.info-panel--fullscreen .info-line__inner {
  width: max-content;
  max-width: 100%;
}

/* Representation +1px, kept as one compact credits strip. */
.info-panel--fullscreen .info-rep-item,
.info-panel--fullscreen .info-rep-item:nth-child(n) {
  font-size: 13px;
}

/* Give the lowest baseline a safer frame so the colophon can never hit the viewport edge. */
.info-panel--fullscreen .info-socials {
  left: calc(var(--edge) + 8px);
  right: calc(var(--edge) + 18px);
  width: auto;
  max-width: none;
  overflow: visible;
}
.info-panel--fullscreen .info-colophon {
  flex: 0 0 auto;
  max-width: calc(100vw - 220px);
  margin-right: 0;
}

@media (max-width: 1180px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    column-gap: clamp(44px, 5vw, 72px);
    row-gap: clamp(52px, 7vh, 78px);
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    font-size: clamp(21px, 2.1vw, 26px);
  }
  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 104px 0 190px;
    display: block;
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    width: 100%;
    font-size: clamp(19px, 4vw, 25px);
    margin: 0 0 42px;
  }
  .info-panel--fullscreen .info-line {
    white-space: normal;
    overflow: hidden;
  }
  .info-panel--fullscreen .info-line__inner {
    width: auto;
    max-width: 100%;
  }
  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    font-size: 11px;
  }
  .info-panel--fullscreen .info-socials {
    left: var(--edge);
    right: var(--edge);
  }
}


/* Version 85 — fullscreen info top-right Instagram + centered colophon */
.info-panel--fullscreen .info-top-actions {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 5;
}

.info-panel--fullscreen .info-close {
  align-self: auto;
  margin: 0;
}

.info-panel--fullscreen .info-instagram-top {
  position: relative;
  font-size: inherit;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: none;
  color: inherit;
  text-decoration: none;
}

.info-panel--fullscreen .info-instagram-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.info-panel--fullscreen .info-instagram-top:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.info-panel--fullscreen .info-reps-row {
  bottom: calc(var(--edge) + 64px);
}

.info-panel--fullscreen .info-rep-item,
.info-panel--fullscreen .info-rep-item:nth-child(n) {
  font-size: 14px;
}

.info-panel--fullscreen .info-colophon-center-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge) + 28px);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - (var(--edge) * 2));
  text-align: center;
  z-index: 3;
}

.info-panel--fullscreen .info-colophon--center {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.info-panel--fullscreen .info-socials {
  display: none;
}

@media (max-width: 1180px) {
  .info-panel--fullscreen .info-top-actions {
    gap: 8px;
  }
  .info-panel--fullscreen .info-reps-row {
    bottom: calc(var(--edge) + 72px);
    gap: 16px;
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
  }
  .info-panel--fullscreen .info-colophon-center-wrap {
    bottom: calc(var(--edge) + 28px);
  }
}

@media (max-width: 820px) {
  .info-panel--fullscreen .info-instagram-top,
  .info-panel--fullscreen .info-close {
    font-size: 13px;
  }
  .info-panel--fullscreen .info-reps-row {
    bottom: calc(var(--edge) + 82px);
    width: calc(100vw - (var(--edge) * 2));
    max-width: calc(100vw - (var(--edge) * 2));
    gap: 10px 14px;
  }
  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    font-size: 13px;
  }
  .info-panel--fullscreen .info-colophon--center {
    font-size: 11px;
    white-space: normal;
  }
}


/* Version 86 — Instagram top-left, Close restored top-right, lower centered colophon */
.info-panel--fullscreen .info-top-actions { display: contents; }

.info-panel--fullscreen .info-instagram-top {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  right: auto;
  z-index: 5;
  font-family: "Affairs Mono Local", "Affairs Test Mono", "Affairs Mono", monospace;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  color: inherit;
  text-decoration: none;
}

.info-panel--fullscreen .info-close {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
  left: auto;
  z-index: 5;
  margin: 0;
  align-self: auto;
}

.info-panel--fullscreen .info-colophon-center-wrap {
  bottom: calc(var(--edge) + 10px);
}

@media (max-width: 820px) {
  .info-panel--fullscreen .info-instagram-top,
  .info-panel--fullscreen .info-close {
    font-size: 13px;
  }
  .info-panel--fullscreen .info-colophon-center-wrap {
    bottom: calc(var(--edge) + 8px);
  }
}

/* Version 87 — align bottom colophon inset with top header inset */
.info-panel--fullscreen .info-colophon-center-wrap {
  bottom: var(--edge);
}


/* Version 88 — strict editorial 2×2 Information grid.
   One typographic system; geometry provides the hierarchy. */
@media (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(88vw, 1500px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: clamp(80px, 6vw, 118px);
    row-gap: clamp(68px, 7.5vh, 92px);
    align-items: start;
    align-content: start;
    overflow: visible;
  }

  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    justify-self: stretch;
    align-self: start;
    font-size: clamp(24px, 1.55vw, 28px);
    line-height: 1.10;
    letter-spacing: -0.022em;
    text-align: left;
  }

  .info-panel--fullscreen .info-statement--one { grid-column: 1; grid-row: 1; }
  .info-panel--fullscreen .info-statement--two { grid-column: 2; grid-row: 1; }
  .info-panel--fullscreen .info-statement--three { grid-column: 1; grid-row: 2; }
  .info-panel--fullscreen .info-statement--four { grid-column: 2; grid-row: 2; }

  .info-panel--fullscreen .info-line {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 1.10em;
    white-space: nowrap;
    overflow: visible;
  }

  .info-panel--fullscreen .info-line__inner {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

/* Keep the practical details calm and subordinate to the centred spread. */
.info-panel--fullscreen .info-reps-row {
  bottom: calc(var(--edge) + 52px);
}

.info-panel--fullscreen .info-colophon-center-wrap {
  bottom: var(--edge);
}


/* Version 89 — single editorial text field.
   Three paragraphs, one left edge, varied measure only; no forced column symmetry. */
@media (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(72vw, 1120px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(32px, 4.2vh, 48px);
    overflow: visible;
  }

  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: clamp(25px, 1.65vw, 30px);
    line-height: 1.14;
    letter-spacing: -0.022em;
    text-align: left;
    grid-column: auto;
    grid-row: auto;
  }

  .info-panel--fullscreen .info-statement--one { width: min(62%, 660px); }
  .info-panel--fullscreen .info-statement--two { width: min(100%, 1120px); }
  .info-panel--fullscreen .info-statement--three { width: min(92%, 1010px); }

  .info-panel--fullscreen .info-line {
    display: block;
    width: 100%;
    min-height: 1.14em;
    white-space: nowrap;
    overflow: visible;
  }

  .info-panel--fullscreen .info-line__inner {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    width: min(82vw, 1040px);
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three {
    font-size: clamp(22px, 2vw, 27px);
  }
}

@media (max-width: 900px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: auto;
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three {
    width: 100%;
    font-size: clamp(19px, 4.8vw, 24px);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }
  .info-panel--fullscreen .info-line {
    white-space: normal;
  }
}


/* Version 90 — centred bio composition based on the supplied reference. */
@media (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 1540px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(44px, 5.5vh, 62px);
    overflow: visible;
  }

  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    font-size: clamp(27px, 1.9vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.024em;
    text-align: center;
    align-self: center;
  }

  .info-panel--fullscreen .info-statement--one { max-width: 940px; }
  .info-panel--fullscreen .info-statement--two { max-width: 1480px; }
  .info-panel--fullscreen .info-statement--three { max-width: 1420px; }

  .info-panel--fullscreen .info-line {
    display: block;
    width: 100%;
    min-height: 1.12em;
    white-space: nowrap;
    overflow: visible;
    text-align: center;
  }

  .info-panel--fullscreen .info-line__inner {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    width: min(94vw, 1160px);
    gap: 42px;
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three {
    font-size: clamp(23px, 2.25vw, 29px);
  }
}

@media (max-width: 900px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three {
    width: 100%;
    max-width: 680px;
    font-size: clamp(19px, 4.8vw, 24px);
    line-height: 1.17;
    letter-spacing: -0.02em;
    text-align: center;
  }
  .info-panel--fullscreen .info-line {
    white-space: normal;
    text-align: center;
  }
}


/* Version 93 — centred object, left-aligned bio. */
.info-panel--fullscreen .info-rep-item,
.info-panel--fullscreen .info-rep-item:nth-child(n) {
  font-size: 15px;
}

@media (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(86vw, 900px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(30px, 3.7vh, 38px);
    overflow: visible;
  }

  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    font-size: clamp(24px, 1.55vw, 28px);
    line-height: 1.14;
    letter-spacing: -0.022em;
    text-align: left;
    align-self: stretch;
  }

  .info-panel--fullscreen .info-line {
    display: block;
    width: 100%;
    min-height: 1.14em;
    white-space: nowrap;
    overflow: visible;
    text-align: left;
  }

  .info-panel--fullscreen .info-line__inner {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    width: min(84vw, 820px);
    gap: 30px;
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    font-size: clamp(22px, 2vw, 26px);
  }
}

@media (max-width: 900px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    left: var(--edge);
    right: var(--edge);
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three,
  .info-panel--fullscreen .info-statement--four {
    width: 100%;
    max-width: none;
    font-size: clamp(18px, 4.2vw, 23px);
    line-height: 1.17;
    letter-spacing: -0.02em;
    text-align: left;
  }
  .info-panel--fullscreen .info-line {
    white-space: normal;
    text-align: left;
  }
  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    font-size: 13px;
  }
}


/* Version 94 — Scullion-inspired information placement.
   The page is allowed to stay mostly empty; the bio becomes one quiet top-right column. */
.info-panel--fullscreen .info-instagram-top {
  display: none !important;
}

@media (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: absolute;
    top: clamp(112px, 14vh, 156px);
    right: var(--edge);
    left: auto;
    bottom: auto;
    transform: none;
    width: min(43vw, 690px);
    max-width: calc(100vw - (var(--edge) * 2));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(25px, 3.2vh, 36px);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: clamp(19px, 1.28vw, 23px);
    line-height: 1.18;
    letter-spacing: -0.018em;
    text-align: left;
    align-self: stretch;
  }

  .info-panel--fullscreen .info-line {
    display: block;
    width: 100%;
    min-height: 1.18em;
    white-space: nowrap;
    overflow: visible;
    text-align: left;
  }

  .info-panel--fullscreen .info-line__inner {
    display: inline-block;
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    width: min(48vw, 620px);
    top: clamp(104px, 13vh, 138px);
    gap: 26px;
  }
  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three {
    font-size: clamp(18px, 1.55vw, 21px);
  }
}

@media (max-width: 900px) {
  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    width: auto;
    margin: 0;
    padding: 104px 0 190px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .info-panel--fullscreen .info-statement,
  .info-panel--fullscreen .info-statement--one,
  .info-panel--fullscreen .info-statement--two,
  .info-panel--fullscreen .info-statement--three {
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: 0;
    font-size: clamp(18px, 4.4vw, 22px);
    line-height: 1.18;
    text-align: left;
  }

  .info-panel--fullscreen .info-line {
    white-space: normal;
    text-align: left;
  }
}

/* Compact Information footer: keep credits in flow, below the biography. */
@media (max-width: 900px) {
  .info-panel--fullscreen .info-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
  }

  .info-panel--fullscreen .info-editorial.info-editorial--fullscreen {
    flex: 0 0 auto;
    padding-bottom: 64px;
  }

  .info-panel--fullscreen .info-reps-row {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    margin: auto 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
  }

  .info-panel--fullscreen .info-rep-item,
  .info-panel--fullscreen .info-rep-item:nth-child(n) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    line-height: 1.3;
  }

  .info-panel--fullscreen .info-rep-item a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .info-panel--fullscreen .info-colophon-center-wrap {
    position: relative;
    inset: auto;
    transform: none;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin-top: 32px;
    padding-bottom: 8px;
  }

  .info-panel--fullscreen .info-colophon--center {
    max-width: none;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
  }
}

@media (max-width: 560px) {
  .info-panel--fullscreen .info-reps-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Let the homepage reel grow beyond its laptop-sized cap on large displays. */
@media (min-width: 1600px) {
  :root { --card-width: clamp(716px, calc(50vw - 84px), 1800px); }
}

/* Constrain both dimensions together so height limits cannot add side bars. */
.viewer {
  --film-ratio: 1.7777777778;
  --film-max-height: 78dvh;
  --film-max-width: 88vw;
}
.viewer .viewer-stage {
  width: min(var(--film-max-width), 1500px, calc(var(--film-max-height) * var(--film-ratio)));
}
.viewer .viewer-video,
.viewer .viewer-mux {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: var(--film-ratio);
  object-fit: contain;
}
@media (max-width: 760px) {
  .viewer {
    --film-max-height: 72dvh;
    --film-max-width: calc(100vw - 24px);
  }
}

/* White playback controls stay legible over the moving image. */
.viewer-controls {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
.viewer-control, .viewer-time { opacity: 1; }
.viewer-progress__track {
  background: rgba(255,255,255,.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.viewer-progress__fill,
.viewer-progress::after {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.project:focus-visible, .grid-project:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.viewer-controls:focus-within { opacity:1; transform:none; }
@media (pointer:coarse) { .viewer-progress { min-height:44px; } .viewer-control, .viewer-close { min-height:44px; } }

/* Project anchors preserve the established card appearance. */
a.project, a.grid-project { display: block; color: inherit; text-decoration: none; }

/* Film sharing and delayed loading feedback. */
.film-load-status {position:absolute;left:18px;top:18px;color:white;text-shadow:0 1px 4px #000;font:11px "Affairs Mono Local",monospace;pointer-events:none;z-index:3;}
.viewer .viewer-mux {opacity:1;}
@media(max-width:760px) { .viewer-meta {flex-wrap:wrap;gap:8px;} }

.viewer-controls, .film-player .viewer-controls {grid-template-columns:auto minmax(0,1fr) auto auto;}
.film-fullscreen {display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:4px;color:inherit;pointer-events:auto;}
.film-fullscreen[hidden] {display:none;}
.film-fullscreen:focus-visible {outline:1px solid currentColor;outline-offset:2px;}
.viewer-stage:fullscreen,.film-player:fullscreen {width:100vw!important;height:100dvh!important;max-width:none!important;background:#000;display:flex;align-items:center;justify-content:center;transform:none!important;}
.viewer-stage:fullscreen .viewer-video,.viewer-stage:fullscreen .viewer-mux,.film-player:fullscreen mux-player {width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain;--media-object-fit:contain;opacity:1;}
.viewer-stage:fullscreen .viewer-meta {display:none;}
.viewer-stage:fullscreen .viewer-controls,.film-player:fullscreen .viewer-controls {bottom:24px;left:24px;right:24px;}
@media(pointer:coarse) {.film-fullscreen {width:44px;height:44px;}}

/* Homepage: the selected preview grows into the film. Archive is unchanged. */
.viewer.home-expand .viewer-stage {transform-origin:top left;transition:none;}
.home-film-frame {position:absolute;top:0;left:0;width:100%;aspect-ratio:16 / 9;height:auto;object-fit:cover;z-index:1;pointer-events:none;}
.viewer.home-expanding .viewer-controls,.viewer.home-expanding .viewer-meta {opacity:0!important;transform:translateY(6px);pointer-events:none;}
.viewer.home-expand:not(.home-expanding) .viewer-meta {transition:opacity .4s ease,transform .4s ease;}
/* Match the subtle preview corners, including the expansion frame. */
.viewer-video, .viewer-mux, .home-film-frame, .film-player > mux-player {
  border-radius: 4px;
  clip-path: inset(0 round 4px);
}
.viewer-stage:fullscreen .viewer-video,
.viewer-stage:fullscreen .viewer-mux,
.film-player:fullscreen > mux-player {
  border-radius: 0;
  clip-path: none;
}
/* Let the backdrop leave with the shrinking film, rather than afterwards. */
.viewer.is-open.is-contracting .viewer-backdrop {opacity:0;transition-duration:var(--contract-duration,380ms);transition-timing-function:cubic-bezier(.4,0,.2,1);}
.grid-project__media {position:relative;}
.preview-poster-fade {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:1;transition:opacity .4s ease;transform:scale(1.015);}
.project-media .preview-poster-fade {transform:scale(var(--media-scale,1.035));}
.preview-poster-fade.is-playing {opacity:0;}
@media(prefers-reduced-motion:reduce) {.preview-poster-fade {transition:none;}}

/* Give the final Archive row breathing room after its captions. */
.index-page .work-index { padding-bottom: clamp(44.8px, 5.6vw, 84px); }

/* The poster is the loading surface; no rectangular layer below the film. */
.viewer-stage::before { content:none; }
@media (pointer:coarse) {
 .viewer .viewer-stage, .viewer.is-open .viewer-stage { transform:none; }
 .viewer .viewer-mux { --media-object-fit:contain; }
}

/* Avoid a black host surface showing at fractional video edges on iOS. */
.viewer .viewer-mux,
.film-player > mux-player {
  background: transparent;
  border: 0;
  box-shadow: none;
  --media-background-color: transparent;
}
.viewer .viewer-mux::part(video),
.film-player > mux-player::part(video) {
  background: transparent;
  border: 0;
  box-shadow: none;
}