/* ============================================================
   Market and wait list. Tokens and .btn / .shell / .nav come from
   style.css, form fields from forms.css. Only page-specific rules here.
   ============================================================ */

/* ——— hero ——— */
.mk-hero{background:var(--yellow);padding-top:clamp(120px,15vw,180px);padding-bottom:clamp(56px,8vw,104px)}
.mk-hero .eyebrow{margin-bottom:var(--s3);color:var(--ink-75)}
.mk-hero h1{
  font-family:var(--font-display);      /* Rubik, same as the poster */
  font-weight:900;                       /* was 800 (token) → as on the poster */
  font-size:clamp(46px,9vw,112px);       /* size kept: tuned for screens, not the poster */
  line-height:.82;                       /* was .9 */
  letter-spacing:-.04em;                 /* was -.035em */
  text-transform:uppercase;              /* the poster is all caps */
  margin-bottom:var(--s4);
}

.mk-hero h1 .market{
  display:block;
  font-size:.46em;          /* ~half of STRAY SAFE, as on the poster */
  line-height:1;
  letter-spacing:-.015em;   /* MARKET is set slightly looser on the poster */
  margin-top:.08em;
}

.mk-hero .lead{font-size:var(--size-body-l);color:var(--ink-75);max-width:52ch;margin-top:var(--s3)}
.mk-hero .kinds{font-size:var(--size-body-l);color:var(--ink-75);max-width:52ch;margin-top:var(--s3)}
.mk-btns{display:flex;gap:var(--s2);flex-wrap:wrap}
.mk-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;margin-bottom:var(--s4)}
.mk-back:hover{text-decoration:underline;text-underline-offset:3px}

/* Special-edition label above the title (next.edition in market.yml).
   Default colour is a deep red: --red (3.2:1) and --red-dark (4.4:1) are
   below 4.5:1 on the yellow hero at 12px; a theme below sets its own accent. */
.mk-hero{ --red-deep:#842F33; }
.mk-edition{
  display:inline-block;margin-bottom:var(--s3);
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red-deep);
}
.mk-edition[hidden]{display:none}

/* ——— edition theme (next.theme in market.yml) ———
   market.js sets the class on <body>. Only "pumpkin" for now: dark hero +
   pumpkin accent, the Halloween edition. Empty/other value → no class, the
   hero stays yellow.
   The header (.nav) sits over the hero and is shared by all pages, so its
   recolouring also lives here under .theme-pumpkin, not in style.css: it
   affects neither other pages nor waitlist.html (which never gets the class). */
body.theme-pumpkin{ --pumpkin:#D9752E; }

body.theme-pumpkin .nav .logo img{ filter:brightness(0) invert(1); }
body.theme-pumpkin .nav .logo span,
body.theme-pumpkin .nav .menu a,
body.theme-pumpkin .nav .lang{ color:var(--bone); border-color:var(--bone); }
body.theme-pumpkin .nav .menu a:hover{ border-bottom-color:var(--bone); }
body.theme-pumpkin .nav .lang[aria-pressed="true"],
body.theme-pumpkin .nav .lang[aria-current="true"]{ background:var(--bone); color:var(--ink); }

body.theme-pumpkin .mk-hero{ background:var(--ink); color:var(--bone); }
body.theme-pumpkin .mk-hero .eyebrow{ color:rgba(249,245,242,.55); }
body.theme-pumpkin .mk-hero .lead,
body.theme-pumpkin .mk-hero .kinds{ color:rgba(249,245,242,.72); }
body.theme-pumpkin .mk-back{ color:var(--bone); }
body.theme-pumpkin .mk-edition{ color:var(--pumpkin); }
/* the default ink focus outline is invisible on the ink hero: use bone.
   Hero content only; the absolutely positioned .nav is left as is. */
body.theme-pumpkin .mk-hero :focus-visible{ outline-color:var(--bone); }

/* "Announcement" / "Wait list" buttons in the next-market block: pumpkin */
body.theme-pumpkin #next .btn-onblue{ background:var(--pumpkin); color:var(--ink); }
body.theme-pumpkin #next .btn-onblue:hover{ background:#C4661F; }

/* ——— next market (bone background, like the vendors block) ——— */

.mk-next{background:var(--bone);color:var(--ink);padding-block:var(--section-pad);padding-bottom:0}
.mk-next .eyebrow{color:var(--ink-65)}
.mk-next h2{
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(34px,6vw,80px);line-height:.95;letter-spacing:-.03em;margin-bottom:var(--s6);
}
.mk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);padding-top:var(--s5);border-top:1px solid rgba(40,39,34,.18)}
.mk-fact .k{display:block;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-65);margin-bottom:8px}
.mk-fact .v{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.35}
.mk-fact .v a{color:var(--ink);text-underline-offset:3px}
.mk-rules{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s6)}
.mk-rules span{
  font-size:14px;font-weight:500;
  border:1px solid rgba(40,39,34,.28);border-radius:var(--r-pill);
  padding:8px 16px;color:var(--ink-70);
}
.mk-cta{margin-top:var(--s6)}
.btn-onblue{background:var(--ink);color:var(--bone)}
.btn-onblue:hover{background:#000}
.mk-soon{
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(34px,6vw,80px);line-height:.95;letter-spacing:-.03em;
  margin-bottom:var(--s4);
}
.mk-tba{font-size:var(--size-body-l);color:var(--ink-70);max-width:44ch}

/* ——— entertainment programme (next.program): dark band, like the poster ———
   Time on the left in the display face, title on the right. The time column
   fits "18:00–20:00" on one line; titles wrap. */
.mk-next.mk-next-band{padding-bottom:var(--section-pad)}
.mk-program{background:var(--ink);color:var(--bone);padding-block:var(--section-pad)}
.mk-program[hidden]{display:none}
.mk-program .eyebrow{color:rgba(249,245,242,.55)}
.mk-program h2{margin-bottom:var(--s6)}
/* One shared time column for all rows: the list is the grid, rows are
   subgrids. Without subgrid the fixed 6.4em fallback column is used. */
.mk-prog-list{
  list-style:none;margin:0;padding:0;font-size:clamp(18px,2vw,24px);line-height:1.3;
  display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(20px,3vw,48px);
}
.mk-prog-item{
  grid-column:1/-1;display:grid;align-items:baseline;column-gap:inherit;
  grid-template-columns:6.4em minmax(0,1fr);
  grid-template-columns:subgrid;
  padding-block:clamp(12px,1.4vw,18px);
  border-top:1px solid rgba(249,245,242,.16);
}
.mk-prog-item:last-child{border-bottom:1px solid rgba(249,245,242,.16)}
.mk-prog-time{
  font-family:var(--font-display);font-weight:var(--weight-display);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.mk-prog-title{font-family:var(--font-body);font-weight:400;overflow-wrap:break-word}
/* pumpkin edition: orange times, as on the poster's date; the eyebrow
   stays muted bone like the hero and archive eyebrows */
body.theme-pumpkin .mk-prog-time{color:var(--pumpkin)}
/* narrow phones: time above the title */
@media(max-width:480px){
  .mk-prog-list{grid-template-columns:minmax(0,1fr)}
  .mk-prog-item{grid-template-columns:minmax(0,1fr);row-gap:4px}
}

/* ——— vendors ——— */

.mk-vendors{background:var(--bone);padding-block:var(--section-pad)}
.mk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
/* section headings: vendors, archive, programme */
.mk-head h2,.mk-past h2,.mk-program h2{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;line-height:1}
.mk-count{font-family:var(--font-display);font-weight:600;font-size:14px;background:var(--white);border:1px solid var(--hairline);padding:9px 18px;border-radius:var(--r-pill);white-space:nowrap}
.vendors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4)}
.vendor{
  font:inherit;text-align:left;width:100%;padding:0;cursor:pointer;
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.vendor:hover{transform:translateY(-3px);border-color:var(--ink)}
.vendor-ph{aspect-ratio:1/1;background:#EFE9E2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vendor-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vendor:hover .vendor-ph img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.vendor-ph img{transition:none}.vendor:hover .vendor-ph img{transform:none}}
.vendor-ph span{font-family:var(--font-display);font-weight:var(--weight-display);font-size:64px;line-height:1;color:rgba(40,39,34,.26)}
.vendor-body{padding:var(--s4) var(--s4) var(--s5);display:flex;flex-direction:column;gap:4px;flex:1}
.vendor h3{font-family:var(--font-display);font-weight:var(--weight-display);font-size:21px;letter-spacing:-.02em;line-height:1.12}
.vendor .craft{font-size:14px;color:#7A7466;line-height:1.4}
.vendors-empty{background:var(--white);border:2px dashed rgba(40,39,34,.22);border-radius:var(--r-card);padding:var(--s6);text-align:center;color:var(--ink-65);font-size:15px}

/* "join the wait list" strip, like about-foot on the home page */
.mk-join{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;
  margin-top:clamp(40px,5vw,72px);padding-top:var(--s5);
  border-top:1px solid var(--hairline);
}
.mk-join[hidden]{display:none}
.mk-join p{margin:0;max-width:52ch;color:var(--ink-70);font-size:var(--size-body-l);line-height:1.5}

/* ——— past markets: photo wall ——— */
.mk-past{background:var(--ink);color:var(--bone);padding-block:var(--section-pad)}
.mk-past .eyebrow{color:rgba(249,245,242,.55)}
.mk-head-past{align-items:baseline;margin-bottom:var(--s6)}
/* shot counter on dark: transparent, bone border and text */
.mk-count-past{background:transparent;border-color:rgba(249,245,242,.28);color:var(--bone)}
.mk-count-past[hidden]{display:none}

/* Photo wall: column masonry, photos keep their proportions without
   cropping or distortion. Fewer columns on narrow screens. */
.shots-wall{columns:4;column-gap:12px}
@media(max-width:1000px){.shots-wall{columns:3}}
@media(max-width:680px){.shots-wall{columns:2}}
.shot{
  break-inside:avoid;margin:0 0 12px;display:block;width:100%;position:relative;
  border:0;padding:0;overflow:hidden;cursor:pointer;
  background:rgba(249,245,242,.06);
}
.shot img{display:block;width:100%;height:auto;transition:transform .35s ease}
.shot:hover img,.shot:focus-visible img{transform:scale(1.045)}
.shot:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* caption over the photo: a brand-approved scrim, shown on hover */
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;
  font-size:13px;line-height:1.3;color:var(--bone);pointer-events:none;
  background:linear-gradient(0deg,rgba(24,23,20,.92) 0%,rgba(24,23,20,.6) 55%,rgba(24,23,20,0) 100%);
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;
}
.shot:hover figcaption,.shot:focus-visible figcaption{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .shot img,.shot figcaption{transition:none}
  .shot:hover img,.shot:focus-visible img{transform:none}
}

/* ——— lightbox ———
   The close button sits above the photo inside the dialog's top padding
   (44px button + 12px gap), not outside the box: a box-relative negative
   top pushed it off-screen for tall photos. The frame's max height leaves
   room for that padding and the caption, so the whole box fits 100svh. */
.lightbox{border:0;padding:56px 0 0;background:transparent;position:fixed;inset:0;margin:auto;width:min(1100px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:visible}
.lightbox::backdrop{background:rgba(40,39,34,.88)}
.lb-frame{display:flex;align-items:center;justify-content:center;max-height:calc(100svh - 152px)}
.lb-frame img{max-width:100%;max-height:calc(100svh - 152px);object-fit:contain;display:block}
.lb-cap{text-align:center;color:rgba(249,245,242,.7);font-size:13px;margin-top:12px;font-variant-numeric:tabular-nums}
.lb-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;cursor:pointer;border:1px solid rgba(249,245,242,.25);background:rgba(40,39,34,.7);color:var(--bone);display:flex;align-items:center;justify-content:center;transform:translateY(-50%);transition:background .16s ease,transform .16s ease}
.lb-nav:hover{background:var(--ink);transform:translateY(-50%) scale(1.08)}
.lb-nav svg{width:17px;height:17px}
.lb-nav.prev{left:-8px} .lb-nav.next{right:-8px}
.lb-nav[disabled]{opacity:0;pointer-events:none}
.lb-x{position:absolute;top:0;right:0;z-index:3;width:44px;height:44px;border:0;cursor:pointer;background:var(--bone);color:var(--ink);font-size:20px;line-height:1}
@media(max-width:640px){.lb-nav.prev{left:4px}.lb-nav.next{right:4px}}

/* ============================================================
   WAIT LIST: a separate page
   ============================================================ */
.wl-head{background:var(--yellow);padding-top:clamp(120px,15vw,180px);padding-bottom:clamp(40px,6vw,72px)}
.wl-head h1
{
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(46px,9vw,112px);line-height:.9;letter-spacing:-.035em;
  text-transform:uppercase;margin-bottom:var(--s4);
}

.wl-head .lead{font-size:var(--size-body-l);color:var(--ink-75);max-width:52ch;margin-top:var(--s3)}
.wl-body{background:var(--bone);padding-block:var(--section-pad)}
.wl-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:start}
.wl-side{background:var(--white);border:1px solid var(--hairline);border-radius:var(--r-card);padding:var(--s5);position:sticky;top:var(--s4)}
.wl-side ul{list-style:none;margin:0;padding:0}
.wl-side li{position:relative;padding-left:24px;margin-bottom:var(--s3);font-size:15px;color:var(--ink-70);line-height:1.5}
.wl-side li:last-child{margin-bottom:0}
.wl-side li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--yellow)}
.wl-side .tg{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--hairline);font-size:14px;color:var(--ink-70)}
.wl-side .tg a{color:var(--ink);text-underline-offset:3px}

@media(max-width:860px){
  .wl-grid{grid-template-columns:1fr;gap:var(--s5)}
  .wl-side{position:static}
  .mk-hero .lead{max-width:none}
}