/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* ---- design tokens ---- */
:root {
  /* peacock palette: white canvas, blue/green/gold as accents */
  --bg:             #FFFFFF;  /* primary page background */
  --bg-soft:        #F4F2EC;  /* mobile nav drawer, subtle surfaces */
  --peacock:        #1B6E8C;  /* primary monogram / accent blue, also panel fill */
  --peacock-bright: #2FA3C9;  /* highlight blue */
  --peacock-deep:   #0E4A5C;  /* shadow blue, also panel gradient end */
  --emerald:        #2E8F6D;  /* green accent */
  --gold:           #C9A24B;  /* gold accent */
  --cream:          #F6F1E4;  /* text/content color on a peacock-filled panel */
  --cream-dim:      #CFE3EA;

  --text:           #16242A;  /* main body text on white */
  --text-dim:       #5C6F74;  /* secondary text on white */
  --text-on-panel:     #F6F1E4;  /* body text on a peacock panel */
  --text-on-panel-dim: #AFD3DE;  /* secondary text on a peacock panel */

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --stage-max: 1400px;
}

:root { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 500;
  background: var(--gold);
  color: var(--text);
  padding: 0.6em 1em;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---- panel: the shared "content emerges from the mark" surface.
   Filled with the same peacock blue as the monogram so a zoomed-in ribbon
   reads as continuing into this panel, rather than a separate box appearing
   on top of it. ---- */
.card {
  background: var(--peacock);
  color: var(--text-on-panel);
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(14,74,92,0.45);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--cream);
  margin-bottom: 0.35em;
}

.card .eyebrow { color: var(--gold); margin-bottom: 0.6em; display: block; }

.card p { line-height: 1.6; color: var(--text-on-panel); }
.card p + p { margin-top: 0.9em; }

.card hr {
  border: none;
  border-top: 1px solid rgba(246,241,228,0.2);
  margin: 1.5em 0;
}

.btn {
  display: inline-block;
  margin-top: 1.25em;
  padding: 0.75em 1.6em;
  background: var(--gold);
  color: var(--peacock-deep);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 160ms ease;
}
.btn:hover { background: var(--cream); }

.btn--disabled {
  background: transparent;
  border: 1px dashed rgba(246,241,228,0.45);
  color: var(--text-on-panel-dim);
  cursor: not-allowed;
}
.btn--disabled:hover { background: transparent; }