/* Shared finishes for curated events, membership, and stationery. */
:root {
  --fantasi-surface: radial-gradient(ellipse at 0% 0%, rgba(107,26,48,.42), transparent 70%), linear-gradient(140deg, var(--noir-soft), var(--noir) 70%);
  --fantasi-foil: var(--gold-text); /* the one gold for highlighted words (landing.css) */
  --fantasi-paper: repeating-linear-gradient(14deg, transparent 0 3px, rgba(228,198,135,.018) 3px 4px);
}
.landing-polish .masq-panel { background: var(--fantasi-surface); }
.landing-polish .masq-glow i:nth-child(3) { background: rgba(74,44,82,.45); }

/* The private-club layer on the public pages (Oct 2026): light that follows
   the visitor's time of day, the greeting, the facts strip, metal
   membership cards, the Salon and city chapters, page transitions and the
   small interactions. Behaviour: LandingPage/js/Club-ui.js and Landing-1.js. */

/* ---------- time of day: a barely-there wash over the whole page ---------- */
html[data-daypart]::after {
  content: ""; position: fixed; inset: 0; z-index: 9989; pointer-events: none; mix-blend-mode: soft-light; transition: opacity 1.5s ease;
}
html[data-daypart="morning"]::after { background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(210, 225, 240, 0.08), transparent 70%); }
html[data-daypart="afternoon"]::after { background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 236, 200, 0.05), transparent 70%); }
html[data-daypart="evening"]::after { background: radial-gradient(ellipse 120% 90% at 50% 100%, rgba(255, 170, 90, 0.1), transparent 70%); }
html[data-daypart="night"]::after { background: radial-gradient(ellipse 110% 80% at 50% 100%, rgba(176, 68, 95, 0.1), transparent 70%), radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.18)); }

/* ---------- hero: greeting and the facts strip ---------- */
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin: 26px auto 0; padding: 0; max-width: 760px; }
.hero-facts li { display: flex; align-items: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 236, 223, 0.78); }
.hero-facts li + li::before { content: "✦"; margin: 0 14px; font-size: 8px; color: var(--gold); }
@media (max-width: 600px) { .hero-facts li { font-size: 9.5px; } .hero-facts li + li::before { margin: 0 9px; } }

/* ---------- the Salon and city chapters ---------- */
/* Image-led editorial events, with artwork rather than unannounced event photography. */
.salon { padding: 70px 0 120px; }
/* "in good company": a forest-green wash, fading to black at both edges */
.curated-events {
  position: relative;
  background:
    radial-gradient(ellipse 58% 44% at 30% 34%, var(--wash-forest), transparent 72%),
    radial-gradient(ellipse 40% 28% at 85% 72%, var(--wash-forest-soft), transparent 70%),
    linear-gradient(180deg, var(--noir) 0%, var(--tint-forest) 45%, var(--noir) 100%);
}
.salon[hidden], .salon-card[hidden] { display: none; }
.events-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.events-eyebrow, .event-meta, .salon-month { font-family: var(--font-mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--gold); }
.events-heading h2 { margin: 18px 0 22px; font-family: var(--font-serif); font-size: clamp(38px, 4.8vw, 68px); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; color: var(--cream); }
.events-heading h2 em { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--gold-bright); }
.events-heading p { margin: 0; max-width: 50ch; font-size: 17px; line-height: 1.65; color: var(--smoke); }
.events-all { flex: 0 0 auto; margin-top: 32px; }
.events-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start; }
.event-card { min-width: 0; }
.event-art { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.48; padding: 26px 30px; overflow: hidden; border-radius: 3px; }
.event-art--salon { background: var(--fantasi-surface); color: var(--cream); }
.event-art--salon::before { content: ''; position: absolute; z-index: -1; inset: 15px; border: 1px solid rgba(244,230,205,.32); }
.event-art--salon::after { content: ''; position: absolute; width: 49%; aspect-ratio: 1; right: 5%; top: 50%; transform: translateY(-50%); border: 1px solid rgba(199,166,92,.24); border-radius: 50%; box-shadow: 0 0 0 9px rgba(199,166,92,.025), inset 0 0 38px rgba(199,166,92,.025); pointer-events: none; z-index: -1; }
.event-art-top, .event-art-bottom { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.event-art-title { padding: 18px 0; font-family: var(--font-serif); font-size: clamp(55px, 7vw, 104px); line-height: .83; letter-spacing: -.05em; }
.event-art-title em { font-weight: 400; }
.event-art-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.event-art-bottom i { font-style: normal; font-size: 15px; }
.event-art--gatherings { background: radial-gradient(ellipse at 80% 5%, #514025, transparent 65%), #211b17; color: var(--cream); }
.event-art--gatherings img { position: absolute; width: 77%; height: 106%; right: -20%; top: 3%; object-fit: contain; opacity: .85; transform: rotate(-18deg); z-index: -1; transition: transform .6s ease; }
.event-art--gatherings:hover img { transform: rotate(-12deg) scale(1.04); }
.gatherings-script { font-family: var(--font-serif); font-size: clamp(34px, 4vw, 59px); line-height: 1; letter-spacing: -.035em; max-width: 7.5em; padding: 28px 0; text-shadow: 0 2px 22px #17110d; }
.event-copy { padding: 25px 0 0; }
.salon-title, .event-copy h3 { margin: 10px 0 12px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(25px, 2.7vw, 36px); line-height: 1.12; color: var(--cream); letter-spacing: -.02em; }
.salon-desc, .event-copy p { max-width: 50ch; margin: 0; font-size: 16px; line-height: 1.7; color: var(--smoke); }
.salon-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding-bottom: 5px; border-bottom: 1px solid rgba(228,198,135,.4); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); }
.salon-link[hidden] { display: none; }
.salon-link::after { content: '\2197'; font-size: 16px; }
.salon-link:hover { border-color: var(--gold-bright); }
.curated-events a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 6px; }
.events-grid:has(.salon-card[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
@media (max-width: 700px) {
  .salon { padding: 45px 0 75px; }
  .events-heading { flex-direction: column; gap: 24px; margin-bottom: 32px; }
  .events-heading h2 { font-size: clamp(36px, 8vw, 54px); }
  .events-heading p { font-size: 16px; }
  .events-heading p br { display: none; }
  .events-all { margin-top: 0; }
  .events-grid { grid-template-columns: 1fr; gap: 44px; }
  .event-art { padding: 24px; aspect-ratio: 1.3; }
  .event-art-title { font-size: clamp(64px, 19vw, 105px); }
  .gatherings-script { font-size: clamp(39px, 11vw, 62px); }
  .event-art-top, .event-art-bottom { font-size: 8px; }
}
.chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.chapters[hidden] { display: none; }
.chapters > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); margin-right: 6px; }
.chapter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chapter i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(228, 198, 135, 0.6); }
.chapter.gathering i { animation: chapterPulse 2s ease-in-out infinite; }
.chapter small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
@keyframes chapterPulse { 50% { opacity: .35; } }


/* moving between pages: see system.css (shared by every page) */

/* ---------- buttons warm like a lamp on hover; Club-ui.js draws them toward the pointer ---------- */
.btn { transition: transform .4s cubic-bezier(.2, .7, .2, 1), translate .35s cubic-bezier(.2, .7, .2, 1), background .4s ease, border-color .4s ease, color .4s ease, box-shadow .5s ease; }
.btn-gold:hover { box-shadow: 0 0 0 1px rgba(228, 198, 135, 0.4), 0 10px 30px rgba(228, 198, 135, 0.28); }
.btn-line:hover { box-shadow: 0 0 24px rgba(228, 198, 135, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .metal, .chapter.gathering i { animation: none; }
  .event-art--gatherings img { transition: none; }
}

/* Restrained finishing details. These remain readable without script or motion. */
.event-art-title { display: block; transform-origin: left center; transition: transform 300ms ease; }
.event-art--gatherings img { transition: transform 300ms ease; }
.event-card:is(:hover, :focus-within) .event-art-title { transform: scale(1.025); }
.event-card:is(:hover, :focus-within) .event-art--gatherings img { transform: rotate(-14deg) scale(1.025); }
.salon-link::after { transition: transform 250ms ease; }
.salon-link:is(:hover, :focus-visible)::after { transform: translateX(4px); }
.event-art--salon { background-image: var(--fantasi-paper), var(--fantasi-surface); }
.event-art--salon::before { background: linear-gradient(110deg, transparent 30%, rgba(228,198,135,.09) 49%, transparent 68%); background-size: 250% 100%; background-position: 100% 0; }
.event-card.polish-seen .event-art--salon::before { animation: salonLight 750ms ease 150ms both; }
@keyframes salonLight { from { background-position: 100% 0; } to { background-position: -70% 0; } }
.event-card.polish-ready { opacity: 0; transform: translateY(10px); }
.event-card.polish-ready.polish-seen { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms ease; }
.event-card:nth-child(2) { transition-delay: 100ms !important; }
.masq-band .masq-panel { grid-template-columns: 1fr; border: 1px solid rgba(228,198,135,.32); box-shadow: inset 0 1px 0 rgba(255,238,195,.12), 0 25px 60px rgba(0,0,0,.25); transition: border-color 300ms ease, box-shadow 300ms ease; }
.masq-panel:is(:hover, :focus-within) { border-color: rgba(228,198,135,.6); box-shadow: inset 0 1px 0 rgba(255,238,195,.22), 0 25px 60px rgba(0,0,0,.25); }
.masq-copy { max-width: 760px; }
.masq-copy h2 em, .events-heading h2 em { color: var(--gold-bright); background: var(--fantasi-foil); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.founder-note .letter-card { background-image: var(--fantasi-paper); box-shadow: inset 0 1px 0 rgba(228,198,135,.1), 0 34px 64px rgba(0,0,0,.55); }
.founder-note blockquote { text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.signature.signing text { animation: signWrite 750ms ease 300ms both, signFill 300ms ease 850ms both; }
.polish-heading::after { content: ''; display: block; width: 64px; height: 1px; margin-top: 24px; background: var(--gold); transform-origin: left; }
.polish-heading.polish-ready::after { transform: scaleX(0); }
.polish-heading.polish-seen::after { transform: scaleX(1); transition: transform 650ms ease; }
.landing-polish .nav-links a, .landing-polish .site-footer .sf-col a, .landing-polish .site-footer .sf-contact a { text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 250ms ease, color 250ms ease; }
.landing-polish .nav-links a:is(:hover, :focus-visible), .landing-polish .site-footer .sf-col a:is(:hover, :focus-visible), .landing-polish .site-footer .sf-contact a:is(:hover, :focus-visible) { background-size: 100% 1px; color: var(--gold-bright); }
.landing-polish .btn { transition-duration: 300ms; }
.landing-polish .btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 5px; box-shadow: 0 0 24px rgba(228,198,135,.18); }
.landing-polish .btn:active { transform: translateY(2px); translate: none !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.invite-dialog[open] .ip-seal::after { animation: sealEmboss 700ms ease 250ms both; }
@keyframes sealEmboss { 0%,100% { box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.15); } 55% { box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 1px 0 rgba(255,235,200,.6), 0 -2px 10px rgba(255,220,175,.2); } }
.landing-polish .site-footer { border-top: 1px solid rgba(228,198,135,.18); }
.landing-polish .site-footer .sf-logo { transition: filter 300ms ease, transform 300ms ease; }
.landing-polish .site-footer .sf-brand:is(:hover, :focus-within) .sf-logo { filter: brightness(1.12) drop-shadow(0 2px 7px rgba(228,198,135,.16)); transform: translateY(-4px); }
/* Pause only decorative loops, leaving scripted product demos alone. */
.ambient-paused .hero-media, .ambient-paused .hero-media__video,
.ambient-paused .hero-logo-wrap::after, .ambient-paused .masq-glow i,
.ambient-paused .marquee-track, .ambient-paused .trust-track,
.ambient-paused .ring, .ambient-paused .phone-sheen::after,
.ambient-paused .chapter.gathering i { animation-play-state: paused !important; }
.hero-logo-wrap::after, .ip-name { animation-iteration-count: 1; }
@media (prefers-reduced-motion: reduce) {
  .event-card.polish-ready, .event-card.polish-ready.polish-seen { opacity: 1; transform: none; transition: none; }
  .event-card.polish-seen .event-art--salon::before, .invite-dialog[open] .ip-seal::after, .signature.signing text { animation: none; }
  .signature text { stroke-dashoffset: 0; fill: var(--gold-bright); }
  .polish-heading.polish-ready::after, .polish-heading.polish-seen::after { transform: none; transition: none; }
  .event-art-title, .event-art--gatherings img, .salon-link::after, .masq-panel, .landing-polish .site-footer .sf-logo, .landing-polish .btn { transition: none; }
  .event-card:is(:hover, :focus-within) .event-art-title, .landing-polish .site-footer .sf-brand:is(:hover, :focus-within) .sf-logo, .salon-link:is(:hover, :focus-visible)::after, .landing-polish .btn:active { transform: none; }
  .event-card:is(:hover, :focus-within) .event-art--gatherings img { transform: rotate(-18deg); }
}

.landing-polish .events-all span { transition: transform 250ms ease; }
.landing-polish .events-all:is(:hover, :focus-visible) span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .landing-polish .events-all span { transition: none; }
  .landing-polish .events-all:is(:hover, :focus-visible) span { transform: none; }
}

/* A quiet unicorn impression behind the Salon lettering. */
.event-art--salon .salon-watermark {
  position: absolute;
  right: 9.5%;
  top: 50%;
  bottom: auto;
  width: 40%;
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
  object-fit: contain;
  opacity: .13;
  filter: brightness(0) saturate(100%) invert(72%) sepia(30%) saturate(649%) hue-rotate(3deg) brightness(91%) contrast(88%);
  pointer-events: none;
  z-index: -1;
}