/* Buying website styles. Every colour, size and radius comes from tokens.css.
   The layout is design pass 2 (docs/website-design-pass-2.md, Nov 3): the
   live show as the video whole beside a column (under it on a phone), the
   front page a shop page with the banner whole, and everything that reads
   or asks as one sheet over the page. */

/* Inter, served from this site rather than a font service: one variable
   file has every weight. SIL Open Font License, in fonts/Inter-OFL.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.ac87cd6a1b.woff2") format("woff2");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: 1.4;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

h1 { font-size: var(--text-title-large-size); font-weight: var(--text-title-large-weight); line-height: 1.2; }
h2 { font-size: var(--text-title-large-size); font-weight: var(--text-title-large-weight); line-height: 1.2; }

.muted { color: var(--color-text-secondary); }
.strong { font-weight: var(--text-body-strong-weight); }
.overline {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overline.accent { color: var(--color-accent-text); }

/* ---- The site: the header, the page, the footer. ---- */
.site { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.site > main { flex: 1; width: 100%; min-height: 0; }
/* The live show: the screen's height, nothing scrolling but the chat. */
.site.live { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }

/* The header, 48px: the store at the left (home), the show in the middle
   while one is live, the sound and the account at the right. */
.top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 48px;
  flex: none;
  padding: 0 var(--space-lg);
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  flex: 0 1 auto;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-window-title-size);
  font-weight: var(--text-window-title-weight);
  white-space: nowrap;
}
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand-logo { border-radius: var(--radius-sm); object-fit: cover; flex: none; }
/* The logo's place while the store loads: the size of a logo, empty. */
.brand-logo-slot { display: inline-block; width: 28px; height: 28px; }
.band-show { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.band-show-title {
  margin: 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); flex: none; }
.signed-in { color: var(--color-info); font-weight: var(--text-body-strong-weight); }
.top-bar .signed-in { border-color: transparent; }
/* LIVE, with the count: the one red pill. */
.live-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  background: var(--color-danger);
  color: var(--color-on-danger);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  flex: none;
}
.live-label .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
a.live-label:hover { filter: brightness(1.08); }
.icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-raised);
  color: var(--color-text);
  cursor: pointer;
  flex: none;
}
.icon-button:hover { background: var(--color-selected); }
.icon-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sound-button.off { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 60%, transparent); }

/* On a phone's live page: the way back and the show, not the store's name. */
@media (max-width: 699px), (orientation: portrait) {
  .site.live .brand-name { display: none; }
  .site.live .brand::before { content: "‹"; font-size: 20px; line-height: 1; color: var(--color-text-secondary); margin-right: 2px; }
  .site.live .top-bar { padding: 0 var(--space-md); gap: var(--space-sm); }
}

/* The pages. A show coming up or over, and a show that cannot be shown:
   one column. */
.page { width: 100%; }
.page.solo { max-width: 760px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-xxl); }
.page.live { flex: 1; min-height: 0; display: flex; }

/* A prompt the account sheet answers ("Sign in to buy"): words that read as
   a link and open it. */
button.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-info);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
button.link:hover { color: var(--color-text); }
button.link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card.empty, .empty { text-align: center; padding: var(--space-xxl); }
.card.empty { gap: var(--space-xs); }

.hint { color: var(--color-text-secondary); }

.button {
  min-height: 36px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-raised);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--text-body-strong-weight);
  cursor: pointer;
  transition: filter var(--motion-transition) ease-out, background var(--motion-transition) ease-out;
}
.button:hover:not(:disabled) { background: var(--color-selected); }
.button.primary {
  border-color: var(--color-primary-button);
  background: var(--color-primary-button);
  color: var(--color-on-primary-button);
  font-weight: 700;
}
.button.primary:hover:not(:disabled) { border-color: var(--color-primary-button-hover); background: var(--color-primary-button-hover); }
.button.primary:active:not(:disabled) { border-color: var(--color-primary-button-pressed); background: var(--color-primary-button-pressed); }
.button.ghost { background: transparent; }
.button.large { min-height: 44px; font-size: 14px; }
.button:disabled { opacity: 0.4; cursor: default; }
.button.pill { border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button.large.pill { border-radius: 22px; padding: 0 22px; font-size: 15px; }
a.button { color: var(--color-text); }
a.button.primary { color: var(--color-on-accent); }
/* The white pill: Watch now. */
.button.stage-primary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); font-weight: 600; min-height: 36px; padding: 0 16px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button.stage-primary:hover:not(:disabled) { background: var(--color-text); opacity: 0.9; }

:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent) 60%, transparent); outline-offset: 2px; }

.notice {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-caption-size);
}
.notice.success { background: var(--color-success-tint); color: var(--color-success); }
.notice.danger { background: var(--color-danger-tint); color: var(--color-danger-text); }
.notice.info { background: var(--color-info-tint); color: var(--color-info-text); }

/* ---- A buyer's order: the purchases, the totals, the shipping. ---- */
.purchases { display: flex; flex-direction: column; gap: var(--space-sm); }
.purchases li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-lg);
  min-height: 44px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.purchase-includes { font-size: 12px; }
.order-totals { display: flex; flex-direction: column; gap: var(--space-sm); }
.order-totals dl { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; }
.order-totals .row { display: flex; justify-content: space-between; gap: var(--space-lg); }
.order-totals dt { color: var(--color-text-secondary); }
.order-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.order-totals .total dt, .order-totals .total dd { color: var(--color-text); font-weight: 600; }
.order-totals .danger dt, .order-totals .danger dd { color: var(--color-danger-text); }
.status { color: var(--color-text-secondary); font-size: var(--text-caption-size); font-weight: 600; }
.status.success { color: var(--color-success); }
.status.danger { color: var(--color-danger-text); }
.status.accent { color: var(--color-accent-text); }

/* The buyer's order history, in the account sheet: an order a line, opened
   in place to what its show's page shows of it. */
.orders-back { padding-right: 28px; }
.my-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.my-order { border-bottom: 1px solid var(--color-border-subtle); }
.my-order-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-sm) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.my-order-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.my-order-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.my-order-title .strong { min-width: 0; overflow-wrap: anywhere; }
.my-order-title .status { flex-shrink: 0; }
.my-order-body { padding-bottom: var(--space-md); }

/* ---- The account's forms. ---- */
.account form { display: flex; flex-direction: column; gap: var(--space-md); }
.account .actions, .actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.tabs { display: flex; gap: var(--space-xs); }
.tab {
  height: 30px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
}
.tab.selected { background: var(--color-selected); color: var(--color-text); font-weight: 600; }

.field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.field label { color: var(--color-text-secondary); font-size: var(--text-caption-size); }
.field input {
  height: 36px;
  width: 100%;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.field input:focus { outline: 1px solid var(--color-accent); border-color: var(--color-accent); }
.field select {
  height: 36px;
  width: 100%;
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.field select:focus { outline: 1px solid var(--color-accent); border-color: var(--color-accent); }
.field.invalid select { border-color: var(--color-danger-border); }
/* A password field's eye, inside its right end. */
.field .password { position: relative; }
.field .password input { padding-right: 40px; }
.field .password .reveal {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.field .password .reveal:hover, .field .password .reveal:focus-visible { color: var(--color-text); }
.check { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-caption-size); color: var(--color-text-secondary); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
/* Stripe's card form, drawn in its own frame; room kept while it loads. */
.stripe-card { min-height: 64px; }
/* A field's rule while it is unmet, or what is wrong with it. */
.field-note { display: block; margin-top: 4px; font-size: var(--text-caption-size); color: var(--color-text-secondary); }
.field-note.error { color: var(--color-danger-text); }
.field.invalid input { border-color: var(--color-danger-border); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- The live show: the video and the column. ----
   Stacked on a phone (and upright): the video whole at the top, the column
   under it taking the rest. Side by side on a laptop: the video whole in
   the area at the left, the column 320px at the right. Nothing is ever
   drawn over the picture but the sound pill while the browser holds sound
   back, and the band while the seller is away: the Studio draws the item
   camera into a corner of the picture the seller picks. */
.show-grid {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
.video-area {
  position: relative;
  min-height: 0;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 56vh;
  max-height: 56dvh;
  background: var(--color-video-black, #000);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.show-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-subtle);
}
@media (min-width: 700px) and (orientation: landscape) {
  .show-grid { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 320px; }
  .video-area { aspect-ratio: auto; height: 100%; max-height: none; }
  .show-column { border-top: 0; border-left: 1px solid var(--color-border-subtle); }
}

/* The seller's live video: whole, on black where the shapes differ. */
.video {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-video-black, #000);
  overflow: hidden;
}
.video-stage { position: absolute; inset: 0; }
.video-stage video.main { width: 100%; height: 100%; object-fit: contain; display: block; }
.video-stage video.inset {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  width: 132px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border);
}
.video-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
}
/* Sound held back by the browser until a click: over the picture's top
   left, gone at the first click. */
.sound-pill {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 15px;
  background: rgba(11, 11, 12, 0.72);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sound-pill:hover { background: rgba(11, 11, 12, 0.85); }
/* The seller away or the show paused: the show's cover where the video was,
   the message in a band across its middle. */
.video-away { position: absolute; inset: 0; background: var(--color-panel); }
.video-away img { width: 100%; height: 100%; object-fit: contain; display: block; }
.video-away-band {
  position: absolute;
  left: var(--space-lg);
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: rgba(10, 10, 12, 0.78);
  color: #fff;
  text-align: center;
}
.video-away-band .strong { font-size: 1.1rem; }
.video-away-band span:not(.strong) { color: rgba(255, 255, 255, 0.8); }
.video:has(.video-away) .sound-pill { display: none; }

/* A live show to someone not signed in (work queue item 53): its cover, or
   the store's logo on the theme's colours, with the band across its foot
   saying to sign in; the buttons in the column. */
.show-banner .video-away-band { top: auto; bottom: 0; left: 0; right: 0; transform: none; border-radius: 0; text-align: left; align-items: flex-start; }
.video-away.banner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-tint), var(--color-panel));
}
.video-away.banner-logo img.banner-logo-image {
  width: auto;
  height: auto;
  max-width: 40%;
  max-height: 45%;
  object-fit: contain;
  margin-bottom: 18%;
}
.banner-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.column-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }
.column-card-title { font-size: 16px; overflow-wrap: anywhere; }

/* The item on sale, at the top of the column: picture, what it is, what it
   costs, the way to buy. The same card says when nothing is on sale and
   while the show loads. */
.show-column > .item-card, .item-card-wrap {
  flex: none;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
}
.item-card-wrap { display: flex; flex-direction: column; gap: var(--space-sm); }
.item-card { display: flex; gap: var(--space-md); min-width: 0; }
.item-image {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--color-raised);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.item-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.item-top { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-sm); min-width: 0; }
.item-status-row > * { min-width: 0; }
.item-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}
.item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-secondary); display: inline-block; flex: none; }
.item-card.selling .item-status { color: var(--color-text); }
.item-card.selling .item-dot { background: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent); animation: item-pulse 1.6s ease-in-out infinite; }
.item-card.sold-out .item-dot { background: var(--color-danger-text); }
.item-card.sold-out .item-status { color: var(--color-danger-text); }
/* Paused: on air, held still until the seller resumes. */
.item-card.paused .item-status { color: var(--color-warning); }
.item-card.paused .item-dot { background: var(--color-warning); }
.item-qty { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.item-title {
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Two lines at most (one on a phone): clamped on the button that holds the
   words, since a box clamps only the lines it lays out itself. */
.item-title-open, .item-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.item-detail {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.item-price-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-price-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.item-price {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.item-card.sold-out .item-price { color: var(--color-text-secondary); text-decoration: line-through; }
.item-buy {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: var(--color-primary-button);
  color: var(--color-on-primary-button);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
  transition: background var(--motion-transition) ease-out;
}
.item-buy:hover:not(:disabled) { background: var(--color-primary-button-hover); }
.item-buy:active:not(:disabled) { background: var(--color-primary-button-pressed); }
.item-buy:disabled { background: var(--color-raised); color: var(--color-text-secondary); cursor: default; }
.item-buy:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.item-buy-hint {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: right;
  max-width: 60%;
}
/* Waiting for the show, and nothing on sale: the frame without a price. */
.item-card.idle .item-top, .item-card.loading .item-top { justify-content: center; height: 100%; }
.item-card.idle .item-body, .item-card.loading .item-body { justify-content: center; }
.item-card.loading .item-title {
  height: 16px;
  width: 60%;
  border-radius: var(--radius-sm);
  background: var(--color-raised);
}
.item-card.loading .item-image { animation: item-fade 1.2s ease-in-out infinite alternate; }
@keyframes item-pulse { 50% { opacity: 0.35; } }
@keyframes item-fade { from { opacity: 0.6; } to { opacity: 1; } }
/* The item's photo and title open its details; a Details link says so. */
.item-open { padding: 0; border: 0; cursor: zoom-in; font: inherit; }
.item-open:focus-visible, .item-title-open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.item-title-open {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.item-title-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.item-details-link { align-self: flex-start; font-size: 12px; }
.item-card-wrap .notice { margin: 0; }
/* The chat folded away on a laptop: the item's picture takes the column. */
.show-column.chat-hidden .item-card { flex-direction: column; }
.show-column.chat-hidden .item-image { width: 100%; height: auto; aspect-ratio: 1; }
.show-column.chat-hidden .item-card.loading .item-image, .show-column.chat-hidden .item-card.idle .item-image { width: 56px; height: 56px; aspect-ratio: auto; }

/* On a phone: one row, the title on one line. */
@media (max-width: 699px), (orientation: portrait) {
  .show-column > .item-card, .item-card-wrap { padding: var(--space-sm) var(--space-md); }
  .item-card { align-items: center; }
  .item-image { width: 48px; height: 48px; }
  .item-body { flex-direction: row; align-items: center; gap: var(--space-md); }
  .item-top { flex: 1; gap: 2px; }
  .item-title, .item-title-open { -webkit-line-clamp: 1; }
  .item-title { font-size: 13px; }
  .item-detail { display: none; }
  .item-bottom { flex: none; flex-direction: row; align-items: center; gap: var(--space-sm); }
  .item-price-label { display: none; }
  .item-price { font-size: 18px; }
  .item-buy { padding: 0 14px; }
  .item-buy-hint { max-width: 130px; font-size: 12px; }
  .item-card.idle .item-body, .item-card.loading .item-body { flex-direction: column; align-items: flex-start; }
  .item-card.idle .item-top, .item-card.loading .item-top { height: auto; }
}

/* Your purchases, in one line that opens them. */
.purchases-line {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-sm);
  align-items: center;
  width: 100%;
  padding: 8px var(--space-lg);
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.purchases-line:hover { background: var(--color-panel); }
.purchases-line:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.purchases-line .overline { grid-row: 1; grid-column: 1; }
.purchases-line .strong { grid-row: 2; grid-column: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purchases-line .purchases-open { grid-row: 1 / span 2; grid-column: 2; color: var(--color-text-secondary); font-size: 18px; line-height: 1; }
@media (max-width: 699px), (orientation: portrait) {
  .purchases-line { padding: 6px var(--space-md); grid-template-rows: auto; grid-template-columns: auto minmax(0, 1fr) auto; }
  .purchases-line .overline { grid-row: 1; grid-column: 1; }
  .purchases-line .strong { grid-row: 1; grid-column: 2; font-size: 12.5px; }
  .purchases-line .purchases-open { grid-row: 1; grid-column: 3; }
}

/* The chat: what people are saying, the newest at the foot, and the box to
   write in at the very foot of the column. */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-xs); padding-bottom: var(--space-md); }
.chat.hidden { flex: none; padding-bottom: 0; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 10px var(--space-lg) 2px; }
.chat-toggle { font-size: 12px; }
.chat-pinned {
  margin: 2px var(--space-lg) 2px;
  padding: 8px 10px;
  background: var(--color-raised);
  border-radius: var(--radius-md);
  font-size: 12.5px;
}
.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px var(--space-lg);
  font-size: 13px;
}
/* Few messages: at the foot, where the next one lands. */
.chat-list > :first-child { margin-top: auto; }
.chat-message { line-height: 1.4; overflow-wrap: anywhere; }
.chat-name { color: var(--color-info); font-weight: 600; }
.chat-name.seller { color: var(--color-accent-text); }
.chat .hint { padding: 2px var(--space-lg) 0; font-size: 12.5px; }
.chat .notice { margin: 0 var(--space-lg); }
.chat-form { display: flex; gap: var(--space-sm); padding: 4px var(--space-lg) 0; }
.chat-form input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  color: var(--color-text);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  font: inherit;
}
.chat-form input:focus { outline: 1px solid var(--color-accent); border-color: var(--color-accent); }
.chat-form .button { border-radius: 18px; }
@media (max-width: 699px), (orientation: portrait) {
  .chat { padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); }
  .chat-head { padding: 6px var(--space-md) 0; }
  .chat-pinned, .chat .notice { margin-left: var(--space-md); margin-right: var(--space-md); }
  .chat-list { padding: 4px var(--space-md); }
  .chat .hint, .chat-form { padding-left: var(--space-md); padding-right: var(--space-md); }
}

/* ---- The sheet: everything that reads or asks. ----
   A drawer from the right on a laptop, a sheet from the foot on a phone,
   above the header, the chat and the video; one over another above that
   (the terms over the agree step); the photo viewer over all. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 45%, transparent);
}
.sheet-backdrop.over { z-index: 50; }
.sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  box-shadow: -12px 0 40px rgb(0 0 0 / 0.35);
}
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 14px var(--space-lg) 10px; }
.sheet-head h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-lg) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.sheet .card { border: 0; padding: 0; background: transparent; }
.menu-close {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.menu-close:hover { background: var(--color-selected); color: var(--color-text); }
.menu-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 699px) {
  .sheet {
    top: auto;
    left: 0;
    width: 100%;
    height: 92%;
    max-height: 92%;
    border-left: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgb(0 0 0 / 0.35);
  }
  .sheet::before { content: ""; display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--color-border); }
  .sheet.short { height: auto; }
  .sheet-body { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); }
}

/* The details of an item, in the sheet: its photos, then everything the
   seller said about it. */
.details-photos { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.details-photo {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--color-raised);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.details-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.details-thumbs { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.details-thumb {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-raised);
  overflow: hidden;
  cursor: pointer;
}
.details-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.details-thumb.selected { border-color: var(--color-accent); }
.details-thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.details-body { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.details-body h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.details-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.details-status .item-dot { background: var(--color-danger); animation: item-pulse 1.6s ease-in-out infinite; }
.details-status.sold-out { color: var(--color-danger-text); }
.details-status.sold-out .item-dot { background: var(--color-danger-text); animation: none; }
.details-status.coming-up { color: var(--color-text-secondary); }
.details-status.coming-up .item-dot { background: var(--color-text-secondary); animation: none; }
.details-status.paused { color: var(--color-warning); }
.details-status.paused .item-dot { background: var(--color-warning); animation: none; }
.details-variant { margin: 0; color: var(--color-text-secondary); }
/* A bundle's items (work queue item 68). */
.details-bundle { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.details-bundle-item {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.details-bundle-item:hover { background: var(--color-raised); }
.details-bundle-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.details-bundle-item > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.details-bundle-open { color: var(--color-text-secondary); font-size: 20px; line-height: 1; }
.details-back { align-self: flex-start; }
.details-bundle-photo { width: 56px; height: 56px; flex: none; border-radius: var(--radius-md); object-fit: contain; background: var(--color-raised); }
.details-buy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.details-left { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.details-over { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.details-note { margin: 0; font-weight: 600; }
.details-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-md); }
.details-facts dt { color: var(--color-text-secondary); font-size: var(--text-caption-size); padding-top: 2px; }
.details-facts dd { margin: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.details-description { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

/* The card terms (work queue item 58) and the agree step. */
.terms-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.card-terms { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: var(--space-sm); }
.card-terms .field-note { margin-top: 0; }
.card-terms-links { display: flex; flex-wrap: wrap; gap: 4px var(--space-lg); }
.card-terms-box { color: var(--color-text); }

/* A shop photo opened whole over the page (asked Oct 24). */
.photo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  background: rgb(0 0 0 / 0.7);
}
.photo-viewer { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); max-width: min(1100px, 100%); }
.photo-full { max-width: 100%; max-height: calc(100vh - 2 * var(--space-lg) - 56px); object-fit: contain; border-radius: var(--radius-lg); background: var(--color-raised); display: block; }
.photo-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 32px; height: 32px; background: color-mix(in srgb, var(--color-panel) 80%, transparent); }
.photo-nav { display: flex; align-items: center; gap: var(--space-md); }
.photo-nav .button { min-width: 44px; font-size: 20px; line-height: 1; }

/* ---- While the store loads: nothing for half a second, then a quiet spinner. ---- */
.page-loading {
  display: grid;
  place-items: center;
  min-height: 40vh;
  opacity: 0;
  animation: page-loading-show 0.2s ease-out 0.5s forwards;
}
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-secondary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes page-loading-show { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-xl) var(--space-xxl);
  font-size: var(--text-caption-size);
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--text-body-strong-weight); color: var(--color-accent-text); text-decoration: none; align-self: flex-start; }
.back-link::before { content: "‹"; font-size: 18px; line-height: 1; }
.back-link:hover { color: var(--color-accent); }

/* ---- The front page: a shop page. ---- */
.home-page { max-width: 1120px; margin: 0 auto; padding: var(--space-lg) var(--space-xl) var(--space-xxl); width: 100%; }
.home { display: flex; flex-direction: column; gap: var(--space-xl); }
/* The banner whole, in its own shape, never cropped and never written over. */
.banner-whole {
  display: flex;
  justify-content: center;
  max-height: 400px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-panel);
  border: 1px solid var(--color-border-subtle);
}
.banner-whole img { display: block; width: 100%; height: auto; max-height: 400px; object-fit: contain; }
/* Who the shop is. */
.ident { display: flex; align-items: center; gap: var(--space-lg); }
.ident-logo { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; background: var(--color-raised); }
.ident-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ident-text h1 { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ident-tagline { font-size: 14px; }
.ident-facts { font-size: 12px; }
/* The show that is on: the one thing to do now. */
.now-live {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.now-cover { width: 160px; aspect-ratio: 16 / 9; flex: none; border-radius: var(--radius-md); background: var(--color-video-black); overflow: hidden; }
.now-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.now-title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.now-live .stage-primary { flex: none; }
.now-live:hover .now-title { text-decoration: underline; text-underline-offset: 2px; }

.upcoming { display: flex; flex-direction: column; gap: var(--space-md); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.section-heading h2, .about h2, .show-items h2 { font-size: 17px; font-weight: 700; }
.upcoming-empty {
  padding: var(--space-xxl);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  border: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
  text-align: center;
}
/* The next shows as cover tiles with a date badge. */
.show-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-lg); }
.show-tile a { display: flex; flex-direction: column; gap: var(--space-sm); color: var(--color-text); text-decoration: none; min-width: 0; }
.show-tile-cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-panel); border: 1px solid var(--color-border-subtle); }
.show-tile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.show-tile-when { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--color-bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.show-tile-when .weekday { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--color-text-secondary); }
.show-tile-when .day { font-size: 20px; line-height: 22px; font-weight: 700; }
.show-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.show-tile-title { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-tile a:hover .show-tile-title { text-decoration: underline; text-underline-offset: 2px; }

.about { display: flex; flex-direction: column; gap: var(--space-lg); }
.about-columns { display: flex; flex-wrap: wrap; gap: var(--space-xxl); align-items: flex-start; }
.about-main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.about-text { color: var(--color-text); white-space: pre-line; }
.about-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.about-photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; display: block; background: var(--color-panel); }
.about-photos .about-photo { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; display: block; }
.about-photos .about-photo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.about-details {
  flex: 1 1 280px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-border-subtle);
}
.about-details dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-secondary); text-transform: uppercase; }
.about-details dd { margin: 2px 0 0; }

@media (max-width: 600px) {
  .home-page { padding: var(--space-md) var(--space-lg) var(--space-xl); }
  .home { gap: var(--space-lg); }
  .banner-whole { border-radius: 10px; }
  .ident { align-items: flex-start; gap: var(--space-md); }
  .ident-logo { width: 44px; height: 44px; border-radius: 11px; }
  .ident-text h1 { font-size: 20px; }
  .now-live { flex-wrap: wrap; }
  .now-cover { width: 100%; }
  .now-live .stage-primary { width: 100%; }
  .site-footer { padding: var(--space-lg); }
}

/* ---- A show coming up or over: its cover and what is in it. ---- */
.show-page { display: flex; flex-direction: column; gap: var(--space-md); }
.cover-big { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--color-panel); border: 1px solid var(--color-border-subtle); }
.cover-big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-big.banner-logo { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-accent-tint), var(--color-panel)); }
.cover-big.banner-logo img { width: auto; height: auto; max-width: 40%; max-height: 45%; object-fit: contain; }
.cover-pill {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cover-pill.ended { color: var(--color-text-secondary); }
.show-page h1 { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.show-meta { font-size: 13px; }
.show-items { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-sm); }
.item-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
.item-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item-tile-photo { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--color-panel); border: 1px solid var(--color-border-subtle); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.item-tile-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item-tile-title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-tile-price { font-size: 12px; color: var(--color-text-secondary); }
.item-tile-price.sold { text-decoration: line-through; }
.order-line { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-panel); }
.order-line .purchases-open { font-size: 13px; color: var(--color-info); text-decoration: underline; text-underline-offset: 2px; }
.show-page .column-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-panel); }
@media (max-width: 600px) {
  .page.solo { padding: var(--space-md) var(--space-lg) var(--space-xl); }
  .cover-big { border-radius: 10px; }
  .show-page h1 { font-size: 20px; }
  .item-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Testing mode: a band above everything, on every page. ---- */
.testing-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-warning);
  color: var(--color-bg);
  font-weight: var(--text-body-strong-weight);
  text-align: center;
  flex: none;
}
.testing-banner-label {
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-warning);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* A newer release is out (work queue item 56): a slim bar at the top, with
   Refresh. */
.new-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-accent-tint);
  color: var(--color-text);
  font-weight: var(--text-body-strong-weight);
  text-align: center;
  flex: none;
}

/* ---- Coming soon: the one stage left (the design pass of Nov 3). ----
   The whole screen one picture (the phone banner upright on a phone), the
   header a thin band over its top, the name and the message over its foot.
   Every colour is the theme's, so a shop's look carries. */
.site.stage { min-height: 100vh; min-height: 100dvh; }
.site.stage > main { display: flex; flex-direction: column; }
.stage-frame { position: relative; flex: 1; display: flex; flex-direction: column; overflow: clip; }
.site.stage.whole .stage-frame { min-height: 100vh; min-height: 100dvh; }
.stage-frame > main { flex: 1; display: flex; flex-direction: column; }
.site.stage .home-page { max-width: none; padding: 0; margin: 0; }
.stage-page { position: static; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.stage-backdrop { position: absolute; inset: 0; background: var(--color-bg); z-index: 0; }
.stage-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.stage-backdrop img.upright { display: none; }
@media (orientation: portrait) { .stage-backdrop img.upright { display: block; } .stage-backdrop img.wide { display: none; } }
.site.stage .top-bar {
  height: auto;
  min-height: 44px;
  padding: 6px var(--space-xl) 24px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 62%, transparent) 0%, color-mix(in srgb, var(--color-bg) 20%, transparent) 60%, transparent 100%);
  border-bottom: 0;
}
.site.stage .top-bar .brand, .site.stage .top-bar .signed-in { text-shadow: 0 1px 2px color-mix(in srgb, var(--color-bg) 60%, transparent), 0 2px 12px color-mix(in srgb, var(--color-bg) 50%, transparent); }
.site.stage .top-bar .button { background: color-mix(in srgb, var(--color-bg) 40%, transparent); border-color: color-mix(in srgb, var(--color-text) 40%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stage-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 64px var(--space-xl) var(--space-lg);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 82%, transparent) 0%, color-mix(in srgb, var(--color-bg) 40%, transparent) 60%, transparent 100%);
}
.stage-tease { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 520px; text-shadow: 0 1px 2px color-mix(in srgb, var(--color-bg) 60%, transparent), 0 2px 12px color-mix(in srgb, var(--color-bg) 50%, transparent); }
.stage-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.stage-headline { margin: 0; font-size: 28px; line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
.stage-sub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-text); opacity: 0.85; max-width: 46ch; white-space: pre-line; }
.coming-soon-message { font-size: 16px; }
@media (max-width: 600px) {
  .site.stage .top-bar { padding: 6px var(--space-md) 20px; }
  .stage-bottom { padding: 48px var(--space-md) var(--space-md); }
  .stage-headline { font-size: 22px; }
  .stage-sub { font-size: 13px; }
  .stage-tease { max-width: none; }
}