/* Doughbry's inner pages: press, privacy, and the page for a wrong address.
   Loads after base.css and intro.css. Brand Guidelines v1.3: an orange band up top, then white with cream panels. */

/* ---------- The orange band at the top of every inner page ---------- */
.page-hero { padding: clamp(8rem, 6.5rem + 6vw, 11rem) 0 clamp(3rem, 7vw, 5rem); }
.page-hero__copy { display: grid; gap: 1rem; justify-items: start; }
.page-hero__lede { max-width: 28ch; }

/* ---------- The white body under the band ---------- */
.page-body { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y); }

/* A row: its heading on the left, its content on the right. Stacks on phones. */
.row { display: grid; gap: 1.2rem clamp(2rem, 6vw, 5.5rem); }
.row + .row { margin-top: clamp(2.75rem, 6vw, 4.5rem); padding-top: clamp(2.75rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.row h2 { font-size: var(--h3); line-height: 1.08; letter-spacing: -0.01em; }
.row__body { max-width: none; }          /* panels and lists line up with the dividers; only running text is kept short */
.row__body > p, .row__body > .faq { max-width: 46rem; }
.about { font-size: var(--lede); line-height: 1.45; font-weight: 500; text-wrap: pretty; }
@media (min-width: 880px) {
  .row { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
}

/* Links inside running text: tall enough to tap */
.tap { display: inline-block; padding-block: 0.62rem; margin-block: -0.3rem; font-weight: 700; }

/* ---------- Press: fast facts ---------- */
.facts { margin: 0; padding: 0.4rem clamp(1.15rem, 3vw, 2rem); background: var(--cream); border-radius: var(--radius); }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 1.5rem; padding-block: 1.1rem; }
.facts__row + .facts__row { border-top: 1px solid var(--line); }
.facts dd { margin: 0; }
.facts .facts__big { font-weight: 900; font-size: var(--h3); line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .facts__row { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; }
  .facts dd { grid-column: 2; }
}

/* ---------- Press: the logo, on its two approved backgrounds ---------- */
.logos { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.logo-card__stage { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 14%; border-radius: var(--radius); }
.logo-card__stage--cream { background: var(--cream); }
.logo-card__stage--orange { background: var(--orange); }
.logo-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1rem; margin-top: 1.1rem; }
.logo-card__name { display: block; font-weight: 700; line-height: 1.25; }
.logos-note { margin-top: 1.7rem; font-weight: 700; }
.plain-date { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---------- The closing panel: one question, one button ---------- */
.page-cta { display: grid; gap: 1.2rem 2rem; align-items: center; margin-top: clamp(3rem, 7vw, 5rem); padding: clamp(1.6rem, 5vw, 3rem); }
.page-cta h2 { color: var(--ink); font-size: var(--h3); line-height: 1.08; letter-spacing: -0.01em; }
.page-cta .btn { justify-self: start; }
.page-cta__copy { display: grid; gap: 0.5rem; max-width: 36rem; }
@media (min-width: 720px) {
  .page-cta { grid-template-columns: minmax(0, 1fr) auto; }
  .page-cta .btn { justify-self: end; }
}

/* ---------- Privacy: a handful of plain sentences, each with its number ---------- */
.plain { display: grid; gap: 0; counter-reset: plain; }
.plain li {
  counter-increment: plain;
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline;
  padding: 1.05rem 0; border-top: 1px solid var(--line);
  font-weight: 500; font-size: var(--lede); line-height: 1.35;
}
.plain li:last-child { border-bottom: 1px solid var(--line); }
.plain li::before { content: counter(plain); font-weight: 900; font-size: var(--h3); line-height: 1; color: var(--orange); }

/* ---------- Wrong address: the whole screen is the orange band ---------- */
.page-hero--lost { --pad-b: clamp(8rem, 5rem + 9vw, 12.5rem); display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-bottom: var(--pad-b); }
.page-hero--lost .page-hero__lede { max-width: 26ch; }
/* The cow looks up over the bottom edge: one drawing, huge and cropped (R91).
   It only ever shows inside the empty strip under the words (--pad-b), so it can never touch them. */
.lost__cow { --cow: clamp(12rem, 30vw, 27rem); width: var(--cow); right: max(1.2rem, 6vw); bottom: calc(var(--pad-b) - 1.7rem - var(--cow) * 0.753); }
.lost__cow img { animation-duration: 6.4s; }

/* ====================================================================================================
   The bigger site: The Pies, Our Story, Find Us, Questions. These pages also load home.css, so the menu
   board, the stickers, the panels and the sign up band are the very same ones the home page uses.
   ==================================================================================================== */

/* ---------- A drawing looking up over the bottom edge of the orange band (R91: huge and cropped) ----------
   --w is how wide it is, --ratio its height for that width, --show how much of it stands above the edge. */
.page-hero--art { --show: clamp(6.5rem, 15vw, 13rem); }
.page-hero--art .page-hero__copy > * { max-width: min(100%, 36rem); }
.page-hero--art h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem); }
.page-hero--art .page-hero__lede { max-width: 30ch; }
.page-hero__copy { grid-template-columns: minmax(0, 1fr); }       /* the column can never grow wider than the screen */
.page-hero h1, .page-hero .lede, .timeline span, .bigfacts__label, .faq summary { overflow-wrap: anywhere; }
.page-hero__cta { margin-top: 0.5rem; }
.peek { position: absolute; z-index: -1; pointer-events: none; right: var(--right, max(1.2rem, 6vw)); width: var(--w); bottom: calc(var(--show) - var(--w) * var(--ratio, 1)); }
.peek img, .peek .pie { display: block; width: 100%; height: auto; }
.peek--sun { --w: clamp(15rem, 30vw, 28rem); --ratio: 1; --show: clamp(5rem, 11vw, 9.5rem); }
.peek--leaf { --w: clamp(12rem, 23vw, 21rem); --ratio: 1.164; rotate: -8deg; }
.peek--sprout { --w: clamp(12rem, 23vw, 21rem); --ratio: 1.04; rotate: 6deg; }
.peek--pie { --w: clamp(15rem, 30vw, 27rem); --ratio: 0.827; --show: calc(var(--w) * 0.62); }
@media (max-width: 900px) {
  /* On small screens the drawing gets its own strip under the words, so it can never touch them */
  .page-hero--art { --show: 5.6rem; padding-bottom: calc(var(--show) + 2.2rem); }
  .page-hero--art .page-hero__copy > * { max-width: none; }
  .peek { --right: -1rem; }
  .peek--sun { --w: 13rem; --show: 5.2rem; }
  .peek--leaf, .peek--sprout { --w: 10.5rem; }
  .page-hero--pie { --show: 7.6rem; }       /* enough of the pie shows to read as a pie */
  .peek--pie { --w: 12.5rem; --show: inherit; --right: -0.4rem; }
}

/* ---------- The Pies ---------- */
.bigfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.bigfacts li { display: grid; gap: 0.2rem; align-content: start; padding: clamp(1.25rem, 3vw, 2rem); background: var(--cream); border-radius: var(--radius); }
.bigfacts b { font-weight: 900; font-size: clamp(4.5rem, 3rem + 7vw, 8rem); line-height: 0.86; letter-spacing: -0.04em; color: var(--orange); }
.bigfacts__label { font-weight: 900; font-size: var(--h3); line-height: 1.08; letter-spacing: -0.01em; }
.ticks { margin: 0.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.ticks li { display: flex; align-items: center; gap: 0.7em; font-weight: 900; font-size: var(--h3); line-height: 1.2; letter-spacing: -0.01em; }
.ticks li::before { content: ""; width: 0.62em; height: 0.62em; flex: none; background: var(--orange); clip-path: polygon(50% 6%, 96% 90%, 6% 78%); rotate: -13deg; }
.ticks li:nth-child(even)::before { rotate: 15deg; }
.corners--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.corners--rows { grid-template-columns: minmax(0, 1fr); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { counter-increment: step; display: grid; gap: 0.45rem; align-content: start; padding-top: 1.1rem; border-top: 3px solid var(--orange); }
.step::before { content: counter(step); font-weight: 900; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--orange); }
.sides { isolation: isolate; overflow: hidden; overflow: clip; }
.side-art { position: absolute; z-index: -1; pointer-events: none; }
.side-art img { width: 100%; height: auto; }
.side-art--chili { top: clamp(1.2rem, 3vw, 2.4rem); right: -4vw; width: clamp(13rem, 19vw, 17rem); rotate: 10deg; }
@media (max-width: 900px) {
  .bigfacts, .corners--2 { grid-template-columns: minmax(0, 1fr); }
  .bigfacts li { grid-template-columns: 5.2rem minmax(0, 1fr); column-gap: 0.4rem; align-items: center; }
  .bigfacts b { grid-row: 1 / span 2; font-size: 5rem; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-art--chili { display: none; }
}
@media (max-width: 420px) { .steps { grid-template-columns: minmax(0, 1fr); } .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }

/* ---------- Our Story ---------- */
.pull { font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.25; letter-spacing: -0.008em; text-wrap: pretty; max-width: 44rem; }
.pull b { font-weight: 900; letter-spacing: -0.012em; }
.story-top { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.story-why .section-head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.story-why .ticks { margin-top: 0.9rem; }
.timeline li:last-child span { font-weight: 700; }
.timeline { margin: 0; padding: 0; list-style: none; display: grid; }
.timeline li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline b { font-weight: 900; font-size: var(--h3); line-height: 1; color: var(--orange); }
.timeline span { font-weight: 500; font-size: var(--lede); line-height: 1.35; text-wrap: balance; }

/* ---------- Find Us ---------- */
.find-shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); align-items: stretch; }
.find-shop .place { align-content: center; }
.map { margin: 0; padding: 0; overflow: hidden; display: grid; gap: 0; align-content: space-between; }
.map svg { display: block; width: 100%; height: auto; }
.map figcaption { padding: 0.9rem clamp(1.25rem, 3vw, 2rem) 1.1rem; text-wrap: balance; }
.map__pulse { transform-box: fill-box; transform-origin: 50% 50%; animation: pin-pulse 2.6s ease-out infinite; }
@keyframes pin-pulse { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
.map__road { font-family: var(--font-brand); font-weight: 700; font-size: 12.5px; fill: var(--ink); }
.map__place { font-family: var(--font-brand); font-weight: 900; font-size: 14px; fill: var(--ink); }
@media (max-width: 700px) { .find-shop { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Questions ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.row:has(+ .row) .faq details:last-child { border-bottom: 0; }        /* the divider between groups already draws that line */
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  min-height: 3.6rem; padding: 0.9rem 0; font-weight: 900; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); line-height: 1.15; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {            /* a little triangle that flips when the answer opens */
  content: ""; width: 1rem; height: 1rem; background: var(--orange); clip-path: polygon(50% 12%, 96% 88%, 4% 88%);
  rotate: 180deg; transition: rotate 0.45s var(--spring);
}
.faq details[open] summary::after { rotate: 0deg; }
.faq summary > span, .faq summary { text-wrap: balance; }
/* calm when closed, a cream card when open */
.faq details { transition: background-color 0.25s ease; }
.faq details[open] { background: var(--cream); border-radius: var(--radius); border-color: transparent; margin-inline: -1.1rem; padding-inline: 1.1rem; }
.faq details[open] + details { border-top-color: transparent; }
.faq .answer { padding: 0 2.2rem 1.3rem 0; display: grid; gap: 0.7rem; max-width: 42rem; }
@media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) {
  /* where the browser can do it, the answer slides open instead of popping */
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
} }

/* ---------- Press: the brand colors ---------- */
.swatches { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1.2rem 1rem; }
.swatches li { display: grid; gap: 0.15rem; }
.swatch { display: block; height: 4.5rem; border-radius: var(--radius); margin-bottom: 0.45rem; }
.swatch--line { border: 1px solid var(--line); }
.swatches b { font-weight: 900; }

/* ---------- Story: three short lines the brand stands on ---------- */
.ticks--lines { gap: 0.55rem; }
.ticks--lines li { align-items: baseline; line-height: 1.15; text-wrap: balance; }
.ticks--lines li::before { translate: 0 0.02em; }

/* ---------- Wrong address: ways back in ---------- */
.lost-links { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; }
@media (max-width: 480px) { .lost-links { display: grid; grid-template-columns: auto auto; justify-content: start; } }

@media (prefers-reduced-motion: reduce) { .map__pulse { display: none; } }      /* the pin's ripple is motion only, so it is simply left out */