/* Chill'in — Il saloon di Pordenone
   Palette campionata dal loro murale (muro, tratto nero, lampone, menta, cipria, senape)
   + la lavagna del logo. Struttura: il tabellone segnaletico (altezze + cartelli). */

:root {
  --muro: #F4F2EE;
  --carta: #FFFFFF;
  --ink: #121110;
  --grafite: #57534D;
  --lampone: #B3123F;
  --lampone-scuro: #8C0C30;
  --menta: #C3D8C4;
  --cipria: #EDB39B;
  --senape: #E0A019;
  --lavagna: #171716;
  --gesso: #EEECE7;
  --gesso-dim: rgba(238, 236, 231, .66);

  --f-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --f-body: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --bar-h: 60px;

  --chalk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .16 0 0 0 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--muro);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure, blockquote { margin: 0; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
section[id] { scroll-margin-top: var(--bar-h); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; letter-spacing: .02em; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--muro); padding: .6em 1em; }
.skip:focus { left: 8px; }

/* ---------- type ---------- */
.h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 1.6rem + 4.6vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.chalk { filter: url(#chalk); }
.eyebrow {
  font-family: var(--f-mono);
  font-variation-settings: "wdth" 87.5;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px;
  padding: .8em 1.35em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn--hot { background: var(--lampone); border-color: var(--lampone); color: #fff; }
.btn--hot:hover { background: var(--lampone-scuro); border-color: var(--lampone-scuro); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--muro); }
.btn--ink { background: var(--ink); color: var(--muro); }
.btn--sm { min-height: 40px; padding: .55em 1.1em; font-size: .92rem; }
.link { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.link:hover { color: var(--lampone); }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 238, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}
.bar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--bar-h);
}
.bar__logo img { height: 30px; width: auto; }
.bar__nav { display: none; gap: 1.75rem; margin-left: auto; }
.bar__nav a {
  font-family: var(--f-mono); font-variation-settings: "wdth" 87.5;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  padding-block: .4em;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 0 2px;
  transition: background-size .2s;
}
.bar__nav a:hover { background-size: 100% 2px; }
@media (min-width: 880px) { .bar__nav { display: flex; } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(2rem, 5vw, 4rem); overflow: hidden; }
.hero__top {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 28px);
  row-gap: 1.25rem;
}
.hero__top > * { grid-column: 1 / -1; }
.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  text-transform: uppercase;
  font-size: clamp(2.7rem, 19.2vw, 11.6rem);
  line-height: .84;
  letter-spacing: -.018em;
  margin-top: .15em;
}
.hero__line { display: block; }
.hero__title .dot { color: var(--lampone); }
/* il timbro del logo, battuto sul tabellone come la filigrana sulle loro foto */
.hero__stamp {
  position: absolute; z-index: 2;
  right: calc(var(--gutter) - 6px);
  top: .9rem;
  width: clamp(78px, 11vw, 150px);
  transform: rotate(-11deg);
  opacity: .92;
  pointer-events: none;
  filter: drop-shadow(0 0 0 var(--carta)) drop-shadow(3px 3px 0 var(--carta)) drop-shadow(-3px -3px 0 var(--carta));
}
.hero__lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }
.hero__proof { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.1rem; font-size: .72rem; text-transform: uppercase; }
.hero__proof em { font-style: normal; color: var(--grafite); }
@media (min-width: 900px) {
  .hero__top > .hero__title { grid-column: 1 / 9; grid-row: 2; font-size: clamp(2.7rem, 11.4vw, 10.6rem); }
  .hero__top > .hero__side { grid-column: 9 / -1; grid-row: 2; align-self: end; padding-bottom: .4rem; }
}

/* ---------- lineup (firma) ---------- */
.lineup { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.lineup__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lineup__title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.lineup__note { font-size: .68rem; text-transform: uppercase; color: var(--grafite); }

.lineup__stage {
  position: relative;
  margin-top: 1rem;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--carta);
}
.chart { position: absolute; inset: 0 0 5.5rem 0; pointer-events: none; }
.chart::before, .chart::after {
  content: ""; position: absolute; inset: 0;
  transform-origin: 0 50%;
}
/* linee maggiori ogni 6", minori ogni 2" — come il tabellone dipinto sul loro muro */
.chart::before { background: repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 20%); }
.chart::after { background: repeating-linear-gradient(to bottom, rgba(18,17,16,.22) 0 1px, transparent 1px 6.6667%); }
.chart span {
  position: absolute; left: var(--gutter);
  top: calc(var(--h) * 20%);
  transform: translateY(4px);
  font-family: var(--f-mono); font-variation-settings: "wdth" 87.5;
  font-size: .64rem; font-weight: 700;
  background: var(--carta); padding: 0 .35em 0 0;
}
.chart span:first-child { display: none; }

.lineup__row {
  position: relative;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2.4rem var(--gutter) 1.6rem;
  scroll-padding-inline: var(--gutter);
}
.lineup__row::-webkit-scrollbar { display: none; }
.suspect { flex: 0 0 64vw; max-width: 300px; scroll-snap-align: start; }
.suspect figure { position: relative; }
.suspect img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); background: var(--muro); }

.placard {
  position: relative; z-index: 1;
  width: 82%;
  margin: -2.6rem auto 0;
  display: grid; justify-items: center; gap: .15rem;
  padding: .55rem .6rem .6rem;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 9px),
    var(--lavagna);
  color: var(--gesso);
  font-family: var(--f-mono); font-variation-settings: "wdth" 80;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 3px 0 var(--ink);
}
.placard span { font-size: .6rem; letter-spacing: .08em; color: var(--gesso-dim); }
.placard strong { font-size: .82rem; font-weight: 700; letter-spacing: .03em; }

@media (min-width: 760px) {
  .chart span:first-child { display: block; }
  .lineup__row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 30px);
    overflow: visible;
    padding: clamp(3rem, 6vw, 4.5rem) calc(var(--gutter) + 3.2rem) 2rem;
  }
  .suspect { max-width: none; }
  .suspect:nth-child(even) { margin-top: clamp(1rem, 3vw, 2.6rem); }
}
@media (min-width: 1320px) {
  .lineup__row { max-width: calc(var(--max) + 6rem); margin-inline: auto; }
}

/* ---------- soliti sospetti ---------- */
.suspects {
  background: var(--chalk-noise), var(--lavagna);
  color: var(--gesso);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.suspects__head { display: grid; gap: 1rem; max-width: 44rem; }
.suspects__intro { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--gesso-dim); max-width: 38ch; }
.suspects__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 760px) { .suspects__grid { grid-template-columns: 1fr 1fr; } }

.mug__photo {
  position: relative;
  padding: 10px 10px 12px;
  background: var(--gesso);
  transform: rotate(-1.4deg);
  box-shadow: 0 18px 30px -18px rgba(0,0,0,.8);
  overflow: hidden;
}
.mug:nth-child(2) .mug__photo { transform: rotate(1.1deg); }
.mug__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mug__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.mug__file { margin-top: 1.6rem; display: grid; gap: .45rem; }
.mug__alias { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cipria); }
.mug__name {
  font-family: var(--f-display); font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
  line-height: .9;
}
.mug__role { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gesso-dim); }
.mug__quote { font-size: 1.12rem; line-height: 1.45; max-width: 36ch; margin-top: .4rem; }
.mug__score { font-size: .7rem; text-transform: uppercase; color: var(--senape); margin-top: .3rem; }

/* ---------- listino ---------- */
.menu { padding-block: clamp(4rem, 9vw, 7.5rem); }
.menu__in { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.menu__head { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.menu__intro { max-width: 34ch; color: var(--grafite); }
@media (min-width: 960px) {
  .menu__in { grid-template-columns: 4fr 8fr; }
  .menu__head { position: sticky; top: calc(var(--bar-h) + 2rem); }
}

.board {
  display: grid;
  gap: 2rem 3rem;
  padding: clamp(1.4rem, 4vw, 3rem);
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 13px),
    var(--lavagna);
  color: var(--gesso);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--lampone);
}
@media (min-width: 700px) { .board { grid-template-columns: 1fr 1fr; } }
.board__cat {
  font-family: var(--f-mono); font-variation-settings: "wdth" 87.5;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--cipria);
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(238,236,231,.25);
  margin-bottom: .4rem;
}
.board li {
  display: flex; align-items: baseline; gap: .7rem;
  padding-block: .55rem;
  font-family: var(--f-mono); font-variation-settings: "wdth" 80;
  font-size: .8rem; text-transform: uppercase;
}
.board__item { display: flex; align-items: baseline; gap: .6rem; flex: 1; min-width: 0; }
.board__item::after { content: ""; flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(238,236,231,.3); transform: translateY(-.3em); }
.board__time { color: var(--gesso-dim); font-size: .7rem; min-width: 3.2em; text-align: right; }
.board__price { font-weight: 700; min-width: 3.1em; text-align: right; font-size: .9rem; }

/* ---------- precedenti ---------- */
.record { padding-block: clamp(4rem, 9vw, 7.5rem); border-top: 2px solid var(--ink); }
.record__head { display: grid; gap: .9rem; }
.record__intro { color: var(--grafite); max-width: 40ch; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.chip {
  min-height: 40px;
  padding: .5em 1em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-mono); font-variation-settings: "wdth" 87.5;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.chip:hover { background: var(--menta); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--muro); }

.looks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem clamp(12px, 2vw, 28px);
  margin-top: 1.8rem;
}
@media (min-width: 760px) { .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .looks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.look[hidden] { display: none; }
.look.is-shown { animation: show .35s ease both; }
@keyframes show { from { opacity: 0; transform: translateY(10px); } }
.look img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 2px solid var(--ink);
  background: var(--carta);
  transition: transform .25s ease, box-shadow .25s ease;
}
.look figcaption { display: grid; gap: .2rem; margin-top: .7rem; }
.look strong {
  font-family: var(--f-display); font-weight: 700;
  font-variation-settings: "wdth" 80, "opsz" 36;
  text-transform: uppercase;
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  line-height: 1.05;
}
.look span { font-size: .64rem; text-transform: uppercase; color: var(--grafite); }
@media (hover: hover) {
  .look:hover img { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--ink); }
}
.record__more { margin-top: 2.2rem; }

/* ---------- recensioni ---------- */
.word { background: var(--menta); padding-block: clamp(4rem, 9vw, 7rem); border-block: 2px solid var(--ink); }
.word__head { display: grid; gap: .8rem; }
.word__intro { font-weight: 500; }
.word__grid { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 860px) { .word__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } }
.quote { border-top: 3px solid var(--ink); padding-top: 1.1rem; display: grid; gap: 1rem; align-content: start; }
.quote blockquote { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.4; font-weight: 500; }
.quote figcaption { font-size: .66rem; text-transform: uppercase; }

/* ---------- dove ---------- */
.where { padding-top: clamp(4rem, 9vw, 7rem); }
.where__in { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .where__in { grid-template-columns: 5fr 7fr; } }
.where__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); }
.where__info { display: grid; gap: 1.1rem; }
.where__addr { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; line-height: 1.3; margin-top: .3rem; }
.where__note { color: var(--grafite); }
.hours { width: 100%; max-width: 30rem; border-collapse: collapse; margin-top: .6rem; }
.hours caption { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding-bottom: .6rem; display: flex; align-items: center; gap: .7rem; }
.hours th, .hours td { padding: .6rem .7rem; border-bottom: 1px solid rgba(18,17,16,.18); text-align: left; font-weight: 400; }
.hours th { padding-left: 0; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { background: var(--senape); font-weight: 700; border-bottom-color: var(--ink); }
.hours tr.is-today th { padding-left: .7rem; }
.hours__now { padding: .25em .7em; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; }
.hours__now:empty { display: none; }
.hours__now.is-open { background: var(--menta); }
.hours__now.is-closed { background: var(--cipria); }
.where__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.where__map { margin-top: clamp(3rem, 7vw, 5rem); border-top: 2px solid var(--ink); }
.where__map iframe { display: block; width: 100%; height: clamp(280px, 40vw, 420px); border: 0; filter: grayscale(1) contrast(1.05); }

/* ---------- footer ---------- */
.foot {
  background: var(--chalk-noise), var(--lavagna);
  color: var(--gesso);
  padding-block: clamp(3.5rem, 8vw, 6rem) 7rem;
  text-align: center;
}
.foot__in { display: grid; justify-items: center; gap: 1.6rem; }
.foot__logo { width: clamp(150px, 22vw, 240px); }
.foot__motto {
  font-family: var(--f-display); font-weight: 800;
  font-variation-settings: "wdth" 75, "opsz" 96;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 1.4rem + 4.5vw, 5.4rem);
  line-height: .9;
}
.foot__cols { display: grid; gap: 1.2rem; font-size: .74rem; text-transform: uppercase; line-height: 1.7; margin-top: .5rem; }
@media (min-width: 700px) { .foot__cols { grid-template-columns: repeat(3, auto); gap: 3.5rem; } }
.foot__cols a { text-decoration: none; }
.foot__cols a:hover { color: var(--cipria); }
.foot__small { font-size: .6rem; text-transform: uppercase; color: var(--gesso-dim); margin-top: 1.4rem; }
.foot :focus-visible { outline-color: var(--gesso); }
@media (min-width: 760px) { .foot { padding-bottom: clamp(3.5rem, 8vw, 6rem); } }

/* ---------- dock mobile ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--muro);
  border-top: 2px solid var(--ink);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.dock.is-up { transform: none; }
@media (min-width: 760px) { .dock { display: none; } }

/* ---------- movimento ---------- */
.js .chart::before, .js .chart::after { transform: scaleX(0); transition: transform 1s cubic-bezier(.7,0,.2,1); }
.js .chart::after { transition-delay: .15s; }
.js .hero.is-ready .chart::before, .js .hero.is-ready .chart::after { transform: none; }
.js .suspect { opacity: 0; transform: translateY(46px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.35s + var(--i) * .09s); }
.js .hero.is-ready .suspect { opacity: 1; transform: none; }
.js .placard { transform: rotate(-5deg) translateY(-6px); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s; transition-delay: calc(.75s + var(--i) * .09s); }
.js .hero.is-ready .placard { transform: none; opacity: 1; }
.js .hero__stamp { opacity: 0; transform: rotate(-11deg) scale(1.5); transition: opacity .25s ease .2s, transform .45s cubic-bezier(.3,1.4,.5,1) .2s; }
.js .hero.is-ready .hero__stamp { opacity: .92; transform: rotate(-11deg); }

.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.mug.is-flashed .mug__flash { animation: flash .9s ease-out both; }
.mug.is-flashed .mug__photo img { animation: develop 1.2s ease-out both; }
.mug:nth-child(2).is-flashed .mug__flash, .mug:nth-child(2).is-flashed .mug__photo img { animation-delay: .35s; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: .95; } 100% { opacity: 0; } }
@keyframes develop { 0% { filter: brightness(1.9) contrast(.6); } 100% { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .chart::before, .js .chart::after, .js .suspect, .js .placard, .js .hero__stamp, .js [data-reveal] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js .hero__stamp { transform: rotate(-11deg) !important; opacity: .92 !important; }
  .mug.is-flashed .mug__flash, .mug.is-flashed .mug__photo img, .look.is-shown { animation: none !important; }
  .dock { transition: none; }
}