/* The Muraqqa: shared foundations for Authentic Kahaniyan and Dushyant Arora.
   Colours live in each site's tokens.css; everything here reads the variables. */

@font-face{font-family:"Zodiak";src:url(../fonts/Zodiak-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Zodiak";src:url(../fonts/Zodiak-VariableItalic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/NewsreaderText-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/NewsreaderText-VariableItalic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader Display";src:url(../fonts/NewsreaderDisplay-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Newsreader Display";src:url(../fonts/NewsreaderDisplay-VariableItalic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Switzer";src:url(../fonts/Switzer-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Tiro Devanagari Hindi";src:url(../fonts/TiroDevanagariHindi-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Gulzar";src:url(../fonts/Gulzar-Urdu.woff2) format("woff2");font-display:swap}

:root{
  /* Viewport units: the small viewport (toolbars showing) is stable while phones scroll, so layouts use it.
     Browsers before Safari 15.4 / Chrome 108 fall back to vh. dvh is kept for overlays only. */
  --svh:1vh; --lvh:1vh; --dvh:1vh;
  --s1:4px; --s2:8px; --s3:12px;
  --s4:clamp(16px,.9vw + 12px,20px); --s5:clamp(24px,1.1vw + 20px,36px);
  --s6:clamp(40px,2.2vw + 32px,64px); --s7:clamp(64px,4.4vw + 48px,112px); --s8:clamp(96px,8.9vw + 64px,192px);
  --margin:max(clamp(16px,4.4vw,72px),env(safe-area-inset-left),env(safe-area-inset-right)); --g:clamp(12px,1.7vw,28px); --max:1680px;
  --paper-ease:cubic-bezier(.22,.7,.18,1); --settle:cubic-bezier(.3,1.4,.5,1); --turn:cubic-bezier(.65,0,.35,1);
  --bar-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(17px,.2vw + 16.2px,19px)/1.55 var(--read);
  font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-variant-numeric:oldstyle-nums proportional-nums;transition:background-color .6s var(--paper-ease),color .6s var(--paper-ease)}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.hi{font-family:"Tiro Devanagari Hindi",var(--read);font-weight:400}
.ur{font-family:"Gulzar",var(--read);font-weight:400;line-height:1.9}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--paper);font:560 12px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- Type roles ---------- */
.label{font:560 11px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:lining-nums tabular-nums}
.kicker{display:flex;align-items:center;gap:12px;font:560 11px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:28px;height:1px;background:currentColor}
.display{font:var(--display-wt) clamp(52px,7.4vw,140px)/.96 var(--display);letter-spacing:-.025em;text-wrap:balance}
.h2{font:var(--display-wt) clamp(36px,4.4vw,80px)/1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.h3{font:var(--display-wt) clamp(24px,1.6vw + 14px,36px)/1.1 var(--display);letter-spacing:-.012em;text-wrap:balance}
.lead{font:300 clamp(21px,1vw + 16px,30px)/1.32 var(--read-d);letter-spacing:-.005em;text-wrap:pretty;max-width:34ch}
.body{max-width:62ch}
.body p+p{margin-top:1em}
.note{font-size:15px;line-height:1.5;color:var(--ink-2)}
em,i{font-style:italic}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
@media (max-width:899px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:599px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.section{padding-block:var(--s7)}
.section + .section{padding-top:0}
.rule-top{border-top:1px solid var(--rule);padding-top:var(--s5)}

/* ---------- The hashiya: a fixed album margin around the window ---------- */
@supports (height:1svh){:root{--svh:1svh;--lvh:1lvh;--dvh:1dvh}}
.hashiya{position:fixed;inset:0;pointer-events:none;z-index:60}
.hashiya::before{content:"";position:absolute;inset:7px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 3px var(--paper),0 0 0 4px color-mix(in srgb,var(--gold) 55%,transparent)}
@media (max-width:699px){.hashiya{display:none}}

/* ---------- Header bar ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:var(--bar-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid transparent;transition:border-color .4s,transform .5s var(--paper-ease),background-color .6s}
.bar.scrolled{border-bottom-color:var(--rule)}
.bar.tucked{transform:translateY(-100%)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--g)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand svg{flex:none}
.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav a.navlink{position:relative;font:560 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-block:14px;transition:color .24s}
.nav a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .42s var(--paper-ease)}
.nav a.navlink:hover,.nav a.navlink[aria-current="page"]{color:var(--ink)}
.nav a.navlink:hover::after,.nav a.navlink[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none}
@media (max-width:899px){
  .nav .navlink,.nav .btn{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;font:560 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase}
  .menu-btn i{display:grid;gap:5px;width:20px}
  .menu-btn i::before,.menu-btn i::after{content:"";height:1px;background:currentColor;transition:transform .4s var(--paper-ease)}
  .menu-btn[aria-expanded="true"] i::before{transform:translateY(3px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] i::after{transform:translateY(-3px) rotate(-45deg)}
}
.drawer-nav{position:fixed;inset:0;z-index:45;overscroll-behavior:contain;overflow-y:auto;background:var(--paper);padding:calc(var(--bar-h) + var(--s6)) var(--margin) var(--s6);display:flex;flex-direction:column;gap:var(--s5);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--turn);visibility:hidden}
.drawer-nav.open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer-nav > a{font:var(--display-wt) clamp(36px,9vw,56px)/1.05 var(--display);letter-spacing:-.02em;text-decoration:none}
.drawer-nav > a[aria-current]{color:var(--accent)}
.drawer-nav .foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:560 11px/1.4 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.drawer-nav .foot a{color:var(--ink);text-transform:none;letter-spacing:.02em;font:500 14px/1.3 var(--label)}
.drawer-nav > a small{display:block;font:560 11px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.drawer-nav .foot{margin-top:auto}

/* ---------- Day / Night: one switch, same size in both states ---------- */
.switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;width:124px;height:34px;padding:3px;border-radius:999px;border:1px solid var(--rule);background:var(--folio);cursor:pointer;flex:none}
.switch-thumb{position:absolute;top:3px;left:3px;width:58px;height:26px;border-radius:999px;background:var(--ink);transition:transform .6s var(--turn)}
.switch[aria-checked="true"] .switch-thumb{transform:translateX(58px)}
.switch-opt{position:relative;z-index:1;text-align:center;font:600 10px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color .6s var(--turn)}
.switch[aria-checked="false"] .o-day,.switch[aria-checked="true"] .o-night{color:var(--paper)}
.switch:focus-visible{outline-offset:2px}
@media (max-width:420px){.switch{width:104px}.switch-thumb{width:48px}.switch[aria-checked="true"] .switch-thumb{transform:translateX(48px)}}

/* ---------- Buttons: museum labels you can press ---------- */
.btn{--b:var(--ink);position:relative;display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 20px 0 22px;border:1px solid var(--b);background:transparent;color:var(--ink);
  font:600 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .42s var(--paper-ease),border-color .42s,transform .16s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--b);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--paper-ease)}
.btn::after{content:"";position:absolute;inset:3px;border:1px solid currentColor;opacity:.0;transition:opacity .42s}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:hover::after{opacity:.35}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .arr{display:block;width:18px;height:10px;transition:transform .42s var(--paper-ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--lac{--b:var(--accent);background:var(--accent);color:var(--accent-ink)}
.btn--lac::before{background:var(--ink)}
.btn--lac:hover{color:var(--paper);border-color:var(--ink)}
.link{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.link span{line-height:1.45;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:5px;transition:background-size .5s var(--paper-ease)}
.link:hover span{background-size:0 1px;background-position:100% 100%}
.link .arr{width:16px;height:9px;transition:transform .42s var(--paper-ease)}
.link:hover .arr{transform:translateX(4px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* ---------- Plates: a collage with its museum label ---------- */
.plate{position:relative;display:grid;gap:var(--s3)}
.plate-art{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.plate-art img{width:100%;height:100%;object-fit:contain}
.tomb{display:grid;gap:3px;max-width:360px;padding:12px 14px 11px;background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 14px 26px -22px rgba(var(--shadow),.5)}
.tomb b{font:500 16px/1.25 var(--display);letter-spacing:-.005em}
.tomb i{font:italic 400 13.5px/1.42 var(--read);color:var(--ink-2)}
.tomb small{font:560 10px/1.4 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.tomb a{color:var(--accent);text-decoration:none}
.tomb a:hover{text-decoration:underline}
.plate--right .tomb{justify-self:end}
/* Phones: the museum label folds into a small button on the plate; tapping it lays the label over the picture.
   Closed, it stays readable to screen readers. */
.tomb-btn{display:none}
@media (max-width:899px){
  .plate .tomb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;box-shadow:none}
  .plate.tomb-open .tomb{left:10px;right:10px;bottom:10px;width:auto;height:auto;max-width:none;margin:0;padding:12px 48px 12px 14px;overflow:visible;clip:auto;white-space:normal;z-index:6;
    box-shadow:0 0 0 1px var(--rule),0 18px 36px -18px rgba(var(--shadow),.75);animation:tomb-in .4s var(--settle)}
  .tomb-btn{position:absolute;right:4px;bottom:4px;z-index:7;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tomb-btn span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 6px 14px -8px rgba(var(--shadow),.6);
    color:var(--ink-2);font:italic 500 16px/1 var(--read);transition:transform .4s var(--settle),color .2s}
  .tomb-btn:active span{transform:scale(.92)}
  .plate.tomb-open .tomb-btn span{color:var(--accent);transform:rotate(90deg)}
}
@keyframes tomb-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- Turning the page: between pages of an album the old leaf lifts away and the new one settles in ----------
   The header and the birdsong dock hold still across the turn. The same leaf-turn runs for ordinary links
   (cross-document) and for a site that swaps pages in place. */
@view-transition{navigation:auto}
.bar{view-transition-name:bar}
.dock{view-transition-name:dock}
html:not(.theme-turning)::view-transition-old(root){animation:leaf-out .4s cubic-bezier(.55,0,.8,.25) both}
html:not(.theme-turning)::view-transition-new(root){animation:leaf-in 1s var(--paper-ease) .1s both}
html:not(.theme-turning)::view-transition-group(bar),html:not(.theme-turning)::view-transition-group(dock){animation-duration:.45s}
@keyframes leaf-out{to{opacity:0;transform:translateY(-16px) scale(.993);filter:blur(3px)}}
@keyframes leaf-in{from{opacity:0;transform:translateY(26px)}}
.theme-turning .bar,.theme-turning .dock{view-transition-name:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* While a page is fetched, a hair of ink runs under the header */
.turn-line{position:fixed;z-index:70;left:0;right:0;top:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.turn-line.on{opacity:1;transform:scaleX(.82);transition:transform 2.4s cubic-bezier(.1,.6,.2,1),opacity .2s}
.turn-line.done{opacity:0;transform:scaleX(1);transition:transform .25s var(--paper-ease),opacity .35s .2s}

/* ---------- Day and night: the new page spreads from the switch over the old one, which holds still beneath ---------- */
.theme-turning::view-transition-old(root),.theme-turning::view-transition-new(root){animation:none;mix-blend-mode:normal}
.theme-turning::view-transition-new(root){z-index:2}
.theme-turning *:not(.switch-thumb):not(.switch-opt),.theme-turning *::before,.theme-turning *::after{transition:none!important}
/* ---------- Entries: each section arrives as one gesture ----------
   --rv-b is the place in the cascade (set by the runtime for things that arrive together); data-d adds a beat.
   Blocks rise; headings come up word by word out of a soft blur; folio numerals set like a stamp;
   lists deal in line by line; pictures come last, slowest, settling from a touch larger. */
main{overflow-x:clip}
.js .rv{--rv-t:calc(var(--rv-b,0s) + var(--rv-dd,0s));opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--paper-ease) var(--rv-t),transform 1.3s var(--paper-ease) var(--rv-t)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{--rv-dd:.1s}.js .rv[data-d="2"]{--rv-dd:.2s}.js .rv[data-d="3"]{--rv-dd:.3s}.js .rv[data-d="4"]{--rv-dd:.4s}
.js .rv.split{opacity:1;transform:none}
.js .rv.split .w{display:inline-block;opacity:0;transform:translateY(.42em) rotate(2deg);transform-origin:0 100%;filter:blur(8px);
  transition:opacity .9s var(--paper-ease),transform 1.2s var(--paper-ease),filter 1s var(--paper-ease);transition-delay:calc(var(--rv-t) + var(--wi,0) * 60ms)}
.js .rv.split.in .w{opacity:1;transform:none;filter:blur(0)}
.js .folio-no.rv{width:fit-content;transform:scale(.78);transform-origin:0 75%;filter:blur(5px);
  transition:opacity .7s var(--paper-ease) var(--rv-t),transform .9s var(--settle) var(--rv-t),filter .7s var(--paper-ease) var(--rv-t)}
.js .folio-no.rv.in{transform:none;filter:blur(0)}
.js :is(ul,ol).rv{opacity:1;transform:none}
.js :is(ul,ol).rv>li{opacity:0;transform:translateY(20px);transition:opacity .8s var(--paper-ease),transform 1.05s var(--paper-ease);transition-delay:calc(var(--rv-t) + var(--ci,0) * 60ms)}
.js :is(ul,ol).rv.in>li{opacity:1;transform:none}
.js .rv[class*="-art"]{transform:translateY(60px) scale(.96);
  transition:opacity 1.2s var(--paper-ease) calc(var(--rv-t) + .14s),transform 1.7s var(--paper-ease) calc(var(--rv-t) + .14s)}
.js .rv[class*="-art"].in{transform:none}

/* ---------- Footer ---------- */
.foot{padding-block:var(--s7) var(--s6);border-top:1px solid var(--rule)}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--s6) var(--g);align-items:start}
@media (max-width:899px){.foot-grid{grid-template-columns:1fr}}
.foot nav{display:grid;gap:2px}
.foot nav a{font:var(--display-wt) 22px/1.5 var(--display);text-decoration:none}
.foot nav a:hover{color:var(--accent)}
.other-album{display:grid;gap:10px;padding:18px 20px;background:var(--folio);box-shadow:0 0 0 1px var(--rule);text-decoration:none;transition:transform .5s var(--paper-ease),box-shadow .5s}
.other-album:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 0 0 1px var(--rule),0 22px 40px -28px rgba(var(--shadow),.6)}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule-2)}

/* Copy an address: two sheets become a tick */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mail-pair{display:inline-flex;align-items:center;gap:8px;max-width:100%;vertical-align:middle}
.copy{position:relative;flex:none;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--rule);border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;transition:color .3s,border-color .3s,background-color .3s}
.copy:hover,.copy:focus-visible{color:var(--accent);border-color:var(--accent)}
.copy:active{transform:scale(.94)}
.copy svg{grid-area:1/1;width:15px;height:15px;transition:opacity .25s,transform .45s var(--settle)}
.copy .tick{opacity:0;transform:scale(.5) rotate(-20deg)}
.copy.done{color:var(--accent);border-color:var(--accent)}
.copy.done .tick{opacity:1;transform:none}
.copy.done .sheets{opacity:0;transform:scale(.6)}
.copy::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;padding:6px 8px;background:var(--ink);color:var(--paper);font:560 10px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .2s,transform .35s var(--settle)}
.copy:hover::after,.copy:focus-visible::after,.copy.done::after{opacity:1;transform:translate(-50%,0)}
.mail-pair .btn + .copy{width:48px;height:48px;border-radius:0;border-color:var(--ink-3)}

/* The floating action: on phones only, where the header carries no button */
.fab{position:fixed;z-index:40;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;min-height:52px;padding:4px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;font:600 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 14px 30px -14px rgba(var(--shadow),.9);
  --stamp-ink:var(--accent-ink);--stamp-reserve:var(--accent);
  transform:translateY(calc(100% + 28px));opacity:0;transition:transform .6s var(--settle),opacity .3s}
.fab.show{transform:none;opacity:1}
.fab .fab-mark{display:grid;place-items:center;width:44px;height:44px;flex:none}
.fab .fab-mark svg{width:44px;height:44px}
/* the label introduces itself once, then folds away so the button never sits over a line being read */
.fab-label{display:block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .7s var(--settle),opacity .4s,padding .7s var(--settle)}
.fab.intro .fab-label{max-width:200px;opacity:1;padding:0 16px 0 10px}
@media (min-width:900px){.fab{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important;scroll-behavior:auto!important}
  .js .rv,.js .rv.split .w,.js :is(ul,ol).rv>li{transform:none;filter:none}
}