/* t294 (owner): side bar on the right, opened by the red clip at the right end of the banner.
   Closed: only the left third of the clip shows at the screen edge. Open: the bar slides in and the
   clip turns upright and lands centred over the link list, clipped onto the list's top edge like a
   paper clip holding two sheets: its loop stands above the edge, its back rail runs down behind the
   list. The old edge-reveal footer now sits at the bottom of the bar. */
:root{
  --side-w:min(22rem, 86vw);
  --side-clip-w:3.9rem;
  --side-clip-h:calc(var(--side-clip-w) * 290 / 849);
  --side-clip-s:calc(var(--side-clip-w) / 849);
  --side-top:calc(var(--side-safe-t, 0px) + var(--banner-h) / 2);
  --side-pad-l:1.6rem;
  --side-pad-r:calc(var(--side-safe-r, 0px) + 1.4rem);
  /* t295: the list's top edge (the sheet the clip holds) and the list's centre line. */
  /* t297: the clip's top 149/849 (its fold, above the artwork's x = 900) stands above the list's top edge. */
  --side-clip-above:calc(var(--side-clip-w) * 149 / 849);
  --side-list-top:calc(var(--side-safe-t, 0px) + 1.1rem + var(--side-clip-above));
  /* t296 (owner): centred over the words About / Blog / Booking themselves. js/sidebar.js measures the
     words' text and sets --side-words-off (px from the bar's left edge); the list centre is only the fallback. */
  --side-list-cx:calc(100vw - var(--side-w) + var(--side-words-off, calc((1px + var(--side-pad-l) + var(--side-w) - var(--side-pad-r)) / 2)));
  --side-speed:.55s;
  --side-ease:cubic-bezier(.65,0,.25,1);
}
@media (max-width:560px){
  :root{--side-w:80vw;--side-clip-w:3.1rem}
}

/* Room for the clip's visible third to the right of the call icon. */
.banner{padding-right:calc(var(--margin) * .5 + var(--side-clip-w) / 3 + .35rem)}

/* The clip: two layers that move as one (t297). The front strands (fold, middle rail, inner loop, tip) sit above
   everything. The outer frame (outer rail, big loop, top rail) sits in a full-screen frame whose clip-path cuts out
   the sheet: the part of the bar below the list's top edge. The cut-out's left side moves with the bar (same time,
   same easing), so the outer frame is hidden behind the sheet on every frame of the open and close, not just at the end. */
.side-clip-back-wrap{
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index:46;
  pointer-events:none;
  clip-path:polygon(0 0, 100vw 0, 100vw var(--side-list-top), 100vw var(--side-list-top), 100vw 100vh, 0 100vh);
  transition:clip-path var(--side-speed) var(--side-ease);
}
html.side-open .side-clip-back-wrap{
  clip-path:polygon(0 0, 100vw 0, 100vw var(--side-list-top), calc(100vw - var(--side-w)) var(--side-list-top), calc(100vw - var(--side-w)) 100vh, 0 100vh);
}
.side-clip-back{position:absolute !important}
.side-clip-back,
.side-clip{
  position:fixed;
  left:0;
  top:0;
  width:var(--side-clip-w);
  height:var(--side-clip-h);
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  transform-origin:50% 50%;
  transform:translate(calc(100vw - var(--side-clip-w) / 3), calc(var(--side-top) - var(--side-clip-h) / 2)) rotate(0deg);
  transition:transform var(--side-speed) var(--side-ease), opacity .45s ease;
  opacity:0;
  pointer-events:none;
}
.side-clip{z-index:47;cursor:pointer;-webkit-tap-highlight-color:transparent}
.side-clip img,
.side-clip-back img{display:block;width:100%;height:100%;pointer-events:none}
/* The visible third is small, so the tap area reaches a little further than the drawing. */
.side-clip::before{content:"";position:absolute;inset:-.7rem 0 -.7rem -.45rem}
body.gate-open .side-clip-back,
body.gate-open .side-clip{opacity:1}
body.gate-open .side-clip{pointer-events:auto}
.side-clip:focus-visible{outline:2px solid var(--name);outline-offset:3px}
.side-clip:hover img{filter:brightness(1.15)}
body:has(.side-clip:hover) .side-clip-back img{filter:brightness(1.15)}

/* Open (t297, owner): turned a quarter anticlockwise, so the fold points up, centred over the words in the list
   (clip centre x = the words' centre x, set by js/sidebar.js). The fold stands above the list's top edge; below it
   the front strands lie over the sheet and the outer frame is hidden behind it. Closing turns it back clockwise. */
html.side-open .side-clip-back,
html.side-open .side-clip{
  transform:translate(calc(var(--side-list-cx) - var(--side-clip-w) / 2), calc(var(--side-list-top) - var(--side-clip-above) + var(--side-clip-w) / 2 - var(--side-clip-h) / 2)) rotate(-90deg);
}

/* The bar */
.side-bar{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:45;
  width:var(--side-w);
  background:var(--matte);
  border-left:1px solid rgba(255,255,255,.15);
  color:var(--name);
  display:flex;
  flex-direction:column;
  padding:var(--side-list-top) var(--side-pad-r) calc(var(--side-safe-b, 0px) + 1.1rem) var(--side-pad-l);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--side-speed) var(--side-ease), visibility 0s linear var(--side-speed);
  overflow-y:auto;
  overscroll-behavior:contain;
}
html.side-open .side-bar{
  transform:none;
  visibility:visible;
  transition:transform var(--side-speed) var(--side-ease), visibility 0s;
}
.side-shade{
  position:fixed;
  inset:0;
  z-index:43;
  background:rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--side-speed) ease, visibility 0s linear var(--side-speed);
}
html.side-open .side-shade{opacity:1;visibility:visible;transition:opacity var(--side-speed) ease, visibility 0s}

.side-nav{
  display:flex;
  flex-direction:column;
  margin:0;
  /* The sheet edge the clip holds; the links start below the clip. */
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:calc(var(--side-clip-w) - var(--side-clip-above) + .5rem);
}
.side-nav a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:.35rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  color:var(--name);
  text-decoration:none;
  font-size:1.35rem;
  letter-spacing:.02em;
}
.side-nav a:hover,
.side-nav a:focus-visible{color:var(--oxide);outline:none}

/* Footer contents at the bottom of the bar: the flask on the same line as the text (t295). */
.side-bar .site-footer,
html.footer-edge-open .side-bar .site-footer,
.side-bar .site-footer:hover,
.side-bar .site-footer:focus-within{
  position:static;
  transform:none;
  transition:none;
  margin-top:auto;
  min-height:0;
  width:auto;
  padding:1.2rem 0 0;
  background:transparent;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:.75rem;
  text-align:left;
}
.side-bar .footer-flask{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.2rem;
  min-height:44px;
  line-height:0;
}
.side-bar .footer-flask img{width:100%;height:auto;display:block}
.side-bar .footer-flask:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}
.side-bar .site-footer .footer-brand{flex:1 1 auto;justify-self:auto;text-align:left;font-size:.95rem}

@media (prefers-reduced-motion: reduce){
  .side-clip-back,.side-clip,.side-bar,.side-shade,.side-clip-back-wrap,
  html.side-open .side-clip-back,html.side-open .side-clip,html.side-open .side-bar,html.side-open .side-shade,html.side-open .side-clip-back-wrap{transition:none !important}
}
@media print{
  .side-clip-back-wrap,.side-clip-back,.side-clip,.side-bar,.side-shade{display:none !important}
}