/*
 * This Is Behrad — selective / graphite edition
 * A quieter, more elusive visual system built from layered charcoals,
 * restrained wine accents, and fewer autobiographical disclosures.
 */

:root {
  --ink: #121315;
  --ink-deep: #0b0c0e;
  --ink-soft: #191b1f;
  --ink-lift: #22252a;
  --parchment: #eeeae2;
  --parchment-muted: #aaa69f;
  --raspberry: #74404d;
  --raspberry-bright: #985665;
  --wine: #6f3b49;
  --wine-bright: #9a5968;
  --carbon: #10171a;
  --mineral: #e8ebe7;
  --imperial: #4a5968;
  --line: rgba(238, 234, 226, .105);
  --line-strong: rgba(238, 234, 226, .2);
  --grid-line: rgba(238, 234, 226, .028);
  --frame-line: rgba(238, 234, 226, .15);
}

html,
body {
  background: var(--ink-deep);
}

body {
  color: var(--parchment);
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 78% 5%, rgba(154, 89, 104, .055), transparent 33rem);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}

body::before {
  opacity: .14;
  mix-blend-mode: soft-light;
}

::selection {
  color: var(--parchment);
  background: var(--wine);
}

.progress span {
  background: var(--wine-bright);
}

/* The header behaves like a discreet index rather than a navigation bar. */
.nav-inner {
  border-color: var(--line);
  background: rgba(18, 19, 21, .48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wordmark i {
  color: var(--wine-bright);
}

.nav-inner > .lang-switch a {
  color: rgba(238, 234, 226, .52);
}

.nav-inner > .lang-switch a:hover {
  color: var(--parchment);
  background: rgba(238, 234, 226, .045);
}

.nav-inner > .lang-switch a[aria-current="page"] {
  color: var(--ink-deep);
  background: var(--parchment);
}

/* Hero: an oblique statement and a less available portrait. */
.hero {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgba(11, 12, 14, .08), rgba(11, 12, 14, .34)),
    transparent;
}

.hero h1 {
  max-width: 940px;
  font-size: clamp(4rem, 7.45vw, 8.1rem);
  line-height: 1;
}

.hero h1 span {
  color: rgba(238, 234, 226, .82);
}

.hero-lede {
  color: rgba(238, 234, 226, .61);
}

.hero-frame {
  background: #0f1114;
  border-color: rgba(238, 234, 226, .17);
}

.hero-frame img {
  object-position: center 30%;
  filter: grayscale(1) sepia(.06) saturate(.5) contrast(1.12) brightness(.79);
}

.hero-frame::after {
  background:
    linear-gradient(180deg, rgba(11, 12, 14, .03) 35%, rgba(11, 12, 14, .38) 100%),
    linear-gradient(90deg, rgba(11, 12, 14, .12), transparent 42%);
}

.hero-stamp {
  color: rgba(238, 234, 226, .48);
  background: rgba(11, 12, 14, .92);
}

.hero-meta {
  color: rgba(238, 234, 226, .3);
}

.kicker,
.section-no {
  color: rgba(238, 234, 226, .42);
}

/* Roadmap: selected evidence, not a complete biography. */
.road-section {
  background-color: var(--ink-deep);
  background-image:
    linear-gradient(rgba(238, 234, 226, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 234, 226, .024) 1px, transparent 1px),
    radial-gradient(circle at 10% 28%, rgba(111, 59, 73, .045), transparent 31rem);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}

.road-head p,
.road-content p {
  color: rgba(238, 234, 226, .5);
}

.road-year {
  color: rgba(238, 234, 226, .44);
}

.road-photo,
.road-photo.portrait {
  border-color: rgba(238, 234, 226, .135);
  background: #121316;
}

.road-photo img,
.road-photo.portrait img {
  filter: grayscale(1) sepia(.045) saturate(.7) contrast(1.07) brightness(.88);
}

.road-caption {
  color: rgba(238, 234, 226, .3);
}

/* Belief is no longer a light interruption; it lifts only one graphite step. */
.belief-wrap {
  color: var(--parchment);
  background-color: var(--ink-soft);
  background-image:
    linear-gradient(rgba(238, 234, 226, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 234, 226, .027) 1px, transparent 1px),
    radial-gradient(circle at 88% 78%, rgba(154, 89, 104, .055), transparent 28rem);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}

.belief .section-no {
  color: rgba(238, 234, 226, .43);
}

.belief-copy blockquote {
  color: var(--parchment);
}

.belief-copy blockquote span {
  color: rgba(238, 234, 226, .76);
}

.belief-copy p {
  color: rgba(238, 234, 226, .57);
}

.belief-image {
  border-color: rgba(238, 234, 226, .14);
  background: #111317;
}

.belief-image img {
  filter: grayscale(1) sepia(.04) saturate(.6) contrast(1.08) brightness(.82);
}

.belief-image::after {
  color: rgba(238, 234, 226, .74);
  background: rgba(11, 12, 14, .88);
}

/* Notes bridge the personal story and the business identity. */
.notes {
  background: var(--ink);
}

.notes-entry p {
  color: rgba(238, 234, 226, .55);
}

.notes-cta,
.text-link {
  border-bottom-color: var(--line-strong);
}

/* BEHRAD is differentiated by temperature, not by brightness or imagery. */
.behrad-wrap {
  color: var(--mineral);
  background-color: var(--carbon);
  background-image:
    linear-gradient(rgba(232, 235, 231, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 235, 231, .026) 1px, transparent 1px),
    radial-gradient(circle at 10% 12%, rgba(74, 89, 104, .13), transparent 32rem);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
}

.behrad-copy p {
  color: rgba(232, 235, 231, .57);
}

.behrad-cta {
  border-color: rgba(232, 235, 231, .19);
  color: rgba(232, 235, 231, .83);
}

/* The closing chapter stays text-only and deliberately sparse. */
.contact {
  background:
    radial-gradient(circle at 88% 34%, rgba(111, 59, 73, .06), transparent 27rem),
    var(--ink-deep);
}

.contact h2 span {
  color: rgba(238, 234, 226, .62);
}

.contact-copy > p {
  color: rgba(238, 234, 226, .54);
}

.contact-links a {
  border-bottom-color: var(--line);
  color: rgba(238, 234, 226, .76);
}

.contact-links a:hover {
  color: var(--parchment);
  border-color: var(--wine-bright);
}

.footer {
  color: rgba(238, 234, 226, .28);
  background: transparent;
}

html[dir="ltr"] .hero h1 {
  font-size: clamp(3.7rem, 6.55vw, 7.3rem);
  letter-spacing: -.065em;
}

html[lang="es"] .hero h1 {
  font-size: clamp(3.35rem, 5.65vw, 6.45rem);
  line-height: 1.02;
}

@media (max-width: 980px) {
  .nav-inner {
    background: rgba(18, 19, 21, .7);
  }

  .hero h1,
  html[dir="ltr"] .hero h1,
  html[lang="es"] .hero h1 {
    max-width: 820px;
    font-size: clamp(3.5rem, 9.5vw, 6.2rem);
  }

  .hero-frame img {
    object-position: center 29%;
  }
}

@media (max-width: 720px) {
  .hero h1,
  html[dir="ltr"] .hero h1,
  html[lang="es"] .hero h1 {
    font-size: clamp(2.9rem, 13.2vw, 4.75rem);
    line-height: 1.03;
    letter-spacing: -.06em;
  }

  .hero-lede {
    color: rgba(238, 234, 226, .65);
  }

  .road-photo img,
  .road-photo.portrait img {
    filter: grayscale(1) sepia(.04) saturate(.65) contrast(1.05) brightness(.91);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-inner {
    background: var(--ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}