/* Social Club (/social-club/, page 6940): the locked mockup's own rules after the shared stylesheet (social-club.html,
   tag social-club-design-locked-2026-11-01). Loads after design-system.css. */
@font-face { font-family: "Script MT"; src: url("../../prosecco-theme/fonts/ScriptMTBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Cormorant Garamond for the menu card, self-hosted (SIL Open Font License, assets/fonts/OFL.txt): one variable file
   covers 500 and 600, plus the 500 italic; Latin only, as Google Fonts serves it */
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
  /* 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%); }

  /* Round P11: the street interviews as a wall (after the testimonial wall on ui.aceternity.com). Each card is one
     reel: the face, "@proseccobella · Miami", the line from the reel's title card, and every third card the cover
     itself. The whole card opens the reel on Instagram, where the follow button is. Masonry columns; phones show six
     and a "See all 12" button */
  .wall { list-style: none; margin: 40px 0 0; padding: 0; columns: 1; column-gap: 16px; }
  .w-card { break-inside: avoid; margin: 0 0 16px; }
  .w-card a { display: block; padding: 20px 20px 16px; border-radius: 20px; background: #fff; border: 1px solid rgba(23,22,20,.07); text-decoration: none; color: var(--ink);
              box-shadow: 0 1px 2px rgba(23,22,20,.04), 0 18px 36px -26px rgba(23,22,20,.35); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
  .w-card a:hover, .w-card a:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(23,22,20,.04), 0 26px 46px -24px rgba(23,22,20,.45); }
  .w-head { display: flex; align-items: center; gap: 12px; }
  .w-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
  .w-who { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; } .w-who b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .w-who span { font-size: 14px; color: var(--body); }
  .w-ig { width: 22px; height: 22px; fill: none; stroke: #b83d82; stroke-width: 1.8; flex: none; } .w-ig circle:last-child { fill: #b83d82; stroke: none; }
  .w-q { display: block; margin: 16px 0 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
  .w-media { position: relative; display: block; margin-top: 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; }
  .w-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .w-media i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%231f4d36'/%3E%3C/svg%3E") center / 26px no-repeat; }
  .w-go { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--green); }
  .wall-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
  @media (min-width: 600px) { .wall { columns: 2; } .wall-more { display: none; } }
  @media (min-width: 900px) { .wall { columns: 3; column-gap: 20px; } .w-card { margin-bottom: 20px; } }
  @media (min-width: 1200px) { .wall { columns: 4; } }

  /* Social Club (round SC2). Pull, not push: the page shows the room and lets people ask to be in it. A photo film
     under the bar, the name, the volume as a drifting wall, four chapters as swipe decks, a short cut film, the feed,
     the invitation, thanks, questions, close. Every section fits about one phone screen; the depth is behind a tap. */
  /* the house rule for the bubbles (as on the homepage, About and product pages): they rise only inside their own
     cream band, behind its content, never across a neighbouring section */
  [data-fizz] { position: relative; overflow: hidden; }
  [data-fizz] > canvas.fizz { z-index: 0; }
  [data-fizz] > .wrap { position: relative; z-index: 1; }
  section.sc-hero { height: 82svh; min-height: 540px; }
  .sc-hero .film-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: 0 0 22px 22px; background: #1c1712; }
  /* round SC7: the cover is the sales sheet's own photo, the two friends hugging; on wider screens the two guys hugging
     sit beside them, two halves of one evening. Round SC8 ("Take on Me"): each photo arrives as a pencil sketch drawn
     from the photo itself, the pencil draws itself across, the colour comes up underneath, then the butterfly signs it.
     The same timing as the Cooking with Prosecco heroes. Reduced motion shows the photos */
  .sc-pair { display: grid; grid-template-columns: 1fr; }
  .sc-cell { position: relative; min-width: 0; overflow: hidden; background: #faf5ea; }
  .sc-cell + .sc-cell { display: none; }
  .sc-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%; display: block; }
  .sc-cell + .sc-cell img { object-position: 55% 32%; }
  @media (min-width: 700px) { .sc-pair { grid-template-columns: 1fr 1fr; gap: 4px; } .sc-cell + .sc-cell { display: block; } }
  .sc-cell .ink { clip-path: inset(0 100% 0 0); animation: sc-draw 2.6s cubic-bezier(.55,.1,.35,1) .25s forwards; }
  .sc-cell + .sc-cell .ink { animation-delay: .7s; }
  .sc-cell .photo { opacity: 0; animation: sc-up 2.2s ease 2.7s forwards; }
  .sc-cell { animation: sc-settle 16s cubic-bezier(.2,.6,.2,1) both; }
  .sc-hero::after, .sc-hero blockquote { opacity: 0; animation: sc-up 1.4s ease 3.6s forwards; }
  .sc-bfly { position: absolute; right: 2.6%; bottom: 4%; z-index: 3; width: clamp(30px, 4vw, 52px); aspect-ratio: 240 / 207; background: #e3c27a;
             -webkit-mask: url(../assets/butterfly-mark.png) center / contain no-repeat; mask: url(../assets/butterfly-mark.png) center / contain no-repeat;
             opacity: 0; animation: sc-up 1.2s ease 4.6s forwards; }
  @keyframes sc-draw { to { clip-path: inset(0 0 0 0); } }
  @keyframes sc-up { to { opacity: 1; } }
  @keyframes sc-settle { from { transform: scale(1.05); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .sc-cell, .sc-cell .ink { animation: none; } .sc-cell .photo, .sc-hero::after, .sc-hero blockquote, .sc-bfly { animation: none; opacity: 1; } }
  .sc-hero::after { content: ""; position: absolute; inset: 40% 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,.66)); }
  .sc-hero blockquote { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; margin: 0 auto; width: min(100% - 32px, 1120px); color: #fff; text-align: center; }
  .sc-hero blockquote p { margin-left: auto !important; margin-right: auto !important; }
  .sc-hero blockquote p { margin: 0; color: #fff; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500;
                          font-size: clamp(30px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.02em; max-width: 12em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
  .sc-hero blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.88); }
  @media (min-width: 900px) { section.sc-hero { height: min(88svh, 52vw); } .sc-hero blockquote { bottom: 48px; } }
  .sc-intro { text-align: center; }
  .sc-intro h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -.03em; }
  .sc-intro h1 .g, .sc-sec h2 .g, .sc-line .g { color: var(--gold); }
  .sc-line { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; color: var(--ink); margin: 18px auto 0; max-width: 20em; text-wrap: balance; }
  .sc-intro p.sub { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 14px auto 0; text-wrap: pretty; }
  .sc-soon { display: inline-block; margin-top: 20px; padding: 8px 18px; border: 1px solid var(--gold); border-radius: 18px; font-size: 13px; line-height: 1.6; max-width: 22em; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
  @media (min-width: 900px) { .sc-intro p.sub { font-size: 20px; } }
  .sc-sec h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; text-align: center; }
  .sc-sec .eyebrow { text-align: center; }
  .sc-sec .lede { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 12px auto 0; text-align: center; text-wrap: pretty; }
  @media (min-width: 900px) { .sc-sec .lede { font-size: 20px; } }
  button.ph { display: block; padding: 0; border: 0; background: #2a2622; cursor: zoom-in; overflow: hidden; border-radius: 10px; flex: none; }
  button.ph img { display: block; height: 100%; width: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  button.ph:hover img, button.ph:focus-visible img { transform: scale(1.05); }
  button.ph:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  /* the wall: three rows drifting in opposite directions; pauses on touch, hover and off screen */
  section.sc-wall { padding-left: 0; padding-right: 0; }
  .drift { display: grid; gap: 8px; margin-top: 26px; overflow: hidden; }
  .drift .row { display: flex; gap: 8px; width: max-content; height: 150px; animation: driftL 80s linear infinite; }
  .drift .row:nth-child(2) { animation-name: driftR; animation-duration: 95s; }
  .drift .row:nth-child(3) { animation-duration: 70s; }
  .drift.paused .row, .drift:hover .row { animation-play-state: paused; }
  @keyframes driftL { to { transform: translateX(-50%); } }
  @keyframes driftR { from { transform: translateX(-50%); } to { transform: none; } }
  @media (min-width: 900px) { .drift .row { height: 220px; } .drift { gap: 10px; } .drift .row { gap: 10px; } }
  @media (prefers-reduced-motion: reduce) { .drift { overflow-x: auto; } .drift .row { animation: none; } .drift .row .dup { display: none; } }
  /* the chapters: one swipe deck each, a peek of the next photo so the swipe explains itself */
  .chap { margin-top: 34px; }
  .chap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: min(100% - 32px, 1120px); margin: 0 auto 12px; }
  .chap-head h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }
  .chap-head p { margin: 4px 0 0; font-size: 16px; color: var(--body); }
  .chap-head .n { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--gold); white-space: nowrap; }
  .deck { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 6px; scrollbar-width: none; scroll-padding: 0 16px; }
  .deck::-webkit-scrollbar { display: none; }
  .deck button.ph { height: 360px; scroll-snap-align: start; border-radius: 14px; }
  @media (min-width: 900px) { .deck { padding: 0 max(16px, calc((100% - 1120px) / 2)); scroll-padding: 0 max(16px, calc((100% - 1120px) / 2)); gap: 14px; } .deck button.ph { height: 440px; } }
  .chap-side { display: flex; align-items: center; gap: 14px; flex: none; }
  .deck-nav { display: none; }
  @media (min-width: 900px) and (hover: hover) {
    .deck-nav { display: flex; gap: 8px; }
    .deck-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(30,28,29,.25); background: #fff; font-size: 20px; cursor: pointer; color: var(--ink); }
  }
  /* the feed: the Partners wall, eight on desktop and nine on phones until "See all" */
  .sc-feed { background: var(--white); }
  .sc-feed .tag { text-align: center; margin: 14px auto 0; font-size: 17px; color: var(--body); }
  .sc-feed .tag a { color: #b83d82; font-weight: 600; text-decoration: none; }
  /* three columns at every width (Michael: otherwise the page takes forever on a phone). The social-post card stays
     whole; on phones it is scaled down: smaller avatar, handle and quote, the "with" line and the icon dropped */
  .sc-feed .wall { columns: 3 !important; column-gap: 10px; }
  .sc-feed .wall .w-card.more { display: block; }  /* every reel shows: the number of people is the point */
  @media (min-width: 900px) { .sc-feed .wall { column-gap: 20px; } }
  @media (max-width: 599px) {
    .sc-feed .wall { margin-left: -6px; margin-right: -6px; column-gap: 6px; }
    .sc-feed .w-card { margin-bottom: 6px; }
    .sc-feed .w-card a { padding: 8px 7px 8px; border-radius: 12px; }
    .sc-feed .w-head { gap: 5px; }
    .sc-feed .w-av { width: 20px; height: 20px; }
    .sc-feed .w-who b { font-size: 9.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
    .sc-feed .w-who span, .sc-feed .w-ig { display: none; }
    .sc-feed .w-q { margin-top: 7px; font-size: 13px; line-height: 1.2; }
    .sc-feed .w-media { margin-top: 7px; border-radius: 8px; }
    .sc-feed .w-media i { width: 30px; height: 30px; margin: -15px 0 0 -15px; background-size: 14px; }
    .sc-feed .w-go { margin-top: 6px; font-size: 0; }
    .sc-feed .w-go::before { content: "Watch \2192"; font-size: 11px; }
  }
  .sc-feed .wall-foot { gap: 10px; }
  /* as on the Partners page (round P22): each card waits grey and soft, comes into full colour as it rises into view,
     and goes back if you scroll up past it */
  .fade-ready .fc { opacity: .35; filter: grayscale(1) blur(2px); transform: translateY(12px); transition: opacity .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: var(--fd, 0s); }
  .fade-ready .fc.in { opacity: 1; filter: none; transform: none; }
  /* the invitation, set like one: a cream card with a fine gold double rule */
  .sc-invite .card { max-width: 680px; margin: 0 auto; background: #fffaf2; border-radius: 6px; padding: 40px 24px; text-align: center;
                     box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px #fffaf2, 0 0 0 7px var(--gold), 0 30px 60px -36px rgba(23,22,20,.5); }
  .sc-invite .card .eyebrow { color: var(--gold); }
  .sc-invite .card h2 { margin-bottom: 16px; }
  .sc-invite .card p { font-size: 18px; line-height: 1.55; color: var(--ink); max-width: 26em; margin: 0 auto 12px; text-wrap: pretty; }
  .sc-invite .card .who { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.35; }
  .sc-invite .card .who b { color: var(--gold); font-weight: 500; }
  .sc-invite .ctas { justify-content: center; margin-top: 22px; }
  .sc-invite .soon { margin: 26px 0 0; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); }
  @media (min-width: 900px) { .sc-invite .card { padding: 56px 64px; } .sc-invite .card p { font-size: 20px; } .sc-invite .card .who { font-size: 26px; } }
  /* house notes: three wry, true rules at the foot of the invitation, as real invitations carry them */
  .sc-invite .card .house { text-align: center; margin: 26px auto 0; padding-top: 20px; border-top: 1px solid rgba(134,102,28,.3); max-width: 26em; }
  .sc-invite .card .soon { margin: 26px auto 0; font-size: 13px; letter-spacing: .18em; color: var(--body); }
  .sc-invite .card .house-h { margin: 0 auto 8px; padding-left: .2em; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
  .sc-invite .card .house p:not(.house-h) { margin: 0 auto 4px; font-style: italic; font-size: 16px; line-height: 1.5; color: var(--body); }
  .sc-thanks { text-align: center; }
  /* the thanks reads like every other piece of running copy on the page (the intro's sub-line); the eyebrow stays an eyebrow */
  .sc-thanks p:not(.eyebrow) { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 0 auto; text-wrap: balance; }
  @media (min-width: 900px) { .sc-thanks p:not(.eyebrow) { font-size: 20px; } }
  .sc-faq { text-align: center; }
  .sc-faq h2 { margin-bottom: 22px; }
  .sc-faq .all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  .close .quiet { margin: 16px 0 0; font-size: 15px; color: rgba(255,255,255,.8); }
  .close .quiet a { color: #fff; }
  main summary, main dt, main dd { text-wrap: balance; } main p, main li { text-wrap: pretty; }
  /* the menu, round SC4: a printed card, photographed. Laid paper texture (SVG noise), deckle-soft shadow, a slight
     tilt; the title in script with a gold-foil sheen, the dishes in an engraved serif (Cormorant Garamond, Google Fonts,
     open licence; self-host in the theme), courses in spaced small capitals, ink in warm black */
  .menu-card { --ink-m: #2b2420; --foil: #9a7a3a; position: relative; max-width: 540px; margin: 30px auto 0; padding: 46px 30px 40px; text-align: center; color: var(--ink-m);
               background:
                 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
                 radial-gradient(ellipse at 30% 20%, #fffdf7, #f7f0e1 70%, #efe5cf);
               border-radius: 2px; transform: rotate(-.6deg);
               box-shadow: 0 1px 1px rgba(60,45,25,.12), 0 8px 18px -6px rgba(60,45,25,.22), 0 34px 60px -30px rgba(60,45,25,.45); }
  .menu-card::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(154,122,58,.55); outline: 1px solid rgba(154,122,58,.35); outline-offset: 4px; pointer-events: none; }
  .mc-crest { display: block; width: 46px; height: auto; margin: 0 auto 10px; opacity: .85; filter: invert(48%) sepia(45%) saturate(560%) hue-rotate(5deg) brightness(.85); }
  .mc-title { font-family: "Script MT", "Snell Roundhand", cursive; font-weight: 700; font-size: 46px; line-height: 1.05; margin: 0;
              background: linear-gradient(100deg, #7d5f25 10%, #c9a65a 35%, #8a6a2c 55%, #d8b874 75%, #7d5f25 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .mc-sub { margin: 8px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-size: 14px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--foil); }
  .mc-course { margin-top: 24px; padding-top: 0; border-top: 0; }
  .mc-course::before { content: "\2766"; display: block; font-size: 14px; color: var(--foil); opacity: .7; margin-bottom: 10px; }
  .mc-course h3 { font-family: "Cormorant Garamond", Garamond, serif; font-size: 15px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--foil); margin: 0 0 10px; }
  .mc-course p { margin: 0 0 10px; }
  .mc-course b { display: block; font-family: "Cormorant Garamond", Garamond, serif; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ink-m); letter-spacing: .01em; }
  .mc-course span { display: block; font-family: "Cormorant Garamond", Garamond, serif; font-size: 18px; line-height: 1.3; color: #5d524a; font-style: italic; }
  .mc-foot { margin: 28px 0 0; padding-top: 0; border-top: 0; font-family: "Script MT", "Snell Roundhand", cursive; font-weight: 700; font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--foil); }
  .menu-card b, .menu-card span, .mc-sub, .mc-course h3 { text-shadow: 0 .5px 0 rgba(255,255,255,.6); }
  .mc-trio em { display: block; margin-top: 8px; font-family: "Cormorant Garamond", Garamond, serif; font-style: normal; font-weight: 500; font-size: 19px; color: var(--ink-m); }
  .mc-trio em::before, .mc-trio em::after { content: "\00b7"; color: var(--foil); margin: 0 8px; }
  .mc-course .mc-note { margin: 4px 0 8px; font-family: "Cormorant Garamond", Garamond, serif; font-style: italic; font-size: 15px; letter-spacing: .06em; color: var(--foil); }
  .mc-pert { position: absolute; top: 26px; right: 34px; margin: 0; font-family: "Script MT", "Snell Roundhand", cursive; font-weight: 700; font-size: 22px; color: var(--foil); transform: rotate(-6deg); }
  .mc-when { margin: 14px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-style: italic; font-size: 20px; color: var(--ink-m); }
  .mc-time { margin: 6px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-size: 15px; letter-spacing: .08em; color: #5d524a; }
  .mc-small { margin: 22px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-style: italic; font-size: 14px; color: #6d6259; }
  .mc-rsvp { margin: 8px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--foil); }
  .mc-rsvp a { color: inherit; text-decoration: none; letter-spacing: .06em; text-transform: none; font-size: 16px; border-bottom: 1px solid rgba(154,122,58,.4); }
  @media (max-width: 420px) { .mc-pert { top: 22px; right: 24px; font-size: 19px; } }
  .mc-tr { margin: 6px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-style: italic; font-size: 16px; color: #5d524a; }
  .sc-sec .lede.small { font-size: 15px; margin-top: 22px; }
  @media (min-width: 900px) { .menu-card { padding: 64px 64px 54px; } .mc-title { font-size: 58px; } .mc-course b { font-size: 25px; } .mc-course span { font-size: 19px; } }
  @media (max-width: 380px) { .menu-card { padding: 42px 22px 36px; } .mc-title { font-size: 40px; } }

  /* round SC5, reading pass (the Drinks Calculator rule: type a step up so it reads at arm's length). The menu card
     keeps its look; every line is larger */
  .mc-sub { font-size: 15px; }
  .mc-when { font-size: 22px; }
  .mc-time { font-size: 17px; }
  .mc-course h3 { font-size: 16px; }
  .mc-course .mc-note { font-size: 17px; }
  .mc-course b { font-size: 25px; }
  .mc-course span { font-size: 20px; line-height: 1.35; color: #4f453e; }
  .mc-trio em { font-size: 22px; }
  .mc-tr { font-size: 18px; }
  .mc-small { font-size: 16px; }
  .mc-rsvp { font-size: 15px; } .mc-rsvp a { font-size: 17px; }
  .mc-foot { font-size: 27px; }
  .menu-card { max-width: 600px; }
  @media (min-width: 900px) {
    .mc-course b { font-size: 28px; } .mc-course span { font-size: 22px; } .mc-trio em { font-size: 24px; }
    .mc-when { font-size: 24px; } .mc-time { font-size: 18px; } .mc-course h3 { font-size: 17px; } .mc-foot { font-size: 30px; }
  }
  @media (max-width: 380px) { .mc-course b { font-size: 23px; } .mc-course span { font-size: 19px; } }
  /* the highlights: six reels in two even rows of three (a grid, not a masonry), so the block ends square */
  .sc-reels .wall { columns: auto !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .sc-reels .w-card { margin: 0; }
  @media (max-width: 599px) { .sc-reels .wall { gap: 6px; } }
  /* the lightbox: every photo on the page, 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; }