/* 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}
/* ---------- Line breaks ----------
   Composed lines (headings, display lines, labels, short captions, buttons) balance; running text gets
   pretty last lines. Zero specificity, so a component can still choose its own. A deliberate pair stays
   together with  , which the word split in muraqqa.js keeps. */
:where(p,li,dd,td,.note,.help,.err,.body){text-wrap:pretty}
:where(h1,h2,h3,h4,h5,h6,.display,.h2,.h3,blockquote,figcaption,.label,.kicker,.btn,button,.link,legend,dt,summary){text-wrap:balance}
:where(figcaption i,figcaption p,.tomb i){text-wrap:pretty}

/* ---------- 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, and plates whose site keeps the label off the page (muraqqa.js adds .plate--fold): the museum label folds
   into a small (i) on the plate, and pressing it lays the label over the picture. Closed, it stays readable to screen
   readers. Open, it wins over any site rule that hides it, and muraqqa.js widens it past a small plate (--tomb-x, --tomb-w). */
.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.plate--fold .tomb{display:grid;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.plate--fold.tomb-open .tomb{left:var(--tomb-x,10px);right:auto;bottom:10px;width:var(--tomb-w,calc(100% - 20px));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)}
.plate--fold .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;touch-action:manipulation}
.plate--fold .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}
.plate--fold .tomb-btn:active span{transform:scale(.92)}
.plate--fold .tomb-btn:focus-visible{outline:none}
.plate--fold .tomb-btn:focus-visible span{outline:2px solid var(--accent);outline-offset:2px}
.plate--fold.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 ----------
   muraqqa.js measures the switch at the moment of the press (--turn-at, --turn-r, --turn-t); the circle leaves the switch
   at once, like ink from where it was touched, and slows as it reaches the far corner. */
.theme-turning::view-transition-old(root){animation:none;mix-blend-mode:normal}
.theme-turning::view-transition-new(root){z-index:2;mix-blend-mode:normal;animation:theme-spread var(--turn-t,1s) cubic-bezier(.4,.1,.1,1) both}
@keyframes theme-spread{from{clip-path:circle(0 at var(--turn-at,100% 0))}to{clip-path:circle(var(--turn-r,150vmax) at var(--turn-at,100% 0))}}
.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}
}