@layer reset, base, components, responsive;

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
}

@layer base {
  html{scroll-behavior:smooth}
  body{min-height:100svh;background:var(--background);color:var(--foreground);font-family:var(--font-sans);line-height:1.65}
  a{color:inherit;text-decoration:none}
  .skip-link{position:fixed;z-index:100;top:12px;left:12px;transform:translateY(-150%);padding:10px 14px;border-radius:var(--radius-md);background:var(--primary);color:var(--primary-foreground);font-weight:700}
  .skip-link:focus{transform:none}
  :focus-visible{outline:2px solid var(--ring);outline-offset:3px}
}

@layer components {
  .document-nav,.document-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100% - 40px,var(--content-max));margin-inline:auto}
  .document-nav{min-height:80px;border-bottom:1px solid var(--border)}
  .document-brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
  .document-nav nav,.document-footer nav{display:flex;align-items:center;gap:24px}
  .document-nav nav a,.document-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted-foreground);font-size:14px}
  .document-nav nav a:hover,.document-footer a:hover{color:var(--primary)}
  main{width:min(100% - 40px,64rem);margin-inline:auto}
  .document-hero{padding:clamp(72px,10vw,132px) 0 clamp(48px,7vw,88px);border-bottom:1px solid var(--border)}
  .document-eyebrow,.document-updated,.document-index{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
  .document-eyebrow,.document-index{color:var(--primary)}
  .document-hero h1{max-width:15ch;margin-top:20px;font-size:clamp(44px,8vw,88px);line-height:.98;letter-spacing:-.045em;text-transform:uppercase}
  .document-summary{max-width:var(--content-reading);margin-top:28px;color:var(--muted-foreground);font-size:clamp(17px,2vw,21px)}
  .document-updated{margin-top:30px;color:var(--subtle-foreground)}
  .document-body{padding:24px 0}
  .document-section{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:40px 0;border-bottom:1px solid var(--border)}
  .document-section h2{font-size:clamp(22px,3vw,30px);line-height:1.2}
  .document-section p{max-width:var(--content-reading);margin-top:12px;color:var(--muted-foreground)}
  .document-callout{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:48px 0 88px;padding:28px 30px;border:1px solid var(--gold-line);border-radius:var(--radius-xl);background:var(--gold-dim)}
  .document-callout p{font-weight:700}
  .document-callout a{display:inline-flex;align-items:center;min-height:44px;color:var(--primary);font-weight:700}
  .document-footer{min-height:96px;border-top:1px solid var(--border);color:var(--subtle-foreground);font-size:13px}
}

@layer responsive {
  @media(max-width:680px){
    .document-nav nav a:not(:last-child){display:none}
    .document-section{grid-template-columns:1fr;gap:10px;padding:32px 0}
    .document-callout,.document-footer{align-items:flex-start;flex-direction:column}
    .document-footer{padding-block:24px}
    .document-footer nav{flex-wrap:wrap;gap:8px 20px}
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
}