/* What the Food? — root stub.
   Page never scrolls sideways; only .stub-carousel-scroller does. */

html.stub-page,
html.stub-page body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  max-width: 100%;
}

body.stub-page {
  width: 100%;
  position: relative;
}

.stub-main {
  max-width: 100%;
  overflow-x: hidden;
  padding-block: 2.75rem 4rem;
}

.stub {
  --stub-col: min(100% - 2 * var(--gutter), 72rem);

  width: var(--stub-col);
  max-width: 100%;
  margin-inline: auto;
}

.stub-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  margin-bottom: 2.75rem;
}

.stub-hero-icon {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1.4rem;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 12%, transparent);
}

.stub-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw + 0.75rem, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.stub-hero-lede {
  margin: 0;
  max-width: 22rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.stub-hero-lede-line {
  display: block;
  color: var(--ink);
  font-weight: 500;
}

.stub-store {
  display: inline-flex;
  margin-top: 0.35rem;
  line-height: 0;
  text-decoration: none;
}

.stub-store:hover {
  text-decoration: none;
  opacity: 0.92;
}

.stub-store img {
  height: 3rem;
  width: auto;
}

.stub-store-light {
  display: none;
}

:root[data-theme="dark"] .stub-store-dark {
  display: none;
}

:root[data-theme="dark"] .stub-store-light {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stub-store-dark {
    display: none;
  }

  :root:not([data-theme="light"]) .stub-store-light {
    display: block;
  }
}

/*
  Slot = full page width. Card sizes use 100vw (page is overflow-x locked).
  Do not put % sizes in inherited custom props on a max-content track.
*/
.stub-carousel {
  --stub-gap: 1.5rem;
  --stub-visible: 3;
  --stub-col: min(100vw - 2 * var(--gutter), 72rem);
  --stub-card: calc((var(--stub-col) - 2 * var(--stub-gap)) / 3);
  --stub-side: max(var(--gutter), calc((100vw - var(--stub-col)) / 2));
  --stub-end: calc(
    100vw - var(--stub-side) - var(--stub-visible) * var(--stub-card)
      - (var(--stub-visible) - 1) * var(--stub-gap)
  );
  --stub-shadow-y: 1.125rem;
  --stub-shadow-blur: 3.125rem;
  --stub-shadow-pad-top: var(--stub-shadow-blur);
  --stub-shadow-pad-bottom: calc(var(--stub-shadow-y) + var(--stub-shadow-blur));

  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.stub-carousel-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--stub-side);
  padding-block: var(--stub-shadow-pad-top) var(--stub-shadow-pad-bottom);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.stub-carousel-scroller::-webkit-scrollbar {
  display: none;
}

.stub-carousel-track {
  display: flex;
  gap: var(--stub-gap);
  width: max-content;
  max-width: none;
  margin: 0;
  padding-inline-start: var(--stub-side);
  padding-inline-end: var(--stub-end);
  list-style: none;
}

.stub-carousel-track > li {
  flex: 0 0 var(--stub-card);
  width: var(--stub-card);
  max-width: var(--stub-card);
  min-width: 0;
  scroll-snap-align: start;
}

/* Last N−1 must not snap to the leading edge (one poster alone). */
.stub-carousel-track > li:nth-last-child(-n+2) {
  scroll-snap-align: none;
}

.stub-carousel-track figure {
  margin: 0;
  min-width: 0;
}

.stub-carousel-track img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--hair);
  background: var(--surface);
  box-shadow: 0 var(--stub-shadow-y) var(--stub-shadow-blur)
    color-mix(in srgb, var(--ink) 10%, transparent);
}

.stub-carousel-track figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 47.99rem) {
  .stub-carousel {
    --stub-visible: 1;
    --stub-side: var(--gutter);
    --stub-card: calc(100vw - 2 * var(--gutter) - 2.5rem);
    --stub-end: calc(100vw - var(--stub-side) - var(--stub-card));
  }

  .stub-carousel-track > li:nth-last-child(-n+2) {
    scroll-snap-align: start;
  }
}

/* Founder letter — own floor after the gallery; generous air. */
.stub-founder {
  width: min(100%, 34rem);
  margin-inline: auto;
  margin-top: 5.5rem;
  padding-block: 1rem 0.5rem;
  text-align: left;
}

.stub-founder-identity {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: 2.25rem;
}

.stub-founder-photo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 10%, transparent);
}

.stub-founder-byline {
  min-width: 0;
}

.stub-founder-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.stub-founder-role {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.stub-founder h2 {
  margin: 0 0 1.35rem;
  font-size: clamp(1.5rem, 2.2vw + 0.9rem, 1.85rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.stub-founder-body {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.62;
  letter-spacing: -0.011em;
}

.stub-founder-body p {
  margin: 0 0 1.15rem;
}

.stub-founder-body p:last-child {
  margin-bottom: 0;
}

.stub-founder-body em {
  font-style: italic;
  color: var(--ink);
}

/* Footer chrome lives in style.css (.site-footer) — shared with Privacy / Terms. */

.stub-founder + .site-footer,
.stub-main + .site-footer {
  margin-top: 5rem;
}