/* ============================================================
   Cragg Mooer — shared site styles
   "Quiet literary journal": serif body + mono kickers, warm
   paper, single stone-blue accent.
   ============================================================ */

:root{
  /* paper / ink — cool palette */
  --cream:#eceee9;
  --paper:#f5f6f2;
  --ink:#211f1a;
  --ink-soft:#6a665c;
  --ink-faint:#9a9588;
  --line:#d5d8cf;
  --line-soft:#e2e4dc;
  /* accent (moss) */
  --accent:#5f6b4d;
  --accent-deep:#47512f;
  /* type */
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* measure */
  --measure:38rem;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  font-weight:400;
  font-optical-sizing:auto;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"dlig" 1;
  font-variant-numeric:oldstyle-nums proportional-nums;
  hanging-punctuation:first last;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* faint paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.wrap{position:relative;z-index:1;}

/* ---------- shared layout ---------- */
.col{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:26px;
}

/* ---------- kicker / labels (mono) ---------- */
.kicker{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.meta{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* rule with centered glyph */
.rule{display:flex;align-items:center;gap:18px;color:var(--line);}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line);}
.rule .mark{height:22px;width:auto;opacity:.8;flex:none;}
.rule .mark img{height:100%;width:auto;object-fit:contain;display:block;}

/* cows facing the other way */
.cm-logo[data-flip]{transform:scaleX(-1);}

/* ---------- masthead ---------- */
.masthead{padding:64px 0 14px;text-align:center;}
.masthead .logo{
  height:92px;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 16px 26px rgba(33,31,26,.16));
}
.masthead .logo img{height:100%;width:auto;max-width:240px;object-fit:contain;display:block;}
.wordmark{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px,6vw,46px);
  line-height:1;
  letter-spacing:-.01em;
  margin:0;
}
.masthead .tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:21px;
  color:var(--ink-soft);
  margin:14px 0 0;
}

/* ---------- nav ---------- */
.nav{
  display:flex;justify-content:center;gap:30px;flex-wrap:wrap;
  margin-top:26px;
}
.nav a{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  padding-bottom:3px;border-bottom:1.5px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--ink);border-color:var(--accent);}

/* ---------- featured essay ---------- */
.featured{padding:18px 0 8px;}
.featured .essay-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(30px,5vw,40px);
  line-height:1.12;
  letter-spacing:-.012em;
  margin:16px 0 18px;
  text-wrap:balance;
}
.featured .lede{
  font-size:20px;line-height:1.62;color:var(--ink-soft);margin:0 0 24px;
  text-wrap:pretty;
}

/* ---------- read link ---------- */
.readlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--accent);padding-bottom:5px;
  transition:gap .2s,color .2s;
}
.readlink:hover{gap:16px;color:var(--accent-deep);}
.readlink .ar{font-family:var(--mono);}

/* ---------- section heading ---------- */
.sec{padding:46px 0 0;}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px;}
.sec-h .more{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;}
.sec-h .more:hover{color:var(--accent-deep);}

/* ---------- post list ---------- */
.posts{list-style:none;margin:0;padding:0;}
.posts li{border-bottom:1px solid var(--line-soft);}
.posts a{
  display:flex;align-items:baseline;gap:20px;
  padding:18px 4px;text-decoration:none;color:var(--ink);
  transition:padding-left .2s,background .2s;
}
.posts a:hover{padding-left:12px;background:linear-gradient(90deg,rgba(86,105,125,.06),transparent);}
.posts .pdate{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-faint);width:92px;flex:none;text-transform:uppercase;
  transform:translateY(2px);}
.posts .ptitle{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.2;}
.posts .par{margin-left:auto;color:var(--accent);font-family:var(--mono);
  opacity:0;transition:opacity .2s;}
.posts a:hover .par{opacity:1;}

/* ---------- art strip ---------- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.art-tile{
  position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:5px;
  overflow:hidden;background:
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(106,102,92,.10) 10px 11px),
    var(--paper);
  display:flex;align-items:flex-end;padding:12px;
}
.art-tile span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);background:var(--cream);border:1px solid var(--line);
  padding:3px 8px;border-radius:3px;
}

/* ---------- about ---------- */
.about p{font-size:20px;line-height:1.66;color:var(--ink);margin:14px 0 0;text-wrap:pretty;}
.about .em{color:var(--accent-deep);font-style:italic;}

/* ---------- subscribe ---------- */
.subscribe{text-align:center;padding:30px 0 4px;}
.subscribe h3{font-family:var(--serif);font-weight:500;font-size:25px;margin:0 0 6px;}
.subscribe p{font-size:17px;color:var(--ink-soft);margin:0 0 20px;}
.subscribe .aside{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-soft);margin:0;}
.subscribe .aside a{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-deep);text-decoration:none;
  border-bottom:1.5px solid var(--accent);padding-bottom:3px;margin-left:4px;white-space:nowrap;
  transition:color .18s;}
.subscribe .aside a:hover{color:var(--ink);}

/* ---------- footer ---------- */
.foot{padding:64px 0 70px;text-align:center;}
.foot .logo{height:42px;margin:0 auto 16px;opacity:.85;display:flex;justify-content:center;}
.foot .logo img{height:100%;width:auto;object-fit:contain;display:block;}
.foot .fnav{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:14px;}
.foot .fnav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;}
.foot .fnav a:hover{color:var(--ink);}
.foot small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);}

/* ---------- entrance animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);
    animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
  .reveal.d1{animation-delay:.06s;}
  .reveal.d2{animation-delay:.16s;}
  .reveal.d3{animation-delay:.28s;}
  .reveal.d4{animation-delay:.42s;}
  @keyframes rise{to{opacity:1;transform:none;}}
}

/* ============================================================
   ESSAY / ARTICLE PAGE
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--cream) 86%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .row{display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;}
.topbar .home{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex-shrink:0;}
.topbar .home img{height:26px;width:auto;object-fit:contain;display:block;}
.topbar .home b{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:-.01em;white-space:nowrap;}
.topbar .back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;flex-shrink:0;}
.topbar .back:hover{color:var(--accent);}

.article{padding:56px 0 0;}
.article .a-kicker{text-align:center;}
.article h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,5.5vw,48px);line-height:1.1;letter-spacing:-.015em;
  text-align:center;text-wrap:balance;margin:18px 0 18px;
}
.article .a-meta{text-align:center;margin-bottom:46px;}
.article .a-body{font-size:20px;line-height:1.72;}
.article .a-body p{margin:0 0 26px;text-wrap:pretty;}

/* prose links: a hairline accent rule that thickens on hover */
.article .a-body a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-thickness .15s,color .15s;
}
.article .a-body a:hover{
  color:var(--accent-deep);
  text-decoration-thickness:2px;
}

/* emphasis: italic Newsreader is lovely on its own; strong stays
   the same weight as body and shifts colour instead of going heavy */
.article .a-body em{font-style:italic;}
.article .a-body strong{font-weight:500;color:var(--accent-deep);}

/* in-article headings */
.article .a-body h2{
  font-family:var(--serif);font-weight:500;
  font-size:28px;line-height:1.2;letter-spacing:-.012em;
  margin:50px 0 14px;text-wrap:balance;
}
.article .a-body h3{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:22px;line-height:1.25;
  margin:38px 0 10px;color:var(--ink-soft);text-wrap:balance;
}

/* horizontal rule as a centred ornamental break */
.article .a-body hr{
  border:0;height:auto;margin:42px 0;text-align:center;
  color:var(--ink-faint);
}
.article .a-body hr::before{
  content:"✦";font-family:var(--serif);font-size:14px;letter-spacing:.6em;
  padding-left:.6em;
}

.article .a-body blockquote{
  margin:34px 0;padding:6px 0 6px 26px;border-left:2px solid var(--accent);
  font-style:italic;color:var(--ink-soft);font-size:20px;line-height:1.6;
}
.article .a-body blockquote p{margin:0 0 14px;}
.article .a-body blockquote p:last-child{margin:0;}
.article .a-body blockquote cite{
  display:block;font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px;
}
/* big pull quote */
.pullquote{
  margin:48px 0;text-align:center;
}
.pullquote p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(26px,4.4vw,34px);line-height:1.3;color:var(--ink);
  letter-spacing:-.01em;margin:0;text-wrap:balance;
}
.article .a-end{display:flex;justify-content:center;margin:50px 0 0;}
.article .a-end .mark{height:26px;opacity:.8;}
.article .a-end .mark img{height:100%;width:auto;object-fit:contain;}

@media (max-width:560px){
  body{font-size:18px;}
  .masthead{padding:46px 0 10px;}
  .nav{gap:20px;}
  .posts .pdate{width:74px;}
}