/* ══════════════════════════════════════════════════════════════════
   MASSIMO — Italian Coffee, Panini, Gelato
   Coming-soon site. Art direction follows the "Stile di Lusso" board:
   gold on espresso-black, double-rule badge, wheat sprig, tricolore tick.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ink */
  --ink:        #0A0807;
  --ink-2:      #100D0A;
  --ink-3:      #16110C;
  --espresso:   #2A1D14;

  /* gold */
  --gold:       #C9A24B;
  --gold-lt:    #E8CF95;
  --gold-dk:    #8A6A2C;

  /* paper */
  --cream:      #F4EFE4;
  --cream-70:   rgba(244,239,228,.70);
  --cream-45:   rgba(244,239,228,.45);

  /* tricolore */
  --it-green:   #008C45;
  --it-red:     #CD212A;

  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:    'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 68rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--display);
  font-size:clamp(1.0625rem,.98rem + .42vw,1.25rem);
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Film grain over the whole page — an inline SVG turbulence, so no request. */
body::after{
  content:"";
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9;
  opacity:.048;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) }
  40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) }
  80%{ transform:translate(3%,1%) }
}

.defs{ position:absolute; width:0; height:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--ink);
  padding:.7rem 1.2rem; font-family:var(--sans); font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:.6rem; top:.6rem; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.wrap{
  width:min(100% - 2.6rem, var(--wrap));
  margin-inline:auto;
}

/* ── small caps rubric used above each section ───────────────────── */
.rubric{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.6rem;
  display:flex; align-items:center; gap:1.1rem;
}
.rubric::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--gold-dk),transparent);
}

/* ══════════════════ HERO ══════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(3rem,9vh,6rem) 1.3rem clamp(2.5rem,7vh,4rem);
  isolation:isolate;
  text-align:center;
  overflow:hidden;
}

/* warm lamp-glow behind the sign, as if lit from above */
.hero__glow{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(58% 44% at 50% 26%, rgba(201,162,75,.20), transparent 68%),
    radial-gradient(90% 70% at 50% 12%, rgba(138,90,46,.16), transparent 72%),
    linear-gradient(180deg,var(--ink-3) 0%, var(--ink) 58%, #070505 100%);
  animation:breathe 11s var(--ease) infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.92 }
  50%{ opacity:1 }
}

.hero__inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.3rem,3.4vh,2.2rem);
  max-width:44rem;
}

.eyebrow{
  margin:0;
  font-family:var(--sans);
  font-size:.7rem; font-weight:400;
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--cream-70);
  display:flex; align-items:center; gap:.85rem;
}
.flag{ display:inline-flex; gap:2px; }
.flag i{ width:5px; height:11px; display:block; }
.flag i:nth-child(1){ background:var(--it-green) }
.flag i:nth-child(2){ background:var(--cream) }
.flag i:nth-child(3){ background:var(--it-red) }

/* ── the badge ───────────────────────────────────────────────────── */
.badge{
  width:clamp(15rem,42vw,20.5rem);
  filter:drop-shadow(0 0 34px rgba(201,162,75,.20))
         drop-shadow(0 14px 40px rgba(0,0,0,.6));
}
.badge svg{ display:block; width:100%; height:auto; overflow:visible; }

.badge__frame{
  fill:none;
  stroke:url(#gold);
  stroke-width:3.2;
}
.badge__frame--in{ stroke-width:1.1; opacity:.85; }

.sprig path{ fill:url(#goldSoft); }
.sprig__stem{
  fill:none;
  stroke:url(#goldSoft);
  stroke-width:1.7;
  stroke-linecap:round;
}

.badge__word{
  font-family:var(--display);
  font-weight:600;
  font-size:52px;      /* cap-height 32.8 = half the cup rim diameter */
  fill:var(--cream);
}

.cup__rim{
  fill:none;
  stroke:url(#gold);
  stroke-width:3.4;
}
.cup__crema{ fill:url(#crema); }
.cup__gleam{ fill:rgba(240,220,166,.16); }
.cup__handle{
  fill:none;
  stroke:url(#gold);
  stroke-width:2.6;
  stroke-linecap:round;
}

/* Solid, not url(#goldSoft): a horizontal line has a zero-height bounding
   box, which collapses an objectBoundingBox gradient and paints nothing. */
.badge__hair{
  fill:none;
  stroke:#A67C32;
  stroke-width:1;
  opacity:.75;
}

.badge__tag{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  fill:var(--gold-lt);
  text-anchor:start;
}
.badge__dot{ fill:var(--gold); opacity:.85; }

/* ── slogan ──────────────────────────────────────────────────────── */
.hero__slogan{
  margin:0;
  font-weight:300;
  font-size:clamp(2.4rem,1.5rem + 4.2vw,4.6rem);
  line-height:1.06;
  letter-spacing:-.012em;
}
.hero__slogan span{ display:block; }
.hero__slogan em{
  display:block;
  font-style:italic;
  color:var(--gold);
}

.hero__lede{
  margin:0;
  max-width:34rem;
  color:var(--cream-70);
  font-size:clamp(1.02rem,.96rem + .3vw,1.16rem);
  line-height:1.72;
}

/* ── notify form ─────────────────────────────────────────────────── */
.notify{ width:min(100%,26rem); margin-top:.4rem; }

.notify__label{
  display:block;
  font-family:var(--sans);
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-45);
  margin-bottom:.9rem;
}

.notify__row{
  display:flex;
  border:1px solid rgba(201,162,75,.42);
  background:rgba(10,8,7,.55);
  backdrop-filter:blur(6px);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.notify__row:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(201,162,75,.35), 0 0 26px rgba(201,162,75,.14);
}

.notify input{
  flex:1; min-width:0;
  background:none; border:0; outline:none;
  color:var(--cream);
  font-family:var(--sans); font-size:.92rem; font-weight:300;
  letter-spacing:.02em;
  padding:1rem 1.1rem;
}
.notify input::placeholder{ color:rgba(244,239,228,.32); }

.notify button{
  position:relative;
  border:0; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 52%,var(--gold-dk));
  color:#1A1206;
  font-family:var(--sans); font-weight:500;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  padding:0 1.5rem;
  transition:filter .3s var(--ease);
}
.notify button:hover{ filter:brightness(1.12); }
.notify button:disabled{ cursor:default; filter:saturate(.5) brightness(.8); }

.notify__spin{
  display:none;
  position:absolute; inset:0; margin:auto;
  width:14px; height:14px;
  border:2px solid rgba(26,18,6,.3);
  border-top-color:#1A1206;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.notify.is-busy .notify__btn-text{ visibility:hidden; }
.notify.is-busy .notify__spin{ display:block; }

.notify__msg{
  min-height:1.35rem;
  margin:.8rem 0 0;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.04em;
  color:var(--cream-45);
}
.notify__msg.is-ok{ color:var(--gold-lt); }
.notify__msg.is-err{ color:#E8967A; }

/* ── scroll cue ──────────────────────────────────────────────────── */
.scroll-cue{
  margin-top:.6rem;
  width:1px; height:3.6rem;
  background:linear-gradient(180deg,transparent,rgba(201,162,75,.55));
  position:relative;
}
.scroll-cue span{
  position:absolute; left:50%; top:0;
  width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%; background:var(--gold);
  animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{
  0%{ transform:translateY(0); opacity:0 }
  25%{ opacity:1 }
  100%{ transform:translateY(3.4rem); opacity:0 }
}

/* ══════════════════ STORY ══════════════════ */
.story{
  padding:clamp(5rem,13vh,9rem) 0;
  background:linear-gradient(180deg,#070505,var(--ink-2));
}
.story__pull{
  margin:0 0 2.8rem;
  font-weight:300;
  font-size:clamp(1.75rem,1.2rem + 2.4vw,3.05rem);
  line-height:1.2;
  max-width:24ch;
}
.story__pull em{
  display:block;          /* keeps the italic clause on its own line */
  font-style:italic;
  color:var(--gold);
}
.story__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:2.2rem 3.4rem;
  max-width:56rem;
}
.story__cols p{
  margin:0;
  color:var(--cream-70);
  line-height:1.78;
}

/* ══════════════════ OFFERING ══════════════════ */
.offering{
  padding:clamp(4.5rem,12vh,8rem) 0;
  background:var(--ink-2);
}
/* Column counts are explicit, not auto-fit: the 1px gap is painted by the
   container, so any column count that does not divide the six items leaves a
   lit, empty cell. 6 divides by 3, 2 and 1. */
.offering__grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:rgba(201,162,75,.16);
  border:1px solid rgba(201,162,75,.16);
}
@media (min-width:40rem){ .offering__grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:62rem){ .offering__grid{ grid-template-columns:repeat(3,1fr) } }
.offering__grid li{
  background:var(--ink-2);
  padding:2.3rem 1.9rem 2.5rem;
  transition:background .45s var(--ease);
}
.offering__grid li:hover{ background:var(--ink-3); }
.offering__grid h3{
  margin:0 0 .7rem;
  font-weight:400;
  font-size:1.6rem;
  letter-spacing:.01em;
  color:var(--gold-lt);
}
.offering__grid p{
  margin:0;
  font-size:.97rem;
  line-height:1.7;
  color:var(--cream-45);
}

/* ══════════════════ CITIES ══════════════════ */
.cities{
  padding:clamp(4.5rem,12vh,8rem) 0 clamp(3.5rem,9vh,6rem);
  background:linear-gradient(180deg,var(--ink-2),#070505);
  overflow:hidden;
}
.cities__lede{
  margin:0;
  max-width:38rem;
  color:var(--cream-70);
}
.marquee{
  margin-top:clamp(2.4rem,6vh,4rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide 44s linear infinite;
}
.marquee__track span{
  font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem);
  font-weight:300;
  font-style:italic;
  letter-spacing:.01em;
  color:rgba(244,239,228,.80);
  white-space:nowrap;
  padding-right:.5em;
}
.marquee__track i{
  font-style:normal;
  color:var(--gold);
  margin:0 .5em;
  vertical-align:.08em;
}
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ══════════════════ THE WALL ══════════════════ */
.wall{
  padding:clamp(5rem,14vh,9.5rem) 0;
  background:#070505;
  text-align:center;
}
.wall .rubric{ justify-content:center; }
.wall .rubric::after{ display:none; }

/* max-width in rem, not ch: `ch` resolves against this element's own
   font-size, not the display-sized spans inside it, which collapsed the
   frame to a narrow column. */
.wall__quote{
  margin:0 auto 2.4rem;
  max-width:min(100%,40rem);
  border:1px solid rgba(201,162,75,.34);
  padding:clamp(2.2rem,6vw,3.6rem) clamp(1.4rem,4vw,3rem);
  position:relative;
}
.wall__quote::before,
.wall__quote::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  width:44px; height:1px;
  background:var(--gold);
}
.wall__quote::before{ top:-1px; box-shadow:0 0 14px rgba(201,162,75,.5); }
.wall__quote::after{ bottom:-1px; box-shadow:0 0 14px rgba(201,162,75,.5); }

.wall__quote span,
.wall__quote em{ display:block; line-height:1.12; }
.wall__quote span{
  font-size:clamp(1.9rem,1.2rem + 3.1vw,3.4rem);
  font-weight:300;
}
.wall__quote em{
  font-style:italic;
  color:var(--gold);
  font-size:clamp(1.9rem,1.2rem + 3.1vw,3.4rem);
}
.wall__note{
  margin:0 auto;
  max-width:34rem;
  color:var(--cream-45);
  font-size:1rem;
}

/* ══════════════════ FOOTER ══════════════════ */
.foot{
  padding:clamp(4rem,10vh,6.5rem) 0 3rem;
  background:var(--ink);
  border-top:1px solid rgba(201,162,75,.14);
  text-align:center;
}
.foot__mark{
  display:flex; align-items:center; justify-content:center;
  gap:.06em;
  font-size:1.7rem; font-weight:600;
  letter-spacing:.3em;
  text-indent:.3em;              /* balance the trailing letter-space */
  color:var(--cream);
}
.foot__cup{
  width:.86em; height:.86em;
  flex:none;
  margin-left:-.04em;
}
.foot__tag{
  margin:.9rem 0 2.4rem;
  font-family:var(--sans);
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold);
}
.foot__soon{
  margin:0 auto 2.2rem;
  max-width:32rem;
  color:var(--cream-45);
  font-size:1rem;
}
.foot__soon a{ color:var(--gold-lt); text-underline-offset:.25em; }
.foot__soon a:hover{ color:var(--gold); }

.foot__social{
  list-style:none; margin:0 0 2.4rem; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem 2rem;
}
.foot__social a{
  font-family:var(--sans);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-70); text-decoration:none;
  padding-bottom:.3rem;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.foot__social a:hover{ color:var(--gold); border-bottom-color:var(--gold-dk); }

.foot__legal{
  margin:0;
  font-family:var(--sans);
  font-size:.66rem; letter-spacing:.16em;
  color:rgba(244,239,228,.26);
}

/* ══════════════════ REVEAL ══════════════════ */
/* Gated on .js (set by an inline script in <head>) so that a failed or
   blocked main.js can never leave the page blank. */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }
/* stagger children inside a section */
.js .reveal.d1{ transition-delay:.09s }
.js .reveal.d2{ transition-delay:.18s }
.js .reveal.d3{ transition-delay:.27s }
.js .reveal.d4{ transition-delay:.36s }
.js .reveal.d5{ transition-delay:.45s }

/* ══════════════════ MOTION / MOBILE ══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
  body::after{ animation:none; }
}

@media (max-width:34rem){
  .notify__row{ flex-direction:column; }
  .notify button{ padding:.95rem 1.5rem; }
  .rubric{ letter-spacing:.26em; }
  .offering__grid li{ padding:2rem 1.5rem; }
}