/* ==========================================================================
   mikevass.com : the ALTERNATIVE skin
   Loaded after site.css, over exactly the same pages and content.

   The rule: no single ground colour. Every kind of material gets its own.
     the map ........ an Admiralty-style chart, pale sea and lichen land
     records ........ a record-shop wall that floods with whatever you touch
     a record ....... banded in a colour taken from its own cover art
     tunes, scores .. manuscript paper, staves and an editor's red
     people ......... bottle green, a credits sheet with the sleeves on it
     places ......... chart blue, a gazetteer with bearings
     about .......... a pink carbon flimsy, typed
   Chart magenta (the colour of lights and cautions on a real chart) is the
   thread that runs through all of it.
   ========================================================================== */

:root{
  --paper:#f5f7f6; --ink:#0f1720; --ink2:#4a5664; --rule:rgba(15,23,32,.2);
  --rust:#c8216b;                 /* chart magenta */
  --signal:#ff5a1f;               /* the markers */
  --sea:#bcd8e1; --land:#e8efe5; --coast:#2f5566;
  --neg:#0e2632; --amber:#ffb000;
  --display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --label:'IBM Plex Mono',ui-monospace,monospace;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bar:var(--ink); --bar-on:#f5f7f6; --bar-accent:var(--amber);
}
:where(body.alt){background-color:var(--paper);background-image:var(--grain);color:var(--ink)}
.alt a{color:var(--rust);text-decoration-thickness:1.5px;text-underline-offset:3px}
.alt a:hover{text-decoration-thickness:3px}
.alt ::selection{background:var(--amber);color:#0f1720}
.alt :focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- the bar ---------- */
.alt .top{background:var(--bar);color:var(--bar-on);border-bottom:0;padding:11px 24px 10px;align-items:center}
.alt .mark{font:900 31px/.9 var(--display);text-transform:uppercase;letter-spacing:.01em;color:inherit}
.alt .top nav a{color:inherit;font:500 12.5px var(--label);letter-spacing:.07em;opacity:.86}
.alt .top nav a:hover,.alt .top nav a[aria-current=page]{opacity:1}
.alt .top nav a[aria-current=page]{border-bottom:3px solid var(--bar-accent)}
.alt .top nav a::after{background:var(--bar-accent)}

/* ---------- type ---------- */
.alt h1.ph,.alt .side h1,.alt .rechead h1{font:900 clamp(58px,8.4vw,132px)/.84 var(--display);
  text-transform:uppercase;letter-spacing:-.004em;margin:44px 0 18px;max-width:none}
.alt h2{font:800 clamp(26px,2.5vw,36px)/1 var(--display);text-transform:uppercase;letter-spacing:.012em}
.alt .prose h2{font-size:clamp(24px,2.2vw,32px)}
.alt .cap{font:500 11.5px/1.45 var(--label);letter-spacing:.09em}
.alt .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.alt .btn{border-width:2px;font:500 12.5px var(--label);letter-spacing:.08em}
.alt .btn.buy{background:var(--rust);border-color:var(--rust)}

/* ---------- the footer: a reel label ---------- */
.alt .foot{background:var(--neg);color:#cfe0e6;border-top:0;position:relative}
.alt .foot .giant{color:rgba(255,255,255,.1);cursor:pointer;transition:color .4s;user-select:none}
.alt .foot .giant:hover{color:rgba(255,176,0,.3)}
.alt .foot a{color:#fff}

/* ==========================================================================
   THE MAP
   ========================================================================== */
.home{--bar:var(--neg)}
.home .mapwrap{background:var(--sea);border-right:0}
.home .sea{fill:var(--sea)}
.home .land{fill:var(--land);stroke:var(--coast);stroke-width:1.1}
.home .route{stroke:var(--rust);stroke-width:2.4}
.home .ctx{fill:#3c6576;font-family:var(--label);font-weight:500}
.home .mk .dot{background:var(--signal);border:2.5px solid #0f1720;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.home .mk:hover .dot,.home .mk[aria-pressed=true] .dot{background:var(--rust)}
.home .mk .nm{font:800 17px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;
  text-shadow:0 0 3px var(--sea),0 0 3px var(--sea),0 0 7px var(--sea),0 0 10px var(--sea)}
.home .mk[aria-pressed=true] .nm{color:var(--rust);font-size:22px}
.home .stem{background:#fff;border:2px solid #0f1720;box-shadow:4px 4px 0 var(--rust);font-family:Literata,serif}
.home .stem small{color:var(--rust)}
.home .stem:hover,.home .stem.open{background:#0f1720;color:#fff;border-color:#0f1720}
.home .stem.node{background:#0f1720;border-color:#0f1720}
.home .zoom button{background:#fff;border:2px solid #0f1720;border-radius:0}
.home .side{background:var(--paper);background-image:var(--grain);border-left:6px solid var(--neg)}
.home .side h1{font-size:clamp(64px,6.4vw,104px);margin:8px 0 14px}
.home .plate{border-top:3px solid var(--ink)}
.home .plate h2{font:800 32px/1 var(--display);text-transform:uppercase}

/* after dark the chart goes to night, and the lights come on (see alt.js) */
.home.night{--sea:#0d2a38;--land:#1b3a33;--coast:#6fa2a8}
.home.night .ctx{fill:#8fb5bf}
.home.night .mk .nm{color:#eaf6f4;text-shadow:0 0 4px #0d2a38,0 0 4px #0d2a38,0 0 10px #0d2a38}
.home.night .route{stroke:#ff7fb0}
.home.night .mapwrap{background:#0d2a38}
.lighthouse{pointer-events:none}
.lighthouse .beam{fill:url(#beamgrad);opacity:0;transform-origin:0 0}
.lighthouse .lamp{fill:#fff6c9;filter:drop-shadow(0 0 4px #ffe27a)}
.lighthouse text{font:500 9px var(--label);fill:#ffe9a8;letter-spacing:.06em}
.mapnote{position:absolute;left:14px;top:12px;z-index:6;font:500 11px var(--label);letter-spacing:.06em;
  color:#0f1720;background:rgba(255,255,255,.82);padding:5px 8px;max-width:60%}
.home.night .mapnote{background:rgba(13,42,56,.85);color:#ffe9a8}

/* three doors, different every visit */
.home .strip{background:var(--neg);padding:38px 0 46px}
.home .three{border:0;gap:3px;background:var(--neg)}
.home .tile{background:var(--paper);background-image:var(--grain);border:0;min-height:170px;transition:background-color .3s}
.home .tile .yr{font-size:118px;color:rgba(15,23,32,.07)}
.home .tile .tt{font:800 30px/.95 var(--display);text-transform:uppercase}
.home .tile .kind{display:block;font:500 10.5px var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--rust);margin-bottom:10px;position:relative}
.home .tile:hover{background:var(--tile,var(--rust));color:#fff}
.home .tile:hover .ss,.home .tile:hover .kind{color:#fff}
.home .doors-cap{color:#cfe0e6;margin:0 0 14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.home .doors-cap button{background:none;border:0;color:var(--amber);font:500 11.5px var(--label);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;padding:0}
.onthisday{margin:22px 0 0;padding:14px 16px;background:var(--neg);color:#e5f1f4}
.onthisday .cap{color:var(--amber);margin:0 0 6px}
.onthisday p{margin:0;font-size:16px;line-height:1.45}
.onthisday a{color:#fff}

/* ==========================================================================
   RECORDS: the wall
   ========================================================================== */
.k-records{--bar:#0f1720;background-color:var(--flood,#e8461e);transition:background-color .55s ease}
.k-records main .wrap>.ph,.k-records main .wrap>.lede{color:var(--flood-on,#0f1720);transition:color .55s}
.k-records h1.ph{font-size:clamp(76px,13vw,210px);margin:30px 0 8px;line-height:.8}
.k-records .wallgrid{background:#0f1720;gap:4px;border:4px solid #0f1720;margin-top:30px;
  grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.k-records .wallgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.k-records .wallgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.k-records .wallgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-records .wall{background:#0f1720;color:#f5f7f6}
.k-records .wall img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .4s}
.k-records .wall:hover img,.k-records .wall:focus-visible img{transform:scale(1.06) rotate(-1.2deg)}
.k-records .wall.hascv:hover img{opacity:1;filter:brightness(.35) saturate(1.2)}
.k-records .wall .tt{font:800 27px/.92 var(--display);text-transform:uppercase}
.k-records .wall .ss{color:#f5f7f6;opacity:.8;font-family:var(--label)}
.k-records .wall:hover{background:#0f1720;color:#fff}
.k-records .wall .yr{color:rgba(255,255,255,.1)}

/* ==========================================================================
   A RECORD: banded in its own cover's colour
   ========================================================================== */
.recpage{--bar:var(--deep);--bar-on:#fff;--bar-accent:var(--rec)}
.recpage .rec{overflow:visible}
.recpage .rechead{position:relative;z-index:1;background:var(--rec);color:var(--on);
  box-shadow:0 0 0 100vmax var(--rec);clip-path:inset(0 -100vmax);padding-top:44px;padding-bottom:40px}
.recpage .rechead h1{margin:10px 0 18px;color:var(--on);max-width:13em}
.recpage .rechead .cap,.recpage .rechead .placeline,.recpage .rechead .placeline .verb{color:var(--on);opacity:.84}
.recpage .rechead .lede{color:var(--on);max-width:34em}
.recpage .rechead a{color:var(--on);text-decoration-color:currentColor}
.recpage .giantyr{z-index:2;color:var(--on);opacity:.12;top:.02em}
.recpage .heroimg{margin:0;border:0}
.recpage .heroimg img{max-height:58vh}
.recpage main a{color:var(--deep);text-decoration-color:var(--rec);text-decoration-thickness:2px}
.recpage main .rechead a{color:var(--on)}
.recpage .face.front img{box-shadow:10px 10px 0 var(--deep)}
.recpage .face.back{background:#fff;border:2px solid var(--deep)}
.recpage .player .bc{box-shadow:10px 10px 0 var(--rec)}
.recpage .creds dt{font-family:var(--label);font-weight:500;letter-spacing:.06em}
.recpage .creds dt,.recpage .creds dd{border-top-color:var(--rule)}
.recpage .peo a{font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.recpage .trk{border-top:3px solid var(--deep)}
.recpage .trk .n{display:inline-block;min-width:28px;text-align:center;background:var(--rec);color:var(--on);
  font:500 12px/22px var(--label);height:22px;align-self:center}
.recpage .trk .tt{font:600 20px/1.2 Literata,serif}
.recpage .tracks h2,.recpage .conn h2{border-bottom:0}
.recpage .sheetband{background:var(--deep);border:0;margin:44px 0 36px;padding:40px 0 46px}
.recpage .sheetband h2{color:#fff}
.recpage .sheet figcaption{color:rgba(255,255,255,.7)}
.recpage .sheet .fn{color:var(--rec)}
.recpage .sheet a:hover img{outline-color:var(--rec)}
.recpage .conn ul{border-top:3px solid var(--deep)}
.recpage .conn li{font-size:18px}
.recpage blockquote{border-left-color:var(--rec)}
.recpage .lyric{background:#fff;padding:26px 30px;margin:40px 0;box-shadow:8px 8px 0 var(--rec);max-width:44em}

/* films: a cinema band, with sprocket holes */
.alt .films{position:relative;background:#11181f;color:#e8eef2;padding:46px 24px 40px;margin:44px 0;
  box-shadow:0 0 0 100vmax #11181f;clip-path:inset(0 -100vmax)}
.alt .films::before,.alt .films::after{content:"";position:absolute;left:-100vmax;right:-100vmax;height:12px;
  background:radial-gradient(circle at 50% 50%,#2c3943 0 3.2px,transparent 3.6px) 0 0/22px 12px repeat-x}
.alt .films::before{top:12px}.alt .films::after{bottom:12px}
.alt .films h2{color:#fff}
.alt .filmgrid figcaption{color:#e8eef2}
.alt .filmgrid figcaption .how{color:#9fb0bc}
.alt .films a{color:var(--amber)}
.alt .video{border:0;box-shadow:none}

/* ==========================================================================
   TUNES AND SCORES: manuscript paper
   ========================================================================== */
.k-tunes,.k-tune{--paper:#fcfcf9;--ink:#10233f;--ink2:#4a5d77;--rule:rgba(16,35,63,.18);--rust:#c8102e;
  --bar:#10233f;--bar-accent:#ff4d5a;
  background-color:#fcfcf9;
  background-image:repeating-linear-gradient(180deg,
    rgba(16,35,63,.075) 0 1px,transparent 1px 9px,rgba(16,35,63,.075) 9px 10px,transparent 10px 18px,
    rgba(16,35,63,.075) 18px 19px,transparent 19px 27px,rgba(16,35,63,.075) 27px 28px,transparent 28px 36px,
    rgba(16,35,63,.075) 36px 37px,transparent 37px 92px)}
.k-tunes h1.ph,.k-tune h1{font:400 clamp(58px,8vw,122px)/.92 'IM Fell English',Georgia,serif;text-transform:none;letter-spacing:-.015em}
.k-tune h1{font-style:italic}
.k-tunes .tnav{border-top:3px double var(--ink);border-bottom:3px double var(--ink);font-family:var(--label);font-size:13px;letter-spacing:.03em}
.k-tunes .tgroup h2{font:800 30px/1 var(--display);text-transform:uppercase;margin:44px 0 6px}
.k-tunes .tgroup h2 .how{font-family:var(--label);color:var(--rust)}
.k-tunes .tlist{border-top:2px solid var(--ink)}
.k-tunes .tlist .tn{font:400 25px/1.1 'IM Fell English',serif}
.k-tunes .tlist a{background:rgba(252,252,249,.86)}
.k-tunes .tlist a:hover{background:var(--ink);color:#fff}
.k-tune .score img{box-shadow:10px 10px 0 var(--ink);border:0;background:#fff}
.k-tune .bc{box-shadow:10px 10px 0 var(--rust)}
.k-tune .twocol h2{font:800 28px/1 var(--display)}
.fork{display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;background:none;border:2px solid var(--ink);
  font:500 12px var(--label);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;cursor:pointer;color:var(--ink)}
.fork:hover{background:var(--ink);color:#fff}
.fork.ringing{animation:ring .12s linear 10}
@keyframes ring{50%{transform:translateX(1px)}}

/* ==========================================================================
   PEOPLE: bottle green, a credits sheet with the sleeves on it
   ========================================================================== */
.k-people{--paper:#15382e;--ink:#eaf4ee;--ink2:#9fc2b1;--rule:rgba(234,244,238,.16);--rust:#ffd166;
  --bar:#0b231c;--bar-accent:#ffd166;background-color:#15382e;color:#eaf4ee}
.k-people h1.ph{font-size:clamp(76px,13vw,210px);line-height:.8;margin:30px 0 8px}
.k-people .lede{color:#cfe5d9}
.k-people .people{columns:3 300px;column-gap:34px;margin:30px 0 70px}
.k-people .pl{break-inside:avoid;border-top:2px solid rgba(234,244,238,.3);padding:16px 0 10px}
.k-people .pl h2{font:800 28px/.95 var(--display);text-transform:uppercase;color:#fff;margin:0 0 4px}
.k-people .pl h2 .n{display:block;font:500 10.5px var(--label);letter-spacing:.1em;color:#ffd166;margin-top:6px;text-transform:uppercase}
.k-people .pl ul{margin:6px 0 4px}
.k-people .pl li{font-size:16px;display:flex;align-items:center;gap:9px;padding:4px 0}
.k-people .pl a{color:#eaf4ee;text-decoration-color:rgba(255,209,102,.6)}
.k-people .pl .mono{color:#9fc2b1;margin-left:auto;font-family:var(--label);font-size:11.5px}
.chip{width:28px;height:28px;flex:none;object-fit:cover;box-shadow:2px 2px 0 #0b231c;transition:transform .25s}
.chip.none{background:#2a5446;display:inline-block}
.k-people li:hover .chip{transform:rotate(-6deg) scale(1.25)}
.k-people .pl:target{background:#1d4a3d;outline:3px solid #ffd166;outline-offset:6px}
.azbar{display:flex;flex-wrap:wrap;gap:2px;margin:20px 0 0}
.azbar a{font:800 20px/1 var(--display);color:#eaf4ee;text-decoration:none;padding:6px 8px;border:1px solid rgba(234,244,238,.25)}
.azbar a:hover{background:#ffd166;color:#15382e}

/* ==========================================================================
   PLACES: chart blue, a gazetteer
   ========================================================================== */
.k-places{--paper:#d7e7ec;--ink:#0e2a36;--ink2:#3a5e6d;--rule:rgba(14,42,54,.2);--rust:#b0144f;
  --bar:#0e2a36;--bar-accent:#ff5a1f;background-color:#d7e7ec}
.k-places h1.ph{font-size:clamp(76px,13vw,210px);line-height:.8;margin:30px 0 8px}
.k-places .gaz{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:0 34px;margin:30px 0 70px}
.k-places .pl{border-top:2px solid var(--ink);padding:16px 0 12px}
.k-places .pl h2{font:800 32px/.95 var(--display);text-transform:uppercase}
.k-places .pl h2 small{font-family:var(--label);font-weight:500;letter-spacing:.08em}
.k-places .pl .brg{display:block;font:500 11px var(--label);letter-spacing:.06em;color:var(--rust);margin-top:4px}
.k-places .pl li{font-size:17px}
.k-places .pl:target{background:#eaf3f6;outline:3px solid var(--signal);outline-offset:6px}

/* ==========================================================================
   ABOUT: a pink carbon flimsy, typed
   ========================================================================== */
.k-about{--paper:#f7e4ea;--ink:#2a1119;--ink2:#6b4652;--rust:#a3163f;--bar:#2a1119;--bar-accent:#ff7fa8;background-color:#f7e4ea}
.k-about .prose{font:400 17px/1.8 'Courier Prime',monospace;max-width:66ch;background:rgba(255,255,255,.45);
  padding:30px 34px;box-shadow:6px 6px 0 rgba(42,17,25,.85);margin-bottom:60px;transform:rotate(-.35deg)}

/* lost */
.k-lost{--paper:#dfe8ea;--bar:#0e2632;background-color:#dfe8ea}

/* ==========================================================================
   TREATS
   ========================================================================== */
/* the trail of where you have wandered */
.trail{position:relative;z-index:5;background:#0f1720;color:#dbe4ea;font:500 11.5px/1.5 var(--label);letter-spacing:.04em;
  padding:9px 24px;display:flex;gap:10px;align-items:baseline;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.trail b{color:var(--amber);font-weight:500;letter-spacing:.09em;text-transform:uppercase;flex:none}
.trail a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.trail a:hover{border-bottom-color:var(--amber)}
.trail .sep{color:#6e8190}
.trail .here{color:var(--amber)}
.trail button{margin-left:auto;background:none;border:0;color:#7f93a1;font:inherit;cursor:pointer;flex:none}

/* stamped: you have been here before */
.seen{position:relative}
.stamp{position:absolute;z-index:3;right:8px;top:8px;font:800 12px/1 var(--display);letter-spacing:.14em;
  color:var(--rust);border:2px solid var(--rust);padding:3px 5px 2px;transform:rotate(-9deg);opacity:.85;
  pointer-events:none;background:rgba(255,255,255,.72);mix-blend-mode:multiply}
.k-people .stamp,.k-places .stamp{position:static;display:inline-block;margin-left:8px;vertical-align:middle;background:none}
.k-people .stamp{color:#ffd166;border-color:#ffd166;mix-blend-mode:normal}
.k-tunes .tlist .stamp{position:static;display:inline-block;margin-left:10px;vertical-align:middle}

/* somewhere else */
.elsewhere{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:9px;
  background:var(--rust);color:#fff;border:0;padding:12px 16px 11px 14px;cursor:pointer;
  font:800 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:4px 4px 0 #0f1720;
  transition:transform .2s}
.elsewhere:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #0f1720}
.elsewhere kbd{font:500 10px var(--label);border:1px solid rgba(255,255,255,.6);padding:1px 4px;opacity:.85}
.elsewhere .die{display:inline-block;transition:transform .5s}
.elsewhere:hover .die{transform:rotate(180deg)}
.k-people .elsewhere{background:#ffd166;color:#15382e}

/* a card that shows where "somewhere else" is about to take you */
.whither{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(15,23,32,.55);animation:fade .25s}
.whither div{background:var(--paper,#fff);color:var(--ink);padding:26px 30px;max-width:420px;box-shadow:8px 8px 0 var(--rust);
  font:500 12px var(--label);letter-spacing:.08em;text-transform:uppercase}
.whither strong{display:block;font:900 44px/.9 var(--display);margin:10px 0 0;letter-spacing:0}
.k-people .whither div{background:#fff;color:#0f1720}
@keyframes fade{from{opacity:0}}

/* "fiddle": the page tunes up */
.tuning h1,.tuning h2{animation:pluck .9s cubic-bezier(.2,.9,.2,1)}
@keyframes pluck{0%{transform:none}12%{transform:skewX(-7deg) translateX(3px)}28%{transform:skewX(5deg)}46%{transform:skewX(-3deg)}64%{transform:skewX(1.5deg)}100%{transform:none}}
.note-float{position:fixed;z-index:70;pointer-events:none;font:400 30px/1 'IM Fell English',serif;color:var(--rust);
  animation:floatup 1.6s ease-out forwards}
@keyframes floatup{to{transform:translateY(-120px) rotate(18deg);opacity:0}}

/* canntaireachd, on the A.D.A.M decoder */
.vocables{display:block;font:italic 400 15px/1.3 'IM Fell English',serif;color:var(--rust);opacity:0;
  transition:opacity .4s;margin-top:4px}
.trk-row:hover .vocables,.trk-row:focus-within .vocables{opacity:.95}

/* ==========================================================================
   small screens and quiet motion
   ========================================================================== */
@media (max-width:760px){
  .alt h1.ph,.alt .rechead h1{font-size:clamp(46px,14vw,78px)}
  .k-records h1.ph,.k-people h1.ph,.k-places h1.ph{font-size:clamp(64px,22vw,120px)}
  .elsewhere{right:12px;bottom:12px;padding:10px 12px;font-size:15px}
  .elsewhere kbd{display:none}
  .k-about .prose{padding:20px;transform:none}
  .mapnote{max-width:78%}
}
@media (prefers-reduced-motion:reduce){
  .k-records{transition:none}
  .k-records .wall img,.chip,.elsewhere,.elsewhere .die{transition:none}
  .tuning h1,.tuning h2,.fork.ringing,.note-float{animation:none}
  .note-float{display:none}
  .whither{animation:none}
}

/* the footer tally, and the reel label under the big name */
.alt .foot .tally{font:500 11.5px/1.5 var(--label);letter-spacing:.05em;color:#8fb0bd;margin-top:10px}
.alt .foot .tally b{color:var(--amber);font-weight:500}
.tapelabel{min-height:0;margin:0 0 14px;font:500 12px/1.5 var(--label);letter-spacing:.04em;color:#e5f1f4}
.tapelabel:empty{display:none}
.tapelabel span{display:inline-block;background:var(--amber);color:#0f1720;padding:2px 7px;margin-right:10px;text-transform:uppercase;letter-spacing:.1em}
.tapelabel em{font-style:normal;color:#9fb8c2;margin-left:6px}
.tapelabel.on{animation:tape .5s cubic-bezier(.2,.7,.2,1)}
@keyframes tape{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* boat, thistle: a wee boat sails along the bottom of the window */
.sailby{position:fixed;z-index:65;bottom:6px;left:-100px;pointer-events:none;animation:sail 11s linear forwards}
.sailby svg{display:block;animation:bob 1.6s ease-in-out infinite alternate}
@keyframes sail{to{transform:translateX(calc(100vw + 200px))}}
@keyframes bob{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(3deg) translateY(-3px)}}

/* the lamp halos breathe rather than snap */
.lighthouse .halo{transition:opacity .18s}
@media (prefers-reduced-motion:reduce){.sailby,.tapelabel.on{animation:none}.lighthouse .halo{transition:none}}

/* cuttings: pinned to the wall with tape, mastheads in the record's own colour */
.recpage .press{position:relative;padding:40px 0 30px}
.recpage .press h2{font:900 clamp(40px,5vw,72px)/.9 var(--display);text-transform:uppercase}
.recpage .cuts{gap:34px 28px}
.recpage .cut{position:relative;background:#fff;background-image:var(--grain);border:0;padding:20px 20px 16px;
  box-shadow:6px 6px 0 var(--deep);transform:rotate(calc((var(--n) - 1.3) * .9deg))}
.recpage .cut:nth-child(3n){transform:rotate(1.4deg)}
.recpage .cut::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;
  background:rgba(255,176,0,.55);transform:rotate(-3deg);mix-blend-mode:multiply}
.recpage .cut:hover{transform:rotate(0) scale(1.02)}
.recpage .cut .mast{font:800 26px/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;border-bottom:4px solid var(--rec);color:var(--ink)}
.recpage .cut .stars{color:var(--rec);font-size:15px}
.recpage .cut .meta{font-family:var(--label);opacity:.75}
.recpage .cut blockquote p{font:400 19px/1.42 Literata,Georgia,serif;font-style:normal}
.recpage .cut.k-interview{background-color:var(--deep);color:#fff}
.recpage .cut.k-interview .mast{color:#fff}
.recpage .cut.k-interview .said{color:var(--amber)}
.recpage .cut.k-interview blockquote p{font:400 italic 22px/1.32 'IM Fell English',serif}
.recpage .cut.k-interview a{color:var(--amber)}
.recpage .cut a.readit{font-family:var(--label);color:var(--deep);text-decoration-color:var(--rec)}
@media (prefers-reduced-motion:reduce){.recpage .cut,.recpage .cut:hover,.recpage .cut:nth-child(3n){transform:none}}
.recpage .cut.k-interview a.readit{color:var(--amber);text-decoration-color:var(--amber)}

/* ==========================================================================
   NEWS: the archive's own paper. White newsprint, black ink, one spot red.
   ========================================================================== */
.k-news{--paper:#fbfbfa;--ink:#111;--ink2:#555;--rust:#d7141a;--bar:#111;--bar-accent:#d7141a;--rec:#d7141a;--deep:#111;--on:#fff;
  background-color:#fbfbfa;
  background-image:var(--grain),radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.2px);background-size:auto,5px 5px}
.k-news .newsdate{display:flex;justify-content:space-between;gap:10px;border-top:3px solid #111;border-bottom:1px solid #111;padding:7px 0 6px;margin-top:34px}
.k-news h1.ph{font-size:clamp(90px,17vw,260px);line-height:.78;margin:14px 0 10px;letter-spacing:-.01em;border-bottom:8px solid #111;padding-bottom:10px}
.k-news .lede{max-width:44em;columns:2 340px;column-gap:34px;column-rule:1px solid rgba(0,0,0,.2)}
.k-news .yrnav a{font:800 20px/1 var(--display);border:2px solid #111;color:#111;padding:6px 9px}
.k-news .yrnav a:hover{background:#d7141a;border-color:#d7141a;color:#fff}
.k-news .yr h2{font:900 clamp(80px,12vw,180px)/.8 var(--display);color:transparent;-webkit-text-stroke:2px #111;border-bottom:3px solid #111;margin-top:30px}
.k-news .yr h2 span{background:linear-gradient(#d7141a,#d7141a) 0 88%/100% 18% no-repeat}
.k-news .cut{position:relative;background:#fff;border:0;box-shadow:5px 5px 0 #111;transform:rotate(calc((var(--n) - 1.5) * .8deg))}
.k-news .cut::before{content:"";position:absolute;top:-10px;left:50%;width:78px;height:20px;margin-left:-39px;background:rgba(255,176,0,.55);transform:rotate(-3deg);mix-blend-mode:multiply}
.k-news .cut:hover{transform:none}
.k-news .cut .mast{font:800 25px/.95 var(--display);text-transform:uppercase;border-bottom:4px solid #111}
.k-news .cut .stars{color:#d7141a}
.k-news .cut .meta{font-family:var(--label)}
.k-news .cut .what{font-family:Literata,serif;font-weight:600}
.k-news .cut blockquote p{font:400 18px/1.42 Literata,Georgia,serif}
.k-news .cut.k-interview{background:#111;color:#fff}
.k-news .cut.k-interview .mast{border-color:#fff}
.k-news .cut.k-interview .said{color:#ffb000}
.k-news .cut.k-interview blockquote p{font:italic 400 21px/1.3 'IM Fell English',serif}
.k-news .cut.k-interview a{color:#ffb000}
.k-news .cut a{color:#d7141a}
.k-news .cut.plain{background:transparent;box-shadow:none;border:1.5px dashed #111;transform:none}
.k-news .cut.plain::before{content:"✂";background:none;width:auto;height:auto;top:-12px;left:14px;margin:0;font-size:18px;transform:none;mix-blend-mode:normal;background:#fbfbfa;padding:0 4px;line-height:1}
.k-news .cut.plain .mast{font-size:21px;border-bottom-width:2px}
@media (prefers-reduced-motion:reduce){.k-news .cut{transform:none}}
.k-people .pl .members{color:#cfe5d9;font-family:Literata,serif}.k-people .pl .members a{color:#ffd166}
.home .loch{stroke:var(--coast);stroke-width:.6}

/* ==========================================================================
   THE PEOPLE WEB
   ========================================================================== */
.k-people .web{margin:34px 0 40px;position:relative}
.k-people .webstage{position:relative;margin:0 -24px;background:radial-gradient(circle at 50% 50%,rgba(255,209,102,.05),transparent 60%)}
#websvg{display:block;width:min(100%,94vh);height:auto;aspect-ratio:1;margin:0 auto;overflow:hidden;cursor:default;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none}
#websvg.zoomed{cursor:grab}
.w-rim{fill:none;stroke:rgba(234,244,238,.16);stroke-width:1.2}
.w-rim2{fill:none;stroke:rgba(234,244,238,.07);stroke-dasharray:2 7}
.w-mid{font:900 30px var(--display);fill:rgba(234,244,238,.12);letter-spacing:.08em}
.w-year{font:500 13px var(--label);fill:#9fc2b1;letter-spacing:.06em}
.w-link{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.34;stroke-dasharray:1;stroke-dashoffset:0;transition:opacity .25s,stroke-width .25s,stroke-dashoffset 1.6s cubic-bezier(.3,.6,.2,1)}
#websvg.pre .w-link{stroke-dashoffset:1}
.w-halo{opacity:.9;transition:r .25s}
.w-rec image{transition:opacity .25s}
.w-dot{fill:#ffd166;stroke:#15382e;stroke-width:2;transition:fill .2s}
.w-name{font:500 12px var(--label);fill:#cfe5d9;opacity:0;pointer-events:none;transition:opacity .2s;paint-order:stroke;stroke:#15382e;stroke-width:4px;stroke-linejoin:round}
.w-person.big .w-name{opacity:.85}
.w-person:hover .w-name,.w-person:focus .w-name,.w-person.on .w-name{opacity:1;fill:#fff}
.w-person:focus{outline:none}.w-person:focus .w-dot{stroke:#fff;stroke-width:3}
#websvg.focus .w-link{opacity:.05}
#websvg.focus .w-link.on{opacity:.95;stroke-width:2.6}
.w-dot{vector-effect:non-scaling-stroke}
#websvg.focus .w-person:not(.on){opacity:.3}
#websvg.focus .w-person.on .w-dot{fill:#fff}
#websvg.focus .w-rec:not(.on) image{opacity:.28}
#websvg.focus .w-rec.on .w-halo{r:29}
.webinfo{position:absolute;left:24px;top:10px;width:260px;border-top:3px solid #ffd166;padding:12px 14px 12px;color:#cfe5d9;font-size:15px;line-height:1.5;background:rgba(21,56,46,.86);z-index:2}
.webzoom{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:2}
.webzoom button{width:40px;height:40px;background:#15382e;color:#ffd166;border:2px solid #ffd166;font:800 20px var(--display);cursor:pointer}
.webzoom button[data-z=all]{font:500 11px var(--label);letter-spacing:.06em}
.webzoom button:hover{background:#ffd166;color:#15382e}
.w-name{font-size:calc(12px / var(--z,1))!important}
.w-year{font-size:calc(13px / var(--z,1))}
#websvg.zoomed .w-name{opacity:.9}
.webinfo h3{font:800 34px/.95 var(--display);text-transform:uppercase;color:#fff;margin:4px 0 10px}
.webinfo a{color:#ffd166}
.webinfo span{font:500 11.5px var(--label);color:#9fc2b1;margin-left:4px}
.k-people .web figcaption{display:flex;justify-content:space-between;gap:12px;font:500 11.5px var(--label);letter-spacing:.06em;text-transform:uppercase;color:#9fc2b1;border-top:1px solid rgba(234,244,238,.2);padding-top:10px;margin-top:10px}
.k-people .web figcaption a{color:#ffd166}
@media (max-width:900px){.k-people .webstage{margin:0 -16px}.webinfo{position:static;width:auto;margin:10px 16px 0;min-height:7em}.webzoom{right:12px;top:6px;transform:none}.webzoom button{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.w-link,.w-halo,.w-dot,.w-name,.w-rec image{transition:none}}

/* ==========================================================================
   TIMELINE: a reel of tape running left to right through the years
   ========================================================================== */
.k-timeline{--paper:#141a3c;--ink:#e9ecff;--ink2:#a9b0da;--rust:#ffb000;--bar:#0c1030;--bar-accent:#ffb000;
  background-color:#141a3c;color:#e9ecff}
.k-timeline .lede{color:#c9cef0}
.k-timeline h1.ph{font-size:clamp(76px,13vw,210px);line-height:.8;margin:30px 0 8px}
.tl{position:relative;margin:30px 0 0}
.tl-pin{position:relative}
.tl-track{display:flex;flex-direction:column;gap:0;padding:0 24px}
.tl-year{position:relative;padding:18px 0 34px;border-top:1px solid rgba(233,236,255,.14)}
.tl-y{font:900 clamp(70px,10vw,150px)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(233,236,255,.5);margin:0 0 14px;letter-spacing:-.01em}
.tl-recs{display:flex;flex-wrap:wrap;gap:16px}
.tl-rec{display:block;width:170px;color:#e9ecff;text-decoration:none;background:#0c1030;box-shadow:6px 6px 0 var(--rec);transition:transform .25s}
.tl-rec:hover,.tl-rec:focus-visible{transform:translate(-3px,-3px) rotate(-1deg)}
.tl-rec img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.tl-rec .k{display:block;font:500 10px var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--rec);padding:8px 10px 0;filter:brightness(1.4)}
.tl-rec b{display:block;font:800 21px/.95 var(--display);text-transform:uppercase;padding:4px 10px 0}
.tl-rec .s{display:block;font:400 13px/1.35 Literata,serif;color:#b9bfe6;padding:6px 10px 10px}
.tl-tape{height:16px;margin:22px -24px 18px;background:linear-gradient(180deg,#3a2415,#6b4226 30%,#8a5a36 50%,#6b4226 70%,#2c1a10);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.tl-evs{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.tl-ev,.tl-press{display:block;max-width:250px;padding:10px 12px 11px;text-decoration:none;color:#e9ecff;border-left:3px solid var(--c,#ffb000);background:rgba(233,236,255,.05);font:400 15px/1.35 Literata,serif}
.tl-ev .k,.tl-press .k{display:block;font:500 10px var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--c,#ffb000);margin-bottom:5px}
.tl-ev .k i{font-style:normal;margin-right:6px}
.tl-ev.k-award{--c:#ffb000}.tl-ev.k-stage{--c:#ff7fb0}.tl-ev.k-voyage{--c:#6fd3e6}.tl-ev.k-studio{--c:#a8e07a}
.tl-press{--c:#c9cef0;border-left-style:dotted}
.tl-press q{display:block;font-style:italic}
.tl-press .who{display:block;font:500 10.5px var(--label);color:#a9b0da;margin-top:6px}
.tl-ev:hover,.tl-press:hover{background:rgba(233,236,255,.12)}
.tl-quiet{font:italic 400 16px Literata,serif;color:#8a90bd;margin:0}
.tl-end{display:none}
.tl-ruler{display:flex;flex-wrap:wrap;gap:4px;padding:14px 24px 30px;position:relative}
.tl-ruler a{font:500 12px var(--label);color:#a9b0da;text-decoration:none;padding:4px 6px;border:1px solid rgba(233,236,255,.2)}
.tl-ruler a.now,.tl-ruler a:hover{background:#ffb000;color:#141a3c;border-color:#ffb000}
.tl-pos{display:none}

/* wide screens: pinned, sideways */
.tl.tl-h .tl-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.tl.tl-h .tl-track{flex-direction:row;align-items:stretch;padding:0 6vw 0 4vw;will-change:transform;flex:none}
.tl.tl-h .tl-year{flex:none;width:var(--w);padding:0 30px 0 0;border-top:0;
  display:grid;grid-template-rows:118px 300px 16px auto;opacity:calc(.45 + var(--near,1) * .55)}
.tl.tl-h .tl-year.empty{width:220px;min-width:0}
.tl.tl-h .tl-y{margin:0 0 10px}
.tl.tl-h .tl-recs{flex-wrap:nowrap;align-items:flex-end}
.tl.tl-h .tl-tape{margin:0 -30px 0 0}
.tl.tl-h .tl-evs{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:250px;gap:10px 12px;padding-top:16px;align-content:start}
.tl.tl-h .tl-ev,.tl.tl-h .tl-press{max-width:none}
.tl.tl-h .tl-rec{width:170px}
.tl.tl-h .tl-rec img{height:120px;aspect-ratio:auto}
.tl.tl-h .tl-rec .s{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tl.tl-h .tl-recs{height:300px;padding-bottom:10px;box-sizing:border-box}
.tl.tl-h .tl-y{align-self:end}
.tl.tl-h .tl-end{display:flex;align-items:center;flex:none;width:30vw;font:900 60px var(--display);color:rgba(233,236,255,.25);text-transform:uppercase}
.tl.tl-h .tl-ruler{position:absolute;left:0;right:0;bottom:0;padding:10px 230px 18px 4vw;flex-wrap:nowrap;justify-content:space-between;background:linear-gradient(transparent,#141a3c 40%)}
.tl.tl-h .tl-pos{display:block;position:absolute;left:4vw;bottom:8px;height:3px;background:#ffb000;max-width:calc(100% - 4vw - 230px)}
@media (max-height:780px){.tl.tl-h .tl-rec .s{display:none}.tl.tl-h .tl-year{grid-template-rows:90px 220px 16px auto}.tl.tl-h .tl-recs{height:220px}.tl.tl-h .tl-y{font-size:84px}}
@media (prefers-reduced-motion:reduce){.tl-rec{transition:none}}

/* ==========================================================================
   THE CABINET: a lacquered specimen cabinet, brass labels, drawers that open
   ========================================================================== */
.k-cabinet{--paper:#2a0f10;--ink:#f6ecea;--ink2:#d9b8b3;--rust:#e0b54a;--bar:#1a0708;--bar-accent:#e0b54a;
  background-color:#2a0f10;color:#f6ecea;
  background-image:var(--grain),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 9px)}
.k-cabinet h1.ph{font-size:clamp(70px,11vw,180px);line-height:.8;margin:30px 0 8px}
.k-cabinet .lede{color:#e8cfca}
.cabinet{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-items:start;margin:34px 0 20px;
  padding:14px;background:#1a0708;box-shadow:inset 0 0 0 2px #5b2a22,0 18px 40px rgba(0,0,0,.35)}
.obj{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 40%,rgba(0,0,0,.12));
  box-shadow:inset 0 0 0 1px rgba(224,181,74,.28),inset 0 -20px 30px rgba(0,0,0,.25);color:#f6ecea}
.obj summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:14px 12px 14px;text-align:center}
.obj summary::-webkit-details-marker{display:none}
.obj summary:focus-visible{outline:3px solid #e0b54a;outline-offset:-3px}
.obj .no{align-self:flex-start;font:500 10px var(--label);letter-spacing:.12em;color:#e0b54a}
.obj .ico{width:112px;height:112px;margin:4px 0 8px;color:#f6ecea;overflow:visible}
.obj .ico .acc-f{fill:#e0b54a;stroke:#e0b54a}
.obj .ico .acc-s{stroke:#e0b54a}
.obj .nm{display:inline-block;font:600 14px/1.25 Literata,serif;background:linear-gradient(#e7c56a,#b8892d);color:#2a0f10;padding:5px 10px 6px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 2px 4px rgba(0,0,0,.4);border-radius:2px}
.obj[open]{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.obj[open] .ico{width:150px;height:150px}
.obj .label{padding:0 18px 18px;font:400 16px/1.55 Literata,serif;color:#f1dcd8;animation:drawer .35s cubic-bezier(.2,.7,.2,1)}
.obj .label p{margin:0 0 10px}
.obj .heard{font-size:14px}
.obj .heard span{display:block;font:500 10px var(--label);letter-spacing:.12em;text-transform:uppercase;color:#e0b54a;margin-bottom:2px}
.obj .heard a{color:#ffd98a}
.obj-photo{margin:12px 0 0}
.obj-photo img{display:block;width:100%;max-height:260px;object-fit:cover;box-shadow:0 0 0 6px #f6ecea}
.obj-photo figcaption{font:500 10.5px var(--label);color:#d9b8b3;margin-top:12px}
.cab-note{font:500 11px var(--label);letter-spacing:.05em;color:#c39c96;margin:10px 0 60px}
@keyframes drawer{from{opacity:0;transform:translateY(-8px)}}

/* what moves, when you point at it, open it, or it wakes by itself */
.obj .ico *{transform-box:fill-box;transform-origin:50% 50%}
.obj:hover .a-tine path,.obj.wake .a-tine path,.obj[open] .a-tine path{animation:twang .5s ease-out 2}
.obj:hover .a-bob,.obj.wake .a-bob,.obj[open] .a-bob{animation:bob2 1.6s ease-in-out infinite alternate}
.obj:hover .a-wave,.obj.wake .a-wave,.obj[open] .a-wave{animation:slide 1.2s linear infinite}
.obj:hover .a-puff circle,.obj.wake .a-puff circle{animation:puff 1.4s ease-out infinite}
.obj .a-puff circle:nth-child(2){animation-delay:.2s!important}.obj .a-puff circle:nth-child(3){animation-delay:.4s!important}
.obj:hover .a-swing,.obj.wake .a-swing{transform-origin:0 100%;animation:swing 1.2s ease-in-out infinite alternate}
.obj:hover .a-thump,.obj.wake .a-thump,.obj:hover .a-ring,.obj.wake .a-ring,.obj:hover .a-radio,.obj.wake .a-radio{animation:pulse .8s ease-out infinite}
.obj:hover .a-fork,.obj.wake .a-fork,.obj:hover .a-string,.obj.wake .a-string{animation:shimmer .08s linear 12}
.obj:hover .a-tap,.obj.wake .a-tap{transform-origin:100% 0;animation:tap .35s ease-in-out infinite alternate}
.obj:hover .a-shake,.obj.wake .a-shake{animation:shake .25s linear 5}
.obj:hover .a-bubble circle,.obj.wake .a-bubble circle{animation:rise 1.4s ease-in infinite}
.obj .a-bubble circle:nth-child(2){animation-delay:.3s!important}.obj .a-bubble circle:nth-child(3){animation-delay:.6s!important}
.obj:hover .a-note,.obj.wake .a-note{animation:rise 1.4s ease-out infinite}
.obj:hover .a-tape,.obj.wake .a-tape{stroke-dasharray:14;animation:wrap 1s ease-in-out infinite alternate}
.obj:hover .a-key,.obj.wake .a-key{animation:press .5s ease-in-out infinite alternate}
.obj:hover .a-spin,.obj.wake .a-spin,.obj[open] .a-spin{animation:spinx 1.6s linear infinite}
.obj:hover .a-wobble,.obj.wake .a-wobble{animation:wobble .6s ease-in-out 2}
.obj:hover .a-snap,.obj.wake .a-snap{animation:pulse .6s ease-out 2}
.obj:hover .a-write,.obj.wake .a-write,.obj[open] .a-write{stroke-dasharray:30;animation:write 1.6s ease-in-out infinite}
.obj:hover .a-pencil,.obj.wake .a-pencil{animation:scribble .4s ease-in-out infinite alternate}
.obj:hover .a-osc,.obj.wake .a-osc,.obj[open] .a-osc{animation:slide .6s linear infinite}
.obj:hover .a-page,.obj.wake .a-page{transform-origin:0 50%;animation:flip 1.2s ease-in-out infinite alternate}
.obj:hover .a-spark path,.obj.wake .a-spark path{animation:pulse 1s ease-out infinite}
.obj .a-spark path:nth-child(2){animation-delay:.3s!important}.obj .a-spark path:nth-child(3){animation-delay:.6s!important}
@keyframes twang{0%,100%{transform:none}20%{transform:translateX(1.5px)}40%{transform:translateX(-1.2px)}60%{transform:translateX(.8px)}80%{transform:translateX(-.4px)}}
@keyframes bob2{from{transform:translateY(-1.5px) rotate(-2deg)}to{transform:translateY(1.5px) rotate(2deg)}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-14px)}}
@keyframes puff{from{opacity:0;transform:translate(-4px,6px) scale(.6)}40%{opacity:1}to{opacity:0;transform:translate(4px,-6px) scale(1.3)}}
@keyframes swing{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes pulse{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}
@keyframes shimmer{50%{transform:translateX(.8px)}}
@keyframes tap{from{transform:rotate(0)}to{transform:rotate(-18deg)}}
@keyframes shake{25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}30%{opacity:1}to{opacity:0;transform:translateY(-12px)}}
@keyframes wrap{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
@keyframes press{to{transform:translateY(2px)}}
@keyframes spinx{0%{transform:scaleX(1)}50%{transform:scaleX(.96)}100%{transform:scaleX(1)}}
@keyframes wobble{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes write{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes scribble{from{transform:translate(0,0)}to{transform:translate(-4px,2px)}}
@keyframes flip{from{transform:scaleX(1)}to{transform:scaleX(-.2)}}
@media (max-width:760px){.cabinet{grid-template-columns:repeat(2,1fr);padding:8px;gap:8px}.obj .ico{width:84px;height:84px}.obj[open] .ico{width:110px;height:110px}}
@media (prefers-reduced-motion:reduce){.obj *,.obj .label{animation:none!important}}
.w-mid{font-size:calc(30px / var(--z,1))}

/* ---- THE CABINET, round two: the voyage game's look. Sea-chart blue, a cartoon dresser, cream drawers,
        thick dark outlines, yellow tags like the game's start box ---- */
.k-cabinet{--paper:#2a86d1;--ink:#fffdf6;--rust:#ffc21a;--bar:#173f66;--bar-accent:#ffc21a;
  background-color:#2a86d1;color:#fffdf6;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:96px 96px,96px 96px}
.k-cabinet h1.ph{color:#fffdf6;text-shadow:5px 5px 0 #2a2118;-webkit-text-stroke:0}
.k-cabinet main .cap{color:#ffe38a}
.k-cabinet .lede{color:#eef6ff;max-width:36em}
.cabinet{background:#d9973f;border:5px solid #2a2118;border-radius:22px;padding:18px;gap:16px;
  box-shadow:10px 10px 0 #2a2118;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.obj{background:#f4ecd0;border:4px solid #2a2118;border-radius:16px;box-shadow:0 6px 0 #9a6326,0 6px 0 4px #2a2118;
  color:#2a2118;transition:transform .2s cubic-bezier(.2,.8,.3,1.4)}
.obj::before{content:"";position:absolute;left:50%;top:8px;width:34px;height:8px;margin-left:-17px;border-radius:6px;background:#9a6326;border:3px solid #2a2118}
.obj:hover{transform:translateY(-4px)}
.obj summary{padding:22px 12px 16px}
.obj .no{font:800 14px var(--display);letter-spacing:.06em;color:#9a6326}
.obj .ico{width:138px;height:115px;margin:0 0 10px;overflow:visible}
.obj[open] .ico{width:190px;height:158px}
.obj .nm{background:#ffc21a;color:#2a2118;border:3px solid #2a2118;border-radius:9px;box-shadow:3px 3px 0 #2a2118;
  font:800 17px/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;padding:6px 10px 5px}
.obj[open]{background:#fffdf6}
.obj .label{color:#2a2118}
.obj .heard span{color:#e63b2e;font-weight:500}
.obj .heard a{color:#173f66;text-decoration-color:#e63b2e}
.obj-photo img{box-shadow:none;border:4px solid #2a2118;border-radius:12px}
.obj-photo figcaption{color:#6b5a3a}
.cab-note{color:#eef6ff}
.obj summary:focus-visible{outline:4px solid #ffc21a;outline-offset:2px;border-radius:12px}
.obj .a-spin{transform-origin:45% 56%}
@media (max-width:760px){.cabinet{padding:10px;gap:10px;border-radius:16px}.obj .ico{width:100px;height:84px}.obj .nm{font-size:14px}}
@media (prefers-reduced-motion:reduce){.obj{transition:none}.obj:hover{transform:none}}
.obj .a-page{opacity:0}.obj:hover .a-page,.obj.wake .a-page{opacity:1}
.k-news .recfilter{background:#111;color:#fff;border:0}.k-news .recfilter a{color:#ffb000}

#websvg.spread .w-person:not(.on){opacity:.12}
#websvg.spread .w-person.on .w-name{opacity:1;fill:#fff}
#websvg.spread .w-rec:not(.on){opacity:.55}
.webinfo{pointer-events:none}

/* accessibility pass, 24 Sep: small text at full strength */
.cut .readit,.recpage .cut a.readit{opacity:1}
.recpage .rechead .cap,.recpage .rechead .placeline,.recpage .rechead .placeline .verb{opacity:1}
.recpage .sheet .fn{color:#fff;opacity:.9}
.recpage .sheet figcaption{color:rgba(255,255,255,.85)}
.k-places .sheet figcaption{color:#3a4a52}
.k-places .sheet .fn{color:#8a3b00}
.k-cabinet .elsewhere{color:#1a1206}
.cut .readit{display:inline-block;padding:4px 0}

/* A.D.A.M page */
.k-adam .wallgrid{grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0 40px}
@media (max-width:760px){.k-adam .wallgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-adam .wall{background:#0f1720;color:#f5f7f6}
.k-adam .wall .tt{font:800 24px/.92 var(--display);text-transform:uppercase}
.k-adam .wall .ss{color:#f5f7f6;opacity:.85;font-family:var(--label)}
.k-adam .wall.hascv:hover img,.k-adam .wall.hascv:focus-visible img{opacity:1;filter:brightness(.35)}
.k-adam .wall.hascv:focus-visible .tt,.k-adam .wall.hascv:focus-visible .ss{display:block;position:relative}
.k-adam .wall .yr{color:rgba(255,255,255,.1)}