:root{
    --navy:#0a1628; --panel:#101e33; --panel2:#0d1a2e;
    --white:#f8f8f8; --accent:#5b9bd5; --muted:#8faabe;
    --hair:rgba(91,155,213,.16); --hair2:rgba(143,170,190,.25);
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--navy);color:var(--white);font-family:var(--sans);
    font-size:17px;line-height:1.6;
  }
  a{color:var(--accent)}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  .mono{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600}
  .lede,.chatham p{font-family:Georgia,"Times New Roman",serif}

  /* nav */
  nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
  .brand b{font-size:19px;letter-spacing:-.01em}
  .brand b span{color:var(--accent)}
  .btn{display:inline-block;background:var(--accent);color:var(--navy);font-weight:700;
    padding:13px 26px;border-radius:4px;text-decoration:none;font-size:15px;border:0;cursor:pointer}
  .btn:hover{background:#7db3e3}
  .btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
  .btn:focus-visible,a:focus-visible{outline:2px solid var(--white);outline-offset:3px}

  /* hero */
  .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:64px 0 72px}
  .hero h1{font-size:clamp(38px,5.4vw,60px);line-height:1.04;letter-spacing:-.02em;margin:18px 0 20px}
  .hero h1 .colon{color:var(--accent)}
  .hero p.lede{font-size:19px;color:var(--muted);max-width:32em}
  .tagline-line{margin:24px 0 34px;font-family:Georgia,"Times New Roman",serif;font-style:italic;
    font-size:19px;color:var(--white);letter-spacing:.01em}
  .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
  .mark-box{display:flex;justify-content:center}
  .mark-box svg{width:min(340px,72vw);height:auto}
  @media(prefers-reduced-motion:no-preference){
    .seats{animation:turn 90s linear infinite;transform-origin:200px 200px}
    @keyframes turn{to{transform:rotate(360deg)}}
  }

  /* stats strip */
  .stats{border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);
    display:grid;grid-template-columns:repeat(4,1fr)}
  .stats div{padding:26px 18px;text-align:center;border-left:1px solid var(--hair2)}
  .stats div:first-child{border-left:0}
  .stats b{display:block;font-size:30px;letter-spacing:-.01em}
  .stats small{color:var(--muted);font-size:13.5px}

  section{padding:76px 0}
  h2{font-size:31px;letter-spacing:-.015em;margin:10px 0 18px}
  .eyebrow{color:var(--accent)}
  .lead{color:var(--muted);max-width:38em}

  /* format */
  .format{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
  .between-grid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--hair2) transparent}
  .between-grid .card{flex:0 0 300px;scroll-snap-align:start}
  .between-grid::-webkit-scrollbar{height:6px}
  .between-grid::-webkit-scrollbar-thumb{background:var(--hair2);border-radius:3px}
  .between-grid::-webkit-scrollbar-track{background:transparent}
  .card{background:var(--panel);border:1px solid var(--hair2);border-radius:8px;padding:30px}
  .card .mono{color:var(--muted)}
  .card h3{font-size:20px;margin:10px 0 8px}
  .card p{color:var(--muted);font-size:15.5px}

  /* sessions */
  .session{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:baseline;
    padding:24px 6px;border-bottom:1px solid var(--hair2)}
  .session:first-of-type{border-top:1px solid var(--hair2)}
  .session .num{color:var(--accent);font-size:15px;font-weight:700}
  .session h3{font-size:19px;margin-bottom:4px}
  .session p{color:var(--muted);font-size:15px}
  .session .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:9px}

  /* audience chips */
  .chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
  .chips span{border:1px solid var(--hair2);border-radius:999px;padding:9px 18px;font-size:14.5px;color:var(--white)}

  /* chatham */
  .chatham{background:var(--panel2);border:1px solid var(--hair2);border-left:3px solid var(--accent);
    border-radius:8px;padding:36px;margin-top:8px}
  .chatham h3{font-size:21px;margin-bottom:10px}
  .chatham p{color:var(--muted)}

  /* request form */
  .req{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  form{background:var(--panel);border:1px solid var(--hair2);border-radius:8px;padding:32px;display:grid;gap:14px}
  label{font-size:13.5px;color:var(--muted)}
  input,select{background:var(--navy);border:1px solid var(--hair2);border-radius:4px;color:var(--white);
    padding:12px 14px;font-size:15px;font-family:var(--sans);width:100%}
  input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

  /* horizontal scroller, same idiom as .between-grid: three cards fill the row on desktop,
     two on mobile, and anything beyond that scrolls rather than reflowing into a column */
  .team{display:flex;gap:22px;margin-top:34px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:14px;
    scrollbar-width:thin;scrollbar-color:var(--hair2) transparent}
  .team .member{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start}
  .team::-webkit-scrollbar{height:6px}
  .team::-webkit-scrollbar-thumb{background:var(--hair2);border-radius:3px}
  .team::-webkit-scrollbar-track{background:transparent}
  .member{background:var(--panel);border:1px solid var(--hair2);border-radius:8px;padding:28px;text-align:center}
  .portrait{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;background:var(--panel2);
    border:2px solid var(--accent);position:relative;overflow:hidden}
  .member{overflow:visible}
  .portrait{overflow:hidden}
  .portrait-wrap{position:relative;width:96px;margin:0 auto 18px}
  .portrait-wrap::after{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
    width:10px;height:10px;border-radius:50%;background:var(--accent)}
  .portrait-wrap .portrait{margin:0}
  .member h3{font-size:18px;margin-bottom:3px}
  .member .role{color:var(--accent);font-size:14px;margin-bottom:10px}
  .member .bio{color:var(--muted);font-size:14.5px}
  @media(max-width:860px){
    .team .member{flex-basis:calc((100% - 22px)/2);padding:20px 16px}
    .member h3{font-size:16px}
    .member .role{font-size:13px}
    .member .bio{font-size:13.5px}
  }
  footer{border-top:1px solid var(--hair2);padding:40px 0 48px;color:var(--muted);font-size:14px}
  .partners{display:flex;gap:18px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
  /* identical plates: same box on all three, so the dashed border keeps the same dash
     rhythm on every edge - unequal boxes made one frame read denser than the next.
     44px is the Partner with Us button's height, set on both here so the row is level. */
  .pslot{display:flex;align-items:center;justify-content:center;width:110px;height:44px;
    padding:0 12px;border:1px dashed var(--hair2);border-radius:5px;text-align:center}
  .partners .btn{display:inline-flex;align-items:center;height:44px;padding:0 26px}
  .pslot b{display:block;font-size:13px;letter-spacing:.08em;color:var(--white)}
  .pslot small{font-size:10.5px}
  .foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  @media(max-width:860px){
    .hero{grid-template-columns:1fr;padding:40px 0 52px}
    .mark-box{order:-1}
    .stats{grid-template-columns:1fr 1fr}
    .stats div:nth-child(3){border-left:0}
    .stats div{border-top:1px solid var(--hair2)}
    .stats div:nth-child(-n+2){border-top:0}
    .format,.req{grid-template-columns:1fr}
    /* Before you ask scrolls sideways on mobile, same as the between-grid above it,
       instead of stacking into four full-width cards */
    .format.scroll-mobile{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;padding-bottom:14px;
      scrollbar-width:thin;scrollbar-color:var(--hair2) transparent}
    .format.scroll-mobile .card{flex:0 0 300px;scroll-snap-align:start}
    .format.scroll-mobile::-webkit-scrollbar{height:6px}
    .format.scroll-mobile::-webkit-scrollbar-thumb{background:var(--hair2);border-radius:3px}
    .format.scroll-mobile::-webkit-scrollbar-track{background:transparent}
    section{padding:56px 0}
  }

/* Seat request status line, injected by seat-request.js */
.seat-msg{margin:12px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;min-height:1em}
.seat-msg.ok{color:var(--white)}
.seat-msg.err{color:#e6a2a2}

/* Members posts and pages. The roundtable page is index.hbs; this is the reading layout for
   anything behind the members wall. */
.post{max-width:720px;padding-top:40px;padding-bottom:80px}
.post h1{margin:8px 0 12px}
.post .meta{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.post-cover{width:100%;height:auto;border-radius:14px;margin:24px 0}
.post-body{font-size:17px;line-height:1.7}
.post-body h2{margin-top:36px}
.post-body img{max-width:100%;height:auto;border-radius:12px}
.post-body figcaption{font-size:12px;color:var(--muted);margin-top:8px}
.post-body blockquote{margin:24px 0;padding-left:18px;border-left:3px solid var(--muted);color:var(--muted)}
.post-foot{margin-top:48px}

/* Request a seat: stack the form under the lead text rather than beside it. Two columns put the
   fields level with the heading, so people met the form before the sentence explaining it. */
.req{grid-template-columns:1fr;gap:28px;max-width:640px}

/* Section rhythm. The eyebrow sat tight against whatever preceded it, which made each section
   read as a continuation of the one above instead of a new one. */
section{padding:96px 0}
.eyebrow{display:block;margin-bottom:14px;letter-spacing:.18em}
section > .wrap > .eyebrow:first-child,
section .eyebrow{margin-top:0}
h2{margin:14px 0 20px}
.lead{margin-bottom:8px}

/* Body paragraphs run the full content width. They were capped at 38em, which left a third of
   the page empty beside them while the section headings ran full width - the text read as a
   narrow column pinned to the left rather than as part of the layout. */
.lead{max-width:none}
.req .lead{max-width:38em}

/* Forms: honeypot, consent row and status line. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted)}
.consent input{width:auto;margin-top:3px}
.form-msg{margin:12px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;min-height:1em}
.form-msg.ok{color:var(--white)}
.form-msg.err{color:#e6a2a2}
form textarea{width:100%;font:inherit;font-family:var(--sans);font-size:15px;padding:12px 14px;border-radius:10px;resize:vertical}

/* Modal dialogs for the three forms. */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(4,10,20,.72);backdrop-filter:blur(3px)}
.modal-card{position:relative;z-index:1;width:100%;max-width:560px;max-height:88vh;overflow:auto;
  background:var(--navy,#0e1c31);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:30px 30px 34px}
.modal-card h2{margin:10px 0 12px}
.modal-card .lead{max-width:none;margin-bottom:20px}
.modal-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--muted);
  font-size:26px;line-height:1;cursor:pointer;padding:6px}
.modal-x:hover{color:var(--white)}

/* Extra breathing room above each section's eyebrow, so "what it is" and "cycle 1" sit further
   from whatever ends the section above them. Applied to every section rather than the two named
   ones - uneven gaps between sections read as a mistake rather than as emphasis. */
section{padding-top:106px}

/* Eyebrow spacing. Sections carry the top padding, but the eyebrow still sat hard against the
   element above whenever that element was a card or a button - the label read as a caption for
   the thing above it rather than the opening of a new section. Give the label its own space so
   it works regardless of what precedes it. Modal eyebrows keep the tighter spacing, since there
   is nothing above them but the dialog edge. */
section > .eyebrow:first-child,
section .eyebrow{margin-top:18px}
.modal-card .eyebrow{margin-top:0}

/* Heading to text. The h2 carried a 20px bottom margin and the paragraph its own default top
   margin; where the two sit in separate wrappers those add instead of collapsing, which is what
   opened the gap under "Curated by practitioners". Pin the paragraph's top margin to zero so the
   spacing comes from one place only. */
h2{margin:14px 0 12px}
h2 + .lead,.lead{margin-top:0}
.modal-card h2{margin:10px 0 10px}

/* Optical alignment of the mark with the text below it. The logo SVG uses a 0 0 400 400 viewBox
   whose leftmost painted pixel sits at x=35.4 (a dot at cx=45.4 r=10), so at 40px rendered the
   visible mark starts about 3.5px inside its own box while "By invitation" starts flush at the
   container edge. Pull the brand back by that amount so the two share a left edge. */
.brand{margin-left:-3.5px}

/* Space above the footer rule. The team cards ended almost against the footer's top border, so
   the border read as the edge of the last card rather than the start of the footer. Put the gap
   on the footer itself: it then holds regardless of which section happens to come last, or what
   padding that section carries. */
footer{margin-top:72px;padding:56px 0 64px}

/* Chips are a list now, not nine anonymous spans - a set a parser can read. Strip list styling
   so it looks exactly as before. */
ul.chips{list-style:none;margin:0;padding:0}
ul.chips li{display:inline-block}

/* Long-form modals: manifest and privacy notice. Taller and wider than the form dialogs, with a
   numbered clause list that stays readable when scrolled. */
.modal-long{max-width:760px;max-height:90vh}
.modal-long .lead{margin-bottom:18px}
ol.clauses{margin:0;padding-left:22px;font-size:14.5px;line-height:1.62;color:var(--muted)}
ol.clauses li{margin-bottom:14px}
ol.clauses li b{color:var(--white)}
ol.clauses a{color:var(--accent)}