/* ===== Font: Neue Haas Grotesk Text Pro ===== */
@font-face {
  font-family: 'Neue Haas Grotesk Text Pro';
  src: url('NHaasGroteskTXPro-55Rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Text Pro';
  src: url('NHaasGroteskTXPro-65Md.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Text Pro';
  src: url('NHaasGroteskTXPro-75Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #adadad;
  --line: #e6e6e6;
  --placeholder: #806b6e;   /* mauve from reference */

  /* ===== Grid system (1440 reference, fluid) ===== */
  --margin: 16px;           /* horizontal frame margin (tight, like the reference) */
  --margin-y: 10px;         /* vertical frame margin — tighter top/bottom */
  --gutter: 8px;            /* gutter between the 20 columns */
  --columns: 20;
  --baseline: 4px;          /* vertical rhythm unit */
  --row-gap: 16px;          /* space between content + footer rows */
  --footer-h: 14px;         /* reserved height of the footer row (one text line) */
  /* width of a single fluid column (accounts for border, margins, 19 gutters) */
  --col: calc((100vw - 2px - (2 * var(--margin)) - (19 * var(--gutter))) / var(--columns));
  --font: 'Neue Haas Grotesk Text Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html, body {
  height: 100%;
}

html {
  font-size: 12px;   /* base — body scales to 0.85em of this (10.2px) */
}

/* ===== Global text styling (applies to all text via inheritance) ===== */
body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  font-size: 0.85em;
  line-height: 1.22;
  letter-spacing: .17px;
  font-feature-settings: "liga", "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover { opacity: 0.5; }

/* ===== Vertical page scroller ===== */
.viewport {
  position: relative;
  height: 100vh;
  overflow: hidden;
  border: 1px solid var(--line);   /* fixed outer frame */
}
.pages {
  will-change: transform;
  /* same easing/duration as the gallery slide, for a consistent feel */
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ===== Fixed chrome: brand + menu + pagination persist across pages ===== */
.chrome {
  position: absolute;
  inset: 0;
  padding: var(--margin-y) var(--margin);
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) var(--footer-h);
  column-gap: var(--gutter);
  row-gap: var(--row-gap);
  pointer-events: none;            /* let gallery clicks pass through */
  z-index: 10;
}
.chrome .menu,
.chrome .pagination,
.chrome a { pointer-events: auto; }

/* ===== Page frame =====
   2-column, 2-row grid:
   [ sidebar | gallery ]   (1fr — main content)
   [ menu    | pages   ]   (auto — footer row)
*/
.page {
  position: relative;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) var(--footer-h);
  column-gap: var(--gutter);
  row-gap: var(--row-gap);
  padding: var(--margin-y) var(--margin);
  overflow: hidden;
}

/* ===== Sidebar ===== */
.sidebar {
  grid-column: 1 / span 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand {
  grid-column: 1 / span 4;
  grid-row: 1;
  align-self: start;
  font-weight: 500;
}

/* In the fixed chrome: centered vertically in the left column, fades on page change */
.project-info {
  grid-column: 1 / span 4;
  grid-row: 1;
  margin-top: auto;
  margin-bottom: auto;
  /* line length capped to 3 columns (one narrower than the 4-col sidebar) */
  max-width: calc((3 * var(--col)) + (2 * var(--gutter)));
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);   /* fade-IN: slow, very gentle settle */
}
.project-info.fade {
  opacity: 0;
  transition: opacity 0.45s ease;   /* fade-OUT: quicker */
}

.info-label {
  margin-bottom: 16px;
}

.info-body p {
  color: var(--text);
}
.info-body p + p {
  margin-top: 14px;
}

/* ===== Gallery ===== */
.gallery {
  grid-column: 5 / -1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* Allow the grid item to shrink below its (700%-wide) content size */
  min-width: 0;
  min-height: 0;
}

.track {
  position: relative;
  height: 100%;
}

/* Pairs are stacked and crossfade between each other */
.slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.slide.active {
  opacity: 1;
}

.panel {
  height: 100%;
  background-color: var(--placeholder);
  overflow: hidden;
}
.panel:has(img) {
  background: none;    /* contained image sits on the page, no colour fill */
}
.panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* fit the whole image inside the box (no cropping) */
}

/* ===== Footer row ===== */
.menu {
  grid-column: 1 / span 4;
  grid-row: 2;
  display: flex;
  gap: 14px;
  align-items: flex-end;
}

.pagination {
  grid-column: 5 / -1;
  grid-row: 2;
  display: flex;
  gap: 9px;
  align-items: flex-end;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);   /* fade-IN: slow, very gentle settle */
}
.pagination.fade {
  opacity: 0;
  transition: opacity 0.45s ease;   /* fade-OUT: quicker */
}

.page-num {
  /* buttons don't inherit font properties by default — force the global treatment */
  font: inherit;
  letter-spacing: inherit;
  font-feature-settings: inherit;
  text-rendering: inherit;
  color: var(--text);          /* default = black */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.page-num:hover { color: var(--muted); }
.page-num.active { color: var(--muted); }   /* currently displayed pair = light grey */

/* ===== Grid overlay (toggle with "G") ===== */
.grid-overlay {
  position: absolute;
  inset: 0;
  padding: var(--margin);
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.grid-overlay.visible { opacity: 1; }
.grid-overlay span {
  background: rgba(255, 0, 80, 0.12);
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  /* ===== Mobile: one continuous native scroll through every image =====
     The document itself scrolls (not a nested container) so the iOS
     "tap status bar → scroll to top" gesture works. */
  html, body { height: auto; }
  .viewport {
    overflow: visible;
    height: auto;
    border: none;
  }
  .pages {
    transform: none !important;   /* no paged animation */
    transition: none;
    display: block;
    height: auto;
    padding: 28px var(--margin) 28px;   /* sit tight under header / above footer */
  }
  .page {
    display: block;
    height: auto;
    padding: 0;
  }
  .page + .page { margin-top: 48px; }   /* gap between projects */

  /* Galleries become a simple vertical list of full-width images */
  .gallery {
    position: static;
    height: auto;
    overflow: visible;
    cursor: default;
  }
  .track {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: var(--gutter);
  }
  .slide {
    position: static;        /* back in flow for the continuous scroll */
    display: flex;
    flex-direction: column;
    height: auto;
    gap: var(--gutter);
    opacity: 1;              /* all pairs visible, no crossfade */
  }
  .panel {
    height: auto;
    min-height: 0;
  }
  .panel img {
    width: 100%;
    height: auto;            /* natural aspect ratio, no cropping */
  }
  .panel:not(:has(img)) {    /* keep placeholder boxes visible */
    aspect-ratio: 3 / 4;
  }

  /* ===== Fixed chrome: brand + scroll-spy title (top), menu (bottom) ===== */
  .chrome { position: fixed; display: block; }   /* not a grid on mobile */
  .chrome::before,
  .chrome::after {           /* white masks so images don't show behind text */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background: var(--bg);
    z-index: 0;
  }
  .chrome::before { top: 0;    height: 28px; }
  .chrome::after  { bottom: 0; height: 28px; }

  .brand {
    position: absolute;
    top: var(--margin-y);
    left: var(--margin);
    z-index: 1;
  }
  .project-info {
    position: absolute;
    top: var(--margin-y);          /* inline with the brand */
    left: var(--margin);
    right: var(--margin);
    margin: 0;
    max-width: none;
    text-align: right;             /* title sits at the right edge */
    z-index: 1;   /* inherits the global 0.85em so it matches the brand/menu */
  }
  .info-label { margin-bottom: 0; }
  .info-body  { display: none; }   /* title only in the fixed header */

  .menu {
    position: absolute;
    bottom: var(--margin-y);
    left: var(--margin);
    right: var(--margin);
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* About | Contact | Projects */
    z-index: 1;
  }
  .menu a:nth-child(1) { justify-self: start; }
  .menu a:nth-child(2) { justify-self: center; }
  .menu a:nth-child(3) { justify-self: end; }
  .pagination { display: none; }   /* no numbers on mobile */
  .grid-overlay { display: none; }
}