body { background: #1b1b1a; color: rgba(241,235,226,.8); min-height: 100vh; }
  body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(120% 70% at 50% 0%, #3a3a39 0%, #262625 45%, #1b1b1a 100%); z-index: -1; }

  .hub { max-width: 480px; margin: 0 auto; padding: 0 0 40px; position: relative; }
  .hub__share { position: absolute; top: 16px; right: 16px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(23,22,20,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--paper); display: grid; place-items: center; cursor: pointer; transition: background .3s; }
  .hub__share:hover { background: rgba(23,22,20,.6); }
  .toast { position: fixed; left: 50%; top: 20px; transform: translate(-50%, -80px); background: var(--paper); color: var(--ink); padding: 10px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; transition: transform .4s var(--ease); z-index: 300; }
  .toast.is-on { transform: translate(-50%, 0); }

  .hub__photo { position: relative; aspect-ratio: 900 / 940; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 52%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 52%, transparent 97%);
    mask-composite: intersect; }
  .hub__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .hub__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,27,26,0) 45%, rgba(27,27,26,.45) 80%); }
  .hub__id { position: relative; text-align: center; margin-top: -130px; padding: 0 24px; z-index: 2; }
  .hub__id h1 { font-family: var(--serif); font-weight: 400; font-size: 50px; line-height: 1; color: var(--paper); letter-spacing: .005em; }
  .hub__roles { margin: 14px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); }
  .hub__roles i { font-style: normal; opacity: .45; margin: 0 6px; }
  .hub__bio { margin: 18px auto 0; max-width: 340px; font-size: 15px; line-height: 1.55; color: rgba(241,235,226,.62); }

  .stack { padding: 34px 20px 0; display: grid; gap: 12px; }
  .label { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(241,235,226,.42); margin: 14px 4px 2px; }

  /* card destaque — Jornada */
  .feat { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--paper); min-height: 210px; isolation: isolate; transition: transform .45s var(--ease); }
  .feat:hover { transform: translateY(-3px); }
  .feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
  .feat:hover img { transform: scale(1.05); }
  .feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,22,20,.15) 0%, rgba(23,22,20,.88) 78%); }
  .feat__body { padding: 22px 22px 20px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 210px; }
  .badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; background: var(--sea); color: var(--sea-ink); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 6px 11px; border-radius: 100px; margin-bottom: auto; }
  .badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--sea-ink); animation: pulse 1.8s infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
  .feat h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; margin-top: 40px; }
  .feat h2 em { color: var(--sea); }
  .feat__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: rgba(241,235,226,.72); }
  .go { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); transition: transform .35s var(--ease); }
  .feat:hover .go, .book-card:hover .go { transform: translateX(3px); }

  /* card livro */
  .book-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px 14px 14px; border-radius: 20px; background: linear-gradient(120deg, #e9e0d3, #d9cab5); color: var(--ink); text-decoration: none; transition: transform .45s var(--ease); }
  .book-card:hover { transform: translateY(-3px); }
  .book-card img { width: 74px; border-radius: 2px 4px 4px 2px; box-shadow: 0 10px 18px -8px rgba(0,0,0,.5); }
  .book-card small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--clay); }
  .book-card b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.05; margin: 4px 0 4px; }
    .book-card div > span { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: block; }
  .book-card .go { background: var(--ink); color: var(--paper); }

  /* botões de link (referência: linktree) */
  .lnk { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; min-height: 62px; padding: 8px; border-radius: 16px; background: rgba(241,235,226,.06); border: 1px solid rgba(241,235,226,.1); text-decoration: none; color: var(--paper); transition: background .3s, border-color .3s, transform .35s var(--ease); }
  .lnk:hover { background: rgba(241,235,226,.11); border-color: rgba(241,235,226,.22); transform: translateY(-2px); }
  .lnk .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(241,235,226,.08); color: var(--sand); }
  .lnk span { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; padding: 0 6px; }
  .lnk span small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: rgba(241,235,226,.5); margin-top: 2px; }

  .socials { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
  .socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--sand); border: 1px solid rgba(241,235,226,.14); transition: background .3s, color .3s; }
  .socials a:hover { background: var(--paper); color: var(--ink); }
  .hub__foot { text-align: center; font-size: 12px; color: rgba(241,235,226,.35); margin-top: 26px; letter-spacing: .04em; }

  .reveal { transform: translateY(14px); }
  @media (min-width: 700px) { .hub { padding-top: 28px; } }
  @media (max-width: 980px) { .rh-edit { bottom: 16px; } }