/* ═══════════════════════════════════════════════════════════════════════
   fressocafe.com / Our Story — the storefront, drawn.

   The sketch is the launch screen's ink, a raster, revealed through an SVG
   mask of eighty-odd thick round-capped strokes that follow the building's
   real structure. Each is a <path pathLength="1"> carrying its own --t and
   --d, so one class on the figure starts the whole sequence and the timing
   lives with the geometry in scripts/site-sketch.py. Ground line, pillars,
   roof, windows, balcony, sign, the word, the shopfront, the street: the
   order a hand would take. A full-width rectangle fades up under the last
   beat so the final frame is the artwork whatever the strokes missed, and
   the three coloured petals bloom in after the ink has settled.

   This file loads after site.css and replaces its .story-mark layout.
   ═══════════════════════════════════════════════════════════════════════ */

.story-page .story {
  padding-top: calc(var(--header-h) + clamp(30px, 7vw, 72px));
}

/* From 900px up site.css still lays this page out in the five columns the old
   F-petal mark needed, and drops the drawing into a 1fr track that collapses
   to nothing once the two fixed tracks have taken the row. That mark is gone:
   back to one column, and a second one at the width the drawing wants. */
.story-page .story-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 7vw, 64px);
}
.story-page .story-text { grid-column: auto; }

/* Phones read the drawing first, at the full width of the column, and the
   heading follows it. The viewBox reserves the height, so nothing shifts. */
.sketch {
  --pen: cubic-bezier(.32, .06, .22, 1);
  margin: 0 auto;
  width: min(100%, 560px);
}
.sketch-svg { display: block; width: 100%; height: auto; }

@media (min-width: 1140px) {
  .story-page .story { padding-top: calc(var(--header-h) + clamp(72px, 10vw, 168px)); }
  .story-page .story-grid {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
  }
  .story-page .story-text { grid-column: 1; grid-row: 1; }
  .sketch { grid-column: 2; grid-row: 1; width: min(100%, 620px); justify-self: end; margin: 0; }
}

/* ─── Armed ───────────────────────────────────────────────────────────────
   Every stroke is one dash the length of its own path (pathLength="1" makes
   that the same number for all of them), parked a whole length back: the mask
   is black, and there is no drawing on the page yet.

   The dash is 1.02 long and parked at 1.06, not 1 and 1. Both slivers matter.
   Park it at exactly 1 and the dash ends precisely on the start of the path,
   which WebKit draws as a round cap sitting on nothing: a scatter of dots up
   to two hundred pixels across, uncovering a chair here and a lamp there long
   before anything is drawn. Ending the dash a little short of the path keeps
   that boundary off the line. The 1.02 is the other end: it lets the dash
   overrun the finish so no engine leaves a hair of ink behind at the cap. */
.sk-strokes path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1.02 1.4;
  stroke-dashoffset: 1.06;
}
.sk-settle { opacity: 0; }
.sk-petal { opacity: 0; transform: scale(.88); }

/* ─── Drawing ─────────────────────────────────────────────────────────── */
.sketch.is-drawing .sk-strokes path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d) var(--pen) var(--t);
}
.sketch.is-drawing .sk-settle {
  opacity: 1;
  transition: opacity var(--d) linear var(--t);
}
.sketch.is-drawing .sk-petal {
  opacity: 1;
  transform: none;
  transition: opacity var(--d) var(--ease-soft) var(--t),
              transform calc(var(--d) * 1.3) var(--ease) var(--t);
}

/* ─── Nothing to wait for ─────────────────────────────────────────────────
   No script, or a reader who has asked for less movement: the rectangle is
   already white and the petals are already coloured, so the mask passes the
   whole drawing through and the page shows the finished sketch. */
.no-js .sk-settle, .no-js .sk-petal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sk-settle, .sk-petal { opacity: 1; transform: none; }
}