/* Shadow & Mirror — essays
   Shared type + layout for hand-written editorial. Tokens mirror /index.html. */
:root { --ink:#111; --paper:#fafaf8; --rule:#0001; --dim:#555; --panel:#fff; --panelrule:#0002; --brass:#8c6a3f; }
@media (prefers-color-scheme: dark){
  :root { --ink:#eee; --paper:#0d0d0f; --rule:#fff2; --dim:#999; --panel:#141417; --panelrule:#fff2; --brass:#b8915c; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:400 18px/1.62 Georgia, "Times New Roman", serif;
  display:flex; flex-direction:column; min-height:100vh;
}
.wrap { max-width:680px; margin:0 auto; padding:11vh 24px 6vh; width:100%; flex:1; }

/* masthead crumb */
.crumb { font:600 12px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:2.4em; display:flex; align-items:center; gap:.7em; }
.crumb a { color:var(--dim); text-decoration:none; border-bottom:1px solid transparent; }
.crumb a:hover { color:var(--ink); border-color:var(--panelrule); }
.crumb .sep { opacity:.5; }

.kicker { font:600 12px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
h1 { font-size:clamp(28px,5.4vw,42px); line-height:1.1; margin:.5em 0 .2em; font-weight:600; letter-spacing:-0.01em; }
.dek { font-size:clamp(17px,2.6vw,21px); color:var(--dim); margin:0 0 1.2em; font-style:italic; line-height:1.45; }
.byline { font:400 13px/1.6 ui-sans-serif,system-ui,sans-serif; color:var(--dim); display:flex; align-items:center; gap:.5em; flex-wrap:wrap; }
.byline .stamp { width:1.25em; height:1.25em; vertical-align:-0.28em; opacity:.9; }

.rule { border:0; border-top:1px solid var(--rule); margin:1.9em 0; }

article p { margin:0 0 1.15em; }
article h2 { font-size:clamp(20px,3.4vw,26px); font-weight:600; line-height:1.2; margin:1.9em 0 .5em; letter-spacing:-0.01em; }
article h3 { font:600 14px/1.4 ui-sans-serif,system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin:1.7em 0 .5em; }
article b, article strong { font-weight:600; }
article em, article i { font-style:italic; }
article a { color:inherit; text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:1px; }
article a:hover { background:color-mix(in srgb, var(--brass) 14%, transparent); }

article blockquote, .pull {
  margin:1.5em 0; padding:.2em 0 .2em 1.1em; border-left:3px solid var(--ink);
  font-style:italic; font-size:1.06em; color:var(--ink);
}
article ul, article ol { margin:0 0 1.15em; padding-left:1.3em; }
article li { margin:.35em 0; }

.eq { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
code, .mono { font:400 .9em/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--panel); border:1px solid var(--panelrule); border-radius:4px; padding:.08em .35em; }

.note { margin:1.7em 0; padding:1em 1.2em; background:var(--panel); border:1px solid var(--panelrule); border-radius:10px; font-size:.94em; color:var(--dim); }
.note b { color:var(--ink); }

/* read-the-volume card */
.cta { margin:2.6em 0 1em; padding:1.3em 1.4em; border:1px solid var(--panelrule); border-radius:12px; background:var(--panel); }
.cta .t { font:600 12px/1.3 ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 .5em; }
.cta p { margin:0 0 .9em; font-size:.96em; }
a.btn { font:600 14px/1 ui-sans-serif,system-ui,sans-serif; text-decoration:none; color:var(--paper); background:var(--ink); padding:12px 17px; border-radius:7px; display:inline-flex; align-items:center; gap:8px; border:0; }
a.btn.ghost { color:var(--ink); background:transparent; border:1px solid var(--ink); }

/* sign-off */
.sign { margin-top:2.4em; padding-top:1.6em; border-top:1px solid var(--rule); }
.sign .sig { font-family:"Snell Roundhand","Apple Chancery","Brush Script MT","Segoe Script",cursive; font-size:clamp(26px,4.6vw,34px); line-height:1; color:var(--ink); }
.sign .who { display:block; margin-top:.5em; font:400 12px/1.5 ui-sans-serif,system-ui,sans-serif; letter-spacing:.04em; color:var(--dim); }

/* essay index list */
.lede { font-size:clamp(17px,2.6vw,20px); color:var(--dim); font-style:italic; margin:0 0 2em; line-height:1.5; }
.feed { list-style:none; margin:0; padding:0; }
.feed li { padding:1.6em 0; border-top:1px solid var(--rule); }
.feed li:last-child { border-bottom:1px solid var(--rule); }
.feed a { text-decoration:none; color:inherit; display:block; }
.feed a:hover h2 { color:var(--brass); }
.feed .meta { font:600 11px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:.6em; }
.feed h2 { font-size:clamp(21px,3.6vw,27px); font-weight:600; line-height:1.18; margin:0 0 .35em; letter-spacing:-0.01em; }
.feed p { margin:0; color:var(--dim); font-size:.98em; line-height:1.5; }

svg.mark .ink { stroke:currentColor; fill:none; }
svg.mark .ink-fill { fill:currentColor; stroke:none; }
svg.mark .brass { stroke:var(--brass); fill:none; }

footer { font:400 12px/1.6 ui-sans-serif,system-ui,sans-serif; color:var(--dim); text-align:center; padding:3vh 24px; border-top:1px solid var(--rule); }
footer a { color:inherit; }