/* ============================================================
   base.css — shared styles for every page
   Page-specific styles live in each page's own <style> block.
   Each page sets its accent once, e.g.  :root { --accent: var(--jacaranda); }
   (default accent is --gulmohar, used by the home page)
   ============================================================ */

/* ── Fonts ── */
@font-face { font-family: 'IoskeleyMono'; src: url('../fonts/IoskeleyMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IoskeleyMono'; src: url('../fonts/IoskeleyMono-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IoskeleyMono'; src: url('../fonts/IoskeleyMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IoskeleyMono'; src: url('../fonts/IoskeleyMono-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }

/* ── Color tokens ── */
:root {
  --cream:      #F1F3EE; /* sage — was #F7F3ED */
  --cream-dark: #E4E8E0; /* was #EDE7DC */
  --ink:        #1E1B16;
  --ink-mid:    #4A4540;
  --ink-soft:   #7A7268;
  --gulmohar:   #C2302A;
  --jacaranda:  #7B5EA7;
  --marigold:   #C8820A;
  --lotus:      #C2445A;
  --border:     rgba(30,27,22,0.12);
  --border-mid: rgba(30,27,22,0.22);
  --accent:     var(--gulmohar);
  --font-mono:  'IBM Plex Mono', monospace; /* was 'IoskeleyMono', monospace */

  /* Widths — three on purpose: prose, page frame, and wide media. */
  --measure:   46rem;   /* prose: ~95 chars/line in Lato at 1.05rem body text (was 42rem). rem, not ch, so edges align across fonts */
  --container: calc(var(--measure) + 2 * var(--space-5)); /* page frame = measure + gutters, so nav, rules and text share one edge (800px) */
  --wide:      1100px;  /* galleries, map */

  /* Spacing scale — use these steps; space within a group < space between groups. */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem;
  --space-5: 2rem;    --space-6: 3rem;   --space-7: 4rem; --space-8: 6rem;
}
html[data-theme="dark"] {
  --cream:      #14110D;
  --cream-dark: #211C16;
  --ink:        #ECE5D8;
  --ink-mid:    #B5ADA0;
  --ink-soft:   #8B8377;
  --gulmohar:   #E2554B;
  --jacaranda:  #A98BCB;
  --marigold:   #E0A53A;
  --lotus:      #DC6E80;
  --border:     rgba(247,243,237,0.12);
  --border-mid: rgba(247,243,237,0.24);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; transition: background-color 0.25s ease, color 0.25s ease; }
body {
  background: var(--cream); color: var(--ink);
  font-family: 'Lato', sans-serif; font-weight: 400;
  font-size: 16px; line-height: 1.75; overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}
h1, h2, h3, h4 { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; line-height: 1.2; }
a { color: var(--gulmohar); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
a:hover { border-color: var(--gulmohar); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }

/* ── Theme toggle ── */
.nav-right { display: flex; align-items: center; gap: var(--space-4); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 4px; margin: 0; color: var(--ink-mid); line-height: 0; transition: color 0.2s ease; align-self: center; }
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Nav ── */
nav { position: sticky; top: 0; z-index: 100; background: var(--cream); padding: var(--space-3) 0; }
nav .container { display: flex; align-items: baseline; justify-content: space-between; }
/* Wordmark: the name as a brand mark (nav logo + home hero). The only mono headline — other headings stay Garamond. */
.wordmark, nav .logo { font-family: var(--font-mono); font-weight: 500; text-transform: lowercase; }
nav .logo { font-size: 1rem; letter-spacing: 0.06em; color: var(--accent); border: none; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
nav .logo.visible { opacity: 1; pointer-events: auto; }
nav .logo:hover { border: none; opacity: 0.7; }
nav ul { list-style: none; display: flex; gap: var(--space-5); }
nav ul a { position: relative; font-family: var(--font-mono); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--ink-mid); border: none; text-transform: lowercase; }
nav ul a:hover { border: none; }
nav ul a[href$="index.html"]:hover, nav ul a[href$="index.html"].active { color: var(--gulmohar); }
nav ul a[href$="projects.html"]:hover, nav ul a[href$="projects.html"].active { color: var(--jacaranda); }
nav ul a[href$="writing.html"]:hover, nav ul a[href$="writing.html"].active { color: var(--marigold); }
nav ul a[href$="photography.html"]:hover, nav ul a[href$="photography.html"].active { color: var(--lotus); }
/* Hand-drawn underline that draws itself in (colour follows the link's accent
   via currentColor). The <svg.nav-stroke> is injected by js/site.js. */
.nav-stroke { position: absolute; left: 0; bottom: -5px; width: 100%; height: 7px; overflow: visible; pointer-events: none; }
.nav-stroke path {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.45s ease;
}
nav ul a:hover .nav-stroke path,
nav ul a.active .nav-stroke path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .nav-stroke path { transition: none; }
}
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px 0; align-self: center; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink-mid); border-radius: 1px; }

/* ── Footer ── */
footer { padding: var(--space-5) 0 var(--space-6); margin-top: var(--space-7); }
/* two rows: socials, then emails — side by side they don't fit the frame */
footer .inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
footer .social-links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
footer .social-links a { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-mid); border: none; }
footer .social-links a:hover { color: var(--gulmohar); border: none; }
footer .social-links svg { fill: currentColor; flex-shrink: 0; }
footer .emails { display: flex; flex-wrap: wrap; gap: 0.2rem var(--space-4); }
footer .email { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }

/* ── Entrance animation ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.6s ease both; }
.d1 { animation-delay: 0.08s; } .d2 { animation-delay: 0.18s; } .d3 { animation-delay: 0.28s; }

/* Gloss: a word with a small note on hover / keyboard focus / tap, marked by a dashed underline.
   <span class="gloss" tabindex="0">word<span class="gloss-tip" role="tooltip">note</span></span> */
.gloss { position: relative; border-bottom: 1px dashed currentColor; cursor: help; outline: none; }
.gloss:focus-visible { outline: 1px dotted var(--ink-soft); outline-offset: 3px; }
.gloss-tip { position: absolute; left: 50%; bottom: calc(100% + 0.45rem); transform: translate(-50%, 4px); z-index: 10;
  white-space: nowrap; padding: 0.35rem 0.6rem; border-radius: 3px; background: var(--ink); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; line-height: 1.4;
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; }
.gloss-tip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.gloss:hover .gloss-tip, .gloss:focus .gloss-tip { opacity: 1; transform: translate(-50%, 0); }
/* Gujarati script: Mukta Vaani (Ek Type) matches Lato's weight and x-height; loaded per page, subset to the letters used */
:lang(gu) { font-family: 'Mukta Vaani', 'Noto Sans Gujarati', sans-serif; }

/* ── Shared responsive: nav + footer ── */
@media (max-width: 540px) {
  .nav-toggle { display: flex; }
  nav ul { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-5); gap: var(--space-3); z-index: 200; }
  nav ul.open { display: flex; }
  footer .inner { align-items: center; }
  footer .social-links, footer .emails { justify-content: center; }
}

/* ============================================================
   Justified photo gallery (generated by build.js)
   Each item carries its own aspect ratio in --ar (width / height).
   Within a row, items grow in proportion to --ar, so they all
   settle to the same height with no cropping, and reflow on resize.
   ============================================================ */
.series-label { padding: var(--space-6) var(--space-5) var(--space-3); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--ink-soft); }

.pgrid { display: flex; flex-wrap: wrap; gap: 2px; }
.pgrid__item {
  --row-h: 240px;
  position: relative;
  flex: var(--ar) 1 calc(var(--ar) * var(--row-h));
  aspect-ratio: var(--ar);
  min-width: 0;
  overflow: hidden;
  background: var(--cream-dark);
  border: none;
  cursor: pointer;
}
.pgrid__item:hover { border: none; }
.pgrid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, filter 0.4s ease; }
.pgrid__item:hover img { transform: scale(1.04); filter: brightness(0.7); }
/* The last (incomplete) row keeps photos at natural height instead of stretching. */
.pgrid::after { content: ''; flex-grow: 999999; }

.photo-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.pgrid__item:hover .photo-overlay { opacity: 1; }
.photo-overlay h3 { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 1.35rem; color: #F7F3ED; margin-bottom: 0.2rem; line-height: 1.2; }
.photo-overlay .meta { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; color: rgba(247,243,237,0.65); }

/* Lightbox */
.lb { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(20,18,14,0.96); align-items: center; justify-content: center; cursor: zoom-out; }
.lb.open { display: flex; }
.lb img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.lb-close { position: absolute; top: 1.2rem; right: 1.5rem; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(247,243,237,0.5); cursor: pointer; background: none; border: none; letter-spacing: 0.06em; }
.lb-close:hover { color: rgba(247,243,237,0.9); }

@media (max-width: 540px) {
  .pgrid__item { --row-h: 180px; }
}