/* Sami's Marco Island: readability layer, loaded last on every page.
   Andy, 2026-10-21: "hard to read for older folks." Keep the look, raise legibility.
   Targets: body 18px desktop / 17px mobile at weight 400, text at 7:1 on cream and white,
   small uppercase labels 14px with 0.08em tracking, line-height 1.6, 44px tap targets.
   One source of truth: tokens first, then the selectors the page stylesheets size by hand. */
:root{
  --cr:#9A0B20; --brand:#9A0B20; --crimson:#9A0B20; /* was #C0102A: 6.3:1 on white, 5.3:1 on cream; this is 8.6 and 7.3 */
  --txt:#3a3a3a; --mid:#3a3a3a; --charcoal:#3a3a3a;  /* 11.4:1 on white, 9.7:1 on cream */
  --fs-body:1.0625rem;
  --fs-label:.875rem;
  --ls-label:.08em;
}
@media(min-width:768px){:root{--fs-body:1.125rem}}

body{font-weight:400;line-height:1.6;font-size:var(--fs-body);color:var(--ink,#1a1a1a)}

/* ── body copy ── */
.sbody,.lede,.lead,.why-l,.why-links,.faq p,.card p,.act p,.note,.msec .snote,.rctx,.rev-meta,
.mi-desc,.item-desc,.item-name,.pp,.infocard dl,.bar-list li,.policy-page p,.policy-page li,.hsub,
nav.more a,.key,.crumbs,.mprint,.gal-grid figcaption,.rcdt,.rcnm,.faq h3,.mi-time,.item-price,.c-phone{
  font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--txt)}
.item-name,.faq h3,.rcnm,.item-price,.mi-time{font-weight:700}
.item-name,.faq h3{color:var(--ink)}
.item-price,.pv,.c-phone,.crumbs a{color:var(--cr)}
.pl{color:var(--txt);font-size:inherit}
.sbody{max-width:34em}

.italian-txt .sbody{color:rgba(255,255,255,.92)}
.hsub{color:#fff}
.why-v{font-size:2.25rem}
.pp,.pv{white-space:normal}
.updated,.policy-page .updated{font-size:1rem;color:var(--txt)}
.gf{font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:#1f5a28}
small{font-size:1rem}
.policy-page p,.policy-page li{line-height:1.6}

/* inline links keep their underline */
.why-l a,.why-links a,.faq a,.sbody a,.note a,.lede a,.infocard a:not([class]),.mprint a,.gal-link a,
.policy-page a,.crumbs a,.fcp a,.fleg a,.fleg button,nav.more a,.c-phone{text-decoration:underline;text-underline-offset:3px}

/* ── small uppercase labels: 14px, tighter tracking ── */
.scap,.music-time,.pizza-sub,.contact-tagline,.gal-sub,.card .tag,.act .day,.mi-tag,.kw-eyebrow,.sub,
.hero-tag,.hdr-link,.nl,.msl,.msl-special,.btn-solid,.btn-outline,.btn-white,.btn-ghost,.btn,
.card .more,.mjump a,.related a,.fh,.skip,.skip-link{
  font-size:var(--fs-label);letter-spacing:var(--ls-label)}
.scap,.music-time,.pizza-sub,.contact-tagline,.gal-sub,.card .tag,.act .day,.mi-tag{color:var(--txt)}
.scap-cr,.card .tag,.act .day,.mi-tag{color:var(--cr)}
.hstat-l{font-size:.8125rem;letter-spacing:var(--ls-label);color:#fff}
.logo-sub{font-size:.8125rem;letter-spacing:var(--ls-label);color:var(--txt)}
.fb .logo-sub{color:rgba(255,255,255,.85)}
.fh{color:rgba(255,255,255,.85)}
.hdr-phone{font-size:1rem}
.hero-tag{font-size:var(--fs-label)}
.msl:hover{letter-spacing:var(--ls-label)}
.msl{color:#fff}
.divider-icon{color:var(--cr)}
.mi-arr{color:var(--cr)}

/* ── dark surfaces ── */
.fb p,.fc a,.fc address a,.fc p,.fhr,.fhr small{font-size:var(--fs-body);font-weight:400;line-height:1.6;color:rgba(255,255,255,.88)}
.fb p{max-width:20em}
.fc a:hover,.fc address a:hover{color:#fff}
.fhr.mu{color:#C9A84C}
.fcp,.fcp a,.fleg a,.fleg button{font-size:var(--fs-label);color:rgba(255,255,255,.88)}
.site-footer,.site-footer .footer-legal a,.site-footer .footer-legal button{font-size:1rem}

/* ── tap targets: 44px ── */
.nl,.hdr-link,.hdr-phone{display:inline-flex;align-items:center;min-height:44px}
.nl::after,.hdr-link::after{bottom:8px}
.brg{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.fc a,.fc address a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
.fc p{margin-bottom:.5rem}
.fleg a,.fleg button,.footer-legal a,.footer-legal button{display:inline-flex;align-items:center;min-height:44px}
.fleg{gap:.25rem 1.25rem}
.mjump a,.related a{min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs{padding-block:.25rem}
.card .more{display:inline-flex;align-items:center;min-height:44px;padding-top:0}
.ffot-soc a{width:44px;height:44px}
.stt{width:44px;height:44px}
nav.more a{display:inline-flex;align-items:center;min-height:44px}
.btn-outline-dark{font-size:var(--fs-label);min-height:44px;display:inline-flex;align-items:center}
.skip,.skip-link{min-height:44px}

/* ── fixes found by measuring ── */
.fb .logo-sub,.logo-sub{font-size:.8125rem;letter-spacing:var(--ls-label)}
nav.more h2{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--txt)}
.contact-h span{color:var(--txt)}
.msl:hover,.msl[aria-current="page"],.msl-special,.msl-special:hover{background:rgba(0,0,0,.24)}
.msl-special{border-bottom-color:rgba(255,255,255,.2)}
.rev-stars,.rcst{color:#a86f00}
/* brand wordmarks keep the original red; the darker token is for text and fills */
.logo-name,.logo-text,.logo{color:#C0102A}
.h1 em{color:#FF7A87}
.footer-legal a{text-decoration:underline;text-underline-offset:3px}
.footer-legal button:hover,.footer-legal a:hover,.footer-legal a:focus-visible,.footer-legal button:focus-visible{color:var(--cr)}
/* hero copy sits on a photo: a deeper scrim keeps white text at 7:1 */
.hov{background:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.88) 100%)}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo-text,.logo-sub{display:block}
.site-header .logo{flex-direction:column;justify-content:center}
.nl{min-width:44px;justify-content:center}
.c-phone{display:flex;align-items:center;min-height:44px}
.fcp a{display:inline-flex;align-items:center;min-height:44px}

/* review fixes: wrap the bigger menu strip on desktop, keep the 375 sticky header compact */
@media(min-width:960px){.msin{flex-wrap:wrap}}
@media(max-width:559px){
  .hi{padding-block:0;gap:0 1rem}
  .hdr-ctas{gap:0 1rem}
}
/* larger hero copy must grow the hero on phones instead of sliding under the fixed header */
@media(max-width:767px){.hero{height:auto;min-height:100svh;max-height:none}.hcnt{padding-top:2rem}}