/* EVOKE Vintage - evoke.pileupdigital.com */

:root{
  --black:#000;
  --white:#fff;
  --paper:#ECEAE4;
  --mute:#8c8c8c;
  --ink-soft:#4d4a45;
  --display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --body:'Archivo', Helvetica, Arial, sans-serif;
  --gutter:clamp(16px, 4vw, 72px);
  --max:1800px;
  --rule:2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--black);
  color:var(--white);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--white);outline-offset:3px}
.band-paper a:focus-visible,.nav a:focus-visible{outline-color:var(--black)}
::selection{background:var(--white);color:var(--black)}
.band-paper ::selection{background:var(--black);color:var(--paper)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto}
.wordmark{display:block;width:100%;height:auto;fill:currentColor}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* NAV */
.nav{
  position:sticky;top:0;z-index:30;
  background:var(--white);color:var(--black);
  border-bottom:var(--rule) solid var(--black);
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding:14px var(--gutter);
}
.nav .brand{flex:0 0 auto;display:block;width:clamp(96px,9vw,148px)}
.nav ul{display:flex;gap:clamp(16px,2vw,30px);list-style:none;font-weight:600;font-size:clamp(13px,1vw,15px);letter-spacing:.01em}
.nav ul a{padding:4px 0;display:inline-block}
.nav ul a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.nav .status{font-size:clamp(12px,.95vw,14px);font-weight:500;white-space:nowrap;flex:0 0 auto}
.nav .status b{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--black);background:var(--black);
  margin-right:7px;vertical-align:1px;
}
.nav .status.is-closed b{background:transparent}

@media(max-width:760px){
  .nav-in{flex-wrap:wrap;row-gap:10px;padding-bottom:10px}
  .nav .status{order:2}
  .nav-links{order:3;flex-basis:100%;border-top:1px solid rgba(0,0,0,.18);padding-top:10px}
  .nav ul{gap:20px;font-size:13px}
}

/* HERO */
.hero{padding:clamp(26px,4.5vw,76px) var(--gutter) 0}
.hero h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.86;letter-spacing:-.015em;
  font-size:clamp(56px,11.5vw,176px);
  max-width:11ch;
}
.hero-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,60px);
  align-items:stretch;
  margin-top:clamp(24px,3vw,48px);
}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.hero-lede{font-size:clamp(17px,1.45vw,23px);max-width:28ch;line-height:1.35}
.hero .meta{font-size:clamp(13px,1vw,15px);color:var(--mute);line-height:1.65}
.hero .meta span{color:var(--white)}
.hero-photo{aspect-ratio:4/3;overflow:hidden;background:#1a1a1a}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* portrait crop on mid widths */
@media(min-width:761px){
  .hero-photo{aspect-ratio:4/5}
}
/* on real desktops it fills its column and crops the height instead, so the
   hero does not run off the bottom of the screen. aspect-ratio is dropped
   here on purpose: with a max-height it shrinks the width to match. */
@media(min-width:1100px){
  .hero-photo{aspect-ratio:auto;height:clamp(420px,52vh,600px)}
}
@media(max-width:760px){
  .hero-row{grid-template-columns:1fr;gap:26px}
  .hero-photo{order:-1}
  .hero-copy{gap:22px}
  .hero-lede{max-width:34ch}
}

/* BUTTONS */
.btn{
  display:inline-block;font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:14px 22px;border:2px solid var(--white);
  background:var(--white);color:var(--black);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn.ghost{background:transparent;color:var(--white)}
.btn:hover{background:var(--paper);border-color:var(--paper);color:var(--black)}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--black);border-color:var(--black);color:var(--white);margin-top:28px}
.btn.dark:hover{background:#2a2a2a;border-color:#2a2a2a;color:var(--white)}

/* TICKER */
.ticker{
  margin-top:clamp(32px,5vw,80px);
  border-top:var(--rule) solid var(--white);
  border-bottom:var(--rule) solid var(--white);
  overflow:hidden;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,3vw,44px);
  line-height:1;
  padding:14px 0;
}
.marquee{display:flex;width:max-content;animation:slide 34s linear infinite}
.track{display:flex;flex:0 0 auto;list-style:none}
.track li{padding:0 20px;white-space:nowrap}
.track li::after{content:"*";padding-left:20px;color:var(--mute)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* BANDS */
.band{padding:clamp(48px,6.5vw,120px) var(--gutter)}
.band-paper{background:var(--paper);color:var(--black)}
.band h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.9;letter-spacing:-.01em;
  font-size:clamp(46px,7.6vw,118px);
}
.band-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(20px,3vw,48px);
  margin-bottom:clamp(24px,3vw,48px);
  flex-wrap:wrap;
}
.band-head p{max-width:34ch;font-size:clamp(15px,1.1vw,18px);line-height:1.45;padding-bottom:6px}

/* VAULT */
.vault{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,30px)}
.item{display:block}
.item .shot{aspect-ratio:3/4;overflow:hidden;background:#ddd}
.item img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.item figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(0,0,0,.28);
  font-size:clamp(14px,1vw,17px);font-weight:600;
}
.item .price{white-space:nowrap;font-variant-numeric:tabular-nums}

@media(hover:hover){
  .item:hover img{transform:scale(1.045)}
  .item:hover figcaption{border-top-color:var(--black)}
}
@media(max-width:900px){.vault{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ABOUT */
.band-about{border-top:var(--rule) solid var(--white)}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.about h2{margin-bottom:clamp(18px,2vw,30px)}
.about p{font-size:clamp(17px,1.35vw,22px);line-height:1.5;max-width:46ch}
.about .shot{aspect-ratio:3/4;overflow:hidden;background:#1a1a1a}
.about img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.about a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.about a:hover{text-decoration-thickness:2px}

@media(max-width:760px){.about{grid-template-columns:1fr}}

/* QUOTE */
.quote{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,72px);align-items:center}
.quote h2{font-size:clamp(42px,7vw,106px)}
.quote p{margin-top:clamp(18px,2vw,28px);font-size:clamp(17px,1.35vw,21px);max-width:38ch;line-height:1.45}
.quote .shot{aspect-ratio:4/5;overflow:hidden;background:#1a1a1a}
.quote img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(1) contrast(1.05)}
@media(max-width:760px){.quote{grid-template-columns:1fr}}

/* VISIT */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.hours{list-style:none;border-top:var(--rule) solid var(--black)}
.hours li{
  display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:var(--rule) solid var(--black);
  font-family:var(--display);font-size:clamp(22px,2.6vw,42px);
  text-transform:uppercase;line-height:1;
}
.hours li.is-today{background:var(--black);color:var(--paper);padding-inline:12px;margin-inline:-12px}
.addr{margin-top:clamp(24px,2.5vw,36px);font-size:clamp(16px,1.15vw,19px);line-height:1.55}
.addr a{font-weight:600;text-decoration:underline;text-underline-offset:4px}
.visit .shot{aspect-ratio:4/5;overflow:hidden;background:#ddd}
.visit img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){
  .visit{grid-template-columns:1fr}
  /* the storefront shot is dropped on phones (Ally, 2026-09-06): stacked under
     the hours it was a full screen of photo between the address and the footer */
  .visit .shot{display:none}
}

/* INSTAGRAM EMBED
   instagram's embed.js swaps the blockquote for an iframe carrying its own
   inline width rules, so the overrides below need !important to land. */
.social{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.social h2{font-size:clamp(42px,7vw,106px)}
.social p{margin-top:clamp(18px,2vw,28px);font-size:clamp(17px,1.35vw,21px);max-width:34ch;line-height:1.45}
.social .btn{margin-top:clamp(22px,2.5vw,32px)}
.ig-embed{width:100%;max-width:540px;justify-self:end}
.ig-embed .instagram-media{margin:0 !important;min-width:0 !important;width:100% !important;max-width:540px !important}
.ig-embed blockquote a{color:var(--white);text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){
  .social{grid-template-columns:1fr}
  .ig-embed{justify-self:start}
}

/* DESKTOP PHOTO HEIGHTS
   the source shots are all portrait. left at 3/4 or 4/5 they run 800-900px tall
   on a wide screen and strand the text column beside a wall of empty space, so
   above 1100px they fill the column width and crop the height instead. */
@media(min-width:1100px){
  .about .shot,.visit .shot{aspect-ratio:auto;height:clamp(440px,66vh,700px)}
  .quote .shot{aspect-ratio:auto;height:clamp(420px,62vh,660px)}
}

/* FOOTER */
footer{padding:clamp(40px,5.5vw,90px) var(--gutter) 30px;border-top:var(--rule) solid var(--white)}
footer .wordmark{width:100%}
.foot-row{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,40px);font-size:14px;color:var(--mute);
}
.foot-row a{color:var(--white);font-weight:600}
.foot-row a:hover{text-decoration:underline;text-underline-offset:4px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee{animation:none}
  .item img,.btn{transition:none}
  .item:hover img{transform:none}
}