/* ============================================================
   The Westmarch Review — site stylesheet
   Palette, type and layout for a provincial book gazette.
   ============================================================ */

:root{
  --paper:      #E7DFC9;   /* yellowed pulp newsprint */
  --paper-deep: #DDD3B8;   /* shadowed paper, boxes   */
  --ink:        #26231C;   /* soft black, never #000  */
  --ink-faded:  #6A6153;   /* second impression       */
  --rule:       #B4A88C;   /* hairline rules          */
  --hedge:      #47593A;   /* hedgerow green          */
  --oxide:      #8B3A2C;   /* stamp ink, used sparingly */

  --col-gap: 1.9rem;
  --measure: 34rem;        /* comfortable reading width */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:radial-gradient(ellipse at 50% 0%, #EDE6D2 0%, var(--paper) 55%, #DCD2B7 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Old Standard TT", Georgia, serif;
  font-size:17px;
  line-height:1.58;
}

/* paper grain */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.sheet{
  position:relative; z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:1.6rem 1.5rem 0;
}

.sheet.narrow{ max-width:940px; }

a{ color:inherit; }
a:focus-visible{ outline:2px solid var(--hedge); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; z-index:99;
  font-family:"IM Fell English SC", serif;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- utility label ---------- */
.label{
  font-family:"IM Fell English SC", serif;
  font-size:.82rem;
  letter-spacing:.09em;
  color:var(--ink-faded);
  margin:0;
}

.sr{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- folio ---------- */
.folio{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--rule);
  padding-bottom:.5rem;
}

/* ---------- masthead ---------- */
.masthead{
  text-align:center;
  padding:1.5rem 0 .8rem;
  animation:settle 1.1s ease-out both;
}

@keyframes settle{
  from{ opacity:0; filter:blur(3px); transform:translateY(-4px); }
  to  { opacity:1; filter:blur(0);   transform:none; }
}

.masthead h1{
  font-family:"IM Fell English SC", serif;
  font-weight:400;
  font-size:clamp(2.7rem, 9.4vw, 6.6rem);
  line-height:.94;
  margin:0;
  letter-spacing:.005em;
  text-shadow:0 0 1px rgba(38,35,28,.35);
}

.masthead.compact{ padding:1rem 0 .5rem; }
.masthead.compact h1{ font-size:clamp(1.9rem, 5.2vw, 3.1rem); }
.masthead.compact .motto{ font-size:.92rem; margin-top:.45rem; }

.masthead h1 a{ text-decoration:none; }

.mast-flank{ display:flex; align-items:center; justify-content:center; gap:1.2rem; }
.sprig{ flex:0 0 auto; color:var(--hedge); opacity:.9; }
.sprig.right{ transform:scaleX(-1); }

.motto{
  font-family:"IM Fell English", serif;
  font-style:italic;
  color:var(--ink-faded);
  font-size:1.02rem;
  margin:.75rem 0 0;
}

/* ---------- dateline ---------- */
.dateline{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:.35rem 1.2rem;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:.42rem 0;
  margin-top:1rem;
}

/* ---------- nav ---------- */
.gangway{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.2rem 1.5rem;
  border-bottom:1px solid var(--ink);
  padding:.55rem 0;
}

.gangway a{
  font-family:"IM Fell English SC", serif;
  font-size:.95rem;
  letter-spacing:.05em;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .18s;
}

.gangway a:hover{ border-bottom-color:var(--ink); }
.gangway a[aria-current="page"]{ border-bottom-color:var(--hedge); color:var(--hedge); }

/* ---------- front page grid ---------- */
.above-fold{
  display:grid;
  grid-template-columns:0.85fr 2.25fr 1.15fr;
  gap:0 var(--col-gap);
  padding-top:1.6rem;
}

.above-fold > * + *{
  border-left:1px solid var(--rule);
  padding-left:var(--col-gap);
}

/* ---------- story type ---------- */
.kicker{
  font-family:"IM Fell English SC", serif;
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--hedge);
  display:block;
  margin-bottom:.3rem;
}

.hed{
  font-family:"IM Fell DW Pica", serif;
  font-weight:400;
  line-height:1.03;
  margin:0 0 .45rem;
}

.hed a{
  text-decoration:none;
  background-image:linear-gradient(var(--ink), var(--ink));
  background-size:0% 1px;
  background-position:0 96%;
  background-repeat:no-repeat;
  transition:background-size .28s ease;
}

.hed a:hover{ background-size:100% 1px; }

.lead{ position:relative; }
.lead .hed{ font-size:clamp(2rem, 4.6vw, 3.15rem); }

.subhed{
  font-family:"IM Fell English", serif;
  font-style:italic;
  font-size:1.1rem;
  color:var(--ink-faded);
  margin:0 0 .7rem;
  line-height:1.35;
}

.byline{
  font-family:"IM Fell English SC", serif;
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--ink-faded);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:.28rem 0;
  margin:0 0 .85rem;
}

.lead p.body{ margin:0 0 .8rem; }

.lead p.body:first-of-type::first-letter{
  font-family:"IM Fell DW Pica", serif;
  float:left;
  font-size:4.15rem;
  line-height:.78;
  padding:.06em .1em 0 0;
  color:var(--hedge);
}

.lead-cols{ columns:2; column-gap:var(--col-gap); column-rule:1px solid var(--rule); }

.more{
  font-family:"IM Fell English SC", serif;
  font-size:.85rem;
  letter-spacing:.06em;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}

.more:hover{ border-bottom-color:var(--ink); }
.more::after{ content:" \2192"; }

/* ---------- the Larder scale ---------- */
.larder{ display:flex; align-items:center; gap:.42rem; margin:.15rem 0 .55rem; flex-wrap:wrap; }
.larder .plates{ display:flex; gap:.24rem; }

.plate{
  width:12px; height:12px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:block;
}

.plate.full{
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 3.2px, transparent 3.3px),
    var(--paper-deep);
  box-shadow:inset 0 0 0 1.5px var(--paper);
}

.larder .verdict{
  font-family:"IM Fell English SC", serif;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink-faded);
}

.larder.big .plate{ width:17px; height:17px; }
.larder.big .plate.full{ background:radial-gradient(circle at 50% 50%, var(--ink) 0 4.6px, transparent 4.7px), var(--paper-deep); }
.larder.big .verdict{ font-size:.95rem; }

/* ---------- stamp ---------- */
.stamp{
  position:absolute; top:-.4rem; right:-.2rem;
  transform:rotate(-11deg);
  border:2px solid var(--oxide);
  border-radius:38px;
  color:var(--oxide);
  font-family:"IM Fell English SC", serif;
  font-size:.72rem;
  letter-spacing:.14em;
  padding:.3rem .78rem;
  opacity:.72;
  line-height:1.15;
  text-align:center;
  pointer-events:none;
}

/* ---------- rails ---------- */
.rail section{ margin-bottom:1.7rem; }

.rail h3, .contents h3, .boxhead{
  font-family:"IM Fell English SC", serif;
  font-weight:400;
  font-size:1.02rem;
  letter-spacing:.06em;
  margin:0 0 .5rem;
  padding-bottom:.28rem;
  border-bottom:2px solid var(--ink);
}

.contents ol{ list-style:none; margin:0; padding:0; }

.contents li{
  display:flex; gap:.5rem; align-items:baseline;
  padding:.42rem 0;
  border-bottom:1px dotted var(--rule);
  font-size:.94rem;
}

.contents li a{ text-decoration:none; }
.contents li a:hover{ text-decoration:underline; }

.pg{
  font-family:"IM Fell English SC", serif;
  font-size:.76rem;
  color:var(--ink-faded);
  margin-left:auto;
  white-space:nowrap;
}

.weather p{ margin:.2rem 0 .55rem; font-size:.95rem; }

.notice{
  border-top:1px solid var(--rule);
  padding:.55rem 0;
  font-size:.9rem;
  line-height:1.44;
}

.notice:first-of-type{ border-top:none; }

.notice b{
  font-family:"IM Fell English SC", serif;
  font-weight:400;
  letter-spacing:.05em;
}

.keybox{
  background:var(--paper-deep);
  border:1px solid var(--rule);
  padding:.85rem .9rem;
}

.keybox ul{ margin:.4rem 0 0; padding-left:1.05rem; font-size:.88rem; }
.keybox li{ margin-bottom:.24rem; }

/* ---------- below the fold ---------- */
.fold-rule{
  border:0;
  border-top:1px solid var(--ink);
  border-bottom:3px solid var(--ink);
  height:3px;
  margin:2rem 0 0;
}

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:.7rem 0 1.1rem;
}

.section-head h2{
  font-family:"IM Fell English SC", serif;
  font-weight:400;
  font-size:1.5rem;
  letter-spacing:.05em;
  margin:0;
}

.shorts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem var(--col-gap);
}

.shorts article{
  padding-left:var(--col-gap);
  border-left:1px solid var(--rule);
}

.shorts article:first-child,
.shorts article:nth-child(4){ padding-left:0; border-left:none; }

.shorts .hed{ font-size:1.42rem; }
.shorts p{ font-size:.95rem; margin:0 0 .6rem; }

/* ---------- article pages ---------- */
.crumbs{
  font-family:"IM Fell English SC", serif;
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--ink-faded);
  padding:.9rem 0 0;
}
.crumbs a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.crumbs a:hover{ border-bottom-color:var(--ink); }

.article{
  max-width:var(--measure);
  margin:0 auto;
  padding:1.6rem 0 0;
}

.article-head{ border-bottom:3px solid var(--ink); padding-bottom:1.1rem; margin-bottom:1.4rem; }

.article-head .hed{ font-size:clamp(2.05rem, 5.4vw, 3.05rem); margin-bottom:.55rem; }
.article-head .subhed{ font-size:1.16rem; margin-bottom:.9rem; }

.bibl{
  background:var(--paper-deep);
  border:1px solid var(--rule);
  padding:.75rem .9rem;
  font-size:.93rem;
  line-height:1.5;
  margin:1rem 0 0;
}
.bibl dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.22rem .8rem; }
.bibl dt{
  font-family:"IM Fell English SC", serif;
  font-size:.78rem; letter-spacing:.07em;
  color:var(--ink-faded);
}
.bibl dd{ margin:0; }

.article p{ margin:0 0 1.05rem; }

.article-body > p:first-child::first-letter{
  font-family:"IM Fell DW Pica", serif;
  float:left;
  font-size:4.15rem;
  line-height:.78;
  padding:.06em .1em 0 0;
  color:var(--hedge);
}

.article h2{
  font-family:"IM Fell English SC", serif;
  font-weight:400;
  font-size:1.32rem;
  letter-spacing:.05em;
  margin:2.1rem 0 .7rem;
  padding-bottom:.25rem;
  border-bottom:1px solid var(--rule);
}

.article blockquote{
  margin:1.7rem 0;
  padding:0 0 0 1.2rem;
  border-left:3px solid var(--hedge);
  font-family:"IM Fell English", serif;
  font-style:italic;
  font-size:1.18rem;
  line-height:1.45;
  color:var(--ink-faded);
}

.article blockquote cite{
  display:block;
  font-family:"IM Fell English SC", serif;
  font-style:normal;
  font-size:.78rem;
  letter-spacing:.07em;
  margin-top:.45rem;
}

.verdict-box{
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  padding:1.1rem 0;
  margin:2.2rem 0;
}
.verdict-box h2{ margin:0 0 .5rem; border:none; padding:0; }
.verdict-box p{ margin:0 0 .7rem; }
.verdict-box p:last-child{ margin-bottom:0; }

.spoiler-note{
  font-family:"IM Fell English SC", serif;
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--oxide);
  border:1px solid var(--oxide);
  padding:.4rem .7rem;
  display:inline-block;
  margin:0 0 1.2rem;
}

.pager{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--col-gap);
  border-top:1px solid var(--ink);
  padding-top:1.1rem;
  margin-top:2.4rem;
}
.pager div:last-child{ text-align:right; border-left:1px solid var(--rule); padding-left:var(--col-gap); }
.pager a{ text-decoration:none; font-family:"IM Fell DW Pica", serif; font-size:1.16rem; line-height:1.15; display:block; margin-top:.2rem; }
.pager a:hover{ text-decoration:underline; }

/* ---------- archive list ---------- */
.archive{ border-top:1px solid var(--ink); margin-top:1.2rem; }

.archive article{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.3rem 1.5rem;
  align-items:baseline;
  padding:1.15rem 0;
  border-bottom:1px solid var(--rule);
}

.archive .hed{ font-size:1.55rem; margin:0; grid-column:1; }
.archive .meta{ grid-column:2; grid-row:1 / span 2; text-align:right; }
.archive p{ grid-column:1; margin:0; font-size:.95rem; color:var(--ink-faded); }

/* ---------- subscribe ---------- */
.post{
  margin:2.4rem 0 0;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  padding:1.4rem 1.2rem;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:1.5rem var(--col-gap);
  align-items:center;
}

.post h2{
  font-family:"IM Fell DW Pica", serif;
  font-weight:400;
  font-size:1.9rem;
  margin:0 0 .4rem;
  line-height:1.08;
}

.post p{ margin:0; font-size:.97rem; }

.postform{ display:flex; gap:.5rem; flex-wrap:wrap; }

.postform input{
  flex:1 1 11rem;
  font-family:"Old Standard TT", serif;
  font-size:1rem;
  padding:.55rem .6rem;
  background:var(--paper);
  border:1px solid var(--ink);
  color:var(--ink);
}

.postform input::placeholder{ color:var(--ink-faded); opacity:.8; }

.postform button{
  font-family:"IM Fell English SC", serif;
  font-size:.92rem;
  letter-spacing:.08em;
  padding:.55rem 1.1rem;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  cursor:pointer;
  transition:background .18s, color .18s;
}

.postform button:hover{ background:var(--hedge); border-color:var(--hedge); }

/* ---------- colophon ---------- */
.colophon{
  text-align:center;
  padding:2rem 0 3rem;
  font-family:"IM Fell English", serif;
  font-style:italic;
  color:var(--ink-faded);
  font-size:.92rem;
  line-height:1.7;
}

.colophon .sprig{ display:block; margin:0 auto .7rem; }

/* ---------- 404 ---------- */
.lost{ text-align:center; padding:4rem 0 5rem; max-width:34rem; margin:0 auto; }
.lost .hed{ font-size:clamp(2.2rem,6vw,3.4rem); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .above-fold{ grid-template-columns:1fr 1fr; }
  .contents{ grid-column:1 / -1; padding-left:0; border-left:none; }
  .lead{ grid-column:1 / -1; padding-left:0; border-left:none;
         border-top:1px solid var(--rule); padding-top:1.2rem; margin-top:1.2rem; }
  .rail{ grid-column:1 / -1; padding-left:0; border-left:none;
         border-top:1px solid var(--rule); padding-top:1.2rem; margin-top:1.2rem; }
  .shorts{ grid-template-columns:repeat(2, 1fr); }
  .shorts article:nth-child(4){ padding-left:var(--col-gap); border-left:1px solid var(--rule); }
  .shorts article:nth-child(odd){ padding-left:0; border-left:none; }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .sheet{ padding:1rem 1.1rem 0; }
  .lead-cols{ columns:1; }
  .shorts{ grid-template-columns:1fr; }
  .shorts article{ padding-left:0; border-left:none;
                   border-top:1px solid var(--rule); padding-top:1.1rem; }
  .shorts article:first-child{ border-top:none; padding-top:0; }
  .post{ grid-template-columns:1fr; }
  .stamp{ position:static; display:inline-block; transform:rotate(-3deg); margin-bottom:.7rem; }
  .mast-flank .sprig{ display:none; }
  .pager{ grid-template-columns:1fr; gap:1.1rem; }
  .pager div:last-child{ text-align:left; border-left:none; padding-left:0;
                         border-top:1px solid var(--rule); padding-top:1.1rem; }
  .archive article{ grid-template-columns:1fr; }
  .archive .meta{ grid-column:1; grid-row:auto; text-align:left; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}