/* Humble Crumb customer-experience additions */

.brand-mark {
  object-fit: contain;
  object-position: center;
}

.site-header .brand-mark {
  width: 50px;
  height: 50px;
}

.site-footer .brand-mark {
  width: 58px;
  height: 58px;
}

.site-nav {
  gap: clamp(0.55rem, 1vw, 1.1rem);
}

.site-nav a {
  font-size: clamp(0.78rem, 0.85vw, 0.94rem);
}

.preview-note {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.preview-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-flag::before {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primary);
  content: '';
}

/* Cinematic, real-photo story sequence */
.story-reel {
  overflow: hidden;
  background: var(--color-crust);
  color: var(--color-text-inverse);
}

.story-reel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: stretch;
  min-height: clamp(560px, 65vw, 760px);
}

.story-reel-stage {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background: #140f0b;
}

.story-reel-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: storyFrame 30s infinite;
}

.story-reel-frame:nth-child(2) { animation-delay: 6s; }
.story-reel-frame:nth-child(3) { animation-delay: 12s; }
.story-reel-frame:nth-child(4) { animation-delay: 18s; }
.story-reel-frame:nth-child(5) { animation-delay: 24s; }

.story-reel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: storyDrift 6s ease-out infinite;
}

.story-reel-frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgb(20 15 11 / 72%) 100%);
  content: '';
}

.story-reel-frame figcaption {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  left: clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: #fff8ed;
  font-size: var(--text-sm);
  font-weight: 700;
}

.story-reel-frame figcaption span:last-child {
  color: #d9ccc0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-reel-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 7vw, 6.5rem);
  background:
    radial-gradient(circle at 10% 10%, rgb(242 112 63 / 15%), transparent 30%),
    var(--color-crust);
}

.story-reel .eyebrow,
.story-reel-copy p {
  color: #cbbdb1;
}

.story-reel h2 {
  max-width: 10ch;
  margin-top: var(--space-5);
  color: #fff8ed;
  font-size: clamp(2.3rem, 5vw, 4.9rem);
}

.story-reel-copy p {
  margin-top: var(--space-6);
  font-size: var(--text-base);
}

.story-reel-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}

.story-reel-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff8ed;
  font-size: var(--text-sm);
}

.story-reel-list li::before {
  width: 18px;
  height: 1px;
  background: var(--color-primary);
  content: '';
}

.story-video-stage {
  position: relative;
  overflow: hidden;
  background: var(--color-crust);
}
.story-video-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-video-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, oklch(0.18 0.03 50 / 0.72), transparent 52%);
}
.story-video-caption {
  position: absolute;
  z-index: 2;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  color: #fff8f0;
  font-size: var(--text-sm);
  font-weight: 700;
}
.story-video-caption span:last-child { font-size: var(--text-xs); opacity: .78; font-weight: 500; }
.story-video-control {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  right: var(--space-4);
  padding: 8px 13px;
  border-radius: var(--radius-full);
  background: oklch(0.18 0.03 50 / .74);
  color: #fff8f0;
  border: 1px solid oklch(1 0 0 / .42);
  font-size: var(--text-xs);
  font-weight: 700;
  backdrop-filter: blur(10px);
}
.story-video-control:focus-visible { outline: 3px solid var(--color-aqua); outline-offset: 3px; }
.story-photo-support {
  width: min(1180px, calc(100% - 2 * var(--space-5)));
  margin: var(--space-8) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.story-photo-support figure { min-width: 0; }
.story-photo-support img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.story-photo-support figcaption { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
@media (max-width: 720px) {
  .story-photo-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-video-caption { display: block; }
  .story-video-caption span { display: block; }
  .story-video-caption span:last-child { margin-top: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) {
  .story-video-stage video { animation: none; }
}

@keyframes storyFrame {
  0%, 18% { opacity: 1; }
  22%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes storyDrift {
  from { transform: scale(1.04); }
  to { transform: scale(1.1); }
}

/* Mission and trust */
.values-section {
  background: var(--color-surface-offset);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.value-card {
  min-height: 190px;
  padding: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.value-card .value-number {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.value-card h3 {
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.value-card p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.recognition-rail {
  border-block: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.recognition-grid {
  display: grid;
  grid-template-columns: 0.85fr repeat(3, 1fr);
  align-items: stretch;
}

.recognition-heading,
.recognition-item {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.recognition-item {
  border-left: 1px solid var(--color-divider);
  color: var(--color-text);
  text-decoration: none;
}

.recognition-item:hover {
  background: var(--color-surface-offset);
}

.recognition-item span {
  display: block;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recognition-item strong {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.recognition-item p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.reward-callout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid var(--color-border);
  border-radius: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 90% 10%, var(--color-aqua-soft), transparent 38%),
    var(--color-surface);
  box-shadow: var(--shadow-md);
}

.reward-callout h2 {
  margin-top: var(--space-3);
  font-size: var(--text-2xl);
}

.reward-callout p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

/* Curated menu */
.curation-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.curation-notice strong {
  display: block;
}

.curation-notice p {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Cake clarity */
.cake-paths {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.cake-path-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.cake-path-card span {
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cake-path-card h3 {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
}

.cake-path-card p,
.cake-path-card ul {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.cake-path-card ul {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.1rem;
}

.cake-path-card .text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--space-5);
}

/* Venue */
.venue-hero-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.venue-hero-image,
.venue-card img {
  width: 100%;
  object-fit: cover;
}

.venue-hero-image {
  aspect-ratio: 4 / 3;
  border-radius: clamp(1rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}

.venue-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.venue-card {
  overflow: hidden;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.venue-card img {
  aspect-ratio: 4 / 3;
}

.venue-card-body {
  padding: var(--space-6);
}

.venue-card-body h3 {
  font-size: var(--text-lg);
}

.venue-card-body p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.venue-facts {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.venue-facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.venue-facts strong {
  color: var(--color-text);
  text-align: right;
}

.asset-caption {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.package-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-10);
  align-items: start;
}

.package-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.package-list li {
  min-height: 110px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
  list-style: none;
}

.package-list strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

/* Tuesday Tea */
.tea-demo-banner {
  position: relative;
  z-index: 2;
  padding: var(--space-4);
  background: var(--color-aqua-soft);
  color: var(--color-text);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
}

.tea-intro-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}

.tea-intro-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: clamp(1rem, 3vw, 2rem);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.tea-session-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.tea-session-card {
  padding: var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.tea-session-card h3 {
  margin-top: var(--space-2);
  font-size: var(--text-lg);
}

.capacity-meter {
  height: 8px;
  margin-top: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset-2);
}

.capacity-meter span {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.tea-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.tea-planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: var(--space-6);
  align-items: start;
}

.tea-form-card,
.tea-summary-card {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.tea-summary-card {
  position: sticky;
  top: 96px;
}

.tea-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.tea-field {
  display: grid;
  gap: var(--space-2);
}

.tea-field--wide {
  grid-column: 1 / -1;
}

.tea-field label,
.tea-field .field-label {
  font-size: var(--text-sm);
  font-weight: 700;
}

.tea-field input,
.tea-field select,
.tea-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.tea-field textarea {
  min-height: 100px;
  resize: vertical;
}

.tea-assessment {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tea-assessment[data-kind='available'] { border-left-color: var(--color-success); }
.tea-assessment[data-kind='conflict'],
.tea-assessment[data-kind='waitlist'],
.tea-assessment[data-kind='error'] { border-left-color: var(--color-error); }

.tea-summary-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.tea-summary-list div {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.tea-summary-list span,
.tea-summary-list strong {
  display: block;
}

.tea-summary-list span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tea-summary-list strong {
  margin-top: 0.25rem;
}

.tea-success {
  padding: clamp(2rem, 7vw, 5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.tea-success h2 {
  margin-top: var(--space-5);
  font-size: var(--text-2xl);
}

.tea-success p {
  margin: var(--space-4) auto 0;
  color: var(--color-text-muted);
}

.tea-success .demo-reference {
  display: inline-flex;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  font-weight: 800;
}

/* Rewards */
.rewards-hero {
  overflow: hidden;
}

.rewards-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
}

.rewards-card-demo {
  position: relative;
  min-height: 460px;
  padding: clamp(1.75rem, 5vw, 4rem);
  overflow: hidden;
  border-radius: clamp(1.25rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 80% 20%, rgb(169 214 207 / 55%), transparent 32%),
    linear-gradient(145deg, #2a211b 0%, #3c2b20 100%);
  color: #fff8ed;
  box-shadow: var(--shadow-lg);
}

.rewards-card-demo::after {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  content: '';
}

.rewards-card-demo img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.rewards-card-demo h2 {
  max-width: 8ch;
  margin-top: var(--space-12);
  font-size: var(--text-2xl);
}

.rewards-card-demo p {
  margin-top: var(--space-5);
  color: #d9ccc0;
}

.rewards-card-demo .preview-flag {
  position: absolute;
  right: var(--space-5);
  top: var(--space-5);
  border-color: rgb(255 255 255 / 24%);
  background: rgb(255 255 255 / 8%);
  color: #fff8ed;
}

.rewards-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.rewards-step {
  padding: var(--space-6);
  border-top: 2px solid var(--color-primary);
}

.rewards-step span {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rewards-step h3 {
  margin-top: var(--space-4);
}

.rewards-step p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 1080px) {
  .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cake-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header .brand-name { font-size: 1.08rem; }
  .site-header .brand-sub { display: none; }
}

@media (max-width: 900px) {
  .story-reel-grid,
  .venue-hero-grid,
  .package-grid,
  .tea-intro-grid,
  .rewards-grid {
    grid-template-columns: 1fr;
  }

  .story-reel-copy { order: -1; }
  .story-reel h2 { max-width: 14ch; }
  .recognition-grid { grid-template-columns: repeat(2, 1fr); }
  .recognition-item { border-top: 1px solid var(--color-divider); border-left: 0; }
  .recognition-item:nth-child(even) { border-left: 1px solid var(--color-divider); }
  .venue-gallery,
  .tea-session-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tea-planner { grid-template-columns: 1fr; }
  .tea-summary-card { position: static; }
}

@media (max-width: 700px) {
  .story-reel-stage { min-height: 460px; }
  .values-grid,
  .venue-gallery,
  .tea-session-grid,
  .rewards-steps { grid-template-columns: 1fr; }
  .cake-paths { grid-template-columns: 1fr; }
  .value-card { min-height: auto; }
  .value-card h3 { margin-top: var(--space-5); }
  .recognition-grid { grid-template-columns: 1fr; }
  .recognition-item,
  .recognition-item:nth-child(even) { border-top: 1px solid var(--color-divider); border-left: 0; }
  .reward-callout { grid-template-columns: 1fr; }
  .package-list { grid-template-columns: 1fr; }
  .tea-form-grid { grid-template-columns: 1fr; }
  .tea-field--wide { grid-column: auto; }
}

@media (max-width: 420px) {
  .site-header .brand-mark { width: 38px; height: 38px; }
  .story-reel-stage { min-height: 400px; }
  .story-reel-frame figcaption { display: block; }
  .story-reel-frame figcaption span:last-child { margin-top: var(--space-2); }
  .venue-card-body,
  .tea-session-card { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .story-reel-frame { display: none; animation: none; }
  .story-reel-frame:first-child { display: block; opacity: 1; }
  .story-reel-frame img { animation: none; transform: none; }
}

.square-confirmation-note {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.square-confirmation-note h1 {
  margin: var(--space-5) auto var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.02;
}

.square-confirmation-note .hero-ctas {
  justify-content: center;
  margin-top: var(--space-8);
}

.square-confirmation-note .preview-note {
  margin-top: var(--space-8);
}