:root {
    --background-blue: #9DDCFF;
    --background-orange: #FF7F0F;
    --background-yellow: #FFFFA5;
    --background-lavender: #FFD9FC;
    --background-red: #FFD5D6;
    --yellow: var(--background-yellow);
    --blue: #050060;
    --red: #7F0002;
    --purple: #4A0094;
    --text: var(--blue);
    --font-regular: 400;
    --font-bold: 700;
    --text-size: 1.875rem;
    --gradient-top: var(--background-blue);
    --gradient-bottom: var(--background-orange);
}

/* Regular — 400 */
@font-face {
  font-family: "Plouv-ara";
  src: url("/assets/fonts/PLOUV-ARA/Plouv-ara-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic — 400 */
@font-face {
  font-family: "Plouv-ara";
  src: url("/assets/fonts/PLOUV-ARA/Plouv-ara-Italique.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium — 500 */
@font-face {
  font-family: "Plouv-ara";
  src: url("/assets/fonts/PLOUV-ARA/Plouv-ara-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Medium Italic — 500 */
@font-face {
  font-family: "Plouv-ara";
  src: url("/assets/fonts/PLOUV-ARA/Plouv-ara-MediumItalique.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Bold — 700 */
@font-face {
  font-family: "Plouv-ara";
  src: url("/assets/fonts/PLOUV-ARA/Plouv-ara-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic — 700 */
@font-face {
  font-family: "Plouv-ara";
  src: url("/assets/fonts/PLOUV-ARA/Plouv-ara-BoldItalique.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

body {
    background: linear-gradient(180deg, var(--gradient-top) 60%, var(--gradient-bottom) 100%);
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: "Plouv-ara", sans-serif;
    font-weight: var(--font-regular);
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 1.75rem;
    padding-bottom: 12.8125rem;
}

header h1 {
    margin: 0;
    margin-top: 0.5em;
}

section {
    width: 60%;
}

a {
    background: transparent;
    border: none;
    font-family: "Plouv-ara";
    color: var(--text);
    font-size: var(--text-size);
    font-weight: 700;
    font-feature-settings: 'ss01' off;
    text-decoration: none;
    text-align: center;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
}

h1 {
    font-size: 24rem;
    font-weight: 500;
    text-align: center;
    font-feature-settings: 'ss01' on;
    line-height: normal;
}

p {
    text-align: center;
    font-size: 1.875rem;
    line-height: 2.125rem;
    margin: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.icon {
  display: inline-block;
  height: 4em;
  width: 4em;
  background-color: var(--text);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

.icon-heart  { 
    --icon: url("/assets/svg/heart.svg"); 
}
.icon-star-5 {
     --icon: url("/assets/svg/star-5.svg"); 
}

.introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.125rem;
    font-feature-settings: 'ss01' on;
}

.button-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* === Glyph sections === */

section.glyph-section {
    width: 96.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14.375rem;
    margin-top: 14.375rem;
}

.introduction + .glyph-section {
    margin-top: 24.1875rem;
}

.bird-story {
    width: 66%;
}


.bird-story__title {
    font-weight: 700;
    font-feature-settings: 'ss02' on;
}

.bird-story__author {
    margin-bottom: 2.5rem;
}

.bird-story__text {
    font-feature-settings: 'fwid' on;
}

.bird-story__text--italic {
    font-style: italic;
}

.glyph-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}

.weight-labels {
    display: flex;
    justify-content: space-between;
    width: 49%;
    font-size: var(--text-size);
}

.weight-labels .weight-regular { font-weight: 400; }

.weight-labels .weight-medium {
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weight-labels .weight-medium--active { text-decoration: underline; }

.weight-labels .weight-italic {
    font-style: italic;
    font-weight: 500;
}

.weight-labels .weight-bold { font-weight: 700; }

.weight-labels .weight-bold--active { text-decoration: underline; }

.glyph-grid {
    display: grid;
    width: 100%;
}

.glyph-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    text-align: center;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* 13-col: full character set, 44px medium */
.glyph-grid--13 { grid-template-columns: repeat(13, 1fr); }
.glyph-grid--13 .glyph-cell {
    font-size: 2.75rem;
    font-weight: 500;
}

/* 9-col: simplified alphabet + digits, 72px bold ss02 */
.glyph-grid--9 { grid-template-columns: repeat(9, 1fr); }
.glyph-grid--9 .glyph-cell {
    font-size: 4.5rem;
    font-weight: 700;
    font-feature-settings: 'ss02' on;
}

/* 6-col: large decorative A–Z, 216px bold ss01 */
.glyph-grid--6 { grid-template-columns: repeat(6, 1fr); }
.glyph-grid--6 .glyph-cell {
    font-size: 13.5rem;
    font-weight: 700;
    font-feature-settings: 'ss01' on;
}