/* Coven of Widows. Palette named for the four stages of the alchemical Great Work. */
:root{
  --soot:#16120e;      /* nigredo: blackening */
  --soot-2:#201a14;
  --chalk:#e8e1cf;     /* albedo: whitening */
  --dim:#a99f8b;
  --sulphur:#c9a13b;   /* citrinitas: yellowing */
  --cinnabar:#b5402f;  /* rubedo: reddening */
  --rule:#3a3027;
  --display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --text:"EB Garamond",Garamond,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--soot);color:var(--chalk);font-family:var(--text);font-size:clamp(18px,1.15vw + 12px,21px);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--cinnabar);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:#fff;text-decoration-color:var(--sulphur)}
:focus-visible{outline:2px solid var(--sulphur);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--chalk);color:var(--soot);padding:8px 12px;z-index:9}
.skip:focus{left:16px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,4vw,48px);position:relative;z-index:2}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-size:1.05rem;letter-spacing:.01em}
.mark svg,.foot-mark svg{width:30px;height:30px;color:var(--sulphur);flex:none}
.top nav{display:flex;gap:clamp(16px,3vw,32px)}
.top nav a{text-decoration:none;color:var(--dim);font-size:1rem}
.top nav a:hover{color:var(--chalk)}

/* engravings: processed ink plates are chalk lines on soot; raw fallback is inverted in the browser */
img.ink.raw{filter:grayscale(1) invert(1) contrast(1.6) brightness(.92);mix-blend-mode:screen}
.color img,img.color{box-shadow:0 0 0 1px var(--rule),0 18px 50px -20px #000}

/* home hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,5vw,80px);padding:clamp(16px,4vh,48px) clamp(16px,4vw,48px) clamp(48px,8vh,96px);min-height:calc(100vh - 80px);max-width:1440px;margin:0 auto}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(3.5rem,9.4vw,9rem);line-height:.88;letter-spacing:-.025em;margin:0 0 .45em}
.lede{font-size:clamp(1.15rem,1.6vw,1.45rem);color:var(--dim);max-width:22em;margin:0;font-style:italic}
.hero-plate{margin:0;justify-self:center;width:min(100%,720px)}
.hero-plate img{width:100%;opacity:0}
.hero-plate img.shown{animation:develop 3.2s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes develop{0%{opacity:0;filter:blur(8px) brightness(.3)}60%{opacity:1}100%{opacity:1;filter:none}}
.hero-plate figcaption{text-align:center;color:var(--dim);font-size:.85rem;font-style:italic;margin-top:.6em}
@media (max-width:820px){.hero{grid-template-columns:1fr;min-height:0;padding-top:24px}.hero-plate{order:2;width:min(100%,520px)}}

/* emblems */
.emblems{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.emblem{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:center;padding:clamp(48px,9vh,110px) 0;border-top:1px solid var(--rule)}
.emblem.flip .emblem-pic{order:2}
.emblem-pic{display:flex;justify-content:center}
.emblem-pic img{max-height:72vh;width:auto;transition:transform .6s ease}
.emblem-pic:hover img{transform:scale(1.015)}
.emblem-no{font-family:var(--display);font-style:italic;color:var(--sulphur);font-size:1.1rem;margin:0 0 .3em}
.emblem h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.05;margin:0 0 .35em;letter-spacing:-.01em}
.emblem h2 a{text-decoration:none}
.emblem-meta{color:var(--dim);margin:0 0 1.1em;font-size:.95rem}
.emblem-ex{font-size:1.15em;margin:0 0 1.3em;max-width:24em}
.read{display:inline-block;color:var(--chalk);text-decoration:none;border-bottom:1px solid var(--cinnabar);padding-bottom:2px}
.read:hover{border-color:var(--sulphur)}
@media (max-width:820px){.emblem{grid-template-columns:1fr}.emblem.flip .emblem-pic{order:0}.emblem-pic img{max-height:56vh}}
.tailpiece{display:flex;justify-content:center;padding:40px 16px 8px}
.tailpiece img{width:min(240px,50vw);opacity:.85}

/* full-width painted band between emblems */
.band{margin:0 calc(-1 * clamp(16px,4vw,48px));border-top:1px solid var(--rule)}
.band img{width:100%;max-height:46vh;object-fit:cover;box-shadow:none}
.band figcaption{text-align:center;color:var(--dim);font-size:.85rem;font-style:italic;padding:.7em 16px 0}
.band + .emblem{border-top:0}

/* post */
.post{padding:0 clamp(16px,4vw,48px) 48px}
.post-head{text-align:center;max-width:1100px;margin:0 auto clamp(32px,6vh,64px)}
.post-plate{margin:0 auto clamp(24px,4vh,40px);display:flex;justify-content:center}
.post-plate img{max-height:62vh;width:auto}
.post-head h1{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.015em;margin:0 auto .3em;max-width:16em}
.post-meta{color:var(--dim);margin:0}
.prose{max-width:34em;margin:0 auto}
.prose p{margin:0 0 1.15em}
.is-prose .prose > p:first-of-type::first-letter{font-family:var(--display);float:left;font-size:4.6em;line-height:.82;margin:.06em .1em 0 0;color:var(--cinnabar)}
.is-poem .prose{max-width:26em}
.is-poem .prose p{margin:0 0 1.6em}
.prose h4{font-family:var(--display);font-style:italic;font-weight:400;color:var(--sulphur);font-size:1.25rem;margin:2.4em 0 .6em}
.prose strong{font-weight:500;color:#fff}
.prose hr{border:0;height:1px;background:var(--rule);margin:2.6em 0 1.6em}
.notes{font-size:.82em;color:var(--dim);overflow-wrap:anywhere}
.notes p{margin:0 0 .7em}
sup a{text-decoration:none;color:var(--sulphur)}
.inset{margin:2.6em -2em;display:flex;flex-direction:column;align-items:center}
.inset img{max-height:70vh;width:auto}
.inset figcaption,.plate-credit{font-size:.82rem;color:var(--dim);font-style:italic;text-align:center;margin-top:.8em;max-width:32em}
.inset.photo img{max-height:60vh}
@media (max-width:700px){.inset{margin:2em 0}}
.plate-credit{margin:3.5em auto 0}
.plate-credit a{white-space:nowrap}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:clamp(48px,8vh,88px) auto 0;border-top:1px solid var(--rule);padding-top:28px}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.pager .next{text-align:right}
.pager small{color:var(--sulphur);font-family:var(--display);font-style:italic;font-size:.95rem}
.pager span{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.15}
.pager a:hover span{color:#fff}

/* plates page */
.plates-intro{max-width:40em;margin:0 auto;padding:clamp(24px,6vh,64px) 16px 32px;text-align:center}
.plates-intro h1{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,7vw,5rem);margin:0 0 .3em;line-height:1}
.plates-intro p{color:var(--dim);margin:0}
.plates{columns:3 300px;column-gap:28px;max-width:1300px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 48px}
.pl{break-inside:avoid;margin:0 0 36px}
.pl-open{display:block;padding:0;border:0;background:none;cursor:zoom-in;width:100%}
.pl-open img{width:100%;box-shadow:0 0 0 1px var(--rule)}
.pl figcaption{font-size:.9rem;margin-top:.7em;display:flex;flex-direction:column;gap:2px;color:var(--dim)}
.pl figcaption b{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--chalk);line-height:1.2}
.pl figcaption a{color:var(--dim);font-size:.85rem}
.pl:target figcaption b{color:var(--sulphur)}
.lb{position:fixed;inset:0;z-index:20;background:rgba(12,9,7,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 16px 24px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:calc(100vh - 140px);width:auto}
.lb p{color:var(--dim);font-style:italic;text-align:center;margin:12px 0 0;max-width:40em}
.lb-x{position:absolute;top:14px;right:16px;background:none;border:1px solid var(--rule);color:var(--chalk);padding:6px 14px;cursor:pointer;font:inherit;font-size:.95rem}

/* 404 */
.nf{text-align:center;padding:16vh 16px;max-width:36em;margin:0 auto}
.nf h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;margin:0 0 .4em}
.nf p{color:var(--dim)}

/* footer */
.foot{border-top:1px solid var(--rule);margin-top:clamp(40px,8vh,80px)}
.foot-in{max-width:44em;margin:0 auto;padding:40px 16px 56px;text-align:center;color:var(--dim);font-size:.95rem}
.foot-mark{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--display);color:var(--chalk);font-size:1.15rem}
.copy{font-size:.85rem}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-plate img{opacity:1}.hero-plate img.shown{animation:none}*{transition:none!important}}