/* ---------- When people come to us: the two routes in, as two compartment doors ---------- */
.routes .sec-head{max-width:760px}
.rt-times{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.rt-times li{position:relative;padding-left:26px;font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.4;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rt-times li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 1.5px var(--ink)}
html.js .rt-times li{opacity:0;transform:translateY(8px)}
.routes.rt-seen .rt-times li{opacity:1;transform:none}
.routes.rt-seen .rt-times li:nth-child(2){transition-delay:.35s}
.routes.rt-seen .rt-times li:nth-child(3){transition-delay:.7s}
.rt-note{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--ink-2)}
.rt-doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4vw,48px)}
.routes{overflow-x:clip}
.rt-door{position:relative;display:block;min-height:330px;color:var(--ink);text-decoration:none;perspective:2800px;border:2.5px solid var(--ink);background:#fbf9f4;box-shadow:6px 6px 0 var(--coral-2)}
.rt-door:focus-visible{outline:3px solid var(--coral-ink);outline-offset:5px}
.rt-in{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(22px,3vw,34px)}
.rt-k{font-size:.72rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.rt-q{display:block;padding:12px 14px;background:var(--paper);border:1.5px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.35;transform:rotate(-.6deg);opacity:0;transition:opacity .5s,transform .6s var(--ease)}
.rt-q:nth-of-type(even){transform:rotate(.7deg)}
.rt-go{justify-self:start;margin-top:4px;font-weight:620;border-bottom:2px solid var(--coral-2);opacity:0;transition:opacity .5s}
/* the door leaf, hinged on the left */
.rt-leaf{position:absolute;inset:-2.5px;z-index:2;display:grid;place-items:center;transform-origin:0 50%;transform:rotateY(0);transition:transform 1s cubic-bezier(.22,1,.36,1),box-shadow 1s;background:var(--grain-c),var(--coral-2);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 10px rgba(20,19,17,.06)}
.rt-hatch{position:absolute;inset:16px;border:2px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(20,19,17,.13) 9px 10.5px)}
.rt-plate{position:relative;padding:10px 16px 11px;max-width:80%;background:#fbf9f4;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.15;text-align:center;transition:opacity .4s}
.rt-knob{position:absolute;right:22px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#e9c46a;box-shadow:inset 0 0 0 2px var(--ink),2px 2px 0 rgba(20,19,17,.35)}
.rt-hint{position:absolute;bottom:22px;font-size:.72rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase;transition:opacity .4s}
.rt-door:hover .rt-leaf,.rt-door:focus-visible .rt-leaf,.rt-door.rt-open .rt-leaf{transform:rotateY(-104deg);box-shadow:inset 0 0 0 999px rgba(20,19,17,.18),inset 0 0 0 10px rgba(20,19,17,.06)}
.rt-door:hover .rt-plate,.rt-door:focus-visible .rt-plate,.rt-door.rt-open .rt-plate,.rt-door:hover .rt-hint,.rt-door:focus-visible .rt-hint,.rt-door.rt-open .rt-hint{opacity:0}
.rt-door:hover .rt-q,.rt-door:focus-visible .rt-q,.rt-door.rt-open .rt-q,.rt-door:hover .rt-go,.rt-door:focus-visible .rt-go,.rt-door.rt-open .rt-go{opacity:1}
.rt-door:hover .rt-q:nth-of-type(1),.rt-door:focus-visible .rt-q:nth-of-type(1),.rt-door.rt-open .rt-q:nth-of-type(1){transition-delay:.35s}
.rt-door:hover .rt-q:nth-of-type(2),.rt-door:focus-visible .rt-q:nth-of-type(2),.rt-door.rt-open .rt-q:nth-of-type(2){transition-delay:.55s}
.rt-door:hover .rt-q:nth-of-type(3),.rt-door:focus-visible .rt-q:nth-of-type(3),.rt-door.rt-open .rt-q:nth-of-type(3){transition-delay:.75s}
.rt-door:hover .rt-go,.rt-door:focus-visible .rt-go,.rt-door.rt-open .rt-go{transition-delay:.95s}
.rt-door:hover .rt-go{border-bottom-color:var(--ink)}
.rt-b .rt-leaf{transform-origin:100% 50%}
.rt-b .rt-knob{right:auto;left:22px}
.rt-b:hover .rt-leaf,.rt-b:focus-visible .rt-leaf,.rt-b.rt-open .rt-leaf{transform:rotateY(104deg)}
@media (max-width:760px){
  .rt-doors{grid-template-columns:1fr}
  .rt-door{min-height:0}
  .rt-plate{max-width:70%;font-size:1.1rem}
  .rt-knob{right:16px}.rt-b .rt-knob{left:16px}
}
@media (prefers-reduced-motion:reduce){
  .rt-times li,.rt-q,.rt-go{opacity:1;transform:none;transition:none}
  .rt-leaf{display:none}
}
.rt-own{margin:clamp(26px,3.4vw,40px) 0 0;text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.2;letter-spacing:-.01em}

/* ---------- What it's actually like: three cards that turn over as they arrive ---------- */
.lk-cards{list-style:none;margin:clamp(24px,3.4vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,30px);perspective:1400px}
.lk-card{min-height:274px}
.lk-in{position:relative;display:block;height:100%;min-height:274px;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,1.25,.4,1);transition-delay:calc(var(--i) * .28s)}
html.js .lk-in{transform:rotateY(180deg)}
.like.lk-seen .lk-in{transform:none}
.lk-face,.lk-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--ink)}
.lk-face{display:flex;align-items:flex-end;padding:clamp(20px,2.4vw,30px);background:#fbf9f4;box-shadow:5px 5px 0 var(--coral-2);font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.3}
.lk-face b{display:block;margin-bottom:6px;font-family:var(--sans);font-style:normal;font-weight:650;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.lk-face{flex-direction:column;justify-content:flex-end;align-items:flex-start}
.lk-art{display:block;flex:none;width:auto;height:clamp(58px,5.2vw,72px);margin:0 0 auto;overflow:visible}
.lk-face .lk-art + b{margin-top:18px}
.lk-back{transform:rotateY(180deg);display:grid;place-items:center;background:var(--grain-c),var(--coral-2);box-shadow:5px 5px 0 var(--ink)}
.lk-back::before{content:"";position:absolute;inset:12px;border:2px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(20,19,17,.12) 10px 11.5px)}
.lk-mark{position:relative;width:46px;height:54px;background:var(--ink);-webkit-mask:url(assets/s/mark.svg) center/contain no-repeat;mask:url(assets/s/mark.svg) center/contain no-repeat}
.lk-end{margin:clamp(22px,3vw,34px) 0 0;text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.3vw,1.8rem);line-height:1.25}
@media (max-width:820px){.lk-cards{grid-template-columns:1fr}.lk-card,.lk-in{min-height:200px}.lk-art{height:60px}}
@media (prefers-reduced-motion:reduce){html.js .lk-in{transform:none;transition:none}}

/* ---------- Proof: Tim's year in four frames ---------- */
.proof-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,60px);align-items:center}
.proof .sec-head{margin-bottom:0}
.pf-strip{list-style:none;margin:0;padding:9px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;background:var(--ink);border-radius:4px;
  background-image:radial-gradient(circle,var(--paper) 2.4px,transparent 2.8px),radial-gradient(circle,var(--paper) 2.4px,transparent 2.8px);background-size:15px 9px;background-position:3px 0,3px 100%;background-repeat:repeat-x}
.pf-strip li{position:relative;display:grid;align-content:end;min-height:130px;margin:9px 0;padding:12px;background:#fbf9f4;border-radius:2px;font-size:1.02rem;line-height:1.25;transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i) * .3s)}
.pf-art{position:absolute;right:10px;top:10px;width:auto;height:clamp(36px,3.8vw,52px);overflow:visible}
.pf-strip li{min-height:140px}
.pf-strip li:nth-child(4){background:var(--grain-c),var(--coral-l)}
.pf-strip b{font-weight:680}
.pf-n{position:absolute;left:11px;top:8px;font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--coral-ink)}
html.js .pf-strip li{opacity:0;transform:translateY(8px)}
.proof.pf-seen .pf-strip li{opacity:1;transform:none}
/* the strip and its button read as one block, centred against the heading */
.proof-in{grid-template-rows:1fr auto 1fr;row-gap:20px}
.proof .sec-head{grid-row:1 / 4}
.pf-strip{grid-column:2;grid-row:2}
.pf-go{grid-column:2;grid-row:3;align-self:start;margin:0}
@media (max-width:820px){.proof-in{grid-template-columns:1fr;grid-template-rows:none;row-gap:26px}.proof .sec-head,.pf-strip,.pf-go{grid-row:auto}.pf-strip{grid-column:1}.pf-strip li{min-height:128px}.pf-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-go{grid-column:1}}
@media (prefers-reduced-motion:reduce){html.js .pf-strip li{opacity:1;transform:none;transition:none}}

/* ---------- The Cabinet, as an invitation ---------- */
.invite-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,80px);align-items:center}
.invite .sec-head{margin-bottom:0}
.invite-cab{display:grid;justify-items:center;gap:16px}
.invite-mini{--u:clamp(150px,17vw,220px)}
.invite-more{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--coral-2)}
@media (max-width:820px){.invite-in{grid-template-columns:1fr}.invite-mini{--u:clamp(130px,38vw,180px)}}
/* one compartment, never the two-column phone grid every other minicab uses */
@media (max-width:760px){.minicab.invite-mini{--u:calc((min(260px,100vw - var(--gut) * 2 - 28px) - (var(--cols,1) - 1) * var(--g)) / var(--cols,1))}.minicab.invite-mini .grid{grid-template-columns:repeat(var(--cols,1),var(--u))}.minicab.invite-mini .cell{grid-column:span var(--cs,1)}}

/* "Please touch": text then the visitor board on the left, the compartment with The Old Questions' cord on the right */
.invite-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h c" "b c";row-gap:44px;align-items:center}
.invite .sec-head{grid-area:h;align-self:end}
.invite-cab{grid-area:c}
.invite-board{grid-area:b;align-self:start;max-width:560px}
.inv-host{position:relative;display:inline-block}
.inv-host .film-cord{left:-22px;top:20px}
.invite-board .vboard{margin-top:0}
.inv-ticket{margin:6px auto 0}
@media (max-width:1240px){.invite-in{grid-template-areas:"h c" "b b"}.invite-board{justify-self:center;width:100%}}
@media (max-width:820px){.invite-in{grid-template-columns:1fr;grid-template-areas:"h" "c" "b";row-gap:34px}.invite-board{justify-self:center;width:100%}}
/* Tim, clipped to the case file */
.pf-who{display:inline-flex;align-items:center;gap:14px;margin-top:22px;color:var(--ink);text-decoration:none}
.pf-img{flex:none;width:86px;height:86px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--coral-2);transform:rotate(-2deg);overflow:hidden}
.pf-img img{display:block;width:100%;height:100%;object-fit:cover}
.pf-cap{font-size:.9rem;line-height:1.35;color:var(--ink-2);text-wrap:balance}
.pf-cap b{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink)}
.pf-who:hover .pf-img{transform:rotate(0) translate(-1px,-2px);box-shadow:6px 6px 0 var(--coral-2)}
.pf-img{transition:transform .4s var(--spring,var(--ease)),box-shadow .3s}

/* the reserved compartment in "Two ways in": a tent card that rocks a little in its lamplight */
.hw-cell .hw-t1{font:650 6.2px var(--sans);letter-spacing:1.2px;fill:#141311}
.hw-cell .hw-t2{font:italic 400 10px var(--serif);fill:var(--coral-ink)}
.hw-tent{transform-box:fill-box;transform-origin:50% 100%;animation:hwTent 5s ease-in-out infinite}
@keyframes hwTent{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.hw-glow{transition:opacity .6s var(--ease)}
.way:hover .hw-glow{opacity:1}
@media (prefers-reduced-motion:reduce){.hw-tent{animation:none}}
/* tablet: two buttons won't share a row in a half-width card, so both cards stack theirs the same way */
@media (min-width:821px) and (max-width:1120px){.ways .way-acts{flex-direction:column;align-items:stretch}.ways .way-acts .pill{width:100%}}

/* Provenance: one line of display type, set like the other headings */
.prov .prov-line{line-height:1.15;text-wrap:balance}

/* "Please touch" on wide screens: the board under the words, the compartment centred in the space beside them */
@media (min-width:1241px){
  .invite-in{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
  .invite-cab{justify-self:center;padding-left:64px}
  /* a two-wide object gets smaller cells, so it never crowds the board */
  .invite-mini{--u:calc(clamp(210px,17vw,264px) / (1 + (var(--cols,1) - 1) * .3))}
}