/* ══════════════════════════════════════════════════════════════
   THE CELLAR JOURNAL — folha de estilo do tema
   Tokens herdados da identidade do TCJ. Não trocar sem aprovação.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens extraídos do CSS de produção do MVP (index-D5WQfN-F.css),
      não derivados dos documentos impressos. Onde os dois divergiam,
      o site venceu — ele é a identidade; o documento era interpretação. ── */
:root{
  --paper:  #f2ebdd;      /* creme quente, não off-white */
  --ink:    #171713;
  --rust:   #a34d32;      /* o acento é TERRACOTA, não bordô */
  --muted:  #777467;
  --rule:   #1717138c;    /* tinta a 55% — filete que respira */
  --rule-soft: #17171326;
  --blush:  #f0c5b7;      /* kicker sobre fundo escuro */

  /* Zero web fonts por padrão. O MVP não carrega nenhuma, e isso é uma escolha:
     serifada de sistema com desenho de imprensa, sem custo de rede e sem
     terceiro rastreando leitores.
     As variáveis --gh-font-* permitem que o admin do Ghost troque a fonte pelo
     painel se um dia quiser. Se ninguém mexer, o padrão do MVP prevalece. */
  --serif: var(--gh-font-heading,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif);
  --sans:  var(--gh-font-body,Arial,Helvetica,sans-serif);

  --t-xs:  11px;
  --t-sm:  12px;
  --t-base: 19.5px;   /* era 18px — serifada de altura-x baixa pede mais corpo */
  --t-lg:  24px;      /* era 22px */
  --t-xl:  30px;
  --t-2xl: 42px;

  --gap:      24px;
  --gap-lg:   48px;
  --gap-xl:   105px;      /* o ritmo do MVP é largo: 105px entre blocos */
  --measure:  720px;   /* acompanha o corpo maior: ~68 caracteres por linha */
  --deck:     540px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  /* o brilho no canto superior esquerdo é do MVP — dá textura de papel */
  background:radial-gradient(circle at 20% 8%,#fff6,transparent 30%),var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
a:focus-visible,button:focus-visible{ outline:2px solid var(--rust); outline-offset:3px }

.wrap{ width:min(1500px,100% - 84px); margin:0 auto }
.measure{ max-width:var(--measure); margin-left:auto; margin-right:auto }

/* .label = o .meta do MVP: 700 11px sans, tracking .1em, caixa alta */
.label{
  font-family:var(--sans);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5e594e;
}
.label--rust{ color:var(--rust) }
.label--blush{ color:var(--blush) }

/* O CTA do MVP não é botão preenchido: é um link sublinhado em terracota.
   Trocar por botão sólido descaracterizaria — botão é vocabulário de app. */
.read{
  display:inline-flex;
  align-items:baseline;
  gap:25px;
  font:700 var(--t-sm)/1 var(--sans);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--rust);
  border-bottom:1px solid var(--rust);
  padding-bottom:6px;
}
.read:hover{ color:var(--ink); border-color:var(--ink) }

/* Deck: o subtítulo largo sob o título de matéria */
.deck{ max-width:var(--deck); margin:28px 0; font-size:var(--t-lg); line-height:1.4 }

/* A promessa editorial — bloco centrado entre filetes */
.promise{
  border-top:1px solid var(--rule);
  text-align:center;
  margin-top:var(--gap-xl);
  padding:75px 0 0;
}
.promise__line{ font-size:clamp(30px,4.6vw,var(--t-2xl)); line-height:1.15; letter-spacing:-.02em; margin:14px 0 26px }

/* ══ Cabeçalho ══ */
.masthead{ border-bottom:1px solid var(--ink); padding:20px 0 0 }
.masthead__line{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--gap); padding-bottom:14px; border-bottom:1px solid var(--rule);
}
/* O masthead do MVP é enorme e apertado — é a assinatura visual do TCJ.
   clamp até 142px, caixa alta, entrelinha .82 e tracking negativo forte. */
.masthead__title{
  font-family:var(--serif);
  font-size:clamp(58px,8.7vw,142px);
  line-height:.82;
  letter-spacing:-.055em;
  text-transform:uppercase;
  white-space:nowrap;
  text-align:center;
  margin:22px 0 28px;
  display:block;
}

.masthead__nav{
  padding:12px 0;
  border-top:1px solid var(--rule);
}
/* ⚠️ O reset vive em .nav, não em .masthead__nav: a mesma lista é usada no
   rodapé, e prendendo a regra ao cabeçalho o rodapé saía com marcadores. */
.nav{ margin:0; padding:0; list-style:none }
.nav li{ margin:0 }
.masthead__nav .nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:28px }
.footer .nav a{ padding:4px 0 }
.masthead__nav a{
  font-family:var(--sans); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.masthead__nav a:hover{ color:var(--rust) }

.langswitch{ display:flex; gap:10px; align-items:baseline }
.langswitch a{
  font-family:var(--sans); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.langswitch a[aria-current="true"]{ color:var(--rust) }
.langswitch:empty{ display:none }

/* ══ Current Edition ══ */
/* ⚠️ REGRA DE FILETE, para não repetir o problema das duas linhas:
   cada bloco leva filete só NO TOPO. Quem fecha a página é o rodapé.
   Filete embaixo de um bloco + filete em cima do próximo = duas linhas
   separadas por espaço, que foi exatamente o que apareceu na home. */
.edition{
  border-top:2px solid var(--ink);
  padding:var(--gap-lg) 0 0;
  margin-bottom:var(--gap-xl);
}
.edition__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--gap-lg) }
.edition__lede{
  font-size:clamp(26px,4.4vw,var(--t-2xl)); line-height:1.18;
  font-weight:600; letter-spacing:-.012em; max-width:16ch; margin:0;
}

/* ══ Seções numeradas ══ */
.section{ margin-bottom:var(--gap-xl) }
.section__head{
  display:flex; align-items:baseline; gap:18px;
  border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:var(--gap-lg);
}
.section__num{ font-family:var(--sans); font-size:var(--t-sm); font-weight:700; letter-spacing:.1em; color:var(--rust) }
.section__title{ font-size:var(--t-lg); font-weight:600; margin:0 }

/* ══ Cartões ══ */
.feed{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--gap-xl) var(--gap-lg) }
.card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-deep); margin-bottom:16px }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.card:hover .card__media img{ transform:scale(1.02) }
.card__title{ font-size:var(--t-lg); font-weight:600; line-height:1.24; letter-spacing:-.01em; margin:8px 0 }
.card:hover .card__title{ color:var(--rust) }
.card__excerpt{ font-size:17px; color:var(--muted); line-height:1.55; margin:0 }
.card__meta{ display:flex; gap:12px; align-items:baseline; margin-top:12px }


/* ══ Escala 0X / 05 ══ */
.rating{
  display:inline-flex; align-items:baseline; gap:2px;
  font-family:var(--sans); font-weight:700; letter-spacing:.04em;
  color:var(--rust); white-space:nowrap;
}
.rating__score{ font-size:var(--t-lg) }
.rating__of{ font-size:var(--t-sm); color:var(--muted) }

.review{ border:1px solid var(--rule); background:var(--paper-deep); padding:26px 28px; margin:var(--gap-lg) auto; max-width:var(--measure) }
.review__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--gap);
  border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:16px;
}
.review__wine{ font-size:var(--t-lg); font-weight:600; margin:0; line-height:1.25 }

/* ══ Artigo ══ */
.article{ padding:var(--gap-xl) 0 }
.article__head{ margin-bottom:var(--gap-lg) }
.article__title{
  font-size:clamp(32px,5.2vw,var(--t-2xl)); font-weight:600;
  line-height:1.12; letter-spacing:-.018em; margin:14px 0 18px;
}
.article__lede{ font-size:var(--t-lg); line-height:1.45; color:var(--muted); margin:0 0 26px }
.article__meta{
  display:flex; flex-wrap:wrap; gap:16px; align-items:baseline;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:12px 0;
}
.article__feature{ margin:var(--gap-lg) 0 }
/* Foto vertical (garrafa) estourava a altura da tela. Teto de altura, imagem
   centrada; foto horizontal não é afetada. */
.article__feature img{ max-height:76vh; width:auto; max-width:100%; margin:0 auto }
.article__feature figcaption{ text-align:center }
.article__feature figcaption{ font-family:var(--sans); font-size:var(--t-xs); color:var(--muted); margin-top:10px }

.content > *{ max-width:var(--measure); margin-left:auto; margin-right:auto }
/* ⚠️ `margin:0 0 1.35em` zeraria as laterais e derrubaria o auto da regra acima,
   jogando todo o corpo do texto contra a esquerda. Sempre `auto` nas laterais. */
.content p{ margin:0 auto 1.35em }
.content ul,.content ol{ margin:0 auto 1.35em; padding-left:1.2em }
.content li{ margin-bottom:.4em }
.content hr{ border:0; border-top:1px solid var(--rule); margin:2.4em auto }
.content h2{ font-size:var(--t-xl); font-weight:600; line-height:1.2; letter-spacing:-.012em; margin:1.9em auto .55em }
.content h3{ font-size:var(--t-lg); font-weight:600; margin:1.7em auto .5em }
.content blockquote{
  border-left:2px solid var(--rust); padding-left:26px; margin:1.8em auto;
  font-size:var(--t-lg); line-height:1.4; font-style:italic;
}
.content a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule) }
.content a:hover{ color:var(--rust); text-decoration-color:var(--rust) }
.content figure,.content .kg-width-wide{ max-width:min(1000px,100%) }
.content .kg-width-full{ max-width:100% }
.content figcaption{ font-family:var(--sans); font-size:var(--t-xs); color:var(--muted); text-align:left; margin-top:10px }

/* ══ Autor por tag ══ */
.author{
  display:flex; gap:22px; align-items:flex-start;
  border-top:2px solid var(--ink); padding-top:26px;
  margin:var(--gap-xl) auto 0; max-width:var(--measure);
}
.author__portrait{ width:82px; height:82px; flex:0 0 82px; border-radius:50%; object-fit:cover; background:var(--paper-deep) }
.author__name{ font-size:var(--t-lg); font-weight:600; margin:6px 0 }
.author__bio{ font-size:16.5px; color:var(--muted); margin:0 }

/* ══ Paywall ══ */
.paywall{
  position:relative; max-width:var(--measure); margin:0 auto;
  padding:var(--gap-lg) 30px; border:1px solid var(--ink);
  background:var(--paper-deep); text-align:center;
}
.paywall::before{
  content:""; position:absolute; left:0; right:0; top:-140px; height:140px;
  background:linear-gradient(to bottom,rgba(248,245,239,0),var(--paper-deep));
  pointer-events:none;
}
.paywall__title{ font-size:var(--t-xl); font-weight:600; line-height:1.18; letter-spacing:-.012em; margin:12px 0 14px }
.paywall__body{ color:var(--muted); margin:0 auto 26px; max-width:44ch }
.paywall__price{ font-family:var(--sans); font-size:var(--t-sm); color:var(--muted); margin-top:16px }

.btn{
  display:inline-block; font-family:var(--sans); font-size:var(--t-sm);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 34px; border:1px solid var(--rust); background:var(--rust);
  color:var(--paper); cursor:pointer; transition:background .18s ease,color .18s ease;
}
.btn:hover{ background:transparent; color:var(--rust) }
.btn--ghost{ background:transparent; color:var(--rust) }
.btn--ghost:hover{ background:var(--rust); color:var(--paper) }


/* ══ Captura de e-mail ══ */
.signup{
  border-top:2px solid var(--ink);
  padding:var(--gap-lg) 0 0;
  margin:var(--gap-xl) 0;
  text-align:center;
}
.signup__form{ display:flex; gap:10px; max-width:460px; margin:22px auto 0 }
.signup__form input{
  flex:1; font-family:var(--sans); font-size:15px; padding:14px 16px;
  border:1px solid var(--ink); background:var(--paper); color:var(--ink);
}
.signup__form input::placeholder{ color:var(--muted) }

/* ══ Rodapé ══ */
.footer{ border-top:1px solid var(--ink); padding:var(--gap-lg) 0 var(--gap-xl); margin-top:var(--gap-xl) }
.footer__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--gap-lg) var(--gap) }
.footer a{ display:block; font-size:16px; padding:4px 0; color:var(--muted) }
.footer a:hover{ color:var(--rust) }
.footer__mark{ font-family:var(--sans); font-weight:700; font-size:var(--t-lg); letter-spacing:.2em; color:var(--rust) }

/* ══ Responsivo ══ */
@media (max-width:860px){
  :root{ --gap-xl:56px; --gap-lg:34px }
  .masthead__line{ flex-wrap:wrap; gap:10px }
  .edition__head{ flex-direction:column; gap:12px }
  .author{ flex-direction:column; gap:16px }
  .signup__form{ flex-direction:column }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .card:hover .card__media img{ transform:none }
}
@media print{
  .paywall,.signup,.masthead__nav,.langswitch{ display:none }
  body{ background:#fff }
}

/* ── Veredito em palavra, ao lado da nota (padrão do MVP) ── */
.verdict{
  font:700 var(--t-xs)/1 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:6px;
}

/* ── Índice editorial: as seis seções numeradas 01–06 ── */
.index{ margin-top:var(--gap-xl) }
.index__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
  border-top:1px solid var(--rule);
}
.index__item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:20px;
  padding:26px 0;
  border-bottom:1px solid var(--rule-soft);
}
.index__num{ font:700 var(--t-xs)/1 var(--sans); letter-spacing:.1em; color:var(--rust) }
.index__name{ font-size:var(--t-lg); font-weight:600; margin:0 0 4px }
.index__desc{ font-size:16.5px; color:var(--muted); margin:0 }
.index__arrow{ color:var(--rust) }
.index__item:hover .index__name{ color:var(--rust) }

/* ── Formulários ── */
.tcjform{ max-width:var(--measure) }
.tcjform__field{ display:block; margin-bottom:26px }
.tcjform__field input,
.tcjform__field select,
.tcjform__field textarea{
  width:100%;
  margin-top:8px;
  font-family:var(--serif);
  font-size:18px;
  padding:13px 15px;
  border:1px solid var(--rule);
  background:#fff8;
  color:var(--ink);
}
.tcjform__field textarea{ resize:vertical }
.tcjform__hint{ display:block; margin-top:8px; font-size:14px; color:var(--muted) }
.tcjform__trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.tcjform__status{ margin-top:16px; font-family:var(--sans); font-size:14px }
.tcjform__status[data-state="ok"]{ color:var(--rust) }
.tcjform__status[data-state="erro"]{ color:#8a2b2b }

/* ── Navegação ── */
.nav a{
  font:700 var(--t-xs)/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav a:hover{ color:var(--rust) }
.nav__item--current a{ color:var(--rust) }

/* Em telas estreitas o masthead gigante precisa rolar em vez de quebrar:
   quebrar "THE CELLAR JOURNAL" em duas linhas descaracteriza a assinatura. */
@media (max-width:620px){
  .masthead__title{ font-size:clamp(34px,11vw,58px); letter-spacing:-.04em }
  .masthead__line{ flex-direction:column; align-items:flex-start; gap:8px }
  .masthead__nav .nav{ gap:18px }
}

/* ── Cabeçalho de página de seção e de autor ──
   O título de seção precisa de presença: é o único elemento tipográfico
   grande da página, e sem isso a tela fica com o masthead gigante em cima
   e nada abaixo dele. */
.pagehead{
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);
  padding:var(--gap-lg) 0;
  margin-bottom:var(--gap-xl);
}
.pagehead__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap-lg);
  align-items:end;
  margin-top:22px;
}
.pagehead__title{
  font-size:clamp(42px,6.5vw,86px);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0;
}
.pagehead__desc{
  font-size:var(--t-lg);
  line-height:1.42;
  color:var(--muted);
  max-width:46ch;
  margin:0 0 6px;
}
@media (max-width:860px){
  .pagehead__grid{ grid-template-columns:1fr; gap:20px; align-items:start }
  .pagehead__title{ font-size:clamp(36px,10vw,58px) }
}

/* ── Leituras relacionadas no fim do artigo ── */
.more{
  border-top:2px solid var(--ink);
  padding-top:var(--gap-lg);
  margin-top:var(--gap-xl);
}
.more .section__head{ border:0; padding:0; margin-bottom:var(--gap-lg) }
.more .feed{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }


/* ── Subscribe como botão no menu ──
   Um único item do menu vira ação. Fundo tinta, texto na cor do papel:
   o contraste vem da paleta que já existe, sem introduzir cor nova. */
.nav__item--cta a{
  background:var(--ink);
  color:var(--paper);
  padding:9px 18px;
  display:inline-block;
  line-height:1;
  transition:background .18s ease;
}
.nav__item--cta a:hover{ background:var(--rust); color:var(--paper) }
.nav__item--cta.nav__item--current a{ background:var(--rust) }
/* O menu alinha pela linha de base do texto; o botão tem padding próprio,
   então precisa de um empurrão para não desalinhar dos irmãos. */
.masthead__nav .nav{ align-items:center }
.masthead__nav .nav__item--cta{ margin-left:6px }
/* No rodapé o mesmo item não vira botão — lá é lista, não ação. */
.footer .nav__item--cta a{ background:none; color:var(--muted); padding:4px 0 }
.footer .nav__item--cta a:hover{ color:var(--rust) }

/* ── Paginação ──
   Só aparece quando há mais de uma página. Filete em cima, números em
   grotesca, setas nas pontas — vocabulário de revista, não de blog. */
.pager{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--gap);
  border-top:1px solid var(--rule);
  margin-top:var(--gap-lg);
  padding-top:22px;
}
.pager__link{
  font:700 var(--t-xs)/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rust);
}
.pager__link:hover{ color:var(--ink) }
.pager__link--off{ color:var(--rule-soft); opacity:.5 }
.pager__count{
  font:700 var(--t-xs)/1 var(--sans);
  letter-spacing:.14em;
  color:var(--muted);
}

/* ── Seção sem matéria ── */
.empty{
  border-top:1px solid var(--rule);
  padding:var(--gap-xl) 0;
  text-align:center;
}
.empty__line{
  font-size:clamp(26px,3.6vw,var(--t-xl));
  color:var(--muted);
  margin:0 0 24px;
}

/* Na página de seção o índice vem depois da listagem: precisa de respiro
   e de um filete que marque a virada de assunto. */
.index{ border-top:2px solid var(--ink); padding-top:var(--gap-lg) }
.index .section__head{ border:0; padding:0 }


/* ── Hero da Current Edition ──
   Imagem grande à esquerda, texto à direita, alinhados pelo topo.
   O bloco inteiro é um link: não há CTA de texto, porque um "leia mais"
   ao lado de um título e um resumo é redundância, não ajuda. */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:var(--gap-lg);
  align-items:start;
  margin-top:var(--gap-lg);
}
.hero__media{ overflow:hidden; background:var(--paper-deep); aspect-ratio:3/2 }
.hero__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.hero:hover .hero__media img{ transform:scale(1.015) }
.hero__body{ padding-top:4px }
.hero__title{
  font-size:clamp(32px,4.4vw,54px);
  line-height:1.05;
  letter-spacing:-.028em;
  font-weight:600;
  margin:12px 0 18px;
}
.hero:hover .hero__title{ color:var(--rust) }
.hero__deck{
  font-size:var(--t-lg);
  line-height:1.45;
  color:var(--muted);
  margin:0 0 20px;
  max-width:44ch;
}
.hero__meta{ display:flex; gap:16px; align-items:baseline }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:var(--gap) }
  .hero__title{ font-size:clamp(28px,7vw,40px) }
}


/* Arquivo de reviews: cards mais largos, porque não têm imagem — o peso
   fica na nota e no nome do vinho. */
.feed--reviews{ grid-template-columns:repeat(auto-fill,minmax(400px,1fr)) }
.feed--reviews .review{ margin:0; height:100% }