@font-face {
  font-family: "ABC Diatype Edu";
  src: url("assets/fonts/ABCDiatypeEdu-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Outer page gutter — narrows on mobile. */
  --gutter: 20px;

  /* Figma reference dimensions of the image-container slot. */
  --ic-aspect-w: 1121;
  --ic-aspect-h: 724.628;

  /* Three-column grid (desktop) — 679 / 460 / 549 of 1688 inner width. */
  --col-bio: 40.225%;
  --col-gap: 27.249%;
  --col-right: 32.526%;

  /* Typography — fixed at each breakpoint. */
  --fs-top: 18.327px;
  --fs-about: 16px;
  --fs-bio: 34px;
  --fs-link: 34px;
  --fs-arrow: 21.93px;
  --fs-fine: 18px;
  --fl-fine: 22px;
  --fs-cursor: 83.19px;

  --content-top: 60px;
  --bio-p-margin: 16px;
  --contact-gap: 8px;

  /* Gap between image-container and wordmark, per the desktop spec. */
  --gap-above-wordmark: 40px;

  /* Backdrop blur strength on the About overlay. */
  --about-blur: 82px;

  /* Driven by JS each resize. */
  --scale: 1;
  --wordmark-fs: 100px;
  --wordmark-h: 100px;
  --wordmark-baseline-offset: 0px;
  --wordmark-left-bearing: 0px;

  --font: "ABC Diatype Edu", "ABC Diatype", "Inter", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --link: #0000ff;
}

/* ── Breakpoints ──────────────────────────────────────────── */

@media (max-width: 1439px) {
  :root {
    --fs-top: 15px;
    --fs-about: 14px;
    --fs-bio: 26px;
    --fs-link: 26px;
    --fs-arrow: 17px;
    --fs-fine: 15px;
    --fl-fine: 19px;
    --fs-cursor: 64px;
    --content-top: 48px;
    --bio-p-margin: 13px;
  }
}

@media (max-width: 1023px) {
  :root {
    --fs-top: 13px;
    --fs-about: 12px;
    --fs-bio: 19px;
    --fs-link: 19px;
    --fs-arrow: 13px;
    --fs-fine: 13px;
    --fl-fine: 16px;
    --fs-cursor: 44px;
    --content-top: 42px;
    --bio-p-margin: 11px;
    --contact-gap: 6px;
  }
}

/* MOBILE — stacked About content, full-width image, smaller gutter. */
@media (max-width: 640px) {
  :root {
    --gutter: 10px;
    --fs-top: 12px;
    --fs-about: 12px;
    --fs-bio: 22px;
    --fs-link: 16px;
    --fs-arrow: 10.32px;
    --fs-fine: 12px;
    --fl-fine: 14.4px;
    --fs-cursor: 32px;
    --content-top: 39px;
    --bio-p-margin: 16px;
    --contact-gap: 4px;
    --gap-above-wordmark: 16px;
    --about-blur: 25px;
  }
}

* {
  box-sizing: border-box;
}

/* ── Body becomes the absolute-positioning context.
      Using 100svh + position relative + overflow hidden means iOS Safari's
      bottom URL bar can never cover the wordmark or other bottom-pinned
      content — the body never extends behind it.                            */
html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #000;
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  width: 100vw;
  width: 100svw;
}

html {
  height: 100vh;
  height: 100svh;
}

body {
  position: relative;
  height: 100vh;
  height: 100svh;
}

/* ── Top bar ─────────────────────────────────────────────── */

.top-bar {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  grid-template-columns: var(--col-bio) var(--col-gap) var(--col-right);
  align-items: start;
  z-index: 30;
  pointer-events: none;
}

@media (max-width: 640px) {
  .top-bar {
    grid-template-columns: 1fr auto;
    column-gap: 10px;
  }
}

.top-bar__label,
.top-bar__about {
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
}

.top-bar__label {
  grid-column: 1;
  font-size: var(--fs-top);
}

.top-bar__about {
  grid-column: 3;
  justify-self: start;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  font-size: var(--fs-about);
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}

@media (max-width: 640px) {
  .top-bar__about {
    grid-column: 2;
  }
}

.top-bar__about-glyph {
  display: inline-block;
  min-width: 0.6em;
  text-align: center;
}

/* ── Image container (slideshow) ─────────────────────────── */

.image-container {
  position: absolute;
  left: var(--gutter);
  bottom: calc(
    var(--gutter)
    + var(--wordmark-h)
    - var(--wordmark-baseline-offset)
    + var(--gap-above-wordmark)
  );
  width: calc(var(--ic-aspect-w) * 1px * var(--scale));
  height: calc(var(--ic-aspect-h) * 1px * var(--scale));
  background: #000;
  overflow: hidden;
  z-index: 10;
  cursor: none;
}

/* Mobile — image is centred both horizontally and vertically in the
   viewport, matching the Figma mobile mock where the slideshow sits in
   the middle of the screen rather than pinned to the wordmark. */
@media (max-width: 640px) {
  .image-container {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: none;
  user-select: none;
  -webkit-user-drag: none;
}

.slide.is-active {
  opacity: 1;
}

/* ── Custom cursor label (PLAY / PAUSE) ──────────────────── */

.cursor-label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-cursor);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #ffffff;
  mix-blend-mode: difference;
  z-index: 1000;
  opacity: 0;
  user-select: none;
  white-space: nowrap;
  transform: translate(-9999px, -9999px);
  will-change: transform, opacity;
}

.cursor-label.is-visible {
  opacity: 1;
}

/* ── Wordmark — the one piece of text that scales fluidly ── */

.logo {
  position: absolute;
  /* Shift the element LEFT by the measured left side-bearing so the
     visual edge of "E" lands exactly on the gutter. JS sizes the text
     so the ink span equals (viewport − 2 × gutter), which guarantees
     the right edge of "O" lands on the opposite gutter as well. */
  left: calc(var(--gutter) - var(--wordmark-left-bearing));
  bottom: calc(var(--gutter) - var(--wordmark-baseline-offset));
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}

.logo__text {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--wordmark-fs);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  display: block;
}

/* ── About overlay ───────────────────────────────────────── */

.about-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.about-overlay__blur {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(var(--about-blur));
  -webkit-backdrop-filter: blur(var(--about-blur));
  opacity: 0;
  transition: opacity 280ms ease;
}

.about-overlay__content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: var(--content-top);
  bottom: calc(
    var(--gutter)
    + var(--wordmark-h)
    - var(--wordmark-baseline-offset)
    + 8px
  );
  display: grid;
  grid-template-columns: var(--col-bio) var(--col-gap) var(--col-right);
  align-items: start;
  opacity: 0;
  transition: opacity 220ms ease 80ms;
}

/* Mobile — stack bio above contact with space-between. */
@media (max-width: 640px) {
  .about-overlay__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }
}

.is-about-open .about-overlay__blur,
.is-about-open .about-overlay__content {
  opacity: 1;
}

.is-about-open .about-overlay {
  pointer-events: auto;
}

.about-overlay__bio {
  grid-column: 1;
  font-size: var(--fs-bio);
  line-height: 1.2;
  font-weight: 300;
  color: #000;
}
.about-overlay__bio p {
  margin: 0 0 var(--bio-p-margin) 0;
}
.about-overlay__bio p:last-child {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .about-overlay__bio {
    width: 100%;
  }
}

.about-overlay__contact {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--contact-gap);
  font-feature-settings: "ss09", "ss11";
}
@media (max-width: 640px) {
  .about-overlay__contact {
    width: 100%;
    /* Spread links + fine print across the available column height
       like the Figma mobile design. */
    justify-content: space-between;
    /* Minimum height so the spread looks like the mock; otherwise the
       flex column collapses to its intrinsic height. */
    flex: 0 0 auto;
  }
}

.about-overlay__link {
  font-size: var(--fs-link);
  line-height: 1.2;
  color: var(--link);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}
.about-overlay__link:hover {
  text-decoration: underline;
}

.about-overlay__arrow {
  font-size: var(--fs-arrow);
  color: var(--link);
}
.about-overlay__arrow--dark {
  color: #000;
}

.about-overlay__fine {
  margin: 0;
  font-size: var(--fs-fine);
  line-height: var(--fl-fine);
  color: #000;
  font-feature-settings: normal;
  width: 100%;
}

@media (max-width: 640px) {
  /* In the Figma mobile mock the fine print is narrower than the column;
     keep it at ~55% so it wraps naturally. */
  .about-overlay__fine {
    width: 55%;
    line-height: 1.2;
  }
}