/* The Middle Room — main.css (v1) */
:root {
  --color-bg: #f7f4ee;
  --color-surface: #fbf9f5;
  --color-surface-2: #f2ede4;
  --color-text: #242922;
  --color-text-muted: #5f625b;
  --color-border: #d9d2c7;
  --color-accent: #486277;
  --color-accent-soft: #e8eef2;
  --color-callout: #f3efe7;
  --color-focus: #2f4f67;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 72rem;
  --measure: 44rem;
  --measure-wide: 52rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, .03);
  --border: 1px solid var(--color-border);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth
}

body,
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0
}

img,
svg,
video,
canvas,
audio,
iframe {
  display: block;
  max-width: 100%
}

img {
  height: auto
}

input,
button,
textarea,
select {
  font: inherit
}

button {
  cursor: pointer
}

a {
  color: inherit;
  text-decoration: none
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-text)
}

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.01em
}

h1 {
  font-size: clamp(2.25rem, 4vw, 3rem)
}

h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem)
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.25rem)
}

small,
.record-meta,
.meta-note,
.site-note,
.eyebrow,
.record-number {
  color: var(--color-text-muted)
}

.eyebrow {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase
}

.record-number {
  font-size: .85rem
}

.hero-intro,
.page-intro,
.record-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: var(--measure)
}

.site-mark a {
  font-weight: 650;
  letter-spacing: -.01em
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto
}

.stack>*+* {
  margin-top: var(--space-5)
}

.prose {
  max-width: var(--measure)
}

.prose>*+* {
  margin-top: var(--space-4)
}

.prose h2 {
  margin-top: var(--space-7)
}

.prose h2+* {
  margin-top: var(--space-4)
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3)
}

.section {
  padding-block: var(--space-7)
}

.section-closing {
  padding-bottom: var(--space-9)
}

.two-column-contrast,
.record-grid {
  display: grid;
  gap: var(--space-5)
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -999px;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-surface)
}

.skip-link:focus {
  top: var(--space-4)
}

.site-header {
  border-bottom: var(--border);
  background: rgba(251, 249, 245, .9);
  backdrop-filter: blur(4px)
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4)
}

.site-mark {
  font-size: 1rem
}

.site-nav .nav-list,
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0
}

.site-nav a,
.footer-nav a {
  color: var(--color-text-muted)
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"],
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--color-text)
}

.site-footer {
  border-top: var(--border);
  padding-block: var(--space-6)
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4)
}

.site-note {
  font-size: .9rem
}

.page-header .stack>*+* {
  margin-top: var(--space-4)
}

.section-heading>*+* {
  margin-top: var(--space-2)
}

.hero .stack>*+* {
  margin-top: var(--space-5)
}

.button,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  border: var(--border);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease
}

.button {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff
}

.button:hover,
.button:focus-visible {
  background: var(--color-focus);
  border-color: var(--color-focus)
}

.button-secondary {
  background: var(--color-surface);
  color: var(--color-text)
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: var(--color-surface-2)
}

.text-link,
.prose a,
.record-card a,
.record-pagination a,
.meta-note a {
  color: var(--color-accent)
}

.text-link:hover,
.text-link:focus-visible,
.prose a:hover,
.prose a:focus-visible,
.record-card a:hover,
.record-card a:focus-visible,
.record-pagination a:hover,
.record-pagination a:focus-visible,
.meta-note a:hover,
.meta-note a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .14em
}

.contrast-block,
.record-card,
.meta-list,
.callout {
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-subtle)
}

.contrast-block h2 {
  margin-bottom: var(--space-4)
}

.contrast-block ul,
.prose ul,
.prose ol {
  padding-left: 1.25rem
}

.contrast-block li+li,
.prose li+li {
  margin-top: var(--space-2)
}

.record-card>*+* {
  margin-top: var(--space-3)
}

.record-summary {
  max-width: var(--measure)
}

.record-meta,
.meta-note {
  font-size: .95rem
}

.meta-list {
  display: grid;
  gap: var(--space-4)
}

.meta-list div {
  display: grid;
  gap: var(--space-1)
}

.meta-list dt {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted)
}

.meta-list dd {
  margin: 0
}

.prose p,
.prose ul,
.prose ol,
.prose dl,
.prose blockquote {
  max-width: var(--measure)
}

.prose blockquote {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted)
}

.callout>*+* {
  margin-top: var(--space-3)
}

.record-body {
  max-width: var(--measure-wide)
}

.transcript-block {
  max-width: var(--measure-wide);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden
}

.transcript-block p {
  margin: 0;
  padding: var(--space-4) var(--space-5)
}

.transcript-block p+p {
  border-top: var(--border)
}

.record-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4)
}

.record-pagination p {
  margin: 0
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px
}

@media (min-width:48rem) {
  .two-column-contrast {
    grid-template-columns: 1fr 1fr
  }

  .record-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:40rem) {

  .header-inner,
  .footer-inner,
  .record-pagination {
    align-items: flex-start
  }

  .site-nav .nav-list,
  .footer-nav {
    gap: var(--space-3)
  }

  .button-row {
    flex-direction: column;
    align-items: flex-start
  }

  .button,
  .button-secondary {
    width: 100%
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important
  }
}

.page-header .stack {
  max-width: var(--measure);
}