:root {
  --ivory: #f6f3ee;
  --navy: #102b57;
  --gold: #d3a63a;
  --muted: rgba(16, 43, 87, 0.72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ivory);
  color: var(--navy);
  font-family: Avenir, "Avenir Next", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.page {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
  padding: 72px 0 56px;
}

.hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mark {
  margin-bottom: 64px;
}

.circle {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 12px 28px rgba(16, 43, 87, 0.16);
}

.square {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 18px;
  height: 18px;
  background: var(--gold);
}

.eyebrow,
.section-label {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.95rem;
  text-transform: lowercase;
}

h1 {
  margin: 0 0 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 10vw, 7.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.tagline {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 0.01em;
}

.intro {
  max-width: 680px;
  margin: 52px 0 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.55;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 46px;
}

.links a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 43, 87, 0.35);
  padding-bottom: 4px;
  font-size: 1.05rem;
}

.links a:hover {
  border-bottom-color: var(--gold);
}

.latest {
  border-top: 1px solid rgba(16, 43, 87, 0.16);
  padding-top: 48px;
  max-width: 720px;
}

.latest h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.15;
}

.latest p:not(.section-label) {
  margin: 0;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .page { width: min(100% - 32px, 980px); padding-top: 48px; }
  .circle { width: 72px; height: 72px; }
  .square { width: 14px; height: 14px; right: 14px; bottom: 14px; }
  .mark { margin-bottom: 48px; }
}