:root {
  color-scheme: light;
  --ground: #f2eedf;
  --paper: #fbf9f1;
  --paper-deep: #e9e3d2;
  --ink: #182f3b;
  --ink-soft: #344c54;
  --ink-muted: #53676b;
  --route: #176f68;
  --route-dark: #105850;
  --route-pale: #e3eee6;
  --gold: #a77c35;
  --proof: #8c483b;
  --proof-pale: #f3e8df;
  --line: #c8c0ad;
  --line-dark: #a69c84;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ground);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-padding-top: 24px; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--ground); }
a { color: var(--route-dark); text-underline-offset: 0.2em; }
a:hover { color: var(--proof); }
a:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { z-index: 20; position: absolute; top: 8px; left: 8px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; transform: translateY(calc(-100% - 14px)); color: var(--paper); background: var(--ink); font-weight: 700; text-decoration: none; }
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--gold); outline-offset: 4px; }
.frame, .page-frame { width: min(100% - 64px, 1280px); margin: 0 auto; }
.frame > header, .page-frame > header, header.site-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-weight: 680; letter-spacing: -0.015em; }
.brand:hover { color: var(--ink); }
.brand-glyph { width: 32px; height: 32px; display: grid; place-items: center; position: relative; border: 1px solid var(--route); color: var(--route-dark); font: 500 1rem/1 Georgia, "Times New Roman", serif; }
.brand-glyph::after { content: ""; width: 10px; height: 1px; position: absolute; top: 6px; right: -6px; transform: rotate(-42deg); background: var(--gold); }
.brand-glyph span { position: absolute; z-index: 1; right: 4px; bottom: 3px; color: var(--gold); font: 700 0.72rem/1 ui-sans-serif, system-ui, sans-serif; }
.home-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 0.9rem; white-space: nowrap; }
.home-link a { color: inherit; }
.static-main { width: min(100%, 820px); min-height: calc(100vh - 230px); padding: clamp(40px, 6vw, 72px) 0 76px; }
.marker { color: #735920; font: 650 0.72rem/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.07em; }
h1 { max-width: 16ch; margin: 9px 0 0; color: var(--ink); font: 400 clamp(2.7rem, 6vw, 5.1rem)/1.01 Georgia, "Times New Roman", serif; letter-spacing: -0.012em; }
.subtitle { margin: 13px 0 34px; color: var(--ink-soft); }
.copy { max-width: 72ch; }
.copy h2 { margin: 30px 0 7px; color: var(--ink); font: 600 1.22rem/1.35 ui-sans-serif, system-ui, sans-serif; }
.copy p { margin: 0 0 15px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.75; }
.copy a { font-weight: 600; }
footer, .site-footer { border-top: 1px solid var(--line); padding: 18px 0 29px; color: var(--ink-soft); line-height: 1.8; font-size: 0.84rem; }
footer a { color: var(--route-dark); }

@media (max-width: 600px) {
  .frame, .page-frame { width: min(100% - 36px, 560px); }
  .frame > header, .page-frame > header, header.site-header { min-height: 68px; gap: 10px; }
  .brand { font-size: 0.91rem; }
  .brand-glyph { width: 29px; height: 29px; }
  .home-link { gap: 5px; font-size: 0.8rem; }
  .static-main { padding: 40px 0 56px; }
  h1 { font-size: clamp(2.45rem, 11vw, 3.7rem); }
  .subtitle { margin-bottom: 27px; }
  .copy p { font-size: 0.93rem; }
}

@media (max-width: 390px) {
  .frame, .page-frame { width: calc(100% - 32px); }
  .frame > header, .page-frame > header, header.site-header { align-items: flex-start; flex-direction: column; gap: 2px; padding: 7px 0 8px; }
  .home-link { padding: 2px 0; }
}

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