/* Authentic Kahaniyan: the archive cabinet. Layouts and signature moments. */

.brand-mark{height:30px;width:auto;color:var(--ink)}
@media (max-width:599px){.brand-mark{height:24px}}
/* The small stamp's A turns between its two faces (assets/js/stamp.js), written in the way Dushyant's name is:
   the shirorekha A from the left, as Hindi is written, the qalam A from the right, as Urdu is */
.ak-face{opacity:0;clip-path:inset(-10% 104% -10% -10%);transition:opacity .45s var(--paper-ease),clip-path 0s .45s}
.ak-face[data-face="ur"]{clip-path:inset(-10% -10% -10% 104%)}
.ak-face.is-on{opacity:1;clip-path:inset(-10% -10% -10% -10%);transition:clip-path .9s cubic-bezier(.45,.05,.25,1) .2s,opacity .25s .2s}
@media (forced-colors:active){:root{--stamp-ink:CanvasText;--stamp-reserve:Canvas}.fab{--stamp-ink:LinkText;--stamp-reserve:Canvas}}
main{display:block}

/* Section heads: a folio numeral, a heading, the section's own collage */
.folio-no{font:italic 300 clamp(40px,4vw,64px)/1 var(--display);color:var(--gold);margin-bottom:var(--s3)}
.sec-head{grid-column:1/5;display:grid;align-content:start;gap:var(--s4)}
.sec-head--right{grid-column:9/13;grid-row:1}
.sec-head--wide{grid-column:1/-1;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--g);align-items:end}
.sec-head--wide .folio-no,.sec-head--wide .h2{grid-column:1}
.sec-head--wide .lead{grid-column:1}
.sec-head--wide .sec-art{grid-column:2;grid-row:1/5;justify-self:end;width:min(100%,380px)}
.sec-art{margin-top:var(--s4);max-width:360px}
@media (max-width:899px){
  .sec-head,.sec-head--right{grid-column:1/-1;grid-row:auto}
  .sec-head--wide{grid-template-columns:1fr}
  .sec-head--wide .sec-art{grid-column:1;grid-row:auto;justify-self:start}
}

/* ---------- i. The album opens ---------- */
.album{position:relative;height:calc(calc(100 * var(--svh)) + calc(120 * var(--svh)))}
.album-stage{position:sticky;top:0;height:calc(100 * var(--svh));overflow:hidden;perspective:2400px;perspective-origin:30% 50%}
.folio-first{height:100%;align-items:center;padding-top:calc(var(--bar-h) + 12px);padding-bottom:24px}
.ff-text{grid-column:1/7;display:grid;gap:var(--s5);align-content:center;position:relative;z-index:2}
.ff-text h1{display:grid;gap:var(--s4)}
.ff-text .display{font-size:clamp(48px,6.4vw,118px)}
.ff-body{display:grid;gap:var(--s4)}
.ff-body p:not(.lead){font-size:17px;color:var(--ink-2);max-width:52ch}
.ff-art{grid-column:7/13;align-self:center}
.ff-art .plate-art{max-height:calc(68 * var(--svh))}
.ff-art .tomb{margin-top:-8px;justify-self:end;margin-right:4%}
@media (max-width:899px){
  .album{height:auto}
  .album-stage{position:relative;height:auto;overflow:visible}
  .folio-first{padding-top:calc(var(--bar-h) + var(--s5));row-gap:var(--s5)}
  .ff-text,.ff-art{grid-column:1/-1}
  .ff-art{order:-1}
  .ff-art .plate-art{max-height:calc(52 * var(--svh))}
}

.cover{position:absolute;inset:0;z-index:20;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.cover-face,.cover-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cover-face{display:grid;place-items:center;color:var(--cloth-gold);
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.07),transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg,var(--cloth-2) 0,var(--cloth-2) 34px,rgba(0,0,0,.25) 35px,var(--cloth) 44px,var(--cloth) 100%);
  box-shadow:inset -30px 0 60px -40px rgba(0,0,0,.5)}
.cover-face::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34px;background:repeating-linear-gradient(180deg,transparent 0 18%,rgba(255,255,255,.08) 18% 19%,rgba(0,0,0,.25) 19% 20%,transparent 20% 25%)}
.cover-tool{position:absolute;inset:calc(var(--bar-h) + clamp(14px,2vw,28px)) clamp(26px,4vw,56px) clamp(26px,4vw,56px) calc(34px + clamp(26px,4vw,56px));border:1px solid color-mix(in srgb,var(--cloth-gold) 70%,transparent);box-shadow:inset 0 0 0 5px transparent,inset 0 0 0 6px color-mix(in srgb,var(--cloth-gold) 45%,transparent)}
.cover-tool::before,.cover-tool::after{content:"";position:absolute;width:10px;height:10px;background:var(--cloth-gold);transform:rotate(45deg);opacity:.8}
.cover-tool::before{left:-5.5px;top:-5.5px}.cover-tool::after{right:-5.5px;bottom:-5.5px}
.cover-centre{position:relative;display:grid;justify-items:center;gap:12px;text-align:center;padding:calc(var(--bar-h) + 8px) 24px 24px}
.cover-stamp{width:clamp(96px,min(11vw,calc(17 * var(--svh))),168px);--stamp-ink:var(--cloth-gold);--stamp-reserve:var(--cloth);filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));margin-bottom:6px}
.cover-name{display:grid;justify-items:center;line-height:.95;
  background:linear-gradient(100deg,#B8893D 0%,#F1D79A 28%,#C79A4B 52%,#F6E2AE 70%,#B0823A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.cover-name i{font:italic 300 clamp(30px,min(3.8vw,calc(7 * var(--svh))),64px)/1 var(--display)}
.cover-name b{font:700 clamp(38px,min(5vw,calc(9.4 * var(--svh))),84px)/1 var(--display);letter-spacing:-.01em}
.cover-sub{display:flex;gap:16px;align-items:baseline;opacity:.85;font-size:clamp(15px,1.2vw,19px)}
.cover-sub .ur{font-size:1.08em}
.cover-open{margin-top:10px;min-height:46px;padding:0 24px;border:1px solid color-mix(in srgb,var(--cloth-gold) 70%,transparent);background:transparent;color:var(--cloth-gold);
  font:600 11px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .4s,color .4s}
.cover-open:hover{background:var(--cloth-gold);color:var(--cloth-2)}
.cover-hint{font:560 10px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;opacity:.6;animation:hint 2.4s var(--paper-ease) infinite}
@keyframes hint{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(5px);opacity:.75}}
.cover-back{transform:rotateY(180deg);
  background:
    radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--indigo) 40%,transparent) 0 2px,transparent 3px) 0 0/22px 22px,
    radial-gradient(circle at 70% 80%,color-mix(in srgb,var(--gold) 50%,transparent) 0 1.4px,transparent 2px) 0 0/30px 30px,
    var(--folio)}
.cover-back::after{content:"";position:absolute;inset:18px;border:1px solid var(--rule)}
.album.is-static .cover{display:none}
html:not(.js) .cover{display:none}
@media (max-width:899px){
  .album-stage{perspective:none}
  .cover{position:fixed;inset:0;z-index:45}
  .album.is-open .cover{display:none}
}
html.cover-locked,html.cover-locked body{overscroll-behavior:none}
.cover-hint .touch{display:none}
@media (pointer:coarse){.cover-hint .fine{display:none}.cover-hint .touch{display:inline}}

/* ---------- ii. Clients ---------- */
.names-col{grid-column:5/13;display:grid;gap:var(--s6);align-content:start;padding-top:clamp(0px,4vw,72px)}
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:var(--g);border-top:1px solid var(--rule);counter-reset:n}
.names li{position:relative;display:flex;align-items:baseline;gap:14px;padding:clamp(12px,1.1vw,18px) 0 clamp(10px,1vw,16px);border-bottom:1px solid var(--rule);
  font:300 clamp(24px,2.1vw + 4px,40px)/1.1 var(--display);letter-spacing:-.015em;counter-increment:n;transition:color .35s,opacity .35s}
.names li::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:rotate(45deg) translateY(-.32em);opacity:.75}
.names.dim li{opacity:.28}
.names.dim li.on{opacity:1;color:var(--accent)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,2.6vw,44px) clamp(28px,3.4vw,60px);padding-top:var(--s5);border-top:1px solid var(--rule);color:var(--ink)}
.logos li{height:calc(clamp(34px,3.2vw,54px) * var(--h));display:flex;opacity:.62;transition:opacity .35s,color .35s,transform .45s var(--paper-ease)}
.logos li svg{height:100%;width:auto}
.logos:hover li,.logos.dim li{opacity:.25}
.logos li:hover,.logos li.on{opacity:1!important;color:var(--accent);transform:translateY(-2px)}
@media (max-width:899px){.names-col{grid-column:1/-1;padding-top:var(--s5)}}

/* ---------- iii. Directors: sitters in jharokha windows ---------- */
.directors .sitters{grid-column:1/9;grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--g);align-content:start}
.sitter figure{display:grid;gap:8px}
/* At rest each sitter is held inside the arch, behind a slim sill. On hover they lean out, as at a jharokha:
   the window keeps its place, the portrait comes forward over the sill, and the head clears the dome. */
.arch{position:relative;aspect-ratio:4/5;border-radius:999px 999px 3px 3px / 46% 46% 3px 3px;background:radial-gradient(120% 80% at 50% 30%,var(--folio),color-mix(in srgb,var(--folio) 90%,var(--ink)));
  box-shadow:0 0 0 1px var(--rule),0 0 0 6px var(--folio),0 0 0 7px color-mix(in srgb,var(--gold) 55%,transparent),0 24px 34px -30px rgba(var(--shadow),.7);
  transition:box-shadow .8s var(--paper-ease)}
.arch::after{content:"";position:absolute;z-index:2;left:-7px;right:-7px;bottom:-7px;height:calc(6% + 7px);background:var(--folio);
  box-shadow:0 -1px 0 color-mix(in srgb,var(--gold) 55%,transparent),0 1px 0 color-mix(in srgb,var(--gold) 55%,transparent),0 -10px 12px -12px rgba(var(--shadow),.5)}
.arch .sit{position:absolute;inset:0;clip-path:inset(0 round 50% 50% 3px 3px / 46% 46% 3px 3px);transition:clip-path 1.1s var(--paper-ease)}
/* At rest the sitters are toned like old prints in the album's ink and paper, so eight faces don't shout over the page.
   Their colour comes in as they lean out, or, on a phone, as they pass the middle of the screen (home.js adds .near).
   Every state lists the same filters in the same order, so the colour fades in rather than switching. */
.arch{--sit-tone:grayscale(1) sepia(.3) saturate(.8) contrast(.9) brightness(1.05);--sit-lit:grayscale(0) sepia(0) saturate(1) contrast(1.02) brightness(1);
  --sit-flat:drop-shadow(0 14px 16px rgba(var(--shadow),0));--sit-drop:drop-shadow(0 14px 16px rgba(var(--shadow),.3))}
:root[data-theme="night"] .arch{--sit-tone:grayscale(1) sepia(.2) saturate(.8) contrast(.88) brightness(.8);--sit-lit:grayscale(0) sepia(0) saturate(.95) contrast(1) brightness(.96);
  --sit-flat:drop-shadow(0 14px 18px rgba(0,0,0,0));--sit-drop:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .arch{--sit-tone:grayscale(1) sepia(.2) saturate(.8) contrast(.88) brightness(.8);
  --sit-lit:grayscale(0) sepia(0) saturate(.95) contrast(1) brightness(.96);--sit-flat:drop-shadow(0 14px 18px rgba(0,0,0,0));--sit-drop:drop-shadow(0 14px 18px rgba(0,0,0,.55))}}
.arch img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform-origin:50% 100%;transform:translateY(3%);
  filter:var(--sit-tone) var(--sit-flat);transition:transform 1.1s var(--paper-ease),filter 1.1s var(--paper-ease)}
.sitter.near .arch img{filter:var(--sit-lit) var(--sit-flat)}
@media (hover:hover){.sitter:hover .arch img{filter:var(--sit-lit) var(--sit-flat)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sitter:hover .arch .sit{clip-path:inset(-40% -3% 0 -3% round 50% 50% 3px 3px / 46% 46% 3px 3px)}
  .sitter:hover .arch img{transform:translateY(-5%) scale(1.15);filter:var(--sit-lit) var(--sit-drop)}
  .sitter:hover .arch{box-shadow:0 0 0 1px var(--rule),0 0 0 6px var(--folio),0 0 0 7px var(--gold),0 30px 40px -30px rgba(var(--shadow),.8)}
}
.sitter figcaption{transition:color .5s var(--paper-ease)}
@media (hover:hover){.sitter:hover figcaption{color:var(--accent)}}
.sitter figcaption{font:400 clamp(17px,1.2vw + 6px,22px)/1.2 var(--display);letter-spacing:-.005em}
.sitter figcaption small{display:block;margin-top:4px;font:560 10px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.js .sitter{opacity:0;transform:translateY(26px) rotate(var(--r,0deg))}
.js .sitter.in{opacity:1;transform:none;transition:opacity .8s var(--paper-ease),transform 1.1s var(--settle)}
.credit-line{grid-column:1/9;margin-top:var(--s5);max-width:62ch}
.credit-line a{color:var(--accent)}
@media (max-width:899px){
  .directors .sitters{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s5)}
  .credit-line{grid-column:1/-1}
}

/* ---------- iv. The cabinet: a card catalogue on paper ---------- */
.cabinet{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--g);margin-top:var(--s6);align-items:start}
.drawers{display:grid;border-top:1px solid var(--rule);position:sticky;top:calc(var(--bar-h) + 24px)}
.drawer{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;min-height:clamp(76px,6.4vw,100px);padding:12px 84px 12px 4px;border:0;border-bottom:1px solid var(--rule);
  background:transparent;color:var(--ink);cursor:pointer;text-align:left;transition:padding .6s var(--settle),background-color .4s,box-shadow .4s}
.drawer .plate-no{font:560 10px/1 var(--label);letter-spacing:.16em;color:var(--ink-3);padding:6px 7px;border:1px solid color-mix(in srgb,var(--gold) 70%,transparent)}
.drawer .dname{font:400 clamp(19px,1.1vw + 10px,26px)/1.15 var(--display);letter-spacing:-.01em;transition:color .3s}
.drawer .pull{position:absolute;right:20px;top:50%;width:40px;height:11px;margin-top:-5px;border-radius:0 0 10px 10px;border:2px solid var(--gold);border-top:0;opacity:.7;transition:transform .6s var(--settle),border-color .3s,opacity .3s}
.drawer:hover{padding-left:14px}
.drawer:hover .pull{transform:translateY(2px);opacity:1}
.drawer[aria-selected="true"]{padding-left:22px;background:var(--folio);box-shadow:inset 3px 0 0 var(--accent)}
.drawer[aria-selected="true"] .dname{color:var(--accent)}
.drawer[aria-selected="true"] .pull{border-color:var(--accent);opacity:1}
.drawer-panels{position:relative;min-height:100%}
.dpanel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--g);align-items:center;padding:var(--s4) 0 var(--s4) clamp(12px,3vw,48px)}
.dpanel:not([hidden]){animation:slide-out .8s var(--paper-ease) both}
@keyframes slide-out{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.dtext{display:grid;gap:var(--s4);align-content:start}
.dtext p{color:var(--ink-2)}
.card-dots{display:none}
@media (max-width:1100px){.dpanel{grid-template-columns:1fr}}
/* Phones: the drawers become index cards you can thumb through */
@media (max-width:899px){
  .cabinet{grid-template-columns:1fr;margin-top:var(--s5)}
  .cabinet.as-cards .drawers{display:none}
  .cabinet.as-cards .drawer-panels{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * var(--margin));padding:4px var(--margin) 18px;scroll-padding-inline:var(--margin)}
  .cabinet.as-cards .drawer-panels::-webkit-scrollbar{display:none}
  .cabinet.as-cards .dpanel{flex:0 0 86%;scroll-snap-align:start;display:grid;grid-template-columns:1fr;gap:var(--s3);align-content:start;padding:16px 16px 20px;background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 18px 30px -26px rgba(var(--shadow),.7);animation:none}
  .cabinet.as-cards .dpanel .plate-art{max-height:calc(34 * var(--svh))}
  .cabinet.as-cards .dpanel::before{content:attr(data-no);font:560 10px/1 var(--label);letter-spacing:.16em;color:var(--ink-3)}
  .cabinet.as-cards .card-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .card-dots i{width:6px;height:6px;border-radius:50%;background:var(--rule);transition:background .3s,transform .3s}
  .card-dots i.on{background:var(--accent);transform:scale(1.25)}
}

/* ---------- v. Contents page ---------- */
.contents{grid-column:1/-1;margin-top:var(--s5);border-top:1px solid var(--rule)}
.contents a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:16px;padding:clamp(18px,1.6vw,28px) 0;border-bottom:1px solid var(--rule);text-decoration:none}
.contents .q{font:italic 300 clamp(22px,2.2vw + 6px,44px)/1.15 var(--read-d);letter-spacing:-.01em;max-width:30ch;transition:color .4s,transform .6s var(--paper-ease)}
.contents .dots{height:1px;align-self:end;margin-bottom:.5em;background:radial-gradient(circle,var(--ink-3) 1px,transparent 1.4px) 0 0/8px 2px repeat-x;position:relative;overflow:hidden}
.contents .dots::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--paper-ease)}
.contents .where{font:560 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;transition:color .4s}
.contents a:hover .q{color:var(--accent);transform:translateX(10px)}
.contents a:hover .dots::after{transform:scaleX(1)}
.contents a:hover .where{color:var(--accent)}
@media (max-width:699px){.contents a{grid-template-columns:1fr}.contents .dots{display:none}}

/* ---------- vi. Three folios that turn ---------- */
.turns{position:relative;height:calc(calc(100 * var(--svh)) * 3.2)}
.turns-stage{position:sticky;top:0;height:calc(100 * var(--svh));display:grid;grid-template-rows:auto 1fr;padding-top:calc(var(--bar-h) + 20px);padding-bottom:32px;overflow:hidden}
.turns-head{display:flex;align-items:baseline;gap:var(--g);flex-wrap:wrap}
.turns-head .folio-no{margin:0}
.turns-head .link{margin-left:auto}
.book{position:relative;width:min(1180px,calc(100% - 2 * var(--margin)));margin:var(--s4) auto 0;perspective:2600px}
.leaf{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;z-index:calc(10 - var(--i))}
.leaf-front,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--folio);
  box-shadow:0 0 0 1px var(--rule),0 40px 60px -50px rgba(var(--shadow),.9)}
.leaf-front{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:center;padding:clamp(20px,3vw,56px)}
.leaf-front::before{content:"";position:absolute;inset:10px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 0 3px var(--folio),0 0 0 4px color-mix(in srgb,var(--gold) 45%,transparent);pointer-events:none}
.leaf-back{transform:rotateY(180deg);background:linear-gradient(90deg,var(--folio),color-mix(in srgb,var(--folio) 92%,var(--ink)))}
.leaf-art .plate-art{max-height:calc(52 * var(--svh))}
.leaf-art .tomb{display:none}
.leaf-text{display:grid;gap:var(--s4);align-content:center}
.leaf-text .label{color:var(--accent)}
.leaf-text p:not(.label){color:var(--ink-2);max-width:46ch}
.turns.is-static{height:auto}
.turns.is-static .turns-stage{position:relative;height:auto;overflow:visible}
.turns.is-static .book{display:grid;gap:var(--s5);perspective:none}
.turns.is-static .leaf{position:relative;inset:auto;transform:none!important}
.turns.is-static .leaf-front{position:relative}
.turns.is-static .leaf-back{display:none}
@media (max-width:899px){
  .leaf-front{grid-template-columns:1fr;align-content:start}
  .leaf-art .plate-art{max-height:calc(34 * var(--svh))}
}

/* ---------- vii. Founders ---------- */
.founders .fd-art{grid-column:1/6}
.founders .fd-text{grid-column:7/13;display:grid;gap:var(--s4);align-content:center}
@media (max-width:899px){.founders .fd-art,.founders .fd-text{grid-column:1/-1}.founders .fd-text{margin-top:var(--s5)}}

/* ---------- viii. The seal ---------- */
.seal-folio{position:relative;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--g);align-items:center;padding:clamp(28px,5vw,88px);background:var(--folio);
  box-shadow:0 0 0 1px var(--rule),0 50px 80px -60px rgba(var(--shadow),.8)}
.seal-folio::before{content:"";position:absolute;inset:10px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 3px var(--folio),0 0 0 4px color-mix(in srgb,var(--gold) 55%,transparent);pointer-events:none}
.seal-text{display:grid;gap:var(--s5)}
.seal-text .display{font-size:clamp(46px,6vw,112px)}
.seal-stamp{justify-self:center;width:clamp(150px,18vw,280px);padding:0;border:0;background:none;cursor:pointer;--stamp-reserve:var(--folio);opacity:0;transform:scale(1.6) rotate(-14deg)}
.seal-stamp.pressed{animation:press .9s var(--settle) forwards}
.seal-stamp.repress{animation:repress .7s var(--settle)}
@keyframes press{0%{opacity:0;transform:scale(1.6) rotate(-14deg)}55%{opacity:1;transform:scale(.94) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes repress{0%{transform:scale(1) rotate(-8deg)}40%{transform:scale(1.12) rotate(-11deg)}75%{transform:scale(.95) rotate(-7deg)}100%{transform:scale(1) rotate(-8deg)}}
html:not(.js) .seal-stamp{opacity:1;transform:rotate(-8deg)}
@media (max-width:899px){.seal-folio{grid-template-columns:1fr}.seal-stamp{justify-self:start;order:-1;width:140px}}

/* ---------- Footer art ---------- */
.foot-art{max-width:420px}
.plate--foot .tomb{display:none}

@media (prefers-reduced-motion:reduce){
  .js .sitter{opacity:1;transform:none}
  .seal-stamp{opacity:1;transform:rotate(-8deg)}
}

/* ---------- 404: the empty mount ---------- */
/* Paper fades around a pasted picture; when the picture goes, a paler rectangle and its corner mounts stay behind. */
.lost .toc{margin-top:var(--s5)}
.lost .toc a::after{content:"→"}
.lost .toc a:hover::after{transform:translateX(4px)}
.mount{display:grid;gap:var(--s4);outline:none}
.mount-page{position:relative;aspect-ratio:4/4.2;background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 30px 60px -40px rgba(var(--shadow),.8);overflow:hidden}
.mount-page::before{content:"";position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px color-mix(in srgb,var(--gold) 18%,transparent)}
.mount-shadow{position:absolute;left:16%;right:16%;top:13%;height:50%;
  background:color-mix(in srgb,var(--folio) 70%,#fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 5%,transparent),0 0 40px 6px color-mix(in srgb,var(--ink) 6%,transparent)}
:root[data-theme="night"] .mount-shadow{background:color-mix(in srgb,var(--folio) 82%,#fff)}
.mount-shadow i{position:absolute;width:30px;height:30px;background:linear-gradient(135deg,color-mix(in srgb,var(--ink) 70%,var(--paper)) 50%,transparent 50%);opacity:.75}
.mount-shadow i:nth-child(1){left:-6px;top:-6px}
.mount-shadow i:nth-child(2){right:-6px;top:-6px;transform:rotate(90deg)}
.mount-shadow i:nth-child(3){right:-6px;bottom:-6px;transform:rotate(180deg)}
.mount-shadow i:nth-child(4){left:-6px;bottom:-6px;transform:rotate(270deg)}
.mount-fallen{position:absolute;width:62%;left:24%;top:58%;height:auto;transform:rotate(-9deg);filter:drop-shadow(0 18px 18px rgba(var(--shadow),.28));
  transition:transform 1.1s var(--settle),left 1.1s var(--settle),top 1.1s var(--settle),width 1.1s var(--settle)}
.mount:hover .mount-fallen,.mount:focus-visible .mount-fallen{left:19%;top:14%;width:62%;transform:rotate(0deg)}
.mount:focus-visible .mount-page{box-shadow:0 0 0 2px var(--accent)}
@media (prefers-reduced-motion:reduce){.mount-fallen{transition:none}}

/* ---------- One album: chapters land below the bar ---------- */
section[id]{scroll-margin-top:calc(var(--bar-h) + 8px)}
.founders .fd-text{align-content:start}
.founder-pair{display:grid;grid-template-columns:1fr;gap:12px;margin-top:var(--s3)}
.founder-pair .founder{grid-column:auto;padding:var(--s4)}
.collab{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:var(--g);align-items:center;margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--rule)}
.collab-text{display:grid;gap:var(--s3);max-width:58ch}
.collab-text p{color:var(--ink-2)}
@media (max-width:899px){.founder-pair{grid-template-columns:1fr}.collab{grid-template-columns:1fr}.collab-art{max-width:240px}}
.seal-sec .enquiry{margin-top:var(--s7);align-items:start}
.seal-sec .form .h2{font-size:clamp(30px,2.4vw + 12px,48px)}
.seal-text .actions .note{color:var(--ink-3)}
.dtext .label{color:var(--accent)}
.dtext .body{display:grid;gap:var(--s3);color:var(--ink-2);font-size:17px}