:root {
  --ink: #12263a;
  --cream: #f7f3ee;
  --paper: #ffffff;
  --line: #d9cfc4;
  --muted: #3f4a57;
  --link: #8d1d3c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  z-index: 50;
}

.skip:focus { top: 12px; }

.wrap { max-width: 720px; margin: 0 auto; padding: 28px 20px 72px; }

h1 { font-family: Georgia, serif; font-size: 32px; line-height: 1.2; margin: 0 0 8px; }

h2 { font-family: Georgia, serif; font-size: 22px; line-height: 1.3; margin: 28px 0 8px; }

.sub { color: var(--muted); margin: 0 0 18px; }

a { color: var(--link); }

nav.top { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 22px; }

nav.top a { font-weight: bold; }

:focus-visible { outline: 3px solid #12263a; outline-offset: 2px; }

footer {
  border-top: 1px solid var(--line);
  padding: 18px 20px 28px;
  color: var(--muted);
  font-size: 15px;
}

footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 0; }

footer button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 6px 10px;
  cursor: pointer;
}

.lc-notice {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  box-shadow: 0 8px 24px rgba(18, 38, 58, 0.12);
}

.lc-notice p { margin: 0; flex: 1 1 220px; }

.lc-notice button {
  border: 0;
  background: #12263a;
  color: #fff;
  font: inherit;
  font-weight: bold;
  padding: 10px 14px;
  cursor: pointer;
}