:root {
  --shell-header-height: 80px;
  --shell-primary: hsl(var(--primary));
  --shell-primary-light: hsl(28 90% 65%);
  --shell-deep: #070b13;
  --shell-line: rgba(255, 255, 255, .10);
  --shell-muted: rgba(247, 243, 233, .60);
  --shell-ease: cubic-bezier(.22, 1, .36, 1);
}

html { background: var(--shell-deep); }
body { min-width: 320px; overflow-x: clip; }
body.drawer-open { overflow: hidden; touch-action: none; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -70px;
  z-index: 1200;
  padding: 11px 16px;
  border-radius: 8px;
  background: var(--shell-primary);
  color: #15100b;
  font-size: 13px;
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.shell-container-wide {
  width: min(calc(100% - 48px), 1320px);
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--shell-header-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.is-scrolled,
.page-inner .site-header {
  background: rgba(7, 11, 19, .94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-width: 132px;
  z-index: 2;
}
.brand img {
  width: auto;
  height: 58px;
  object-fit: contain;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.25vw, 34px);
}
.nav-link {
  position: relative;
  padding: 29px 0 27px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 0;
  height: 2px;
  border-radius: 4px;
  background: var(--shell-primary);
  transform: translateX(-50%);
  transition: width .28s var(--shell-ease);
}
.nav-link:hover,
.nav-link.is-active { color: #fff; }
.nav-link:hover::after,
.nav-link.is-active::after { width: 28px; }

.shell-button {
  display: inline-flex;
  min-height: 52px;
  padding: 0 30px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .3s var(--shell-ease), box-shadow .3s ease, opacity .3s ease;
}
.shell-button:hover { transform: translateY(-3px); }
.shell-button-primary {
  color: #130d08;
  background: linear-gradient(135deg, var(--shell-primary), var(--shell-primary-light));
  box-shadow: 0 10px 35px rgba(236, 121, 43, .28);
}
.shell-button-primary:hover { box-shadow: 0 15px 42px rgba(236, 121, 43, .42); }
.button-header {
  min-height: 42px;
  padding-inline: 20px;
  font-size: 11px;
  animation: shell-subtle-pulse 2.6s ease-in-out infinite;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(7, 11, 19, .36);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color .25s ease, background .25s ease;
  z-index: 2;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  border-color: rgba(236, 121, 43, .65);
  background: rgba(236, 121, 43, .10);
  outline: none;
}
.menu-toggle-box {
  width: 20px;
  display: grid;
  gap: 5px;
}
.menu-toggle-box span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: #fff;
}
.menu-toggle-box span:nth-child(2) {
  width: 14px;
  margin-left: auto;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(0, 0, 0, .66);
  opacity: 0;
  transition: opacity .38s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.drawer-backdrop.is-visible { opacity: 1; }
.mobile-drawer {
  position: fixed;
  z-index: 1100;
  inset: 0 0 0 auto;
  width: min(88vw, 390px);
  height: 100vh;
  height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #111724 0%, #070b13 70%);
  border-left: 1px solid rgba(255, 255, 255, .09);
  box-shadow: -25px 0 70px rgba(0, 0, 0, .5);
  transform: translate3d(102%, 0, 0);
  visibility: hidden;
  transition: transform .46s var(--shell-ease), visibility .46s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-drawer.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--shell-line);
}
.drawer-logo img {
  height: 54px;
  width: auto;
}
.drawer-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .25s ease, transform .25s ease;
}
.drawer-close:hover { border-color: var(--shell-primary); transform: rotate(5deg); }
.drawer-close svg {
  width: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
}
.drawer-nav {
  display: grid;
  margin-top: 24px;
}
.drawer-nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: hsl(var(--foreground));
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(27px, 8vw, 36px);
  font-weight: 600;
  line-height: 1;
  transition: color .25s ease, padding-left .25s ease;
}
.drawer-nav a span {
  width: 24px;
  flex: 0 0 24px;
  color: var(--shell-primary);
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}
.drawer-nav a:hover,
.drawer-nav a.is-active {
  color: var(--shell-primary-light);
  padding-left: 8px;
}
.drawer-bottom {
  margin-top: auto;
  padding-top: 34px;
}
.drawer-bottom p {
  margin: 0 0 18px;
  max-width: 270px;
  color: var(--shell-muted);
  font-size: 13px;
  line-height: 1.7;
}
.drawer-order { width: 100%; }
.drawer-socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.drawer-socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .75);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.drawer-socials a:hover {
  color: #15100b;
  background: var(--shell-primary);
  transform: translateY(-3px);
}

/* Static replacements for controls that were React buttons in the captured live pages. */
a[data-static-control],
#main-content a.justify-center { text-decoration: none; }
#main-content [data-scroll-next] { border: 0; }

/* Keep embedded maps and media inside the viewport on narrow screens. */
#main-content iframe { max-width: 100%; }
#main-content video { max-width: 100%; }

@keyframes shell-subtle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

@media (max-width: 1080px) {
  .desktop-nav { gap: 18px; }
  .nav-link { font-size: 10px; }
  .button-header { padding-inline: 15px; }
}

@media (max-width: 820px) {
  :root { --shell-header-height: 72px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .brand img { height: 52px; }
  .shell-container-wide { width: min(calc(100% - 32px), 1320px); }
  .page-inner #main-content > .pt-20 { padding-top: var(--shell-header-height); }
}

@media (max-width: 560px) {
  :root { --shell-header-height: 68px; }
  .site-header { height: var(--shell-header-height); }
  .shell-container-wide { width: min(calc(100% - 28px), 1320px); }
  .brand img { height: 47px; }
  .menu-toggle { width: 42px; height: 42px; }
  .mobile-drawer { width: min(91vw, 390px); padding-inline: 20px; }
  .drawer-logo img { height: 50px; }
  .drawer-nav a { padding-block: 14px; }
}

@media (min-width: 821px) {
  .mobile-drawer,
  .drawer-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .drawer-backdrop,
  .mobile-drawer,
  .shell-button,
  .nav-link::after { transition-duration: .01ms !important; }
  .button-header { animation: none; }
}


/* Complete Sides & Bites bento layout, including utilities absent from the captured live CSS. */
#sides-bites .sides-grid {
  grid-auto-flow: dense;
  align-items: stretch;
}
#sides-bites .sides-card--feature {
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
}
#sides-bites .sides-tag {
  font-size: 10px;
  line-height: 1rem;
}
@media (min-width: 768px) {
  #sides-bites .sides-tag { font-size: .75rem; }
}

/* Static scroll-reveal state: mirrors the final state of the original React components. */
.static-reveal-target.is-revealed {
  opacity: 1 !important;
  --tw-translate-x: 0px !important;
  --tw-translate-y: 0px !important;
}

/* Prevent a flash of permanently hidden content if JavaScript is delayed. */
@media (prefers-reduced-motion: reduce) {
  .static-reveal-target {
    opacity: 1 !important;
    --tw-translate-x: 0px !important;
    --tw-translate-y: 0px !important;
  }
}

/* About page: resilient bento gallery.
   The live React version used a hard 600px row. At narrower desktop widths,
   browser zoom, or larger text rendering, the lower right card could extend
   beyond its allocated flex cell. This layout lets that card size to content. */
.about-immersive-section {
  overflow: visible;
}
.about-bento-grid {
  height: auto !important;
  align-items: stretch;
}
.about-bento-grid > *,
.about-bento-side,
.about-bento-main,
.about-bento-image,
.about-bento-card {
  min-width: 0;
}
.about-bento-main {
  min-height: 420px;
}
.about-bento-side {
  height: auto;
}
.about-bento-image {
  min-height: 320px;
}
.about-bento-card {
  flex: 0 0 auto;
  min-height: 240px;
  height: auto;
  overflow: visible;
}
.about-bento-card p {
  width: 100%;
  max-width: 28rem;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .about-bento-grid {
    min-height: 640px;
    grid-template-rows: minmax(0, 1fr);
  }
  .about-bento-main {
    min-height: 640px;
    height: 100%;
  }
  .about-bento-side {
    display: grid;
    grid-template-rows: minmax(280px, 1fr) auto;
    gap: 1.5rem;
    min-height: 640px;
  }
  .about-bento-image {
    min-height: 280px;
    height: auto;
  }
  .about-bento-card {
    min-height: 270px;
    padding: clamp(1.5rem, 2.2vw, 2rem);
  }
}

@media (min-width: 1280px) {
  .about-bento-grid,
  .about-bento-main,
  .about-bento-side {
    min-height: 660px;
  }
}

@media (max-width: 767px) {
  .about-bento-main {
    min-height: clamp(360px, 78vw, 500px);
  }
  .about-bento-side {
    display: grid;
    gap: 1.5rem;
  }
  .about-bento-image {
    min-height: clamp(280px, 70vw, 420px);
  }
  .about-bento-card {
    min-height: 230px;
    padding: clamp(1.5rem, 7vw, 2rem);
  }
}


/* Final cross-device hardening. */
html.drawer-open,
body.drawer-open {
  overflow: hidden;
  overscroll-behavior: none;
}
.mobile-drawer[inert] {
  pointer-events: none;
}
#main-content section[id] {
  scroll-margin-top: var(--shell-header-height);
}
img,
svg,
video,
iframe {
  max-width: 100%;
}
@media (max-width: 420px) {
  .drawer-nav a {
    font-size: clamp(25px, 8.5vw, 32px);
  }
  .drawer-bottom {
    padding-top: 26px;
  }
}

/* V1.4.1: preserve the intended utility-class image dimensions inside
   Elementor. Elementor/WordPress apply a later `height:auto` to images,
   otherwise fixed-height and h-full cover images collapse to their natural
   aspect ratio and leave empty card space. */
img.h-full.object-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
img[class~="h-[500px]"].object-cover {
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
}
img[class~="h-[120%]"].object-cover {
  width: 100% !important;
  height: 120% !important;
  object-fit: cover !important;
}

/* About bento cards must always be completely filled, regardless of
   Elementor image CSS, browser zoom, or the uploaded image's aspect ratio. */
.about-bento-main,
.about-bento-image {
  isolation: isolate;
}
.about-bento-main > img,
.about-bento-image > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  z-index: 0;
}
.about-bento-main > .absolute,
.about-bento-image > .absolute {
  z-index: 1;
}

/* The original compiled CSS named these animations but omitted the keyframes.
   Do not scope them to `.page-about`: WordPress does not add a page-slug body
   class by default, which is why the strips were stationary on the live page. */
.animate-marquee,
.animate-marquee-reverse {
  display: flex;
  width: max-content;
  min-width: max-content;
  flex-wrap: nowrap;
  will-change: transform;
  backface-visibility: hidden;
}
.animate-marquee > span,
.animate-marquee-reverse > span {
  flex: 0 0 auto;
}
.animate-marquee {
  animation: crab-marquee-left 30s linear infinite !important;
}
.animate-marquee-reverse {
  animation: crab-marquee-right 30s linear infinite !important;
}
@keyframes crab-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes crab-marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* Keep The Canoe / Iconic Centerpiece visibly anchored on the image's right. */
.about-canoe-caption {
  left: auto !important;
  right: clamp(1rem, 2.2vw, 1.75rem) !important;
  bottom: clamp(1rem, 2.2vw, 1.75rem) !important;
  top: auto !important;
  display: block !important;
  max-width: min(72%, 320px);
  z-index: 3 !important;
  text-align: right !important;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .95), 0 0 22px rgba(0, 0, 0, .72);
}
.about-canoe-caption p {
  width: auto;
  overflow-wrap: anywhere;
  text-align: right !important;
}

@media (max-width: 767px) {
  .animate-marquee,
  .animate-marquee-reverse {
    animation-duration: 22s !important;
  }
  .about-canoe-caption {
    max-width: 82%;
  }
}

/* Keep motion active as requested, while making it gentler for users who
   prefer reduced motion instead of silently freezing the marquee. */
@media (prefers-reduced-motion: reduce) {
  .animate-marquee,
  .animate-marquee-reverse {
    animation-duration: 60s !important;
  }
}



/* V1.4.2: media and embedded-map cover hardening across every exact page. */
video.h-full.object-cover,
video.absolute.inset-0.object-cover {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
}
.crab-locations-map-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 400px !important;
  min-height: 400px !important;
  overflow: hidden !important;
}
.crab-locations-map-shell > iframe,
iframe.crab-locations-map-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  border: 0 !important;
}
@media (max-width: 767px) {
  .crab-locations-map-shell {
    height: 360px !important;
    min-height: 360px !important;
  }
}