/* tokens: light = athena'sBOX field, dark = Ledger Lantern */
:root{
  --chart:#d9f227;--cream:#f2e6c4;--red:#e0201b;--black:#1a1a1a;
  --ground:#f2e6c4;--paper:#fbf5e3;--ink:#1a1a1a;--mute:#5f5947;--rule:#cdbf98;
  --edge:#1a1a1a;--drop:#1a1a1a;--field-edge:#1a1a1a;
  --mono:'JetBrains Mono',ui-monospace,monospace;--label:'DotGothic16',var(--mono);--serif:'Marcellus',serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0d0d0d;--paper:#181818;--ink:#f2e6c4;--mute:#c7b98f;--rule:#343434;
    --edge:#f2e6c4;--drop:#f2e6c4;--btn-edge:#f2e6c4;--black:#232323;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0d0d0d;--paper:#181818;--ink:#f2e6c4;--mute:#c7b98f;--rule:#343434;
  --edge:#f2e6c4;--drop:#f2e6c4;--btn-edge:#f2e6c4;--black:#232323;color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
html,body{margin:0;background:var(--ground);overflow-x:hidden}
body{color:var(--ink);font:12.5px/1.6 var(--mono)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--mono);font-weight:800;margin:0}
h1{font-size:clamp(27px,4.4vw,40px);line-height:1.04;letter-spacing:-.05em;margin:0 0 12px}
h1 em{font-style:normal;color:var(--red)}
h2{font-size:clamp(19px,2.4vw,23px);line-height:1.1;letter-spacing:-.04em;margin:0 0 5px}
h3{font-size:14px;line-height:1.2;letter-spacing:-.02em;margin:0 0 5px}
p{margin:0 0 8px}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* chartreuse band + field (stays the world in both themes) */
.band{--btn-edge:#1a1a1a;background:var(--chart);color:#1a1a1a;border-bottom:1.5px solid var(--field-edge)}
.band-in{max-width:1040px;margin:0 auto;padding:12px 16px 28px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand{font:18px/1 var(--serif);text-decoration:none;color:#1a1a1a}
.brand .r,.foot .r{color:var(--red)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme{background:none;border:1.5px solid #1a1a1a;color:#1a1a1a;font:11px/1 var(--label);letter-spacing:.06em;text-transform:uppercase;padding:7px 8px;cursor:pointer}
.theme:hover{background:#1a1a1a;color:var(--chart)}
.hero{padding-top:clamp(26px,5vw,48px)}
.hero p{margin-bottom:18px;font-size:13px}
/* landing hero: copy left, art plate right */
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.plate{background:var(--cream);border:1.5px solid #1a1a1a;box-shadow:4px 4px 0 #1a1a1a;padding:14px 10px 0;overflow:hidden}
.plate img{width:100%;height:auto}
.field{display:flex;justify-content:center;background:var(--cream);border-bottom:1.5px solid var(--field-edge);height:clamp(200px,24vw,320px);overflow:hidden}
/* scale by height so the figure never loses her head; cream fills the sides */
.field img{height:100%;width:auto;max-width:none;flex:none}
.field.slim{height:clamp(170px,17vw,230px)}

/* buttons */
.btn{display:inline-block;background:var(--red);color:var(--cream);border:1.5px solid var(--btn-edge,#1a1a1a);box-shadow:3px 3px 0 var(--btn-edge,#1a1a1a);font:800 13px/1 var(--mono);letter-spacing:-.01em;text-decoration:none;padding:11px 14px;cursor:pointer;transition:transform .08s,box-shadow .08s,background .15s}
.btn:hover{background:#1a1a1a}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--btn-edge,#1a1a1a)}
.btn.ghost{background:transparent;color:#1a1a1a}
.btn.ghost:hover{background:#1a1a1a;color:var(--chart)}
.btn.sm{font-size:12px;padding:8px 11px}
.btn.dim{opacity:.5}

/* page */
.page{max-width:1040px;margin:0 auto;padding:0 16px 48px}
.thread{width:2px;height:44px;background:var(--red);margin:0 auto}
section{margin:0 0 56px}
.sub{color:var(--mute);margin-bottom:20px}
/* a folder tab sits 24px above its folder, so give it room under a subline */
.sub+.folder{margin-top:40px}

/* story: the red thread runs down the middle and the sections hang off it */
.spine{position:relative;padding-bottom:8px;margin-bottom:56px}
.spine::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--red)}
.spine::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--red)}
.spine section{position:relative;margin:0;padding:44px 0}
.spine h2{text-align:center;margin-bottom:22px}
.spine h2 span,.bridge span{background:var(--ground);padding:6px 12px;position:relative}
.moments{list-style:none;margin:0;padding:0;--note-w:min(360px,calc(50% - 60px))}
.moments li{position:relative;width:var(--note-w);background:var(--paper);border:1.5px solid var(--edge);box-shadow:3px 3px 0 var(--drop);padding:14px 16px;font-size:14px;line-height:1.5;letter-spacing:-.01em}
.moments li:nth-child(odd){margin-left:calc(50% - 48px - var(--note-w));transform:rotate(-1.6deg)}
.moments li:nth-child(even){margin-left:calc(50% + 48px);transform:rotate(1.4deg)}
.moments li:nth-child(3){background:var(--chart);color:#1a1a1a}
.moments li+li{margin-top:-14px}
.moments li::before{content:"";position:absolute;top:26px;width:48px;height:2px;background:var(--red)}
.moments li:nth-child(odd)::before{left:100%}
.moments li:nth-child(even)::before{right:100%}
.moments li::after{content:"";position:absolute;top:22px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.moments li:nth-child(odd)::after{right:-5px}
.moments li:nth-child(even)::after{left:-5px}
.reframe{background:var(--chart);color:#1a1a1a;border-block:1.5px solid #1a1a1a;margin-inline:calc(50% - 50vw) !important;padding:56px 16px !important}
.reframe-in{max-width:1008px;margin:0 auto;text-align:center}
.reframe h2{font-size:17px;margin-bottom:8px}
.reframe .lede{margin:0 auto;font-size:14px}
.reframe .pull{font:800 clamp(30px,6vw,62px)/1.02 var(--mono);letter-spacing:-.06em;color:var(--red);margin:22px auto 26px;max-width:none}
.reframe .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;text-align:left}
.reframe .cols p{font-size:13.5px;margin:0;max-width:none}
.pairs{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.pairs li{display:grid;grid-template-columns:1fr 88px 1fr;align-items:center}
.pairs li::after{content:"";grid-column:2;grid-row:1;justify-self:center;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--red)}
.pairs .was{grid-column:1;grid-row:1;text-align:right;color:var(--mute);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px}
.pairs .now{grid-column:3;grid-row:1;font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.4}
.bridge{text-align:center;font-size:15px;margin:34px auto 0}
.bridge span{display:inline;line-height:1.9;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* the three beats run across the full folder on desktop */
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:4px 0 18px}
.folder .story p{font-size:13.5px;margin:0;opacity:1}

/* buy buttons between sections */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:26px}
.cta-price{font:800 14px var(--mono);letter-spacing:-.02em}
/* for you if */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:14px;line-height:1.45}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--red)}
.fit .not{margin-top:14px !important;padding-top:12px;border-top:1px dashed #1a1a1a55;font-size:12.5px}
.me{display:grid;grid-template-columns:190px minmax(0,1fr);gap:36px;align-items:center}
.me-art{background:var(--cream);border:1.5px solid var(--edge);box-shadow:3px 3px 0 var(--drop);padding:8px;transform:rotate(-2deg)}
.me-art img{width:100%;height:auto}
.me-copy p{font-size:13.5px;margin:0 0 10px}
.me-copy .me-lead{font:800 clamp(19px,2.4vw,24px)/1.2 var(--mono);letter-spacing:-.04em;color:var(--red);margin:4px 0 14px}
/* faq */
.faq{border-top:1px dashed var(--rule)}
.faq details{border-bottom:1px dashed var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:13px 28px 13px 0;position:relative;font-weight:800;font-size:14px;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:11px;font-size:18px;color:var(--red)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 14px;color:var(--mute)}

/* folders */
.folder{position:relative;background:var(--paper);color:var(--ink);border:1.5px solid var(--edge);border-radius:0 12px 12px 12px;box-shadow:3px 3px 0 var(--drop);padding:16px 16px 18px;margin-top:24px}
.tab{position:absolute;left:-1.5px;top:-24px;height:25px;padding:6px 12px 0;background:inherit;border:1.5px solid var(--edge);border-bottom:0;border-radius:9px 9px 0 0;font:11px/1 var(--label);letter-spacing:.08em;text-transform:uppercase;color:inherit;white-space:nowrap}
.folder p{color:inherit;opacity:.82;margin:0}
.tabbed{border-top-left-radius:12px}
.tabbed .tabs{position:absolute;left:14px;top:-24px;display:flex;gap:4px}
.tabbed .tab{position:static;cursor:pointer;background:var(--ground);color:var(--mute)}
.tabbed .tab[aria-selected="true"]{background:var(--paper);color:var(--ink);height:26px}
.tabbed .tab:hover{color:var(--red)}
.tabbed .panel[hidden]{display:none}
.pairs .eg{display:block;margin-top:5px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--mute)}
.f-red{background:var(--red);color:var(--cream)}
.f-chart{background:var(--chart);color:#1a1a1a}
.f-ink{background:var(--black);color:var(--cream)}
.f-cream{background:var(--cream);color:#1a1a1a}

.drawer{display:grid;grid-template-columns:repeat(5,1fr);align-items:start;padding-top:30px}
.drawer .folder{margin:0 0 0 -22px;padding-right:34px;min-height:200px}
.drawer .folder:first-child{margin-left:0}
.drawer .folder:nth-child(2){margin-top:22px}
.drawer .folder:nth-child(3){margin-top:6px}
.drawer .folder:nth-child(4){margin-top:30px}
.drawer .folder:nth-child(5){margin-top:12px;padding-right:16px}
.drawer .folder{transition:transform .15s}
.drawer .folder:hover{transform:translateY(-6px)}

/* sawwa's kit */
.frame{display:block;border:1.5px solid var(--edge);background:#1a1a1a;text-decoration:none}
.frame .bar{display:flex;align-items:center;gap:6px;padding:7px 10px;color:var(--cream);font-size:11.5px}
.frame .dot{width:8px;height:8px;border-radius:50%;background:var(--cream);opacity:.4}
.frame img{width:100%;height:auto}
.frame .url{margin-left:6px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-top:14px}
.live a{font:800 15px var(--mono);letter-spacing:-.02em;color:var(--red);text-underline-offset:4px}
.live span{color:var(--mute)}

/* how it works: the thread runs through the steps */
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:2px;background:var(--red)}
.steps li{position:relative;counter-increment:s;padding-top:40px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:30px;height:30px;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--edge);border-radius:50%;font:800 13px var(--mono)}
.steps b{display:block;font-size:13px;letter-spacing:-.02em;margin-bottom:3px}
.steps span{color:var(--mute)}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quotes .folder{margin:24px 0 0}
blockquote{margin:0}
blockquote p{font:400 18px/1.35 var(--serif);opacity:1 !important;margin:0 0 10px !important}

/* before we start */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 16px}
label.f{display:block;font:11px var(--label);letter-spacing:.06em;text-transform:uppercase}
label.f input{display:block;width:100%;margin-top:5px;font:400 13px var(--mono);color:var(--ink);background:var(--ground);border:1.5px solid var(--edge);border-radius:0;padding:9px 10px}
label.f input:focus{outline:2px solid var(--red);outline-offset:1px}
.checks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.checks label{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;cursor:pointer}
.checks input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--red)}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:14px;border-top:1px dashed var(--rule)}
.price{font:800 22px/1 var(--mono);letter-spacing:-.04em}
.note{margin:12px 0 0;padding:10px 12px;border:1.5px solid var(--red);background:var(--ground);max-width:none}
.note[hidden]{display:none}
.style-note{margin-top:14px}
.folder .fine{margin-top:18px}
.folder .note{margin-top:14px}
.fine{font-size:11.5px;color:var(--mute);margin-top:10px}

.foot{border-top:1.5px solid var(--edge);padding:18px 16px 26px;text-align:center;font:18px var(--serif)}

/* terms */
.terms section{margin-top:40px}
.terms-list{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}
.terms-list li{padding-left:4px}

/* intake */
/* Tally renders dark text, so the intake panel stays light in both themes */
.intake-panel{background:#fbf5e3;color:#1a1a1a;--edge:#1a1a1a}
.tally-wrap{margin-top:6px}
.tally-wrap iframe{display:block;width:100%;border:0}

@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:10px}
  .spine::before,.spine::after{left:13px}
  .spine h2,.bridge{text-align:left;padding-left:30px}
  .spine h2 span,.bridge span{padding:4px 0;background:none}
  .moments li,.moments li:nth-child(n){width:auto;margin-left:34px}
  .moments li:nth-child(odd){transform:rotate(-1deg)}
  .moments li:nth-child(even){transform:rotate(.8deg)}
  .moments li+li{margin-top:12px}
  .moments li::before,.moments li:nth-child(n)::before{left:auto;right:100%;width:21px}
  .moments li::after,.moments li:nth-child(n)::after{right:auto;left:-5px}
  .reframe .cols{grid-template-columns:1fr;gap:12px}
  .reframe-in{text-align:left}
  .spine .reframe h2{padding-left:0;text-align:left}
  .reframe .lede{margin:0}
  .pairs li{grid-template-columns:30px 1fr;align-items:start;row-gap:3px}
  .pairs li::after{grid-column:1;grid-row:1 / span 2;justify-self:start;margin:4px 0 0 7px}
  .pairs .was,.pairs .now{grid-column:2;text-align:left}
  .pairs .was{grid-row:1}
  .pairs .now{grid-row:2}
  .thread{margin-left:29px}
  .hero-split{grid-template-columns:1fr;gap:20px}
  /* art leads on phones, and shrinks on short screens so the button stays in view */
  .plate{order:-1}
  .plate img{width:auto;max-width:100%;max-height:18svh;margin:0 auto}
  .drawer{grid-template-columns:1fr;padding-top:0}
  .drawer .folder,.drawer .folder:nth-child(n){margin:-4px 0 0;padding:16px 16px 26px;min-height:0;border-radius:0 12px 12px 12px}
  .drawer .folder:first-child{margin-top:24px}
  .drawer .folder:nth-child(2) .tab{left:22%}
  .drawer .folder:nth-child(3) .tab{left:44%}
  .drawer .folder:nth-child(4) .tab{left:12%}
  .drawer .folder:nth-child(5) .tab{left:36%}
  .drawer .folder:nth-child(n+2){border-radius:12px}
  .drawer .folder:hover{transform:none}
  .steps{grid-template-columns:1fr;gap:12px}
  .steps::before{left:14px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .steps li{padding:5px 0 0 44px;min-height:30px}
}
@media (max-width:640px){
  .me{grid-template-columns:1fr;gap:22px}
  .me-art{width:130px}
  .quotes,.fields{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.drawer .folder{transition:none}
}