/* Values from the Figma file "MG_site", page v2: the desktop frames
   "landing page grid", "desktop" (big poster view) and "about page"
   (1920x1200), and the 380x760 "mobile-1" frames below the breakpoint. */

@font-face {
  font-family: "Helvetica Neue MG";
  src: url("assets/fonts/Helvetica-Neue-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

:root {
  --breakpoint: 900px; /* mirrored as BREAKPOINT in main.js */
  --margin: 36px;
  --gap: 10px; /* between posters in the grid */
  --cell-min: 200px; /* 8 columns at 1920, fewer on smaller screens */
  --header-top: 36px;
  --header-h: 28px;
  --grid-top: 111px;
  --bg: #f5f5f5;
  --ink: #0a0a0a;
  --muted: #919191;
  --placeholder: #e8e8e8;
  --glass: rgba(245, 245, 245, 0.85);
  --font: "Helvetica Neue MG", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: 17px;
  --tracking: -0.02em;
  --logo-scale: 1; /* main.js: the default logo spans the width on mobile */
  /* A soft spring (about 8% overshoot), and a calmer one */
  --spring: linear(0, 0.0322, 0.1144, 0.2274, 0.3555, 0.4866, 0.612, 0.7255, 0.8236, 0.9046, 0.9685, 1.0163, 1.0495, 1.0702, 1.0808, 1.0835, 1.0803, 1.0731, 1.0635, 1.0527, 1.0418, 1.0314, 1.022, 1.014, 1.0074, 1.0022, 0.9983, 0.9956, 0.994, 0.9932, 0.993, 0.9933, 0.994, 0.9948, 0.9957, 0.9966, 1);
  --spring-calm: linear(0, 0.0344, 0.1179, 0.2275, 0.3465, 0.464, 0.573, 0.6696, 0.7522, 0.8205, 0.8755, 0.9184, 0.9509, 0.9747, 0.9914, 1.0027, 1.0096, 1.0134, 1.015, 1.015, 1.0141, 1.0126, 1.0108, 1.009, 1.0073, 1.0057, 1.0044, 1.0032, 1.0023, 1.0015, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Browsers without linear() get a near-enough curve */
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --spring-calm: cubic-bezier(0.22, 1.08, 0.36, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
/* While the big poster view or About is open the grid stays put */
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  /* Posters sliding off the sides (About) must never widen the page:
     phones would zoom out to fit */
  overflow-x: clip;
  color: var(--ink);
  font: 500 var(--text) / 1.05 var(--font);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
img { -webkit-user-drag: none; }

/* Trim text boxes to cap height and baseline, like Figma's text-box-trim */
.trim { text-box: trim-both cap alphabetic; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- Header --------------------------------------------------------------
   Desktop: fixed, slides away while scrolling down the grid and comes back
   on the way up. Mobile: just the logo, scrolling with the page. */
.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 5;
  height: calc(var(--header-top) + var(--header-h) + 20px);
  padding: var(--header-top) var(--margin) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  transition: transform 0.45s var(--ease-out), background-color 0.3s;
}
.top.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.top.is-hidden { transform: translateY(-100%); }

/* The logo box keeps the header's height and the variants are centred in
   it, so swapping logos never moves the layout */
.logo {
  margin: 0;
  height: calc(var(--header-h) * var(--logo-scale));
  display: flex;
  align-items: center;
  line-height: 0;
}
.logo-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.logo img {
  display: block;
  width: calc(var(--logo-w) * var(--logo-scale) * 1px);
  height: calc(var(--logo-h) * var(--logo-scale) * 1px);
}

.shuffle-btn {
  position: absolute;
  top: var(--header-top);
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.25s, visibility 0s;
}
/* The swirl is drawn a little larger than its 28px box, as in Figma */
.shuffle-btn img {
  display: block;
  width: 31.11px;
  height: 31.11px;
  margin: -1.55px;
}
.is-spinning img { animation: spin 0.7s var(--spring-calm); }
@keyframes spin { to { rotate: 1turn; } }
.is-about .shuffle-btn { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
  font-feature-settings: "zero" 1;
}
.nav-icons { display: flex; gap: 11px; }
.icon-link { display: block; }
.icon-link img { display: block; height: 18px; }
[aria-current="page"] { cursor: default; }

/* --- Grid ---------------------------------------------------------------- */
.grid {
  overflow-x: clip;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--cell-min), 100%), 1fr));
  gap: var(--gap);
  padding: var(--grid-top) var(--margin) var(--margin);
}

.cell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 222 / 301;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--placeholder);
  cursor: pointer;
}
.cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.cell img.is-loaded { opacity: 1; }
/* The new artwork fading in during a shuffle */
.cell img.is-incoming {
  position: absolute;
  inset: 0;
}
/* Lifted out into the big view */
.cell.is-open img { visibility: hidden; }

/* --- About --------------------------------------------------------------- */
.about {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
  /* A little above centre, as in Figma */
  padding: 84px var(--margin) 132px;
}
.about[hidden] { display: none; }

.about-inner {
  display: flex;
  align-items: flex-start;
  gap: 43px;
}
.about-text { width: 350px; flex: none; }
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 1.05em; }

.about-sign {
  position: relative;
  margin-top: 54px;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.about-sign p { margin: 0; }
.about-sign span { color: rgba(10, 10, 10, 0.4); }
.signature {
  position: absolute;
  left: 132px;
  top: -8px;
  width: 143.3px;
  rotate: 3.25deg;
}

.about-photo {
  display: block;
  flex: none;
  width: 400px;
  height: 400px;
  object-fit: cover;
  background: var(--placeholder);
}

/* --- Big poster view ----------------------------------------------------- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: zoom-out;
}
.viewer[hidden] { display: none; }
.viewer:focus { outline: none; }
.viewer-bg {
  position: absolute;
  inset: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(4.7px);
  backdrop-filter: blur(4.7px);
}
.viewer-track {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: var(--placeholder);
  cursor: pointer;
}
.slide.is-current { cursor: default; }
.is-series .slide.is-current { cursor: grab; }
.is-dragging, .is-dragging .slide { cursor: grabbing !important; }
.slide img,
.flyer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flyer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* Stays put while the series slides underneath it */
.caption {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #070707;
  pointer-events: none;
}
.caption span { display: block; }
.caption-text { color: var(--muted); }

/* --- Mobile menu (the dock) ---------------------------------------------- */
.dock { display: none; }

/* --- Mobile, per the "mobile-1" frames ------------------------------------ */
@media (max-width: 899.98px) {
  :root {
    --margin: 22px;
    --gap: 5px;
    --header-top: 24px;
    --text: 13px;
    /* Logo (22px at 1:1, scaled to the width) plus the gap above the grid */
    --grid-top: calc(24px + 22.14px * var(--logo-scale) + 29.4px);
  }

  /* The header scrolls with the page; main.js moves it with About's scroll */
  .top {
    position: absolute;
    height: auto;
    /* Line the trimmed default logo up with the 24px top margin */
    padding-top: calc(var(--header-top) - 2.93px * var(--logo-scale));
    transition: none;
  }
  .top.is-scrolled { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .top.is-hidden { transform: none; }
  .shuffle-btn, .nav { display: none; }

  .grid {
    grid-template-columns: repeat(3, 1fr);
    /* Room to scroll the last row clear of the dock */
    padding-bottom: calc(22px + 30px + 22px + env(safe-area-inset-bottom));
  }

  .about {
    display: block;
    padding: 114px var(--margin) calc(22px + 30px + 40px + env(safe-area-inset-bottom));
  }
  .about-inner {
    flex-direction: column-reverse;
    gap: 19px;
    max-width: 480px;
  }
  .about-text { width: 100%; }
  .about-copy { letter-spacing: -0.02em; }
  .about-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 336 / 196;
    object-position: 50% 30%;
  }
  .about-sign {
    margin-top: 28px;
    font-size: 10px;
  }
  .signature {
    left: 89px;
    top: -6px;
    width: 102.5px;
  }

  .viewer-bg {
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
  }
  .caption {
    font-size: 13px;
  }

  /* The dock: shuffle (back, on About) and a menu that pops up above it */
  .dock {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 6;
    width: 100px;
    margin-left: -50px;
    font-size: 14px;
    letter-spacing: -0.03em;
    color: #000;
  }

  .dock-bar {
    display: flex;
    height: 30px;
    border-radius: 30px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
  }
  .dock-btn {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: background-color 0.25s;
  }
  .dock-btn img {
    grid-area: 1 / 1;
    display: block;
    transition: opacity 0.3s, rotate 0.5s var(--spring), scale 0.5s var(--spring);
  }
  .dock-btn:active img { scale: 0.86; transition-duration: 0.08s; }
  .dock-left { background: rgba(173, 173, 173, 0.7); }
  .dock-more { background: rgba(230, 230, 230, 0.6); }
  .dock-more img { width: 26px; }
  .is-open .dock-more { background: rgba(205, 205, 205, 0.75); }
  .is-open .dock-more img { rotate: 90deg; }

  /* Shuffle swirl and back arrow share the left button */
  .icon-shuffle { width: 18px; }
  .icon-back { width: 22px; opacity: 0; rotate: 90deg; }
  .is-about .icon-shuffle { opacity: 0; rotate: -90deg; }
  .is-about .icon-back { opacity: 1; rotate: 0deg; }
  .dock-left.is-spinning .icon-shuffle { animation: spin 0.7s var(--spring-calm); }

  .dock-menu {
    position: absolute;
    left: 0;
    bottom: 34px;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
    transform-origin: 75% calc(100% + 19px);
    opacity: 0;
    scale: 0.6;
    translate: 0 10px;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease-in, scale 0.2s ease-in, translate 0.2s ease-in, visibility 0s 0.2s;
  }
  .is-open .dock-menu {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s ease-out, scale 0.55s var(--spring), translate 0.55s var(--spring), visibility 0s;
  }
  /* Rows settle in one after another, from the bottom up */
  .dock-menu > * {
    opacity: 0;
    translate: 0 6px;
    transition: opacity 0.12s, translate 0.2s;
  }
  .is-open .dock-menu > * {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.3s ease-out, translate 0.5s var(--spring);
  }
  .is-open .dock-contact { transition-delay: 0.03s; }
  .is-open .dock-about { transition-delay: 0.07s; }
  .is-open .dock-row { transition-delay: 0.11s; }

  .dock-row { display: flex; }
  .dock-item {
    flex: 1;
    display: grid;
    place-items: center;
    height: 30px;
    transition: background-color 0.2s;
  }
  .dock-row .dock-item:first-child { background: rgba(173, 173, 173, 0.7); }
  .dock-row .dock-item:last-child { background: rgba(230, 230, 230, 0.6); }
  .dock-row .dock-item:first-child img { width: 15.8px; }
  .dock-row .dock-item:last-child img { width: 15.6px; }
  .dock-menu > .dock-item { flex: none; }
  .dock-about { background: rgba(190, 190, 190, 0.7); }
  .dock-contact { background: rgba(230, 230, 230, 0.7); }
  .dock-item:active { background-color: rgba(150, 150, 150, 0.7) !important; }
  /* On About the About item goes, and the colours step along */
  .is-about .dock-about { display: none; }
  .is-about .dock-row .dock-item:first-child { background: rgba(190, 190, 190, 0.7); }
  .is-about .dock-row .dock-item:last-child { background: rgba(212, 212, 212, 0.6); }
}

/* Stacked About on narrow desktops */
@media (min-width: 900px) and (max-width: 940px) {
  .about-inner { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
  }
}