@import url('./brand-tokens.css');

:root {
  color-scheme: dark;
  --info-cream: #f6f4ef;
  --info-deep: var(--brand-ink);
  --info-ink: var(--brand-deep);
  --info-walnut: var(--brand-walnut);
  --info-line: rgba(246, 244, 239, 0.12);
  --info-muted: rgba(246, 244, 239, 0.64);
  --info-quiet: rgba(246, 244, 239, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--info-deep);
  color: var(--info-cream);
  font-family: Inter, sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: soft-light;
  background-image: radial-gradient(rgba(255,255,255,.24) .45px, transparent .45px);
  background-size: 4px 4px;
}
a { color: inherit; }
.info-shell { width: min(1180px, 88%); margin: 0 auto; }
.info-main { padding: 0 0 7rem; }
.info-kicker, .info-label { color: var(--info-quiet); font-size: .7rem; letter-spacing: .02em; text-transform: uppercase; }
.info-section h2, .info-question h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 300; }
.info-section { position: relative; padding: clamp(4.5rem, 8vw, 7.5rem) 0; border-bottom: 1px solid var(--info-line); }
.info-section:last-child { border-bottom: 0; }
.info-section::after { content: attr(data-section-index); position: absolute; top: clamp(4.8rem, 8vw, 7.8rem); right: 0; color: rgba(246,244,239,.18); font-family: 'Cormorant Garamond', serif; font-size: clamp(3.2rem, 5vw, 5rem); font-weight: 300; line-height: .8; }
.info-section h2 { max-width: 44rem; margin-top: .9rem; padding-right: 4rem; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; }
.info-section > p { max-width: 42rem; margin: 1.3rem 0 0; color: var(--info-muted); font-size: .94rem; font-weight: 300; line-height: 1.9; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); margin-top: 2.7rem; }
.info-question { position: relative; padding: 1.55rem 0 1.8rem; border-top: 1px solid var(--info-line); }
.info-question-index { display: block; margin-bottom: .8rem; color: var(--info-quiet); font-size: .62rem; letter-spacing: .08em; }
.info-question h3 { font-size: clamp(1.65rem, 2.5vw, 2.45rem); line-height: 1.02; }
.info-question p { margin: .75rem 0 0; color: var(--info-muted); font-size: .88rem; font-weight: 300; line-height: 1.85; }
.info-list { display: grid; gap: 0; margin-top: 2.7rem; border-top: 1px solid var(--info-line); }
.info-list-row { display: grid; grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr); gap: 2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--info-line); }
.info-list-row strong { color: rgba(246,244,239,.9); font-size: .78rem; font-weight: 500; text-transform: uppercase; }
.info-list-row span { color: var(--info-muted); font-size: .9rem; font-weight: 300; line-height: 1.75; }
.info-cta { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; margin-top: 2rem; }
.info-link { display: inline-flex; min-height: 44px; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid rgba(246,244,239,.42); color: rgba(246,244,239,.9); font-size: .72rem; text-decoration: none; text-transform: uppercase; transition: gap .3s ease, border-color .3s ease, color .3s ease; }
.info-link:hover { transform: translateX(4px); border-color: rgba(246,244,239,.9); }

@media (max-width: 760px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-section { padding: 3.6rem 0; }
  .info-section::after { top: 3.9rem; right: 0; font-size: 3rem; }
  .info-list-row { grid-template-columns: 1fr; gap: .55rem; }
}