/*
Theme Name: BetterYou+ (Soledad Child)
Theme URI: https://betteryouplus.com/
Description: Child theme for BetterYou+. All BY+ template and style customisation belongs
here. The Soledad parent must never be edited directly — on 2026-08-23 a
wp-admin theme update rewrote all 2,344 parent files in one action, which
would have destroyed any customisation living in them.
Author: wpOS
Template: soledad
Version: 2.0.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/* This file only loads because functions.php enqueues it explicitly, with the parent's
'penci-main-style' as a dependency so it always cascades last. Soledad does not enqueue
get_stylesheet_uri(). */
/* =============================================================================
ARTICLE EXPERIENCE — scoped to .byp-experience (set on only when a post carries
byp_experience=1). Tokens from docs/byplus/archive/design-system.md. Light + dark via
Soledad's own dark-mode body class (pcdark-mode).
============================================================================= */
/* The Article Experience used to declare its OWN token block here, including a BLUE
accent (#1B4FD8). It loads after tokens.css, so that blue quietly won across the whole
publication — which is why the site read as "missing color" while every brand value was
correctly defined one file earlier. Two token systems, and the older one on top.
These are now ALIASES onto the canonical tokens. One colour system. */
:root{--bypa-paper:var(--byp-canvas);--bypa-surface:var(--byp-card);--bypa-ink:var(--byp-ink);
--bypa-ink2:var(--byp-ink-2);--bypa-ink3:var(--byp-meta);--bypa-rule:var(--byp-rule);
--bypa-accent:var(--byp-authority);--bypa-accent-soft:var(--byp-tint);
--bypa-warn:var(--byp-caution);--bypa-warn-bg:var(--byp-paper);
--bypa-bad:var(--byp-myth);--bypa-bad-bg:var(--byp-tint-strong);
--bypa-good:var(--byp-try);--bypa-good-bg:var(--byp-paper);
--bypa-serif:var(--byp-display);--bypa-read:var(--byp-body);--bypa-mono:var(--byp-ui)}
/* --bypa-mono was "IBM Plex Mono", which this site has never loaded. Every eyebrow, section
label, TOC heading and Sources summary in an article was therefore rendering in whatever
monospace the reader's OS happens to ship — Menlo on a Mac, Consolas on Windows, something
else on Android. That is not a design decision, it is the absence of one, and it made the
article furniture look unrelated to the homepage, where the identical labels use Archivo.
The name is kept so the role stays legible in the rules below; the value is now the brand
UI face. */
/* dark: nothing to redeclare — the aliases resolve through tokens.css */
/* THE HEADER, DE-DUPLICATED.
Soledad prints its own author line (.penci-hide-tagupdated) and its own meta row
(.post-box-meta-single, "August 29, 2026 · 0 comments") in addition to the byline this
theme renders. On a rebuilt article that is three date displays and two bylines stacked
above the dek. Ours is the one that carries the institutional author, the Published /
Updated rule and the reading time, so the parent's two are hidden — on experience posts
only, so nothing changes for the 530 legacy articles.
The headline is also forced to uppercase by the parent. The anatomy locks SENTENCE CASE,
and Fraunces at display size is a face whose whole character lives in its lowercase. */
.byp-experience .penci-hide-tagupdated,
.byp-experience .post-box-meta-single{display:none}
.byp-experience .single-post-title{text-transform:none}
/* The hero's caption. The anatomy makes caption + credit REQUIRED with a hero, and Soledad
renders the featured image with no caption slot at all, so it is emitted after the image
by inc/article-experience.php. */
.byp-hero-cap{font-family:var(--bypa-mono);font-size:.8rem;line-height:1.5;color:var(--bypa-ink3);
margin:.7rem 0 1.6rem;max-width:72ch;letter-spacing:.01em}
.byp-hero-cap b{font-weight:600;color:var(--bypa-ink2)}
.byp-hero-cap .byp-figure__credit{letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
/* Share row: the parent ships it in platform brand colours — a blue square, a light-blue
square, a red square, a green square — four competing brands sitting under a BetterYou+
headline, each shouting louder than the article. Same affordance, this publication's
palette. The like button keeps the accent because it is the only one of them that is ours. */
.byp-experience .post-share-item{background:transparent!important;
color:var(--bypa-ink2)!important;border:1px solid var(--bypa-rule)!important;
border-radius:6px!important}
.byp-experience .post-share-item:hover{border-color:var(--bypa-accent)!important;
color:var(--bypa-accent)!important;background:var(--bypa-accent-soft)!important}
.byp-experience .post-share-item.post-share-plike{color:var(--bypa-accent)!important}
.byp-experience .dt-share{border-color:var(--bypa-rule)!important}
/* READING TYPOGRAPHY — the one thing the article system never set.
BRAND.md locks Newsreader as the reading face and nothing applied it, so the whole long-form
rhythm block below (size, leading, measure, links, headings — all of it already tuned) was
rendering in Soledad's Lato. One declaration fixes it; everything else here was already
right and is deliberately not repeated. Scoped to .byp-experience so the 530 legacy articles
keep the presentation they were written for. */
.byp-experience .inner-post-entry{font-family:var(--bypa-read)}
/* An inline SVG figure is content, not decoration: full column, a rule above so it reads as
an exhibit rather than an ornament, and `color` set so the drawing's currentColor strokes
and labels follow the page into dark mode without a second palette. */
.byp-experience .byp-figure{margin:2.1rem 0;padding-top:1.1rem;border-top:1px solid var(--bypa-rule)}
.byp-experience .byp-figure svg{width:100%;height:auto;display:block;color:var(--bypa-ink)}
.byp-experience .byp-figure figcaption{font-family:var(--bypa-mono);font-size:.8rem;
line-height:1.5;color:var(--bypa-ink3);margin-top:.75rem;letter-spacing:.01em}
.byp-experience .byp-figure figcaption .byp-figure__credit{letter-spacing:.1em;
text-transform:uppercase;font-size:.72rem}
/* head */
.byp-experience .single-post-title{font-family:var(--bypa-serif);font-weight:600;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;max-width:24ch}
.byp-dek{font-size:1.2rem;line-height:1.5;color:var(--bypa-ink2);max-width:64ch;margin:.6rem 0 1rem}
.byp-head{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;font-size:.86rem;color:var(--bypa-ink3);margin-bottom:1.2rem}
.byp-byline{display:contents}
.byp-byline__author{color:var(--bypa-ink);font-weight:600}
.byp-byline__date--updated::before{content:"· "}
.byp-readtime{font-family:var(--bypa-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
/* body measure */
.byp-experience .inner-post-entry{max-width:72ch}
.byp-experience .inner-post-entry p{font-size:1.19rem;line-height:1.65}
.byp-experience .inner-post-entry h2{font-family:var(--bypa-serif);font-weight:600;letter-spacing:-.01em;margin:2.4rem 0 .8rem;text-wrap:balance;scroll-margin-top:96px}
.byp-experience .inner-post-entry figure{margin:2rem 0}
.byp-experience .inner-post-entry figure svg{width:100%;height:auto;display:block;background:var(--bypa-surface);border:1px solid var(--bypa-rule);border-radius:10px;padding:14px}
.byp-experience .inner-post-entry figcaption{font-size:.9rem;color:var(--bypa-ink2);margin-top:.6rem;line-height:1.5}
.byp-experience .wp-caption-text,.byp-experience .penci-featured-caption{font-size:.9rem;color:var(--bypa-ink2)}
/* callouts: .call.try / .call.watch / .call.stop (authored in content) */
.byp-experience .call{border-left:3px solid var(--bypa-accent);background:var(--bypa-accent-soft);padding:.9rem 1.1rem;border-radius:0 8px 8px 0;margin:1.6rem 0;font-size:1.05rem}
.byp-experience .call b:first-child,.byp-experience .call .l{display:block;font-family:var(--bypa-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-accent);margin-bottom:.3rem}
.byp-experience .call.watch{border-color:var(--bypa-warn);background:var(--bypa-warn-bg)}
.byp-experience .call.watch b:first-child,.byp-experience .call.watch .l{color:var(--bypa-warn)}
.byp-experience .call.stop{border-color:var(--bypa-bad);background:var(--bypa-bad-bg)}
.byp-experience .call.stop b:first-child,.byp-experience .call.stop .l{color:var(--bypa-bad)}
.byp-experience .btm{border-top:3px solid var(--bypa-ink);margin-top:2.4rem;padding-top:1rem}
.byp-experience .btm h2{margin-top:0}
/* takeaways */
.byp-takeaways{background:var(--bypa-surface);border:1px solid var(--bypa-rule);border-radius:10px;padding:1.1rem 1.3rem;margin:1.6rem 0}
.byp-takeaways__h{font-family:var(--bypa-mono)!important;font-size:.74rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-ink3);margin:0 0 .6rem!important}
.byp-takeaways ul{margin:0;padding-left:1.1rem}
.byp-takeaways li{margin:.35rem 0;line-height:1.5;font-size:1.02rem}
/* toc */
.byp-toc{border:1px solid var(--bypa-rule);border-radius:10px;padding:.9rem 1.2rem;margin:1.4rem 0;background:var(--bypa-surface)}
.byp-toc__h{font-family:var(--bypa-mono)!important;font-size:.74rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-ink3);margin:0 0 .5rem!important}
.byp-toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem}
.byp-toc li{margin:.25rem 0;break-inside:avoid;font-size:.98rem}
.byp-toc a{color:var(--bypa-ink);text-decoration:none;border-bottom:1px solid var(--bypa-rule)}
.byp-toc a:hover{color:var(--bypa-accent);border-color:var(--bypa-accent)}
@media (max-width:640px){.byp-toc ol{columns:1}}
/* recirculation */
.byp-relbreak{margin:2rem 0;padding:1rem 0;border-top:1px solid var(--bypa-rule);border-bottom:1px solid var(--bypa-rule)}
.byp-relbreak__eyebrow,.byp-related__h{font-family:var(--bypa-mono)!important;font-size:.74rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-ink3);margin:0 0 .7rem!important}
.byp-relbreak__grid,.byp-related__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.byp-related__grid{grid-template-columns:repeat(3,1fr)}
/* A curated Continue Reading may honestly be shorter than three. Empty space beats a filler
card, but a lone card stranded in a three-column grid looks like two failed to load. */
.byp-related__grid--1{grid-template-columns:minmax(0,420px)}
.byp-related__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.byp-related__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.byp-relbreak__grid,.byp-related__grid{grid-template-columns:1fr}}
.byp-card{display:block;text-decoration:none;color:var(--bypa-ink)}
.byp-card__img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:var(--bypa-rule);margin-bottom:.5rem}
.byp-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.byp-card__eyebrow{display:block;font-family:var(--bypa-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bypa-accent);margin-bottom:.2rem}
.byp-card__title{display:block;font-family:var(--bypa-serif);font-size:1.02rem;line-height:1.3;font-weight:600}
.byp-card:hover .byp-card__title{color:var(--bypa-accent)}
.byp-related{margin:2.4rem 0 1rem}
/* helpful / sources / pair */
.byp-helpful{display:flex;gap:.6rem;align-items:center;font-size:.95rem;color:var(--bypa-ink2);margin:1.8rem 0 1rem}
.byp-helpful button{border:1px solid var(--bypa-rule);background:var(--bypa-surface);color:var(--bypa-ink);padding:.3rem .8rem;border-radius:999px;font:inherit;font-size:.9rem;cursor:pointer}
.byp-helpful button:hover{border-color:var(--bypa-accent);color:var(--bypa-accent)}
.byp-sources{margin:1.2rem 0;border-top:1px solid var(--bypa-rule);padding-top:.8rem}
.byp-sources summary{cursor:pointer;font-family:var(--bypa-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bypa-ink3)}
.byp-sources ol{margin:.6rem 0 0;padding-left:1.2rem;font-size:.92rem;line-height:1.5;color:var(--bypa-ink2)}
.byp-sources__pub{color:var(--bypa-ink3)}
.byp-pair{border:1px solid var(--bypa-rule);border-radius:10px;padding:1rem 1.2rem;margin:1.4rem 0;background:var(--bypa-surface)}
.byp-pair__eyebrow{font-family:var(--bypa-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-ink3);margin:0 0 .4rem}
.byp-pair__link{text-decoration:none;color:var(--bypa-ink)}
.byp-pair__label{display:block;color:var(--bypa-accent);font-size:.9rem}
.byp-pair__title{font-family:var(--bypa-serif);font-weight:600;font-size:1.1rem}
/* reserved ad inventory: fixed height so nothing shifts when it fills */
.byp-ad{display:flex;align-items:center;justify-content:center;border:1px dashed var(--bypa-rule);border-radius:8px;color:var(--bypa-ink3);font-family:var(--bypa-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.byp-ad--inline{min-height:250px;margin:1.8rem 0}
/* =============================================================================
ARTICLE EXPERIENCE V2 — 2026-08-28
Operator review of V1 rejected the presentation, not the infrastructure. What changed:
1. The hero. V1 used Soledad style-6: full-bleed image, headline reversed out on top,
a whole viewport before a word is read. V2 filters experience posts to style-1 and
caps the image, so the order is eyebrow -> headline -> dek -> byline -> image.
2. Long-form rhythm. Benchmarked against the Verywell Mind article the operator supplied:
a tighter measure, more air above H2s than below, and shaded boxes that carry evidence
rather than decorate.
3. Images earn their size. Full-bleed is reserved for a figure that is genuinely the
argument; everything else sits inside the measure.
============================================================================= */
/* ---- hero: restrained, and never behind the headline ---- */
.byp-experience .penci-single-pheader{padding-top:0}
.byp-experience .post-image{max-width:100%;margin:0 0 1.6rem}
.byp-experience .post-image img{width:100%;height:auto;max-height:52vh;object-fit:cover;border-radius:8px;display:block}
.byp-experience .single-header,.byp-experience .header-standard{background:none!important;padding:0!important;text-align:left!important}
.byp-experience .penci-single-cat{margin-bottom:.5rem}
.byp-experience .penci-single-cat a{font-family:var(--bypa-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-accent)}
.byp-experience .single-post-title{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:0 0 .5rem;max-width:22ch}
.byp-experience .post-box-meta-single{margin:0}
/* ---- long-form rhythm ---- */
.byp-experience .inner-post-entry{max-width:68ch}
.byp-experience .inner-post-entry p{font-size:1.16rem;line-height:1.68;margin:0 0 1.25rem}
.byp-experience .inner-post-entry h2{font-size:clamp(1.35rem,2.1vw,1.72rem);margin:2.9rem 0 .7rem;padding-top:.2rem}
.byp-experience .inner-post-entry h3{font-family:var(--bypa-serif);font-size:1.16rem;font-weight:600;margin:1.9rem 0 .5rem;color:var(--bypa-ink)}
.byp-experience .inner-post-entry h2+p,.byp-experience .inner-post-entry h3+p{margin-top:0}
.byp-experience .inner-post-entry ul,.byp-experience .inner-post-entry ol{margin:0 0 1.35rem;padding-left:1.3rem}
.byp-experience .inner-post-entry li{margin:.4rem 0;line-height:1.6;font-size:1.1rem}
.byp-experience .inner-post-entry strong{font-weight:600}
.byp-experience .inner-post-entry a{color:var(--bypa-accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* ---- shaded boxes: evidence, not decoration ---- */
.byp-box{background:var(--bypa-surface);border:1px solid var(--bypa-rule);border-radius:10px;padding:1.15rem 1.35rem;margin:1.9rem 0}
.byp-box>:first-child{margin-top:0}.byp-box>:last-child{margin-bottom:0}
.byp-box__label{display:block;font-family:var(--bypa-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bypa-ink3);margin-bottom:.5rem}
.byp-box--evidence{border-left:3px solid var(--bypa-accent);background:var(--bypa-accent-soft)}
.byp-box--evidence .byp-box__label{color:var(--bypa-accent)}
.byp-box--caution{border-left:3px solid var(--bypa-warn);background:var(--bypa-warn-bg)}
.byp-box--caution .byp-box__label{color:var(--bypa-warn)}
.byp-box--try{border-left:3px solid var(--bypa-good);background:var(--bypa-good-bg)}
.byp-box--try .byp-box__label{color:var(--bypa-good)}
.byp-box--myth{border-left:3px solid var(--bypa-bad);background:var(--bypa-bad-bg)}
.byp-box--myth .byp-box__label{color:var(--bypa-bad)}
.byp-box p,.byp-box li{font-size:1.04rem;line-height:1.58}
/* ---- pull quote: typographic, not a card ---- */
.byp-experience blockquote,.byp-pullquote{border:0;border-top:2px solid var(--bypa-ink);border-bottom:1px solid var(--bypa-rule);
margin:2.2rem 0;padding:1rem 0;font-family:var(--bypa-serif);font-size:1.32rem;line-height:1.4;color:var(--bypa-ink);max-width:60ch}
.byp-experience blockquote p:last-child{margin-bottom:0}
/* ---- figures ---- */
.byp-experience figure{margin:2.1rem 0}
.byp-experience figure img{border-radius:8px}
.byp-experience figure.byp-figure--wide{max-width:none;width:100%}
.byp-experience figcaption{font-size:.88rem;color:var(--bypa-ink2);margin-top:.55rem;line-height:1.5;border-left:2px solid var(--bypa-rule);padding-left:.7rem}
.byp-figure__credit{color:var(--bypa-ink3);font-size:.8rem}
/* ---- takeaways + toc, quieter than V1 ---- */
.byp-takeaways{border-left:3px solid var(--bypa-accent);border-radius:0 10px 10px 0}
.byp-toc{background:transparent;border:0;border-top:1px solid var(--bypa-rule);border-bottom:1px solid var(--bypa-rule);border-radius:0;padding:.9rem 0}
.byp-toc ol{columns:2;column-gap:2.4rem}
@media (max-width:700px){.byp-toc ol{columns:1}}
/* ---- statistic ---- */
.byp-stat{display:flex;gap:1rem;align-items:baseline;margin:1.9rem 0;padding:1rem 1.2rem;border-top:2px solid var(--bypa-ink);border-bottom:1px solid var(--bypa-rule)}
.byp-stat__n{font-family:var(--bypa-serif);font-size:2.4rem;font-weight:600;line-height:1;color:var(--bypa-accent);font-variant-numeric:tabular-nums;
/* The figure is one thing. Without this it is a flex item that shrinks and wraps, so
'd = .65' set out as 'd =' over '.65' — which is not a statistic, it is a typo. */
flex:0 0 auto;white-space:nowrap}
.byp-stat__t{font-size:1rem;color:var(--bypa-ink2);line-height:1.45}
@media (max-width:760px){
.byp-experience .post-image img{max-height:38vh}
.byp-experience .inner-post-entry p{font-size:1.08rem}
.byp-experience .single-post-title{font-size:1.65rem}
.byp-stat{flex-direction:column;gap:.3rem}
.byp-stat__n{white-space:normal}
}
/* =============================================================================
ARTICLE V3 — the components the operator review of 2026-08-29 required.
All scoped to .byp-experience (or the rail, which only renders on one).
============================================================================= */
/* ---- IN THIS ARTICLE: one copy per breakpoint ------------------------------
Both variants are in the DOM; display:none removes the unused one from the
accessibility tree as well, so nobody is offered the same contents twice. */
.byp-toc--rail{display:none}
@media(min-width:1025px){
/* The inline contents list is no longer hidden on desktop. Placement is decided
server-side by byp_toc_placement(), so exactly one variant is ever emitted and CSS
no longer has an opinion about which. */
.byp-toc--rail{display:block}
}
/* ---- THE RAIL --------------------------------------------------------------
Deliberately narrow in what it can look like. The column it replaces held
seven widgets and taught the reader to ignore it; the constraint is the
point. Modules are cards on the raised surface, never boxed-in-boxed. */
.byp-rail{display:flex;flex-direction:column;gap:18px}
.byp-rail__mod{background:var(--bypa-surface);border:1px solid var(--bypa-rule);
border-radius:10px;padding:16px 18px}
.byp-rail__h,.byp-toc--rail .byp-toc__h{font-family:var(--bypa-mono);font-size:.72rem;
font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-ink3);
margin:0 0 .7rem!important}
.byp-toc--rail{border:1px solid var(--bypa-rule);border-radius:10px;padding:16px 18px;
background:var(--bypa-surface);margin:0}
.byp-toc--rail ol{columns:1;padding-left:1.1rem;margin:0}
.byp-toc--rail li{font-size:.92rem;line-height:1.35;margin:.4rem 0}
.byp-rail__keep .byp-card{display:block;margin:0 0 .9rem}
.byp-rail__keep .byp-card:last-child{margin-bottom:0}
.byp-rail__keep .byp-card__img{display:none}
.byp-rail__keep .byp-card__title{font-size:.98rem;line-height:1.3}
.byp-rail .byp-ad--rail{min-height:250px;display:flex;align-items:center;justify-content:center;
color:var(--bypa-ink3);font-family:var(--bypa-mono);font-size:.68rem;letter-spacing:.12em;
text-transform:uppercase}
/* Below the two-column breakpoint Soledad stacks the sidebar under the article. A contents
list and a "keep reading" block are worth nothing there — the reader has finished. */
@media(max-width:1024px){.byp-rail{display:none}}
/* ---- DID YOU KNOW ----------------------------------------------------------
Same visual family as the homepage module (byp-d-dyk) so the site has one
Did You Know, not three. Inside an article the source is always printed:
a surprising claim the reader cannot check is worse than no claim. */
.byp-experience .byp-dyk{background:var(--bypa-surface);border:1px solid var(--bypa-rule);
border-left:4px solid var(--byp-evidence,#12615F);border-radius:10px;
padding:1.1rem 1.3rem;margin:2rem 0;max-width:none}
.byp-dyk__eyebrow{display:flex;align-items:center;gap:.45rem;font-family:var(--bypa-mono);
font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--byp-evidence,#12615F);margin:0 0 .55rem}
.byp-dyk__eyebrow svg{width:15px;height:15px}
.byp-experience .byp-dyk .byp-d-dyk__claim{font-family:var(--bypa-serif);font-size:1.12rem;
line-height:1.42;margin:0 0 .6rem;max-width:none;color:var(--bypa-ink)}
.byp-experience .byp-dyk .byp-d-dyk__src{font-family:var(--bypa-mono);font-size:.74rem;
line-height:1.4;color:var(--bypa-ink3);margin:0;max-width:none}
.byp-experience .byp-dyk .byp-d-dyk__src a{color:var(--bypa-ink3);border-bottom:1px solid var(--bypa-rule)}
.byp-dyk--rail{margin:0;padding:16px 18px}
.byp-dyk--rail .byp-d-dyk__claim{font-size:1rem}
/* ---- WHAT HAPPENS AT YOUR HOUSE (the poll) ---------------------------------
The rejected version was four radio circles running together on one line.
These are cards: a label, a line of recognition, a whole-card hit target.
The is visually hidden but never display:none, so keyboard and
screen-reader users keep native radio-group semantics — arrow keys move
between options, space selects, the legend names the group. */
.byp-experience .byp-poll,.byp-rail .byp-poll{background:var(--bypa-surface);
border:1px solid var(--bypa-rule);border-left:4px solid var(--bypa-accent);
border-radius:10px;padding:1.2rem 1.35rem;margin:2.2rem 0}
.byp-poll__label{font-family:var(--bypa-mono);font-size:.72rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--bypa-accent);margin:0 0 .55rem}
.byp-poll__fieldset{border:0;margin:0;padding:0}
.byp-poll__q{font-family:var(--bypa-serif);font-size:1.15rem;line-height:1.38;font-weight:600;
color:var(--bypa-ink);margin:0 0 .9rem;padding:0;max-width:none}
.byp-poll__cards{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:640px){.byp-poll__cards{grid-template-columns:1fr}}
.byp-poll__card{position:relative;display:flex;align-items:flex-start;gap:.6rem;
padding:.75rem .85rem;border:1px solid var(--bypa-rule);border-radius:8px;cursor:pointer;
background:var(--bypa-paper);transition:border-color .12s,background .12s;
min-height:44px}
.byp-poll__card:hover{border-color:var(--bypa-accent)}
.byp-poll__input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.byp-poll__card-body{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.byp-poll__card-label{font-family:var(--bypa-ui);font-size:.92rem;font-weight:700;
color:var(--bypa-ink);line-height:1.25}
.byp-poll__card-desc{font-family:var(--bypa-ui);font-size:.82rem;line-height:1.35;
color:var(--bypa-ink3)}
.byp-poll__card-mark{flex:0 0 16px;width:16px;height:16px;margin-top:.15rem;border-radius:50%;
border:2px solid var(--bypa-rule);background:transparent}
.byp-poll__input:checked+.byp-poll__card-body+.byp-poll__card-mark{border-color:var(--bypa-accent);
box-shadow:inset 0 0 0 3px var(--bypa-accent)}
.byp-poll__card:has(.byp-poll__input:checked){border-color:var(--bypa-accent);
background:var(--bypa-accent-soft)}
/* Focus is on the CARD, because the input it belongs to is invisible. :focus-within is the
only way a hidden control can show the sighted keyboard user where they are. */
.byp-poll__card:focus-within{outline:2px solid var(--bypa-accent);outline-offset:2px}
.byp-poll__go{margin-top:.9rem;font-family:var(--bypa-ui);font-size:.88rem;font-weight:700;
padding:.65rem 1.15rem;border:0;border-radius:8px;background:var(--bypa-accent);
color:var(--bypa-paper);cursor:pointer;min-height:44px}
.byp-poll__go[disabled]{opacity:.45;cursor:default}
.byp-poll__err{font-family:var(--bypa-ui);font-size:.82rem;color:var(--bypa-bad);margin:.6rem 0 0}
.byp-experience .inner-post-entry .byp-poll__rows,
.byp-poll__rows{list-style:none!important;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.byp-poll__rows li::marker{content:""}
.byp-poll__row{margin:0}
.byp-poll__rowlabel{display:flex;align-items:baseline;gap:.5rem;font-family:var(--bypa-ui);
font-size:.88rem;color:var(--bypa-ink);margin-bottom:.3rem}
.byp-poll__rowlabel b{margin-left:auto;font-variant-numeric:tabular-nums}
.byp-poll__you{font-family:var(--bypa-mono);font-size:.66rem;font-style:normal;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--bypa-accent)}
.byp-poll__track{display:block;height:8px;border-radius:4px;background:var(--bypa-rule);overflow:hidden}
.byp-poll__fill{display:block;height:100%;border-radius:4px;background:var(--bypa-ink3);
transition:width .5s ease}
.byp-poll__row--chosen .byp-poll__fill{background:var(--bypa-accent)}
.byp-poll__payoff{font-family:var(--bypa-ui);font-size:.88rem;line-height:1.5;
color:var(--bypa-ink2);margin:.9rem 0 0}
.byp-poll__caveat{font-family:var(--bypa-mono);font-size:.72rem;color:var(--bypa-ink3);margin:.6rem 0 0}
@media(prefers-reduced-motion:reduce){.byp-poll__fill{transition:none}}
/* ---- HERO CAPTION: a caption, not a caption bar over the picture ----------
The parent styles .penci-featured-caption as an overlay — absolutely
positioned, bottom:0, white text on rgba(0,0,0,.5) — which is a magazine
device for a photograph and exactly wrong for a diagram: it lands on top of
the artwork it is describing and hides the part it is pointing at. Made
static so it reads as a line of type underneath, like every other caption
in the article. */
.byp-experience .post-image{position:static}
.byp-experience .penci-featured-caption{position:static!important;background:none!important;
color:var(--bypa-ink3)!important;padding:0!important;margin:.7rem 0 0!important;width:auto!important;
font-family:var(--bypa-mono);font-size:.8rem!important;line-height:1.5;text-align:left}
/* ---- SHARE ROW -------------------------------------------------------------
Four platform brand colours under a BetterYou+ headline is four brands
competing with the article. The parent paints them with !important from
three-class selectors, so these carry `body` to win on specificity rather
than by shouting louder. Same affordance, this publication's palette. */
body.byp-experience .tags-share-box .post-share-item,
body.byp-experience .tags-share-box .post-share a,
body.byp-experience .tags-share-box [class*="pcsc-brandflag"]{
background:transparent!important;background-color:transparent!important;
color:var(--bypa-ink2)!important;border:1px solid var(--bypa-rule)!important;border-radius:6px!important}
body.byp-experience .tags-share-box .post-share-item:hover,
body.byp-experience .tags-share-box .post-share a:hover{
border-color:var(--bypa-accent)!important;color:var(--bypa-accent)!important}
body.byp-experience .tags-share-box .post-share-plike{color:var(--bypa-accent)!important}
body.byp-experience .tags-share-box{border-color:var(--bypa-rule)!important}
/* ---- HERO: light and dark variants -----------------------------------------
Soledad's dark mode is a body class, not a media query, so a with
prefers-color-scheme would follow the operating system instead of the
reader's own toggle. Two images, one shown per theme — the same mechanism
the masthead logo uses. */
.byp-hero--has-dark img[data-byp-theme="dark"]{display:none}
body.pcdark-mode .byp-hero--has-dark img[data-byp-theme="light"]{display:none}
body.pcdark-mode .byp-hero--has-dark img[data-byp-theme="dark"]{display:block}
/* ---- ARTICLE NEWSLETTER: the 68ch column cannot hold three tracks ----------
The module is a three-column grid (icon | copy | 280-380px form). Inside the
article's 555px reading column the grid's maximize step gives the form its
full 380px BEFORE the copy track gets anything, leaving the copy 41px wide —
one word per line. The parent's own stacking rule is a VIEWPORT query, so it
never fires while the viewport is wide and the container is narrow.
Fix: on wide viewports drop the form to its own row inside the article only,
and undo the article h2/p typography that outranks the module's own rules.
Gated at 861px so the parent's mobile rule keeps winning below it. */
@media(min-width:861px){
.byp-experience .inner-post-entry .byp-a-nl{grid-template-columns:auto minmax(0,1fr);row-gap:18px}
.byp-experience .inner-post-entry .byp-a-nl .byp-d-nl__form{grid-column:1/-1}
.byp-experience .inner-post-entry .byp-a-nl .byp-d-nl__form input{flex:1 1 220px;min-width:0}
.byp-experience .inner-post-entry .byp-a-nl h2{margin:0 0 4px;padding-top:0;font-size:22px}
.byp-experience .inner-post-entry .byp-a-nl p{margin:0;font-size:14.5px;line-height:1.5}
}
.byp-d-nl__consent{flex-basis:100%;display:flex;gap:8px;align-items:flex-start;
font-family:var(--byp-ui);font-size:12.5px;line-height:1.45;color:var(--byp-meta);cursor:pointer}
.byp-d-nl__consent input{margin-top:2px;flex:0 0 auto}
.byp-d-nl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.byp-d-nl__notice{font-family:var(--byp-ui);font-size:14px;margin:0 0 4px!important;font-weight:600}
.byp-d-nl__notice[data-state="ok"]{color:var(--byp-try,#2C6B3F)}
.byp-d-nl__notice[data-state="err"]{color:var(--byp-myth,#7B1E2D)}
.byp-d-nl__pending{font-family:var(--byp-ui);font-size:13.5px;color:var(--byp-meta);margin:0}
/* ============================================================================
ACCESSIBILITY REPAIRS — found by certification, not by reading the code
Each of these is a measured WCAG failure on the article page, with the
measurement that produced it recorded beside the fix.
============================================================================ */
/* 1.4.3 Contrast (Minimum) — the category eyebrow above the title.
Crimson on soft ivory measures 3.96:1 at 13px/400. tokens.css already says crimson
is for "large text and buttons only, never small body"; the eyebrow is small body
text that happens to be a link, so it takes the colour the system reserves for
links: burgundy, 9.51:1. */
body.byp-experience .penci-cat-name,
body.byp-experience .penci-cat-name a { color: var(--byp-authority); }
/* 1.4.3 — Soledad prints the like counter in whatever penci_single_number_like_color
holds, which is white. On the BetterYou+ share row, whose ground is soft ivory
rather than the dark chip the setting was chosen for, that renders a "0" at 1.07:1:
an invisible number, not a hidden one. The colour is corrected at the theme_mod
in article-experience.php so the fix travels with the setting rather than fighting
it here; this rule only guarantees it against the parent's own !important. */
body.byp-experience .post-share .count-number-like { color: var(--byp-ink-2) !important; }
/* 2.4.7 Focus Visible — the parent theme sets outline:none on form controls, which
removed the ring from the article newsletter's email field: a keyboard user could
land in it with no indication at all. This is a floor, not a style: anything
focusable that has not been given its own ring gets this one. :focus-visible keeps
it off mouse clicks.
The parent, and the Customizer CSS it prints inline after every stylesheet, zero the
outline width on several link sets — the footer menu, the social row, the category
eyebrow, the like control. A focus indicator is the one place !important is the correct
tool: it is a floor the design is not allowed to fall through, not a preference. */
body a:focus-visible, body button:focus-visible, body input:focus-visible,
body select:focus-visible, body textarea:focus-visible, body summary:focus-visible,
body [tabindex]:focus-visible, body label:focus-visible {
outline: 2px solid var(--byp-authority) !important; outline-offset: 2px !important; }
body.pcdark-mode a:focus-visible, body.pcdark-mode button:focus-visible,
body.pcdark-mode input:focus-visible, body.pcdark-mode select:focus-visible,
body.pcdark-mode textarea:focus-visible, body.pcdark-mode summary:focus-visible,
body.pcdark-mode [tabindex]:focus-visible, body.pcdark-mode label:focus-visible {
outline-color: var(--byp-coral) !important; }
body .byp-d-nl__form input:focus-visible,
body .byp-a-nl input:focus-visible,
body .byp-a-nl button:focus-visible { outline: 2px solid var(--byp-authority) !important;
outline-offset: 2px; }
body.pcdark-mode .byp-d-nl__form input:focus-visible,
body.pcdark-mode .byp-a-nl input:focus-visible,
body.pcdark-mode .byp-a-nl button:focus-visible { outline-color: var(--byp-coral) !important; }
/* 2.4.1 Bypass Blocks — 31 tab stops separated the top of the page from the first
word of the article. A keyboard or switch user paid that toll on every article.
The link is invisible until it is focused, so it changes nothing for a mouse. */
.byp-skip { position: absolute; left: -9999px; top: 0; z-index: 100000;
background: var(--byp-canvas); color: var(--byp-ink); font-family: var(--byp-ui);
font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 0 0 8px 0;
border: 2px solid var(--byp-authority); text-decoration: none; }
.byp-skip:focus { left: 0; }
/* --------------------------------------------------------------------------
ADVERTISING INVENTORY
Reserved boxes, labelled as house placeholders. The heights here must stay
equal to the inline min-height the PHP writes, which is the creative's
height plus 24px for the label — reserving only the creative leaves the word
"Advertisement" to push the page down when it appears.
-------------------------------------------------------------------------- */
.byp-ad{flex-direction:column;gap:6px;text-align:center;padding:10px}
.byp-ad__house{font-size:.62rem;letter-spacing:.04em;text-transform:none;opacity:.62;
max-width:26ch;line-height:1.35}
/* The end-of-article unit sits after "Was this helpful?" and before Continue
reading, which is where advertising.END_SEQUENCE puts it: the reader has
finished and the editorial payoff is complete and unbroken. Responsive
rather than a hard 728x90, because 728px does not fit a phone. */
.byp-ad--end{margin:2.2rem 0 1.6rem;width:100%}
.byp-rail .byp-ad--rail[data-format="300x600"]{min-height:624px}
@media(prefers-reduced-motion:no-preference){.byp-ad{transition:none}}
/* --------------------------------------------------------------------------
CONTEXTUAL RELATED — an editorial branch, not an advertisement
Restrained on purpose. It has to read as the publication talking, which
means it must NOT look like a widget, a promo or a card. A rule, a small
uppercase key, and a link that behaves like a link.
-------------------------------------------------------------------------- */
.byp-inline-rel{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;
font-family:var(--bypa-read);font-size:1rem;line-height:1.5;
margin:1.9rem 0;padding:.85rem 0 .85rem 1rem;
border-left:3px solid var(--bypa-accent);background:none}
.byp-inline-rel__k{flex:0 0 auto;font-family:var(--bypa-mono);font-size:.68rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--bypa-accent);
transform:translateY(-1px)}
.byp-inline-rel__a{color:var(--bypa-ink);text-decoration:none;
border-bottom:1px solid var(--bypa-rule);transition:border-color .15s ease,color .15s ease}
.byp-inline-rel__a:hover{color:var(--bypa-accent);border-bottom-color:var(--bypa-accent)}
@media(prefers-reduced-motion:reduce){.byp-inline-rel__a{transition:none}}
@media(max-width:600px){
.byp-inline-rel{font-size:.96rem;padding-left:.85rem;gap:.45rem}
.byp-inline-rel__k{flex-basis:100%}
}
/* --------------------------------------------------------------------------
THE DYNAMIC STICKY RAIL
Three states are rendered; one is visible. `hidden` does the work, so a
state that is not showing is out of the accessibility tree too — a screen
reader meets the rail once, not three times.
-------------------------------------------------------------------------- */
.byp-rail__state[hidden]{display:none}
/* The rail lives in its own sticky column, so a change of height inside it
cannot move the article. That is what keeps a content swap from being a
layout shift, and certification measures CLS afterwards to prove it. */
.byp-rail{contain:layout}
.byp-rail__nl .byp-d-nl{grid-template-columns:1fr;padding:18px 16px;margin-top:0}
.byp-rail__nl .byp-d-nl__i{display:none}
.byp-rail__nl .byp-d-nl h2{font-size:17px}
.byp-rail__nl .byp-d-nl p{font-size:13px}
.byp-rail__nl .byp-d-nl__form{margin-left:0;width:100%}
/* --------------------------------------------------------------------------
IN THIS ARTICLE — horizontal, in the article, after the hero
Moved out of the right rail on 2026-08-29. Nielsen Norman names the right
rail the weakest of the three placements — "susceptible to right-rail
blindness" — and that column is about to carry real advertising, which is
the thing readers are blind to. A reader following one argument uses a
contents list once, to decide whether to commit. It has to be where they
are actually looking.
A rule above and below rather than a filled box: this is article furniture,
not a widget.
-------------------------------------------------------------------------- */
.byp-toc--h{background:transparent;border:0;border-top:1px solid var(--bypa-rule);
border-bottom:1px solid var(--bypa-rule);border-radius:0;padding:.85rem 0;margin:1.6rem 0 2rem}
.byp-toc--h .byp-toc__d{margin:0}
.byp-toc--h .byp-toc__s{list-style:none;cursor:default;display:block}
.byp-toc--h .byp-toc__s::-webkit-details-marker{display:none}
.byp-toc--h .byp-toc__h{margin:0 0 .55rem!important}
/* Two columns, not one row.
A true horizontal row was built first and measured: in a 555px reading column, section
headings of five to seven words are 264-354px wide, so one or two fit per line and the
module came out 310px tall — taller than the vertical list it replaced. The measure and
the headings are both correct and both fixed, so the row was the wrong shape. Two columns
brings it to about 120px and stays scannable.
The counter is drawn rather than using list-style so the numbers sit inline with the
text and survive the column break. */
.byp-toc--h ol{columns:2;column-gap:2.2rem;margin:0;padding:0 !important;list-style:none;
counter-reset:byptoc}
.byp-toc--h li{margin:.2rem 0;font-size:.82rem;line-height:1.4;counter-increment:byptoc;
break-inside:avoid;display:flex;gap:.45rem;align-items:baseline}
.byp-toc--h li::before{content:counter(byptoc);font-family:var(--bypa-mono);font-size:.68rem;
color:var(--bypa-ink3);font-variant-numeric:tabular-nums}
/* The links were inheriting the article's 17.6px serif body face, so every item wrapped to
two lines and the module came out 263px tall. A contents list is FURNITURE, not prose: it
takes the UI face at a smaller size, which is also what stops it competing with the
headline it sits under. Specificity has to beat `.inner-post-entry a`, which is why the
selector names the container. */
.byp-experience .inner-post-entry .byp-toc--h a,
.byp-toc--h a{font-family:var(--bypa-mono);font-size:.82rem;line-height:1.4;
letter-spacing:.005em;color:var(--bypa-ink2);text-decoration:none;
border-bottom:1px solid transparent}
.byp-experience .inner-post-entry .byp-toc--h a:hover,
.byp-experience .inner-post-entry .byp-toc--h a:focus-visible,
.byp-toc--h a:hover,.byp-toc--h a:focus-visible{color:var(--bypa-ink);
border-bottom-color:var(--bypa-accent)}
/* Mobile: an accordion. Six items stacked would cost most of a phone screen before the
article has said anything, so the summary becomes a real control with an affordance. */
@media(max-width:700px){
.byp-toc--h ol{columns:1}
.byp-toc--h .byp-toc__s{cursor:pointer;display:flex;align-items:center;
justify-content:space-between;padding:.15rem 0;min-height:34px}
.byp-toc--h .byp-toc__s::after{content:"";width:8px;height:8px;flex:0 0 8px;
border-right:2px solid var(--bypa-ink3);border-bottom:2px solid var(--bypa-ink3);
transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.byp-toc--h .byp-toc__d[open] .byp-toc__s::after{transform:rotate(-135deg) translateY(-2px)}
.byp-toc--h .byp-toc__h{margin:0!important}
.byp-toc--h .byp-toc__d[open] .byp-toc__h{margin:0 0 .5rem!important}
}
@media(prefers-reduced-motion:reduce){.byp-toc--h .byp-toc__s::after{transition:none}}
/* ---- an article whose rail earned nothing keeps the width, not the hole ---------------
Soledad's single layout is two floats: #main at 71% and #sidebar at 29%. When the rail
plan approves no module, the aside is not rendered at all, and without this the article
still sits in the left 71% with a blank third beside it. Centring #main is the whole fix:
the measure is unchanged, so nothing about the reading column moves except its position. */
@media (min-width: 1025px) {
body.byp-no-rail #sidebar { display: none; }
body.byp-no-rail .container-single #main { float: none; margin-left: auto; margin-right: auto; }
}