/* The Brand (/bella-principessa/): the rules the locked mockup adds after the shared stylesheet (about.html, tag
   about-design-locked-2026-10-31). 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%); }