/* ===================================================================
   THE CATALOGUE — shared design system
   Linked by every page. Anything defined here must never be redefined
   in a page's own <style>; page files carry only their own components.

   One typeface in two exactly balanced registers: expanded capitals for
   everything monumental, normal-width lowercase for everything read.
   Twelve columns, an eight-pixel baseline, a seventy-two-pixel rhythm.
   =================================================================== */

/* -- palette --------------------------------------------------------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --ground:  #14171a;
  --panel:   #1b1f22;
  --stone:   #e9e7df;
  --muted:   #8f9793;
  --rule:    rgba(233, 231, 223, 0.15);
  --rule-2:  rgba(233, 231, 223, 0.28);
  --accent:  #6fb69c;
}

[data-theme="light"] {
  color-scheme: light;
  --ground:  #e9e7df;
  --panel:   #dfdcd2;
  --stone:   #14171a;
  --muted:   #5d6461;
  --rule:    rgba(20, 23, 26, 0.16);
  --rule-2:  rgba(20, 23, 26, 0.3);
  --accent:  #2c6a56;
}

:root {
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --u: 8px;                       /* baseline unit */
  --rhythm: 72px;                 /* section rhythm */
  --margin: clamp(1.25rem, 5vw, 4.5rem);
  --gutter: 24px;
}

/* -- base ------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.6;
  background: var(--ground);
  color: var(--muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--ground); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.shell { padding-inline: var(--margin); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

/* -- the two registers ----------------------------------------------- */
/* Monumental: expanded capitals. The selector list is the union across
   every page, so a page with no .years or .plate-caption simply matches
   nothing — cheaper than maintaining two copies of the rule. */
.mono-caps, .band-label, .status, .figure-key, .plate-caption, .stack,
.years, .role, .note h3, nav a, .wordmark {
  font-stretch: 112%;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Quiet: normal width, lowercase, read at length. */
.read { font-stretch: 100%; font-weight: 400; font-size: 1rem; line-height: 1.6; }

/* -- header ---------------------------------------------------------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: calc(var(--u) * 3) var(--margin);
  border-bottom: 1px solid var(--rule);
}

.wordmark { color: var(--stone); text-decoration: none; white-space: nowrap; }

nav { display: flex; align-items: center; gap: calc(var(--u) * 4); }
nav a { text-decoration: none; color: var(--muted); }
nav a:hover, nav a[aria-current="page"] { color: var(--stone); }

.swatch {
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  padding: 0;
  border: 1px solid var(--rule-2);
  background: var(--stone);
  cursor: pointer;
}

.swatch:hover { background: var(--accent); border-color: var(--accent); }

/* -- hero ------------------------------------------------------------ */
.hero { padding-block: calc(var(--u) * 5) calc(var(--u) * 6); }

.hero h1 {
  font-stretch: 125%;
  font-weight: 600;
  font-size: clamp(1.75rem, 4.1vw, 3.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--stone);
}

.hero h1 span { display: block; }
.hero h1 span:last-child { color: var(--accent); }

/* -- section band: a full-bleed rule carrying a label at each end ----- */
.band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding: calc(var(--u) * 2) var(--margin);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}

.band strong { font-weight: 500; color: var(--stone); }

/* -- footer ---------------------------------------------------------- */
footer { padding-block: calc(var(--u) * 7) calc(var(--u) * 5); }

.contact { grid-column: 3 / 8; }
.contact .key { color: var(--muted); }

.contact a.mail {
  display: inline-block;
  margin-top: var(--u);
  font-stretch: 105%;
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: 0;
  color: var(--stone);
  text-decoration: none;
  word-break: break-word;
}

.contact a.mail:hover { color: var(--accent); }

/* The same hairline row used by the works index, so the links belong to
   the page's grammar instead of forming a ragged stack of words. */
.elsewhere { grid-column: 9 / 13; list-style: none; border-top: 1px solid var(--rule); }
.elsewhere li { border-bottom: 1px solid var(--rule); }

.elsewhere a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: calc(var(--u) * 1.5);
  font-stretch: 112%;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.elsewhere a i { font-style: normal; color: var(--rule-2); transition: transform 0.25s ease, color 0.25s ease; }
.elsewhere a:hover { color: var(--stone); }
.elsewhere a:hover i { color: var(--accent); transform: translateX(4px); }

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--u) * 1.5) var(--gutter);
  margin-top: var(--rhythm);
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

/* -- shared responsive ------------------------------------------------ */
@media (max-width: 1080px) {
  .contact { grid-column: 1 / 10; }
  .elsewhere { grid-column: 1 / 10; margin-top: calc(var(--u) * 5); }
}

@media (max-width: 700px) {
  nav { gap: calc(var(--u) * 2.5); }
  .contact, .elsewhere { grid-column: 1 / 13; }
  .contact a.mail { font-size: 1rem; font-stretch: 100%; letter-spacing: 0.01em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}