/* KCK Panzerotti — tour bill.
   Palette is lifted from the client's own stand drawing: chocolate wood-effect
   panels with LED-backlit gold lettering. One typeface (Archivo variable); the
   width axis does the work that a second family usually would. */

:root{
  --night:#14100d;
  --cocoa:#241a13;
  --edge:#3b2a20;
  --gold:#e8c48a;
  --gold-hi:#f3deb8;
  --cream:#f2ead9;
  --muted:#a08a70;
  --hair:rgba(232,196,138,.16);
  --face:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --shell:min(76rem,100% - 3rem);
}

*{box-sizing:border-box}

/* No overflow on html/body at all. `hidden` unpins position:sticky, and
   `clip` can compute overflow-y to clip too and stop the page scrolling
   outright. Horizontal overflow is contained where it happens (.ticker),
   never globally. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--night);color:var(--cream);
  font-family:var(--face);font-variation-settings:"wdth" 92,"wght" 400;
  font-size:1.02rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}

.wrap{width:var(--shell);margin-inline:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:var(--night);padding:.7rem 1rem}

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

/* ---------- topbar ---------- */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding-block:1.15rem;
}
.topbar__brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.topbar__brand img{height:30px;width:auto;align-self:center}
.topbar__name{font-variation-settings:"wdth" 118,"wght" 800;font-size:1.3rem;letter-spacing:.04em}
.topbar__payoff{color:var(--muted);font-size:.8rem;font-variation-settings:"wdth" 88,"wght" 400}
@media (max-width:560px){.topbar__payoff{display:none}}

.topbar__link{
  text-decoration:none;font-size:.92rem;padding-bottom:4px;
  border-bottom:1px solid var(--hair);
}
.topbar__link:hover{border-bottom-color:var(--gold);color:var(--gold-hi)}

/* ---------- signature: the scrubbed film ---------- */
.scrub{height:460vh;position:relative}
.scrub__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.scrub__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--night)}
.scrub__vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(20,16,13,.94) 0%,rgba(20,16,13,.72) 34%,rgba(20,16,13,0) 68%),
    linear-gradient(0deg,rgba(20,16,13,.9) 0%,rgba(20,16,13,0) 42%);
}

.scrub__copy{
  position:absolute;left:0;right:0;bottom:clamp(4rem,13vh,9rem);
  width:var(--shell);margin-inline:auto;
}
.scrub__chapter{
  margin:0;grid-area:1/1;
  font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(2.6rem,9vw,6.4rem);line-height:.92;letter-spacing:-.028em;
  opacity:0;visibility:hidden;
}
.scrub__copy{display:grid}
.scrub__chapter.is-on{opacity:1;visibility:visible}
.scrub__line{display:block}
@media (prefers-reduced-motion:no-preference){
  .scrub__chapter{transition:opacity .5s ease,visibility .5s}
  .scrub__line{transform:translateY(.14em);transition:transform .55s cubic-bezier(.22,1,.36,1)}
  .scrub__chapter.is-on .scrub__line{transform:none}
  .scrub__chapter.is-on .scrub__line:nth-child(2){transition-delay:.06s}
  .scrub__chapter.is-on .scrub__line:nth-child(3){transition-delay:.12s}
}

.scrub__hint{
  position:absolute;right:0;bottom:clamp(4rem,13vh,9rem);
  margin:0;padding-right:max(1.5rem,calc((100vw - var(--shell))/2));
  color:var(--muted);font-size:.75rem;letter-spacing:.24em;
  display:flex;align-items:center;gap:.6rem;
}
.scrub__hint span{display:block;width:34px;height:1px;background:var(--gold);transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .scrub__hint span{animation:pull 2.4s ease-in-out infinite}
}
@keyframes pull{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}

.scrub__rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hair)}
.scrub__rail i{display:block;height:100%;width:0;background:var(--gold)}

/* ---------- tour ticker ---------- */
.ticker{
  border-block:1px solid var(--hair);background:var(--cocoa);
  overflow:hidden;padding-block:.9rem;
}
.ticker__track{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  color:var(--gold);font-variation-settings:"wdth" 108,"wght" 600;
  font-size:1.05rem;letter-spacing:.02em;white-space:nowrap;
}
.ticker__track b{width:5px;height:5px;border-radius:50%;background:var(--edge);flex:none}
@media (prefers-reduced-motion:no-preference){
  .ticker__track{animation:roll 34s linear infinite}
}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- bands ---------- */
.band{padding-block:clamp(5rem,12vw,9rem)}
.band--cocoa{background:var(--cocoa)}
.band__title{
  margin:0;font-variation-settings:"wdth" 110,"wght" 800;
  font-size:clamp(2rem,5.4vw,3.5rem);line-height:1;letter-spacing:-.025em;
}
.band__lede{color:var(--muted);max-width:46ch;margin:1.2rem 0 0}

/* ---------- the calendar: the town is the headline ---------- */
.dates{list-style:none;margin:3.2rem 0 0;padding:0}
.date{border-top:1px solid var(--hair);padding-block:2.2rem}
.date:last-child{border-bottom:1px solid var(--hair)}
.date__when{
  display:flex;align-items:baseline;gap:.5rem;margin:0 0 .4rem;
  color:var(--gold);font-variation-settings:"wdth" 100,"wght" 600;
}
.date__num{font-size:1.5rem;font-variation-settings:"wdth" 112,"wght" 700}
.date__sep,.date__month{color:var(--muted);font-size:.95rem}
.date__month{margin-left:.35rem}
.date__town{
  margin:0;font-variation-settings:"wdth" 122,"wght" 800;
  font-size:clamp(2.4rem,8.5vw,5.6rem);line-height:.94;letter-spacing:-.035em;
}
.date__what{color:var(--muted);margin:.55rem 0 0}
@media (prefers-reduced-motion:no-preference){
  .date__town{transition:color .3s ease}
  .date:hover .date__town{color:var(--gold-hi)}
}

.past{margin-top:4rem}
.past__title{margin:0 0 1rem;font-variation-settings:"wdth" 95,"wght" 600;font-size:1rem;color:var(--muted)}
.past__list{list-style:none;margin:0;padding:0;color:var(--muted)}
.past__list li{padding-block:.55rem;border-top:1px solid var(--hair)}
.past__list span{color:var(--cream);font-variation-settings:"wdth" 108,"wght" 600;margin-right:.6rem}

/* ---------- menu ---------- */
.menu{display:grid;gap:3rem}
@media (min-width:900px){.menu{grid-template-columns:.9fr 1fr;gap:5rem}}
.menu__note{color:var(--muted);margin:1.3rem 0 0;max-width:44ch}
.menu__list{margin:0;padding:0}
.menu__list>div{border-top:1px solid var(--hair);padding-block:1.3rem}
.menu__list>div:last-child{border-bottom:1px solid var(--hair)}
.menu__list dt{font-variation-settings:"wdth" 106,"wght" 700;font-size:1.1rem}
.menu__list dd{margin:.35rem 0 0;color:var(--muted)}

/* ---------- the stand drawing ---------- */
.banco{display:grid;gap:3rem;align-items:center}
@media (min-width:900px){.banco{grid-template-columns:.85fr 1.15fr;gap:4.5rem}}
.specs{margin:2.2rem 0 0}
.specs>div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--hair);padding-block:.8rem}
.specs dt{color:var(--muted);font-size:.94rem}
.specs dd{margin:0;font-variation-settings:"wdth" 104,"wght" 600}

.draw{display:block;width:100%;height:auto}
.draw .ln{fill:none;stroke:var(--edge);stroke-width:2}
.draw .fill{fill:var(--cocoa)}
.draw .void{fill:var(--night)}
.draw .led{fill:none;stroke:var(--gold);stroke-width:2.5}
.draw .ledmark{filter:drop-shadow(0 0 1px rgba(232,196,138,.35))}
.draw .ledfill{fill:var(--gold)}
.draw .dim{fill:none;stroke:var(--hair);stroke-width:1}
.draw .dimtext{fill:var(--muted);font-family:var(--face);font-size:13px;font-variation-settings:"wdth" 90,"wght" 500}
/* dimension lines and LED sign draw themselves once the drawing is in view */
@media (prefers-reduced-motion:no-preference){
  .draw .dim,.draw .dimtext,.draw .led,.draw .ledfill,.draw .ledmark{opacity:0}
  .draw.is-drawn .dim{opacity:1;transition:opacity .5s ease .45s}
  .draw.is-drawn .dimtext{opacity:1;transition:opacity .5s ease .7s}
  .draw.is-drawn .ledmark{opacity:1;transition:opacity .6s ease .15s}
  .draw.is-drawn .ledfill{opacity:1;transition:opacity .6s ease .3s}
}

/* ---------- the ask ---------- */
.ask{padding-block:clamp(5rem,13vw,9rem);text-align:center;background:var(--cocoa)}
.ask__title{
  margin:0;font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(2.4rem,8vw,5.2rem);line-height:.95;letter-spacing:-.03em;
}
.ask__body{color:var(--muted);max-width:52ch;margin:1.6rem auto 0}
.ask__cta{
  display:inline-flex;flex-direction:column;gap:.15rem;margin-top:2.6rem;
  background:var(--gold);color:var(--night);text-decoration:none;
  padding:1.05rem 2.1rem;
}
.ask__ctaLabel{font-variation-settings:"wdth" 106,"wght" 700;font-size:1.05rem}
.ask__ctaNum{font-size:.85rem;opacity:.72}
.ask__cta:hover{background:var(--gold-hi)}
@media (prefers-reduced-motion:no-preference){
  .ask__cta{transition:background .25s ease,transform .25s cubic-bezier(.22,1,.36,1)}
  .ask__cta:hover{transform:translateY(-2px)}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);padding-block:4rem 2.4rem}
.foot__grid{display:grid;gap:2.5rem}
@media (min-width:768px){.foot__grid{grid-template-columns:repeat(3,1fr)}}
.foot h3{margin:0 0 .9rem;font-size:.95rem;font-variation-settings:"wdth" 100,"wght" 600;color:var(--muted)}
.foot p{margin:0}
.foot a{display:block;padding-block:.2rem;text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot__map{margin-top:.8rem;border-bottom:1px solid var(--gold);display:inline-block !important}
.foot__quiet{color:var(--muted);max-width:28ch}
.foot__rule{
  width:var(--shell);margin:3rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--hair);color:var(--muted);font-size:.82rem;
}

/* wrappers for the two split layouts (grid children need no styling of their
   own, but naming them keeps the markup readable) */
.menu__claim,.banco__text{min-width:0}