/* Anushify — Warm editorial design system
   Brand-aligned: orange/amber flame, cream paper, espresso ink. */

:root {
  --orange: #E2641B;
  --amber:  #F2A93B;
  --ink:    #231C17;
  --paper:  #FBF7F1;
  --line:   #E7DCCD;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* guard against any accidental horizontal scroll */
}

/* media never overflows its container */
img, svg, video { max-width: 100%; height: auto; }

/* avoid long unbroken strings (emails/links) pushing layout wide on phones */
a, p, h1, h2, h3 { overflow-wrap: break-word; }

.font-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
}

/* small uppercase eyebrow label */
.label {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}

/* hairline rule */
.rule { height: 1px; background: var(--line); }

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }

/* gentle card hover — no glow, just a lift + warm border */
.card-hover {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: rgba(226,100,27,.4);
  box-shadow: 0 22px 44px -32px rgba(35,28,23,.55);
}

/* underline-on-hover link */
.ulink { position: relative; }
.ulink::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1.5px; width: 0;
  background: currentColor;
  transition: width .3s ease;
}
.ulink:hover::after { width: 100%; }

/* nav scrolled */
#nav.scrolled { box-shadow: 0 10px 30px -24px rgba(35,28,23,.4); }

/* mobile drawer */
.drawer { transition: transform .35s cubic-bezier(.2,.7,.2,1); }

/* decorative serif index number watermark */
.numeral {
  font-family: 'Fraunces', serif;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}