@font-face {
  font-family: 'BDO Grotesk';
  src: url('Fonts/BDOGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* BDO's x-height is tall: scale it down so the sizes below stay balanced */
  size-adjust: 90%;
}
@font-face {
  font-family: 'BDO Grotesk';
  src: url('Fonts/BDOGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  /* BDO's x-height is tall: scale it down so the sizes below stay balanced */
  size-adjust: 90%;
}
@font-face {
  font-family: 'Paper Mono';
  src: url('Fonts/PaperMono-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paper Mono';
  src: url('Fonts/PaperMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --margin: 20px;
  --gutter: 20px;
  /* distance from the top edge to the credits (a tenth of --margin) */
  --credits-top: 2px;
  --mono: clamp(11px, 0.9vw, 15px);
  /* gap between the top of the first menu item's box and its visible text:
     desktop content starts here so it lines up with that text */
  --nav-text-offset: calc(var(--mono) * 0.82);
  --mono-weight: 100;
  --mono-weight-strong: 400;
  /* distance between any video/image and its caption */
  --caption-gap: 6px;
  --serif-title: clamp(32px, 3.66vw, 63px);
  --serif-body: calc(var(--mono) * 1.5);
  /* body copy + title: swap family/weight here to try other fonts */
  --body-font: 'BDO Grotesk', sans-serif;
  --body-weight: 400;
  --title-font: 'BDO Grotesk', sans-serif;
  --title-weight: 500;
}

html[data-theme="dark"] {
  --bg: #141414;
  --fg: #fff;
  --fg-dim: rgba(255, 255, 255, 0.5);
  --media-bg: #7a7a7a;
}
html[data-theme="light"] {
  --bg: #f5f5f5;
  --fg: #000;
  --fg-dim: rgba(0, 0, 0, 0.5);
  --media-bg: #d6d6d6;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* reserve the scrollbar's width on every page so switching between
   fixed and scrolling pages doesn't shift the layout sideways */
html {
  scrollbar-gutter: stable;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
  transition: background 0.2s ease, color 0.2s ease;
}

a, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

/* custom dot cursor (desktop/mouse only, native cursor stays on touch) */
@media (pointer: fine) {
  * {
    /* An invisible 16px image, with "none" as the fallback. A plain "none"
       makes Safari hide the cursor only "until the mouse moves", so the arrow
       comes back after a scroll, a key press, a window switch or a click that
       changes what is under the pointer, and stays until the mouse moves.
       An image cursor is never "re-shown" like that. */
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAEklEQVR42mNgGAWjYBSMAggAAAQQAAGvRYgsAAAAAElFTkSuQmCC") 8 8, none !important;
  }
}

.cursor-dot {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}
@media (pointer: fine) {
  .cursor-dot {
    display: block;
  }
}
.cursor-dot.is-hover {
  transform: translate(-50%, -50%) scale(1.25);
}

.page {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* masthead title */
.title {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  top: 11.28vh;
  display: flex;
  align-items: baseline;
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: var(--serif-title);
  line-height: 1.1;
}
.title .prefix {
  flex: 0 0 auto;
  white-space: nowrap;
}
.title .rest {
  flex: 1 1 auto;
  min-width: 0;
}
.title .seg1,
.title .seg2 {
  white-space: nowrap;
}

/* credits, top right area */
.credits {
  position: absolute;
  left: calc(25% + 15px);
  right: var(--margin);
  top: var(--credits-top);
  font-family: 'Paper Mono', monospace;
  font-weight: var(--mono-weight);
  font-size: var(--mono);
  line-height: 1.1;
  color: var(--fg-dim);
}

/* credits read as one continuous line of text, entries separated by slashes
   (on every screen size; it wraps like normal text when it doesn't fit) */
.credits p {
  display: inline;
}

/* left sidebar nav */
.site-nav {
  position: absolute;
  left: var(--margin);
  top: 22.47vh;
  font-family: 'Paper Mono', monospace;
  font-weight: var(--mono-weight);
  font-size: var(--mono);
  line-height: 2.4;
  white-space: nowrap;
}
.site-nav a {
  display: block;
  width: fit-content;
  color: var(--fg-dim);
}
.site-nav a.active {
  color: var(--fg);
  font-weight: var(--mono-weight-strong);
}
.nav-toggle {
  display: none;
}

/* bottom left utility nav */
.utility-nav {
  position: absolute;
  left: var(--margin);
  bottom: var(--margin);
  font-family: 'Paper Mono', monospace;
  font-weight: var(--mono-weight);
  font-size: var(--mono);
  line-height: 2.4;
  color: var(--fg-dim);
  white-space: nowrap;
}
.utility-nav a,
.utility-nav button {
  display: block;
  width: fit-content;
  background: none;
  border: none;
  color: var(--fg-dim);
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.site-nav a:hover,
.utility-nav a:hover,
.utility-nav button:hover {
  color: var(--fg);
}

/* "under construction" note for pages that don't have content yet */
.construction-note {
  position: absolute;
  left: calc(25% + 15px);
  top: calc(22.47vh + var(--nav-text-offset));
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  font-size: var(--serif-body);
  line-height: 1.1;
}

/* Fullscreen video player: the whole player goes fullscreen (so the controls and
   the cursor dot come with it) and the video is letterboxed, never cropped.
   The two selectors are separate rules on purpose: an unknown one would
   invalidate a combined rule in older browsers. */
.essay-video:fullscreen {
  background: #000;
}
.essay-video:fullscreen video {
  object-fit: contain;
}
.essay-video:-webkit-full-screen {
  background: #000;
}
.essay-video:-webkit-full-screen video {
  object-fit: contain;
}

/* The Portfolio link lives in two places: next to the credits, top-left, in the
   horizontal layout, and at the top of the bottom-left stack everywhere else. */
.portfolio-top {
  display: none;
}
@media (orientation: landscape) {
  .portfolio-top {
    display: block;
    position: absolute;
    left: var(--margin);
    top: var(--credits-top);
    font-family: 'Paper Mono', monospace;
    font-weight: var(--mono-weight);
    font-size: var(--mono);
    line-height: 1.1;
    color: var(--fg-dim);
    white-space: nowrap;
  }
  .portfolio-top:hover {
    color: var(--fg);
  }
  .utility-nav .portfolio-bottom {
    display: none;
  }
}

/* ---- portrait: single column, no absolute grid ---- */
@media (orientation: portrait) {
  html, body {
    height: auto;
  }
  html {
    overflow-y: auto;
  }
  body {
    overflow: visible;
  }

  .page {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: var(--margin);
    padding-top: var(--credits-top);
  }

  .credits,
  .site-nav,
  .utility-nav,
  .stack-item {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
  }

  .credits {
    order: -2;
    /* halves the credits -> title distance (flex gap 20px + title padding) */
    margin-bottom: -1rem;
  }
  .title {
    order: -1;
    display: block;
    /* pins to the top edge on scroll, covering the credits (which
       sit above it in flow) as they scroll out of view */
    position: sticky;
    left: auto;
    right: auto;
    bottom: auto;
    top: 0;
    z-index: 10;
    width: auto;
    margin: 0 calc(-1 * var(--margin));
    padding: 0.75rem var(--margin);
    background: var(--bg);
  }
  .title .prefix,
  .title .dot {
    display: none;
  }
  .title .rest {
    display: inline;
  }
  .title .seg1 {
    white-space: normal;
  }
  .title .seg2 {
    display: block;
    white-space: normal;
  }

  .site-nav .nav-num {
    display: none;
  }

  .site-nav a,
  .utility-nav a,
  .utility-nav button {
    display: block;
  }

  .nav-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--fg-dim);
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    padding: 0;
    text-align: left;
  }
  .nav-toggle:hover {
    color: var(--fg);
  }

  .nav-list {
    display: none;
    margin-top: 0.5rem;
  }
  .nav-list.open {
    display: block;
  }
}