/** * India Framed — shared stage tokens * Product + labs. Paper / ink / film from archive prototype + brand lab. */ :root, [data-theme="paper"] { color-scheme: light; --paper: #f4f2ec; --paper-2: #ece9e1; --paper-white: #fffcf7; --ink: #16140f; --ink-soft: #3a372f; --graphite: #6b6760; --hair: #d8d3c8; --film: #0c0b09; --film-text: #e9e5db; --accent: #c45c3e; /* Editorial plate markers. Terracotta at a whisper — it annotates rather than speaks, which is why --accent is too loud for it. */ --tan: #a68d75; --indigo: #1e2a4a; --bg: var(--paper); --fg: var(--ink); --muted: var(--graphite); --line: var(--hair); --font-brand: "Instrument Sans", system-ui, sans-serif; --font-display: "Fraunces", Georgia, "Iowan Old Style", serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --slow: 1200ms; --reveal-y: 34px; --photo-filter: saturate(0.82) contrast(1.02); --print-border-mm: 5; --s: 2; /* HUDDI scale when chrome present */ } [data-theme="ink"], [data-theme="dark"] { color-scheme: dark; --bg: #0c0b09; --fg: #ece7dc; --muted: #8c887e; --line: #262320; --ink: #ece7dc; --ink-soft: #c4bdb0; --graphite: #8c887e; --hair: #262320; --paper: #0c0b09; --paper-2: #141210; --tan: #b8a086; /* Print mats stay paper — photographs sit on a light sheet even at night. */ --paper-white: #f4f0e6; --film: #000; --film-text: #ece7dc; --photo-filter: saturate(0.72) contrast(1.05) brightness(0.92); } /* No-JS / first-paint fallback. Explicit data-theme on wins. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="paper"]) { color-scheme: dark; --bg: #0c0b09; --fg: #ece7dc; --muted: #8c887e; --line: #262320; --ink: #ece7dc; --ink-soft: #c4bdb0; --graphite: #8c887e; --hair: #262320; --paper: #0c0b09; --paper-2: #141210; --tan: #b8a086; --paper-white: #f4f0e6; --film: #000; --film-text: #ece7dc; --photo-filter: saturate(0.72) contrast(1.05) brightness(0.92); } } /* Grain overlay (from archive prototype) */ .if-grain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } [data-theme="ink"] .if-grain, [data-theme="dark"] .if-grain { mix-blend-mode: screen; opacity: 0.04; } /* Editorial atoms */ .if-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); } .if-lede { font-family: var(--font-brand); font-weight: 400; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.65; color: var(--muted); max-width: 42rem; } .if-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; color: var(--fg); } .if-body { font-family: var(--font-brand); font-weight: 400; color: var(--fg); line-height: 1.6; } .if-reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); } .if-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .if-reveal { opacity: 1; transform: none; transition: none; } }