/* Sigh Club blog (2026-10-25): friendly reading pages in the site's own look. Tokens come from brand.css; Bloom colours repeated here
   so the page does not need styles.css. Structure ideas (not looks) from Neil Patel's and Moz's blogs: summary box on top, a table of
   contents that follows you, in-text links to sibling posts, "read next" cards, a small author block. */
:root { --butter:#F9CB6B; --peri:#7F7AE6; --peri-light:#B9B6F5; --mint:#8FD1A8; --lilac:#CFA0E6; --r:28px; }
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.blog { margin: 0; background: var(--page); color: var(--body); font: 400 18px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
.blog a { color: var(--plum); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(91,46,94,.4); }
.blog a:hover { text-decoration-color: var(--plum); }
.blog img { max-width: 100%; height: auto; display: block; }
.blog h1,.blog h2,.blog h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; letter-spacing: -.01em; line-height: 1.08; }
.label { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 24px; border-radius:999px; font:500 13px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; text-decoration:none !important; transition: background .2s, transform .25s cubic-bezier(.2,.8,.2,1); border:0; cursor:pointer; }
.btn:hover { transform: translateY(-2px); }
.btn--plum { background: var(--plum); color: var(--page) !important; } .btn--plum:hover { background: var(--plum-deep); }
.btn--rose { background: var(--accent); color: var(--ink) !important; } .btn--rose:hover { background: var(--accent-light); }
.btn--quiet { background: rgba(255,255,255,.7); color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 12px; } .btn--lg { height: 54px; padding: 0 30px; }
.skip { position:absolute; left:-999px; } .skip:focus { left: 16px; top: 12px; z-index: 99; background: var(--plum); color: var(--page); padding: 8px 14px; border-radius: 999px; }

/* top bar + reading progress */
.bar { position: sticky; top: 0; z-index: 40; background: rgba(255,247,238,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar__in { max-width: 1160px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 22px; }
.bar__logo img { height: 28px; width: auto; }
.bar__links { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.bar__links a:not(.btn) { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--plum); }
.progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--butter)); }

/* crumbs + post header */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 22px 0 6px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--plum); } .crumbs span[aria-hidden] { opacity: .5; }
.phead { padding: 10px 0 30px; max-width: 860px; }
.chip { display: inline-block; padding: 6px 14px; border-radius: 999px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none !important; background: var(--accent-light); }
[data-cat="techniques"] { --c: var(--accent-light); --c2: var(--accent); } [data-cat="sleep"] { --c: var(--peri-light); --c2: var(--peri); }
[data-cat="everyday"] { --c: #FCE3A4; --c2: var(--butter); } [data-cat="myths"] { --c: #CDEBD8; --c2: var(--mint); } [data-cat="teachers"] { --c: #E8D2F3; --c2: var(--lilac); }
[data-cat="health"] { --c: #FAD7C6; --c2: #F4A98A; } [data-cat="safety"] { --c: #F6C9D2; --c2: var(--accent-deep); } [data-cat="research"] { --c: #D9D6F7; --c2: var(--peri); }
.chip[data-cat] { background: var(--c); }
.phead h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; margin: 18px 0 20px; }
.by { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14.5px; color: var(--muted); }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--plum); color: var(--page); font: 400 17px/1 var(--serif); letter-spacing: .02em; }
.by b { color: var(--ink); font-weight: 600; } .by .dot { opacity: .45; }
.pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--rule); }

/* two columns: article + sticky side */
.cols { display: grid; grid-template-columns: minmax(0, 700px) 300px; gap: 56px; justify-content: space-between; align-items: start; padding-bottom: 40px; }
.side { position: sticky; top: 92px; display: grid; gap: 18px; }
.toc { background: #fff; border-radius: 24px; padding: 20px 22px; box-shadow: 0 0 0 1px var(--line); }
.toc p { margin: 0 0 10px; } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; gap: 2px; }
.toc li { counter-increment: t; } .toc a { display: block; padding: 7px 10px 7px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.35; text-decoration: none; color: var(--body); border-left: 3px solid transparent; }
.toc a:hover { background: var(--mauve-light); } .toc a.on { background: var(--mauve-light); color: var(--ink); font-weight: 600; border-left-color: var(--accent-deep); }
.toc--m { display: none; }
.sidecta { position: relative; background: var(--plum); color: var(--page); border-radius: 24px; padding: 22px 22px 24px; overflow: hidden; }
.sidecta h3 { color: var(--page); font-size: 26px; line-height: 1.1; margin-bottom: 8px; } .sidecta p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: rgba(255,247,238,.85); }
.sidecta img { position: absolute; right: -14px; bottom: -14px; width: 92px; height: auto; opacity: .95; }

/* the article */
.art > * { margin-top: 0; } .art p, .art ul, .art ol { margin: 0 0 1.15em; }
.art h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; margin: 1.9em 0 .55em; }
.art h3 { font-size: 26px; line-height: 1.15; margin: 1.5em 0 .4em; }
.art ul,.art ol { padding-left: 1.3em; } .art li { margin-bottom: .45em; } .art li::marker { color: var(--accent-deep); font-weight: 600; }
.art strong { color: var(--ink); } .art em { color: var(--plum); }
.art ol.steps { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.art ol.steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 62px; margin: 0; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); }
.art ol.steps li::before { content: counter(s); position: absolute; left: 14px; top: 11px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--butter); color: var(--ink); font: 400 22px/1 var(--serif); }
.art ol.steps li:nth-child(3n+2)::before { background: var(--accent); } .art ol.steps li:nth-child(3n)::before { background: var(--mint); }
.tldr,.careful { border-radius: var(--r); padding: 22px 26px; margin: 0 0 22px; }
.tldr { background: #FCE3A4; color: var(--ink); } .careful { background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 16px; line-height: 1.6; }
.tldr .label,.careful .label { display: block; margin-bottom: 6px; } .tldr p,.careful p { margin: 0; } .tldr p + p,.careful p + p { margin-top: .7em; }
.tldr p { font-size: 19px; line-height: 1.55; }
.tablewrap { overflow-x: auto; margin: 0 0 1.4em; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.art table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; min-width: 520px; }
.art th { text-align: left; font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plum); padding: 14px 16px; background: var(--mauve-light); }
.art td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.cta { position: relative; background: var(--plum); color: var(--page); border-radius: var(--r); padding: 30px 30px 32px; margin: 2em 0; overflow: hidden; }
.cta h2 { color: var(--page); margin: 0 0 12px; font-size: clamp(30px,3.4vw,40px); } .cta p { color: rgba(255,247,238,.88); margin: 0 0 1em; max-width: 30em; }
.cta img { position: absolute; right: 16px; top: 14px; width: 104px; height: auto; } .cta .btn { margin-top: 6px; } .cta small { display: block; margin-top: 12px; font-size: 13px; color: rgba(255,247,238,.7); }
.skipbox { background: #CDEBD8; border-radius: var(--r); padding: 24px 28px 8px; margin: 2em 0; } .skipbox h2 { margin: 0 0 .5em; font-size: 32px; }
.faq details { background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); margin: 0 0 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; position: relative; font: 400 22px/1.25 var(--serif); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 20px; top: 13px; font: 400 28px/1 var(--serif); color: var(--accent-deep); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); } .faq .ans { padding: 0 20px 6px; } .faq .ans p:last-child { margin-bottom: 14px; }
.src { margin: 2em 0; } .src summary { cursor: pointer; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plum); padding: 10px 0; }
.src ol { font-size: 14.5px; line-height: 1.55; color: var(--body); overflow-wrap: anywhere; }
.bio { display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 0 0 1px var(--line); margin: 2.4em 0 1.2em; }
.bio .avatar { width: 64px; height: 64px; font-size: 26px; } .bio h3 { font-size: 26px; margin: 0 0 4px; } .bio .role { margin: 0 0 10px; font: 500 15px/1.4 var(--sans); color: var(--plum); } .bio p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; }
.updated { font-size: 13.5px; color: var(--muted); margin: 0; }

/* read next + cards */
.next { padding: 56px 0 80px; } .next h2 { font-size: clamp(34px,4vw,48px); margin-bottom: 28px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; column-gap: 16px; row-gap: 14px; align-items: start; padding: 32px 30px 26px; border-radius: var(--r); background: var(--c, var(--accent-light)); color: var(--ink); text-decoration: none !important; overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.card:hover { transform: translateY(-4px); }
.card h3 { font-size: clamp(28px, 2.4vw, 33px); line-height: 1.06; max-width: 11.5em; } .card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 24em; }
.card .meta { align-self: end; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }
.card img { width: auto; height: 132px; margin: 4px -2px -12px 0; align-self: end; justify-self: end; pointer-events: none; }
.card > .chiprow, .card > h3, .card > p { grid-column: 1 / -1; } .card > .meta { grid-column: 1; grid-row: 4; } .card > img { grid-column: 2; grid-row: 4; }
.card .chip { background: rgba(255,255,255,.7); }
.card--big { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 44px 48px; }
.card--big h3 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; max-width: 13em; } .card--big p { font-size: 18px; max-width: 30em; } .card--big img { width: auto; height: 230px; flex: none; align-self: flex-end; margin: 0 0 -30px auto; }
.card--big .txt { display: grid; gap: 12px; }

/* blog home */
.bhero { padding: 72px 0 28px; max-width: 900px; } .bhero .label { display: inline-block; } .bhero h1 { font-size: clamp(48px, 7vw, 96px); line-height: .98; margin: 16px 0 22px; } .bhero h1 em { color: var(--plum); }
.bhero p { font-size: 20px; line-height: 1.55; max-width: 34em; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; padding: 30px 0 16px; }
.chips button { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 13px 20px; border-radius: 999px; border: 0; cursor: pointer; color: var(--ink); background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1.5px var(--rule); }
.chips button[aria-pressed="true"] { background: var(--plum); color: var(--page); box-shadow: none; }
.start { margin: 34px 0 10px; } .start h2 { font-size: clamp(30px,3.6vw,42px); margin-bottom: 16px; }
.grid { padding: 24px 0 40px; } .card[hidden] { display: none; }
.band { background: var(--plum); color: var(--page); border-radius: var(--r); padding: 44px 48px; margin: 30px 0 90px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.band h2 { color: var(--page); font-size: clamp(32px,4vw,48px); max-width: 14em; } .band p { margin: 14px 0 0; color: rgba(255,247,238,.85); max-width: 28em; }

.foot { border-top: 1px solid var(--line); padding: 30px 0 46px; } .foot .links { display: flex; flex-wrap: wrap; gap: 18px; } .foot a { text-decoration: none; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.foot p { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.totop { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--plum); color: var(--page); font-size: 20px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 30; } .totop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 980px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: 0; } .side { display: none; }
  .toc--m { display: block; margin: 0 0 22px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); } .toc--m summary { cursor: pointer; padding: 14px 18px; list-style: none; } .toc--m summary::-webkit-details-marker { display: none; } .toc--m ol { list-style: none; margin: 0; padding: 0 8px 12px; } .toc--m a { display: block; padding: 8px 12px; text-decoration: none; font-size: 15px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 22px; } .card--big { flex-direction: column; align-items: flex-start; gap: 20px; padding: 36px 36px 0; } .card--big img { align-self: flex-end; height: 190px; margin: 0 -4px -10px 0; }
}
@media (max-width: 640px) {
  body.blog { font-size: 17px; } .wrap,.bar__in { padding-left: 16px; padding-right: 16px; } .bar__links a:not(.btn) { display: none; }
  .cards { grid-template-columns: 1fr; gap: 18px; } .card { padding: 28px 24px 22px; } .card h3 { font-size: 29px; } .card img { height: 118px; margin-bottom: -10px; } .bhero { padding-top: 48px; } .cta { padding: 26px 22px 28px; } .cta img { width: 74px; right: 10px; top: 10px; } .cta h2 { max-width: 8em; }
  .tldr,.careful { padding: 18px 20px; } .tldr p { font-size: 18px; } .band { padding: 34px 28px; } .bio { flex-direction: column; } .card--big { padding: 30px 26px 0; gap: 16px; } .card--big h3 { font-size: 38px; } .card--big img { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn,.card { transition: none; } .js .rise { opacity: 1; } .js .rise.is-in { animation: none; } }

.card--big .txt .chip { justify-self: start; } .chip--start { background: var(--butter); margin-left: 8px; } .card--big .txt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .chip--start { margin-left: 0; }

.cta p { max-width: calc(100% - 120px); }
@media (max-width: 640px) { .cta p { max-width: none; } .cta h2 { padding-right: 70px; } }

.alsoread { display: grid; gap: 4px; background: rgba(255,255,255,.7); border-radius: 20px; padding: 16px 20px; margin: 0 0 1.4em; box-shadow: 0 0 0 1px var(--line); } .alsoread a { font-size: 17px; font-weight: 500; }

.more { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 22px; font: 500 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* appearing (2026-10-25, Olga: "needs some smooth appearing animation on loading"): each block rises in softly as the page opens, the
   first screen one after the other, the rest as they scroll into view (blog.js). Only with the script running (html.js), so the page
   is never blank without it; if the script fails, everything appears by itself after two seconds. */
.js .rise { opacity: 0; }
.js:not(.rise-ready) .rise { animation: riseSafe .6s ease 2s forwards; }
.js .rise.is-in { opacity: 1; animation: rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes riseSafe { to { opacity: 1; } }