/*
Theme Name:   Tech Trend Bytes
Theme URI:    https://techtrendbytes.com/
Author:       Chinmay Namase
Author URI:   https://techtrendbytes.com/about/
Description:  A standalone magazine theme built for Tech Trend Bytes. No parent theme: every template, style and script belongs to this site. Full-width story grid, three appearance modes (light, dark and follow-the-system), automatic contents lists on long articles, reading progress and reading time.
Version:      1.9.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  techtrendbytes
Tags:         blog, news, one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* ============================================================
   1. TOKENS

   Light is the default. Dark is the same set of names with different values, so no rule below
   this block ever needs to know which mode it is in.
   ============================================================ */
:root {
  /* Surfaces, from the page backwards */
  --paper:   #fbfbfe;
  --surface: #f2f2fb;
  --sunken:  #e7e8f7;
  --line:    #e2e2f3;
  --line-2:  #eeeef9;

  /* Text */
  --ink:   #0b0a1a;
  --ink-2: #2e2d45;
  --mute:  #56546f;
  --faint: #66647f;

  /* The palette. Magenta and orange are a pair and run as a gradient through the buttons, the
     chips, the section rules and the line above the footer. The other three carry the chips. */
  --brand:   #d60058;
  --brand-2: #ff8a00;
  --violet:  #7c3aed;
  --cyan:    #00c8f0;
  --lime:    #8bd400;
  --deep:    #1d4ed8;
  --teal:    #0e7490;
  --amber:   #ffc400;

  /* Bright orange is decorative only. White text on it measures 2.4:1, nowhere near readable,
     so anything carrying text uses --brand into --violet instead. The orange belongs on the
     colour wash, the section rules, the footer line and the card hairline, where nothing sits
     on top of it. */

  --on-brand:  #ffffff;
  --on-bright: #10130a;   /* text on the cyan, lime and amber chips, too light for white */
  --danger:    #c62828;   /* form validation and required markers */

  /* The wash behind the page, the faint grid over it, and the translucent surfaces.
     These are written out as plain rgba rather than mixed from the palette with color-mix().
     color-mix() needs Safari 16.2 or Chrome 111, and when a browser does not understand it the
     whole declaration is thrown away — which meant the wash simply did not exist on older
     phones. rgba has worked everywhere for fifteen years. */
  --bloom-1: rgba(214,   0,  88, .20);
  --bloom-2: rgba(255, 138,   0, .17);
  --bloom-3: rgba(124,  58, 237, .11);
  --bloom-4: rgba(  0, 200, 240, .11);
  --grid:    rgba( 11,  10,  26, .05);

  --card-bg: rgba(251, 251, 254, .86);
  --hd-bg:   rgba(251, 251, 254, .88);
  --rail-bg: rgba(242, 242, 251, .72);
  --ft-bg:   rgba(242, 242, 251, .80);

  --lead-1:  rgba(214,   0,  88, .14);
  --lead-2:  rgba(255, 138,   0, .11);
  --lead-3:  rgba(124,  58, 237, .08);
  --lead-br: rgba(214,   0,  88, .28);

  /* Shape and depth */
  --r:    10px;
  --r-sm: 6px;
  --shadow:    0 1px 2px rgba(13, 13, 26, .05), 0 8px 24px -12px rgba(13, 13, 26, .14);
  --shadow-lg: 0 2px 4px rgba(13, 13, 26, .05), 0 22px 50px -24px rgba(13, 13, 26, .26);

  /* Type */
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rhythm */
  --wrap: 1280px;
  --gut:  clamp(16px, 4vw, 40px);
}

:root[data-theme="dark"] {
  --paper:   #0b0711;
  --surface: #15101f;
  --sunken:  #1d1729;
  --line:    #2e2442;
  --line-2:  #221a31;

  --ink:   #f8f2f7;
  --ink-2: #d8cee0;
  --mute:  #a597b4;
  --faint: #8d7da1;

  --brand:   #ff5c8a;
  --brand-2: #ffa23d;
  --violet:  #a78bfa;
  --cyan:    #4ddbff;
  --lime:    #b6f000;
  --deep:    #4f7dff;
  --teal:    #2aa8bf;
  --amber:   #ffd24d;

  --on-brand:  #07060f;
  --on-bright: #06101a;
  --danger:    #ff8a8a;   /* lifted for legibility on the dark page */

  /* The wash carries further in the dark: there is no white to fight it. */
  --bloom-1: rgba(255,  92, 138, .34);
  --bloom-2: rgba(255, 162,  61, .28);
  --bloom-3: rgba(167, 139, 250, .20);
  --bloom-4: rgba( 77, 219, 255, .18);
  --grid:    rgba(255, 255, 255, .045);

  --card-bg: rgba( 11,   7,  17, .74);
  --hd-bg:   rgba( 11,   7,  17, .88);
  --rail-bg: rgba( 21,  16,  31, .72);
  --ft-bg:   rgba( 21,  16,  31, .80);

  --lead-1:  rgba(255,  92, 138, .16);
  --lead-2:  rgba(255, 162,  61, .12);
  --lead-3:  rgba(167, 139, 250, .10);
  --lead-br: rgba(255,  92, 138, .30);

  --shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .8);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 22px 50px -24px rgba(0, 0, 0, .9);
}

/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* While the old theme was still in place, something on the site printed a <style> block inside
   the page body setting `body { font-family: Arial; padding: 20px; text-align: center }`, which
   centred every paragraph. It came from a leftover HTML block belonging to the old theme and is
   gone now. A <style> in the body lands after this stylesheet, so a plain `body` rule would lose
   to anything like it. `html body` out-ranks it without needing !important, and costs nothing. */
html body {
  font-family: var(--body);
  text-align: start;
  padding: 0;
}

/* The page sits on a soft wash of the brand colours rather than flat white or flat black.
   Both layers are fixed, so they stay put while the page scrolls and never move with content.
   They are painted behind everything and take no clicks. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Four slow colour blooms. */
body::before {
  z-index: -2;
  background:
    radial-gradient(62vw 48vw at 10% -10%, var(--bloom-1), transparent 62%),
    radial-gradient(58vw 44vw at 92%  2%,  var(--bloom-2), transparent 64%),
    radial-gradient(50vw 42vw at 74% 52%,  var(--bloom-3), transparent 64%),
    radial-gradient(54vw 46vw at  4% 88%,  var(--bloom-4), transparent 62%);
}

/* A faint grid over the blooms, faded out before it reaches the bottom so it never competes
   with the text. */
body::after {
  z-index: -1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(88% 62% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(88% 62% at 50% 0%, #000 30%, transparent 100%);
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
svg { display: block; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-2); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--brand);
  color: var(--on-brand);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip:focus { left: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

/* ============================================================
   3. BUTTONS AND CHIPS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  background: linear-gradient(118deg, var(--brand), var(--violet));
  color: var(--on-brand);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border: 1px solid var(--brand);
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { color: var(--on-brand); filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn--ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--line);
}
.btn--ghost:hover { background: transparent; }
.btn--ghost:hover { border-color: var(--brand); filter: none; }

.chip {
  display: inline-block;
  align-self: flex-start;   /* .card-body is a flex column; without this the chip stretches */
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--on-brand);
  background: var(--brand);
  margin-bottom: 10px;
}
.chip:hover { color: var(--on-brand); filter: brightness(1.12); }
.chip--1 { background: linear-gradient(118deg, var(--brand),   var(--violet)); }
.chip--2 { background: linear-gradient(118deg, var(--brand-2), var(--amber)); }
.chip--3 { background: linear-gradient(118deg, var(--cyan),    var(--lime)); }
.chip--4 { background: linear-gradient(118deg, var(--deep),    var(--teal)); }

/* Chips 2 and 3 run across orange, amber, cyan and lime. White on those measures between 2.4
   and 3.4 to 1, so they take dark text; both ends then clear 7:1. Chips 1 and 4 are dark
   enough for white at both ends. Every end of every gradient was measured, not eyeballed. */
.chip--2, .chip--3 { color: var(--on-bright); }
.chip--2:hover, .chip--3:hover { color: var(--on-bright); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface); border-color: var(--line); }

/* ============================================================
   4. HEADER

   A slim sticky bar, then a rail of the site's real categories. The rail is what fills the
   width: it is the fastest route into the rest of the site from any page.
   ============================================================ */
.hd {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hd-bg);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.hd.is-stuck { box-shadow: var(--shadow); }

.hd-in {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-img { height: 38px; width: auto; }
.brand-name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.nav { margin-left: auto; }
.nav-list,
.nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a,
.nav ul a {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--r-sm);
}
.nav-list a:hover,
.nav ul a:hover { color: var(--brand); background: var(--surface); }
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--brand); }

.nav ul ul {
  display: none;
  position: absolute;
  flex-direction: column;
  align-items: stretch;
  min-width: 210px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.nav li { position: relative; }
.nav li:hover > ul,
.nav li:focus-within > ul { display: flex; }

.hd-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.hd-burger { display: none; }
.burger-lines { display: block; width: 18px; }
.burger-lines i {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  margin: 3px 0;
  transition: transform .18s ease, opacity .18s ease;
}

/* The appearance button shows one icon for the mode it is currently in. */
.appearance { width: auto; padding: 0 10px; }
.appearance .ic-sun,
.appearance .ic-moon,
.appearance .ic-auto { display: none; }
.appearance[data-mode="light"]  .ic-sun  { display: block; }
.appearance[data-mode="dark"]   .ic-moon { display: block; }
.appearance[data-mode="system"] .ic-auto { display: block; }
.appearance-text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Category rail */
.rail {
  border-top: 1px solid var(--line-2);
  background: var(--surface);
  background: var(--rail-bg);
}
.rail-in { display: flex; align-items: center; gap: 14px; }
.rail-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  flex-shrink: 0;
}
.rail-list {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail-list::-webkit-scrollbar { display: none; }
.rail-list a {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  padding: 9px 11px;
  border-bottom: 2px solid transparent;
}
.rail-list a b {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--faint);
}
.rail-list a:hover { color: var(--ink); }
.rail-list .is-on a { color: var(--brand); border-bottom-color: var(--brand); }

/* Search panel */
.search-panel {
  border-top: 1px solid var(--line-2);
  background: var(--paper);
  padding: 18px 0;
}
.searchform { display: flex; gap: 8px; }
.searchform-input {
  flex: 1;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  min-width: 0;
}
.searchform-input::placeholder { color: var(--faint); }

/* Reading progress */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
}
.progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ============================================================
   5. THE MAIN COLUMN

   There is no sidebar. An empty rail beside the content reads as a mistake, and anything put
   there to plug it is furniture nobody asked for, so the content has the full width and the
   story list runs three across.
   ============================================================ */
.site-main { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 96px); }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: clamp(32px, 5vw, 56px) 0 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--brand);
  /* A rule that starts in the brand colour and fades out across the page. The `1` slices the
     gradient without scaling it; only the bottom edge shows because the other three are 0. */
  border-image: linear-gradient(90deg, var(--brand), var(--brand-2) 38%, transparent 88%) 1;
}
.sec-head h1,
.sec-head h2 {
  font-size: clamp(19px, 2.4vw, 24px);
  margin: 0;
  letter-spacing: -.01em;
}
.sec-head::after {
  content: "";
  flex: 1;
  height: 2px;
}

.page-head { margin-bottom: clamp(20px, 3vw, 32px); }
.page-head h1 { font-size: clamp(28px, 5vw, 44px); margin-bottom: 10px; }
.page-head-dek { color: var(--mute); font-size: 18px; max-width: 70ch; }
.page-head-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.page-head-form { max-width: 560px; margin-top: 18px; }

.crumbs {
  font-size: 13.5px;
  color: var(--mute);
  margin-bottom: 18px;
}
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ============================================================
   6. LEAD STORY
   ============================================================ */
.lead {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(18px, 2.5vw, 28px);
  background: var(--surface);
  /* The tint is a translucent gradient laid over the page colour, so no colour arithmetic is
     needed and a browser that cannot parse one still gets the solid surface above. */
  background-color: var(--paper);
  background-image: linear-gradient(134deg, var(--lead-1), var(--lead-2) 55%, var(--lead-3));
  border: 1px solid var(--lead-br);
  border-radius: var(--r);
}
.lead-media {
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 16 / 9;
  background: var(--sunken);
}
.lead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.lead:hover .lead-media img { transform: scale(1.03); }

.lead-title {
  font-size: clamp(26px, 3.4vw, 40px);
  margin-bottom: 12px;
}
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { color: var(--brand); }
.lead-dek {
  color: var(--mute);
  font-size: 17px;
  margin-bottom: 16px;
}
.lead .btn { margin-top: 16px; }

/* ============================================================
   7. STORY GRID
   ============================================================ */
.grid {
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* The homepage runs two large stories on the first row and three on every row after it, so the
   page has a rhythm instead of being one flat wall of identical tiles. Six columns divide by
   both two and three, which is what makes the two row widths line up. */
@media (min-width: 992px) {
  .grid--feature { grid-template-columns: repeat(6, 1fr); }
  .grid--feature > .card { grid-column: span 2; }
  .grid--feature > .card:nth-child(-n + 2) { grid-column: span 3; }
  .grid--feature > .card:nth-child(-n + 2) .card-title { font-size: 23px; }
  .grid--feature > .card:nth-child(-n + 2) .card-dek { font-size: 15.5px; }
  .grid--feature > .card:nth-child(-n + 2) .card-body { padding: 20px 22px 22px; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  /* Not quite opaque, so the wash behind the page tints the card instead of being blocked by
     a wall of white. The blur keeps the text sitting on an even base. */
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

/* A hairline of the brand gradient that lights up along the top edge on hover. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity: 0;
  transition: opacity .18s ease;
}
.card:hover::before,
.card:focus-within::before { opacity: 1; }

.card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--sunken);
  overflow: hidden;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-media-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--sunken), var(--surface));
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}
.card-title {
  font-size: 18.5px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--brand); }
.card-dek {
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.card .meta { margin-top: auto; }

/* ============================================================
   8. META LINE
   ============================================================ */
.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--faint);
}
.meta-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}
.meta-author:hover { color: var(--brand); }
.meta-avatar { border-radius: 50%; width: 26px; height: 26px; }
.meta-read {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.meta > :not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line);
  margin-right: 14px;
  vertical-align: middle;
}

/* ============================================================
   9. THE ARTICLE

   The body is one narrow column because a 1200px line of text cannot be read. The hero image
   and anything marked "wide" are allowed out of it.
   ============================================================ */
.post-head { max-width: 820px; margin-inline: auto; text-align: center; }
.post-head .chip { margin-inline: auto; }
.post-title { font-size: clamp(29px, 4.4vw, 50px); margin-bottom: 14px; }
.post-dek {
  font-size: 19px;
  color: var(--mute);
  margin-bottom: 18px;
}
.post-head .meta { justify-content: center; }

.post-hero {
  margin: clamp(22px, 3vw, 36px) auto;
  max-width: 1100px;
  padding-inline: var(--gut);
}
.post-hero img {
  width: 100%;
  border-radius: var(--r);
  background: var(--sunken);
}
.post-hero figcaption {
  font-size: 13px;
  color: var(--faint);
  text-align: center;
  margin-top: 10px;
}

.prose {
  max-width: 760px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-2);
}
.prose > * { margin-bottom: 1.15em; }
.prose h2 {
  font-size: clamp(22px, 2.8vw, 30px);
  margin-top: 1.7em;
  padding-top: .35em;
  scroll-margin-top: 110px;
}
.prose h3 { font-size: clamp(19px, 2.2vw, 23px); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose img { border-radius: var(--r-sm); }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: 13.5px; color: var(--faint); text-align: center; margin-top: 8px; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  font-family: var(--display);
}
.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
.prose pre {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px;
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
}
.prose th { background: var(--surface); font-family: var(--display); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

.prose .alignwide,
.prose .alignfull {
  max-width: 1040px;
  margin-inline: auto;
  width: auto;
}
.prose .alignleft  { float: left;  margin: .3em 1.4em .8em 0; }
.prose .alignright { float: right; margin: .3em 0 .8em 1.4em; }
.prose .aligncenter { margin-inline: auto; display: block; }

/* Contents list */
.toc {
  max-width: 760px;
  margin: 0 auto 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  padding: 4px 18px 6px;
}
.toc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 12px 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.toc-btn svg { transition: transform .2s ease; }
.toc-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
.toc-list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 15.5px;
}
.toc-list li { margin-bottom: 6px; }
.toc-list a { color: var(--ink-2); text-decoration: none; }
.toc-list a:hover { color: var(--brand); text-decoration: underline; }

/* Tags */
.tags {
  max-width: 760px;
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.tags a {
  display: inline-block;
  font-size: 13px;
  color: var(--mute);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 12px;
  margin: 0 6px 6px 0;
}
.tags a:hover { color: var(--brand); border-color: var(--brand); }

/* Author box */
.authorbox {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 22px;
  max-width: 860px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: clamp(20px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.authorbox-img { border-radius: var(--r-sm); width: 112px; height: 112px; }
.authorbox-name { font-size: 22px; margin-bottom: 8px; }
.authorbox p { color: var(--mute); font-size: 15.5px; margin-bottom: 14px; }

/* ============================================================
   10. PAGINATION
   ============================================================ */
/* WordPress renders this as <nav class="navigation pagination">. Comment paging uses
   `comments-pagination`, so both are matched. */
.pagination,
.comments-pagination { margin-top: clamp(32px, 4vw, 48px); }

.pagination .nav-links,
.comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pagination .page-numbers,
.comments-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.pagination .page-numbers:hover,
.comments-pagination .page-numbers:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}

/* The page you are on: the brand gradient, so it reads at a glance. */
.pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
  background: var(--brand);
  background: linear-gradient(118deg, var(--brand), var(--violet));
  border-color: transparent;
  color: var(--on-brand);
  transform: none;
}

/* The ellipsis is not a control, so it gets no box and no hover. */
.pagination .dots,
.comments-pagination .dots {
  border-color: transparent;
  background: none;
  min-width: auto;
  padding: 0 4px;
  color: var(--faint);
}
.pagination .dots:hover,
.comments-pagination .dots:hover { transform: none; color: var(--faint); border-color: transparent; }

/* Previous / Next carry words rather than numbers, so they get room to breathe. */
.pagination .prev,
.pagination .next,
.comments-pagination .prev,
.comments-pagination .next {
  padding: 0 18px;
  font-weight: 700;
  color: var(--brand);
}

@media (max-width: 520px) {
  .pagination .page-numbers,
  .comments-pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 10px; font-size: 14px; }
  .pagination .prev, .pagination .next { padding: 0 13px; }
}

/* ============================================================
   11. COMMENTS
   ============================================================ */
.comments { max-width: 760px; margin: clamp(40px, 6vw, 64px) auto 0; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol.children { list-style: none; padding-left: 22px; }
.comment-body {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 15.5px;
}
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-meta { font-size: 12.5px; color: var(--faint); margin-bottom: 8px; }
.comment-meta a { color: var(--faint); text-decoration: none; }
.comment-reply-link { font-size: 13px; font-weight: 600; }
.comments-closed { color: var(--faint); font-size: 14.5px; }

.comment-form { display: grid; gap: 12px; margin-top: 26px; }
.comment-form label { font-size: 13.5px; font-weight: 600; color: var(--mute); display: block; margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 13px;
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .form-submit { margin: 0; }

/* ============================================================
   12. EMPTY STATE
   ============================================================ */
.empty {
  max-width: 620px;
  margin: clamp(40px, 8vw, 90px) auto;
  text-align: center;
}
.empty h2 { font-size: clamp(24px, 3.4vw, 34px); }
.empty p { color: var(--mute); margin-bottom: 20px; }

/* ============================================================
   13. SOCIAL LINKS
   ============================================================ */
.social { display: flex; align-items: center; gap: 2px; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--mute);
  border-radius: var(--r-sm);
}
.social-link:hover { color: var(--brand); background: var(--surface); }

/* ============================================================
   14. FOOTER
   ============================================================ */
.ft {
  background: var(--surface);
  background: var(--ft-bg);
  border-top: 3px solid var(--brand);
  border-image: linear-gradient(90deg, var(--brand), var(--brand-2) 45%, var(--violet)) 1;
  padding-top: clamp(36px, 5vw, 60px);
  font-size: 15px;
}
.ft-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 44px);
}
.ft-h {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
.ft-col p { color: var(--mute); font-size: 14.5px; }
.ft-list, .ft-col ul { list-style: none; margin: 0; padding: 0; }
.ft-list li, .ft-col li { margin-bottom: 9px; }
.ft-list a, .ft-col li a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
}
.ft-list a:hover, .ft-col li a:hover { color: var(--brand); }

.ft-base {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--faint);
}
.ft-base .social { margin-right: auto; }
.ft-top { color: var(--mute); text-decoration: none; font-weight: 600; }
.ft-top:hover { color: var(--brand); }

/* ============================================================
   14b. FORMS (WPForms)

   The contact form ships with its own light palette baked in: white fields, near-black labels.
   On the dark theme that left the labels invisible and the fields glowing white.

   WPForms exposes its own custom properties, so rather than fighting its selectors we simply
   point them at this theme's tokens. Because those tokens already flip with `data-theme`, the
   form follows light and dark automatically with no duplicated rules.
   ============================================================ */
.wpforms-container {
  --wpforms-field-background-color: var(--surface);
  --wpforms-field-border-color:     var(--line);
  --wpforms-field-text-color:       var(--ink);
  --wpforms-label-color:            var(--ink);
  --wpforms-label-sublabel-color:   var(--mute);
  --wpforms-label-error-color:      var(--danger);
  --wpforms-button-background-color: var(--brand);
  --wpforms-button-text-color:      var(--on-brand);
  --wpforms-field-border-radius:    var(--r-sm);
  --wpforms-button-border-radius:   var(--r-sm);
  --wpforms-field-size-medium-height: 46px;
}

/* The same values applied directly, for the classic (non-modern) render mode, which ignores
   the custom properties above. */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-size: 16px;   /* 16px stops iOS zooming the page when a field is focused */
  padding: 11px 14px;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: var(--faint); opacity: 1; }

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}

.wpforms-container .wpforms-field-label {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}
.wpforms-container .wpforms-field-sublabel { color: var(--mute); }
.wpforms-container .wpforms-required-label { color: var(--danger); }

/* The submit button matches the buttons everywhere else on the site. */
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
  background: var(--brand);
  background: linear-gradient(118deg, var(--brand), var(--violet));
  color: var(--on-brand);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* Validation messages need to be legible on the dark page too. */
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error { color: var(--danger); }
.wpforms-container .wpforms-confirmation-container-full {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}

/* ============================================================
   15. NARROWER SCREENS
   ============================================================ */
@media (max-width: 1080px) {
  .lead { grid-template-columns: 1fr; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-col--about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }

  .hd-burger { display: inline-flex; order: -1; }
  .brand { margin-right: auto; }
  .brand-name { display: none; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 10px var(--gut) 16px;
    margin: 0;
  }
  .nav-open .nav { display: block; }
  .nav-list, .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list a, .nav ul a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    font-size: 16px;
  }
  .nav ul ul {
    position: static;
    display: flex;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 14px;
    background: none;
  }

  .appearance-text { display: none; }
  .appearance { width: 40px; padding: 0; }
  .social--hd { display: none; }

  .grid { grid-template-columns: 1fr; gap: 16px; }

  .card { flex-direction: row; align-items: stretch; }
  .card-media { flex: 0 0 132px; aspect-ratio: 1 / 1; }
  .card-body { padding: 12px 14px; }
  .card-title { font-size: 16px; }
  .card-dek { display: none; }

  .lead { padding: 14px; }
  .lead-title { font-size: clamp(22px, 6.4vw, 30px); }
  .lead .btn { width: 100%; justify-content: center; }

  .post-head { text-align: left; }
  .post-head .chip { margin-inline: 0; }
  .post-head .meta { justify-content: flex-start; }
  .post-hero { padding-inline: 0; }
  .post-hero img { border-radius: 0; }

  .prose { font-size: 17px; }

  .authorbox { grid-template-columns: 1fr; gap: 14px; }
  .authorbox-img { width: 84px; height: 84px; }

  .ft-cols { grid-template-columns: 1fr; }
  .ft-base .social { margin-right: 0; width: 100%; }
}

@media (max-width: 420px) {
  .card-media { flex-basis: 108px; }
}

/* Phones keep the colour, and lose only the part that costs something.
   `backdrop-filter` is the expensive one: it re-blurs whatever is behind every card on every
   frame, which is what turns into stuttery scrolling. Plain alpha transparency is free, so the
   cards stay see-through and the wash still comes through them. The grid stays too.
   A phone screen is mostly card, so the wash has far less room to show than on a laptop —
   hence the stronger blooms and the slightly more transparent cards here. */
@media (max-width: 860px) {
  :root {
    --bloom-1: rgba(214,   0,  88, .34);
    --bloom-2: rgba(255, 138,   0, .29);
    --bloom-3: rgba(124,  58, 237, .20);
    --bloom-4: rgba(  0, 200, 240, .18);
    --card-bg: rgba(251, 251, 254, .82);
  }

  :root[data-theme="dark"] {
    --bloom-1: rgba(255,  92, 138, .48);
    --bloom-2: rgba(255, 162,  61, .40);
    --bloom-3: rgba(167, 139, 250, .30);
    --bloom-4: rgba( 77, 219, 255, .26);
    --card-bg: rgba( 11,   7,  17, .76);
  }

  .card {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  /* There is no hover on a touch screen, so the gradient hairline that a mouse reveals is
     simply always on. Every card gets the brand colours instead of none of them ever. */
  .card::before { opacity: 1; }

  /* Wider grid squares so the pattern still reads at phone width instead of turning to mush. */
  body::after { background-size: 52px 52px; }

  /* The blooms have to be re-sized for a phone, and this is the whole reason the colour was
     invisible there. Their radii are given in vw, which is fine on a wide screen: 48vw of a
     1440px laptop is 691px of bloom against an 800px-tall window, so it fills it. On a 375px
     phone the same rule gives 180px of bloom against an 812px-tall screen — a sliver at the top
     of a very tall page, which reads as nothing at all.
     A phone is narrow and tall, so the vertical radius is measured against the height instead
     of the width. */
  body::before {
    background:
      radial-gradient(150vw 52vh at  6% -6%, var(--bloom-1), transparent 66%),
      radial-gradient(140vw 44vh at 96% 14%, var(--bloom-2), transparent 68%),
      radial-gradient(130vw 46vh at 82% 58%, var(--bloom-3), transparent 68%),
      radial-gradient(145vw 50vh at -4% 94%, var(--bloom-4), transparent 66%);
  }
}

/* Same reasoning for anyone who has asked for less motion or is on a machine that struggles. */
@media (prefers-reduced-transparency: reduce) {
  .card {
    background: var(--paper);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* ============================================================
   16. MOTION AND PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .hd, .ft, .progress, .toc, .authorbox, .related, .comments, .skip { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .prose { max-width: none; }
  a { text-decoration: underline; }
}