/* Meeting History — mymeetinghistory.com
   Palette and typeface are the canonical product identity:
   green #0C3B2E, cream #F2EFE6, Libre Franklin (SIL OFL, self-hosted). */

@font-face{font-family:"Libre Franklin";src:url("/assets/libre-franklin-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/assets/libre-franklin-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#EEECE8;          /* matches the product proof ground */
  --ink:#191C1A;
  --muted:#5B655F;
  --faint:#636C66;
  --green:#0C3B2E;
  --cream:#F2EFE6;
  --rule:#D6D3CC;
  --measure:34rem;
  --pad:clamp(1.5rem,6vw,3rem);
  --font:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:500;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
h1,h2{font-weight:600;line-height:1.22;letter-spacing:-0.005em;margin:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:var(--green);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:.75rem;z-index:9;background:var(--green);color:var(--cream);
  padding:.6rem 1rem;text-decoration:none;border-radius:2px}

/* ---------- shell ---------- */
.site,main>section,.site-foot{
  max-width:64rem;margin-inline:auto;padding-inline:var(--pad);
}
.site{padding-block:clamp(1.75rem,5vw,2.75rem)}
.mark{margin:0;font-weight:600;font-size:.6875rem;letter-spacing:.24em;color:var(--green);
  display:flex;gap:.7em}
main>section{padding-block:clamp(2.75rem,7vw,4.5rem);border-top:1px solid var(--rule)}
main>section:first-child{border-top:0;padding-top:clamp(.5rem,2vw,1.5rem)}
h2{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin-bottom:clamp(1.5rem,3.5vw,2.25rem)}

/* ---------- hero ---------- */
.hero{display:grid;gap:clamp(2.5rem,6vw,3.5rem);align-items:center}
.hero h1{font-size:clamp(1.875rem,1.35rem + 2.5vw,3.05rem);letter-spacing:-0.02em;
  max-width:16ch;text-wrap:balance}
.hero .lede{margin-top:clamp(1.25rem,3vw,1.75rem);max-width:var(--measure);color:var(--muted)}
.hero-art{justify-self:center;max-width:23rem;width:100%}
.hero-art img{width:100%}

.cta-wrap{margin-top:clamp(1.75rem,4vw,2.25rem);display:flex;flex-wrap:wrap;
  align-items:center;gap:.75rem 1rem}
.cta{
  font:inherit;font-weight:600;font-size:.9375rem;letter-spacing:.02em;
  background:var(--green);color:var(--cream);border:1px solid var(--green);
  padding:.85rem 1.6rem;border-radius:2px;cursor:pointer;
}
.cta[disabled]{background:transparent;color:var(--faint);border-color:var(--rule);cursor:default}
.cta-note{font-size:.8125rem;color:var(--faint)}

/* ---------- facts ---------- */
.spec{margin:0;display:grid;gap:0}
.spec>div{display:grid;gap:.15rem .5rem;padding:1rem 0;border-top:1px solid var(--rule)}
.spec>div:first-child{border-top:0;padding-top:0}
.spec dt{font-weight:600;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.spec dd{margin:0;max-width:var(--measure)}

/* ---------- spread ---------- */
.spread figure{margin:0}
.spread picture{display:block}
.spread img{width:100%;border-radius:2px}
.spread figcaption{margin-top:clamp(1rem,2.5vw,1.5rem);max-width:var(--measure);
  font-size:.9375rem;color:var(--muted)}

/* ---------- use ---------- */
.use p,.use ol{max-width:var(--measure)}
.cases{margin:0 0 1.15em;padding-left:1.35em}
.cases li{margin-bottom:.45em}
.cases li::marker{color:var(--faint)}
.hedge{color:var(--muted)}

/* ---------- notice ---------- */
.notice{
  background:var(--green);color:var(--cream);border-top:0;border-radius:2px;
  padding-block:clamp(2rem,5vw,2.75rem);
  margin-block:clamp(2.75rem,7vw,4.5rem);
}
.notice h2{color:#9DBBAE}
.notice p{max-width:var(--measure);color:#DDE6E0}

/* ---------- contact + footer ---------- */
.contact p{max-width:var(--measure)}
.address{font-weight:600}
.small{font-size:.875rem;color:var(--faint)}
.site-foot{padding-block:clamp(2.5rem,6vw,3.5rem);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.35rem 2rem;justify-content:space-between;
  font-size:.875rem;color:var(--faint)}
.site-foot p{margin:0}

/* ---------- wide ---------- */
@media (min-width:48rem){
  .hero{grid-template-columns:1.05fr .95fr}
  .hero-art{justify-self:end}
  .spec>div{grid-template-columns:11rem 1fr;align-items:baseline}
  .spec dt{padding-top:.12rem}
}
@media (max-width:47.99rem){
  .hero-art{max-width:16rem;order:-1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}