/* Page-type sheet for guides + 7 blog articles. */
body{line-height:1.65}
h1,h2,h3,.display{line-height:1.12}
/* #134: the horizontal gutter lives on its own longhands. `.read` shares an element with
   `.arthead` and `.prose` (`class="arthead read"`, `class="read prose"`), and both of those
   re-declare the padding SHORTHAND at equal specificity — a shorthand here would be wiped
   whole, gutter included, leaving the article flush against the screen edge on mobile.
   Keep vertical padding out of this rule and off the shorthand in those two. */
.read{max-width:var(--read);margin:0 auto;padding-left:26px;padding-right:26px}

.bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 70% at 50% -10%, #11314e 0%, var(--deep) 36%, var(--abyss) 80%)}
.rays{position:fixed;inset:0;top:-10%;height:70vh;z-index:-1;pointer-events:none;opacity:.4;
  background:linear-gradient(174deg, rgba(var(--cyan-bright-rgb),.10), transparent 42%),
   conic-gradient(from 180deg at 52% -8%, transparent 0deg, rgba(var(--cyan-bright-rgb),.07) 8deg, transparent 16deg, rgba(var(--cyan-bright-rgb),.05) 26deg, transparent 34deg, rgba(var(--cyan-bright-rgb),.08) 44deg, transparent 52deg);
  -webkit-mask:linear-gradient(to bottom, #000 0%, transparent 86%);mask:linear-gradient(to bottom, #000 0%, transparent 86%)}
.caustic{position:fixed;inset:0;top:-6%;height:86vh;z-index:-1;pointer-events:none;opacity:.55;background:radial-gradient(38% 30% at 16% 10%, rgba(var(--cyan-bright-rgb),.09), transparent 62%),radial-gradient(32% 26% at 86% 6%, rgba(var(--cyan-rgb),.07), transparent 60%),radial-gradient(40% 34% at 70% 22%, rgba(233,199,158,.045), transparent 66%);-webkit-mask:linear-gradient(#000,transparent 82%);mask:linear-gradient(#000,transparent 82%)}

.jellyv{position:relative;width:min(var(--js,200px),60vw);margin:0 auto;display:grid;place-items:center}

.crumb{font-size:.8rem;color:var(--ink-faint);margin:34px 0 0}
.crumb a:hover{color:var(--cyan)}
.arthead{padding-top:8px;padding-bottom:18px;text-align:center} /* #134: longhands — see .read */
.arthead h1{font-size:clamp(2.2rem,5.2vw,3.5rem);margin:16px auto 0;max-width:20ch}
/* Two short-titled v2 articles (how-to-kegels, how-long-kegels) use a larger headline treatment
   than the 5-article majority above; ArticleLayout adds .arthead--lg for them via the largeHead
   frontmatter flag. Same specificity as the base rule, so this must stay after it. */
.arthead--lg h1{font-size:clamp(2.3rem,5.4vw,3.7rem);max-width:18ch}
.arthead .dek{color:var(--ink-dim);font-size:clamp(1.05rem,2.1vw,1.22rem);max-width:54ch;margin:20px auto 0}
.artmeta{margin-top:18px;font-size:.82rem;color:var(--ink-faint);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.artmeta a{color:var(--cyan)}.artmeta a:hover{border-bottom:1px solid var(--cyan)}

.prose{padding-top:14px;padding-bottom:10px} /* #134: longhands — see .read */
.prose p{color:var(--ink-dim);font-size:1.1rem;margin-top:20px}
.prose h2{font-size:clamp(1.55rem,3.4vw,2.1rem);margin:46px 0 0}
.prose h2 + p{margin-top:16px}
.prose > h3{font-weight:400;font-size:1.4rem;color:var(--cyan-bright);margin:34px 0 0}
.prose > h3 + p{margin-top:12px}
.prose ul{margin:18px 0 0;padding-left:0;list-style:none;display:grid;gap:12px}
.prose li{display:flex;gap:12px;color:var(--ink-dim);font-size:1.06rem}
.prose li::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;margin-top:11px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.prose a.inline{color:var(--cyan);border-bottom:1px solid rgba(var(--cyan-rgb),.4)}
.prose a.inline:hover{border-color:var(--cyan)}
.prose em{color:var(--ink);font-style:italic}

.signs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.signcard{padding:26px;border-radius:18px;border:1px solid var(--line);background:rgba(8,22,38,.4)}
.signcard h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.08rem;margin-bottom:16px}
.signcard ul{list-style:none;display:grid;gap:13px}
.signcard li{display:flex;gap:11px;color:var(--ink-dim);font-size:1rem;line-height:1.5}
.signcard li::before{flex:0 0 auto;font-weight:700;margin-top:1px}
.signcard--wrong li::before{content:"\2715";color:var(--ink-faint)}
.signcard--right li::before{content:"\2713";color:var(--cyan-bright)}
@media(max-width:680px){.signs{grid-template-columns:1fr}}

.timeline{margin-top:28px}
.tl{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.tl:last-child{border-bottom:1px solid var(--line)}
.tl__when{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:1.15rem;color:var(--cyan-bright);line-height:1.3}
.tl__what{color:var(--ink-dim);font-size:1.05rem}
@media(max-width:600px){.tl{grid-template-columns:1fr;gap:6px}.tl__when{font-size:1.05rem}}

.callout{margin:34px 0 6px;padding:26px 28px;border-radius:18px;border:1px solid rgba(var(--cyan-rgb),.3);background:linear-gradient(135deg, rgba(var(--cyan-rgb),.10), rgba(8,22,38,.35));border-left:3px solid var(--cyan)}
.callout .eyebrow{color:var(--cyan-bright)}
.callout h3{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:1.4rem;margin:10px 0 0}
.callout p{color:var(--ink-dim);font-size:1.05rem;margin-top:12px}
.callout a.inline{color:var(--cyan);border-bottom:1px solid rgba(var(--cyan-rgb),.4)}

.cta-band{margin:48px auto;max-width:var(--read);padding:38px 30px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(135deg, rgba(var(--cyan-rgb),.10), rgba(8,22,38,.45));text-align:center}
.cta-band h3{font-size:1.7rem;margin:0 auto;max-width:20ch}
.cta-band p{color:var(--ink-dim);margin:12px auto 22px;max-width:42ch}
.cta-band .row{display:flex;justify-content:center}
.ios-note{font-size:.76rem;color:var(--ink-faint);margin-top:14px}

.faq{margin-top:18px}
.q summary{list-style:none;display:flex;justify-content:space-between;gap:18px;font-size:1.08rem;color:var(--ink)}
.q p{color:var(--ink-dim);margin-top:14px;font-size:1.02rem}
.q a.inline{color:var(--cyan);border-bottom:1px solid rgba(var(--cyan-rgb),.4)}

.related{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rel{padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:var(--card);transition:.22s}
.rel:hover{border-color:rgba(var(--cyan-rgb),.4);transform:translateY(-2px)}
.rel b{font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;display:block}
.rel span{color:var(--ink-dim);font-size:.9rem;display:block;margin-top:4px}
@media(max-width:680px){.related{grid-template-columns:1fr}}

.srcline{margin-top:34px;font-size:.9rem;color:var(--ink-faint)}
.srcline a{color:var(--cyan)}.srcline a:hover{border-bottom:1px solid var(--cyan)}
.disclaimer{margin-top:16px;font-size:.82rem;color:var(--ink-faint);line-height:1.6}

.section{padding:56px 0;position:relative}
.section--tint{background:linear-gradient(180deg, transparent, rgba(8,22,38,.5) 12%, rgba(8,22,38,.5) 88%, transparent)}
.section h2.center{text-align:center;font-size:clamp(1.7rem,3.6vw,2.3rem)}

.footer{border-top:1px solid var(--line);padding:46px 0 60px;margin-top:30px}

@media(max-width:680px){.section{padding:44px 0}}

.steps{margin-top:26px}
.step{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:2.8rem;line-height:.9;color:var(--cyan-bright);opacity:.85}
.step__b h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.18rem;margin-bottom:8px}
.step__b p{color:var(--ink-dim);font-size:1.05rem;margin:0}
.step__b p + p{margin-top:10px}