/* The Muraqqa — Type & Brand Book for Authentic Kahaniyan and Dushyant Arora.
   First edition, 23 October 2026. Prepared by pitch.dog.
   The book wears the family's own clothes: wasli by day, bidri by night,
   hashiya margins at the edge of every view. */

@font-face{font-family:"Zodiak";src:url(fonts/Zodiak-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;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-style:normal;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-style:normal;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-style:normal;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{
  /* Authentic Kahaniyan · wasli */
  --paper:#EFE6D3; --folio:#F7F1E4; --lac-ink:#F7F1E4; --ink:#1E1A16; --ink-2:#5B5145; --ink-3:#8A7E6D;
  --lac:#A8361E; --indigo:#2B3E5C; --gold:#B9893A; --leaf:#4D6A3C;
  --rule:rgba(30,26,22,.14); --rule-2:rgba(30,26,22,.24);
  /* Dushyant Arora · paler wasli */
  --da-paper:#F3EDE1; --da-folio:#FAF6EE; --da-ink:#1C1B19; --da-ink-2:#5A554C; --da-indigo:#2C3F73; --da-leaf:#4D6A3C;
  /* the bidri and night references, shown on both themes */
  --bidri:#141312; --bidri-2:#1E1C1A; --silver:#E4DFD4; --night:#10140F;

  --display:"Zodiak",Georgia,serif;
  --read:"Newsreader",Georgia,serif;
  --read-d:"Newsreader Display","Newsreader",Georgia,serif;
  --label:"Switzer","Helvetica Neue",Arial,sans-serif;
  --hindi:"Tiro Devanagari Hindi",serif;
  --urdu:"Gulzar",serif;

  --m:clamp(16px,4.4vw,72px);           /* outer margin */
  --g:clamp(12px,1.7vw,28px);           /* gutter */
  --s3:12px; --s4:clamp(16px,1.1vw + 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);

  --paper-ease:cubic-bezier(.22,.7,.18,1);
  --settle:cubic-bezier(.3,1.4,.5,1);
  --stamp-ink:var(--lac); --stamp-reserve:var(--paper);
  color-scheme:light;
}
:root[data-theme="night"]{
  --paper:#141312; --folio:#1E1C1A; --lac-ink:#141312; --ink:#E4DFD4; --ink-2:#A9A397; --ink-3:#7E786D;
  --lac:#E0685E; --indigo:#8FA6C9; --gold:#D4AE64; --leaf:#93B07E;
  --rule:rgba(228,223,212,.13); --rule-2:rgba(228,223,212,.24);
  --da-paper:#10140F; --da-folio:#171C16; --da-ink:#E6E2D6; --da-ink-2:#A7AD9E; --da-indigo:#9DB1E3; --da-leaf:#93B07E;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="day"]){
    --paper:#141312; --folio:#1E1C1A; --lac-ink:#141312; --ink:#E4DFD4; --ink-2:#A9A397; --ink-3:#7E786D;
    --lac:#E0685E; --indigo:#8FA6C9; --gold:#D4AE64; --leaf:#93B07E;
    --rule:rgba(228,223,212,.13); --rule-2:rgba(228,223,212,.24);
    --da-paper:#10140F; --da-folio:#171C16; --da-ink:#E6E2D6; --da-ink-2:#A7AD9E; --da-indigo:#9DB1E3; --da-leaf:#93B07E;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(17px,.19vw + 16.3px,19px)/1.56 var(--read);
  font-variant-numeric:oldstyle-nums proportional-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-synthesis:none;transition:background-color .6s var(--paper-ease),color .6s var(--paper-ease)}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
::selection{background:var(--lac);color:var(--folio)}
:focus-visible{outline:2px solid var(--lac);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--m);top:var(--m);z-index:100;background:var(--folio);padding:8px 12px}

/* Line breaks, as on the sites: composed lines balance, running text gets pretty last lines.
   Zero specificity, so a role below can still choose its own. */
:where(p,li,dd,td,.note,.body,.aside){text-wrap:pretty}
:where(h1,h2,h3,h4,h5,h6,.h2,.h3,blockquote,figcaption,.label,.kicker,.cta,button,dt,summary,b,.toc a,.album li p,.sw .use){text-wrap:balance}
:where(figcaption i,figcaption p,.tomb i){text-wrap:pretty}
@media (min-width:370px){.nw{white-space:nowrap}}  /* a long name kept whole wherever its column can hold it */

/* ---------- Hashiya: the album margin around every view ---------- */
/* The same album margin as the site, so the frame doesn't change when you step from the album into its book */
.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(--lac) 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}}
:root{--hm:clamp(8px,1.1vw,16px)}

/* ---------- Type roles of the book ---------- */
.kicker{display:flex;align-items:center;gap:14px;font:560 11px/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--lac)}
.kicker::before{content:"";flex:0 0 36px;height:1px;background:currentColor}
.kicker.c{justify-content:center}.kicker.c::after{content:"";flex:0 0 36px;height:1px;background:currentColor}
.h2{font:400 clamp(36px,4.4vw,72px)/1.02 var(--display);letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
.h2 em{font-style:italic;font-weight:300}
.h3{font:400 clamp(22px,1.6vw + 14px,32px)/1.12 var(--display);letter-spacing:-.015em;text-wrap:balance}
.lead{font:300 clamp(21px,.65vw + 18.7px,28px)/1.36 var(--read-d);max-width:30em;text-wrap:pretty}
.body{max-width:34em;color:var(--ink-2);text-wrap:pretty}
.body+ .body{margin-top:1em}
.note{font:400 15px/1.5 var(--read);color:var(--ink-2);text-wrap:pretty}
.label{font:560 11px/1.35 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mono{font:500 12px/1.4 var(--label);letter-spacing:.06em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink-2)}
.hi{font-family:var(--hindi)}.ur{font-family:var(--urdu);direction:rtl;unicode-bidi:isolate}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1360px;margin-inline:auto;padding-inline:calc(var(--m) + var(--hm))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.chapter{padding-block:var(--s8);border-top:1px solid var(--rule);position:relative}
.ch-head{display:grid;gap:var(--s5);margin-bottom:var(--s7)}
.ch-head .num{font:300 italic clamp(64px,7vw,120px)/.8 var(--display);color:var(--gold);letter-spacing:-.04em}
.ch-head-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--g);align-items:end}
@media (max-width:900px){.ch-head-row{grid-template-columns:1fr}}
.sub{margin-top:var(--s7)}
.sub>.h3{margin-bottom:var(--s4)}
.sub-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);margin-bottom:var(--s5);align-items:start}
.sub-head .note{max-width:36em}
@media (max-width:900px){.sub-head{grid-template-columns:1fr}}

/* ---------- Top bar ---------- */
.bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
/* The same bar as the albums: 64px, the same margins, the same switch, so moving between the site and the book nothing jumps */
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,1.7vw,28px);height:63px;max-width:1680px;padding-inline:max(clamp(16px,4.4vw,72px),env(safe-area-inset-left),env(safe-area-inset-right))}
.bar-title{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.bar-title svg{display:block;height:30px;width:auto;color:var(--ink)}
@media (max-width:599px){.bar-title svg{height:24px}}
.bar nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.bar nav a{position:relative;transition:color .24s}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--lac);transform:scaleX(0);transform-origin:right;transition:transform .42s cubic-bezier(.65,0,.35,1)}
.bar nav a:hover{color:var(--ink)}
.bar nav a:hover::after{transform:scaleX(1);transform-origin:left}
.bar nav a{font:560 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-block:14px;white-space:nowrap}
.bar nav a:hover{color:var(--ink)}
.toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);border-radius:999px;padding:6px 12px;background:transparent;color:var(--ink);font:560 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:32px}
.toggle i{width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:inset -3px 0 0 var(--paper)}
/* The site's button, in the same slot, so the switch sits where it sits on the site */
.bar .cta{position:relative;display:inline-flex;align-items:center;justify-content:center;width:158px;min-height:48px;padding:0 12px;border:1px solid var(--lac);background:var(--lac);color:var(--lac-ink);font:600 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .42s cubic-bezier(.65,0,.35,1),border-color .42s,transform .16s}
.bar .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.bar .cta::after{display:none}
.bar .cta:hover{color:var(--paper);border-color:var(--ink)}
.bar .cta:hover::before{transform:scaleX(1);transform-origin:left}
.bar .cta:active{transform:translateY(1px) scale(.985)}
/* Phones and tablets: the site keeps its lockup, switch and Menu; the book keeps its lockup, switch and Contents */
@media (max-width:899px){.bar .cta{display:none}.bar nav .switch{order:-1}.bar nav a.navlink{display:inline-flex;align-items:center;justify-content:flex-end;min-width:74px;min-height:44px;padding-block:0}}

/* ---------- Cover ---------- */
.cover{min-height:calc(100svh - 56px);display:grid;align-content:center;padding-block:var(--s7);position:relative;overflow:hidden}
.cover-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--g);align-items:center}
@media (max-width:900px){.cover-grid{grid-template-columns:1fr}}
.cover h1{font:400 clamp(64px,10.4vw,168px)/.86 var(--display);letter-spacing:-.04em;margin-top:var(--s5)}
.cover h1 em{display:block;font-style:italic;font-weight:300;font-size:.42em;letter-spacing:-.02em;margin-bottom:.15em;color:var(--ink-2)}
.cover .for{margin-top:var(--s5);font:300 clamp(20px,1vw + 16px,28px)/1.3 var(--read-d);max-width:22em}
.cover .tri{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:var(--s4);font-size:clamp(17px,.6vw + 14px,22px);color:var(--ink-2)}
.cover .meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:var(--s6)}
.cover-art{position:relative;display:grid;place-items:center;margin:0}
.cover-art .collage{width:100%;filter:drop-shadow(0 18px 30px rgba(30,26,22,.16));animation:arrive 1.4s var(--paper-ease) both .15s}
@keyframes arrive{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.cover-art .stamp{position:absolute;right:-2%;top:-2%;width:24%;color:var(--lac)}
.cover-art .stamp svg{width:100%;height:auto}
.cover-art .label-card{position:absolute;right:0;bottom:-6%;max-width:250px}

/* museum tombstone label */
.tomb{display:grid;gap:3px;padding:12px 14px;background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 10px 24px -14px rgba(30,26,22,.35)}
.tomb b{font:500 15px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
.tomb i{font:italic 400 13px/1.35 var(--read);color:var(--ink-2)}
.tomb small{font:560 10px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}

/* ---------- Contents ---------- */
.intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6) var(--g);padding-block:var(--s7);border-top:1px solid var(--rule)}
@media (max-width:900px){.intro{grid-template-columns:1fr}}
.toc ol{counter-reset:ch;columns:2;column-gap:var(--g);margin-top:var(--s4)}
.toc li{break-inside:avoid;border-top:1px solid var(--rule)}
.toc a{display:grid;grid-template-columns:2.2em 1fr;align-items:baseline;padding:10px 0 11px;text-decoration:none;font:400 19px/1.25 var(--display);letter-spacing:-.01em}
.toc a span{font:italic 300 15px/1 var(--display);color:var(--gold)}
.toc a:hover{color:var(--lac)}
@media (max-width:520px){.toc ol{columns:1}}

/* ---------- Principles ---------- */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--g)}
@media (max-width:900px){.principles{grid-template-columns:1fr}}
.principle{display:grid;gap:12px;align-content:start}
.principle .art{aspect-ratio:4/3;background:var(--folio);box-shadow:0 0 0 1px var(--rule);display:grid;place-items:center;overflow:hidden;margin-bottom:8px;position:relative}
.principle .art img{width:78%;height:78%;object-fit:contain}
.why{margin-top:var(--s7);max-width:28em;font:italic 300 clamp(22px,1.1vw + 17px,32px)/1.32 var(--display);text-wrap:pretty;color:var(--ink)}
.why::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin-bottom:var(--s4)}

/* ---------- Family cards ---------- */
.family{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
@media (max-width:900px){.family{grid-template-columns:1fr}}
.album{position:relative;padding:clamp(24px,3vw,44px);background:var(--folio);box-shadow:0 0 0 1px var(--rule);display:grid;gap:var(--s4);align-content:start}
.album::before{content:"";position:absolute;inset:8px;box-shadow:0 0 0 1px var(--lac),0 0 0 3px var(--folio),0 0 0 4px color-mix(in srgb,var(--gold) 60%,transparent);pointer-events:none}
.album.da{background:var(--da-folio);color:var(--da-ink)}
.album.da::before{box-shadow:0 0 0 1px var(--da-indigo),0 0 0 3px var(--da-folio),0 0 0 4px color-mix(in srgb,var(--gold) 60%,transparent)}
.album .mark{height:88px;display:flex;align-items:flex-end;margin-bottom:8px;color:var(--lac)}
.album .mark svg{height:100%;width:auto}
.album.da .mark{color:var(--da-indigo)}
.album h3{font:400 clamp(26px,2vw + 14px,40px)/1.05 var(--display);letter-spacing:-.02em}
.album.da h3{font-family:var(--read-d);font-style:italic;font-weight:300}
.album ul{display:grid;gap:8px;margin-top:4px}
.album li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding-top:8px;border-top:1px solid var(--rule);font-size:16px;line-height:1.45}
.album li p{margin:0}
.album li span{font:560 10px/1.6 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.shared{margin-top:var(--g);padding:clamp(20px,2.4vw,32px);border:1px dashed var(--rule-2);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--g)}
@media (max-width:900px){.shared{grid-template-columns:1fr}}
.shared ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--g)}
@media (max-width:600px){.shared ul{grid-template-columns:1fr}}
.shared li{font-size:16px;line-height:1.45;padding-left:18px;position:relative}
.shared li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}

/* ---------- Marks ---------- */
.specimens{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.spec{background:#EFE6D3;color:#1E1A16;box-shadow:0 0 0 1px var(--rule);display:grid;place-items:center;padding:clamp(24px,4vw,56px);position:relative;min-height:280px}
.spec .tag{position:absolute;left:14px;top:12px}
.spec .tag2{position:absolute;right:14px;bottom:12px}
.spec .label{color:#8A7E6D}
.spec.dark{background:var(--bidri);color:var(--silver)}
.spec.dark .label{color:#8E887C}
.spec.lac{background:#A8361E;color:#EFE6D3}
.spec.lac .label{color:rgba(239,230,211,.7)}
.spec.night{background:var(--night);color:#E6E2D6}
.spec.night .label{color:#8E947F}
.spec.daw{background:#F3EDE1;color:#2C3F73}
.spec.daw .label{color:#8A8475}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}.span-3{grid-column:span 3}
@media (max-width:900px){.specimens>*{grid-column:span 12}}
.spec svg{width:100%;height:auto}
.w-seal{max-width:260px}.w-seal-sm{max-width:150px}.w-h{max-width:520px}.w-st{max-width:420px}.w-tc{max-width:560px}.w-bp{max-width:220px}.w-wm{max-width:560px}
/* The small stamp's A turns between its two faces (stamp.js), written in as Dushyant's name is: the shirorekha A from the left, the qalam A from the right */
.ak-face{opacity:0;clip-path:inset(-10% 104% -10% -10%);transition:opacity .45s cubic-bezier(.22,.7,.18,1),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){.spec,.mark,[style*="--stamp-ink"]{--stamp-ink:CanvasText!important;--stamp-reserve:Canvas!important}}
.stampable{cursor:pointer;border:0;background:none;padding:0;color:inherit;width:100%}
.stampable .inkwrap{transform-origin:50% 60%}
.stamped .inkwrap{animation:stamp .9s var(--settle) both}
@keyframes stamp{0%{transform:translateY(-14%) scale(1.22) rotate(-6deg);opacity:0;filter:blur(2px)}
  38%{transform:translateY(0) scale(.94) rotate(1deg);opacity:1;filter:blur(0)}
  60%{transform:scale(1.015) rotate(-.4deg)}100%{transform:none}}
/* vii. Patrons: the wall of names, the logos in one ink under it, the directors in their arches */
.pt-wall,.pt-sitters{place-items:stretch;padding:clamp(48px,5vw,72px) clamp(24px,4vw,56px) clamp(24px,4vw,56px)}
.pt-wall{display:grid;gap:var(--s5)}
.pt-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));column-gap:var(--g);margin:0;padding:0;list-style:none;border-top:1px solid rgba(30,26,22,.16)}
.pt-names li{display:flex;align-items:baseline;gap:12px;padding:12px 0 10px;border-bottom:1px solid rgba(30,26,22,.16);font:300 clamp(22px,1.4vw + 10px,32px)/1.1 var(--display);letter-spacing:-.015em;text-wrap:balance}
.pt-names li::before{content:"";flex:none;width:6px;height:6px;background:#A8361E;opacity:.75;transform:rotate(45deg) translateY(-.32em)}
.pt-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.4vw,40px) clamp(24px,3vw,52px);margin:0;padding:var(--s4) 0 0;list-style:none;color:#1E1A16}
.pt-logos li{display:flex;align-items:center;height:calc(clamp(28px,2.6vw,44px) * var(--h,1));opacity:.62}
.pt-logos svg{display:block;height:100%;width:auto}
.pt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) clamp(20px,2.4vw,40px);padding:12px 7px 0}
.pt-grid figure{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;break-inside:avoid}
/* The site's jharokha, in the specimen's day colours: held behind a slim sill, leaning out over it when pointed at */
.pt-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%,#F7F1E4,#E7DFD0);
  box-shadow:0 0 0 1px rgba(30,26,22,.14),0 0 0 6px #F7F1E4,0 0 0 7px rgba(185,137,58,.55),0 24px 34px -30px rgba(30,26,22,.7);transition:box-shadow .8s var(--paper-ease)}
.pt-arch::after{content:"";position:absolute;z-index:2;left:-7px;right:-7px;bottom:-7px;height:calc(6% + 7px);background:#F7F1E4;
  box-shadow:0 -1px 0 rgba(185,137,58,.55),0 1px 0 rgba(185,137,58,.55),0 -10px 12px -12px rgba(30,26,22,.5)}
.pt-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)}
.pt-arch img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform-origin:50% 100%;transform:translateY(3%);
  filter:saturate(.9) contrast(1.02);transition:transform 1.1s var(--paper-ease),filter .8s var(--paper-ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pt-grid figure:hover .sit{clip-path:inset(-40% -3% 0 -3% round 50% 50% 3px 3px / 46% 46% 3px 3px)}
  .pt-grid figure:hover img{transform:translateY(-5%) scale(1.15);filter:saturate(1) contrast(1.02) drop-shadow(0 14px 16px rgba(30,26,22,.3))}
  .pt-grid figure:hover .pt-arch{box-shadow:0 0 0 1px rgba(30,26,22,.14),0 0 0 6px #F7F1E4,0 0 0 7px #B9893A,0 30px 40px -30px rgba(30,26,22,.8)}
}
.pt-grid figcaption{font:400 clamp(16px,.8vw + 10px,21px)/1.2 var(--display);letter-spacing:-.005em}
@media (max-width:900px){.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rules-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:var(--s5)}
@media (max-width:900px){.rules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rules-grid div{padding-top:14px;border-top:1px solid var(--rule);display:grid;gap:6px}
.rules-grid b{font:400 18px/1.25 var(--display)}

/* clear space diagram */
.clear{position:relative;display:grid;place-items:center;padding:12%;outline:1px dashed color-mix(in srgb,var(--lac) 55%,transparent);outline-offset:-1px;background:repeating-linear-gradient(45deg,transparent 0 9px,color-mix(in srgb,var(--lac) 7%,transparent) 9px 10px)}
.clear>*{background:var(--folio)}

/* ---------- Colour ---------- */
.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s5) var(--g)}
@media (max-width:1000px){.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sw{display:grid;gap:3px;align-content:start}
.chip{aspect-ratio:5/4;margin-bottom:10px;background:var(--c);box-shadow:inset 0 0 0 1px var(--rule-2);position:relative}
.chip.flecks::after{content:"";position:absolute;inset:0;background:url(img/flecks.svg) 0 0/120px 120px;opacity:.8}
.sw b{font:400 19px/1.2 var(--display);letter-spacing:-.01em}
.sw code{font:500 12px/1.4 var(--label);letter-spacing:.06em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sw .use{margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.pair-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
@media (max-width:900px){.pair-row{grid-template-columns:1fr}}
.ratio-bar{display:flex;height:56px;box-shadow:0 0 0 1px var(--rule-2);margin-top:14px}
.ratio-bar span{flex:0 0 calc(var(--w)*1%);background:var(--c)}
.contrast{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:var(--s5)}
@media (max-width:900px){.contrast{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contrast div{display:grid;gap:8px}
.contrast .aa{height:84px;display:flex;align-items:center;padding-inline:18px;font:400 34px/1 var(--display);background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule)}
.contrast .aa em{font-style:italic;font-weight:300}

/* ---------- Type ---------- */
.faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g)}
@media (max-width:1100px){.faces{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.faces{grid-template-columns:repeat(2,minmax(0,1fr))}}
.face{display:grid;gap:10px;align-content:start;padding-top:var(--s4);border-top:1px solid var(--rule-2)}
.face .aa{font-size:clamp(64px,6vw,104px);line-height:1;letter-spacing:-.02em;margin-bottom:8px;height:clamp(84px,7.6vw,132px);display:flex;align-items:flex-end;justify-content:flex-start;direction:ltr;overflow:visible}
.face h4{font:400 21px/1.2 var(--display)}
.face .note{font-size:14.5px}
.roles{margin-top:var(--s6);display:grid}
.role{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:var(--s4) var(--g);padding:var(--s4) 0;border-top:1px solid var(--rule);align-items:baseline}
@media (max-width:900px){.role{grid-template-columns:1fr}}
.role .sample{min-width:0;overflow-wrap:anywhere}
.role dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font:500 12px/1.5 var(--label);color:var(--ink-2);font-variant-numeric:tabular-nums lining-nums}
.role dt{color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:560;padding-top:2px}
.scripts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
@media (max-width:900px){.scripts{grid-template-columns:1fr}}
.script{background:var(--folio);box-shadow:0 0 0 1px var(--rule);padding:clamp(20px,2.4vw,32px);display:grid;gap:10px;align-content:start}
.script .big{font-size:clamp(44px,4vw,64px);line-height:1.3}

/* ---------- Art ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5) var(--g)}
.piece{display:grid;gap:14px;align-content:start}
.piece .frame{background:var(--folio);box-shadow:0 0 0 1px var(--rule);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;position:relative}
.piece .frame::before{content:"";position:absolute;inset:7px;box-shadow:0 0 0 1px color-mix(in srgb,var(--lac) 60%,transparent),0 0 0 3px var(--folio),0 0 0 4px color-mix(in srgb,var(--gold) 50%,transparent);pointer-events:none;z-index:1}
.piece img{width:86%;height:86%;object-fit:contain;transition:transform 1.1s var(--paper-ease)}
.piece:hover img{transform:scale(1.04) rotate(-.6deg)}
.p-a{grid-column:1 / span 5}.p-b{grid-column:6 / span 4;margin-top:var(--s7)}.p-c{grid-column:10 / span 3;margin-top:var(--s5)}
.p-d{grid-column:2 / span 3}.p-e{grid-column:5 / span 4;margin-top:var(--s6)}.p-f{grid-column:9 / span 4}
@media (max-width:900px){.gallery>*{grid-column:span 6!important;margin-top:0!important}}
@media (max-width:560px){.gallery>*{grid-column:span 12!important}}
.anatomy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6) var(--g);align-items:center}
@media (max-width:900px){.anatomy{grid-template-columns:1fr}}
.anatomy .tomb{max-width:340px;padding:18px 20px}
.anatomy .tomb b{font-size:21px}
.anatomy .tomb i{font-size:15px}
.anno{display:grid;gap:0}
.anno li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.anno li span{font:italic 300 18px/1.2 var(--display);color:var(--gold)}
.margin-demo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g);align-items:center}
@media (max-width:900px){.margin-demo{grid-template-columns:1fr}}
.folio-demo{aspect-ratio:3/4;max-width:420px;background:var(--paper);padding:13%;position:relative;box-shadow:0 0 0 1px var(--rule-2),0 30px 60px -36px rgba(30,26,22,.5)}
.folio-demo::before{content:"";position:absolute;inset:0;background:url(img/flecks.svg) 0 0/160px 160px;opacity:.9}
.folio-demo .inner{position:relative;height:100%;background:var(--folio);box-shadow:0 0 0 1px var(--lac),0 0 0 4px var(--folio),0 0 0 5px var(--gold),0 0 0 8px var(--folio),0 0 0 9px var(--indigo);display:grid;place-items:center}
.folio-demo img{width:84%}

/* ---------- Motion ---------- */
.curves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
@media (max-width:900px){.curves{grid-template-columns:repeat(2,minmax(0,1fr))}}
.curve{display:grid;gap:10px;align-content:start}
.curve svg{width:100%;height:auto;overflow:visible}
.curve .track{height:34px;position:relative;border-bottom:1px solid var(--rule)}
.curve .dot{position:absolute;left:0;bottom:6px;width:20px;height:20px;border-radius:50%;background:var(--lac)}
.curve:hover .dot,.curve:focus-within .dot,.curve.run .dot{animation:run var(--d) var(--e) both}
@keyframes run{to{left:calc(100% - 20px)}}
.curve button{justify-self:start;font:560 10px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--rule-2);color:var(--ink-2);padding:8px 10px;cursor:pointer}
.moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--g)}
@media (max-width:900px){.moments{grid-template-columns:1fr}}
.moment{display:grid;gap:12px;align-content:start}
.moment .stage{aspect-ratio:4/3;background:var(--folio);box-shadow:0 0 0 1px var(--rule);position:relative;overflow:hidden;display:grid;place-items:center;perspective:900px}

/* album opening demo */
.book3d{width:52%;aspect-ratio:3/4;position:relative;transform-style:preserve-3d;cursor:pointer}
.book3d .page{position:absolute;inset:0;background:var(--paper);box-shadow:0 0 0 1px var(--rule-2);display:grid;place-items:center}
.book3d .page img{width:82%}
.book3d .cover{position:absolute;inset:0;min-height:0;padding:0;background:#A8361E;transform-origin:0% 50%;transition:transform 1.2s var(--paper-ease);display:grid;place-items:center;backface-visibility:hidden;box-shadow:inset 0 0 0 6px #8F2D18,inset 0 0 0 7px #D4AE64;color:#EFE6D3}
.book3d .cover svg{width:58%}
.book3d.open .cover{transform:rotateY(-160deg)}
/* drawers demo */
.cabinet{width:62%;display:grid;gap:6px;padding:8px;background:color-mix(in srgb,var(--ink) 12%,var(--folio));box-shadow:0 0 0 1px var(--rule-2)}
.drawer{position:relative;height:38px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-2);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:560 9.5px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .55s var(--paper-ease),box-shadow .55s;border:0;color:var(--ink);width:100%}
.drawer::after{content:"";width:18px;height:4px;border-radius:2px;background:var(--gold)}
.drawer:hover,.drawer:focus-visible{transform:translateX(16%);box-shadow:inset 0 0 0 1px var(--rule-2),-14px 0 0 -6px color-mix(in srgb,var(--ink) 20%,transparent)}
/* sighting card */
.sighting{position:absolute;left:6%;bottom:8%;right:6%;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:10px 12px;background:var(--da-folio);color:var(--da-ink);box-shadow:0 0 0 1px var(--rule),0 16px 30px -18px rgba(0,0,0,.4);transform:translateY(130%);opacity:0;transition:transform .9s var(--settle),opacity .5s}
.sighting.on{transform:none;opacity:1}
.sighting img{width:72px;height:72px;object-fit:contain}
.sighting b{display:block;font:400 italic 19px/1.2 var(--read-d)}
.sighting small{display:block;font:560 10px/1.4 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--da-ink-2)}
.listen{position:absolute;left:6%;top:8%;font:560 10px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--rule-2);background:var(--da-paper);color:var(--da-ink);padding:9px 12px;border-radius:999px;cursor:pointer}
.clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
@media (max-width:900px){.clock{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.clock{grid-template-columns:1fr}.scene{grid-template-columns:112px minmax(0,1fr);column-gap:16px;min-height:0}.scene-bird{grid-row:1/5;height:140px;margin:0}}
.scene{padding:18px;display:grid;gap:8px;align-content:start;min-height:200px;color:var(--c-ink);background:var(--c-bg)}
.scene-bird{width:auto;height:168px;max-width:100%;object-fit:contain;object-position:left bottom;margin:-6px 0 6px -10px;filter:drop-shadow(0 10px 12px rgba(40,25,10,.12))}
.scene h4{font:300 italic 26px/1.1 var(--read-d)}
.scene .label{color:inherit;opacity:.7}
.scene p{font-size:15px;line-height:1.45;opacity:.9}

/* ---------- Voice ---------- */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
@media (max-width:900px){.voices{grid-template-columns:1fr}}
.voice{padding:clamp(24px,3vw,40px);background:var(--folio);box-shadow:0 0 0 1px var(--rule);display:grid;gap:var(--s4);align-content:start}
.voice.da{background:var(--da-folio);color:var(--da-ink)}
.voice blockquote{font:300 clamp(22px,1vw + 18px,30px)/1.3 var(--read-d);text-wrap:balance}
.voice.ak blockquote{font-family:var(--display);font-weight:400}
.voice ul{display:grid;gap:8px}
.voice li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:16px;line-height:1.45}
.voice li::before{content:"✓";font:600 13px/1.6 var(--label);color:var(--leaf)}
.voice li.no::before{content:"✕";color:var(--lac)}
.dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--g)}
@media (max-width:900px){.dodont{grid-template-columns:1fr}}
.dodont ul{display:grid}
.dodont li{padding:16px 0;border-top:1px solid var(--rule);display:grid;gap:6px}
.dodont li b{font:400 20px/1.25 var(--display);letter-spacing:-.01em}
.locked{display:grid;margin-top:var(--s4)}
.locked div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--g);padding:14px 0;border-top:1px solid var(--rule);align-items:baseline}
@media (max-width:700px){.locked div{grid-template-columns:1fr;gap:4px}}
.locked dd{font-size:18px;line-height:1.5}

/* ---------- Files ---------- */
.files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--g)}
@media (max-width:900px){.files{grid-template-columns:1fr}}
.files div{padding-top:var(--s4);border-top:1px solid var(--rule-2);display:grid;gap:8px;align-content:start}
.files dl{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 12px;font-size:15px}
.files dd{min-width:0;overflow-wrap:anywhere}
.files dt{font:560 10px/1.8 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- Colophon ---------- */
.colophon{padding-block:var(--s8);border-top:1px solid var(--rule);display:grid;place-items:center;text-align:center;gap:var(--s4)}
.colophon .pd{width:36px;height:36px;color:var(--ink-2)}
.colophon p{color:var(--ink-2);font-size:16px}

/* ---------- Reveal ---------- */
/* Entries, as on the albums: blocks rise, chapter titles come up word by word out of a soft blur, rules draw across */
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--paper-ease) var(--rv-b,0s),transform 1.3s var(--paper-ease) var(--rv-b,0s)}
.rv.in{opacity:1;transform:none}
.rv.split{opacity:1;transform:none}
.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-b,0s) + var(--wi,0) * 60ms)}
.rv.split.in .w{opacity:1;transform:none;filter:blur(0)}
.js .chapter.rv-rule{border-top-color:transparent}
.js .chapter.rv-rule::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--paper-ease)}
.js .chapter.rv-rule.in::before{transform:none}
/* Day and night: the new page spreads from the switch, measured at the press (book.js), as on the sites */
.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}
/* Turning the page to and from the album: the same leaf-turn as the sites */
@view-transition{navigation:auto}
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}
@keyframes leaf-out{to{opacity:0;transform:translateY(-16px) scale(.993);filter:blur(3px)}}
@keyframes leaf-in{from{opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .rv,.rv.split .w{opacity:1;transform:none;filter:none;transition:none}
  .js .chapter.rv-rule::before{transform:none;transition:none}
  .stamped .inkwrap,.curve .dot{animation:none!important}
  .book3d .cover,.drawer,.sighting,.piece img{transition:none}
}

/* ---------- Story blocks and footnote asides ---------- */
.story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s5) clamp(32px,5vw,96px);align-items:start;margin-bottom:var(--s7)}
@media (max-width:900px){.story{grid-template-columns:1fr}}
.story-main{display:grid;gap:1em;max-width:36em}
.story-main p{color:var(--ink);font-size:clamp(18px,.3vw + 16.8px,21px);line-height:1.6;text-wrap:pretty}
.story-main p.first{font:300 clamp(22px,.8vw + 19px,30px)/1.38 var(--read-d)}
.story-notes{display:grid;gap:var(--s4);padding-top:6px;border-top:1px solid var(--rule)}
.aside{display:grid;grid-template-columns:24px 1fr;gap:10px;font:400 15px/1.5 var(--read);color:var(--ink-2);text-wrap:pretty}
.aside em{color:var(--ink)}
.fn,.fnm{display:inline-grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:var(--lac);color:var(--paper);font:700 .62em/1 var(--display);font-variant-numeric:lining-nums;letter-spacing:0;font-style:normal}
.fn{vertical-align:.55em;margin-left:.1em}
.fnm{width:22px;height:22px;font-size:11px;margin-top:2px}
.road{display:grid;grid-template-columns:120px 1fr;gap:var(--g);align-items:center;margin-top:var(--s4);padding:16px;border:1px dashed var(--rule-2)}
.road .then{opacity:.55;filter:grayscale(.3)}
.hue{position:relative;height:56px;margin-top:var(--s4);background:linear-gradient(90deg,hsl(350 62% 45%),hsl(0 62% 45%),hsl(10 62% 45%),hsl(20 72% 50%),hsl(30 100% 60%),hsl(40 90% 55%),hsl(50 80% 50%));box-shadow:inset 0 0 0 1px var(--rule-2)}
.hue i{position:absolute;top:-8px;bottom:-8px;width:2px;background:var(--ink)}
.hue span{position:absolute;top:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap}
.hue span.hue-top{top:auto;bottom:calc(100% + 12px)}
.redbox .hue{margin-top:44px;margin-bottom:36px}
.redbox{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) var(--g);padding:clamp(24px,3vw,40px);background:var(--folio);box-shadow:0 0 0 1px var(--rule)}
@media (max-width:900px){.redbox{grid-template-columns:1fr}}

/* ---------- The day and night switch (shared system) ---------- */
.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);color:var(--ink);cursor:pointer;flex:0 0 auto}
.switch-thumb{position:absolute;top:3px;left:3px;width:58px;height:26px;border-radius:999px;background:var(--ink);transition:transform .6s cubic-bezier(.65,0,.35,1)}
.switch-opt{position:relative;z-index:1;text-align:center;font:600 10px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;transition:color .6s cubic-bezier(.65,0,.35,1)}
.switch .o-day{color:var(--paper)}.switch .o-night{color:var(--ink-2)}
.switch[aria-checked="true"] .switch-thumb{transform:translateX(58px)}
@media (max-width:420px){.switch{width:104px}.switch-thumb{width:48px}.switch[aria-checked="true"] .switch-thumb{transform:translateX(48px)}}
.switch[aria-checked="true"] .o-day{color:var(--ink-2)}.switch[aria-checked="true"] .o-night{color:var(--paper)}
.switch:focus-visible{outline:2px solid var(--lac);outline-offset:3px}
.switch-spec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) var(--g);align-items:center}
@media (max-width:900px){.switch-spec{grid-template-columns:1fr}}
.switch-demo{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.switch-demo .mono{grid-column:1/-1}
.switch-specimen{display:grid;justify-items:center;gap:14px;padding:32px 16px;background:#EFE6D3;box-shadow:0 0 0 1px var(--rule)}

/* ---------- Chip buttons ---------- */
.chip-btn{font:560 10.5px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--rule-2);border-radius:999px;padding:10px 14px;cursor:pointer;min-height:36px;transition:background-color .3s,color .3s,border-color .3s}
.chip-btn:hover{border-color:var(--ink)}
.chip-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- How a collage is made ---------- */
.build{margin:var(--s6) 0 var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule)}
.build-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);margin-bottom:var(--s5);align-items:start}
@media (max-width:900px){.build-head{grid-template-columns:1fr}}
.build-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) clamp(32px,4vw,72px);align-items:center}
@media (max-width:900px){.build-grid{grid-template-columns:1fr}}
.build-sources{display:grid;gap:var(--s4)}
.build-sources figure{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center;transition:opacity .6s}
.build .build-sources li{transition:opacity .6s}
.build.armed .build-sources li{opacity:.42}
.build .build-sources li.on,.build.done .build-sources li{opacity:1}
.src{position:relative;background:var(--folio);box-shadow:0 0 0 1px var(--rule)}
.src img{width:100%;height:auto}
.ring{position:absolute;border:2px solid var(--lac);border-radius:50%;opacity:0;transform:scale(1.4);transition:opacity .5s,transform .8s var(--settle)}
.build li.on .ring{opacity:1;transform:none}
.build-sources figcaption{display:grid;gap:3px}
.build-sources b{font:500 17px/1.25 var(--display)}
.build-sources i{font:italic 400 14px/1.4 var(--read);color:var(--ink-2)}
.build-sources small{font:560 10px/1.4 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:560px){.build-sources figure{grid-template-columns:88px minmax(0,1fr)}}
.build-stage{display:grid;gap:var(--s4)}
.build-canvas{position:relative;width:100%;background:var(--folio);box-shadow:0 0 0 1px var(--rule)}
.build-canvas::before{content:"";position:absolute;inset:7px;box-shadow:0 0 0 1px color-mix(in srgb,var(--lac) 60%,transparent),0 0 0 3px var(--folio),0 0 0 4px color-mix(in srgb,var(--gold) 50%,transparent);pointer-events:none;z-index:2}
.build-canvas img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.b-face{transition:opacity 1s var(--paper-ease),transform 1.2s var(--paper-ease)}
.b-offer{transform-origin:70% 75%;transition:opacity .9s var(--paper-ease),transform 1.3s cubic-bezier(.65,0,.35,1)}
.build.armed:not(.s1):not(.done) .b-face{opacity:0;transform:translateX(-5%) rotate(-1deg)}
.build.armed:not(.s2):not(.done) .b-offer{opacity:0;transform:translate(9%,5%) rotate(5deg)}
.build.s3 .b-offer{animation:land .9s var(--settle) both}
@keyframes land{0%{transform:none}35%{transform:translateY(-1.2%) rotate(-.6deg)}100%{transform:none}}
.build-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--g);flex-wrap:wrap}
.build-foot .tomb{max-width:360px}

/* ---------- Watch one move ---------- */
.show-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--g) clamp(24px,3vw,56px);align-items:start}
@media (max-width:900px){.show-grid{grid-template-columns:1fr}}
.show-main{display:grid;gap:var(--s4)}
.show-art{display:block;width:100%;border:0;padding:0;background:var(--folio);box-shadow:0 0 0 1px var(--rule);cursor:pointer}
.show-controls{display:flex;flex-wrap:wrap;gap:8px}
.show-side{display:grid;gap:var(--s5)}
.show-side figure{display:grid;gap:10px}

/* ---------- The A4 edition ----------
   The same book, paged for A4 landscape: Tools/brandbook_pdf.sh prints it. Every chapter opens a page; the running
   head names the book on the left and the chapter on the right (the export names each chapter's page from the
   contents), the folio sits bottom right. Always day, still, and every image loaded. */
@page{size:A4 landscape;margin:15mm 17mm 13mm;background:#EFE6D3;
  @top-left{content:"The Muraqqa · Type & Brand Book";vertical-align:bottom;padding-bottom:4mm;font:560 7pt/1 "Switzer",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8A7E6D}
  @bottom-left{content:"Authentic Kahaniyan · Dushyant Arora";vertical-align:top;padding-top:4mm;font:560 7pt/1 "Switzer",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8A7E6D}
  @bottom-right{content:counter(page);vertical-align:top;padding-top:3mm;font:italic 300 11pt/1 "Zodiak",serif;color:#B9893A}}
@page cover{margin:0;@top-left{content:none}@bottom-left{content:none}@bottom-right{content:none}}
@media print{
  :root{--m:0px;--hm:0px;--s6:40px;--s7:52px;--s8:64px;--g:22px}
  html,body{background:transparent}  /* the page's own paper shows, so a chapter with its own paper keeps it to the foot */
  body{font-size:16px;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bar,.hashiya,.skip,.switch,.chip-btn,.listen,.curve button,.show-controls,.stampable::after{display:none!important}
  .wrap{max-width:none;padding-inline:0}
  .cover{page:cover;height:210mm;min-height:0;padding:16mm 17mm;overflow:hidden}
  .cover h1{font-size:120px}
  .cover-art .collage{filter:none}
  .intro,.chapter,.colophon{break-before:page;border-top:0;padding-block:0}
  .js .chapter.rv-rule::before{display:none}
  .colophon{min-height:150mm;align-content:center}
  .ch-head{margin-bottom:32px}
  .ch-head .num{font-size:80px}
  .h2{font-size:56px}
  .story{margin-bottom:40px}
  .story-main p{font-size:17px}
  .story-main p.first{font-size:23px}
  h2,h3,.h3,.kicker,.ch-head,.sub-head,.build-head{break-after:avoid}
  p,li,dd{orphans:3;widows:3}
  .spec,.sw,.role,.principle,.album,.voice,.scene,.piece,.moment,.curve,.face,.script,figure,.files>div,.rules-grid>div,
  .dodont li,.locked div,.contrast>div,.tomb,.redbox,.anatomy,.shared,.switch-spec,.aside,.road,.toc li,.margin-demo,.build-grid,.show-grid{break-inside:avoid}
  .rv,.rv.split .w{opacity:1!important;transform:none!important;filter:none!important}
  .spec{min-height:220px}
  .pt-wall,.pt-sitters{padding:44px 40px 28px}
  .pt-grid{grid-template-columns:repeat(4,136px);justify-content:center;gap:20px 64px}
  .rules-grid{margin-top:24px}
  .story,.build-foot{break-inside:avoid}
  .build-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .sub-head{margin-bottom:20px}
  .show-grid{grid-template-columns:minmax(0,1fr) 330px}  /* the main collage and both side ones fit one page */
  .sighting{transform:none;opacity:1}
  .screen-only{display:none}
  /* a ring drawn outside a card lands on the foot of the page before it when the card starts a page: draw it inside */
  .spec,.principle .art,.album,.script,.piece .frame,.moment .stage,.voice,.redbox,.src,.build-canvas,.show-art,.switch-specimen{box-shadow:inset 0 0 0 1px var(--rule)}
  a{text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
}