/* Shared shell for the standalone content pages (About, Contact).
   Loads after rap.css; rap.css supplies colours, .disp, .btn, .field, .foot. */

:root {
  --sc-t-xs: clamp(.75rem, .72rem + .15vw, .82rem);
  --sc-t-sm: clamp(.875rem, .84rem + .18vw, .95rem);
  --sc-t-base: clamp(1rem, .96rem + .22vw, 1.125rem);
  --sc-t-lg: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-ease-out: cubic-bezier(.23, 1, .32, 1);
  --rail: 0px;
}

body {
  margin: 0;
  font-family: var(--sc-font-text);
  -webkit-font-smoothing: antialiased;
}

/* Header */
.pbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 68px;
  padding: 10px clamp(16px, 3vw, 36px);
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
}
.pbar__mark { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--sc-ink); text-decoration: none; }
.pbar__glyph { width: 18px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.pbar__glyph circle { fill: currentColor; stroke: none; }
.pbar__blade { stroke: var(--amber); }
.pbar__word { font: 800 1.35rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: .03em; }
.pbar__nav { display: flex; gap: clamp(12px, 2vw, 26px); }
.pbar__nav a {
  padding: 8px 0;
  font: 500 12px/1 var(--sc-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pbar__nav a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--amber); }
@media (hover: hover) { .pbar__nav a:hover { color: var(--sc-ink); } }
@media (max-width: 620px) {
  .pbar__word { display: none; }
  .pbar { gap: 10px; }
}

/* Page body */
.page {
  box-sizing: border-box;
  max-width: min(78rem, 100%);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) clamp(20px, 5vw, 80px) clamp(64px, 8vw, 110px);
  padding-left: clamp(20px, 5vw, 80px);
}
.page__eyebrow { letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.page__h { margin: 14px 0 0; max-width: 22ch; }
.page__lede { margin: 20px 0 0; max-width: 58ch; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }

.prose {
  display: grid;
  gap: 18px;
  max-width: 66ch;
  margin-top: clamp(34px, 5vw, 56px);
  font-size: var(--sc-t-base);
  line-height: 1.65;
  color: color-mix(in oklab, var(--sc-ink) 84%, transparent);
}
.prose p { margin: 0; }
.prose h2 {
  margin: clamp(18px, 3vw, 30px) 0 0;
  font: 800 var(--sc-t-xl)/1.04 var(--sc-font-display);
  text-transform: uppercase;
  color: var(--sc-ink);
}
.prose h2:first-child { margin-top: 0; }
.prose cite { font-style: italic; color: var(--sc-ink); }
.prose .link { width: fit-content; color: var(--sc-ink); }

.page__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(30px, 5vw, 48px);
  padding-top: clamp(24px, 4vw, 36px);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent);
}

/* Contact page: copy beside the form */
.page__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  margin-top: clamp(34px, 5vw, 56px);
}
.page__split .prose { margin-top: 0; }
@media (max-width: 900px) { .page__split { grid-template-columns: 1fr; } }

.cform {
  position: relative;
  padding: clamp(20px, 3.4vw, 32px);
  background: var(--sc-surface);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent);
  border-radius: 4px;
}