/* brownstas.ru: shared layout and components. Product palettes remain local. */
:root{
  --container-main:1440px;
  --container-reading:900px;
  --measure-reading:68ch;
  --page-gutter:48px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --space-24:96px;--space-32:128px;
  --section-space:var(--space-24);
  --section-space-compact:var(--space-12);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --radius-device:32px;--radius-pill:999px;
  --shadow-sm:0 4px 16px rgb(28 28 25 / 6%);
  --shadow-md:0 16px 48px rgb(28 28 25 / 12%);
  --bg-primary:#f7f6f2;--bg-secondary:#eeede6;--surface-primary:#fdfcf9;
  --text-primary:#1c1c19;--text-secondary:#65655e;
  --border-subtle:rgb(28 28 25 / 16%);
  --accent-primary:#c83e22;--accent-hover:#a72f18;
  --transition-fast:180ms;
  --control-height:48px;--target-size:44px;
  --bp-mobile:640px;--bp-tablet:1024px; /* documented breakpoint tokens; media queries use these literals */
  --radius:var(--radius-lg);
}
html{scroll-padding-top:112px}
body h1.ds-page-title{font-size:var(--type-display);font-weight:600;line-height:var(--type-leading-heading);letter-spacing:-.045em}
html[data-type-surface=app] body h1.ds-page-title{font-size:var(--type-title);line-height:1.2}
body .logo span{font-size:var(--type-caption);line-height:1.5}
body .logo span[aria-hidden=true]{font-size:var(--type-logo);line-height:1}
body .small-link{font-size:var(--type-ui);min-height:var(--target-size);display:inline-flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-4)}
*,*::before,*::after{box-sizing:border-box}
[data-design-scope=portfolio] body{
  --bg:var(--bg-primary);--surface:var(--surface-primary);--text:var(--text-primary);
  --muted:var(--text-secondary);--line:var(--border-subtle);--accent:var(--accent-primary);
  background:var(--bg);color:var(--text)
}
.wrap.ds-container{width:min(var(--container-main),calc(100% - var(--page-gutter)*2));margin-inline:auto}
body :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent-primary);outline-offset:4px}
body :is(button,a){transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast)}
.reveal{transition-duration:var(--transition-fast)}
.hero-line{animation-duration:240ms}
.marquee-track{animation:none;transform:none}
body :is(button,.btn,.button,.primary,.secondary){font-family:var(--font-ui)}
body :is(.btn,.button,.primary,.secondary){min-height:var(--control-height);padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);line-height:1.45;white-space:normal}
body :is(.icon,.icon-btn,.round-link,.menu-toggle,.dialog-close){min-width:var(--target-size);min-height:var(--target-size);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
body button:disabled{opacity:.5;cursor:not-allowed}
[data-design-scope=portfolio] :is(.btn,.button){border:1px solid var(--line);background:transparent;color:var(--text);font-weight:500}
[data-design-scope=portfolio] :is(.btn-primary,.button-primary){background:var(--accent);color:white;border-color:var(--accent)}
[data-design-scope=portfolio] :is(.btn-primary,.button-primary):hover{background:var(--accent-hover);border-color:var(--accent-hover);color:white}
[data-design-scope=portfolio] .btn:not(.btn-primary):hover{background:var(--bg-secondary);border-color:var(--text-secondary)}
[data-design-scope=portfolio] :is(.ch-demo-band,.experience-band) .btn:not(.btn-primary){background:var(--surface-primary);color:var(--text-primary);border-color:var(--surface-primary)}
[data-design-scope=portfolio] :is(.text-link,.project-links a,.catalog-links a,.source-links a){min-height:var(--target-size);display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
[data-design-scope=portfolio] :is(.text-link,.project-links a,.catalog-links a,.source-links a):hover{color:var(--accent);text-decoration-thickness:2px}
.site-header{position:sticky;top:0;z-index:90;background:var(--bg-primary);border-bottom:1px solid var(--border-subtle);backdrop-filter:none}
.site-header .header-inner{min-height:88px;position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);border:0}
.site-header .brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-primary);font-size:16px;font-weight:600;line-height:1.4;white-space:nowrap;text-decoration:none}
.site-header .brand-mark{font-size:28px;color:var(--accent-primary);line-height:1}
.site-header .brand-specialty{font-size:12px;color:var(--text-secondary);font-weight:400}
.site-header .nav{display:flex;position:static;gap:var(--space-6);padding:0;border:0;box-shadow:none;background:transparent;flex-direction:row;border-radius:0}
.site-header .nav a{min-height:var(--target-size);display:inline-flex;align-items:center;font-size:14px;color:var(--text-secondary);padding:0;text-decoration:none}
.site-header .nav a:hover,.site-header .nav a[aria-current=page]{color:var(--accent-primary)}
.site-header .ds-header-action{display:inline-flex;align-items:center;min-height:var(--target-size);font-size:14px;white-space:nowrap;color:var(--accent-primary);text-decoration:none}
.site-header .menu-toggle,.site-header .ds-menu-action{display:none}
.site-header .menu-toggle{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-primary);padding:0;color:var(--text-primary);font-size:22px}
.site-footer{border-top:1px solid var(--border-subtle);padding-block:var(--space-12);margin-top:var(--space-16);background:var(--bg-primary);color:var(--text-secondary)}
.ds-footer-inner{display:flex;align-items:start;justify-content:space-between;gap:var(--space-8);font-size:12px}
.ds-footer-inner>div{display:grid;gap:var(--space-2)}
.ds-footer-inner nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);align-items:center;justify-content:end}
.ds-footer-inner nav a{display:inline-flex;align-items:center;min-height:var(--target-size);font-size:14px;line-height:1.5;text-decoration:underline;text-underline-offset:5px}
.ds-footer-inner a:hover{color:var(--accent-primary)}
[data-design-scope=portfolio] :is(.section,.case-section,.ch-section){padding-block:var(--section-space)}
[data-design-scope=portfolio] :is(.solution-band,.experience-band,.ch-demo-band,.playground){padding-block:var(--section-space);margin-block:0}
[data-design-scope=portfolio] :is(.section-head,.screen-heading,.ch-screen-head,.experience-heading){margin-bottom:var(--space-12);gap:var(--space-8)}
[data-design-scope=portfolio] :is(.section-index,.ch-label){margin-bottom:var(--space-8)}
[data-design-scope=portfolio] :is(.hero,.case-hero,.ch-hero){padding-top:var(--space-16);padding-bottom:var(--space-16)}
[data-design-scope=portfolio] :is(.hero h1,.case-hero h1,.ch-hero h1){margin-block:var(--space-8)}
[data-design-scope=portfolio] :is(.case-intro,.ch-intro){display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;gap:var(--space-8);margin-block:var(--space-8);padding:0}
[data-design-scope=portfolio] :is(.case-intro,.ch-intro)>:last-child{justify-self:end}
[data-design-scope=portfolio] :is(.case-intro>p,.ch-intro p,.hero-copy,.service-lead,.reading,.ch-reading,.proof-intro,.service-body p){max-width:var(--measure-reading)}
[data-design-scope=portfolio] :is(.reading p,.ch-reading p,.proof-grid p,.case-offer p,.ch-contact p){margin-bottom:var(--space-6)}
[data-design-scope=portfolio] :is(.case-meta,.ch-meta){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);margin-block:var(--space-8) var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--line)}
[data-design-scope=portfolio] .ch-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-design-scope=portfolio] :is(.case-meta dt,.ch-meta dt){margin-bottom:var(--space-2);letter-spacing:.06em}
[data-design-scope=portfolio] :is(.case-meta dd,.ch-meta dd){margin:0}
[data-design-scope=portfolio] :is(.editorial-split,.decision-layout,.ch-split,.ch-responsive,.ch-system){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
[data-design-scope=portfolio] :is(.screen-pair,.ch-two-screens,.catalog-grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
[data-design-scope=portfolio] :is(.principles,.proof-grid,.ch-architecture,.evidence-flow,.state-examples){gap:var(--space-8)}
[data-design-scope=portfolio] :is(.panel,.ch-architecture article,.evidence-flow article,.service-example){padding:var(--space-8);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none}
[data-design-scope=portfolio] :is(.case-offer,.ch-contact,.admin-try){padding:var(--space-12);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-secondary);margin-block:var(--space-16)}
[data-design-scope=portfolio] .project{padding-block:var(--space-8);column-gap:var(--space-8);border-color:var(--line);box-shadow:none}
[data-design-scope=portfolio] :is(.work-cover,.catalog-cover){aspect-ratio:3/2;height:auto;min-height:0;max-height:none;padding:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
[data-design-scope=portfolio] :is(.work-cover,.catalog-cover) img{display:block;width:100%;height:100%;border-radius:0;object-position:top;transition:transform var(--transition-fast)}
[data-design-scope=portfolio] :is(.work-cover,.catalog-cover):hover img{transform:scale(1.02)}
[data-design-scope=portfolio] :is(.project-info,.catalog-card){min-width:0}
[data-design-scope=portfolio] :is(.project-info p,.catalog-description){max-width:var(--measure-reading)}
[data-design-scope=portfolio] :is(.project-links,.catalog-links){display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-4)}
[data-design-scope=portfolio] .catalog-meta{margin-block:var(--space-6) var(--space-3)}
[data-design-scope=portfolio] :is(.catalog-intro,.service-main){padding-top:var(--space-16)}
[data-design-scope=portfolio] .catalog-intro{padding-bottom:var(--space-12)}
[data-design-scope=portfolio] .catalog-contact{padding-block:var(--section-space-compact);margin-top:var(--space-16)}
[data-design-scope=portfolio] .service-body{max-width:var(--container-reading);margin:var(--space-16) auto}
[data-design-scope=portfolio] .service-section{padding-block:var(--section-space-compact)}
[data-design-scope=portfolio] .implementation{width:min(var(--container-reading),calc(100% - var(--page-gutter)*2));max-width:none;padding:var(--space-16) 0;margin-inline:auto}
[data-design-scope=portfolio] :is(.case-cover,.admin-cover,.decision-screen){padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:none}
[data-design-scope=portfolio] :is(.case-cover>img,.screen-figure>img,.admin-cover>img,.ch-screen>img,.ch-main-shot>img){width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:none}
[data-design-scope=portfolio] :is(.screen-pair,.ch-two-screens){margin-top:var(--space-8)}
[data-design-scope=portfolio] :is(.case-cover figcaption,.screen-figure figcaption,.ch-screen figcaption,.ch-main-shot figcaption,.admin-cover figcaption){padding-top:var(--space-4);margin-top:0;gap:var(--space-4);font-size:var(--type-caption);line-height:1.5}
[data-design-scope=portfolio] :is(.phone-shell,.ch-phone){max-width:390px;margin-inline:auto}
[data-design-scope=portfolio] :is(.try-steps li>span,.demo-note,.phone-caption){color:var(--text-secondary)}
[data-design-scope=portfolio] .demo-note p{color:var(--text-secondary)}
[data-design-scope=portfolio] :is(.next-case,.ch-next){padding-block:var(--space-8);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--space-16)}
[data-design-scope=portfolio] :is(.next-case strong,.ch-next strong){margin-block:var(--space-4);line-height:1.25}
[data-design-scope=portfolio] .contact{padding-top:var(--section-space)}
body :is(input:not([type=checkbox],[type=radio],[type=range]),select,textarea){min-height:var(--control-height);border-radius:var(--radius-sm)}
body :is(dialog){border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
body :is(.demo-dialog:fullscreen){border-radius:0}
/* Shared neutral text for the travel demo, preserving its green accents. */
body[data-view]{--muted:var(--text-secondary)}
body[data-view] .pack-row:has(input:checked) .item-name{color:var(--text-secondary)}
body[data-view] :is(.explore-heading span,.destinations-head span,.destinations-head small,.section-title>span,.concept-note){color:var(--text-secondary)}
@media(max-width:1024px){
  :root{--page-gutter:32px;--section-space:var(--space-16)}
  .site-header .header-inner{min-height:80px}
  .site-header .ds-header-action{display:none}
  .site-header .menu-toggle{display:inline-flex}
  .site-header .nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface-primary);padding:var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
  .site-header .nav.open{display:flex}
  .site-header .nav a{padding:var(--space-3);min-height:var(--target-size)}
  .site-header .nav .ds-menu-action{display:inline-flex;color:var(--accent-primary);border-top:1px solid var(--border-subtle);margin-top:var(--space-2)}
  [data-design-scope=portfolio] :is(.editorial-split,.decision-layout,.ch-split,.ch-responsive,.ch-system){gap:var(--space-8)}
  [data-design-scope=portfolio] :is(.case-meta,.ch-meta){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :root{--page-gutter:20px;--section-space:var(--space-12);--section-space-compact:var(--space-8)}
  html{scroll-padding-top:96px}
  .site-header .header-inner{min-height:72px;gap:var(--space-4)}
  .site-header .brand-specialty{display:none}
  .ds-footer-inner{flex-direction:column;gap:var(--space-6)}
  .ds-footer-inner nav{justify-content:start;gap:var(--space-2) var(--space-4)}
  .site-footer{padding-block:var(--space-8);margin-top:var(--space-12)}
  [data-design-scope=portfolio] :is(.hero,.case-hero,.ch-hero,.catalog-intro,.service-main){padding-top:var(--space-8)}
  [data-design-scope=portfolio] :is(.hero,.case-hero,.ch-hero){padding-bottom:var(--space-8)}
  [data-design-scope=portfolio] :is(.hero h1,.case-hero h1,.ch-hero h1){margin-block:var(--space-6)}
  [data-design-scope=portfolio] :is(.case-intro,.ch-intro,.editorial-split,.decision-layout,.ch-split,.ch-responsive,.ch-system,.screen-pair,.ch-two-screens,.catalog-grid){grid-template-columns:1fr;gap:var(--space-6)}
  [data-design-scope=portfolio] :is(.case-intro,.ch-intro)>:last-child{justify-self:start}
  [data-design-scope=portfolio] :is(.case-intro,.ch-intro){margin-block:var(--space-6)}
  [data-design-scope=portfolio] :is(.case-meta,.ch-meta){gap:var(--space-6) var(--space-4);margin-block:var(--space-8);padding-top:var(--space-6)}
  [data-design-scope=portfolio] :is(.section-head,.screen-heading,.ch-screen-head,.experience-heading){margin-bottom:var(--space-8);gap:var(--space-6)}
  [data-design-scope=portfolio] :is(.panel,.ch-architecture article,.evidence-flow article,.service-example,.case-offer,.ch-contact,.admin-try){padding:var(--space-6)}
  [data-design-scope=portfolio] :is(.case-cover,.admin-cover,.decision-screen){padding:var(--space-3)}
  [data-design-scope=portfolio] .project{padding-block:var(--space-6);row-gap:var(--space-4)}
  [data-design-scope=portfolio] :is(.principles,.proof-grid,.ch-architecture,.evidence-flow,.state-examples){gap:var(--space-6)}
  [data-design-scope=portfolio] .next-case strong{font-size:var(--type-title)}
}
.site-header .nav .ds-menu-action{display:none}
@media(max-width:1024px){.site-header .nav .ds-menu-action{display:flex}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
}