/* The journey, September 2026.

   Lifted whole, block by block, from public/design-css/hidden-scotland-trip-2026.css
   by scratchpad/design-2026/build-journey-2026.py. One block per chapter, in the
   order the contents lists them. Never hand-edit: change the builder and rerun.  */

/* ================ THE TOKENS · exact from the trip sheet (prompts 4, 5) ================ */
:root{
  --width:1040px;
  --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); --ink-20:rgba(65,64,66,.2);
  --on-forest:#F1EDE8; --on-forest-55:rgba(241,237,232,.62); --cover:#F04E26; --book:148/190;
  --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); --edge:clamp(20px,4vw,60px); --bar:76px; --card:4/5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:0}
.k{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-55)}
section{padding:clamp(48px,7vh,72px) 0}
@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
}
: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}
:root{--august:#A0BAD4;--ling:#A0BAD4;--cask:#392916;--shell:#F9F5EE;--tweed:#682114;--oat:#F5F1E9}
:root{--paper:#FFFFF7}
@media print{
html,body{background:#fff!important}
}

/* ================ THE SHARED PIECES · the planner mocks' shared block ================ */
/* ---- the planner's own bar ---- */
header.site{background:var(--stone)}
header.site .in{max-width:1400px;position:relative;display:flex;align-items:center;justify-content:center;height:var(--bar)}
header.site .leftgrp{position:absolute;left:var(--edge);display:flex;align-items:center;gap:18px}
header.site .mk{display:flex;align-items:center}
header.site .mk img{display:block;height:34px;width:auto}
header.site .sep{width:1px;height:22px;background:var(--ink-20)}
header.site .lock{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
header.site .lock .tname{font-family:var(--face);font-size:15.5px;letter-spacing:-.005em;white-space:nowrap}
header.site .mc{display:inline-block;position:relative;flex:0 0 auto;overflow:hidden}
header.site .mc .cover{position:absolute;inset:0;display:block}
header.site .trip{font-family:var(--face);font-size:19px;letter-spacing:-.005em}
@media(max-width:700px){header.site .lock .tname{display:none}header.site .sep{display:none}}
header.site .right{position:absolute;right:calc(var(--edge) - 10px);display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
header.site .desk{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);transition:color .3s}
header.site .desk:hover{color:var(--moss)}
.menu-word{display:grid;place-items:center;width:44px;height:44px;color:var(--ink)}
.lines{display:block;width:24px;height:1.5px;background:currentColor;position:relative}
.lines::before,.lines::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:currentColor;top:-7px}
.lines::after{top:7px}
@media(max-width:700px){header.site .trip,header.site .desk{display:none}}
.menu{position:fixed;inset:0;z-index:200;background:var(--paper);color:var(--ink);display:grid;grid-template-rows:var(--bar) 1fr auto;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.menu.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.menu .bar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);max-width:1400px;margin:0 auto;width:100%}
.menu .bar img{height:34px;width:auto}
.menu .x{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.menu .x i{position:relative;width:18px;height:18px;display:block}
.menu .x i::before,.menu .x i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.menu .x i::after{transform:rotate(-45deg)}
.menu .body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(32px,6vw,120px);max-width:1400px;margin:0 auto;width:100%;padding:clamp(16px,3vh,40px) var(--edge);min-height:0;overflow-y:auto}
.menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.8vh,18px);justify-self:end}
.menu nav a{display:block;font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2.6vw,34px), 28px + (clamp(22px,2.6vw,34px) - 28px) * 0.6);line-height:1.1;letter-spacing:-.01em;color:var(--ink);opacity:0;transform:translateY(14px);transition:color .35s}
.menu nav a.here{color:var(--moss)}
.menu.open nav a{animation:rise .7s var(--ease) both;animation-delay:calc(.1s + var(--i) * 50ms)}
@keyframes rise{to{opacity:1;transform:none}}
.menu nav:hover a:not(:hover){color:var(--ink-35)}
.menu .pic{position:relative;aspect-ratio:var(--card);height:min(100%,62vh);width:auto;max-width:100%;overflow:hidden;background:var(--stone);justify-self:start}
.menu .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.6s var(--ease)}
.menu .pic img.show{opacity:1;transform:none}
.menu .foot{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3vw,44px);padding:clamp(20px,4vh,40px) var(--edge) clamp(24px,5vh,48px);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}
.menu .foot a{transition:color .3s}.menu .foot a:hover{color:var(--ink)}
@media(max-width:820px){.menu .body{grid-template-columns:1fr;place-items:center}.menu .pic{display:none}.menu nav{align-items:center;justify-self:center;text-align:center}}
body.held{overflow:hidden}

/* ---- shared pieces ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;border:1px solid var(--forest);color:var(--paper);background:var(--forest);transition:background .22s,border-color .22s,color .22s;cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.quiet:hover{background:var(--ink);color:var(--paper)}
.btn.sm{min-height:40px;padding:0 18px;font-size:9.5px}
h2.h{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1.1}
.sub{margin-top:4px;font-style:italic;font-size:15px;color:var(--ink-55)}
.lead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,3.5vh,32px)}
.faces{display:inline-flex;gap:6px}
.faces b{width:36px;height:36px;display:grid;place-items:center;overflow:hidden;background:var(--forest);color:var(--paper);font-family:var(--face);font-weight:400;font-size:15px;flex:0 0 auto}
.faces b img{width:100%;height:100%;object-fit:cover}
.faces b.no{background:var(--stone-2);color:var(--ink-55)}
.faces b.no img{opacity:.35;filter:grayscale(1)}
.faces b.out{background:transparent;color:var(--ink-35);box-shadow:inset 0 0 0 1px var(--ink-20)}
.faces.sm b{width:28px;height:28px;font-size:12px}
.field{display:flex;background:var(--paper);color:var(--ink)}
.field input{flex:1;min-width:0;height:52px;padding:0 16px;font-size:15.5px}
.field input::placeholder{color:var(--ink-55);font-style:italic}
.field button{height:52px;padding:0 20px;background:var(--forest);color:var(--paper);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.field.stone{background:var(--stone)}
.field.stone button{background:transparent;color:var(--ink)}
section{padding:clamp(48px,7vh,72px) 0}
section.stone{background:var(--stone)}
section.tight{padding-top:0}

/* ---- the top of a chapter: a picture at the left in the cover's column, the words at the right ---- */
.above{background:var(--stone);padding:clamp(40px,6vh,64px) 0 clamp(44px,7vh,72px)}
.above .open{display:grid;grid-template-columns:clamp(240px,23vw,320px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.above h1{font-family:var(--face);font-weight:400;font-size:min(clamp(34px,3.6vw,52px), 28px + (clamp(34px,3.6vw,52px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.012em;text-wrap:balance}
.above .dates{margin-top:12px;font-style:italic;font-size:clamp(16px,1.3vw,18px);color:var(--ink-75)}
.above .line{margin-top:clamp(16px,2.4vh,22px);font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:40ch}
.above .line b{font-weight:500}
.above .doors{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(24px,4vh,34px)}
.show{position:relative;aspect-ratio:var(--card);overflow:hidden;background:var(--stone-2)}
.show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease)}
.show img.on{opacity:1}
.show .cap{position:absolute;left:12px;bottom:12px;padding:8px 10px;background:rgba(251,249,246,.94);color:var(--ink);font-style:italic;font-size:13.5px;line-height:1;z-index:2}
@media(max-width:700px){.above .open{grid-template-columns:1fr}.show{max-width:320px}}

/* ---- the cover, flat, as printed ---- */
.cover{position:relative;aspect-ratio:var(--book);background:var(--cover);color:#fff;container-type:inline-size;text-align:center}
.cover > *{position:absolute;left:0;right:0}
.cover .k{top:9.4%;font-family:var(--sans);font-size:2.4cqw;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.cover h2{top:15.5%;padding:0 9%;font-family:var(--face);font-weight:700;font-size:8.4cqw;line-height:1.06;letter-spacing:-.004em;color:#fff;text-wrap:balance}
.cover .plate{top:33%;left:24%;right:24%;aspect-ratio:var(--book);overflow:hidden;background:rgba(0,0,0,.1)}
.cover .plate img{width:100%;height:100%;object-fit:cover}
.cover .foot{bottom:7%;font-family:var(--sans);font-size:2.4cqw;font-weight:500;letter-spacing:.18em;text-transform:uppercase}

/* ---- cards: a photograph with a badge or two, a strip beneath, a name, and one thing to do ---- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vh,44px) clamp(18px,2.2vw,32px)}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.c{display:flex;flex-direction:column;color:var(--ink);text-align:left}
.ph{display:block;position:relative;aspect-ratio:var(--card);overflow:hidden;background:var(--stone-2);cursor:pointer;text-align:left;width:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.c:hover .ph img{transform:scale(1.025)}
.tag{position:absolute;top:12px;padding:8px 10px;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;background:rgba(251,249,246,.94);color:var(--ink);z-index:2}
.tag.l{left:12px}.tag.r{right:12px;background:var(--forest);color:var(--paper)}
.tag.b{top:auto;bottom:12px;left:12px}
.band{display:block;padding:13px 16px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;background:var(--stone);color:var(--ink)}
.c.lead-c .band{background:var(--forest);color:var(--paper)}
.c.none .band{color:var(--ink-55)}
.stone .band{background:var(--paper)}
.stone .c.lead-c .band{background:var(--forest);color:var(--paper)}
.c .row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:16px}
.t{font-family:var(--face);font-weight:400;line-height:1.1;letter-spacing:-.005em;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6)}
.grid.four .t{font-size:clamp(18px,1.6vw,22px)}
.where{margin-top:4px;font-style:italic;font-size:15.5px;color:var(--ink-75)}
/* the question, then yes or no: the two the same width, the letter-spacing balanced so the word sits centred */
.ask{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto;margin-top:3px}
.ask>i{font-style:italic;font-size:13.5px;line-height:1;color:var(--ink-55);white-space:nowrap}
.yn{display:flex;gap:6px;flex:0 0 auto}
.yn button{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:36px;padding:0 12px 0 calc(12px + .2em);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;border:1px solid var(--ink);color:var(--ink);transition:background .22s,color .22s,opacity .22s}
.btn{padding-left:calc(28px + .2em)}
.btn.sm{padding-left:calc(18px + .2em)}
.yn button:hover,.yn button.on{background:var(--ink);color:var(--paper)}
.c.said .yn button:not(.on){opacity:.35}
/* the empty card that asks you to add one */
.c.add .ph{background:var(--forest);color:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,26px);cursor:pointer}
.c.add .ph h3{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);line-height:1.08;letter-spacing:-.01em;color:#fff}
.c.add .ph p{margin-top:8px;font-style:italic;font-size:15px;color:var(--on-forest-55)}
.c.add .ph .go{margin-top:18px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.c.add .band{visibility:hidden}
@media(max-width:900px){.grid,.grid.four{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid,.grid.four{grid-template-columns:1fr}}

/* ---- the strip beneath a photograph is where you vote; once you have, it shows the five of you ---- */
.band.vote{display:flex;padding:0;background:var(--stone);min-height:40px}
.stone .band.vote{background:var(--paper)}
.band.vote .v{display:flex;width:100%;gap:1px}
.band.vote .v button{flex:1;height:40px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--stone);transition:background .22s,color .22s;padding-left:.2em}
.stone .band.vote .v button{background:var(--paper)}
.band.vote .v button:hover{background:var(--forest);color:var(--paper)}
.band.vote .v button+button{box-shadow:inset 1px 0 0 var(--paper)}
.stone .band.vote .v button+button{box-shadow:inset 1px 0 0 var(--stone)}
.band.vote .t{display:none;align-items:center;gap:12px;width:100%;height:40px;padding:0 14px;position:relative}
.band.vote .t::before{content:"";position:absolute;left:0;top:0;height:2px;width:var(--share,0%);background:var(--forest);transition:width .9s var(--ease)}
.band.vote.said .v{display:none}
.band.vote.said .t{display:flex}
.band.vote .sq{display:none}
.band.vote .sq i{width:10px;height:10px;display:block;background:var(--forest)}
.band.vote .sq i.n{background:var(--stone-2)}
.stone .band.vote .sq i.n{background:var(--stone-2)}
.band.vote .sq i.o{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-20)}
.band.vote .txt{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.band.vote .chg{margin-left:auto;font-style:italic;font-size:13px;color:var(--ink-55);transition:color .3s;white-space:nowrap}
.band.vote .chg:hover{color:var(--ink)}
/* the reveal: two bars rise up the photograph, yes and no, hold, and recede */
.ph .bars{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:flex-end;z-index:3;pointer-events:none}
.ph:has(.bars) .say1,.ph:has(.bars) .shade{opacity:0;transition:opacity .4s}
.ph .bars i{flex:1;height:0;position:relative;font-style:normal;transition:height .9s var(--ease);overflow:hidden}
.ph .bars i em{position:absolute;left:16px;top:14px;display:flex;flex-direction:column;font-style:normal}
.ph .bars i.y{background:rgba(43,48,29,.88);color:#fff}
.ph .bars i.n{background:rgba(251,249,246,.9);color:var(--ink)}
.ph .bars i b{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.4vw,34px), 28px + (clamp(26px,2.4vw,34px) - 28px) * 0.6);line-height:1}
.ph .bars i span{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-top:6px;opacity:.85}
.more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(28px,4vh,40px)}
.more i{font-style:italic;font-size:14.5px;color:var(--ink-55)}

/* ---- two doors: a photograph each, one field ---- */
.doors2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,32px)}
.door{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--forest);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.4vw,32px)}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.door:hover img{transform:scale(1.02)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,.05),rgba(20,24,20,.72))}
.door>*{position:relative;z-index:1}
.door h3{font-family:var(--face);font-weight:400;font-size:min(clamp(24px,2.4vw,32px), 28px + (clamp(24px,2.4vw,32px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.door p{margin-top:6px;font-style:italic;font-size:15.5px;color:rgba(255,255,255,.82)}
.door .field{margin-top:18px}
@media(max-width:760px){.doors2{grid-template-columns:1fr}}

/* ---- next, and the line ---- */
.next{background:var(--forest);color:var(--on-forest);padding:clamp(52px,8vh,88px) 0}
.next .k{color:var(--on-forest-55)}
.next h2{margin-top:12px;font-family:var(--face);font-weight:400;font-size:min(clamp(32px,3.6vw,52px), 28px + (clamp(32px,3.6vw,52px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.012em;color:#fff;text-wrap:balance;max-width:22ch}
.next p{margin-top:14px;font-size:clamp(17px,1.35vw,19px);line-height:1.6;max-width:48ch}
.next .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(24px,4vh,36px)}
.next .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.next .btn:hover{background:#fff;border-color:#fff}
.next .or{font-style:italic;font-size:15.5px;color:var(--on-forest-55);transition:color .3s}
.next .or:hover{color:#fff}
.made{padding:clamp(24px,3.5vh,32px) 0;text-align:center;font-style:italic;font-size:15.5px;color:var(--ink-55)}
.made a{font-style:normal;color:var(--ink);margin-left:6px}

/* ---- the sheet: everything about one thing, opened from its card ---- */
.scrim{position:fixed;inset:0;z-index:300;background:rgba(65,64,66,.35);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:310;width:min(520px,100%);background:var(--paper);color:var(--ink);overflow-y:auto;transform:translateX(102%);transition:transform .55s var(--ease)}
body.sheet-open .scrim{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
body.sheet-open .sheet{transform:none}
body.sheet-open{overflow:hidden}
.sheet .x{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(251,249,246,.94);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.sheet .x i{position:relative;width:14px;height:14px;display:block}
.sheet .x i::before,.sheet .x i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.sheet .x i::after{transform:rotate(-45deg)}
.sheet .hero{position:relative;height:min(58vh,520px);overflow:hidden;background:var(--stone-2)}
.sheet .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sheet .body{padding:clamp(22px,3vh,32px) clamp(22px,3vw,36px) 40px}
.sheet h2{margin-top:8px;font-family:var(--face);font-weight:400;font-size:min(clamp(28px,3vw,36px), 28px + (clamp(28px,3vw,36px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.01em}
.sheet .where{font-size:16.5px}
.sheet .words{margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--ink-75)}
.sheet .facts{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:8px 22px;font-size:16px}
.sheet .facts dt{font-style:italic;color:var(--ink-55)}
.sheet .facts dd.free{color:var(--forest);font-weight:500}
.sheet .say{margin-top:24px;display:flex;gap:8px}
.sheet .say .btn{flex:1}
.sheet .who{margin-top:28px}
.sheet .who .faces{margin-top:10px}
.sheet .talk{margin-top:28px}
.sheet .talk p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--ink-75)}
.sheet .talk p b{font-weight:500;color:var(--ink)}
.sheet .talk .field{margin-top:14px;background:var(--stone)}
.sheet .talk .field input{height:48px}
.sheet .talk .field button{height:48px;background:transparent;color:var(--ink)}
.sheet .map{margin-top:28px;aspect-ratio:3/2;background:var(--stone);display:grid;place-items:center;font-style:italic;color:var(--ink-55);text-align:center;padding:20px;font-size:15px}
.sheet .links{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px}
.sheet .links a{color:var(--ink)}
.sheet .links a+a{font-style:italic;color:var(--ink-55)}

/* ---- the deck: one place at a time, yes or no ---- */
.vote{padding:clamp(40px,6vh,64px) 0 clamp(56px,8vh,88px)}
.vote .stage{display:grid;grid-template-columns:minmax(0,1fr) min(400px,70vw) minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,48px)}
.deck{position:relative;width:100%;aspect-ratio:var(--card);touch-action:pan-y}
.deck .card{position:absolute;inset:0;background:var(--stone-2);overflow:hidden;transition:transform .55s var(--ease),opacity .55s var(--ease);will-change:transform;user-select:none}
.deck .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.deck .card::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,0) 45%,rgba(20,24,20,.78))}
.deck .card .w{position:absolute;left:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);bottom:clamp(18px,2vw,26px);color:#fff;z-index:2}
.deck .card .w h3{font-family:var(--face);font-weight:400;font-size:min(clamp(24px,2.4vw,32px), 28px + (clamp(24px,2.4vw,32px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.deck .card .w p{margin-top:4px;font-style:italic;font-size:15.5px;color:rgba(255,255,255,.82)}
.deck .card.d1{transform:translateY(12px) scale(.965)}
.deck .card.d2{transform:translateY(24px) scale(.93)}
.deck .card.gone-r{transform:translateX(130%) rotate(12deg);opacity:0}
.deck .card.gone-l{transform:translateX(-130%) rotate(-12deg);opacity:0}
.deck .card.drag{transition:none}
.deck .card .stamp{position:absolute;top:20px;padding:10px 14px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;opacity:0;transition:opacity .2s;z-index:3}
.deck .card .stamp.y{left:20px;background:var(--paper);color:var(--ink)}
.deck .card .stamp.n{right:20px;background:var(--ink);color:var(--paper)}
.vote .side{display:flex;flex-direction:column;align-items:center;gap:14px}
.vote .side .big{width:clamp(64px,6vw,84px);height:clamp(64px,6vw,84px);display:grid;place-items:center;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--ink);color:var(--ink);transition:background .22s,color .22s}
.vote .side .big:hover{background:var(--ink);color:var(--paper)}
.vote .side .big.y{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.vote .side .big.y:hover{background:var(--ink);border-color:var(--ink)}
.vote .side.l{justify-self:end}.vote .side.r{justify-self:start}
.vote .count{margin-top:22px;text-align:center;font-style:italic;font-size:15.5px;color:var(--ink-55)}
.vote .done{display:none;text-align:center}
.vote.finished .stage,.vote.finished .count{display:none}
.vote.finished .done{display:block}
.vote .done h2{font-family:var(--face);font-weight:400;font-size:min(clamp(28px,3vw,40px), 28px + (clamp(28px,3vw,40px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.vote .done p{margin-top:10px;font-style:italic;color:var(--ink-55)}
.vote .done .grid{margin:clamp(24px,4vh,36px) auto 0;max-width:820px;text-align:left}
.vote .done .grid .t{font-size:18px}
@media(max-width:700px){.vote .stage{grid-template-columns:1fr;justify-items:center}.vote .side{flex-direction:row}.vote .side.l,.vote .side.r{justify-self:center}}

/* ---- the itinerary, in the website's language: a rail of days, then each day down a spine ---- */
.rail-days{background:var(--stone);padding:clamp(18px,2.6vh,28px) 0}
.rail-days .strip{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--edge));padding:4px var(--edge)}
.rail-days .strip::-webkit-scrollbar{display:none}
.rail-days .stop{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;white-space:nowrap;padding:6px 0;color:var(--ink)}
.rail-days .stop b{width:40px;height:40px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-weight:400;font-size:17px;flex:0 0 auto;transition:background .3s}
.rail-days .stop span{font-family:var(--serif);font-size:16px}
.rail-days .stop span i{font-style:italic;color:var(--ink-55);margin-left:8px;font-size:14.5px}
.rail-days .stop:hover b{background:var(--ink)}
.rail-days .hop{flex:0 0 auto;width:clamp(22px,3vw,44px);height:1.5px;background:var(--stone-2);margin:0 clamp(10px,1.4vw,18px)}
.day{padding:clamp(52px,8vh,88px) 0 clamp(48px,7vh,80px)}
.day.stone{background:var(--stone)}
.ledger{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:clamp(28px,4vw,72px);align-items:center;margin-bottom:clamp(36px,5vh,56px)}
.ledger h2{font-family:var(--face);font-weight:400;font-size:min(clamp(32px,3.6vw,52px), 28px + (clamp(32px,3.6vw,52px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.012em;text-wrap:balance}
.ledger .stand{margin-top:14px;font-style:italic;font-size:clamp(16px,1.3vw,18.5px);line-height:1.5;color:var(--ink-75);max-width:50ch}
.short{background:var(--forest);color:var(--on-forest);padding:clamp(22px,2.6vw,34px) clamp(24px,2.8vw,38px)}
.short .k{color:var(--on-forest-55);margin-bottom:12px}
.short p{font-size:clamp(16px,1.25vw,18px);line-height:1.62}
.short p b{font-weight:500;color:#fff}
.short .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.short .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);min-height:44px;padding:0 18px 0 calc(18px + .2em)}
.short .btn.quiet{background:transparent;color:var(--on-forest);border-color:rgba(241,237,232,.55)}
.short .btn.quiet:hover{background:var(--on-forest);color:var(--forest)}
@media(max-width:820px){.ledger{grid-template-columns:1fr}}
/* the head of a day: the date, where you sleep, and one sentence on what the day is */
.dayhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(30px,4.5vh,48px)}
.dayhead h2{margin-top:10px;font-family:var(--face);font-weight:400;font-size:min(clamp(30px,3.2vw,44px), 28px + (clamp(30px,3.2vw,44px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.01em}
.dayhead .sleep{margin-top:8px;font-style:italic;font-size:16.5px;color:var(--ink-75)}
.dayhead .stand{font-size:17px;line-height:1.6;color:var(--ink-75);max-width:46ch;padding-bottom:4px}
.dayhead .stand b{font-weight:500;color:var(--ink)}
@media(max-width:820px){.dayhead{grid-template-columns:1fr}}
/* the organiser's steps: what the system did for them, and the three things left to do */
.build{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.build a{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.8vw,22px);background:var(--paper);color:var(--ink);transition:background .3s}
.build a:hover{background:#fff}
.build a b.n{width:36px;height:36px;display:grid;place-items:center;font-family:var(--face);font-weight:400;font-size:16px;background:var(--stone-2);color:var(--ink-55)}
.build a.done b.n{background:var(--ink);color:var(--paper)}
.build a.now b.n{background:var(--forest);color:var(--paper)}
.build a .t{font-size:clamp(18px,1.6vw,22px);margin-top:4px}
.build a i{font-style:italic;font-size:14px;color:var(--ink-55);line-height:1.4}
.build a.done i{color:var(--moss)}
.build a.now i{color:var(--ink)}
@media(max-width:900px){.build{grid-template-columns:1fr 1fr}}
/* the plus on the spine: add to this part of the day */
.stop-row.plus{padding-bottom:clamp(14px,2vh,20px)}
.stop-row.plus .n{background:transparent;color:var(--ink-55);box-shadow:inset 0 0 0 1.5px var(--ink-20);font-size:22px;cursor:pointer;transition:background .25s,color .25s}
.stop-row.plus:hover .n{background:var(--forest);color:var(--paper);box-shadow:none}
.stop-row.plus .body{padding-top:12px}
.stop-row.plus button.w{font-family:var(--face);font-size:clamp(18px,1.6vw,21px);color:var(--ink-55);text-align:left;transition:color .3s}
.stop-row.plus:hover button.w{color:var(--ink)}
.stop-row.plus button.w i{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-35);margin-left:10px}
/* the whole row opens its pull-out */
.stop-row.open-me{cursor:pointer}
.stop-row.open-me:hover h3{color:var(--moss)}
/* the two pull-outs the organiser works in */
.sheet .sec{margin-top:26px}
.sheet .sec .k{margin-bottom:10px}
.sheet .sec .field{background:var(--stone)}
.sheet .sec .field input,.sheet .sec .field textarea{height:48px}
.sheet .sec .field button{background:transparent;color:var(--ink)}
.sheet .sec textarea{width:100%;min-height:84px;padding:12px 14px;background:var(--stone);font-size:15.5px;line-height:1.5;resize:vertical}
.sheet .sec textarea::placeholder{font-style:italic;color:var(--ink-55)}
.sheet .minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sheet .mini{text-align:left;display:flex;flex-direction:column}
.sheet .mini .ph{aspect-ratio:var(--card)}
.sheet .mini .t{margin-top:8px;font-size:15.5px;line-height:1.2}
.sheet .mini .where{margin-top:2px;font-size:13px}
.sheet .mini .band{margin-top:8px;padding:9px 10px;font-size:8.5px;background:var(--stone);transition:background .25s,color .25s}
.sheet .mini:hover .band{background:var(--forest);color:var(--paper)}
.sheet .pills{margin-top:0}
.sheet .drop{margin-top:10px;padding:18px;background:var(--stone);text-align:center;font-style:italic;font-size:14.5px;color:var(--ink-55);cursor:pointer;transition:background .25s}
.sheet .drop:hover{background:var(--stone-2)}
.sheet .drop b{display:block;font-style:normal;font-family:var(--face);font-weight:400;font-size:17px;color:var(--ink);margin-bottom:4px}
.sheet .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet .off{margin-top:28px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
.sheet .off button{font-style:italic;color:var(--ink);box-shadow:inset 0 -1px 0 var(--stone-2)}
.sheet .head-k{margin-top:0}
.sheet .grid-days{display:flex;flex-wrap:wrap;gap:8px}
.todo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.todo a{display:block;background:var(--paper);padding:clamp(18px,2vw,26px);color:var(--ink);transition:background .3s}
.todo a:hover{background:#fff}
.todo a b{display:block;font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2.2vw,30px), 28px + (clamp(22px,2.2vw,30px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.todo a i{display:block;margin-top:8px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
@media(max-width:800px){.todo{grid-template-columns:1fr}}
.tl{position:relative;max-width:1040px;margin:0 auto}
.tl::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;border-left:1.5px dashed var(--stone-2)}
.stone .tl::before{border-color:var(--ink-20)}
.stop-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 200px;gap:0 clamp(22px,3vw,48px);align-items:start;padding-bottom:clamp(16px,2.4vh,24px)}
.stop-row .n{position:relative;z-index:1;width:48px;height:48px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-weight:400;font-size:19px;line-height:1}
.stop-row.stay .n{background:var(--ink)}
.stop-row.travel .n{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.stone .stop-row.travel .n{background:var(--stone)}
.stop-row.then .n{background:transparent;color:var(--ink-55);box-shadow:inset 0 0 0 1.5px var(--ink-20);font-size:24px}
.stop-row .body{padding-top:4px;min-width:0}
.stop-row .part{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--moss)}
.stop-row .part i{font-style:normal;color:var(--ink-35);margin:0 10px}
.stop-row h3{margin-top:8px;font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2.2vw,30px), 28px + (clamp(22px,2.2vw,30px) - 28px) * 0.6);line-height:1.08;letter-spacing:-.006em;text-wrap:balance}
.stop-row h3 button{text-align:left;font:inherit;letter-spacing:inherit;transition:color .3s}
.stop-row h3 button:hover{color:var(--moss)}
.stop-row .place{display:block;margin-top:5px;font-style:italic;font-size:16px;color:var(--ink-75)}
.stop-row p.w{margin-top:12px;font-size:16.5px;line-height:1.6;max-width:56ch;color:var(--ink-75)}
.stop-row .find{margin-top:10px;font-style:italic;font-size:15px;color:var(--ink-55)}
.stop-row .bk{margin-top:8px;font-size:15px;color:var(--ink-75)}
.stop-row .bk b{font-weight:500;color:var(--ink)}
.stop-row .bk i{font-style:normal;color:var(--ink-35);margin:0 8px}
.stop-row .bk a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--stone-2)}
.stop-row .who{display:flex;align-items:center;gap:10px;margin-top:12px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
.stop-row .who .faces b{width:26px;height:26px;font-size:11px}
.stop-row .acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(14px,1.6vw,22px);margin-top:14px}
.stop-row .acts button{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35);padding:4px 0;transition:color .3s}
.stop-row:hover .acts button{color:var(--ink-55)}
.stop-row .acts button:hover{color:var(--ink)}
.stop-row .ph{aspect-ratio:1;cursor:pointer}
/* a free slot: what the group can do with it */
.stop-row.free h3{color:var(--ink-55)}
.stop-row .sugg{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.stop-row .sugg .s{display:flex;align-items:center;gap:12px;font-size:15.5px}
.stop-row .sugg .s .faces b{width:26px;height:26px;font-size:11px}
.stop-row .sugg .s i{font-style:italic;color:var(--ink-55)}
.stop-row .sugg .yn{margin-left:auto}
.stop-row .sugg .yn button{height:32px;min-width:auto;padding:0 10px 0 calc(10px + .2em);font-size:9px}
.stop-row .sugg .btn{align-self:flex-start;margin-top:4px}
.poll{margin-top:14px;background:var(--paper);padding:18px 20px;max-width:560px}
.stone .poll{background:var(--paper)}
.poll .q{font-family:var(--face);font-size:20px;line-height:1.2}
.poll .who{margin-top:0;margin-bottom:12px}
.poll .opts2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.poll .opts2 button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;background:var(--stone);color:var(--ink);text-align:left;transition:background .25s,color .25s}
.poll .opts2 button b{font-family:var(--face);font-weight:400;font-size:17px;line-height:1.15}
.poll .opts2 button .faces{margin-top:2px}
.poll .opts2 button .faces b{width:22px;height:22px;font-size:10px;background:var(--forest)}
.poll .opts2 button:hover,.poll .opts2 button.on{background:var(--forest);color:#fff}
.poll .opts2 button.on .faces b,.poll .opts2 button:hover .faces b{background:var(--paper);color:var(--ink)}
.poll .foot{margin-top:12px;display:flex;justify-content:space-between;gap:12px;font-style:italic;font-size:14px;color:var(--ink-55)}
.hop-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 clamp(22px,3vw,48px);align-items:center;padding:clamp(6px,1vh,10px) 0 clamp(28px,4vh,44px)}
.hop-row i{position:relative;z-index:1;justify-self:center;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--stone-2)}
.stone .hop-row i{background:var(--stone);box-shadow:inset 0 0 0 1.5px var(--ink-20)}
.hop-row span{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--moss)}
.hop-row span em{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-75);margin-left:14px}
/* then what: the four doors at the end of a day */
.stop-row.then .doors4{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.stop-row.then .doors4 button{font-family:var(--face);font-size:clamp(18px,1.6vw,22px);color:var(--ink);transition:color .3s}
.stop-row.then .doors4 button i{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-55);margin-left:6px}
.stop-row.then .doors4 button:hover{color:var(--moss)}
.stop-row.free h3{color:var(--ink-55)}
@media(max-width:820px){.stop-row{grid-template-columns:48px minmax(0,1fr)}.stop-row .ph{grid-column:2;max-width:360px;margin-top:20px}}
/* the organiser's shelf: agreed and not yet placed; the tray of forwarded confirmations */
.shelf .rail{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--edge));padding:0 var(--edge)}
.shelf .rail::-webkit-scrollbar{display:none}
.shelf .mini{flex:0 0 auto;width:clamp(150px,14vw,190px);text-align:left}
.shelf .mini .ph{aspect-ratio:var(--card)}
.shelf .mini .t{margin-top:10px;font-size:17px}
.shelf .mini .where{font-size:14px}
.shelf .mini .put{display:block;margin-top:8px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--moss)}
.tray{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(24px,3.5vw,56px);align-items:start}
.tray .item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--paper);padding:18px 22px}
.tray .item+.item{margin-top:10px}
.tray .item .from{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin-bottom:6px}
.tray .item .what{font-family:var(--face);font-size:19px;line-height:1.2}
.tray .item .found{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-75)}
.tray .item .found i{font-style:italic;color:var(--ink-55)}
.tray .item .yn{flex-direction:column;gap:6px}
.tray .item .yn button{min-width:96px;white-space:nowrap}
.tray .how{background:var(--paper);padding:clamp(20px,2.4vw,30px)}
.tray .how h3{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.9vw,25px), 28px + (clamp(20px,1.9vw,25px) - 28px) * 0.6);line-height:1.1}
.tray .how p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--ink-75)}
.tray .how .addr{margin-top:14px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink);padding:12px 14px;background:var(--stone);word-break:break-all}
.tray .how .field{margin-top:10px;background:var(--stone)}
.tray .how .field button{background:transparent;color:var(--ink)}
.tray .how .drop{margin-top:10px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
@media(max-width:820px){.tray{grid-template-columns:1fr}}
/* the whole trip on one map */
.trip-map{aspect-ratio:1337/620;background:var(--stone-2);position:relative;display:grid;place-items:center;text-align:center;padding:24px;font-style:italic;color:var(--ink-55)}
.trip-map .pin{position:absolute;width:32px;height:32px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:14px;transform:translate(-50%,-50%)}
.trip-map .pin.home{background:var(--ink)}

/* ---- stops as cards on the spine; a gap between each with the walk and an Add; the days as a row above ---- */
.dayrail{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(14px,1.8vw,26px);margin-bottom:clamp(28px,4vh,44px)}
.dayrail a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--face);font-size:clamp(17px,1.5vw,20px)}
.dayrail a b{width:36px;height:36px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-weight:400;font-size:15px;transition:background .3s}
.dayrail a:hover b{background:var(--ink)}
.dayrail button.addday{display:inline-flex;align-items:center;gap:10px;font-family:var(--face);font-size:clamp(17px,1.5vw,20px);color:var(--ink-55);transition:color .3s}
.dayrail button.addday b{width:36px;height:36px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ink-20);color:var(--ink-55);font-size:20px;font-weight:400;transition:background .25s,color .25s,box-shadow .25s}
.dayrail button.addday:hover{color:var(--ink)}
.dayrail button.addday:hover b{background:var(--forest);color:var(--paper);box-shadow:none}
.stop-row.card-row{grid-template-columns:48px minmax(0,1fr);padding-bottom:0;align-items:start}
.stop-row.card-row .n{margin-top:14px}
.card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 clamp(18px,2.2vw,28px);align-items:center;background:var(--stone);padding:14px;cursor:pointer;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.stone .card{background:var(--paper)}
.card:hover{background:var(--stone-2)}
.stone .card:hover{background:#fff}
.card .ph{aspect-ratio:1;cursor:pointer}
.card .body{padding:4px 8px 4px 0;min-width:0}
.card h3{margin-top:6px}
.card .place{margin-top:3px}
.card .find{margin-top:6px}
.card-row.dragging .card{opacity:.4}
.card-row.over .card{box-shadow:inset 0 3px 0 var(--forest)}
.card .grip{position:absolute;right:14px;top:14px;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35);opacity:0;transition:opacity .25s}
.card{position:relative}
.card:hover .grip{opacity:1}
/* the gap between stops: the plus sits on the spine in ink, Add here beside it, the walk after */
.gap-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 clamp(22px,3vw,48px);align-items:center;padding:clamp(20px,2.8vh,30px) 0}
.gap-row .mark{position:relative;z-index:1;justify-self:center;width:28px;height:28px;display:grid;place-items:center;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink-35);color:var(--ink-55);font-family:var(--face);font-size:17px;line-height:1;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.stone .gap-row .mark{background:var(--stone)}
body[data-role=guest] .gap-row .mark{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--stone-2);cursor:default;color:transparent;pointer-events:none}
body[data-role=guest] .stone .gap-row .mark{box-shadow:inset 0 0 0 1.5px var(--ink-20)}
body[data-role=guest] .gap-row:hover .mark{background:var(--paper);color:transparent;box-shadow:inset 0 0 0 1.5px var(--stone-2)}
body[data-role=guest] .stone .gap-row:hover .mark{background:var(--stone);box-shadow:inset 0 0 0 1.5px var(--ink-20)}
.gap-row .l{display:flex;align-items:center;gap:22px;min-height:28px}
.gap-row .l span{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--moss)}
.gap-row .l span em{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-75)}
.gap-row .l span em::before{content:"·";margin:0 10px;color:var(--ink-35);font-style:normal}
/* the sheet's own header, its rows of listings, and the detail and when screens */
.sheet .shead{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 22px;background:var(--paper)}
.sheet .shead .back{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);visibility:hidden}
.sheet .shead .back b{font-family:var(--face);font-weight:400;font-size:20px;line-height:1;position:relative;top:-1px}
.sheet .shead.can .back{visibility:visible}
.sheet .shead .xw{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.sheet .shead .xw i{position:relative;width:14px;height:14px;display:block}
.sheet .shead .xw i::before,.sheet .shead .xw i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.sheet .shead .xw i::after{transform:rotate(-45deg)}
.sheet .where-k{margin-top:4px;font-style:italic;font-size:15px;color:var(--ink-55)}
.rowlist .item{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px;background:var(--stone);cursor:pointer;transition:background .25s;text-align:left}
.rowlist .item+.item{margin-top:8px}
.rowlist .item:hover{background:var(--stone-2)}
.rowlist .item .ph{aspect-ratio:1;cursor:pointer}
.rowlist .item .t{font-size:18px;line-height:1.15}
.rowlist .item .where{margin-top:3px;font-size:14px}
.rowlist .item .btn.sm{min-height:36px;padding:0 14px 0 calc(14px + .2em);font-size:9px;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.rowlist .item .btn.sm:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dhero{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--stone-2);margin-top:14px}
.dhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sheet .sub2{margin-top:10px;font-size:15px;color:var(--ink-55);font-style:italic}
.sheet .attach{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sheet .body.pad{padding-top:10px}
.gap-row .addhere{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);transition:color .3s}
.gap-row:hover .mark,.gap-row .addhere:hover~.mark{background:var(--forest);color:var(--paper);box-shadow:none}
.gap-row:hover .addhere{color:var(--moss)}
.gap-row.guest:hover .mark{background:var(--paper)}
.stone .gap-row.guest:hover .mark{background:var(--stone)}
.stop-row.plus{margin-top:34px;grid-template-columns:48px minmax(0,1fr);align-items:center}
.stop-row.plus .n{background:transparent;color:var(--ink-55);box-shadow:inset 0 0 0 1px var(--ink-35);font-size:20px}
.stop-row.plus .ghost{display:flex;align-items:center;justify-content:center;gap:14px;min-height:118px;width:100%;border:1.5px dashed var(--ink-20);color:var(--ink-75);transition:border-color .3s,color .3s,background .3s}
.stop-row.plus .ghost b{font-family:var(--face);font-weight:400;font-size:24px;line-height:1;color:var(--ink-55)}
.stop-row.plus .ghost span{font-family:var(--face);font-size:clamp(18px,1.6vw,21px)}
.stop-row.plus .ghost i{font-style:italic;font-size:14.5px;color:var(--ink-55)}
.stop-row.plus:hover .ghost{border-color:var(--forest);color:var(--ink);background:rgba(43,48,29,.04)}
.stop-row.plus:hover .n{background:var(--forest);color:var(--paper);box-shadow:none}
@media(max-width:700px){.stop-row.plus .ghost{flex-direction:column;gap:6px}}
/* the day's head: the date, then one short introduction */
.dayhead.one{display:block}
.dayhead.one .stand{margin-top:14px;max-width:60ch}
/* the adder's screens */
.scr{display:none}
.scr.on{display:block}
.scr .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);margin-bottom:18px;transition:color .3s}
.scr .back:hover{color:var(--ink)}
.scr .back b{font-family:var(--face);font-weight:400;font-size:16px}
.choices{display:grid;gap:8px;margin-top:22px}
.choices button{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 18px;background:var(--stone);color:var(--ink);text-align:left;transition:background .25s,color .25s}
.choices button b{font-family:var(--face);font-weight:400;font-size:19px;line-height:1.15}
.choices button i{font-style:italic;font-size:14px;color:var(--ink-55);text-align:right;transition:color .25s}
.choices button:hover{background:var(--forest);color:#fff}
.choices button:hover i{color:var(--on-forest-55)}
.whenrow{display:flex;align-items:center;gap:14px;margin-top:18px}
.whenrow .field{max-width:150px;background:var(--stone)}
.whenrow i{font-style:italic;font-size:14.5px;color:var(--ink-55)}
.sheet .foot-add{margin-top:24px;display:flex;align-items:center;gap:16px}
.sheet .foot-add .or{font-style:italic;font-size:14.5px;color:var(--ink-55)}
.sheet .minis.two-up{grid-template-columns:1fr 1fr}
.sheet .ways{display:flex;flex-wrap:wrap;gap:8px}
.sheet .ways button{min-height:40px;padding:0 16px 0 calc(16px + .2em);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--ink);color:var(--ink)}
.sheet .ways button.on,.sheet .ways button:hover{background:var(--ink);color:var(--paper)}
@media(max-width:700px){.card{grid-template-columns:1fr}.card .ph{aspect-ratio:3/2}}

/* ---- days (the not-yet state) ---- */
.day{padding:clamp(40px,6vh,64px) 0}
.day:nth-child(even){background:var(--stone)}
.day .head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-bottom:clamp(20px,3vh,28px)}
.day .head h2{font-family:var(--face);font-weight:400;font-size:min(clamp(24px,2.4vw,32px), 28px + (clamp(24px,2.4vw,32px) - 28px) * 0.6);line-height:1.1;letter-spacing:-.008em}
.day .head p{font-style:italic;font-size:15.5px;color:var(--ink-55)}
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.chain .e{display:flex;flex-direction:column}
.chain .e .k{margin-bottom:10px}
.chain .e .ph{aspect-ratio:var(--card)}
.chain .e .t{margin-top:12px;font-size:clamp(17px,1.5vw,20px)}
.chain .e .where{font-size:14.5px}
.chain .e.gap .ph{background:var(--stone-2);display:flex;align-items:flex-end;padding:clamp(14px,1.6vw,22px);font-style:italic;font-size:15px;color:var(--ink-55);cursor:pointer}
.stone .chain .e.gap .ph{background:var(--paper)}
.chain .e.gap .ph:hover{color:var(--ink)}
@media(max-width:900px){.chain{grid-template-columns:1fr 1fr}}

/* ---- people ---- */
.people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.person{display:flex;flex-direction:column;align-items:flex-start}
.person .f{width:100%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:min(clamp(36px,4vw,56px), 28px + (clamp(36px,4vw,56px) - 28px) * 0.6);cursor:pointer}
.person .f img{width:100%;height:100%;object-fit:cover}
.person.out .f{background:transparent;color:var(--ink-35);box-shadow:inset 0 0 0 1px var(--ink-20);animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:inset 0 0 0 1px var(--ink-55)}}
.person .band{width:100%}
.person .t{margin-top:14px;font-size:clamp(18px,1.6vw,22px)}
.person .where{font-size:14.5px}
@media(max-width:900px){.people{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.people{grid-template-columns:1fr 1fr}}

/* ---- one question, answered with a tap ---- */
.ask h2{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.8vw,38px), 28px + (clamp(26px,2.8vw,38px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.opt{aspect-ratio:4/3;background:var(--stone);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,26px);text-align:left;transition:background .25s,color .25s;color:var(--ink)}
.stone .opt{background:var(--paper)}
.opts.brief .opt{aspect-ratio:auto;min-height:88px;justify-content:center}
.opt b{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2.2vw,30px), 28px + (clamp(22px,2.2vw,30px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.opt i{display:block;margin-top:6px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
.opt:hover,.opt.on{background:var(--forest);color:#fff}
.opt:hover i,.opt.on i{color:var(--on-forest-55)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pills button{min-height:40px;padding:0 18px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--ink);color:var(--ink)}
.pills button:hover,.pills button.on{background:var(--ink);color:var(--paper)}
.answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2vw,28px)}
.ans{display:flex;gap:14px;align-items:center}
.ans .faces b{width:48px;height:48px;font-size:18px}
.ans .t{font-size:18px}
.ans .where{margin-top:2px;font-size:14.5px}
@media(max-width:800px){.opts{grid-template-columns:1fr 1fr}}

/* ---- pages of the book, read flat ---- */
.book{background:var(--stone);padding:clamp(32px,5vh,56px) 0 clamp(48px,7vh,72px)}
.book .in{max-width:calc(720px + 2*var(--edge))}
.page{background:var(--paper);padding:clamp(28px,4vw,56px);margin-top:clamp(18px,2.5vh,28px)}
.page:first-child{margin-top:0}
.page .k{margin-bottom:14px}
.page h2{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.8vw,38px), 28px + (clamp(26px,2.8vw,38px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.page p{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--ink-75)}
.page .toc{margin-top:18px;display:grid;gap:10px}
.page .toc a{display:flex;justify-content:space-between;gap:16px;font-family:var(--face);font-size:20px;line-height:1.2}
.page .toc a i{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-55)}
.page .toc a.grey{color:var(--ink-35)}
.page .pic{margin-top:22px;aspect-ratio:3/2;overflow:hidden;background:var(--stone-2)}
.page .pic img{width:100%;height:100%;object-fit:cover}
.page .grid{margin-top:22px;gap:20px 16px}
.page .grid .t{font-size:17px}
.page.grey{background:var(--stone-2);color:var(--ink-55)}
.page.grey h2{color:var(--ink-55)}
.page.cover-page{background:transparent;padding:0;display:flex;justify-content:center}
.page.cover-page .cover{width:clamp(240px,34vw,360px)}

/* ---- starting a trip: the cover forms as the questions are answered ---- */
.start{padding:clamp(40px,6vh,64px) 0 clamp(56px,8vh,96px)}
.start .open{display:grid;grid-template-columns:clamp(240px,23vw,320px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.start .q{display:none}
.start .q.on{display:block}
.start .q .k{margin-bottom:12px}
.start .q h1{font-family:var(--face);font-weight:400;font-size:min(clamp(30px,3.4vw,46px), 28px + (clamp(30px,3.4vw,46px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
.start .q .field{margin-top:22px;background:var(--stone);max-width:520px}
.start .q .field button{background:transparent;color:var(--ink)}
.start .q .hint{margin-top:10px;font-style:italic;font-size:15px;color:var(--ink-55)}
.start .q .pills{margin-top:22px}
.start .q .acts{display:flex;align-items:center;gap:22px;margin-top:clamp(24px,4vh,34px)}
/* A step that is not answered yet says so on the button rather than only in
   the cursor: the green one read as ready to press when it was not. */
.start .q .acts .btn[disabled]{background:var(--stone-2);border-color:var(--stone-2);color:rgba(65,64,66,.4);cursor:default}
.start .q .back{font-style:italic;font-size:15px;color:var(--ink-55)}
/* No progress bar. Eight dashes across the top of a page that asks one
   quiet question at a time made it a form to be got through - and the book
   on the left already shows how far along it is, in the only terms that
   matter here. (Jack, 7 September.) */
.cover .k:empty::before,.cover h2:empty::before{content:"\00a0"}
.cover .plate.empty{background:rgba(255,255,255,.14)}
@media(max-width:700px){.start .open{grid-template-columns:1fr}.start .cover{max-width:280px}}

/* ---- the album ---- */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.wall .ph{cursor:default}
.wall .ph:nth-child(3n) {aspect-ratio:1}
.wall .drop{aspect-ratio:var(--card);background:var(--stone);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,1.8vw,24px);cursor:pointer;transition:background .25s}
.wall .drop:hover{background:var(--stone-2)}
.wall .drop h3{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,2vw,26px), 28px + (clamp(20px,2vw,26px) - 28px) * 0.6);line-height:1.08}
.wall .drop p{margin-top:6px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
@media(max-width:900px){.wall{grid-template-columns:1fr 1fr}}

/* ---- the film that explains the chapter: a small still, a length, two words ---- */
.film{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2.6vh,24px);color:var(--ink-75);font-style:italic;font-size:14.5px;transition:color .3s}
.film:hover{color:var(--ink)}
.film b{width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent var(--ink);font-size:0}
.film .w i{font-style:italic;color:var(--ink-55);margin-left:6px}

/* ---- one short line over the photograph, white on a shade you can barely see ---- */
.ph .shade{position:absolute;left:0;right:0;bottom:0;height:55%;z-index:1;background:linear-gradient(to bottom,rgba(20,24,20,0),rgba(20,24,20,.42) 60%,rgba(20,24,20,.58));pointer-events:none}
.ph .say1{position:absolute;left:14px;right:14px;bottom:13px;z-index:2;color:#fff;font-style:italic;font-size:14.5px;line-height:1.35;text-align:left;text-wrap:balance}

/* ---- the kinds: words in a row above the cards, the chosen one in ink with a forest line under it ---- */
.kinds{display:flex;flex-wrap:wrap;gap:6px clamp(18px,2.4vw,32px);margin-bottom:clamp(20px,3vh,28px)}
.kinds button{display:inline-flex;align-items:baseline;gap:8px;padding:0 0 10px;font-family:var(--face);font-size:clamp(19px,1.7vw,23px);line-height:1.1;letter-spacing:-.005em;color:var(--ink-35);box-shadow:inset 0 -2px 0 transparent;transition:color .3s,box-shadow .3s}
.kinds button i{font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;color:var(--ink-35);transition:color .3s}
.kinds button:hover{color:var(--ink)}
.kinds button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--forest)}
.kinds button.on i{color:var(--ink-55)}
.grid .c.rise{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.grid .c.rise{opacity:0;transform:translateY(14px)}
/* the pages */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:clamp(28px,4vh,40px)}
.pager button{min-width:40px;height:40px;padding:0 12px;display:grid;place-items:center;font-family:var(--face);font-size:17px;color:var(--ink);transition:background .25s,color .25s}
.pager button.on{background:var(--forest);color:var(--paper)}
.pager button.step{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:0 16px;border:1px solid var(--ink)}
.pager button.step:hover{background:var(--ink);color:var(--paper)}
.pager button.step[disabled]{opacity:.3;pointer-events:none}
.pager .of{font-style:italic;font-size:14.5px;color:var(--ink-55);margin:0 6px}

/* ---- the queue: a stack of rows to work through; four in view, a fifth fading in, each leaves when you have said ---- */
.feed{max-width:900px;margin:0 auto}
.big{display:grid;grid-template-columns:34px 200px minmax(0,1fr) auto;gap:0 clamp(16px,2vw,28px);align-items:center;background:var(--stone);padding:14px clamp(18px,2.2vw,28px) 14px 18px;margin-bottom:12px;overflow:hidden;transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .45s var(--ease),margin .45s var(--ease),padding .45s var(--ease)}
.big.off{display:none}
.big.gone{opacity:0;transform:translateX(40px)}
.big.shut{max-height:0!important;margin-bottom:0;padding-top:0;padding-bottom:0}
.big .n{font-family:var(--face);font-size:17px;color:var(--ink-35);line-height:1}
.big .pic{position:relative;overflow:hidden;background:var(--stone-2);aspect-ratio:4/3}
.big .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.big .side{display:flex;flex-direction:column;min-width:0}
.big .side h3{font-family:var(--face);font-weight:400;font-size:min(clamp(19px,1.8vw,23px), 28px + (clamp(19px,1.8vw,23px) - 28px) * 0.6);line-height:1.1;letter-spacing:-.008em}
.big .side .where{margin-top:2px;font-size:14.5px}
.big .side .words{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big .side .who{display:flex;align-items:center;gap:10px;margin-top:12px;font-style:italic;font-size:13.5px;color:var(--ink-55)}
.big .acts{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.big .acts .yn button{height:40px;min-width:72px;background:var(--paper)}
.big .acts .yn button:hover{background:var(--ink)}
.big .acts .or{font-style:italic;font-size:13px;color:var(--ink-55);transition:color .3s}
.big .acts .or:hover{color:var(--ink)}
.feed-done{display:none;text-align:center;padding:clamp(40px,6vh,64px) 0}
.feed-done h2{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.8vw,38px), 28px + (clamp(26px,2.8vw,38px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.feed-done p{margin-top:10px;font-style:italic;color:var(--ink-55)}
.feed-wrap.finished .feed,.feed-wrap.finished .left{display:none}
.feed-wrap.finished .feed-done{display:block}
.left{margin-top:18px;text-align:center;font-style:italic;font-size:14.5px;color:var(--ink-55)}
@media(max-width:800px){.big{grid-template-columns:34px 1fr auto;grid-template-rows:auto auto}.big .pic{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================ THE SITE'S PIECES · the desk, the listing card, the September system ================ */
/* ---- THE SITE'S DESK, lifted from _desk.css ---- */
/* _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:rgba(43,48,29,.16)}
.dk .days .from, .dk .days .to{background:var(--forest);color:var(--paper)}
.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}

/* ---- and that same calendar, on open canvas ---- */
.calwrap .cal .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.calwrap .cal .mh h3{font-family:var(--face);font-weight:400;font-size:22px;line-height:1}
.calwrap .cal .mh h3 span{font-family:var(--serif);font-style:italic;font-size:.75em;color:var(--ink-55);margin-left:12px}
.calwrap .cal .mh div{display:flex;gap:4px}
.calwrap .cal .mh button{width:40px;height:40px;display:grid;place-items:center;background:var(--stone);color:var(--ink)}
.calwrap .cal .mh button:hover{background:var(--stone-2)}
.calwrap .cal .mh button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.calwrap .dow, .calwrap .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calwrap .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}
.calwrap .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}
.calwrap .days button:hover{background:var(--stone-2)}
.calwrap .days .pad{visibility:hidden}
.calwrap .days .past{background:transparent;color:var(--ink-35);pointer-events:none}
.calwrap .days .in{background:rgba(43,48,29,.16)}
.calwrap .days .from, .calwrap .days .to{background:var(--forest);color:var(--paper)}
.calwrap .cal{width:100%}
.calwrap .cal .mh{margin-bottom:18px}
.calwrap .days button{font-size:16px}

/* ---- THE SITE'S LISTING CARD, lifted from _square.css ---- */
/* _square.css - HAND-WRITTEN, like _ours.css and _listing.css. An experiment on two
   pages and then three - /places/see-and-do, /places and /accommodation (the cards
   there through components/design/square-card.tsx) - at Jack's asking. The name over
   the picture: a 4:5 picture, four across; the foot of the picture blurred
   progressively, kept below the words; the name in Larken and a line of no more than
   eighty characters held to two lines; Save and Add to trip rising into the middle on
   hover under a veil, the caption staying put beneath it. Photographs, and film that
   plays on its own, in the same frame. Loaded through config('design.extras') after
   _shared.css and _index.css, so it only overrides. No class is invented: .card .c
   .sh .t .do .go are all in place-index.html; .sh, the mock's scrim, is here the
   holder of the blur layers; .filmed on the hero is set by the film itself. If it is
   kept it goes into the mock and build-index.py; if not, delete this file, the one
   line in config/design.php, and the branch in places/shelf.tsx. */
.grid,.grid4{gap:clamp(22px,2.6vw,36px)}
/* four across from a thousand pixels (Jack, 8 Sep: "try 4 images on one row") */
@media(min-width:1000px){.grid,.grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,1.9vw,28px)}}
/* the card stands on its own: what _index.css gave it on see-and-do is here too, so
   the same markup is dressed the same on /places, which loads _landing.css instead */
.card{position:relative;display:flex;flex-direction:column;background:transparent;padding:0;border:0;
  box-shadow:none;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.card .c{display:block;position:relative;overflow:hidden;color:#fff;text-decoration:none}
.card .c .t{position:absolute;z-index:1}
.card .c .t .k,.card .c .t .w{display:none}
.card .go{position:absolute;inset:0;z-index:1}
.card .do{position:absolute}
/* in a rail (the choosers on /destinations) the card takes the rail's own width and snaps as its cards do */
.rail .card{flex:0 0 auto;scroll-snap-align:start;width:clamp(220px,calc((100vw - 2*var(--edge) - 3*22px) / 3.6),330px)}
.card .c.on{outline:2px solid var(--august);outline-offset:-2px}
.card:hover{transform:translateY(-4px)}
.card.hide{display:none}
.card.lit{outline:2px solid var(--forest);outline-offset:4px}
.card.lit .c{outline:0}
/* the picture, four by five; film wears the same frame as a photograph */
.card .c{aspect-ratio:4/5;background:var(--stone-2);isolation:isolate}
.card .c img,.card .c video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.card:hover .c img,.card:hover .c video{transform:scale(1.03)}
/* the blur, kept to the foot: the deepest layer reaches only a tenth of the way up,
   the lightest a third, so the words sit on it and the picture above them is untouched */
.card .c .sh{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,13,18,.34) 0,rgba(14,13,18,.10) 22%,rgba(14,13,18,0) 38%)}
.card .c .sh i{position:absolute;inset:0;display:block;
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 4%,transparent var(--z));
  mask-image:linear-gradient(to top,#000 0,#000 4%,transparent var(--z));
  -webkit-backdrop-filter:blur(var(--b));backdrop-filter:blur(var(--b))}
.card .c .sh i:nth-child(1){--b:2px;--z:36%}
.card .c .sh i:nth-child(2){--b:4px;--z:29%}
.card .c .sh i:nth-child(3){--b:8px;--z:22%}
.card .c .sh i:nth-child(4){--b:16px;--z:16%}
.card .c .sh i:nth-child(5){--b:28px;--z:10%}
/* the caption on the blur: the name in Larken, the line in Larken on two lines at most.
   Sized for a card a quarter of the page wide: eighty characters go on two lines. */
.card .c .t{left:18px;right:18px;bottom:17px;transition:opacity .34s var(--ease),transform .42s var(--ease)}
.card .c h3{font-family:var(--face);font-weight:400;font-size:clamp(19px,1.5vw,23px);line-height:1.08;letter-spacing:-.006em;color:#fff;text-wrap:balance}
.card .c .t p{margin:8px 0 0;font-family:var(--face);font-weight:400;font-size:13.5px;line-height:1.48;color:rgba(255,255,255,.88);
  max-width:none;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:999px){.card .c .t{left:22px;right:22px;bottom:20px}.card .c h3{font-size:min(clamp(22px,2.6vw,27px), 28px + (clamp(22px,2.6vw,27px) - 28px) * 0.6)}.card .c .t p{font-size:14.5px;max-width:36ch}}
/* the two actions rise into the middle of the picture; the caption stays beneath the veil */
.card .do{top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  opacity:1;transform:none;transition:none;pointer-events:none;z-index:2}
.card .do::before{content:"";position:absolute;inset:0;background:rgba(14,13,18,.56);opacity:0;transition:opacity .4s var(--ease)}
.card:hover .do::before,.card:focus-within .do::before{opacity:1}
.card .do button,.card .do a{position:relative;pointer-events:auto;text-decoration:none;width:min(66%,172px);height:44px;padding:0;
  background:#fff;color:var(--ink);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;
  opacity:0;transform:translateY(16px) scale(.94);
  transition:opacity .46s var(--ease),transform .46s var(--ease),background .2s,color .2s,box-shadow .2s}
.card .do button + button{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.card .do button + button:hover{box-shadow:inset 0 0 0 1px #fff}
.card .do button.on{background:#fff;color:var(--ink);box-shadow:none}
.card:hover .do button,.card:focus-within .do button,.card:hover .do a,.card:focus-within .do a{opacity:1;transform:none}
.card:hover .do > :nth-child(1){transition-delay:.07s,.07s,0s,0s,0s}
.card:hover .do > :nth-child(2){transition-delay:.14s,.14s,0s,0s,0s}
.card:hover .do > :nth-child(3){transition-delay:.21s,.21s,0s,0s,0s}
@media(hover:none){.card .do::before{opacity:1}.card .do button,.card .do a{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card,.card .c img,.card .c video,.card .c .t,.card .do::before,.card .do button{transition:none}}

/* ── the stay card (Jack, 8 Sep, deck four, 3.3) ──
   A place to stay wears the same card with three differences: the name in Gelica
   Extra Light, letter-spaced .03em; beneath it the region in Jost capitals and no
   line; and on the picture a Tweed badge, SLEEPS small with the number large, when
   the listing holds the number. With the caption a line shorter the blur at the foot
   comes down to meet the top of the words: the lightest layer to a fifth of the
   height, the deepest to six percent. Gelica comes from the Adobe Fonts kit in the
   page head; where it has not arrived the name falls back to Larken. */
.card[data-stay] .c h3{font-family:gelica,var(--face);font-weight:200;font-size:min(clamp(22px,2.1vw,27px), 28px + (clamp(22px,2.1vw,27px) - 28px) * 0.6);letter-spacing:.03em;line-height:1.05}
.card[data-stay] .c .t .k{display:block;margin:8px 0 0;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.card[data-stay] .c .price{position:absolute;top:14px;left:14px;right:auto;z-index:3;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  background:var(--tweed);color:var(--shell);font-family:var(--sans);font-weight:500;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.card[data-stay] .c .price i{font-style:normal}
.card[data-stay] .c .price b{font-family:var(--face);font-weight:400;font-size:22px;line-height:1;letter-spacing:0}
.card[data-stay] .c .sh{background:linear-gradient(to top,rgba(14,13,18,.34) 0,rgba(14,13,18,.10) 12%,rgba(14,13,18,0) 21%)}
.card[data-stay] .c .sh i:nth-child(1){--z:20%}
.card[data-stay] .c .sh i:nth-child(2){--z:16%}
.card[data-stay] .c .sh i:nth-child(3){--z:12%}
.card[data-stay] .c .sh i:nth-child(4){--z:9%}
.card[data-stay] .c .sh i:nth-child(5){--z:6%}
@media(max-width:999px){.card[data-stay] .c h3{font-size:min(clamp(22px,2.8vw,28px), 28px + (clamp(22px,2.8vw,28px) - 28px) * 0.6)}}

/* ── the homepage's guidebook band (Jack, 8 Sep): a photograph on the .desk stage in
   place of the drawn book - Conor Gault's frame of The Best of Isle of Skye on the
   table, cropped to the stage's own ratio ── */
.maker .desk > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ── the hero film under a see-through Cask veil, the words in Shell (Jack, 8 Sep) ──
   The photograph beneath is the film's own first frame, so nothing else can show
   through; when the film says it is playing the hero takes .filmed and the two cross
   over, film in, photograph out, and the photograph is there again if the film stops. */
.hero > video.film{opacity:0;transition:opacity .9s var(--ease)}
.hero.filmed > video.film{opacity:1}
.hero > img{transition:opacity .9s var(--ease)}
.hero.filmed > img{opacity:0}
.hero .veil{background:rgba(57,41,22,.44)}
/* /places (the hero with the Plan your day button): shorter, so the page comes up
   (Jack, 8 Sep, "test making the hero less height"); the words at the homepage's height
   now the Where / When / What strip no longer overlaps the foot of the hero */
.hero:has(.journey){height:clamp(520px,72vh,780px)}
.hero .in{bottom:clamp(56px,9vh,96px)}
/* a photograph's credit has no place over a film that is our own; a photograph keeps its own */
.hero:has(video.film) .credit,.hero:has(video.film) .cap{display:none}
.hero h1,.hero h1 em,.hero .where{color:#F9F5EE}
.hero .credit{color:rgba(249,245,238,.78)}
.hero .credit b{color:#F9F5EE}
@media(prefers-reduced-motion:reduce){.hero > video.film,.hero > img{transition:none}}

/* ---- THE SEPTEMBER SYSTEM: colour and the button, lifted from _bar.css ---- */
:root{--august:#A0BAD4;--ling:#A0BAD4;--cask:#392916;--shell:#F9F5EE;--tweed:#682114;--oat:#F5F1E9}
:root{--paper:#FFFFF7}
/* ── the button: Museum Ordrupgaard's, in Tweed (Jack, 8 Sep) ──
   Their mechanism exactly. The button is a 1px line and a label; its ::after is the
   same label again, in --hover-color on a --hover-bg ground, clipped to nothing on
   the right; hover lets the clip go in 0.4s and the fill wipes in from the left with
   the label changing colour along the edge. Where a button carries no data-label
   the fill and the words change colour plainly instead, over the same 0.4s.
   Default: Tweed line and words on the page, Tweed fill and Shell words on hover.
   On a photograph or on Cask the line is Shell; on Cask the fill is Shell too. */
.btn,.btn.quiet,.band .in .btn,.stone .in .btn,.stone .mag2 .btn,.stone .mag2 .btn.quiet,.mag2 .btn.quiet,.band .btn.quiet,.in .btn.quiet,.band .btn,.in .btn,.btns .btn,.short .btn,.mag2 .btn,.mag .btn,.maker .btn,.hero .btn,.form button,.ft-form button,.acts2 button,.acts2 button.on,header.site .right .start,.card .do button,.card .do button + button,.card .do a{
  --hover-bg:var(--tweed);--hover-color:var(--shell);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:400;font-size:14.5px;letter-spacing:0;text-transform:none;line-height:1;white-space:nowrap;
  height:50px;min-height:50px;padding:0 25px;border:1px solid currentColor;border-radius:0;
  background:transparent;color:var(--tweed);box-shadow:none;text-decoration:none;cursor:pointer;
  transition:.5s}
.btn[data-label]::after,.in .btn[data-label]::after,.btns .btn[data-label]::after,.form button[data-label]::after,.ft-form button[data-label]::after,.acts2 button[data-label]::after,header.site .right .start[data-label]::after,.card .do button[data-label]::after,.card .do a[data-label]::after{
  content:attr(data-label);position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--hover-bg);color:var(--hover-color);
  clip-path:inset(0 100% 0 0);transition:.4s;pointer-events:none}
.btn[data-label]:hover::after,.in .btn[data-label]:hover::after,.btns .btn[data-label]:hover::after,.form button[data-label]:hover::after,.ft-form button[data-label]:hover::after,.acts2 button[data-label]:hover::after,header.site .right .start[data-label]:hover::after,.card .do button[data-label]:hover::after,.card .do a[data-label]:hover::after{
  clip-path:inset(0 -1% 0 0)}
.btn:not([data-label]):hover,.in .btn:not([data-label]):hover,.btns .btn:not([data-label]):hover,.form button:not([data-label]):hover,.ft-form button:not([data-label]):hover,.acts2 button:not([data-label]):hover{background:var(--hover-bg);border-color:var(--hover-bg);color:var(--hover-color);transition:.4s}
/* on forest and on the Desk's say: Shell line, Shell fill, forest words */
.forest .btn,.forest .in .btn,.forest .in .btn.quiet,.forest .btns .btn,.band.forest .in .btn,.say .btn,.ft-form button{--hover-bg:var(--shell);--hover-color:var(--forest);color:var(--shell)}
/* August: the one you have kept stays filled, in heather */
.acts2 button.on,.card .do button.on,.btn.on{--hover-bg:var(--august);--hover-color:var(--shell);border-color:var(--august)}
.acts2 button.on[data-label]::after,.card .do button.on[data-label]::after,.btn.on[data-label]::after{clip-path:inset(0 -1% 0 0)}
.acts2 button.on:not([data-label]),.btn.on:not([data-label]){background:var(--august);color:var(--shell)}
@media(prefers-reduced-motion:reduce){.btn,.acts2 button,header.site .right .start,.card .do button{transition:none}.btn[data-label]::after,.in .btn[data-label]::after,.btns .btn[data-label]::after,.form button[data-label]::after,.ft-form button[data-label]::after,.acts2 button[data-label]::after,header.site .right .start[data-label]::after,.card .do button[data-label]::after,.card .do a[data-label]::after{transition:none}}

/* ================ THE CANVAS · the room, the contents, the chapter arriving (prompt 5) ================ */
/* ---- the room on the canvas ---- */
.canv{display:grid;grid-template-columns:clamp(280px,36vw,620px) minmax(0,1fr);align-items:stretch;min-height:100vh}

.canv-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(30px,6vh,70px) clamp(24px,3vw,56px);background:var(--oat)}
.canv-side::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:var(--oat)}

.canv-stack{position:relative;width:100%;display:grid}
.canv-stack > *{grid-area:1/1}

.canv-book{width:100%;max-width:min(300px,68%);justify-self:center;align-self:center;display:block;border:0;padding:0;
  background:none;cursor:pointer;transition:opacity .38s var(--ease),transform .62s var(--ease);transition-delay:.14s}
.canv.on .canv-book{opacity:0;transform:translateY(-16px) scale(.965);pointer-events:none;transition-delay:0s}

.canv-open{margin-top:16px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-75);background:none;border:0;cursor:pointer;transition:opacity .3s var(--ease),color .3s}
.canv-open:hover{color:var(--ink)}
.canv.on .canv-open{opacity:0;pointer-events:none}

/* ---- the contents, which is the navigation */
.canv-conts{align-self:center;justify-self:center;width:100%;max-width:400px;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease)}
.canv.on .canv-conts{opacity:1;pointer-events:auto}
.canv-row{display:block;width:100%;padding:7px 14px;border:0;border-radius:0;background:none;text-align:left;cursor:pointer;
  text-decoration:none;font-family:var(--face);font-weight:400;font-size:clamp(20px,1.6vw,24px);line-height:1.22;color:var(--ink);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .62s var(--ease),color .28s,background-color .28s}
.canv.on .canv-row{opacity:1;transform:none;transition-delay:calc(160ms + var(--i) * 55ms),calc(160ms + var(--i) * 55ms),0s,0s}
.canv-row:hover{background:rgba(65,64,66,.05)}
/* August marks the one they are in: its one job is something the reader has
   kept their place in. Nothing else on the page may use it. */
.canv-row[aria-current="page"]{background:rgba(160,186,212,.16)}
.canv-row.canv-top{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-55);margin-bottom:6px}
.canv-row.canv-top:hover{color:var(--ink)}
.canv-row .canv-note{display:block;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-55)}

/* ---- the right: one chapter, arriving */
/* Air above and below, always. align-content centres a chapter that fits;
   one that does not fit was starting hard against the top of the window with
   the title half under the browser chrome. */
/* .qs{padding:0 60px 0 96px;min-height:100vh;display:grid;align-content:center}

   No padding top or bottom. With align-content:center on a full-height column,
   vertical padding comes out of the space the content is centred in, so 96px
   of it lifted the whole chapter 85px up the screen. The mock has none, and
   the block finds the middle by itself. On a chapter too tall to centre the
   grid falls back to the top, which is what the padding was guarding against;
   `align-content:safe center` does that without moving anything. */
/* Anchored, not centred.

   The mock centres a 452px block, which lands it at 262 on a 960 window and
   322 on 1080. Ours is taller - it carries the film line - so centring starts
   it higher, and gets higher again with every job on the list. Setting the top
   to where the mock's centring puts *its* block means the chapter opens in the
   same place on every screen and grows down from there.

   436 rather than 452: eight pixels of the mock's measurement are the eyebrow's
   own leading, which is inside our block already. */
.canv-qs{padding:max(48px, calc((100vh - 476px) / 2)) var(--edge) clamp(44px,9vh,96px) clamp(30px,5vw,110px);
  min-height:100vh;display:grid;align-content:start}
/* The chapter column.
   It was 820px inside 1,905, so the content used 43% of the width and left a
   369px margin doing nothing on the right - which is most of why the page read
   as unfinished (Jack, 9 September: "it just looks terrible").

   The column now takes the room it has, and the reading blocks inside it are
   held to a measure of their own, so text stays readable while grids, cards
   and tables get the width. A paragraph is capped at 46-52ch elsewhere in this
   sheet; nothing here widens those. */
/* 664, measured off trip-canvas-room.html: its column is 820 and the card
   inside it is 664, starting at the same x as ours. Widened to 1120 this
   morning to close a margin, which stretched every card in the room. */
/* The column takes the canvas it has.

   664 was the mock's own card width, and matching it settled the card's shape:
   the 34px numeral column, the type, the shadow, the 91px height. Jack, 9
   September: "make the widgets bigger please, you can make use of the full
   canvas, dont have to be bunched in." So the shape stays and the width is let
   go - the cards run the full column, and the reading blocks keep their own
   measure, capped at 46ch on the aside and 52 on a card's line, so no line of
   type gets longer than it should be however wide the screen is. */
.canv-in{max-width:none}

/* ---- the rhythm between sections.

   Taking the dividing lines out was right, but the gap was widened to 44-76px
   at the same time and nothing replaced what the line was doing. Four small
   objects then floated in a lot of air with no relation to one another. The
   air comes back to something proportionate, and the section's own heading
   does the separating, which is what the guide and the magazine do. */
.canv-in{display:flex;flex-direction:column}
.canv-in > section{padding-block:0;margin-top:clamp(30px,4.4vh,52px)}
.canv-in > section:first-child{margin-top:0}

/* Day one, when the organiser is the only name on the trip.
   The chapter showed them a roster of one - a single face in a five-wide grid
   under the words "Everyone is in" - because it was designed for a full group
   and shown to somebody standing alone in it. When there is nobody else yet
   the invitation comes first and the roster follows, and they swap back the
   moment a second person joins. Done here rather than in the markup: it is an
   order, not a difference in what the page contains. */
.canv-in > section.above{order:-2}
.canv-in > section.leads{order:-1;margin-top:clamp(30px,4.4vh,52px)}
.canv-in > section.leads ~ section{margin-top:clamp(30px,4.4vh,52px)}

/* How a page arrives, the house way, from entrances.html ("As they do it"):
   eight pixels up, four of blur, nine hundred milliseconds, two hundred
   between one thing and the next. Delays by position rather than by a
   property set in script, so a page that server-renders arrives the same. */
.canv{--e-rise:8px;--e-blur:4px;--e-ms:900ms;--e-step:200ms}
.canv-in > *{animation:canv-arrive var(--e-ms) var(--ease) both}
.canv-in > *:nth-child(1){animation-delay:0ms}
.canv-in > *:nth-child(2){animation-delay:200ms}
.canv-in > *:nth-child(3){animation-delay:400ms}
.canv-in > *:nth-child(4){animation-delay:600ms}
.canv-in > *:nth-child(5){animation-delay:800ms}
.canv-in > *:nth-child(n+6){animation-delay:1000ms}
@keyframes canv-arrive{
  0%{opacity:0;transform:translate3d(0,var(--e-rise),0);filter:blur(var(--e-blur))}
}

.canv-made{margin-top:26px;max-width:290px;text-align:center;font-size:13px;line-height:1.5;color:var(--ink-35)}
.canv-made a{color:inherit}

@media(prefers-reduced-motion:reduce){
  .canv-in > *{animation:none}
  .canv-book,.canv-conts,.canv-row{transition-duration:.01ms!important;transition-delay:0s!important}
  .canv-row{transform:none}
}
@media(max-width:820px){
  .canv{grid-template-columns:1fr}
  .canv-side{position:static;height:auto;padding-inline:var(--edge)}
  .canv-side::before{display:none}
  .canv-qs{padding-inline:var(--edge);min-height:0;padding-block:40px}
}

/* ---- the room's pages, on the canvas ---- */
/* The column is the measure. A container that carries a page's width and a
   page's padding inside it only pushes the content off the column's own left
   edge - and everything on a page beginning at the same pixel is most of what
   makes this look considered. */
.canv-in .in{max-width:none;margin:0;padding-inline:0}

/* Bands sized for a page become rhythm inside a column. */
.canv-in > section{padding-block:clamp(26px,4vh,44px)}
.canv-in > section:first-child{padding-top:0}
.canv-in > section:last-child{padding-bottom:0}

/* The book is on the left, and it is the same book. A page that drew its own
   cover beside its title is now drawing it twice. */
.canv-in .above .cover,.canv-in .above .cover-change,.canv-in .above .mc{display:none}
.canv-in .above .open{display:block}
.canv-in .above .word{max-width:none}

/* One column, whatever the page asked for: four across in 690px is not four
   across, it is four slivers. */

/* ---- the key note, on the plan.

   One note on the plan is forest green - the one holding the door code - and
   the component dresses its own parts for that: .txt and .nacts take
   --on-forest. The canvas later set .why and the note's buttons in ink, for
   the notes on paper, and nothing said the dark one was different. So on the
   green panel the line "Where the key is and the code" was ink at 55% on
   forest at contrast 1.47, and both buttons with it: three things invisible on
   the one panel that holds the code to the front door. */
.canv-in .note[data-key=key] .why{color:var(--on-forest-55)}
/* Not the field button: it carries its own ground and its own words, and
   painting it --on-forest put shell text on a paper field at contrast 1.14. */
.canv-in .note[data-key=key] button:not(.field button){color:var(--on-forest)}
/* Paper words on a paper field. The field sits as a light box on the green
   panel and its button had lost its own ground, so Add was paper on paper at
   1.33. It takes the forest back. */
.canv-in .note[data-key=key] .field button{background:var(--forest);color:var(--paper)}
.canv-in .note[data-key=key] .nacts button{color:var(--on-forest-55)}
.canv-in .note[data-key=key] .nacts button:hover{color:var(--on-forest)}

/* ---- a class collision, and a bad one.

   The itinerary's day head carries `<p class="stand light">` - the daylight
   line, "Light from 7.01am to 7.37pm". The photograph viewer is also `.light`,
   and its rule is

     .light{position:fixed;inset:0;z-index:340;background:rgba(65,64,66,.9)}

   so each of the six days put a fixed, near-black panel 633 by 3,562 at
   z-index 340 over the chapter, with the daylight sentence written on it in
   ink at 78% - ink on ink, contrast 1.00, invisible - and the whole right side
   of the page a black slab.

   Neither name is ours to change (class names come from the mocks), so the
   paragraph is handed back its own properties where it lives. This is the
   sixth collision of this kind after .faces, .face, .more, .plate and .top. */
.canv-in .dayhead .stand.light,.canv-in p.stand.light{position:static;inset:auto;z-index:auto;
  background:none;padding:0;display:block;color:var(--ink-55)}
.canv-in .dayhead .stand.light .wet,.canv-in p.stand.light .wet{color:var(--ink-55)}
.canv-in .dayhead .stand.light .wet:hover{color:var(--ink)}

/* The listing is drawn three across (trip-stay.html: repeat(3,minmax(0,1fr))
   with a generous gap down the page). An auto-fill override at 220px made four
   columns of 256px in this 1,120 column, which is a contact sheet rather than a
   listing. Only the two grids that are genuinely dense keep a min-width. */

/* ---- Seen as: the room from the other side.

   The mock carries this across the top, and every chapter in the room reads
   differently to the two sides - who may change the trip, who may see the whole
   plan. Fixed to the corner rather than in the flow: it is a way of looking at
   the page, not part of it, and it must not move the thing it is checking. */
.seenas{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:14px;padding:9px 16px;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(20,24,20,.28)}
.seenas .k{color:rgba(249,245,238,.5)}
.seenas a{color:rgba(249,245,238,.62);text-decoration:none;transition:color .25s var(--ease)}
.seenas a:hover{color:var(--paper)}
.seenas a.on{color:var(--paper);box-shadow:inset 0 -1px 0 var(--paper)}
.seenas i{font-family:var(--serif);font-style:italic;font-size:11.5px;letter-spacing:0;
  text-transform:none;color:rgba(249,245,238,.5)}
@media(max-width:760px){.seenas i{display:none}}

/* ================ CHAPTER · welcome ================ */
/* ---- trip-canvas-room.html ---- */
/* The room, on the canvas.
   The book stands on its own ground on the left and never moves; the right is
   the only thing that changes. Under the book, the contents - which is the
   whole navigation, so there is no menu and no dashboard. */
.cr{padding:0}
.cr .in{max-width:none;padding-inline:0}
.cr .open{display:grid;grid-template-columns:clamp(280px,36vw,620px) minmax(0,1fr);gap:0;align-items:start}

/* The left stays where it is while the right scrolls past it. */
.cr .side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(30px,6vh,70px) clamp(24px,3vw,56px);background:#F5F2EE}
.cr .side::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:#F5F2EE}

/* The cover and the contents are the same thing, one at a time.
   Pressing the cover takes it away and brings the contents up in its place;
   pressing the contents puts the cover back. They are stacked in one grid
   cell so the panel is the height of the taller of them and nothing jumps
   when they change over. */
.cr .stack{position:relative;width:100%;max-width:100%;display:grid;flex:0 0 auto}
.cr .stack > *{grid-area:1/1}

.cr .bookframe{width:100%;max-width:min(300px,68%);justify-self:center;align-self:center;display:block;border:0;padding:0;background:none;cursor:pointer;
  transition:opacity .38s var(--ease),transform .62s var(--ease);transition-delay:.14s}
.cr .cover{display:block;position:relative;aspect-ratio:var(--book);background:#414042;color:#fff;container-type:inline-size;text-align:center;
  box-shadow:0 2px 4px rgba(65,64,66,.05),0 26px 44px -26px rgba(65,64,66,.45)}
.cr .cover > *{position:absolute;left:0;right:0;display:block}
.cr .cover .k{top:9.4%;font-family:var(--sans);font-size:2.4cqw;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.cr .cover .h2{top:15.5%;padding:0 9%;font-family:var(--face);font-weight:700;font-size:8.4cqw;line-height:1.06;color:#fff}
.cr .cover .plate{top:33%;left:24%;right:24%;aspect-ratio:var(--book);overflow:hidden;background:rgba(0,0,0,.1)}
.cr .cover .plate img{width:100%;height:100%;object-fit:cover}
.cr .cover .foot{bottom:7%;font-family:var(--sans);font-size:2.4cqw;font-weight:500;letter-spacing:.18em;text-transform:uppercase}

/* ---- the contents.
   The table of contents on noechague-site.vercel.app: names close together,
   the one you are reading darker with a soft rounded ground behind it, and
   the whole thing following the scroll. Theirs is 13px Inter and collapses to
   a column of dashes until you hover; this keeps the names in the open, in
   Larken, at the size a chapter name deserves. No rules, no counts - the
   chapter names and nothing else. (Jack, 9 September.) */
.cr .conts{align-self:center;justify-self:center;width:100%;max-width:400px;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .cr .bookframe,.cr .conts,.cr .conts .row{transition-duration:.01ms!important;transition-delay:0s!important}
  .cr .conts .row{transform:none}
}
.cr .conts .row{display:block;width:100%;padding:7px 14px;border:0;border-radius:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--face);font-weight:400;font-size:clamp(20px,1.6vw,24px);line-height:1.22;color:var(--ink);
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .62s var(--ease),color .28s,background-color .28s}
.cr .conts .row:hover{color:var(--ink);background:rgba(65,64,66,.05)}
/* The way back, at the top where a cover is. Italic and quieter, so it is not
   read as the first chapter. (Jack, 9 September.) */
.cr .conts .row.top{font-family:var(--serif);font-style:italic;color:var(--ink-55);margin-bottom:6px}
.cr .conts .row.top:hover{color:var(--ink)}
.cr .conts .row[data-here="true"]{color:var(--ink);background:rgba(65,64,66,.07)}

/* Over to the contents, and back again. */
/* Away, and back.
   Going: the cover lifts and thins out at once, and the names come up after
   it a beat apart, so the contents assembles itself rather than appearing.
   Coming back: everything leaves together and the cover settles last - a
   list that unbuilt itself one line at a time would only be slow. */
.cr.open .bookframe{opacity:0;transform:translateY(-16px) scale(.965);pointer-events:none;transition-delay:0s}
.cr.open .conts{opacity:1;pointer-events:auto}
.cr.open .conts .row{opacity:1;transform:none;transition-delay:calc(160ms + var(--i) * 55ms),calc(160ms + var(--i) * 55ms),0s,0s}

.cr.open .change{opacity:0;pointer-events:none}
.cr .change{transition:opacity .3s var(--ease);margin-top:16px;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-35);background:none;border:0;cursor:pointer;transition:color .3s;flex:0 0 auto}
.cr .change:hover{color:var(--ink)}

/* ---- the right, one chapter after another */
.cr .qs{padding:0 var(--edge) 0 clamp(30px,5vw,110px);max-width:820px;min-height:100vh;display:grid;align-content:center}

/* One chapter at a time.
   The sections were a single scrolling document, which is what made the
   contents a scroll-spy; Jack, 9 September: "i don't want each section to be
   on the same page". So they are states, and only the right-hand column
   changes - the whole point of the canvas. */
/* No padding of its own: the column centres it, and padding on top of that
   pushed the page 75px past one screen so it scrolled by a sliver. */
.cr .ch{display:none;grid-area:1/1;padding:0}
.cr .ch.on{display:block}

/* How a page arrives, the house way: eight pixels up, four of blur, nine
   hundred milliseconds, two hundred between one thing and the next. Taken
   from entrances.html, "As they do it". */
.cr{--e-rise:8px;--e-blur:4px;--e-ms:900ms;--e-step:200ms;--e-ease:ease}
.cr .ch.on > *{animation:crarrive var(--e-ms) var(--e-ease) both;
  animation-delay:calc(var(--i,0) * var(--e-step))}
@keyframes crarrive{
  0%{opacity:0;transform:translate3d(0,var(--e-rise),0);filter:blur(var(--e-blur))}
}
@media(prefers-reduced-motion:reduce){ .cr .ch.on > *{animation:none} }
.cr .ch .k{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35)}
.cr h1{margin-top:12px;font-family:var(--face);font-weight:400;font-size:min(clamp(30px,3.6vw,48px), 28px + (clamp(30px,3.6vw,48px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.012em}
.cr h1 em{font-family:var(--serif);font-style:italic;font-weight:500}
.cr .said{margin-top:12px;font-style:italic;font-size:16px;color:var(--ink-75);max-width:46ch}

.cr .lot{margin-top:clamp(24px,4vh,36px);display:flex;flex-direction:column;gap:10px}
.cr .job{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 22px;background:#fff;
  box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s}
.cr .job:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(65,64,66,.06),0 16px 26px -16px rgba(65,64,66,.32)}
.cr .job .no{font-family:var(--face);font-size:20px;color:var(--ink-35);text-align:center}
.cr .job b{display:block;font-family:var(--face);font-weight:400;font-size:20px;line-height:1.15}
.cr .job i{display:block;margin-top:5px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
.cr .job .go{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);white-space:nowrap}
.cr .job.done{background:transparent;box-shadow:none;cursor:default}
.cr .job.done:hover{transform:none;box-shadow:none}
.cr .job.done b,.cr .job.done i{color:var(--ink-35)}
.cr .job.done .no{color:var(--forest)}

.cr .who{margin-top:clamp(22px,3.5vh,34px);display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cr .who .p{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;
  box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22)}
.cr .who .p span{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;background:var(--stone);
  font-family:var(--face);font-size:17px;color:var(--ink-55)}
.cr .who .p b{display:block;font-family:var(--face);font-weight:400;font-size:17px}
.cr .who .p i{display:block;font-style:italic;font-size:13px;color:var(--ink-55)}
.cr .strip{margin-top:clamp(22px,3.5vh,34px);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cr .strip span{aspect-ratio:4/5;background:var(--stone-2)}
.cr .empty{margin-top:22px;padding:34px 26px;border:1px solid var(--stone-2);font-style:italic;color:var(--ink-55)}

header.site,.role,.made{display:none}
@media(max-width:820px){
  .cr .open{grid-template-columns:1fr}
  .cr .side{position:static;height:auto}
  .cr .side::before{display:none}
  .cr .qs{padding-inline:var(--edge)}
  .cr .ch{min-height:0;padding:40px 0}
}

/* ---- trip-guest.html ---- */
.below{padding:clamp(48px,7vh,72px) 0 clamp(64px,10vh,112px)}
.below .lead{max-width:var(--width);margin:0 auto clamp(22px,3.5vh,32px)}
.below .lead h2{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1.1}
.below .lead p{margin-top:4px;font-style:italic;font-size:15px;color:var(--ink-55)}
.below h2{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1.1}
.below .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px);max-width:var(--width);margin:0 auto}
.below .c{display:block;color:var(--ink)}
.below .ph{display:block;position:relative;aspect-ratio:var(--card);overflow:hidden;background:var(--stone-2)}
.below .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.below .c:hover .ph img{transform:scale(1.025)}
.below .band{display:block;padding:13px 16px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;transition:background .3s}
.below .act .band{background:var(--forest);color:var(--paper)}
.below .act:hover .band{background:var(--ink)}
.below .done .band, .below .live .band{background:var(--stone);color:var(--ink)}
.below .wait .band{background:var(--stone);color:var(--ink-55)}
.below .wait .ph img{opacity:.42;filter:saturate(.25)}
.below .wait .ph{background:var(--stone)}
.below .t{margin-top:16px;font-family:var(--face);font-weight:400;line-height:1.1;letter-spacing:-.005em;font-size:clamp(18px,1.6vw,22px)}
.below .wait .t{color:var(--ink-55)}
.crew{background:var(--forest);color:var(--on-forest);padding:clamp(40px,6vh,56px) 0 clamp(44px,6.5vh,60px)}
.crew .in{max-width:calc(var(--width) + 2*var(--edge))}
.crew h2{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1.1;color:#fff}
.crew .row{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:24px}
.crew .days{display:flex;flex-direction:column;align-items:center;gap:10px;width:64px;flex:0 0 auto}
.crew .days b{width:64px;height:64px;display:grid;place-items:center;background:var(--paper);color:var(--forest);font-family:var(--face);font-weight:400;font-size:26px}
.crew .days span{font-style:italic;font-size:13.5px;line-height:1.2;color:var(--on-forest-55);white-space:nowrap}
.reel{overflow:hidden;position:relative}
.reel.pass{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.track{display:flex;gap:clamp(18px,2.2vw,32px);width:max-content}
.reel.pass .track{animation:pass 34s linear infinite}
.reel.pass:hover .track{animation-play-state:paused}
.p{display:flex;flex-direction:column;align-items:center;gap:10px;width:64px;flex:0 0 auto}
.p .f{width:64px;height:64px;overflow:hidden;background:rgba(241,237,232,.14);display:grid;place-items:center;font-family:var(--face);font-size:22px;color:var(--on-forest-55)}
.p .f img{width:100%;height:100%;object-fit:cover}
.crew .p b{font-weight:400;font-size:14.5px;line-height:1.2;white-space:nowrap;color:var(--on-forest)}
.p.out .f{background:transparent;box-shadow:inset 0 0 0 1px rgba(241,237,232,.35);animation:breathe 3.2s ease-in-out infinite}
.crew .p.out b{color:var(--on-forest-55)}
.end-a{background:var(--stone);padding:clamp(56px,8vh,92px) 0}
/* the book is what the band is about, so it is drawn at the size of one */
.end-a .in{display:grid;grid-template-columns:clamp(150px,16vw,210px) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.end-a .cover{width:100%}
.end-a .w h2{font-family:var(--face);font-weight:400;font-size:min(clamp(28px,3vw,40px), 28px + (clamp(28px,3vw,40px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em;text-wrap:balance;max-width:20ch}
.end-a .w p{margin-top:14px;font-size:17px;line-height:1.65;color:var(--ink-75);max-width:44ch}
.end-a .w .btn{margin-top:24px}
@keyframes pass{to{transform:translateX(-50%)}}
@keyframes breathe{0%,100%{box-shadow:inset 0 0 0 1px rgba(241,237,232,.3)}50%{box-shadow:inset 0 0 0 1px rgba(241,237,232,.7)}}
@media(max-width:800px){.below .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crew .row{grid-template-columns:1fr}}
@media(max-width:700px){.end-a .in{grid-template-columns:1fr}}

/* ---- yours to do: the job card, the figure standing in the margin ----
   The same component the Studio's home wears (studio-card.html): white, square,
   no border, the photograph at the left, and a done job going quiet where it
   stands. What differs here is the tick, which is the numeral in the margin. */
.yours{padding:clamp(40px,6vh,60px) 0 clamp(36px,5vh,52px)}
.yours .in{max-width:calc(1040px + 2*var(--edge))}
.c-wrap{padding:0}
.c-gut{--gut:clamp(48px,6vw,86px)}

/* no rule under it: air separates here as it does everywhere else on the
   site, and a hairline across the page reads as a page break */
.c-count{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:0 0 0 clamp(48px,6vw,86px);margin-bottom:clamp(22px,3.4vh,30px)}
.c-count b{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,2vw,26px), 28px + (clamp(20px,2vw,26px) - 28px) * 0.6)}
.c-count b em{color:var(--ink-55)}
.c-count i{font-style:italic;font-size:14.5px;color:var(--ink-55)}
.c-roll{display:inline-block;min-width:1.7em}
.c-roll.turn{animation:c-roll .42s var(--ease)}
@keyframes c-roll{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-70%);opacity:0}55%{transform:translateY(70%);opacity:0}100%{transform:translateY(0);opacity:1}}

.c-list{display:flex;flex-direction:column;gap:12px;padding-left:clamp(48px,6vw,86px)}
/* a card that opens the desk is a button, and a button centres its words */
.c-card{position:relative;width:100%;text-align:left;font:inherit;color:inherit;display:grid;grid-template-columns:clamp(168px,18vw,208px) minmax(0,1fr) clamp(182px,18vw,204px);align-items:stretch;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(65,64,66,.04),0 8px 18px -14px rgba(65,64,66,.18);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .5s var(--ease)}
.c-card:hover,.c-card:focus-visible{transform:translateY(-2px);box-shadow:0 1px 2px rgba(65,64,66,.05),0 20px 34px -22px rgba(65,64,66,.3)}
/* pressing anywhere on the card does what the filled word says, so that word
   answers the cursor rather than the photograph moving */
.c-card:hover .c-btn:not(.c-quiet){background:var(--ink);border-color:var(--ink)}
.c-card:hover .c-edge span{color:var(--moss)}
.c-card.c-nopic{grid-template-columns:minmax(0,1fr) clamp(182px,18vw,204px)}

.c-edge{position:absolute;left:calc(-1 * clamp(48px,6vw,86px));top:0;bottom:0;width:clamp(48px,6vw,86px);display:grid;place-items:center;padding-right:14px;background:none;border:0;cursor:pointer}
.c-edge span{position:relative;display:grid;place-items:center;width:38px;height:38px;font-family:var(--face);font-size:min(clamp(24px,2.6vw,32px), 28px + (clamp(24px,2.6vw,32px) - 28px) * 0.6);line-height:1;color:var(--ink-35);transition:color .3s,background .28s var(--ease),box-shadow .28s}
.c-edge:hover span{color:var(--moss);box-shadow:inset 0 0 0 1px var(--stone-2)}

.c-ph{position:relative;display:block;overflow:hidden;background:var(--stone-2);min-height:172px;transition:opacity .5s var(--ease)}
.c-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-words{padding:clamp(20px,2.2vw,28px)}
.c-k{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}
.c-words h3{position:relative;display:inline-block;margin-top:11px;font-family:var(--face);font-weight:400;font-size:clamp(19px,1.7vw,23px);line-height:1.08;letter-spacing:-.008em;color:var(--ink);transition:color .4s}
.c-words h3::after{content:"";position:absolute;left:0;top:.56em;height:1px;width:0;background:currentColor}
.c-l{margin-top:9px;font-family:var(--sans);font-size:14.5px;line-height:1.56;color:var(--ink-75);max-width:46ch}
.c-acts{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(20px,2.2vw,28px);max-height:260px;overflow:hidden;
  transition:opacity .26s var(--ease),max-height .42s .2s var(--ease),padding .42s .2s var(--ease)}
/* the column is a fixed width so the buttons sit at one depth on every card,
   so the words inside them have to fit it rather than push through it */
.c-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;min-width:0;background:var(--forest);color:var(--paper);border:1px solid var(--forest);
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.c-quiet{background:transparent;color:var(--forest)}
.c-quiet:hover{background:var(--forest);color:var(--paper)}
.c-w{align-self:center;font-family:var(--sans);font-size:12.5px;color:var(--ink-55);text-decoration:underline;text-underline-offset:3px;margin-top:2px;background:none;border:0;cursor:pointer}
.c-w:hover{color:var(--ink)}

/* the list arriving, in order */
.c-list.c-in .c-card{opacity:0;transform:translateY(10px);animation:c-arrive .5s var(--ease) forwards;animation-delay:calc(var(--i) * 60ms)}
@keyframes c-arrive{to{opacity:1;transform:none}}
.c-card.c-knock{transform:translateY(0) scale(.996);transition:transform .13s var(--ease)}

/* done: the figure becomes the tick, and the card goes quiet where it stands */
.c-done{opacity:.62;cursor:default}
.c-done:hover{transform:none;box-shadow:0 1px 2px rgba(65,64,66,.04),0 8px 18px -14px rgba(65,64,66,.18)}
.c-done:hover .c-btn:not(.c-quiet){background:var(--forest);border-color:var(--forest)}
.c-done:hover .c-edge span{color:transparent}
.c-done .c-ph{opacity:.28}
.c-done .c-edge span{color:transparent;background:var(--moss);box-shadow:none}
.c-done .c-edge span::after{content:"";position:absolute;width:9px;height:15px;border:solid var(--paper);border-width:0 1.8px 1.8px 0;transform:rotate(45deg);margin-top:-4px;animation:c-tickin .45s var(--ease)}
@keyframes c-tickin{0%{transform:rotate(45deg) scale(.3);opacity:0}70%{transform:rotate(45deg) scale(1.2)}100%{transform:rotate(45deg) scale(1);opacity:1}}
.c-done .c-words h3{color:var(--ink-55)}
.c-done .c-words h3::after{animation:c-strike .42s .1s var(--ease) forwards}
@keyframes c-strike{to{width:100%}}
.c-done .c-acts{opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none}

/* the finish */
.c-end{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;background:#fff;box-shadow:0 1px 2px rgba(65,64,66,.04),0 8px 18px -14px rgba(65,64,66,.18);padding:clamp(40px,6vh,64px) 24px;margin:12px 0 0 clamp(48px,6vw,86px)}
.c-seal{display:grid;place-items:center;width:56px;height:56px;background:var(--moss);animation:c-pop .5s var(--ease) both}
.c-seal i{width:10px;height:19px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-5px}
.c-end h3{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,3vw,36px), 28px + (clamp(26px,3vw,36px) - 28px) * 0.6);line-height:1.06}
.c-end p{font-style:italic;color:var(--ink-55)}
@keyframes c-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.c-wrap.finished .c-end{display:flex}

@media(max-width:860px){
  .c-card,.c-card.c-nopic{grid-template-columns:1fr}
  .c-ph{min-height:170px}
  .c-acts{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding-top:0}
  .c-edge{top:0;bottom:auto;height:76px}
}

/* ---- changing the cover ----------------------------------------------
   The drawer is the site's Desk panel, whole and by name (`.dk`, lifted from
   _desk.css by the sheet builder) - one drawer on the site rather than two
   that look alike. Only what the cover itself needs is here.

   The cover takes a veil on hover with the words on it. No icon: a word says
   what will happen and an icon asks you to guess. */
.cover-change{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.cover-change .cv-over{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(65,64,66,0);opacity:0;transition:background .32s var(--ease),opacity .32s var(--ease)}
.cover-change:hover .cv-over,.cover-change:focus-visible .cv-over{background:rgba(65,64,66,.42);opacity:1}
.cover-change .cv-over span{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);padding:12px 18px;box-shadow:inset 0 0 0 1px rgba(241,237,232,.7);transform:translateY(6px);transition:transform .32s var(--ease)}
.cover-change:hover .cv-over span{transform:none}

/* the chosen one, marked, inside the Desk's own row */
.dk .pc.on{box-shadow:inset 0 0 0 3px var(--forest)}
.dk .pc .tick{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;display:grid;place-items:center;background:var(--forest)}
.dk .pc .tick::after{content:"";width:9px;height:15px;border:solid var(--paper);border-width:0 1.8px 1.8px 0;transform:rotate(45deg);margin-top:-4px}
/* the panel reverts every button it does not own, so the two at its foot are
   drawn here: the room's own buttons, forest filled and ink outline */
.dk .cv-own{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:10px;padding:0 20px;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  border:1px solid var(--forest);background:var(--forest);color:var(--paper);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.dk .cv-own:hover{background:var(--ink);border-color:var(--ink)}
.dk .cv-own.quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.dk .cv-own.quiet:hover{background:var(--ink);color:var(--paper)}
.dk .cv-own input{display:none}
/* the panel signs every heading "The Desk", because in the panel the Desk is
   usually the one talking. Here it is not: this scene is a chooser, and the
   head has already said what it is. */
.dk .cv h2::before{content:none}

/* ---- the welcome chapter ---- */

/* ---- the chapter's head */
.canv-in .above{background:none;padding-top:0}
.canv-in .above .word h1{font-family:var(--face);font-weight:400;font-size:min(clamp(32px,3.2vw,46px), 28px + (clamp(32px,3.2vw,46px) - 28px) * 0.6);line-height:1.05;letter-spacing:-.005em}
.canv-in .above .word h1 em{font-family:var(--face);font-style:italic}
.canv-in .above .word .line{margin-top:14px;max-width:46ch;font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-75)}
.canv-in .above .word .line b{font-weight:400;color:var(--ink)}
.canv-in .above .doors{margin-top:clamp(22px,3.5vh,32px);display:flex;flex-wrap:wrap;gap:12px}

/* ---- how far through the list they are */
/* The list follows the opening by one gap, set on the section itself. This
   line was adding a second 52px on top of it. */
.canv-in .yours{padding-top:0}
.canv-in .c-count{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:18px;margin-bottom:0}
.canv-in .c-count b{font-family:var(--face);font-weight:400;font-size:min(clamp(24px,2.2vw,30px), 28px + (clamp(24px,2.2vw,30px) - 28px) * 0.6);line-height:1;color:var(--ink)}
.canv-in .c-count b em{font-family:var(--face);font-style:italic;color:var(--ink-55)}
.canv-in .c-count .c-left{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-55)}

/* ---- the jobs, as cards with the numeral as a column
   Jack, 9 September, having chosen it off the board: "the button says
   Complete... and the listing should open the task."

   So one card carries two things and each has its own target: the card is a
   link and opens the task, and the single button on it checks the job off.
   The numeral is a block of the card rather than a mark in the margin - it is
   the thing that fills and takes the tick, so the completing is visible at the
   left where the eye starts the line.

   A card, not a row: a solid ground, no hairlines to see through. */
.canv-in .c-list{display:block;padding-inline:0;border:0}
.canv-in .c-card{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr) auto;
  gap:0 26px;align-items:center;margin-bottom:12px;padding:0;background:var(--oat);
  box-shadow:none;border:0;border-radius:0;text-decoration:none;
  transition:background-color .35s var(--ease)}
.canv-in .c-card:hover{background:#F0EBE1}

/* the numeral: a column of the card, and the thing that fills */
.canv-in .c-edge{position:static;align-self:stretch;display:grid;place-items:center;width:auto;height:auto;
  padding:0;background:var(--stone);border:0;box-shadow:none;cursor:pointer;
  transition:background .3s var(--ease),color .3s}
.canv-in .c-edge span{position:relative;display:grid;place-items:center;width:auto;height:auto;
  font-family:var(--face);font-size:min(34px, 28px + (34px - 28px) * 0.6);line-height:1;color:var(--ink-35);background:none;box-shadow:none;
  transition:color .3s}

.canv-in .c-ph{display:block;align-self:stretch;width:118px;height:auto;aspect-ratio:auto;overflow:hidden;
  border-radius:0;background:var(--stone)}
.canv-in .c-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .45s}
.canv-in .c-card:hover .c-ph img{transform:scale(1.045)}

.canv-in .c-words{min-width:0;padding:24px 0}
.canv-in .c-k{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75)}
.canv-in .c-words h3{margin-top:8px;font-family:var(--face);font-weight:400;font-size:23px;line-height:1.15;color:var(--ink)}
.canv-in .c-l{margin-top:7px;font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-55);max-width:46ch}

/* one button, and what it does is complete */
/* One right edge down the whole list. Centred, a card with Complete, Leave
   them and Later put three different edges on the page, and six cards put
   eighteen. Ranged right they all stop in one place. */
.canv-in .c-acts{display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-right:26px}
.canv-in .c-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;white-space:nowrap;
  border:1px solid var(--tweed);border-radius:0;background:transparent;color:var(--tweed);
  font-family:var(--sans);font-weight:400;font-size:13.5px;letter-spacing:0;text-transform:none;
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.canv-in .c-btn:hover{background:var(--tweed);color:var(--shell)}
.canv-in .c-btn.c-quiet{border-color:var(--ink-20);color:var(--ink-55)}
.canv-in .c-btn.c-quiet:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.canv-in .c-w{background:none;border:0;padding:0;font-family:var(--serif);font-style:italic;font-size:14px;
  color:var(--ink-35);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .3s}
.canv-in .c-w:hover{color:var(--ink)}

/* what pressing the card does, said only when the hand is on it */
.canv-in .c-open{position:absolute;right:26px;bottom:8px;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35);opacity:0;transition:opacity .3s}
.canv-in .c-card:hover .c-open{opacity:1}

/* Checked off: the numeral column fills and takes the tick, the title strikes
   through where it stands, and the card goes quiet. It then sinks to the foot
   of the list rather than vanishing - nothing is thrown away, and the ticks at
   the bottom are what they have to show for the morning. */
.canv-in .c-done{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-20)}
.canv-in .c-done:hover{background:transparent}
.canv-in .c-done .c-edge{background:var(--moss)}
.canv-in .c-done .c-edge span{color:transparent;background:none;box-shadow:none}
.canv-in .c-done .c-words h3,.canv-in .c-done .c-l,.canv-in .c-done .c-k{color:var(--ink-35)}
.canv-in .c-done .c-acts,.canv-in .c-done .c-open{opacity:0;pointer-events:none}
.canv-in .c-done .c-ph img{filter:grayscale(1) opacity(.55)}

@media(max-width:900px){
  .canv-in .c-card,.canv-in .c-card:not(.c-nopic){grid-template-columns:34px minmax(0,1fr);gap:0 16px}
  .canv-in .c-ph{display:none}
  .canv-in .c-acts{grid-column:2;align-items:flex-start;margin-top:14px}
}

/* ---- the opening, from trip-canvas-room.html, to the letter.

     .ch .k{font-family:var(--sans);font-size:9.5px;font-weight:600;
            letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35)}
     h1{font-family:var(--face);font-weight:400;font-size:min(clamp(30px,3.4vw,46px), 28px + (clamp(30px,3.4vw,46px) - 28px) * 0.6);
        line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
     h1 em{font-family:var(--serif);font-style:italic;font-weight:500}
     .said{margin-top:12px;font-style:italic;font-size:16px;color:var(--ink-75);max-width:46ch}

   The italic word is Lora at 500, not Larken - that is what makes "Scotland."
   sit differently from the words before it, and it is the thing a careless port
   always loses. The line beneath is italic at 16, where the planner's own was
   roman at 17: it reads as an aside rather than a paragraph. */
.canv-in .above .word .k{margin:0 0 10px;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35)}
/* 48 at a full screen, which is what the mock measures - the clamp was
   capped two pixels short. */
.canv-in .above .word h1{font-family:var(--face);font-weight:400;font-size:min(clamp(30px,3.4vw,48px), 28px + (clamp(30px,3.4vw,48px) - 28px) * 0.6);
  line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
.canv-in .above .word h1 em{font-family:var(--serif);font-style:italic;font-weight:500}
.canv-in .above .word .line{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:16px;
  line-height:1.5;color:var(--ink-75);max-width:46ch}
.canv-in .above .word .line b{font-style:normal;font-weight:400;color:var(--ink)}

/* The film line, added under it as asked, and kept quieter than the aside so
   the order of the three is plain. */
.canv-in .above .word .film{margin-top:18px}

/* .lot: the rows sit ten apart, not twelve. */
/* .lot{margin-top:clamp(24px,4vh,36px);display:flex;flex-direction:column;gap:10px} */
/* .lot{margin-top:36px} - measured from the mock's line to its first card.
   The chapter's own section margin was adding a further 140 on top of it. */
.canv-in .c-list{display:flex;flex-direction:column;gap:10px;margin-top:0}

/* One gap under the opening, and one gap between sections.

   There were three at once - the section's own top margin, its top padding,
   and the grid's margin inside it - which came to 132px on the start page and
   125px on the group chapter. Named for every section rather than two by
   hand, so a chapter written later inherits the rhythm.

   24px under the opening: the film line sits between the aside and the cards
   and belongs to the opening, so the cards follow it closely. */
.canv-in > section,.canv-in > section > .in{padding-block:0}
.canv-in > section.above{margin-top:0}
.canv-in > section.above + section{margin-top:24px}
.canv-in .people{margin-top:0}
.canv-in .c-list{margin-top:0}
.canv-in .c-card{margin:0}

/* ---- the start page's rows, drawn as trip-canvas-room.html draws them
   (Jack, 9 September: "i found how the start page is support to look ... look
   at the widget cards").

   A white card that lifts under the hand, a light numeral in a 34px column,
   the title at 20 with one italic line beneath, and the destination ranged
   right in small capitals. A finished one loses its card and takes a tick
   where the number was.

   This also settles the photograph that had been sitting 58px over its own
   title after a bad edit to this sheet: the drawing has no photograph in it. */
.canv-in .c-k{display:none}
.canv-in .c-count{display:none}

.canv-in .c-card{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;gap:18px;min-height:0;margin:0 0 12px;padding:20px 22px;background:#fff;color:var(--ink);
  border:0;border-radius:0;box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);
  cursor:pointer;text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.canv-in .c-card:hover{background:#fff;transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(65,64,66,.06),0 16px 26px -16px rgba(65,64,66,.32)}

/* The numeral: a column of the card, and nothing else in it. */
/* .job .no{font-family:var(--face);font-size:20px;color:var(--ink-35);text-align:center} */
.canv-in .c-edge{position:relative;left:auto;right:auto;top:auto;bottom:auto;
  grid-column:1;grid-row:1;width:34px;height:auto;padding:0;margin:0;border:0;background:none;
  display:block;overflow:visible;box-shadow:none;align-self:center;
  font-family:var(--face);font-weight:400;font-size:20px;line-height:32px;
  color:var(--ink-35);text-align:center}
.canv-in .c-edge::before{display:none}
.canv-in .c-edge img{display:none}
.canv-in .c-edge span{position:static;display:block;width:auto;height:auto;
  font:inherit;color:inherit;text-align:inherit;background:none;box-shadow:none;letter-spacing:0}

.canv-in .c-words{grid-column:2;grid-row:1;padding:0}
/* .job b{display:block;font-family:var(--face);font-weight:400;font-size:20px;line-height:1.15} */
.canv-in .c-words h3{display:block;margin:0;font-family:var(--face);font-weight:400;
  font-size:20px;line-height:1.15;color:var(--ink)}
/* .job i{display:block;margin-top:5px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
   - and the line-height it inherits from the mock's body, which is 1.6. */
.canv-in .c-l{display:block;margin:5px 0 0;font-family:var(--serif);font-style:italic;
  font-size:14.5px;line-height:1.6;color:var(--ink-55);max-width:none}

/* The mock ranges its destination right in small capitals:
     .job .go{font-family:var(--sans);font-size:9.5px;font-weight:600;
              letter-spacing:.2em;text-transform:uppercase;color:var(--forest)}
   Ours carries Skip in that slot, so it is a button and says so on the hand. */
.canv-in .c-go{grid-column:3;grid-row:1;justify-self:end;border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--forest);white-space:nowrap;transition:color .25s var(--ease)}
.canv-in .c-go:hover{color:var(--tweed)}

/* Finished: the card goes, the tick takes the number's place, and the words go
   quiet. Nothing to press on it but the way back. */
.canv-in .c-card.c-done{background:transparent;box-shadow:none;cursor:default;transform:none}
.canv-in .c-card.c-done:hover{background:transparent;box-shadow:none;transform:none}
.canv-in .c-done .c-words h3,.canv-in .c-done .c-l{color:var(--ink-35)}
.canv-in .c-done .c-edge span{color:transparent}
.canv-in .c-done .c-edge span::after{content:"";position:absolute;left:50%;top:50%;
  width:9px;height:15px;margin:-9px 0 0 -5px;border:solid var(--moss);border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg)}

@media(max-width:760px){
  .canv-in .c-card{grid-template-columns:24px minmax(0,1fr);gap:0 14px;padding:16px 18px}
  .canv-in .c-acts{grid-column:2;grid-row:2;align-items:flex-start;margin-top:12px}
}

/* ---- the way back on a finished card.

   The component collapses the whole actions block once a card is done -
   .c-done .c-acts{opacity:0;max-height:0;pointer-events:none} - which was
   written for a card whose buttons have no further use. Ours has one, so the
   block stays and only the finished buttons go: without this the undo was
   drawn into a box nought pixels tall, at nought opacity, refusing the mouse.

   And it is a button, not a footnote. It was 35% ink in italic serif on a card
   already greyed to 35%, so it read as a caption; it stands where Complete
   stood, in the same outlined 46px square. The .c-done gate is gone with it -
   that gate meant "Bring it back", the way out of Later on a card that is not
   done, had never once appeared at all. */
.canv-in .c-done .c-acts{opacity:1;max-height:none;pointer-events:auto}
.canv-in .c-undo{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;
  white-space:nowrap;border:1px solid var(--ink-20);border-radius:0;background:transparent;color:var(--ink-55);
  font-family:var(--sans);font-weight:400;font-size:13.5px;letter-spacing:0;text-transform:none;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.canv-in .c-undo:hover,.canv-in .c-card:hover .c-undo:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.canv-in .c-card:hover .c-undo{background:transparent;color:var(--ink-55)}

/* And where there is no way back, the reason rather than a dead space. Set as
   a note, not a control, so it cannot be mistaken for one: nothing to press,
   and it says why. */
.canv-in .c-why{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-35);white-space:nowrap}

/* Where there is no way back, the reason rather than a dead space: a job the
   trip can see for itself is not ours to argue with. */
.canv-in .c-why{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-35);white-space:nowrap}

/* ---- what next has its own ground, so the foot of a chapter is plainly a
   different kind of thing from the chapter. On paper it read as one more
   paragraph; on oat the chapter ends above it. */
/* The band was forest with pale words on it. On oat the words have to come
   back to ink, or the heading is white on cream at contrast 1.13 and the line
   under it at 1.03 - which is what happened the moment the ground changed and
   nothing said the text should follow. */
.canv-in > section.next{background:var(--oat);padding:clamp(26px,3.4vw,38px);color:var(--ink)}
.canv-in > section.next > .in{padding:0;max-width:none}
.canv-in .next h2,.canv-in .next h2 em{color:var(--ink)}
.canv-in .next > .in > p{color:var(--ink-75)}
.canv-in .next .takes{color:var(--ink-35)}
.canv-in .next .or,.canv-in .next button.or{color:var(--ink-55);background:none;border:0;
  font-family:var(--serif);font-style:italic;font-size:14.5px;cursor:pointer}
.canv-in .next .or:hover{color:var(--ink)}

/* ================ CHAPTER · who is coming ================ */
/* ---- inviting somebody: one heading and one field.

   From the board (trip-invite-one.html), option One with C, F, G and H:

     C  the switch lives inside the field, so there is no second row at all
     F  "Free for guests" comes out of the grey sub-line and stands beside the
        heading, because it is the one persuasive thing in the section
     G  the press answers - Copied, or the address it went to
     H  the link is set in the book face, since it is the thing being handed
        over rather than a value in a form

   What it replaces: two headings, two sub-lines and two photographed doors,
   for two fields. */
.canv-in .invhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.canv-in .invhead h2{margin:0;font-family:var(--face);font-weight:400;font-size:26px;line-height:1.15;color:var(--ink)}
.canv-in .invfree{font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--moss);padding:4px 9px;box-shadow:inset 0 0 0 1px var(--moss)}
.canv-in .invsub{margin:6px 0 0;font-family:var(--serif);font-size:15.5px;line-height:1.5;color:var(--ink-55)}

.canv-in .invf{display:flex;align-items:stretch;max-width:600px;margin-top:16px;
  box-shadow:inset 0 0 0 1px var(--ink-20);background:transparent}
.canv-in .invf input{flex:1 1 auto;min-width:0;height:58px;padding:0 14px;border:0;background:transparent;
  font-family:var(--face);font-weight:400;font-size:19px;letter-spacing:-.005em;color:var(--ink)}
.canv-in .invf input::placeholder{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--ink-35)}
.canv-in .invf > button{flex:0 0 auto;height:58px;padding:0 18px;border:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:background-color .3s var(--ease)}
.canv-in .invf > button:disabled{background:var(--ink-35);cursor:default}

.canv-in .invseg{flex:0 0 auto;display:flex;align-self:stretch;box-shadow:inset -1px 0 0 var(--ink-20)}
.canv-in .invseg button{padding:0 14px;border:0;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35);
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.canv-in .invseg button[aria-pressed=true]{color:var(--ink);background:var(--oat)}

.canv-in .invsaid{margin:10px 0 0;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-55)}

/* ---- who is coming, measured off trip-canvas-room.html.

     .who{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
          gap:10px;margin-top:34px}
     .p{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;
        box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22)}
     .p span{width:38px;height:38px;display:grid;place-items:center;background:var(--stone);
             font-family:var(--face);font-size:17px;color:var(--ink-55)}
     .p b{display:block;font-family:var(--face);font-weight:400;font-size:17px;line-height:27.2px}
     .p i{display:block;font-style:italic;font-size:13px;color:var(--ink-55);line-height:20.8px}

   A small initial on stone, the name beside it, and one italic line saying
   where that person stands - the same white card as the job rows, so the two
   chapters rhyme. Not a square photograph with a band beneath it. */
.canv-in .people{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;margin-top:clamp(24px,4vh,34px);justify-content:stretch}
.canv-in .person{display:flex;flex-direction:row;align-items:center;gap:14px;
  padding:16px 18px;background:#fff;color:var(--ink);border:0;text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.canv-in .person:hover{transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(65,64,66,.06),0 16px 26px -16px rgba(65,64,66,.32)}
.canv-in .person .f{flex:0 0 auto;width:38px;height:38px;aspect-ratio:auto;display:grid;place-items:center;
  overflow:hidden;background:var(--stone);color:var(--ink-55);
  font-family:var(--face);font-weight:400;font-size:17px}
.canv-in .person .f img{width:100%;height:100%;object-fit:cover}
.canv-in .person .band{display:block;width:auto;min-width:0;margin:0;padding:0;
  background:none;box-shadow:none;border:0}
.canv-in .person .band b{display:block;font-family:var(--face);font-weight:400;font-size:17px;
  line-height:27.2px;color:var(--ink);text-transform:none;letter-spacing:0}
.canv-in .person .band i{display:block;margin:0;font-family:var(--serif);font-style:italic;
  font-size:13px;line-height:20.8px;color:var(--ink-55);text-transform:none;letter-spacing:0}

/* Somebody who has not opened the invitation, and the empty place at the end.

   The invite tile is the same white card as the people, not an outline on air:
   drawn as an outline it read as a gap in the row rather than a place in it.
   Only the initial box keeps its outline - that is the part that is empty, a
   square waiting for a face. Its name sits alone, with no line under it. */
.canv-in .person.out .f{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-20);color:var(--ink-35)}
.canv-in .person-add .f{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-20)}
.canv-in .person-add .f .plus{font-family:var(--face);font-size:20px;color:var(--ink-35);
  transition:color .25s var(--ease)}
.canv-in .person-add:hover .f .plus{color:var(--tweed)}

/* ---- trip-join.html ---- */
.start.join .open{align-items:start}
.start .side{position:sticky;top:24px}
.start .side-note{margin-top:16px;font-style:italic;font-size:14.5px;color:var(--ink-55);max-width:28ch}
.start .q .hint{font-style:italic;font-size:15.5px;color:var(--ink-75)}
.start .vote .stage{grid-template-columns:auto min(360px,60vw) auto;justify-content:start;gap:clamp(14px,2vw,28px)}
.start .vote .side.l,.start .vote .side.r{justify-self:auto}
.start .vote .count{text-align:left;margin-top:14px}
.start .opts{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
.start .opt{aspect-ratio:auto;min-height:96px}
.dropme{margin-top:22px;width:min(100%,360px);aspect-ratio:1;border:1.5px dashed var(--ink-20);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-style:italic;color:var(--ink-55);cursor:pointer;transition:border-color .3s}
.dropme:hover{border-color:var(--forest)}
.dropme b{font-style:normal;font-family:var(--face);font-weight:400;font-size:22px;color:var(--ink)}
.deck .card .w h3{font-size:min(clamp(26px,2.6vw,34px), 28px + (clamp(26px,2.6vw,34px) - 28px) * 0.6)}

/* ================ CHAPTER · accommodation ================ */
/* ---- trip-stay.html ---- */
.booked-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.dl{margin-top:clamp(20px,3vh,28px);display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:16.5px}
.dl dt{font-style:italic;color:var(--ink-55)}.dl dd b{font-weight:500}
.acts{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:clamp(22px,3.5vh,32px);align-items:center}
.map-plate{aspect-ratio:4/5;background:var(--stone);display:grid;place-items:center;text-align:center;padding:24px;font-style:italic;color:var(--ink-55)}
@media(max-width:800px){.booked-two{grid-template-columns:1fr}}

/* ---- the accommodation listing.

   Three in a row and bigger (Jack, 9 September: "make the listing cards bigger
   and 3 in a row"). `.grid4{display:grid}` lives in a site sheet the planner
   does not carry, so setting only the columns left it a block and every card
   ran the full width of the chapter. */
.canv-in .grid4,.canv-in .dexgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vh,44px) clamp(18px,2.2vw,32px)}

/* The whole card is a button now, so it needs telling it is not one. */
/* Forest, not stone. The card sets its name in white over the picture, so on
   a place with no photograph the name sat on pale stone at 1.51 and vanished.
   The ground is the colour the white was drawn for; a photograph covers it
   whenever there is one. */
.canv-in .card .c{width:100%;border:0;padding:0;background:var(--forest);cursor:pointer;text-align:left;
  display:block;font:inherit;color:#fff}
/* A place somebody typed in has no photograph, and the card sets its name in
   white over the picture - so on pale stone the name vanished at 1.51. The
   stand-in is forest, which the white was drawn for. */
.canv-in .card .init{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--face);font-size:min(56px, 28px + (56px - 28px) * 0.6);color:rgba(249,245,238,.5);background:var(--forest)}
/* Booked, or anything else true of the place, opposite the sleeps tag. */
.canv-in .card .tag.r{position:absolute;top:14px;right:14px;left:auto;z-index:2;
  padding:8px 10px;background:var(--forest);color:var(--paper);
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1}

/* ---- the accommodation listing, as it was drawn.

   Jack, 9 September, showing trip-stay.html: "this was the listing and page for
   accommodatin can you implement that in the new style".

   It was already drawn, and the canvas had been flattening it. The mock sets

     .grid{grid-template-columns:repeat(3,minmax(0,1fr));
           gap:clamp(28px,4vh,44px) clamp(18px,2.2vw,32px)}
     .c .row{display:flex;justify-content:space-between;margin-top:16px}

   - three across, a generous gap down the page, the photograph full-bleed with
   a tag on it, a stone band under it carrying the vote, and the name in the
   book face beneath the card with its one italic line under that. The canvas
   had overridden the grid to auto-fill at 196px, which made six columns of
   thumbnails, and stacked the row, which put the name and a button in a
   pillar. Both overrides go; the drawing stands.

   The faces on Who is coming stay small - that was a different instruction
   about people, and a face carries a name and a role where a place carries a
   photograph, a tag, a vote, a name and a line. */

/* The tiles that are genuinely small keep their own sizing. */
.canv-in .people{grid-template-columns:repeat(auto-fit,minmax(132px,160px));
  justify-content:start;gap:clamp(12px,1.4vw,18px)}

/* An action on a card that is not yet votable goes in the band, where the yes
   and the no live on the ones that are - not beside the name, which is where
   it was clipping the title at six columns. */
.canv-in .c .band button.btn{display:block;width:100%;height:auto;padding:0;border:0;background:none;
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);text-align:center;cursor:pointer}
.canv-in .c .band:has(button):hover{background:var(--ink)}
.canv-in .c .band:has(button):hover button.btn{color:var(--paper)}

@media(max-width:900px){.canv-in .doors2{grid-template-columns:1fr}}

/* ---- the yes and the no, under the card and joined to it.

   No gap between them: the band is the foot of the card, not a thing sitting
   near it. And it answers on the press - the two buttons turn over to the
   tally, which is the whole of the animation. A vote should feel like
   something landing rather than a form posting. */
.canv-in .stay-pick{display:flex;flex-direction:column}
.canv-in .stay-pick .card{margin:0}
.canv-in .stay-pick .band{display:flex;align-items:center;margin:0;padding:0;min-height:40px;
  background:var(--stone);color:var(--ink);
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.canv-in .stay-pick .band:not(.vote){padding:0 16px}

/* The vote strip is trip-places.html's, lifted whole into this sheet above:
   `.v` holds the two buttons, `.t` the count, the `--share` line and `change`.
   The canvas used to write its own flat version here at higher specificity,
   with the buttons as direct children, and every one of the mock's rules lost
   - which is why the animation stopped. It says nothing about the strip now.

   What it does have to say is where the reveal is drawn. The mock's card names
   its photograph `.ph`; the site's listing card names the same element `.c`. */
.canv-in .stay-pick .bars{position:absolute;inset:0;display:flex;align-items:flex-end;z-index:3;pointer-events:none}
.canv-in .stay-pick .bars i{flex:1;height:0;position:relative;font-style:normal;
  transition:height .9s var(--ease);overflow:hidden}
.canv-in .stay-pick .bars i em{position:absolute;left:16px;top:14px;display:flex;flex-direction:column;font-style:normal}
.canv-in .stay-pick .bars i.y{background:rgba(43,48,29,.88);color:#fff}
.canv-in .stay-pick .bars i.n{background:rgba(251,249,246,.9);color:var(--ink)}
.canv-in .stay-pick .bars i b{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.4vw,34px), 28px + (clamp(26px,2.4vw,34px) - 28px) * 0.6);line-height:1}
.canv-in .stay-pick .bars i span{font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;margin-top:6px;opacity:.85}
/* While they are up, the name over the foot of the photograph would read
   through them. */
.canv-in .stay-pick .card .c:has(.bars) .t{opacity:0;transition:opacity .4s}

@media(max-width:1100px){.canv-in .grid4,.canv-in .dexgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.canv-in .grid4,.canv-in .dexgrid{grid-template-columns:1fr}}

/* A rail inside a column keeps its scroll but loses the page's negative
   margins, which pulled it out past the column and under the band. */
.canv-in .rail{margin-inline:0;padding-inline:0}

/* What the canvas has already said, the page does not say again.
   All three are on the welcome chapter only, and all three were answered the
   moment the book and its contents moved to the left and stayed there:

   .below is "The chapters — every part of the book", which is the contents;
   .end is "when you are home, this becomes a book", which argues for the book
   that is now permanently on screen and drew a second cover to do it;
   .crew is a strip of who is coming, which is a chapter one press away.

   Between them they were two thirds of the page's height. */
.canv-in > .below,.canv-in > .crew,.canv-in > .end{display:none}

/* And on that same chapter the next-step band repeats the to-do list it sits
   under. Everywhere else it is the one piece of guidance the contents cannot
   give - which of the chapters to do next - so it stays. */
.canv-in > .yours ~ .next{display:none}

/* ================ CHAPTER · getting there ================ */
/* ---- trip-arrive.html ---- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}.two .line{font-size:17px;line-height:1.65;color:var(--ink-75)}.map-plate{aspect-ratio:3/2;background:var(--stone);display:grid;place-items:center;text-align:center;padding:24px;font-style:italic;color:var(--ink-55)}.stone .ans .faces b{background:var(--forest)}@media(max-width:800px){.two{grid-template-columns:1fr}}

/* ---- getting there: one question at a time.

   The question was set at clamp(26px,2.8vw,38px) with a sub-line under it,
   which made it a second title on a page that already has one. It comes down
   to the size of a section head and loses the sub, because "One tap. Change it
   any time." is not something you need told while you are looking at four
   things to tap. (Jack, 9 September.)

   The three parts - how, when, and everybody's answers - cross-fade rather
   than cut, using the house entrance from entrances.html: eight pixels of
   rise, four of blur, nine hundred milliseconds. */
.canv-in .ask-h{margin:0 0 clamp(18px,2.4vh,24px);font-family:var(--face);font-weight:400;
  font-size:24px;line-height:1.15;letter-spacing:-.005em;color:var(--ink)}
.canv-in .ask-h em{font-family:var(--serif);font-style:italic;font-weight:500}

.canv-in .astep{animation:astep-in .9s var(--ease) both}
@keyframes astep-in{
  from{opacity:0;transform:translateY(8px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* The way back, said quietly: it is not the thing to do here. */
.canv-in .astep-back{display:inline-block;margin-top:clamp(20px,3vh,28px);border:0;background:none;
  padding:0;cursor:pointer;font-family:var(--serif);font-style:italic;font-size:14.5px;
  color:var(--ink-35);text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
.canv-in .astep-back:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .canv-in .astep{animation-duration:.01ms}
}

/* ================ CHAPTER · things to do ================ */
/* ---- trip-places.html ---- */
.grid .c[hidden]{display:none}
#things .kinds{margin-bottom:clamp(32px,4.5vh,48px)}

/* ---- Found somewhere?, and what it opens.

   The tile is the listing card's shape with nothing in it - an empty place in
   the row, the way the invitation is an empty place among the faces. It opened
   the desk before, and the desk is off, so what appeared was its fallback
   rather than a search. (Jack, 9 September: "make the found somewhere box work
   - currenty opens wrong thing".) */
/* Paper, not the listing card's forest. The listing sets a dark ground so a
   white name over a photograph still reads; this card has no photograph and
   ink words, and took the ground with it - Found somewhere? at 1.47 and Look
   it up at 1.00, which is forest on forest. */
.canv-in .card.add-card .c{display:grid;place-items:center;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--ink-20);color:var(--ink)}
.canv-in .card.add-card:hover .c{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink-35)}
.canv-in .add-in{display:block;padding:26px;text-align:center}
.canv-in .add-in b{display:block;font-family:var(--face);font-weight:400;font-size:21px;line-height:1.15;color:var(--ink)}
.canv-in .add-in i{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;
  font-size:14.5px;line-height:1.45;color:var(--ink-55)}
.canv-in .add-in .go{display:inline-block;margin-top:16px;font-family:var(--sans);font-size:9.5px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--forest)}
.canv-in .add-card:hover .add-in .go{color:var(--tweed)}

/* The search, in the slideout the chapter already opens for a place. */
.dk .find,.canv-in .find{margin-top:18px}
.find .field{box-shadow:inset 0 0 0 1px var(--ink-20);background:transparent}
.find .field input{width:100%;height:48px;padding:0 14px;border:0;background:transparent;
  font-family:var(--serif);font-size:16px;color:var(--ink)}
.find .field input::placeholder{color:var(--ink-35);font-style:italic}
.find .where{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-55)}

.find .foundlist{display:grid;gap:1px;margin-top:16px;background:var(--ink-20)}
.find .foundone{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px;border:0;
  background:var(--paper);cursor:pointer;text-align:left;transition:background-color .25s var(--ease)}
.find .foundone:hover{background:var(--oat)}
.find .foundone img,.find .foundone .noshot{flex:0 0 auto;width:52px;height:52px;object-fit:cover;display:grid;
  place-items:center;background:var(--stone);color:var(--ink-55);font-family:var(--face);font-size:20px}
.find .foundone b{display:block;font-family:var(--face);font-weight:400;font-size:17px;line-height:1.2;color:var(--ink)}
.find .foundone i{display:block;margin-top:3px;font-family:var(--serif);font-style:italic;
  font-size:13px;color:var(--ink-55)}

/* ================ CHAPTER · the shortlist ================ */
/* ---- Would you go? drawn as the welcome page's cards.

   Jack, 9 September: "can you try a version more similar to the cards we have
   on welcome please".

   The mock's row put a photograph, a name, a region, a blurb, a row of faces
   and three controls in front of a yes-or-no - six things to read before
   answering one question. The welcome card is three: a numeral, a name with a
   line under it, and the thing to do. This is the same three, with the yes and
   the no where Skip sits there.

   The photograph goes with the rest: a picture is for choosing between places,
   and this list is not a choice between places - it is one question about one
   place, then the next. */
/* .feed carries max-width:900px and auto margins from the old feed, which
   stood the cards 115px inside every other block on the page. Reset the whole
   rule, not the half of it that was wrong. */
.canv-in .feed{display:flex;flex-direction:column;gap:10px;margin-top:clamp(20px,3vh,28px);
  max-width:none;margin-left:0;margin-right:0}
.canv-in .left{text-align:left}
.canv-in .big{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:18px;
  padding:20px 22px;background:#fff;border:0;border-radius:0;min-height:0;
  box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .45s var(--ease)}
.canv-in .big:hover{transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(65,64,66,.06),0 16px 26px -16px rgba(65,64,66,.32)}
.canv-in .big .pic{display:none}
.canv-in .big .n{grid-column:1;font-family:var(--face);font-weight:400;font-size:20px;line-height:32px;
  color:var(--ink-35);text-align:center;background:none;width:auto;height:auto;padding:0;border:0}
.canv-in .big .side{grid-column:2;padding:0;min-width:0}
.canv-in .big .side h3{margin:0;font-family:var(--face);font-weight:400;font-size:20px;line-height:1.15;color:var(--ink)}
.canv-in .big .side .words{margin:5px 0 0;font-family:var(--serif);font-style:italic;font-size:14.5px;
  line-height:1.6;color:var(--ink-55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canv-in .big .side .where{display:none}
.canv-in .big .side .who{display:flex;align-items:center;gap:8px;margin:8px 0 0;
  font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-35)}

/* The two answers, ranged right where the welcome card ranges its label. */
.canv-in .big .acts{grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:0}
.canv-in .big .yn{display:flex;gap:0;box-shadow:inset 0 0 0 1px var(--ink-20)}
.canv-in .big .yn button{min-width:74px;height:40px;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-55);transition:background-color .25s var(--ease),color .25s var(--ease)}
.canv-in .big .yn button + button{box-shadow:inset 1px 0 0 var(--ink-20)}
.canv-in .big .yn button:hover{background:var(--ink);color:var(--paper)}
.canv-in .big .acts .or{border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-35);
  text-decoration:underline;text-underline-offset:3px}
.canv-in .big .acts .or:hover{color:var(--ink)}

/* Answered: it leaves, and the next one comes up into its place. */
.canv-in .big.gone{opacity:0;transform:translateY(-8px)}
.canv-in .big.off{opacity:1}

@media(max-width:760px){
  .canv-in .big{grid-template-columns:24px minmax(0,1fr);gap:0 14px;padding:16px 18px}
  .canv-in .big .acts{grid-column:2;grid-row:2;align-items:flex-start;margin-top:12px}
  .canv-in .big .side .words{white-space:normal}
}

/* ================ CHAPTER · the itinerary ================ */
/* ---- trip-itinerary.html ---- */
.above .doors .btn.quiet{border-color:var(--ink)}
.tl.bare::before{display:none}
.stop-row.plus{padding-bottom:0;margin-top:6px}
.stop-row.plus .n{background:var(--forest);color:var(--paper);box-shadow:none;font-size:22px;cursor:pointer}
.stop-row.plus .body{padding-top:4px;display:flex;align-items:center;min-height:48px}
.stop-row.plus .btn{min-height:44px}
.stop-row .find{margin-top:8px}
body.adder-open .scrim[data-close-adder],body.amend-open .scrim[data-close-amend],body.guest-open .scrim[data-close-guest]{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
body.adder-open #adder,body.amend-open #amend,body.guest-open #gsheet{transform:none}
body.adder-open,body.amend-open,body.guest-open{overflow:hidden}
.sheet.adder{width:min(560px,100%)}
.card .fromgroup{position:absolute;right:14px;bottom:14px;font-style:italic;font-size:13.5px;color:var(--moss)}
.grp .s{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.45;margin-top:10px}
.grp .s .faces b{width:28px;height:28px;font-size:12px;flex:0 0 auto}
.grp .s span{flex:1}
.grp .s span b{font-weight:500}
.grp .s .yn button{height:32px;min-width:auto;padding:0 10px 0 calc(10px + .2em);font-size:9px}

/* ================ CHAPTER · good to know ================ */
/* ---- trip-info.html ---- */
.infos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.info{background:var(--stone);padding:22px 24px}
.info p:not(.k){margin-top:8px;font-size:16.5px;line-height:1.55;color:var(--ink-75)}
.info.key{grid-column:1/-1;background:var(--forest);color:var(--on-forest)}
.info.key .k{color:var(--on-forest-55)}
.info.key .held{font-family:var(--face);font-size:min(clamp(20px,1.9vw,26px), 28px + (clamp(20px,1.9vw,26px) - 28px) * 0.6);line-height:1.2;color:#fff}
.info.key .held b{font-weight:400;font-family:var(--script);font-style:italic;font-size:1.1em}
@media(max-width:800px){.infos{grid-template-columns:1fr}}

/* ================ CHAPTER · the plan ================ */
/* ---- trip-plan.html ---- */
.gaps{display:grid;gap:10px}
.gap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;padding:20px 24px;background:var(--stone);transition:opacity .5s var(--ease),transform .5s var(--ease),max-height .5s var(--ease),padding .5s,margin .5s}
.gap .t{font-size:clamp(19px,1.7vw,23px)}
.gap .why{margin-top:4px;font-size:15px;line-height:1.5;color:var(--ink-75);max-width:60ch}
.gap .gacts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.gap.done{opacity:0;transform:translateX(30px)}
.gap.shut{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;margin-top:-10px}
.alldone{margin-top:18px;font-style:italic;color:var(--ink-55)}
@media(max-width:800px){.gap{grid-template-columns:1fr}.gap .gacts{justify-content:flex-start}}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{background:var(--paper);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.note .nh .t{font-size:19px}
.note .why{font-size:14.5px;line-height:1.5;color:var(--ink-55);font-style:italic}
.note .txt{font-size:16px;line-height:1.55;color:var(--ink-75)}
.note .field{background:var(--stone)}
.note .field button{background:transparent;color:var(--ink)}
.note .nacts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;font-size:13.5px;color:var(--ink-55)}
.note .nacts>button{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.note .when{font-style:italic}
.note .when b{font-weight:500;color:var(--ink)}
.note .when button{font-style:italic;color:var(--ink-55);box-shadow:inset 0 -1px 0 var(--stone-2)}
.note[data-key=key]{grid-column:1/-1;background:var(--forest);color:var(--on-forest)}
.note[data-key=key] .t{color:#fff}
.note[data-key=key] .txt{color:var(--on-forest)}
.note[data-key=key] .nacts{color:var(--on-forest-55)}
.note[data-key=key] .nacts>button,.note[data-key=key] .when b{color:#fff}
@media(max-width:800px){.notes{grid-template-columns:1fr}}

/* ---- trip-poll-studies.html ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vh,48px) clamp(20px,2.4vw,36px)}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
.pc .ph .wash{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(43,48,29,.86);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;transition:height .9s var(--ease);z-index:3;overflow:hidden}
.pc .ph .wash b{font-family:var(--face);font-weight:400;font-size:min(40px, 28px + (40px - 28px) * 0.6);line-height:1}
.pc .ph .wash i{font-style:italic;font-size:15px;color:var(--on-forest-55)}
.pc.reveal-B .ph .wash{height:70%}
.pc .ph .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;background:rgba(65,64,66,.35);opacity:0;transition:opacity .6s;z-index:3}
.pc .ph .num b{font-family:var(--face);font-weight:400;font-size:min(120px, 28px + (120px - 28px) * 0.6);line-height:1}
.pc .ph .num i{display:block;font-style:italic;font-size:17px;margin-top:6px}
.pc.reveal-C .ph .num{opacity:1}
.pc .ph .note{position:absolute;top:12px;right:12px;z-index:4;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease)}
.pc .ph .note span{display:block;padding:9px 12px;background:rgba(251,249,246,.96);color:var(--ink);font-style:italic;font-size:13.5px}
.pc.reveal-F .ph .note{opacity:1;transform:none}
.pc.gone-F .ph .note{opacity:0;transform:translateY(-14px)}
.band.pv .split,.band.pv .words2,.band.pv .line{display:none;width:100%;height:40px}
.band.pv .split{position:relative;background:var(--stone-2)}
.band.pv .split .y{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--forest);color:var(--paper);display:flex;align-items:center;padding:0 12px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;overflow:hidden;transition:width .9s var(--ease)}
.band.pv .split .n{position:absolute;right:12px;top:0;bottom:0;display:flex;align-items:center;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.band.pv .split em{font-style:normal;margin-right:8px}
.pc.reveal-A .band.pv .split{display:block}
.pc.reveal-A .band.pv .split .y{width:70%}
.band.pv .words2{align-items:center;background:var(--stone)}
.band.pv .words2 span{display:flex;align-items:center;justify-content:center;font-family:var(--face);font-size:17px;height:100%;transition:flex .9s var(--ease);flex:1}
.band.pv .words2 .y{background:var(--forest);color:var(--paper)}
.band.pv .words2 .n{color:var(--ink-55)}
.pc.reveal-E .band.pv .words2{display:flex}
.pc.reveal-E .band.pv .words2 .y{flex:7}.pc.reveal-E .band.pv .words2 .n{flex:2}
.band.pv .line{align-items:center;gap:12px;padding:0 14px;background:var(--stone)}
.band.pv .line .txt{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band.pv .line .chg{margin-left:auto;font-style:italic;font-size:13px;color:var(--ink-55)}
.pc.done .band.pv .v{display:none}
.pc.done .band.pv .line{display:flex}
.pc.reveal-A .band.pv .line,.pc.reveal-E .band.pv .line{display:none}
.pc.reveal-A .band.pv .v,.pc.reveal-E .band.pv .v{display:none}

/* ================ CHAPTER · the album ================ */
/* ---- trip-album.html ---- */
.acover{position:relative;aspect-ratio:4/5;background:var(--ink);overflow:hidden;box-shadow:0 18px 40px rgba(65,64,66,.18)}
.acover img.face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acover .spine{position:absolute;left:0;top:0;bottom:0;width:7%;background:linear-gradient(90deg,rgba(65,64,66,.45),rgba(65,64,66,0))}
.acover .spine::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:1px;background:rgba(251,249,246,.35)}
.acover .plate{position:absolute;left:14%;right:14%;bottom:9%;padding:clamp(12px,1.4vw,18px) clamp(12px,1.4vw,18px) clamp(11px,1.3vw,16px);background:var(--paper);text-align:center;box-shadow:0 6px 18px rgba(65,64,66,.25)}
.acover .plate h2{font-family:var(--face);font-weight:400;font-size:clamp(15px,1.45vw,20px);line-height:1.1;color:var(--ink);text-wrap:balance}
.acover .plate .k{margin-top:7px;color:var(--ink-55)}
.hows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.hows .how{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px 16px;align-items:center}
.how b.n{width:40px;height:40px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-weight:400;font-size:17px}
.how .t{font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6)}
.hows .how p:not(.t){grid-column:2;font-size:16px;line-height:1.55;color:var(--ink-75);max-width:34ch}
@media(max-width:800px){.hows{grid-template-columns:1fr}}
/* the wall: photographs and films of every shape on one grid, in the order they happened */
.wall2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(70px,7.6vw,110px);grid-auto-flow:dense;gap:10px}
.wall2 .w{position:relative;overflow:hidden;background:var(--stone-2);margin:0}
.wall2 .w img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.wall2 .w:hover img{transform:scale(1.025)}
.wall2 .w.p{grid-column:span 2;grid-row:span 3}
.wall2 .w.l{grid-column:span 3;grid-row:span 2}
.wall2 .w.s{grid-column:span 2;grid-row:span 2}
.wall2 .w.v{grid-column:span 4;grid-row:span 3}
.wall2 .w .chip{position:absolute;left:10px;bottom:10px;padding:6px 9px;background:rgba(251,249,246,.94);color:var(--ink);font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wall2 .w .chip i{font-family:var(--serif);font-style:italic;font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-55);margin-left:8px}
.wall2 .w .reel-chip{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:8px;padding:6px 9px;background:rgba(65,64,66,.82);color:var(--paper);font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.wall2 .w .reel-chip b{width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent var(--paper)}
.wall2 .w.v::after{content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);background:rgba(251,249,246,.92);clip-path:polygon(38% 30%,38% 70%,70% 50%);opacity:0;transition:opacity .3s}
.wall2 .w.v:hover::after{opacity:1}
.wall2 .wday{grid-column:1/-1;grid-row:span 1;display:flex;align-items:flex-end;padding-bottom:4px;font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1.1}
.wall2 .wday:first-child{grid-row:span 1}
.wall2 .w[hidden],.wall2 .wday[hidden]{display:none}
@media(max-width:800px){.wall2{grid-template-columns:repeat(4,1fr);grid-auto-rows:80px}.wall2 .w.v{grid-column:span 4}.wall2 .w.l{grid-column:span 4}}
/* the illustration, before the trip */
.demo-wrap{position:relative}
.wall2.demo{filter:grayscale(.7) contrast(.92);opacity:.45;pointer-events:none}
.demo-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);padding:clamp(20px,2.4vw,30px) clamp(24px,3vw,40px);text-align:center;max-width:380px}
.demo-note p{margin-top:8px;font-size:16.5px;line-height:1.5;color:var(--ink-75)}
.demo-note p b{font-weight:500;color:var(--ink)}
.printed{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.printed-pic{aspect-ratio:var(--book);background:var(--forest);padding:7%;max-width:360px;justify-self:end}
.printed-pic img{width:100%;height:82%;object-fit:cover}
.printed h2{margin-top:10px;font-family:var(--face);font-weight:400;font-size:min(clamp(28px,3vw,40px), 28px + (clamp(28px,3vw,40px) - 28px) * 0.6);line-height:1.06;letter-spacing:-.01em}
.printed p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--ink-75);max-width:48ch}
@media(max-width:800px){.printed{grid-template-columns:1fr}.printed-pic{justify-self:start}}
.dropline{margin-top:clamp(24px,3.5vh,36px);padding:22px;border:1.5px dashed var(--ink-20);text-align:center;font-style:italic;font-size:14.5px;color:var(--ink-55)}
.dropline b{display:block;font-style:normal;font-family:var(--face);font-weight:400;font-size:18px;color:var(--ink);margin-bottom:4px}
body.dragging-files .dropline{border-color:var(--forest);background:rgba(43,48,29,.05)}
/* the adder */
.bigdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;aspect-ratio:4/3;margin-top:18px;border:1.5px dashed var(--ink-20);color:var(--ink-55);font-style:italic;font-size:15px;transition:border-color .3s,background .3s}
.bigdrop b{font-style:normal;font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);color:var(--ink)}
.bigdrop:hover{border-color:var(--forest);background:rgba(43,48,29,.04)}
.picked{margin-top:18px;display:grid;gap:8px}
.picked .pk{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px;background:var(--stone)}
.picked .pk .ph{aspect-ratio:1;cursor:default}
.picked .pk .t{font-size:15px;font-family:var(--serif)}
.picked .pk .where{font-size:13.5px}
body.aadder-open .scrim[data-close-aadder]{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
body.aadder-open #aadder{transform:none}
body.aadder-open{overflow:hidden}

/* ================ CHAPTER · the book ================ */
/* ---- trip-guidebook.html ---- */
/* the guidebook's .end-a is a div inside .in; the home page's is the section
   itself, with .in inside it. Scoped to the child, or this rule makes that
   section a two-column grid with nothing in the second column. */
.in > .end-a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}.cover.small{width:clamp(120px,11vw,150px)}.book .page .ph{cursor:default}@media(max-width:700px){.in > .end-a{grid-template-columns:1fr}}

/* ---- trip-print.html ---- */
.spreads{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--edge));padding:0 var(--edge) 8px}
.spreads::-webkit-scrollbar{display:none}
.spread{flex:0 0 100%;scroll-snap-align:start;display:flex;justify-content:center;gap:2px;padding:6px 0}
.pg{position:relative;width:min(44vw,400px);aspect-ratio:148/190;background:var(--paper);color:var(--ink);padding:9% 9% 8%;overflow:hidden;box-shadow:0 1px 0 rgba(65,64,66,.06),0 14px 40px rgba(65,64,66,.10);display:flex;flex-direction:column}
.pg.nopad{padding:0}
.pg.ghost{background:transparent;box-shadow:none}
.pg.forest{background:var(--forest);color:var(--on-forest)}
.pg .k{font-size:8.5px;letter-spacing:.28em}
.pg .k i{font-style:normal;color:var(--ink-35);margin:0 8px}
.pg.forest .k{color:var(--on-forest-55)}
.pg .cover.full{position:absolute;inset:0;aspect-ratio:auto}
.pg .bleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg .ttl{margin-top:10px;font-family:var(--face);font-weight:700;font-size:min(clamp(18px,2.1vw,26px), 28px + (clamp(18px,2.1vw,26px) - 28px) * 0.6);line-height:1.08;letter-spacing:-.006em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.pg .wh{margin-top:4px;font-style:italic;font-size:12.5px;color:var(--ink-75)}
.pg .slot{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--ink-75);display:-webkit-box;-webkit-line-clamp:var(--n);-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty;hyphens:none}
.pg .facts{margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:11.5px;line-height:1.4}
.pg .facts dt{font-style:italic;color:var(--ink-55)}
.pg .rows{list-style:none;margin-top:14px;display:grid;gap:7px}
.pg .rows li{display:grid;grid-template-columns:38px 1fr;gap:10px;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden}
.pg .rows li b{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.12em;color:var(--moss);padding-top:2px}
.pg .rows li span{overflow:hidden;text-overflow:ellipsis;font-family:var(--face);font-size:13.5px}
.pg .rows li span i{font-family:var(--serif);font-style:italic;font-size:11.5px;color:var(--ink-55)}
.pg .rows li.empty{height:14px}
.pg .toc{list-style:none;margin-top:18px;display:grid;gap:12px}
.pg .toc li{display:flex;justify-content:space-between;gap:12px;font-family:var(--face);font-size:14.5px}
.pg .toc li b{font-weight:400;color:var(--ink-55)}
.pg .opener{margin:auto 0}
.pg .big{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2.6vw,32px), 28px + (clamp(22px,2.6vw,32px) - 28px) * 0.6);line-height:1.08;color:#fff;text-wrap:balance}
.pg .grid6{margin-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:min-content;gap:10px 8px;flex:1;min-height:0;overflow:hidden}
.pg .grid6 figure{margin:0}
.pg .grid6 img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pg .grid6 figcaption{margin-top:5px;font-size:11px;line-height:1.3}
.pg .grid6 figcaption b{display:block;font-family:var(--face);font-weight:400;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg .grid6 figcaption i{font-style:italic;color:var(--ink-55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.pg .grid4{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:10px;flex:1;min-height:0;overflow:hidden}
.pg .grid4 figure{margin:0}
.pg .grid4 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pg .grid4 figcaption{margin-top:5px;font-family:var(--sans);font-size:7.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg .grid4 figcaption i{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:10.5px;font-weight:400;color:var(--ink-55);margin-left:6px}
.pg .faces5{margin-top:18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pg .faces5 figure{margin:0}
.pg .faces5 img,.pg .faces5 span{width:100%;aspect-ratio:1;object-fit:cover;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:26px}
.pg .faces5 figcaption{margin-top:5px;font-family:var(--face);font-size:12.5px}
.pg.blank .colophon{margin:auto 0 0;font-style:italic;font-size:10.5px;color:var(--ink-55)}
.pg .back{margin:auto 0;text-align:center}
.pg .back .names{margin-top:12px;font-family:var(--face);font-size:15px;color:#fff}
.pg .back .fine{margin-top:10px;font-style:italic;font-size:10.5px;color:var(--on-forest-55)}
.turns{display:flex;gap:8px}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px) clamp(18px,2.2vw,32px)}
.rules .t{font-size:clamp(19px,1.7vw,23px)}
.rules p:not(.t){margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink-75)}
@media(max-width:800px){.rules{grid-template-columns:1fr}.pg{width:80vw}.spread{flex-wrap:wrap}}
@media print{
  @page{size:148mm 190mm;margin:0}
  body>*:not(#book){display:none!important}
  #book{padding:0;background:#fff}
  #book .lead,.turns{display:none}
  .spreads{display:block;margin:0;padding:0;overflow:visible}
  .spread{display:block;padding:0}
  .pg{width:148mm;height:190mm;aspect-ratio:auto;box-shadow:none;page-break-after:always;break-after:page}
  .pg.ghost{display:none}
}

/* ================ THE OPENING · starting a trip, a canvas not a page ================ */
/* ---- trip-new.html ---- */

/* ---- starting a trip: a canvas, not a page ----------------------------
   Jack, 7 September: "full canvas, all centred and aligned with no menu bar,
   just a close icon top right which goes back." The book stays on the left,
   which is the shape that was there before and the one that works: the thing
   being made stays the size of a thing rather than a thumbnail over the
   words. */
/* On a tall screen the question sat against the top with a third of the
   page empty beneath it. There is only ever one question on this canvas, so
   it belongs in the middle of it. The padding stays as the floor and ceiling
   for the case where a long step outgrows the screen. */
.start.canvas{min-height:100vh;display:grid;align-content:center;padding:clamp(30px,6vh,70px) 0 clamp(40px,7vh,80px);overflow:hidden}

/* The book stands on its own ground, and that ground is its column.

   Drawn as a band behind a centred 1040px layout, it began a third of the way
   across a wide monitor and read as a grey slab dropped in the middle of the
   page. Geometry, not taste: with the layout centred there is no width at
   which a band can reach the left edge of the screen and still have the book
   in the middle of it. So on this canvas the layout is not centred - the
   first column runs from the edge of the screen, the ground is the column,
   and the book sits in the middle of it at every width. */
.start.canvas .in{max-width:none;padding-inline:0}
.start.canvas .open{grid-template-columns:clamp(280px,36vw,620px) minmax(0,1fr);gap:0;align-items:center}
.start.canvas .side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(30px,6vh,70px) clamp(24px,3vw,56px)}
.start.canvas .side::before{content:"";position:absolute;top:-100vh;bottom:-100vh;left:-100vw;right:0;z-index:0;background:#F5F2EE}
/* The ground is a child of the column, so everything else in the column has
   to be lifted over it: an absolutely positioned box paints above the plain
   ones that follow it, and the book disappeared behind its own shelf. */
.start.canvas .side > *{position:relative;z-index:1}
.start.canvas .bookframe{width:100%;max-width:min(300px,68%)}
.start.canvas .qs{padding-left:clamp(30px,5vw,110px);padding-right:var(--edge)}
.start.canvas .cover{box-shadow:0 2px 4px rgba(65,64,66,.05),0 30px 50px -28px rgba(65,64,66,.45)}

/* A chosen day, still chosen while the pointer is on it.
   `.days button:hover` sets the plain stone ground, and carries a pseudo-class
   so it outweighs `.days .from, .days .to` - which sets pale type for the
   dark ground it expects. Hovering the day you had just picked turned it
   stone with near-white numerals on it, so the date you chose looked like the
   one thing on the calendar you could not read.

   Corrected here rather than in _desk.css: that sheet belongs to the Desk and
   is generated. The same fault is in the Desk's own calendar and is worth
   fixing at the source. */
.calwrap .days .from:hover,.calwrap .days .to:hover{background:var(--forest);color:var(--paper)}
.calwrap .days .in:hover{background:rgba(43,48,29,.28);color:var(--ink)}

/* Under the book, what pressing it does - said in three words rather than
   three lines. The sentence it replaces has moved to the foot of the page,
   where it reads as a reassurance rather than an instruction. */
/* A place we had to turn away: said plainly, in the ink of the page rather
   than in a warning colour. No red badges. */
.start .hint.turned{color:var(--ink-75)}
.start .hint.turned b{font-weight:500}
.start .change{display:block;width:100%;margin-top:18px;text-align:center;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35);transition:color .3s}
.start .change:hover{color:var(--ink)}
.start .nothing{margin-top:clamp(30px,5vh,52px);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink-35);max-width:52ch}

/* The cover fills its frame, said once and last.
   Two rules of the same weight have been arguing over the cover's width -
   `.start .bookframe .cover{inset:0}` and `.start .side .cover{width:min(50%,
   200px)}` - and which one won came down to source order. On this canvas the
   second was winning below 700px, so the phone drew a 280px frame with a
   140px book in the top half of it and a tall empty box beneath. */
.start.canvas .bookframe .cover{position:absolute;inset:0;width:auto;max-width:none;margin:0}

@media(max-width:700px){
  .start.canvas .open{grid-template-columns:1fr}
  .start.canvas .side::before{display:none}
  .start.canvas .side{padding-inline:var(--edge)}
  .start.canvas .qs{padding-inline:var(--edge)}
}
.start.canvas .cover{box-shadow:0 2px 4px rgba(65,64,66,.05),0 30px 50px -28px rgba(65,64,66,.45)}
@media(max-width:700px){.start.canvas .open::before{display:none}}

/* Under the book, what pressing it does - said in three words rather than
   three lines. The sentence it replaces has moved to the foot of the page,
   where it reads as a reassurance rather than an instruction. */
.start .change{display:block;width:100%;margin-top:18px;text-align:center;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35);transition:color .3s}
.start .change:hover{color:var(--ink)}
.start .nothing{margin-top:clamp(30px,5vh,52px);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink-35);max-width:52ch}
.shut{position:fixed;top:clamp(14px,2.4vh,24px);right:clamp(14px,2.4vw,28px);z-index:40;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55);padding:10px 4px;transition:color .3s}
.shut:hover{color:var(--ink)}
.shut i{position:relative;width:14px;height:14px;display:block}
.shut i::before,.shut i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.4px;background:currentColor;transform:rotate(45deg)}
.shut i::after{transform:rotate(-45deg)}

/* the book is the door to the book: pressing it goes to the last question */
.start .bookframe{position:relative;display:block;width:100%;max-width:280px;aspect-ratio:148/190;container-type:inline-size;
  background:none;border:0;padding:0;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 24px 50px -30px rgba(65,64,66,.45)}
.start .bookframe:hover{transform:translateY(-4px);box-shadow:0 34px 60px -30px rgba(65,64,66,.5)}
.start .bookframe .cover{position:absolute;inset:0;display:block}
.start .bookframe .cover>*{position:absolute;left:0;right:0;text-align:center;display:block}
.start .bookframe .cover .h2{top:15.5%;padding:0 9%;font-family:var(--face);font-weight:700;font-size:8.4cqw;line-height:1.06;letter-spacing:-.004em;color:#fff;text-wrap:balance}
.start .bookframe .cover .plate{top:33%;left:24%;right:24%;bottom:auto;aspect-ratio:var(--book);overflow:hidden;background-color:rgba(0,0,0,.1)}
.start .bookframe .cover .plate img{width:100%;height:100%;object-fit:cover}
.start .bookframe .cover .foot{bottom:7%;top:auto;color:#fff;opacity:.9}

/* the quick picks: bigger, and they read as things to press */
.start .pills.roomy button{min-height:52px;padding:0 22px;display:inline-flex;align-items:center;background:#fff;border:0;
  font-size:11px;letter-spacing:.16em;box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);
  transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s}
/* Both colours named on every state, deliberately.
   `.pills button:hover` sets a dark ground and pale type together. Making
   these white cards overrode the ground - a heavier selector - but not the
   type, so hovering a quick pick turned its words white on white and the
   button appeared to empty itself. Anything that sets one of the pair here
   has to set the other. */
.start .pills.roomy button{color:var(--ink)}
.start .pills.roomy button:hover{background:var(--forest);color:var(--paper);transform:translateY(-2px);box-shadow:0 1px 2px rgba(65,64,66,.06),0 16px 26px -16px rgba(43,48,29,.4)}
.start .pills.roomy button.on{background:var(--forest);color:var(--paper);box-shadow:0 10px 22px -14px rgba(43,48,29,.7)}
.start .pills.roomy button.on:hover{background:var(--moss);color:var(--paper)}

/* One answered colour on the whole canvas.
   The smaller pills - how long, and what you are hoping to do - were taking
   the system's default `.pills button.on{background:var(--ink)}` and coming
   up black, beside quick picks and choice rows that answer in green. Nothing
   distinguishes those two kinds of question, so nothing should distinguish
   the way they answer. Placed after the roomy rules, which it shares its
   weight with, so the order is the thing deciding it. */
.start.canvas .pills button:hover{background:var(--forest);color:var(--paper)}
.start.canvas .pills button.on{background:var(--forest);color:var(--paper)}
.start.canvas .pills button.on:hover{background:var(--moss);color:var(--paper)}

/* what the search found: ours first, then anywhere in Scotland */
.hits{display:flex;flex-direction:column;gap:1px;background:var(--stone-2);max-width:520px;margin-top:10px}
.hits button{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:14px 16px;background:var(--paper);text-align:left;transition:background .25s}
.hits button:hover{background:#fff}
.hits b{font-family:var(--face);font-weight:400;font-size:18px}
.hits i{font-style:italic;font-size:13.5px;color:var(--ink-55)}

/* What the search offers hangs off the field rather than sitting in the page.

   In the flow it pushed the quick picks, the Next button and the closing note
   down the page as you typed, and pulled them back up again as the list
   shortened - so the thing you were reaching for moved while you reached for
   it. Absolute, so nothing below it knows the list is there.

   Capped and scrollable because the canvas clips at its own edges: a long
   list on a short screen would otherwise run out of sight with no way down. */
.start .ask{position:relative;z-index:5}
.start .ask .hits,.start .ask .looking{position:absolute;top:calc(100% + 8px);left:0;right:0;margin-top:0;z-index:30}
.start .ask .hits{max-height:min(46vh,380px);overflow-y:auto;
  box-shadow:0 1px 2px rgba(65,64,66,.06),0 22px 44px -24px rgba(65,64,66,.45)}
.start .ask .looking{max-width:520px;padding:12px 16px;background:var(--paper);font-style:italic;font-size:14px;color:var(--ink-55);
  box-shadow:0 1px 2px rgba(65,64,66,.06),0 22px 44px -24px rgba(65,64,66,.45)}
.calwrap{max-width:420px;margin-top:6px}
.hint.roomy{font-size:clamp(16px,1.3vw,18px);color:var(--ink-75);max-width:48ch}

/* how many of you */
.count{display:flex;align-items:center;gap:clamp(18px,3vw,30px);margin:6px 0 4px}
.count button{width:52px;height:52px;display:grid;place-items:center;font-family:var(--face);font-size:26px;box-shadow:inset 0 0 0 1px var(--ink-20);transition:box-shadow .25s}
.count button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.count b{font-family:var(--face);font-weight:400;font-size:min(clamp(48px,7vw,76px), 28px + (clamp(48px,7vw,76px) - 28px) * 0.6);line-height:1;min-width:1.6em;text-align:center}

/* the book question */
.lab{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);margin:22px 0 10px}
.swatch{display:flex;gap:8px;flex-wrap:wrap}
.swatch button,.swatch .own{width:36px;height:36px;border:0;padding:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.swatch button:hover,.swatch .own:hover{transform:translateY(-2px)}
.swatch button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
/* one of their own, in keeping: a plain square carrying the spectrum */
.swatch .own{position:relative;overflow:hidden;display:block;background:conic-gradient(#682114,#414042,#AFA065,#414042,#414042,#F04E26,#682114)}
.swatch .own input{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}
.shots{display:flex;gap:8px;flex-wrap:wrap}
.shots button,.shots label{width:58px;height:72px;border:0;padding:0;cursor:pointer;background-color:var(--stone-2);
  background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .25s var(--ease),box-shadow .25s}
.shots button:hover,.shots label:hover{transform:translateY(-2px)}
.shots button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--forest)}
/* The last two tiles are not photographs, and saying so in words did not
   fit: "USE YOUR OWN" and "CHOOSE MORE" broke across three lines inside a
   58px box and read as two mistakes at the end of a tidy row. A mark and one
   short word fit; the full sentence lives in the label a screen reader gets.

   Named .gal rather than .more because .more already belongs to another
   component in this system, and its margin-top was pushing this tile a
   clear 30px below the row it is part of. */
.shots .add,.shots .gal{display:grid;place-items:center;align-content:center;gap:5px;position:relative;
  font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1}
.shots .add b,.shots .gal b{font-size:17px;font-weight:400;letter-spacing:0;line-height:1}
.shots .add{background-color:transparent;box-shadow:inset 0 0 0 1px var(--ink-20);color:var(--ink-55)}
.shots .add:hover{box-shadow:inset 0 0 0 1px var(--ink-35);color:var(--ink)}
.shots .add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.shots .gal{background-color:var(--forest);color:var(--paper)}
.shots .gal:hover{background-color:var(--ink)}

/* the gallery: the guide showing itself */
.light{position:fixed;inset:0;z-index:340;background:rgba(65,64,66,.9);display:flex;flex-direction:column;padding:clamp(16px,3vh,30px) clamp(16px,4vw,48px)}
.light .lhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(16px,3vh,26px)}
.light h2{font-family:var(--face);font-weight:400;color:#fff;font-size:min(clamp(22px,2.6vw,32px), 28px + (clamp(22px,2.6vw,32px) - 28px) * 0.6);line-height:1.06}
.light .lsay{font-style:italic;color:rgba(251,249,246,.6);font-size:14.5px;margin-top:6px}
.light .lx{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(251,249,246,.7);transition:color .3s}
.light .lx:hover{color:#fff}
.lgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;align-content:start}
.lgrid button{position:relative;aspect-ratio:4/5;border:0;padding:0;cursor:pointer;background-color:#222;
  background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .3s var(--ease)}
.lgrid button:hover{transform:scale(1.015)}
.lgrid button span{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;text-align:left;
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.06em;color:#fff;
  background:linear-gradient(rgba(65,64,66,0),rgba(65,64,66,.72))}
.lgrid button.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--paper)}
@media(max-width:700px){.lgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}

.start .side{position:sticky;top:24px}
.start .side-note{margin-top:16px;font-style:italic;font-size:14.5px;color:var(--ink-55);max-width:28ch}
.start .choices button.on{background:var(--forest);color:#fff}
.start .choices button.on i{color:var(--on-forest-55)}
.start .q .pills+.pills{margin-top:12px}

/* ================ THE PARTNER'S ROOM, AND THE SITE RULES ================ */
/* ---- the room worn by a partner ---- */
/* the partner's name where the mark goes */
header.site.hosted .mk{font-family:var(--face);font-size:22px;letter-spacing:-.01em;color:inherit;text-decoration:none;white-space:nowrap}
header.site.hosted .mk img{display:none}
.menu.hosted .bar .mk{font-family:var(--face);font-size:22px;letter-spacing:-.01em;color:inherit;text-decoration:none}
.menu.hosted .bar .mk img{display:none}
.made b{font-weight:500}
/* the plates, across. auto-fit rather than four, because a plate with nothing
   to say is not drawn at all and three in a row of four leaves a blank end. */
.todo.hosted{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(12px,1.4vw,20px)}
@media(max-width:560px){.todo.hosted{grid-template-columns:1fr}}
/* Nearby: the buttons level across the row, whatever the words above them do */
.grid.hosted .c{display:flex;flex-direction:column}
.grid.hosted .c .acts{margin-top:auto;padding-top:14px;display:flex;gap:10px}
.grid.hosted .c .acts .btn{flex:1;justify-content:center}
.grid.hosted .c .band{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px}

/* ---- site rules ---- */
/* nine chapters on the home page: three to a row */
.below .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){.below .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.below .grid{grid-template-columns:1fr}}
/* a card with no photograph: the initial, large and quiet */
.c .ph .init{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--face);font-weight:400;font-size:min(clamp(44px,5vw,76px), 28px + (clamp(44px,5vw,76px) - 28px) * 0.6);color:var(--ink-35)}
/* your trips: a shelf of covers */
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px) clamp(18px,2.2vw,32px);max-width:var(--width);margin:0 auto}
.shelf a{display:block;color:inherit}
.shelf a .cover{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.shelf a:hover .cover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(65,64,66,.22)}
.shelf .t{margin-top:14px;font-family:var(--face);font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.15}
.shelf .where{margin-top:4px;font-style:italic;font-size:14.5px;color:var(--ink-55)}
.shelf .new .cover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-20);color:var(--ink-55);display:grid;place-items:center;font-family:var(--face);font-size:min(40px, 28px + (40px - 28px) * 0.6)}
.shelf .new:hover .cover{box-shadow:inset 0 0 0 1.5px var(--ink)}
@media(max-width:800px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* small screens */
@media(max-width:700px){
  .above .open{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
  .above .open>.cover,.above .open>.acover{width:min(58%,230px)}
  .above .open>.show{width:100%}
  .above .word .doors,.above .word .film{justify-content:center}
  .above .line{margin-left:auto;margin-right:auto}
  header.site .tname{display:none}
  .stop-row .card .ph .tag{display:none}
  .crew .row{grid-template-columns:auto 1fr;align-items:start}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .start .open{grid-template-columns:1fr}
  .start .side{position:static}
  .start .side .cover{width:min(50%,200px);margin:0 auto}
}
/* itinerary cards stack on a phone: the photograph across the top, the words beneath */
@media(max-width:820px){
  .stop-row .card{grid-template-columns:minmax(0,1fr)}
  .stop-row .card .ph{grid-column:auto;max-width:none;margin-top:0;width:100%;aspect-ratio:16/10;height:auto}
  .stop-row .card .body{padding-top:14px}
  .stop-row .card .grip{display:none}
}
/* printing the printed edition: the pages alone, one per sheet, 148 by 190 */
@media print{
  @page{size:148mm 190mm;margin:0}
  html,body{background:#fff!important}
  header.site,.menu,.above,.next,.made,.desk-fab,.desk,.desk-scrim,.scrim,.sheet,#book .lead,.turns{display:none!important}
  main.room>*:not(#book){display:none!important}
  #book{padding:0!important;background:#fff!important;margin:0}
  #book .in{max-width:none;padding:0;margin:0}
  .spreads{display:block!important;margin:0;padding:0;overflow:visible!important;scroll-snap-type:none}
  .spread{display:block!important;padding:0;margin:0;gap:0}
  .pg{width:148mm!important;height:190mm!important;aspect-ratio:auto!important;box-shadow:none!important;margin:0!important;page-break-after:always;break-after:page;overflow:hidden}
  .pg.ghost{display:none!important}
  .pg img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pg.forest,.pg .cover{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* the day map fills its frame */
.trip-map{padding:0;font-style:normal}
.trip-map .gmap{position:absolute;inset:0}
header.site .right a.menu-word{width:auto;white-space:nowrap;padding:0}
/* the sign-in page: the onboarding's frame, a form in it */
.start.auth{min-height:calc(100vh - 76px);display:flex;align-items:center}
.start.auth .open{align-items:center}
.start.auth .side .cover{width:min(100%,300px)}
.authform .field{max-width:440px;background:var(--stone)}
.authform .field input{font-size:17px}
.wrong{margin-top:8px;font-style:italic;font-size:14.5px;color:var(--ink-75)}
.keep{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;color:var(--ink-75);cursor:pointer}
.keep input{appearance:none;width:16px;height:16px;border:1.5px solid var(--ink-35);background:var(--paper);display:grid;place-items:center;cursor:pointer}
.keep input:checked{background:var(--forest);border-color:var(--forest)}
.keep input:checked::after{content:"";width:8px;height:5px;border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:translateY(-1px) rotate(-45deg)}
.start.auth .acts{display:flex;align-items:center;gap:22px;margin-top:26px}
.start.auth .acts .back{font-style:italic;color:var(--ink-55);background:none;border:0;padding:0;font-family:var(--serif);font-size:15px;letter-spacing:0;text-transform:none}
.start.auth .acts .back:hover{color:var(--ink)}
.newhere{margin-top:clamp(36px,6vh,56px);padding-top:clamp(24px,4vh,32px);border-top:1px solid var(--stone-2);max-width:440px}
@media(max-width:700px){.start.auth{min-height:0;display:block}.start.auth .side .cover{width:min(52%,200px)}}

/* ================ THE PULSE · .tp, lifted from _ours.css (prompt 11) ================ */
.tp{
    position: fixed;
    left: clamp(14px, 3vw, 34px);
    bottom: calc(clamp(72px, 11vh, 96px) + 16px);
    z-index: 45;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: min(340px, calc(100vw - 28px));
}
.tp-note{
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px 11px 11px;
    background: #2B301D;
    color: #F4F1EC;
    text-decoration: none;
    box-shadow: 0 14px 40px rgba(65, 64, 66, .3);
    animation: tp-in .45s cubic-bezier(.22, .8, .24, 1) both;
}
@keyframes tp-in{
    from { opacity: 0; transform: translateY(10px) scale(.97) }
}
.tp-note:hover{ background: #2B301D }
.tp-face{
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(244, 241, 236, .12);
    color: #F4F1EC;
    font-family: var(--sans);
    font-size: 10.5px;
}
.tp-said{
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(244, 241, 236, .78);
}
.tp-said b{ font-weight: 500; color: #F4F1EC }
.tp-said em{ font-style: italic; color: #F4F1EC }
.tp-said i{
    display: block;
    font-style: normal;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(244, 241, 236, .42);
    margin-top: 2px;
}

/* ================ THE OPENING'S SHELF · the canvas grid and band, relifted under .start.canvas (prompt 18) ================ */
.start.canvas .grid4, .start.canvas .dexgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vh,44px) clamp(18px,2.2vw,32px)}
.start.canvas .card .c{width:100%;border:0;padding:0;background:var(--forest);cursor:pointer;text-align:left;
  display:block;font:inherit;color:#fff}
.start.canvas .card .init{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--face);font-size:min(56px, 28px + (56px - 28px) * 0.6);color:rgba(249,245,238,.5);background:var(--forest)}
.start.canvas .card .tag.r{position:absolute;top:14px;right:14px;left:auto;z-index:2;
  padding:8px 10px;background:var(--forest);color:var(--paper);
  font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1}
.start.canvas .stay-pick{display:flex;flex-direction:column}
.start.canvas .stay-pick .card{margin:0}
.start.canvas .stay-pick .band{display:flex;align-items:center;margin:0;padding:0;min-height:40px;
  background:var(--stone);color:var(--ink);
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.start.canvas .stay-pick .band:not(.vote){padding:0 16px}
@media(max-width:1100px){
.start.canvas .grid4, .start.canvas .dexgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.start.canvas .grid4, .start.canvas .dexgrid{grid-template-columns:1fr}
}
/* The opening's shelf stands in the question's column, which is narrower than
   the room's; the grid keeps the room's three, two and one. Take this one is
   a button, so it says so to a thumb and a keyboard. */
.start.canvas .grid4{margin-top:22px}
.start.canvas .stay-pick .band{cursor:pointer;border:0;width:100%;justify-content:center;color:var(--ink)}
.start.canvas .stay-pick .band:hover{background:var(--forest);color:var(--paper)}
.start.canvas .card .c .t .k{display:block}

/* ================ PROGRESS THAT IS HONEST · the count and the tally on the welcome (prompt 53) ================ */
.canv .yours .sw-tally{ display: flex; gap: 3px; align-items: center }
.canv .yours .sw-tally i{
    width: 4px;
    height: 4px;
    background: var(--hair, rgba(65, 64, 66, .18));
    transition: background .4s var(--ease, ease);
}
.canv .yours .sw-tally i.done{ background: var(--gold, #C08C3D) }
.canv .yours .sw-tally:has(i:nth-child(13)) i{ width: 3px; height: 3px; gap: 2px }
@media (max-width: 520px){
.canv .yours .sw-tally i{ width: 3px; height: 3px }
}
.canv .yours .c-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px}
.canv .yours .c-count .sw-tally{flex:1 1 auto;min-width:80px}

/* ================ ERRORS THAT SAY WHAT TO DO · the fault line under the head (prompt 57) ================ */
.canv .above .word .empty{margin-top:14px}

/* ================ THE OPENING REDONE · the finder's tiles on the canvas (OPENING.md) ================ */
.start.canvas .tiles{display:grid;gap:10px}
.start.canvas .tiles.regions{grid-template-columns:repeat(4,minmax(0,1fr))}
.start.canvas .tiles.kinds{grid-template-columns:repeat(5,minmax(0,1fr))}
.start.canvas .tiles.months{grid-template-columns:repeat(6,minmax(0,1fr))}
.start.canvas .tile{position:relative;display:flex;flex-direction:column;background:var(--stone);color:var(--ink);padding:14px;min-height:96px;border:1px solid transparent;text-align:left;transition:background .25s,color .25s}
.start.canvas .tile:hover{border-color:var(--ink)}
.start.canvas .tile.on{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.start.canvas .tile img, .start.canvas .tile .ph{width:calc(100% + 28px);margin:-14px -14px 12px;aspect-ratio:1337/1080;object-fit:cover;background:var(--stone-2);display:block;max-height:110px}
.start.canvas .tile b{font-family:var(--face);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.1}
.start.canvas .tile span{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.35;color:var(--ink-75)}
.start.canvas .tile.on span{color:var(--on-forest)}
.start.canvas .tile i{margin-top:auto;padding-top:6px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--ink-55)}
.start.canvas .tile.on i{color:var(--on-forest-55)}
.start.canvas .tile.any{justify-content:center;background:var(--paper);border-color:var(--ink)}
.start.canvas .tile.any.on{background:var(--forest);border-color:var(--forest)}
.start.canvas .tile.month{min-height:120px}
.start.canvas .tile.month b{font-size:clamp(19px,1.7vw,24px)}
@media(max-width:1000px){
.start.canvas .tiles.regions, .start.canvas .tiles.kinds{grid-template-columns:repeat(3,minmax(0,1fr))}
.start.canvas .tiles.months{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
.start.canvas .tiles.regions, .start.canvas .tiles.kinds, .start.canvas .tiles.months{grid-template-columns:1fr 1fr}
}
.start.canvas .tiles{align-items:stretch}
.start.canvas .tile{min-height:0;height:100%;padding:14px 16px 16px}
.start.canvas .tile img, .start.canvas .tile .ph{height:120px;max-height:none;aspect-ratio:auto;width:calc(100% + 32px);margin:-14px -16px 12px}
.start.canvas .tile b{font-size:clamp(17px,1.4vw,20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.start.canvas .tile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.start.canvas .tile i{margin-top:auto;padding-top:8px}
.start.canvas .tile.any{border-color:transparent;background:var(--stone)}
.start.canvas .tiles.regions{grid-template-columns:repeat(4,minmax(0,1fr))}
.start.canvas .tiles.months{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--stone)}
.start.canvas .tiles.months .tile{min-height:0}
.start.canvas .tiles.months .tile span{min-height:0}
.start.canvas .tiles.who{grid-template-columns:repeat(4,minmax(0,1fr))}
.start.canvas .tiles.who .tile span{min-height:0}
.start.canvas .tiles.kinds{grid-template-columns:repeat(4,minmax(0,1fr))}
.start.canvas .tiles.also-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.start.canvas .tile.small{min-height:56px;padding:14px 16px;justify-content:center}
.start.canvas .tile.small b{font-size:17px}
@media(max-width:1000px){
.start.canvas .tiles.regions, .start.canvas .tiles.kinds, .start.canvas .tiles.who, .start.canvas .tiles.also-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.start.canvas .tiles.months{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
.start.canvas .tiles.regions, .start.canvas .tiles.kinds, .start.canvas .tiles.who, .start.canvas .tiles.also-tiles, .start.canvas .tiles.months{grid-template-columns:1fr 1fr}
}
.start.canvas .counts{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(18px,2.4vh,26px);padding-top:clamp(18px,2.4vh,26px);border-top:1px solid var(--stone)}
.start.canvas .counts .kick{flex-basis:100%;margin-bottom:0}
.start.canvas .count{display:flex;align-items:center;gap:14px}
.start.canvas .count span{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-75);min-width:64px}
.start.canvas .count button{width:40px;height:40px;background:var(--stone);font-family:var(--face);font-size:22px;line-height:1}
.start.canvas .count b{font-family:var(--face);font-weight:400;font-size:24px;min-width:24px;text-align:center}
.start.canvas .tiles{display:grid;gap:10px;margin-top:22px}
.start.canvas .tiles.regions,.start.canvas .tiles.kinds,.start.canvas .tiles.who{grid-template-columns:repeat(4,minmax(0,1fr))}
.start.canvas .tiles .tile{min-height:0;height:100%;padding:14px 16px 16px;border-radius:0;cursor:pointer}
.start.canvas .tiles .tile img,.start.canvas .tiles .tile .ph{height:120px;max-height:none;aspect-ratio:auto;width:calc(100% + 32px);margin:-14px -16px 12px}
.start.canvas .tiles.regions .tile.any{grid-column:span 2}
.start.canvas .tiles.regions .tile.any img,.start.canvas .tiles.regions .tile.any .ph{height:120px}
.start.canvas .tiles .tile span{min-height:0;-webkit-line-clamp:4}
.start.canvas .tiles.who .tile .ph{display:none}
.start.canvas .tiles.who .tile{min-height:112px;justify-content:flex-end}
.start.canvas .counts{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--stone)}
.start.canvas .counts .kick{flex-basis:100%;margin-bottom:0}
.start.canvas .count{display:flex;align-items:center;gap:14px}
.start.canvas .count span{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-75);min-width:70px}
.start.canvas .count b{font-family:var(--face);font-weight:400;font-size:22px;min-width:28px;text-align:center}
.start.canvas .count button{width:44px;height:44px;border:1px solid var(--ink);background:var(--paper);font-size:20px;line-height:1}
.start.canvas .count button:hover{background:var(--ink);color:var(--paper)}
.start.canvas .ask{margin-top:18px}
/* The calendar's own small title, in the question's face (Jack, 10 Sep: a slightly smaller title). */
.start .q h2{font-family:var(--face);font-weight:400;font-size:min(clamp(19px,1.8vw,24px), 28px + (clamp(19px,1.8vw,24px) - 28px) * 0.6);line-height:1.2;letter-spacing:-.006em;margin-bottom:18px;text-wrap:balance}
/* The lodge page's calendar, as Jack asked for it (10 Sep): its month line,
   its paper days on oat, the past on stone, bracken on the days chosen. The
   values are the lodge's own, from _stay.css and _place.css. */
.start .calwrap{--oat:#F5F1E9;--shell:#F9F5EE;--bracken:#C08C3D;--bracken-soft:rgb(192,140,61);--oat-12:rgb(219,215,208);--oat-13:rgb(217,213,206);background:none;padding:0;max-width:520px;margin-top:22px}
/* The oat ground under the days alone (Jack, 10 Sep), its edge flush with
   the question: the grid's own gap colour, four pixels beyond the cells. */
.start .calwrap .days{background:var(--oat);padding:4px;margin:0 -4px}
.start .calwrap .cal{max-width:none}
.start .calwrap .cal .mh{margin-bottom:28px}
.start .calwrap .cal .mh h3{font-family:var(--face);font-weight:400;font-size:min(clamp(20px,1.8vw,24px), 28px + (clamp(20px,1.8vw,24px) - 28px) * 0.6);line-height:1;color:var(--ink)}
.start .calwrap .cal .mh h3 span{font-family:var(--serif);font-style:italic;font-size:.75em;color:var(--ink-55);margin-left:12px}
.start .calwrap .cal .mh div{gap:4px}
.start .calwrap .cal .mh button{width:40px;height:40px;background:transparent;color:var(--ink)}
.start .calwrap .cal .mh button:hover{background:var(--paper)}
.start .calwrap .cal .mh button svg{width:18px;height:18px}
.start .calwrap .dow{margin-bottom:6px}
.start .calwrap .dow span{font-size:10px;letter-spacing:.12em;color:var(--ink-35);padding-bottom:10px}
.start .calwrap .days button{background:var(--paper);font-family:var(--sans);font-size:14px;color:var(--ink);transition:background .18s var(--ease),color .18s var(--ease)}
.start .calwrap .days button:hover{background:var(--oat-12)}
.start .calwrap .days .pad{background:none}
.start .calwrap .days .past{background:var(--oat-13);color:rgba(65,64,66,.4)}
.start .calwrap .days .in{background:var(--bracken-soft);color:var(--shell)}
.start .calwrap .days .from,.start .calwrap .days .to{background:var(--bracken);color:var(--shell)}
.start .calwrap .days .from:hover,.start .calwrap .days .to:hover,.start .calwrap .days .in:hover{background:var(--bracken);color:var(--shell)}
/* The month they know (Jack, 10 Sep, from public/design-2026/opening-months/):
   the shortlist's white row as the canvas draws it (.canv-in .big, the same
   values), with the photograph the row always had a slot for - a small
   square on the left - no number, the name and the line, nothing at the
   right, and more air: eighteen apart, deeper rows. */
/* Twelve rows are taller than a screen: the book stays at the top beside
   them rather than being centred against the whole column and lost. */
/* Every screen asks in the same place (Jack, 10 Sep): the question is an
   H1 at the same height on every screen, the column top-aligned rather
   than centred against whatever is under it, the book beside it. */
.start.canvas{align-content:start}
.start.canvas .open{align-items:start}
/* Where the question sat when the first screen was centred is where it sits
   on every screen (Jack, 10 Sep: the centred "How long have you got?" was
   the right one): the column and the book take that height from the
   viewport, and a taller screen scrolls under it with the book staying put. */
.start.canvas .qs{padding-top:clamp(28px,9vh,96px)}
/* The cover column's stone ground was painted by the sticky column itself,
   a screen above and below it, so a long page ran out of ground (Jack, 10
   Sep). The section paints it now, top to bottom, the column's own width. */
.start.canvas{position:relative}
.start.canvas::before{content:'';position:absolute;top:0;bottom:0;left:0;width:clamp(280px,36vw,620px);background:#F5F2EE;z-index:0}
.start.canvas .in{position:relative;z-index:1}
.start.canvas .open>.side::before{content:none}
@media(max-width:700px){.start.canvas::before{content:none}}
/* The way out is a way back (Jack, 10 Sep): the word, and a chevron in the
   cross's place, drawn as the cross was. */
.start~.shut i,.shut i{position:relative}
.shut i::before,.shut i::after{transform:none}
.shut i::before{content:'';position:absolute;left:5px;top:50%;width:7px;height:7px;background:none;border:0;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.shut i::after{content:none}
button.shut{cursor:pointer;background:none;border:0;font:inherit;color:inherit}
.start.canvas .open>.side{position:sticky;top:clamp(30px,6vh,70px)}
.start.canvas .q.on{padding-top:0;margin-top:0}
/* A little smaller (Jack, 10 Sep): 30-46px became 26-40px. */
.start .q h1{font-size:min(clamp(24px,2.7vw,36px), 28px + (clamp(24px,2.7vw,36px) - 28px) * 0.6);margin-bottom:18px}
.start .q h1+.hint{margin-top:0}
.start .q h1+.pills,.start .q h1+.tiles,.start .q h1+.feed,.start .q h1+.calwrap{margin-top:0}
/* The book stays put while the questions scroll (Jack, 10 Sep): the section
   clipped its overflow, which stops sticky dead. Clip sideways only. */
.start.canvas{overflow:visible;overflow-x:clip}
/* The row's own .side shares its name with the cover column: the canvas
   rules for the column (sticky, centred) must not reach it. */
.start .q .feed .big .side{position:static;top:auto;align-items:flex-start;justify-content:flex-start;background:transparent;width:auto;max-width:none;padding:0;margin:0;text-align:left}
.start .q .feed .big .side::before{content:none}
.start .q .feed .big .side>*{position:static;z-index:auto}
.start .q .feed{display:grid;grid-template-columns:minmax(0,max-content);justify-content:start;gap:10px;margin-top:22px;max-width:680px;margin-left:0;margin-right:0}
.start .q .feed .big{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:14px;padding:18px 20px 18px 16px;background:#fff;border:0;border-radius:0;min-height:0;width:100%;max-width:none;text-align:left;color:var(--ink);box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.start .q .feed .big:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(65,64,66,.06),0 16px 26px -16px rgba(65,64,66,.32)}
.start .q .feed .big.on{box-shadow:inset 0 0 0 1px var(--forest),0 1px 2px rgba(65,64,66,.05)}
.start .q .feed .big .pic{position:relative;overflow:hidden;background:var(--stone-2);display:block;aspect-ratio:1;grid-column:1}
.start .q .feed .big .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.start .q .feed .big .side{grid-column:2;padding:0;min-width:0;display:flex;flex-direction:column}
.start .q .feed .big .side h3{margin:0;font-family:var(--face);font-weight:400;font-size:17px;line-height:1.15;color:var(--ink)}
.start .q .feed .big .side .words{margin:3px 0 0;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.5;color:var(--ink-55);white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:700px){.start .q .feed{gap:8px}.start .q .feed .big{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:8px 12px}}
.start .q h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
.start.canvas .acts{margin-top:26px}
@media(max-width:700px){
.start.canvas .tiles.regions,.start.canvas .tiles.kinds,.start.canvas .tiles.who{grid-template-columns:1fr 1fr}
.start.canvas .tiles .tile img,.start.canvas .tiles .tile .ph{height:96px}
}

/* ================ STARTING FROM · the box and the button, and L2 (the brief, 10 Sep) ================ */
:root{--an-fh:52px;--an-ffs:17px;--an-gap:10px}
.start.canvas{--tweed:#682114;--shell:#F9F5EE;--bracken:#C08C3D}
.an-pair{display:flex;gap:var(--an-gap);max-width:680px}
.an-fld{display:flex;align-items:center;height:var(--an-fh);padding:0 18px;border:1px solid var(--ink);background:var(--paper);font:400 var(--an-ffs) var(--serif);color:var(--ink);box-sizing:border-box;position:relative;flex:1;min-width:0}
.an-fld i{color:var(--ink-35);font-style:italic}
.an-fld b{font-weight:400;color:var(--tweed)}
.an-loc{display:inline-flex;align-items:center;gap:10px;height:var(--an-fh);padding:0 20px;border:1px solid var(--tweed);color:var(--tweed);font:400 14.5px var(--sans);cursor:pointer;transition:.4s;white-space:nowrap;box-sizing:border-box}
.an-loc::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(104,33,20,.18)}
.an-loc:hover{background:var(--tweed);color:var(--shell)}
.an-loc:hover::before{box-shadow:0 0 0 4px rgba(249,245,238,.25)}
.an-sug{max-width:680px;border:1px solid var(--ink);border-top:0;background:#fff;margin-top:-1px}
.an-sug div{display:flex;justify-content:space-between;align-items:baseline;padding:11px 18px;border-top:1px solid var(--stone-2);font-size:15.5px;cursor:pointer}
.an-sug div:first-child{border-top:0}
.an-sug div:hover{background:var(--stone)}
.an-sug div b{font-weight:500}
.an-sug div i{color:var(--ink-55);font-size:14px}
.an-sug .pow{justify-content:flex-end;font:500 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);cursor:default;padding:7px 18px}
.an-sug .pow:hover{background:none}
.v7 .an-fld{border-color:var(--bracken)}
.v7 .an-fld b{color:var(--ink)}
.v7 .an-fld small{margin-left:auto;font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bracken);display:flex;gap:8px;align-items:center}
.v7 .an-fld small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bracken)}
.v7 .undo{font:italic 400 15px var(--serif);color:var(--ink-55);margin-top:12px}
.v7 .undo u{text-decoration:none;border-bottom:1px solid var(--ink-35);color:var(--ink);cursor:pointer}
@media(max-width:700px){.an-pair{flex-direction:column}}
.an-l2{font-size:18px;margin:26px 0 0;max-width:40ch}
.an-u{text-decoration:none;border-bottom:1px solid var(--ink);cursor:pointer;color:var(--ink)}
.an-links{font-style:italic;font-size:16px;color:var(--ink-55);display:flex;gap:22px;margin-top:22px}
/* the build's own: the real input inside the box, the phrases and Back as buttons */
.start .q .an-pair{margin-top:22px}
.an-fld input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0;font:inherit;color:var(--tweed);outline:none}
.an-fld input::placeholder{color:var(--ink-35);font-style:italic}
.an-fld input:focus-visible{outline:none}
.an-fld:focus-within{border-color:var(--tweed)}
.an-loc[disabled]{cursor:default;opacity:.7}
button.an-u{display:inline;padding:0;margin:0;background:none;border:0;border-bottom:1px solid var(--ink);font:inherit;line-height:inherit}
.an-links span{cursor:pointer}
.an-links span:hover{color:var(--ink)}
.start .q .undo{margin-top:12px}
.start .q .undo + .acts{margin-top:22px}

/* ================ WHERE ARE YOU HEADING · three ways, the region cards, the kinds (the brief, 10 Sep) ================ */
.start.canvas{--august:#A0BAD4;--tall:1080/1337}
.hf-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:900px}
.hf-way{padding:20px 22px 18px;border:1px solid var(--ink);background:var(--paper);cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:.25s}
.hf-way b{display:block;font:400 22px var(--face)}
.hf-way i{display:block;font:italic 400 14.5px var(--serif);color:var(--ink-55);margin-top:5px;transition:.25s}
.hf-way:hover{background:var(--ink);color:var(--paper)}
.hf-way:hover i{color:var(--on-forest-55)}
@media(max-width:1000px){.hf-ways{grid-template-columns:1fr}}
.hf-cards .c{flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.hf-cards .c img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.hf-cards .c:hover img{transform:scale(1.035)}
.hf-cards .c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58) 0,rgba(0,0,0,.14) 42%,rgba(0,0,0,0) 62%);pointer-events:none}
.hf-cards .c .t{position:absolute;left:20px;right:20px;bottom:20px}
.hf-cards .c .k{display:block;margin-bottom:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.hf-cards .c h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.12;text-wrap:balance}
.hf-cards .c .w{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:rgba(255,255,255,.9)}
:root{--hf-cols:7;--hf-ratio:6/7;--hf-gap:8px;--hf-h3:15px;--hf-w:11.5px;--hf-pad:12px}
.hf-cards{display:grid;grid-template-columns:repeat(var(--hf-cols),minmax(0,1fr));gap:var(--hf-gap)}
.hf-cards .c{aspect-ratio:var(--hf-ratio);width:auto;cursor:pointer;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
.hf-cards .c.on{outline:3px solid var(--august);outline-offset:-3px}
/* The mark is the suits brief's, unmistakable: the 3px outline and the tick
   disc (Jack, 10 Sep: "i dont know when i have selected a card"). */
.hf-cards .c.on::after{content:"";position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--august);z-index:2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F5EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>");background-size:14px;background-position:center;background-repeat:no-repeat}
.hf-cards .c .t{left:var(--hf-pad);right:var(--hf-pad);bottom:var(--hf-pad)}
.hf-cards .c h3{font-size:var(--hf-h3)}
.hf-cards .c .w{font-size:var(--hf-w);margin-top:3px;line-height:1.3}
.hf-cards .c .k{display:none}
.hf-cards.wide .c .k{display:block;font-size:9px;margin-bottom:6px}
.hf-chosen{margin-top:26px;padding-top:18px;border-top:1px solid var(--stone-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hf-chosen b{font:400 24px var(--face)}
.hf-chosen b i{font:italic 400 15px var(--serif);color:var(--ink-55);margin-left:10px}
@media(max-width:1000px){.hf-cards{grid-template-columns:repeat(3,1fr)}}
.hf-cards.hf-kinds{grid-template-columns:repeat(8,minmax(0,1fr));max-width:1400px}
.hf-cards.hf-kinds .c .w,.hf-cards.hf-kinds .c .k{display:none}
/* the build's own: where the pieces sit under the question */
.start .q .hf-ways,.start .q .hf-cards{margin-top:22px}
/* The brief's seven across assumed the sheet's full-width column; the opening's
   question column is 800px at 1440, so seven made a 104px card and the names
   wrapped. The card keeps the brief's size (about 200px) and the count per row
   follows the column: four here, more on a wider screen. */
.start .q .hf-cards,.start .q .hf-cards.hf-kinds{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.hf-cards .c{color:#fff;text-decoration:none}
.hf-cards .c h3{color:#fff}

/* ================ THE PLACES THAT SUIT YOU · the best three, the rest, the tick (the brief, 10 Sep) ================ */
.rs-cards .c{flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.rs-cards .c img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.rs-cards .c:hover img{transform:scale(1.035)}
.rs-cards .c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58) 0,rgba(0,0,0,.14) 42%,rgba(0,0,0,0) 62%);pointer-events:none}
.rs-cards .c .t{position:absolute;left:20px;right:20px;bottom:20px}
.rs-cards .c .k{display:block;margin-bottom:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.rs-cards .c h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.12;text-wrap:balance}
.rs-cards .c .w{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:rgba(255,255,255,.9)}
.rs-big .c{flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.rs-big .c img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.rs-big .c:hover img{transform:scale(1.035)}
.rs-big .c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58) 0,rgba(0,0,0,.14) 42%,rgba(0,0,0,0) 62%);pointer-events:none}
.rs-big .c .t{position:absolute;left:20px;right:20px;bottom:20px}
.rs-big .c .k{display:block;margin-bottom:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.rs-big .c h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.12;text-wrap:balance}
.rs-big .c .w{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:rgba(255,255,255,.9)}
.rs-q{font:400 min(clamp(30px,3.4vw,44px), 28px + (clamp(30px,3.4vw,44px) - 28px) * 0.6)/1.1 var(--face);letter-spacing:-.005em;margin:0 0 14px}
.rs-q em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.rs-l{font-style:italic;font-size:17px;color:var(--ink-75);margin:0 0 28px;max-width:56ch}
.rs-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}
.rs-top-b{max-width:983px;gap:10px}
.rs-big{cursor:pointer}
.rs-big .c{aspect-ratio:3/2;width:auto;outline:2px solid transparent;outline-offset:-2px}
.rs-top-b .c .t{left:12px;right:12px;bottom:12px}
.rs-top-b .c h3{font-size:16px}
.rs-big .c .w,.rs-big .c .k{display:none}
.rs-top-b p{font-size:13.5px;margin:8px 0 0;line-height:1.5;color:var(--ink-75)}
.rs-also{font:600 9.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-55);margin:0 0 12px}
.rs-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.rs-cards .c{aspect-ratio:6/7;width:auto;cursor:pointer;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
.rs-cards .c .t{left:12px;right:12px;bottom:12px}
.rs-cards .c h3{font-size:15px}
.rs-cards .c .w{font-size:11.5px;margin-top:3px;line-height:1.3}
.rs-cards .c .k{display:none}
/* chosen */
.rs-cards .c.on,.rs-big.on .c{outline:3px solid var(--august);outline-offset:-3px}
.rs-cards .c.on::after,.rs-big.on .c::after{content:"";position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--august);z-index:2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F5EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>");background-size:14px;background-position:center;background-repeat:no-repeat}
/* the foot */
.rs-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--stone-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.rs-foot b{font:400 24px var(--face)}
.rs-foot b i{font:italic 400 15px var(--serif);color:var(--ink-55);margin-left:10px}
.rs-foot .open{font:italic 400 16px var(--serif);color:var(--ink-55)}
.rs-foot .open u{text-decoration:none;border-bottom:1px solid var(--ink-35);color:var(--ink);cursor:pointer}
.rs-count{font:600 9.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--august);margin-left:14px}
@media(max-width:1000px){.rs-cards{grid-template-columns:repeat(3,1fr)}.rs-top{grid-template-columns:1fr}}
/* the build's own: the card's link colour, and the question's own type stands above */
.rs-big .c,.rs-cards .c{color:#fff;text-decoration:none}
.rs-big .c h3,.rs-cards .c h3{color:#fff}

/* ================ WHO IS COMING · four tweed buttons, the dog, how many (the brief, 10 Sep) ================ */
:root{--wh-cols:4;--wh-maxw:1180px;--wh-b:22px;--wh-i:14.5px}
.wh-ways{display:grid;grid-template-columns:repeat(var(--wh-cols),minmax(0,1fr));gap:10px;max-width:var(--wh-maxw)}
.wh-way{position:relative;padding:20px 22px 18px;border:1px solid var(--ink);background:var(--paper);cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:.25s}
.wh-way b{display:block;font:400 var(--wh-b) var(--face)}
.wh-way i{display:block;font:italic 400 var(--wh-i) var(--serif);color:var(--ink-55);margin-top:5px;transition:.25s}
.wh-ways.tweed .wh-way{border-color:var(--tweed);color:var(--tweed)}
.wh-ways.tweed .wh-way i{color:var(--ink-55)}
.wh-ways.tweed .wh-way:hover,.wh-ways.tweed .wh-way.on{background:var(--tweed);color:var(--shell)}
.wh-ways.tweed .wh-way:hover i,.wh-ways.tweed .wh-way.on i{color:rgba(249,245,238,.7)}
/* the dog */
.wh-dog{display:inline-flex;align-items:center;gap:12px;margin-top:22px;cursor:pointer;font:italic 400 17px var(--serif);color:var(--ink-75);user-select:none}
.wh-dog:hover{color:var(--ink)}
.wh-dog .box{width:22px;height:22px;border:1px solid var(--ink);background:var(--paper);display:inline-grid;place-items:center;flex:none;transition:.2s}
.wh-dog.on{color:var(--ink)}
.wh-dog.on .box{background:var(--august);border-color:var(--august)}
.wh-dog.on .box::after{content:"";width:12px;height:12px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F5EE' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center/contain no-repeat}
@media(max-width:1000px){.wh-ways{grid-template-columns:1fr 1fr}}
.wh-rows{display:grid;gap:18px;max-width:760px}
.wh-row{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:18px}
.wh-row span{font:italic 400 16px var(--serif);color:var(--ink-75)}
.wh-nums{display:flex;gap:6px;flex-wrap:wrap}
.wh-num{width:44px;height:44px;border:1px solid var(--ink);background:var(--paper);font:400 18px var(--face);cursor:pointer;color:var(--ink);transition:.15s}
.wh-num:hover{background:var(--ink);color:var(--paper)}
.wh-num.on{background:var(--ink);color:var(--paper);outline:3px solid var(--august);outline-offset:-3px}
.wh-said{margin-top:28px;font:400 22px var(--face)}
.wh-said i{font:italic 400 15px var(--serif);color:var(--ink-55);margin-left:10px}
@media(max-width:1000px){.wh-row{grid-template-columns:1fr}}
/* the build's own: where the pieces sit under the question */
.start .q .wh-ways,.start .q .wh-rows{margin-top:22px}
.wh-dog{display:inline-flex}
.start .q .wh-dog{margin-top:22px}
.start .q .wh-dog + .acts{margin-top:26px}

/* ================ THE OPENING, MOVING THROUGH IT · the book centred, its contents, one Back, the rise (the brief, 10 Sep) ================ */
.bt-shelf .c{flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.bt-shelf .c img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.bt-shelf .c:hover img{transform:scale(1.035)}
.bt-shelf .c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58) 0,rgba(0,0,0,.14) 42%,rgba(0,0,0,0) 62%);pointer-events:none}
.bt-shelf .c .t{position:absolute;left:20px;right:20px;bottom:20px}
.bt-shelf .c .k{display:block;margin-bottom:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.bt-shelf .c h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.12;text-wrap:balance}
.bt-shelf .c .w{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:rgba(255,255,255,.9)}
:root{--bt-side:630px;--bt-dur:.42s;--bt-rise:14px;--bt-ease:cubic-bezier(.2,.7,.2,1)}
.start.canvas .open{grid-template-columns:var(--bt-side) minmax(0,1fr);min-height:100vh}
.start.canvas::before{width:var(--bt-side)}
/* The gutter is held open whether it is needed or not. Without it a screen
   that fits has no scrollbar and one that does not has one, so moving between
   them narrows the window by 15px and everything centred on it jumps 7 to the
   left. The dead padding below had been hiding that by keeping a scrollbar on
   every screen; taking it away uncovered it. */
html{scrollbar-gutter:stable}

/* Both, not one of them. The section is the trip sheet's page, padded above
   and below to breathe; here it is a screen, and `.open` is already exactly
   100vh - so the 66px underneath was a screen that could be nudged and never
   settled (11 Sep, walking every step). */
.start.canvas{padding-top:0;padding-bottom:0}
.start.canvas .open>.side{background:var(--shell);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:0 60px;margin:0}
.start.canvas .open>.side::before{content:none}
.bt-mark,.start.canvas .open>.side>.bt-mark{display:none;position:absolute;left:40px;top:28px;text-decoration:none;color:var(--ink);z-index:2}
.bt-mark b{display:block;font:600 10px var(--sans);letter-spacing:.3em;text-transform:uppercase}
.bt-mark i{display:block;font:italic 400 12.5px var(--serif);color:var(--ink-55);margin-top:3px}
.bt-mark:hover i{color:var(--ink)}
/* Jack, 10 Sep: "try without the contents on the onboarding, just make the
   book a little bit bigger and center it both horizontally and vertically".
   320px, the column's own centre, no contents and no mark. */
.start.canvas .bookframe{width:320px;max-width:320px;margin:0;opacity:1;transform:none;pointer-events:auto}
.start.canvas .bookframe .cover{position:relative;inset:auto;width:320px;max-width:320px;aspect-ratio:300/385;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:32px 26px 24px;box-shadow:6px 8px 24px -10px rgba(65,64,66,.45);overflow:hidden;transition:background .8s}
.start.canvas .bookframe .cover .k{font:600 8px var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.85;text-align:center;min-height:10px}
.start.canvas .bookframe .cover .h2{font:400 25px/1.1 var(--face);text-align:center;margin-top:8px}
.start.canvas .bookframe .cover .plate{width:160px;height:183px;background-color:rgba(0,0,0,.14);background-size:cover;background-position:center;transition:opacity .8s;margin:0}
.start.canvas .bookframe .cover .foot{font:600 8px var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.start.canvas .bookframe .cover.photo{background:#414042!important}
/* The book at the top of the column, its top level with the question's
   (Jack, 10 Sep: "moved up on the left with the contents"); the contents
   beneath it in the flow, the way back to any section already answered. */
.start.canvas .open>.side .bt-toc{position:static;margin:0}

.bt-toc{display:none;width:280px;font:400 15px var(--serif);color:var(--ink-55)}
.bt-toc .h{font:600 9px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-55);margin:0 0 10px}
.bt-toc button{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:baseline;width:100%;padding:8px 0;border:0;border-top:1px solid var(--stone-2);background:none;font:inherit;color:inherit;text-align:left;cursor:default}
.bt-toc button:last-child{border-bottom:1px solid var(--stone-2)}
.bt-toc button .n{font:400 12px var(--sans);color:var(--ink-35)}
.bt-toc button > span:nth-child(2){white-space:nowrap}
.bt-toc button .a{font-style:italic;color:var(--ink-55);font-size:13.5px;max-width:118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.bt-toc button.done{color:var(--ink);cursor:pointer}
.bt-toc button.done .n{color:var(--august);font-weight:600}
.bt-toc button.done:hover .a{color:var(--ink)}
.bt-toc button.now{color:var(--ink)}
.bt-toc button.now .n{color:var(--ink)}
@media(max-width:1000px){.start.canvas .open{grid-template-columns:1fr}.start.canvas .open>.side{position:static;height:auto;padding:70px 24px 30px}.start.canvas::before{content:none}.start.canvas .open>.side .bt-toc{position:static;margin-top:0}}
/* the screens rise in */
.bt-q.in{animation:bt-rise var(--bt-dur) var(--bt-ease) both}
.bt-q.in.back{animation-name:bt-fall}
@keyframes bt-rise{from{opacity:0;transform:translateY(var(--bt-rise))}to{opacity:1;transform:none}}
@keyframes bt-fall{from{opacity:0;transform:translateY(calc(var(--bt-rise) * -1))}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bt-q.in{animation:none}}
/* the dates' beat */
.bt-range{margin:16px 0 0;font:400 22px var(--face);min-height:28px}
.bt-range i{font:italic 400 15px var(--serif);color:var(--ink-55);margin-left:10px}
/* the part-way-through line */
.bt-again{display:inline-flex;align-items:center;gap:14px;margin:34px 0 0;padding:10px 16px;background:#fff;border:1px solid var(--stone-2);font:italic 400 15px var(--serif);color:var(--ink-75)}
.bt-again u{text-decoration:none;border-bottom:1px solid var(--ink-35);color:var(--ink);cursor:pointer}
/* the small things */
.start.canvas .hf-cards.hf-kinds{grid-template-columns:repeat(8,minmax(0,1fr))}
.rs-foot .said{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rs-foot u{text-decoration:none;border-bottom:1px solid var(--ink-35);color:var(--ink);cursor:pointer;font-style:italic;font-size:15px}
.rs-foot .said i{font:italic 400 15px var(--serif);color:var(--ink-55)}
.btn[disabled]{opacity:.35}
.start.canvas .q .acts .btn[disabled]{background:var(--forest);border-color:var(--forest);color:var(--paper);opacity:.35;cursor:default}
.hf-cards .c .w,.rs-cards .c .w,.bt-shelf .c .w{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the finish */
.bt-done{font:400 min(clamp(26px,3vw,36px), 28px + (clamp(26px,3vw,36px) - 28px) * 0.6)/1.15 var(--face);max-width:24ch}
.bt-done em{font-family:var(--serif);font-style:italic;font-weight:400}
.bt-done small{display:block;font:italic 400 17px var(--serif);color:var(--ink-55);margin-top:14px;max-width:48ch}
.bt-shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:760px;margin-top:30px}
.bt-shelf .c{aspect-ratio:6/7;width:auto;color:#fff;text-decoration:none}
.bt-shelf .c .t{left:12px;right:12px;bottom:12px}
.bt-shelf .c h3{font-size:15px;color:#fff}
.bt-shelf .c .w{font-size:11.5px;margin-top:3px}
.bt-shelf .c .k{display:none}
/* While the guide is made (Jack, 10 Sep: straight into the planner, with a
   nice loading animation): the book breathes, the site's own moss bar runs
   at the top of the window. Still under reduced motion. */
.start.canvas .bookframe.making .cover{animation:bt-breathe 1.6s var(--bt-ease) infinite}
@keyframes bt-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.start.canvas .bookframe.making .cover{animation:none}}
/* the build's own: Back beside the forward button, as the arrow word */
.start .q .acts .back{font-style:italic;font-size:15px;color:var(--ink-55)}
.start .q .acts .back:hover{color:var(--ink)}

/* ================ WHERE YOU ARE STAYING · the booked place in full (10 Sep) ================ */
/* The booked place, in full (Jack, 10 Sep: "it should display all the info
   about our chosen accommodation"). Nothing new: the photographs in the
   listing's ground, the register's kicker, h3 and italic line, the sheet's
   own facts list, the white row for the cottages and the reviews, and the
   quiet button to change your mind. */
.canv-in .stay-home{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 40px;align-items:start;margin-top:22px}
.canv-in .stay-pics{display:grid;gap:8px;min-width:0}
/* Whole setting 2 of public/design-2026/stay-strip/ (10 Sep): the 3:2
   large one, eight across, a 600ms crossfade between two layered
   photographs, the pressed one marked by being the bright one, the credit on
   the photograph as the room captions pictures. Still under reduced motion. */
.canv-in .stay-pics{outline:none}
.canv-in .stay-pics:focus-visible .main{outline:2px solid var(--august);outline-offset:3px}
.canv-in .stay-pics .main{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--stone-2)}
.canv-in .stay-pics .main img,.canv-in .stay-pics .more button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.canv-in .stay-pics .main img.over.in{animation:stay-fade .6s var(--ease) both}
@keyframes stay-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.canv-in .stay-pics .main img.over.in{animation:none}}
.canv-in .stay-pics .main .cap{position:absolute;left:12px;bottom:12px;margin:0;padding:8px 10px;background:rgba(251,249,246,.94);color:var(--ink);font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1;z-index:2}
.canv-in .stay-pics .more{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.canv-in .stay-pics .more button{position:relative;aspect-ratio:1;overflow:hidden;background:var(--stone-2);border:0;padding:0;cursor:pointer;opacity:.72;transition:opacity .25s var(--ease)}
.canv-in .stay-pics .more button:hover,.canv-in .stay-pics .more button.on{opacity:1}
.canv-in .stay-pics .more button:focus-visible{outline:2px solid var(--august);outline-offset:2px}
.canv-in .stay-words{min-width:0}
.canv-in .stay-words .k{margin:0 0 10px;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75)}
.canv-in .stay-words h3{margin:0;font-family:var(--face);font-weight:400;font-size:min(clamp(24px,2.4vw,30px), 28px + (clamp(24px,2.4vw,30px) - 28px) * 0.6);line-height:1.1;color:var(--ink)}
.canv-in .stay-words .where{margin:6px 0 0;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--ink-55)}
.canv-in .stay-words .blurb{margin:16px 0 0;font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--ink)}
.canv-in .stay-words .facts{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 22px;font-size:15.5px;line-height:1.45}
.canv-in .stay-words .facts dt{color:var(--ink-55);font-style:italic}
.canv-in .stay-words .facts dd{margin:0}
.canv-in .stay-words .links{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px}
.canv-in .stay-words .links a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-35)}
.canv-in .stay-words .links a:hover{text-decoration-color:var(--ink)}
.canv-in .stay-words .say{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
/* The sheet's .say paints its buttons for a dark ground; here they are the
   room's tweed button, whole: line, words, fill on hover. */
.canv-in .stay-words .say .btn,.canv-in .stay-words .say .btn.quiet{color:var(--tweed);background:transparent;border:1px solid var(--tweed);box-shadow:none}
.canv-in .stay-words .say .btn:hover{background:var(--tweed);color:var(--shell)}
/* A word from you, on its own page (10 Sep): the opening's box, three
   lines tall, and the filled button with the Back word beside it. */
.canv-in .word .an-pair{max-width:680px}
.canv-in .word .an-fld{height:auto;padding:14px 18px;align-items:flex-start}
.canv-in .word .an-fld textarea{width:100%;border:0;background:transparent;font:inherit;color:inherit;outline:none;resize:vertical;min-height:84px;line-height:1.5}
.canv-in .word .acts{display:flex;align-items:center;gap:22px;margin-top:22px}
.canv-in .word .acts .back{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-55);text-decoration:none}
.canv-in .word .acts .back:hover{color:var(--ink)}
.canv-in .stay-rows{margin-top:34px}
.canv-in .stay-rows .feed{display:grid;gap:10px;margin-top:16px}
.canv-in .stay-rows .big .when{margin:6px 0 0;font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55)}
@media(max-width:900px){.canv-in .stay-home{grid-template-columns:1fr}.canv-in .stay-pics .more{grid-template-columns:repeat(4,1fr)}}

/* ================ YOURS TO DO · the white row as the opening has it (10 Sep) ================ */
/* Jack, 10 Sep: "the white cards on welcome page are too long in width, much
   smaller please, its all the same as onboarding, should look same width and
   style". The register's white row, as the opening's months draw it: 680px
   at most, 18px above and below, the name at 17px, one italic line at
   13.5px, rows 10px apart; the number in a 34px gutter, Skip at the right.
   The count line above the list is gone at his word. */
.canv .yours .c-count{display:none}
.canv .yours .c-list{max-width:680px;gap:10px;padding-left:0}
.canv .yours .c-card{padding:0}
.canv .yours .c-words{padding:18px 20px 18px 0}
.canv .yours .c-words h3{margin-top:0;font-size:17px;line-height:1.15;letter-spacing:0}
.canv .yours .c-l{margin-top:3px;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.5;color:var(--ink-55);max-width:none}
/* The number inside the row, in its 34px gutter (the register's Number),
   so the row's edge is the column's. */
.canv .yours .c-edge{position:static;left:auto;width:auto;padding:0;grid-column:1;display:grid;place-items:center}
.canv .yours .c-edge span{width:34px;height:34px;font-size:20px}
.canv .yours .c-go{padding-right:20px}

/* ================ THE COVER · the photograph and the colour, after the name (10 Sep) ================ */
/* Jack, 10 Sep: "picking the design of the front cover ... after the naming
   step, we had this before". The old opening's two pickers: the photographs
   as small covers, the colours as a swatch, the pressed one ringed in forest
   as the sheet already rings a shot. The cover at the left follows the pick. */
.start.canvas .shots{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.start.canvas .shots button{width:92px;aspect-ratio:148/190;border:0;padding:0;cursor:pointer;background:var(--stone-2) center/cover no-repeat;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.start.canvas .shots button:hover{transform:translateY(-2px)}
.start.canvas .shots button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--forest)}
.start.canvas .swatch{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.start.canvas .swatch button{width:44px;height:44px;border:0;padding:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.start.canvas .swatch button:hover{transform:translateY(-2px)}
.start.canvas .swatch button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--forest)}
/* Their own (10 Sep): the last shot is an outlined box that takes their
   photograph; the last swatch is the colour wheel that opens the picker. */
.start.canvas .shots button.add{background-color:transparent;box-shadow:inset 0 0 0 1px var(--ink-20);color:var(--ink-55);display:grid;place-items:center;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background-size:cover;background-position:center}
.start.canvas .shots button.add:hover{box-shadow:inset 0 0 0 1px var(--ink-35);color:var(--ink)}
.start.canvas .shots button.add.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--forest)}
.start.canvas .swatch label.own{position:relative;width:44px;height:44px;cursor:pointer;background:conic-gradient(#C08C3D,#A0BAD4,#2B301D,#682114,#A0BAD4,#414042,#C08C3D);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.start.canvas .swatch label.own:hover{transform:translateY(-2px)}
.start.canvas .swatch label.own.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--forest)}
.start.canvas .swatch label.own input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* ================ GETTING THERE · the four ways as the four tweed buttons (10 Sep) ================ */
/* Jack, 10 Sep: "fix the getting there section too, the design is a mess.
   use this style" - the opening's four tweed buttons (Who is coming), one
   marked, drawn in the chapter's column. The room's Back word beneath. */
/* The chapter's .ask is the top's own flex column, aligned right, which
   pushed the ways 129px in from the question at 1920 (Jack, 10 Sep: "fix
   alignment here"). In the room it is the column, plain. */
.canv-in .ask{display:block;align-items:normal}
.canv-in .ask>.in{width:100%;max-width:none;margin:0}
.canv-in .astep .wh-ways{margin-top:6px}
.canv-in .astep .ask-h{margin-bottom:18px}
.canv-in .astep .astep-back{margin-top:26px}

/* ================ WHO IS COMING · the white row with a photograph, from the deck (10 Sep) ================ */
/* Jack's pick from public/design-2026/who-cards/, 10 Sep:
   {"shape":"rows","face":"forest","corner":"square","line":"words","out":"faded","add":"btn","cols":1,"gap":15,"facew":56,"namefs":17,"linefs":15,"faded":0.5}
   The register's white row with a photograph: 680px at most, rows 15px
   apart, the initial on forest in a 56px square, the name at 17px, one
   italic line at 15px, the not-yet-in at half; the link as the one filled
   button beneath with a quiet word beside it. Values copied from the deck. */
.canv-in .who{display:grid;grid-template-columns:1fr;gap:15px;max-width:680px}
.canv-in .who .p{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:14px;padding:18px 20px 18px 16px;width:100%;min-width:0;max-width:none;flex:none;background:#fff;border:0;border-radius:0;box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.canv-in .who .p:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(65,64,66,.05),0 20px 34px -22px rgba(65,64,66,.3)}
.canv-in .who .f{width:56px;height:56px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:26px;border-radius:0;animation:none;box-shadow:none}
.canv-in .who .f img{width:100%;height:100%;object-fit:cover}
.canv-in .who .t{display:flex;flex-direction:column;min-width:0}
.canv-in .who .n{font-family:var(--face);font-weight:400;font-size:17px;line-height:1.15;color:var(--ink)}
.canv-in .who .l{margin-top:3px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--ink-55)}
.canv-in .who .p.out{opacity:.5}
/* Their own link, at the right of the row (10 Sep). */
.canv-in .who .p .r{grid-column:3;justify-self:end;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);cursor:pointer;white-space:nowrap}
.canv-in .who .p .r:hover{color:var(--tweed)}
.canv-in .who .p{grid-template-columns:56px minmax(0,1fr) auto}
/* Somebody put in by name. */
/* Add someone asks in the pull-out (10 Sep), so the page keeps still. */
.sheet .sec .pills{margin-top:0;flex-wrap:wrap}
.sheet .sec .pills button{font-size:10px}
/* The question over a row of pills, and the answer already known. */
.sheet .sec .q{margin:0 0 10px;font:italic 400 15px/1.5 var(--serif);color:var(--ink-75)}
.sheet .sec .q.said{margin:10px 0 0;color:var(--ink-55)}
.canv-in .after button.word{background:none;border:0;cursor:pointer;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-55)}
.canv-in .after button.word:hover{color:var(--ink)}
.canv-in .after{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;max-width:680px}
.canv-in .after .word{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-55)}

/* ================ THINGS TO DO, THE SHORTLIST, THE ITINERARY · sizes and rows (10 Sep) ================ */
/* Things to do (Jack, 10 Sep: "cards a little smaller on this page"): four
   across once the column is wide enough for it, three until then. */
@media(min-width:1500px){.canv-in .grid4,.canv-in .dexgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}}
/* The shortlist's kept rows: the register's white row with a photograph,
   the values the opening's months use. */
/* The finished word above the list, ranged left with everything else. */
.canv-in .feed-done{text-align:left;max-width:680px;margin:0}
.canv-in .feed-done h2,.canv-in .feed-done p{text-align:left;margin-left:0}
.canv-in .kept .feed{display:grid;gap:10px;max-width:680px}
.canv-in .kept .big{grid-template-columns:56px minmax(0,1fr);gap:0 14px;padding:18px 20px 18px 16px;align-items:center}
.canv-in .kept .big .pic{grid-column:1;position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--stone-2)}
.canv-in .kept .big .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.canv-in .kept .big .side{grid-column:2}
.canv-in .kept .big .side h3{font-size:17px;line-height:1.15}
.canv-in .kept .big .side .words{margin-top:3px;font-size:13.5px;line-height:1.5}
/* The itinerary's build steps (Jack, 10 Sep: "its a mess and all the wrong
   size"): the five as white rows, the number in its gutter, not five tiles
   spilling out of the band. */
.canv-in .build{display:grid;grid-template-columns:1fr;gap:10px;max-width:680px;overflow:visible}
.canv-in .build a{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:0 14px;padding:18px 20px 18px 16px;background:#fff;border:0;border-radius:0;box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);color:var(--ink);text-decoration:none;min-height:0;width:auto;flex:none}
.canv-in .build a .n{grid-column:1;grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;margin:0;padding:0;background:none;color:var(--ink-35);font-family:var(--face);font-size:20px;font-weight:400;border-radius:0}
.canv-in .build a.done .n{background:var(--moss);color:var(--paper);font-size:0}
.canv-in .build a.done .n::after{content:"";width:8px;height:13px;border:solid var(--paper);border-width:0 1.8px 1.8px 0;transform:rotate(45deg);margin-top:-3px}
.canv-in .build a .t{grid-column:2;margin:0;font-family:var(--face);font-size:17px;line-height:1.15;color:var(--ink)}
.canv-in .build a i{grid-column:2;display:block;margin-top:3px;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.5;color:var(--ink-55)}

/* ================ THE ITINERARY · stops as white rows, and no stone bands (10 Sep) ================ */
/* Jack, 10 Sep: "random background everywhere" - the stone bands behind
   sections are gone in the room; the paper runs through, as on the opening
   and the welcome. */
.canv-in section.stone,.canv-in .stone,.canv-in .day.stone{background:transparent}
.canv-in .stone .tl::before{border-color:var(--stone-2)}
.canv-in section.stone{padding:clamp(24px,3vh,36px) 0}
/* The next band too: a rule above it, no ground. */
.canv-in > section.next{background:transparent;padding:clamp(26px,3.4vw,38px) 0 0;border-top:1px solid var(--ink-20)}
/* "look at the size of this image": the stay's photograph, which a day
   never had before, ran the width of the column. Every stop is now the
   register's white row with a photograph: a 56px square, the name at 17px,
   one italic line; the day's number in a 34px gutter on the dashed line. */
.canv-in .tl{max-width:680px;margin:0}
.canv-in .tl::before{left:16px}
.canv-in .stop-row{grid-template-columns:34px minmax(0,1fr);gap:0 14px;padding-bottom:10px;align-items:start}
.canv-in .stop-row .n{width:34px;height:34px;font-size:16px}
.canv-in .stop-row .card{grid-column:2;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:18px 20px 18px 16px;background:#fff;box-shadow:0 1px 2px rgba(65,64,66,.05),0 8px 18px -14px rgba(65,64,66,.22);max-width:none;width:100%}
.canv-in .stop-row .card .ph,.canv-in .stop-row .ph{grid-column:1;grid-row:1;position:relative;width:56px;height:56px;max-width:56px;margin:0;aspect-ratio:1;overflow:hidden;background:var(--stone-2);border:0;padding:0}
.canv-in .stop-row .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.canv-in .stop-row .ph .tag{display:none}
.canv-in .stop-row .card .body,.canv-in .stop-row .body{grid-column:2;grid-row:1;padding:0;min-width:0}
.canv-in .stop-row .part{font-size:9.5px;letter-spacing:.22em}
.canv-in .stop-row h3{margin-top:3px;font-size:17px;line-height:1.15;letter-spacing:0}
.canv-in .stop-row .place{margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--ink-55)}
.canv-in .stop-row .find{margin-top:4px;font-size:13.5px}
.canv-in .stop-row .card .grip{grid-column:3;grid-row:1;align-self:center;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35)}
.canv-in .stop-row.plus{grid-template-columns:34px minmax(0,1fr)}
.canv-in .stop-row.plus .n{font-size:20px}
.canv-in .stop-row.plus .body{padding-top:6px}
.canv-in .gap-row{max-width:680px}

/* ================ SEVERAL PLACES · the rows on the opening, the route, the pressed row (10 Sep) ================ */
/* The places listed on the opening: the white row with the number in its
   gutter, the boxed pair for the nights at the right, a quiet word beneath. */
.start .q .feed .big.stayrow{grid-template-columns:34px minmax(0,1fr) auto;align-items:center}
.start .q .feed .big.stayrow .n{grid-column:1;width:34px;height:34px;display:grid;place-items:center;font-family:var(--face);font-size:20px;color:var(--ink-35)}
.start .q .feed .big.stayrow .side{grid-column:2}
.start .q .feed .big.stayrow .acts{grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0;padding:0}
.start .q .feed .big.stayrow .acts{flex-direction:row;align-items:center;gap:16px}
.start .q .feed .big.stayrow .or{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-35);text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer;white-space:nowrap}
.start .q .feed .big.stayrow .or:hover{color:var(--ink)}
.start .q .feed{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:680px;align-items:stretch;justify-items:stretch}
.start .q .feed .big.stayrow{width:100%;max-width:none}
/* The route on the welcome and on Accommodation: the same rows; on
   Accommodation each is a button and the pressed one wears the August ring. */
.canv-in .route{margin-bottom:26px}
.canv-in .kept button.big{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:0}
.canv-in .kept button.big.on{outline:2px solid var(--august);outline-offset:2px}

/* ================ WHO SLEEPS WHERE · the cottage rows with faces, the filling sheet (10 Sep) ================ */
/* Jack, 10 Sep: "assign a guest to a property ... and for each cottage they
   can also assign the rooms". The cottage rows carry the faces of who is in
   them; the organiser's rows are buttons; a guest's own row wears the
   August ring and "yours". The sheet lists everyone with the rooms as the
   option picker. */
.canv-in .stay-rows button.big{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:0}
.canv-in .stay-rows .big.on{outline:2px solid var(--august);outline-offset:2px}
.canv-in .stay-rows .big h3 .yours{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-55)}
.canv-in .stay-rows .big .who{margin:8px 0 0;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-55)}
.canv-in .stay-rows .big .who .faces{display:inline-flex}
.canv-in .stay-rows .big .who .faces b{width:24px;height:24px;margin-left:-6px;display:grid;place-items:center;border-radius:50%;background:var(--forest);color:var(--paper);font:400 11px var(--face);box-shadow:0 0 0 2px #fff;overflow:hidden}
.canv-in .stay-rows .big .who .faces b:first-child{margin-left:0}
.canv-in .stay-rows .big .who .faces b img{width:100%;height:100%;object-fit:cover}
.sheet .asg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 0;border-bottom:1px solid var(--ink-20)}
.sheet .asg b{font-family:var(--face);font-weight:400;font-size:17px}
.sheet .asg b i{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-55)}
.sheet .asg .pills{display:flex;flex-wrap:wrap;gap:6px}
.sheet .asg .pills button{min-height:32px;padding:0 10px;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink-20);background:none;color:var(--ink-75);cursor:pointer}
.sheet .asg .pills button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* A room named by hand (10 Sep): the register's field, in the row. */
.sheet .asg input{flex:1 1 180px;min-width:0;height:36px;padding:0 12px;border:1px solid var(--ink);background:var(--paper);font:400 15px var(--serif);color:var(--ink)}
.sheet .asg input:focus{outline:2px solid var(--august);outline-offset:2px}
.sheet .asg b i{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-35)}

/* ================ THE STAYS CHAPTER · the site small card under .st-cards and .st-near (the briefs) ================ */
.st-cards .c{flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.st-cards .c img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.st-cards .c:hover img{transform:scale(1.035)}
.st-cards .c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58) 0,rgba(0,0,0,.14) 42%,rgba(0,0,0,0) 62%);pointer-events:none}
.st-cards .c .t{position:absolute;left:20px;right:20px;bottom:20px}
.st-cards .c .k{display:block;margin-bottom:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.st-cards .c h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.12;text-wrap:balance}
.st-cards .c .w{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:rgba(255,255,255,.9)}
.st-near .c{flex:0 0 auto;scroll-snap-align:start;display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);color:#fff}
.st-near .c img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.st-near .c:hover img{transform:scale(1.035)}
.st-near .c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58) 0,rgba(0,0,0,.14) 42%,rgba(0,0,0,0) 62%);pointer-events:none}
.st-near .c .t{position:absolute;left:20px;right:20px;bottom:20px}
.st-near .c .k{display:block;margin-bottom:10px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.st-near .c h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.12;text-wrap:balance}
.st-near .c .w{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;font-size:15.5px;color:rgba(255,255,255,.9)}

/* ================ THE STAYS CHAPTER · S3 and what is nearby (the two briefs, 10 Sep) ================ */
/* docs/BRIEF-room-stays.md (S3) and docs/BRIEF-room-stays-nearby.md: the
   rules verbatim from public/design-2026/opening/stays.html and
   stays-nearby.html. */
.st-l{font-style:italic;font-size:17px;line-height:1.55;color:var(--ink-75);margin:0 0 34px;max-width:56ch}
.st-l b{font-style:normal;font-weight:400;color:var(--ink)}
.st-l u{text-decoration:none;border-bottom:1px solid var(--ink-35);color:var(--ink);font-style:normal}
.st-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:start}
.st-photo{position:relative;aspect-ratio:3/2;background:var(--stone-2);overflow:hidden}
.st-photo img{width:100%;height:100%;object-fit:cover;display:block}
.st-photo .st-cap{position:absolute;left:12px;bottom:12px;background:rgba(255,255,247,.92);font:italic 400 12.5px var(--serif);color:var(--ink-75);padding:5px 10px}
.st-k{font:600 9.5px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-55);margin:0 0 12px}
.st-name{font:400 28px/1.15 var(--face);margin:0 0 4px}
.st-addr{font:italic 400 15px var(--serif);color:var(--ink-55);margin:0 0 18px}
.st-desc{font:400 16px/1.6 var(--serif);margin:0 0 20px;max-width:46ch}
.st-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 22px;margin:0;font-size:15.5px;border-top:1px solid var(--stone-2);padding-top:12px}
.st-facts dt{font-style:italic;color:var(--ink-55)}
.st-facts dd{margin:0}
.st-facts dd.todo{color:var(--tweed)}
.st-links{margin:16px 0 0;display:flex;gap:18px;font-size:15px}
.st-links a{color:var(--ink);border-bottom:1px solid var(--ink-35);text-decoration:none}
.st-acts{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.st-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border:1px solid var(--tweed);color:var(--tweed);background:transparent;font:400 14px var(--sans);cursor:pointer;transition:.4s;white-space:nowrap}
.st-btn:hover{background:var(--tweed);color:var(--shell)}
.st-btn.fill{background:var(--tweed);color:var(--shell)}
.st-btn.fill:hover{background:var(--cask)}
.st-quiet{font:italic 400 14.5px var(--serif);color:var(--ink-55);cursor:pointer;background:none;border:0;padding:0}
.st-quiet:hover{color:var(--ink)}
.st-s{margin-top:44px}
.st-s h2{font:400 24px var(--face);margin:0 0 4px}
.st-s .l{font-style:italic;font-size:15px;color:var(--ink-55);margin:0 0 16px}
/* the cottages */
.st-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.st-cards .c{aspect-ratio:6/7;width:auto;cursor:pointer}
.st-cards .c .t{left:12px;right:12px;bottom:12px}
.st-cards .c h3{font-size:15px}
.st-cards .c .w{font-size:11.5px;margin-top:3px;line-height:1.3}
.st-cards .c .k{display:none}
.st-cards .c.on{outline:3px solid var(--august);outline-offset:-3px}
/* their words */
.st-words{columns:2;column-gap:40px;margin:0;padding:0;list-style:none}
.st-words li{break-inside:avoid;font:italic 400 16.5px/1.55 var(--serif);color:var(--ink-75);padding:0 0 16px 18px;border-left:1px solid var(--stone-2);margin:0 0 16px}
.st-words li::before{content:"\201C";font-family:var(--script);font-size:26px;line-height:0;color:var(--ink-35);margin-right:4px;vertical-align:-8px}
/* what guests said */
.st-rev{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin:0;padding:0;list-style:none}
.st-rev li{display:grid;gap:6px}
.st-rev b{font:400 17px var(--face)}
.st-rev .stars{font:600 9px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55);display:flex;gap:10px;align-items:center}
.st-rev .stars i{display:inline-flex;gap:3px}
.st-rev .stars i::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--august);box-shadow:11px 0 0 var(--august),22px 0 0 var(--august),33px 0 0 var(--august),44px 0 0 var(--august);margin-right:44px}
.st-rev .stars i.four::before{box-shadow:11px 0 0 var(--august),22px 0 0 var(--august),33px 0 0 var(--august),44px 0 0 var(--stone-2)}
.st-rev .stars i.three::before{box-shadow:11px 0 0 var(--august),22px 0 0 var(--august),33px 0 0 var(--stone-2),44px 0 0 var(--stone-2)}
.st-rev .stars i.two::before{box-shadow:11px 0 0 var(--august),22px 0 0 var(--stone-2),33px 0 0 var(--stone-2),44px 0 0 var(--stone-2)}
.st-rev .stars i.one::before{box-shadow:11px 0 0 var(--stone-2),22px 0 0 var(--stone-2),33px 0 0 var(--stone-2),44px 0 0 var(--stone-2)}
.st-rev p{margin:0;font:400 15px/1.55 var(--serif);color:var(--ink-75);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.st-rev p.open{display:block}
.st-rev u{font:italic 400 13.5px var(--serif);color:var(--ink-55);text-decoration:none;border-bottom:1px solid var(--ink-35);cursor:pointer;justify-self:start}
.st-rev li.all{display:block;font:italic 400 14.5px var(--serif);color:var(--ink-55);margin:18px 0 0;grid-column:1/-1}
.st-rev li.all a{color:var(--ink);border-bottom:1px solid var(--ink-35);text-decoration:none}
@media(max-width:900px){.st-top{grid-template-columns:1fr}.st-words{columns:1}.st-rev{grid-template-columns:1fr}.st-cards{grid-template-columns:repeat(3,1fr)}}
/* where it is, and what is nearby */
.w-map{width:100%;height:360px;background:#EEEAE4;border:1px solid var(--stone-2)}
.w-here{position:absolute;transform:translate(-50%,-100%);pointer-events:none;z-index:5}
.w-here b{display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.04em;background:#C08C3D;color:#fff;padding:7px 12px 6px;white-space:nowrap}
.w-here i{display:block;width:0;height:0;margin:0 auto;border:6px solid transparent;border-top-color:#C08C3D;border-bottom:0}
.w-tabs{display:flex;gap:22px;margin:22px 0 16px;font:400 16px var(--serif);color:var(--ink-55);flex-wrap:wrap}
.w-tabs span{cursor:pointer;padding-bottom:4px;border-bottom:1px solid transparent;display:inline-flex;gap:8px;align-items:baseline}
.w-tabs span.on{color:var(--ink);border-color:var(--ink)}
.w-tabs span i{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:1px}
.w-tabs span em{font:400 12px var(--sans);color:var(--ink-35);font-style:normal}
.st-near{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st-near .c{aspect-ratio:6/7;width:auto}
.st-near .c .t{left:12px;right:12px;bottom:12px}
.st-near .c .k{display:block;font-size:9px;margin-bottom:5px}
.st-near .c h3{font-size:15px}
.st-near .c .w{font-size:11.5px;margin-top:3px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-near .c.lit{outline:3px solid #C08C3D;outline-offset:-3px}
.st-near .c:not(:has(img)){background:var(--stone)}
.st-near .c:not(:has(img)) .sh{display:none}
.st-near .c:not(:has(img)) .t{color:var(--ink)}
.st-near .c:not(:has(img)) .t .k,.st-near .c:not(:has(img)) .t .w{color:var(--ink-55)}
.w-none{font:italic 400 15px var(--serif);color:var(--ink-55);margin:8px 0 0}
.w-more{margin:14px 0 0;font:italic 400 15px var(--serif);color:var(--ink-55)}
.w-more u{text-decoration:none;border-bottom:1px solid var(--ink-35);color:var(--ink);cursor:pointer}
.st-groc .c{cursor:pointer}
/* the pull-out */
.sheet .hero{height:min(46vh,420px)}
.sheet .hero.none{height:120px;background:var(--stone)}
.sheet .said{margin:12px 0 0;font:400 17px var(--face)}
.sheet .note{margin:6px 0 0;font:italic 400 14px var(--serif);color:var(--ink-55)}

/* ================ THE BOOK, AS THE PHOTOGRAPH · the opening's left column (the brief, 10 Sep) ================ */
/* docs/BRIEF-opening-book.md: the real product photograph of the guidebook
   with only the front face of the cover redrawn as the trip's own. The
   rules are the sheet's (public/design-2026/opening/book-photo.html),
   verbatim; the column crops the photograph rather than fitting it. */
.start.canvas .open>.side{position:relative;padding:0}
.start.canvas .bookframe{position:absolute;inset:0;width:auto;max-width:none;height:auto;aspect-ratio:auto;margin:0;overflow:hidden;background:transparent;box-shadow:none;z-index:0}
.bk-shot{position:absolute;overflow:hidden;background:transparent}
.bk-shot .bk-plane{position:absolute;left:0;top:0;transform-origin:0 0}
.bk-shot img.bk-base{display:block;width:100%;height:auto}
.bk-face{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.bk-cover{position:absolute;inset:0;color:#fff}
.bk-cover span{position:absolute;left:0;right:0;text-align:center;display:block;line-height:1;white-space:nowrap}
.bk-cover .bk-kick,.bk-cover .bk-foot{font-family:Jost,var(--sans);font-weight:600;text-transform:uppercase}
.bk-cover .bk-name{font-family:Larken,var(--face);font-weight:400;letter-spacing:-.005em;white-space:normal}
.bk-cover .bk-pic{position:absolute;overflow:hidden;background:rgba(0,0,0,.10);left:auto;right:auto;text-align:left}
.bk-cover .bk-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bk-light{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none}
.bk-lift{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none}
.bk-grain{position:absolute;inset:0;mix-blend-mode:overlay;pointer-events:none;background-repeat:repeat}
.bk-blur{position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(var(--bk-blur,1px))}
/* While the guide is made, the photograph breathes as the drawn cover did. */
.start.canvas .bookframe.making .bk-shot{animation:bt-breathe 1.6s var(--bt-ease) infinite}
@media(prefers-reduced-motion:reduce){.start.canvas .bookframe.making .bk-shot{animation:none}}
@media(max-width:1000px){.start.canvas .open>.side{padding:0}.start.canvas .bookframe{position:relative;inset:auto;height:min(46vh,380px)}}
/* One place's own dates, in the room's pull-out on the opening (10 Sep):
   the calendar as the first screen has it, and the two buttons. */
.sheet.bt-dates .calwrap{margin-top:18px}
.sheet.bt-dates .say{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
/* The sheet's own buttons are painted for a dark ground; in the room's
   pull-out they are the tweed button, whole (Jack, 10 Sep: "button here is
   faded"). Every property the other rule set is reset, not one of them. */
.canv-in .sheet .say .btn,.sheet.bt-dates .say .btn{color:var(--tweed);background:transparent;border:1px solid var(--tweed);box-shadow:none;opacity:1}
.canv-in .sheet .say .btn:hover:not([disabled]),.sheet.bt-dates .say .btn:hover:not([disabled]){background:var(--tweed);color:var(--shell)}
.canv-in .sheet .say .btn[disabled],.sheet.bt-dates .say .btn[disabled]{opacity:.4;cursor:default}
.sheet.bt-dates .note{margin:10px 0 0;font:italic 400 14px var(--serif);color:var(--ink-55)}
/* The room's left column wears the same photograph, in the book's own place:
   the contents still come up over it when the book is pressed. */
.canv-book{position:relative;aspect-ratio:148/190;max-width:min(320px,74%);background:transparent;box-shadow:none;overflow:hidden}
.canv-book .cover{display:none}
@media(max-width:1000px){.canv-book{aspect-ratio:148/190;max-width:min(200px,50%)}}

/* ================ THE LISTING CARD IN THE ROOM · the hover, the chip, the shade (10 Sep) ================ */
/* Jack, 10 Sep. The card lifted 4px on hover, which opened a gap between it
   and the yes and no beneath; the whole rule is reset, not one property of
   it, so the photograph still creeps and nothing else moves. */
.canv-in .card:hover{transform:none}
.canv-in .card:hover .c img,.canv-in .card:hover .c video{transform:scale(1.03)}
/* The kind - ATTRACTIONS, CAFE - is a label, not a number: the chip's big
   Larken figure is for a count (SLEEPS 16), so a chip with no unit beside it
   takes the site's own small capitals instead. */
.canv-in .card .price:has(i:empty){padding:5px 9px}
.canv-in .card .price:has(i:empty) b{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.1}
/* A little more shade over the photograph, so the name and the chip read on
   a bright one. The card's own gradient, deepened. */
.canv-in .card .c .sh{background:linear-gradient(to top,rgba(0,0,0,.68) 0,rgba(0,0,0,.26) 45%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.10) 100%)}

/* ================ THE PULL-OUTS · only the open one moves (10 Sep) ================ */
/* body.sheet-open .sheet slid every sheet on the page into view. The stays
   chapter holds three - the cottage, the shop and the place - so the last
   one in the markup, empty because nothing had opened it, landed over the
   one that had. The open one carries .on, and only that one moves. */
body.sheet-open .sheet:not(.on){transform:translateX(102%);pointer-events:none}
body.sheet-open .scrim:not(.on){opacity:0;visibility:hidden;pointer-events:none}

/* ================ THE DRAWER · as the Concierge moves (10 Sep) ================ */
/* Jack, 10 Sep: "the drawer should slide out exactly like the concierge on
   our site". The Desk's own numbers, from _desk.css: 600px, a .42s slide
   from the right, its veil at the same speed, the same shadow, and the
   words rising in a beat behind the panel. */
.sheet{width:min(600px,100vw);box-shadow:0 30px 80px rgba(65,64,66,.18);transition:transform .42s var(--ease)}
body.sheet-open .sheet.on{transform:none;transition:transform .42s var(--ease)}
.scrim{transition:opacity .42s var(--ease),visibility 0s .42s}
body.sheet-open .scrim.on{transition:opacity .42s var(--ease),visibility 0s}
/* The head and the words arrive behind the panel, as the Desk's do. */
.sheet .hero,.sheet .body{opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
body.sheet-open .sheet.on .hero{opacity:1;transform:none;transition-delay:.10s}
body.sheet-open .sheet.on .body{opacity:1;transform:none;transition-delay:.14s}
@media(prefers-reduced-motion:reduce){
  .sheet,.scrim,.sheet .hero,.sheet .body{transition-duration:.01ms}
  .sheet .hero,.sheet .body{transform:none;opacity:1}
}

/* ================ GOOD TO KNOW · written where it is read (10 Sep) ================ */
/* The organiser fills the chapter in on the page the guests read (Jack,
   10 Sep). A note of their own stands apart from the prompts by a rule at
   its edge, not by another box. */
.note.own{box-shadow:inset 3px 0 0 var(--tweed)}
.note.own .nacts>button:last-child{color:var(--ink-55)}
.note.own .nacts>button:last-child:hover{color:var(--ink)}
/* The prompt's row of two, and the door to their own under it. */
.canv-in .notes+.after,.notes+.after{margin-top:22px;display:flex;align-items:center;flex-wrap:wrap;gap:14px}

/* ================ THE DRIFT · the opening's left column (docs/BRIEF-opening-drift.md) ================ */
/* Our own photographs drifting slowly up the opening's left column, in place
   of the book. The rules are the sheet's (public/design-2026/opening/
   drift.html, section S) on the chosen settings: the column 630px, one pass
   75 seconds, each picture 24 per cent of the column and 4 by 5 tall, square
   corners, the lift at 24 per cent, no fade at the ends, full colour.

   The column keeps the page's own class and takes the sheet's rules. The
   field is named where it lives because the column already says its children
   stand in flow (.start.canvas .side > *), which would collapse it. */
.start.canvas .open>.side{position:relative;overflow:hidden;background:var(--shell);width:var(--bt-side);padding:0;--dr-side:var(--bt-side)}
.start.canvas .open>.side .dr-field{position:absolute;inset:0;overflow:hidden;z-index:0}
.dr-strip{position:absolute;left:0;right:0;top:0;
  animation:dr-up 75s linear infinite;will-change:transform}
@keyframes dr-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
.dr-strip figure{position:absolute;margin:0;overflow:hidden;background:var(--stone-2);
  box-shadow:0 5.3px 10.6px -5.3px rgba(43,48,29,.34), 0 .7px 1.7px -1px rgba(43,48,29,.20)}
.dr-strip img{display:block;width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){.dr-strip{animation:none}}
/* Below the fold of the wide layout the column is the width of the screen
   and stands on its own, as the sheet has it. */
@media(max-width:1000px){
  .start.canvas .open>.side{width:auto;height:520px;padding:0;--dr-side:100vw}
}

/* ================ THE ITINERARY, THE DRAWN LINE (docs/BRIEF-days-timeline.md) ================ */
/* Jack, 10 Sep: the days page as it stood was far too busy. The Designer's
   answer is one drawn line down the page that fills as you scroll, a day
   announced as a station on it, and a stop marked by nothing but its time in
   the gutter. The rules below are the sheet's own
   (public/design-2026/opening/days.html, section A), on the chosen settings:
   gutter 132, air 79, picture 390, drift 20, the mark forest.

   There is not a rule, a border or a rounded corner in it. The one line that
   stays is the timeline, and it earns its place by moving. */
:root{--it-gut:132px;--it-air:79px;--it-pic:390px;--it-mark:#2B301D}
.it-days{margin-top:70px}
.it-day{position:relative;padding-left:var(--it-gut)}
.it-day+.it-day{margin-top:calc(var(--it-air) * 1.1)}
.it-track{position:absolute;left:calc(var(--it-gut) - 52px);top:0;bottom:0;width:1px;background:var(--stone-2)}
.it-fill{position:absolute;left:0;top:0;width:1px;height:0;background:var(--it-mark)}
.it-dayhead{position:relative;margin:0 0 calc(var(--it-air) * .75)}
.it-dayhead h2{font:400 min(40px, 28px + (40px - 28px) * 0.6)/1 var(--face);margin:0;letter-spacing:-.01em}
.it-dayhead .lab{display:block;font:500 10.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-55);margin:0 0 10px}
.it-station{position:absolute;left:calc(var(--it-gut) * -1 + 52px - 19px);top:2px;width:38px;height:38px;
  background:var(--it-mark);color:var(--paper);display:grid;place-items:center;font:500 13px var(--sans)}
.it-stop{position:relative;padding-bottom:var(--it-air)}
.it-when{position:absolute;left:calc(var(--it-gut) * -1);top:3px;width:calc(var(--it-gut) - 70px);text-align:right;
  font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
/* The title is a block in the 1fr column, so it is as wide as the column
   whatever it says - and the hover line below draws itself on the box, not
   the words, which put a rule across the whole day. It takes the width of
   what it says, and wraps at the column as it did. */
.it-words h3{font:400 22px var(--face);margin:0 0 4px;line-height:1.15;
  width:max-content;max-width:100%}
.it-words p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-75);max-width:56ch}
.it-words p.small{font-style:italic;font-size:14.5px;color:var(--ink-55);margin-top:5px}
.it-shot{overflow:hidden;background:var(--stone-2);width:var(--it-pic);aspect-ratio:4/5;margin-top:16px}
.it-shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06) translateY(var(--drift,0px));will-change:transform}
.it-add{font:italic 400 15px var(--serif);color:var(--ink-55);padding-bottom:calc(var(--it-air) * .3);cursor:pointer}
.it-add u{text-decoration:none;box-shadow:inset 0 -1px 0 var(--ink-35);font-style:normal}
.it-go{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 24px;background:var(--tweed);color:var(--shell);
  border:0;font:400 14.5px var(--sans);cursor:pointer;transition:background .3s}
.it-go:hover{background:var(--cask)}
.it-go i{font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.72;font-style:normal}
.it-in{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.it-in.here{opacity:1;transform:none}
/* the drawer */
.it-scrim{position:fixed;inset:0;z-index:40;background:rgba(65,64,66,.34);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.it-drawer{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(460px,100%);background:var(--paper);
  transform:translateX(102%);transition:transform .45s var(--ease);overflow-y:auto;padding:34px 34px 40px}
body.it-open .it-scrim{opacity:1;visibility:visible;transition:opacity .35s var(--ease),visibility 0s}
body.it-open .it-drawer{transform:none}
body.it-open{overflow:hidden}
.it-drawer h2{font:400 27px var(--face);margin:0 0 6px}
.it-drawer h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.1em}
.it-drawer .lead{font:italic 400 15.5px var(--serif);color:var(--ink-55);margin:0 0 26px}
.it-drawer .x{position:absolute;top:22px;right:26px;background:none;border:0;cursor:pointer;
  font:500 10px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-55)}
.it-pick{display:block;width:100%;text-align:left;background:none;border:0;padding:16px 0;cursor:pointer;font:inherit;color:inherit}
.it-pick b{display:block;font:400 19px var(--face)}
.it-pick i{display:block;font:italic 400 14px var(--serif);color:var(--ink-55);margin-top:2px}
.it-pick em{float:right;font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tweed);font-style:normal;margin-top:6px}
.it-pick:hover b{box-shadow:inset 0 -1px 0 var(--ink-35)}
@media(prefers-reduced-motion:reduce){.it-in{opacity:1;transform:none;transition:none}.it-shot img{transform:none}.it-drawer{transition:none}}
@media(max-width:900px){:root{--it-gut:86px}}

/* The site already has an it- family (resources/css/app.css, an older
   itinerary elsewhere) and two of its names are these. .it-day sets a margin
   and .it-stop is a three-column grid with a rule across its top; here they
   are named where they live, and every property those two set is put back,
   not half of it. */
.canv-in .it-day{margin-top:0;position:relative;padding-left:var(--it-gut)}
.canv-in .it-day+.it-day{margin-top:calc(var(--it-air) * 1.1)}
.canv-in .it-stop{display:block;grid-template-columns:none;gap:0;padding:0 0 var(--it-air);border-top:0;align-items:initial}
/* The stop is the whole thing, and it is what opens: there is no card to
   press any more, and the organiser drags a stop rather than its number. */
.it-stop[role=button]{cursor:pointer}
.it-stop[role=button]:hover .it-words h3{box-shadow:inset 0 -1px 0 var(--ink-35)}
.it-stop[draggable=true]:active{cursor:grabbing}
/* What is left standing on this page carries no corner and no rule either:
   the whole page is one design (the brief). */
.canv-in .minis .mini,.canv-in .trip-map,.canv-in .trip-map>*{border-radius:0}
.canv-in .minis .mini,.canv-in .minis .mini .band,.canv-in .minis .mini *{border:0}

/* ================ THE OPENING AS A WIZARD (docs/BRIEF-opening-wizard.md) ================ */
/* One question at a time, its answers under it, and nothing else on the
   screen. The flow is untouched: the same questions in the same order with
   the same words. Only the presentation changes.

   Off the screen: the step count, the line of answers so far, the line under
   the question, the letters beside the answers, the small print, the keyboard
   hint. The hint's words stay in the page, switched off, because two or three
   screens may want them back one at a time. */
/* 460ms, which is the pace on the sheet Jack has been tuning against
   (public/design-2026/opening/wizard.html; its tuner reads 460ms in
   both of the screenshots he sent on 11 September). At 900 the arrival
   ran for 1.035 seconds - measured off the built page - and a screen
   that takes a second to appear reads as the page struggling rather
   than as the page moving. */
:root{--wz-pace:460ms;--wz-ease:cubic-bezier(.22,.8,.24,1);--wz-col:720px;
  --wz-qsize:38px;--wz-qweight:400;--wz-qtrack:-.012em;
  --wz-asize:23px;--wz-aweight:400;--wz-atrack:-.008em}

/* The screens carrying photographs need the room to carry them: the region
   grid, what you enjoy, the places that suit, the kinds and the cover are all
   drawn wide, and the wizard's own column would squeeze them (the brief). */
.start.canvas .open.wide>.qs{--wz-col:1060px}

/* The answering side: one column, centred, with room for the bar. */
.start.canvas .open>.qs{display:grid;grid-template-columns:min(var(--wz-col),100%);justify-content:center;
  align-content:center;padding:70px var(--edge) 150px;min-height:100vh}
.start.canvas .open>.qs .q{position:relative;width:100%;text-align:center}
.start.canvas .open>.qs .q h1{font-family:var(--face);font-weight:var(--wz-qweight);font-size:var(--wz-qsize);
  line-height:1.08;letter-spacing:var(--wz-qtrack);margin:0;max-width:none;text-align:center}
.start.canvas .open>.qs .q h1 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.08em}
/* The line under the question is kept and not drawn. */
.start.canvas .open>.qs .q .hint{display:none}
.start.canvas .open>.qs .q .pills,.start.canvas .open>.qs .q .hf-ways,
.start.canvas .open>.qs .q .feed,.start.canvas .open>.qs .q .tiles,
.start.canvas .open>.qs .q .cards,.start.canvas .open>.qs .q .calwrap{margin-top:42px}

/* An answer is a button, and only its own outline moves under the mouse:
   fading the others made a mouse crossing the screen look like an event. */
.start.canvas .open>.qs .q .pills{display:grid;gap:10px;width:100%;justify-content:stretch}
.start.canvas .open>.qs .q .pills button{display:flex;align-items:center;justify-content:center;
  width:min(520px,100%);margin:0 auto;min-height:58px;height:auto;padding:0 22px;
  background:var(--paper);border:0;border-radius:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--ink-20);
  font-family:var(--face);font-weight:var(--wz-aweight);font-size:var(--wz-asize);
  letter-spacing:var(--wz-atrack);text-transform:none;color:var(--ink);
  transition:box-shadow .25s var(--wz-ease),background .25s var(--wz-ease)}
.start.canvas .open>.qs .q .pills button:hover,.start.canvas .open>.qs .q .pills button.on{box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.start.canvas .open>.qs .q .pills button.on{background:var(--stone)}

/* The answers that carry a line under them. */
.start.canvas .open>.qs .q .hf-ways{display:grid;gap:14px;justify-items:center}
.start.canvas .open>.qs .q .hf-way{position:relative;display:grid;gap:5px;width:min(560px,100%);
  background:var(--paper);border:0;border-radius:0;padding:16px 22px;cursor:pointer;text-align:left;
  box-shadow:inset 0 0 0 1px var(--ink-20);transition:box-shadow .25s var(--wz-ease),background .25s var(--wz-ease)}
.start.canvas .open>.qs .q .hf-way:hover,.start.canvas .open>.qs .q .hf-way.on{box-shadow:inset 0 0 0 1px var(--ink)}
.start.canvas .open>.qs .q .hf-way.on{background:var(--stone)}
.start.canvas .open>.qs .q .hf-way b{font-family:var(--face);font-weight:var(--wz-aweight);font-size:var(--wz-asize);
  letter-spacing:var(--wz-atrack);color:var(--ink)}
.start.canvas .open>.qs .q .hf-way i{font:italic 400 15.5px/1.45 var(--serif);color:var(--ink-55)}

/* Every box you type into is the same shape as a button. The page's own
   field already draws the outline, so the wrapper is the box and the input
   sits in it with nothing of its own: drawing both gave a box inside a box
   (Jack, 11 Sep). */
.start.canvas .open>.qs .q .an-pair{display:grid;justify-items:center;max-width:none;margin-top:42px}
.start.canvas .open>.qs .q .an-fld,.start.canvas .open>.qs .q .field{width:min(520px,100%);min-height:58px;height:auto;
  padding:0 22px;background:var(--paper);border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--ink-20);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .25s var(--wz-ease)}
.start.canvas .open>.qs .q .an-fld:focus-within,.start.canvas .open>.qs .q .field:focus-within{border:0;box-shadow:inset 0 0 0 1px var(--ink)}
.start.canvas .open>.qs .q .an-fld input,.start.canvas .open>.qs .q .field input{width:100%;height:auto;min-height:0;
  padding:0;text-align:center;background:none;border:0;box-shadow:none;outline:none;color:var(--ink);
  font-family:var(--face);font-weight:var(--wz-aweight);font-size:var(--wz-asize)}
.start.canvas .open>.qs .q .an-fld input::placeholder,.start.canvas .open>.qs .q .field input::placeholder{color:var(--ink-35);font-style:normal}

/* The move: rise, 900ms. */
.start.canvas .open>.qs .q.in{animation:wz-in calc(var(--wz-pace) * 1.15) var(--wz-ease) both}
.start.canvas .open>.qs .q.in.back{animation-name:wz-inback}
@keyframes wz-in{from{opacity:0;transform:translateY(30px)}}
@keyframes wz-inback{from{opacity:0;transform:translateY(-30px)}}
@media(prefers-reduced-motion:reduce){.start.canvas .open>.qs .q.in{animation:none}}

/* ---- the bar at the foot ---- */
.wz-feet{position:fixed;left:var(--bt-side);right:0;bottom:0;z-index:100;display:flex;
  align-items:center;justify-content:space-between;gap:20px;padding:14px 40px;
  background:var(--paper);box-shadow:0 -1px 0 var(--ink-20)}
.wz-feet .b{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:11px;
  font:500 10px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-35);transition:color .3s}
.wz-feet .b:hover{color:var(--ink)}
.wz-feet .b s{display:block;width:24px;height:1px;background:currentColor;text-decoration:none;transition:width .3s var(--wz-ease)}
.wz-feet .b:hover s{width:36px}
.wz-feet .b[disabled]{opacity:.3;cursor:default}
.wz-feet .said{flex:1;text-align:center;font:italic 400 15px var(--serif);color:var(--ink-55);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-feet .wz-on{height:48px;display:inline-flex;align-items:center;padding:0 26px;background:var(--ink);color:var(--paper);
  border:0;cursor:pointer;font-family:var(--face);font-size:17px;transition:background .3s}
.wz-feet .wz-on:hover{background:var(--tweed)}
.wz-feet .wz-on[disabled]{opacity:.35;cursor:default}
/* Only one way forward: the screen's own Next is not drawn while the bar is,
   and neither is its own Back. Everything else in that row stays - Add
   another place, Back to the list, leave it open - because hiding the row
   itself took all of them with it (Jack, 11 Sep). */
.start.canvas .open>.qs .q .acts .btn,.start.canvas .open>.qs .q .rs-foot .btn{display:none}
.start.canvas .open>.qs .q .acts{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.start.canvas .open>.qs .q .acts:empty{display:none}
@media(max-width:900px){.wz-feet{left:0}}

/* Everything on the screen sits on one middle (Jack, 11 Sep). A block
   narrower than the column had been left flush against its left edge, which
   is how the calendar came to sit eighty pixels off. */
.start.canvas .open>.qs .q>*{margin-left:auto;margin-right:auto}
.start.canvas .open>.qs .q .calwrap,.start.canvas .open>.qs .q .cal,
.start.canvas .open>.qs .q .rs-foot,.start.canvas .open>.qs .q .rs-cards,
.start.canvas .open>.qs .q .cards,.start.canvas .open>.qs .q .tiles,
.start.canvas .open>.qs .q .bt-range,.start.canvas .open>.qs .q .wh-said,
.start.canvas .open>.qs .q .bt-again,.start.canvas .open>.qs .q .undo,
.start.canvas .open>.qs .q .minis{margin-left:auto;margin-right:auto}
.start.canvas .open>.qs .q .rs-foot{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.start.canvas .open>.qs .q .bt-range,.start.canvas .open>.qs .q .wh-said{text-align:center}

/* The places that suit you asks its question in its own size and keeps a
   line under it; on the wizard every question is one size and no screen
   keeps its line (Jack, 11 Sep). */
.start.canvas .open>.qs .q .rs-q{font-family:var(--face);font-weight:var(--wz-qweight);font-size:var(--wz-qsize);
  line-height:1.08;letter-spacing:var(--wz-qtrack);margin:0;text-align:center}
.start.canvas .open>.qs .q .rs-l{display:none}

/* Who is coming wears the same answer as every other question (Jack, 11 Sep):
   it had kept the tweed button from an earlier brief and read as a different
   kind of thing. */
.start.canvas .open>.qs .q .wh-ways{display:grid;gap:14px;justify-items:center;grid-template-columns:none;max-width:none}
.start.canvas .open>.qs .q .wh-way{position:relative;display:grid;gap:5px;width:min(560px,100%);
  background:var(--paper);border:0;border-radius:0;padding:16px 22px;cursor:pointer;text-align:left;min-height:0;
  box-shadow:inset 0 0 0 1px var(--ink-20);color:var(--ink);
  transition:box-shadow .25s var(--wz-ease),background .25s var(--wz-ease)}
.start.canvas .open>.qs .q .wh-way:hover,.start.canvas .open>.qs .q .wh-way.on{box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.start.canvas .open>.qs .q .wh-way.on{background:var(--stone)}
.start.canvas .open>.qs .q .wh-way b{font-family:var(--face);font-weight:var(--wz-aweight);font-size:var(--wz-asize);
  letter-spacing:var(--wz-atrack);color:var(--ink);text-transform:none}
.start.canvas .open>.qs .q .wh-way i{font:italic 400 15.5px/1.45 var(--serif);color:var(--ink-55)}

/* Where you are staying: the places said so far, centred like everything
   else on the screen (Jack, 11 Sep). */
.start.canvas .open>.qs .q .feed{width:min(560px,100%);margin-left:auto;margin-right:auto;text-align:left}
.start.canvas .open>.qs .q .feed .big{width:100%;border-radius:0}

/* ---- the cover: one shape for everything that can be pressed ---- */
/* Six photographs, then add your own, then every one there is. All of them
   the same box, because they are all the same kind of choice (Jack, 11 Sep). */
.start.canvas .open>.qs .q .shots{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:min(560px,100%);margin:42px auto 0}
.start.canvas .open>.qs .q .shots>button{flex:0 0 96px;width:96px;height:120px;border-radius:0;margin:0;
  background-color:var(--stone);background-size:cover;background-position:center;border:0;cursor:pointer;position:relative;
  transition:box-shadow .25s var(--wz-ease)}
.start.canvas .open>.qs .q .shots>button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.start.canvas .open>.qs .q .shots>button.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ink)}
.start.canvas .open>.qs .q .swatch{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:min(560px,100%);margin:0 auto}
.start.canvas .open>.qs .q .swatch button,.start.canvas .open>.qs .q .swatch .own{width:34px;height:34px;border-radius:0;position:relative}
.start.canvas .open>.qs .q .swatch button.on::after,.start.canvas .open>.qs .q .swatch .own.on::after{content:"";position:absolute;inset:-5px;box-shadow:inset 0 0 0 1px var(--ink)}

/* ---- what Google offers as you type ---- */
/* It hangs off the field: the same width, directly under it, over the page
   rather than among it, and it keeps its own height so nothing below it
   moves under the hand that is typing (Jack, 11 Sep). */
.start.canvas .open>.qs .q .an-pair{position:relative}
.start.canvas .open>.qs .q .an-sug{position:absolute;left:50%;top:58px;transform:translateX(-50%);z-index:20;
  width:min(520px,100%);max-width:none;max-height:270px;overflow-y:auto;
  background:var(--paper);border:0;box-shadow:inset 0 0 0 1px var(--ink),0 18px 40px -22px rgba(43,48,29,.4);margin:0}
.start.canvas .open>.qs .q .an-sug div{display:grid;gap:2px;justify-items:start;text-align:left;
  padding:12px 18px;border-top:1px solid var(--stone-2);cursor:pointer}
.start.canvas .open>.qs .q .an-sug div:first-child{border-top:0}
.start.canvas .open>.qs .q .an-sug div:hover{background:var(--stone)}
.start.canvas .open>.qs .q .an-sug div b{font:400 17px var(--face);font-weight:400;color:var(--ink)}
.start.canvas .open>.qs .q .an-sug div i{font:italic 400 14px var(--serif);color:var(--ink-55)}
/* While one is being looked up, none of them takes a press: the screen is
   already leaving, and a second match pressed into a call that is under way
   is the buggy part of it (11 Sep). */
.start.canvas .open>.qs .q .an-sug div.off{pointer-events:none}
/* Google asks to be named where its answers are shown. */
.start.canvas .open>.qs .q .an-sug .pow{display:block;text-align:right;padding:7px 18px 9px;
  font:500 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);cursor:default}
.start.canvas .open>.qs .q .an-sug .pow:hover{background:none}

/* ---- how many: one grid, so the rows line up ---- */
.wz-rows{display:grid;grid-template-columns:auto auto;gap:16px 22px;align-items:center;
  justify-content:center;width:max-content;margin:42px auto 0}
.wz-rows>.lab{font:500 10px var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-55);text-align:right}
.wz-nums{display:grid;grid-template-columns:repeat(8,50px);gap:8px}
.wz-num{height:50px;background:none;border:0;border-radius:0;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ink-20);
  font-family:var(--face);font-size:19px;color:var(--ink-75);transition:.22s var(--wz-ease)}
.wz-num:hover{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.wz-num.on{background:var(--ink);color:var(--paper);box-shadow:none}
/* First names, when the party is a group (15 September 2026). The room cannot say seven of nine
   without a list, and a guest who never opens the link does not exist at all without one. The same
   grid as the numbers: the label in its column, the field and what has been given in the other. */
.wz-names{display:grid;gap:10px;width:min(420px,100%)}
.wz-names input{width:100%;height:50px;padding:0 14px;border:0;border-radius:0;background:none;
  box-shadow:inset 0 0 0 1px var(--ink-20);font-family:var(--serif);font-size:16px;color:var(--ink)}
.wz-names input::placeholder{color:var(--ink-35)}
.wz-names input:focus{outline:0;box-shadow:inset 0 0 0 1px var(--ink)}
.wz-names > i{font:italic 400 13px/1.5 var(--serif);font-style:italic;color:var(--ink-55);text-align:left}
.wz-chips{display:flex;flex-wrap:wrap;gap:7px}
.wz-chips span{display:inline-flex;align-items:center;gap:9px;padding:7px 11px;
  box-shadow:inset 0 0 0 1px var(--ink-20);font-family:var(--serif);font-size:15px;color:var(--ink-75)}
.wz-chips b{font:300 17px/1 var(--sans);color:var(--ink-35);cursor:pointer}
.wz-chips b:hover{color:var(--ink)}
@media(max-width:700px){.wz-names{width:100%}}
.wz-num.wide{grid-column:span 3;font-size:16px}

/* ---- the suggestions, which fill the box rather than answer ---- */
.wz-sugs{margin-top:34px}
.wz-sugh{font:500 9.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-35);margin:0 0 14px}
.wz-sugrow{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.wz-sug{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 15px;background:none;border:0;border-radius:0;
  cursor:pointer;box-shadow:inset 0 0 0 1px var(--ink-20);color:var(--ink-75);
  font-family:var(--serif);font-style:italic;font-size:15.5px;transition:.25s var(--wz-ease)}
.wz-sug i{font-style:normal;font-family:var(--sans);font-size:13px;color:var(--ink-35);transition:color .25s}
.wz-sug:hover{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.wz-sug:hover i{color:var(--ink)}
.wz-sug.on{background:var(--ink);color:var(--paper);box-shadow:none}
.wz-sug.on i{color:rgba(251,249,246,.6)}

/* ---- the cover: your own, and every photograph there is ---- */
/* The two that are not photographs, and are not each other either: one says
   what it takes, the other shows what is behind it (Jack, 11 Sep). */
.start.canvas .shots .add{flex:0 0 96px;width:96px;height:120px;background:none;border:1px dashed var(--ink-35);
  cursor:pointer;display:grid;align-content:center;justify-items:center;gap:4px;padding:0 14px;
  transition:border-color .25s var(--wz-ease),background .25s var(--wz-ease)}
.start.canvas .shots .add:hover,.start.canvas .shots .add.over{border-color:var(--ink);background:var(--stone)}
.start.canvas .shots .add s{display:block;width:17px;height:17px;position:relative;text-decoration:none;margin-bottom:3px}
.start.canvas .shots .add s::before,.start.canvas .shots .add s::after{content:"";position:absolute;background:var(--ink-55)}
.start.canvas .shots .add s::before{left:8px;top:0;width:1px;height:17px}
.start.canvas .shots .add s::after{left:0;top:8px;width:17px;height:1px}
.start.canvas .shots .add.over s::before,.start.canvas .shots .add.over s::after{background:var(--ink)}
.start.canvas .shots .add b{font:400 13.5px/1.2 var(--face);color:var(--ink);letter-spacing:0;text-transform:none;text-align:center}
.start.canvas .shots .add.on{border-style:solid;background-size:cover;background-position:center}
.start.canvas .shots .add.on s,.start.canvas .shots .add.on b{display:none}

.wz-seemore{flex:0 0 96px;position:relative;width:96px;height:120px;border:0;cursor:pointer;padding:0;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;background:var(--stone)}
.wz-seemore span{display:block;background:var(--stone-2) center/cover}
.wz-seemore em{position:absolute;inset:0;z-index:2;display:grid;align-content:center;justify-items:center;gap:3px;
  background:rgba(65,64,66,.52);color:var(--paper);font-style:normal;transition:background .25s}
.wz-seemore:hover em{background:rgba(65,64,66,.66)}
.wz-seemore em b{font:400 14px/1.2 var(--face);text-align:center;padding:0 8px}

.wz-lightscrim{position:fixed;inset:0;z-index:150;background:rgba(65,64,66,.42);opacity:0;visibility:hidden;
  transition:opacity .3s var(--wz-ease),visibility 0s .3s}
.wz-light{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);z-index:151;width:min(940px,92vw);max-height:78vh;
  overflow-y:auto;background:var(--paper);padding:34px 34px 40px;opacity:0;visibility:hidden;
  transition:opacity .35s var(--wz-ease),transform .35s var(--wz-ease),visibility 0s .35s}
body.lit .wz-lightscrim{opacity:1;visibility:visible;transition:opacity .3s var(--wz-ease),visibility 0s}
body.lit .wz-light{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .35s var(--wz-ease),transform .35s var(--wz-ease),visibility 0s}
.wz-light h2{font:400 26px var(--face);margin:0 0 4px}
.wz-light p{font:italic 400 15px var(--serif);color:var(--ink-55);margin:0 0 22px}
.wz-light .all{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.wz-light .all button{aspect-ratio:4/5;background:var(--stone) center/cover;border:0;cursor:pointer;position:relative;padding:0}
.wz-light .all button.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ink)}
.wz-light .x{position:absolute;right:24px;top:24px;background:none;border:0;cursor:pointer;
  font:500 10px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55)}
.wz-light .x:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.wz-light,.wz-lightscrim{transition:none}}

/* ---- the guidebook's rows ---- */
.wz-edits{display:grid;gap:1px;width:min(560px,100%);margin:42px auto 0;background:var(--ink-20)}
.wz-edit{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:baseline;width:100%;
  background:var(--paper);border:0;border-radius:0;padding:16px 20px;cursor:pointer;text-align:left;
  transition:background .25s var(--wz-ease)}
.wz-edit:hover{background:var(--stone)}
.wz-edit .k{font:500 10px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55)}
.wz-edit .v{font-family:var(--face);font-size:18px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-edit .go{font:500 10px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-35);transition:color .25s}
.wz-edit:hover .go{color:var(--ink)}

/* ================ THE GUIDE BEING MADE (11 Sep) ================ */
/* Jack, 11 Sep, after the loader on livingart.ishikadesign.in: the trip's own
   photographs fly towards you out of the dark while a count runs up in the
   middle. The technique is that page's - a field with perspective, each
   picture at the centre pushed out on its own lane by two custom properties,
   flying from far behind to past your shoulder and fading at both ends - and
   everything in it is ours: our photographs, our face, and the word is
   creating rather than loading. */
/* Jack's own numbers, settled on the sheet
   (public/design-2026/opening/creating.html): 93px pictures, perspective
   562, flying from 300 behind to 1251 past, the words at 49. */
.cr{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:var(--shell);
  --cr-w:93px;--cr-from:-300px;--cr-to:1251px}
.cr-field{position:absolute;inset:0;perspective:562px;overflow:hidden}
.cr-field img{position:absolute;left:50%;top:50%;width:var(--cr-w);height:calc(var(--cr-w) * 1.25);
  object-fit:cover;opacity:0;animation-name:cr-fly;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform,opacity}
@keyframes cr-fly{
  0%{opacity:0;transform:translate(-50%,-50%) translate3d(var(--x),var(--y),var(--cr-from))}
  18%{opacity:.25}
  65%{opacity:.85}
  88%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) translate3d(var(--x),var(--y),var(--cr-to))}
}
/* The words keep their own light, so they are readable whatever flies past. */
.cr-say{position:relative;z-index:3;margin:0;font-family:var(--face);font-weight:400;
  font-size:min(49px, 28px + (49px - 28px) * 0.6);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.cr-say b{font-weight:400;font-variant-numeric:tabular-nums;margin-left:.35em}
.cr-say::before{content:"";position:absolute;inset:-92px -190px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 150% at 50% 50%,var(--shell) 58%,rgba(249,245,238,.97) 80%,rgba(249,245,238,0) 100%)}
@media(prefers-reduced-motion:reduce){.cr-field img{animation:none;opacity:.2}}

/* ================ THE PHONE · the room at 390, journey-only (prompt 13) ================ */
@media(max-width:700px){
  .canv-side{padding-block:18px 10px;justify-content:flex-start}
  .canv-book{max-width:min(160px,44%)}
  .canv-open{margin-top:8px;min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .canv-made{margin-top:10px;font-size:12px;line-height:1.45}
  .canv-conts{max-width:none}
  .canv-conts .canv-row{min-height:44px;display:flex;align-items:center}
  .canv-qs{padding-block:24px 40px}
  /* The book and the contents share one grid cell and take turns on a
     phone: an invisible contents of eleven 44px rows was holding the side
     open to 500px, and the chapter began where it ended. */
  .canv:not(.on) .canv-conts{display:none}
  /* The made line stays with the contents now that the contents is what
     the column shows: hidden with the book it would never be read, and
     it carries the only mention of an account in the room. */
  .canv.on .canv-book,.canv.on .canv-open{display:none}
  /* Seen as, for a thumb. */
  .seenas{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px)}
  .seenas a{min-height:44px;display:inline-flex;align-items:center;padding:0 10px}
  /* The one way out of the opening, for a thumb too (prompt 15: 76 by 36). */
  .shut{min-height:44px;display:inline-flex;align-items:center}
  /* Every answer, for a thumb: the mock pill is 40px (prompt 16). */
  .start.canvas .pills button{min-height:44px}
  /* And the way back, which was 32 by 24 - and Skip, which is the same word (prompt 20). */
  .start.canvas .acts .back{min-height:44px;display:inline-flex;align-items:center;padding:0 8px}
  /* Take this one, under every card on the shelf (prompt 18: 40 tall). */
  .start.canvas .stay-pick .band{min-height:44px}
  /* The opening at 390 (prompt 33). The cover took the first 457px of the
     phone before the question: the same move prompt 13 made for the room's
     book - the cover to min(50%,200px), the side's air pulled in - so the
     question begins on the first screen. The mock's own 700 rule keeps the
     cover at 280px, which is the mock drawn for a tablet, not a thumb. */
  .start.canvas .side{padding-block:18px 14px}
  .start.canvas .bookframe{max-width:min(50%,200px)}
  /* The canvas centres a short screen in the viewport (the mock's own
     align-content:center), which on a phone dropped tap one's cover 94px
     down the page and its question to 426. A phone reads from the top. */
  .start.canvas{align-content:start;padding-top:12px}
  /* Half an override, found by measuring: .start .side is sticky with
     top:24px, the canvas makes it relative and leaves the top, so the side
     sits 24px into the question's row. Centred at 1440 nobody sees it; at
     390 the heading ran into the cover. The offset goes with the sticky. */
  .start.canvas .side{top:auto}
  /* The shelf's row of tastes above the routes wrapped to four lines at 390
     and pushed the first route off the first screen, which is the one the
     shelf exists for. On a phone it is one line that scrolls sideways, as a
     row of words does on a phone. Only the shelf: tap one's six answers must
     all be seen at once. (Prompt 34 took the second row, the pills, away.) */
  .start.canvas.shelved .kinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--edge) * -1);padding-inline:var(--edge)}
  .start.canvas.shelved .kinds::-webkit-scrollbar{display:none}
  .start.canvas.shelved .kinds button{white-space:nowrap;flex:0 0 auto}
  /* A row that does not wrap has a min-content width of the whole row, and
     the mock's 700 column is a bare 1fr, whose floor is that min-content: the
     column grew to 1200px and took the page with it. minmax(0,1fr) and a
     min-width of 0 down the line keep the column at the phone's width and let
     the row scroll inside it. */
  .start.canvas .open{grid-template-columns:minmax(0,1fr)}
  .start.canvas .qs,.start.canvas .q{min-width:0}
  .start.canvas .change{min-height:44px;display:inline-flex;align-items:center;justify-content:center;width:auto;padding:0 14px;margin-top:6px}
  /* The chapters ported at prompt 37 carry the room's own phone sizes: the
     kinds row 31px, the vote band's two buttons 40, the plus between stops
     28, If it rains 27. The standing rule of the phone block applies -
     everything a thumb presses is at least 44 - and the chapter pages are
     otherwise the room's, diffed to nothing at 1440. */
  .canv .kinds button{min-height:44px;min-width:44px;justify-content:center;align-items:center}
  .canv .sheet .x{min-height:44px}
  .canv .band.vote .v button{min-height:44px}
  .canv .stop-row .mark,.canv .gap-row .mark{width:44px;height:44px}
  .canv .stand .wet{min-height:44px;display:inline-flex;align-items:center}
  .canv .band.vote .chg{min-height:44px;min-width:44px}
  /* The shortlist's vote row (prompt 38): Yes and No are 40 in the room,
     Can't decide 22. The same rule as the rest of the phone block. */
  .canv .big .yn button{min-height:44px}
  .canv .big .acts .or{min-height:44px;display:inline-flex;align-items:center}
  /* Getting there's four answers (prompt 39): the room's 800 rule makes two
     columns of 1fr, whose floor is each button's min-content, and at 390 the
     row ran to 539px and the page scrolled sideways (/trips/76/arrival does
     the same). Two columns whose floor is nothing. And the plan's nine
     "change" words under the notes were 43 by 22. */
  /* The book's spreads (prompt 40): a row of six spreads, each 100% of a
     scroller whose column has a min-width of auto, so the column took the
     row's min-content and the page was 1912px wide at 390 (/trips/83/print
     is the same). The chapter column's floor is nothing, as the opening's
     is; the scroller then scrolls. */
  .canv .canv-qs,.canv .canv-in{min-width:0}
  .canv .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .canv .opt{min-width:0}
  .canv .note .nacts button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  /* The nudge band's second door, or copy the link, was 102 by 23 (prompt 44). */
  .canv .next .acts .or{min-height:44px;display:inline-flex;align-items:center}
  /* Today on a phone (prompt 50): the journey opens on #dayN during the
     trip, and the day it lands on is big type, one thumb - the head, the
     drive, the first thing, the button to maps. An attribute the day carries
     (data-today), so no class is invented for it; :target never matched
     after the redirect. */
  .canv .canv-in .day[data-today] .dayhead h2{font-size:min(clamp(34px,10vw,42px), 28px + (clamp(34px,10vw,42px) - 28px) * 0.6);line-height:1.05}
  .canv .canv-in .day[data-today] .dayhead .stand{font-size:18px;line-height:1.5}
  .canv .canv-in .day[data-today] .dayhead .stand .btn{display:inline-flex;min-height:44px;align-items:center;margin-top:10px}
  /* The welcome's Skip on a job card was 28 by 15 (prompt 51). */
  .canv .c-card .c-go{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  /* The filter row's Show everything, above the cards and in a lead (prompt 46). */
  .canv .empty .or,.canv .lead .or{min-height:44px;display:inline-flex;align-items:center}
  /* The calendar's month arrows are 40 by 40 in the mock, drawn for a mouse,
     and the colour swatches on the book screen 36. */
  .start.canvas .calwrap .cal .mh button{width:44px;height:44px}
  .start.canvas .swatch button{width:44px;height:44px}
  /* The pills that answer where, and the way back, were measured at 44
     already; the field's placeholder is a shorter line on every width. */
  /* The tastes above the shelf (prompt 26): the kinds row is 31px tall,
     drawn for a mouse; a thumb wants 44. */
  .start.canvas .kinds button{min-height:44px;align-items:center}
}

/* A chapter arriving (prompt 36): a row inserted while the contents is open
   starts from the contents' own hidden state and takes the same transition
   in, so arriving is visible. @starting-style is the one rule that can say
   "from where a new element begins" without a class; a browser without it
   shows the row at once, which is not wrong. */
@starting-style{.canv.on .canv-row{opacity:0;transform:translateY(8px)}}

/* The first and largest answer to where (prompt 16): the same pill, the
   whole row, a little taller. The mock has no wide pill; this is its pill
   with two properties more. */
.start.canvas .pills button.wide{flex-basis:100%;min-height:52px}

/* The long way round (prompt 20): every question can be skipped, and Skip
   is drawn as Back is - the same quiet italic - because it is the same kind
   of word. The mock has no Skip; this is its Back under a second name. */
.start.canvas .acts .skip{font-style:italic;font-size:15px;color:var(--ink-55)}

/* The tastes stand between the shelf's line and its routes (prompt 26): the
   kinds row carries only a margin below, drawn for a chapter head that has
   its own air above; here the hint runs straight into it without this. */
.start.canvas .kinds{margin-top:clamp(18px,2.4vh,26px)}

/* The search field on the opening lives in an .ask so its hits can hang
   under it - and .ask is also the chapter top's column, flex, aligned to the
   right, which shrank the field to its placeholder and pushed it over. The
   whole rule reset, not one property of it: block, no gap, no offset. */
.start.canvas .ask{display:block;gap:0;margin-top:0}

/* ================ THE WELCOME · the canvas held, the shelf, the one thing (docs/BRIEF-welcome.md) ================ */
/* Jack settled this on 11 September, screen by screen, and the two sheets are
   public/design-2026/opening/welcome.html and .../todo.html. The page keeps
   its own names and takes the sheets' rules: the canvas is .canv-side, the
   contents .canv-conts, the shelf .below's grid. Only the one thing to do,
   which the page had nothing of, keeps the todo sheet's own td- names.

   Chosen: the canvas is the drift with the guidebook over it; the cards are
   the shelf, called "Where to go next", three across at 19px between, with no
   state drawn on a card; cards first, then the list; no bar at the foot; and
   Yours to do is the next job alone, with a photograph and no count. */

/* ---- the canvas, 630px and fixed ----
   The same width as the opening's (--bt-side), so the two pages flow into one
   another. Fixed, not sticky: the shared sheet clips the body on one axis,
   which makes the body the scroll container, and a sticky child of a
   container that does not itself scroll never sticks - which is what put
   white under the column as the right side moved. The grid still reserves the
   width, the right side is told it is column 2, and the page paints the
   canvas's own ground the whole way down as a backstop. */
:root{--wc-side:630px}
.canv{grid-template-columns:var(--wc-side) minmax(0,1fr);
  background:linear-gradient(to right,var(--oat) 0 var(--wc-side),transparent var(--wc-side))}
.canv-side{position:fixed;left:0;top:0;width:var(--wc-side);height:100vh;overflow:hidden}
.canv-qs{grid-column:2}
/* The measure, on the welcome. The room let the column take whatever width it
   had (Jack, 9 Sep: "you can make use of the full canvas"), and on a 1,920
   screen that is 1,119px - a third wider than the sheet's page, and wide
   enough to leave a third of the one thing to do empty. 1,020, centred in its
   own column, is the brief's number and the sheet's. */
/* width as well as max-width: the column is a grid item, and an auto inline
   margin on its own turns the stretch off and leaves the block at its own
   max-content - which measured 657 of the 1,119 going spare. */
.canv[data-here="overview"] .canv-in{width:100%;max-width:1020px;margin-inline:auto}
/* Everything the canvas carries stands over the drift, not under it. */
.canv-stack,.canv-open,.canv-made{position:relative;z-index:1}

/* ---- the drift, behind the book ----
   The opening's own field (docs/BRIEF-opening-drift.md) of places near this
   trip, in grey at 30 per cent under a paper wash, so the book is the only
   thing on the canvas with colour in it. The shadow the opening gives each
   photograph comes off: nothing behind the wash casts one. */
.canv-side .dr-field{position:absolute;inset:0;overflow:hidden;z-index:0;--dr-side:var(--wc-side)}
.canv-side .dr-strip figure{box-shadow:none;background:none}
.canv-side .dr-strip img{filter:grayscale(1) contrast(.92) brightness(1.06);opacity:.3}
.canv-side .dr-field::after{content:"";position:absolute;inset:0;background:var(--oat);opacity:.42}
/* The guidebook is the photograph, laid over the drift as a print is laid on
   a table. Until the book is cut out of book-photo-1600.jpg as a PNG with the
   table removed there is no behind to it, so it is held smaller and given the
   shadow of something resting on the ground, rather than drawn flat. */
.canv-book{box-shadow:0 30px 70px -30px rgba(65,64,66,.6)}

/* ---- the contents, behind one press ----
   The canvas turns over to it and back, as it already did. What is new is
   that a row carries the note the card no longer does. */
.canv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:14px;align-items:baseline}
.canv-row .canv-note{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:13.5px;line-height:1.3;color:var(--ink-35);text-align:right}
/* The word for a chapter that has not opened yet is the page's own, wait, and
   not the sheet's shut: .shut is already the opening's close button, which is
   position:fixed, and a contents row wearing it was thrown 1,905px wide
   across the whole page. */
.canv-row.wait{color:var(--ink-35)}

/* ---- Where to go next ----
   Not "the chapters": chapter is the book's word for a part of the printed
   thing, and on this page they are rooms you walk into. The cards are the
   trip's own chapters, so a room the trip has not got is never a dead end on
   it, and Welcome is never one because it is the page you are standing on.

   The shelf card, as the sheet has it: a photograph at 4:3, the name under it
   in Larken at 20px, and nothing saying how the chapter stands. Three across,
   19px between, the row gap half as much again. */
.canv-in > .below{display:block}
.canv-in .below .lead,.canv-in .below .grid{max-width:none;margin-inline:0}
/* .lead is a flex row everywhere else - a heading with something at the far
   end of it - and the sheet's is a block: the name, and one line under it.
   Every property the row set is put back, not the one that is wrong. */
.canv-in .below .lead{display:block;align-items:initial;justify-content:initial;gap:0;flex-wrap:initial}
.canv-in .below .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(19px * 1.6) 19px}
.canv-in .below .c{align-self:start}
.canv-in .below .ph{aspect-ratio:4/3}
.canv-in .below .c:hover .ph img{transform:scale(1.04)}
.canv-in .below .t{margin-top:11px;font-size:20px;line-height:1.15}
/* No state is drawn on a card: the band goes, and so does the paling of the
   photograph that marked a shut one. A shut chapter is the whole card at 55
   per cent and nothing else - the note that said why is on the contents. The
   band's own rules set a background and a colour as well as a display, so
   every one of them is put back rather than one of them. */
.canv-in .below .band{display:none}
.canv-in .below .c.wait{opacity:.55}
.canv-in .below .wait .ph{background:var(--stone-2)}
.canv-in .below .wait .ph img{opacity:1;filter:none}
.canv-in .below .wait .t{color:var(--ink)}

/* ---- Yours to do, the one thing ----
   Jack, on what this is: "kind of like sidekick for shopify - it helps them
   plan their trip and shows them things to work on and do". So it is not a
   list to tick; it is the next thing, said once, with a photograph and a way
   in. The rest sit behind one word. No count anywhere.

   The rules are public/design-2026/opening/todo.html, way 2. */
/* The sheet draws this in a 1,020px page, where a 300px photograph, the words
   and the button sit in a row. Here it stands in the canvas's right column,
   which is 665px at 1440 and 1,020 on a wide screen, so the column is the
   container and the card has two shapes: the photograph beside the words with
   the way in under them where the column is narrow, and the sheet's own three
   across the moment there is room. Everything else is the sheet's. */
.canv-in > .yours{container-type:inline-size}
.td-one{background:var(--paper);box-shadow:0 2px 8px rgba(65,64,66,.07);display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:stretch;overflow:hidden}
.td-one .sh{display:block;grid-row:1 / span 2;min-height:210px;overflow:hidden;background:var(--stone)}
.td-one .sh img{width:100%;height:100%;object-fit:cover;display:block}
.td-one .w{grid-column:2;grid-row:1;align-self:end;padding:38px 40px 0 34px}
.td-one .k{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-35);margin:0 0 10px}
.td-one h3{font-family:var(--face);font-weight:400;font-size:30px;line-height:1.15;margin:0}
.td-one p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;line-height:1.55;
  color:var(--ink-55);margin:10px 0 0;max-width:52ch}
/* The way in, and the quiet way out beside it. */
.td-one .acts{grid-column:2;grid-row:2;align-self:start;display:flex;align-items:center;
  flex-wrap:wrap;gap:14px 20px;padding:22px 40px 36px 34px}
.td-one .go{height:50px;padding:0 26px;background:var(--forest);color:var(--on-forest);border:0;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;transition:background .3s var(--ease)}
.td-one .go:hover{background:var(--moss)}
.td-one .or{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-35);background:none;border:0;cursor:pointer;padding:4px;white-space:nowrap;transition:color .25s}
.td-one .or:hover{color:var(--ink)}
@container (min-width:820px){
  .td-one{grid-template-columns:300px minmax(0,1fr) auto;align-items:center}
  /* Stretched, not centred: the photograph fills the card's height and the
     image crops into it. Left to itself it takes the picture's own height and
     makes a 375px card out of a 210px one. */
  .td-one .sh{grid-row:auto;grid-column:1;align-self:stretch}
  .td-one .w{grid-column:2;grid-row:auto;align-self:center;padding:38px 0 34px 34px}
  .td-one .acts{grid-column:3;grid-row:auto;align-self:center;padding:0 40px 0 22px}
}
/* Nothing waiting on them: the card with no photograph, the sheet's own
   td-nopics, which is one column and starts where the words start. */
.td-one.td-nopics{grid-template-columns:minmax(0,1fr)}
.td-one.td-nopics .w,.td-one.td-nopics .acts{grid-column:1;padding-left:40px}
.td-rest{margin-top:18px;display:grid;gap:0}
.td-rest>b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;color:var(--ink-55);
  cursor:pointer;padding:10px 0;background:none;border:0;text-align:left}
.td-rest>b u{text-decoration:none;box-shadow:inset 0 -1px 0 var(--ink-35);color:var(--ink);font-style:normal}
.td-rest .more{display:none;gap:0}
.td-rest.open .more{display:grid}
.td-rest .more button{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;background:none;
  border:0;text-align:left;padding:13px 0;cursor:pointer;font-family:var(--face);font-weight:400;font-size:17px;
  color:var(--ink-75);transition:color .25s}
.td-rest .more button:hover{color:var(--ink)}
.td-rest .more button i{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-35);font-style:normal}
.td-rest .more button.done{color:var(--ink-35)}
.td-rest .more button.done span{text-decoration:line-through;text-decoration-color:var(--ink-20)}

/* ---- nothing moves when they have asked for nothing to move ---- */
@media(prefers-reduced-motion:reduce){
  .canv-side .dr-strip{animation:none}
  .canv-in .below .ph img,.td-one .go,.td-one .or,.td-rest .more button{transition:none}
  .canv-in .below .c:hover .ph img{transform:none}
  /* A card that arrives is parked at opacity 0 and brought back by its own
     animation. Stopping the animation without putting the card back would
     leave the shelf empty. */
  .canv-in .below .grid .c.rise{animation:none;opacity:1;transform:none}
}

/* ---- narrower ----
   The column is the opening's width where there is room for it and a share of
   the screen where there is not. Below the canvas's own breakpoint the column
   stands in the flow again, so every property the fixed rules set is put back
   and not one of them. */
@media(max-width:1180px){:root{--wc-side:40vw}}
@media(max-width:980px){.canv-in .below .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  .canv{grid-template-columns:1fr;background:none}
  .canv-side{position:static;left:auto;top:auto;width:auto;height:auto;overflow:visible}
  .canv-qs{grid-column:auto}
  /* The column is as tall as the book now and lets its overflow show, and
     the strip is several screens tall: it poured down the page behind the
     words. The book stands on its own ground here, as the room has it. */
  .canv-side .dr-field{display:none}
}
@media(max-width:560px){
  .td-one{grid-template-columns:1fr}
  .td-one .sh{grid-row:auto;min-height:180px}
  .td-one .w{grid-column:1;padding:26px 26px 0}
  .td-one .acts{grid-column:1;grid-row:auto;padding:20px 26px 26px}
  .canv-in .below .grid{grid-template-columns:1fr}
}

/* ================ THE WAY THROUGH · the bar at the foot of a chapter ================ */
/* Jack, 11 September, standing on Who is coming: "there is no real way to go
   back - should we add the bottom navigation in so its easier to navigate
   things". A chapter had one way out, the word under the book, and it reads
   as a label rather than a press; and nothing anywhere let you read the guide
   in the order it is written.

   So the bar is the opening's own (.wz-feet, which he settled on 11 Sep) with
   the room's canvas width and a third thing in the middle: the chapter before
   on the left, the contents in the middle, the chapter after on the right.
   The name is the canvas's family - it is part of the canvas, not of a page -
   and it is never drawn on the welcome, where the shelf is the way on. */
:root{--canv-feet:68px}   /* measured off the built bar, not guessed */
.canv-feet{position:fixed;left:var(--wc-side);right:0;bottom:0;z-index:100;display:flex;
  align-items:center;justify-content:space-between;gap:20px;padding:14px 40px;
  background:var(--paper);box-shadow:0 -1px 0 var(--ink-20)}
.canv-feet .b{display:inline-flex;align-items:center;gap:11px;min-width:0;
  font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-35);background:none;border:0;cursor:pointer;transition:color .3s}
.canv-feet .b:hover{color:var(--ink)}
/* The rule beside the word lengthens as you go for it, as the opening's does. */
.canv-feet .b s{flex:0 0 auto;display:block;width:24px;height:1px;background:currentColor;
  text-decoration:none;transition:width .3s var(--ease)}
.canv-feet .b:hover s{width:36px}
.canv-feet .b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A chapter with nothing before or after it keeps the middle in the middle. */
.canv-feet .gap{flex:0 0 auto;width:90px}
.canv-feet .mid{font-family:var(--face);font-weight:400;font-size:17px;color:var(--ink-55);
  background:none;border:0;cursor:pointer;padding:6px 10px;transition:color .3s}
.canv-feet .mid:hover{color:var(--ink)}

/* Nothing hides under it, and the Seen as strip stands on top of it rather
   than behind it. */
.canv:has(.canv-feet) .canv-qs{padding-bottom:calc(clamp(44px,9vh,96px) + var(--canv-feet))}
body:has(.canv-feet) .seenas{bottom:calc(18px + var(--canv-feet))}

@media(prefers-reduced-motion:reduce){
  .canv-feet .b s,.canv-feet .b,.canv-feet .mid{transition:none}
  .canv-feet .b:hover s{width:24px}
}
/* Below the canvas's own breakpoint the column stands in the flow, so the bar
   runs the whole width. */
@media(max-width:820px){
  .canv-feet{left:0;padding:12px 20px;gap:12px}
  .canv-feet .gap{width:0}
  .canv-feet .b{letter-spacing:.18em}
}

/* ================ THE OPENING · the three ways, what you enjoy, and the cover (11 Sep) ================ */
/* Jack, 11 September: "can where are you heading screen be 3 boxes with
   images please - we don need sub titles so boxes similar to this. the what
   do you enjoy boxes should be exact same style and size of region image
   boxes too. the Pick the cover page is still a mess design wise." */

/* ---- where are you heading: the three ways, as the region cards ----
   They were three wide buttons stacked down the middle, each with a line of
   small print under its name. They are the region screen's own card now - a
   photograph with the name over it and nothing else - so the two screens that
   ask where are one screen. The stack is reset whole: the gap, the justify
   and the width the ways carried, not one of them. */
/* The card is the region screen's, to the pixel (Jack, 11 Sep: "this section
   shoudl have the same size images - everything shoudl be consigtant"). The
   row is three of them wide and centred, rather than three stretched to fill
   the column - which is what made them 292 against the region screen's 206. */
.start.canvas .open>.qs .q .hf-cards.hf-ways{display:grid;grid-template-columns:repeat(3,206px);
  gap:var(--hf-gap);justify-items:stretch;justify-content:center;width:max-content;max-width:100%;margin:34px auto 0}
.start.canvas .open>.qs .q .hf-cards.hf-ways .c{cursor:pointer}
@media(max-width:820px){.start.canvas .open>.qs .q .hf-cards.hf-ways{grid-template-columns:repeat(2,206px)}}
@media(max-width:520px){.start.canvas .open>.qs .q .hf-cards.hf-ways{grid-template-columns:1fr;width:100%}}

/* ---- what do you enjoy, and the places that suit you ----
   Both are lifted whole from public/design-2026/opening/wizard.html, which
   Jack pointed at on 11 September: "this is exactly how the boxes should
   look" for the first, and "this is exactly how that page should look" for
   the second. They are its 4 (the quiet) and its 3 (the plates).

   The morning's answer for enjoy - the region screen's card, four hours old -
   is gone rather than left standing beside this one. The difference is where
   the name sits: the region card sets it inside the photograph, and the quiet
   card sets it under. */

/* the sheet's card: the photograph, and the name under it */
.wz-cards{display:grid;grid-template-columns:repeat(var(--wz-cols,4),minmax(0,1fr));gap:26px 20px;text-align:left}
.wz-card{display:block;align-self:start;position:relative;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.wz-shot{display:block;position:relative;overflow:hidden;background:var(--stone);aspect-ratio:4/3}
.wz-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--wz-ease)}
.wz-card:hover .wz-shot img{transform:scale(1.05)}
.wz-card h3{font:400 19px/1.15 var(--face);margin:11px 0 0}
.wz-shot .tick{position:absolute;right:10px;top:10px;z-index:2;width:24px;height:24px;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;font:500 12px var(--sans);opacity:0;transform:scale(.7);transition:.3s var(--wz-ease)}
.wz-card.on .tick{opacity:1;transform:none}
.wz-card.on .wz-shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ink)}

/* 4 · the quiet, which is what enjoy wears: four across, square, no line */
.start.canvas .open>.qs .q .wz-cards{--wz-cols:4;gap:20px 16px;margin-top:34px}
.start.canvas .open>.qs .q .wz-cards .wz-shot{aspect-ratio:1/1}
.start.canvas .open>.qs .q .wz-cards .wz-card p{display:none}
@media(max-width:820px){.start.canvas .open>.qs .q .wz-cards{--wz-cols:2}}

/* 3 · the plates, which is what places that suit you wears.
   It was three 3:2 cards with sixteen-pixel names and then eight more at 6/7
   in an eight-wide row: the photographs were stamps. The sheet leads with
   them - three at 4:5 with the name set over them at 23px, then four at 3:4
   under Also worth a look, eighteen and fourteen apart.

   The one thing the sheet drops is the sentence under each of the three. It
   is kept in the page and not drawn, so a word from Jack brings it back. */
.start.canvas .open>.qs .q .rs-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:36px;max-width:none}
.start.canvas .open>.qs .q .rs-big{position:relative}
.start.canvas .open>.qs .q .rs-top .c{aspect-ratio:4/5}
.start.canvas .open>.qs .q .rs-top .c .t{left:18px;right:18px;bottom:16px}
.start.canvas .open>.qs .q .rs-top .c h3{font-size:23px;text-shadow:0 1px 14px rgba(65,64,66,.55)}
.start.canvas .open>.qs .q .rs-top p{display:none}
.start.canvas .open>.qs .q .rs-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px}
.start.canvas .open>.qs .q .rs-cards .c{aspect-ratio:3/4}
.start.canvas .open>.qs .q .rs-cards .c .t{left:14px;right:14px;bottom:13px}
.start.canvas .open>.qs .q .rs-cards .c h3{font-size:20px;text-shadow:0 1px 14px rgba(65,64,66,.55)}
.start.canvas .open>.qs .q .rs-cards .c .w{display:none}
.start.canvas .open>.qs .q .rs-also{font-size:9.5px;letter-spacing:.3em;color:var(--ink-35);margin:0 0 16px}
@media(max-width:820px){
  .start.canvas .open>.qs .q .rs-top{grid-template-columns:1fr 1fr}
  .start.canvas .open>.qs .q .rs-cards{grid-template-columns:1fr 1fr}
}

/* ---- the cover: two choices, each said, each in a grid that lines up ----
   It was a mess in one particular way: both rows were a centred flex wrap. So
   the second row of four photographs sat half a box in from the first row of
   five, and the fourteenth colour fell on a line of its own, alone and in the
   middle. Two grids now, the same width as each other, each with a word over
   it saying what it is. */
.start.canvas .open>.qs .q>.wz-sugh{margin:34px 0 12px}
.start.canvas .open>.qs .q .shots{display:grid;grid-template-columns:repeat(5,96px);gap:12px;
  justify-content:center;width:max-content;max-width:100%;margin:0 auto}
.start.canvas .open>.qs .q .shots>button,.start.canvas .open>.qs .q .shots .add,
.start.canvas .open>.qs .q .shots .wz-seemore{flex:none;width:auto;height:120px}
/* The cover as it stands, when there is no photograph on it to show. */
.start.canvas .open>.qs .q .shots>button em{display:grid;place-items:center;height:100%;padding:0 8px;
  font:italic 400 13px/1.35 var(--serif);color:var(--ink-55);text-align:center}
/* One row, however many colours there are: the row is as wide as the
   photographs above it and every swatch shares it out. */
.start.canvas .open>.qs .q .swatch{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:9px;width:min(528px,100%);margin:0 auto}
.start.canvas .open>.qs .q .swatch button,.start.canvas .open>.qs .q .swatch .own{width:auto;height:auto;aspect-ratio:1}
/* Add your own is a dashed box, not one of the photographs, and See all is a
   way through rather than a picture. The cover row's own rule for every
   button in it - border:0, the stone ground, an inner line on hover - had
   taken the dashes off one and washed out the other, which is the whole of
   why they read as two more grey squares. Every property that rule set is put
   back for these two, not one of them. */
.start.canvas .open>.qs .q .shots>button.add{border:1px dashed var(--ink-35);background-color:transparent}
.start.canvas .open>.qs .q .shots>button.add:hover{border-color:var(--ink);background-color:var(--stone);box-shadow:none}
.start.canvas .open>.qs .q .shots>button.add.on{border-style:solid;background-size:cover;background-position:center}
.start.canvas .open>.qs .q .shots .wz-seemore em{background:rgba(65,64,66,.66)}
.start.canvas .open>.qs .q .shots .wz-seemore:hover em{background:rgba(65,64,66,.78)}
.start.canvas .open>.qs .q .shots .wz-seemore em b{font:400 15px/1.2 var(--face);color:var(--paper)}

@media(max-width:600px){
  .start.canvas .open>.qs .q .shots{grid-template-columns:repeat(3,96px)}
}

/* ================ THE OPENING · a screen before the first question, and the rest full screen (docs/BRIEF-opening-start.md) ================ */
/* Two changes and nothing else. The questions keep their words, their order,
   their controls and their components; what moves is the frame around them.

   1 · `begin`, a screen the opening has never had: the mark, one heading, one
       button, and the guidebook standing in the column beside them.
   2 · Every question then has the screen to itself. The column leaves when
       the first question arrives and comes back once, at the cover.

   The column is taken out of the grid rather than made narrower, so a
   question is centred on the page and not on what is left beside something.
   It fades - opacity, not a slide and not a shrink - and the question arrives
   the way every screen here already arrives. */

/* ---- the frame, with the column out of it ---- */
/* 1400ms, up from the brief's 900 (Jack, 11 Sep: "maybe we can make the
   transition time slower so the transition appears longer and so it appears
   smoother"), and settled at 1200 the same afternoon. Everything in the leave
   is measured off this one number.

   It fades and does nothing else. The sheet offers three other ways for the
   column to go - it slides away, it narrows to nothing, it goes up - and Jack
   saw one of them there: "make sure our ones doesnt do that, just fades out."
   There is no transform on it at any point, and the only properties in its
   transition are opacity and visibility.

   And its own easing. The page's is a sharp ease-out, which is right for
   something arriving - most of the move at once, then it settles - and wrong
   for something leaving: the photographs dropped away fast and then hung
   about at the end being nearly gone. A fade out wants its speed in the
   middle. */
:root{--st-pace:1200ms;--st-ease:cubic-bezier(.42,0,.36,1)}
.start.canvas .open{grid-template-columns:minmax(0,1fr)}
/* Every property the column's own rules set while it was a column in the grid
   is put back, not one of them: it was position:relative and sized by the
   grid, and it is fixed and sized by itself now. */
.start.canvas .open>.side{position:fixed;left:0;top:0;height:100vh;width:var(--bt-side);z-index:2;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--st-pace) var(--st-ease),visibility 0s var(--st-pace)}
.start.canvas .open[data-at="begin"]>.side,
.start.canvas .open[data-at="cover"]>.side{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity var(--st-pace) var(--st-ease),visibility 0s}
/* The words sit beside the column where there is one, and have the screen
   where there is not. */
.start.canvas .open[data-at="begin"]>.qs,
.start.canvas .open[data-at="cover"]>.qs{padding-left:calc(var(--bt-side) + var(--edge))}
/* The band behind the column was painted by the section itself. The column
   paints its own ground and is the only thing that ever needs one, so the
   band would be a pale stripe down a full-screen question. */
.start.canvas::before{content:none}
/* The bar at the foot has the screen too, and comes back beside the column
   for the cover. */
.wz-feet{left:0}
.start.canvas .open[data-at="cover"] ~ .wz-feet,
.start.canvas:has(.open[data-at="cover"]) .wz-feet{left:var(--bt-side)}

/* ---- the first screen ---- */
/* The column is a little wider here than at the cover (650 against 630) and
   the words have a measure of their own inside what is left. */
.start.canvas .open[data-at="begin"]{--bt-side:650px}
/* And it keeps that width while it is going. The column is 650 on the first
   screen and 630 at the cover, and width is not one of the things that moves,
   so the moment the answer came back it snapped 20px narrower - while it was
   still nearly solid, a third of the way through its fade. Nothing to see now:
   it fades from where it stood. The width goes back to 630 on the next screen
   after, by which time the column has not been on screen for a while. */
.start.canvas .open[data-from="begin"]{--bt-side:650px}
.start.canvas .open[data-at="begin"]>.qs{--wz-col:560px}
.start.canvas .open[data-at="begin"]>.side{--dr-side:var(--bt-side)}
/* The photographs are what the trip is made of; the book is what it is made
   into. So they go quiet and it does not.

   Not keyed on the screen. Held at .14 only while the screen was `begin`, the
   rule stopped applying the moment the answer came back and the photographs
   jumped to full strength inside a column that was still fading out - which
   is the colour Jack saw on the way out (11 Sep). The dim belongs to the
   column: it is only ever seen here and at the cover, and the cover has the
   book in it instead of the drift. */
.start.canvas .open>.side .dr-strip img{opacity:.14}
.start.canvas .open>.side .dr-strip figure{box-shadow:none}
/* Named where it lives. The column already says its children stand in flow
   (.start.canvas .side > *{position:relative}), which is the same rule that
   once collapsed the drift field, and a bare .bt-tall loses to it. */
.start.canvas .open>.side .bt-tall{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:53%;height:auto;max-width:none;display:block;box-shadow:0 46px 92px -34px rgba(65,64,66,.62)}
/* The mark, and the heading under it. The heading's own em is the page's:
   Cormorant italic at 1.08em, as every heading here already does it. */
.bt-logo{display:block;width:104px;height:auto;margin:0 auto 30px;opacity:.85}
.start.canvas .open[data-at="begin"]>.qs .q h1{font-size:min(clamp(38px,4.4vw,58px), 28px + (clamp(38px,4.4vw,58px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.014em}
/* The screen's own button is drawn here, because this screen has no bar at
   the foot to carry it: everywhere else the inline one is hidden so there is
   only ever one way forward. And the block sits in the middle of the screen,
   which the questions' own padding - 70 above, 150 below for the bar - does
   not do on a screen with no bar. */
.start.canvas .open[data-at="begin"]>.qs{padding-top:70px;padding-bottom:70px}
.start.canvas .open[data-at="begin"]>.qs .q .acts{margin-top:38px;display:flex;justify-content:center}
.start.canvas .open[data-at="begin"]>.qs .q .acts .btn{display:inline-flex}

/* ---- the answers so far, each one the way back ----
   They read as the line they always were until the hand is over one, and then
   they say what they are. The line itself keeps its own rules - it is one
   line, it ellipses rather than wraps - so nothing about the bar moves. */
.wz-feet .said>span{display:inline}
.wz-feet .said i{font-style:italic;color:var(--ink-35)}
.wz-feet .said button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  transition:color .25s var(--wz-ease),box-shadow .25s var(--wz-ease)}
.wz-feet .said button:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink-35)}
.wz-feet .said button[disabled]{cursor:default;color:inherit;box-shadow:none}

/* ---- out, and then in ----
   Jack, 11 Sep: "ideally it will fully fade out then fade in so its just
   beautiful and perfect and no jumps."

   The fade starts with the finger, not with the answer. Waiting for the round
   trip left the screen still for a third of a second and then did everything
   at once; pressed, the column and the words begin going immediately and the
   answer arrives into a screen already on its way. */
/* Every screen, not only the first. An answer is away for a couple of hundred
   milliseconds and the screen did nothing for all of it, then was cut away in
   one frame when the answer came back. It goes while the answer is away
   instead, so the press, the leaving and the arriving are one movement rather
   than three events (11 Sep: "just a little bit jumpy and stuttery").

   `busy` is only ever set by an answer on its way to the server, so there is
   no screen that fades and then stays. */
.start.canvas .open[data-busy]>.qs .q{opacity:0;
  transition:opacity calc(var(--wz-pace) * .55) var(--st-ease)}

.start.canvas .open[data-at="begin"][data-busy]>.side{opacity:0}
.start.canvas .open[data-at="begin"][data-busy]>.qs .q{opacity:0;
  transition:opacity calc(var(--st-pace) * .45) var(--st-ease)}

/* And the question waits for the column to have gone rather than arriving
   over the top of it. The delay is measured from the moment the question is
   drawn, which is already a round trip after the press, so it lands as the
   column finishes rather than after a gap. */
.start.canvas .open[data-from="begin"][data-at="shape"]>.qs .q.in{
  animation-delay:calc(var(--st-pace) * .55);animation-duration:calc(var(--st-pace) * .6)}

@media(prefers-reduced-motion:reduce){
  .start.canvas .open>.side{transition:none}
  .start.canvas .open[data-at="begin"]>.side,
  .start.canvas .open[data-at="cover"]>.side{transition:none}
  .start.canvas .open[data-busy]>.qs .q,
  .start.canvas .open[data-at="begin"][data-busy]>.qs .q{transition:none}
  .start.canvas .open[data-from="begin"][data-at="shape"]>.qs .q.in{animation-delay:0s}
}

/* Below the canvas's own breakpoint the column stood above the words rather
   than beside them, and it cannot hold the screen from out of the flow: left
   fixed, it put the heading and the button on top of the guidebook and
   neither could be read. So it goes back into the flow at the height it
   already had, above the words, and on a question it is simply not drawn. */
@media(max-width:1000px){
  /* Relative, not static: the drift field and the guidebook are positioned
     against the column, and a static column is not something to position
     against - the drift then escaped it and ran down the page behind the
     words. */
  .start.canvas .open>.side{position:relative;overflow:hidden;display:none;width:auto;
    opacity:1;visibility:visible;pointer-events:auto;transition:none}
  .start.canvas .open[data-at="begin"]>.side,
  .start.canvas .open[data-at="cover"]>.side{display:flex}
  .start.canvas .open[data-at="begin"]{--bt-side:100vw}
  .start.canvas .open[data-at="begin"]>.side{height:min(52vh,430px);--dr-side:100vw}
  .start.canvas .open>.qs,
  .start.canvas .open[data-at="begin"]>.qs,
  .start.canvas .open[data-at="cover"]>.qs{padding-left:var(--edge)}
  .start.canvas .open[data-at="begin"]>.qs{min-height:0;padding-top:44px;padding-bottom:64px}
  .start.canvas .open>.side .bt-tall{width:min(240px,44%)}
  .wz-feet{left:0}
  .start.canvas:has(.open[data-at="cover"]) .wz-feet{left:0}
}

/* ================ THE EMPTY DAY · one row, and the first one shown how (public/design-2026/opening/day.html, way E) ================ */
/* Jack, 11 September: "when no info has been added on itinerary yet, the
   itinerary does not look good at all". The timeline was drawn for a full
   day - a station, a date at 40px, then stops down a 132px gutter - so a day
   with nothing on it was that date and about 300px of nothing, four times
   over, with one ink-55 italic line at the foot. The one thing you were meant
   to press was the quietest thing on the day.

   Way E off the sheet, at the numbers he set on its tuner. Two rules:

   1 . A day with nothing on it is one row. The station goes hollow, the label
       and the date sit on a line at 24px, and the way in is hard right. Four
       empty days read as a short list of days waiting, which is the truth,
       and the full days keep all their weight.
   2 . The FIRST empty day opens out once - and only while the whole itinerary
       is still empty - to show the four things a day can hold. One teaching
       moment rather than four identical prompts.

   Two names are the sheet's own renamed here, because both of the sheet's
   collided with something this stylesheet already owns: `lead` is a global
   flex row (line 89) and `tight` is a section modifier (line 105). The sheet
   was renamed with them, so the mock and the page still say the same thing. */

/* ---- the numbers, off the sheet's tuner (Jack, 11 Sep) ---- */
:root{--ed-air:8px;--ed-size:16px;--ed-lead:1.40;--ed-col:rgba(65,64,66,.51);
  --ed-pic:145px;--ed-rule:rgba(65,64,66,.10)}

/* ---- 1 . the day that has nothing, as one row ---- */
/* Every .it-day is a <section>, so it carries the page's own
   `section{padding:clamp(48px,7vh,72px) 0}` - 66px top and bottom at this
   height, and a good part of why an empty day was 300px of nothing. Both are
   set here, not one: half-overriding a rule leaves the other half fighting. */
.it-day.it-none{padding-top:0;padding-bottom:0}
/* The last row closes the list rather than leaving it open at the foot. */
.it-days>.it-day.it-none:last-child .it-dayhead{border-bottom:1px solid var(--ed-rule)}
.it-day+.it-day.it-none{margin-top:0}
/* A full day after an empty one gets its air back; another empty one does not.
   :not() is what settles the two against each other - without it they are the
   same weight and the later rule would win whichever day it is. */
.it-day.it-none+.it-day:not(.it-none){margin-top:calc(var(--it-air) * 1.1)}
/* Flex, not grid: the head holds three things and a two-column grid puts the
   third on a line of its own. */
.it-day.it-none .it-dayhead{margin:0;display:flex;align-items:baseline;gap:16px;
  padding:calc(var(--ed-air) * .48) 0;border-top:1px solid var(--ed-rule)}
.it-day.it-none .it-dayhead .lab{margin:0;flex:0 0 auto}
.it-day.it-none .it-dayhead h2{font-size:24px;flex:0 0 auto}
/* The numeral is drawn rather than filled, so a day waiting does not carry the
   same weight in the gutter as a day that has something on it. */
.it-day.it-none .it-station{top:50%;transform:translateY(-50%);width:30px;height:30px;font-size:12px;
  background:transparent;color:var(--ink-35);border:1px solid var(--ed-rule)}
.it-day.it-none .put{margin-left:auto;flex:0 0 auto;background:none;border:0;padding:0;
  font:italic 400 var(--ed-size)/1 var(--serif);color:var(--ed-col);cursor:pointer}
.it-day.it-none .put u{text-decoration:none;box-shadow:inset 0 -1px 0 var(--ink-35);font-style:normal}
.it-day.it-none .it-dayhead:hover .put u,.it-day.it-none .put:focus-visible u{box-shadow:inset 0 -1px 0 var(--ink)}

/* ---- 2 . the first one, opened out ---- */
.ed-what{padding-bottom:calc(var(--ed-air) * .6)}
.ed-say{font-size:var(--ed-size);line-height:var(--ed-lead);color:var(--ed-col);max-width:48ch}
.ed-what .four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--ed-rule);border:1px solid var(--ed-rule);margin-top:24px}
.ed-what .four button{background:var(--paper);padding:22px 18px 20px;text-align:left;
  transition:background .18s var(--ease)}
.ed-what .four button:hover{background:var(--oat)}
.ed-what .four b{display:block;font:400 19px/1.2 var(--face);margin-bottom:6px}
.ed-what .four i{font:italic 400 13.5px/1.4 var(--serif);color:var(--ink-55)}

/* The four are four across in the column they are drawn in (908px at 1440,
   so 226 each). Below that they are two and two rather than four slivers. */
@media(max-width:1100px){.ed-what .four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .ed-what .four{grid-template-columns:minmax(0,1fr)}
  .it-day.it-none .it-dayhead{flex-wrap:wrap;gap:6px 14px}
  .it-day.it-none .put{margin-left:0;flex-basis:100%}
}

/* ================ THE PAGE TURN · only the chapter turns (11 Sep) ================ */
/* Jack, 11 September: "the left side never changes, it never has to reload so
   it doesnt leave the screen, and the right side beautifully transides from
   one page to the other".

   The first half is React's: the canvas is a persistent layout now, so the
   column is the same elements from one chapter to the next. This is the second
   half.

   Two things were running over each other. lib/smooth.ts asks the browser for
   a view transition on every visit, which snapshots the whole page and
   cross-fades it; and .canv-in gives every block the house arrival - eight
   pixels up, four of blur, 900ms, 200 between one and the next. Both at once
   on a page where only one column changes.

   Naming the right-hand column takes it out of the root snapshot and gives it
   a beat of its own: the chapter that is leaving fades, and the one arriving
   does what every page here does. The column is not named, so it stays in the
   root group - where its two snapshots are the same pixels and nothing
   happens, which is the point. */
.canv-qs{view-transition-name:hs-chapter}
/* Out, and then in: the leaving chapter fades under the arriving one rather
   than being cut away. The new side is left alone because the arrival beneath
   it is the house's own and needs no help. */
::view-transition-old(hs-chapter){animation:hs-chapter-out 280ms var(--ease) both}
::view-transition-new(hs-chapter){animation:none}
@keyframes hs-chapter-out{to{opacity:0}}
/* The root holds the canvas, which does not move. Cross-fading it against an
   identical copy of itself costs a composite for nothing, and on a slow
   machine it is a flicker. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(hs-chapter),::view-transition-new(hs-chapter){animation:none}
}

/* ================ THE OPENING · leaving the cover, as the first screen is left (11 Sep) ================ */
/* Jack, 11 September, on the cover: "transition from this page to the next
   isnt great ... needs to be smoother".

   The first screen had all of this settled already and the cover had none of
   it. Two screens keep a column - `begin` and `cover` - and only one of them
   knew how to put it away.

   1 . The column starts going on the press rather than when the answer comes
       back, so the press, the leaving and the arriving are one movement
       instead of three events.
   2 . The question that follows waits for the column to have gone rather than
       arriving over the top of it. */
.start.canvas .open[data-at="cover"][data-busy]>.side{opacity:0}
.start.canvas .open[data-from="cover"]>.qs .q.in{
  animation-delay:calc(var(--st-pace) * .55);animation-duration:calc(var(--st-pace) * .6)}

/* A match being looked up is not an answer leaving, so it takes the row and
   not the screen. The list goes quiet, the one that was pressed does not, and
   nothing else on the question moves (11 Sep: "when i type a google place
   thing everything disapers then reappears"). */
.start.canvas .open>.qs .q .an-sug div.off{opacity:.4;transition:opacity 160ms var(--st-ease)}
.start.canvas .open>.qs .q .an-sug div.on{pointer-events:none;background:var(--stone)}

/* And what Google found arrives rather than replacing the box in one frame. */
.start.canvas .open>.qs .q .an-pair.v7,
.start.canvas .open>.qs .q .an-pair.v7 ~ .undo,
.start.canvas .open>.qs .q .an-pair.v7 ~ .acts{animation:an-found 420ms var(--st-ease) both}
.start.canvas .open>.qs .q .an-pair.v7 ~ .undo{animation-delay:70ms}
.start.canvas .open>.qs .q .an-pair.v7 ~ .acts{animation-delay:140ms}
@keyframes an-found{0%{opacity:0;transform:translate3d(0,8px,0)}}

@media(prefers-reduced-motion:reduce){
  .start.canvas .open[data-from="cover"]>.qs .q.in{animation-delay:0s}
  .start.canvas .open>.qs .q .an-pair.v7,
  .start.canvas .open>.qs .q .an-pair.v7 ~ .undo,
  .start.canvas .open>.qs .q .an-pair.v7 ~ .acts{animation:none}
}


/* ---------------------------------------------------------------------------
   The opening in the September language, 15 September 2026.

   Jack: "you build this new design version - said you were going to code it into
   the real journey planner." The words on forest at the left, the photographs the
   full height of the right, one question a screen, as /account/day wears it.

   Done on the markup, not over it: the mark and the contents rail came out of the
   picture column in new.tsx first, because no amount of ordering puts the pictures
   on one side while three things that are not pictures live with them. The section
   carries `sep`, so this outranks the older shell by specificity rather than by
   being last, and /journey/before keeps the old one.
   --------------------------------------------------------------------------- */
.start.canvas.sep{background:var(--forest);color:var(--on-forest)}
.start.canvas.sep .in{max-width:none;padding:0;margin:0}
.start.canvas.sep .open{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 50%;grid-template-areas:"words pics";gap:0;
  min-height:100vh;align-items:stretch}
/* Where, the regions, what you enjoy, the three that suit, the kinds and the cover all lay cards out in
   a grid and want the whole width, so those take the ground and the picture column stands down. */
.start.canvas.sep .open.wide{grid-template-columns:minmax(0,1fr);grid-template-areas:"words"}
.start.canvas.sep .open.wide>.side{display:none}
.start.canvas.sep .open.wide>.qs{padding-left:clamp(28px,5vw,80px);padding-right:clamp(28px,5vw,80px)}

/* the words */
.start.canvas.sep .open>.qs{grid-area:words;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;min-height:100vh;padding:clamp(56px,8vh,96px) clamp(28px,5vw,64px);
  background:var(--forest);color:var(--on-forest)}
.start.canvas.sep .open>.qs>*{width:100%}
.start.canvas.sep .q h1,.start.canvas.sep .q h1 em{color:#fff}
.start.canvas.sep .q .hint,.start.canvas.sep .q .hint.roomy,.start.canvas.sep .q p.hint{color:rgba(241,237,232,.62)}
.start.canvas.sep .wh-said,.start.canvas.sep .said,.start.canvas.sep .wh-said i{color:rgba(241,237,232,.72)}
.start.canvas.sep .wz-rows>.lab{color:rgba(241,237,232,.55)}
.start.canvas.sep .wz-num{box-shadow:inset 0 0 0 1px rgba(241,237,232,.28);color:rgba(241,237,232,.82)}
.start.canvas.sep .wz-num:hover{box-shadow:inset 0 0 0 1px rgba(241,237,232,.75);color:#fff}
.start.canvas.sep .wz-num.on{background:var(--paper);color:var(--ink);box-shadow:none}
.start.canvas.sep .wz-names input{box-shadow:inset 0 0 0 1px rgba(241,237,232,.28);color:#fff}
.start.canvas.sep .wz-names input::placeholder{color:rgba(241,237,232,.45)}
.start.canvas.sep .wz-names input:focus{box-shadow:inset 0 0 0 1px rgba(241,237,232,.8)}
.start.canvas.sep .wz-names > i{color:rgba(241,237,232,.55)}
.start.canvas.sep .wz-chips span{box-shadow:inset 0 0 0 1px rgba(241,237,232,.32);color:#F1EDE8}
.start.canvas.sep .wz-chips b{color:rgba(241,237,232,.55)}
.start.canvas.sep .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.start.canvas.sep .btn:hover{background:#fff;border-color:#fff}
/* the answers so far, along the foot */
.start.canvas.sep .wz-feet,.start.canvas.sep .rs-foot{color:rgba(241,237,232,.6)}

/* the photographs, the full height of the right */
.start.canvas.sep .open>.side{grid-area:pics;position:relative;top:auto;left:auto;right:auto;
  width:auto;height:auto;min-height:100vh;max-width:none;padding:0;margin:0;display:block;
  background:var(--forest);overflow:hidden;--dr-side:50vw;--bt-side:50vw}
/* the drift was pale decoration behind a shell ground; on forest it reads as scatter, so the column
   is one photograph or one film instead, and the drift steps aside */
.start.canvas.sep .open>.side .dr-field{display:none}
.start.canvas.sep .open>.side .bt-fill,
.start.canvas.sep .open>.side .bt-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.start.canvas.sep .open>.side .bt-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(12,13,10,.5),rgba(12,13,10,0) 45%)}
.start.canvas.sep .open>.side .bt-cap{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vh,38px);
  z-index:2;margin:0;color:#fff;text-align:left}
.start.canvas.sep .open>.side .bt-cap b{display:block;font:400 22px/1.15 var(--face);font-weight:400}
.start.canvas.sep .open>.side .bt-cap span{display:block;margin-top:4px;font:600 8.5px var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.start.canvas.sep .open>.side .bookframe{position:absolute;inset:0;display:grid;place-items:center;padding:8%;z-index:1}
.start.canvas.sep .open>.side .bt-tall{position:absolute;left:0;top:0;right:0;bottom:0;transform:none;
  width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;z-index:1}

/* the way home, over the words; the contents rail steps aside under this shell */
.start.canvas.sep .open>.bt-mark{display:block;position:absolute;left:clamp(18px,3vw,44px);top:28px;z-index:6;color:#fff}
.start.canvas.sep .open>.bt-mark b{color:#fff}
.start.canvas.sep .open>.bt-mark i{color:rgba(241,237,232,.55)}
.start.canvas.sep .open>.bt-toc{display:none}
/* the first screen has the guidebook itself in the column, so the pool picture stands down */
.start.canvas.sep .open[data-at="begin"]>.side .bt-fill,
.start.canvas.sep .open[data-at="begin"]>.side .bt-film{display:none}
/* and that screen has a wordmark of its own, so the corner one stands down too */
.start.canvas.sep .open[data-at="begin"]>.bt-mark{display:none}

/* The answers, which were drawn for paper: a paper box, ink type, stone when chosen. Every property of
   that rule is set again here, not one of them, or the half left behind wins on forest. */
.start.canvas.sep .open>.qs .q .pills button{background:none;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(241,237,232,.26)}
.start.canvas.sep .open>.qs .q .pills button:hover{background:none;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(241,237,232,.75)}
.start.canvas.sep .open>.qs .q .pills button.on{background:var(--paper);color:var(--ink);box-shadow:none}
.start.canvas.sep .open>.qs .q .pills button b{color:inherit}
.start.canvas.sep .open>.qs .q .pills button i{color:rgba(241,237,232,.55)}
.start.canvas.sep .open>.qs .q .pills button.on i{color:rgba(65,64,66,.6)}

/* the cards and tiles that answer Where and What you enjoy: the word under the photograph, on forest */
.start.canvas.sep .hf-cards .c .t h3,.start.canvas.sep .tiles .tile span,.start.canvas.sep .tiles .tile b{color:#fff}
.start.canvas.sep .tiles .tile{background:none;box-shadow:inset 0 0 0 1px rgba(241,237,232,.2);color:#fff}
.start.canvas.sep .tiles .tile.on{box-shadow:inset 0 0 0 1px rgba(241,237,232,.85)}
.start.canvas.sep .wh-way{background:none;box-shadow:inset 0 0 0 1px rgba(241,237,232,.26);color:#fff}
.start.canvas.sep .wh-way i{color:rgba(241,237,232,.55)}
.start.canvas.sep .wh-way.on{background:var(--paper);color:var(--ink);box-shadow:none}
.start.canvas.sep .wh-way.on i{color:rgba(65,64,66,.6)}

/* the foot: the answers so far, and Back */
.start.canvas.sep .wz-feet,.start.canvas.sep .wz-feet *{color:rgba(241,237,232,.62);border-color:rgba(241,237,232,.2)}
.start.canvas.sep .wz-feet .btn{color:var(--ink)}

/* The old shell showed the picture column on the first screen and the cover only. Here it is the right
   half of every screen that is not laid out wide, so it is on the whole time; the film changes, it does not
   blink. The whole of that rule is set again: opacity, visibility, pointer-events and the transition. */
.start.canvas.sep .open>.side,
.start.canvas.sep .open[data-at]>.side,
.start.canvas.sep .open[data-at][data-busy]>.side{opacity:1;visibility:visible;pointer-events:none;transition:none}
.start.canvas.sep .open.wide>.side{display:none}

/* The foot, which was a paper strip across the bottom with the old shell's stone words on it. On forest it is
   the forest, under the words column only, and every property of the old rule is set again. */
.start.canvas.sep .wz-feet{position:fixed;left:0;right:50%;bottom:0;z-index:100;display:flex;
  align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(28px,5vw,64px);
  background:var(--forest);box-shadow:0 -1px 0 rgba(241,237,232,.14);color:rgba(241,237,232,.62)}
/* the foot stands outside .open, so the wide page is told by :has */
.start.canvas.sep:has(.open.wide) .wz-feet{right:0}
.start.canvas.sep .wz-feet .b{color:rgba(241,237,232,.62)}
.start.canvas.sep .wz-feet .b:hover{color:#fff}
.start.canvas.sep .wz-feet .b s{background:currentColor}
.start.canvas.sep .wz-feet .said{color:rgba(241,237,232,.62)}
.start.canvas.sep .wz-feet .wz-on{background:var(--paper);color:var(--ink)}
.start.canvas.sep .wz-feet .wz-on:hover{background:#fff}

/* Who is coming, the four ways: the old rule names the whole path, so this one does too, and sets
   every property of it again. Outlined on forest; paper when chosen. */
.start.canvas.sep .open>.qs .q .wh-way{background:none;box-shadow:inset 0 0 0 1px rgba(241,237,232,.26);color:#fff}
.start.canvas.sep .open>.qs .q .wh-way:hover{background:none;box-shadow:inset 0 0 0 1px rgba(241,237,232,.75)}
.start.canvas.sep .open>.qs .q .wh-way.on{background:var(--paper);box-shadow:none;color:var(--ink)}
.start.canvas.sep .open>.qs .q .wh-way b{color:inherit}
.start.canvas.sep .open>.qs .q .wh-way i{color:rgba(241,237,232,.55)}
.start.canvas.sep .open>.qs .q .wh-way.on i{color:rgba(65,64,66,.6)}

/* Where: the three cards share the words column rather than running past it. */
.start.canvas.sep .open:not(.wide)>.qs .q .hf-cards.hf-ways{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}

/* The name: the suggestions that fill the box. */
.start.canvas.sep .wz-sugh{color:rgba(241,237,232,.5)}
.start.canvas.sep .wz-sug{box-shadow:inset 0 0 0 1px rgba(241,237,232,.26);color:rgba(241,237,232,.85)}
.start.canvas.sep .wz-sug i{color:rgba(241,237,232,.5)}
.start.canvas.sep .wz-sug:hover{box-shadow:inset 0 0 0 1px rgba(241,237,232,.8);color:#fff}
.start.canvas.sep .wz-sug:hover i{color:#fff}
.start.canvas.sep .wz-sug.on{background:var(--paper);color:var(--ink);box-shadow:none}
.start.canvas.sep .wz-sug.on i{color:rgba(65,64,66,.6)}

/* The cover: your own, in a dashed box; the ring on the chosen colour; the foot under the words. */
.start.canvas.sep .shots .add{border-color:rgba(241,237,232,.4)}
.start.canvas.sep .shots .add:hover,.start.canvas.sep .shots .add.over{border-color:#fff;background:rgba(241,237,232,.1)}
.start.canvas.sep .shots .add s::before,.start.canvas.sep .shots .add s::after{background:rgba(241,237,232,.7)}
.start.canvas.sep .shots .add.over s::before,.start.canvas.sep .shots .add.over s::after{background:#fff}
.start.canvas.sep .shots .add b{color:#fff}
.start.canvas.sep .swatch button.on{box-shadow:0 0 0 2px var(--forest),0 0 0 4px var(--paper)}
.start.canvas.sep:has(.open[data-at="cover"]) .wz-feet{left:0;right:50%}

/* The calendar: the month line, its arrows and the day letters, pale on forest; the days themselves keep
   their paper and oat, which is the lodge's calendar as Jack asked for it. */
.start.canvas.sep .calwrap .cal .mh h3{color:#fff}
.start.canvas.sep .calwrap .cal .mh h3 span{color:rgba(241,237,232,.6)}
.start.canvas.sep .calwrap .cal .mh button{color:#fff}
.start.canvas.sep .calwrap .cal .mh button:hover{background:rgba(241,237,232,.14)}
.start.canvas.sep .calwrap .dow span{color:rgba(241,237,232,.5)}
.start.canvas.sep .open>.qs .q .bt-range{color:#fff}
.start.canvas.sep .open>.qs .q .bt-range i{color:rgba(241,237,232,.6)}
.start.canvas.sep .open>.qs .q h2{color:#fff}

/* The prototype's own pieces (build-onboard.py), scoped to this page: the quiet line under a field, the
   box on Where, the link on the last screen and what happens on its own. */
.start.canvas.sep .say{display:block;margin:10px auto 0;max-width:44ch;font:italic 400 15px/1.4 var(--serif);
  color:rgba(241,237,232,.55);text-align:center}
.start.canvas.sep .open>.qs .q .elsewhere{position:relative;width:min(600px,100%);margin:0 auto 28px}
.start.canvas.sep .open>.qs .q .elsewhere .an-pair{margin-top:10px}
.start.canvas.sep .open>.qs .q .link{display:flex;align-items:center;gap:14px;width:min(600px,100%);margin:28px auto 0;
  padding:14px 18px;border:1px solid rgba(241,237,232,.32)}
.start.canvas.sep .open>.qs .q .link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 15px var(--serif);color:#F1EDE8;text-align:left}
.start.canvas.sep .open>.qs .q .link button{flex:none;padding:9px 14px;border:0;background:var(--paper);color:var(--ink);
  font:600 8.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.start.canvas.sep .open>.qs .q .after{width:min(600px,100%);margin:26px auto 0;padding-top:20px;
  border-top:1px solid rgba(241,237,232,.18);text-align:left}
.start.canvas.sep .open>.qs .q .after p{display:block;margin:0 0 10px;text-align:center;font:600 8.5px var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:rgba(241,237,232,.55)}
.start.canvas.sep .open>.qs .q .after div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:8px 0;
  font:400 15px/1.5 var(--serif);color:rgba(241,237,232,.82)}
.start.canvas.sep .open>.qs .q .after div i{font-style:normal;color:rgba(241,237,232,.45)}
.start.canvas.sep .open>.qs .q .acts .back{color:rgba(241,237,232,.62)}
.start.canvas.sep .open>.qs .q .acts .back:hover{color:#fff}

/* The finder's own button, and the quiet acts under the box on Where. */
.start.canvas.sep .open>.qs .q .an-loc{color:rgba(241,237,232,.62);border-color:rgba(241,237,232,.3)}
.start.canvas.sep .open>.qs .q .an-loc:hover{color:#fff;border-color:#fff}
.start.canvas.sep .open>.qs .q .elsewhere .acts{margin-top:12px}

/* What you enjoy: twenty small tiles, five a row, the word under, on a measure the eye can take in.
   The old rule drew four a row across the whole width (Jack, 15 Sep: "design is a mess"). */
.start.canvas.sep .open.wide>.qs .q .wz-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 16px;
  width:min(1180px,100%);margin:0 auto}
.start.canvas.sep .open.wide>.qs .q .wz-card{color:#fff}
.start.canvas.sep .open.wide>.qs .q .wz-shot{aspect-ratio:3/2;background:rgba(241,237,232,.08)}
.start.canvas.sep .open.wide>.qs .q .wz-card h3{font-size:16px;margin-top:9px;color:#fff}
.start.canvas.sep .open.wide>.qs .q .wz-card.on .wz-shot::after{box-shadow:inset 0 0 0 3px var(--paper)}
@media(max-width:1100px){.start.canvas.sep .open.wide>.qs .q .wz-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.start.canvas.sep .open.wide>.qs .q .wz-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.start.canvas.sep .open.wide>.qs .q .wz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The months: outlined tiles, two a row, the name and its line; the thumbnail stood down (it was blank
   for most months anyway). The booked-places list on the sleep screen keeps its white rows. */
.start.canvas.sep .open[data-at="shape"]>.qs .q h1{margin-bottom:34px}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  width:100%;max-width:none;margin:0}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;
  align-items:center;padding:14px 18px 14px 14px;background:none;border:0;border-radius:0;min-height:0;width:100%;max-width:none;
  text-align:left;color:#fff;box-shadow:inset 0 0 0 1px rgba(241,237,232,.26);transform:none;
  transition:box-shadow .25s var(--wz-ease),background .25s var(--wz-ease)}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(241,237,232,.8)}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big.on{background:var(--paper);color:var(--ink);box-shadow:none}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big .pic{display:block;position:relative;overflow:hidden;aspect-ratio:1;
  grid-column:1;background:rgba(241,237,232,.1)}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big .side{display:block;grid-column:2;padding:0;min-width:0}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big .side h3{font-size:18px;color:inherit}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big .side .words{margin-top:4px;font-size:13px;color:rgba(241,237,232,.62)}
.start.canvas.sep .open[data-at="shape"]>.qs .q .feed .big.on .side .words{color:rgba(65,64,66,.6)}
@media(max-width:560px){.start.canvas.sep .open[data-at="shape"]>.qs .q .feed{grid-template-columns:1fr}}

/* A screen taller than the window (the months, the regions) starts under the wordmark instead of
   overflowing upwards out of the centred column; a short one stays centred. */
.start.canvas.sep .open>.qs{justify-content:safe center;padding-top:clamp(88px,11vh,124px)}
.start.canvas.sep .open.wide>.qs{padding-top:clamp(88px,11vh,124px)}

/* The part-way-through line wraps as words, never inside "Carry on" or "start again". */
.start.canvas.sep .bt-again{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;text-align:center}
.start.canvas.sep .bt-again u{white-space:nowrap}

/* A phone: the regions two a row, small, and the box's words at a size that fits. */
@media(max-width:700px){
  .start.canvas.sep .open.wide>.qs .q .hf-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .start.canvas.sep .open.wide>.qs .q .hf-cards .c{aspect-ratio:4/5;min-height:0}
  .start.canvas.sep .open>.qs .q .an-fld input{font-size:17px}
  .start.canvas.sep .open>.qs .q .wz-cards{gap:16px 12px}
}

/* How many, on a phone: the label above its row, the numbers wrapping, the foot cleared. */
@media(max-width:700px){
  .start.canvas.sep .open>.qs{padding-bottom:110px}
  .start.canvas.sep .open>.qs .q .wz-rows{grid-template-columns:minmax(0,1fr);gap:8px 0;justify-items:start;width:100%}
  .start.canvas.sep .open>.qs .q .wz-rows>.lab{margin-top:10px}
  .start.canvas.sep .open>.qs .q .wz-nums{grid-template-columns:repeat(auto-fill,44px);gap:6px;width:100%}
  .start.canvas.sep .open>.qs .q .wz-num{height:44px}
  .start.canvas.sep .open>.qs .q .wz-names{width:100%}
}

/* The interface review, 15 September: what was still paper's on forest. */
/* the finder's own error line, which the shell hides with every other hint */
.start.canvas.sep .open>.qs .q .hint.turned{display:block;color:rgba(241,237,232,.75)}
/* the fixed foot (76px) never covers the last row of a scrolling screen */
.start.canvas.sep .open>.qs,.start.canvas.sep .open.wide>.qs{padding-bottom:calc(clamp(56px,8vh,96px) + 76px)}
/* the wide screens keep a measure */
.start.canvas.sep .open.wide>.qs .q{max-width:1180px;margin-left:auto;margin-right:auto}
/* the places that suit: one face in its heading, and the line under the cards readable */
.start.canvas.sep .open>.qs .q .rs-q em{font-family:inherit;font-style:normal;font-size:inherit;font-weight:inherit}
.start.canvas.sep .open>.qs .q .rs-also{color:rgba(241,237,232,.5)}
.start.canvas.sep .rs-foot{border-top-color:rgba(241,237,232,.2)}
.start.canvas.sep .rs-foot .said i,.start.canvas.sep .rs-foot b i{color:rgba(241,237,232,.6)}
.start.canvas.sep .rs-foot u{color:#fff;border-bottom-color:rgba(241,237,232,.5)}
.start.canvas.sep .rs-foot .rs-count{color:rgba(241,237,232,.7)}
/* a found place: the way back from a wrong one */
.start.canvas.sep .undo{color:rgba(241,237,232,.62)}
.start.canvas.sep .undo u{color:#fff;border-bottom-color:rgba(241,237,232,.5)}
/* keyboard focus, visible on forest */
.start.canvas.sep :focus-visible{outline:2px solid rgba(241,237,232,.85);outline-offset:3px}
/* how many: the label above its row at every width, so the numbers never run under the film */
.start.canvas.sep .open:not(.wide)>.qs .q .wz-rows{grid-template-columns:minmax(0,1fr);gap:8px 0;justify-items:start;width:100%}
.start.canvas.sep .open:not(.wide)>.qs .q .wz-rows>.lab{margin-top:10px}
.start.canvas.sep .open:not(.wide)>.qs .q .wz-nums{grid-template-columns:repeat(auto-fill,50px);gap:8px;width:100%}
/* the trail along the foot: a hover that shows */
.start.canvas.sep .wz-feet .said button:hover{color:#fff;box-shadow:inset 0 -1px 0 rgba(241,237,232,.5)}
/* Use my location: no brown slab under the pointer */
.start.canvas.sep .open>.qs .q .an-loc:hover{background:none;color:#fff;border-color:#fff}
.start.canvas.sep .open>.qs .q .an-loc::before{background:rgba(241,237,232,.85);box-shadow:0 0 0 4px rgba(241,237,232,.18)}
/* Start, pressed: it stays paper while it works */
.start.canvas.sep .q .acts .btn[disabled]{background:var(--paper);border-color:var(--paper);color:var(--ink);opacity:.7}
/* the making screen, in the same room as the twelve before it */
.start.canvas.sep ~ .cr{background:var(--forest)}
.start.canvas.sep ~ .cr .cr-say,.start.canvas.sep ~ .cr b,.start.canvas.sep ~ .cr i,.start.canvas.sep ~ .cr span{color:var(--on-forest)}
.start.canvas.sep ~ .cr .cr-say{color:var(--on-forest)}
.start.canvas.sep ~ .cr .cr-say::before{background:radial-gradient(ellipse 58% 150% at 50% 50%,var(--forest) 58%,rgba(43,48,29,.97) 80%,rgba(43,48,29,0) 100%)}
/* the film holds the right half while a long screen scrolls */
.start.canvas.sep .open>.side{position:sticky;top:0;align-self:start;height:100vh;min-height:0}
/* the part-way line, outlined like the answers rather than a white slab */
.start.canvas.sep .bt-again{background:none;border:1px solid rgba(241,237,232,.32);color:rgba(241,237,232,.72)}
.start.canvas.sep .bt-again u{color:#fff;border-bottom-color:rgba(241,237,232,.5)}
/* the calendar's year, in the month's own face */
.start.canvas.sep .calwrap .cal .mh h3 span{font-family:inherit;font-style:normal}
/* the chip's cross, and the wordmark, light up */
.start.canvas.sep .wz-chips b:hover{color:#fff}
.start.canvas.sep .open>.bt-mark:hover b,.start.canvas.sep .open>.bt-mark:hover i{color:#fff}
/* the box on Where sits where every first control sits */
.start.canvas.sep .open>.qs .q .elsewhere .an-pair{margin-top:30px}

/* A picture still on its way (or one that never arrives on a slow connection) is a tinted panel, not a
   broken-image icon: the alt text and the icon are drawn in transparent. */
.start.canvas.sep .open>.qs .q .wz-shot img,.start.canvas.sep .open>.qs .q .hf-cards .c img{color:transparent;font-size:0}
.start.canvas.sep .open>.qs .q .hf-cards .c{background:rgba(241,237,232,.08)}
/* their names, a screen of their own: the field the width of the answers */
.start.canvas.sep .open>.qs .q .wz-names{width:min(560px,100%);margin:0 auto}
.start.canvas.sep .open>.qs .q .wz-names .acts{margin-top:14px}

/* Air under every question (Jack, 16 Sep: too close to the heading): the first control starts 30px down. */
.start.canvas.sep .open>.qs .q h1{margin-bottom:30px}
.start.canvas.sep .open[data-at="names"]>.qs .q .wz-names{margin-top:6px}

/* The ticks under Yes, ask them: a step in from the two answers, a little smaller. */
.start.canvas.sep .open>.qs .q .wh-ways.sub{margin:0 0 4px 22px;width:calc(100% - 22px);gap:8px}
.start.canvas.sep .open>.qs .q .wh-ways.sub .wh-way{padding:12px 16px}
.start.canvas.sep .open>.qs .q .wh-ways.sub .wh-way b{font-size:17px}

/* What will you call the trip (Jack, 16 Sep: "improving the design"): the name is set as a line of type on
   the ground, not in a paper box; under it, our suggestions as a quiet list with a small label. */
.start.canvas.sep .open[data-at="name"]>.qs .q .an-pair{max-width:none;width:min(600px,100%);margin-left:auto;margin-right:auto}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld{background:none;box-shadow:none;border:0;border-bottom:1px solid rgba(241,237,232,.45);padding:0}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld input{height:auto;padding:10px 0 14px;background:none;border:0;box-shadow:none;
  font:400 min(clamp(28px,3vw,38px), 28px + (clamp(28px,3vw,38px) - 28px) * 0.6)/1.15 var(--face);color:#fff;text-align:center;letter-spacing:-.01em}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld input::placeholder{color:rgba(241,237,232,.38)}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld input:focus{outline:0;box-shadow:none}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld:focus-within{border-bottom-color:#fff}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sugs{margin-top:38px}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sugh{margin-bottom:16px}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sugrow{display:grid;grid-template-columns:1fr;gap:0;width:min(600px,100%);margin:0 auto;
  border-top:1px solid rgba(241,237,232,.16)}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug{display:flex;justify-content:space-between;align-items:center;height:auto;padding:14px 4px;
  box-shadow:none;border-bottom:1px solid rgba(241,237,232,.16);font:400 19px var(--face);font-style:normal;color:rgba(241,237,232,.85);text-align:left}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug i{order:2;font:600 8.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(241,237,232,.45)}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug:hover{color:#fff;box-shadow:none}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug:hover i{color:#fff}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug.on{background:none;color:#fff}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug.on i{color:#fff}

/* One face in a heading (Jack, 14 Sep): the last word is no longer set in the script face. */
.start.canvas.sep .open>.qs .q h1 em{font-family:inherit;font-style:normal;font-weight:inherit;font-size:inherit}

@media(max-width:900px){
  .start.canvas.sep .open,.start.canvas.sep .open.wide{grid-template-columns:1fr;
    grid-template-areas:"pics" "words";min-height:0}
  .start.canvas.sep .open>.side{min-height:0;height:38vh;--dr-side:100vw}
  .start.canvas.sep .open>.qs{min-height:0;padding:34px 20px 80px}
  .start.canvas.sep .open>.bt-mark{left:18px;top:18px}
}
/* A phone, after the 900 rules so these win: the foot the whole width, room under the words for it, less
   film before the question, a scrim under the wordmark, the same 20px edge everywhere, a smaller heading. */
@media(max-width:900px){
  .start.canvas.sep .wz-feet{right:0;padding:12px 20px}
  .start.canvas.sep .open>.qs,.start.canvas.sep .open.wide>.qs{padding:34px 20px 110px}
  .start.canvas.sep .open>.side{position:relative;height:24vh;min-height:180px}
  .start.canvas.sep .open>.side .bt-veil{background:linear-gradient(to bottom,rgba(12,13,10,.5),rgba(12,13,10,0) 34%),
    linear-gradient(to top,rgba(12,13,10,.5),rgba(12,13,10,0) 45%)}
}
@media(max-width:700px){
  .start.canvas.sep{--wz-qsize:30px}
  .start.canvas.sep .open>.qs .q h1{font-size:30px}
}
@media(max-width:560px){
  .start.canvas.sep .open.wide>.qs .q .rs-top{grid-template-columns:1fr}
}

/* ================ A CHAPTER INSIDE THE NEW ROOM (16 Sep) ================ */
/* Jack, 16 September: "stop any link goign back to this version we did".

   A chapter shown in the September room's lightbox keeps every rule it has -
   the measure, the type, the components are all written against .canv-in and
   none of them moves. What is not drawn is the furniture the old room brought
   with it, because the new room is already the menu, the cover and the way
   through: the column with the contents, the bar at the foot, and the line
   that says who you are seen as.

   `data-embed` is set by the shell when the address says so, which is the one
   place every chapter passes through. */
.canv[data-embed]{grid-template-columns:minmax(0,1fr);background:var(--paper)}
.canv[data-embed]>.canv-side,
.canv[data-embed]>.canv-feet{display:none}
body:has(.canv[data-embed]) .seenas{display:none}
/* The chapter had the room beside it and now has the lightbox, which brings
   its own air; without this the words start 110px in from an edge that is no
   longer there. */
.canv[data-embed] .canv-qs{grid-column:1;padding:0 0 40px}
.canv[data-embed] .canv-in{width:100%;max-width:1020px;margin-inline:auto}
/* Nothing inside a lightbox needs to hold a viewport open. */
.canv[data-embed],
.canv[data-embed] .canv-qs{min-height:0}

/* ================ THE SEPTEMBER OPENING · how many, centred like the rest (18 Sep) ================ */
/* Jack, 18 September: "did you not fix this? every one is centered apart from
   this one."

   The fault he first reported was a mismatch - a centred heading standing over
   left-ranged rows of numbers - and there were two ways to settle it. He has
   said which: the opening is centred, so this screen is centred, and the
   answers come to the middle rather than the words going to the edge.

   Every property that ranged them left is set back, not one of them: the
   column's own alignment, the grid's items, and the rows of numbers inside it,
   which are grids of their own and would otherwise stay packed at the start. */
.start.canvas.sep .open[data-at="many"]>.qs{text-align:center}
.start.canvas.sep .open:not(.wide)>.qs .q .wz-rows{justify-items:center;text-align:center}
/* auto-FIT, not auto-fill: a full-width row of auto-fill tracks is already
   full, so there is nothing for justify-content to centre. Fit collapses the
   tracks nothing sits in and the numbers come to the middle. */
.start.canvas.sep .open[data-at="many"]>.qs .q .wz-nums{grid-template-columns:repeat(auto-fit,50px);
  gap:8px;width:100%;justify-content:center}
.start.canvas.sep .open[data-at="many"]>.qs .q .wh-said{text-align:center;justify-content:center}
.start.canvas.sep .open[data-at="many"] .bt-again{justify-content:center;text-align:center}

/* ================ THE SEPTEMBER OPENING · naming the trip, redrawn (16 Sep) ================ */
/* Jack, 16 September: the question and the answer were in the same face, it
   was not clear anything had to be typed, and the suggestions did not look
   like things to press.

   Every property the rules above set is set again here, not the one that
   shows: they drew a line of type on the ground and this draws a field, so
   the ground, the edge, the padding, the face, the size and the alignment all
   change together. */

/* ---- the field ---- */
.start.canvas.sep .open[data-at="name"]>.qs .q .an-pair{display:block;width:min(600px,100%);max-width:none;
  margin-left:auto;margin-right:auto;text-align:left}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-pair .lab{display:block;margin:0 0 10px;
  font:600 8.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(241,237,232,.5)}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld{display:block;background:rgba(241,237,232,.06);
  border:1px solid rgba(241,237,232,.42);border-bottom:1px solid rgba(241,237,232,.42);
  box-shadow:none;padding:0;transition:border-color .18s var(--ease),background .18s var(--ease)}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld:hover{border-color:rgba(241,237,232,.7)}
/* The words are typed, so they are set in the face the rest of the writing
   uses and at a size somebody types at - never the question's own. */
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld input{width:100%;height:auto;
  padding:17px 18px;background:none;border:0;box-shadow:none;
  font:400 21px/1.35 var(--serif);letter-spacing:0;color:#fff;text-align:left;
  caret-color:#fff}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld input::placeholder{color:rgba(241,237,232,.4)}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld input:focus{outline:0;box-shadow:none}
.start.canvas.sep .open[data-at="name"]>.qs .q .an-fld:focus-within{border-color:#fff;background:rgba(241,237,232,.1)}

/* ---- the suggestions, as things to press ---- */
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sugs{margin-top:30px;text-align:left}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sugh{width:min(600px,100%);margin:0 auto 12px;text-align:left}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sugrow{display:grid;grid-template-columns:1fr;gap:8px;
  width:min(600px,100%);margin:0 auto;border-top:0}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug{display:flex;justify-content:space-between;align-items:center;
  height:auto;padding:15px 17px;background:none;border:1px solid rgba(241,237,232,.28);border-bottom:1px solid rgba(241,237,232,.28);
  box-shadow:none;font:400 19px var(--face);font-style:normal;color:rgba(241,237,232,.88);text-align:left;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug i{order:2;font:600 8.5px var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:rgba(241,237,232,.45);font-style:normal}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug:hover{color:#fff;border-color:rgba(241,237,232,.85);
  background:rgba(241,237,232,.08);box-shadow:none}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug:hover i{color:#fff}
/* Taken: it is in the box above, so it reads as chosen rather than as another
   thing to press. */
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug.on i{color:rgba(65,64,66,.6)}

@media(max-width:700px){
  .start.canvas.sep .open[data-at="name"]>.qs .q .an-fld input{font-size:18px;padding:15px 15px}
  .start.canvas.sep .open[data-at="name"]>.qs .q .wz-sug{font-size:17px;padding:13px 14px}
}

/* ================ THE SEPTEMBER OPENING · the first screen, looked at again (17 Sep) ================ */
/* Jack, 17 September: "a nice video of scotland on the right, and the logo
   should be in white and it just should looke much better the left side".

   Every rule below undoes or replaces one written earlier in this sheet, so
   each sets every property its predecessor set rather than the one that shows.
   Nothing is added to the screen: it is still the mark, the heading and the
   button, which is what docs/BRIEF-opening-start.md settled. */

/* ---- the right: the film this screen was the one place to refuse ---- */
/* It was turned off here so the guidebook could stand in the column. It is
   wanted after all. */
.start.canvas.sep .open[data-at="begin"]>.side .bt-film{display:block}
.start.canvas.sep .open[data-at="begin"]>.side .bt-fill{display:block}
/* And the guidebook photograph, which the page now only draws where there is
   no film, is held off the film underneath it. */
.start.canvas.sep .open[data-at="begin"]>.side .bt-tall{display:none}

/* ---- the left: the mark ---- */
/* 02.png is an ink wordmark. brightness(0) takes every colour in it to black
   and invert takes that to white, which leaves the letterforms and their
   transparency exactly as drawn - so it is white at any size without a second
   file to keep in step. */
.start.canvas.sep .open[data-at="begin"]>.qs .q .bt-logo{width:118px;height:auto;display:block;
  margin:0 auto 40px;opacity:1;filter:brightness(0) invert(1)}

/* ---- the left: the words ---- */
/* On one line it was a caption the width of the column. On a measure it breaks
   where the sense does and the face has somewhere to stand. */
.start.canvas.sep .open[data-at="begin"]>.qs .q h1{font-size:min(clamp(40px,4.9vw,64px), 28px + (clamp(40px,4.9vw,64px) - 28px) * 0.6);line-height:1.03;
  letter-spacing:-.022em;max-width:13ch;margin-left:auto;margin-right:auto;margin-bottom:0}
.start.canvas.sep .open[data-at="begin"]>.qs .q .acts{margin-top:42px}
/* Off dead centre, because a block of type centred to the pixel in a tall
   column reads as low. */
.start.canvas.sep .open[data-at="begin"]>.qs .q{margin-bottom:5vh}

/* ---- the left: some depth ---- */
/* Flat colour beside a moving film is the flattest thing on the screen. A pool
   of light behind the words, laid over the ground rather than replacing it, so
   the forest is still the forest. */
.start.canvas.sep .open[data-at="begin"]>.qs{
  background-image:radial-gradient(118% 86% at 50% 40%,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 64%)}

@media(max-width:900px){
  .start.canvas.sep .open[data-at="begin"]>.qs .q .bt-logo{width:96px;margin-bottom:30px}
  .start.canvas.sep .open[data-at="begin"]>.qs .q h1{font-size:min(clamp(32px,7.4vw,44px), 28px + (clamp(32px,7.4vw,44px) - 28px) * 0.6);max-width:15ch}
  .start.canvas.sep .open[data-at="begin"]>.qs .q .acts{margin-top:32px}
  .start.canvas.sep .open[data-at="begin"]>.qs .q{margin-bottom:0}
}

/* ================ THE SEPTEMBER OPENING · what kind of trip, drawn tight (17 Sep) ================ */
/* Jack, 17 September: "we dont need sub titles here, and ideally as much in
   the view without scrolling as possible so maybe more like the other styles
   of pickers".

   So it is `wh-way` with nothing but its label - the picker the flow already
   has, used the way `pills` is used, which is the one that carries no second
   line. Three across rather than four, because this sits in the question's own
   side with the film beside it, and four would break "Here for a wedding" over
   two lines.

   Every property the roomier answers set is set again here: the padding, the
   size and the leading all change together, or the half left behind decides
   how tall the tile is. */
.start.canvas.sep .open[data-at="sort"]>.qs .q .wh-ways{--wh-cols:3;gap:8px;max-width:none;width:100%}
.start.canvas.sep .open[data-at="sort"]>.qs .q .wh-way{padding:15px 16px;text-align:left;
  display:flex;align-items:center;min-height:0}
.start.canvas.sep .open[data-at="sort"]>.qs .q .wh-way b{display:block;font:400 17px/1.25 var(--face);
  font-weight:400;color:inherit}
/* The words above them take less room, so the whole list is in view. */
.start.canvas.sep .open[data-at="sort"]>.qs .q h1{margin-bottom:12px}
.start.canvas.sep .open[data-at="sort"]>.qs .q .hint{margin-bottom:26px}

@media(max-width:1100px){
  .start.canvas.sep .open[data-at="sort"]>.qs .q .wh-ways{--wh-cols:2}
}
@media(max-width:560px){
  .start.canvas.sep .open[data-at="sort"]>.qs .q .wh-ways{--wh-cols:1;gap:6px}
  .start.canvas.sep .open[data-at="sort"]>.qs .q .wh-way{padding:13px 14px}
  .start.canvas.sep .open[data-at="sort"]>.qs .q .wh-way b{font-size:16px}
}

/* ================ THE SEPTEMBER OPENING · how many, and the line that was never drawn (17 Sep) ================ */
/* Jack, 17 September: "fix the designa nd alignement of the how many is coming
   section - it doesnt look right". Measured at 1,400 rather than guessed. */

/* ---- a label belongs to the row under it ---- */
/* The grid gave every row the same gap, so Adults sat as far from its own
   numbers as those numbers sat from Children: three pairs reading as six loose
   things. Close to its own row, clear of the one before. */
.start.canvas.sep .open:not(.wide)>.qs .q .wz-rows{gap:6px 0}
.start.canvas.sep .open:not(.wide)>.qs .q .wz-rows>.lab{margin-top:26px}
.start.canvas.sep .open:not(.wide)>.qs .q .wz-rows>.lab:first-child{margin-top:0}

/* ---- the not-sure line, centred with everything else ---- */
.start.canvas.sep .open[data-at="many"]>.qs .q .undo{display:block;align-self:center;
  margin:22px auto 0;text-align:center;
  font:italic 400 15px var(--serif);color:rgba(241,237,232,.62);background:none;border:0;padding:0;cursor:pointer}
.start.canvas.sep .open[data-at="many"]>.qs .q .undo:hover{color:#fff}

/* No line under any question (Jack, 17 September: "i want no sub titles at all
   - it should be so clear that we dont need them"). `.q .hint{display:none}`
   already does it; nothing here undoes it. The exception it keeps is
   `.hint.turned`, which is not an explanation but an answer that went wrong.

   What the lines were carrying is carried by the screens instead: the kinds
   are cut to a handful by the two questions before them, so nobody has to be
   told the list is forgiving. */

/* The summary of what has been said sits away from the rows it summarises. */
.start.canvas.sep .open[data-at="many"]>.qs .q .wh-said{margin-top:34px}

@media(max-width:700px){
  .start.canvas.sep .open:not(.wide)>.qs .q .wz-rows>.lab{margin-top:20px}
  .start.canvas.sep .open[data-at="many"]>.qs .q .wz-nums{grid-template-columns:repeat(auto-fit,44px);gap:6px}
}