/* Páginas do site fora da home (/journal, /our-story, /sky) — modelo "Observatório noturno".
   Vem depois do shop.css e do shop-observatorio.css (tokens, topo, menu, vídeos, faixas claras e escuras). */

/* marca do topo: a arte da palavra + a arte de "Sacred Frequencies" embaixo */
.obs-brand__lock .obs-brand__sf { height: 12px; width: auto; }

/* abertura das páginas: mais baixa que a da loja */
.obs-hero--page { min-height: min(78vh, 820px); }
.obs-hero--page h1 { font-size: clamp(3rem, 8.4vw, 8rem); max-width: 13ch; }

/* faixa clara e filtros em pílulas */
.pg-band { padding-top: clamp(56px, 7vw, 96px); }
.pg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 clamp(32px, 4vw, 56px); }
.pg-chips button { font: 500 .86rem/1 var(--f-body); letter-spacing: .04em; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--o-ink); border: 1px solid rgba(20, 26, 51, .28); transition: background .2s, color .2s, border-color .2s; }
.pg-chips button:hover { border-color: var(--o-ink); }
.pg-chips button[aria-pressed="true"] { background: var(--o-night); color: var(--o-moon); border-color: var(--o-night); }
.pg-chips--dark button { color: var(--o-moon); border-color: var(--o-hair); }
.pg-chips--dark button:hover { border-color: var(--o-gold); }
.pg-chips--dark button[aria-pressed="true"] { background: var(--o-gold); color: var(--o-deep); border-color: var(--o-gold); }

/* ---------- Journal ---------- */
.art-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 2.4vw, 32px); }
.art-card { display: flex; flex-direction: column; text-decoration: none; color: var(--o-ink); min-width: 0; }
.art-card[hidden] { display: none; }
.art-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ebe3d3; }
.art-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
a.art-card:hover .art-card__img img { transform: scale(1.04); }
.art-card__body { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.art-card__tag { font: 600 .7rem/1.2 var(--f-body); letter-spacing: .32em; text-transform: uppercase; color: #8a6420; }
.art-card__title { font-family: var(--f-display); font-stretch: 100%; font-variation-settings: "wdth" 100; text-transform: none; font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.2; }
.art-card__meta { font-size: .92rem; color: rgba(20, 26, 51, .78); }
/* o primeiro artigo ocupa a linha inteira: foto grande à esquerda, título à direita */
.art-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.art-card--lead .art-card__img { aspect-ratio: 16 / 10; }
.art-card--lead .art-card__title { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; }

/* ---------- Our story ---------- */
.guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); max-width: 980px; margin: 0 auto; }
.guide { margin: 0; }
.guide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #ebe3d3; }
.guide figcaption { padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.guide b { font-family: var(--f-display); font-stretch: 62.5%; font-variation-settings: "wdth" 62.5; text-transform: uppercase; font-weight: 400; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; color: var(--o-ink); }
.guide span { font-size: 1.05rem; color: rgba(20, 26, 51, .82); max-width: 40ch; }
.obs-stage__text p + p { margin-top: -14px; }
.pg-vibe { padding: clamp(72px, 9vw, 120px) var(--gut); }
.vibe { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.vibe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; }
.vibe h3 { font-size: clamp(1.8rem, 2.4vw, 2.4rem); margin-bottom: 6px; }
.vibe p { margin: 0; color: var(--o-mist); font-size: 1.02rem; }
.pg-narrow { max-width: 820px; text-align: center; }
.pg-quote { padding-bottom: clamp(72px, 9vw, 120px); }
.pg-quote h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: .98; margin-bottom: 28px; color: var(--o-ink); }
.pg-quote p:not(.obs-label) { font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: rgba(20, 26, 51, .84); margin: 0 auto 18px; max-width: 60ch; }
.pg-sign { font-family: var(--f-display); font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--o-gold-2); margin: -14px 0 30px; }

/* ---------- Calendário do céu ---------- */
.sky-hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; text-align: left; }
.sky-hero h1 { margin: 0; max-width: 11ch; }
.sky-moon { width: clamp(150px, 20vw, 260px); height: auto; filter: drop-shadow(0 0 40px rgba(240, 212, 142, .25)); }
.sky-moon__dark { fill: rgba(6, 10, 28, .78); stroke: rgba(241, 234, 219, .3); stroke-width: .6; }
.sky-moon__lit { fill: #f1eadb; }
.sky-today { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 14px 40px; justify-content: start; }
.sky-today span { display: block; font: 600 .68rem/1.2 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--o-gold-2); margin-bottom: 6px; }
.sky-today b { font-weight: 500; font-size: 1.02rem; color: var(--o-moon); }
.sky-today b span { display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; margin: 0; }
.pg-cal { padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }
.pg-cal__note { text-align: center; color: var(--o-mist); font-size: .92rem; margin: -24px 0 32px; }
.pg-cal__earlier { display: flex; margin: 0 auto 32px; background: transparent; cursor: pointer; }
.pg-cal__earlier[hidden] { display: none; }
.sky-month { display: grid; grid-template-columns: 220px 1fr; gap: 24px clamp(24px, 4vw, 64px); padding: 36px 0; border-top: 1px solid var(--o-hair); }
.sky-month[hidden], .sky-month.is-empty { display: none; }
.sky-month__name { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: .95; position: sticky; top: 96px; align-self: start; }
.sky-month__name small { display: block; font: 600 .74rem/1 var(--f-body); letter-spacing: .32em; color: var(--o-gold); margin-top: 10px; }
.sky-month__list { list-style: none; margin: 0; padding: 0; }
.sky-ev { display: grid; grid-template-columns: 64px 44px 1fr auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(241, 234, 219, .1); }
.sky-ev[hidden] { display: none; }
.sky-ev:last-child { border-bottom: 0; }
.sky-ev__date { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--o-mist); }
.sky-ev__date b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; letter-spacing: 0; line-height: 1; color: var(--o-moon); }
.sky-ev__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; color: var(--o-gold-2); border: 1px solid var(--o-hair); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif; font-variant-emoji: text; }
.sky-ev__title { display: block; font-size: 1.1rem; color: var(--o-moon); }
.sky-ev__note { display: block; font-size: .92rem; color: var(--o-gold-2); margin-top: 3px; }
.sky-ev__time { font-size: .86rem; color: var(--o-mist); }
.sky-ev--eclipse .sky-ev__icon { background: var(--o-gold); color: var(--o-deep); border-color: var(--o-gold); }
.sky-ev--portal .sky-ev__icon { border-color: var(--o-gold); }
.sky-ev.is-done { opacity: .55; }

/* ---------- celular: a mesma mecânica, só menor ---------- */
@media (max-width: 960px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vibe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sky-month { grid-template-columns: 1fr; }
  .sky-month__name { position: static; }
}
@media (max-width: 760px) {
  .obs-brand__lock .obs-brand__sf { height: 9px; }
  .obs-hero--page { min-height: 72svh; }
  .art-grid { grid-template-columns: 1fr; }
  .art-card--lead { display: flex; }
  .art-card--lead .art-card__title { font-size: 1.9rem; }
  .guides { gap: 12px; }
  .guide span { font-size: .95rem; }
  .vibe { gap: 24px 12px; }
  .vibe p { font-size: .95rem; }
  .sky-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sky-hero h1 { margin: 0 auto; }
  .sky-moon { width: 132px; }
  .sky-today { grid-template-columns: 1fr; justify-content: center; text-align: center; }
  .sky-ev { grid-template-columns: 48px 36px 1fr; gap: 12px; }
  .sky-ev__icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .sky-ev__time { grid-column: 3; font-size: .8rem; margin-top: -8px; }
  .sky-ev__date b { font-size: 1.6rem; }
}

/* ---------- Our story v2 (4/11/2026): cartões, tabela dos portais, promessas e perguntas ---------- */
/* faixas claras seguidas: a segunda não repete o espaço de cima */
.pg-quote + .pg-offer, .pg-quote + .pg-portals, .pg-band + .pg-faq { padding-top: 0; }
.pg-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); max-width: 1240px; margin: 0 auto; }
.pg-card { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 32px); text-decoration: none;
  color: var(--o-ink); background: #fffaf0; border: 1px solid rgba(138, 100, 32, .22); transition: transform .3s, border-color .3s, box-shadow .3s; }
.pg-card:nth-child(4), .pg-card:nth-child(5) { grid-column: span 3; }
.pg-card:hover { transform: translateY(-4px); border-color: rgba(138, 100, 32, .6); box-shadow: 0 18px 40px -24px rgba(20, 26, 51, .35); }
.pg-card__n { font: 600 .72rem/1 var(--f-body); letter-spacing: .32em; color: #8a6420; }
.pg-card h3 { font-family: var(--f-display); font-stretch: 100%; font-variation-settings: "wdth" 100; text-transform: none;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.15; margin: 0; color: var(--o-ink); }
.pg-card p { margin: 0; color: rgba(20, 26, 51, .8); font-size: 1rem; line-height: 1.55; flex: 1; }
.pg-card__go { font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--o-ink);
  border-bottom: 1px solid #8a6420; align-self: flex-start; padding-bottom: 4px; }
.pg-vibe__intro, .pg-portals__intro { text-align: center; max-width: 60ch; margin: -8px auto clamp(28px, 3.4vw, 44px); font-size: clamp(1.04rem, 1.3vw, 1.18rem); }
.pg-vibe__intro { color: var(--o-mist); }
.pg-portals__intro { color: rgba(20, 26, 51, .82); }
.pg-table { max-width: 920px; margin: 0 auto; overflow-x: auto; }
.pg-table table { width: 100%; border-collapse: collapse; font-size: 1rem; color: var(--o-ink); min-width: 520px; }
.pg-table th, .pg-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(20, 26, 51, .12); }
.pg-table thead th { font: 600 .72rem/1.2 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: #8a6420; border-bottom-color: rgba(138, 100, 32, .45); }
.pg-table tbody th { font-weight: 600; color: #8a6420; width: 4.5em; }
.pg-table td:last-child { font-weight: 600; white-space: nowrap; }
.pg-table tbody tr:hover { background: rgba(220, 183, 102, .1); }
.pg-center { text-align: center; margin-top: clamp(28px, 3.4vw, 44px); }
.pg-principles { background: var(--o-night); color: var(--o-moon); padding: clamp(72px, 9vw, 120px) 0; }
.pg-princ { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3.6vw, 48px) clamp(20px, 3vw, 40px); max-width: 1240px; margin: 0 auto; }
.pg-princ > div { grid-column: span 2; border-top: 1px solid var(--o-hair); padding-top: 22px; }
.pg-princ > div:nth-child(4), .pg-princ > div:nth-child(5) { grid-column: span 3; }
.pg-princ h3 { font-family: var(--f-display); font-stretch: 100%; font-variation-settings: "wdth" 100; text-transform: none;
  font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.2; margin: 0 0 12px; color: var(--o-gold-2); }
.pg-princ p { margin: 0; color: var(--o-mist); font-size: 1.02rem; line-height: 1.6; }
.pg-note { text-align: center; margin: clamp(22px, 3vw, 36px) auto 0; font-size: .92rem; color: rgba(20, 26, 51, .7); }
.pg-faq__in { max-width: 860px; }
.pg-faq__item { border-bottom: 1px solid rgba(20, 26, 51, .14); }
.pg-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 22px 0; font-family: var(--f-display); font-stretch: 100%; font-variation-settings: "wdth" 100; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--o-ink); }
.pg-faq__item summary::-webkit-details-marker { display: none; }
.pg-faq__item summary::after { content: "+"; font: 300 1.6rem/1 var(--f-body); color: #8a6420; transition: transform .25s; flex: none; }
.pg-faq__item[open] summary::after { transform: rotate(45deg); }
.pg-faq__item p { margin: -6px 0 22px; color: rgba(20, 26, 51, .82); font-size: 1.02rem; line-height: 1.65; max-width: 70ch; }
@media (max-width: 960px) {
  .pg-cards, .pg-princ { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-card, .pg-card:nth-child(4), .pg-card:nth-child(5), .pg-princ > div, .pg-princ > div:nth-child(4), .pg-princ > div:nth-child(5) { grid-column: span 1; }
  .pg-card:last-child, .pg-princ > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pg-cards, .pg-princ { grid-template-columns: 1fr; }
  .pg-card:last-child, .pg-princ > div:last-child { grid-column: auto; }
}

/* (4/11) hero da Our story: Serena e Elijah. PC: vídeo um pouco menor, à direita; nome à esquerda (onde não há ninguém).
   Celular: ocupa a tela toda, vídeo menor embaixo, nome no alto. Fundo = cor do céu do vídeo para a emenda sumir. */
html body.obs .obs-hero.obs-hero--story { min-height: min(86vh, 900px); align-items: center; background: rgb(3, 12, 27); }
html body.obs .obs-hero.obs-hero--story .obs-vid { animation: none; inset: auto 0 0 auto; height: 90%; width: auto; max-width: 92%; aspect-ratio: 16 / 9; background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 12%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 12%); mask-composite: intersect; }
html body.obs .obs-hero.obs-hero--story::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, #000 100%); }
/* frase de cima ("Our story · About…") em branco vivo, para contrastar com o céu e com a luz da esfera */
html body.obs .obs-hero.obs-hero--story .obs-label { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .45); }
html body.obs .obs-hero.obs-hero--story .obs-hero__in { max-width: none; margin: 0; padding: 72px 52% 0 clamp(28px, 6vw, 110px); text-align: left; }
html body.obs .obs-hero.obs-hero--story h1 { font-size: clamp(2.8rem, 5.6vw, 6rem); max-width: 10ch; margin: 0; }
html body.obs .obs-hero.obs-hero--story .obs-hero__sub { margin: 22px 0 0; max-width: 34ch; }
@media (max-width: 760px) {
  /* celular: Serena e Elijah na tela toda; textos embaixo, sobre um véu desfocado */
  html body.obs .obs-hero.obs-hero--story { min-height: 100svh; align-items: end; }
  html body.obs .obs-hero.obs-hero--story .obs-vid { inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-position: 50% 0;
    -webkit-mask-image: none; mask-image: none; }
  html body.obs .obs-hero.obs-hero--story::after { background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 62%, rgba(3, 12, 27, .3) 78%, rgba(0, 0, 0, .66) 100%); }
  html body.obs .obs-hero.obs-hero--story .obs-hero__in { padding: 0 calc(var(--gut) + 14px) 40px; text-align: center; }
  /* sem desfoque: os textos ficam dentro de um painel escuro translúcido com borda dourada fina */
  /* (4/11) sem painel: só um desfoque suave em volta dos textos, que some nas bordas (sem caixa, sem borda) */
  html body.obs .obs-hero.obs-hero--story .obs-hero__in::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -40px; bottom: -10px;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(3, 12, 27, .18);
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 45%, transparent 100%); }
  /* frase de cima numa etiqueta escura com borda dourada: fica legível mesmo sobre a luz da esfera */
  html body.obs .obs-hero.obs-hero--story .obs-label { margin: 0 0 10px; font-size: .84rem; font-weight: 600; letter-spacing: .04em; color: #fff; text-shadow: none; }
  html body.obs .obs-hero.obs-hero--story h1 { font-size: clamp(2.5rem, 11.5vw, 3.6rem); max-width: 11ch; margin: 0 auto; }
  html body.obs .obs-hero.obs-hero--story .obs-hero__sub { margin: 14px auto 0; font-size: 1rem; max-width: 30ch; }
}

/* (4/11) história longa dos criadores */
.pg-relato { padding-bottom: clamp(56px, 7vw, 96px); }
.pg-relato h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: .98; margin-bottom: 24px; color: var(--o-ink); }
.pg-relato h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 44px 0 14px; color: var(--o-ink); }
.pg-relato p:not(.obs-label) { font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.65; color: rgba(20, 26, 51, .86); margin: 0 0 18px; max-width: 62ch; }
.pg-relato .pg-relato__lead { font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.45; color: var(--o-ink); }
.pg-relato__quote { margin: 40px auto; padding: 22px 0; border-top: 1px solid rgba(201, 162, 74, .7); border-bottom: 1px solid rgba(201, 162, 74, .7); text-align: center; font-family: "Noto Serif Display", Georgia, serif; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; color: var(--o-ink); max-width: 30ch; }
.pg-relato .pg-relato__note { margin-top: 34px; font-size: .92rem; color: rgba(20, 26, 51, .6); }
.pg-relato + .pg-quote { padding-top: 0; }

/* (4/11) "Everything is vibration": 4 cartões em pé com vídeo em loop, borda dourada, título sobre o vídeo */
.vibe.vibe--cards { gap: clamp(14px, 1.8vw, 24px); }
.vibe-card { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; isolation: isolate; background: rgb(3, 12, 27);
  border: 1px solid rgba(232, 196, 122, .32); box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s, border-color .6s; }
.vibe-card .obs-vid { z-index: -1; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.vibe-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 12, 27, 0) 45%, rgba(3, 12, 27, .72) 78%, rgba(3, 12, 27, .94) 100%); }
.vibe-card__txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(16px, 1.8vw, 26px); }
.vibe-card__n { display: block; margin-bottom: 8px; font-size: .78rem; letter-spacing: .18em; color: #e8c47a; }
.vibe.vibe--cards h3 { margin: 0 0 6px; color: #fff; font-size: clamp(1.7rem, 2.3vw, 2.4rem); }
.vibe.vibe--cards p { margin: 0; color: rgba(245, 245, 247, .82); font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.4; }
@media (hover: hover) {
  .vibe-card:hover { transform: translateY(-6px); border-color: rgba(232, 196, 122, .8); box-shadow: 0 26px 70px rgba(232, 196, 122, .18), 0 18px 50px rgba(0, 0, 0, .4); }
  .vibe-card:hover .obs-vid { transform: scale(1.04); }
}
@media (max-width: 760px) {
  .vibe.vibe--cards { gap: 12px; }
  .vibe-card { border-radius: 14px; }
  .vibe-card__txt { padding: 12px; }
  .vibe.vibe--cards h3 { font-size: 1.35rem; }
  .vibe.vibe--cards p { font-size: .84rem; }
}

/* (4/11) Journal no celular: textos no alto, à esquerda (o Elijah fica à direita, mais embaixo) */
@media (max-width: 760px) {
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal { align-items: start; }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-hero__in { padding: 68px 54% 0 var(--gut); text-align: left; }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-label { margin-bottom: 4px; }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal h1 { line-height: .92; }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal h1 { margin: 0; font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-hero__sub { margin: 8px 0 0; max-width: none; }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-hero__in::before { top: -20px; bottom: -30px; left: -10px; right: 40%;
    -webkit-mask-image: radial-gradient(ellipse 75% 62% at 40% 48%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 75% 62% at 40% 48%, #000 45%, transparent 100%); }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 86%, #000 100%); }
}

/* (4/11) Journal no celular: SEM desfoque; destaque só nas letras (sombra escura colada ao texto) */
@media (max-width: 760px) {
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-hero__in::before { content: none; }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-label,
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal h1,
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-hero__sub {
    color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 2px 10px rgba(0, 0, 0, .7), 0 0 26px rgba(0, 0, 0, .55); }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-hero__sub { font-weight: 500; }
}

/* (4/11) Our story no celular: mesma técnica do Journal (sem desfoque, sombra colada às letras);
   letras um pouco menores e bloco mais baixo e achatado, abaixo das mãos e da Flor da Vida */
@media (max-width: 760px) {
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) .obs-hero__in { padding: 0 var(--gut) 18px; }
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) .obs-hero__in::before { content: none; }
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) .obs-label { margin: 0 0 4px; font-size: .76rem; }
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: .95; max-width: none; }
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) .obs-hero__sub { margin: 8px auto 0; font-size: .86rem; line-height: 1.35; max-width: 40ch; font-weight: 500; }
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) .obs-label,
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) h1,
  html body.obs .obs-hero.obs-hero--story:not(.obs-hero--journal) .obs-hero__sub {
    color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 2px 10px rgba(0, 0, 0, .7), 0 0 26px rgba(0, 0, 0, .55); }
}

/* (4/11) no celular os textos do topo ficam no pé da tela, onde a animação de "aparecer ao rolar" não dispara: mostrar sempre */
@media (max-width: 760px) {
  html body.obs .obs-hero.obs-hero--story .rv { opacity: 1 !important; transform: none !important; }
}

/* ===================== (4/11) JOURNAL v2 — aprovado pela prévia em imagem (assets/journal_mockup/v2) =====================
   fundo azul-noite, dourado, cartões grandes com vídeo em loop (ícone de play + barrinha de progresso), faixas em vídeo */
.jr { --jr-bg: rgb(4, 9, 26); --jr-gold: #e8c47a; --jr-line: rgba(232, 196, 122, .32); background: var(--jr-bg); color: #f5f5f7;
  padding: clamp(48px, 6vw, 88px) var(--gut); }
.jr-wrap { max-width: 1240px; margin: 0 auto; }
.jr-h { margin: 0 0 clamp(18px, 2vw, 26px); font-size: clamp(1.9rem, 3.2vw, 2.8rem); color: #fff; }
.jr-h--sm { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-top: clamp(40px, 5vw, 64px); }
.jr-kicker { margin: 0 0 14px; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--jr-gold); text-align: center; }
.jr-tag { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font: 600 .66rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
  color: #1a1306; background: var(--jr-gold); }

/* filtros dourados */
.pg-chips.jr-chips { justify-content: flex-start; margin-bottom: clamp(26px, 3vw, 40px); }
.obs-page .pg-chips.jr-chips button { color: #f5f5f7; background: transparent; border: 1px solid var(--jr-line); }
.obs-page .pg-chips.jr-chips button:hover { border-color: var(--jr-gold); }
.obs-page .pg-chips.jr-chips button[aria-pressed="true"] { background: var(--jr-gold); color: #1a1306; border-color: var(--jr-gold); }

/* cartões */
.jr-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; text-decoration: none; color: inherit;
  background: rgb(8, 16, 40); border: 1px solid var(--jr-line); isolation: isolate;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), border-color .6s, box-shadow .6s, opacity .4s; }
.jr-card[hidden] { display: none; }
.jr-card.is-dim { opacity: .35; }
.jr-card__media { position: relative; display: block; overflow: hidden; background: rgb(3, 12, 27); }
.jr-card__media .obs-vid, .jr-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.jr-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; z-index: 1;
  background: rgba(232, 196, 122, .92); box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.jr-play::after { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #1a1306; }
.jr-card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .15); z-index: 1; }
.jr-card__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--jr-gold); transform-origin: left; animation: jr-bar 8s linear infinite; }
@keyframes jr-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jr-card__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 1.6vw, 22px); }
.jr-card__title { margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.2; color: #fff; text-transform: none; }
.jr-card__ex { margin: 0; color: rgba(245, 245, 247, .8); font-size: 1rem; line-height: 1.45; max-width: 52ch; }
.jr-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .86rem; color: rgba(245, 245, 247, .7); }
.jr-by { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; }
.jr-by img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--jr-gold); }
.jr-card .todo { font-size: .72rem; padding: 2px 7px; border-radius: 6px; background: rgba(232, 196, 122, .18); color: var(--jr-gold); }
@media (hover: hover) {
  .jr-card:hover { transform: translateY(-5px); border-color: rgba(232, 196, 122, .8); box-shadow: 0 24px 60px rgba(232, 196, 122, .14); }
  .jr-card:hover .jr-card__media .obs-vid, .jr-card:hover .jr-card__media img { transform: scale(1.05); }
}

/* Featured: 1 grande (vídeo com o texto por cima) + 2 menores empilhados */
.jr-feat { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
.jr-card--lead { grid-row: 1 / 3; min-height: clamp(420px, 42vw, 560px); }
.jr-card--lead .jr-card__media { position: absolute; inset: 0; }
.jr-card--lead::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 9, 26, 0) 35%, rgba(4, 9, 26, .78) 72%, rgba(4, 9, 26, .96) 100%); }
.jr-card--lead .jr-card__body { position: relative; z-index: 1; margin-top: auto; padding: clamp(22px, 2.4vw, 36px); }
.jr-card--lead .jr-card__title { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.05; }
.jr-card--lead .jr-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; top: 38%; }
@media (max-width: 760px) { .jr-card--lead .jr-play { top: 30%; } }
.jr-card--lead .jr-play::after { left: 30px; top: 23px; border-width: 15px 0 15px 23px; }
.jr-card--side { flex-direction: row; min-height: 0; }
.jr-card--side .jr-card__media { flex: 0 0 42%; }
.jr-card--side .jr-card__body { justify-content: center; }
.jr-card--side .jr-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.jr-card--side .jr-play::after { left: 16px; top: 12px; border-width: 8px 0 8px 12px; }

/* faixa "The sky this week" */
.jr-week { padding-top: 0; }
.jr-banner { position: relative; display: block; overflow: hidden; border-radius: 22px; min-height: clamp(300px, 30vw, 400px); text-decoration: none; color: #fff;
  border: 1px solid var(--jr-line); isolation: isolate; }
.jr-banner .obs-vid { z-index: -2; }
.jr-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 9, 26, .9) 0%, rgba(4, 9, 26, .55) 50%, rgba(4, 9, 26, .2) 100%); }
.jr-banner__in { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(26px, 3.4vw, 52px); max-width: 640px; }
.jr-banner__label { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--jr-gold); }
.jr-banner__title { font-family: var(--f-display); font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1; }
.jr-week__list { display: grid; gap: 8px; }
.jr-ev { display: grid; grid-template-columns: 26px 110px 1fr; align-items: baseline; gap: 10px; font-size: .98rem; }
.jr-ev__i { color: var(--jr-gold); font-size: 1.1rem; }
.jr-ev__d { color: rgba(245, 245, 247, .7); font-size: .86rem; }
@media (hover: hover) { .jr-banner:hover { border-color: rgba(232, 196, 122, .8); } }

/* os 12 portais */
.jr-portals { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.jr-portal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px 14px; border-radius: 14px; text-decoration: none; color: #fff;
  border: 1px solid var(--jr-line); background: radial-gradient(120% 90% at 50% 0%, rgba(232, 196, 122, .14), rgba(8, 16, 40, 0) 70%); transition: border-color .4s, transform .4s; }
.jr-portal__g { font-size: 1.8rem; line-height: 1; color: var(--jr-gold); }
.jr-portal__n { font-size: .8rem; }
.jr-portal__hz { font-size: .72rem; color: rgba(245, 245, 247, .65); }
@media (hover: hover) { .jr-portal:hover { border-color: var(--jr-gold); transform: translateY(-3px); } }

/* Latest */
.jr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.jr-card--grid .jr-card__media { aspect-ratio: 16 / 10; }
.jr-more [hidden] { display: none !important; }
.jr-more { display: flex; justify-content: center; margin-top: 28px; }
.jr-more .obs-btn--line { color: #fff; border-color: var(--jr-line); }
#latest-title { margin-top: clamp(40px, 5vw, 64px); }

/* fim: sessões · comece por aqui · e-mail */
.jr-end__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(22px, 3vw, 44px); align-items: start; }
.jr-end .jr-h--sm { margin-top: 0; }
.jr-sess { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jr-sess__t { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: #fff; font-size: .92rem; }
.jr-sess__img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 1px solid var(--jr-line); }
.jr-sess__img .jr-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.jr-sess__img .jr-play::after { left: 17px; top: 13px; border-width: 9px 0 9px 13px; }
.jr-list { margin: 0; padding: 0; list-style: none; counter-reset: jr; display: grid; gap: 14px; }
.jr-list li { counter-increment: jr; display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; }
.jr-list li::before { content: counter(jr); grid-row: 1 / 3; font-family: var(--f-display); font-size: 1.4rem; color: var(--jr-gold); }
.jr-list a, .jr-list span { color: #fff; text-decoration: none; line-height: 1.3; }
.jr-list small { color: rgba(245, 245, 247, .6); font-size: .8rem; }
.jr-letter { padding: clamp(20px, 2.2vw, 30px); border-radius: 18px; border: 1px solid var(--jr-line); background: rgb(8, 16, 40); }
.jr-letter__t { margin: 0 0 8px; font-size: clamp(1.3rem, 1.8vw, 1.6rem); color: #fff; }
.jr-letter p { margin: 0 0 16px; color: rgba(245, 245, 247, .75); font-size: .92rem; }
.jr-form { display: grid; gap: 10px; }
.jr-form input { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--jr-line); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; }
.jr-form .obs-btn { width: 100%; justify-content: center; }
.jr-form .letter-form__msg { margin: 0; font-size: .85rem; color: var(--jr-gold); min-height: 1.2em; }

@media (max-width: 960px) {
  .jr-portals { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .jr-end__grid { grid-template-columns: 1fr 1fr; }
  .jr-sessions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .jr { padding: 40px var(--gut); }
  .pg-chips.jr-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gut) * -1) 22px; padding: 0 var(--gut) 4px; scrollbar-width: none; }
  .pg-chips.jr-chips button { flex: 0 0 auto; }
  .jr-feat { grid-template-columns: 1fr; grid-template-rows: auto; }
  .jr-card--lead { grid-row: auto; min-height: 460px; }
  .jr-card--side { min-height: 130px; }
  .jr-card--side .jr-card__media { flex-basis: 38%; }
  .jr-banner { min-height: 0; }
  .jr-banner::after { background: linear-gradient(180deg, rgba(4, 9, 26, .55) 0%, rgba(4, 9, 26, .85) 100%); }
  .jr-ev { grid-template-columns: 22px 1fr; }
  .jr-ev__d, .jr-ev__n { grid-column: 2; }
  .jr-portals { display: flex; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px; scrollbar-width: none; }
  .jr-portal { flex: 0 0 84px; }
  .jr-grid { grid-template-columns: 1fr; }
  .jr-end__grid { grid-template-columns: 1fr; }
  .jr-sess { gap: 8px; }
  .jr-sess__t { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .jr-card__bar::after { animation: none; } }

/* ===================== (4/11) JOURNAL CLARO — pedido do Arthur: fundo claro e dinâmico (seda branca em movimento), sem o azul chapado =====================
   a seda é um vídeo fixo atrás das seções (abaixo do topo); as seções ficam transparentes; cartões brancos com borda dourada */
.jr-silk { position: fixed; inset: 0; z-index: -1; background: #f4f1ea; pointer-events: none; }
.jr-silk .obs-vid { opacity: .95; }
body[data-page="journal"] main { position: relative; z-index: 0; }
body[data-page="journal"] .obs-hero { z-index: 1; }
.jr { --jr-bg: transparent; --jr-gold: #b88a35; --jr-gold-2: #e8c47a; --jr-line: rgba(184, 138, 53, .38); --jr-ink: #1b2036; --jr-mut: rgba(27, 32, 54, .68);
  --jr-card: rgba(255, 255, 255, .8); color: var(--jr-ink); }
.jr-h, .jr-letter__t { color: var(--jr-ink); }
.jr-kicker { color: var(--jr-gold); }
.jr-tag { color: #fff; background: var(--jr-gold); }
.obs-page .pg-chips.jr-chips button { color: var(--jr-ink); background: rgba(255, 255, 255, .7); border-color: var(--jr-line); }
.obs-page .pg-chips.jr-chips button[aria-pressed="true"] { background: var(--jr-ink); color: #fff; border-color: var(--jr-ink); }
.jr-card { background: var(--jr-card); border-color: var(--jr-line); box-shadow: 0 14px 40px rgba(60, 45, 20, .1); }
.jr-card__title { color: var(--jr-ink); }
.jr-card__meta, .jr-card__ex { color: var(--jr-mut); }
.jr-by { color: var(--jr-ink); }
.jr-card .todo { background: rgba(184, 138, 53, .14); color: #8a6420; }
@media (hover: hover) { .jr-card:hover { border-color: var(--jr-gold); box-shadow: 0 24px 60px rgba(120, 90, 30, .18); } }
/* o cartão grande continua com o vídeo e o texto branco por cima */
.jr-card--lead { background: rgb(8, 16, 40); }
.jr-card--lead .jr-card__title { color: #fff; }
.jr-card--lead .jr-card__meta, .jr-card--lead .jr-card__ex { color: rgba(245, 245, 247, .82); }
.jr-card--lead .jr-by { color: #fff; }
.jr-play { background: rgba(255, 255, 255, .92); }
.jr-play::after { border-color: transparent transparent transparent var(--jr-gold); }
.jr-card__bar::after { background: var(--jr-gold-2); }
/* faixa do céu: continua escura (é um vídeo), com borda dourada */
.jr-banner { box-shadow: 0 20px 60px rgba(60, 45, 20, .18); }
.jr-banner__label { color: var(--jr-gold-2); }
.jr-ev__i { color: var(--jr-gold-2); }
/* portais claros */
.jr-portal { color: var(--jr-ink); background: rgba(255, 255, 255, .78); border-color: var(--jr-line); box-shadow: 0 8px 24px rgba(60, 45, 20, .08); }
.jr-portal__g { color: var(--jr-gold); }
.jr-portal__hz { color: var(--jr-mut); }
.jr-more .obs-btn--line { color: var(--jr-ink); border-color: var(--jr-line); background: rgba(255, 255, 255, .7); }
/* fim */
.jr-sess__t { color: var(--jr-ink); }
.jr-sess__img { box-shadow: 0 12px 30px rgba(60, 45, 20, .12); }
.jr-list li::before { color: var(--jr-gold); }
.jr-list a, .jr-list span { color: var(--jr-ink); }
.jr-list small { color: var(--jr-mut); }
.jr-letter { background: var(--jr-card); box-shadow: 0 14px 40px rgba(60, 45, 20, .1); }
.jr-letter p { color: var(--jr-mut); }
.jr-form input { background: #fff; color: var(--jr-ink); border-color: var(--jr-line); }
.jr-form .letter-form__msg { color: #8a6420; }
/* a faixa do mapa grátis e o rodapé ficam por cima da seda, opacos */
body[data-page="journal"] .jr-chart { z-index: 1; }

/* (4/11) Arthur: no JOURNAL o vídeo do topo ocupa TODO o banner também no PC (de ponta a ponta, sem fade na esquerda);
   o nome continua à esquerda, legível pela sombra colada às letras. A Our story fica como estava. */
@media (min-width: 761px) {
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-vid { inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
    object-position: 50% 40%; -webkit-mask-image: none; mask-image: none; }
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-label,
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal h1,
  html body.obs .obs-hero.obs-hero--story.obs-hero--journal .obs-hero__sub {
    color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 2px 12px rgba(0, 0, 0, .6), 0 0 30px rgba(0, 0, 0, .45); }
}

/* (4/11) Arthur: o Journal fica BRANCO como a Our story (sem a seda); os cartões e banners continuam */
.jr { background: var(--o-paper); }
.jr-silk { display: none; }
.jr-card, .jr-portal, .jr-letter { background: #fff; }