/* Shared visual treatment for editorial pages and tools.
   Component colors, print layouts, content and application behavior stay local. */
@media screen {
  body.site-prose, body.site-writing, body.site-tool {
    background:#fff;
    color:#181b22;
  }
  .site-prose > .wrap { max-width:none; padding:0; }
  .site-writing > .wrap:first-child { max-width:none; padding:0; }

  .site-prose > .wrap > header,
  .site-writing > .wrap > header,
  .site-tool > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px 24px;
    min-height:60px;
    height:auto;
    padding:0 16px;
    margin:0;
    background:#fff;
    border:0;
    box-shadow:none;
    flex-shrink:0;
  }
  .site-prose header .wordmark,
  .site-writing header .logo,
  .site-tool > header > .logo {
    color:#181b22;
    font:600 17px/1.5 -apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
    letter-spacing:-.025em;
    text-transform:none;
    text-decoration:none;
  }
  .site-prose header .wordmark a { color:inherit; text-decoration:none; }
  .site-prose > .wrap > header > nav,
  .site-writing > .wrap > header > nav,
  .site-tool > header > nav {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0;
    font:400 16px/1 -apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  .site-prose > .wrap > header > nav > a,
  .site-writing > .wrap > header > nav > a,
  .site-tool > header > nav > a {
    display:inline-flex;
    align-items:center;
    height:41px;
    padding:10px 18px;
    color:#181b22;
    background:#f4f4f4;
    border:0;
    border-radius:24px;
    font:inherit;
    text-decoration:none;
    white-space:nowrap;
  }
  .site-prose > .wrap > header > nav > a:hover,
  .site-writing > .wrap > header > nav > a:hover,
  .site-tool > header > nav > a:hover {
    background:#eaeaea;
    text-decoration:none;
  }
  .site-prose > .wrap > header > nav > a[aria-current=page],
  .site-writing > .wrap > header > nav > a[aria-current=page],
  .site-tool > header > nav > a[aria-current=page] {
    background:#e7e7e7;
    font-weight:400;
    text-decoration:underline;
    text-underline-offset:4px;
    text-decoration-thickness:1px;
  }
  .site-prose a:focus-visible,
  .site-writing a:focus-visible,
  .site-tool > header a:focus-visible {
    outline:2px solid #1f3fa0;
    outline-offset:3px;
  }

  .site-prose > .wrap > main {
    box-sizing:border-box;
    width:100%;
    max-width:960px;
    margin:0 auto;
    padding:96px 24px 0;
  }
  .site-prose > .wrap > main > * { max-width:660px; }
  .site-prose > .wrap > main > pre {
    max-width:100%;
    width:900px;
  }
  .site-prose main h1,
  .site-writing h1.page-title {
    color:#181b22;
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
    font-size:48px;
    line-height:1.08;
    letter-spacing:-.025em;
    text-transform:none;
    margin-top:0;
    overflow-wrap:break-word;
  }
  .site-prose main h2,
  .site-prose .prose h2.eyebrow {
    color:#181b22;
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
    font-size:36px;
    line-height:1.15;
    letter-spacing:-.02em;
    text-transform:none;
  }
  .site-prose .related-reading h2 { font:600 15px/1.5 var(--sans); }
  .site-prose > .wrap > footer {
    box-sizing:border-box;
    width:calc(100% - 48px);
    max-width:912px;
    margin:72px auto 0;
    padding:32px 0 64px;
  }
  .site-prose main .dek,
  .site-prose main p.post-dek { color:#3a413b; }

  .site-writing > .writing-hero {
    color:#181b22;
    background:#fff;
    background-image:none;
    padding:196px 64px 64px;
  }
  .site-writing .writing-hero > .wrap { max-width:none; padding:0; }
  .site-writing > .writing-image { height:96px; overflow:hidden; }
  .site-writing > .writing-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
  .site-writing h1.page-title { font-size:64px; max-width:670px; }
  .site-writing .writing-hero .dek { color:#181b22; }
  .site-writing .category-meta h2 {
    font:400 28px/1.2 Georgia,'Times New Roman',serif;
    letter-spacing:-.02em;
  }

  .site-tool > header > nav { margin-left:auto; }
  .site-tool > header > .header-right {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    min-width:0;
    margin-left:0;
    padding:8px 0;
  }
  .site-tool > header .field-inline { min-width:0; }
  .site-tool > header input { max-width:100%; }
  .site-tool > .layout > .panel,
  .site-tool > .layout > .main,
  .site-tool > .main > .panel,
  .site-tool .search-footer { background:#fff; }
  .site-tool .scenario-panel h1,
  .site-tool .scenario-report h2 {
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
    letter-spacing:-.02em;
  }
  .site-tool > .main { min-height:0; }

  @media (max-width:900px) {
    body.site-map { height:auto; min-height:100vh; overflow:auto; }
    .site-map > .main { display:flex; flex-direction:column; flex:none; overflow:visible; }
    .site-map > .main > .panel { width:100%; height:auto; flex:none; overflow:visible; }
    .site-map #panelControls { flex:none; overflow:visible; }
    .site-map #map { width:100%; height:360px; flex:none; }
    .site-map > .main > .panel-right { width:100%; height:320px; flex:none; }
    .site-map > .main > .detail-panel { position:fixed; top:auto; height:75vh; max-width:calc(100vw - 24px); }
    .site-map .help-overlay { max-height:calc(100vh - 48px); overflow-y:auto; }
    .site-map > .legend { position:static; align-self:flex-start; max-width:calc(100% - 32px); margin:16px; }
  }
  @media (max-width:1100px) {
    .site-tool > header > .header-right { width:100%; }
  }
  @media (max-width:720px) {
    .site-prose > .wrap > header,
    .site-writing > .wrap > header,
    .site-tool > header {
      padding:16px 24px;
      gap:12px;
    }
    .site-prose > .wrap > header > nav,
    .site-writing > .wrap > header > nav,
    .site-tool > header > nav {
      width:100%;
      justify-content:space-between;
      gap:6px;
      margin:0;
      font-size:13px;
    }
    .site-prose > .wrap > header > nav > a,
    .site-writing > .wrap > header > nav > a,
    .site-tool > header > nav > a {
      height:34px;
      padding:8px 12px;
    }
    .site-prose > .wrap > main { padding-top:48px; }
    .site-prose main h1 { font-size:36px; }
    .site-prose main h2,
    .site-prose .prose h2.eyebrow { font-size:30px; }
    .site-prose .related-reading h2 { font-size:15px; }
    .site-writing > .writing-hero { padding:80px 24px 48px; }
    .site-writing h1.page-title { font-size:43px; }
    .site-writing > .writing-image { height:64px; }
    .site-tool > header { position:static; }
    .site-tool > header > .header-right { padding:0; }
  }
}

@media print { .site-writing > .writing-image { display:none; } }