/*
Theme Name: Suchna
Theme URI: https://example.com/suchna
Author: Sunil Consulting
Description: Fast, reading-first theme for job notification blogs. Rich article typography (tables, lists, callouts, FAQ, link buttons), auto table of contents, job facts panel and "last date" badges. No jQuery, one CSS file, one small JS file.
Version: 1.5.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: suchna
*/

/* Layout: reading column (~68ch) + sticky glass contents rail on desktop; single column on phones.
   Look: frosted glass panels floating over a soft emerald + champagne aurora. */
:root {
  --paper: #edf3f1;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-solid: #ffffff;
  --sunk: rgba(12, 61, 52, 0.05);
  --ink: #0c1f1c;
  --ink-2: #3c514c;
  --ink-3: #6a7e79;
  --rule: rgba(12, 31, 28, 0.1);
  --accent: #0b7a64;
  --accent-2: #12998b;
  --accent-soft: rgba(11, 122, 100, 0.1);
  --gold: #b07f22;
  --marker: rgba(233, 190, 92, 0.55);
  --on-accent: #ffffff;
  --open: #0f7a4a;
  --open-soft: rgba(15, 122, 74, 0.1);
  --closing: #c0361f;
  --closing-soft: rgba(192, 54, 31, 0.09);
  --info-soft: rgba(18, 153, 139, 0.1);
  --warn-soft: rgba(176, 127, 34, 0.12);

  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 14px 34px -20px rgba(10, 45, 38, 0.38);
  --glass-blur: blur(18px) saturate(165%);
  --aurora:
    radial-gradient(55vw 46vw at -8% -12%, rgba(20, 184, 166, 0.38), transparent 62%),
    radial-gradient(46vw 40vw at 108% 0%, rgba(240, 186, 70, 0.4), transparent 60%),
    radial-gradient(40vw 34vw at 40% 55%, rgba(255, 140, 120, 0.12), transparent 65%),
    radial-gradient(55vw 45vw at 60% 112%, rgba(56, 150, 230, 0.24), transparent 62%);
  --c-teal: #0f9b8e; --c-teal-soft: rgba(15, 155, 142, 0.14);
  --c-gold: #b07f22; --c-gold-soft: rgba(240, 186, 70, 0.2);
  --c-blue: #2f6fd0; --c-blue-soft: rgba(47, 111, 208, 0.12);
  --c-rose: #c8475e; --c-rose-soft: rgba(200, 71, 94, 0.12);
  --ring: rgba(15, 155, 142, 0.16);

  --f-display: "Anek Latin", "Mukta", system-ui, sans-serif;
  --f-body: "Mukta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --step-4: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

  --radius: 14px;
  --wrap: 1180px;
  --measure: 70ch;
}
/* Light is the default. Dark mode only when the visitor picks it with the moon button. */
:root[data-theme="dark"] {
  --paper: #050c0b; --surface: rgba(255, 255, 255, 0.055); --surface-solid: #0e1918; --sunk: rgba(255, 255, 255, 0.04);
  --ink: #ecf5f2; --ink-2: #a8bcb6; --ink-3: #7a8f89; --rule: rgba(255, 255, 255, 0.09);
  --accent: #43dbbb; --accent-2: #2bb6cb; --accent-soft: rgba(67, 219, 187, 0.12);
  --gold: #e9c46a; --marker: rgba(233, 196, 106, 0.32); --on-accent: #03201a;
  --open: #4ade9a; --open-soft: rgba(74, 222, 154, 0.12); --closing: #ff8f7a; --closing-soft: rgba(255, 143, 122, 0.12);
  --info-soft: rgba(43, 182, 203, 0.12); --warn-soft: rgba(233, 196, 106, 0.12);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 44px -26px rgba(0, 0, 0, 0.85);
  --aurora:
    radial-gradient(60vw 48vw at -5% -10%, rgba(20, 184, 166, 0.3), transparent 62%),
    radial-gradient(48vw 42vw at 105% 5%, rgba(233, 196, 106, 0.17), transparent 60%),
    radial-gradient(55vw 45vw at 55% 110%, rgba(43, 140, 203, 0.14), transparent 62%);
  --c-teal: #43dbbb; --c-teal-soft: rgba(67, 219, 187, 0.14);
  --c-gold: #e9c46a; --c-gold-soft: rgba(233, 196, 106, 0.14);
  --c-blue: #7fb0ff; --c-blue-soft: rgba(127, 176, 255, 0.13);
  --c-rose: #ff8fa3; --c-rose-soft: rgba(255, 143, 163, 0.13);
  --ring: rgba(67, 219, 187, 0.13);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.7 var(--f-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 8px 14px; background: var(--surface); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.mark { background: linear-gradient(transparent 52%, var(--marker) 52%, var(--marker) 92%, transparent 92%); padding-inline: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand-seal {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--accent); color: var(--accent);
  font: 700 15px/1 var(--f-display);
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--accent);
}
.brand-name { font: 700 1.35rem/1 var(--f-display); letter-spacing: -0.02em; }
.brand-name small { display: block; font: 500 0.68rem/1.2 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.primary-nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.primary-nav a:hover, .primary-nav .current-menu-item > a { background: var(--sunk); color: var(--ink); }
.header-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--sunk); }
.menu-toggle { display: none; }
.read-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); transition: width 0.1s linear; }

@media (max-width: 900px) {
  .menu-toggle { display: grid; }
  .primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--rule); display: none; margin: 0; }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 14px; }
  .header-actions { margin-left: auto; }
}

/* ---------- home ---------- */
.home-hero { padding-block: 44px 28px; }
.home-hero h1 { font-size: var(--step-4); font-weight: 700; max-width: 18ch; }
.home-hero p { color: var(--ink-2); font-size: var(--step-1); margin: 12px 0 0; max-width: 52ch; }
.search-bar {
  margin-top: 26px; display: flex; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 6px 6px 6px 16px;
  max-width: 640px; box-shadow: 0 8px 24px -16px rgba(20, 27, 58, 0.35);
}
.search-bar input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 10px 0; outline: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px; border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent); font: 600 0.98rem/1.1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink-2); font-size: 0.9rem; text-decoration: none;
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip .count { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.section { padding-block: 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { font-size: var(--step-2); }
.section-head a { font-size: 0.95rem; font-weight: 500; }

.closing-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.closing-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px; display: grid; gap: 10px; text-decoration: none; color: var(--ink);
}
.closing-card:hover { border-color: var(--accent); }
.closing-card h3 { font-size: 1.08rem; font-weight: 600; }
.closing-card .org { font-size: 0.85rem; color: var(--ink-3); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
@media (max-width: 960px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

.post-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.post-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 16px; align-items: center; border-top: 1px solid var(--rule); }
.post-row:first-child { border-top: 0; }
.post-row:hover { background: var(--sunk); }
.org-tile { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font: 700 1rem/1 var(--f-display); color: var(--accent); background: var(--accent-soft); }
.post-row h3 { font-size: 1.06rem; font-weight: 600; line-height: 1.3; }
.post-row h3 a { color: var(--ink); text-decoration: none; }
.post-row h3 a::after { content: ""; position: absolute; inset: 0; }
.post-row { position: relative; }
.post-row .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 0.86rem; color: var(--ink-3); }
@media (max-width: 560px) {
  .post-row { grid-template-columns: 40px minmax(0, 1fr); }
  .post-row .badge { grid-column: 2; justify-self: start; }
}

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  font: 600 0.8rem/1.3 var(--f-body); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.closing-card .badge, .byline .badge { justify-self: start; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-open { color: var(--open); background: var(--open-soft); }
.badge-closing { color: var(--closing); background: var(--closing-soft); }
.badge-neutral { color: var(--ink-2); background: var(--sunk); }

.side-box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; }
.side-box + .side-box { margin-top: 16px; }
.side-box h2 { font-size: 1.05rem; margin-bottom: 10px; }
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li { border-top: 1px dashed var(--rule); }
.side-links li:first-child { border-top: 0; }
.side-links a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.side-links a span { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- single post ---------- */
.post-head { padding-block: 32px 8px; }
.crumbs { font-size: 0.86rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.post-head h1 { font-size: var(--step-4); font-weight: 700; margin-top: 14px; max-width: 22ch; }
.post-head .lede { font-size: var(--step-1); color: var(--ink-2); margin: 14px 0 0; max-width: 60ch; line-height: 1.55; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 18px; font-size: 0.92rem; color: var(--ink-3); }
.byline strong { color: var(--ink); font-weight: 600; }

/* job facts card */
.job-facts {
  margin-top: 26px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); overflow: hidden;
}
@media (max-width: 900px) { .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .job-facts .fact-last { grid-column: 1 / -1; } }
.job-facts > div { padding: 14px 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: -1px -1px 0 0; }
.job-facts dt { font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.job-facts dd { margin: 4px 0 0; font: 600 1.12rem/1.3 var(--f-display); font-variant-numeric: tabular-nums; }
.job-facts .fact-last dd { color: var(--closing); }
.job-facts-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: var(--sunk); }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; padding-block: 28px 40px; }
@media (max-width: 1020px) { .post-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .toc-rail { display: none; } }

.toc-rail { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); font-size: 0.92rem; }
.toc-title { font: 600 0.74rem/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.toc-list a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.toc-list a:hover { color: var(--ink); }
.toc-list a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.toc-list .toc-h3 a { padding-left: 28px; font-size: 0.86rem; }
.toc-share { margin-top: 20px; display: flex; gap: 8px; }

.toc-inline { display: none; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.toc-inline summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: "+"; color: var(--ink-3); font-size: 1.2rem; line-height: 1; }
.toc-inline[open] summary::after { content: "\2212"; }
.toc-inline ol { margin: 0; padding: 0 16px 14px 36px; }
.toc-inline li { padding: 3px 0; }
.toc-inline a { color: var(--ink-2); text-decoration: none; }
@media (max-width: 1020px) { .toc-inline { display: block; } }

/* ---------- article typography ---------- */
.entry { max-width: var(--measure); min-width: 0; }
.entry > * + * { margin-top: 1.15em; }
.entry p { margin-bottom: 0; }
.entry > :first-child { margin-top: 0; }
.entry h2 {
  font-size: var(--step-3); font-weight: 700; margin-top: 2.1em; padding-top: 0.2em;
  display: flex; gap: 12px; align-items: baseline;
}
.entry h2::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: var(--accent);
  transform: translateY(-0.18em) rotate(45deg);
}
.entry h3 { font-size: var(--step-2); font-weight: 600; margin-top: 1.8em; }
.entry h4 { font-size: var(--step-1); font-weight: 600; margin-top: 1.5em; }
.entry h2 + *, .entry h3 + *, .entry h4 + * { margin-top: 0.6em; }
.entry strong { font-weight: 600; color: var(--ink); }
.entry mark { background: linear-gradient(transparent 52%, var(--marker) 52%, var(--marker) 92%, transparent 92%); color: inherit; padding-inline: 2px; }
.entry a { font-weight: 500; }

.entry ul, .entry ol { padding-left: 1.5em; }
.entry li + li { margin-top: 0.4em; }
.entry li::marker { color: var(--accent); font-weight: 600; }
.entry ul li::marker { content: "\25CF  "; font-size: 0.75em; }

/* check list: <ul class="is-style-check"> */
.entry ul.is-style-check, .entry .is-style-check ul { list-style: none; padding-left: 0; }
.entry .is-style-check li { position: relative; padding-left: 34px; }
.entry .is-style-check li::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--open-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311784a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* steps: <ol class="is-style-steps"> (selection process, how to apply) */
.entry ol.is-style-steps, .entry .is-style-steps ol { list-style: none; padding-left: 0; counter-reset: step; }
.entry .is-style-steps li { counter-increment: step; position: relative; padding: 0 0 18px 52px; margin: 0; }
.entry .is-style-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
  font: 700 0.95rem/1 var(--f-display);
}
.entry .is-style-steps li::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 2px; width: 2px; background: var(--rule); }
.entry .is-style-steps li:last-child::after { display: none; }
.entry .is-style-steps li:last-child { padding-bottom: 0; }
.entry .is-style-steps strong { display: block; font-family: var(--f-display); font-size: 1.08rem; }

/* tables (auto-wrapped in .table-scroll by functions.php / theme.js) */
.table-scroll, .entry figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); margin-inline: 0; }
.entry table { width: 100%; border-collapse: collapse; font-size: 0.97rem; font-variant-numeric: tabular-nums; min-width: 460px; }
.entry th, .entry td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.entry thead th { background: var(--sunk); font: 600 0.82rem/1.3 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.entry tbody tr:last-child td { border-bottom: 0; }
.entry tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.entry tfoot td { font-weight: 600; background: var(--sunk); border-top: 1px solid var(--rule); border-bottom: 0; }
.entry td:first-child { font-weight: 500; color: var(--ink); }
.entry table caption { caption-side: bottom; text-align: left; padding: 10px 14px; font-size: 0.85rem; color: var(--ink-3); }
.entry figure.wp-block-table table { border: 0; }
.entry figure.wp-block-table figcaption { padding: 10px 14px; font-size: 0.85rem; color: var(--ink-3); }
/* row flags: <tr class="row-hot"> marks the deadline row */
.entry tr.row-hot td { background: var(--closing-soft); }
.entry tr.row-hot td:first-child { box-shadow: inset 3px 0 0 var(--closing); }

/* callouts: <div class="callout callout-tip|callout-warn|callout-info"><p class="callout-title">..</p>..</div> */
.callout { border-radius: var(--radius); padding: 16px 18px 16px 50px; position: relative; background: var(--info-soft); }
.callout > * + * { margin-top: 0.5em; }
.callout p { margin: 0; }
.callout-title { font: 600 1rem/1.3 var(--f-display); }
.callout::before {
  position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 13px/1 var(--f-display); color: var(--on-accent); background: var(--accent); content: "i";
}
.callout-tip { background: var(--open-soft); }
.callout-tip::before { background: var(--open); content: "\2713"; }
.callout-warn { background: var(--warn-soft); }
.callout-warn::before { background: var(--gold); content: "!"; }
.callout-danger { background: var(--closing-soft); }
.callout-danger::before { background: var(--closing); content: "!"; }

/* same callouts from the block editor (Group block > Styles) */
.entry [class*="is-style-callout-"] { border-radius: var(--radius); padding: 16px 18px 16px 50px; position: relative; background: var(--info-soft); }
.entry [class*="is-style-callout-"] > * + * { margin-top: 0.5em; }
.entry [class*="is-style-callout-"] > :first-child { margin-top: 0; font-weight: 600; }
.entry [class*="is-style-callout-"]::before { position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--f-display); color: var(--on-accent); background: var(--accent); content: "i"; }
.entry .is-style-callout-tip { background: var(--open-soft); }
.entry .is-style-callout-tip::before { background: var(--open); content: "\2713"; }
.entry .is-style-callout-warn { background: var(--warn-soft); }
.entry .is-style-callout-warn::before { background: var(--gold); content: "!"; }
.entry .is-style-callout-danger { background: var(--closing-soft); }
.entry .is-style-callout-danger::before { background: var(--closing); content: "!"; }

/* blockquote = quote from the official notification */
.entry blockquote {
  margin-inline: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ink);
  font-size: 1.08rem; color: var(--ink-2);
}
.entry blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.86rem; color: var(--ink-3); }
.entry blockquote cite::before { content: "\2014  "; }

/* important links: <div class="link-grid"><a class="link-card" href>..</a></div> */
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.entry .link-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.entry .link-card::after { content: "\2192"; color: var(--accent); font-size: 1.2rem; transition: transform 0.15s; }
.entry .link-card:hover { border-color: var(--accent); }
.entry .link-card:hover::after { transform: translateX(3px); }
.entry .link-card small { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.82rem; }
.entry .link-card.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.entry .link-card.is-primary::after, .entry .link-card.is-primary small { color: var(--on-accent); }

/* FAQ: <details class="faq"><summary>Q</summary><p>A</p></details> */
.entry details.faq { border-bottom: 1px solid var(--rule); }
.entry details.faq + details.faq { margin-top: 0; }
.entry details.faq summary { cursor: pointer; list-style: none; padding: 14px 32px 14px 0; position: relative; font: 600 1.08rem/1.4 var(--f-display); }
.entry details.faq summary::-webkit-details-marker { display: none; }
.entry details.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; color: var(--accent); line-height: 1; }
.entry details.faq[open] summary::after { content: "\2212"; }
.entry details.faq > :not(summary) { margin: 0 0 16px; color: var(--ink-2); }

.entry hr { border: 0; height: 1px; background: var(--rule); margin-block: 2.2em; }
.entry img, .entry figure img { border-radius: var(--radius); }
.entry figcaption { font-size: 0.86rem; color: var(--ink-3); margin-top: 8px; }
.entry code { font-family: var(--f-mono); font-size: 0.88em; background: var(--sunk); padding: 2px 6px; border-radius: 5px; }
.entry pre { background: var(--sunk); padding: 16px; border-radius: var(--radius); overflow-x: auto; font-size: 0.88rem; }
.entry kbd { font-family: var(--f-mono); font-size: 0.85em; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; }
.entry .wp-block-button__link { display: inline-flex; padding: 11px 18px; border-radius: 10px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; }

/* post footer */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--ink-3); }
.related { border-top: 1px solid var(--rule); padding-block: 32px 48px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

/* archive + pagination */
.archive-head { padding-block: 36px 12px; }
.archive-head h1 { font-size: var(--step-3); }
.archive-head p { color: var(--ink-2); margin: 8px 0 0; max-width: 60ch; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; }
.pagination .current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* footer */
.site-footer { border-top: 1px solid var(--rule); background: var(--surface); padding-block: 36px 28px; margin-top: 24px; color: var(--ink-2); font-size: 0.93rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.footer-grid h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 10px; font-family: var(--f-body); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-grid a { color: var(--ink-2); text-decoration: none; }
.footer-grid a:hover { color: var(--accent); }
.footer-note { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.84rem; color: var(--ink-3); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* search form + comments (minimal) */
.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.comment-list { list-style: none; padding: 0; }
.comment-body { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.comment-form .submit { padding: 11px 18px; border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent); font: 600 0.98rem var(--f-body); cursor: pointer; }

.alignwide { max-width: none; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { font-size: 0.86rem; color: var(--ink-3); }


/* ---------- glass + premium layer ---------- */
body { background: var(--aurora), var(--paper); background-attachment: fixed; }
body::before { background: var(--paper); }
.site-header, .search-bar, .closing-card, .post-list, .side-box, .job-facts, .toc-rail, .toc-inline,
.table-scroll, .entry figure.wp-block-table, .entry .link-card, .site-footer, .chip, .icon-btn, .btn-ghost,
.comment-body, .pagination .page-numbers, .entry details.faq {
  background: var(--surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.site-header { border-width: 0 0 1px; box-shadow: 0 1px 0 var(--rule); }
.site-footer { border-width: 1px 0 0; box-shadow: none; }
.toc-rail { padding: 18px 18px 16px; border-radius: var(--radius); }
.post-list .post-row { border-top-color: var(--rule); }
.post-row:hover, .closing-card:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.closing-card { transition: transform 0.18s ease, border-color 0.18s; }
.closing-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.job-facts { border-radius: 18px; }
.job-facts > div { border-color: var(--rule); }
.job-facts-actions { background: transparent; border-top: 1px solid var(--rule); }

.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 22px -12px var(--accent);
}
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: var(--glass-shadow); }
.entry .link-card.is-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }

.brand-seal {
  border: 0; color: var(--on-accent);
  background: linear-gradient(140deg, var(--accent), var(--accent-2) 60%, var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px -8px var(--accent);
}
.read-progress { background: linear-gradient(90deg, var(--accent), var(--gold)); height: 3px; }
.org-tile { background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--gold) 18%, transparent)); border: 1px solid var(--glass-border); }
.entry h2::before { background: linear-gradient(135deg, var(--gold), var(--accent)); width: 11px; height: 11px; }
.home-hero h1, .post-head h1 { letter-spacing: -0.02em; }

.entry thead th { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.entry .is-style-steps li::before { background: var(--surface-solid); }
.entry details.faq { border-radius: 12px; padding: 0 16px; margin-top: 8px; }
.entry details.faq + details.faq { margin-top: 8px; }
.entry details.faq summary::after { right: 0; }
.callout, .entry [class*="is-style-callout-"] { border: 1px solid var(--glass-border); }
.primary-nav a:hover, .primary-nav .current-menu-item > a { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 900px) { .primary-nav { background: var(--surface-solid); } }

/* ---------- split hero ---------- */
.hero { padding-block: 40px 24px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px; align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border-radius: 99px; font-size: 0.9rem; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--open); box-shadow: 0 0 0 0 var(--open); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--open) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; max-width: 14ch; }
.grad { background: linear-gradient(110deg, var(--accent) 10%, var(--accent-2) 55%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin: 18px 0 0; font-size: 1.12rem; color: var(--ink-2); max-width: 50ch; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; font-size: 0.97rem; color: var(--ink-2); }
.hero-stats span { display: inline-flex; align-items: center; gap: 8px; }
.hero-stats b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-ico, .fc-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-style: normal; }
.ico-teal { color: var(--c-teal); background: var(--c-teal-soft); }
.ico-gold { color: var(--c-gold); background: var(--c-gold-soft); }
.ico-blue { color: var(--c-blue); background: var(--c-blue-soft); }
.ico-rose { color: var(--c-rose); background: var(--c-rose-soft); }

.hero-search { margin-top: 26px; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; max-width: 600px; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), 0 24px 48px -30px color-mix(in srgb, var(--accent) 60%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.hs-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--ink-3); }
.hs-field + .hs-field { border-left: 1px solid var(--rule); }
.hs-field input, .hs-field select { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 12px 0; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.hs-field input { cursor: text; }
.hs-select { flex: 0.8; background: no-repeat right 12px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7e79' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.hero-search .btn { padding: 13px 24px; border-radius: 12px; }
.hero-chips { align-items: center; }
.chips-label { font-size: 0.9rem; color: var(--ink-3); margin-right: 2px; }

.hero-visual { position: relative; min-height: 460px; display: grid; place-items: end center; }
.rings { position: absolute; inset: -10% -20%; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 58%, transparent 0 56px, var(--ring) 57px 58px);
  -webkit-mask: radial-gradient(circle at 50% 58%, #000 25%, transparent 68%); mask: radial-gradient(circle at 50% 58%, #000 25%, transparent 68%); }
.hero-img { position: relative; width: min(100%, 440px); height: auto; filter: drop-shadow(0 30px 40px rgba(10, 45, 38, 0.18)); }
.float-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), 0 18px 30px -18px rgba(10, 45, 38, 0.35); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); animation: float 6s ease-in-out infinite; }
.float-card { background: color-mix(in srgb, var(--surface-solid) 78%, transparent); }
.float-card b { display: block; font: 600 0.95rem/1.2 var(--f-display); color: var(--ink); }
.float-card small { display: block; font-size: 0.8rem; color: var(--ink-3); }
.fc-ico { font: 700 0.9rem/1 var(--f-display); }
.fc-1 { top: 8%; left: 2%; }
.fc-2 { top: 40%; right: -2%; animation-delay: -2s; }
.fc-3 { bottom: 12%; left: -2%; animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.header-cta { padding: 9px 16px; font-size: 0.92rem; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { min-height: 0; max-width: 420px; margin-inline: auto; width: 100%; }
  .header-cta { display: none; }
}
@media (max-width: 560px) {
  .hero-search { flex-wrap: wrap; }
  .hs-field { flex: 1 1 100%; }
  .hs-field + .hs-field { border-left: 0; border-top: 1px solid var(--rule); }
  .hero-search .btn { flex: 1 1 100%; }
  .fc-2 { display: none; } .fc-1, .fc-3 { left: 0; }
}

/* ---------- touches of color ---------- */
.chip-teal { color: var(--c-teal); background: var(--c-teal-soft); }
.chip-gold { color: var(--c-gold); background: var(--c-gold-soft); }
.chip-blue { color: var(--c-blue); background: var(--c-blue-soft); }
.chip-rose { color: var(--c-rose); background: var(--c-rose-soft); }
.post-row:nth-child(4n+1) .org-tile { color: var(--c-teal); background: var(--c-teal-soft); }
.post-row:nth-child(4n+2) .org-tile { color: var(--c-gold); background: var(--c-gold-soft); }
.post-row:nth-child(4n+3) .org-tile { color: var(--c-blue); background: var(--c-blue-soft); }
.post-row:nth-child(4n+4) .org-tile { color: var(--c-rose); background: var(--c-rose-soft); }
.side-box:nth-of-type(1) { background: linear-gradient(160deg, var(--c-teal-soft), transparent 55%), var(--surface); }
.side-box:nth-of-type(2) { background: linear-gradient(160deg, var(--c-gold-soft), transparent 55%), var(--surface); }
.job-facts { background: linear-gradient(120deg, var(--c-teal-soft), transparent 40%, var(--c-gold-soft)), var(--surface); }
.closing-card:nth-child(4n+1) { background: linear-gradient(160deg, var(--c-rose-soft), transparent 60%), var(--surface); }
.closing-card:nth-child(4n+2) { background: linear-gradient(160deg, var(--c-gold-soft), transparent 60%), var(--surface); }
.closing-card:nth-child(4n+3) { background: linear-gradient(160deg, var(--c-teal-soft), transparent 60%), var(--surface); }
.closing-card:nth-child(4n+4) { background: linear-gradient(160deg, var(--c-blue-soft), transparent 60%), var(--surface); }
.section-head h2 { background: linear-gradient(90deg, var(--ink) 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .float-card, .pulse { animation: none; } }

/* ---------- motion (RISE plates + page reveals) ---------- */
.mplate { position: relative; }
.mplate canvas { display: none; width: 100%; height: var(--plate-h, 180px); }
.js .mplate canvas { display: block; }
.js .mplate .mplate-alt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mplate-alt { font-size: 0.95rem; color: var(--ink-2); margin: 0; }
.mplate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mplate-head h2, .mplate-head p { margin: 0; }
.mplate-toggle { display: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--surface); color: var(--ink-2); cursor: pointer; place-items: center; flex-shrink: 0; }
.js .mplate-toggle { display: grid; }
.mplate-toggle::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.mplate.is-playing .mplate-toggle::before { width: 8px; height: 10px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); }
.mplate-toggle:hover { color: var(--accent); }
.countdown-card { margin-top: 14px; padding: 14px 18px 8px; border-radius: 18px; background: linear-gradient(110deg, var(--c-rose-soft), transparent 45%), var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); --plate-h: 150px; }
.countdown-card .mplate-head p { font: 600 0.74rem/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.week-box { --plate-h: 170px; }
.week-box .mplate-head p { font-size: 0.85rem; color: var(--ink-3); }

.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rv.is-in { opacity: 1; transform: none; }

/* hero entrance: plays once on load, from a visible end state */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.hero-copy > :nth-child(2) { animation-delay: 0.09s; }
.hero-copy > :nth-child(3) { animation-delay: 0.13s; }
.hero-copy > :nth-child(4) { animation-delay: 0.17s; }
.hero-copy > :nth-child(5) { animation-delay: 0.21s; }
.hero-copy > :nth-child(6) { animation-delay: 0.25s; }
.hero-img { animation: zoomIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.rings { animation: zoomIn 0.9s ease 0.05s both; }
.float-card { animation: pop 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) both, float 6s ease-in-out 1.2s 3; }
.fc-1 { animation-delay: 0.45s, 1.2s; }
.fc-2 { animation-delay: 0.6s, 2.2s; }
.fc-3 { animation-delay: 0.75s, 3.2s; }
.pulse { animation-iteration-count: 4; }
.post-head > * { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.post-head > :nth-child(2) { animation-delay: 0.05s; }
.post-head > :nth-child(3) { animation-delay: 0.1s; }
.post-head > :nth-child(4) { animation-delay: 0.14s; }
.post-head > :nth-child(5) { animation-delay: 0.18s; }
.post-head > :nth-child(6) { animation-delay: 0.22s; }
.btn { transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.entry .link-card, .chip, .side-links a { transition: transform 0.2s ease, border-color 0.2s, color 0.2s; }
.entry .link-card:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-img, .rings, .float-card, .post-head > *, .pulse { animation: none !important; }
  .rv { opacity: 1; transform: none; }
}
@media print { .rv { opacity: 1 !important; transform: none !important; } .mplate canvas, .mplate-toggle { display: none !important; } .mplate .mplate-alt { position: static !important; width: auto; height: auto; clip: auto; } }

/* ---------- schemes ---------- */
.job-facts .fact-benefit dd { color: var(--open); }
.job-facts .fact-open dd { color: var(--open); }
@media (max-width: 900px) { .job-facts .fact-open { grid-column: 1 / -1; } }
.is-scheme .job-facts { background: linear-gradient(120deg, var(--c-gold-soft), transparent 45%, var(--c-teal-soft)), var(--surface); }
.scheme-strip .closing-card { border-top: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); }
.type-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font: 600 0.74rem/1.4 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-gold); background: var(--c-gold-soft); }
.is-job .type-pill { color: var(--c-teal); background: var(--c-teal-soft); }
 fall back to solid panels so text stays readable. */
/* ---------- hero typer ---------- */
.hero h1.type-h1 { max-width: none; }
.typer { display: block; position: relative; width: max-content; max-width: 100%; white-space: nowrap; min-height: 1.06em; }
.typer-text { transition: opacity 0.3s ease; }
.typer .caret { display: none; width: 0.06em; min-width: 3px; height: 0.82em; margin-left: 0.06em; border-radius: 2px; background: var(--accent); vertical-align: -0.06em; animation: blink 1s steps(1) infinite; }
.typer.is-live .caret { display: inline-block; }
.typer.is-done .caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.typer::after { content: ""; position: absolute; left: -0.04em; right: 0.12em; top: 54%; height: 0.08em; min-height: 3px; border-radius: 99px; background: var(--closing); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.6, 0, 0.2, 1); }
.typer.is-struck::after { transform: scaleX(1); }
.typer.is-struck .typer-text { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .typer .caret { display: none !important; } }

/* No blur support: fall back to solid panels so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface: var(--surface-solid); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .toc-rail, .toc-inline, .site-footer, .share-row, .related { display: none; } body { background: #fff; } }