/* Generated by scripts/fetch-fonts.mjs. Do not hand-edit.
   Source: https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500&display=swap */

/* math */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-1.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-2.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-3.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: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-4.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;
}
/* math */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-5.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-6.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-7.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: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bodonimoda-8.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;
}
/* math */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bodonimoda-5.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bodonimoda-6.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bodonimoda-7.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: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bodonimoda-8.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-1.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-3.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-4.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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-5.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-6.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-8.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-9.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-10.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-6.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-7.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-8.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-9.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorantgaramond-10.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 */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-2.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: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-3.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 */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-2.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: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-3.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 */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-2.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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-3.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;
}

/*
 * Everything here is either copied verbatim from the design handoff's <style>
 * block, or exists because the handoff expressed something in a proprietary
 * attribute that plain HTML has no equivalent for:
 *
 *   style-hover="..."  ->  a :hover rule
 *   style-focus="..."  ->  a :focus rule
 *   data-r reveal      ->  transitions, driven by sweep() in site.js
 *
 * The font faces are prepended at build time from src/fonts/fonts.css.
 */

/* BEGIN generated by scripts/make-paper.mjs — do not edit by hand */
/* The paper the painting sits on, read from the bottom row of
   src/uploads/contentvid.mp4 — the pixels that literally touch the join —
   as the per-column median of all 73 frames. Regenerate with:
     node scripts/make-paper.mjs
   Used by the phone rules further down; see make-paper.mjs for why. */
:root {
  --jl-paper-from: 4861732;   /* bytes of the video this was read from */
  --jl-paper: linear-gradient(90deg,#cdcad0 0%,#d0ced3 3.23%,#d1d0d4 6.45%,#d3d2d5 9.68%,#d3d2d6 12.9%,#d5d4d8 16.13%,#d7d6d9 19.35%,#d7d7d9 22.58%,#d8d7d9 25.81%,#d8d8d9 29.03%,#d8d8d9 32.26%,#d9d9d9 35.48%,#d9d9da 38.71%,#dbdbdb 41.94%,#dcdcdd 45.16%,#dddddd 48.39%,#ddddde 51.61%,#ddddde 54.84%,#dfdedf 58.06%,#dfdfdf 61.29%,#dfdfdf 64.52%,#dfdfdf 67.74%,#dfdee0 70.97%,#dfdee0 74.19%,#dfdee0 77.42%,#dfdfdf 80.65%,#dfdee0 83.87%,#dfdee0 87.1%,#dfdedf 90.32%,#ddddde 93.55%,#dcdcdd 96.77%,#dcdbdd 100%);
  /* 1216x752. object-fit:cover scales the video to the band's height, so this
     turns that height into the width the paper has to be drawn at. */
  --jl-paper-aspect: 1.61702;
}
/* END generated by scripts/make-paper.mjs */

html { scroll-behavior: smooth }
body {
  margin: 0;
  background: #F1EAE1;
  color: #17130F;
  font-family: Jost, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: #17130F; text-decoration: none; transition: color .3s ease }
a:hover { color: #8A1729 }
::selection { background: #17130F; color: #F1EAE1 }
input, textarea { font-family: Jost, system-ui, sans-serif }
input::placeholder, textarea::placeholder { color: rgba(23,19,15,.32) }

/* Focus is part of the design, not a browser afterthought. The handoff removes
   the default outline on inputs; without this a keyboard user is lost. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid #8A1729;
  outline-offset: 3px;
}

/* --- interaction states ----------------------------------------------------
   Every rule below needs !important, for the same reason [hidden] does further
   down: the handoff sets the resting colour INLINE on each element, and an
   inline declaration outranks any selector in this file. Without !important
   these rules parse fine, match fine, and then lose — so every hover and focus
   state in the design silently did nothing.

   Only the properties the interaction actually changes are forced. The resting
   appearance still comes from the inline style, so this does not seize control
   of the design; it just wins the moment the pointer or focus arrives. */

/* --- gallery tiles: style-hover="--v:1" ------------------------------------ */
.jl-tile:hover, .jl-tile:focus-within { --v: 1 }
.jl-tile-share:hover { color: #8A1729 !important }

/* --- form: style-focus="border-bottom-color:#8A1729" ----------------------- */
.jl-input:focus { border-bottom-color: #8A1729 !important }
.jl-input:disabled { opacity: .55 }
.jl-submit:hover:not(:disabled) { background: #8A1729 !important; border-color: #8A1729 !important }
.jl-submit:disabled { cursor: progress; opacity: .7 }

/* --- buttons: style-hover="color:#8A1729" / border-color ------------------- */
.jl-icon-btn:hover { color: #8A1729 !important }
.jl-outline-btn:hover { border-color: #8A1729 !important; color: #8A1729 !important }
.jl-solid-btn:hover { background: #8A1729 !important }
.jl-net:hover { border-color: #8A1729 !important; color: #8A1729 !important }
.jl-ig-link:hover { color: #F1EAE1 !important; opacity: .72 }

/* --- image slots ----------------------------------------------------------
   A slot with no photo yet still has to hold its shape, or the 3x3 grid
   collapses and the parallax maths above it reads against the wrong height. */
.jl-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.jl-slot-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #E4DED5; color: #6F6357;
  font: 400 10px/1 Jost; letter-spacing: .2em; text-transform: uppercase;
}
#instagram .jl-slot-empty { background: #241E19; color: rgba(241,234,225,.45) }

/* --- reveal: armed and driven by sweep() ---------------------------------- */
[data-r] { will-change: opacity, transform }

/* --- respect a reduced-motion preference ----------------------------------
   The scroll-scrubbed hero is the identity of this page, so it stays. What goes
   is the decorative drift: smooth scrolling, the reveal slide, and the parallax
   easing that makes a page feel like it is moving under you. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  [data-r] { opacity: 1 !important; transform: none !important; transition: none !important }
  a, button { transition: none }
}

/* --- phones ----------------------------------------------------------------
   The design handoff contains no media queries at all — it was drawn for a
   desktop and never adapted. That is not a porting gap; there is nothing to
   port. Below ~620px three things break badly enough to matter, and since most
   of Julia's visitors will arrive from Instagram on a phone, they matter most.

   Everything here is !important for the same reason as the hover rules above:
   the handoff sets these properties inline, and an inline declaration outranks
   any selector in this file. */
@media (max-width: 620px) {

  /* 1. THE NAVIGATION.
     The link row needs 563px inside a 375px viewport and overflow-x is hidden,
     so Portfolio, Instagram and Contact could not even be scrolled to.

     This was first solved by wrapping onto a second line. That worked, but it
     made the bar 118px tall — and the bar sits over the hero, so it was covering
     a third of the painting and specifically the part with the eyes in it. A
     menu that costs the hero its subject is too expensive.

     So: a button. The bar stays one row at its designed 70px, and the links
     become a panel underneath it. */
  #jl-menu { display: block !important }
  #jl-nav-links {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 6px clamp(20px,4vw,44px) 18px !important;
    background: rgba(241,234,225,.97) !important;
    border-bottom: 1px solid rgba(23,19,15,.13);
    /* Collapsed by default. Height rather than display, so it can animate and so
       the links stay in the document for assistive tech to announce. */
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
    transition: max-height .28s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s;
  }
  nav[data-open] #jl-nav-links {
    max-height: 60vh !important;
    visibility: visible;
    transition: max-height .34s cubic-bezier(.16,1,.3,1), visibility 0s;
  }
  #jl-nav-links a {
    width: 100%;
    padding: 15px 0 !important;
    border-bottom: 1px solid rgba(23,19,15,.10) !important;
    font-size: 12px !important;
  }
  #jl-nav-links a:last-child { border-bottom: none !important }
  /* The bar is back to one row, so anchors only have to clear 70px. */
  section { scroll-margin-top: 78px !important }

  /* 2. THE HERO SHOWED THE GAP BETWEEN THE EYES.
     The painting is 1216x752. On a 390-wide portrait stage, cover scales it to
     1364px to fill the height — so only 29% of the frame is visible, and dead
     centre is the empty paper BETWEEN the two eyes.

     Sliding the crop sideways cannot fix this. The window is 29% of the frame
     and the two eyes sit further apart than that, so every horizontal position
     is either one eye (which reads as a cyclops) or the paper between them.
     Tested at 0%, 12%, 22%, 40% and 55% — 40% and 55% are worse than centre.

     Letterboxing the whole frame was worse again: the painting went small and
     stranded on a flat gradient.

     So change the SHAPE of the window instead of sliding it. The video becomes
     a band across the top of the stage rather than filling it. A shorter box at
     the same width is a less extreme aspect ratio, so cover trims far less and
     both eyes fit at a size worth looking at. The stage keeps its full height,
     so the name, the rising face and the section overlap below are untouched.

     50vh, not 56. At 56 the crop was still tight enough that the eyes read as
     over-large and too far apart — buck-eyed. Dropping the band scales the
     painting down about 11% (0.629 -> 0.561) and widens the window from 49% of
     the frame to 55%, which brings the eyes in and settles the proportion.
     Changing this number alone is not safe: her width below and the section
     height further down are both derived from it. */

  /* The band, named once. The paper under it is drawn from these two numbers
     (see 4b below), so a retune of either carries to the join instead of quietly
     leaving it behind. */
  :root { --jl-band: 42vh; --jl-crop-x: 50.7% }

  #jl-hero-video {
    /* Below the nav, not behind it. The nav wraps to two rows on a phone and is
       70px tall. The band starts where it ends, so no part of the painting sits
       behind it — which mattered because the eyes live in the UPPER part of the
       frame, so it was the eyes that were being covered. */
    top: 70px !important;
    height: var(--jl-band) !important;
    bottom: auto !important;
    object-fit: cover !important;
    object-position: var(--jl-crop-x) 42% !important;
  }

  /* Her face has to stay in PROPORTION to the painted eyes, or the two never
     read as one face — which is the whole point of the hero.

     Sized by height (the desktop rule) it renders 1691px wide on a phone: 2.21x
     the painted frame, where the desktop ratio is 1.22. Sizing by width fixes
     that — and the number tracks the band, because the band sets how large the
     painted frame renders. At a 56vh band it was 240%; at 50vh the frame is
     smaller, so 213% holds the same 1.22. Retune the band and this must follow,
     or her face silently grows out of proportion to the eyes it is meeting. */
  #jl-face {
    height: auto !important;
    width: 179% !important;
    /* And higher. The desktop parks the face at -22.5vh, which on a phone leaves
       a band of empty grey between the painted eyes and her forehead — they read
       as two pictures stacked, not one face. -40vh closes that gap so the eyes
       sit where her eyes would be. Further up (-55vh tested) overshoots: her
       brow crowds the eyes and it collapses back into a crop of features. */
    top: -40vh !important;
  }

  /* 3. HER NAME SAT AT THE BOTTOM OF THE SCREEN, NOT THE BOTTOM OF THE VIDEO.
     #jl-name is a 100vh sticky box with align-items:flex-end, so the wordmark
     parks at the foot of the VIEWPORT. That was right when the video filled the
     stage. Now the video is a 50vh band, it left JULIA LUPSAKKO stranded in
     empty grey half a screen below the picture it belongs to.
     Matching the box to the band puts it in the band's bottom-left corner,
     over the painting, where it reads as part of the image. */
  #jl-name {
    /* Tracks the band, which now starts below the nav — so the wordmark follows
       it down and still sits in the painting rather than in grey beneath it. */
    /* Not flush with the band: a further 100px down.
       At the band exactly, the block sits high enough that "MAKEUP ARTIST" lands
       ON the eye — measured, the eyebrow was at 223px and the pupils are at 225.
       Pushing it down clears the eyes and leaves the wordmark straddling the
       lower edge of the painting, which is where it should read from. */
    height: calc(170px + 42vh) !important;
    align-items: flex-end !important;
  }

  /* 4. THE HERO WAS FIVE SCREENS OF SCROLLING FOR ONE SECOND OF MOTION.
     572vh is sized for the desktop choreography. On a phone the composition is
     complete when her face lands (x = 0.45 in site.js, where the bottom of her
     face meets the bottom of the screen) — everything after that was dead
     scrolling with a frozen picture.
     The height has to leave a BEAT between the landing and the handover.
     Services carries margin-top:-100vh, so it reaches the top of the screen at
     (hero height - 100vh). Set that equal to the landing and the two happen on
     the same frame: measured at 285vh, Services already covered all but 40px of
     the screen at the moment her face arrived, so the composition was never
     actually seen. 340vh was still too early — Services sat halfway up the
     screen at the landing.

     385vh puts Services exactly at the bottom edge on the frame she lands, so
     the composition is whole for a moment and THEN gets pushed up. The arithmetic
     is fixed, not tuned: landing is at 1.85vh, Services carries margin-top:-100vh,
     so height = 1.85 + 1.00 (the overlap) + 1.00 (one screen of hold) = 3.85.

     The freeze in site.js and this height are one change across two files;
     neither works alone. */
  #top { height: 385vh !important }

  /* 4b. THE JOIN UNDER THE BAND.
     The band has a bottom edge, so something has to sit under it, and whatever
     sits there has to be the SAME COLOUR or the edge reads as a line drawn
     across the picture.

     No flat colour can do that, and this is the part two earlier attempts got
     wrong. The paper the painting sits on is itself a gradient — measured, it
     grades from L 215 to L 223 across the sheet — so a single grey is right at
     one column and visibly wrong at every other. #DBDBDB was the average, which
     is the one value guaranteed to be wrong on BOTH sides.

     So match per column. --jl-paper is that bottom row, read off the video by
     scripts/make-paper.mjs and laid down here as a horizontal gradient. Every
     column meets its own colour at the join.

     The three background properties below are not decoration — they reproduce
     object-fit:cover's horizontal mapping exactly, so the paper lines up with
     the video column for column:
       size     cover draws the frame at whichever width covers the box: the
                band height times the frame's aspect, or the box width if that
                is wider. max() of the two IS that rule, and it has to be max()
                and not the calc alone — measured at 600x800, the calc comes out
                at 543px against a 600px stage, and the 57px the paper did not
                reach fell back to flat grey either side of the picture.
       position the same --jl-crop-x the video is cropped at; a background
                percentage aligns the image the way object-position does.
       colour   now only shows before the stylesheet's own variable resolves.

     One case this does NOT follow exactly: when the box is wider than the frame
     is (the max() picking 100%), cover crops the video vertically instead, so
     the row at the join is no longer the frame's last row and the paper is read
     a few rows too low. That needs a viewport wider than 0.68 of its height
     while still under 620px — 600x800 does it, a phone does not — and the sheet
     only grades about a level over the rows involved. Worth knowing, not worth
     machinery.

     The paper extends straight down the stage, which is right: it is a sheet,
     and the grade it carries (about 8 levels over the full width) is far too
     shallow to read as banding on its own.

     :first-child matters. #top has TWO div children — the sticky stage AND the
     name wrapper, which sits above it at z-index 2. A bare "#top > div" painted
     an opaque panel over the video and the painting vanished entirely. */
  #top > div:first-child {
    background-color: #DBDBDB !important;
    background-image: var(--jl-paper) !important;
    background-size: max(100%, calc(var(--jl-band) * var(--jl-paper-aspect))) 100% !important;
    background-position: var(--jl-crop-x) 0 !important;
    background-repeat: no-repeat !important;
  }

  /* 5. THE PORTFOLIO WAS THUMBNAILS.
     Three fixed columns inside 375px gave 125px tiles — her photographs rendered
     smaller than a postage stamp. Two columns, and the grid grows with its
     content instead of being crushed into one viewport height. */
  #jl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .jl-tile { aspect-ratio: 4 / 5 }

  /* 6. THE GOLD LAYER WAS SHOWING AN EIGHTH OF ITSELF.
     The parallax layer is inset past the section on every side so it can drift
     and grow without its edge ever coming into view. The handoff writes that
     inset as -38% of the SECTION, which is fine on a desktop where the section
     is one screen tall, and wrong on a phone where the About content stacks into
     one column and the section becomes 1409px against a 390px width.

     -38% of 1409 is 535px of overhang at each end, so the layer stood 2480px
     tall in a 390px-wide window. background-size:cover fills whichever side
     needs more — here, overwhelmingly the height — so the 1152x896 picture was
     drawn 3188px wide to reach that height, and 12% of it was on screen. Not a
     crop of a photograph: a soft 2.8x enlargement of one vertical strip.

     The overhang only has to cover the travel, so it is stated in screens here
     rather than in section-heights, and site.js asks the box how much room it
     left before deciding how far to move. Neither number can outgrow the other.

     11vh each end is 186px on a 844px screen, covering the 0.20vh of travel that
     driftGold() asks for with a little to spare. Measured after: the layer is
     1595px, the picture is drawn at 2051 (1.8x), and 19% of it is on screen.

     21.5% is the ceiling, at zero travel and zero scale — a 1152x896 landscape
     picture cannot show more than that through a 390x1409 hole, whatever else
     changes. Nearly all of the headroom that exists has been taken; what is left
     is being spent on the movement. */
  #jl-bg3 { top: -11vh !important; bottom: -11vh !important }
}

/* --- lightbox -------------------------------------------------------------
   The design sets display:flex inline on both overlays, and an inline style beats
   a stylesheet rule. Without !important the [hidden] attribute does nothing and
   both dialogs sit open over the page from first paint. */
[hidden] { display: none !important }
body.jl-locked { overflow: hidden }