.elementor-kit-5{--e-global-color-primary:#E7591D;--e-global-color-secondary:#50643B;--e-global-color-text:#241C13;--e-global-color-accent:#50643B;--e-global-color-tmk_surface:#F7F1E3;--e-global-color-tmk_surface_raised:#FDFBF5;--e-global-color-tmk_surface_sunken:#EFE5CF;--e-global-color-tmk_surface_inverse:#241C13;--e-global-color-tmk_text_primary:#241C13;--e-global-color-tmk_text_inverse:#FDFBF5;--e-global-color-tmk_border_default:#E2D3B6;--e-global-color-tmk_border_strong:#5C4530;--e-global-color-tmk_action_hover:#C74814;--e-global-color-tmk_action_active:#9E3910;--e-global-color-tmk_action_disabled:#E2D3B6;--e-global-color-tmk_on_primary:#FDFBF5;--e-global-color-tmk_accent_aqua:#50643B;--e-global-color-tmk_accent_arya:#50643B;--e-global-color-tmk_accent_tierra:#C74814;--e-global-color-tmk_accent_fuego:#C74814;--e-global-color-tmk_feedback_success:#2F7D53;--e-global-color-tmk_feedback_warning:#B98424;--e-global-color-tmk_feedback_error:#722A0D;--e-global-color-tmk_feedback_info:#50643B;--e-global-color-tmk_tatami_400:#C9B28C;--e-global-color-tmk_tatami_500:#A68C63;--e-global-color-tmk_divider_on_inverse:rgba(247,241,227,0.12);--e-global-typography-primary-font-family:"Londrina Solid";--e-global-typography-primary-font-size:clamp(3.052rem, calc(2rem + 3.5vw), 4.768rem);--e-global-typography-primary-font-weight:900;--e-global-typography-primary-line-height:0.98em;--e-global-typography-primary-letter-spacing:0.01em;--e-global-typography-secondary-font-family:"Basis Grotesque";--e-global-typography-secondary-font-size:1.25rem;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.5em;--e-global-typography-text-font-family:"Basis Grotesque";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55em;--e-global-typography-accent-font-family:"Basis Grotesque";--e-global-typography-accent-font-size:0.875rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.08em;--e-global-typography-tmk_h1-font-family:"Londrina Solid";--e-global-typography-tmk_h1-font-size:clamp(2.441rem, calc(1.8rem + 2vw), 3.052rem);--e-global-typography-tmk_h1-font-weight:900;--e-global-typography-tmk_h1-line-height:1.02em;--e-global-typography-tmk_h1-letter-spacing:0.01em;--e-global-typography-tmk_h2-font-family:"Londrina Solid";--e-global-typography-tmk_h2-font-size:clamp(1.953rem, 1.55rem + 1.25vw, 2.441rem);--e-global-typography-tmk_h2-font-weight:900;--e-global-typography-tmk_h2-line-height:1.08em;--e-global-typography-tmk_h2-letter-spacing:0.01em;--e-global-typography-tmk_h3-font-family:"Londrina Solid";--e-global-typography-tmk_h3-font-size:clamp(1.563rem, 1.35rem + 0.66vw, 1.831rem);--e-global-typography-tmk_h3-font-weight:900;--e-global-typography-tmk_h3-line-height:1.15em;--e-global-typography-tmk_h3-letter-spacing:0.01em;--e-global-typography-tmk_h4-font-family:"Londrina Solid";--e-global-typography-tmk_h4-font-size:1.25rem;--e-global-typography-tmk_h4-font-weight:900;--e-global-typography-tmk_h4-line-height:1.25em;--e-global-typography-tmk_h4-letter-spacing:0.01em;--e-global-typography-tmk_body_small-font-family:"Basis Grotesque";--e-global-typography-tmk_body_small-font-size:0.875rem;--e-global-typography-tmk_body_small-font-weight:400;--e-global-typography-tmk_body_small-line-height:1.5em;--e-global-typography-tmk_caption-font-family:"Basis Grotesque";--e-global-typography-tmk_caption-font-size:0.75rem;--e-global-typography-tmk_caption-font-weight:400;--e-global-typography-tmk_caption-line-height:1.4em;--e-global-typography-tmk_eyebrow-font-family:"Basis Grotesque";--e-global-typography-tmk_eyebrow-font-size:0.75rem;--e-global-typography-tmk_eyebrow-font-weight:700;--e-global-typography-tmk_eyebrow-text-transform:uppercase;--e-global-typography-tmk_eyebrow-letter-spacing:0.08em;--e-global-typography-tmk_eyebrow_voice-font-family:"Londrina Solid";--e-global-typography-tmk_eyebrow_voice-font-size:0.75rem;--e-global-typography-tmk_eyebrow_voice-font-weight:400;--e-global-typography-tmk_eyebrow_voice-text-transform:uppercase;--e-global-typography-tmk_eyebrow_voice-line-height:1.15em;--e-global-typography-tmk_eyebrow_voice-letter-spacing:0.08em;--e-global-typography-tmk_footer_link-font-family:"Londrina Solid";--e-global-typography-tmk_footer_link-font-size:0.875rem;--e-global-typography-tmk_footer_link-font-weight:400;--e-global-typography-tmk_footer_link-line-height:1.5em;--e-global-typography-tmk_footer_link-letter-spacing:0.04em;--e-global-typography-tmk_display-font-family:"Londrina Solid";--e-global-typography-tmk_display-font-size:clamp(3.052rem, calc(2rem + 3.5vw), 4.768rem);--e-global-typography-tmk_display-font-weight:900;--e-global-typography-tmk_display-line-height:0.98em;--e-global-typography-tmk_display-letter-spacing:0.01em;--e-global-typography-tmk_lead-font-family:"Basis Grotesque";--e-global-typography-tmk_lead-font-size:1.25rem;--e-global-typography-tmk_lead-font-weight:400;--e-global-typography-tmk_lead-line-height:1.5em;--e-global-typography-tmk_structure_lg-font-family:"Basis Grotesque";--e-global-typography-tmk_structure_lg-font-size:1.563rem;--e-global-typography-tmk_structure_lg-font-weight:700;--e-global-typography-tmk_structure_lg-line-height:1.15em;background-color:#F7F1E3;color:#241C13;font-family:"Basis Grotesque", sans-serif;font-weight:400;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#E7591D;font-family:"Basis Grotesque", sans-serif;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#FDFBF5;border-radius:8px 8px 8px 8px;padding:14px 28px 14px 28px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#C74814;color:#FDFBF5;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 img{border-radius:8px 8px 8px 8px;}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:"Basis Grotesque", sans-serif;font-size:1rem;color:#241C13;background-color:#FDFBF5;border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   TMK — typography, navbar behaviour and motion
   Families and durations resolve to the design-system tokens in
   tmk-design-system/css/tokens/*.css — never hardcoded here.
   ============================================================ */

/* ---- 1. FONTS: force the two faces onto Elementor's output ---- */
body,
.elementor-widget-text-editor,
.elementor-widget-nav-menu,
.elementor-widget-button,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-structure);
}
h1, h2, h3, h4,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--font-voice);
  font-weight: var(--weight-voice);
}
/* HEADER NAV — the VOICE face. Corrected against the Claude Design source
   (shell/refinements.css + Header.jsx in _ds_bundle.js): the primary nav is
   Londrina Solid, NOT Basis Grotesque. An earlier revision of this file set
   --font-structure here, which is the structure face — that was the bug.

   Weight is 400 (--weight-voice-soft), not 900. Londrina ships 100/300/400/900
   only; 900 is the display/headline weight and is wrong at nav scale.

   Size/tracking deliberately depart from the prototype's literal 12px/0.08em:
   at 12px uppercase a 400-weight display slab loses its stems. 15-17px fluid at
   0.04em is the plugin's own documented treatment (css/refinements/shell.css) and
   is what the header already renders — only the face and weight were wrong.
   Note the prototype's own .01em/.02em tracking never applied: the DS sets type
   inline, so those non-!important declarations lose to the inline 0.08em. */
#tmk-header .elementor-nav-menu .elementor-item {
  font-family: var(--font-voice);
  font-weight: var(--weight-voice-soft);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* FOOTER NAV — the VOICE face, by CLIENT OVERRIDE (2026-08-03).

   This is NOT a reading of the design source. The design source disagrees: neither
   shell/refinements.css nor Footer.jsx re-faces the footer, so the prototype keeps
   footer links in Basis Grotesque (--font-structure). An earlier revision of this
   file recorded exactly that, and it was correct as a description of the design.
   The client has overridden it: footer nav links are now Londrina Solid, matching
   the header's treatment. Record it as an override so nobody "corrects" it back to
   the prototype on the next design sync.

   Treatment mirrors #tmk-header above: voice face, weight 400 (--weight-voice-soft;
   Londrina ships 100/300/400/900, so 500/700 would be synthesised), uppercase,
   0.04em tracking. Size is deliberately NOT set here — see the note below.

   Specificity note: this .elementor-kit-5 is (1 id, 2 classes) and beats Elementor's
   per-widget typography .elementor-kit-5 (0 ids, 4 classes) emitted into post-27.css, so
   family/weight/tracking/transform declared here win without !important. That is
   already demonstrable: the widget asks for weight 500 and the rendered footer nav
   measures 700, i.e. this block was already overriding it.

   ⚠ Size is left at the widget's 13px. The header comment above records why 12px
   uppercase Londrina 400 loses its stems, which is the same risk at 13px. Raising
   the footer to the header's clamp() was NOT requested and is a visible brand
   decision, so it is flagged rather than applied.

   ⚠⚠ SINCE 120-footer-parity.php THIS RULE MATCHES NOTHING. The rebuilt footer has
   no nav-menu widget at all — its link groups are `icon-list` widgets, so
   `.elementor-nav-menu .elementor-item` no longer exists inside #tmk-footer. The 2A
   client override now lives where it can be seen and edited in the UI instead: the
   `tmk_footer_link` global typography (Londrina Solid 400 / 0.875rem / 0.04em),
   applied to each column's icon-list via __globals__ in 120-footer-parity.php.
   The rule is kept, not deleted, because it is still correct and would take effect
   again the moment anyone drops a real nav-menu widget back into the footer. Do not
   read it as the live source of the footer face — that is the global. This is the
   same dead-.elementor-kit-5 failure mode that hid the header's Londrina treatment for
   several sessions, so it is recorded rather than silently removed. */
#tmk-footer .elementor-nav-menu .elementor-item {
  font-family: var(--font-voice);
  font-weight: var(--weight-voice-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* BUTTONS default to the structure face — the DS CTA component is --font-structure
   everywhere. Only the header's persistent Prenota is re-faced to the voice, so this
   global rule must NOT become Londrina. */
.elementor-button, .elementor-button-text {
  font-family: var(--font-structure);
  font-weight: var(--weight-structure-bold);
}

/* PRENOTA ORA — the one button the design source re-faces to the voice
   (refinements.css: header[role="banner"] a[href="/prenota"]). Scoped to the header
   so no other CTA on the site is affected. Colour intentionally left alone here. */
#tmk-header .elementor-button,
#tmk-header .elementor-button-text {
  font-family: var(--font-voice);
  font-weight: var(--weight-voice-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- 2. NAVBAR: compact + sticky + hide on scroll down ---- */
#tmk-header {
  position: sticky;
  top: 0;
  z-index: 999;
  padding-block: 12px !important;
  transition: transform var(--motion-transition, 240ms) var(--ease-in-out, cubic-bezier(.4,0,.2,1)),
              box-shadow var(--motion-transition, 240ms) ease,
              background-color var(--motion-transition, 240ms) ease;
  will-change: transform;
}
#tmk-header img { transition: width var(--motion-transition, 240ms) ease; }

/* scrolled: subtle lift + slightly tighter */
#tmk-header.tmk-scrolled {
  box-shadow: 0 1px 0 var(--color-border-default, #E2D3B6), 0 6px 24px rgb(36 28 19 / 7%);
  padding-block: 8px !important;
}
#tmk-header.tmk-scrolled img { width: 124px !important; }

/* hidden on scroll down, back on scroll up */
#tmk-header.tmk-nav-hidden { transform: translateY(-100%); }

/* ---- 3. NAV LINKS: animated underline, no layout shift ---- */
#tmk-header .elementor-nav-menu .elementor-item {
  position: relative;
  transition: color var(--motion-feedback, 120ms) ease;
}
#tmk-header .elementor-nav-menu .elementor-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--color-action-primary, #E7591D);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-transition, 240ms) var(--ease-out, cubic-bezier(0,0,.2,1));
}
#tmk-header .elementor-nav-menu .elementor-item:hover::after,
#tmk-header .elementor-nav-menu .elementor-item.elementor-item-active::after {
  transform: scaleX(1);
}
#tmk-header .elementor-nav-menu .elementor-item:active { transform: translateY(1px); }

/* ---- 4. DROPDOWN: fade + slide instead of a hard cut ---- */
#tmk-header .elementor-nav-menu--dropdown {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgb(36 28 19 / 12%);
  transition: opacity var(--motion-transition, 240ms) ease,
              transform var(--motion-transition, 240ms) var(--ease-out, cubic-bezier(0,0,.2,1));
}
#tmk-header .elementor-nav-menu--dropdown a { transition: background-color var(--motion-feedback,120ms) ease, color var(--motion-feedback,120ms) ease; }

/* ---- 5. BUTTONS: lift on hover, press on click ---- */
.elementor-button {
  transition: background-color var(--motion-feedback, 120ms) ease,
              transform var(--motion-feedback, 120ms) ease,
              box-shadow var(--motion-transition, 240ms) ease;
}
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(231 89 29 / 28%);
}
.elementor-button:active { transform: translateY(0); box-shadow: none; }

/* ---- 6. ENTRANCE: header drops in, content fades up ---- */
@keyframes tmkHeaderIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* fill-mode MUST be `backwards`, never `both`.
   Animations outrank normal author declarations in the cascade. With `both`, the
   finished animation keeps filling `transform: translateY(0)` from its 100% keyframe
   forever, which silently beats `#tmk-header.tmk-nav-hidden { transform:
   translateY(-100%) }` — the class toggles correctly but the header never moves.
   Verified with Playwright: hasHidden:true while computed transform stayed
   matrix(1,0,0,1,0,0) and rectTop stayed 0.
   `backwards` applies the from-state before the animation starts and stops filling
   once it ends, handing `transform` back to the cascade where the hide rule lives.
   (Also: no line inside this heredoc may begin with the closing marker word after
   optional whitespace — PHP 7.3+ flexible heredocs would treat it as the terminator.) */
#tmk-header { animation: tmkHeaderIn var(--motion-narrative, 480ms) var(--ease-out, cubic-bezier(0,0,.2,1)) backwards; }

@keyframes tmkFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.tmk-in-view { animation: tmkFadeUp var(--motion-narrative, 480ms) var(--ease-out, cubic-bezier(0,0,.2,1)) backwards; }

/* smooth anchor scrolling */
html { scroll-behavior: smooth; }

/* ---- 7. ACCESSIBILITY: motion off means motion off ---- */
@media (prefers-reduced-motion: reduce) {
  #tmk-header,
  #tmk-header .elementor-nav-menu .elementor-item::after,
  .elementor-button,
  .tmk-in-view {
    animation: none !important;
    transition: none !important;
  }
  #tmk-header.tmk-nav-hidden { transform: none; }
  .tmk-in-view { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- 8. MOBILE ---- */
@media (max-width: 1023px) {
  #tmk-header { padding-inline: var(--page-inset) !important; }
  #tmk-header.tmk-scrolled img { width: 110px !important; }
}

/* TMK 130-header-shell:START */
/* Kit's own generated button style (.elementor-kit-5 button, specificity 0,1,1)
   out-specifies the plugin's .tmk-newsletter__submit (0,1,0), painting the footer
   newsletter button kit-orange instead of the design's transparent + cream border.
   This .elementor-kit-5 (0,2,1) wins outright, and prints after the kit rule regardless. */
.tmk-newsletter--footer button.tmk-newsletter__submit{
  background-color: transparent;
  border-color: var(--tatami-50, #FDFBF5);
}
.tmk-newsletter--footer button.tmk-newsletter__submit:hover,
.tmk-newsletter--footer button.tmk-newsletter__submit:focus{
  background-color: rgba(253,251,245,0.12);
  color: var(--tatami-50, #FDFBF5);
}

/* Mobile nav crush fix. Elementor's own default `--flex-wrap-mobile:wrap` on
   #tmk-header makes the row wrap onto 3 lines the moment logo(50%)+CTA(50%) plus
   the nav container's ~33px toggle exceed one line — CSS flex-wrap decides breaks
   using each item's UNSHRUNK size, so no `_flex_size`/flex-shrink setting can stop
   it (confirmed: Elementor 4.2.0 doesn't even register `_flex_size` server-side).
   Forcing nowrap + auto width on all three children is proven and matches the
   existing shell.css convention for this class of Elementor container bug. */
@media (max-width: 767px){
  #tmk-header{ flex-wrap: nowrap !important; }
  #tmk-header .elementor-element-3da6a60{ width: auto !important; flex: 0 1 auto !important; }
  #tmk-header .elementor-element-23d7b26{ width: auto !important; flex: 0 0 auto !important; }
  #tmk-header .elementor-element-6f7db9d{ width: auto !important; flex: 0 1 auto !important; }
}
/* TMK 130-header-shell:END */

/* TMK 105-editorial-article:START */
/* Editorial Article — typography differentiation inside `theme-post-content`'s
   uniform WYSIWYG output. Every value is a design-system token already loaded
   sitewide (css/tokens/*.css) — nothing hardcoded. */
.tmk-article-body > p:first-child {
  font-size: var(--text-h3);
  line-height: 1.5;
  font-weight: var(--weight-structure-medium);
}
.tmk-article-body blockquote {
  font-family: var(--font-voice);
  font-size: var(--text-h3);
  font-weight: var(--weight-voice);
  line-height: 1.2;
  text-align: center;
  margin: var(--space-8) auto;
  max-width: 32ch;
  color: var(--color-text-primary);
}
.tmk-article-body blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-structure);
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: var(--weight-structure);
  color: var(--color-text-secondary);
}
.tmk-article-body figure.alignfull,
.tmk-article-body figure.alignfull img {
  width: 100%;
  height: clamp(320px, 52vh, 560px);
  object-fit: cover;
  margin: var(--space-8) 0;
}
.tmk-article__hero-media img {
  width: 100%;
  height: clamp(360px, 62vh, 640px);
  object-fit: cover;
  display: block;
}
.tmk-article-related-card {
  border-radius: var(--radius-soft);
  transition: background-color var(--motion-transition) ease-in-out;
}
.tmk-article__breadcrumb a {
  color: inherit;
}
/* TMK 105-editorial-article:END */

/* TMK 106-eventi:START */
/* Event Detail body + card typography — tokens only, see 105's identical doctrine. */
.tmk-event-body > p:first-child {
  font-size: var(--text-h3);
  line-height: 1.5;
  font-weight: var(--weight-structure-medium);
}
.tmk-event__hero-media img {
  width: 100%;
  height: clamp(360px, 62vh, 640px);
  object-fit: cover;
  display: block;
}
.tmk-event-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.tmk-event-card, .tmk-event-related { border-radius: var(--radius-soft); }
.tmk-event__breadcrumb a { color: inherit; }
/* TMK 106-eventi:END */

/* TMK 107-job-detail:START */
/* Job Detail body — h3/ul roles inside theme-post-content's uniform WYSIWYG output.
   Tokens only, same doctrine as 105/106. */
.tmk-job-body h3 {
  font-family: var(--font-voice);
  font-weight: var(--weight-voice);
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-text-primary);
  margin: var(--space-7) 0 var(--space-4);
}
.tmk-job-body ul {
  margin: 0;
  padding-left: 1.1em;
}
.tmk-job-body li {
  font-family: var(--font-structure);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.tmk-job__hero-media img {
  width: 100%;
  height: clamp(360px, 62vh, 640px);
  object-fit: cover;
  display: block;
}
.tmk-job-related { border-radius: var(--radius-soft); }
.tmk-job__breadcrumb a { color: inherit; }
/* TMK 107-job-detail:END */

/* TMK 143-location-atmosphere-css:START */
/* Narrative+Gallery pairing (tmkloc_atmo, from 142). A flex item whose content is display:grid
   (.tmk-narrative-band, no explicit grid-template-columns) computed flex-basis:auto to 0px in
   this Elementor+Chromium combination - confirmed via computed style, not guessed. A concrete
   flex-basis sidesteps the ambiguous auto-sizing calculation; 560px is the SAME existing value
   already governing .tmk-narrative-band__body's max-width (css/components/narrative-band.css,
   untouched) - the column can never render wider than that already-approved narrow measure.
   tmkloc_gal's own flex-basis is 280px (carousel polish task) - a comfortable floor for a
   carousel with visible thumbnails and arrows, not an arbitrary number: it's what forces the
   narrative's existing (previously never-triggered) flex-shrink:1 to actually engage below its
   560px ceiling whenever the two together don't fit - confirmed this only changes anything in
   the narrow range where that happens (roughly tablet width); wide viewports still give the
   narrative its full 560px, and ≤767px stacks both at full width regardless. */
.elementor-element-tmkloc_nar{ width: 100%; }
.elementor-element-tmkloc_gal{ width: 100%; }
@media (min-width: 768px){
  .elementor-element-tmkloc_atmo{ flex-wrap: nowrap; }
  .elementor-element-tmkloc_nar{ flex: 0 1 560px !important; width: auto !important; }
  .elementor-element-tmkloc_gal{ flex: 1 1 280px !important; width: auto !important; min-width: 0; }
}
/* TMK 143-location-atmosphere-css:END */

/* TMK 152-padding-32:START */
/* Client review (padding unification): three real `page` posts (Storie hub post 231, La Nostra
   Storia post 250, Allergeni post 254) have no _elementor_data at all - their content is a shortcode in
   post_content, rendered through Hello Elementor's OWN generic page template rather than a
   dedicated Elementor page/Theme-Builder template (confirmed: their <body> carries no
   `elementor-page-*` class, every other route checked does). That routes them through Hello
   Elementor's own theme.css `.site-main` boxed-width rule (500/600/800/1140px tiers) - a
   completely separate mechanism from this site's own 1440 kit container_width, which caps a
   `.tmk-hero--full-bleed` (meant to render edge-to-edge) into a narrow legacy blog column and
   compounds with that component's own padding. Neutralised sitewide by the same body-class
   condition Hello Elementor's own rule keys off, rather than three separate per-page patches -
   protects any future page that falls into this same shape too. */
body:not([class*="elementor-page-"]) .site-main{ max-width: none !important; width: 100% !important; padding-inline: 0 !important; }
/* TMK 152-padding-32:END */

/* === TMK MOBILE HEADER (170) === */
/* Below the desktop tier only. 1024px is where Elementor's dropdown-tablet setting hides the
   inline nav and shows the burger, so it is the exact width at which these rules become the
   ones that matter. Nothing here reaches 1025px and above. */
@media (max-width: 1024px){

  /* -- the row: logo left, controls right ---------------------------------------------- */
  /* The auto inline-start margin absorbs the row's free space, which leaves justify-content
     nothing to distribute — so the burger and the CTA pack together against the right edge
     while the logo stays put. DOM order is untouched, so tab order still reads left to right. */
  #tmk-header .elementor-element-23d7b26{
    margin-inline-start: auto;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* -- take the closed dropdown out of flow --------------------------------------------- */
  /* This single change is what un-centres the burger AND stops the CTA label wrapping: the nav
     container collapses from 132.1px (the hidden panel's max-content) to the burger's own width.
     Both intermediate wrappers are made static so the panel resolves against #tmk-header itself,
     which is already positioned (sticky), giving a full-bleed panel under the whole bar. */
  #tmk-header .elementor-element-23d7b26,
  #tmk-header .elementor-element-c3ccd4a,
  #tmk-header .elementor-element-c3ccd4a > .elementor-widget-container{
    position: static;
  }
  #tmk-header nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position: absolute;
    inset-inline: 0;
    top: 100%;
    margin-top: 0;
    z-index: 5;
    background-color: var(--color-surface);
    border-block-start: 1px solid var(--color-border-default);
    border-block-end: 1px solid var(--color-border-default);
    /* The panel is positioned against the header, so 100% here IS the header's height and this
       resolves to "everything below the bar". Scrolls when the Ristoranti accordion opens. */
    max-block-size: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* -- the burger ------------------------------------------------------------------------ */
  /* margin:0 removes Elementor's toggle_align:center auto margins. The background and radius
     are its off-system defaults: a 5% black wash (no grey exists in tokens/colors.css) and a
     3px radius (a fourth value against the governed three). 48px is --space-8, the first step
     at or above the 44px touch minimum the shell spec asks for. */
  #tmk-header .elementor-menu-toggle{
    margin: 0 !important;
    padding: 0;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    background-color: transparent;
    border-radius: var(--radius-soft);
    color: var(--color-text-primary);
    transition: background-color var(--motion-feedback, 120ms) var(--ease-out, ease);
  }
  #tmk-header .elementor-menu-toggle:hover{ background-color: var(--color-surface-sunken); }
  #tmk-header .elementor-menu-toggle svg{ inline-size: var(--space-5); block-size: var(--space-5); }

  /* -- the CTA --------------------------------------------------------------------------- */
  /* No white-space:nowrap and no font-size override: with ~99px returned to the row the label
     fits on one line on its own. This only stops the button being stretched by its container. */
  #tmk-header .elementor-element-6f7db9d{ flex: 0 0 auto !important; width: auto !important; }

  /* -- the open panel's rows -------------------------------------------------------------- */
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-item,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-sub-item{
    min-block-size: var(--space-8);
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
    color: var(--color-text-primary);
    border-block-end: 1px solid var(--color-border-default);
  }
  /* Elementor's dropdown hover is #3f444b on #fff — a blue-grey and a pure white from outside
     this palette entirely. Replaced with the surface step the rest of the system uses. */
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-item:hover,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-item:focus,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-item.highlighted,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-sub-item:hover,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-sub-item:focus,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-sub-item.highlighted{
    background-color: var(--color-surface-sunken);
    color: var(--color-text-primary);
  }
  /* The desktop nav's 2px ember underline indicator is pinned left:0/right:0, and the .elementor-kit-5
     that draws it (`#tmk-header .elementor-nav-menu .elementor-item::after`) matches the dropdown
     list as well as the main one — because both <ul>s carry .elementor-nav-menu. On a full-width
     stacked row that underline stops reading as an underline and becomes a stray orange rule
     across the panel. It is a horizontal-nav affordance; these rows already say hover and current
     with the sunken fill. Same specificity as the rule it corrects, declared after it, so it wins
     on order with no !important. */
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-item::after,
  #tmk-header nav.elementor-nav-menu--dropdown .elementor-sub-item::after{ content: none; }

  /* Ristoranti opens as an inline accordion, per the shell spec's "city-level accordion, no
     nested flyouts". The indent is what marks the level; the sunken fill separates the branch. */
  #tmk-header nav.elementor-nav-menu--dropdown ul ul{ background-color: var(--color-surface-sunken); }
  #tmk-header nav.elementor-nav-menu--dropdown ul ul .elementor-sub-item{
    padding-inline-start: var(--space-8);
    border-block-end-color: var(--color-border-default);
  }
  /* The expand control needs its own reachable target, not a 10px arrow. */
  #tmk-header nav.elementor-nav-menu--dropdown .sub-arrow{
    min-inline-size: var(--space-8);
    min-block-size: var(--space-8);
    justify-content: center;
    margin-block: 0;
    padding: 0;
  }
}
/* === END TMK MOBILE HEADER (170) === */

/* TMK 180-global-shell:START */
/* PAGE GRID - header. The header row is a full-width Elementor container: its 32px padding is an
   inset from the VIEWPORT, with no cap, while every boxed row on the site (the footer included)
   caps at the kit container_width. --page-inset (plugin css/tokens/layout.css) is
   max(32px, (100% - 1440px)/2) - the exact arithmetic a boxed row performs - so below ~1504px
   this resolves to the same 32px the header already had, and above it the logo, the nav and the
   Prenota CTA finally sit on the footer's axis. Keyed on the ID (1,0,0) because Elementor's own
   per-element padding rule is (0,3,0): this wins on specificity, so no !important is needed and
   nothing depends on which stylesheet loads last. Vertical padding is untouched. */
#tmk-header { padding-inline: var(--page-inset); }
/* TMK 180-global-shell:END */

/* TMK 195-grid-and-ux-fixes:START */
/* ---------------------------------------------------------------------------------------
   1. UNA SOLA GRIGLIA DI CONTENUTO — contratto cliente 2026-09-04

      >= 1184px   ->  1120px centrati            (margine 160 a 1440, 400 a 1920)
      1024-1183   ->  viewport - 64              (gutter 32)
      600-1023    ->  viewport - 48              (gutter 24)
      < 600       ->  viewport - 32              (gutter 16)

      Un solo numero governa le quattro righe: --tmk-content-gutter. --container-body resta
      1120 (la misura della Home, invariata). Le tre fasce si incastrano senza salto: a
      1184 (1184-1120)/2 = 32, che e' esattamente il gutter della fascia sotto.

      --body-inset e' RIDEFINITO qui. In css/tokens/layout.css e' legato a --page-gutter,
      che vale 32px a ogni larghezza: e' per questo che tablet e mobile avevano lo stesso
      gutter del desktop, 16px piu' strizzato della Home a 390 (misurato: pagine interne
      326px di contenuto, Home 358px). --page-gutter e --page-inset NON sono toccati:
      header e footer restano a 32px, come sulla Home.

      :root:root ha specificita' (0,2,0) e batte il :root del token file (0,1,0) senza
      dipendere dall'ordine di caricamento fra post-5.css e la catena del plugin, che qui
      non e' garantito.
   --------------------------------------------------------------------------------------- */
:root:root{
  --tmk-content-gutter:16px;
  --body-inset:max(var(--tmk-content-gutter),calc((100% - var(--container-body)) / 2));
}
@media (min-width:600px){ :root:root{ --tmk-content-gutter:24px } }
@media (min-width:1024px){ :root:root{ --tmk-content-gutter:32px } }

/* La classe canonica del wrapper di contenuto standard. Non usa max-width + width:100% +
   padding insieme (che si sommano e falsano la misura reale, difetto gia' pagato su
   .tmk-menu-hub): il box e' la misura, senza padding, quindi cio' che si misura e' cio'
   che e' dichiarato. Le sezioni che hanno gia' il proprio meccanismo corretto
   (padding-inline:var(--body-inset) su un container a tutta larghezza) restano come sono:
   producono lo STESSO risultato, ed e' l'unico modo di tenere il fondo edge-to-edge. */
.tmk-content-container{
  width:min(var(--container-body),calc(100% - 2 * var(--tmk-content-gutter)));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
  box-sizing:border-box;
}
/* Ruolo LETTURA: sempre dentro il wrapper standard, non al suo posto. */
.tmk-content-container--reading{
  width:min(var(--container-narrow),calc(100% - 2 * var(--tmk-content-gutter)));
}

/* css/pages/system.css dichiara .tmk-404{padding-inline:var(--page-gutter)} per il percorso
   shortcode, e la stessa classe sta sul container Elementor del template #568. Specificita'
   (0,1,0) contro (0,1,0) di .e-con: decide l'ordine di caricamento, e la catena del plugin
   e' a priorita' 20, quindi vinceva il plugin — il wrapper del 404 restava a 32px (contenuto
   1376 a 1440) invece che sulla corsia. Il contenuto e' centrato e capped a 680 dal
   boxed_width del container, quindi i pixel a schermo non cambiano: cambia solo l'asse del
   wrapper, che e' cio' che il contratto misura. */
.elementor .tmk-404{ padding-inline:var(--body-inset) }

/* IL DIFETTO CHE IL CLIENTE HA VISTO — misurato a 1920, non dedotto.
   css/pages/{menu,story,city}.css dichiarano su .tmk-menu-hub, .tmk-stack e .tmk-city
   `max-width:calc(var(--container-page) + 2*var(--page-gutter))` = 1504px INSIEME a
   `padding-inline:var(--body-inset)`. E' esattamente la somma che CLAUDE.md documenta come
   trappola: il `100%` dentro --body-inset si risolve sulla larghezza del CONTENITORE (il
   viewport), non su quella dell'elemento. Sotto i 1504px il cap non morde e i due meccanismi
   coincidono — sopra, no:

     1920 -> elemento capped a 1504, padding (1920-1120)/2 = 400 per lato
          -> contenuto 1504 - 800 = 704px a x=608
     mentre l'hero della STESSA pagina, che non ha cap, misura 1120 a x=400.

   Misurato prima di questa correzione su /menu/, /storie/, /ristoranti/ e
   /ristoranti/{citta}/: tutte e quattro 704px contro i 1120 di ogni template Elementor.
   Sono le quattro rotte segnalate come "contenuti compressi in colonne strette e incoerenti",
   e il difetto e' invisibile sotto i 1504px, che e' il motivo per cui non era emerso.

   La correzione e' togliere il cap, non cambiare il padding: --body-inset da solo centra
   gia' il contenuto a 1120 esatti a qualunque larghezza. Le tre superfici sono trasparenti
   (verificato: background-color rgba(0,0,0,0), nessuna background-image), quindi allargare
   la scatola non sposta nessuno sfondo. Specificita' raddoppiata (0,2,0) per battere la
   regola del plugin senza dipendere dall'ordine di caricamento. */
.tmk-menu-hub.tmk-menu-hub,
.tmk-stack.tmk-stack,
.tmk-city.tmk-city{ max-width:none }

/* ---------------------------------------------------------------------------------------
   2. RISULTATI DI RICERCA (/?s=...) — template #569, widget archive-posts skin Cards
      Avatar e metadati sono spenti alla fonte nelle impostazioni del widget (PARTE 3).
      Queste due righe sono la cintura di sicurezza se un controllo torna al proprio
      default: il default di Elementor Pro E' avatar visibile + meta ['date','comments'].
   --------------------------------------------------------------------------------------- */
.tmk-sr__results .elementor-post__avatar,
.tmk-sr__results .elementor-post__meta-data{ display:none !important }
.tmk-sr__results .elementor-post__excerpt:empty{ display:none }

/* Tipo di contenuto. Le classi type-* le stampa WordPress da se' su ogni card
   (get_post_class), quindi l'etichetta e' un dato reale della pagina, non un valore
   inventato ne' una tassonomia nuova. Verificato nel markup servito: type-location,
   type-post, type-page (5 tipi sono in ricerca: location, post, page, job, event). */
.tmk-sr__results .elementor-post__text::before{
  display:block;
  margin:0 0 var(--space-2);
  font-family:var(--font-structure);
  font-weight:var(--weight-structure-bold);
  font-size:var(--text-caption);
  line-height:var(--leading-caption);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--color-action-primary-on-light);
}
.tmk-sr__results article.type-location .elementor-post__text::before{ content:'Ristorante' }
.tmk-sr__results article.type-post     .elementor-post__text::before{ content:'Storia' }
.tmk-sr__results article.type-event    .elementor-post__text::before{ content:'Evento' }
.tmk-sr__results article.type-job      .elementor-post__text::before{ content:'Posizione aperta' }
.tmk-sr__results article.type-page     .elementor-post__text::before{ content:'Pagina' }

/* Titolo: era verde (#50643B, il globale `accent` del kit) — l'unico titolo verde del sito.
   Portato sul token di testo primario, come ogni altra card. */
.tmk-sr__results .elementor-post__title,
.tmk-sr__results .elementor-post__title a{ color:var(--color-text-primary) }

/* "Esplora" era testo nudo dove ogni altra card del sito ha una chip piena. Stessi valori
   della chip del sistema card (.tmk-card__action): ember-600, radius soft, 6/14, Basis 700
   caps. ember-600 su tatami-50 = 4.65:1, AA per testo normale (ember-500 sarebbe 3.47:1). */
/* Il selettore porta il tipo `a` (0,2,1) di proposito: la regola di Elementor Pro per
   .elementor-widget-archive-posts .elementor-post__read-more e' (0,2,0) e mette
   color:var(--e-global-color-accent), cioe' il VERDE #50643B — misurato dopo il primo
   tentativo: chip ember con etichetta verde, 1.9:1. Una regola a pari specificita' perdeva
   o vinceva a seconda dell'ordine di stampa. Il colore e' anche impostato sul controllo del
   widget (PARTE 3), cosi' resta visibile e modificabile nell'editor.
   Metriche identiche a .tmk-cta--sm del design system (8/16), non valori nuovi. */
/* Bersaglio tocco: inline-flex + min-height 44px, la soglia che il progetto dichiara.
   Con il solo padding 8/16 la chip misurava 36px (misurato) — sotto soglia, come le chip
   delle card che l'audit gia' segnala. Qui e' un'azione autonoma, non una micro-chip
   sopra una fotografia, quindi prende la metrica del ruolo CTA. */
.tmk-sr__results a.elementor-post__read-more{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:var(--space-3);
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-soft);
  background:var(--color-action-primary);
  color:var(--color-action-on-primary);
  font-family:var(--font-structure);
  font-weight:var(--weight-structure-bold);
  font-size:var(--text-caption);
  line-height:var(--leading-caption);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  text-decoration:none;
  transition:background var(--motion-feedback) var(--ease-out);
}
.tmk-sr__results a.elementor-post__read-more:hover{ background:var(--color-action-primary-hover) }

/* ---------------------------------------------------------------------------------------
   3. EVENTO SINGOLO (#562)
      "Informazioni pratiche" era un H2 con filetto ember seguito dal nulla: 4 dei 5 eventi
      hanno event_formula/address/phone/accessibility vuoti, e il widget text-editor rende
      comunque <p></p> (verificato nel markup servito), quindi il container non e' vuoto per
      Elementor e la sezione veniva stampata. :has() risolve senza toccare ne' PHP ne' i
      dati: la riga sparisce se il suo <p> e' vuoto, e la sezione intera sparisce se NESSUNA
      delle quattro ha contenuto. Cosi' l'H2 non resta mai sospeso su niente.
   --------------------------------------------------------------------------------------- */
.tmk-event-practical__formula:has(p:empty),
.tmk-event-practical__address:has(p:empty),
.tmk-event-practical__phone:has(p:empty),
.tmk-event-practical__access:has(p:empty){ display:none }

.tmk-event-practical:not(:has(:is(.tmk-event-practical__formula,
                                  .tmk-event-practical__address,
                                  .tmk-event-practical__phone,
                                  .tmk-event-practical__access) p:not(:empty))){ display:none }

/* Stessa cosa per il corpo: nessuno dei 5 eventi ha post_content, e theme-post-content con
   contenuto vuoto non stampa il widget (Elementor salta il wrapper del widget) ma il
   container resta, con il suo padding. */
.tmk-event-body-wrap:not(:has(.elementor-widget)){ display:none }

/* Banda di chiusura di evento e posizione: il container-link accanto al titolo era
   content_width:full, quindi prendeva 908px dei 1120 (misurato) e "Esplora" partiva dal
   proprio bordo sinistro a x=372 invece che dal lato destro della banda; il titolo,
   rimasto con 196px, andava a capo. Il link torna a larghezza intrinseca e space-between
   fa il suo lavoro. */
.tmk-event-related > .e-con-inner > .e-con,
.tmk-job-related  > .e-con-inner > .e-con{ width:auto; flex:0 0 auto }

/* ...e "Esplora" diventa la chip che ogni altra banda di chiusura del sito ha. */
.tmk-event-related__action,
.tmk-job-related__action{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:var(--space-2) var(--space-5);
  border-radius:var(--radius-soft);
  background:var(--color-action-primary);
  transition:background var(--motion-feedback) var(--ease-out);
}
.tmk-event-related__action .elementor-heading-title,
.tmk-job-related__action .elementor-heading-title{ color:var(--color-action-on-primary) }
.tmk-event-related > .e-con-inner > .e-con:hover .tmk-event-related__action,
.tmk-job-related  > .e-con-inner > .e-con:hover .tmk-job-related__action{
  background:var(--color-action-primary-hover);
}

/* ---------------------------------------------------------------------------------------
   4. SHOP (#252) — il link finale allo shop
      Il widget dichiara text_color = tmk_text_inverse, ma il colore lo decide l'<a> dentro
      il text-editor, che prendeva il colore link del kit: #9E3910 su ink = 2.44:1, cioe'
      il link meno leggibile della pagina, su una pagina shop. Diventa una CTA secondaria
      in crema: tatami-50 su ink = ~15:1, e un bersaglio da 44px di altezza.
      "Scrivici" resta l'unica CTA primaria della schermata: contenuti e destinazioni
      non cambiano.
   --------------------------------------------------------------------------------------- */
.tmk-sh-conversion__link a{
  display:inline-block;
  margin-top:var(--space-2);
  padding:11px 26px;
  border:1.5px solid var(--color-text-inverse);
  border-radius:var(--radius-soft);
  color:var(--color-text-inverse);
  text-decoration:none;
  font-family:var(--font-structure);
  font-weight:var(--weight-structure-bold);
  font-size:var(--text-caption);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  transition:background var(--motion-feedback) var(--ease-out);
}
.tmk-sh-conversion__link a:hover{ background:rgba(253,251,245,0.12) }

/* ---------------------------------------------------------------------------------------
   5. CONTATTI (#251) — "Le nostre sedi"
      Blocco generato SOLO dai CPT `location` (address / phone / email gia' verificati
      contro l'archivio in _BUILD/140-141). Niente indirizzi, telefoni o email inventati:
      dove il dato non esiste nell'archivio (telefono di Fiumicino e Capo d'Orlando, email
      di Capo d'Orlando) la riga semplicemente non c'e'.
   --------------------------------------------------------------------------------------- */
.tmk-sedi{ display:grid; gap:var(--space-7) }
.tmk-sedi__city{
  margin:0 0 var(--space-4);
  font-family:var(--font-structure);
  font-weight:var(--weight-structure-bold);
  font-size:var(--text-caption);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--color-action-primary-on-light);
}
.tmk-sedi__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.tmk-sedi__item{ display:grid; gap:var(--space-2); align-content:start }
.tmk-sedi__name{
  font-family:var(--font-voice);
  font-weight:var(--weight-voice);
  font-size:var(--text-h4);
  line-height:var(--leading-h4);
  color:var(--color-text-primary);
  text-decoration:none;
}
.tmk-sedi__name:hover{ color:var(--color-action-primary-on-light) }
.tmk-sedi__addr{
  font-family:var(--font-structure);
  font-size:var(--text-body-small);
  line-height:var(--leading-body-small);
  color:var(--color-text-secondary);
}
.tmk-sedi__links{ display:flex; flex-wrap:wrap; gap:var(--space-2) }
.tmk-sedi__links a{
  display:inline-block;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-action-secondary);
  border-radius:var(--radius-soft);
  background:var(--color-surface-raised);
  font-family:var(--font-structure);
  font-weight:var(--weight-structure-medium);
  font-size:var(--text-caption);
  color:var(--color-text-primary);
  text-decoration:none;
}
.tmk-sedi__links a:hover{ background:var(--color-surface-sunken) }

/* ---------------------------------------------------------------------------------------
   6. ALLERGENI (#254) — colonna di lettura
      Il testo legale legacy occupava tutta la larghezza disponibile: righe da ~1376px a
      1440 (oltre 200 caratteri). La pagina diventa un documento Elementor (PARTE 6) con
      un H1 reale e un container boxed a 680; questa regola tiene la prosa e l'elenco sulla
      stessa misura anche se il boxed_width viene cambiato dall'editor.
   --------------------------------------------------------------------------------------- */
/* La colonna di lettura resta DENTRO il wrapper standard (contratto, criterio 3) ma e'
   allineata al suo bordo sinistro invece che centrata: cosi' H1, breadcrumb e prosa
   condividono un solo asse (x=160 a 1440), come su /la-nostra-storia/. Centrandola,
   l'H1 restava a 160 e il testo partiva a 380 — il doppio asse che l'audit segnala
   come difetto di composizione piu' visibile delle pagine di dettaglio. */
.tmk-lg-body > .e-con-inner{ margin-inline:0 }
.tmk-lg-body__text{ max-width:var(--container-narrow) }
.tmk-lg-body__text p,
.tmk-lg-body__text li{
  font-family:var(--font-structure);
  font-size:var(--text-body);
  line-height:var(--leading-prose);
  color:var(--color-text-primary);
  text-wrap:pretty;
}
.tmk-lg-body__text ul{ margin:0 0 var(--space-5); padding-left:1.3em; display:grid; gap:var(--space-2) }
.tmk-lg-body__text a{ color:var(--color-action-primary-on-light); text-underline-offset:2px }
/* TMK 195-grid-and-ux-fixes:END *//* End custom CSS */