/* ============================================================
   StillUnemployed.com — Jobs board
   Rebuilt clean from Manus export. CSS preserved verbatim from
   the original <style> blocks; only @font-face src paths were
   changed to ./assets/ relative URLs.
   ============================================================ */

/* ---- Global reset / tap highlight (from resp-inject) ---- */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: transparent; }

/* ---------------- @font-face (Archivo, Archivo Black, Indie Flower, Poppins) ---------------- */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/7931df7d-a548-46a0-bee9-3f9670b42682.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/caca0d8d-9964-4977-9f8d-80f0b0e73f5b.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/8f53ac5a-48e8-42aa-b8db-00623bb7313f.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/7931df7d-a548-46a0-bee9-3f9670b42682.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/caca0d8d-9964-4977-9f8d-80f0b0e73f5b.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/8f53ac5a-48e8-42aa-b8db-00623bb7313f.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/7931df7d-a548-46a0-bee9-3f9670b42682.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/caca0d8d-9964-4977-9f8d-80f0b0e73f5b.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/8f53ac5a-48e8-42aa-b8db-00623bb7313f.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/7931df7d-a548-46a0-bee9-3f9670b42682.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/caca0d8d-9964-4977-9f8d-80f0b0e73f5b.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/8f53ac5a-48e8-42aa-b8db-00623bb7313f.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/7931df7d-a548-46a0-bee9-3f9670b42682.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/caca0d8d-9964-4977-9f8d-80f0b0e73f5b.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/8f53ac5a-48e8-42aa-b8db-00623bb7313f.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/7931df7d-a548-46a0-bee9-3f9670b42682.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/caca0d8d-9964-4977-9f8d-80f0b0e73f5b.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/8f53ac5a-48e8-42aa-b8db-00623bb7313f.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/d44ef8f3-47ed-451e-b387-b0c449797986.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/6fd8e60f-e8a8-49d7-aa98-177146dd1016.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/71103ce2-7ffb-4792-83ae-0ffb6c19fad0.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/b4cc05cd-2602-48c7-8b9b-2db92103375a.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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/3109adfd-1c9c-4db2-9e5f-17e2519bd61a.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/28381aa6-bdd8-453d-898d-2e847b65e07d.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: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/3b8c005a-e8c8-415d-a74a-005e6789d0d5.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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/0e12f7d8-bb79-40ab-a0ee-969ae7cffdfe.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/e0933cef-7ba1-4248-9295-f7b883be6e64.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: '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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/534fa687-819f-4a97-85fd-755388dfcc62.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/08783cd9-b96b-489c-a3ee-1f44c1f61a90.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: '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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/adc75a50-99fe-48fe-802d-2705b8741f8e.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/ca4a42a4-3640-473d-ba8d-0b44a9071b63.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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/3e16f20f-6eba-4dee-8e97-ad9fc7ee6f06.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;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/b58a7fdc-496a-42fb-b7ac-c9d64ecf5163.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/4ca32bdf-3baa-45c0-a10b-82df264ad31f.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: '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;
}

/* ---------------- Component styles (verbatim) ---------------- */
body { margin: 0; background: #EFE6D4; }
    .board {
      background-color: #EFE6D4;
      background-image:
        radial-gradient(rgba(120,92,54,0.08) 1px, transparent 1.7px),
        radial-gradient(rgba(120,92,54,0.05) 1px, transparent 1.7px);
      background-size: 9px 9px, 9px 9px;
      background-position: 0 0, 4.5px 4.5px;
    }
    /* ---- "Change Look?" themes (palettes verbatim from MAIN FILE.dc.html) ---- */
    .board.cod {
      background-color: #283026;
      background-image:
        radial-gradient(rgba(220,225,205,0.05) 1px, transparent 1.7px),
        radial-gradient(rgba(220,225,205,0.035) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(0,0,0,0.30), transparent 62%);
      background-size: 9px 9px, 9px 9px, 100% 100%;
      background-position: 0 0, 4.5px 4.5px, 0 0;
    }
    .board.girly {
      background-color: #FBD7E8;
      background-image:
        radial-gradient(rgba(216,40,126,0.10) 1px, transparent 1.7px),
        radial-gradient(rgba(216,40,126,0.07) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(255,255,255,0.5), transparent 60%);
      background-size: 10px 10px, 10px 10px, 100% 100%;
      background-position: 0 0, 5px 5px, 0 0;
    }
    .board.poker {
      /* burgundy velvet pool-table felt: dot texture + a warm top sheen + bottom vignette */
      background-color: #4F0F1C;
      background-image:
        radial-gradient(rgba(244,222,173,0.055) 1px, transparent 1.7px),
        radial-gradient(rgba(244,222,173,0.035) 1px, transparent 1.7px),
        radial-gradient(120% 85% at 50% 0%, rgba(255,206,130,0.13), transparent 55%),
        radial-gradient(140% 90% at 50% 100%, rgba(0,0,0,0.38), transparent 62%);
      background-size: 9px 9px, 9px 9px, 100% 100%, 100% 100%;
      background-position: 0 0, 4.5px 4.5px, 0 0, 0 0;
    }
    .board.mermaid {
      /* deep ocean: plankton dots + drifting sun-caustics + refracted light + depth gradient */
      background-color: #9FDCEB;
      background-image:
        radial-gradient(rgba(12,74,92,0.10) 1px, transparent 1.7px),
        radial-gradient(rgba(12,74,92,0.06) 1px, transparent 1.7px),
        radial-gradient(55% 42% at 22% 14%, rgba(255,255,255,0.55), transparent 60%),
        radial-gradient(50% 38% at 80% 26%, rgba(206,244,255,0.42), transparent 62%),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 17px),
        repeating-linear-gradient(63deg, rgba(255,255,255,0.10) 0 1.5px, transparent 1.5px 26px),
        linear-gradient(180deg, #CDEFF6 0%, #86D2E6 45%, #3E9FC0 100%);
      background-size: 10px 10px, 10px 10px, 150% 130%, 140% 120%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 0 0, 5px 5px, 0% 0%, 100% 0%, 0 0, 0 0, 0 0;
      animation: mermaidDrift 16s ease-in-out infinite alternate;
    }
    @keyframes mermaidDrift {
      from { background-position: 0 0, 5px 5px, 0% 0%,  100% 0%, 0 0,    0 0,     0 0; }
      to   { background-position: 0 0, 5px 5px, 14% 8%, 86% 12%, 60px 0, -40px 0, 0 0; }
    }
    @media (prefers-reduced-motion: reduce) { .board.mermaid { animation: none; } }
    .board.bratt {
      /* Charli XCX brat: pale-lime base + a lime glow so the bright green cards/nav pop */
      background-color: #EEF6D6;
      background-image:
        radial-gradient(rgba(90,140,0,0.10) 1px, transparent 1.7px),
        radial-gradient(rgba(90,140,0,0.06) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(138,206,0,0.30), transparent 60%);
      background-size: 10px 10px, 10px 10px, 100% 100%;
      background-position: 0 0, 5px 5px, 0 0;
    }
    .board.noir {
      /* Black Cat: luxury white SILK — soft satin sheen with a gathered spiral swirl in the corner */
      background-color: #F0EEE8;
      background-image:
        conic-gradient(from 205deg at 90% 86%, rgba(255,255,255,0.85) 0deg, rgba(206,200,190,0.20) 70deg, rgba(255,255,255,0.85) 145deg, rgba(206,200,190,0.20) 215deg, rgba(255,255,255,0.85) 290deg, rgba(206,200,190,0.20) 360deg),
        linear-gradient(122deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0.42) 58%, rgba(255,255,255,0) 84%, rgba(255,255,255,0.4) 100%),
        radial-gradient(150% 120% at 14% 8%, rgba(255,255,255,0.6), transparent 55%);
      background-size: 100% 100%, 100% 100%, 100% 100%;
      background-repeat: no-repeat;
    }
    .board.beauty {
      /* high-class beauty: cream base + soft rose glow */
      background-color: #EFE7DC;
      background-image:
        radial-gradient(rgba(110,20,35,0.08) 1px, transparent 1.7px),
        radial-gradient(rgba(110,20,35,0.05) 1px, transparent 1.7px),
        radial-gradient(130% 80% at 50% 0%, rgba(242,196,206,0.5), transparent 62%);
      background-size: 10px 10px, 10px 10px, 100% 100%;
      background-position: 0 0, 5px 5px, 0 0;
    }
    .board.chess {
      /* marble chessboard: warm ivory base with a faint checker grid */
      background-color: #E9E7DF;
      background-image:
        linear-gradient(45deg, rgba(20,20,20,0.030) 25%, transparent 25%, transparent 75%, rgba(20,20,20,0.030) 75%),
        linear-gradient(45deg, rgba(20,20,20,0.030) 25%, transparent 25%, transparent 75%, rgba(20,20,20,0.030) 75%),
        radial-gradient(130% 85% at 50% 0%, rgba(255,255,255,0.5), transparent 60%);
      background-size: 66px 66px, 66px 66px, 100% 100%;
      background-position: 0 0, 33px 33px, 0 0;
    }
    /* keep the page gutter behind the board matching the active theme */
    body.theme-chess   { background: #E9E7DF !important; }
    body.theme-cod     { background: #283026 !important; }
    body.theme-girly   { background: #FBD7E8 !important; }
    body.theme-poker   { background: #4F0F1C !important; }
    body.theme-mermaid { background: #6FC7DE !important; }
    body.theme-bratt   { background: #EEF6D6 !important; }
    body.theme-noir    { background: #F0EEE8 !important; }
    body.theme-beauty  { background: #EFE7DC !important; }
    /* Card text limits (Jul 2 2026): a long company or role can no longer stretch
       its whole row and leave neighbor cards with dead space. Both clamp to 2
       lines with an ellipsis; the full text stays in the job popup + title attr. */
    .card-co   { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .card-role { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Tracker nav post-it: class-styled (never inline styles on anchors — Netlify
       mangles quoted inline styles). Colors come from CSS vars the JS sets on the
       nav row per the active "Change Look?" theme. */
    .nav-postit-tracker {
      --r: -2.5deg;
      background: var(--su-nav-bg, #EDE93B);
      color: var(--su-nav-ink, #1f1c14);
      font-family: 'Indie Flower', cursive;
      font-size: 21px;
      letter-spacing: 0.01em;
      padding: 10px 20px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }
    .postit {
      text-decoration: none;
      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);
    }
    .note {
      position: relative;
      transform: rotate(var(--rot, 0deg));
      box-shadow: 3px 6px 13px rgba(44,33,24,0.17);
      transition: transform .26s cubic-bezier(.2,.9,.3,1.25), box-shadow .26s ease;
      will-change: transform;
    }
    .note:hover {
      transform: rotate(0deg) translateY(-7px) scale(1.025);
      box-shadow: 9px 18px 32px -6px rgba(44,33,24,0.34);
      z-index: 6;
    }
    .note:hover .doodle-arrow { transform: translateX(5px) rotate(-3deg); }
    .doodle-arrow { transition: transform .24s cubic-bezier(.2,.9,.3,1.4); }
    .applylink2:hover { color: #B23A1E !important; }
    .bmbtn { transition: transform .14s ease; }
    .bmbtn:hover { transform: scale(1.22) rotate(-7deg); }
    .tab:hover { filter: brightness(1.03); }
    .fbopt { transition: transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s ease; }
    .notetab:hover { transform: rotate(var(--nr,0deg)) scale(1.06); }
    .notetab { transition: transform .15s ease; }
    .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 envFadeAway { 0%{opacity:1; transform:rotate(var(--nr,0deg)) scale(1)} 100%{opacity:0; transform:rotate(var(--nr,0deg)) scale(.7)} }
    @keyframes noteFold { 0%{transform:scale(1); opacity:1} 100%{transform:scale(.14); opacity:0} }
    .stampfade { animation: stampFade .5s ease both; }
    @keyframes stampFade { 0%{opacity:0; transform:rotate(-4deg) scale(.9)} 100%{opacity:0.72; transform:rotate(-4deg) scale(1)} }
    @keyframes noteUnfold {
      0% { transform: scale(.16); opacity: 0; }
      55% { opacity: 1; }
      72% { transform: scale(1.06); }
      100% { transform: scale(1); opacity: 1; }
    }
    .fbopt:hover { transform: translateY(-5px) scale(1.045) rotate(0deg) !important; box-shadow: 4px 12px 22px rgba(44,33,24,0.28) !important; }

/* ---------------- Responsive overrides (verbatim from resp-inject) ---------------- */
@media (max-width: 1024px) {
    .board > div[style*="max-width: 1240px"] { padding-left: 24px !important; padding-right: 24px !important; }
    /* hide the founder/about card on tablet + below so it never overlaps the centered nav */
    .board .aboutcard { display: none !important; }
  }
  @media (max-width: 700px) {
    .job-grid { margin-top: 8px !important; padding-top: 0 !important; }
    .board > div:first-of-type {
      height: auto !important; padding: 16px 16px 0 !important;
      display: flex !important; flex-direction: column !important;
      align-items: stretch !important; gap: 12px !important;
    }
    .board > div:first-of-type > div:nth-child(1) {
      position: static !important; top: auto !important; left: auto !important;
      width: 100% !important; box-sizing: border-box !important; justify-content: flex-start !important;
    }
    .board > div:first-of-type > div:nth-child(2) {
      position: static !important; top: auto !important; left: auto !important;
      transform: none !important; justify-content: center !important;
      flex-wrap: wrap !important; gap: 12px !important;
    }
    .board > div:first-of-type > div:nth-child(2) a { font-size: 18px !important; padding: 10px 18px !important; }
    .board > div[style*="max-width: 1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
    .board h1 { font-size: 40px !important; max-width: 100% !important; line-height: 0.98 !important; }
    .board div[style*="justify-content: space-between"][style*="flex-start"] { flex-direction: column !important; gap: 14px !important; }
    .board div[style*="#FBF6E9"][style*="border-radius: 5px"] { flex-wrap: wrap !important; gap: 10px !important; transform: none !important; }
    .board input[placeholder^="search"] { flex: 1 1 100% !important; font-size: 18px !important; min-width: 0 !important; }
    .board div[style*="position: absolute"][style*="width: 320px"],
    .board div[style*="position: absolute"][style*="width: 268px"] { width: min(92vw, 320px) !important; right: 0 !important; left: auto !important; }
    .board div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 64px 0 !important; padding: 12px 4px 0 !important; }
    .board div[style*="flex-wrap: wrap"] { row-gap: 10px !important; }
    .board div[style*="color: #7A6650"] { display: none !important; }
    .board div[style*="color: rgb(122, 102, 80)"] { display: none !important; }
    .board span[style*="color: #9C8367"] { display: none !important; }
    .board span[style*="rgb(156, 131, 103)"] { display: none !important; }
    .board div[style*="rgb(92, 64, 51)"] { display: none !important; }
  }

/* Change-look picker: 2-across + smaller cards on mobile (desktop keeps 3-across / 3+2) */
@media (max-width: 560px){
  /* only 3 themes now: full-width stacked cards so the badge + title each fit one line */
  .look-grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .look-grid > div{ min-height: 118px !important; padding: 18px 16px 18px !important; }
  .look-grid > div > div:last-child{ font-size: 16px !important; white-space: nowrap !important; }
}

/* "we have even more themes" expander: the extra themes render as smaller/secondary cards. */
.look-grid-more > div{ min-height: 116px !important; padding: 12px 8px 11px !important; transform: none !important; }
.look-grid-more > div > div:last-child{ font-size: 15px !important; }

/* Hide the "pay key →" label on mobile (keep the color swatches + numbers) */
@media (max-width: 560px){ .pay-key-label{ display: none !important; } }

/* First-card DECOR always anchored far-left so it never overlaps the "Showing X of X" label */
.note-first .doodle { left: 4px !important; right: auto !important; }