/* ============================================================================
   Le 2 Sicilie — Lounge Bar & Bistro
   Design system. Hand-authored: no Tailwind CDN, no framework.

   Every colour below is SAMPLED from the client's own assets, not invented:
     gold      — from le2sicilielogoupdated.png (the Trinacria mark)
     pistachio — from yummy.jpeg, the marzipan on their cassata
   Do not substitute "close enough" values.

   Concept: "Le Due". The name means the Two Sicilies. The business is two
   businesses at one address — a pastry counter from 6am, a pizzeria and bar
   until 11. The layout carries that pairing throughout.
   ========================================================================= */

:root {
  /* ---- ground -------------------------------------------------------- */
  --pece:        #100E0C;   /* warm near-black. dominant */
  --pece-soft:   #1A1613;   /* raised surface */
  --pece-lift:   #241E19;   /* floating surface, card hover */
  --pece-line:   #2E2721;   /* hairline on dark */

  /* ---- gold, sampled from the logo ----------------------------------- */
  --oro:         #E0B870;   /* highlight, sampled from the mark. 10.3:1 on --pece */
  /* the two below are contrast-tuned derivatives, not samples. The updated
     mark's gold runs brighter (#E0B058–#F0C870) than the original bronze, but
     these darker steps are what clear WCAG on near-black — do not "correct"
     them toward the artwork or the text fails AA. */
  --oro-deep:    #A87838;   /* mid tone. rules, borders. 4.96:1 on --pece */
  --oro-dim:     #8A6430;   /* recessed. 3.38:1 on --pece-soft — large text only */

  /* ---- pistachio, sampled from their cassata ------------------------- */
  --pistacchio:  #78A050;
  --pistacchio-d:#5C7A3E;

  /* ---- warm light ---------------------------------------------------- */
  --crema:       #F2E7CE;   /* warm paper. light panels */
  --crema-dim:   #D9CBAC;
  --amarena:     #8E2230;   /* the glace cherry. used once or twice, never as decoration */

  /* ---- ink ----------------------------------------------------------- */
  --ink-hi:      #F6EFE2;   /* on dark */
  --ink:         #D8CDBB;
  --ink-dim:     #9E9384;
  --ink-dark:    #2A211A;   /* on crema */
  --ink-dark-dim:#6B5D4E;

  /* ---- type ---------------------------------------------------------- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- structure ----------------------------------------------------- */
  --rail:    92px;          /* the left rail. echoes the counter tray rails */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --measure: 1240px;
  --radius:  2px;           /* almost none. uniform rounding is an AI tell */

  /* ---- motion -------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--pece);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-hi);
  margin: 0;
  /* Fraunces variable axes: slight optical softness and a touch of wonk.
     This is what stops it reading as generic Playfair. */
  font-variation-settings: 'SOFT' 18, 'WONK' 1;
}

p { margin: 0 0 1.1em; }
a { color: inherit; }

::selection { background: var(--oro); color: var(--pece); }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--oro); color: var(--pece);
  padding: 0.7rem 1.1rem; font-weight: 600; font-size: 0.9rem;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 0.6rem; }

/* ============================================================================
   type scale
   ========================================================================= */

.t-display {
  font-size: clamp(2.6rem, 1.5rem + 5.4vw, 6.2rem);
  letter-spacing: -0.035em;
}
.t-h2 {
  font-size: clamp(1.9rem, 1.2rem + 3.1vw, 3.5rem);
  letter-spacing: -0.028em;
}
.t-h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.95vw, 1.75rem);
  letter-spacing: -0.02em;
}

/* the small-caps gold label. used for eyebrows and rail labels only. */
.t-label {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oro);
  line-height: 1;
}

.t-lede {
  font-size: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink);
  max-width: 54ch;
}

.t-it { font-style: italic; font-variation-settings: 'SOFT' 40, 'WONK' 1; }

/* prices are monospace — like the printed tags propped in a pastry case */
.t-price {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* ============================================================================
   layout — the rail
   The persistent left rail carries section labels vertically, echoing the
   steel tray rails in the counter. It is structural, not decorative: it is
   also what makes the grid asymmetric rather than centred.
   ========================================================================= */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
}

.section__grid {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.section__grid > * { min-width: 0; }

@media (min-width: 900px) {
  .section__grid {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: 0;
  }
}

.rail { display: none; }

@media (min-width: 900px) {
  .rail {
    display: block;
    position: relative;
    border-left: 1px solid var(--oro-dim);
    padding-top: 0.4rem;
  }
  .rail__label {
    position: sticky;
    top: 7rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-left: -0.62rem;
    background: var(--pece);
    padding-block: 0.75rem;
    display: inline-block;
  }
  /* the rail tick — a short horizontal stub, like a shelf bracket */
  .rail__label::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    bottom: -1.6rem;
    width: 1px; height: 1rem;
    background: var(--oro-dim);
    transform: translateX(-50%);
  }
  .section--on-crema .rail { border-left-color: rgba(138, 100, 48, 0.55); }
  .section--on-crema .rail__label { background: var(--crema); color: var(--oro-dim); }
}

.section--on-crema { background: var(--crema); color: var(--ink-dark); }
.section--on-crema h2, .section--on-crema h3 { color: var(--ink-dark); }
.section--on-crema .t-lede { color: var(--ink-dark-dim); }

/* ============================================================================
   the gold hairline — the one repeated ornament, borrowed from the logo's rule
   ========================================================================= */

.hair {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    var(--oro-deep) 0%,
    var(--oro-dim) 34%,
    transparent 100%);
}
.hair--center {
  background: linear-gradient(90deg, transparent, var(--oro-deep), transparent);
}

/* ============================================================================
   buttons
   ========================================================================= */

.btn {
  --btn-bg: var(--oro);
  --btn-fg: var(--pece);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
  /* animate transform and opacity only — never the `all` keyword */
  transition: background-color 200ms var(--ease),
              border-color 200ms var(--ease),
              color 200ms var(--ease),
              transform 200ms var(--ease-out);
}
.btn:hover  { background: var(--crema); border-color: var(--crema); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--oro);
  border-color: var(--oro-deep);
}
.btn--ghost:hover {
  background: rgba(224, 184, 112, 0.1);
  border-color: var(--oro);
  color: var(--oro);
}

.btn__ico { width: 1.05em; height: 1.05em; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

/* ============================================================================
   header
   ========================================================================= */

.site-head {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: transparent;
  transition: background-color 300ms var(--ease),
              border-color 300ms var(--ease),
              backdrop-filter 300ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head[data-stuck='true'] {
  background: rgba(16, 14, 12, 0.93);
  backdrop-filter: blur(9px) saturate(1.1);
  border-bottom-color: var(--pece-line);
}

.site-head__logo img { height: clamp(40px, 5.4vw, 56px); width: auto; }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: 1.9rem; }
}
.nav a {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  position: relative; padding-block: 0.35rem;
  transition: color 180ms var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: right;
  transition: transform 260ms var(--ease-out);
}
.nav a:hover { color: var(--oro); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* mobile: a single WhatsApp action, always reachable */
.head-cta { padding: 0.62rem 1rem; font-size: 0.7rem; }

/* ============================================================================
   HERO
   Rebuilt. Three things were wrong with the first pass:

   1. The mark carried its own "LOUNGE BAR & BISTRO" strapline, which is ~85%
      black and vanished on the dark ground, leaving a band of dead space that
      read as unfinished. The hero now uses logo-mark.webp — the wordmark cut
      above that line — and the strapline is set as live type.
   2. The copy block sat in the WEAKEST part of the scrim, so gold outlines
      floated over moving video. The scrim now carries a solid plinth.
   3. The hero ignored the left rail the rest of the site is built on, so it
      read as a stock hero bolted to a designed page. The rail is now here too.
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--pece);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video,
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* two stacked layers crossfade so the hero never cuts or goes blank */
.hero__layer { opacity: 0; transition: opacity 1200ms var(--ease); }
.hero__layer[data-active='true'] { opacity: 1; }

/* The plinth. The bottom 46% is effectively solid, so the mark and the type
   sit on ground rather than on moving imagery. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(16,14,12,1)    0%,
      rgba(16,14,12,0.99) 26%,
      rgba(16,14,12,0.94) 40%,
      rgba(16,14,12,0.74) 56%,
      rgba(16,14,12,0.42) 74%,
      rgba(16,14,12,0.34) 88%,
      rgba(16,14,12,0.62) 100%),
    radial-gradient(130% 74% at 8% 104%, rgba(138,100,48,0.30) 0%, transparent 62%);
}

/* No rail in the hero. It was tried and cut: a vertical line beside the copy
   fought the mark rather than framing it. The rail stays a section device. */
.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.4rem, 8vw, 6rem);
}

.hero__mark {
  width: clamp(268px, 33vw, 452px);
  height: auto;
  margin-bottom: 0.95rem;
}
@media (max-width: 699px) {
  .hero__mark { width: min(88vw, 420px); margin-bottom: 0.85rem; }
}

/* the strapline, set live because the artwork's own version is invisible here.
   Hairlines either side rhyme with the gold rule inside the mark. */
.hero__strap {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 clamp(1.5rem, 3.4vw, 2.3rem);
  font-family: var(--body);
  font-size: clamp(0.62rem, 0.56rem + 0.2vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--oro);
}
.hero__strap::after {
  content: ''; height: 1px; flex: 1; max-width: 190px;
  background: linear-gradient(90deg, var(--oro-deep), transparent);
}

/* Smaller than .t-display was. An ornate mark and a 99px serif were both
   trying to be the primary element, and the hero looked crowded. */
.t-hero {
  font-size: clamp(1.85rem, 1.15rem + 2.7vw, 3.45rem);
  letter-spacing: -0.028em;
  line-height: 1.04;
  max-width: 15ch;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
}

.hero__lede {
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.14rem);
  line-height: 1.72;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: clamp(1.7rem, 3.2vw, 2.4rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* scroll cue — a hairline that drains downward, not a bouncing chevron */
.hero__scroll {
  position: absolute; z-index: 3;
  right: var(--gutter); bottom: clamp(3.4rem, 8vw, 6rem);
  display: none;
  align-items: center; gap: 0.7rem;
  writing-mode: vertical-rl;
  font-family: var(--body); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  transition: color 200ms var(--ease);
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll:hover { color: var(--oro); }
.hero__scroll i {
  display: block; width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, var(--oro-deep));
  position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ''; position: absolute; inset-inline: 0; top: -60%;
  height: 60%; background: var(--oro);
  animation: drain 2.6s var(--ease) infinite;
}
@keyframes drain {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll i::after { animation: none; opacity: 0.6; top: 0; }
}

/* ---- the state strip -------------------------------------------------
   Says what is actually happening right now, from their real 6am–11pm span.
   Useful information, not decoration. Computed in Malta time, never the
   visitor's — most of their trade is tourists on foreign clocks.          */

.state {
  position: relative; z-index: 3;
  border-block: 1px solid var(--pece-line);
  background: var(--pece-soft);
}
.state__inner {
  max-width: var(--measure); margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem;
}
.state__sep { color: var(--oro-deep); }

/* On a phone this was wrapping to three ragged lines — status, detail and the
   hours range each landing on their own row. The hours are already in Find Us,
   so mobile drops them and keeps one clean line. */
@media (max-width: 720px) {
  .state__inner { padding-block: 0.7rem; font-size: 0.76rem; }
  .state__hours { display: none; }
  .state__detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.state__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pistacchio); flex: none;
  box-shadow: 0 0 0 3px rgba(120,160,80,0.18);
}
.state[data-open='false'] .state__dot {
  background: var(--amarena);
  box-shadow: 0 0 0 3px rgba(142,34,48,0.2);
}
.state__now { color: var(--ink-hi); font-weight: 600; }
.state__detail { color: var(--ink-dim); }
.state__hours { margin-left: auto; color: var(--ink-dim); font-family: var(--mono); font-size: 0.72rem; letter-spacing: -0.03em; }

/* ============================================================================
   IL BANCO — the signature.
   A sideways-scrolling pastry counter, browsed the way you browse the real
   glass case. Card widths are DELIBERATELY UNEVEN, sized to their contents:
   a tray of cannoli is not the width of a tray of zeppole. Uniform card
   sizing is one of the clearest tells of a generated layout.
   ========================================================================= */

.banco { background: var(--pece); position: relative; }

/* warm light spilling out of the case, the way it looks at six in the morning */
.banco::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 55% at 50% 62%, rgba(224,184,112,0.11) 0%, transparent 68%);
}

.banco__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem;
}

.banco__scroller {
  position: relative;
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 2.4rem;
  /* bleed past the gutter so the case runs off the edge of the screen —
     it should feel longer than the viewport, because it is */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--oro-dim) transparent;
}
.banco__scroller::-webkit-scrollbar { height: 3px; }
.banco__scroller::-webkit-scrollbar-track { background: var(--pece-line); }
.banco__scroller::-webkit-scrollbar-thumb { background: var(--oro-dim); }

.tray {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  background: var(--pece-soft);
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 260ms var(--ease), transform 320ms var(--ease-out);
}
.tray:hover { border-color: var(--oro-dim); transform: translateY(-4px); }
.tray:focus-within { border-color: var(--oro); }

/* the uneven widths. each is sized to what it holds. */
.tray--wide   { width: min(78vw, 420px); }
.tray--mid    { width: min(62vw, 310px); }
.tray--narrow { width: min(52vw, 236px); }

.tray__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pece-lift); }
.tray--wide .tray__img { aspect-ratio: 16 / 10; }
.tray__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.tray:hover .tray__img img { transform: scale(1.045); }
/* warm the photography so the mixed phone-camera lighting reads as one set */
.tray__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,14,12,0.55), transparent 55%);
  mix-blend-mode: multiply;
}

.tray__body { padding: 1rem 1.15rem 1.25rem; }
.tray__name {
  font-family: var(--display); font-size: 1.16rem;
  color: var(--ink-hi); margin-bottom: 0.3rem;
  font-variation-settings: 'SOFT' 22, 'WONK' 1;
}
.tray__desc { font-size: 0.86rem; color: var(--ink-dim); line-height: 1.55; margin: 0; }

/* the steel rail the trays sit on */
.banco__rail {
  height: 3px;
  margin-inline: calc(var(--gutter) * -1);
  background:
    linear-gradient(to bottom,
      #6E6862 0%, #C8C4BC 38%, #8A847C 62%, #43403C 100%);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.9);
}

.banco__note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
  max-width: 62ch;
}
.banco__note strong { color: var(--oro); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .tray, .tray:hover, .tray__img img, .tray:hover .tray__img img {
    transition: none; transform: none;
  }
}

/* ============================================================================
   LE DUE — the two halves. the pairing the name promises.
   ========================================================================= */

.due { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--pece-line); }
@media (min-width: 860px) { .due { grid-template-columns: 1fr 1fr; } }

.due__half {
  position: relative;
  padding: clamp(2rem, 4.4vw, 3.4rem);
  background: var(--pece);
  min-height: 100%;
  display: flex; flex-direction: column;
}
.due__half--sera { background: var(--pece-soft); }

.due__num {
  font-family: var(--display);
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 0.8;
  color: var(--oro-dim);
  margin-bottom: 0.9rem;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.due__hours {
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--oro); letter-spacing: -0.03em; margin-bottom: 0.5rem;
}
.due__list { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.due__list li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--pece-line);
  font-size: 0.92rem;
  display: flex; justify-content: space-between; gap: 1rem;
}
.due__list li:last-child { border-bottom: 1px solid var(--pece-line); }

/* ============================================================================
   reviews — see "platform review cards" further down
   ========================================================================= */

.scoreboard {
  display: flex; flex-wrap: wrap; gap: 0 2.4rem;
  align-items: baseline;
  margin-bottom: 2.6rem;
}
.score__n {
  font-family: var(--display); font-size: 2.1rem; color: var(--oro);
  font-variation-settings: 'SOFT' 10, 'WONK' 0;
}
.score__src { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }

/* ============================================================================
   find us
   ========================================================================= */

.visit { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 900px) { .visit { grid-template-columns: 1fr 1.15fr; gap: 3rem; } }

.map-frame {
  position: relative;
  border: 1px solid var(--oro-dim);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  background: var(--pece-soft);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(0.35) contrast(1.05) brightness(0.86); }

.facts { list-style: none; padding: 0; margin: 0; }
.facts li { padding: 0.9rem 0; border-bottom: 1px solid var(--pece-line); display: grid; gap: 0.15rem; }
.facts dt, .facts .k {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro);
}
.facts .v { color: var(--ink-hi); }
.facts a { color: var(--ink-hi); text-decoration: none; border-bottom: 1px solid var(--oro-dim); transition: border-color 180ms var(--ease), color 180ms var(--ease); }
.facts a:hover { color: var(--oro); border-bottom-color: var(--oro); }

.hours-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.hours-table th, .hours-table td { text-align: left; padding: 0.45rem 0; border-bottom: 1px solid var(--pece-line); font-weight: 400; }
.hours-table td:last-child { text-align: right; font-family: var(--mono); font-size: 0.76rem; letter-spacing: -0.03em; color: var(--oro); }
.hours-table tr[data-today='true'] th,
.hours-table tr[data-today='true'] td { color: var(--ink-hi); }
.hours-table tr[data-today='true'] th::after {
  content: ' · today'; color: var(--pistacchio); font-size: 0.72rem; letter-spacing: 0.1em;
}

/* ============================================================================
   contact — composes a WhatsApp message. no backend, nothing to break.
   ========================================================================= */

.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro); }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--pece-soft);
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  color: var(--ink-hi);
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--oro-dim); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--oro); background: var(--pece-lift);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); opacity: 0.65; }

.form__note { font-size: 0.82rem; color: var(--ink-dim); }

/* ============================================================================
   FAQ — visible, and the source of the FAQPage markup.
   Real questions people type, answered in plain words.
   ========================================================================= */

.faq { border-top: 1px solid var(--pece-line); }
.faq details {
  border-bottom: 1px solid var(--pece-line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);
  color: var(--ink-hi);
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  transition: color 180ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro); }
.faq summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro);
  transform: translateY(-60%) rotate(45deg);
  transition: transform 240ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 2.5rem 1.35rem 0; color: var(--ink-dim); max-width: 68ch; }
.faq__a p:last-child { margin-bottom: 0; }

/* ============================================================================
   footer
   ========================================================================= */

.site-foot { background: #0A0908; border-top: 1px solid var(--pece-line); padding-block: clamp(2.6rem, 5vw, 4rem); }
.foot__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.foot__logo img { width: 210px; height: auto; margin-bottom: 1rem; }
.foot h3 { font-family: var(--body); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); margin-bottom: 0.9rem; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.foot a { color: var(--ink-dim); text-decoration: none; font-size: 0.9rem; transition: color 180ms var(--ease); }
.foot a:hover { color: var(--oro); }
.foot address { font-style: normal; color: var(--ink-dim); font-size: 0.9rem; line-height: 1.75; }
.foot__base {
  margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--pece-line);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.76rem; color: var(--ink-dim);
}

/* ============================================================================
   sticky WhatsApp pill — mobile only. their trade runs through WhatsApp.
   ========================================================================= */

.pill {
  position: fixed; z-index: 90;
  left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  background: var(--oro); color: var(--pece);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.85), 0 0 0 1px rgba(224,184,112,0.35);
  transition: transform 220ms var(--ease-out), background-color 200ms var(--ease);
}
.pill:hover { background: var(--crema); transform: translateX(-50%) translateY(-2px); }
@media (min-width: 900px) { .pill { display: none; } }
@media (prefers-reduced-motion: reduce) { .pill, .pill:hover { transition: none; } }

/* ============================================================================
   SCROLL REVEAL
   Everything rises slightly into place as you reach it. Two things make the
   difference between this and content that "pops":

   1. The observer fires the moment an element touches the viewport, not once
      it is already well inside it — so the motion has finished by the time you
      are looking at it.
   2. Stagger only applies where items sit SIDE BY SIDE. On a phone the review
      cards are a single column, and a per-card delay on top of each card
      entering separately is what made them pop one at a time.
   ========================================================================= */

.rv { opacity: 0; transform: translateY(26px); }
.rv--in {
  opacity: 1;
  transform: none;
  /* transition-delay is kept OUT of the shorthand on purpose. Safari has
     long-standing trouble parsing a custom property inside a `transition`
     shorthand, and a dropped declaration there would mean no animation at all. */
  transition-property: opacity, transform;
  transition-duration: 780ms, 780ms;
  transition-timing-function: var(--ease-out), var(--ease-out);
  transition-delay: var(--rv-d, 0ms), var(--rv-d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv--in { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   MENU PAGE
   The dotted leader between dish and price is the oldest device in menu
   typesetting. It is here because it reads instantly as "menu" — not as a
   card grid, which is what every generated restaurant page reaches for.
   ========================================================================= */

.page-menu { padding-top: 4.6rem; }

.menu-hero {
  padding-block: clamp(2.4rem, 6vw, 4.5rem) clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--pece-line);
}

.menu-nav {
  position: sticky; top: 3.9rem; z-index: 80;
  background: rgba(16,14,12,0.95);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--pece-line);
}
.menu-nav__inner {
  max-width: var(--measure); margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: flex; gap: 1.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-nav__inner::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex: none;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.menu-nav a:hover { color: var(--oro); border-bottom-color: var(--oro-deep); }

.menu-body { padding-block: clamp(2.4rem, 5vw, 4rem) 0; }

.ms { margin-bottom: clamp(2.6rem, 5vw, 4.2rem); scroll-margin-top: 7.5rem; }
.ms__head { margin-bottom: 1.4rem; }
.ms__title { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.ms__it {
  font-family: var(--body); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro-deep);
}
.ms__note {
  margin: 0.55rem 0 0; font-size: 0.86rem; color: var(--ink-dim); max-width: 62ch;
}

.ms__list { list-style: none; margin: 0; padding: 0; }

.mi {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  align-items: baseline;
  gap: 0 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--pece-line);
}
.mi__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  color: var(--ink-hi); margin: 0;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  display: inline-flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.mi__desc {
  margin: 0.2rem 0 0; font-size: 0.845rem; line-height: 1.5;
  color: var(--ink-dim); max-width: 58ch;
}
/* the leader. sits on the baseline of the name row. */
.mi__lead {
  align-self: baseline;
  border-bottom: 1px dotted var(--pece-line);
  transform: translateY(-0.28em);
  min-width: 1.5rem;
}
.mi__price { text-align: right; display: grid; gap: 0.15rem; justify-items: end; }
.mi--nop { grid-template-columns: 1fr; }
.mi--nop .mi__lead { display: none; }

.tag {
  font-family: var(--body); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.16rem 0.4rem; border-radius: 1px; line-height: 1;
  transform: translateY(-0.15em);
}
.tag--sig { border: 1px solid var(--oro-deep); color: var(--oro); }
.tag--veg { border: 1px solid var(--pistacchio-d); color: var(--pistacchio); }

.ms--counter .ms__list {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 720px) {
  .ms--counter .ms__list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

.menu-foot {
  font-size: 0.82rem; color: var(--ink-dim);
  border-top: 1px solid var(--oro-dim); padding-top: 1.1rem; margin-top: 2rem;
}

.menu-cta {
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  padding-top: 2.2rem; border-top: 1px solid var(--pece-line);
}

/* ============================================================================
   MOBILE NAVIGATION
   Below 900px the inline nav is hidden, which left no way to reach the counter,
   Le Due, the menu or Find us without scrolling the whole page. This is the fix.
   A real <button> driving a real overlay — keyboard operable, Escape closes it.
   ========================================================================= */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;      /* full touch target */
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.nav-toggle:hover { border-color: var(--oro-deep); background: rgba(224,184,112,0.07); }
.nav-toggle__bar {
  display: block; height: 1.5px; width: 100%;
  background: var(--oro);
  transition: transform 260ms var(--ease-out), opacity 180ms var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(16,14,12,0.985);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 5rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity 280ms var(--ease), visibility 0s linear 280ms;
}
.nav-overlay[data-open='true'] {
  opacity: 1; visibility: visible;
  transition: opacity 280ms var(--ease), visibility 0s;
}
.nav-overlay__list { list-style: none; margin: 0; padding: 0; }
.nav-overlay__list li { border-bottom: 1px solid var(--pece-line); }
.nav-overlay__list li:first-child { border-top: 1px solid var(--pece-line); }
.nav-overlay a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  color: var(--ink-hi); text-decoration: none;
  font-variation-settings: 'SOFT' 22, 'WONK' 1;
  transition: color 180ms var(--ease);
}
.nav-overlay a:hover { color: var(--oro); }
.nav-overlay a .n {
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--oro-deep); letter-spacing: -0.04em;
}
.nav-overlay__foot { margin-top: 2.2rem; display: grid; gap: 1rem; }
.nav-overlay__foot .t-price { font-size: 0.78rem; }
body[data-nav='open'] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar, .nav-overlay { transition: none; }
}

/* ============================================================================
   LE DUE — the wipe
   Two photographs, one slider. Drag from the counter at six in the morning to
   the oven at ten at night. The duality the name promises, made literal and
   operable rather than described in a paragraph.

   The control is a real <input type="range">, laid transparently over the
   image, so it works with a keyboard and a screen reader announces it. The
   visible handle is decoration on top of a genuine control, not a fake one.
   ========================================================================= */

.wipe {
  --pos: 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--pece-line);
  border-radius: var(--radius);
  background: var(--pece-soft);
  cursor: ew-resize;
  /* pan-y keeps vertical page scrolling working while horizontal drags come
     to us as pointer events */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 700px) { .wipe { aspect-ratio: 4 / 5; } }

.wipe__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
.wipe__img--sera { filter: saturate(0.92) brightness(0.72) contrast(1.06); }
.wipe__img--mattino { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.wipe__grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16,14,12,0.82), transparent 46%);
}

.wipe__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 2px; margin-left: -1px;
  background: var(--oro);
  box-shadow: 0 0 18px rgba(224,184,112,0.55);
  /* The handle is its own drag target, and touch-action:none is the whole
     trick. On the container `pan-y` lets the browser claim the gesture for
     scrolling before a single pointermove arrives, so a finger could never
     slide it — only tap. Here the browser hands us the gesture outright. */
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}
/* A 2px line is not a touch target. This gives it a 60px invisible grab zone
   without changing what you see. */
.wipe__handle::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 60px; transform: translateX(-50%);
}
.wipe__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--pece); border: 1px solid var(--oro);
  display: grid; place-items: center;
  color: var(--oro); font-family: var(--mono); font-size: 0.7rem;
  box-shadow: 0 6px 22px -6px rgba(0,0,0,0.9);
}

/* The range stays for KEYBOARD use only — Tab to it, then arrow keys. It is
   deliberately pointer-inert: as a full-size transparent overlay its invisible
   thumb never lined up with the visible grip, so dragging the grip did nothing
   and only tapping the picture moved it. Pointer input is handled on the
   container instead, in site.js. */
.wipe__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  pointer-events: none;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.wipe:focus-within .wipe__grip { outline: 2px solid var(--oro); outline-offset: 3px; }

.wipe__tag {
  position: absolute; bottom: 0; padding: 1.1rem 1.3rem;
  pointer-events: none;
}
.wipe__tag--l { left: 0; }
.wipe__tag--r { right: 0; text-align: right; }
.wipe__tag .h {
  font-family: var(--display); font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  color: var(--ink-hi); display: block; line-height: 1.1;
  font-variation-settings: 'SOFT' 24, 'WONK' 1;
}
.wipe__tag .t { font-family: var(--mono); font-size: 0.68rem; color: var(--oro); letter-spacing: -0.03em; }

.due-lists { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 1.6rem; }
@media (min-width: 760px) { .due-lists { grid-template-columns: 1fr 1fr; gap: 0 3rem; } }
.due-col h3 {
  font-family: var(--body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro);
  margin-bottom: 0.5rem;
}
.due-col ul { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.due-col li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--pece-line);
  font-size: 0.92rem;
}
.due-col li:first-child { border-top: 1px solid var(--pece-line); }

/* ============================================================================
   FROM THE OVEN — the pies
   Round tiles, because pizzas are round. Three sizes and an alternating
   vertical offset, so it reads as a counter rather than as a card grid.
   ========================================================================= */

.pies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  padding-block: 1rem 0.5rem;
}
.pie {
  flex: none;
  width: var(--d);
  text-align: center;
  transition: transform 420ms var(--ease-out);
}
.pie--lg { --d: clamp(150px, 22vw, 250px); }
.pie--md { --d: clamp(126px, 18vw, 206px); }
.pie--sm { --d: clamp(108px, 15vw, 172px); }
/* the stagger. not decoration — it stops six circles reading as a grid row. */
.pie:nth-child(even) { margin-top: clamp(1.4rem, 4vw, 3.2rem); }
.pie:hover { transform: translateY(-7px); }

.pie__disc {
  position: relative;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--pece-line);
  box-shadow: 0 18px 38px -18px rgba(0,0,0,0.95);
  transition: border-color 300ms var(--ease);
}
.pie:hover .pie__disc { border-color: var(--oro-deep); }
.pie__disc img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.pie:hover .pie__disc img { transform: scale(1.06); }
/* a warm rim, as if lit from the oven mouth */
.pie__disc::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 -14px 30px -12px rgba(16,14,12,0.85),
              inset 0 0 0 1px rgba(224,184,112,0.16);
}
.pie__name {
  margin: 0.8rem 0 0;
  font-family: var(--display); font-size: 0.98rem; color: var(--ink-hi);
  font-variation-settings: 'SOFT' 20, 'WONK' 1; line-height: 1.2;
}
.pie__price { font-family: var(--mono); font-size: 0.72rem; color: var(--oro); letter-spacing: -0.04em; }

@media (prefers-reduced-motion: reduce) {
  .pie, .pie:hover, .pie__disc img, .pie:hover .pie__disc img { transition: none; transform: none; }
}

/* ============================================================================
   PLATFORM REVIEW CARDS
   White cards on the dark ground, so they read as lifted straight off Google
   and Tripadvisor rather than as our own pull quotes.

   One detail worth keeping: Google rates in STARS, Tripadvisor rates in filled
   CIRCLES. Using the right mark for each platform is the difference between
   looking authentic and looking approximated.
   ========================================================================= */

.rev-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.15rem;
}
@media (min-width: 700px)  { .rev-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .rev-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }

.rev {
  background: #FFFFFF;
  color: #202124;
  border-radius: 10px;
  padding: 1.15rem 1.2rem 1.05rem;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 34px -20px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease);
}
.rev:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -20px rgba(0,0,0,0.95); }

.rev__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.rev__logo { width: 20px; height: 20px; flex: none; }
.rev__logo--ta { width: 22px; height: 22px; }
.rev__plat { font-size: 0.72rem; font-weight: 600; color: #5F6368; letter-spacing: 0.02em; }
.rev__marks { margin-left: auto; display: flex; gap: 2px; }

.rev__text {
  font-size: 0.9rem; line-height: 1.55; color: #202124; margin: 0 0 0.95rem;
}
.rev__by {
  margin-top: auto; display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.76rem; color: #5F6368;
}
.rev__av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; color: #fff;
  font-family: var(--body);
}

@media (prefers-reduced-motion: reduce) {
  .rev, .rev:hover { transform: none; transition: none; }
}

/* header right-hand cluster: WhatsApp + the mobile menu toggle */
.head-actions { display: flex; align-items: center; gap: 0.55rem; }

/* a centred button row, used to close the Le Due and From-the-oven sections */
.btn-row { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.btn-row--center { display: flex; justify-content: center; }

/* dragging feedback for the wipe */
.wipe[data-dragging='true'] { cursor: grabbing; }
.wipe[data-dragging='true'] .wipe__grip { transform: translate(-50%, -50%) scale(1.12); background: var(--oro); color: var(--pece); }
@media (prefers-reduced-motion: reduce) { .wipe__grip { transition: none; } }