*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: auto; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }

  :root {
    --bg: #F2F2F2;
    --bg-translucent: rgba(242, 242, 242, 0.85);
    --bg-deep: #E5E5E5;
    --ink: #1A1A1A;
    --ink-soft: #3A3A3A;
    --ink-muted: #666;
    --paprika: #E55C4C;
    --paprika-deep: #C34939;
    --display: 'DM Serif Display', Georgia, serif;
    --body: 'Inter', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', 'Courier New', monospace;
  }

  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; height: auto; display: block; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  /* No single word stranded on the last line. `balance` evens out the lines of a
     heading, `pretty` keeps paragraphs from ending on an orphan. Both are
     progressive: browsers that do not support them ignore the declaration and
     wrap as before. Headings that must break at an exact point still use a
     non-breaking space in the markup (see the home H1). */
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  /* STICKY NAV */
  .sticky-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #D8D8D8;
    border-bottom: 1px solid rgba(26, 26, 26, 0.12);
    transition: padding 0.25s ease, background 0.25s ease, backdrop-filter 0.25s ease;
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sticky-nav.scrolled {
    padding: 0.75rem 4rem;
    background: #D8D8D8;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .nav-logo-wrap {
    display: block;
    height: 78px;
    width: 256px;
    overflow: hidden;
    transition: height 0.25s ease, width 0.25s ease;
    /* Hardware acceleration for smoother iOS Safari transitions */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .sticky-nav.scrolled .nav-logo-wrap {
    height: 46px;
    width: 200px;
  }
  .nav-logo {
    /* Image always renders at full intrinsic size relative to wrapper width.
       The wrapper's overflow:hidden clips the tagline when wrapper is short.
       No clip-path, no mask — just the wrapper window doing the work. */
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    /* Anchor to top so wordmark stays visible as wrapper shrinks */
    transform-origin: top left;
  }
  .nav-links {
    display: flex;
    gap: 2rem;
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .nav-links a { color: var(--ink); transition: opacity 0.2s ease; cursor: pointer; }
  .nav-links a:hover { opacity: 0.55; }
  .nav-links a.active { opacity: 1; border-bottom: 1px solid var(--ink); }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    background: var(--paprika);
    color: var(--bg);
    padding: 0.6rem 1.4rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
  }
  .nav-cta:hover { background: var(--paprika-deep); transform: translateY(-1px); }
  .nav-mobile-toggle { display: none; }
  .nav-mobile-menu { display: none; }

  /* SECTIONS */
  .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 4rem;
    border-bottom: 2px solid var(--ink);
  }
  .section:last-of-type { border-bottom: none; }
  /* Suppress section bottom border when immediately followed by a dark block —
     the dark surface itself provides visual separation, so the extra line reads as a stray stripe. */
  .section:has(+ .section-dark) { border-bottom: none; }

  /* PAGES */
  .page { display: none; }
  .page.active { display: block; }

  /* TYPE */
  .h1 {
    font-family: var(--display);
    font-size: clamp(3.5rem, 9vw, 9rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 2.5rem;
    max-width: 20ch;
    font-weight: 400;
  }
  .h1 em { color: var(--ink); font-style: italic; }
  .h2 {
    font-family: var(--display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: 3rem;
    max-width: 20ch;
    font-weight: 400;
  }
  .h2 em { color: var(--ink); font-style: italic; }
  .h3 {
    font-family: var(--display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    max-width: 20ch;
    font-weight: 400;
  }
  .h3 em { font-style: italic; }
  .col-label {
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.85rem;
  }
  .page-eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
  }
  .subhead {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.35;
    color: var(--ink-soft);
    margin-bottom: 2rem;
    max-width: 32ch;
    font-weight: 400;
  }
  .body-text {
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .body-text p { margin-bottom: 1.5rem; max-width: 56ch; }
  .body-text p:last-child { margin-bottom: 0; }
  .pull-quote {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.35;
    color: var(--ink);
    margin: 2rem 0;
    max-width: 28ch;
    font-weight: 400;
  }

  /* CTA */
  .cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--paprika);
    color: var(--bg);
    padding: 1rem 1.75rem;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
  }
  .cta:hover { background: var(--paprika-deep); transform: translateY(-1px); }
  .cta-arrow { font-size: 1.1rem; }

  /* JetBrains Mono draws its arrows around the math axis, 0.2014em below the
     centre of the capitals beside them, so arrows in mono UI labels read low.
     Inter's arrow is already centred (0.0024em), which is why the subscribe
     button fixes itself by switching that one glyph to Inter. This nudge is for
     the mono labels only: .article-back, .ym-issue-more, .portrait-li.
     Deliberately NOT applied to arrows in article prose that mean "becomes"
     (She ran quickly -> She sprinted), which belong on the baseline. */
  .ui-arrow { display: inline-block; transform: translateY(-0.2em); }

  /* HOMEPAGE COMPONENTS */
  .hero-stack {
    padding-top: 1rem;
    margin-top: 1rem;
  }
  .hero-thesis {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.85rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 22ch;
    margin: 0 0 2rem 0;
    text-align: left;
  }
  .hero-followup {
    max-width: 56ch;
    margin: 0;
  }
  .hero-paragraph {
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 2rem;
    max-width: 56ch;
  }
  .bridge-line {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--ink-muted);
    max-width: 36ch;
    margin: 0 0 1.5rem 0;
  }
  .phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 2rem;
  }
  .phase-num {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.75rem;
  }
  .phase-name {
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.85rem;
    font-weight: 400;
  }
  .phase-desc {
    font-family: var(--body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* BRAND SOUL DARK BLOCK */
  .soul-block {
    margin-top: 4rem;
    background: var(--ink);
    color: var(--bg);
    padding: 4rem;
  }
  .soul-block-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bg);
    opacity: 0.6;
    margin-bottom: 1.5rem;
  }
  .soul-block-intro {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.4rem, 2vw, 1.65rem);
    line-height: 1.4;
    margin-bottom: 3rem;
    max-width: 30ch;
    color: var(--bg);
    font-weight: 400;
  }
  .soul-components {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    padding-top: 2rem;
  }
  .soul-component-rule {
    width: 32px;
    height: 1px;
    background: var(--bg);
    opacity: 0.5;
    margin-bottom: 1rem;
  }
  .soul-component-name {
    font-family: var(--display);
    font-size: 1.85rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    color: var(--bg);
    font-weight: 400;
  }
  .soul-component-desc {
    font-family: var(--body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(242, 242, 242, 0.7);
  }

  /* PROOF */
  .clients-lead {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 1.75rem;
    margin-top: 4rem;
    font-style: italic;
  }
  .clients-block {
    margin: 5rem 0 6rem;
    padding: 3rem;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .clients-block .clients-lead {
    margin-top: 0;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 1.75rem;
  }
  .clients-block .client-grid {
    margin-bottom: 0;
  }
  .client-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 2rem;
    margin-bottom: 5rem;
  }
  .client {
    font-family: var(--display);
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--ink);
    font-weight: 400;
  }
  .testimonials {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 3rem;
  }
  .testimonial {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
  }
  .testimonial-meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.5;
  }
  .testimonial-meta .name {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-top: 0.4rem;
  }
  .testimonial-meta .role {
    display: block;
    color: var(--ink-muted);
    font-weight: 400;
    margin-top: 0.2rem;
    text-transform: none;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
  }
  .testimonial-quote {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    line-height: 1.45;
    color: var(--ink);
    font-weight: 400;
  }

  /* METHOD PAGE */
  .deliverables {
    margin-top: 2rem;
  }
  .deliverables-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
  }
  .deliverables ul { list-style: none; padding: 0; }
  .deliverables li {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
    padding: 0.5rem 0;
  }
  .deliverables li strong { color: var(--ink); font-weight: 600; }
  .section-dark {
    background: var(--ink);
    color: var(--bg);
    margin: 0 calc(-50vw + 50%);
    padding: 6rem calc(50vw - 600px + 4rem);
  }
  .section-dark .h2 { color: var(--bg); }
  .section-dark .h2 em { color: var(--bg); }
  .section-dark .body-text { color: rgba(242, 242, 242, 0.85); }
  .section-dark .pull-quote {
    color: var(--bg);
    padding-top: 2rem;
    margin-top: 3rem;
  }

  /* WORK WITH US */
  .tier {
    padding-top: 0;
    margin-top: 0;
  }
  .tier-num {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1rem;
  }
  .tier-name {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    font-weight: 400;
  }
  .tier-sub {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--ink-soft);
    margin-bottom: 2rem;
    max-width: 40ch;
    font-weight: 400;
  }
  .tier-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 2rem;
    max-width: 56ch;
  }
  .tier-pricing {
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
  }
  .tier-engagements { list-style: none; padding: 0; margin: 1rem 0 0 0; }
  .tier-engagements li {
    font-family: var(--body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
    padding: 0.4rem 0;
  }

  /* ABOUT */
  .narrative {
    font-family: var(--body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 60ch;
  }
  .portrait {
    margin: 0 0 4rem 0;
    max-width: 280px;
  }
  .portrait img {
    width: 100%;
    height: auto;
    display: block;
  }
  .portrait figcaption a.portrait-li { display: inline-block; margin-top: 0.6em; color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid rgba(26,26,26,0.25); transition: color 0.2s ease, border-color 0.2s ease; }
  .portrait figcaption a.portrait-li:hover { color: var(--paprika); border-bottom-color: var(--paprika); }
  .portrait figcaption {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0.85rem;
  }
  .narrative p { margin-bottom: 1.75rem; }
  .narrative p:last-child { margin-bottom: 0; }
  .narrative .pivot {
    font-family: var(--display);
    font-style: italic;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--ink);
    margin: 2rem 0;
    font-weight: 400;
  }
  .narrative em { font-style: italic; }
  .manifesto {
    padding: 2rem 0;
    margin: 3rem 0;
    max-width: 60ch;
  }
  .manifesto p {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 1.5rem;
    font-weight: 400;
  }
  .manifesto p:last-child em { font-style: italic; }
  .about-block { padding-top: 2rem; }
  .about-block h3 {
    font-family: var(--display);
    font-size: 1.85rem;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    font-weight: 400;
  }

  /* CONTACT */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    margin-top: 3rem;
  }
  .contact-info p {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
  }
  .contact-form .form-row { margin-bottom: 1.5rem; }
  .contact-form label {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.5rem;
  }
  .contact-form label .req {
    color: var(--ink);
    margin-left: 2px;
  }
  .contact-form .form-key {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
  }
  .contact-form .form-key .req { color: var(--ink); }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: 0.6rem 0;
    outline: none;
    transition: border-color 0.2s ease;
    /* 44px is Apple's minimum touch target. Font size and padding alone landed
       these at 40px, so set the floor explicitly rather than tuning padding and
       hoping the font metrics cooperate. The textarea rule below keeps its own
       taller min-height. Font stays at 1rem: anything under 16px makes iOS
       Safari zoom the page on focus and never zoom back out. */
    min-height: 44px;
  }
  .contact-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231A1A1A' stroke-width='1.5' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    cursor: pointer;
  }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus { border-bottom-color: var(--ink-muted); }
  .contact-form textarea { min-height: 100px; resize: vertical; }
  .contact-form .submit-row { margin-top: 2rem; }
  .contact-form button[type="submit"] {
    background: var(--paprika);
    color: var(--bg);
    padding: 1rem 1.75rem;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .contact-form button[type="submit"]:hover { background: var(--paprika-deep); }
  .form-success {
    display: none;
    padding: 3rem 2rem;
    text-align: center;
    border: 1px solid var(--ink);
  }
  .form-success.visible { display: block; }
  .form-success h3 {
    font-family: var(--display);
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 400;
  }
  .alt-cta {
    margin-top: 3rem;
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink-soft);
  }
  .alt-cta a { color: var(--ink); border-bottom: 1px solid var(--ink); }

  /* FOOTER */
  .site-footer {
    border-top: 2px solid var(--ink);
    padding: 3rem 4rem 2rem;
    background: var(--bg-deep);
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  .footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .footer-links a { color: var(--ink); transition: opacity 0.2s ease; cursor: pointer; }
  .footer-links a:hover { opacity: 0.55; }
  .footer-meta {
    font-family: var(--mono);
    font-size: 0.65rem;
    color: var(--ink-muted);
    letter-spacing: 0.05em;
  }

  /* SCROLL REVEAL */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal.delay-1 { transition-delay: 0.1s; }
  .reveal.delay-2 { transition-delay: 0.2s; }
  .reveal.delay-3 { transition-delay: 0.3s; }
  /* Hero (above the fold) animates in immediately via CSS so LCP never waits on JS */
  @keyframes revealIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  .page.active > .section:first-child .reveal { animation: revealIn 0.6s ease forwards; }
  .page.active > .section:first-child .reveal.delay-1 { animation-delay: 0.1s; }
  .page.active > .section:first-child .reveal.delay-2 { animation-delay: 0.2s; }
  .page.active > .section:first-child .reveal.delay-3 { animation-delay: 0.3s; }

  /* MOBILE */
  @media (max-width: 900px) {
    .sticky-nav { padding: 1rem 1.5rem; }
    .sticky-nav.scrolled { padding: 0.6rem 1.5rem; backdrop-filter: none; -webkit-backdrop-filter: none; background: #D8D8D8; }
    .nav-logo-wrap { height: 58px; width: 190px; }
    .sticky-nav.scrolled .nav-logo-wrap { height: 37px; width: 160px; }
    .nav-links { display: none; }
    .nav-right { display: none; }
    .nav-mobile-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--mono);
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ink);
      cursor: pointer;
      background: none;
      border: none;
      padding: 0.5rem;
    }
    .nav-mobile-toggle .bars {
      display: inline-flex;
      flex-direction: column;
      gap: 4px;
      width: 18px;
    }
    .nav-mobile-toggle .bars span {
      display: block;
      height: 1.5px;
      background: var(--ink);
      width: 100%;
    }
    .nav-mobile-menu {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #D8D8D8;
      z-index: 200;
      padding: 6rem 2rem 2rem;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
      overflow-y: auto;
    }
    .nav-mobile-menu.open { transform: translateY(0); }
    .nav-mobile-menu .menu-close {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      background: none;
      border: none;
      color: var(--ink);
    }
    .nav-mobile-menu a {
      display: block;
      font-family: var(--display);
      font-size: 2rem;
      line-height: 1.3;
      color: var(--ink);
      padding: 1rem 0;
      border-bottom: 1px solid rgba(26, 26, 26, 0.12);
    }
    .nav-mobile-menu a:last-child { border-bottom: none; }

    .section { padding: 4rem 1.5rem; }
    /* First section needs to clear the un-scrolled sticky nav (~125px tall) */
    .page > .section:first-of-type { padding-top: 6rem; }
    .section-dark { padding: 4rem 1.5rem; margin: 0; }
    .hero-stack { padding-top: 0; margin-top: 0; }
    .hero-thesis { margin-bottom: 1.5rem; max-width: 100%; }
    .phases { grid-template-columns: 1fr; gap: 2.5rem; }
    .soul-block { padding: 2.5rem 1.5rem; }
    .soul-components { grid-template-columns: 1fr; gap: 2rem; }
    .soul-component-rule { display: none; }
    /* Client names flow in columns rather than a 2-up grid. In a grid, every row
       is as tall as its tallest cell, so a short name beside a long one left dead
       space underneath it (BLVR next to Children's Advocacy Centers of Texas).
       Column flow packs them tight. Names read down the left column, then down
       the right. */
    .client-grid {
      display: block;
      column-count: 2;
      column-gap: 1.5rem;
    }
    .client-grid .client {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      margin-bottom: 1rem;
    }
    .client-grid .client:last-child { margin-bottom: 0; }
    .clients-block { padding: 2rem 1.5rem; margin: 3.5rem 0 4rem; }
    .clients-block .clients-lead { font-size: 1.4rem; }
    .testimonial { grid-template-columns: 1fr; gap: 1rem; }
    .tier-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-inner { flex-direction: column; align-items: flex-start; }

    .h1 { font-size: clamp(2.75rem, 11vw, 4.5rem); margin-bottom: 2.5rem; }
    .h2 { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: 1.5rem; margin-top: 0; }
    .narrative { font-size: 1.05rem; }
    .narrative .pivot { font-size: 1.5rem; }
    .manifesto p { font-size: 1.25rem; }
  }

  @media (max-width: 600px) {
    .section { padding: 3rem 1.25rem; }
    /* First section needs to clear the un-scrolled sticky nav (~125px tall on phones) */
    .page > .section:first-of-type { padding-top: 5rem; }
    .soul-block { padding: 2rem 1.25rem; }
    /* One column on phones. Two columns here left roughly 150px per name, which
       broke the longer clients across four lines. Tablets keep two columns. */
    .client-grid { column-count: 1; }
    /* The portrait is capped at 280px so it sits in a narrow column beside the
       bio on desktop. On a phone there is no column to sit beside, and the cap
       just left dead space to its right, so let it fill the width. */
    .portrait { max-width: 100%; }
  }
  /* WORK PAGE: sticky bench callout alongside tier stack */
  .work-stack {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem;
  }
  .work-tiers { min-width: 0; }
  .work-tiers > .section.work-tier {
    max-width: none;
    margin: 0;
    padding: 0 0 5rem 0;
    border-bottom: 2px solid var(--ink);
  }
  .work-tiers > .section.work-tier + .section.work-tier {
    padding-top: 5rem;
  }
  .work-tiers > .section.work-tier:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .work-aside { position: relative; align-self: stretch; }
  .bench-callout {
    position: sticky;
    top: 7.5rem;
    padding: 2rem 1.75rem;
    background: var(--bg-deep);
    border-left: 3px solid var(--ink);
  }
  .bench-callout-title {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    font-weight: 400;
    color: var(--ink);
  }
  .bench-callout-title em { font-style: italic; }
  .bench-callout-body {
    font-family: var(--body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .bench-callout-body p { margin-bottom: 1rem; }
  .bench-callout-body p:last-child { margin-bottom: 0; }
  .bench-callout-quote {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ink);
    font-family: var(--display);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--ink);
  }
  @media (max-width: 900px) {
    .work-stack {
      grid-template-columns: 1fr;
      gap: 0;
      padding: 4rem 4rem 0;
    }
    .work-aside { margin-top: 3rem; }
    .bench-callout { position: static; }
  }
  @media (max-width: 600px) {
    .work-stack { padding: 3rem 1.25rem 0; }
    .bench-callout { padding: 1.5rem 1.25rem; }
  }
  /* WORK PAGE: collapsible tier details */
  .tier-summary { margin-bottom: 1.25rem; }
  .tier-details { margin: 0; }
  .tier-details > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 0 0 3px 0;
    user-select: none;
  }
  .tier-details > summary::-webkit-details-marker { display: none; }
  .tier-details > summary::marker { content: ''; }
  .tier-details > summary::after {
    content: '\2192';
    display: inline-block;
    font-size: 0.95rem;
    letter-spacing: 0;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .tier-details[open] > summary::after { transform: rotate(90deg); }
  .tier-details[open] > summary { margin-bottom: 2rem; }
  .tier-details-body > .body-text { margin-bottom: 2rem; }

  /* ============ YOUR MOVE (BLOG) ============ */
  .ym-issues { margin-top: 0; }
  .ym-issue {
    display: block;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(26,26,26,0.15);
    cursor: pointer;
  }
  .ym-issue:last-child { border-bottom: none; }
  @media (hover: hover) { .ym-issue-title:hover { color: var(--paprika); } }
  .ym-issue-meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.6rem;
  }
  .ym-issue-title {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.1;
    color: var(--ink);
    font-weight: 400;
    transition: color 0.2s ease;
    max-width: 26ch;
    margin-bottom: 0.75rem;
  }
  .ym-issue-teaser {
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 56ch;
    margin-bottom: 0.6rem;
  }
  .ym-issue-more {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paprika);
  }

  /* SUBSCRIBE */
  .ym-subscribe { background: var(--ink); color: var(--bg); padding: 3.5rem; margin-top: 1rem; }
  .ym-subscribe-label, .ym-subscribe-label-done {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--bg); opacity: 0.6; margin-bottom: 1.25rem;
  }
  .ym-subscribe-label-done { display: none; }
  .ym-subscribe-head {
    font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1;
    color: var(--bg); margin-bottom: 0.75rem; max-width: 22ch; font-weight: 400;
  }
  .ym-subscribe-sub {
    font-family: var(--body); font-size: 1rem; line-height: 1.6;
    color: rgba(242,242,242,0.75); margin-bottom: 2rem; max-width: 46ch;
  }
  .ym-subscribe-form { display: flex; gap: 0.75rem; max-width: 32rem; flex-wrap: wrap; }
  .ym-subscribe-form input[type="email"] {
    flex: 1 1 16rem; font-family: var(--body); font-size: 1rem; color: var(--bg);
    background: transparent; border: none; border-bottom: 1px solid rgba(242,242,242,0.4);
    padding: 0.7rem 0.85rem; outline: none; transition: border-color 0.2s ease;
    /* Matches the 44px touch-target floor used on the contact form. Padding and
       font metrics alone landed this at 43px. Font stays at 1rem so iOS Safari
       does not zoom the page on focus. */
    min-height: 44px;
  }
  .ym-subscribe-form input[type="email"]::placeholder { color: rgba(242,242,242,0.45); }
  .ym-subscribe-form input[type="email"]:focus { border-bottom-color: var(--paprika); }
  .ym-subscribe-form button {
    background: var(--paprika); color: var(--bg); padding: 0.9rem 1.75rem;
    font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; border: none;
    cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  }
  .ym-subscribe-form button .btn-arrow {
    font-family: var(--body); font-size: 1.5em; font-weight: 700;
    letter-spacing: 0; line-height: 1;
  }
  .ym-subscribe-form button:hover { background: var(--paprika-deep); transform: translateY(-1px); }
  .ym-subscribe-note {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em;
    color: rgba(242,242,242,0.5); margin-top: 1.25rem;
  }
  .ym-subscribe-success {
    display: none; font-family: var(--display);
    font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.3; color: var(--bg);
    max-width: 30ch; font-weight: 400;
  }
  .ym-subscribe-success em { font-style: italic; }
  .ym-subscribe-success sup { font-size: 0.5em; }
  .ym-subscribe.done .ym-subscribe-label,
  .ym-subscribe.done .ym-subscribe-head,
  .ym-subscribe.done .ym-subscribe-form,
  .ym-subscribe.done .ym-subscribe-sub,
  .ym-subscribe.done .ym-subscribe-note { display: none; }
  .ym-subscribe.done .ym-subscribe-label-done { display: block; }
  .ym-subscribe.done .ym-subscribe-success { display: block; }

  /* ARTICLE */
  .article { max-width: 42rem; margin: 0 auto; }
  .article-back {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2.5rem;
    display: inline-block; cursor: pointer;
  }
  .article-back:hover { color: var(--paprika); }
  .article-eyebrow {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.5rem;
  }
  .article-title {
    font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05;
    letter-spacing: -0.02em; color: var(--ink); font-weight: 400; margin-bottom: 1.25rem;
  }
  .article-divider {
    border-bottom: 1px solid rgba(26,26,26,0.15);
    margin: 2rem 0 2.5rem;
  }
  .article-body p {
    font-family: var(--body); font-size: 1.1875rem; line-height: 1.75;
    color: var(--ink-soft); margin-bottom: 1.6rem;
  }
  .article-body ul { padding-left: 1.75rem; margin-bottom: 1.6rem; }
  .article-body li { font-family: var(--body); font-size: 1.1875rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 0.6rem; }
  .article-body p strong { color: var(--ink); font-weight: 600; }
  .article-body em { font-style: italic; }
  .article-body a { color: var(--paprika); text-decoration: none; border-bottom: 1px solid rgba(229, 92, 76,0.4); transition: border-color 0.2s ease; }
  .article-body a:hover { border-bottom-color: var(--paprika); }
  .article-signoff { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 2px solid var(--paprika); }
  .article-signoff-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.85rem; }
  .article-signoff p { font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); margin: 0; }
  .article-signoff a { color: var(--paprika); text-decoration: none; border-bottom: 1px solid rgba(229, 92, 76,0.4); transition: border-color 0.2s ease; }
  .article-signoff a:hover { border-bottom-color: var(--paprika); }
  .article-lead { font-size: 1.35rem !important; line-height: 1.6 !important; color: var(--ink) !important; }
  .article-body .pull-quote { margin-left: 0; max-width: none; }
  .article-action {
    background: rgba(229, 92, 76,0.08); border-left: 3px solid var(--paprika);
    padding: 1.75rem 2rem; margin: 2.5rem 0;
  }
  .article-action .label {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--paprika-deep); margin-bottom: 0.75rem;
  }
  .article-action p {
    font-family: var(--display); font-size: 1.5rem; line-height: 1.3;
    color: var(--ink); margin: 0; font-weight: 400;
  }
  .article-signoff {
    font-family: var(--display); font-style: italic; font-size: 1.25rem;
    color: var(--ink); margin-top: 2.5rem;
  }
  .article-share {
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(26,26,26,0.15);
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  }
  .article-share-label {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--ink); margin-right: 0.5rem;
  }
  .article-share a, .article-share button {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink); cursor: pointer; background: none;
    border: 1px solid var(--ink); padding: 0.55rem 1.1rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .article-share a:hover, .article-share button:hover, .article-share .copied {
    background: var(--paprika); border-color: var(--paprika); color: var(--bg); transform: translateY(-1px);
  }
  @media (max-width: 600px) {
    .ym-subscribe { padding: 2.25rem 1.5rem; }
    .ym-subscribe-form button { width: 100%; }
    .article-body p { font-size: 1.0625rem; }
    .article-action p { font-size: 1.3rem; }
  }

.article-nav { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(26,26,26,0.15); }
.article-nav a { text-decoration: none; display: inline-block; }
.article-nav.next { text-align: right; }
.article-nav-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paprika); margin-bottom: 0.5rem; }
.article-nav-title { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; color: var(--ink); font-weight: 400; transition: color 0.2s ease; max-width: 30ch; }
.article-nav.next .article-nav-title { margin-left: auto; }
@media (hover: hover) { .article-nav a:hover .article-nav-title { color: var(--paprika); } }
@media (max-width: 600px) { .article-nav-title { font-size: 1.25rem; } }
  .article-nav.both { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
  .article-nav.both .nav-next { text-align: right; margin-left: auto; }
  .article-nav.both .nav-next .article-nav-title { margin-left: auto; }
  .article-sources { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(26,26,26,0.15); }
  .article-sources-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.85rem; }
  .article-sources ol { margin: 0; padding-left: 1.25rem; }
  .article-sources li { font-family: var(--body); font-size: 0.85rem; line-height: 1.6; color: var(--ink-muted); margin-bottom: 0.45rem; }
  .article-sources a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid rgba(26,26,26,0.25); transition: color 0.2s ease, border-color 0.2s ease; }
  .article-sources a:hover { color: var(--paprika); border-bottom-color: var(--paprika); }
  /* Hero: underline the word that matters, after the fact */
  .h1 em.feels-p { color: var(--paprika); }

/* ===== cursor.css (merged for the 9 main pages: tap-highlight + custom cursor) ===== */
/* Suppress the mobile browser's default tap-highlight box */
a, button, input, textarea, select, label, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Creator Group custom cursor — desktop pointers only */
@media (hover: hover) and (pointer: fine) {
  html, body, a, button, input, textarea, select, label,
  a *, button *, [role="button"], [role="button"] * {
    cursor: none !important;
  }

  .cg-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    /* white + difference blend: reads dark on the light bg, inverts over ink headlines */
    background: #FFFFFF;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 999999;
    transition:
      width 0.25s ease,
      height 0.25s ease,
      margin 0.25s ease,
      background-color 0.25s ease,
      border-radius 0.25s ease,
      opacity 0.2s ease;
    will-change: transform;
  }

  .cg-cursor.is-hidden { opacity: 0; }

  /* Links & buttons: bloom into a translucent paprika circle */
  .cg-cursor.is-link {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    background: rgba(229, 92, 76, 0.72);
    mix-blend-mode: normal;
  }

  /* Text fields: become a blinking writer's caret */
  .cg-cursor.is-text {
    width: 2px;
    height: 26px;
    margin: -13px 0 0 -1px;
    border-radius: 1px;
    background: #1A1A1A;
    mix-blend-mode: normal;
    animation: cg-caret-blink 1.1s steps(1) infinite;
  }

  @keyframes cg-caret-blink {
    50% { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-cursor {
    transition: opacity 0.2s ease;
    animation: none !important;
  }
}


  /* Inline article subscribe: light, compact variant of .ym-subscribe placed
     near the top of an article so cold readers from search/social see the
     offer before they scroll away. Shares .ym-subscribe markup so the
     delegated js-kit-form handler and its .done success state still work. */
  .ym-subscribe.ym-inline {
    background: rgba(229, 92, 76, 0.07);
    border-left: 3px solid var(--paprika);
    color: var(--ink);
    padding: 1.75rem 2rem;
    margin: 2.5rem 0;
  }
  .ym-subscribe.ym-inline .ym-subscribe-label,
  .ym-subscribe.ym-inline .ym-subscribe-label-done {
    color: var(--paprika-deep); opacity: 1; margin-bottom: 0.7rem;
  }
  .ym-subscribe.ym-inline .ym-subscribe-head {
    color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    margin-bottom: 0.4rem; max-width: 30ch;
  }
  .ym-subscribe.ym-inline .ym-subscribe-sub {
    color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6;
    margin-bottom: 1.25rem; max-width: 48ch;
  }
  .ym-subscribe.ym-inline .ym-subscribe-form { max-width: 30rem; }
  .ym-subscribe.ym-inline .ym-subscribe-form input[type="email"] {
    color: var(--ink); border-bottom-color: rgba(26, 26, 26, 0.25);
  }
  .ym-subscribe.ym-inline .ym-subscribe-form input[type="email"]::placeholder {
    color: rgba(26, 26, 26, 0.4);
  }
  .ym-subscribe.ym-inline .ym-subscribe-note {
    color: var(--ink-muted); margin-top: 0.9rem;
  }
  .ym-subscribe.ym-inline .ym-subscribe-success {
    color: var(--ink); font-size: clamp(1.1rem, 2vw, 1.35rem);
  }


  /* Keep the inline CTA rendering identically on phones: stop the shared
     mobile rule stretching the button to full width (which made the paprika
     read much heavier than desktop), block iOS native input/button chrome,
     and open up the gap under the form. */
  .ym-subscribe.ym-inline .ym-subscribe-form input[type="email"],
  .ym-subscribe.ym-inline .ym-subscribe-form button {
    -webkit-appearance: none; appearance: none; border-radius: 0;
  }
  @media (max-width: 600px) {
    .ym-subscribe.ym-inline .ym-subscribe-form button { width: auto; }
    .ym-subscribe.ym-inline .ym-subscribe-note { margin-top: 2.1rem; }
  }


  /* =========================================================================
     Words That Work archive, the Fundraising Guide and 404 moved onto this
     stylesheet in Nov 2026 (assets/wtw.css retired). These are the rules those
     pages needed that the routed pages never used: long-form headings and
     quotes inside .article-body, the archive list, and a back link that sits
     at the END of an article instead of the top.
     ========================================================================= */
  .article-body h2 {
    font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.2;
    letter-spacing: -0.01em; color: var(--ink); font-weight: 400; margin: 2.75rem 0 1rem;
  }
  .article-body h3 {
    font-family: var(--body); font-size: 1.15rem; color: var(--ink);
    font-weight: 700; margin: 2rem 0 0.75rem;
  }
  .article-body h2 strong, .article-body h3 strong { font-weight: inherit; }
  .article-body strong { color: var(--ink); font-weight: 600; }
  .article-body ol { padding-left: 1.75rem; margin-bottom: 1.6rem; }
  .article-body ol li {
    font-family: var(--body); font-size: 1.1875rem; line-height: 1.75;
    color: var(--ink-soft); margin-bottom: 0.6rem;
  }
  .article-body blockquote {
    border-left: 3px solid var(--paprika); padding-left: 1.25rem;
    margin: 0 0 1.6rem; font-style: italic; color: var(--ink);
  }
  .article-body blockquote p { color: var(--ink); margin-bottom: 0.6rem; }
  .article-body blockquote p:last-child { margin-bottom: 0; }
  .article-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0 1.6rem; }
  .article-back.at-end { margin-top: 2.5rem; margin-bottom: 0; }
  .tier-engagements li strong { color: var(--ink); font-weight: 600; }

  /* Words That Work archive index */
  .archive { max-width: 48rem; margin: 0 auto; }
  .archive-label {
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--paprika); margin-bottom: 1rem;
  }
  .archive-head {
    font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.05;
    letter-spacing: -0.02em; color: var(--ink); font-weight: 400; margin-bottom: 0.75rem;
  }
  .archive-intro {
    font-family: var(--body); font-size: 1.15rem; line-height: 1.6;
    color: var(--ink-soft); max-width: 46ch; margin-bottom: 1rem;
  }
  .archive-intro:last-of-type { margin-bottom: 2.75rem; }
  .archive-intro a { color: var(--paprika); text-decoration: none; border-bottom: 1px solid rgba(229, 92, 76, 0.4); }
  .archive-intro a:hover { border-bottom-color: var(--paprika); }
  .archive-list { border-top: 2px solid var(--ink); }
  .archive-item {
    display: flex; gap: 1.75rem; align-items: baseline;
    padding: 1.15rem 0; border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  }
  .archive-item-date {
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-muted); flex: 0 0 6.5rem;
  }
  .archive-item-title {
    font-family: var(--display); font-size: 1.25rem; line-height: 1.3;
    color: var(--ink); font-weight: 400; transition: color 0.2s ease;
  }
  .archive-item:hover .archive-item-title { color: var(--paprika); }
  @media (max-width: 640px) {
    .archive-item { flex-direction: column; gap: 0.25rem; }
    .archive-item-date { flex-basis: auto; }
  }