/* _desk.css · generated by scratchpad/design-2026/build-desk-css.py from public/design-2026/desk-7.html · do not hand-edit */
:root{--paper:#FBF9F6;--stone:#E4DED9;--stone-2:#D8D1CB;--forest:#2B301D;--moss:#414042;--ink:#414042;--ink-75:rgba(65,64,66,.78);--ink-55:rgba(65,64,66,.55);--ink-35:rgba(65,64,66,.35);--on-forest:#F1EDE8;--on-forest-55:rgba(241,237,232,.62);--serif:'Lora',Georgia,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif;--face:'Larken','Lora',Georgia,serif;--script:'Cormorant Garamond',Georgia,serif;--ease:cubic-bezier(.22,.8,.24,1);--wide:1337/1080}
.dk .head,.dk .crumb,.dk .x,.dk .back,.dk .again,.dk .stage,.dk .line,.dk .pcards,.dk .pc,.dk .big,.dk .wcards,.dk .wc,.dk .go,.dk .thread,.dk .you,.dk .desk,.dk .more,.dk .wait,.dk .foot,.dk .say,.dk .ask,.dk .kick,.dk .on,.dk .multi,.dk .lying,.dk h2,.dk p,.dk b,.dk i,.dk em,.dk span,.dk img,.dk a,.dk button,.dk input,.dk textarea,.dk label,.dk form,.dk div{all:revert}
.dk.dk a,.dk.dk button{color:inherit;text-decoration:none}
.dk .kick{display:block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55)}
.dk em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.dk{display:flex;flex-direction:column;min-height:640px}
.dk .head{display:flex;justify-content:space-between;align-items:center;padding:24px 36px 0}
.dk .crumb{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk .x{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;flex:0 0 auto;margin-left:20px}
.dk .stage{flex:1 1 auto;display:flex;flex-direction:column;gap:22px;padding:26px clamp(18px,6cqi,36px) 8px}
.dk h2{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,6.2cqi,36px), 28px + (clamp(20px,6.2cqi,36px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:clip}
.dk .line{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink-75);max-width:46ch}
.dk .pcards{display:grid;gap:14px;grid-template-columns:1fr}
.dk .pc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:2.3/1;overflow:hidden;background:var(--stone);animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
.dk .pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:brightness(.78)}
.dk .pc:hover img{transform:scale(1.03)}
.dk .pc span{position:relative;padding:18px 20px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.dk .pc b{display:block;font-family:var(--face);font-weight:400;font-size:clamp(17px,4.2cqi,24px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk .pc i{display:block;margin-top:3px;font-family:var(--serif);font-style:italic;font-size:13px;opacity:.85}
.dk .pcards.lying .pc{display:grid;grid-template-columns:clamp(96px,25cqi,150px) minmax(0,1fr);aspect-ratio:auto;background:var(--stone);align-items:center;gap:0 18px}
.dk .pcards.lying .pc img{position:static;width:150px;height:110px;filter:none}
.dk .pcards.lying .pc span{color:var(--ink);text-shadow:none;padding:14px 18px 14px 0}
.dk .pcards.lying .pc b{font-size:clamp(17px,3.8cqi,22px)}
.dk .pcards.lying .pc i{color:var(--ink-55)}
.dk .pc.wide{aspect-ratio:auto;height:170px;margin-top:12px}
.dk .pc:not(:has(img[src])) span{color:var(--ink);text-shadow:none}
.dk .big{position:relative;display:block;aspect-ratio:var(--wide);overflow:hidden;background:var(--stone)}
.dk .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.dk .big span{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.dk .big b{display:block;font-family:var(--face);font-weight:400;font-size:clamp(20px,5.2cqi,30px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk .big i{display:block;margin-top:4px;font-style:italic;font-size:14px;opacity:.85}
.dk .wcards{display:grid;gap:12px;grid-template-columns:1fr}
.dk .wc{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:14px 22px;background:var(--stone);font-family:var(--face);font-size:clamp(17px,3.5cqi,20px);line-height:1.1;transition:background .2s,color .2s;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
.dk .wc i{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-55);margin-top:3px}
.dk .wc:hover{background:var(--stone-2)}
.dk .wc.on{background:var(--forest);color:#fff}
.dk .multi .wc.on{position:relative;padding-right:52px}
.dk .wc.on::after{content:"✓";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:14px;opacity:.85}
.dk .go{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--forest);color:#fff;font-family:var(--face);font-size:20px;margin-top:4px}
.dk .go span{font-size:20px}
.dk .thread{display:flex;flex-direction:column;gap:14px}
.dk .you{align-self:flex-end;max-width:78%;background:var(--stone);padding:12px 18px;font-family:var(--face);font-size:clamp(16px,3.3cqi,19px);line-height:1.2;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 120ms)}
.dk .desk{max-width:92%;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 120ms)}
.dk .desk p{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--ink);max-width:46ch}
.dk .desk .more{display:grid;gap:10px;margin-top:12px}
.dk .desk .more a{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:54px;padding:12px 20px;background:var(--stone);font-family:var(--face);font-size:clamp(16px,3.4cqi,19px);line-height:1.1;color:var(--ink);white-space:nowrap;overflow:hidden}
.dk .desk .more a::after{content:"\2192";flex:none;color:var(--forest)}
.dk .desk .more a:hover{background:var(--stone-2)}
.dk .desk .pcards{margin-top:12px}
.dk .wait{font-style:italic;color:var(--ink-55)}
.dk .wait::after{content:"…";animation:blink 1.2s infinite}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.dk .head{padding:24px clamp(18px,6cqi,36px) 0;gap:16px}
.dk .back, .dk .again{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dk .again{color:var(--ink-55);margin-left:auto;margin-right:22px}
.dk .head .crumb{flex:1 1 auto;margin:0 16px}
.dk .foot{padding:18px clamp(18px,6cqi,36px) 26px}
.dk .foot .say{font-family:var(--serif);font-style:italic;font-size:clamp(14px,3.2cqi,17px);color:var(--ink-75);margin:0 0 10px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk .ask.pill{position:relative}
.dk .ask.pill{display:flex;align-items:center;gap:8px;background:var(--stone);padding:6px 6px 6px 22px}
.dk .ask.pill input{flex:1 1 auto;min-width:0;height:44px;font-family:var(--serif);font-size:17px;color:var(--ink)}
.dk .ask.pill input::placeholder{color:var(--ink-55)}
.dk .ask.pill input:focus{outline:0}
.dk .ask.pill button{width:44px;height:44px;background:var(--forest);color:#fff;font-size:18px;display:grid;place-items:center}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){}
/* ---- the panel on the site: fixed at the right, shut until rung, a veil behind it ---- */
.dk{position:fixed;top:0;right:0;bottom:0;width:min(600px,100vw);min-height:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;container-type:inline-size;overflow:hidden;box-shadow:0 30px 80px rgba(65,64,66,.18)}
.dk *{box-sizing:border-box}.dk button,.dk input,.dk textarea{font:inherit;color:inherit;background:none;border:0;text-align:left}.dk button{cursor:pointer}.dk img{display:block;max-width:100%}.dk a{color:inherit;text-decoration:none}
/* a clip rather than a slide off the edge, so a phone's page never widens to hold it; the small transform is the feel of a slide */
.dk{z-index:121;clip-path:inset(0 0 0 100%);transform:translateX(28px);visibility:hidden;transition:clip-path .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
.dk.on{clip-path:inset(0);transform:none;visibility:visible;transition:clip-path .6s var(--ease),transform .6s var(--ease),visibility 0s}
.dk-veil{position:fixed;inset:0;z-index:120;background:rgba(65,64,66,.35);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.dk-veil.on{opacity:1;pointer-events:auto}
.dk .head{flex:none}.dk .stage{flex:1 1 auto;overflow-y:auto;/* and never sideways. Setting only overflow-y makes the x axis auto as well, so four pixels of overflow put a scrollbar across the whole drawer - seen on the trip-naming screen, test 5. A panel this narrow is one column by design; nothing in it is meant to be wider than it. */overflow-x:hidden;overscroll-behavior:contain;padding-bottom:20px}.dk .foot{flex:none;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
/* Three words across a phone.
   At 390 the head read "WHAT SORT OF PL..." and "START AGA...": the
   crumb, Start again and Close do not fit at .24em of letter-spacing.
   The tracking is what gives, not the words - test 9 asks for type
   that shrinks rather than truncates, and a quarter of an em of air
   between capitals is the first thing a narrow screen can spare. */
@container (max-width:460px){.dk .crumb,.dk .back,.dk .again,.dk .x{letter-spacing:.1em;font-size:9px}
.dk .head{gap:10px}.dk .head .crumb{margin:0 8px}.dk .x{margin-left:10px}}
.dk .head .again{margin-left:auto}.dk .head .again + .x{margin-left:0}.dk .head .back + .x{margin-left:auto}.dk .head .crumb + .x{margin-left:auto}
/* the reset above hands buttons the browser's own border and face; the panel's are plain */
.dk .x,.dk .back,.dk .again,.dk .pc,.dk .wc,.dk .go,.dk .ask.pill button,.dk .ask.pill input{border:0;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}/* A thumb's worth of head. Close measured 45 by 13 at 390 wide - the
   right size for the words and half the size of the thing that has to
   hit them. The padding grows the target and the negative margin puts
   the type back where it was, so nothing moves and everything is
   hittable. Test 9. */
.dk .x,.dk .back,.dk .again{background:none;padding:15px 0;margin-block:-15px}.dk .ask.pill input{cursor:text;padding:0}
/* one scene leaves before the next arrives */
.dk .dk-scene{display:flex;flex-direction:column;gap:22px}
.dk .dk-in{animation:dk-in .5s var(--ease) both}.dk .dk-out{animation:dk-out .25s var(--ease) both}.dk .dk-rev{animation:dk-rev .5s var(--ease) both}
@keyframes dk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dk-out{from{opacity:1}to{opacity:0}}
@keyframes dk-rev{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* the page's own photograph, kept to half the panel so what can be done with it shows without scrolling */
.dk .big{aspect-ratio:1.8/1}
/* a card the component draws as a button: the same box as the mock's anchor */
.dk .pc{width:100%;text-align:left;color:inherit}.dk .pcards.lying .pc img{width:100%;height:110px}.dk .pc.on{outline:2px solid var(--forest);outline-offset:-2px}.dk .pc.on span::after{content:"\2713";position:absolute;right:20px;bottom:18px;font-family:var(--sans);font-size:14px}
.dk .pc:not(:has(img)) span{color:var(--ink);text-shadow:none}
.dk .wc{width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dk .wc i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dk .go{width:100%;text-align:left}.dk .go b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dk .kick{margin-bottom:10px}
.dk .say{margin-left:0}
.dk .ask.pill button{flex:none;font-size:18px}
/* a form: the field a stone card, one to a line */
.dk .dk-form{display:flex;flex-direction:column;gap:12px}.dk .dk-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}.dk .dk-form input,.dk .dk-form textarea{width:100%;background:var(--stone);padding:14px 20px;font-family:var(--serif);font-size:17px;color:var(--ink);text-transform:none;letter-spacing:0}.dk .dk-form input:focus,.dk .dk-form textarea:focus{outline:2px solid var(--forest);outline-offset:-2px}
/* the cover, drawn */
.dk .dk-make{display:grid;grid-template-columns:clamp(96px,26cqi,140px) minmax(0,1fr);gap:18px;align-items:start}
.dk .dk-make-book{aspect-ratio:1080/1337;background:var(--forest);color:var(--on-forest);display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.dk .dk-make-imp{font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-forest-55)}.dk .dk-make-title{font-family:var(--face);font-size:clamp(15px,3.4cqi,18px);line-height:1.1;margin-top:4px}.dk .dk-make-rule{display:block;width:24px;height:1px;background:var(--on-forest-55);margin:8px 0}.dk .dk-make-for{font-style:italic;font-size:11.5px;color:var(--on-forest-55)}
.dk .dk-make-said{display:flex;flex-direction:column;gap:12px;min-width:0}
.dk .dk-name{display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}.dk .dk-name input{width:100%;background:var(--stone);padding:12px 16px;font-family:var(--serif);font-size:16px;color:var(--ink);letter-spacing:0;text-transform:none}
/* the bell */
.bellfab{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:110;width:56px;height:56px;background:var(--forest);color:var(--paper);display:grid;place-items:center;box-shadow:0 12px 30px rgba(65,64,66,.25);cursor:pointer;border:0;transition:background .22s,transform .3s var(--ease)}.bellfab:hover{background:var(--moss);transform:translateY(-2px)}
.bellfab .ring{display:none}.bellfab svg{width:24px;height:auto}
@media(prefers-reduced-motion:reduce){.dk,.dk-veil,.dk .dk-in,.dk .dk-out,.dk .dk-rev{animation:none;transition:none}}

/* ---- where the keyboard is -----------------------------------------------
 *
 * Test 33: the whole panel had two focus rules, and one of them was
 * `.ask.pill input:focus{outline:0}`. Nothing showed where the keyboard was -
 * not a card, not Close, not Start again, not the bell - so somebody working
 * through the Desk without a mouse could not see what Enter was about to do.
 *
 * `:focus-visible` rather than `:focus`, so a mouse press does not draw a ring
 * nobody asked for. Forest on paper; paper on the things that are already
 * forest. The bell gets both, because it sits over whatever the page has
 * behind it - a hero photograph as often as not - and one ring on its own
 * would disappear against half of them.
 */
.dk button:focus-visible,.dk a:focus-visible,.dk input:focus-visible,.dk textarea:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.dk .ask.pill input:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
.dk .pc:focus-visible,.dk .wc:focus-visible{outline-offset:-3px}
.dk .go:focus-visible,.dk .wc.on:focus-visible,.dk .chip.on:focus-visible{outline-color:var(--paper);outline-offset:-4px}
.bellfab:focus-visible{outline:0;box-shadow:0 12px 30px rgba(65,64,66,.25),0 0 0 2px var(--paper),0 0 0 5px var(--forest)}

/* ---- the phone ------------------------------------------------------------
 *
 * Test 36, at 390px. Two things a mouse never notices.
 *
 * The head's buttons are 34x41 - and the one narrow-width rule the mock
 * carries makes them *smaller*, dropping the type to 9px. That is right for
 * the type and wrong for the thumb: Close is the way out of a drawer covering
 * the whole screen, and it was a third under the size a finger can be relied
 * on to hit. The type stays as the mock draws it; the target grows around it.
 *
 * And the keyboard. The panel is fixed to top:0 and bottom:0, and on a phone
 * the software keyboard does not move a fixed element - it slides up over the
 * bottom of it, taking the field with it. `--dk-kb` is set from
 * `visualViewport` while the panel is open, so the drawer ends where the
 * keyboard begins and the field it is being typed into stays on screen.
 */
.dk{bottom:var(--dk-kb,0px)}
@container (max-width:460px){
.dk .x,.dk .back,.dk .again{min-height:44px;display:inline-flex;align-items:center}
.dk .x{min-width:44px;justify-content:flex-end}
}

/* ---- the way on ----------------------------------------------------------
 *
 * Jack, 6 September, on the must-haves: "needs to be easier to hit the show
 * me button, it should never involve a scroll to do that, and the show me
 * button is same colour as the other ones so its not obvious at all".
 *
 * Both true, and the second was literal: `.wc.on` and `.go` were the same
 * declaration, `background:var(--forest);color:#fff`. Nine choices, three of
 * them lit, and the button under them drawn identically — so the one thing
 * on the screen that does something looked like a tenth option.
 *
 * Forest is the action. So on a list you can choose several from, a chosen
 * one is marked rather than filled: stone, a forest edge, a forest tick. The
 * only forest-filled thing on the screen is the way on. Single-choice scenes
 * keep the filled state, because there you are gone the instant you tap and
 * nothing sits lit beside a button.
 *
 * And it sticks to the foot of the stage, so it is under the thumb from the
 * moment there is anything to press. The shadow is what makes rows sliding
 * beneath it read as beneath it. */
.dk .wcards.multi .wc.on{background:var(--stone-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--forest)}
.dk .wcards.multi .wc.on::after{color:var(--forest);opacity:1}
/* The line under a chosen card.
 *
 * The mock sets `.wc i` to ink-55, which is right on stone, and it stayed
 * ink-55 when the card filled with forest - so on the chosen one "we will
 * look at all of it and pick the three that fit" was dark grey on dark green
 * and could not be read.
 *
 * It only became visible when a card carrying a note could be ticked at all,
 * which is what Whereabouts became in test 16: until then the ticked cards
 * were the wants and the party, and neither has a line under it. The multi
 * rule above keeps its own pale ground, so it is left alone. */
.dk .wcards:not(.multi) .wc.on i{color:rgba(255,255,255,.72)}
/* The long list is what needed pinning. A form's own button is two
   inches under its field and pinning it laid it over the field: the
   trip-naming screen had Start it sitting on top of the box you were
   meant to type the name into. Test 5. */
.dk .wcards.multi ~ .go{position:sticky;bottom:0;z-index:3;box-shadow:0 -14px 26px rgba(65,64,66,.13)}

/* ---- the button's words: the reset above hands every button the panel's ink,
   which on a forest button is black on green (Jack, 7 September: "you can't
   read it due to black font"); doubled .dk to outrank it ---- */
.dk.dk .go{color:#fff}.dk.dk .go b,.dk.dk .go span{color:#fff}
/* ---- a line under the question, tight to it, where prose would sit a
   paragraph away (Jack: "need to be aligned and spaced out better") ---- */
.dk .dk-scene > .sub{margin-top:-40px;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:var(--ink-55)}
.dk .dk-scene > .go.up{margin-top:-6px}
/* ---- the choosing cards (Jack, 7 September: "not a fan of that grey"; the
   Desk's Cards page): a few are the picture with the word on it, one to a
   line; many are small rows on the paper in their areas, nothing drawn
   round them ---- */
.dk .pc{aspect-ratio:2.7/1}
.dk .pcards.small{gap:0}
.dk .pcards.small .pc{grid-template-columns:64px minmax(0,1fr);gap:0 14px;background:transparent;min-height:60px;outline:none}
.dk .pcards.small .pc img{width:64px;height:48px;filter:saturate(.85)}
.dk .pcards.small .pc:hover img{transform:none;filter:none}
.dk .pcards.small .pc span{padding:8px 0}
.dk .pcards.small .pc b{font-size:clamp(16px,3.4cqi,19px)}
.dk .pcards.small .pc i{font-size:12.5px;margin-top:1px}
.dk .pcards.small .pc.on{outline:none}
.dk .pcards.small .pc.on span::after{right:0;bottom:auto;top:50%;transform:translateY(-50%);color:var(--forest)}
.dk .pcards .group{font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin:20px 0 2px}
.dk .pcards .group:first-child{margin-top:0}
/* ---- the ask box, focused: no browser ring (Jack, 7 September: "a black box
   appears"); a quiet forest line inside the box instead ---- */
.dk.dk .ask.pill input:focus,.dk.dk .ask.pill input:focus-visible,.dk.dk .ask.pill:focus,.dk.dk .ask.pill:focus-within{outline:none;box-shadow:none}
.dk.dk .ask.pill:focus-within{box-shadow:inset 0 0 0 1px var(--forest)}
.dk.dk .ask.pill button:focus-visible{outline:2px solid var(--paper);outline-offset:-4px}
/* ---- a card is the same width whether it is a button or a link ---- */
.dk .wc,.dk .pc,.dk .go,.dk .ask{box-sizing:border-box}
/* ---- spoken, not headed: the Desk's line is said in the reading face (Jack, 7 September: "no big headings, just chat") ---- */
.dk h2{font-family:var(--serif);font-weight:400;font-size:clamp(18px,3.8cqi,22px);line-height:1.45;letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip;max-width:44ch;color:var(--ink)}
/* ---- thinking: three dots, not a word ---- */
.dk .wait.typing{display:inline-flex;gap:5px;align-items:center;height:22px;font-style:normal}
.dk .wait.typing::after{content:none}
.dk .wait.typing i{display:block;width:6px;height:6px;background:var(--ink-55);animation:dk-dot 1.2s ease-in-out infinite}
.dk .wait.typing i:nth-child(2){animation-delay:.15s}
.dk .wait.typing i:nth-child(3){animation-delay:.3s}
@keyframes dk-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.dk .dk-form .quiet{background:none;border:0;padding:8px 0;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);cursor:pointer;text-align:left}
.dk .dk-form .quiet:hover{color:var(--ink)}
/* ---- the thread: a question and its answer set like an interview, not chat bubbles (Jack, 7 September) ---- */
.dk .thread{gap:26px}
.dk .you{align-self:stretch;max-width:none;background:none;padding:0}
.dk .you::before,.dk .you + .desk::before{content:'You asked';display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin-bottom:8px}
.dk .you + .desk::before{content:'The Desk';color:var(--forest)}
.dk .you p{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(18px,3.6cqi,21px);line-height:1.4;color:var(--ink);max-width:40ch}
.dk .you p::before{content:'\201C'}
.dk .you p::after{content:'\201D'}
.dk .desk p{max-width:50ch}
/* ---- while the drawer is up: the bell steps aside, the page holds still ---- */
.bellfab{transition:background .22s,transform .3s var(--ease),opacity .3s var(--ease)}
html.dk-open .bellfab{opacity:0;pointer-events:none;transform:translateY(8px)}
html.dk-open{scrollbar-gutter:auto}
/* ---- how the Desk moves ---- */
.dk{clip-path:none;transform:translateX(102%);transition:transform .42s var(--ease),visibility 0s linear .42s}
.dk.on{clip-path:none;transform:none;transition:transform .42s var(--ease),visibility 0s}
.dk-veil{transition:opacity .42s var(--ease)}
.dk .head,.dk .foot{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.dk.on .head{opacity:1;transform:none;transition-delay:.14s}
.dk.on .foot{opacity:1;transform:none;transition-delay:.3s}
.dk .dk-scene.dk-in{animation-delay:.1s}
.dk .dk-out{animation:none}
.dk .dk-out > *{animation:dk-out .22s var(--ease) both}
.dk .dk-out .wcards,.dk .dk-out .pcards{animation:none}
.dk .dk-out .wc,.dk .dk-out .pc{animation:dk-fall .24s var(--ease) both;animation-delay:calc(var(--i) * 30ms)}
.dk .dk-out .wc.on,.dk .dk-out .pc.on{animation-delay:.26s}
@keyframes dk-fall{to{opacity:0;transform:translateY(10px)}}
.dk .ghost{min-height:62px;background:var(--stone);position:relative;overflow:hidden;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
.dk .ghost::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:dk-sheen 1.4s linear infinite}
@keyframes dk-sheen{to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){.dk,.dk-veil,.dk .head,.dk .foot{transition:none}.dk .head,.dk .foot{opacity:1;transform:none}.dk .ghost::after,.dk .dk-out .wc,.dk .dk-out .pc{animation:none}}

/* ---- the dates, lifted from accommodation.html ---- */
.dk .cal .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.dk .cal .mh h3{font-family:var(--face);font-weight:400;font-size:22px;line-height:1}
.dk .cal .mh h3 span{font-family:var(--serif);font-style:italic;font-size:.75em;color:var(--ink-55);margin-left:12px}
.dk .cal .mh div{display:flex;gap:4px}
.dk .cal .mh button{width:40px;height:40px;display:grid;place-items:center;background:var(--stone);color:var(--ink)}
.dk .cal .mh button:hover{background:var(--stone-2)}
.dk .cal .mh button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.dk .dow, .dk .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dk .dow span{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);text-align:center;padding-bottom:12px}
.dk .days button{aspect-ratio:1;display:grid;place-items:center;font-family:var(--serif);font-size:15.5px;color:var(--ink);background:var(--stone);transition:background .2s,color .2s;font-variant-numeric:tabular-nums}
.dk .days button:hover{background:var(--stone-2)}
.dk .days .pad{visibility:hidden}
.dk .days .past{background:transparent;color:var(--ink-35);pointer-events:none}
.dk .days .in{background:var(--bracken-soft);color:var(--shell)}
.dk .days .from, .dk .days .to{background:var(--bracken);color:var(--shell)}
.dk .chips{display:flex;flex-wrap:wrap;gap:8px}
.dk .chip{padding:11px 16px;background:var(--stone);font-family:var(--serif);font-size:15px;line-height:1;transition:background .25s,color .25s}
.dk .chip:hover{background:var(--stone-2)}
.dk .chip.on{background:var(--forest);color:var(--paper)}
.dk .chip i{font-style:normal;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.14em;margin-left:8px;color:var(--ink-55)}
.dk .chip.on i{color:var(--on-forest-55)}

/* ---- the dates, in one column, because the panel is one column ---- */
.dk .cal{width:100%}
.dk .cal .mh{margin-bottom:18px}
.dk .days button{font-size:16px}
.dk .chips{display:flex;flex-wrap:wrap;gap:8px}