/* 95 Creations demo — "club" layout: full-screen video scenes that slide over each other.
   Used by /beachclub (NARR Beach Club). /villa does not load this file.
   Each site only sets colours/fonts/images in its own theme.css (:root variables).
   Desktop sizes come from a 1440px-wide layout: 1rem = 16px at 1440×900. */

*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: clamp(11.2px, min(1.1111vw, 2.2222vh), 24px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-bg);
  overflow-x: hidden;              /* older Safari (no "clip") */
  overflow-x: clip;                /* never wider than the screen: no side edges when swiping */
  touch-action: pan-y pinch-zoom;  /* phones/tablets: scroll up/down only (zoom still works) */
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p, ul { margin: 0; padding: 0; font-weight: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
br.mb { display: none; }
.vh-probe { position: fixed; top: 0; left: 0; width: 0; height: 100lvh; visibility: hidden; pointer-events: none; }
.vh-probe + .vh-probe { height: 100svh; }
.anchor { height: 0; }
.head { font-family: var(--f-head); font-weight: 200; }

/* ---------- scenes: each one is a full screen and the next one slides up over it ----------
   --stick (set by JS) = min(0, screen height − scene height), so a scene taller than the
   screen stays put only once its bottom has reached the bottom of the screen */
.scene { position: sticky; top: var(--stick, 0px); min-height: 100lvh; background: var(--c-bg); }
.hero { z-index: 1; }
.welcome { z-index: 2; }
.coastal { z-index: 3; }
.xp { z-index: 4; }
.events { z-index: 5; }
.bg { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.bg-img, .bg-vid { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bg-vid { opacity: 0; transition: opacity .8s ease; }
.bg-vid.on { opacity: 1; }
.shade { position: absolute; inset: 0; pointer-events: none; }
/* black shading from the layout: opaque in one corner, clear in the opposite one */
.shade-tl-89  { background: linear-gradient(135deg, rgb(0 0 0 / .89), rgb(0 0 0 / .02)); }
.shade-tl-100 { background: linear-gradient(135deg, rgb(0 0 0 / 1), rgb(0 0 0 / 0)); }
.shade-tr-90  { background: linear-gradient(225deg, rgb(0 0 0 / .9), rgb(0 0 0 / .03)); }
.shade-tr-100 { background: linear-gradient(225deg, rgb(0 0 0 / 1), rgb(0 0 0 / 0)); }
.sc-in { position: relative; z-index: 1; min-height: 100lvh; margin-top: -100lvh; }
/* parallax: JS writes --y on every [data-s] element */
.par { transform: translate3d(0, var(--y, 0px), 0); }

/* small photos: soft placeholder while loading, then the photo fades in */
.sm-i, .cm-row img, .card-in, .ev-btn, .ev-pop { background-color: rgb(169 197 218 / .22); }
img.ld { opacity: 0; }
.sm-i img, .cm-row img, .card-in > img, .ev-btn img, .ev-pop > img { transition: opacity .5s ease, transform .6s ease; }

/* ---------- pill buttons: lift a little on hover ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgb(255 255 255 / .32);
  font-family: var(--f-btn);
  font-weight: 400;
  letter-spacing: var(--track-btn);
  padding-left: var(--track-btn);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}
a.pill { cursor: pointer; }
.pill:hover, .pill:focus-visible { transform: translateY(-.2rem); box-shadow: 0 .6rem 1.2rem rgb(0 0 0 / .18); background: rgb(255 255 255 / .46); }
.pill:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.pill-lg { width: 11.42rem; height: 3.51rem; font-size: 1.05rem; }     /* 183 × 56 */
.pill-xl { width: 15.84rem; height: 3.51rem; font-size: 1.05rem; }     /* 253 × 56 */
.pill-sm { width: 6.15rem; height: 1.894rem; font-size: .566rem; }     /* 98 × 30 */
.pill-ink, .pill-sm { color: var(--c-dark); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 7.1rem; color: #fff; pointer-events: none; }
.hdr::before {                     /* black 31% → clear */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 17rem;
  background: linear-gradient(rgb(0 0 0 / .31), rgb(0 0 0 / 0));
  pointer-events: none;
  transition: opacity .8s ease;
}
.hdr-logo { position: absolute; left: 5.58%; top: 4.44rem; width: 5.31rem; aspect-ratio: 85.9 / 21.95; }
.hdr-nav {
  position: absolute;
  left: 14.97%;
  top: 4.96rem;
  display: flex;
  font: 200 .6875rem/1 var(--f-head);          /* 11px */
  white-space: nowrap;
}
.hn-sep { padding: 0 .6em; }
.hdr-book { position: absolute; right: calc(16.95% + 2.1rem); top: 5.3rem; font: 200 .6875rem/1 var(--f-head); white-space: nowrap; }   /* sits just before the icons */
.hn, .hdr-book { transition: opacity .6s ease, color .3s ease; }
.hn:hover, .hdr-book:hover { color: var(--c-sea); }
.icons { position: absolute; left: 83.05%; top: 5.24rem; display: flex; align-items: center; gap: .65rem; }
.icons li { display: flex; transition: opacity .6s ease; }
.icons svg { display: block; fill: currentColor; }
.i-mail  { width: 1.102rem; height: .795rem; }
.i-phone { width: .786rem;  height: .79rem; }
.i-ig    { width: .767rem;  height: .766rem; }
.i-fb    { width: .8025rem; height: .789rem; }
.i-wa    { width: .8525rem; height: .8575rem; }
.i-line  { width: .904rem;  height: .9156rem; }
/* menu stays hidden until the page is scrolled; then it fades in one after another.
   The social icons show from the start on every device. */
.hdr:not(.on)::before, .hdr:not(.on) .hn, .hdr:not(.on) .hn-sep, .hdr:not(.on) .hdr-book { opacity: 0; }
.hdr:not(.on) a { pointer-events: none; }
.hdr a, .hdr .icons { pointer-events: auto; }
.hn-sep { transition: opacity .6s ease; }
.hdr.on .hn:nth-child(3), .hdr.on .hn-sep:nth-child(2) { transition-delay: .08s; }
.hdr.on .hn:nth-child(5), .hdr.on .hn-sep:nth-child(4) { transition-delay: .16s; }
.hdr.on .hn:nth-child(7), .hdr.on .hn-sep:nth-child(6) { transition-delay: .24s; }
.hdr.on .hdr-book { transition-delay: .32s; }

/* ---------- the big "Narr": intro, shimmer, then flies into the header logo ---------- */
.brand {
  --bw: min(71.6vw, 114.6svh);      /* 1031px wide in the layout */
  position: fixed;
  z-index: 52;
  left: calc(51.73vw - var(--bw) / 2);
  top: calc(45.3svh - var(--bw) / 7.83);
  width: var(--bw);
  aspect-ratio: 85.9 / 21.95;
  color: #fff;
  pointer-events: none;
  transform-origin: 0 0;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--ts, 1));
  will-change: transform;
}
.brand-in { position: absolute; inset: 0; animation: narr-in 1.45s cubic-bezier(.2, .7, .2, 1) .3s both; }
.brand-a, .brand-glow { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.brand-a { opacity: calc(.56 + .44 * var(--q, 0)); }
.brand-fx { position: absolute; inset: 0; opacity: calc(1 - var(--q, 0)); }
.brand-glow { filter: blur(calc(var(--bw) / 90)); opacity: 0; animation: narr-haze 3.6s ease-in-out 1.75s infinite; }
.brand-sheen {                     /* a soft band of white light moving across the letters */
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: var(--logo-mask, linear-gradient(transparent, transparent)) no-repeat calc(var(--bw) * -9 / 85.9) calc(var(--bw) * -40.3 / 85.9) / calc(var(--bw) * 100 / 85.9) calc(var(--bw) * 100 / 85.9);
  mask: var(--logo-mask, linear-gradient(transparent, transparent)) no-repeat calc(var(--bw) * -9 / 85.9) calc(var(--bw) * -40.3 / 85.9) / calc(var(--bw) * 100 / 85.9) calc(var(--bw) * 100 / 85.9);
}
.brand-sheen i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .75) 50%, rgb(255 255 255 / 0));
  transform: translate3d(-110%, 0, 0);
  animation: narr-sheen 4.2s ease-in-out 1.75s infinite;
}
@keyframes narr-in {
  from { opacity: 0; transform: scale(1.38); }
  to   { opacity: 1; transform: none; }
}
@keyframes narr-haze {
  0%, 100% { opacity: 0; }
  50%      { opacity: .75; }
}
@keyframes narr-sheen {
  0%       { transform: translate3d(-110%, 0, 0); }
  70%, 100% { transform: translate3d(240%, 0, 0); }
}
/* the opening: the picture shows in the middle first, then opens out to the left and right
   (two white halves slide apart; no fade). The halves move inside a screen-sized box,
   so they never widen the page. */
.flash {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  pointer-events: none;
  animation: flash-off 0s linear .9s both;
}
.flash::before, .flash::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: #fff;
  animation: .9s cubic-bezier(.65, 0, .35, 1) both;
}
.flash::before { left: 0; animation-name: open-l; }
.flash::after { right: 0; animation-name: open-r; }
@keyframes open-l { from { transform: none; } to { transform: translate3d(-100%, 0, 0); } }
@keyframes open-r { from { transform: none; } to { transform: translate3d(100%, 0, 0); } }
@keyframes flash-off { to { visibility: hidden; } }

/* ---------- 1. hero ---------- */
.hero .sc-in { height: 100lvh; }
.hero-bar {                        /* kept above the phone toolbar: measured from the bottom of 100svh */
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100lvh - 100svh + 4.44rem);
  height: 3.51rem;
  color: var(--c-dark);
}
.hero-tag {
  position: absolute;
  left: 9.03%;
  top: 50%;
  transform: translateY(-50%);
  font: 200 .869rem/1.2 var(--f-head);         /* 13.9px */
  letter-spacing: .37em;
  white-space: nowrap;
}
.hero-bar .pill { position: absolute; left: 78.65%; top: 0; }

/* ---------- 2. welcome: text fades in, then the photo strip rises and the text moves up ---------- */
/* extra scroll room while the stage stays put; a real box, not padding: a sticky stage can't move into its parent's padding */
.welcome::after { content: ""; display: block; height: 60lvh; }
.stage { position: sticky; top: var(--wstick, 0px); min-height: 100lvh; overflow: hidden; }
.w-in { display: flex; flex-direction: column; justify-content: center; padding: 7.2rem 0 2.6rem; }
.w-text { padding: 0 5% 0 14.3%; }
.w-t { font: 200 1.891rem/1.2 var(--f-head); letter-spacing: var(--track-head); text-transform: uppercase; }  /* 30.3px */
.w-m2 { margin-top: 2.76rem; }
.w-m3 { margin-top: 1.275rem; }
.w-m4 { margin-top: 3.38rem; }
.w-p { padding-left: .325rem; }
.w-m1 { --d: 0; }
.w-m2 { --d: .08; }
.w-m3 { --d: .16; }
.w-m4 { --d: .24; }
.w-mv { transform: translate3d(0, calc((1 - clamp(0, (var(--p, 1) - var(--d)) / .76, 1)) * 15lvh), 0); }
.w-strip { margin-top: 1rem; height: 24.07rem; transform: translate3d(0, calc((1 - var(--p, 1)) * 75lvh), 0); }

/* photo strips that move by themselves (pause on hover / off screen) */
.marq { position: relative; display: flex; overflow: hidden; }
.marq-track { flex: none; display: flex; }
.marq:hover .marq-track { animation-play-state: paused; }
html.js .scene:not(.is-on) .marq-track { animation-play-state: paused; }
.marq-x { height: 100%; }
.marq-x .marq-track { align-items: center; gap: 2.6rem; padding-right: 2.6rem; animation: marq-x 75s linear infinite; }
.sm-i { flex: none; overflow: hidden; }
.sm-i img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .6s ease; }
.sm-i:hover img { transform: scale(1.04); }
.sm-tall { width: 14.85rem; height: 19.56rem; }     /* 238 × 313 */
.sm-wide { width: 32.09rem; height: 24.07rem; }     /* 514 × 385 */
.sm-sq   { width: 19.56rem; height: 19.56rem; }
@keyframes marq-x { to { transform: translate3d(-100%, 0, 0); } }
@keyframes marq-y { to { transform: translate3d(0, -100%, 0); } }

/* ---------- 3. coastal elegance ---------- */
.c-in { display: flex; align-items: center; }
.c-col { position: absolute; left: 2.37%; top: 0; bottom: 0; width: 54.86%; }
.marq-y {
  height: 100%;
  flex-direction: column;
  padding-top: .4rem;
  -webkit-mask-image: linear-gradient(#000 74%, rgb(0 0 0 / 0));
  mask-image: linear-gradient(#000 74%, rgb(0 0 0 / 0));
}
.marq-y .marq-track { flex-direction: column; gap: 1.1rem; padding-bottom: 1.1rem; animation: marq-y 55s linear infinite; }
.cm-row { display: grid; grid-template-columns: 31.13% 1fr; column-gap: 2.2%; aspect-ratio: 100 / 40.8; }
.cm-flip { grid-template-columns: 1fr 31.13%; }
.cm-row img { min-width: 0; }
.cm-row img { width: 100%; height: 100%; object-fit: cover; }
.c-text { position: relative; margin-left: 52.56%; padding: 8rem 0 5rem; }
.c-h { font-family: var(--f-head); font-weight: 200; line-height: 1.2; letter-spacing: var(--track-head); }
.c-h span { display: block; }
.c-h1 { font-size: 1.5625rem; }                       /* 25px */
.c-h2 { font-size: min(3.75rem, 4.167vw); margin: .6rem 0 0 4.76rem; white-space: nowrap; }  /* 60px */
.c-body { margin: 3.62rem 0 0 5.14rem; max-width: 36rem; }
.c-body p + p { margin-top: 1.275rem; }

/* ---------- 4. the experience ---------- */
.x-in { padding: 8.86rem 4.89% 6.5rem 4.31%; }
.x-h { text-align: right; font: 200 3.75rem/1.2 var(--f-head); letter-spacing: var(--track-head); }   /* ends at the right edge of the cards */
.x-h span { display: inline-block; }
.x-grid { margin-top: 4.9rem; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.014%; row-gap: .53rem; }
.card-in {                         /* no overflow:hidden, so a card grows when its text needs more room */
  position: relative;
  aspect-ratio: 427 / 442.4;
  transition: transform .45s ease, box-shadow .45s ease;
}
.card-in:hover, .card-in:active { transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgb(0 0 0 / .35); }
.card-in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-in::after, .ev-btn::after, .ev-pop::after {   /* black fade at the bottom of every photo card */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / 0) 22.7%, rgb(0 0 0 / .668));
  pointer-events: none;
}
.card-in .pill { position: absolute; z-index: 2; top: 1.975rem; right: 1.575rem; }
.card-tx { position: relative; z-index: 1; padding: 62% .8rem 1.1rem 1.48rem; }
.card-t { font: 200 .9375rem/1.2 var(--f-head); letter-spacing: var(--track-head); }  /* 15px */
.card-s { margin: .775rem 0 0 .256rem; font-size: .875rem; line-height: 1.2; }
.card-d { margin: .71rem 0 0 .256rem; font-size: .875rem; line-height: 1.2; }

/* ---------- 5. events calendar ---------- */
.e-in { display: flex; align-items: center; padding: 7rem 0 4.5rem; }
.e-h {
  flex: none;
  width: 43.93%;
  padding-left: 16.83%;
  font: 200 min(4.554rem, 5.06vw)/1.2 var(--f-head);       /* 72.9px */
  letter-spacing: var(--track-head);
  white-space: nowrap;
  opacity: .92;
}
.e-h span { display: block; }
.e-h2 { padding-left: .4em; }   /* layout: two spaces; a little less so it never touches the calendar */
.cal-wrap { width: 51.14%; }
.cal { position: relative; }
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 2.36%; height: 6.48rem; }
.cal-head { height: .8rem; }
.cal-row:nth-child(2) { height: 5.03rem; }
.cal-h { font: 200 .733rem/1 var(--f-head); letter-spacing: var(--track-head); }
.cal-c { position: relative; border-bottom: .75px solid #fff; }
.cal-c::before {                   /* small marker at the right end of each line */
  content: "";
  position: absolute;
  right: .1rem;
  bottom: 0;
  width: .444rem;
  height: .388rem;
  background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cal-n { position: absolute; z-index: 2; left: -.12rem; top: .96rem; font: 200 1.875rem/1 var(--f-head); letter-spacing: var(--track-head); }
.cal-row:nth-child(2) .cal-n { top: .58rem; }
.ev-btn {
  position: absolute;
  inset: .225rem 0 .08rem -.21rem;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform .35s ease, box-shadow .35s ease;
}
.ev-btn:hover, .ev-btn:focus-visible, .ev-btn[aria-expanded="true"] { transform: translateY(-.2rem); box-shadow: 0 .6rem 1.2rem rgb(0 0 0 / .3); }
.ev-btn:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.ev-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-btn .cal-n { left: .09rem; top: .735rem; }
.ev-name { position: absolute; z-index: 1; left: .306rem; right: .2rem; bottom: .55rem; font: 200 .47rem/1.2 var(--f-head); letter-spacing: var(--track-head); }
.ev-pops { position: absolute; left: 0; top: 0; }
.ev-pop {                          /* event details: fade up next to the chosen day */
  position: absolute;
  z-index: 5;
  left: var(--x, 0px);
  top: var(--y, 0px);
  width: 19.16rem;
  height: 19.84rem;
  overflow: hidden;
  box-shadow: 0 1.2rem 2.4rem rgb(0 0 0 / .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.ev-pop.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ev-pop > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-tx { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 1.2rem 2.37rem 1.55rem; }
.ev-when { margin-left: .09rem; font-size: .46rem; line-height: 1.2; }
.ev-t { margin-top: .24rem; font: 200 .673rem/1.2 var(--f-head); letter-spacing: var(--track-head); }
.ev-t::after { content: ""; display: block; width: 14.89rem; margin-top: 1.13rem; border-top: .75px solid #fff; }
.ev-d { margin-top: .75rem; font-size: .628rem; line-height: 1.2; }
.ev-d + .ev-d { margin-top: 0; }

/* ---------- 6. footer ---------- */
.ftr {
  position: relative;
  z-index: 6;
  min-height: 36.1rem;
  padding: 4.27rem 0 6.5rem;
  background: var(--c-foot);
  color: #fff;
  overflow: hidden;
}
.f-grid { display: grid; grid-template-columns: 25.68% 30.03% 1fr; padding-left: 8.47%; }
.f-c1 { padding-top: 6.88rem; }
.f-logo { display: block; width: 19.9rem; aspect-ratio: 85.9 / 21.95; fill: #fff; }
.f-brand { margin-top: 1.12rem; font: 200 2.925rem/1.2 var(--f-head); text-transform: uppercase; white-space: nowrap; }
.f-addr { margin: 1.93rem 0 0 .24rem; font: 200 .9375rem/1.2 var(--f-head); }
.f-h { font: 200 1.25rem/1.2 var(--f-head); }
.f-about { margin: 1.36rem 0 0 2.74rem; max-width: 24.6rem; font-size: .9375rem; line-height: 1.2; }
.f-explore { display: flex; margin: 2.64rem 0 0 -.11rem; }
.f-explore .f-h { flex: none; width: 5.79rem; }
.f-links { margin-top: -.2rem; font: 200 .9375rem/2 var(--f-head); }
.f-sep { padding: 0 .6em; }
.f-follow { margin-top: 1.3rem; font: 200 1.125rem/1.2 var(--f-head); }
.f-cta { margin-top: 1.62rem; font: 200 1.125rem/1.667 var(--f-head); }
.f-info { margin: 1.94rem 0 0 -.27rem; font: 200 1.125rem/2.4 var(--f-head); }
.f-copy { position: absolute; left: 0; right: 0; bottom: 2.67rem; padding: 0 1.5rem; text-align: center; font: 200 .9375rem/1.2 var(--f-head); }
.ftr a { transition: color .3s ease; }
.ftr a:hover { color: var(--c-sea); }

/* ---------- demo badge (every demo page) ---------- */
.demo-badge {
  position: fixed;
  left: .75rem;
  bottom: .75rem;
  z-index: 60;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .55);
  color: #fff;
  font: 400 11px/1.4 var(--f-body);
  letter-spacing: .04em;
  transition: background-color .3s ease;
}
.demo-badge:hover { background: rgb(0 0 0 / .8); }

/* ---------- reveal / fade (reverses when scrolling back up) ---------- */
.fx { transition: opacity .9s ease, transform .9s cubic-bezier(.2, .65, .3, 1); }
html.js .fx:not(.in) { opacity: 0; }
html.js .fx-up:not(.in) { transform: translateY(1.6rem); }
html.js .fx-l:not(.in) { transform: translateX(-2.5rem); }
html.js .fx-r:not(.in) { transform: translateX(2.5rem); }
.d1 { transition-delay: .12s; }
.d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; }
.d4 { transition-delay: .5s; }
.d5 { transition-delay: .65s; }

/* =========================================================
   Mobile layout: phones + tablets in portrait
   (landscape phones/tablets use the desktop layout)
   ========================================================= */
@media (orientation: portrait) and (max-width: 1100px) {
  html { font-size: 16px; }
  body { font-size: 1rem; line-height: 1.55; }
  br.dk { display: none; }
  br.mb { display: inline; }

  .hdr { height: 4.5rem; }
  .hdr::before { height: 9rem; }
  .hdr-nav, .hdr-book { display: none; }
  .hdr-logo { left: 7%; top: 1.6rem; width: 5.2rem; }
  .icons { left: auto; right: 7%; top: 1.78rem; gap: .6rem; }
  .hdr:not(.on)::before { opacity: 1; }      /* phones/tablets: header shade from the start too */

  .brand { --bw: min(78vw, 62svh); left: calc(50vw - var(--bw) / 2); top: calc(43svh - var(--bw) / 7.83); }

  .hero-bar { bottom: calc(100lvh - 100svh + 2.4rem); height: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-tag { position: static; transform: none; font-size: .9375rem; line-height: 1.6; letter-spacing: .2em; padding-left: .2em; white-space: normal; }
  .hero-bar .pill { position: static; margin-top: 1.2rem; }
  .pill-lg, .pill-xl { height: 3.2rem; font-size: 1rem; }
  .pill-lg { width: 11rem; }
  .pill-xl { width: 15rem; }
  .pill-sm { width: 6.9rem; height: 2.15rem; font-size: .75rem; }

  .w-in { padding: 6rem 0 2.4rem; }
  .w-text { padding: 0 1.5rem; }
  .w-t { font-size: 1.5rem; line-height: 1.3; }
  .w-m2 { margin-top: 1.3rem; }
  .w-p { padding-left: 0; }
  .w-m3 { margin-top: 1rem; }
  .w-m4 { margin-top: 1.8rem; }
  .w-strip { margin-top: 2.2rem; height: 14.5rem; }
  .marq-x .marq-track { gap: 1rem; padding-right: 1rem; }
  .sm-tall { width: 8.9rem; height: 11.7rem; }
  .sm-wide { width: 19.3rem; height: 14.45rem; }
  .sm-sq   { width: 11.7rem; height: 11.7rem; }

  .c-in { flex-direction: column; align-items: stretch; padding-top: 6rem; }
  .c-text { order: -1; margin: 0; padding: 0 1.5rem 2.2rem; }
  .c-h1 { font-size: 1.2rem; }
  .c-h2 { font-size: 2.3rem; margin: .3rem 0 0 1.4rem; white-space: normal; }
  .c-body { margin: 1.6rem 0 0; max-width: none; }
  .c-body p + p { margin-top: 1rem; }
  .c-col { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 30rem; margin: 0 1rem; }
  .marq-y .marq-track { gap: .8rem; padding-bottom: .8rem; }
  .cm-row { column-gap: 3.5%; }

  .x-in { padding: 6rem 1.25rem 3rem; }
  .x-h { text-align: center; font-size: 1.9rem; line-height: 1.25; letter-spacing: .08em; }
  .x-grid { grid-template-columns: 1fr; row-gap: 1rem; margin-top: 2.2rem; }
  .card-in .pill { top: 1rem; right: 1rem; }
  .card-tx { padding: 56% 1.25rem 1.4rem 1.3rem; }
  .card-t { font-size: 1.0625rem; }
  .card-s, .card-d { margin-left: 0; font-size: .9375rem; line-height: 1.45; }
  .card-s { margin-top: .5rem; }
  .card-d { margin-top: .5rem; }

  .e-in { flex-direction: column; align-items: stretch; padding: 6rem 1rem 3rem; }
  .e-h { width: auto; padding: 0 .5rem; font-size: 2.6rem; }
  .cal-wrap { width: 100%; margin-top: 1.8rem; }
  .cal-row { height: 4.4rem; }
  .cal-head { height: 1rem; }
  .cal-row:nth-child(2) { height: 3.6rem; }
  .cal-h { font-size: .75rem; letter-spacing: .04em; }
  .cal-n, .cal-row:nth-child(2) .cal-n { top: .55rem; font-size: 1.2rem; letter-spacing: 0; }
  .ev-btn { inset: .15rem 0 .08rem -.1rem; }
  .ev-btn .cal-n { top: .4rem; left: .15rem; }
  .ev-name { display: none; }
  .ev-pops { position: static; margin-top: 1.6rem; }
  .ev-pop { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 21rem; display: none; transform: none; }
  .ev-pop.on { display: flex; flex-direction: column; justify-content: flex-end; animation: pop-up .45s ease both; }
  .ev-tx { position: relative; padding: 1.25rem 1.25rem 1.5rem; }
  .ev-when { margin: 0; font-size: .875rem; }
  .ev-t { margin-top: .3rem; font-size: 1.15rem; }
  .ev-t::after { width: 70%; margin-top: .8rem; }
  .ev-d { margin-top: .8rem; font-size: .9375rem; line-height: 1.45; }

  .ftr { min-height: 0; padding: 3.5rem 7% 3.5rem; }
  .f-grid { grid-template-columns: 1fr; row-gap: 2.6rem; padding: 0; }
  .f-c1 { padding: 0; }
  .f-logo { width: 12rem; }
  .f-brand { margin-top: .8rem; font-size: 2rem; }
  .f-addr { margin: 1rem 0 0; }
  .f-about { margin: 1rem 0 0; max-width: none; font-size: .9375rem; line-height: 1.55; }
  .f-explore { margin: 2.2rem 0 0; }
  .f-explore .f-h { width: 5.5rem; }
  .f-follow { font-size: 1rem; line-height: 1.5; }
  .f-cta { margin-top: 1.2rem; font-size: 1rem; line-height: 2; }
  .f-info { margin: 1.4rem 0 0; font-size: .9375rem; line-height: 1.9; }
  .f-copy { position: static; margin-top: 2.6rem; padding: 0 0 2rem; text-align: left; }
}
@keyframes pop-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* tablets in portrait: the phone layout, scaled to fit the screen */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1100px) {
  html { font-size: min(4.1026vw, 1.8957vh); }
  /* the scaled phone layout is very large on an iPad, so a few parts are made denser */
  .c-col { height: 22rem; }
  .x-grid { grid-template-columns: 1fr 1fr; column-gap: .75rem; row-gap: .75rem; }
  .card-tx { padding: 52% .9rem 1rem 1rem; }
  .card-t { font-size: .82rem; }
  .card-s, .card-d { font-size: .78rem; line-height: 1.4; margin-top: .35rem; }
  .card-in .pill { top: .7rem; right: .7rem; }
  .pill-sm { width: 5.4rem; height: 1.7rem; font-size: .6rem; }
  .e-h { font-size: 2.2rem; }
  .cal-wrap { margin-top: 1.2rem; }
  .cal-head { height: .9rem; }
  .cal-row { height: 3.2rem; }
  .cal-row:nth-child(2) { height: 2.6rem; }
  .cal-h { font-size: .62rem; }
  .cal-n, .cal-row:nth-child(2) .cal-n { top: .35rem; font-size: 1rem; }
  .ev-btn .cal-n { top: .25rem; }
  .ev-pops { margin-top: 1.2rem; }
  .ev-pop { min-height: 10.5rem; }
  .ev-pop.on { flex-direction: row; justify-content: flex-start; background: rgb(0 0 0 / .55); }
  .ev-pop > img { position: relative; inset: auto; flex: none; width: 40%; height: auto; }
  .ev-pop::after { display: none; }
  .ev-tx { flex: 1; align-self: center; padding: 1rem 1.2rem; }
  .ev-when { font-size: .62rem; }
  .ev-t { font-size: .85rem; }
  .ev-d { font-size: .78rem; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .flash { display: none; }
}