/* Atlera, Issue No. 01. Ported from the A+ design canvas. */
/* Fonts, self-hosted: the same files and rules Google Fonts serves (Bodoni Moda, Jost, Libre Caslon Text, SIL Open Font License).
   Each file downloads only if the page uses a character in its unicode-range. */
/* Bodoni Moda italic 400, math */ @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-italic-math-857898.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-209F, 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; }
/* Bodoni Moda italic 400, symbols */ @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-italic-symbols-613b20.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-1F1AE, 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-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda italic 400, latin-ext */ @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-italic-latin-ext-dae5db.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda italic 400, latin */ @font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-italic-latin-9cc033.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; }
/* Bodoni Moda normal 400, math */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-math-2b120a.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-209F, 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; }
/* Bodoni Moda normal 400, symbols */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-symbols-d0a0b1.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-1F1AE, 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-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda normal 400, latin-ext */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-latin-ext-9ecbcf.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda normal 400, latin */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-latin-a19a09.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; }
/* Bodoni Moda normal 500, math */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-math-2b120a.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-209F, 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; }
/* Bodoni Moda normal 500, symbols */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-symbols-d0a0b1.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-1F1AE, 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-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda normal 500, latin-ext */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-latin-ext-9ecbcf.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda normal 500, latin */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-latin-a19a09.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; }
/* Bodoni Moda normal 900, math */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-math-2b120a.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-209F, 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; }
/* Bodoni Moda normal 900, symbols */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-symbols-d0a0b1.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-1F1AE, 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-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF; }
/* Bodoni Moda normal 900, latin-ext */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-latin-ext-9ecbcf.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bodoni Moda normal 900, latin */ @font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/bodoni-moda-normal-latin-a19a09.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; }
/* Jost normal 300, cyrillic */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/jost-normal-cyrillic-880f7b.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Jost normal 300, latin-ext */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/jost-normal-latin-ext-1bb29f.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Jost normal 300, latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/jost-normal-latin-b58a58.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; }
/* Jost normal 400, cyrillic */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jost-normal-cyrillic-880f7b.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Jost normal 400, latin-ext */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jost-normal-latin-ext-1bb29f.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Jost normal 400, latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jost-normal-latin-b58a58.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; }
/* Jost normal 500, cyrillic */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jost-normal-cyrillic-880f7b.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Jost normal 500, latin-ext */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jost-normal-latin-ext-1bb29f.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Jost normal 500, latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jost-normal-latin-b58a58.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; }
/* Jost normal 600, cyrillic */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jost-normal-cyrillic-880f7b.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* Jost normal 600, latin-ext */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jost-normal-latin-ext-1bb29f.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Jost normal 600, latin */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/jost-normal-latin-b58a58.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; }
/* Libre Caslon Text italic 400, latin-ext */ @font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-italic-latin-ext-d0da8d.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Libre Caslon Text italic 400, latin */ @font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-italic-latin-c392d5.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; }
/* Libre Caslon Text normal 400, latin-ext */ @font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-normal-latin-ext-133935.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Libre Caslon Text normal 400, latin */ @font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/libre-caslon-text-normal-latin-0e9863.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; }

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: #FFFFFF; color: #0B0B0B; font: 400 17px/1.65 "Libre Caslon Text", Georgia, serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0 }
img, video { display: block; max-width: 100% }
a { color: #0B0B0B }
a:hover { color: #80612C }
:focus-visible { outline: 2px solid #80612C; outline-offset: 3px }
[hidden] { display: none !important }
section[id], [id="main"] { scroll-margin-top: 66px }
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 14px; background: #0B0B0B; color: #FFFFFF; font: 500 14px "Jost", sans-serif }
.skip:focus { top: 12px; color: #FFFFFF }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* type and layout */
.d { font-family: "Bodoni Moda", "Didot", serif }
.s { font-family: "Jost", system-ui, sans-serif }
.k { font: 500 11px/1.4 "Jost", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #80612C }
.kn { font: 500 11px/1.4 "Jost", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #C9A86E }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px }
.sec { padding: 128px 0; border-top: 1px solid #0B0B0B }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start }
.half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: start }
.h2 { font-family: "Bodoni Moda", serif; font-weight: 400; font-size: 60px; line-height: 1.02; letter-spacing: -.012em }
.lede { font: 400 18px/1.6 "Jost", sans-serif; color: #5F5A55 }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid #0B0B0B; background: transparent; color: #0B0B0B; font: 600 12px "Jost", sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s }
.btn:hover { border-color: #9A7744; color: #80612C }
.btn.solid { background: #0B0B0B; color: #FFFFFF }
.btn.solid:hover { background: #80612C; border-color: #80612C; color: #FFFFFF }
.btn.light { border-color: #FFFFFF; color: #FFFFFF }
.btn.light:hover { border-color: #C9A86E; color: #C9A86E }
.btn.lightsolid { background: #FFFFFF; border-color: #FFFFFF; color: #0B0B0B }
.btn.lightsolid:hover { background: #C9A86E; border-color: #C9A86E; color: #0B0B0B }
.btn:disabled { opacity: .35; cursor: default }
.btn--sm { height: 42px; padding: 0 20px }
.btn--md { height: 46px; padding: 0 22px }
.strike { position: relative; display: inline-block }
.strike svg { position: absolute; left: -5%; top: 30%; width: 110%; height: 50%; overflow: visible }

/* header */
.site-h { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #0B0B0B; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.site-h__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 66px }
.logo { font-weight: 900; font-size: 24px; letter-spacing: .06em; text-decoration: none }
.navl { display: flex; gap: 26px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase }
.navl a { text-decoration: none; white-space: nowrap }
.navl span { color: #80612C }

/* opener */
/* The opener fits the screen under the header, so the sum and its buttons are in view on a laptop. */
.op { position: relative; height: clamp(540px, calc(100vh - 67px), 880px); height: clamp(540px, calc(100svh - 67px), 880px); background: #FBFAF8; overflow: hidden }
.op-grid { position: absolute; inset: 24px 24px 52px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 8px }
.t { position: relative; overflow: hidden; grid-column: var(--c); grid-row: var(--r); animation: op-pop .5s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both }
.t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) }
.t.gold { background: #C9A86E }
.t.gold img { mix-blend-mode: multiply }
.op-h { grid-column: 3 / span 6; grid-row: 2 / span 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center }
/* the kicker sits inside the h1, so the heading names the subject; it keeps its own size and spacing */
.op-k { margin-bottom: 18px; font-size: 12px; font-weight: 600; line-height: 1.65; letter-spacing: .22em; text-transform: uppercase; color: #80612C; text-wrap: balance }
.op-h .op-k { display: block }
.op-h h1 { font-weight: 400; font-size: clamp(40px, min(5.4vw, 10.5vh), 76px); font-size: clamp(40px, min(5.4vw, 10.5svh), 76px); line-height: 1.02; letter-spacing: -.015em }
/* money in Jost: Bodoni's hairline "$" reads as "S" at this size (the TikToks and link card made the same switch) */
.op-m { font-family: "Jost", system-ui, sans-serif; font-weight: 300; font-size: .9em; letter-spacing: -.01em }
.op-real { color: #80612C }
.op-sub { margin-top: 20px; max-width: 32em; font-size: 16px; line-height: 1.55; color: #3F3B37; text-wrap: pretty }
.op-h .op-cta { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px }
.w { display: inline-block; animation: op-rise .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both }
.op-strike path { stroke: #B3261E; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-dasharray: 120; animation: op-draw .6s ease-out 1.25s both }
.op-foot { position: absolute; left: 24px; right: 24px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; font: 500 11px "Jost", sans-serif; letter-spacing: .14em; text-transform: uppercase; animation: op-rise .6s ease-out .9s both }
.op-foot .d { font-weight: 900; letter-spacing: .08em }
.op-replay { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; border-bottom: 1px solid #0B0B0B; padding: 6px 0 }
.op-replay:focus-visible { outline: 2px solid #80612C; outline-offset: 3px }
@keyframes op-pop { from { opacity: 0; transform: scale(.55) } to { opacity: 1; transform: none } }
@keyframes op-rise { from { opacity: 0; transform: translateY(.4em) } to { opacity: 1; transform: none } }
@keyframes op-draw { from { stroke-dashoffset: 120 } to { stroke-dashoffset: 0 } }

/* cover */
.cover { position: relative; height: 880px; background: #0B0B0B; color: #FFFFFF; overflow: hidden }
.cover-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 32% }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .6) 40%, rgba(11, 11, 11, 0) 70%) }
.cover-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 26px; padding-bottom: 40px }
.cover-k { display: flex; justify-content: space-between; gap: 16px; text-wrap: balance; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #E9E5DF }
/* The wordmark: Bodoni doesn't kern R-A, so the last A is tucked in by hand (same -0.06em in the videos);
   optical size 40 gives the A's hairline enough body to survive on the photo and in the pale footer. */
.ra { margin-left: -.06em }
.mast, .f-word { font-variation-settings: 'opsz' 40 }
/* Desktop keeps the old masthead size, so the cover keeps its vertical layout; the six-letter name simply ends before his face. */
.mast { margin-top: 10px; font-weight: 900; font-size: min(164px, calc((100vw - 96px) / 7.45)); line-height: .84; letter-spacing: -.04em; white-space: nowrap }
.cover-b { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px }
.cover-copy { max-width: 640px; display: flex; flex-direction: column; gap: 20px }
.hero-h { font-weight: 400; font-size: 84px; line-height: .98; letter-spacing: -.015em }
.hero-h em { color: #C9A86E }
.nb { white-space: nowrap }
.cover-dek { font-size: 19px; line-height: 1.5; color: #E9E5DF; max-width: 33em }
.cover-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px }
.cover-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: #BDB7AF }
.cover-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
/* the generated-footage note and the pause control sit over his white shirt on desktop: a dark chip keeps both readable */
.cover-credit { font-size: 11px; letter-spacing: .08em; color: #E9E5DF; text-align: right; background: rgba(11, 11, 11, .72); padding: 7px 10px; border-radius: 3px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.motion-toggle { appearance: none; background: rgba(11, 11, 11, .72); border: 0; border-radius: 3px; padding: 0 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); min-height: 44px; cursor: pointer; font: 500 11px "Jost", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #E9E5DF; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(233, 229, 223, .5) }
.motion-toggle:focus-visible { outline: 2px solid #C9A86E; outline-offset: 4px }

/* loops: the still sits underneath; the loop fades in once it is actually playing */
video.loop { opacity: 0; transition: opacity .6s ease; pointer-events: none }
video.loop.is-on { opacity: 1 }

/* showcase */
.showcase { padding: 10px 0 0 }
.bento { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; height: 820px; padding: 0 10px }
.tile { position: relative; overflow: hidden; background: #F3F1EE }
.hero-tile { grid-row: 1 / span 2; background: #0B0B0B }
.hero-tile .sc-img, .hero-tile .sc-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.04) }
.hero-tile .sc-img { animation: op-rise .6s ease-out both }
.hero-tile .sc-img.keep { filter: none }
.halftone { position: absolute; inset: 0; background-image: radial-gradient(rgba(201, 168, 110, .55) 1px, transparent 1.4px); background-size: 7px 7px; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 55%); mask-image: linear-gradient(115deg, #000 0%, transparent 55%); pointer-events: none }
.sc-foot { position: absolute; left: 36px; right: 36px; bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px }
.sc-card { max-width: 460px; padding: 22px 24px; background: #FFFFFF }
.sc-row { display: flex; align-items: center; gap: 12px }
.sc-no { font-size: 12px; letter-spacing: .14em; color: #80612C }
.stat { display: inline-block; padding: 5px 12px; border-radius: 999px; font: 600 11px "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; background: #F3F1EE; color: #5F5A55 }
.stat.live { background: #0B0B0B; color: #FFFFFF }
.sc-title { margin-top: 10px; font-size: 34px; line-height: 1.05 }
.sc-desc { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #5F5A55 }
.sc-cta { margin-top: 16px }
.sc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px }
.sc-credit { font-size: 10px; letter-spacing: .1em; color: #0B0B0B; text-align: right; max-width: 200px; background: #FFFFFF; padding: 6px 9px }
.motion-chip { appearance: none; border: 0; background: #FFFFFF; color: #0B0B0B; min-height: 44px; padding: 0 14px; font: 600 10px/1 "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer }
.motion-chip:focus-visible { outline: 2px solid #0B0B0B; outline-offset: 3px }
.names { display: flex; gap: 56px; align-items: center; height: 100%; padding: 0 44px; overflow-x: auto; scrollbar-width: none }
.names::-webkit-scrollbar { display: none }
.nm { all: unset; cursor: pointer; flex: none; display: grid; grid-template-columns: auto auto; column-gap: 8px; font: 600 46px/.92 "Jost", sans-serif; letter-spacing: -.025em; text-transform: uppercase; color: #8A857E; transition: color .25s }
.nm small { grid-row: 1 / span 2; font: 500 12px "Jost", sans-serif; letter-spacing: .1em; padding-top: 4px; color: #6B655F }
.nm em { font-style: normal; font-size: 13px; letter-spacing: .14em; color: #6B655F; padding-top: 10px }
.nm[aria-current="true"] { color: #0B0B0B }
.nm[aria-current="true"] em { color: #80612C }
.nm:hover { color: #3F3B37 }
.nm:focus-visible { outline: 1px solid #80612C; outline-offset: 6px }
.names-hint { position: absolute; left: 44px; bottom: 22px; font-size: 12px; color: #6B655F }
.tabs-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px }
.tabs { display: flex; gap: 30px; justify-content: center }
.tb { all: unset; cursor: pointer; position: relative; font: 500 13px "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #6B655F; padding: 12px 0 }
.tb[aria-selected="true"] { color: #0B0B0B }
.tb[aria-selected="true"]::before { content: ""; position: absolute; left: 50%; top: -4px; width: 4px; height: 4px; border-radius: 50%; background: #0B0B0B; transform: translateX(-50%) }
.tb:focus-visible { outline: 1px solid #80612C; outline-offset: 4px }

/* 01 the price */
.sec-head { align-items: end }
.sec-head .h2 { margin-top: 18px }
/* 01 The price, after dark: the trip's objects on black slate, each priced where it lies */
.price { background: #080806; color: #F3F1EE; border-top: 0 }
.price .k { color: #C9A86E }
.price .h2 em { color: #C9A86E }
.price .lede { color: #BDB7AF }
.night { position: relative; margin: 56px 0 30px }
.night img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-composite: intersect }
.co { all: unset; cursor: pointer; position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 1 }
.co .dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #C9A86E; box-shadow: 0 0 0 4px rgba(201, 168, 110, .22); font-size: 0; color: transparent }
.co .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(201, 168, 110, .7); animation: co-ring 2.4s ease-out infinite }
.co .ln { position: absolute; left: -.5px; width: 1px; height: 22px; background: rgba(201, 168, 110, .8) }
.co.up .ln { bottom: 7px }
.co.down .ln { top: 7px }
.co .tag { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center; padding: 6px 10px; border-radius: 6px; transition: background .25s, box-shadow .25s }
.co.up .tag { bottom: 29px }
.co.down .tag { top: 29px }
.co .tag small { display: block; font: 600 10px "Jost", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #E9E5DF }
.co .tag small i { font-style: normal; color: #C9A86E; margin-right: 3px } /* plus the real space after it: the same 8px-wide gap */
.co .tag b { display: block; margin-top: 4px; font: 300 34px/1 "Jost", sans-serif; letter-spacing: -.01em; color: #D8B87A; font-variant-numeric: tabular-nums lining-nums }
.co.adv .tag b { color: #F3F1EE }
.co.on .tag { background: rgba(201, 168, 110, .16); box-shadow: 0 0 0 1px rgba(201, 168, 110, .5) }
.co.on .dot { background: #F3F1EE }
.co:focus-visible .tag { outline: 2px solid #C9A86E; outline-offset: 2px }
@keyframes co-ring { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(2.2); opacity: 0 } }
.price .figcap { color: #8F8A84 }
.price .figcap b { color: #E9E5DF }
/* the punchline: how much of the trip the advert's price covers */
.share { margin-top: 80px }
.share-h { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap }
.share-big { font-size: 54px; line-height: 1.05; letter-spacing: -.01em }
.share-big em { font-style: normal; font-family: "Jost", sans-serif; font-weight: 300; color: #C9A86E }
.share-of { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8F8A84; white-space: nowrap }
.bar { margin-top: 26px; display: flex; height: 66px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #222 }
.seg { position: relative; min-width: 3px; transition: flex-grow .5s cubic-bezier(.25, .8, .25, 1), filter .2s }
.seg i { position: absolute; left: 12px; bottom: 10px; font: 600 10px "Jost", sans-serif; letter-spacing: .16em; font-style: normal }
.seg.on { filter: brightness(1.2) }
.legend { list-style: none; padding: 0; margin: 16px 0 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #8F8A84 }
.legend li { padding: 2px 6px; border-radius: 4px; transition: background .2s }
.legend li.on { background: rgba(201, 168, 110, .16) }
.legend b { display: block; font: 300 22px/1.1 "Jost", sans-serif; color: #F3F1EE; font-variant-numeric: tabular-nums lining-nums }
.legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 1px }
/* the receipt stays white paper, now on the dark */
.price .rc-side h3 { color: #F3F1EE }
.price .rc-side .p1 { color: #BDB7AF }
.price .rc-side .p2 { color: #8F8A84 }
.price .btn.solid { background: #FFFFFF; border-color: #FFFFFF; color: #0B0B0B }
.price .btn.solid:hover { background: #C9A86E; border-color: #C9A86E; color: #0B0B0B }
.price .tlink { color: #BDB7AF; border-bottom-color: #5F5A55 }
.price .tlink:hover { color: #FFFFFF; border-bottom-color: #FFFFFF }
.price .paper { color: #0B0B0B; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .05) }
.figcap { margin-top: 14px; font-size: 13px; color: #5F5A55 }
.figcap b { font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #0B0B0B; margin-right: 12px }
.rc-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 96px; align-items: start; margin-top: 96px }
.rc-side { position: sticky; top: 120px; max-width: 380px }
.rc-side h3 { margin-top: 16px; font-size: 44px; line-height: 1.05; font-weight: 400 }
.rc-side .p1 { margin-top: 14px; font-size: 16px; line-height: 1.6; color: #5F5A55 }
.rc-side .p2 { margin-top: 14px; font-size: 13px; line-height: 1.6; color: #6B655F }
.rc-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px }
.tlink { all: unset; cursor: pointer; font: 500 13px "Jost", sans-serif; color: #5F5A55; border-bottom: 1px solid #C9C4BC; padding: 6px 0 2px }
.tlink:hover { color: #0B0B0B; border-color: #0B0B0B }
.tlink:focus-visible { outline: 2px solid #80612C; outline-offset: 3px }
.paper { position: relative; max-width: 560px; margin-left: auto; background: #FFFFFF; padding: 40px 44px 46px; box-shadow: 0 1px 0 #E9E5DF, 0 30px 60px -30px rgba(11, 11, 11, .25), 0 2px 6px rgba(11, 11, 11, .05) }
.paper-h { text-align: center; padding-bottom: 22px; border-bottom: 1px dashed #C9C4BC }
.paper-h .d { font-weight: 900; font-size: 15px; letter-spacing: .22em }
.paper-h .s { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #6B655F }
.paper-h .s:first-of-type { margin-top: 6px }
.paper-b { padding: 8px 0 }
.rl { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 16px 0 16px 12px; margin: 0 0 0 -12px; border-bottom: 1px solid #F0ECE6; border-left: 2px solid transparent; transition: border-color .2s, background .2s }
.rl.on { border-left-color: #B3261E; background: linear-gradient(90deg, rgba(179, 38, 30, .04), transparent 60%) }
.rn { font: 500 11px "Jost", sans-serif; letter-spacing: .12em; color: #80612C }
.rl.on .rn { color: #B3261E }
.rl-t { font: 400 16px "Jost", sans-serif; color: #0B0B0B }
.rl-t .sub { display: block; margin-top: 6px; font-size: 13px; color: #6B655F }
.mini { width: 3ch; border: 0; border-bottom: 1px solid #C9C4BC; border-radius: 0; background: transparent; font: 500 13px "Jost", sans-serif; color: #0B0B0B; text-align: center; padding: 0 0 1px }
.mini:focus { outline: none; border-bottom-color: #80612C }
.amt2 { display: inline-flex; align-items: baseline; justify-content: flex-end; font: 400 20px "Jost", sans-serif; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: #0B0B0B }
.amt2 input { border: 0; border-bottom: 1px solid #E3E0DC; border-radius: 0; background: transparent; font: inherit; color: inherit; text-align: right; padding: 0 0 1px; min-width: 2ch; transition: border-color .2s }
.amt2 input:hover { border-bottom-color: #9A958E }
.amt2 input:focus { outline: none; border-bottom-color: #80612C }
.paper-f { padding-top: 22px; border-top: 1px dashed #C9C4BC }
.tot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px }
.tot .s { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase }
.tot .num { font: 300 64px/1 "Jost", sans-serif; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em }
.tot-sub { margin-top: 8px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #6B655F }
.tot-sub .x { color: #B3261E; font-weight: 600 }
.tear { position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 7px, #FFFFFF 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 7px, #FFFFFF 0) 0 0 / 14px 10px repeat-x }

/* 02 your quote */
.quote { background: #0B0B0B; color: #FFFFFF; border-top: 1px solid rgba(255, 255, 255, .1) }
.quote .h2 em { color: #C9A86E }
.quote-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px }
.quote-intro { display: flex; flex-direction: column; gap: 20px }
.quote-intro .lede { color: #BDB7AF }
.quote-note { font-size: 13px; color: #8F8A84 }
.qr { padding: 26px 28px; background: #111111; border: 1px solid #2A2A2A; border-radius: 18px }
.qr-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid #2A2A2A }
.qr-h .t1 { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #C9A86E }
.qr-h .t2 { font-size: 13px; color: #BDB7AF }
.qr ul { list-style: none; padding: 0 }
.qrow { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #1E1E1E; font: 400 15px "Jost", sans-serif; color: #8F8A84 }
.qrow .mk { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1px solid #3A3A3A }
.qrow .st { font-size: 12px; letter-spacing: .08em }
.qrow.cur { color: #FFFFFF }
.qrow.cur .mk { border-color: #FFFFFF }
.qrow.good { color: #E9E5DF }
.qrow.good .mk { background: #9A7744; border-color: #9A7744; color: #0B0B0B }
.qrow.good .st { color: #C9A86E }
.qrow.bad { color: #E9E5DF }
.qrow.bad .mk { background: #D8402F; border-color: #D8402F; color: #FFFFFF }
.qrow.bad .st { color: #F0907F }
.qrow:focus-visible { outline: 1px solid #9A7744; outline-offset: 2px }
.qr-f { display: flex; align-items: baseline; gap: 14px; padding-top: 16px; border-top: 1px solid #2A2A2A }
.qr-f .d { font-size: 56px; line-height: 1 }
.qr-f .d.has { color: #F0907F }
.qr-f .s { font-size: 14px; color: #E9E5DF }
.segs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 22px }
.sg { all: unset; cursor: pointer; height: 6px; border-radius: 3px; background: #2A2A2A; transition: background .25s; position: relative }
.sg::after { content: ""; position: absolute; inset: -12px 0 }
.sg.good { background: #9A7744 }
.sg.bad { background: #D8402F }
.sg.cur { box-shadow: 0 0 0 2px #0B0B0B, 0 0 0 3px #FFFFFF }
.sg:focus-visible { box-shadow: 0 0 0 2px #0B0B0B, 0 0 0 3px #9A7744 }
.qcard { padding: 44px; background: #141414; border: 1px solid #2A2A2A; border-radius: 24px; animation: op-rise .45s cubic-bezier(.2, .8, .2, 1) both }
.qcard .t1 { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #C9A86E }
.qcard h3 { margin-top: 14px; font-size: 40px; line-height: 1.1; font-weight: 400 }
.qopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px }
.qo { all: unset; cursor: pointer; box-sizing: border-box; position: relative; padding: 22px 20px 24px; border: 1px solid #333333; border-radius: 18px; background: #0F0F0F; color: #FFFFFF; transition: border-color .2s, background .2s, transform .2s }
.qo:hover { border-color: #6A6560; transform: translateY(-2px) }
.qo:focus-visible { outline: 2px solid #9A7744; outline-offset: 3px }
.qo .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #3A3A3A; font: 500 20px "Jost", sans-serif }
.qo .lb { display: block; margin-top: 18px; font-size: 30px; line-height: 1 }
.qo .hn { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: #BDB7AF }
.qo .tick { position: absolute; top: 18px; right: 18px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #9A7744; color: #0B0B0B; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s }
.qo[aria-checked="true"] { border: 2px solid #9A7744; background: #1A1712; padding: 21px 19px 23px }
.qo[aria-checked="true"] .tick { opacity: 1; transform: none }
.qo[aria-checked="true"] .ic { border-color: #9A7744; color: #C9A86E }
.qv { margin-top: 22px; padding: 18px 20px; border-radius: 14px; animation: op-rise .35s ease-out both }
.qv.ok { background: #1A1712; border: 1px solid #5A4A2E; color: #C9A86E }
.qv.red { background: #1F1110; border: 1px solid #6B2A22; color: #F0907F }
.qv .t1 { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase }
.qv .t2 { margin-top: 6px; font-size: 17px; line-height: 1.5; color: #FFFFFF }
.qnav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px }
.qnav { all: unset; cursor: pointer; font: 500 13px "Jost", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #BDB7AF; padding: 12px 0 }
.qnav:hover { color: #FFFFFF }
.qnav:disabled { opacity: .35; cursor: default }
.qnav:focus-visible { outline: 2px solid #9A7744; outline-offset: 3px }
.qdone-h { margin-top: 14px; font-size: 64px; line-height: 1 }
.qdone-p { margin-top: 10px; font-size: 17px; color: #BDB7AF }
.asks-t { margin-top: 28px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase }
.asks { list-style: none; padding: 0; margin-top: 12px }
.asks li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid #2A2A2A; font: 400 16px/1.5 "Jost", sans-serif }
.asks .d { font-size: 24px; color: #C9A86E; line-height: 1.1 }
.qdone-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px }

/* 03 red flags: a contact sheet of the trip, the four advert lines circled in red pen */
.fc { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 64px; align-items: start }
.fc-sheet { min-width: 0; margin: 0; border: 0; background: #0B0B0B; padding: 6px 18px; box-shadow: 0 30px 60px -36px rgba(11, 11, 11, .5) }
.fc-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 22px 0 }
.fc-strip::before, .fc-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(90deg, #3F3B37 0 10px, transparent 10px 24px); opacity: .9 }
.fc-strip::before { top: 7px }
.fc-strip::after { bottom: 7px }
.fc .fr { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; -webkit-tap-highlight-color: transparent }
.fc .im { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #161616 }
.fc .fr img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.92); transition: filter .3s }
.fc .fr:hover img { filter: grayscale(1) contrast(1.03) brightness(1.05) }
.fc .fr input:checked ~ .im { box-shadow: 0 0 0 2px #F3F1EE }
.fc .fr input:focus-visible ~ .im { box-shadow: 0 0 0 2px #C9A86E }
.fc .fn { position: absolute; left: 0; top: -17px; font: 500 9px "Jost", sans-serif; letter-spacing: .16em; color: #BDB7AF }
.fc .ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.fc .ring path { fill: none; stroke: #B3261E; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round }
.fc .rn2 { position: absolute; right: -8px; top: -12px; width: 20px; height: 20px; border-radius: 50%; background: #B3261E; color: #FFFFFF; display: grid; place-items: center; font: 600 10px/1 "Jost", sans-serif }
/* the pen draws once the sheet is on screen; without the script the rings are simply there */
.fc-sheet.armed .ring path { stroke-dasharray: 100 110; stroke-dashoffset: 105 }
.fc-sheet.armed .rn2 { opacity: 0 }
.fc-sheet.armed.drawn .ring path { animation: fc-pen .7s cubic-bezier(.45, .05, .25, 1) var(--dl, .5s) forwards }
.fc-sheet.armed.drawn .rn2 { animation: op-rise .4s ease-out var(--dn, 1s) forwards }
@keyframes fc-pen { to { stroke-dashoffset: 0 } }
.fc-meta { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #6B655F }
.fc-loupe .im { background: #0B0B0B }
.fc-loupe img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); animation: fc-in .45s ease-out both }
@keyframes fc-in { from { opacity: .2 } to { opacity: 1 } }
.fc-lrow { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
.fc-lrow .fno { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #5F5A55 }
.stat.red { background: #B3261E; color: #FFFFFF }
.claim { font-size: 26px; line-height: 1.25; color: #5F5A55; text-decoration: line-through; text-decoration-color: #B3261E; text-decoration-thickness: 2px }
.fc-loupe .claim { margin-top: 16px; font-size: 32px }
.fc-loupe .rf { margin-top: 12px; font-size: 17px; line-height: 1.6 }
.fc-loupe .rf b { color: #B3261E; font-weight: 600 }
.fc-loupe .ask { margin-top: 16px; padding-top: 14px; border-top: 1px solid #E3E0DC; font-size: 13px; line-height: 1.5; color: #5F5A55 }
.fc-loupe .ask small { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #6B655F }
.fc-loupe .ask i { font: italic 400 19px/1.4 "Bodoni Moda", serif; color: #0B0B0B }
.fc-loupe .clean { margin-top: 16px; font-size: 32px; line-height: 1.15 }
.fc-loupe .clean-t { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #5F5A55 }

/* 04 compare: the only before-and-after, a clinic's message under the Atlera receipt */
/* "before-and-after" never breaks, so the heading steps down a little on narrower laptops instead of overflowing */
.ds-h { font-size: min(60px, 4.6vw) }
.ds { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: start }
.ds-slide { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0B0B0B; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent }
.ds-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); pointer-events: none; -webkit-user-drag: none }
.ds-after { object-position: 50% 42% }
.ds-before { position: absolute; inset: 0 }
.ds-before img { object-position: 56% 50% }
.ds-line { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: #FFFFFF; pointer-events: none }
.ds-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #FFFFFF; color: #0B0B0B; display: grid; place-items: center; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .2em; box-shadow: 0 10px 30px -10px rgba(11, 11, 11, .6) }
.ds-tag { position: absolute; top: 20px; font-size: 10px; line-height: 1.4; letter-spacing: .1em; color: #0B0B0B; background: #FFFFFF; padding: 6px 9px; pointer-events: none }
.ds-tag.l { left: 20px }
.ds-tag.r { right: 20px }
.ds-ring { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #80612C; opacity: 0; pointer-events: none }
.ds-rng:focus-visible ~ .ds-ring { opacity: 1 }
.ds-say { margin-top: 22px; min-height: 3.2em; font-size: 13px; line-height: 1.6; color: #5F5A55 }
.ds-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px }
.cmp { width: 100%; border-collapse: collapse }
.cmp th, .cmp td { padding: 20px 22px; text-align: left; border-bottom: 1px solid #E3E0DC; font: 400 16px/1.45 "Jost", sans-serif; vertical-align: top; transition: color .25s, box-shadow .25s }
.cmp thead th { font: 500 11px "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #5F5A55; border-bottom: 1px solid #0B0B0B }
.cmp tbody th { font: 400 21px/1.3 "Bodoni Moda", serif }
.cmp td.them { color: #5F5A55 }
.cmp .us { background: #F7F2E8; font-weight: 500 }
.cmp thead .us { color: #80612C }
/* the table leans with the line: more of the clinic's photo lights the usual way, more of the receipt lights Atlera */
.cmp.lu thead th.them, .cmp.lu td.them, .cmp.la thead th.us { color: #0B0B0B }
.cmp.lu thead th.them, .cmp.la thead th.us { box-shadow: inset 0 -2px 0 #0B0B0B }

/* 05 rules */
.rules-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px }
.rules-list { list-style: none; padding: 0; border-bottom: 1px solid #E3E0DC }
.rule { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid #E3E0DC }
.rule > .d { font-size: 44px; line-height: 1 }
.rule h3 { font-size: 25px; font-weight: 400 }
.rule p { font-size: 15px; color: #5F5A55 }

/* editors' letter and questions */
.letter { background: #F3F1EE }
.letter-fig .frame { position: relative }
.letter-fig img, .letter-fig video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) }
.letter-fig video { position: absolute; inset: 0; height: 100% }
.letter-fig figcaption { margin-top: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5F5A55 }
.letter-copy { display: flex; flex-direction: column; gap: 22px }
.letter-quote { font-size: 50px; line-height: 1.06; font-style: italic }
.letter-body { font-size: 19px; line-height: 1.7 }
.faq { border-top: 1px solid #0B0B0B }
.faq details { border-bottom: 1px solid #D9D4CC }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 400 22px/1.3 "Bodoni Moda", serif }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; flex: none; font: 400 22px "Jost", sans-serif; color: #80612C; transition: transform .2s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { padding: 0 0 20px; font: 400 16px/1.6 "Jost", sans-serif; color: #5F5A55; max-width: 56ch }
/* feedback for the editors: shown only when it can be delivered */
.fb-q { margin-top: 10px; font-size: 30px; line-height: 1.15 }
.fb-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px }
.fb-opts .btn[aria-pressed="true"] { background: #0B0B0B; color: #FFFFFF }
.fb-more { margin-top: 18px; display: flex; flex-direction: column; gap: 10px }
.fb-more label { font-size: 14px; font-weight: 500; color: #0B0B0B }
.fb-more label small { margin-left: 8px; font-size: 12px; font-weight: 400; color: #6B655F }
.fb-more textarea { width: 100%; min-height: 96px; resize: vertical; padding: 12px 14px; border: 1px solid #C9C4BC; border-radius: 0; background: #FFFFFF; font: 400 16px/1.5 "Jost", sans-serif; color: #0B0B0B }
.fb-more textarea:focus { outline: none; border-color: #80612C }
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px }
.fb-note { font-size: 13px; color: #6B655F }
.fb-done { margin-top: 14px; font-size: 16px; line-height: 1.5; color: #0B0B0B }

/* join */
.join { background: #0B0B0B; color: #FFFFFF; border-top: 0 }
.join .half { align-items: center }
.join-copy { display: flex; flex-direction: column; gap: 20px }
.join .h2 em { color: #C9A86E }
.join-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 17px; color: #E9E5DF }
.join-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px }
.join-list li::before { content: "—"; color: #9A7744 }
.wl { display: flex; flex-direction: column; gap: 16px; padding: 36px; border: 1px solid #3A3A3A; margin-top: 8px }
.wl label.f { display: flex; flex-direction: column; gap: 8px; font: 500 11px "Jost", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #BDB7AF }
.wl input[type=email], .wl select { width: 100%; font: 400 17px "Jost", sans-serif; letter-spacing: 0; text-transform: none; padding: 15px 16px; border: 1px solid #3A3A3A; border-radius: 0; background: #161616; color: #FFFFFF; -webkit-appearance: none; appearance: none }
.wl select { background-image: linear-gradient(45deg, transparent 50%, #BDB7AF 50%), linear-gradient(135deg, #BDB7AF 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px }
.wl input[type=email]:focus, .wl select:focus { outline: none; border-color: #C9A86E }
.wl .check { display: flex; gap: 10px; align-items: center; font: 400 15px "Jost", sans-serif; color: #BDB7AF; cursor: pointer }
.wl .check input { width: 20px; height: 20px; margin: 0; accent-color: #9A7744 }
.wl .send { height: 56px }
.wl .msg { padding: 12px 14px; font: 400 15px/1.5 "Jost", sans-serif; background: #1A1712; border: 1px solid #5A4A2E; color: #E9E5DF }
.wl .msg.err { background: #1F1110; border-color: #6B2A22; color: #F0907F }
.wl .fine { font: 400 14px/1.5 "Jost", sans-serif; color: #E9E5DF }
.wl .fine2 { font: 400 12px/1.5 "Jost", sans-serif; color: #8F8A84 }
.wl .fine2 a { color: #E9E5DF }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.phoneph img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45% }
.phoneph figcaption { margin-top: 8px; font-size: 12px; color: #8F8A84 }

/* privacy */
.privacy { padding: 96px 0; border-top: 1px solid #0B0B0B }
.privacy-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin-top: 36px }
.privacy-list h3 { font: 600 11px "Jost", sans-serif; letter-spacing: .2em; text-transform: uppercase }
.privacy-list p { margin-top: 8px; font: 400 16px/1.6 "Jost", sans-serif; color: #5F5A55 }

/* footer */
.site-f { padding: 80px 0 56px; border-top: 1px solid #0B0B0B; overflow: hidden }
.f-word { font-weight: 900; font-size: clamp(48px, 20.1vw, 294px); line-height: .82; letter-spacing: -.045em; color: #E9E5DF; white-space: nowrap }
.f-row { margin-top: 40px }
.f-legal { font: 400 14px/1.7 "Jost", sans-serif; color: #5F5A55 }
.f-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 400 14px "Jost", sans-serif }
.f-credit { margin-top: 14px; font: 400 12px/1.6 "Jost", sans-serif; color: #5F5A55 }

/* print: only the receipt or the questions */
#print-area { display: none }
@media print {
  html.printing body > *:not(#print-area) { display: none !important }
  html.printing #print-area { display: block !important; font: 400 13pt/1.5 "Jost", sans-serif; color: #000 }
  #print-area h1 { font: 900 18pt "Bodoni Moda", serif; letter-spacing: .2em; text-align: center }
  #print-area .sub { text-align: center; font-size: 9pt; letter-spacing: .14em; text-transform: uppercase; color: #555; margin-top: 4pt }
  #print-area table { width: 100%; border-collapse: collapse; margin-top: 16pt }
  #print-area td { padding: 8pt 0; border-bottom: 1px solid #ccc }
  #print-area td:last-child { text-align: right }
  #print-area .total td { font-size: 18pt; border-bottom: 0; padding-top: 14pt }
  #print-area ol { margin-top: 12pt; padding-left: 18pt }
  #print-area li { margin: 8pt 0 }
  #print-area .foot { margin-top: 24pt; font-size: 9pt; color: #555 }
}

/* motion off */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .t, .w, .op-foot, .op-strike path, .qcard, .qv, .hero-tile .sc-img, .co .dot::after, .fc-loupe img { animation: none }
  .fc-sheet.armed .ring path, .fc-sheet.armed.drawn .ring path { stroke-dashoffset: 0; animation: none }
  .fc-sheet.armed .rn2, .fc-sheet.armed.drawn .rn2 { opacity: 1; animation: none }
  video.loop, .motion-toggle, .motion-chip { display: none }
}

/* ---------- tablets and phones ---------- */
@media (max-width: 1100px) {
  .hero-h { font-size: 64px }
  .navl { gap: 18px }
  .nm { font-size: 38px }
}
@media (max-width: 1080px) {
  .navl { display: none }  /* below this the five links wrap onto two lines; the logo and "See my price" stay */
}
@media (max-width: 1180px) {
  .fc, .ds { gap: 44px }
  .ds .cmp th, .ds .cmp td { padding: 16px 14px }
}
@media (max-width: 900px) {
  body { font-size: 16px }
  section[id], [id="main"] { scroll-margin-top: 58px }
  .wrap { padding: 0 18px }
  .sec { padding: 80px 0 }
  .two, .half { grid-template-columns: minmax(0, 1fr); gap: 40px }
  .h2 { font-size: 40px }
  .lede { font-size: 16px }
  .site-h__in { height: 58px }
  .logo { font-size: 20px }

  .op { height: auto; min-height: 560px; min-height: clamp(560px, calc(100svh - 59px), 820px); display: flex; flex-direction: column; padding: 14px 14px 46px }
  .op-grid { position: relative; inset: auto; flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(76px, 1fr) auto minmax(76px, 1fr); gap: 6px }
  .t { grid-column: var(--mc); grid-row: var(--mr) }
  .t.hide-s { display: none }
  .op-h { grid-column: 1 / -1; grid-row: 2; padding: 18px 4px }
  .op-k { margin-bottom: 14px; font-size: 11px; letter-spacing: .18em }
  .op-h h1 { font-size: clamp(34px, 10vw, 52px) }
  .op-sub { margin-top: 16px; font-size: 15px }
  .op-h .op-cta { margin-top: 20px; width: 100%; max-width: 520px }
  .op-cta .btn { flex: 1 1 auto }
  .op-foot { left: 14px; right: 14px; bottom: 10px; font-size: 10px }

  .cover { height: auto }
  .cover-media { bottom: auto; height: 74vh; height: 74svh; object-position: 68% 22% }
  .cover-shade { background: linear-gradient(180deg, rgba(11, 11, 11, .6) 0, rgba(11, 11, 11, 0) 18%, rgba(11, 11, 11, 0) 44vh, #0B0B0B 72vh); background: linear-gradient(180deg, rgba(11, 11, 11, .6) 0, rgba(11, 11, 11, 0) 18%, rgba(11, 11, 11, 0) 44svh, #0B0B0B 72svh) }
  .cover-in { display: block; height: auto; padding-top: 18px; padding-bottom: 32px }
  .cover-b { margin-top: 42vh; margin-top: 42svh }
  .cover-k span:last-child { display: none }
  .mast { font-size: min(100px, calc((100vw - 36px) / 5.5)) }
  .cover-b { flex-direction: column; align-items: stretch; gap: 18px }
  .hero-h { font-size: clamp(38px, 10.6vw, 56px) }
  .cover-dek { font-size: 16px }
  .cover-cta .btn { flex: 1 1 auto }
  .cover-meta { align-items: flex-start }
  .cover-credit { text-align: left }

  .bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; padding: 0 }
  .hero-tile { grid-row: auto; aspect-ratio: 4 / 5; max-height: 86svh; width: 100% }
  .sc-foot { top: 12px; left: 12px; right: 12px; bottom: 12px; flex-direction: column; justify-content: space-between; align-items: stretch; pointer-events: none }
  .sc-foot > * { pointer-events: auto }
  .sc-meta { order: -1; align-self: flex-end }
  .sc-meta .sc-credit { max-width: 170px }
  .sc-card { max-width: none; padding: 18px 18px 20px }
  .sc-title { font-size: 28px }
  .sc-desc { font-size: 14px }
  .names-tile { height: 132px }
  .names { gap: 34px; padding: 0 18px }
  .nm { font-size: 30px }
  .nm em { font-size: 11px; padding-top: 6px }
  .names-hint { left: 18px; bottom: 12px }
  .tabs-tile { height: 120px; gap: 10px }
  .tabs { gap: 22px }

  .night { margin-top: 36px }
  .co .tag, .co .ln { display: none }
  .co::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px }
  .co .dot { left: -12px; top: -12px; width: 24px; height: 24px; display: grid; place-items: center; font: 600 11px "Jost", sans-serif; color: #0B0B0B }
  .co .dot::after { inset: -4px }
  .co .dot::before { content: attr(data-n) } /* the pin number, drawn on phones only, so it never reads as part of the label */
  .share { margin-top: 48px }
  .share-big { font-size: 34px }
  .bar { height: 48px }
  .seg i { display: none }
  .legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px }
  .rc-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px }
  .rc-side { position: static; max-width: none }
  .rc-side h3 { font-size: 36px }
  .paper { margin: 0 auto; padding: 28px 20px 34px }
  .rl { grid-template-columns: 26px minmax(0, 1fr) auto }
  .mini { font-size: 16px; width: 3.4ch }
  .tot .num { font-size: 44px }

  .quote-side { display: contents }
  .quote .two { display: flex; flex-direction: column; gap: 32px }
  .quote-intro { order: 1 }
  .qz { order: 2 }
  .qr { order: 3 }
  .quote-note { order: 4 }
  .qcard { padding: 24px 20px }
  .qcard h3 { font-size: 28px }
  .qopts { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px }
  .qo { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 16px 16px }
  .qo[aria-checked="true"] { padding: 15px 15px 15px }
  .qo .ic { grid-row: 1 / span 2 }
  .qo .lb { margin-top: 0; font-size: 24px }
  .qo .hn { margin-top: 4px }
  .qo .tick { top: 50%; right: 16px; transform: translateY(-50%) scale(.6) }
  .qo[aria-checked="true"] .tick { transform: translateY(-50%) }
  .qdone-h { font-size: 48px }
  .qr { padding: 20px 18px }

  .fc { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 36px }
  .fc-sheet { padding: 2px 8px }
  .fc-strip { gap: 5px; padding: 16px 0 }
  .fc-strip::before, .fc-strip::after { height: 4px; background: repeating-linear-gradient(90deg, #3F3B37 0 6px, transparent 6px 14px) }
  .fc-strip::before { top: 4px }
  .fc-strip::after { bottom: 4px }
  .fc .fn { top: -13px; font-size: 8px; letter-spacing: .1em }
  .fc .ring path { stroke-width: 9 }
  .fc .rn2 { right: -5px; top: -8px; width: 16px; height: 16px; font-size: 9px }
  .fc-meta { flex-direction: column; gap: 4px; letter-spacing: .14em }
  .fc-loupe .claim { font-size: 26px }
  .fc-loupe .clean { font-size: 28px }

  .ds-h { font-size: min(40px, 10.6vw) }
  .ds { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 36px }
  .ds-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 13px }
  .ds-tag { top: 12px; padding: 5px 7px }
  .ds-tag.l { left: 12px }
  .ds-tag.r { right: 12px }
  .ds-cta .btn { flex: 1 1 auto }

  .cmp th, .cmp td { padding: 14px 10px; font-size: 14px }
  .cmp tbody th { font-size: 17px }
  .cmp thead th { font-size: 10px; letter-spacing: .14em }

  .rules-side { position: static }
  .rule { grid-template-columns: 56px minmax(0, 1fr); gap: 14px }
  .rule > .d { font-size: 36px }
  .rule h3 { font-size: 21px }

  .letter-quote { font-size: 36px }
  .letter-body { font-size: 17px }
  .faq summary { font-size: 19px }
  .fb-q { font-size: 26px }
  .fb-opts .btn { flex: 1 1 auto }

  .wl { padding: 22px 18px }
  .privacy { padding: 72px 0 }
  .privacy-list { grid-template-columns: minmax(0, 1fr); gap: 22px }
  .site-f { padding: 56px 0 40px }
  .f-word { font-size: 20.9vw }
}
@media (max-width: 420px) {
  .btn { padding: 0 20px }
  .cover-cta .btn { padding: 0 14px; font-size: 11px }
}