/* Austin AI Club — the library shell
   Docs-style two-pane layout: a sticky, independently-scrolling nav rail on
   the left, the reading column on the right. Light mode, friendly type.
   Shares the /audit design language on austinaiguy.com so the two sites
   read as one operation. */

:root{
  --ink:      #1B1B1B;
  --ink-85:   rgba(27,27,27,.85);
  --ink-70:   rgba(27,27,27,.70);
  --ink-55:   rgba(27,27,27,.55);
  --ink-45:   rgba(27,27,27,.45);
  --ink-12:   rgba(27,27,27,.12);
  --ink-08:   rgba(27,27,27,.08);
  --ink-04:   rgba(27,27,27,.04);

  --yellow:   #FAC302;   /* primary accent — CTAs, highlights */
  --yellow-d: #E3AF00;
  --yellow-l: #FFF7DA;
  --blue:     #2D7FF0;   /* links, interactive, "intermediate" */
  --blue-d:   #1C63C8;
  --blue-l:   #EAF2FE;
  --green:    #2FA84F;   /* free, done, "start here" */
  --green-d:  #23853E;
  --green-l:  #EAF7EE;

  --paper:    #F7F7F4;
  --white:    #FFFFFF;

  --slab: "Anton", Impact, sans-serif;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --bar:  62px;    /* sticky header height */
  --side: 286px;   /* nav rail width */
  --gut:  28px;
  --read: 760px;   /* reading measure */
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 18px); }
body{
  background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-underline-offset:2px; }
a:hover{ color:var(--blue-d); }

h1,h2,h3,h4{ margin:0; line-height:1.18; letter-spacing:-.02em; font-weight:800; }
h1{ font-size:clamp(29px,4vw,44px); line-height:1.1; }
h2{ font-size:clamp(23px,2.7vw,31px); }
h3{ font-size:clamp(18px,1.9vw,21px); letter-spacing:-.01em; }
p{ margin:0 0 16px; }
strong,b{ font-weight:800; }

.lede{ font-size:clamp(17px,1.8vw,20px); color:var(--ink-70); line-height:1.6; }
.small{ font-size:14px; color:var(--ink-55); line-height:1.6; }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:800; font-size:16px; line-height:1;
  background:var(--yellow); color:var(--ink); border:2px solid var(--ink);
  border-radius:999px; padding:14px 26px; text-decoration:none; cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}
.btn:hover{ background:var(--yellow-d); color:var(--ink); transform:translateY(-1px); }
.btn--sm{ font-size:14.5px; padding:10px 18px; }
.btn--ghost{ background:var(--white); }
.btn--ghost:hover{ background:var(--yellow-l); }
.btn--wide{ width:100%; }

/* ── sticky header ─────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:60; height:var(--bar);
  background:rgba(255,255,255,.95); backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--ink-08);
}
.top__in{ height:100%; padding:0 var(--gut); display:flex; align-items:center; gap:14px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.brand img{ width:30px; height:30px; border-radius:7px; }
.brand b{ font-family:var(--slab); font-weight:400; font-size:20px; text-transform:uppercase; letter-spacing:.01em; line-height:1; }
.brand b i{ font-style:normal; color:var(--yellow-d); }
.top__spacer{ flex:1 1 auto; }
.top__link{ font-weight:700; font-size:15px; color:var(--ink-70); text-decoration:none; }
.top__link:hover{ color:var(--ink); }
.menu-btn{
  display:none; align-items:center; gap:8px; font:inherit; font-weight:800; font-size:14.5px;
  background:var(--white); color:var(--ink); border:2px solid var(--ink);
  border-radius:999px; padding:8px 15px; cursor:pointer;
}

/* ── shell: rail + reading column ──────────────────────── */
.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); align-items:start; }

.side{
  position:sticky; top:var(--bar);
  height:calc(100svh - var(--bar));
  overflow-y:auto; overscroll-behavior:contain;
  border-right:1px solid var(--ink-08); background:var(--paper);
  padding:18px 0 44px;
  scrollbar-width:thin;
}
.side::-webkit-scrollbar{ width:9px; }
.side::-webkit-scrollbar-thumb{ background:var(--ink-12); border-radius:9px; border:3px solid var(--paper); }
.side::-webkit-scrollbar-thumb:hover{ background:var(--ink-45); }

.side__search{ padding:0 16px 14px; }
.side__search input{
  width:100%; font:inherit; font-size:15px; padding:10px 13px;
  border:2px solid var(--ink-12); border-radius:10px; background:var(--white); color:var(--ink);
}
.side__search input::placeholder{ color:var(--ink-45); }
.side__search input:focus{ border-color:var(--blue); outline:none; }

.side__group{ margin:0 0 4px; }
.side__label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-45); padding:14px 18px 6px; margin:0;
}
.side__label::after{ content:""; flex:1 1 auto; height:1px; background:var(--ink-08); }

.side__link{
  display:flex; align-items:baseline; gap:9px;
  padding:7px 18px 7px 16px; margin:0 8px; border-radius:8px;
  color:var(--ink-85); text-decoration:none; font-size:14.5px; line-height:1.4;
  border-left:3px solid transparent;
}
.side__link:hover{ background:var(--white); color:var(--ink); }
.side__link.is-active{ background:var(--white); color:var(--ink); font-weight:800; border-left-color:var(--yellow); }
.side__num{ font-family:var(--mono); font-size:10.5px; color:var(--ink-45); flex:0 0 auto; }
.side__link.is-active .side__num{ color:var(--ink-70); }
.side__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; align-self:center; }
.side__dot--beg{ background:var(--green); }
.side__dot--int{ background:var(--blue); }
.side__dot--adv{ background:var(--yellow-d); }

.side__note{ padding:10px 18px; font-size:12.5px; color:var(--ink-45); line-height:1.55; }
.side__empty{ display:none; padding:14px 18px; font-size:14px; color:var(--ink-55); }
.side.is-filtered .side__empty--on{ display:block; }

/* the rail's own CTA — quiet, always reachable */
.side__cta{ margin:20px 14px 0; padding:15px 16px; background:var(--yellow-l); border:2px solid var(--ink); border-radius:12px; }
.side__cta p{ margin:0 0 11px; font-size:13.5px; line-height:1.5; color:var(--ink-85); }
.side__cta b{ display:block; font-size:15px; margin-bottom:5px; }

/* ── reading column ────────────────────────────────────── */
.main{ padding:34px var(--gut) 90px; min-width:0; }
.main__in{ max-width:var(--read); margin:0 auto; }
.main--wide .main__in{ max-width:1000px; }

.hero{ padding:8px 0 30px; border-bottom:1px solid var(--ink-08); margin-bottom:32px; }
.hero h1{ margin-bottom:14px; }
.hero .lede{ max-width:60ch; }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); display:block; margin-bottom:12px; }

.sec{ padding:30px 0; border-top:1px solid var(--ink-08); }
.hero + .sec{ border-top:none; padding-top:6px; }
.sec__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.sec__head p{ margin:0; }
.sec > p:first-of-type{ margin-top:8px; }

/* ── guide cards ───────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:20px; }
.card{
  display:flex; flex-direction:column; gap:8px;
  padding:17px 18px; background:var(--white);
  border:2px solid var(--ink-12); border-radius:14px;
  text-decoration:none; color:var(--ink);
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.card:hover{ border-color:var(--ink); transform:translateY(-2px); box-shadow:0 10px 26px rgba(27,27,27,.08); color:var(--ink); }
.card__top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.card__num{ font-family:var(--mono); font-size:10.5px; color:var(--ink-45); }
.card__title{ font-size:17.5px; font-weight:800; line-height:1.3; letter-spacing:-.01em; }
.card__kick{ font-size:14.5px; color:var(--ink-70); line-height:1.5; margin:0; }
.card__foot{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px; font-size:12.5px; color:var(--ink-45); }
.card__arr{ margin-left:auto; font-weight:800; color:var(--ink-45); }
.card:hover .card__arr{ color:var(--ink); }

/* difficulty + kind badges — the colour actually means something */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.badge--beg{ background:var(--green-l); color:var(--green-d); }
.badge--int{ background:var(--blue-l);  color:var(--blue-d); }
.badge--adv{ background:var(--yellow-l);color:#8A6B00; }
.badge--free{ background:var(--green-l); color:var(--green-d); }
.badge--pdf{ background:var(--ink-04); color:var(--ink-70); }

/* filter pills */
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
.pill{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:var(--white); color:var(--ink-70);
  border:2px solid var(--ink-12); border-radius:999px; padding:7px 15px;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.pill:hover{ border-color:var(--ink-45); color:var(--ink); }
.pill.is-on{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* ── "start here" numbered path ────────────────────────── */
.path{ list-style:none; margin:20px 0 0; padding:0; counter-reset:step; }
.path li{ position:relative; padding:0 0 0 46px; margin:0 0 14px; counter-increment:step; }
.path li::before{
  content:counter(step); position:absolute; left:0; top:1px;
  width:30px; height:30px; border-radius:50%;
  background:var(--green); color:#fff; font-family:var(--mono); font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.path a{ font-weight:800; color:var(--ink); text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:3px; text-underline-offset:3px; }
.path a:hover{ background:var(--yellow-l); }
.path p{ margin:2px 0 0; font-size:14.5px; color:var(--ink-70); }

/* ── callouts ──────────────────────────────────────────── */
.note{ padding:16px 18px; border-radius:12px; border-left:4px solid var(--blue); background:var(--blue-l); margin:20px 0; }
.note--green{ border-left-color:var(--green); background:var(--green-l); }
.note--yellow{ border-left-color:var(--yellow-d); background:var(--yellow-l); }
.note p:last-child{ margin-bottom:0; }
.note b{ display:block; margin-bottom:4px; }

/* ── the audit CTA — the one commercial ask ────────────── */
.cta{
  margin:34px 0 0; padding:24px 26px;
  background:var(--ink); color:var(--white); border-radius:16px;
}
.cta h3{ color:var(--white); margin-bottom:8px; }
.cta p{ color:rgba(255,255,255,.72); margin:0 0 18px; max-width:52ch; font-size:15.5px; }
.cta .btn{ border-color:var(--yellow); }
.cta--soft{ background:var(--yellow-l); color:var(--ink); border:2px solid var(--ink); }
.cta--soft h3{ color:var(--ink); }
.cta--soft p{ color:var(--ink-70); }

/* ── membership / newsletter blocks ────────────────────── */
.join{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:20px; }
.tile{ padding:20px; border:2px solid var(--ink-12); border-radius:14px; background:var(--white); }
.tile--pop{ border-color:var(--ink); background:var(--yellow-l); }
.tile h3{ margin-bottom:6px; }
.tile ul{ margin:12px 0 16px; padding:0 0 0 20px; font-size:15px; color:var(--ink-70); }
.tile li{ margin-bottom:6px; }
.price{ font-family:var(--slab); font-weight:400; font-size:40px; line-height:1; letter-spacing:.01em; }
.price span{ font-family:var(--sans); font-size:15px; font-weight:700; color:var(--ink-55); letter-spacing:0; }

.news{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.news input{ flex:1 1 220px; font:inherit; font-size:16px; padding:13px 15px; border:2px solid var(--ink); border-radius:999px; background:var(--white); color:var(--ink); }
.news input::placeholder{ color:var(--ink-45); }

/* ── FAQ ───────────────────────────────────────────────── */
details.faq{ border-bottom:1px solid var(--ink-08); padding:14px 0; }
details.faq summary{ cursor:pointer; font-weight:800; font-size:16.5px; list-style:none; display:flex; gap:12px; align-items:baseline; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; margin-left:auto; font-family:var(--mono); color:var(--ink-45); }
details.faq[open] summary::after{ content:"–"; }
details.faq p{ margin:10px 0 0; color:var(--ink-70); font-size:15.5px; }

/* ── footer ────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--ink-08); margin-top:44px; padding:26px 0 0; font-size:14px; color:var(--ink-55); }
.foot a{ color:var(--ink-70); }
.foot p{ margin:0 0 7px; }

/* ── mobile: the rail becomes a sheet ──────────────────── */
.side__scrim{ display:none; }

@media (max-width:900px){
  :root{ --gut:18px; }
  .shell{ grid-template-columns:1fr; }
  .menu-btn{ display:inline-flex; }
  .top__link--hide{ display:none; }

  .side{
    position:fixed; top:0; left:0; z-index:80;
    width:min(86vw,330px); height:100svh; max-height:100svh;
    border-right:2px solid var(--ink); padding-top:14px;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.18);
  }
  .side.is-open{ transform:none; }
  .side__scrim{ display:block; position:fixed; inset:0; z-index:70; background:rgba(27,27,27,.42); opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .side__scrim.is-on{ opacity:1; pointer-events:auto; }
  .side__close{ display:block; margin:0 14px 8px auto; font:inherit; font-size:20px; line-height:1; background:none; border:0; color:var(--ink-55); cursor:pointer; padding:6px 8px; }

  .main{ padding-top:26px; }
  .cards{ grid-template-columns:1fr; }
}
@media (min-width:901px){ .side__close{ display:none; } }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* ── join modal ────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(27,27,27,.55); }
.modal__panel{
  position:relative; width:100%; max-width:430px; background:var(--white);
  border:2px solid var(--ink); border-radius:18px; padding:26px 24px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
}
.modal__close{ position:absolute; top:12px; right:14px; font:inherit; font-size:18px; line-height:1; background:none; border:0; color:var(--ink-45); cursor:pointer; padding:6px; }
.modal__close:hover{ color:var(--ink); }
.modal__title{ font-size:27px; margin-bottom:6px; }
.modal__sub{ color:var(--ink-70); font-size:15.5px; margin-bottom:18px; }
.modal__choice{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--yellow); color:var(--ink); border:2px solid var(--ink);
  border-radius:999px; padding:15px 22px; font-weight:800; font-size:16.5px;
}
.modal__choice:hover{ background:var(--yellow-d); color:var(--ink); }
.modal__choice .arrow{ margin-left:auto; }
.modal__foot{
  margin:14px 0 0; text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45);
}

/* ── stacks ────────────────────────────────────────────────
   Ported from the old single-page club. The markup is unchanged;
   only the palette and shapes move to the new system. */
.stacks{ display:flex; flex-direction:column; gap:20px; margin-top:22px; }

.stack{
  border:2px solid var(--ink-12); border-radius:16px;
  padding:22px 24px; background:var(--white);
  transition:border-color .14s ease;
}
.stack:hover{ border-color:var(--ink-45); }

.stack__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.stack__topic{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-d); background:var(--blue-l); padding:3px 9px; border-radius:999px; }
.stack__date{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); }

.stack__title{ font-size:clamp(21px,2.4vw,27px); font-weight:800; letter-spacing:-.02em; margin:0 0 6px; }
.stack__title em{ font-style:normal; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:4px; text-underline-offset:3px; }
.stack__verdict{ color:var(--ink-70); font-size:16px; margin:0 0 16px; }

/* the ranked list — the whole point of the page */
.stack__list{ list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--ink-08); }
.stack__list li{ display:flex; align-items:baseline; gap:12px; padding:10px 2px; border-bottom:1px solid var(--ink-08); }
.stack__rank{ font-family:var(--mono); font-size:12px; color:var(--ink-45); flex:0 0 auto; width:22px; }
.stack__list li.top .stack__rank{ color:var(--ink); font-weight:500; }
.stack__name{ font-weight:800; font-size:16px; flex:1 1 auto; min-width:0; }
/* .note is also a page-level callout in this stylesheet — reset it here so the
   inline tool descriptions don't render as blue bubbles */
.stack__name .note{
  display:inline; font-weight:400; color:var(--ink-55);
  background:none; border:0; border-radius:0; padding:0; margin:0;
}
.stack__use{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); flex:0 0 auto; }

.stack__section{ margin-bottom:18px; }
.stack__section:last-child{ margin-bottom:0; }
.stack__section-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-45); margin:0 0 8px;
}
.stack__more ul{ list-style:none; margin:0; padding:0; font-size:15px; line-height:1.6; }
.stack__more li{ margin-bottom:7px; color:var(--ink-85); }

.stack__why li{ display:flex; gap:10px; }
.stack__why b{ font-family:var(--mono); font-size:11px; color:var(--ink-45); flex:0 0 auto; padding-top:3px; }

.stack__switch li,
.stack__dropped li{ padding-left:14px; position:relative; }
.stack__switch li::before,
.stack__dropped li::before{ content:"·"; position:absolute; left:2px; color:var(--ink-45); }
.stack__switch em,
.stack__dropped em{ font-style:normal; font-weight:800; }
.stack__switch em{ color:var(--green-d); }
.stack__dropped em{ color:var(--ink); }
.stack__dropped li{ color:var(--ink-55); }

/* members-only stacks: show the ranking, gate the reasoning */
.stack--locked .stack__more{
  position:relative; max-height:112px; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
}
.stack__unlock{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:14px 16px;
  background:var(--yellow-l); border:2px solid var(--ink); border-radius:12px;
}
.stack__unlock p{ margin:0; font-size:14.5px; flex:1 1 200px; }
.stack__foot{ margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); }

@media (max-width:900px){
  .stack{ padding:18px 16px; }
  .stack__list li{ flex-wrap:wrap; gap:8px; }
  .stack__use{ width:100%; }
}

/* ── beginner guides ───────────────────────────────────────
   Deliberately simpler than the g0xx guides: no tab strip, one column,
   more air. A beginner shouldn't land on four tabs and a decision table. */
.lvl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 6px; font-size:14px; color:var(--ink-55); }
.lvl .sep{ color:var(--ink-12); }

/* a prompt you're meant to copy */
.prompt{
  position:relative; margin:18px 0; padding:18px 20px;
  background:var(--ink); color:#F2F2EE; border-radius:12px;
  font-family:var(--mono); font-size:13.5px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word;
}
.prompt::before{
  content:"Copy this"; position:absolute; top:-9px; left:16px;
  background:var(--yellow); color:var(--ink);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 9px; border-radius:999px;
}
.prompt em{ color:var(--yellow); font-style:normal; }

/* the "do this before you close the tab" box */
.do{ margin:26px 0; padding:20px 22px; border:2px solid var(--ink); border-radius:14px; background:var(--yellow-l); }
.do h3{ margin:0 0 10px; }
.do ol{ margin:0; padding-left:20px; }
.do li{ margin-bottom:7px; }

/* plain comparison rows — lighter than a table */
.rows{ margin:18px 0; border-top:1px solid var(--ink-12); }
.rows div{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:16px; padding:12px 2px; border-bottom:1px solid var(--ink-12); align-items:baseline; }
.rows b{ font-weight:800; }
.rows span{ color:var(--ink-70); }
@media (max-width:640px){ .rows div{ grid-template-columns:1fr; gap:4px; } }