:root{--ink:#172434;--muted:#5e6b7b;--blue:#2b6cb0;--line:#d7dde5;--paper:#fff;--wash:#f1f5f9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:20px;background:var(--wash);color:var(--ink);font:14px/1.65 Verdana,Arial,sans-serif}
.site-header,.page{max-width:1100px;margin:0 auto}
.brand{display:block;width:min(520px,70%);max-height:100px;object-fit:contain;object-position:left center}
.fast-track{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 12px 2px}
.fast-track a{display:inline-block;padding:2px 10px;border:1px solid #d1d5db;border-radius:4px;background:#f3f4f6;color:#444;text-decoration:none;font:12px/1.8 Verdana,Arial,sans-serif}
.fast-track a:hover,.fast-track a:focus-visible{background:#e5e7eb;color:#111}
.fast-track a.portal{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:bold}
.fast-track a.portal:hover{background:#1e4f86;color:#fff}
.page{padding:clamp(18px,4vw,42px);background:var(--paper);border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #0002,0 2px 4px -1px #0001}
.eyebrow{margin:0 0 4px;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
h1{margin:0 0 10px;font-size:clamp(28px,4vw,44px);line-height:1.16}
h2{margin:0 0 15px;font-size:23px;line-height:1.3}
h3{margin:25px 0 9px;font-size:17px}
p{margin:0 0 14px}
a{color:#003399}
a:hover{text-decoration:underline}
.lead{max-width:760px;color:#455466;font-size:16px}
.section{padding:27px 0;border-top:1px solid var(--line);scroll-margin-top:20px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,38%);align-items:center;gap:28px;padding:10px 0 28px}
.hero-figure{margin:0;padding:14px;background:#e9edf2;border-radius:8px}
.hero-figure img{display:block;width:100%;height:auto;object-fit:contain;object-position:left center;border-radius:4px}
figcaption{margin-top:8px;color:#697688;font-size:11px;line-height:1.45}
.jump-links{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
.jump-links a,.button{display:inline-block;padding:8px 12px;border:1px solid #cbd8e8;border-radius:5px;background:#f5f9ff;color:#003399;text-decoration:none;font-size:12px;font-weight:700}
.jump-links a:hover,.button:hover{background:#eaf2fd;text-decoration:none}
.contents{padding:20px 22px;background:#f8fafc;border:1px solid #dce4ed;border-radius:7px}
.contents h2{margin-bottom:8px;font-size:18px}
.contents ul{margin:0;padding-left:21px}
.contents li{margin:3px 0}
.prose{max-width:810px;color:#303b49}
.prose h2{padding-top:4px}
.prose p,.prose li{max-width:75ch}
.prose img{display:block;max-width:100%;height:auto;border-radius:5px}
.prose blockquote{margin:18px 0;padding:9px 16px;border-left:3px solid #8eb6e2;background:#f5f9ff}
.feature-strip{margin:21px 0 3px;padding:12px;background:#f8fafc;border:1px solid var(--line);border-radius:7px}
.feature-strip img{display:block;width:100%;height:auto;border-radius:3px}
.subpages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px;margin:12px 0 0}
.subpage{display:block;padding:9px 12px;border:1px solid #d7dde5;border-radius:6px;background:#f8fafc;text-decoration:none}
.subpage:hover{background:#f0f6fd;border-color:#adc9e6;text-decoration:none}
.subpage strong{display:block;margin-bottom:2px;color:#163b66;font-size:13px;line-height:1.3}
.subpage span{display:block;color:var(--muted);font-size:11px;line-height:1.35}
.breadcrumb{margin:0 0 18px;font-size:12px}
.footer{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.loading{color:var(--muted)}
@media(max-width:700px){body{padding:12px}.brand{width:min(440px,90%)}.hero{grid-template-columns:1fr;gap:10px}.hero-figure img{height:auto}.page{padding:18px}.fast-track a{padding:4px 9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Shared article styles. */

    
    .legacy-prose{max-width:900px;color:var(--ink);font-size:15px;line-height:1.8}
    .legacy-prose h2{clear:both;margin:42px 0 17px;padding-top:22px;border-top:1px solid var(--line);scroll-margin-top:20px}
    .legacy-prose h3{clear:both;margin-top:34px;padding-top:8px}
    .legacy-prose p,.legacy-prose li{max-width:80ch}
    .legacy-prose figure{margin:18px 0 24px;break-inside:avoid}
    .legacy-prose figcaption{font-size:12px;line-height:1.5}
    .creator-portrait{float:right;width:150px;margin:0 0 18px 24px!important}
    .legacy-prose .example-figure img{width:auto;max-width:100%;max-height:560px;margin:0 auto;object-fit:contain}
    .example-figure>a{display:block;margin:10px auto;width:fit-content;max-width:100%}
    .example-figure>a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
    .comparison-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
    .comparison-images>a{min-width:0}
    @media(max-width:600px){.comparison-images{grid-template-columns:1fr}}
    .image-slot{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#55677b;background:#f1f5f9;border:1px dashed #acbacc;border-radius:5px;padding:18px;font-size:12px;line-height:1.5}
    .portrait-slot{min-height:140px}
    .strip-slot{min-height:105px}
    .example-figure{clear:both;padding:12px;background:#fafbfd;border:1px solid var(--line);border-radius:6px}
    .portrait-grid,.portrait-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;clear:both;margin:16px 0}
    .portrait-pair{max-width:370px;grid-template-columns:repeat(2,minmax(0,1fr))}
    .portrait-grid figure,.portrait-pair figure{margin:0}
    .portrait-grid img,.portrait-pair img,.creator-portrait img{width:100%;height:auto}
    .legacy-prose .editorial-position{clear:both;margin:27px 0;padding:17px 22px;border-left:4px solid #596a91;background:#f1f4fa;font-size:19px;line-height:1.5;color:#253b5a}
    .editorial-position p{margin:0}
    @media(max-width:520px){.legacy-prose{font-size:14px}.creator-portrait{float:none;width:145px;margin:14px 0!important}.portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-contents{gap:8px 15px}.legacy-prose .editorial-position{font-size:17px}}
    @media print{.site-header nav,.article-contents{display:none}.page{border:0;box-shadow:none}.legacy-prose{max-width:none}}
  

.article-heading{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:28px;align-items:start;margin:22px 0 26px}
.article-heading h1{max-width:20ch}.article-heading figure{margin:0}.article-heading img{display:block;width:100%;height:auto;border-radius:5px}.byline{font-size:12px;color:var(--muted);margin-top:18px}

.mccoy-prose{max-width:860px;font-size:15px;line-height:1.8;color:var(--ink)}.mccoy-prose h2{clear:both;margin:36px 0 16px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:20px}.mccoy-prose p{max-width:78ch}
.format-note{margin:24px 0;padding:18px 22px;background:#f1f5f9;border-left:4px solid var(--blue);border-radius:0 5px 5px 0}
.source-note{font-size:12px;color:var(--muted);line-height:1.6}.mccoy-prose hr{margin:32px 0;border:0;border-top:1px solid var(--line)}
@media(max-width:560px){.article-heading{grid-template-columns:1fr}.article-heading figure{display:flex;align-items:center;gap:12px}.article-heading img{width:70px}.article-heading figcaption{margin:0}.mccoy-prose{font-size:14px}.article-contents{gap:8px 15px}}

.page-error{padding:18px;border:1px solid #b45309;background:#fff7ed;color:#7c2d12}
.image-error{display:block;padding:8px 12px;border:1px solid #b45309;background:#fff7ed;color:#7c2d12;font-size:12px;overflow-wrap:anywhere}
[data-article-contents]:empty{display:none}.page-footer{clear:both}
.comparison-images{display:flex;flex-wrap:wrap;gap:16px}.comparison-images>a{flex:1 1 250px;min-width:0}

/* Show the complete artwork in every article image. */
#intro-page img{object-fit:contain}
.image-fullsize{display:block;max-width:100%}
.image-fullsize:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* Shared visit totals for the article collection. */
.visit-counter{margin:14px 0 0;color:var(--muted);font-size:11px;line-height:1.7;overflow-wrap:anywhere}

/* Introductions mark the beginning of each artist's story selection. */
.artist-introduction{clear:both;margin:42px 0 26px;padding:20px 22px;border-top:3px solid #2b6ebc;border-bottom:1px solid #d7dde5;background:#f0f5fa;border-radius:0 0 6px 6px}
.artist-introduction h2{border:0;padding:0;margin:0 0 10px;font-size:26px;line-height:1.25;color:#163b66}
.artist-introduction p{margin:0;line-height:1.65}
@media(max-width:600px){.artist-introduction{margin:32px 0 22px;padding:17px 16px}.artist-introduction h2{font-size:23px}}

/* Shared presentation for the reading and portal illustrations. */
.reading-illustration{float:none;width:55%;max-width:550px;margin:20px auto;opacity:.85}
.reading-illustration img{display:block;width:100%;height:auto}
.portal-illustration{width:64%;max-width:none}
@media(max-width:600px){.reading-illustration{width:90%;margin:16px auto}.reading-illustration.portal-illustration{width:64%}}

/* Shared, readable in-page contents; ordinary prose links are unchanged. */
.article-contents{
  display:block;
  margin:24px 0;
  padding:16px 20px;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13px;
}
.article-contents[hidden]{display:none}
.article-contents .contents-list,.contents>ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 24px;
  list-style:none;
  margin:0;
  padding:0;
}
.article-contents li,.contents>ul>li{
  margin:0;
  min-width:0;
  break-inside:avoid;
}
.article-contents a,.contents>ul a{
  display:block;
  padding:4px 0;
  color:var(--ink);
  font-weight:700;
  line-height:1.45;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.article-contents a:visited,.contents>ul a:visited{color:var(--ink)}
.article-contents a:hover,.contents>ul a:hover{color:#163b66;text-decoration:underline}
.article-contents a:focus-visible,.contents>ul a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}
.article-contents .contents-ancestors{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;
}
.article-contents .contents-extra+.contents-ancestors,
.article-contents .contents-ancestors+.contents-extra{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
@media(max-width:900px){
  .article-contents .contents-ancestors{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(10,auto);
  }
}
@media(max-width:600px){
  .article-contents{padding:14px 16px}
  .article-contents .contents-list,.contents>ul{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row;
    gap:3px;
  }
}
@media print{.article-contents{display:none}}