/* Club 100 marketing site. Tokens first, then layout. One family, one accent. */
:root{
  --baize:#123D2E;      /* deep bottle green: ink for headings, wordmark, rules */
  --ledger:#EEF1EC;     /* page background, cool pale sage */
  --paper:#FFFFFF;      /* free numbers, tables */
  --moss:#CFE0D3;       /* taken numbers, soft highlight */
  --ticket:#E3B23C;     /* winning number, the one accent */
  --ink:#1F2A24;        /* body text */
  --muted:#55645B;      /* secondary text */
  --rule:#B9C4BB;       /* hairlines */
  --measure:66ch;
  --gutter:clamp(16px, 4vw, 40px);
  --font:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{font-size:112.5%; -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--ledger); line-height:1.55}
img,svg{max-width:100%; height:auto}
a{color:var(--baize); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ticket); outline-offset:3px}
.skip{position:absolute; left:-999px; top:8px; background:var(--baize); color:#fff; padding:8px 12px; z-index:10}
.skip:focus{left:8px}

h1,h2,h3{font-weight:700; line-height:1.15; color:var(--baize); margin:0 0 .5em; letter-spacing:-0.01em}
h1{font-size:clamp(2rem, 5vw, 3.2rem); max-width:18ch}
h2{font-size:clamp(1.5rem, 3vw, 2rem); margin-top:0}
h3{font-size:1.2rem; margin-top:1.5em}
p,li{max-width:var(--measure)}
p{margin:0 0 1em}
.lead{font-size:1.2rem; color:var(--ink)}
.muted{color:var(--muted)}
ul,ol{padding-left:1.3em}
li{margin:0 0 .45em}
strong{font-weight:700}
hr{border:0; border-top:2px solid var(--baize); margin:0}

/* header */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px var(--gutter); border-bottom:2px solid var(--baize)}
.wordmark{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.25rem; text-decoration:none; color:var(--baize)}
.wordmark .mark{display:inline-grid; place-items:center; width:40px; height:40px; background:var(--baize); color:var(--ticket); font-size:.8rem; border-radius:4px; font-variant-numeric:tabular-nums}
.top nav{display:flex; gap:4px 18px; flex-wrap:wrap; align-items:center; font-size:.95rem}
.top nav a{text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
.top nav a:hover,.top nav a[aria-current]{border-bottom-color:var(--baize)}
.top nav a.cta{background:var(--baize); color:#fff; padding:8px 14px; border-radius:4px; border:0}
.top nav a.cta:hover{background:#0c2b20}

/* sections */
section{padding:clamp(40px, 7vw, 88px) var(--gutter)}
section + section{border-top:1px solid var(--rule)}
.inner{max-width:1080px; margin:0 auto}
.two{display:grid; grid-template-columns:1fr; gap:32px}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr; gap:56px}}

/* hero */
.hero{padding-top:clamp(32px, 6vw, 72px)}
.hero .inner{display:grid; grid-template-columns:1fr; gap:40px; align-items:center}
@media(min-width:900px){.hero .inner{grid-template-columns:1.1fr 1fr; gap:64px}}
.hero .lead{margin-top:1em}
.actions{display:flex; gap:12px 20px; flex-wrap:wrap; align-items:center; margin-top:1.4em}
.btn{display:inline-block; background:var(--baize); color:#fff; text-decoration:none; padding:13px 22px; border-radius:4px; font-weight:700}
.btn:hover{background:#0c2b20}
.btn.quiet{background:transparent; color:var(--baize); border:2px solid var(--baize); padding:11px 20px}
.btn.quiet:hover{background:var(--moss)}
.proof{margin-top:1.6em; font-size:.95rem; color:var(--muted); max-width:44ch}

/* the board */
.board-wrap{max-width:460px; margin:0 auto; width:100%}
.board{display:grid; grid-template-columns:repeat(10,1fr); gap:6px; list-style:none; padding:0; margin:0; font-variant-numeric:tabular-nums}
.board li{aspect-ratio:1; display:grid; place-items:center; background:var(--paper); border:1px solid var(--rule); border-radius:4px; font-weight:700; font-size:clamp(.7rem, 2.2vw, 1rem); color:var(--muted)}
.board li.taken{background:var(--moss); border-color:var(--moss); color:var(--baize)}
.board li.live{outline:3px solid var(--ticket); outline-offset:-1px}
.board li.winner{background:var(--ticket); border-color:var(--ticket); color:var(--baize); transform:scale(1.12); box-shadow:0 0 0 4px var(--ledger), 0 0 0 6px var(--ticket)}
@media(prefers-reduced-motion:no-preference){.board li{transition:background-color .15s, transform .25s}}
.board-caption{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; font-size:.95rem}
.board-caption strong{color:var(--baize)}
.board-caption .free{color:var(--muted)}
.key{display:flex; gap:16px; margin-top:8px; font-size:.85rem; color:var(--muted)}
.key span::before{content:""; display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid var(--rule); background:var(--paper)}
.key .k-taken::before{background:var(--moss); border-color:var(--moss)}
.key .k-win::before{background:var(--ticket); border-color:var(--ticket)}

/* ledger tables: the treasurer's own device */
table{border-collapse:collapse; width:100%; max-width:640px; margin:1em 0 1.5em; background:var(--paper); font-variant-numeric:tabular-nums}
caption{text-align:left; font-weight:700; color:var(--baize); padding:0 0 8px}
th,td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-weight:700; color:var(--baize)}
thead th{border-bottom:2px solid var(--baize)}
td.num,th.num{text-align:right; white-space:nowrap}
tfoot td{font-weight:700; color:var(--baize); border-top:2px solid var(--baize); border-bottom:0}
table.plain{background:transparent}
.big{font-size:clamp(2.4rem, 6vw, 3.6rem); font-weight:700; color:var(--baize); line-height:1; margin:.2em 0 .15em; font-variant-numeric:tabular-nums}

/* pricing */
.price{display:grid; grid-template-columns:1fr; gap:24px 48px; align-items:start}
@media(min-width:760px){.price{grid-template-columns:auto 1fr}}
.price .amount{font-size:clamp(2.6rem, 7vw, 4rem); font-weight:700; color:var(--baize); line-height:1; font-variant-numeric:tabular-nums}
.price .amount small{font-size:1.1rem; font-weight:400; color:var(--muted)}
.price .terms{color:var(--muted); font-size:.95rem; margin-top:8px; max-width:28ch}
.included{list-style:none; padding:0; margin:0}
.included li{padding-left:1.4em; position:relative}
.included li::before{content:"✓"; position:absolute; left:0; color:var(--baize); font-weight:700}

/* faq */
.faq details{border-top:1px solid var(--rule); padding:14px 0}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{font-weight:700; color:var(--baize); cursor:pointer; font-size:1.1rem; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:400; color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.6em}

/* person */
.person{display:grid; grid-template-columns:1fr; gap:24px; align-items:start}
@media(min-width:700px){.person{grid-template-columns:120px 1fr}}
.person .sig{font-weight:700; color:var(--baize)}
.who{width:120px; height:120px; border-radius:50%; background:var(--baize); color:var(--ticket); display:grid; place-items:center; font-size:2rem; font-weight:700}

/* contact */
.contact{background:var(--baize); color:#fff}
.contact h2,.contact a{color:#fff}
.contact .btn{background:var(--ticket); color:var(--baize)}
.contact .btn:hover{background:#f0c65a}
.contact p{color:#dfe8e2}
.contact .lead{color:#fff}

/* article pages */
.article{padding-top:clamp(32px, 5vw, 56px)}
.article .inner{max-width:760px; margin:0 auto}
.article h1{max-width:22ch}
.article .lead{margin-bottom:2em}
.article h2{margin-top:2.2em}
.note{border-left:4px solid var(--ticket); padding:12px 18px; background:var(--paper); margin:1.5em 0; max-width:var(--measure)}
.note p:last-child{margin-bottom:0}
.crumbs{font-size:.9rem; color:var(--muted); margin-bottom:1.5em}
.crumbs a{color:var(--muted)}
.next{margin-top:3em; padding-top:1.5em; border-top:2px solid var(--baize)}

/* footer */
.foot{border-top:2px solid var(--baize); padding:32px var(--gutter) 40px; font-size:.9rem; color:var(--muted)}
.foot-inner{max-width:1080px; margin:0 auto}
.foot p{max-width:none}
.foot-links a{margin-right:18px; white-space:nowrap; line-height:2}
.foot-small{margin:0}