/* ============================================================
   LET MARK COOK — 05 graphics
   heat contours · ghost words · kitchen dockets · drawn marks

   Everything here is decoration and behaves like it: no pointer
   events, aria-hidden in the markup, and sized in viewport units so
   it carries its weight on a phone, which is where most of this site
   will be read. Nothing depends on hover.
   ============================================================ */

/* ---------- heat contours ----------
   Nested irregular rings, built by js/09-graphics.js. They stand in for
   the heat spreading out from a pan — the culinary equivalent of a
   contour map, and the closest thing this site has to a background
   texture. Deliberately faint: they should register as texture, not as
   a diagram competing with the type. */

.contour {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: rgba(247,244,238,.14);
  will-change: transform;
}
.contour svg { width: 100%; height: 100%; display: block; }

/* on the paper section the lines have to darken instead */
.standard .contour { color: rgba(10,5,6,.16); }

/* against the claret CTA they can afford to be warmer */
.book-cta .contour { color: rgba(255,162,58,.20); }

.contour--intro  { top: -8%;  right: -30%; width: 92vw; aspect-ratio: 1; }
.contour--stand  { bottom: -22%; left: -34%; width: 88vw; aspect-ratio: 1; }
.contour--food   { top: -14%; left: -32%; width: 96vw; aspect-ratio: 1; }
.contour--book   { top: -30%; left: 50%; width: 120vw; aspect-ratio: 1; transform: translateX(-50%); }
.contour--finale { bottom: -26%; right: -28%; width: 90vw; aspect-ratio: 1; }

@media (min-width: 900px) {
  .contour--intro  { width: 46vw; right: -8%; }
  .contour--stand  { width: 40vw; left: -10%; }
  .contour--food   { width: 44vw; left: -12%; }
  .contour--book   { width: 68vw; }
  .contour--finale { width: 42vw; right: -8%; }
}

/* ---------- ghost words ----------
   An outlined word set enormous behind the content. It fills the empty
   half of a phone screen that would otherwise be flat colour, and gives
   the eye something to travel past as the section scrolls. */

.ghost {
  position: absolute;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.04em;
  line-height: .8;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247,244,238,.16);
  font-size: clamp(5rem, 30vw, 18rem);
  will-change: transform;
}
.standard .ghost { -webkit-text-stroke-color: rgba(10,5,6,.14); }

/* On a phone they sit fully inside the screen. Bleeding a word off the
   edge is a fine device on a wide layout, but on a narrow one a half
   word just looks like something got clipped. */
.ghost--intro {
  left: 50%;
  bottom: -2%;
  transform: translate3d(-50%, var(--par-y, 0px), 0);
}
.ghost--food {
  left: 50%;
  top: -1%;
  transform: translate3d(-50%, var(--par-y, 0px), 0);
}

@media (min-width: 900px) {
  .ghost--intro {
    left: auto; right: -3%; bottom: -4%;
    transform: translate3d(0, var(--par-y, 0px), 0);
  }
  .ghost--food {
    left: -2%; right: auto; top: -2%;
    transform: translate3d(0, var(--par-y, 0px), 0);
  }
}

/* Safari and Firefox both do -webkit-text-stroke; anything that does not
   would render a solid block of transparent text, which is invisible
   rather than wrong, so no fallback is needed. */

/* ---------- kitchen dockets ----------
   The little printed tickets that come up on a pass. They carry real
   information rather than being pure ornament, and the slight rotation
   plus the torn bottom edge is what makes the page feel assembled by
   hand instead of laid out on a grid. */

.docket {
  position: relative;
  z-index: 2;
  width: min(15rem, 62vw);
  padding: .9rem 1rem 1.4rem;
  background: var(--cream);
  color: var(--ink);
  font-size: .7rem;
  line-height: 1.5;
  box-shadow: 0 1rem 2.4rem rgba(0,0,0,.42);
  transform: rotate(var(--tilt, -3deg));
  /* torn bottom edge */
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 10px),
    92% 100%, 84% calc(100% - 8px), 76% 100%, 68% calc(100% - 8px),
    60% 100%, 52% calc(100% - 8px), 44% 100%, 36% calc(100% - 8px),
    28% 100%, 20% calc(100% - 8px), 12% 100%, 4% calc(100% - 8px), 0 100%
  );
}

.docket__head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px dashed rgba(10,5,6,.3);
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.docket dl { display: grid; gap: .3rem; margin: 0; }
.docket dl > div { display: flex; justify-content: space-between; gap: .75rem; }
.docket dt { color: #6d6055; }
.docket dd { margin: 0; font-weight: 700; text-align: right; }

.docket__note {
  margin: .6rem 0 0;
  padding-top: .5rem;
  border-top: 1px dashed rgba(10,5,6,.3);
  color: #6d6055;
}
.docket__note b { color: var(--flame); }

/* ---------- drawn marks ----------
   Strokes that draw themselves as the section arrives, the way someone
   would mark up a printed page. Each one points at something specific;
   none is there just to have a squiggle. */

.ink {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: var(--flame);
}
.ink svg { width: 100%; height: auto; overflow: visible; display: block; }
.ink path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.5s var(--ease);
}
.ink.is-in path { stroke-dashoffset: 0; }
.ink path:nth-child(2) { transition-delay: .35s; }

/* underline beneath the standard heading */
.ink--underline {
  left: 0;
  bottom: -.4rem;
  width: min(22rem, 76%);
}

/* A ring around one phrase, not the paragraph. Scoped to a .marked span
   so it circles the words it is about — sized to the block it was in
   first, it just struck the whole paragraph through. */
.marked {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ink--ring {
  left: 50%;
  top: 50%;
  width: 126%;
  height: 200%;
  transform: translate(-50%, -50%);
  color: var(--ember);
}
.ink--ring svg { height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ink path { transition: none; stroke-dashoffset: 0; }
}

/* ---------- layout the graphics sit in ---------- */

.standard__head {
  display: grid;
  gap: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  justify-items: start;
}
.standard__title-wrap { position: relative; }
.standard__title { margin-bottom: 0 !important; }

@media (min-width: 860px) {
  .standard__head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .docket { justify-self: end; }
}

.book-cta__promise { position: relative; }

/* ---------- stacking ----------
   Section content has to sit above all of it. */
.intro .wrap,
.standard .wrap,
.rail-section .wrap,
.rail-section .rail,
.book-cta .wrap,
.finale__inner { position: relative; z-index: 2; }

.intro, .standard, .book-cta, .finale, .rail-section { overflow: hidden; }

/* the pinned rails must not be clipped by their own section, or the
   sticky pane stops sticking — clip the inner pane instead */
.rail-section[data-pin] { overflow: visible; }