/*
Theme Name: Candor
Theme URI: https://example.com/candor
Author: Candor
Author URI: https://example.com
Description: A warm, editorial WordPress theme for the Candor constructive-rating platform. Pairs with the Candor Reviews plugin, which provides the rating form, triage engine, operator dashboard and GDPR tooling. Paper neutrals, a single moss accent, Fraunces + Inter Tight typography.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: candor
Tags: blog, custom-logo, custom-menu, featured-images, full-width-template, editor-style
*/

    /* ============================================================
       DESIGN TOKENS
       Warm paper neutrals + tuned off-black + one moss accent.
       ============================================================ */
    :root {
      /* Color: warm neutrals */
      --paper:        #f5f0e6;       /* page bg */
      --paper-2:      #ece5d6;       /* surface raised */
      --paper-3:      #e0d8c4;       /* dividers, subtle fills */
      --ink:          #1a1814;       /* primary text, near-black warm */
      --ink-2:        #3a352d;       /* secondary text */
      --ink-3:        #6e6759;       /* muted text */
      --ink-4:        #a39a86;       /* faint */
      --rule:         #d9d0bb;       /* hairlines */

      /* Single accent — moss green, not SaaS purple */
      --accent:       #4f6b3f;
      --accent-deep:  #3a5230;
      --accent-soft:  #d8dfc7;

      /* Semantic */
      --positive:     #5b7d3a;
      --warning:      #b8761f;
      --critical:     #a83e2a;
      --critical-soft:#f1d9d2;

      /* Dark band tokens (the insights dashboard band) */
      --dark:         #161512;
      --dark-2:       #211f1a;
      --dark-3:       #2c2922;
      --dark-rule:    #3a362c;
      --dark-ink:     #efe9db;
      --dark-ink-2:   #b8b09c;
      --dark-ink-3:   #837c6c;

      /* Type */
      --serif: 'Fraunces', ui-serif, Georgia, serif;
      --sans:  'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
      --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

      /* Motion — Emil's curves */
      --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
      --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

      /* Layout */
      --shell-max: 1280px;
      --gutter: clamp(20px, 4vw, 56px);
      --radius-sm: 6px;
      --radius:    10px;
      --radius-lg: 18px;
    }

    /* ============================================================
       RESET / BASE
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    body {
      margin: 0;
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.5;
      color: var(--ink);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: 'ss01', 'cv11';
      overflow-x: hidden;
    }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
    input, textarea, select { font: inherit; color: inherit; }
    a { color: inherit; text-decoration: none; }
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 4px;
    }
    ::selection { background: var(--accent); color: var(--paper); }

    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

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

    /* Skip link */
    .skip {
      position: absolute; left: 12px; top: -100px;
      background: var(--ink); color: var(--paper);
      padding: 10px 14px; border-radius: var(--radius-sm);
      font-weight: 500; z-index: 1000;
      transition: top 180ms var(--ease-out);
    }
    .skip:focus { top: 12px; }

    /* ============================================================
       NAV
       ============================================================ */
    .nav {
      position: sticky; top: 0; z-index: 50;
      background: color-mix(in oklab, var(--paper) 88%, transparent);
      backdrop-filter: saturate(140%) blur(14px);
      -webkit-backdrop-filter: saturate(140%) blur(14px);
      border-bottom: 1px solid transparent;
      transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
    }
    .nav.scrolled { border-bottom-color: var(--rule); }
    .nav-inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 24px;
      height: 64px;
    }
    .brand {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }
    .brand-mark {
      width: 28px; height: 28px;
      background: var(--ink); color: var(--paper);
      display: grid; place-items: center;
      border-radius: 7px;
      font-family: var(--serif);
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -0.04em;
    }
    .nav-links {
      display: flex; justify-content: center; gap: 28px;
      list-style: none; margin: 0; padding: 0;
      font-size: 14px;
      color: var(--ink-2);
    }
    .nav-links a {
      position: relative;
      padding: 6px 2px;
      transition: color 160ms var(--ease-out);
    }
    .nav-links a::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 1px; background: var(--ink);
      transform: scaleX(0); transform-origin: left;
      transition: transform 200ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .nav-links a:hover { color: var(--ink); }
      .nav-links a:hover::after { transform: scaleX(1); }
    }
    .nav-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 16px;
      background: var(--ink); color: var(--paper);
      border-radius: 999px;
      font-size: 14px; font-weight: 500;
      transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
    }
    .nav-cta:active { transform: scale(0.97); }
    @media (hover: hover) and (pointer: fine) {
      .nav-cta:hover { background: var(--accent-deep); }
    }
    @media (max-width: 720px) {
      .nav-links { display: none; }
      .nav-inner { grid-template-columns: auto 1fr auto; }
    }

    /* ============================================================
       HERO — cinematic, off-center, editorial
       ============================================================ */
    .hero {
      position: relative;
      min-height: 100dvh;
      padding-top: 56px;
      padding-bottom: 80px;
      overflow: hidden;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: clamp(32px, 5vw, 72px);
      align-items: center;
    }
    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; gap: 40px; }
      .hero { min-height: auto; padding-top: 40px; }
    }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--ink-3);
      font-weight: 500;
      margin-bottom: 28px;
    }
    .eyebrow-dot {
      width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
      box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
      animation: breathe 2.4s ease-in-out infinite;
    }
    @keyframes breathe {
      50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 0%, transparent); }
    }

    .h-display {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 7vw, 88px);
      line-height: 0.98;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: 0 0 28px;
      max-width: 14ch;
    }
    .h-display em {
      font-style: italic;
      font-weight: 300;
      color: var(--accent-deep);
    }
    .h-display .underline {
      position: relative;
      display: inline-block;
    }
    .h-display .underline::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: 0.06em;
      height: 0.12em;
      background: var(--accent);
      opacity: 0.35;
      z-index: -1;
    }
    .hero-lede {
      font-size: clamp(16px, 1.4vw, 19px);
      line-height: 1.55;
      color: var(--ink-2);
      max-width: 52ch;
      margin: 0 0 36px;
    }
    .hero-ctas {
      display: flex; flex-wrap: wrap; gap: 12px;
      align-items: center;
    }

    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 10px;
      height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      font-size: 15px; font-weight: 500;
      letter-spacing: -0.005em;
      cursor: pointer;
      transition: transform 160ms var(--ease-out),
                  background 180ms var(--ease-out),
                  color 180ms var(--ease-out),
                  border-color 180ms var(--ease-out);
      white-space: nowrap;
    }
    .btn:active { transform: scale(0.97); }
    .btn-primary {
      background: var(--ink); color: var(--paper);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn-primary:hover { background: var(--accent-deep); }
    }
    .btn-ghost {
      background: transparent; color: var(--ink);
      border: 1px solid var(--rule);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }
    }
    .btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }

    .btn .arrow {
      transition: transform 200ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn:hover .arrow { transform: translateX(3px); }
    }

    /* Hero visual: a real composition, not a stock product card */
    .hero-art {
      position: relative;
      aspect-ratio: 4 / 5;
      max-height: 640px;
    }
    @media (max-width: 900px) {
      .hero-art { aspect-ratio: 5 / 4; max-height: 420px; }
    }
    .hero-photo {
      position: absolute; inset: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--paper-2);
      box-shadow:
        0 1px 1px rgba(26,24,20,0.04),
        0 18px 60px -28px rgba(26,24,20,0.35);
    }
    .hero-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: saturate(0.9) contrast(1.02);
    }
    /* Overlay card: a live "rating in progress" tile that demos the product */
    .hero-tile {
      position: absolute;
      left: -28px; bottom: 32px;
      width: min(340px, 75%);
      background: var(--paper);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow:
        0 1px 1px rgba(26,24,20,0.05),
        0 20px 50px -20px rgba(26,24,20,0.28);
      border: 1px solid var(--rule);
    }
    @media (max-width: 900px) {
      .hero-tile { left: 12px; bottom: 16px; width: min(300px, 80%); }
    }
    .hero-tile-head {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px; color: var(--ink-3);
      margin-bottom: 12px;
      letter-spacing: 0.04em;
    }
    .hero-tile-q {
      font-family: var(--serif);
      font-size: 18px;
      line-height: 1.25;
      color: var(--ink);
      margin: 0 0 14px;
      letter-spacing: -0.01em;
    }
    .hero-tile-dimension {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 0;
      border-top: 1px solid var(--rule);
      font-size: 13px;
      color: var(--ink-2);
    }
    .hero-tile-dimension:first-of-type { border-top: 0; }
    .pip-row { display: inline-flex; gap: 4px; }
    .pip {
      width: 14px; height: 6px; border-radius: 2px;
      background: var(--paper-3);
    }
    .pip.on { background: var(--accent); }

    .hero-side-stat {
      position: absolute;
      top: 24px; right: -16px;
      background: var(--ink);
      color: var(--paper);
      padding: 14px 18px;
      border-radius: var(--radius);
      font-family: var(--serif);
      transform: rotate(2deg);
      box-shadow: 0 14px 30px -10px rgba(26,24,20,0.35);
    }
    @media (max-width: 900px) {
      .hero-side-stat { right: 12px; top: 12px; }
    }
    .hero-side-stat .n {
      font-size: 28px; line-height: 1; font-weight: 500;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
    .hero-side-stat .l {
      font-family: var(--sans);
      font-size: 11px;
      color: var(--dark-ink-2);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 4px;
    }

    /* Hero foot strip — marquee of partners (typographic, no logos faking it) */
    .hero-foot {
      margin-top: 60px;
      padding-top: 28px;
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 28px;
      align-items: center;
    }
    @media (max-width: 720px) { .hero-foot { grid-template-columns: 1fr; gap: 14px; } }
    .hero-foot-label {
      font-size: 12px; color: var(--ink-3);
      text-transform: uppercase; letter-spacing: 0.14em;
    }
    .partners {
      display: flex; flex-wrap: wrap;
      gap: 36px;
      font-family: var(--serif);
      font-size: 20px;
      color: var(--ink-2);
      letter-spacing: -0.01em;
    }
    .partners span { white-space: nowrap; }

    /* ============================================================
       THESIS BAND
       Editorial split: a manifesto on one side, a structured pair on the other
       ============================================================ */
    .thesis {
      padding: clamp(72px, 10vw, 140px) 0;
      border-top: 1px solid var(--rule);
    }
    .thesis-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: clamp(40px, 6vw, 96px);
    }
    @media (max-width: 900px) { .thesis-grid { grid-template-columns: 1fr; } }
    .section-tag {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
      letter-spacing: 0.04em;
      margin-bottom: 24px;
    }
    .h-section {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 4.5vw, 52px);
      line-height: 1.04;
      letter-spacing: -0.02em;
      margin: 0 0 20px;
      color: var(--ink);
      max-width: 16ch;
    }
    .h-section em { font-style: italic; color: var(--accent-deep); font-weight: 300; }
    .thesis-lede {
      font-size: 17px; line-height: 1.6;
      color: var(--ink-2);
      max-width: 50ch;
      margin: 0;
    }

    .principles {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }
    .principle {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 24px;
      padding: 28px 0;
      border-top: 1px solid var(--rule);
      align-items: start;
    }
    .principle:last-child { border-bottom: 1px solid var(--rule); }
    .principle-num {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 32px;
      color: var(--ink-4);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
    .principle h3 {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 17px;
      letter-spacing: -0.01em;
      margin: 0 0 6px;
      color: var(--ink);
    }
    .principle p {
      margin: 0;
      font-size: 15px; line-height: 1.55;
      color: var(--ink-2);
      max-width: 56ch;
    }

    /* ============================================================
       RATING FLOW — the centerpiece interactive demo
       ============================================================ */
    .rate-section {
      padding: clamp(72px, 10vw, 130px) 0;
      background: var(--paper-2);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      position: relative;
      overflow: hidden;
    }
    .rate-section::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(800px 400px at 90% 10%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%);
      pointer-events: none;
    }
    .rate-head {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 40px;
      align-items: end;
      margin-bottom: 48px;
    }
    @media (max-width: 900px) { .rate-head { grid-template-columns: 1fr; gap: 20px; } }
    .rate-head .lede {
      font-size: 16px; line-height: 1.6;
      color: var(--ink-2);
      max-width: 48ch;
    }

    /* The interactive panel */
    .rate-panel {
      position: relative;
      background: var(--paper);
      border-radius: var(--radius-lg);
      border: 1px solid var(--rule);
      overflow: hidden;
      box-shadow:
        0 1px 1px rgba(26,24,20,0.04),
        0 30px 80px -40px rgba(26,24,20,0.3);
    }
    .rate-progress {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      border-bottom: 1px solid var(--rule);
      background: var(--paper);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--ink-3);
    }
    .rp-step {
      padding: 18px 20px;
      display: flex; align-items: center; gap: 10px;
      border-right: 1px solid var(--rule);
      position: relative;
      transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
    }
    .rp-step:last-child { border-right: 0; }
    .rp-step .n {
      font-family: var(--mono);
      font-size: 11px;
      width: 22px; height: 22px;
      border-radius: 999px;
      border: 1px solid var(--rule);
      display: grid; place-items: center;
      transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
    }
    .rp-step.done .n {
      background: var(--ink); color: var(--paper); border-color: var(--ink);
    }
    .rp-step.active .n {
      background: var(--accent); color: var(--paper); border-color: var(--accent);
    }
    .rp-step.active { color: var(--ink); background: color-mix(in oklab, var(--accent) 6%, var(--paper)); }
    .rp-step.done { color: var(--ink-2); }
    @media (max-width: 720px) {
      .rate-progress { grid-template-columns: 1fr 1fr; }
      .rp-step { border-bottom: 1px solid var(--rule); }
      .rp-step:nth-child(2) { border-right: 0; }
      .rp-step:nth-child(3), .rp-step:nth-child(4) { border-bottom: 0; }
    }

    .rate-body {
      padding: clamp(28px, 4vw, 48px);
      min-height: 420px;
      position: relative;
    }
    .step {
      display: none;
      animation: stepIn 380ms var(--ease-out);
    }
    .step.is-active { display: block; }
    @keyframes stepIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .step-eyebrow {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
      letter-spacing: 0.04em;
      margin-bottom: 10px;
    }
    .step h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(24px, 3vw, 32px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin: 0 0 12px;
      color: var(--ink);
      max-width: 24ch;
    }
    .step p.helper {
      font-size: 15px; line-height: 1.55;
      color: var(--ink-2);
      margin: 0 0 28px;
      max-width: 56ch;
    }

    /* Step 1 — entity picker */
    .entity-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
    }
    .entity {
      text-align: left;
      padding: 18px;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      cursor: pointer;
      transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), transform 160ms var(--ease-out);
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 14px;
      align-items: start;
    }
    .entity:active { transform: scale(0.99); }
    @media (hover: hover) and (pointer: fine) {
      .entity:hover { border-color: var(--ink-3); background: color-mix(in oklab, var(--accent) 4%, var(--paper)); }
    }
    .entity.selected {
      border-color: var(--ink);
      background: color-mix(in oklab, var(--accent) 9%, var(--paper));
    }
    .entity-ico {
      width: 36px; height: 36px;
      border-radius: 9px;
      background: var(--paper-2);
      display: grid; place-items: center;
      color: var(--ink-2);
    }
    .entity.selected .entity-ico { background: var(--ink); color: var(--paper); }
    .entity-name {
      font-weight: 600; font-size: 15px;
      letter-spacing: -0.005em;
      color: var(--ink);
      margin: 2px 0 2px;
    }
    .entity-meta {
      font-size: 13px;
      color: var(--ink-3);
      line-height: 1.4;
    }

    /* Step 2 — dimension ratings */
    .dimensions {
      display: grid;
      gap: 14px;
    }
    .dimension {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 18px 20px;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
    }
    .dim-label {
      display: flex; flex-direction: column; gap: 4px;
    }
    .dim-name {
      font-weight: 600; font-size: 15px;
      letter-spacing: -0.005em;
    }
    .dim-hint {
      font-size: 13px; color: var(--ink-3);
    }
    .stars {
      display: inline-flex; gap: 2px;
      padding: 4px;
      background: var(--paper-2);
      border-radius: 999px;
    }
    .star {
      width: 36px; height: 36px;
      display: grid; place-items: center;
      border-radius: 999px;
      color: var(--ink-4);
      transition: color 140ms var(--ease-out), background 140ms var(--ease-out), transform 120ms var(--ease-out);
    }
    .star:active { transform: scale(0.92); }
    .star.lit { color: var(--accent-deep); }
    .star.hot { color: var(--accent); }
    .star svg { width: 20px; height: 20px; }
    @media (hover: hover) and (pointer: fine) {
      .star:hover { background: var(--paper-3); }
    }

    .score-callout {
      margin-top: 22px;
      padding: 16px 20px;
      border-radius: var(--radius);
      border: 1px solid var(--rule);
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .score-callout .score {
      font-family: var(--serif);
      font-size: 36px; line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .score-callout .score .of { color: var(--ink-4); font-size: 18px; }
    .score-callout .verdict {
      font-size: 14px; color: var(--ink-2);
      max-width: 36ch;
    }
    .score-callout.is-low { border-color: var(--critical); background: var(--critical-soft); }
    .score-callout.is-low .verdict { color: var(--critical); }

    /* Step 3 — constructive prompts (and the triage if negative) */
    .prompt-stack {
      display: grid; gap: 18px;
    }
    .prompt-block {
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      padding: 18px;
    }
    .prompt-block label {
      display: block;
      font-weight: 600; font-size: 14px;
      margin-bottom: 8px;
      letter-spacing: -0.005em;
    }
    .prompt-block .qhint {
      font-size: 13px; color: var(--ink-3);
      margin-bottom: 14px;
    }
    .ta {
      width: 100%;
      min-height: 110px;
      resize: vertical;
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--rule);
      background: var(--paper);
      font-size: 15px;
      line-height: 1.5;
      transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
      font-family: inherit;
    }
    .ta:focus {
      outline: none;
      border-color: var(--ink);
      background: #fff;
    }
    .charcount {
      margin-top: 8px;
      font-size: 12px;
      color: var(--ink-3);
      font-family: var(--mono);
      display: flex; justify-content: space-between;
      align-items: center;
    }
    .charcount .ok { color: var(--positive); }
    .charcount .lo { color: var(--warning); }

    /* triage notice */
    .triage {
      border: 1px solid var(--critical);
      border-radius: var(--radius);
      padding: 18px;
      background: var(--critical-soft);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: start;
    }
    .triage-ico {
      width: 36px; height: 36px;
      border-radius: 999px;
      background: var(--critical); color: var(--paper);
      display: grid; place-items: center;
      flex: 0 0 auto;
    }
    .triage h4 {
      font-family: var(--serif);
      font-size: 19px; margin: 0 0 6px;
      letter-spacing: -0.01em;
      color: var(--critical);
    }
    .triage p {
      margin: 0; font-size: 14px; line-height: 1.5; color: #6a2818;
      max-width: 56ch;
    }

    .tag-row {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 12px;
    }
    .tag {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--rule);
      background: var(--paper);
      font-size: 13px;
      color: var(--ink-2);
      cursor: pointer;
      transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out);
    }
    .tag:active { transform: scale(0.97); }
    .tag.on {
      border-color: var(--ink);
      background: var(--ink); color: var(--paper);
    }

    /* Step 4 — consent + submit */
    .consent-list {
      list-style: none; padding: 0; margin: 0;
      display: grid; gap: 12px;
    }
    .consent {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 14px;
      padding: 14px 16px;
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      background: var(--paper);
      cursor: pointer;
      align-items: start;
      transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
    }
    .consent:hover { border-color: var(--ink-3); }
    .consent input { position: absolute; opacity: 0; pointer-events: none; }
    .consent-box {
      width: 20px; height: 20px;
      border-radius: 5px;
      border: 1.5px solid var(--ink-3);
      background: var(--paper);
      display: grid; place-items: center;
      transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
      margin-top: 1px;
    }
    .consent-box svg {
      width: 14px; height: 14px;
      color: var(--paper);
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 140ms var(--ease-out), transform 200ms var(--ease-out);
    }
    .consent.is-on .consent-box {
      background: var(--ink); border-color: var(--ink);
    }
    .consent.is-on .consent-box svg { opacity: 1; transform: scale(1); }
    .consent-text strong {
      display: block;
      font-size: 14px; font-weight: 600;
      margin-bottom: 2px;
      letter-spacing: -0.005em;
    }
    .consent-text span {
      display: block; font-size: 13px; color: var(--ink-3); line-height: 1.5;
    }

    /* Footer of the rate panel */
    .rate-foot {
      padding: 18px 20px;
      border-top: 1px solid var(--rule);
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px;
      background: var(--paper);
      flex-wrap: wrap;
    }
    .rate-foot-meta {
      font-size: 12px; color: var(--ink-3);
      font-family: var(--mono);
      letter-spacing: 0.02em;
    }
    .rate-foot-actions { display: flex; gap: 10px; }

    /* Submitted success state */
    .submitted {
      text-align: center;
      padding: 30px 10px 20px;
    }
    .submitted-check {
      width: 60px; height: 60px;
      margin: 0 auto 22px;
      border-radius: 999px;
      background: var(--accent);
      color: var(--paper);
      display: grid; place-items: center;
      animation: pop 380ms var(--ease-out);
    }
    @keyframes pop {
      0% { transform: scale(0.5); opacity: 0; }
      60% { transform: scale(1.06); }
      100% { transform: scale(1); opacity: 1; }
    }
    .submitted h3 {
      max-width: 22ch; margin-inline: auto;
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(26px, 3.4vw, 36px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }
    .submitted p {
      max-width: 50ch; margin-inline: auto;
      font-size: 15px; color: var(--ink-2); line-height: 1.6;
    }
    .submitted .receipt {
      margin: 28px auto 0;
      max-width: 380px;
      padding: 16px;
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      text-align: left;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-2);
      background: var(--paper);
    }
    .submitted .receipt .r-row {
      display: flex; justify-content: space-between;
      padding: 4px 0;
    }

    /* ============================================================
       DASHBOARD BAND — operator surface
       ============================================================ */
    .dash {
      background: var(--dark);
      color: var(--dark-ink);
      padding: clamp(80px, 10vw, 130px) 0;
      position: relative;
    }
    .dash-head {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 40px;
      align-items: end;
      margin-bottom: 48px;
    }
    @media (max-width: 900px) { .dash-head { grid-template-columns: 1fr; } }
    .dash .section-tag { color: var(--dark-ink-3); }
    .dash h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 4.4vw, 52px);
      line-height: 1.04;
      letter-spacing: -0.02em;
      color: var(--dark-ink);
      margin: 0 0 14px;
      max-width: 18ch;
    }
    .dash h2 em { color: #c0d093; font-weight: 300; font-style: italic; }
    .dash .dash-lede {
      font-size: 16px;
      color: var(--dark-ink-2);
      line-height: 1.6;
      max-width: 50ch;
    }

    .dash-frame {
      background: var(--dark-2);
      border: 1px solid var(--dark-rule);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 30px 80px -30px rgba(0,0,0,0.4);
    }
    .dash-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--dark-rule);
      gap: 16px;
      flex-wrap: wrap;
    }
    .dash-bar-l {
      display: flex; align-items: center; gap: 14px;
      font-size: 13px;
      color: var(--dark-ink-2);
    }
    .live-dot {
      width: 8px; height: 8px; border-radius: 999px;
      background: #a8c876;
      box-shadow: 0 0 0 0 rgba(168, 200, 118, 0.6);
      animation: dotPulse 2s var(--ease-out) infinite;
    }
    @keyframes dotPulse {
      50% { box-shadow: 0 0 0 8px rgba(168, 200, 118, 0); }
    }
    .dash-bar-r {
      display: flex; gap: 6px;
      font-family: var(--mono);
      font-size: 12px;
      color: var(--dark-ink-3);
    }
    .dash-tab {
      padding: 6px 12px;
      border-radius: 999px;
      transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
    }
    .dash-tab.on { background: var(--dark-3); color: var(--dark-ink); }

    /* KPIs row */
    .kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      border-bottom: 1px solid var(--dark-rule);
    }
    @media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
    .kpi {
      padding: 22px 24px;
      border-right: 1px solid var(--dark-rule);
    }
    .kpi:last-child { border-right: 0; }
    @media (max-width: 720px) {
      .kpi:nth-child(2) { border-right: 0; }
      .kpi:nth-child(1), .kpi:nth-child(2) { border-bottom: 1px solid var(--dark-rule); }
    }
    .kpi-label {
      font-size: 11px; text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--dark-ink-3);
      margin-bottom: 8px;
    }
    .kpi-value {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 32px;
      line-height: 1;
      color: var(--dash-ink, var(--dark-ink));
      letter-spacing: -0.025em;
      font-variant-numeric: tabular-nums;
      margin-bottom: 6px;
    }
    .kpi-delta {
      font-size: 12px;
      font-family: var(--mono);
      color: var(--dark-ink-2);
    }
    .kpi-delta.up { color: #a8c876; }
    .kpi-delta.down { color: #e08d72; }

    /* Main dashboard grid: review queue + analysis */
    .dash-body {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 0;
    }
    @media (max-width: 960px) { .dash-body { grid-template-columns: 1fr; } }

    .queue {
      border-right: 1px solid var(--dark-rule);
    }
    @media (max-width: 960px) { .queue { border-right: 0; border-bottom: 1px solid var(--dark-rule); } }

    .queue-head {
      display: grid;
      grid-template-columns: 80px 1fr 100px 90px;
      gap: 12px;
      padding: 12px 20px;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--dark-ink-3);
      border-bottom: 1px solid var(--dark-rule);
    }
    @media (max-width: 600px) {
      .queue-head { grid-template-columns: 50px 1fr 60px; }
      .queue-head .col-time { display: none; }
    }
    .queue-item {
      display: grid;
      grid-template-columns: 80px 1fr 100px 90px;
      gap: 12px;
      padding: 16px 20px;
      align-items: center;
      border-bottom: 1px solid var(--dark-rule);
      cursor: pointer;
      transition: background 140ms var(--ease-out);
    }
    @media (max-width: 600px) {
      .queue-item { grid-template-columns: 50px 1fr 60px; }
      .queue-item .col-time { display: none; }
    }
    @media (hover: hover) and (pointer: fine) {
      .queue-item:hover { background: var(--dark-3); }
    }
    .queue-item:last-child { border-bottom: 0; }
    .queue-item.is-selected { background: var(--dark-3); }

    .qi-score {
      font-family: var(--serif);
      font-size: 22px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      display: flex; align-items: center; gap: 4px;
      color: var(--dark-ink);
    }
    .qi-score .of { font-size: 12px; color: var(--dark-ink-3); }
    .qi-score.crit { color: #e08d72; }
    .qi-score.warn { color: #e6c46e; }
    .qi-score.good { color: #a8c876; }
    .qi-meta {
      min-width: 0;
    }
    .qi-title {
      font-size: 14px; font-weight: 500;
      color: var(--dark-ink);
      letter-spacing: -0.005em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 4px;
    }
    .qi-sub {
      font-size: 12px;
      color: var(--dark-ink-3);
      display: flex; gap: 10px; align-items: center;
      flex-wrap: wrap;
    }
    .pill {
      padding: 2px 8px;
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 1px solid var(--dark-rule);
      color: var(--dark-ink-2);
      background: var(--dark);
    }
    .pill.crit { color: #e08d72; border-color: rgba(224, 141, 114, 0.4); }
    .pill.warn { color: #e6c46e; border-color: rgba(230, 196, 110, 0.4); }
    .pill.good { color: #a8c876; border-color: rgba(168, 200, 118, 0.4); }
    .pill.acc  { color: #c0d093; border-color: rgba(192, 208, 147, 0.4); background: rgba(192, 208, 147, 0.05); }
    .qi-time {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--dark-ink-3);
      text-align: right;
    }
    .qi-status {
      text-align: right;
    }

    /* Analysis panel */
    .analysis {
      padding: 24px;
      background: var(--dark-2);
    }
    .analysis h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 24px;
      color: var(--dark-ink);
      letter-spacing: -0.015em;
      margin: 0 0 4px;
    }
    .analysis .a-sub {
      font-size: 12px;
      font-family: var(--mono);
      color: var(--dark-ink-3);
      margin-bottom: 20px;
      letter-spacing: 0.02em;
    }
    .a-section {
      padding: 16px 0;
      border-top: 1px solid var(--dark-rule);
    }
    .a-section:first-of-type { border-top: 0; padding-top: 0; }
    .a-label {
      font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--dark-ink-3);
      margin-bottom: 10px;
    }
    .sentiment-bar {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      display: flex;
      background: var(--dark);
    }
    .sentiment-bar > span { display: block; height: 100%; }
    .sb-neg { background: #c46c52; }
    .sb-neu { background: #6e6759; }
    .sb-pos { background: #8aa86a; }
    .sentiment-legend {
      display: flex; justify-content: space-between;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--dark-ink-2);
      margin-top: 8px;
    }
    .theme {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 90px 28px;
      gap: 12px;
      padding: 10px 0;
      align-items: center;
      border-top: 1px dashed var(--dark-rule);
    }
    .theme:first-of-type { border-top: 0; }
    .theme-name {
      font-size: 13px;
      color: var(--dark-ink);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .theme-track {
      width: 90px; height: 4px;
      border-radius: 999px;
      background: var(--dark-3);
      position: relative;
      overflow: hidden;
    }
    .theme-track > span {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: #c0d093;
      border-radius: 999px;
    }
    .theme-count {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--dark-ink-3);
      min-width: 24px;
      text-align: right;
    }

    .actions-row {
      display: flex; gap: 8px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .a-btn {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--dark-rule);
      font-size: 12px;
      color: var(--dark-ink);
      background: transparent;
      transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .a-btn:hover { background: var(--dark-3); border-color: var(--dark-ink-3); }
    }
    .a-btn.primary {
      background: var(--paper); color: var(--ink); border-color: var(--paper);
    }
    .a-btn.primary:hover { background: #fff; }

    /* The auto-review highlight quote */
    .ai-quote {
      padding: 14px 16px;
      background: var(--dark);
      border-left: 2px solid #c0d093;
      border-radius: 0 8px 8px 0;
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      line-height: 1.5;
      color: var(--dark-ink-2);
    }
    .ai-quote::before {
      content: '"';
      color: #c0d093;
      font-size: 18px;
      margin-right: 4px;
    }

    /* ============================================================
       GDPR & TRUST BAND
       ============================================================ */
    .trust {
      padding: clamp(70px, 9vw, 120px) 0;
      border-top: 1px solid var(--rule);
    }
    .trust-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
      gap: clamp(40px, 6vw, 96px);
    }
    @media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; } }
    .trust-list {
      display: grid; gap: 0;
      border-top: 1px solid var(--rule);
    }
    .trust-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 22px 0;
      border-bottom: 1px solid var(--rule);
    }
    .trust-item .ico {
      width: 40px; height: 40px;
      border-radius: 10px;
      background: var(--paper-2);
      display: grid; place-items: center;
      color: var(--ink-2);
    }
    .trust-item h4 {
      margin: 0 0 4px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.005em;
    }
    .trust-item p {
      margin: 0;
      font-size: 14px;
      color: var(--ink-3);
      line-height: 1.5;
    }
    .trust-item .status {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent-deep);
      white-space: nowrap;
    }
    @media (max-width: 600px) {
      .trust-item { grid-template-columns: auto 1fr; }
      .trust-item .status { grid-column: 2; margin-top: 4px; }
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .foot {
      background: var(--dark);
      color: var(--dark-ink-2);
      padding: 60px 0 32px;
    }
    .foot-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
      gap: 40px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--dark-rule);
    }
    @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }
    .foot h5 {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dark-ink-3);
      margin: 0 0 16px;
      font-weight: 500;
    }
    .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .foot a { font-size: 14px; color: var(--dark-ink-2); transition: color 160ms var(--ease-out); }
    @media (hover: hover) and (pointer: fine) {
      .foot a:hover { color: var(--dark-ink); }
    }
    .foot-brand {
      font-family: var(--serif);
      color: var(--dark-ink);
      font-size: 24px;
      letter-spacing: -0.015em;
      margin: 0 0 14px;
    }
    .foot-tag {
      font-size: 14px;
      max-width: 32ch;
      line-height: 1.55;
    }
    .foot-bot {
      padding-top: 24px;
      display: flex; justify-content: space-between; gap: 16px;
      flex-wrap: wrap;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--dark-ink-3);
      letter-spacing: 0.02em;
    }

    /* ============================================================
       GDPR CONSENT BANNER (cookie + data)
       ============================================================ */
    .cb {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 100;
      padding: 16px;
      pointer-events: none;
      transform: translateY(20px);
      opacity: 0;
      transition: transform 320ms var(--ease-out), opacity 240ms var(--ease-out);
    }
    .cb.is-on {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .cb-inner {
      max-width: 920px;
      margin: 0 auto;
      background: var(--ink);
      color: var(--paper);
      border-radius: var(--radius);
      padding: 18px 20px;
      box-shadow: 0 24px 60px -20px rgba(0,0,0,0.4);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
    }
    @media (max-width: 720px) { .cb-inner { grid-template-columns: 1fr; } }
    .cb-text {
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--dark-ink-2);
      max-width: 64ch;
    }
    .cb-text strong { color: var(--paper); font-weight: 600; }
    .cb-text a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--dark-ink-3); text-underline-offset: 3px; }
    .cb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .cb-btn {
      padding: 9px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
    }
    .cb-btn:active { transform: scale(0.97); }
    .cb-btn.ghost { color: var(--paper); border: 1px solid var(--dark-rule); }
    .cb-btn.ghost:hover { border-color: var(--dark-ink-2); }
    .cb-btn.accept { background: var(--paper); color: var(--ink); }
    .cb-btn.accept:hover { background: #fff; }

    /* Preferences modal */
    .pref {
      position: fixed; inset: 0;
      z-index: 110;
      display: none;
      align-items: center; justify-content: center;
      padding: 20px;
      background: rgba(22, 21, 18, 0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      animation: fade 240ms var(--ease-out);
    }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
    .pref.is-on { display: flex; }
    .pref-panel {
      width: 100%; max-width: 540px;
      background: var(--paper);
      border-radius: var(--radius-lg);
      padding: 28px;
      max-height: 90vh; overflow: auto;
      animation: panelIn 320ms var(--ease-out);
    }
    @keyframes panelIn {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .pref-panel h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 24px;
      letter-spacing: -0.02em;
      margin: 0 0 6px;
    }
    .pref-panel > p {
      font-size: 14px; color: var(--ink-2); margin: 0 0 22px;
      line-height: 1.55;
    }
    .pref-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      padding: 16px 0;
      border-top: 1px solid var(--rule);
      align-items: center;
    }
    .pref-row:first-of-type { border-top: 0; }
    .pref-row h4 { margin: 0 0 4px; font-size: 14px; letter-spacing: -0.005em; }
    .pref-row p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

    /* Toggle */
    .toggle {
      position: relative;
      width: 40px; height: 22px;
      border-radius: 999px;
      background: var(--paper-3);
      border: 1px solid var(--rule);
      transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
      cursor: pointer;
    }
    .toggle::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 16px; height: 16px;
      border-radius: 999px;
      background: var(--paper);
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
      transition: transform 220ms var(--ease-out);
    }
    .toggle.on { background: var(--ink); border-color: var(--ink); }
    .toggle.on::after { transform: translateX(18px); }
    .toggle.locked { opacity: 0.55; cursor: not-allowed; }

    .pref-actions {
      margin-top: 24px;
      display: flex; gap: 10px; justify-content: flex-end;
      flex-wrap: wrap;
    }


    /* ============================================================
       THEME SUPPLEMENT  (WordPress-specific surfaces not in the
       original single-page prototype)
       ============================================================ */
    .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 0 0 8px 0; }
    .skip-link:focus { left: 0; }

    /* Custom logo sizing in the brand slot */
    .brand .custom-logo { width: 28px; height: 28px; border-radius: 7px; }

    /* Hero art works without the prototype's stock photo */
    .candor-front .hero-art { aspect-ratio: auto; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
    .candor-front .hero-art .hero-tile { position: static; box-shadow: 0 24px 60px -28px rgba(26,24,20,0.45); }
    .candor-front .hero-art .hero-side-stat { position: static; align-self: flex-end; }
    @media (max-width: 900px) { .candor-front .hero-art { display: none; } }

    /* Generic page / post content */
    .content-area { padding: clamp(40px, 8vw, 96px) 0; }
    .page-body { max-width: 760px; margin: 0 auto; }
    .entry-head { margin-bottom: 28px; }
    .entry-title { margin: 0 0 10px; }
    .entry-meta { font-size: 13px; color: var(--ink-3); font-family: var(--mono); }
    .entry-thumb { margin: 0 0 28px; border-radius: var(--radius); overflow: hidden; }
    .entry-content { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
    .entry-content h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 36px 0 12px; color: var(--ink); }
    .entry-content h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 28px 0 10px; color: var(--ink); }
    .entry-content p { margin: 0 0 18px; }
    .entry-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
    .entry-content blockquote { border-left: 3px solid var(--accent); margin: 24px 0; padding: 6px 0 6px 20px; font-style: italic; color: var(--ink-2); }
    .entry-content img { border-radius: var(--radius); }
    .entry-content code { font-family: var(--mono); font-size: 0.9em; background: var(--paper-2); padding: 2px 6px; border-radius: 4px; }
    .entry-content pre { background: var(--dark); color: var(--dark-ink); padding: 18px; border-radius: var(--radius); overflow: auto; }
    .entry-content pre code { background: none; padding: 0; }
    .entry-foot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }

    /* Blog list */
    .post-list { display: grid; gap: 36px; }
    .post-card { display: grid; gap: 18px; }
    @media (min-width: 640px) { .post-card { grid-template-columns: 220px 1fr; } }
    .post-card__thumb { border-radius: var(--radius); overflow: hidden; display: block; }
    .post-card__title { font-family: var(--serif); font-weight: 500; font-size: 23px; margin: 0 0 8px; line-height: 1.25; }
    .post-card__title a:hover { color: var(--accent-deep); }
    .post-card__excerpt { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 8px 0 12px; }
    .read-more { font-weight: 600; font-size: 14px; color: var(--accent-deep); }

    /* Pagination */
    .pagination, .nav-links.pagination { margin-top: 48px; display: flex; gap: 8px; flex-wrap: wrap; }
    .pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: 14px; }
    .pagination .page-numbers.current { background: var(--accent); color: var(--paper); border-color: var(--accent); }

    /* Search form */
    .search-form { display: flex; gap: 8px; margin-top: 20px; }
    .search-form .search-field { flex: 1; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
    .search-form .search-submit { padding: 12px 20px; border-radius: var(--radius-sm); background: var(--accent); color: var(--paper); font-weight: 600; }

    /* Footer columns + menus */
    .foot-col h5 { margin: 0 0 14px; }
    .foot-col ul, .foot-menu { list-style: none; margin: 0; padding: 0; }
    .foot-col li, .foot-menu li { margin-bottom: 10px; }

    /* Cookie banner: start hidden via attribute until JS shows it */
    .cb[hidden] { display: none; }

    /* Plugin-missing notice */
    .candor-plugin-missing { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-3); background: var(--paper-2); }

    /* Dashboard sign-in hint inside the dark band */
    .dash-bar-sub { color: var(--dark-ink-3); font-family: var(--mono); margin-left: 6px; }
    .dash-signin-hint { color: var(--dark-ink-3); font-size: 13px; text-align: center; margin: 16px 0 0; }

    /* Embedded live dashboard inside the dark band keeps light tokens;
       give it a paper surface so it stays legible */
    .dash-frame .candor-dash { background: var(--paper); border-radius: var(--radius); padding: clamp(16px, 3vw, 28px); }

    /* 404 */
    .error-404 { text-align: center; }
    .error-404 .search-form { max-width: 420px; margin: 24px auto 0; }