:root {
  --ink: #1c1c1e;
  --muted: #6b6b6b;
  --accent: #a8432c;
  --bg: #fafaf8;
  --border: #e7e4dc;
  --surface: #ffffff;
}

/* Self-hosted, Latin/Latin-Extended/Cyrillic subset webfonts - one small
   woff2 per script per weight, loaded lazily by the browser only when a
   template's CSS actually applies that font to visible text (unicode-range
   makes the browser skip fetching a script's file unless matching characters
   are present, so a Latin-only menu never pulls the Cyrillic slice, and no
   third-party font host is on the request path). One family per template
   keeps the five personas typographically distinct instead of all quietly
   defaulting to system UI fonts. */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/lora-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/lora-500-normal-latin-ext.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;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/lora-500-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lora-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lora-700-normal-latin-ext.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;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lora-700-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/lora-600-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/lora-600-italic-latin-ext.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;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/lora-600-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/oswald-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/oswald-700-normal-latin-ext.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;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/oswald-700-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/sourceserif4-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/sourceserif4-500-normal-latin-ext.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;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/sourceserif4-500-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfairdisplay-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfairdisplay-700-normal-latin-ext.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;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfairdisplay-700-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comfortaa-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comfortaa-700-normal-latin-ext.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;
}
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comfortaa-700-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Self-hosted subsets for the five Menu Concepts templates (Ember, Bela,
   Dimnik, Tri Lipi, Boza Boom) - same per-script splitting rationale as the
   font-faces above: no third-party font host on the request path, and the
   browser only fetches a script's file when matching characters are present.
   Bodoni Moda / Instrument Serif / Instrument Sans / Anton / Archivo /
   DM Serif Display / Newsreader / Bagel Fat One have no Cyrillic subset on
   Google Fonts at all - Macedonian text in those falls back to the next font
   in the stack, same graceful-fallback shape as every other font here. */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bodonimoda-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bodonimoda-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bodonimoda-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bodonimoda-400-italic-latin-ext.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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-400-normal-latin-ext.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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-400-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-500-normal-latin-ext.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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-500-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrumentserif-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrumentserif-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrumentserif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrumentserif-400-italic-latin-ext.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;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrumentsans-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrumentsans-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/instrumentsans-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/instrumentsans-500-normal-latin-ext.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;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivo-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivo-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/archivo-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/archivo-700-normal-latin-ext.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;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dmserifdisplay-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dmserifdisplay-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/newsreader-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/newsreader-400-italic-latin-ext.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;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/newsreader-600-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/newsreader-600-normal-latin-ext.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibmplexmono-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibmplexmono-400-normal-latin-ext.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibmplexmono-400-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibmplexmono-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibmplexmono-500-normal-latin-ext.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;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibmplexmono-500-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bagel Fat One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bagelfatone-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bagel Fat One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bagelfatone-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/rubik-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/rubik-400-normal-latin-ext.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;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/rubik-400-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/rubik-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/rubik-700-normal-latin-ext.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;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/rubik-700-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/rubik-800-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/rubik-800-normal-latin-ext.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;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/rubik-800-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* {
  box-sizing: border-box;
}

/* The [hidden] attribute and an authored `display` value (grid/flex) have
   equal CSS specificity, and author styles beat the UA default at a tie -
   so category-nav.js's `el.hidden = true` would silently do nothing on any
   element (like .t2-grid/.t4-grid) that also sets its own display. This
   forces [hidden] to always win, everywhere. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

h1, h2 {
  font-weight: 700;
}

/* Home placeholder */
.placeholder {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

/* Branded placeholder - shown when a domain has no live menu yet */
.brand-placeholder {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--ink);
}

.brand-placeholder-logo {
  width: 4.5rem;
  height: auto;
}

.brand-placeholder-tagline {
  margin: 0;
  color: #fff;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

/* Shared behaviour floor for all menu templates: keyboard focus rings, tap
   feedback on anything interactive, and smooth scrolling for each template's
   own sticky category nav (anchor links to an in-page #t{n}-cat-{id}) - the
   page itself scrolls (no inner overflow:auto container), so this belongs on
   the root element, not any .t1-.t5 container. Defined once so every
   template's section below only has to describe what makes it look
   different, not re-derive how navigation feels. */
html {
  scroll-behavior: smooth;
}

/* These are single-column phone menus by design, at every viewport - on a
   wide desktop monitor the template's own background should still fill the
   full browser width edge-to-edge, with only the content itself sitting in a
   centred phone-width column on top of it. So the constraint goes on an
   inner ".menu-shell" wrapper that each template renders around all of its
   content (header, nav, categories, cards), not on the outer .t1-.t5 element
   itself - that outer element stays full-width and is where each template's
   own background colour/image lives. */
.t1, .t2, .t3, .t4, .t5 {
  width: 100%;
}

.menu-shell {
  max-width: 30rem;
  margin: 0 auto;
}

.t1 a:focus-visible, .t1 button:focus-visible,
.t2 a:focus-visible, .t2 button:focus-visible,
.t3 a:focus-visible, .t3 button:focus-visible,
.t4 a:focus-visible, .t4 button:focus-visible,
.t5 a:focus-visible, .t5 button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.t1 a, .t1 button, .t2 a, .t2 button, .t3 a, .t3 button, .t4 a, .t4 button, .t5 a, .t5 button {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .t1 *, .t2 *, .t3 *, .t4 *, .t5 * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   Template 1 - "Ember": a wood-fire grill and late-night cocktail bar.
   Candlelit dark ground, oversized italic display serif, and an ember-orange
   accent rule. Photographed dishes get a wide cinematic frame; items with no
   photo sit as a quiet text row marked by a monogram circle instead of a gap.
   ========================================================================== */
.t1 {
  --t1-bg: #0e0d0c;
  --t1-ink: #f2ede4;
  --t1-muted: #9a948b;
  --t1-line: #221f1c;
  --t1-accent: oklch(0.7 0.17 45);
  background: var(--t1-bg);
  color: var(--t1-ink);
  min-height: 100vh;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}

.t1-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(14, 13, 12, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--t1-line);
}

.t1-kicker {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t1-muted);
}

.t1-langs {
  display: flex;
  gap: 0.9rem;
}

.t1-lang-btn {
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 0.35rem 0;
  cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--t1-muted);
}

.t1-lang-btn.active {
  color: var(--t1-accent);
  border-bottom-color: var(--t1-accent);
}

.t1-masthead {
  padding: 3.25rem 1.25rem 2.5rem;
}

.t1-masthead h1 {
  margin: 0;
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.75rem, 13vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.t1-masthead::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  margin-top: 1.35rem;
  background: var(--t1-accent);
}

/* View A: category tiles, shown on load - tapping one hides this grid and
   reveals just that category's products (category-grid.js). Mirrors the
   photo/no-photo handling already used for products elsewhere: a real image
   when the category has one, otherwise a monogram tile instead of a gap. */
.t1-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0 1.25rem 3rem;
}

.t1-grid-card {
  display: block;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.t1-grid-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: #1d1a17;
}

.t1-grid-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t1-grid-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #1d1a17 0 10px, #171310 10px 20px);
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-style: italic;
  font-size: 3rem;
  color: var(--t1-accent);
}

.t1-grid-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.75rem 0.85rem 0.7rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
}

.t1-grid-label {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}

/* View B: one category's products. */
.t1-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  margin: 1.75rem 1.25rem 0.5rem;
  padding: 0.35rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t1-muted);
}

.t1-category {
  padding: 1.75rem 1.25rem 0.5rem;
}

.t1-category:last-child {
  padding-bottom: 3rem;
}

.t1-category-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.9rem;
}

.t1-category-num {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--t1-accent);
}

.t1-category h2 {
  margin: 0;
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-weight: 400;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.t1-product {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--t1-line);
}

.t1-photo {
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: #1d1a17;
}

.t1-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t1-row {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.t1-avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid #3a3530;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-style: italic;
  font-size: 1.375rem;
  color: var(--t1-accent);
}

.t1-body {
  flex: 1;
  min-width: 0;
}

.t1-name {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.t1-desc {
  margin: 0.45rem 0 0;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--t1-muted);
  overflow-wrap: break-word;
}

.t1-price {
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.9375rem;
  padding-top: 0.25rem;
  white-space: nowrap;
}

/* ==========================================================================
   Template 2 - "Bela": a morning cafe that pours natural wine. Linen, pale
   wood, centred serif type, lots of air. Items with no photo get a linen
   tile carrying an italic initial, so every row still lines up.
   ========================================================================== */
.t2 {
  --t2-bg: #fbfaf7;
  --t2-ink: #1f1d1a;
  --t2-muted: #6f6a62;
  --t2-line: #ece8e1;
  --t2-accent: oklch(0.48 0.06 150);
  background: var(--t2-bg);
  color: var(--t2-ink);
  min-height: 100vh;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}

.t2-langs {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  padding: 2.1rem 1.75rem 0;
}

.t2-lang-btn {
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 0.4rem 0.1rem;
  cursor: pointer;
  font-family: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: #7d776e;
}

.t2-lang-btn.active {
  color: var(--t2-ink);
  border-bottom-color: var(--t2-ink);
}

.t2-masthead {
  padding: 3rem 1.75rem 3.5rem;
  text-align: center;
}

.t2-masthead h1 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.75rem, 13vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.t2-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding: 1rem 1.1rem;
  background: rgba(251, 250, 247, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--t2-line);
}

.t2-nav a {
  text-decoration: none;
  font-family: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--t2-muted);
}

.t2-category {
  padding: 3.6rem 1.75rem 0;
  scroll-margin-top: 4rem;
}

.t2-category:last-child {
  padding-bottom: 3.5rem;
}

.t2-category-head {
  text-align: center;
  margin-bottom: 1.75rem;
}

.t2-category-num {
  display: block;
  font-family: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: #8a847b;
}

.t2-category h2 {
  margin: 0.4rem 0 0;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.25rem;
}

.t2-product {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding: 1.25rem 0;
  border-top: 1px solid var(--t2-line);
}

.t2-body {
  flex: 1;
  min-width: 0;
}

.t2-name {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.t2-desc {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--t2-muted);
  overflow-wrap: break-word;
}

.t2-price {
  margin-top: 0.55rem;
  font-family: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--t2-accent);
}

.t2-tile {
  flex: none;
  width: 4.75rem;
  height: 5.75rem;
  border-radius: 3px;
  overflow: hidden;
  background: #f2eee7;
}

.t2-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t2-tile-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.1rem;
  color: #b2aa9d;
}

/* ==========================================================================
   Template 3 - "Dimnik": a smash-burger and grill spot where the food sells
   itself. Photographed items are full-bleed posters with a stamped price;
   items with no photo drop into a tight black two-column grid, so a missing
   photo looks like a deliberate design choice, not an omission.
   ========================================================================== */
.t3 {
  --t3-bg: #efece6;
  --t3-ink: #111111;
  --t3-accent: #f2c230;
  background: var(--t3-bg);
  color: var(--t3-ink);
  min-height: 100vh;
  font-family: "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
}

.t3-hero {
  position: relative;
  padding: 3.6rem 1.15rem 1.6rem;
  background: linear-gradient(155deg, #3b2e24, #2a2017);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.t3-langs {
  align-self: flex-end;
  display: flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
}

.t3-lang-btn {
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  background: none;
  color: #fff;
  font-family: "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.t3-lang-btn.active {
  background: var(--t3-accent);
  color: #111;
}

.t3-masthead h1 {
  margin: 0;
  font-family: "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(2.75rem, 15vw, 4.75rem);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: break-word;
}

.t3-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.125rem;
  padding: 0 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: #111;
}

.t3-nav a {
  flex: none;
  white-space: nowrap;
  padding: 0.95rem 0.75rem;
  text-decoration: none;
  font-family: "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.t3-category {
  scroll-margin-top: 3.5rem;
}

.t3-category-head {
  padding: 2.5rem 1rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.t3-category-head h2 {
  margin: 0;
  font-family: "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 3.75rem;
  line-height: 0.88;
  text-transform: uppercase;
}

.t3-category-count {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding-bottom: 0.35rem;
}

.t3-posters {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.t3-poster {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #382b22;
}

.t3-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.t3-poster-price {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 1;
  background: var(--t3-accent);
  color: #111;
  padding: 0.5rem 0.75rem 0.4rem;
  font-family: "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.35rem;
  transform: rotate(3deg);
}

.t3-poster-body {
  position: relative;
  z-index: 1;
  padding: 5.5rem 1rem 1.25rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
}

.t3-poster-name {
  font-family: "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: break-word;
}

.t3-poster-desc {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #ece7dc;
  overflow-wrap: break-word;
}

.t3-plain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.t3-plain {
  background: #161616;
  min-height: 9.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.t3-plain-name {
  font-family: "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: anywhere;
}

.t3-plain-price {
  font-family: "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.35rem;
  color: var(--t3-accent);
}

/* ==========================================================================
   Template 4 - "Tri Lipi": an Old Bazaar kafana menu set like a broadsheet -
   Roman numerals, dot leaders, double rules. No photos, on purpose, so
   nothing can ever look missing.
   ========================================================================== */
.t4 {
  --t4-bg: #f3efe6;
  --t4-ink: #1b1813;
  --t4-muted: #5a5347;
  --t4-line: #d4ccbd;
  --t4-accent: #8c3a2a;
  background: var(--t4-bg);
  color: var(--t4-ink);
  min-height: 100vh;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}

.t4-langs {
  margin: 2rem 1.25rem 0;
  display: grid;
  grid-template-columns: repeat(var(--t4-lang-count, 4), minmax(0, 1fr));
  border: 1.5px solid var(--t4-ink);
}

.t4-lang-btn {
  border: none;
  border-right: 1px solid var(--t4-ink);
  cursor: pointer;
  padding: 0.65rem 0.15rem;
  background: none;
  color: var(--t4-ink);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t4-lang-btn:last-child {
  border-right: none;
}

.t4-lang-btn.active {
  background: var(--t4-ink);
  color: var(--t4-bg);
}

.t4-masthead {
  padding: 1.4rem 1.25rem 0;
  border-top: 4px solid var(--t4-ink);
}

.t4-masthead h1 {
  margin: 0;
  padding: 1.1rem 0 0.6rem;
  text-align: center;
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 12vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.t4-nav {
  padding: 1.35rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
}

.t4-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--t4-line);
  text-decoration: none;
  color: var(--t4-ink);
}

.t4-nav-roman {
  width: 2.1rem;
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  color: var(--t4-accent);
}

.t4-nav-name {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 1.1875rem;
}

.t4-nav-leader {
  flex: 1;
  border-bottom: 2px dotted #9a9181;
  transform: translateY(-5px);
}

.t4-nav-count {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--t4-muted);
}

.t4-category {
  padding: 2.75rem 1.25rem 0;
  scroll-margin-top: 1rem;
}

.t4-category-head {
  display: flex;
  align-items: flex-end;
  gap: 0.875rem;
  border-bottom: 3px solid var(--t4-ink);
  padding-bottom: 0.625rem;
  margin-bottom: 0.25rem;
}

.t4-category-roman {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  line-height: 0.78;
  color: var(--t4-accent);
}

.t4-category h2 {
  margin: 0;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.25rem;
}

.t4-product {
  padding: 0.9375rem 0;
  border-bottom: 1px solid var(--t4-line);
}

.t4-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.t4-name {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.t4-leader {
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted #9a9181;
  transform: translateY(-5px);
}

.t4-price {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.t4-desc {
  margin: 0.25rem 0 0;
  max-width: 86%;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--t4-muted);
  overflow-wrap: break-word;
}

.t4-footer-rule {
  margin: 3.5rem 1.25rem 0;
  border-top: 5px double var(--t4-ink);
  height: 3rem;
}

/* ==========================================================================
   Template 5 - "Boza Boom": a burek and smoothie bar for students and
   families. Every category gets its own loud colour, cards are tilted
   stickers, and items with no photo get a coloured blob with a big initial.
   ========================================================================== */
.t5 {
  --t5-ink: #1a1030;
  background: #ffd23f;
  color: var(--t5-ink);
  min-height: 100vh;
  font-family: "Rubik", -apple-system, "Segoe UI", system-ui, sans-serif;
}

.t5-hero {
  padding: 3.5rem 1.25rem 2.1rem;
}

.t5-langs {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.t5-lang-btn {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  border: 3px solid var(--t5-ink);
  box-shadow: 3px 3px 0 var(--t5-ink);
  cursor: pointer;
  background: #fff6e5;
  color: var(--t5-ink);
  font-family: "Rubik", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.8125rem;
}

.t5-lang-btn.active {
  background: #2b44ff;
  color: #fff;
}

.t5-masthead {
  margin-top: 2.1rem;
}

.t5-masthead h1 {
  margin: 0;
  transform: rotate(-3deg);
  font-family: "Bagel Fat One", "Baloo 2", cursive;
  font-weight: 400;
  font-size: clamp(2.5rem, 13vw, 4rem);
  line-height: 0.92;
  color: var(--t5-ink);
  text-shadow: 3px 3px 0 #ff5a36;
  overflow-wrap: break-word;
}

.t5-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--t5-ink);
}

.t5-nav a {
  flex: none;
  white-space: nowrap;
  border: 2.5px solid #fff6e5;
  border-radius: 999px;
  padding: 0.625rem 1rem;
  text-decoration: none;
  font-family: "Rubik", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
}

.t5-category {
  padding: 2.5rem 1rem 3rem;
  border-bottom: 3px solid var(--t5-ink);
  scroll-margin-top: 4rem;
}

.t5-category h2 {
  margin: 0 0 1.6rem;
  transform: rotate(-2deg);
  font-family: "Bagel Fat One", "Baloo 2", cursive;
  font-weight: 400;
  font-size: 3rem;
  line-height: 0.9;
  overflow-wrap: break-word;
}

.t5-products {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.t5-product {
  position: relative;
  background: #fff6e5;
  border: 3px solid var(--t5-ink);
  border-radius: 1.5rem;
  box-shadow: 5px 5px 0 var(--t5-ink);
  padding: 1rem 3.6rem 1rem 1rem;
  display: flex;
  gap: 0.875rem;
  align-items: center;
}

.t5-photo {
  flex: none;
  width: 5.625rem;
  height: 5.625rem;
  border: 3px solid var(--t5-ink);
  border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
  overflow: hidden;
}

.t5-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t5-blob {
  flex: none;
  width: 5.625rem;
  height: 5.625rem;
  border: 3px solid var(--t5-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bagel Fat One", "Baloo 2", cursive;
  font-size: 2.875rem;
  line-height: 1;
}

.t5-body {
  flex: 1;
  min-width: 0;
}

.t5-name {
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.t5-desc {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #4a3f5c;
  overflow-wrap: break-word;
}

.t5-price {
  position: absolute;
  top: -1rem;
  right: -0.5rem;
  width: 4.125rem;
  height: 4.125rem;
  border-radius: 50%;
  background: #ffd23f;
  border: 3px solid var(--t5-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(12deg);
  font-family: "Bagel Fat One", "Baloo 2", cursive;
  font-size: 1rem;
  text-align: center;
  line-height: 1.15;
  padding: 0 0.25rem;
}