/* ==========================================================================
   Tiago Augusto — sistema de design
   Conceito: cartografia estratégica. O site cruza três mundos do conteúdo
   real — urbanismo (plantas e loteamentos), direito (precisão contratual)
   e xadrez (leitura estratégica) — numa grade de "planta" em papel vegetal
   fria, pontuada por traços em latão sobre tinta azul-marinho profunda.
   Identidade de marca fixa e deliberada (não segue tema claro/escuro do
   sistema): ink domina cabeçalho, hero e rodapé; paper conduz a leitura
   longa. Todas as cores são declaradas explicitamente em cada seletor.
   ========================================================================== */

:root {
  --ink: #0F1B24;
  --ink-2: #17242F;
  --ink-3: #1E2E3A;
  --paper: #E6E9EC;
  --paper-2: #D9DEE2;
  --brass: #A9812E;
  --brass-light: #C9A24E;
  --brass-deep: #7C5E22;
  --cream-text: #F1EEE3;
  --slate: #445261;
  --mist: #8FA0AC;
  --line-dark: rgba(241, 238, 227, 0.16);
  --line-light: rgba(15, 27, 36, 0.14);
  --shadow-ink: 0 20px 60px rgba(6, 12, 18, 0.35);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brass);
  color: var(--ink);
  padding: 12px 20px;
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { left: var(--gutter); top: 12px; }

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

/* ---------- layout helpers ---------- */

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 9vw, 112px); }
.on-ink { background: var(--ink); position: relative; }
.on-ink-2 { background: var(--ink-2); }
.on-paper { background: var(--paper); }

.eyebrow-plain {
  font-size: 0.95rem;
  color: var(--brass-deep);
  font-weight: 600;
  margin: 0 0 10px;
}
.on-ink .eyebrow-plain, .on-ink-2 .eyebrow-plain { color: var(--brass-light); }

.lede {
  max-width: var(--measure);
  font-size: 1.1rem;
  color: var(--slate);
}
.on-ink .lede, .on-ink-2 .lede { color: var(--mist); }

/* ---------- header / nav ---------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 500;
  padding-block-start: env(safe-area-inset-top, 0px);
  background: rgba(15, 27, 36, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.is-solid {
  background: rgba(15, 27, 36, 0.94);
  border-bottom-color: var(--line-dark);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cream-text);
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: none;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cream-text);
}
.brand-role {
  font-size: 0.72rem;
  color: var(--mist);
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.nav-links a {
  position: relative;
  color: var(--mist);
  font-size: 0.95rem;
  padding-block: 6px;
  transition: color 0.2s ease;
}
/* o filete de latão entra por um lado e sai pelo outro */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s cubic-bezier(.65,.05,.36,1);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--cream-text); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--brass);
  color: var(--brass-light);
  padding: 8px 18px;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-cta:hover { background: var(--brass); color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--cream-text);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
}

.nav-panel { display: contents; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-panel.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset-inline: 0;
    top: 70px;
    bottom: 0;
    background: var(--ink);
    padding: 32px var(--gutter);
    gap: 26px;
    overflow-y: auto;
  }
  .nav-panel.is-open .nav-links {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
  }
  .nav-panel.is-open .nav-links a { font-size: 1.25rem; }
  .nav-panel.is-open .nav-cta { display: inline-flex; align-self: flex-start; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 0.98rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-solid {
  background: var(--brass);
  color: var(--ink);
}
.btn-solid:hover { background: var(--brass-light); }

.btn-outline {
  border-color: var(--line-dark);
  color: var(--cream-text);
}
.btn-outline:hover { border-color: var(--brass); color: var(--brass-light); }

.btn-outline-dark {
  border-color: var(--line-light);
  color: var(--ink);
}
.btn-outline-dark:hover { border-color: var(--brass-deep); color: var(--brass-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- hero (home) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(140px, 20vw, 200px) clamp(72px, 10vw, 104px);
  background:
    radial-gradient(ellipse at 82% 12%, rgba(169, 129, 46, 0.16), transparent 55%),
    var(--ink);
}

.blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--line-dark) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--line-dark) 0 1px, transparent 1px 96px);
  opacity: 0.55;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

/* --hero-p (0 → 1) is set by main.js as the hero scrolls away; every
   scroll-linked movement below reads it through the individual `translate`
   property, so it composes with the entrance animations on `transform`. */
.hero-plot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  translate: 0 calc(var(--hero-p, 0) * 90px);
}
.hero-plot path,
.page-plot path { fill: none; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

.hero-copy {
  animation: rise-in 0.9s ease 0.4s both;
  translate: 0 calc(var(--hero-p, 0) * -40px);
}
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.hero-kicker {
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--brass-light);
  margin-bottom: 18px;
  font-weight: 600;
}

.hero-title {
  color: var(--cream-text);
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  font-weight: 500;
  max-width: 14ch;
}

.hero-text {
  margin-top: 26px;
  color: var(--mist);
  font-size: 1.12rem;
  max-width: 46ch;
}

.hero-actions { margin-top: 38px; }

.credential-strip {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
  padding-top: 22px;
}
.credential-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-dark);
  transform: scaleX(0);
  transform-origin: left center;
  animation: line-x 1.4s cubic-bezier(.65,.05,.36,1) 1.2s forwards;
}
.credential-strip li {
  padding-inline: 22px;
  border-left: 1px solid var(--line-dark);
  color: var(--mist);
  font-size: 0.88rem;
}
.credential-strip li:first-child { padding-left: 0; border-left: none; }

/* ---------- hero portrait: the photo surfaces, the gold frame traces itself
   around it clockwise, the corner brackets lock in, then the whole piece
   floats. On scroll the photo, frame and corners drift apart (parallax). */
.hero-figure {
  position: relative;
  translate: 0 calc(var(--hero-p, 0) * 70px);
}

.frame {
  position: relative;
  padding: 14px;
  animation: frame-float 7s ease-in-out 2.8s infinite;
}
@keyframes frame-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.frame-line {
  position: absolute;
  background: var(--brass);
  pointer-events: none;
}
.frame-line.fl-top    { top: 0; left: 0; width: 100%; height: 1px; transform-origin: left center;   transform: scaleX(0); animation: line-x 0.55s cubic-bezier(.65,.05,.36,1) 0.6s forwards; }
.frame-line.fl-right  { top: 0; right: 0; width: 1px; height: 100%; transform-origin: center top;   transform: scaleY(0); animation: line-y 0.7s cubic-bezier(.65,.05,.36,1) 1.1s forwards; }
.frame-line.fl-bottom { bottom: 0; left: 0; width: 100%; height: 1px; transform-origin: right center; transform: scaleX(0); animation: line-x 0.55s cubic-bezier(.65,.05,.36,1) 1.75s forwards; }
.frame-line.fl-left   { top: 0; left: 0; width: 1px; height: 100%; transform-origin: center bottom; transform: scaleY(0); animation: line-y 0.7s cubic-bezier(.65,.05,.36,1) 2.25s forwards; }
@keyframes line-x { to { transform: scaleX(1); } }
@keyframes line-y { to { transform: scaleY(1); } }

.frame-photo {
  position: relative;
  overflow: hidden;
  translate: 0 calc(var(--hero-p, 0) * -26px);
  animation: photo-shadow 1.4s ease 0.9s both;
}
@keyframes photo-shadow {
  from { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(169,129,46,0); }
  to   { box-shadow: 0 34px 60px -22px rgba(0,0,0,0.75), 0 24px 90px -30px rgba(169,129,46,0.45); }
}
.frame-photo img {
  width: 100%;
  height: auto;
  animation:
    photo-reveal 1.3s cubic-bezier(.22,.68,.32,1) 0.3s both,
    photo-settle 2.4s cubic-bezier(.22,.68,.32,1) 0.3s both;
}
@keyframes photo-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
/* a foto entra desfocada e ganha nitidez, como uma lente sendo focada */
@keyframes photo-settle {
  from { transform: scale(1.14); filter: blur(14px); }
  to   { transform: scale(1);    filter: blur(0); }
}

.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--brass-light);
  pointer-events: none;
  opacity: 0;
  animation: corner-in 0.7s cubic-bezier(.22,.68,.32,1) 2.6s forwards;
}
.corner.tl { top: -3px;    left: -3px;  border-right: none; border-bottom: none; --cx: -14px; --cy: -14px; translate: calc(var(--hero-p, 0) * -18px) calc(var(--hero-p, 0) * -18px); }
.corner.tr { top: -3px;    right: -3px; border-left: none;  border-bottom: none; --cx:  14px; --cy: -14px; translate: calc(var(--hero-p, 0) *  18px) calc(var(--hero-p, 0) * -18px); }
.corner.bl { bottom: -3px; left: -3px;  border-right: none; border-top: none;    --cx: -14px; --cy:  14px; translate: calc(var(--hero-p, 0) * -18px) calc(var(--hero-p, 0) *  18px); }
.corner.br { bottom: -3px; right: -3px; border-left: none;  border-top: none;    --cx:  14px; --cy:  14px; translate: calc(var(--hero-p, 0) *  18px) calc(var(--hero-p, 0) *  18px); }
@keyframes corner-in {
  from { opacity: 0; transform: translate(var(--cx), var(--cy)); }
  to   { opacity: 1; transform: translate(0, 0); }
}

.geo-tag {
  position: absolute;
  bottom: -18px;
  left: 14px;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 6px 12px;
  letter-spacing: 0.01em;
  z-index: 2;
  animation: rise-in 0.7s ease 2.9s both;
}

/* When the page is shown inside an auto-height frame (the artifact viewer),
   --hero-p updates in steps from an IntersectionObserver; ease between them. */
.hero.hero-io .hero-plot,
.hero.hero-io .hero-copy,
.hero.hero-io .hero-figure,
.hero.hero-io .frame-photo,
.hero.hero-io .corner { transition: translate 0.35s ease-out; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-figure { max-width: 320px; }
  .hero-plot { opacity: 0.35; }
  .credential-strip { flex-direction: column; gap: 10px; }
  .credential-strip li { border-left: none; padding-left: 0; }
}

/* ---------- page header (inner pages) ---------- */

.page-header {
  background: var(--ink);
  padding-block: clamp(120px, 16vw, 160px) clamp(48px, 7vw, 72px);
  position: relative;
  overflow: hidden;
}
.page-header .blueprint-grid { opacity: 0.35; }
.page-header-inner { position: relative; max-width: 760px; }
.page-title {
  color: var(--cream-text);
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
}
.page-sub {
  margin-top: 18px;
  color: var(--mist);
  font-size: 1.08rem;
  max-width: 58ch;
}
.page-header-inner > * { animation: rise-in 0.9s cubic-bezier(.22,.68,.32,1) both; }
.page-header-inner > :nth-child(1) { animation-delay: 0.1s; }
.page-header-inner > :nth-child(2) { animation-delay: 0.28s; }
.page-header-inner > :nth-child(3) { animation-delay: 0.44s; }
.page-header .blueprint-grid { animation: grid-in 1.6s ease both; }
@keyframes grid-in { from { opacity: 0; } }

/* ---------- plot grid (áreas / valores) ---------- */

.plot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line-light);
  border-left: 1px solid var(--line-light);
}
.plot-cell {
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  padding: clamp(28px, 4vw, 40px);
}
.plot-cell .icon {
  width: 34px;
  height: 34px;
  color: var(--brass-deep);
  margin-bottom: 18px;
}
.plot-cell h3 { font-size: 1.3rem; margin-bottom: 10px; }
.plot-cell p { color: var(--slate); font-size: 0.98rem; }

@media (max-width: 720px) {
  .plot-grid { grid-template-columns: 1fr; }
}

.plot-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .plot-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ---------- book callout (Produção Intelectual) ---------- */
.book-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: flex-start;
  border: 1px solid var(--brass);
  padding: clamp(24px, 3.5vw, 34px);
  background: var(--paper-2);
}
.book-card .icon { width: 40px; height: 40px; color: var(--brass-deep); flex: none; }
.book-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
@media (max-width: 560px) {
  .book-card { grid-template-columns: 1fr; }
}

/* dark variant of the plot grid, used inside ink sections */
.plot-grid.on-ink-grid {
  border-top-color: var(--line-dark);
  border-left-color: var(--line-dark);
}
.plot-grid.on-ink-grid .plot-cell {
  border-right-color: var(--line-dark);
  border-bottom-color: var(--line-dark);
}
.plot-grid.on-ink-grid .plot-cell h3 { color: var(--cream-text); }
.plot-grid.on-ink-grid .plot-cell p { color: var(--mist); }
.plot-grid.on-ink-grid .plot-cell .icon { color: var(--brass-light); }

/* ---------- section heading pattern ---------- */

.section-head {
  max-width: 700px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-head p { margin-top: 14px; }

/* ---------- two-column utility (Sobre) ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
}
.two-col > div > .eyebrow-plain { margin-top: 0; }
@media (max-width: 780px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- timeline (Sobre → Trajetória) ---------- */

.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line-light);
  transform-origin: top center;
}
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 5px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--brass);
  background: var(--paper);
}
.timeline-mark {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--brass-deep);
  display: block;
  margin-bottom: 4px;
}
.timeline-item p { color: var(--ink); font-size: 1.02rem; }

/* ---------- simple list (Formação) ---------- */

.spec-list { display: grid; gap: 16px; }
.spec-list li {
  position: relative;
  padding-block: 14px;
  color: var(--ink);
  font-size: 1.02rem;
}
/* o divisor é um traço próprio, para poder se desenhar */
.spec-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-light);
  transform-origin: left center;
}

/* ---------- panel (Foco Atual / Abordagem) ---------- */

.panel {
  border: 1px solid var(--line-light);
  padding: clamp(26px, 4vw, 40px);
  background: var(--paper-2);
}
.panel h3 { font-size: 1.25rem; margin-bottom: 16px; }
.panel ul { display: grid; gap: 12px; }
.panel li {
  padding-left: 20px;
  position: relative;
  color: var(--slate);
}
.panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--brass);
}

/* ---------- pull quote ---------- */

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--cream-text);
  max-width: 18ch;
  line-height: 1.3;
}
.on-paper .pull-quote { color: var(--ink); }
.pull-quote-mark { color: var(--brass); }

/* ---------- activity block (Atividades Profissionais) ---------- */

.activity-list { display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
.activity-block { background: var(--paper); padding: clamp(26px, 4vw, 40px); display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(20px, 4vw, 48px); }
.activity-block h3 { font-size: 1.35rem; max-width: 16ch; }
.activity-block .bullets { display: grid; gap: 10px; }
.activity-block .bullets li {
  color: var(--slate);
  padding-left: 18px;
  position: relative;
  font-size: 0.98rem;
}
.activity-block .bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 7px; height: 1px;
  background: var(--brass-deep);
}
@media (max-width: 780px) {
  .activity-block { grid-template-columns: 1fr; }
}

/* ---------- projects (image / text editorial rows) ---------- */

.project-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 64px);
  position: relative;
}
.project-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-light);
  transform-origin: left center;
}
.project-row:last-of-type::after { display: none; }
.project-row.flip .project-media { order: 2; }
.project-media { position: relative; }
.project-media img { width: 100%; height: clamp(220px, 30vw, 340px); object-fit: cover; }
/* vertical portrait shown whole — no crop, framed at its natural 3:4 ratio */
.project-media.is-portrait {
  width: 100%;
  max-width: 400px;
  justify-self: center;
}
.project-media.is-portrait img {
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
@media (max-width: 780px) {
  .project-media.is-portrait { max-width: 340px; }
}

.project-stamp {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--ink);
  color: var(--brass-light);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border: 1px solid var(--brass);
}
.project-copy h3 { font-size: 1.5rem; margin-bottom: 14px; }
.project-copy p { font-size: 1rem; }

@media (max-width: 780px) {
  .project-row, .project-row.flip { grid-template-columns: 1fr; }
  .project-row.flip .project-media { order: 0; }
}

/* ---------- photo cluster (Valores → família) ---------- */

.photo-cluster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.photo-cluster img { width: 100%; height: 240px; object-fit: cover; }
.photo-cluster figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--mist);
}
.photo-cluster figure { margin: 0; }
@media (max-width: 780px) {
  .photo-cluster { grid-template-columns: 1fr; }
  .photo-cluster img { height: 220px; }
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info { display: grid; gap: 26px; }
.contact-item .label {
  font-size: 0.82rem;
  color: var(--brass-deep);
  font-weight: 600;
  margin-bottom: 6px;
}
.copy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.copy-row span {
  font-size: 1.05rem;
  color: var(--ink);
}
.copy-btn {
  border: 1px solid var(--line-light);
  background: transparent;
  color: var(--brass-deep);
  font-size: 0.82rem;
  padding: 6px 12px;
}
.copy-btn:hover { border-color: var(--brass-deep); }

.form-grid { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.field input,
.field textarea {
  border: 1px solid var(--line-light);
  background: var(--paper);
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.field input:focus,
.field textarea:focus { border-color: var(--brass); }
.field textarea { min-height: 140px; resize: vertical; }

.form-note {
  font-size: 0.86rem;
  color: var(--slate);
  margin-top: 4px;
}
.form-status {
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--brass-deep);
}
.form-status[hidden] { display: none; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--mist);
  padding-block: 56px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr;
  gap: 40px;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { color: var(--cream-text); font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 12px; }
.footer-tag { max-width: 40ch; font-size: 0.95rem; }
.footer-heading { color: var(--cream-text); font-size: 0.88rem; margin-bottom: 16px; font-weight: 600; }
.footer-links { display: grid; gap: 10px; }
.footer-links a:hover { color: var(--brass-light); }
.footer-contact { display: grid; gap: 10px; font-size: 0.92rem; }

.footer-base {
  position: relative;
  margin-top: 44px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--mist);
}

/* ==========================================================================
   Motion & depth
   ========================================================================== */

/* ---------- floating photos: layered shadow + gold corner brackets set
   slightly off the image, and a gentle lift on hover ---------- */
.project-media {
  translate: 0 0;
  transition: translate 0.55s cubic-bezier(.22,.68,.32,1);
}
.project-media img {
  box-shadow:
    0 1px 2px rgba(15, 27, 36, 0.10),
    0 18px 34px -14px rgba(15, 27, 36, 0.38),
    0 44px 80px -34px rgba(15, 27, 36, 0.50);
  transition: box-shadow 0.55s cubic-bezier(.22,.68,.32,1), filter 1s ease;
}
.project-media:hover { translate: 0 -8px; }
.project-media:hover img {
  box-shadow:
    0 2px 4px rgba(15, 27, 36, 0.10),
    0 28px 44px -16px rgba(15, 27, 36, 0.42),
    0 64px 110px -40px rgba(15, 27, 36, 0.55);
}
.project-stamp { z-index: 1; }

.project-media::before,
.project-media::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--brass);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.22,.68,.32,1);
}
.project-media::before { top: -12px; left: -12px; border-right: none; border-bottom: none; }
.project-media::after  { bottom: -12px; right: -12px; border-left: none; border-top: none; }
.project-media:hover::before { transform: translate(-4px, -4px); }
.project-media:hover::after  { transform: translate(4px, 4px); }

/* ---------- reveal-on-scroll for page content ----------
   main.js tags the content blocks with data-reveal and adds .js-reveal to
   <html> only after confirming IntersectionObserver support. Without that
   class nothing is ever hidden. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 0.9s cubic-bezier(.22,.68,.32,1) var(--reveal-delay, 0ms),
    transform 0.9s cubic-bezier(.22,.68,.32,1) var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal="left"]  { transform: translate3d(-48px, 0, 0); }
.js-reveal [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* photos keep their hover lift alongside the reveal transition */
.js-reveal .project-media[data-reveal] {
  transition:
    opacity 1s cubic-bezier(.22,.68,.32,1) var(--reveal-delay, 0ms),
    transform 1s cubic-bezier(.22,.68,.32,1) var(--reveal-delay, 0ms),
    translate 0.55s cubic-bezier(.22,.68,.32,1);
}
/* fotos: entram desfocadas e ganham foco ao surgir na tela */
.js-reveal .project-media[data-reveal] img {
  filter: blur(12px) saturate(0.75) brightness(0.96);
  transition:
    box-shadow 0.55s cubic-bezier(.22,.68,.32,1),
    filter 1.6s cubic-bezier(.22,.68,.32,1) calc(var(--reveal-delay, 0ms) + 0.15s);
}
.js-reveal .project-media[data-reveal].is-revealed img { filter: none; }
.js-reveal .project-media[data-reveal]::before,
.js-reveal .project-media[data-reveal]::after { opacity: 0; }
.js-reveal .project-media[data-reveal]::before { transform: translate(-16px, -16px); }
.js-reveal .project-media[data-reveal]::after  { transform: translate(16px, 16px); }
.js-reveal .project-media[data-reveal].is-revealed::before,
.js-reveal .project-media[data-reveal].is-revealed::after {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--reveal-delay, 0ms) + 0.45s);
}
.js-reveal .project-media[data-reveal].is-revealed:hover::before { transform: translate(-4px, -4px); transition-delay: 0s; }
.js-reveal .project-media[data-reveal].is-revealed:hover::after  { transform: translate(4px, 4px); transition-delay: 0s; }

/* ---------- page change: the outgoing content blanks instantly (header
   stays) so the jump back to the top is never seen ---------- */
html.is-leaving body { background: var(--ink); }
html.is-leaving main,
html.is-leaving .site-footer { visibility: hidden; }

@media print {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-figure, .frame, .frame-photo, .frame-photo img, .geo-tag,
  .corner, .frame-line, .page-header-inner > *, .page-header .blueprint-grid {
    animation: none !important;
    translate: none !important;
  }
  .hero-plot { translate: none !important; }
  .plot-line { stroke-dashoffset: 0; animation: none; }
  .plot-pulse { display: none; }
  .credential-strip::before,
  .page-header-inner::after { animation: none; transform: none; }
  .logo-draw .brand-mark .m { animation: none; stroke-dashoffset: 0; }
  .frame-line { transform: none !important; }
  .corner { opacity: 1 !important; transform: none !important; }
  .frame-photo { box-shadow: 0 34px 60px -22px rgba(0,0,0,0.75); }
  .project-media, .project-media:hover { translate: none; }
}

/* ---------- accessibility utility ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- newsletter ---------- */
.newsletter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  position: relative;
}
.newsletter-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-dark);
  transform-origin: left center;
}
.newsletter-copy { max-width: 420px; }
.newsletter-copy p.footer-tag { margin-top: 6px; }

.newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.newsletter-field { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-field input {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--line-dark);
  background: transparent;
  padding: 12px 14px;
  color: var(--cream-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.newsletter-field input::placeholder { color: var(--mist); }
.newsletter-field input:focus { border-color: var(--brass); }

.newsletter-status {
  font-size: 0.85rem;
  color: var(--brass-light);
  margin: 0;
}
.newsletter-status[hidden] { display: none; }
.newsletter-status.is-error { color: #d98a6b; }

@media (max-width: 640px) {
  .newsletter-strip { flex-direction: column; align-items: stretch; }
  .newsletter-field { flex-direction: column; }
  .newsletter-field button { width: 100%; }
}

.newsletter-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  border: 1px solid var(--line-light);
  background: var(--paper-2);
  padding: clamp(28px, 4vw, 44px);
}
@media (max-width: 780px) { .newsletter-panel { grid-template-columns: 1fr; } }

.newsletter-form-light .newsletter-field input {
  color: var(--ink);
  border-color: var(--line-light);
  background: var(--paper);
}
.newsletter-form-light .newsletter-field input::placeholder { color: var(--slate); }
.newsletter-form-light .newsletter-status { color: var(--brass-deep); }

/* ---------- blog ---------- */
.post-list {
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  margin-top: 8px;
}
.post-card {
  background: var(--paper);
  padding: clamp(24px, 3.5vw, 36px);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
}
.post-card .post-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--brass-deep);
  letter-spacing: 0.01em;
}
.post-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.post-card h3 a { border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.post-card h3 a:hover { border-bottom-color: var(--brass); }
.post-card p { color: var(--slate); font-size: 0.98rem; }
.post-tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--brass-deep);
  border: 1px solid var(--line-light);
  padding: 4px 10px;
}
@media (max-width: 620px) {
  .post-card { grid-template-columns: 1fr; }
}

.blog-empty-note {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px dashed var(--line-light);
  color: var(--slate);
  font-size: 0.95rem;
}

.article-body { max-width: var(--measure); }
.article-body > * + * { margin-top: 20px; }
.article-body h2 { font-size: 1.4rem; margin-top: 36px; }
.article-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-top: 18px;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brass-deep);
  font-weight: 600;
  border-bottom: 1px solid var(--brass-deep);
  margin-top: 8px;
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 2px 6px;
  color: var(--brass-deep);
}

/* ==========================================================================
   Linhas vivas
   Traços que se desenham, títulos que sobem de uma máscara e fotos que
   ganham foco. Tudo usa só transform, opacity e filter (leve no celular).
   Os estados "escondidos" só existem sob .js-reveal, que o main.js liga
   depois de confirmar suporte e ausência de "reduzir movimento"; sem JS
   a página inteira aparece normalmente.
   ========================================================================== */

/* ---------- logo: monograma TA entre marcos de vértice de loteamento ---------- */
.brand-mark .m {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.brand-mark .b { stroke: var(--brass-light); }
.brand-mark .l { stroke: var(--cream-text); }
/* desenha-se uma vez por sessão (a classe vem do script no <head>) */
.logo-draw .brand-mark .m {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 0.8s cubic-bezier(.65,.05,.36,1) forwards;
  animation-delay: var(--d, 0s);
}

/* ---------- fio de leitura: acompanha a rolagem, no pé do cabeçalho ---------- */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--brass);
  transform: scaleX(var(--sp, 0));
  transform-origin: left center;
}

/* ---------- traçado do hero e dos cabeçalhos internos ---------- */
.page-plot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.plot-line {
  stroke: var(--brass);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 2.2s cubic-bezier(.65,.05,.36,1) 0.15s forwards;
}
.plot-line-2 { animation-duration: 1.6s; animation-delay: 1s; opacity: 0.55; }
/* um ponto de luz percorre o traçado devagar, como um sinal em planta */
.plot-pulse {
  stroke: var(--brass-light);
  stroke-width: 2.4;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 0.05;
  opacity: 0;
  animation: plot-pulse 12s linear 3s infinite;
}
@keyframes plot-pulse {
  0%   { stroke-dashoffset: 0.05;  opacity: 0; }
  5%   { opacity: 0.9; }
  55%  { stroke-dashoffset: -0.95; opacity: 0.9; }
  60%  { stroke-dashoffset: -0.95; opacity: 0; }
  100% { stroke-dashoffset: -0.95; opacity: 0; }
}
@media (max-width: 900px) { .page-plot { opacity: 0.35; } }

/* traço curto de latão sob o título das páginas internas */
.page-header-inner::after {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin-top: 30px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
  animation: line-x 0.9s cubic-bezier(.65,.05,.36,1) 0.9s forwards;
}

/* ---------- títulos: cada palavra sobe de dentro de uma máscara ---------- */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.08em 0.16em;
  margin-block: -0.08em -0.16em;
}
.wi {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1s cubic-bezier(.22,.68,.32,1) calc(var(--base, 0ms) + var(--wd, 0ms));
}
.split-in .wi { transform: none; }
.hero-title { --base: 650ms; }
.page-title { --base: 300ms; }
/* o título já tem entrada própria; evita somar duas animações */
.page-header-inner > .has-split { animation: none; }

/* ---------- divisores que se desenham ---------- */
.js-reveal .spec-list li[data-reveal]:not(:last-child)::after {
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.65,.05,.36,1) calc(var(--reveal-delay, 0ms) + 0.25s);
}
.js-reveal .spec-list li.is-revealed:not(:last-child)::after { transform: scaleX(1); }

.js-reveal .project-row::after,
.js-reveal .footer-base::before,
.js-reveal .newsletter-strip::after {
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.65,.05,.36,1);
}
.js-reveal .project-row.rule-in::after,
.js-reveal .footer-base.rule-in::before,
.js-reveal .newsletter-strip.rule-in::after { transform: scaleX(1); }

.footer-base::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-dark);
  transform-origin: left center;
}

/* a linha do tempo desce desenhando */
.js-reveal .timeline::before {
  transform: scaleY(0);
  transition: transform 2.2s cubic-bezier(.65,.05,.36,1) 0.1s;
}
.js-reveal .timeline.rule-in::before { transform: scaleY(1); }

/* ---------- ícones: os traços se desenham quando o bloco surge ---------- */
.js-reveal [data-reveal] .icon :is(rect, line, path, circle, polyline, polygon) {
  stroke-dasharray: var(--len, none);
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 1.3s cubic-bezier(.65,.05,.36,1)
    calc(var(--reveal-delay, 0ms) + 0.3s + var(--i, 0) * 0.14s);
}
.js-reveal [data-reveal].is-revealed .icon :is(rect, line, path, circle, polyline, polygon) {
  stroke-dashoffset: 0;
}
.js-reveal [data-reveal] .icon [fill="currentColor"] {
  opacity: 0;
  transition: opacity 0.6s ease calc(var(--reveal-delay, 0ms) + 1.2s);
}
.js-reveal [data-reveal].is-revealed .icon [fill="currentColor"] { opacity: 1; }

/* ---------- filetes de latão ao passar o mouse ---------- */
.plot-cell,
.post-card,
.activity-block { position: relative; }

.plot-cell::after,
.post-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s cubic-bezier(.65,.05,.36,1);
  pointer-events: none;
}
.plot-cell:hover::after,
.post-card:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.plot-grid.on-ink-grid .plot-cell::after { background: var(--brass-light); }

.footer-links a { position: relative; width: fit-content; }
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--brass-light);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(.65,.05,.36,1);
}
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* nas listas, o divisor ganha um ponto de luz que segue o cursor */
@media (hover: hover) {
  .spec-list li::before,
  .activity-block::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    background: linear-gradient(90deg,
      transparent calc(var(--mx, 50%) - 24%),
      var(--brass) var(--mx, 50%),
      transparent calc(var(--mx, 50%) + 24%));
    transition: opacity 0.35s ease;
  }
  .activity-block::before { bottom: -1px; }
  .spec-list li:hover::before,
  .activity-block:hover::before { opacity: 1; }
}

@media print {
  .scroll-progress { display: none; }
  .wi { transform: none !important; }
}