/* =====================================================
   Mineral Exploration · IIT Bombay
   Design system per styling-skill (hand-rolled, no build)
   ===================================================== */

:root {
  /* Fixed colors */
  --color-white: #ffffff;
  --color-beige: #F9F6F1;
  --color-black: #000000;
  --color-ink: #101010;
  --color-muted: #555555;

  /* berry (blue) - base #1e6fb8 */
  --color-berry-100: #e4eef6;
  --color-berry-200: #c7dbed;
  --color-berry-300: #9abedf;
  --color-berry-400: #629acd;
  --color-berry-500: #1e6fb8;
  --color-berry-600: #1a5e9c;
  --color-berry-700: #144b7d;
  --color-berry-800: #0f385c;
  --color-berry-900: #0a243b;

  /* plum (deep blue-purple) - base #3a4a7a */
  --color-plum-100: #e7e9ef;
  --color-plum-200: #ced2de;
  --color-plum-300: #a6aec3;
  --color-plum-400: #7580a2;
  --color-plum-500: #3a4a7a;
  --color-plum-600: #313f68;
  --color-plum-700: #273253;
  --color-plum-800: #1d253d;
  --color-plum-900: #131827;

  /* lemon (warm accent) - base #f5b800 */
  --color-lemon-100: #fef6e0;
  --color-lemon-200: #fdedbf;
  --color-lemon-300: #fbdf8c;
  --color-lemon-400: #f8cd4d;
  --color-lemon-500: #f5b800;
  --color-lemon-600: #d09c00;
  --color-lemon-700: #a77d00;
  --color-lemon-800: #7b5c00;
  --color-lemon-900: #4e3b00;

  /* Type scale */
  --text-80: 80px;
  --text-64: 64px;
  --text-56: 56px;
  --text-48: 48px;
  --text-32: 32px;
  --text-28: 28px;
  --text-24: 24px;
  --text-21: 21px;
  --text-17: 17px;
  --text-14: 14px;
  --text-12: 12px;

  /* Line + letter */
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-body: 1.45;
  --tracking-tightest: -0.02em;
  --tracking-tighter: -0.016em;
  --tracking-tight: -0.012em;
  --tracking-normal: -0.01em;
  --tracking-label: 0.02em;

  /* Fonts */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Gentium Plus", "Playfair Display", "Lora", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); color: var(--color-ink); background: var(--color-white); }
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); margin: 0; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-berry-600);
  border-radius: 2px;
}
button { font: inherit; cursor: pointer; }
hr { margin: 0; border: 0; }

::selection { background: var(--color-berry-500); color: var(--color-white); }

/* =====================================================
   COLOR UTILITIES
   ===================================================== */

.bg-white   { background-color: var(--color-white); }
.bg-beige   { background-color: var(--color-beige); }
.bg-ink     { background-color: var(--color-ink); }

.bg-berry-100 { background-color: var(--color-berry-100); }
.bg-berry-200 { background-color: var(--color-berry-200); }
.bg-berry-300 { background-color: var(--color-berry-300); }
.bg-berry-500 { background-color: var(--color-berry-500); }
.bg-berry-700 { background-color: var(--color-berry-700); }
.bg-berry-800 { background-color: var(--color-berry-800); }
.bg-berry-900 { background-color: var(--color-berry-900); }

.bg-plum-100 { background-color: var(--color-plum-100); }
.bg-plum-500 { background-color: var(--color-plum-500); }
.bg-plum-900 { background-color: var(--color-plum-900); }

.bg-lemon-200 { background-color: var(--color-lemon-200); }
.bg-lemon-300 { background-color: var(--color-lemon-300); }
.bg-lemon-500 { background-color: var(--color-lemon-500); }

.bg-white\/5  { background-color: rgb(255 255 255 / 0.05); }
.bg-white\/8  { background-color: rgb(255 255 255 / 0.08); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.10); }
.bg-white\/40 { background-color: rgb(255 255 255 / 0.40); }
.bg-white\/60 { background-color: rgb(255 255 255 / 0.60); }
.bg-white\/90 { background-color: rgb(255 255 255 / 0.90); }
.bg-ink\/5    { background-color: rgb(16 16 16 / 0.05); }

.text-white   { color: var(--color-white); }
.text-ink     { color: var(--color-ink); }
.text-muted   { color: var(--color-muted); }
.text-black   { color: var(--color-black); }

.text-berry-300 { color: var(--color-berry-300); }
.text-berry-500 { color: var(--color-berry-500); }
.text-berry-600 { color: var(--color-berry-600); }
.text-berry-700 { color: var(--color-berry-700); }
.text-berry-900 { color: var(--color-berry-900); }
.text-plum-500  { color: var(--color-plum-500); }
.text-lemon-300 { color: var(--color-lemon-300); }
.text-lemon-500 { color: var(--color-lemon-500); }

.text-white\/40 { color: rgb(255 255 255 / 0.40); }
.text-white\/60 { color: rgb(255 255 255 / 0.60); }
.text-white\/80 { color: rgb(255 255 255 / 0.80); }
.text-inherit   { color: inherit; }

.border          { border: 1px solid; }
.border-t        { border-top: 1px solid; }
.border-b        { border-bottom: 1px solid; }
.border-l        { border-left: 1px solid; }
.border-ink\/8   { border-color: rgb(16 16 16 / 0.08); }
.border-ink\/10  { border-color: rgb(16 16 16 / 0.10); }
.border-ink\/15  { border-color: rgb(16 16 16 / 0.15); }
.border-ink\/20  { border-color: rgb(16 16 16 / 0.20); }
.border-white\/10 { border-color: rgb(255 255 255 / 0.10); }
.border-white\/20 { border-color: rgb(255 255 255 / 0.20); }
.border-berry-500 { border-color: var(--color-berry-500); }
.border-berry-700 { border-color: var(--color-berry-700); }
.border-lemon-500 { border-color: var(--color-lemon-500); }

/* =====================================================
   LAYOUT / FLEX / GRID
   ===================================================== */

.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.font-sans   { font-family: var(--font-sans); }
.font-mono   { font-family: var(--font-mono); }
.font-serif  { font-family: var(--font-serif); }

.block       { display: block; }
.inline      { display: inline; }
.inline-block{ display: inline-block; }
.inline-flex { display: inline-flex; }
.flex        { display: flex; }
.grid        { display: grid; }
.hidden      { display: none; }

.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.items-baseline{ align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-auto     { align-self: auto; }
.self-start    { align-self: flex-start; }
.self-center   { align-self: center; }
.self-end      { align-self: flex-end; }
.self-stretch  { align-self: stretch; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-start  { justify-content: flex-start; }
.justify-end    { justify-content: flex-end; }
.shrink-0    { flex-shrink: 0; }
.grow        { flex-grow: 1; }
.basis-0     { flex-basis: 0; }
.order-first { order: -1; }
.order-last  { order: 999; }
.order-1     { order: 1; }
.order-2     { order: 2; }

.relative    { position: relative; }
.absolute    { position: absolute; }
.fixed       { position: fixed; }
.sticky      { position: sticky; }
.inset-0     { inset: 0; }
.top-0       { top: 0; }
.right-0     { right: 0; }
.bottom-0    { bottom: 0; }
.left-0      { left: 0; }
.left-4      { left: 1rem; }
.left-1\/2   { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.z-10        { z-index: 10; }
.z-20        { z-index: 20; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-7   { gap: 1.75rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }
.gap-16  { gap: 4rem; }
.gap-20  { gap: 5rem; }

.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-1\/2  { width: 50%; }
.w-2     { width: 0.5rem; }
.w-11    { width: 2.75rem; }
.w-12    { width: 3rem; }
.w-14    { width: 3.5rem; }
.w-16    { width: 4rem; }
.h-2     { height: 0.5rem; }
.h-11    { height: 2.75rem; }
.h-12    { height: 3rem; }
.h-14    { height: 3.5rem; }
.h-16    { height: 4rem; }
.h-full  { height: 100%; }
.h-px    { height: 1px; }
.w-px    { width: 1px; }
.size-1\.5 { width: 0.375rem; height: 0.375rem; }
.size-2  { width: 0.5rem;  height: 0.5rem; }
.size-3  { width: 0.75rem; height: 0.75rem; }
.size-6  { width: 1.5rem;  height: 1.5rem; }
.size-8  { width: 2rem;    height: 2rem; }
.size-10 { width: 2.5rem;  height: 2.5rem; }
.size-12 { width: 3rem;    height: 3rem; }

.min-h-screen { min-height: 100vh; }
.min-h-\[88vh\]   { min-height: 88vh; }
.min-h-\[640px\]  { min-height: 640px; }
.min-h-11    { min-height: 2.75rem; }
.min-w-\[640px\] { min-width: 640px; }

.max-w-prose       { max-width: 65ch; }
.max-w-\[480px\]   { max-width: 480px; }
.max-w-\[560px\]   { max-width: 560px; }
.max-w-\[680px\]   { max-width: 680px; }
.max-w-\[600px\]   { max-width: 600px; }
.max-w-\[620px\]   { max-width: 620px; }
.max-w-\[640px\]   { max-width: 640px; }
.max-w-\[720px\]   { max-width: 720px; }
.max-w-\[840px\]   { max-width: 840px; }
.max-w-\[860px\]   { max-width: 860px; }
.max-w-\[960px\]   { max-width: 960px; }
.max-w-\[1100px\]  { max-width: 1100px; }
.max-w-\[1312px\]  { max-width: 1312px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-\[4\/3\]  { aspect-ratio: 4 / 3; }
.aspect-\[3\/4\]  { aspect-ratio: 3 / 4; }
.aspect-\[5\/3\]  { aspect-ratio: 5 / 3; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-\[21\/9\] { aspect-ratio: 21 / 9; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-full { grid-column: 1 / -1; }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }

/* Margins / Padding */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10{ margin-top: 2.5rem; }
.mt-12{ margin-top: 3rem; }
.mt-auto { margin-top: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.p-0   { padding: 0; }
.p-1   { padding: 0.25rem; }
.p-2   { padding: 0.5rem; }
.p-4   { padding: 1rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.p-10  { padding: 2.5rem; }
.px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem; padding-right: 1rem; }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7  { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8  { padding-left: 2rem; padding-right: 2rem; }
.py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4  { padding-top: 1rem; padding-bottom: 1rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-7  { padding-top: 1.75rem; }
.pt-8  { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pl-4  { padding-left: 1rem; }
.pl-5  { padding-left: 1.25rem; }

/* =====================================================
   BORDERS / RADII / SHADOWS
   ===================================================== */

.rounded-none { border-radius: 0; }
.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.5rem; }
.rounded-lg   { border-radius: 0.75rem; }
.rounded-xl   { border-radius: 1rem; }
.rounded-2xl  { border-radius: 1.25rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-\[24px\] { border-radius: 24px; }

.shadow-soft { box-shadow: 0 1px 2px rgb(10 36 59 / 0.06), 0 8px 24px -8px rgb(10 36 59 / 0.10); }
.shadow-card { box-shadow: 0 2px 4px rgb(10 36 59 / 0.05), 0 16px 32px -16px rgb(10 36 59 / 0.15); }

/* =====================================================
   TYPOGRAPHY UTILITIES
   ===================================================== */

.display-2xl {
  font-family: var(--font-serif);
  font-size: var(--text-32);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.08;
  font-weight: 700;
}
.display-xl {
  font-family: var(--font-serif);
  font-size: var(--text-32);
  letter-spacing: var(--tracking-tightest);
  line-height: 0.95;
  font-weight: 700;
}
.display-lg {
  font-family: var(--font-serif);
  font-size: var(--text-32);
  letter-spacing: var(--tracking-tight);
  line-height: 1.16;
  font-weight: 700;
}
.display-md {
  font-family: var(--font-serif);
  font-size: var(--text-28);
  letter-spacing: var(--tracking-normal);
  line-height: 1.2;
  font-weight: 700;
}

.headline-md {
  font-family: var(--font-sans);
  font-size: var(--text-21);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  line-height: 1.3;
}
.headline-sm {
  font-family: var(--font-sans);
  font-size: var(--text-17);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  line-height: 1.35;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-17);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  line-height: 1.55;
}
.body-md {
  font-family: var(--font-sans);
  font-size: var(--text-14);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  line-height: 1.5;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-14);
  font-weight: 400;
  line-height: 20px;
}
.body-xs {
  font-family: var(--font-sans);
  font-size: var(--text-12);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
  line-height: 1.2;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-14);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
}

.text-xs   { font-size: 12px; }
.text-sm   { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg   { font-size: 18px; }
.text-xl   { font-size: 20px; }
.text-2xl  { font-size: 24px; }
.text-3xl  { font-size: 30px; }
.text-4xl  { font-size: 36px; }
.text-5xl  { font-size: 48px; }
.text-6xl  { font-size: 60px; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.leading-none { line-height: 1; }
.leading-tight{ line-height: 1.1; }
.leading-snug { line-height: 1.2; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.tracking-wide  { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.06em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.uppercase  { text-transform: uppercase; }
.underline  { text-decoration: underline; text-underline-offset: 3px; }
.text-center{ text-align: center; }
.text-left  { text-align: left; }
.whitespace-nowrap { white-space: nowrap; }
.list-disc  { list-style-type: disc; padding-left: 1.25rem; }
.list-none  { list-style-type: none; padding-left: 0; }

.opacity-0  { opacity: 0; }
.opacity-30 { opacity: 0.3; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-100{ opacity: 1; }
.backdrop-blur { -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }

/* =====================================================
   TRANSITIONS / HOVER UTILITIES (button morph etc.)
   ===================================================== */

.transition       { transition: all 0.3s ease; }
.transition-all   { transition: all 0.3s ease; }
.transition-colors{ transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.ease-out     { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

.hover\:opacity-100:hover { opacity: 1; }
.hover\:opacity-80:hover  { opacity: 0.8; }
.hover\:rounded-none:hover{ border-radius: 0; }
.hover\:rounded-2xl:hover { border-radius: 1.25rem; }
.hover\:pl-8:hover        { padding-left: 2rem; }
.hover\:scale-102:hover   { transform: scale(1.02); }
.active\:scale-\[0\.98\]:active { transform: scale(0.98); }
.hover\:bg-berry-200:hover { background-color: var(--color-berry-200); }
.hover\:bg-berry-700:hover { background-color: var(--color-berry-700); }
.hover\:bg-lemon-400:hover { background-color: var(--color-lemon-400); }
.hover\:text-berry-600:hover { color: var(--color-berry-600); }
.hover\:text-ink:hover { color: var(--color-ink); }
.hover\:border-ink:hover { border-color: var(--color-ink); }

.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

.disabled\:opacity-60:disabled { opacity: 0.6; }

/* =====================================================
   COMPONENT: BUTTON
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 24px;
  padding: 0.75rem 1.5rem;
  min-height: 2.75rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { border-radius: 0; transform: scale(1.02); padding-left: 2rem; }
.btn:active { transform: scale(0.98); }
.btn .pixel {
  width: 8px; height: 8px;
  position: absolute;
  left: 1rem;
  top: 50%;
  margin-top: -4px;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.btn:hover .pixel { opacity: 1; }
.btn-primary  { background: var(--color-lemon-300); color: var(--color-ink); }
.btn-primary .pixel { background: var(--color-ink); }
.btn-primary:hover { background: var(--color-lemon-400); }
.btn-dark     { background: var(--color-berry-900); color: var(--color-white); }
.btn-dark .pixel { background: var(--color-white); }
.btn-dark:hover { background: var(--color-berry-800); }
.btn-outline  { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-outline .pixel { background: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-white); }
.btn-outline:hover .pixel { background: var(--color-white); }
.btn-light    { background: var(--color-white); color: var(--color-berry-900); }
.btn-light .pixel { background: var(--color-berry-900); }
.btn-ghost-dark { background: transparent; color: var(--color-white); border-color: rgb(255 255 255 / 0.35); }
.btn-ghost-dark:hover { background: var(--color-white); color: var(--color-berry-900); border-color: var(--color-white); }
.btn-ghost-dark .pixel { background: var(--color-white); }
.btn-ghost-dark:hover .pixel { background: var(--color-berry-900); }
.btn-sm { padding: 0.5rem 1rem; min-height: 0; }

/* Modifier: button with built-in trailing arrow icon */
.btn-arrow svg {
  width: 20px; height: 10px;
  margin-left: 0.375rem;
  transition: transform 0.25s ease;
  overflow: visible;
}
.btn-arrow:hover svg { transform: translateX(3px); }
/* Disable the legacy pill→rect morph when using btn-arrow (cleaner) */
.btn.btn-arrow:hover {
  border-radius: 9999px;
  padding-left: 1.5rem;
}
.btn.btn-arrow .pixel { display: none; }

/* =====================================================
   COMPONENT: HAMBURGER + MOBILE MENU
   ===================================================== */

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-ink);
}
.hamburger .bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  margin-left: auto;
  margin-right: auto;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}
.hamburger[aria-expanded="true"] .bar-top    { transform: translateY(4.25px) rotate(45deg); }
.hamburger[aria-expanded="true"] .bar-bottom { transform: translateY(-4.25px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 19; /* below the header */
  padding: 96px 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
}
.mobile-nav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}
.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  padding: 1rem 0;
  color: var(--color-ink);
  border-bottom: 1px solid rgb(16 16 16 / 0.08);
}
.mobile-nav-link:first-child { border-top: 1px solid rgb(16 16 16 / 0.08); }
.mobile-nav-cta { margin-top: auto; }

@media (min-width: 768px) {
  .hamburger, .mobile-nav { display: none !important; }
}

/* prevent body scroll when menu is open */
body.menu-open { overflow: hidden; }

/* =====================================================
   COMPONENT: SLEEK NAV BUTTON (compact pill w/ arrow)
   ===================================================== */

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.125rem;
  background: var(--color-berry-900);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 1px solid var(--color-berry-900);
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-nav svg {
  width: 16px; height: 8px;
  transition: transform 0.25s ease;
  overflow: visible;
}
.btn-nav:hover { background: var(--color-berry-700); border-color: var(--color-berry-700); }
.btn-nav:hover svg { transform: translateX(3px); }

/* =====================================================
   COMPONENT: SLEEK INLINE LINK (animated underline + arrow)
   ===================================================== */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  padding-bottom: 4px;
  line-height: 1;
  transition: color 0.25s ease;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-arrow:hover { color: var(--color-berry-700); }
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left center; }
.link-arrow svg {
  width: 18px; height: 8px;
  transition: transform 0.25s ease;
  overflow: visible;
}
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow-light { color: var(--color-white); }
.link-arrow-light:hover { color: var(--color-lemon-300); }

/* =====================================================
   COMPONENT: FORM (sleek underline inputs)
   ===================================================== */

.form-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-white);
  border: 1px solid rgb(16 16 16 / 0.08);
  padding: 1.75rem;
}
@media (min-width: 640px) { .form-card { padding: 2rem 2.5rem; } }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 2.25rem;
  padding-bottom: 0;
}
.form-field:first-of-type { padding-top: 0; }

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2.25rem;
  column-gap: 0;
  padding-top: 2.25rem;
  padding-bottom: 0;
}
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 0; }
}
.form-row .form-field {
  padding: 0;
}

.form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-muted);
}
.field-line {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(16 16 16 / 0.18);
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-ink);
  outline: none;
  border-radius: 0;
  transition: border-color 0.25s ease, padding-left 0.25s ease;
}
.field-line::placeholder { color: rgb(85 85 85 / 0.45); }
.field-line:focus { border-bottom-color: var(--color-berry-500); }
.field-line:disabled { opacity: 0.6; }

/* Custom combobox (replaces native <select>) so we can style the open list */
.combo { position: relative; width: 100%; }
.combo-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(16 16 16 / 0.18);
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-ink);
  outline: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  transition: border-color 0.25s ease;
}
.combo-trigger:focus,
.combo[data-open="true"] .combo-trigger { border-bottom-color: var(--color-berry-500); }
.combo-value[data-placeholder] { color: rgb(85 85 85 / 0.55); }
.combo-trigger svg {
  width: 12px; height: 12px;
  color: var(--color-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.combo[data-open="true"] .combo-trigger svg { transform: rotate(180deg); }

.combo-listbox {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid rgb(16 16 16 / 0.1);
  box-shadow: 0 12px 32px -12px rgb(10 36 59 / 0.25);
  padding: 0.25rem;
  margin: 0;
  list-style: none;
}
.combo-listbox[hidden] { display: none; }
.combo-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.combo-opt:hover,
.combo-opt.is-active { background: var(--color-beige); }
.combo-opt[aria-selected="true"] { background: var(--color-berry-100); }
.combo-opt .dial {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
  white-space: nowrap;
}
.combo-listbox::-webkit-scrollbar { width: 8px; }
.combo-listbox::-webkit-scrollbar-track { background: transparent; }
.combo-listbox::-webkit-scrollbar-thumb { background: rgb(16 16 16 / 0.15); border-radius: 4px; }
.form-error {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-berry-700);
  min-height: 0;
}
.form-submit {
  margin-top: 2rem;
}
/* legacy class kept for any leftover usage */
.field { width: 100%; padding: 0.875rem 1rem; border: 1px solid rgb(16 16 16 / 0.18); background: var(--color-white); }

/* =====================================================
   COMPONENT: PILL / BADGE
   ===================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgb(16 16 16 / 0.15);
  background: var(--color-white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1;
}
.pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--color-berry-500); }
.pill-dark { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.18); color: var(--color-white); }
.pill-dark .dot { background: var(--color-lemon-300); }

/* =====================================================
   COMPONENT: NUMBERED CARD
   ===================================================== */

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-beige);
  border: 1px solid rgb(16 16 16 / 0.08);
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--color-berry-600);
  font-weight: 600;
}
.theme-card .title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  color: var(--color-ink);
}
.theme-card.alt   { background: var(--color-berry-100); }
.theme-card.dark  { background: var(--color-berry-900); border-color: transparent; }
.theme-card.dark .num   { color: var(--color-lemon-300); }
.theme-card.dark .title { color: var(--color-white); }

/* =====================================================
   COMPONENT: TIMELINE (schedule)
   ===================================================== */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgb(16 16 16 / 0.08);
  border: 1px solid rgb(16 16 16 / 0.08);
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  background: var(--color-white);
  padding: 1.25rem 1.5rem;
  transition: background 0.2s ease;
}
.timeline-item:hover { background: var(--color-beige); }
.timeline-time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-berry-700);
  white-space: nowrap;
}
.timeline-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.timeline-meta {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.5;
}
.timeline-item.featured {
  background: var(--color-berry-100);
}
.timeline-item.featured:hover { background: var(--color-berry-200); }
.timeline-item.featured .timeline-title { color: var(--color-berry-900); }
.timeline-item.break { background: var(--color-beige); }
.timeline-item.break .timeline-title { font-weight: 500; color: var(--color-muted); font-style: italic; }

/* =====================================================
   COMPONENT: MARQUEE STRIP
   ===================================================== */

.marquee {
  display: flex;
  overflow: hidden;
  border-top: 1px solid rgb(16 16 16 / 0.10);
  border-bottom: 1px solid rgb(16 16 16 / 0.10);
  background: var(--color-white);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  padding-block: 1.25rem;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
}
.marquee-item .star { color: var(--color-berry-500); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =====================================================
   HERO DECORATIVE GRID
   ===================================================== */

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(20 75 125 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(20 75 125 / 0.07) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 70% at 70% 30%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 30%, black 30%, transparent 70%);
  pointer-events: none;
}

/* =====================================================
   BREAKPOINTS - sm: 640, md: 768, lg: 1024
   ===================================================== */

@media (min-width: 640px) {
  .display-2xl { font-size: var(--text-56); line-height: var(--leading-tight); }
  .display-xl  { font-size: var(--text-48); line-height: var(--leading-tight); }
  .display-md  { font-size: var(--text-32); line-height: var(--leading-snug); }
  .body-lg     { font-size: var(--text-21); }
  .body-md     { font-size: var(--text-17); }
  .headline-sm { font-size: var(--text-21); }

  .sm\:block       { display: block; }
  .sm\:inline      { display: inline; }
  .sm\:inline-block{ display: inline-block; }
  .sm\:flex        { display: flex; }
  .sm\:grid        { display: grid; }
  .sm\:hidden      { display: none; }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:items-center{ align-items: center; }
  .sm\:items-end   { align-items: flex-end; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:text-center { text-align: center; }
  .sm\:text-left   { text-align: left; }
  .sm\:w-auto      { width: auto; }
  .sm\:gap-2  { gap: 0.5rem; }
  .sm\:gap-4  { gap: 1rem; }
  .sm\:gap-5  { gap: 1.25rem; }
  .sm\:gap-6  { gap: 1.5rem; }
  .sm\:gap-8  { gap: 2rem; }
  .sm\:gap-9  { gap: 2.25rem; }
  .sm\:gap-10 { gap: 2.5rem; }
  .sm\:gap-12 { gap: 3rem; }
  .sm\:gap-16 { gap: 4rem; }
  .sm\:gap-20 { gap: 5rem; }
  .sm\:p-6  { padding: 1.5rem; }
  .sm\:p-8  { padding: 2rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .sm\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .sm\:py-10{ padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .sm\:py-12{ padding-top: 3rem; padding-bottom: 3rem; }
  .sm\:py-16{ padding-top: 4rem; padding-bottom: 4rem; }
  .sm\:py-20{ padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:py-24{ padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-32{ padding-top: 8rem; padding-bottom: 8rem; }
  .sm\:pt-12{ padding-top: 3rem; }
  .sm\:mb-12{ margin-bottom: 3rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:text-3xl { font-size: 30px; }
  .sm\:text-5xl { font-size: 48px; }
  .sm\:text-6xl { font-size: 60px; }

  .timeline-item {
    grid-template-columns: 180px 1fr;
    gap: 2rem;
    padding: 1.75rem 2rem;
    align-items: start;
  }
}

@media (min-width: 768px) {
  .md\:block       { display: block; }
  .md\:flex        { display: flex; }
  .md\:grid        { display: grid; }
  .md\:hidden      { display: none; }
  .md\:flex-row    { flex-direction: row; }
  .md\:items-center{ align-items: center; }
  .md\:items-end   { align-items: flex-end; }
  .md\:justify-between { justify-content: space-between; }
  .md\:gap-6  { gap: 1.5rem; }
  .md\:gap-8  { gap: 2rem; }
  .md\:gap-12 { gap: 3rem; }
  .md\:gap-16 { gap: 4rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
  .md\:col-span-3  { grid-column: span 3 / span 3; }
  .md\:col-span-4  { grid-column: span 4 / span 4; }
  .md\:col-span-5  { grid-column: span 5 / span 5; }
  .md\:col-span-6  { grid-column: span 6 / span 6; }
  .md\:col-span-7  { grid-column: span 7 / span 7; }
  .md\:col-span-8  { grid-column: span 8 / span 8; }
  .md\:text-left   { text-align: left; }
}

@media (min-width: 1024px) {
  .display-2xl { font-size: var(--text-80); }
  .display-xl  { font-size: var(--text-64); }
  .display-lg  { font-size: var(--text-48); line-height: var(--leading-snug); }
  .body-lg     { font-size: var(--text-21); line-height: var(--leading-body); }
  .body-md     { font-size: var(--text-17); line-height: var(--leading-body); }
  .headline-md { font-size: var(--text-24); }

  .lg\:grid     { display: grid; }
  .lg\:flex     { display: flex; }
  .lg\:block    { display: block; }
  .lg\:hidden   { display: none; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:order-first { order: -1; }
  .lg\:order-last  { order: 999; }
  .lg\:gap-6  { gap: 1.5rem; }
  .lg\:gap-8  { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:p-8    { padding: 2rem; }
  .lg\:p-10   { padding: 2.5rem; }
  .lg\:py-24  { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:py-32  { padding-top: 8rem; padding-bottom: 8rem; }
}

/* =====================================================
   COMPONENT: SPEAKERS CAROUSEL
   ===================================================== */

.carousel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
  padding-bottom: 0.25rem;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-track {
  display: flex;
  gap: 1.5rem;
}
.carousel-card {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.carousel-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-berry-100);
  border: 1px solid rgb(16 16 16 / 0.08);
}
.carousel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.carousel-card:hover .carousel-photo img { transform: scale(1.04); }
.carousel-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.carousel-role {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-muted);
}
.carousel-nav {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgb(16 16 16 / 0.15);
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-btn:hover {
  background: var(--color-berry-600);
  border-color: var(--color-berry-600);
  color: var(--color-white);
}
.carousel-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--color-white);
  border-color: rgb(16 16 16 / 0.15);
  color: var(--color-ink);
}

@media (min-width: 640px) {
  .carousel-card { width: 252px; }
}