/* Main-site contract. Keep palette and component variants in style.css.
 * Layer order, not selector escalation, resolves shared roles.
 * Standalone demonstration landings never load this file.
 */
@layer tokens, components, system, accessibility;

@layer tokens {
  :root {
    --font-heading: "Days One", system-ui, sans-serif;
    --font-body: "Golos Text", system-ui, sans-serif;
    --type-h1: clamp(1.875rem, 1.5rem + 1.2vw, 2.75rem);
    --type-h2: clamp(1.625rem, 1.45rem + .55vw, 2rem);
    --type-h3: clamp(1.25rem, 1.15rem + .3vw, 1.5rem);
    --type-reading-heading: clamp(1.5rem, 1.35rem + .5vw, 1.75rem);
    --type-body: 1.0625rem;
    --type-lead: 1.125rem;
    --type-small: .875rem;
    --type-label: .75rem;
    --type-stat: clamp(2rem, 2.2vw, 2.5rem);
    --leading-heading: 1.18;
    --leading-body: 1.7;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --layout-wide: 1380px;
    --layout-reading: 68ch;
    --layout-gutter: 24px;
    --layout-section: var(--space-20);
    /* Reserve the fixed shell before the first breadcrumb or heading. */
    --layout-hero-top: 104px;
    --layout-hero-bottom: var(--space-16);
    --layout-grid-gap: var(--space-12);
    --layout-heading-gap: var(--space-8);
    --control-height: 48px;
    --control-radius: 8px;
    --surface-radius: 16px;
    --media-radius: 12px;
  }

  @media (max-width: 900px) {
    :root {
      --layout-grid-gap: var(--space-8);
      --layout-section: var(--space-16);
    }
  }

  @media (max-width: 680px) {
    :root {
      --type-h1: 1.875rem;
      --type-h2: 1.625rem;
      --type-h3: 1.25rem;
      --layout-gutter: 16px;
      --layout-section: var(--space-12);
      --layout-hero-top: 96px;
      --layout-hero-bottom: var(--space-12);
      --layout-grid-gap: var(--space-6);
      --layout-heading-gap: var(--space-6);
    }
  }
}

@layer system {
  body.shared-site-shell {
    --site-section-space: var(--layout-section);
    --site-content-gap: var(--layout-grid-gap);
    --site-heading-copy-gap: var(--space-4);
    --article-space-xs: var(--space-3);
    --article-space-sm: var(--space-4);
    --article-space-md: var(--space-6);
    --article-space-lg: var(--space-8);
    --article-space-xl: var(--space-10);
    --article-space-2xl: var(--space-12);
    --article-prose-section: var(--space-12);
    --article-prose-subsection: var(--space-8);
    --article-section-space: var(--layout-section);
    --article-radius: var(--surface-radius);
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  /* Inline editorial links remain identifiable without relying on color. */
  body.shared-site-shell :where(.content-link) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
  }
  body.shared-site-shell :where(.content-link:hover) { text-decoration-thickness: 2px; }

  /* One hierarchy across the homepage, services, cases and editorial pages. */
  body.shared-site-shell :where(main h1, main h2, main h3, main h4) {
    min-width: 0;
    max-width: none;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-synthesis: none;
    line-height: var(--leading-heading);
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  /* Linked titles keep the heading role instead of the generic link face. */
  body.shared-site-shell :where(main h1 a, main h2 a, main h3 a, main h4 a) {
    font-family: inherit;
    font-weight: inherit;
  }

  body.shared-site-shell :where(main h1) { font-size: var(--type-h1); }
  body.shared-site-shell :where(main h2) { font-size: var(--type-h2); }
  body.shared-site-shell :where(main h3) { font-size: var(--type-h3); line-height: 1.3; }
  body.shared-site-shell :where(main h4) { font-size: 1.125rem; line-height: 1.4; }

  body.shared-site-shell :where(main p, main li, main dd) {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  body.shared-site-shell :where(main h1 + p) { margin-block: var(--space-6) 0; }
  body.shared-site-shell :where(main h2 + p, main h3 + p, main h4 + p) { margin-block: var(--space-4) 0; }
  body.shared-site-shell :where(main p + p) { margin-top: var(--space-4); }

  /* Outer frames share one width. Reading measures belong to their children. */
  body.shared-site-shell :where(main .container, main .shell, .home-shell, .detail-shell, .portfolio-shell, .article-shell, .site-header .header-inner, .footer .container) {
    width: min(calc(100% - var(--layout-gutter) * 2), var(--layout-wide));
    max-width: none;
    margin-inline: auto;
  }

  body.shared-site-shell :where(main .container, main .shell, .home-shell, .detail-shell, .portfolio-shell, .article-shell, .footer .container) {
    padding-inline: 0;
  }

  /* Section surfaces span the page; only the inner frame supplies side gutters. */
  body.shared-site-shell :where(main > section) { margin-inline: 0; padding-block: var(--layout-section); }
  body.shared-site-shell :where(.detail-hero, .portfolio-hero, .dt-hero, .pa-detail-hero, .ak-about-hero, .ak-contacts-hero, .legal-hero, .articles-hero, .article-hero) {
    padding-block: var(--layout-hero-top) var(--layout-hero-bottom);
  }
  body.shared-site-shell :where(.home-hero) { padding-block: 146px var(--space-16); }
  body.shared-site-shell :where(.home-stack) { padding-block: var(--space-6); }
  body.shared-site-shell :where(.articles-featured) { padding-block: 0 var(--layout-section); }
  body.shared-site-shell :where(.beka-cover) { padding-block: var(--space-12); }

  body.shared-site-shell :where(.inner-breadcrumbs, .article-breadcrumbs, .portfolio-breadcrumbs, .pa-breadcrumbs, .dt-breadcrumbs) {
    margin-block: 0 var(--space-8);
    font-size: var(--type-label);
    line-height: 1.5;
  }

  body.shared-site-shell :where(.portfolio-hero__grid, .dt-hero__grid, .pa-detail-hero__grid, .ak-contacts-hero__grid, .ak-about-hero__grid, .articles-hero__grid, .detail-hero__grid) {
    gap: var(--layout-grid-gap);
    min-width: 0;
  }
  body.shared-site-shell :where(.portfolio-hero__grid > *, .dt-hero__grid > *, .pa-detail-hero__grid > *, .ak-contacts-hero__grid > *, .ak-about-hero__grid > *, .articles-hero__grid > *, .detail-hero__grid > *, .legal-layout > *) { min-width: 0; }
  body.shared-site-shell :where(.portfolio-hero__grid, .articles-hero__grid) { align-items: start; }

  body.shared-site-shell :where(.home-hero__lead, .detail-hero__copy > p, .portfolio-hero__copy > p, .dt-hero__copy > p, .pa-detail-hero p, .ak-about-hero__copy > p, .ak-contacts-hero__lead > p, .legal-hero .lead, .article-hero__copy > p, .article-lead, .articles-hero__grid > p) {
    max-width: var(--layout-reading);
    font-size: var(--type-lead);
    line-height: 1.65;
  }

  body.shared-site-shell :where(.home-heading, .detail-heading, .ak-about-section__head, .articles-section-heading) { margin-bottom: var(--layout-heading-gap); }
  body.shared-site-shell :where(.home-heading > p, .detail-heading > p) { margin-block: var(--space-4) 0; }
  body.shared-site-shell :where(.portfolio-story__content h2, .portfolio-extra__copy h2, .beka-section-head h2, .dt-section-intro h2, .ak-about-section__intro h2) { max-width: 26ch; }
  body.shared-site-shell :where(.detail-capability h3, .detail-direction h3, .detail-type h3, .detail-example h3, .beka-text-card h3, .specialist-scope h3, .specialist-estimate h3, .home-route h3) { margin-bottom: var(--space-3); }
  body.shared-site-shell :where(.detail-intro__content > p + h3) { margin-top: var(--space-8); }
  body.shared-site-shell :where(.home-actions, .detail-hero__actions, .dt-hero__actions, .pa-detail-actions) { margin-top: var(--space-6); gap: var(--space-4); }
  body.shared-site-shell :where(.home-kicker, .portfolio-kicker, .pa-detail-label, main .eyebrow) { font-size: var(--type-label); font-weight: 600; line-height: 1.5; }
  body.shared-site-shell :where(.portfolio-story__client, .detail-example__role) { font-size: var(--type-small); font-weight: 600; line-height: 1.5; }
  body.shared-site-shell :where(.brief-note, .brief-status, .detail-offer__note, .specialist-estimate__note, .ak-contact-legal__intro p) { font-size: var(--type-small); line-height: 1.65; }
  body.shared-site-shell :where(.portfolio-hero__facts dd, .dt-facts dd, .pa-detail-facts dd) { font-size: var(--type-small); line-height: 1.6; }
  body.shared-site-shell :where(.dt-media__title) { font-size: var(--type-h3); max-width: none; line-height: 1.3; }
  body.shared-site-shell :where(.dt-migration__flow strong) { font-size: var(--type-stat); line-height: 1.2; }

  /* Editorial cards keep the entire image; copy no longer dictates crop. */
  body.shared-site-shell :where(.article-feature__copy) { padding: var(--space-8); gap: var(--space-4); }
  body.shared-site-shell :where(.article-feature__copy h2) { font-size: var(--type-h3); }
  body.shared-site-shell :where(.article-card__body) { padding: var(--space-6); }
  body.shared-site-shell :where(.article-card h3) { font-size: var(--type-h3); }
  body.shared-site-shell :where(.article-feature__summary, .article-card p) { font-size: var(--type-body); line-height: 1.65; }
  body.shared-site-shell :where(.article-hero__copy) { max-width: 960px; margin-block: var(--space-8) var(--space-10); }
  body.shared-site-shell :where(.article-hero__copy > p) { margin-block: var(--space-6) 0; }
  body.shared-site-shell :where(.article-meta) { margin-top: var(--space-6); }

  /* Read mode: narrower measure and meaningful vertical rhythm. */
  body.shared-site-shell :where(.article-layout) {
    grid-template-columns: 184px minmax(0, 720px);
    gap: var(--space-16);
    padding-block: var(--space-16) var(--layout-section);
  }
  body.shared-site-shell :where(.article-content) { font-size: var(--type-body); line-height: var(--leading-body); }
  body.shared-site-shell :where(.article-content > section + section, .article-content > .article-note + section) { margin-top: var(--space-12); }
  body.shared-site-shell :where(.article-content h2, .legal-card h2) { font-size: var(--type-reading-heading); margin-bottom: var(--space-6); }
  body.shared-site-shell :where(.article-content h3) { font-size: var(--type-h3); margin-block: var(--space-8) var(--space-3); }
  body.shared-site-shell :where(.article-content p) { margin-block: 0; }
  body.shared-site-shell :where(.article-content p + p) { margin-top: var(--space-4); }
  body.shared-site-shell :where(.article-content > .article-lead) { margin-bottom: var(--space-10); }
  body.shared-site-shell :where(.article-content ul, .article-content ol) { margin-block: var(--space-6); gap: var(--space-3); }
  body.shared-site-shell :where(.article-content :is(ul, ol, .article-definition-grid, .article-checklist) + p) { margin-top: var(--space-6); }
  body.shared-site-shell :where(.article-checklist p, .article-definition-grid p, .article-note p) { font-size: var(--type-small); line-height: 1.65; }
  body.shared-site-shell :where(.article-checklist p) { padding: var(--space-6) var(--space-6) var(--space-6) 52px; margin: 0; }
  body.shared-site-shell :where(.article-checklist strong, .article-checklist small) { display: block; }
  body.shared-site-shell :where(.article-checklist small) { margin-top: var(--space-2); font-size: inherit; }
  body.shared-site-shell :where(.article-cta) { margin-top: var(--space-12); padding: var(--space-8); }
  body.shared-site-shell :where(.article-cta h2) { font-size: var(--type-reading-heading); margin-bottom: var(--space-4); }
  body.shared-site-shell :where(.legal-side h2) { font-family: var(--font-body); font-size: var(--type-small); font-weight: 600; margin-bottom: var(--space-4); }
  body.shared-site-shell :where(.legal-card) { padding: var(--space-8); }
  body.shared-site-shell :where(.legal-card h2) { max-width: none; overflow-wrap: anywhere; }
  body.shared-site-shell :where(.legal-card p, .legal-card li) { font-size: var(--type-body); }

  /* Controls and compact component text are roles, not page-specific guesses. */
  body.shared-site-shell :where(.btn, .home-button, .portfolio-button, .article-button, .brief-submit) {
    min-height: var(--control-height);
    font-size: var(--type-small);
    line-height: 1.4;
  }
  body.shared-site-shell :where(.site-header .btn) { min-height: 44px; }
  body.shared-site-shell :where(.brief-aside h2) { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-weight: 400; font-size: var(--type-h2); line-height: var(--leading-heading); }
  body.shared-site-shell :where(.footer-section h2) { margin: 0 0 var(--space-4); font-family: "Manrope", var(--font-body); font-size: var(--type-label); font-weight: 600; line-height: 1.5; }
  body.shared-site-shell :where(.brief-form input, .brief-form textarea, .brief-form select) { font-size: 1rem; line-height: 1.5; }
  body.shared-site-shell :where(.article-toc a, .article-toc > strong, .article-meta, .inner-breadcrumbs a, .article-breadcrumbs a) { font-size: var(--type-label); line-height: 1.6; }

  @media (max-width: 1000px) {
    body.shared-site-shell :where(.article-layout) { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    body.shared-site-shell :where(.article-content) { width: min(100%, 720px); margin-inline: auto; }
  }

  @media (max-width: 680px) {
    body.shared-site-shell :where(.home-hero) { padding-block: 116px var(--space-12); }
    body.shared-site-shell :where(.article-feature__copy, .article-card__body, .article-cta, .legal-card) { padding: var(--space-6); }
    body.shared-site-shell :where(.article-hero__copy) { margin-block: var(--space-6) var(--space-8); }
    body.shared-site-shell :where(.article-hero__copy > p) { font-size: var(--type-body); }
    body.shared-site-shell :where(.article-layout) { padding-block: var(--space-12); }
    body.shared-site-shell :where(.article-content > section + section, .article-content > .article-note + section) { margin-top: var(--space-10); }
    body.shared-site-shell :where(.article-content h2, .legal-card h2) { font-size: 1.5rem; }
    body.shared-site-shell :where(.article-cta > div, .articles-contact__grid > div) { gap: var(--space-4); }
  }

  @media (max-width: 560px) {
    /* Fixed shell is not a content container. Keep brand and menu usable at 320px. */
    body.shared-site-shell :where(.site-header .header-inner) { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); }
    body.shared-site-shell :where(.site-header .brand, .site-header .brand-logo) { width: 40px; min-width: 40px; }
    body.shared-site-shell :where(.site-header .header-actions) { gap: var(--space-2); justify-self: end; }
    body.shared-site-shell :where(.site-header .header-actions > .btn-primary) { padding-inline: var(--space-3); font-size: var(--type-label); }
    body.shared-site-shell :where(.site-header .header-actions > .btn-primary)::after { display: none; }
  }
}

@layer accessibility {
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.shared-site-shell *, body.shared-site-shell ::before, body.shared-site-shell ::after {
      scroll-behavior: auto;
      animation-duration: .01ms;
      animation-delay: 0s;
      animation-iteration-count: 1;
      transition-duration: .01ms;
      transition-delay: 0s;
    }
    body.shared-site-shell :where(.reveal, [data-home-reveal]) { opacity: 1; transform: none; }
  }
}