/* Work — a reading list. Originally rail-less; now uses the shared railed
     layout (280px rail + content) for consistency with the rest of the site,
     while keeping its list-specific typography. The shared styles.css provides
     .page / .rail / nav; this file only styles the reading-list content. */
  .content.reading { padding: 0 56px; }
  .entry { scroll-margin-top: calc(var(--nav-h) + 16px); }   /* clear the sticky nav on TOC jumps */

  /* Page intro */
  .intro { padding: 88px 0 64px; border-bottom: 1px solid var(--rule); }
  .eyebrow { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; margin-bottom: 24px; }
  .eyebrow .ja { color: var(--subtle); }
  /* Matches .intro h1 on About and .frame h1 on Careers exactly. It was
     clamp(56px, 7vw, 96px) at -0.040em, which rendered 96px against their
     115.2px at 1440 — 17% smaller for the same kind of thing, a short
     single-word page title. The mobile floor is 56px on all three, so the
     mismatch only showed on desktop. AURA (168px) and Home (76px, a whole
     sentence) are deliberately outside this group. */
  h1 { font-weight: 500; font-size: clamp(56px, 8vw, 120px); line-height: 0.92; letter-spacing: -0.050em; margin-bottom: 36px; }
  .lede { font-size: 22px; line-height: 1.5; letter-spacing: -0.012em; max-width: 60ch; color: var(--ink); text-wrap: pretty; }
  .lede .key { background: linear-gradient(transparent 60%, var(--magic) 60%); padding: 0 2px; }

  /* List header */
  .list-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; padding: 32px 0 14px; border-bottom: 1px solid var(--ink); font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); gap: 24px; }
  .list-head .center { justify-self: center; color: var(--subtle); }
  .list-head .right { justify-self: end; }

  /* Entry list */
  .entries { display: grid; }
  .entry { display: grid; grid-template-columns: 88px minmax(0, 1fr) 200px; gap: 32px; padding: 32px 0 36px; border-bottom: 1px solid var(--rule); align-items: baseline; transition: padding 0.15s; }
  /* Hover is an enhancement, not a state. On touch, tapping a link applies
     :hover and leaves it applied until the next tap elsewhere: measured on a
     390px touch context, .band-row stayed padded 16px, .entry 12px, .deeper's
     rule 2px and .social's underline ink — so a row you merely visited kept
     reading as selected. Guarding on (hover: hover) means pointers keep every
     effect and touch gets none of the residue. Each rule is wrapped where it
     stands rather than collected into one block, so cascade order is
     untouched. */
  @media (hover: hover) {
    .entry:hover { padding-left: 12px; }
  }
  .entry:last-child { border-bottom: none; }

  .entry-num { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--subtle); text-transform: uppercase; padding-top: 6px; }

  .entry-body { display: flex; flex-direction: column; gap: 12px; }
  .entry-tags { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
  .type-tag { border: 1px solid var(--ink); padding: 3px 8px 4px; color: var(--ink); }
  .type-tag.tw { background: transparent; }
  .type-tag.es { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .type-tag.wp { background: var(--magic); border-color: var(--ink); }
  .type-tag.fe { background: transparent; border-style: dashed; }

  .entry-title { font-size: 32px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; max-width: 28ch; }
  @media (hover: hover) {
    .entry:hover .entry-title { background: linear-gradient(transparent 88%, var(--magic) 88%); padding: 0 2px; margin-left: -2px; }
  }

  .entry-desc { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 60ch; text-wrap: pretty; }

  .entry-meta { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtle); text-align: right; line-height: 1.7; }
  .entry-meta .arrow { display: block; margin-top: 14px; color: var(--ink); font-size: 13px; }

  /* Page foot */
  .foot { padding: 56px 0 80px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; border-top: 1px solid var(--ink); margin-top: 24px; }
  .foot p { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
  .foot p strong { color: var(--ink); font-weight: 500; }
  .foot .meta { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--subtle); text-align: right; line-height: 1.7; }

  @media (max-width: 800px) {
    .content.reading { padding: 0 24px; }
    .intro { padding: 56px 0 40px; }
    .entry { grid-template-columns: 1fr; gap: 12px; }
    .entry-num, .entry-meta { text-align: left; }
    .entry-title { font-size: 24px; }
  }