/* ---------- tokens ---------- */
:root{
  --paper: #f1ede6;
  --paper-2: #e9e3d8;
  --ink: #17171a;
  --ink-soft: #4a4a48;
  --rule: rgba(23,23,26,0.14);
  --accent: #b5572e;    /* terracota / entardecer */
  --accent-2: #3c4b63;  /* azul noite */
  --glass-border: rgba(0,0,0,0.12);
  --glass-highlight: rgba(255,255,255,0.08);
  --radius: clamp(6px, 0.9vw, 12px);
  --radius-frame: clamp(3px, 0.5vw, 7px);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16,.84,.26,1);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ---------- hero ---------- */
.hero{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 1.5rem;
  position: relative;
}

.hero__kicker{
  font-family: var(--sans);
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.hero__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.1rem, 11vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}

.hero__title-accent{
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-size: 0.62em;
}

.hero__sub{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  margin: 1.5rem 0 0;
}

.hero__scroll{
  position: absolute;
  bottom: 6vh;
  width: 1px;
  height: 64px;
  background: var(--rule);
  overflow: hidden;
}
.hero__scroll span{
  position: absolute;
  top: -64px;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ink);
  animation: scrollDrop 2.2s var(--ease) infinite;
}
@keyframes scrollDrop{
  0%   { top: -64px; }
  60%  { top: 64px; }
  100% { top: 64px; }
}

/* ---------- intro ---------- */
.intro{
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(5rem, 14vw, 10rem) 1.5rem;
  text-align: center;
}
.intro__text{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ---------- essay grid ---------- */
.essay{
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(6rem, 12vw, 10rem);
}

.entry{
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  border-top: 1px solid var(--rule);
}
.entry:first-child{ border-top: none; }

.entry--reverse .entry__figure{ order: 2; }
.entry--reverse .entry__text{ order: 1; }

.entry--drift-up    { margin-top: clamp(0px, -2vw, -28px); }
.entry--drift-down  { margin-top: clamp(0px, 2vw, 28px); }
.entry--drift-left  { margin-left: clamp(0px, -1.5vw, -20px); }
.entry--drift-right { margin-left: clamp(0px, 1.5vw, 20px); }

.entry__figure{
  position: relative;
  max-width: 87%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
}
.entry__figure img{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: calc(var(--radius) - 8px);
}

.entry__figure img,
.wide img{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media print{
  .entry__figure img,
  .wide img{ display: none; }
}

/* ---------- fotos em paisagem: inteiras, sem corte, sem texto ---------- */
.wide{
  margin: clamp(3rem, 8vw, 6rem) 0;
  margin-right: auto;
  max-width: 58%;
}
.wide img{
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: calc(var(--radius) - 8px);
}

/* ---------- moldura preta, sólida, acabamento discreto ---------- */
.ph-frame,
.ph-shadow{
  overflow: visible;
  padding: clamp(7px, 1.1vw, 13px);
  border-radius: var(--radius-frame);
  background: #000000;
  border: 1px solid #000000;
  box-shadow: 0 1.6rem 2.8rem -1.5rem rgba(0,0,0,0.8);
}

.entry__text{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0 clamp(0px, 2vw, 1.5rem);
}

.entry__index{
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
}

.entry__caption{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  line-height: 1.48;
  color: var(--ink);
  margin: 0;
}

.entry__rule{
  width: 2.5rem;
  height: 1px;
  background: var(--rule);
  margin-top: 0.3rem;
}

/* ---------- scroll reveal : displacement from 4 directions ---------- */
.reveal{
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity: 1; transform: translate(0,0) !important; }

.reveal[data-dir="up"]    { transform: translateY(72px); }
.reveal[data-dir="down"]  { transform: translateY(-72px); }
.reveal[data-dir="left"]  { transform: translateX(-72px); }
.reveal[data-dir="right"] { transform: translateX(72px); }

.entry__text.reveal{ transition-delay: 0.12s; }

/* ---------- footer ---------- */
.site-footer{
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem clamp(4rem, 10vw, 6rem);
  color: var(--ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.site-footer p{ margin: 0.3rem 0; }

/* ---------- responsive ---------- */
@media (max-width: 760px){
  .entry{
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .entry--reverse .entry__figure{ order: 1; }
  .entry--reverse .entry__text{ order: 2; }
  .entry--drift-up, .entry--drift-down{ margin-top: 0; }
  .entry--drift-left, .entry--drift-right{ margin-left: 0; }
  .entry__figure{ max-width: 76%; }
  .wide{ max-width: 88%; }
  .reveal[data-dir="up"]    { transform: translateY(36px); }
  .reveal[data-dir="down"]  { transform: translateY(-36px); }
  .reveal[data-dir="left"]  { transform: translateX(-36px); }
  .reveal[data-dir="right"] { transform: translateX(36px); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__scroll span{ animation: none; }
  .entry__figure img{ transition: none; transform: none; }
}