/* ============================================================
   GABRIELLA LEITE — SITE PESSOAL
   Trocar paleta, fontes ou espaçamentos: editar APENAS :root.
   ============================================================ */

:root {
  /* ── Tema claro (padrão) ── */
  --color-bg:         #ffffff;
  --color-bg-alt:     #f5f5f3;
  --color-text:       #1a1a1a;
  --color-text-sec:   #555;
  --color-text-muted: #999;
  --color-line:       rgba(0,0,0,0.09);
  --color-line-strong:rgba(0,0,0,0.18);

  /* ── Tipografia ── */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ── Identidade (wordmark) ── */
  --font-wordmark:    'Fraunces', Georgia, serif;
  --wordmark-size:    1.15rem;
  --wordmark-weight:  700;
  --wordmark-spacing: -0.02em;

  /* ── Medidas ── */
  --max-width:  1060px;
  --max-prose:  36em;
  --space-xs:   0.4rem;
  --space-s:    0.85rem;
  --space-m:    1.6rem;
  --space-l:    3.2rem;
  --space-xl:   5rem;
  --transition: 0.2s ease;
}

/* ── Tema escuro ── */
html[data-theme="dark"] {
  --color-bg:         #111;
  --color-bg-alt:     #1a1a1a;
  --color-text:       #ddd;
  --color-text-sec:   #aaa;
  --color-text-muted: #666;
  --color-line:       rgba(255,255,255,0.08);
  --color-line-strong:rgba(255,255,255,0.18);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

/* ── Tipografia — escala quieta ── */
h1,h2,h3,h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
h1 { font-size: 0.88rem; margin-bottom: var(--space-m); }
h2 { font-size: 0.82rem; margin-bottom: var(--space-s); font-weight: 700; color: var(--color-text); }
h3 { font-size: 0.78rem; margin-bottom: var(--space-xs); }

p { max-width: var(--max-prose); margin-bottom: var(--space-s); }

a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--transition);
}
a:hover { border-color: var(--color-text); }

.text-muted { color: var(--color-text-muted); }
.text-small { font-size: 0.75rem; }
.text-sans  { font-family: var(--font-sans); }

/* ── Layout ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-m); }
.page-content { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* ── Cabeçalho ── */
.site-header {
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--color-line);
}
.site-header .container {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--space-s);
}
.site-name {
  font-family: var(--font-wordmark);
  font-size: var(--wordmark-size);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-spacing);
  line-height: 1;
}
.site-name a { color: var(--color-text); border-bottom: none; }

.site-nav { display: flex; gap: var(--space-m); align-items: baseline; }
.site-nav a {
  font-family: var(--font-sans); font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom: none;
  transition: color var(--transition);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-text); }

/* Controles: idioma + tema */
.header-controls {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--font-sans); font-size: 0.68rem;
  color: var(--color-text-muted);
}
.header-controls button {
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--color-text-muted);
  padding: 2px 3px; transition: color var(--transition);
}
.header-controls button:hover,
.header-controls button.active { color: var(--color-text); }
.header-controls .sep { cursor: default; }

/* Menu mobile */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--color-text); }
.menu-toggle svg { width: 20px; height: 20px; }
@media(max-width:680px){
  .menu-toggle{display:block}
  .site-nav{display:none;flex-direction:column;width:100%;gap:var(--space-xs);padding-top:var(--space-s)}
  .site-nav.open{display:flex}
  .site-nav a{padding:var(--space-xs) 0;border-bottom:1px solid var(--color-line);font-size:0.8rem}
}

/* ── Rodapé ── */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: var(--space-l) 0;
  font-family: var(--font-sans); font-size: 0.7rem; color: var(--color-text-muted);
}
.site-footer .container { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-s); }
.footer-links { display: flex; gap: var(--space-s); align-items: center; }
.footer-links a { color: var(--color-text-muted); border-bottom: none; transition: color var(--transition); display: flex; }
.footer-links a:hover { color: var(--color-text); }
.footer-links svg { width: 20px; height: 20px; }

/* ── Home ── */
body.page-home .site-header { border-bottom: none; }
body.page-home .site-footer { border-top: none; }
.home-hero {
  --slide-visible: 5.5s;
  --slide-fade: 1.8s;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-l); align-items: stretch;
  padding: 0 0 var(--space-xl);
}
.home-text { max-width: 480px; display: flex; flex-direction: column; justify-content: center; }
.home-block {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 0.88rem; line-height: 1.62;
  margin-bottom: var(--space-l); color: var(--color-text);
}
.home-block--muted { color: var(--color-text-sec); }
.home-nav-hint { font-family: var(--font-sans); font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--space-s); }
.home-nav-hint a { color: var(--color-text-sec); }

.home-slideshow {
  position: relative; width: 100%; min-height: 360px;
  background: var(--color-bg-alt); overflow: hidden;
}
.home-slide {
  position: absolute; inset: 0;
  background: var(--color-bg-alt) center / cover no-repeat;
  opacity: 0; transition: opacity var(--slide-fade) ease;
}
.home-slide--active { opacity: 1; }

@media(max-width:768px){
  .home-hero { grid-template-columns: 1fr; }
  .home-slideshow { min-height: 280px; }
}
@media(max-width:480px){ .home-slideshow { display: none; } }

/* ── Lista de obras ── */
.obras-list { list-style: none; }
.obra-item { padding: var(--space-m) 0; border-bottom: 1px solid var(--color-line); }
.obra-item:first-child { border-top: 1px solid var(--color-line); }
.obra-item a { border-bottom: none; display: block; }
.obra-item a:hover .obra-title { color: var(--color-text); }
.obra-title { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; transition: color var(--transition); margin-bottom: 2px; }
.obra-year { font-family: var(--font-sans); font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.obra-excerpt { font-size: 0.82rem; color: var(--color-text-sec); max-width: var(--max-prose); }

/* ── Grade de projectos (Fotografar) ── */
.obras-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}
@media(max-width:900px){ .obras-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:540px){ .obras-grid { grid-template-columns: 1fr; } }
.obra-grid-item a { border-bottom: none; display: block; }
.obra-grid-item a:hover .obra-grid-thumb { opacity: 0.85; }
.obra-grid-thumb {
  width: 100%; aspect-ratio: 4/3;
  background: var(--color-bg-alt); border: 1px dashed var(--color-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 0.7rem; color: var(--color-text-muted);
  margin-bottom: var(--space-xs); transition: opacity var(--transition);
  overflow: hidden;
}
.obra-grid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.obra-grid-caption {
  font-family: var(--font-sans); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-sec); text-align: center;
  margin-top: var(--space-xs);
}

/* ── Grade de fotos dentro de série ── */
.serie-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-m); margin: var(--space-l) 0;
}
.serie-gallery-item {
  width: 100%; aspect-ratio: 3/2; background: var(--color-bg-alt);
  border: 1px dashed var(--color-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 0.7rem; color: var(--color-text-muted);
  overflow: hidden;
}
.serie-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ── Página de obra ── */
.obra-header { margin-bottom: var(--space-l); }
.obra-body { max-width: var(--max-prose); margin-bottom: var(--space-l); text-align: justify; }
.obra-images { margin: var(--space-l) 0; }
.obra-figure { margin-bottom: var(--space-l); }
.obra-figure img { width: 100%; height: auto; display: block; background: var(--color-bg-alt); }
.obra-figure figcaption { font-family: var(--font-sans); font-size: 0.72rem; color: var(--color-text-muted); margin-top: var(--space-xs); line-height: 1.5; max-width: var(--max-prose); }
.img-placeholder {
  width: 100%; aspect-ratio: 3/2; background: var(--color-bg-alt);
  border: 1px dashed var(--color-line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 0.7rem; color: var(--color-text-muted);
  text-align: center; padding: var(--space-s);
}

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
.tag {
  font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.03em;
  color: var(--color-text-muted); border: 1px solid var(--color-line);
  padding: 2px 8px; transition: all var(--transition);
}
.tag:hover { border-color: var(--color-text); color: var(--color-text); }

/* ── Contato ── */
.contact-list { list-style: none; font-family: var(--font-sans); font-size: 0.82rem; }
.contact-list li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-line); }
.contact-list li:first-child { border-top: 1px solid var(--color-line); }

/* ── Nota de obra em processo ── */
.em-processo {
  border-left: 2px solid var(--color-line-strong);
  padding: var(--space-s) var(--space-m);
  background: var(--color-bg-alt);
  font-size: 0.82rem; color: var(--color-text-sec);
  margin: var(--space-m) 0; max-width: var(--max-prose);
}

/* ── Bio ── */
.bio-photo {
  width: 100%; max-width: 220px;
  height: auto; display: block;
  margin-bottom: var(--space-s);
}
.bio-location { font-family: var(--font-sans); font-size: 0.72rem; color: var(--color-text-muted); font-style: italic; margin-bottom: 1px; }
.bio-contact { font-family: var(--font-sans); font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 1px; }
.bio-contact a { color: var(--color-text-muted); border-bottom: none; }
.bio-contact a.underline { text-decoration: underline; }
.bio-contact a:hover { color: var(--color-text); }
.bio-pronouns { font-family: var(--font-sans); font-size: 0.68rem; color: var(--color-text-muted); font-style: italic; margin-bottom: var(--space-l); }

.bio-text { max-width: var(--max-prose); text-align: justify; margin-bottom: var(--space-l); }
.bio-text p { text-align: justify; margin-bottom: var(--space-s); }

.cv-divider { border: none; border-top: 1px solid var(--color-line); margin: 0 auto var(--space-l); max-width: var(--max-prose); }

.cv-section { text-align: center; margin-bottom: var(--space-l); }
.cv-section h2 { text-align: center; }
.cv-section h2 a { border-bottom: none; color: inherit; }
.cv-list {
  list-style: none; font-family: var(--font-sans); font-size: 0.75rem;
  max-width: var(--max-prose); margin: 0 auto; text-align: center;
  color: var(--color-text-sec);
}
.cv-list li { padding: var(--space-xs) 0; line-height: 1.55; }
.cv-year { font-weight: 600; color: var(--color-text); }

/* ── Escrever — referências APA ── */
.escrever-section { text-align: left; }
.escrever-section h2 { text-align: left; }
.ref-list { max-width: var(--max-prose); }
.ref-entry {
  font-family: var(--font-sans); font-size: 0.75rem;
  line-height: 1.6; color: var(--color-text-sec);
  margin-bottom: var(--space-m); text-indent: -2em; padding-left: 2em;
}
.ref-entry a { font-family: var(--font-sans); font-size: 0.72rem; }

/* ── Intro de secção ── */
.section-intro { margin-bottom: var(--space-l); max-width: var(--max-prose); }
.section-intro p { color: var(--color-text-sec); }

/* ── Idioma ── */
html[lang="pt-BR"] [data-lang="en"], html[lang="pt"] [data-lang="en"] { display: none; }
html[lang="en"] [data-lang="pt"] { display: none; }

/* ── Acessibilidade ── */
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
.skip-link { position:absolute;top:-100%;left:var(--space-s);background:var(--color-text);color:var(--color-bg);padding:var(--space-xs) var(--space-s);font-family:var(--font-sans);font-size:0.75rem;z-index:1000;border-bottom:none }
.skip-link:focus{top:var(--space-xs)}

@media print { .site-header,.site-footer,.menu-toggle{display:none} body{font-size:10pt} a{border-bottom:none;color:inherit} .container{max-width:100%;padding:0} }