/* BPS Fresh Produce · The Exhibition · shared kit
   One light theme: limestone, slate ink and a single terracotta accent ("Nile clay").
   Every page links this file; html.motion switches on the scroll-driven layers. */

/* ------------------------------------------------------------------ fonts (self-hosted, OFL) */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --stone: #e4e1d9;      /* the page: chalky Egyptian limestone */
  --paper: #f3f1ec;      /* labels and the lightest folder */
  --sand: #d3ccbd;
  --ink: #1c2124;        /* slate, not espresso */
  --muted: #4b5355;
  --on-ink-muted: #a7aeb0;
  --clay: #a8391b;       /* the one accent */
  --hair: rgb(28 33 36 / 0.16);

  --serif: 'Cormorant Garamond', 'Cormorant', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --edge: clamp(16px, 4.4vw, 64px);
  --nav: 72px;
  --wide: 1360px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* layers, from the page up */
  --z-rooms: 40;
  --z-nav: 50;
  --z-veil: 100;
  --z-skip: 110;
}
@media (max-width: 760px) {
  :root { --nav: 64px; }
}

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

html {
  background: var(--stone);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--clay); color: var(--paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus-visible { transform: none; outline-color: var(--clay); }

/* ------------------------------------------------------------------ type */
.title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.title em {
  font-style: italic;
  color: var(--clay);
  /* italic descenders (p, y, g) need room below */
  display: inline-block;
  padding-bottom: 0.08em;
  line-height: 1.1;
}
.title--small { font-size: clamp(2.1rem, 1.3rem + 3vw, 4.2rem); }
.lede {
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--hair);
  transition: text-decoration-color 200ms ease;
}
.textlink::after { content: '\2192'; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { text-decoration-color: currentColor; }
  .textlink:hover::after { transform: translateX(4px); }
}
.textlink--on-dark { color: var(--paper); text-decoration-color: rgb(243 241 236 / 0.35); }

/* ------------------------------------------------------------------ buttons
   Square, like the rest of the page. A second, inked copy sits on top and a ragged clip-path band reveals it
   from the side the pointer enters (Animorio: ink on the button). */
.button {
  --da: -12%;
  --a: -12%;
  --ink-bg: var(--ink);
  --ink-fg: var(--paper);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.button:active { transform: scale(0.97); }
.button--clay { background: var(--clay); color: var(--paper); }
.button--line { border-color: var(--ink); color: var(--ink); }
.button--small { min-height: 44px; padding: 0 18px; font-size: 0.94rem; }
.button__ink {
  position: absolute;
  inset: -1.5px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-bg);
  color: var(--ink-fg);
  pointer-events: none;
  clip-path: polygon(
    calc(var(--da) - 2px) 0%, calc(var(--a) + 3px) 0%, calc(var(--a) - 2px) 12.5%, calc(var(--a) + 4px) 25%,
    calc(var(--a) - 3px) 37.5%, calc(var(--a) + 2px) 50%, calc(var(--a) - 4px) 62.5%, calc(var(--a) + 3px) 75%,
    calc(var(--a) - 1px) 87.5%, calc(var(--a) + 2px) 100%, calc(var(--da) - 3px) 100%, calc(var(--da) + 4px) 87.5%,
    calc(var(--da) - 2px) 75%, calc(var(--da) + 3px) 62.5%, calc(var(--da) - 4px) 50%, calc(var(--da) + 2px) 37.5%,
    calc(var(--da) - 3px) 25%, calc(var(--da) + 3px) 12.5%
  );
}
.button--still .button__ink { clip-path: none; opacity: 0; transition: opacity 150ms ease; }

/* ------------------------------------------------------------------ passages between pages
   The browser's own cross-document transition joins two exhibition pages with a soft dissolve (Edge, Chrome,
   Safari). Where it is not available, a limestone veil fades the page out and the next one in (transition.js). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 160ms; }
}
.js body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  background: var(--stone);
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(0.23, 1, 0.32, 1);
}
.entering body::after { opacity: 1; transition: none; }
.leaving body::after { opacity: 1; transition-duration: 260ms; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
/* a photograph flying into the room it opens (clip-path and scale run on the compositor) */
.flight { position: fixed; inset: 0; z-index: calc(var(--z-veil) + 1); overflow: hidden; pointer-events: none; will-change: clip-path; }
.flight img { width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }

/* ------------------------------------------------------------------ prompts: a small line of type with a stroke that draws down */
.cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cue__line { position: relative; width: 1px; height: 32px; overflow: hidden; background: var(--hair); }
.cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.motion .cue__line::after { animation: cue-draw 2.4s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes cue-draw {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

/* ------------------------------------------------------------------ museum labels (the exhibit's specimen tags) */
.specimen { display: flex; flex-wrap: wrap; gap: 10px; }
.specimen__tag {
  display: grid;
  gap: 2px;
  padding: 10px 14px 12px;
  background: var(--paper);
  color: var(--ink);
}
.specimen__key {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.specimen__value { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.1; }
.specimen__lines { display: none; }
.specimen__lines path { fill: none; stroke: var(--paper); stroke-width: 1.25; }
@media (max-width: 760px) { .specimen__value { font-size: 1.2rem; } }

/* ------------------------------------------------------------------ navigation */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav);
  padding: 0 var(--edge);
  background: var(--stone);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease;
}
.nav.is-scrolled { border-bottom-color: var(--hair); }
.wordmark {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  align-self: center;
  padding-top: 6px;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__middle { display: inline-flex; overflow: clip; white-space: pre; }
.wordmark__letter { display: inline-block; overflow: clip; }
.wordmark__letter > span { display: inline-block; white-space: pre; }
.nav__links { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 34px); }
.nav__links a:not(.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: 0.96rem;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:not(.button):hover { background-size: 100% 1px; }
}
.nav__links a[aria-current="page"]:not(.button) { background-size: 100% 1px; }
.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    font-weight: 500;
    cursor: pointer;
  }
  .nav__toggle-lines { position: relative; display: block; width: 22px; height: 10px; }
  .nav__toggle-lines i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform 260ms var(--ease-out);
  }
  .nav__toggle-lines i:first-child { top: 0; }
  .nav__toggle-lines i:last-child { bottom: 0; }
  .nav.is-open .nav__toggle-lines i:first-child { transform: translateY(4.25px) rotate(45deg); }
  .nav.is-open .nav__toggle-lines i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .nav__links {
    position: fixed;
    inset: var(--nav) 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 28px var(--edge) 40px;
    background: var(--stone);
    border-top: 1px solid var(--hair);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 420ms var(--ease-in-out), visibility 0s linear 420ms;
  }
  .nav.is-open .nav__links {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 420ms var(--ease-in-out), visibility 0s;
  }
  .nav__links a:not(.button) { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; line-height: 1.15; }
  .nav__links .button { margin-top: 20px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav__links, .nav.is-open .nav__links { transition: none; }
}

/* ------------------------------------------------------------------ the room index (desktop only, real links) */
.rooms { display: none; }
@media (min-width: 1200px) {
  .js .rooms {
    position: fixed;
    left: 18px;
    top: 50%;
    z-index: var(--z-rooms);
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }
  .js .rooms.is-shown { opacity: 1; visibility: visible; transition: opacity 300ms ease, visibility 0s; }
  .rooms a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 44px;
    height: 44px;
    color: transparent;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  .rooms a::before {
    content: '';
    width: 16px;
    height: 1.5px;
    background: var(--muted);
    flex: none;
    transition: width 300ms var(--ease-out), background-color 300ms ease;
  }
  .rooms a[aria-current='true']::before { width: 30px; background: var(--clay); }
  .rooms a:hover,
  .rooms a:focus-visible { color: var(--ink); }
  .rooms a:hover::before,
  .rooms a:focus-visible::before { width: 30px; }
}

/* ================================================================== footer: the one dark band */
.footer {
  display: grid;
  gap: 24px;
  padding: clamp(56px, 10vh, 96px) var(--edge) 36px;
  background: var(--ink);
  color: var(--paper);
}
.footer__line { max-width: 30ch; font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 500; line-height: 1.15; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover { background-size: 100% 1px; }
}
.footer__legal { color: var(--on-ink-muted); font-size: 0.86rem; }
.footer :focus-visible { outline-color: var(--paper); }

/* ------------------------------------------------------------------ titles that come into focus (scroll scrub) */
.motion [data-focus] { will-change: filter, transform, opacity; }

/* ------------------------------------------------------------------ more contrast */
@media (prefers-contrast: more) {
  :root { --muted: #2e3436; --hair: rgb(28 33 36 / 0.4); }
}