/* ============================================================
   STACKALITY — the Writing section
   Loaded by the WordPress theme, and by nothing else.

   THE RULE: WordPress is a text editor with a login screen. It is
   not a design system, it is not a brand, and no visitor should
   ever be able to tell it is there.

   That is why this file is short. The theme loads tokens.css,
   site.css, chrome.css and scrollbars.css — the same four the rest
   of the site loads — so the bar, the footer, the search box, the
   scrollbars, .pane, .band and the .post card are all already
   defined. The Writing page reuses the .post card verbatim from
   the home page's log carousel; it is the same component, laid
   out in a grid instead of a horizontal track.

   Everything below is only what genuinely does not exist yet:
   a grid wrapper, and the prose inside an article.

   If you find yourself adding a colour here, stop — it belongs in
   tokens.css, or it is drift.
   ============================================================ */


/* ============================================================
   THE POST GRID
   Identical cards to the home page carousel. .post and .post-shot
   and the rest come from site.css untouched; this only changes
   the container from a scrolling row to a wrapping grid, and
   releases the fixed tile width the carousel needs.
   ============================================================ */
.wr-grid{
  display:grid;gap:var(--frame);
  grid-template-columns:1fr;
  margin:0;padding:0;list-style:none;
}
@media(min-width:700px){.wr-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.wr-grid{grid-template-columns:repeat(3,1fr)}}

/* the carousel pins .post to a tile width; in a grid the column
   decides instead */
.wr-grid .post{flex:none;scroll-snap-align:none}

/* A post with a featured image shows it in the same box the
   carousel's gradient placeholder occupies, so a page mixing
   both keeps one card height. */
.wr-grid .post-shot{position:relative;overflow:hidden}
.wr-grid .post-shot img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}

/* the category, when there is one worth naming */
.post-cat{
  display:block;padding:0 16px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--know);
}


/* ============================================================
   THE ARTICLE
   One column, measured for reading. 68ch is about as wide as a
   line can get before the eye starts losing the return sweep.
   ============================================================ */
.wr-article{max-width:min(100%,720px);margin:0 auto;padding:8px 0 4px}

.wr-article .wr-hero{
  border-radius:var(--r-inner);overflow:hidden;
  border:1px solid var(--edge-soft);margin:0 0 26px;
}
.wr-article .wr-hero img{width:100%;height:auto;display:block}

.wr-article h1{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(28px,4.4vw,44px);line-height:1.03;letter-spacing:-.04em;
  margin:0;color:var(--ink);text-wrap:balance;
}
.wr-byline{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dimmer);
  margin:16px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.wr-byline .cat{color:var(--know)}

/* ---- the prose ---------------------------------------------
   Serif for the body. The rest of the site is display sans, and an
   article is the one place a reader is asked to stay for ten
   minutes rather than scan. --serif is already in tokens.css and
   already loaded — this is not a new typeface, just the one that
   was always there for this purpose. */
.wr-prose{
  margin:30px 0 0;
  font-family:var(--serif);
  font-size:17.5px;line-height:1.72;color:#D8D2E8;
  max-width:68ch;
}
/* FLOW SPACING — and why this looks more careful than it needs to
   be.

   It used to read:
       .wr-prose > * + *{margin-top:1.15em}
       .wr-prose p{margin:0}
   and paragraphs came out with no space between them at all.

   Specificity. `.wr-prose > * + *` scores (0,1,0) — one class, and
   universal selectors count for nothing. `.wr-prose p` scores
   (0,1,1) — one class and one element name. So the reset won on
   every paragraph, the flow rule never applied to the one element
   it mattered most for, and prose ran together in a single block
   while headings and lists spaced correctly. Which is a confusing
   way for it to fail, because it looks like the rule is missing
   rather than overruled.

   :where() is the fix: everything inside it contributes ZERO
   specificity, so this reset scores (0,1,0) — equal to the flow
   rule, which then wins on being written second. Any element with
   its own opinion further down (headings, lists, blockquotes,
   figures) is at (0,1,1) and still overrides both, which is what
   we want.

   Never write a bare element reset in here again. Put it in the
   :where() list. */
.wr-prose :where(p, ul, ol, dl, figure, blockquote, pre, table, h2, h3, h4){
  margin:0;
}
.wr-prose > * + *{margin-top:1.15em}
.wr-prose > :first-child{margin-top:0}

.wr-prose a{color:var(--know);text-decoration:underline;text-underline-offset:3px}
.wr-prose a:hover{color:var(--signal)}
.wr-prose strong,.wr-prose b{color:var(--ink);font-weight:600}

.wr-prose h2,.wr-prose h3,.wr-prose h4{
  font-family:var(--disp);color:var(--ink);
  letter-spacing:-.026em;line-height:1.15;margin-top:1.9em;
}
.wr-prose h2{font-size:26px;font-weight:800}
.wr-prose h3{font-size:20px;font-weight:700}
.wr-prose h4{font-size:16.5px;font-weight:700;letter-spacing:-.01em}

.wr-prose ul,.wr-prose ol{padding-left:1.3em;margin-top:1.1em}
.wr-prose li + li{margin-top:.45em}
.wr-prose li::marker{color:var(--signal)}

.wr-prose blockquote{
  margin:1.6em 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--signal);
  color:var(--dim);font-style:italic;
}
.wr-prose blockquote p{margin:0}

.wr-prose code{
  font-family:var(--mono);font-size:.86em;
  background:var(--near);border:1px solid var(--edge-soft);
  border-radius:5px;padding:.12em .4em;color:var(--know);
}
.wr-prose pre{
  background:var(--far);border:1px solid var(--edge-soft);
  border-radius:var(--r-m);padding:16px 18px;
  overflow-x:auto;                  /* long lines scroll, the page does not */
  font-family:var(--mono);font-size:13px;line-height:1.6;
}
.wr-prose pre code{background:none;border:0;padding:0;color:#CFC8E4;font-size:inherit}

.wr-prose img{
  max-width:100%;height:auto;display:block;
  border-radius:var(--r-m);border:1px solid var(--edge-soft);
}
.wr-prose figure{margin:1.8em 0}
.wr-prose figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--dimmer);margin-top:9px;text-align:center;
}
.wr-prose hr{border:0;height:1px;background:var(--edge-soft);margin:2.4em 0}

.wr-prose table{
  width:100%;border-collapse:collapse;font-family:var(--disp);
  font-size:14px;display:block;overflow-x:auto;
}
.wr-prose th,.wr-prose td{border:1px solid var(--edge-soft);padding:9px 12px;text-align:left}
.wr-prose th{background:var(--near);color:var(--ink);font-weight:600}

/* ---- blocks the editor emits -------------------------------
   The theme dequeues WordPress's default block styles, so these
   class names arrive unstyled and are handled here instead of
   fought. The editor will keep producing them whatever we do. */
.wr-prose .wp-block-image{margin:1.8em 0}
.wr-prose .wp-block-quote{margin:1.6em 0}
.wr-prose .wp-block-image figcaption,
.wr-prose .wp-element-caption{
  font-family:var(--mono);font-size:10.5px;color:var(--dimmer);
  margin-top:9px;text-align:center;
}
.wr-prose .alignwide,.wr-prose .alignfull{
  max-width:min(100%,900px);margin-left:auto;margin-right:auto;
}
.wr-prose .aligncenter{margin-left:auto;margin-right:auto}
.wr-prose .wp-block-embed iframe,
.wr-prose iframe{max-width:100%;border-radius:var(--r-m);border:0}
.wr-prose .wp-block-columns{display:flex;gap:22px;flex-wrap:wrap}
.wr-prose .wp-block-column{flex:1;min-width:220px}

/* ---- the tail of an article -------------------------------- */
.wr-tags{display:flex;flex-wrap:wrap;gap:7px;margin:34px 0 0}
.wr-tags a{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--near);border:1px solid var(--edge-soft);
  color:var(--dim);text-decoration:none;
}
.wr-tags a:hover{color:var(--signal);border-color:var(--signal)}

.wr-pager{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:40px 0 0;padding:22px 0 0;border-top:1px solid var(--edge-soft);
}
.wr-pager a{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;max-width:46%;
}
.wr-pager a:hover{color:var(--signal)}
.wr-pager a b{
  display:block;font-family:var(--disp);font-weight:600;font-size:14px;
  letter-spacing:-.015em;text-transform:none;color:var(--ink);margin-top:6px;
}

/* paging through the archive */
.wr-pages{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:var(--frame) 0 0}
.wr-pages .page-numbers{
  font-family:var(--mono);font-size:11px;
  padding:8px 13px;border-radius:var(--r-s);
  background:var(--mid);border:1px solid var(--edge-soft);
  color:var(--dim);text-decoration:none;
}
.wr-pages .page-numbers:hover{color:var(--ink);background:var(--lift)}
.wr-pages .page-numbers.current{
  background:var(--signal);border-color:var(--signal);color:#170F00;
}

/* nothing published yet, or a search with no hits */
.wr-empty{
  border:1px dashed var(--edge);border-radius:var(--r-inner);
  padding:34px 24px;text-align:center;color:var(--dim);
}
.wr-empty h2{
  font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);margin:0 0 8px;
}

/* ---- what the editor's controls actually do -----------------
   WordPress does not write inline styles for a palette colour, a
   font size or a font family. It writes CLASSES — has-signal-color,
   has-large-font-size, has-display-font-family — and expects the
   theme's stylesheet to say what they mean.

   On the live site there is no WordPress and no theme.json, only
   these flat pages. So without the rules below, every choice in
   the editor's sidebar would appear to work in the editor and then
   silently do nothing once exported. Which is worse than not
   offering the choice at all.

   The names must match the slugs in wp-theme/stackality/theme.json.
   Change one, change the other. */
.wr-prose .has-ink-color{color:var(--ink)}
.wr-prose .has-dim-color{color:var(--dim)}
.wr-prose .has-signal-color{color:var(--signal)}
.wr-prose .has-know-color{color:var(--know)}
.wr-prose .has-good-color{color:var(--good)}
.wr-prose .has-warn-color{color:var(--warn)}

.wr-prose .has-far-background-color{background:var(--far)}
.wr-prose .has-mid-background-color{background:var(--mid)}
.wr-prose .has-near-background-color{background:var(--near)}
.wr-prose .has-signal-background-color{background:var(--signal);color:var(--far)}
.wr-prose .has-know-background-color{background:var(--know);color:var(--far)}

/* A block given a background needs room inside it, or the colour
   sits flush against the text and reads as a mistake. */
.wr-prose .has-background{
  padding:14px 18px;
  border-radius:10px;
}

.wr-prose .has-small-font-size{font-size:15px}
.wr-prose .has-normal-font-size{font-size:17.5px}
.wr-prose .has-large-font-size{font-size:20px;line-height:1.55}

.wr-prose .has-serif-font-family{font-family:var(--serif)}
.wr-prose .has-display-font-family{
  font-family:var(--disp);
  letter-spacing:-.015em;
}
.wr-prose .has-mono-font-family{
  font-family:var(--mono);
  font-size:.92em;
  letter-spacing:-.01em;
}

/* ---- embedded video ----------------------------------------
   A 16:9 box that holds its shape before the iframe loads, so the
   article does not jump when the player arrives. aspect-ratio is
   the modern way; the padding-top fallback underneath it keeps
   older browsers from collapsing the box to nothing. */
.wr-embed{
  position:relative;
  margin:1.9em 0;
  max-width:68ch;
  aspect-ratio:16/9;
  border:1px solid var(--edge-soft);
  border-radius:12px;
  overflow:hidden;
  background:#000;
}
@supports not (aspect-ratio:16/9){
  .wr-embed{height:0;padding-top:56.25%}
}
.wr-embed iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* ---- an Instagram post, linked ------------------------------
   Not the official embed. That one needs a Facebook token to
   render, drags in third-party script and tracking, and breaks
   whenever Meta changes its mind. This is a card that goes there,
   costs one line of HTML, and cannot be broken by anybody else's
   outage. */
.wr-ig{
  display:flex;align-items:center;gap:14px;
  margin:1.9em 0;padding:15px 18px;
  max-width:68ch;
  border:1px solid var(--edge-soft);
  border-radius:12px;
  background:var(--near);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .16s ease, background .16s ease;
}
.wr-ig:hover,.wr-ig:focus{
  border-color:var(--signal);
  background:var(--edge);
  text-decoration:none;
}
.wr-ig svg{
  width:26px;height:26px;flex:0 0 26px;
  fill:currentColor;color:var(--know);
}
.wr-ig:hover svg,.wr-ig:focus svg{color:var(--signal)}
.wr-ig span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wr-ig b{
  font-family:var(--disp);font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:var(--ink);
}
.wr-ig i{
  font-style:normal;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);
}

@media(max-width:640px){
  .wr-prose{font-size:16.5px}
  .wr-embed,.wr-ig{margin-left:0;margin-right:0}
}