:root {
  --ledger: #F6F5F1;
  --navy: #14243C;
  --navy-2: #22365A;
  --gold: #A8843F;
  --slate: #4D5869;
  --rule: #D8D4CA;
  --carved: "Marcellus", "Trajan Pro", Georgia, serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Type scale: 13 / 15 / 17 / 18 / 21-26 / display (fluid) */
  --t-label: 13px;
  --t-small: 15px;
  --t-record: 17px;
  --t-body: 18px;
  --t-lede: clamp(21px, 0.6vw + 17px, 26px);
  --t-display: clamp(40px, 4.4vw, 64px);

  /* Spacing: 8px scale, plus fluid values for the frame and the column gap */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --frame: clamp(12px, 1.8vw, 28px); /* page edge to the outer rule */
  --pad: clamp(28px, 5.5vw, 96px); /* inner rule to content */
  --col-gap: clamp(40px, 6vw, 112px);
  --max: 1240px; /* content width inside the frame */

  /* Motion: short and quiet. Nothing overshoots. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 200ms;
  --reveal: 300ms;
  --draw: 700ms;
}

* { box-sizing: border-box; }

html { background: var(--navy); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ledger);
  color: var(--navy);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

a:not(.btn) {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.record a:hover { text-decoration-color: var(--gold); }
.band a:hover { text-decoration-color: var(--gold); }

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

.certificate {
  flex: 1;
  position: relative;
  margin: var(--frame);
  border: 1px solid var(--navy);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: var(--col-gap);
  padding: var(--pad) max(var(--pad), (100% - var(--max)) / 2);
}

.certificate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold);
  pointer-events: none;
}

.seal { width: min(240px, 64vw); display: block; margin: 0 auto; }

@media (min-width: 960px) {
  .certificate { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .seal { width: 100%; max-width: 420px; }
}
.seal .g { stroke: var(--gold); }
.seal .n { stroke: var(--navy); }
.seal .w15 { stroke-width: 1.5; }
.seal .w1 { stroke-width: 1; }
.seal .w07 { stroke-width: 0.75; }
.seal .w05 { stroke-width: 0.5; }
.seal-ticks { stroke: var(--gold); stroke-width: 0.8; }
.seal-rays { stroke: var(--navy); stroke-width: 0.5; opacity: 0.35; }
.seal-text { font-family: var(--carved); font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--navy); }
.seal-dot { fill: var(--gold); }
.seal-star { fill: var(--gold); stroke: var(--navy); stroke-width: 1; stroke-linejoin: miter; }

.name {
  font-family: var(--carved);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: 0.03em;
  margin: 0 0 var(--s-4);
}

.name .line { display: block; }

@media (max-width: 959px) {
  .name { font-size: clamp(32px, 9.4vw, 56px); }
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.3;
  max-width: 25ch;
  text-wrap: pretty;
  margin: 0 0 var(--s-6);
}

.record { margin: 0 0 var(--s-5); border-top: 1px solid var(--navy); }

.record div {
  display: grid;
  grid-template-columns: clamp(92px, 26vw, 140px) minmax(0, 1fr);
  gap: var(--s-2);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.record dt {
  font-family: var(--carved);
  text-transform: uppercase;
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.record dd { margin: 0; min-width: 0; font-size: var(--t-record); overflow-wrap: break-word; }

/* Narrow phones: label above value, so neither has to wrap */
@media (max-width: 519px) {
  .record div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s-4);
  background: var(--navy);
  color: var(--ledger);
  text-decoration: none;
  font-family: var(--carved);
  font-size: var(--t-record);
  line-height: 1;
  letter-spacing: 0.1em;
  transition: background-color var(--fast) var(--ease);
}

.btn:hover { background: var(--navy-2); }

.band { background: var(--navy); color: var(--ledger); }

.band-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) calc(var(--frame) + 7px);
  font-size: var(--t-small);
  letter-spacing: 0.01em;
}

.band p { margin: 0; }

/* Load sequence: the seal draws itself, then the face settles in */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes settle { from { opacity: 0; transform: scale(0.92); } }

@media (prefers-reduced-motion: no-preference) {
  .seal-rings circle { stroke-dasharray: 1; animation: draw var(--draw) var(--ease) both; }
  .seal-rings circle:nth-child(2) { animation-delay: 80ms; }
  .seal-rings circle:nth-child(3) { animation-delay: 160ms; }
  .seal-rings circle:nth-child(4) { animation-delay: 240ms; }
  .seal-ticks { animation: fade var(--reveal) var(--ease) 420ms both; }
  .seal-rays { animation: fade 500ms var(--ease) 480ms both; }
  .seal-text, .seal-dot { animation: fade var(--reveal) var(--ease) 560ms both; }
  .seal-star { transform-box: fill-box; transform-origin: center; animation: settle var(--reveal) var(--ease) 640ms both; }

  .name { animation: rise var(--reveal) var(--ease) 120ms both; }
  .lede { animation: rise var(--reveal) var(--ease) 220ms both; }
  .record div { animation: fade var(--reveal) var(--ease) both; }
  .record div:nth-child(1) { animation-delay: 320ms; }
  .record div:nth-child(2) { animation-delay: 360ms; }
  .record div:nth-child(3) { animation-delay: 400ms; }
  .record div:nth-child(4) { animation-delay: 440ms; }
  .btn { animation: fade var(--reveal) var(--ease) 500ms both; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}