/* ===================================================================
   AUDIALA — Website redesign (aligned with mobile app)
   ===================================================================
   Palette is straight from the mobile app's brand system:
     - Cream is paper (the field everything sits on)
     - Deep teal is ink (text only)
     - Coral is the joy — used for italic display words, play buttons,
       active states
     - Sun yellow for the hand-drawn underline highlight
     - Mint teal for soft secondary details
   =================================================================== */

/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Brand palette (from the mobile app) ---- */
  --cream:        #FAF2E2;     /* paper */
  --cream-2:      #F4E6C2;     /* warm cream, second surface */
  --cream-3:      #ECE0B8;
  --ink:          #1D3935;     /* deep teal — primary text */
  --ink-2:        #465C58;     /* secondary text, icon strokes */
  --ink-3:        #7C928E;     /* tertiary, muted */
  --ink-4:        #BBC9C5;     /* hairlines, soft details */
  --coral:        #E85F33;     /* warm orange — the brand accent */
  --coral-deep:   #C8451F;
  --coral-soft:   #F8D8C8;     /* coral wash */
  --sun:          #F3C43D;     /* golden highlight */
  --sun-soft:     #FBE89A;
  --mint:         #7FC0B6;     /* soft teal accent */
  --paper-deep:   #131C1F;     /* dark-theme paper */

  /* ---- Hairlines ---- */
  --line:         rgba(29, 57, 53, 0.14);
  --line-soft:    rgba(29, 57, 53, 0.07);

  /* ---- Type ---- */
  --serif:        "Fraunces", "Source Serif 4", Georgia, serif;
  --serif-body:   "Source Serif 4", "Fraunces", Georgia, serif;
  --sans:         "Inter", -apple-system, "Helvetica Neue", system-ui, sans-serif;
}

/* ---------- Page scoping ---------- */
.audiala-page * { box-sizing: border-box; margin: 0; padding: 0; }
.audiala-page {
  font-family: var(--sans);
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  width: 100%;
  max-width: 1280px;
  /* Float the cream page as a card on the dark surround, mirroring the
     design mock's `.review-page` (1280px cream card, radius 24, big soft
     shadow, sitting on the dark stage). */
  margin: 40px auto 80px;
  border-radius: 24px;
  box-shadow:
    0 30px 80px -30px rgba(29, 57, 53, 0.25),
    0 1px 0 rgba(29, 57, 53, 0.08);
  position: relative;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
/* Surround behind the floating page — cream-3 (#ECE0B8), the deeper cream
   band from the mock. `:has()` scopes it to redesign pages so unported
   Tailwind pages keep their own body background. */
html:has(> body > .audiala-page),
body:has(> .audiala-page) {
  background: var(--cream-3) !important;
  margin: 0;
}
/* Mock was fixed-width 1280px; basic responsive scaffolding for
   tablet + mobile. Per-section breakpoints added as pages are ported. */
@media (max-width: 1024px) {
  .audiala-page { font-size: 14.5px; }
}
@media (max-width: 768px) {
  .audiala-page { font-size: 14px; }
}
/* Edge-to-edge on phones — a floating card with margins wastes space and the
   radius/shadow read as a bug at small widths. */
@media (max-width: 700px) {
  .audiala-page { margin: 0 auto; border-radius: 0; box-shadow: none; }
}
.audiala-page img { display: block; max-width: 100%; }
.audiala-page a { color: inherit; text-decoration: none; }
.audiala-page button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.audiala-page p { text-wrap: pretty; }

/* ---------- Type primitives ---------- */
.f-display {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  line-height: 0.95;
  color: var(--ink);
}
.f-display-it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--coral);
}
.f-serif {
  font-family: var(--serif-body);
  font-weight: 400;
  color: var(--ink);
}
.f-serif-it {
  font-family: var(--serif-body);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
.f-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.f-eyebrow .sep { color: var(--ink-3); margin: 0 8px; }
.f-eyebrow .dot {
  display: inline-block; width: 4px; height: 4px;
  background: var(--ink-3); border-radius: 50%;
  vertical-align: middle; margin: 0 10px;
  transform: translateY(-2px);
}

/* Numbered section prefix "01 The set" */
.section-no {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  vertical-align: super;
  margin-right: 14px;
}

/* Coral italic display word — signature joy element */
.joy { font-family: var(--serif); font-style: italic; color: var(--coral); font-weight: 700; }

/* Hand-drawn underline highlight (sun yellow) */
.hl-under {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hl-under::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  bottom: 0.06em;
  height: 0.18em;
  background: var(--sun);
  border-radius: 100px;
  z-index: -1;
  transform: skewY(-1deg);
  opacity: 0.85;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 100px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Use .audiala-page prefix to outrank `.audiala-page a { color: inherit }`
   (specificity 0,1,1) and Tailwind utility classes on body. Without this,
   ink/coral buttons inherit the page text color and the cream label becomes
   invisible (most painfully on `.btn-ink` where bg matches the ink text). */
.audiala-page .btn-coral, .btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-deep); }
.audiala-page .btn-ink,   .btn-ink   { background: var(--ink);   color: var(--cream); }
.audiala-page .btn-cream, .btn-cream { background: var(--cream); color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.btn-lg { padding: 16px 26px; font-size: 14.5px; }

/* Play button — round coral disc */
.play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform .15s ease, background .15s ease;
}
.play-btn:hover { transform: scale(1.04); background: var(--coral-deep); }
.play-btn.sm { width: 44px; height: 44px; font-size: 14px; }
.play-btn.lg { width: 72px; height: 72px; font-size: 22px; }

/* ---------- Cards ---------- */
.card {
  background: var(--cream);
  border-radius: 24px;
  /* Strong shadow + soft outline so cards floating over hero photos
     (.card.position:absolute over .ph) stay visually lifted instead of
     blending into the cream-toned imagery behind. */
  box-shadow:
    0 1px 0 rgba(29, 57, 53, 0.08),
    0 2px 6px rgba(29, 57, 53, 0.08),
    0 18px 40px -16px rgba(29, 57, 53, 0.28);
}
.card-2 {
  background: var(--cream-2);
  border-radius: 24px;
}
.card-ink {
  background: var(--ink);
  color: var(--cream);
  border-radius: 24px;
}
.card-tight { border-radius: 16px; }

/* ---------- Pill / chip ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--cream-2);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  border: 1px solid transparent;
}
.pill.is-on { background: var(--ink); color: var(--cream); }
.pill.is-coral { background: var(--coral); color: #fff; }
.pill .avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral); color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
}

/* ---------- Nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  position: relative; z-index: 5;
  background: var(--cream);
}
.nav.sticky-top { border-bottom: 1px solid var(--line); }

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.logo-mark {
  width: 34px; height: 30px;
  background-color: var(--coral);
  -webkit-mask: url("/assets/audiala-logo-mark.svg") no-repeat center / contain;
          mask: url("/assets/audiala-logo-mark.svg") no-repeat center / contain;
  flex-shrink: 0;
}
.logo-word {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}

.nav-links {
  display: flex; gap: 32px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 0;
  height: 7px;
  background: var(--sun);
  border-radius: 100px;
  z-index: -1;
  opacity: 0.9;
}

.nav-tools {
  display: flex; gap: 12px; align-items: center;
}
.nav-search {
  display: inline-flex; gap: 10px; align-items: center;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- Photography placeholder ----------
   A warm sky-gradient placeholder (not the harsh striped one).
   Variants: dawn, midday, dusk, night, terracotta, ocean
*/
.ph {
  background: linear-gradient(180deg, #C5A782 0%, #E5B998 35%, #F0CBA8 65%, #D89868 100%);
  position: relative;
  /* Isolate so the ::after legibility scrim (z-index:1) stays contained
     within the photo and can't paint above sibling overlay cards (e.g. the
     "Continue listening" resume card), which have no z-index and would
     otherwise be darkened/bled-through by the escaping scrim. */
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  display: grid;
  place-items: end start;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 75% 30%, rgba(255, 235, 200, 0.4), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(29, 57, 53, 0.18), transparent 60%);
  pointer-events: none;
}
.ph::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}
/* When a real <img> is wired (`.has-img` added by the partial) we keep the
   variant gradient as the background: the opaque photo covers it once
   loaded, and it serves as a warm on-brand placeholder while a lazy image
   below the fold is still loading (instead of a flat dark-teal flash). Just
   drop the sky-highlight ::before so it doesn't tint the photo. The bottom
   darken scrim (::after) stays for label/overlay legibility. */
.ph.has-img::before { display: none; }
.ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}
.ph::before, .ph::after { z-index: 1; }
.ph .ph-label, .ph .ph-sun { position: relative; z-index: 2; }
.ph .ph-label {
  position: relative;
  margin: 16px;
  padding: 5px 10px;
  background: rgba(29, 57, 53, 0.55);
  color: rgba(250, 242, 226, 0.9);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

/* Placeholder variants */
.ph.dawn   { background: linear-gradient(180deg, #E8C5A0 0%, #F3D8AE 40%, #DBA76F 100%); }
.ph.dusk   { background: linear-gradient(180deg, #5A4E5C 0%, #C28570 50%, #E69862 100%); }
.ph.night  { background: linear-gradient(180deg, #1D3935 0%, #2C5A52 50%, #6B8378 100%); }
.ph.ocean  { background: linear-gradient(180deg, #7AAEB0 0%, #B8D4C8 50%, #F4E6C2 100%); }
.ph.stone  { background: linear-gradient(180deg, #C9B894 0%, #D6C3A0 50%, #B89D70 100%); }
.ph.forest { background: linear-gradient(180deg, #6B8E78 0%, #95B49A 50%, #D5C9A8 100%); }
.ph.terracotta { background: linear-gradient(180deg, #A85638 0%, #C77554 50%, #E8A875 100%); }

/* A small inset frame for an icon overlay on placeholder */
.ph-sun {
  position: absolute;
  top: 32px; right: 32px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(250, 242, 226, 0.5);
  filter: blur(10px);
}

/* ---------- Day-icon strokes (line, 1.5pt, no fill) ---------- */
.line-icon {
  display: inline-block;
  color: var(--ink-2);
  width: 36px; height: 36px;
}
.line-icon.coral { color: var(--coral); }
.line-icon.sm { width: 22px; height: 22px; }
.line-icon.lg { width: 56px; height: 56px; }
/* Vault rule (ios-design-system.md §Buttons): coral surfaces carry WHITE ink,
   never the teal/green ink-2. The .line-icon default `color: var(--ink-2)` is a
   direct rule that beats inheritance, so an icon inside a coral pill/button
   rendered green-on-coral (e.g. the "Editor's pick" sparkle). Force inherit so
   icons take the white text color of their coral/ink parent. */
.btn-coral .line-icon,
.pill.is-coral .line-icon,
.pill.is-on .line-icon,
.play-btn .line-icon,
.btn-ink .line-icon { color: inherit; }

/* ---------- Generic layout helpers ---------- */
.section { padding: 88px 48px; position: relative; }
.section.tight { padding: 56px 48px; }
.section.big { padding: 120px 48px; }

.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 40px; margin-bottom: 48px;
}
.section-head h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: 64px; line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 800px;
}
.section-head .lead {
  font-family: var(--serif-body);
  font-size: 18px; line-height: 1.45;
  color: var(--ink-2);
  max-width: 380px;
}

/* ---------- Hairline ---------- */
.hr {
  border: 0; height: 1px; background: var(--line); margin: 0;
}

/* ---------- "Continue listening" mini-card pattern ---------- */
.resume-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 14px 14px;
  background: var(--cream-2);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(29, 57, 53, 0.05);
}
.resume-card .art {
  width: 60px; height: 60px; border-radius: 12px;
  flex-shrink: 0;
}
.resume-card .label-row {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.resume-card .title {
  font-family: var(--serif); font-weight: 600;
  font-size: 18px; color: var(--ink);
  letter-spacing: -0.01em;
}
.resume-card .meta {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-3); margin-top: 2px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--paper-deep);
  color: var(--cream);
  padding: 96px 48px 36px;
  position: relative;
}
.footer .lead {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 540px;
}
.footer .lead .joy { color: var(--coral); }
.footer .logo { color: var(--cream); }
.footer .logo-mark { background-color: var(--cream); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-top: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(250, 242, 226, 0.12);
}
.footer h4 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(250, 242, 226, 0.5);
  margin-bottom: 16px; font-weight: 500;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-family: var(--sans); font-size: 12px;
  color: rgba(250, 242, 226, 0.4);
}

/* ---------- Stats / numbers ---------- */
.stat {
  display: flex; flex-direction: column; gap: 6px;
}
.stat-n {
  font-family: var(--serif); font-weight: 700;
  font-size: 56px; line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-l {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}