/* Evolution Exhibits, concept v2. Chaptered editorial.
   Paper ground, one hard cut to the dark hall in chapter II, one accent: the
   brand blue sampled from their own logo (#0C76B7). On the dark ground the same
   hue is lifted one stop so it clears contrast; one hue, two lightnesses. */

@font-face {
  font-family: "Archivo";
  src: url("assets/font/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face { font-family: "IBM Plex Mono"; src: url("assets/font/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/font/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --sc-canvas:     #F2F2EF;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #15181C;
  --sc-ink-soft:   #555C65;
  --sc-accent:     #0C76B7;
  --accent-ink-on-paper: #0A659E;   /* same hue, lifted for small text on paper: 5.1:1 */
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --sc-shadow-color: 215 20% 10%;
  --sc-maxw: 88rem;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;

  /* the dark family, used by chapter II and by the folio while it is over it */
  --hall-canvas: #0B0E12;
  --hall-surface: #151A21;
  --hall-ink: #F1F2F0;
  --hall-ink-soft: #A9B0B8;
  --hall-accent: #6CBCF0;

  --folio-w: clamp(8.5rem, 11vw, 11rem);
  --paper-line: color-mix(in oklab, var(--sc-ink) 14%, transparent);
}

html { scroll-padding-top: 0; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-weight: 420; }
b, strong { font-weight: 600; }

.skip {
  position: absolute; left: var(--sc-gutter); top: -4rem; z-index: 100;
  background: var(--sc-ink); color: var(--sc-canvas); padding: var(--sc-2) var(--sc-4);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); text-decoration: none;
}
.skip:focus-visible { top: var(--sc-4); }

/* --------------------------------------------------------- the folio -- */
.folio {
  position: fixed; z-index: var(--sc-z-chrome);
  left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: var(--folio-w);
  display: grid; gap: var(--sc-4);
  color: var(--sc-ink);
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.folio__mark { display: block; text-decoration: none; width: 100%; }
.logo { width: 100%; height: auto; display: block; }
.logo__bars rect { fill: var(--sc-accent); }
.logo__word { fill: var(--sc-ink); }
.logo__word text { font-family: var(--sc-font-display); font-weight: 600; font-stretch: 125%; font-size: 25px; letter-spacing: 0.04em; }
.folio__chapter { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.folio__num { color: var(--sc-ink); }
.folio__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--paper-line); padding-top: var(--sc-3); }
.folio__list a {
  display: flex; gap: var(--sc-2); align-items: baseline;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.04em;
  text-decoration: none; color: var(--sc-ink-soft); padding: 2px 0;
  transition: color var(--sc-d-fast) var(--sc-ease-out), translate var(--sc-d-fast) var(--sc-ease-out);
}
.folio__list a span { font-family: var(--sc-font-text); letter-spacing: var(--sc-track-normal); font-size: var(--sc-t-sm); }
.folio__list a[aria-current="true"] { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .folio__list a:hover { color: var(--sc-accent); translate: 2px 0; } }
.folio__list a:active { translate: 1px 1px; }

/* the folio over the dark hall takes the dark family. `color` is restated
   because it is inherited as a computed value. */
.folio.is-hall { --sc-ink: var(--hall-ink); --sc-ink-soft: var(--hall-ink-soft); --sc-accent: var(--hall-accent); --paper-line: color-mix(in oklab, var(--hall-ink) 18%, transparent); color: var(--hall-ink); }

/* ---- the plan. Every stroke is driven by site.js from a chapter's --sc-p. ---- */
.plan { width: 100%; height: auto; overflow: visible; }
.plan * { vector-effect: non-scaling-stroke; }
.plan__lot { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1; opacity: 0.55; }
.plan__carpet { fill: var(--sc-accent); opacity: 0.14; transform-origin: 14px 106px; transform: scaleY(var(--plan-carpet, 0)); }
.plan__drawmask { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: var(--plan-draw, 0) 256; }
.plan__walls { fill: none; stroke: var(--sc-ink); stroke-width: 2; stroke-linecap: square; }
.plan__walls--dashed { stroke-dasharray: 4 3; opacity: calc(1 - var(--plan-solid, 0)); }
.plan__walls--solid { stroke-dasharray: calc(var(--plan-solid, 0) * 256) 256; }
.plan__counter { fill: var(--sc-ink); transform-origin: 60px 90px; transform: scaleX(var(--plan-counter, 0)); }
.plan__aisle path { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1; opacity: var(--plan-aisle, 0); }
.plan__dim path { fill: none; stroke: var(--sc-accent); stroke-width: 1; }
.plan__dim { transform-origin: 10px 122px; transform: scaleX(var(--plan-dim, 0)); }
.plan__crate { fill: none; stroke: var(--sc-ink); stroke-width: 1.5; opacity: var(--plan-crate, 0); }
.plan__label { font-family: var(--sc-font-mono); font-size: 7.5px; letter-spacing: 0.04em; fill: var(--accent-ink-on-paper); opacity: var(--plan-label, 0); }

/* -------------------------------------------------------------- layout -- */
/* The folio's margin. Chapter II cancels it: the hall is full bleed. */
:root { --main-pad: calc(var(--sc-gutter) + var(--folio-w) + var(--sc-7)); }
main { padding-left: var(--main-pad); }
main > * { min-width: 0; }
.sc-wrap { padding-inline: var(--sc-gutter); }

/* ------------------------------------------------------------ title page -- */
.title { min-height: 100svh; display: grid; align-items: end; padding: var(--sc-8) 0 var(--sc-8); }
.title__inner { padding-inline: var(--sc-gutter); max-width: 68rem; display: grid; gap: var(--sc-5); }
.title__masthead { margin: 0; }
.title__h1 { font-size: clamp(2.4rem, 1.2rem + 5.2vw, 6.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 0.98; max-width: 16ch; }
.title__dek { margin: 0; max-width: 44ch; font-size: var(--sc-t-lg); line-height: 1.4; letter-spacing: var(--sc-track-snug); color: var(--sc-ink-soft); text-wrap: pretty; }
.title__cta { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); }
.title__cta a, .colophon__ask a { color: var(--accent-ink-on-paper); text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
@media (hover: hover) and (pointer: fine) { .title__cta a:hover, .colophon__ask a:hover { text-decoration-thickness: 2px; } }

/* ---------------------------------------------------------- intertitles -- */
.intertitle { padding-block: clamp(4rem, 12vh, 9rem); }
.intertitle--quiet { min-height: 70svh; display: grid; align-items: center; }
.intertitle__inner { display: grid; gap: var(--sc-4); }
.intertitle__rule { display: block; height: 1px; background: var(--paper-line); }
.intertitle__line { display: flex; align-items: baseline; gap: var(--sc-5); }
.intertitle__num { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); color: var(--accent-ink-on-paper); letter-spacing: 0.06em; }
.intertitle__name { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); }

/* ------------------------------------------------------------ chapters -- */
.chapter { position: relative; }
.spread { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-9) var(--sc-8); align-items: start; padding-block: var(--sc-6) var(--sc-10); }
.spread__text { position: sticky; top: clamp(4rem, 14vh, 9rem); display: grid; gap: var(--sc-5); }
.spread__text .sc-display { max-width: 12ch; }
.spread__media { display: grid; gap: var(--sc-8); padding-top: var(--sc-9); }
.plate--offset { width: 68%; justify-self: end; }

.plate { margin: 0; display: grid; gap: var(--sc-3); }
.plate img { width: 100%; height: auto; background: var(--sc-surface); }
/* the frame clips; the photograph inside is a touch larger than it and drifts
   as the page passes, so a still reads as a window rather than a print */
.plate__frame { overflow: clip; }
.plate__img { scale: 1.1; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .plate__img { scale: 1; } }
.plate figcaption { display: flex; justify-content: space-between; gap: var(--sc-4); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.03em; color: var(--sc-ink-soft); border-top: 1px solid var(--paper-line); padding-top: var(--sc-2); }
.plate figcaption span:first-child { color: var(--sc-ink); }
.plate--render img { box-shadow: var(--sc-e2); }

/* chapter II: the hall. Painted on the section, not drifted. */
.chapter--built { margin-left: calc(-1 * var(--main-pad)); --sc-canvas: var(--hall-canvas); --sc-surface: var(--hall-surface); --sc-ink: var(--hall-ink); --sc-ink-soft: var(--hall-ink-soft); --sc-accent: var(--hall-accent); color: var(--hall-ink); background: var(--hall-canvas); }
.built__stage { background: var(--hall-canvas); }
.built__copy { max-width: min(44rem, 70vw); bottom: clamp(3rem, 12vh, 8rem); left: calc(var(--main-pad) + var(--sc-gutter)); }
.built__copy .sc-display { max-width: 14ch; font-weight: 500; letter-spacing: -0.03em; }
.built__lede { max-width: 40ch; }
.built__cap { margin: var(--sc-4) 0 0; }
/* a column of density under the folio only, so the chapter list stays legible
   over the busy left edge of the shop. The photograph keeps its contrast. */
/* the booth's white walls sit exactly under the lead corner, so the corner
   scrim here is denser and reaches further than the engine default */
.chapter--built .sc-scrim--lead { background: linear-gradient(to top right,
  color-mix(in oklab, var(--hall-canvas) 97%, transparent) 0%,
  color-mix(in oklab, var(--hall-canvas) 88%, transparent) 26%,
  color-mix(in oklab, var(--hall-canvas) 62%, transparent) 46%,
  color-mix(in oklab, var(--hall-canvas) 24%, transparent) 64%,
  transparent 80%); }
@media (max-width: 860px) { .chapter--built .sc-scrim--lead { background: linear-gradient(to top,
  color-mix(in oklab, var(--hall-canvas) 97%, transparent) 0%,
  color-mix(in oklab, var(--hall-canvas) 86%, transparent) 28%,
  color-mix(in oklab, var(--hall-canvas) 40%, transparent) 50%,
  transparent 66%); } }
.built__grain { position: absolute; z-index: 2; opacity: 0.07; mix-blend-mode: soft-light; }
.built__margin { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, color-mix(in oklab, var(--hall-canvas) 78%, transparent) 0, color-mix(in oklab, var(--hall-canvas) 45%, transparent) calc(var(--main-pad) * 0.8), transparent calc(var(--main-pad) * 1.6)); }
@media (max-width: 860px) { /* the booth's white walls sit exactly under the lead corner, so the corner
   scrim here is denser and reaches further than the engine default */
.chapter--built .sc-scrim--lead { background: linear-gradient(to top right,
  color-mix(in oklab, var(--hall-canvas) 97%, transparent) 0%,
  color-mix(in oklab, var(--hall-canvas) 88%, transparent) 26%,
  color-mix(in oklab, var(--hall-canvas) 62%, transparent) 46%,
  color-mix(in oklab, var(--hall-canvas) 24%, transparent) 64%,
  transparent 80%); }
@media (max-width: 860px) { .chapter--built .sc-scrim--lead { background: linear-gradient(to top,
  color-mix(in oklab, var(--hall-canvas) 97%, transparent) 0%,
  color-mix(in oklab, var(--hall-canvas) 86%, transparent) 28%,
  color-mix(in oklab, var(--hall-canvas) 40%, transparent) 50%,
  transparent 66%); } }
.built__grain { position: absolute; z-index: 2; opacity: 0.07; mix-blend-mode: soft-light; }
.built__margin { display: none; } }
/* light on dark: a touch more leading, tracking and weight */
.chapter--built .sc-display { line-height: 1.0; }
.chapter--built .sc-lede { line-height: 1.5; letter-spacing: -0.012em; font-weight: 450; }

/* chapter III: the plates */
.standing__head { display: grid; gap: var(--sc-5); max-width: 60rem; padding-block: var(--sc-4) var(--sc-9); }
.standing__head .sc-display { max-width: 12ch; }
.plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-8) var(--sc-6); align-items: start; }
.plate--hero { grid-column: 1 / 10; }
.plate--b { grid-column: 3 / 9; margin-top: var(--sc-6); }
.plate--c { grid-column: 9 / 13; margin-top: var(--sc-11); }
.plate--d { grid-column: 1 / 6; }
.plate--e { grid-column: 7 / 10; margin-top: var(--sc-9); }
.plate--f { grid-column: 5 / 11; }
.plate--g { grid-column: 1 / 7; margin-top: var(--sc-7); }
.plate--h { grid-column: 5 / 13; margin-top: var(--sc-6); }

/* chapter IV: the running list */
.team { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-7) var(--sc-8); padding-block: var(--sc-4) var(--sc-10); }
.team__figure { display: grid; gap: var(--sc-2); align-content: start; }
.team__num { margin: 0; font-family: var(--sc-font-display); font-size: clamp(5rem, 2rem + 12vw, 13rem); line-height: 0.9; letter-spacing: -0.05em; font-weight: 520; }
.team__numcap { margin: 0; }
.team__text { display: grid; gap: var(--sc-5); align-content: start; }
.team__text .sc-display { max-width: 12ch; }
.jobs { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--paper-line); }
.job { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-7) var(--sc-8); padding-block: var(--sc-5); border-bottom: 1px solid var(--paper-line); align-items: baseline; }
.job__h { grid-column: 1; }
.job__p { grid-column: 2; }
.job__n { grid-column: 1; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--accent-ink-on-paper); }
.job__h { margin: 0; display: flex; gap: var(--sc-5); align-items: baseline; font-size: var(--sc-t-lg); font-weight: 520; letter-spacing: var(--sc-track-snug); }
.job__p { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.team__line { grid-column: 2; margin: 0; font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); line-height: 1.2; max-width: 30ch; text-wrap: balance; }

/* ------------------------------------------------------------ colophon -- */
.colophon { min-height: 100svh; display: grid; align-items: end; padding-block: var(--sc-9) var(--sc-7); border-top: 1px solid var(--paper-line); }
.colophon__inner { display: grid; gap: var(--sc-8); }
.colophon__ask { margin: 0; font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); line-height: 1.25; max-width: 34ch; text-wrap: pretty; }
.colophon__plate { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-6); border-top: 1px solid var(--paper-line); padding-top: var(--sc-5); }
.colophon__plate dt { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: var(--sc-2); }
.colophon__plate dd { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; }
.colophon__plate a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .colophon__plate a:hover { color: var(--accent-ink-on-paper); } }
.colophon__foot { margin: 0; }

/* ------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  :root { --folio-w: 0px; }
  :root { --main-pad: 0px; }
  main { padding-left: 0; padding-top: 3.5rem; }
  .folio {
    top: 0; left: 0; right: 0; translate: none; width: auto;
    grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-3);
    padding: var(--sc-2) var(--sc-gutter);
    background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--paper-line);
    transition: color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
  }
  .folio.is-hall { background: color-mix(in oklab, var(--hall-canvas) 86%, transparent); }
  .folio__mark { width: 6.5rem; }
  .plan { width: 2.25rem; height: auto; order: 3; }
  .folio__chapter { order: 2; text-align: right; }
  .folio__list { display: none; }

  .title { min-height: calc(100svh - 3.5rem); padding-block: var(--sc-6); }
  .title__h1 { font-size: var(--sc-t-2xl); max-width: 14ch; }
  .spread { grid-template-columns: 1fr; gap: var(--sc-7); }
  .spread__text { position: static; }
  .spread__media { padding-top: 0; }
  .plate--offset { width: 78%; }
  .built__copy { max-width: none; }
  .plates { grid-template-columns: 1fr; gap: var(--sc-7); }
  .plates .plate { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .plate--portrait { width: 72%; }
  .team { grid-template-columns: 1fr; }
  .jobs, .team__line { grid-column: 1; }
  .job { grid-template-columns: 1fr; gap: var(--sc-3); }
  .job__p { grid-column: 1; }
  .colophon__plate { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .plan__walls { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .plan__carpet, .plan__counter, .plan__dim { transform: none !important; }
  .plan__aisle path, .plan__crate, .plan__label { opacity: 1 !important; }
}