/*
 * css/brand.css: the PONMINER design system.
 *
 * Structure, scale and token names come from the Colosseum brand sheet (the owner's own
 * project, reused here). The colour is the owner's: deep crimson ground, gilt gold, cream
 * marble and candlelight, taken from the reference paintings rather than from the
 * reference site, whose neutral greys were replaced throughout.
 *
 * Dark is the default because the brand lives at dusk; the light theme is the same palette
 * on parchment, with crimson taking the accent role gold plays at night.
 *
 * Nothing in here is page specific. Shell lives in site.css, pages in their own files.
 */

@font-face {
  font-family: 'Pantheon Text';
  src: url(../fonts/gt-pantheon-text-regular.woff2) format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Pantheon Text';
  src: url(../fonts/gt-pantheon-text-medium.woff2) format('woff2');
  font-style: normal; font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Favorit Mono';
  src: url(../fonts/abc-favorit-mono-regular.woff2) format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Old London';
  src: url(../fonts/old-london-initials.woff2) format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}

:root {
  --brand-font-display: 'Pantheon Text', Georgia, 'Times New Roman', serif;
  --brand-font-body: 'Pantheon Text', Georgia, 'Times New Roman', serif;
  --brand-font-label: 'Favorit Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand-font-initial: 'Old London', 'Pantheon Text', Georgia, serif;

  --brand-radius-sm: 0;
  --brand-radius-md: 0;
  --brand-radius-pill: 999px;

  --brand-space-2xs: .25rem;
  --brand-space-xs: .5rem;
  --brand-space-sm: .75rem;
  --brand-space-md: 1rem;
  --brand-space-lg: 1.5rem;
  --brand-space-xl: 2rem;
  --brand-space-2xl: 3rem;
  --brand-space-3xl: 4.5rem;

  --brand-transition-fast: .16s ease;
  --brand-transition-base: .22s ease;

  --brand-shell-max: 1280px;
  --brand-gutter: 32px;
  --brand-nav-height: 72px;

  --brand-decorative-art-opacity: 1;
}

/* ---------------------------------------------------------------- dark (default) */
:root,
:root[data-theme='dark'] {
  --brand-bg: #2b0a0d;
  --brand-bg-elevated: #3a1014;
  --brand-bg-muted: #330d11;
  --brand-bg-strong: #240709;
  --brand-bg-hover: #47161a;
  --brand-bg-inverse: #f7efe0;

  --brand-border: #713036;
  --brand-border-primary: #7d3a36;
  --brand-border-subtle: #4c191d;
  --brand-border-strong: #a2643f;
  --brand-border-active: #d9a83f;

  --brand-text-primary: #f7ecd8;
  --brand-text-secondary: #e0cbaa;
  --brand-text-ink: #fdf6e9;
  --brand-text-body: #ddc6a4;
  --brand-text-muted: #bb9a74;
  --brand-text-inverse: #2b0a0d;
  --brand-text-on-accent: #2b0a0d;

  --brand-accent: #e3b45b;
  --brand-accent-strong: #c2912f;
  --brand-accent-readable: #eec877;
  --brand-accent-link: #eec877;
  --brand-accent-hover: #f6db9b;
  --brand-action-bg: #d9a83f;
  --brand-action-bg-hover: #eec877;
  --brand-accent-soft: rgba(227, 180, 91, .12);
  --brand-focus: rgba(227, 180, 91, .38);

  --brand-gold: #d9a83f;
  --brand-crimson: #8e1116;

  --brand-danger: #f0736a;
  --brand-feedback-positive: #7fbf6a;
  --brand-feedback-negative: #f0736a;

  --brand-footer-bg: #1d0507;
  --brand-footer-border: #6b2a22;
  --brand-footer-text: #f7ecd8;
  --brand-footer-text-muted: #c6a67f;
  --brand-logo-surface: #3a1014;

  --brand-decorative-art-opacity: .82;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- light (parchment) */
:root[data-theme='light'] {
  --brand-bg: #f7efe0;
  --brand-bg-elevated: #f1e5d1;
  --brand-bg-muted: #fbf5ea;
  --brand-bg-strong: #f7efe0;
  --brand-bg-hover: #ecdec6;
  --brand-bg-inverse: #2b0a0d;

  --brand-border: #d9c5a3;
  --brand-border-primary: #cdb691;
  --brand-border-subtle: #e9dcc4;
  --brand-border-strong: #b1906a;
  --brand-border-active: #8e1116;

  --brand-text-primary: #33191a;
  --brand-text-secondary: #664234;
  --brand-text-ink: #241010;
  --brand-text-body: #4d3227;
  --brand-text-muted: #86654c;
  --brand-text-inverse: #f7efe0;
  --brand-text-on-accent: #fdf3e2;

  --brand-accent: #8e1116;
  --brand-accent-strong: #6e0c11;
  --brand-accent-readable: #7c0e13;
  --brand-accent-link: #8e1116;
  --brand-accent-hover: #59090d;
  --brand-action-bg: var(--brand-accent);
  --brand-action-bg-hover: var(--brand-accent-strong);
  --brand-accent-soft: rgba(142, 17, 22, .08);
  --brand-focus: rgba(142, 17, 22, .32);

  --brand-gold: #a9791f;
  --brand-crimson: #8e1116;

  --brand-danger: #b42318;
  --brand-feedback-positive: #3f7a34;
  --brand-feedback-negative: #b42318;

  --brand-footer-bg: #4a0a0d;
  --brand-footer-border: #7c1a19;
  --brand-footer-text: #f9f1e3;
  --brand-footer-text-muted: #ddc4a4;
  --brand-logo-surface: #33191a;

  --brand-decorative-art-opacity: 1;
  color-scheme: light;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--brand-bg);
  color: var(--brand-text-primary);
  font-family: var(--brand-font-body);
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--brand-border-subtle); margin: 0; }
/* .action sets display, which would otherwise beat the [hidden] default and leave a
   stopped rig showing its Stop button */
[hidden] { display: none !important; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

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

/* ---------------------------------------------------------------- type scale */
.display {
  font-family: var(--brand-font-display);
  font-weight: 400;
  color: var(--brand-text-ink);
  letter-spacing: -.03em;
  line-height: 1.3;
  text-wrap: balance;
}
.display--hero { font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4rem); line-height: 1.125; letter-spacing: -.04em; }
.display--section { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.3; }
.display--sub { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35; letter-spacing: -.02em; }

/* the illuminated first letter: Old London, in the accent, optically enlarged */
.initial {
  font-family: var(--brand-font-initial);
  font-size: 1.1em;
  line-height: 0;
  letter-spacing: .015em;
  color: var(--brand-accent);
}

.lede {
  color: var(--brand-text-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.label {
  font-family: var(--brand-font-label);
  font-size: 11px;
  line-height: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-text-muted);
}
.label--sm { font-size: 9px; line-height: 14px; letter-spacing: .03em; }
.label--xs { font-size: 7px; line-height: 10px; letter-spacing: .08em; }
.mono { font-family: var(--brand-font-label); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- action (the double frame) */
.action {
  display: inline-flex;
  padding: 4px;
  background: var(--brand-bg-elevated);
  border: 1px solid var(--brand-border-primary);
  transition: background var(--brand-transition-fast), border-color var(--brand-transition-fast);
}
.action__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  background: var(--brand-action-bg);
  border: 1px solid var(--brand-accent-strong);
  color: var(--brand-text-on-accent);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  transition: background var(--brand-transition-fast);
}
.action:hover .action__inner { background: var(--brand-action-bg-hover); }
.action:hover { border-color: var(--brand-border-strong); }
.action--compact { padding: 2px; }
.action--compact .action__inner { min-height: 34px; padding: 0 12px; font-size: 14px; line-height: 22px; }
.action--block { display: flex; width: 100%; }
.action--quiet .action__inner {
  background: var(--brand-bg-muted);
  border-color: var(--brand-border);
  color: var(--brand-text-primary);
}
.action--quiet:hover .action__inner { background: var(--brand-bg-hover); }
.action[aria-disabled='true'], .action:disabled { opacity: .5; pointer-events: none; }
.action__icon { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- separators and frames */
.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--brand-border-strong);
}
.separator::before, .separator::after {
  content: '';
  width: 9px; height: 9px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}
.separator__line { width: 96px; height: 1px; background: currentColor; opacity: .7; }

/* an engraved plate: hairline outer rule, inset inner rule */
.plate {
  position: relative;
  background: var(--brand-bg-muted);
  border: 1px solid var(--brand-border);
  padding: 4px;
}
.plate__inner {
  border: 1px solid var(--brand-border-subtle);
  background: var(--brand-bg-muted);
  height: 100%;
}

.rule { height: 1px; background: var(--brand-border-subtle); }

/* ---------------------------------------------------------------- layout */
.shell { width: 100%; max-width: var(--brand-shell-max); margin: 0 auto; padding-inline: var(--brand-gutter); }
.section { position: relative; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.stack { display: flex; flex-direction: column; }
.center { text-align: center; }
.heading { display: flex; flex-direction: column; align-items: center; gap: var(--brand-space-lg); max-width: 40rem; margin-inline: auto; }

.art { opacity: var(--brand-decorative-art-opacity); pointer-events: none; user-select: none; }

@media (max-width: 767px) {
  :root { --brand-gutter: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- utilities
 * The CSP has no 'unsafe-inline' for styles, so a page cannot carry a style
 * attribute. These few classes cover everything the pages used to set inline. */
.stack--wide { gap: var(--brand-space-2xl); }
.stack--flush { padding: 0; }
.gap-top { margin-top: var(--brand-space-2xl); }
.pad-y { padding-block: var(--brand-space-xl); }
.text-start { text-align: left; }
.row-start { justify-content: flex-start; }
.row-center { justify-content: center; }

/* ---------------------------------------------------------------- plate row (engraved tiles), home and /epoch */
.tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--brand-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--brand-space-xs);
  scrollbar-width: thin;
}
.tiles::-webkit-scrollbar { height: 6px; }
.tiles::-webkit-scrollbar-thumb { background: var(--brand-border); }
.tile { scroll-snap-align: center; }
.tile__inner { display: grid; gap: var(--brand-space-sm); padding: var(--brand-space-md); height: 100%; }
.tile__art {
  display: grid; place-items: center;
  height: 180px;
  background: var(--brand-bg-elevated);
  border: 1px solid var(--brand-border-subtle);
}
.tile__art img { max-height: 132px; width: auto; opacity: var(--brand-decorative-art-opacity); }
.tile h3 { font-family: var(--brand-font-display); font-size: 1.125rem; font-weight: 500; color: var(--brand-text-ink); }
.tile p { color: var(--brand-text-body); font-size: .9375rem; line-height: 1.55; }