/* Hallmark · genre: editorial · custom (tuned) · Spica Astrologia — shared stylesheet
   macrostructures: Manifesto (index) · Narrative Workflow (metodo) · Catalogue (servicos)
   nav: N6 masthead · footer: Ft1 mast-headed
   pre-emit critique: P5 H5 E4 S5 R4 V5
   contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
   tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
@import url("tokens.css");

/* ————————————————————————————————————————
   Base
———————————————————————————————————————— */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0 0 var(--space-md); max-width: var(--measure); }

a { color: inherit; }

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

:focus-visible {
  outline: var(--rule-thick) solid var(--color-accent);
  outline-offset: 3px;
}

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

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

/* ————————————————————————————————————————
   Layout & shared type
———————————————————————————————————————— */
.wrap { width: min(100% - var(--space-xl), 1180px); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--space-xl), 760px); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

.lede { color: var(--color-ink-soft); font-size: var(--text-lg); line-height: 1.55; }

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  font-weight: 600;
}

/* ————————————————————————————————————————
   N6 · Newspaper masthead
———————————————————————————————————————— */
.masthead {
  border-bottom: var(--rule-thick) double var(--color-rule);
  padding-top: var(--space-lg);
}
.masthead__issue {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule-faint);
}
.masthead__wordmark {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: var(--space-md) 0 var(--space-2xs);
  text-decoration: none;
  color: var(--color-ink);
}
.masthead__wordmark span { color: var(--color-accent); }
.masthead__tagline {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-md);
}
.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
  border-top: var(--rule-hair) solid var(--color-rule-faint);
  padding: var(--space-sm) 0;
}
.masthead__nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-soft);
  padding: var(--space-2xs) 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.masthead__nav a:hover { color: var(--color-ink); }
.masthead__nav a[aria-current="page"] { color: var(--color-accent); }
.masthead__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: var(--rule-thick);
  background: var(--color-accent);
}

/* ————————————————————————————————————————
   Buttons & links
———————————————————————————————————————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;             /* 44px accessible height */
  padding: 0 var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: var(--rule-hair) solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--ghost:active { transform: translateY(1px); }
.btn:focus-visible { outline: var(--rule-thick) solid var(--color-accent); outline-offset: 3px; }
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.link-under {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-accent);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.link-under:hover { color: var(--color-ink); border-color: var(--color-ink); }
.link-under:focus-visible { outline: var(--rule-thick) solid var(--color-accent); outline-offset: 3px; }

/* ————————————————————————————————————————
   Reveal (one quiet orchestrated entrance)
———————————————————————————————————————— */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ————————————————————————————————————————
   Manifesto (Home)
———————————————————————————————————————— */
.manifesto { padding: var(--space-2xl) 0 var(--space-3xl); }
.manifesto__kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}
.manifesto__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 8vw, var(--text-display));
  line-height: 1.0;
  letter-spacing: -0.02em;
  max-width: 15ch;
  margin: 0 0 var(--space-xl);
}
.manifesto__statement em { font-style: italic; color: var(--color-accent); }
.manifesto__sub {
  font-size: var(--text-xl);
  color: var(--color-ink-soft);
  max-width: 46ch;
  line-height: 1.42;
  margin-bottom: var(--space-2xl);
}
.manifesto__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* Creed — vertical numeral stack (gate 54 compliant) */
.creed { padding: var(--space-3xl) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.creed + .creed { border-top: var(--rule-hair) solid var(--color-rule-faint); }
.creed__block { max-width: 62ch; }
.creed__num {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-md);
}
.creed__head { font-size: var(--text-3xl); margin-bottom: var(--space-md); max-width: 20ch; }
.creed__body { color: var(--color-ink-soft); }

/* Contrast strip */
.contrast {
  padding: var(--space-3xl) 0;
  border-top: var(--rule-thick) double var(--color-rule);
  background: var(--color-paper-sink);
}
.contrast__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.contrast__col { padding: var(--space-xl); }
.contrast__col:first-child { border-right: var(--rule-hair) solid var(--color-rule); }
.contrast__label { margin-bottom: var(--space-md); }
.contrast__col--trad .contrast__label { color: var(--color-accent); }
.contrast__col h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); font-weight: 500; }
.contrast__col p { color: var(--color-ink-soft); font-size: var(--text-base); margin: 0; }

/* ————————————————————————————————————————
   Narrative Workflow (Método)
———————————————————————————————————————— */
.page-head { padding: var(--space-3xl) 0 var(--space-xl); }
.page-head h1 { font-size: clamp(2.5rem, 6.5vw, var(--text-4xl)); max-width: 16ch; margin-bottom: var(--space-lg); }
.page-head .lede { max-width: 54ch; }

.stage {
  display: block;
  padding: var(--space-2xl) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: 62ch;
}
.stage__index {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.stage__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-accent);
  line-height: 0.9;
  font-weight: 500;
}
.stage h2 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); font-weight: 500; }
.stage__body { color: var(--color-ink-soft); margin: 0; }
.stage__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-faint);
}
.stage__terms span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}
.stage__terms span::before { content: "· "; color: var(--color-accent); }

/* ————————————————————————————————————————
   Conversational FAQ (Perguntas)
———————————————————————————————————————— */
.qa {
  padding: var(--space-2xl) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: 66ch;
}
.qa__q {
  font-size: var(--text-2xl);
  font-weight: 500;
  margin-bottom: var(--space-md);
  max-width: 30ch;
}
.qa__q::before {
  content: "—";
  color: var(--color-accent);
  margin-right: var(--space-sm);
}
.qa__a { color: var(--color-ink-soft); margin: 0; }

/* ————————————————————————————————————————
   Catalogue (Serviços)
———————————————————————————————————————— */
.catalogue { padding: var(--space-xl) 0 var(--space-3xl); }
.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg) var(--space-xl);
  align-items: baseline;
  padding: var(--space-2xl) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}
.tier--flag { border-top: var(--rule-thick) solid var(--color-accent); }
.tier__title { font-size: var(--text-3xl); font-weight: 500; margin-bottom: var(--space-xs); }
.tier__title .flag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  vertical-align: middle;
  margin-left: var(--space-sm);
  font-weight: 600;
}
.tier__desc { color: var(--color-ink-soft); max-width: 54ch; margin: 0; }
.tier__price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-ink);
  line-height: 1;
  white-space: nowrap;
  text-align: right;
}
.tier__price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-ink-faint);
  margin-top: var(--space-xs);
}
.tier__addon {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  align-items: baseline;
  padding-top: var(--space-lg);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}
.tier__addon span { max-width: 54ch; }

.fine {
  padding: var(--space-2xl) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.fine h3 { margin-bottom: var(--space-sm); }
.fine p { font-size: var(--text-base); margin: 0; }

/* Booking CTA band */
.book {
  padding: var(--space-3xl) 0;
  border-top: var(--rule-thick) double var(--color-rule);
  background: var(--color-paper-sink);
}
.book h2 { font-size: clamp(2.1rem, 5.5vw, var(--text-4xl)); max-width: 18ch; margin-bottom: var(--space-md); }
.book p { color: var(--color-ink-soft); font-size: var(--text-lg); margin-bottom: var(--space-xl); }

/* ————————————————————————————————————————
   Index-First · página de links (bio)
   Desenhada para o celular primeiro: coluna única,
   alvos de toque de 44px+, sem navegação concorrente.
———————————————————————————————————————— */
.bio-page { display: flex; min-height: 100vh; }
.bio {
  width: min(100% - var(--space-lg), 34rem);
  margin-inline: auto;
  padding: var(--space-2xl) 0 var(--space-xl);
  display: flex;
  flex-direction: column;
}
.bio__head { text-align: center; margin-bottom: var(--space-xl); }
.bio__portrait {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--color-paper-raise);
  box-shadow: 0 0 0 1px var(--color-rule);
}
.bio__mark {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 0.03em;
  line-height: 1;
}
.bio__mark span { color: var(--color-accent); }
.bio__desc {
  margin: var(--space-md) auto 0;
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.bio__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-xl);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.bio__cta:hover { background: var(--color-accent-deep); }
.bio__cta:active { transform: translateY(1px); }
.bio__cta:focus-visible { outline: var(--rule-thick) solid var(--color-accent); outline-offset: 3px; }

.links { display: flex; flex-direction: column; border-top: var(--rule-hair) solid var(--color-rule-faint); }
.link-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 3.5rem;
  justify-content: center;
  padding: var(--space-md) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule-faint);
  text-decoration: none;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-mid) var(--ease-out);
}
.link-row:hover { background: var(--color-paper-raise); }
.link-row:focus-visible { outline: var(--rule-thick) solid var(--color-accent); outline-offset: -2px; }
.link-row__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  line-height: 1.15;
}
.link-row__meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}
.link-row::after {
  content: "→";
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-rule);
  font-size: var(--text-lg);
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.link-row:hover::after {
  color: var(--color-accent);
  transform: translateY(-50%) translateX(3px);
}

.bio__foot {
  margin-top: auto;
  padding-top: var(--space-2xl);
  text-align: center;
}
.bio__foot p {
  margin: 0;
  max-width: none;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}

/* ————————————————————————————————————————
   Ft1 · Mast-headed footer
———————————————————————————————————————— */
.foot { border-top: var(--rule-thick) double var(--color-rule); padding: var(--space-2xl) 0; margin-top: var(--space-2xl); }
.foot__band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
}
.foot__mark { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.foot__mark span { color: var(--color-accent); }
.foot__tagline { font-family: var(--font-display); font-style: italic; color: var(--color-ink-soft); margin: var(--space-2xs) 0 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot__links a {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.foot__links a:hover { color: var(--color-accent); }
.foot__legal {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule-faint);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  letter-spacing: 0.04em;
  max-width: none;
}

/* ————————————————————————————————————————
   Hero diptych + retrato
———————————————————————————————————————— */
.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-2xl);
  align-items: center;
}
.manifesto__text { min-width: 0; }

.portrait {
  position: relative;
  margin: 0;
  min-width: 0;
  justify-self: end;
  width: 100%;
  max-width: 30rem;
}
.portrait__glow {
  position: absolute;
  inset: -12% -8% -4%;
  background: radial-gradient(60% 50% at 55% 38%,
              oklch(0.62 0.14 55 / 0.34) 0%,
              oklch(0.62 0.14 55 / 0.10) 45%,
              transparent 72%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.portrait picture {
  display: block;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.portrait__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  background: var(--color-paper-sink);
  /* dissolve as bordas no papel — o retrato emerge do escuro */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 74%, transparent 99%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 74%, transparent 99%),
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.portrait__cap {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--space-lg) * -1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  text-align: right;
}

/* ————————————————————————————————————————
   Ticker — vocabulário técnico em rolagem
———————————————————————————————————————— */
.ticker {
  overflow: hidden;
  border-block: var(--rule-hair) solid var(--color-rule-faint);
  padding: var(--space-md) 0;
  /* esmaece nas duas pontas em vez de cortar seco */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  width: max-content;
  animation: ticker-scroll 46s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-ink-faint);
  white-space: nowrap;
}
.ticker__item::after {
  content: "·";
  margin-left: var(--space-2xl);
  color: var(--color-accent);
  font-style: normal;
}
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ————————————————————————————————————————
   Barra de progresso de leitura
———————————————————————————————————————— */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 300;
  pointer-events: none;
  background: transparent;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ————————————————————————————————————————
   Motion — stagger e reduced-motion
———————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; transform: none; }
  [data-parallax] { transform: none !important; }
  .progress { display: none; }
}

/* ————————————————————————————————————————
   Responsive
———————————————————————————————————————— */
@media (max-width: 960px) {
  .manifesto__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .portrait { justify-self: start; max-width: 24rem; order: -1; }
  .portrait__cap { text-align: left; }
}

@media (max-width: 720px) {
  .contrast__grid { grid-template-columns: 1fr; }
  .contrast__col { padding: var(--space-lg); }
  .contrast__col:first-child { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .tier { grid-template-columns: 1fr; }
  .tier__price { text-align: left; }
  .fine { grid-template-columns: 1fr; }
  .masthead__nav { gap: var(--space-md); }
  .ticker__item { font-size: var(--text-lg); }
}