/* ---------- Fonts ---------- */
@font-face {
  font-family: "Machine";
  src: url("assets/fonts/MachineStd.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arial Narrow";
  src: local("Arial Narrow"), url("assets/fonts/ArialNarrow.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #000;
  --cream: #e4e9d5;
  --text: #a7a7a7;
  --muted: #8f8f8f;
  --rule: #393939;
  --placeholder: #1a1a1a;
  --link-dim: #5c5c5c;   /* darkest tone of the link pulse */

  --gutter: clamp(16px, 4.1vw, 48px);
  --body-size: clamp(18px, 4.85vw, 96px);
  --strip-h: clamp(260px, 42vw, 620px);
  --frame-gap: clamp(16px, 4.2vw, 56px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Machine", "Impact", "Haettenschweiler", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--cream); outline-offset: 4px; }

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 var(--gutter);
}

/* ---------- Logo ---------- */
.logo {
  margin: 0;
  padding: clamp(14px, 2.7vw, 40px) var(--gutter);  /* edges align with the divider line */
}
.logo img { width: 100%; }
.logo__svg { display: block; width: 100%; height: auto; color: var(--text); overflow: visible; }

/* Logo intro: characters cut in one by one (driven by script.js) */
.js .logo__svg .ch { opacity: 0; transition: opacity 140ms ease-out; }
.js .logo__svg .ch.is-on { opacity: 1; }
.masthead .logo { padding-bottom: clamp(24px, 5.6vw, 64px); }
.logo--flipped { padding-top: clamp(24px, 4.5vw, 56px); }
.logo--flipped img, .logo--flipped .logo__svg { transform: scaleY(-1); }

/* ---------- Bio ---------- */
.bio {
  padding: clamp(28px, 6vw, 80px) var(--gutter) 0;
  max-width: calc(15.6em + 2 * var(--gutter));
  font-size: var(--body-size);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.bio p { margin: 0 0 1.2em; text-wrap: pretty; }
.bio p:last-child { margin-bottom: 0; }
.bio a {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  transition: color .2s ease;
}
.bio a:hover { color: var(--cream); }

/* Slow, subtle pulse on linked words — every link starts at the full text tone, then begins pulsing on a stagger */
.bio a { animation: link-pulse 5.5s ease-in-out infinite; }
.bio p:nth-child(3) a { animation-delay: 1.8s; }
.bio p:nth-child(4) a { animation-delay: 3.6s; }
.bio a:hover, .bio a:focus-visible { animation: none; color: var(--cream); }
@keyframes link-pulse {
  0%, 100% { color: var(--text); }
  50%      { color: var(--link-dim); }
}

/* Mobile: jumbo bio at a fixed size, ragging naturally (desktop line breaks switched off) */
@media (max-width: 600px) {
  :root { --body-size: 30px; }
  .bio { max-width: none; }
  .bio br { display: none; }
}

/* ---------- Gallery ---------- */
.gallery { margin-top: clamp(64px, 12vw, 160px); }
.gallery__track {
  overflow: hidden;
  touch-action: pan-y;          /* vertical swipes scroll the page; horizontal ones drive the carousel */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.gallery__track.is-dragging { cursor: grabbing; }
.gallery__track.is-dragging a { pointer-events: none; }
.gallery__rail {
  display: flex;
  align-items: flex-start;
  gap: var(--frame-gap);
  width: max-content;
  will-change: transform;
}

.frame {
  flex: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.frame img {
  height: var(--strip-h);
  width: auto;
  max-width: none;
  background: var(--placeholder);   /* only while loading */
  -webkit-user-drag: none;
}
.frame img.is-loaded { background: none; }   /* transparent PNGs show the page behind them */
.frame__placeholder {
  height: var(--strip-h);
  background: var(--placeholder);
}
.frame figcaption {
  width: 0;           /* caption never widens the frame beyond its image */
  min-width: 100%;
  margin-top: 10px;
  font-family: "Arial Narrow", "Arial", sans-serif;
  font-size: clamp(10px, 0.95vw, 13px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
}

/* Mobile carousel: taller strip, equal heights. A portrait frame fills most of the
   screen width with neighbours peeking in; landscape frames may run wider than the screen. */
@media (max-width: 600px) {
  :root { --strip-h: min(108vw, 70vh); }
}

/* ---------- Contact ---------- */
.contact {
  margin: clamp(80px, 12.5vw, 180px) 0 0;
  text-align: center;
  text-transform: uppercase;
}
.contact h2 {
  margin: 0 0 1.4em;
  font-size: clamp(18px, calc(1.15vw + 8px), 22px);  /* matches the contact links */
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
}
.contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Arial Narrow", "Arial", sans-serif;
  font-size: clamp(18px, calc(1.15vw + 8px), 22px);
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.contact a { text-decoration: none; transition: color .2s ease; }
.contact a:hover { color: var(--cream); }

/* ---------- Feature image ---------- */
.feature {
  width: 28vw;
  margin: 0 auto;
  padding: clamp(80px, 12.5vw, 180px) 0 clamp(120px, 16vw, 280px);  /* top matches the space above Contact; generous bottom */
  box-sizing: content-box;
}
.feature img { width: 100%; height: auto; }

/* ---------- Background flashes ---------- */
.flash-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.masthead, main, .footer { position: relative; z-index: 1; }

.flash {
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.flash--placeholder { background: var(--flash-gray, #3a3a3a); }  /* gray only for placeholders; real images keep their transparency */
.flash img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flash--placeholder::after {
  content: attr(data-label);
  position: absolute;
  left: 10px; bottom: 8px;
  font-family: "Arial Narrow", "Arial", sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.35);
}

/* ---------- Footer ---------- */
.footer { padding-bottom: 0; }  /* space below the footer logo mirrors the space above the header logo */

@media (prefers-reduced-motion: reduce) {
  .bio a { animation: none; }
  .js .logo__svg .ch { opacity: 1; }
  .flash-layer { display: none; }
  * { scroll-behavior: auto !important; transition: none !important; }
}