that duplicates the post title and demotes any other to

@charset "UTF-8";
/* ==========================================================================
   GAZNIL — single post stylesheet
   /wp-content/themes/themify-ultra-child/assets/css/blog.css

   Derived from gaznil.com: highlighter lime, hard green offset shadow,
   slab display, star-rule dividers, marquee-era monospace labels.

   Everything below targets ELEMENT selectors inside .gz-article, so Gutenberg
   blocks, Classic-editor HTML and raw HTML pushed through the REST API all
   render identically. No block class is ever required.

   Sections
     00  Tokens
     01  Themify layout reset
     02  Base
     03  Reading progress
     04  Hero
     05  Reading spread + contents rail
     06  Article typography
     07  Gutenberg block compatibility
     08  After the article
     09  Motion + print
   ========================================================================== */


/* ==========================================================================
   00 · TOKENS
   ========================================================================== */

.gz-single,
.gz-progress {
  /* Surfaces and text — these DO flip with the theme. */
  --paper:      #F7F8F2;   /* off-white with a faint lime cast */
  --paper-2:    #FFFFFF;
  --paper-3:    #EFF1E6;
  --ink:        #141610;   /* body text */
  --ink-soft:   #2A2F24;
  --muted:      #656C5D;   /* olive grey */
  --rule:       #DCE0D0;

  /* Brand constants. */
  --lime:       #E9EDA1;
  --lime-2:     #E7E774;
  --green:      #20AF65;
  --green-deep: #158049;
  --shadow:     #20AF65;   /* the hard offset shadow, always this green */

  /* Brand-black SURFACE. Deliberately separate from --ink and deliberately
     theme-invariant: the title plate, table heads, buttons and avatars stay
     black-with-lime in both themes. Collapsing these two into one token is
     what turns the hero into lime-on-lime in dark mode. */
  --plate:      #141610;
  --plate-fg:   #E9EDA1;
  --plate-edge: #141610;

  --code-bg:    #141610;
  --code-fg:    #E4E8D6;

  --f-display: "Roboto Slab", Rockwell, "Bookman Old Style", Georgia, serif;
  --f-body:    "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  --measure: 68ch;
  --rail: 232px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1280px;
  --wide-bleed: 0px;
  --r: 10px;
}

@media (min-width: 1000px) {
  .gz-single { --wide-bleed: clamp(0px, 5vw, 5rem); }
}

/* NO prefers-color-scheme rule here, deliberately.
   gaznil.com is a light-only site — the Themify header and footer have no
   dark variant. Honouring the OS preference would flip the article dark
   while the header stayed lime, which is worse than not supporting dark at
   all. The dark tokens below stay defined and ready: the day a theme toggle
   is added, have it stamp data-theme="dark" on <html> and it works. */
html[data-theme="dark"] .gz-single,
html[data-theme="dark"] .gz-progress,
body.dark-mode .gz-single,
body.dark-mode .gz-progress {
  --paper:      #0E110B;
  --paper-2:    #161A12;
  --paper-3:    #1D2218;
  --ink:        #F2F4E8;
  --ink-soft:   #D6DAC7;
  --muted:      #8D9482;
  --rule:       #2B3222;
  --green:      #35C77C;
  --green-deep: #6FE0A6;
  --code-bg:    #050704;
  --plate-edge: #343B2A;
}

html[data-theme="light"] .gz-single,
html[data-theme="light"] .gz-progress {
  --paper:      #F7F8F2;
  --paper-2:    #FFFFFF;
  --paper-3:    #EFF1E6;
  --ink:        #141610;
  --ink-soft:   #2A2F24;
  --muted:      #656C5D;
  --rule:       #DCE0D0;
  --green:      #20AF65;
  --green-deep: #158049;
  --code-bg:    #141610;
  --plate-edge: #141610;
}


/* ==========================================================================
   01 · THEMIFY LAYOUT RESET
   The contents rail replaces the sidebar on single posts.
   Cleanest permanent fix is Themify > Settings > Default Layouts >
   Single Post > Sidebar: None. This is the belt-and-braces version.
   ========================================================================== */

body.gz-single-post #layout,
body.gz-single-post .pagewidth {
  max-width: none;
  width: 100%;
}

body.gz-single-post #content {
  width: 100%;
  max-width: none;
  float: none;
  margin-inline: 0;
  padding-inline: 0;
}

body.gz-single-post #sidebar {
  display: none;
}

body.gz-single-post #content > .gz-post {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}


/* ==========================================================================
   02 · BASE
   ========================================================================== */

.gz-single {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  line-height: 1.7;
}

.gz-single *,
.gz-single *::before,
.gz-single *::after { box-sizing: border-box; }

.gz-single ::selection { background: var(--lime); color: var(--plate); }

.gz-single :where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

.gz-single img { max-width: 100%; height: auto; }

/* Shell — the two top-level blocks carry the page gutter. */
.gz-single .gz-hero,
.gz-single .gz-spread {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.gz-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* ==========================================================================
   03 · READING PROGRESS — a highlighter stroke, not a hairline
   ========================================================================== */

.gz-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 7px;
  z-index: 9999;
  pointer-events: none;
}

.gz-progress__ink {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, var(--lime-2) 0%, var(--lime) 55%, var(--lime-2) 100%);
  /* marker tip: a slanted, slightly ragged leading edge */
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 42%, 100% 62%, calc(100% - 5px) 100%, 0 100%);
  transition: width .08s linear;
}


/* ==========================================================================
   04 · HERO
   ========================================================================== */

.gz-single .gz-hero {
  padding-block: clamp(1.75rem, 5vw, 3.25rem) 0;
}

.gz-single .gz-crumbs {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-block-end: 1.5rem;
}
.gz-single .gz-crumbs a { color: var(--muted); text-decoration: none; }
.gz-single .gz-crumbs a:hover { color: var(--green-deep); text-decoration: underline; }
.gz-single .gz-crumbs span[aria-hidden] { color: var(--green); }

.gz-single .gz-cover {
  position: relative;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--plate);
  line-height: 0;
}
.gz-single .gz-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .gz-single .gz-cover img { aspect-ratio: 4 / 3; }
}

/* The title plate — the site's button treatment, scaled to hero size. */
.gz-single .gz-plate {
  position: relative;
  z-index: 2;
  margin-block-start: -2.75rem;
  margin-inline: clamp(0px, 3vw, 2.5rem);
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  border-radius: var(--r);
  box-shadow: 8px 8px 0 0 var(--shadow);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
/* No featured image — the plate stands on its own, no overlap to fake. */
.gz-single .gz-plate--solo {
  margin-block-start: 0;
  margin-inline: 0;
}
@media (max-width: 640px) {
  .gz-single .gz-plate {
    margin-block-start: -1.5rem;
    box-shadow: 5px 5px 0 0 var(--shadow);
  }
}

.gz-single .gz-kicker {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
}
.gz-single .gz-kicker em { font-style: normal; color: var(--plate-fg); opacity: .55; }

.gz-single .gz-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--plate-fg);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.gz-single .gz-dek {
  /* Second tier on the plate: lime pulled toward the plate, never toward
     white — keeps roughly 9:1 contrast without going chalky. */
  color: color-mix(in srgb, var(--plate-fg) 78%, var(--plate));
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.gz-single .gz-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-block-start: 1.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid color-mix(in srgb, var(--plate-fg) 22%, transparent);
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plate-fg) 68%, var(--plate));
}
.gz-single .gz-meta__who {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-transform: none;
  letter-spacing: 0;
}
.gz-single .gz-meta__ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--plate);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .8125rem;
  flex: none;
}
.gz-single .gz-meta__who b {
  color: var(--plate-fg);
  font-weight: 600;
  font-family: var(--f-body);
  font-size: .8125rem;
}
.gz-single .gz-meta time,
.gz-single .gz-meta .gz-rt { font-variant-numeric: tabular-nums; }

.gz-single .gz-onair {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--green);
}
.gz-single .gz-onair::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent);
  animation: gz-pulse 2.4s ease-out infinite;
}
@keyframes gz-pulse {
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}


/* ==========================================================================
   05 · READING SPREAD + CONTENTS RAIL
   ========================================================================== */

.gz-single .gz-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem;
  align-items: start;
}
@media (min-width: 1000px) {
  .gz-single .gz-spread { grid-template-columns: var(--rail) minmax(0, 1fr); }
}

/* Author box / related / comments live outside <article> for a clean heading
   outline, but share the grid so they still align under the article column. */
.gz-single .gz-spread--after { padding-block: 0 3rem; }
@media (min-width: 1000px) {
  .gz-single .gz-spread--after > .gz-after { grid-column: 2; }
}

.gz-single .gz-column { min-width: 0; }

.gz-single .gz-rail { position: static; }
@media (min-width: 1000px) {
  .gz-single .gz-rail { position: sticky; inset-block-start: 90px; }
}

.gz-single .gz-toc__head {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block-end: .75rem;
  margin-block-end: .75rem;
  border-block-end: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gz-single .gz-toc__head b { color: var(--green); font-weight: 400; }

.gz-single .gz-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  counter-reset: none;
}
.gz-single .gz-toc li { margin: 0; padding: 0; }
.gz-single .gz-toc li::before { content: none; }

.gz-single .gz-toc a {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: baseline;
  gap: .35rem;
  text-decoration: none;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.45;
  padding: .45rem .5rem;
  border-radius: 6px;
  position: relative;
  transition: color .18s ease;
}
.gz-single .gz-toc a > .n {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-variant-numeric: tabular-nums;
}
.gz-single .gz-toc a > .t { position: relative; z-index: 1; }
.gz-single .gz-toc a:hover { color: var(--ink); background: none; }

/* The highlighter swipe — same device as the progress bar. */
.gz-single .gz-toc a::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: .35rem;
  inset-inline-start: 2.35rem;
  inset-inline-end: .35rem;
  background: var(--lime);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.gz-single .gz-toc a[aria-current="true"] { font-weight: 600; }
.gz-single .gz-toc a[aria-current="true"]::after { transform: scaleX(1); }
/* The swipe is always lime, so text on it is always plate-black —
   in BOTH themes. No per-theme override needed. */
.gz-single .gz-toc a[aria-current="true"] > .t { color: var(--plate); }
.gz-single .gz-toc a[aria-current="true"] > .n { color: var(--green-deep); }

.gz-single .gz-toc--sub a { padding-inline-start: 1.35rem; font-size: .78125rem; }

/* Mobile contents drawer — glass, collapsed by default. */
.gz-single .gz-toc-m {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--paper-2) 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  overflow: hidden;
  margin-block-end: 2rem;
}
.gz-single .gz-toc-m > summary {
  cursor: pointer;
  list-style: none;
  padding: .9rem 1.1rem;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gz-single .gz-toc-m > summary::-webkit-details-marker { display: none; }
.gz-single .gz-toc-m > summary::after { content: "▾"; color: var(--green); }
.gz-single .gz-toc-m[open] > summary::after { content: "▴"; }
.gz-single .gz-toc-m > div { padding: 0 .75rem .85rem; }

@media (min-width: 1000px) { .gz-single .gz-toc-m { display: none; } }
@media (max-width: 999px) {
  .gz-single .gz-toc-d { display: none; }
  .gz-single .gz-rail { order: 2; }
}

/* Share block. */
.gz-single .gz-share {
  margin-block-start: 2rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
}
.gz-single .gz-share--top { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.gz-single .gz-share__h {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: .75rem;
}
.gz-single .gz-share__row { display: flex; flex-wrap: wrap; gap: .4rem; }
.gz-single .gz-share__row a,
.gz-single .gz-share__row button {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 6px;
  padding: .45rem .6rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  transition: border-color .18s, color .18s;
}
.gz-single .gz-share__row a:hover,
.gz-single .gz-share__row button:hover { border-color: var(--green); color: var(--green-deep); }


/* ==========================================================================
   06 · ARTICLE TYPOGRAPHY
   Element selectors only — Gutenberg, Classic and REST HTML all match.
   ========================================================================== */

.gz-single .gz-article {
  max-width: var(--measure);
  font-size: 1.125rem;
  color: var(--ink-soft);
}
@media (max-width: 640px) { .gz-single .gz-article { font-size: 1.0625rem; } }

.gz-single .gz-article > * + * { margin-block-start: 1.35em; }
.gz-single .gz-article p { margin: 0; color: var(--ink-soft); }

/* Lead paragraph + drop cap. Applied to the first paragraph automatically. */
.gz-single .gz-article > p:first-of-type {
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--ink);
}
.gz-single .gz-article > p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 3.4em;
  line-height: .82;
  float: left;
  margin: .06em .12em 0 0;
  color: var(--green-deep);
}

/* Headings ------------------------------------------------------------- */

/* h1 is included defensively. PHP removes a body <h1> that duplicates the
   post title and demotes any other to <h2>, so one should never reach here —
   but if it does it must be legible, not fall back to the parent theme. */
.gz-single .gz-article h1,
.gz-single .gz-article h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-block: 2.75em 0;
  padding: 0;
  text-wrap: balance;
  scroll-margin-top: 96px;
  position: relative;
}
/* ★ hairline above every H2 — the site's divider motif. */
.gz-single .gz-article h1::before,
.gz-single .gz-article h2::before {
  content: "★";
  display: block;
  font-size: .55rem;
  color: var(--green);
  letter-spacing: .3em;
  margin-block-end: 1.15rem;
  padding-block-start: 1.15rem;
  border-block-start: 1px solid var(--rule);
  font-weight: 400;
}
.gz-single .gz-article h1 + *,
.gz-single .gz-article h2 + * { margin-block-start: .9em; }

.gz-single .gz-article h3 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--ink);
  margin-block: 2em 0;
  text-wrap: balance;
  scroll-margin-top: 96px;
}
.gz-single .gz-article h3 + * { margin-block-start: .6em; }

.gz-single .gz-article h4,
.gz-single .gz-article h5,
.gz-single .gz-article h6 {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-block: 1.75em 0;
}

/* Heading permalink anchor. */
.gz-single .gz-article .gz-anchor {
  margin-inline-start: .5em;
  font-size: .45em;
  color: var(--green);
  text-decoration: none;
  opacity: 0;
  vertical-align: middle;
  transition: opacity .18s ease;
}
.gz-single .gz-article :is(h2, h3):hover .gz-anchor { opacity: .8; }
.gz-single .gz-article .gz-anchor:hover { opacity: 1; background: none; }

/* Links ---------------------------------------------------------------- */

.gz-single .gz-article a:not(.gz-btn):not(.gz-anchor) {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--green) 45%, transparent);
}
/* Lime highlight on hover — the text on it is plate-black in BOTH themes. */
.gz-single .gz-article a:not(.gz-btn):not(.gz-anchor):hover {
  background: var(--lime);
  color: var(--plate);
  text-decoration-color: var(--plate);
}

.gz-single .gz-article strong,
.gz-single .gz-article b { color: var(--ink); font-weight: 700; }

/* Lists ---------------------------------------------------------------- */

.gz-single .gz-article ul,
.gz-single .gz-article ol {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}
.gz-single .gz-article li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin-block-start: .55em;
  color: var(--ink-soft);
}
.gz-single .gz-article ul > li::before {
  content: "★";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .04em;
  color: var(--green);
  font-size: .6rem;
  line-height: 1.9;
}
.gz-single .gz-article ol { counter-reset: gzn; }
.gz-single .gz-article ol > li { counter-increment: gzn; }
.gz-single .gz-article ol > li::before {
  content: counter(gzn, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .12em;
  font-family: var(--f-mono);
  font-size: .6875rem;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
/* Nested lists restart cleanly. */
.gz-single .gz-article li > ul,
.gz-single .gz-article li > ol { margin-block-start: .5em; }
.gz-single .gz-article li > ol { counter-reset: gzn; }

/* Blockquote ----------------------------------------------------------- */

.gz-single .gz-article blockquote {
  margin: 2.25em 0;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: 6px 6px 0 0 var(--shadow);
  font-style: normal;
}
.gz-single .gz-article blockquote p {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.gz-single .gz-article blockquote p + p { margin-block-start: .6em; }
.gz-single .gz-article blockquote cite,
.gz-single .gz-article blockquote .wp-block-quote__citation,
.gz-single .gz-article blockquote footer {
  display: block;
  margin-block-start: 1rem;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.gz-single .gz-article blockquote :is(cite, .wp-block-quote__citation, footer)::before {
  content: "— ";
  color: var(--green);
}

/* Code ----------------------------------------------------------------- */

.gz-single .gz-article .gz-code { margin: 2.25em 0; }

.gz-single .gz-article .gz-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: color-mix(in srgb, var(--code-bg) 88%, #FFFFFF 12%);
  border: 1px solid var(--plate-edge);
  border-block-end: 0;
  border-radius: var(--r) var(--r) 0 0;
  padding: .55rem .85rem;
}
.gz-single .gz-article .gz-code__name {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plate-fg) 72%, var(--plate));
}
.gz-single .gz-article .gz-copy {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--lime);
  color: var(--plate);
  border: 1px solid var(--lime);
  border-radius: 5px;
  padding: .3rem .6rem;
  line-height: 1.4;
  transition: background .18s, color .18s, border-color .18s;
}
.gz-single .gz-article .gz-copy:hover,
.gz-single .gz-article .gz-copy[data-done="1"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--plate);
}

.gz-single .gz-article pre {
  margin: 0;
  overflow-x: auto;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--plate-edge);
  border-radius: 0 0 var(--r) var(--r);
  padding: 1.15rem 1.25rem;
  font-family: var(--f-mono);
  font-size: .8125rem;
  line-height: 1.75;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  tab-size: 2;
}
/* A <pre> the script has not wrapped yet keeps all four corners. */
.gz-single .gz-article > pre { border-radius: var(--r); }

.gz-single .gz-article pre code {
  font: inherit;
  background: none;
  padding: 0;
  border: 0;
  color: inherit;
  white-space: inherit;
}
.gz-single .gz-article :not(pre) > code {
  font-family: var(--f-mono);
  font-size: .84em;
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .12em .38em;
  word-break: break-word;
}

/* Tables --------------------------------------------------------------- */

.gz-single .gz-article .gz-table {
  margin: 2.25em 0;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}
.gz-single .gz-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  min-width: 520px;
  margin: 0;
  border: 0;
}
.gz-single .gz-article thead th {
  text-align: left;
  background: var(--plate);
  color: var(--plate-fg);
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  padding: .8rem 1rem;
  white-space: nowrap;
  border: 0;
}
.gz-single .gz-article tbody td,
.gz-single .gz-article tbody th {
  padding: .8rem 1rem;
  border: 0;
  border-block-start: 1px solid var(--rule);
  color: var(--ink-soft);
  vertical-align: top;
  text-align: left;
}
.gz-single .gz-article tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--paper-3) 55%, transparent);
}
.gz-single .gz-article tbody td:first-child {
  font-family: var(--f-mono);
  font-size: .8125rem;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.gz-single .gz-article table caption {
  caption-side: top;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .75rem 1rem;
  text-align: left;
}

/* Figures and images --------------------------------------------------- */

.gz-single .gz-article figure { margin: 2.5em 0; }
.gz-single .gz-article img {
  border-radius: var(--r);
  display: block;
}
.gz-single .gz-article figcaption {
  margin-block-start: .75rem;
  font-family: var(--f-mono);
  font-size: .6875rem;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: .02em;
  text-align: left;
}
.gz-single .gz-article figcaption::before { content: "★ "; color: var(--green); }

/* Horizontal rule becomes a star rule. */
.gz-single .gz-article hr {
  border: 0;
  height: auto;
  margin: 3em 0;
  text-align: center;
  overflow: visible;
}
.gz-single .gz-article hr::before {
  content: "★ ★ ★";
  display: block;
  font-size: .6rem;
  letter-spacing: .8em;
  color: var(--green);
  text-indent: .8em;
}

/* Callout — any element the author tags .gz-note, plus core's "info" style. */
.gz-single .gz-article .gz-note {
  margin: 2.25em 0;
  padding: 1.15rem 1.35rem;
  background: color-mix(in srgb, var(--lime) 34%, var(--paper));
  border-inline-start: 4px solid var(--green);
  border-radius: 0 var(--r) var(--r) 0;
}
html[data-theme="dark"] .gz-single .gz-article .gz-note,
body.dark-mode .gz-single .gz-article .gz-note {
  background: color-mix(in srgb, var(--green) 12%, var(--paper-2));
}
.gz-single .gz-article .gz-note__h {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-block-end: .5rem;
}
.gz-single .gz-article .gz-note p { margin: 0; font-size: 1rem; color: var(--ink); }

.gz-single .gz-article .post-pagination {
  margin-block-start: 2.5em;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .1em;
}


/* ==========================================================================
   07 · GUTENBERG BLOCK COMPATIBILITY
   Blocks inherit everything above through element selectors. These rules
   only handle the wrappers core adds that plain HTML does not have.
   ========================================================================== */

.gz-single .gz-article .wp-block-image { margin-block: 2.5em; }
.gz-single .gz-article .wp-block-image img { border-radius: var(--r); }

.gz-single .gz-article figure.wp-block-table {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-block: 2.25em;
}
.gz-single .gz-article figure.wp-block-table > table { border: 0; }
.gz-single .gz-article figure.wp-block-table > figcaption {
  padding: .75rem 1rem;
  margin: 0;
  border-block-start: 1px solid var(--rule);
}

.gz-single .gz-article .wp-block-code,
.gz-single .gz-article .wp-block-preformatted { margin-block: 0; }

.gz-single .gz-article .wp-block-pullquote {
  margin: 2.5em 0;
  padding: 0;
  border: 0;
  text-align: left;
}
.gz-single .gz-article .wp-block-pullquote blockquote { margin: 0; }

.gz-single .gz-article .wp-block-separator { /* styled by the hr rules above */ }

.gz-single .gz-article .wp-block-embed { margin-block: 2.5em; }
.gz-single .gz-article .wp-block-embed__wrapper { position: relative; }
.gz-single .gz-article :is(.wp-block-embed, .wp-block-video) iframe,
.gz-single .gz-article :is(.wp-block-embed, .wp-block-video) video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r);
  display: block;
}

.gz-single .gz-article .wp-block-button__link {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--plate);
  color: var(--plate-fg);
  border: 1px solid var(--plate-edge);
  border-radius: var(--r);
  padding: .7rem 1.1rem;
  box-shadow: 5px 5px 0 0 var(--shadow);
  transition: transform .18s, box-shadow .18s;
}
.gz-single .gz-article .wp-block-button__link:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--shadow);
  background: var(--plate);
  color: var(--plate-fg);
}

.gz-single .gz-article .wp-block-group,
.gz-single .gz-article .wp-block-columns { margin-block: 2em; }
.gz-single .gz-article .wp-block-columns { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.gz-single .gz-article .wp-block-column { flex: 1 1 240px; min-width: 0; }

/* Alignments ----------------------------------------------------------- */

.gz-single .gz-article .aligncenter { margin-inline: auto; text-align: center; }
.gz-single .gz-article .aligncenter figcaption { text-align: center; }

.gz-single .gz-article > .alignwide {
  margin-inline: calc(-1 * var(--wide-bleed));
  max-width: calc(100% + 2 * var(--wide-bleed));
  width: auto;
}

.gz-single .gz-article > .alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
  border-radius: 0;
}
.gz-single .gz-article > .alignfull img { border-radius: 0; }

@media (min-width: 760px) {
  .gz-single .gz-article .alignleft {
    float: left;
    margin: .4em 1.75em 1.25em 0;
    max-width: 45%;
  }
  .gz-single .gz-article .alignright {
    float: right;
    margin: .4em 0 1.25em 1.75em;
    max-width: 45%;
  }
}


/* ==========================================================================
   08 · AFTER THE ARTICLE
   ========================================================================== */

.gz-single .gz-after { max-width: var(--measure); }
.gz-single .gz-after > * + * { margin-block-start: 2.5rem; }
.gz-single .gz-after { margin-block-start: 3.5rem; }

.gz-single .gz-sect-h {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding-block-end: .85rem;
  margin: 0 0 1.5rem;
  border-block-end: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gz-single .gz-sect-h b { color: var(--green); font-weight: 400; }

/* Author box ----------------------------------------------------------- */

.gz-single .gz-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
}
@media (max-width: 560px) { .gz-single .gz-author { grid-template-columns: 1fr; } }

.gz-single .gz-author__ava {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--plate);
  color: var(--plate-fg);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 4px 4px 0 0 var(--shadow);
  flex: none;
}
.gz-single .gz-author__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.gz-single .gz-author__name {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .1rem;
}
.gz-single .gz-author__role {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 .7rem;
}
.gz-single .gz-author__bio { margin: 0 0 .9rem; font-size: .9375rem; color: var(--ink-soft); }
.gz-single .gz-author__links { display: flex; gap: 1rem; flex-wrap: wrap; }
.gz-single .gz-author__links a {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.gz-single .gz-author__links a:hover { color: var(--green-deep); text-decoration: underline; }

/* Prev / next ---------------------------------------------------------- */

.gz-single .gz-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .gz-single .gz-nav { grid-template-columns: 1fr; } }

.gz-single .gz-nav a {
  display: block;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.gz-single .gz-nav a:hover {
  border-color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--shadow);
}
.gz-single .gz-nav .dir {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  display: block;
  margin-block-end: .5rem;
}
.gz-single .gz-nav .ttl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  display: block;
}
.gz-single .gz-nav a.is-next { text-align: right; }
.gz-single .gz-nav a.is-next:only-child { grid-column: 2; }

/* Related -------------------------------------------------------------- */

.gz-single .gz-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 860px) { .gz-single .gz-rel { grid-template-columns: 1fr; } }

.gz-single .gz-rel article {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.gz-single .gz-rel article:hover {
  border-color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--shadow);
}
.gz-single .gz-rel .thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent) 0 2px, transparent 2px 8px),
    var(--paper-3);
  border-block-end: 1px solid var(--rule);
  line-height: 0;
}
.gz-single .gz-rel .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.gz-single .gz-rel .body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.gz-single .gz-rel .cat {
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.gz-single .gz-rel h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: .9375rem;
  line-height: 1.35;
  font-weight: 700;
}
.gz-single .gz-rel h3 a { color: var(--ink); text-decoration: none; }
.gz-single .gz-rel h3 a:hover { text-decoration: underline; text-decoration-color: var(--green); }
.gz-single .gz-rel .rt {
  margin-block-start: auto;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Comments ------------------------------------------------------------- */

.gz-single .gz-comments-wrap .commentlist,
.gz-single .gz-comments-wrap ol.commentlist { list-style: none; padding: 0; margin: 0; }

.gz-single .gz-comments-wrap .comment-body {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
  padding: 1.25rem;
  margin-block-end: 1rem;
}
.gz-single .gz-comments-wrap .comment-author cite,
.gz-single .gz-comments-wrap .comment-author b {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
.gz-single .gz-comments-wrap .comment-meta,
.gz-single .gz-comments-wrap .comment-metadata {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gz-single .gz-comments-wrap .comment-reply-link,
.gz-single .gz-comments-wrap .comment-respond .submit,
.gz-single .gz-comments-wrap #submit {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--plate);
  color: var(--plate-fg);
  border: 1px solid var(--plate-edge);
  border-radius: var(--r);
  padding: .7rem 1.1rem;
  box-shadow: 5px 5px 0 0 var(--shadow);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.gz-single .gz-comments-wrap .comment-reply-link:hover,
.gz-single .gz-comments-wrap #submit:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--shadow);
}
.gz-single .gz-comments-wrap .comment-respond .comment-reply-title {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  color: var(--ink);
}
.gz-single .gz-comments-wrap :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: .75rem .9rem;
}
.gz-single .gz-comments-wrap :is(input, textarea):focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}


/* ==========================================================================
   09 · MOTION + PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gz-single *,
  .gz-progress__ink {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .gz-single .gz-nav a:hover,
  .gz-single .gz-rel article:hover,
  .gz-single .gz-article .wp-block-button__link:hover { transform: none; }
}

@media print {
  .gz-progress,
  .gz-single .gz-rail,
  .gz-single .gz-toc-m,
  .gz-single .gz-nav,
  .gz-single .gz-rel,
  .gz-single .gz-comments-wrap,
  .gz-single .gz-copy { display: none !important; }

  .gz-single .gz-spread { display: block; padding: 0; }
  .gz-single .gz-plate {
    background: none;
    box-shadow: none;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .gz-single .gz-title,
  .gz-single .gz-dek,
  .gz-single .gz-meta { color: #000; }
  .gz-single .gz-article { max-width: none; font-size: 11pt; }
  .gz-single .gz-article a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}