/* Dushyant Arora: the field notebook. Writing first, italic display, birds in the corner. */

body{font-size:clamp(18px,.25vw + 17px,20px);line-height:1.6}
.display,.h2{font-style:italic}
.h3{font-weight:400}
.lead{font-style:italic}
.folio-no{font:italic 300 24px/1 var(--display);color:var(--accent)}
.section{padding-block:var(--s7)}
.section + .section{position:relative;padding-top:var(--s7)}
/* The rule between sections draws itself across as the next one arrives */
.section + .section::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--rule-2);transform-origin:0 50%;transition:transform 1.8s var(--paper-ease)}
.js .section + .section:not(.seen)::before{transform:scaleX(0)}
section[id]{scroll-margin-top:calc(var(--bar-h) + 8px)}
.arr{flex:none}

/* Buttons in ink-indigo */
.btn--ink{--b:var(--accent);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn--ink::before{background:var(--ink)}
.btn--ink:hover{color:var(--paper);border-color:var(--ink)}
button.link{padding:0;border:0;background:none;cursor:pointer}

/* Four small bars that move while birds are singing */
.pill-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;flex:none}
.pill-bars i{width:2px;height:5px;border-radius:1px;background:currentColor;transform-origin:50% 100%}
.btn .pill-bars i:nth-child(2),.pill .pill-bars i:nth-child(2){height:9px}
.btn .pill-bars i:nth-child(3),.pill .pill-bars i:nth-child(3){height:12px}
.btn .pill-bars i:nth-child(4),.pill .pill-bars i:nth-child(4){height:7px}
.dock.playing .pill-bars i,[data-listen-inline][aria-pressed="true"] .pill-bars i{animation:sing 1.2s ease-in-out infinite alternate}
.dock.playing .pill-bars i:nth-child(2),[data-listen-inline][aria-pressed="true"] .pill-bars i:nth-child(2){animation-duration:.9s;animation-delay:-.3s}
.dock.playing .pill-bars i:nth-child(3),[data-listen-inline][aria-pressed="true"] .pill-bars i:nth-child(3){animation-duration:1.4s;animation-delay:-.7s}
.dock.playing .pill-bars i:nth-child(4),[data-listen-inline][aria-pressed="true"] .pill-bars i:nth-child(4){animation-duration:1s;animation-delay:-.2s}
@keyframes sing{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}

/* ---------- Header: his name, turning through the three scripts it is written in ---------- */
/* All three share one cell, so the header never shifts; each writes itself in from the side its script starts on */
.brand-cycle{display:grid;align-items:center;justify-items:start}
.brand-cycle>[data-script]{grid-area:1/1;opacity:0;clip-path:inset(-40% 104% -40% -12%);transition:opacity .45s var(--paper-ease),clip-path 0s .45s}
.brand-cycle>[data-script="ur"]{clip-path:inset(-40% -12% -40% 104%)}
.brand-cycle>.is-on{opacity:1;clip-path:inset(-40% -12% -40% -12%);transition:clip-path .9s cubic-bezier(.45,.05,.25,1) .2s,opacity .25s .2s}
.brand-name{font:italic 300 24px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.brand-mark svg{display:block;width:auto;height:25px}
.brand-mark[data-script="ur"] svg{height:28px;margin-top:-3px}

/* ---------- The loader ---------- */
.loader{display:none}
html.da-load .loader{display:grid;position:fixed;inset:0;z-index:80;place-items:center;padding:var(--margin);background:var(--paper);transition:background-color .9s var(--paper-ease)}
html.da-load body{overflow:hidden}
.loader::before{content:"";position:absolute;inset:14px;pointer-events:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 0 4px var(--paper),0 0 0 5px color-mix(in srgb,var(--gold) 50%,transparent);transition:opacity .5s}
.loader-page{position:relative;display:grid;justify-items:center;gap:var(--s5);width:min(760px,100%);text-align:center}
.loader-card{width:min(620px,86vw);color:var(--ink);transform-origin:0 0;will-change:transform}
.loader-card svg{width:100%;height:auto}
html.da-load .loader-card path:nth-of-type(1),html.da-load .loader-card path:nth-of-type(2){clip-path:inset(0 100% 0 0)}
html.da-load .loader-card path:nth-of-type(4){clip-path:inset(0 0 0 100%)}
.loader-line{width:min(220px,50vw);height:1px;background:var(--rule);overflow:hidden;transition:opacity .4s}
.loader-line i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--paper-ease)}
.loader-ask{display:grid;justify-items:center;gap:var(--s4);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .7s var(--paper-ease),transform .9s var(--settle),visibility 0s .7s}
.loader.ask .loader-ask{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.loader-now{font:italic 300 clamp(19px,.9vw + 14px,25px)/1.38 var(--read-d);color:var(--ink-2);max-width:30ch;text-wrap:balance}
.loader-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px}
.loader-actions .btn{min-height:54px;padding-inline:24px 26px}
.loader-note{font:560 10.5px/1.4 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.loader.leaving{background-color:transparent}
.loader.leaving::before,.loader.leaving .loader-ask,.loader.leaving .loader-line{opacity:0;transition:opacity .35s}
@media (prefers-reduced-motion:reduce){html.da-load .loader-card path{clip-path:none!important}}

/* ---------- i. The opening ---------- */
.opening{padding-top:calc(var(--bar-h) + var(--s6));padding-bottom:var(--s7);align-items:center}
.opening .grid{align-items:center;row-gap:var(--s6)}
.op-text{grid-column:1/8;display:grid;gap:var(--s5);align-content:center}
.op-card{width:min(560px,100%);color:var(--ink);margin:0}
.op-card svg{width:100%;height:auto}
.op-card:focus{outline:none}
.op-line{font-size:clamp(40px,4.2vw,78px);line-height:1.02}
.op-line em{display:block;text-wrap:balance}
.op-line em + em{color:var(--accent)}
.op-lead{font-style:normal;max-width:30ch;color:var(--ink-2);text-wrap:balance}
.op-art{grid-column:8/13}
.op-art .plate-art{max-height:calc(76 * var(--svh))}
.op-art .tomb{justify-self:end}
html.da-in .op-line,html.da-in .op-lead,html.da-in .opening .actions{animation:rise .9s var(--paper-ease) both}
html.da-in .op-lead{animation-delay:.12s}
html.da-in .opening .actions{animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@media (max-width:899px){
  .op-text,.op-art{grid-column:1/-1}
  .opening{padding-top:calc(var(--bar-h) + var(--s5))}
  .op-art .plate-art{max-height:calc(56 * var(--svh))}
}

/* Section heads: the folio number, the title, a small plate; they stay in view beside long sections */
.sec-head{grid-column:1/5;display:grid;gap:var(--s4);align-content:start;align-self:start}
.sec-art{max-width:300px}
@media (min-width:900px){.sec-head{position:sticky;top:calc(var(--bar-h) + 28px)}}
@media (max-width:899px){.sec-head{grid-column:1/-1}.sec-art{max-width:220px}}

/* ---------- ii. Published in: the eight mastheads in one ink ---------- */
/* Each mark is an alpha mask painted with currentColor, so day, night and hover come from the tokens.
   Sizes follow optical area (height falls with the square root of the aspect), heavy faces a touch smaller. */
.mastheads{--k:clamp(26px,.9vw + 22px,36px);grid-column:6/13;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);align-self:center;border-top:1px solid var(--rule)}
.mastheads li{border-bottom:1px solid var(--rule)}
.mastheads a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:calc(var(--k) * 1.3 + clamp(32px,2.8vw,48px));text-decoration:none;color:var(--ink-2);transition:color .3s}
.mast{display:block;flex:none;height:calc(var(--k) * var(--f));aspect-ratio:var(--ar);max-width:calc(100% - 28px);background:currentColor;-webkit-mask:no-repeat left center/contain;mask:no-repeat left center/contain;transition:transform .6s var(--paper-ease)}
.mastheads a::after{content:"↗";font:400 15px/1 var(--label);color:var(--ink-3);opacity:0;transform:translate(-6px,4px);transition:opacity .3s,transform .5s var(--settle),color .3s}
.mastheads a:hover,.mastheads a:focus-visible{color:var(--accent)}
.mastheads a:hover .mast,.mastheads a:focus-visible .mast{transform:translateX(4px)}
.mastheads a:hover::after,.mastheads a:focus-visible::after{opacity:1;transform:none;color:var(--accent)}
@media (forced-colors:active){.mast{background:LinkText}}
@media (max-width:899px){.mastheads{grid-column:1/-1;margin-top:var(--s5)}}
@media (max-width:599px){.mastheads{grid-template-columns:1fr}.mastheads a::after{opacity:1;transform:none}}

/* ---------- Selected writing: three entries in the notebook ---------- */
.sel-head{align-items:end;row-gap:var(--s3);margin-bottom:var(--s6)}
.sel-head .h2{grid-column:1/7}
.sel-head .lead{grid-column:7/12}
@media (max-width:899px){.sel-head .h2,.sel-head .lead{grid-column:1/-1}}
.entries{display:grid;gap:var(--s7)}
.entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--s4);align-items:center}
.entry-art{grid-column:1/5}
.entry-text{grid-column:6/12;display:grid;gap:var(--s3);align-content:center}
.entry--flip .entry-art{grid-column:9/13;grid-row:1}
.entry--flip .entry-text{grid-column:2/8;grid-row:1}
.entry-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:560 11px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.entry-meta span{color:var(--accent)}
.entry .h3{font-size:clamp(26px,1.8vw + 14px,42px);line-height:1.08}
.entry .body{color:var(--ink-2)}
.entry .link{justify-self:start;margin-top:var(--s2)}
/* the margin note: a pencilled line beside the title, as a reader would write it */
.margin-note{position:relative;justify-self:start;padding:2px 0 2px 18px;font:italic 400 clamp(18px,.6vw + 15px,22px)/1.35 var(--read);color:var(--leaf);max-width:34ch}
.margin-note::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:7px;border:1.4px solid currentColor;border-right:0;border-radius:6px 0 0 6px;opacity:.7}
.entry .plate-art{transition:transform 1s var(--settle)}
@media (hover:hover){
  .entry .margin-note{opacity:.55;transform:translateX(-4px);transition:opacity .5s,transform .7s var(--settle)}
  .entry:hover .margin-note,.entry:focus-within .margin-note{opacity:1;transform:none}
  .entry:hover .plate-art{transform:rotate(-1.4deg) translateY(-6px)}
  .entry--flip:hover .plate-art{transform:rotate(1.4deg) translateY(-6px)}
}
@media (max-width:899px){
  .entry-art,.entry-text,.entry--flip .entry-art,.entry--flip .entry-text{grid-column:1/-1;grid-row:auto}
  .entry-art{max-width:300px}
  .entries{gap:var(--s6)}
}
.more{margin-top:var(--s7);row-gap:var(--s5)}
.more-block{grid-column:span 5;display:grid;gap:var(--s3);align-content:start;padding-top:var(--s4);border-top:1px solid var(--rule)}
.more-block + .more-block{grid-column:7/12}
.more-block p{color:var(--ink-2);max-width:44ch}
.more-links{display:grid;justify-items:start}
@media (max-width:899px){.more-block,.more-block + .more-block{grid-column:1/-1}}

/* ---------- iii. The other album, in its own colours ---------- */
.ak-folio{padding:var(--s6) 0;background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 30px 60px -48px rgba(var(--shadow),.8);align-items:center;row-gap:var(--s5)}
.ak-art{grid-column:2/6}
.ak-text{grid-column:7/12;display:grid;gap:var(--s4);align-content:center}
.ak-text .body{color:var(--ink-2)}
.ak-mark{display:block;width:min(460px,92%);margin:var(--s2) 0 var(--s3);color:var(--ink);--stamp-ink:#A8361E;--stamp-reserve:var(--folio)}
:root[data-theme="night"] .ak-mark,:root[data-theme="night"] .oa-mark{--stamp-ink:#E0685E}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .ak-mark,:root:not([data-theme="day"]) .oa-mark{--stamp-ink:#E0685E}}
.ak-mark svg{width:100%;height:auto}
@media (max-width:899px){.ak-folio{padding:var(--s5) var(--s4)}.ak-art,.ak-text{grid-column:1/-1}.ak-art{max-width:300px}}

/* ---------- iv. About, the shelf, the screen ---------- */
.about-text{grid-column:6/12;display:grid;gap:var(--s4);align-content:start}
.about-text .lead{font-size:clamp(26px,1.6vw + 16px,40px);max-width:24ch}
.about-text .body{color:var(--ink-2)}
@media (max-width:899px){.about-text{grid-column:1/-1;margin-top:var(--s4)}}
.shelf-row{margin-top:var(--s7);row-gap:var(--s7);align-items:start}
.books{grid-column:1/8;display:grid;gap:var(--s3);align-content:start}
.screen{grid-column:9/13;display:grid;gap:var(--s3);align-content:start}
.books .body,.screen .body{color:var(--ink-2)}
.screen-art{max-width:240px;margin-bottom:var(--s3)}
@media (max-width:899px){.books,.screen{grid-column:1/-1}}

/* Two books standing on one shelf; one comes forward when you reach for it */
.shelf{--h:188px;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);margin-top:var(--s5);max-width:620px}
.shelf::before{content:"";position:absolute;left:-12px;right:-12px;top:var(--h);height:4px;border-radius:1px;background:color-mix(in srgb,var(--ink) 72%,var(--gold));box-shadow:0 10px 16px -10px rgba(var(--shadow),.9)}
.book a{display:grid;gap:calc(var(--s4) + 4px);text-decoration:none}
.book-cover{--c:#2C3F73;position:relative;display:grid;align-content:space-between;width:132px;height:var(--h);margin-left:var(--s3);padding:18px 14px 16px 20px;color:#F3EDE1;border-radius:2px 5px 5px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.22) 0 7px,rgba(255,255,255,.08) 7px 8px,transparent 8px),radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--c) 85%,#fff),var(--c));
  box-shadow:0 18px 26px -18px rgba(var(--shadow),.9),inset 0 0 0 1px rgba(0,0,0,.12);transform:rotate(-1.5deg);transform-origin:50% 100%;transition:transform .8s var(--settle)}
.book--leaf .book-cover{--c:#4D6A3C;transform:rotate(1.2deg)}
.book-title{font:italic 300 18px/1.12 var(--display);text-wrap:balance}
.book-rule{height:1px;background:#D4AE64;opacity:.8}
.book-eds{font:600 8.5px/1.35 var(--label);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.book-label{display:grid;gap:6px}
.book-label b{font:400 17px/1.3 var(--read);color:var(--ink);text-wrap:pretty}
.book-label span{font:560 10.5px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.book a:hover .book-cover,.book a:focus-visible .book-cover{transform:translateY(-12px) rotate(0)}
.book a:hover .book-label b{color:var(--accent)}
@media (max-width:599px){.shelf{--h:140px;gap:var(--s4)}.book-cover{width:100px;padding:12px 10px 10px 16px}.book-title{font-size:14px}.book-eds{display:none}.book-label b{font-size:15px}}

/* ---------- v. Birds of the hour: a page of the notebook ---------- */
.birds .grid{row-gap:var(--s6);align-items:start}
.birds-head{grid-column:1/6;display:grid;gap:var(--s4);align-content:start}
.birds-head .body{color:var(--ink-2)}
.birds-art{grid-column:1/5;max-width:340px}
.notebook{grid-column:6/13;grid-row:1/3;position:relative;padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 18px);background-color:var(--folio);
  background-image:repeating-linear-gradient(180deg,transparent 0 35px,var(--rule-2) 35px 36px);box-shadow:0 0 0 1px var(--rule),0 30px 60px -46px rgba(var(--shadow),.8)}
.notebook::before{content:"";position:absolute;left:var(--s4);top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.nb-now{color:var(--accent);margin-bottom:var(--s4)}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--g)}
.spec a{display:grid;gap:2px;text-decoration:none}
.spec-art{display:block;aspect-ratio:4/5;margin-bottom:6px}
.spec-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(var(--shadow),.18));transition:transform .8s var(--settle)}
.spec a:hover .spec-art img{transform:translateY(-6px) rotate(-1.5deg)}
.spec-name{font:400 17px/1.25 var(--read)}
.spec-sci{font:italic 400 13.5px/1.3 var(--read);color:var(--ink-2)}
.spec-heard{font:600 10px/1.4 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);min-height:14px;margin-top:2px}
.spec.heard .spec-art{position:relative}
.spec.heard .spec-art::after{content:"";position:absolute;right:4%;top:4%;width:12px;height:12px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px color-mix(in srgb,var(--leaf) 25%,transparent);animation:heard .8s var(--settle)}
@keyframes heard{from{transform:scale(0)}}
.nb-log{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.log{display:grid;gap:4px;margin-top:var(--s2)}
.log li{display:flex;gap:14px;align-items:baseline;animation:rise .6s var(--paper-ease)}
.log time{font:560 11px/1 var(--label);letter-spacing:.08em;color:var(--ink-3);font-variant-numeric:tabular-nums lining-nums}
.log a{font:italic 400 18px/1.4 var(--read);text-decoration:none}
.log a:hover{color:var(--accent);text-decoration:underline}
.log-empty{margin-top:var(--s2)}
@media (max-width:899px){
  .birds-head,.birds-art,.notebook{grid-column:1/-1;grid-row:auto}
  .birds-art{max-width:240px}
  .notebook{padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 14px)}
  .notebook::before{left:12px}
}
@media (max-width:599px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- vi. Write to me: a letter with his bookplate ---------- */
.letter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;padding:var(--s6) clamp(20px,5vw,96px);background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 30px 60px -48px rgba(var(--shadow),.8);margin-bottom:var(--s7)}
.letter-text{display:grid;gap:var(--s4)}
.letter-text .display{font-size:clamp(48px,6vw,112px)}
.letter-text .body{color:var(--ink-2)}
.letter-ak a{color:var(--accent)}
.letter-plate{width:clamp(150px,16vw,230px);color:var(--accent);transform:rotate(3deg);filter:drop-shadow(0 18px 20px rgba(var(--shadow),.12))}
.letter-plate svg{width:100%;height:auto}
@media (max-width:899px){.letter{grid-template-columns:1fr;padding:var(--s5) var(--s4)}.letter-plate{width:140px;justify-self:end;margin-top:calc(-1 * var(--s4))}}
.contact .form .h2{margin-bottom:var(--s2)}

/* ---------- The dock: birdsong in the corner, and the bird that just sang ---------- */
.dock{position:fixed;z-index:40;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:10px;pointer-events:none;
  opacity:0;transform:translateY(18px);transition:opacity .5s,transform .8s var(--settle)}
.dock.show{opacity:1;transform:none}
.dock-row{display:flex;align-items:center;gap:10px;pointer-events:auto}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 15px;border-radius:999px;border:1px solid var(--rule);cursor:pointer;
  background:color-mix(in srgb,var(--folio) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);
  font:600 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 14px 28px -18px rgba(var(--shadow),.8);transition:border-color .3s,color .3s,transform .2s}
.pill:hover{border-color:var(--accent)}
.pill:active{transform:scale(.97)}
.pill[aria-pressed="true"]{border-color:color-mix(in srgb,var(--leaf) 70%,transparent)}
.pill[aria-pressed="true"] .pill-bars{color:var(--leaf)}
.dock.starting .pill-bars i{animation:sing .5s ease-in-out infinite alternate}
.dock.waiting .pill{animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--leaf) 22%,transparent),0 14px 28px -18px rgba(var(--shadow),.8)}}
.vol{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--folio) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:rise .5s var(--paper-ease)}
.vol input{width:96px;accent-color:var(--leaf);cursor:pointer}
/* The bird comes up beside the button that made it sing, low in the corner, clear of the page's own buttons */
.sighting{order:2;display:flex;align-items:center;gap:10px;max-width:min(320px,calc(100vw - 96px));padding:6px 18px 6px 6px;border-radius:3px;background:var(--folio);
  box-shadow:0 0 0 1px var(--rule),0 24px 40px -24px rgba(var(--shadow),.85);transform-origin:0 100%;
  opacity:0;visibility:hidden;transform:translateX(-10px) scale(.96);transition:opacity .45s,transform .8s var(--settle),visibility 0s .8s}
.sighting.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sighting-art{flex:none;width:52px;height:65px;overflow:hidden}
.sighting-art img{width:100%;height:100%;object-fit:contain;transform:translateY(40%);transition:transform 1s var(--settle) .08s}
.sighting.show .sighting-art img{transform:none}
.sighting-text{display:grid;gap:2px;min-width:0}
.sighting-when{font:600 10px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);text-wrap:balance}
.sighting-text b{font:italic 300 20px/1.1 var(--display);letter-spacing:-.005em;overflow-wrap:break-word;text-wrap:balance}
.sighting-text b .nb{white-space:nowrap}
.sighting-text i{font:italic 400 12.5px/1.3 var(--read);color:var(--ink-2);text-wrap:balance}
/* Tiro's headline (0.62 em) a fifth above the name's x-height (0.426 em): 0.82 of the name's size, with Devanagari's own leading */
.sighting-hi{font-size:16.5px;line-height:1.5;color:var(--ink-2);text-wrap:balance}
.sighting-hi[hidden]{display:none}
@media (max-width:699px){
  .pill{width:44px;padding:0;justify-content:center}
  .pill .pill-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Beside the pill and its settings button (88 px and a 10 px gap), inside the right margin */
  .sighting{padding:5px 14px 5px 5px;gap:8px;max-width:calc(100vw - 98px - max(14px,env(safe-area-inset-left)) - max(14px,env(safe-area-inset-right)))}
  .sighting-art{width:44px;height:55px}
  .sighting-text b{font-size:17px}
  .sighting-hi{font-size:14px}
}
/* The sound sheet's button rides on the pill, the two as one capsule */
.pill-pair{display:flex;border-radius:999px;box-shadow:0 14px 28px -18px rgba(var(--shadow),.8)}
.pill-pair .pill{border-radius:999px 0 0 999px;box-shadow:none}
.pill-more{display:grid;place-items:center;width:44px;min-height:44px;margin-left:-1px;padding:0;border:1px solid var(--rule);border-radius:0 999px 999px 0;cursor:pointer;color:var(--ink-2);
  background:color-mix(in srgb,var(--folio) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .3s,color .3s,transform .2s}
.pill-more svg{display:block;transition:transform .45s var(--settle)}
.pill-pair > :hover,.pill-pair > :focus-visible{position:relative;z-index:1}
.pill-more:hover{border-color:var(--accent);color:var(--ink)}
.pill-more:active{transform:scale(.97)}
.pill-more[aria-expanded="true"]{color:var(--leaf)}
.pill-more[aria-expanded="true"] svg{transform:rotate(180deg)}

/* The sheet: a popover above the dock on a desk, a sheet from the bottom on a phone */
.sheet{pointer-events:auto;position:fixed;inset:auto auto calc(max(14px,env(safe-area-inset-bottom)) + 54px) max(14px,env(safe-area-inset-left));
  width:min(352px,calc(100vw - 28px));max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:visible;background:transparent;color:var(--ink)}
.sheet::backdrop{background:rgba(16,20,15,0);transition:background-color .3s}
.sheet.in::backdrop{background:rgba(16,20,15,.14)}
.sheet-in{display:grid;max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain;padding:10px 20px 18px;border-radius:6px;background:var(--folio);
  box-shadow:0 0 0 1px var(--rule),0 34px 60px -30px rgba(var(--shadow),.9);transform-origin:24px 100%;
  opacity:0;transform:translateY(10px) scale(.97);transition:opacity .2s,transform .5s var(--settle)}
.sheet.in .sheet-in{opacity:1;transform:none}
.sheet.out .sheet-in{opacity:0;transform:translateY(6px) scale(.98);transition:opacity .2s,transform .26s var(--paper-ease)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.sheet-title{margin:0;font:italic 300 30px/1 var(--display);letter-spacing:-.01em;text-wrap:balance}
.sheet-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-13px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer;transition:color .2s,background-color .2s}
.sheet-x:hover{color:var(--ink);background:var(--rule-2)}
.sheet-label{font:600 10.5px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-wrap:balance}
/* Birdsong and tanpura: switches, the whole row a target */
.sw{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:64px;margin:0;padding:12px 0;border:0;border-top:1px solid var(--rule-2);
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sw-text{display:grid;gap:3px}
.sw-name{font:400 19px/1.2 var(--read);text-wrap:balance}
.sw-d{font:italic 400 13.5px/1.4 var(--read);color:var(--ink-2);text-wrap:pretty}
.sw-track{flex:none;position:relative;width:42px;height:24px;border-radius:999px;box-shadow:inset 0 0 0 1.25px var(--ink-3);transition:background-color .25s,box-shadow .25s}
.sw-knob{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--ink-3);transition:transform .45s var(--settle),background-color .25s}
.sw[aria-checked="true"] .sw-track{background:var(--leaf);box-shadow:inset 0 0 0 1.25px var(--leaf)}
.sw[aria-checked="true"] .sw-knob{background:var(--folio);transform:translateX(18px)}
.sw:hover .sw-track{box-shadow:inset 0 0 0 1.25px var(--ink)}
.sw[aria-checked="true"]:hover .sw-track{box-shadow:inset 0 0 0 1.25px var(--leaf)}
.sheet-vol{display:grid;gap:2px;padding:14px 0 4px;border-top:1px solid var(--rule-2)}
.sheet-vol input{width:100%;height:44px;margin:0;accent-color:var(--leaf);cursor:pointer}
/* The hour: follow the visitor's clock, or hold one */
.hours{min-width:0;margin:0;padding:14px 0 0;border:0;border-top:1px solid var(--rule-2)}
.hours legend{float:left;width:100%;padding:0;margin-bottom:10px}
.hours-set{clear:both;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hour{position:relative;display:grid}
.hour--clock{grid-column:1/-1}
.hour input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hour span{display:grid;place-items:center;min-height:44px;padding:0 8px;border-radius:999px;border:1px solid var(--rule);font:600 11px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:center;text-wrap:balance;
  transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}
.hour:hover span{border-color:var(--ink-3);color:var(--ink)}
.hour input:checked + span{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:var(--accent);box-shadow:inset 0 0 0 .5px var(--accent);color:var(--accent)}
.hour input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.hour-note{margin:10px 0 0;font:italic 400 13.5px/1.4 var(--read);color:var(--ink-2);text-wrap:pretty}
.sheet-credit{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule-2);font:400 12.5px/1.5 var(--read);color:var(--ink-2);text-wrap:pretty}
.sheet-credit a{color:inherit;text-underline-offset:.18em}
@media (max-width:699px){
  .sheet{inset:auto 0 0;width:100%}
  .sheet.in::backdrop{background:rgba(16,20,15,.34)}
  .sheet-in{max-height:calc(100dvh - 40px);padding:12px max(20px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    border-radius:14px 14px 0 0;opacity:1;transform:translateY(100%);transition:transform .55s var(--paper-ease)}
  .sheet.in .sheet-in{transform:none}
  .sheet.out .sheet-in{opacity:1;transform:translateY(100%);transition:transform .26s var(--turn)}
}
@media (prefers-reduced-motion:reduce){
  .sheet-in,.sheet.out .sheet-in{transform:none!important;transition:opacity .15s}
  .sheet-in{opacity:0}
  .sw-knob,.sw-track,.pill-more svg{transition:none}
}
@media (forced-colors:active){
  .sheet-in{border:1px solid CanvasText}
  .sw-track,.sw-knob,.hour span{forced-color-adjust:none}
  .sw-track{box-shadow:none;border:1px solid ButtonText;background:Canvas}
  .sw-knob{top:3px;left:3px;background:ButtonText}
  .sw[aria-checked="true"] .sw-track{background:Highlight;border-color:Highlight;box-shadow:none}
  .sw[aria-checked="true"] .sw-knob{background:HighlightText}
  .hour span{border-color:ButtonText;color:ButtonText;background:ButtonFace}
  .hour input:checked + span{background:Highlight;border-color:Highlight;color:HighlightText}
  .hour input:focus-visible + span{outline-color:Highlight}
  .pill-bars i{forced-color-adjust:none;background:ButtonText}
}
@media (pointer:coarse){.vol{display:none!important}}
@media print{.dock{display:none}}

/* ---------- Field notes ---------- */
.fn-intro{grid-column:8/13;align-self:end;display:grid;gap:1em;font-size:16px;color:var(--ink-2)}
.fn-intro b{font-weight:500;color:var(--ink)}
@media (max-width:899px){.fn-intro{grid-column:1/-1}}
.page-hero .label a{color:var(--accent);text-decoration:none}
.page-hero .label a:hover{text-decoration:underline}
.fn-sec .h2{margin-bottom:var(--s5)}
.fns{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:var(--g)}
.fn{display:grid;grid-template-rows:auto 1fr;gap:var(--s3);padding:14px 14px 18px;background:var(--folio);box-shadow:0 0 0 1px var(--rule);scroll-margin-top:calc(var(--bar-h) + 16px)}
.fn:target{box-shadow:0 0 0 2px var(--accent)}
.fn-art{aspect-ratio:4/5}
.fn-art img{width:100%;height:100%;object-fit:contain}
.fn-text{display:grid;gap:4px;align-content:start}
.fn-name{font:400 20px/1.2 var(--read)}
.fn-sci{font:italic 400 14px/1.3 var(--read);color:var(--ink-2)}
.fn-text .label{margin-top:6px;color:var(--leaf)}
.fn-rec{display:grid;gap:3px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.fn-rec a{color:inherit}
.fn-foot{margin-top:var(--s4);max-width:70ch}
.credits b{font-family:var(--read)}

/* ---------- 404 ---------- */
.lost{padding-top:calc(var(--bar-h) + var(--s7));padding-bottom:var(--s7);align-items:center;row-gap:var(--s6);min-height:calc(88 * var(--svh))}
.lost-text{grid-column:1/7;display:grid;gap:var(--s4)}
.lost-art{grid-column:8/13}
@media (max-width:899px){.lost-text,.lost-art{grid-column:1/-1}.lost-art{max-width:320px}}

/* ---------- Footer ---------- */
.foot-sign{display:grid;gap:var(--s3);align-content:start}
.foot-sign .lead{font-size:24px;max-width:22ch}
.foot nav a{font:italic 300 24px/1.5 var(--display)}
.oa-mark{display:block;width:min(260px,100%);color:var(--ink);--stamp-ink:#A8361E;--stamp-reserve:var(--folio)}
.oa-mark svg{width:100%;height:auto}
.colophon a{color:inherit}