@layer vendor, reset, tokens, base, layout, components, utilities;

@import url("tokens.css") layer(tokens);
@import url("components.css") layer(components);

@layer reset{
  *{box-sizing:border-box;margin:0;padding:0}
  img,svg{max-width:100%;display:block}
  ul,ol{list-style:none}
  a{color:inherit;text-decoration:none}
  button,input,select,textarea{font:inherit;color:inherit}
}

@layer base{
  html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset)}

  body{
    background:var(--color-surface);
    color:var(--color-text);
    font-family:var(--font-sans);
    font-size:17px;
    line-height:var(--leading-base);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3{
    font-family:var(--font-serif);
    font-weight:300;
    line-height:var(--leading-tight);
    letter-spacing:var(--tracking-tight);
    text-wrap:balance;
  }

  h1 em,h2 em{font-style:italic;color:var(--color-accent)}

  :focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

  @media (max-width:640px){
    body{font-size:16px}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  }
}

@layer layout{
  .wrap{width:min(100% - var(--space-8),var(--wrap));margin-inline:auto}

  section{padding:var(--space-24) 0}

  .band{background:var(--color-surface)}

  .band--dark{
    --color-surface:var(--navy-900);
    --color-surface-raised:rgba(243,236,224,.05);
    --color-text:var(--sand-100);
    --color-text-muted:var(--lilac-200);
    --color-accent:var(--blue-300);
    --color-brand:var(--blue-300);
    --color-border:rgba(243,236,224,.18);
    background:var(--color-surface);
    color:var(--color-text);
  }

  .band--flush-top{padding-top:0}

  .band--soft{
    --color-surface:var(--sand-50);
    background:var(--color-surface);
    border-block:1px solid var(--color-border);
  }

  .duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .duo p+p{margin-top:var(--space-4)}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
  .cards--auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

  @media (max-width:900px){
    section{padding:var(--space-18) 0}
    .duo,.split{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr 1fr}
  }

  @media (max-width:640px){
    section{padding:var(--space-16) 0}
    .cards{grid-template-columns:1fr}
  }
}

@layer utilities{
  .hand{font-family:var(--font-hand);font-weight:600}

  .eyebrow{
    display:inline-block;
    font-size:var(--text-xs);
    font-weight:600;
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
    color:var(--color-brand);
  }

  .lead{
    margin-top:var(--space-5);
    max-width:58ch;
    font-size:var(--text-lg);
    color:var(--color-text-muted);
  }

  .lead--large{font-size:1.22rem}
}