/* ============================================================
   XIAOFUDI — Waffle Iron Bakehouse
   Dark bakehouse palette (syrup amber leads a dark range)
   ============================================================ */

:root{
  --iron-room:#26211C;
  --flour-white:#F4F0E6;
  --syrup-amber:#C8792E;
  --cast-iron:#8A8578;
  --bake-tray:#322B24;
  --doily-cream:#F7F2E3;
  --oven-black:#171310;
  --slab-ink:#241C15;
}

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:4px;
}

.font-field{
  font-family:Georgia,"Times New Roman",serif;
}

body{
  font-family:Georgia,"Times New Roman",serif;
  margin:0;
  padding:0;
  font-size:16px;
  background-color:#26211C;
  color:#F4F0E6;
  line-height:1.7;
  overflow-x:hidden;
}

a{color:#F4F0E6;}

.plain-link{color:#F4F0E6;}

/* noscript default-visible reveal state */
.reveal-me{opacity:1;transform:none;}

/* ============ OVEN WALL HEADER (bake tray band, not sticky) ============ */
.oven-wall-header{
  width:100%;
  background-color:#322B24;
  border-bottom:6px solid #171310;
  padding:14px 0;
}

.brick-run{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.tray-slab{
  background-color:#2A241E;
  border:1px solid #221D17;
  border-radius:6px;
}

.iron-handle-glyph{
  width:58px;
  height:58px;
  border-radius:50%;
  background-color:#26211C;
  border:2px solid #8A8578;
  position:relative;
  flex:0 0 auto;
}

.iron-handle-glyph:after{
  content:"";
  position:absolute;
  top:6px;
  left:14px;
  width:26px;
  height:30px;
  border-top:3px solid #C8792E;
  border-right:3px solid #C8792E;
  border-radius:0 60% 0 0;
  transform:rotate(8deg);
}

.brand-plate{
  background-color:#C8792E;
  color:#171310;
  font-size:28px;
  letter-spacing:2px;
  font-weight:bold;
  padding:6px 22px;
  border-radius:4px;
  border:1px solid #8A5520;
  box-shadow:0 3px 0 #8A5520;
  line-height:1;
}

.recipe-card-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.recipe-card-link{
  display:inline-block;
  color:#322B24;
  background-color:#F7F2E3;
  padding:6px 18px;
  border-radius:10px 10px 12px 12px;
  text-decoration:none;
  font-weight:bold;
  font-size:15px;
  border:1px solid #CBBF9E;
  box-shadow:0 2px 0 #CBBF9E;
}

.recipe-card-link:hover{
  background-color:#FFF8E9;
}

.fire-iron-cta{
  display:inline-block;
  color:#171310;
  background-color:#C8792E;
  padding:9px 22px;
  border-radius:20px;
  text-decoration:none;
  font-weight:bold;
  font-size:15px;
  box-shadow:0 3px 0 #8A5520;
}

.fire-iron-cta:hover{
  background-color:#D88A3C;
}

/* ============ IRON PLATE HEADER ============ */
.iron-plate-header{
  width:100%;
  background-color:#322B24;
  border-top:2px solid #221D17;
  border-bottom:2px solid #171310;
  display:flex;
  align-items:stretch;
  min-height:64px;
  position:relative;
}

.iron-plate-header--amberband{
  position:relative;
}

/* 56px cell checkerboard via conic / linear gradients */
.check-grid-strip{
  flex:1 1 auto;
  background-image:conic-gradient(#C8792E 0 25%,#322B24 0 50%,#C8792E 0 75%,#322B24 0 100%);
  background-size:56px 56px;
}

.plate-handle{
  width:96px;
  background-color:#26211C;
  border-right:2px solid #171310;
  position:relative;
  flex:0 0 auto;
}

.plate-handle:after{
  content:"";
  position:absolute;
  top:18px;
  left:22px;
  width:40px;
  height:26px;
  border:4px solid #8A8578;
  border-bottom:none;
  border-radius:40px 40px 0 0;
}

.batch-badge{
  flex:0 0 auto;
  background-color:#F7F2E3;
  color:#322B24;
  font-weight:bold;
  letter-spacing:2px;
  font-size:14px;
  padding:0 22px;
  display:flex;
  align-items:center;
  border-left:3px solid #171310;
  white-space:nowrap;
}

/* ============ generic batch content seat ============ */
.batch-seat{
  max-width:1200px;
  margin:0 auto;
  padding:56px 24px 48px;
}

/* ============ BATCH 1 — FIRST POUR ============ */
.first-pour-zone{
  text-align:center;
  position:relative;
}

.pour-title-group{
  display:inline-flex;
  align-items:flex-start;
  gap:18px;
  justify-content:center;
}

.syrup-pitcher-glyph{
  width:74px;
  height:96px;
  flex:0 0 auto;
  margin-top:8px;
}

.pitcher-jug{
  width:44px;
  height:46px;
  background-color:#C8792E;
  border-radius:6px 14px 14px 14px;
  margin:0 auto;
  position:relative;
  border:1px solid #8A5520;
}

.pitcher-jug:before{
  content:"";
  position:absolute;
  top:-16px;
  right:8px;
  width:8px;
  height:16px;
  background-color:#C8792E;
  border-radius:4px 4px 0 0;
  border-left:1px solid #8A5520;
}

.pitcher-jug:after{
  content:"";
  position:absolute;
  top:14px;
  left:-14px;
  width:16px;
  height:10px;
  background-color:#26211C;
  border-radius:90% 0 0 0;
  border-top:4px solid #C8792E;
}

.drip-trail{
  width:10px;
  margin:2px auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}

.drip-trail:before{
  content:"";
  width:4px;
  height:14px;
  background-color:#C8792E;
}

.drip-trail:after{
  content:"";
  width:14px;
  height:20px;
  background-color:#C8792E;
  border-radius:50% 50% 60% 60%;
}

.main-title{
  margin:0;
  font-size:52px;
  line-height:1.1;
  text-align:left;
  color:#F4F0E6;
  letter-spacing:1px;
}

.main-subtitle{
  margin:0;
  font-weight:normal;
}

.title-accent-amber{
  color:#C8792E;
}

.pour-standfirst{
  max-width:640px;
  margin:38px auto 8px;
  text-align:center;
  font-size:19px;
  line-height:1.8;
  color:#F4F0E6;
}

.syrup-rule{
  max-width:520px;
  margin:14px auto 0;
  height:8px;
  background-image:linear-gradient(to right,#171310,#C8792E);
  border-radius:8px;
  position:relative;
}

.syrup-rule:after{
  content:"";
  position:absolute;
  right:-6px;
  top:0;
  width:16px;
  height:8px;
  background-color:#C8792E;
  border-radius:0 6px 6px 0;
}

.drip-dot{
  position:absolute;
  bottom:-22px;
  right:6px;
  width:20px;
  height:26px;
  background-color:#E0A93E;
  border-radius:50% 50% 55% 55%;
}

/* ============ BATCH 2 — COOLING RACK ============ */
.cooling-rack-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.waffle-slab{
  background-color:#F7F2E3;
  color:#241C15;
  border-radius:4px;
  position:relative;
  overflow:hidden;
  border:1px solid #CBBF9E;
  box-shadow:0 4px 0 #14100C;
}

.waffle-slab-body{
  padding:26px 24px 24px;
  position:relative;
  z-index:2;
}

/* full check-grid overlay on doily cream face */
.slab-checkgrid{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:conic-gradient(#D8CDAA 0 25%,#C7BC98 0 50%,#D8CDAA 0 75%,#C7BC98 0 100%);
  background-size:26px 26px;
}

.slab-numeral{
  font-size:42px;
  font-weight:bold;
  position:absolute;
  top:-6px;
  right:10px;
  z-index:3;
  color:#C8792E;
  line-height:1;
}

.slab-title{
  position:relative;
  z-index:4;
  margin:0 0 12px;
  font-size:24px;
  line-height:1.2;
}

.slab-link{
  color:#8A4E16;
  text-decoration:none;
  border-bottom:2px solid #C8792E;
}

.slab-link:hover{
  color:#6E3D0F;
}

.slab-text{
  position:relative;
  z-index:4;
  font-size:16px;
  line-height:1.6;
  margin:0;
}

.rack-base-rule{
  height:10px;
  border-radius:5px;
  background-color:#8A8578;
  max-width:1200px;
  margin:-8px auto 0;
}

/* ============ BATCH 3 — SYRUP RUN ============ */
.syrup-run-layout{
  display:grid;
  grid-template-columns:62ch 1fr;
  gap:48px;
  align-items:center;
}

.run-prose{
  font-size:18px;
  line-height:1.85;
}

.run-prose p{
  margin:0 0 18px;
}

.bake-stage-word{
  color:#C8792E;
  font-weight:bold;
}

.syrup-ladder-diagram{
  position:relative;
  min-height:340px;
}

.pour-line{
  width:6px;
  background-image:linear-gradient(to bottom,#171310,#C8792E,#C8792E);
  border-radius:6px;
  position:relative;
}

.vertical-pour{
  position:absolute;
  left:12px;
  top:30px;
  bottom:84px;
  width:8px;
  background-color:#C8792E;
  border-radius:8px;
}

.drip-orb{
  position:absolute;
  left:0;
  width:30px;
  height:36px;
  background-color:#D88A3C;
  border-radius:50% 50% 60% 60%;
  border:1px solid #8A5520;
}

.timer-dial{
  position:absolute;
  left:40px;
  bottom:0;
  width:120px;
  height:120px;
  border:6px solid #C8792E;
  border-radius:50%;
}

.timer-dial:before{
  content:"";
  position:absolute;
  top:8px;
  left:47px;
  width:6px;
  height:44px;
  background-color:#C8792E;
  border-radius:3px 3px 10px 10px;
}

.dial-knob{
  position:absolute;
  top:48px;
  left:38px;
  width:34px;
  height:34px;
  background-color:#C8792E;
  border-radius:50%;
  border:3px solid #8A5520;
}

/* ============ BATCH 4 — THE COUNTER ============ */
.counter-layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:start;
}

.tray-band{
  background-color:#2A241E;
  border:1px solid #221D17;
  border-radius:6px;
}

.order-slip{
  background-color:#F7F2E3;
  color:#241C15;
  border-radius:6px;
  padding:34px 30px 26px;
  position:relative;
  border:1px solid #CBBF9E;
}

.order-slip-title{
  margin:0 0 4px;
  font-size:26px;
  color:#322B24;
}

.order-slip-note{
  margin:0 0 22px;
  font-size:15px;
  color:#5A4E3C;
}

.field-group{
  margin-bottom:18px;
}

.field-group label{
  display:block;
  font-weight:bold;
  font-size:15px;
  margin-bottom:6px;
  color:#322B24;
}

.order-field{
  width:100%;
  padding:11px 14px;
  font-size:16px;
  font-family:Georgia,serif;
  background-color:#FFFFFF;
  color:#241C15;
  border:2px solid #CBBF9E;
  border-radius:4px;
}

.order-field:focus{
  outline:none;
  border-color:#C8792E;
}

.order-field-message{
  min-height:120px;
  resize:vertical;
}

.order-submit-btn{
  display:inline-block;
  background-color:#C8792E;
  color:#171310;
  border:none;
  font-family:Georgia,serif;
  font-size:17px;
  font-weight:bold;
  padding:12px 34px;
  border-radius:4px;
  cursor:pointer;
  box-shadow:0 3px 0 #8A5520;
}

.order-submit-btn:hover{
  background-color:#D88A3C;
}

.amber-clip{
  position:absolute;
  top:-12px;
  right:40px;
  width:44px;
  height:18px;
  background-color:#C8792E;
  border-radius:0 0 10px 10px;
  border:1px solid #8A5520;
}

.address-stamp{
  background-color:#2A241E;
  border:2px solid #8A8578;
  border-radius:6px;
  padding:26px 24px;
  color:#F4F0E6;
  position:relative;
}

.address-stamp-title{
  margin:0 0 6px;
  color:#C8792E;
  font-size:22px;
  letter-spacing:1px;
}

.stamp-rule{
  height:3px;
  width:60px;
  background-color:#C8792E;
  margin-bottom:18px;
  border-radius:2px;
}

.address-line{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.6;
}

.stamp-strong{
  color:#C8792E;
  font-weight:bold;
}

.hour-line{
  margin:0;
  font-size:15px;
  color:#C8BFAC;
}

/* ============ FOOTER — BAKEHOUSE BASE ============ */
.bakehouse-base{
  background-color:#171310;
  border-top:6px solid #322B24;
  width:100%;
  position:relative;
  z-index:1;
  padding:40px 24px 52px;
  margin-top:72px;
}

.brick-edge-rule{
  height:10px;
  background-image:linear-gradient(90deg,#322B24 0 60px,#26211C 60px 75px);
  background-size:120px 10px;
}

.base-inner{
  max-width:1200px;
  margin:0 auto;
}

.base-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  list-style:none;
  margin:0 0 30px;
  padding:0;
}

.base-links-item{}

.base-link{
  color:#F4F0E6;
  text-decoration:none;
  font-weight:bold;
  font-size:15px;
}

.base-link:hover{
  color:#C8792E;
}

.base-legal-block{
  text-align:center;
  color:#C8BFAC;
  font-size:14px;
  line-height:1.7;
  position:relative;
  z-index:1;
}

.base-legal-block p{
  margin:0 0 6px;
}

.base-legal-block .brandline{
  color:#F4F0E6;
  letter-spacing:1px;
}

/* ============ go to top button (round, not fixed -> sticky footer policy ok) ============ */
.go-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:52px;
  height:52px;
  border-radius:50%;
  background-color:#C8792E;
  color:#171310;
  border:2px solid #8A5520;
  font-size:22px;
  font-weight:bold;
  cursor:pointer;
  z-index:40;
  box-shadow:0 4px 0 #171310;
  display:none;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.go-top.is-shown-go{
  display:flex;
}

.go-top:hover{
  background-color:#D88A3C;
}

/* scroll reveal — hidden only when JS adds the class is allowed (CSS hide),
   default visible in CSS for noscript */
.ops-await{
  opacity:0;
  transform:translateY(18px);
}

.ops-awake{
  opacity:1;
  transform:translateY(0);
  transition:opacity 600ms ease,transform 600ms ease;
}

.watermark-hide{
  visibility:hidden;
}

/* ============ bands & page-fill ============ */
.band-oven-shadow{
  background-color:#1C1713;
}

.full-bleed-wrap{
  width:100%;
}

/* ============ responsive ============ */
@media (max-width:900px){
  .cooling-rack-grid{grid-template-columns:repeat(2,1fr);}
  .syrup-run-layout{grid-template-columns:1fr;}
  .counter-layout{grid-template-columns:1fr;}
  .brick-run{justify-content:center;}
}

@media (max-width:640px){
  .main-title{font-size:36px;}
  .cooling-rack-grid{grid-template-columns:1fr;}
  .pour-title-group{flex-direction:column;align-items:center;}
}

/* footer content layers relative + z-index above watermark */
.footer-content-relative{
  position:relative;
  z-index:1;
}

.note-q{
  color:#322B24;
  margin:16px 0 4px;
  font-size:18px;
  font-family:Georgia,serif;
}

.note-a{
  color:#6E6250;
  margin:0 0 12px;
  font-size:15px;
  line-height:1.6;
}

.pile-title{
  color:#C8792E;
  font-size:26px;
  margin:0 0 18px;
  letter-spacing:1px;
}

.slab-extra-prose{
  padding-top:34px;
  padding-bottom:20px;
}
.slab-extra-prose .run-prose p{
  color:#ECE0CE;
  margin-bottom:16px;
}

/* ============ shared utilities (no inline styles in markup) ============ */
.site-run{
  display:block;
  width:100%;
}

.blk-amber-title{
  color:#C8792E;
}

.lede-title-gap{
  margin-bottom:18px;
}

.ta-center{
  text-align:center;
}

.narrow-prose{
  max-width:62ch;
  margin-left:auto;
  margin-right:auto;
}

.mid-prose{
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.shop-counter-side{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.drip-orbs-set{
  position:relative;
  height:220px;
}

.drip-orbs-set:before{
  content:"";
  position:absolute;
  left:22px;
  top:8px;
  width:30px;
  height:34px;
  background-color:#D88A3C;
  border-radius:50% 50% 62% 62%;
  border:1px solid #8A5520;
}

.drip-orbs-set:after{
  content:"";
  position:absolute;
  left:8px;
  top:96px;
  width:30px;
  height:34px;
  background-color:#C8792E;
  border-radius:50% 50% 62% 62%;
  border:1px solid #8A5520;
}