:root{
  --paper:#ecdfc2; --paper2:#e3d2ad; --ink:#2b2117; --ink2:#5a4630; --faded:#7d6649;
  --rule:#8a6c43; --oxblood:#7a1f1a; --brass:#a9823f; --navy:#1f2a3a;
  --display:'IM Fell English',Georgia,'Times New Roman',serif;
  --sc:'IM Fell English SC','IM Fell English',Georgia,serif;
  --body:'EB Garamond',Garamond,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 1.125rem/1.55 var(--body);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 0%, rgba(255,250,235,.75), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(120,80,30,.18), transparent 55%),
    radial-gradient(ellipse at 100% 60%, rgba(120,80,30,.14), transparent 50%),
    linear-gradient(180deg,var(--paper),var(--paper2));
  min-height:100vh}
html{background:#e7d8b6}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 160px rgba(80,50,15,.35), inset 0 0 40px rgba(80,50,15,.25)}
a{color:var(--oxblood);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:#4e0f0b}
:focus-visible{outline:2px dashed var(--oxblood);outline-offset:3px}

/* Masthead */
.masthead{position:relative;z-index:1;max-width:52rem;margin:0 auto;padding:4.5rem 1.25rem 2rem;text-align:center}
.kicker{font:400 1rem/1 var(--sc);letter-spacing:.28em;text-transform:uppercase;color:var(--faded);margin:0 0 1rem}
h1{font:400 clamp(2.6rem,8vw,5.2rem)/.95 var(--display);margin:0;letter-spacing:-.01em;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.4)}
h1 em{font-style:italic;color:var(--oxblood)}
h1 .dates{display:block;font:400 clamp(1.2rem,3.4vw,1.8rem)/1.6 var(--sc);letter-spacing:.35em;color:var(--ink2);margin-top:.6rem}
.rule{display:flex;align-items:center;gap:1rem;margin:1.5rem auto;max-width:26rem;color:var(--brass)}
.rule::before,.rule::after{content:"";flex:1;height:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-top:2px}
.summary{font-size:1.2rem;color:var(--ink2);max-width:40rem;margin:0 auto 1.5rem;font-style:italic}
.callout{max-width:40rem;margin:0 auto 1.75rem;text-align:left;padding:1rem 1.25rem;border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:3px;background:rgba(255,248,230,.45)}
.callout h2{font:400 1rem/1.2 var(--sc);letter-spacing:.18em;text-transform:uppercase;margin:0 0 .35rem;color:var(--oxblood)}
.callout p{margin:0}
.eras-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .5rem}
.eras-nav a{font:400 .95rem/1 var(--sc);letter-spacing:.12em;text-decoration:none;color:var(--ink);padding:.5rem .8rem;border:1px solid var(--rule);background:rgba(255,248,230,.35)}
.eras-nav a:hover{background:var(--ink);color:var(--paper)}

/* Timeline */
.timeline{position:relative;z-index:1;max-width:72rem;margin:0 auto;padding:1rem 1.25rem 2rem}
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:6px;margin-left:-3px;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(138,108,67,.45) 10px 12px)}
.era{position:relative}
.era-divider{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:.9rem;margin:3rem auto 2.5rem;
  background:var(--paper);background:linear-gradient(180deg,#efe4ca,#e7d8b6);width:max-content;max-width:100%;padding:.7rem 1.4rem;border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:4px;box-shadow:0 6px 18px -10px rgba(60,35,10,.6)}
.era-divider h2{margin:0;font:400 clamp(1.3rem,3.5vw,1.9rem)/1.1 var(--sc);letter-spacing:.14em;color:var(--ink)}
.era-num{color:var(--oxblood)}
.era-orn{color:var(--brass);font-size:1.3rem}
.entries{list-style:none;margin:0;padding:0}
.entry{position:relative;width:50%;padding:0 2.75rem 3rem 0}
.entry:nth-child(even){margin-left:50%;padding:0 0 3rem 2.75rem}
.marker{position:absolute;top:1.1rem;right:-1.1rem;width:2.2rem;height:2.2rem;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#d9b56a,var(--brass) 55%,#6e5223);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--rule),0 3px 6px rgba(0,0,0,.3)}
.entry:nth-child(even) .marker{right:auto;left:-1.1rem}
.marker span{position:absolute;top:50%;right:calc(100% + .6rem);transform:translateY(-50%);white-space:nowrap;font:400 1.05rem/1 var(--sc);color:var(--faded);letter-spacing:.08em;display:none}
.card{position:relative;padding:1.25rem 1.25rem 1rem;background:linear-gradient(180deg,rgba(255,250,236,.72),rgba(246,236,212,.65));
  border:1px solid rgba(138,108,67,.55);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 12px 30px -18px rgba(60,35,10,.7)}
.card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(138,108,67,.35);pointer-events:none}
.card header{margin-bottom:.8rem}
.when{margin:0;font:400 2rem/1 var(--display);color:var(--oxblood)}
.title{margin:.3rem 0 0;font:400 1.35rem/1.25 var(--display);color:var(--ink)}
.plate{margin:0}
.zoom{display:block;width:100%;padding:10px;margin:0;border:0;cursor:zoom-in;background:#2a2118;
  box-shadow:0 0 0 1px #6b5432,0 0 0 5px #e9dcbf,0 0 0 6px #8a6c43,0 8px 18px -6px rgba(0,0,0,.55)}
.zoom img{display:block;width:100%;height:auto;background:#3a2f22;filter:sepia(.12) contrast(1.02);transition:filter .3s}
.zoom:hover img{filter:none}
.caption{margin:1rem 0 .4rem;font-size:1.12rem;line-height:1.5}
.caption::first-letter{font-family:var(--display);font-size:1.5em;color:var(--oxblood)}
.ncl-stamp{margin:.6rem 0;padding:.45rem .7rem;font-size:.98rem;color:var(--oxblood);border:2px solid var(--oxblood);border-radius:3px;
  background:rgba(122,31,26,.06);transform:rotate(-.6deg);display:inline-block}
.ncl-stamp strong{font:400 1rem var(--sc);letter-spacing:.1em;text-transform:uppercase}
.meta{margin:.7rem 0 0;border-top:1px solid rgba(138,108,67,.5);padding-top:.55rem;font-size:.98rem;display:grid;gap:.15rem}
.meta div{display:grid;grid-template-columns:9.2rem 1fr;gap:.6rem;padding:.12rem 0}
.meta dt{font:400 .9rem/1.6 var(--sc);letter-spacing:.06em;color:var(--faded)}
.meta dd{margin:0;overflow-wrap:anywhere}
.meta a::after{content:" ↗";font-size:.85em}
.iwm .f-license{color:var(--oxblood);font-weight:500}

/* Notes */
.notes{position:relative;z-index:1;max-width:52rem;margin:0 auto;padding:0 1.25rem 5rem}
.note-block{margin:0 0 1.75rem;padding:1.2rem 1.4rem;background:rgba(255,248,230,.5);border:1px solid rgba(138,108,67,.55)}
.note-block h3{margin:0 0 .5rem;font:400 1.4rem/1.2 var(--display);color:var(--oxblood)}
.note-block p{margin:.4rem 0}
#iwm-note{border:2px solid var(--oxblood)}
.sources{margin:.3rem 0;padding-left:1.2rem}
.sources li{margin:.3rem 0}
.site{color:var(--faded);font-style:italic}
.small{font-size:.95rem;color:var(--ink2)}

/* Lightbox */
.lightbox{border:0;padding:0;background:rgba(20,14,8,.95);max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
.lightbox::backdrop{background:rgba(20,14,8,.92)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox figure{margin:0;max-width:min(94vw,1400px);display:flex;flex-direction:column;align-items:center}
.lightbox img{max-width:100%;max-height:78vh;width:auto;height:auto;border:8px solid #e9dcbf;box-shadow:0 0 0 1px #8a6c43,0 20px 60px rgba(0,0,0,.7);background:#3a2f22}
.lightbox figcaption{color:#efe3c8;max-width:60rem;text-align:center;padding:.8rem 1rem 0}
.lightbox figcaption p{margin:.15rem 0}
.lb-title{font:400 1.3rem var(--display)}
.lb-cap{font-size:1rem;opacity:.9}
.lb-lic{font:400 .9rem var(--sc);letter-spacing:.06em;color:#d9b56a}
.lightbox button{position:fixed;background:rgba(233,220,191,.12);color:#efe3c8;border:1px solid rgba(233,220,191,.4);font:400 2rem/1 var(--display);width:3rem;height:3rem;cursor:pointer;border-radius:50%}
.lightbox button:hover{background:rgba(233,220,191,.3)}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1rem;top:50%;transform:translateY(-50%)}

/* Responsive: single column on narrow screens */
@media (max-width:820px){
  .timeline::before{left:1.1rem}
  .entry,.entry:nth-child(even){width:auto;margin-left:0;padding:0 0 2.25rem 2.6rem}
  .marker,.entry:nth-child(even) .marker{left:0;right:auto;width:1.6rem;height:1.6rem;top:1.3rem;margin-left:.3rem}
  .era-divider{margin:2.25rem 0 2rem;width:auto;padding:.6rem .9rem}
  .card{padding:1rem .9rem .8rem}
  .zoom{padding:6px}
  .meta div{grid-template-columns:1fr;gap:0}
  .lightbox .lb-prev,.lightbox .lb-next{top:auto;bottom:1rem;transform:none}
  .lightbox img{max-height:62vh}
}
@media (max-width:420px){ body{font-size:1.06rem} .when{font-size:1.7rem} .title{font-size:1.2rem} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{body::after,.lightbox,.eras-nav{display:none}.entry,.entry:nth-child(even){width:auto;margin:0;padding:0 0 1rem}.timeline::before,.marker{display:none}}