/* ==========================================================================
   masonlenehan.com — Writing / Articles
   Tile grid of article "leaflets" + the click-to-open reader overlay.
   Reuses the class names emitted by js/overlay.js (ported from FND) so the
   behaviour is identical; only the look is re-themed to the glossy world.
   Tiles are collectible-card plaques; the reader is a parchment scroll.
   ========================================================================== */

/* ---------- Page backdrop ---------- */
.page-writing{
  background:
    radial-gradient(260px 160px at 10% 24%,rgba(46,125,23,.16),transparent 70%),
    radial-gradient(240px 150px at 90% 20%,rgba(6,120,181,.12),transparent 72%),
    linear-gradient(var(--sky),var(--sky2) 30%,#d6ec93 30%,#bcd76a 78%,#a9c95e) fixed;
}

/* ---------- Intro plaque ---------- */
.articles-intro{max-width:64ch}
.articles-intro > :last-child{margin-bottom:0}

/* ---------- Tile grid ---------- */
.article-tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.2rem;margin-top:1.6rem;padding:0;list-style:none;
}
.article-tiles:empty::after{
  content:"New writing is on the way. Check back soon.";
  display:block;grid-column:1 / -1;text-align:center;font-weight:700;color:var(--ink-soft);
  background:linear-gradient(#fff,#ffe9a8);border:3px dashed var(--wood);border-radius:16px;
  padding:1.4rem;box-shadow:var(--drop-sm);
}

.article-tile{
  position:relative;display:flex;flex-direction:column;gap:.55rem;
  background:linear-gradient(#fffef4,#fff0bf);border:5px solid var(--wood);border-radius:22px;
  box-shadow:inset 0 0 0 4px var(--paper2),var(--drop-sm);
  padding:1.15rem 1.25rem 1.25rem;cursor:pointer;
  transition:transform .1s ease,box-shadow .1s ease,filter .1s ease;
}
.article-tile::before{
  content:"";position:absolute;left:14px;right:14px;top:10px;height:28%;border-radius:16px;
  pointer-events:none;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));
}
.article-tile > *{position:relative}
.article-tile:hover,.article-tile:focus-visible{
  transform:translateY(-5px) rotate(-.6deg);filter:brightness(1.02);
  box-shadow:inset 0 0 0 4px var(--paper2),0 10px 0 rgba(110,63,18,.32),0 18px 24px rgba(0,0,0,.22);
}
.article-tile:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.article-tile h2{
  margin:0;color:#7b2e12;font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.05;
}
.article-tile p{margin:0;font-weight:600;color:var(--ink)}
.article-tile p.muted{color:var(--ink-soft);font-size:.9rem;font-weight:600}
.article-tile__cta{margin-top:auto;align-self:flex-start}

/* ---------- Reader overlay (parchment scroll) ---------- */
.article-overlay{
  position:fixed;inset:0;z-index:140;display:none;
  background:rgba(40,26,12,.86);padding:clamp(.8rem,3vw,2.4rem);
}
.article-overlay.is-open{display:grid;place-items:center}
body.has-article-open{overflow:hidden}

.article-viewer{
  display:flex;flex-direction:column;width:min(760px,100%);max-height:90vh;overflow:hidden;
  background:linear-gradient(#fffef7,#f6e2b6);border:7px solid var(--wood);border-radius:22px;
  box-shadow:inset 0 0 0 4px #f7dca6,0 16px 30px rgba(0,0,0,.5);
}
.article-viewer__toolbar{
  display:flex;align-items:center;gap:1rem;justify-content:space-between;flex:none;
  padding:.7rem 1rem;background:linear-gradient(#2f86c0,#055d8c);color:#fff;
  border-bottom:5px solid var(--yellow);
}
.article-viewer__title{
  margin:0;font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.1;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.article-viewer__controls{display:flex;align-items:center;gap:.4rem}
/* prev/next only ever apply to the (unused) frame-cycle mode; keep them hidden here. */
.article-viewer__nav,.article-viewer__counter{display:none}
.article-overlay.has-cycle .article-viewer__nav,
.article-overlay.has-cycle .article-viewer__counter{display:inline-flex;align-items:center}
.article-viewer__close{
  width:42px;height:42px;flex:none;border:3px solid var(--wood-d);border-radius:12px;
  background:linear-gradient(#fff6c4,#ecdc78);color:#7b2e12;font-size:1.5rem;line-height:1;
  font-weight:900;cursor:pointer;box-shadow:var(--gloss),var(--drop-sm);
}
.article-viewer__close:active{transform:translateY(2px)}

.article-viewer__body{
  overflow-y:auto;padding:clamp(1.1rem,3.5vw,2.1rem);color:var(--ink);line-height:1.68;
  font-size:1.04rem;
}
.article-viewer__body > :first-child{margin-top:0}
.article-viewer__body > :last-child{margin-bottom:0}
.article-viewer__body h1,.article-viewer__body h2,.article-viewer__body h3,
.article-viewer__body h4{font-family:var(--display);color:#7b2e12;line-height:1.1;margin:1.5rem 0 .6rem}
.article-viewer__body h1{font-size:clamp(1.7rem,4vw,2.3rem)}
.article-viewer__body h2{font-size:clamp(1.4rem,3.2vw,1.8rem)}
.article-viewer__body h3{font-size:1.24rem}
.article-viewer__body p{margin:0 0 1rem}
.article-viewer__body a{color:var(--blue-d);text-decoration:underline;font-weight:700}
.article-viewer__body ul,.article-viewer__body ol{margin:0 0 1rem;padding-left:1.4rem}
.article-viewer__body li{margin:.25rem 0}
.article-viewer__body blockquote{
  margin:0 0 1rem;padding:.6rem 1rem;background:rgba(255,255,255,.6);
  border-left:5px solid var(--orange);border-radius:0 12px 12px 0;font-style:italic;color:var(--ink-soft);
}
.article-viewer__body hr{border:0;border-top:3px dashed rgba(110,63,18,.4);margin:1.4rem 0}
.article-viewer__body code{
  font-family:var(--mono);font-size:.92em;background:rgba(110,63,18,.1);
  padding:.1rem .35rem;border-radius:6px;
}
.article-viewer__body pre{
  margin:0 0 1rem;padding:1rem;overflow-x:auto;background:#2a2016;color:#fdf3d8;
  border-radius:12px;border:3px solid var(--wood-d);
}
.article-viewer__body pre code{background:none;padding:0;color:inherit}
.article-viewer__body img{border:5px solid #fff;border-radius:14px;box-shadow:var(--drop-sm);margin:0 0 1rem}
.article-viewer__body table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.96rem}
.article-viewer__body th,.article-viewer__body td{
  padding:.5rem .6rem;border:2px solid rgba(110,63,18,.35);text-align:left;
}
.article-viewer__body th{background:rgba(230,184,92,.4);font-family:var(--display)}

@media(max-width:560px){
  .article-viewer{max-height:94vh}
  .article-tiles{grid-template-columns:1fr}
}


/* ==========================================================================
   Writing — sub-topic gallery groups + standalone reader subpage
   (/article/<slug>). The reader body carries .article-viewer__body too, so the
   parchment prose styles above render it; this block adds the page chrome.
   ========================================================================== */
.article-tile__link { color: inherit; text-decoration: none; }
.article-tile h2 a:hover { text-decoration: none; }

.article-group { grid-column: 1 / -1; margin: 0 0 2rem; }
.article-group__title { font-family: var(--display); color: #7b2e12; font-size: 1.3rem; margin: 0 0 1rem; }
.article-group__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }

.page-article {
  background:
    radial-gradient(260px 160px at 10% 24%, rgba(46,125,23,.16), transparent 70%),
    radial-gradient(240px 150px at 90% 20%, rgba(6,120,181,.12), transparent 72%),
    linear-gradient(var(--sky), var(--sky2) 30%, #d6ec93 30%, #bcd76a 78%, #a9c95e) fixed;
}
.article-doc-shell { max-width: 760px; margin: 0 auto; padding: 0; }
.article-doc {
  background: linear-gradient(#fffef7, #f6e2b6); border: 7px solid var(--wood); border-radius: 22px;
  box-shadow: inset 0 0 0 4px #f7dca6, var(--drop-sm); padding: clamp(1.2rem, 4vw, 2.4rem);
}
.article-doc__eyebrow { font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; margin: 0 0 .5rem; }
.article-doc__eyebrow a { color: var(--blue-d); text-decoration: none; }
.article-doc__title { font-family: var(--display); color: #7b2e12; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.08; margin: 0 0 1rem; }
.article-doc__summary { font-weight: 700; color: var(--ink); font-size: 1.08rem; }
.article-doc .article-viewer__body { padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
.article-doc__foot { margin-top: 2rem; padding-top: 1rem; border-top: 3px dashed rgba(110,63,18,.35); }
.article-doc__foot a { color: var(--blue-d); font-weight: 700; text-decoration: none; }
.article-doc__refs { margin-top: 2rem; }
.article-doc__tablewrap { overflow-x: auto; }