/* =============================================================================
 * Reclaim — Blog: the /blog listing and the article pages.
 *
 * Loaded after base.css, which supplies every token used here (--ink, --moss,
 * --serif, --rule …) plus the nav and footer. Scoped to .blog-* / .post-*.
 *
 * DELIBERATELY SEPARATE FROM legal.css. Both are "a calm reading column", and
 * merging them is the obvious refactor — don't. The legal pages are documents
 * people are held to; the blog is content we iterate on weekly. Sharing a
 * stylesheet means a blog design pass can silently restyle the Terms.
 *
 * ── The one rule that governs everything below ──────────────────────────────
 *
 * NO CARDS. No tinted fills, no rounded panels, no coloured strip down the left
 * edge of a callout, no gradient CTA box, no uppercase label sitting inside a
 * bordered container. That vocabulary is the house style of AI-generated
 * landing pages, it is instantly recognisable as such, and on a YMYL topic
 * where the whole game is looking trustworthy it actively costs us.
 *
 * Set things apart with WHITESPACE and HAIRLINES instead: generous margins, a
 * 1px rule, a shift in size or weight. If a block needs to feel different, give
 * it room — not a border-radius.
 *
 * ── The blog is set entirely in Manrope ─────────────────────────────────────
 *
 * Newsreader is the homepage and the legal pages. It does not appear on /blog or
 * on any post — not the h1, not the pull quote, not the CTA. If you are adding a
 * block here and reach for var(--serif), that is the wrong instinct; separate it
 * with size and weight instead. base.css sets `h1, h2, h3 { font-family:
 * var(--serif) }` globally, so EVERY heading on a blog page has to name
 * var(--sans) explicitly or the serif leaks back in through inheritance.
 *
 * And there is no italic font on this site — no @font-face declares one, so
 * `font-style: italic` anywhere is a synthetic oblique the browser slants by
 * hand. Tolerable on an inline <em>; visibly cheap at pull-quote size. Don't.
 *
 * The one thing still allowed a rounded box is a photograph, because a
 * photograph is content rather than chrome.
 *
 * Phosphor icon classes are NOT available here. The @font-face lives in
 * base.css but every .ph-*:before glyph rule lives in home.css, which blog
 * pages don't load — a `ph-` class on a post renders as a blank box. Use inline
 * SVG instead, as the back arrow does.
 * ========================================================================== */

body.blog-page,
body.blog-post { background: var(--ink); }

/* base.css sets `p { max-width: 60ch }` globally, which fights every measure
   set below. Reset it once, here, rather than per-rule. */
.blog-head p,
.post-hero p,
.post-prose p { max-width: none; }

/* base.css gives every <section> 112px of vertical padding for the landing
   page's rhythm. Article sections set their own. */
.blog-head,
.post-hero,
.blog-body,
.post-body { padding: 0; }


/* =============================================================================
 * LISTING — /blog
 *
 * A plain vertical list. No hero section, no intro paragraph, no cards — the
 * page's name, then the posts. The <h1> stays because every page needs exactly
 * one and this is what the page is called; it is not a header block.
 * ========================================================================== */

/* Narrow. The list IS the page, and a wide row of thumbnail-plus-title reads as
   a sitemap rather than as something to browse. The column is deliberately tight
   enough that a title wraps to two or three lines next to the art — that wrap is
   what gives the row its weight now that there is no description. */
.blog-shell { max-width: 700px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

/* Sans, not the site's display serif. The serif is for prose; this is a label
   on a page of links, and at this size the serif reads as a magazine masthead
   the listing doesn't earn.
 *
 * 700 is as heavy as this can get. The self-hosted Manrope is a VARIABLE subset
 * whose weight axis stops at 700 — one .woff2 file backs 400/500/600/700 in
 * base.css, which is only possible for a variable font. Asking for 800 gets you
 * either a silent clamp back to 700 or a synthesised fake bold, so the extra
 * weight here comes from SIZE and TIGHTER TRACKING instead. A real 800 means
 * adding the 800 subset to base.css first. */
.blog-head { padding: calc(150px + env(safe-area-inset-top)) 0 56px; text-align: center; }
.blog-head h1 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.045em;
  font-size: clamp(52px, 7.6vw, 88px); line-height: 0.98;
}

.blog-body { padding: 0 0 120px; }

/* ──────────────────── POST LIST ──────────────────── */

/* No rules between rows, no cards. The gap does the separating — 56px is wide
   enough that two rows never read as one. */
.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 56px; }

.post-item {
  position: relative;
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center;
}

/* Square and large. It is the only thing carrying the row visually now that the
   description is gone. */
.post-item-art {
  overflow: hidden; border-radius: var(--radius-lg);
  background: var(--ink-2); aspect-ratio: 1 / 1;
}
.post-item-art img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.post-item:hover .post-item-art img { transform: scale(1.04); }

.post-item-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.post-item h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.022em;
  font-size: clamp(22px, 2.2vw, 27px); line-height: 1.26; color: var(--ink-fg);
  transition: color .18s ease;
}
.post-item:hover h2 { color: var(--moss-bright); }
.post-item h2 a { color: inherit; text-decoration: none; }

/* Stretched link: the whole row is clickable, but only the title is a link in
   the accessibility tree. Don't add a second <a> inside a row — it ends up
   unclickable underneath this one. */
.post-item h2 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-item h2 a:focus-visible::after {
  outline: 2px solid var(--moss-bright); outline-offset: 10px; border-radius: var(--radius-lg);
}

.post-item time { font-size: 14px; color: var(--ink-fg2); }

.blog-empty { padding: 40px 0; color: var(--ink-fg2); font-size: 17px; }


/* =============================================================================
 * ARTICLE — /blog/<slug>
 * ========================================================================== */

/* The reading column. Narrower than the legal pages' 900px: those are reference
   documents people scan, this is prose people read start to finish. */
.post-shell { max-width: 752px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

.post-hero { padding: calc(140px + env(safe-area-inset-top)) 0 40px; }

.post-back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-fg2); text-decoration: none;
  transition: color .15s;
}
.post-back:hover { color: var(--moss-bright); }
.post-back svg { width: 14px; height: 14px; }

.post-hero .eyebrow { margin-bottom: 16px; }
.post-hero h1 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.035em;
  font-size: clamp(33px, 4.4vw, 50px); line-height: 1.1;
}

.post-standfirst {
  margin-top: 20px; font-size: 20px; line-height: 1.72; letter-spacing: 0.004em;
  color: var(--ink-fg2);
}
.post-standfirst strong { color: var(--ink-fg); font-weight: 600; }

/* Byline. E-E-A-T for a YMYL topic — a named author and, where one reviewed the
   post, a named reviewer. Keep it visible on the page: schema that claims a
   reviewer the reader can't see is the mismatch Google penalises. */
.post-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-fg2);
}
.post-byline .dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .6; }
.post-byline strong { color: var(--ink-fg); font-weight: 600; }
.post-byline a { color: var(--moss-bright); text-decoration: none; }
.post-byline a:hover { text-decoration: underline; }
.post-byline svg { width: 15px; height: 15px; flex: none; opacity: .75; margin-right: -6px; }

.post-body { padding: 8px 0 110px; }

/* ──────────────────── TABLE OF CONTENTS ────────────────────
 * Was a bordered panel. Now it is what a book's contents page is: a label, a
 * list, and a rule underneath it. */

.post-toc { margin: 0 0 52px; }
.post-toc h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-fg2); margin: 0 0 18px;
}
.post-toc ol {
  list-style: none; margin: 0; padding: 0 0 28px;
  border-bottom: 1px solid var(--rule); counter-reset: toc;
}
.post-toc li { counter-increment: toc; position: relative; padding-left: 32px; margin-bottom: 11px; }
.post-toc li:last-child { margin-bottom: 0; }
.post-toc li::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 3px;
  font-size: 12px; font-weight: 600; color: var(--ink-fg2); opacity: .65;
}
.post-toc a {
  font-size: 16.5px; line-height: 1.5; color: var(--ink-fg2); text-decoration: none;
  transition: color .15s;
}
.post-toc a:hover { color: var(--moss-bright); }

/* ──────────────────── PROSE ──────────────────── */

.post-prose { font-size: 18.5px; line-height: 1.82; letter-spacing: 0.004em; color: var(--ink-fg2); }

.post-prose > *:first-child { margin-top: 0; }
.post-prose > *:last-child  { margin-bottom: 0; }

.post-prose p { margin: 0 0 26px; }
.post-prose strong { color: var(--ink-fg); font-weight: 600; }
.post-prose em { font-style: italic; }

/* Links look like links — same treatment as the legal pages: moss, underlined,
   the underline dimmed until hover.
 *
 * Listed out rather than set once on `.post-body a`, because the FAQ, the
 * sources, the disclaimer and the standfirst are each their own <section>
 * OUTSIDE .post-prose. They were inheriting nothing, so a link in any of them
 * was indistinguishable from body text.
 *
 * The table of contents, the byline and the back arrow are deliberately absent
 * from this list. Those are navigation, not prose — underlining every row of
 * the contents block turns it into a wall of rules. */
.post-prose a,
.post-standfirst a,
.post-note a,
.post-faq a,
.post-sources a,
.post-disclaimer a {
  color: var(--moss-bright); text-decoration: underline;
  text-decoration-color: rgba(169,205,175,0.35); text-underline-offset: 3px;
}
.post-prose a:hover,
.post-standfirst a:hover,
.post-note a:hover,
.post-faq a:hover,
.post-sources a:hover,
.post-disclaimer a:hover { text-decoration-color: currentColor; }

/* Headings are sans, not serif, and phrased as questions. They are the scan
   layer — an extractor looking for "what question does this answer" reads
   these, so they get weight rather than elegance. The h1 stays serif. */
.post-prose h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.012em;
  font-size: clamp(24px, 2.9vw, 31px); line-height: 1.22; color: var(--ink-fg);
  margin: 58px 0 20px; scroll-margin-top: calc(96px + env(safe-area-inset-top));
}
.post-prose h3 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.006em;
  font-size: 19px; line-height: 1.4; color: var(--ink-fg);
  margin: 38px 0 14px; scroll-margin-top: calc(96px + env(safe-area-inset-top));
}

/* The direct-answer block: 40–60 words, immediately under a question heading,
 * before any build-up. It is the passage that gets pulled into an AI answer or
 * a featured snippet.
 *
 * It used to be a tinted box with a green strip down the left. It does not need
 * to be. What makes this passage extractable is its POSITION and its LENGTH —
 * first thing after the heading, one self-contained paragraph that answers the
 * question — not its background colour. No crawler reads the CSS. So it is set
 * larger and brighter than the prose around it and nothing else, which is what
 * a standfirst does in print anyway. */
.post-answer {
  margin: 0 0 30px;
  font-size: 21px; line-height: 1.68; letter-spacing: -0.002em;
  color: var(--ink-fg);
}
.post-answer p { margin: 0; }
.post-answer p + p { margin-top: 16px; }

/* ──────────────────── LISTS ──────────────────── */

.post-prose ul, .post-prose ol { margin: 0 0 26px; padding: 0; list-style: none; }
.post-prose li { position: relative; padding-left: 26px; margin: 0 0 13px; line-height: 1.75; }
.post-prose li:last-child { margin-bottom: 0; }
.post-prose li > ul, .post-prose li > ol { margin: 13px 0 0; }

.post-prose ul > li::before {
  content: ''; position: absolute; left: 3px; top: 13px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--moss);
}
.post-prose ol { counter-reset: plist; }
.post-prose ol > li { counter-increment: plist; padding-left: 32px; }
.post-prose ol > li::before {
  content: counter(plist) '.'; position: absolute; left: 0; top: 0;
  color: var(--moss); font-weight: 700; font-size: 16px;
}

/* ──────────────────── QUOTE / ASIDE / FIGURE ──────────────────── */

/* A pull quote with no quote marks, no rule, no fill — just scale, a lighter
   weight than the headings, an indent and a lot of air. The green strip that
   used to run down its left edge is gone; that strip is the single most
   recognisable "an AI made this" tell.
   Upright, not italic: there is no italic face on this site, so an italic here
   would be a synthetic slant, and at 28px that is very obvious. The contrast
   with the 700 headings comes from weight 500 instead. */
.post-prose blockquote {
  margin: 46px 0; padding: 0 0 0 clamp(0px, 4vw, 44px);
  font-family: var(--sans); font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500; line-height: 1.36; letter-spacing: -0.028em; color: var(--ink-fg);
}
.post-prose blockquote p { margin: 0; }
.post-prose blockquote cite {
  display: block; margin-top: 16px; font-family: var(--sans); font-style: normal;
  font-size: 14px; font-weight: 600; color: var(--ink-fg2); letter-spacing: 0;
}

/* An aside that isn't part of the argument. Hairlines above and below, no fill,
   no radius — the rules do the separating. */
.post-note {
  margin: 42px 0; padding: 26px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: 17px; line-height: 1.75;
}
.post-note p { margin: 0; }
.post-note p + p { margin-top: 14px; }
.post-note-title {
  display: block; margin-bottom: 10px; font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-fg2);
}

/* Every in-article image keeps its own aspect ratio and is capped in height.
 *
 * Without the cap a portrait image fills the column and runs off the screen:
 * the app screens are 900x1947, which at the full 752px measure renders over
 * 1600px tall — taller than the laptop it is being read on.
 *
 * width:auto is what makes this work. With width:100% the CSS min/max algorithm
 * has to fight a definite width; with width:auto it shrinks BOTH axes together,
 * so the ratio survives untouched and the image simply gets smaller. The auto
 * inline margins then centre whatever ends up narrower than the column.
 *
 * Keep the width/height attributes on every <img> — that is what reserves the
 * right-shaped box before the file arrives. */
.post-prose figure { margin: 42px 0; }
.post-prose figure img {
  display: block; margin-inline: auto;
  width: auto; max-width: 100%;
  height: auto; max-height: min(70vh, 620px);
  border-radius: var(--radius-md);
}
.post-prose figcaption {
  margin-top: 14px; padding-left: 2px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-fg2);
}

.post-prose hr { border: 0; border-top: 1px solid var(--rule); margin: 46px 0; }

/* ──────────────────── TABLE ──────────────────── */

/* Horizontal rules only — no outer box, no rounded corners, no filled header
   row. This is how a newspaper sets a table, and it reads as typeset rather
   than as a component. Wide content still scrolls inside its own container:
   the page body must never scroll sideways on a phone. */
.post-table-wrap { overflow-x: auto; margin: 42px 0; }
.post-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 460px; }
.post-table th, .post-table td { text-align: left; padding: 16px 22px 16px 0; vertical-align: top; line-height: 1.6; }
.post-table th:last-child, .post-table td:last-child { padding-right: 0; }
.post-table th {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-fg2);
  padding-bottom: 12px; border-bottom: 1px solid var(--rule-strong);
}
.post-table td { color: var(--ink-fg2); border-bottom: 1px solid var(--rule); }
.post-table tr:last-child td { border-bottom: 0; }
.post-table td:first-child { color: var(--ink-fg); font-weight: 600; }

/* ──────────────────── FAQ ──────────────────── */

/* Rendered as plain visible text, not <details>. The FAQPage JSON-LD has to
   match what is on the page, and an answer that is collapsed by default is one
   more thing an extractor can get wrong. */
/* These sections sit OUTSIDE .post-prose, so they miss its heading rules and
   fall through to base.css — which sets h2 to Newsreader at up to 54px. Both
   have to restate the prose heading themselves. */
.post-faq { margin: 64px 0 0; }
.post-faq > h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.012em;
  font-size: clamp(24px, 2.9vw, 31px); line-height: 1.22; color: var(--ink-fg);
  margin-top: 0;
}
.post-faq-item { padding: 24px 0; border-top: 1px solid var(--rule); }
.post-faq-item:last-child { border-bottom: 1px solid var(--rule); }
.post-faq-item h3 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.006em;
  font-size: 19px; line-height: 1.4; color: var(--ink-fg);
  margin: 0 0 10px;
}
.post-faq-item p { margin: 0 0 14px; }
.post-faq-item p:last-child { margin-bottom: 0; }

/* ──────────────────── SOURCES ──────────────────── */

.post-sources { margin: 64px 0 0; }
.post-sources > h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.008em;
  font-size: clamp(21px, 2.3vw, 25px); line-height: 1.25; color: var(--ink-fg);
  margin-top: 0;
}
.post-sources ol { margin: 0; padding: 0; list-style: none; counter-reset: src; }
.post-sources li {
  counter-increment: src; position: relative; padding-left: 32px; margin: 0 0 18px;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-fg2);
}
.post-sources li:last-child { margin-bottom: 0; }
.post-sources li::before {
  content: counter(src) '.'; position: absolute; left: 0; top: 0;
  color: var(--ink-fg2); font-weight: 600; font-size: 14px; opacity: .65;
}
.post-sources cite { font-style: normal; color: var(--ink-fg); font-weight: 600; }
.post-source-note { display: block; margin-top: 4px; font-size: 14px; opacity: .85; }

/* ──────────────────── MEDICAL DISCLAIMER ──────────────────── */

/* This is a control, not decoration — same substance as the app's "not therapy
   or crisis support" line. A design pass may restyle it; it must not drop it.
   Quitting porn is a YMYL topic and this is the floor. Set as fine print:
   small, muted, under a rule. */
.post-disclaimer {
  margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--rule);
  font-size: 14px; line-height: 1.7; color: var(--ink-fg2);
}
.post-disclaimer strong { color: var(--ink-fg); font-weight: 600; }

/* ──────────────────── END-OF-POST CTA ──────────────────── */

/* No panel, no gradient, no border. Air, one line, and the button — the
   button is the only object on screen, which is the entire point of a call to
   action. When the app ships, the single button becomes the two store buttons
   in the same slot; .post-cta-actions is already a flex row so that drops in. */
.post-cta { margin: 82px 0 0; text-align: center; }
.post-cta h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.032em;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.18; color: var(--ink-fg);
  margin: 0 auto 14px; max-width: 20ch;
}
.post-cta p { margin: 0 auto 26px; max-width: 44ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-fg2); }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ──────────────────── KEEP READING ──────────────────── */

/* A vertical list built from exactly the same parts as /blog — square art, a
   sans title, the date underneath. The foot of a post should look like the page
   the reader came from, not like a separate "related content" component. Two
   4:3 tiles side by side with serif titles read as the latter. */
.post-related { margin: 82px 0 0; padding-top: 40px; border-top: 1px solid var(--rule); }
.post-related h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-fg2); margin: 0 0 26px;
}
.post-related-list { display: flex; flex-direction: column; gap: 28px; }

.post-related-item {
  display: grid; grid-template-columns: 148px 1fr; gap: 26px; align-items: center;
  color: var(--ink-fg); text-decoration: none;
}
.post-related-art {
  overflow: hidden; border-radius: var(--radius-md);
  background: var(--ink-2); aspect-ratio: 1 / 1;
}
.post-related-art img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.post-related-item:hover .post-related-art img { transform: scale(1.04); }

.post-related-text { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.post-related-title {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.018em;
  font-size: 21px; line-height: 1.3; transition: color .18s ease;
}
.post-related-item:hover .post-related-title { color: var(--moss-bright); }
.post-related-item time { font-size: 13.5px; color: var(--ink-fg2); }


/* =============================================================================
 * RESPONSIVE
 * ========================================================================== */

@media (max-width: 720px) {
  .blog-head { padding: calc(112px + env(safe-area-inset-top)) 0 40px; }
  .blog-body { padding-bottom: 90px; }
  /* Still side by side on a phone — stacking would make three posts a very long
     scroll. The square just shrinks. */
  .post-list { gap: 32px; }
  .post-item { grid-template-columns: 132px 1fr; gap: 20px; }
  .post-item-text { gap: 10px; }
  .post-item h2 { font-size: 19px; line-height: 1.3; }
  .post-item time { font-size: 13px; }

  .post-hero { padding-top: calc(108px + env(safe-area-inset-top)); padding-bottom: 32px; }
  .post-body { padding-bottom: 84px; }
  .post-standfirst { font-size: 18px; }
  .post-prose { font-size: 17.5px; }
  .post-answer { font-size: 19.5px; }
  .post-prose h2 { margin-top: 46px; }
  .post-prose blockquote { margin: 36px 0; padding-left: 0; }
  .post-toc { margin-bottom: 42px; }
  .post-related-list { gap: 22px; }
  .post-related-item { grid-template-columns: 104px 1fr; gap: 18px; }
  .post-related-text { gap: 7px; }
  .post-related-title { font-size: 17.5px; }
  .post-related-item time { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .post-item-art img, .post-related-art img { transition: none; }
  .post-item:hover .post-item-art img,
  .post-related-item:hover .post-related-art img { transform: none; }
}