/* The accommodation page, September 2026.

   Everything here is stay4-tokens.html's, and only what that page adds to
   _shared.css: the calendar, the panel beside it, the amenities, the chips,
   the area band and the two guide cards.

   And, since 6 September, the buttons. The shared sheet used to be written
   with stay4 as its source of truth for those, and is not any more - it
   holds the convention every mock since 3 September uses, where .btn is the
   filled button for a paper ground. This page is older: its buttons all sit
   inside a forest box that is not marked .forest, so its own .btn is the
   paper one, and saying so here is what keeps them from coming out forest
   on forest.

   Deliberately left out: the bar and the menu (shared components, not
   redrawn), the type studies at the foot of the mock (.studies, .study,
   .tag, .note, .two, .stack, .fv, .figs2, .figs3, .short.paper and the
   .cal.strike / .cal.blank calendars, which are Fable showing the options
   rather than the page), and .tiles, which is styled in the mock and drawn
   nowhere in it.                                                          */

/* ---- the buttons, which all sit in the forest box ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;flex:1;min-height:50px;padding:0 22px;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(--paper);color:var(--forest);background:var(--paper);transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn:hover{background:#fff;border-color:#fff}
.btn.quiet{background:transparent;color:var(--on-forest);border-color:rgba(241,237,232,.55)}
.btn.quiet:hover,.btn.quiet.on{background:var(--on-forest);color:var(--forest);border-color:var(--on-forest)}

/* ---- the availability panel ---- */
.avail{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.7fr);gap:clamp(40px,6vw,110px);align-items:start}
.cal{max-width:520px}
.cal .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.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}
.cal .mh h3 span{font-family:var(--serif);font-style:italic;font-size:.75em;color:var(--ink-55);margin-left:12px}
.cal .mh .sq button{width:40px;height:40px;background:transparent;color:var(--ink)}
.cal .mh .sq button svg{width:18px;height:18px}
.cal .mh .sq button:hover{background:var(--paper)}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.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:16px}
#availability .head{margin-bottom:clamp(40px,6vh,64px)}
.days button{aspect-ratio:1;display:grid;place-items:center;font-family:var(--serif);font-size:16.5px;color:var(--ink);position:relative;transition:background .2s,color .2s;font-variant-numeric:tabular-nums;background:var(--paper)}
.days button:hover{background:#fff}
.days .pad{visibility:hidden}
.days .past,.days .booked{background:transparent;color:var(--ink-35);pointer-events:none}
.days .in{background:var(--bracken-soft);color:var(--shell)}
.days .from,.days .to{background:var(--bracken);color:var(--shell)}
.days .today::after{content:"";position:absolute;left:50%;bottom:16%;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateX(-50%)}

/* ---- the panel that answers it ---- */
.pick{background:var(--forest);color:var(--on-forest);padding:clamp(28px,3.2vw,44px) clamp(28px,3.2vw,48px);position:sticky;top:calc(var(--bar) + 24px)}
.pick h3{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.1;color:#fff;margin-bottom:18px}
.pick .when{font-family:var(--serif);font-size:19px;line-height:1.5;min-height:3em}
.pick .when b{font-weight:500;color:#fff}
.pick .when i{display:block;font-style:italic;font-size:15.5px;color:var(--on-forest-55);margin-top:8px}
.pick .sum{margin-top:20px;display:grid;gap:8px;font-family:var(--serif);font-size:16.5px}
.pick .sum div{display:flex;justify-content:space-between;gap:16px}
.pick .sum div b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.pick .btns{margin-top:24px;flex-direction:column}
.pick .fine{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--on-forest-55)}
@media(max-width:900px){.avail{grid-template-columns:1fr}.pick{position:static}}

/* ---- the amenities ---- */
.amen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.amen figure .ph{aspect-ratio:var(--tall)}
.amen figcaption{margin-top:12px;font-family:var(--face);font-weight:400;font-size:clamp(19px,1.6vw,23px);line-height:1.15}
.amen figcaption i{display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-75);margin-top:4px}
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(40px,6vh,64px)}
.groups h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px;margin-bottom:14px}
.groups .chips{margin-top:0}
@media(max-width:900px){.amen{grid-template-columns:repeat(2,minmax(0,1fr))}.groups{grid-template-columns:1fr}}

/* ---- the chips, and the line under them ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vh,40px)}
.chip{padding:12px 18px;background:var(--stone);font-family:var(--serif);font-size:15.5px;line-height:1;transition:background .3s}
.chip:hover{background:var(--stone-2)}
.chips .more{padding:12px 18px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--moss);display:inline-flex;align-items:center}
.ask{margin-top:clamp(28px,4vh,40px);font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75);max-width:60ch}
.ask a{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--moss);margin-left:8px}

/* ---- the area ---- */
.area{position:relative;min-height:min(84vh,820px);display:grid;align-items:end;overflow:hidden;background:var(--forest);color:#fff}
.area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.area .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,.1),rgba(20,24,20,.6))}
.area .in{position:relative;padding-bottom:clamp(40px,7vh,72px);padding-top:clamp(120px,20vh,200px)}
.area .kick{color:rgba(255,255,255,.8)}
.area h2{font-family:var(--face);font-weight:400;font-size:min(clamp(40px,5.4vw,78px), 28px + (clamp(40px,5.4vw,78px) - 28px) * 0.6);line-height:1;margin-top:14px;max-width:14ch;text-wrap:balance}
.area h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}

/* ---- the two guide cards ---- */
.guides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.guide{display:block;position:relative;aspect-ratio:var(--wide);overflow:hidden;background:var(--stone-2);color:#fff}
.guide img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.guide:hover img{transform:scale(1.03)}
.guide .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,.14) 45%,rgba(0,0,0,0) 65%)}
.guide .t{position:absolute;left:24px;right:24px;bottom:24px}
.guide .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)}
.guide h3{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.6vw,36px), 28px + (clamp(26px,2.6vw,36px) - 28px) * 0.6);line-height:1.08}
.guide .w{display:block;margin-top:8px;font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(255,255,255,.9)}
@media(max-width:700px){.guides{grid-template-columns:1fr}}

/* ---- the words that filter the rail ---- */
.tabs{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,28px);margin-bottom:clamp(20px,3vh,28px)}
.tabs button{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);padding:6px 0;transition:color .3s}
.tabs button:hover,.tabs button.on{color:var(--ink)}

/* ---- the pair of standing pictures in the reading ---- */
@media(max-width:600px){.pair{grid-template-columns:1fr}}

/* ---- the partner's Change tags ---- */

.edit-bar{background:var(--forest);color:var(--on-forest)}.edit-bar .in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:48px;padding-top:8px;padding-bottom:8px}.edit-bar span{font-family:var(--sans);font-size:13px}.edit-bar nav{display:flex;gap:4px;flex-wrap:wrap}.edit-bar nav a{font-family:var(--sans);font-size:12.5px;font-weight:500;padding:6px 10px;color:var(--on-forest);border:1px solid rgba(241,237,232,.35)}.edit-bar nav a:hover{background:var(--paper);color:var(--forest)}.edit-bar nav a.home{background:var(--paper);color:var(--forest);border-color:var(--paper)}
.edit-tag{display:inline-flex;align-items:center;gap:6px;margin:12px 8px 0 0;padding:6px 10px;background:var(--paper);border:1px solid var(--forest);color:var(--forest);font-family:var(--sans);font-size:12px;font-weight:500;transition:background .2s,color .2s}.edit-tag::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16z'/%3E%3C/svg%3E") center/contain no-repeat}.edit-tag:hover{background:var(--forest);color:var(--paper)}

/* ============================================================
   The opening hours, 7 September 2026.

   Approved by Jack from scratchpad/design-2026/hours-panel.html, then moved:
   the live sign sits under the title with the place, and the seven days sit
   in the forest panel under the short description. One box, not two.

   --lit is the one colour this adds to the September palette. An open sign is
   a green light in the world and Jack asked for one; it is pulled well down
   in saturation so it sits with forest and moss rather than shouting over
   them. It is used for nothing else.
   ============================================================ */

:root{--lit:#AFA065; --lit-dim:rgba(175,160,101,.28)}

/* The lamp hangs in the margin so the words line up with the title and the
   place above them - three lines, one left edge. Below 600px there is no
   margin to hang in, so it sits inline and the sign indents instead. */
.top .sign{display:inline-flex;align-items:baseline;gap:9px;margin-top:10px;font-family:var(--sans);font-size:13px;letter-spacing:.02em}
@media (min-width:600px){.top .sign{margin-left:-17px}}
.top .sign .lamp{width:8px;height:8px;border-radius:50%;flex:none;align-self:center;background:var(--lit);box-shadow:0 0 0 4px var(--lit-dim)}
.top .sign.is-shut .lamp{background:transparent;border:1px solid var(--ink-35);box-shadow:none}
.top .sign .word{font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px}
.top .sign .tail{font-family:var(--serif);font-size:14.5px;color:var(--ink-75)}
.top .sign.is-shut .word{color:var(--ink-55)}

@media (prefers-reduced-motion: no-preference){
  .top .sign .lamp{transition:background .3s var(--ease),box-shadow .3s var(--ease)}
}


/* ============================================================
   The head, rebuilt 7 September 2026 — option five.

   Jack, on the old two-column head: "it doesnt look good on desktop - this
   whole top part needs redesigned to suit these elements." He was right. The
   forest panel had grown to hold a description, a website, seven days and two
   buttons, and stood six hundred pixels tall beside a column carrying a title
   and one line.

   So: the name and whether the door is open, then the photographs at full
   width, then a band holding the sentence and the practical facts. The
   pictures are the strongest thing we hold about a place and now nothing
   stands between them and the name.
   ============================================================ */

.top.lead{padding-bottom:clamp(22px,3vh,34px)}
.top.lead .where{display:block;margin-top:10px}
.top.lead .sign{margin-top:12px}

/* A ground of its own. On paper it sat a shade off the stone above it and
   read as the same band continued; stone-2 is the next step down in the
   September palette and separates the two plainly. */
.ledge{background:var(--stone-2);padding:clamp(30px,4vh,46px) 0 clamp(30px,4vh,46px)}
.ledge .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:clamp(28px,5vw,64px);align-items:start}
.ledge .said{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink);max-width:32em;text-wrap:pretty}

/* The facts keep the right-hand column whether or not there is a sentence
   beside them. Without this they slid into the wide left column on every
   listing whose sentence has not been written yet, so the band looked like a
   different design from one listing to the next. */
.ledge .keys{display:grid;gap:11px;grid-column:2}
.ledge .keys>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:14px;align-items:baseline}
.ledge .keys>div>span:first-child{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-55)}
.ledge .keys>div>span:last-child{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink-75)}
.ledge .keys a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}


/* The week was here, in seven columns across the band, until Jack cut it on
   7 September: "we dont need this". The sign under the title answers the
   question people actually ask, and the seven days were a table nobody had
   asked for. The rules that drew it are gone with it, and so is HoursWeek -
   dead CSS and a dead export are two ways of leaving a room untidy. The
   design is in scratchpad/design-2026/hours-panel.html if it is ever wanted.
   ============================================================ */

@media (max-width:860px){
  .ledge .two{grid-template-columns:minmax(0,1fr);gap:26px}
  .ledge .keys{grid-column:1}
}

@media (max-width:520px){
  .ledge .keys>div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* A band with nothing to say still carries the two buttons, so it draws - but
   it does not need the height of one that does. */

/* The two actions, under the sign and beside the name.
   Save was a quiet button on a pale ground and could not be seen, so it is
   drawn with a real edge here rather than left to inherit.

   `flex` is said out loud for the same reason. build-stay.py copies this
   block into _stay.css, and that sheet redefines the bare .btn with `flex:1`
   because on stay4 every button sits inside the forest box and fills it. The
   two here do not: left to inherit they took half the ledger each, 325px of
   Save beside 325px of Add to trip, where the listing page draws the same
   two at 76 and 126. A button in the head is as wide as its own word. */
.top .acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.top .acts .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  padding:0 20px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background:var(--forest);color:var(--on-forest);border:1px solid var(--forest)}
.top .acts .btn.quiet{background:transparent;color:var(--ink);border-color:var(--ink-35)}
.top .acts .btn.quiet:hover{border-color:var(--ink)}

/* ============================================================
   The photographs, full size. 7 September 2026.

   Clicking one opened the page it was already on - PhotoRow takes an href and
   the listing was handing it its own address. This is the gallery those
   clicks were asking for.

   Forest at full strength for the ground, the caption and credit set as they
   are under the row, and the two arrows the Nearby rail uses. Nothing new.
   ============================================================ */

.lightbox{position:fixed;inset:0;z-index:200;background:var(--forest);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.5vh,26px);padding:clamp(46px,7vh,72px) clamp(18px,4vw,64px)}

.lightbox figure{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;
  max-width:min(100%,1200px);max-height:100%;min-height:0}
.lightbox img{max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain}

.lightbox figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:center;text-align:center}
.lightbox .cap{font-family:var(--serif);font-size:15px;color:var(--on-forest)}
.lightbox .by{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-forest-55)}

.lightbox .shut{position:absolute;top:clamp(14px,2.5vh,26px);right:clamp(16px,3vw,34px);
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-forest);background:none;border:0;padding:10px 4px;cursor:pointer}
.lightbox .shut:hover{text-decoration:underline;text-underline-offset:4px}

.lightbox .turn{display:flex;align-items:center;gap:20px}
.lightbox .turn button{width:46px;height:46px;border:1px solid rgba(241,237,232,.35);background:none;
  color:var(--on-forest);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox .turn button:hover{border-color:var(--on-forest)}
.lightbox .turn span{font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-forest-55);font-variant-numeric:tabular-nums}

.lightbox :focus-visible{outline:2px solid var(--on-forest);outline-offset:3px}

/* The row itself gives a pointer, since it now opens something. */
.shots a{cursor:zoom-in}

/* inside the Studio split screen ---------------------------------------
   The listing page, framed beside the questions. It stays the page a reader
   gets; it only drops the partner's own edit chrome and dims everything but
   the part being worked on. Reachable only with ?studio=1 as the owner, so
   a reader never meets any of it. */
.hs-framed [data-hs]{transition:opacity .45s cubic-bezier(.16,1,.3,1)}
.hs-framed [data-hs].hs-dim{opacity:.24}
.hs-framed [data-hs].hs-lit{opacity:1}
.hs-framed .edit-bar,.hs-framed .edit-tag{display:none}
/* The framed page is also a way in: a click on a block opens that part in the Studio (Jack, 12 September). */
.hs-framed [data-hs]{cursor:pointer}
.hs-framed [data-hs]:hover{outline:2px solid rgba(43,48,29,.5);outline-offset:-2px}

/* ---- the booking row under the opening (A3, the forest band) ---- */
.bkr{padding:30px 0}
.bkr-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 34px}
.bkr-lab{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);margin:0 0 12px}
.bkr-dates{display:flex;flex-wrap:wrap;gap:10px}
.bkr-dates a{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1px solid var(--ink-35);color:var(--ink);font-variant-numeric:tabular-nums;transition:background .2s,color .2s,border-color .2s}
.bkr-dates a:hover{background:var(--ink);color:var(--paper)}
.bkr-acts{display:flex;flex-wrap:wrap;gap:10px}
.bkr-go,.bkr-q{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bkr-go{background:var(--fill,var(--forest));color:var(--on-forest);border:1px solid var(--fill,var(--forest))}
.bkr-go:hover{background:var(--moss)}
.bkr-q{background:transparent;color:var(--ink);border:1px solid var(--ink-35)}
.bkr-q:hover{border-color:var(--ink)}
.bkr.a3{background:var(--forest);color:var(--on-forest);padding:34px 0}
.bkr.a3 .bkr-lab,.bkr.a3 .bkr-note{color:rgba(241,237,232,.62)}
.bkr.a3 .bkr-dates a{border-color:rgba(241,237,232,.5);color:var(--on-forest)}
.bkr.a3 .bkr-dates a:hover{background:var(--on-forest);color:var(--forest)}
.bkr.a3 .bkr-go{background:var(--on-forest);border-color:var(--on-forest);color:var(--forest)}
.bkr.a3 .bkr-q{color:var(--on-forest);border-color:rgba(241,237,232,.5)}
.bkr.a3 .bkr-q:hover{background:var(--on-forest);border-color:var(--on-forest);color:var(--forest)}

/* ---- the facts under the name as one sentence (B4) ---- */
.fx{margin-top:16px;color:var(--shell)}
.fx.b4{font:italic 400 clamp(19px,1.7vw,24px)/1.4 var(--serif);max-width:44ch;margin-top:14px}

/* ---- also featured in (C6) ---- */
.wa{padding:clamp(56px,8vh,100px) 0}
.wa h2{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.4vw,36px), 28px + (clamp(26px,2.4vw,36px) - 28px) * 0.6);line-height:1.1;margin:0 0 28px}
.wa-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:26px}
.wa-card{display:block;text-decoration:none;color:var(--ink)}
.wa-pic{display:block;aspect-ratio:4/5;background:var(--stone) center/cover no-repeat;margin:0 0 14px}
.wa-k{display:block;font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);margin:0 0 8px}
.wa-t{display:block;font:400 19px/1.25 var(--face)}
.wa-s{display:block;font:400 15px/1.5 var(--serif);color:var(--ink-75);margin-top:8px}
.wa-disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:var(--stone);margin:0 0 30px;text-decoration:none;color:var(--ink)}
.wa-disc .wa-pic{aspect-ratio:auto;min-height:320px;margin:0}
.wa-disc > span:last-child{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.wa-disc .wa-t{font-size:min(clamp(26px,2.4vw,34px), 28px + (clamp(26px,2.4vw,34px) - 28px) * 0.6)}

/* ---- the phone's Book bar (D1) ---- */
.sb{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.sb-l{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.sb-k{font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.sb-d{font:400 16px/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-go{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1px solid transparent}
.sb.d1{background:var(--forest);color:var(--on-forest)}
.sb.d1 .sb-k{color:rgba(241,237,232,.62)}
.sb.d1 .sb-go{background:var(--on-forest);color:var(--forest)}
.sb.live{transform:translateY(110%);transition:transform .35s var(--ease)}
.sb.live.on{transform:none}
html.sb-up .bellfab{bottom:calc(86px + env(safe-area-inset-bottom));transition:bottom .35s var(--ease)}

/* ---- the sheet's phone rules ---- */
@media (max-width:760px){.bkr-row{flex-direction:column;align-items:flex-start}
  .wa .wl-in{grid-template-columns:1fr}
  .wa .wl-in > div{grid-column:1}
  .wa .wl-label{margin:0 0 18px}
  .wa-grid{--cols:2 !important;gap:16px}
  .wa-big,.wa-disc{grid-template-columns:1fr}
  .wa-cols{columns:1}
  .fx.b6 .fx-n{font-size:min(34px, 28px + (34px - 28px) * 0.6)}
  .fx.b5 > .in{justify-content:flex-start}}
@media (min-width:761px){.sb.live{display:none}}

/* ---- the booking row, straightened ---- */
section.bkr .bkr-row{align-items:flex-end}
section.bkr .bkr-acts{align-items:stretch}
section.bkr .bkr-acts > style{display:none}
section.bkr .bkr-acts > a:not(#_),section.bkr .bkr-acts > button:not(#_),section.bkr .bkr-dates a:not(#_){height:50px;min-height:50px;box-sizing:border-box;padding:0 25px;display:inline-flex;align-items:center;justify-content:center;font:400 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;border-radius:0}
section.bkr .bkr-acts > button.wb-q:not(#_){border-color:rgba(241,237,232,.5);color:var(--on-forest)}
.p26 section.bkr .bkr-row{align-items:flex-end}
.p26 section.bkr .bkr-acts{align-items:stretch}
.p26 section.bkr .bkr-acts > style{display:none}
.p26 section.bkr .bkr-acts > a:not(#_),.p26 section.bkr .bkr-acts > button:not(#_),.p26 section.bkr .bkr-dates a:not(#_){height:50px;min-height:50px;box-sizing:border-box;padding:0 25px;display:inline-flex;align-items:center;justify-content:center;font:400 14.5px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;border-radius:0}
.p26 section.bkr .bkr-acts > button.wb-q:not(#_){border-color:rgba(241,237,232,.5);color:var(--on-forest)}
@media (max-width:760px){section.bkr .bkr-row,.p26 section.bkr .bkr-row{align-items:flex-start}section.bkr .bkr-dates a:not(#_),.p26 section.bkr .bkr-dates a:not(#_){height:auto;white-space:normal;padding-top:14px;padding-bottom:14px;line-height:1.3}}