@layer elements {

  /* ── NOW HEADER ──────────────────────────────────────────────────────── */
  .now-header {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--color-rule);
  }

  .now-header__label {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .now-header__label::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-rule);
  }

  .now-header__title {
    font-size: var(--size-3xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    margin-bottom: 20px;
  }

  .now-header__meta {
    display: flex;
    align-items: baseline;
    gap: 24px;
  }

  .now-header__updated {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--color-ink-muted);
    letter-spacing: 0.06em;
  }

  .now-header__updated strong {
    color: var(--color-ink-mid);
    font-weight: 400;
  }

  .now-header__nownow {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--color-ink-muted);
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  .now-header__nownow:hover { color: var(--color-accent); }

  /* ── NOW BODY ────────────────────────────────────────────────────────── */
  .now-body {
    padding: 0 0 96px;
  }

  .main--now {
    max-width: calc(var(--measure) + var(--gap) * 2);
  }

  /* ── NOW SECTION ─────────────────────────────────────────────────────── */
  .now-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--color-rule);
  }

  .now-section:last-child { border-bottom: none; }

  .now-section__label {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .now-section__label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-rule);
  }

  /* ── NOW ITEMS ───────────────────────────────────────────────────────── */
  .now-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .now-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 24px;
    padding: 14px 20px;
    background: var(--color-block-bg);
  }

  .now-item__title {
    font-family: var(--font-body);
    font-size: var(--size-base);
    color: var(--color-ink);
    line-height: 1.35;
    margin-bottom: 3px;
  }

  .now-item__title a {
    color: inherit;
    text-decoration: none;
  }

  .now-item__title a:hover { color: var(--color-accent); }

  .now-item__sub {
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--size-sm);
    color: var(--color-ink-muted);
  }

  .now-item__note {
    font-family: var(--font-mono);
    font-size: var(--size-xs);
    color: var(--color-ink-muted);
    letter-spacing: 0.06em;
    white-space: nowrap;
    align-self: center;
  }

  .now-item__note--active { color: var(--color-accent); }

  /* ── WORK ITEMS ──────────────────────────────────────────────────────── */
  .now-item--work {
    display: block;
    padding: 16px 20px 18px;
  }

  .now-item--work .now-item__title {
    font-size: var(--size-md);
    font-weight: 500;
    margin-bottom: 5px;
  }

  .now-item--work .now-item__desc {
    font-family: var(--font-body);
    font-size: var(--size-sm);
    font-style: italic;
    color: var(--color-ink-mid);
    line-height: 1.5;
    margin-bottom: 8px;
  }

  .now-item--work .now-item__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .now-item__tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    border: 1px solid var(--color-rule);
    padding: 2px 6px;
  }

  /* ── THINKING SECTION ────────────────────────────────────────────────── */
  .now-thinking {
    font-size: var(--size-base);
    color: var(--color-ink-mid);
    line-height: var(--leading-read);
    font-style: italic;
    padding: 4px 0;
  }

  .now-thinking p { margin-bottom: 1em; }
  .now-thinking p:last-child { margin-bottom: 0; }

  /* ── RESPONSIVE ──────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    .now-header { padding: 48px 0 36px; }
    .now-header__title { font-size: var(--size-2xl); }
    .main--now { max-width: 100%; }
  }

}