/* Shared UI layer for every page (home, blog, cases, about, thanks, 404).
   Loaded last. Values come only from /tokens.css. */

/* Header: brand and menu button never drop below the 14px text minimum. */
@media(max-width:1050px){
 header.site-header>a{font-size:var(--text-14)!important}
 header.site-header>.menu-toggle{font-size:var(--text-14)!important}
}
/* The header CTA keeps one look on every page (orange, dark arrow). */
.site-header>button[data-open-request]{white-space:nowrap}

/* Closing CTA button: full width inside its card, same primary look as everywhere. */
.ending-action .ending-button{width:100%;border:0!important}

/* Constant decorative motion is removed; meaningful one-time reveals stay. */
.kenburns{animation:none!important}
.pulse{animation:none!important}

/* Touch targets on phones and tablets: at least 44×44 without changing the desktop look. */
@media(max-width:1050px){
 .site-footer a,.site-footer button,.footer-bottom a,.footer-bottom button{display:inline-flex;align-items:center;min-height:var(--control-size)}
 .review-source{display:inline-flex;align-items:center;min-height:var(--control-size)}
 .ending-heading>a{display:inline-flex;align-items:center;min-height:var(--control-size)}
 .crumbs a,.breadcrumbs a{display:inline-flex;align-items:center;min-height:var(--control-size)}
}
@media(max-width:1050px){
 header.site-header>a{min-height:var(--control-size)}
 .crumbs a{min-width:var(--control-size);justify-content:center}
 .author-strip div>a,.author-profile{display:inline-flex;align-items:center;min-height:var(--control-size)}
}
@media(max-width:640px){
 .crumbs li:has(>[aria-current]):not(:nth-child(2)){display:none}
 .author-profile{display:none!important}
}
@media(max-width:1050px){.blog-author a{min-height:var(--control-size)}}
.ending-person img{object-position:50% 6%!important}
/* Phones use the same character assistant, with responsive sizes from assistant.css. */
/* Case pages: the sidebar scrolls with the page; only the table of contents stays in view, never clipped */
@media(min-width:801px){
 .story-layout>.project-info{position:relative!important;top:auto!important;max-height:none!important;overflow:visible!important;align-self:stretch!important}
 .story-layout>.project-info>nav{position:sticky;top:112px}
}
/* Shared footer (markup copied from the homepage by blog_build.py) */
.legal-links{display:flex;flex-wrap:wrap;gap:var(--space-8) var(--space-20);width:100%;font-size:var(--text-14);color:var(--muted);line-height:1.5}
/* Case stories read like blog articles: 18px, generous leading, ~68 characters per line */
.story .story-section p,.story .story-section li{font-size:var(--text-18)!important;line-height:1.7!important;max-width:68ch}
.story .story-section h2{margin-bottom:var(--space-16)}
@media(max-width:640px){.story .story-section p,.story .story-section li{font-size:var(--text-16)!important;line-height:1.7!important}}
/* Cases list: an odd last card spans the row (image left, text right) instead of hanging alone */
@media(min-width:801px){
 .project-grid>.project-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--space-40);align-content:center}
 .project-grid>.project-card:last-child:nth-child(odd)>.card-image{grid-row:1/span 6;align-self:start;margin:0}
 .project-grid>.project-card:last-child:nth-child(odd)>:not(.card-image){grid-column:2;align-self:start}
 .project-grid>.project-card:last-child:nth-child(odd)>.category{margin-top:var(--space-8)}
}

/* 404: readable numerals above the author's photo */
.error-art{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-20);padding:var(--space-40)}
.error-art::before{display:none!important}
.error-art .error-number{position:static!important;font-size:clamp(96px,13vw,184px)!important;color:var(--text-bronze)!important;letter-spacing:-.06em}
.error-art .character{width:160px;height:160px;border-radius:50%;object-fit:cover;object-position:50% 6%;position:static!important;transform:none!important}
.error-art .art-note{position:static!important;transform:none!important}
@media(max-width:760px){.error-art .character{width:112px;height:112px}}
/* About: caption under the rubric pills gets air */
.about-rubrics .rubrics{margin-bottom:var(--space-16)}
/* Thanks: no decorative orange circle above the heading */
.service-panel .service-symbol{display:none}
/* Shared footer and stray text links: 44px touch height on phones and tablets */
@media(max-width:1050px){
 footer a,footer button{display:inline-flex;align-items:center;min-height:var(--control-size)}
 .about-rubrics>a,.about-rubrics p>a{display:inline-flex;align-items:center;min-height:var(--control-size)}
}
/* 404: header card aligned with the content column */
@media(min-width:1051px){body:has(.error-art) .site-header::before{inset-inline:0!important}body:has(.error-art) .site-header{padding-inline:var(--space-16)!important}}

/* Keep the mobile launcher label readable at the shared 14px text size. */
@media(max-width:760px){
 #mo-assistant:not(.mo-helper-open) .mo-helper-launch{width:min(156px,calc(100vw - 24px))}
 #mo-assistant .mo-helper-label{display:flex;align-items:center;justify-content:center;min-height:44px;white-space:normal;text-align:center}
}