@layer base, layout, components, responsive;

@layer base {
  :root {
    color-scheme: light;
    --paper: #f7f7f2;
    --ink: #192e32;
    --muted: #536568;
    --accent: #176150;
    --line: #d5ded6;
    --soft: #eaf0e8;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 100%;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
  }
  body { margin: 0; }
  :where(h1, h2, h3, p, dl, dd) { margin: 0; }
  :where(h1, h2, h3) { line-height: 1.15; font-weight: 620; text-wrap: balance; }
  h1 { font-size: clamp(2.3rem, 1.35rem + 3.3vw, 4.8rem); letter-spacing: -.055em; }
  h2 { font-size: clamp(1.65rem, 1.2rem + 1.3vw, 2.35rem); letter-spacing: -.035em; }
  h3 { font-size: 1.12rem; letter-spacing: -.015em; }
  a { color: var(--accent); text-underline-offset: .22em; overflow-wrap: anywhere; }
  a:hover { text-decoration-thickness: .12em; }
  a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
  :target { scroll-margin-block-start: 2rem; }
  .muted { color: var(--muted); }
  .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
  .lead { font-size: clamp(1.1rem, .95rem + .6vw, 1.35rem); line-height: 1.55; }
}

@layer layout {
  .wrap { inline-size: min(70rem, calc(100% - 3rem)); margin-inline: auto; }
  .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; border-block-end: 1px solid var(--line); }
  .site-header nav a, .site-footer nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 4rem; align-items: center; padding-block: 5.25rem 5rem; }
  .hero h1 { margin-block: 1.1rem 1.5rem; }
  .hero-detail { max-inline-size: 35rem; color: var(--muted); margin-block: 1rem 1.8rem; }
  .content-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 4rem; padding-block: 3.5rem; border-block-start: 1px solid var(--line); }
  .section-heading h2 { max-inline-size: 20rem; margin-block-start: .85rem; }
  .contact-section { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 3.5rem; }
  .contact-section h2 { margin-block-start: .7rem; }
  .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; border-block-start: 1px solid var(--line); padding-block: 1.5rem; font-size: .85rem; color: var(--muted); }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
  .document { max-inline-size: 47rem; padding-block: 3.5rem; }
  .document-heading { padding-block-end: 2rem; border-block-end: 1px solid var(--line); }
  .document-heading h1 { font-size: clamp(2.1rem, 1.1rem + 3vw, 3.8rem); margin-block: .8rem 1rem; overflow-wrap: anywhere; }
  .document-heading .lead { margin-block-start: 1.2rem; }
  .document section { margin-block-start: 2.25rem; }
  .document section h2 { font-size: 1.35rem; }
  .document section p, .document section ul { margin-block-start: 1rem; }
  .document section li { padding-inline-start: .25rem; margin-block: .5rem; }
}

@layer components {
  .skip-link { position: absolute; inset-block-start: -8rem; inset-inline-start: 1rem; padding: .7rem 1rem; background: var(--paper); z-index: 1; }
  .skip-link:focus { inset-block-start: .5rem; }
  .brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); font-size: 1.15rem; line-height: 1.25; letter-spacing: .06em; font-weight: 750; text-decoration: none; }
  .brand-mark { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; background: var(--ink); color: var(--paper); border-radius: .7rem .7rem .15rem .7rem; font-size: 1.35rem; font-weight: 500; }
  .brand-caption { display: block; margin-block-start: .25rem; font-size: .67rem; font-weight: 450; letter-spacing: .01em; color: var(--muted); }
  .site-header nav a { font-size: .9rem; font-weight: 600; text-decoration: none; }
  .button { display: inline-flex; align-items: center; gap: 1.5rem; padding: .85rem 1.2rem; background: var(--accent); color: white; border: 1px solid var(--accent); border-radius: .35rem; font-size: .95rem; font-weight: 600; text-decoration: none; }
  .button:hover { background: var(--ink); }
  .fact-panel { background: var(--soft); border: 1px solid var(--line); border-block-start: 3px solid var(--accent); border-radius: .3rem; padding: 1.75rem; }
  .fact-panel dl { margin-block-start: 1.25rem; }
  .fact-panel dl div { padding-block: .9rem; }
  .fact-panel dl div:not(:last-child) { border-block-end: 1px solid var(--line); }
  .fact-panel dt { font-size: .75rem; color: var(--muted); }
  .fact-panel dd { font-size: .95rem; font-weight: 580; }
  .panel-note { margin-block-start: 1.1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
  .feature-list article { display: flex; gap: 1.5rem; padding-block: 1.4rem; }
  .feature-list article:first-child { padding-block-start: 0; }
  .feature-list article:not(:last-child) { border-block-end: 1px solid var(--line); }
  .feature-list p { margin-block-start: .6rem; color: var(--muted); }
  .number { color: var(--accent); font-size: .8rem; font-variant-numeric: tabular-nums; padding-block-start: .1rem; }
  .notice { padding: 2rem; border-inline-start: 3px solid var(--accent); background: var(--soft); }
  .notice h2 { font-size: 1.4rem; }
  .notice p { margin-block-start: .8rem; max-inline-size: 58rem; }
  .contact-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; gap: .5rem; font-size: clamp(.95rem, .8rem + .5vw, 1.15rem); }
  .back-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; margin-block-start: 2rem; }
}

@layer responsive {
  @media (max-width: 48rem) {
    .hero, .content-section { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .hero { padding-block: 3rem; }
    .hero-detail { display: none; }
    .hero .button { margin-block-start: 1.5rem; }
    .content-section { padding-block: 2.75rem; }
    .section-heading h2 { max-inline-size: none; }
    .fact-panel { padding: 1.4rem; }
    .fact-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
    .fact-panel dl div { border-block-end: 0; padding-block: .4rem; }
    .document { padding-block: 2.5rem; }
  }
  @media (max-width: 25rem) {
    .wrap { inline-size: calc(100% - 2rem); }
    .site-header { gap: .75rem; }
    .brand-caption { font-size: .6rem; }
    .notice { padding: 1.25rem; }
    .fact-panel dl { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
    .feature-list article { gap: 1rem; }
  }
  @media (forced-colors: active) {
    .button, .brand-mark, .fact-panel, .notice { border: 1px solid CanvasText; }
  }
}