/* Fat Tony's Menu: lunch, à la carte and drinks on one page of fattonys.fi, in the theme's own fonts (oskar-inline,
   oskar, freight-macro-pro from the site's Adobe kit) and colours. A guest chooses only the tab and the diets (Tony,
   8.11.2026: "simplicity is key"); the menu's section names are headings. The controls follow the site's others: tabs
   as the 3D page's menu, the diet filter as the theme's menu filters, the lunch days as the Katso page's days, actions
   as the theme's round-button. A text is never cut: a card shows the first ingredients whole, the card holds it all. */

.ftmn {
  --green: var(--color-green, #004235); --burgundy: var(--color-dark-red, #3b001c);
  --beige: var(--color-beige, #fff2e1); --ink: #1a1919;
  --hot: var(--color-primary-red, #d9232a); --theme: var(--green);
  --disp: var(--font-display, 'oskar-inline', sans-serif); --ui: var(--font-alt-body, 'oskar', sans-serif);
  --body: var(--font-body, 'freight-macro-pro', Georgia, serif);
  background: var(--beige); color: var(--theme); font-family: var(--body);
  padding: var(--ftmn-top, 104px) 0 90px; overflow-x: clip;
  /* at least a screen high: under a page's picture a link to a short tab (#lounas on a tablet) still brings the menu's
     top up under the header, and a short tab never makes the page jump */
  min-height: 100vh;
}
/* the food green and the drinks burgundy, as the paper menus (Alo, 9.11.2026; the brand's #004235 and #3b001c): the
   panels bring the Menu pages' own colours (#690000, #600000), which stay for the old menu pages */
.ftmn[data-tab='juomat'] { --theme: var(--burgundy); }
.ftmn-panel[data-panel='ruoka'] { --theme: var(--green) !important; }
.ftmn-panel[data-panel='juomat'] { --theme: var(--burgundy) !important; }
/* the site's header over the beige menu in the open tab's colour, as the theme's own menu pages set it to theirs (their
   :root --nav-color; an ordinary page keeps the white one meant for a dark top, nearly unseen here: live 9.11.2026):
   from the start where the menu is the page (the test page), else only while the menu is under the header (menu.js:
   ftmn-under), as over /ruoka/'s and /juomat/'s pictures the theme's white is the right one */
/* (and where the menu starts the page above a picture, /lounas/: from the first paint, till menu.js takes over) */
body.ftmn-body:not(:has(.wp-block-acf-section)), body.ftmn-body.ftmn-under, body.ftmn-body:not(.ftmn-js):has(.blocks > .ftmn:first-child) { --nav-color: var(--color-green, #004235); --nav-color-inverse: var(--color-beige, #fff2e1); }
body.ftmn-body:not(:has(.wp-block-acf-section)):has(.ftmn[data-tab='juomat']), body.ftmn-body.ftmn-under:has(.ftmn[data-tab='juomat']), body.ftmn-body:not(.ftmn-js):has(.blocks > .ftmn[data-tab='juomat']:first-child) { --nav-color: var(--color-dark-red, #3b001c); }
.ftmn * { box-sizing: border-box; }
/* the reset weighs nothing (:where), so each control keeps its own font */
:where(.ftmn button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.ftmn [hidden] { display: none !important; }
.ftmn-wrap { max-width: 1320px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); }

/* title */
.ftmn-head { text-align: center; padding: 6px 0 16px; }
.ftmn-title { font-family: var(--disp); font-weight: 400; text-transform: uppercase; font-size: 76px; line-height: .9; margin: 0; color: var(--theme); }
/* the lunch page (/lounas/: the block opens on the lunch by its own setting): the lunch's own heading, with the lobster
   and the price, is the page's title, so the block's big title would say "Lounas" twice (the user 11.11.2026); it stays
   for search engines and screen readers, out of sight, and the page starts with the tabs and the lunch */
.ftmn[data-open='lounas'] .ftmn-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ftmn-lead { margin: 10px auto 0; max-width: 34ch; font-size: 18px; line-height: 1.35; color: var(--theme); }

/* the three tabs: a soft track, the open one filled (the 3D page's menu tabs) */
.ftmn-tabs { position: sticky; top: var(--ftmn-top, 104px); z-index: 2; /* under the site's header (z 3) */ padding: 8px 16px 10px; margin: 0 -16px; background: var(--beige); }
.ftmn-tabs.stuck::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--ftmn-top, 104px); background: var(--beige); }
.ftmn-tabs.stuck { box-shadow: 0 8px 12px -10px #0000002e; }
.ftmn-tabs-in { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--theme) 10%, transparent); max-width: 480px; margin: 0 auto; }
.ftmn-tab { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; padding: 15px 8px 12px; font-family: var(--ui); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: color-mix(in srgb, var(--theme) 78%, transparent); transition: background-color .15s, color .15s; }
.ftmn-tab { white-space: nowrap; }
@media (max-width: 400px) { .ftmn-tab { font-size: 15px; letter-spacing: .02em; padding-left: 4px; padding-right: 4px; } }
.ftmn-tab:hover { color: var(--theme); }
.ftmn-tab[aria-selected='true'] { background: var(--theme); color: var(--beige); }
/* the theme underlines links when touched or focused: not our tabs, chips and buttons */
.ftmn .ftmn-tab, .ftmn .ftmn-tab:hover, .ftmn .ftmn-tab:focus, .ftmn .ftmn-tab:active,
.ftmn .ftmn-btn, .ftmn .ftmn-btn:hover, .ftmn .ftmn-btn:focus, .ftmn .ftmn-btn:active { text-decoration: none; }

/* the diet filter (the theme's menu filters) */
.ftmn-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 10px 0 4px; }
.ftmn-tools-label { font-family: var(--ui); font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; flex-basis: 100%; text-align: center; margin-bottom: 2px; }
.ftmn-chip { border: 1.5px solid var(--theme); border-radius: 999px; padding: 7px 14px 6px; font-family: var(--ui); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--theme); transition: background-color .15s, color .15s; }
.ftmn-chip[aria-pressed='true'] { background: var(--theme); color: var(--beige); }

/* the arches, as on the paper menus (Alo, 10.11.2026): food green–beige–green, drinks beige–burgundy–beige, so the
   filled ones go by their place in the menu (the page's own "fill", on the first, is not used) */
.ftmn-cols { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 16px; filter: drop-shadow(0 0 7px #00000013); }
.ftmn-arch { background: var(--beige); color: var(--theme); border-radius: 90px 90px 44px 44px; padding: 64px 18px 34px; display: flex; flex-direction: column; gap: 30px; position: relative; container-type: inline-size; }
.ftmn-panel[data-panel='ruoka'] .ftmn-arch:nth-child(odd), .ftmn-panel[data-panel='juomat'] .ftmn-arch:nth-child(even) { background: var(--theme); color: var(--beige); }
/* no titles over the food's arches, as on the paper menu; the drinks' (Cocktailit & viinit, Oluet, Muut) stay, as the
   paper's own (Cocktails, Olut • Beer, Muut • Others), in its manner: a bigger stripe title over the groups' */
.ftmn-panel[data-panel='ruoka'] .ftmn-arch-h { display: none; }
.ftmn-arch-h { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--ui); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; text-align: center; text-wrap: balance; color: inherit; }
.ftmn-arch-h::before, .ftmn-arch-h::after { content: ''; height: 17px; flex: 1 0 22px; background: currentColor; }
/* a group's title between stripes as wide as its arch's text (Alo, 10.11.2026: "------HANASSA----" to the column's width) */
.ftmn-group-h { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 0; font-family: var(--ui); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; color: inherit; }
.ftmn-group-h::before, .ftmn-group-h::after { content: ''; height: 13px; flex: 1 0 22px; background: currentColor; }
/* only the special group is red, its title, stripes and line, as on the paper menu (Hummeri soi, "Fanien suosikki");
   the other groups' lines are in the text's own colour (paper menus from the design Drive, 9.11.2026). On a filled
   arch it would keep the arch's beige. Its lobster stands in the right stripe's place, the title kept in the middle,
   as on the paper menu and the theme's own menu page (its .menu-page__lobster, turned 15°); it leaves with its group */
:is(.ftmn-panel[data-panel='ruoka'] .ftmn-arch:nth-child(even), .ftmn-panel[data-panel='juomat'] .ftmn-arch:nth-child(odd)) .ftmn-group-h.special { color: var(--hot); }
:is(.ftmn-panel[data-panel='ruoka'] .ftmn-arch:nth-child(even), .ftmn-panel[data-panel='juomat'] .ftmn-arch:nth-child(odd)) .ftmn-group-h.special + .ftmn-group-sub { color: var(--hot); }
.ftmn-group-h.special::after { min-width: 64px; height: 64px; margin: -22px 0; background: url('lobster.svg') center / contain no-repeat; transform: translate(6px, -4px) rotate(15deg); }
.ftmn-lob { display: none; }
.ftmn-group-sub { text-align: center; font-style: italic; font-size: 16px; margin: 6px 0 0; color: inherit; }
:is(.ftmn-panel[data-panel='ruoka'] .ftmn-arch:nth-child(odd), .ftmn-panel[data-panel='juomat'] .ftmn-arch:nth-child(even)) .ftmn-group-sub { opacity: .9; }
/* a drink's row: name with diets, dotted line, price, the whole text */
.ftmn-items { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ftmn-item { display: flex; gap: 12px; align-items: flex-start; width: calc(100% + 16px); padding: 9px 8px; margin: 0 -8px; border-radius: 18px; color: inherit; text-align: left; }
.ftmn-item:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.ftmn-it { flex: 1; min-width: 0; }
/* name and its icons, the menu's dotted line, the price on the first line's right */
.ftmn-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 8px; }
.ftmn-nm { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.ftmn-nm::after { content: ''; flex: 1 0 16px; border-bottom: 1.5px dotted currentColor; opacity: .45; transform: translateY(-4px); }
.ftmn-name { font-weight: 700; font-size: 18px; line-height: 1.2; }
.ftmn-price { font-weight: 700; font-size: 18px; line-height: 1.2; max-width: 8.5ch; text-align: right; }
.ftmn-ic { display: inline-block; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; flex: none; }
.ftmn-icons { display: inline-flex; gap: 3px; transform: translateY(2px); }
.ftmn-desc { display: block; font-size: 15px; line-height: 1.38; margin-top: 3px; opacity: .92; }
.ftmn-foot { font-size: 14px; font-style: italic; text-align: center; margin: 16px 6px 0; padding: 12px 14px; border: 1.5px solid currentColor; border-radius: 14px; }
/* filtered out: above the cards' own display (.ftmn .ftmn-c) */
.ftmn .ftmn-group.is-empty, .ftmn .ftmn-li.is-off, .ftmn .ftmn-c.is-off { display: none; }

/* the dishes' cards (Tony's "New B"): two side by side on a phone and in each arch, three where there is room */
.ftmn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ftmn .ftmn-c { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: #fffaf3; color: var(--theme); text-align: left; box-shadow: 0 1px 2px color-mix(in srgb, var(--theme) 15%, transparent), 0 4px 14px color-mix(in srgb, var(--theme) 8%, transparent); }
.ftmn-c .ph { display: block; aspect-ratio: 1; min-height: 0; overflow: hidden; background: #2a1a12; }
.ftmn-c .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ftmn-c .tx { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 10px; }
.ftmn-c .nm { font-weight: 700; font-size: 15.5px; line-height: 1.18; overflow-wrap: anywhere; hyphens: auto; }
.ftmn-c .nm .ftmn-icons { margin-left: 1px; white-space: nowrap; }
.ftmn-c .ftmn-ic { width: 15px; height: 15px; }
.ftmn-c .sm { font-size: 12.5px; line-height: 1.35; opacity: .85; }
.ftmn-c .ftmn-desc { display: none; }
.ftmn-c .ft { margin-top: auto; padding-top: 6px; display: flex; justify-content: flex-end; font-weight: 700; font-size: 16px; }
.ftmn-c .pr { text-align: right; }
.ftmn .ftmn-c:hover { box-shadow: 0 1px 2px color-mix(in srgb, var(--theme) 20%, transparent), 0 6px 18px color-mix(in srgb, var(--theme) 15%, transparent); }
/* the cards' columns by the room they have (an arch on a tablet or a desktop is narrower than a phone's screen) */
@container (min-width: 500px) { .ftmn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

/* lunch: the weekly list as text, in the list's own green */
.ftmn-lunch { background: #fffaf2; border-radius: 34px; padding: 24px 18px 22px; color: var(--green); box-shadow: 0 2px 14px #00000012; }
.ftmn-lunch-top { display: flex; align-items: center; gap: 12px; }
.ftmn-lunch-top img { width: 64px; height: auto; flex: none; }
.ftmn-lunch-h { font-family: var(--disp); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 12.5vw, 58px); line-height: .9; margin: 0; flex: 1; min-width: 0; color: inherit; }
.ftmn-badge { flex: none; width: 70px; height: 70px; border-radius: 50%; background: var(--green); color: var(--beige); display: grid; place-items: center; font-family: var(--ui); font-weight: 700; font-size: 16px; }
@media (min-width: 700px) { .ftmn-badge { width: 76px; height: 76px; font-size: 18px; } }
.ftmn-lunch-when { font-family: var(--ui); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; margin: 12px 0 4px; }
.ftmn-lunch-inc { font-size: 15px; line-height: 1.4; margin: 0 0 14px; }
/* the Katso page's day chips */
.ftmn-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; }
.ftmn-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 58px; padding: 10px 2px 9px; border: 1.5px solid color-mix(in srgb, var(--green) 28%, transparent); border-radius: 12px; font-family: var(--ui); line-height: 1; color: var(--green); text-align: center; transition: background-color .15s, color .15s; }
.ftmn-day.is-today { border-color: var(--green); }
.ftmn-day b { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ftmn-day span { font-size: 17px; font-weight: 500; white-space: nowrap; }
.ftmn-day[aria-selected='true'] { background: var(--green); border-color: var(--green); color: var(--beige); }
.ftmn-dayh { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.ftmn-dayh::after { content: ''; flex: 1; height: 7px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.ftmn-dish { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ftmn-dish li { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.ftmn-dish li.side { font-weight: 400; font-size: 15px; color: var(--green); }
.ftmn-dish li.sweet { font-weight: 400; font-style: italic; font-size: 15px; color: var(--green); }
.ftmn-dish .nw { white-space: nowrap; }
.ftmn-tag { display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .04em; border: 1.3px solid var(--green); color: var(--green); border-radius: 6px; padding: 2px 4px 1px; margin-left: 4px; transform: translateY(-2px); }
.ftmn-key { font-size: 13px; margin: 16px 0 0; opacity: .85; }
.ftmn-lunch-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* on a phone one day at a time */
.ftmn-dayp { display: none; }
.ftmn-dayp.on { display: block; }

/* actions: the theme's round-button (Oskar 500, .02em); the main one filled, the others outlined */
.ftmn-btn { border-radius: 999px; padding: 14px 22px 12px; font-family: var(--ui); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; border: 1.5px solid currentColor; text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.ftmn-btn.fill { background: var(--theme); border-color: var(--theme); color: var(--beige); }
.ftmn-cta { text-align: center; margin: 34px 0 0; }
.ftmn-cta .ftmn-btn { padding: 17px 36px 14px; font-size: 17px; }

/* the dish's card: the picture, all the menu's text, the price */
.ftmn-back { position: fixed; inset: 0; background: #1a1919a6; z-index: 200; }
.ftmn-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 201; max-width: 100vw; max-height: 92vh; overflow: auto; overscroll-behavior: contain; background: var(--beige); color: var(--theme); border-radius: 28px 28px 0 0; outline: none; animation: ftmn-up .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes ftmn-up { from { transform: translateY(40px); opacity: 0; } }
.ftmn-sheet .ph { position: relative; aspect-ratio: 4 / 3.3; background: #2a1a12; }
.ftmn-sheet .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ftmn-sheet .grab { position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; border-radius: 3px; background: #fff2e1cc; transform: translateX(-50%); }
.ftmn-x { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%; background: var(--beige) !important; color: var(--theme) !important; display: grid; place-items: center; box-shadow: 0 2px 8px #0003; }
.ftmn-x svg { width: 16px; height: 16px; }
.ftmn-sheet .bd { padding: 20px 20px calc(26px + env(safe-area-inset-bottom, 0px)); }
.ftmn-sheet.nophoto .bd { padding-top: 58px; }
.ftmn-sheet .nm { font-family: var(--disp); font-weight: 400; text-transform: uppercase; font-size: 40px; line-height: .92; margin: 0 0 10px; color: inherit; }
.ftmn-sheet .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ftmn-sheet .tags span.t { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 9px 3px 6px; font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.ftmn-sheet .tags .ftmn-ic { width: 16px; height: 16px; }
.ftmn-sheet .ds { font-size: 18px; line-height: 1.45; margin: 0; }
.ftmn-sheet .fn { font-size: 14px; font-style: italic; margin: 12px 0 0; opacity: .85; }
.ftmn-sheet .ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1.5px solid color-mix(in srgb, var(--theme) 25%, transparent); }
.ftmn-sheet .pr { font-family: var(--ui); font-weight: 700; font-size: 26px; }
.ftmn-sheet .ft .ftmn-btn { background: var(--theme); border-color: var(--theme); color: var(--beige); }
html.ftmn-lock { overflow: hidden; }

@media (hover: hover) {
  .ftmn a:focus-visible, .ftmn button:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
}

/* a phone: several prices on their own line under the name */
@media (max-width: 699px) {
  .ftmn-row.multi { grid-template-columns: 1fr; }
  .ftmn-row.multi .ftmn-nm::after { display: none; }
  .ftmn-row.multi .ftmn-price { max-width: none; text-align: left; white-space: nowrap; margin-top: 2px; }
}
/* tablet: two arches side by side */
@media (min-width: 700px) {
  .ftmn-title { font-size: 96px; }
  .ftmn-cols { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .ftmn-price { max-width: none; white-space: nowrap; }
  .ftmn-lunch { padding: 34px 34px 30px; max-width: 760px; margin: 0 auto; }
}
/* desktop: three arches as today, the cards in them; the card a dialog; the whole lunch week */
@media (min-width: 1100px) {
  .ftmn-title { font-size: 120px; }
  .ftmn-tools-label { flex-basis: auto; margin: 0 4px 0 0; }
  .ftmn-cols { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .ftmn-arch { border-radius: 120px; padding: 96px 30px 60px; }
  .ftmn-name, .ftmn-price { font-size: 17px; }
  .ftmn-desc { font-size: 14px; }
  .ftmn-lunch { max-width: 1240px; padding: 40px 44px; }
  .ftmn-days { display: none; }
  .ftmn-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 18px; }
  .ftmn-dayp { display: block; border-radius: 22px; padding: 16px 14px; }
  .ftmn-dayp.today { background: color-mix(in srgb, var(--green) 8%, transparent); outline: 2px solid var(--green); }
  .ftmn-dish li { font-size: 15px; }
  .ftmn-dish li.side, .ftmn-dish li.sweet { font-size: 13.5px; }
  .ftmn-back { display: block; }
  .ftmn-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(940px, 92vw); border-radius: 30px; transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; animation: ftmn-in .2s ease-out; }
  @keyframes ftmn-in { from { opacity: 0; transform: translate(-50%, -48%); } }
  .ftmn-sheet .ph { aspect-ratio: auto; min-height: 520px; }
  .ftmn-sheet .grab { display: none; }
  .ftmn-sheet .bd { padding: 44px 40px 36px; display: flex; flex-direction: column; }
  .ftmn-sheet .ft { margin-top: auto; }
  .ftmn-sheet.nophoto { grid-template-columns: 1fr; width: min(620px, 92vw); }
}
@media (prefers-reduced-motion: reduce) {
  .ftmn-sheet { animation: none; }
}

/* The food photos under the menu (/ruoka/, /en/eats/; the user 11.11.2026): a section of the page's own content
   (.ftmn-gal, outside the block, so it brings its own colours) in the food gallery page's red (the theme's --color-red,
   the user: "punainen kuten nytkin toi galleria"), its title as the menu's, the pictures (menu.js, from the gallery
   page as the guest comes near) two, three or four side by side in the gallery's 5:4 and its square corners, each with
   its name as the gallery writes it (freight-macro-pro 600, capitals, beige). The header keeps the theme's own over it. */
.ftmn-gal {
  --red: var(--color-red, #56001c); --beige: var(--color-beige, #fff2e1);
  --disp: var(--font-display, 'oskar-inline', sans-serif); --ui: var(--font-alt-body, 'oskar', sans-serif);
  --body: var(--font-body, 'freight-macro-pro', Georgia, serif);
  background: var(--red); color: var(--beige); text-align: center;
  padding: 64px max(16px, env(safe-area-inset-left, 0px)) 90px; overflow-x: clip;
}
.ftmn-gal * { box-sizing: border-box; }
.ftmn-gal-h { font-family: var(--disp); font-weight: 400; text-transform: uppercase; font-size: 76px; line-height: .9; margin: 0 0 32px; color: var(--beige); }
.ftmn-gal-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
.ftmn-gal-item { margin: 0; min-width: 0; }
.ftmn-gal-item img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; background: #2a1a12; }
.ftmn-gal-t { margin: 8px 2px 0; font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; text-align: center; color: var(--beige); overflow-wrap: anywhere; }
.ftmn-gal-more { margin: 36px 0 0; font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.ftmn-gal-more a { color: var(--beige); text-underline-offset: 4px; }
@media (min-width: 700px) {
  .ftmn-gal { padding-top: 96px; }
  .ftmn-gal-h { font-size: 96px; }
  .ftmn-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 15px; }
  .ftmn-gal-t { font-size: 16px; }
}
@media (min-width: 1100px) {
  .ftmn-gal-h { font-size: 120px; }
  .ftmn-gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftmn-gal-t { font-size: 18px; }
}