* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* handyai.news is dark-only. The [data-theme="dark"] attribute on <html>
       is retained so existing scoped rules (e.g. model cards, research
       callouts) keep working, but :root itself owns the palette. */
    :root {
      --primary: #E6E6DE;
      --background: #003F2E;
      --text: #E6E6DE;
      --text-secondary: #b8b8b0;
      --card-bg: #00543d;
      --shadow: rgba(0, 0, 0, 0.3);
      /* Brand dark green used for scrims / overlays. Never fade to black; always
         fade toward the background tone so cards feel at home on the page. */
      --brand-green-deep: #003F2E;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
      background: var(--background);
      color: var(--text);
      line-height: 1.6;
    }

    h1, h2, h3, h4, h5, h6, .card-title {
      font-family: 'Outfit', sans-serif;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    body.article-page .container {
      max-width: 900px;
    }

    /* Visually hidden but accessible to assistive tech and AI crawlers.
       Used for skip-link landing target, card descriptions in the SSR
       feed, and form labels. Keeps the visual design unchanged while
       making the page rich for screen readers and structured-data parsers. */
    .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;
    }

    /* Comment-form honeypot: off screen, out of the tab order, hidden from
       screen readers. Only bots that fill every field ever touch it. */
    .comment-hp {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    /* Skip link, visible only when focused. Keyboard users can press Tab
       once on page load to jump past the header straight to the main
       content. Required for WCAG 2.4.1 (Bypass Blocks) and a documented
       E-E-A-T quality signal. */
    .skip-link {
      position: absolute;
      top: -100px;
      left: 16px;
      z-index: 1000;
      background: var(--primary);
      color: var(--background);
      padding: 12px 18px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      box-shadow: 0 4px 18px var(--shadow);
      transition: top 0.18s ease;
    }

    .skip-link:focus {
      top: 16px;
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }

    /* ------------------------------------------------------------ Feed --
       The site chrome (header, tab bar, footer, glass material, tokens)
       lives in /ui/shell.css. Below is the homepage: a masthead, the lead
       story, the Ask panel, then the rest of the archive. */

    .feed-masthead {
      margin: 6px 0 22px;
    }

    .masthead-date {
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--mint);
      margin-bottom: 6px;
      min-height: 1em;
    }

    .masthead-title {
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }

    .news-feed {
      display: grid;
      gap: 28px;
      padding-bottom: 40px;
    }

    /* Cards: a calm surface with the same rim light as the glass, but no
       blur, so a long feed scrolls for free. The picture sits in an inset
       well, which keeps each illustration on its own green field. */
    .card {
      position: relative;
      display: block;
      isolation: isolate;
      color: inherit;
      text-decoration: none;
      border-radius: var(--r-lg, 24px);
      overflow: hidden;
      cursor: pointer;
      background:
        radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 45%),
        linear-gradient(180deg, rgba(230, 230, 222, 0.07), rgba(230, 230, 222, 0.035));
      box-shadow: 0 12px 34px rgba(0, 16, 11, 0.22);
      transition: transform 0.5s var(--ease-spring, ease), box-shadow 0.35s ease;
    }

    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      padding: 1px;
      background: var(--rim-soft);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 50px rgba(0, 16, 11, 0.34);
      }

      .card:hover::before { background: var(--rim); }
    }

    .card:active {
      transform: scale(0.985);
      transition-duration: 0.18s;
    }

    .card:focus-visible {
      outline: 2px solid var(--mint);
      outline-offset: 3px;
    }

    .card-image {
      display: block;
      width: calc(100% - 16px);
      height: 228px;
      margin: 8px 8px 0;
      object-fit: cover;
      border-radius: 18px;
      background: var(--background);
    }

    .card-content {
      padding: 18px 22px 22px;
    }

    .card-date {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      color: var(--text-secondary);
      font-size: 13.5px;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    .card-title {
      font-size: 21px;
      font-weight: 600;
      line-height: 1.26;
      letter-spacing: -0.005em;
      color: var(--text);
      text-wrap: pretty;
    }

    .card-type-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Outfit', sans-serif;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      line-height: 1;
      color: var(--mint);
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(143, 227, 185, 0.1);
      box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.22);
    }

    .card-comment-count {
      opacity: 0.8;
    }

    /* Lead story. Words on the left, the picture in a large well on the
       right; on phones it stacks. */
    .card.featured {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      min-height: 440px;
      border-radius: var(--r-xl, 30px);
      background:
        radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
        radial-gradient(90% 120% at 0% 0%, rgba(143, 227, 185, 0.09), rgba(143, 227, 185, 0) 60%),
        linear-gradient(135deg, rgba(230, 230, 222, 0.08), rgba(230, 230, 222, 0.03) 60%);
    }

    .card.featured .card-image {
      order: 2;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      min-height: 0;
      margin: 10px;
      border-radius: 22px;
    }

    .card.featured .card-content {
      order: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px 28px 48px 48px;
    }

    .card.featured .card-date {
      font-size: 14.5px;
      margin-bottom: 16px;
    }

    .card.featured .card-title {
      font-size: clamp(34px, 3.5vw, 50px);
      line-height: 1.06;
      letter-spacing: -0.022em;
      text-wrap: balance;
    }

    .card-cta {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      height: 46px;
      margin-top: 30px;
      padding: 0 18px 0 22px;
      border-radius: 999px;
      background: var(--primary);
      color: var(--background);
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      font-weight: 600;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 10px 26px rgba(0, 16, 11, 0.32);
      transition: gap 0.3s var(--ease-out, ease);
    }

    .card-cta svg {
      width: 17px;
      height: 17px;
    }

    .card.featured:hover .card-cta { gap: 12px; }

    /* "Latest" chip on the lead story, a small piece of glass over the picture. */
    .latest-badge {
      position: absolute;
      top: 24px;
      right: 24px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      padding: 8px 13px;
      border-radius: 999px;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
      color: var(--text);
      background: rgba(6, 70, 52, 0.45);
      -webkit-backdrop-filter: blur(14px) saturate(1.6);
              backdrop-filter: blur(14px) saturate(1.6);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 18px rgba(0, 16, 11, 0.3);
    }

    /* Filter row above the archive: a segmented lens (styles in shell.css).
       Phones filter from the tab bar instead and get a plain heading. */
    .feed-head {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px 0 2px;
    }

    .feed-heading {
      display: none;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .feed-count {
      color: var(--text-secondary);
      font-weight: 500;
      margin-left: 6px;
    }

    .post-type-toggle .post-type-toggle-count {
      font-weight: 500;
      opacity: 0.55;
      margin-left: 2px;
    }

    .post-type-toggle .active .post-type-toggle-count { opacity: 0.8; }

    .regular-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 22px;
    }

    @media (max-width: 720px) {
      .container {
        padding: 0 16px;
      }

      .feed-masthead { margin: 2px 4px 18px; }
      .masthead-date { font-size: 12px; }
      .masthead-title { font-size: 34px; }

      .news-feed { gap: 22px; }

      .card.featured {
        display: block;
        min-height: 0;
        border-radius: 28px;
      }

      .card.featured .card-image {
        width: calc(100% - 16px);
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 8px 8px 0;
        border-radius: 21px;
      }

      .card.featured .card-content { padding: 16px 20px 22px; }
      .card.featured .card-date { font-size: 13px; margin-bottom: 10px; }
      .card.featured .card-title { font-size: 28px; line-height: 1.1; }
      .card-cta { display: none; }
      .latest-badge { top: 18px; right: 18px; padding: 7px 11px; font-size: 11px; }

      .feed-head {
        justify-content: flex-start;
        margin: 6px 4px -8px;
      }

      .feed-heading { display: block; }
      .post-type-toggle { display: none; }

      /* The archive becomes a list of rows, the way a news app shows
         everything after the lead: headline first, a thumbnail beside it. */
      .regular-cards {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .regular-cards .card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 116px;
        align-items: center;
        min-height: 108px;
        padding: 8px;
        border-radius: 22px;
        box-shadow: 0 6px 18px rgba(0, 16, 11, 0.16);
      }

      .regular-cards .card-image {
        order: 2;
        width: 116px;
        height: 92px;
        margin: 0;
        border-radius: 15px;
      }

      .regular-cards .card-content {
        order: 1;
        padding: 6px 12px 6px 10px;
      }

      .regular-cards .card-date {
        font-size: 12px;
        gap: 4px 8px;
        margin-bottom: 6px;
      }

      .regular-cards .card-title {
        font-size: 16.5px;
        line-height: 1.28;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .regular-cards .card-type-tag {
        font-size: 9.5px;
        padding: 4px 7px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .card,
      .card-cta { transition: none; }
    }

    /* Substack Subscribe Section.
       margin-bottom keeps breathing room between the subscribe form and the
       post-type toggle (or the grid, when no toggle is rendered). */
    .substack-subscribe {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 10px 0 5px 0;
      margin-bottom: 24px;
    }

    .substack-subscribe p {
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      color: var(--text-secondary);
      margin: 0;
      font-weight: 500;
      white-space: nowrap;
    }

    /* Inline error shown by the client subscribe handler on failure. Kept
       minimal so the row stays clean; flex-basis pushes it onto its own line. */
    .subscribe-error {
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      color: #ffd2cc;
      margin: 8px 0 0;
      flex-basis: 100%;
      text-align: center;
    }

    .feed-section-header {
      margin: 36px 0 16px 0;
      padding: 0;
    }

    .feed-section-header h2 {
      font-family: 'Outfit', sans-serif;
      font-size: 22px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.2px;
      margin: 0;
    }

    .feed-section-count {
      color: var(--text-secondary);
      font-weight: 500;
      margin-left: 4px;
    }

    .substack-subscribe-form {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .substack-subscribe-form input[type="email"] {
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid rgba(230, 230, 222, 0.22);
      border-radius: 999px;
      font-size: 14px;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
      background: var(--card-bg);
      color: var(--text);
      transition: all 0.2s ease;
      width: 220px;
      max-width: 100%;
    }

    .substack-subscribe-form input[type="email"]:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px var(--shadow);
    }

    .substack-subscribe-form input[type="email"]::placeholder {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .substack-subscribe-form button {
      min-height: 44px;
      padding: 0 22px;
      background: var(--primary);
      color: var(--background);
      border: none;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    }

    .substack-subscribe-form button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px var(--shadow);
    }

    .substack-subscribe-form button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .subscribe-success {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      background: var(--primary);
      color: var(--background);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Outfit', sans-serif;
      animation: successFadeIn 0.4s ease;
    }

    @keyframes successFadeIn {
      0% {
        opacity: 0;
        transform: scale(0.9);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Feed View */
    .feed-view {
      display: none;
      animation: fadeIn 0.3s ease;
    }

    .feed-view.active {
      display: block;
    }

    /* Article View */
    .article-view {
      display: none;
      animation: fadeIn 0.3s ease;
    }

    .article-view.active {
      display: block;
    }

    .article-actions {
      margin-bottom: 20px;
    }

    .action-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
      padding: 10px 20px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.2s ease;
      text-decoration: none;
    }

    .action-button:hover {
      background: var(--primary);
      color: var(--background);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px var(--shadow);
    }

    .action-button svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
    }

    .icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: rgba(230, 230, 222, 0.07);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.09);
      color: var(--text-secondary);
      border: none;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.2s ease, color 0.2s ease, scale 0.35s var(--ease-spring, ease), opacity 0.3s ease, transform 0.3s ease;
      text-decoration: none;
      padding: 0;
      border-radius: 50%;
      position: relative;
    }

    .icon-button:hover {
      color: var(--primary);
      background: rgba(230, 230, 222, 0.14);
    }

    .icon-button:active { scale: 0.92; }

    .icon-button svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    .icon-button .tooltip {
      position: absolute;
      bottom: -34px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: var(--background);
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: normal;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      text-decoration: none;
    }

    .icon-button:hover .tooltip {
      opacity: 1;
    }

    /* Copy button animation.
       The copy button stacks two SVGs, a clipboard and a checkmark, on top
       of each other inside .icon-swap. On successful copy we add
       .copy-button.copied to the button, which fades/scales out the clipboard
       and fades/scales in the checkmark (with a subtle color pulse). The
       transient "Copied!" tooltip and a 1-tick CSS pulse on the button itself
       give immediate visual feedback even at fast click rates. */
    .copy-button .icon-swap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
    }

    .copy-button .icon-swap svg {
      position: absolute;
      inset: 0;
      margin: auto;
      transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .copy-button .icon-clipboard {
      opacity: 1;
      transform: scale(1) rotate(0);
    }

    .copy-button .icon-check {
      opacity: 0;
      transform: scale(0.4) rotate(-12deg);
      color: #2ecc71;
    }

    .copy-button.copied .icon-clipboard {
      opacity: 0;
      transform: scale(0.6) rotate(8deg);
    }

    .copy-button.copied .icon-check {
      opacity: 1;
      transform: scale(1) rotate(0);
    }

    .copy-button.copied {
      animation: copyPulse 0.5s ease;
    }

    @keyframes copyPulse {
      0% {
        transform: scale(1);
      }
      40% {
        transform: scale(1.12);
      }
      100% {
        transform: scale(1);
      }
    }

    /* Pin the tooltip visible while the button is in the "copied" state so
       the feedback is legible even if the cursor has moved away. */
    .copy-button.copied .tooltip {
      opacity: 1;
    }

    /* Ensure link icon buttons match button icon buttons exactly */
    a.icon-button {
      text-decoration: none;
    }

    a.icon-button:visited {
      color: var(--text-secondary);
    }

    a.icon-button:hover {
      color: var(--primary);
      background: var(--shadow);
    }

    .article-actions-inline {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Share button and social media icons */
    .share-container {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .share-button {
      transition: all 0.3s ease;
    }

    .share-button.expanded {
      opacity: 0;
      transform: scale(0);
      pointer-events: none;
    }

    .social-icons {
      display: flex;
      gap: 8px;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transform: scale(0);
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .social-icons.expanded {
      opacity: 1;
      transform: scale(1);
      pointer-events: all;
      position: absolute;
    }

    .social-icon {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: rgba(230, 230, 222, 0.07);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.09);
      color: var(--text-secondary);
      border: none;
      cursor: pointer;
      padding: 0;
      border-radius: 50%;
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
      text-decoration: none;
      animation: slideIn 0.3s ease forwards;
    }

    .social-icon:nth-child(1) {
      animation-delay: 0.05s;
    }

    .social-icon:nth-child(2) {
      animation-delay: 0.1s;
    }

    .social-icon:nth-child(3) {
      animation-delay: 0.15s;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(-10px) scale(0.8);
      }
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    .social-icon:hover {
      color: var(--primary);
      background: rgba(230, 230, 222, 0.14);
      transform: translateY(-2px);
    }

    .social-icon svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    .social-icon .tooltip {
      position: absolute;
      bottom: -34px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: var(--background);
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: normal;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .social-icon:hover .tooltip {
      opacity: 1;
    }

    .article-header-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
      align-items: start;
    }

    .article-header {
      padding-top: 20px;
    }

    .article-title {
      font-size: 44px;
      font-weight: 600;
      margin-bottom: 20px;
      line-height: 1.12;
      letter-spacing: -0.02em;
      text-wrap: balance;
    }

    .article-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px;
    }

    .article-date {
      color: var(--text-secondary);
      font-size: 18px;
    }

    .article-link {
      color: var(--text-secondary);
      font-size: 16px;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .article-link:hover {
      color: var(--primary);
    }

    .article-meta-separator {
      color: var(--text-secondary);
      font-size: 16px;
    }

    .article-image {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 24px;
      outline: 1px solid rgba(255, 255, 255, 0.1);
      outline-offset: -1px;
      box-shadow: 0 16px 44px rgba(0, 16, 11, 0.34);
      background: var(--card-bg);
    }

    .article-image-mobile {
      display: none;
    }

    /* The "Model Drop" label above the title is only shown on the centered
       Model Drop header; weekly updates hide it entirely. */
    .article-type-label {
      display: none;
    }

    /* Centered announcement-style header for Model Drop posts. The titles on
       these are short (just the model name), so the side-by-side layout we
       use for weekly updates leaves too much whitespace. This stacks the
       image, tag, title, and meta in a single centered column. */
    .article-header-wrapper.model-drop-header {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 28px;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 48px;
    }

    .model-drop-header > .article-image {
      order: 1;
      width: 100%;
      max-width: 560px;
      height: auto;
      max-height: 440px;
      aspect-ratio: 3 / 2;
    }

    .model-drop-header .article-header {
      order: 2;
      padding-top: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: 100%;
    }

    .model-drop-header .article-type-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--mint, #8fe3b9);
      background: rgba(143, 227, 185, 0.1);
      box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.24);
      padding: 6px 14px;
      border-radius: 999px;
      margin: 0;
    }

    .model-drop-header .article-type-label .hai-mark { height: 1.45em; }

    .model-drop-header .article-title {
      font-size: 64px;
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin: 0;
      text-align: center;
    }

    .model-drop-header .article-meta {
      justify-content: center;
      margin: 0;
      gap: 14px;
    }

    .model-drop-header .article-date {
      font-size: 17px;
    }

    /* The mobile-only inline image is redundant when the desktop image is
       already stacked on top. */
    .model-drop-header .article-image-mobile {
      display: none !important;
    }

    .article-content {
      font-size: 18px;
      line-height: 1.8;
      color: var(--text);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .article-content img {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
      margin: 20px 0;
    }

    /* Hide Substack UI elements in article content */
    .article-content .image-link-expand,
    .article-content .image2,
    .article-content [class*="expand"],
    .article-content [class*="button"]:not(.action-button):not(.more-news-button),
    .article-content .button-wrapper,
    .article-content .captioned-image-container + p:has(em),
    .article-content figure + p:has(em),
    .article-content img + p:has(em) {
      display: none !important;
    }
    
    /* Hide promotional italic paragraphs after images. Quoted comments are
       italic-only paragraphs too, so anything inside a blockquote is exempt. */
    .article-content p:not(blockquote p):has(> em:only-child),
    .article-content p:not(blockquote p):has(> em > strong) {
      display: none !important;
    }

    /* Substack YouTube embeds and tweet cards: centered, rounded, same width */
    .article-content .youtube-wrap {
      max-width: 560px;
      margin: 28px auto;
    }

    .article-content .youtube-inner {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px var(--shadow);
      background: #000;
    }

    .article-content .youtube-inner iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .article-content .twitter-embed:empty {
      display: none;
    }

    .article-content .tweet-card {
      max-width: 560px;
      margin: 28px auto;
      padding: 16px 20px;
      background: var(--card-bg);
      border-radius: 12px;
      box-shadow: 0 2px 10px var(--shadow);
      font-size: 16px;
      line-height: 1.55;
    }

    .article-content .tweet-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .article-content .tweet-card-head img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin: 0;
    }

    .article-content .tweet-card-name {
      font-weight: 600;
      line-height: 1.2;
    }

    .article-content .tweet-card-handle,
    .article-content .tweet-card-foot {
      color: var(--text-secondary);
      font-size: 14px;
    }

    .article-content .tweet-card-text {
      white-space: pre-line;
      margin: 0 0 10px 0;
    }

    .article-content .tweet-card-photo {
      display: block;
      width: 100%;
      margin: 0 0 10px 0;
    }

    .article-content .tweet-card-foot a {
      color: var(--text-secondary);
    }

    .article-content p {
      margin-bottom: 20px;
    }

    .article-content h2.content-h1 {
      font-size: 2em;
    }

    .article-content h1,
    .article-content h2,
    .article-content h3 {
      margin-top: 30px;
      margin-bottom: 15px;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
    }

    .article-content a {
      color: var(--primary);
      text-decoration: none;
      transition: all 0.2s ease;
    }

    /* Style "Read more" links as simple domain buttons with icon */
    .article-content a[href*="http"]:not(.research-link):not(.no-transform) {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1.5px solid var(--primary);
      border-radius: 3px;
      font-size: 11px;
      font-weight: 600;
      margin: 2px 0;
      padding: 3px 8px;
      line-height: 1.2;
      text-decoration: none;
      color: var(--primary);
      background: transparent;
      transition: all 0.2s ease;
      opacity: 0.4;
    }

    .article-content a[href*="http"]:not(.research-link):not(.no-transform) svg {
      width: 10px;
      height: 10px;
      flex-shrink: 0;
    }

    .article-content a[href*="http"]:not(.research-link):not(.no-transform):hover {
      opacity: 1;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px var(--shadow);
    }

    /* AI Research of the Week: a card in the same material as the other
       article cards, with a seeded data graphic fading in at the top. */
    .research-callout {
      position: relative;
      isolation: isolate;
      margin: 44px 0;
      padding: 0;
      border-radius: 24px;
      overflow: hidden;
      color: var(--text);
      background:
        radial-gradient(120% 60% at 18% 0%, rgba(143, 227, 185, 0.09), rgba(143, 227, 185, 0) 60%),
        linear-gradient(180deg, rgba(230, 230, 222, 0.075), rgba(230, 230, 222, 0.035));
      box-shadow: 0 14px 40px rgba(0, 16, 11, 0.24);
    }

    .research-callout::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      padding: 1px;
      background: var(--rim-soft, rgba(255, 255, 255, 0.12));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }

    /* Hide all HR tags in article content */
    .article-content hr {
      display: none;
    }

    .research-figure {
      position: relative;
      height: clamp(118px, 26vw, 214px);
      -webkit-mask: linear-gradient(to bottom, #000 66%, transparent);
              mask: linear-gradient(to bottom, #000 66%, transparent);
    }

    .research-figure svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* Drawn once on view: lines sweep left to right, the runs land along
       them, then the called-out result pulses. */
    .research-figure .rf-line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 1.6s cubic-bezier(0.32, 0.72, 0, 1) var(--d, 0s);
    }
    .research-figure .rf-pt,
    .research-figure .rf-band {
      opacity: 0;
      transition: opacity 0.6s ease var(--d, 0.4s);
    }
    .research-figure .rf-ring {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
    }
    .research-figure.is-in .rf-line { stroke-dashoffset: 0; }
    .research-figure.is-in .rf-pt,
    .research-figure.is-in .rf-band { opacity: 1; }
    .research-figure.is-in .rf-ring { animation: rf-ring 2.8s ease-out 1.7s infinite; }

    @keyframes rf-ring {
      0% { opacity: 0.7; transform: scale(0.6); }
      70%, 100% { opacity: 0; transform: scale(1.9); }
    }

    @media (prefers-reduced-motion: reduce) {
      .research-figure .rf-line,
      .research-figure .rf-pt,
      .research-figure .rf-band { transition: none; }
      .research-figure.is-in .rf-ring { animation: none; opacity: 0.5; }
    }

    .research-content {
      position: relative;
      z-index: 1;
      margin-top: -22px;
      padding: 0 30px 28px;
    }

    .article-content .research-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      padding: 0;
      border: 0;
      font: 600 12.5px/1 'Outfit', sans-serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--mint, #8fe3b9);
    }

    .research-title svg {
      width: 17px;
      height: 17px;
      flex: none;
    }

    .research-callout p {
      margin: 0 0 12px;
      line-height: 1.65;
      color: var(--text);
      font-size: 16.5px;
    }

    .research-callout p:last-child {
      margin-bottom: 0;
    }

    .research-callout .research-paper {
      margin: 0 0 18px;
    }

    .research-callout .research-paper br { display: none; }

    .research-callout .research-paper a {
      text-decoration-color: rgba(143, 227, 185, 0.32);
      text-underline-offset: 6px;
      font-family: 'Outfit', sans-serif;
      font-size: 24px;
      font-weight: 600;
      line-height: 1.28;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    .research-callout .research-paper em {
      display: block;
      margin-top: 8px;
      font-style: normal;
      font-size: 14.5px;
      color: var(--text-secondary);
    }

    .research-callout ul,
    .research-callout ol {
      margin: 0 0 12px;
      padding-left: 22px;
    }

    .research-callout li { margin: 0 0 6px; }
    .research-callout li p { margin: 0; }
    .research-callout li::marker { color: var(--mint, #8fe3b9); }

    .research-callout a {
      color: var(--text) !important;
      background: transparent !important;
      padding: 0 !important;
      border-bottom: 0;
      font-weight: 500;
      text-decoration: underline;
      text-decoration-color: rgba(143, 227, 185, 0.5);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 4px;
      transition: text-decoration-color 0.2s ease;
    }

    .research-callout a:hover {
      text-decoration-color: var(--mint, #8fe3b9);
      transform: none !important;
    }

    /* "Model card" callout for Model Drop posts.
       Transformed in JS from Substack's <div class="callout-block" data-callout="true">
       that lives near the top of every Model Drop article. */
    .article-content .model-card {
      background: #f5f5f0;
      border-radius: 24px;
      padding: 28px 32px 24px 32px;
      margin: 28px 0 32px 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(230, 230, 222, 0.1), 0 12px 34px rgba(0, 16, 11, 0.26);
      position: relative;
    }

    [data-theme="dark"] .article-content .model-card {
      background: #00543d;
    }

    .article-content .model-card::before {
      content: 'Model Card';
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--primary);
      opacity: 0.55;
      margin-bottom: 14px;
    }

    .article-content .model-card p {
      margin: 0;
      padding: 10px 0;
      font-size: 15px;
      line-height: 1.5;
      color: var(--text);
      border-bottom: 1px solid rgba(0, 63, 46, 0.12);
    }

    [data-theme="dark"] .article-content .model-card p {
      border-bottom-color: rgba(230, 230, 222, 0.15);
    }

    /* :last-of-type (not :last-child) so the rule still matches the final
       <p> when the card ends with a .model-card-footer anchor sibling. */
    .article-content .model-card p:last-of-type {
      border-bottom: none;
      padding-bottom: 0;
    }

    .article-content .model-card strong {
      color: var(--primary);
      font-weight: 600;
      margin-right: 4px;
    }

    /* Keep anchor styling inside the model card consistent with .research-callout
       instead of the "domain chip" treatment used elsewhere. */
    .article-content .model-card a {
      color: var(--primary) !important;
      background: transparent !important;
      padding: 0 !important;
      border: none !important;
      border-bottom: 1.5px solid var(--primary);
      text-decoration: none;
      transition: all 0.2s ease;
      font-weight: 500;
      opacity: 1 !important;
    }

    .article-content .model-card a svg {
      display: none;
    }

    .article-content .model-card a:hover {
      opacity: 0.85 !important;
      transform: none !important;
      box-shadow: none !important;
    }

    /* Darker, full-width footer that lives at the bottom of the Model Card.
       promoteMoreDetailsFooter() transforms a trailing "More details: <link>"
       paragraph into this block-level anchor so the entire region is a single
       clickable CTA. Negative margins cancel the card's inner padding so the
       footer stretches flush to the card edges; the bottom border-radius
       matches the card's 16px corners.
       !important is used on background/padding because the generic
       ".article-content .model-card a" rule above already marks those
       properties as !important and would otherwise override us. */
    .article-content .model-card .model-card-footer {
      display: block;
      margin: 22px -32px -24px -32px;
      padding: 18px 28px !important;
      text-align: center;
      background: var(--primary) !important;
      color: var(--background) !important;
      border: none !important;
      border-radius: 0 0 16px 16px;
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.3px;
      text-decoration: none;
      opacity: 1 !important;
      cursor: pointer;
      transition: background 0.25s ease, transform 0.2s ease,
                  box-shadow 0.25s ease, letter-spacing 0.25s ease;
    }

    [data-theme="dark"] .article-content .model-card .model-card-footer {
      background: #002318 !important;
      color: var(--primary) !important;
    }

    /* A "Read more" row with several links (Substack writes "Blog · Model
       card") becomes a bar of links instead of one big link. */
    .article-content .model-card div.model-card-footer { cursor: default; }
    .article-content .model-card .model-card-footer a {
      color: inherit !important;
      border-bottom: 1px solid currentColor !important;
      font-weight: 600;
    }
    .article-content .model-card .model-card-footer .model-card-footer-sep {
      margin: 0 8px;
      opacity: 0.6;
    }

    /* The original link's text (now wrapped in a span). A subtle underline
       keeps the "this is clickable" affordance without fighting the darker
       footer treatment. */
    .article-content .model-card a.model-card-footer .model-card-footer-link-text {
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }

    .article-content .model-card a.model-card-footer:hover {
      background: #0b5b43 !important;
      opacity: 1 !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 8px 20px var(--shadow) !important;
      letter-spacing: 0.5px;
    }

    [data-theme="dark"] .article-content .model-card a.model-card-footer:hover {
      background: #003b2b !important;
    }

    .article-content .model-card a.model-card-footer:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    /* ---------- Model Drop, October 2026 format ----------
       formatModelDropSections() and buildDropCard() build these from the
       Substack post: the tiled card, the benchmark charts and Jake's take. */
    .article-content .model-card.drop-card { padding: 24px 24px 22px; }
    .article-content .model-card.drop-card::before { content: none; }
    .article-content .model-card.drop-card .model-card-footer { margin: 20px -24px -22px; }

    .drop-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 16px;
    }
    .drop-card-head {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 0 0 18px;
    }
    .drop-card-logo {
      flex: none;
      display: inline-grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 16px;
      color: var(--mint, #8fe3b9);
      background: rgba(143, 227, 185, 0.1);
      box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.26);
      font-size: 28px;
    }
    .drop-card-logo .maker-mark { width: 1em; height: 1em; }
    .drop-card-logo .hai-mark { height: 1.05em; }
    .drop-card-id {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }
    .drop-card-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 14px 7px 12px;
      border-radius: 999px;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--mint, #8fe3b9);
      background: rgba(143, 227, 185, 0.1);
      box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.24);
    }
    .drop-card-kicker .hai-mark { height: 1.45em; vertical-align: 0; }
    /* Outfit's capitals sit above the middle of their line box; nudge the
       pill label down so it centres against the pill and the hand. */
    .drop-card-kicker .pill-text,
    .article-type-label .pill-text { display: block; transform: translateY(0.09em); }
    .drop-card-maker { display: inline-flex; align-items: center; gap: 5px; }
    .drop-card-maker .maker-mark { width: 1.05em; height: 1.05em; vertical-align: 0; }
    .drop-card-name {
      font-family: 'Outfit', sans-serif;
      font-size: 24px;
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.3px;
      color: var(--text);
    }
    .drop-card-sub {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 6px;
      font-size: 13.5px;
      line-height: 1.4;
      color: var(--text-secondary);
      overflow-wrap: anywhere;
    }
    .article-content .model-card a.drop-card-share {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 13px !important;
      line-height: 1;
      border: 0 !important;
      border-radius: 999px;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--text) !important;
      background: rgba(230, 230, 222, 0.08) !important;
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.14);
      transition: background 0.2s ease, color 0.2s ease;
    }
    .article-content .model-card a.drop-card-share svg { display: block; width: 15px; height: 15px; }
    .article-content .model-card a.drop-card-share:hover {
      color: var(--mint, #8fe3b9) !important;
      background: rgba(143, 227, 185, 0.14) !important;
    }
    .article-content .model-card a.drop-card-share.is-busy { opacity: 0.6 !important; }
    .drop-card-actions { flex: none; display: inline-flex; gap: 6px; }
    /* Two models in one drop: a tab per model above the card's name. */
    .drop-card-switch > .drop-card[hidden] { display: none !important; }
    .drop-card-top { flex-wrap: wrap; }
    .drop-card-tabs {
      display: inline-flex;
      gap: 2px;
      margin: 0 auto 0 0;
      padding: 3px;
      border-radius: 999px;
      background: rgba(230, 230, 222, 0.06);
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.14);
      max-width: 100%;
    }
    .drop-card-tab {
      appearance: none;
      border: 0;
      margin: 0;
      padding: 5px 11px;
      border-radius: 999px;
      font-family: 'Outfit', sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.1;
      white-space: nowrap;
      color: var(--text-secondary);
      background: transparent;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .drop-card-tab:hover { color: var(--text); }
    .drop-card-tab.is-active {
      color: #0d1f17;
      background: var(--mint, #8fe3b9);
    }
    .drop-card-tab:focus-visible { outline: 2px solid var(--mint, #8fe3b9); outline-offset: 2px; }
    .article-content .model-card a.drop-card-share.is-icon { padding: 6px 7px !important; }

    .drop-stats {
      display: grid;
      grid-template-columns: 172px repeat(auto-fit, minmax(120px, 1fr));
      gap: 4px 20px;
      margin: 0 0 6px;
      padding: 14px 0;
      border-top: 1px solid rgba(230, 230, 222, 0.12);
      border-bottom: 1px solid rgba(230, 230, 222, 0.12);
    }
    .drop-stat { min-width: 0; }
    .drop-stat dt {
      margin: 0 0 3px;
      font-family: 'Outfit', sans-serif;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .drop-stat dd {
      margin: 0;
      font-size: 15px;
      line-height: 1.35;
      color: var(--text);
    }

    .drop-row {
      display: grid;
      grid-template-columns: 172px minmax(0, 1fr);
      gap: 4px 20px;
      padding: 13px 0;
      border-top: 1px solid rgba(230, 230, 222, 0.1);
    }
    .drop-row:first-child { border-top: 0; }
    .article-content .drop-row-label {
      margin: 0;
      padding: 3px 0 0;
      border: 0;
      font-family: 'Outfit', sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      color: var(--mint, #8fe3b9);
    }
    .article-content .drop-row-body p,
    .article-content .drop-row-body li {
      margin: 0 0 4px;
      padding: 0;
      border: 0;
      font-size: 15px;
      line-height: 1.5;
      color: var(--text);
    }
    .article-content .drop-row-body p:last-child,
    .article-content .drop-row-body li:last-child { margin-bottom: 0; }
    /* Bullets hang in the gap so every row's text starts on the same line
       as the stats above. */
    body.model-drop-page .article-content .drop-row-body ul,
    body.model-drop-page .article-content .drop-row-body ol { margin: 0; padding-left: 0; list-style-position: outside; }
    body.model-drop-page .article-content .drop-row-body li { margin: 0 0 4px; padding-left: 0; }
    body.model-drop-page .article-content .drop-row-body li > p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
    /* Every card bullet is drawn the same way, so a glowing comparison bullet
       sits exactly where the plain ones do. How it compares: a soft blue glow
       where the model comes out ahead, a soft red one where it falls behind. */
    body.model-drop-page .article-content .drop-row-body ul { list-style: none; }
    body.model-drop-page .article-content .drop-row-body ul > li { position: relative; }
    body.model-drop-page .article-content .drop-row-body ul > li::before {
      content: '';
      position: absolute;
      left: -15px;
      top: calc(0.75em - 3px);
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--mint, #8fe3b9);
    }
    body.model-drop-page .article-content .drop-row-body ul > li.tone-better::before {
      background: #9cc8ff;
      box-shadow: 0 0 6px 2px rgba(110, 168, 255, 0.85), 0 0 18px 6px rgba(110, 168, 255, 0.4);
    }
    body.model-drop-page .article-content .drop-row-body ul > li.tone-worse::before {
      background: #ff9b92;
      box-shadow: 0 0 6px 2px rgba(255, 128, 116, 0.75), 0 0 18px 6px rgba(255, 128, 116, 0.34);
    }

    body.model-drop-page .article-content h2[id] { scroll-margin-top: 96px; }
    body.model-drop-page .article-content a[href^="#"] {
      color: var(--text);
      text-decoration: underline;
      text-decoration-color: rgba(143, 227, 185, 0.6);
      text-underline-offset: 3px;
    }

    /* Benchmarks: one small bar chart per benchmark. */
    .drop-bench .bench-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin: 18px 0 22px;
    }
    .drop-bench .bench {
      margin: 0;
      padding: 16px 18px 15px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(230, 230, 222, 0.08), rgba(230, 230, 222, 0.045));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.1), 0 8px 24px rgba(0, 16, 11, 0.18);
      min-width: 0;
    }
    .drop-bench .bench figcaption {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 12px;
    }
    .bench-name {
      font-family: 'Outfit', sans-serif;
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text);
    }
    .bench-gloss {
      display: block;
      margin-top: 2px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      color: var(--text-secondary);
    }
    .article-content .bench-note a.bench-source {
      margin-right: 8px;
      color: var(--text-secondary);
      text-decoration: underline;
      text-underline-offset: 3px;
      border: 0;
      padding: 0;
      background: none;
    }
    .bench-score {
      flex: none;
      font-family: 'Outfit', sans-serif;
      font-size: 22px;
      font-weight: 600;
      line-height: 1;
      color: var(--mint, #8fe3b9);
      font-variant-numeric: tabular-nums;
    }
    .bench-rows { display: grid; gap: 7px; }
    .bench-row {
      display: grid;
      grid-template-columns: fit-content(11.5em) minmax(0, 1fr) 7.6em;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      line-height: 1.25;
      color: var(--text-secondary);
    }
    /* One set of columns for every row, so the tracks are the same length and
       a bar's length is its value against the others. */
    @supports (grid-template-columns: subgrid) {
      .bench-rows { grid-template-columns: fit-content(11.5em) minmax(0, 1fr) auto; column-gap: 10px; }
      .bench-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
    }
    .bench-row.is-self { color: var(--text); font-weight: 600; }
    .bench-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bench-effort { margin-left: 6px; font-size: 0.78em; font-weight: 500; letter-spacing: 0.01em; color: var(--text-secondary); opacity: 0.8; }
    .bench-label .maker-mark { width: 1.05em; height: 1.05em; margin-right: 6px; vertical-align: -0.17em; opacity: 0.85; }
    .bench-track {
      position: relative;
      height: 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--text) 9%, transparent);
      overflow: hidden;
    }
    .bench-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--w);
      border-radius: inherit;
      background: color-mix(in srgb, var(--text) 38%, transparent);
      transform-origin: left center;
    }
    .bench-row.is-self .bench-fill { background: var(--mint, #8fe3b9); }
    .bench.has-siblings .bench-row[role="button"] { cursor: pointer; border-radius: 6px; }
    .bench.has-siblings .bench-row[role="button"]:focus-visible { outline: 2px solid var(--mint, #8fe3b9); outline-offset: 2px; }
    .bench.has-siblings .bench-row.is-anchor .bench-label { text-decoration: underline; text-decoration-color: var(--mint, #8fe3b9); text-decoration-thickness: 2px; text-underline-offset: 3px; }
    .bench-val {
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }
    .bench-delta {
      display: inline-block;
      margin-left: 6px;
      min-width: 3.2em;
      font-size: 11px;
      font-weight: 600;
      text-align: right;
    }
    .bench-delta.is-ahead { color: var(--mint, #8fe3b9); }
    .bench-delta.is-behind { color: var(--text-secondary); opacity: 0.85; }
    .article-content .bench-note {
      margin: 10px 0 0;
      font-size: 12.5px;
      line-height: 1.45;
      color: var(--text-secondary);
    }
    .drop-bench .bench-extra { margin-top: 0; }
    .article-content .drop-bench-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin: 30px 0 15px;
    }
    .article-content .drop-bench-head h2 { margin: 0 !important; }
    .article-content .drop-bench-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .article-content button.bench-share,
    .article-content a.bench-all {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      padding: 7px 14px;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      color: var(--text);
      background: rgba(230, 230, 222, 0.08);
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.14);
      transition: background 0.2s ease, color 0.2s ease;
    }
    .article-content a.bench-all { text-decoration: none; }
    .article-content button.bench-share svg,
    .article-content a.bench-all svg { display: block; width: 15px; height: 15px; }
    .article-content button.bench-share:hover,
    .article-content a.bench-all:hover { color: var(--mint, #8fe3b9); background: rgba(143, 227, 185, 0.14); }
    .article-content button.bench-share.is-busy { opacity: 0.6; }
    .article-content button.bench-share.is-icon { padding: 7px; }
    @media (prefers-reduced-motion: no-preference) {
      .bench .bench-fill { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms); }
      .bench.is-in .bench-fill { transform: scaleX(1); }
    }

    /* Site-only card under a story (renderArticleExtras): benchmark moves on
       a weekly, the maker's year on a drop. Reuses the drop chart rows. */
    .site-extra {
      margin: 34px 0 8px;
      padding: 22px 24px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(230, 230, 222, 0.07), rgba(230, 230, 222, 0.03));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(230, 230, 222, 0.1);
    }
    .site-extra a { color: inherit; }
    .extra-head { margin-bottom: 14px; }
    .extra-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 11px;
      border-radius: 999px;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--mint, #8fe3b9);
      background: rgba(143, 227, 185, 0.12);
    }
    .extra-pill .hai-mark { height: 1.1em; }
    .extra-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .extra-actions { display: flex; gap: 8px; }
    .site-extra button.extra-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 7px;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      color: var(--text);
      background: rgba(230, 230, 222, 0.08);
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.14);
      transition: background 0.2s ease, color 0.2s ease;
    }
    .site-extra button.extra-btn svg { display: block; width: 15px; height: 15px; }
    .site-extra button.extra-btn:hover,
    .site-extra button.extra-btn:focus-visible { color: var(--mint, #8fe3b9); background: rgba(143, 227, 185, 0.14); }
    .site-extra button.extra-btn.is-busy { opacity: 0.6; }
    .extra-pill .maker-mark { width: 1.1em; height: 1.1em; }
    .extra-weights { display: inline-flex; gap: 2px; margin: 14px 0 0; padding: 3px; border-radius: 999px; background: rgba(230, 230, 222, 0.06); box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.08); }
    .site-extra button.extra-toggle {
      margin: 0;
      padding: 6px 12px;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      font: 500 12.5px/1 'Outfit', sans-serif;
      color: var(--text-secondary);
      background: transparent;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .site-extra button.extra-toggle[aria-pressed="true"] { color: var(--mint, #8fe3b9); background: rgba(143, 227, 185, 0.14); box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.28); }
    .extra-variant[hidden] { display: none; }
    .site-extra h2 {
      margin: 16px 0 0;
      font-size: 24px;
      line-height: 1.2;
    }
    .extra-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
    .extra-head .extra-sub { margin-top: 6px; }
    .extra-h3 {
      margin: 18px 0 10px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .extra-drops { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .extra-drops li { margin: 0; padding: 0; }
    .extra-drops li::before { content: none !important; }
    .extra-drops a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      background: rgba(230, 230, 222, 0.07);
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.12);
      transition: background 0.2s ease, color 0.2s ease;
    }
    .extra-drops a:hover { color: var(--mint, #8fe3b9); background: rgba(143, 227, 185, 0.14); }
    .extra-drops .maker-mark { width: 1.05em; height: 1.05em; opacity: 0.85; }
    .extra-drops time { font-weight: 400; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
    .extra-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .site-extra .bench {
      margin: 0;
      padding: 14px 16px 12px;
      border-radius: 18px;
      background: rgba(230, 230, 222, 0.05);
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.09);
      min-width: 0;
    }
    .site-extra .bench figcaption {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 10px;
    }
    .site-extra a.bench-name { text-decoration: none; }
    .site-extra a.bench-name:hover { color: var(--mint, #8fe3b9); }
    .site-extra .bench-label a { text-decoration: none; }
    .site-extra .bench-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .extra-gain {
      flex: none;
      font-family: 'Outfit', sans-serif;
      font-size: 17px;
      font-weight: 600;
      line-height: 1;
      color: var(--mint, #8fe3b9);
      font-variant-numeric: tabular-nums;
    }
    .extra-unit { font-size: 12px; color: var(--text-secondary); }
    .extra-move-note { margin: 9px 0 0; font-size: 12px; color: var(--text-secondary); }
    /* No scroll-in grow here: the drop charts' observer never sees these. */
    .site-extra .bench .bench-fill { transform: none !important; transition: none; }
    .extra-track-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px 32px; align-items: start; }
    .extra-rank {
      display: inline-block;
      min-width: 1.6em;
      margin-right: 4px;
      font-variant-numeric: tabular-nums;
      color: var(--text-secondary);
      font-weight: 500;
    }
    .extra-weigh .bench-row.has-gap { margin-top: 10px; }
    .extra-weigh .bench-row.is-current .bench-label { color: var(--mint, #8fe3b9); }
    /* The maker card: two open columns with matching headings, no inner box. */
    .maker-track .extra-sub { margin: 0 0 20px; }
    .maker-track .bench { padding: 0; background: none; box-shadow: none; border-radius: 0; }
    .maker-track .bench figcaption { margin: 0 0 10px; }
    .maker-track .bench figcaption .bench-name,
    .maker-track .extra-unit {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .maker-track .extra-unit { font-weight: 500; letter-spacing: 0.04em; }
    .maker-track .extra-timeline h3 { margin: 0 0 10px; line-height: 1.3; }
    .maker-track .extra-timeline li:first-child { padding-top: 0; }
    .maker-track .extra-track-grid { gap: 24px 40px; }
    .site-extra .extra-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(230, 230, 222, 0.08); }
    .extra-timeline ol { margin: 0; padding: 0; list-style: none; }
    /* One set of columns for every row, so the model names line up. */
    @supports (grid-template-columns: subgrid) {
      .extra-timeline ol { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: 12px; }
      .extra-timeline li { grid-column: 1 / -1; grid-template-columns: subgrid; }
    }
    .extra-timeline li {
      display: grid;
      grid-template-columns: 7.3em minmax(0, 1fr) auto;
      gap: 10px;
      align-items: baseline;
      margin: 0;
      padding: 7px 0;
      border-top: 1px solid rgba(230, 230, 222, 0.08);
      font-size: 13px;
      line-height: 1.3;
    }
    .extra-timeline li::before { content: none !important; }
    .extra-timeline li:first-child { border-top: 0; }
    .extra-timeline time { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .extra-timeline a { font-weight: 600; text-decoration: none; }
    .extra-timeline a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .extra-timeline li.is-current a { color: var(--mint, #8fe3b9); }
    .extra-place { color: var(--text-secondary); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .extra-foot { margin: 16px 0 0; font-size: 13px; color: var(--text-secondary); }
    .extra-foot a { text-underline-offset: 3px; }
    @media (max-width: 720px) {
      .site-extra { padding: 18px 16px; border-radius: 20px; }
      .site-extra h2 { font-size: 21px; }
      .extra-moves, .extra-track-grid { grid-template-columns: minmax(0, 1fr); }
    }

    /* Jake's take: the post's verdict, set apart from the reporting. */
    .article-content .drop-take {
      margin: 36px 0 12px;
      padding: 22px 24px 20px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(143, 227, 185, 0.11), rgba(143, 227, 185, 0.04));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(143, 227, 185, 0.22);
    }
    .article-content .drop-take h2 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 0 !important;
    }
    .drop-take-mark { width: 18px; height: 28px; color: var(--mint, #8fe3b9); flex: none; }
    .article-content .drop-take p:last-child { margin-bottom: 0; }

    @media (max-width: 720px) {
      .article-content .model-card.drop-card { padding: 18px 16px 18px; }
      .article-content .model-card.drop-card .model-card-footer { margin: 18px -16px -18px; }
      .drop-bench .bench-grid { grid-template-columns: minmax(0, 1fr); }
      .drop-row { grid-template-columns: minmax(0, 1fr); padding: 12px 0; }
      body.model-drop-page .article-content .drop-row-body ul,
      body.model-drop-page .article-content .drop-row-body ol { padding-left: 18px; }
      body.model-drop-page .article-content .drop-row-body li { margin-bottom: 0; padding: 5px 0; }
      body.model-drop-page .article-content .drop-row-body ul > li::before { top: calc(5px + 0.75em - 3px); }
      .drop-card-share span { display: none; }
      .article-content .model-card a.drop-card-share { padding: 7px !important; }
      .drop-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .drop-card-tabs { order: 3; flex-basis: auto; margin: 2px 0 0; }
      .drop-card-switch .drop-card-top { row-gap: 12px; }
      .bench-row { grid-template-columns: fit-content(10.5em) minmax(0, 1fr) 7.6em; }
      @supports (grid-template-columns: subgrid) {
        .bench-rows { grid-template-columns: fit-content(10.5em) minmax(0, 1fr) auto; }
        .bench-row { grid-template-columns: subgrid; }
      }
      .article-content .drop-take { padding: 18px 16px; }
    }

    /* Faded preview for second "more news" item */
    .fade-out-block {
      position: relative;
      overflow: hidden;
      max-height: 140px;
    }
    
    .more-news-gradient {
      position: relative;
      z-index: 0;
    }
    /* Fade the cut item out with a mask rather than a band of page colour,
       so it thins out evenly over the ambient light behind it. */
    .more-news-gradient {
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0, 0, 0, 0.55) calc(100% - 70px), rgba(0, 0, 0, 0.18) calc(100% - 30px), transparent);
              mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), rgba(0, 0, 0, 0.55) calc(100% - 70px), rgba(0, 0, 0, 0.18) calc(100% - 30px), transparent);
    }
    
    /* CTA under truncated list */
    .more-news-cta {
      display: flex;
      justify-content: center;
      margin: 20px 0 40px;
    }
    .more-news-button {
      margin: 0 auto;
    }

    /* Loading State */
    .loading {
      text-align: center;
      padding: 60px 20px;
      font-size: 18px;
      color: var(--text-secondary);
    }

    /* Lazy Load Sentinel */
    .lazy-load-sentinel {
      height: 20px;
      margin: 20px 0;
    }

    .loading-more {
      text-align: center;
      padding: 20px;
      font-size: 16px;
      color: var(--text-secondary);
    }

    /* Animations */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Cards that arrive after first paint (more stories, a new filter)
       rise in, a few at a time. */
    .fade-in {
      animation: fadeIn 0.45s var(--ease-out, ease-out) backwards;
    }

    @media (prefers-reduced-motion: reduce) {
      .fade-in { animation: none; }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .article-header-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
      }

      .article-meta {
        flex-wrap: wrap;
        gap: 8px;
      }

      .article-meta-separator {
        display: none;
      }

      .article-actions-inline {
        width: 100%;
        justify-content: flex-start;
      }

      .article-header {
        padding-top: 4px;
      }

      .article-title {
        font-size: 31px;
        line-height: 1.1;
        margin-bottom: 16px;
      }

      .article-header .article-image-mobile {
        display: block;
        margin: 16px 0 14px;
        border-radius: 22px;
      }

      .article-header-wrapper > .article-image {
        display: none;
      }

      /* Keep the stacked Model Drop layout on mobile; the weekly-update
         mobile rules above would otherwise hide the top image. */
      .model-drop-header {
        gap: 20px;
        margin-bottom: 32px;
      }

      .model-drop-header > .article-image {
        display: block;
        max-width: 100%;
        max-height: 280px;
        aspect-ratio: 3 / 2;
      }

      .model-drop-header .article-title {
        font-size: 36px;
      }

      .model-drop-header .article-type-label {
        font-size: 11px;
        padding: 4px 12px;
        letter-spacing: 1.5px;
      }

      .model-drop-header .article-date {
        font-size: 15px;
      }

      .model-drop-header .article-header {
        gap: 10px;
      }

      .article-content {
        font-size: 17px;
        line-height: 1.7;
      }

      .article-image {
        height: 240px;
      }

      /* No zoom-on-focus on iPhone: inputs need 16px text. */
      .substack-subscribe-form input[type="email"],
      .comment-form textarea,
      .comment-form-identity input,
      .comment-form-identity select {
        font-size: 16px;
      }

      .substack-subscribe {
        flex-direction: column;
        padding: 8px 20px;
        gap: 10px;
      }

      .substack-subscribe p {
        font-size: 18px;
        white-space: normal;
        text-align: center;
      }

      .substack-subscribe-form {
        width: 100%;
      }

      .substack-subscribe-form input[type="email"] {
        width: 180px;
        min-width: 0;
      }

      .feed-section-header {
        margin: 28px 0 12px 0;
      }

      .feed-section-header h2 {
        font-size: 19px;
      }

      .research-callout {
        margin: 32px 0;
        border-radius: 22px;
      }

      .research-content {
        margin-top: -18px;
        padding: 0 20px 22px;
      }

      .research-callout .research-paper a {
        font-size: 20px;
      }

      .research-callout p {
        font-size: 15.5px;
      }

      .article-content .article-section-label {
        font-size: 24px;
        line-height: 1.3;
      }

      .article-content .model-card {
        padding: 22px 22px 18px 22px;
        margin: 22px 0 26px 0;
      }

      .article-content .model-card p {
        font-size: 14px;
        padding: 8px 0;
      }

      /* Footer margins/padding track the card's reduced mobile padding so
         the darker section still sits flush with the card edges. */
      .article-content .model-card .model-card-footer {
        margin: 18px -22px -18px -22px;
        padding: 14px 18px !important;
        font-size: 13px;
      }
    }

    /* ---------- Model Drop article styles ---------- */

    body.model-drop-page .article-content {
      padding-bottom: 40px;
    }

    /* Bullets: align with paragraph text, readable indent on desktop and mobile */
    body.model-drop-page .article-content ul,
    body.model-drop-page .article-content ol {
      margin: 0 0 20px 0;
      padding-left: 1.4em;
      list-style-position: outside;
    }

    body.model-drop-page .article-content ul { list-style-type: disc; }
    body.model-drop-page .article-content ol { list-style-type: decimal; }

    body.model-drop-page .article-content li {
      margin-bottom: 10px;
      padding-left: 4px;
    }

    body.model-drop-page .article-content li::marker {
      color: var(--text-secondary);
    }

    body.model-drop-page .article-content li > p {
      margin: 0 0 8px 0;
    }

    body.model-drop-page .article-content li > p:last-child {
      margin-bottom: 0;
    }

    /* Keep inline links as minimal hyperlinks (not pill buttons) */
    body.model-drop-page .article-content a[href*="http"]:not(.research-link):not(.no-transform) {
      display: inline;
      border: none;
      border-radius: 0;
      padding: 0;
      margin: 0;
      font-size: inherit;
      font-weight: 500;
      line-height: inherit;
      opacity: 1;
      color: var(--primary);
      background: transparent;
      text-decoration: none;
      border-bottom: 1px solid var(--primary);
      transition: opacity 0.2s ease;
    }

    body.model-drop-page .article-content a[href*="http"]:not(.research-link):not(.no-transform) svg {
      display: none;
    }

    body.model-drop-page .article-content a[href*="http"]:not(.research-link):not(.no-transform):hover {
      opacity: 0.75;
      transform: none;
      box-shadow: none;
    }

    /* Quote blocks */
    body.model-drop-page .article-content blockquote {
      margin: 24px 0;
      padding: 10px 18px;
      border-left: 3px solid var(--primary);
      color: var(--text);
      font-style: italic;
      background: transparent;
    }

    body.model-drop-page .article-content blockquote p {
      margin-bottom: 8px;
    }

    body.model-drop-page .article-content blockquote p:last-child {
      margin-bottom: 0;
    }

    [data-theme="dark"] body.model-drop-page .article-content blockquote,
    body.model-drop-page[data-theme="dark"] .article-content blockquote {
      border-left-color: var(--primary);
    }

    /* Substack callout blocks, in every post type (the "Model: ...", "Ship
       date: ..." stack in drops, announcements like "We have a YouTube
       channel" in weeklies). */
    .article-content .callout-block {
      background: linear-gradient(180deg, rgba(230, 230, 222, 0.08), rgba(230, 230, 222, 0.045));
      border-radius: 20px;
      padding: 18px 22px;
      margin: 28px 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.1), 0 8px 24px rgba(0, 16, 11, 0.18);
    }

    .article-content .callout-block p {
      margin: 0 0 6px 0;
    }

    .article-content .callout-block p:last-child {
      margin-bottom: 0;
    }

    .article-content .callout-block a.no-transform,
    .article-content .pullquote a.no-transform {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 3px;
      overflow-wrap: anywhere;
    }

    /* Substack pull quotes */
    .article-content .pullquote {
      margin: 32px 0;
      padding: 4px 0 4px 20px;
      border-left: 3px solid var(--primary);
      font-family: 'Outfit', sans-serif;
      font-size: 22px;
      line-height: 1.4;
    }

    .article-content .pullquote p {
      margin: 0;
    }

    /* Substack post embeds (digest-post-embed / embedded-post-wrap) rebuilt
       as a link card. */
    .article-content a.post-embed-card {
      display: flex;
      gap: 16px;
      align-items: stretch;
      max-width: 620px;
      margin: 28px auto;
      padding: 10px;
      background: linear-gradient(180deg, rgba(230, 230, 222, 0.08), rgba(230, 230, 222, 0.045));
      border-radius: 22px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.1), 0 8px 24px rgba(0, 16, 11, 0.18);
      color: var(--text);
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .article-content a.post-embed-card:hover {
      transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(230, 230, 222, 0.16), 0 14px 32px rgba(0, 16, 11, 0.26);
    }

    .article-content .post-embed-card img {
      width: 132px;
      min-width: 132px;
      height: 100px;
      object-fit: cover;
      border-radius: 14px;
      margin: 0;
    }

    .article-content .post-embed-card-body {
      padding: 4px 6px 4px 0;
    }

    .article-content .post-embed-card-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .article-content .post-embed-card-title {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 17px;
      line-height: 1.3;
    }

    .article-content .post-embed-card-caption {
      font-size: 14px;
      line-height: 1.45;
      color: var(--text-secondary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .article-content .post-embed-card-meta {
      margin-top: auto;
      font-size: 12px;
      color: var(--text-secondary);
    }

    @media (max-width: 520px) {
      .article-content .post-embed-card img {
        width: 88px;
        min-width: 88px;
        height: 88px;
      }
    }

    /* Substack link buttons, kept as a centered pill. */
    .article-content .substack-link-button {
      display: flex;
      justify-content: center;
      margin: 24px 0;
    }

    .article-content .substack-link-button a.no-transform {
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      border-radius: 999px;
      background: var(--primary);
      color: var(--background);
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
    }

    /* Bottom subscribe CTA for model drops, mirroring the homepage subscribe box */
    .modeldrop-subscribe {
      margin: 48px 0 60px 0;
      padding: 28px 24px;
      background:
        radial-gradient(120% 140% at 0% 0%, rgba(143, 227, 185, 0.08), rgba(143, 227, 185, 0) 55%),
        linear-gradient(180deg, rgba(230, 230, 222, 0.07), rgba(230, 230, 222, 0.035));
      border-radius: 26px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(230, 230, 222, 0.1), 0 12px 34px rgba(0, 16, 11, 0.22);
      text-align: center;
    }

    .modeldrop-subscribe p {
      font-family: 'Outfit', sans-serif;
      font-size: 17px;
      color: var(--text);
      margin: 0 0 16px 0;
      font-weight: 500;
    }

    .modeldrop-subscribe .substack-subscribe-form {
      justify-content: center;
    }

    @media (max-width: 768px) {
      body.model-drop-page .article-content ul,
      body.model-drop-page .article-content ol {
        padding-left: 1.25em;
      }

      body.model-drop-page .article-content blockquote {
        margin: 20px 0;
        padding: 8px 14px;
      }

      body.model-drop-page .article-content {
        padding-bottom: 24px;
      }

      /* Center + shrink share/action icons under the date on mobile model drops */
      body.model-drop-page .article-meta {
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }

      body.model-drop-page .article-date {
        text-align: center;
      }

      body.model-drop-page .article-actions-inline {
        justify-content: center;
        gap: 4px;
      }

      body.model-drop-page .article-actions-inline .icon-button,
      body.model-drop-page .article-actions-inline .social-icon {
        padding: 4px;
        min-width: 26px;
        min-height: 26px;
      }

      body.model-drop-page .article-actions-inline .icon-button svg,
      body.model-drop-page .article-actions-inline .social-icon svg {
        width: 15px;
        height: 15px;
      }

      .modeldrop-subscribe {
        margin: 36px 0 48px 0;
        padding: 22px 18px;
      }

      .modeldrop-subscribe p {
        font-size: 15px;
      }

      .modeldrop-subscribe .substack-subscribe-form {
        flex-direction: column;
        gap: 10px;
      }

      .modeldrop-subscribe .substack-subscribe-form input[type="email"] {
        width: 100%;
      }

      .modeldrop-subscribe .substack-subscribe-form button {
        width: 100%;
      }
    }

    /* Paywall cut. Paid posts arrive as a preview; fade the last lines into
       the page and hand off to Substack with a small pill. */
    .article-content.has-paywall {
      position: relative;
    }

    /* An eased fade over the last six or so lines, no step, so the text
       thins out instead of stopping; the pill sits in the fade's tail. */
    .article-content.has-paywall {
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 300px), rgba(0, 0, 0, 0.86) calc(100% - 240px), rgba(0, 0, 0, 0.6) calc(100% - 180px), rgba(0, 0, 0, 0.34) calc(100% - 120px), rgba(0, 0, 0, 0.14) calc(100% - 60px), transparent);
              mask-image: linear-gradient(to bottom, #000 calc(100% - 300px), rgba(0, 0, 0, 0.86) calc(100% - 240px), rgba(0, 0, 0, 0.6) calc(100% - 180px), rgba(0, 0, 0, 0.34) calc(100% - 120px), rgba(0, 0, 0, 0.14) calc(100% - 60px), transparent);
    }

    .article-content.has-paywall > :last-child {
      margin-bottom: 0;
    }

    .paywall-cta {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      margin: -46px 0 56px;
    }

    .paywall-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 20px 0 16px;
      border-radius: 999px;
      background: var(--primary);
      color: var(--background);
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 10px 26px rgba(0, 16, 11, 0.32);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .paywall-pill:hover,
    .paywall-pill:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 10px 28px var(--shadow);
    }

    .paywall-pill:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }

    .paywall-pill-icon {
      color: #FF6719;
      flex-shrink: 0;
    }

    .paywall-pill-arrow {
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .paywall-pill:hover .paywall-pill-arrow {
      transform: translateX(2px);
    }

    /* =====================================================================
       Inline highlights
       ---------------------------------------------------------------------
       Marks in the body, markers in the margin (desktop) or chips inline
       (mobile), a card that fades in beside the passage, and a floating
       toolbar on text selection. Popular passages get a real highlight;
       everything else is a hairline so the text stays readable.
       ===================================================================== */
    #article-view {
      position: relative;
    }

    mark.hl {
      background: transparent;
      color: inherit;
      border-bottom: 1px dotted rgba(230, 230, 222, 0.35);
      padding-bottom: 1px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    mark.hl.hl-popular {
      background: rgba(230, 230, 222, 0.14);
      border-bottom: 2px solid rgba(230, 230, 222, 0.45);
      border-radius: 2px;
    }

    mark.hl.hl-active {
      background: rgba(230, 230, 222, 0.26);
      border-bottom-color: var(--primary);
    }

    /* Desktop margin markers, absolutely positioned inside #article-view at
       the top of each passage's first line. */
    .hl-markers {
      position: absolute;
      top: 0;
      right: -60px;
      width: 48px;
      pointer-events: none;
    }

    .hl-marker {
      position: absolute;
      left: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      pointer-events: auto;
      background: rgba(230, 230, 222, 0.07);
      color: var(--text-secondary);
      border: 1px solid rgba(230, 230, 222, 0.14);
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 12px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

    .hl-marker:hover,
    .hl-marker:focus-visible,
    .hl-marker.is-open {
      color: var(--text);
      border-color: rgba(143, 227, 185, 0.45);
      transform: translateX(-2px);
    }

    .hl-marker-popular {
      color: var(--text);
      border-color: rgba(230, 230, 222, 0.38);
    }

    .hl-stat {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .hl-stat svg {
      opacity: 0.75;
    }

    /* Mobile / narrow: a chip at the end of the passage instead. */
    .hl-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      vertical-align: baseline;
      margin: 0 2px 0 4px;
      padding: 1px 7px;
      background: rgba(230, 230, 222, 0.07);
      color: var(--text-secondary);
      border: 1px solid rgba(230, 230, 222, 0.14);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      line-height: 1.5;
      cursor: pointer;
    }

    .hl-chip.is-open,
    .hl-chip-popular {
      color: var(--text);
      border-color: rgba(230, 230, 222, 0.45);
    }

    /* Selection toolbar */
    .hl-toolbar {
      position: fixed;
      z-index: 60;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 5px;
      background: var(--glass-strong, #0b5b43);
      -webkit-backdrop-filter: blur(20px) saturate(1.7);
              backdrop-filter: blur(20px) saturate(1.7);
      color: var(--text);
      border: 1px solid rgba(230, 230, 222, 0.16);
      border-radius: 999px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 34px rgba(0, 16, 11, 0.4);
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .hl-toolbar.is-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .hl-toolbar.is-mobile {
      left: 50%;
      bottom: max(calc(18px + env(safe-area-inset-bottom)), calc(var(--tabbar-space, 0px) + 8px));
      top: auto;
      transform: translate(-50%, 6px);
    }

    .hl-toolbar.is-mobile.is-visible {
      transform: translate(-50%, 0);
    }

    .hl-tool {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 14px;
      background: transparent;
      color: var(--text);
      border: none;
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }

    .hl-tool:hover,
    .hl-tool:focus-visible {
      background: rgba(230, 230, 222, 0.12);
    }

    .hl-tool svg {
      width: 14px;
      height: 14px;
    }

    /* The card: a floating piece of glass. Beside the passage in the page
       margin when the window has room (is-margin), over the text's edge
       when it doesn't, a bottom sheet on phones. */
    .hl-panel {
      position: fixed;
      z-index: 70;
      display: none;
      max-height: min(70vh, 620px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      padding: 18px;
      color: var(--text);
      background: var(--glass-sheen, linear-gradient(transparent, transparent)), var(--glass-strong, #0b5b43);
      -webkit-backdrop-filter: var(--glass-fx, blur(16px) saturate(2));
              backdrop-filter: var(--glass-fx, blur(16px) saturate(2));
      border-radius: 24px;
      box-shadow: var(--glass-shine, inset 0 1px 0 rgba(255, 255, 255, 0.14)), inset 0 0 0 1px rgba(230, 230, 222, 0.12), 0 24px 60px rgba(0, 12, 8, 0.5);
      opacity: 0;
      transform: translateY(8px) scale(0.98);
      transform-origin: top right;
      transition: opacity 0.22s ease, transform 0.38s var(--ease-ios, ease);
    }

    .hl-panel.is-margin {
      transform: translateX(-10px);
      transform-origin: top left;
    }

    .hl-panel.is-visible {
      opacity: 1;
      transform: none;
    }

    .hl-panel.is-sheet {
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      width: auto;
      max-height: 78vh;
      border-radius: 28px 28px 0 0;
      padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
      transform: translateY(28px);
    }

    .hl-panel.is-sheet.is-visible {
      transform: translateY(0);
    }

    .hl-backdrop {
      position: fixed;
      inset: 0;
      z-index: 65;
      background: rgba(0, 20, 14, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease;
    }

    .hl-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .hl-panel-head {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .hl-quote {
      flex: 1;
      margin: 0;
      padding: 2px 0 2px 12px;
      border-left: 2px solid rgba(143, 227, 185, 0.55);
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-secondary);
      font-style: italic;
    }

    .hl-close {
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      margin: -4px -4px 0 0;
      padding: 0;
      background: rgba(230, 230, 222, 0.08);
      color: var(--text-secondary);
      border: 0;
      border-radius: 999px;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .hl-close:hover,
    .hl-close:focus-visible {
      background: rgba(230, 230, 222, 0.16);
      color: var(--text);
    }

    .hl-reactions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(230, 230, 222, 0.1);
    }

    .hl-react {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 0 12px;
      background: rgba(230, 230, 222, 0.07);
      color: var(--text-secondary);
      border: 0;
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.1);
      font-size: 13px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      font-family: inherit;
      cursor: pointer;
      transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, scale 0.3s var(--ease-spring, ease);
    }

    .hl-react:hover,
    .hl-react:focus-visible {
      color: var(--text);
      background: rgba(230, 230, 222, 0.12);
    }

    .hl-react:active { scale: 0.94; }

    .hl-react.active {
      color: var(--mint, #8fe3b9);
      background: rgba(143, 227, 185, 0.14);
      box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.4);
    }

    .hl-reactions-note {
      margin-left: auto;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .hl-panel-thread .comment {
      padding: 12px 0;
    }

    .hl-panel-thread .comment-text {
      font-size: 14px;
    }

    .hl-empty {
      margin: 0;
      padding: 14px 0 4px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .hl-panel-compose {
      margin-top: 10px;
    }

    .hl-panel-compose .comment-form textarea {
      font-size: 14px;
      min-height: 92px;
    }

    /* Narrow card: each text field takes a row, then the Human / Agent
       toggle and Post share the last one. */
    .hl-panel .comment-form-row {
      flex-wrap: wrap;
      gap: 10px;
    }

    .hl-panel .comment-form-identity {
      display: contents;
    }

    .hl-panel .comment-form-identity input {
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
    }

    .hl-panel .comment-form-identity input[name="name"] { order: 1; }
    .hl-panel .comment-form-identity input[name="author_model"] { order: 2; }
    .hl-panel .kind-toggle { order: 3; }
    .hl-panel .kind-option span { padding: 7px 11px; }

    .hl-panel .comment-form-submit {
      order: 4;
      margin-left: auto;
    }

    /* Quote line above a passage comment in the main thread. */
    .comment-quote {
      display: block;
      margin-bottom: 6px;
      padding-left: 10px;
      border-left: 2px solid rgba(230, 230, 222, 0.3);
      font-size: 13px;
      font-style: italic;
      color: var(--text-secondary);
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }

    .comment-quote:hover {
      color: var(--text);
      border-left-color: var(--text);
    }

    /* Human / Agent segmented control, replacing the native <select>. Radios
       underneath, so it still submits without JavaScript. */
    .kind-toggle {
      display: inline-flex;
      padding: 3px;
      background: rgba(0, 30, 22, 0.42);
      border: 1px solid rgba(230, 230, 222, 0.12);
      border-radius: 999px;
    }

    .kind-option {
      position: relative;
      cursor: pointer;
    }

    .kind-option input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      margin: 0;
    }

    .kind-option span {
      display: inline-block;
      padding: 7px 13px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
    }

    .kind-option input:checked + span {
      background: rgba(230, 230, 222, 0.16);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 12, 8, 0.2);
    }

    .kind-option input:focus-visible + span {
      outline: 2px solid var(--primary);
      outline-offset: 1px;
    }

    @media (max-width: 1059px) {
      .hl-markers {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .hl-toolbar.is-mobile .hl-tool {
        padding: 10px 16px;
        font-size: 14px;
      }
    }

    /* =====================================================================
       Comments + voting
       ---------------------------------------------------------------------
       Same palette as the rest of the site: cards on --card-bg, cream text,
       no new hues. The agent/human tag is deliberately quiet: a small
       uppercase pill, not a badge that fights the comment text for
       attention.
       ===================================================================== */
    .comments-section {
      margin-top: 56px;
      padding-top: 32px;
      border-top: 1px solid rgba(230, 230, 222, 0.14);
    }

    .comments-header {
      margin-bottom: 20px;
    }

    .comments-header h2 {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .comments-subhead {
      margin-top: 4px;
      font-size: 14px;
      color: var(--text-secondary);
    }


    /* Collapsed by default; a human sees one quiet line, an agent parsing the
       HTML gets the whole contract without another request. */
    /* Addressed to agents, sized so a human skims past it. */
    .agent-api-note {
      margin-bottom: 22px;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .agent-api-tag {
      font-family: 'Outfit', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      opacity: 0.75;
      margin-right: 4px;
    }

    .agent-api-note code {
      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
      font-size: 12px;
      color: var(--text);
      overflow-wrap: anywhere;
    }

    .agent-api-note a {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .comment-thread {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .comment {
      display: flex;
      gap: 12px;
      padding: 14px 0;
      border-top: 1px solid rgba(230, 230, 222, 0.08);
    }

    .comment:first-child {
      border-top: none;
    }

    .comment:target {
      background: rgba(230, 230, 222, 0.05);
      border-radius: 10px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .comment-vote {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
      width: 30px;
      padding-top: 2px;
    }

    .comment-vote-form {
      display: block;
      line-height: 0;
    }

    .comment-vote-button {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1;
      padding: 3px 4px;
      cursor: pointer;
      border-radius: 4px;
      opacity: 0.55;
      transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    }

    .comment-vote-button:hover,
    .comment-vote-button:focus-visible {
      opacity: 1;
      color: var(--text);
      background: rgba(230, 230, 222, 0.08);
    }

    .comment-vote-button.active {
      opacity: 1;
      color: var(--primary);
      background: rgba(230, 230, 222, 0.14);
    }

    .comment-score {
      font-size: 13px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--text-secondary);
    }

    .comment-score.positive {
      color: var(--text);
    }

    .comment-score.negative {
      opacity: 0.5;
    }

    .comment-body-wrap {
      flex: 1;
      min-width: 0;
    }

    .comment-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .comment-author {
      font-weight: 600;
      color: var(--text);
    }

    /* The human/agent marker. Minimal on purpose: 10px uppercase, hairline
       border, no fill. It answers "who wrote this" without shouting. */
    .comment-kind {
      font-family: 'Outfit', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.7px;
      text-transform: uppercase;
      padding: 1px 6px;
      border-radius: 999px;
      border: 1px solid currentColor;
      line-height: 1.5;
      opacity: 0.6;
    }

    .comment-kind-agent {
      opacity: 0.85;
    }

    .comment-model {
      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
      font-size: 11px;
      opacity: 0.6;
    }

    .comment-time,
    .comment-permalink {
      font-size: 12px;
      opacity: 0.65;
    }

    .comment-permalink {
      color: inherit;
      text-decoration: none;
    }

    .comment-permalink:hover {
      opacity: 1;
      text-decoration: underline;
    }

    .comment-text {
      font-size: 15px;
      line-height: 1.65;
      overflow-wrap: anywhere;
    }

    .comment-text p + p {
      margin-top: 10px;
    }

    .comment-text a {
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .comment-actions {
      margin-top: 6px;
    }

    .comment-reply-toggle {
      background: none;
      border: none;
      padding: 0;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .comment-reply-toggle:hover {
      color: var(--text);
    }

    .comment-replies {
      margin-top: 10px;
      padding-left: 14px;
      border-left: 1px solid rgba(230, 230, 222, 0.12);
    }

    .comment-replies .comment {
      border-top: none;
      padding: 10px 0;
    }

    .comment-inline-reply {
      margin-top: 12px;
    }

    .comment-compose {
      margin-top: 28px;
      padding: 20px;
      background: linear-gradient(180deg, rgba(230, 230, 222, 0.07), rgba(230, 230, 222, 0.035));
      border-radius: 24px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.1);
    }

    .comment-compose-heading {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .comment-form textarea {
      display: block;
      width: 100%;
      padding: 12px 14px;
      border: 1px solid rgba(230, 230, 222, 0.12);
      border-radius: 16px;
      background: rgba(0, 30, 22, 0.42);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
      color: var(--text);
      font-size: 15px;
      font-family: inherit;
      line-height: 1.55;
      resize: vertical;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .comment-form textarea:focus {
      outline: none;
      border-color: rgba(143, 227, 185, 0.45);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(143, 227, 185, 0.1);
    }

    .comment-form textarea::placeholder {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .comment-form-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
    }

    .comment-form-identity {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .comment-form-identity input,
    .comment-form-identity select {
      height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(230, 230, 222, 0.12);
      border-radius: 999px;
      background: rgba(0, 30, 22, 0.42);
      color: var(--text);
      font-size: 13.5px;
      font-family: inherit;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .comment-form-identity input {
      width: 160px;
      max-width: 100%;
    }

    .comment-form-identity input:focus,
    .comment-form-identity select:focus {
      outline: none;
      border-color: rgba(143, 227, 185, 0.45);
      box-shadow: 0 0 0 4px rgba(143, 227, 185, 0.1);
    }

    .comment-form-identity input::placeholder {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .comment-form-submit {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .comment-form-submit button[type="submit"] {
      min-height: 40px;
      padding: 0 22px;
      background: var(--primary);
      color: var(--background);
      border: none;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .comment-form-submit button[type="submit"]:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px var(--shadow);
    }

    .comment-form-submit button[type="submit"]:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .comment-form-cancel {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .comment-form-reply-notice {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .comment-form-status {
      margin-top: 8px;
      font-size: 13px;
      color: var(--text-secondary);
      min-height: 1em;
    }

    .comment-form-status.is-error {
      color: #ffb4a2;
    }

    /* Comment count on feed cards. A live participation signal is the cheapest
       reason to click through. */
    @media (max-width: 768px) {
      .comments-section {
        margin-top: 40px;
      }

      .comment-form-row {
        align-items: stretch;
      }

      .comment-form-identity input {
        width: 100%;
      }

      .comment-form-submit {
        width: 100%;
        justify-content: flex-end;
      }

      .comment-replies {
        padding-left: 10px;
      }
    }

    /* ---------------------------------------------------- Reading polish --
       Prose runs the full width of the story, lined up with the headline
       and its picture; passage markers and the comment card use the page
       margins when the window has them. Pictures in a story open in a
       viewer (shell.js). */
    .article-content p,
    .article-content li {
      text-wrap: pretty;
    }

    .article-content h2,
    .article-content h3 {
      text-wrap: balance;
      scroll-margin-top: 96px;
    }

    .article-content ::selection,
    .article-title::selection {
      background: rgba(143, 227, 185, 0.32);
      color: var(--text);
    }

    .article-meta {
      flex-wrap: wrap;
    }

    .article-readtime {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text-secondary);
      font-size: 15px;
      white-space: nowrap;
    }

    .article-readtime::before {
      content: '';
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.6;
    }

    /* Source links in weekly stories: quiet pills that name the site. They
       sit in the text without shouting, and light up on hover. */
    body:not(.model-drop-page) .article-content a[href*="http"]:not(.research-link):not(.no-transform) {
      gap: 5px;
      margin: 2px 0;
      padding: 4px 10px 4px 10px;
      border: 0;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.01em;
      line-height: 1.25;
      color: var(--text-secondary);
      background: rgba(230, 230, 222, 0.07);
      box-shadow: inset 0 0 0 1px rgba(230, 230, 222, 0.11);
      opacity: 1;
      vertical-align: 1px;
      transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.25s var(--ease-spring, ease);
    }

    body:not(.model-drop-page) .article-content a[href*="http"]:not(.research-link):not(.no-transform) svg {
      width: 11px;
      height: 11px;
      opacity: 0.7;
    }

    body:not(.model-drop-page) .article-content a[href*="http"]:not(.research-link):not(.no-transform):hover,
    body:not(.model-drop-page) .article-content a[href*="http"]:not(.research-link):not(.no-transform):focus-visible {
      color: var(--text);
      background: rgba(143, 227, 185, 0.12);
      box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.3);
      transform: translateY(-1px);
      outline: none;
    }

    body:not(.model-drop-page) .article-content a[href*="http"]:not(.research-link):not(.no-transform):active {
      transform: scale(0.96);
    }

    /* Pictures in the story can be opened full screen. */
    #article-view .article-content img,
    #article-view .article-image {
      cursor: zoom-in;
    }

    #article-view .article-content .tweet-card-head img,
    #article-view .article-content .post-embed-card img {
      cursor: inherit;
    }

    .article-content img {
      border-radius: 16px;
    }

    /* Opening a story without a view transition: a short settle instead of
       a hard cut. */
    #article-view.is-entering {
      animation: hai-story-in 0.42s var(--ease-out, ease-out) both;
    }

    @keyframes hai-story-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }

    /* The card you tapped stays pressed while its story loads. */
    .card.is-opening {
      transform: scale(0.985);
      transition-duration: 0.18s;
    }

    /* Up next: the next story of the same kind, at the end of the page. */
    #up-next-mount:empty {
      display: none;
    }

    /* Related stories and the home archive links: grey link rows on one calm
       surface, hairlines between rows, no boxes inside it. */
    #related-mount:empty {
      display: none;
    }

    #related-mount,
    .home-archive {
      margin-top: 48px;
    }

    .related-label {
      margin: 0 0 12px 4px;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--mint, #8fe3b9);
    }

    .related-list {
      list-style: none;
      margin: 0;
      padding: 8px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(230, 230, 222, 0.065), rgba(230, 230, 222, 0.03));
    }

    .related-list li + li::before {
      content: '';
      display: block;
      height: 1px;
      margin: 0 16px;
      background: var(--hairline, rgba(230, 230, 222, 0.1));
    }

    .related-link {
      display: grid;
      gap: 4px;
      padding: 14px 16px;
      border-radius: 16px;
      color: inherit;
      text-decoration: none;
      transition: background 0.2s ease;
    }

    .related-link:focus-visible {
      outline: 2px solid var(--mint, #8fe3b9);
      outline-offset: -2px;
    }

    .related-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--text);
      text-wrap: pretty;
    }

    .related-meta {
      font-size: 13px;
      color: var(--text-secondary);
    }

    @media (hover: hover) {
      .related-link:hover {
        background: rgba(230, 230, 222, 0.06);
      }
    }

    #up-next-mount {
      margin-top: 48px;
    }

    .up-next-label {
      margin: 0 0 12px 4px;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--mint, #8fe3b9);
    }

    .up-next-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 132px;
      align-items: center;
      gap: 16px;
      padding: 10px 10px 10px 22px;
      border-radius: 24px;
      color: inherit;
      text-decoration: none;
      isolation: isolate;
      background:
        radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 45%),
        linear-gradient(180deg, rgba(230, 230, 222, 0.07), rgba(230, 230, 222, 0.035));
      box-shadow: 0 12px 34px rgba(0, 16, 11, 0.22);
      transition: transform 0.5s var(--ease-spring, ease), box-shadow 0.35s ease;
    }

    .up-next-card::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      padding: 1px;
      background: var(--rim-soft);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }

    .up-next-text {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .up-next-title {
      font-size: 19px;
      font-weight: 600;
      line-height: 1.28;
      color: var(--text);
      text-wrap: pretty;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .up-next-date {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13.5px;
      color: var(--text-secondary);
    }

    .up-next-date svg {
      width: 15px;
      height: 15px;
      transition: transform 0.3s var(--ease-out, ease);
    }

    .up-next-image {
      width: 132px;
      height: 100px;
      object-fit: cover;
      border-radius: 16px;
      background: var(--background);
    }

    @media (hover: hover) and (pointer: fine) {
      .up-next-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 50px rgba(0, 16, 11, 0.34);
      }

      .up-next-card:hover .up-next-date svg {
        transform: translateX(3px);
      }
    }

    .up-next-card:active {
      transform: scale(0.985);
      transition-duration: 0.18s;
    }

    .up-next-card:focus-visible {
      outline: 2px solid var(--mint, #8fe3b9);
      outline-offset: 3px;
    }

    /* Comment counts on cards: a bubble and a number. */
    .card-comment-count {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-variant-numeric: tabular-nums;
    }

    .card-comment-count svg {
      width: 14px;
      height: 14px;
    }

    @media (max-width: 768px) {
      /* Thumb-sized buttons on phones. */
      .icon-button,
      .social-icon {
        width: 44px;
        height: 44px;
      }

      .article-readtime {
        font-size: 14px;
      }

      .article-content img {
        border-radius: 14px;
      }

      #up-next-mount {
        margin-top: 36px;
      }

      .up-next-card {
        grid-template-columns: minmax(0, 1fr) 104px;
        gap: 12px;
        padding: 8px 8px 8px 16px;
        border-radius: 22px;
      }

      .up-next-title {
        font-size: 16.5px;
      }

      .up-next-image {
        width: 104px;
        height: 84px;
        border-radius: 15px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #article-view.is-entering { animation: none; }
      .up-next-card,
      .up-next-date svg { transition: none; }
    }