:root {
  --ay-color-bg: #ffe9b1;
  --ay-color-navy: rgb(1, 22, 79);
  --ay-color-navy-dots: rgba(1, 22, 79, 0.18);
  --ay-color-hero-bg: rgb(0, 22, 79);
  --ay-color-brown-title: rgb(51, 46, 33);
  --ay-color-brown-muted: rgb(120, 104, 62);
  --ay-color-brown-dots: rgba(23, 16, 1, 0.18);
  --ay-color-cta-bg: rgb(255, 222, 140);
  --ay-color-cta-text: rgb(71, 58, 24);
  --ay-font: "Bricolage Grotesque", system-ui, sans-serif;
  --ay-font-condensed: "IBM Plex Sans Condensed", system-ui, sans-serif;
  --ay-content-width: 350px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--ay-color-bg); font-family: var(--ay-font); -webkit-font-smoothing: antialiased; }
.ay-page { max-width: var(--ay-content-width); margin: 0 auto; padding: 48px 0 40px; }
@media (max-width: 382px) { .ay-page { padding-left: 16px; padding-right: 16px; } }

.ay-hero { background: var(--ay-color-hero-bg); display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1 / 1.486; overflow: hidden; margin-bottom: 32px; }
.ay-hero img { width: 256px; height: auto; image-rendering: pixelated; display: block; }

.ay-entries { display: flex; flex-direction: column; gap: 22px; }
.ay-entries--exp { margin-top: 54px; }

.ay-entry { display: flex; flex-wrap: wrap; align-items: baseline; }
.ay-entry__title { font-size: 15px; font-weight: 700; line-height: 18px; letter-spacing: 0.45px; color: var(--ay-color-navy); white-space: nowrap; }
.ay-entry__dots { flex: 1; font-size: 16px; font-weight: 400; line-height: 19.2px; letter-spacing: 0.96px; color: var(--ay-color-navy-dots); overflow: hidden; white-space: nowrap; margin: 0 2px; }
.ay-entry__year { font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: 0.45px; color: var(--ay-color-navy); white-space: nowrap; }
.ay-entry__desc { flex-basis: 100%; font-size: 14px; font-weight: 300; line-height: 21px; letter-spacing: 0.42px; color: var(--ay-color-navy); margin-top: 2px; }
.ay-entry__desc a { color: inherit; text-decoration: underline solid rgba(0, 0, 0, 0.15); text-decoration-thickness: 2px; text-underline-offset: 1px; }
.ay-entry__desc a:hover { text-decoration-color: currentColor; }

.ay-entry--muted { opacity: 0.32; }
.ay-entry--muted .ay-entry__title { font-size: 14px; line-height: 16.8px; letter-spacing: 0.42px; }
.ay-entry--muted .ay-entry__year { font-size: 14px; line-height: 16.8px; letter-spacing: 0.42px; }

.ay-entries--exp .ay-entry__title { color: var(--ay-color-brown-title); }
.ay-entries--exp .ay-entry__year { color: var(--ay-color-brown-muted); }
.ay-entries--exp .ay-entry__desc { color: var(--ay-color-brown-muted); }
.ay-entries--exp .ay-entry__dots { color: var(--ay-color-brown-dots); }

.ay-badge { display: inline-block; background: var(--ay-color-hero-bg); color: #fff; font-family: var(--ay-font-condensed); font-size: 10px; font-weight: 500; letter-spacing: 0.3px; padding: 4px; border-radius: 4px; vertical-align: baseline; translate: 0 -1px; margin-right: 6px; }

.ay-cta { display: flex; align-items: center; justify-content: center; background: var(--ay-color-cta-bg); color: var(--ay-color-cta-text); font-family: var(--ay-font); font-size: 13px; font-weight: 400; letter-spacing: 0.39px; line-height: 16.9px; text-decoration: none; height: 44px; border-radius: 22px; margin-top: 32px; transition: opacity 0.15s; }
.ay-cta:hover { opacity: 0.8; }

.ay-social { display: flex; justify-content: center; gap: 20px; margin-top: 32px; padding-bottom: 16px; }
.ay-social a { color: var(--ay-color-brown-muted); transition: opacity 0.15s; }
.ay-social a:hover { opacity: 0.7; }
.ay-social svg { width: 18px; height: 18px; display: block; fill: currentColor; }