/* ============================================================
   Black Dog Books & Records — stylesheet
   Analog, warm, paper + ink aesthetic
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/7ec505bd.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: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a8614c8f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/2415647d.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/68518c11.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/5e783e05.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: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/b37b722a.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: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/b299a4ef.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: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/7ec505bd.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: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a8614c8f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/2415647d.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/68518c11.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/5e783e05.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: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/b37b722a.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: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/b299a4ef.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/0893f33c.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/26fc8305.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/53f9f611.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a2850410.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/b860f6b7.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/06a6f34e.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: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/2d23283b.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: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/0893f33c.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: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/26fc8305.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/53f9f611.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a2850410.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/b860f6b7.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: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/06a6f34e.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: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/2d23283b.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: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/0893f33c.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: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/26fc8305.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/53f9f611.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/a2850410.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/b860f6b7.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: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/06a6f34e.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: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/2d23283b.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: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/0893f33c.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: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/26fc8305.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/53f9f611.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/a2850410.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/b860f6b7.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: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/06a6f34e.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: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/2d23283b.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;
}
/* latin */
@font-face {
  font-family: 'IM Fell DW Pica';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ded590d3.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;
}
/* latin */
@font-face {
  font-family: 'IM Fell DW Pica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ade8c2f9.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;
}
/* latin */
@font-face {
  font-family: 'IM Fell DW Pica SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/5dcde35f.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/87620416.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/9895a010.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/7aeba3fe.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/1757e205.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/30422d60.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/926bf650.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/87620416.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/9895a010.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/7aeba3fe.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/1757e205.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/30422d60.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/926bf650.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/87620416.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/9895a010.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/7aeba3fe.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/1757e205.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/30422d60.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/926bf650.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;
}
/* latin-ext */
@font-face {
  font-family: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/6ebd0244.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: 'Pirata One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/33738100.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;
}
/* latin-ext */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a4c80fa5.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: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/67176cd4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --paper: #F1E9D8;
  --paper-2: #E8DEC6;
  --paper-3: #D9CBAA;
  --ink: #14110F;
  --ink-2: #2A241E;
  --gold: #C9A86A;
  --gold-deep: #9A7E47;
  --rust: #C9A86A;
  --rust-deep: #9A7E47;
  --red: #8F2E2E;
  --forest: #2E4A3A;
  --chalk: #F4EDE0;

  --font-wordmark: 'Pirata One', 'UnifrakturCook', 'Cormorant Garamond', serif;
  --font-display: 'IM Fell DW Pica SC', 'IM Fell English SC', 'Cormorant Garamond', serif;
  --font-display-alt: 'IM Fell DW Pica', 'Cormorant Garamond', serif;
  --font-serif: 'EB Garamond', 'Hoefler Text', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-chalk: 'Special Elite', 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Make all body copy a little heavier for legibility */
p { font-weight: 450; color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); }

/* Paper texture — subtle noise + fibers using layered gradients */
.paper-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(20,17,15,0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(198,90,46,0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(20,17,15,0.02) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: auto, auto, auto, 200px 200px;
}

.ink-bg {
  background-color: var(--ink);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.7 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Chalkboard panel */
.chalkboard {
  background: #1C2118;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.03) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c'><feTurbulence baseFrequency='0.7' numOctaves='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.95 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  color: var(--chalk);
  border: 10px solid #6B4A2B;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.3);
  font-family: var(--font-chalk);
}

/* =========  TYPE  ========= */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

/* Page-header antique accents (kept legible) */
.blackletter {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.015em;
}
/* Hand-painted-storefront wordmark — crisper blackletter */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  letter-spacing: 0.015em;
  text-transform: none;
}
.antique-italic {
  font-family: var(--font-display-alt);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.mono { font-family: var(--font-mono); }
.chalk { font-family: var(--font-chalk); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.75;
}

/* =========  DASHED DIVIDER  ========= */
.cut-line {
  border: none;
  border-top: 1.5px dashed var(--ink);
  opacity: 0.35;
  margin: 32px 0;
  position: relative;
}
.cut-line::before {
  content: "✂";
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--paper);
  padding: 0 8px;
  font-size: 16px;
  opacity: 0.7;
}

/* =========  STAMP  ========= */
.stamp {
  display: inline-block;
  border: 2px solid var(--red);
  color: var(--red);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.85;
  border-radius: 3px;
}

/* =========  NAVIGATION  ========= */
.nav-shell {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 4px double var(--gold);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-serif);
}
.nav-logo {
  font-family: var(--font-wordmark);
  color: var(--gold);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}
.nav-logo small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--paper);
  opacity: 0.6;
  display: block;
  margin-top: 2px;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--gold); }
.nav-link.active { color: var(--gold); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--gold);
}

/* =========  PAGE SHELL / BOOK TURN  ========= */
.book-stage {
  position: relative;
  min-height: 100vh;
  padding-top: 72px; /* nav height */
  perspective: 2600px;
  perspective-origin: 0% 50%;
}

.book-page {
  min-height: calc(100vh - 72px);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  position: relative;
}

.page-turning-out {
  animation: pageTurnOut 1400ms cubic-bezier(0.33, 0.0, 0.2, 1) forwards;
}

/* Dynamic paper shading overlay — darkens the underside as it turns */
.page-turning-out::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.02) 40%,
    rgba(0,0,0,0.18) 80%,
    rgba(0,0,0,0.32) 100%);
  opacity: 0;
  animation: pageShade 1400ms cubic-bezier(0.33, 0.0, 0.2, 1) forwards;
  z-index: 4;
}

/* Subtle curl shadow along the spine */
.page-turning-out::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 60px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 100%);
  opacity: 0;
  animation: spineShade 1400ms cubic-bezier(0.33, 0.0, 0.2, 1) forwards;
  z-index: 4;
}

@keyframes pageTurnOut {
  0%   {
    transform: rotateY(0deg) skewY(0deg);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  15%  {
    transform: rotateY(-8deg) skewY(0.3deg) translateY(-2px);
    box-shadow: 8px 14px 28px rgba(0,0,0,0.14);
  }
  50%  {
    transform: rotateY(-92deg) skewY(0.6deg) translateY(-4px);
    box-shadow: 30px 26px 60px rgba(0,0,0,0.28);
  }
  85%  {
    transform: rotateY(-162deg) skewY(0.2deg);
    box-shadow: 14px 18px 48px rgba(0,0,0,0.22);
  }
  100% {
    transform: rotateY(-178deg) skewY(0deg);
    box-shadow: 6px 10px 28px rgba(0,0,0,0.12);
  }
}

@keyframes pageShade {
  0%   { opacity: 0; }
  25%  { opacity: 0.55; }
  50%  { opacity: 0.9; }
  75%  { opacity: 0.55; }
  100% { opacity: 0; }
}

@keyframes spineShade {
  0%   { opacity: 0; }
  20%  { opacity: 0.7; }
  60%  { opacity: 0.35; }
  100% { opacity: 0; }
}

/* Spine shadow during turn */
.book-stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 72px;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
}
.book-stage.turning::before { opacity: 1; }

/* =========  CONTAINERS  ========= */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 48px 80px;
}
.wrap-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 48px 80px;
}

/* =========  BUTTONS  ========= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  border-radius: 2px;
}
.btn:hover { background: var(--rust); border-color: var(--rust); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); }

/* =========  RECORD  ========= */
.record-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.record {
  position: relative;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #0a0807 0%,
      #0a0807 18%,
      #1a1714 18.5%,
      #0a0807 19%,
      #0a0807 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.35),
    0 12px 30px rgba(0,0,0,0.25),
    inset 0 0 40px rgba(255,255,255,0.03);
  overflow: hidden;
}
/* Grooves — repeated concentric rings */
.record::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 4px);
}
/* Light sheen */
.record::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0) 0deg,
      rgba(201,168,106,0.08) 30deg,
      rgba(255,255,255,0.12) 60deg,
      rgba(201,168,106,0.08) 90deg,
      rgba(255,255,255,0) 180deg,
      rgba(201,168,106,0.08) 270deg,
      rgba(255,255,255,0.12) 300deg,
      rgba(255,255,255,0) 360deg);
  mix-blend-mode: screen;
  opacity: 0.5;
}
.record-spin {
  animation: spinRecord 8s linear infinite;
}
@keyframes spinRecord {
  to { transform: rotate(360deg); }
}
.record-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1a1714 0%, #0a0807 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  text-align: center;
  border: 1px solid rgba(201,168,106,0.2);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
}
.record-label-inner {
  padding: 10px;
}
.record-label .wordmark {
  font-size: 30px;
  line-height: 0.92;
  display: block;
  color: var(--gold);
  letter-spacing: 0.02em;
  text-shadow: 0 0 6px rgba(201,168,106,0.2);
}
.record-label .sub {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.3em;
  color: var(--paper);
  margin-top: 6px;
  opacity: 0.8;
}
.record-spindle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--gold);
  z-index: 3;
}

/* Tonearm (decorative, doesn't spin) */
.tonearm {
  position: absolute;
  top: 6%;
  right: 6%;
  width: 46%;
  height: 8px;
  background: linear-gradient(90deg, #555 0%, #888 30%, #aaa 60%, #777 100%);
  transform-origin: right center;
  transform: rotate(-22deg);
  border-radius: 4px;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.tonearm::before {
  content: "";
  position: absolute;
  right: -14px;
  top: -10px;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, #888, #555);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.tonearm::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -4px;
  width: 22px;
  height: 16px;
  background: #2a2420;
  border-radius: 3px;
}

/* =========  CARDS  ========= */
.ticket {
  background: var(--paper-2);
  border: 1px solid rgba(20,17,15,0.2);
  padding: 20px 22px;
  position: relative;
  box-shadow: 2px 3px 0 rgba(20,17,15,0.08);
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: var(--paper);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.ticket::before { left: -7px; }
.ticket::after  { right: -7px; }

.shelf-label {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 6px 14px;
  font-family: var(--font-chalk);
  font-size: 14px;
  letter-spacing: 0.08em;
  display: inline-block;
  box-shadow: 2px 2px 0 rgba(20,17,15,0.3);
}

/* =========  PLACEHOLDER IMAGE  ========= */
.img-frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid rgba(20,17,15,0.25);
}
.img-frame img, .img-frame video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.88) contrast(1.02); }
.img-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(20,17,15,0.18));
  pointer-events: none;
}

/* =========  HOURS TABLE  ========= */
.hours-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(244,237,224,0.25);
  font-family: var(--font-chalk);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.hours-row:last-child { border-bottom: none; }
.hours-row.closed { opacity: 0.5; text-decoration: line-through; }

/* =========  TWEAKS PANEL  ========= */
.tweaks-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(20,17,15,0.25);
  padding: 16px 18px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 11px;
}
.tweaks-panel h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ink);
}
.tweak-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0; }
.swatch-row { display: flex; gap: 6px; }
.swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.1s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { border-color: var(--ink); }

/* =========  UTILITIES  ========= */
.flex { display: flex; }
.grid { display: grid; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 40px; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 48px; }
.text-center { text-align: center; }
.italic { font-style: italic; }

/* Hi-DPI film grain overlay (extremely subtle) */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* =========  FOOTER COLOR FIX  =========
   The global `p { color: var(--ink) }` rule (line ~45) paints every paragraph
   near-black. The footer's background is also var(--ink), so the italic tagline
   and the copyright line render invisibly on black — which on mobile leaves a
   gaping empty space between the brand block and "Find Us". Force paragraphs
   inside the footer to inherit the footer's paper color instead. */
.r-footer p { color: inherit; }

/* =========  FOOTER SOCIAL LINKS  ========= */
.r-footer-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}
.r-footer-link:hover {
  color: var(--gold);
}

/* =========  MOBILE NAV TOGGLE  ========= */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--paper);
  cursor: pointer;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
}
.nav-toggle:hover { color: var(--gold); }

/* =========  RESPONSIVE HOOK CLASSES (referenced from JSX)  =========
   These classes let component inline-style grids be overridden at narrow viewports
   without restructuring the JSX. Desktop behavior is preserved via min-width guards. */

/* No rules at base — these classes only activate inside media queries below.
   If you see a .r-* class in JSX, the rules live in the media query block. */


/* ---- Street sign (feature strip) ----
   Desktop: a decorative cut-out anchored to the bottom-left of "the place"
   text column, bleeding to the section edge with the blade pointing right
   into the open lower-left. It sits BEHIND the copy (z-index:0) so the
   heading, paragraph and stamp stay fully legible no matter how the column
   reflows. The pole base anchors the subtle cursor-driven sway. */
.r-feature-left { position: relative; }
.r-streetsign {
  position: absolute;
  left: -28px;
  bottom: 0;
  width: clamp(190px, 20vw, 320px);
  z-index: 0;
  pointer-events: none;   /* never blocks text; sway is driven by the column */
  user-select: none;
}
.r-streetsign img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(-7px 11px 16px rgba(20,17,15,0.30));
  transform-origin: 50% 92%;   /* pivot near the pole base for the sway */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}


/* =========================================================
   TABLET BREAKPOINT — ≤900px
   Stack most 2-col / 3-col grids into single or 2-column.
   ========================================================= */
@media (max-width: 900px) {

  /* -------- Containers -------- */
  .wrap,
  .wrap-narrow {
    padding: 32px 28px 64px;
  }

  /* -------- Nav -------- */
  .nav-shell {
    padding: 12px 20px;
  }
  .nav-logo {
    font-size: 28px;
  }
  .nav-logo small {
    font-size: 8px;
    letter-spacing: 0.25em;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-links {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 4px double var(--gold);
    padding: 12px 0 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    transform: translateY(-140%);
    transition: transform 240ms cubic-bezier(0.2,0.7,0.2,1);
    z-index: 49;
  }
  .nav-links.open {
    transform: translateY(0);
  }
  .nav-link {
    padding: 14px 22px;
    font-size: 13px;
    text-align: left;
    border-bottom: 1px dashed rgba(244,237,224,0.12);
  }
  .nav-link:last-child { border-bottom: none; }
  .nav-link.active::after {
    left: 22px;
    right: auto;
    bottom: 6px;
    width: 18px;
  }

  /* -------- Buttons — bigger touch targets -------- */
  .btn {
    padding: 14px 22px;
    font-size: 12px;
    min-height: 44px;
  }

  /* -------- Hero (Home) -------- */
  .r-hero-section {
    padding: 40px 24px 32px !important;
  }
  .r-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    min-height: auto !important;
  }
  .r-hero-grid > div:last-child {
    /* move record BELOW the type stack on mobile */
    order: 2;
  }
  .r-hero-grid > div:first-child {
    order: 1;
  }
  .r-hero-headline {
    font-size: clamp(64px, 16vw, 108px) !important;
    line-height: 0.9 !important;
    margin-bottom: 20px !important;
  }
  .r-hero-sub {
    font-size: 18px !important;
    max-width: none !important;
    margin-bottom: 26px !important;
  }
  .r-hero-ticket {
    margin-top: 32px !important;
    max-width: none !important;
  }
  .r-record-holder {
    max-width: 80vw;
    margin: 0 auto;
  }
  .r-record-holder > div:last-child {
    /* scale the Record down via transform on its wrapper */
  }

  /* -------- Chalkboard -------- */
  .r-chalkboard-section {
    padding: 24px 24px !important;
  }
  .r-chalkboard {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 32px 28px !important;
  }
  .r-chalkboard-quote {
    font-size: 34px !important;
  }
  .r-chalkboard-list {
    font-size: 24px !important;
  }

  /* -------- "What we do" -------- */
  .r-whatwedo-section {
    padding: 48px 24px !important;
  }
  .r-whatwedo-head {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 32px !important;
  }
  .r-whatwedo-head h2 {
    font-size: 38px !important;
  }
  .r-whatwedo-head p {
    font-size: 17px !important;
    margin-left: 0 !important;
  }
  .r-category-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* -------- Feature strip (storefront) -------- */
  .r-feature-section {
    padding: 24px 24px 56px !important;
  }
  .r-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .r-feature-grid h2 {
    font-size: 32px !important;
  }
  /* Sign drops into normal flow on stacked layouts — it sits between the
     copy and the storefront video, so it can never cover the text. */
  .r-streetsign {
    position: static;
    width: clamp(150px, 44vw, 240px);
    margin: 14px 0 2px -6px;
    z-index: auto;
  }

  /* -------- Footer -------- */
  .r-footer {
    padding: 40px 24px 32px !important;
  }
  .r-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .r-footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
  .r-footer-brand {
    font-size: 42px !important;
  }

  /* -------- Services page -------- */
  .r-services-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .r-services-lower {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* -------- Sell page -------- */
  .r-sell-steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .r-sell-twocol {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .r-sell-houseCall {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px 22px !important;
  }

  /* -------- Events page -------- */
  .r-events-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
  }
  .r-events-head h1 {
    line-height: 1 !important;
  }
  .r-event-card {
    grid-template-columns: 96px 1fr !important;
  }
  .r-event-admit {
    display: none !important;
  }
  .r-newsletter {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 28px 24px !important;
  }
  .r-newsletter-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .r-newsletter-form input {
    width: 100% !important;
  }

  /* -------- Visit page -------- */
  .r-visit-split {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .r-visit-interior {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .r-visit-interior > div:nth-child(3) {
    grid-column: 1 / -1;
  }
  .r-visit-info {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* =========================================================
   PHONE BREAKPOINT — ≤480px
   Tighten further for small phones.
   ========================================================= */
@media (max-width: 480px) {

  html, body {
    font-size: 17px;
  }

  .wrap,
  .wrap-narrow {
    padding: 24px 20px 56px;
  }

  /* Nav logo */
  .nav-logo {
    font-size: 26px;
  }

  /* Hero */
  .r-hero-section {
    padding: 28px 20px 24px !important;
  }
  .r-hero-grid {
    gap: 28px !important;
  }
  .r-hero-headline {
    font-size: clamp(54px, 15.5vw, 78px) !important;
    line-height: 0.9 !important;
  }
  .r-hero-sub {
    font-size: 17px !important;
  }
  .r-record-holder {
    max-width: 86vw;
  }

  /* Chalkboard */
  .r-chalkboard-section {
    padding: 16px 20px !important;
  }
  .r-chalkboard {
    padding: 26px 22px !important;
    gap: 22px !important;
  }
  .r-chalkboard-quote {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  .r-chalkboard-list {
    font-size: 22px !important;
  }

  /* What we do */
  .r-whatwedo-section {
    padding: 40px 20px !important;
  }
  .r-whatwedo-head h2 {
    font-size: 32px !important;
  }

  /* Feature strip */
  .r-feature-section {
    padding: 20px 20px 48px !important;
  }
  .r-feature-grid h2 {
    font-size: 28px !important;
  }

  /* Footer */
  .r-footer {
    padding: 36px 20px 28px !important;
  }
  .r-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .r-footer-brand {
    font-size: 38px !important;
  }

  /* Services */
  .r-services-title {
    font-size: clamp(50px, 14vw, 80px) !important;
  }

  /* Sell */
  .r-sell-steps {
    grid-template-columns: 1fr !important;
  }

  /* Events */
  .r-event-card {
    grid-template-columns: 1fr !important;
  }
  .r-event-date {
    border-right: none !important;
    border-bottom: 1px dashed var(--paper) !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    gap: 10px !important;
  }
  .r-event-date .blackletter {
    font-size: 22px !important;
    margin: 0 !important;
  }
  .r-newsletter h3 {
    font-size: 24px !important;
  }

  /* Visit */
  .r-visit-interior {
    grid-template-columns: 1fr !important;
  }
  .r-visit-interior > div {
    aspect-ratio: 4 / 3 !important;
  }
  .r-visit-interior > div:nth-child(3) {
    grid-column: auto;
  }
}

/* =========================================================
   MOUSE SHADOW — feathered radial that trails the cursor
   ========================================================= */
.mouse-shadow {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,106,0.09) 0%, rgba(201,168,106,0.04) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(18px);
  transition: left 0.18s ease, top 0.18s ease;
  will-change: left, top;
}

/* =========================================================
   EXTRA-SMALL — ≤360px (iPhone SE 1st gen / older Androids)
   ========================================================= */
@media (max-width: 360px) {
  .r-hero-headline {
    font-size: clamp(48px, 14.5vw, 64px) !important;
  }
  .nav-logo {
    font-size: 22px;
  }
  .nav-logo small {
    font-size: 7px;
  }
}

/* ============================================================
   Hero intro + scroll reveal — ANIMATION ONLY (no layout change)
   All values are tunable via the custom properties below. Every
   bit of motion is gated behind prefers-reduced-motion, so users
   who ask for reduced motion get the final, static composition
   with no animation at all.
   ============================================================ */
:root {
  --hero-anim-ease: cubic-bezier(0.16, 1, 0.3, 1); /* slow ease-out, no bounce */
  --hero-anim-start: 200ms;        /* delay before the headline begins */
  --hero-dur-headline: 900ms;      /* per headline line */
  --hero-stagger-line: 120ms;      /* between headline lines */
  --hero-rise-headline: 24px;      /* how far each line rises from below */
  --hero-dur-sub: 900ms;           /* italic tagline — matched to the headline so the motion reads the same */
  --hero-rise-sub: 12px;           /* tagline upward drift */
  --hero-dur-body: 700ms;          /* body copy / buttons fade */
  --hero-stagger-body: 150ms;      /* between body elements */
  --scroll-dur: 700ms;             /* scroll-revealed elements */
  --scroll-rise: 8px;              /* scroll-revealed upward drift */

  /* derived timings — the tagline and body continue the headline's stagger
     rhythm (it's the next beat after the two headline lines), so the whole
     intro reads as one smooth, overlapping cascade rather than separate steps */
  --hero-sub-start: calc(var(--hero-anim-start) + 2 * var(--hero-stagger-line));
  --hero-body-start: calc(var(--hero-sub-start) + 500ms);
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(var(--hero-rise-headline)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroDrift {
  from { opacity: 0; transform: translateY(var(--hero-rise-sub)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* 1 — headline: each line fades + rises from slightly below, staggered */
  .r-hero-headline .r-anim-line {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity;
    animation: heroRise var(--hero-dur-headline) var(--hero-anim-ease) both;
    animation-delay: calc(var(--hero-anim-start) + var(--i, 0) * var(--hero-stagger-line));
  }

  /* 2 — italic tagline: fades with a slight upward drift, flowing right out of
        the headline cascade (same curve + duration) instead of waiting for it */
  .r-hero-sub.r-anim-sub {
    opacity: 0;
    will-change: transform, opacity;
    animation: heroDrift var(--hero-dur-sub) var(--hero-anim-ease) both;
    animation-delay: var(--hero-sub-start);
  }

  /* 3 — body copy / buttons: opacity only, no movement, staggered */
  .r-hero-body-fade {
    opacity: 0;
    animation: heroFade var(--hero-dur-body) var(--hero-anim-ease) both;
    animation-delay: calc(var(--hero-body-start) + var(--i, 0) * var(--hero-stagger-body));
  }

  /* 4 — below-the-fold reveals: soft fade + small upward drift on scroll entry
        (IntersectionObserver toggles .is-visible) */
  .r-scroll-reveal {
    opacity: 0;
    transform: translateY(var(--scroll-rise));
    will-change: transform, opacity;
    transition: opacity var(--scroll-dur) var(--hero-anim-ease),
                transform var(--scroll-dur) var(--hero-anim-ease);
  }
  .r-scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}