/* ==========================================================================
   Chitthi components — paper objects that live on the page.
   Each is self-contained and keyed off tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }

/* — Type primitives — */
.eyebrow {
  font: 500 var(--fs-eyebrow)/1.2 var(--font-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: .9em;
}
.eyebrow::before, .eyebrow.ruled::after { content: ""; width: 2.4em; height: 1px; background: currentColor; opacity: .6; }
.eyebrow:not(.ruled)::before { display: none; }
.display { font: 500 var(--fs-h2)/1 var(--font-display); letter-spacing: -.01em; margin: 0; }
.display em { font-style: italic; color: var(--accent); }
.deva { font-family: var(--font-deva); font-weight: 400; line-height: 1.1; }
.hand { font-family: var(--font-hand); font-size: var(--fs-hand); line-height: 1.35; color: var(--neel); }
.lead { font: 400 var(--fs-lead)/1.6 var(--font-display); color: var(--ink-soft); max-width: var(--measure); }

/* — Paper sheet: torn edges are added by JS (data-torn) as a clip-path — */
.sheet {
  background: var(--paper) var(--grain);
  box-shadow: var(--shadow-paper);
  border-radius: var(--radius-card);
  position: relative;
}
.sheet--aged { background-color: var(--paper-2); }
.sheet--aged::after { /* tea ring */
  content: ""; position: absolute; width: 42%; aspect-ratio: 1; right: 6%; bottom: 8%;
  border-radius: 50%; border: 3px solid rgba(140, 95, 50, .18); filter: blur(.6px);
  box-shadow: inset 0 0 0 5px rgba(140, 95, 50, .05); pointer-events: none;
}

/* — Polaroid — */
.polaroid {
  background: var(--photo-white) var(--grain);
  padding: 4% 4% 0;
  box-shadow: var(--shadow-paper);
  position: relative;
  width: var(--w, 260px);
}
.polaroid img { width: 100%; aspect-ratio: var(--ratio, 4/5); object-fit: cover; filter: sepia(.18) saturate(.92) contrast(1.03); }
.polaroid figcaption { font-family: var(--font-hand); font-size: clamp(1rem, .9rem + .4vw, 1.3rem); color: var(--neel); text-align: center; padding: .55em .3em .7em; }

/* — Postcard / print with deckle border — */
.print { background: var(--photo-white); padding: 3%; box-shadow: var(--shadow-paper); position: relative; }
.print img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) saturate(.95); }

/* — Washi tape — */
.tape {
  position: absolute; width: 110px; height: 30px; z-index: 3;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px), var(--tape, rgba(229,160,49,.62));
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0),
                conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 0/8px 100% repeat-x;
  mix-blend-mode: multiply;
}
.tape--pink { --tape: rgba(216,128,106,.6); }
.tape--indigo { --tape: rgba(31,51,102,.45); }
.tape--plain { --tape: rgba(234,220,194,.85); mix-blend-mode: normal; }

/* — Push pin — */
.pin {
  position: absolute; width: 18px; height: 18px; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 35% 30%, #fff8 0 2px, transparent 3px), radial-gradient(circle at 50% 50%, var(--pin, var(--gold)) 0 60%, color-mix(in srgb, var(--pin, var(--gold)) 60%, #000) 100%);
  box-shadow: var(--shadow-pin), 3px 5px 4px rgba(0,0,0,.25);
}
.pin--red { --pin: var(--sindoor); }
.pin--teal { --pin: var(--peacock); }

/* — Postage stamp (perforated via mask) — */
.stamp {
  --r: 5px;
  width: var(--w, 130px);
  padding: calc(var(--r) * 1.6);
  background: var(--photo-white);
  -webkit-mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(var(--r) * 3) calc(var(--r) * 3) round,
                linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(var(--r) * 3) calc(var(--r) * 3) round,
                linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 3px 4px rgba(43,32,24,.3));
  position: relative;
}
.stamp__art { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper); }
.stamp__art img { width: 100%; height: 100%; object-fit: cover; }
.stamp__value, .stamp__country {
  position: absolute; font: 600 .78rem/1 var(--font-body); color: var(--peacock); letter-spacing: .08em;
  background: color-mix(in srgb, var(--paper) 80%, transparent); padding: 2px 4px;
}
.stamp__value { top: 4px; left: 4px; }
.stamp__country { bottom: 4px; right: 4px; font-family: var(--font-deva); font-weight: 400; font-size: .85rem; }

/* — Postmark — */
.postmark { width: var(--w, 150px); color: var(--ink); opacity: .72; mix-blend-mode: multiply; }
.postmark text { font: 600 9.5px var(--font-body); letter-spacing: .22em; fill: currentColor; }
.postmark .pm-date { font-size: 11px; letter-spacing: .08em; }

/* — Wax seal — */
.seal {
  width: var(--w, 96px); aspect-ratio: 1; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #e0584a, var(--sindoor) 45%, #7d140e 100%);
  box-shadow: inset -4px -6px 10px rgba(0,0,0,.35), inset 4px 4px 8px rgba(255,255,255,.18), 0 6px 14px rgba(80,10,5,.45);
  display: grid; place-items: center; position: relative;
}
.seal::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.seal span { font: 400 calc(var(--w, 96px) * .42)/1 var(--font-deva); color: #7a120c; text-shadow: 1px 1px 0 rgba(255,255,255,.22), -1px -1px 0 rgba(0,0,0,.25); }

/* — Ticket stub — */
.ticket {
  --notch: 10px;
  width: var(--w, 220px); padding: 14px 18px 14px 22px; color: var(--henna);
  background: linear-gradient(var(--haldi), #dd9425);
  -webkit-mask: radial-gradient(var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(var(--notch) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(var(--notch) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 4px 5px rgba(43,32,24,.3));
  font-family: var(--font-body);
}
.ticket b { display: block; font: 600 1.25rem/1.05 var(--font-display); color: var(--ink); }
.ticket small { font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; }
.ticket .ticket__no { position: absolute; right: 16px; top: 12px; font: 500 .7rem var(--font-body); letter-spacing: .1em; }

/* — Song note (index card) — */
.songcard { width: var(--w, 250px); padding: 16px 18px 18px; background: #f8f0dc var(--grain); box-shadow: var(--shadow-paper); }
.songcard__head { display: flex; align-items: center; gap: 10px; font: 500 .7rem/1 var(--font-body); letter-spacing: .25em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.songcard__eq { display: inline-flex; gap: 2px; align-items: end; height: 14px; }
.songcard__eq i { width: 3px; background: var(--sindoor); height: 40%; animation: eq 1.1s var(--ease-ink) infinite alternate; }
.songcard__eq i:nth-child(2) { animation-delay: -.4s; } .songcard__eq i:nth-child(3) { animation-delay: -.8s; } .songcard__eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes eq { to { height: 100%; } }
.songcard dl { margin: 0; font: 500 .82rem/1.45 var(--font-body); color: var(--ink); }
.songcard dt { display: inline; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; color: var(--ink-soft); }
.songcard dd { display: inline; margin: 0; }
.songcard dd::after { content: ""; display: block; }
.songcard .hand { font-size: 1.05rem; margin-top: 8px; display: block; color: var(--terracotta); }

/* — Matchbox — */
.matchbox {
  width: var(--w, 150px); aspect-ratio: 1.45; padding: 7px; border-radius: 3px;
  background: linear-gradient(135deg, #c7362a, #9b2219); box-shadow: var(--shadow-paper), inset 0 0 0 1px rgba(0,0,0,.2);
  position: relative; transform-style: preserve-3d;
}
.matchbox__label { height: 100%; background: #f4e3b6; border: 2px solid var(--neel); display: grid; grid-template-rows: auto 1fr auto; text-align: center; overflow: hidden; }
.matchbox__label small { font: 600 .55rem/1.6 var(--font-body); letter-spacing: .25em; color: var(--sindoor); }
.matchbox__label img { height: 100%; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.matchbox__label .deva { font-size: .95rem; color: var(--neel); background: var(--haldi); }

/* — Coin — */
.coin {
  width: var(--w, 64px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f1ead9, #b9b2a2 55%, #7b7466);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.08), inset 0 0 0 6px rgba(255,255,255,.35), 0 4px 6px rgba(0,0,0,.35);
  font: 600 1.25rem/1 var(--font-display); color: #575144; text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}

/* — Handwritten note — */
.note { width: var(--w, 260px); padding: 22px 22px 26px; background: #efe1c2 var(--grain); box-shadow: var(--shadow-paper); }
.note p { margin: 0; font-family: var(--font-hand); color: var(--ink); font-size: 1.35rem; line-height: 1.4; }
.note .deva { font-family: var(--font-hand); }

/* — Diya (oil lamp glow) — */
.diya { width: var(--w, 46px); aspect-ratio: 1.6; position: relative; }
.diya::before { /* bowl */
  content: ""; position: absolute; inset: 45% 0 0; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(#c8693a, #7a3517); box-shadow: inset 0 3px 0 rgba(255,220,180,.35);
}
.diya::after { /* flame */
  content: ""; position: absolute; left: 50%; bottom: 52%; width: 28%; aspect-ratio: .55; translate: -50% 0;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 75%, #fff6c9 0 22%, #ffc24a 45%, #ff7a1a 75%, transparent 76%);
  filter: drop-shadow(0 0 10px #ffb347) drop-shadow(0 0 26px #ff8a1e);
  animation: flicker 2.4s ease-in-out infinite; transform-origin: 50% 100%;
}
@keyframes flicker { 0%,100% { transform: scale(1) rotate(-2deg); } 25% { transform: scale(1.08, .94) rotate(2deg); } 50% { transform: scale(.94, 1.06) rotate(-1deg); } 75% { transform: scale(1.04) rotate(1.5deg); } }

/* — Buttons — */
.btn {
  --bg: var(--sindoor); --fg: var(--on-dark);
  display: inline-flex; align-items: center; gap: .7em; padding: 1em 1.8em; border-radius: 999px;
  background: var(--bg); color: var(--fg); text-decoration: none;
  font: 500 .82rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--bg) 80%, #000);
  transition: background var(--dur-quick), color var(--dur-quick);
  will-change: transform;
}
.btn:hover { --bg: var(--terracotta); }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost:hover { --bg: color-mix(in srgb, currentColor 12%, transparent); }
.btn:focus-visible { outline: 2px solid var(--haldi); outline-offset: 3px; }

/* — Marquee of greetings — */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--rule); padding: .9em 0; }
.marquee__track { display: inline-flex; gap: 2.4em; padding-right: 2.4em; font: italic 500 clamp(1.4rem, 1rem + 2vw, 2.6rem)/1 var(--font-display); color: var(--terracotta); }
.marquee__track span::after { content: "✺"; margin-left: 2.4em; color: var(--haldi); font-style: normal; font-size: .6em; vertical-align: middle; }

/* — Chapter mark — */
.chapter-mark { display: grid; gap: .2em; }
.chapter-mark .deva { font-size: var(--fs-deva); color: var(--accent); opacity: .9; }

/* — Grain overlay for the whole page — */
.grain-overlay { position: fixed; inset: -50%; z-index: 90; pointer-events: none; background: var(--grain); opacity: .5; mix-blend-mode: multiply; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }

@media (prefers-reduced-motion: reduce) {
  .grain-overlay, .diya::after, .songcard__eq i { animation: none; }
}