/* Our History (/timeline/, page 6934): the page's own rules, verbatim from the approved mockup timeline.html
   (tag timeline-design-locked-2026-10-31). Loads after design-system.css. */
  /* Timeline page (round T1): same system as the homepage and About. Michael's Timeline design (web-Timeline.pdf):
     each milestone is a photo and a short text, alternating sides; here they hang on one gold thread down the middle
     that draws itself as you scroll, from 50 BCE all the way round to 2025. Phones stack photo, then year and words,
     centred, with the thread showing between milestones. */
  .film video { object-fit: cover; }
  /* round T5: the intro opens as on the homepage. On phones "Timeline" sits top left under the film, beside the
     hanging Rosé, and the headline starts straight after it (no extra gap); desktop keeps it centred */
  /* round T6: on phones the headline drops a fraction so it clears the bottle's base */
  @media (max-width: 899px) { .intro .eyebrow { margin-bottom: 46px; } }
  /* the Veneto stamp closes the story, on white just above the questions (on the cream intro it showed as a square) */
  .faq .stamp-faq { width: 150px; height: auto; margin: 0 auto 22px; mix-blend-mode: multiply; }
  @media (min-width: 900px) { .faq .stamp-faq { width: 180px; } }
  .intro h1 .g { color: var(--gold); }
  .intro .about-lede a { color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  .tl-sec { background: var(--white); }
  .tl-head { text-align: center; margin-bottom: 34px; }
  .tl-head h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
  .tl-head h2 .g { color: var(--gold); }
  .tl-box { position: relative; } .tl { position: relative; list-style: none; margin: 0; padding: 0; }
  /* the thread: a pale rule the full length, and the gold one over it that grows with the scroll (set by the script) */
  .tl-box::before, .tl-fill { content: ""; position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; border-radius: 2px; }
  .tl-box::before { bottom: 0; background: var(--rule); }
  .tl-fill { height: var(--fill, 0px); background: linear-gradient(#c9a24a, var(--gold)); z-index: 0; }
  .tl-item { position: relative; z-index: 1; display: grid; gap: 0; justify-items: center; text-align: center; padding-bottom: 44px; }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-item figure { margin: 0 0 18px; width: 100%; max-width: 460px; }
  .tl-item img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; background: var(--paper); }
  .tl-text { background: var(--white); padding: 0 6px 6px; max-width: 30em; }
  /* the dot on the thread: hollow until the milestone reaches the middle of the screen, then gold. Our own chapters
     (1999, 2022, 2025) carry the butterfly instead */
  .tl-dot { display: block; width: 16px; height: 16px; margin: 0 auto 12px; border-radius: 50%; border: 2px solid var(--gold); background: #fff;
            transition: background-color .4s ease, transform .4s ease; }
  .tl-item.on .tl-dot { background: var(--gold); transform: scale(1.15); }
  .tl-dot.bf { width: 34px; height: 34px; border: 0; background: #fff url("../assets/butterfly.webp") center / 26px auto no-repeat; opacity: .45; transition: opacity .4s ease, transform .4s ease; }
  .tl-item.on .tl-dot.bf { background: #fff url("../assets/butterfly.webp") center / 26px auto no-repeat; opacity: 1; transform: scale(1.1); }
  .tl-year { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--gold);
             opacity: .35; transition: opacity .5s ease; margin-bottom: 10px; }
  .tl-item.on .tl-year { opacity: 1; }
  .tl-text h3 { font-size: 22px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; text-wrap: balance; }
  .tl-text h3 small { display: block; font-size: .82em; color: var(--body); margin-top: 4px; }
  .tl-text p { font-size: 18px; line-height: 1.5; margin: 0 0 8px; }
  .tl-text p strong { color: var(--ink); font-weight: 500; }
  .tl-text a { color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  .tl-text .g { color: var(--gold); font-weight: 500; }
  .tl-stats { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 18px; line-height: 1.6; color: var(--ink); }
  /* review marks: mockup only, so Michael can see which figures still need a source */
  .check { display: inline-block; margin-top: 6px; padding: 4px 10px; border: 1px dashed #b98a2e; border-radius: 6px; font-size: 14px; color: #7a5a14; background: #fffaf0; }
  /* desktop: the two sides interleave, each milestone starting halfway down the one before, so the thread zig-zags
     between them and the page is about half as long as one row per milestone */
  @media (min-width: 900px) {
    .tl-head { margin-bottom: 48px; }
    .tl { display: grid; grid-template-columns: 1fr 96px 1fr; grid-auto-rows: auto; }
    .tl-item { grid-column: 1; grid-row: var(--r) / span 2; padding-bottom: 40px; max-width: 520px; width: 100%; justify-self: end; }
    .tl-item.flip { grid-column: 3; justify-self: start; }
    .tl-item figure { max-width: none; }
    .tl-item img { aspect-ratio: 3 / 2; }
    .tl-text { position: relative; background: none; padding: 0 10px; }
    /* the dot sits on the thread, level with the year */
    .tl-text .tl-dot { position: absolute; top: 12px; right: -56px; margin: 0; }
    .tl-item.flip .tl-text .tl-dot { right: auto; left: -56px; }
    .tl-text .tl-dot.bf { top: 3px; right: -65px; } .tl-item.flip .tl-text .tl-dot.bf { left: -65px; }
    .tl-year { font-size: 44px; }
    .tl-text h3 { font-size: 26px; } .tl-text p, .tl-stats { font-size: 20px; }
  }
  /* round T6 (adopted): short milestones with no photo (1966, 2020) and the bottle numbers as one sourced, counting figure */
  .tl-item.mini .tl-text { padding: 6px 10px 8px; }
  .tl-item.mini h3 { font-size: 20px; } .tl-item.mini .tl-year { font-size: 30px; }
  @media (min-width: 900px) {
    /* short milestones (no photo) take one row in the empty half beside the photo above, level with its words */
    .tl-item.mini { grid-row: var(--r) / span 1; align-self: end; }
  }
  .tl-big { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 44px !important; line-height: 1; letter-spacing: -.02em;
            color: var(--ink) !important; margin: 6px 0 8px !important; font-variant-numeric: tabular-nums; }
  .tl-big .tl-count { color: var(--gold); }
  @media (min-width: 900px) { .tl-big { font-size: 64px !important; } }
  /* sources: one quiet line under the timeline, like Apple's footnotes; opens to a small numbered list */
  .sources { max-width: 720px; margin: 40px auto 0; border-top: 1px solid var(--rule); padding-top: 14px; text-align: left; }
  .sources summary { cursor: pointer; list-style: none; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
                     font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
  .sources summary::-webkit-details-marker { display: none; }
  .sources summary::after { content: "+"; font-size: 20px; font-weight: 300; letter-spacing: 0; }
  .sources[open] summary::after { content: "\2212"; }
  .sources ol { margin: 8px 0 0; padding-left: 1.6em; font-size: 15px; line-height: 1.55; color: var(--body); }
  .sources li { margin-bottom: 8px; padding: 2px 4px; border-radius: 4px; scroll-margin-top: 120px; }
  .sources li:target { background: #fffaf0; outline: 1px solid #e3c27a; }
  .sources a { color: var(--green); text-underline-offset: 3px; }
  .sources .credits { margin: 14px 0 0; padding: 12px 4px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.55; color: var(--body); }
  .tl-text h3 .fn { font-family: "SF Pro Display", -apple-system, sans-serif; font-size: .5em; letter-spacing: 0; }
  @media (prefers-reduced-motion: reduce) { .tl-dot, .tl-year { transition: none; } }
  /* round T2, as Apple does it: each milestone waits greyed and still, then comes to life as it rises up the screen.
     The photo turns from grey to full colour and settles from a slight zoom (on desktop it also glides in from its own
     side); the words rise into place a beat later and the year warms from grey to gold. Driven by the scroll (--p for
     the photo, --q for the words, 0 to 1, set by the script), so scrolling back reverses it. Without the script or
     with reduced motion everything is simply shown. */
  .tl-item { --p: 1; --q: 1; }
  .tl-item figure { overflow: hidden; border-radius: 16px; }
  .lit-tl .tl-item figure { opacity: calc(.4 + .6 * var(--p)); }
  .lit-tl .tl-item img { filter: grayscale(calc(1 - var(--p))) brightness(calc(.9 + .1 * var(--p)));
                         transform: scale(calc(1.1 - .1 * var(--p))); will-change: transform, filter; }
  .lit-tl .tl-text > :not(.tl-dot) { opacity: calc(.15 + .85 * var(--q)); transform: translateY(calc((1 - var(--q)) * 28px)); }
  .lit-tl .tl-year { transition: none; opacity: 1; color: color-mix(in srgb, var(--gold) calc(var(--q) * 100%), #c4bfb6); }
  /* round T3: three pushes. (1) the years count up into place like an odometer as their words arrive (tabular
     figures so nothing jumps); (2) the thread's tip carries a soft gold light, like one bubble rising, while it draws;
     (3) each photo drifts a little slower than its frame (--y), so the pictures read as windows with depth.
     Adopted by Michael (30 Oct). */
  .tl-year, .tl-big { font-variant-numeric: tabular-nums; word-spacing: -.28em; } /* Favorit's tabular set widens the space too */
  .tl-fill::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
                    background: #f3dc9a; box-shadow: 0 0 0 3px rgba(201,162,74,.25), 0 0 18px 6px rgba(227,194,122,.65); opacity: var(--tip, 0);
                    transition: opacity .3s ease; }
  @media (prefers-reduced-motion: no-preference) { .tl-fill::after { animation: tip 1.8s ease-in-out infinite; } }
  @keyframes tip { 50% { box-shadow: 0 0 0 5px rgba(201,162,74,.18), 0 0 26px 10px rgba(227,194,122,.5); } }
  .lit-tl .tl-item img { transform: translateY(var(--y, 0px)) scale(calc(1.14 - .08 * var(--p))); }
  @media (min-width: 900px) {
    .lit-tl .tl-item figure { transform: translateX(calc((1 - var(--p)) * -48px)); }
    .lit-tl .tl-item.flip figure { transform: translateX(calc((1 - var(--p)) * 48px)); }
  }