/* ═══════════════════════════════════════════════════════════
   Jathedar Santokh Singh — memorial record
   Aesthetic: archival letterpress. Ivory stock, iron-gall ink,
   dastaar indigo, leaf gold. Editorial didone display.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:      #f4efe4;
  --paper-deep: #ebe3d4;
  --ink:        #191614;
  --ink-soft:   #4a423a;
  --ink-faint:  #8a7f70;
  --indigo:     #1f2547;
  --indigo-lt:  #39406e;
  --gold:       #9c7a2e;
  --gold-lt:    #c9a349;
  --rule:       #cfc4ae;

  --measure: 34rem;
  --gut: clamp(1.25rem, 4vw, 4.5rem);

  --serif: "Newsreader", Georgia, serif;
  --display: "Bodoni Moda", "Newsreader", serif;
  --gurmukhi: "Noto Serif Gurmukhi", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--paper);
  background-image:
    radial-gradient(120% 80% at 12% -10%, #fbf7ee 0%, transparent 55%),
    radial-gradient(90% 60% at 100% 0%, #efe6d3 0%, transparent 60%);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.02rem, .55vw + .9rem, 1.19rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain ------------------------------------------------ */
.grain{
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9;
  opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background: var(--indigo); color: var(--paper); }

img{ max-width:100%; height:auto; display:block; }

a{ color: var(--indigo); text-underline-offset: .22em; text-decoration-thickness: .05em; }
a:hover{ color: var(--gold); }

/* ── masthead ──────────────────────────────────────────────── */
.masthead{
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem var(--gut);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(9px) saturate(1.1);
}
.masthead__mark{
  font-family: var(--gurmukhi);
  font-size: 1.35rem; color: var(--indigo); line-height:1;
}
.masthead__nav{
  display:flex; gap: clamp(.9rem, 2.4vw, 2.2rem);
  font-family: var(--display);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
}
.masthead__nav a{
  text-decoration:none; color: var(--ink-soft);
  position: relative; padding-bottom: 2px;
}
.masthead__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: var(--gold);
  transition: right .4s var(--ease);
}
.masthead__nav a:hover{ color: var(--ink); }
.masthead__nav a:hover::after{ right:0; }

/* ── shared ────────────────────────────────────────────────── */
main{ padding: 0 var(--gut); }
section{ max-width: 78rem; margin: 0 auto; }

.section-title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: .01em;
  margin: 0 0 clamp(2rem, 4vw, 3.4rem);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--rule);
  display:flex; align-items: baseline; gap: 1ch;
}
.section-title span{
  font-style: italic; color: var(--gold);
  font-size: .62em;
}

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3.5rem, 9vh, 8rem) 0 clamp(4rem, 10vh, 8rem);
  max-width: 78rem; margin: 0 auto;
}
.hero__type{ min-width:0; }

h1{ margin:0; }
.hero__rank{
  display:block;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  color: var(--ink-soft);
  letter-spacing: .02em;
  margin-bottom: -.1em;
}
.hero__name{
  display:block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.2rem, 10.5vw, 8.2rem);
  line-height: .84;
  letter-spacing: -.025em;
  color: var(--ink);
}
.hero__name em{
  display:block;
  font-weight: 400; font-style: italic;
  color: var(--indigo);
  padding-left: .06em;
}
.hero__gurmukhi{
  font-family: var(--gurmukhi);
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--indigo-lt);
  margin: 1.5rem 0 0;
  letter-spacing: .01em;
}
.hero__dates{
  display:flex; align-items:center; gap: 1rem;
  font-family: var(--display);
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.1rem 0 0;
}
.hero__dates .dash{
  flex: 0 1 5rem; height:1px; background: var(--gold-lt);
}
.hero__blurb{
  max-width: var(--measure);
  margin: 2rem 0 0;
  font-size: 1.08em;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding-left: 1.4rem;
}

.hero__plate{ margin:0; position: relative; }
.hero__plate img{
  width:100%;
  filter: saturate(.9) contrast(1.02);
  box-shadow:
    0 1px 0 var(--paper),
    0 2px 3px rgba(25,22,20,.10),
    0 18px 44px -14px rgba(25,22,20,.42);
}
.hero__plate::before{
  content:""; position:absolute; inset: -14px -14px 24px -14px;
  border: 1px solid var(--rule); z-index:-1;
}
figcaption{
  font-family: var(--display);
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: .85rem;
}
.pn{ color: var(--gold); margin-right: .7ch; }

/* ── life ──────────────────────────────────────────────────── */
.life{ padding: clamp(3rem,7vh,6rem) 0; }
.life__grid{
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.lede{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--ink);
  position: sticky; top: 5rem;
}
.life__body{ max-width: var(--measure); }
.life__body p{ margin: 0 0 1.35em; }
.life__body p:first-child::first-letter{
  float: left;
  font-family: var(--display);
  font-size: 3.9em; line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--indigo);
}
.life__body strong{ font-weight: 500; color: var(--ink); }
.figure{
  font-family: var(--display);
  color: var(--gold) !important;
  font-weight: 500;
  letter-spacing: .01em;
}

/* ── chronicle ─────────────────────────────────────────────── */
.chronicle{ padding: clamp(3rem,7vh,6rem) 0; }
.timeline{ list-style:none; margin:0; padding:0; }
.tl{
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: 1.7rem 0;
  border-top: 1px solid var(--rule);
  transition: background .5s var(--ease);
}
.tl:last-child{ border-bottom: 1px solid var(--rule); }
.tl:hover{ background: linear-gradient(90deg, rgba(31,37,71,.045), transparent 70%); }
.tl__year{
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--indigo);
  letter-spacing: -.02em;
}
.tl__year i{
  font-size: .5em; color: var(--ink-faint); font-style: italic;
  vertical-align: .48em; margin-left: -.06em;
}
.tl__body{ max-width: 40rem; }
.tl__body h3{
  margin: 0 0 .35em;
  font-family: var(--serif);
  font-weight: 500; font-size: 1.06em;
  letter-spacing: .005em;
}
.tl__body p{ margin:0; color: var(--ink-soft); font-size: .96em; }

/* ── plates ────────────────────────────────────────────────── */
.plates{ padding: clamp(3rem,7vh,6rem) 0; }
.plates__note{
  font-family: var(--display);
  font-size: .7rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: -1.8rem 0 2.6rem;
}
/* justified rows: each figure's width is proportional to its aspect
   ratio, so every image in a row lands on exactly the same height. */
.gallery{
  display: flex; flex-direction: column;
  gap: clamp(1.6rem, 3.4vw, 3.2rem);
}
.gal-row{
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: flex-start;
}
.gal{
  margin:0; cursor: pointer; position: relative;
  flex: var(--ar, 1) 1 0;
  min-width: 0;
}
.gal img{
  width:100%;
  filter: saturate(.86) contrast(1.03);
  transition: filter .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
  box-shadow: 0 2px 4px rgba(25,22,20,.09), 0 14px 30px -16px rgba(25,22,20,.35);
}
.gal:hover img{
  filter: saturate(1.02) contrast(1.03);
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(25,22,20,.10), 0 26px 52px -18px rgba(25,22,20,.45);
}
.gal figcaption{ transition: color .4s var(--ease); }
.gal:hover figcaption{ color: var(--ink); }

/* ── recordings ────────────────────────────────────────────────
   Deliberately subordinate to the plates: a narrow three-up row,
   capped well below the archive's scale. Nothing loads from
   YouTube until the reader actually clicks a still. */
.films{ padding: clamp(2rem,5vh,4rem) 0; }
.filmlist{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 30rem;
}
.film__btn{
  display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:none; position:relative; line-height:0;
}
.film__btn img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter: saturate(.72) contrast(1.02) brightness(.94);
  transition: filter .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 1px 3px rgba(25,22,20,.10), 0 8px 20px -12px rgba(25,22,20,.4);
}
.film__play{
  position:absolute; inset:0; display:grid; place-content:center;
}
.film__play::before{
  content:""; display:block;
  border-style: solid; border-width: .5rem 0 .5rem .85rem;
  border-color: transparent transparent transparent var(--paper);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  transition: transform .4s var(--ease);
}
.film__btn:hover img, .film__btn:focus-visible img{
  filter: saturate(.95) contrast(1.02) brightness(1);
}
.film__btn:hover .film__play::before{ transform: scale(1.18); }
.film__btn:focus-visible{ outline: 2px solid var(--indigo); outline-offset: 4px; }
.film__cap{
  font-family: var(--display);
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint); margin: .7rem 0 0; line-height: 1.5;
}
.film iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

@media (max-width: 620px){
  .filmlist{ grid-template-columns: 1fr; max-width: 22rem; }
}

/* ── sources ───────────────────────────────────────────────── */
.sources{ padding: clamp(3rem,7vh,6rem) 0 clamp(4rem,8vh,7rem); }
.srclist{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.srclist li{
  display:grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0,1fr) minmax(0, 20rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.srclist li:last-child{ border-bottom: 1px solid var(--rule); }
.src__k{
  font-family: var(--display);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); padding-top: .45em;
}
.srclist p{ margin:0; font-size: .96em; color: var(--ink-soft); }
.srclist a{
  font-size: .85em; word-break: break-word;
  text-decoration: none; border-bottom: 1px solid var(--rule);
  padding-bottom: .12em;
  transition: border-color .35s var(--ease);
}
.srclist a:hover{ border-color: var(--gold); }

/* ── colophon ──────────────────────────────────────────────── */
.colophon{
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: clamp(2.6rem,6vh,4.5rem) var(--gut);
  text-align: center;
}
.colophon p{ margin: 0 auto .6rem; max-width: 44rem; color: var(--ink-soft); }
.colophon__gur{
  font-family: var(--gurmukhi);
  color: var(--indigo) !important;
  font-size: 1.02rem;
  margin-bottom: 1.2rem !important;
}

/* ── lightbox ──────────────────────────────────────────────── */
.lightbox{
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-content: center; justify-items: center;
  gap: 1rem; padding: clamp(1.5rem, 5vh, 4rem);
  background: rgba(16,13,11,.965);
  backdrop-filter: blur(6px);
  animation: fade .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width: min(92vw, 1100px); max-height: 80vh;
  width:auto; object-fit: contain;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
}
.lightbox__cap{
  font-family: var(--display);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: #b9ac97; margin:0; text-align:center;
}
.lightbox__close{
  position: absolute; top: 1.1rem; right: 1.4rem;
  background: none; border: none; cursor: pointer;
  color: #cbbfa9; font-size: 2.4rem; line-height: 1;
  font-family: var(--serif);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover{ color: #fff; transform: rotate(90deg); }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

/* ── motion ────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform: translateY(18px);
  animation: rise .95s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
.tl.reveal, .gal.reveal{ animation: none; }
.tl.reveal.in, .gal.reveal.in{ animation: rise .9s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
  .gal:hover img{ transform:none; }
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap: 2.6rem; padding-top: 2.5rem; }
  .hero__plate{ order: -1; max-width: 26rem; }
  .hero__plate::before{ inset: -10px -10px 20px -10px; }
  .life__grid{ grid-template-columns: 1fr; }
  .lede{ position: static; }
  .srclist li{ grid-template-columns: 1fr; gap: .6rem; }
  .src__k{ padding-top:0; }
}
@media (max-width: 560px){
  .gal-row{ flex-direction: column; gap: 2rem; }
  .tl{ grid-template-columns: 1fr; gap: .5rem; }
  .masthead__nav{ font-size: .6rem; }
  .hero__dates{ flex-wrap: wrap; gap: .6rem; }
  .hero__dates .dash{ flex-basis: 2.5rem; }
}