/* ════════════════════════════════════════════════════════════════
   Param Shah — shared design system
   Bento tiles · 4px radius · Lora + Inter · dark by default
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  --noir:       180  5% 13%;
  --red:          5 50% 45%;
  --green:      156 37% 41%;
  --yellow:      45 89% 53%;
  --blue:       205 40% 40%;   /* link text — NOT a tile color */
  --ultramarine: 232 57% 42%;  /* from the painted sign */

  --background:       0  0%  96%;
  --foreground:   222.2 84% 4.9%;
  --card:             0  0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --secondary:       var(--blue);    /* subheadings + icons */
}

.dark {
  --background:      180  5%   8%;
  --foreground:      210 40%  98%;
  --card:            var(--noir);
  --card-foreground: 210 40%  98%;
  --blue:            186 26%  64%;
  --muted-foreground: 215 20.2% 65.1%;
  --secondary:       var(--yellow);
}

html {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Lora, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
::selection { background: hsl(var(--yellow)); color: hsl(var(--noir)); }

/* ─── NAV ────────────────────────────────────────────────────── */
nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  height: 80px;
  background: hsl(var(--background) / .95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 768px) { nav { position: static; background: hsl(var(--background)); backdrop-filter: none; } }
body { padding-top: 80px; }
@media (min-width: 768px) { body { padding-top: 0; } }

.nav-inner {
  max-width: 1248px; margin: 0 auto; height: 80px; padding: 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
@media (min-width: 640px) { .nav-inner { padding: 0 16px; } }

.wordmark { font-family: Lora, serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.wordmark span { color: hsl(var(--secondary)); }

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a {
  font-family: Inter, sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: -0.05em; color: hsl(var(--foreground)); transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: hsl(var(--secondary)); }

/* icon buttons — theme toggle, menu */
.icon-btn {
  background: none; border: none; cursor: pointer;
  height: 40px; width: 40px; border-radius: 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: hsl(var(--secondary)); transition: background-color .15s;
}
.icon-btn:hover { background: hsl(var(--muted-foreground) / .15); }
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* sun/moon rotate + scale rather than hard-swapping */
.theme-toggle { position: relative; }
.theme-toggle svg { position: absolute; transition: transform .3s, opacity .3s; }
.icon-sun  { transform: rotate(0deg)   scale(1); opacity: 1; }
.icon-moon { transform: rotate(90deg)  scale(0); opacity: 0; }
.dark .icon-sun  { transform: rotate(-90deg) scale(0); opacity: 0; }
.dark .icon-moon { transform: rotate(0deg)   scale(1); opacity: 1; }

/* ─── MOBILE MENU ─ full-screen overlay ──────────────────────── */
.menu-btn { display: inline-flex; }
@media (min-width: 768px) { .menu-btn { display: none; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; place-content: center; align-items: center;
  gap: 8px; text-align: center;
  background: hsl(var(--background) / .97);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .3s, opacity .3s;
  transform: translateX(-100%); opacity: 0; pointer-events: none;
}
.mobile-menu.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: Lora, serif; font-size: 2rem; line-height: 3.25rem;
  color: hsl(var(--foreground)); transition: color .15s;
}
.mobile-menu a:hover, .mobile-menu a.active { color: hsl(var(--secondary)); }
.mobile-menu .close-btn { position: absolute; top: 20px; right: 12px; }
@media (min-width: 768px) { .mobile-menu { display: none; } }

/* ─── GRID ───────────────────────────────────────────────────── */
main { max-width: 1248px; margin: 0 auto; padding: 0 8px 16px; }
@media (min-width: 640px) { main { padding: 0 16px 16px; } }

.grid-container {
  display: grid;
  gap: 1rem;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(220px, max-content);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width:  640px) { .grid-container { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:  768px) { .grid-container { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .grid-container { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .grid-container { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 1536px) { .grid-container { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (min-width: 1760px) { .grid-container { grid-auto-rows: minmax(300px, max-content); } }

/* responsive spans — never exceed the current column count */
@media (min-width: 640px) {
  .t-hero, .t-bio, .t-wide { grid-column: span 2 / span 2; }
  .t-tall { grid-row: span 2 / span 2; }   /* 1 col x 2 rows — suits portrait frames */
}
@media (min-width: 768px) {
  .t-hero { grid-column: span 3 / span 3; grid-row: span 2 / span 2; }
  .t-bio  { grid-column: span 3 / span 3; }
}
@media (min-width: 1024px) {
  .t-hero { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
  .t-bio  { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
}
@media (min-width: 1280px) {
  .t-hero { grid-column: span 3 / span 3; grid-row: span 2 / span 2; }
  .t-bio  { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
}

/* ─── TILE ───────────────────────────────────────────────────── */
.tile {
  height: 100%; width: 100%; overflow: hidden;
  border-radius: 0.25rem;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  padding: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
a > .tile:hover, button.tile-btn:hover > .tile {
  transform: scale(1.02);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.tile-col { display: flex; flex-direction: column; justify-content: space-between; }

.bg-green  { background-color: hsl(var(--green)); }
.bg-yellow { background-color: hsl(var(--yellow)); }
.bg-red    { background-color: hsl(var(--red)); }
.bg-blue   { background-color: hsl(var(--ultramarine)); }

/* ─── TYPE ───────────────────────────────────────────────────── */
.heading {
  font-family: Lora, serif; font-weight: 400;
  font-size: 1.5rem; line-height: 2rem; margin-bottom: 1rem;
  text-wrap: pretty;
}
.heading:has(+ .subheading) { margin-bottom: 0; }

/* serif, and in the accent colour — this is the site's signature second line */
.subheading {
  font-family: Lora, serif; font-size: 1rem; line-height: 1.5rem; font-weight: 500;
  color: hsl(var(--secondary)); margin-bottom: 1rem;
}
@media (min-width: 1024px) { .subheading { font-size: 1.125rem; line-height: 1.75rem; } }
@media (min-width: 1760px) { .subheading { font-size: 1.25rem;  line-height: 1.75rem; } }

/* body copy inside a tile */
.tile p {
  font-family: Lora, serif; font-size: 1rem; line-height: 1.5rem;
  text-wrap: pretty;
}
.tile p + p { margin-top: .75rem; }

/* quiet metadata — locations, dates, supporting detail.
   Distinct from .subheading, which is the loud accent line. */
.muted {
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 400;
  letter-spacing: -0.04em; color: hsl(var(--muted-foreground));
  line-height: 1.6; margin-top: 6px;
}

/* small label above a value — "Organisers", "Image credits" */
.meta-label {
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.link {
  font-family: Inter, sans-serif; font-size: 1rem; line-height: 1.5rem;
  font-weight: 500; letter-spacing: -0.025em; color: hsl(var(--blue));
}
@media (min-width: 1760px) {
  .heading { font-size: 1.875rem; line-height: 2.25rem; }
  .link    { font-size: 1.25rem;  line-height: 1.75rem; }
}

.prose { font-family: Lora, serif; font-size: 1.5rem; line-height: 2rem; text-wrap: pretty; }
.prose + .prose { margin-top: 1.5rem; }
@media (min-width: 1760px) { .prose { font-size: 1.875rem; line-height: 2.25rem; } }

/* ─── ARROW ──────────────────────────────────────────────────── */
.arrow-icon {
  display: inline; vertical-align: middle; position: relative; top: -1px;
  height: 2rem; width: 2rem; transition: transform .3s;
}
a:hover .arrow-icon, button:hover .arrow-icon { transform: translateX(0.75rem); }
a:hover .arrow-circle, button:hover .arrow-circle { animation: circle-show .3s ease forwards; }
@keyframes circle-show { from { stroke-dashoffset: 95; } to { stroke-dashoffset: 0; } }

/* ─── TITLE TILE ─ every page opens with one ─────────────────── */
.hero-name {
  font-family: Lora, serif; font-weight: 500;
  font-size: clamp(38px, 6vw, 76px); line-height: 1.04; letter-spacing: -0.03em;
}
.hero-name em { font-style: italic; }
.hero-meta {
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: -0.05em; color: hsl(var(--muted-foreground));
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.hero-meta b { color: hsl(var(--yellow)); font-weight: 500; }

/* ─── TILE CONTENT PARTS ─────────────────────────────────────── */
.tile-role {
  font-family: Lora, serif; font-style: italic; font-size: 1.0625rem;
  color: hsl(var(--muted-foreground)); margin-top: 4px;
}
.tile-when {
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: -0.04em; color: hsl(var(--foreground));
}
.tile-dur {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 400;
  letter-spacing: -0.04em; color: hsl(var(--muted-foreground)); margin-top: 2px;
}
.award {
  display: inline-block; margin-top: 10px;
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: hsl(var(--yellow));
}

.clock-time {
  font-family: Lora, serif; font-size: 2.75rem; line-height: 1;
  font-weight: 500; letter-spacing: -0.02em;
}
.clock-label {
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: -0.05em; color: hsl(var(--muted-foreground));
}
.social-icon { width: 30px; height: 30px; fill: currentColor; }

/* ─── PHOTO TILES ─ real <img>, always greyscale ─────────────── */
.photo { position: relative; padding: 0; }
.photo img {
  position: absolute; inset: 0;
  height: 100%; width: 100%; object-fit: cover;
  object-position: center;
  filter: grayscale(1);
}
/* anchor the crop when the interesting part isn't in the middle */
.photo-bottom img { object-position: bottom; }
.photo-top    img { object-position: top; }
.photo-empty {
  display: flex; align-items: center; justify-content: center;
  font-family: Inter, sans-serif; font-size: 13px; letter-spacing: -0.04em;
  color: hsl(var(--muted-foreground));
  border: 1px dashed hsl(var(--muted-foreground) / .35);
}
/* a photo tile that opens the lightbox */
button.photo { border: none; cursor: pointer; overflow: hidden; }
button.photo:hover img { transform: scale(1.04); }
button.photo img { transition: transform .3s cubic-bezier(.4,0,.2,1); }

/* ─── LIGHTBOX ─ native <dialog> ─────────────────────────────── */
dialog.lightbox {
  border: none; padding: 0; border-radius: 0.25rem;
  background: transparent; max-width: 92vw; max-height: 92vh;
  /* the global `* { margin: 0 }` reset kills the UA's `margin: auto`,
     which is what centres a modal <dialog> — put it back explicitly. */
  margin: auto;
}
dialog.lightbox::backdrop { background: hsl(var(--background) / .92); }
dialog.lightbox[open] { animation: zoom .3s cubic-bezier(.34, 1.56, .64, 1); }
dialog.lightbox[open]::backdrop { animation: fade .2s ease-out; }
dialog.lightbox img {
  display: block; max-width: 92vw; max-height: 92vh;
  width: auto; height: auto; object-fit: contain; filter: grayscale(1);
}
dialog.lightbox:focus { outline: none; }
@keyframes zoom { from { transform: scale(.9); } to { transform: scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ─── UNDERLINE INPUTS ───────────────────────────────────────── */
.uline {
  display: block; width: 100%;
  font-family: Inter, sans-serif; font-size: 15px; letter-spacing: -0.03em;
  background: transparent; color: hsl(var(--card-foreground));
  border: none; border-bottom: 1px solid hsl(var(--blue) / .25);
  padding-bottom: 4px; margin-bottom: 12px;
  outline: none; transition: border-color .15s;
}
.uline::placeholder { color: hsl(var(--muted-foreground)); }
.uline:focus { border-bottom-color: hsl(var(--blue)); }
textarea.uline { resize: vertical; min-height: 56px; }
.honeypot { display: none; }

/* ─── SPACER TILES ─ keep the grid flush at wide breakpoints ─── */
.spacer     { display: none; }
.spacer-tile{ display: none; }
@media (min-width: 1024px) {
  .spacer      { display: block; }
  .spacer-tile { display: block; }
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
  max-width: 1248px; margin: 0 auto; padding: 48px 8px 16px;
  display: flex; flex-wrap: wrap-reverse; gap: 8px 16px; justify-content: space-between;
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 400;
  letter-spacing: -0.05em; color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) { footer { padding: 48px 16px 16px; } }
footer a { display: flex; align-items: center; gap: 8px; }
footer a:hover { color: hsl(var(--secondary)); }
footer svg { width: 1em; height: 1em; fill: hsl(var(--secondary)); flex-shrink: 0; }

/* desktop nav links collapse into the overlay menu below md */
.nav-links li.nav-item { display: none; }
@media (min-width: 768px) { .nav-links li.nav-item { display: block; } }