/* Taylored Sweets and Treats
   Warm bakery palette, light and dark, mobile first. */

:root {
  --cream:      #fffaf5;
  --cream-2:    #fdf1e7;
  --ink:        #3a2620;
  --ink-soft:   #6d564d;
  --blush:      #e29a9a;
  --blush-deep: #c9706f;
  --gold:       #c9a24a;
  --sage:       #9db39a;
  --line:       #ecd9c9;
  --card:       #ffffff;
  --shadow:     0 12px 30px -18px rgba(90, 55, 40, .55);

  --bg:      var(--cream);
  --bg-alt:  var(--cream-2);
  --fg:      var(--ink);
  --fg-soft: var(--ink-soft);
  --accent:  var(--blush-deep);

  --dough-c: #e8c9a4;
  --icing-c: #fbeee2;
  --line-c:  #c98f8f;
  --dot-c:   #c9a24a;

  --radius: 18px;
  --maxw: 1120px;
}

html[data-theme="dark"] {
  --bg:      #17110f;
  --bg-alt:  #1f1815;
  --fg:      #f6ebe2;
  --fg-soft: #c4ad9f;
  --card:    #241c19;
  --line:    #392c26;
  --accent:  #eda6a5;
  --shadow:  0 14px 34px -20px rgba(0, 0, 0, .8);

  --dough-c: #b98f63;
  --icing-c: #f0dfd0;
  --line-c:  #d68e8d;
  --dot-c:   #e0bc63;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg:      #17110f;
    --bg-alt:  #1f1815;
    --fg:      #f6ebe2;
    --fg-soft: #c4ad9f;
    --card:    #241c19;
    --line:    #392c26;
    --accent:  #eda6a5;
    --shadow:  0 14px 34px -20px rgba(0, 0, 0, .8);

    --dough-c: #b98f63;
    --icing-c: #f0dfd0;
    --line-c:  #d68e8d;
    --dot-c:   #e0bc63;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.4rem, 8vw, 4.1rem); }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.6rem); }
h3 { font-size: 1.16rem; font-weight: 600; }

p { margin: 0 0 1em; }
a { color: var(--accent); }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 760px); }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: .6rem; left: .6rem; z-index: 99;
  background: var(--accent); color: #fff; padding: .6rem 1rem;
  border-radius: 10px;
}

/* ---------- cookie svg ---------- */
svg .dough { fill: var(--dough-c); }
svg .icing { fill: var(--icing-c); }
svg .line  { fill: none; stroke: var(--line-c); stroke-width: 3.4; stroke-linecap: round; }
svg .dot   { fill: var(--dot-c); }

.tone-blush { --icing-c: #f8dcdc; --dot-c: #c9706f; }
.tone-gold  { --icing-c: #f8e9c8; --line-c: #c9a24a; }
.tone-sage  { --icing-c: #dfe9dd; --line-c: #7d9479; --dot-c: #7d9479; }
.tone-cream { --icing-c: #fbeee2; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  display: flex; align-items: center; gap: .75rem;
  min-height: 66px;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.brand-mark { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; }
.brand-words { display: flex; flex-direction: column; line-height: 1.05; }
.brand-words strong {
  font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; font-weight: 700;
}
.brand-words em {
  font-style: normal; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-soft);
}

.nav { display: none; }
.nav a {
  text-decoration: none; color: var(--fg); font-size: .93rem; font-weight: 500;
}
.nav a:hover { color: var(--accent); }

.nav-toggle, .theme-toggle {
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; flex: none;
}
.bars, .bars::before, .bars::after {
  display: block; width: 17px; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .22s ease, opacity .22s ease;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after  { top: 6px; }
[aria-expanded="true"] .bars { background: transparent; }
[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

.theme-icon {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold);
  box-shadow: inset -5px -3px 0 0 var(--bg);
  transition: box-shadow .25s ease, background .25s ease;
}
html[data-theme="dark"] .theme-icon,
html:not([data-theme="light"]) .theme-icon { }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-icon { box-shadow: inset 0 0 0 0 var(--bg); }
}
html[data-theme="light"] .theme-icon { box-shadow: inset -5px -3px 0 0 var(--bg); }
html[data-theme="dark"]  .theme-icon { box-shadow: inset 0 0 0 0 var(--bg); }

.nav.open {
  display: flex; flex-direction: column; gap: .2rem;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: .8rem 1.25rem 1.4rem;
}
.nav.open a { padding: .6rem 0; border-bottom: 1px solid var(--line); }
/* The last item used to be the order button, which wanted a gap above it and no rule under it.
   That button has moved out into the header bar, so the last item is now an ordinary link and the
   gap would just be a hole in the menu. */
.nav.open a:last-child { border: 0; }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: 1.6rem; }
}

/* The order button in the header bar. It is outside the collapsible nav on purpose, so it is
   visible at every width; on a narrow phone it swaps its label for a single word rather than
   squeezing the brand. */
.head-cta { flex: none; white-space: nowrap; }
.cta-long { display: none; }
@media (min-width: 420px) {
  .cta-long { display: inline; }
  .cta-short { display: none; }
}
@media (min-width: 860px) { .head-cta { margin-left: 1.6rem; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: #fff;
  padding: .82rem 1.5rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  border: 1px solid transparent;
  transition: transform .16s ease, filter .16s ease;
}
html[data-theme="dark"] .btn { color: #2a1512; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-small { padding: .5rem 1.05rem; font-size: .88rem; }
.btn-lg { padding: .98rem 1.9rem; font-size: 1.02rem; }
.btn-ghost {
  background: transparent; color: var(--fg); border-color: var(--line);
}
.btn-light { background: var(--bg); color: var(--fg); }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 0; position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
  font-weight: 600; color: var(--accent); margin-bottom: .9rem;
}
.script {
  font-style: italic; font-weight: 400; color: var(--accent);
}
.lede { font-size: 1.08rem; color: var(--fg-soft); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1.1rem; }
.hero-note { font-size: .88rem; color: var(--fg-soft); margin: 0; }

/* Hero media. The drawn plate of cookies that used to sit here has been replaced by a real media
   frame: a looping video where one exists, and a scrolling run of Taylor's own photographs
   underneath it. */
.hero-media { display: grid; place-items: center; gap: .9rem; }
.hero-frame {
  position: relative; margin: 0;
  width: min(90vw, 440px); aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The video stays invisible until script.js confirms it can actually play, so a missing or slow
   file leaves the photographs showing rather than a black box. */
.hero-video { opacity: 0; transition: opacity .5s ease; }
.hero-frame.has-video .hero-video { opacity: 1; }
.hero-frame.has-video .hero-track,
.hero-frame.has-video .hero-arrow { opacity: 0; pointer-events: none; }

/* The scroller. Ordinary horizontal overflow with snap points, so a swipe on a phone or a
   trackpad flick works with no JavaScript at all; script.js only adds the timer and the dots. */
.hero-track {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  transition: opacity .5s ease;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.hero-slide {
  position: relative; margin: 0; flex: 0 0 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-cap {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .9rem; text-align: center;
  font-size: .78rem; letter-spacing: .04em; color: var(--fg-soft);
}

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(6px);
  cursor: pointer; padding: 0;
  transition: opacity .3s ease, filter .16s ease;
}
.hero-arrow:hover { filter: brightness(1.06); }
.hero-arrow::before {
  content: ""; display: block; width: 9px; height: 9px; margin: 0 auto;
  border-top: 2px solid var(--fg); border-right: 2px solid var(--fg);
}
.hero-prev { left: .6rem; }
.hero-next { right: .6rem; }
.hero-prev::before { transform: translateX(2px) rotate(-135deg); }
.hero-next::before { transform: translateX(-2px) rotate(45deg); }

.hero-dots { display: flex; gap: .4rem; justify-content: center; }
.hero-dots:empty { display: none; }
.hero-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--line);
  cursor: pointer; transition: background .25s ease, transform .25s ease;
}
.hero-dot.on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.hero-frame.has-video ~ .hero-dots { display: none; }

.ck { width: 108px; height: 108px; position: absolute; }

.sprinkle-rule {
  height: 40px; margin-top: 2.5rem;
  background-image:
    radial-gradient(circle, var(--blush) 50%, transparent 51%),
    radial-gradient(circle, var(--gold) 50%, transparent 51%),
    radial-gradient(circle, var(--sage) 50%, transparent 51%);
  background-size: 34px 34px, 34px 34px, 34px 34px;
  background-position: 0 14px, 12px 24px, 24px 10px;
  background-repeat: repeat-x;
  opacity: .5;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
}

/* ---------- collage ribbon ---------- */
/* A full-bleed sideways strip of photographs at mixed proportions. It is a real scroll container
   rather than a CSS marquee, deliberately: a marquee cannot be swiped, and this needs to be
   draggable on a phone whether or not script.js ever runs. The drift, and the cloned run that
   makes the loop seamless, are added from there. */
.ribbon-sec {
  padding: clamp(1.4rem, 4vw, 2.4rem) 0 clamp(1.8rem, 5vw, 2.8rem);
  overflow: hidden;
}
.ribbon {
  display: flex; gap: .8rem;
  overflow-x: auto; overflow-y: hidden;
  padding: .5rem 1.25rem;
  height: clamp(200px, 34vw, 320px);
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.ribbon::-webkit-scrollbar { display: none; }
.ribbon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ribbon.dragging { cursor: grabbing; }
/* Dragging the strip must not turn into dragging a photograph out of it, and must not paint a
   selection highlight across the tiles on the way past. */
.ribbon img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.ribbon-run { display: flex; gap: .8rem; flex: 0 0 auto; height: 100%; }

.tile {
  margin: 0; flex: 0 0 auto; height: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Three proportions on rotation, so the run reads as a collage rather than a filmstrip. The ratio
   is set here rather than left to the file, because a photo that has not decoded yet has no width
   and the whole strip would shuffle as each one lands. */
.tile:nth-child(3n+1) { aspect-ratio: 4 / 5; }
.tile:nth-child(3n+2) { aspect-ratio: 1; }
.tile:nth-child(3n)   { aspect-ratio: 4 / 3; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ribbon-foot { margin: 1.2rem auto 0; font-size: .9rem; color: var(--fg-soft); }

/* ---------- strip ---------- */
.strip { background: var(--bg-alt); border-block: 1px solid var(--line); }
.strip-inner {
  display: grid; gap: 1.1rem; padding: 1.6rem 0;
}
.strip-item { display: flex; flex-direction: column; }
.strip-item strong { font-size: .98rem; }
.strip-item span { font-size: .86rem; color: var(--fg-soft); }
@media (min-width: 720px) {
  .strip-inner { grid-template-columns: repeat(3, 1fr); text-align: center; }
  .strip-item { align-items: center; }
}

/* ---------- sections ---------- */
.section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 62ch; margin-bottom: 2.4rem; }
.section-lede { color: var(--fg-soft); }

.cards {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.card:hover { transform: translateY(-4px); }
.card-ck { width: 54px; height: 54px; margin-bottom: .8rem; }
.card p { margin: 0; color: var(--fg-soft); font-size: .95rem; }

/* ---------- gallery ---------- */
.gallery {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.shot { margin: 0; }
.shot-img {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--radius); border: 1px dashed var(--line);
  background: var(--card);
  display: grid; place-items: center; gap: .4rem;
  overflow: hidden;
}
.shot-img svg { width: 84px; height: 84px; }
/* A real photo covers the drawn stand-in. script.js adds .has-photo only once the file has
   actually decoded, so a photo that is not there yet leaves the frame exactly as it was rather
   than showing a broken image. */
.shot-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .45s ease;
}
.shot.has-photo .shot-img { border-style: solid; }
.shot.has-photo .shot-photo { opacity: 1; }
.shot.has-photo .shot-img > svg,
.shot.has-photo .ph { display: none; }
.ph {
  position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-soft);
}
.shot[data-tone="blush"] .shot-img svg { --icing-c: #f8dcdc; --dot-c: #c9706f; }
.shot[data-tone="gold"]  .shot-img svg { --icing-c: #f8e9c8; --line-c: #c9a24a; }
.shot[data-tone="sage"]  .shot-img svg { --icing-c: #dfe9dd; --line-c: #7d9479; --dot-c: #7d9479; }
.shot figcaption {
  margin-top: .7rem; font-size: .9rem; color: var(--fg-soft);
}
.gallery-foot {
  margin-top: 2rem; font-size: .95rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
}
.gallery-foot p { margin: 0; color: var(--fg-soft); }

/* A quiet text-link call to action at the end of a section, for the places where a second big
   button would be shouting. */
.section-cta { margin: 2rem 0 0; font-size: .95rem; color: var(--fg-soft); }

.delivery-grid .btn { margin-top: .4rem; }

/* ---------- about ---------- */
.about-grid { display: grid; gap: 2.2rem; align-items: center; }
.portrait {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--radius); border: 1px dashed var(--line);
  background: var(--card); display: grid; place-items: center;
  box-shadow: var(--shadow);
}
.portrait .ck { position: static; width: 110px; height: 110px; animation: none; }
.portrait.has-photo { border-style: solid; overflow: hidden; margin: 0; }
.portrait.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait.has-photo figcaption {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem;
  text-align: center; font-size: .78rem; letter-spacing: .03em; color: var(--fg-soft);
}
.pull {
  margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--blush);
  font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; line-height: 1.35; color: var(--fg);
}
.pull cite { display: block; margin-top: .4rem; font-family: inherit; font-style: normal; font-size: .85rem; color: var(--fg-soft); }
.about-copy .btn { margin-top: .6rem; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: .8fr 1.2fr; gap: 3.2rem; }
}

/* ---------- steps ---------- */
.steps {
  list-style: none; margin: 0 0 2.4rem; padding: 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: none;
}
.step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
}
.step-n {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-weight: 600; font-size: .95rem; margin-bottom: .8rem;
}
html[data-theme="dark"] .step-n { color: #2a1512; }
.step p { margin: 0; color: var(--fg-soft); font-size: .94rem; }

.cta-card {
  display: grid; gap: 1.2rem; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.8rem;
  box-shadow: var(--shadow);
}
.cta-card h3 { margin-bottom: .3rem; }
.cta-card p { margin: 0; color: var(--fg-soft); font-size: .94rem; }
.cta-card .btn { justify-self: start; }
@media (min-width: 720px) {
  .cta-card { grid-template-columns: 1fr auto; }
  .cta-card .btn { justify-self: end; }
}

.form-note {
  margin-top: 1rem; font-size: .82rem; color: var(--fg-soft);
  max-width: 46ch;
}

/* ---------- delivery ---------- */
.delivery-grid { display: grid; gap: 2.4rem; align-items: center; }
.pill-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 0; margin: 0 0 1.2rem;
}
.pill-list li {
  border: 1px solid var(--line); background: var(--card);
  padding: .38rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 500;
}
/* What replaced the drawn map: one real photograph from a pop-up, and a plain three-line card
   that says where the cookies are picked up, where they are driven, and where to hear about the
   next market. A map with three dots on it told nobody anything they could act on. */
.where { display: grid; gap: 1rem; }
.where-photo {
  position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); background: var(--card);
}
.where-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.where-photo figcaption {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem;
  text-align: center; font-size: .78rem; letter-spacing: .03em; color: var(--fg-soft);
}
.where-card {
  margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}
.where-card > div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem; padding: .95rem 1.1rem; align-items: baseline; }
.where-card > div + div { border-top: 1px solid var(--line); }
.where-card dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.where-card dd { margin: 0; font-size: .93rem; color: var(--fg-soft); }
.where-card dd strong { color: var(--fg); }
.trust {
  list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .45rem;
  font-size: .9rem; color: var(--fg-soft);
}
.trust li { display: flex; gap: .55rem; align-items: baseline; }
.trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }
.trust strong { color: var(--fg); }
@media (min-width: 900px) {
  .delivery-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
}

/* ---------- faq ---------- */
.faq details {
  border-bottom: 1px solid var(--line); padding: .35rem 0;
}
.faq summary {
  cursor: pointer; list-style: none; padding: .95rem 2rem .95rem 0;
  font-weight: 600; position: relative; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: .8rem;
  font-size: 1.35rem; font-weight: 400; color: var(--accent);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--fg-soft); font-size: .95rem; padding-bottom: .5rem; margin: 0; }

/* ---------- closer ---------- */
.closer {
  background: var(--accent); color: #fff;
  padding: clamp(3rem, 8vw, 4.5rem) 0; text-align: center;
}
html[data-theme="dark"] .closer { color: #2a1512; }
.closer h2 { margin-bottom: .4rem; }
.closer p { opacity: .9; margin-bottom: 1.6rem; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--bg-alt); border-top: 1px solid var(--line);
  padding: 2.6rem 0 2rem;
}
.foot-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.3rem; }
.foot-brand strong { display: block; font-family: "Fraunces", Georgia, serif; }
.foot-brand span { font-size: .85rem; color: var(--fg-soft); }
.foot-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-bottom: 1.3rem; }
.foot-nav a { color: var(--fg); text-decoration: none; font-size: .9rem; }
.foot-nav a:hover { color: var(--accent); }
.foot-fine { font-size: .8rem; color: var(--fg-soft); margin: 0; }

/* ---------- sticky order bar (phones) ---------- */
/* Sits off the bottom of the screen until script.js says the hero has scrolled away, then slides
   up. Only on narrow screens: above 860px the header button is in full view the whole time and a
   second fixed bar would just be covering the page. */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: .6rem 1.25rem max(.6rem, env(safe-area-inset-bottom));
  transform: translateY(120%);
  transition: transform .3s ease;
}
.order-bar.show { transform: none; }
.order-bar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--maxw); margin-inline: auto;
}
.order-bar p { margin: 0; display: flex; flex-direction: column; line-height: 1.25; }
.order-bar strong { font-size: .95rem; }
.order-bar span { font-size: .76rem; color: var(--fg-soft); }
.order-bar .btn { flex: none; }
/* Room under the footer so the bar never sits on top of the last line of it. */
body.order-bar-on { padding-bottom: 72px; }
@media (min-width: 860px) {
  .order-bar { display: none; }
  body.order-bar-on { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .order-bar { transition: none; }
}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
}