/* Our Founder (/michael-goldstein/, page 129): the locked mockup's own rules after the shared stylesheet (founder.html,
   tag founder-design-locked-2026-11-01). Loads after design-system.css. */
  /* the intro sits under the hero exactly as on the homepage (eyebrow beside the bottle on phones);
     photos fade into the section instead of sitting in cards */
  .ph-hero + .intro { padding-top: 22px; } .ph-hero + .intro .eyebrow { max-width: 54%; text-align: left; }
  @media (min-width: 900px) { .ph-hero + .intro { padding-top: 32px; } .ph-hero + .intro .eyebrow { max-width: none; text-align: center; } }
  .intro h1 .g { color: var(--gold); }
  .intro .product h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }   /* the homepage's "Prosecco is the product" block, verbatim */
  .story h2 { font-size: 30px; line-height: 1.1; } @media (min-width: 900px) { .story h2 { font-size: 46px; } }   /* the homepage's section heads */
  /* the first sketch turns into the real bottle; its white paper is multiplied into the cream band */
  .sketch-film { margin: 0 auto; width: 100%; max-width: 420px; background: var(--paper); isolation: isolate; }
  .sketch-film video { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
  .postcard .history { display: inline-block; margin-top: 16px; padding: 8px 0; font-size: 17px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  .portrait-main { margin: 0 auto; max-width: 360px; }
  .story-row .portrait-main img { -webkit-mask-image: none; mask-image: none; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 36px rgba(30,28,29,.2); }
  .portrait-main figcaption { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--body); text-align: center; }
  @media (min-width: 900px) { .portrait-main { max-width: 420px; } }
  .story[data-fizz] .wrap { position: relative; z-index: 3; }
  .story-row img { border-radius: 0; max-width: 520px; aspect-ratio: auto; object-fit: initial;
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 52%, transparent 100%);
            mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 52%, transparent 100%); }


  /* Founder page (round FD1), on the About system. Michael by the water as the cover, with one line; name and
     the line about the job; the sketch film; the three hard problems; the evenings band; say hello; the green close (FD3). Everything centred; running copy capped at 26em. */
  [data-fizz] { position: relative; overflow: hidden; }
  [data-fizz] > canvas.fizz { z-index: 0; }
  [data-fizz] > .wrap { position: relative; z-index: 1; }
  main p, main li { text-wrap: pretty; }
  .fd-sec, .fd-intro { text-align: center; }
  .fd-sec h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.1; }
  .fd-sec h2 .g, .fd-intro h1 .g, .fd-line .g { color: var(--gold); }
  /* type a step above the house sizes on this page (FD5, Michael: easier to read): running copy 20px on phones, 23px on
     desktop; labels 15 / 16px; display lines larger */
  main .eyebrow { font-size: 15px; }
  @media (min-width: 900px) { main .eyebrow { font-size: 16px; } }
  .fd-sec .lede, .fd-intro .sub { font-size: 20px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 16px auto 0; }
  @media (min-width: 900px) { .fd-sec .lede, .fd-intro .sub { font-size: 23px; } }
  .fd-line { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(25px, 3vw, 38px); line-height: 1.2; color: var(--ink); margin: 18px auto 0; max-width: 20em; text-wrap: balance; }

  /* the cover: the bottles in the ice bucket under the see-through bar, rounded bottom, one line on it */
  section.fd-hero { position: relative; padding: 0; height: 78svh; min-height: 520px; }
  .fd-hero .frame { position: absolute; inset: 0; overflow: hidden; border-radius: 0 0 22px 22px; background: #1c1712; }
  .fd-hero .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 30%; animation: fdPush 14s cubic-bezier(.2,.6,.2,1) both; }
  @media (min-width: 700px) { .fd-hero .frame img { object-position: 50% 17%; } }
  @keyframes fdPush { from { transform: scale(1.08); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .fd-hero .frame img { animation: none; } }
  .fd-hero::after { content: ""; position: absolute; inset: 38% 0 0; border-radius: 0 0 22px 22px; pointer-events: none; z-index: 1;
                    background: linear-gradient(rgba(20,16,10,0), rgba(20,16,10,.7)); }
  .fd-hero blockquote { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; margin: 0 auto; width: min(100% - 32px, 1120px); text-align: center; }
  .fd-hero blockquote p { margin: 0 auto; color: #fff; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500;
                          font-size: clamp(34px, 5vw, 72px); line-height: 1.05; letter-spacing: -.02em; max-width: 11em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
  @media (min-width: 900px) { section.fd-hero { height: min(96svh, 64vw); } .fd-hero blockquote { bottom: 52px; } }

  /* the founder: the role as the eyebrow, his name, the line about the job */
  .fd-intro h1 { font-size: clamp(46px, 6vw, 84px); line-height: 1.04; letter-spacing: -.03em; }
  .fd-intro .li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; font-size: 18px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  .fd-intro .li svg { width: 18px; height: 18px; }

  /* from sketch to table: the film and its replay */
  .fd-film .sketch-film { margin-top: 26px; margin-bottom: 0; max-width: 400px; background: var(--white); }
  .fd-film .replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; margin-top: 6px; border: 1px solid rgba(30,28,29,.2);
                     border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--green); cursor: pointer; }
  /* three hard problems: a gold numeral, the name in small caps, the copy, one line set large */
  .problems { display: grid; gap: 34px; margin: 34px auto 0; max-width: 26em; padding: 0; list-style: none; }
  .problems .n { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 300; font-size: 64px; line-height: 1; color: var(--gold); letter-spacing: -.03em; }
  .problems .eyebrow { margin: 10px 0 10px; }
  .problems p { font-size: 20px; line-height: 1.55; margin: 0 auto; }
  .problems .last { margin-top: 12px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 25px; line-height: 1.2; color: var(--ink); }
  @media (min-width: 1100px) { .problems { grid-template-columns: repeat(3, 1fr); max-width: 1240px; gap: 48px; } .problems p { font-size: 21px; } .problems .last { font-size: 27px; } }

  /* the evenings (FD3): the band edge to edge carries the section; the best guests from the Social Club, one at a time,
     a new photo fading in each time you stop scrolling (and every few seconds while it is on screen). Desktop and
     phones have their own sets: wide frames, tall frames. The belief and the two links sit under it on cream. */
  section.fd-table { padding: 0; }
  .eve { position: relative; overflow: hidden; background: #1c1712; aspect-ratio: 4 / 5; max-height: 86svh; width: 100%; }
  .eve.wide { display: none; aspect-ratio: 16 / 9; }
  @media (min-width: 700px) { .eve.tall { display: none; } .eve.wide { display: block; } }
  .eve button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
                opacity: 0; transition: opacity 1.2s ease, transform 6s ease; transform: scale(1.03); }
  .eve button.on { opacity: 1; transform: none; z-index: 1; }
  .eve img { width: 100%; height: 100%; object-fit: cover; }
  .eve .dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .eve .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background-color .4s, transform .4s; }
  .eve .dots i.on { background: #fff; transform: scale(1.3); }
  @media (prefers-reduced-motion: reduce) { .eve button { transition: none; transform: none; } }
  .fd-belief { padding-top: 46px; }
  .fd-belief .fd-line { font-size: clamp(30px, 4vw, 52px); max-width: 16em; }
  .fd-belief .ctas { justify-content: center; margin-top: 22px; }

  /* say hello: the vineyard portrait, the note, two ways to reach him */
  .fd-hello img.disc { width: 210px; height: 210px; margin: 0 auto 22px; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--gold), 0 24px 44px -26px rgba(30,28,29,.5); }
  .fd-hello .ctas { justify-content: center; margin-top: 22px; }
  .fd-hello .small { margin: 20px auto 0; font-size: 17px; color: var(--body); }
  @media (min-width: 900px) { .fd-hello img.disc { width: 240px; height: 240px; } }

  /* the lightbox (the Social Club page's): every photo full size, with next / previous */
  .lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(12,10,8,.94); display: grid; place-items: center; padding: 60px 12px; }
  .lightbox[hidden] { display: none; }
  .lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  .lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.3); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
  .lightbox .lb-close { top: 12px; right: 12px; }
  .lightbox .lb-prev { left: 12px; top: 50%; margin-top: -24px; } .lightbox .lb-next { right: 12px; top: 50%; margin-top: -24px; }
  .lightbox .lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: 14px; letter-spacing: .12em; margin: 0; }
  /* Take On Me (3 Nov 2026): the founder's hero keeps its slow push on both the drawing and the photo */
  .fd-hero .frame img.tom-ink { animation: tom-draw 2.6s cubic-bezier(.55,.1,.35,1) .25s forwards, tom-out 1.4s ease 3.1s forwards, fdPush 14s cubic-bezier(.2,.6,.2,1) both; }
  .fd-hero .frame img.tom-photo { animation: tom-up .1s linear 3s forwards, fdPush 14s cubic-bezier(.2,.6,.2,1) both; }
  @media (prefers-reduced-motion: reduce) { .fd-hero .frame img.tom-photo { animation: none; opacity: 1; } }