/* ============================================================
   The Window — Bruno's photography portfolio
   "Golden hour, not gallery white." Warmth through restraint.
   ============================================================ */

/* ---- Palette (top-of-scroll defaults; JS warms toward -deep) ---- */
:root {
  --paper:      #F4EDE1;
  --paper-deep: #EBE0CE;
  --ink:        #2B2420;
  --ink-soft:   #5A4F45;
  --gold:       #C8954A;
  --gold-deep:  #A87832;
  --hairline:   #D9CBB3;

  /* live, JS-interpolated values (start at top-of-scroll) */
  --bg:     var(--paper);
  --accent: var(--gold);

  --measure: 39rem;          /* ~640–660px reading column */
  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --display:"Fraunces", Georgia, serif;
  --sans:   "Inter", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 0.95rem + 0.7vw, 1.32rem);
  line-height: 1.72;
  font-optical-sizing: auto;
  transition: background-color 120ms linear;
}

/* ---- Atmosphere: a lit room, not a blank fill --------------- */
/* Soft light pools in from the upper right, with a faint warmth
   rising from the lower left — like late sun through a window. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(125% 85% at 76% 4%, rgba(255, 246, 226, 0.62), transparent 58%),
    radial-gradient(110% 75% at 12% 102%, rgba(200, 149, 74, 0.11), transparent 56%);
}
/* A whisper of paper grain so cream reads as a surface, not a screen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

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

::selection { background: rgba(200, 149, 74, 0.22); }

/* ---- Layout primitives ---------------------------------------- */
.page { overflow-x: clip; }

section { position: relative; }

.measure {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.6rem;
}

/* Deliberate, page-turning vertical rhythm — paced, not vacant */
.section-gap   { padding-block: clamp(3.25rem, 7vh, 5.5rem); }
.section-gap-l { padding-block: clamp(4rem, 9vh, 7rem); }

/* A faint breath-mark divider some sections use */
.breath {
  display: block;
  margin: clamp(1.75rem, 4vh, 3rem) auto;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--hairline);
  position: relative;
}
.breath::before, .breath::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: var(--hairline); transform: translateY(-50%);
}
.breath::before { left: -22px; } .breath::after { right: -22px; }

/* ============================================================
   Corner language whisper
   ============================================================ */
.corner-lang {
  position: fixed; top: 1.4rem; right: 1.7rem; z-index: 50;
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.06em;
  display: flex; gap: 0.5rem; align-items: center;
  mix-blend-mode: multiply;
}

/* ============================================================
   HERO — image + voice, side by side, book-like
   ============================================================ */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 6vh, 5rem) clamp(1.6rem, 5vw, 5.5rem);
}
.hero__figure { align-self: center; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 3 / 2.05;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(43,36,32,0.04),
              0 26px 60px -28px rgba(43,36,32,0.42);
}
.hero__voice { max-width: 22rem; }
.hero__voice .greeting {
  font-family: var(--display);
  font-weight: 420;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 0.7em;
  font-variation-settings: "opsz" 80, "SOFT" 30, "WONK" 0;
}
.hero__voice .line {
  font-family: var(--display);
  font-weight: 360;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.62rem);
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 32, "SOFT" 40;
}
.hero__voice .line em {
  font-style: italic;
  color: var(--ink);
}

.scroll-cue {
  margin-top: 2.4rem;
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.55;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.scroll-cue::after {
  content: ""; width: 26px; height: 1px; background: currentColor;
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0%,100%{ opacity:.3; transform:scaleX(.6);transform-origin:left } 50%{ opacity:.8; transform:scaleX(1);transform-origin:left } }

/* ============================================================
   PHOTO BLOCK — one large image + a margin-note caption
   ============================================================ */
.photo {
  margin-inline: auto;
  max-width: 74rem;
  padding-inline: 1.6rem;
}

/* Image + a margin-note caption set out to the side, like an annotation
   pencilled in the margin of a book. Alternating sides give it rhythm. */
.photo figure {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr minmax(11rem, 17rem);
  column-gap: clamp(1.4rem, 2.8vw, 2.6rem);
  align-items: center;
}
.photo figure > img { grid-column: 1; grid-row: 1; }
.photo img {
  width: 100%;
  border-radius: 2px;
  border: 1px solid rgba(43, 36, 32, 0.06);
  box-shadow: 0 1px 0 rgba(43,36,32,0.04),
              0 30px 70px -34px rgba(43,36,32,0.44);
}
.photo--portrait { max-width: 40rem; }

/* caption on the right margin by default */
.photo .caption { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }

/* caption--right photos flip: image right, note in the left margin */
.photo figure:has(.caption--right) {
  grid-template-columns: minmax(11rem, 17rem) 1fr;
}
.photo figure:has(.caption--right) > img { grid-column: 2; grid-row: 1; }
.photo figure:has(.caption--right) .caption {
  grid-column: 1;
  text-align: right;
  border-left: 0;
  border-right: 1px solid var(--hairline);
  padding-left: 0;
  padding-right: 1.1rem;
}

/* the quiet reader's annotation, set slightly apart */
.caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 1.5rem 0 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--hairline);
  max-width: 26rem;
  font-variation-settings: "opsz" 18;
}

/* a caption can carry a small story: a poetic lead + a few warm sentences */
.caption__lead {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 380;
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--ink);
  font-variation-settings: "opsz" 30, "SOFT" 50;
}
.caption__story {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
  font-variation-settings: "opsz" 14;
}

/* ============================================================
   SPREAD — portrait photo + manifesto, side by side (book spread)
   ============================================================ */
.spread__inner {
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1.6rem;
  display: grid;
  grid-template-columns: minmax(17rem, 23rem) 1fr;
  gap: clamp(2.4rem, 5vw, 5.5rem);
  align-items: center;
}
.spread__figure { margin: 0; }
.spread__figure img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(43,36,32,0.04),
              0 30px 70px -34px rgba(43,36,32,0.44);
}
.spread__figure .caption { margin-top: 1.3rem; }
.spread__text { max-width: 34rem; }

@media (max-width: 820px) {
  .spread__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vw, 3rem);
  }
  .spread__figure {
    max-width: 28rem;
    margin-inline: auto;
  }
  .spread__figure .caption { max-width: none; }
}

/* ============================================================
   PASSAGE BLOCK — bookish prose
   ============================================================ */
.passage p {
  margin: 0 0 1.35em;
  text-wrap: pretty;
}
.passage p:last-child { margin-bottom: 0; }

/* drop the first manifesto line a touch larger, like a chapter opener */
.passage--lead p:first-child::first-letter {
  /* subtle — not a decorative dropcap */
  font-family: var(--display);
}
.passage--lead {
  font-size: clamp(1.22rem, 1.02rem + 0.9vw, 1.5rem);
  line-height: 1.66;
}
.passage--lead .first {
  font-family: var(--display);
  font-weight: 380;
  font-variation-settings: "opsz" 40, "SOFT" 40;
}

.about__eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); opacity: 0.85;
  margin: 0 0 1.6rem;
  transition: color 120ms linear;
}
.about p { text-wrap: pretty; }

/* ============================================================
   ASIDES — small traces of a person, quiet marginal notes
   ============================================================ */
.aside {
  max-width: 30rem;
  margin-inline: auto;
  padding-inline: 1.6rem;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
  line-height: 1.52;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 28, "SOFT" 50;
}
.aside::before {
  content: "";
  display: block;
  width: 26px; height: 1px;
  background: var(--accent);
  opacity: 0.6;
  margin: 0 auto 1.15rem;
  transition: background-color 120ms linear;
}

/* ground the framed images so they sit on the paper, not float over it */
.hero__figure img,
.spread__figure img { border: 1px solid rgba(43, 36, 32, 0.06); }

.hello__ps { margin-top: 2.8rem; }

/* ============================================================
   STANDALONE LINE — alone on its own band
   ============================================================ */
.distilled {
  text-align: center;
}
.distilled p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 22ch;
  text-wrap: balance;
  font-variation-settings: "opsz" 60, "SOFT" 50;
}

/* ============================================================
   SAY HELLO
   ============================================================ */
.hello h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
  font-variation-settings: "opsz" 60, "SOFT" 40;
}
.hello p { text-wrap: pretty; }
.hello__mail {
  display: inline-block;
  margin-top: 1.8rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  font-weight: 380;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  font-variation-settings: "opsz" 40, "SOFT" 40;
}
.hello__mail::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px;
  width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease), background-color 120ms linear;
}
.hello__mail:hover { color: var(--accent); }
.hello__mail:hover::after { transform: scaleX(1); }
.hello__note {
  margin-top: 2.6rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
  font-style: italic;
  font-variation-settings: "opsz" 16;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 2.6rem 1.6rem 3.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  max-width: 68rem; margin-inline: auto;
}
.footer__name { font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.footer__name span { color: var(--ink-soft); font-style: italic; font-size: 0.92rem; }

/* ---- Language toggle (shared style: corner + footer) ---- */
.lang {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.05em;
}
.lang button {
  appearance: none; background: none; border: 0; padding: 0.15rem 0.1rem; margin: 0;
  font: inherit; color: var(--ink-soft); cursor: pointer; opacity: 0.55;
  transition: opacity 220ms var(--ease), color 220ms var(--ease);
  position: relative;
}
.lang button:hover { opacity: 0.95; color: var(--accent); }
.lang button[aria-pressed="true"] { opacity: 1; color: var(--ink); }
.lang button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--accent);
}
.lang .sep { opacity: 0.4; color: var(--ink-soft); }

/* PT draft notice — quiet, only shown when PT active */
.pt-note {
  display: none;
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.02em;
  color: var(--ink-soft); opacity: 0.7; font-style: normal;
  text-align: center; padding: 0.9rem 1.6rem 0;
}
body[data-lang="pt"] .pt-note { display: block; }

/* ============================================================
   Motion — fade-up reveals
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* text settles a beat after its image */
.reveal--delay { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scroll-cue::after { animation: none; }
  body { transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(1.8rem, 6vw, 3rem);
    padding-top: clamp(4.5rem, 12vh, 7rem);
    padding-bottom: clamp(3rem, 8vh, 5rem);
  }
  .hero__figure { order: -1; }
  .hero__figure img { aspect-ratio: 4 / 3; }
  .hero__voice { max-width: none; }
  .caption { max-width: none; }
  .corner-lang { top: 1rem; right: 1.1rem; }
}

@media (max-width: 820px) {
  .photo { padding-inline: 1.1rem; }
  .photo figure,
  .photo figure:has(.caption--right) { grid-template-columns: 1fr; }
  .photo figure > img,
  .photo figure:has(.caption--right) > img { grid-column: 1; }
  .photo .caption {
    grid-column: 1;
    max-width: none;
    margin-top: 1.2rem;
    align-self: start;
  }
  .photo figure:has(.caption--right) .caption {
    grid-column: 1;
    text-align: left;
    border-right: 0;
    border-left: 1px solid var(--hairline);
    padding-right: 0;
    padding-left: 1.1rem;
  }
}