:root{
  --bg: #114D4E;
  --ink: #ffffff;
  --accent: #f05aa6;

  --display: "Didot", "Bodoni 72", "Baskerville", "Times New Roman", serif;
  --ui: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --max: 1200px;
  --pad: 16px;

  /* lock header alignment across pages */
  --header-pad-top: 22px;
  --header-pad-bottom: 26px;
  --brand-gap: 10px;
}

/* Base */
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.wrap{
  width: min(var(--max), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
}

/* ===== Top Nav (shared) ===== */
.topnav{
  padding: 10px var(--pad) 0;
}
.topnav .nav-inner{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.topnav a{
  color: var(--accent);
  text-decoration: none;
}
.topnav a:hover{
  color: var(--ink);
  text-decoration: underline;
}
.topnav .sep{
  opacity: 0.6;
  color: var(--ink);
}

/* ===== Header / Brand banner (shared + consistent) ===== */
header{
  padding: var(--header-pad-top) var(--pad) var(--header-pad-bottom);
  text-align: center;
}
header .header-inner{
  /* ensures exact same block width + centering on every page */
  max-width: var(--max);
  margin: 0 auto;
}

.brand{
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.brand .accent{ color: var(--accent); }
.brand .solid{ color: var(--ink); }

.subbrand{
  margin-top: var(--brand-gap);
  font-family: var(--ui);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  opacity: 0.95;
}

/* Main */
main{
  flex: 1;
  padding: 12px var(--pad);
}

/* Centered link list */
.center{
  min-height: 45vh;
  display: grid;
  place-items: center;
}
.link-list{
  display: grid;
  gap: 18px;
  text-align: center;
}

/* Links (shared) */
a{
  color: var(--accent);
  text-decoration: none;
  font-family: var(--ui);
  letter-spacing: 0.04em;
}
a:hover{
  color: var(--ink);
  text-decoration: underline;
}

/* Footer */
footer{
  padding: 22px 0;
  text-align: center;
  font-size: 14px;
}