/* >>> FONTFACE-START — generated by tools/build-fontface.js, do not edit by hand */
/* ==========================================================================
   SELF-HOSTED TYPEFACES  (T-37)

   Generated from the stylesheets Google served to tools/vendor-assets.sh,
   with every remote URL rewritten to ../fonts/. Regenerate with
   node tools/build-fontface.js — do not edit the rules below by hand.

   WHY SELF-HOSTED. The weather and exchange-rate feeds are fetched
   server-side so that no visitor IP reaches a weather or currency company.
   That is worth little while every page also asks Google for two typefaces,
   handing over the IP, the user agent and the page being read before a word
   is displayed. EU courts have ruled against embedding Google Fonts without
   consent for exactly this reason. Self-hosting removes the question rather
   than answering it.

   CYRILLIC IS LOAD-BEARING. The site is half Bulgarian. The Cyrillic blocks
   below are the entire Bulgarian reading experience; drop them and English
   pages look perfect while every Bulgarian page silently falls back to a
   system font. The generator refuses to write without them, and
   tests/thirdparty.js counts them.

   Both families are VARIABLE fonts: 35 Inter rules share 7 files and 12
   Playfair rules share 4, one per subset, each covering every weight. So the
   rule count is not the download count — a visitor fetches only the subsets
   their page actually needs, usually one or two.
   ========================================================================== */

/* ---- Inter ---- */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.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;
}

/* ---- Playfair Display ---- */
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgEM86xRbPQ.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: 500;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.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: 500;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.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: 500;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.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: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgEM86xRbPQ.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: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.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: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.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: 600;
  font-display: swap;
  src: url(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.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(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgEM86xRbPQ.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(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.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(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.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(../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.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;
}

/* <<< FONTFACE-END */

/* ==========================================================================
   Sawasdee BG  —  Bulgarians in Thailand
   Design system: modern, professional, with subtle Thai motifs
   ========================================================================== */

:root{
  /* Core palette */
  --ink:        #17202A;
  --ink-2:      #3D4A57;
  --ink-3:      #6B7A88;

  /* Surfaces that are dark in BOTH themes and always carry light text.
     Never use --ink as a background: it inverts in dark mode. */
  --ink-surface:    #17202A;
  --ink-surface-2:  #0D141C;
  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255,255,255,.72);
  --line:       #E4DCCD;
  --line-soft:  #EFE8DB;

  --cream:      #FCFAF5;
  --sand:       #F5EEE1;
  --sand-2:     #EFE5D2;
  --white:      #FFFFFF;

  /* Thai accents */
  --gold:       #C8A44D;
  --gold-deep:  #9C7B25;
  --gold-soft:  #F3E7C6;
  --red:        #A32D34;
  --red-soft:   #F7E4E3;
  --jade:       #0F6E5C;
  --jade-soft:  #DFF0EA;
  --indigo:     #2C3E64;
  --lotus:      #D9738A;
  --saffron:    #E08A2E;

  /* Regions of Thailand */
  --reg-north:    #6C8E68;
  --reg-northeast:#C98B3A;
  --reg-central:  #A32D34;
  --reg-east:     #2E7E8C;
  --reg-west:     #7A6BA8;
  --reg-south:    #1E8A6E;

  --radius:   14px;
  --radius-s: 9px;
  --radius-l: 22px;

  --shadow-s: 0 1px 2px rgba(23,32,42,.05), 0 2px 8px rgba(23,32,42,.05);
  --shadow-m: 0 2px 6px rgba(23,32,42,.06), 0 12px 30px rgba(23,32,42,.08);
  --shadow-l: 0 8px 20px rgba(23,32,42,.10), 0 30px 70px rgba(23,32,42,.14);

  --sans: 'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --serif:'Playfair Display','Georgia',serif;

  --maxw: 1220px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}

body.no-scroll{overflow:hidden}

/* THE SAFETY NET.

   Every overflow above is fixed at its cause. This catches the next one.
   `clip` rather than `hidden` deliberately: `overflow-x:hidden` turns the
   body into a scroll container, which silently breaks `position:sticky` —
   and the site header is sticky. `clip` does not.

   It hides the symptom, not the bug: a page that overflows still will,
   there just will not be a band of empty background beside it. */
body{overflow-x:clip}

/* Guide tables carry visa routes and flight connections and cannot usefully
   reflow to 360px. Let the TABLE scroll rather than the whole document. */
.acc-content table,.rt-guide table{display:block;overflow-x:auto;max-width:100%}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
h3{font-size:1.22rem}
h4{font-size:1.02rem;font-family:var(--sans);font-weight:650;letter-spacing:0}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:900px;margin:0 auto;padding:0 24px}

/* --------------------------------------------------------- Thai motifs -- */
/* Kanok-inspired flame/leaf divider */
.motif-divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 auto 42px;max-width:520px;color:var(--gold);
}
.motif-divider::before,.motif-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.motif-divider svg{width:34px;height:34px;flex:none;opacity:.9}

.thai-topbar{
  height:5px;
  background:linear-gradient(90deg,var(--red) 0 22%,var(--gold) 22% 40%,var(--jade) 40% 58%,var(--gold) 58% 78%,var(--red) 78% 100%);
}

/* Faint lotus-tile background pattern */
.pattern-bg{
  background-color:var(--sand);
  background-image:
    radial-gradient(circle at 50% 0,rgba(200,164,77,.16) 0 2px,transparent 2px),
    radial-gradient(circle at 0 50%,rgba(200,164,77,.16) 0 2px,transparent 2px);
  background-size:26px 26px;
}

/* ------------------------------------------------------------- Buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.93rem;letter-spacing:.01em;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 3px 12px rgba(163,45,52,.28)}
.btn-primary:hover{background:#8E2229;box-shadow:0 6px 20px rgba(163,45,52,.34)}
.btn-gold{background:var(--gold);color:#2A2210;box-shadow:0 3px 12px rgba(200,164,77,.35)}
.btn-gold:hover{background:#B8942F}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--white);border-color:var(--gold);color:var(--gold-deep)}
.btn-dark{background:var(--ink-surface);color:var(--on-dark)}
.btn-dark:hover{background:#0D141C}
.btn-sm{padding:7px 14px;font-size:.83rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* --------------------------------------------------------------- Chips -- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:600;
  background:var(--sand);color:var(--ink-2);border:1px solid var(--line-soft);
  letter-spacing:.02em;
}
.chip-gold{background:var(--gold-soft);color:var(--gold-deep);border-color:#E7D6A8}
.chip-red{background:var(--red-soft);color:var(--red);border-color:#EFCFCD}
.chip-jade{background:var(--jade-soft);color:var(--jade);border-color:#C6E4DA}
.chip-btn{cursor:pointer;transition:.15s}
.chip-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.chip-btn.active{background:var(--ink-surface);color:var(--on-dark);border-color:var(--ink-surface)}

/* -------------------------------------------------------------- Header -- */
.site-header{position:sticky;top:0;z-index:120;background:rgba(252,250,245,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.header-inner{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{width:38px;height:38px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--serif);font-size:1.17rem;font-weight:700;letter-spacing:-.01em}
.brand-sub{font-size:.63rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);font-weight:600}

.main-nav{display:flex;gap:2px;margin-left:auto}
.main-nav a{
  padding:8px 13px;border-radius:999px;font-size:.88rem;font-weight:550;color:var(--ink-2);
  transition:.15s;white-space:nowrap;
}
.main-nav a:hover{background:var(--sand);color:var(--ink)}
.main-nav a.active{background:var(--ink-surface);color:var(--on-dark)}

.header-tools{display:flex;align-items:center;gap:9px;flex:none;margin-left:8px}

.lang-switch{display:flex;background:var(--sand);border:1px solid var(--line-soft);border-radius:999px;padding:3px;gap:2px}
.lang-switch button{
  border:0;background:transparent;padding:5px 11px;border-radius:999px;
  font-size:.78rem;font-weight:700;color:var(--ink-3);transition:.15s;letter-spacing:.03em;
}
.lang-switch button.active{background:var(--white);color:var(--red);box-shadow:var(--shadow-s)}

.nav-toggle{display:none;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:8px 10px;line-height:0}

/* Let the brand shrink instead of pushing the tools off the screen. Without
   min-width:0 a flex item refuses to go below its content width, which is
   why the sign-in button ended up outside the viewport. */
.brand{min-width:0}
.brand-text{min-width:0}
.brand-name,.brand-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-tools{min-width:0}
/* A long username must truncate rather than widen the header.

   Targeted by structure, not by a class: the markup emits a bare <span>
   for the label. The two exclusions matter — .avatar must keep its fixed
   size, and .notice-dot is the unread indicator, which is a span and must
   not be treated as text. Written this way rather than adding a class in
   three places in app.js. */
.account-pill{max-width:46vw}
.account-pill > span:not(.avatar):not(.notice-dot){
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nav-toggle svg{width:20px;height:20px}

/* Account pill */
.account-pill{display:flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:.84rem;font-weight:600}
.avatar{width:27px;height:27px;border-radius:50%;background:var(--gold);color:#3A2E0E;display:grid;place-items:center;font-size:.76rem;font-weight:800;flex:none}
.avatar.guest{background:var(--sand-2);color:var(--ink-3)}

/* ---------------------------------------------------------------- Hero -- */
.hero{position:relative;overflow:hidden;background:#141B27;color:var(--on-dark);isolation:isolate}

/* Photographic backdrop: generated panorama, with assets/img/hero.jpg on top
   when that file exists. The scrim keeps the copy readable over either. */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .hero-svg,.hero-bg .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg .hero-photo{opacity:.92}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(12,17,26,.88) 0%,rgba(12,17,26,.74) 38%,rgba(12,17,26,.38) 68%,rgba(12,17,26,.22) 100%),
    linear-gradient(0deg,rgba(12,17,26,.72) 0%,rgba(12,17,26,0) 42%);
}
.hero-scrim::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(1000px 520px at 8% 8%,rgba(200,164,77,.16),transparent 62%);
}
@media (max-width:860px){
  .hero-scrim{background:linear-gradient(180deg,rgba(12,17,26,.86),rgba(12,17,26,.78) 60%,rgba(12,17,26,.9))}
}
.hero-inner{position:relative;z-index:2;padding:96px 0 104px;max-width:800px;
  text-shadow:0 1px 24px rgba(8,12,18,.5)}
.hero h1{color:#fff;margin-bottom:.35em}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero-kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:.73rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--gold);margin-bottom:22px;
}
.hero-kicker::before{content:'';width:26px;height:1px;background:var(--gold)}
.hero p.lead{font-size:1.1rem;color:rgba(255,255,255,.82);max-width:620px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-stats{display:flex;gap:38px;flex-wrap:wrap;margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.hero-stat b{display:block;font-family:var(--serif);font-size:1.85rem;color:var(--gold)}
.hero-stat span{font-size:.78rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em}

/* Page header (inner pages) */
.page-head{background:var(--ink-surface);color:var(--on-dark);position:relative;overflow:hidden}
.page-head::after{content:'';position:absolute;inset:0;background:radial-gradient(700px 340px at 10% -20%,rgba(200,164,77,.26),transparent 62%),radial-gradient(600px 340px at 90% 130%,rgba(163,45,52,.34),transparent 60%)}
.page-head-inner{position:relative;z-index:2;padding:54px 0 58px;max-width:760px}
.page-head h1{color:#fff;margin-bottom:.25em}
.page-head p{color:rgba(255,255,255,.78);margin:0;font-size:1.02rem}
.crumb{font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-weight:700;margin-bottom:14px;display:block}

/* -------------------------------------------------------------- Layout -- */
section{padding:76px 0}
section.tight{padding:52px 0}
.section-head{text-align:center;max-width:680px;margin:0 auto 44px}
.section-head p{color:var(--ink-3);margin:0}
.eyebrow{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-deep);margin-bottom:12px}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* --------------------------------------------------------------- Cards -- */
.card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-s);transition:.2s;
}
.card:hover{box-shadow:var(--shadow-m);border-color:var(--line)}
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-2);font-size:.93rem;margin:0}

/* Hub gateway cards (overview page) */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:30px 28px 26px;overflow:hidden;box-shadow:var(--shadow-s);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s;
  min-height:270px;
}
.hub-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent,var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.hub-card::after{
  content:'';position:absolute;right:-58px;bottom:-58px;width:190px;height:190px;border-radius:50%;
  background:var(--accent,var(--gold));opacity:.06;transition:.35s cubic-bezier(.2,.7,.3,1);
}
.hub-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-l);border-color:var(--line)}
.hub-card:hover::before{transform:scaleX(1)}
.hub-card:hover::after{transform:scale(1.28);opacity:.11}
.hub-icon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--accent-soft,var(--gold-soft));color:var(--accent,var(--gold-deep));position:relative;z-index:2;
}
.hub-icon svg{width:26px;height:26px}
.hub-card h3{position:relative;z-index:2;font-size:1.3rem;margin-bottom:.35em}
.hub-card p{position:relative;z-index:2;color:var(--ink-2);font-size:.92rem;margin:0 0 16px}
.hub-links{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.hub-links span{font-size:.74rem;padding:4px 10px;border-radius:999px;background:var(--sand);color:var(--ink-3);font-weight:600}
.hub-go{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:.85rem;font-weight:700;color:var(--accent,var(--gold-deep));
}
.hub-go svg{width:15px;height:15px;transition:transform .2s}
.hub-card:hover .hub-go svg{transform:translateX(4px)}

/* ------------------------------------------------------ Tabs / sections -- */
.tabbar{display:flex;gap:6px;overflow-x:auto;padding:6px;background:var(--sand);border-radius:999px;border:1px solid var(--line-soft);scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{
  border:0;background:transparent;padding:9px 18px;border-radius:999px;
  font-size:.88rem;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:.16s;
}
.tabbar button:hover{color:var(--ink)}
.tabbar button.active{background:var(--white);color:var(--red);box-shadow:var(--shadow-s)}
.tabpanel{display:none;animation:fade .35s ease}
.tabpanel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- Thailand map -- */
.map-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.map-stage{
  position:relative;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--radius-l);padding:14px;box-shadow:var(--shadow-s);
}
#thailand-map{width:100%;height:auto;display:block;touch-action:manipulation}
#thailand-map .province{
  fill:var(--reg-central);stroke:#fff;stroke-width:.9;stroke-linejoin:round;
  cursor:pointer;transition:fill .18s,filter .18s;fill-opacity:.62;
}
#thailand-map .province:hover{fill-opacity:.92}
#thailand-map .province.selected{fill-opacity:1;stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
#thailand-map .province.dimmed{fill-opacity:.16}
#thailand-map .outline{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.55;pointer-events:none}
#thailand-map .dot{fill:#fff;pointer-events:none;opacity:.85}
#thailand-map .plabel{font-size:7px;font-weight:700;fill:#fff;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:1.6px}

.map-tooltip{
  position:absolute;pointer-events:none;z-index:5;background:var(--ink-surface);color:var(--on-dark);
  padding:6px 11px;border-radius:8px;font-size:.79rem;font-weight:600;white-space:nowrap;
  transform:translate(-50%,-140%);opacity:0;transition:opacity .12s;box-shadow:var(--shadow-m);
}
.map-tooltip.on{opacity:1}

.map-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.legend-item{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--ink-2);
  padding:5px 11px;border-radius:999px;border:1px solid var(--line-soft);background:var(--cream);cursor:pointer;transition:.15s}
.legend-item:hover{border-color:var(--gold)}
.legend-item.off{opacity:.4}
.legend-swatch{width:11px;height:11px;border-radius:3px;flex:none}

.province-panel{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);overflow:hidden;position:sticky;top:92px;
}
.pp-head{padding:22px 24px 18px;background:var(--accent,var(--ink));color:#fff;position:relative;overflow:hidden}
.pp-head::after{content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.09)}
.pp-head .pp-region{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;opacity:.85}
.pp-head h3{color:#fff;margin:6px 0 2px;font-size:1.55rem;position:relative;z-index:2}
.pp-head .pp-thai{font-size:.9rem;opacity:.8;position:relative;z-index:2}
.pp-body{padding:22px 24px 26px;max-height:520px;overflow-y:auto}
.pp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.pp-stat{background:var(--sand);border-radius:var(--radius-s);padding:11px 13px}
.pp-stat span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:700}
.pp-stat b{font-size:.98rem}
.pp-body h4{margin:18px 0 8px;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--gold-deep)}
.pp-body ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:.92rem}
.pp-body ul li{margin-bottom:5px}
.pp-empty{padding:52px 26px;text-align:center;color:var(--ink-3)}
.pp-empty svg{width:52px;height:52px;color:var(--line);margin:0 auto 14px}

.province-search{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.province-search input{
  flex:1;min-width:220px;padding:11px 16px;border:1px solid var(--line);border-radius:999px;
  font-family:inherit;font-size:.9rem;background:var(--white);
}
.province-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,164,77,.18)}
.province-list{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow-y:auto;padding:4px}
.province-list button{
  border:1px solid var(--line-soft);background:var(--white);padding:5px 12px;border-radius:999px;
  font-size:.79rem;font-weight:600;color:var(--ink-2);transition:.15s;
}
.province-list button:hover{border-color:var(--gold);color:var(--gold-deep)}
.province-list button.active{background:var(--ink-surface);color:var(--on-dark);border-color:var(--ink-surface)}

/* --------------------------------------------------------- Stat tiles -- */
.stat-tile{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-s);position:relative;overflow:hidden}
.stat-tile .st-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-deep);margin-bottom:13px}
.stat-tile .st-ico svg{width:19px;height:19px}
.stat-tile b{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.15}
.stat-tile span{font-size:.8rem;color:var(--ink-3);font-weight:600}
.stat-tile small{display:block;margin-top:7px;font-size:.79rem;color:var(--ink-2);line-height:1.5}

.bar-row{margin-bottom:13px}
.bar-row .bl{display:flex;justify-content:space-between;font-size:.84rem;font-weight:600;margin-bottom:5px}
.bar-track{height:8px;border-radius:999px;background:var(--sand-2);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:var(--gold);transition:width .8s cubic-bezier(.2,.7,.3,1)}

/* ------------------------------------------------- Illustrated tiles ---- */
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--white);
  border:1px solid var(--line-soft);box-shadow:var(--shadow-s);transition:.22s;display:flex;flex-direction:column;
}
a.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.tile-art{aspect-ratio:16/10;position:relative;overflow:hidden}
.tile-art svg{width:100%;height:100%;display:block}

/* Photo layer — a real image covers the generated art when the file exists */
.pic{position:absolute;inset:0}
.pic-art,.pic-art svg{position:absolute;inset:0;width:100%;height:100%}
.pic-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
a.tile:hover .pic-photo,.listing:hover .pic-photo{transform:scale(1.05)}
.tile-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
.tile-body h3{font-size:1.06rem;margin-bottom:.25em}
.tile-body p{font-size:.87rem;color:var(--ink-2);margin:0 0 12px}
.tile-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}

.food-card .tile-art{aspect-ratio:4/3}
.food-tag{position:absolute;top:10px;left:10px;z-index:2}

/* ------------------------------------------------------------- Chatroom -- */
.chat-shell{display:grid;grid-template-columns:220px 1fr;min-height:540px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-s)}
.chat-side{background:var(--ink-surface);color:var(--on-dark);padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.chat-side .cs-title{font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.45);font-weight:700;margin:14px 8px 8px}
.chat-side .cs-title:first-child{margin-top:0}
.chat-side button{
  display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:rgba(255,255,255,.72);
  padding:8px 10px;border-radius:9px;font-size:.87rem;font-weight:600;text-align:left;transition:.15s;
}
.chat-side button:hover{background:rgba(255,255,255,.08);color:#fff}
.chat-side button.active{background:var(--gold);color:#2A2210}
.chat-side .dot-live{width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none;margin-left:auto}
.chat-main{display:flex;flex-direction:column;min-width:0}
.chat-head{padding:14px 20px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}
.chat-head b{font-size:1rem}
.chat-head small{color:var(--ink-3);font-size:.8rem}
.chat-log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;max-height:420px;background:var(--cream)}
.msg{display:flex;gap:11px}
.msg .avatar{width:34px;height:34px;font-size:.8rem}
.msg-body{min-width:0}
.msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.msg-head b{font-size:.87rem}
.msg-head time{font-size:.72rem;color:var(--ink-3)}
.msg-text{background:var(--white);border:1px solid var(--line-soft);border-radius:3px 12px 12px 12px;padding:9px 13px;font-size:.9rem;color:var(--ink-2);display:inline-block}
.msg.me .msg-text{background:var(--gold-soft);border-color:#E7D6A8;color:#4A3B12}
.chat-compose{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line-soft);background:var(--white)}
.chat-compose input{flex:1;padding:11px 16px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-size:.92rem}
.chat-compose input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,164,77,.18)}

/* --------------------------------------------------------------- Forum -- */
.thread{display:flex;gap:16px;padding:18px 20px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--white);transition:.18s;box-shadow:var(--shadow-s)}
.thread:hover{border-color:var(--gold);transform:translateX(3px)}
.thread-votes{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;background:var(--sand);border-radius:var(--radius-s);padding:8px}
.thread-votes b{font-size:1.1rem;font-family:var(--serif)}
.thread-votes span{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700}
.thread-main{min-width:0;flex:1}
.thread-main h3{font-size:1.02rem;margin-bottom:.3em}
.thread-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--ink-3)}

/* ------------------------------------------------------------ Articles -- */
.news-item{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:18px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-s);transition:.18s}
.news-item:hover{box-shadow:var(--shadow-m)}
.news-item .tile-art{aspect-ratio:1;border-radius:var(--radius-s)}
.news-item h3{font-size:1.04rem}
.news-item p{font-size:.88rem;color:var(--ink-2);margin:0 0 10px}

/* ------------------------------------------------------------ Accordion -- */
.acc{border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--white);overflow:hidden;box-shadow:var(--shadow-s)}
.acc + .acc{margin-top:12px}
.acc summary{
  list-style:none;cursor:pointer;padding:17px 22px;font-weight:650;font-size:1rem;
  display:flex;align-items:center;gap:12px;transition:.15s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--sand)}
.acc summary .acc-ico{width:32px;height:32px;border-radius:9px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center;flex:none}
.acc summary .acc-ico svg{width:16px;height:16px}
.acc summary::after{content:'+';margin-left:auto;font-size:1.3rem;color:var(--ink-3);font-weight:400;line-height:1}
.acc[open] summary::after{content:'\2013'}
.acc[open] summary{border-bottom:1px solid var(--line-soft)}
.acc-content{padding:20px 22px 24px;color:var(--ink-2);font-size:.94rem}
.acc-content h4{color:var(--ink);margin:16px 0 7px}
.acc-content h4:first-child{margin-top:0}
.acc-content ul{padding-left:20px;margin:0 0 14px}
.acc-content li{margin-bottom:6px}
.acc-content table{width:100%;border-collapse:collapse;font-size:.88rem;margin:0 0 14px}
.acc-content th,.acc-content td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line-soft)}
.acc-content th{background:var(--sand);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}

.callout{border-left:3px solid var(--gold);background:var(--gold-soft);padding:13px 16px;border-radius:0 var(--radius-s) var(--radius-s) 0;font-size:.89rem;color:#57451A;margin:0 0 14px}
.callout.warn{border-color:var(--red);background:var(--red-soft);color:#6E1F24}

/* ---------------------------------------------------------- Calendar --- */
.cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cal-month{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow-s)}
.cal-month h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-deep);margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.cal-event{display:flex;gap:9px;padding:7px 0;cursor:pointer;border-radius:8px;transition:.15s}
.cal-event:hover{background:var(--sand);padding-left:6px;padding-right:6px}
.cal-event .ce-day{font-size:.7rem;font-weight:800;color:var(--red);flex:none;min-width:36px;padding-top:2px}
.cal-event .ce-name{font-size:.83rem;font-weight:600;line-height:1.35}
.cal-event .ce-sub{font-size:.72rem;color:var(--ink-3)}

/* ------------------------------------------------------------- Weather -- */
.wx-card{background:linear-gradient(160deg,var(--indigo),#1B2740);color:#fff;border-radius:var(--radius);padding:20px;position:relative;overflow:hidden}
.wx-card::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(224,138,46,.28)}
.wx-card .wx-city{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;opacity:.75;font-weight:700}
.wx-card .wx-temp{font-family:var(--serif);font-size:2.5rem;line-height:1.1;position:relative;z-index:2}
.wx-card .wx-desc{font-size:.86rem;opacity:.85;position:relative;z-index:2}
.wx-card .wx-row{display:flex;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:.76rem;opacity:.8;position:relative;z-index:2}

/* --------------------------------------------------------- Marketplace -- */
.mk-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.mk-toolbar input,.mk-toolbar select{
  padding:10px 15px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-size:.88rem;background:var(--white);
}
.mk-toolbar input{flex:1;min-width:200px}
.mk-toolbar input:focus,.mk-toolbar select:focus{outline:none;border-color:var(--gold)}

.listing{
  position:relative;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-s);transition:.2s;display:flex;flex-direction:column;
}
.listing:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.listing .tile-art{aspect-ratio:4/3}
.listing-body{padding:15px 17px 18px;display:flex;flex-direction:column;flex:1}
.listing-body h3{font-size:1rem;margin-bottom:.3em}
.listing-price{font-family:var(--serif);font-size:1.25rem;color:var(--red);margin-bottom:6px}
.listing-meta{font-size:.78rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:12px}
.listing-seller{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.listing-seller .avatar{width:24px;height:24px;font-size:.68rem}
.verified{color:var(--jade);display:inline-flex;align-items:center;gap:3px;font-size:.74rem;font-weight:700}
.verified svg{width:13px;height:13px}

/* Sponsored listings — visually distinct but not louder than content */
.listing.sponsored{border-color:#E3CE96;box-shadow:0 0 0 1px rgba(200,164,77,.35),var(--shadow-s);background:linear-gradient(180deg,#FFFDF7,#fff 120px)}
.listing.sponsored:hover{box-shadow:0 0 0 1px rgba(200,164,77,.5),var(--shadow-m)}
.sponsor-flag{
  display:inline-flex;align-items:center;gap:5px;position:absolute;top:11px;right:11px;z-index:3;
  background:rgba(255,255,255,.95);border:1px solid #E3CE96;color:var(--gold-deep);
  padding:4px 9px;border-radius:999px;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  backdrop-filter:blur(4px);
}
.sponsor-flag svg{width:11px;height:11px}
.sponsor-note{font-size:.7rem;color:var(--gold-deep);font-weight:700;margin-top:8px;display:flex;align-items:center;gap:5px}
.ad-slot{
  border:1px dashed #DCC894;border-radius:var(--radius);background:linear-gradient(135deg,#FFFDF6,#FBF3DF);
  padding:26px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.ad-slot .ad-label{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-deep);margin-bottom:6px}

/* --------------------------------------------------------------- Modal -- */
.modal-backdrop{
  position:fixed;inset:0;z-index:300;background:rgba(15,20,27,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:22px;overflow-y:auto;
}
.modal-backdrop.open{display:flex;animation:fade .2s ease}
.modal{
  background:var(--white);border-radius:var(--radius-l);width:100%;max-width:440px;
  box-shadow:var(--shadow-l);overflow:hidden;position:relative;animation:pop .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:14px;border:0;background:var(--sand);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);z-index:4}
.modal-x:hover{background:var(--sand-2)}
.modal-head{padding:30px 30px 0;text-align:center}
.modal-head .brand-mark{margin:0 auto 14px;width:44px;height:44px}
.modal-head h3{font-size:1.45rem;margin-bottom:.3em}
.modal-head p{font-size:.9rem;color:var(--ink-3);margin:0}
.modal-body{padding:24px 30px 30px}

.oauth-grid{display:grid;gap:9px;margin-bottom:18px}
.oauth-btn{
  display:flex;align-items:center;gap:11px;width:100%;padding:11px 16px;border:1px solid var(--line);
  background:var(--white);border-radius:11px;font-size:.9rem;font-weight:600;transition:.15s;
}
.oauth-btn:hover{background:var(--sand);border-color:var(--ink-3);transform:translateY(-1px)}
.oauth-btn svg{width:19px;height:19px;flex:none}
.oauth-btn span.grow{margin-right:auto}

.divider-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.divider-or::before,.divider-or::after{content:'';flex:1;height:1px;background:var(--line-soft)}

.field{margin-bottom:13px}
.field label{display:block;font-size:.78rem;font-weight:700;margin-bottom:5px;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.92rem;background:var(--white);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,164,77,.18)}
.field .hint{font-size:.75rem;color:var(--ink-3);margin-top:5px}

.modal-foot{padding:16px 30px;background:var(--sand);border-top:1px solid var(--line-soft);text-align:center;font-size:.85rem;color:var(--ink-2)}
.modal-foot a{color:var(--red);font-weight:700}

.guest-note{background:var(--sand);border-radius:var(--radius-s);padding:13px 15px;font-size:.8rem;color:var(--ink-2);margin-top:14px}
.guest-note b{display:block;margin-bottom:5px;color:var(--ink)}
.guest-note ul{margin:0;padding-left:17px}

/* Gate overlay for guest-restricted areas */
.gated{position:relative}
.gate-veil{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:26px;border-radius:var(--radius-l);
  background:linear-gradient(180deg,rgba(252,250,245,.55),rgba(252,250,245,.97) 55%);
  backdrop-filter:blur(2.5px);
}
.gate-veil svg.lock{width:34px;height:34px;color:var(--gold-deep)}
.gate-veil b{font-size:1.05rem;font-family:var(--serif)}
.gate-veil p{font-size:.87rem;color:var(--ink-2);max-width:330px;margin:0}

/* ---------------------------------------------------------- TH-AI bot -- */
.bot-fab{
  position:fixed;right:22px;bottom:22px;z-index:200;display:flex;align-items:center;gap:10px;
  padding:12px 20px 12px 13px;border:0;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--red),#7E1F26);
  box-shadow:0 8px 26px rgba(163,45,52,.42);font-weight:700;font-size:.9rem;transition:.2s;
}
.bot-fab:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(163,45,52,.5)}
.bot-fab .fab-ring{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.bot-fab svg{width:17px;height:17px}

.bot-panel{
  position:fixed;right:22px;bottom:22px;z-index:210;width:min(392px,calc(100vw - 32px));
  height:min(600px,calc(100vh - 44px));background:var(--white);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line-soft);
}
.bot-panel.open{display:flex;animation:pop .26s cubic-bezier(.2,.8,.3,1)}
.bot-head{padding:16px 18px;background:linear-gradient(135deg,#1B2430,#0E141C);color:#fff;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden}
.bot-head::after{content:'';position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;background:rgba(200,164,77,.22)}
.bot-avatar{width:38px;height:38px;border-radius:12px;background:var(--gold);color:#3A2E0E;display:grid;place-items:center;font-weight:800;font-size:.82rem;flex:none;position:relative;z-index:2}
.bot-head b{display:block;font-size:.98rem;position:relative;z-index:2}
.bot-head small{font-size:.74rem;opacity:.7;position:relative;z-index:2;display:flex;align-items:center;gap:5px}
.bot-head small::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ADE80}
.bot-x{margin-left:auto;border:0;background:rgba(255,255,255,.13);color:#fff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2}
.bot-log{flex:1;overflow-y:auto;padding:18px;background:var(--cream);display:flex;flex-direction:column;gap:13px}
.bot-msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:.89rem;line-height:1.55}
.bot-msg.bot{background:var(--white);border:1px solid var(--line-soft);border-top-left-radius:4px;align-self:flex-start;color:var(--ink-2)}
.bot-msg.user{background:var(--ink-surface);color:var(--on-dark);border-top-right-radius:4px;align-self:flex-end}
.bot-msg b{color:var(--ink)}
.bot-msg.bot ul{margin:8px 0 0;padding-left:17px}
.bot-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px;background:var(--cream)}
.bot-chips button{border:1px solid var(--line);background:var(--white);padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--ink-2);transition:.15s}
.bot-chips button:hover{border-color:var(--gold);color:var(--gold-deep)}
.bot-compose{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--line-soft);background:var(--white)}
.bot-compose input{flex:1;padding:10px 15px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-size:.9rem}
.bot-compose input:focus{outline:none;border-color:var(--gold)}
.bot-send{border:0;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.bot-send svg{width:17px;height:17px}
.bot-msg.bot table{width:100%;border-collapse:collapse;font-size:.83rem;margin:8px 0}
.bot-msg.bot th,.bot-msg.bot td{text-align:left;padding:5px 7px;border-bottom:1px solid var(--line-soft)}
.bot-msg.bot th{background:var(--sand);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.bot-msg.bot .callout{margin:9px 0;font-size:.84rem;padding:9px 12px}
.bot-msg.bot a{color:var(--red);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.bot-msg.bot ol{margin:8px 0 0;padding-left:18px}
.bot-cap{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:.79rem;color:var(--ink-3)}
.bot-badge{display:inline-block;background:var(--jade);color:#fff;font-size:.6rem;font-weight:800;
  letter-spacing:.09em;padding:2px 7px;border-radius:999px;margin-bottom:7px}
.bot-phrases{margin:9px 0;border:1px solid var(--line-soft);border-radius:9px;overflow:hidden}
.bp-row{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:8px 11px;background:var(--sand)}
.bp-row + .bp-row{border-top:1px solid var(--line-soft)}
.bp-th{grid-row:span 2;font-size:1.05rem;align-self:center}
.bp-say{font-size:.82rem;color:var(--red);font-weight:650}
.bp-mean{font-size:.82rem;color:var(--ink-2)}
.typing{display:flex;gap:4px;padding:13px 15px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* -------------------------------------------------------------- Footer -- */
.site-footer{background:var(--ink-surface);color:var(--on-dark-soft);padding:56px 0 0;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;padding-bottom:40px}
.site-footer h4{color:#fff;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:.87rem}
.site-footer li{margin-bottom:8px}
.site-footer a:hover{color:var(--gold)}
.footer-brand p{font-size:.88rem;max-width:290px;margin-top:14px}
.footer-brand .brand-name{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:400;
  background:var(--ink-surface);color:var(--on-dark);padding:12px 22px;border-radius:999px;font-size:.88rem;font-weight:600;
  box-shadow:var(--shadow-l);opacity:0;pointer-events:none;transition:.25s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------- Responsive -- */
@media (max-width:1040px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .map-layout{grid-template-columns:1fr}
  .province-panel{position:static}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .cal-grid{grid-template-columns:repeat(2,1fr)}
}
/* THE NAV COLLAPSES AT 1180px, NOT 860px.

   It used to be 860, and that was measured against nothing. The eight nav
   labels need roughly 770px on their own (Bulgarian is barely shorter than
   English here — "Обратна връзка", "Възможности"), the brand block takes
   about 215px and the language switch, account pill and menu button about
   280px between them. With the 48px of .wrap padding that is a header
   about 1310px wide that refuses to wrap.

   So between 861px and roughly 1310px the header was WIDER THAN THE PAGE.
   Nothing clipped it, so the document grew to match and every section
   below inherited a horizontal scrollbar and a band of empty background
   on the right — which is exactly what you see when you zoom out. Every
   tablet and most laptops were in that band. */
@media (max-width:1180px){
  .main-nav{
    display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    background:var(--white);border-bottom:1px solid var(--line);padding:12px;gap:4px;box-shadow:var(--shadow-m);
  }
  .main-nav.open{display:flex}
  .nav-toggle{display:block;margin-left:auto}
  .header-tools{margin-left:auto}
  .g3,.g2{grid-template-columns:1fr}
  .chat-shell{grid-template-columns:1fr}
  .chat-side{flex-direction:row;overflow-x:auto;padding:12px;gap:6px}
  .chat-side .cs-title{display:none}
  .chat-side button{width:auto;white-space:nowrap}
  .news-item{grid-template-columns:1fr}
  .news-item .tile-art{aspect-ratio:16/9}
  section{padding:52px 0}
  .hero-inner{padding:58px 0 64px}
}
@media (max-width:620px){
  .hub-grid{grid-template-columns:1fr}
  .g4,.cal-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-stats{gap:24px}
  .bot-fab span.fab-text{display:none}
  .bot-fab{padding:14px}

  /* THE HEADER ON A PHONE.

     Even with the nav collapsed the header did not fit. Measured on a
     360px screen: brand 209px (of which 160px is the uppercase tagline
     with .15em letter-spacing) + 18px gap + tools 265px + 48px of .wrap
     padding = about 540px. That is 180px wider than the phone, and it is
     the gap you see when you zoom out.

     The tagline is the biggest single item and the least useful — the
     brand name is right above it. It goes first. */
  .wrap,.wrap-narrow{padding:0 16px}
  .header-inner{gap:10px;height:62px}
  .brand-sub{display:none}
  .brand-name{font-size:1.05rem}
  .brand-mark{width:32px;height:32px}
  .header-tools{gap:6px}
  .lang-switch button{padding:5px 8px;font-size:.74rem}
  .main-nav{top:62px}
  .page-head-inner{padding:38px 0 42px}
  section{padding:40px 0}
  section.tight{padding:32px 0}
}

/* Below this the account pill's text is more trouble than it is worth;
   the avatar alone still says who is signed in. */
@media (max-width:420px){
  .account-pill{padding:4px;max-width:none}
  .account-pill > span:not(.avatar):not(.notice-dot){display:none}
  /* The moderation shortcut keeps its icon and loses its word too. */
  #mod-link{padding:4px}
}

@media print{.site-header,.bot-fab,.bot-panel,.site-footer{display:none}}

/* ==========================================================================
   Dark theme
   ========================================================================== */
[data-theme="dark"]{
  --ink:#ECEFF3; --ink-2:#B7C0CB; --ink-3:#8A95A3;
  --line:#2C3440; --line-soft:#232A34;
  --cream:#12171E; --sand:#1A212A; --sand-2:#222B36; --white:#171E26;
  --gold:#D9B65E; --gold-deep:#E0C27A;
  --gold-soft:#2A2618; --red-soft:#2C1A1C; --jade-soft:#16281F;
  --shadow-s:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-m:0 2px 6px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.4);
  --shadow-l:0 8px 20px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.55);
}
[data-theme="dark"]{
  --gold-deep:#E0C27A;
  /* stays dark in dark mode too, just a shade deeper */
  --ink-surface:#0E141B; --ink-surface-2:#080C11;
}
/* Headings inherit --ink, which is light in dark mode — correct on light
   surfaces, wrong on the dark ones. Force light text there explicitly. */
[data-theme="dark"] .page-head h1,
[data-theme="dark"] .page-head p,
[data-theme="dark"] .page-head .crumb,
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero p,
[data-theme="dark"] .chat-side,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .rules-enforce,
[data-theme="dark"] .rules-enforce h3,
[data-theme="dark"] .host-side{color:var(--on-dark)}
[data-theme="dark"] .page-head .crumb{color:var(--gold)}
[data-theme="dark"] body{background:var(--cream);color:var(--ink)}
[data-theme="dark"] .site-header{background:rgba(18,23,30,.92)}
[data-theme="dark"] .pattern-bg{
  background-color:var(--sand);
  background-image:
    radial-gradient(circle at 50% 0,rgba(217,182,94,.10) 0 2px,transparent 2px),
    radial-gradient(circle at 0 50%,rgba(217,182,94,.10) 0 2px,transparent 2px);
}
[data-theme="dark"] .btn-ghost{color:var(--ink)}
[data-theme="dark"] .card,[data-theme="dark"] .tile,[data-theme="dark"] .listing,
[data-theme="dark"] .acc,[data-theme="dark"] .thread,[data-theme="dark"] .news-item,
[data-theme="dark"] .stat-tile,[data-theme="dark"] .cal-month,[data-theme="dark"] .ph-table,
[data-theme="dark"] .map-stage,[data-theme="dark"] .province-panel,[data-theme="dark"] .chat-shell,
[data-theme="dark"] .pkg,[data-theme="dark"] .job,[data-theme="dark"] .intro-card,
[data-theme="dark"] .sheet-box,[data-theme="dark"] .modal,[data-theme="dark"] .bot-panel{
  background:var(--white);border-color:var(--line-soft);
}
[data-theme="dark"] .chat-log,[data-theme="dark"] .bot-log{background:#101720}
[data-theme="dark"] .msg-text{background:var(--sand);border-color:var(--line-soft);color:var(--ink-2)}
[data-theme="dark"] .msg.me .msg-text{background:#2E2718;border-color:#463C22;color:#F0DFAE}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--sand);color:var(--ink);border-color:var(--line);
}
[data-theme="dark"] .listing.sponsored{background:linear-gradient(180deg,#221E14,var(--white) 120px);border-color:#4A3F22}
[data-theme="dark"] .sponsor-flag{background:rgba(23,30,38,.95);border-color:#4A3F22}
[data-theme="dark"] .ad-slot{background:linear-gradient(135deg,#201D13,#1A1810);border-color:#4A3F22}
[data-theme="dark"] .gate-veil{background:linear-gradient(180deg,rgba(18,23,30,.55),rgba(18,23,30,.97) 55%)}
[data-theme="dark"] .callout{background:#241F12;color:#E4D3A2}
[data-theme="dark"] .callout.warn{background:#2A1618;color:#EDBDBD}
[data-theme="dark"] #thailand-map .outline{stroke:#E6EAF0;opacity:.35}

/* ==========================================================================
   Sheet — settings, terms, composers
   ========================================================================== */
.modal-backdrop.sheet{align-items:flex-start;padding:0}
.sheet-box{
  background:var(--white);width:100%;max-width:720px;margin:auto;
  border-radius:var(--radius-l);box-shadow:var(--shadow-l);
  display:flex;flex-direction:column;max-height:92vh;overflow:hidden;
  animation:pop .26s cubic-bezier(.2,.8,.3,1);
}
@media(max-width:760px){
  .modal-backdrop.sheet{padding:0}
  .sheet-box{max-width:none;min-height:100vh;border-radius:0;max-height:100vh}
}
.sheet-head{display:flex;align-items:center;gap:14px;padding:20px 26px;border-bottom:1px solid var(--line-soft)}
.sheet-head h3{margin:0;font-size:1.28rem}
.sheet-head .modal-x{position:static;margin-left:auto}
.sheet-body{padding:24px 26px;overflow-y:auto;flex:1;min-height:0}
.sheet-foot{padding:16px 26px;border-top:1px solid var(--line-soft);background:var(--sand)}
.sheet-foot:empty{display:none}
.sheet-actions{display:flex;gap:10px;justify-content:flex-end}
.sheet-lead{color:var(--ink-2);font-size:.94rem;margin:0 0 18px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-grid .field:first-child,.form-grid .field:nth-child(5){grid-column:1/-1}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}
.form-error{background:var(--red-soft);color:var(--red);padding:10px 14px;border-radius:var(--radius-s);
  font-size:.88rem;font-weight:600;margin:6px 0 0}
.legal-note{font-size:.82rem;color:var(--ink-3);margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}

.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:grid;place-items:center;color:var(--ink-2);transition:.15s;flex:none}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-deep);transform:rotate(25deg)}
.icon-btn svg{width:18px;height:18px}

/* ---- terms ---- */
.legal{font-size:.93rem;color:var(--ink-2);line-height:1.7}
.legal-meta{font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.legal-sec{margin:26px 0}
.legal-sec h4{font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin-bottom:.5em}
.legal ul{padding-left:20px;margin:0 0 12px}
.legal li{margin-bottom:7px}
.legal-end{margin-top:30px;padding:16px;text-align:center;background:var(--sand);border-radius:var(--radius-s);
  font-weight:650;color:var(--ink-2)}
.agree-row{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px;font-size:.9rem;cursor:pointer}
.agree-row input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--red)}
.agree-row input:disabled + span{color:var(--ink-3)}

/* ---- settings ---- */
.set-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.set-h{margin:24px 0 10px;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--gold-deep)}
.opt-list{display:flex;flex-direction:column;gap:10px}
.opt-row{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line-soft);
  border-radius:var(--radius);cursor:pointer;transition:.15s;background:var(--white)}
.opt-row:hover{border-color:var(--gold)}
.opt-row.on{border-color:var(--gold);background:var(--gold-soft)}
.opt-row input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--gold-deep)}
.opt-row b{display:block;font-size:.95rem}
.opt-row small{display:block;color:var(--ink-3);font-size:.84rem;margin-top:2px}
.pay-list{display:flex;flex-direction:column;gap:10px}
.pay-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line-soft);
  border-radius:var(--radius);background:var(--white)}
.pay-row b{display:block;font-size:.95rem}
.pay-row small{display:block;color:var(--ink-3);font-size:.83rem}
.pay-row .btn{margin-left:auto;flex:none}
.acc-rows{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.acc-row{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--white);font-size:.9rem}
.acc-row span{color:var(--ink-3)}

/* ==========================================================================
   Attachments
   ========================================================================== */
.att{border:1px dashed var(--line);border-radius:var(--radius);padding:10px 12px;transition:.15s}
.att.drag{border-color:var(--gold);background:var(--gold-soft)}
.att-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.att-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--white);
  padding:7px 13px;border-radius:999px;font-size:.83rem;font-weight:600;color:var(--ink-2);transition:.15s}
.att-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.att-btn svg{width:15px;height:15px}
.att-note{font-size:.76rem;color:var(--ink-3);flex:1;min-width:140px}
.att-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.att-item{position:relative;display:flex;align-items:center;gap:9px;padding:7px 30px 7px 8px;
  background:var(--sand);border:1px solid var(--line-soft);border-radius:10px;max-width:230px}
.att-item img{width:38px;height:38px;object-fit:cover;border-radius:6px;flex:none}
.att-doc{width:38px;height:38px;display:grid;place-items:center;background:var(--white);
  border-radius:6px;color:var(--ink-3);flex:none}
.att-doc svg{width:19px;height:19px}
.att-meta{min-width:0}
.att-meta b{display:block;font-size:.79rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-meta small{font-size:.72rem;color:var(--ink-3)}
.att-x{position:absolute;top:5px;right:5px;width:19px;height:19px;border:0;border-radius:50%;
  background:var(--ink-surface);color:var(--on-dark);display:grid;place-items:center;padding:0}
.att-x svg{width:10px;height:10px}

.att-view{margin-top:9px}
.att-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;max-width:420px}
.att-shots.one{grid-template-columns:1fr;max-width:300px}
.att-shots img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;border:1px solid var(--line-soft)}
.att-chip{display:inline-flex;align-items:center;gap:8px;margin-top:7px;padding:7px 12px;
  background:var(--sand);border:1px solid var(--line-soft);border-radius:999px;font-size:.82rem;font-weight:600}
.att-chip svg{width:15px;height:15px;color:var(--ink-3)}
.att-chip small{color:var(--ink-3);font-weight:500}

/* Upload state.
   A file that is still on its way up must not look the same as one that is
   safely on the server — that is the whole difference between "your photo is
   posted" and "your photo is in this browser and nowhere else". */
.att-item{padding-right:52px}
.att-state{position:absolute;bottom:5px;right:5px;width:17px;height:17px;
  display:grid;place-items:center;border-radius:50%}
.att-state svg{width:10px;height:10px}
.att-state.is-ok{background:var(--jade,#1f7a5a);color:#fff}
.att-state.is-bad{background:var(--red);color:#fff}
.att-state.is-up{background:transparent}
.att-spin{width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--gold-deep);
  border-radius:50%;animation:att-spin .7s linear infinite}
@keyframes att-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.att-spin{animation-duration:2.4s}}
.att-item.state-uploading{opacity:.62}
.att-item.state-uploading img{filter:grayscale(.5)}
/* Chosen but not sent. Full colour — there is nothing wrong with it — but no
   tick, because a tick would claim the server has it and the server has not
   been asked yet. */
.att-item.state-chosen{padding-right:30px}
.att-item.state-failed{border-color:var(--red)}
.att-item.state-failed .att-meta small{color:var(--red)}
.att-btn[disabled]{opacity:.5;cursor:not-allowed}
.att-flag{font-weight:600}

/* Chat and forum images share the grid above; inside a chat bubble they need
   to stay small enough that one photograph does not push the conversation
   off the screen. */
.msg .att-shots{max-width:300px}
.msg .att-shots.one{max-width:230px}

/* ==========================================================================
   Rules pages
   ========================================================================== */
.rules-intro{background:var(--sand);border-left:3px solid var(--gold);padding:18px 22px;
  border-radius:0 var(--radius) var(--radius) 0;font-size:.98rem;color:var(--ink-2);margin-bottom:30px}
.rule-group{margin-bottom:32px}
.rule-group > h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-deep);
  font-family:var(--sans);font-weight:700;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.rule-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:860px){.rule-list{grid-template-columns:1fr}}
.rule{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-s);position:relative;padding-left:52px}
.rule::before{content:'';position:absolute;left:20px;top:22px;width:16px;height:16px;border-radius:5px;
  background:var(--jade-soft);border:2px solid var(--jade)}
.rule-group.warn .rule::before{background:var(--red-soft);border-color:var(--red)}
.rule-group.core .rule::before{background:var(--gold-soft);border-color:var(--gold-deep)}
.rule h4{font-size:.98rem;margin-bottom:.35em}
.rule p{font-size:.89rem;color:var(--ink-2);margin:0}
.rules-enforce{background:var(--ink-surface);color:rgba(255,255,255,.9);padding:26px 28px;
  border-radius:var(--radius-l);font-size:.93rem;line-height:1.7}
.rules-enforce h3{color:#fff;font-size:1.1rem;margin-bottom:.5em}

/* ==========================================================================
   Listing composer
   ========================================================================== */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.cmp-grid .full{grid-column:1/-1}
@media(max-width:620px){.cmp-grid{grid-template-columns:1fr}}
.price-row{display:flex;gap:9px}
.price-row select{flex:none;width:96px}
.cmp-preview{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.cmp-preview > h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--gold-deep);margin-bottom:12px}
.cmp-preview .listing{max-width:280px}
.listing.mine{border-color:var(--jade);box-shadow:0 0 0 1px var(--jade-soft),var(--shadow-s)}
.mine-flag{position:absolute;top:11px;left:11px;z-index:3;background:var(--jade);color:#fff;
  padding:4px 9px;border-radius:999px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

.empty-state{text-align:center;padding:56px 24px;color:var(--ink-3);background:var(--sand);
  border:1px dashed var(--line);border-radius:var(--radius-l)}
/* ==========================================================================
   Reporting
   ========================================================================== */
.report-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-soft);
  background:transparent;color:var(--ink-3);padding:5px 11px;border-radius:999px;
  font-size:.76rem;font-weight:600;transition:.15s;flex:none}
.report-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.report-btn svg{width:13px;height:13px}
.report-btn.icon-only{padding:6px;border-radius:50%}
.msg-tools{margin-top:6px;opacity:0;transition:.15s}
.msg:hover .msg-tools{opacity:1}
.thread-meta .report-btn{margin-left:auto}
.listing .report-btn,.thread .report-btn{margin-left:auto}
.report-target{background:var(--sand);border-left:3px solid var(--gold);border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:12px 15px;margin-bottom:18px}
.report-target span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);font-weight:700;margin-bottom:3px}
.report-target b{font-size:.95rem}
.report-target small{display:block;color:var(--ink-3);font-size:.82rem;margin-top:2px}

/* ==========================================================================
   Beta notice
   ========================================================================== */
.beta-note{display:flex;gap:16px;align-items:flex-start;background:var(--gold-soft);
  border:1px solid #E7D6A8;border-radius:var(--radius);padding:16px 20px;margin-bottom:26px}
[data-theme="dark"] .beta-note{border-color:#4A3F22}
.beta-note .beta-chip{flex:none;background:var(--gold-deep);color:#fff;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;padding:4px 10px;border-radius:999px;margin-top:2px}
[data-theme="dark"] .beta-note .beta-chip{color:#1A1608}
.beta-note b{display:block;font-size:.95rem;margin-bottom:3px;color:var(--ink)}
.beta-note p{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.6}
.beta-note a{color:var(--red);font-weight:650;text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:32px;box-shadow:var(--shadow-s);max-width:560px}
.contact-name{font-family:var(--serif);font-size:1.7rem;margin:0 0 2px}
.contact-role{color:var(--ink-3);font-size:.9rem;margin:0 0 24px}
.contact-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft)}
.contact-row .ci{width:40px;height:40px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);
  display:grid;place-items:center;flex:none}
.contact-row .ci svg{width:19px;height:19px}
.contact-row .cv{min-width:0;flex:1}
.contact-row .cv span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);font-weight:700}
.contact-row .cv a{font-size:1.02rem;font-weight:600;color:var(--ink);word-break:break-all}
.contact-row .cv a:hover{color:var(--red)}
.contact-reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
@media(max-width:800px){.contact-reasons{grid-template-columns:1fr}}

.dark-panel{background:var(--ink-surface);color:var(--on-dark)}
.dark-panel h2,.dark-panel h3{color:var(--on-dark)}
.dark-panel p{color:var(--on-dark-soft)}

.empty-state b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--ink-2);margin-bottom:6px}

/* ---------------------------------------------------- auth feedback -- */
/* Every sign-in outcome the server reports is shown here. Nothing in the
   auth flow silently succeeds or silently fails. */
.auth-note{
  border-radius:10px;padding:10px 12px;margin:0 0 14px;
  font-size:.83rem;line-height:1.45;border:1px solid transparent
}
.auth-note.info{background:rgba(15,110,92,.08);border-color:rgba(15,110,92,.25);color:var(--ink-2)}
.auth-note.good{background:rgba(15,110,92,.12);border-color:rgba(15,110,92,.35);color:#0B5346}
.auth-note.bad {background:rgba(163,45,52,.10);border-color:rgba(163,45,52,.32);color:#8C2229}
.auth-note a{color:inherit;font-weight:700;text-decoration:underline}
[data-theme="dark"] .auth-note{color:var(--ink-1)}
[data-theme="dark"] .auth-note.good{background:rgba(46,180,150,.16);border-color:rgba(46,180,150,.4);color:#7EE8CD}
[data-theme="dark"] .auth-note.bad {background:rgba(232,90,98,.16);border-color:rgba(232,90,98,.4);color:#FFAAAF}

.field-hint{font-size:.74rem;color:var(--ink-3);margin:-8px 0 12px}

.btn-link{
  background:none;border:none;color:var(--teal);font-weight:600;
  font-size:.83rem;cursor:pointer;text-decoration:underline;padding:4px
}
.btn-link:hover{opacity:.75}

/* ------------------------------------------------ community, live -- */
.loading-box{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:38px 20px;color:var(--ink-3);font-size:.9rem
}
.spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--teal);
  animation:sbg-spin .7s linear infinite;display:inline-block
}
@keyframes sbg-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.5s} }

.empty-state.error{border-color:rgba(163,45,52,.3);background:rgba(163,45,52,.06)}
[data-theme="dark"] .empty-state.error{background:rgba(232,90,98,.12);border-color:rgba(232,90,98,.35)}

.chat-empty{color:var(--ink-3);font-size:.9rem;text-align:center;padding:24px}

.chat-compose.locked{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:14px 16px
}
.chat-compose.locked p{margin:0;color:var(--ink-3);font-size:.88rem}

.msg-tools{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
.msg-tool{
  background:none;border:0;padding:2px 6px;border-radius:6px;cursor:pointer;
  font-size:.72rem;font-weight:600;color:var(--ink-3)
}
.msg-tool:hover{background:var(--line);color:var(--ink-1)}
.msg-tool:disabled{opacity:.4;cursor:default}
.edited{font-size:.68rem;color:var(--ink-3);font-style:normal;opacity:.8}

.hub-head{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;margin-bottom:22px
}
.hub-head h2{margin:0 0 4px;font-size:1.5rem}
.hub-head p{margin:0;color:var(--ink-3);font-size:.92rem}

.thread-list{display:flex;flex-direction:column;gap:12px}
.thread-main h3 a{color:inherit;text-decoration:none}
.thread-main h3 a:hover{color:var(--teal)}
.thread-excerpt{font-size:.9rem;color:var(--ink-2);margin:0 0 10px}

.thread-full{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-bottom:26px
}
.thread-full h2{margin:10px 0 8px;font-size:1.45rem;line-height:1.25}
.thread-body{margin-top:16px;line-height:1.65;white-space:normal;overflow-wrap:anywhere}
.thread-owner-tools{display:flex;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

.replies-title{font-size:1.05rem;margin:0 0 14px}
.reply-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.reply{display:flex;gap:11px;align-items:flex-start}
.reply-main{
  flex:1;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;min-width:0
}
.reply-text{margin-top:4px;line-height:1.6;overflow-wrap:anywhere}

.reply-box{
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px
}
.reply-box label{display:block;font-size:.8rem;font-weight:700;margin-bottom:6px}
.reply-box textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.92rem;resize:vertical;background:var(--bg);color:var(--ink-1)
}
.reply-box .btn{margin-top:10px}
.reply-box.locked{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.reply-box.locked p{margin:0;color:var(--ink-3);font-size:.88rem}

.news-list{display:flex;flex-direction:column;gap:18px}
.news-item{
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px
}
.news-item h3{margin:0 0 6px;font-size:1.15rem}

/* The chat header states which mode it is actually in, never guessing. */
.live-note.live::before{content:'●';color:var(--jade,#0F6E5C);margin-right:5px;font-size:.7em}
.live-note.polling::before{content:'●';color:var(--gold,#C8A44D);margin-right:5px;font-size:.7em}
.live-note.polling{opacity:.85}

/* ==========================================================================
   Messages from the moderators
   ========================================================================== */
.notice-pill{position:relative;padding:8px 11px}
.notice-dot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  background:var(--red);color:#fff;border-radius:999px;font-size:.66rem;font-weight:700;
  display:grid;place-items:center;line-height:1}
.notice-item{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.notice-item:last-child{border-bottom:0}
/* Unread is marked, not shouted: these are not good news and a red wash on
   every one of them would be punitive to read. */
.notice-item.unread{border-left:3px solid var(--gold);padding-left:12px;margin-left:-12px}
.notice-body{font-size:.92rem;line-height:1.5}
.notice-reason{margin-top:6px;font-size:.86rem;color:var(--ink-2);
  background:var(--sand);border-radius:6px;padding:8px 10px}
.notice-when{margin-top:6px;font-size:.75rem;color:var(--ink-3)}

/* ---- marketplace, stage 7 ---------------------------------------------
   The closed notice is styled as information, not as an error. The
   marketplace is not broken and should not look it. */
.mk-closed{max-width:44ch;margin-inline:auto}
.mk-closed p{margin-top:10px;font-size:.88rem;line-height:1.6;color:var(--ink-2)}
.listing.sold{opacity:.72}
.sold-flag{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink-1,#222);color:#fff;
  border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:700;letter-spacing:.02em}
.listing-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.listing-actions .danger{color:var(--red)}
.mk-sold-toggle{display:inline-flex;align-items:center;gap:8px;margin:-10px 0 20px;
  font-size:.82rem;color:var(--ink-3)}
.mk-inbox-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;
  padding:12px 16px;border-radius:var(--radius);background:var(--sand);
  border:1px solid var(--line-soft);font-size:.88rem}
.enq{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.enq:last-child{border-bottom:0}
.enq.unread{border-left:3px solid var(--red);padding-left:12px}
.enq-head{display:flex;justify-content:space-between;gap:12px;font-size:.86rem}
.enq-head span{color:var(--ink-3);font-size:.78rem;text-align:right}
.enq p{margin:8px 0 6px;font-size:.9rem;line-height:1.55;white-space:pre-wrap}
.enq-foot{font-size:.76rem;color:var(--ink-3)}

/* Exchange rate and weather provenance. Both say where the number came from
   and how old it is, because a figure with no date cannot be told apart from
   one that stopped updating weeks ago. */
.rate-box{background:var(--sand);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 18px}
.rate-now b{display:block;font-family:var(--serif);font-size:1.35rem}
.rate-now span{display:block;margin-top:4px;font-size:.78rem;color:var(--ink-3)}
.rate-now.none b{font-size:1rem;color:var(--ink-2)}
.rate-now.none span{margin-top:6px;font-size:.83rem;line-height:1.5}
/* Only rendered once the fixed rate has drifted past the threshold, so it is
   deliberately loud — it is the one thing standing between a fixed rate and a
   quietly wrong one. */
.rate-drift{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:.83rem;line-height:1.5;color:var(--warn,#8a5a00)}
.wx-note{margin-top:14px;font-size:.78rem;color:var(--ink-3)}

/* ==========================================================================
   AFFILIATE BUTTONS  (rendered only by SBG_aff() in data-affiliates.js)

   Two states, and the difference between them has to be obvious at a
   glance: a live link is a button you press, an empty slot is a flat chip
   you cannot. A "Coming soon" that looks pressable is a promise the page
   cannot keep.
   ========================================================================== */
.aff-btn{text-decoration:none}

.aff-chip{display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  font-family:var(--sans);font-size:.78rem;font-weight:650;letter-spacing:.02em;
  background:var(--sand-2);color:var(--ink-3);border:1px dashed var(--line);
  cursor:default;user-select:none}
.aff-soon::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--ink-3);opacity:.45}

/* Required by EU consumer law to be apparent, not buried in the Terms.
   Small, but never hidden — no display:none, no collapsing into a
   tooltip. */
.aff-note{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:.78rem;line-height:1.55;color:var(--ink-3)}

/* 18+ marker. A label, not a gate — it tells an adult what they are
   looking at, it does not stop anyone reading the page. */
.aff-adults{display:inline-flex;align-items:center;
  padding:3px 9px;margin-left:8px;border-radius:999px;
  font-family:var(--sans);font-size:.7rem;font-weight:750;letter-spacing:.06em;
  background:var(--red-soft);color:var(--red);border:1px solid #EFCFCD}
.aff-adults-note{margin-top:6px;font-size:.79rem;line-height:1.5;color:var(--ink-3)}

/* ==========================================================================
   CLOSED HUBS  (Community, Marketplace)

   Both are built and tested; both are shut at the DATABASE level until
   they can be moderated and, for the marketplace, until the legal advice
   is back. They stay visible and reachable — hiding them would strand
   anyone who bookmarked the page — but they must never look open.
   ========================================================================== */
.soon-chip{display:inline-block;margin-left:9px;padding:2px 9px;border-radius:999px;
  font-family:var(--sans);font-size:.62rem;font-weight:750;letter-spacing:.08em;
  text-transform:uppercase;vertical-align:middle;
  background:var(--sand-2);color:var(--ink-3);border:1px solid var(--line)}

.hub-soon{opacity:.72}
.hub-soon:hover{opacity:1}

.nav-soon{position:relative}
.nav-soon::after{content:'';display:inline-block;width:5px;height:5px;
  margin-left:5px;border-radius:50%;background:var(--ink-3);opacity:.5;
  vertical-align:middle}

/* The closed-hub page itself. */
.soon-panel{max-width:660px;margin:0 auto;text-align:center;
  padding:44px 30px;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-s)}
.soon-panel h2{margin:0 0 10px}
.soon-panel > p{color:var(--ink-2);margin:0 auto 22px;max-width:52ch}
.soon-why{text-align:left;background:var(--cream);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:18px 20px;margin:0 0 20px}
.soon-why b{display:block;margin-bottom:7px;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--gold-deep);font-family:var(--sans)}
.soon-why p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.65}

/* Says the gate is on the server, not in the browser. Worth stating: a
   member who opens the console will find no flag to flip, and should not
   waste an evening looking for one. */
.soon-server{font-size:.82rem;color:var(--ink-3);line-height:1.55;
  padding-top:14px;margin-top:4px;border-top:1px solid var(--line-soft)}

/* ------------------------------------------------------- Router / hub -- */
/* The Travel Hub's section strip. Deliberately <a> and not <button>: the
   old tabs could not be copied, middle-clicked or opened in a new tab, and
   Back skipped the whole page. */
.rt-tabs{display:flex;gap:6px;overflow-x:auto;padding:6px;margin-bottom:28px;
  background:var(--sand);border-radius:999px;border:1px solid var(--line-soft);scrollbar-width:none}
.rt-tabs::-webkit-scrollbar{display:none}
.rt-tabs a{padding:9px 18px;border-radius:999px;font-size:.88rem;font-weight:600;
  color:var(--ink-2);white-space:nowrap;transition:.16s;text-decoration:none}
.rt-tabs a:hover{color:var(--ink);background:rgba(255,255,255,.5)}
.rt-tabs a.active{background:var(--white);color:var(--red);box-shadow:var(--shadow-s)}

.rt-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:16px;
  font-size:.78rem;color:var(--ink-3)}
.rt-crumbs a{color:var(--ink-3);text-decoration:none}
.rt-crumbs a:hover{color:var(--gold-deep);text-decoration:underline}
.rt-crumbs [aria-current]{color:var(--ink-2);font-weight:600}
.rt-sep{opacity:.5}

#travel-body:focus{outline:none}

/* Section index cards. */
.rt-cards{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.rt-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rt-cards{grid-template-columns:1fr}}
.rt-card{display:flex;flex-direction:column;gap:7px;padding:20px 22px;text-decoration:none;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-s);transition:.18s;color:inherit}
a.rt-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--gold)}
.rt-card h3{font-size:1.03rem;margin:0}
.rt-card p{font-size:.87rem;color:var(--ink-2);margin:0;flex:1}
.rt-card-go{font-size:.8rem;font-weight:700;color:var(--red)}
/* A sub-page that is not written yet is inert on purpose. A card you can
   click that then tells you there is nothing there is worse than one that
   says so before you click. */
.rt-card-prep{opacity:.62;box-shadow:none;background:var(--cream)}
.rt-card-mark{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--ink-3)}

/* "Not written yet" — distinct from aff.soon (written, needs a partner
   URL) and from .soon-panel (built and tested, shut on the server). */
.rt-prep{max-width:620px;margin:0 auto;text-align:center;padding:44px 30px;
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-s)}
.rt-prep h2{margin:10px 0}
.rt-prep-chip{display:inline-block;padding:3px 12px;border-radius:999px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:var(--sand);color:var(--ink-3);border:1px solid var(--line-soft)}
.rt-prep-what{color:var(--ink-2);margin:0 auto 18px;max-width:48ch}
.rt-prep-note{font-size:.83rem;color:var(--ink-3);line-height:1.6;max-width:48ch;
  margin:0 auto 22px;padding-top:14px;border-top:1px solid var(--line-soft)}

.rt-note{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:.82rem;color:var(--ink-3);line-height:1.6}

/* An unmatched path says so, names the path, and offers the sections. It
   does not quietly redirect to the home section: a bookmark that lands
   somewhere else without saying so is how people decide a site lost their
   page. */
.rt-404{max-width:620px;margin:0 auto;text-align:center;padding:44px 30px;
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-s)}
.rt-404 h2{margin:0 0 10px}
.rt-404 > p{color:var(--ink-2);margin:0 auto 16px;max-width:48ch}
.rt-404-path code{font-size:.84rem;background:var(--sand);padding:4px 10px;
  border-radius:7px;color:var(--ink-2)}
.rt-404-lead{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--gold-deep);margin:26px 0 10px}
.rt-404-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;
  gap:8px;justify-content:center}
.rt-404-list a{display:inline-block;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);font-size:.83rem;font-weight:600;
  color:var(--ink-2);text-decoration:none}
.rt-404-list a:hover{border-color:var(--gold);color:var(--gold-deep)}

/* ------------------------------------------- Travel Hub sub-pages (T-13+) */
.rt-sub{font-size:.88rem;color:var(--ink-3);margin:-8px 0 16px}
.rt-city{font-family:var(--serif);font-size:1.32rem;margin:34px 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.rt-city:first-of-type{margin-top:0}

/* A row: description on the left, hard facts in the middle, one action on
   the right. Used by Flight routes, SIM and the ride-hailing blocks. */
.rt-rows{display:flex;flex-direction:column;gap:12px}
.rt-row{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;
  padding:18px 22px;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-s)}
.rt-row-main h3{font-size:1.02rem;margin:0 0 3px}
.rt-row-main p{font-size:.87rem;color:var(--ink-2);margin:0}
.rt-row-sub{font-size:.79rem;color:var(--gold-deep);font-weight:700;margin:0 0 5px !important}
.rt-row-facts{display:flex;gap:18px;align-items:center;white-space:nowrap}
.rt-row-facts span{font-size:.78rem;color:var(--ink-3);text-align:center}
.rt-row-facts b{display:block;font-family:var(--serif);font-size:1.22rem;color:var(--ink)}
.rt-row-code{font-family:var(--mono,monospace);font-size:.74rem;letter-spacing:.08em;
  padding:4px 9px;border-radius:6px;background:var(--sand);color:var(--ink-2)}
.rt-info-mark{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--jade);border:1px solid var(--jade-soft);
  padding:3px 9px;border-radius:999px;background:var(--jade-soft)}
@media(max-width:820px){
  .rt-row{grid-template-columns:1fr;gap:12px}
  .rt-row-facts{justify-content:flex-start}
}

/* The hotel grid and the Getting Around index both use .tile now — the same
   card as the destinations grid on thailand.html, the festival grid and the
   home page. The .rt-hotel / .rt-cards-4 / .rt-guide-art rules that used to
   be here are DELETED, not commented out: a lookalike card left in the
   stylesheet is how a site ends up with four nearly-identical components
   drifting apart one tweak at a time.

   .rt-guide-art in particular was a 21/8 banner that, with no photograph on
   disk, rendered as a wide band of flat gradient above every Getting Around
   guide — a screenful of nothing before the first sentence. */

/* A long-form guide page: Getting Around's eight. */
.rt-guide{font-size:.95rem;color:var(--ink-2);line-height:1.72;max-width:70ch}
.rt-guide p{margin:0 0 14px}
.rt-guide ul{padding-left:20px;margin:0 0 16px}
.rt-guide li{margin-bottom:7px}
.rt-guide b{color:var(--ink)}

.rt-crosslink{margin-top:26px;padding:20px 22px;background:var(--cream);
  border:1px solid var(--line-soft);border-radius:var(--radius)}
.rt-crosslink b{display:block;font-family:var(--serif);font-size:1.06rem;
  color:var(--ink);margin-bottom:6px}
.rt-crosslink p{font-size:.88rem;color:var(--ink-2);margin:0 0 14px}

/* The seven-day strip inside a weather card (T-18). Renders however many
   days the feed carries; the card simply gets shorter if it carries fewer. */
.wx-days{display:flex;gap:2px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:2;
  overflow-x:auto;scrollbar-width:none}
.wx-days::-webkit-scrollbar{display:none}
.wx-day{display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:1 0 auto;min-width:38px;font-size:.7rem}
.wx-day-name{opacity:.7;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.wx-day-hi{font-weight:700;font-size:.84rem}
.wx-day-lo{opacity:.6}
.wx-day-rain{opacity:.75;font-size:.66rem;min-height:.9em;color:#9FD3F0}

/* The 18+ marker (F8). On the card, in both languages, never a footnote.
   To be clear about what it is: a LABEL, not an age gate. It tells an adult
   what they are looking at; it does not stop a 15-year-old reading the page.
   A real gate would need an interstitial and a stored acknowledgement. */
.chip.aff-adults{font-weight:800;letter-spacing:.04em}
.rt-adult-note{font-size:.76rem;color:var(--ink-3);line-height:1.5}

/* ------------------------------------------- What's Happening (T-26) ---- */
.wo-when{font-size:.79rem;color:var(--gold-deep);font-weight:700;margin:-4px 0 8px}
/* An approximate date must LOOK approximate. The word "around" carries the
   meaning; this makes it visible at a glance in a grid of twenty. */
.wo-when.wo-approx{color:var(--ink-3);font-weight:600}
.wo-approx-mark{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--sand);border:1px solid var(--line-soft);color:var(--ink-3);
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  vertical-align:middle}
/* Happening next sits on its own row and is allowed to be wider. */
.tile-next{grid-column:span 2}
@media(max-width:900px){.tile-next{grid-column:auto}}

/* Feedback in the moderation dashboard (T-36). */
.fb-scores{display:flex;flex-wrap:wrap;gap:18px;margin:10px 0;font-size:.82rem;color:var(--ink-3)}
.fb-scores b{color:var(--ink);font-family:var(--serif);font-size:1.05rem}


/* ==========================================================================
   IS THIS CLICKABLE?  —  affordance that does not depend on hover

   Michael's friend could not tell what was tappable. He was right, and the
   cause was not subtlety, it was the mechanism:

     1. EVERY signal was a :hover state. A phone has no hover. On a touch
        screen the Travel Hub gave literally no indication of what was a
        link until you tapped one and found out.
     2. `.tile:hover` lifted EVERY tile — including the hotel cards and the
        Things To Do entries, which are not links at all. So on a desktop
        the one signal that existed was actively wrong: it promised a click
        on cards that do nothing.

   The fix is a mark that is visible when nothing is happening. Every card
   that IS a link now carries a small arrow in its corner, always drawn,
   and cards that are not links carry nothing and no longer lift.

   The arrow is a background image with no text, so it needs no translation
   and cannot go stale in one language. It is aria-hidden by construction —
   a decorative pseudo-element is not in the accessibility tree — and the
   link's own text is what a screen reader announces.
   ========================================================================== */

a.tile,a.rt-card{cursor:pointer}

/* The mark itself. Drawn on the card, not on hover. */
a.tile::after,a.rt-card::after{
  content:'';
  position:absolute;right:12px;bottom:12px;
  width:30px;height:30px;border-radius:50%;
  background-color:var(--red);
  background-repeat:no-repeat;background-position:center;background-size:15px 15px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
  box-shadow:0 2px 8px rgba(163,45,52,.34);
  transition:transform .16s ease;
  pointer-events:none;
}
a.tile,a.rt-card{position:relative}
a.tile:hover::after,a.rt-card:hover::after{transform:translateX(3px)}

/* TOUCH FEEDBACK. Without this a tap on a phone looks like nothing
   happened until the next page paints, which on a slow connection is long
   enough to make people tap again. */
a.tile:active,a.rt-card:active{transform:scale(.985)}
.rt-tabs a:active,.btn:active,.chip-btn:active{transform:scale(.97)}

/* The section strip: the current section is filled, the others are plainly
   tappable rather than relying on a hover that will never come. */
.rt-tabs a:not(.active){background:rgba(255,255,255,.55);border:1px solid var(--line-soft)}

/* An accordion is a control too, and its only cue was a small + on the
   right. Make the whole row read as pressable. */
.acc summary{cursor:pointer}
.acc summary::after{font-weight:700;color:var(--gold-deep)}
.acc summary:active{background:var(--sand)}

/* Cards that are NOT links must not imitate one: no lift, no arrow, and a
   cursor that says so. Stated explicitly rather than left as the absence
   of a rule, because the absence is what went wrong the first time. */
article.tile{cursor:default}
article.tile::after{content:none}

/* The one exception worth naming: a hotel card is not a link, but the
   button inside it is. The button carries its own affordance. */
.rt-card-prep{cursor:default}
.rt-card-prep::after{content:none}

@media (hover:none){
  /* Belt and braces on touch devices: nothing should depend on hover here,
     but if a rule is ever added that does, this keeps the arrow steady. */
  a.tile:hover::after,a.rt-card:hover::after{transform:none}
}