:root,
body {
  color-scheme: dark;

  /*
    PeakRipe Frame Contract v1.
    Maison Gillardeau remains the visual source of truth until an explicitly
    approved Frame Contract v2 replaces it.
  */
  --bg: #0b0b0c;
  --ink: #f4efe4;
  --muted: rgba(244, 239, 228, 0.74);
  --line: rgba(244, 239, 228, 0.12);
  --line-strong: rgba(244, 239, 228, 0.2);
  --accent: #d4b57a;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-strong: rgba(255, 255, 255, 0.05);

  --site-shell-width: 1260px;
  --max: var(--site-shell-width);
  --page-frame-pad: clamp(22px, 2.5vw, 34px);
  --content-pad: var(--page-frame-pad);
  --header-shell-pad: var(--content-pad);
  --footer-shell-pad: var(--content-pad);
  --frame-radius: 36px;
  --frame-gap: clamp(24px, 3vw, 36px);

  --radius: 28px;
  --layout-gap: var(--frame-gap);
  --content: 790px;
  --toc-column: clamp(168px, 17vw, 224px);
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-ui: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  --focus: rgba(212, 181, 122, 0.95);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 0%, rgba(212, 181, 122, 0.18), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(212, 181, 122, 0.14), transparent 22%),
    radial-gradient(circle at 70% 72%, rgba(212, 181, 122, 0.08), transparent 24%),
    linear-gradient(180deg, #131315 0%, #0b0b0c 38%, #090909 100%);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 20px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #101010;
  font-weight: 700;
}

.skip-link:focus { top: 20px; }

.site-shell {
  width: min(var(--site-shell-width), calc(100% - 32px));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.site-shell,
.site-shell * {
  min-width: 0;
}

.site-shell > .hero,
.site-shell > main,
.site-shell > .page-main,
.site-shell > .page-frame,
.site-shell > .surface-frame,
.site-shell > .section-frame,
.site-shell > .profile-frame,
.site-shell > .shell,
.site-shell > main > .shell,
.site-shell > .page-main > .shell,
#profile-page-root > .hero {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.page-main {
  display: grid;
  gap: var(--frame-gap);
}

.page-frame,
.surface-frame,
.section-frame,
.profile-frame,
.hero {
  border: 1px solid var(--line);
  border-radius: var(--frame-radius);
  box-shadow: var(--shadow);
}

.page-frame,
.surface-frame,
.section-frame,
.profile-frame {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at 84% 30%, rgba(212, 181, 122, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(16, 16, 17, 0.78), rgba(10, 10, 10, 0.94));
}

.content-frame,
.page-frame__inner,
.hero-inner,
.hero-map__frame,
.section-frame__inner,
.profile-frame__inner {
  padding: var(--content-pad);
}

.hero-inner {
  gap: var(--frame-gap);
}

.main-grid {
  gap: var(--frame-gap);
}

.button:focus-visible,
.skip-link:focus,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(11, 11, 12, 0.75);
}

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

@media (max-width: 720px) {
  body {
    --page-frame-pad: 14px;
    --content-pad: var(--page-frame-pad);
    --header-shell-pad: var(--content-pad);
    --footer-shell-pad: var(--content-pad);
    --frame-radius: 28px;
  }

  .site-shell {
    width: min(var(--site-shell-width), calc(100% - 20px));
  }
}