/* ============================================================
   INDRUS — foundation: tokens, reset, type, motion, atmosphere
   Cinematic editorial luxury. Brass is the single light source.
   ============================================================ */
:root {
  /* — warm near-black ink scale — */
  --ink:        #0B0908;
  --ink-2:      #100C0A;
  --charcoal:   #15110E;
  --charcoal-2: #1E1814;
  --charcoal-3: #261F19;

  /* — ivory / text — */
  --ivory:      #F1E9DA;
  --ivory-2:    #E8DFCE;
  --ivory-mute: #A89E8A;
  --ivory-dim:  #8E8576;

  /* — brass: the light — */
  --brass:      #C9A55E;
  --brass-2:    #B0904F;
  --brass-dim:  #7A6435;
  --brass-hi:   #E6CE97;

  /* — hairlines — */
  --hair:        rgba(241, 233, 218, 0.10);
  --hair-2:      rgba(241, 233, 218, 0.18);
  --hair-strong: rgba(241, 233, 218, 0.30);

  /* — brass light, for glows / pools — */
  --glow:    rgba(201, 165, 94, 0.14);
  --glow-2:  rgba(201, 165, 94, 0.07);

  /* — type — */
  --f-display: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;
  --f-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — metrics — */
  --gutter:    clamp(20px, 4vw, 56px);
  --section-y: clamp(60px, 7vw, 110px);
  --max:       1320px;

  /* — easing — */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* — depth — */
  --shadow-1: 0 24px 60px -24px rgba(0,0,0,0.7);
  --shadow-2: 0 40px 110px -30px rgba(0,0,0,0.85);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--brass); color: var(--ink); }
:focus-visible {
  outline: 1.5px solid var(--brass);
  outline-offset: 4px;
  border-radius: 1px;
}

/* — layout — */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.container-wide { max-width: 1560px; margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
section { position: relative; }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(48px, 7vw, 96px); }
.hair { height: 1px; background: var(--hair); width: 100%; }
.hair-strong { height: 1px; background: var(--hair-strong); width: 100%; }

/* — section atmosphere: a faint pool of brass light per section — */
.section::before,
.section-sm::before {
  content: "";
  position: absolute;
  left: 50%; top: -8%;
  width: min(940px, 82vw); height: 56%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--glow-2) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  z-index: 0;
}
.section.lit::before,
.section-sm.lit::before { opacity: 1; }
.section > .container,
.section-sm > .container { position: relative; z-index: 1; }

/* ============================================================
   TYPE
   ============================================================ */
.display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; line-height: 0.98; }

/* Hero headline — portrait must still lead; caps near 88px */
.display-xl {
  font-family: var(--f-display); font-weight: 400;
  letter-spacing: -0.022em; line-height: 1.0;
  font-size: clamp(42px, 5.9vw, 88px);
}
/* Section headlines */
.display-l {
  font-family: var(--f-display); font-weight: 400;
  letter-spacing: -0.014em; line-height: 1.04;
  font-size: clamp(35px, 4.6vw, 66px);
}
.display-m {
  font-family: var(--f-display); font-weight: 400;
  letter-spacing: -0.01em; line-height: 1.1;
  font-size: clamp(27px, 3.3vw, 47px);
}
.display-s {
  font-family: var(--f-display); font-weight: 400;
  letter-spacing: -0.006em; line-height: 1.16;
  font-size: clamp(22px, 2.4vw, 34px);
}
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--f-body); font-weight: 600; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--brass);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 26px; height: 1px; background: var(--brass);
  transform-origin: left; transition: transform 0.9s var(--ease) 0.15s;
}
/* drawn-in hairline when the eyebrow itself reveals */
.eyebrow.reveal::before { transform: scaleX(0); }
.eyebrow.reveal.in::before { transform: scaleX(1); }

.eyebrow-plain {
  font-family: var(--f-body); font-weight: 600; font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ivory-mute);
}

.body-l { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.62; color: var(--ivory-2); font-weight: 300; }
.body-l.tight { max-width: 56ch; }
.body-m { font-size: 15px; line-height: 1.66; color: var(--ivory-2); font-weight: 300; }
.muted { color: var(--ivory-mute); }
.brass-text { color: var(--brass); }
.center { text-align: center; }

.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }

/* ============================================================
   REVEAL ENGINE — authored entrances, not generic fades
   JS adds .in when the element scrolls into view.
   ============================================================ */

/* default: a soft rack-focus rise */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition:
    opacity 1.05s var(--ease),
    transform 1.05s var(--ease),
    filter 1.05s var(--ease);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal.d1 { transition-delay: 0.09s; }
.reveal.d2 { transition-delay: 0.18s; }
.reveal.d3 { transition-delay: 0.27s; }
.reveal.d4 { transition-delay: 0.36s; }

/* line-by-line headline mask reveal (hero) */
.lines { display: block; }
.line { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.16em; }
.line > span {
  display: block;
  transform: translateY(130%);
  transition: transform 1.05s var(--ease-out);
}
.reveal-lines.in .line > span { transform: translateY(0); }
.reveal-lines.in .line:nth-child(2) > span { transition-delay: 0.10s; }
.reveal-lines.in .line:nth-child(3) > span { transition-delay: 0.20s; }
.reveal-lines.in .line:nth-child(4) > span { transition-delay: 0.30s; }

/* clip reveal — for inner-page headlines / framed blocks */
.reveal-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out);
}
.reveal-clip.in { clip-path: inset(0 0 0 0); }

/* image grade-in: scale settles + grade lifts */
.reveal-img { overflow: hidden; }
.reveal-img img,
.reveal-img video {
  transform: scale(1.08);
  filter: brightness(0.55) saturate(0.7);
  transition: transform 1.5s var(--ease), filter 1.5s var(--ease);
}
.reveal-img.in img,
.reveal-img.in video {
  transform: scale(1);
  filter: brightness(0.92) saturate(0.92);
}

/* hairline that draws itself */
.draw { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.draw.in { transform: scaleX(1); }

/* generic staggered children — JS sets --i on each child */
.stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.085s);
}
.stagger.in > * { opacity: 1; transform: none; }

/* no-JS safety net — never ship a blank page if the script fails */
html:not(.js) .reveal,
html:not(.js) .reveal-clip,
html:not(.js) .reveal-img img,
html:not(.js) .reveal-img video,
html:not(.js) .reveal-lines .line > span,
html:not(.js) .draw,
html:not(.js) .stagger > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* ============================================================
   ATMOSPHERE — film grain + scroll progress
   ============================================================ */
.grain {
  position: fixed; inset: 0;
  z-index: 240; pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.91  0 0 0 0 0.81  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
/* a vignette that frames the whole site */
.vignette {
  position: fixed; inset: 0;
  z-index: 230; pointer-events: none;
  box-shadow: inset 0 0 240px 40px rgba(0,0,0,0.55);
}
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brass-dim), var(--brass) 60%, var(--brass-hi));
  z-index: 300; pointer-events: none;
  box-shadow: 0 0 14px rgba(201,165,94,0.6);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-clip, .reveal-img img, .reveal-img video,
  .line > span, .draw, .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .grain { display: none; }
}