:root {
  --ink: #3e2b22;
  --muted: #816b59;
  --paper: #f2e4cd;
  --cream: #fff9eb;
  --line: rgba(88, 56, 37, 0.17);
  --wood: #bb794f;
  --wood-dark: #895238;
  --wood-light: #d39a6a;
  --mint: #b7d8bf;
  --mint-deep: #5e8c73;
  --shadow: 0 30px 80px rgba(69, 41, 23, 0.14);
  --cute-font: "YouYuan", "幼圆", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --pixel-font: "Courier New", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    var(--pixel-home-pattern, none),
    radial-gradient(circle at 22% 10%, rgba(255, 251, 235, .82), transparent 24rem),
    radial-gradient(circle, rgba(174, 109, 57, .12) 0 3px, transparent 3.5px),
    var(--paper);
  background-position: 0 0, center top, 0 0, 0 0;
  background-size: 96px 96px, auto, 28px 28px, auto;
  font-family: var(--cute-font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  animation: home-pattern-drift 24s linear infinite;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 3px solid rgba(95, 140, 115, 0.32);
  outline-offset: 4px;
}

.site-header {
  width: min(1240px, calc(100% - 64px));
  min-height: 90px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.pixel-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
}

.pixel-logo canvas,
.pixel-art {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.brand-copy {
  display: grid;
  gap: 3px;
}

.brand strong {
  font-family: var(--cute-font);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 rgba(255,255,255,.8);
}

.brand small {
  color: var(--muted);
  font-family: var(--pixel-font);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.main-nav::before,
.main-nav::after {
  width: 72px;
  height: 14px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 7px 7px, transparent 0 3px, rgba(137, 82, 56, .34) 3.5px 4.5px, transparent 5px) 0 0 / 14px 14px repeat-x,
    linear-gradient(transparent 6px, rgba(137, 82, 56, .22) 6px 8px, transparent 8px);
  content: "";
}

.main-nav::after {
  transform: scaleX(-1);
}

.main-nav a {
  position: relative;
  padding: 9px 14px;
  border: 1px dashed rgba(137, 82, 56, .3);
  border-radius: 999px;
  background: rgba(255, 249, 235, .56);
  box-shadow: 0 3px 0 rgba(137, 82, 56, .08);
}

.main-nav a::after {
  position: absolute;
  top: 50%;
  right: -7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wood-light);
  content: "";
  transform: translateY(-50%);
}

.main-nav a::before {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wood-light);
  content: "";
  transform: translateY(-50%);
}

.main-nav a:hover {
  color: var(--wood-dark);
  background: rgba(255, 249, 235, .88);
}

.open-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.open-status i {
  width: 6px;
  height: 6px;
  background: var(--mint-deep);
  box-shadow: 0 0 0 4px rgba(94, 140, 115, 0.12);
}

main {
  overflow: hidden;
}

.hero {
  width: min(1040px, calc(100% - 64px));
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: end;
  gap: 80px;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--muted);
  font-family: var(--pixel-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.19em;
}

.hero h1 {
  margin: 0;
  font-family: var(--cute-font);
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-shadow: 3px 3px 0 rgba(255, 249, 235, .94), 5px 5px 0 rgba(167, 105, 60, .11);
}

.hero-copy {
  max-width: 360px;
  margin: 0 0 8px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.85;
}

.bakery-counter {
  position: relative;
  width: min(1240px, calc(100% - 64px));
  margin: 92px auto 0;
  padding: 74px 22px 86px;
  border: 8px solid var(--wood-dark);
  border-top-width: 14px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .1), transparent 18%, transparent 82%, rgba(67, 35, 20, .11)),
    var(--wood);
  box-shadow:
    0 18px 0 rgba(91, 52, 31, .12),
    0 36px 90px rgba(69, 41, 23, .18),
    inset 0 0 0 3px rgba(255, 224, 180, .18);
  border-radius: 46px 46px 62px 62px;
}

.bakery-counter::before,
.bakery-counter::after {
  position: absolute;
  z-index: 4;
  top: 64px;
  bottom: 72px;
  width: 22px;
  background:
    linear-gradient(90deg, rgba(255, 226, 184, .2), transparent 35%),
    var(--wood-dark);
  box-shadow: inset -5px 0 rgba(70, 37, 21, .12);
  border-radius: 999px;
  content: "";
  pointer-events: none;
}

.bakery-counter::before {
  left: -8px;
}

.bakery-counter::after {
  right: -8px;
  transform: scaleX(-1);
}

.counter-crown {
  position: absolute;
  z-index: 5;
  top: -66px;
  left: 50%;
  width: min(620px, calc(100% - 80px));
  min-height: 74px;
  padding: 13px 28px 11px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  border: 7px solid var(--wood-dark);
  border-radius: 999px;
  background:
    linear-gradient(rgba(255, 250, 232, .94), rgba(237, 216, 180, .96)),
    var(--cream);
  box-shadow:
    0 8px 0 rgba(88, 50, 28, .16),
    inset 0 0 0 2px rgba(255, 255, 255, .65);
  color: var(--wood-dark);
  text-align: center;
  transform: translateX(-50%);
}

.counter-crown::before,
.counter-crown::after {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid var(--wood-light);
  border-radius: 50%;
  background: var(--wood-light);
  box-shadow:
    8px 0 0 -5px var(--wood-dark),
    -8px 0 0 -5px var(--wood-dark),
    0 8px 0 -5px var(--wood-dark),
    0 -8px 0 -5px var(--wood-dark);
  content: "";
  transform: translateY(-50%);
}

.counter-crown::before {
  left: 18px;
}

.counter-crown::after {
  right: 18px;
}

.counter-crown span {
  color: var(--muted);
  font: 800 8px/1.35 var(--pixel-font);
  letter-spacing: .13em;
}

.counter-crown b {
  font-size: clamp(19px, 2.3vw, 28px);
  font-weight: 900;
  letter-spacing: .14em;
  white-space: nowrap;
}

.counter-awning {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 20px;
  left: 20px;
  height: 60px;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  filter: drop-shadow(0 9px 5px rgba(66, 34, 19, .18));
  overflow: visible;
}

.counter-awning i {
  position: relative;
  min-width: 0;
  height: 38px;
  background: #f6e5c6;
}

.counter-awning i:nth-child(odd) {
  background: #b66f4d;
}

.counter-awning i:first-child {
  border-radius: 24px 0 0;
}

.counter-awning i:last-child {
  border-radius: 0 24px 0 0;
}

.counter-awning i::after {
  position: absolute;
  top: 32px;
  right: 0;
  left: 0;
  height: 26px;
  border-radius: 0 0 50% 50%;
  background: inherit;
  content: "";
}

.counter-window {
  position: relative;
  overflow: hidden;
  border: 5px solid #70432d;
  border-radius: 34px 34px 48px 48px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .22) 0 10%, transparent 10.2% 30%, rgba(255, 255, 255, .09) 30.2% 38%, transparent 38.2%),
    rgba(255, 248, 230, .72);
  box-shadow:
    inset 0 0 42px rgba(83, 48, 29, .17),
    0 7px 0 rgba(72, 38, 22, .22);
}

.counter-glass-shine {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 28px;
  width: 76px;
  height: 9px;
  background: rgba(255, 255, 255, .68);
  box-shadow:
    -30px 16px 0 -2px rgba(255, 255, 255, .5),
    9px 32px 0 -3px rgba(255, 255, 255, .38);
  pointer-events: none;
}

.bread-grid {
  --shelf-height: 304px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 12px;
  padding: 32px 24px 42px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--shelf-height) - 13px),
      rgba(70, 38, 22, .13) calc(var(--shelf-height) - 13px) calc(var(--shelf-height) - 9px),
      var(--wood-dark) calc(var(--shelf-height) - 9px) calc(var(--shelf-height) + 2px),
      var(--wood-light) calc(var(--shelf-height) + 2px) calc(var(--shelf-height) + 12px),
      rgba(72, 38, 22, .24) calc(var(--shelf-height) + 12px) calc(var(--shelf-height) + 18px),
      transparent calc(var(--shelf-height) + 18px) calc(var(--shelf-height) + 34px)
    );
}

.bread-card {
  position: relative;
  min-width: 0;
  min-height: 272px;
  overflow: hidden;
  border: 1px solid rgba(88, 54, 31, 0.18);
  border-radius: 50% 50% 8px 8px / 14px 14px 8px 8px;
  background-color: #fff8e9;
  background-image: linear-gradient(180deg, rgba(255, 253, 246, 0.93), rgba(255, 248, 236, 0.78));
  background-size: auto;
  box-shadow:
    0 8px 0 rgba(89, 52, 31, .08),
    0 12px 18px rgba(85, 49, 28, .08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

a.bread-card:hover,
a.bread-card:focus-visible {
  z-index: 2;
  outline: 0;
  box-shadow:
    0 8px 0 rgba(89, 52, 31, .1),
    0 20px 34px rgba(77, 43, 23, 0.2);
  transform: translateY(-7px);
}

.bread-soon {
  opacity: 0.82;
  background-image:
    linear-gradient(180deg, rgba(255, 250, 238, .9), rgba(242, 225, 197, .78)),
    radial-gradient(circle, rgba(139, 84, 47, .16) 0 3px, transparent 3.5px);
  background-size: auto, 24px 24px;
}

.bread-storage {
  background-image:
    linear-gradient(180deg, rgba(255, 252, 241, .91), rgba(246, 225, 193, .78)),
    var(--pixel-storage-pattern, none);
  background-size: auto, 96px 96px;
}

.bread-house {
  background-image:
    linear-gradient(180deg, rgba(250, 253, 241, .91), rgba(226, 240, 216, .8)),
    var(--pixel-house-pattern, none);
  background-size: auto, 100px 100px;
}

.bread-rack {
  background-image:
    linear-gradient(180deg, rgba(255, 249, 242, .9), rgba(246, 220, 218, .82)),
    radial-gradient(circle, rgba(198, 102, 128, .14) 0 3px, transparent 3.5px);
  background-size: auto, 27px 27px;
}

.bread-scoop {
  background-image:
    linear-gradient(180deg, rgba(255, 249, 244, .92), rgba(241, 217, 226, .84)),
    radial-gradient(circle, rgba(173, 88, 122, .13) 0 3px, transparent 3.5px);
  background-size: auto, 26px 26px;
}

.card-topline {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-family: var(--pixel-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.card-topline em {
  padding: 6px 7px;
  background: #ede0c5;
  box-shadow: 3px 3px 0 rgba(87, 52, 30, 0.12);
  font-style: normal;
  letter-spacing: 0;
}

.bread-house .card-topline em {
  background: #d9eadb;
}

.bread-rack .card-topline em {
  background: #f0ced5;
}

.bread-scoop .card-topline em {
  background: #e9c7d8;
}

.bread-stage {
  height: 202px;
  padding-top: 40px;
}

.bread-stage .pixel-art {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  filter: drop-shadow(0 13px 3px rgba(76, 49, 33, 0.09));
  transition: transform 220ms ease;
}

a.bread-card:hover .pixel-art {
  transform: translateY(-5px);
}

.card-copy {
  position: absolute;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px dashed rgba(91, 60, 39, 0.23);
}

.card-copy h2 {
  margin: 0 0 5px;
  font-family: var(--cute-font);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .02em;
}

.card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.card-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  transition: color 180ms ease, background 180ms ease;
  font-family: var(--pixel-font);
  font-weight: 900;
}

a.bread-card:hover .card-arrow {
  color: white;
  background: var(--ink);
}

.counter-base {
  position: absolute;
  z-index: 5;
  right: -20px;
  bottom: 17px;
  left: -20px;
  height: 54px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border: 5px solid #70432d;
  border-radius: 20px 20px 38px 38px;
  background:
    linear-gradient(rgba(255, 255, 255, .08), transparent),
    var(--wood-dark);
  box-shadow:
    0 12px 0 rgba(78, 41, 24, .18),
    inset 0 2px rgba(255, 224, 184, .15);
  color: rgba(255, 248, 231, .78);
  font: 800 8px/1 var(--pixel-font);
  letter-spacing: .15em;
}

.counter-base i {
  width: 5px;
  height: 5px;
  background: #dfb97e;
  box-shadow: 10px 0 #dfb97e, -10px 0 #dfb97e;
}

.counter-base::before,
.counter-base::after {
  position: absolute;
  bottom: -24px;
  width: 62px;
  height: 24px;
  border: 5px solid #70432d;
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: var(--wood-dark);
  content: "";
}

.counter-base::before {
  left: 34px;
}

.counter-base::after {
  right: 34px;
}

.how-section {
  width: min(1120px, calc(100% - 64px));
  margin: 95px auto 0;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 80px;
}

.how-section h2 {
  margin: 0;
  font-family: var(--cute-font);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
}

.how-section ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  list-style: none;
}

.how-section li {
  min-height: 145px;
  padding: 18px 18px 20px;
  border-right: 1px solid var(--line);
}

.how-section li:last-child {
  border-right: 0;
}

.how-section li > span {
  color: var(--wood-dark);
  font: 700 9px/1 monospace;
}

.how-section b {
  display: block;
  margin-top: 31px;
  font-size: 14px;
  font-weight: 900;
}

.how-section p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.site-footer {
  width: min(1240px, calc(100% - 64px));
  margin: 72px auto 0;
  padding: 24px 0 38px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--pixel-font);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.bread-soon .pixel-art {
  animation: mystery-bounce 1.25s cubic-bezier(.3, .7, .35, 1) infinite;
  filter:
    drop-shadow(0 13px 3px rgba(76, 49, 33, 0.09))
    drop-shadow(0 0 8px rgba(239, 187, 85, .28));
  transform-origin: 50% 86%;
}

.bread-soon .bread-stage {
  position: relative;
}

.bread-soon .bread-stage::after {
  position: absolute;
  top: 76px;
  right: clamp(42px, 12%, 68px);
  display: grid;
  width: 44px;
  height: 50px;
  place-items: center;
  border: 3px solid #5f3928;
  background: #f3c96f;
  color: #5f3928;
  box-shadow: 5px 5px 0 rgba(95,57,40,.2);
  content: "?";
  font: 900 34px/1 var(--pixel-font);
  image-rendering: pixelated;
  animation: question-bounce 1.05s cubic-bezier(.3,.75,.32,1) infinite;
}

.bread-soon .card-arrow {
  color: #fff8e9;
  border-color: #70452f;
  background: #8f5939;
  animation: question-pulse 1.25s ease-in-out infinite;
}

@keyframes home-pattern-drift {
  to {
    background-position: 96px 48px, center top, 28px 28px, 0 0;
  }
}

@keyframes mystery-bounce {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  42% { transform: translateY(-12px) rotate(1deg); }
  58% { transform: translateY(-8px) rotate(0); }
}

@keyframes question-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}

@keyframes question-bounce {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  45% { transform: translateY(-14px) rotate(-4deg); }
  60% { transform: translateY(-9px) rotate(1deg); }
}

@media (max-width: 900px) {
  .site-header {
    width: min(100% - 36px, 720px);
    grid-template-columns: 1fr auto auto;
    gap: 18px;
  }

  .main-nav::before,
  .main-nav::after {
    width: 42px;
  }

  .hero,
  .how-section {
    width: min(100% - 36px, 720px);
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-copy {
    padding: 0;
    border: 0;
  }

  .bakery-counter {
    width: min(100% - 36px, 720px);
    padding: 74px 15px 84px;
  }

  .bread-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 18px;
    padding-left: 18px;
  }

  .how-section ol {
    grid-template-columns: 1fr;
  }

  .how-section li {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .how-section li:last-child {
    border-bottom: 0;
  }

  .site-footer {
    width: min(100% - 36px, 720px);
  }
}

@media (max-width: 560px) {
  .site-header {
    min-height: 76px;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .pixel-logo {
    width: 40px;
    height: 40px;
  }

  .open-status {
    display: none;
  }

  .main-nav {
    gap: 0;
  }

  .main-nav::before,
  .main-nav::after {
    display: none;
  }

  .main-nav a {
    padding: 8px 10px;
    font-size: 10px;
  }

  .hero {
    margin-top: 42px;
  }

  .hero h1 {
    font-size: 43px;
  }

  .bakery-counter {
    margin-top: 82px;
    padding-right: 9px;
    padding-left: 9px;
    border-right-width: 6px;
    border-left-width: 6px;
  }

  .bakery-counter::before,
  .bakery-counter::after {
    width: 16px;
  }

  .bakery-counter::before {
    left: -6px;
  }

  .bakery-counter::after {
    right: -6px;
  }

  .counter-crown {
    top: -61px;
    width: calc(100% - 30px);
    min-height: 68px;
    padding-right: 20px;
    padding-left: 20px;
    grid-template-columns: 1fr;
  }

  .counter-crown span {
    display: none;
  }

  .counter-awning {
    right: 4px;
    left: 4px;
  }

  .counter-window {
    border-width: 4px;
  }

  .bread-grid {
    grid-template-columns: 1fr;
    padding-right: 16px;
    padding-left: 16px;
  }

  .counter-base {
    right: -13px;
    left: -13px;
    padding: 0 18px;
  }

  .counter-base span:last-child,
  .counter-base i {
    display: none;
  }

}

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