/* ============================================================
   Emberside — base do design system
   Fundo quase preto, creme para texto, dourado como acento.
   Serifada (Cormorant Garamond) nos títulos, Jost na interface.
   Regras de elemento genéricas são evitadas de propósito
   (um `section { padding }` global já vazou para dentro do
   player uma vez) — tudo aqui é classe.
   ============================================================ */

:root {
  --bg: #14100e;
  --bg-2: #1a1512;
  --bg-3: #221b15;
  --bg-4: #2b2119;
  --ink: #f2e9db;
  --ink-dim: #cbbda7;
  --ink-faint: #9a8b72;
  --gold: #c9a35c;
  --gold-2: #e7c581;
  --gold-dim: #8f7440;
  --line: rgba(231, 197, 129, 0.14);
  --line-strong: rgba(231, 197, 129, 0.3);
  --danger: #d4826f;
  --ok: #a3bd8f;
  /* Azul do selo "favorita dos leitores" — frio de propósito, para não se
     confundir com o dourado da casa nem com o lilás-azulado da Brontë. */
  --seal-blue: #6f9bd1;
  --seal-blue-2: #a8c8ef;
  /* Roxo do selo "exclusiva": história que só existe aqui. Tinha de ficar longe
     do azul da favorita E do lilás-azulado da Brontë, que já dividem a faixa
     dos 210-220° — por isso vai para os 260°, com vermelho suficiente para ser
     roxo de verdade e não "azul um pouco diferente". */
  --seal-purple: #8f6fd0;
  --seal-purple-2: #c6adf2;
  --austen: #d79db1;
  --bronte: #93a9cf;
  --heyer: #e5c47f;
  --military: #a3b18a;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.38);
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  /* A barra e fixa no topo. No iPhone em modo app (viewport-fit=cover) a
     faixa do relogio/bateria fica POR CIMA da pagina, e logo e a barra ficava
     debaixo dela: o "Sign in" era impossivel de acertar. Somando a area segura
     ao --nav-h, todo calc(var(--nav-h) + ...) do site — que ja e usado como
     recuo de conteudo em todas as paginas — passa a limpar o entalhe sozinho. */
  --nav-base: 72px;
  --nav-h: calc(72px + env(safe-area-inset-top, 0px));
  /* Tamanho do cartao das fileiras. E O UNICO lugar a mexer para testar:
     experimente clamp(240px, 26vw, 330px) para o tamanho antigo. */
  /* Era clamp(280px, 30vw, 400px): com 40+ histórias no ar, cartão de 400px
     fazia a estante render pouco por fileira e rolar até o fim demorava.
     Densidade estilo streaming, sem virar selo de correio. */
  --tile-w: clamp(220px, 22vw, 300px);
  --gutter: 4vw;
}

/* Tela de computador come cartao pequeno: acima de 1100px a estante volta a
   usar imagem GRANDE — densidade vem do respiro vertical curto, nao de
   miniatura. Celular segue no clamp de cima. */
@media (min-width: 1100px) {
  :root { --tile-w: clamp(300px, 24vw, 400px); }
}

* { box-sizing: border-box; }

/* O atributo hidden SEMPRE vence — sem isto, qualquer classe com
   display (ex.: .paywall { display: grid }) re-exibe o elemento. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Arrastar um carrossel ate o fim ENCADEAVA o gesto para o documento: no
     iPhone a pagina inteira deslizava de lado (o cabecalho fixo ficava, o
     conteudo ia junto com o dedo) e voltava sozinha — parecia que o site
     tinha quebrado. Cortar a corrente resolve; o clip garante que nao existe
     rolagem horizontal de pagina para escorregar. E clip, nao hidden: hidden
     viraria um scroll container e mataria o position: sticky do Studio. */
  overscroll-behavior-x: none;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

p { margin: 0 0 1em; }

a { color: var(--gold-2); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: rgba(201, 163, 92, 0.35); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Controle remoto de TV: sem ponteiro e sem hover. Ali o anel de foco é a ÚNICA
   pista de onde a pessoa está — não há mouse para confirmar, e 2px a três metros
   de distância somem. Engrossa e afasta só nesse caso; desktop e celular ficam
   como estavam. */
@media (hover: none) and (pointer: none) {
  :focus-visible { outline-width: 4px; outline-offset: 4px; }
  .tile:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px var(--gold); }
}

/* Atalho para o conteúdo: invisível até receber foco. Primeira parada do Tab e
   do controle remoto. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 999;
  padding: 12px 22px;
  background: var(--gold);
  color: #1a1206;
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Scrollbar discreta, tom de vela */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3a2f24; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

.container { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

.hidden { display: none !important; }

/* ---------- Botões ----------
   A base define background: transparent de propósito:
   <button class="btn"> herdaria o fundo cinza do navegador e
   ficaria ilegível com texto claro. */
.btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #241a0c;
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(201, 163, 92, 0.28);
}
.btn--gold:hover { box-shadow: 0 10px 28px rgba(201, 163, 92, 0.4); color: #241a0c; }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(201, 163, 92, 0.08); }

.btn--dim { color: var(--ink-dim); padding-inline: 0.9rem; }
.btn--dim:hover { color: var(--ink); }

.btn--danger { border-color: rgba(212, 130, 111, 0.5); color: var(--danger); }
.btn--danger:hover { background: rgba(212, 130, 111, 0.1); border-color: var(--danger); }

.btn--icon {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  flex: none;
}
.btn--icon:hover { border-color: var(--gold); background: rgba(201, 163, 92, 0.08); }
.btn--icon.is-on { color: var(--gold-2); border-color: var(--gold); background: rgba(201, 163, 92, 0.12); }

.btn--big { padding: 0.9rem 2rem; font-size: 1.02rem; }

/* ---------- Badges e chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
}
.badge--free { background: var(--gold-2); border-color: var(--gold-2); color: #241a0c; }
.badge--members { color: var(--gold-2); border-color: var(--gold-dim); }
.badge--austen { color: var(--austen); border-color: color-mix(in srgb, var(--austen) 45%, transparent); }
.badge--bronte { color: var(--bronte); border-color: color-mix(in srgb, var(--bronte) 45%, transparent); }
.badge--heyer { color: var(--heyer); border-color: color-mix(in srgb, var(--heyer) 45%, transparent); }
.badge--military { color: var(--military); border-color: color-mix(in srgb, var(--military) 45%, transparent); }
.badge--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.badge--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ---------- Pill: botao-etiqueta ----------
   Compartilhado por varias telas; morava em story.css e por isso o botao
   Reply do mural aparecia sem estilo nenhum. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  text-decoration: none;
}
.pill:hover { color: var(--ink); border-color: var(--gold-dim); }
.pill.is-on { color: var(--gold-2); border-color: var(--gold); background: rgba(201, 163, 92, 0.12); }
.pill b { color: var(--gold-2); font-weight: 500; }
.pill--icon { padding: 0; width: 38px; height: 38px; justify-content: center; }

/* Atalho de quem administra, na fileira de acoes da historia. Tracejado e sem
   dourado de proposito: nao e botao de leitor e nao pode competir com o
   "See comments" ao lado — le como ferramenta, nao como conteudo. */
.pill--admin { color: var(--ink-faint); border-style: dashed; gap: 0.45rem; }
.pill--admin:hover { color: var(--gold-2); border-color: var(--gold-dim); border-style: solid; }
.pill--admin svg { flex: none; opacity: 0.85; }

/* ---------- Selos ----------
   Distinção, não classificação: por isso NÃO se parecem com as tags. Duas
   diferenças de propósito — anel duplo (borda + hairline interno) e um brilho
   próprio na cor do selo, como um lacre em relevo. Vêm das tags "views:N",
   "readers-favorite" e "exclusive"; ver CS.sealHtml em js/core.js. */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.seal small {
  font-size: 0.94em;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.72;
}
.seal svg { flex: none; opacity: 0.9; }

.seal--views {
  color: var(--gold-2);
  background:
    linear-gradient(180deg, rgba(201, 163, 92, 0.26), rgba(201, 163, 92, 0.08)),
    rgba(20, 16, 14, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.16), 0 2px 12px rgba(201, 163, 92, 0.22);
}
.seal--fav {
  color: var(--seal-blue-2);
  background:
    linear-gradient(180deg, rgba(111, 155, 209, 0.28), rgba(111, 155, 209, 0.08)),
    rgba(16, 20, 26, 0.82);
  box-shadow: inset 0 1px 0 rgba(214, 232, 255, 0.18), 0 2px 12px rgba(111, 155, 209, 0.26);
}

.seal--excl {
  color: var(--seal-purple-2);
  background:
    linear-gradient(180deg, rgba(143, 111, 208, 0.3), rgba(143, 111, 208, 0.08)),
    rgba(19, 16, 26, 0.82);
  box-shadow: inset 0 1px 0 rgba(226, 214, 255, 0.18), 0 2px 12px rgba(143, 111, 208, 0.28);
}

/* No canto da capa, nas fileiras: mesma identidade, menos peso */
.seal--mini {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  gap: 0.28rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.seal--mini svg { width: 9px; height: 9px; }

/* ---------- Navegação ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: var(--gutter);
  background: linear-gradient(to bottom, rgba(20, 16, 14, 0.92) 20%, rgba(20, 16, 14, 0));
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.is-solid {
  background: rgba(20, 16, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__logo {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.nav__logo span { color: var(--gold-2); font-style: italic; }
.nav__logo:hover { color: var(--ink); }

.nav__links { display: flex; gap: 1.6rem; margin-right: auto; }
.nav__links a {
  color: var(--ink-dim);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; }

/* Busca do header */
.nav__searchbox { position: relative; margin-left: auto; }
.nav__searchbox + .nav__actions { margin-left: 0; }
.nav__searchbox .btn--icon { width: 38px; height: 38px; border-color: transparent; color: var(--ink-dim); }
.nav__searchbox .btn--icon:hover { color: var(--ink); border-color: var(--line-strong); }
.nav__searchpanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, 88vw);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 0.7rem;
  z-index: 70;
}
.nav__results { list-style: none; margin: 0.4rem 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.nav__results a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav__results a:hover { background: rgba(201, 163, 92, 0.1); }
.nav__result-title { display: block; font-family: var(--serif); font-style: italic; font-size: 1.05rem; }
.nav__result-meta { color: var(--ink-faint); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nav__result-empty { color: var(--ink-faint); font-size: 0.9rem; padding: 0.5rem 0.6rem; }

.nav__user {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.32rem 1rem 0.32rem 0.38rem;
  font-size: 0.92rem;
}
.nav__user:hover { border-color: var(--gold); color: var(--ink); }
.nav__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-2), var(--gold-dim));
  color: #241a0c;
  font-weight: 600;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}

@media (max-width: 720px) {
  .nav { gap: 0.7rem; }
  .nav__links { display: none; }
  .nav__actions { gap: 0.5rem; margin-left: auto; }
  .nav__actions .btn { padding: 0.45rem 0.9rem; font-size: 0.85rem; white-space: nowrap; }
}
@media (max-width: 540px) {
  /* o card da home e as páginas de história já têm o CTA — no topo ele só corta */
  .nav__actions .btn--gold { display: none; }
}

/* ---------- Fileiras e tiles (formato streaming) ---------- */
.row { margin: 1.4rem 0; }  /* era 2.6rem — 27/08: estante mais compacta */
.row__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-inline: var(--gutter);
  margin-bottom: 0.35rem;    /* era 0.9rem */
}
.row__title {
  font-size: 1.55rem;
  font-style: italic;
  margin: 0;
  color: var(--ink);
}
.row__hint { color: var(--ink-faint); font-size: 0.85rem; letter-spacing: 0.05em; }

.row__body { position: relative; }
.row__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Sem isto o snap encostava o PRIMEIRO cartao na borda da tela: o scroller
     nascia com scrollLeft=15px, comendo o proprio padding, e a fileira ficava
     desalinhada do titulo logo acima. O scroll-padding manda o ponto de parada
     respeitar a margem da pagina. */
  scroll-padding-inline: var(--gutter);
  /* Teto alto + margem negativa: o cartao sobe 5px (+ sombra) no hover, e o
     overflow-x do scroller cortava o topo. O layout nao muda um pixel. */
  padding: calc(0.4rem + 10px) var(--gutter) 0.55rem;
  margin-top: -10px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.row__scroll::-webkit-scrollbar { display: none; }

.row__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(20, 16, 14, 0.82);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.row__body:hover .row__arrow { opacity: 1; }
.row__arrow:hover { border-color: var(--gold); }
.row__arrow--prev { left: calc(var(--gutter) - 20px); }
.row__arrow--next { right: calc(var(--gutter) - 20px); }
.row__arrow[hidden] { display: none; }

/* Fileira dentro de um .container (ex.: favoritos na conta):
   sem o padding lateral de página, que ali duplicaria o recuo. */
.row--inset .row__head,
.row--inset .row__scroll { padding-inline: 0; }
.row--inset .row__scroll { padding-block: calc(0.4rem + 10px) 0.55rem; margin-top: -10px; scroll-padding-inline: 0; }
.row--inset .row__arrow--prev { left: -14px; }
.row--inset .row__arrow--next { right: -14px; }

/* ============================================================
   Toque: as fileiras viram carrossel de app
   No celular ninguem procura setinha — arrasta. As setas (que
   no desktop so existem no :hover) saem de cena, o snap vira
   obrigatorio para o cartao parar sempre alinhado com o titulo,
   e o :hover — que no iOS GRUDA depois do toque, deixando um
   cartao levantado ate alguem tocar noutro — da lugar a um
   :active de verdade.
   A TV fica de fora de proposito: (pointer: coarse) e dedo;
   controle remoto e (pointer: none) e PRECISA das setas.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .row__arrow { display: none; }
  .row__scroll {
    scroll-snap-type: x mandatory;
    padding-block: calc(0.2rem + 8px) 0.45rem;
    margin-top: -8px;
  }
  .tile:hover { transform: none; box-shadow: var(--shadow-sm); }
  .tile:active { transform: scale(0.97); transition-duration: 0.09s; }
  .tile, .btn, .pill, .catpill { -webkit-tap-highlight-color: transparent; }
  /* Balao de titulo e coisa de ponteiro: no toque so pisca e atrapalha. */
  .cs-tip { display: none; }
}

/* Cabecalho da fileira no celular: titulo e dica dividiam a largura e as DUAS
   metades quebravam em duas linhas — "Coming up" virava "Coming" / "up".
   Empilhados, o titulo volta a caber numa linha so. */
@media (max-width: 720px) {
  .row { margin: 0.9rem 0; }
  .row__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin-bottom: 0.7rem;
  }
  .row__title { font-size: 1.3rem; }
  .row__hint { font-size: 0.78rem; line-height: 1.35; }
  .row__scroll { gap: 12px; }
}

.tile {
  position: relative;
  flex: 0 0 auto;
  width: var(--tile-w);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-3);
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  outline-offset: 3px;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-5px) scale(1.015);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-strong);
}
.tile__img { width: 100%; height: 100%; object-fit: cover; }
.tile__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 7, 5, 0.88) 0%, rgba(10, 7, 5, 0.1) 55%, rgba(10, 7, 5, 0.25) 100%);
}
.tile__info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.7rem 0.9rem;
}
.tile__info h3 {
  font-size: 1.18rem;
  font-style: italic;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile__info p {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.tile__badge { position: absolute; top: 10px; left: 10px; }
/* Free + 4K + selo de views cabem juntos numa capa estreita: quebra em vez
   de vazar para fora do cartão. */
.tile__flags {
  position: absolute; top: 10px; left: 10px; right: 40px;  /* 40px = cadeado */
  display: flex; gap: 6px; flex-wrap: wrap;
}
/* Selo do acervo 4K — aplicado pela tag "4K" da história */
.badge--uhd {
  border-color: var(--gold);
  color: var(--gold-2);
  background: rgba(20, 16, 14, 0.72);
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* Selo 2K — aplicado pela tag "2K". Deliberadamente NAO dourado: o dourado e
   do 4K e precisa continuar significando alguma coisa. Este e informativo,
   em tom de tinta apagada, para dizer "ainda nao e 4K" sem competir. */
.badge--hd {
  border-color: var(--ink-faint);
  color: var(--ink-dim);
  background: rgba(20, 16, 14, 0.72);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tile__lock {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 16, 14, 0.7);
  border: 1px solid var(--line-strong);
  color: var(--gold-2);
}
/* Fita de marca-página: "já li esta". Pendurada da borda de cima, ao lado do
   cadeado. Nasce no DOM de todo tile e só aparece com .is-read — assim marcar
   e desmarcar é alternar uma classe, sem reconstruir o card. */
.tile__read {
  position: absolute;
  top: -2px;
  right: 46px;
  width: 19px;
  color: var(--gold);
  filter: drop-shadow(0 2px 3px rgba(10, 7, 5, 0.55));
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.tile.is-read .tile__read { opacity: 1; transform: translateY(0); }
.tile__read svg { display: block; width: 100%; height: auto; }

.tile__meter {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
}
.tile__meter span { display: block; height: 100%; background: var(--gold); }

/* ---------- Formulários ---------- */
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field > label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.input, .select, .textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.72rem 0.95rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-3);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.select { appearance: none; }

.form-error {
  color: var(--danger);
  background: rgba(212, 130, 111, 0.1);
  border: 1px solid rgba(212, 130, 111, 0.35);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.92rem;
  margin-bottom: 1rem;
}
.form-ok {
  color: var(--ok);
  background: rgba(163, 189, 143, 0.1);
  border: 1px solid rgba(163, 189, 143, 0.35);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(170deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow-sm);
}
.card__title {
  font-size: 1.35rem;
  font-style: italic;
  margin-bottom: 1rem;
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(10, 7, 5, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.modal[hidden] { display: none; }
.modal__card {
  width: min(460px, 100%);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-lg);
}
.modal__card h3 { font-style: italic; font-size: 1.5rem; }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  /* Era `left: 50%` com largura auto: para um fixed ancorado so a esquerda, a
     largura shrink-to-fit e limitada a (viewport - left), ou seja METADE da
     tela — o translate(-50%) so desloca a pintura, nao devolve largura. Num
     iPhone sobravam ~148px de conteudo e "Removed from favorites." quebrava em
     duas linhas com a estrela caindo sozinha. Ancorar nos dois lados e
     centralizar por margin tira o teto. */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: min(92vw, 30rem);
  text-align: center;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateY(20px);
  z-index: 120;
  background: var(--bg-4);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.65rem 1.4rem;
  font-size: 0.95rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-on { opacity: 1; transform: translateY(0); }

/* ---------- Skeleton (carregando) ---------- */
.skel {
  background: linear-gradient(100deg, var(--bg-3) 40%, var(--bg-4) 50%, var(--bg-3) 60%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite linear;
  border-radius: var(--r-md);
}
@keyframes skel-shimmer {
  to { background-position: -200% 0; }
}

/* ---------- Rodapé ---------- */
.foot {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2.6rem var(--gutter) 2rem;
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: flex-start;
  justify-content: space-between;
}
.foot__logo { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.foot__logo span { color: var(--gold-2); font-style: italic; }
.foot__tag { color: var(--ink-faint); font-size: 0.92rem; margin: 0.2rem 0 0; }
.foot__links { display: flex; gap: 1.6rem; padding-top: 0.5rem; }
.foot__links a { color: var(--ink-dim); font-size: 0.92rem; letter-spacing: 0.05em; }
.foot__links a:hover { color: var(--ink); }
.foot__copy {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

/* ---------- Página institucional (terms/privacy/404) ---------- */
.prose {
  width: min(760px, 100% - 2 * var(--gutter));
  margin: calc(var(--nav-h) + 3rem) auto 3rem;
}
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-style: italic; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.prose p, .prose li { color: var(--ink-dim); }
.prose .prose__updated {
  color: var(--ink-faint);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Utilitário de acessibilidade ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Tooltip ----------
   Um único balão preso ao <body>: os títulos vivem dentro de fileiras com
   overflow-x auto, e um ::after dentro do cartão seria cortado pela borda do
   scroller. Também é mais rápido que o title= nativo, que só aparece depois
   de um segundo parado. */
.cs-tip {
  position: fixed;
  z-index: 200;
  max-width: min(360px, 80vw);
  background: linear-gradient(170deg, var(--bg-4), var(--bg-2));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.35;
  padding: 0.55rem 0.8rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.cs-tip.is-on { opacity: 1; transform: none; }

/* Sugestões de tag na busca — a busca sempre procurou por tag, mas nada
   dizia isso. */
.nav__tagtips { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.6rem 0.2rem 0.1rem; }
.nav__tagtips-label {
  width: 100%;
  color: var(--ink-faint);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.nav__tagtip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.18rem 0.6rem;
  cursor: pointer;
}
.nav__tagtip:hover { color: var(--gold-2); border-color: var(--gold-dim); background: rgba(201, 163, 92, 0.1); }

/* ============================================================
   Mobile: alvos grandes
   O público lê no celular e boa parte tem 55+. Alvo de toque
   pequeno não é questão de estética — é o que decide se a
   pessoa consegue usar o site. Referência: 44px de lado, o
   mínimo que a Apple recomenda; aqui vai um pouco acima.
   ============================================================ */
@media (max-width: 820px) {
  .nav { gap: 0.8rem; }
  .nav__links { gap: 0.25rem; }
  .nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding-inline: 0.55rem;
    font-size: 1rem;
  }
  .nav .btn { min-height: 46px; padding-inline: 1.1rem; }
  /* a regra acima (0,2,0) vence o padding:0 do .btn--icon (0,1,0) e enfiava
     1.1rem de cada lado num botao de 36-38px: a lupa (flex) era esmagada a
     largura ZERO — botao "invisivel" mas clicavel. O sino e o balao so
     escapavam por serem grid/outro seletor. */
  .nav .btn--icon { padding-inline: 0; width: 46px; height: 46px; }
  .btn--icon { width: 46px; height: 46px; }
  .nav__user { min-height: 46px; }

  /* Pills e catpills: mais dedo, menos precisão */
  .pill { min-height: 42px; padding: 0.5rem 1.1rem; font-size: 0.95rem; }
  .pill--icon { width: 46px; height: 46px; }
  .catpill { min-height: 44px; padding: 0.5rem 1.15rem; }
}

/* Barra inferior fixa (modo cinema) não pode cair na faixa do gesto do iPhone */
@supports (padding: env(safe-area-inset-bottom)) {
  .cinema__bar { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Figurinha do perfil ----------
   Desenho em SVG, não foto: escala sem borrar, herda a cor e não pesa. Quando
   a pessoa não escolheu nenhuma, o mesmo lugar mostra a inicial do nome. */
.avatar-art { width: 76%; height: 76%; display: block; }
.nav__avatar .avatar-art { color: #241a0c; }

.avatarpick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.avatarpick__opt {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
  color: var(--ink-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.avatarpick__opt:hover { color: var(--gold-2); border-color: var(--gold-dim); transform: translateY(-2px); }
.avatarpick__opt.is-on {
  color: var(--gold-2);
  border-color: var(--gold);
  background: rgba(201, 163, 92, 0.14);
  box-shadow: 0 0 0 1px var(--gold-dim) inset;
}
.avatarpick__opt--none { font-family: var(--serif); font-size: 1.3rem; font-style: italic; }

/* Nos comentários: mesma figurinha, discreta */
.cavatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-2), var(--gold-dim));
  color: #241a0c;
  font-weight: 600;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}
.cavatar .avatar-art { color: #241a0c; }

/* ---------- Selo de papel nos comentários (player + mural) ----------
   "Member" na régua do post__pin: pílula dourada, maiúsculas miúdas.
   "Emberside" é a casa falando — tom de BRASA, não de ouro, para o olho
   separar de longe; o nome do admin acende em dourado junto. */
.comment__role {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #241a0c;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  line-height: 1.4;
  vertical-align: middle;
  flex-shrink: 0;
  /* A linha do cabeçalho alinha por BASELINE (nome × relógio combinam
     tipograficamente); a pílula, com fonte menor e padding, ficava caída
     em relação ao nome. Ela sozinha centraliza na linha. */
  align-self: center;
}
.comment__role--admin {
  background: linear-gradient(180deg, #e8956b, #c96b2c);
  color: #2b1207;
}
.comment__author--admin, .pcomment__who--admin { color: var(--gold-2); }

/* ---------- Comentário de membro: moldura de ouro ----------
   O balão (nu para todo mundo) ganha borda em GRADIENTE dourado, uma lavagem
   quente por dentro e um brilho de vela por fora — assinante se vê especial,
   visitante vê o que está perdendo. O admin leva a mesma moldura em BRASA.
   Técnica: dois backgrounds — o de dentro no padding-box, o gradiente da
   borda no border-box — sobre borda transparente. */
/* A camada de DENTRO tem de ser OPACA: ela é a máscara que segura o
   gradiente da borda no anel de 1px. Translúcida (versão de 26/08 de manhã),
   o gradiente vazava pro balão inteiro e afogava o texto. O miolo agora é
   escuro com um sussurro da cor — o brilho mora na borda e no glow. */
.comment--member .comment__bubble,
.pcomment--member .pcomment__body {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.6rem 0.85rem 0.45rem;
  background:
    linear-gradient(180deg, #292115, var(--bg-2) 75%) padding-box,
    linear-gradient(120deg, rgba(231, 197, 129, 0.6), rgba(143, 116, 64, 0.22) 40%, rgba(231, 197, 129, 0.5) 85%) border-box;
  box-shadow: 0 0 20px rgba(201, 163, 92, 0.09);
}
.comment--admin .comment__bubble,
.pcomment--admin .pcomment__body {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0.6rem 0.85rem 0.45rem;
  background:
    linear-gradient(180deg, #291c12, var(--bg-2) 75%) padding-box,
    linear-gradient(120deg, rgba(232, 149, 107, 0.55), rgba(122, 66, 27, 0.22) 40%, rgba(232, 149, 107, 0.45) 85%) border-box;
  box-shadow: 0 0 20px rgba(201, 107, 44, 0.08);
}

/* Lume passando no selo de vez em quando — vivo, sem virar pisca-pisca. */
.comment__role {
  position: relative;
  overflow: hidden;
}
.comment__role::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 240, 0.55) 50%, transparent 62%);
  animation: role-sheen 5s ease-in-out infinite;
}
@keyframes role-sheen {
  0%, 72% { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(130%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .comment__role::after { animation: none; }
}

/* ---------- Barra: nível da conta + sino de notificações ---------- */
.nav__actions { position: relative; }
.nav__tier {
  display: inline-block;
  border: 1px solid var(--gold-dim);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__tier--member {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-color: transparent;
  color: #241a0c;
}
.nav__bell {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.nav__bell:hover { color: var(--gold-2); border-color: var(--gold-dim); }
.nav__bell-n {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--gold-2);
  color: #241a0c;
  font-size: 0.62rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 3px;
}
.nav__notifpanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, 92vw);
  max-height: 65vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line-strong, #3a2f24);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  z-index: 60;
  padding: 0.4rem;
}
.notif {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  color: var(--ink);
}
.notif:hover { background: rgba(201, 163, 92, 0.08); color: var(--ink); }
.notif b { display: block; font-size: 0.88rem; }
.notif__story { color: var(--gold-2); font-size: 0.76rem; display: block; margin-top: 1px; }
.notif p { color: var(--ink-dim); font-size: 0.82rem; margin: 0.15rem 0 0.1rem; overflow-wrap: break-word; }
.notif time { color: var(--ink-faint); font-size: 0.72rem; }
.notif + .notif { border-top: 1px solid rgba(231, 197, 129, 0.08); border-radius: 0 0 10px 10px; }
.notif__empty { color: var(--ink-faint); padding: 1rem; text-align: center; margin: 0; }


/* ---------- Barra no celular: caber e levar a Community junto ----------
   O nome ao lado do avatar e a pilula em tamanho cheio empurravam o perfil
   para fora da tela; e sem os links do menu a Community sumia do mobile —
   o balao na barra devolve a porta. */
.nav__mobilecomm { display: none; }

/* ---------- A barra TEM de caber no telefone ----------
   iOS: um elemento position:fixed mais largo que a tela habilita o pan
   lateral da pagina INTEIRA, mesmo com overflow-x: clip no html — foi assim
   que o site inteiro passou a andar de lado. A regra aqui e orcamento de
   pixels: num iPhone de 375px sobram ~345 uteis; logado, a fileira soma
   logo + busca + balao + sino + pilula + avatar e precisa fechar ABAIXO
   disso. Cada tamanho abaixo existe por causa dessa conta. */
@media (max-width: 720px) {
  .nav__mobilecomm { display: grid; }
  .nav__user > span:not(.nav__avatar) { display: none; }
  /* so a bolinha do avatar — o anel do link em volta virava ruido */
  .nav__user { padding: 0; border: 0; background: transparent; }
  .nav__tier { font-size: 0.58rem; padding: 0.12rem 0.42rem; letter-spacing: 0.08em; }
  .nav__bell { width: 32px; height: 32px; flex: none; }
  .nav { gap: 0.45rem; }
  .nav__actions { gap: 0.35rem; }
  /* o 46px de alvo-de-toque do media 820 estoura a conta aqui */
  .nav .btn--icon, .nav__mobilecomm { width: 36px; height: 36px; min-height: 0; }
  .nav__logo { font-size: 1.25rem; flex: none; }
  /* Ancorado na caixinha da lupa, o painel de busca vazava ~100px alem da
     borda esquerda do celular. Fixo e centrado ele cabe em qualquer bolso —
     e como o .nav e fixed de borda a borda, da no mesmo lugar ainda que o
     backdrop-filter dele vire containing block. Largura < viewport de
     proposito: fixed mais largo que a tela liga o pan lateral no iOS. */
  .nav__searchpanel {
    position: fixed;
    left: 50%;
    right: auto;
    top: calc(64px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    width: min(380px, calc(100vw - 20px));
  }
}
@media (max-width: 400px) {
  .nav__logo { font-size: 1.1rem; }
  .nav__tier { padding: 0.1rem 0.35rem; }
}


/* Rodape com seis moradas: cada link e um bloco inteiro (o "Get the app"
   quebrava palavra por palavra) e a fileira quebra por LINK, centrada. */
.foot__links { flex-wrap: wrap; row-gap: 0.5rem; }
.foot__links a { white-space: nowrap; }


/* o aviso rapido precisa vencer o cinema (z 200) e o modal de review (300) */
.toast { z-index: 500; }