/* Builders Club writing section. Shared by /writing pages.
   Base, nav and footer copied from index.html. Keep in sync if those change. */

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  h1, h2, h3 { font-weight: 400; }

  :root {
    --paper:     #f5f3ee;
    --paper-mid: #ede9e2;
    --paper-low: #e5e1d8;
    --rule:      #d4cfc6;
    --rule-light:#e0dcd5;
    --ink:       #1a1916;
    --ink-mid:   #4a4845;
    --ink-dim:   #636160;
    --teal:      #68D2DF;
    --accent-on-dark:  #68d2df;
    --accent-on-light: #00717f;
    --teal-dark: #3FA8B5;
    --teal-dim:  rgba(104,210,223,0.15);
    --teal-pale: rgba(104,210,223,0.07);
    --dark-panel:#1a1916;
    --dark-rule: #2e2c28;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; text-decoration: none; }

  .skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(-160%);
    transition: transform 0.15s ease;
  }
  .skip-link:focus { transform: translateY(0); }
  :focus-visible {
    outline: 3px solid var(--accent-on-light, #00717f);
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  
  /* ── NAV ── */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 56px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
  }

  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nav-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .nav-wordmark {
    font-family: 'DM Mono', monospace;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
  }

  .nav-links a {
    font-family: 'DM Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mid);
    transition: color 0.15s;
  }

  .nav-links a:hover { color: var(--ink); }

  .nav-apply {
    font-family: 'DM Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    color: var(--ink);
    padding: 8px 16px;
    transition: background 0.15s, color 0.15s;
  }

  .nav-apply:hover {
    background: var(--ink);
    color: var(--paper);
  }

  .nav-right { display: flex; align-items: center; gap: 12px; }

  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule);
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 8px 12px;
  }

  
  /* ── FOOTER ── */
  footer {
    border-top: 1px solid var(--rule);
    background: var(--paper-mid);
    padding: 56px 40px 24px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rule);
  }
  .footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
  .footer-brand-row { display: flex; align-items: center; gap: 10px; }
  .footer-logo { width: 28px; height: 28px; object-fit: contain; }
  .footer-wordmark {
    font-family: 'DM Mono', monospace;
    font-size: 14px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  }
  .footer-tagline {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: 18px; line-height: 1.4;
    color: var(--ink-mid);
  }
  .footer-col { display: flex; flex-direction: column; gap: 10px; }
  .footer-col-title {
    font-family: 'DM Mono', monospace;
    font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-dim);
    margin-bottom: 6px;
  }
  .footer-col a, .footer-col span {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; color: var(--ink-mid);
    font-weight: 300; line-height: 1.5;
    transition: color 0.15s;
  }
  .footer-col a:hover { color: var(--ink); }
  .ai-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 24px 0;
    border-bottom: 1px solid var(--rule);
  }
  .ai-summary-title {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .ai-summary-links {
    display: flex;
    flex: 1 1 520px;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ai-summary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-mid);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .ai-summary-link:hover {
    color: var(--ink);
    border-color: var(--ink-mid);
    background: var(--paper);
  }

  .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px;
    font-family: 'DM Mono', monospace;
    font-size: 13px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-dim);
  }
  .footer-bottom a {
    color: var(--ink); border-bottom: 1px solid var(--teal);
    padding-bottom: 2px; transition: opacity 0.15s;
  }
  .footer-bottom a:hover { opacity: 0.7; }

  
    .btn-primary .arr, .btn-primary-teal .arr, .btn-secondary .arr, .nav-apply .arr { transition: none; }
  .btn-primary .arr, .btn-primary-teal .arr, .btn-secondary .arr, .nav-apply .arr { display: inline-block; transition: transform .2s ease; }

  /* ── ARTICLE ── */
  article, .index { padding:88px 24px 96px; }
  .col { max-width:var(--measure); margin:0 auto; }
  .back {
    font-family:'DM Mono', monospace; font-size:14px; color:var(--ink-dim);
    text-decoration:none; display:inline-block; margin-bottom:40px;
  }
  .back:hover { color:var(--ink); }
  h1 {
    font-family:'DM Serif Display', serif; font-weight:400;
    font-size:clamp(44px, 7vw, 84px); line-height:1.02; letter-spacing:-0.01em;
    max-width:12ch; margin-bottom:28px;
  }
  .deck {
    font-size:clamp(19px, 1.6vw, 23px); line-height:1.45; color:var(--ink-mid);
    font-weight:300; max-width:34ch; margin-bottom:36px;
  }
  .byline {
    font-family:'DM Mono', monospace; font-size:14px; color:var(--ink-dim);
    padding-bottom:40px; border-bottom:1px solid var(--rule); margin-bottom:48px;
  }
  .lede {
    font-family:'DM Serif Display', serif; font-size:clamp(26px, 2.6vw, 34px);
    line-height:1.25; margin-bottom:32px;
  }
  article p { margin-bottom:1.25em; }
  article p a { text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:3px; }
  article p a:hover { text-decoration-color:var(--ink); }
  h2 {
    font-family:'DM Serif Display', serif; font-weight:400;
    font-size:clamp(28px, 3vw, 38px); line-height:1.15;
    margin:72px 0 24px; padding-top:32px; border-top:1px solid var(--rule);
  }
  blockquote {
    font-family:'DM Serif Display', serif; font-style:italic;
    font-size:clamp(22px, 2.2vw, 28px); line-height:1.3;
    border-left:3px solid var(--teal); padding:4px 0 4px 24px; margin:36px 0;
  }
  blockquote cite {
    display:block; font-family:'DM Mono', monospace; font-style:normal;
    font-size:13px; color:var(--ink-dim); margin-top:12px;
  }
  .kicker { font-family:'DM Serif Display', serif; font-size:clamp(24px, 2.4vw, 30px); line-height:1.25; margin-top:40px; }

  /* FIGURES */
  figure { max-width:var(--wide); margin:56px auto; }
  figcaption { font-size:14px; line-height:1.5; color:var(--ink-dim); margin-top:14px; max-width:var(--measure); }
  .fig-title { font-family:'DM Serif Display', serif; font-size:22px; line-height:1.25; margin-bottom:24px; }

  /* Stat panel */
  .stats {
    background:var(--dark-panel); color:var(--paper);
    display:grid; grid-template-columns:repeat(4, 1fr);
  }
  .stat { padding:32px 24px; border-right:1px solid var(--dark-rule); }
  .stat:last-child { border-right:0; }
  .stat-n { font-family:'DM Serif Display', serif; font-size:clamp(36px, 4vw, 52px); line-height:1; margin-bottom:12px; }
  .stat-n small { font-size:.45em; color:#a8a49c; }
  .stat-l { font-size:14px; line-height:1.4; color:#c9c5bd; }

  /* Horizontal bars */
  .hbars { list-style:none; border-top:1px solid var(--rule); }
  .hbar { display:grid; grid-template-columns:minmax(0,16rem) 1fr 3.5rem; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--rule); }
  .hbar-name { font-size:16px; line-height:1.3; }
  .hbar-track { height:14px; background:var(--paper-mid); }
  .hbar-fill { height:100%; background:var(--ink-mid); }
  .hbar.is-first .hbar-fill { background:var(--ink); }
  .hbar-n { font-family:'DM Mono', monospace; font-size:14px; text-align:right; color:var(--ink-mid); }

  /* Vertical bars */
  .vbars { display:grid; grid-template-columns:repeat(15, 1fr); gap:6px; align-items:end; height:240px; border-bottom:1px solid var(--ink); }
  .vbar { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
  .vbar-fill { width:100%; background:var(--ink-mid); min-height:2px; }
  .vbar.surge .vbar-fill { background:var(--teal); }
  .vbar.partial .vbar-fill { background:repeating-linear-gradient(135deg, var(--ink-mid) 0 3px, transparent 3px 7px); border:1px solid var(--ink-mid); }
  .vbar-n { font-family:'DM Mono', monospace; font-size:12px; color:var(--ink-mid); margin-bottom:6px; }
  .vaxis { display:grid; grid-template-columns:repeat(15, 1fr); gap:6px; margin-top:8px; }
  .vaxis span { font-family:'DM Mono', monospace; font-size:11px; color:var(--ink-dim); text-align:center; }

  .sr-only { position:absolute; left:0; top:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  figure { position:relative; }

  .endnote { margin-top:72px; padding-top:32px; border-top:1px solid var(--rule); font-size:15px; color:var(--ink-mid); }
  .endnote p { margin-bottom:.8em; }
  .apply-line { margin-top:24px; }
  .apply-line a {
    font-family:'DM Mono', monospace; font-size:15px; letter-spacing:.08em; text-transform:uppercase;
    border:1px solid var(--ink); padding:10px 18px; text-decoration:none; display:inline-block;
  }
  .apply-line a:hover { background:var(--ink); color:var(--paper); }

  
  :root { --measure:680px; --wide:860px; }
  .back:hover { color:var(--accent-on-light); }
  @media (max-width:900px) {
    article, .index { padding:56px 20px 72px; }
    .stats { grid-template-columns:repeat(2, 1fr); }
    .stat:nth-child(2) { border-right:0; }
    .stat:nth-child(-n+2) { border-bottom:1px solid var(--dark-rule); }
  }
  @media (max-width:560px) {
    .hbar { grid-template-columns:1fr 3rem; row-gap:6px; }
    .hbar-name { grid-column:1 / -1; }
    .vaxis span { font-size:9px; }
    .vbar-n { font-size:10px; }
  }

  .index h1 { margin-bottom:20px; }
  .index .deck { margin-bottom:56px; }
  .posts { list-style:none; border-top:1px solid var(--rule); }
  .post a { display:grid; grid-template-columns:9rem 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--rule); }
  .post-date { font-family:'DM Mono', monospace; font-size:14px; color:var(--ink-dim); padding-top:8px; }
  .post-title { display:block; font-family:'DM Serif Display', serif; font-size:clamp(26px, 2.6vw, 34px); line-height:1.15; margin-bottom:8px; }
  .post-sum { color:var(--ink-mid); }
  .post a:hover .post-title { text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:4px; }
  @media (max-width:560px){ .post a { grid-template-columns:1fr; gap:6px; } .post-date { padding-top:0; } }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 0 24px; }
    .nav-toggle { display: block; }
    .nav-links {
      display: none;
      position: absolute;
      top: 56px; left: 0; right: 0;
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
      flex-direction: column;
      gap: 0;
      padding: 4px 24px 12px;
    }
    .nav-links.open { display: flex; }
    .nav-links li { border-bottom: 1px solid var(--rule-light); }
    .nav-links li:last-child { border-bottom: none; }
    .nav-links a { display: block; padding: 14px 0; }
    footer { padding: 40px 24px 20px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 32px; }
    .footer-brand { grid-column: span 2; }
    .ai-summary { align-items: flex-start; }
    .ai-summary-links { flex-basis: 100%; justify-content: flex-start; }
    .ai-summary-link { flex: 1 1 calc(50% - 8px); }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  }

  @media (max-width: 360px) {
    nav { padding-left: 10px; padding-right: 10px; }
    .nav-right { gap: 8px; }
  }