/* ==========================================================================
   Maharashtra Mandal London Archive
   Shared stylesheet
   --------------------------------------------------------------------------
   Palette note: the base is a clean warm white, not parchment. Colour comes
   from the crimson and marigold accents, not from the background. The archive
   photographs are sepia and monochrome, and they read richer against a bright
   neutral than against a tinted one.
   ========================================================================== */

:root{
  /* base */
  --paper:#FCFAF6;
  --surface:#FFFFFF;
  --surface2:#F7F2E9;
  --surface3:#FBF7F0;

  /* ink */
  --ink:#1E1912;
  --ink-soft:#5B5243;
  --ink-faint:#8A8070;

  /* rules */
  --line:#E5DDCC;
  --line-soft:#F0EADD;

  /* accents */
  --crimson:#A8241B;
  --crimson-deep:#7C201A;
  --crimson-tint:rgba(168,36,27,.07);
  --marigold:#E39012;
  --marigold-deep:#C2740A;
  --marigold-tint:rgba(227,144,18,.12);
  --magenta:#7C2E63;

  /* type */
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --deva:"Nirmala UI","Noto Sans Devanagari","Mangal",sans-serif;

  --wrap:1180px;
  --shadow-card:0 1px 2px rgba(30,25,18,.04), 0 12px 28px -18px rgba(30,25,18,.28);
  --shadow-lift:0 2px 4px rgba(30,25,18,.05), 0 22px 40px -22px rgba(30,25,18,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--crimson)}
a:hover{color:var(--crimson-deep)}
h1,h2,h3,h4{font-weight:600;line-height:1.15;margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.narrow{max-width:820px}
.sans{font-family:var(--sans)}
.skip{position:absolute;left:-9999px;top:0;background:var(--crimson);color:#fff;
  font-family:var(--sans);font-size:14px;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(252,250,246,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand .mark{width:27px;height:31px;flex:0 0 auto}
.brand b{font-family:var(--serif);font-size:19px;letter-spacing:.2px;display:block}
.brand span{font-family:var(--sans);font-size:10.5px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-top:-1px}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:2px;font-family:var(--sans)}
.navlinks a{text-decoration:none;color:var(--ink-soft);font-size:14px;letter-spacing:.2px;
  padding:9px 13px;border-radius:4px;transition:.15s}
.navlinks a:hover{color:var(--ink);background:var(--surface2)}
.navlinks a.active{color:var(--crimson);font-weight:600}
.navlinks a.active::after{content:"";display:block;height:2px;background:var(--marigold);
  margin-top:4px;border-radius:2px}

/* ---------- hero ---------- */
.hero{text-align:center;padding:78px 0 34px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, var(--marigold-tint), transparent 70%);
}
.lamp{width:98px;height:120px;margin:0 auto 14px}
.flame{transform-origin:60px 46px;animation:flick 3.4s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scaleY(1) translateX(0)}
  40%{transform:scaleY(1.06) translateX(-.6px)}70%{transform:scaleY(.96) translateX(.5px)}}
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:4px;text-transform:uppercase;
  color:var(--marigold-deep);margin-bottom:16px;font-weight:600}
.hero h1{font-size:clamp(38px,6.4vw,70px);letter-spacing:-.6px;margin-bottom:16px}
.hero .lede{max-width:660px;margin:0 auto;font-size:clamp(18px,2.3vw,22.5px);color:var(--ink-soft)}
.hero .cust{max-width:610px;margin:24px auto 0;font-size:16.5px;color:var(--ink-soft)}
.hero .cust b{color:var(--ink);font-weight:600}
.cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap;font-family:var(--sans)}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);cursor:pointer;font-size:14.5px;letter-spacing:.2px;
  padding:13px 24px;border-radius:5px;border:1px solid var(--crimson);
  background:var(--crimson);color:#fff;transition:.16s;text-decoration:none;
  display:inline-block;line-height:1.3}
.btn:hover{background:var(--crimson-deep);border-color:var(--crimson-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--crimson)}
.btn.ghost:hover{background:var(--crimson-tint);color:var(--crimson-deep)}
.btn.gold{background:var(--marigold);border-color:var(--marigold);color:#2B1C02}
.btn.gold:hover{background:var(--marigold-deep);border-color:var(--marigold-deep);color:#2B1C02}
.mini{font-family:var(--sans);cursor:pointer;font-size:13px;padding:10px 15px;border-radius:5px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.mini:hover{border-color:var(--crimson);color:var(--crimson)}
.clearbtn{font-family:var(--sans);background:none;border:none;color:var(--crimson);cursor:pointer;
  font-size:13px;padding:10px 4px;text-decoration:underline}

/* ---------- verse ---------- */
.verse{text-align:center;padding:32px 0 14px;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);background:var(--surface3)}
.verse .dev{font-family:var(--deva);color:var(--magenta);font-size:clamp(19px,3vw,27px);line-height:1.7}
.verse .gloss{font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  letter-spacing:.2px;margin-top:10px;font-style:italic;max-width:680px;margin-inline:auto}

/* ---------- generic section ---------- */
.section{padding:70px 0}
.section.tight{padding:48px 0}
.section.alt{background:var(--surface3);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.kicker{font-family:var(--sans);font-size:11.5px;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--marigold-deep);margin-bottom:12px;display:flex;align-items:center;gap:10px;font-weight:600}
.kicker::before{content:"";width:22px;height:2px;background:var(--marigold);display:inline-block}
.section h2{font-size:clamp(28px,4vw,42px);margin-bottom:10px;letter-spacing:-.4px}
.section .sub{color:var(--ink-soft);max-width:660px;margin:0 0 38px}
.pagehead{padding:56px 0 8px}
.pagehead h1{font-size:clamp(32px,5vw,50px);letter-spacing:-.5px;margin-bottom:10px}
.pagehead .sub{color:var(--ink-soft);max-width:660px;margin:0}
.prose p{color:var(--ink-soft);margin:0 0 18px}
.prose p.first{font-size:20px;color:var(--ink)}

/* ---------- timeline ---------- */
.tl{display:grid;grid-template-columns:112px 1fr;gap:0 26px}
.tl .row{display:contents}
.tl .yr{font-family:var(--mono);color:var(--crimson);font-size:15px;padding-top:20px;
  text-align:right;letter-spacing:.4px}
.tl .body{border-left:2px solid var(--line);padding:20px 0 22px 28px;position:relative}
.tl .body::before{content:"";position:absolute;left:-7px;top:26px;width:12px;height:12px;
  border-radius:50%;background:var(--marigold);border:3px solid var(--paper);
  box-shadow:0 0 0 1.5px var(--marigold)}
.tl .row:last-child .body{border-left-color:transparent}
.tl h3{font-size:20.5px;margin-bottom:5px}
.tl p{margin:0;color:var(--ink-soft);font-size:16.5px}

/* ---------- tribute ---------- */
.tribute .grid2{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.cardframe{background:#fff;padding:14px;border:1px solid var(--line);
  box-shadow:var(--shadow-lift);transform:rotate(-1.4deg)}
.cardframe img{border:1px solid var(--line-soft)}
.tribute .lead{font-size:11.5px;letter-spacing:3px;text-transform:uppercase;font-weight:600;
  font-family:var(--sans);color:var(--marigold-deep);margin-bottom:14px}
.tribute h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:18px}
.tribute p{color:var(--ink-soft);margin:0 0 16px}
.ded{font-family:var(--serif);font-style:italic;font-size:20.5px;color:var(--ink);
  border-left:3px solid var(--marigold);padding-left:20px;margin-top:24px}

/* ---------- collection filters ---------- */
.filters{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:18px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  font-family:var(--sans);margin-bottom:14px;box-shadow:var(--shadow-card)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
.field input,.field select{font-family:var(--sans);font-size:14px;padding:10px 11px;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);
  color:var(--ink);min-width:152px}
.field.search input{min-width:240px}
.field input:focus,.field select:focus{outline:2px solid var(--crimson);outline-offset:1px;
  border-color:var(--crimson)}
.resultline{font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin:8px 2px 24px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chipfilter{font-family:var(--sans);font-size:12px;border:1px solid var(--crimson);
  color:var(--crimson);background:var(--crimson-tint);border-radius:16px;
  padding:4px 10px 4px 12px;cursor:pointer}
.chipfilter b{margin-left:6px;font-weight:700}

/* ---------- collection layout ----------
   The legend sits beside the collection rather than above it, so the codes
   stay in view while browsing instead of scrolling away. */
.collection-layout{display:grid;grid-template-columns:248px 1fr;gap:32px;align-items:start}
/* min-width:0 again: without it a scrolling child sizes its grid column to
   its full content width instead of scrolling inside it. */
.collection-layout > *{min-width:0}
.legend-rail,.rail-card,.legend-list{min-width:0;max-width:100%}
.legend-rail{position:sticky;top:88px}
.rail-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:18px 16px;box-shadow:var(--shadow-card)}
.rail-card h3{font-family:var(--sans);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--marigold-deep);margin-bottom:8px}
.rail-card > p{font-family:var(--sans);font-size:12.5px;color:var(--ink-faint);
  line-height:1.5;margin:0 0 14px}

.legend-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.legend-list li{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
  padding:7px 8px;border-radius:6px;cursor:pointer;transition:.12s;
  font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.legend-list li:hover{background:var(--marigold-tint);color:var(--ink)}
.legend-list li.on{background:var(--crimson-tint);color:var(--crimson)}
.legend-list li.on .code{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.legend-list .count{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.legend-list li.on .count{color:var(--crimson)}
.legend-list .lbl{line-height:1.3}
.rail-clear{width:100%;margin-top:12px;font-family:var(--sans);font-size:12.5px;
  padding:8px;border-radius:6px;border:1px solid var(--crimson);
  background:var(--crimson-tint);color:var(--crimson);cursor:pointer}
.rail-clear:hover{background:var(--crimson);color:#fff}

@media (max-width:980px){
  .collection-layout{grid-template-columns:1fr;gap:22px}
  .legend-rail{position:static}
  /* horizontal row of codes on a narrow screen, so it costs no vertical space */
  .legend-list{grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;gap:8px;padding-bottom:4px}
  .legend-list li{grid-template-columns:auto auto;border:1px solid var(--line-soft)}
  .legend-list .lbl{display:none}
  .rail-card > p{margin-bottom:10px}
}

/* ---------- collection grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);text-align:left;font:inherit;color:inherit;padding:0}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--marigold)}
.card:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.card .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--surface2);position:relative;
  border-bottom:1px solid var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.card .tag-type{position:absolute;top:10px;left:10px;font-family:var(--sans);font-size:10px;
  letter-spacing:1.2px;text-transform:uppercase;background:rgba(30,25,18,.82);color:#fff;
  padding:4px 9px;border-radius:3px}
.card .cbody{padding:17px 18px 19px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:20px;line-height:1.24}
.card .meta{font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.2px}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.tagchip{font-family:var(--sans);font-size:11px;color:var(--ink-soft);background:var(--surface2);
  border:1px solid var(--line-soft);border-radius:14px;padding:3px 10px}
.viewhint{font-family:var(--sans);font-size:11.5px;letter-spacing:.4px;color:var(--crimson);
  display:flex;align-items:center;gap:6px}
.empty{font-family:var(--sans);color:var(--ink-soft);text-align:center;padding:64px 0;
  border:1px dashed var(--line);border-radius:10px;background:var(--surface)}

/* contributed items are visually distinguished from the Navathe collection */
.card.contributed{border-color:rgba(124,46,99,.35)}
.card.contributed:hover{border-color:var(--magenta)}
.provflag{position:absolute;top:10px;right:10px;font-family:var(--sans);font-size:9.5px;
  letter-spacing:1px;text-transform:uppercase;background:var(--magenta);color:#fff;
  padding:4px 9px;border-radius:3px}

/* ---------- viewer modal ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(24,19,12,.8);
  display:none;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(4px)}
.modal.on{display:flex;animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* grid-template-rows:minmax(0,1fr) plus min-height:0 on the children is what
   keeps this box at 92vh. Without it the row sizes to the catalogue text,
   the panel grows past the modal, and the page image is centred in a box
   taller than the window — so it appears shoved to the bottom and clipped. */
.viewer{background:var(--surface);border-radius:12px;max-width:1240px;width:100%;
  max-height:92vh;display:grid;grid-template-columns:1.6fr 1fr;
  grid-template-rows:minmax(0,1fr);overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);position:relative}
/* min-width:0 matters here. Grid and flex items default to min-width:auto,
   so a filmstrip of 145 thumbnails would otherwise force the whole viewer
   open to the strip's full scroll width instead of letting it scroll. */
.viewer > *{min-width:0;min-height:0}
.leftcol{background:#231D14;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.stage{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:22px;min-height:300px;overflow:hidden;touch-action:pan-y}
.stage img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
  box-shadow:0 14px 36px -12px rgba(0,0,0,.75);transition:opacity .12s}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(20,16,10,.55);color:#fff;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:.15s;padding:0}
.arrow:hover{background:var(--crimson)}
.arrow.left{left:12px}
.arrow.right{right:12px}
.arrow[hidden]{display:none}
.pglabel{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:var(--sans);
  font-size:11px;letter-spacing:.4px;color:#fff;background:rgba(20,16,10,.66);
  padding:5px 13px;border-radius:20px}
.filmstrip{display:flex;gap:8px;padding:10px 12px;background:rgba(10,8,4,.55);min-width:0;
  border-top:1px solid rgba(255,255,255,.07);overflow-x:auto;flex:0 0 auto}
.filmstrip[hidden]{display:none}
.filmthumb{flex:0 0 auto;width:56px;height:72px;border:2px solid transparent;border-radius:4px;
  overflow:hidden;cursor:pointer;background:#000;opacity:.55;transition:.15s;padding:0}
.filmthumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.filmthumb:hover{opacity:.85}
.filmthumb.active{border-color:var(--marigold);opacity:1}
.voflag{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--sans);font-size:10px;
  letter-spacing:1px;text-transform:uppercase;background:rgba(168,36,27,.92);color:#fff;
  padding:4px 10px;border-radius:3px}
.meta-panel{padding:28px 28px 32px;overflow-y:auto;overflow-x:hidden;min-width:0;font-family:var(--sans)}
.meta-panel .acc{font-family:var(--mono);font-size:12px;color:var(--crimson);letter-spacing:.8px}
.meta-panel h2{font-family:var(--serif);font-size:26px;margin:7px 0 20px;line-height:1.2}
.mrow{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px 0;
  border-top:1px solid var(--line-soft);font-size:14px}
.mrow dt{color:var(--ink-faint);text-transform:uppercase;font-size:10.5px;letter-spacing:1.2px;
  padding-top:3px;font-weight:600}
.mrow dd{margin:0;color:var(--ink)}
.mrow.desc dd{line-height:1.55}
.meta-panel .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
/* ---------- comments in the viewer ----------
   Moderated: nothing here appears until the archive keeper has read it. */
.comments{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.chead{font-family:var(--sans);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--marigold-deep);margin:0 0 14px}
.clist{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.clist li{background:var(--surface3);border:1px solid var(--line-soft);border-radius:8px;padding:12px 14px}
.cwho{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cpromoted{font-weight:500;font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  background:var(--marigold-tint);color:var(--marigold-deep);
  border:1px solid rgba(227,144,18,.4);border-radius:10px;padding:1px 7px}
.clist .cbody{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.cempty{font-family:var(--sans);font-size:13px;color:var(--ink-faint);margin:0 0 18px}

.cform{background:var(--marigold-tint);border:1px solid rgba(227,144,18,.4);
  border-radius:8px;padding:16px 18px;font-family:var(--sans)}
.cform b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.chint{font-size:12.5px;color:#6B4A07;line-height:1.5;margin:0 0 12px}
.ctwo{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.cform input,.cform textarea{font-family:var(--sans);font-size:13.5px;padding:9px 11px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);width:100%}
.cform textarea{min-height:76px;resize:vertical;line-height:1.5}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--crimson);outline-offset:1px;
  border-color:var(--crimson)}
.crow{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
/* the spam trap: off screen for people, visible to a bot reading the markup */
.ctrap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cthanks,.cthanks-block{font-family:var(--sans);font-size:13.5px;line-height:1.6;
  background:var(--marigold-tint);border:1px solid rgba(227,144,18,.4);
  border-radius:8px;padding:16px 18px;color:#6B4A07}
.cthanks-block h3{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:8px}
.cnote{margin-left:auto;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--marigold-deep);background:var(--marigold-tint);border-radius:10px;padding:2px 8px}
@media (max-width:560px){ .ctwo{grid-template-columns:1fr} }

.closeX{position:absolute;top:14px;right:16px;z-index:5;background:rgba(20,16,10,.7);
  color:#fff;border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px}
.closeX:hover{background:var(--crimson)}

/* ---------- notices ---------- */
.notice{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--marigold);
  border-radius:8px;padding:26px 28px;font-family:var(--sans);font-size:15px;
  color:var(--ink-soft);line-height:1.62;box-shadow:var(--shadow-card)}
.notice h3{font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--marigold-deep);margin-bottom:14px}
.notice p{margin:0 0 14px}
.notice p:last-child{margin-bottom:0}

/* a placeholder the client is meant to notice and replace */
.placeholder{border:2px dashed var(--marigold);background:var(--marigold-tint);border-radius:8px;
  padding:22px 24px;font-family:var(--sans);font-size:14.5px;color:#6B4A07;line-height:1.6}
.placeholder .ph-tag{display:inline-block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:700;background:var(--marigold-deep);color:#fff;padding:3px 9px;border-radius:3px;
  margin-bottom:12px}
.placeholder p{margin:0 0 10px}
.placeholder p:last-child{margin-bottom:0}
.placeholder em{color:#8A6009}

/* ---------- contribute ---------- */
.contrib-band{background:linear-gradient(170deg,#FFF9EE,#FDF3E2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contrib-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.steps{display:grid;gap:18px;font-family:var(--sans);margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;
  background:var(--crimson);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600}
/* the number occupies column 1; both text children belong in column 2 */
.steps li > b,.steps li > span{grid-column:2}
.steps b{display:block;font-size:16px;color:var(--ink);font-weight:600;margin-bottom:2px}
.steps span{display:block;font-size:14.5px;color:var(--ink-soft);line-height:1.55}

/* ---------- forms ---------- */
.form{font-family:var(--sans)}
.form .fld{margin-bottom:17px;display:flex;flex-direction:column;gap:6px}
.form label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
.form input,.form select,.form textarea{font-family:var(--sans);font-size:14.5px;padding:11px 13px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:100%}
.form textarea{min-height:92px;resize:vertical;line-height:1.55}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--crimson);
  outline-offset:1px;border-color:var(--crimson)}
.form .hint{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card-panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:28px;box-shadow:var(--shadow-card)}
.submitrow{display:flex;gap:14px;align-items:center;margin-top:8px;flex-wrap:wrap}
.toast{font-family:var(--sans);font-size:13.5px;color:var(--crimson-deep)}
.dropzone{border:2px dashed var(--line);border-radius:8px;padding:26px;text-align:center;
  font-family:var(--sans);font-size:14px;color:var(--ink-soft);background:var(--surface3)}
.dropzone input{margin:12px auto 0;max-width:300px}

/* ---------- aside / tips ---------- */
.aside-note{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);line-height:1.58;
  background:var(--surface3);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.aside-note h4{font-family:var(--sans);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--marigold-deep);margin:0 0 11px}
.aside-note ul{margin:0;padding-left:18px}
.aside-note li{margin-bottom:8px}
.aside-note li:last-child{margin-bottom:0}

/* ---------- admin ---------- */
.demobar{background:var(--marigold-tint);border:1px solid var(--marigold);border-radius:8px;
  padding:15px 18px;font-family:var(--sans);font-size:14px;color:#6B4A07;margin-bottom:32px;
  display:flex;gap:12px;align-items:flex-start}
.demobar b{color:#4A3305}
.admin-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
.tagpick{display:flex;flex-wrap:wrap;gap:8px;padding:11px;border:1px solid var(--line);
  border-radius:6px;background:var(--surface)}
.tagtoggle{font-family:var(--sans);font-size:13px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);border-radius:16px;padding:5px 12px;
  cursor:pointer;user-select:none}
.tagtoggle.sel{background:var(--crimson);border-color:var(--crimson);color:#fff}
.addtag{display:flex;gap:8px;margin-top:10px}
.addtag input{flex:1}
.previewbox{border:1px dashed var(--line);border-radius:8px;padding:15px;background:var(--surface3);
  text-align:center;font-family:var(--sans);color:var(--ink-soft);font-size:13px}
.previewbox img{margin:0 auto 9px;max-height:210px;border:1px solid var(--line)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:22px;font-family:var(--sans);box-shadow:var(--shadow-card)}
.contact-card h4{font-family:var(--sans);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--marigold-deep);margin:0 0 10px}
.contact-card a{font-size:15.5px;text-decoration:none;word-break:break-word}
.contact-card a:hover{text-decoration:underline}
.contact-card p{margin:8px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:48px 0 56px;font-family:var(--sans);
  color:var(--ink-soft);font-size:14px;background:var(--surface3)}
.foot .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot b{color:var(--ink);font-family:var(--serif);font-size:16.5px}
.foot p{margin:9px 0 0;line-height:1.6}
.foot .fine{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-faint);line-height:1.65}
.foot .fine a{color:var(--crimson)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .tribute .grid2{grid-template-columns:1fr;gap:36px}
  .contrib-grid{grid-template-columns:1fr;gap:34px}
  .cardframe{max-width:370px;margin:0 auto}
  .admin-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
  body{font-size:17px}
  .viewer{grid-template-columns:1fr;grid-template-rows:auto auto;max-height:94vh;overflow-y:auto}
  .meta-panel{overflow-y:visible}
  .stage{min-height:230px}
  .stage img{max-height:44vh}
  .arrow{width:36px;height:36px;font-size:19px}
  .filmthumb{width:48px;height:60px}
  .section{padding:56px 0}
  .nav .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .navlinks{margin-left:0;width:100%;overflow-x:auto;gap:0}
  .navlinks a{padding:8px 10px;font-size:13.5px;white-space:nowrap}
}
@media (max-width:560px){
  .tl{grid-template-columns:62px 1fr;gap:0 14px}
  .tl .yr{font-size:13px}
  .tl .body{padding-left:20px}
  .brand span{display:none}
  .two{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr;gap:22px}
  .hero{padding:52px 0 26px}
  .wrap{padding:0 18px}
  .card-panel{padding:20px}
  .legend td,.legend th{padding:8px 8px}
  .legend td.note{display:none}
  .legend th:last-child{display:none}
  /* the filter fields carry min-widths that do not fit a narrow phone */
  .filters{flex-direction:column;align-items:stretch}
  .field{width:100%}
  .field input,.field select,.field.search input{min-width:0;width:100%}
  .clearbtn{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto;transition:none !important}
}

/* ---------- print: documents are view-only ---------- */
@media print{
  body *{visibility:hidden}
  body::after{
    content:"This archive is published for viewing on the website. Printing is not enabled. For enquiries please contact the archive keeper.";
    visibility:visible;position:fixed;inset:0;padding:60px;font-family:serif;font-size:16px}
}