/* DPC-T-WEB-067: common responsive frame and type roles. Page composition stays local. */
:root {
 --dpc-content-gutter:clamp(var(--step-spacing-16),2.25vw,var(--step-spacing-exception-48));
 --dpc-content-canvas:1648px;
 --dpc-reading-measure:860px;
 --dpc-public-title-size:var(--step-typography-scale-36);
 --dpc-public-heading-weight:var(--step-typography-weight-regular);
 --dpc-public-section-space:var(--step-spacing-exception-48);
}
@media(min-width:1440px) {:root {--dpc-public-title-size:var(--step-typography-scale-48)}}
@media(max-width:699px) {:root {--dpc-public-title-size:var(--step-typography-scale-30);--dpc-public-section-space:var(--step-spacing-32)}}
/* DPC public components v1 — shared implementation for Home and About.
 * Load after tokens/navigation/shell, before page composition styles.
 * Owners: page profile, body/heading/text roles, centred container, button,
 * vertical stack and public-shell adapter. All occurrences inherit CSS rules;
 * page files own narrative composition and explicit variants only.
 * Home and About profiles preserve the accepted appearance, including deliberate
 * gutter, heading, focus, button-border and shell differences. No other routes
 * adopt this stylesheet implicitly. Header/footer HTML remains in _portal/theme.php.
 */
:root[data-dpc-page="home"] {
 --dpc-page-gutter:clamp(16px,2.25vw,40px);
 --dpc-canvas:none;
 --dpc-title-size:var(--step-typography-scale-30);
 --dpc-title-weight:500;
 --dpc-title-tracking:-.02em;
 --dpc-heading-weight:600;
 --dpc-subheading-size:var(--step-typography-scale-18);
 --dpc-stack-gap:var(--step-spacing-16);
 --dpc-button-display:inline-flex;
 --dpc-button-ink:var(--step-color-surface-white);
 --dpc-button-border:1px solid var(--step-color-brand-forest);
 --dpc-button-line-height:1.4;
}
:root[data-dpc-page="about"] {
 --dpc-page-gutter:clamp(var(--step-spacing-16),2.25vw,var(--step-spacing-exception-48));
 --dpc-canvas:1648px;
 --dpc-title-size:var(--step-typography-scale-36);
 --dpc-title-weight:var(--step-typography-weight-regular);
 --dpc-title-tracking:-.025em;
 --dpc-heading-weight:var(--step-typography-weight-regular);
 --dpc-subheading-size:var(--step-typography-scale-20);
 --dpc-stack-gap:var(--step-spacing-8);
 --dpc-button-display:flex;
 --dpc-button-ink:var(--step-color-ink-inverse);
 --dpc-button-border:0 none currentColor;
 --dpc-button-line-height:inherit;
}
:where([data-dpc-page]),:where([data-dpc-page]) * {box-sizing:border-box}
:where([data-dpc-page]) body {margin:0;background:var(--step-color-surface-white);color:var(--step-color-ink-primary);font-family:var(--step-typography-family-sans);font-size:var(--step-typography-scale-18);font-weight:var(--step-typography-weight-regular);line-height:1.55}
html:where([data-dpc-page="home"]) {scroll-behavior:smooth;background:var(--step-color-surface-white)}
html:where([data-dpc-page="about"]) {scroll-behavior:auto}
.dpc-container {width:calc(100% - 2 * var(--dpc-page-gutter));max-width:var(--dpc-canvas);margin-inline:auto}
.dpc-stack {display:grid;gap:var(--dpc-stack-gap)}
:where([data-dpc-page="home"]) main section,:where([data-dpc-page="about"]) .about-main section {scroll-margin-top:96px}
:where([data-dpc-page="home"]) h1,:where([data-dpc-page="home"]) h2,:where([data-dpc-page="home"]) h3,:where([data-dpc-page="home"]) p,:where([data-dpc-page="about"]) .about-main :is(h1,h2,h3,p,ul,ol) {margin:0}
:where([data-dpc-page="home"]) :is(h1,h2,h3),:where([data-dpc-page="about"]) .about-main :is(h1,h2,h3) {text-wrap:pretty}
:where([data-dpc-page="home"]) :is(h1,h2,h3) {overflow-wrap:break-word}
:where([data-dpc-page="home"]) h1,:where([data-dpc-page="about"]) .about-main h1 {font-size:var(--dpc-title-size);font-weight:var(--dpc-title-weight);line-height:1.2;letter-spacing:var(--dpc-title-tracking)}
:where([data-dpc-page="home"]) h2,:where([data-dpc-page="about"]) .about-main h2 {font-size:var(--step-typography-scale-24);font-weight:var(--dpc-heading-weight);line-height:1.3}
:where([data-dpc-page="home"]) h3,:where([data-dpc-page="about"]) .about-main h3 {font-size:var(--dpc-subheading-size);font-weight:var(--dpc-heading-weight);line-height:1.4;color:var(--step-color-brand-forest)}
:where([data-dpc-page="home"]) .explanation-section :is(h2,h3) {font-weight:var(--step-typography-weight-regular)}
:where([data-dpc-page="home"]) .explanation-section h3 {font-size:var(--step-typography-scale-20)}
:where([data-dpc-page="home"]) h1 strong {font-weight:inherit;color:var(--step-color-brand-forest)}
:where([data-dpc-page="home"]) p,:where([data-dpc-page="about"]) .about-main p {color:var(--step-color-ink-secondary)}
:where([data-dpc-page="home"]) p+p {margin-top:var(--step-spacing-16)}
:where([data-dpc-page="about"]) .about-main p {text-wrap:pretty}
:where([data-dpc-page="about"]) .about-main :is(ul,ol) {padding:0;list-style:none}
:where([data-dpc-page="home"]) a {color:inherit}
:where([data-dpc-page="home"]) a:focus-visible {outline:3px solid var(--step-color-brand-forest);outline-offset:4px}
:where([data-dpc-page="about"]) .about-main a {color:var(--step-color-brand-forest);text-underline-offset:4px}
:where([data-dpc-page="about"]) .about-main a:focus-visible {outline:2px solid currentColor;outline-offset:4px}
.dpc-button {display:var(--dpc-button-display);align-items:center;justify-content:center;min-height:48px;padding:var(--step-spacing-12) var(--step-spacing-24);border:var(--dpc-button-border);border-radius:var(--step-radius-control);background:var(--step-color-brand-forest);color:var(--dpc-button-ink);font-size:var(--step-typography-scale-16);font-weight:var(--step-typography-weight-medium);line-height:var(--dpc-button-line-height);text-decoration:none;text-align:center}
.dpc-button:hover {background:var(--step-color-brand-forestDark)}
.dpc-button.secondary {background:var(--step-color-surface-white);color:var(--step-color-brand-forest)}
.cta-actions .dpc-button {background:var(--step-color-surface-white);color:var(--step-color-brand-forest);border-color:var(--step-color-surface-white)}
:where([data-dpc-page="about"]) .about-button {color:var(--step-color-ink-inverse)!important}
/* Public header/footer presentation is owned only by dpc-site-nav.css and dpc-public-shell.css. */
@media(min-width:1100px) {:root[data-dpc-page="home"] {--dpc-title-size:var(--step-typography-scale-36)}}
@media(min-width:1440px) {:root[data-dpc-page="about"] {--dpc-title-size:var(--step-typography-scale-48)}}
@media(max-width:699px) {:root[data-dpc-page="about"] {--dpc-title-size:var(--step-typography-scale-30)}}