/* ————————————————————————————————————
   Font
———————————————————————————————————— */
@font-face {
  font-family: 'NaN Metrify';
  src: url('../fonts/NaNMetrifyLatinAVF.woff2') format('woff2'),
       url('../fonts/NaNMetrifyLatinAVF.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ————————————————————————————————————
   Design System Tokens
———————————————————————————————————— */
:root {
  /* Typography */
  --font-family: 'NaN Metrify', sans-serif;
  --font-size: 12.5px;
  --font-weight: 800;
  --line-height: 1;
  --letter-spacing: 0.02em;
  --text-transform: uppercase;

  /* Colors (light mode) */
  --color-fg: #000000;
  --color-bg: #ffffff;

  /* Spacing (base unit) */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 1);
  --space-s: calc(var(--space-unit) * 2);
  --space-m: calc(var(--space-unit) * 3);
  --space-l: calc(var(--space-unit) * 5);
  --space-xl: calc(var(--space-unit) * 8);
  --space-outer: 15px;

  /* Display type */
  --font-size-display: 1.9rem;
  --line-height-display: 0.95;

  /* Rails */
  --image-height: clamp(60px, 10vw, 120px);
  --rail-gap: 7px;
  --cycle-height-words: 0px;
  --cycle-height-images: 0px;

  /* Logo */
  --logo-height: 17px;
  --logo-gap-unit: 1.5px;  /* M–object = 2×, object–A = 1× */
  --logo-height-hero: clamp(48px, 10vw, 120px);

  /* Borders */
  --border-width: 1px;

  /* Focus */
  --outline-width: 2px;

  /* Motion */
  --ease: cubic-bezier(0.47, 0.03, 0.42, 0.99);
  --duration: 0.75s;
}

/* Dark mode (prepared, not yet active) */
html.dark {
  --color-fg: #ffffff;
  --color-bg: #000000;
}

/* ————————————————————————————————————
   Reset
———————————————————————————————————— */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-variation-settings: 'slnt' 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* ————————————————————————————————————
   Base
———————————————————————————————————— */
html {
  font-size: var(--font-size);
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  text-transform: var(--text-transform);
  color: var(--color-fg);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-style: normal;
  font-variation-settings: 'slnt' 0;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

/* ————————————————————————————————————
   Accessibility
———————————————————————————————————— */
.skip-to-content {
  position: absolute;
  left: calc(-1 * var(--space-xl) * 10);
  top: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-fg);
  color: var(--color-bg);
  text-decoration: none;
  z-index: 1000;
}

.skip-to-content:focus {
  left: var(--space-xs);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ————————————————————————————————————
   Header (fixed)
———————————————————————————————————— */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-outer);
  pointer-events: none;
}

.info-link {
  position: fixed;
  top: 0;
  right: 0;
  padding: var(--space-outer);
  color: var(--color-fg);
  text-decoration: none;
  pointer-events: auto;
}

.info-link:hover {
  text-decoration: underline;
}

/* ————————————————————————————————————
   Logo
———————————————————————————————————— */
.logo {
  display: flex;
  align-items: center;
  pointer-events: auto;
  --logo-h: var(--logo-height);
}

/* Prevent the info-page fallback object from painting before JS restores the
   object selected on the homepage. Hiding the whole logo also avoids a width
   shift when the restored object's viewBox is applied. */
html.info-logo-loading .info-body .logo {
  visibility: hidden;
}

/* Chrome can retain the outgoing document while the info page initializes.
   Hide only the object before navigation so a stale shape cannot flash. */
html.info-navigation-pending .home .logo-object {
  visibility: hidden;
}


.logo-letter:first-child {
  margin-right: calc(var(--logo-gap-unit) * 1.5);
}

.logo-letter {
  display: block;
  height: var(--logo-height);
  width: auto;
  fill: var(--color-fg);
}

.logo-object {
  display: block;
  height: var(--logo-height);
  width: auto;
  --kern-px: calc(var(--kern) * var(--logo-h) / 120);
  margin-right: var(--kern-px, var(--logo-gap-unit));
  color: var(--color-fg);
  overflow: visible;
}

/* ————————————————————————————————————
   Hero logo (homepage only)
———————————————————————————————————— */
.home .header {
  padding-top: calc(50dvh - var(--logo-height-hero) / 2);
}

.home .logo {
  --logo-h: var(--logo-height-hero);
  --logo-gap-unit: calc(1.5 / 17 * var(--logo-height-hero));
}

.home .logo-letter,
.home .logo-object {
  height: var(--logo-height-hero);
}

html.detail-open .home .header {
  padding-top: var(--space-outer);
}

html.detail-open .home .logo {
  --logo-h: var(--logo-height);
  --logo-gap-unit: 1.5px;
}

html.detail-open .home .logo-letter,
html.detail-open .home .logo-object {
  height: var(--logo-height);
}

.svg-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ————————————————————————————————————
   Preloader — logo cycles alone while assets load, then everything
   else fades in
———————————————————————————————————— */
.left-rail,
.right-rail,
.footer,
.info-link,
.edge-fade {
  opacity: 1;
  transition: opacity var(--duration) var(--ease);
}

html.preloading .left-rail,
html.preloading .right-rail,
html.preloading .footer,
html.preloading .info-link,
html.preloading .edge-fade {
  opacity: 0;
  pointer-events: none;
}

html.preloading .scroll-container {
  overflow: hidden;
}

html.preloading .word,
html.preloading .image-list img {
  pointer-events: none;
}

/* ————————————————————————————————————
   Main
———————————————————————————————————— */
main {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.scroll-container {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-anchor: none;
}
.scroll-container::-webkit-scrollbar { display: none; }

.scroll-track { pointer-events: none; }

/* ————————————————————————————————————
   Rails (shared)
———————————————————————————————————— */
.left-rail,
.right-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: clip;
  z-index: 10;
  pointer-events: none;
}

/* Edge fade — full-viewport gradient overlay */
.edge-fade {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.edge-fade::before,
.edge-fade::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 12%;
}

.edge-fade::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg), transparent);
}

.edge-fade::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg), transparent);
}

.left-rail {
  left: var(--space-outer);
  right: var(--space-outer);
  z-index: 20;
}

.right-rail {
  /*right: var(--space-outer);*/
  right: 0;
  width: 35%;
  text-align: right;
  z-index: 10;
}

.rail-inner {
  will-change: transform;
}


/* ————————————————————————————————————
   Word list (left rail)
———————————————————————————————————— */
.word {
  display: block;
  font-family: inherit;
  font-size: var(--font-size-display);
  font-weight: inherit;
  font-variation-settings: 'slnt' 0;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: var(--line-height-display);
  color: var(--color-fg);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  pointer-events: auto;
}

.word:focus-visible {
  outline: none;
}

.word.active::after {
  content: " IS MATERIAL";
}

/* ————————————————————————————————————
   Image list (right rail)
———————————————————————————————————— */
.image-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.image-list img {
  display: block;
  height: var(--image-height);
  width: auto;
  margin-bottom: var(--rail-gap);
}

/* ————————————————————————————————————
   Footer (fixed)
———————————————————————————————————— */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  padding: var(--space-outer);
  pointer-events: none;
}

.footer span {
  pointer-events: auto;
}

/* ————————————————————————————————————
   Detail view
———————————————————————————————————— */
.detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
}

html.detail-open .detail-backdrop {
  opacity: 1;
}

/* Detail-specific dark theme (per-image, separate from global dark mode) */
html.detail-dark {
  --color-fg: #ffffff;
  --color-bg: #000000;
}

html.detail-open .word {
  visibility: hidden;
}

html.detail-open .image-list img {
  visibility: hidden;
}

html.detail-open .image-list img.active {
  visibility: visible;
}

html.detail-open .edge-fade {
  display: none;
}

/* ————————————————————————————————————
   Detail content (headline + caption)
———————————————————————————————————— */
.detail-content {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  color: var(--color-fg);
}

html.detail-open .detail-content[aria-hidden="false"] {
  opacity: 1;
}

.detail-headline {
  position: absolute;
  top: 50%;
  left: var(--space-outer);
  transform: translateY(-50%);
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
}

.detail-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.detail-caption {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
}

.detail-body {
  margin-top: var(--space-s);
  max-width: calc(var(--space-unit) * 48);
  margin-left: auto;
  margin-right: auto;
}

.detail-body p {
  margin-bottom: var(--space-xs);
}

.detail-body p:last-child {
  margin-bottom: 0;
}

.detail-body:empty {
  display: none;
}

@media (max-width: 767px) {
  .detail-headline,
  .detail-center {
    position: static;
    transform: none;
    text-align: left;
    padding-left: var(--space-outer);
    padding-right: var(--space-outer);
  }

  .detail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .detail-center {
    margin-top: -0.1em;
  }

  .detail-caption {
    font-size: inherit;
    line-height: var(--line-height);
  }

  .detail-body {
    max-width: none;
  }
}

.image-list img {
  pointer-events: auto;
  cursor: pointer;
}

/* ————————————————————————————————————
   Links
———————————————————————————————————— */
a {
  color: inherit;
  text-decoration: none;
}

/* ————————————————————————————————————
   Info page
———————————————————————————————————— */
html:has(.info-body),
.info-body {
  overflow: auto;
  height: auto;
}

.info-page {
  position: relative;
  height: auto;
  overflow: visible;
}

/* Single text column, centered in the viewport */
.info-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-outer);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Same measure as the old two-column layout */
.info-left {
  width: 50%;
}

/* Gradient fade on fixed header/footer */
.info-body .header {
  background: linear-gradient(to bottom, var(--color-bg), transparent);
  padding-bottom: var(--space-xl);
}

.info-body .footer {
  background: linear-gradient(to top, var(--color-bg), transparent);
  padding-top: var(--space-xl);
}

.info-label {
  margin-bottom: var(--space-m);
}

.info-hero {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  margin-bottom: var(--space-m);
}

.info-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-outer);
}

.info-cta {
  display: block;
  border: var(--border-width) solid var(--color-fg);
  padding: var(--space-xs) var(--space-s);
  text-align: center;
  /* transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); */
}

.info-cta:hover {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

.info-list {
  list-style: none;
}

/* Info page — mobile */
@media (max-width: 767px) {
  /* Manual hero line break is tuned for desktop measure — let mobile wrap naturally */
  .info-hero br {
    display: none;
  }

  .info-left {
    width: 100%;
    text-align: center;
  }

  .info-about .info-label {
    display: none;
  }

  .info-contact {
    grid-template-columns: 1fr;
    gap: calc(var(--space-outer) / 3);
  }
}