/* The Weekly Snarry Prophet – shared styles */
:root{
  --paper:#f3ecdb; --paper-2:#faf5e8; --ink:#1b1a17; --muted:#6b6457; --rule:#b9ad92;
  --green:#1f3b2d; --silver:#8c8f86; --red:#7a1f1f; --chip:#e7dfc9;
  --g:#77a300; --t:#d4a800; --m:#e57b00; --e:#b3001b; --nr:#8a8a8a;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:16px/1.6 "Lora",Georgia,serif;
  background:var(--paper) radial-gradient(ellipse at top, rgba(255,255,255,.5), transparent 60%)}
a{color:var(--green)}
.page{max-width:1040px;margin:0 auto;padding:0 16px 48px}

/* ---------- Masthead ---------- */
.masthead{text-align:center;padding:26px 0 0}
.masthead .ears{display:flex;justify-content:space-between;font:italic 13px "Lora",serif;color:var(--muted);gap:10px}
.masthead h1{margin:6px 0 2px;font:400 clamp(38px,8vw,78px)/1 "UnifrakturMaguntia",serif;color:var(--ink);letter-spacing:.01em}
.masthead h1 a{color:inherit;text-decoration:none}
.masthead .motto{font:italic 15px "Lora",serif;color:var(--muted);margin-bottom:10px}
.dateline{border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:5px 0;display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap;font:600 12px "Inter",sans-serif;text-transform:uppercase;letter-spacing:.1em}
.dateline nav a{color:var(--ink);text-decoration:none;margin-left:16px}
.dateline nav a:first-child{margin-left:0}
.dateline nav a.active,.dateline nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* ---------- Two-column layout: editions left, sidebar right ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0 34px;align-items:start}
.sidebar{border-left:1px solid var(--rule);padding:26px 0 0 26px;min-width:0}

/* ---------- Cover picture (top of sidebar) ---------- */
.hero{margin:0 0 6px}
.hero img{display:block;width:calc(100% - 10px);height:auto;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;margin:5px}
/* Black & white "printed" look that takes on the paper colour */
.hero.printed img{filter:grayscale(1) sepia(.18) contrast(1.18) brightness(1.03);mix-blend-mode:multiply}
.hero figcaption{margin-top:10px;font:italic 13px "Lora",serif;color:var(--muted);text-align:right}

/* ---------- Edition (one week) ---------- */
.edition{padding:26px 0 30px;border-bottom:3px double var(--rule)}
.edition:last-of-type{border-bottom:none}
.kicker{font:600 12px "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.headline{font:900 clamp(30px,5vw,46px)/1.05 "Playfair Display",Georgia,serif;margin:4px 0 6px}
.standfirst{font:italic 16px "Lora",serif;color:var(--muted);margin:0 0 6px}
.rubric{display:flex;align-items:center;gap:12px;margin:26px 0 12px;font:700 13px "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.rubric::before,.rubric::after{content:"";flex:1;border-top:1px solid var(--rule)}
.rubric .n{font-weight:500;color:var(--muted);letter-spacing:.05em}

/* Columns of articles, divided by thin rules like a newspaper */
.columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 28px}
.item{padding:10px 0 14px;border-bottom:1px solid var(--rule);break-inside:avoid}
.item .top{display:flex;gap:9px;align-items:flex-start}
.rating{flex:0 0 auto;width:22px;height:22px;border-radius:3px;color:#fff;font:600 12px "Inter",sans-serif;display:grid;place-items:center;margin-top:4px}
.item h3{margin:0;font:700 20px/1.2 "Playfair Display",Georgia,serif}
.item h3 a{color:var(--ink);text-decoration:none}
.item h3 a:hover{color:var(--green);text-decoration:underline}
.by{font:italic 14px "Lora",serif;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0}
.chip{background:var(--chip);border-radius:2px;padding:0 7px;font:12px/1.7 "Inter",sans-serif}
.chip.warn{background:#f1d9d6;color:var(--red)}
.chip.kind{background:var(--green);color:#efe7cf}
.notes{margin:6px 0 0;font-size:15px}
.added{font:12px "Inter",sans-serif;color:var(--muted);margin-top:5px}

/* One-line entries on the front page, stacked under each other */
.stack .item.line{padding:9px 0}
.item.line .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.item.line .rating{margin-top:0}
.item.line h3{margin-right:2px}
.item.line .by{margin-right:4px}
.item.line .notes{margin:4px 0 0}
.item.line.rated .notes{margin-left:30px}

/* ---------- Pager & archive ---------- */
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 0;margin-top:6px;font:600 13px "Inter",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.pager button{background:none;border:none;font:inherit;color:var(--green);cursor:pointer;padding:4px 0;text-transform:inherit;letter-spacing:inherit}
.pager button:disabled{color:var(--rule);cursor:default}
.pager .pg{color:var(--muted);font-weight:500}
.archive{margin-top:22px}
.archive .rubric{margin-top:0}
.archive .month{font:700 12px "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 2px}
.archive ul{list-style:none;margin:0;padding:0}
.archive li{border-bottom:1px dashed var(--rule)}
.archive a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 2px;text-decoration:none;color:var(--ink)}
.archive a:hover .wt{text-decoration:underline}
.archive li.current .wt{color:var(--green)}
.wt{display:block;font:700 17px/1.2 "Playfair Display",Georgia,serif}
.wr{display:block;font:italic 13px "Lora",serif;color:var(--muted)}
.wc{font:13px "Inter",sans-serif;color:var(--muted);white-space:nowrap}

/* ---------- Search page ---------- */
.searchbox{width:100%;padding:12px 14px;font:17px "Lora",serif;border:1px solid var(--ink);background:var(--paper-2);color:var(--ink);margin-top:22px}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
select{width:100%;padding:8px 10px;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);font:14px "Inter",sans-serif}
.searchbox:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:13px "Inter",sans-serif;color:var(--muted);margin:6px 0 4px}
.linkbtn{background:none;border:none;color:var(--green);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.more{display:block;margin:18px auto;padding:9px 20px;border:1px solid var(--green);background:transparent;color:var(--green);font:600 14px "Inter",sans-serif;cursor:pointer}
.msg{padding:40px 10px;text-align:center;color:var(--muted);font-style:italic}

footer{margin-top:40px;border-top:3px double var(--ink);padding-top:10px;text-align:center;font:italic 13px "Lora",serif;color:var(--muted)}

/* Narrow screens: one column – cover picture on top, Past Editions at the bottom */
@media (max-width:820px){
  .layout{display:flex;flex-direction:column}
  .sidebar{display:contents}
  .hero{order:-1;margin:22px auto 0;max-width:480px;width:100%}
  .friends{order:2;width:100%;margin-top:34px}
  .archive{order:3;margin-top:34px;width:100%}
  .hero img{max-height:60vh;object-fit:cover}
}
@media (max-width:600px){
  .masthead .ears{display:none}
  .dateline{justify-content:center}
  .dateline nav a{margin-left:12px}
}

/* ---------- About page ---------- */
.prose{max-width:720px;margin:0 auto;padding-top:26px}
.prose p{margin:0 0 14px}
.prose .lede{font-size:18px}
.prose .lede::first-letter{float:left;font:900 64px/.82 "Playfair Display",Georgia,serif;padding:6px 8px 0 0;color:var(--green)}
.kinds{margin:0}
.kinds dt{font:700 19px/1.3 "Playfair Display",Georgia,serif;margin-top:12px}
.kinds dd{margin:2px 0 0}
.rules{margin:0;padding-left:20px}
.rules li{margin-bottom:8px}
.contact{margin:34px 0 0;padding:18px;text-align:center;border-top:3px double var(--ink);border-bottom:3px double var(--ink)}
.contact a{font:700 clamp(18px,4vw,24px) "Playfair Display",Georgia,serif;color:var(--green);word-break:break-word}

/* ---------- Friends of the Prophet (sidebar) ---------- */
.friends{margin-top:22px}
.friends:empty{display:none}
.friends .rubric{margin-top:0}
.friend{border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;margin:4px 4px 16px;padding:12px 14px;text-align:center;background:var(--paper-2)}
.friend .fname{font:700 22px/1.1 "Playfair Display",Georgia,serif}
.friend p{margin:6px 0 10px;font:italic 14px/1.45 "Lora",serif;color:var(--muted)}
.fbtn{display:inline-block;padding:6px 14px;background:var(--green);color:#efe7cf;text-decoration:none;font:600 12px "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase}
.fbtn:hover{background:var(--ink)}

/* ---------- Editorial at the top of an edition ---------- */
.editorial{margin:18px 0 6px;padding:14px 0 4px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ed-kicker{font:600 12px "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ed-title{font:italic 700 24px/1.2 "Playfair Display",Georgia,serif;margin:4px 0 8px}
.editorial p{margin:0 0 10px;font-size:16.5px}
.editorial p:first-of-type::first-letter{float:left;font:900 50px/.82 "Playfair Display",Georgia,serif;padding:5px 7px 0 0;color:var(--green)}
.ed-sign{text-align:right;font:italic 15px "Lora",serif;color:var(--muted);margin-bottom:8px}

/* RSS link under Past Editions */
.rss{display:block;margin:16px 0 0;font:600 12px "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.rss::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:2px;background:var(--m);vertical-align:0}
footer a{color:inherit}
@media (max-width:820px){ .rss{order:4;width:100%} }