/* guide.css: the nine guides on Brand's system (system.css), built to How it works' first screen and beside Function's
   guide (functionhealth.com/guides/mental-health-101), from Fathom Design's critique, 16 Oct 2026, change 4 of the
   resources section: the title at the display size (44px at 390, 86 at 1440, weight 300, the terra full stop), one quiet
   eyebrow in capitals and grey, one body size (17 on 1.65 at 390, 18 on 1.6 at 1440, 62 characters at most), the one
   action as a hairline and the terra pill (no card), "More reading" as hairline rows. Loaded after zaha.css and system.css
   on the guides only; the words are untouched. */

.z-light body { background: var(--z-bg); }
.z-light .nav-links .nav-cta { background: var(--z-action) !important; color: var(--z-on-action) !important; border-color: var(--z-action); }
.z-light .nav-links .nav-cta:hover { background: var(--z-action-hover) !important; color: var(--z-on-action) !important; }

/* the head: eyebrow, title, dek, read time, on a hairline */
.post-head { width: min(760px, 100% - 2 * var(--z-margin)); padding-top: clamp(136px, 112px + 5vw, 184px); padding-bottom: var(--z-gap-4); border-bottom: 1px solid var(--z-line); }
/* the guide's head in the panel (zaha.css §7b), the title centred in a 760px measure */
.post-head.z-hero { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-top: calc(env(safe-area-inset-top, 0px) + 124px); padding: clamp(44px, 4vw + 24px, 88px) clamp(20px, 4vw, 64px); border-bottom: 0; text-align: center; }
.post-head.z-hero > * { margin-inline: auto; max-width: 760px; }
.post-head.z-hero .post-dek { max-width: 30em; }
.post-head.z-hero .eyebrow { margin-inline: auto; } /* centred over the title at every width (visitor review, 17 Oct: it sat 150px left at 1440) */
.post-head .eyebrow { display: block; margin: 0 0 var(--z-gap-3); font: 600 12px/1.4 var(--z-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); background: none; padding: 0; border: 0; border-radius: 0; }
.post-head .eyebrow::before { content: none; }
.post-title { font: 300 clamp(2.75rem, 1.775rem + 4vw, 5.375rem)/0.98 var(--z-serif); letter-spacing: -0.025em; color: var(--z-ink); margin: 0; text-wrap: balance; }
.post-title .z-dot { margin-left: -0.05em; }
.post-dek { margin-top: var(--z-gap-3); font: 300 clamp(19px, 1rem + .6vw, 24px)/1.4 var(--z-serif); color: var(--z-ink-2); max-width: 30em; }
.post-meta { display: none; } /* the read time stays in the source but is not shown (the founder, 16 Oct: "we also dont need to mention how long of a read it is") */

/* the body: one size, one measure */
/* one centred column for the body, "Where Zaha comes in" and "More reading": the same width and left edge (visitor review, 17 Oct) */
.post-body, .more .wrap { width: min(600px, 100% - 2 * var(--z-margin)); margin-inline: auto; } /* 600px: about 62 characters of Figtree at 18px */
.post-body { padding-top: var(--z-gap-4); font: 400 clamp(17px, 1rem + .2vw, 18px)/1.65 var(--z-sans); color: var(--z-ink-2); }
@media (min-width: 900px) { .post-body { line-height: 1.6; } }
.post-body > * { max-width: none; }
.post-body a[href^="tel:"] { white-space: nowrap; } /* a phone number never breaks across lines */
.post-body h2 { font: 300 clamp(28px, 1.2rem + 1.4vw, 36px)/1.1 var(--z-serif); letter-spacing: -0.015em; color: var(--z-ink); }
.post-body li::marker { color: var(--z-ink-3); }
.post-body strong { color: var(--z-ink); }
.post-body p a, .post-body li a { color: var(--z-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body p a:hover, .post-body li a:hover { text-decoration-thickness: 2px; }
.post-body > .post-pull { border-left: 1px solid var(--z-line); font: 300 clamp(22px, 1.1rem + 1vw, 30px)/1.3 var(--z-serif); color: var(--z-ink); }

/* the one action: a hairline above, the terra pill, no card */
.post-body > .post-cta { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: var(--z-gap-4) 0 0; background: none; border: 0; border-top: 1px solid var(--z-line); border-radius: 0; font: var(--z-t-body); color: var(--z-ink-2); }
.post-cta .eyebrow { display: block; margin: 0 0 var(--z-gap-2); font: 600 12px/1.4 var(--z-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--z-ink-3); background: none; padding: 0; border: 0; }
.post-cta .eyebrow::before { content: none; }
.post-cta .btn { margin-top: var(--z-gap-3); display: inline-flex; align-items: center; justify-content: center; min-height: var(--z-action-h); padding: 0 25px; border-radius: var(--z-r-action); background: var(--z-action); color: var(--z-on-action); font: var(--z-t-strong); letter-spacing: 0; border: 1px solid var(--z-action); transition: background-color .2s ease; }
.post-cta .btn:hover { background: var(--z-action-hover); border-color: var(--z-action-hover); color: var(--z-on-action); transform: none; box-shadow: none; }

/* more reading: hairline rows, one terra moment on the page at most */
.more { background: var(--z-bg); padding-block: clamp(40px, 24px + 4vw, 88px); border-top: 0; }
.more-head { margin-bottom: var(--z-gap-3); }
.more-head h2 { font: 300 clamp(28px, 1.2rem + 1.4vw, 36px)/1.1 var(--z-serif); letter-spacing: -0.015em; color: var(--z-ink); }
.more-all { font: var(--z-t-body); font-weight: 400; color: var(--z-ink); text-decoration: underline; text-underline-offset: 3px; }
.more-all svg { display: none; }
.more .grid { display: block; }
.guide-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow eyebrow" "title meta" "line meta"; gap: 4px var(--z-gap-3); padding: var(--z-gap-3) 0; background: none; border: 0; border-top: 1px solid var(--z-hair); border-radius: 0; transition: none; }
.guide-card:last-child { border-bottom: 1px solid var(--z-hair); }
.guide-card .eyebrow { grid-area: eyebrow; font: var(--z-t-small); color: var(--z-ink-3); text-transform: none; letter-spacing: 0; background: none; padding: 0; border: 0; }
.guide-card .eyebrow::before { content: none; }
.guide-card h3 { grid-area: title; font: 400 20px/1.25 var(--z-serif); color: var(--z-ink); }
.guide-card p:not([class]) { grid-area: line; font: var(--z-t-body); color: var(--z-ink-2); }
.guide-card__meta { grid-area: meta; align-self: start; margin: 0; padding: 2px 0 0; font: var(--z-t-small); font-weight: 400; color: var(--z-ink-3); white-space: nowrap; }
.guide-card__meta svg, .guide-card__meta span { display: none; } /* no read time on the cards either */
@media (hover: hover) { .guide-card:hover { border-color: var(--z-hair); box-shadow: none; transform: none; } .guide-card:hover h3 a { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 560px) { .guide-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "line" "meta"; } }

/* the closing band keeps its dark ground; its button is the terra pill, bright on dark, as the system's dark action */
.close-band .btn-white { background: var(--z-terra-bright, #E89571); color: #1A1A1A; min-height: var(--z-action-h); padding: 0 25px; border-radius: var(--z-r-action); font: var(--z-t-strong); letter-spacing: 0; } /* the primary pill's size and type (system.css .z-action), bright on dark */
.close-band .btn-white:hover { background: #F0A586; color: #1A1A1A; }

/* every headline at 300 (Brand, guide sign-off, 16 Oct): the closing band too */
.z-light .close-band h2 { font-weight: 300; }