/* The house masthead and home editorial layout. */
:root {
  --house-ivory: #fffaf2;
  --house-cream: #f5ebdc;
  --house-rule: #ddcbb5;
  --house-pine: #263c30;
  --house-gutter: clamp(22px, 4.5vw, 76px);
  --house-notice-height: 30px;
  --house-masthead-height: 68px;
  --house-header-height: calc(var(--house-notice-height) + var(--house-masthead-height));
  scroll-padding-top: calc(var(--house-header-height) + 12px);
}

.site-header,
.site-header.is-scrolled {
  top: 0;
  right: 0;
  left: 0;
  height: auto;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.house-service {
  min-height: var(--house-notice-height);
  padding: 5px 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: var(--house-pine);
  color: var(--house-ivory);
  text-align: center;
  font: 500 10px/1.4 var(--sans);
  letter-spacing: .065em;
}
.house-service a { color: inherit; }
.house-service a:hover { text-decoration: underline; text-underline-offset: 3px; }

.house-masthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand navigation actions";
  align-items: center;
  gap: clamp(18px, 3.2vw, 58px);
  min-height: var(--house-masthead-height);
  padding: 0 var(--house-gutter);
  border-bottom: 1px solid var(--house-rule);
  background: var(--house-ivory);
  transition: background .24s ease, border-color .24s ease;
}
.house-masthead .brand { grid-area: brand; width: clamp(142px, 13vw, 183px); max-width: none; }
.house-masthead .brand img { width: 100%; max-width: 100%; }
.house-origin {
  display: none;
  grid-area: brand;
  font: 600 10px/1.4 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.house-masthead .nav-actions { grid-area: actions; }
.house-masthead nav { grid-area: navigation; justify-content: flex-start; gap: clamp(16px, 2.25vw, 38px); }
.house-masthead nav a,
.house-masthead nav a[href="christmas.html"] {
  min-height: 44px;
  font: 650 clamp(10px, .86vw, 13px)/1.2 var(--sans);
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}
.house-masthead .bag-link {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--house-rule);
  padding: 0 0 0 20px;
  font: 650 11px/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.house-masthead .bag-link span {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 3px;
  border-radius: 50%;
  background: #b7202720;
  font-variant-numeric: tabular-nums;
}

html.hero-header-pending .home-page .site-header {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html.hero-header-pending .home-page .house-masthead .brand { visibility: hidden; }
html.hero-header-pending .home-page .house-origin { display: block; }
html.hero-header-pending:not(.menu-open) .home-page .house-masthead {
  color: var(--house-ivory);
  background: #29190db3;
  border-color: #fff5df38;
}
html.hero-header-pending:not(.menu-open) .home-page .house-masthead nav a,
html.hero-header-pending:not(.menu-open) .home-page .house-masthead .bag-link { color: var(--house-ivory); }
html.hero-header-pending:not(.menu-open) .home-page .house-masthead nav a::after,
html.hero-header-pending:not(.menu-open) .home-page .house-masthead .menu-toggle span { background: var(--house-ivory); }
html.hero-header-pending:not(.menu-open) .home-page .house-masthead .bag-link { border-color: #fff5df55; }
html.hero-header-pending:not(.menu-open) .home-page .house-masthead .bag-link span { background: #fff5df25; }

/* Give the existing opening and animation a full-bleed editorial frame. */
.home-page .bake-room-light {
  background:
    linear-gradient(0deg, #1e120ed1 0%, #1e120e28 24%, transparent 49%),
    radial-gradient(ellipse at 69% 70%, #ffdfab42, transparent 47%),
    linear-gradient(90deg, #21150eb5 0%, #21150e62 34%, #21150e14 70%);
}
.home-page .bake-opening {
  top: max(138px, 24svh);
  left: var(--house-gutter);
  width: min(48vw, 620px);
  max-width: calc(100% - 2 * var(--house-gutter));
  text-align: left;
  transform: none;
  color: var(--house-ivory);
}
.home-page .bake-opening .eyebrow { color: #ffedce; font-size: 11px; letter-spacing: .18em; }
.home-page .bake-opening h2 {
  color: inherit;
  font: 500 clamp(42px, 5.2vw, 80px)/.99 var(--serif);
  letter-spacing: -.04em;
  text-shadow: 0 2px 14px #21120784;
}
.home-page .bake-opening em { color: #ffe4c4; }
.home-page .bake-brand {
  --house-logo-pad: clamp(11px, 1.2vw, 17px);
  top: max(116px, 17svh);
  width: min(35vw, 440px);
  padding: var(--house-logo-pad) var(--house-logo-pad) 0;
  isolation: isolate;
}
.home-page .bake-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  aspect-ratio: 4.18;
  border: 1px solid #fff5db;
  border-radius: 2px;
  background: #fff5e9;
  opacity: clamp(0, calc((.88 - var(--bake-render-progress, 0)) * 100), 1);
}
.home-page .bake-hero.is-static .bake-brand::before { opacity: 1; }
.home-page .bake-brand > span {
  margin: 23px auto 0;
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  color: #fff8ec;
  background: #29190db3;
  font-size: clamp(8px, .82vw, 11px);
}
.home-page .bake-skip {
  top: calc(var(--house-header-height) + 12px);
  right: var(--house-gutter);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: #fff8ec;
  background: #2e1c11a6;
  border: 1px solid #fff6e054;
  border-radius: 2px;
  font-size: 11px;
}
.home-page .bake-hero.is-wordmark-ready .bake-skip { visibility: hidden; }
.home-page .bake-hero.is-static .bake-skip,
html[data-motion="off"] .home-page .bake-skip { display: none; }
.home-page .bake-chapter, .home-page .bake-scroll { color: #fff5e5; }
.home-page .bake-chapter-name, .home-page .bake-scroll { font-size: 9px; }
.home-page .bake-scroll-line { background: #fff2d65c; }
.home-page .bake-scroll-line i { background: #fff2d6; }
.home-page .bake-cta .button { border-radius: 2px; }
.home-page .bake-cta > .text-link {
  color: #fff8ec;
  border-color: #fff8ec88;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.home-page .bake-static-products img { filter: drop-shadow(0 9px 8px #2412095c); }

/* Story first, then shopping and everyday bakery categories. */
.home-page .home-story-peek,
.home-house-gifting {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 0;
  background: var(--house-cream);
  border-bottom: 1px solid var(--house-rule);
}
.home-page .home-story-peek figure, .home-house-gifting figure {
  margin: 0;
  width: 100%;
  padding: 0;
  box-shadow: none;
}
.home-page .home-story-peek > div, .home-house-gifting .house-gifting-copy {
  padding: clamp(36px, 6vw, 105px) var(--house-gutter);
}
.home-page .home-story-peek h2,
.home-house-gifting h2 {
  margin: 18px 0 20px;
  font: 500 clamp(34px, 4.3vw, 67px)/1.01 var(--serif);
  letter-spacing: -.045em;
}
.home-page .home-story-peek .eyebrow, .home-house-gifting .eyebrow { font-size: 10px; }
.home-page .home-story-peek p:not(.eyebrow),
.home-house-gifting .house-gifting-copy > p:not(.eyebrow) { font-size: clamp(14px, 1.3vw, 17px); line-height: 1.7; }
.home-house-gifting { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.home-house-gifting figure { grid-column: 2; grid-row: 1; background: #eee2cf; }
.home-house-gifting figure img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 63%; }
.home-house-gifting .house-gifting-copy { grid-column: 1; grid-row: 1; }
.home-house-gifting .text-link { margin-top: 20px; }

.home-page #christmas-preview,
.home-page .counter-preview {
  padding: clamp(55px, 8vw, 108px) var(--house-gutter);
}
.home-page #christmas-preview { background: var(--house-ivory); }
.home-page :is(#christmas-preview, .counter-preview) .section-heading {
  align-items: end;
  gap: clamp(20px, 5vw, 68px);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.home-page :is(#christmas-preview, .counter-preview) .section-heading h2 {
  font-size: clamp(39px, 5.55vw, 80px);
  line-height: .99;
}
.home-page .home-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 48px);
}
.home-page .home-products .quick-shop-card .product-visual {
  border-radius: 2px;
  aspect-ratio: 4 / 3;
}
.home-page .home-products .quick-shop-card h3 { font-size: clamp(22px, 2.1vw, 30px); }
.home-page .home-products .quick-shop-card .button { border-radius: 3px; }
.home-page .counter-preview > .section-heading { border-radius: 2px; box-shadow: none; }
.home-page .counter-grid { gap: clamp(14px, 2.6vw, 36px); }
.home-page .counter-card {
  display: block;
  aspect-ratio: auto;
  border-radius: 2px;
  background: var(--house-ivory);
}
.home-page .counter-card::after { content: none; }
.home-page .counter-card img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.home-page .counter-card > span {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 12px 17px;
  color: var(--ink);
  font-size: clamp(23px, 2.5vw, 38px);
}
.home-page .counter-card > span i { color: var(--red); }
.site-footer { background: var(--house-cream); }
.site-footer::before { content: none; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.footer-top .footer-wordmark { order: -1; margin: 0; width: min(335px, 60%); }
.footer-top .eyebrow { margin: 0; text-align: right; }

@media (max-width: 1024px) {
  :root { --house-masthead-height: 62px; --house-gutter: clamp(18px, 4.4vw, 45px); }
  .house-masthead .brand { width: 148px; }
  .house-masthead .nav-actions { justify-self: end; }
  .house-masthead nav { top: var(--house-header-height); height: calc(100svh - var(--house-header-height)); border-radius: 0; }
  .house-masthead nav a,
  .house-masthead nav a[href="christmas.html"] {
    font: 500 clamp(24px, 4.8vw, 38px)/1.15 var(--serif);
    letter-spacing: -.02em;
    text-transform: none;
    white-space: normal;
  }
  .house-masthead .menu-toggle { width: 44px; height: 44px; }
  .house-masthead .bag-link { padding-left: 12px; gap: 8px; }
  .home-page .bake-chapter-name, .home-page .bake-scroll { font-size: 8px; }
}

@media (max-aspect-ratio: 1/1) {
  .home-page .bake-room-light {
    background: linear-gradient(0deg, #211409c7 0%, #21140928 24%, transparent 44%),
      linear-gradient(100deg, #26170984, #26170929 76%);
  }
  .home-page .bake-opening { width: calc(100% - 2 * var(--house-gutter)); top: max(137px, 24svh); }
  .home-page .bake-opening h2 { font-size: clamp(40px, 9.7vw, 64px); }
  .home-page .bake-brand { width: min(70vw, 357px); top: max(112px, 17svh); }
}

@media (max-width: 760px) {
  .home-page .home-story-peek, .home-house-gifting { grid-template-columns: minmax(0, 1fr); }
  .home-page .home-story-peek > div, .home-house-gifting .house-gifting-copy { padding: 35px var(--house-gutter) 42px; }
  .home-house-gifting figure, .home-house-gifting .house-gifting-copy { grid-column: auto; grid-row: auto; }
  .home-page .home-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page :is(#christmas-preview, .counter-preview) .section-heading h2 { font-size: clamp(38px, 8.8vw, 59px); }
}

@media (max-width: 600px) {
  :root { --house-notice-height: 28px; --house-masthead-height: 60px; }
  .house-service { font-size: 9px; }
  .house-service .house-service-local, .house-service .house-service-divider { display: none; }
  .house-masthead { gap: 10px; padding-inline: var(--house-gutter); }
  .house-masthead .brand { width: clamp(122px, 39vw, 147px); }
  .house-masthead .nav-actions { gap: 7px; }
  .house-origin { font-size: 8px; letter-spacing: .095em; }
  .home-page .bake-opening .eyebrow { font-size: 9px; }
  .home-page .bake-skip { top: calc(var(--house-header-height) + 9px); right: var(--house-gutter); min-height: 40px; font-size: 10px; }
  .home-page .bake-brand > span { margin-top: 19px; }
  .home-page .bake-cta > .text-link { justify-content: center; background: #302014b8; }
  .home-page .bake-chapter-name, .home-page .bake-scroll { font-size: 7px; }
  .home-page .home-products { grid-template-columns: minmax(0, 1fr); gap: 37px; }
  .home-page .counter-card { flex-basis: min(82vw, 360px); }
  .home-page .counter-card > span { min-height: 50px; }
  .footer-top { display: block; text-align: left; }
  .footer-top .footer-wordmark { width: min(275px, 80%); }
  .footer-top .eyebrow { margin-top: 16px; text-align: left; }
}

@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  :root { --house-notice-height: 24px; --house-masthead-height: 50px; }
  .home-page .bake-opening { top: max(102px, 22svh); }
  .home-page .bake-opening h2 { font-size: clamp(35px, 5.5vw, 58px); }
  .home-page .bake-brand { top: max(96px, 16svh); width: min(33vw, 70svh, 338px); }
  .home-page .bake-brand > span { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .house-masthead { transition: none; } }