/* The Cyber Druid — base styles (v2: cyber-forward) */

:root {
  --color-bg: #0a0d0e;
  --color-bg-alt: #0f1416;
  --color-surface: #121a1c;
  --color-green: #39ff88;
  --color-green-dim: #1f8f52;
  --color-cyan: #4de8ff;
  --color-blue: #4a7dff;
  --color-copper: #c9822a;      /* secondary "root" accent — used sparingly */
  --color-text: #dce8e4;
  --color-text-muted: #7f938d;
  --color-border: #1e2b28;
  --color-border-bright: #2a4640;

  --gradient-brand: linear-gradient(160deg, var(--color-green) 0%, var(--color-cyan) 50%, var(--color-blue) 100%);

  --font-head: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-lore: Georgia, "Iowan Old Style", serif; /* reserved for Grimoire lore blocks only */

  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.65;
  position: relative;
}

/* subtle cyber grid backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(57, 255, 136, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 136, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at top, black, transparent 75%);
}

/* scattered rune / binary texture, echoing the brand mark */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ctext x='8' y='28' font-family='monospace' font-size='13' fill='%2339ff88'%3E01001%3C/text%3E%3Ctext x='150' y='70' font-family='monospace' font-size='15' fill='%234de8ff'%3E%E1%9A%B1%3C/text%3E%3Ctext x='40' y='150' font-family='monospace' font-size='15' fill='%234a7dff'%3E%E1%9A%A0%3C/text%3E%3Ctext x='170' y='210' font-family='monospace' font-size='13' fill='%2339ff88'%3E10110%3C/text%3E%3Ctext x='95' y='195' font-family='monospace' font-size='15' fill='%234de8ff'%3E%E1%9A%B2%3C/text%3E%3C/svg%3E");
  background-size: 240px 240px;
  mask-image: radial-gradient(ellipse at top, black, transparent 70%);
}

header, main, footer { position: relative; z-index: 1; }

h1, h2, h3, .logo, .cta, button {
  font-family: var(--font-head);
  letter-spacing: 0.01em;
}

a {
  color: var(--color-cyan);
  text-decoration: none;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

a:hover {
  color: var(--color-green);
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.5);
}

/* Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--color-border-bright);
  position: sticky;
  top: 0;
  background: rgba(10, 13, 14, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(57, 255, 136, 0.15);
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}

.logo-mark {
  width: 24px;
  height: 24px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(77, 232, 255, 0.5));
}

.logo:hover {
  color: var(--color-green);
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.5);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.main-nav > a,
.nav-dropdown-link {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.35rem;
}

.main-nav > a:hover,
.nav-dropdown-link:hover {
  color: var(--color-green);
}

.main-nav > a.active,
.nav-dropdown-link.active {
  color: var(--color-green);
}

/* Articles nav dropdown — "Articles" (including its caret) is a single
   <a> to the global article index; the pillar submenu is revealed purely
   by CSS :hover/:focus-within on the wrapper, no separate click-to-toggle
   control. This used to be a real link plus a separate caret <button> so
   touch users without hover had an explicit way to pop the submenu open
   without navigating — but a Lighthouse "touch targets" audit flagged the
   two adjacent small controls, and rather than just enlarging both, the
   caret was folded into the link as a decorative aria-hidden <span> so
   there's only one interactive element (Aug 2026). The tradeoff: on a
   touch device wide enough to show the desktop nav (no hover, no
   hamburger), tapping "Articles" now navigates straight there instead of
   popping the submenu first — real mobile widths are unaffected, since
   the submenu is already always expanded inline there regardless (see the
   max-width: 780px block below). */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.nav-dropdown:hover,
.nav-dropdown:focus-within {
  background: rgba(57, 255, 136, 0.08);
}

.nav-dropdown-caret {
  display: inline-block;
  margin-left: 0.2rem;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: 1rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

/* No margin-top above: the menu's box sits flush against .nav-dropdown
   (top: 100%, zero gap) with the visual spacing done via padding-top
   instead. A visibility/opacity gap here would create a dead zone the
   cursor has to cross to get from "Articles" down into the menu, since
   visibility: hidden also removes an element from hover hit-testing —
   moving the mouse straight down would drop out of :hover and the menu
   would vanish before the cursor ever reached it. Using pointer-events
   instead of visibility keeps the (invisible) box hoverable the whole way
   down, so the submenu stays open continuously from "Articles" to the
   links inside it. */

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  color: var(--color-green);
  background: rgba(57, 255, 136, 0.08);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border-bright);
  color: var(--color-text);
  font-size: 1.05rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}

.nav-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nav-search:hover,
.nav-search:focus-visible {
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
  outline: none;
}

.nav-search-icon {
  width: 15px;
  height: 15px;
  display: block;
}

/* Site search overlay */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1.5rem 2rem;
  background: rgba(10, 13, 14, 0.88);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay.visible {
  opacity: 1;
}

.search-panel {
  width: 100%;
  max-width: 600px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-bright);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.search-input-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.search-input:focus {
  outline: none;
}

.search-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.search-close:hover {
  color: var(--color-text);
}

.search-results {
  max-height: 55vh;
  overflow-y: auto;
  padding: 0.4rem 0;
}

.search-hint {
  margin: 0;
  padding: 1.5rem 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.search-result {
  display: block;
  padding: 0.8rem 1.25rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s ease;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover,
.search-result:focus-visible {
  background: rgba(57, 255, 136, 0.06);
  outline: none;
}

.search-result h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--color-green);
  font-family: var(--font-head);
}

.search-result p {
  margin: 0 0 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.search-result-pillar {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--color-cyan);
  text-transform: uppercase;
}

body.search-open {
  overflow: hidden;
}

/* Hero */

.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  text-align: center;
}

.hero-mark-frame {
  position: relative;
  height: calc(min(300px, 60vw) * 548 / 452);
  aspect-ratio: 1 / 1;
  margin: 0 auto 2.5rem;
}

.hero-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  display: block;
  border-radius: 14px;
  filter: drop-shadow(0 0 34px rgba(77, 232, 255, 0.3));
}

.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-cyan);
  opacity: 0.85;
}

.corner-tl { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.corner-tr { top: -10px; right: -10px; border-left: none; border-bottom: none; }
.corner-bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }
.corner-br { bottom: -10px; right: -10px; border-left: none; border-top: none; }

/* Hero mark animation: the diamond's two tips open first (top and bottom
   growing outward at the same instant). The canopy and roots are each
   split into individual segments tagged with their generation (data-depth,
   how many forks from the trunk/crystal), so every segment at a given
   generation grows at once -- branches sprout in waves outward, the same
   technique the fractal-tree tool widget uses, rather than one long line
   crawling through the whole structure in sequence. Leaves and pads each
   bloom in together as one group, right as their lines finish. */
#heroCrystalTopMain, #heroCrystalTopFar,
#heroCrystalBottomMain, #heroCrystalBottomFar {
  transition: stroke-dashoffset 1.2s ease-out;
}

/* Branches have 5 generations (depth 0-4), roots have 6 (depth 0-5) since
   the roots fork one level deeper. Each generation's delay step is set
   equal to that tree's own per-segment duration, so a child segment only
   starts the instant its parent has fully finished growing into it --
   no gap where the next branch appears to float before the line arrives.
   Branch duration (0.42s x 5 steps) and root duration (0.35s x 6 steps)
   are chosen so both trees still land on the same finish time, 3.3s. */
#heroBranches .hm-seg {
  transition: stroke-dashoffset 0.42s linear;
}
#heroBranches .hm-seg[data-depth="0"] { transition-delay: 1.20s; }
#heroBranches .hm-seg[data-depth="1"] { transition-delay: 1.62s; }
#heroBranches .hm-seg[data-depth="2"] { transition-delay: 2.04s; }
#heroBranches .hm-seg[data-depth="3"] { transition-delay: 2.46s; }
#heroBranches .hm-seg[data-depth="4"] { transition-delay: 2.88s; }

#heroRootsPath .hm-seg {
  transition: stroke-dashoffset 0.35s linear;
}
#heroRootsPath .hm-seg[data-depth="0"] { transition-delay: 1.20s; }
#heroRootsPath .hm-seg[data-depth="1"] { transition-delay: 1.55s; }
#heroRootsPath .hm-seg[data-depth="2"] { transition-delay: 1.90s; }
#heroRootsPath .hm-seg[data-depth="3"] { transition-delay: 2.25s; }
#heroRootsPath .hm-seg[data-depth="4"] { transition-delay: 2.60s; }
#heroRootsPath .hm-seg[data-depth="5"] { transition-delay: 2.95s; }

#heroLeaves circle,
#heroPads rect {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.25);
  transition: opacity 0.45s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* branches and roots both finish at 3.3s -- leaves and pads bloom
   together, at the same moment as each other, right after */
#heroLeaves.hm-in circle,
#heroPads.hm-in rect {
  opacity: 1;
  transform: scale(1);
  transition-delay: 3.38s;
}

@media (prefers-reduced-motion: reduce) {
  #heroCrystalTopMain, #heroCrystalTopFar,
  #heroCrystalBottomMain, #heroCrystalBottomFar,
  .hm-seg, #heroLeaves circle, #heroPads rect {
    transition: none !important;
    transform: none !important;
  }
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 1.25rem;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(77, 232, 255, 0.2));
}

.hero-sub {
  max-width: 660px;
  margin: 0 auto 2rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* Small callback line between an h1 and its hero-sub, e.g. confirming
   arrival on the Articles page after clicking the homepage's "Enter the
   Grove" CTA. Not pillar-specific, so kept as its own class rather than
   reusing .pillar-subtitle. */

.hero-kicker {
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cyan);
  margin: 0 0 0.6rem;
}

/* "Back to category" breadcrumb (Aug 2026) — a small link above the <h1>
   on every individual article/foundational page, pointing back at that
   page's own pillar hub (always "../" at this depth). The same class is
   reused a second time after the article ends (see .back-to-category-
   bottom below), matching the "top and bottom of the page" convention. */

.back-to-category {
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 0.9rem;
}

.back-to-category a {
  color: inherit;
  transition: color 0.15s ease;
}

.back-to-category a:hover {
  color: var(--color-green);
}

.back-to-category-bottom {
  max-width: 680px;
  margin: 2rem auto 0;
  padding: 0 2rem;
  text-align: left;
}

.article-meta {
  max-width: 660px;
  margin: 0 auto 1rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-family: var(--font-head);
  letter-spacing: 0.03em;
}

/* Plain-English pillar subtitle — used in hero sections (under the h1) and
   pillar cards (under the h2), a short, direct tag paired with the poetic
   pillar name so a first-time visitor knows what the section actually
   covers without reading the full description. */
.pillar-subtitle {
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cyan);
  margin: 0 0 0.6rem;
}

.hero .pillar-subtitle {
  max-width: 660px;
  margin: 0 auto 0.6rem;
}

/* Related-tool callout — links an article or pinned page to a matching
   standalone tool in the Tools section. Only added where a genuine content
   connection exists (e.g. Sound as a Focus Tool -> the Focus Sound tool),
   never forced onto a page just to have one. */
.tool-callout {
  max-width: 640px;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-bright);
  border-radius: 8px;
}

.tool-callout-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}

.tool-callout-link {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--color-green);
  margin-bottom: 0.4rem;
}

.tool-callout-link:hover {
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.4);
}

.tool-callout-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Related Tools section — appears on a pillar hub's index page, between the
   3 featured articles and the regular article list, linking to the subset
   of standalone tools relevant to that pillar. Doubles as the visual
   divider between "Start Here" and the rest, replacing an earlier blank-
   margin approach. Omitted entirely on hubs with no genuinely relevant
   tool. */
.related-tools-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 2rem 2.5rem;
  text-align: center;
}

.related-tools-section h2 {
  font-size: 1.3rem;
  color: var(--color-green);
  margin-bottom: 1.25rem;
}

.related-tools-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.related-tool-link {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 0.88rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.related-tool-link:hover {
  border-color: var(--color-green-dim);
  color: var(--color-green);
}

.cta {
  display: inline-block;
  border: 1px solid var(--color-green-dim);
  color: var(--color-green);
  padding: 0.65rem 1.4rem;
  border-radius: 4px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.cta:hover {
  background: rgba(77, 232, 255, 0.08);
  box-shadow: 0 0 20px rgba(77, 232, 255, 0.3), 0 0 30px rgba(74, 125, 255, 0.15);
  color: var(--color-green);
  text-shadow: none;
}

/* Pillars */

.pillars {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 2rem 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.pillar-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.75rem;
  color: var(--color-text);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pillar-card:hover {
  border-color: var(--color-cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(57, 255, 136, 0.08), 0 0 24px rgba(74, 125, 255, 0.08);
  color: var(--color-text);
}

.pillar-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.pillar-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 0 5px rgba(77, 232, 255, 0.35));
}

.page-icon {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 1.25rem;
  filter: drop-shadow(0 0 8px rgba(77, 232, 255, 0.4));
}

.pillar-card h2,
.pillar-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-green);
}

.pillar-card:hover h2,
.pillar-card:hover h3 { text-shadow: 0 0 8px rgba(57, 255, 136, 0.4); }

.pillar-card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Higher specificity than ".pillar-card p" above so the subtitle keeps its
   own smaller, cyan, label-style look instead of inheriting the generic
   description-paragraph styling. */
.pillar-card .pillar-subtitle {
  color: var(--color-cyan);
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

/* About teaser */

.about-teaser {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 3.5rem 2rem;
  text-align: center;
}

.about-teaser p {
  max-width: 640px;
  margin: 0 auto 1rem;
  font-size: 1.05rem;
  color: var(--color-text);
}

/* small copper "root" accent — used sparingly as a divider/marker only */
.root-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-copper);
  box-shadow: 0 0 8px rgba(201, 130, 42, 0.6);
  margin: 0 auto 1.25rem;
}

/* Journey section (About page): the 3 growth-stage icons paired with
   the story of how each phase of the path led into the next. */

.journey {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
}

.journey h2 {
  text-align: center;
  font-size: 1.5rem;
  color: var(--color-green);
  margin-bottom: 3rem;
}

.journey-stage {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.journey-stage:last-child {
  margin-bottom: 0;
}

.journey-icon {
  width: 110px;
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 0 10px rgba(77, 232, 255, 0.3));
}

.journey-stage h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--color-cyan);
  margin-bottom: 0.6rem;
}

.journey-stage p {
  color: var(--color-text);
  line-height: 1.75;
  margin: 0;
}

.journey-closing {
  padding: 1.5rem 0 0;
  color: var(--color-text);
  line-height: 1.75;
}

.journey-closing p {
  margin: 0 0 1.25rem;
}

.journey-closing p:last-child {
  margin-bottom: 0;
}

/* Signup */

.signup {
  max-width: 540px;
  margin: 0 auto;
  padding: 5rem 2rem;
  text-align: center;
}

.signup h2 { margin-bottom: 0.5rem; color: var(--color-text); }

.signup p { color: var(--color-text-muted); }

.signup-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.signup-form input {
  flex: 1;
  padding: 0.65rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
}

.signup-form input:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.signup-form button {
  padding: 0.65rem 1.2rem;
  background: var(--color-green);
  border: none;
  border-radius: 4px;
  color: #06110b;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.signup-form button:hover { box-shadow: 0 0 16px rgba(57, 255, 136, 0.4); }

.signup-note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-green);
  min-height: 1.2em;
}

/* Generic content sections (used on inner pages) */

.pillar-card.placeholder {
  border-style: dashed;
}

/* Upcoming articles teaser — planned titles, not yet linked */

.upcoming {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  text-align: center;
}

.upcoming h2 {
  font-size: 1rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}

.upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.upcoming-list li {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  padding: 0.65rem 1rem;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
}

/* Article list — a scalable index for a pillar's guides (built to hold many entries) */

.article-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 5rem;
}

/* On the 3 pillar hubs, the featured-only .article-list is immediately
   followed by .related-tools-section (see below) rather than running all
   the way to the page bottom, so it doesn't need the full 5rem gap. */

.article-list:has(+ .related-tools-section) {
  padding-bottom: 1rem;
}

.article-item {
  display: block;
  position: relative;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  transition: padding-left 0.15s ease;
}

.article-item:first-of-type {
  border-top: 1px solid var(--color-border);
}

/* "Start Here" group label + Featured badge — flags the 3 foundational
   pages within the flat article-list without going back to the old
   pinned-card treatment. Uses :first-of-type above (not :first-child) so
   the top border still lands on the first .article-item even with this
   label as a preceding sibling. */

.article-list-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
  margin: 0 0 0.5rem;
}

/* Both badges anchor to the title line (top: 1.5rem matches .article-item's
   own top padding) rather than centering on the whole row, so they don't
   drift down into a wrapped two-line description below. */

.featured-badge {
  position: absolute;
  top: 1.5rem;
  right: 0;
  padding: 0.15rem 0.55rem;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-cyan);
  border: 1px solid var(--color-cyan);
  border-radius: 999px;
}

/* "New" badge — injected client-side (js/main.js) from each .article-item's
   data-published attribute, right-aligned via absolute positioning so it
   doesn't disturb the existing h2/p stack. Expires naturally once the
   real current date moves past the window, no manual removal needed. */

.new-badge {
  position: absolute;
  top: 1.5rem;
  right: 0;
  padding: 0.2rem 0.6rem;
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-bg);
  background: var(--color-green);
  border-radius: 999px;
}

.article-item:hover {
  padding-left: 0.5rem;
  color: var(--color-text);
}

.article-item h2 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  color: var(--color-green);
}

.article-item:hover h2 { text-shadow: 0 0 8px rgba(57, 255, 136, 0.4); }

.article-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* Global Articles index (Aug 2026, redesigned into a lore-first landing
   page). Each pillar is a large lore card, not a mirrored article list:
   pillar icon + name + subtitle on one row, a growth-stage icon (seed /
   young tree / full tree, the same metaphor each pillar hub's hero-sub
   already states in words) opposite it, a two-paragraph lore writeup below
   that sets that pillar's tone and ties back to the site's overall
   philosophy, then a CTA link out to that pillar's own hub page, where the
   actual article list lives. */

.articles-index-group {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.articles-index-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  padding: 1.75rem 2rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 10px;
}

.articles-index-group:first-of-type .articles-index-head {
  margin-top: 0.5rem;
}

.articles-index-group:last-of-type .articles-index-head {
  margin-bottom: 5rem;
}

/* Left column: title, subtitle, lore text, CTA. Fixed at the same 640px
   the lore text itself is capped at, so it doesn't stretch and eat into
   the icon's space on wide screens; can still shrink on narrow ones. */

.articles-index-content {
  flex: 0 1 640px;
  min-width: 0;
}

.articles-index-head h2 {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
}

.articles-index-head h2 a {
  color: var(--color-green);
  text-decoration: none;
}

.articles-index-head h2 a:hover {
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.4);
}

.articles-index-head .pillar-subtitle {
  margin: 0;
}

/* Right column: takes whatever space is left after the 640px content
   column and centers the large decorative pillar icon within it, so the
   icon balances the gap instead of just hugging the card's right edge.
   Below 900px there's no real gap left to fill, so the 900px breakpoint
   below drops the row layout entirely: the card stacks into a single
   column with a small version of the same icon above the title instead
   of losing the icon altogether. */

.pillar-lore-icon-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.pillar-lore-icon-large {
  width: 140px;
  height: 140px;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(77, 232, 255, 0.35));
  pointer-events: none;
}

@media (max-width: 900px) {
  .articles-index-head {
    position: relative;
    padding-right: 5.5rem;
  }

  .articles-index-content {
    flex: 1 1 auto;
    width: 100%;
  }

  .pillar-lore-icon-wrap {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    flex: none;
  }

  .pillar-lore-icon-large {
    width: 40px;
    height: 40px;
  }
}

.pillar-lore-text {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 640px;
}

.pillar-lore-text p {
  margin: 0;
}

.pillar-lore-text p + p {
  margin-top: 0.9rem;
}

.pillar-lore-cta {
  margin-top: 1.5rem;
}

/* Pillar hub sidebar (Aug 2026). Everything below a pillar hub's hero
   (both article-list sections, related-tools-section, upcoming) now sits
   in a 2-column layout: .pillar-main on the left, .pillar-sidebar on the
   right with a site-wide "Recently Added" widget and a reserved ad slot,
   prep work for the 90-day ad-placement plan. The hero itself stays full
   width above this, outside .pillar-body. */

.pillar-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2.5rem;
  align-items: start;
}

.pillar-main {
  min-width: 0;
}

/* The main column's own sections (article-list, related-tools-section)
   already carry their own max-width/margin/padding for the old full-width
   layout; reset those here so they just fill this narrower column. */

.pillar-main .article-list,
.pillar-main .related-tools-section {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.pillar-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 10px;
  padding: 1.5rem;
}

.sidebar-widget h2 {
  font-size: 1.05rem;
  color: var(--color-green);
  margin: 0 0 1rem;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-list li {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.sidebar-list a {
  display: block;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.sidebar-list a:hover {
  color: var(--color-green);
}

.sidebar-list-meta {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Table of contents widget (Aug 2026) — sits as the first .sidebar-widget
   on individual article/foundational pages (before Recently Added), so
   the current page's own structure gets priority over site-wide
   discovery. JS-built (js/main.js, "Table of contents" block) from that
   page's own .guide-article h2/h3 elements, which get ids assigned at
   build time if they don't already have one. Reuses .sidebar-widget's
   box/heading styling; only .toc-list and its links are new here. */

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toc-list a {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  transition: color 0.15s ease;
}

.toc-list a:hover {
  color: var(--color-green);
}

.toc-list .toc-sub {
  padding-left: 1rem;
  font-size: 0.82rem;
}

/* Reserved ad slot, not a live ad unit. Styled like an obvious wireframe
   placeholder (dashed border, muted label) rather than a real ad, so it
   doesn't contradict disclosure/index.html's "reflects what's actually
   live, not what's planned" promise until a real network is wired in. */

.ad-slot {
  text-align: center;
}

.ad-slot-label {
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 0.9rem;
}

.ad-slot-box {
  border: 1px dashed var(--color-border-bright);
  border-radius: 6px;
  padding: 2.5rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .pillar-body {
    grid-template-columns: 1fr;
  }

  .pillar-sidebar {
    position: static;
  }
}

/* "Keep Reading" (Aug 2026) — sits at the bottom of every individual
   article/foundational page, after </article>. The <section> itself is
   static markup with a data-keep-reading hook; js/main.js fills in the
   3 links client-side from assets/search-index.json, filtered to the
   current pillar and excluding the current page, so it never needs
   manual upkeep when articles are added. */

.keep-reading {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 5rem;
}

.keep-reading h2 {
  font-size: 1.3rem;
  color: var(--color-green);
  margin-bottom: 1.25rem;
}

.keep-reading-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.keep-reading-item {
  display: block;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  transition: border-color 0.15s ease;
}

.keep-reading-item:hover {
  border-color: var(--color-cyan);
  color: var(--color-text);
}

.keep-reading-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--color-green);
}

.keep-reading-item:hover h3 {
  text-shadow: 0 0 8px rgba(57, 255, 136, 0.4);
}

.keep-reading-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* "Next Guide" navigation (Aug 2026) — sits right after </article>, before
   the bottom .back-to-category link and Keep Reading. JS-populated from
   assets/search-index.json's per-article "published" dates (js/main.js,
   "Next Guide" block); ordering matches each pillar hub's own list (the 3
   featured pages first, then newest-published-first), wrapping back to
   the first article after the last one. Matches .guide-article's 680px
   reading width rather than Keep Reading's wider card-grid treatment,
   since it's a single link continuing the same column of text. */

.next-guide {
  max-width: 680px;
  margin: 2rem auto 0;
  padding: 0 2rem;
}

.next-guide-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.next-guide-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 8px;
  color: var(--color-text);
  transition: border-color 0.15s ease;
}

.next-guide-link:hover {
  border-color: var(--color-green-dim);
  color: var(--color-text);
}

.next-guide-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--color-green);
}

.next-guide-arrow {
  color: var(--color-green);
  flex-shrink: 0;
}

/* Box breathing widget */

.breathing-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.breathing-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

/* Guide article prose (used on guide sub-pages) */

.guide-article {
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 2rem 6rem;
}

.guide-article h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.9rem;
  scroll-margin-top: 100px;
}

.guide-article h3 {
  font-size: 1.05rem;
  color: var(--color-cyan);
  margin: 2rem 0 0.6rem;
  scroll-margin-top: 100px;
}

.guide-article p {
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.guide-article code {
  font-family: var(--font-head);
  font-size: 0.85em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  color: var(--color-cyan);
}

/* Read-aloud bar — injected by main.js above any .guide-article via the
   browser's built-in Web Speech API. No audio files, no backend. */

.read-aloud-bar {
  max-width: 680px;
  margin: 0 auto 1.5rem;
  padding: 0.8rem 1.1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
}

.read-aloud-btn,
.read-aloud-stop {
  padding: 0.45rem 1.1rem;
  background: transparent;
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.read-aloud-btn {
  color: var(--color-text);
}

.read-aloud-btn:hover {
  color: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.25);
}

.read-aloud-stop {
  padding: 0.45rem 0.8rem;
  color: var(--color-text-muted);
  border-color: var(--color-border);
  display: none;
}

.read-aloud-stop:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}

.read-aloud-status {
  font-family: var(--font-head);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  margin-left: auto;
}

.read-aloud-voice {
  padding: 0.4rem 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  max-width: 160px;
}

.read-aloud-voice:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.guide-article .tts-reading {
  border-left: 2px solid var(--color-cyan);
  padding-left: 0.9rem;
  margin-left: -0.9rem;
}

.breathing-circle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.breathing-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--color-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px rgba(77, 232, 255, 0.25);
  animation: boxBreathe 16s ease-in-out infinite;
}

.breathing-circle span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}

.breathing-caption {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

@keyframes boxBreathe {
  0%   { transform: scale(0.62); border-color: var(--color-cyan); }
  25%  { transform: scale(1);    border-color: var(--color-green); }
  50%  { transform: scale(1);    border-color: var(--color-green); }
  75%  { transform: scale(0.62); border-color: var(--color-blue); }
  100% { transform: scale(0.62); border-color: var(--color-blue); }
}

.reset-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.reset-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.reset-showcase p {
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.reset-showcase .reset-tagline {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .breathing-circle { animation: none; }
  .bb-circle, .bb-preview-circle { animation: none; }
}

/* Desk stone finder widget */

.stone-finder-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.stone-finder-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.stone-finder-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.stone-finder {
  max-width: 640px;
  margin: 0 auto;
}

.stone-finder-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.stone-chip {
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.stone-chip:hover {
  color: var(--color-text);
  border-color: var(--color-cyan);
}

.stone-chip.active {
  color: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.25);
}

.stone-finder-result {
  min-height: 90px;
  padding: 1.25rem 1.5rem;
}

.stone-finder-placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.stone-finder-result h3 {
  margin: 0 0 0.4rem;
  color: var(--color-green);
  font-size: 1.05rem;
}

.stone-finder-result p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.92rem;
}

/* Spellcraft transmutation chamber */

.spell-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.spell-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.spell-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.spell-lab {
  max-width: 640px;
  margin: 0 auto;
}

.spell-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 6px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 1rem;
}

.spell-textarea:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.spell-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.spell-chip {
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.spell-chip:hover {
  color: var(--color-text);
  border-color: var(--color-cyan);
}

.spell-chip.active {
  color: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.25);
}

.spell-output {
  min-height: 70px;
  padding: 1.25rem 1.5rem;
}

.spell-placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.spell-output h3 {
  margin: 0 0 0.4rem;
  color: var(--color-green);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spell-output p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
  font-family: var(--font-head);
  word-break: break-word;
}

/* Automation ledger widget (Scripting) */

.automate-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.automate-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.automate-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.automate-lab {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.automate-field {
  margin-bottom: 1rem;
}

.automate-field label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.automate-field input,
.automate-field select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.automate-field input:focus,
.automate-field select:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.automate-button {
  display: block;
  width: 100%;
  padding: 0.75rem 1.2rem;
  background: var(--color-green);
  border: none;
  border-radius: 4px;
  color: #06110b;
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  margin-top: 0.5rem;
}

.automate-button:hover { box-shadow: 0 0 16px rgba(57, 255, 136, 0.4); }

.automate-output {
  margin-top: 1.5rem;
  min-height: 70px;
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.automate-placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.automate-output h3 {
  margin: 0 0 0.4rem;
  color: var(--color-green);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.automate-output p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* Page weight budget widget (Web Dev) */

.budget-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.budget-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.budget-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.budget-lab {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.budget-field {
  margin-bottom: 1rem;
}

.budget-field label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.budget-field input,
.budget-field select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.budget-field input:focus,
.budget-field select:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.budget-button {
  display: block;
  width: 100%;
  padding: 0.75rem 1.2rem;
  background: var(--color-green);
  border: none;
  border-radius: 4px;
  color: #06110b;
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  margin-top: 0.5rem;
}

.budget-button:hover { box-shadow: 0 0 16px rgba(57, 255, 136, 0.4); }

.budget-output {
  margin-top: 1.5rem;
  min-height: 70px;
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.budget-placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.budget-output h3 {
  margin: 0 0 0.4rem;
  color: var(--color-green);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.budget-output p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* Hardening checklist widget (Systems) */

.harden-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.harden-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.harden-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.harden-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.harden-chip {
  padding: 0.5rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.harden-chip:hover {
  color: var(--color-text);
  border-color: var(--color-cyan);
}

.harden-chip.active {
  color: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.25);
}

.harden-result {
  max-width: 560px;
  margin: 0 auto;
  min-height: 90px;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

.harden-placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}

.harden-result h3 {
  margin: 0 0 0.75rem;
  color: var(--color-green);
  font-size: 1.05rem;
  text-align: center;
}

.harden-result ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-text);
}

.harden-result li {
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.harden-result li:last-child {
  margin-bottom: 0;
}

/* Recon mirror widget (Security) */

.recon-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.recon-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.recon-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.recon-picker {
  max-width: 560px;
  margin: 0 auto 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

.recon-chip {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.recon-chip::before {
  content: "\2610  ";
  opacity: 0.6;
}

.recon-chip:hover {
  border-color: var(--color-cyan);
  color: var(--color-text);
}

.recon-chip.active {
  border-color: var(--color-green);
  color: var(--color-text);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.2);
}

.recon-chip.active::before {
  content: "\2611  ";
  opacity: 1;
  color: var(--color-green);
}

.recon-button {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  background: var(--color-green);
  border: none;
  border-radius: 4px;
  color: #06110b;
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.recon-button:hover { box-shadow: 0 0 16px rgba(57, 255, 136, 0.4); }

.recon-result {
  max-width: 560px;
  margin: 1.5rem auto 0;
  min-height: 70px;
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.recon-placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.recon-result h3 {
  margin: 0 0 0.4rem;
  color: var(--color-green);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recon-result p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* Starter stack widget (Home Lab) */

.stack-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.stack-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.stack-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.stack-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.stack-chip {
  padding: 0.5rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.stack-chip:hover {
  color: var(--color-text);
  border-color: var(--color-cyan);
}

.stack-chip.active {
  color: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.25);
}

.stack-result {
  max-width: 560px;
  margin: 0 auto;
  min-height: 90px;
  padding: 1.25rem 1.5rem;
  text-align: left;
}

.stack-placeholder {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}

.stack-result h3 {
  margin: 0 0 0.75rem;
  color: var(--color-green);
  font-size: 1.05rem;
  text-align: center;
}

.stack-result ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-text);
}

.stack-result li {
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.stack-result li:last-child {
  margin-bottom: 0;
}

/* Break timer widget (Tools & Resources) */

.timer-showcase {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align: center;
}

.timer-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.timer-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.timer-lab {
  max-width: 420px;
  margin: 0 auto;
}

.timer-settings {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.timer-field {
  flex: 1;
  text-align: left;
}

.timer-field label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timer-field input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.timer-field input:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.timer-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 8px;
}

.timer-phase {
  font-family: var(--font-head);
  font-size: 0.8rem;
  color: var(--color-cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.timer-clock {
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-green);
  text-shadow: 0 0 14px rgba(57, 255, 136, 0.3);
}

.timer-cycles {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.timer-controls {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.timer-button {
  padding: 0.7rem 1.6rem;
  background: var(--color-green);
  border: none;
  border-radius: 4px;
  color: #06110b;
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.timer-button:hover { box-shadow: 0 0 16px rgba(57, 255, 136, 0.4); }

.timer-button-secondary {
  background: none;
  border: 1px solid var(--color-border-bright);
  color: var(--color-text-muted);
}

.timer-button-secondary:hover {
  box-shadow: none;
  border-color: var(--color-cyan);
  color: var(--color-text);
}

/* Mini break-timer preview (Tools hub card) */

.timer-preview-mini {
  margin: 0.85rem 0;
  padding: 0.85rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-align: center;
}

.timer-preview-phase {
  display: block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  color: var(--color-cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.timer-preview-clock {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-green);
}

/* Focus sound generator widget (Tools & Resources) */

.sound-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.sound-chip {
  padding: 0.5rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sound-chip:hover {
  color: var(--color-text);
  border-color: var(--color-cyan);
}

.sound-chip.active {
  color: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.25);
}

.sound-volume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.sound-volume label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sound-volume input[type="range"] {
  width: 160px;
  accent-color: var(--color-green);
}

/* Mini sound preview (Tools hub card) */

.sound-preview-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sound-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.sound-dot-green { background: var(--color-green); box-shadow: 0 0 6px rgba(57, 255, 136, 0.5); }
.sound-dot-cyan { background: var(--color-cyan); box-shadow: 0 0 6px rgba(77, 232, 255, 0.5); }
.sound-dot-blue { background: var(--color-blue); box-shadow: 0 0 6px rgba(74, 125, 255, 0.5); }

.sound-preview-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Box breathing tool widget (Tools & Resources) */

.bb-circle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.bb-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid var(--color-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 26px rgba(77, 232, 255, 0.25);
  animation: boxBreathe 16s ease-in-out infinite;
  animation-play-state: paused;
}

.bb-circle span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}

/* Mini box-breathing preview (Tools hub card) */

.bb-preview-mini {
  margin: 0.85rem 0;
  display: flex;
  justify-content: center;
}

.bb-preview-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-cyan);
  box-shadow: 0 0 14px rgba(77, 232, 255, 0.25);
  animation: boxBreathe 16s ease-in-out infinite;
}

/* Password strength checker widget (Tools & Resources) */

.pw-field {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.pw-field input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.pw-field input:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.pw-toggle {
  padding: 0.6rem 1rem;
  background: none;
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pw-toggle:hover {
  border-color: var(--color-cyan);
  color: var(--color-text);
}

.pw-meter {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.pw-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--color-border-bright);
  transition: width 0.2s ease, background 0.2s ease;
}

.pw-meter-label {
  font-family: var(--font-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.pw-feedback {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.pw-feedback li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.pw-feedback li.pass {
  color: var(--color-text);
}

.pw-feedback .pw-mark {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--color-border-bright);
}

.pw-feedback li.pass .pw-mark {
  color: var(--color-green);
}

/* Mini password-checker preview (Tools hub card) */

.pw-preview-mini {
  margin: 0.85rem 0;
  padding: 0.85rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.pw-preview-mini .pw-meter {
  margin-bottom: 0.4rem;
}

.pw-preview-mini .pw-meter-fill {
  width: 78%;
  background: var(--color-green);
}

.pw-preview-mini .pw-meter-label {
  margin-bottom: 0;
  font-size: 0.72rem;
}

/* Subnet / CIDR Calculator (Tools & Resources) */

.cidr-field {
  margin-bottom: 1rem;
}

.cidr-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 1rem;
  text-align: center;
}

.cidr-input:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.cidr-error {
  min-height: 1.2rem;
  margin: 0 0 1rem;
  color: var(--color-copper);
  font-size: 0.85rem;
}

.cidr-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  text-align: left;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}

.cidr-results.visible {
  opacity: 1;
}

.cidr-result-item {
  padding: 0.75rem 0.9rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.cidr-result-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.cidr-result-value {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--color-green);
  word-break: break-all;
}

/* Mini CIDR-calculator preview (Tools hub card) */

.cidr-preview-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.85rem 0;
  padding: 0.85rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.82rem;
}

.cidr-preview-cidr {
  color: var(--color-text);
}

.cidr-preview-arrow {
  color: var(--color-text-muted);
}

.cidr-preview-hosts {
  color: var(--color-green);
}

/* Regex tester widget */

.regex-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.regex-slash {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

.regex-input {
  flex: 1;
  min-width: 180px;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 1rem;
}

.regex-input:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.regex-flags {
  display: flex;
  gap: 0.75rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.regex-flags label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.regex-error {
  min-height: 1.2rem;
  margin: 0 0 0.75rem;
  color: var(--color-copper);
  font-size: 0.85rem;
}

.regex-textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-head);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.regex-textarea:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.regex-output-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.regex-match-count {
  color: var(--color-green);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}

.regex-highlight {
  padding: 0.75rem 0.9rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 1rem;
  min-height: 2.4rem;
}

.regex-mark {
  background: rgba(57, 255, 136, 0.25);
  color: var(--color-green);
  border-radius: 3px;
  padding: 0 0.1em;
}

.regex-matches {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.regex-match-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.85rem;
}

.regex-match-index {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.regex-match-value {
  color: var(--color-green);
  word-break: break-all;
}

.regex-match-groups {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

/* Mini regex-tester preview (Tools hub card) */

.regex-preview-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.85rem 0;
  padding: 0.85rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.82rem;
}

.regex-preview-pattern {
  color: var(--color-text);
}

.regex-preview-arrow {
  color: var(--color-text-muted);
}

.regex-preview-match {
  color: var(--color-green);
  background: rgba(57, 255, 136, 0.15);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* Chmod / permissions calculator widget */

.chmod-octal-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.chmod-octal-label {
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.chmod-octal-input {
  width: 6rem;
  padding: 0.6rem 0.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-green);
  font-family: var(--font-head);
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 0.15em;
}

.chmod-octal-input:focus {
  outline: none;
  border-color: var(--color-green-dim);
  box-shadow: 0 0 0 3px rgba(57, 255, 136, 0.1);
}

.chmod-error {
  min-height: 1.2rem;
  margin: 0 0 0.75rem;
  color: var(--color-copper);
  font-size: 0.85rem;
}

.chmod-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.chmod-grid-row {
  display: grid;
  grid-template-columns: 4.5rem repeat(3, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.chmod-grid-head {
  background: transparent;
  border: none;
  padding: 0 0.75rem;
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: center;
}

.chmod-grid-head span:first-child {
  text-align: left;
}

.chmod-row-label {
  font-family: var(--font-head);
  font-size: 0.85rem;
  color: var(--color-text);
}

.chmod-grid-row label {
  display: flex;
  justify-content: center;
}

.chmod-grid-row input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--color-green);
  cursor: pointer;
}

.chmod-special {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.chmod-special label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.chmod-special input[type="checkbox"] {
  accent-color: var(--color-green);
  cursor: pointer;
}

.chmod-output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.chmod-output-item {
  padding: 0.75rem 0.9rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.chmod-output-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.chmod-output-value {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--color-green);
  word-break: break-all;
}

/* Mini chmod-calculator preview (Tools hub card) */

.chmod-preview-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.85rem 0;
  padding: 0.85rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.82rem;
}

.chmod-preview-octal {
  color: var(--color-text);
}

.chmod-preview-arrow {
  color: var(--color-text-muted);
}

.chmod-preview-symbolic {
  color: var(--color-green);
}

/* Fractal tree widget (Tools & Resources) */

.ft-canvas-wrap {
  width: 100%;
  margin-bottom: 1.5rem;
}

.ft-svg {
  display: block;
  width: 100%;
  height: 260px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

@keyframes ft-sway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

.ft-sway {
  animation: ft-sway 6s ease-in-out infinite;
}

/* Mini fractal-tree preview (Tools hub card) */

.ft-preview-mini {
  margin: 0.85rem 0;
  display: flex;
  justify-content: center;
}

.ft-preview-mini svg {
  width: 64px;
  height: 48px;
}

/* Copyable source code block (Break Timer page) */

.code-showcase {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 2rem 5rem;
  text-align: center;
}

.code-showcase h2 {
  font-size: 1.4rem;
  color: var(--color-green);
  margin-bottom: 0.7rem;
}

.code-intro {
  max-width: 560px;
  margin: 0 auto 1.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.code-block-wrap {
  position: relative;
  text-align: left;
}

.code-copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.4rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: var(--font-head);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.code-copy-btn:hover {
  border-color: var(--color-cyan);
  color: var(--color-text);
}

.code-copy-btn.copied {
  border-color: var(--color-green);
  color: var(--color-green);
}

.code-block {
  margin: 0;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
}

.code-block code {
  font-family: var(--font-head);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text);
  white-space: pre;
}

/* Syntax highlighting tokens (Prism.js) — mapped to the site's own palette */

.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.doctype,
.code-block .token.cdata {
  color: var(--color-text-muted);
  font-style: italic;
}

.code-block .token.punctuation {
  color: var(--color-text-muted);
}

.code-block .token.tag,
.code-block .token.tag .token.punctuation,
.code-block .token.selector,
.code-block .token.keyword {
  color: var(--color-blue);
}

.code-block .token.attr-name,
.code-block .token.property,
.code-block .token.function {
  color: var(--color-cyan);
}

.code-block .token.attr-value,
.code-block .token.string {
  color: var(--color-green);
}

.code-block .token.number,
.code-block .token.boolean,
.code-block .token.unit {
  color: var(--color-copper);
}

.code-block .token.operator,
.code-block .token.entity,
.code-block .token.url {
  color: var(--color-text);
}

.code-block .token.important,
.code-block .token.bold {
  font-weight: 700;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--color-border-bright);
  padding: 3rem 2rem 1.5rem;
  background: var(--color-bg-alt);
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}

.footer-brand .logo { display: flex; margin-bottom: 0.4rem; }

.footer-tagline {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.footer-col h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.footer-col a {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}

.footer-col a:hover { color: var(--color-green); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* Responsive */

@media (max-width: 780px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-block; }

  .main-nav.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--color-border-bright);
    gap: 0.9rem;
  }

  /* On mobile the whole nav is already tucked behind the hamburger toggle,
     so there's no need for a second nested toggle on top of that: the
     caret is hidden and the pillar submenu is always shown, indented,
     directly under the Articles link. */
  .nav-dropdown {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .nav-dropdown-caret { display: none; }

  .nav-dropdown-menu {
    position: static;
    padding: 0 0 0 1rem;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    gap: 0.7rem;
  }

  .nav-dropdown-menu a { padding: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .signup-form { flex-direction: column; }
  .cidr-results { grid-template-columns: 1fr; }
  .chmod-output { grid-template-columns: 1fr; }
  .chmod-grid-row { grid-template-columns: 3.5rem repeat(3, 1fr); padding: 0.5rem; }

  .journey-stage {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }
}