/*
 * KERALAWAY — Editorial design system (plain CSS companion).
 * Palette: monsoon green, river stone, backwater mist, temple brass,
 * weathered coconut, spice brown, off-white paper.
 * Typography: Fraunces (editorial display), Inter (body), Caveat (handwritten).
 *
 * The @theme block that registers Tailwind utilities lives in keralaway.html
 * inside <style type="text/tailwindcss"> so the CDN can process it.
 * This file provides the CSS custom properties and plain CSS classes
 * that both Tailwind and custom markup share.
 */

:root {
  --paper:         oklch(0.965 0.012 85);
  --ink:           oklch(0.18  0.012 80);
  --night:         oklch(0.14  0.008 90);
  --moss-deep:     oklch(0.28  0.045 145);
  --moss:          oklch(0.42  0.055 150);
  --tea:           oklch(0.55  0.07  140);
  --mist:          oklch(0.88  0.012 200);
  --stone:         oklch(0.62  0.015 230);
  --brass:         oklch(0.68  0.11  75);
  --coconut:       oklch(0.78  0.035 70);
  --spice:         oklch(0.42  0.10  45);
  --muted:         oklch(0.92  0.015 80);
  --muted-fg:      oklch(0.45  0.015 80);
  --border:        oklch(0.85  0.018 75);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background-image:
    radial-gradient(at 20% 10%, oklch(0.92 0.02 70 / 0.4) 0px, transparent 50%),
    radial-gradient(at 80% 80%, oklch(0.88 0.025 60 / 0.35) 0px, transparent 55%);
}

::selection {
  background-color: var(--brass);
  color: var(--night);
}

/* ── Custom typography utilities ── */

.font-display {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
}

.font-hand {
  font-family: "Caveat", cursive;
}

.editorial-headline {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.92;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}

.editorial-italic {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 300;
}

.small-caps {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 500;
}

/* ── Custom component utilities ── */

.rule-divider {
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
}

.paper-grain { position: relative; }
.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.35;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lamp-glow {
  box-shadow:
    0 0 60px 10px oklch(0.7 0.13 70 / 0.35),
    0 0 120px 30px oklch(0.6 0.12 60 / 0.18);
}

.ken-burns {
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
}

/* ── Mobile Nav Morphing Hamburger & Drawer ── */
#bar-top { transform-origin: 12px 6px; }
#bar-bot { transform-origin: 12px 18px; }

.menu-open #bar-top {
  transform: translateY(6px) rotate(45deg);
}
.menu-open #bar-mid {
  opacity: 0;
}
.menu-open #bar-bot {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav-active {
  overflow: hidden;
}

/* ── Journal Editorial Layout ── */
.blog-dropcap::first-letter {
  font-family: "Fraunces", Georgia, serif;
  float: left;
  font-size: 4.8rem;
  line-height: 0.8;
  margin-right: 0.15em;
  margin-top: 0.15em;
  font-weight: 300;
  color: var(--spice);
}

.blog-blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.8rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--moss-deep);
  border-left: 2px solid var(--brass);
  padding-left: 1.5rem;
  margin: 2.5rem 0;
}

/* ── Custom SVG Map Styling ── */
.map-marker {
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.map-marker:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.map-label {
  pointer-events: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  fill: var(--ink);
  font-size: 10px;
}

/* ── Accordion ── */
.accordion-header {
  cursor: pointer;
  user-select: none;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.accordion-open .accordion-content {
  max-height: 500px;
}
.accordion-icon {
  transition: transform 0.4s ease;
}
.accordion-open .accordion-icon {
  transform: rotate(180deg);
}

/* ── Live Infinite Marquee Track ── */
.marquee-track {
  animation: marquee-scroll 32s linear infinite;
}
@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}