/* Showcase batch 2 shared base. Reset, container, section rhythm, showcase bar and
   footer only. Every sample links this identical block, so externalize-styles.py
   dedupes it to one cached file, and each sample's own stylesheet carries nothing
   but its palette, its type and its section layouts. Tokens are consumed here and
   defined there: a sample that forgets one shows it immediately. */
@layer reset, theme, base, primitives, showcase, header, hero, sections, footer, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, table, fieldset, legend { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  fieldset { border: 0; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  html:focus-within { scroll-behavior: smooth; }
}

@layer base {
  body {
    font-family: var(--body); font-size: var(--t-base); line-height: 1.62;
    color: var(--type); background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 {
    font-family: var(--display); font-weight: var(--display-weight);
    letter-spacing: var(--display-track); line-height: 1.08;
    color: var(--ink); text-wrap: balance;
  }
  p { text-wrap: pretty; max-width: 64ch; }
  strong { color: var(--ink); font-weight: 650; }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 3px;
  }
  .skip { position: absolute; left: -9999px; }
  .skip:focus {
    left: 1rem; top: 1rem; z-index: 100; padding: var(--s-3) var(--s-4);
    background: var(--accent); color: var(--accent-ink); border-radius: var(--r-sm); font-weight: 700;
  }
}

@layer primitives {
  .container { max-width: 1220px; margin: 0 auto; padding: 0 var(--s-5); }
  @media (min-width: 900px) { .container { padding: 0 var(--s-6); } }
  .container--narrow { max-width: 860px; }

  .section { padding: var(--s-8) 0; }
  @media (min-width: 900px) { .section { padding: var(--s-9) 0; } }
  .section--alt { background: var(--paper-alt); }
  .section--deep { background: var(--deep); color: var(--on-deep-soft); }
  .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-deep); }
  .section--deep p { color: var(--on-deep-soft); }
  .section--flush { padding-bottom: 0; }

  .section__head { max-width: 60ch; margin-bottom: var(--s-6); display: grid; gap: var(--s-3); }
  .section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
  .section__title { font-size: var(--t-3xl); }
  .section__title em { font-style: var(--em-style); color: var(--accent-2); }
  .section--deep .section__title em { color: var(--accent); }
  .section__sub { font-size: var(--t-md); color: var(--type-soft); }
  .section--deep .section__sub { color: var(--on-deep-soft); }

  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--body); font-size: var(--t-2xs); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2);
  }
  .section--deep .eyebrow { color: var(--accent); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--tap-min); padding: 0 var(--s-5);
    font-family: var(--btn-font); font-size: var(--t-sm); font-weight: 700;
    letter-spacing: var(--btn-track); text-transform: var(--btn-case);
    border: 2px solid transparent; border-radius: var(--r-btn); cursor: pointer;
    transition: transform 170ms var(--ease), background-color 170ms var(--ease), border-color 170ms var(--ease), color 170ms var(--ease);
  }
  .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-2px); }
  .btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-mid); }
  .btn--quiet:hover { border-color: var(--ink); transform: translateY(-2px); }
  .btn--ondeep { background: transparent; color: var(--on-deep); border-color: var(--line-deep); }
  .btn--ondeep:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

  .stack { display: grid; gap: var(--s-4); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); }
}

@layer showcase {
  .showcase-bar { background: var(--ink); color: var(--on-deep); font-size: var(--t-xs); padding: var(--s-2) 0; }
  .showcase-bar__inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
  .showcase-bar__tag {
    font-family: var(--display); font-weight: 700; font-size: var(--t-3xs);
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  }
  .showcase-bar__msg { color: var(--on-deep-soft); }
  .showcase-bar__msg strong { color: var(--on-deep); }
  .showcase-bar a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
}

@layer header {
  .site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--header-bg); border-bottom: 1px solid var(--header-line);
  }
  .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 74px; }
  .brand { display: flex; align-items: center; gap: var(--s-3); }
  .brand__mark {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    background: var(--mark-bg); color: var(--mark-ink); border-radius: var(--r-mark);
    font-family: var(--display); font-weight: 700; font-size: var(--t-lg);
  }
  .brand__name { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t-base); color: var(--ink); letter-spacing: var(--display-track); }
  .brand__sub { display: block; font-size: var(--t-2xs); color: var(--type-mute); letter-spacing: .04em; }
  .nav { display: flex; align-items: center; gap: var(--s-5); }
  .nav > a:not(.btn) { font-size: var(--t-sm); font-weight: 550; color: var(--type); }
  .nav > a:not(.btn):hover { color: var(--ink); }
  .nav > a.is-current { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
  @media (max-width: 1000px) {
    .nav > a:not(.btn) { display: none; }
    .brand__sub { display: none; }
  }
}

@layer footer {
  .site-footer { background: var(--ink); color: var(--on-deep-soft); padding: var(--s-7) 0 var(--s-5); font-size: var(--t-sm); }
  .site-footer__grid { display: grid; gap: var(--s-5); }
  @media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
  .site-footer__sample { font-family: var(--display); font-size: var(--t-lg); font-weight: 700; color: var(--on-deep); }
  .site-footer__sample em { font-style: var(--em-style); color: var(--accent); }
  .site-footer__cta-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
  .site-footer__cta-body { margin-top: var(--s-2); color: var(--on-deep-soft); }
  .site-footer a { color: var(--on-deep); border-bottom: 1px solid var(--line-deep); }
  .site-footer a:hover { border-color: var(--accent); }
  .site-footer__socials { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
  .site-footer__socials-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--type-mute); }
  .social-list { display: flex; gap: var(--s-3); }
  .social-list a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-deep); border-radius: var(--r-mark); }
  .social-list svg { width: 15px; height: 15px; fill: currentColor; }
  .site-footer__rule { height: 1px; background: var(--line-deep); margin: var(--s-5) 0; }
  .site-footer__base { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; font-size: var(--t-xs); color: var(--type-mute); }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html:focus-within { scroll-behavior: auto; }
  }
}