:root { --ink:#171813; --paper:#f5f0e5; --red:#781f26; --gold:#b48a3c; --green:#183b32; --muted:#696459; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Georgia,"Times New Roman",serif; }
a { color:var(--red); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:#a32b35; }
.masthead { color:#f8f1e3; background:linear-gradient(90deg,rgba(180,138,60,.12) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(rgba(180,138,60,.08) 1px,transparent 1px) 0 0/48px 48px,radial-gradient(circle at 50% -20%,#315f50 0,#183b32 43%,#10271f 100%); border-bottom:8px solid var(--gold); padding:5.5rem 1.5rem 4.75rem; text-align:center; }
.masthead-inner { max-width:980px; margin:auto; }
.eyebrow,.kicker { margin:0 0 1.2rem; font:700 .76rem/1.2 Arial,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:#d6ba7c; }
h1 { margin:0; font-size:clamp(3.1rem,8vw,6.6rem); line-height:.93; letter-spacing:-.055em; font-weight:500; }
h1 span { display:block; font-style:italic; color:#f0d69c; }
.dek { max-width:720px; margin:2rem auto 0; font-size:clamp(1.12rem,2.2vw,1.42rem); line-height:1.58; color:#e4dfd3; }
.rule { display:flex; align-items:center; gap:1rem; width:min(360px,65%); margin:2rem auto 1rem; color:var(--gold); }
.rule::before,.rule::after { content:""; height:1px; flex:1; background:var(--gold); }
.byline { margin:0; font:600 .78rem/1.4 Arial,sans-serif; text-transform:uppercase; letter-spacing:.13em; color:#bfcac5; }
.witness-section { max-width:1280px; margin:auto; padding:5.5rem 2rem 6.5rem; }
.section-heading { display:grid; grid-template-columns:60px 1fr; gap:1.25rem; align-items:start; max-width:850px; margin-bottom:2.5rem; }
.section-number { margin:0; color:var(--gold); font:italic 2rem/1 Georgia,serif; border-right:1px solid #c9bda6; }
.section-heading h2,.article h2 { margin:0; font-size:clamp(2rem,4vw,3.45rem); line-height:1.05; letter-spacing:-.035em; font-weight:500; }
.kicker { color:var(--red); margin-bottom:.7rem; }
.meme-credit { margin:1rem 0 0; color:var(--muted); font:600 .78rem/1.4 Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.witness-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; align-items:end; }
.witness-card { margin:0; }
.image-frame { display:block; width:100%; padding:0; border:0; cursor:zoom-in; background:#d8ceba; box-shadow:0 13px 30px rgba(37,29,19,.14); transition:transform .2s ease,box-shadow .2s ease; }
.image-frame:hover { transform:translateY(-5px); box-shadow:0 19px 36px rgba(37,29,19,.2); }
.image-frame img { display:block; width:100%; height:360px; object-fit:cover; object-position:top; }
.witness-card:nth-child(2) .image-frame img { height:420px; }
.witness-card figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding-top:.9rem; border-top:2px solid var(--ink); margin-top:.9rem; }
.witness-card figcaption strong { font-size:1.1rem; }
.witness-card figcaption span { font:600 .7rem Arial,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.image-dialog { border:0; padding:0; background:transparent; overflow:visible; max-width:min(92vw,850px); max-height:92vh; }
.image-dialog::backdrop { background:rgba(11,18,15,.9); backdrop-filter:blur(5px); }
.image-dialog img { display:block; max-width:88vw; max-height:88vh; width:auto; height:auto; box-shadow:0 20px 80px #000; }
.close { position:absolute; z-index:2; right:-14px; top:-14px; width:42px; height:42px; border-radius:50%; border:1px solid #ffffff66; color:white; background:#111; font-size:1.8rem; line-height:1; cursor:pointer; }
.article-shell { display:grid; grid-template-columns:minmax(190px,260px) minmax(0,800px); gap:clamp(2rem,6vw,6rem); justify-content:center; padding:6.5rem 2rem; background:#fffdf7; border-top:1px solid #d9cfbd; }
.article-aside { align-self:start; position:sticky; top:2rem; border-top:4px solid var(--green); padding-top:1.2rem; }
.article-aside .section-number { border:0; }
.article-aside>p:nth-child(2) { margin:1rem 0 .4rem; font:700 .75rem Arial,sans-serif; text-transform:uppercase; letter-spacing:.15em; color:var(--red); }
.article-aside span { color:var(--muted); font-size:.94rem; line-height:1.5; }
.article h2 { margin-bottom:1.5rem; }
.notice { border-left:4px solid var(--gold); padding:1rem 1.2rem; margin:0 0 2.5rem; background:#f5efe2; color:#514c43; font-size:.95rem; line-height:1.55; }
.archived-copy { font-size:1.08rem; line-height:1.78; }
.archived-copy br+br { display:block; content:""; margin-top:1rem; }
.archived-copy strong { color:#111; }
.archived-copy span { color:inherit!important; font-size:inherit!important; }
.archived-copy h3 { margin:2.8rem 0 .55rem; padding-bottom:.45rem; border-bottom:1px solid #d8cdb9; font-size:1.55rem; line-height:1.25; font-weight:700; color:var(--green); }
footer { display:flex; justify-content:space-between; gap:2rem; padding:2rem max(2rem,calc((100vw - 1120px)/2)); background:var(--ink); color:#b9b4a9; font:.82rem/1.5 Arial,sans-serif; }
footer p { margin:0; }
footer a { color:#e5cc94; }
@media (max-width:980px) { .witness-grid{grid-template-columns:repeat(3,1fr)} .witness-card:nth-child(2) .image-frame img,.image-frame img{height:430px} .article-shell{grid-template-columns:minmax(150px,190px) minmax(0,680px);gap:2.5rem} }
@media (max-width:700px) { .masthead{padding:4.25rem 1.25rem 3.75rem} .witness-section{padding:4rem 1.2rem 4.5rem} .section-heading{grid-template-columns:40px 1fr} .witness-grid{grid-template-columns:repeat(2,1fr)} .witness-card:nth-child(2) .image-frame img,.image-frame img{height:340px} .witness-card:last-child{grid-column:1/-1;width:calc(50% - .5rem)} .article-shell{display:block;padding:4.5rem 1.35rem} .article-aside{position:static;margin-bottom:2.2rem} footer{display:block;padding:2rem 1.35rem} footer a{display:inline-block;margin-top:.8rem} }
@media (max-width:420px) { .witness-grid{grid-template-columns:1fr} .witness-card:last-child{grid-column:auto;width:auto} .image-frame img,.witness-card:nth-child(2) .image-frame img{height:auto} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} }

.image-dialog[open] { margin:auto; }