/* OPD static site — design tokens (adapted from the original Tailwind v4 theme) */
:root {
  --radius: 0.375rem;
  --background: oklch(0.985 0.006 85);
  --foreground: oklch(0.19 0.05 245);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.19 0.05 245);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.19 0.05 245);
  --primary: oklch(0.32 0.07 235);
  --primary-foreground: oklch(0.97 0.008 85);
  --secondary: oklch(0.94 0.012 85);
  --secondary-foreground: oklch(0.22 0.06 240);
  --muted: oklch(0.955 0.01 85);
  --muted-foreground: oklch(0.46 0.03 240);
  --accent: oklch(0.93 0.02 210);
  --accent-foreground: oklch(0.22 0.06 240);
  --destructive: oklch(0.55 0.22 27);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.88 0.012 85);
  --input: oklch(0.88 0.012 85);
  --ring: oklch(0.55 0.12 210);
  --color-gold: oklch(0.52 0.11 215);
  --color-gold-foreground: oklch(0.99 0.005 85);
  --color-cream: oklch(0.945 0.018 80);
  --color-ink: oklch(0.19 0.05 245);
  --font-display: "Archivo Black", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Hind", "Inter", system-ui, -apple-system, sans-serif;
}

* { border-color: var(--border); }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.003em;
  font-weight: 400;
}
p + p { margin-top: 0.85em; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.5vw + 0.4rem, 5rem); line-height: 0.95; letter-spacing: -0.035em; margin-bottom: 0.35em; }
h2 { font-size: clamp(1.95rem, 3.2vw + 0.5rem, 3.25rem); line-height: 1; letter-spacing: -0.028em; margin-bottom: 0.4em; }
h3 { font-size: clamp(1.45rem, 1.4vw + 0.9rem, 2rem); line-height: 1.1; letter-spacing: -0.022em; margin-bottom: 0.45em; }
h4 { font-size: clamp(1.15rem, 0.7vw + 0.95rem, 1.4rem); line-height: 1.2; letter-spacing: -0.018em; }
h5 { font-size: 1.075rem; line-height: 1.3; letter-spacing: -0.012em; }
h6 { font-size: 0.95rem; line-height: 1.35; letter-spacing: -0.005em; text-transform: uppercase; }
small { font-size: 0.8125rem; line-height: 1.5; }
strong, b { font-weight: 700; }

.eyebrow, .overline {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; font-size: 0.72rem; line-height: 1; color: var(--color-gold);
}
.lede, .lead {
  font-family: var(--font-sans); font-size: 1.2rem; line-height: 1.55;
  letter-spacing: -0.008em; font-weight: 400; color: var(--muted-foreground);
}
.numeric, .tabular { font-variant-numeric: tabular-nums; }
blockquote {
  font-family: var(--font-sans); font-size: 1.35rem; line-height: 1.45; letter-spacing: -0.01em;
  font-weight: 300; font-style: italic; border-left: 3px solid var(--color-gold); padding-left: 1rem;
}

@keyframes hero-progress { from { width: 0 } to { width: 100% } }
@keyframes news-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* Mobile nav accordion */
.mobile-panel { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1), opacity .3s; }
.mobile-panel > div { overflow: hidden; }
.mobile-panel.open { grid-template-rows: 1fr; opacity: 1; }

/* Simple fade for slider / news bar */
.fade-slide { transition: opacity 1.1s ease; }

img { max-width: 100%; }

/* Hero slider image zoom (toggled by JS via opacity-100/opacity-0 on [data-hero-bg]) */
[data-hero-bg] img { transition: transform 7s ease-out; transform: scale(1); }
[data-hero-bg].opacity-100 img { transform: scale(1.1); }
[data-hero-content] { transition: opacity .7s; }


.hide { display: none !important; }

/* Desktop nav dropdown (hover-driven) */
.nav-drop { position: relative; }
.nav-drop-panel {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, -8px) scale(.98);
  padding-top: .75rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: all .25s cubic-bezier(.22,1,.36,1); z-index: 60;
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1);
}
.nav-drop-chevron { transition: transform .3s; }
.nav-drop:hover .nav-drop-chevron { transform: rotate(180deg); }

/* Hero slider */
[data-hero-bg] { transition: opacity 1.2s ease-out; }
[data-hero-content] { transition: opacity .7s, transform .7s; }
[data-hero-dot] > span { display: block; height: 100%; border-radius: 999px; background: var(--color-gold); width: 0; }
[data-hero-dot].active-progress > span { animation: hero-progress 6.5s linear; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }