/* The personal-blog register from João's design system (blog.html), unchanged, plus a short index-list addition at the end. Tokens come from jds.css. */
/* ── The personal-blog register ──────────────────────────────────────────
     Layout grammar studied from stephendiehl.com: an all-serif personal
     site — fixed collapsible topic sidebar, 44rem measure, date + tag-pill
     meta row, a drop cap on the opening paragraph, hairline-underline
     links, and a Reading Mode that strips every piece of chrome.
     Their layout ideas; JDS tokens and voice. No branding copied.
     Faces stay system-only per JDS rules: a Palatino-first humanist stack
     stands in for their EB Garamond. */
  :root {
    --blog-serif: Palatino, "Palatino Linotype", "Book Antiqua", "Iowan Old Style", Georgia, serif;
    --sidebar-w: 15rem; --measure: 44rem;
    --paper: var(--jds-bg); --ink2: var(--jds-ink);
    --rule: color-mix(in srgb, var(--jds-quiet) 26%, transparent);
    --rule-soft: color-mix(in srgb, var(--jds-quiet) 16%, transparent);
    --ease: cubic-bezier(.4,0,.2,1);
  }
  body { font-family: var(--blog-serif); background: var(--paper); overflow-x: clip; }
  html[data-theme="light"] body.reading { background: #fcfaf6; } /* reading mode warms the paper, light only */

  /* Sidebar: the site's whole identity — name, topics, contact. */
  .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-w);
    overflow-y: auto; padding: 2rem 1.6rem; box-sizing: border-box; z-index: 30;
    transition: transform .3s var(--ease); scrollbar-width: thin; }
  .sidebar .who { font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink2);
    text-decoration: none; display: block; margin-bottom: 2.2rem; }
  .sidebar ul { list-style: none; margin: 0 0 2rem; padding: 0; }
  .sidebar li a { display: block; padding: .26rem 0; color: var(--jds-muted); text-decoration: none;
    font-size: 1rem; transition: color .15s var(--ease), padding-left .2s var(--ease); }
  .sidebar li a:hover { color: var(--ink2); padding-left: .3rem; }
  .sidebar li a[aria-current="page"] { color: var(--ink2); }
  .sidebar .group-label { font: 11px var(--jds-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--jds-quiet); margin: 0 0 .5rem; }
  .sidebar .jds-btn { font: 12px var(--jds-mono); margin-top: .6rem; }
  body.side-closed .sidebar { transform: translateX(-100%); }

  /* The collapse toggle rides the sidebar's edge. */
  .side-toggle { position: fixed; top: 1.4rem; left: calc(var(--sidebar-w) - 12px); width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center; background: var(--jds-surface);
    border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; z-index: 50; opacity: .65;
    color: var(--jds-quiet); transition: left .3s var(--ease), opacity .15s var(--ease); }
  .side-toggle:hover { opacity: 1; }
  .side-toggle svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
  body.side-closed .side-toggle { left: .5rem; }
  body.side-closed .side-toggle svg { transform: rotate(180deg); }

  .content { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left .3s var(--ease); }
  body.side-closed .content { margin-left: 0; }
  .page { max-width: var(--measure); margin: 0 auto; padding: 3.2rem 1.6rem 4rem; }

  /* Post meta, below the title: date on the left, the reading buttons on the
     right; the tag pills on their own row; then a soft rule. All of it stays
     visible in Reading Mode — meta is part of the post, not chrome. */
  .post-meta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    font-size: .85rem; color: var(--jds-quiet); margin: .2rem 0 .9rem; }
  .post-meta .date { margin-right: auto; }
  .post-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
  .tag { display: inline-block; border: 1px solid color-mix(in srgb, var(--jds-quiet) 55%, transparent);
    border-radius: 999px; padding: .08rem .6rem; font-size: .72rem; letter-spacing: .04em;
    text-transform: lowercase; color: var(--jds-quiet); text-decoration: none;
    transition: color .15s var(--ease), border-color .15s var(--ease); }
  .tag:hover { color: var(--ink2); border-color: var(--jds-quiet); }
  .meta-rule { border: 0; border-top: 1px solid var(--rule-soft); margin: 1.3rem 0 1.9rem; }
  .rm-btn { display: inline-flex; align-items: center; gap: .35rem; background: transparent; border: none;
    color: var(--jds-quiet); font: inherit; font-size: .8rem; cursor: pointer; padding: 0;
    transition: color .15s var(--ease); }
  .rm-btn:hover { color: var(--ink2); }
  .rm-btn svg { width: 15px; height: 15px; }
  .rm-btn[aria-pressed="true"] { color: var(--jds-orange-deep); }

  /* Type: headline modest, body generous, links on a hairline. */
  h1 { font-size: 2.1rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 .6rem; }
  /* The lead (standfirst): our addition to the grammar — the original runs
     straight into the drop cap. Italic, a half-step larger than body. */
  .lead { font-style: italic; color: var(--jds-muted); font-size: 1.08rem; line-height: 1.55; margin: 0 0 1.9rem; }
  .prose { font-size: 18.2px; line-height: 1.7; }
  .prose p { margin: 0 0 1.35rem; }
  .prose h2 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; margin: 3rem 0 1rem; }
  .prose a { color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--rule);
    transition: border-color .2s var(--ease); }
  .prose a:hover { border-bottom-color: var(--jds-orange); }
  .prose blockquote { margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 2px solid var(--rule);
    color: var(--jds-muted); }
  .prose blockquote p { margin: 0; }
  /* The drop cap: opening paragraph only. */
  .prose > p.opener::first-letter { font-size: 3.6rem; font-weight: 500; line-height: .85;
    float: left; margin: .06em .12em 0 0; color: var(--ink2); }
  .prose .aside-note { font-size: .85rem; color: var(--jds-quiet); }

  footer.site { border-top: 1px solid var(--rule-soft); padding: 2rem 1.6rem; text-align: center;
    font-size: .8rem; color: var(--jds-quiet); }

  /* ── Reading Mode: strip the chrome, keep the words. ── */
  body.reading .sidebar, body.reading .side-toggle, body.reading footer.site { display: none; }
  body.reading .content { margin-left: 0; }
  body.reading .page { max-width: 40rem; padding-top: 3.5rem; }
  body.reading.wide .page { max-width: 60rem; }
  body.reading .meta-rule { margin-bottom: 2.4rem; }
  body.reading .prose { font-size: 19px; line-height: 1.8; }
  body.reading .prose p { margin-bottom: 1.5rem; }
  body.reading h1 { font-size: 2.3rem; }
  body.wide .page { max-width: 60rem; } /* Wider works in either mode, like the original */

  /* Mobile: the sidebar becomes a plain top strip. */
  @media (max-width: 899px) {
    .sidebar { position: static; height: auto; width: auto; padding: 1.2rem 1.4rem .4rem; transform: none !important; }
    .sidebar .who { margin-bottom: .7rem; }
    .sidebar ul { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin-bottom: .6rem; }
    .sidebar .group-label { display: none; }
    .sidebar ul.contact { display: none; }
    .side-toggle { display: none; }
    .content { margin-left: 0 !important; }
    body.reading .sidebar { display: none; }
  }

  /* ── Cápsula do Tempo blog additions (index list) ── */
  .post-list { list-style: none; margin: 0; padding: 0; }
  .post-list li { padding: 1.1rem 0; border-bottom: 1px solid var(--rule-soft); }
  .post-list h2 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 .3rem; }
  .post-list h2 a { color: var(--ink2); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
  .post-list h2 a:hover { border-bottom-color: var(--jds-orange); }
  .post-list .date { font-size: .82rem; color: var(--jds-quiet); }
  .post-list p { margin: .35rem 0 0; color: var(--jds-muted); font-size: 1rem; line-height: 1.55; }
  .prose h3 { font-size: 1.2rem; font-weight: 650; margin: 2rem 0 .7rem; }
  .prose ul, .prose ol { margin: 0 0 1.35rem 1.3rem; }
  .prose li { margin: .25rem 0; }
  .prose code { font: .9em var(--jds-mono); }
  .byline { font-size: .85rem; color: var(--jds-quiet); margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule-soft); }