:root {
  --blue:#00b0dc;
  --ink:#2b2b2b;
  --header-height:94px
}

* {
  box-sizing:border-box
}

html {
  height:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-height)
}

body {
  display:flow-root;
  height:100%;
  margin:0;
  color:var(--ink);
  font:14px Arial,Helvetica,sans-serif;
  background:#fff url('csm_header_7cbff1d07d.jpg') left top/cover fixed no-repeat
}

main {
  background:#fff
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit
}

button {
  font:inherit;
  cursor:pointer
}

a:focus-visible,button:focus-visible {
  outline:3px solid #005b7b;
  outline-offset:5px
}

.wrap {
  width:90%;
  max-width:1280px;
  margin-inline:auto
}

p {
  margin:0 0 10px
}

img {
  display:block;
  max-width:100%;
  height:auto
}

figure {
  margin:0
}

h1,h2,h3 {
  padding:0;
  text-transform:uppercase
}

h2 {
  font-size:30px;
  text-align:center;
  color:var(--blue);
  margin:20px 0;
  font-weight:700
}

h3 {
  font-size:16px;
  font-weight:400;
  margin:20px 0
}

.center {
  text-align:center
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  background:#fff;
  padding:12px;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  background:#fff;
  box-shadow:0 0 10px #666
}

.header-inner {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-height:94px
}

.brand {
  display:block;
  width:162px;
  margin:10px 0
}

.brand img {
  width:145.8px;
  height:auto
}

.site-header nav {
  margin-top:15px
}

.site-header ul {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  font-size:16px;
  text-transform:uppercase;
  gap:5px
}

.site-header nav a {
  display:block;
  position:relative;
  margin:0 25px;
  padding:30px 0;
  text-decoration:none;
  color:#000
}

.site-header nav a:hover::after,.site-header nav a[aria-current]::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:var(--blue);
  bottom:13px
}

.menu-toggle {
  display:none
}

.hero {
  position:relative;
  max-height:100vh;
  overflow:hidden
}

.hero>img {
  width:100%;
  height:auto
}

.hero-caption {
  position:absolute;
  left:12%;
  top:60%;
  padding:10px 20px;
  color:#fff;
  text-shadow:0 0 5px #0006;
  background:#00b0dc80;
  text-transform:uppercase
}

.hero-caption p {
  font-size:50px;
  font-weight:400;
  margin:0
}

.hero-caption strong {
  font-size:35px
}

.section-content {
  padding:50px 0;
  background:#fff
}

.section-heading {
  text-align:center
}

.eyebrow {
  font-size:20px;
  font-weight:400;
  margin:20px 0;
  text-transform:uppercase
}

.eyebrow::after {
  content:"";
  display:block;
  width:100px;
  height:1px;
  margin:10px auto 0;
  background:currentColor
}

.section-heading h1:not(.eyebrow),.section-heading h2 {
  font-size:30px;
  font-weight:700;
  color:var(--blue);
  margin:-10px 0 30px;
  text-align:center
}

.round-cards {
  display:flex;
  justify-content:center;
  gap:4.35%;
  margin:50px 0 63px
}

.round-cards figure {
  position:relative;
  overflow:hidden;
  border:4px solid var(--blue);
  border-radius:50%;
  background:var(--blue);
  width:25%;
  align-self:flex-start
}

.round-cards img {
  width:100%;
  aspect-ratio:439/440
}

.round-cards figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--blue);
  color:white;
  text-align:center;
  padding:10px 25%
}

.round-cards h3 {
  font-size:20px;
  margin:5px 0
}

.round-cards p {
  margin:0 0 10px
}

.banner {
  position:relative;
  max-height:400px;
  overflow:hidden
}

.banner>img {
  width:100%
}

.products {
  width:90%;
  margin:30px auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,30%));
  gap:3.633%
}

.product {
  background:#ededed;
  min-width:0
}

.product h3 {
  background:var(--blue);
  color:#fff;
  text-align:center;
  margin:0 0 20px;
  padding:10px 4px
}

.product-body {
  padding:0 5% 20px
}

.product-body ul,.legal ul {
  list-style:none;
  margin:20px 0;
  padding:0
}

.product-body li,.legal li {
  position:relative;
  padding-left:15px;
  margin-bottom:5px
}

.product-body li::before,.legal li::before {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--blue);
  top:5px;
  left:1px
}

.zoom {
  display:block
}

.zoom img {
  width:100%
}

.smoked-photos {
  margin-top:10px
}

.smoked-photos a+a {
  margin-top:10px
}

.gallery {
  width:89%;
  margin:auto;
  padding:10px 0 60px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:1.5%;
  row-gap:10px;
  align-items:start
}

.gallery img {
  aspect-ratio:800/531;
  object-fit:cover
}

.market-banner .section-heading {
  position:absolute;
  left:0;
  right:0;
  top:30%;
  color:#fff
}

.market-banner .eyebrow::after {
  width:260px;
  margin-top:15px
}

.market-banner .section-heading h2 {
  color:#fff;
  margin-top:-8px
}

.market-copy {
  padding:50px 0
}

.festival {
  background:#808080;
  color:white;
  text-shadow:0 0 5px #000
}

.festival .section-heading h2 {
  color:white
}

.two-columns {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2%
}

.two-columns>div {
  min-width:0
}

.festival .zoom {
  border:3px solid #fff
}

.festival .two-columns>div:first-child {
  padding-right:0
}

.festival .two-columns>div:first-child .zoom {
  width:90%;
  margin:0 5% 10px
}

.festival .two-columns>div:last-child h3 {
  margin-top:20px
}

.festival-photos {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2%;
  margin-top:10px;
  align-items:start
}

.contact-photo img {
  width:90%;
  margin:0 5% 10px
}

.contact .two-columns {
  margin-top:0
}

.site-footer {
  margin-top:200px;
  background:#101010;
  color:#fff
}

.footer-top {
  height:14px;
  background:var(--blue)
}

.footer-inner {
  display:grid;
  width:81%;
  max-width:1152px;
  grid-template-columns:33% 40% 25%;
  padding:30px 0;
  gap:1%
}

.footer-inner p {
  margin:0 0 10px
}

.footer-inner a {
  text-decoration:none
}

.footer-inner a:hover {
  text-decoration:underline
}

.footer-inner nav {
  text-align:right
}

.footer-inner ul {
  list-style:none;
  margin:0;
  padding:0
}

.footer-inner li {
  margin:0 0 5px
}

.footer-bottom {
  height:40px;
  background:#003e53
}

.legal {
  margin-top:200px;
  padding:30px 0;
  background:#fff
}

.legal section {
  display:flow-root
}

.legal h2 {
  margin:20px 0
}

.legal .section-heading h2 {
  margin:-10px 0 30px
}

.page-controls {
  position:fixed;
  right:5px;
  top:55%;
  z-index:25;
  padding:9px 5px;
  width:35px;
  background:#fff;
  box-shadow:0 0 30px #aaa;
  border-radius:15px 0;
  display:flex;
  flex-direction:column;
  gap:8px
}

.page-controls button {
  border:0;
  padding:0;
  width:24px;
  height:24px;
  background:#999 url('arrow-top.png') center/24px 24px no-repeat
}

.page-controls button:hover {
  background-color:#333
}

.page-controls [data-direction=down] {
  background-image:url('arrow-bottom.png')
}

.lightbox {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  border:0;
  padding:44px;
  background:transparent;
  color:#fff;
  overflow:auto;
}
.lightbox::backdrop { background:rgba(0,0,0,.82); }
.lightbox:fullscreen { background:#1e1e1e; }
.lightbox[open] { display:flex; align-items:center; justify-content:center; }
.lightbox figure { max-width:100%; text-align:center; }
.lightbox figure img {
  max-width:100%;
  max-height:calc(100dvh - 88px);
  width:auto;
  margin:auto;
  object-fit:contain;
}
.lightbox figcaption {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.lightbox-toolbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:44px;
  pointer-events:none;
}
.lightbox-pagination {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  background:#1e1e1e99;
  pointer-events:auto;
}
.lightbox-actions {
  position:absolute;
  right:0;
  top:0;
  display:flex;
  pointer-events:auto;
}
.lightbox button {
  border:0;
  padding:0;
  background:#1e1e1e99;
  color:#ddd;
  width:44px;
  height:44px;
  font-size:28px;
  position:relative;
}
.lightbox button:hover { color:#fff; background:#1e1e1e; }
.lightbox-count { min-width:72px; text-align:center; font-size:13px; }
.lightbox .lightbox-prev,.lightbox .lightbox-next { background:none; }
.lightbox-play span {
  display:block;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:10px solid currentColor;
  margin:auto;
}
.lightbox-play[aria-pressed=true] span {
  width:10px;
  height:12px;
  border:0;
  border-left:3px solid currentColor;
  border-right:3px solid currentColor;
}
.lightbox-fullscreen span {
  display:block;
  width:15px;
  height:11px;
  border:2px solid currentColor;
  margin:auto;
}
.lightbox-fullscreen[aria-pressed=true] span { width:11px; height:9px; }
.lightbox button:focus-visible { outline-color:var(--blue); outline-offset:-3px; }
body:has(.lightbox[open]) { overflow:hidden; }

@media(max-width:1280px) {
  .hero-caption {
    left:5%;
    top:55%;
    max-width:90%
  }
}

@media(max-width:1100px) {
  .site-header nav a {
    margin-inline:15px
  }
  .round-cards figure {
    width:29%
  }
}

@media(max-width:1020px) {
  .hero-caption p {
    font-size:42px
  }
  .hero-caption strong {
    font-size:28px
  }
}

@media(max-width:950px) {
  :root {
    --header-height:89px
  }
  .header-inner {
    min-height:89px;
    align-items:center
  }
  .brand {
    margin-left:auto
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin:0;
    background:#efefef;
    box-shadow:0 5px 10px #666
  }
  .site-header nav.is-open {
    display:block
  }
  .site-header ul {
    display:block
  }
  .site-header li+li {
    margin-top:2px
  }
  .site-header nav a {
    margin:0;
    padding:10px 2%;
    text-align:center;
    background:#fff
  }
  .site-header nav a:hover,.site-header nav a[aria-current] {
    background:var(--blue);
    color:#fff
  }
  .site-header nav a::after {
    display:none
  }
  .menu-toggle {
    display:block;
    position:relative;
    border:0;
    border-radius:50%;
    background:var(--blue);
    width:50px;
    height:50px;
    padding:0;
    flex-shrink:0
  }
  .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after {
    display:block;
    position:absolute;
    background:#fff;
    height:3px;
    width:25px;
    left:12px;
    top:24px
  }
  .menu-toggle span::before,.menu-toggle span::after {
    content:"";
    left:0;
    top:-8px
  }
  .menu-toggle span::after {
    top:8px
  }
  .menu-toggle[aria-expanded=true] span {
    background:transparent
  }
  .menu-toggle[aria-expanded=true] span::before {
    top:0;
    transform:rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span::after {
    top:0;
    transform:rotate(-45deg)
  }
  .hero-caption p {
    font-size:36px
  }
  .round-cards {
    flex-wrap:wrap
  }
  .round-cards figure {
    width:36%
  }
  .products {
    grid-template-columns:1fr;
    gap:20px
  }
  .smoked-photos {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2%
  }
  .smoked-photos a+a {
    margin-top:0
  }
  .market-banner .section-heading {
    top:20%
  }
}

@media(max-width:900px) {
  .footer-inner {
    display:block
  }
  .footer-inner nav {
    text-align:center;
    border-top:1px solid #2b2b2b;
    margin-top:20px;
    padding-top:20px
  }
  .footer-inner ul {
    display:flex;
    justify-content:center;
    gap:6px
  }
  .footer-inner li {
    background:#0008
  }
  .footer-inner nav a {
    display:block;
    padding:5px 10px
  }
}

@media(max-width:800px) {
  .round-cards {
    display:block
  }
  .round-cards figure {
    width:40%;
    margin:0 auto 20px
  }
}

.text-gap {
  height:26px
}

@media(max-width:730px) {
  .round-cards {
    margin-bottom:60px
  }
  .section-content {
    padding:30px 0
  }
  .banner {
    max-height:200px
  }
  .round-cards figure {
    width:50%
  }
  .market-banner .section-heading {
    top:7%
  }
}

@media(max-width:700px) {
  .gallery {
    grid-template-columns:1fr;
    width:88.2%
  }
  .two-columns {
    grid-template-columns:1fr;
    gap:0
  }
  .festival .two-columns>div:first-child {
    padding:0
  }
  .contact-photo img {
    margin:0 5% 10px
  }
  .festival-photos {
    margin-bottom:10px
  }
}

@media(max-width:630px) {
  .hero {
    max-height:none;
    margin-top:var(--header-height)
  }
  .hero-caption {
    position:static;
    max-width:none;
    background:var(--blue);
    padding:10px 20px;
    text-shadow:none;
    text-align:center
  }
  .hero-caption strong {
    font-size:18px
  }
}

@media(max-width:600px) {
  :root {
    --header-height:75.25px
  }
  .header-inner {
    min-height:75.25px
  }
  .brand {
    width:130px
  }
  .brand img {
    width:117px
  }
  .hero-caption p {
    font-size:26px
  }
  .eyebrow {
    font-size:18px
  }
  .section-heading h1:not(.eyebrow),.section-heading h2,.legal h2 {
    font-size:26px
  }
  h3 {
    font-size:18px
  }
  .round-cards figure {
    width:60%
  }
  .market-banner .section-heading {
    position:static;
    color:var(--ink);
    padding:30px 5% 0
  }
  .market-banner {
    max-height:none;
    overflow:visible
  }
  .market-banner .section-heading h2 {
    color:var(--blue);
    margin-top:-10px;
    margin-bottom:0
  }
  .market-banner .eyebrow::after {
    width:100px;
    margin-top:10px
  }
  .market-copy {
    padding-top:30px
  }
  .lightbox {
    padding-inline:45px
  }
  .lightbox button {
    width:38px
  }
  .lightbox-pagination { left:0; transform:none; }
  .lightbox-count { min-width:48px; }
}

@media(max-width:480px) {
  .round-cards figure {
    width:70%
  }
  .round-cards figcaption {
    padding-inline:20%
  }
  .footer-inner nav {
    padding-top:0;
    border:0
  }
  .footer-inner ul {
    display:block
  }
  .footer-inner li {
    margin-bottom:5px
  }
  .footer-inner nav a {
    padding:10px
  }
}

@media(max-width:420px) {
  .round-cards figure {
    width:85%
  }
  .section-heading h1:not(.eyebrow),.section-heading h2,.legal h2 {
    font-size:24px
  }
  .hero-caption p {
    font-size:20px
  }
  .smoked-photos,.festival-photos {
    display:block
  }
  .smoked-photos a+a,.festival-photos a+a {
    margin-top:10px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

@media(max-width:350px) {
  .festival .section-heading h2 {
    font-size:22px
  }
}


@media (min-width:320px) and (max-width:1024px) {
  body { background-position:center center; }
}