:root {
  color-scheme: light;
  --paper: #f1ead8;
  --paper-deep: #d9cfb9;
  --ink: #10100e;
  --muted: #5d574b;
  --black: #060604;
  --red: #b31d19;
  --blue: #1155a6;
  --green: #1d7043;
  --yellow: #e0b33e;
  --line: rgba(16, 16, 14, 0.32);
  --shadow: 12px 12px 0 rgba(16, 16, 14, 0.92);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.62), transparent 23%),
    radial-gradient(circle at 76% 70%, rgba(217, 207, 185, 0.42), transparent 29%),
    linear-gradient(90deg, rgba(16, 16, 14, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #f7f0df 0%, #eee5d2 58%, #e6dcc7 100%);
  background-size: auto, auto, 52px 52px, auto;
  letter-spacing: 0;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(rgba(16, 16, 14, 0.16) 0.7px, transparent 0.8px),
    radial-gradient(rgba(179, 29, 25, 0.12) 0.6px, transparent 0.9px),
    repeating-linear-gradient(98deg, rgba(16, 16, 14, 0.018) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(255,255,255,0.34), transparent 18% 82%, rgba(16,16,14,0.055));
  background-position: 0 0, 9px 13px, 0 0, 0 0;
  background-size: 6px 6px, 17px 17px, auto, 100% 100%;
  opacity: 0.72;
  pointer-events: none;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 9px clamp(14px, 4vw, 42px);
  border-bottom: 2px solid var(--ink);
  background: rgba(241, 234, 216, 0.95);
  backdrop-filter: blur(10px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  width: clamp(116px, 16vw, 178px);
  height: 42px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--black);
  box-shadow: 3px 3px 0 var(--blue);
}
.brand-lockup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px 6px;
}
.brand-sub, .eyebrow {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.brand-sub { color: var(--muted); }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 14px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.nav-links a { border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.is-active { border-color: var(--red); outline: none; }
.nav-menu {
  position: relative;
  display: grid;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
.nav-menu::after {
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  height: 12px;
  content: "";
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  display: grid;
  min-width: 176px;
  border: 2px solid var(--ink);
  background: #fff8e9;
  box-shadow: 6px 6px 0 rgba(16,16,14,0.9);
  opacity: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
.nav-dropdown a {
  padding: 12px 14px;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.nav-dropdown a:last-child { border-bottom: 0; }
.nav-menu:hover .nav-dropdown,
.nav-menu:focus-within .nav-dropdown {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.page-view[hidden] { display: none; }
.page-view:not(.home-view) { min-height: calc(100svh - 60px); }

.portal-hero {
  display: block;
  min-height: calc(100svh - 60px);
  padding: clamp(12px, 3vw, 30px);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.68), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(224,179,62,0.18), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(217,207,185,0.34)),
    transparent;
  color: var(--ink);
}

.portal-scene {
  position: relative;
  min-height: max(720px, calc(100svh - 96px));
  border: 3px solid var(--ink);
  box-shadow: 14px 14px 0 rgba(224, 179, 62, 0.72), 23px 23px 0 rgba(0, 0, 0, 0.78);
  overflow: hidden;
  background:
    radial-gradient(rgba(16,16,14,0.09) 0.55px, transparent 0.8px),
    radial-gradient(rgba(17,85,166,0.055) 0.45px, transparent 0.75px),
    radial-gradient(rgba(179,29,25,0.055) 0.45px, transparent 0.75px),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.7), transparent 24%),
    radial-gradient(circle at 82% 74%, rgba(217,207,185,0.62), transparent 27%),
    repeating-linear-gradient(88deg, rgba(16,16,14,0.016) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #fbf4e4 0%, #f0e6d1 54%, #e7dcc5 100%);
  background-position: 0 0, 11px 7px, 19px 23px, 0 0, 0 0, 0 0, 0 0;
  background-size: 18px 18px, 31px 31px, 43px 43px, auto, auto, auto, 100% 100%;
}

.portal-scene::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 56%, rgba(16,16,14,0.08) 100%),
    radial-gradient(circle at 14% 34%, rgba(179,29,25,0.055) 0 1.2px, transparent 2px),
    radial-gradient(circle at 74% 20%, rgba(17,85,166,0.05) 0 1.2px, transparent 2px),
    repeating-linear-gradient(-8deg, transparent 0 42px, rgba(16,16,14,0.024) 42px 43px);
  background-size: auto, 190px 190px, 230px 230px, auto;
  opacity: 0.82;
}

.sky-strip {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  background: var(--green);
  color: var(--paper);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.portal-sign {
  position: absolute;
  top: clamp(12px, 3vw, 30px);
  left: 50%;
  width: min(900px, calc(100% - 54px));
  padding: clamp(12px, 2.4vw, 24px) clamp(14px, 3vw, 34px);
  border: 3px solid var(--ink);
  background: var(--black);
  color: var(--paper);
  transform: translateX(-50%) rotate(-1.5deg);
  box-shadow: 9px 9px 0 var(--red);
  text-align: center;
}

.portal-sign.wordmark { font-size: clamp(3.2rem, 11vw, 10rem); }
.portal-sign .eyebrow { color: var(--yellow); }
.logo-sign {
  z-index: 4;
  display: grid;
  width: min(720px, 50%);
  min-height: clamp(92px, 13vw, 160px);
  padding: clamp(10px, 1.8vw, 18px) clamp(18px, 3vw, 34px);
  place-items: center;
  background: #000;
  box-shadow: 9px 9px 0 rgba(16,16,14,0.86);
}
.logo-sign::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.logo-sign::after {
  left: 50%;
  top: -18px;
  width: 120px;
  height: 27px;
  border: 2px solid rgba(16,16,14,0.36);
  background: rgba(241,234,216,0.78);
  transform: translateX(-50%) rotate(-2deg);
  mix-blend-mode: multiply;
}
.rgb-wordmark {
  position: relative;
  display: block;
  max-width: 100%;
  color: var(--yellow);
  font-family: Impact, "Arial Black", Haettenschweiler, sans-serif;
  font-size: clamp(4rem, 12.2vw, 11.2rem);
  font-style: italic;
  font-weight: 950;
  line-height: 0.82;
  text-transform: uppercase;
  transform: skew(-7deg) scaleX(0.9);
  text-shadow:
    -0.055em -0.035em 0 var(--blue),
    0.052em 0.028em 0 var(--red),
    -0.02em 0.058em 0 var(--green),
    0 0 18px rgba(224, 179, 62, 0.22);
  white-space: nowrap;
}
.rgb-wordmark::after {
  position: absolute;
  inset: 0;
  color: transparent;
  content: "PRECEDENCE";
  -webkit-text-stroke: 0.018em rgba(241, 234, 216, 0.28);
  text-shadow: none;
}
.logo-sign img {
  width: 100%;
  height: 100%;
  max-height: clamp(72px, 10vw, 122px);
  object-fit: contain;
}
a.logo-sign:hover,
a.logo-sign:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px var(--blue),
    0 0 0 9px var(--red),
    0 0 0 14px var(--yellow),
    0 0 0 19px var(--green),
    9px 9px 0 rgba(16,16,14,0.86);
}

.scene-object {
  --accent: var(--yellow);
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 8px;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: #fff8e9;
  box-shadow: 8px 8px 0 rgba(16,16,14,0.9);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.scene-object::before {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 3;
  width: 86px;
  height: 25px;
  border: 2px solid rgba(16,16,14,0.42);
  content: "";
  background: rgba(241, 234, 216, 0.74);
  transform: translateX(-50%) rotate(-2deg);
  mix-blend-mode: multiply;
}

a.scene-object:hover,
a.scene-object:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
  transform: translate(-2px, -2px) rotate(var(--tilt, 0deg));
  box-shadow: 7px 7px 0 rgba(16,16,14,0.95), 13px 13px 0 var(--accent);
}

.object-label {
  justify-self: start;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-window {
  --accent: var(--blue);
  --tilt: -1deg;
  left: 5%;
  bottom: 5%;
  width: min(590px, 48%);
  min-height: 255px;
  padding: 20px 18px 18px;
  background:
    linear-gradient(180deg, var(--blue) 0 42px, rgba(17,85,166,0.12) 42px 104px, transparent 104px),
    radial-gradient(rgba(16,16,14,0.09) 1px, transparent 1.2px),
    #fff8e9;
  background-size: auto, 14px 14px, auto;
  transform: rotate(-1deg);
}

.window-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0;
}

.shop-window b {
  position: relative;
  z-index: 1;
  align-self: end;
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 3.7vw, 3.7rem);
  line-height: 0.95;
}

.shop-window small {
  position: relative;
  z-index: 1;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.88rem, 1.3vw, 1.1rem);
  font-weight: 900;
  text-transform: uppercase;
}

.poster-kiosk {
  --accent: var(--red);
  --tilt: 1.5deg;
  right: 6%;
  bottom: 6%;
  width: min(390px, 32%);
  min-height: 255px;
  padding: 16px;
  background:
    linear-gradient(180deg, var(--red) 0 18%, transparent 18%),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(17,85,166,0.18) 21px 23px),
    #fff8e9;
  transform: rotate(1.5deg);
}

.poster-kiosk strong {
  margin-top: 62px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.25rem, 4.25vw, 4.45rem);
  line-height: 0.88;
}

.poster-kiosk small,
.profile-clipboard small {
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.profile-clipboard {
  --accent: var(--yellow);
  --tilt: -1.5deg;
  left: 44%;
  top: 43%;
  width: min(300px, 25%);
  min-height: 158px;
  padding: 34px 16px 14px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(17,85,166,0.24) 31px 33px),
    #fffdfa;
  transform: rotate(-1deg);
}

.profile-clipboard .clip {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 92px;
  height: 34px;
  border: 3px solid var(--ink);
  background: var(--paper-deep);
  transform: translateX(-50%);
}

.profile-clipboard strong {
  font-family: Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  line-height: 1;
}

.social-tv {
  --accent: var(--blue);
  --tilt: -1.5deg;
  right: 4.5%;
  top: 22%;
  width: min(230px, 19%);
  min-height: 238px;
  padding: 12px 12px 18px;
  background: #fff8e9;
  color: var(--ink);
  transform: rotate(-1.5deg);
}

.social-tv::before {
  left: 57%;
  width: 104px;
  transform: translateX(-50%) rotate(3deg);
}

.polaroid-photo {
  display: grid;
  min-height: 142px;
  padding: 16px;
  place-items: center;
  border: 3px solid var(--ink);
  background:
    radial-gradient(rgba(241,234,216,0.13) 1px, transparent 1px),
    var(--black);
  background-size: 6px 6px, auto;
}

.social-tv [data-scene-social] {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.social-tv .mini-logo {
  width: clamp(58px, 5.5vw, 72px);
  background: var(--black);
}

.social-caption {
  display: block;
  align-self: stretch;
  padding: 10px 12px 8px;
  border: 3px solid var(--ink);
  background: var(--blue);
  color: var(--paper);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  font-style: italic;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
}

.sell-ticket {
  --accent: var(--green);
  --tilt: 1deg;
  left: 3%;
  top: 25%;
  width: min(270px, 22%);
  min-height: 150px;
  padding: 15px;
  background:
    repeating-linear-gradient(0deg, rgba(16,16,14,0.08) 0 2px, transparent 2px 18px),
    #fff8e9;
  transform: rotate(1deg);
}

.sell-ticket .object-label {
  background: var(--green);
  color: var(--paper);
}

a.sell-ticket:hover,
a.sell-ticket:focus-visible {
  outline-color: var(--green);
}

.sell-ticket strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.28rem, 2.25vw, 2.15rem);
  line-height: 0.98;
}

.sticker {
  min-height: 0;
  padding: 9px 12px;
  color: var(--paper);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
}
.stack-one { left: 7%; top: 38%; background: var(--red); transform: rotate(-9deg); }
.stack-two { left: 23%; top: 41%; background: var(--green); transform: rotate(7deg); }
.stack-three { right: 4%; top: 29%; background: var(--yellow); color: var(--ink); transform: rotate(9deg); }
.desk-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 18px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--green);
}

.mini-logo,
.shop-mark {
  display: grid;
  place-items: center;
}

.mini-logo {
  min-width: 0;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 7px;
}

.shop-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.34fr);
  align-items: start;
  gap: 22px;
}

.shop-column {
  border: 2px solid var(--ink);
  background: rgba(255, 248, 233, 0.78);
  box-shadow: var(--shadow);
}

.board-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 2px solid var(--ink);
  background: var(--black);
  color: var(--paper);
}

.board-header h2,
.board-header h3 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 2.9vw, 2.65rem);
  line-height: 0.96;
  text-wrap: balance;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(780px, calc(82svh - 60px));
  border-bottom: 2px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(6, 6, 4, 0.82), rgba(6, 6, 4, 0.72)),
    var(--black);
  color: var(--paper);
  overflow: hidden;
}

.hero-media {
  position: relative;
  min-height: 440px;
  border-right: 2px solid var(--paper);
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  filter: contrast(1.2) saturate(0.88) grayscale(0.18);
}
.hero-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(241, 234, 216, 0.11) 16px 17px),
    linear-gradient(180deg, transparent, rgba(6,6,4,0.58));
}

.tape {
  position: absolute;
  z-index: 2;
  padding: 9px 13px;
  border: 2px solid var(--paper);
  color: var(--paper);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 7px 7px 0 rgba(0,0,0,0.7);
}
.tape-red { top: 34px; left: 22px; background: var(--red); transform: rotate(-3deg); }
.tape-blue { right: 20px; bottom: 110px; background: var(--blue); transform: rotate(4deg); }
.tape-yellow { right: 38px; bottom: 36px; background: var(--yellow); color: var(--black); transform: rotate(-1deg); }

.hero-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(26px, 5vw, 64px);
  background:
    linear-gradient(90deg, rgba(179, 29, 25, 0.16), transparent 36%),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(241, 234, 216, 0.08) 28px 29px);
}
.eyebrow { margin: 0; color: var(--yellow); }
.wordmark {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: Impact, "Arial Black", Haettenschweiler, sans-serif;
  font-size: clamp(3.8rem, 10vw, 10.6rem);
  font-style: italic;
  font-weight: 950;
  line-height: 0.76;
  text-transform: uppercase;
}
.wordmark span { display: block; transform: skew(-8deg) scaleX(0.88); transform-origin: left center; }
.wordmark span:first-child, .wordmark span:nth-child(2) { position: absolute; inset: 0; z-index: -1; }
.wordmark span:first-child { color: var(--blue); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 43%); transform: translate(-8px, -4px) skew(-8deg) scaleX(0.88); }
.wordmark span:nth-child(2) { color: var(--red); clip-path: polygon(0 44%, 100% 52%, 100% 100%, 0 100%); transform: translate(8px, 5px) skew(-8deg) scaleX(0.88); }
.hero-lede {
  max-width: 720px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 7.4rem);
  line-height: 0.9;
}
.hero-copyline {
  max-width: 680px;
  margin: 0;
  color: rgba(241, 234, 216, 0.86);
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  line-height: 1.45;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.hero.portal-hero {
  display: block;
  grid-template-columns: none;
  align-items: initial;
  min-height: calc(100svh - 60px);
  padding: clamp(12px, 3vw, 30px);
}

.hero.portal-hero .wordmark span { transform-origin: center; }

.section-band {
  padding: clamp(36px, 6vw, 74px) clamp(14px, 4vw, 42px);
  border-bottom: 2px solid var(--ink);
}
.page-card {
  position: relative;
  padding: clamp(16px, 2.6vw, 26px);
  border: 2px solid var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(16,16,14,0.065) 0 2px, transparent 2px 18px),
    #fff8e9;
  box-shadow: 8px 8px 0 rgba(16, 16, 14, 0.9);
}
.page-card::before {
  position: absolute;
  top: -14px;
  left: clamp(28px, 8vw, 120px);
  width: 92px;
  height: 26px;
  border: 2px solid rgba(16,16,14,0.32);
  content: "";
  background: rgba(241,234,216,0.72);
  transform: rotate(-2deg);
  mix-blend-mode: multiply;
}
.directory-intro {
  max-width: 860px;
  margin: 0 0 22px;
}
.directory-intro h1 {
  max-width: 780px;
  font-size: clamp(2.35rem, 4.8vw, 4.65rem);
}
.directory-intro p {
  max-width: 650px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.45;
}
.section-heading { max-width: 780px; margin-bottom: 26px; }
.section-heading.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.72fr);
  align-items: end;
  max-width: none;
  gap: 24px;
}
h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 6vw, 5.6rem);
  line-height: 0.95;
}
h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 6.8vw, 6.4rem);
  line-height: 0.92;
}
.section-heading p:not(.eyebrow), .note-stack p, .about-band p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.5;
}

.button, .text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.button { padding: 10px 14px; background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 currentColor; }
.button.primary { background: var(--yellow); color: var(--black); }
.button.ghost { background: transparent; box-shadow: none; }
.text-link { min-height: 0; border-color: transparent; color: var(--blue); text-decoration: underline; text-underline-offset: 5px; }
.button:hover, .button:focus-visible { background: var(--red); color: #fff; outline: none; }
.text-link:hover, .text-link:focus-visible { color: var(--red); outline: none; }

.directory-band {
  background:
    linear-gradient(90deg, rgba(179, 29, 25, 0.82) 0 10px, transparent 10px),
    linear-gradient(135deg, rgba(224, 179, 62, 0.2), transparent 34%),
    linear-gradient(45deg, transparent 0 74%, rgba(17, 85, 166, 0.18) 74% 78%, transparent 78%),
    var(--paper);
}
.socials-band {
  background:
    linear-gradient(90deg, rgba(17, 85, 166, 0.82) 0 10px, transparent 10px),
    linear-gradient(90deg, rgba(17, 85, 166, 0.18), transparent 36%),
    linear-gradient(0deg, transparent 0 78%, rgba(179, 29, 25, 0.18) 78% 82%, transparent 82%),
    var(--paper);
}
.shop-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  box-shadow: none;
}
.shop-entry {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  min-height: 235px;
  padding: 14px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: #fff8e9;
  overflow: hidden;
}
.shop-entry::before {
  display: none;
}
.shop-entry {
  --accent: var(--yellow);
}
.shop-entry:hover,
.shop-entry:focus-visible {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 52%),
    var(--paper-deep);
  outline: 4px solid var(--accent);
  outline-offset: -6px;
}
.shop-mark {
  display: grid;
  width: 58px;
  aspect-ratio: 1;
  place-items: center;
  margin: 10px 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 0.9rem;
}
.shop-mark svg,
.mini-logo svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo-tiktok svg path { fill: currentColor; stroke: none; }
.logo-depop .word-logo,
.logo-whatnot .word-logo,
.logo-mercari .word-logo {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 0.74rem;
  line-height: 0.86;
  text-align: center;
  text-transform: uppercase;
}
.logo-depop .word-logo { font-size: 0.95rem; letter-spacing: 0; }
.logo-whatnot .word-logo { font-size: 0.62rem; transform: rotate(-6deg); }
.logo-mercari .word-logo { font-size: 0.62rem; color: var(--blue); }
.ebay-word {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: -1px;
}
.mini-logo .ebay-word { font-size: clamp(0.75rem, 1.5vw, 1.1rem); }
.ebay-word i { font-style: normal; }
.ebay-word i:nth-child(1) { color: #e53238; }
.ebay-word i:nth-child(2) { color: #0064d2; }
.ebay-word i:nth-child(3) { color: #f5af02; }
.ebay-word i:nth-child(4) { color: #86b817; }
.logo-instagram { color: #c13584; }
.logo-tiktok { color: #111; }
.logo-youtube { color: var(--red); }
.social-tv .logo-instagram,
.social-tv .logo-tiktok,
.social-tv .logo-youtube { color: var(--paper); background: var(--black); }
.logo-poster-stand { color: var(--blue); }
.poster-stand-feature {
  display: grid;
  grid-template-columns: minmax(260px, 0.46fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(16px, 3vw, 28px);
  margin: 0 0 24px;
}
.poster-stand-photo {
  position: relative;
  margin: 0;
  padding: 12px 12px 46px;
  border: 2px solid var(--ink);
  background: #fffdfa;
  box-shadow: 9px 9px 0 rgba(16,16,14,0.9);
  transform: rotate(-1.2deg);
}
.poster-stand-photo::before {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 25px;
  border: 2px solid rgba(16,16,14,0.28);
  content: "";
  background: rgba(241,234,216,0.74);
  transform: translateX(-50%) rotate(2deg);
  mix-blend-mode: multiply;
}
.poster-stand-photo img {
  width: 100%;
  height: min(74svh, 760px);
  object-fit: contain;
  object-position: center center;
  border: 2px solid var(--ink);
  background: #edf3ee;
  filter: contrast(1.04) saturate(0.95);
}
.poster-stand-photo figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
.poster-stand-copy {
  position: relative;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(18px, 3.2vw, 36px);
  border: 2px solid var(--ink);
  background:
    radial-gradient(rgba(17,85,166,0.12) 1px, transparent 1.2px),
    linear-gradient(135deg, rgba(29,112,67,0.18), transparent 44%),
    #fff8e9;
  background-size: 12px 12px, auto, auto;
  box-shadow: 9px 9px 0 rgba(16,16,14,0.9);
}
.poster-stand-copy::before {
  position: absolute;
  top: -13px;
  right: clamp(28px, 7vw, 112px);
  width: 82px;
  height: 24px;
  border: 2px solid rgba(16,16,14,0.28);
  content: "";
  background: rgba(241,234,216,0.72);
  transform: rotate(-3deg);
  mix-blend-mode: multiply;
}
.poster-stand-copy h2 {
  max-width: 780px;
  font-size: clamp(2.2rem, 5vw, 5.2rem);
}
.poster-stand-copy p:not(.eyebrow) {
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.45;
}
.poster-stock-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
}
.poster-stock-list li {
  position: relative;
  padding: 12px 14px 12px 48px;
  border: 2px solid var(--ink);
  background: #fffdfa;
  color: var(--muted);
  line-height: 1.35;
}
.poster-stock-list li::before {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  content: "";
  background: var(--yellow);
  transform: translateY(-50%) rotate(-6deg);
}
.poster-stock-list li:nth-child(2)::before { background: var(--blue); }
.poster-stock-list li:nth-child(3)::before { background: var(--green); }
.poster-stock-list strong {
  color: var(--ink);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}
.physical-board { grid-template-columns: 1fr; }
.physical-board .shop-entry {
  min-height: 220px;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 18px;
  align-items: start;
}
.physical-board .shop-mark { grid-row: 1 / span 4; width: 78px; }
.physical-board .status-label,
.physical-board strong,
.physical-board p,
.physical-board b { grid-column: 2; }
.socials-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  max-width: 760px;
  box-shadow: 6px 6px 0 rgba(16, 16, 14, 0.82);
}
.socials-board .shop-entry {
  grid-template-rows: auto auto auto;
  min-height: 0;
  gap: 6px;
  padding: 10px;
  border-top-width: 7px;
}
.socials-board .shop-mark {
  width: 36px;
  margin: 0;
  border-width: 2px;
}
.socials-board .status-label,
.socials-board .shop-entry p {
  display: none;
}
.socials-board .shop-entry strong {
  align-self: start;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.82rem;
  line-height: 1;
  text-transform: uppercase;
}
.socials-board .shop-entry b {
  align-self: start;
  font-size: 0.72rem;
  line-height: 1.1;
}
.social-embeds {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
  margin-top: 28px;
}
.embed-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--ink);
  background: #fff8e9;
  box-shadow: 7px 7px 0 rgba(16, 16, 14, 0.82);
}
.youtube-panel { grid-row: span 2; }
.embed-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.embed-panel-head h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  line-height: 1;
}
.embed-panel-head .eyebrow { margin: 0; color: var(--red); }
.media-fallback {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 260px;
  padding: 18px;
  border: 2px solid var(--ink);
  background:
    linear-gradient(90deg, rgba(16,16,14,0.045) 1px, transparent 1px),
    linear-gradient(180deg, #fffdf8, #f2ead9);
  background-size: 34px 34px, auto;
}
.youtube-fallback {
  min-height: 520px;
  align-content: center;
  justify-items: start;
  background:
    linear-gradient(135deg, rgba(179,29,25,0.16), transparent 42%),
    linear-gradient(90deg, rgba(16,16,14,0.045) 1px, transparent 1px),
    #fffdf8;
  background-size: auto, 34px 34px, auto;
}
.media-fallback strong {
  font-family: Georgia, serif;
  font-size: clamp(1.7rem, 4vw, 4.8rem);
  line-height: 0.95;
}
.media-fallback p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.media-fallback code {
  max-width: 100%;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
  white-space: normal;
  overflow-wrap: anywhere;
}
.media-mark {
  display: grid;
  width: 68px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.media-mark svg {
  width: 72%;
  height: 72%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.media-mark.logo-tiktok svg path { fill: currentColor; stroke: none; }
.native-embed {
  display: grid;
  justify-items: center;
  padding: 12px;
  border: 2px solid var(--ink);
  background: #fffdf8;
  min-width: 0;
  overflow: hidden;
}
.native-embed .instagram-media,
.native-embed .tiktok-embed {
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}
.status-label {
  justify-self: start;
  padding: 4px 7px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.shop-entry strong { align-self: end; font-family: Georgia, serif; font-size: 1.9rem; line-height: 1; }
.shop-entry p { margin: 0; color: var(--muted); line-height: 1.35; }
.shop-entry b { align-self: end; font-family: "Arial Narrow", Arial, sans-serif; text-transform: uppercase; }
.tone-red { border-top: 12px solid var(--red); }
.tone-blue { border-top: 12px solid var(--blue); }
.tone-green { border-top: 12px solid var(--green); }
.tone-yellow { border-top: 12px solid var(--yellow); }
.tone-black { border-top: 12px solid var(--black); }
.tone-red { --accent: var(--red); }
.tone-blue { --accent: var(--blue); }
.tone-green { --accent: var(--green); }
.tone-yellow { --accent: var(--yellow); }
.tone-black { --accent: var(--black); }

.note-band, .about-band {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 26px;
  background: var(--black);
  color: var(--paper);
}
.note-stack p, .about-band p { color: rgba(241, 234, 216, 0.76); }
.note-stack {
  padding: 18px;
  border: 2px solid var(--paper);
  background: repeating-linear-gradient(0deg, rgba(241,234,216,0.08) 0 1px, transparent 1px 10px);
}

.profile-band {
  background:
    linear-gradient(90deg, rgba(29, 112, 67, 0.88) 0 10px, transparent 10px),
    linear-gradient(90deg, rgba(29, 112, 67, 0.2), transparent 38%),
    var(--paper);
}

.sell-band {
  background:
    linear-gradient(90deg, rgba(29, 112, 67, 0.88) 0 10px, transparent 10px),
    linear-gradient(90deg, rgba(179, 29, 25, 0.17), transparent 42%),
    linear-gradient(0deg, transparent 0 70%, rgba(224, 179, 62, 0.22) 70% 74%, transparent 74%),
    var(--paper);
}

.sell-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 16px;
}

.sell-panel {
  position: relative;
  padding: clamp(16px, 2.5vw, 24px);
  border: 2px solid var(--ink);
  background: #fff8e9;
  box-shadow: 8px 8px 0 rgba(16, 16, 14, 0.9);
}
.sell-panel::before {
  position: absolute;
  top: -12px;
  right: 24px;
  width: 76px;
  height: 22px;
  border: 2px solid rgba(16,16,14,0.28);
  content: "";
  background: rgba(241,234,216,0.72);
  transform: rotate(2deg);
  mix-blend-mode: multiply;
}

.sell-panel h2 {
  margin-bottom: 16px;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
}

.numbered-list {
  display: grid;
  gap: 11px;
  padding-left: 22px;
  margin: 0;
  line-height: 1.45;
}

.commission-table {
  display: grid;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.commission-table div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commission-table div:first-child { background: var(--black); color: var(--paper); }
.commission-table span {
  min-width: 0;
  padding: 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.static-tags { padding: 0; }
.static-tags span {
  padding: 7px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-weight: 850;
}

.submit-panel {
  background:
    repeating-linear-gradient(-6deg, rgba(17,85,166,0.1) 0 2px, transparent 2px 18px),
    #fff8e9;
}

.submit-contact {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.submit-contact strong {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
}
.submit-contact span {
  color: var(--muted);
  line-height: 1.35;
}
.contact-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-icon {
  display: grid;
  width: 58px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  background: #fffdfa;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.contact-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-icon:hover,
.contact-icon:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.mail-icon { color: var(--blue); }
.instagram-icon { color: #c13584; }

.seo-band {
  display: grid;
  grid-template-columns: minmax(300px, 0.54fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 42px);
  background:
    linear-gradient(90deg, rgba(179,29,25,0.92) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(17,85,166,0.2), transparent 34%),
    linear-gradient(90deg, transparent 0 82%, rgba(29,112,67,0.25) 82% 86%, transparent 86%),
    radial-gradient(rgba(224,179,62,0.26) 1px, transparent 1px),
    var(--black);
  background-size: auto, auto, auto, 10px 10px, auto;
}

.about-intro {
  align-self: start;
  position: sticky;
  top: 88px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 2px solid var(--paper);
  background:
    linear-gradient(135deg, rgba(224,179,62,0.22), transparent 56%),
    rgba(6,6,4,0.72);
  overflow: hidden;
}

.about-intro h1 {
  color: var(--paper);
  font-size: clamp(2.45rem, 3.6vw, 3.8rem);
  text-shadow: 4px 4px 0 var(--red);
  text-wrap: balance;
}

.about-lede {
  padding-top: 14px;
  border-top: 8px solid var(--yellow);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.22rem, 2vw, 1.7rem) !important;
  line-height: 1.2 !important;
}

.about-poster-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.about-card {
  position: relative;
  min-height: 245px;
  padding: clamp(14px, 2vw, 20px);
  border: 2px solid var(--ink);
  background: #fff8e9;
  color: var(--ink);
  box-shadow: 8px 8px 0 rgba(241,234,216,0.84);
}
.about-card:nth-child(1) { grid-column: span 3; }
.about-card:nth-child(2) { grid-column: span 3; margin-top: 14px; }
.about-card:nth-child(3) { grid-column: span 4; }
.about-card:nth-child(4) { grid-column: span 2; margin-top: -26px; }

.about-card::before {
  position: absolute;
  top: -13px;
  right: 24px;
  width: 82px;
  height: 24px;
  border: 2px solid rgba(16,16,14,0.28);
  content: "";
  background: rgba(241,234,216,0.72);
  transform: rotate(3deg);
}

.about-card span {
  display: inline-grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  margin-bottom: 26px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-weight: 950;
}

.about-card h2 {
  margin: 0 0 12px;
  font-size: clamp(1.65rem, 3vw, 2.75rem);
}

.about-card p {
  margin: 0;
  color: rgba(16,16,14,0.76);
  line-height: 1.45;
}

.red-card { border-top: 14px solid var(--red); transform: rotate(-1deg); }
.blue-card { border-top: 14px solid var(--blue); transform: rotate(1.2deg); }
.yellow-card { border-top: 14px solid var(--yellow); transform: rotate(0.6deg); }
.green-card { border-top: 14px solid var(--green); transform: rotate(-0.8deg); }
.profile-app {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  border: 2px solid var(--ink);
  background: #fff8e9;
  box-shadow: var(--shadow);
}
.profile-progress { padding: 14px; border-right: 2px solid var(--ink); background: var(--paper-deep); }
.progress-meter span { display: block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.progress-meter div { height: 11px; border: 2px solid var(--ink); background: var(--paper); }
.progress-meter b { display: block; height: 100%; width: 12%; background: var(--green); transition: width 160ms ease; }
.profile-progress ol { display: grid; gap: 6px; padding: 16px 0 0; margin: 0; list-style: none; }
.profile-progress li { padding: 8px; border: 2px solid transparent; font-size: 0.86rem; color: var(--muted); }
.profile-progress li.is-active { border-color: var(--ink); background: var(--yellow); color: var(--ink); font-weight: 900; }
.profile-progress li.is-complete { color: var(--ink); }
.profile-form { min-width: 0; padding: clamp(16px, 3vw, 28px); }
.step-panel[hidden] { display: none; }
.step-title { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 6px solid var(--ink); padding-bottom: 10px; }
.step-title h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 3.3rem); line-height: 1; }
.step-title span { font-weight: 900; color: var(--red); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
label { display: grid; gap: 6px; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.optional { color: var(--blue); font-weight: 900; text-transform: uppercase; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px;
  background: #fffdfa;
  color: var(--ink);
}
.check { display: flex; align-items: start; gap: 9px; text-transform: none; font-weight: 750; line-height: 1.35; }
.check input { width: 18px; min-height: 18px; margin-top: 2px; }
.consent { margin-top: 12px; }
.choice-grid, .tag-cloud, .tag-shortcuts, .selected-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-grid { margin-bottom: 16px; }
.tag-shortcuts { margin: 12px 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.tag-group { margin: 0 0 10px; border: 2px solid var(--ink); background: rgba(241,234,216,0.55); }
.tag-group summary { padding: 12px; cursor: pointer; font-weight: 900; text-transform: uppercase; }
.tag-cloud { padding: 0 12px 12px; }
.tag-button {
  min-height: 34px;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
}
.tag-button.is-selected { background: var(--blue); color: white; }
.selected-tags { min-height: 34px; margin: 12px 0; }
.selected-tags span, .selected-tags em { padding: 6px 8px; border: 2px solid var(--ink); background: var(--green); color: white; font-size: 0.82rem; font-style: normal; }
.selected-tags em { background: var(--paper-deep); color: var(--muted); }
.form-note { padding: 12px; border-left: 12px solid var(--yellow); background: rgba(241,234,216,0.72); color: var(--muted); line-height: 1.45; }
.summary-box { display: grid; gap: 10px; padding: 14px; border: 2px solid var(--ink); background: #fffdfa; }
.summary-box button { justify-self: start; }
.error { color: var(--red); font-weight: 900; }
.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

.category-band { background: var(--paper-deep); }
.category-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.category-index article {
  min-height: 210px;
  padding: 14px;
  border: 2px solid var(--ink);
  background: #fff8e9;
}
.category-index span { display: block; margin-bottom: 28px; color: var(--red); font-weight: 900; }
.category-index strong { display: block; font-family: Georgia, serif; font-size: 1.8rem; line-height: 1; }
.category-index p { color: var(--muted); line-height: 1.45; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px clamp(14px, 4vw, 42px);
  background: var(--black);
  color: var(--paper);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  font-weight: 900;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* Cleaner production pass: keep the archive-shop character, reduce visual noise. */
body {
  background:
    linear-gradient(90deg, rgba(16, 16, 14, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #f8f2e5 0%, #efe5d0 52%, #e7dcc6 100%);
  background-size: 48px 48px, auto;
}

body::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(16,16,14,0.025) 23px 24px),
    linear-gradient(90deg, rgba(255,255,255,0.34), transparent 18% 82%, rgba(16,16,14,0.05));
  opacity: 0.56;
}

.site-header {
  min-height: 64px;
  border-bottom-width: 1px;
  background: rgba(248, 242, 229, 0.96);
}

.brand-lockup,
.scene-object,
.page-card,
.shop-column,
.shop-entry,
.poster-stand-photo,
.poster-stand-copy,
.sell-panel,
.profile-app,
.tag-group,
.tag-button,
input,
select,
textarea,
.summary-box,
.form-note,
.toast {
  border-radius: 4px;
}

.portal-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(217,207,185,0.2)),
    transparent;
}

.portal-scene {
  min-height: max(690px, calc(100svh - 100px));
  box-shadow: 10px 10px 0 rgba(224, 179, 62, 0.66), 17px 17px 0 rgba(0, 0, 0, 0.82);
  background:
    repeating-linear-gradient(90deg, rgba(16,16,14,0.025) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(16,16,14,0.02) 0 1px, transparent 1px 38px),
    linear-gradient(180deg, #fbf4e4 0%, #f0e6d1 58%, #e6dcc5 100%);
}

.portal-scene::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.36), transparent 34%),
    repeating-linear-gradient(-8deg, transparent 0 42px, rgba(16,16,14,0.022) 42px 43px);
  opacity: 0.72;
}

.portal-sign {
  box-shadow: 8px 8px 0 rgba(16,16,14,0.88);
}

.scene-object {
  box-shadow: 6px 6px 0 rgba(16,16,14,0.88);
}

.shop-window,
.poster-kiosk {
  min-height: 238px;
}

.profile-clipboard {
  top: 41%;
  width: min(326px, 27%);
}

.section-band {
  padding-top: clamp(34px, 5vw, 64px);
  padding-bottom: clamp(38px, 5.5vw, 72px);
}

.page-card {
  box-shadow: 6px 6px 0 rgba(16, 16, 14, 0.86);
}

.directory-intro h1,
.section-heading h1 {
  font-size: clamp(2.25rem, 5.4vw, 5.2rem);
}

.section-heading.split {
  align-items: center;
}

.section-heading p:not(.eyebrow),
.directory-intro p,
.poster-stand-copy p:not(.eyebrow),
.shop-entry p,
.submit-contact span {
  color: #4f4a40;
}

.shop-column,
.socials-board,
.embed-panel,
.sell-panel,
.profile-app {
  box-shadow: 7px 7px 0 rgba(16, 16, 14, 0.82);
}

.shop-entry {
  min-height: 218px;
  padding: 16px;
}

.shop-entry strong {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
}

.profile-app {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  background: #fffdf8;
}

.profile-progress {
  background:
    linear-gradient(180deg, rgba(224,179,62,0.24), transparent 42%),
    #ded3bc;
}

.profile-progress li {
  border-radius: 4px;
  line-height: 1.2;
}

.profile-form {
  padding: clamp(18px, 3vw, 34px);
}

.step-title {
  align-items: center;
  border-bottom-width: 3px;
}

.step-title h3 {
  font-size: clamp(1.65rem, 3.2vw, 2.8rem);
}

label {
  color: #22201c;
}

input:focus,
select:focus,
textarea:focus,
.tag-button:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.choice-grid,
.tag-cloud,
.tag-shortcuts,
.selected-tags {
  gap: 9px;
}

.tag-button,
.static-tags span,
.selected-tags span,
.selected-tags em {
  border-width: 1px;
  font-weight: 800;
}

.tag-button:hover {
  background: #fffdfa;
  box-shadow: inset 0 0 0 2px rgba(16,16,14,0.1);
}

.tag-button.is-selected {
  background: var(--black);
  color: var(--paper);
}

.summary-box {
  gap: 12px;
  padding: clamp(16px, 2.5vw, 22px);
  border-left: 12px solid var(--green);
}

.button {
  border-radius: 4px;
  box-shadow: 4px 4px 0 currentColor;
}

.button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.form-actions {
  align-items: center;
}

.form-actions .button {
  min-width: 132px;
}

/* Front-page continuity pass. */
.logo-sign {
  box-shadow: 9px 9px 0 rgba(16,16,14,0.86);
}

.shop-window {
  padding: 18px;
  border-top-width: 10px;
  border-top-color: var(--blue);
}

.shop-window .window-row {
  margin: 4px 0 16px;
  padding: 8px;
  border: 2px solid var(--ink);
  background: rgba(255, 253, 248, 0.76);
}

.shop-window .mini-logo {
  min-height: 96px;
  border-width: 2px;
  background:
    linear-gradient(180deg, #fffdf8, #efe6d2);
}

.shop-window b {
  padding-top: 6px;
  border-top: 3px solid var(--ink);
}

.poster-kiosk {
  border-top-width: 10px;
  border-top-color: var(--red);
  background:
    linear-gradient(180deg, rgba(179,29,25,0.92) 0 44px, transparent 44px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(17,85,166,0.16) 22px 24px),
    #fff8e9;
}

.poster-kiosk strong {
  margin-top: 54px;
  text-shadow: 2px 0 0 rgba(179,29,25,0.18);
}

.profile-clipboard {
  border-top: 10px solid var(--yellow);
}

.social-tv {
  border-top: 10px solid var(--blue);
  top: 18%;
}

.sell-ticket {
  border-top: 10px solid var(--green);
  top: 21%;
}

.sell-ticket .object-label,
.profile-clipboard .object-label {
  color: var(--ink);
}

.sell-ticket .object-label {
  color: var(--paper);
}

.tone-black {
  --accent: #c13584;
  border-top-color: #c13584;
}

.youtube-panel .embed-panel-head .eyebrow,
.youtube-panel .media-mark,
.youtube-panel .button:hover,
.youtube-panel .button:focus-visible {
  color: var(--blue);
}

@media (max-width: 1100px) {
  .hero, .section-heading.split, .note-band, .about-band, .profile-app, .sell-layout, .seo-band { grid-template-columns: 1fr; }
  .poster-stand-feature { grid-template-columns: minmax(240px, 0.45fr) minmax(0, 1fr); }
  .hero-media { border-right: 0; border-bottom: 2px solid var(--paper); }
  .shop-board, .socials-board, .category-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .socials-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-columns { grid-template-columns: 1fr; }
  .physical-board { grid-template-columns: 1fr; }
  .portal-scene { min-height: 860px; }
  .shop-window { left: 4%; width: 54%; }
  .profile-clipboard { left: 36%; width: 34%; }
  .poster-kiosk { right: 5%; width: 34%; }
  .social-tv { right: 4%; top: 24%; width: 28%; }
  .sell-ticket { left: 4%; top: 27%; width: 30%; }
  .profile-progress { border-right: 0; border-bottom: 2px solid var(--ink); }
  .profile-progress ol { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .social-embeds { grid-template-columns: 1fr; }
  .youtube-panel { grid-row: auto; }
}

@media (max-width: 660px) {
  .site-header { align-items: start; flex-direction: column; }
  .nav-dropdown {
    left: 0;
    transform: translate(0, -4px);
  }
  .nav-menu:hover .nav-dropdown,
  .nav-menu:focus-within .nav-dropdown {
    transform: translate(0, 0);
  }
  main, .hero, .hero-copy, .hero-media { max-width: 100vw; }
  .hero { min-height: auto; }
  .hero.portal-hero { padding: 10px; }
  .portal-scene {
    display: grid;
    gap: 12px;
    min-height: 0;
    padding: 16px 10px;
    box-shadow: 7px 7px 0 rgba(224,179,62,0.95), 12px 12px 0 rgba(0,0,0,0.8);
  }
  .sky-strip,
  .portal-sign,
  .scene-object,
  .desk-line {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 0;
    transform: none;
  }
  .portal-sign {
    padding: 12px 8px;
    box-shadow: 5px 5px 0 rgba(16,16,14,0.86);
    overflow: hidden;
  }
  .logo-sign { width: auto; }
  .rgb-wordmark {
    font-size: clamp(2.45rem, 10.2vw, 4rem);
    transform: skew(-7deg) scaleX(0.78);
    transform-origin: center;
    text-shadow:
      -0.05em -0.032em 0 var(--blue),
      0.048em 0.026em 0 var(--red),
      -0.018em 0.054em 0 var(--green);
  }
  .logo-sign::before,
  .logo-sign::after { display: none; }
  .portal-sign.wordmark { font-size: clamp(2.3rem, 15vw, 4.5rem); }
  .shop-window,
  .poster-kiosk,
  .profile-clipboard,
  .social-tv,
  .sell-ticket {
    max-width: 100%;
    width: auto;
    padding: 14px;
  }
  .sell-ticket { order: 2; }
  .social-tv { order: 3; }
  .shop-window { order: 4; }
  .poster-kiosk { order: 5; }
  .profile-clipboard { order: 6; }
  .poster-stand-feature {
    grid-template-columns: 1fr;
  }
  .poster-stand-photo {
    padding: 10px 10px 42px;
    transform: none;
  }
  .poster-stand-photo img {
    height: min(82svh, 680px);
    object-position: center center;
  }
  .poster-stand-copy {
    padding: 16px;
  }
  .poster-stock-list li {
    padding-left: 42px;
  }
  .profile-clipboard { padding-top: 34px; }
  .poster-kiosk strong { margin-top: 10px; }
  .window-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-window .window-row {
    width: 100%;
    padding: 8px;
  }
  .shop-window .mini-logo {
    width: 100%;
    min-height: 78px;
    aspect-ratio: auto;
  }
  .sticker { display: inline-flex; width: max-content; }
  .desk-line { display: none; }
  .hero-copy { order: -1; }
  .hero-copy { overflow: hidden; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; box-shadow: 4px 4px 0 currentColor; }
  .hero-media { min-height: 360px; }
  .wordmark { font-size: clamp(2.75rem, 15vw, 4.6rem); max-width: 100%; overflow: hidden; }
  .wordmark span { transform: skew(-8deg) scaleX(0.76); }
  .wordmark span:first-child { transform: translate(-5px, -3px) skew(-8deg) scaleX(0.76); }
  .wordmark span:nth-child(2) { transform: translate(5px, 3px) skew(-8deg) scaleX(0.76); }
  .hero-lede { font-size: clamp(2.4rem, 14vw, 4.6rem); }
  .hero-copyline { max-width: calc(100vw - 52px); }
  .shop-board, .social-embeds, .form-grid, .category-index, .profile-progress ol { grid-template-columns: 1fr; }
  .socials-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .embed-panel { padding: 12px; box-shadow: 5px 5px 0 rgba(16,16,14,0.82); }
  .embed-panel-head { display: grid; align-items: start; }
  .media-fallback,
  .youtube-fallback { min-height: 220px; }
  .commission-table { font-size: 0.72rem; }
  .commission-table span { padding: 8px 6px; }
  .shop-entry { min-height: 210px; }
  .tape { font-size: 0.72rem; }
  .site-header {
    gap: 10px;
  }
  .nav-links {
    width: 100%;
    justify-content: flex-start;
    gap: 9px 12px;
  }
  .section-heading.split {
    gap: 12px;
  }
  .profile-form {
    padding: 16px;
  }
  .profile-progress ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    padding-bottom: 3px;
  }
  .profile-progress li {
    flex: 1 1 112px;
    min-width: 0;
  }
  .form-actions {
    margin: 18px 0 0;
    padding: 0;
    border-top: 2px solid var(--ink);
    padding-top: 12px;
    background: transparent;
  }
  .form-actions .button {
    flex: 1;
  }
  .profile-app,
  .profile-progress,
  .profile-form,
  .step-panel {
    min-width: 0;
    max-width: 100%;
  }
  .profile-app {
    overflow: hidden;
  }
}

/* Deep site pass: preserve the collage concept, but make the layout deliberate. */
.hero.portal-hero {
  min-height: calc(100svh - 64px);
  padding: clamp(8px, 1.2vw, 14px);
}

.portal-scene {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows:
    minmax(108px, 0.62fr)
    minmax(148px, 0.8fr)
    minmax(188px, 1fr);
  gap: clamp(14px, 1.5vw, 20px);
  align-items: stretch;
  height: min(670px, calc(100svh - 92px));
  min-height: 560px;
  padding: clamp(14px, 1.45vw, 22px) clamp(16px, 1.8vw, 26px);
}

.portal-scene > .portal-sign,
.portal-scene > .scene-object,
.portal-scene > .desk-line {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 0;
}

.logo-sign {
  grid-column: 4 / 10;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  min-width: 0;
  aspect-ratio: 3.82 / 1;
  min-height: 0;
  padding: clamp(10px, 1.45vw, 18px);
  transform: rotate(-1deg);
}

.logo-sign img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

a.logo-sign:hover,
a.logo-sign:focus-visible {
  transform: rotate(-1deg) translate(-1px, -1px);
}

.sell-ticket {
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  align-self: stretch;
  min-height: 0;
  transform: rotate(0.8deg);
}

.social-tv {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
  align-self: stretch;
  min-height: 0;
  transform: rotate(-1.4deg);
}

.profile-clipboard {
  grid-column: 5 / 9;
  grid-row: 2 / 3;
  align-self: stretch;
  min-height: 0;
  transform: rotate(-0.8deg);
}

.shop-window {
  grid-column: 1 / 7;
  grid-row: 3 / 4;
  align-self: stretch;
  min-height: 0;
  transform: rotate(-0.8deg);
}

.poster-kiosk {
  grid-column: 8 / 13;
  grid-row: 3 / 4;
  align-self: stretch;
  min-height: 0;
  transform: rotate(0.9deg);
}

.desk-line {
  grid-column: 1 / -1;
  grid-row: 3 / 4;
  align-self: end;
  z-index: 0;
  height: 14px;
}

.scene-object {
  z-index: 2;
}

.profile-clipboard {
  z-index: 3;
}

.logo-sign {
  z-index: 4;
}

.shop-window,
.poster-kiosk,
.profile-clipboard,
.sell-ticket,
.social-tv {
  box-shadow: 6px 6px 0 rgba(16,16,14,0.86);
}

.portal-scene a.scene-object:hover,
.portal-scene a.scene-object:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 5px 5px 0 rgba(16,16,14,0.9), 11px 11px 0 var(--accent);
}

.shop-window {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(8px, 1vw, 12px);
  padding: clamp(12px, 1.35vw, 16px);
  background:
    linear-gradient(180deg, rgba(17,85,166,0.96) 0 42px, transparent 42px),
    linear-gradient(90deg, rgba(16,16,14,0.04) 1px, transparent 1px),
    #fff8e9;
  background-size: auto, 30px 30px, auto;
}

.shop-window .window-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
  margin: 0;
  padding: clamp(8px, 1vw, 10px);
  border: 2px solid var(--ink);
  background: rgba(255,253,248,0.9);
}

.shop-window .mini-logo {
  width: 100%;
  height: clamp(52px, 5.1vw, 68px);
  min-height: 0;
  aspect-ratio: auto;
  padding: clamp(5px, 0.75vw, 8px);
  background: linear-gradient(180deg, #fffdf8, #efe6d2);
}

.shop-window b,
.poster-kiosk strong {
  text-wrap: balance;
}

.shop-window b {
  align-self: end;
  padding-top: 8px;
  border-top: 3px solid var(--ink);
  font-size: clamp(1.65rem, 2.95vw, 3.05rem);
}

.poster-kiosk {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(48px, 4.8vw, 58px) clamp(15px, 1.55vw, 20px) clamp(14px, 1.5vw, 18px);
  background:
    linear-gradient(180deg, rgba(179,29,25,0.96) 0 44px, transparent 44px),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(17,85,166,0.16) 24px 26px),
    #fff8e9;
}

.poster-kiosk strong {
  margin-top: 0;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 0.9;
}

.poster-kiosk small {
  max-width: 22ch;
}

.social-tv {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
}

.social-tv .mini-logo {
  width: clamp(38px, 4vw, 52px);
}

.social-caption {
  align-self: end;
  padding: 8px 10px 6px;
  font-size: clamp(1.1rem, 1.75vw, 1.6rem);
}

.sell-ticket,
.profile-clipboard {
  gap: 8px;
  padding: 12px;
}

.sell-ticket strong,
.profile-clipboard strong {
  text-wrap: balance;
}

.sell-ticket strong {
  font-size: clamp(1.12rem, 1.85vw, 1.72rem);
}

.profile-clipboard {
  padding-top: 30px;
}

.profile-clipboard strong {
  font-size: clamp(1.1rem, 1.75vw, 1.55rem);
}

.profile-clipboard small,
.sell-ticket small,
.shop-window small,
.poster-kiosk small {
  font-size: clamp(0.68rem, 0.9vw, 0.84rem);
}

.polaroid-photo {
  min-height: clamp(90px, 10vw, 118px);
  padding: 10px;
}

.object-label {
  border-radius: 3px;
}

.socials-band .section-heading {
  margin-bottom: 16px;
}

.socials-board {
  display: inline-grid;
  grid-template-columns: repeat(3, 48px);
  gap: 9px;
  max-width: none;
  border: 0;
  box-shadow: none;
}

.socials-board .shop-entry {
  display: grid;
  width: 48px;
  min-height: 0;
  aspect-ratio: 1;
  padding: 5px;
  border: 2px solid var(--ink);
  background: #fffdf8;
  box-shadow: 4px 4px 0 rgba(16,16,14,0.82);
}

.socials-board .shop-entry:hover,
.socials-board .shop-entry:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  background: #fffdf8;
  box-shadow: 3px 3px 0 rgba(16,16,14,0.86), 6px 6px 0 var(--accent);
}

.socials-board .shop-mark {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 5px;
  border: 0;
  background: transparent;
}

.socials-board .status-label,
.socials-board .shop-entry strong,
.socials-board .shop-entry p,
.socials-board .shop-entry b {
  display: none;
}

.social-embeds {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: 22px;
}

.instagram-panel { order: 1; }
.tiktok-panel { order: 2; }
.youtube-panel { order: 3; grid-row: auto; }

.embed-panel {
  gap: 12px;
}

.instagram-panel .media-fallback,
.tiktok-panel .media-fallback,
.youtube-panel .media-fallback {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  padding: 12px;
}

.instagram-panel .media-fallback strong,
.tiktok-panel .media-fallback strong,
.youtube-panel .media-fallback strong {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.instagram-panel .media-fallback p,
.tiktok-panel .media-fallback p,
.youtube-panel .media-fallback p {
  grid-column: 2;
  font-size: 0.92rem;
}

.media-mark {
  width: 52px;
}

.youtube-fallback {
  align-content: start;
  justify-items: stretch;
  background:
    linear-gradient(90deg, rgba(17,85,166,0.12), transparent 48%),
    #fffdf8;
}

.native-embed {
  padding: 8px;
}

@media (max-width: 1100px) {
  .portal-scene {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows:
      minmax(110px, auto)
      minmax(124px, auto)
      minmax(138px, auto)
      minmax(190px, auto);
    height: auto;
    min-height: 690px;
  }

  .logo-sign { grid-column: 2 / 8; grid-row: 1 / 2; width: 100%; max-width: 660px; }
  .sell-ticket { grid-column: 1 / 4; grid-row: 2 / 3; }
  .social-tv { grid-column: 6 / 9; grid-row: 2 / 4; }
  .profile-clipboard { grid-column: 3 / 7; grid-row: 3 / 4; }
  .shop-window { grid-column: 1 / 5; grid-row: 4 / 5; }
  .poster-kiosk { grid-column: 5 / 9; grid-row: 4 / 5; }
  .desk-line { grid-row: 4 / 5; }
}

@media (max-width: 760px) {
  .portal-scene {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    min-height: 0;
    padding: 14px 10px;
  }

  .portal-scene > .portal-sign,
  .portal-scene > .scene-object,
  .portal-scene > .desk-line {
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }

  .logo-sign {
    order: 1;
    width: auto;
    aspect-ratio: 3.82 / 1;
  }

  a.logo-sign:hover,
  a.logo-sign:focus-visible {
    transform: translate(-1px, -1px);
  }

  .sell-ticket { order: 2; }
  .social-tv { order: 3; }
  .shop-window { order: 4; }
  .poster-kiosk { order: 5; }
  .profile-clipboard { order: 6; }

  .shop-window .window-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-window .mini-logo {
    min-height: 72px;
  }

  .socials-board {
    grid-template-columns: repeat(3, 44px);
  }

  .socials-board .shop-entry {
    width: 44px;
  }

  .social-embeds {
    grid-template-columns: 1fr;
  }
}

/* No-overlap home pass: every card owns a grid area at every viewport. */
body[data-page="home"] {
  overflow-y: hidden;
}

body[data-page="home"] .site-footer {
  display: none;
}

body[data-page="home"] .home-view,
body[data-page="home"] .hero.portal-hero {
  height: calc(100svh - var(--header-height, 64px));
  min-height: 0;
}

body[data-page="home"] .hero.portal-hero {
  overflow: hidden;
  padding: clamp(7px, 1vw, 12px);
}

body[data-page="home"] .portal-scene {
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(82px, 0.6fr) minmax(128px, 0.9fr) minmax(172px, 1fr);
  gap: clamp(12px, 1.35vw, 18px);
  padding: clamp(13px, 1.4vw, 20px);
}

body[data-page="home"] .logo-sign {
  grid-column: 4 / 10;
  grid-row: 1;
  max-width: 440px;
}

body[data-page="home"] .sell-ticket {
  grid-column: 1 / 4;
  grid-row: 2;
}

body[data-page="home"] .profile-clipboard {
  grid-column: 5 / 9;
  grid-row: 2;
}

body[data-page="home"] .social-tv {
  grid-column: 10 / 13;
  grid-row: 2;
}

body[data-page="home"] .shop-window {
  grid-column: 1 / 7;
  grid-row: 3;
}

body[data-page="home"] .poster-kiosk {
  grid-column: 8 / 13;
  grid-row: 3;
}

body[data-page="home"] .desk-line {
  grid-column: 1 / -1;
  grid-row: 3;
}

body[data-page="home"] .shop-window,
body[data-page="home"] .poster-kiosk,
body[data-page="home"] .profile-clipboard,
body[data-page="home"] .sell-ticket,
body[data-page="home"] .social-tv {
  overflow: hidden;
}

@media (max-width: 1100px) and (min-width: 761px) {
  body[data-page="home"] .portal-scene {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: minmax(76px, 0.55fr) minmax(128px, 0.85fr) minmax(152px, 1fr) minmax(152px, 1fr);
    gap: 12px;
    padding: 13px;
  }

  body[data-page="home"] .logo-sign {
    grid-column: 3 / 7;
    grid-row: 1;
    max-width: 390px;
  }

  body[data-page="home"] .sell-ticket {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  body[data-page="home"] .profile-clipboard {
    grid-column: 4 / 6;
    grid-row: 2;
  }

  body[data-page="home"] .social-tv {
    grid-column: 6 / 9;
    grid-row: 2;
  }

  body[data-page="home"] .shop-window {
    grid-column: 1 / 5;
    grid-row: 3 / 5;
  }

  body[data-page="home"] .poster-kiosk {
    grid-column: 5 / 9;
    grid-row: 3 / 5;
  }

  body[data-page="home"] .desk-line {
    grid-row: 4;
  }

  body[data-page="home"] .logo-sign {
    padding: 8px 14px;
  }

  body[data-page="home"] .shop-window .window-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="home"] .shop-window .mini-logo {
    height: clamp(48px, 7vw, 64px);
  }

  body[data-page="home"] .shop-window b {
    font-size: clamp(1.8rem, 3.4vw, 2.45rem);
  }

  body[data-page="home"] .poster-kiosk strong {
    font-size: clamp(2rem, 3.8vw, 3rem);
  }

  body[data-page="home"] .profile-clipboard {
    padding-top: 26px;
  }

  body[data-page="home"] .profile-clipboard .clip {
    width: 70px;
    height: 26px;
  }

  body[data-page="home"] .profile-clipboard strong,
  body[data-page="home"] .sell-ticket strong {
    font-size: clamp(1rem, 1.6vw, 1.28rem);
  }

  body[data-page="home"] .profile-clipboard small,
  body[data-page="home"] .sell-ticket small {
    font-size: 0.66rem;
  }

  body[data-page="home"] .social-tv .mini-logo {
    width: clamp(32px, 4.4vw, 44px);
  }

  body[data-page="home"] .polaroid-photo {
    min-height: 76px;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] {
    overflow-y: hidden;
  }

  body[data-page="home"] .hero.portal-hero {
    padding: 7px;
  }

  body[data-page="home"] .portal-scene {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 94px minmax(90px, 0.82fr) minmax(124px, 1.05fr) minmax(124px, 1.05fr);
    gap: 8px;
    padding: 8px;
    box-shadow: 5px 5px 0 rgba(224,179,62,0.95), 9px 9px 0 rgba(0,0,0,0.8);
  }

  body[data-page="home"] .portal-scene > .portal-sign,
  body[data-page="home"] .portal-scene > .scene-object,
  body[data-page="home"] .portal-scene > .desk-line {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    min-height: 0;
  }

  body[data-page="home"] .logo-sign {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: none;
    height: 100%;
    padding: 6px 10px;
    aspect-ratio: auto;
  }

  body[data-page="home"] .sell-ticket {
    grid-column: 1;
    grid-row: 2;
  }

  body[data-page="home"] .social-tv {
    grid-column: 2;
    grid-row: 2;
  }

  body[data-page="home"] .shop-window {
    grid-column: 1;
    grid-row: 3 / 5;
  }

  body[data-page="home"] .poster-kiosk {
    grid-column: 2;
    grid-row: 3;
  }

  body[data-page="home"] .profile-clipboard {
    grid-column: 2;
    grid-row: 4;
  }

  body[data-page="home"] .desk-line {
    display: none;
  }

  body[data-page="home"] .shop-window,
  body[data-page="home"] .poster-kiosk,
  body[data-page="home"] .profile-clipboard,
  body[data-page="home"] .sell-ticket,
  body[data-page="home"] .social-tv {
    padding: 9px;
    box-shadow: 4px 4px 0 rgba(16,16,14,0.86);
  }

  body[data-page="home"] .object-label {
    padding: 3px 5px;
    font-size: 0.58rem;
  }

  body[data-page="home"] .scene-object::before,
  body[data-page="home"] .logo-sign::after {
    display: none;
  }

  body[data-page="home"] .sell-ticket strong,
  body[data-page="home"] .profile-clipboard strong {
    font-size: clamp(0.9rem, 4vw, 1.08rem);
  }

  body[data-page="home"] .sell-ticket small,
  body[data-page="home"] .profile-clipboard small,
  body[data-page="home"] .shop-window small,
  body[data-page="home"] .poster-kiosk small {
    font-size: 0.57rem;
    line-height: 1.15;
  }

  body[data-page="home"] .profile-clipboard {
    padding-top: 20px;
  }

  body[data-page="home"] .profile-clipboard .clip {
    top: -10px;
    width: 54px;
    height: 20px;
  }

  body[data-page="home"] .shop-window {
    align-content: stretch;
    gap: 7px;
  }

  body[data-page="home"] .shop-window .window-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 6px;
  }

  body[data-page="home"] .shop-window .mini-logo {
    height: 28px;
    min-height: 0;
    padding: 3px;
  }

  body[data-page="home"] .shop-window b {
    padding-top: 5px;
    font-size: clamp(1.35rem, 7vw, 1.72rem);
  }

  body[data-page="home"] .poster-kiosk {
    padding-top: 36px;
  }

  body[data-page="home"] .poster-kiosk strong {
    font-size: clamp(1rem, 4.8vw, 1.22rem);
    line-height: 0.96;
  }

  body[data-page="home"] .social-tv {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 6px;
  }

  body[data-page="home"] .polaroid-photo {
    min-height: 0;
    padding: 7px;
  }

  body[data-page="home"] .social-tv .mini-logo {
    width: 34px;
  }

  body[data-page="home"] .social-caption {
    padding: 6px 7px 4px;
    font-size: 1rem;
  }

  body[data-page="home"] .profile-clipboard .object-label {
    padding: 3px 4px;
    font-size: 0.5rem;
  }
}

@media (max-width: 380px) {
  body[data-page="home"] .portal-scene {
    grid-template-rows: 82px minmax(80px, 0.76fr) minmax(112px, 1fr) minmax(112px, 1fr);
    gap: 7px;
    padding: 7px;
  }

  body[data-page="home"] .shop-window,
  body[data-page="home"] .poster-kiosk,
  body[data-page="home"] .profile-clipboard,
  body[data-page="home"] .sell-ticket,
  body[data-page="home"] .social-tv {
    padding: 7px;
  }

  body[data-page="home"] .poster-kiosk {
    padding-top: 32px;
  }

  body[data-page="home"] .shop-window .mini-logo {
    height: 24px;
  }
}

/* Object polish pass: make the homepage props feel like real taped paper. */
body[data-page="home"] .scene-object,
body[data-page="home"] .logo-sign {
  overflow: visible;
}

body[data-page="home"] .scene-object::before,
body[data-page="home"] .logo-sign::after {
  top: -16px;
  z-index: 6;
  width: clamp(86px, 8.4vw, 132px);
  height: clamp(22px, 2vw, 29px);
  border: 0;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(255,255,255,0.2) 8% 13%, transparent 15% 100%),
    repeating-linear-gradient(96deg, rgba(16,16,14,0.11) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(241,234,216,0.88), rgba(204,191,157,0.72));
  box-shadow:
    0 2px 2px rgba(16,16,14,0.24),
    inset 0 1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(16,16,14,0.12);
  clip-path: polygon(0 18%, 8% 0, 21% 12%, 36% 2%, 51% 13%, 69% 3%, 86% 11%, 100% 0, 96% 82%, 88% 100%, 71% 87%, 54% 100%, 38% 89%, 22% 100%, 6% 86%);
  mix-blend-mode: multiply;
  opacity: 0.88;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.24));
}

body[data-page="home"] .shop-window::before { left: 48%; transform: translateX(-50%) rotate(0.8deg); }
body[data-page="home"] .poster-kiosk::before { left: 55%; transform: translateX(-50%) rotate(-1.2deg); }
body[data-page="home"] .sell-ticket::before { left: 43%; transform: translateX(-50%) rotate(-2.4deg); }
body[data-page="home"] .profile-clipboard::before { left: 50%; transform: translateX(-50%) rotate(1.2deg); }
body[data-page="home"] .social-tv::before { left: 55%; transform: translateX(-50%) rotate(2.2deg); }

body[data-page="home"] .logo-sign {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(7px 7px 0 rgba(16,16,14,0.86));
  clip-path: none;
}

body[data-page="home"] .logo-sign::before {
  position: absolute;
  inset: 7px -7px -7px 9px;
  z-index: -1;
  content: "";
  background: rgba(6,6,4,0.92);
  clip-path: polygon(0 5%, 12% 1%, 27% 4%, 42% 2%, 58% 5%, 73% 2%, 88% 4%, 100% 1%, 99% 95%, 84% 98%, 66% 96%, 50% 100%, 33% 96%, 15% 99%, 1% 96%);
}

body[data-page="home"] .logo-sign::after {
  left: 50%;
  top: -12px;
  width: clamp(104px, 10vw, 150px);
  height: clamp(24px, 2.2vw, 31px);
  transform: translateX(-50%) rotate(-1.3deg);
}

body[data-page="home"] .logo-sign img {
  width: 100%;
  height: 100%;
  padding: clamp(10px, 1.35vw, 16px);
  border: 3px solid var(--ink);
  background: #000;
  clip-path: polygon(0 5%, 12% 1%, 27% 4%, 42% 2%, 58% 5%, 73% 2%, 88% 4%, 100% 1%, 99% 95%, 84% 98%, 66% 96%, 50% 100%, 33% 96%, 15% 99%, 1% 96%);
}

body[data-page="home"] a.logo-sign:hover,
body[data-page="home"] a.logo-sign:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px var(--blue),
    0 0 0 9px var(--red),
    0 0 0 14px var(--yellow),
    0 0 0 19px var(--green);
  filter: drop-shadow(7px 7px 0 rgba(16,16,14,0.86));
}

body[data-page="home"] .shop-window {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(16,16,14,0.04) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(17,85,166,0.14) 26px 28px),
    #fff8e9;
  background-size: 30px 30px, auto, auto;
}

body[data-page="home"] .shop-window b {
  order: -2;
  display: flex;
  min-height: clamp(42px, 5.4vw, 58px);
  margin: 0;
  padding: clamp(8px, 1vw, 12px) clamp(14px, 1.5vw, 20px) clamp(6px, 0.8vw, 10px);
  align-items: center;
  border-top: 0;
  border-bottom: 3px solid var(--ink);
  background: var(--blue);
  color: var(--paper);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.15rem, 3.75vw, 4rem);
  font-style: italic;
  line-height: 0.82;
  text-shadow: 2px 2px 0 rgba(16,16,14,0.5);
}

body[data-page="home"] .shop-window .window-row {
  min-height: clamp(70px, 9vw, 96px);
  margin: clamp(10px, 1.1vw, 14px) clamp(12px, 1.25vw, 16px) clamp(6px, 0.8vw, 10px);
  padding: clamp(7px, 0.8vw, 10px);
  align-items: stretch;
  background: rgba(255,253,248,0.82);
}

body[data-page="home"] .shop-window .mini-logo {
  height: auto;
  min-height: clamp(50px, 6.5vw, 74px);
  padding: clamp(4px, 0.5vw, 6px);
}

body[data-page="home"] .shop-window small {
  display: block;
  margin: 0 clamp(14px, 1.35vw, 18px) clamp(12px, 1vw, 15px);
  font-size: clamp(0.76rem, 1.1vw, 0.98rem);
  line-height: 1.1;
}

body[data-page="home"] .shop-window .ebay-word {
  font-size: clamp(1.1rem, 2.25vw, 1.85rem);
}

body[data-page="home"] .shop-window .logo-depop .word-logo {
  font-size: clamp(1.05rem, 1.9vw, 1.62rem);
}

body[data-page="home"] .shop-window .logo-whatnot .word-logo {
  font-size: clamp(0.82rem, 1.45vw, 1.2rem);
  transform: rotate(-6deg) scale(1.18);
}

body[data-page="home"] .shop-window .logo-mercari .word-logo {
  color: var(--blue);
  font-size: clamp(0.78rem, 1.35vw, 1.12rem);
}

body[data-page="home"] .poster-kiosk {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(17,85,166,0.16) 25px 27px),
    #fff8e9;
}

body[data-page="home"] .poster-kiosk strong {
  display: flex;
  min-height: clamp(48px, 5.6vw, 66px);
  margin: 0;
  padding: clamp(8px, 1vw, 12px) clamp(14px, 1.45vw, 20px) clamp(6px, 0.8vw, 10px);
  align-items: center;
  border-bottom: 3px solid var(--ink);
  background: var(--red);
  color: var(--paper);
  font-size: clamp(2rem, 3.6vw, 3.8rem);
  font-style: italic;
  text-shadow: 2px 2px 0 rgba(16,16,14,0.5);
}

body[data-page="home"] .poster-kiosk small {
  display: block;
  max-width: none;
  padding: clamp(12px, 1.45vw, 18px) clamp(14px, 1.5vw, 20px);
  font-size: clamp(0.86rem, 1.28vw, 1.08rem);
  line-height: 1.12;
}

body[data-page="home"] .sell-ticket,
body[data-page="home"] .profile-clipboard {
  align-content: center;
  gap: clamp(9px, 1vw, 13px);
  padding: clamp(14px, 1.45vw, 19px);
}

body[data-page="home"] .profile-clipboard {
  padding-top: clamp(34px, 3.2vw, 42px);
}

body[data-page="home"] .sell-ticket .object-label,
body[data-page="home"] .profile-clipboard .object-label {
  min-width: min(158px, 82%);
  padding: clamp(7px, 0.8vw, 9px) clamp(8px, 1vw, 12px);
  text-align: center;
  font-size: clamp(0.76rem, 1vw, 0.98rem);
  line-height: 1;
}

body[data-page="home"] .sell-ticket strong,
body[data-page="home"] .profile-clipboard strong {
  font-size: clamp(1.25rem, 2vw, 2.05rem);
}

body[data-page="home"] .sell-ticket small,
body[data-page="home"] .profile-clipboard small {
  font-size: clamp(0.72rem, 1vw, 0.92rem);
}

@media (max-width: 1100px) and (min-width: 761px) {
  body[data-page="home"] .logo-sign {
    max-width: 340px;
  }

  body[data-page="home"] .shop-window .window-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  body[data-page="home"] .shop-window .mini-logo {
    min-height: clamp(48px, 7vw, 64px);
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .home-view,
  body[data-page="home"] .hero.portal-hero {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
  }

  body[data-page="home"] .portal-scene {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 170px));
    justify-content: start;
  }

  body[data-page="home"] .portal-scene > .scene-object,
  body[data-page="home"] .portal-scene > .portal-sign {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="home"] .portal-scene > .scene-object {
    overflow: hidden;
  }

  body[data-page="home"] .portal-scene > .logo-sign {
    width: min(310px, 96%);
    max-width: 310px;
    height: auto;
    align-self: center;
    justify-self: center;
    aspect-ratio: 3.82 / 1;
    filter: drop-shadow(3px 3px 0 rgba(16,16,14,0.82));
  }

  body[data-page="home"] .social-tv [data-scene-social],
  body[data-page="home"] .window-row,
  body[data-page="home"] .mini-logo {
    min-width: 0;
  }

  body[data-page="home"] .logo-sign::before {
    display: none;
  }

  body[data-page="home"] .logo-sign img {
    max-height: 76px;
    padding: 6px 9px;
    object-fit: contain;
  }

  body[data-page="home"] .scene-object::before,
  body[data-page="home"] .logo-sign::after {
    display: none;
  }

  body[data-page="home"] .shop-window b,
  body[data-page="home"] .poster-kiosk strong {
    min-height: 31px;
    padding: 6px 8px 4px;
    font-size: clamp(1rem, 5vw, 1.38rem);
    line-height: 0.9;
  }

  body[data-page="home"] .shop-window .window-row {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: 6px;
    padding: 5px;
  }

  body[data-page="home"] .shop-window .mini-logo {
    min-height: 25px;
    height: 25px;
    padding: 2px;
  }

  body[data-page="home"] .shop-window .ebay-word {
    font-size: 0.86rem;
  }

  body[data-page="home"] .shop-window .logo-depop .word-logo {
    font-size: 0.78rem;
  }

  body[data-page="home"] .shop-window .logo-whatnot .word-logo,
  body[data-page="home"] .shop-window .logo-mercari .word-logo {
    font-size: 0.56rem;
  }

  body[data-page="home"] .shop-window small,
  body[data-page="home"] .poster-kiosk small {
    margin: 0 7px 7px;
    padding: 0;
    font-size: 0.54rem;
    line-height: 1.08;
  }

  body[data-page="home"] .poster-kiosk small {
    padding: 7px;
  }

  body[data-page="home"] .sell-ticket,
  body[data-page="home"] .profile-clipboard {
    gap: 5px;
    padding: 8px;
  }

  body[data-page="home"] .profile-clipboard {
    padding-top: 19px;
  }

  body[data-page="home"] .sell-ticket .object-label,
  body[data-page="home"] .profile-clipboard .object-label {
    min-width: 0;
    padding: 3px 5px;
    font-size: 0.55rem;
  }

  body[data-page="home"] .sell-ticket strong,
  body[data-page="home"] .profile-clipboard strong {
    font-size: clamp(0.88rem, 4vw, 1.07rem);
  }
}

@media (max-width: 380px) {
  body[data-page="home"] .portal-scene {
    grid-template-columns: repeat(2, minmax(0, 143px));
  }

  body[data-page="home"] .portal-scene > .logo-sign {
    width: min(260px, 96%);
  }

  body[data-page="home"] .logo-sign img {
    max-height: 64px;
  }

  body[data-page="home"] .shop-window b,
  body[data-page="home"] .poster-kiosk strong {
    min-height: 28px;
    padding: 5px 7px 3px;
    font-size: clamp(0.9rem, 4.6vw, 1.08rem);
  }

  body[data-page="home"] .shop-window .window-row {
    gap: 4px;
    margin: 5px;
    padding: 4px;
  }

  body[data-page="home"] .shop-window .mini-logo {
    height: 22px;
    min-height: 22px;
  }

  body[data-page="home"] .shop-window small,
  body[data-page="home"] .poster-kiosk small,
  body[data-page="home"] .sell-ticket small,
  body[data-page="home"] .profile-clipboard small {
    font-size: 0.47rem;
    line-height: 1.03;
  }

  body[data-page="home"] .sell-ticket strong,
  body[data-page="home"] .profile-clipboard strong {
    font-size: 0.88rem;
    line-height: 0.96;
  }

  body[data-page="home"] .sell-ticket .object-label,
  body[data-page="home"] .profile-clipboard .object-label {
    font-size: 0.48rem;
  }

  body[data-page="home"] .social-tv .mini-logo {
    width: 24px;
  }

  body[data-page="home"] .social-tv [data-scene-social] {
    gap: 6px;
  }

  body[data-page="home"] .social-caption {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ================================================================
   PRECEDENCE WINDOW SYSTEM / 2026 REDESIGN
   Progressive enhancement: CSS glass, paper, tape, masks, container
   queries, pointer-driven depth, and native View Transitions.
   ================================================================ */

@property --scene-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scene-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --lift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

:root {
  --cream: #f2ead8;
  --cream-2: #e7dcc4;
  --paper-bright: #fffdf5;
  --ink-2: #11110f;
  --cobalt: #1454ae;
  --tomato: #c3261d;
  --leaf: #177143;
  --mustard: #e7b62d;
  --steel: #938f84;
  --glass: rgba(188, 213, 217, 0.22);
  --header-height: 74px;
}

html {
  background: #11110f;
  scrollbar-gutter: stable;
}

body {
  min-width: 280px;
  background:
    radial-gradient(circle at 12% 0%, rgba(230, 182, 45, 0.11), transparent 26rem),
    linear-gradient(180deg, #eee6d4 0%, #f4eddf 40%, #e4dac6 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  min-height: var(--header-height);
  padding: 9px clamp(12px, 2vw, 30px);
  border-bottom: 1px solid rgba(17, 17, 15, 0.42);
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 10px 24px rgba(28, 24, 15, 0.08);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min-content;
  text-decoration: none;
}

.brand-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(138px, 13vw, 190px);
  aspect-ratio: 3.35 / 1;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid #050505;
  border-radius: 3px;
  background: #050505;
  box-shadow: 3px 3px 0 var(--cobalt);
  transform: rotate(-0.45deg);
}

.brand-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.16) 43%, transparent 58%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}

.brand-lockup:hover .brand-frame::after,
.brand-lockup:focus-visible .brand-frame::after {
  transform: translateX(120%);
}

.brand-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-meta {
  color: #29261f;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.brand-meta b {
  color: var(--tomato);
  font-weight: 900;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 1.45vw, 23px);
  min-width: 0;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(.69rem, .85vw, .82rem);
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  padding: 9px 0 7px;
  white-space: nowrap;
  border: 0;
  color: #181713;
  text-decoration: none;
}

.nav-links > a::after,
.nav-menu > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 3px;
  height: 3px;
  background: var(--tomato);
  transition: right .2s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.is-active::after,
.nav-menu:has(a.is-active) > a::after {
  right: 0;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  border-color: transparent;
  outline: none;
}

.nav-menu::after {
  width: 9px;
  height: 9px;
  margin-left: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav-dropdown {
  top: calc(100% + 4px);
  right: -16px;
  left: auto;
  min-width: 185px;
  padding: 7px;
  border: 1px solid #111;
  background: var(--paper-bright);
  box-shadow: 7px 7px 0 rgba(17, 17, 15, .9);
}

.nav-dropdown a {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(17,17,15,.18);
}

.page-view:not(.home-view) {
  view-transition-name: content-page;
}

::view-transition-old(content-page),
::view-transition-new(content-page) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}

::view-transition-old(content-page) {
  animation-name: precedence-page-out;
}

::view-transition-new(content-page) {
  animation-name: precedence-page-in;
}

@keyframes precedence-page-out {
  to { opacity: 0; transform: translateY(8px) scale(.992); filter: blur(2px); }
}

@keyframes precedence-page-in {
  from { opacity: 0; transform: translateY(12px) scale(.992); filter: blur(2px); }
}

/* ------------------------- Home / window ------------------------- */
body[data-page="home"] {
  background: #161610;
}

body[data-page="home"] .site-footer {
  display: none;
}

body[data-page="home"] main,
body[data-page="home"] .home-view,
body[data-page="home"] .hero.portal-hero {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - var(--header-height));
  margin: 0;
  padding: 0;
}

body[data-page="home"] .hero.portal-hero {
  display: block;
  overflow: clip;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 78px 78px,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 78px 78px,
    radial-gradient(circle at 50% -10%, #504f42 0%, #27271f 48%, #12120e 100%);
}

.window-shell {
  position: relative;
  width: min(100%, 1740px);
  min-height: calc(100svh - var(--header-height));
  margin: 0 auto;
  padding: clamp(10px, 1.5vw, 22px);
  background:
    linear-gradient(90deg, #26251f, #747166 2.2%, #b4afa2 3%, #36352f 4%, transparent 4.4%, transparent 95.6%, #36352f 96%, #aaa598 97%, #5a584f 98%, #22211d),
    linear-gradient(#302f29, #8e8a80 2%, #35342e 3%, transparent 3.4%, transparent 96.7%, #23221e 97%, #77736b 98%, #25241f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 80px #000, 0 30px 70px #000;
}

.window-shell::before,
.window-shell::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.window-shell::before {
  inset: 7px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8);
}

.window-shell::after {
  left: 4%;
  right: 4%;
  bottom: 4px;
  height: 14px;
  border-radius: 100%;
  background: #050504;
  filter: blur(12px);
  opacity: .75;
}

.window-rail {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
  min-height: 32px;
  padding: 6px 13px;
  overflow: hidden;
  border: 1px solid #0c0c0a;
  background:
    linear-gradient(180deg, #c2beb3 0%, #706d65 20%, #aaa69b 55%, #514f49 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 4px 0 #111;
  color: #0c0c0a;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.window-rail span:nth-child(2) {
  padding: 3px 8px;
  background: #111;
  color: var(--cream);
}

.portal-scene {
  --scene-x: 0;
  --scene-y: 0;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: max(760px, calc(100svh - var(--header-height) - 58px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid #050504;
  background:
    linear-gradient(110deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.045) 17%, transparent 18%, transparent 54%, rgba(255,255,255,.08) 55%, transparent 74%),
    linear-gradient(180deg, rgba(148,173,179,.17), rgba(39,43,40,.25)),
    radial-gradient(ellipse at 70% 105%, rgba(217,180,66,.15), transparent 34%),
    #222821;
  box-shadow: inset 0 0 90px rgba(0,0,0,.74), inset 0 0 0 5px rgba(0,0,0,.26);
  perspective: 1200px;
}

.portal-scene::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -4;
  opacity: .96;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(10,10,8,.8) 6% 8%, transparent 8% 21%, rgba(10,10,8,.8) 21% 24%, transparent 24% 75%, rgba(10,10,8,.82) 75% 77%, transparent 77% 91%, rgba(10,10,8,.8) 91% 93%, transparent 93%),
    linear-gradient(180deg, transparent 0 50%, rgba(9,10,8,.68) 50% 52%, transparent 52% 82%, rgba(8,8,7,.95) 82% 100%),
    radial-gradient(ellipse at 15% 77%, rgba(20,84,174,.47), transparent 11%),
    radial-gradient(ellipse at 67% 74%, rgba(195,38,29,.38), transparent 12%),
    radial-gradient(ellipse at 87% 81%, rgba(231,182,45,.28), transparent 10%),
    linear-gradient(180deg, #273638 0%, #1c2828 37%, #191b16 70%, #0b0b09 100%);
  filter: blur(7px) saturate(.8);
  transform: translate(calc(var(--scene-x) * -5px), calc(var(--scene-y) * -3px)) scale(1.03);
  transition: transform .15s linear;
}

.portal-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 9%, rgba(255,255,255,.09) 10%, transparent 16%, transparent 44%, rgba(255,255,255,.045) 45%, transparent 52%),
    radial-gradient(circle at 9% 15%, rgba(255,255,255,.11), transparent 18%),
    repeating-linear-gradient(90deg, transparent 0 139px, rgba(0,0,0,.12) 140px, transparent 142px);
  mix-blend-mode: screen;
  opacity: .62;
}

.glass-ambient {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.street-glow {
  position: absolute;
  width: 28vw;
  max-width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(68px);
  opacity: .22;
  transform: translate(calc(var(--scene-x) * 8px), calc(var(--scene-y) * 8px));
}

.glow-one { left: -8%; bottom: -20%; background: var(--cobalt); }
.glow-two { right: 7%; top: 10%; background: var(--tomato); }
.glow-three { left: 45%; bottom: -30%; background: var(--mustard); }

.scene-intro {
  position: absolute;
  z-index: 22;
  left: clamp(24px, 4.8vw, 84px);
  top: clamp(30px, 5.3vw, 82px);
  width: min(31rem, 38vw);
  color: var(--cream);
  text-shadow: 0 2px 7px #000;
}

.scene-kicker {
  display: inline-block;
  margin: 0 0 9px;
  padding: 5px 7px 4px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(15,15,12,.52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(.58rem, .75vw, .73rem);
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.scene-instruction {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(.82rem, 1.05vw, 1.04rem);
  line-height: 1.28;
  color: rgba(245,239,224,.76);
}

.scene-instruction span {
  color: #fff;
  font-weight: 700;
}

.tactile-object {
  --base-rotate: 0deg;
  --depth: 1;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: absolute;
  z-index: 10;
  display: flex;
  color: var(--ink-2);
  text-decoration: none;
  transform:
    translate3d(calc(var(--scene-x) * var(--depth) * 7px), calc(var(--scene-y) * var(--depth) * 5px + var(--lift)), 0)
    rotate(var(--base-rotate))
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), filter .24s ease, box-shadow .24s ease;
}

.tactile-object:hover,
.tactile-object:focus-visible {
  --lift: -9px;
  z-index: 30;
  outline: none;
  filter: saturate(1.08) brightness(1.025);
}

.tactile-object:focus-visible {
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--cobalt), 18px 24px 30px rgba(0,0,0,.48) !important;
}

.tactile-object::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  background: rgba(0,0,0,.6);
  filter: blur(8px);
  transform: translate(16px, 20px) translateZ(-20px);
  opacity: .64;
  transition: transform .24s ease, opacity .24s ease;
}

.tactile-object:hover::after,
.tactile-object:focus-visible::after {
  transform: translate(21px, 28px) translateZ(-20px);
  opacity: .76;
}

.object-number {
  position: absolute;
  z-index: 8;
  top: 10px;
  right: 11px;
  font-family: "Courier New", monospace;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .58;
}

.object-arrow {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.tactile-object:hover .object-arrow,
.tactile-object:focus-visible .object-arrow {
  background: var(--ink-2);
  color: var(--paper-bright);
  transform: rotate(12deg) scale(1.08);
}

.object-eyebrow,
.object-label {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(.58rem, .72vw, .72rem);
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
}

.tape-strip {
  position: absolute;
  z-index: 20;
  height: 25px;
  width: 102px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 2%, rgba(255,255,255,.08) 2% 5%, transparent 5% 95%, rgba(255,255,255,.09) 95% 98%, transparent 98%),
    repeating-linear-gradient(90deg, rgba(228,218,182,.78) 0 3px, rgba(207,196,158,.72) 3px 5px);
  box-shadow: 0 2px 4px rgba(0,0,0,.28);
  opacity: .88;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.tape-strip-wide {
  top: -13px;
  left: 50%;
  width: 138px;
  transform: translateX(-50%) rotate(-2deg);
}

.tape-top-left { top: -12px; left: 26px; transform: rotate(-7deg); }
.tape-top-right { top: -10px; right: 22px; transform: rotate(6deg); }
.tape-top-center { top: -12px; left: 50%; transform: translateX(-50%) rotate(2deg); }
.tape-side { top: 44px; left: -48px; transform: rotate(-88deg); }
.tape-polaroid { top: -11px; right: 22%; transform: rotate(8deg); }

.logo-sign {
  --base-rotate: -1.5deg;
  --depth: .5;
  left: 50%;
  top: clamp(40px, 4vw, 64px);
  width: clamp(270px, 25vw, 430px);
  height: auto;
  aspect-ratio: 3.35 / 1;
  padding: clamp(8px, 1vw, 14px) clamp(13px, 1.2vw, 20px) clamp(22px, 2vw, 30px);
  border: 1px solid #000;
  border-radius: 2px 8px 2px 6px;
  background: #050505;
  box-shadow: 9px 12px 0 rgba(7,7,6,.66), 0 0 0 1px rgba(255,255,255,.08) inset;
  transform-origin: center;
  translate: -50% 0;
}

.logo-sign::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0 52%, rgba(255,255,255,.055) 53%, transparent 60%);
  pointer-events: none;
}

.logo-sign img {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  object-fit: contain;
}

.sign-caption {
  position: absolute;
  right: 13px;
  bottom: 8px;
  color: rgba(255,255,255,.66);
  font-family: "Courier New", monospace;
  font-size: clamp(.48rem, .55vw, .62rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shop-window {
  --base-rotate: -1.8deg;
  --depth: 1.15;
  left: clamp(28px, 4vw, 66px);
  top: clamp(225px, 25vh, 315px);
  width: clamp(315px, 32vw, 520px);
  min-height: clamp(220px, 27vw, 344px);
  padding: clamp(20px, 2vw, 30px);
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  border: 1px solid #0e0e0d;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(30,79,145,.16) 29px, transparent 30px),
    linear-gradient(100deg, rgba(255,255,255,.76), transparent 50%),
    #f5f0df;
  box-shadow: inset 0 0 0 6px rgba(20,84,174,.08), 11px 15px 0 rgba(7,7,6,.64);
}

.shop-window::before {
  content: "";
  position: absolute;
  inset: -5px 8px 6px -5px;
  z-index: -2;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(227,231,217,.12);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transform: rotate(.8deg);
}

.shop-window b {
  order: 2;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: Georgia, serif;
  font-size: clamp(2.25rem, 4.3vw, 4.65rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .82;
  text-shadow: none;
}

.shop-window .object-eyebrow { order: 1; color: var(--cobalt); }
.shop-window .window-row { order: 3; }
.shop-window small { order: 4; }

.window-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  min-height: 74px;
  margin: 7px 0 0;
  padding: 0;
  border: 1px solid #111;
  background: #111;
}

.shop-window .mini-logo {
  min-height: 72px;
  padding: 6px;
  border: 0;
  background: var(--paper-bright);
}

.shop-window small {
  margin: 0;
  padding: 0 43px 0 0;
  color: #39362e;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(.61rem, .75vw, .76rem);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.poster-kiosk {
  --base-rotate: 1.75deg;
  --depth: .9;
  right: clamp(29px, 4vw, 70px);
  top: clamp(220px, 24vh, 302px);
  width: clamp(285px, 29vw, 450px);
  min-height: clamp(235px, 25vw, 338px);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(105px, .85fr) 1.35fr;
  gap: clamp(14px, 1.5vw, 24px);
  border: 1px solid #110d0c;
  background: var(--tomato);
  box-shadow: 12px 17px 0 rgba(7,7,6,.68);
}

.poster-kiosk::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.25);
  pointer-events: none;
}

.poster-thumb {
  display: block;
  overflow: hidden;
  min-height: 190px;
  border: 7px solid var(--paper-bright);
  background: #111;
  box-shadow: 3px 4px 0 rgba(0,0,0,.36);
  transform: rotate(-2deg);
}

.poster-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 45%;
  filter: contrast(1.04) saturate(.88);
}

.poster-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: var(--paper-bright);
}

.poster-kiosk .object-eyebrow { color: #fff1c7; }

.poster-kiosk strong {
  min-height: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(1.9rem, 3.2vw, 3.6rem);
  font-style: normal;
  letter-spacing: -.045em;
  line-height: .88;
}

.poster-kiosk small {
  margin: 0;
  padding: 0 38px 0 0;
  color: rgba(255,255,255,.86);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(.62rem, .75vw, .78rem);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.poster-kiosk .object-number { color: #fff; }
.poster-kiosk .object-arrow { color: #fff; }
.poster-kiosk:hover .object-arrow,
.poster-kiosk:focus-visible .object-arrow { background: #fff; color: var(--tomato); }

.profile-clipboard {
  --base-rotate: .7deg;
  --depth: 1.35;
  left: clamp(65px, 9vw, 156px);
  bottom: clamp(34px, 6vh, 75px);
  width: clamp(270px, 26vw, 410px);
  min-height: clamp(190px, 20vw, 265px);
  padding: clamp(34px, 3vw, 46px) clamp(22px, 2vw, 33px) 24px;
  flex-direction: column;
  gap: 9px;
  border: 1px solid #15130d;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(61,90,154,.18) 25px, transparent 26px),
    linear-gradient(100deg, rgba(255,255,255,.55), transparent),
    #e7bc36;
  box-shadow: 11px 16px 0 rgba(7,7,6,.64);
}

.profile-clipboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  bottom: 0;
  width: 1px;
  background: rgba(195,38,29,.25);
}

.binder-clip {
  position: absolute;
  z-index: 22;
  top: -12px;
  left: 50%;
  width: 66px;
  height: 37px;
  border: 2px solid #080807;
  border-radius: 5px 5px 9px 9px;
  background: linear-gradient(90deg, #777 0 15%, #d3d0c8 20% 80%, #777 85%);
  box-shadow: 0 5px 4px rgba(0,0,0,.35);
  transform: translateX(-50%);
}

.binder-clip::before,
.binder-clip::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 21px;
  height: 25px;
  border: 2px solid #111;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.binder-clip::before { left: 5px; transform: rotate(-8deg); }
.binder-clip::after { right: 5px; transform: rotate(8deg); }

.profile-clipboard .object-label,
.sell-ticket .object-label {
  align-self: flex-start;
  min-width: 0;
  padding: 5px 7px 4px;
  border: 1px solid #111;
  background: var(--ink-2);
  color: var(--paper-bright);
  box-shadow: 3px 3px 0 rgba(0,0,0,.24);
}

.profile-clipboard strong,
.sell-ticket strong {
  font-family: Georgia, serif;
  font-size: clamp(1.55rem, 2.6vw, 2.85rem);
  letter-spacing: -.04em;
  line-height: .95;
}

.profile-clipboard small,
.sell-ticket small {
  max-width: 90%;
  font-family: Arial, sans-serif;
  font-size: clamp(.7rem, .85vw, .87rem);
  line-height: 1.35;
}

.scribble {
  margin-top: auto;
  color: rgba(17,17,15,.67);
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  font-size: clamp(.7rem, .9vw, .94rem);
  transform: rotate(-2deg);
}

.sell-ticket {
  --base-rotate: -2.1deg;
  --depth: 1.05;
  left: 50%;
  bottom: clamp(28px, 4.8vh, 62px);
  width: clamp(255px, 23vw, 360px);
  min-height: clamp(175px, 18vw, 238px);
  padding: clamp(22px, 2vw, 29px);
  flex-direction: column;
  gap: 9px;
  border: 1px solid #111;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 6px),
    #dce9d7;
  box-shadow: 11px 16px 0 rgba(7,7,6,.64);
  translate: -50% 0;
  clip-path: polygon(0 0, 100% 0, 100% 96%, 97% 100%, 94% 96%, 91% 100%, 88% 96%, 85% 100%, 82% 96%, 79% 100%, 76% 96%, 73% 100%, 70% 96%, 67% 100%, 64% 96%, 61% 100%, 58% 96%, 55% 100%, 52% 96%, 49% 100%, 46% 96%, 43% 100%, 40% 96%, 37% 100%, 34% 96%, 31% 100%, 28% 96%, 25% 100%, 22% 96%, 19% 100%, 16% 96%, 13% 100%, 10% 96%, 7% 100%, 4% 96%, 0 100%);
}

.sell-ticket .object-label { background: var(--leaf); }

.receipt-line {
  display: block;
  width: 65%;
  margin-top: auto;
  border-top: 1px dashed rgba(17,17,15,.44);
}

.social-tv {
  --base-rotate: 2.2deg;
  --depth: 1.45;
  right: clamp(55px, 8vw, 138px);
  bottom: clamp(28px, 5vh, 66px);
  width: clamp(238px, 22vw, 340px);
  min-height: 0;
  padding: 12px 12px 17px;
  flex-direction: column;
  border: 1px solid #111;
  background: #f8f4e8;
  box-shadow: 11px 17px 0 rgba(7,7,6,.66);
}

.social-tv::before {
  display: none;
}

.social-tv .polaroid-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.23 / 1;
  overflow: hidden;
  border: 1px solid #12120f;
  background: #111;
  box-shadow: inset 0 0 32px #000;
}

.social-tv .polaroid-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.2), transparent 26%, transparent 72%, rgba(255,255,255,.08));
  mix-blend-mode: screen;
  pointer-events: none;
}

.polaroid-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 36%;
  filter: contrast(1.06) saturate(.8) sepia(.08);
  transform: scale(1.04);
}

.social-stamps {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.social-tv .mini-logo {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  background: rgba(8,8,7,.76);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.social-caption {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  margin: 10px 0 0;
  padding: 0 35px 0 2px;
  border: 0;
  background: transparent;
  color: #111;
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  font-size: clamp(1.2rem, 2vw, 2rem);
  line-height: 1;
  text-transform: none;
}

.social-caption i {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: .55rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;
}

.about-plaque {
  --base-rotate: .8deg;
  --depth: .75;
  right: clamp(18px, 2vw, 34px);
  top: 52%;
  width: clamp(205px, 17vw, 280px);
  min-height: 104px;
  padding: 17px 38px 17px 20px;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 3px;
  background: rgba(220,231,223,.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26), 8px 11px 18px rgba(0,0,0,.46);
  color: #f5f2e7;
}

.about-plaque::after {
  background: rgba(0,0,0,.36);
  filter: blur(7px);
}

.about-plaque strong {
  font-family: Georgia, serif;
  font-size: clamp(1.15rem, 1.6vw, 1.7rem);
  letter-spacing: -.03em;
}

.about-plaque small {
  color: rgba(255,255,255,.74);
  font-size: .7rem;
  line-height: 1.28;
}

.about-plaque .object-number,
.about-plaque .object-eyebrow { color: rgba(255,255,255,.68); }
.about-plaque .object-arrow { color: #fff; }
.about-plaque:hover .object-arrow,
.about-plaque:focus-visible .object-arrow { background: #fff; color: #111; }

.plaque-screw {
  position: absolute;
  top: 8px;
  width: 8px;
  height: 8px;
  border: 1px solid #0d0d0c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #76756f 35%, #1b1b19 85%);
  box-shadow: 0 1px 2px #000;
}

.screw-one { left: 8px; }
.screw-two { right: 8px; }

.window-decals {
  position: absolute;
  z-index: 6;
  left: 22px;
  bottom: 13px;
  display: flex;
  gap: 9px;
  color: rgba(255,255,255,.58);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: .53rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: left bottom;
}

.window-decals span {
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.38);
}

/* ---------------------- Interior page polish ---------------------- */
body:not([data-page="home"]) main {
  min-height: calc(100svh - var(--header-height));
  padding: clamp(22px, 4vw, 58px) clamp(12px, 3.2vw, 48px) clamp(50px, 8vw, 100px);
  background:
    linear-gradient(90deg, rgba(20,84,174,.035) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(rgba(20,84,174,.035) 1px, transparent 1px) 0 0 / 38px 38px,
    #eee7d7;
}

body:not([data-page="home"]) .section-band {
  width: min(1320px, 100%);
  margin-inline: auto;
}

body:not([data-page="home"]) .page-card {
  border: 1px solid #111;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(20,84,174,.1) 32px, transparent 33px),
    var(--paper-bright);
  box-shadow: 10px 12px 0 rgba(17,17,15,.88);
  transform: rotate(-.2deg);
}

body:not([data-page="home"]) .page-card::before {
  left: 50%;
  width: 118px;
  background: rgba(214,202,161,.76);
  transform: translateX(-50%) rotate(-2deg);
}

body:not([data-page="home"]) .shop-entry,
body:not([data-page="home"]) .embed-panel,
body:not([data-page="home"]) .sell-panel,
body:not([data-page="home"]) .about-card {
  border: 1px solid #111;
  box-shadow: 7px 9px 0 rgba(17,17,15,.78);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}

body:not([data-page="home"]) .shop-entry:nth-child(odd),
body:not([data-page="home"]) .about-card:nth-child(odd) { transform: rotate(-.35deg); }
body:not([data-page="home"]) .shop-entry:nth-child(even),
body:not([data-page="home"]) .about-card:nth-child(even) { transform: rotate(.35deg); }

body:not([data-page="home"]) .shop-entry:hover,
body:not([data-page="home"]) .shop-entry:focus-visible,
body:not([data-page="home"]) .about-card:hover {
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 10px 14px 0 rgba(17,17,15,.88);
}

.site-footer {
  border-top: 1px solid rgba(255,255,255,.2);
  background: #11110f;
}

/* -------------------------- Responsiveness ------------------------- */
@container (max-width: 1100px) {
  .scene-intro { width: 35vw; }
  .about-plaque { display: none; }
  .shop-window { width: 36vw; }
  .poster-kiosk { width: 34vw; }
  .profile-clipboard { left: 5vw; width: 29vw; }
  .social-tv { right: 5vw; width: 25vw; }
}

@media (max-width: 980px) {
  :root { --header-height: 104px; }

  .site-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 0;
  }

  .brand-lockup {
    justify-self: center;
  }

  .brand-meta { display: none; }

  .nav-links {
    width: calc(100vw - 24px);
    justify-content: flex-start;
    gap: 20px;
    padding: 0 2px 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
  }

  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links > *, .nav-links a { scroll-snap-align: start; }
  .nav-dropdown { display: none !important; }
  .nav-menu::after { display: none; }

  body[data-page="home"] .portal-scene {
    min-height: 850px;
  }

  .scene-intro {
    left: 24px;
    top: 29px;
    width: 37vw;
  }

  .logo-sign {
    top: 38px;
    width: min(42vw, 370px);
  }

  .shop-window {
    left: 4vw;
    top: 230px;
    width: 44vw;
    min-height: 265px;
  }

  .poster-kiosk {
    right: 4vw;
    top: 225px;
    width: 42vw;
    min-height: 270px;
  }

  .profile-clipboard {
    left: 5vw;
    bottom: 42px;
    width: 29vw;
    min-height: 250px;
  }

  .sell-ticket {
    width: 28vw;
    min-height: 230px;
  }

  .social-tv {
    right: 5vw;
    bottom: 44px;
    width: 26vw;
  }
}

@media (max-width: 720px) {
  :root { --header-height: 99px; }

  body[data-page="home"] .hero.portal-hero,
  body[data-page="home"] .window-shell,
  body[data-page="home"] .portal-scene {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .window-shell {
    min-height: auto;
    padding: 7px;
  }

  .window-rail {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 5px 8px;
    font-size: .5rem;
  }

  .window-rail span:nth-child(2) { display: none; }

  body[data-page="home"] .portal-scene {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: auto;
    padding: 22px 15px 74px;
    overflow: hidden;
    perspective: none;
  }

  .portal-scene::before {
    inset: 0;
    transform: none;
  }

  .scene-intro,
  .logo-sign,
  .tactile-object,
  .shop-window,
  .poster-kiosk,
  .profile-clipboard,
  .sell-ticket,
  .social-tv,
  .about-plaque {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    translate: none;
    width: 100%;
    max-width: 520px;
    min-height: 0;
    margin: 0 auto;
    transform: rotate(var(--base-rotate));
  }

  .scene-intro {
    z-index: 4;
    width: 100%;
    max-width: 520px;
    padding: 5px 4px 2px;
    transform: none;
  }

  .scene-instruction { max-width: 32rem; }

  .logo-sign {
    order: -1;
    width: min(84%, 390px);
    aspect-ratio: 3.35 / 1;
    padding: 8px 12px 21px;
  }

  .logo-sign::before { display: block; }
  .logo-sign img { max-height: none; padding: 0; }

  .tactile-object::after {
    transform: translate(8px, 10px);
    filter: blur(4px);
  }

  .shop-window {
    min-height: 260px;
    padding: 23px 20px;
  }

  .shop-window::before { display: block; }

  .shop-window b {
    font-size: clamp(2.7rem, 14vw, 4.4rem);
  }

  .shop-window .window-row {
    grid-template-columns: repeat(4, 1fr);
    margin: 5px 0 0;
    padding: 0;
  }

  .shop-window .mini-logo {
    height: 66px;
    min-height: 66px;
  }

  .poster-kiosk {
    grid-template-columns: minmax(105px, .8fr) 1.3fr;
    min-height: 250px;
    padding: 16px;
  }

  .poster-kiosk strong {
    font-size: clamp(2rem, 9vw, 3.1rem);
  }

  .profile-clipboard,
  .sell-ticket {
    min-height: 220px;
  }

  .profile-clipboard strong,
  .sell-ticket strong {
    font-size: clamp(1.8rem, 8.5vw, 2.8rem);
  }

  .social-tv {
    width: min(88%, 390px);
  }

  .about-plaque {
    display: flex;
    min-height: 128px;
    padding: 20px 45px 20px 24px;
  }

  .window-decals {
    left: 50%;
    bottom: 17px;
    flex-wrap: wrap;
    justify-content: center;
    width: calc(100% - 32px);
    transform: translateX(-50%);
    transform-origin: center;
  }

  body:not([data-page="home"]) main {
    padding: 26px 12px 60px;
  }
}

@media (max-width: 430px) {
  .site-header { padding-inline: 8px; }
  .nav-links { width: calc(100vw - 16px); gap: 17px; }
  .brand-frame { width: 148px; }

  .portal-scene { padding-inline: 11px !important; }

  .poster-kiosk {
    grid-template-columns: 1fr 1.18fr;
    gap: 12px;
    min-height: 225px;
  }

  .poster-thumb { min-height: 177px; border-width: 5px; }
  .poster-kiosk small { padding-right: 28px; font-size: .57rem; }
  .shop-window .window-row { gap: 3px; }
  .shop-window .mini-logo { height: 53px; min-height: 53px; padding: 4px; }
  .shop-window .logo-depop .word-logo { font-size: .68rem; }
  .shop-window .logo-whatnot .word-logo,
  .shop-window .logo-mercari .word-logo { font-size: .48rem; }

  .profile-clipboard,
  .sell-ticket { padding-left: 20px; padding-right: 20px; }
  .social-tv { width: 91%; }
}

@media (hover: none), (pointer: coarse) {
  .tactile-object { will-change: auto; }
  .tactile-object:hover { --lift: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-scene::before,
  .street-glow,
  .tactile-object { transform: none !important; }
  .logo-sign,
  .sell-ticket { translate: none; }
  ::view-transition-group(*) { animation-duration: 1ms !important; }
}

.has-js .reveal-ready {
  opacity: 0;
  transform: translateY(18px) rotate(0deg) !important;
}

.has-js .reveal-ready.is-revealed {
  opacity: 1;
  transform: translateY(0) rotate(0deg) !important;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal-ready { opacity: 1; transform: none !important; }
}

/* Critical home layout reset: neutralizes legacy grid placements from earlier builds. */
body[data-page="home"] .portal-scene {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
}

body[data-page="home"] .portal-scene > .tactile-object {
  position: absolute !important;
  grid-area: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  place-self: auto !important;
}

body[data-page="home"] .logo-sign {
  left: 50% !important;
  top: clamp(40px, 4vw, 64px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(270px, 25vw, 430px) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3.35 / 1 !important;
  align-self: auto !important;
  justify-self: auto !important;
}

body[data-page="home"] .shop-window {
  left: clamp(28px, 4vw, 66px) !important;
  top: clamp(225px, 25vh, 315px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(315px, 32vw, 520px) !important;
  max-width: none !important;
  min-height: clamp(220px, 27vw, 344px) !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body[data-page="home"] .poster-kiosk {
  right: clamp(29px, 4vw, 70px) !important;
  top: clamp(220px, 24vh, 302px) !important;
  left: auto !important;
  bottom: auto !important;
  width: clamp(285px, 29vw, 450px) !important;
  max-width: none !important;
  min-height: clamp(235px, 25vw, 338px) !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body[data-page="home"] .profile-clipboard {
  left: clamp(65px, 9vw, 156px) !important;
  bottom: clamp(34px, 6vh, 75px) !important;
  right: auto !important;
  top: auto !important;
  width: clamp(270px, 26vw, 410px) !important;
  max-width: none !important;
  min-height: clamp(190px, 20vw, 265px) !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body[data-page="home"] .sell-ticket {
  left: 50% !important;
  bottom: clamp(28px, 4.8vh, 62px) !important;
  right: auto !important;
  top: auto !important;
  width: clamp(255px, 23vw, 360px) !important;
  max-width: none !important;
  min-height: clamp(175px, 18vw, 238px) !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body[data-page="home"] .social-tv {
  right: clamp(55px, 8vw, 138px) !important;
  bottom: clamp(28px, 5vh, 66px) !important;
  left: auto !important;
  top: auto !important;
  width: clamp(238px, 22vw, 340px) !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body[data-page="home"] .about-plaque {
  right: clamp(18px, 2vw, 34px) !important;
  top: 52% !important;
  left: auto !important;
  bottom: auto !important;
  width: clamp(205px, 17vw, 280px) !important;
  max-width: none !important;
  min-height: 104px !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

@media (max-width: 980px) and (min-width: 721px) {
  body[data-page="home"] .shop-window {
    left: 4vw !important;
    top: 230px !important;
    width: 44vw !important;
  }

  body[data-page="home"] .poster-kiosk {
    right: 4vw !important;
    top: 225px !important;
    width: 42vw !important;
  }

  body[data-page="home"] .profile-clipboard {
    left: 5vw !important;
    bottom: 42px !important;
    width: 29vw !important;
    min-height: 250px !important;
  }

  body[data-page="home"] .sell-ticket {
    width: 28vw !important;
    min-height: 230px !important;
  }

  body[data-page="home"] .social-tv {
    right: 5vw !important;
    bottom: 44px !important;
    width: 26vw !important;
  }
}

@media (max-width: 720px) {
  body[data-page="home"] .portal-scene {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
  }

  body[data-page="home"] .portal-scene > .tactile-object {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    margin-inline: auto !important;
    translate: none !important;
  }

  body[data-page="home"] .logo-sign {
    order: -1 !important;
    width: min(84%, 390px) !important;
    max-width: 390px !important;
    min-height: 0 !important;
    aspect-ratio: 3.35 / 1 !important;
  }

  body[data-page="home"] .shop-window {
    min-height: 260px !important;
  }

  body[data-page="home"] .poster-kiosk {
    min-height: 250px !important;
  }

  body[data-page="home"] .profile-clipboard,
  body[data-page="home"] .sell-ticket {
    min-height: 220px !important;
  }

  body[data-page="home"] .social-tv {
    width: min(88%, 390px) !important;
    max-width: 390px !important;
    min-height: 0 !important;
  }

  body[data-page="home"] .about-plaque {
    display: flex !important;
    min-height: 128px !important;
  }
}

/* Viewport sizing reset: legacy kiosk mode locked the document to one screen. */
body[data-page="home"] {
  height: auto !important;
  min-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body[data-page="home"] main,
body[data-page="home"] .home-view,
body[data-page="home"] .hero.portal-hero,
body[data-page="home"] .window-shell {
  height: auto !important;
  min-height: calc(100svh - var(--header-height)) !important;
}

body[data-page="home"] .portal-scene {
  height: auto !important;
  min-height: max(760px, calc(100svh - var(--header-height) - 58px)) !important;
}

@media (max-width: 720px) {
  body[data-page="home"] main,
  body[data-page="home"] .home-view,
  body[data-page="home"] .hero.portal-hero,
  body[data-page="home"] .window-shell,
  body[data-page="home"] .portal-scene {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body[data-page="home"] .hero.portal-hero {
    overflow: visible !important;
  }

  body[data-page="home"] .scene-intro { order: -1 !important; }
  body[data-page="home"] .logo-sign { order: -2 !important; }
  body[data-page="home"] .shop-window { order: 1 !important; }
  body[data-page="home"] .poster-kiosk { order: 2 !important; }
  body[data-page="home"] .profile-clipboard { order: 3 !important; }
  body[data-page="home"] .sell-ticket { order: 4 !important; }
  body[data-page="home"] .social-tv { order: 5 !important; }
  body[data-page="home"] .about-plaque { order: 6 !important; }
}

/* Final chrome + card typography normalization over legacy visual rules. */
.brand-lockup {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

.nav-links {
  flex-wrap: nowrap !important;
}

.nav-menu::after {
  display: none !important;
}

body[data-page="home"] .about-plaque {
  top: clamp(145px, 14vh, 175px) !important;
}

body[data-page="home"] .shop-window {
  display: flex !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(30,79,145,.16) 29px, transparent 30px),
    linear-gradient(100deg, rgba(255,255,255,.76), transparent 50%),
    #f5f0df !important;
}

body[data-page="home"] .shop-window b {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  font-family: Georgia, serif !important;
  font-size: clamp(2.25rem, 4.3vw, 4.65rem) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
  line-height: .82 !important;
  text-shadow: none !important;
}

body[data-page="home"] .shop-window .window-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: 74px !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
}

body[data-page="home"] .shop-window .mini-logo {
  min-height: 72px !important;
  height: auto !important;
}

body[data-page="home"] .shop-window small {
  margin: 0 !important;
  padding: 0 43px 0 0 !important;
  color: #39362e !important;
  font-size: clamp(.61rem, .75vw, .76rem) !important;
  line-height: 1.15 !important;
}

body[data-page="home"] .poster-kiosk {
  background: var(--tomato) !important;
}

body[data-page="home"] .poster-kiosk strong {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Georgia, serif !important;
  font-size: clamp(1.9rem, 3.2vw, 3.6rem) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  line-height: .88 !important;
  text-shadow: none !important;
}

body[data-page="home"] .poster-kiosk small {
  margin: 0 !important;
  padding: 0 38px 0 0 !important;
  color: rgba(255,255,255,.86) !important;
  font-size: clamp(.62rem, .75vw, .78rem) !important;
  line-height: 1.25 !important;
}

body[data-page="home"] .poster-kiosk .object-eyebrow {
  color: #fff1c7 !important;
}

body[data-page="home"] .profile-clipboard,
body[data-page="home"] .sell-ticket {
  display: flex !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

body[data-page="home"] .profile-clipboard strong,
body[data-page="home"] .sell-ticket strong {
  font-family: Georgia, serif !important;
  font-size: clamp(1.55rem, 2.6vw, 2.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: .95 !important;
}

body[data-page="home"] .profile-clipboard small,
body[data-page="home"] .sell-ticket small {
  font-family: Arial, sans-serif !important;
  font-size: clamp(.7rem, .85vw, .87rem) !important;
  line-height: 1.35 !important;
}

@media (max-width: 720px) {
  body[data-page="home"] .about-plaque {
    top: auto !important;
  }

  body[data-page="home"] .shop-window b {
    font-size: clamp(2.45rem, 13vw, 4rem) !important;
  }

  body[data-page="home"] .shop-window .window-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 58px !important;
  }

  body[data-page="home"] .shop-window .mini-logo {
    min-height: 56px !important;
    height: 56px !important;
  }

  body[data-page="home"] .poster-kiosk strong {
    font-size: clamp(1.85rem, 8.5vw, 3rem) !important;
  }

  body[data-page="home"] .profile-clipboard strong,
  body[data-page="home"] .sell-ticket strong {
    font-size: clamp(1.75rem, 8vw, 2.65rem) !important;
  }
}

@media (max-width: 430px) {
  body[data-page="home"] .shop-window b {
    width: 100% !important;
    font-size: clamp(2.15rem, 11vw, 2.75rem) !important;
    letter-spacing: -.06em !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body[data-page="home"] .profile-clipboard {
    min-height: 200px !important;
  }

  body[data-page="home"] .sell-ticket {
    min-height: 195px !important;
  }

  body[data-page="home"] .profile-clipboard strong,
  body[data-page="home"] .sell-ticket strong {
    font-size: clamp(1.65rem, 7.5vw, 2.15rem) !important;
    line-height: .96 !important;
  }
}

@media (max-width: 430px) {
  .nav-links {
    gap: 9px !important;
    font-size: .62rem !important;
    letter-spacing: .025em !important;
  }
}

/* ========================================================================== */
/* PRECEDENCE FINAL STOREFRONT — bright taped-glass homepage                  */
/* ========================================================================== */

body[data-page="home"] {
  background: #eaf7fb !important;
}

body[data-page="home"] .site-footer {
  display: none;
}

/* Header: stripped back so the logo and navigation feel like the mockup. */
.site-header {
  min-height: 86px;
  padding: 11px clamp(18px, 3vw, 48px);
  border-bottom: 1px solid rgba(20, 31, 36, 0.16);
  background: rgba(255, 252, 244, 0.94);
  box-shadow: 0 7px 22px rgba(33, 53, 61, 0.08);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.brand-lockup {
  width: auto;
  height: auto;
  overflow: visible;
  gap: clamp(11px, 1.3vw, 18px);
}

.brand-frame {
  width: clamp(176px, 16vw, 244px);
  aspect-ratio: 3.35 / 1;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-0.35deg);
}

.brand-frame::after {
  display: none;
}

.brand-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(1px 0 0 #111)
    drop-shadow(-1px 0 0 #111)
    drop-shadow(0 1px 0 #111)
    drop-shadow(0 3px 2px rgba(17, 17, 15, 0.18));
}

.brand-meta {
  color: #2e2d28;
  font-size: clamp(0.65rem, 0.75vw, 0.77rem);
  line-height: 1.14;
  letter-spacing: 0.12em;
}

.brand-meta b {
  color: #e32f25;
}

.nav-links {
  gap: clamp(14px, 2vw, 32px);
  font-size: clamp(0.72rem, 0.84vw, 0.88rem);
  letter-spacing: 0.055em;
}

.nav-links > a::after,
.nav-menu > a::after {
  height: 3px;
  bottom: 2px;
  background: #e32f25;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-menu::after {
  display: none;
}

/* Main window canvas. */
body[data-page="home"] main,
body[data-page="home"] .home-view,
body[data-page="home"] .showcase-hero {
  width: 100%;
  max-width: none;
  min-height: calc(100svh - var(--header-height));
  margin: 0;
}

.showcase-hero {
  padding: clamp(8px, 1vw, 14px);
  overflow: clip;
  background:
    radial-gradient(circle at 50% -15%, rgba(255, 255, 255, 0.88), transparent 34%),
    linear-gradient(180deg, #eef9fc 0%, #d8eff8 100%);
}

.storefront-shell {
  position: relative;
  width: min(100%, 1760px);
  margin: 0 auto;
  padding: clamp(10px, 1.2vw, 17px);
  border: 1px solid #5c6f77;
  border-radius: clamp(18px, 2vw, 28px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(176,196,204,0.76) 17%, rgba(67,85,93,0.94) 48%, rgba(196,214,220,0.86) 76%, rgba(255,255,255,0.92)),
    #8da2aa;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.72),
    inset 0 0 0 6px rgba(39,56,63,0.78),
    0 18px 45px rgba(41, 75, 91, 0.22);
}

.storefront-shell::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: calc(clamp(18px, 2vw, 28px) - 6px);
  pointer-events: none;
}

.storefront-shell::after {
  content: "";
  position: absolute;
  left: 2.5%;
  right: 2.5%;
  bottom: -2px;
  height: clamp(13px, 1.4vw, 21px);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #f7fbfc, #9db2ba 48%, #eef5f7 52%, #71868f);
  box-shadow: 0 8px 13px rgba(31, 55, 65, 0.24);
  pointer-events: none;
}

.storefront-glass {
  --scene-x: 0;
  --scene-y: 0;
  position: relative;
  isolation: isolate;
  min-height: max(760px, calc(100svh - var(--header-height) - 38px));
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid rgba(35, 76, 93, 0.56);
  border-radius: clamp(12px, 1.5vw, 21px);
  background:
    linear-gradient(116deg, rgba(255,255,255,0.36) 0 8%, transparent 9% 37%, rgba(255,255,255,0.14) 38% 41%, transparent 42% 73%, rgba(255,255,255,0.18) 74% 77%, transparent 78%),
    radial-gradient(circle at 52% 9%, rgba(255,255,255,0.96), rgba(239,252,255,0.74) 18%, transparent 43%),
    linear-gradient(180deg, #bfeaff 0%, #9fd8f3 44%, #c8edf8 75%, #e5f8fc 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.27),
    inset 0 0 70px rgba(24, 130, 174, 0.16),
    inset 0 -40px 80px rgba(255,255,255,0.48);
  perspective: 1200px;
}

.storefront-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 8%, rgba(255,255,255,0.22) 9%, transparent 18%),
    linear-gradient(110deg, transparent 0 54%, rgba(255,255,255,0.12) 55%, transparent 64%),
    radial-gradient(ellipse at 50% 105%, rgba(255,255,255,0.68), transparent 47%);
  mix-blend-mode: screen;
  opacity: 0.86;
}

.storefront-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.48) 0.65px, transparent 0.8px),
    radial-gradient(rgba(19,106,144,0.12) 0.45px, transparent 0.7px);
  background-position: 0 0, 7px 10px;
  background-size: 11px 11px, 17px 17px;
  opacity: 0.14;
}

/* Illustrated city behind the clear blue glass. */
.glass-world {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transform: translate(calc(var(--scene-x) * -4px), calc(var(--scene-y) * -2px)) scale(1.015);
  transition: transform 150ms linear;
}

.glass-world::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 18%;
  height: 3px;
  background: rgba(51, 145, 182, 0.2);
  box-shadow:
    0 35px 0 rgba(255,255,255,0.26),
    0 76px 0 rgba(48, 138, 174, 0.12);
}

.glass-world::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 26%;
  background:
    linear-gradient(156deg, transparent 0 28%, rgba(42,139,177,0.16) 29% 29.4%, transparent 30% 49%, rgba(42,139,177,0.12) 50% 50.4%, transparent 51%),
    linear-gradient(24deg, transparent 0 32%, rgba(255,255,255,0.42) 33% 33.6%, transparent 34% 56%, rgba(255,255,255,0.32) 57% 57.6%, transparent 58%),
    linear-gradient(180deg, rgba(228,250,255,0.12), rgba(216,246,255,0.56));
  transform: perspective(420px) rotateX(56deg) scaleX(1.3);
  transform-origin: bottom;
}

.sky-cloud {
  position: absolute;
  width: 22%;
  height: 8%;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  filter: blur(9px);
}

.cloud-a { top: 8%; left: 22%; }
.cloud-b { top: 15%; right: 18%; width: 17%; }

.city-block {
  position: absolute;
  bottom: 19%;
  border: 1px solid rgba(31, 112, 148, 0.12);
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,0.28) 14px 18px),
    repeating-linear-gradient(180deg, rgba(76,160,194,0.12) 0 13px, rgba(255,255,255,0.18) 13px 16px),
    rgba(84, 165, 197, 0.13);
  box-shadow: inset 7px 0 0 rgba(255,255,255,0.14);
  filter: blur(0.45px);
}

.city-a { left: -1%; width: 11%; height: 48%; }
.city-b { left: 10%; width: 8%; height: 34%; }
.city-c { right: 12%; width: 9%; height: 39%; }
.city-d { right: 1%; width: 12%; height: 51%; }
.city-e { left: 43%; width: 5%; height: 24%; opacity: 0.44; }

.street-grid {
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 11%;
  height: 6%;
  border-top: 2px solid rgba(255,255,255,0.32);
  border-bottom: 1px solid rgba(56,147,182,0.17);
  opacity: 0.65;
}

.glass-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 13px 6px rgba(255,255,255,0.72);
}

.glass-spark::before,
.glass-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255,255,255,0.9);
  transform: translate(-50%, -50%);
}

.glass-spark::before { width: 34px; height: 1px; }
.glass-spark::after { width: 1px; height: 34px; }
.spark-a { top: 8%; left: 36%; }
.spark-b { top: 12%; right: 5%; transform: scale(0.8); }

.showcase-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(350px, 1.12fr) minmax(286px, 0.88fr);
  gap: clamp(20px, 2vw, 34px);
  min-height: inherit;
  padding: clamp(66px, 6.1vw, 96px) clamp(58px, 6.4vw, 110px) clamp(58px, 5vw, 82px);
  align-items: stretch;
}

.glass-card {
  --depth: 1;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: relative;
  display: flex;
  min-width: 0;
  color: #11130f;
  text-decoration: none;
  transform:
    translate3d(calc(var(--scene-x) * var(--depth) * 5px), calc(var(--scene-y) * var(--depth) * 4px + var(--lift)), 0)
    rotate(var(--card-rotate, 0deg))
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    filter 220ms ease,
    box-shadow 220ms ease;
  will-change: transform;
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -2;
  border-radius: inherit;
  background: rgba(27, 91, 115, 0.34);
  filter: blur(8px);
  transform: translate(12px, 18px) translateZ(-20px);
  opacity: 0.72;
  transition: transform 240ms ease, opacity 240ms ease;
}

.glass-card:hover,
.glass-card:focus-visible {
  --lift: -8px;
  z-index: 12;
  outline: none;
  filter: saturate(1.04) brightness(1.025);
}

.glass-card:hover::after,
.glass-card:focus-visible::after {
  transform: translate(16px, 25px) translateZ(-20px);
  opacity: 0.82;
}

.glass-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.94), 0 0 0 8px #1769b0 !important;
}

/* Realistic masking tape shared by every object. */
.card-tape {
  position: absolute;
  z-index: 9;
  top: -15px;
  height: clamp(25px, 2.4vw, 34px);
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 4%, rgba(255,255,255,0.32) 7% 12%, transparent 15% 84%, rgba(255,255,255,0.22) 88% 94%, transparent 97%),
    repeating-linear-gradient(94deg, rgba(225,216,191,0.78) 0 3px, rgba(245,239,222,0.82) 3px 7px),
    rgba(235,228,208,0.86);
  box-shadow:
    0 3px 5px rgba(53, 70, 74, 0.23),
    inset 0 1px rgba(255,255,255,0.55),
    inset 0 -1px rgba(104,96,75,0.15);
  clip-path: polygon(0 17%, 7% 2%, 17% 10%, 29% 1%, 42% 9%, 58% 2%, 70% 11%, 84% 1%, 100% 12%, 96% 88%, 85% 100%, 69% 91%, 54% 100%, 39% 91%, 22% 100%, 7% 88%);
  mix-blend-mode: multiply;
  opacity: 0.88;
}

.card-tape::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(80,73,55,0.18) 0.5px, transparent 0.7px);
  background-size: 5px 5px;
  opacity: 0.45;
}

.tape-wide { width: clamp(108px, 10vw, 158px); }
.tape-small { width: clamp(70px, 6vw, 94px); }
.tape-online { left: 50%; transform: translateX(-50%) rotate(-2deg); }
.tape-online-side { left: 3%; top: -8px; transform: rotate(5deg); opacity: 0.68; }
.tape-local { left: 50%; transform: translateX(-50%) rotate(1.5deg); }
.tape-about { left: 50%; transform: translateX(-50%) rotate(2deg); }
.tape-profile { left: 49%; transform: translateX(-50%) rotate(-1deg); }
.tape-sell { left: 46%; transform: translateX(-50%) rotate(1.4deg); }
.tape-social { left: 50%; transform: translateX(-50%) rotate(2.1deg); }

.card-corner-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #24251f;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.62rem, 0.72vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tiny-globe {
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 0.7;
}

.display-title {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.display-subtitle,
.display-eyebrow,
.local-list,
.profile-copy,
.sell-copy,
.card-footer-line,
.social-bottom {
  font-family: "Arial Narrow", Arial, sans-serif;
}

.display-subtitle,
.display-eyebrow {
  font-size: clamp(0.72rem, 0.9vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.display-arrow {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(31px, 2.8vw, 41px);
  aspect-ratio: 1;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.42rem);
  line-height: 1;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}

.glass-card:hover .display-arrow,
.glass-card:focus-visible .display-arrow {
  color: #fffdf5;
  background: #11130f;
  transform: rotate(11deg) scale(1.06);
}

/* Shop Online paper. */
.online-card {
  --card-rotate: -0.45deg;
  grid-column: 1 / 6;
  grid-row: 1;
  flex-direction: column;
  gap: clamp(13px, 1.3vw, 20px);
  padding: clamp(27px, 2.7vw, 40px) clamp(24px, 2.6vw, 42px) clamp(18px, 2vw, 29px);
  border: 1px solid rgba(94, 79, 55, 0.28);
  border-radius: 11px;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(217,68,55,0.32) 9% 9.35%, transparent 9.35%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(44,111,170,0.16) 31px 32px),
    radial-gradient(circle at 22% 10%, rgba(255,255,255,0.82), transparent 25%),
    #fffaf0;
  box-shadow: inset 0 0 35px rgba(111,87,46,0.05);
}

.paper-holes {
  position: absolute;
  left: 6%;
  right: 6%;
  top: -2px;
  height: 17px;
  background: radial-gradient(circle at center, rgba(108,169,197,0.88) 0 5px, transparent 5.5px) 0 0 / 34px 17px repeat-x;
  opacity: 0.82;
}

.online-card .display-title {
  margin-top: 1px;
  font-size: clamp(3.05rem, 4.8vw, 5.6rem);
  line-height: 0.92;
  white-space: nowrap;
}

.blue-copy { color: #1761aa; }

.marketplace-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  min-height: 80px;
  padding: 13px 0;
  border-top: 2px solid rgba(29,86,150,0.78);
  border-bottom: 2px solid rgba(29,86,150,0.78);
}

.marketplace-row .mini-logo {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 58px;
  padding: 5px;
  border: 0;
  background: transparent;
}

.marketplace-row .word-logo {
  font-size: clamp(0.82rem, 1.3vw, 1.4rem);
  font-weight: 900;
}

.marketplace-row .ebay-word {
  font-size: clamp(1.45rem, 2.15vw, 2.25rem);
}

.marketplace-row .logo-depop .word-logo {
  color: #d62f25;
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
}

.marketplace-row .logo-mercari .word-logo { color: #2968b5; }
.marketplace-row .logo-whatnot .word-logo { color: #111; transform: none; }

.card-footer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  font-size: clamp(0.64rem, 0.78vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Shop In-Person red flyer. */
.local-card {
  --card-rotate: 0.35deg;
  grid-column: 6 / 9;
  grid-row: 1;
  flex-direction: column;
  gap: clamp(13px, 1.25vw, 19px);
  padding: clamp(28px, 2.8vw, 42px) clamp(23px, 2.3vw, 35px) clamp(20px, 2vw, 30px);
  overflow: hidden;
  border-radius: 9px 8px 12px 10px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.11), transparent 27%),
    repeating-linear-gradient(3deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px),
    #d72c22;
  color: #fffaf0;
  box-shadow: inset 0 0 30px rgba(100,17,11,0.11);
  clip-path: polygon(0.7% 0, 99% 0.8%, 100% 98%, 96% 99.2%, 88% 98.3%, 78% 99.2%, 68% 98.2%, 56% 99.5%, 44% 98.4%, 32% 99.3%, 20% 98.2%, 9% 99.1%, 0 98%);
}

.light-meta { color: #fffaf0; }

.local-card .display-title {
  font-size: clamp(3rem, 4.5vw, 5.05rem);
  line-height: 0.87;
  letter-spacing: -0.06em;
}

.local-card .display-subtitle { color: #fff6e9; }

.local-rule {
  height: 2px;
  background: rgba(44, 15, 11, 0.78);
}

.local-list {
  font-size: clamp(0.72rem, 0.92vw, 0.98rem);
  font-weight: 900;
  letter-spacing: 0.075em;
  line-height: 1.55;
  text-transform: uppercase;
}

.local-footer {
  padding-top: 14px;
  border-top: 1px solid rgba(77, 19, 13, 0.28);
}

.local-card:hover .display-arrow,
.local-card:focus-visible .display-arrow {
  color: #d72c22;
  background: #fffaf0;
}

/* Frosted acrylic About plaque. */
.home-about-card {
  --card-rotate: 0.65deg;
  grid-column: 9 / 13;
  grid-row: 1;
  align-self: center;
  flex-direction: column;
  gap: clamp(10px, 1vw, 15px);
  min-height: 72%;
  padding: clamp(42px, 3.8vw, 58px) clamp(33px, 3.2vw, 48px) clamp(30px, 3vw, 44px);
  border: 2px solid rgba(255,255,255,0.78);
  border-radius: 15px;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.52), rgba(255,255,255,0.14) 46%, rgba(205,239,250,0.38)),
    rgba(227,247,252,0.32);
  box-shadow:
    inset 0 0 0 1px rgba(44,114,141,0.21),
    inset 0 1px 0 rgba(255,255,255,0.9);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
}

.home-about-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(63,135,162,0.17);
  border-radius: 10px;
  pointer-events: none;
}

.home-about-card .display-title {
  font-size: clamp(2rem, 2.7vw, 3.1rem);
  line-height: 0.96;
}

.about-copy {
  font-size: clamp(0.88rem, 1.05vw, 1.08rem);
  line-height: 1.35;
}

.home-about-card .display-arrow {
  position: absolute;
  right: clamp(22px, 2.1vw, 31px);
  bottom: clamp(20px, 2vw, 29px);
}

.acrylic-screw {
  position: absolute;
  z-index: 3;
  width: 17px;
  aspect-ratio: 1;
  border: 1px solid rgba(36,56,64,0.48);
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(95,114,121,0.9));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.34), 0 1px 2px rgba(27,55,65,0.35);
}

.acrylic-screw::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 7px;
  height: 1px;
  background: rgba(38,49,53,0.62);
  transform: rotate(-14deg);
}

.screw-a { top: 14px; left: 14px; }
.screw-b { top: 14px; right: 14px; }
.screw-c { bottom: 14px; left: 14px; }
.screw-d { bottom: 14px; right: 14px; }

/* Yellow profile note. */
.profile-card {
  --card-rotate: -1deg;
  grid-column: 1 / 5;
  grid-row: 2;
  flex-direction: column;
  gap: clamp(11px, 1vw, 15px);
  padding: clamp(28px, 2.6vw, 39px) clamp(25px, 2.4vw, 38px) clamp(20px, 2vw, 30px);
  overflow: hidden;
  border-radius: 8px;
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(118,94,26,0.15) 29px 30px),
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.3), transparent 26%),
    #f1cf58;
  box-shadow: inset 0 0 24px rgba(129,86,11,0.09);
}

.profile-card .display-title {
  margin-top: 4px;
  font-size: clamp(2.2rem, 3.25vw, 3.65rem);
  line-height: 0.95;
}

.profile-smile {
  position: absolute;
  right: clamp(29px, 3vw, 44px);
  top: 36%;
  font-family: Arial, sans-serif;
  font-size: clamp(3.4rem, 4.2vw, 4.8rem);
  font-weight: 300;
  line-height: 1;
  transform: rotate(7deg);
  opacity: 0.72;
}

.profile-copy {
  max-width: 72%;
  font-size: clamp(0.68rem, 0.84vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
}

.profile-note {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(61,50,18,0.34);
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  font-size: clamp(0.9rem, 1.2vw, 1.25rem);
  font-style: italic;
  color: rgba(65,51,14,0.75);
}

.profile-card .display-arrow,
.sell-card .display-arrow {
  position: absolute;
  right: clamp(18px, 1.8vw, 27px);
  bottom: clamp(17px, 1.7vw, 25px);
}

/* Mint receipt / sell card. */
.sell-card {
  --card-rotate: 0.45deg;
  grid-column: 5 / 9;
  grid-row: 2;
  flex-direction: column;
  gap: clamp(13px, 1.2vw, 18px);
  padding: clamp(30px, 2.8vw, 43px) clamp(27px, 2.6vw, 40px) clamp(28px, 2.5vw, 38px);
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(48,102,77,0.1) 29px 30px),
    radial-gradient(circle at 24% 12%, rgba(255,255,255,0.45), transparent 25%),
    #c7dfcf;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 97% 100%, 91% 95%, 85% 100%, 79% 95%, 73% 100%, 67% 95%, 61% 100%, 55% 95%, 49% 100%, 43% 95%, 37% 100%, 31% 95%, 25% 100%, 19% 95%, 13% 100%, 7% 95%, 0 100%);
}

.green-meta { color: #17693f; }

.sell-card .display-title {
  font-size: clamp(2.05rem, 3vw, 3.45rem);
  line-height: 0.98;
}

.sell-copy {
  font-size: clamp(0.78rem, 0.96vw, 1rem);
  line-height: 1.35;
}

.receipt-dots {
  width: 68%;
  margin-top: auto;
  border-top: 2px dotted rgba(32,79,57,0.3);
}

/* Y2K Polaroid. */
.social-card {
  --card-rotate: 1.25deg;
  grid-column: 9 / 13;
  grid-row: 2;
  flex-direction: column;
  gap: 9px;
  padding: clamp(12px, 1.25vw, 18px) clamp(12px, 1.25vw, 18px) clamp(14px, 1.4vw, 21px);
  border: 1px solid rgba(78,67,48,0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,0.85), transparent 30%),
    #fffaf0;
  box-shadow: inset 0 0 22px rgba(92,73,42,0.05);
}

.social-photo {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: clamp(7px, 0.75vw, 11px) solid #10110f;
  background: #10110f;
}

.social-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 43%, rgba(255,255,255,0.2) 48%, transparent 54%);
  transform: translateX(-80%);
  transition: transform 480ms ease;
}

.social-card:hover .social-photo::after,
.social-card:focus-visible .social-photo::after {
  transform: translateX(80%);
}

.social-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.03);
}

.social-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  font-size: clamp(1.75rem, 2.8vw, 3rem);
  font-style: italic;
  line-height: 1;
}

.social-title i { font-size: 0.8em; }

.social-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: clamp(0.55rem, 0.68vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.social-icon-row {
  display: flex;
  gap: 6px;
}

.social-icon-row .mini-logo {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.4vw, 35px);
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: #11130f;
  color: #fffaf0;
}

.social-icon-row svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
}

/* Desktop typography tuning via container queries. */
@container (max-width: 1120px) {
  .showcase-grid {
    grid-template-rows: minmax(330px, 1.08fr) minmax(270px, 0.92fr);
    padding-inline: 5.2vw;
  }

  .online-card .display-title { font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
  .local-card .display-title { font-size: clamp(2.65rem, 4.8vw, 4.2rem); }
  .home-about-card { padding-inline: 30px; }
}

/* Tablet: a clean two-column display, still visibly taped to glass. */
@media (max-width: 980px) {
  .site-header {
    min-height: 78px;
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .brand-frame { width: 190px; }
  .brand-meta { display: none; }

  .nav-links {
    flex: 1 1 480px;
    overflow-x: auto;
    justify-content: flex-end;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .showcase-hero { padding: 8px; }
  .storefront-shell { padding: 10px; }

  .storefront-glass {
    min-height: 0;
  }

  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 28px 24px;
    min-height: 0;
    padding: 68px 44px 64px;
  }

  .glass-card {
    min-height: 310px;
  }

  .online-card { grid-column: 1 / -1; grid-row: auto; min-height: 370px; }
  .local-card { grid-column: 1; grid-row: auto; }
  .home-about-card { grid-column: 2; grid-row: auto; align-self: stretch; min-height: 310px; }
  .profile-card { grid-column: 1; grid-row: auto; }
  .sell-card { grid-column: 2; grid-row: auto; }
  .social-card { grid-column: 1 / -1; grid-row: auto; width: min(430px, 68%); justify-self: center; min-height: 500px; }

  .home-about-card .display-title { font-size: clamp(2.2rem, 4.8vw, 3.25rem); }
  .profile-card .display-title,
  .sell-card .display-title { font-size: clamp(2rem, 4.6vw, 3rem); }
}

/* Phone: one clear vertical stack; nothing overlaps or shrinks into illegibility. */
@media (max-width: 640px) {
  :root { --header-height: 126px; }

  .site-header {
    position: sticky;
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 9px 12px 7px;
  }

  .brand-lockup { gap: 8px; }
  .brand-frame { width: 170px; }

  .nav-links {
    width: calc(100vw - 24px);
    max-width: none;
    flex: none;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 0 2px;
    font-size: 0.68rem;
  }

  .nav-links a { padding-block: 6px; }
  .nav-dropdown { display: none; }

  body[data-page="home"] main,
  body[data-page="home"] .home-view,
  body[data-page="home"] .showcase-hero {
    min-height: 0;
  }

  .showcase-hero { padding: 5px; }

  .storefront-shell {
    padding: 8px;
    border-radius: 18px;
  }

  .storefront-glass {
    min-height: 0;
    border-radius: 12px;
  }

  .showcase-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    min-height: 0;
    padding: 54px 20px 58px;
  }

  .glass-card,
  .online-card,
  .local-card,
  .home-about-card,
  .profile-card,
  .sell-card,
  .social-card {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 520px;
    min-height: 0;
    justify-self: center;
    transform: rotate(var(--card-rotate, 0deg));
    will-change: auto;
  }

  .online-card { min-height: 340px; padding: 30px 22px 21px; }
  .online-card .display-title { font-size: clamp(2.7rem, 14vw, 4.2rem); white-space: normal; }
  .marketplace-row { min-height: 67px; gap: 3px; }
  .marketplace-row .mini-logo { height: 48px; }
  .marketplace-row .ebay-word { font-size: 1.35rem; }
  .marketplace-row .logo-depop .word-logo { font-size: 1rem; }
  .marketplace-row .word-logo { font-size: 0.72rem; }

  .local-card { min-height: 385px; padding: 34px 25px 23px; }
  .local-card .display-title { font-size: clamp(3.05rem, 15vw, 4.7rem); }

  .home-about-card { min-height: 320px; padding: 48px 35px 36px; }
  .home-about-card .display-title { font-size: clamp(2.35rem, 12vw, 3.65rem); }

  .profile-card { min-height: 310px; padding: 31px 24px 24px; }
  .profile-card .display-title { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .profile-smile { top: 39%; right: 26px; font-size: 3.5rem; }
  .profile-copy { max-width: 76%; font-size: 0.66rem; }

  .sell-card { min-height: 300px; padding: 34px 27px 34px; }
  .sell-card .display-title { font-size: clamp(2.2rem, 10vw, 3.3rem); }

  .social-card { width: min(94%, 390px); min-height: 470px; padding: 13px; }
  .social-title { font-size: 2.2rem; }

  .glass-spark { display: none; }
  .city-a, .city-d { opacity: 0.54; }
  .city-b, .city-c, .city-e { opacity: 0.27; }
}

@media (max-width: 380px) {
  .showcase-grid { padding-inline: 14px; }
  .profile-smile { font-size: 3rem; right: 18px; }
  .profile-copy { max-width: 82%; }
  .social-bottom { gap: 6px; font-size: 0.5rem; }
}

@media (hover: none), (pointer: coarse) {
  .glass-card:hover { --lift: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-world,
  .glass-card,
  .social-photo::after {
    transform: none !important;
    transition: none !important;
  }
}

/* Final conflict reset against legacy hero/brand rules. */
.brand-lockup {
  min-width: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.showcase-hero {
  display: block !important;
  grid-template-columns: none !important;
  align-items: initial !important;
  min-height: calc(100svh - var(--header-height)) !important;
  border: 0 !important;
  color: #11130f !important;
  overflow: clip !important;
}

/* Keep desktop proportions compact instead of letting intrinsic image sizes grow tracks. */
@media (min-width: 981px) {
  .showcase-grid {
    min-height: 0;
    grid-template-rows: clamp(350px, 31vw, 445px) clamp(285px, 24vw, 345px);
  }
}

@media (max-width: 640px) {
  .nav-links { font-size: 0.72rem; }
  .home-about-card .display-title {
    font-size: clamp(2.05rem, 10.4vw, 3.15rem);
    letter-spacing: -0.065em;
    overflow-wrap: anywhere;
  }
}


/* Homepage social card: cleaner icon-only photo area */
.social-photo-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.92), transparent 28%),
    linear-gradient(145deg, rgba(194,236,255,0.96) 0%, rgba(239,250,255,0.98) 46%, rgba(170,225,255,0.96) 100%);
}

.social-photo-icons::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.18)) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.18)) 0 0 / 1px 100% no-repeat,
    linear-gradient(transparent 95%, rgba(52,120,154,0.08) 95%) 0 0 / 100% 28px,
    linear-gradient(90deg, transparent 95%, rgba(52,120,154,0.08) 95%) 0 0 / 28px 100%;
  opacity: 0.7;
  z-index: 0;
}

.social-photo-decor {
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
  z-index: 0;
}

.social-photo-decor.decor-a {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 12%;
  background: radial-gradient(circle, rgba(255,255,255,0.62), rgba(255,255,255,0.05) 70%, transparent 72%);
}

.social-photo-decor.decor-b {
  width: 150px;
  height: 150px;
  right: 8%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(255,255,255,0.46), rgba(255,255,255,0.04) 70%, transparent 72%);
}

.social-photo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  align-items: center;
  justify-items: center;
  width: min(82%, 250px);
}

.social-photo-grid .mini-logo {
  width: clamp(74px, 6vw, 92px);
  height: clamp(74px, 6vw, 92px);
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.48);
  border-radius: 26px;
  background: rgba(16,17,15,0.94);
  color: #fffaf0;
  box-shadow:
    0 14px 28px rgba(18,44,63,0.2),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

.social-photo-grid .mini-logo.logo-youtube {
  grid-column: 1 / -1;
  width: clamp(88px, 7vw, 108px);
  height: clamp(88px, 7vw, 108px);
  border-radius: 32px;
}

.social-photo-grid svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
}

.social-photo-grid .word-logo,
.social-photo-grid .ebay-word {
  font-size: 0.95rem;
}

@media (max-width: 740px) {
  .social-photo-grid {
    width: min(88%, 240px);
    gap: 12px;
  }

  .social-photo-grid .mini-logo {
    width: 74px;
    height: 74px;
    border-radius: 23px;
    padding: 13px;
  }

  .social-photo-grid .mini-logo.logo-youtube {
    width: 86px;
    height: 86px;
    border-radius: 28px;
  }
}


/* Stronger city-reflection pass for the homepage glass. */
.storefront-glass {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.44) 0 7%, transparent 8% 33%, rgba(255,255,255,0.16) 34% 37%, transparent 38% 69%, rgba(255,255,255,0.19) 70% 73%, transparent 74%),
    radial-gradient(circle at 52% 8%, rgba(255,255,255,0.97), rgba(242,252,255,0.76) 17%, transparent 40%),
    linear-gradient(180deg, #d6f4ff 0%, #b8e9ff 20%, #9fdbf4 48%, #c9eef9 76%, #eefcff 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.28),
    inset 0 0 90px rgba(37, 135, 176, 0.18),
    inset 0 -46px 90px rgba(255,255,255,0.5);
}

.storefront-glass::before {
  background:
    linear-gradient(108deg, transparent 0 7%, rgba(255,255,255,0.24) 8%, transparent 18%),
    linear-gradient(108deg, transparent 0 48%, rgba(255,255,255,0.13) 49%, transparent 61%),
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 22%),
    radial-gradient(ellipse at 50% 106%, rgba(255,255,255,0.74), transparent 47%);
}

.glass-world {
  transform: translate(calc(var(--scene-x) * -5px), calc(var(--scene-y) * -2px)) scale(1.02);
}

.glass-world::before {
  left: -3%;
  right: -3%;
  bottom: 21%;
  height: 2px;
  background: rgba(53, 152, 192, 0.22);
  box-shadow:
    0 22px 0 rgba(255,255,255,0.20),
    0 48px 0 rgba(96,176,204,0.12),
    0 82px 0 rgba(255,255,255,0.17);
}

.glass-world::after {
  left: -4%;
  right: -4%;
  bottom: -3%;
  height: 38%;
  background:
    linear-gradient(156deg, transparent 0 24%, rgba(44,141,180,0.16) 25% 25.3%, transparent 26% 46%, rgba(44,141,180,0.12) 47% 47.3%, transparent 48%),
    linear-gradient(26deg, transparent 0 28%, rgba(255,255,255,0.46) 29% 29.5%, transparent 30% 52%, rgba(255,255,255,0.30) 53% 53.5%, transparent 54%),
    linear-gradient(180deg, rgba(232,251,255,0.06), rgba(214,244,255,0.58));
  opacity: 0.95;
  transform: perspective(480px) rotateX(62deg) scaleX(1.34);
}

.city-block {
  bottom: 20%;
  border: 1px solid rgba(37, 117, 150, 0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,0.26) 16px 20px),
    repeating-linear-gradient(180deg, rgba(68,156,191,0.10) 0 14px, rgba(255,255,255,0.18) 14px 17px),
    rgba(84, 168, 198, 0.16);
  box-shadow:
    inset 10px 0 0 rgba(255,255,255,0.14),
    0 16px 26px rgba(82, 171, 203, 0.08);
  opacity: 0.78;
  filter: blur(0.35px);
}

.city-a { left: -1%; width: 12%; height: 54%; }
.city-b { left: 11%; width: 7%; height: 38%; }
.city-c { right: 13%; width: 8%; height: 43%; }
.city-d { right: 1%; width: 13%; height: 58%; }
.city-e { left: 43%; width: 6%; height: 28%; opacity: 0.48; }

.street-grid {
  left: 22%;
  right: 22%;
  bottom: 10%;
  height: 7%;
  border-top: 2px solid rgba(255,255,255,0.34);
  border-bottom: 1px solid rgba(62,151,185,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  box-shadow:
    0 16px 0 rgba(255,255,255,0.10),
    0 34px 0 rgba(62,151,185,0.07);
  opacity: 0.75;
}

@media (max-width: 740px) {
  .glass-world {
    transform: scale(1.02);
  }

  .glass-world::after {
    height: 31%;
    transform: perspective(430px) rotateX(61deg) scaleX(1.22);
  }

  .city-block {
    opacity: 0.66;
  }
}

/* ===== FINAL POLISH PASS: storefront cards, city reflection, compact shop pages, offer modal ===== */

/* Header CTA */
.header-offer-button {
  min-height: 42px;
  padding: 10px 14px;
  border: 2px solid #10110f;
  background: #fff4c5;
  color: #10110f;
  box-shadow: 4px 4px 0 rgba(16,17,15,0.9);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.header-offer-button:hover,
.header-offer-button:focus-visible {
  background: #d72c22;
  color: #fffdf7;
  outline: none;
}

/* Real downtown reflection image behind cards */
.glass-world {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
    url("assets/city-reflection-cartoon.png") center center / cover no-repeat;
  transform: translate(calc(var(--scene-x) * -6px), calc(var(--scene-y) * -3px)) scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}
.glass-world > * { display: none !important; }
.glass-world::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(207,239,250,0.18) 25%, rgba(255,255,255,0.28) 55%, rgba(199,232,245,0.36));
  box-shadow: none;
}
.glass-world::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background:
    linear-gradient(112deg, transparent 0 8%, rgba(255,255,255,0.22) 9% 13%, transparent 14% 41%, rgba(255,255,255,0.12) 42% 45%, transparent 46% 72%, rgba(255,255,255,0.12) 73% 76%, transparent 77%),
    radial-gradient(circle at 80% 17%, rgba(255,255,255,0.38), transparent 16%);
  transform: none;
  opacity: 0.8;
}

.storefront-glass {
  background:
    linear-gradient(180deg, rgba(232,250,255,0.52), rgba(177,227,247,0.28) 45%, rgba(239,251,255,0.52)),
    linear-gradient(180deg, #d9f6ff 0%, #bceaff 18%, #9fd7ef 50%, #c9edf8 78%, #eefcff 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.33),
    inset 0 0 90px rgba(55, 160, 202, 0.13),
    inset 0 -50px 100px rgba(255,255,255,0.55);
}

/* Concert / shop window feel */
.online-card {
  background:
    linear-gradient(90deg, transparent 0 8.5%, rgba(217,68,55,0.34) 8.5% 8.9%, transparent 8.9%),
    repeating-linear-gradient(180deg, transparent 0 28px, rgba(44,111,170,0.15) 28px 29px),
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.84), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.72)),
    #fffaf0;
}
.online-card::before {
  content: "ONLINE DROP LINES";
  position: absolute;
  left: 22px;
  bottom: 76px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(23,97,170,0.74);
}
.local-card::before {
  content: "VINTAGE NOW SHOWING";
  position: absolute;
  right: 21px;
  top: 21px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,245,230,0.92);
}

/* Home About as OPEN sign */
.home-about-card {
  --card-rotate: 0.35deg;
  justify-content: center;
  text-align: center;
  gap: 12px;
  min-height: 74%;
  padding: 56px 26px 26px;
  border: 4px solid #b32117;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.88), transparent 18%),
    repeating-linear-gradient(180deg, rgba(179,33,23,0.07) 0 5px, transparent 5px 14px),
    #fff8ea;
  box-shadow:
    inset 0 0 0 5px #fff7e4,
    inset 0 0 0 7px #1d2f57,
    0 12px 28px rgba(46,90,120,0.18);
}
.home-about-card::before { display: none; }
.home-about-card .display-eyebrow {
  color: #b32117;
  font-size: 0.86rem;
}
.home-about-card .display-title {
  font-size: clamp(1.95rem, 2.7vw, 3rem);
  line-height: 0.98;
  color: #121419;
}
.home-about-card .about-copy {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.84rem, 0.95vw, 1rem);
  line-height: 1.35;
}
.home-about-card .open-mini {
  display: block;
  margin-top: 6px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d2f57;
}
.open-chain {
  position: absolute;
  top: -28px;
  width: 3px;
  height: 40px;
  background: repeating-linear-gradient(180deg, #7f878f 0 6px, #dbe2e7 6px 12px);
  border-radius: 999px;
}
.left-chain { left: 23%; }
.right-chain { right: 23%; }

/* Social card: make the icon box the obvious picture */
.social-photo-grid {
  width: min(86%, 250px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.social-photo-grid .mini-logo {
  width: clamp(82px, 6.3vw, 96px);
  height: clamp(82px, 6.3vw, 96px);
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.44);
  background: rgba(16,17,15,0.96);
  color: #fffaf0;
}
.social-photo-grid .mini-logo.logo-youtube {
  grid-column: auto;
  width: clamp(82px, 6.3vw, 96px);
  height: clamp(82px, 6.3vw, 96px);
  border-radius: 24px;
}
.social-photo-grid .logo-instagram { color: #fff; background: linear-gradient(145deg, #fdc468, #df4996 55%, #4c68d7); }
.social-photo-grid .logo-youtube { color: #fff; background: #e12020; }
.social-photo-grid .logo-tiktok { color: #fff; background: #111; }
.social-photo-grid .logo-x { color: #fff; background: #111; }
.social-title { justify-content: space-between; }
.social-bottom {
  justify-content: space-between;
  gap: 14px;
  font-size: clamp(0.58rem, 0.72vw, 0.76rem);
}

/* Compact marketplace pages */
.compact-directory-band {
  min-height: calc(100svh - var(--header-height) - 8px);
  padding: 18px clamp(14px, 2vw, 28px) 16px;
  display: grid;
  grid-template-columns: minmax(290px, 0.88fr) minmax(0, 1.12fr);
  gap: 18px;
  align-items: start;
  overflow: hidden;
}
.compact-directory-band .directory-intro {
  max-width: none;
  margin: 0;
}
.compact-intro h1 {
  font-size: clamp(2rem, 3.2vw, 3.4rem);
}
.compact-intro p {
  font-size: 0.92rem;
  line-height: 1.36;
}
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.inline-actions .button {
  min-height: 42px;
  padding-inline: 14px;
  font-size: 0.78rem;
}
.compact-board-head h2 {
  font-size: clamp(1.7rem, 2.2vw, 2.5rem);
}
.compact-board-head { margin-bottom: 8px; }
.compact-shop-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid #10110f;
  border-left: 2px solid #10110f;
}
.compact-shop-board .shop-entry {
  min-height: 138px;
  grid-template-rows: auto auto 1fr auto;
  padding: 12px 12px 10px;
  gap: 6px;
}
.compact-shop-board .shop-mark {
  width: 52px;
  margin: 0 0 3px;
}
.compact-shop-board .status-label {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17,19,15,0.6);
}
.compact-shop-board .shop-entry strong {
  font-size: 1.4rem;
  align-self: start;
}
.compact-shop-board .shop-entry b {
  justify-self: start;
  font-size: 0.76rem;
}
.compact-stand-feature {
  grid-column: 1;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
}
.compact-stand-photo {
  padding: 8px 8px 30px;
  box-shadow: 5px 5px 0 rgba(16,16,14,0.92);
}
.compact-stand-photo img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.compact-stand-photo figcaption {
  font-size: 0.72rem;
}
.compact-stand-copy {
  align-self: center;
}
.compact-stand-copy h2 {
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  margin-top: 4px;
}
.compact-stock-list {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.35;
}
.compact-physical-board .shop-entry {
  min-height: 130px;
}
body[data-page="shop-online"] .page-view[data-page="shop-online"],
body[data-page="shop-in-person"] .page-view[data-page="shop-in-person"] {
  min-height: calc(100svh - var(--header-height));
  overflow: hidden;
}
body[data-page="shop-in-person"] .compact-directory-band {
  grid-template-columns: minmax(310px, 0.96fr) minmax(0, 1.04fr);
}

/* Offer modal */
body.offer-open { overflow: hidden; }
.offer-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
}
.offer-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13,22,29,0.58);
  backdrop-filter: blur(4px);
}
.offer-dialog {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: min(90svh, 760px);
  overflow: auto;
  padding: 22px 20px 18px;
  border: 2px solid #10110f;
  background: #fff8ea;
  box-shadow: 12px 12px 0 rgba(16,16,14,0.92);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.offer-modal.is-open .offer-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.offer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 2px solid #10110f;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.offer-lede {
  margin: 10px 0 16px;
  color: rgba(17,19,15,0.7);
}
.offer-form {
  display: grid;
  gap: 12px;
}
.offer-form label {
  display: grid;
  gap: 7px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
}
.offer-form input,
.offer-form select,
.offer-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid rgba(16,17,15,0.82);
  background: #fffdf7;
  font: inherit;
}
.offer-form textarea { min-height: 98px; resize: vertical; }
.offer-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.offer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* Simplify socials board cards too */
.socials-board .shop-entry p,
.compact-shop-board .shop-entry p { display: none; }
.logo-x { color: #111; }
.logo-x svg { fill: currentColor; stroke: none; }

@media (max-width: 960px) {
  .site-header {
    gap: 12px;
  }
  .header-offer-button {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 0.72rem;
  }
  .compact-directory-band,
  body[data-page="shop-in-person"] .compact-directory-band {
    grid-template-columns: 1fr;
    min-height: calc(100svh - var(--header-height));
  }
  .compact-stand-feature {
    grid-column: auto;
  }
}

@media (max-width: 740px) {
  .header-offer-button {
    width: 100%;
    order: 3;
  }
  .nav-links {
    width: 100%;
  }
  .storefront-glass {
    min-height: calc(100svh - var(--header-height) - 12px);
  }
  .social-photo-grid {
    width: min(92%, 240px);
    gap: 12px;
  }
  .social-photo-grid .mini-logo,
  .social-photo-grid .mini-logo.logo-youtube {
    width: 76px;
    height: 76px;
    padding: 14px;
    border-radius: 22px;
  }
  .compact-directory-band {
    padding: 10px 10px 12px;
    gap: 10px;
  }
  .compact-intro {
    padding: 14px;
  }
  .compact-intro h1 {
    font-size: clamp(1.5rem, 8vw, 2.15rem);
  }
  .compact-intro p {
    font-size: 0.82rem;
    margin-top: 8px;
  }
  .compact-shop-board .shop-entry {
    min-height: 110px;
    padding: 10px 10px 8px;
  }
  .compact-shop-board .shop-entry strong {
    font-size: 1.05rem;
  }
  .compact-shop-board .shop-mark {
    width: 42px;
  }
  .compact-stand-feature {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
  }
  .compact-stand-photo {
    padding: 6px 6px 20px;
  }
  .compact-stand-photo img {
    height: 138px;
  }
  .compact-stand-copy h2 {
    font-size: 1.2rem;
  }
  .compact-stock-list {
    font-size: 0.82rem;
  }
  .offer-dialog {
    padding: 18px 14px 14px;
  }
  .offer-grid-two {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ===== FIT-TO-SCREEN + REAL WINDOW FLYER PASS ===== */

/* The city layer must sit above the pane color and below the taped cards. */
.glass-world {
  z-index: 0 !important;
  opacity: 0.58;
  mix-blend-mode: multiply;
}
.showcase-grid { z-index: 5; }
.storefront-glass::before,
.storefront-glass::after { z-index: 12; }
.showcase-grid { z-index: 20; }

/* Make the home scene an actual one-screen application on every breakpoint. */
body[data-page="home"] { overflow: hidden; }
body[data-page="home"] main,
body[data-page="home"] .home-view,
body[data-page="home"] .showcase-hero {
  height: calc(100svh - var(--header-height));
  min-height: 0 !important;
  overflow: hidden !important;
}
body[data-page="home"] .storefront-shell {
  height: 100%;
  max-height: 100%;
}
body[data-page="home"] .storefront-glass {
  height: 100%;
  min-height: 0 !important;
}
body[data-page="home"] .showcase-grid {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1.08fr) minmax(0, 0.92fr);
  padding-top: clamp(42px, 5.5vh, 72px);
  padding-bottom: clamp(28px, 3.7vh, 54px);
}

/* Two of the window pieces now read like actual vintage event/shop flyers. */
.concert-flyer {
  background:
    linear-gradient(140deg, transparent 0 74%, rgba(255,244,218,0.10) 74% 78%, transparent 78%),
    repeating-linear-gradient(4deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.13), transparent 24%),
    #ca261d;
  border: 2px solid rgba(68,13,10,0.5);
}
.concert-flyer::after {
  background: rgba(72,24,23,0.34);
}
.concert-star-row {
  display: block;
  margin: -4px 0 -8px;
  color: #ffd56b;
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
  letter-spacing: 0.45em;
}
.concert-flyer .display-title {
  font-family: Impact, "Arial Black", sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
  text-shadow: 2px 2px 0 rgba(79,16,12,0.48);
}
.concert-date {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 8px;
  border: 1px solid rgba(255,248,230,0.7);
  background: #fff2c9;
  color: #8f1c15;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.56rem, 0.65vw, 0.7rem);
  font-weight: 900;
  letter-spacing: 0.1em;
}

.wanted-flyer {
  border: 2px solid rgba(67,52,17,0.5);
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(167,45,35,0.16) 5% 5.4%, transparent 5.4%),
    repeating-linear-gradient(180deg, transparent 0 24px, rgba(101,73,22,0.13) 24px 25px),
    radial-gradient(circle at 70% 18%, rgba(255,255,255,0.35), transparent 22%),
    #efcd55;
}
.wanted-kicker {
  align-self: flex-start;
  padding: 4px 7px;
  background: #141610;
  color: #fff7dd;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.52rem, 0.7vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.12em;
}
.wanted-flyer .display-title {
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: -0.035em;
}
.tear-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin: auto -12px -20px;
  padding-top: 8px;
  border-top: 2px dashed rgba(51,41,12,0.5);
}
.tear-tabs i {
  min-width: 0;
  padding: 8px 2px 11px;
  border-right: 1px dashed rgba(51,41,12,0.35);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.48rem, 0.58vw, 0.62rem);
  font-style: normal;
  font-weight: 900;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.buying-flyer {
  border: 2px solid rgba(28,88,55,0.45);
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(32,105,66,0.11) 25px 26px),
    linear-gradient(135deg, rgba(255,255,255,0.54), transparent 32%),
    #c4dec9;
}
.buying-flyer .display-title {
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: -0.035em;
}

/* Shop pages: no descriptive card clutter and no page scroll. */
body[data-page="shop-online"],
body[data-page="shop-in-person"] { overflow: hidden; }
body[data-page="shop-online"] main,
body[data-page="shop-in-person"] main,
body[data-page="shop-online"] .page-view,
body[data-page="shop-in-person"] .page-view {
  height: calc(100svh - var(--header-height));
  min-height: 0;
  overflow: hidden;
}
body[data-page="shop-online"] .compact-directory-band,
body[data-page="shop-in-person"] .compact-directory-band {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.compact-shop-board .shop-entry p { display: none !important; }
.compact-shop-board .shop-entry {
  align-content: center;
}

/* Tablet home: six independent pieces in a true 3 x 2 storefront grid. */
@media (min-width: 641px) and (max-width: 980px) {
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
    padding: clamp(40px, 5vh, 58px) clamp(22px, 3vw, 38px) clamp(24px, 3vh, 38px);
  }
  body[data-page="home"] .glass-card,
  body[data-page="home"] .online-card,
  body[data-page="home"] .local-card,
  body[data-page="home"] .home-about-card,
  body[data-page="home"] .profile-card,
  body[data-page="home"] .sell-card,
  body[data-page="home"] .social-card {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    min-height: 0;
    height: 100%;
    padding: clamp(18px, 2.3vw, 28px);
  }
  body[data-page="home"] .online-card .display-title,
  body[data-page="home"] .local-card .display-title {
    font-size: clamp(2rem, 4vw, 3rem);
  }
  body[data-page="home"] .home-about-card .display-title,
  body[data-page="home"] .profile-card .display-title,
  body[data-page="home"] .sell-card .display-title {
    font-size: clamp(1.55rem, 3vw, 2.3rem);
  }
  body[data-page="home"] .marketplace-row { min-height: 52px; }
  body[data-page="home"] .marketplace-row .mini-logo { height: 42px; }
  body[data-page="home"] .profile-copy,
  body[data-page="home"] .sell-copy,
  body[data-page="home"] .about-copy,
  body[data-page="home"] .local-list { font-size: 0.68rem; }
  body[data-page="home"] .profile-note { font-size: 0.82rem; }
  body[data-page="home"] .social-title { font-size: 1.6rem; }
  body[data-page="home"] .social-photo-grid .mini-logo,
  body[data-page="home"] .social-photo-grid .mini-logo.logo-youtube {
    width: clamp(54px, 7vw, 72px);
    height: clamp(54px, 7vw, 72px);
    padding: 10px;
    border-radius: 18px;
  }
  body[data-page="home"] .tear-tabs { margin-bottom: -18px; }
}

/* Phone home: two columns by three rows, no vertical page scroll. */
@media (max-width: 640px) {
  :root { --header-height: 84px; }
  .site-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 8px;
    height: 84px;
    min-height: 84px;
    padding: 5px 9px 4px;
  }
  .brand-lockup { grid-column: 1; grid-row: 1; }
  .brand-frame { width: 132px; }
  .header-offer-button {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 0.61rem;
    box-shadow: 2px 2px 0 rgba(16,17,15,0.9);
  }
  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    gap: 15px;
    padding: 0 0 1px;
    font-size: 0.59rem;
    overflow-x: auto;
    white-space: nowrap;
  }
  .nav-links a { padding: 3px 0 4px; }
  body[data-page="home"] .showcase-hero { padding: 3px; }
  body[data-page="home"] .storefront-shell {
    padding: 6px;
    border-radius: 13px;
  }
  body[data-page="home"] .storefront-glass { border-radius: 8px; }
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 22px 8px 9px;
  }
  body[data-page="home"] .glass-card,
  body[data-page="home"] .online-card,
  body[data-page="home"] .local-card,
  body[data-page="home"] .home-about-card,
  body[data-page="home"] .profile-card,
  body[data-page="home"] .sell-card,
  body[data-page="home"] .social-card {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    max-width: none;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 15px 10px 9px;
    gap: 5px;
    overflow: hidden;
    transform: rotate(var(--card-rotate, 0deg));
  }
  body[data-page="home"] .card-tape {
    top: -6px;
    height: 15px;
  }
  body[data-page="home"] .tape-wide { width: 62px; }
  body[data-page="home"] .tape-small { width: 40px; }
  body[data-page="home"] .card-corner-meta,
  body[data-page="home"] .display-subtitle,
  body[data-page="home"] .display-eyebrow {
    font-size: 0.45rem;
    letter-spacing: 0.07em;
  }
  body[data-page="home"] .display-arrow {
    width: 22px;
    font-size: 0.78rem;
  }
  body[data-page="home"] .online-card .display-title,
  body[data-page="home"] .local-card .display-title,
  body[data-page="home"] .profile-card .display-title,
  body[data-page="home"] .sell-card .display-title,
  body[data-page="home"] .home-about-card .display-title {
    margin: 0;
    font-size: clamp(1.05rem, 5.7vw, 1.45rem);
    line-height: 0.9;
    white-space: normal;
  }
  body[data-page="home"] .online-card::before,
  body[data-page="home"] .local-card::before,
  body[data-page="home"] .paper-holes,
  body[data-page="home"] .concert-star-row,
  body[data-page="home"] .local-rule,
  body[data-page="home"] .local-list,
  body[data-page="home"] .profile-copy,
  body[data-page="home"] .sell-copy,
  body[data-page="home"] .receipt-dots,
  body[data-page="home"] .profile-smile,
  body[data-page="home"] .about-copy,
  body[data-page="home"] .open-mini,
  body[data-page="home"] .left-chain,
  body[data-page="home"] .right-chain {
    display: none;
  }
  body[data-page="home"] .online-card { padding-top: 16px; }
  body[data-page="home"] .marketplace-row {
    min-height: 0;
    height: 38px;
    gap: 1px;
    padding: 3px 0;
    border-width: 1px;
  }
  body[data-page="home"] .marketplace-row .mini-logo {
    height: 31px;
    padding: 2px;
  }
  body[data-page="home"] .marketplace-row .ebay-word { font-size: 0.76rem; }
  body[data-page="home"] .marketplace-row .word-logo { font-size: 0.43rem; }
  body[data-page="home"] .marketplace-row .logo-depop .word-logo { font-size: 0.55rem; }
  body[data-page="home"] .card-footer-line {
    margin-top: auto;
    font-size: 0.43rem;
    letter-spacing: 0.05em;
  }
  body[data-page="home"] .concert-date {
    margin-top: auto;
    padding: 3px 4px;
    font-size: 0.4rem;
  }
  body[data-page="home"] .local-footer { padding-top: 4px; }
  body[data-page="home"] .home-about-card {
    justify-content: center;
    padding-inline: 8px;
    border-width: 2px;
    box-shadow: inset 0 0 0 2px #fff7e4, inset 0 0 0 3px #1d2f57;
  }
  body[data-page="home"] .home-about-card .display-title { font-size: clamp(0.98rem, 5.1vw, 1.28rem); }
  body[data-page="home"] .wanted-kicker { font-size: 0.38rem; padding: 2px 3px; }
  body[data-page="home"] .profile-note {
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.55rem;
  }
  body[data-page="home"] .tear-tabs {
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0 -5px -8px;
    padding-top: 3px;
    border-top-width: 1px;
  }
  body[data-page="home"] .tear-tabs i {
    padding: 3px 1px 5px;
    font-size: 0.33rem;
  }
  body[data-page="home"] .social-card {
    padding: 9px 7px 7px;
    gap: 3px;
  }
  body[data-page="home"] .social-photo {
    min-height: 0;
    border-width: 3px;
  }
  body[data-page="home"] .social-photo-grid {
    width: min(88%, 126px);
    gap: 5px;
  }
  body[data-page="home"] .social-photo-grid .mini-logo,
  body[data-page="home"] .social-photo-grid .mini-logo.logo-youtube {
    width: clamp(34px, 10vw, 45px);
    height: clamp(34px, 10vw, 45px);
    padding: 6px;
    border-radius: 11px;
  }
  body[data-page="home"] .social-title {
    font-size: 0.82rem;
    line-height: 0.9;
  }
  body[data-page="home"] .social-bottom {
    font-size: 0.35rem;
    gap: 4px;
  }
  body[data-page="home"] .social-bottom .display-arrow { display: none; }

  /* Marketplace screens stay in one viewport on phones. */
  body[data-page="shop-online"] .compact-directory-band,
  body[data-page="shop-in-person"] .compact-directory-band {
    display: grid;
    height: 100%;
    padding: 8px;
    gap: 7px;
  }
  body[data-page="shop-online"] .compact-directory-band {
    grid-template-rows: auto minmax(0, 1fr);
  }
  body[data-page="shop-in-person"] .compact-directory-band {
    grid-template-rows: auto minmax(0, 0.9fr) minmax(0, 0.62fr);
  }
  .compact-intro {
    padding: 10px 11px;
    box-shadow: 4px 4px 0 rgba(16,16,14,0.9);
  }
  .compact-intro::before { display: none; }
  .compact-intro h1 { font-size: clamp(1.28rem, 6.4vw, 1.8rem); }
  .compact-intro p {
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.24;
  }
  .compact-intro .inline-actions { margin-top: 7px; gap: 6px; }
  .compact-intro .inline-actions .button {
    min-height: 31px;
    padding: 5px 8px;
    font-size: 0.59rem;
    box-shadow: 2px 2px 0 currentColor;
  }
  .compact-board-head { margin: 0 0 4px; }
  .compact-board-head .eyebrow { display: none; }
  .compact-board-head h2 { font-size: 1rem; }
  .online-column,
  .physical-column { min-height: 0; display: flex; flex-direction: column; }
  .compact-shop-board {
    flex: 1;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .compact-shop-board .shop-entry {
    min-height: 0;
    height: 100%;
    padding: 6px;
    gap: 2px;
    grid-template-rows: auto auto 1fr auto;
  }
  .compact-shop-board .shop-mark { width: 34px; margin: 0; border-width: 1px; }
  .compact-shop-board .status-label { font-size: 0.45rem; }
  .compact-shop-board .shop-entry strong { font-size: 0.88rem; }
  .compact-shop-board .shop-entry b { font-size: 0.49rem; }
  .compact-stand-feature {
    min-height: 0;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 7px;
  }
  .compact-stand-photo {
    height: 100%;
    padding: 4px 4px 16px;
    box-shadow: 3px 3px 0 rgba(16,16,14,0.9);
  }
  .compact-stand-photo::before { display: none; }
  .compact-stand-photo img { height: 100%; min-height: 0; object-fit: cover; }
  .compact-stand-photo figcaption { font-size: 0.42rem; bottom: 4px; }
  .compact-stand-copy h2 { font-size: 1rem; }
  .compact-stock-list { margin-top: 4px; font-size: 0.62rem; line-height: 1.18; }
  .compact-physical-board { grid-template-rows: minmax(0, 1fr); }
  .compact-physical-board .shop-entry { grid-column: 1 / -1; }
}

@media (max-width: 360px), (max-height: 620px) {
  :root { --header-height: 76px; }
  .site-header { height: 76px; min-height: 76px; }
  .brand-frame { width: 116px; }
  .header-offer-button { min-height: 29px; font-size: 0.55rem; }
  .nav-links { font-size: 0.53rem; gap: 12px; }
  body[data-page="home"] .showcase-grid { padding-top: 18px; gap: 6px; }
  body[data-page="home"] .glass-card,
  body[data-page="home"] .online-card,
  body[data-page="home"] .local-card,
  body[data-page="home"] .home-about-card,
  body[data-page="home"] .profile-card,
  body[data-page="home"] .sell-card,
  body[data-page="home"] .social-card { padding: 12px 7px 6px; }
  body[data-page="home"] .online-card .display-title,
  body[data-page="home"] .local-card .display-title,
  body[data-page="home"] .profile-card .display-title,
  body[data-page="home"] .sell-card .display-title,
  body[data-page="home"] .home-about-card .display-title { font-size: 0.95rem; }
  body[data-page="home"] .marketplace-row { height: 31px; }
  body[data-page="home"] .marketplace-row .mini-logo { height: 25px; }
  body[data-page="home"] .social-photo-grid .mini-logo,
  body[data-page="home"] .social-photo-grid .mini-logo.logo-youtube {
    width: 31px;
    height: 31px;
    padding: 5px;
  }
}

/* Ensure the offer dialog stays fully removed until opened. */
.offer-modal[hidden] { display: none !important; }

/* ===== V6: REAL FLYER WALL + CORRECT SOCIAL MARKS ===== */

@media (min-width: 981px) {
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    column-gap: clamp(10px, 1vw, 16px);
    row-gap: clamp(28px, 3.2vh, 44px);
    padding-inline: clamp(66px, 5.4vw, 92px);
  }
  body[data-page="home"] .online-card { grid-column: 1 / 6; }
  body[data-page="home"] .local-card { grid-column: 7 / 11; }
  body[data-page="home"] .home-about-card { grid-column: 12 / 16; }
  body[data-page="home"] .profile-card { grid-column: 1 / 5; }
  body[data-page="home"] .sell-card { grid-column: 6 / 10; }
  body[data-page="home"] .social-card { grid-column: 11 / 16; }
}

/* Each object now feels like a different piece from a real flyer wall. */
.web-gig-poster {
  overflow: hidden;
  border: 3px solid #121212;
  border-radius: 1px;
  background:
    linear-gradient(155deg, transparent 0 59%, rgba(34,69,166,0.96) 59% 65%, transparent 65%),
    linear-gradient(25deg, transparent 0 72%, rgba(224,46,36,0.96) 72% 78%, transparent 78%),
    radial-gradient(circle at 82% 18%, transparent 0 38px, #111 39px 42px, transparent 43px),
    repeating-linear-gradient(0deg, rgba(15,15,15,0.035) 0 1px, transparent 1px 5px),
    #f2e6c9;
  box-shadow: inset 0 0 0 6px rgba(255,250,237,0.52);
}
.web-gig-poster::before {
  content: "";
  position: absolute;
  right: -34px;
  top: 24%;
  width: 125px;
  height: 125px;
  border: 13px solid rgba(226,45,35,0.9);
  border-radius: 50%;
  opacity: 0.86;
}
.web-gig-poster .poster-stamp {
  align-self: flex-start;
  padding: 4px 7px;
  background: #101010;
  color: #f6ebd0;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.56rem, 0.68vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.14em;
}
.web-gig-poster .display-title {
  max-width: 82%;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.2rem, 4.7vw, 5.1rem);
  line-height: 0.79;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.web-gig-poster .display-subtitle {
  max-width: 72%;
  color: #111;
  font-size: clamp(0.65rem, 0.78vw, 0.84rem);
}
.web-gig-poster .marketplace-row {
  position: relative;
  z-index: 2;
  min-height: 66px;
  padding: 8px 10px;
  border: 2px solid #111;
  background: rgba(250,244,226,0.92);
}
.web-gig-poster .poster-fineprint {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.52rem, 0.62vw, 0.67rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.web-gig-poster .card-footer-line {
  position: relative;
  z-index: 2;
  padding-top: 7px;
  border-top: 2px solid #111;
}

/* Rock-show poster: no clipping, clear hierarchy. */
.concert-flyer {
  overflow: hidden;
  clip-path: none;
  border: 3px solid #e8dcc0;
  border-radius: 1px;
  background:
    linear-gradient(160deg, transparent 0 48%, rgba(179,26,20,0.88) 48% 55%, transparent 55%),
    radial-gradient(circle at 74% 17%, transparent 0 30px, rgba(232,220,192,0.9) 31px 34px, transparent 35px),
    repeating-linear-gradient(4deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
    #171717;
  color: #f2e5c8;
  box-shadow: inset 0 0 0 5px #171717, inset 0 0 0 7px rgba(232,220,192,0.7);
}
.concert-flyer::before {
  content: "";
  position: absolute;
  left: -34px;
  bottom: 12%;
  width: 118px;
  height: 118px;
  background: repeating-conic-gradient(#c52b22 0 10deg, transparent 10deg 20deg);
  border-radius: 50%;
  opacity: 0.72;
}
.concert-flyer .concert-topline {
  align-self: center;
  padding: 4px 9px;
  background: #c52b22;
  color: #fff4d8;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.56rem, 0.66vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.16em;
}
.concert-flyer .display-title {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.75rem, 3.7vw, 4.15rem);
  line-height: 0.74;
  letter-spacing: -0.035em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
}
.concert-flyer .display-title span { display: block; }
.concert-flyer .display-title span:nth-child(2) {
  margin: 3px auto;
  color: #d53328;
  font-size: 0.66em;
  letter-spacing: 0.16em;
}
.concert-venue {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 6px 10px;
  border: 2px solid #e8dcc0;
  background: #e8dcc0;
  color: #151515;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(0.9rem, 1.25vw, 1.35rem);
  letter-spacing: 0.045em;
}
.concert-bill {
  position: relative;
  z-index: 2;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.58rem, 0.68vw, 0.74rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-align: center;
}
.concert-flyer .concert-date {
  position: relative;
  z-index: 2;
  align-self: center;
  background: #c52b22;
  color: #fff4d8;
  border-color: #c52b22;
}
.concert-flyer .local-footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  border-top-color: rgba(232,220,192,0.48);
}

/* Hanging OPEN sign inside the glass, not another paper card. */
.real-open-sign {
  overflow: visible !important;
  align-self: center;
  justify-content: center;
  min-height: 70%;
  padding: 38px 14px 22px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}
.real-open-sign::after {
  inset: 16% 6% 4%;
  border-radius: 22px;
  background: rgba(26,73,92,0.25);
  filter: blur(11px);
  transform: translate(10px,18px);
}
.open-sign-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 210px;
  padding: 24px 18px 20px;
  border: 7px solid #1d2228;
  border-radius: 18px;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.38), transparent 25% 70%, rgba(255,255,255,0.16)),
    rgba(224,244,250,0.56);
  box-shadow:
    inset 0 0 0 3px #d6e5ea,
    inset 0 0 24px rgba(19,59,77,0.18),
    0 8px 0 rgba(31,50,59,0.2);
  backdrop-filter: blur(6px) saturate(1.12);
}
.open-sign-panel::before,
.open-sign-panel::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 3px solid #d92c24;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(217,44,36,0.72), inset 0 0 8px rgba(217,44,36,0.44);
}
.open-sign-panel::after {
  inset: 18px;
  border-color: #2679b8;
  box-shadow: 0 0 8px rgba(38,121,184,0.64), inset 0 0 8px rgba(38,121,184,0.36);
}
.open-sign-panel > * { position: relative; z-index: 2; }
.open-sign-small {
  color: #d52c24;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.72rem, 0.9vw, 0.96rem);
  font-weight: 900;
  letter-spacing: 0.16em;
}
.real-open-sign .display-title {
  margin: 4px 0 2px;
  color: #e22922;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.35rem, 4.8vw, 5.1rem);
  line-height: 0.9;
  letter-spacing: 0.035em;
  text-shadow:
    0 0 2px #fff,
    0 0 7px rgba(226,41,34,0.96),
    0 0 18px rgba(226,41,34,0.64);
}
.open-sign-hours {
  color: #246da7;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.66rem, 0.82vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.13em;
}
.open-sign-location {
  margin-top: 8px;
  color: #1c2429;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.58rem, 0.7vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}
.real-open-sign .open-mini {
  display: block;
  margin-top: 10px;
  color: #183f5a;
  font-size: clamp(0.58rem, 0.7vw, 0.75rem);
}
.real-open-sign .open-chain {
  top: -8px;
  height: 54px;
  width: 4px;
  z-index: 1;
  background: repeating-linear-gradient(180deg, #39464d 0 5px, #d8e1e5 5px 10px);
}
.real-open-sign .left-chain { left: 29%; }
.real-open-sign .right-chain { right: 29%; }

/* DJ / rave request flyer. */
.dj-flyer {
  overflow: hidden;
  border: 3px solid #111;
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent 0 64%, rgba(229,255,63,0.96) 64% 72%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 11px),
    #2969d7;
  color: #101217;
  box-shadow: inset 0 0 0 5px rgba(239,255,92,0.72);
}
.dj-flyer .dj-orbit {
  position: absolute;
  right: -34px;
  top: 23%;
  width: 150px;
  height: 150px;
  border: 18px solid rgba(232,255,58,0.92);
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px #111, 0 0 0 6px #111;
  opacity: 0.88;
}
.dj-flyer .card-corner-meta { color: #101217; }
.dj-kicker {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 5px 8px;
  background: #111;
  color: #edff50;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.54rem, 0.65vw, 0.7rem);
  font-weight: 900;
  letter-spacing: 0.13em;
}
.dj-flyer .display-title {
  position: relative;
  z-index: 2;
  color: #f0ff4f;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.4rem, 3.25vw, 3.65rem);
  line-height: 0.76;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 #111;
}
.dj-flyer .profile-copy {
  position: relative;
  z-index: 2;
  max-width: 78%;
  color: #111;
  font-size: clamp(0.58rem, 0.69vw, 0.75rem);
}
.dj-flyer .profile-note {
  position: relative;
  z-index: 2;
  border-top: 2px solid #111;
  color: #111;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.66rem, 0.8vw, 0.88rem);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

/* Newspaper/classified buying notice. */
.classified-flyer {
  overflow: hidden;
  border: 3px solid #141414;
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg, rgba(15,15,15,0.045) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent 0 48%, rgba(20,20,20,0.12) 48% 48.7%, transparent 48.7%),
    #eee5cf;
  color: #121212;
  clip-path: none;
  box-shadow: inset 0 0 0 5px rgba(255,250,236,0.58);
}
.classified-banner {
  margin: -4px -4px 2px;
  padding: 7px 9px;
  border: 2px solid #111;
  background: #d63529;
  color: #fff4d8;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(0.76rem, 1vw, 1.08rem);
  letter-spacing: 0.08em;
  text-align: center;
}
.classified-flyer .display-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 3.15vw, 3.55rem);
  line-height: 0.78;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}
.classified-flyer .sell-copy {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}
.classified-rule {
  height: 5px;
  border-top: 2px solid #111;
  border-bottom: 1px solid #111;
}
.classified-note {
  max-width: 82%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.66rem, 0.78vw, 0.84rem);
  line-height: 1.25;
}

/* Social poster uses true brand marks as the picture. */
.social-poster {
  border-radius: 2px;
  background:
    linear-gradient(135deg, transparent 0 78%, rgba(49,116,213,0.16) 78% 84%, transparent 84%),
    #f5ecda;
}
.social-poster .social-photo-icons {
  border: 7px solid #111;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.62), transparent 62%),
    repeating-linear-gradient(90deg, rgba(33,91,136,0.08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, rgba(33,91,136,0.08) 0 1px, transparent 1px 24px),
    #d9f1fb;
}
.brand-social-grid {
  width: min(90%, 285px);
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(13px, 1.25vw, 18px);
}
.brand-social-icon {
  display: grid;
  place-items: center;
  width: clamp(72px, 5.8vw, 92px);
  height: clamp(72px, 5.8vw, 92px);
  filter: drop-shadow(0 8px 10px rgba(25,54,72,0.19));
}
.brand-social-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: none;
}
.social-poster .social-title {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1.45rem, 2.25vw, 2.5rem);
  font-style: normal;
  letter-spacing: 0.035em;
}

/* Tablet flyer tuning. */
@media (min-width: 641px) and (max-width: 980px) {
  body[data-page="home"] .showcase-grid {
    gap: 18px 20px;
  }
  body[data-page="home"] .web-gig-poster .display-title,
  body[data-page="home"] .concert-flyer .display-title {
    font-size: clamp(2rem, 4.2vw, 2.9rem);
  }
  body[data-page="home"] .dj-flyer .display-title,
  body[data-page="home"] .classified-flyer .display-title {
    font-size: clamp(1.75rem, 3.4vw, 2.45rem);
  }
  body[data-page="home"] .open-sign-panel { min-height: 175px; }
  body[data-page="home"] .real-open-sign .display-title { font-size: clamp(2.4rem, 5vw, 3.5rem); }
  body[data-page="home"] .brand-social-icon { width: 58px; height: 58px; }
}

/* Phone: keep the six-poster wall readable without scrolling. */
@media (max-width: 640px) {
  body[data-page="home"] .showcase-grid {
    gap: 10px;
    padding: 23px 9px 10px;
  }
  body[data-page="home"] .web-gig-poster,
  body[data-page="home"] .concert-flyer,
  body[data-page="home"] .real-open-sign,
  body[data-page="home"] .dj-flyer,
  body[data-page="home"] .classified-flyer,
  body[data-page="home"] .social-poster {
    padding: 13px 9px 8px;
  }
  body[data-page="home"] .poster-stamp,
  body[data-page="home"] .poster-fineprint,
  body[data-page="home"] .concert-bill,
  body[data-page="home"] .classified-note,
  body[data-page="home"] .dj-flyer .profile-copy {
    display: none;
  }
  body[data-page="home"] .web-gig-poster .display-title {
    font-size: clamp(1.25rem, 6.3vw, 1.62rem);
    line-height: 0.78;
  }
  body[data-page="home"] .web-gig-poster .display-subtitle {
    display: block;
    max-width: 100%;
    font-size: 0.42rem;
  }
  body[data-page="home"] .web-gig-poster .marketplace-row {
    height: 34px;
    min-height: 0;
    padding: 2px;
  }
  body[data-page="home"] .concert-flyer .concert-topline {
    padding: 2px 4px;
    font-size: 0.37rem;
  }
  body[data-page="home"] .concert-flyer .display-title {
    font-size: clamp(1.15rem, 6vw, 1.52rem);
    line-height: 0.72;
  }
  body[data-page="home"] .concert-venue {
    padding: 3px 5px;
    font-size: 0.58rem;
  }
  body[data-page="home"] .concert-flyer .concert-date {
    margin-top: 2px;
    font-size: 0.35rem;
  }
  body[data-page="home"] .real-open-sign {
    padding: 18px 6px 7px !important;
  }
  body[data-page="home"] .open-sign-panel {
    min-height: 0;
    height: calc(100% - 16px);
    padding: 13px 6px 9px;
    border-width: 4px;
    border-radius: 10px;
  }
  body[data-page="home"] .open-sign-panel::before { inset: 6px; border-width: 2px; }
  body[data-page="home"] .open-sign-panel::after { inset: 10px; border-width: 2px; }
  body[data-page="home"] .open-sign-small { font-size: 0.4rem; }
  body[data-page="home"] .real-open-sign .display-title {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }
  body[data-page="home"] .open-sign-hours { font-size: 0.36rem; }
  body[data-page="home"] .open-sign-location { display: none; }
  body[data-page="home"] .real-open-sign .open-mini {
    display: block;
    margin-top: 4px;
    font-size: 0.34rem;
  }
  body[data-page="home"] .real-open-sign .open-chain {
    display: block;
    top: -2px;
    height: 25px;
    width: 2px;
  }
  body[data-page="home"] .dj-kicker { font-size: 0.35rem; padding: 2px 4px; }
  body[data-page="home"] .dj-flyer .display-title {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
    line-height: 0.73;
  }
  body[data-page="home"] .dj-flyer .profile-note {
    display: block;
    margin-top: auto;
    padding-top: 3px;
    font-size: 0.38rem;
  }
  body[data-page="home"] .dj-flyer .dj-orbit {
    width: 72px;
    height: 72px;
    right: -26px;
    border-width: 9px;
  }
  body[data-page="home"] .classified-banner {
    margin: -2px -2px 0;
    padding: 3px 4px;
    font-size: 0.48rem;
  }
  body[data-page="home"] .classified-flyer .display-title {
    font-size: clamp(1.15rem, 5.8vw, 1.48rem);
    line-height: 0.75;
  }
  body[data-page="home"] .classified-flyer .sell-copy {
    display: block;
    font-size: 0.37rem;
  }
  body[data-page="home"] .classified-rule { height: 3px; border-width: 1px; }
  body[data-page="home"] .social-poster { padding: 8px 6px 6px; }
  body[data-page="home"] .social-poster .social-photo { border-width: 4px; }
  body[data-page="home"] .brand-social-grid {
    width: min(90%, 126px);
    gap: 5px;
  }
  body[data-page="home"] .brand-social-icon {
    width: clamp(34px, 10vw, 44px);
    height: clamp(34px, 10vw, 44px);
  }
  body[data-page="home"] .social-poster .social-title {
    font-size: 0.72rem;
  }
}

/* V6 readability cleanup */
.web-gig-poster::before {
  left: auto;
  right: -32px;
  bottom: auto;
  top: 22%;
}
.concert-flyer::before {
  right: auto;
  top: auto;
  left: -34px;
  bottom: 12%;
  content: "";
}
.web-gig-poster .marketplace-row .mini-logo {
  min-width: 0;
  overflow: hidden;
  padding-inline: 2px;
}
.web-gig-poster .marketplace-row .ebay-word { font-size: clamp(1.05rem, 1.55vw, 1.55rem); }
.web-gig-poster .marketplace-row .logo-depop .word-logo { font-size: clamp(0.78rem, 1vw, 1.05rem); }
.web-gig-poster .marketplace-row .logo-whatnot .word-logo,
.web-gig-poster .marketplace-row .logo-mercari .word-logo { font-size: clamp(0.56rem, 0.72vw, 0.78rem); }

@media (max-width: 640px) {
  body[data-page="home"] .web-gig-poster::before {
    right: -22px;
    left: auto;
    top: 18%;
    width: 66px;
    height: 66px;
    border-width: 7px;
  }
  body[data-page="home"] .web-gig-poster .marketplace-row .ebay-word { font-size: 0.62rem; }
  body[data-page="home"] .web-gig-poster .marketplace-row .logo-depop .word-logo { font-size: 0.42rem; }
  body[data-page="home"] .web-gig-poster .marketplace-row .logo-whatnot .word-logo,
  body[data-page="home"] .web-gig-poster .marketplace-row .logo-mercari .word-logo { font-size: 0.31rem; }
}

/* ===== V7: PHYSICAL FLYER DETAILS + REAL HANGING OPEN SIGN ===== */

/* The tape is intentionally different on every piece. */
.window-tape {
  position: absolute;
  z-index: 14;
  pointer-events: none;
  height: clamp(23px, 2vw, 31px);
  background:
    linear-gradient(104deg, transparent 0 5%, rgba(255,255,255,0.34) 9% 14%, transparent 18% 82%, rgba(255,255,255,0.22) 88% 94%, transparent 98%),
    repeating-linear-gradient(92deg, rgba(220,211,185,0.82) 0 3px, rgba(246,239,219,0.88) 3px 8px),
    rgba(235,227,204,0.88);
  box-shadow: 0 3px 5px rgba(44,58,62,0.24), inset 0 1px rgba(255,255,255,0.58);
  clip-path: polygon(0 13%, 8% 1%, 18% 8%, 29% 0, 42% 8%, 56% 1%, 70% 9%, 84% 1%, 100% 11%, 97% 90%, 86% 100%, 69% 92%, 55% 100%, 39% 92%, 24% 100%, 8% 89%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}
.window-tape::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(76,67,47,0.18) 0.55px, transparent 0.8px);
  background-size: 5px 5px;
  opacity: 0.5;
}
.tape-corner { width: clamp(68px, 5.8vw, 92px); }
.tape-tl { top: -8px; left: -16px; transform: rotate(-31deg); }
.tape-tr { top: -8px; right: -16px; transform: rotate(31deg); }
.tape-bl { left: -16px; bottom: -7px; transform: rotate(29deg); }
.tape-br { right: -16px; bottom: -7px; transform: rotate(-29deg); }
.tape-diagonal { width: clamp(88px, 7.2vw, 116px); }
.tape-local-a { top: -8px; left: -18px; transform: rotate(-28deg); }
.tape-local-b { right: -18px; bottom: -7px; transform: rotate(-31deg); }
.tape-sell-a { top: -8px; left: -16px; transform: rotate(-27deg); }
.tape-sell-b { top: -8px; right: -16px; transform: rotate(29deg); }
.tape-center {
  top: -14px;
  left: 50%;
  width: clamp(112px, 9vw, 148px);
  transform: translateX(-50%) rotate(-1.5deg);
}
.tape-social-center { transform: translateX(-50%) rotate(2deg); }

/* Small lifted corners make the paper feel exposed to air against the glass. */
.paper-lift {
  position: absolute;
  z-index: 7;
  width: 42px;
  height: 29px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(217,205,178,0.28) 58%, transparent 59%);
  filter: drop-shadow(3px 4px 3px rgba(23,55,68,0.22));
  opacity: 0.82;
}
.lift-bottom-right { right: -2px; bottom: -2px; transform: rotate(180deg); }
.lift-lower-left { left: -2px; bottom: -2px; transform: rotate(90deg); }
.lift-top-right { right: -2px; top: -2px; transform: rotate(-90deg); }
.lift-bottom-left { left: -2px; bottom: -2px; transform: rotate(90deg); }
.lift-top-left { left: -2px; top: -2px; }

/* The cards remain posters—not random polygons—but a few have subtle worn edges. */
.concert-flyer {
  clip-path: polygon(0 0, 100% 0, 100% 97.4%, 96% 98.5%, 91% 97.7%, 86% 99%, 80% 98%, 74% 99.1%, 67% 98%, 61% 99.2%, 54% 98.1%, 47% 99%, 39% 97.9%, 32% 99.1%, 24% 98%, 17% 99%, 9% 97.8%, 0 98.6%);
}
.classified-flyer {
  clip-path: polygon(0 0, 100% 0, 100% 96.8%, 94% 98.7%, 88% 97.4%, 81% 99%, 74% 97.8%, 67% 99.2%, 59% 97.7%, 52% 99%, 45% 97.9%, 37% 99.2%, 29% 97.8%, 22% 99%, 14% 97.7%, 7% 99%, 0 97.9%);
}
.profile-card {
  transform-origin: 50% 8%;
}

/* Clear, reinforced destination labels. */
.hover-cta {
  position: relative;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - 42px);
  padding: 3px 6px 2px;
  border-bottom: 2px solid currentColor;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.57rem, 0.7vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.15;
  text-transform: uppercase;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.hover-footer { align-items: flex-end; }
.glass-card:hover .hover-cta,
.glass-card:focus-visible .hover-cta {
  color: #11130f;
  background: #ffe25c;
  box-shadow: 3px 3px 0 #11130f;
  transform: translate(-2px, -2px) rotate(-0.6deg);
}
.local-card .hover-cta { color: #fff4d8; }
.local-card:hover .hover-cta,
.local-card:focus-visible .hover-cta { color: #11130f; }
.profile-hover-cta,
.sell-hover-cta { margin-top: auto; }
.profile-card .profile-note,
.classified-flyer .classified-note { margin-top: 0; }

/* The About object is a large sign attached to suction hooks on the glass. */
.real-open-sign {
  min-height: 88%;
  padding: 62px 2px 10px !important;
  overflow: visible !important;
}
.open-suction {
  position: absolute;
  z-index: 16;
  top: 2px;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(68,115,135,0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.92) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(238,251,255,0.72), rgba(165,216,235,0.34) 64%, rgba(55,121,148,0.22) 66%, transparent 72%);
  box-shadow: 0 4px 7px rgba(25,70,88,0.2), inset 0 0 0 5px rgba(255,255,255,0.18);
  backdrop-filter: blur(3px);
}
.open-suction::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 10px;
  height: 12px;
  border: 3px solid #5c6870;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  transform: translateX(-50%);
}
.suction-left { left: 24%; }
.suction-right { right: 24%; }
.real-open-sign .open-chain {
  display: block !important;
  z-index: 12;
  top: 37px;
  width: 4px;
  height: 39px;
  background: repeating-linear-gradient(180deg, #4f5960 0 5px, #d9e1e4 5px 9px);
  box-shadow: 0 1px 2px rgba(18,41,51,0.25);
}
.real-open-sign .left-chain { left: calc(24% + 16px); }
.real-open-sign .right-chain { right: calc(24% + 16px); }
.open-sign-panel {
  width: 112%;
  min-height: 245px;
  padding: 20px 16px 15px;
  border: 8px solid #f2f1ec;
  border-radius: 22px;
  background: #ef1d26;
  box-shadow:
    0 0 0 3px #8e9699,
    0 0 0 6px #f8f8f5,
    0 12px 24px rgba(28,72,91,0.28),
    inset 0 0 22px rgba(152,0,8,0.22);
  backdrop-filter: none;
}
.open-sign-panel::before {
  inset: 10px;
  border: 2px solid rgba(255,255,255,0.28);
  border-radius: 11px;
  box-shadow: inset 0 0 14px rgba(255,255,255,0.14);
}
.open-sign-panel::after { display: none; }
.open-sign-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 13px;
  width: 100%;
  color: #fff;
}
.open-sign-topline em {
  position: relative;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(2rem, 2.8vw, 3rem);
  font-weight: 700;
  line-height: 0.8;
  white-space: nowrap;
  text-shadow: 0 2px 2px rgba(120,0,6,0.28);
}
.open-sign-topline em::after {
  content: "";
  position: absolute;
  left: 4%;
  right: -8%;
  bottom: -7px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  transform: rotate(-6deg);
}
.open-sign-topline b {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 2rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.real-open-sign .display-title {
  margin: 12px 0 2px;
  color: #fff;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(5.2rem, 7.3vw, 7.7rem);
  line-height: 0.72;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 4px rgba(130,0,8,0.25);
}
.open-sign-hours {
  margin-top: 12px;
  color: #fff;
  font-size: clamp(0.63rem, 0.78vw, 0.84rem);
  letter-spacing: 0.14em;
}
.real-open-sign .open-mini {
  margin-top: 12px;
  color: #173d54;
  background: rgba(255,255,255,0.72);
  border-bottom-color: #173d54;
}
.real-open-sign:hover .open-mini,
.real-open-sign:focus-visible .open-mini { background: #ffe25c; }

/* Socials is now a flyer, not a Polaroid. */
.social-poster {
  overflow: hidden;
  padding: clamp(24px, 2.2vw, 34px) clamp(20px, 1.9vw, 28px) clamp(18px, 1.7vw, 25px);
  border: 3px solid #11130f;
  border-radius: 0;
  background:
    linear-gradient(145deg, transparent 0 68%, rgba(236,48,37,0.96) 68% 74%, transparent 74%),
    linear-gradient(25deg, transparent 0 77%, rgba(255,220,70,0.96) 77% 84%, transparent 84%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px),
    #183c78;
  color: #fff7dc;
  clip-path: polygon(0 0, 100% 0, 100% 98%, 94% 99%, 88% 98.2%, 81% 99%, 74% 98%, 67% 99.2%, 59% 98%, 52% 99%, 44% 98%, 36% 99.2%, 28% 98%, 20% 99%, 12% 98.1%, 5% 99%, 0 98%);
}
.social-poster .social-title {
  order: -1;
  font-size: clamp(2rem, 3.2vw, 3.55rem);
  line-height: 0.9;
  color: #ffe24e;
  text-shadow: 3px 3px 0 #11130f;
}
.social-poster .social-photo {
  flex: 1;
  min-height: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.social-poster .social-photo::before,
.social-poster .social-photo::after { display: none; }
.social-poster .brand-social-grid {
  width: min(96%, 310px);
  gap: clamp(12px, 1.2vw, 17px);
}
.social-poster .brand-social-icon {
  width: clamp(76px, 6.2vw, 98px);
  height: clamp(76px, 6.2vw, 98px);
  padding: 3px;
  border: 3px solid #fff8e5;
  border-radius: 18px;
  background: #fff8e5;
  box-shadow: 5px 5px 0 #10130f;
  transform: rotate(var(--social-tilt, -1deg));
}
.social-poster .brand-social-icon:nth-child(2) { --social-tilt: 1.5deg; }
.social-poster .brand-social-icon:nth-child(3) { --social-tilt: 1deg; }
.social-poster .brand-social-icon:nth-child(4) { --social-tilt: -1.5deg; }
.social-poster .social-bottom { color: #fff7dc; }
.social-poster .hover-cta { color: #fff7dc; }
.social-poster:hover .hover-cta,
.social-poster:focus-visible .hover-cta { color: #11130f; }

/* Slightly more air between the objects. */
@media (min-width: 981px) {
  body[data-page="home"] .showcase-grid {
    column-gap: clamp(18px, 1.6vw, 28px);
    row-gap: clamp(30px, 3.5vh, 48px);
    padding-inline: clamp(72px, 6vw, 108px);
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .real-open-sign { padding-top: 50px !important; }
  .open-sign-panel { min-height: 205px; width: 105%; }
  .real-open-sign .display-title { font-size: clamp(4rem, 8vw, 5.7rem); }
  .open-sign-topline em { font-size: clamp(1.55rem, 3.6vw, 2.3rem); }
  .open-sign-topline b { font-size: clamp(1rem, 2.4vw, 1.55rem); }
  .social-poster .brand-social-icon { width: 64px; height: 64px; }
}

@media (max-width: 640px) {
  body[data-page="home"] .window-tape {
    height: 13px;
  }
  body[data-page="home"] .tape-corner { width: 40px; }
  body[data-page="home"] .tape-diagonal { width: 49px; }
  body[data-page="home"] .tape-center { top: -5px; width: 58px; }
  body[data-page="home"] .tape-tl,
  body[data-page="home"] .tape-tr { top: -4px; }
  body[data-page="home"] .tape-bl,
  body[data-page="home"] .tape-br,
  body[data-page="home"] .tape-local-b { bottom: -4px; }
  body[data-page="home"] .paper-lift { width: 23px; height: 16px; }
  body[data-page="home"] .hover-cta {
    max-width: calc(100% - 25px);
    padding: 2px 3px 1px;
    border-bottom-width: 1px;
    font-size: 0.34rem;
    letter-spacing: 0.055em;
  }
  body[data-page="home"] .profile-note,
  body[data-page="home"] .classified-note { display: none; }
  body[data-page="home"] .profile-hover-cta,
  body[data-page="home"] .sell-hover-cta { margin-top: auto; }
  body[data-page="home"] .real-open-sign {
    padding: 27px 3px 4px !important;
  }
  body[data-page="home"] .open-suction {
    top: 0;
    width: 19px;
    height: 19px;
    border-width: 1px;
  }
  body[data-page="home"] .open-suction::after {
    bottom: -5px;
    width: 6px;
    height: 7px;
    border-width: 2px;
  }
  body[data-page="home"] .suction-left { left: 21%; }
  body[data-page="home"] .suction-right { right: 21%; }
  body[data-page="home"] .real-open-sign .open-chain {
    top: 18px;
    width: 2px;
    height: 17px;
  }
  body[data-page="home"] .real-open-sign .left-chain { left: calc(21% + 8px); }
  body[data-page="home"] .real-open-sign .right-chain { right: calc(21% + 8px); }
  body[data-page="home"] .open-sign-panel {
    width: 106%;
    min-height: 0;
    height: calc(100% - 19px);
    padding: 8px 4px 5px;
    border-width: 4px;
    border-radius: 8px;
    box-shadow: 0 0 0 1px #8e9699, 0 0 0 2px #f8f8f5, 0 5px 9px rgba(28,72,91,0.24);
  }
  body[data-page="home"] .open-sign-panel::before { inset: 4px; border-width: 1px; }
  body[data-page="home"] .open-sign-topline { gap: 4px; }
  body[data-page="home"] .open-sign-topline em {
    font-size: clamp(0.66rem, 3.9vw, 0.92rem);
  }
  body[data-page="home"] .open-sign-topline em::after { bottom: -3px; height: 2px; }
  body[data-page="home"] .open-sign-topline b { font-size: clamp(0.48rem, 2.8vw, 0.66rem); }
  body[data-page="home"] .real-open-sign .display-title {
    margin: 6px 0 0;
    font-size: clamp(1.75rem, 9.6vw, 2.35rem);
    line-height: 0.7;
  }
  body[data-page="home"] .open-sign-hours { margin-top: 6px; font-size: 0.28rem; }
  body[data-page="home"] .real-open-sign .open-mini {
    display: inline-flex;
    margin-top: 4px;
    font-size: 0.27rem;
  }
  body[data-page="home"] .social-poster {
    padding: 8px 6px 5px;
  }
  body[data-page="home"] .social-poster .social-title {
    font-size: 0.9rem;
  }
  body[data-page="home"] .social-poster .brand-social-grid {
    width: min(96%, 132px);
    gap: 5px;
  }
  body[data-page="home"] .social-poster .brand-social-icon {
    width: clamp(35px, 10.2vw, 46px);
    height: clamp(35px, 10.2vw, 46px);
    padding: 1px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow: 2px 2px 0 #10130f;
  }
}

/* V7.1: keep tape and destination labels visibly attached to every poster. */
.window-tape { opacity: 0.96; z-index: 30; }
.tape-tl { top: 2px; left: -9px; }
.tape-tr { top: 2px; right: -9px; }
.tape-bl { left: -9px; bottom: 2px; }
.tape-br { right: -9px; bottom: 2px; }
.tape-local-a { top: 2px; left: -12px; }
.tape-local-b { top: 2px; right: -12px; bottom: auto; transform: rotate(29deg); }
.tape-sell-a { top: 2px; left: -11px; }
.tape-sell-b { top: 2px; right: -11px; }
.tape-center { top: 1px; }

.online-card .hover-footer,
.local-card .hover-footer,
.social-card .hover-footer {
  position: absolute;
  z-index: 24;
  left: 13px;
  right: 13px;
  bottom: 9px;
  margin: 0;
}
.profile-hover-cta,
.sell-hover-cta {
  position: absolute;
  z-index: 24;
  left: 13px;
  bottom: 10px;
  margin: 0;
}
.web-gig-poster { padding-bottom: clamp(45px, 4vw, 58px); }
.web-gig-poster .marketplace-row { margin-bottom: 4px; }
.concert-flyer { padding-bottom: clamp(42px, 3.8vw, 55px); }
.concert-flyer .concert-date { margin-bottom: 3px; }
.dj-flyer,
.classified-flyer { padding-bottom: clamp(38px, 3.4vw, 49px); }
.social-poster { padding-bottom: clamp(34px, 3vw, 44px); }

@media (max-width: 640px) {
  body[data-page="home"] .tape-tl,
  body[data-page="home"] .tape-tr { top: 1px; }
  body[data-page="home"] .tape-bl,
  body[data-page="home"] .tape-br { bottom: 1px; }
  body[data-page="home"] .tape-local-a,
  body[data-page="home"] .tape-local-b,
  body[data-page="home"] .tape-sell-a,
  body[data-page="home"] .tape-sell-b { top: 1px; }
  body[data-page="home"] .tape-center { top: 1px; }
  body[data-page="home"] .online-card .hover-footer,
  body[data-page="home"] .local-card .hover-footer,
  body[data-page="home"] .social-card .hover-footer {
    left: 6px;
    right: 6px;
    bottom: 4px;
  }
  body[data-page="home"] .profile-hover-cta,
  body[data-page="home"] .sell-hover-cta {
    left: 6px;
    bottom: 4px;
  }
  body[data-page="home"] .web-gig-poster,
  body[data-page="home"] .concert-flyer,
  body[data-page="home"] .dj-flyer,
  body[data-page="home"] .classified-flyer,
  body[data-page="home"] .social-poster {
    padding-bottom: 22px;
  }
}

/* V7.2 readability: labels get their own strip and tape stays visible on dark flyers. */
.window-tape { mix-blend-mode: normal; }
.concert-flyer .window-tape,
.social-poster .window-tape { opacity: 0.92; }
.hover-cta {
  color: #11130f;
  background: rgba(255,248,226,0.9);
  box-shadow: 1px 1px 0 rgba(17,19,15,0.65);
}
.local-card .hover-cta,
.social-poster .hover-cta { color: #11130f; }
.web-gig-poster .marketplace-row { margin-bottom: 27px; }
.concert-flyer .concert-date { margin-bottom: 27px; }
.profile-card .profile-note { margin-bottom: 28px; }
.classified-flyer .classified-note { margin-bottom: 28px; }
.social-poster .social-photo { margin-bottom: 24px; }

@media (max-width: 640px) {
  body[data-page="home"] .web-gig-poster .marketplace-row { margin-bottom: 15px; }
  body[data-page="home"] .concert-flyer .concert-date { margin-bottom: 14px; }
  body[data-page="home"] .social-poster .social-photo { margin-bottom: 13px; }
}

/* Keep the four-corner tape treatment without covering the Shop Online label. */
.online-card .hover-footer {
  left: clamp(48px, 4.5vw, 68px);
  right: clamp(48px, 4.5vw, 68px);
  justify-content: center;
}
.online-card .hover-footer .display-arrow { display: none; }
@media (max-width: 640px) {
  body[data-page="home"] .online-card .hover-footer {
    left: 37px;
    right: 37px;
    justify-content: center;
  }
}

/* ===== V8: OPEN SIGN CENTERED + CONSIGNMENT LANGUAGE + SOCIAL RAVE FLYER ===== */

/* Desktop top row: Shop Online | OPEN | Shop In-Person. */
@media (min-width: 981px) {
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    column-gap: clamp(16px, 1.35vw, 24px);
  }
  body[data-page="home"] .online-card { grid-column: 1 / 6; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 6 / 11; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 11 / 16; grid-row: 1; }
  body[data-page="home"] .profile-card { grid-column: 1 / 6; grid-row: 2; }
  body[data-page="home"] .sell-card { grid-column: 6 / 11; grid-row: 2; }
  body[data-page="home"] .social-card { grid-column: 11 / 16; grid-row: 2; }
}

/* Make the OPEN sign the clear center anchor without turning it into another paper poster. */
.real-open-sign {
  align-self: center;
  justify-content: flex-start;
  min-height: 94%;
  padding: 63px 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.real-open-sign::after { display: none !important; }
.open-sign-panel {
  width: 106%;
  min-height: 274px;
  padding: 22px 15px 18px;
  transform: translateX(-3%);
  box-shadow:
    0 0 0 3px #8e9699,
    0 0 0 7px #f8f8f5,
    0 15px 28px rgba(28,72,91,0.30),
    inset 0 0 26px rgba(152,0,8,0.24);
}
.real-open-sign .display-title {
  margin-top: 15px;
  font-size: clamp(5.65rem, 7.7vw, 8.2rem);
}
.real-open-sign .open-mini {
  align-self: center;
  margin-top: 15px;
  max-width: 96%;
  text-align: center;
}

/* Consignment notice: clear that PRECEDENCE sells on the owner's behalf. */
.classified-flyer .classified-banner {
  background: #174b32;
  color: #fff9df;
  letter-spacing: 0.105em;
}
.classified-flyer .classified-note {
  font-weight: 700;
  line-height: 1.28;
}

/* Socials becomes a legible late-90s / early-2000s rave handbill. */
.social-poster {
  isolation: isolate;
  border: 3px solid #10110f;
  background:
    linear-gradient(135deg, transparent 0 64%, rgba(255,35,119,0.96) 64% 70%, transparent 70%),
    linear-gradient(35deg, transparent 0 72%, rgba(30,225,232,0.92) 72% 79%, transparent 79%),
    radial-gradient(circle at 78% 78%, transparent 0 44px, rgba(239,244,66,0.95) 45px 49px, transparent 50px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 8px),
    #10131d;
  color: #fff;
}
.social-poster::before {
  content: "FITS • FINDS • DROPS • PRECEDENCE •";
  position: absolute;
  z-index: 0;
  left: -56px;
  bottom: 43%;
  width: 190px;
  color: rgba(255,255,255,0.72);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  transform: rotate(-90deg);
}
.social-poster .social-kicker {
  position: relative;
  z-index: 4;
  order: -3;
  align-self: flex-start;
  padding: 4px 7px 3px;
  background: #ff2377;
  color: #fff;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.56rem, 0.66vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.social-poster .social-title {
  position: relative;
  z-index: 4;
  order: -2;
  align-self: stretch;
  display: block;
  margin: 2px 0 6px;
  padding: 7px 10px 5px;
  border: 2px solid #10110f;
  background: #eff442;
  color: #10110f;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.45rem, 3.8vw, 4.15rem);
  font-style: normal;
  line-height: 0.88;
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow: none;
  transform: rotate(-0.8deg);
  box-shadow: 5px 5px 0 #ff2377;
}
.social-poster .social-photo {
  position: relative;
  z-index: 3;
  margin-top: 5px;
}
.social-poster .brand-social-grid {
  width: min(94%, 300px);
  gap: clamp(10px, 1vw, 15px);
}
.social-poster .brand-social-icon {
  width: clamp(72px, 5.8vw, 92px);
  height: clamp(72px, 5.8vw, 92px);
  border: 3px solid #fff;
  border-radius: 10px;
  background: #fff;
  box-shadow: 5px 5px 0 #090a0d;
}
.social-poster .hover-footer {
  z-index: 8;
}

/* Tablet keeps the same top-row relationship after the HTML reorder. */
@media (min-width: 641px) and (max-width: 980px) {
  body[data-page="home"] .online-card { grid-column: 1; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 2; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 3; grid-row: 1; }
  body[data-page="home"] .profile-card { grid-column: 1; grid-row: 2; }
  body[data-page="home"] .sell-card { grid-column: 2; grid-row: 2; }
  body[data-page="home"] .social-card { grid-column: 3; grid-row: 2; }
  body[data-page="home"] .open-sign-panel {
    width: 108%;
    min-height: 218px;
    transform: translateX(-4%);
  }
  body[data-page="home"] .real-open-sign .display-title {
    font-size: clamp(4.4rem, 8.6vw, 6.1rem);
  }
  body[data-page="home"] .social-poster .social-title {
    font-size: clamp(1.75rem, 4vw, 2.55rem);
  }
}

@media (max-width: 640px) {
  /* Keep the one-screen 2x3 layout, but place the OPEN sign immediately after Shop Online. */
  body[data-page="home"] .online-card { grid-column: 1; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 2; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 1; grid-row: 2; }
  body[data-page="home"] .profile-card { grid-column: 2; grid-row: 2; }
  body[data-page="home"] .sell-card { grid-column: 1; grid-row: 3; }
  body[data-page="home"] .social-card { grid-column: 2; grid-row: 3; }
  body[data-page="home"] .open-sign-panel {
    width: 104%;
    height: calc(100% - 19px);
    min-height: 0;
    transform: translateX(-2%);
  }
  body[data-page="home"] .social-poster .social-kicker {
    padding: 2px 3px 1px;
    font-size: 0.28rem;
  }
  body[data-page="home"] .social-poster .social-title {
    margin: 0 0 2px;
    padding: 3px 3px 2px;
    border-width: 1px;
    font-size: clamp(0.94rem, 5vw, 1.18rem);
    box-shadow: 2px 2px 0 #ff2377;
  }
  body[data-page="home"] .social-poster .brand-social-icon {
    width: clamp(34px, 9.8vw, 44px);
    height: clamp(34px, 9.8vw, 44px);
    border-width: 2px;
    border-radius: 7px;
    box-shadow: 2px 2px 0 #090a0d;
  }
  body[data-page="home"] .social-poster::before { display: none; }
}

/* ========================================================================== */
/* PRECEDENCE V9 — supplied poster artwork, real tape, sell modal, sheet offer */
/* ========================================================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.sell-stuff-button {
  background: #1f6f4a;
  color: #fffdf4;
  box-shadow: 4px 4px 0 #10110f;
}

.sell-stuff-button:hover,
.sell-stuff-button:focus-visible {
  background: #f1cf58;
  color: #10110f;
}

/* The supplied poster art becomes the actual clickable object. */
body[data-page="home"] .poster-image-card {
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: visible !important;
  color: #10110f;
}

body[data-page="home"] .poster-image-card::before,
body[data-page="home"] .poster-image-card::after {
  display: none !important;
}

body[data-page="home"] .poster-art {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 10px rgba(33, 72, 91, 0.20))
    drop-shadow(0 3px 1px rgba(20, 34, 40, 0.12));
  transform-origin: 50% 50%;
  transition: filter 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}

body[data-page="home"] .poster-image-card:hover .poster-art,
body[data-page="home"] .poster-image-card:focus-visible .poster-art {
  filter:
    drop-shadow(0 17px 15px rgba(33, 72, 91, 0.26))
    drop-shadow(0 4px 1px rgba(20, 34, 40, 0.14));
  transform: scale(1.018);
}

body[data-page="home"] .shop-in-person-art .poster-art {
  transform: rotate(0.45deg);
}

body[data-page="home"] .request-poster-card .poster-art {
  transform: rotate(-0.55deg);
}

body[data-page="home"] .socials-art-card .poster-art {
  transform: rotate(0.7deg);
}

body[data-page="home"] .shop-in-person-art:hover .poster-art,
body[data-page="home"] .shop-in-person-art:focus-visible .poster-art,
body[data-page="home"] .request-poster-card:hover .poster-art,
body[data-page="home"] .request-poster-card:focus-visible .poster-art,
body[data-page="home"] .socials-art-card:hover .poster-art,
body[data-page="home"] .socials-art-card:focus-visible .poster-art {
  transform: scale(1.018) rotate(0deg);
}

/* Actual uploaded tape asset. */
.real-tape {
  position: absolute;
  z-index: 35;
  display: block;
  width: clamp(82px, 8.5vw, 132px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.88;
  filter:
    drop-shadow(0 2px 2px rgba(37, 56, 64, 0.26))
    contrast(1.08);
  mix-blend-mode: normal;
}

.tape-online-tl { top: -14px; left: -30px; transform: rotate(-27deg); }
.tape-online-tr { top: -16px; right: -32px; transform: rotate(28deg); }
.tape-online-bl { bottom: -15px; left: -31px; transform: rotate(26deg); }
.tape-online-br { right: -32px; bottom: -16px; transform: rotate(-28deg); }

.tape-diagonal-left { top: -12px; left: 8%; transform: rotate(-19deg); }
.tape-diagonal-right { top: -12px; right: 7%; transform: rotate(18deg); }
.tape-centered { top: -16px; left: 50%; width: clamp(104px, 10vw, 158px); transform: translateX(-50%) rotate(-1.5deg); }
.tape-social-left { top: -14px; left: 5%; transform: rotate(-16deg); }
.tape-social-right { right: 4%; bottom: -13px; transform: rotate(-14deg); }
.tape-sell-left { top: -14px; left: 6%; transform: rotate(-18deg); }
.tape-sell-right { top: -13px; right: 7%; transform: rotate(16deg); }

/* Destination label remains readable over detailed raster posters. */
.poster-hover-label {
  position: absolute;
  z-index: 45;
  left: 50%;
  bottom: 10px;
  max-width: calc(100% - 24px);
  padding: 6px 10px 5px;
  border: 2px solid #10110f;
  background: rgba(255, 250, 229, 0.94);
  color: #10110f;
  box-shadow: 3px 3px 0 rgba(16,17,15,0.88);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.58rem, 0.74vw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-0.4deg);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}

.poster-image-card:hover .poster-hover-label,
.poster-image-card:focus-visible .poster-hover-label,
.open-image-card:hover .poster-hover-label,
.open-image-card:focus-visible .poster-hover-label,
.consignment-poster-card:hover .poster-hover-label,
.consignment-poster-card:focus-visible .poster-hover-label {
  background: #ffe353;
  box-shadow: 5px 5px 0 #10110f;
  transform: translate(-50%, -3px) rotate(-0.8deg);
}

/* Supplied OPEN sign artwork, visibly suspended from the glass. */
body[data-page="home"] .open-image-card {
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 50px 0 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: visible !important;
}

body[data-page="home"] .open-image-card::before,
body[data-page="home"] .open-image-card::after {
  display: none !important;
}

.open-sign-art {
  display: block;
  width: 112%;
  height: auto;
  max-height: calc(100% - 25px);
  object-fit: contain;
  filter: drop-shadow(0 14px 12px rgba(29, 69, 87, 0.28));
  transform: rotate(-0.3deg);
  transition: filter 220ms ease, transform 240ms ease;
}

.open-image-card:hover .open-sign-art,
.open-image-card:focus-visible .open-sign-art {
  filter: drop-shadow(0 19px 15px rgba(29, 69, 87, 0.34)) brightness(1.035);
  transform: translateY(-3px) rotate(0deg) scale(1.012);
}

.open-image-card .open-suction {
  top: 1px;
  z-index: 40;
}

.open-image-card .suction-left { left: 24%; }
.open-image-card .suction-right { right: 24%; }

.open-image-card .open-chain {
  display: block !important;
  top: 35px;
  z-index: 30;
  width: 4px;
  height: 45px;
}

.open-image-card .left-chain { left: calc(24% + 16px); }
.open-image-card .right-chain { right: calc(24% + 16px); }
.open-hover-label { bottom: 10px; }

/* Sell Stuff remains a homepage object but opens information instead of a page. */
body[data-page="home"] .consignment-poster-card {
  appearance: none;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(24px, 2.3vw, 36px) clamp(20px, 2.2vw, 34px) clamp(44px, 4vw, 58px) !important;
  border: 3px solid #15130f !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, transparent 0 62%, rgba(196,35,28,0.92) 62% 65%, transparent 65%),
    repeating-linear-gradient(0deg, rgba(22,20,16,0.035) 0 2px, transparent 2px 7px),
    #efe2c6 !important;
  color: #15130f !important;
  box-shadow: 0 11px 12px rgba(35, 69, 85, 0.22) !important;
  clip-path: polygon(0 1%, 8% 0, 16% 1%, 25% 0, 35% 1%, 46% 0, 57% 1%, 68% 0, 79% 1%, 90% 0, 100% 1%, 100% 98%, 92% 100%, 84% 98.5%, 75% 100%, 66% 98.5%, 57% 100%, 48% 98.5%, 38% 100%, 28% 98.5%, 18% 100%, 8% 98.5%, 0 100%) !important;
  cursor: pointer;
  text-align: left;
}

body[data-page="home"] .consignment-poster-card::before {
  content: "CONSIGNMENT NOTICE";
  position: absolute;
  top: 18px;
  right: -38px;
  padding: 4px 42px;
  background: #1f6f4a;
  color: #fff8df;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  transform: rotate(36deg);
}

body[data-page="home"] .consignment-poster-card::after { display: none !important; }

.consign-kicker {
  align-self: flex-start;
  padding: 4px 7px 3px;
  background: #c52e24;
  color: #fff6dc;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.58rem, 0.7vw, 0.76rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.consignment-poster-card .display-title {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.2rem, 5vw, 5.35rem);
  line-height: 0.78;
  letter-spacing: 0.01em;
}

.consign-main {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.05;
}

.consign-list,
.consign-note {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.consign-list {
  padding-top: 9px;
  border-top: 2px solid #15130f;
  font-size: clamp(0.56rem, 0.72vw, 0.76rem);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.consign-note {
  font-size: clamp(0.52rem, 0.68vw, 0.72rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: rgba(21,19,15,0.68);
}

/* Sheet-connected offer form status. */
.offer-status {
  min-height: 1.2em;
  margin: 0;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.3;
}
.offer-status.is-error { color: #b51e1a; }
.offer-status.is-success { color: #17693f; }

/* Sell Stuff information modal. */
.sell-modal[hidden] { display: none !important; }
.sell-modal {
  position: fixed;
  inset: 0;
  z-index: 121;
  display: grid;
  place-items: center;
  padding: 18px;
}
.sell-modal .offer-modal-backdrop { position: absolute; inset: 0; }
.sell-dialog {
  position: relative;
  z-index: 1;
  width: min(850px, 100%);
  max-height: min(92svh, 820px);
  overflow: auto;
  padding: clamp(20px, 3vw, 34px);
  border: 3px solid #10110f;
  background:
    repeating-linear-gradient(0deg, rgba(16,17,15,0.035) 0 2px, transparent 2px 20px),
    #fff8e9;
  box-shadow: 13px 13px 0 rgba(16,17,15,0.94);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}
.sell-modal.is-open .sell-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sell-dialog h2 {
  max-width: 720px;
  padding-right: 42px;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
}
.sell-modal-lede {
  max-width: 760px;
  margin: 12px 0 20px;
  font-size: 1rem;
  line-height: 1.48;
}
.sell-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr);
  gap: 16px;
}
.sell-modal-panel {
  padding: 16px;
  border: 2px solid #10110f;
  background: rgba(255,255,255,0.62);
}
.sell-modal-panel h3 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
}
.sell-modal-panel ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.4;
}
.sell-modal-panel li + li { margin-top: 7px; }
.commission-mini-table {
  display: grid;
  border-top: 2px solid #10110f;
  border-left: 2px solid #10110f;
}
.commission-mini-table [role="row"] {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.9fr;
}
.commission-mini-table [role="row"] span {
  padding: 9px 8px;
  border-right: 2px solid #10110f;
  border-bottom: 2px solid #10110f;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
}
.commission-mini-table [role="row"]:first-child span {
  background: #10110f;
  color: #fff8e9;
  text-transform: uppercase;
}
.sell-modal-fineprint {
  margin: 10px 0 0;
  color: rgba(16,17,15,0.68);
  font-size: 0.78rem;
  line-height: 1.35;
}
.sell-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.sell-contact-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 2px solid #10110f;
  color: #10110f;
  box-shadow: 5px 5px 0 #10110f;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}
.email-sell-button { background: #f1cf58; }
.instagram-sell-button { background: #d8b7e9; }
.sell-contact-button:hover,
.sell-contact-button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #10110f;
  outline: none;
}

/* Preserve one-screen homepage layout with the supplied portrait artwork. */
@media (min-width: 981px) {
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 2.3vw, 38px) clamp(24px, 2.2vw, 36px);
    min-height: calc(100svh - var(--header-height) - 36px);
    height: calc(100svh - var(--header-height) - 36px);
    padding: clamp(43px, 4.1vh, 58px) clamp(62px, 5.5vw, 96px) clamp(36px, 3.5vh, 50px);
  }
  body[data-page="home"] .online-card { grid-column: 1 / 6; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 6 / 11; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 11 / 16; grid-row: 1; }
  body[data-page="home"] .profile-card { grid-column: 1 / 6; grid-row: 2; }
  body[data-page="home"] .sell-card { grid-column: 6 / 11; grid-row: 2; }
  body[data-page="home"] .social-card { grid-column: 11 / 16; grid-row: 2; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .header-actions { gap: 7px; }
  .header-actions .header-offer-button { padding-inline: 10px; }
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  body[data-page="home"] .poster-art { max-height: 100%; }
  .open-sign-art { width: 108%; }
  .poster-hover-label { font-size: 0.55rem; padding: 4px 6px 3px; }
  .sell-modal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 740px) {
  .site-header {
    row-gap: 7px;
  }
  .header-actions {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .header-actions .header-offer-button {
    width: auto;
    min-height: 35px;
    padding: 7px 8px;
    font-size: 0.66rem;
  }
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
    height: calc(100svh - var(--header-height) - 10px);
    min-height: calc(100svh - var(--header-height) - 10px);
    padding: 24px 12px 16px;
  }
  body[data-page="home"] .online-card { grid-column: 1; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 2; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 1; grid-row: 2; }
  body[data-page="home"] .profile-card { grid-column: 2; grid-row: 2; }
  body[data-page="home"] .sell-card { grid-column: 1; grid-row: 3; }
  body[data-page="home"] .social-card { grid-column: 2; grid-row: 3; }

  body[data-page="home"] .online-card {
    padding: 12px 9px 24px !important;
    gap: 4px;
  }
  body[data-page="home"] .online-card .display-title {
    font-size: clamp(1.45rem, 8.5vw, 2rem);
    line-height: 0.84;
  }
  body[data-page="home"] .online-card .display-subtitle,
  body[data-page="home"] .poster-stamp,
  body[data-page="home"] .poster-fineprint { font-size: 0.32rem; }
  body[data-page="home"] .online-card .card-corner-meta { font-size: 0.28rem; }
  body[data-page="home"] .marketplace-row {
    min-height: 42px;
    padding: 4px 0;
    gap: 2px;
  }
  body[data-page="home"] .marketplace-row .mini-logo { height: 30px; }

  body[data-page="home"] .open-image-card { padding: 22px 0 12px !important; }
  .open-sign-art { width: 108%; max-height: calc(100% - 8px); }
  .open-image-card .open-suction { width: 18px; height: 18px; }
  .open-image-card .open-suction::after { bottom: -5px; width: 6px; height: 7px; border-width: 2px; }
  .open-image-card .open-chain { top: 18px; width: 2px; height: 18px; }
  .open-image-card .left-chain { left: calc(24% + 8px); }
  .open-image-card .right-chain { right: calc(24% + 8px); }

  .real-tape { width: 54px; }
  .tape-online-tl { top: -7px; left: -18px; }
  .tape-online-tr { top: -7px; right: -18px; }
  .tape-online-bl { bottom: -7px; left: -18px; }
  .tape-online-br { right: -18px; bottom: -7px; }
  .tape-diagonal-left { top: -6px; left: 2%; }
  .tape-diagonal-right { top: -6px; right: 1%; }
  .tape-centered { top: -8px; width: 68px; }
  .tape-social-left { top: -7px; left: 0; }
  .tape-social-right { right: -1%; bottom: -7px; }
  .tape-sell-left { top: -7px; left: 1%; }
  .tape-sell-right { top: -7px; right: 1%; }

  .poster-hover-label {
    bottom: 4px;
    max-width: calc(100% - 10px);
    padding: 3px 4px 2px;
    border-width: 1px;
    box-shadow: 2px 2px 0 #10110f;
    font-size: 0.3rem;
    letter-spacing: 0.045em;
  }
  .open-hover-label { bottom: 1px; }

  body[data-page="home"] .consignment-poster-card {
    gap: 3px;
    padding: 10px 8px 24px !important;
    border-width: 2px !important;
  }
  body[data-page="home"] .consignment-poster-card::before { display: none; }
  .consign-kicker { padding: 2px 3px 1px; font-size: 0.3rem; }
  .consignment-poster-card .display-title { font-size: clamp(1.6rem, 9vw, 2.1rem); }
  .consign-main { font-size: 0.54rem; }
  .consign-list { padding-top: 4px; border-width: 1px; font-size: 0.28rem; }
  .consign-note { display: none; }

  .sell-modal { padding: 10px; }
  .sell-dialog { padding: 18px 13px 14px; box-shadow: 7px 7px 0 rgba(16,17,15,0.94); }
  .sell-dialog h2 { font-size: 2rem; }
  .sell-modal-grid { grid-template-columns: 1fr; }
  .sell-modal-panel { padding: 12px; }
  .sell-modal-panel h3 { font-size: 1.25rem; }
  .sell-modal-panel ol { font-size: 0.86rem; }
  .commission-mini-table [role="row"] span { padding: 7px 5px; font-size: 0.66rem; }
  .sell-contact-actions { display: grid; grid-template-columns: 1fr; }
}

/* V9.1 final fit: preserve breathing room and guarantee a no-scroll homepage. */
body[data-page="home"] { overflow: hidden; }
body[data-page="home"] .poster-image-card .poster-art {
  height: 94%;
  max-height: 94%;
}
@media (max-width: 740px) {
  body[data-page="home"] .poster-image-card .poster-art {
    height: 92%;
    max-height: 92%;
  }
}

/* V9.2: keep both action buttons visible in the compact phone header. */
@media (max-width: 640px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .header-actions {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    width: auto;
    display: flex;
    justify-self: end;
    gap: 5px;
  }
  .header-actions .header-offer-button {
    grid-column: auto;
    grid-row: auto;
    order: initial;
    width: auto;
    min-height: 31px;
    padding: 6px 7px;
    font-size: 0.55rem;
    white-space: nowrap;
  }
}

/* ===== V10: supplied Shop Online poster + five-object homepage ===== */
body[data-page="home"] .shop-online-art {
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  padding: 0 !important;
}
body[data-page="home"] .shop-online-art::after { display: none !important; }
body[data-page="home"] .shop-online-art .poster-art {
  width: auto;
  height: 94%;
  max-width: 100%;
  max-height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(35,69,85,0.24));
}
body[data-page="home"] .shop-online-art:hover .poster-art,
body[data-page="home"] .shop-online-art:focus-visible .poster-art {
  filter: drop-shadow(0 17px 13px rgba(35,69,85,0.31));
}

/* Keep four-corner tape on the supplied Shop Online print. */
body[data-page="home"] .shop-online-art .tape-online-tl { top: -8px; left: -18px; transform: rotate(-27deg); }
body[data-page="home"] .shop-online-art .tape-online-tr { top: -8px; right: -18px; transform: rotate(25deg); }
body[data-page="home"] .shop-online-art .tape-online-bl { bottom: -8px; left: -18px; transform: rotate(24deg); }
body[data-page="home"] .shop-online-art .tape-online-br { right: -18px; bottom: -8px; transform: rotate(-24deg); }

/* The glass now holds five objects: three across the top, two centered below. */
@media (min-width: 981px) {
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  body[data-page="home"] .online-card { grid-column: 1 / 6; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 6 / 11; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 11 / 16; grid-row: 1; }
  body[data-page="home"] .profile-card { grid-column: 2 / 7; grid-row: 2; }
  body[data-page="home"] .social-card { grid-column: 10 / 15; grid-row: 2; }
}

@media (min-width: 641px) and (max-width: 980px) {
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  body[data-page="home"] .online-card { grid-column: 1 / 3; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 3 / 5; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 5 / 7; grid-row: 1; }
  body[data-page="home"] .profile-card { grid-column: 1 / 4; grid-row: 2; }
  body[data-page="home"] .social-card { grid-column: 4 / 7; grid-row: 2; }
}

@media (max-width: 740px) {
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  body[data-page="home"] .online-card { grid-column: 1; grid-row: 1; }
  body[data-page="home"] .home-about-card { grid-column: 2; grid-row: 1; }
  body[data-page="home"] .local-card { grid-column: 1; grid-row: 2; }
  body[data-page="home"] .profile-card { grid-column: 2; grid-row: 2; }
  body[data-page="home"] .social-card { grid-column: 1 / 3; grid-row: 3; width: min(52%, 250px); justify-self: center; }
  body[data-page="home"] .shop-online-art .poster-art { height: 92%; max-height: 92%; }
  body[data-page="home"] .shop-online-art .tape-online-tl { top: -6px; left: -15px; }
  body[data-page="home"] .shop-online-art .tape-online-tr { top: -6px; right: -15px; }
  body[data-page="home"] .shop-online-art .tape-online-bl { bottom: -6px; left: -15px; }
  body[data-page="home"] .shop-online-art .tape-online-br { right: -15px; bottom: -6px; }
}

/* ===== V11: labels under posters, tape anchored to paper, logo-only header ===== */

/* Logo should stand alone without the extra location copy. */
.brand-lockup {
  gap: 0 !important;
  flex: 0 0 auto;
}
.brand-frame {
  width: clamp(190px, 20vw, 285px);
}

/* Each object gets a physical poster mount. Labels live below the print, not over it. */
body[data-page="home"] .poster-image-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.75vh, 10px);
}

body[data-page="home"] .poster-mount {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  align-self: center;
  width: auto;
  height: calc(100% - 34px);
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
}

body[data-page="home"] .poster-mount .poster-art {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

body[data-page="home"] .poster-hover-label {
  position: static;
  left: auto;
  bottom: auto;
  flex: 0 0 auto;
  max-width: 94%;
  margin: 0;
  padding: 5px 9px 4px;
  transform: rotate(-0.35deg);
  white-space: nowrap;
}

body[data-page="home"] .poster-image-card:hover .poster-hover-label,
body[data-page="home"] .poster-image-card:focus-visible .poster-hover-label,
body[data-page="home"] .open-image-card:hover .poster-hover-label,
body[data-page="home"] .open-image-card:focus-visible .poster-hover-label {
  transform: translateY(-2px) rotate(-0.7deg);
}

/* Open sign gets its own mount so the hooks attach to the glass and the label stays below. */
body[data-page="home"] .open-image-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.65vh, 9px);
  padding: 0 !important;
}

body[data-page="home"] .open-mount {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding-top: clamp(38px, 4.5vh, 55px);
}

body[data-page="home"] .open-mount .open-sign-art {
  width: 108%;
  max-height: calc(100% - 6px);
}

body[data-page="home"] .open-mount .open-suction {
  top: 0;
}
body[data-page="home"] .open-mount .open-chain {
  top: 34px;
}

body[data-page="home"] .open-hover-label {
  position: static;
  bottom: auto;
}

/* The uploaded tape is now positioned relative to the real paper edge. */
body[data-page="home"] .poster-mount .real-tape {
  width: clamp(68px, 31%, 108px);
  opacity: 0.86;
  filter: drop-shadow(0 2px 2px rgba(37,56,64,0.22)) contrast(1.03);
}

/* Shop Online: two believable strips across the upper corners. */
body[data-page="home"] .poster-mount .tape-online-tl {
  top: -2.5%;
  left: -5%;
  transform: rotate(-7deg);
}
body[data-page="home"] .poster-mount .tape-online-tr {
  top: -2.5%;
  right: -5%;
  transform: rotate(7deg);
}

/* Shop In-Person: two diagonal strips like a concert flyer. */
body[data-page="home"] .poster-mount .tape-diagonal-left {
  top: -2%;
  left: -7%;
  transform: rotate(-18deg);
}
body[data-page="home"] .poster-mount .tape-diagonal-right {
  top: -2%;
  right: -7%;
  transform: rotate(17deg);
}

/* Vintage Profile: one central strip. */
body[data-page="home"] .poster-mount .tape-centered {
  top: -3%;
  left: 50%;
  width: clamp(82px, 40%, 130px);
  transform: translateX(-50%) rotate(-1deg);
}

/* Socials: four smaller corner tabs, like a flyer fully secured to glass. */
body[data-page="home"] .poster-mount .tape-social-tl,
body[data-page="home"] .poster-mount .tape-social-tr,
body[data-page="home"] .poster-mount .tape-social-bl,
body[data-page="home"] .poster-mount .tape-social-br {
  width: clamp(54px, 25%, 82px);
}
body[data-page="home"] .poster-mount .tape-social-tl {
  top: -1.5%;
  left: -4%;
  transform: rotate(-12deg);
}
body[data-page="home"] .poster-mount .tape-social-tr {
  top: -1.5%;
  right: -4%;
  transform: rotate(12deg);
}
body[data-page="home"] .poster-mount .tape-social-bl {
  left: -4%;
  bottom: -1.5%;
  transform: rotate(11deg);
}
body[data-page="home"] .poster-mount .tape-social-br {
  right: -4%;
  bottom: -1.5%;
  transform: rotate(-11deg);
}

@media (max-width: 740px) {
  .brand-frame {
    width: clamp(118px, 33vw, 160px);
  }

  body[data-page="home"] .showcase-grid {
    gap: 10px 9px;
    padding-top: 19px;
    padding-bottom: 12px;
  }

  body[data-page="home"] .poster-image-card,
  body[data-page="home"] .open-image-card {
    gap: 4px;
  }

  body[data-page="home"] .poster-mount {
    height: calc(100% - 22px);
  }

  body[data-page="home"] .poster-hover-label {
    max-width: 96%;
    padding: 3px 5px 2px;
    border-width: 1px;
    box-shadow: 2px 2px 0 rgba(16,17,15,0.86);
    font-size: clamp(0.34rem, 1.75vw, 0.46rem);
    letter-spacing: 0.045em;
  }

  body[data-page="home"] .open-mount {
    padding-top: 22px;
  }
  body[data-page="home"] .open-mount .open-chain {
    top: 18px;
  }
  body[data-page="home"] .open-mount .open-sign-art {
    width: 107%;
  }

  body[data-page="home"] .poster-mount .real-tape {
    width: clamp(44px, 28%, 60px);
  }
  body[data-page="home"] .poster-mount .tape-centered {
    width: clamp(52px, 38%, 72px);
  }
  body[data-page="home"] .poster-mount .tape-social-tl,
  body[data-page="home"] .poster-mount .tape-social-tr,
  body[data-page="home"] .poster-mount .tape-social-bl,
  body[data-page="home"] .poster-mount .tape-social-br {
    width: clamp(36px, 23%, 48px);
  }
}

/* ===== V12: attached OPEN sign, restored Shop menu, larger Second Vibess photo, themed inner pages ===== */

/* OPEN sign: the suspension lines disappear behind the physical sign. */
body[data-page="home"] .open-mount {
  isolation: isolate;
}
body[data-page="home"] .open-mount .open-sign-art {
  position: relative;
  z-index: 5 !important;
}
body[data-page="home"] .open-mount .open-chain {
  z-index: 1 !important;
  height: 48% !important;
  max-height: 86px;
  background:
    repeating-linear-gradient(180deg, rgba(76,87,96,0.95) 0 5px, rgba(222,231,236,0.95) 5px 10px) !important;
  box-shadow: 0 1px 1px rgba(22,41,50,0.24);
}
body[data-page="home"] .open-mount .open-suction {
  z-index: 7 !important;
}

/* Shop dropdown works with mouse, keyboard, and touch. */
.nav-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 90;
}
.nav-shop-trigger {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.nav-shop-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}
.nav-shop-trigger:hover::after,
.nav-shop-trigger:focus-visible::after,
.nav-shop-trigger.is-active::after,
.nav-menu.is-open .nav-shop-trigger::after {
  transform: scaleX(1);
}
.nav-shop-trigger:focus-visible { outline: none; }
.nav-shop-trigger > span {
  font-size: 0.78em;
  transition: transform 160ms ease;
}
.nav-menu.is-open .nav-shop-trigger > span { transform: rotate(180deg); }

.nav-menu .nav-dropdown {
  display: grid !important;
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 110;
  width: max-content;
  min-width: 174px;
  padding: 7px;
  border: 2px solid #10110f;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(31,101,151,0.11) 25px 26px),
    #fff8e9;
  box-shadow: 7px 7px 0 rgba(16,17,15,0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px) rotate(-0.35deg);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}
.nav-menu .nav-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 68px;
  height: 20px;
  background: rgba(239,233,215,0.78);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 2px 2px rgba(35,50,58,0.12);
}
.nav-menu.is-open .nav-dropdown,
.nav-menu:hover .nav-dropdown,
.nav-menu:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) rotate(-0.35deg);
}
.nav-menu .nav-dropdown a {
  display: block;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(16,17,15,0.2);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.nav-menu .nav-dropdown a:last-child { border-bottom: 0; }
.nav-menu .nav-dropdown a:hover,
.nav-menu .nav-dropdown a:focus-visible {
  background: #ffe353;
  color: #10110f;
  outline: none;
}

/* All non-home routes now live inside the same reflected storefront world. */
body:not([data-page="home"]) {
  background: #b8e8fb;
}
body:not([data-page="home"]) main {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(220,247,255,0.48), rgba(117,198,231,0.24) 50%, rgba(235,250,255,0.56)),
    url("assets/city-reflection-cartoon.png") center center / cover fixed no-repeat;
}
body:not([data-page="home"]) main::before {
  content: "";
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 7%, rgba(255,255,255,0.24) 8% 12%, transparent 13% 43%, rgba(255,255,255,0.12) 44% 47%, transparent 48% 75%, rgba(255,255,255,0.13) 76% 79%, transparent 80%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(193,232,247,0.18));
  backdrop-filter: saturate(1.03);
}
body:not([data-page="home"]) .page-view:not(.home-view) {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
body:not([data-page="home"]) .section-band {
  background: transparent !important;
  border-bottom: 0 !important;
}
body:not([data-page="home"]) .page-card,
body:not([data-page="home"]) .profile-app,
body:not([data-page="home"]) .about-intro,
body:not([data-page="home"]) .about-card,
body:not([data-page="home"]) .embed-panel,
body:not([data-page="home"]) .poster-stand-feature,
body:not([data-page="home"]) .shop-column {
  box-shadow:
    9px 9px 0 rgba(16,17,15,0.83),
    0 18px 34px rgba(36,96,122,0.18);
}
body:not([data-page="home"]) .page-card,
body:not([data-page="home"]) .about-card,
body:not([data-page="home"]) .embed-panel,
body:not([data-page="home"]) .poster-stand-feature {
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}
body:not([data-page="home"]) .shop-column,
body:not([data-page="home"]) .social-embeds,
body:not([data-page="home"]) .socials-board,
body:not([data-page="home"]) .about-poster-grid {
  padding: clamp(10px, 1.4vw, 18px);
  border: 2px solid rgba(16,17,15,0.82);
  background: rgba(226,247,255,0.64);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
body:not([data-page="home"]) .shop-entry {
  background:
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(36,105,153,0.10) 26px 27px),
    rgba(255,249,235,0.96);
}
body:not([data-page="home"]) .site-footer {
  background: rgba(16,17,15,0.92);
  backdrop-filter: blur(8px);
}

/* The in-person route gives the stand photo real visual priority. */
@media (min-width: 981px) {
  body[data-page="shop-in-person"] .physical-page-band {
    grid-template-columns: minmax(300px, 0.74fr) minmax(620px, 1.26fr) !important;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
  }
  body[data-page="shop-in-person"] .physical-page-band > .compact-intro {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-page="shop-in-person"] .compact-stand-feature {
    grid-column: 2 !important;
    grid-row: 1 / 3;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(330px, 0.72fr) minmax(230px, 0.48fr);
    gap: 18px;
    padding: 14px;
    background: rgba(255,249,237,0.86);
  }
  body[data-page="shop-in-person"] .physical-column {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    align-self: stretch;
  }
  body[data-page="shop-in-person"] .compact-stand-photo {
    height: 100%;
    min-height: 0;
    padding: 10px 10px 38px;
    transform: rotate(-0.6deg);
  }
  body[data-page="shop-in-person"] .compact-stand-photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center top;
    background: #f8f1e5;
  }
  body[data-page="shop-in-person"] .compact-stand-copy {
    align-self: center;
    padding: 8px 8px 8px 0;
  }
  body[data-page="shop-in-person"] .compact-stand-copy h2 {
    font-size: clamp(2rem, 2.8vw, 3.6rem);
  }
  body[data-page="shop-in-person"] .compact-stock-list {
    font-size: 1rem;
  }
}

/* Profile, social, and about sections get a little more breathing room over the city glass. */
body[data-page="profile"] .profile-band,
body[data-page="socials"] .socials-band,
body[data-page="about"] .about-band {
  padding-top: clamp(24px, 4vw, 52px);
}
body[data-page="profile"] .profile-app {
  background: rgba(255,249,235,0.88);
  border: 2px solid #10110f;
}
body[data-page="about"] .about-intro {
  padding: clamp(20px, 3vw, 38px);
  border: 2px solid #10110f;
  background: rgba(255,249,235,0.90);
}

@media (max-width: 980px) {
  body[data-page="shop-in-person"] .compact-stand-feature {
    grid-column: auto !important;
    grid-row: auto;
    grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1fr);
    padding: 10px;
    background: rgba(255,249,237,0.88);
  }
  body[data-page="shop-in-person"] .compact-stand-photo {
    height: min(42vh, 420px);
    padding: 8px 8px 30px;
  }
  body[data-page="shop-in-person"] .compact-stand-photo img {
    height: 100%;
    object-fit: contain;
  }
}

@media (max-width: 740px) {
  .nav-shop-trigger {
    padding: 3px 0 4px;
  }
  .nav-menu .nav-dropdown {
    position: fixed;
    top: calc(var(--header-height) - 2px);
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    transform: translateY(-8px) rotate(-0.2deg);
  }
  .nav-menu.is-open .nav-dropdown,
  .nav-menu:hover .nav-dropdown,
  .nav-menu:focus-within .nav-dropdown {
    transform: translateY(0) rotate(-0.2deg);
  }
  .nav-menu .nav-dropdown a {
    padding: 11px 12px;
    font-size: 0.72rem;
  }
  body[data-page="home"] .open-mount .open-chain {
    height: 43% !important;
    max-height: 54px;
  }
  body:not([data-page="home"]) main {
    background-position: 48% center;
  }
  body:not([data-page="home"]) .section-band {
    padding-left: 9px;
    padding-right: 9px;
  }
  body[data-page="shop-in-person"] .compact-stand-feature {
    grid-template-columns: minmax(138px, 0.82fr) minmax(0, 1fr) !important;
    gap: 8px;
  }
  body[data-page="shop-in-person"] .compact-stand-photo {
    height: 100%;
    min-height: 190px;
    padding: 6px 6px 22px;
  }
  body[data-page="shop-in-person"] .compact-stand-photo img {
    height: 100% !important;
    object-fit: contain !important;
  }
  body[data-page="shop-in-person"] .compact-stand-copy h2 {
    font-size: clamp(1.05rem, 5vw, 1.45rem);
  }
  body[data-page="shop-in-person"] .compact-stock-list {
    font-size: 0.66rem;
  }
}

/* About intro remains fully readable over the reflective city. */
body[data-page="about"] .about-intro,
body[data-page="about"] .about-intro h1,
body[data-page="about"] .about-intro p,
body[data-page="about"] .about-intro .eyebrow {
  color: #171711 !important;
  opacity: 1 !important;
}
body[data-page="about"] .about-intro .eyebrow {
  color: #b32117 !important;
}
body[data-page="about"] .about-intro h1 {
  text-shadow: 3px 3px 0 rgba(224,179,62,0.72);
}

/* Hidden routes are initialized off-screen; do not leave their reveal cards transparent after navigation. */
body:not([data-page="home"]) .reveal-ready,
body:not([data-page="home"]) .reveal-ready.is-revealed {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ===== V13: Vintage Profile modal ===== */
.request-poster-card {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.profile-modal[hidden] { display: none !important; }
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 126;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 22px);
}
.profile-modal .offer-modal-backdrop {
  position: absolute;
  inset: 0;
}
.profile-dialog {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  max-height: min(92svh, 820px);
  overflow: auto;
  padding: clamp(18px, 2.4vw, 30px);
  border: 2px solid #10110f;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.84), rgba(236,249,255,0.76)),
    url("assets/city-reflection-cartoon.png") center / cover;
  box-shadow: 14px 14px 0 rgba(16,16,14,0.92);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}
.profile-modal.is-open .profile-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.profile-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(223,246,255,0.54);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}
.profile-modal-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.72fr);
  align-items: end;
  gap: 20px;
  margin: 0 42px 18px 0;
  padding: 16px 18px;
  border: 2px solid #10110f;
  background:
    repeating-linear-gradient(0deg, rgba(16,16,14,0.055) 0 2px, transparent 2px 18px),
    #fff8e9;
  box-shadow: 7px 7px 0 rgba(16,16,14,0.88);
}
.profile-modal-heading h2 {
  font-size: clamp(2.15rem, 4.3vw, 4.5rem);
}
.profile-modal-heading > p {
  margin: 0;
  color: rgba(16,16,14,0.72);
  line-height: 1.45;
}
.profile-modal-app {
  min-height: 0;
  border: 2px solid #10110f;
  box-shadow: 9px 9px 0 rgba(16,16,14,0.9);
  background: rgba(255,248,233,0.96);
}
.profile-modal-app .profile-progress {
  background:
    repeating-linear-gradient(0deg, rgba(16,16,14,0.045) 0 2px, transparent 2px 18px),
    #f1cf58;
}
.profile-modal-app .profile-form {
  background: rgba(255,253,247,0.97);
}
.profile-modal-app .step-panel {
  min-height: 260px;
}

@media (max-width: 780px) {
  .profile-modal {
    padding: 8px;
  }
  .profile-dialog {
    max-height: 96svh;
    padding: 14px;
    box-shadow: 7px 7px 0 rgba(16,16,14,0.92);
  }
  .profile-modal-heading {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 38px 12px 0;
    padding: 13px;
    box-shadow: 5px 5px 0 rgba(16,16,14,0.88);
  }
  .profile-modal-heading h2 {
    font-size: clamp(1.65rem, 8.5vw, 2.55rem);
  }
  .profile-modal-heading > p {
    font-size: 0.84rem;
  }
  .profile-modal-app {
    grid-template-columns: 1fr;
    box-shadow: 5px 5px 0 rgba(16,16,14,0.9);
  }
  .profile-modal-app .profile-progress {
    border-right: 0;
    border-bottom: 2px solid #10110f;
    padding: 10px;
  }
  .profile-modal-app .profile-progress ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding-top: 8px;
  }
  .profile-modal-app .profile-progress li {
    min-width: 0;
    padding: 6px 3px;
    overflow: hidden;
    font-size: 0;
    text-align: center;
  }
  .profile-modal-app .profile-progress li::first-letter {
    font-size: 0.72rem;
  }
  .profile-modal-app .profile-form {
    padding: 13px;
  }
  .profile-modal-app .step-panel {
    min-height: 0;
  }
}

/* ======================================================================
   V14 — cohesive inner-page showroom system
   ====================================================================== */

/* Shared city-glass stage used by every interior route. */
.inner-page-stage {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(14px, 2.2vw, 28px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.inner-page-stage::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.1vw, 16px);
  z-index: -1;
  border: 1px solid rgba(36, 83, 102, 0.46);
  border-radius: 20px;
  background:
    linear-gradient(112deg, rgba(255,255,255,0.32), transparent 20% 72%, rgba(255,255,255,0.14)),
    rgba(202, 239, 252, 0.23);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.20),
    inset 0 0 64px rgba(35,128,164,0.13),
    0 14px 30px rgba(31,72,91,0.13);
  backdrop-filter: blur(2px) saturate(1.04);
  -webkit-backdrop-filter: blur(2px) saturate(1.04);
}

.inner-page-window {
  width: min(1400px, 100%);
  height: min(790px, calc(100svh - var(--header-height) - clamp(28px, 4vw, 56px)));
  min-height: 560px;
  padding: clamp(14px, 1.5vw, 22px);
  border: 2px solid rgba(16,17,15,0.82);
  background: rgba(223, 246, 253, 0.60);
  box-shadow:
    10px 10px 0 rgba(16,17,15,0.78),
    inset 0 0 0 4px rgba(255,255,255,0.24);
  backdrop-filter: blur(11px) saturate(1.08);
  -webkit-backdrop-filter: blur(11px) saturate(1.08);
}

.inner-real-tape {
  position: absolute;
  z-index: 5;
  width: clamp(92px, 8vw, 142px);
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(28,45,52,0.18));
  opacity: 0.88;
}

.inner-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ----------------------------------------------------------------------
   SHOP ONLINE — one focused catalog wall rather than two floating boxes
   ---------------------------------------------------------------------- */
body[data-page="shop-online"],
body[data-page="shop-in-person"] {
  overflow: hidden;
}
body[data-page="shop-online"] .site-footer,
body[data-page="shop-in-person"] .site-footer {
  display: none;
}
body[data-page="shop-online"] main,
body[data-page="shop-in-person"] main,
body[data-page="shop-online"] .page-view,
body[data-page="shop-in-person"] .page-view {
  height: calc(100svh - var(--header-height));
  min-height: 0;
  overflow: hidden;
}

.shop-online-v14 {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 30px);
  height: 100%;
  min-height: 0;
}

.shop-route-poster {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 430px);
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  filter: drop-shadow(12px 15px 0 rgba(14,31,41,0.38));
  transform: rotate(-0.7deg);
}

.shop-route-poster img:first-child {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tape-route-left {
  top: 1.2%;
  left: 7%;
  transform: rotate(-8deg);
}
.tape-route-right {
  top: 1.8%;
  right: 6%;
  transform: rotate(7deg);
}

.marketplace-hub {
  min-width: 0;
  height: 100%;
  padding: clamp(20px, 2.1vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 22px);
  border: 3px solid #11130f;
  background:
    linear-gradient(90deg, transparent 0 5.5%, rgba(211,48,39,0.22) 5.5% 5.8%, transparent 5.8%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(42,95,145,0.11) 31px 32px),
    radial-gradient(circle at 84% 9%, rgba(255,255,255,0.78), transparent 24%),
    rgba(255,249,236,0.96);
  box-shadow: 9px 10px 0 rgba(16,17,15,0.86);
  overflow: hidden;
}

.marketplace-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
  gap: 20px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 3px solid #11130f;
}
.marketplace-heading .eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 -13px;
  color: #145ab2;
}
.marketplace-heading h1 {
  max-width: 650px;
  font-size: clamp(2.45rem, 4.1vw, 4.8rem);
  line-height: 0.88;
}
.marketplace-heading > p:last-child {
  margin: 0;
  color: rgba(17,19,15,0.68);
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.42;
}

.marketplace-grid-v14 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: 12px;
}

.marketplace-grid-v14 .shop-entry {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: clamp(12px, 1.3vw, 18px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 7px;
  border: 2px solid #11130f;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,0.72), transparent 28%),
    rgba(248,241,224,0.96);
  color: #11130f;
  box-shadow: 5px 5px 0 rgba(16,17,15,0.78);
  overflow: hidden;
}
.marketplace-grid-v14 .shop-entry::after {
  content: "↗";
  position: absolute;
  right: 12px;
  top: 10px;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: 900;
}
.marketplace-grid-v14 .shop-entry:hover,
.marketplace-grid-v14 .shop-entry:focus-visible {
  transform: translateY(-3px) rotate(-0.25deg);
  outline: 4px solid #dfff00;
  outline-offset: -5px;
  background: #fff8e8;
}
.marketplace-grid-v14 .shop-mark {
  width: clamp(50px, 4.8vw, 68px);
  margin: 0;
  border-width: 2px;
  background: #fffaf0;
}
.marketplace-grid-v14 .status-label {
  align-self: start;
  justify-self: start;
  padding: 4px 7px;
  border: 1px solid #11130f;
  background: #e8c94e;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.54rem, 0.64vw, 0.69rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.marketplace-grid-v14 .shop-entry strong {
  align-self: end;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  line-height: 0.95;
}
.marketplace-grid-v14 .shop-entry b {
  align-self: end;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.66rem, 0.76vw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.marketplace-grid-v14 .is-main-catalog {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(18px, 2vw, 32px);
  align-items: center;
  padding: clamp(18px, 2vw, 28px);
  background:
    linear-gradient(115deg, rgba(28,91,184,0.12), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(31,98,183,0.06) 22px 23px),
    #fff8e6;
}
.marketplace-grid-v14 .is-main-catalog::before {
  content: "MAIN CATALOG";
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 4px 7px;
  background: #145ab2;
  color: #fff;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}
.marketplace-grid-v14 .is-main-catalog .shop-mark {
  grid-row: 1 / 4;
  width: clamp(88px, 8vw, 124px);
}
.marketplace-grid-v14 .is-main-catalog .status-label {
  grid-column: 2;
  align-self: end;
}
.marketplace-grid-v14 .is-main-catalog strong {
  grid-column: 2;
  align-self: center;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
}
.marketplace-grid-v14 .is-main-catalog b {
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: center;
  padding: 13px 16px;
  border: 2px solid #11130f;
  background: #dfff00;
  box-shadow: 4px 4px 0 #11130f;
  white-space: nowrap;
}

.marketplace-foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding-top: 2px;
}
.marketplace-foot > p {
  max-width: 560px;
  margin: 0;
  color: rgba(17,19,15,0.62);
  font-size: clamp(0.72rem, 0.86vw, 0.88rem);
  line-height: 1.35;
}

/* ----------------------------------------------------------------------
   SHOP IN-PERSON — photo and location now live in one purposeful display
   ---------------------------------------------------------------------- */
.inperson-v14 {
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(430px, 1.12fr);
  gap: clamp(20px, 2.2vw, 34px);
  height: 100%;
  min-height: 0;
}

.stand-hero-photo {
  position: relative;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(12px, 1.2vw, 18px) clamp(12px, 1.2vw, 18px) clamp(42px, 4vw, 58px);
  display: grid;
  place-items: center;
  border: 3px solid #11130f;
  background: #fff8e8;
  box-shadow: 10px 12px 0 rgba(16,17,15,0.84);
  transform: rotate(-0.45deg);
  overflow: visible;
}
.stand-hero-photo > img:first-child {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: #efe4cf;
  border: 2px solid #11130f;
}
.stand-hero-photo figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.7rem, 0.85vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.stand-photo-tape {
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

.stand-details-poster {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: clamp(24px, 2.8vw, 42px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 22px);
  border: 4px solid #11130f;
  background:
    linear-gradient(155deg, transparent 0 67%, rgba(193,39,30,0.10) 67% 73%, transparent 73%),
    repeating-linear-gradient(180deg, rgba(17,19,15,0.035) 0 1px, transparent 1px 5px),
    #f5e7c9;
  box-shadow: 10px 12px 0 rgba(16,17,15,0.86);
  overflow: hidden;
}
.stand-details-poster::before {
  content: "LOCAL DIG";
  position: absolute;
  right: -48px;
  top: 28px;
  width: 190px;
  padding: 7px 0;
  background: #c72b21;
  color: #fff7df;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-align: center;
  transform: rotate(35deg);
}
.stand-details-poster .eyebrow { color: #c72b21; }
.stand-details-poster h1 {
  max-width: 760px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.2rem, 5vw, 6rem);
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.stand-lede {
  max-width: 720px;
  margin: 0;
  color: rgba(17,19,15,0.72);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.45;
}

.stand-stock-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stand-stock-grid span {
  min-height: 92px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid #11130f;
  background: rgba(255,250,237,0.86);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.75rem, 0.95vw, 0.98rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}
.stand-stock-grid span:nth-child(1) { box-shadow: inset 7px 0 0 #e1bd38; }
.stand-stock-grid span:nth-child(2) { box-shadow: inset 7px 0 0 #2e75b8; }
.stand-stock-grid span:nth-child(3) { box-shadow: inset 7px 0 0 #4c9871; }
.stand-stock-grid b {
  color: rgba(17,19,15,0.50);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.location-ticket {
  margin-top: auto;
  padding: clamp(14px, 1.5vw, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 3px solid #11130f;
  background: #11130f;
  color: #fff8e8;
}
.location-ticket > div {
  display: grid;
  gap: 3px;
}
.location-kicker {
  color: #dfff00;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.location-ticket strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2.3vw, 2.65rem);
  line-height: 1;
}
.location-ticket small {
  color: rgba(255,248,232,0.68);
  font-family: "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
}
.location-ticket a {
  flex: 0 0 auto;
  padding: 12px 15px;
  border: 2px solid #fff8e8;
  background: #c72b21;
  color: #fff;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}
.location-ticket a:hover,
.location-ticket a:focus-visible {
  background: #dfff00;
  color: #11130f;
  outline: none;
}

/* ----------------------------------------------------------------------
   SOCIALS — centered quick links, prominent branded buttons, calmer feed
   ---------------------------------------------------------------------- */
.socials-stage,
.about-stage {
  place-items: start center;
  padding-top: clamp(20px, 3vw, 42px);
  padding-bottom: clamp(30px, 4vw, 64px);
}

.socials-hero-v14 {
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.88fr);
  gap: clamp(20px, 2.6vw, 38px);
  align-items: center;
}

.socials-poster-display {
  position: relative;
  width: min(100%, 410px);
  margin: 0 auto;
  filter: drop-shadow(10px 13px 0 rgba(16,17,15,0.55));
  transform: rotate(-0.7deg);
}
.socials-poster-display > img:first-child {
  display: block;
  width: 100%;
}
.social-page-tape-left {
  top: -12px;
  left: 5%;
  transform: rotate(-8deg);
}
.social-page-tape-right {
  top: -10px;
  right: 4%;
  transform: rotate(7deg);
}

.social-quick-panel {
  padding: clamp(26px, 3vw, 46px);
  border: 4px solid #11130f;
  background:
    radial-gradient(circle at 12% 16%, rgba(101,217,223,0.22), transparent 23%),
    radial-gradient(circle at 86% 78%, rgba(143,83,188,0.20), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 8px),
    #11152a;
  color: #f7ecd4;
  box-shadow: 10px 12px 0 rgba(16,17,15,0.80);
  text-align: center;
}
.quick-links-kicker {
  display: inline-flex;
  margin: 0 auto 10px;
  padding: 6px 11px;
  background: #dfff00;
  color: #11130f;
}
.social-quick-panel h1 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.4rem, 6vw, 6.7rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.social-quick-copy {
  max-width: 670px;
  margin: 16px auto 22px;
  color: rgba(247,236,212,0.72);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.45;
}

.social-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.social-quick-grid .shop-entry {
  min-height: 150px;
  padding: 16px 10px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #f7ecd4;
  background: rgba(255,255,255,0.05);
  color: #f7ecd4;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(247,236,212,0.18);
}
.social-quick-grid .shop-entry:hover,
.social-quick-grid .shop-entry:focus-visible {
  transform: translateY(-4px);
  outline: 4px solid #dfff00;
  outline-offset: 2px;
  background: rgba(255,255,255,0.10);
}
.social-quick-grid .shop-mark {
  width: 66px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.social-quick-grid .status-label { display: none; }
.social-quick-grid .shop-entry strong {
  align-self: auto;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.social-quick-grid .shop-entry b {
  align-self: auto;
  font-size: 0.62rem;
  color: rgba(247,236,212,0.68);
}
.social-quick-grid [data-shop-id="youtube"] { background: rgba(215,39,39,0.22); }
.social-quick-grid [data-shop-id="instagram"] { background: linear-gradient(145deg, rgba(253,196,104,0.15), rgba(223,73,150,0.24), rgba(76,104,215,0.18)); }
.social-quick-grid [data-shop-id="x"] { background: rgba(255,255,255,0.08); }
.social-quick-grid [data-shop-id="tiktok"] { background: linear-gradient(145deg, rgba(0,242,234,0.11), rgba(255,0,80,0.14)); }

.social-feed-v14 {
  width: min(1320px, 100%);
  margin-top: clamp(24px, 3vw, 42px);
  padding: clamp(18px, 2.3vw, 32px);
  border: 2px solid #11130f;
  background: rgba(224,247,254,0.70);
  box-shadow: 9px 10px 0 rgba(16,17,15,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.social-feed-heading {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  border-bottom: 3px solid #11130f;
  padding-bottom: 12px;
}
.social-feed-heading h2 {
  font-size: clamp(2.2rem, 3.6vw, 4rem);
}
.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.social-feed-grid .embed-panel {
  min-width: 0;
  margin: 0;
  background: rgba(255,249,236,0.96);
}
.social-feed-grid .embed-panel h2 {
  font-size: clamp(1.45rem, 2vw, 2.15rem);
}
.social-feed-grid .native-embed {
  max-height: 420px;
  overflow: auto;
}

/* ----------------------------------------------------------------------
   ABOUT — one clean manifesto and four purposeful story cards
   ---------------------------------------------------------------------- */
.about-v14 {
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}
.about-manifesto {
  position: relative;
  min-height: 610px;
  padding: clamp(30px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  border: 4px solid #11130f;
  background:
    radial-gradient(circle at 85% 16%, rgba(219,255,0,0.16), transparent 22%),
    linear-gradient(150deg, transparent 0 70%, rgba(197,42,32,0.18) 70% 76%, transparent 76%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px),
    #11130f;
  color: #f5e8c8;
  box-shadow: 10px 12px 0 rgba(16,17,15,0.78);
  overflow: hidden;
}
.about-manifesto::after {
  content: "PRECEDENCE";
  position: absolute;
  right: -72px;
  bottom: 120px;
  color: rgba(245,232,200,0.06);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 7.5rem;
  letter-spacing: 0.03em;
  transform: rotate(-90deg);
  pointer-events: none;
}
.about-manifesto .eyebrow { color: #dfff00; }
.about-manifesto h1 {
  max-width: 650px;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(4rem, 6.2vw, 7rem);
  line-height: 0.80;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.about-manifesto-lede {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(245,232,200,0.76);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.5;
}
.about-manifesto blockquote {
  margin: auto 0 22px;
  padding: 14px 0 14px 18px;
  border-left: 8px solid #c62c22;
  color: #fff8de;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 2.4vw, 2.7rem);
  font-style: italic;
  line-height: 1.05;
}
.about-manifesto .button.ghost {
  border-color: #f5e8c8;
  color: #f5e8c8;
}

.about-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.about-story-card {
  position: relative;
  min-height: 0;
  padding: clamp(22px, 2.3vw, 34px);
  display: flex;
  flex-direction: column;
  border: 3px solid #11130f;
  background: #fff7e7;
  box-shadow: 7px 8px 0 rgba(16,17,15,0.78);
  overflow: hidden;
}
.about-story-card > span {
  align-self: flex-start;
  padding: 5px 7px;
  border: 2px solid #11130f;
  background: #11130f;
  color: #fff8e8;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.about-story-card h2 {
  margin-top: auto;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 0.90;
}
.about-story-card p {
  margin: 14px 0 0;
  color: rgba(17,19,15,0.70) !important;
  font-size: clamp(0.86rem, 0.98vw, 1rem);
  line-height: 1.42;
}
.story-red { box-shadow: inset 9px 0 0 #c62c22, 7px 8px 0 rgba(16,17,15,0.78); }
.story-blue { box-shadow: inset 9px 0 0 #2b6cb8, 7px 8px 0 rgba(16,17,15,0.78); }
.story-yellow { box-shadow: inset 9px 0 0 #e0bd38, 7px 8px 0 rgba(16,17,15,0.78); }
.story-green { box-shadow: inset 9px 0 0 #3f8b65, 7px 8px 0 rgba(16,17,15,0.78); }

.about-local-strip {
  width: min(1320px, 100%);
  margin-top: 22px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 2px solid #11130f;
  background: rgba(255,249,236,0.94);
  box-shadow: 6px 7px 0 rgba(16,17,15,0.72);
}
.about-local-strip strong {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.about-local-strip p {
  margin: 0;
  color: rgba(17,19,15,0.66) !important;
  font-size: 0.84rem;
  line-height: 1.35;
}

/* ----------------------------------------------------------------------
   Responsive inner pages + requested mobile homepage ordering
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .marketplace-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .marketplace-heading .eyebrow { margin-bottom: 0; }
  .marketplace-grid-v14 .is-main-catalog b {
    padding: 10px 12px;
  }
  .socials-hero-v14 {
    grid-template-columns: minmax(220px, 0.35fr) minmax(0, 0.65fr);
  }
  .social-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .social-quick-grid .shop-entry { min-height: 118px; }
}

@media (max-width: 820px) {
  .inner-page-stage {
    padding: 9px;
  }
  .inner-page-window {
    min-height: 0;
    height: calc(100svh - var(--header-height) - 18px);
    padding: 10px;
    box-shadow: 6px 6px 0 rgba(16,17,15,0.78);
  }
  .shop-online-v14 {
    grid-template-columns: minmax(120px, 0.28fr) minmax(0, 0.72fr);
    gap: 12px;
  }
  .marketplace-hub {
    padding: 14px;
    gap: 10px;
    box-shadow: 5px 6px 0 rgba(16,17,15,0.82);
  }
  .marketplace-heading h1 {
    font-size: clamp(1.8rem, 5vw, 3rem);
  }
  .marketplace-heading > p:last-child {
    font-size: 0.74rem;
  }
  .marketplace-grid-v14 {
    gap: 7px;
  }
  .marketplace-grid-v14 .shop-entry {
    padding: 9px;
    box-shadow: 3px 3px 0 rgba(16,17,15,0.72);
  }
  .marketplace-grid-v14 .shop-mark { width: 42px; }
  .marketplace-grid-v14 .shop-entry strong { font-size: 1.15rem; }
  .marketplace-grid-v14 .shop-entry b { font-size: 0.54rem; }
  .marketplace-grid-v14 .status-label { font-size: 0.45rem; padding: 3px 5px; }
  .marketplace-grid-v14 .is-main-catalog .shop-mark { width: 68px; }
  .marketplace-grid-v14 .is-main-catalog strong { font-size: 2rem; }
  .marketplace-grid-v14 .is-main-catalog b { font-size: 0.55rem; padding: 8px; }
  .marketplace-foot > p { font-size: 0.65rem; }
  .marketplace-foot .button { min-height: 34px; padding: 6px 8px; font-size: 0.6rem; }

  .inperson-v14 {
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
    gap: 12px;
  }
  .stand-details-poster {
    padding: 18px;
    gap: 10px;
    box-shadow: 5px 6px 0 rgba(16,17,15,0.82);
  }
  .stand-details-poster h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
  .stand-lede { font-size: 0.74rem; }
  .stand-stock-grid span { min-height: 72px; padding: 9px; font-size: 0.66rem; }
  .location-ticket { padding: 10px; }
  .location-ticket strong { font-size: 1.35rem; }
  .location-ticket a { padding: 9px; font-size: 0.62rem; }
  .stand-details-poster .button { min-height: 34px; padding: 6px 8px; font-size: 0.6rem; }

  .socials-hero-v14,
  .about-v14 {
    grid-template-columns: 1fr;
  }
  .socials-poster-display {
    width: min(260px, 68vw);
  }
  .social-quick-panel { text-align: center; }
  .social-feed-grid { grid-template-columns: 1fr; }
  .about-manifesto { min-height: 480px; }
  .about-story-card { min-height: 250px; }
}

@media (max-width: 640px) {
  /* Requested order: OPEN first row, shops second, profile + socials third. */
  body[data-page="home"] .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 0.64fr) repeat(2, minmax(0, 1fr));
  }
  body[data-page="home"] .home-about-card {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  body[data-page="home"] .online-card {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  body[data-page="home"] .local-card {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  body[data-page="home"] .profile-card {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  body[data-page="home"] .social-card {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
  body[data-page="home"] .home-about-card .open-mount {
    width: min(78%, 330px);
    max-height: 100%;
  }

  .inner-page-stage {
    padding: 5px;
  }
  .inner-page-stage::before { inset: 4px; border-radius: 10px; }
  .inner-page-window {
    height: calc(100svh - var(--header-height) - 10px);
    padding: 6px;
    border-width: 1px;
  }

  .shop-online-v14 {
    grid-template-columns: 1fr;
  }
  .shop-route-poster { display: none; }
  .marketplace-hub {
    padding: 10px;
    gap: 7px;
    border-width: 2px;
  }
  .marketplace-heading {
    gap: 5px;
    padding-bottom: 7px;
    border-bottom-width: 2px;
  }
  .marketplace-heading .eyebrow { font-size: 0.52rem; }
  .marketplace-heading h1 { font-size: clamp(1.55rem, 7.5vw, 2.1rem); }
  .marketplace-heading > p:last-child { font-size: 0.63rem; line-height: 1.25; }
  .marketplace-grid-v14 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.86fr);
    gap: 5px;
  }
  .marketplace-grid-v14 .shop-entry {
    padding: 6px;
    gap: 3px;
    border-width: 1px;
    box-shadow: 2px 2px 0 rgba(16,17,15,0.72);
  }
  .marketplace-grid-v14 .shop-entry::after { right: 5px; top: 4px; font-size: 0.64rem; }
  .marketplace-grid-v14 .shop-mark { width: 32px; border-width: 1px; }
  .marketplace-grid-v14 .status-label { display: none; }
  .marketplace-grid-v14 .shop-entry strong { font-size: 0.82rem; }
  .marketplace-grid-v14 .shop-entry b { font-size: 0.42rem; }
  .marketplace-grid-v14 .is-main-catalog {
    padding: 8px;
    grid-template-columns: auto 1fr auto;
    column-gap: 8px;
  }
  .marketplace-grid-v14 .is-main-catalog::before { left: 7px; bottom: 5px; font-size: 0.42rem; padding: 2px 4px; }
  .marketplace-grid-v14 .is-main-catalog .shop-mark { width: 50px; }
  .marketplace-grid-v14 .is-main-catalog strong { font-size: 1.45rem; }
  .marketplace-grid-v14 .is-main-catalog b { padding: 6px; font-size: 0.44rem; box-shadow: 2px 2px 0 #11130f; }
  .marketplace-foot { gap: 6px; }
  .marketplace-foot > p { font-size: 0.52rem; line-height: 1.2; }
  .marketplace-foot .inner-page-actions { flex-wrap: nowrap; gap: 5px; }
  .marketplace-foot .button { min-height: 28px; padding: 4px 6px; font-size: 0.48rem; box-shadow: 2px 2px 0 currentColor; }

  .inperson-v14 {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 7px;
  }
  .stand-hero-photo {
    padding: 5px 5px 20px;
    border-width: 2px;
    box-shadow: 3px 3px 0 rgba(16,17,15,0.80);
  }
  .stand-hero-photo figcaption { left: 7px; right: 7px; bottom: 4px; font-size: 0.45rem; }
  .stand-photo-tape { width: 74px; top: -7px; }
  .stand-details-poster {
    padding: 10px;
    gap: 6px;
    border-width: 2px;
  }
  .stand-details-poster::before { display: none; }
  .stand-details-poster .eyebrow { font-size: 0.48rem; }
  .stand-details-poster h1 { font-size: clamp(1.45rem, 7vw, 2rem); }
  .stand-lede { font-size: 0.58rem; line-height: 1.2; }
  .stand-stock-grid { gap: 4px; }
  .stand-stock-grid span { min-height: 42px; padding: 5px; font-size: 0.48rem; border-width: 1px; }
  .stand-stock-grid b { font-size: 0.42rem; }
  .location-ticket { padding: 6px; border-width: 2px; gap: 6px; }
  .location-kicker { font-size: 0.42rem; }
  .location-ticket strong { font-size: 1rem; }
  .location-ticket small { font-size: 0.46rem; }
  .location-ticket a { padding: 6px; border-width: 1px; font-size: 0.48rem; }
  .stand-details-poster .inner-page-actions { display: none; }

  .socials-stage,
  .about-stage { padding: 8px 7px 24px; }
  .socials-hero-v14 { gap: 12px; }
  .socials-poster-display { width: min(230px, 70vw); }
  .social-quick-panel { padding: 18px 12px; border-width: 2px; box-shadow: 5px 5px 0 rgba(16,17,15,0.78); }
  .social-quick-panel h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .social-quick-copy { margin: 10px auto 14px; font-size: 0.78rem; }
  .social-quick-grid { gap: 7px; }
  .social-quick-grid .shop-entry { min-height: 96px; padding: 9px 5px; border-width: 1px; }
  .social-quick-grid .shop-mark { width: 44px; }
  .social-quick-grid .shop-entry strong { font-size: 0.72rem; }
  .social-quick-grid .shop-entry b { font-size: 0.46rem; }
  .social-feed-v14 { padding: 12px; }
  .social-feed-heading h2 { font-size: 2rem; }

  .about-v14 { gap: 12px; }
  .about-manifesto { min-height: 410px; padding: 22px 18px; border-width: 2px; box-shadow: 5px 5px 0 rgba(16,17,15,0.75); }
  .about-manifesto h1 { font-size: clamp(3rem, 14vw, 4.8rem); }
  .about-manifesto-lede { margin-top: 14px; font-size: 0.86rem; }
  .about-manifesto blockquote { font-size: 1.45rem; }
  .about-manifesto .inner-page-actions { gap: 6px; }
  .about-manifesto .button { min-height: 36px; padding: 7px; font-size: 0.58rem; }
  .about-story-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .about-story-card { min-height: 220px; padding: 20px; }
  .about-story-card h2 { font-size: 2.3rem; }
  .about-local-strip { grid-template-columns: 1fr; gap: 7px; padding: 13px; }
  .about-local-strip strong { white-space: normal; }
}

/* V14 review corrections after live browser render. */
.shop-route-poster {
  width: min(100%, 410px);
  height: auto;
  aspect-ratio: 1122 / 1402;
}
.shop-route-poster img:first-child {
  width: 100%;
  height: 100%;
  max-height: none;
}
.marketplace-foot .inner-page-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

body[data-page="socials"] .social-quick-grid .shop-entry {
  background: rgba(255,255,255,0.055) !important;
  color: #f7ecd4 !important;
}
body[data-page="socials"] .social-quick-grid [data-shop-id="youtube"] {
  background: rgba(215,39,39,0.28) !important;
}
body[data-page="socials"] .social-quick-grid [data-shop-id="instagram"] {
  background: linear-gradient(145deg, rgba(253,196,104,0.20), rgba(223,73,150,0.30), rgba(76,104,215,0.22)) !important;
}
body[data-page="socials"] .social-quick-grid [data-shop-id="x"] {
  background: rgba(255,255,255,0.10) !important;
}
body[data-page="socials"] .social-quick-grid [data-shop-id="tiktok"] {
  background: linear-gradient(145deg, rgba(0,242,234,0.16), rgba(255,0,80,0.20)) !important;
}
body[data-page="socials"] .social-quick-grid .shop-mark,
body[data-page="socials"] .social-quick-grid .shop-entry strong,
body[data-page="socials"] .social-quick-grid .shop-entry b {
  color: #f7ecd4 !important;
}
body[data-page="socials"] .social-quick-grid .shop-mark svg {
  fill: none;
  stroke: currentColor;
}
body[data-page="socials"] .social-quick-grid .logo-youtube svg path:first-child,
body[data-page="socials"] .social-quick-grid .logo-tiktok svg path,
body[data-page="socials"] .social-quick-grid .logo-x svg path {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 640px) {
  body[data-page="home"] .online-card,
  body[data-page="home"] .local-card,
  body[data-page="home"] .profile-card,
  body[data-page="home"] .social-card {
    width: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  body[data-page="home"] .socials-art-card .poster-mount,
  body[data-page="home"] .request-poster-card .poster-mount {
    width: 100%;
  }
  body[data-page="home"] .showcase-grid {
    grid-template-rows: minmax(0, 0.58fr) minmax(0, 1fr) minmax(0, 0.96fr);
    gap: 8px;
    padding-bottom: 16px;
  }
  .shop-route-poster { display: none; }
  .marketplace-foot .inner-page-actions { gap: 4px; }
}

@media (max-width: 640px) {
  body[data-page="shop-online"] .marketplace-heading > p:last-child::after {
    content: " Prices may vary by platform fees and shipping.";
  }
  body[data-page="shop-online"] .marketplace-foot > p {
    display: none;
  }
  body[data-page="shop-online"] .marketplace-foot {
    min-height: 28px;
    justify-content: flex-end;
  }
  body[data-page="shop-online"] .marketplace-grid-v14 {
    grid-template-rows: minmax(0, 0.76fr) minmax(0, 0.72fr);
  }
  body[data-page="shop-in-person"] .inperson-v14 {
    grid-template-rows: minmax(0, 0.90fr) minmax(0, 1.10fr);
  }
}

@media (max-width: 640px) {
  body[data-page="shop-online"] .marketplace-hub {
    position: relative;
    padding-bottom: 40px;
  }
  body[data-page="shop-online"] .marketplace-foot {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 7px;
  }
  body[data-page="shop-in-person"] .location-ticket {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  body[data-page="shop-online"] .marketplace-hub {
    padding-bottom: 9px;
  }
  body[data-page="shop-online"] .marketplace-heading { order: 1; }
  body[data-page="shop-online"] .marketplace-foot {
    position: static;
    order: 2;
    min-height: 28px;
    justify-content: flex-start;
  }
  body[data-page="shop-online"] .marketplace-grid-v14 { order: 3; }
}

/* ======================================================================
   V15 — restore city-reflection theme + poster-driven inner pages
   ====================================================================== */

/* give all inner routes the same city-glass environment as the homepage */
.inner-page-stage {
  background:
    linear-gradient(180deg, rgba(219,245,255,0.18), rgba(219,245,255,0.08)),
    url("assets/city-reflection-cartoon.png") center center / cover no-repeat;
}

.inner-page-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 8%, rgba(255,255,255,0.16) 9% 13%, transparent 14% 42%, rgba(255,255,255,0.08) 43% 46%, transparent 47% 75%, rgba(255,255,255,0.08) 76% 79%, transparent 80%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.30), transparent 16%);
  opacity: 0.9;
}

.inner-page-stage::before {
  background:
    linear-gradient(180deg, rgba(233,251,255,0.22), rgba(177,227,247,0.16) 45%, rgba(239,251,255,0.22)),
    rgba(202,239,252,0.12);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.20),
    inset 0 0 64px rgba(35,128,164,0.10),
    0 14px 30px rgba(31,72,91,0.12);
  backdrop-filter: blur(1px) saturate(1.02);
  -webkit-backdrop-filter: blur(1px) saturate(1.02);
}

.inner-page-window {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(230,249,255,0.55), rgba(194,235,248,0.28) 50%, rgba(241,252,255,0.55)),
    rgba(223,246,253,0.50);
  box-shadow:
    10px 10px 0 rgba(16,17,15,0.76),
    inset 0 0 0 4px rgba(255,255,255,0.22),
    inset 0 0 42px rgba(44,145,182,0.10);
}

.inner-page-window::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 10%, rgba(255,255,255,0.18) 11% 15%, transparent 16% 56%, rgba(255,255,255,0.07) 57% 60%, transparent 61%),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 18%);
}

/* SHOP ONLINE — less generic, more poster + directory wall */
.shop-online-v14 {
  position: relative;
  grid-template-columns: minmax(330px, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(18px, 2.2vw, 32px);
}

.shop-route-poster {
  width: min(100%, 460px);
  align-self: center;
  transform: rotate(-0.9deg);
}

.marketplace-hub {
  position: relative;
  background:
    linear-gradient(90deg, transparent 0 4.8%, rgba(24,94,179,0.14) 4.8% 5.1%, transparent 5.1%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(42,95,145,0.08) 31px 32px),
    radial-gradient(circle at 86% 10%, rgba(255,255,255,0.82), transparent 24%),
    rgba(255,250,240,0.88);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.marketplace-heading {
  grid-template-columns: 1.15fr 0.85fr;
}

.marketplace-grid-v14 {
  gap: 14px;
}

.marketplace-grid-v14 .shop-entry {
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,0.72), transparent 28%),
    rgba(255,248,232,0.98);
}

.marketplace-grid-v14 .is-main-catalog {
  background:
    linear-gradient(115deg, rgba(28,91,184,0.09), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(31,98,183,0.04) 22px 23px),
    rgba(255,248,230,0.98);
}

/* SHOP IN PERSON — bigger stand photo, info feels part of same installation */
.inperson-v14 {
  grid-template-columns: minmax(420px, 0.58fr) minmax(0, 0.42fr);
  gap: clamp(18px, 2vw, 28px);
}

.stand-hero-photo {
  padding: clamp(14px, 1.2vw, 18px) clamp(14px, 1.2vw, 18px) clamp(50px, 4vw, 64px);
  background: rgba(255,248,232,0.96);
}

.stand-hero-photo > img:first-child {
  object-fit: cover;
  object-position: center top;
}

.stand-details-poster {
  background:
    linear-gradient(155deg, transparent 0 67%, rgba(197,42,32,0.10) 67% 73%, transparent 73%),
    repeating-linear-gradient(180deg, rgba(17,19,15,0.028) 0 1px, transparent 1px 5px),
    rgba(245,231,201,0.96);
}

.location-ticket {
  margin-top: auto;
  box-shadow: 5px 5px 0 rgba(16,17,15,0.68);
}

/* SOCIALS — quick links and poster feel native to the window system */
.socials-hero-v14 {
  width: min(1360px, 100%);
  grid-template-columns: minmax(300px, 0.34fr) minmax(0, 0.66fr);
  align-items: stretch;
}

.social-quick-panel {
  background:
    radial-gradient(circle at 12% 16%, rgba(101,217,223,0.18), transparent 23%),
    radial-gradient(circle at 86% 78%, rgba(143,83,188,0.14), transparent 28%),
    linear-gradient(180deg, rgba(228,247,255,0.84), rgba(191,233,247,0.74) 55%, rgba(241,251,255,0.86)),
    rgba(233,247,255,0.72);
  color: #10130f;
  border-width: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.social-quick-copy,
.social-quick-grid .shop-entry b {
  color: rgba(16,19,15,0.68);
}

.social-quick-grid .shop-entry {
  background: rgba(255,251,242,0.88);
  color: #11130f;
  border-color: #11130f;
  box-shadow: 4px 4px 0 rgba(16,17,15,0.22);
}

.social-feed-v14 {
  background: rgba(229,248,255,0.66);
}

/* ABOUT — cleaner and less generic, still within the storefront language */
.about-v14 {
  width: min(1360px, 100%);
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
}

.about-manifesto {
  min-height: 610px;
  background:
    radial-gradient(circle at 82% 14%, rgba(214,255,0,0.12), transparent 18%),
    linear-gradient(145deg, rgba(255,255,255,0.06), transparent 34%),
    rgba(14,18,28,0.90);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.about-manifesto::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: clamp(150px, 24%, 210px);
  aspect-ratio: 1 / 1;
  background: url("assets/open-sign.webp") center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.about-story-card {
  background: rgba(255,249,236,0.95);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.about-local-strip {
  background: rgba(255,249,236,0.90);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* keep pages feeling roomy but not blank */
body[data-page="socials"] .site-footer,
body[data-page="about"] .site-footer {
  display: none;
}

body[data-page="socials"] main,
body[data-page="about"] main,
body[data-page="socials"] .page-view,
body[data-page="about"] .page-view {
  min-height: calc(100svh - var(--header-height));
}

@media (max-width: 1100px) {
  .shop-online-v14,
  .inperson-v14,
  .socials-hero-v14,
  .about-v14 {
    grid-template-columns: 1fr;
  }

  .shop-route-poster,
  .socials-poster-display {
    width: min(100%, 360px);
  }

  .stand-hero-photo {
    height: 360px;
  }

  .about-manifesto {
    min-height: 0;
  }
}

@media (max-width: 740px) {
  .inner-page-stage {
    padding: 10px;
  }

  .inner-page-window {
    height: auto;
    min-height: calc(100svh - var(--header-height) - 20px);
    padding: 12px;
  }

  body[data-page="shop-online"],
  body[data-page="shop-in-person"] {
    overflow: auto;
  }

  body[data-page="shop-online"] main,
  body[data-page="shop-in-person"] main,
  body[data-page="shop-online"] .page-view,
  body[data-page="shop-in-person"] .page-view {
    height: auto;
    overflow: visible;
  }

  .shop-online-v14,
  .inperson-v14,
  .socials-hero-v14,
  .about-v14 {
    height: auto;
    min-height: 0;
    gap: 14px;
  }

  .shop-route-poster,
  .socials-poster-display {
    width: min(100%, 300px);
  }

  .marketplace-hub,
  .social-quick-panel,
  .social-feed-v14,
  .about-manifesto,
  .about-local-strip,
  .stand-details-poster {
    box-shadow: 6px 6px 0 rgba(16,17,15,0.68);
  }

  .stand-hero-photo {
    height: 420px;
  }

  .marketplace-grid-v14 {
    gap: 10px;
  }
}

/* ======================================================================
   V16 — brick building shell + stronger flyer-window theme
   ====================================================================== */

/* brick building around every window */
html {
  background:
    linear-gradient(180deg, #7f3127 0%, #6f271f 100%);
}

body {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.22)),
    linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 120px),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 62px),
    linear-gradient(90deg,
      #8d3a2e 0 118px,
      #743027 118px 120px,
      #9a4335 120px 238px,
      #743027 238px 240px),
    linear-gradient(180deg,
      transparent 0 60px,
      rgba(255,255,255,0.04) 60px 62px,
      transparent 62px 122px,
      rgba(0,0,0,0.08) 122px 124px,
      transparent 124px);
  background-size: auto, 120px 62px, 120px 62px, 240px 62px, 240px 124px;
  background-attachment: fixed;
}

body::before {
  background:
    radial-gradient(rgba(255,255,255,0.07) 0.8px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.08) 0.8px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 25%, rgba(0,0,0,0.10));
  background-position: 0 0, 11px 14px, 0 0;
  background-size: 8px 8px, 9px 9px, 100% 100%;
  opacity: 0.34;
}

.site-header {
  margin: 10px clamp(10px, 2vw, 18px) 0;
  border: 2px solid rgba(22,18,15,0.92);
  background: rgba(243,247,249,0.76);
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.18),
    0 10px 24px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
}

main {
  padding-inline: clamp(10px, 1.8vw, 18px);
}

.storefront-shell,
.inner-page-stage {
  position: relative;
}

.storefront-shell::before,
.inner-page-stage::before {
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.22),
    inset 0 0 64px rgba(35,128,164,0.10),
    0 14px 30px rgba(0,0,0,0.22);
}

/* HOME window sits in brick more believably */
.storefront-shell {
  padding: clamp(10px, 1.3vw, 16px);
  background: rgba(0,0,0,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* inner routes stay inside city-reflection glass */
.inner-page-stage {
  background: transparent;
  padding-top: clamp(14px, 2vw, 22px);
}

.inner-page-stage::after {
  opacity: 0.88;
}

/* SHOP ONLINE page feels like window plus poster wall */
.shop-route-poster,
.socials-poster-display,
.about-story-card,
.about-manifesto,
.social-quick-panel,
.social-feed-v14,
.marketplace-hub,
.stand-details-poster,
.stand-hero-photo,
.about-local-strip {
  position: relative;
}

.shop-route-poster::before,
.socials-poster-display::before,
.about-manifesto::before,
.social-feed-v14::before,
.marketplace-hub::before,
.stand-details-poster::before,
.about-local-strip::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 10%;
  width: 96px;
  height: 34px;
  background: url("assets/clear-tape.webp") center/contain no-repeat;
  opacity: 0.92;
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 5;
}

.shop-route-poster::after,
.socials-poster-display::after,
.about-manifesto::after,
.social-feed-v14::after,
.marketplace-hub::after,
.stand-details-poster::after,
.about-local-strip::after {
  content: "";
  position: absolute;
  top: -13px;
  right: 10%;
  width: 96px;
  height: 34px;
  background: url("assets/clear-tape.webp") center/contain no-repeat;
  opacity: 0.9;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 5;
}

/* shop online uses more space and feels less generic */
.shop-online-v14 {
  grid-template-columns: minmax(280px, 0.30fr) minmax(0, 0.70fr);
  align-items: stretch;
}

.marketplace-hub {
  border-width: 3px;
  box-shadow: 8px 8px 0 rgba(16,17,15,0.78);
}

.marketplace-heading {
  gap: 14px;
}

.marketplace-heading h1 {
  font-family: Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.88;
}

.marketplace-grid-v14 .shop-entry strong {
  font-family: Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.marketplace-foot {
  border-top: 2px solid rgba(17,19,15,0.18);
  padding-top: 12px;
}

/* in-person page more cohesive and bigger image */
.inperson-v14 {
  grid-template-columns: minmax(460px, 0.62fr) minmax(0, 0.38fr);
}

.stand-hero-photo {
  min-height: 0;
}

.stand-hero-photo > img:first-child {
  object-fit: cover;
  object-position: center top;
}

.stand-hero-photo::before,
.stand-hero-photo::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 96px;
  height: 34px;
  background: url("assets/clear-tape.webp") center/contain no-repeat;
  z-index: 5;
  opacity: 0.92;
}

.stand-hero-photo::before {
  left: 12%;
  transform: rotate(-8deg);
}

.stand-hero-photo::after {
  right: 12%;
  transform: rotate(8deg);
}

.stand-photo-tape { display: none; }

/* socials page: higher contrast, no extra descriptions above embeds */
.socials-hero-v14 {
  grid-template-columns: minmax(300px, 0.30fr) minmax(0, 0.70fr);
}

.social-quick-panel {
  box-shadow: 8px 8px 0 rgba(16,17,15,0.72);
}

.social-quick-panel h1 {
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: -0.03em;
}

.social-quick-copy {
  display: none;
}

.social-quick-grid .shop-entry {
  min-height: 132px;
  background: rgba(255,250,240,0.94);
  color: #11130f;
}

.social-quick-grid .shop-mark {
  color: #11130f;
}

.social-quick-grid .shop-entry strong {
  color: #11130f;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.22rem;
  letter-spacing: 0;
}

.social-quick-grid .shop-entry b,
.social-quick-grid .status-label {
  display: none;
}

.social-feed-heading {
  margin-bottom: 14px;
}

.social-feed-heading .eyebrow {
  margin-bottom: 0;
}

/* ABOUT page converted from generic hero to mounted flyer/editorial panel */
.about-v14 {
  grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
}

.about-manifesto {
  min-height: 0;
  padding: clamp(26px, 2.8vw, 40px);
  background:
    linear-gradient(180deg, rgba(255,253,245,0.94), rgba(248,239,221,0.96)),
    rgba(255,249,236,0.96);
  color: #11130f;
  overflow: hidden;
}

.about-manifesto .eyebrow {
  color: #c72b21;
}

.about-manifesto h1 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(3.2rem, 5.2vw, 5.4rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  max-width: 8ch;
}

.about-manifesto-lede {
  color: rgba(17,19,15,0.76);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.45;
}

.about-manifesto blockquote {
  margin: 18px 0 20px;
  color: #11130f;
  border-left-color: #c72b21;
  font-size: clamp(1.55rem, 2.1vw, 2.3rem);
}

.about-manifesto .inner-page-actions {
  margin-top: auto;
}

.about-manifesto .button.primary {
  background: #e0b33e;
  color: #11130f;
}

.about-manifesto .button.ghost {
  border-color: #11130f;
  color: #11130f;
}

.about-manifesto::before {
  content: "";
  top: -14px;
  left: 12%;
  width: 104px;
  height: 36px;
  background: url("assets/clear-tape.webp") center/contain no-repeat;
  transform: rotate(-7deg);
  opacity: 0.92;
}

.about-manifesto::after {
  content: "";
  top: -12px;
  right: 12%;
  left: auto;
  bottom: auto;
  width: 104px;
  height: 36px;
  background: url("assets/clear-tape.webp") center/contain no-repeat;
  transform: rotate(8deg);
  opacity: 0.92;
}

.about-story-grid {
  gap: 18px;
}

.about-story-card {
  background: rgba(255,249,236,0.96);
  box-shadow: 6px 7px 0 rgba(16,17,15,0.74);
}

.about-story-card:nth-child(1) { transform: rotate(-1deg); }
.about-story-card:nth-child(2) { transform: rotate(0.6deg); }
.about-story-card:nth-child(3) { transform: rotate(0.4deg); }
.about-story-card:nth-child(4) { transform: rotate(-0.7deg); }

.about-story-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 16%;
  width: 84px;
  height: 30px;
  background: url("assets/clear-tape.webp") center/contain no-repeat;
  opacity: 0.9;
}

.about-story-card h2 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1.7rem, 2.1vw, 2.55rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.about-local-strip {
  margin-top: 26px;
}

/* remove little descriptive subtext above embed content as requested */
.social-feed-grid .media-fallback p,
.social-feed-grid .youtube-fallback p {
  display: none;
}

/* inner page mobile behavior */
@media (max-width: 1100px) {
  .about-v14,
  .socials-hero-v14,
  .shop-online-v14,
  .inperson-v14 {
    grid-template-columns: 1fr;
  }

  .marketplace-heading,
  .marketplace-foot {
    grid-template-columns: 1fr;
  }

  .marketplace-foot {
    align-items: flex-start;
  }
}

@media (max-width: 740px) {
  .site-header {
    margin: 8px 8px 0;
  }

  main {
    padding-inline: 8px;
  }

  .social-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-quick-grid .shop-entry {
    min-height: 104px;
  }

  .social-quick-grid .shop-entry strong {
    font-size: 0.92rem;
  }

  .about-manifesto h1 {
    font-size: clamp(2.45rem, 12vw, 4rem);
    max-width: none;
  }

  .about-story-grid {
    grid-template-columns: 1fr;
  }

  .inperson-v14,
  .shop-online-v14,
  .socials-hero-v14,
  .about-v14 {
    gap: 12px;
  }
}

/* avoid duplicate tape where real tape assets already exist */
.shop-route-poster::before,
.shop-route-poster::after,
.socials-poster-display::before,
.socials-poster-display::after {
  display: none;
}

/* ======================================================================
   V17 — actual brick building + framed storefront windows
   ====================================================================== */

/* Building facade */
html,
body {
  background-color: #7e352b;
}

body {
  background-image:
    linear-gradient(rgba(24,11,8,0.12), rgba(24,11,8,0.12)),
    linear-gradient(90deg, transparent 0 116px, rgba(54,25,19,0.42) 116px 120px),
    linear-gradient(180deg, transparent 0 56px, rgba(237,205,178,0.32) 56px 60px),
    linear-gradient(90deg, #94483a 0 116px, #7b342a 116px 120px),
    linear-gradient(90deg, transparent 0 56px, rgba(255,255,255,0.035) 56px 60px, transparent 60px 120px);
  background-size: auto, 120px 60px, 120px 60px, 120px 60px, 120px 120px;
  background-position: 0 0, 0 0, 0 0, 0 0, 60px 60px;
  background-attachment: fixed;
}

body::before {
  background:
    radial-gradient(rgba(255,255,255,0.08) 0.7px, transparent 0.9px),
    radial-gradient(rgba(0,0,0,0.10) 0.7px, transparent 0.9px),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%, rgba(0,0,0,0.10));
  background-size: 8px 8px, 11px 11px, 100% 100%;
  background-position: 0 0, 5px 7px, 0 0;
  opacity: 0.38;
}

.site-header {
  margin: 12px clamp(12px, 2.4vw, 34px) 0;
  min-height: 68px;
  border: 3px solid #313538;
  border-radius: 5px 5px 0 0;
  background:
    linear-gradient(180deg, rgba(250,252,252,0.96), rgba(218,228,232,0.94));
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.22),
    0 8px 0 rgba(42,21,17,0.34),
    0 14px 28px rgba(0,0,0,0.22);
}

main {
  padding: 0 clamp(12px, 2.4vw, 34px) clamp(24px, 3vw, 44px);
}

.site-footer {
  margin-inline: clamp(12px, 2.4vw, 34px);
  border: 3px solid #242729;
  background: rgba(18,20,19,0.94);
  color: #f6ead0;
}

/* Homepage storefront mounted into the brick facade */
.showcase-hero {
  padding-top: clamp(18px, 2vw, 28px);
}

.storefront-shell {
  border: 9px solid #9daab0;
  border-radius: 12px;
  background: linear-gradient(180deg, #dce5e8, #88979e 48%, #cbd6da 52%, #75858d);
  box-shadow:
    0 0 0 4px #2c3032,
    0 0 0 9px rgba(44,22,17,0.30),
    0 16px 30px rgba(0,0,0,0.26),
    inset 0 0 0 3px rgba(255,255,255,0.46);
}

/* Route stage is brick; actual page content lives inside a window */
.inner-page-stage {
  min-height: calc(100svh - var(--header-height));
  padding: clamp(36px, 4vw, 62px) clamp(28px, 4.5vw, 74px) clamp(42px, 5vw, 76px);
  background: transparent !important;
  place-items: start center;
}

.inner-page-stage::before,
.inner-page-stage::after {
  display: none !important;
}

.inner-page-window {
  position: relative;
  width: min(1380px, 100%);
  height: min(790px, calc(100svh - var(--header-height) - clamp(90px, 10vw, 138px)));
  min-height: 590px;
  padding: clamp(24px, 2.5vw, 38px);
  overflow: hidden;
  border: 10px solid #9daab0;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(220,246,255,0.28), rgba(154,215,240,0.22) 48%, rgba(230,248,255,0.34)),
    url("assets/city-reflection-cartoon.png") center / cover no-repeat;
  box-shadow:
    0 0 0 4px #292e31,
    0 0 0 9px rgba(43,21,17,0.32),
    0 16px 34px rgba(0,0,0,0.28),
    inset 0 0 0 4px rgba(255,255,255,0.24),
    inset 0 0 65px rgba(38,137,177,0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.inner-page-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 7%, rgba(255,255,255,0.24) 8% 12%, transparent 13% 46%, rgba(255,255,255,0.11) 47% 51%, transparent 52% 74%, rgba(255,255,255,0.10) 75% 78%, transparent 79%),
    radial-gradient(circle at 82% 15%, rgba(255,255,255,0.30), transparent 17%);
}

.inner-page-window > * {
  position: relative;
  z-index: 1;
}

/* Consistent physical tape rules */
.marketplace-hub::before,
.marketplace-hub::after,
.stand-hero-photo::before,
.stand-hero-photo::after,
.social-feed-v14::before,
.social-feed-v14::after,
.about-manifesto::before,
.about-manifesto::after {
  content: "";
  position: absolute;
  width: 104px;
  height: 34px;
  top: -15px;
  background: url("assets/clear-tape.webp") center / contain no-repeat;
  opacity: 0.92;
  pointer-events: none;
  z-index: 7;
}

.marketplace-hub::before,
.stand-hero-photo::before,
.social-feed-v14::before,
.about-manifesto::before {
  left: 10%;
  transform: rotate(-7deg);
}

.marketplace-hub::after,
.stand-hero-photo::after,
.social-feed-v14::after,
.about-manifesto::after {
  right: 10%;
  transform: rotate(7deg);
}

.stand-photo-tape,
.tape-route-left,
.tape-route-right,
.social-page-tape-left,
.social-page-tape-right {
  z-index: 8;
}

/* SHOP ONLINE: poster and a single taped directory flyer on the glass */
.shop-online-v14 {
  grid-template-columns: minmax(300px, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: stretch;
}

.shop-route-poster {
  width: min(100%, 440px);
  align-self: center;
  filter: drop-shadow(12px 15px 0 rgba(17,32,40,0.34));
}

.marketplace-hub {
  border: 4px solid #11130f;
  background:
    linear-gradient(90deg, transparent 0 5.2%, rgba(33,89,174,0.16) 5.2% 5.5%, transparent 5.5%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(35,89,139,0.10) 31px 32px),
    radial-gradient(circle at 84% 9%, rgba(255,255,255,0.78), transparent 24%),
    rgba(255,248,232,0.96);
  box-shadow: 9px 10px 0 rgba(16,17,15,0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.marketplace-heading h1 {
  font-family: Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.035em;
}

.marketplace-grid-v14 .shop-entry {
  border-width: 2px;
  background: rgba(255,250,239,0.98);
  box-shadow: 4px 4px 0 rgba(16,17,15,0.74);
}

.marketplace-grid-v14 .shop-entry strong {
  font-family: Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

/* IN-PERSON: large taped photo + one flyer, both directly on the glass */
.inperson-v14 {
  grid-template-columns: minmax(470px, 0.61fr) minmax(0, 0.39fr);
  gap: clamp(24px, 3vw, 44px);
}

.stand-hero-photo {
  background: rgba(255,249,237,0.97);
  box-shadow: 10px 12px 0 rgba(16,17,15,0.80);
}

.stand-hero-photo > img:first-child {
  object-fit: cover;
  object-position: center top;
}

.stand-details-poster {
  border: 4px solid #11130f;
  background:
    linear-gradient(155deg, transparent 0 67%, rgba(197,42,32,0.11) 67% 73%, transparent 73%),
    repeating-linear-gradient(180deg, rgba(17,19,15,0.035) 0 1px, transparent 1px 5px),
    rgba(247,232,201,0.97);
  box-shadow: 9px 11px 0 rgba(16,17,15,0.82);
}

.stand-details-poster::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  right: auto;
  width: 112px;
  height: 36px;
  background: url("assets/clear-tape.webp") center / contain no-repeat;
  transform: translateX(-50%) rotate(-2deg);
  opacity: 0.92;
  z-index: 7;
}

.stand-details-poster::after {
  display: none;
}

/* SOCIALS: first area is a real storefront window; feed is mounted on brick */
.socials-stage,
.about-stage {
  display: block;
  padding-top: clamp(36px, 4vw, 62px);
}

.socials-hero-v14 {
  position: relative;
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: clamp(26px, 3vw, 44px);
  grid-template-columns: minmax(280px, 0.31fr) minmax(0, 0.69fr);
  gap: clamp(26px, 3vw, 48px);
  border: 10px solid #9daab0;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(220,246,255,0.25), rgba(154,215,240,0.17) 48%, rgba(230,248,255,0.28)),
    url("assets/city-reflection-cartoon.png") center / cover no-repeat;
  box-shadow:
    0 0 0 4px #292e31,
    0 0 0 9px rgba(43,21,17,0.32),
    0 16px 34px rgba(0,0,0,0.28),
    inset 0 0 0 4px rgba(255,255,255,0.22);
  overflow: hidden;
}

.socials-hero-v14::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 8%, rgba(255,255,255,0.22) 9% 13%, transparent 14% 58%, rgba(255,255,255,0.10) 59% 63%, transparent 64%);
}

.socials-hero-v14 > * {
  position: relative;
  z-index: 1;
}

.socials-poster-display {
  align-self: center;
  width: min(100%, 390px);
}

.social-quick-panel {
  align-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #11130f;
  box-shadow: none;
  text-align: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.quick-links-kicker {
  margin-bottom: 9px;
  border: 2px solid #11130f;
  box-shadow: 3px 3px 0 #11130f;
}

.social-quick-panel h1 {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 10px 18px 8px;
  border: 3px solid #11130f;
  background: #11130f;
  color: #f7ecd4;
  box-shadow: 6px 7px 0 rgba(16,17,15,0.34);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.4rem, 4.2vw, 4.8rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.social-quick-copy {
  display: none;
}

.social-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.social-quick-grid .shop-entry {
  position: relative;
  min-height: 150px;
  border: 3px solid #11130f;
  box-shadow: 7px 8px 0 rgba(16,17,15,0.64);
  transform: rotate(-0.6deg);
  color: #fff;
}

.social-quick-grid .shop-entry:nth-child(even) {
  transform: rotate(0.7deg);
}

.social-quick-grid .shop-entry::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 88px;
  height: 30px;
  background: url("assets/clear-tape.webp") center / contain no-repeat;
  transform: translateX(-50%) rotate(-2deg);
  opacity: 0.92;
}

.social-quick-grid [data-shop-id="youtube"] {
  background: #d92b25;
}

.social-quick-grid [data-shop-id="instagram"] {
  background: linear-gradient(145deg, #7a3bc3, #d8418e 55%, #f2a04d);
}

.social-quick-grid [data-shop-id="x"] {
  background: #11130f;
}

.social-quick-grid [data-shop-id="tiktok"] {
  background:
    linear-gradient(135deg, rgba(0,242,234,0.23), transparent 42%),
    linear-gradient(315deg, rgba(255,0,80,0.26), transparent 42%),
    #101014;
}

.social-quick-grid .shop-mark,
.social-quick-grid .shop-entry strong {
  color: #fff !important;
}

.social-quick-grid .shop-entry strong {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.32);
}

.social-quick-grid .status-label,
.social-quick-grid .shop-entry b {
  display: none;
}

.social-feed-v14 {
  position: relative;
  width: min(1280px, calc(100% - 8vw));
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding: clamp(22px, 2.6vw, 38px);
  border: 4px solid #11130f;
  background:
    repeating-linear-gradient(180deg, rgba(17,19,15,0.025) 0 1px, transparent 1px 6px),
    rgba(255,247,230,0.97);
  box-shadow: 10px 12px 0 rgba(28,13,10,0.48);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.social-feed-heading h2 {
  font-family: Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
}

.social-feed-grid .embed-panel {
  background: #fffaf0;
  box-shadow: 5px 6px 0 rgba(16,17,15,0.62);
}

.social-feed-grid .media-fallback p,
.social-feed-grid .youtube-fallback p {
  display: none;
}

/* ABOUT: window display with a punk flyer and taped story flyers */
.about-v14 {
  position: relative;
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: clamp(26px, 3vw, 44px);
  grid-template-columns: minmax(360px, 0.43fr) minmax(0, 0.57fr);
  gap: clamp(26px, 3vw, 48px);
  border: 10px solid #9daab0;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(220,246,255,0.24), rgba(154,215,240,0.17) 48%, rgba(230,248,255,0.30)),
    url("assets/city-reflection-cartoon.png") center / cover no-repeat;
  box-shadow:
    0 0 0 4px #292e31,
    0 0 0 9px rgba(43,21,17,0.32),
    0 16px 34px rgba(0,0,0,0.28),
    inset 0 0 0 4px rgba(255,255,255,0.22);
  overflow: hidden;
}

.about-v14::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 0 8%, rgba(255,255,255,0.21) 9% 13%, transparent 14% 60%, rgba(255,255,255,0.09) 61% 64%, transparent 65%);
}

.about-v14 > * {
  position: relative;
  z-index: 1;
}

.about-manifesto {
  min-height: 0;
  padding: clamp(28px, 3vw, 46px);
  border: 4px solid #11130f;
  background:
    radial-gradient(circle at 84% 12%, rgba(224,179,62,0.18), transparent 18%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 8px),
    #11130f;
  color: #f5e8c8;
  box-shadow: 9px 11px 0 rgba(16,17,15,0.72);
}

.about-logo-art {
  width: min(280px, 76%);
  margin: 12px 0 20px;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.42));
}

.about-manifesto .eyebrow {
  color: #dfff00;
}

.about-manifesto h1 {
  max-width: 12ch;
  color: #f5e8c8;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.7rem, 4.2vw, 4.7rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.about-manifesto-lede {
  color: rgba(245,232,200,0.78);
}

.about-manifesto blockquote {
  color: #fff8de;
  border-left-color: #c62c22;
}

.about-manifesto .button.ghost {
  border-color: #f5e8c8;
  color: #f5e8c8;
}

.about-story-grid {
  gap: clamp(18px, 2vw, 28px);
}

.about-story-card {
  border: 3px solid #11130f;
  background: #fff7e7;
  box-shadow: 7px 8px 0 rgba(16,17,15,0.68);
  overflow: visible;
}

.about-story-card::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 88px;
  height: 30px;
  background: url("assets/clear-tape.webp") center / contain no-repeat;
  transform: translateX(-50%) rotate(-2deg);
  opacity: 0.92;
  z-index: 4;
}

.about-story-card:nth-child(1) { transform: rotate(-1deg); background: #f4d6ce; }
.about-story-card:nth-child(2) { transform: rotate(0.8deg); background: #d5e8f6; }
.about-story-card:nth-child(3) { transform: rotate(0.5deg); background: #f1d56b; }
.about-story-card:nth-child(4) { transform: rotate(-0.8deg); background: #c9e3d2; }

.about-story-card h2 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(1.7rem, 2.2vw, 2.65rem);
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.about-local-strip {
  width: min(1200px, calc(100% - 10vw));
  margin: clamp(42px, 5vw, 68px) auto 0;
  border: 4px solid #11130f;
  background: #11130f;
  color: #f6ead0;
  box-shadow: 9px 10px 0 rgba(28,13,10,0.46);
}

.about-local-strip p {
  color: rgba(246,234,208,0.72) !important;
}

/* Building-walk route transition */
::view-transition-old(root) {
  animation: storefront-walk-out 260ms ease both;
}

::view-transition-new(root) {
  animation: storefront-walk-in 320ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes storefront-walk-out {
  to { opacity: 0; transform: translateX(-4vw) scale(0.99); filter: blur(2px); }
}

@keyframes storefront-walk-in {
  from { opacity: 0; transform: translateX(5vw) scale(0.99); filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .shop-online-v14,
  .inperson-v14,
  .socials-hero-v14,
  .about-v14 {
    grid-template-columns: 1fr;
  }

  .inner-page-window {
    height: auto;
    min-height: calc(100svh - var(--header-height) - 100px);
  }

  .socials-poster-display,
  .shop-route-poster {
    width: min(100%, 360px);
  }

  .stand-hero-photo {
    min-height: 480px;
  }
}

@media (max-width: 740px) {
  .site-header {
    margin: 8px 8px 0;
  }

  main {
    padding-inline: 8px;
  }

  .inner-page-stage {
    padding: 24px 10px 36px;
  }

  .inner-page-window,
  .socials-hero-v14,
  .about-v14 {
    border-width: 6px;
    box-shadow:
      0 0 0 3px #292e31,
      0 0 0 6px rgba(43,21,17,0.30),
      0 12px 24px rgba(0,0,0,0.24);
  }

  .inner-page-window {
    padding: 14px;
  }

  body[data-page="shop-online"],
  body[data-page="shop-in-person"] {
    overflow: auto;
  }

  body[data-page="shop-online"] main,
  body[data-page="shop-in-person"] main,
  body[data-page="shop-online"] .page-view,
  body[data-page="shop-in-person"] .page-view {
    height: auto;
    overflow: visible;
  }

  .socials-hero-v14,
  .about-v14 {
    padding: 16px;
  }

  .social-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .social-quick-grid .shop-entry {
    min-height: 112px;
  }

  .social-quick-grid .shop-entry strong {
    font-size: 0.92rem;
  }

  .social-feed-v14,
  .about-local-strip {
    width: calc(100% - 12px);
  }

  .about-story-grid {
    grid-template-columns: 1fr;
  }

  .about-manifesto h1 {
    max-width: none;
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .stand-hero-photo {
    min-height: 420px;
  }
}

/* V17 hard reset for legacy high-specificity route backgrounds */
body:not([data-page="home"]) {
  background-color: #7e352b !important;
  background-image:
    linear-gradient(rgba(24,11,8,0.12), rgba(24,11,8,0.12)),
    linear-gradient(90deg, transparent 0 116px, rgba(54,25,19,0.42) 116px 120px),
    linear-gradient(180deg, transparent 0 56px, rgba(237,205,178,0.32) 56px 60px),
    linear-gradient(90deg, #94483a 0 116px, #7b342a 116px 120px) !important;
  background-size: auto, 120px 60px, 120px 60px, 120px 60px !important;
  background-attachment: fixed !important;
}

body:not([data-page="home"]) main {
  background: transparent !important;
}

body:not([data-page="home"]) main::before {
  display: none !important;
}

body[data-page="socials"] .social-quick-grid .shop-entry {
  color: #fff !important;
  opacity: 1 !important;
}

body[data-page="socials"] .social-quick-grid [data-shop-id="youtube"] {
  background: #d92b25 !important;
}

body[data-page="socials"] .social-quick-grid [data-shop-id="instagram"] {
  background: linear-gradient(145deg, #7135bd, #d73f90 55%, #f1a047) !important;
}

body[data-page="socials"] .social-quick-grid [data-shop-id="x"] {
  background: #11130f !important;
}

body[data-page="socials"] .social-quick-grid [data-shop-id="tiktok"] {
  background:
    linear-gradient(135deg, rgba(0,242,234,0.28), transparent 42%),
    linear-gradient(315deg, rgba(255,0,80,0.30), transparent 42%),
    #101014 !important;
}

body[data-page="socials"] .social-quick-grid .shop-mark,
body[data-page="socials"] .social-quick-grid .shop-entry strong {
  color: #fff !important;
}

/* True staggered brick asset and home-route reset */
body,
body[data-page="home"],
body:not([data-page="home"]) {
  background-color: #7e352b !important;
  background-image:
    linear-gradient(rgba(24,11,8,0.08), rgba(24,11,8,0.14)),
    url("assets/brick-wall.svg") !important;
  background-size: auto, 240px 124px !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}

body[data-page="home"] main {
  background: transparent !important;
}

/* Keep visible brick reveals around the homepage storefront on wide screens */
body[data-page="home"] main {
  padding: 0 clamp(22px, 3.2vw, 48px) clamp(28px, 3vw, 44px) !important;
}

body[data-page="home"] .showcase-hero {
  padding: clamp(22px, 2.4vw, 34px) 0 0 !important;
}

@media (max-width: 740px) {
  body[data-page="home"] main {
    padding: 0 8px 20px !important;
  }
  body[data-page="home"] .showcase-hero {
    padding: 10px 0 0 !important;
  }
}