/* Formagium — ochre and brown (his "come colori del sito starei sull'ocra/marrone"), full screen (his "full screen come
   2048"), in the register of a scientific catalogue (his "un po più professionale scientifica e tecnica e seria", "in
   generale va tutto bene"): paper and ink, hairlines, near-square corners, names in a serif as in an index, data in a
   monospace with small-caps labels, PDO/PGI as outlined stamps. Every colour is a token below; light and dark follow the
   system. Classes only: no style attribute anywhere (his rule). */

/* the cheeses' names and their synonyms on the cards and in the table (his "per il nome principale usa "Barlow Semi Condensed"",
   then "usa il Barlow Semi Condensed anche per i sinonimi", 2026-10-07;
   the sheet's h1 keeps Iowan Old Style, his "va bene"): Google Fonts' files served from here, weight 600, by script as
   Google parts them (SIL Open Font License 1.1, fonts/OFL.txt); "?v=1": kept a year, a new file takes a new number */
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semi-condensed-600-latin.woff2?v=1") 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: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semi-condensed-600-latin-ext.woff2?v=1") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semi-condensed-600-vietnamese.woff2?v=1") 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; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-semi-condensed-400-latin.woff2?v=1") 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: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-semi-condensed-400-latin-ext.woff2?v=1") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-semi-condensed-400-vietnamese.woff2?v=1") 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; }

:root {
  /* the toolbar's controls, one height (his "l'altezza della input di ricerca, della select dell'ordinamento e dei bottoni
     griglia/tabella dovrebbe essere uguale", 2026-10-05: 45, 38 and 40 px measured) */
  --ctl: 2.75rem;
  --bg: #f6f2ea;
  --panel: #efe9dd;
  --surface: #fffdf8;
  --ink: #1e1812;
  --ink-2: #4b4036;
  --ink-3: #685b4d;
  --line: #ddd3c2;
  --line-2: #bcae96;
  --ochre: #b27a1c;
  --ochre-soft: #efe0c0;
  --ochre-ink: #7b500a;
  --brown: #33231a;
  --brown-2: #4a3424;
  --on-brown: #f7efe1;
  --on-brown-2: #d9c7a9;
  --chip: #fffdf8;
  --chip-ink: #2f261d;
  --chip-on: #33231a;
  --chip-on-ink: #f7efe1;
  --focus: #1b4f9c;
  --pdo: #8a2020; --pgi: #1f4f8a; --tsg: #2d6a3a; --nat: #5b4a3a;
  --map-sea: #f1ebe0;
  --map-none: #e3dccf;
  --map-1: #eedbb2;
  --map-2: #e1c07f;
  --map-3: #cf9f4f;
  --map-4: #b27a1c;
  --map-5: #84560d;
  --map-on: #33231a;
  --map-edge: #fbf8f2;
  --fw: 20rem;
  --gap: 1rem;
  --radius: 3px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --name: "Barlow Semi Condensed", "Arial Narrow", var(--sans);
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17120d; --panel: #1d1711; --surface: #221b14; --ink: #f3eadb; --ink-2: #d6c5a9; --ink-3: #bfac8e;
    --line: #3e3226; --line-2: #5a4a37; --ochre: #dba245; --ochre-soft: #3d2e17; --ochre-ink: #ecb85c;
    --brown: #0f0b07; --brown-2: #261c13; --on-brown: #f3eadb; --on-brown-2: #cdb995;
    --chip: #221b14; --chip-ink: #efe4d1; --chip-on: #ecb85c; --chip-on-ink: #17120d; --focus: #8ab4f8;
    --pdo: #f08a80; --pgi: #8fb7f0; --tsg: #8fd19d; --nat: #d6c5a9;
    --map-sea: #14100b; --map-none: #2f261c; --map-1: #4f3a1e; --map-2: #735323; --map-3: #9b6e26; --map-4: #c88f31;
    --map-5: #ecb85c; --map-on: #f7e3b8; --map-edge: #17120d;
  }
}
@media (min-width: 1800px) { :root { --fw: 21.5rem; } }
@media (min-width: 2600px) { html { font-size: 17px; } :root { --fw: 23rem; } }
@media (min-width: 3800px) { html { font-size: 18px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 0.97rem/1.5 var(--sans);
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden;
  -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga";
}
a { color: var(--ochre-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
/* a link that leaves the site opens a new tab (his "i link esterni tutti in target blank"): a mark says so, and the
   screen reader hears it through aria-describedby="newtab" */
a[target="_blank"]::after { content: "\2197"; display: inline-block; margin-left: 0.15em; font-size: 0.8em; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden], .is-hidden { display: none !important; }
.skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 50; background: var(--surface); color: var(--ink); padding: 0.6rem 1rem; border: 1px solid var(--line-2); }
.skip:focus { top: 0.5rem; }
button, input, select { font: inherit; color: inherit; }
svg { fill: currentColor; }
/* the small-caps label of a datum: the catalogue's voice */
.k, .fgroup > legend, .fgroup .legend, .spec dt, .listhead, .sub-title, .ids, .count, .foot, .crumbs { font-family: var(--mono); }

/* --- header ------------------------------------------------------------------------------------------------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
  background: var(--brown); color: var(--on-brown); min-height: 3.4rem; border-bottom: 2px solid var(--ochre);
}
.brand { display: flex; align-items: center; color: var(--on-brown); text-decoration: none; min-width: 0; padding: 0.2rem 0; }
/* his logo (logo/formagium.svg, 1920 × 570, black; it was logo-formaticum.svg until 2026-10-06), drawn as a mask in the
   header's ink: one cached file, no colour baked in, classes only */
.brand-logo {
  display: block; height: 2.7rem; aspect-ratio: 1920 / 570; max-width: 100%; background: var(--on-brown);
  -webkit-mask: url("../img/logo/formagium.svg") no-repeat left center / contain; mask: url("../img/logo/formagium.svg") no-repeat left center / contain;
}
.brand:hover .brand-logo { background: #ffffff; }
@media (forced-colors: active) { .brand-logo { forced-color-adjust: none; background: CanvasText; } }
.top-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.3rem 0.8rem;
  border: 1px solid var(--on-brown-2); border-radius: var(--radius); background: transparent; color: var(--on-brown); cursor: pointer;
  font: 500 0.85rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.btn svg { width: 1rem; height: 1rem; }
.btn:hover { background: var(--brown-2); }
.badge { min-width: 1.3rem; padding: 0.1rem 0.3rem; border-radius: 2px; background: var(--ochre); color: var(--brown); font: 700 0.75rem/1.2 var(--mono); text-align: center; }
.langs { display: flex; border: 1px solid var(--on-brown-2); border-radius: var(--radius); overflow: hidden; }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.4rem; padding: 0 0.6rem; color: var(--on-brown); text-decoration: none; font: 600 0.82rem/1 var(--mono); letter-spacing: 0.06em; }
.langs a + a { border-left: 1px solid var(--on-brown-2); }
.langs a[aria-current] { background: var(--on-brown); color: var(--brown); }
.langs a:not([aria-current]):hover { background: var(--brown-2); }
.btn-filters { display: none; }

/* --- the shell: filters | results --------------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--fw) minmax(0, 1fr); min-height: 0; position: relative; }
/* a cheese's sheet without the filters (his "quando sono nella pagina di dettaglio il pannello dei filtri non dovrebbe
   esserci", 2026-10-04): the panel, its grip and its button away, the sheet across; back to the list, they return. The about
   page and the glossary too (his "nelle pagine … info … glossario non ci deve essere il pannello di sinistra", 2026-10-07) */
body:is([data-view="cheese"], [data-view="about"], [data-view="glossary"]) .shell { grid-template-columns: minmax(0, 1fr); }
body:is([data-view="cheese"], [data-view="about"], [data-view="glossary"]) :is(.filters, .gutter, .btn-filters, .btn-reset) { display: none; }
.filters { background: var(--panel); border-right: 1px solid var(--line); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* the map stays at the top of the panel, the filters below scroll on their own, a grip between them sets the map's height
   (his "metti anche una maniglia sotto la mappa nel pannello di sinistra (come fatto in 2048) per ridimensionare la
   mappa"): --mh written by app.js into the adopted stylesheet, like --fw */
.f-map { flex: none; padding: 0.75rem 1rem 0; }
.grip-map { flex: none; position: relative; height: 14px; margin: 0 1rem; display: flex; align-items: center; justify-content: center; cursor: row-resize; touch-action: none; }
.grip-map::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: transparent; transition: background .15s; }
.grip-map i {
  position: relative; width: 40px; height: 7px; border-radius: 2px; background: var(--line-2);
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, var(--panel) 4px 6px); background-size: calc(100% - 10px) 1px;
  background-position: center; background-repeat: no-repeat; transition: background-color .15s, box-shadow .15s;
}
.grip-map:hover::before, .grip-map:focus-visible::before { background: var(--line-2); }
.grip-map:hover i, .grip-map:focus-visible i { background-color: var(--ochre); }
.grip-map:focus-visible { outline: none; }
.grip-map:focus-visible i { box-shadow: 0 0 0 2px var(--focus); }
.grip-map.drag::before { background: var(--ochre); }
.grip-map.drag i { background-color: var(--ochre-ink); box-shadow: 0 0 0 3px var(--ochre-soft); }
body.resizing.rows { cursor: row-resize; }
.filters-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0.55rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.filters-head h2 { margin: 0; font: 600 1.05rem/1.2 var(--serif); letter-spacing: 0.01em; }
.filters-acts { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
/* "Azzera filtri" (2026-10-05): in the panel's head from 1024 px — the header's type, the panel's colours —, in the header
   below (his "sul phone va bene nell'header"), an icon below 700 px */
.top-reset { display: none; }
.panel-reset {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.65rem; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer;
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.panel-reset:hover { background: var(--surface); border-color: var(--ink-3); }
.btn-reset[hidden] { display: none !important; }
.filters-body { flex: 1 1 auto; min-height: 7.5rem; overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem 1.5rem; border-top: 1px solid var(--line); }
/* the central panel: the results (or a sheet) scrolling, its footer below (his "il footer mettilo come footer del pannello
   centrale") — the footer stays in place while the panel scrolls, as wide as the panel */
.center { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.main { overflow-y: auto; overscroll-behavior: contain; min-width: 0; min-height: 0; scroll-padding-top: 8rem; }
.main:focus { outline: none; }

/* --- the grip on the filters' edge (his "manca la maniglia per allargare il pannello di destra (come in 2048)"): held
   and moved it sets the filters' width, the results taking the rest; --fw is written by app.js into an adopted stylesheet,
   never a style attribute. A desktop's only: below 1024 px the filters slide in ----------------------------------- */
.gutter {
  position: absolute; z-index: 6; top: 0; bottom: 0; left: calc(var(--fw) - 6px); width: 12px;
  display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none;
}
.gutter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: transparent; transition: background .15s; }
.gutter i {
  position: relative; width: 7px; height: 40px; border-radius: 2px; background: var(--line-2);
  background-image: repeating-linear-gradient(transparent 0 4px, var(--panel) 4px 6px); background-size: 1px calc(100% - 10px);
  background-position: center; background-repeat: no-repeat; transition: background-color .15s, box-shadow .15s;
}
.gutter:hover::before, .gutter:focus-visible::before { background: var(--line-2); }
.gutter:hover i, .gutter:focus-visible i { background-color: var(--ochre); }
.gutter:focus-visible { outline: none; }
.gutter:focus-visible i { box-shadow: 0 0 0 2px var(--focus); }
.gutter.drag::before { background: var(--ochre); }
.gutter.drag i { background-color: var(--ochre-ink); box-shadow: 0 0 0 3px var(--ochre-soft); }
body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.resizing .main, body.resizing .filters { pointer-events: none; }

/* --- filters ------------------------------------------------------------------------------------------------------ */
.fgroup { border: 0; margin: 0; padding: 0.8rem 0 0.85rem; border-top: 1px solid var(--line); min-width: 0; }
.fgroup:first-child { border-top: 0; }
.fgroup > legend, .fgroup .legend { float: left; width: 100%; display: flex; align-items: baseline; justify-content: space-between; padding: 0; margin: 0 0 0.5rem; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.fgroup > legend + * { clear: both; }   /* a group's own title: an accordion's hidden one (.acc-body's) stays 1 px wide, or it overflowed the page by 16 px */
/* the groups as accordions (2026-10-05): the title the legends' type, a chevron at the right, the chosen values counted */
.acc { padding: 0; }
.acc > summary {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; cursor: pointer; list-style: none;
  font: 600 0.72rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  /* 0.3rem in from the right: turned 45° its corner stood past the group's line (his "qualche px di troppo verso destra") */
  content: ""; margin: 0 0.3rem 0 auto; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg); transition: transform .15s ease;
}
.acc[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.acc > summary:hover { color: var(--ink); }
.acc > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.acc-n { min-width: 1.2rem; padding: 0.1rem 0.3rem; border-radius: 2px; background: var(--ochre); color: var(--brown); font: 700 0.68rem/1.2 var(--mono); text-align: center; letter-spacing: 0; }
.acc-body { border: 0; margin: 0; padding: 0 0 0.85rem; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: baseline; gap: 0.4rem; min-height: 2rem; padding: 0.3rem 0.55rem; border-radius: 2px;
  background: var(--chip); color: var(--chip-ink); font-size: 0.86rem; line-height: 1.25; border: 1px solid var(--line-2); transition: background-color .1s, color .1s, border-color .1s;
}
.chip span small { font: 0.7rem/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip input:checked + span { background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--chip-on); }
.chip input:checked + span small { color: inherit; opacity: 0.8; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip input:disabled + span { opacity: 0.4; }
.chip:hover input:not(:disabled):not(:checked) + span { border-color: var(--ink-3); }
.chip.unknown span { font-style: italic; color: var(--ink-3); }
.more { margin-top: 0.4rem; padding: 0.3rem 0; background: none; border: 0; color: var(--ochre-ink); text-decoration: underline; text-decoration-thickness: 1px; cursor: pointer; font: 0.78rem var(--mono); min-height: 2rem; }
.sub { margin-top: 0.6rem; padding-left: 0.6rem; border-left: 2px solid var(--line-2); }
.sub-title { margin: 0 0 0.35rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.fsearch { width: 100%; min-height: 2.3rem; margin-bottom: 0.5rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); }

/* the map */
.map { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--map-sea); border: 1px solid var(--line-2); touch-action: none; user-select: none; -webkit-user-select: none; }
.map svg.world { display: block; width: 100%; height: var(--mh, auto); aspect-ratio: 2000 / 973; cursor: grab; }
.map svg.world.dragging { cursor: grabbing; }
.map path { fill: var(--map-none); stroke: var(--map-edge); stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 0.5; }
.map path.has { cursor: pointer; }
.map path.lv1 { fill: var(--map-1); } .map path.lv2 { fill: var(--map-2); } .map path.lv3 { fill: var(--map-3); }
.map path.lv4 { fill: var(--map-4); } .map path.lv5 { fill: var(--map-5); }
.map path.has:hover { fill: var(--ochre-ink); }
.map path.on { fill: var(--map-on); }
.map path.ghost { fill: none; stroke: var(--ink-2); stroke-width: 1.2; pointer-events: none; }
.map .sub-layer path { stroke-width: 0.4; }
.map-tools { position: absolute; right: 0.3rem; bottom: 0.3rem; display: flex; flex-direction: column; gap: 0.2rem; }
.map-tools button { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.map-tools button:hover { border-color: var(--ink-3); }
.map-tools button[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.map-tools button[aria-disabled="true"]:hover { border-color: var(--line-2); }
.map-tools svg { width: 1rem; height: 1rem; }
.map-tip { position: absolute; left: 0.35rem; top: 0.35rem; max-width: calc(100% - 3rem); padding: 0.15rem 0.45rem; border: 1px solid var(--line-2); border-radius: 2px; background: var(--surface); color: var(--ink); font: 0.75rem/1.3 var(--mono); pointer-events: none; }

/* --- the toolbar ------------------------------------------------------------------------------------------------- */
.toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.8rem clamp(0.75rem, 2vw, 1.5rem) 0.7rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.search {
  flex: 1 1 22rem; min-width: 0; display: flex; align-items: stretch;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
}
.search:focus-within { border-color: var(--ink-2); }
.search input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: calc(var(--ctl) - 2px); padding: 0.45rem 0.9rem 0.45rem 2.5rem; border: 0; border-radius: var(--radius) 0 0 var(--radius); background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23685b4d'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l5 5-1.4 1.4-5-5A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0.8rem center; background-size: 1.05rem; font-size: 1rem;
}
.search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
.tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* the number of cheeses shown, inside the field at its right (2048's way): a line between, the ochre of the marks */
.count {
  flex: none; display: flex; align-items: center; justify-content: center; min-width: 4.4rem; padding: 0 0.8rem;
  border-left: 1px solid var(--line-2); color: var(--ochre-ink); font: 700 1.05rem/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; white-space: nowrap;
}
.sort { position: relative; }
/* the menu's own arrow, off the edge (his "la freccia verso il basso della dropdown è attaccata al bordo", 2026-10-04):
   the browser's is turned off and a chevron drawn in the theme's ink */
.sort select { appearance: none; height: var(--ctl); padding: 0.3rem 2.4rem 0.3rem 0.65rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 0.9rem; cursor: pointer; }
.sort::after { content: ""; position: absolute; top: 50%; right: 0.95rem; width: 0.42rem; height: 0.42rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.views { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.btn-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; background: var(--surface); color: var(--ink-2); cursor: pointer; padding: 0; }
.views .btn-icon { width: calc(var(--ctl) - 2px); height: calc(var(--ctl) - 2px); }   /* inside .views' 1 px border: --ctl outside */
.views .btn-icon + .btn-icon { border-left: 1px solid var(--line-2); }
.btn-icon svg { width: 1.1rem; height: 1.1rem; }
.btn-icon[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.btn-close { border: 1px solid var(--line-2); border-radius: var(--radius); }

/* --- results: grid — each cheese a small data sheet ------------------------------------------------------------- */
.results { list-style: none; margin: 0; padding: clamp(0.75rem, 2vw, 1.5rem); }
.results.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));   /* 15rem (2026-10-05, his "a schermo 1920px siano 6 colonne (ora sono 7)"; measured in his Chrome: 2056 px of page, a list of 1712, 7 cards of 225): 6 there and at 1920; 14rem had been his choice of three after 12 gave 9 columns at 80% zoom */ gap: clamp(0.6rem, 1vw, 0.9rem); }
.card { min-width: 0; }   /* no content-visibility (2026-10-05): with it Safari spent ~6 s on each turn of the wheel over the
   3,778 cards and the grid looked stuck past its second row (his report; measured with Safari's own wheel); its intrinsic size
   was no cause (500 px measured the same). The pictures still load as they near the screen (loading="lazy") */
.card-link {
  display: flex; flex-direction: column; height: 100%; padding: 0.7rem 0.85rem 0.8rem; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-top: 3px solid var(--line-2);
  transition: border-color .12s ease;
}
.card-link:hover { border-color: var(--ink-3); border-top-color: var(--ochre); color: var(--ink); }
/* his images: the whole cheese on white, to the card's edges; not in the list, which stays a table */
.photo { display: block; background: #fff; }
/* the drawing where his image is missing (the first release's, on white as his images are): the cheese at about 80%;
   the rind in currentColor, the paste the fill, both by milk; a fine outline keeps a white paste visible on white */
.pic { display: grid; place-items: center; --rind: #c79a55; --paste: #f0dca8; }
.pic svg { width: 80%; height: auto; fill: var(--paste); color: var(--rind); stroke: var(--rind); stroke-width: 1.2; stroke-linejoin: round; }
.pic.milk-cow { --rind: #d39a3a; --paste: #f4d27a; }
.pic.milk-sheep { --rind: #c9ad7c; --paste: #f3e6c6; }
.pic.milk-goat { --rind: #b9ae96; --paste: #fbf8f1; }
.pic.milk-buffalo { --rind: #c9bfa8; --paste: #fffbf2; }
.photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.grid .photo { order: -2; aspect-ratio: 1 / 1; margin: -0.7rem -0.85rem 0.6rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.list .photo { display: none; }
.sheet-head .sheet-names { margin-top: 1rem; }
.sheet-names { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }   /* the whole width (his "non dovrebbero andare a capo in questo modo, hanno ancora spazio sulla destra", 2026-10-04): it stopped at 80ch */
/* the lightbox (his "con lightbox"): the image as large as the screen allows, square, on white */
.lightbox { padding: 0; border: 0; border-radius: var(--radius); background: #fff; width: min(92vw, 92vh, 1920px); max-width: none; max-height: none; overflow: visible; }
.lightbox::backdrop { background: rgb(20 14 9 / 0.82); }
.lightbox img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.lightbox-close { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--surface); }
.c-head { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.4rem; }   /* first on screen, after the name for a screen reader */
.c-iso { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-3); }
.c-name { margin-top: 0.35rem; font: 600 1.12rem/1.22 var(--name); letter-spacing: 0.005em; overflow-wrap: break-word; min-width: 0; }
.c-alias { margin-top: 0.2rem; color: var(--ink-3); font: 400 0.7rem/1.3 var(--name); line-height: 1.3; overflow-wrap: break-word; min-width: 0; }
.c-alias:empty { display: none; }
.c-place { margin-top: 0.3rem; color: var(--ink-2); font-size: 0.82rem; }
.c-place:empty { display: none; }
.c-data { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.7rem; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.c-name + .c-alias + .c-place + .c-data, .c-data { margin-top: 0.65rem; }
.c-den, .c-style, .c-family, .c-milk, .c-paste, .c-age, .c-agemax { display: contents; }
.list .c-den, .list .c-style, .list .c-family { display: none; }   /* the denomination, the type and the family on the card only: the table has no column for them */
/* the card as it was, ST. MIN and ST. MAX under milk and paste (his, 2026-10-04: the line and the heading he had asked
   for taken back off); its name, other names and place on one line each, cut with an ellipsis (his "truncate
   ellipsis … così non vanno a capo"), the whole in the title */
.grid .c-name, .grid .c-alias, .grid .c-place { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* every line on every card, a dash where nothing is known (his "se non abbiamo un valore … metti la lineetta, così il
   numero di righe saranno sempre uguali"); the values cut as the names, in the labels' own type but not in capitals
   (his "con lo stesso font che hai usato per LATTE solo senza uppercase") */
.c-alias.none, .c-place.none { color: var(--line-2); font-style: normal; }
.grid .c-data .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 0.66rem/1.6 var(--mono); letter-spacing: 0.1em; color: var(--ink); }
.grid .c-data .v.none { color: var(--line-2); }
.k { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); align-self: baseline; }
.v { font: 0.84rem/1.35 var(--mono); color: var(--ink); align-self: baseline; overflow-wrap: break-word; min-width: 0; }
.v.none { color: var(--line-2); }
.spec dd .none { color: var(--line-2); }   /* a field nothing is known of */
.c-cert { display: flex; gap: 0.25rem; }
.c-cert:empty { display: none; }
.tag { display: inline-flex; align-items: center; padding: 0.05rem 0.35rem; border: 1px solid currentColor; border-radius: 2px; font: 700 0.66rem/1.35 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.tag-cert { color: var(--nat); position: relative; }   /* relative: a short tag's hidden name ("LR", "Label Rouge") stays inside the list's scroller; it stretched the page to the list's height */
.tag-cert.cert-pdo, .tag-cert.cert-aoc { color: var(--pdo); }
.tag-cert.cert-pgi { color: var(--pgi); }
.tag-cert.cert-tsg { color: var(--tsg); }

/* --- results: list — a table of the same data ------------------------------------------------------------------- */
.listhead { display: none; }
/* nine columns (his "Paese | Admin1 | Admin2 | Admin3", 2026-10-04); narrower than they need, the table scrolls sideways
   (his "nel caso la tabella non stia nella viewport ci sarà un overflow orizzonale") — the head with it (app.js keeps
   the two together), the name always in view; the page itself never scrolls sideways */
.has-list .listhead {
  display: grid; grid-template-columns: var(--cols); gap: 0 var(--cg); flex: 1 0 100%; min-width: 0; margin: 0.1rem 0 -0.7rem;
  padding: 0.45rem 0.6rem; border-top: 1px solid var(--line); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  overflow-x: auto; scrollbar-width: thin;
}
.has-list .listhead .lh:first-child { position: sticky; left: -0.6rem; z-index: 1; margin-left: -0.6rem; padding-left: 0.6rem; background: var(--bg); }
.listhead .lh {
  appearance: none; display: flex; align-items: baseline; gap: 0.35em; min-width: 0; padding: 0.15rem 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; color: inherit; cursor: pointer;
}
.listhead .lh:hover, .listhead .lh[aria-pressed="true"] { color: var(--ink); }
.listhead .lh-dir { font-size: 0.9rem; line-height: 0; }
.has-list {
  --cg: 0.75rem;
  --cols: minmax(9rem, 2.2fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1.2fr) minmax(5.5rem, 0.9fr) minmax(6rem, 0.9fr) minmax(6rem, 0.9fr) 6.8rem;
  --tw: calc(65.8rem + 9 * var(--cg) + 1.2rem);   /* the columns' least widths, the gaps, the row's padding */
}
.results.list { padding-top: 0.2rem; overflow-x: auto; }
.list .card { min-width: var(--tw); }   /* the row itself as wide as the table */
.list .card-link {
  display: grid; grid-template-columns: var(--cols); grid-template-rows: auto auto; column-gap: var(--cg); align-items: baseline; min-width: var(--tw);
  padding: 0.5rem 0.6rem; border-radius: 0; border-width: 0 0 1px; border-top: 0; background: transparent;
}
.list .card-link:hover { background: var(--surface); }
.list .c-head, .list .c-data { display: contents; }
.list .c-iso, .list .k { display: none; }
.list .c-name, .list .c-alias { position: sticky; left: -0.6rem; z-index: 1; align-self: stretch; margin: 0 0 0 -0.6rem; padding-left: 0.6rem; background: var(--bg); }
.list .c-name { grid-column: 1; grid-row: 1; font-size: 1.02rem; }
.list .c-alias { grid-column: 1; grid-row: 2; }   /* as the grid's: upright, 0.7rem (his "i sinonimi nella vista tabella, metti stesso font dei sinonimi della vista griglia", 2026-10-07; it was italic, 0.78) */
.list .card-link:hover .c-name, .list .card-link:hover .c-alias { background: var(--surface); }
.list .c-place, .c-adm { display: none; }
.list .c-adm { display: contents; }
.list .c-adm > span { grid-row: 1 / 3; color: var(--ink-2); font-size: 0.86rem; }
.list .c-country { grid-column: 2; }
.list .c-a1 { grid-column: 3; }
.list .c-a2 { grid-column: 4; }
.list .c-a3 { grid-column: 5; }
.list .c-milk .v { grid-column: 6; grid-row: 1 / 3; }
.list .c-paste .v { grid-column: 7; grid-row: 1 / 3; }
.list .c-age .v { grid-column: 8; grid-row: 1 / 3; }
.list .c-agemax .v { grid-column: 9; grid-row: 1 / 3; }
.list .c-cert { grid-column: 10; grid-row: 1 / 3; align-self: center; flex-wrap: wrap; }

.empty { margin: 3rem auto; max-width: 30rem; text-align: center; color: var(--ink-2); font-size: 1.05rem; }

/* --- the sheet ---------------------------------------------------------------------------------------------------- */
.sheet { max-width: 100rem; margin: 0 auto; padding: clamp(0.9rem, 2.5vw, 2rem) clamp(0.9rem, 3vw, 2.5rem) 3rem; }
.crumbs { margin-bottom: 1.1rem; font-size: 0.78rem; letter-spacing: 0.04em; }
.crumbs a::before { content: "← "; }
.crumbs a.up::before { content: none; }
.sheet-head { margin-bottom: 1.4rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-2); }
.ids { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sheet h1 { margin: 0; font: 600 clamp(1.8rem, 3.6vw, 2.8rem)/1.08 var(--serif); letter-spacing: 0.005em; overflow-wrap: break-word; hyphens: auto; }
.sheet-desc { margin: 0.45rem 0 0; color: var(--ink-2); font-size: 1.02rem; }
.sheet-tags { display: flex; gap: 0.3rem; margin: 0; }
/* the sheet: a main column and a side one, each stacking on its own (his choice of three, 2026-10-04: the rows of two
   columns left the specification beside a short block and an empty space); the related cheeses and the sources across.
   The two columns have a box of their own: a sticky side stops where the main column ends (in the sheet's whole body it
   slid over the related cheeses — his "credo ci sia un problema con lo sticky della mappa e documenti ufficiali") */
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.sheet-body { container-type: inline-size; }   /* the columns by the room the sheet has, not by the window: right at any zoom and any width of the filters */
.sheet-cols { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "main" "side"; gap: 1.1rem; align-items: start; }
.sheet-main, .sheet-side { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.sheet-main { grid-area: main; } .sheet-side { grid-area: side; } .sheet-photo { grid-area: photo; min-width: 0; }
/* the order image | specification | map (his "IMMAGINE (grande come la mappa) / SCHEDA TECNICA più grande di immagine e
   di mappa / MAPPA (grande come immagine)", 2026-10-04 — "così sul mobile avremo l'immagine sopra la scheda tecnica e
   subito sotto il titolo"): the markup's order, one column on a phone; in two the image and the map on the left, the
   specification beside them; in three the image left, the map right, as wide as each other */
@container (min-width: 48rem) {
  .sheet-cols.has-side { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); grid-template-areas: "photo main" "side main"; grid-template-rows: auto 1fr; }
  .sheet-side { position: sticky; top: 1rem; }
}
/* the image sticky as the map (his "lo sticky fallo anche per l'immagine"): in three columns each stays in view */
@container (min-width: 72rem) {
  .sheet-photo { position: sticky; top: 1rem; }
  .sheet-cols.has-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "photo main side"; grid-template-rows: auto; }
}
@container (max-width: 47.99rem) { .sheet-photo { max-width: 28rem; } }
.sheet-photo .photo { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sheet-photo .photo-open { display: block; cursor: zoom-in; border-radius: var(--radius); }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem 1.05rem; min-width: 0; }
.block h2 { margin: 0 0 0.6rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); font: 600 0.74rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.block-related, .block-sources { grid-column: 1 / -1; }
.block-sources .links { margin: 0 0 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }   /* the official documents above the numbered sources */
.spec { margin: 0; display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; }
.spec div { display: contents; }
.spec dt, .spec dd { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.spec dt { padding-right: 1.25rem; color: var(--ink-3); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.9; }
.spec dd { margin: 0; font-weight: 500; overflow-wrap: break-word; min-width: 0; }
.spec div:first-child dt, .spec div:first-child dd { border-top: 0; }
.sep { color: var(--ink-3); }
.refs { margin-left: 0.2rem; font: 400 0.66rem var(--mono); }
.refs a { padding: 0 0.05rem; text-decoration: none; }
.refs a::before { content: "["; } .refs a::after { content: "]"; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
.comp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stages { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stages th, .stages td { padding: 0.35rem 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; font-size: 0.92rem; }
.stages thead th { border-top: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.stages td { text-align: right; font-family: var(--mono); font-size: 0.86rem; }
.stages thead th + th { text-align: right; }
.stages [aria-current] { font-weight: 600; }
.comp th, .comp td { padding: 0.35rem 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; font-size: 0.92rem; }
.comp td { text-align: right; font-family: var(--mono); font-size: 0.86rem; }
.comp tr:first-child th, .comp tr:first-child td { border-top: 0; }
.note { margin: 0.6rem 0 0; color: var(--ink-3); font-size: 0.8rem; }
.names { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.names li { padding: 0.1rem 0.45rem; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); font-size: 0.84rem; }
.more-names { margin-top: 0.5rem; }
.more-names summary { cursor: pointer; font: 0.78rem var(--mono); color: var(--ochre-ink); text-decoration: underline; text-decoration-thickness: 1px; min-height: 2rem; display: inline-flex; align-items: center; }
.more-names[open] summary { margin-bottom: 0.4rem; }
.links { margin: 0; padding-left: 1.1rem; }
.links li { margin: 0.3rem 0; }
.fmt { font: 0.7rem var(--mono); color: var(--ink-3); }
.sources { margin: 0; padding-left: 1.8rem; font-size: 0.86rem; }
.sources li { margin: 0.3rem 0; overflow-wrap: anywhere; }
.sources li::marker { font-family: var(--mono); color: var(--ink-3); }
.sources li:target, .sources li.hit { background: var(--ochre-soft); }
.quote { display: block; margin: 0.25rem 0 0.4rem; padding-left: 0.7rem; border-left: 2px solid var(--line-2); color: var(--ink-2); font-style: italic; }
.wikis { margin: 0.8rem 0 0; font-size: 0.86rem; }
.wikis span { color: var(--ink-3); font: 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.wikis a { display: inline-block; min-width: 1.6rem; padding: 0.1rem 0.2rem; font-family: var(--mono); font-size: 0.82rem; }
/* zoomable as the filters' map (his "nella pagina di dettaglio la mappa falla zoomabile", 2026-10-04): its buttons, the
   wheel, a drag, a pinch */
.minimap { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--map-sea); border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; }
.minimap svg { display: block; width: 100%; height: auto; cursor: grab; }
.minimap svg.dragging { cursor: grabbing; }
.minimap path { fill: var(--map-none); stroke: var(--map-edge); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.minimap path.in { fill: var(--map-3); } .minimap path.on { fill: var(--map-5); }
.results.mini { padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }   /* the related cheeses as the grid's cards, with their image, six across at 1920 (his, 2026-10-04) */
/* every grid's card as the similar cheeses' (his "la minicard … usiamo anche per la home vista griglia quella", 2026-10-07:
   "i dettagli tecnici ce li abbiamo nella pagina di dettaglio"): image, the country's code and marks, name, other names,
   origin — the home's at its 15rem (his "Come ora"); the table keeps every column (his "si può semplificare con solo
   immagini + nome + sinonimi + provenienza", then "terrei solo questa parte" over the card's top, 2026-10-06) */
.results.grid .c-data { display: none; }
/* one card for the home and the similar cheeses (his "unifichiamo la vista "formaggi simili" e griglia home in questo modo:
   immagine con in alto a destra in sovraimpressione eventuali certificazioni (dop, aoc etc) / sopratitolo paese abbreviato
   … ITA FRA / Nome (leggermente più piccolo) / Sinonimi", 2026-10-07): the marks over the picture's top right, the
   countries' codes over the name, the origin's line off the grid (the table keeps it); then "ancora più compatta: Sigle
   dei paesi come i marchi ma in basso a sinistra dell'immagine / sotto solo il nome principale", "anzi, la riga dei
   sinonimi lasciala": the head laid over the picture in its grid cell, the marks at its top right, the codes a tag at its
   bottom left; under it the name and the other names; then "tieni i paesi in box singoli nel caso di multipli (come le
   certificazioni)" and "facciamo un cambio: sigle paesi in alto a sinistra, certificazioni in basso a destra" */
.grid .card-link { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "name" "alias"; align-content: start; }
.grid .photo { grid-area: pic; }
.grid .c-head { grid-area: pic; z-index: 1; margin: -0.7rem -0.85rem 0.6rem; padding: 0.45rem; align-items: flex-start; min-height: 0; }
.grid .c-iso { align-self: flex-start; display: flex; gap: 0.25rem; }
.grid .c-iso > span { padding: 0.05rem 0.35rem; border: 1px solid currentColor; border-radius: 2px; background: var(--surface); font: 700 0.66rem/1.35 var(--mono); letter-spacing: 0.08em; color: var(--ink-2); }
.grid .c-cert { align-self: flex-end; }
.grid .c-iso:empty { display: none; }
.grid .c-cert .tag { background: var(--surface); }
.grid .c-name { grid-area: name; margin-top: 0; font-size: 0.875rem; }   /* his 0.9rem, then "riduci appena appena il nome principale" (2026-10-07): 14 px */
.grid .c-alias { grid-area: alias; font-size: 0.725rem; }   /* upright everywhere (his "togli italic nei sinonimi"); his 0.7rem, then "aumenta appena appena i sinonimi" on the grid (2026-10-07): 11.6 px; the table's stay 0.7 */
.grid .c-place { display: none; }
/* the about page and the glossary as wide as a cheese's sheet, .sheet's 100rem (his "fallo con la stessa larghezza di container
   della pagina di dettaglio di formaggio", 2026-10-07): they were 48 and 52rem */
.about p { line-height: 1.65; }
.motto { font: italic 1.15rem var(--serif); color: var(--ink-2); }
/* the glossary (decision 90): the letters across, then each term — its name, other names, definition, and a line of its
   category, sources, related terms and the catalogue's cheeses; the sheet's labels link their term, quietly */
.glossary .lead { line-height: 1.65; color: var(--ink-2); }
.gl-letters { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1.25rem 0 0.5rem; font-family: var(--mono); }
.gl-letters a { min-width: 2rem; padding: 0.3rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; text-decoration: none; color: var(--ink); background: var(--surface); }
.gl-letters a:hover { border-color: var(--ochre); }
.gl-letter h2 { margin: 2rem 0 0.25rem; padding-bottom: 0.25rem; border-bottom: 2px solid var(--ochre); font: 600 1.4rem var(--serif); }
.gl-terms { margin: 0; }
.gl-term { padding: 0.9rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.gl-term:target, .gl-term.hit { background: var(--ochre-soft); }
.gl-term dt { font: 600 1.08rem var(--serif); }
.gl-term dfn { font-style: normal; }
.gl-alt { font: 400 0.85rem var(--sans); color: var(--ink-3); }
.gl-term dd { margin: 0.35rem 0 0; }
.gl-term dd p { margin: 0 0 0.35rem; line-height: 1.6; }
.gl-meta { font-size: 0.8rem; color: var(--ink-3); }
.gl-cat { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gl-sources ol { padding-left: 1.5rem; font-size: 0.85rem; line-height: 1.55; }
.gl-sources li:target, .gl-sources li.hit { background: var(--ochre-soft); }
.spec dt .gl-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 0.2em; }
.spec dt .gl-link:hover { color: var(--ochre-ink); }

/* --- footer: the central panel's own ------------------------------------------------------------------------------ */
.foot { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; align-items: center; justify-content: space-between; padding: 0.35rem 1rem; border-top: 1px solid var(--line); background: var(--panel); color: var(--ink-3); font-size: 0.72rem; line-height: 1.35; letter-spacing: 0.02em; }
.foot p { margin: 0; }
.foot-name { font-weight: 600; color: var(--ink); }
.foot-credits { text-align: right; }

/* --- below 1024 px: the filters slide in from the left (offcanvas, no pop-up) -------------------------------------- */
@media (max-width: 1023.98px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .btn-filters { display: inline-flex; }
  .gutter { display: none; }
  .filters {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(92vw, 24rem); border-right: 1px solid var(--line-2); display: flex;
    transform: translateX(-102%); transition: transform .2s ease; visibility: hidden; padding-bottom: env(safe-area-inset-bottom);
  }
  .filters.open { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgb(20 12 4 / 0.45); }
  .btn-close { display: grid; }
  .btn-close[hidden] { display: grid !important; }
  .top-reset { display: inline-flex; }
  .panel-reset { display: none; }
}
@media (max-width: 700px) {
  .brand-logo { height: 2.2rem; }
  .top { padding-left: 0.75rem; padding-right: 0.75rem; }
  .btn-filters span:not(.badge) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* hidden, still its name (axe: button-name) */
  .btn-filters { padding: 0.3rem 0.65rem; }
  .top-reset span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* an icon, still its name */
  .top-reset { padding: 0.3rem 0.65rem; }
  .toolbar { gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.55rem; }
  :root { --ctl: 2.6rem; }
  .search { flex-basis: 100%; }
  /* the footer at the list's end, not held in view (his "su phone il footer non è necessario che sia sticky"): the central
     column scrolls whole, the footer with it; app.js's scroller() follows */
  .center { display: block; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 8rem; }
  .main { overflow: visible; }
  .tools { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 0.5rem; }
  .count { min-width: 3.6rem; padding: 0 0.6rem; font-size: 0.95rem; }   /* inside the field now: a number, no words */
  .sort select { max-width: 10rem; font-size: 0.86rem; padding-right: 2.1rem; }
  .sort::after { right: 0.8rem; }
  .results.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 0.5rem; }
  .card-link { padding: 0.55rem 0.65rem 0.65rem; }
  .grid .photo, .grid .c-head { margin: -0.55rem -0.65rem 0.5rem; }   /* the picture to the card's edges at this padding: with the large card's margins it stuck out of the card and over its top line (measured 2026-10-07, 390/Chrome) */
  .c-name { font-size: 1rem; }
  .c-data { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .k { margin-top: 0.25rem; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec dt { padding-bottom: 0; line-height: 1.5; }
  .spec dd { padding-top: 0.1rem; border-top: 0; }
  .foot { font-size: 0.68rem; }
}
@media (max-width: 380px) {
  .langs a { min-width: 2.3rem; padding: 0 0.4rem; }
  .brand-logo { height: 1.9rem; }
  .results.grid { grid-template-columns: minmax(0, 1fr); }
  .c-data { grid-template-columns: max-content 1fr; gap: 0.15rem 0.7rem; }
  .k { margin-top: 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .top { min-height: 2.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .brand-logo { height: 2rem; }
  .foot { display: none; }
  .toolbar { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .chip input:checked + span { border: 2px solid CanvasText; }
  .map path.on { fill: Highlight; }
}
@media print {
  body { display: block; height: auto; overflow: visible; }
  .filters, .top-actions, .toolbar, .foot, .skip, .gutter { display: none; }
  .main { overflow: visible; }
}