in the markup, and Round 14 (item 1) retags it to a
(see index.html) because a forty-word sentence marked as a section heading is wrong structurally, independent of how it looks. Sized down slightly to read clearly as a styled lead paragraph, not a heading that happens to be a
-- 19-20px/500, versus the H1's 28-36px/700 above and the plain body paragraph's 18px/400 below. Still Fraunces and still --body-text color, so the visual family resemblance to the rest of the page is unchanged; only the weight and size moved down a step to match its new, non-heading role. */ .hero-subtitle { /* Round 15 (item 2): reversal of Round 13/14's sizing-only fixes -- those kept the tagline in Fraunces (the heading font), which is why it kept reading as a second headline regardless of size/weight tuning. The serif itself was the problem. Switched to Karla (the body font) at 18px/700, matching the lead-in style already used on the resource articles (e.g. "Feeling restless and edgy..." on a-brief-explanation-of-ifs-and-parts) -- same body text color, same line-height as body copy. Still a
, not a heading (see Round 14 item 1); wording unchanged. margin-top removed -- this element is no longer measured against the H1 on its own (see the Round 15 item 3 sitewide H1-gap rule below, which targets the .two-col wrapper this paragraph sits inside instead). */ font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; line-height: var(--lh-body); color: var(--body-text); } @media (min-width: 48em) { .hero-title { font-size: 2.25rem; } } .hero-cta { padding-top: 1.5rem; justify-content: center; } /* ---- Homepage hero photo (item 1, round 6) -------------------------------- A close, warm glimpse of the therapy room -- a portrait crop -- sitting centered below the hero's CTA, before the "Who is Karon Ng?" band. Deliberately smaller/framed rather than full-bleed, per the "close-detail hero shot" brief (distinct from .photo-break's full-width strip further down the page). -------------------------------------------------------------------- */ .hero-photo { margin: 2.25rem auto 0; max-width: 300px; } .hero-photo img { width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 28px rgba(44, 44, 42, 0.14); } @media (min-width: 48em) { .hero-photo { max-width: 360px; } } .page-404 { padding-top: 4rem; padding-bottom: 6rem; } /* Round 22 (item 3, K 8 Oct 2026): the 404 page now has the standard footer. When the page is shorter than the window, the footer is pinned to the bottom, so there is no empty cream band under it on tall screens. Scoped to the 404 page only (class on its
), so no other page can change. width: 100% keeps the main area exactly as wide as it was as a plain block (in a flex column, its auto side margins would otherwise shrink it to fit its content). */ .page-404-body { display: flex; flex-direction: column; min-height: 100vh; } .page-404-body > * { flex-shrink: 0; } .page-404-body > main { flex: 1 0 auto; width: 100%; } /* .photo-break rules removed (Round 9, item 3) -- the succulents strip is gone from home.html; the room photo stays in the hero via .two-col-photo instead. */ /* ---- Top banner (capacity/closure banner) -------------------------------- Light sage-tinted background with a subtle bottom border, not a solid dark bar. Content, on/off, and resume-date are config-driven -- see data/banner-config.json and partials/top-banner.html. -------------------------------------------------------------------- */ .top-banner { background: var(--band-tint); border-bottom: 1px solid #C9DBCE; color: var(--charcoal); text-align: center; padding: 0.6em 1rem; font-size: 0.95rem; } .top-banner p { margin: 0; max-width: none; } .top-banner a { color: var(--terracotta-text); } /* Round 20 (item 1): the banner's "Contact us" link keeps exactly its Round 19 hover/focus look (stays terracotta, underline thickens to 0.12em). Without this line it would have lost all hover feedback: the rule above out-ranks the new sitewide charcoal hover by source order, and the sitewide rule no longer thickens the underline. */ /* Round 21 (item 4, K 7 Oct 2026): now behaves like every other body link -- terracotta to charcoal on hover and focus, no underline thickening. Still needs its own rule: .top-banner a (above) would otherwise out-rank the sitewide a:hover colour. Focus outline unchanged (sitewide a:focus-visible). */ .top-banner a:hover, .top-banner a:focus-visible { color: var(--charcoal); } /* Round 21 (item 7): bigger tap area, no visual change. Vertical padding on an inline link grows its clickable box (18px -> 24px tall) without changing the line height, the wrapping or where the text sits. */ .top-banner a { padding: 3px 0; } /* Round 22 (item 4a): keep "Contact us" on one line -- at about 445-479px it used to split into "Contact" / "us". The whole link now moves to the next line instead. Hover/focus colours and the 24px tap area are unchanged. */ .top-banner a { white-space: nowrap; } /* ---- Bottom buttons (the Contact Us / Facebook link row) ------------------ */ .bottom-buttons { text-align: center; padding: 2.5rem 1.25rem 1rem; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; /* Round 13 (item 2): flex defaults align-items to stretch, so with the Contact Us pill (53px tall, via padding) and the plain Facebook link (34px tall) sharing this row, both were stretched/pinned to the same top edge, leaving the button's own text sitting visibly lower than Facebook's. Center on the cross-axis instead so both sit on a shared visual center regardless of their own height. */ align-items: center; } .bottom-buttons p { margin: 0; max-width: none; } /* ---- Featured-article / "Blog highlight" module --------------------------- Round 7: reverted to a real (see build.py's render_featured_article)
that matches every other section heading in size/font/color -- round 5's
separate muted-label treatment is gone. The heading is centered by the
existing :first-child rule (it's the first child of its own .page-inner);
.featured-link is centered by the sitewide `.page-inner > p` rule. Only
the link's own size is bumped slightly for a bit of presence.
-------------------------------------------------------------------- */
.featured-link {
font-size: 1.15rem;
}
/* Round 6: removed font-weight:600 -- link now uses the sitewide default
link styling (color + underline only), no bold. */
/* ---- FAQ accordion ---------------------------------------------------
Native / -- content stays in the DOM (readable by
search engines) even while visually collapsed, no JS required.
Round 5: the +/- indicator now sits right after the question text with
fixed, modest spacing, rather than pinned to the far right edge of the
row -- summary is a flex row instead of relying on absolute
positioning.
-------------------------------------------------------------------- */
/* Round 15 revision #2 (items 1+2): .faq-item spanned the full .page
content width (no max-width of its own), while its own answer
(and every other page's body text, since item A) is capped to
content-max and centered -- so the accordion rows read wider than a
normal paragraph, and any sibling
that follows the list (the
closing "if you have more questions" note) sits centered in its own
narrower, indented box, jogging right of the accordion above it by
the same 61px/194px (1100px/1440px) gap item A fixed for h1-vs-body
text. Root-caused the same way as item A: cap .faq-item itself to
content-max and center it, so the whole accordion (questions,
answers, and the note after it) share one consistent reading-column
width and left edge -- confirmed by rendering, 0px jog remains. */
.faq-item {
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #E4E0D4;
padding: 0.4rem 0;
}
/* Item 2: the closing note directly after the FAQ list had no top
margin of its own, so it sat flush against the last item's bottom
border with 0px gap -- confirmed by rendering. Same 32px pattern as
the h1-to-content rule above. */
.faq-item + p {
margin-top: 2rem; /* 32px */
}
.faq-item summary {
display: flex;
align-items: baseline;
font-family: var(--font-heading);
color: var(--heading);
font-weight: 700;
font-size: 1.15rem;
cursor: pointer;
padding: 0.7em 0;
list-style: none;
}
@media (min-width: 48em) {
.faq-item summary { font-size: 1.3rem; }
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
margin-left: 0.6em;
font-size: 1.2em;
font-weight: 400;
color: var(--terracotta-text);
flex: none;
}
.faq-item[open] summary::after {
content: "\2212"; /* − */
}
/* Round 23 (item 3, K 9 Oct 2026): below 900px every "+" / "−" sits at
the right edge, so one-line and wrapped questions line up. At 900px and
wider nothing changes: the sign stays right after the question. */
@media (max-width: 56.24em) {
.faq-item summary { justify-content: space-between; }
}
.faq-item summary:focus-visible {
outline: 2px solid var(--terracotta-text);
outline-offset: 2px;
}
.faq-item .faq-answer {
padding: 0 0 1.2em;
}
/* Round 15 revision (item A follow-up): the sitewide p centering fix
above centers this paragraph within .faq-item's own box -- but
.faq-item spans the FULL page width (it's not content-max-capped, see
.faq-item's own rule further up), so the centered answer text ends up
indented to the right of its own question, no longer starting flush
under the summary. Answers should stay flush-left with their
question, not centered within the wider accordion row -- confirmed
by rendering with items expanded, which is what surfaced this.
Corrected selector: the actual markup has no .faq-answer wrapper --
the answer
elements are direct children of .faq-item itself,
right after -- .faq-item .faq-answer p never matched
anything real, so the first attempt at this override was silently a
no-op (confirmed by re-rendering: the indent was still there). */
.faq-item > p {
margin-left: 0;
margin-right: 0;
}
.faq-item > p:last-child { margin-bottom: 0; }
/* Round 22 (item 2, K 8 Oct 2026): an OPEN item gets more bottom space, so
the answer's last line sits about the same distance above the divider as
the answer's paragraphs sit from each other (was 7px). Replaces the item's
0.4rem bottom padding while open; closed items are unchanged. */
.faq-item[open] { padding-bottom: 1.4rem; }
/* ---- Footer -------------------------------------------------------------
Muted sage-grey (not near-black), clearly distinct from the cream body
without being visually heavy. Round 5: whole block left-aligned (was
centered) -- copyright, address, crisis heading, bullets, and the
Privacy Policy link all read as one left-aligned column now. The
crisis-support list is also narrower (see .footer-crisis-list) so its
bullet lines wrap more evenly and don't leave a short orphaned second
line.
-------------------------------------------------------------------- */
footer {
background: var(--footer-bg);
color: var(--charcoal);
/* Round 8 (item 1): the Round 7 calc() padding only matched the shared
content column's position at the one viewport width it was checked
against -- it wasn't actually the same container, so it drifted at
other widths. Footer content now lives inside a real .page-inner div
(see partials/footer.html), which is the exact same class/rule every
other section uses for its max-width + centering + gutter, so it
tracks correctly at every breakpoint, not just one. footer itself
keeps the full-bleed sage background and only vertical padding here;
.page-inner supplies the horizontal padding. */
padding: 2.5rem 0;
/* Round 18 (item 1): was 3rem -- 48px of cream body background between
the last band and the footer, present since Round 8 and invisible
the whole time because the last homepage section was always cream.
Round 16 put a tinted band last, which turned that gap into a
visible cream stripe between the tinted band and the sage footer,
reading as the band floating rather than sitting flush above the
footer. Closed to 0 -- paired with squaring the last band's bottom
corners below (main .band:last-child), since a curved bottom edge
with no gap lets a wedge of cream show through at the outer edges,
putting a third colour into what should be a clean two-colour seam.
K considered and rejected keeping the curve via a footer-overlap
(negative margin sized to the deepest possible curve, a stacking
context, compensating padding, and page-scoping so it doesn't ride
up over content on pages that don't end in a band) -- squaring is
one declaration with nothing else that has to stay in step with it. */
margin-top: 0;
text-align: left;
font-size: 0.95rem;
}
/* Round 21 (item 3): the Round 18 "main .band:last-child" rule (squared
the last band's bottom corners) was removed -- every band edge is now
straight, so it no longer had anything to do. */
/* The whole footer content block hugs the left edge (padding from
footer itself) rather than sitting as a centered column -- max-width
keeps line lengths reasonable, but there's no margin:auto centering it
any more. */
/* Round 15 revision #2 (item 5): was max-width: 44rem with no centering
-- a hardcoded value close to but not equal to --content-max (46rem),
and deliberately flush-left against .page-inner's own left edge
(Round 5's left-alignment decision, made before item A existed).
Item A then centered every other page's body-text column within
.page, so the footer's still-flush-left block drifted out of
alignment with it by the same 61px/194px (1100px/1440px) gap --
confirmed by rendering. Root-caused the same way as item A and the
FAQ fix above: share the exact --content-max value (not a separate
44rem) and center the box with margin:auto, so its left edge lands
on the same point as the body-text column above it in the page.
text-align stays left (inherited from `footer` itself, untouched)
-- only the block's own position moves, the text inside it does not
become centered. */
/* Round 18 (item 4): max-width changed from var(--content-max) to none.
Deliberate, not a reversal of Round 17 item 1's centering fix -- this
is a different axis. The nav sits just outside the page container's
own edge (Round 17 item 4), the reading column sits inside it
(Round 18 item 2/3), and the footer now sits ON the container edge
itself -- top and bottom frame the page, content sits within the
frame. The auto side margins from Round 17 are kept here on purpose:
they simply have no visible effect once the box fills the container
edge to edge, and removing them would just be churn. */
footer p, footer .footer-crisis-list {
max-width: none;
margin-left: auto;
margin-right: auto;
}
footer p { margin: 0 auto; } /* Round 15 revision #2 (item 5): was `margin: 0` (all sides), which came after the new max-width+margin:auto centering rule above and, at equal specificity (footer p vs footer p), won by source order -- silently zeroing the auto centering right back out. Same pitfall item A hit with the sitewide `p { margin: 0 0 1.2em }` rule; same fix: keep the shorthand but keep auto on the sides that need to stay auto. */
footer .footer-copyright { margin-bottom: 0.15em; }
footer .footer-address { margin-bottom: 1.1em; }
footer .footer-crisis-label { margin-bottom: 0.4em; font-weight: 600; }
/* Round 18 (item 5): above 81.25em (1300px) -- measured: the copyright
and address lines together need about 1010px, which fits on one line
at 1300px viewport width and wraps mid-address just below it -- the
two lines run together with a plain space between them, gated to this
breakpoint only, everything below stays stacked exactly as before.
No separator glyph: the full stop after "All rights reserved." already
marks the boundary between the two, and a bullet/dash would be new
copy that wasn't asked for. Going inline collapses footer-address's
own margin-bottom (the vertical gap before "For mental health crisis
support:"), so that gap is restored explicitly on footer-crisis-label
instead, in the same query. */
@media (min-width: 81.25em) {
.footer-copyright, .footer-address { display: inline; }
.footer-copyright::after { content: " "; }
.footer-crisis-label { margin-top: 1.1em; }
}
/* Round 9 (item 1): removed the max-width: 24rem that lived here since
Round 6 (back when the crisis list had no other width constraint and
needed one of its own to control its wrap). That rule was never taken
out when the Round 8 container fix landed -- so it sat on top of
everything else, silently re-narrowing just this one element by ~165px
versus the address line above it. Now shares the same --content-max
width as footer p (see the shared rule above) instead of carrying its
own separate value; text-wrap: pretty is kept for even wrapping at
that width. (Comment corrected Round 17: this stopped being a
hardcoded "44rem" two revisions before this note was written -- Round
15 revision #2 item 5 moved both footer p and this selector onto the
shared --content-max variable instead.)
Round 17 (item 1): margin was `0 0 1.1em` -- zero left/right, not
auto -- which sat after the shared max-width+margin:auto centering
rule above and, at equal specificity (footer .footer-crisis-list vs
footer .footer-crisis-list), won by source order and silently zeroed
the centering back out. Exactly the same pitfall as footer p hit in
Round 15 revision #2 item 5, on the identical line pattern twelve
lines above this one -- same fix: keep the shorthand, keep auto on
the sides that need to stay auto. Confirmed by rendering: copyright/
address/crisis-label/Privacy-Policy-link and the crisis list itself
now share one left edge (352px at 1440px, 182px at 1100px), where the
list previously sat at 158.4px/121px -- flush against .page-inner's
own edge instead of centered with everything else in the footer. */
footer .footer-crisis-list {
list-style: none;
margin: 0 auto 1.1em;
padding: 0;
text-align: left;
font-size: 0.95rem; /* Round 21 (item 5): was 0.8rem (12.8px); now the footer's own size, 15.2px */
line-height: 1.6;
text-wrap: pretty;
}
/* Round 18 (item 4): max-width: none added -- these elements were
otherwise still caught by the sitewide `p, li, blockquote { max-width:
var(--content-max) }` rule (a real match despite footer .footer-crisis-list
itself now being max-width: none above -- that rule targets the list
box, not its individual items), which would have kept each bullet
line capped to the old reading measure even after the list itself
went full-width. */
footer .footer-crisis-list li {
max-width: none;
margin-bottom: 0.6em;
margin-left: 0;
margin-right: 0;
padding-left: 1.1em;
position: relative;
}
footer .footer-crisis-list li::before {
content: "\2022";
position: absolute;
left: 0;
}
footer .footer-privacy { margin-top: 0.4em; margin-bottom: 0; font-size: 0.85rem; }
/* Round 21 (item 7): bigger tap area for "Privacy Policy", no visual change
-- same inline-padding approach as the top banner link (15px -> 25px). */
footer .footer-privacy a { padding: 5px 0; }
footer a { color: var(--charcoal); text-decoration: underline; }
/* Round 19 (item 4, K 7 Oct 2026): footer links no longer turn terracotta
on hover -- --terracotta-text on the sage footer is only 2.25:1. They
keep --charcoal (5.04:1 on the footer) and the hover cue is the thicker
underline, same thickness as every other link. */
footer a:hover, footer a:focus-visible { color: var(--charcoal); text-decoration-thickness: 0.12em; }
/* ---- Images in article body ---------------------------------------------
Constrained to the same reading measure as the text so a photo doesn't
suddenly balloon wider than the paragraph above it. Doesn't apply to
.float-left/.float-right, which set their own width.
-------------------------------------------------------------------- */
/* Round 17 (item 6): the Contact page's Google Form iframe had no
width cap of its own -- it spans .page's full content width (1123px
at 1440px, measured) while the paragraph above it is capped to
--content-max (736px), landing the iframe and the page's own body
text on two different edges. Capped to the shared --content-max
variable (not a fixed pixel value) so it automatically follows
whatever Round 18 does to that variable, and centered the same way as
every other capped element on the page. The HTML's own width="100%"
attribute is overridden by this CSS width, same as any inline
presentational attribute.
Flagging honestly, per the standing rule to verify by rendering, not
assumption: this fix could NOT be visually verified. Neither this
sandbox nor the Mac's own rendering has live internet access, so the
Google Form iframe renders blank in both -- there's no way from here
to see how the form's own internal layout responds to a narrower
frame. Built as specified; needs an actual look on the deployed
staging site before anyone calls it fine. */
.page iframe {
display: block;
max-width: var(--content-max);
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Round 19 (item 3): Contact form panel + measured heights.
- margin-bottom 32px (was 0, so the Privacy Policy link sat against the
frame), matching the 32px above it.
- Visible panel: white, soft edge, the site's existing 0.75rem radius,
so the much shorter post-submit "thank you" state reads as a panel
rather than a broken page. The edge is a 1px box-shadow ring rather
than a border on purpose: a border would take 2px off the form's
width, and the form's own height steps change with width.
- Round 20 (item 6): allowance raised from ~30px to ~100px over the
measured heights below. Those were measured signed out of Google; K
found on her phone (~393px, signed in) that the form adds four account
lines (email, Switch account, Not shared, draft-saved icon), ~50px,
which pushed it to/past the Round 19 frame height.
- Heights: the new form's full content height was measured in a real
browser at a range of frame widths (Round 19 report has the table),
then each range below gets the tallest measurement in its range plus
~100px allowance (Round 20; was ~30px), so the frame never shows its own scrollbar. The
frame is min(900px, 78% of the viewport) wide at every size, so each
viewport range maps to a known frame-width range. Mobile-first. */
.page iframe.contact-form-frame {
margin-top: 2rem;
margin-bottom: 2rem;
background: var(--white);
border: 0;
border-radius: 0.75rem;
box-shadow: 0 0 0 1px rgba(44, 44, 42, 0.14);
height: 1380px; /* < 320px viewport (frame < 250px): measured up to 1276px at 218px */
}
@media (min-width: 20em) { /* 320-359px viewport, frame 250-280px: measured max 1123px */
.page iframe.contact-form-frame { height: 1225px; }
}
@media (min-width: 22.5em) { /* 360-479px, frame 281-373px: measured max 1051px */
.page iframe.contact-form-frame { height: 1155px; }
}
@media (min-width: 30em) { /* 480-767px, frame 374-598px: measured max 992px */
.page iframe.contact-form-frame { height: 1095px; }
}
@media (min-width: 48em) { /* 768-899px, frame 599-701px: measured max 972px */
.page iframe.contact-form-frame { height: 1075px; }
}
@media (min-width: 56.25em) { /* 900px+, frame 702-900px: measured 919px */
.page iframe.contact-form-frame { height: 1020px; }
}
.page img {
/* Round 14: fixed a pre-existing sitewide mobile bug found while
rendering this round's item 7 at mobile width (standing
instruction: verify by rendering) -- max-width: 736px alone doesn't
clamp to the viewport/container on a narrow screen (736px > most
phone widths), and the base `img { max-width: 100% }` reset loses
the cascade tie here because `.page img` (one class + a tag) is
more specific than a bare `img` (just a tag). Confirmed this was
already causing horizontal scroll on mobile for any sufficiently
large existing article image, not just the one touched this round
-- e.g. protector-parts-in-trauma.jpg (700x700, untouched by this
round) was already overflowing to a 743px page width on a 390px
viewport before this fix. min(...) keeps the same 736px reading-
width cap on desktop (where the container is always wider than
736px, so min() still resolves to 736px, unchanged) while also
respecting 100% of the container on narrow screens, where 100% is
now the binding constraint. */
max-width: min(var(--content-max), 100%);
/* Round 17 (item 5): 1.6em (29px) read as tight against the
surrounding text -- increased to 2.6em (47px). max-width rule above
is untouched on purpose; that's Round 18 territory (widths). */
margin: 2.6em auto;
border-radius: 0.5rem;
}
/* Round 14 (item 7): the replacement behind-every-feeling image is a
square 1080x1080 source (the quote/artist-credit text is baked into
the image itself, in the bottom ~24%, so it's used uncropped -- 1:1,
no object-fit crop needed or applied). Without this override it would
render at the generic .page img cap (see above), wider than the
400-700px range the other article images use and wider than actually
needed for a 1080px source at roughly 2x display density. Capped to
600px display width here (1080px source = 1.8x, effectively the
"roughly twice" retina density asked for) -- sits centrally within
the 400-700px range the other article photos use. Qualified with the
.page ancestor (two classes) rather than left as a single class, so
it reliably wins the specificity tie against .page img (one class +
a tag) regardless of file order -- the same lesson from Round 13's
photo-alignment bug, applied up front this time instead of found the
hard way again. On mobile, min(600px, 100%) in practice just means
100% (matching every other article image's mobile behaviour) since
600px alone would still be wider than a phone screen. */
.page .article-photo-square {
max-width: min(37.5rem, 100%);
}
/* ---- Curated link lists (Resources, Therapies) --------------------------
Round 13 (item 6): built for Resources -- was a plain -- bullet
markers plus the sitewide always-on link underline (a deliberate rule
elsewhere, for links inside body prose) made it read like a reference/
citation list rather than the deliberately-chosen collection of
articles it actually is. Bullets and per-item underlines removed;
more vertical room per entry via padding (not the sitewide li
margin-bottom, which doesn't give a click target); a divider line
between entries in place of the bullet as the visual separator;
underline + a soft background tint + a small indent shift on
hover/focus, so the interaction is still clearly signalled -- not
relying on color alone -- without it being visible at rest.
Round 14 (item 4): renamed from .resource-list to the generic
.link-list and applied to Therapies too -- the two signposting pages
(Resources, Therapies) now share one visual treatment instead of
Therapies still showing raw bulleted/underlined links. Order, count
and copy untouched on both pages -- restyled only. */
.link-list {
list-style: none;
margin: 1.5em 0;
padding: 0;
}
.link-list li {
margin-bottom: 0;
border-bottom: 1px solid #DDD8CC;
}
/* Round 15 (item 9): removed the :last-child exception -- Resources
(14 entries) already reads as "a divider under every entry" since
the missing one at the very bottom blends into the page end, but
Therapies only has 2 entries, so the same missing divider under its
2nd (last) link was obviously asymmetric: a divider after the 1st
link, none after the 2nd. Every entry on both lists now gets its
divider, including the last one on each page. */
.link-list a {
display: block;
padding: 0.95em 0.25em;
text-decoration: none;
transition: background-color 0.15s ease;
}
/* Round 20 (item 3): the hover/focus padding-left shift (0.25em -> 0.6em)
is gone -- at 390px it narrowed the line enough to re-wrap "Behind every
feeling is likely a need" from one line to two on tap. Tint background
and underline kept; padding-left dropped from the transition too. */
.link-list a:hover,
.link-list a:focus-visible {
text-decoration: underline;
background: var(--band-tint);
}
/* ---- Skip link (Round 21, item 6) -----------------------------------------
"Skip to main content": the first thing a keyboard user tabs to on every
page (inserted by build.py, see partials/skip-link.html). Kept off-screen
(not display:none, so it stays focusable) until it has focus; then it
appears top-left with a cream background, charcoal bold text and the
site's usual 2px terracotta focus outline. Enter jumps to .
-------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: -9999px;
top: 0.75rem;
z-index: 1000;
padding: 0.5em 1em;
background: var(--cream);
color: var(--charcoal);
font-weight: 700;
border-radius: 0.375rem;
}
.skip-link:focus {
left: 0.75rem;
color: var(--charcoal);
outline: 2px solid var(--terracotta-text);
outline-offset: 2px;
}
/* takes focus when the skip link is used (tabindex="-1", so it is
never a Tab stop itself). It is a container, not a control, so it gets
no focus outline of its own. */
main:focus { outline: none; }
/* Round 22 (item 4b): long links in the page content (e.g. the DOI address
on the study article) may wrap instead of pushing the page sideways on
small phones. break-word, not anywhere, so it doesn't change how grid
columns size. Only affects links that wouldn't otherwise fit.
Round 23 (item 1): the DOI is now plain text, not a link, so it sits in
and gets the same rule. Scoped to the DOI only, not
to all paragraphs: "main p" was tried and made the closing full stop
after the email address drop onto its own line at 320px (Contact and
Privacy Policy), where the address overhangs its column by 0.4px. */
main a, main .doi { overflow-wrap: break-word; }
-- content stays in the DOM (readable by
search engines) even while visually collapsed, no JS required.
Round 5: the +/- indicator now sits right after the question text with
fixed, modest spacing, rather than pinned to the far right edge of the
row -- summary is a flex row instead of relying on absolute
positioning.
-------------------------------------------------------------------- */
/* Round 15 revision #2 (items 1+2): .faq-item spanned the full .page
content width (no max-width of its own), while its own answer
(and every other page's body text, since item A) is capped to
content-max and centered -- so the accordion rows read wider than a
normal paragraph, and any sibling
that follows the list (the
closing "if you have more questions" note) sits centered in its own
narrower, indented box, jogging right of the accordion above it by
the same 61px/194px (1100px/1440px) gap item A fixed for h1-vs-body
text. Root-caused the same way as item A: cap .faq-item itself to
content-max and center it, so the whole accordion (questions,
answers, and the note after it) share one consistent reading-column
width and left edge -- confirmed by rendering, 0px jog remains. */
.faq-item {
max-width: var(--content-max);
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid #E4E0D4;
padding: 0.4rem 0;
}
/* Item 2: the closing note directly after the FAQ list had no top
margin of its own, so it sat flush against the last item's bottom
border with 0px gap -- confirmed by rendering. Same 32px pattern as
the h1-to-content rule above. */
.faq-item + p {
margin-top: 2rem; /* 32px */
}
.faq-item summary {
display: flex;
align-items: baseline;
font-family: var(--font-heading);
color: var(--heading);
font-weight: 700;
font-size: 1.15rem;
cursor: pointer;
padding: 0.7em 0;
list-style: none;
}
@media (min-width: 48em) {
.faq-item summary { font-size: 1.3rem; }
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
margin-left: 0.6em;
font-size: 1.2em;
font-weight: 400;
color: var(--terracotta-text);
flex: none;
}
.faq-item[open] summary::after {
content: "\2212"; /* − */
}
/* Round 23 (item 3, K 9 Oct 2026): below 900px every "+" / "−" sits at
the right edge, so one-line and wrapped questions line up. At 900px and
wider nothing changes: the sign stays right after the question. */
@media (max-width: 56.24em) {
.faq-item summary { justify-content: space-between; }
}
.faq-item summary:focus-visible {
outline: 2px solid var(--terracotta-text);
outline-offset: 2px;
}
.faq-item .faq-answer {
padding: 0 0 1.2em;
}
/* Round 15 revision (item A follow-up): the sitewide p centering fix
above centers this paragraph within .faq-item's own box -- but
.faq-item spans the FULL page width (it's not content-max-capped, see
.faq-item's own rule further up), so the centered answer text ends up
indented to the right of its own question, no longer starting flush
under the summary. Answers should stay flush-left with their
question, not centered within the wider accordion row -- confirmed
by rendering with items expanded, which is what surfaced this.
Corrected selector: the actual markup has no .faq-answer wrapper --
the answer
elements are direct children of .faq-item itself,
right after -- .faq-item .faq-answer p never matched
anything real, so the first attempt at this override was silently a
no-op (confirmed by re-rendering: the indent was still there). */
.faq-item > p {
margin-left: 0;
margin-right: 0;
}
.faq-item > p:last-child { margin-bottom: 0; }
/* Round 22 (item 2, K 8 Oct 2026): an OPEN item gets more bottom space, so
the answer's last line sits about the same distance above the divider as
the answer's paragraphs sit from each other (was 7px). Replaces the item's
0.4rem bottom padding while open; closed items are unchanged. */
.faq-item[open] { padding-bottom: 1.4rem; }
/* ---- Footer -------------------------------------------------------------
Muted sage-grey (not near-black), clearly distinct from the cream body
without being visually heavy. Round 5: whole block left-aligned (was
centered) -- copyright, address, crisis heading, bullets, and the
Privacy Policy link all read as one left-aligned column now. The
crisis-support list is also narrower (see .footer-crisis-list) so its
bullet lines wrap more evenly and don't leave a short orphaned second
line.
-------------------------------------------------------------------- */
footer {
background: var(--footer-bg);
color: var(--charcoal);
/* Round 8 (item 1): the Round 7 calc() padding only matched the shared
content column's position at the one viewport width it was checked
against -- it wasn't actually the same container, so it drifted at
other widths. Footer content now lives inside a real .page-inner div
(see partials/footer.html), which is the exact same class/rule every
other section uses for its max-width + centering + gutter, so it
tracks correctly at every breakpoint, not just one. footer itself
keeps the full-bleed sage background and only vertical padding here;
.page-inner supplies the horizontal padding. */
padding: 2.5rem 0;
/* Round 18 (item 1): was 3rem -- 48px of cream body background between
the last band and the footer, present since Round 8 and invisible
the whole time because the last homepage section was always cream.
Round 16 put a tinted band last, which turned that gap into a
visible cream stripe between the tinted band and the sage footer,
reading as the band floating rather than sitting flush above the
footer. Closed to 0 -- paired with squaring the last band's bottom
corners below (main .band:last-child), since a curved bottom edge
with no gap lets a wedge of cream show through at the outer edges,
putting a third colour into what should be a clean two-colour seam.
K considered and rejected keeping the curve via a footer-overlap
(negative margin sized to the deepest possible curve, a stacking
context, compensating padding, and page-scoping so it doesn't ride
up over content on pages that don't end in a band) -- squaring is
one declaration with nothing else that has to stay in step with it. */
margin-top: 0;
text-align: left;
font-size: 0.95rem;
}
/* Round 21 (item 3): the Round 18 "main .band:last-child" rule (squared
the last band's bottom corners) was removed -- every band edge is now
straight, so it no longer had anything to do. */
/* The whole footer content block hugs the left edge (padding from
footer itself) rather than sitting as a centered column -- max-width
keeps line lengths reasonable, but there's no margin:auto centering it
any more. */
/* Round 15 revision #2 (item 5): was max-width: 44rem with no centering
-- a hardcoded value close to but not equal to --content-max (46rem),
and deliberately flush-left against .page-inner's own left edge
(Round 5's left-alignment decision, made before item A existed).
Item A then centered every other page's body-text column within
.page, so the footer's still-flush-left block drifted out of
alignment with it by the same 61px/194px (1100px/1440px) gap --
confirmed by rendering. Root-caused the same way as item A and the
FAQ fix above: share the exact --content-max value (not a separate
44rem) and center the box with margin:auto, so its left edge lands
on the same point as the body-text column above it in the page.
text-align stays left (inherited from `footer` itself, untouched)
-- only the block's own position moves, the text inside it does not
become centered. */
/* Round 18 (item 4): max-width changed from var(--content-max) to none.
Deliberate, not a reversal of Round 17 item 1's centering fix -- this
is a different axis. The nav sits just outside the page container's
own edge (Round 17 item 4), the reading column sits inside it
(Round 18 item 2/3), and the footer now sits ON the container edge
itself -- top and bottom frame the page, content sits within the
frame. The auto side margins from Round 17 are kept here on purpose:
they simply have no visible effect once the box fills the container
edge to edge, and removing them would just be churn. */
footer p, footer .footer-crisis-list {
max-width: none;
margin-left: auto;
margin-right: auto;
}
footer p { margin: 0 auto; } /* Round 15 revision #2 (item 5): was `margin: 0` (all sides), which came after the new max-width+margin:auto centering rule above and, at equal specificity (footer p vs footer p), won by source order -- silently zeroing the auto centering right back out. Same pitfall item A hit with the sitewide `p { margin: 0 0 1.2em }` rule; same fix: keep the shorthand but keep auto on the sides that need to stay auto. */
footer .footer-copyright { margin-bottom: 0.15em; }
footer .footer-address { margin-bottom: 1.1em; }
footer .footer-crisis-label { margin-bottom: 0.4em; font-weight: 600; }
/* Round 18 (item 5): above 81.25em (1300px) -- measured: the copyright
and address lines together need about 1010px, which fits on one line
at 1300px viewport width and wraps mid-address just below it -- the
two lines run together with a plain space between them, gated to this
breakpoint only, everything below stays stacked exactly as before.
No separator glyph: the full stop after "All rights reserved." already
marks the boundary between the two, and a bullet/dash would be new
copy that wasn't asked for. Going inline collapses footer-address's
own margin-bottom (the vertical gap before "For mental health crisis
support:"), so that gap is restored explicitly on footer-crisis-label
instead, in the same query. */
@media (min-width: 81.25em) {
.footer-copyright, .footer-address { display: inline; }
.footer-copyright::after { content: " "; }
.footer-crisis-label { margin-top: 1.1em; }
}
/* Round 9 (item 1): removed the max-width: 24rem that lived here since
Round 6 (back when the crisis list had no other width constraint and
needed one of its own to control its wrap). That rule was never taken
out when the Round 8 container fix landed -- so it sat on top of
everything else, silently re-narrowing just this one element by ~165px
versus the address line above it. Now shares the same --content-max
width as footer p (see the shared rule above) instead of carrying its
own separate value; text-wrap: pretty is kept for even wrapping at
that width. (Comment corrected Round 17: this stopped being a
hardcoded "44rem" two revisions before this note was written -- Round
15 revision #2 item 5 moved both footer p and this selector onto the
shared --content-max variable instead.)
Round 17 (item 1): margin was `0 0 1.1em` -- zero left/right, not
auto -- which sat after the shared max-width+margin:auto centering
rule above and, at equal specificity (footer .footer-crisis-list vs
footer .footer-crisis-list), won by source order and silently zeroed
the centering back out. Exactly the same pitfall as footer p hit in
Round 15 revision #2 item 5, on the identical line pattern twelve
lines above this one -- same fix: keep the shorthand, keep auto on
the sides that need to stay auto. Confirmed by rendering: copyright/
address/crisis-label/Privacy-Policy-link and the crisis list itself
now share one left edge (352px at 1440px, 182px at 1100px), where the
list previously sat at 158.4px/121px -- flush against .page-inner's
own edge instead of centered with everything else in the footer. */
footer .footer-crisis-list {
list-style: none;
margin: 0 auto 1.1em;
padding: 0;
text-align: left;
font-size: 0.95rem; /* Round 21 (item 5): was 0.8rem (12.8px); now the footer's own size, 15.2px */
line-height: 1.6;
text-wrap: pretty;
}
/* Round 18 (item 4): max-width: none added -- these elements were
otherwise still caught by the sitewide `p, li, blockquote { max-width:
var(--content-max) }` rule (a real match despite footer .footer-crisis-list
itself now being max-width: none above -- that rule targets the list
box, not its individual items), which would have kept each bullet
line capped to the old reading measure even after the list itself
went full-width. */
footer .footer-crisis-list li {
max-width: none;
margin-bottom: 0.6em;
margin-left: 0;
margin-right: 0;
padding-left: 1.1em;
position: relative;
}
footer .footer-crisis-list li::before {
content: "\2022";
position: absolute;
left: 0;
}
footer .footer-privacy { margin-top: 0.4em; margin-bottom: 0; font-size: 0.85rem; }
/* Round 21 (item 7): bigger tap area for "Privacy Policy", no visual change
-- same inline-padding approach as the top banner link (15px -> 25px). */
footer .footer-privacy a { padding: 5px 0; }
footer a { color: var(--charcoal); text-decoration: underline; }
/* Round 19 (item 4, K 7 Oct 2026): footer links no longer turn terracotta
on hover -- --terracotta-text on the sage footer is only 2.25:1. They
keep --charcoal (5.04:1 on the footer) and the hover cue is the thicker
underline, same thickness as every other link. */
footer a:hover, footer a:focus-visible { color: var(--charcoal); text-decoration-thickness: 0.12em; }
/* ---- Images in article body ---------------------------------------------
Constrained to the same reading measure as the text so a photo doesn't
suddenly balloon wider than the paragraph above it. Doesn't apply to
.float-left/.float-right, which set their own width.
-------------------------------------------------------------------- */
/* Round 17 (item 6): the Contact page's Google Form iframe had no
width cap of its own -- it spans .page's full content width (1123px
at 1440px, measured) while the paragraph above it is capped to
--content-max (736px), landing the iframe and the page's own body
text on two different edges. Capped to the shared --content-max
variable (not a fixed pixel value) so it automatically follows
whatever Round 18 does to that variable, and centered the same way as
every other capped element on the page. The HTML's own width="100%"
attribute is overridden by this CSS width, same as any inline
presentational attribute.
Flagging honestly, per the standing rule to verify by rendering, not
assumption: this fix could NOT be visually verified. Neither this
sandbox nor the Mac's own rendering has live internet access, so the
Google Form iframe renders blank in both -- there's no way from here
to see how the form's own internal layout responds to a narrower
frame. Built as specified; needs an actual look on the deployed
staging site before anyone calls it fine. */
.page iframe {
display: block;
max-width: var(--content-max);
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Round 19 (item 3): Contact form panel + measured heights.
- margin-bottom 32px (was 0, so the Privacy Policy link sat against the
frame), matching the 32px above it.
- Visible panel: white, soft edge, the site's existing 0.75rem radius,
so the much shorter post-submit "thank you" state reads as a panel
rather than a broken page. The edge is a 1px box-shadow ring rather
than a border on purpose: a border would take 2px off the form's
width, and the form's own height steps change with width.
- Round 20 (item 6): allowance raised from ~30px to ~100px over the
measured heights below. Those were measured signed out of Google; K
found on her phone (~393px, signed in) that the form adds four account
lines (email, Switch account, Not shared, draft-saved icon), ~50px,
which pushed it to/past the Round 19 frame height.
- Heights: the new form's full content height was measured in a real
browser at a range of frame widths (Round 19 report has the table),
then each range below gets the tallest measurement in its range plus
~100px allowance (Round 20; was ~30px), so the frame never shows its own scrollbar. The
frame is min(900px, 78% of the viewport) wide at every size, so each
viewport range maps to a known frame-width range. Mobile-first. */
.page iframe.contact-form-frame {
margin-top: 2rem;
margin-bottom: 2rem;
background: var(--white);
border: 0;
border-radius: 0.75rem;
box-shadow: 0 0 0 1px rgba(44, 44, 42, 0.14);
height: 1380px; /* < 320px viewport (frame < 250px): measured up to 1276px at 218px */
}
@media (min-width: 20em) { /* 320-359px viewport, frame 250-280px: measured max 1123px */
.page iframe.contact-form-frame { height: 1225px; }
}
@media (min-width: 22.5em) { /* 360-479px, frame 281-373px: measured max 1051px */
.page iframe.contact-form-frame { height: 1155px; }
}
@media (min-width: 30em) { /* 480-767px, frame 374-598px: measured max 992px */
.page iframe.contact-form-frame { height: 1095px; }
}
@media (min-width: 48em) { /* 768-899px, frame 599-701px: measured max 972px */
.page iframe.contact-form-frame { height: 1075px; }
}
@media (min-width: 56.25em) { /* 900px+, frame 702-900px: measured 919px */
.page iframe.contact-form-frame { height: 1020px; }
}
.page img {
/* Round 14: fixed a pre-existing sitewide mobile bug found while
rendering this round's item 7 at mobile width (standing
instruction: verify by rendering) -- max-width: 736px alone doesn't
clamp to the viewport/container on a narrow screen (736px > most
phone widths), and the base `img { max-width: 100% }` reset loses
the cascade tie here because `.page img` (one class + a tag) is
more specific than a bare `img` (just a tag). Confirmed this was
already causing horizontal scroll on mobile for any sufficiently
large existing article image, not just the one touched this round
-- e.g. protector-parts-in-trauma.jpg (700x700, untouched by this
round) was already overflowing to a 743px page width on a 390px
viewport before this fix. min(...) keeps the same 736px reading-
width cap on desktop (where the container is always wider than
736px, so min() still resolves to 736px, unchanged) while also
respecting 100% of the container on narrow screens, where 100% is
now the binding constraint. */
max-width: min(var(--content-max), 100%);
/* Round 17 (item 5): 1.6em (29px) read as tight against the
surrounding text -- increased to 2.6em (47px). max-width rule above
is untouched on purpose; that's Round 18 territory (widths). */
margin: 2.6em auto;
border-radius: 0.5rem;
}
/* Round 14 (item 7): the replacement behind-every-feeling image is a
square 1080x1080 source (the quote/artist-credit text is baked into
the image itself, in the bottom ~24%, so it's used uncropped -- 1:1,
no object-fit crop needed or applied). Without this override it would
render at the generic .page img cap (see above), wider than the
400-700px range the other article images use and wider than actually
needed for a 1080px source at roughly 2x display density. Capped to
600px display width here (1080px source = 1.8x, effectively the
"roughly twice" retina density asked for) -- sits centrally within
the 400-700px range the other article photos use. Qualified with the
.page ancestor (two classes) rather than left as a single class, so
it reliably wins the specificity tie against .page img (one class +
a tag) regardless of file order -- the same lesson from Round 13's
photo-alignment bug, applied up front this time instead of found the
hard way again. On mobile, min(600px, 100%) in practice just means
100% (matching every other article image's mobile behaviour) since
600px alone would still be wider than a phone screen. */
.page .article-photo-square {
max-width: min(37.5rem, 100%);
}
/* ---- Curated link lists (Resources, Therapies) --------------------------
Round 13 (item 6): built for Resources -- was a plain -- bullet
markers plus the sitewide always-on link underline (a deliberate rule
elsewhere, for links inside body prose) made it read like a reference/
citation list rather than the deliberately-chosen collection of
articles it actually is. Bullets and per-item underlines removed;
more vertical room per entry via padding (not the sitewide li
margin-bottom, which doesn't give a click target); a divider line
between entries in place of the bullet as the visual separator;
underline + a soft background tint + a small indent shift on
hover/focus, so the interaction is still clearly signalled -- not
relying on color alone -- without it being visible at rest.
Round 14 (item 4): renamed from .resource-list to the generic
.link-list and applied to Therapies too -- the two signposting pages
(Resources, Therapies) now share one visual treatment instead of
Therapies still showing raw bulleted/underlined links. Order, count
and copy untouched on both pages -- restyled only. */
.link-list {
list-style: none;
margin: 1.5em 0;
padding: 0;
}
.link-list li {
margin-bottom: 0;
border-bottom: 1px solid #DDD8CC;
}
/* Round 15 (item 9): removed the :last-child exception -- Resources
(14 entries) already reads as "a divider under every entry" since
the missing one at the very bottom blends into the page end, but
Therapies only has 2 entries, so the same missing divider under its
2nd (last) link was obviously asymmetric: a divider after the 1st
link, none after the 2nd. Every entry on both lists now gets its
divider, including the last one on each page. */
.link-list a {
display: block;
padding: 0.95em 0.25em;
text-decoration: none;
transition: background-color 0.15s ease;
}
/* Round 20 (item 3): the hover/focus padding-left shift (0.25em -> 0.6em)
is gone -- at 390px it narrowed the line enough to re-wrap "Behind every
feeling is likely a need" from one line to two on tap. Tint background
and underline kept; padding-left dropped from the transition too. */
.link-list a:hover,
.link-list a:focus-visible {
text-decoration: underline;
background: var(--band-tint);
}
/* ---- Skip link (Round 21, item 6) -----------------------------------------
"Skip to main content": the first thing a keyboard user tabs to on every
page (inserted by build.py, see partials/skip-link.html). Kept off-screen
(not display:none, so it stays focusable) until it has focus; then it
appears top-left with a cream background, charcoal bold text and the
site's usual 2px terracotta focus outline. Enter jumps to .
-------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: -9999px;
top: 0.75rem;
z-index: 1000;
padding: 0.5em 1em;
background: var(--cream);
color: var(--charcoal);
font-weight: 700;
border-radius: 0.375rem;
}
.skip-link:focus {
left: 0.75rem;
color: var(--charcoal);
outline: 2px solid var(--terracotta-text);
outline-offset: 2px;
}
/* takes focus when the skip link is used (tabindex="-1", so it is
never a Tab stop itself). It is a container, not a control, so it gets
no focus outline of its own. */
main:focus { outline: none; }
/* Round 22 (item 4b): long links in the page content (e.g. the DOI address
on the study article) may wrap instead of pushing the page sideways on
small phones. break-word, not anywhere, so it doesn't change how grid
columns size. Only affects links that wouldn't otherwise fit.
Round 23 (item 1): the DOI is now plain text, not a link, so it sits in
and gets the same rule. Scoped to the DOI only, not
to all paragraphs: "main p" was tried and made the closing full stop
after the email address drop onto its own line at 320px (Contact and
Privacy Policy), where the address overhangs its column by 0.4px. */
main a, main .doi { overflow-wrap: break-word; }
-- .faq-item .faq-answer p never matched
anything real, so the first attempt at this override was silently a
no-op (confirmed by re-rendering: the indent was still there). */
.faq-item > p {
margin-left: 0;
margin-right: 0;
}
.faq-item > p:last-child { margin-bottom: 0; }
/* Round 22 (item 2, K 8 Oct 2026): an OPEN item gets more bottom space, so
the answer's last line sits about the same distance above the divider as
the answer's paragraphs sit from each other (was 7px). Replaces the item's
0.4rem bottom padding while open; closed items are unchanged. */
.faq-item[open] { padding-bottom: 1.4rem; }
/* ---- Footer -------------------------------------------------------------
Muted sage-grey (not near-black), clearly distinct from the cream body
without being visually heavy. Round 5: whole block left-aligned (was
centered) -- copyright, address, crisis heading, bullets, and the
Privacy Policy link all read as one left-aligned column now. The
crisis-support list is also narrower (see .footer-crisis-list) so its
bullet lines wrap more evenly and don't leave a short orphaned second
line.
-------------------------------------------------------------------- */
footer {
background: var(--footer-bg);
color: var(--charcoal);
/* Round 8 (item 1): the Round 7 calc() padding only matched the shared
content column's position at the one viewport width it was checked
against -- it wasn't actually the same container, so it drifted at
other widths. Footer content now lives inside a real .page-inner div
(see partials/footer.html), which is the exact same class/rule every
other section uses for its max-width + centering + gutter, so it
tracks correctly at every breakpoint, not just one. footer itself
keeps the full-bleed sage background and only vertical padding here;
.page-inner supplies the horizontal padding. */
padding: 2.5rem 0;
/* Round 18 (item 1): was 3rem -- 48px of cream body background between
the last band and the footer, present since Round 8 and invisible
the whole time because the last homepage section was always cream.
Round 16 put a tinted band last, which turned that gap into a
visible cream stripe between the tinted band and the sage footer,
reading as the band floating rather than sitting flush above the
footer. Closed to 0 -- paired with squaring the last band's bottom
corners below (main .band:last-child), since a curved bottom edge
with no gap lets a wedge of cream show through at the outer edges,
putting a third colour into what should be a clean two-colour seam.
K considered and rejected keeping the curve via a footer-overlap
(negative margin sized to the deepest possible curve, a stacking
context, compensating padding, and page-scoping so it doesn't ride
up over content on pages that don't end in a band) -- squaring is
one declaration with nothing else that has to stay in step with it. */
margin-top: 0;
text-align: left;
font-size: 0.95rem;
}
/* Round 21 (item 3): the Round 18 "main .band:last-child" rule (squared
the last band's bottom corners) was removed -- every band edge is now
straight, so it no longer had anything to do. */
/* The whole footer content block hugs the left edge (padding from
footer itself) rather than sitting as a centered column -- max-width
keeps line lengths reasonable, but there's no margin:auto centering it
any more. */
/* Round 15 revision #2 (item 5): was max-width: 44rem with no centering
-- a hardcoded value close to but not equal to --content-max (46rem),
and deliberately flush-left against .page-inner's own left edge
(Round 5's left-alignment decision, made before item A existed).
Item A then centered every other page's body-text column within
.page, so the footer's still-flush-left block drifted out of
alignment with it by the same 61px/194px (1100px/1440px) gap --
confirmed by rendering. Root-caused the same way as item A and the
FAQ fix above: share the exact --content-max value (not a separate
44rem) and center the box with margin:auto, so its left edge lands
on the same point as the body-text column above it in the page.
text-align stays left (inherited from `footer` itself, untouched)
-- only the block's own position moves, the text inside it does not
become centered. */
/* Round 18 (item 4): max-width changed from var(--content-max) to none.
Deliberate, not a reversal of Round 17 item 1's centering fix -- this
is a different axis. The nav sits just outside the page container's
own edge (Round 17 item 4), the reading column sits inside it
(Round 18 item 2/3), and the footer now sits ON the container edge
itself -- top and bottom frame the page, content sits within the
frame. The auto side margins from Round 17 are kept here on purpose:
they simply have no visible effect once the box fills the container
edge to edge, and removing them would just be churn. */
footer p, footer .footer-crisis-list {
max-width: none;
margin-left: auto;
margin-right: auto;
}
footer p { margin: 0 auto; } /* Round 15 revision #2 (item 5): was `margin: 0` (all sides), which came after the new max-width+margin:auto centering rule above and, at equal specificity (footer p vs footer p), won by source order -- silently zeroing the auto centering right back out. Same pitfall item A hit with the sitewide `p { margin: 0 0 1.2em }` rule; same fix: keep the shorthand but keep auto on the sides that need to stay auto. */
footer .footer-copyright { margin-bottom: 0.15em; }
footer .footer-address { margin-bottom: 1.1em; }
footer .footer-crisis-label { margin-bottom: 0.4em; font-weight: 600; }
/* Round 18 (item 5): above 81.25em (1300px) -- measured: the copyright
and address lines together need about 1010px, which fits on one line
at 1300px viewport width and wraps mid-address just below it -- the
two lines run together with a plain space between them, gated to this
breakpoint only, everything below stays stacked exactly as before.
No separator glyph: the full stop after "All rights reserved." already
marks the boundary between the two, and a bullet/dash would be new
copy that wasn't asked for. Going inline collapses footer-address's
own margin-bottom (the vertical gap before "For mental health crisis
support:"), so that gap is restored explicitly on footer-crisis-label
instead, in the same query. */
@media (min-width: 81.25em) {
.footer-copyright, .footer-address { display: inline; }
.footer-copyright::after { content: " "; }
.footer-crisis-label { margin-top: 1.1em; }
}
/* Round 9 (item 1): removed the max-width: 24rem that lived here since
Round 6 (back when the crisis list had no other width constraint and
needed one of its own to control its wrap). That rule was never taken
out when the Round 8 container fix landed -- so it sat on top of
everything else, silently re-narrowing just this one element by ~165px
versus the address line above it. Now shares the same --content-max
width as footer p (see the shared rule above) instead of carrying its
own separate value; text-wrap: pretty is kept for even wrapping at
that width. (Comment corrected Round 17: this stopped being a
hardcoded "44rem" two revisions before this note was written -- Round
15 revision #2 item 5 moved both footer p and this selector onto the
shared --content-max variable instead.)
Round 17 (item 1): margin was `0 0 1.1em` -- zero left/right, not
auto -- which sat after the shared max-width+margin:auto centering
rule above and, at equal specificity (footer .footer-crisis-list vs
footer .footer-crisis-list), won by source order and silently zeroed
the centering back out. Exactly the same pitfall as footer p hit in
Round 15 revision #2 item 5, on the identical line pattern twelve
lines above this one -- same fix: keep the shorthand, keep auto on
the sides that need to stay auto. Confirmed by rendering: copyright/
address/crisis-label/Privacy-Policy-link and the crisis list itself
now share one left edge (352px at 1440px, 182px at 1100px), where the
list previously sat at 158.4px/121px -- flush against .page-inner's
own edge instead of centered with everything else in the footer. */
footer .footer-crisis-list {
list-style: none;
margin: 0 auto 1.1em;
padding: 0;
text-align: left;
font-size: 0.95rem; /* Round 21 (item 5): was 0.8rem (12.8px); now the footer's own size, 15.2px */
line-height: 1.6;
text-wrap: pretty;
}
/* Round 18 (item 4): max-width: none added -- these elements were
otherwise still caught by the sitewide `p, li, blockquote { max-width:
var(--content-max) }` rule (a real match despite footer .footer-crisis-list
itself now being max-width: none above -- that rule targets the list
box, not its individual items), which would have kept each bullet
line capped to the old reading measure even after the list itself
went full-width. */
footer .footer-crisis-list li {
max-width: none;
margin-bottom: 0.6em;
margin-left: 0;
margin-right: 0;
padding-left: 1.1em;
position: relative;
}
footer .footer-crisis-list li::before {
content: "\2022";
position: absolute;
left: 0;
}
footer .footer-privacy { margin-top: 0.4em; margin-bottom: 0; font-size: 0.85rem; }
/* Round 21 (item 7): bigger tap area for "Privacy Policy", no visual change
-- same inline-padding approach as the top banner link (15px -> 25px). */
footer .footer-privacy a { padding: 5px 0; }
footer a { color: var(--charcoal); text-decoration: underline; }
/* Round 19 (item 4, K 7 Oct 2026): footer links no longer turn terracotta
on hover -- --terracotta-text on the sage footer is only 2.25:1. They
keep --charcoal (5.04:1 on the footer) and the hover cue is the thicker
underline, same thickness as every other link. */
footer a:hover, footer a:focus-visible { color: var(--charcoal); text-decoration-thickness: 0.12em; }
/* ---- Images in article body ---------------------------------------------
Constrained to the same reading measure as the text so a photo doesn't
suddenly balloon wider than the paragraph above it. Doesn't apply to
.float-left/.float-right, which set their own width.
-------------------------------------------------------------------- */
/* Round 17 (item 6): the Contact page's Google Form iframe had no
width cap of its own -- it spans .page's full content width (1123px
at 1440px, measured) while the paragraph above it is capped to
--content-max (736px), landing the iframe and the page's own body
text on two different edges. Capped to the shared --content-max
variable (not a fixed pixel value) so it automatically follows
whatever Round 18 does to that variable, and centered the same way as
every other capped element on the page. The HTML's own width="100%"
attribute is overridden by this CSS width, same as any inline
presentational attribute.
Flagging honestly, per the standing rule to verify by rendering, not
assumption: this fix could NOT be visually verified. Neither this
sandbox nor the Mac's own rendering has live internet access, so the
Google Form iframe renders blank in both -- there's no way from here
to see how the form's own internal layout responds to a narrower
frame. Built as specified; needs an actual look on the deployed
staging site before anyone calls it fine. */
.page iframe {
display: block;
max-width: var(--content-max);
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Round 19 (item 3): Contact form panel + measured heights.
- margin-bottom 32px (was 0, so the Privacy Policy link sat against the
frame), matching the 32px above it.
- Visible panel: white, soft edge, the site's existing 0.75rem radius,
so the much shorter post-submit "thank you" state reads as a panel
rather than a broken page. The edge is a 1px box-shadow ring rather
than a border on purpose: a border would take 2px off the form's
width, and the form's own height steps change with width.
- Round 20 (item 6): allowance raised from ~30px to ~100px over the
measured heights below. Those were measured signed out of Google; K
found on her phone (~393px, signed in) that the form adds four account
lines (email, Switch account, Not shared, draft-saved icon), ~50px,
which pushed it to/past the Round 19 frame height.
- Heights: the new form's full content height was measured in a real
browser at a range of frame widths (Round 19 report has the table),
then each range below gets the tallest measurement in its range plus
~100px allowance (Round 20; was ~30px), so the frame never shows its own scrollbar. The
frame is min(900px, 78% of the viewport) wide at every size, so each
viewport range maps to a known frame-width range. Mobile-first. */
.page iframe.contact-form-frame {
margin-top: 2rem;
margin-bottom: 2rem;
background: var(--white);
border: 0;
border-radius: 0.75rem;
box-shadow: 0 0 0 1px rgba(44, 44, 42, 0.14);
height: 1380px; /* < 320px viewport (frame < 250px): measured up to 1276px at 218px */
}
@media (min-width: 20em) { /* 320-359px viewport, frame 250-280px: measured max 1123px */
.page iframe.contact-form-frame { height: 1225px; }
}
@media (min-width: 22.5em) { /* 360-479px, frame 281-373px: measured max 1051px */
.page iframe.contact-form-frame { height: 1155px; }
}
@media (min-width: 30em) { /* 480-767px, frame 374-598px: measured max 992px */
.page iframe.contact-form-frame { height: 1095px; }
}
@media (min-width: 48em) { /* 768-899px, frame 599-701px: measured max 972px */
.page iframe.contact-form-frame { height: 1075px; }
}
@media (min-width: 56.25em) { /* 900px+, frame 702-900px: measured 919px */
.page iframe.contact-form-frame { height: 1020px; }
}
.page img {
/* Round 14: fixed a pre-existing sitewide mobile bug found while
rendering this round's item 7 at mobile width (standing
instruction: verify by rendering) -- max-width: 736px alone doesn't
clamp to the viewport/container on a narrow screen (736px > most
phone widths), and the base `img { max-width: 100% }` reset loses
the cascade tie here because `.page img` (one class + a tag) is
more specific than a bare `img` (just a tag). Confirmed this was
already causing horizontal scroll on mobile for any sufficiently
large existing article image, not just the one touched this round
-- e.g. protector-parts-in-trauma.jpg (700x700, untouched by this
round) was already overflowing to a 743px page width on a 390px
viewport before this fix. min(...) keeps the same 736px reading-
width cap on desktop (where the container is always wider than
736px, so min() still resolves to 736px, unchanged) while also
respecting 100% of the container on narrow screens, where 100% is
now the binding constraint. */
max-width: min(var(--content-max), 100%);
/* Round 17 (item 5): 1.6em (29px) read as tight against the
surrounding text -- increased to 2.6em (47px). max-width rule above
is untouched on purpose; that's Round 18 territory (widths). */
margin: 2.6em auto;
border-radius: 0.5rem;
}
/* Round 14 (item 7): the replacement behind-every-feeling image is a
square 1080x1080 source (the quote/artist-credit text is baked into
the image itself, in the bottom ~24%, so it's used uncropped -- 1:1,
no object-fit crop needed or applied). Without this override it would
render at the generic .page img cap (see above), wider than the
400-700px range the other article images use and wider than actually
needed for a 1080px source at roughly 2x display density. Capped to
600px display width here (1080px source = 1.8x, effectively the
"roughly twice" retina density asked for) -- sits centrally within
the 400-700px range the other article photos use. Qualified with the
.page ancestor (two classes) rather than left as a single class, so
it reliably wins the specificity tie against .page img (one class +
a tag) regardless of file order -- the same lesson from Round 13's
photo-alignment bug, applied up front this time instead of found the
hard way again. On mobile, min(600px, 100%) in practice just means
100% (matching every other article image's mobile behaviour) since
600px alone would still be wider than a phone screen. */
.page .article-photo-square {
max-width: min(37.5rem, 100%);
}
/* ---- Curated link lists (Resources, Therapies) --------------------------
Round 13 (item 6): built for Resources -- was a plain -- bullet
markers plus the sitewide always-on link underline (a deliberate rule
elsewhere, for links inside body prose) made it read like a reference/
citation list rather than the deliberately-chosen collection of
articles it actually is. Bullets and per-item underlines removed;
more vertical room per entry via padding (not the sitewide li
margin-bottom, which doesn't give a click target); a divider line
between entries in place of the bullet as the visual separator;
underline + a soft background tint + a small indent shift on
hover/focus, so the interaction is still clearly signalled -- not
relying on color alone -- without it being visible at rest.
Round 14 (item 4): renamed from .resource-list to the generic
.link-list and applied to Therapies too -- the two signposting pages
(Resources, Therapies) now share one visual treatment instead of
Therapies still showing raw bulleted/underlined links. Order, count
and copy untouched on both pages -- restyled only. */
.link-list {
list-style: none;
margin: 1.5em 0;
padding: 0;
}
.link-list li {
margin-bottom: 0;
border-bottom: 1px solid #DDD8CC;
}
/* Round 15 (item 9): removed the :last-child exception -- Resources
(14 entries) already reads as "a divider under every entry" since
the missing one at the very bottom blends into the page end, but
Therapies only has 2 entries, so the same missing divider under its
2nd (last) link was obviously asymmetric: a divider after the 1st
link, none after the 2nd. Every entry on both lists now gets its
divider, including the last one on each page. */
.link-list a {
display: block;
padding: 0.95em 0.25em;
text-decoration: none;
transition: background-color 0.15s ease;
}
/* Round 20 (item 3): the hover/focus padding-left shift (0.25em -> 0.6em)
is gone -- at 390px it narrowed the line enough to re-wrap "Behind every
feeling is likely a need" from one line to two on tap. Tint background
and underline kept; padding-left dropped from the transition too. */
.link-list a:hover,
.link-list a:focus-visible {
text-decoration: underline;
background: var(--band-tint);
}
/* ---- Skip link (Round 21, item 6) -----------------------------------------
"Skip to main content": the first thing a keyboard user tabs to on every
page (inserted by build.py, see partials/skip-link.html). Kept off-screen
(not display:none, so it stays focusable) until it has focus; then it
appears top-left with a cream background, charcoal bold text and the
site's usual 2px terracotta focus outline. Enter jumps to .
-------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: -9999px;
top: 0.75rem;
z-index: 1000;
padding: 0.5em 1em;
background: var(--cream);
color: var(--charcoal);
font-weight: 700;
border-radius: 0.375rem;
}
.skip-link:focus {
left: 0.75rem;
color: var(--charcoal);
outline: 2px solid var(--terracotta-text);
outline-offset: 2px;
}
/* takes focus when the skip link is used (tabindex="-1", so it is
never a Tab stop itself). It is a container, not a control, so it gets
no focus outline of its own. */
main:focus { outline: none; }
/* Round 22 (item 4b): long links in the page content (e.g. the DOI address
on the study article) may wrap instead of pushing the page sideways on
small phones. break-word, not anywhere, so it doesn't change how grid
columns size. Only affects links that wouldn't otherwise fit.
Round 23 (item 1): the DOI is now plain text, not a link, so it sits in
and gets the same rule. Scoped to the DOI only, not
to all paragraphs: "main p" was tried and made the closing full stop
after the email address drop onto its own line at 320px (Contact and
Privacy Policy), where the address overhangs its column by 0.4px. */
main a, main .doi { overflow-wrap: break-word; }
- -- bullet
markers plus the sitewide always-on link underline (a deliberate rule
elsewhere, for links inside body prose) made it read like a reference/
citation list rather than the deliberately-chosen collection of
articles it actually is. Bullets and per-item underlines removed;
more vertical room per entry via padding (not the sitewide li
margin-bottom, which doesn't give a click target); a divider line
between entries in place of the bullet as the visual separator;
underline + a soft background tint + a small indent shift on
hover/focus, so the interaction is still clearly signalled -- not
relying on color alone -- without it being visible at rest.
Round 14 (item 4): renamed from .resource-list to the generic
.link-list and applied to Therapies too -- the two signposting pages
(Resources, Therapies) now share one visual treatment instead of
Therapies still showing raw bulleted/underlined links. Order, count
and copy untouched on both pages -- restyled only. */
.link-list {
list-style: none;
margin: 1.5em 0;
padding: 0;
}
.link-list li {
margin-bottom: 0;
border-bottom: 1px solid #DDD8CC;
}
/* Round 15 (item 9): removed the :last-child exception -- Resources
(14 entries) already reads as "a divider under every entry" since
the missing one at the very bottom blends into the page end, but
Therapies only has 2 entries, so the same missing divider under its
2nd (last) link was obviously asymmetric: a divider after the 1st
link, none after the 2nd. Every entry on both lists now gets its
divider, including the last one on each page. */
.link-list a {
display: block;
padding: 0.95em 0.25em;
text-decoration: none;
transition: background-color 0.15s ease;
}
/* Round 20 (item 3): the hover/focus padding-left shift (0.25em -> 0.6em)
is gone -- at 390px it narrowed the line enough to re-wrap "Behind every
feeling is likely a need" from one line to two on tap. Tint background
and underline kept; padding-left dropped from the transition too. */
.link-list a:hover,
.link-list a:focus-visible {
text-decoration: underline;
background: var(--band-tint);
}
/* ---- Skip link (Round 21, item 6) -----------------------------------------
"Skip to main content": the first thing a keyboard user tabs to on every
page (inserted by build.py, see partials/skip-link.html). Kept off-screen
(not display:none, so it stays focusable) until it has focus; then it
appears top-left with a cream background, charcoal bold text and the
site's usual 2px terracotta focus outline. Enter jumps to