/* ============================================================
   StillUnemployed.com — Homepage
   Rebuilt clean from Manus export (dc-runtime removed).
   CSS preserved verbatim from the original <style> blocks;
   @font-face src paths rewritten to ../assets/ relative URLs.
   ============================================================ */

/* ---- Global reset (from bundler base + resp-inject) ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; margin: 0; }
body { background: #F4EEE2; font-family: 'Archivo', system-ui, sans-serif; color: #2C2118; min-height: 100vh; }
* { -webkit-tap-highlight-color: transparent; }

/* The [hidden] attribute must win over inline display rules (e.g. the
   About modal's inline display:flex). This is how the dc-runtime's
   conditional <sc-if> blocks are reproduced: present in the DOM, hidden
   until JS reveals them. */
[hidden] { display: none !important; }

/* ======================= @font-face ======================= */
  /* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/bca5b6f5-0117-46c6-82b4-750b909d8fd2.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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/597c8bd7-f153-4d0d-bedd-920be8d03b93.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: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/0811198e-fce6-4254-a42e-3740c0a02104.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/bca5b6f5-0117-46c6-82b4-750b909d8fd2.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/597c8bd7-f153-4d0d-bedd-920be8d03b93.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: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/0811198e-fce6-4254-a42e-3740c0a02104.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/bca5b6f5-0117-46c6-82b4-750b909d8fd2.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/597c8bd7-f153-4d0d-bedd-920be8d03b93.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: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/0811198e-fce6-4254-a42e-3740c0a02104.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/bca5b6f5-0117-46c6-82b4-750b909d8fd2.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/597c8bd7-f153-4d0d-bedd-920be8d03b93.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: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/0811198e-fce6-4254-a42e-3740c0a02104.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/bca5b6f5-0117-46c6-82b4-750b909d8fd2.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: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/597c8bd7-f153-4d0d-bedd-920be8d03b93.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: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/0811198e-fce6-4254-a42e-3740c0a02104.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/bca5b6f5-0117-46c6-82b4-750b909d8fd2.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: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/597c8bd7-f153-4d0d-bedd-920be8d03b93.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: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/0811198e-fce6-4254-a42e-3740c0a02104.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: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/d23d92e0-7b8d-410e-acd7-cb7bca65e3dd.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: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/386f648c-a816-4fdd-9d61-ee9e8fe22d73.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: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/7077237e-5a74-4253-b440-d10f7e6b0109.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: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/a02ca9c0-6833-4b54-8235-ae5cae26a8d8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/8ebf13c1-5fd8-4359-be6c-a532c0aecf0b.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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/f43cc4bc-2b1b-4b7c-a139-f1ca1afff135.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: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/624b892a-35d2-425c-92c3-1331aee9b9f4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/8ebf13c1-5fd8-4359-be6c-a532c0aecf0b.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: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/f43cc4bc-2b1b-4b7c-a139-f1ca1afff135.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: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/624b892a-35d2-425c-92c3-1331aee9b9f4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/4bcb1248-1987-45cb-ab68-34c20e83574e.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/bf6316c8-3be6-431e-a6f2-fed8e86792f6.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/95017db7-b0d4-46c6-a0cc-838875a10902.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/0c4499c3-b742-42f5-8167-02093a5ce6bf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/4bcb1248-1987-45cb-ab68-34c20e83574e.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/bf6316c8-3be6-431e-a6f2-fed8e86792f6.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: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/95017db7-b0d4-46c6-a0cc-838875a10902.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: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/0c4499c3-b742-42f5-8167-02093a5ce6bf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/4bcb1248-1987-45cb-ab68-34c20e83574e.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/bf6316c8-3be6-431e-a6f2-fed8e86792f6.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: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/95017db7-b0d4-46c6-a0cc-838875a10902.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: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/0c4499c3-b742-42f5-8167-02093a5ce6bf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/7deef81f-1e14-48f1-9a74-52dcb81748cc.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/0db321bb-4d72-4233-a071-4bdff4a798ff.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/28b94e87-0078-4b64-b3dd-89e530f73735.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/f1294a32-ef7a-4755-b955-5efd08c7c23b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/7deef81f-1e14-48f1-9a74-52dcb81748cc.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/0db321bb-4d72-4233-a071-4bdff4a798ff.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: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/28b94e87-0078-4b64-b3dd-89e530f73735.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: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/f1294a32-ef7a-4755-b955-5efd08c7c23b.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;
}

/* ======================= page styles (from helmet <style>) ======================= */
/* Original helmet sets body #d8cdba, but the resp-inject layer overrides it
   with `body { background: #F4EEE2 !important; }`, which is what shows below
   the scaled hero stage. Use the cream so the area under the stage matches. */
body { margin: 0; background: #F4EEE2; }
.postit {
  transform: perspective(720px) rotate(var(--r, 0deg));
  transform-origin: 50% 2%;
  box-shadow: 0 8px 18px rgba(44,33,24,0.22);
  transition: transform 0.34s cubic-bezier(.2,.92,.26,1.22), box-shadow 0.34s ease;
  will-change: transform;
}
.postit:hover {
  transform: perspective(720px) rotateX(32deg) rotate(var(--r, 0deg)) translateY(-5px) scale(1.025);
  box-shadow: 0 30px 36px -10px rgba(44,33,24,0.38);
}
/* Top-nav + hero-CTA post-it links. ALL visual styling lives in this class, not
   in inline styles, so a Netlify link-rewrite (or anything else) can never mangle
   inline styles on these anchors again. The anchors keep only a quote-free --r. */
.nav-postit {
  background: #EDE93B;
  color: #1f1c14;
  font-family: 'Indie Flower', cursive;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.nav-postit:hover { text-decoration: none; }
.notetab { transition: transform .15s ease; }
.notetab:hover { transform: rotate(var(--nr,0deg)) scale(1.06); }
.envbob { animation: envbob 1.9s ease-in-out infinite; transform-origin: center; }
@keyframes envbob { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-2.5px) rotate(-4deg)} }
@keyframes noteUnfold { 0%{transform:scale(.16);opacity:0} 55%{opacity:1} 72%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }

/* ======================= NEW DESKTOP/TABLET HOMEPAGE (Jul 2026, from Claude Design MAIN FILE) =======================
   The redesigned scrapbook hero (#hero-desktop) shows at >640px only.
   The ORIGINAL hero below it is kept verbatim and now serves ONLY the
   <=640px mobile experience (home.css mobile rules + home.js injections
   target it unchanged). Per the Netlify postmortem, every <a> in the new
   hero is styled by a class here, never by quoted inline styles. */

/* Poppins (latin) — new hero body text; faces copied from styles.css */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/7f5dc4e2-21af-4cc2-ac7b-95ecb83d5075.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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/ea465b75-a14b-4b2c-b4b0-73c3e7a40b5a.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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/a8a79e2d-0817-43ab-a54f-17a996b60d1e.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; }

.hoverlift { transition: transform .32s cubic-bezier(.2,.92,.26,1.12), box-shadow .32s ease; will-change: transform; }
.hoverlift:hover { transform: translateY(-7px) rotate(0deg) scale(1.018) !important; box-shadow: 0 34px 54px -14px rgba(44,33,24,0.42) !important; z-index: 40 !important; }
.brklink:hover { color: #B23A1E !important; }

/* anchor styling classes (keep inline styles OFF the anchors) */
.nh-browse {
  background: #EDE93B; color: #1f1c14;
  font-family: 'Indie Flower', cursive; font-weight: 700; font-size: 27px;
  padding: 16px 30px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 11px;
}
.nh-cta-postit {
  position: absolute; right: 92px; top: 588px; z-index: 45;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: #EDE93B; color: #1f1c14;
  font-family: 'Indie Flower', cursive; font-size: 20px; font-weight: 700;
  padding: 12px 20px; cursor: pointer; text-decoration: none;
}
.nh-seeall {
  position: absolute; right: 120px; top: 1092px; z-index: 21;
  background: #E7D2A8; color: #3A2A1B;
  font-family: 'Indie Flower', cursive; font-weight: 700; font-size: 19px;
  padding: 11px 18px; cursor: pointer; text-decoration: none; display: inline-block;
}
.nh-recipe-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 2px 12px;
  background: #F2E14B; color: #2A2118;
  font-family: 'Indie Flower', cursive; font-weight: 700; font-size: 18px;
  padding: 9px 16px; text-decoration: none;
}
.nh-portfolio-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: #5C4033; color: #F4EEE2; font-size: 16px; font-weight: 700;
  padding: 15px 26px; border-radius: 12px; cursor: pointer;
  box-shadow: 0 10px 24px rgba(44,33,24,0.22); text-decoration: none; transform: rotate(-1deg);
}
.nh-note-recipe {
  display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 2px 10px;
  padding: 8px 15px; background: #F2E14B; color: #2A2118;
  font-family: 'Indie Flower', cursive; font-weight: 700; font-size: 16px;
  text-decoration: none; transform: rotate(-1.5deg); box-shadow: 2px 3px 7px rgba(44,33,24,0.22);
}

/* stage + breakpoint switching */
#nh-stage { width: 100%; overflow: hidden; display: flex; justify-content: center; background: #d8cdba; }
#hero-desktop { transform-origin: top center; flex: none; }
@media (max-width: 640px) {
  #nh-stage { display: none !important; }
}
@media (min-width: 641px) {
  /* the old hero (and its JS stage) is mobile-only now */
  #resp-stage { display: none !important; }
  div[data-screen-label="Hero"] { display: none !important; }
}

/* ======================= responsive stage + true-mobile layout ======================= */
/* (from original #resp-inject style block) */
#resp-stage { width: 100%; overflow: hidden; display: flex; justify-content: center; background: #d8cdba; }
div[data-screen-label="Hero"] { transform-origin: top center; flex: none; }

  @media (max-width: 640px) {
    #resp-stage { display: block !important; height: auto !important; background: #14110d !important; }
    /* hero becomes a full-viewport stage; image fills it as background */
    div[data-screen-label="Hero"] {
      transform: none !important;
      width: 100% !important;
      height: 100svh !important;
      min-height: 560px !important;
      overflow: hidden !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      display: block !important;
      position: relative !important;
    }
    /* neutralise pixel offsets on direct children by default */
    div[data-screen-label="Hero"] > div, div[data-screen-label="Hero"] > a {
      transform: none !important;
    }
    /* ---- the hero image card fills the whole screen ---- */
    div[data-screen-label="Hero"] > div[style*="width: 720px"] {
      position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important;
      right: 0 !important; bottom: 0 !important;
      width: 100% !important; height: 100% !important;
      max-width: 100% !important; border-radius: 0 !important;
      overflow: hidden !important; z-index: 1 !important;
    }
    div[data-screen-label="Hero"] > div[style*="width: 720px"] img {
      width: 100% !important; height: 100% !important; object-fit: cover !important;
    }
    /* dark scrims top + bottom for text legibility (added via ::before/::after on hero) */
    div[data-screen-label="Hero"]::before {
      content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
      background:
        linear-gradient(to bottom, rgba(20,17,13,0.72) 0%, rgba(20,17,13,0.28) 26%, rgba(20,17,13,0) 46%),
        linear-gradient(to top, rgba(20,17,13,0.80) 0%, rgba(20,17,13,0.30) 24%, rgba(20,17,13,0) 46%);
    }
    /* ---- overlay header: headline at top ---- */
    #m-header {
      position: absolute !important; top: 0; left: 0; right: 0; z-index: 20;
      display: flex !important; flex-direction: column; gap: 0;
      padding: 18px 18px 0 !important; box-sizing: border-box;
    }
    /* ---- headline pinned at top ---- */
    div[data-screen-label="Hero"] > div[style*="top: 210px"] {
      position: absolute !important; top: 18px !important; left: 18px !important; right: 18px !important;
      width: auto !important; z-index: 20 !important;
    }
    div[data-screen-label="Hero"] > div[style*="top: 210px"] > div {
      font-size: 64px !important; line-height: 0.9 !important; color: #F4EEE2 !important;
      text-shadow: 0 2px 18px rgba(0,0,0,0.45) !important;
      display: flex !important; flex-direction: column !important; align-items: flex-start !important;
    }
    div[data-screen-label="Hero"] > div[style*="top: 210px"] > div > div {
      font-size: 46px !important; color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
      position: relative !important; display: inline-block !important; z-index: 1 !important;
    }
    div[data-screen-label="Hero"] > div[style*="top: 210px"] > div > div::before {
      content: '' !important; position: absolute !important;
      inset: -6px -10px -4px -8px !important; z-index: -1 !important;
      background: rgba(255,230,0,0.72) !important;
      border-radius: 2px !important;
      transform: rotate(-0.8deg) skewX(-2deg) !important;
      clip-path: polygon(
        0% 18%, 1.5% 4%, 4% 0%, 8% 2%, 14% 0.5%, 22% 3%, 30% 0%, 38% 2%,
        46% 0.5%, 54% 2%, 62% 0%, 70% 1.5%, 78% 0%, 86% 2%, 92% 0.5%, 97% 1%,
        100% 5%, 99% 14%, 100% 28%, 99% 44%, 100% 60%, 99% 76%, 100% 88%,
        98% 96%, 95% 100%, 88% 98%, 80% 100%, 72% 97%, 64% 100%, 56% 98%,
        48% 100%, 40% 97%, 32% 100%, 24% 98%, 16% 100%, 8% 97%, 3% 100%,
        0.5% 94%, 0% 80%, 1% 64%, 0% 48%, 1% 32%
      ) !important;
      filter: blur(0.6px) !important;
    }
    /* ---- nav tabs pinned at bottom ---- */
    #m-nav-bottom {
      position: absolute !important; bottom: 50px; left: 0; right: 0; z-index: 25;
      display: flex !important; justify-content: center; gap: 12px; padding: 0 16px;
    }
    #m-nav-bottom a {
      background: #EDE93B; color: #1f1c14; font-family: 'Indie Flower', cursive;
      font-size: 19px; padding: 8px 18px; text-decoration: none; border-radius: 2px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.25); transform: rotate(-1.5deg);
    }
    #m-nav-bottom a:nth-child(2) { transform: rotate(1.5deg); }
    #m-nav-bottom a:nth-child(3) { transform: rotate(-1deg); }
    /* ---- hide CTA post-it ---- */
    div[data-screen-label="Hero"] > a[class*="postit"] { display: none !important; }
    /* ---- hide desktop top bar, beta tag, and stat folder within the hero (folder moves below) ---- */
    div[data-screen-label="Hero"] > div[style*="height: 110px"] { display: none !important; }
    div[data-screen-label="Hero"] > div[style*="rotate(5deg)"] { display: none !important; }
    div[data-screen-label="Hero"] > div[style*="top: 556px"] { display: none !important; }
    /* ---- below-the-fold panel (injected): folder stat + human-checked + founder card ---- */
    #m-below { display: none !important; }
    /* folder card matching desktop */
    #m-below .m-folder { display: none !important; }
    #m-below .m-folder .f-tab {
      width: 220px; height: 30px;
      background: linear-gradient(180deg, #ECDAB4 0%, #E4D0A6 100%);
      border-radius: 11px 18px 0 0;
      display: flex; align-items: center; padding: 0 16px; box-sizing: border-box;
      position: relative; left: 5px;
    }
    #m-below .m-folder .f-tab span {
      font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: #8A6A45; white-space: nowrap;
    }
    #m-below .m-folder .f-body {
      background: linear-gradient(165deg, #ECDBB6 0%, #E3CEA2 100%);
      border-radius: 2px 16px 16px 16px; padding: 20px 22px 22px;
    }
    #m-below .m-folder .f-row { display: flex; align-items: baseline; gap: 14px; }
    #m-below .m-folder .f-big { font-size: 58px; font-weight: 800; color: #2a2117; line-height: 1; }
    #m-below .m-folder .f-desc { font-size: 15px; color: #4a3d2c; line-height: 1.35; }
    #m-below .m-check { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #2a2117; }
    #m-below .m-check span.ic { color: #c0561f; font-size: 20px; }
    /* founder card below the check line */
    #m-founder-card {
      display: flex; align-items: center; gap: 12px;
      background: #E7D2A8; border-radius: 16px; padding: 10px 16px 10px 10px;
      cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.18); align-self: flex-start;
    }
    #m-founder-card img { width: 60px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
    #m-founder-card .fc-t1 { font-size: 13px; font-weight: 700; color: #2A2118; }
    #m-founder-card .fc-t2 { font-size: 10.5px; font-weight: 500; color: #6F5E45; margin-top: 2px; }
    /* About modal: fit small screens */
    div[data-screen-label="Hero"] > div[style*="z-index: 100"] { position: fixed !important; }
    div[data-screen-label="Hero"] > div[style*="z-index: 100"] > div[style*="width: 600px"] { width: 92vw !important; max-width: 92vw !important; }
    /* ---- sticky note overlay ---- */
    #m-sticky {
      position: absolute !important; bottom: 124px; right: 16px; z-index: 30;
      width: 92px; height: 66px;
      cursor: pointer;
      transform: rotate(-4deg);
      transition: transform 0.28s cubic-bezier(0.23,1,0.32,1);
      display: block !important;
      filter: drop-shadow(2px 5px 9px rgba(0,0,0,0.22));
    }
    /* the red curved arrow sits to the left of the closed note */
    #m-sticky .sn-arrow {
      position: absolute; right: 92px; bottom: 20px;
      width: 44px; height: 38px; pointer-events: none; z-index: 3;
    }
    #m-sticky .sn-arrow svg { width: 100%; height: 100%; display: block; }
    /* closed lined-paper card */
    #m-sticky .sn-card {
      position: relative; width: 92px; height: 66px;
      background:
        repeating-linear-gradient(#ffffff, #ffffff 13px, #cfe0f2 13px, #cfe0f2 14px),
        #ffffff;
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    /* red margin line on the left */
    #m-sticky .sn-card::before {
      content: ''; position: absolute; top: 0; bottom: 0; left: 11px;
      width: 1.5px; background: rgba(220,70,70,0.5);
    }
    /* folded top-right corner */
    #m-sticky .sn-card::after {
      content: ''; position: absolute; top: 0; right: 0;
      border-width: 0 18px 18px 0;
      border-style: solid;
      border-color: #e9eef5 #f3f6fa;
      box-shadow: -2px 2px 3px rgba(0,0,0,0.08);
    }
    #m-sticky .sn-label {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Indie Flower', cursive; font-size: 17px; font-weight: 700;
      color: #2b2b2b; user-select: none; letter-spacing: 0.5px;
    }
    /* the quote text, hidden while closed */
    #m-sticky .sn-msg { display: none; }
    #m-sticky .sn-close { display: none; }

    /* ---- expanded (open) state ---- */
    #m-sticky.open {
      width: min(84vw, 296px); height: auto;
      transform: rotate(-1.5deg); bottom: 84px; right: 24px;
      overflow: visible !important;
    }
    #m-sticky.open .sn-arrow { display: none; }
    #m-sticky.open .sn-card {
      width: 100%; height: auto; min-height: 190px;
      border-radius: 5px; overflow: visible;
    }
    #m-sticky.open .sn-label { display: none; }
    #m-sticky.open .sn-msg {
      display: block; position: relative;
      font-family: 'Indie Flower', cursive; font-size: 17px;
      color: #2a2a2a; line-height: 1.62;
      padding: 16px 18px 14px 26px; text-align: left;
    }
    #m-sticky.open .sn-sign {
      display: block; text-align: right; margin-top: 8px;
      font-family: 'Indie Flower', cursive; font-size: 17px; color: #2a2a2a;
    }
    #m-sticky.open .sn-close {
      display: flex; align-items: center; justify-content: center;
      position: absolute; top: -11px; right: -6px;
      width: 28px; height: 28px; border-radius: 50%;
      background: #3a2e22; color: #fff; font-size: 16px; line-height: 1;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 2;
    }
    #m-sticky.open .sn-msg { display: block; }
  }