/* Design tokens and page-level styles. */

:root {
  --color-night: #0c1412;
  --color-wall: #1e3a35;
  --color-wall-stripe: #21403a;
  --color-wainscot: #2a1d14;
  --color-floor: #4a3121;
  --color-ink: #f3ead7;
  --color-ink-muted: #c9bc9f;
  --color-paper: #f6efdf;
  --color-paper-ink: #2a221a;
  --color-paper-muted: #6b5d4b;
  --color-gold: #c99a3b;
  --color-gold-light: #f1d48a;
  --color-gold-dark: #7a5a1c;
  --color-beer: #e0a526;
  --color-fact: #2f6b4f;
  --color-fiction: #a0521d;
  --color-focus: #ffd56b;

  --font-display: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --font-label: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --page-gutter: clamp(16px, 4vw, 48px);
  --canvas-height: clamp(220px, 50vh, 460px);

  color-scheme: dark;
}

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

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

/* While walking the full-screen corridor, the page behind it must not scroll. */
html.is-in-gallery,
html.is-in-gallery body {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-night);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.55;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

button {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Title block, shown in the foyer. */

.site-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: normal;
}

.site-title-main {
  font-size: clamp(1.9rem, 6.5vw, 3.6rem);
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-gold-light);
  text-shadow: 0 2px 0 var(--color-gold-dark);
}

.site-title-sub {
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}

/* Gallery owner line, styled like an engraved brass plaque. */
.site-curator {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-gold-dark);
  background: linear-gradient(180deg, rgb(201 154 59 / 0.18), rgb(122 90 28 / 0.18));
  font-family: var(--font-label);
  font-size: 0.8rem;
}

.site-curator-label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.site-curator-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--color-gold-light);
}

.site-curator-tagline {
  padding-left: 0.6rem;
  border-left: 1px solid var(--color-gold);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-ink-muted);
}

.site-footer {
  padding: 1.25rem var(--page-gutter) 1.5rem;
  color: var(--color-ink-muted);
  font-family: var(--font-label);
  font-size: 0.75rem;
  text-align: center;
  opacity: 0.8;
}

.site-footer p {
  max-width: 48rem;
  margin: 0.25rem auto;
}

/* Reduced motion: when the visitor chose it (motion-reduced), or when the OS asks for it and the
   visitor did not explicitly switch motion on (motion-full). See src/features/motion/motion.js. */
html.motion-reduced *,
html.motion-reduced *::before,
html.motion-reduced *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) *,
  html:not(.motion-full) *::before,
  html:not(.motion-full) *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}