:root {
  --paper: #F2E6D7;
  --paper-soft: #EFE0CD;
  --paper-card: #FBF6EC;
  --espresso: #2A1C12;
  --ink: #3A2A1E;
  --ink-2: #5C4632;
  --ink-3: #8A7259;
  --ink-on-dark: #F3E8D8;
  --ink-on-dark-2: #C9B79E;
  --gold: #B98238;
  --gold-deep: #8C5E25;
  --hair: rgba(58,42,30,.18);
  --hair-dark: rgba(243,232,216,.18);
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'EB Garamond', Georgia, serif;
  --shadow-sm: 0 2px 10px rgba(42,28,18,.06);
  --shadow-lg: 0 30px 70px rgba(42,28,18,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
::selection { background: #D8B271; color: var(--ink); }

.wrap { width: min(1100px, 92vw); margin-inline: auto; }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px,4vw,48px);
  background: rgba(242,230,215,.88);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 rgba(58,42,30,.10);
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(14px,2vw,28px); }
.nav-links a {
  color: var(--ink-2); text-decoration: none;
  font-size: .86rem; letter-spacing: .16em; text-transform: uppercase;
}
.nav-links a:hover { color: var(--ink); }
.nav-links .btn,
.nav-links .btn:hover { color: var(--paper); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .16em;
  padding: .72em 1.35em; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.btn-outline { background: transparent; color: var(--ink); border-color: var(--hair); }

.legal-hero {
  padding: clamp(132px,18vh,190px) 0 clamp(42px,7vw,84px);
}
.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.2rem;
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .035em;
}
h1 { font-size: clamp(2.7rem,7vw,5.2rem); margin: 0; max-width: 900px; }
h2 { font-size: clamp(1.8rem,3vw,2.45rem); margin: 0 0 1rem; }
h3 { font-size: 1.35rem; margin: 1.6rem 0 .45rem; }
.lede { max-width: 60ch; color: var(--ink-2); font-size: 1.2rem; margin: 1.4rem 0 0; }

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px,5vw,72px);
  align-items: start;
  padding-bottom: clamp(72px,10vw,128px);
}
.legal-card {
  background: var(--paper-card);
  border: 1px solid var(--hair);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: clamp(24px,4vw,46px);
}
.legal-card section + section { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--hair); }
.legal-card p, .legal-card li { color: var(--ink-2); }
.legal-card ul { padding-left: 1.1rem; }
.side-note {
  position: sticky;
  top: 110px;
  background: var(--paper-soft);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 22px;
  color: var(--ink-2);
}
.side-note strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .7rem;
}

.error-page {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 120px 0 70px;
}
.error-panel {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  gap: clamp(30px,6vw,80px);
  align-items: center;
}
.error-code {
  font-family: var(--display);
  font-size: clamp(5rem,18vw,13rem);
  line-height: .8;
  color: var(--gold-deep);
}
.error-media {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--paper-soft);
}
.error-media img { width: 100%; height: 100%; object-fit: cover; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

.foot {
  background: var(--espresso);
  color: var(--ink-on-dark-2);
  padding: 38px 0;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: .92rem;
}
.foot a { color: inherit; }

@media (max-width: 860px) {
  .nav { align-items: flex-start; gap: 18px; }
  .nav-links { flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; }
  .legal-layout,
  .error-panel { grid-template-columns: 1fr; }
  .side-note { position: static; }
  .error-media { width: min(320px, 78vw); margin-inline: auto; order: -1; }
}

@media (max-width: 560px) {
  .nav { position: static; flex-direction: column; }
  .legal-hero, .error-page { padding-top: 56px; }
  .brand-logo { height: 42px; }
}