/* ==========================================================================
   On Market Networking — Design System
   Signature motif: the vesica piscis (the lens shape where two circles
   overlap) — used as a divider, a bullet, a card accent, and a loader.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy: #101F35;
  --navy-soft: #1B2E4A;
  --sage: #B7C6A4;
  --sage-deep: #8FA47A;
  --gold: #C6982F;
  --gold-soft: #E4C77E;
  --teal: #0E8B90;
  --teal-soft: #4FB3B7;
  --cream: #FAF7F0;
  --paper: #FFFFFF;
  --stone: #6B6A60;
  --line: rgba(16,31,53,0.12);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
p{ margin: 0; }
button{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap{ max-width: var(--container); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.eyebrow{
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-soft);
}
.eyebrow.dark{ color: var(--gold); }

/* ---------- Vesica / lens signature ---------- */
.lens-divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 28px 0; }
.lens-divider .stem{ width:64px; height:1px; background: var(--line); }
.lens-divider svg{ width:28px; height:16px; flex-shrink:0; }

.lens-mark{ display:inline-flex; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(250,247,240,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:34px; width:auto; }
.brand-word{ font-family: var(--serif); font-size: 17px; letter-spacing: 0.02em; }
.brand-word b{ font-weight:600; }
nav.main-nav{ display:flex; align-items:center; gap:36px; }
nav.main-nav a{ font-size: 14px; font-weight:500; color: var(--navy-soft); position:relative; }
nav.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .25s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ transform: scaleX(1); transform-origin: left; }
.nav-cta{
  font-size: 13px; font-weight:600; letter-spacing:.03em; color: var(--paper) !important;
  background: var(--navy); padding: 11px 20px; border-radius: 999px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background: var(--navy-soft); }
.menu-btn{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.menu-btn span{ display:block; width:22px; height:1.5px; background:var(--navy); margin:5px 0; }

@media (max-width: 860px){
  nav.main-nav{
    position: fixed; inset: 64px 0 0 0; background: var(--cream); flex-direction:column;
    justify-content:flex-start; padding: 40px var(--pad); gap: 26px; transform: translateY(-8px);
    opacity:0; pointer-events:none; transition: all .25s ease;
  }
  nav.main-nav.open{ opacity:1; pointer-events:auto; transform: translateY(0); }
  nav.main-nav a{ font-size: 20px; }
  .menu-btn{ display:block; }
  .nav-cta{ align-self:flex-start; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 30px; border-radius: 999px; font-size: 14px; font-weight:600;
  letter-spacing:.03em; cursor:pointer; border:1px solid transparent; transition: all .2s ease;
  white-space: nowrap;
}
.btn-gold{ background: var(--gold); color: var(--navy); }
.btn-gold:hover{ background: var(--gold-soft); }
.btn-outline{ border-color: rgba(255,255,255,0.5); color: var(--paper); }
.btn-outline:hover{ border-color: var(--paper); background: rgba(255,255,255,0.08); }
.btn-outline-teal{ border-color: var(--teal-soft); color: var(--teal-soft); }
.btn-outline-teal:hover{ border-color: var(--teal-soft); background: rgba(79,179,183,0.12); }
.btn-outline-dark{ border-color: var(--navy); color: var(--navy); }
.btn-outline-dark:hover{ background: var(--navy); color: var(--paper); }
.btn-block{ width:100%; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height: 88vh; display:flex; align-items:flex-start; color:var(--paper); overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,31,53,0.72) 0%, rgba(16,31,53,0.32) 42%, rgba(16,31,53,0.5) 100%);
}
.hero-content{ position:relative; z-index:1; padding-bottom: 40px; padding-top: 120px; width:100%; }
.hero h1{
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.08; max-width: 16ch; margin-top:16px;
  animation: rise .8s ease both;
}
.hero .sub{
  margin-top: 18px; max-width: 46ch; font-size: 16.5px; color: rgba(255,255,255,0.85);
  animation: rise .8s .1s ease both;
}
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 28px; animation: rise .8s .2s ease both; }
@keyframes rise{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }

/* ---------- Section scaffolding ---------- */
section{ padding: 108px 0; }
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 42px); margin-top:14px; }
.section-head p{ margin-top:16px; color: var(--stone); font-size:16px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.on-navy{ background: var(--navy); color: var(--paper); }
.on-navy .eyebrow{ color: var(--gold); }
.on-navy .section-head p{ color: rgba(255,255,255,0.68); }
.on-navy .section-head h2{ font-size: clamp(24px, 2.8vw, 34px); line-height: 1.4; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Events grid ---------- */
.event-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px){ .event-grid{ grid-template-columns: 1fr; } }

.event-card{
  background: var(--paper); border-radius: 18px; overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease;
}
.event-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(16,31,53,0.28); }
.event-card .thumb{ aspect-ratio: 2/3; overflow:hidden; position:relative; background: var(--navy); }
.event-card .thumb img{ width:100%; height:100%; object-fit:contain; object-position: top; transition: transform .5s ease; }
.event-card:hover .thumb img{ transform: scale(1.06); }
.event-card .thumb .tag{
  position:absolute; top:16px; left:16px; background: rgba(16,31,53,0.85); color:var(--gold-soft);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
}
.event-card .body{ padding: 26px 26px 28px; flex:1; display:flex; flex-direction:column; }
.event-card .date{ font-size:13px; color: var(--gold); font-weight:600; letter-spacing:.02em; }
.event-card h3{ font-size: 24px; margin-top:8px; }
.event-card .loc{ color:var(--stone); font-size:14px; margin-top:6px; }
.event-card .cta{ margin-top:auto; padding-top: 22px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; color: var(--navy); }
.event-card .cta svg{ width:14px; height:14px; transition: transform .2s ease; }
.event-card:hover .cta svg{ transform: translateX(4px); }

/* ---------- Why cards ---------- */
.why-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px){ .why-grid{ grid-template-columns: 1fr; gap:36px; } }
.why-item .lens-mark{ margin-bottom: 20px; }
.why-item h3{ font-size:20px; }
.why-item p{ margin-top:10px; color: rgba(255,255,255,0.68); font-size:15px; }

/* ---------- Story split ---------- */
.split{ display:grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items:start; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; gap:36px; } }
.split .story-copy h2{ font-size: clamp(24px, 2.5vw, 31px); line-height: 1.35; margin-top: 14px; }
.split .story-copy p{ margin-top: 18px; color: var(--stone); font-size:16.5px; }
.split .story-copy .eyebrow{ color: var(--gold) !important; }
.story-mission{
  margin-top: 28px; padding: 24px 26px; border-left: 3px solid var(--gold);
  background: rgba(198,152,47,0.06); border-radius: 4px;
}
.story-mission p{ margin-top:0 !important; color: var(--navy) !important; font-weight:600; font-size:16.5px; }
.story-mission p:first-child{ font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:12px; color:var(--gold) !important; margin-bottom:8px; }
.split .story-copy p:first-of-type{ margin-top:20px; }
.split .story-copy .lede{ font-family: var(--serif); font-style: italic; font-size:22px; color: var(--navy); margin-top:0; }
.split-media{ position: sticky; top: 100px; border-radius: 20px; overflow:hidden; aspect-ratio: 3/4; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){ .split-media{ position: static; aspect-ratio: 4/3; } }

/* ---------- Interest form ---------- */
.interest-panel{
  background: var(--navy); border-radius: 24px; padding: 64px var(--pad); position:relative; overflow:hidden;
}
.interest-panel .lens-bg{ position:absolute; right:-60px; top:50%; transform: translateY(-50%); opacity:0.5; width:340px; }
.interest-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width: 900px){ .interest-grid{ grid-template-columns:1fr; } }
.interest-panel h2{ color:var(--paper); font-size: clamp(26px,3vw,36px); }
.interest-panel p{ color: rgba(255,255,255,0.7); margin-top:14px; font-size:15.5px; max-width: 44ch; }

.field-row{ display:flex; gap:10px; flex-wrap:wrap; }
.field-row input[type=text], .field-row input[type=email]{
  flex:1; min-width:180px; padding: 15px 18px; border-radius: 999px; border:1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06); color: var(--paper); font-size:14px;
}
.field-row textarea{
  flex:1; min-width:100%; padding: 15px 18px; border-radius: 20px; border:1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06); color: var(--paper); font-size:14px; font-family: inherit;
  min-height: 120px; resize: vertical;
}
.field-row input::placeholder, .field-row textarea::placeholder{ color: rgba(255,255,255,0.45); }
.field-row input:focus{ outline:none; border-color: var(--gold); background: rgba(255,255,255,0.1); }
.form-note{ font-size:12.5px; color: rgba(255,255,255,0.45); margin-top:14px; }
.radio-group{ display:flex; gap:24px; flex-wrap:wrap; padding: 6px 2px; }
.radio-option{ display:flex; align-items:center; gap:8px; font-size:14px; color: var(--navy); cursor:pointer; }
.radio-option input{ width:16px; height:16px; accent-color: var(--gold); cursor:pointer; }
.field-label{ font-size:13px; font-weight:600; color: var(--navy-soft); margin: 18px 0 8px; display:block; }
.field-label.required::after{ content:" *"; color: var(--gold); }
.conditional-field{ display:none; margin-top:10px; }
.conditional-field.show{ display:block; }
.context-pill{
  display:inline-flex; align-items:center; gap:8px; background: rgba(198,152,47,0.1); color: var(--gold);
  border:1px solid rgba(198,152,47,0.3); border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; margin-bottom:18px;
}
.form-success{ display:none; color: var(--gold-soft); font-weight:600; font-size:15px; align-items:center; gap:10px; }
.form-success.show{ display:flex; }
.interest-form.hide, .field-row.hide{ display:none; }

select.event-select{
  padding: 15px 18px; border-radius: 999px; border:1px solid var(--line);
  background: var(--cream); color: var(--navy); font-size:14px; min-width: 200px; width:100%;
}
select.event-select option{ color:#111; }

/* light variant of the interest panel used on event pages */
.interest-panel.on-cream{ background: var(--paper); border:1px solid var(--line); }
.interest-panel.on-cream h2{ color: var(--navy); }
.interest-panel.on-cream p{ color: var(--stone); }
.interest-panel.on-cream .field-row input, .interest-panel.on-cream .field-row textarea{
  border-color: var(--line); background: var(--cream); color: var(--navy);
}
.interest-panel.on-cream .field-row input::placeholder, .interest-panel.on-cream .field-row textarea::placeholder{ color: #9c9a8f; }
.interest-panel.on-cream .form-note{ color: #9c9a8f; }

/* ---------- Footer ---------- */
footer.site-footer{ background: var(--navy); color: rgba(255,255,255,0.6); padding: 64px 0 32px; }
.footer-top{ display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; padding-bottom: 40px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand .brand-word{ color:var(--paper); }
.footer-brand p{ margin-top:14px; max-width: 34ch; font-size:14px; color: rgba(255,255,255,0.5); }
.footer-cols{ display:flex; gap: 64px; }
.footer-col h4{ font-family: var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,0.4); font-weight:600; margin-bottom:16px; }
.footer-col a{ display:block; font-size:14px; margin-bottom:10px; color: rgba(255,255,255,0.72); }
.footer-col a:hover{ color: var(--gold-soft); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top: 24px; font-size:13px; flex-wrap:wrap; gap:10px; }
@media (max-width: 700px){ .footer-top, .footer-cols{ flex-direction:column; gap:28px; } }

/* ---------- Event detail page ---------- */
.event-hero-simple{ background: var(--cream); padding: 132px 0 56px; }
.event-hero-simple .breadcrumb{ color: var(--stone); margin-bottom: 22px; }
.event-hero-simple .breadcrumb a:hover{ color: var(--gold); }
.hero-flyer{ position: relative; border-radius: 20px; overflow:hidden; box-shadow: 0 32px 64px -32px rgba(16,31,53,0.35); line-height:0; }
.hero-flyer img{ width:100%; height:auto; display:block; }
.hero-flyer-cta{
  position:absolute; display:block; cursor:pointer;
  border-radius: 999px; transition: background 0.2s ease, box-shadow 0.2s ease;
}
.hero-flyer-cta:hover{ background: rgba(255,255,255,0.14); box-shadow: 0 0 0 4px rgba(255,255,255,0.1); }

.event-meta-row{ display:flex; gap:28px; flex-wrap:wrap; margin-top:24px; }
.event-meta{ display:flex; align-items:center; gap:10px; font-size:14px; color: rgba(255,255,255,0.85); }
.event-meta svg{ width:16px; height:16px; color: var(--gold); flex-shrink:0; }
.event-hero h1{ font-size: clamp(30px,4vw,50px); max-width: 16ch; }

.info-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 64px; }
@media (max-width: 900px){ .info-grid{ grid-template-columns:1fr; } }
.info-grid .lede{ font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--navy); margin-top: 6px; }
.info-grid p.body-copy{ margin-top:18px; color: var(--stone); font-size:16px; }

.attend-list{ list-style:none; margin: 20px 0 0; padding:0; display:grid; gap:12px; }
.attend-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--navy-soft); }
.attend-list svg{ width:16px; height:16px; margin-top:3px; color: var(--gold); flex-shrink:0; }

.detail-card{ background: var(--paper); border:1px solid var(--line); border-radius: 18px; padding: 30px; }
.detail-card h4{ font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); font-weight:600; }
.detail-card .row{ display:flex; justify-content:space-between; padding: 14px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.detail-card .row:last-child{ border-bottom:none; }
.detail-card .row span:first-child{ color: var(--stone); }
.detail-card .row span:last-child{ font-weight:600; text-align:right; }

.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding: 24px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:17px; font-weight:500; font-family: var(--serif); color: var(--navy); }
.faq-q .plus{ font-size:22px; color: var(--gold); transition: transform .25s ease; flex-shrink:0; margin-left:20px; font-family: var(--sans); font-weight:300; }
.faq-item.open .faq-q .plus{ transform: rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-a p{ padding: 0 0 24px; color: var(--stone); font-size:15px; max-width: 62ch; }

.breadcrumb{ font-size:13px; color: rgba(255,255,255,0.55); display:flex; align-items:center; gap:8px; }
.breadcrumb a:hover{ color:var(--gold-soft); }

.other-events{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; }
@media (max-width:700px){ .other-events{ grid-template-columns:1fr; } }