/* Shared styling for the simple text pages: privacy, terms and 404. */

.page {
  padding: calc(var(--nav-h) + var(--s-800)) 0 var(--s-900);
}

.page__head { margin-bottom: var(--s-600); }
.page h1 {
  margin: 0 0 var(--s-100);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.04;
  text-transform: uppercase;
  max-width: 680px;
}
.page__updated {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.prose { max-width: 68ch; }
.prose h2 {
  margin: var(--s-600) 0 var(--s-100);
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--marigold);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); text-wrap: pretty; }
.prose p { margin: 0 0 var(--s-200); }
.prose ul { margin: 0 0 var(--s-200); padding-left: var(--s-300); display: grid; gap: var(--s-75); }
.prose a { color: var(--marigold); }

/* ---------- Single sauce pages ---------- */

/* Breadcrumb doubles as the way back out of the page, which the 404 and the
   legal pages get from the nav. */
.crumb {
  margin: 0 0 var(--s-400);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--marigold); }

/* The character leads on a phone and sits beside the copy on a wide screen.
   The stage is the same ornate border-image frame the homepage panels use, so
   a sauce page and its card on the homepage are recognisably the same thing.
   Its sunburst, frame and drop come in as custom properties on the figure. */
.sauce__hero { display: grid; gap: var(--s-400); margin-bottom: var(--s-700); }
@media (min-width: 880px) {
  .sauce__hero { grid-template-columns: 1.05fr 1fr; gap: var(--s-600); align-items: center; }
}
.sauce__shot { margin: 0; }

/* The sauce page hero settles from the drawing to the photograph a couple of
   seconds after you arrive, driven by .is-shown from the script. The same two
   layers as the homepage panels, but on a timer rather than on scroll: there
   is nothing above this on the page to scroll through.

   The fades are offset in time the way the homepage offsets them in scroll
   distance — the character is most of the way gone before the photograph
   commits — so the midpoint is never two half-faded images on top of
   each other. */
.sauce__shot .panel__char {
  transition: opacity 760ms var(--ease-out), filter 760ms var(--ease-out);
}
.sauce__shot .panel__scene {
  transform: scale(1.06);
  transition: opacity 820ms var(--ease-out) 420ms, transform 1300ms var(--ease-out) 420ms;
}
.sauce__shot.is-shown .panel__char {
  opacity: 0;
  filter: drop-shadow(0 12px 24px rgba(12, 10, 11, 0.45)) blur(7px);
}
.sauce__shot.is-shown .panel__scene {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .sauce__shot .panel__char,
  .sauce__shot .panel__scene { transition: none; }
}

/* Sunburst, frame and drop per sauce, matching .panel--* in styles.css. These
   live here rather than inline on the element because a url() inside a custom
   property resolves against the stylesheet that declares it, not the document:
   set inline they resolve to /css/assets/… and 404. Hence ../assets/. */
.sauce--curry {
  --sunburst: url('../assets/img/sunburst-curry-daddy.webp');
  --frame: url('../assets/img/border-curry-daddy.webp');
  --char-drop: 1cm;
}
.sauce--ghas {
  --sunburst: url('../assets/img/sunburst-ghas-phoos.webp');
  --frame: url('../assets/img/border-ghas-phoos.webp');
  --char-drop: 0cm;
}
.sauce--naarang {
  --sunburst: url('../assets/img/sunburst-naarang.webp');
  --frame: url('../assets/img/border-naarang.webp');
  --char-drop: 1cm;
}

.sauce__intro h1 {
  margin: 0 0 var(--s-100);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--cream);
}
.sauce__intro .lede { margin-bottom: var(--s-300); }
.sauce__intro .heat { margin-bottom: var(--s-300); }
.sauce__price {
  margin: 0 0 var(--s-200);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sauce__price strong { color: var(--marigold); }

.sauce__body { display: grid; gap: var(--s-600); max-width: 68ch; }
@media (min-width: 880px) { .sauce__body { gap: var(--s-700); } }
.sauce__block h2 {
  margin: 0 0 var(--s-100);
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--marigold);
}
.sauce__block p { margin: 0 0 var(--s-200); color: var(--ink-soft); text-wrap: pretty; }
.sauce__block p:last-child { margin-bottom: 0; }
.sauce__ing { font-size: 16px; line-height: 26px; }

/* The photoshoot frame, sitting between the hero and the detail. Capped well
   under the text column: a 4:5 photograph at full measure would be taller
   than the screen and push everything worth reading below the fold. */
.sauce__shoot {
  margin: 0 0 var(--s-700);
  max-width: 440px;
}
.sauce__shoot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 2px solid var(--line);
}

.sauce__note { font-size: 14px; line-height: 22px; color: var(--ink-faint); }
.sauce__note a { color: var(--marigold); }

.sauce__siblings { margin-top: var(--s-800); }
.sauce__siblings h2 {
  margin: 0 0 var(--s-300);
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--marigold);
}
.sibling-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-300); }
@media (min-width: 700px) { .sibling-grid { max-width: 640px; } }
.sibling {
  display: grid;
  gap: var(--s-75);
  text-decoration: none;
  color: inherit;
}
/* .panel__stage is a block in styles.css; as a span it needs saying again. */
.sibling__stage {
  display: block;
  transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sibling:hover .sibling__stage { transform: translateY(-3px); }
}
.sibling:focus-visible { outline: 2px solid var(--marigold); outline-offset: 4px; border-radius: 16px; }
.sibling__name {
  font-family: var(--display);
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--cream);
}
.sibling__desc { font-size: 13px; line-height: 18px; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .sibling__stage { transition: none; }
}

.notfound { text-align: center; }
.notfound__art {
  width: clamp(200px, 40vw, 320px);
  height: auto;
  margin: 0 auto var(--s-400);
}
.notfound h1 { margin-inline: auto; }
.notfound .lede { margin-inline: auto; }
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-100);
  margin-top: var(--s-300);
}