/* The guide article template.
 *
 * All ten guides share one skeleton: a back link, a serif h1, a lede, h2
 * sections with 52ch body copy, superscript source markers, a source list,
 * a risk-profile prompt, and a more-guides footer. In the design project
 * every one of those is an inline style repeated on every element of every
 * guide. Once, here, instead.
 */
body{margin:0;background:#16130F;color:#F2EEE7;font-family:'Inter',-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;border-bottom:0;transition:opacity .2s ease}
a:hover{opacity:.78}
:focus-visible{outline:1px solid #8E887F;outline-offset:3px;border-radius:4px}
::selection{background:rgba(131,167,140,.35)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

.g-main{position:relative; z-index:1; max-width:680px; margin:0 auto; padding:130px clamp(20px,4vw,32px) 40px}
.g-back{display:inline-block; margin:0 0 22px; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; letter-spacing:.12em; color:#9D9588}
.g-h1{margin:0 0 16px; font-family:'Newsreader',Georgia,serif; font-weight:300; font-size:clamp(34px,4.6vw,52px); line-height:1.06; letter-spacing:-0.02em; text-wrap:balance}
.g-lede{margin:0 0 40px; max-width:52ch; font-size:16.5px; line-height:1.6; color:#A8A29A}
.g-h2{margin:0 0 12px; font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:24px; line-height:1.2}
.g-p{margin:0 0 12px; max-width:52ch; font-size:15px; line-height:1.68; color:#D5CEC3}
/* Last paragraph before the next heading carries the section gap. */
.g-p.end{margin-bottom:40px}
.g-p.end-lg{margin-bottom:44px}
.g-p a:not(.g-ref){border-bottom:1px solid rgba(255,248,236,.39)}
.g-ref{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; color:#9D9588; white-space:nowrap}

.g-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:0 0 44px; border-radius:20px; padding:22px; background:#131211; border:1px solid rgba(255,248,236,.117); box-shadow:0 1px 2px rgba(255,248,236,.052), 0 12px 28px -22px rgba(255,248,236,.26)}
.g-cta > div{flex:1; min-width:220px}
.g-cta p:first-child{margin:0 0 4px; font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:19px}
.g-cta p:last-child{margin:0; font-size:13.5px; line-height:1.55; color:#A8A29A}
.g-cta a{display:inline-flex; align-items:center; min-height:44px; padding:0 22px; border-radius:999px; background:#F2EEE7; color:#131211; font-size:14px; font-weight:500; white-space:nowrap}

.g-srcs{margin:0 0 40px; border-top:1px solid rgba(255,248,236,.117); padding-top:20px}
.g-label{margin:0 0 12px; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#9D9588}
.g-srcs p{margin:0 0 10px; font-size:13px; line-height:1.6; color:#A8A29A; scroll-margin-top:100px}
.g-srcs p:last-child{margin:0}
.g-srcs a{border-bottom:1px solid rgba(255,248,236,.325)}
.g-note{margin:0 0 40px; max-width:52ch; font-size:13px; line-height:1.65; color:#9D9588}

.g-more{border-top:1px solid rgba(255,248,236,.117); padding-top:24px; display:flex; flex-direction:column; gap:10px}
.g-more a{font-size:14.5px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,248,236,.325); align-self:flex-start}
.g-more a.all{margin-top:14px; font-size:13px; color:#9D9588; text-decoration:none}

.g-fig{margin:18px 0 22px}
.g-fig > div{border-radius:14px; padding:20px 22px 14px; background:rgba(255,248,236,.072); box-shadow:inset 0 1px 3px rgba(255,248,236,.104)}
.g-fig figcaption, .g-fig > p{margin:8px 0 0; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10px; letter-spacing:.1em; color:#9D9588}
.g-two{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px; margin:0 0 44px}
.g-two > div{border-radius:20px; padding:22px; background:#131211; border:1px solid rgba(255,248,236,.117); box-shadow:0 1px 2px rgba(255,248,236,.052), 0 12px 28px -22px rgba(255,248,236,.26)}
.g-two p:first-child{margin:0 0 6px; font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:19px}
.g-two p:last-child{margin:0; font-size:14px; line-height:1.6; color:#A8A29A}

/* Early-signs checklist, used by the risk-factors guide. */
.g-signs{margin:0 0 12px; border-radius:16px; padding:20px 22px; background:rgba(255,248,236,.072); box-shadow:inset 0 1px 3px rgba(255,248,236,.104)}
.g-signs > div{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:10px 24px}
.g-signs p{display:flex; gap:10px; align-items:baseline; margin:0; font-size:13.5px; line-height:1.55; color:#D5CEC3}
.g-signs p::before{content:""; width:5px; height:5px; border-radius:50%; background:#8E887F; flex:none; transform:translateY(-2px)}

/* Comparison layouts, used by the two "Lessen vs" guides. */
.g-three{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:12px; margin:0 0 40px}
.g-three > div{border-radius:20px; padding:18px 20px; background:#131211; border:1px solid rgba(255,248,236,.117); box-shadow:0 1px 2px rgba(255,248,236,.052), 0 12px 28px -22px rgba(255,248,236,.26)}
.g-three p:first-child{margin:0 0 8px; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#9D9588}
.g-three p:last-child{margin:0; font-size:14px; line-height:1.6; color:#D5CEC3}
.g-vs{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:14px; margin:0 0 44px}
.g-vs > div{border-radius:20px; padding:22px}
.g-vs .them{background:rgba(255,248,236,.065); box-shadow:inset 0 1px 3px rgba(255,248,236,.091)}
.g-vs .us{background:#131211; border:1px solid rgba(255,248,236,.117); box-shadow:0 1px 2px rgba(255,248,236,.065), 0 18px 36px -24px rgba(255,248,236,.338)}
.g-vs p:first-child{margin:0 0 10px; font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:19px}
.g-vs .them p:first-child{color:#A8A29A}
.g-vs .us p:first-child{color:#F2EEE7}
.g-vs div > div{display:flex; flex-direction:column; gap:6px; font-size:14px; line-height:1.5; color:#A8A29A}

/* The long-form variant used by "How to use Lessen well": headings carry
   their own top margin, and it uses real lists. */
.gf-p{margin:0 0 12px; max-width:52ch; font-size:15px; line-height:1.68; color:#D5CEC3}
.gf-p a{border-bottom:1px solid rgba(255,248,236,.39)}
.gf-ul{margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:10px}
.gf-ul li{max-width:52ch; font-size:15px; line-height:1.68; color:#D5CEC3}
.gf-h2{margin:40px 0 12px; font-family:'Newsreader',Georgia,serif; font-weight:400; font-size:24px; line-height:1.2}
.g-srcs .stack{display:flex; flex-direction:column; gap:10px; font-size:13px; line-height:1.6; color:#A8A29A}
.g-srcs .stack p{margin:0}