/* Hero */
    .pillar-hero {
      background: var(--color-surface-sunken);
      border-bottom: var(--border-thin);
      padding: var(--space-9) 0 var(--space-8);
    }
    .pillar-hero__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--space-5); }
    @media (min-width: 768px) { .pillar-hero__inner { padding: 0 var(--space-7); } }
    .pillar-hero h1 {
      font-size: clamp(2.4rem, 4.6vw, 3.8rem);
      letter-spacing: var(--tracking-tight);
      line-height: 1.04;
      max-width: 22ch;
      text-wrap: balance;
      color: var(--color-ink);
      margin-bottom: var(--space-5);
    }
    .pillar-hero__lead {
      font-size: var(--text-lg);
      line-height: var(--leading-body);
      color: var(--color-text);
      max-width: 62ch;
      font-weight: var(--weight-medium);
    }
    .pillar-byline {
      margin-top: var(--space-7);
      padding-top: var(--space-5);
      border-top: var(--border-thin);
      display: flex;
      align-items: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .pillar-byline__avatar {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--color-surface) center/cover;
      background-image: url('/wp-content/uploads/2026/08/Wolf-Hanschen.jpg');
      border: 1px solid var(--color-hairline);
      flex-shrink: 0;
    }
    .pillar-byline__text {
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.45;
      flex: 1;
      min-width: 240px;
    }
    .pillar-byline__text strong { display: block; color: var(--color-ink); font-weight: var(--weight-semibold); font-size: var(--text-base); margin-bottom: 2px; }
    .pillar-byline__text em { font-style: italic; color: var(--color-brand-orange-deep); }
    .pillar-byline__meta {
      display: flex;
      gap: var(--space-5);
      font-family: var(--font-sans);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      letter-spacing: 0;
      flex-shrink: 0;
    }
    .pillar-byline__meta span::before { content: "·"; margin-right: var(--space-3); color: var(--color-hairline-strong); }
    .pillar-byline__meta span:first-child::before { content: none; margin: 0; }

    /* Hero visual — 4:3 landscape, sits beneath the byline */
    .pillar-hero__visual {
      position: relative;
      margin-top: var(--space-7);
      aspect-ratio: 4 / 3;
      max-height: 460px;
      width: 100%;
      overflow: hidden;
      border-radius: var(--radius-md);
      background: var(--color-surface-elevated);
      border: 1px solid var(--color-hairline);
    }
    @media (min-width: 768px) { .pillar-hero__visual { aspect-ratio: 16 / 9; } }
    .pillar-hero__visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .pillar-hero__visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, color-mix(in oklab, var(--color-ink) 55%, transparent) 0%, transparent 45%);
      pointer-events: none;
    }
    .pillar-hero__visual-tag {
      position: absolute;
      left: var(--space-5);
      bottom: var(--space-5);
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 6px 12px;
      background: var(--color-surface);
      color: var(--color-ink);
      border-radius: var(--radius-pill);
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      box-shadow: var(--shadow-sm);
    }
    .pillar-hero__visual-tag::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-brand-orange);
    }
    .pillar-hero__visual-caption {
      position: absolute;
      right: var(--space-5);
      bottom: var(--space-5);
      z-index: 1;
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      color: color-mix(in oklab, white 92%, transparent);
      letter-spacing: 0;
    }

    /* Layout */
    .pillar-shell {
      max-width: 1240px;
      margin: 0 auto;
      padding: var(--space-9) var(--space-5);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
    @media (min-width: 768px) { .pillar-shell { padding: var(--space-9) var(--space-7); } }
    @media (min-width: 1024px) {
      .pillar-shell { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-9); }
    }

    /* Sticky TOC */
    .pillar-toc {
      position: sticky;
      top: 100px;
      align-self: start;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
      padding: var(--space-2) 0;
    }
    @media (max-width: 1023px) {
      .pillar-toc {
        position: relative;
        top: 0;
        max-height: none;
        background: var(--color-surface-sunken);
        border: var(--border-thin);
        border-radius: var(--radius-md);
        padding: var(--space-5);
      }
    }
    .pillar-toc__label {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-text-muted);
      font-weight: var(--weight-semibold);
      margin-bottom: var(--space-4);
      display: block;
    }
    .pillar-toc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); border-left: 1px solid var(--color-hairline); }
    .pillar-toc__link {
      display: flex;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      color: var(--color-text-muted);
      font-size: var(--text-sm);
      line-height: 1.35;
      border-left: 2px solid transparent;
      margin-left: -1px;
      transition: all var(--duration-fast) var(--ease-out);
    }
    .pillar-toc__link:hover { color: var(--color-ink); border-left-color: var(--color-hairline-strong); }
    .pillar-toc__link[data-active="true"] { color: var(--color-ink); border-left-color: var(--color-brand-orange); font-weight: var(--weight-medium); }
    .pillar-toc__num { font-family: var(--font-serif); font-variant-numeric: tabular-nums; color: var(--color-text-subtle); font-size: var(--text-xs); font-weight: var(--weight-medium); }

    /* Article body */
    .pillar-article { max-width: 720px; }
    .pillar-article > .pillar-chapter:first-of-type > .pillar-chapter__body > p:first-child::first-letter {
      font-family: var(--font-serif);
      font-size: 5em;
      float: left;
      line-height: 0.85;
      margin: 0.05em 0.12em 0 0;
      color: var(--color-brand-orange);
      font-weight: var(--weight-semibold);
    }
    .pillar-chapter { margin-bottom: var(--space-9); scroll-margin-top: 100px; }
    .pillar-chapter:last-child { margin-bottom: 0; }
    .pillar-chapter__head {
      display: flex;
      align-items: baseline;
      gap: var(--space-4);
      margin-bottom: var(--space-5);
      padding-bottom: var(--space-4);
      border-bottom: var(--border-thin);
    }
    .pillar-chapter__num {
      font-family: var(--font-serif);
      font-variant-numeric: tabular-nums;
      font-size: clamp(1.4rem, 2.4vw, 1.8rem);
      color: var(--color-brand-orange);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.015em;
      line-height: 1;
      display: inline-block;
      transform: translateX(-8px);
      opacity: 0;
      transition: transform 700ms cubic-bezier(.2,.7,.2,1) 120ms, opacity 700ms cubic-bezier(.2,.7,.2,1) 120ms;
    }
    .pillar-chapter[data-revealed="true"] .pillar-chapter__num { transform: none; opacity: 1; }
    @media (prefers-reduced-motion: reduce) {
      .pillar-chapter__num { transform: none !important; opacity: 1 !important; transition: none !important; }
    }
    .pillar-chapter h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3.2vw, 2.5rem);
      letter-spacing: var(--tracking-tight);
      line-height: 1.1;
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
      flex: 1;
      text-wrap: balance;
    }
    .pillar-chapter h3 {
      font-family: var(--font-serif);
      font-size: var(--text-xl);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      margin: var(--space-7) 0 var(--space-4);
      font-weight: var(--weight-semibold);
    }
    .pillar-chapter__body p {
      font-size: var(--text-base);
      line-height: var(--leading-body);
      color: var(--color-text);
      margin-bottom: var(--space-5);
    }
    .pillar-chapter__body p:last-child { margin-bottom: 0; }
    .pillar-chapter__body strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
    .pillar-chapter__body em { color: var(--color-brand-navy); }
    .pillar-chapter__body a { color: var(--color-link); border-bottom: 1px solid color-mix(in oklab, var(--color-link) 35%, transparent); }
    .pillar-chapter__body a:hover { color: var(--color-link-hover); border-bottom-color: var(--color-link-hover); }

    /* Callout */
    .pillar-callout {
      margin: var(--space-6) 0;
      padding: var(--space-5) var(--space-6);
      background: var(--color-surface-sunken);
      border-left: 4px solid var(--color-brand-orange);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      position: relative;
      overflow: hidden;
    }
    .pillar-callout::before {
      content: "";
      position: absolute;
      left: -4px;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--color-brand-orange);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 700ms cubic-bezier(.2,.7,.2,1) 100ms;
    }
    .pillar-callout[data-revealed="true"]::before { transform: scaleY(1); }
    @media (prefers-reduced-motion: reduce) {
      .pillar-callout::before { transform: scaleY(1) !important; transition: none !important; }
    }
    .pillar-callout__label {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange-deep);
      font-weight: var(--weight-semibold);
      margin-bottom: var(--space-2);
    }
    .pillar-callout__body { font-size: var(--text-base); color: var(--color-text); line-height: 1.55; }
    .pillar-callout__body strong { color: var(--color-ink); }

    /* Pull quote */
    .pillar-pullquote {
      margin: var(--space-7) 0;
      padding: var(--space-5) 0;
      border-top: 1px solid var(--color-hairline-strong);
      border-bottom: 1px solid var(--color-hairline-strong);
      position: relative;
    }
    .pillar-pullquote::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      height: 1px;
      width: 0;
      background: var(--color-brand-orange);
      transition: width 900ms cubic-bezier(.2,.7,.2,1) 200ms;
    }
    .pillar-pullquote[data-revealed="true"]::before { width: 80px; }
    @media (prefers-reduced-motion: reduce) {
      .pillar-pullquote::before { width: 80px !important; transition: none !important; }
    }
    .pillar-pullquote blockquote {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(1.3rem, 2vw, 1.6rem);
      line-height: 1.35;
      color: var(--color-ink);
      letter-spacing: -0.01em;
      margin: 0;
      text-wrap: balance;
    }
    .pillar-pullquote blockquote::before { content: "\201C"; color: var(--color-brand-orange); margin-right: 4px; font-style: normal; }
    .pillar-pullquote blockquote::after { content: "\201D"; color: var(--color-brand-orange); margin-left: 2px; font-style: normal; }

    /* Citation chips — kept in mono because they read as identifiers (Rev. Rul. 68-331, IRC 1014). */
    .pillar-cite {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 8px;
      background: var(--color-surface-sunken);
      border: 1px solid var(--color-hairline);
      border-radius: var(--radius-pill);
      font-family: var(--font-mono);
      font-size: 0.85em;
      color: var(--color-ink);
      white-space: nowrap;
      letter-spacing: -0.005em;
      transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
      cursor: default;
    }
    .pillar-cite:hover {
      background: color-mix(in oklab, var(--color-brand-orange) 8%, var(--color-surface-sunken));
      border-color: var(--color-brand-orange);
      color: var(--color-brand-orange-deep);
    }

    /* FAQ accordion */
    .pillar-faq {
      max-width: 720px;
      margin: var(--space-9) auto 0;
      padding: var(--space-7) 0;
      border-top: var(--border-thin);
    }
    .pillar-faq__head {
      margin-bottom: var(--space-6);
    }
    .pillar-faq__head h2 {
      font-size: clamp(1.8rem, 3vw, 2.2rem);
      color: var(--color-ink);
      letter-spacing: var(--tracking-tight);
      margin-bottom: var(--space-3);
    }
    .pillar-faq__head p { font-size: var(--text-base); color: var(--color-text-muted); max-width: 56ch; }
    .pillar-faq__list { display: grid; gap: 0; }
    .faq-item {
      border-bottom: var(--border-thin);
      transition: background var(--duration-base) var(--ease-out);
    }
    .faq-item[open] {
      background: linear-gradient(to bottom, color-mix(in oklab, var(--color-brand-orange) 4%, var(--color-surface)) 0%, transparent 60%);
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: var(--space-5) 0;
      display: flex;
      gap: var(--space-4);
      align-items: flex-start;
      transition: color var(--duration-fast) var(--ease-out);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::marker { content: ""; }
    .faq-item summary:hover { color: var(--color-brand-orange-deep); }
    .faq-item summary::after {
      content: "";
      margin-left: auto;
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      margin-top: 4px;
      background: currentColor;
      color: var(--color-brand-orange);
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 1v12M1 7h12' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 1v12M1 7h12' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
      transition: transform 320ms cubic-bezier(.2,.7,.2,1), color var(--duration-fast) var(--ease-out);
    }
    .faq-item[open] summary::after { transform: rotate(45deg); color: var(--color-brand-orange-deep); }
    .faq-item__a {
      animation: pillar-faq-in 360ms cubic-bezier(.2,.7,.2,1);
    }
    @keyframes pillar-faq-in {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .faq-item__a { animation: none; }
    }
    .faq-item__q {
      font-family: var(--font-serif);
      font-size: var(--text-lg);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.3;
      flex: 1;
    }
    .faq-item__a {
      padding: 0 0 var(--space-5);
      font-size: var(--text-base);
      color: var(--color-text);
      line-height: var(--leading-body);
      max-width: 60ch;
    }
    .faq-item__a p { margin: 0 0 var(--space-3); }
    .faq-item__a p:last-child { margin-bottom: 0; }

    /* Related reads */
    .pillar-related {
      background: var(--color-surface-sunken);
      padding: var(--space-9) 0;
      border-top: var(--border-thin);
    }
    .pillar-related__head { max-width: 720px; margin: 0 auto var(--space-7); text-align: center; padding: 0 var(--space-5); }
    .pillar-related__head h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: var(--space-3); }
    .pillar-related__head p { color: var(--color-text-muted); }
    .pillar-related__grid {
      max-width: var(--content-wide);
      margin: 0 auto;
      padding: 0 var(--space-5);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    @media (min-width: 768px) { .pillar-related__grid { grid-template-columns: repeat(3, 1fr); padding: 0 var(--space-7); } }
    .pillar-related__card {
      padding: var(--space-6);
      background: var(--color-surface-elevated);
      border: var(--border-thin);
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      color: inherit;
      text-decoration: none;
      transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
    }
    .pillar-related__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
    .pillar-related__num {
      font-family: var(--font-sans);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange-deep);
      font-weight: var(--weight-semibold);
    }
    .pillar-related__title {
      font-family: var(--font-serif);
      font-size: var(--text-xl);
      font-weight: var(--weight-semibold);
      color: var(--color-ink);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .pillar-related__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; flex: 1; }
    .pillar-related__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-brand-navy); margin-top: var(--space-2); }
    .pillar-related__card:hover .pillar-related__link { color: var(--color-brand-orange-deep); }

    /* ============================================================
       Deep-dive expand block — keeps the chapter lean visually while
       preserving full content in the DOM for SEO + AEO indexing.
       Uses native <details>/<summary> so it ports cleanly to WordPress
       Gutenberg (Details block) and works with no JS.
       ============================================================ */
    .pillar-expand {
      margin: var(--space-6) 0 0;
      border-top: 1px dashed var(--color-hairline-strong);
      padding-top: var(--space-5);
    }
    .pillar-expand > summary {
      list-style: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-brand-orange-deep);
      padding: var(--space-2) 0;
      transition: color var(--duration-fast) var(--ease-out);
    }
    .pillar-expand > summary::-webkit-details-marker { display: none; }
    .pillar-expand > summary::before {
      content: "";
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      background: currentColor;
      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/contain no-repeat;
      transition: transform 280ms cubic-bezier(.2,.7,.2,1);
    }
    .pillar-expand[open] > summary::before { transform: rotate(180deg); }
    .pillar-expand > summary:hover { color: var(--color-brand-orange); }
    .pillar-expand__body {
      padding-top: var(--space-5);
      animation: pillar-expand-in 360ms cubic-bezier(.2,.7,.2,1);
    }
    .pillar-expand__body > :first-child { margin-top: 0; }
    .pillar-expand__body h3 { margin-top: var(--space-6); }
    @keyframes pillar-expand-in {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .pillar-expand__body { animation: none; }
      .pillar-expand > summary::before { transition: none; }
    }