/* ============================================================
   PBC Swiss — Design System
   Tokens, reset, base typography, layout primitives, utilities.
   Loaded globally on every page.
   ============================================================ */

:root {
  /* Surfaces & ink */
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #222;
  --muted: #7a7a7a;
  --hair: #e8e8e8;
  --line: #0a0a0a;

  /* Categorical accent palette */
  --sw: #7EB4E2;  /* Software (blue) */
  --hw: #8DD5A0;  /* Hardware (green) */
  --co: #F5C47A;  /* Company (gold) */
  --pu: #C4A5D6;  /* Publication (purple) */
  --ev: #7B8FA1;  /* Events (slate) */
  --cm: #E8917D;  /* Communications (terracotta) */
  --sv: #5FB5CC;  /* Services (cyan teal) */

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 128px;

  /* Type scale */
  --t-label: 11px;
  --t-body: 15px;
  --t-deck: 17px;
  --t-meta: 13px;
  --t-h4: 14px;
  --t-h3: 32px;
  --t-cta: clamp(36px, 4vw, 64px);
  --t-h2: clamp(48px, 6vw, 96px);
  --t-h1: clamp(56px, 7.4vw, 128px);
  --tracking-tight: -.04em;
  --tracking-label: .18em;

  /* Layout */
  --max: 1440px;
  --gutter: 32px;
  --col-gap: 24px;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Unported templates inherit the previous theme's body typography so the page-body
   sizing the legacy CSS expects (em-based, system-font baseline) keeps working. The
   Swiss header and footer remain in Inter regardless. Remove this block once every
   template has been ported and the pbc-legacy-body class is no longer added. */
body.pbc-legacy-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #333840;
  line-height: 1.7;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
}
body.pbc-legacy-body p { line-height: 1.7; }
.site-header,
.site-footer {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  letter-spacing: normal;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; display: block; height: auto; }
button { font-family: inherit; }
ul, ol { list-style: none; }

/* ------------------------------------------------------------
   Wrapper reset — neutralize any twentytwentyone parent containers
   ------------------------------------------------------------ */
#page,
.site,
.site-content,
#content,
main.site-main,
.wp-site-blocks {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

body,
body.home,
body.archive,
body.search,
body.single,
body.page {
  background: var(--bg) !important;
  color: var(--ink);
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); }

main { display: block; }

/* ------------------------------------------------------------
   Typography utilities
   ------------------------------------------------------------ */
.num { font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums; }

.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ink);
  vertical-align: middle;
}

/* ------------------------------------------------------------
   Section shell — used by every section that appears between hero and footer
   ------------------------------------------------------------ */
.sec { border-bottom: 1px solid var(--line); padding: var(--s-9) 0; }

.sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-bottom: var(--s-7);
  gap: var(--col-gap);
}
.sec-head h2 {
  font-size: clamp(34px, 4.4vw, 72px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: .95;
}
.sec-head h2 b { font-weight: 700; }
.sec-head .meta {
  font-size: var(--t-meta);
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}
.sec-head .meta strong {
  display: block;
  font-size: var(--t-meta);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

/* ------------------------------------------------------------
   Page hero — used by every inner template
   (vlabel + giant id number + h1 + deck + 4-cell meta strip)
   ------------------------------------------------------------ */
.hero {
  padding: var(--s-8) 0 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hero .grid-12 { align-items: end; }
.hero .vlabel { position: absolute; left: var(--gutter); top: var(--s-8); }

.hero-num {
  grid-column: 2 / span 2;
  font-weight: 200;
  font-size: 88px;
  letter-spacing: var(--tracking-tight);
  line-height: .9;
  color: var(--ink);
}
.hero-num small {
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
  display: block;
  /* Positive margin-left nudges the caption's visible left edge under the
     visible "0" stroke of the tabular-figure ordinal above (the digit glyph
     is centered in its tabular cell, so its ink starts a few pixels in from
     the box edge). Tuned for Inter at 88 px; revisit if the hero-num font
     or size changes. */
  margin: 6px 0 0 14px;
}

.hero-title { grid-column: 4 / span 8; }
.hero-title h1 {
  font-size: var(--t-h1);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: .95;
}
.hero-title h1 b { font-weight: 700; }
/* Headline hierarchy: mute lines 2+ of a multi-line H1. ::first-line works
   whether the break is a <br> or natural wrap. */
.exhibit-hero .hero-title h1 { color: var(--muted); }
.exhibit-hero .hero-title h1::first-line { color: var(--ink); }

.hero-deck {
  grid-column: 7 / span 5;
  margin-top: var(--s-5);
  font-size: var(--t-deck);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  font-weight: 400;
}
.hero-deck a { color: #5cb3cc; }
.hero-deck a:hover { color: #7ac5d9; }

.hero-meta-wrap {
  border-top: 1px solid var(--line);
  margin-top: var(--s-6);
  background: #efefef;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--col-gap);
  padding: 22px 0;
}
.hero-meta .cell .l {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.hero-meta .cell .v {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* Compact modifier for .hero — used where the meta strip / sticky band
   should be visible without a tall scroll (timeline, exhibitions). */
.hero-compact { padding-top: 28px; }
.hero-compact .vlabel { top: 28px; }
.hero-compact .hero-num { font-size: 44px; line-height: .95; }
.hero-compact .hero-num small { font-size: 12px; margin-top: 4px; }
.hero-compact .hero-title h1 {
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1;
}
.hero-compact .hero-deck {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
}
.hero-compact .hero-meta-wrap { margin-top: 22px; }
.hero-compact .hero-meta { padding: 12px 0; }
.hero-compact .hero-meta .cell .l { font-size: 10px; margin-bottom: 3px; }
.hero-compact .hero-meta .cell .v { font-size: 16px; }

/* ------------------------------------------------------------
   Buttons & forms
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn--inverse { background: transparent; color: #fff; border-color: #fff; }
.btn--inverse:hover { background: #fff; color: var(--ink); }

.form {
  display: flex;
  border: 1px solid #fff;
}
.form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: var(--t-body);
  padding: var(--s-4) 18px;
}
.form input::placeholder { color: #888; }
.form button {
  background: #fff;
  color: var(--ink);
  border: none;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: var(--t-meta);
  text-transform: uppercase;
  padding: 0 var(--s-5);
  cursor: pointer;
}
.form button:disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
}
.form input:disabled {
  color: #666;
  cursor: not-allowed;
}
.form input:disabled::placeholder { color: #555; }

/* ------------------------------------------------------------
   Skip link (a11y)
   ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
.skip-link:focus {
  position: fixed;
  left: var(--s-4);
  top: var(--s-4);
  background: var(--ink);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  z-index: 100;
}

/* ------------------------------------------------------------
   Responsive — breakpoints from mockup
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .hero-num { grid-column: 1 / span 4; font-size: 80px; }
  .hero-title { grid-column: 1 / span 12; }
  .hero-deck { grid-column: 1 / span 12; }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .hero { padding-top: var(--s-7); }
  .sec { padding: var(--s-7) 0; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .meta { text-align: left; }
}