/* ==========================================================================
   FERNANDA MEYER — BASE
   Reset, typography classes, layout primitives. Built on tokens.css.
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

img, video{ max-width: 100%; display: block; }
a{ color: inherit; }

/* Visible, non-decorative focus state — never remove outline without replacing it */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

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

/* ---- Type scale classes ---- */
.type-display{
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.type-h1{ font-family: var(--font-display); font-size: var(--text-h1); font-weight: 500; line-height: var(--leading-tight); }
.type-h2{ font-family: var(--font-display); font-size: var(--text-h2); font-weight: 500; line-height: var(--leading-snug); }
.type-h3{ font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); }
.type-body{ font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-normal); }
.type-small{ font-family: var(--font-body); font-size: var(--text-small); line-height: var(--leading-normal); color: var(--color-muted); }
/* Mono is reserved for genuinely tabular/metadata content (dates, handles,
   counts) — see .type-caption below. Labels and navigation read as small
   caps in the body face instead of typewriter text; v2 ran everything
   structural through JetBrains Mono, which was the single biggest driver
   of the "technical dossier" feeling this revision corrects. */
.type-caption{ font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.type-label{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
}
.type-nav{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
}
.type-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-quote);
  line-height: var(--leading-snug);
}

/* Emphasis word inside body copy — the carousel technique: one word in
   display italic, carmim, inside an otherwise plain sentence. Use sparingly:
   at most one per paragraph. */
em.accent{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent);
}

/* ---- Layout primitives ---- */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow{
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-text{
  max-width: var(--container-text);
}

.section{
  background: var(--color-bg);
  color: var(--color-text);
  padding-block: var(--space-8);
}
/* MD09 P0.1: no automatic divider between sections — on a black-dominant
   site a ruled line between every module is exactly the "stack of slabs"
   feeling we're removing. Rhythm now comes from padding weight, tone
   (dossie/autoridade), scale and composition instead. Use .section-divide
   only where a line does real work (see pages.css). */
.section + .section{ border-top: none; }
.section + .section.section-divide{ border-top: var(--border-hairline); }

/* Weight system (MD09 P0.1): spacing follows the importance of what's in
   the section, not a single global number. */
.section-tight{ padding-block: var(--space-6); }     /* one line, a fact, a transition */
.section-feature{ padding-block: var(--space-10); }  /* a statement moment, a hero, a close */

/* Editorial grid: 12 columns desktop, generous gutter, asymmetric spans
   are the point — do not default every child to span-4/span-4/span-4. */
.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5) var(--gutter);
}
@media (max-width: 1024px){
  .grid{ grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 480px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

.hairline{ border: none; border-top: var(--border-hairline); margin: 0; }
.vr{ border-left: var(--border-hairline); }

/* Photography placeholder: hatched pattern standing in for a real asset.
   Never a stock photo — see design-system.html §6. */
.photo-slot{
  background-image: repeating-linear-gradient(45deg, currentColor, currentColor 1px, transparent 1px, transparent 10px);
  color: var(--color-muted);
  opacity: 0.9;
  border: var(--border-hairline);
  position: relative;
  overflow: hidden;
}
.photo-slot::after{
  content: attr(data-label);
  position: absolute;
  left: var(--space-3); bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  background: var(--color-bg);
  color: var(--color-muted);
  padding: 2px 8px;
  opacity: 0.92;
}
.photo-slot.ratio-portrait{ aspect-ratio: 4 / 5; }
.photo-slot.ratio-square{ aspect-ratio: 1 / 1; }
.photo-slot.ratio-wide{ aspect-ratio: 16 / 9; }
.photo-slot.ratio-story{ aspect-ratio: 9 / 16; }

.photo-slot.treat-bw{ filter: grayscale(1) contrast(1.05); }
.photo-slot.treat-warm{ filter: sepia(0.12) saturate(1.05); }

.confirm-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 1px 7px;
}

.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;
}