/* Blog (/blog/) — layered on legal.css (topbar, footer, theme toggle, constellation).
   Idea: an article is a page in a notebook. It sits on one white sheet, and its blue margin line
   fills with ink as you read, so you always know how far you've come and how little is left.
   Bricolage for display (as on the home page), Inter for reading, Awaken Blue + Awaken White only. */
:root{
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --read:"Inter",system-ui,sans-serif;
  --sheet:#fff;
  --margin:64px;               /* the notebook margin the ink runs down */
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* undo legal.css "reading cards": the whole article is one sheet instead */
.blog p,.blog ul,.blog ol,.blog table{background:none;box-shadow:none;border-radius:0;padding:0;margin:0;}
.blog a{border-bottom:none;}
html[data-theme="dark"] .blog p,html[data-theme="dark"] .blog ul,html[data-theme="dark"] .blog ol{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
html[data-theme="dark"] .blog p::before,html[data-theme="dark"] .blog ul::before,html[data-theme="dark"] .blog ol::before{display:none;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.b-read .stars{opacity:.35;}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("../assets/fonts/bricolage.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/inter.woff2") format("woff2");}

.blog{max-width:1120px;margin:0 auto;padding:0 26px 40px;font-family:var(--read);}
.blog h1{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--ink);text-wrap:balance;margin:0;}
.blog a:focus-visible,.blog button:focus-visible,.blog summary:focus-visible,.blog input:focus-visible,.blog textarea:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px;}

/* ---------- index ---------- */
.b-hero{padding:80px 0 44px;max-width:720px;}
.b-hero h1{font-size:clamp(2.8rem,7vw,4.6rem);}
.b-hero h1 span{display:block;font-weight:300;color:var(--brand);}
.b-lede{font-size:1.18rem;line-height:1.6;color:var(--muted);margin-top:22px !important;max-width:34em;}
.b-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
.b-card{display:flex;flex-direction:column;background:var(--sheet);border-radius:24px;overflow:hidden;color:var(--ink);
  box-shadow:0 2px 30px rgba(72,80,178,.08);transition:transform .35s var(--ease-out),box-shadow .35s;}
.b-card:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(72,80,178,.16);}
.b-card-art{background:var(--tint);padding:22px 28px 10px;}
.b-card-art svg{display:block;width:100%;height:auto;max-height:220px;}
.b-card-text{display:flex;flex-direction:column;gap:8px;padding:22px 26px 26px;}
.b-card strong{font-family:var(--display);font-size:1.45rem;line-height:1.15;letter-spacing:-.02em;}
.b-desc{color:var(--muted);line-height:1.55;}
.b-meta{font-size:.92rem;color:var(--muted);}
.b-feature{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1fr;}
.b-feature .b-card-art{display:flex;align-items:center;padding:28px;}
.b-feature .b-card-art svg{max-height:300px;}
.b-feature .b-card-text{justify-content:center;padding:40px;}
.b-feature strong{font-size:clamp(1.7rem,3vw,2.3rem);}

/* ---------- article head ---------- */
.b-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:20;pointer-events:none;}
.b-progress i{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--p,0));}
.b-head{max-width:760px;margin:0 auto;padding:64px 0 10px;text-align:center;}
.b-topic{display:inline-block;font-weight:600;color:var(--brand);padding:6px 14px;border-radius:999px;background:var(--tint);font-size:.92rem;}
.b-head h1{font-size:clamp(2.3rem,5.4vw,3.7rem);margin-top:20px;}
.b-head .b-meta{margin-top:16px !important;}
.b-hero-art{margin:30px auto 0;max-width:560px;}
.b-hero-art svg{display:block;width:100%;height:auto;}

/* ---------- the sheet ---------- */
.b-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:44px;align-items:start;margin-top:34px;}
.sheet{position:relative;background:var(--sheet);border-radius:28px;box-shadow:0 2px 40px rgba(72,80,178,.09);
  padding:56px 56px 48px calc(var(--margin) + 40px);font-size:1.125rem;line-height:1.75;color:var(--ink);min-width:0;}
.sheet::before{content:"";position:absolute;left:var(--margin);top:28px;bottom:28px;width:2px;border-radius:2px;background:rgba(72,80,178,.14);}
.ink{position:absolute;left:var(--margin);top:28px;width:2px;height:calc(var(--ink,0) * (100% - 56px));border-radius:2px;background:var(--brand);}
.ink::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px rgba(72,80,178,.16);}
.sheet > *{max-width:40rem;}
.sheet p{margin:0 0 1.15em !important;color:#36343f;}
.sheet p strong,.sheet li strong{color:var(--ink);}
.sheet a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(72,80,178,.4);}
.sheet a:hover{text-decoration-color:var(--brand);}
.sheet ul,.sheet ol{margin:0 0 1.3em !important;padding-left:1.3em !important;color:#36343f;}
.sheet li{margin:.45em 0;padding-left:.2em;}
.sheet ol li::marker{color:var(--brand);font-weight:700;}
.sheet ul li::marker{color:var(--brand);}
.sheet h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,1.95rem);letter-spacing:-.02em;line-height:1.15;color:var(--ink);
  margin:2.2em 0 .7em;scroll-margin-top:100px;position:relative;}
.sheet h3{font-size:1.1rem;color:var(--ink);margin:1.6em 0 .4em;}
/* steps: the number sits in the margin, on the ink line, and fills when the ink reaches it */
.step-n{position:absolute;left:calc(-40px - 17px);top:.05em;width:34px;height:34px;margin-left:1px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font:700 1rem/1 var(--display);color:var(--brand);
  background:var(--sheet);box-shadow:inset 0 0 0 2px var(--brand);transition:background .4s,color .4s;}
.step.inked .step-n{background:var(--brand);color:#fff;}
.short{font-size:1.22rem;line-height:1.65;color:var(--ink) !important;padding:22px 26px !important;margin-bottom:1.6em !important;
  background:var(--tint) !important;border-radius:18px !important;}

/* quick answers */
.sheet details.qa{background:none;box-shadow:none;border-radius:0;padding:0;margin:0;border-top:1px solid var(--line);}
.sheet details.qa:last-of-type{border-bottom:1px solid var(--line);}
.sheet details.qa summary{font-size:1.05rem;color:var(--ink);padding:16px 0;}
.sheet details.qa p{margin:0 0 16px !important;padding-left:16px !important;}

/* make-your-plan + first-line boxes */
.plan,.tryit{margin:1.6em 0 1.8em;padding:24px 26px;border-radius:20px;background:var(--bg);box-shadow:inset 0 0 0 1.5px rgba(72,80,178,.18);}
.plan-q,.tryit-h{font-weight:700;color:var(--ink) !important;margin:0 0 12px !important;}
.tryit-h{font-family:var(--display);font-size:1.35rem;letter-spacing:-.01em;}
.plan-chips{display:flex;flex-wrap:wrap;gap:8px;}
.plan-chips button{font:inherit;font-size:.95rem;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(72,80,178,.3);background:var(--sheet);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.plan-chips button:hover{border-color:var(--brand);}
.plan-chips button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff;}
.plan-own{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.95rem;color:var(--muted);flex-wrap:wrap;}
.plan-own input,.tryit textarea{font:inherit;color:var(--ink);background:var(--sheet);border:1.5px solid rgba(72,80,178,.3);border-radius:12px;padding:8px 12px;}
.plan-own input{flex:1;min-width:160px;}
.plan-out{font-family:var(--display);font-size:1.3rem;line-height:1.35;color:var(--brand) !important;margin:18px 0 14px !important;}
.plan-out b{border-bottom:2px solid currentColor;}
.plan-copy{font:inherit;font-weight:600;font-size:.95rem;padding:10px 20px;border-radius:999px;border:none;background:var(--brand);color:#fff;cursor:pointer;}
.plan-copy:disabled{opacity:.4;cursor:default;}
.tryit-sub{font-size:.95rem;color:var(--muted) !important;margin:0 0 12px !important;}
.tryit textarea{width:100%;resize:vertical;line-height:1.5;min-height:3.2em;}
.tryit-done{color:var(--brand) !important;font-weight:600;margin:10px 0 0 !important;min-height:1.5em;}

/* outline: what's left, ticked off as you pass */
.b-toc{position:sticky;top:100px;font-size:.92rem;}
.b-toc-h{display:flex;justify-content:space-between;gap:8px;font-weight:700;color:var(--ink) !important;margin-bottom:12px !important;}
.b-left{font-weight:500;color:var(--muted);white-space:nowrap;}
.b-toc ol{display:grid;gap:2px;}
.b-toc li{list-style:none;}
.b-toc a{display:flex;gap:8px;padding:6px 10px;border-radius:10px;color:var(--muted);line-height:1.35;transition:color .2s,background .2s;}
.b-toc a b{flex:none;width:1.4em;color:var(--brand);}
.b-toc a:hover{color:var(--ink);}
.b-toc a.done{color:var(--faint);}
.b-toc a.here{background:var(--tint);color:var(--ink);}

/* end of article */
.b-end{max-width:760px;margin:56px auto 0;display:grid;gap:22px;}
.b-back{justify-self:center;font-weight:600;color:var(--brand);padding:10px 20px;border-radius:999px;background:var(--tint);}

/* ---------- dark ---------- */
html[data-theme="dark"]{--sheet:rgba(10,11,20,.78);}
html[data-theme="dark"] .blog h1,html[data-theme="dark"] .sheet h2{color:#fff;}
html[data-theme="dark"] .b-hero h1 span{color:var(--accent);}
html[data-theme="dark"] .sheet,html[data-theme="dark"] .b-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(160,170,255,.28);}
html[data-theme="dark"] .sheet p,html[data-theme="dark"] .sheet ul,html[data-theme="dark"] .sheet ol{color:var(--muted);}
html[data-theme="dark"] .sheet a,html[data-theme="dark"] .b-topic,html[data-theme="dark"] .b-back,html[data-theme="dark"] .plan-out{color:var(--accent) !important;}
html[data-theme="dark"] .b-topic,html[data-theme="dark"] .b-back,html[data-theme="dark"] .short,html[data-theme="dark"] .b-card-art,html[data-theme="dark"] .b-toc a.here{background:rgba(120,130,255,.14) !important;}
html[data-theme="dark"] .plan,html[data-theme="dark"] .tryit{background:rgba(0,0,0,.35);}
html[data-theme="dark"] .ink,html[data-theme="dark"] .ink::after,html[data-theme="dark"] .b-progress i{background:var(--accent);}
html[data-theme="dark"] .step-n{color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);background:#0b0c16;}
html[data-theme="dark"] .step.inked .step-n{background:var(--accent);color:#0b0c16;}
html[data-theme="dark"] .b-card strong,html[data-theme="dark"] .b-card{color:#fff;}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .b-layout{grid-template-columns:minmax(0,1fr);}
  .b-toc{display:none;}
  .sheet{max-width:820px;margin:0 auto;}
}
@media (max-width:760px){
  .b-list,.b-feature{grid-template-columns:1fr;}
  .b-feature .b-card-text{padding:24px 26px 28px;}
}
@media (max-width:560px){
  :root{--margin:22px;}
  .blog{padding:0 12px 30px;}
  .b-hero{padding:52px 4px 30px;}
  .b-head{padding:44px 6px 0;}
  .sheet{padding:32px 18px 28px calc(var(--margin) + 22px);border-radius:22px;font-size:1.06rem;}
  .step-n{left:calc(-22px - 13px);width:26px;height:26px;font-size:.85rem;}
  .short{padding:18px 18px !important;font-size:1.12rem;}
  .plan,.tryit{padding:20px 18px;}
}
@media (prefers-reduced-motion:reduce){
  .blog *{transition:none !important;}
}
html[data-theme="dark"] .b-toc a{color:var(--faint);}
html[data-theme="dark"] .b-toc a.here,html[data-theme="dark"] .b-toc a:hover{color:#fff;}
html[data-theme="dark"] .b-toc a b{color:var(--accent);}
html[data-theme="dark"] .sheet details.qa{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
html[data-theme="dark"] .sheet details.qa::before{display:none;}

/* photos + videos inside a post (same blocks as the Guide) */
.fig{margin:26px auto 0;}
.fig.photo{padding:0; overflow:hidden; max-width:300px; border-radius:20px;}
.fig.photo img{display:block; width:100%; height:auto;}
.sheet a{overflow-wrap:anywhere;} /* a full store URL in the text must wrap on a phone (b-07) */
.fig.video{padding:0; overflow:hidden; max-width:340px; border-radius:28px;}
.fig.video video{display:block; width:100%; height:auto; background:#000;}
.fig figcaption{margin-top:10px; font-size:14px; color:var(--muted, #6a6676); text-align:center;}
.fig figcaption p{margin:0;}

/* inset for examples and plain-word explanations (Founder 02-11: an example must look like an example) */
.sheet .explain{margin:24px 0;padding:18px 22px;border-left:4px solid var(--brand);border-radius:0 16px 16px 0;background:var(--tint);}
.sheet .explain p{margin:0;background:none;}
.sheet .explain .term{margin-bottom:6px;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);}