/* ===========================================================================
   Pages: the home hero, the page heroes, and the bands each page is built
   from. Section classes come from src/pages.py; an owner can reorder or
   restyle any band in Elementor without these rules getting in the way.
   =========================================================================== */

/* ================================================================== hero */

/* Their own photos crossfading under the navy: the slideshow is the section's
   own background (Style › Background › Slideshow), the scrim and the foam line
   are drawn here, so changing the photos in the editor keeps the look. The
   first photo is painted from here as well, so the hero is never an empty navy
   box while Elementor's script loads (or if it never does). */
body .elementor .hero{
  position:relative;isolation:isolate;
  background-color:var(--navy);background-size:cover;background-position:center;
  background-image:url("../img/hero-bar.webp");
  color:var(--on-dark);
}
/* Elementor prepends the slideshow to the section; under the scrim (z -1). */
body .elementor .hero > .elementor-background-slideshow{z-index:-2}
@media (prefers-reduced-motion:reduce){
  body .elementor .hero .elementor-ken-burns{transform:none;transition:none}
}
body .elementor .hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,19,49,.94) 0%,rgba(3,19,49,.78) 34%,rgba(3,19,49,.25) 68%,rgba(3,19,49,.1) 100%),
    linear-gradient(180deg,rgba(3,19,49,.55) 0%,rgba(3,19,49,0) 30%,rgba(3,19,49,0) 70%,rgba(3,19,49,.6) 100%);
}
body .elementor .elementor-section.hero > .elementor-container{
  min-height:min(100svh, 940px);align-items:center;
  padding-top:calc(var(--chrome-h) + clamp(1.5rem, .5rem + 2.5vw, 3.5rem));
  padding-bottom:calc(var(--edge-h) + var(--facts-lift) + clamp(2rem, 1rem + 2.5vw, 3.5rem));
  max-width:min(1440px,100%);padding-inline:var(--gutter);
}
body .elementor .hero-copy > .elementor-widget-wrap{max-width:50rem}
body .elementor .hero-title .elementor-heading-title{
  font-size:clamp(2.8rem, 1.5rem + 4vw, 5.5rem);line-height:.92;max-width:19ch;
  text-shadow:0 4px 30px rgba(3,19,49,.5);
}
body .elementor .hero .lede p{max-width:46ch}
body .elementor .hero .elementor-widget.script{margin-top:1.4rem}
body .elementor .hero-side > .elementor-widget-wrap{justify-content:flex-end;padding-top:2rem}
@media (max-width:1024px){
  body .elementor .hero::before{background:linear-gradient(180deg,rgba(3,19,49,.8) 0%,rgba(3,19,49,.72) 55%,rgba(3,19,49,.88) 100%)}
  body .elementor .elementor-section.hero > .elementor-container{flex-wrap:wrap;min-height:0}
  body .elementor .hero > .elementor-container > .elementor-column{width:100%}
  body .elementor .hero-side > .elementor-widget-wrap{justify-content:center;padding-top:2.5rem}
}

/* the foam line along a tide edge (bottom), and along a rising one (top) */
body:not(.elementor-editor-active) .elementor .edge-tide::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--edge-h);z-index:1;pointer-events:none;
  background:var(--foam-c, rgba(220,235,255,.75));
  -webkit-mask:var(--foam-down) bottom / calc(var(--edge-h) * 24) var(--edge-h) repeat-x;
          mask:var(--foam-down) bottom / calc(var(--edge-h) * 24) var(--edge-h) repeat-x;
}
body:not(.elementor-editor-active) .elementor :is(.sec-foam,.sec-paper,.sec-navy,.tf-el-catch).edge-tide-top::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--edge-h);z-index:1;pointer-events:none;
  background:var(--foam-c, rgba(255,255,255,.9));
  -webkit-mask:var(--foam-up) top / calc(var(--edge-h) * 24) var(--edge-h) repeat-x;
          mask:var(--foam-up) top / calc(var(--edge-h) * 24) var(--edge-h) repeat-x;
}
body .elementor .sec-foam{--foam-c:rgba(0,62,143,.28)}
body .elementor .sec-paper{--foam-c:rgba(0,62,143,.22)}
body .elementor .sec-slate{--foam-c:rgba(244,241,232,.5)}
body .elementor .tf-el-catch{--foam-c:rgba(220,235,255,.6)}

/* ============================================================= page heroes */

body .elementor .page-hero{
  position:relative;isolation:isolate;
  background-color:var(--navy);background-size:cover;background-position:center;color:var(--on-dark);
}
body .elementor .page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(3,19,49,.92) 0%,rgba(3,19,49,.55) 45%,rgba(3,19,49,.35) 100%),
    linear-gradient(90deg,rgba(3,19,49,.75) 0%,rgba(3,19,49,0) 70%);
}
body .elementor .elementor-section.page-hero > .elementor-container{
  min-height:min(74svh, 720px);align-items:flex-end;
  padding-top:calc(var(--chrome-h) + 3rem);padding-bottom:calc(var(--edge-h) + clamp(2.5rem, 2rem + 2.5vw, 4.5rem));
  max-width:var(--container);padding-inline:var(--gutter);
}
body .elementor .page-hero-copy > .elementor-widget-wrap{max-width:52rem}
body .elementor .page-hero .lede p{max-width:54ch}
@media (max-width:767px){
  body .elementor .elementor-section.page-hero > .elementor-container{min-height:min(78svh, 620px)}
}

/* ================================================================= home */

/* the house in four facts: a cream card floated across the hero's tide line.
   The band is clear where it rises into the hero, paper below it, so the
   wave under it starts on the same paper. */
body .elementor .facts{
  position:relative;z-index:3;margin-top:calc(-1 * var(--facts-lift));
  padding:0 0 clamp(.5rem, .25rem + .8vw, 1.25rem);
  background:linear-gradient(180deg,transparent var(--facts-lift),var(--paper) var(--facts-lift));
}
body .elementor .elementor-section.facts > .elementor-container{
  max-width:min(1180px, calc(100% - 2 * var(--gutter)));
  padding:clamp(1.15rem, .9rem + .9vw, 1.75rem) clamp(.4rem, .1rem + 1vw, 1.1rem);
  background:linear-gradient(180deg,#FFFDF8,#F3EDE2);border:1px solid rgba(194,145,43,.42);border-radius:22px;
  box-shadow:inset 0 1px 0 #fff,0 40px 70px -40px rgba(3,19,49,.85),0 14px 30px -18px rgba(3,19,49,.45);
}
body .elementor .facts > .elementor-container > .elementor-column + .elementor-column::before{
  content:"";position:absolute;left:0;top:10%;bottom:10%;width:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(194,145,43,0),rgba(194,145,43,.6),rgba(194,145,43,0));
}
body .elementor .facts .elementor-column > .elementor-widget-wrap{padding:.3rem clamp(.8rem, .3rem + 1.1vw, 1.5rem)}
body .elementor .facts .elementor-widget:not(:last-child){margin-bottom:.5rem}
body .elementor .fact-k .elementor-heading-title{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-size:clamp(1.15rem, .95rem + .55vw, 1.5rem);font-weight:800;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;color:var(--navy);
}
body .elementor .fact-k .elementor-heading-title::before{
  content:"";width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--navy) var(--fi) center / 22px no-repeat;
  box-shadow:0 0 0 3px #FFFDF8,0 0 0 4.5px rgba(194,145,43,.6);
}
body .elementor .fact-since{--fi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2B04A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.4' r='5.4'/%3E%3Cpath d='m8.6 13.6-1.6 6.8 5-2.6 5 2.6-1.6-6.8'/%3E%3C/svg%3E")}
body .elementor .fact-fresh{--fi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2B04A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 12c2.2-3.4 5.2-5.2 8.3-5.2 2.6 0 4.7 1.6 6.1 5.2-1.4 3.6-3.5 5.2-6.1 5.2-3.1 0-6.1-1.8-8.3-5.2Z'/%3E%3Cpath d='M6.6 12 3 7.6v8.8Z'/%3E%3Ccircle cx='17' cy='11.2' r='.8'/%3E%3Cpath d='M11.6 8.4c.9 1.1 1.3 2.3 1.3 3.6s-.4 2.5-1.3 3.6'/%3E%3C/svg%3E")}
body .elementor .fact-oyster{--fi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2B04A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4c4.7 0 8.6 3.2 8.6 7.7 0 4.9-3.9 9.5-8.6 9.5s-8.6-4.6-8.6-9.5c0-4.5 3.9-7.7 8.6-7.7Z'/%3E%3Cpath d='M12 7.4c2.7 0 4.7 1.7 4.7 4 0 2.7-2.1 4.9-4.7 4.9s-4.7-2.2-4.7-4.9c0-2.3 2-4 4.7-4Z'/%3E%3Ccircle cx='12.6' cy='11.6' r='1.3'/%3E%3C/svg%3E")}
body .elementor .fact-patio{--fi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2B04A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8.4 5-13.6 14.4-14.4C19.6 14 14.4 19 6 19Z'/%3E%3Cpath d='M5 19c3.4-3.6 6.6-6.6 10-9'/%3E%3C/svg%3E")}
body .elementor .fact-t p{margin:0;padding-left:calc(42px + .7rem);font-size:.95rem;line-height:1.45;color:var(--text-2)}
@media (max-width:1024px){
  body .elementor .facts > .elementor-container{flex-wrap:wrap}
  body .elementor .elementor-section.facts > .elementor-container > .elementor-column{width:50%;margin-top:0}
  body .elementor .elementor-section.facts > .elementor-container > .elementor-column:nth-child(n+3){margin-top:1.1rem}
  body .elementor .facts > .elementor-container > .elementor-column + .elementor-column::before{display:none}
}
@media (max-width:560px){
  body .elementor .facts .elementor-column > .elementor-widget-wrap{padding-inline:.6rem}
  body .elementor .fact-k .elementor-heading-title{flex-direction:column;align-items:flex-start;gap:.55rem;font-size:1.1rem}
  body .elementor .fact-k .elementor-heading-title::before{width:36px;height:36px;background-size:19px}
  body .elementor .fact-t p{padding-left:0;font-size:.88rem}
}

/* the oyster bar, inside their blue-resin wave: the photo of the raw bar
   (Style › Background, swappable) stays put while the page scrolls past,
   and the old site's wave bands frame it top and bottom. The wave art is
   theirs; its white is painted in the colour of the band beside it. */
body .elementor .oyster-wave{
  --wave-top-fill:var(--paper);--wave-bot-fill:#F7F3EC;
  background-color:var(--navy);background-size:cover;background-position:center 55%;
  box-shadow:inset 0 0 0 100vmax rgba(3,19,49,.6);
  padding-top:calc(19.2vw * .8 + var(--section-y-tight));
  padding-bottom:calc(16.4vw * .8 + var(--section-y-tight));
}
body .elementor .sec-amb.oyster-wave::before,
body .elementor .sec-amb.oyster-wave::after{
  content:"";position:absolute;inset:auto 0;z-index:1;pointer-events:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;
}
body .elementor .sec-amb.oyster-wave::before{
  top:-1px;aspect-ratio:1800 / 344;
  background:url("../img/wave-top-art.webp") center / 100% 100% no-repeat,var(--wave-top-fill);
  -webkit-mask-image:url("../img/wave-top.webp");mask-image:url("../img/wave-top.webp");
}
body .elementor .sec-amb.oyster-wave::after{
  bottom:-1px;aspect-ratio:1800 / 294;
  background:url("../img/wave-bottom-art.webp") center / 100% 100% no-repeat,var(--tx-paper),var(--wave-bot-fill);
  -webkit-mask-image:url("../img/wave-bottom.webp");mask-image:url("../img/wave-bottom.webp");
}
body .elementor .sec-amb.oyster-wave > .elementor-container{z-index:2}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body .elementor .oyster-wave{background-attachment:fixed}
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  body .elementor .sec-amb.oyster-wave{background-attachment:scroll}
}
/* the band under it starts on the wave's own cream */
body .elementor .oyster-wave + .sec-shell{
  background-image:var(--tx-paper),linear-gradient(180deg,#F7F3EC 0%,#EEE7DC 100%);
  padding-top:var(--section-y-tight);
}
body .elementor .oyster-pop .title .elementor-heading-title{max-width:14ch}
body .elementor .oyster-pop .board{max-width:560px;margin:2.4rem auto 0}
body .elementor .oyster-pop .elementor-widget.ways-lead{margin-top:1.8rem;margin-bottom:.4rem}

/* the four cooked ways, as tiles on the glass */
body .elementor .oyster-pop .ways{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:0 0 1.9rem}
body .elementor .oyster-pop .way{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico name price" "ico note note";
  align-items:center;column-gap:.85rem;row-gap:.2rem;text-align:left;
  padding:.85rem 1rem;border-radius:16px;
  background:linear-gradient(180deg,rgba(220,235,255,.12),rgba(220,235,255,.05));border:1px solid rgba(180,213,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 30px -22px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease);
}
body .elementor .oyster-pop .way:hover{border-color:rgba(226,176,74,.65);transform:translateY(-2px)}
body .elementor .oyster-pop .way-ico{grid-area:ico;width:46px;height:46px;margin:0;background:rgba(3,19,49,.6);color:var(--gold-hi);box-shadow:0 0 0 1px rgba(226,176,74,.5)}
body .elementor .oyster-pop .way-ico .ico{width:24px;height:24px}
body .elementor .oyster-pop .way-name{grid-area:name;font-size:1.25rem;color:var(--white)}
body .elementor .oyster-pop .way-note{grid-area:note;font-size:.84rem;color:var(--on-dark-2)}
body .elementor .oyster-pop .way-price{grid-area:price;margin:0;padding:.22rem .65rem;background:var(--gold);color:var(--abyss);font-size:1.08rem}
body .elementor .oyster-pop .way-price .pl{border-color:rgba(3,19,49,.55)}
body .elementor .oyster-pop .ways-more{display:none}
@media (max-width:560px){ body .elementor .oyster-pop .ways{grid-template-columns:1fr} }

/* the story, on tin: two framed photos, one pinned over the other */
body .elementor .story-photos > .elementor-widget-wrap{padding:1rem 0 2rem}

/* the famous fish sandwich, chalked */
body .elementor .famous .board-bare .board-note{font-size:1.05rem;max-width:44ch}
body .elementor .famous .board-bare .dishes-feature{max-width:560px;margin-inline:auto}
body .elementor .famous .elementor-widget-button.btn{margin-top:1.2rem}
body .elementor .famous .chalk-body{text-align:center}

/* today's specials: a board on the paper, up only while they're switched on */
body:not(.elementor-editor-active) .elementor .specials-band:not(:has(.board)){display:none}
body .elementor .specials-band{padding-top:clamp(2.8rem, 2rem + 2.5vw, 4.5rem)}
body .elementor .specials-band .specials .board{max-width:640px;margin:46px auto 0}
body .elementor .specials-band .title .elementor-heading-title{max-width:13ch}
@media (max-width:1024px){ body .elementor .specials-band .specials .board{margin-top:3.2rem} }

/* the house favorites */
body .elementor .favourites .tins{max-width:1180px;margin-inline:auto}

/* the bar band: the cocktail board over the room */
body .elementor .bar-band .board{max-width:760px;margin-left:auto}
@media (max-width:1024px){ body .elementor .bar-band .board{margin:1rem auto 0} }

/* reviews: the rating holds still on the left while four quotes pass */
body .elementor .reviews-intro > .elementor-widget-wrap{position:sticky;top:calc(var(--chrome-h) + 1.5rem);align-self:flex-start}
body .elementor .reviews-intro .title .elementor-heading-title{max-width:12ch}
body .elementor .reviews-intro .rating{
  display:flex;justify-content:flex-start;margin:1.8rem 0 0;padding:1.3rem 1.5rem;border-radius:20px;
  background:var(--white);border:1px solid rgba(0,62,143,.12);box-shadow:0 22px 44px -30px rgba(0,62,143,.55);
}
body .elementor .reviews-list .reviews{columns:2 250px}
@media (max-width:1024px){ body .elementor .reviews-intro > .elementor-widget-wrap{position:relative;top:auto} }

/* fresh off the line: their own photos, edge to edge */
body .elementor .snaps-head{padding-bottom:clamp(1.6rem, 1rem + 1.6vw, 2.6rem)}
body .elementor .snaps-head .title .elementor-heading-title{max-width:16ch}
body .elementor .snaps-follow .elementor-widget.body p{margin:0}
body .elementor .snaps{background:var(--abyss)}
body .elementor .elementor-section.snaps > .elementor-container{max-width:none;padding:0}
body .elementor .snaps > .elementor-container > .elementor-column > .elementor-widget-wrap{padding:0;flex-wrap:nowrap}
/* two photos to a column: six across on a desktop, a 3 x 2 grid on a tablet,
   two across on a phone */
body .elementor .snaps .elementor-widget.snap{width:50%;flex:0 0 50%;margin:0;overflow:hidden}
body .elementor .snap img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;border-radius:0;
  transition:transform .9s var(--ease),filter .5s var(--ease);
}
@media (hover:hover){ body .elementor .snaps .snap:hover img{transform:scale(1.06);filter:saturate(1.15)} }
@media (max-width:1024px) and (min-width:768px){
  body .elementor .snaps > .elementor-container > .elementor-column > .elementor-widget-wrap{flex-wrap:wrap}
  body .elementor .snaps .elementor-widget.snap{width:100%;flex-basis:100%}
}
@media (max-width:767px){
  body .elementor .elementor-section.snaps > .elementor-container > .elementor-column{margin-top:0}
}

/* visit: navy, the hours board beside */
body .elementor .visit .hours.board,body .elementor .walkin .hours.board,body .elementor .contact-visit .hours.board{max-width:520px;margin-inline:auto}

/* ================================================================= menu */

/* the hero, the food and the bar are one long board in the old menu's flat
   charcoal: no chalk smudge, no seams between the sections */
body .elementor :is(.menu-hero,.sec-menu){background-color:var(--charcoal);background-image:none}
body .elementor :is(.menu-hero,.sec-menu)::before{content:none}
body .elementor .menu-hero{padding-top:calc(var(--chrome-h) + var(--section-y-tight));padding-bottom:clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem)}
body .elementor .sec-menu .menu-tabs{background:rgba(29,30,32,.94)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body .elementor .sec-menu .menu-tabs{background:rgba(29,30,32,.84)}
}
body .elementor .menu-hero .chalk-body{font-size:1.08rem}
body .elementor .menu-hero .menu-key{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.1rem;margin-top:.2rem}
body .elementor .menu-hero .menu-key span{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
body .elementor .menu-hero .chalk-body strong{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;border:1.5px solid var(--chalk-y);border-radius:1em;font-family:var(--font-chalk);font-weight:400;font-size:.85em}

/* the board: the tabs sit right under the hero */
body .elementor .sec-menu{padding-top:0}
/* the board runs the width of the screen, as it does on the current site */
body .elementor .elementor-section.sec-menu > .elementor-container{max-width:none;padding-inline:var(--gutter)}
body .elementor .sec-menu .elementor-widget-shortcode{overflow:visible}
body .elementor .bar-menu{padding-top:clamp(3.4rem, 2.6rem + 3vw, 5.5rem)}
body .elementor .bar-menu .chalkmenu{margin-top:clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem)}
body .elementor .bar-menu .chalk-sign img{width:min(100%,460px)}

body .elementor .menu-foot .fine{max-width:70ch;margin-inline:auto}

/* ================================================================ about */

body .elementor .pillars{padding-bottom:2.2rem}

/* ============================================================ catering */

body .elementor .cta-band{background-image:radial-gradient(60% 80% at 50% 0%,rgba(42,99,181,.5),rgba(42,99,181,0) 70%),var(--tx-swell-dark)}
body .elementor .cta-band .title .elementor-heading-title{max-width:18ch}

/* ======================================================== reservations */

body .elementor .res-how .ticket{margin-top:1rem}

/* ============================================================== careers */

body .elementor .jobs-form > .elementor-widget-wrap{padding-top:.5rem}

/* ============================================================= contact */

body .elementor .contact-visit .map-frame{max-width:640px;margin-inline:auto}
/* the school of fish from their contact page, swimming behind the hours.
   The school swims on to the right, the way it faces, in an endless current
   (one tile wider than the band, moved by exactly one tile, so it never jumps
   or turns back), rising and settling as it goes. The badge fish swims the
   other way, across the whole band, in kicks and glides, nose lifting as it
   climbs; then the water is empty a moment before it comes round again. */
body .elementor .contact-visit{
  position:relative;isolation:isolate;overflow:hidden;
  padding-bottom:calc(var(--section-y) + clamp(3.5rem, 2.5rem + 3.5vw, 6rem));   /* open water under the cards */
}
body .elementor .contact-visit::before{
  content:"";position:absolute;left:calc(min(1500px,180vw) * -1);right:0;bottom:-12px;height:min(520px,60%);z-index:-1;pointer-events:none;
  background:url("../img/contact-school.webp") left bottom / min(1500px,180vw) auto repeat-x;opacity:.3;
}
body .elementor .contact-visit::after{
  content:"";position:absolute;left:100%;bottom:calc(var(--edge-h) + clamp(14px, .5rem + 1vw, 30px));z-index:-1;pointer-events:none;
  width:clamp(92px, 4.5rem + 4vw, 150px);aspect-ratio:362 / 154;
  background:url("../img/contact-badge-fish.webp") center / contain no-repeat;opacity:.55;
}
@media (prefers-reduced-motion:no-preference){
  body:not(.elementor-editor-active) .elementor .contact-visit::before{animation:tf-current-contact 90s linear infinite,tf-bob 11s ease-in-out infinite}
  body:not(.elementor-editor-active) .elementor .contact-visit::after{animation:tf-swim-across 34s linear infinite,tf-bob 5.5s ease-in-out infinite,tf-pitch 5.5s ease-in-out infinite}
}
@keyframes tf-current-contact{to{translate:min(1500px,180vw) 0}}
/* across the band, right to left, in four kicks and glides; off-stage for the last stretch */
@keyframes tf-swim-across{
  0%{translate:0 0;animation-timing-function:cubic-bezier(.3,.5,.6,.85)}
  20%{translate:calc((100vw + 100% + 40px) * -.25) 0;animation-timing-function:cubic-bezier(.3,.5,.6,.85)}
  40%{translate:calc((100vw + 100% + 40px) * -.5) 0;animation-timing-function:cubic-bezier(.3,.5,.6,.85)}
  60%{translate:calc((100vw + 100% + 40px) * -.75) 0;animation-timing-function:cubic-bezier(.3,.5,.6,.85)}
  80%,100%{translate:calc((100vw + 100% + 40px) * -1) 0}
}
@keyframes tf-pitch{0%,50%,100%{rotate:0deg}25%{rotate:2.5deg}75%{rotate:-2.5deg}}
/* the rooms page: a wide shot of the upstairs room */
body .elementor .res-hero{background-position:center 40%}

/* ============================================================= 404 etc. */

.tf .lost{padding-bottom:clamp(4.5rem, 3rem + 5vw, 7.5rem)}
/* the badge fish, swimming off the page: a white mask tinted ice */
.tf .lost-fish{
  display:block;width:min(300px,64%);aspect-ratio:900 / 350;margin:0 auto 1.6rem;
  background:var(--ice);opacity:.85;
  -webkit-mask:url("../img/fish-white.png") center / contain no-repeat;mask:url("../img/fish-white.png") center / contain no-repeat;
  transform:scaleX(-1);
}
.tf .lost-lede{max-width:52ch;margin:1.2rem auto 0;color:var(--on-dark-2);font-size:1.12rem}
.tf .lost-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:2rem 0 0}