/* ============================================
   INODAYAM · Design System
   ============================================ */
:root {
  --color-ivory:  #E8E3CF;
  --color-peach:  #ECCEB8;
  --color-dark:   #2B1D1C;
  --color-amber:  #F4B34F;
  --color-orange: #C06F30;
  --color-maroon: #861C1C;

  --ink-70: rgba(43,29,28,.7);
  --ink-50: rgba(43,29,28,.5);
  --ink-30: rgba(43,29,28,.3);
  --ink-12: rgba(43,29,28,.12);
  --ink-08: rgba(43,29,28,.08);
  --paper-70: rgba(232,227,207,.7);
  --paper-40: rgba(232,227,207,.4);
  --paper-12: rgba(232,227,207,.12);

  --font-display: "DM Serif Display", Georgia, serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, monospace;

  --fs-display: clamp(2.5rem, 6vw, 6rem);
  --fs-h2:      clamp(1.85rem, 4vw, 3.75rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.875rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;   --space-8: 4rem;   --space-9: 6rem;
  --space-10: 8rem;

  --container: min(92vw, 1400px);
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 999px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .25s; --dur-base: .45s; --dur-slow: .8s;

  --shadow-sm: 0 4px 16px rgba(43,29,28,.06);
  --shadow-md: 0 16px 40px rgba(43,29,28,.08);
  --shadow-lg: 0 30px 80px rgba(43,29,28,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-dark);
  background: var(--color-ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-loading { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

::selection { background: var(--color-amber); color: var(--color-dark); }

:focus-visible { outline: 2px solid var(--color-maroon); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-dark);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

em { font-style: italic; color: var(--color-maroon); }

p { max-width: 62ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-maroon);
}

.eyebrow--light { color: var(--color-amber); }
.eyebrow i { width: 14px; height: 14px; }

.container { width: var(--container); margin-inline: auto; }

.section { padding: var(--space-10) 0; position: relative; }
.section--cream { background: var(--color-ivory); }
.section--peach { background: var(--color-peach); }
.section--dark { background: var(--color-dark); color: var(--color-ivory); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-ivory); }
.section--dark em { color: var(--color-amber); }

.section__head {
  max-width: 900px;
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section__head--center { margin-inline: auto; text-align: center; align-items: center; }
.section__title--light { color: var(--color-ivory); }

/* IMAGE PLACEHOLDERS — shown when no real image is present */
[data-ph] {
  position: relative;
  background: linear-gradient(135deg, var(--color-peach) 0%, var(--color-ivory) 100%);
  overflow: hidden;
  isolation: isolate;
}

[data-ph]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(43,29,28,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(43,29,28,.04) 25%, transparent 25%);
  background-size: 24px 24px;
  opacity: .6;
  z-index: 1;
}

[data-ph]::after {
  content: attr(data-ph);
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-maroon);
  background: rgba(232,227,207,.85);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}