/* Hallmark · checked: 2026-10-31 · genre: modern-minimal · theme: brand · built: the project · redesign: polish · v2.0.0 */
/* Critique: the library uses actual demo captures; outcomes use plainly labeled examples with comparable units, not unsupported proof. */
/* Owner-requested hypothetical scenario values are explicitly labeled at page level and next to every comparison. No historical client claim is made. */
/* Hallmark · waive 83 · Cases is a library of twelve actual website screenshots and Home retains five owner-requested photo panels · The Cases project-grid and Home story-panel show the website examples and Better websites highlights the owner requested. */
:root { --library-well:color-mix(in srgb,var(--color-paper) 93%,var(--color-accent)); }
.library-controls { padding-bottom:var(--space-lg); border-bottom:1px solid var(--color-rule); }
.library-controls .filter-bar { display:flex; flex-wrap:wrap; gap:var(--space-xs); padding:0; margin-bottom:var(--space-lg); }
.library-controls .filter-button { border-radius:var(--radius-input); min-height:44px; padding:var(--space-xs) var(--space-md); border:1px solid var(--color-rule); font-size:14px; }
.library-refine { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap:var(--space-lg); }
.library-refine label { display:grid; gap:var(--space-xs); font-size:13px; }
.library-refine select,.library-refine input { min-height:48px; min-width:0; width:100%; border:1px solid var(--color-rule); border-radius:var(--radius-input); padding:var(--space-sm); background:var(--color-table); color:var(--color-ink); font:inherit; font-size:15px; }
.library-refine :focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.library-status { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding-block:var(--space-lg); }
.library-status p { font-size:14px; color:var(--color-muted); }
.library-status button { min-height:44px; border:0; background:transparent; color:var(--color-accent); padding-inline:0; font:inherit; font-size:14px; cursor:pointer; }
.project-capability { font-size:13px; color:var(--color-muted); margin-top:var(--space-sm); }
.project-caption { align-items:center; gap:var(--space-md); }
.project-caption h3 { font-size:27px; }
.project-caption h3 a:hover { text-decoration:underline; text-underline-offset:5px; }
.project-caption>span { white-space:normal; text-align:right; }
.library-empty { background:var(--library-well); padding:var(--space-2xl) var(--space-lg); text-align:center; }
.library-empty h3 { margin-bottom:var(--space-md); }
.library-empty p { margin-inline:auto; }
.results-intro { padding-bottom:var(--space-xl); }
.results-intro h1 { max-width:17ch; }
.results-disclosure { margin-top:var(--space-xl); border-left:2px solid var(--color-accent); padding-left:var(--space-lg); max-width:66ch; font-size:14px; }
.results-disclosure strong { font-weight:600; }
.results-disclosure p { margin-top:var(--space-xs); max-width:62ch; font-size:14px; line-height:1.6; }
.results-index { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); padding-block:var(--space-md); }
.results-index a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.outcome-story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2xl); padding-block:var(--space-3xl); border-top:1px solid var(--color-rule); scroll-margin-top:var(--space-lg); }
.outcome-picture>img { aspect-ratio:4/5; max-height:600px; object-fit:cover; }
.outcome-picture>p { margin-top:var(--space-md); font-size:14px; }
.outcome-body h2 { font-size:40px; max-width:15ch; }
.outcome-label { font-size:13px; color:var(--color-muted); margin-top:var(--space-md); }
.outcome-context { margin-block:var(--space-lg); display:grid; gap:var(--space-md); }
.outcome-context dt { font-size:13px; color:var(--color-muted); margin-bottom:var(--space-xs); }
.outcome-context dd { font-size:16px; line-height:1.6; margin:0; }
.outcome-comparison { background:var(--library-well); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-lg); padding:var(--space-lg); }
.outcome-comparison>div { display:flex; flex-direction:column; }
.outcome-comparison span { font-size:13px; }
.outcome-comparison strong { font-size:48px; line-height:1.2; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.outcome-comparison>p { grid-column:1/-1; font-size:14px; }
.outcome-meaning { font-size:14px; margin-top:var(--space-md); color:var(--color-muted); }
.outcome-body details { margin-top:var(--space-md); margin-bottom:var(--space-sm); }
.outcome-body summary { cursor:pointer; font-size:14px; padding-block:var(--space-sm); min-height:44px; }
.outcome-body details p { font-size:14px; margin-block:var(--space-sm); }
.outcome-body>.text-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.results-close { border-top:1px solid var(--color-rule); padding-block:var(--space-2xl); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2xl); align-items:center; }
.results-close p { margin-bottom:var(--space-lg); }
[hidden] { display:none!important; }
@media(max-width:960px) {
 .site-header { position:relative; }
 .site-header .menu-toggle { display:flex; }
 .site-header #main-nav { display:none; position:absolute; left:var(--gutter); right:var(--gutter); top:100%; background:var(--color-paper); padding:var(--space-lg); flex-direction:column; align-items:stretch; gap:var(--space-xs); border:1px solid var(--color-rule); z-index:80; }
 .site-header #main-nav.open { display:flex; }
 .site-header #main-nav a { min-height:44px; display:flex; align-items:center; }
 .site-header #main-nav .button { justify-content:center; }
 .outcome-story { gap:var(--space-lg); }
 .outcome-body h2 { font-size:34px; }
 .library-refine { gap:var(--space-md); }
}
@media(max-width:760px) {
 .library-refine { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .library-refine label:last-child { grid-column:1/-1; }
 .library-refine select { font-size:16px; }
 .library-controls .filter-button { padding-inline:var(--space-sm); font-size:13px; }
 .outcome-story,.results-close { grid-template-columns:minmax(0,1fr); gap:var(--space-xl); padding-block:var(--space-2xl); }
 .outcome-picture>img { aspect-ratio:4/3; }
 .outcome-body h2 { font-size:32px; max-width:17ch; }
 .outcome-comparison { gap:var(--space-md); }
 .results-index { gap:var(--space-xs) var(--space-md); }
 .results-intro h1 { font-size:36px; }
 .project-caption h3 { font-size:24px; }
 .project-caption>span { font-size:12px; text-align:left; }
}


.library-controls button:active,.library-status button:active { opacity:.75; }
.results-page h1,.results-page h2 { text-wrap:balance; }
.library-refine select,.library-refine input { border-color:var(--color-muted); }