/* MOBIL APP-VERSJON */
.mobile-scroll-nav,
.mobile-scroll-label {
  display: none;
}

@media (max-width: 780px) {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    scroll-snap-type: none;
    touch-action: pan-y;
  }

  body {
    position: relative;
    background: var(--paper);
  }

  main {
    overflow-x: hidden;
    padding-bottom: 0;
  }

  .content-section {
    min-height: auto;
    padding: 5.5rem 1rem 5rem;
  }

  .section-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
  }

  .praktisk-card,
  .hotel-item,
  .hotel-note,
  .transport-note,
  .footer-note,
  .transport-list,
  .menu-panel,
  .menu-layout,
  .course {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }

  .praktisk-card *,
  .hotel-item *,
  .transport-list *,
  .hotel-note,
  .transport-note,
  .footer-note {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .praktisk-card {
    display: grid;
    gap: 1.15rem;

    margin: 1.25rem 0 0;
    padding: 1rem;

    border: 1px solid rgba(31,29,26,0.075);
    border-radius: 1.35rem;

    background: rgba(255,255,255,0.42);
    box-shadow: 0 8px 22px rgba(31,29,26,0.04);

    overflow: hidden;
  }

  .praktisk-card + .praktisk-card {
    margin-top: 1rem;
  }

  .praktisk-card h3 {
    font-size: clamp(1.8rem, 8.5vw, 2.6rem);
    line-height: 1.04;
  }

  .praktisk-card p,
  .course p,
  .timeline-item p {
    font-size: 1rem !important;
    line-height: 1.75;
  }

  .site-header {
    top: 0;
    bottom: auto;
    justify-content: center;
    min-height: 72px;
    padding-top: 1.25rem;
    color: white;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.25),
      0 4px 12px rgba(0,0,0,0.15);
  }

	.site-header.is-dark {
	  color: var(--ink);

	  background: rgba(255,253,249,0.68);

	  backdrop-filter: blur(20px) saturate(160%);
	  -webkit-backdrop-filter: blur(20px) saturate(160%);

	  border-bottom: 1px solid rgba(31,29,26,0.06);

	  text-shadow: none;
	}

  .site-header .nav {
    display: none;
  }

  .brand {
    display: flex;
    position: absolute;
    left: 50%;
    top: 0.75rem;
    transform: translateX(-50%);
    transition: transform 0.3s ease;
  }

  .brand-a,
  .brand-m {
    font-size: 2.8rem;
  }

  .brand-divider {
    height: 3.1rem;
  }

  .brand-divider span {
    font-size: 0.95rem;
  }

  .panel {
    min-height: auto;
    scroll-snap-align: none;
  }

  .hero {
    min-height: 100svh;
  }

  .hero::before {
    background-image:
      linear-gradient(
        360deg,
        rgba(255,253,249,1) 0%,
        rgba(255,253,249,.98) 14%,
        rgba(255,253,249,.88) 26%,
        rgba(255,253,249,.42) 42%,
        rgba(255,253,249,.14) 58%,
        rgba(255,253,249,0) 76%
      ),
      url("/IMG_5038.jpg?v=2");

    background-position: 35% top;
  }

  .hero-copy {
    padding-right: 0;
    padding-top: 12vh;
    width: min(88vw, 520px);
    transform: translateY(var(--hero-shift, 0));
  }

  .date {
    animation: floatDate 6s ease-in-out infinite;
  }

  @keyframes floatDate {
    0%, 100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-3px);
    }
  }

  h1 {
    font-size: clamp(4rem, 20vw, 7rem);
  }

  h2.tittel {
    margin-top: 0.85rem;
    font-size: clamp(2.7rem, 13vw, 4.15rem);
    line-height: 0.98;
  }

  .section-number {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  .program-intro {
    position: relative;

    max-width: 30rem;

    margin-top: 1.35rem;
    padding-left: 1rem;

    color: rgba(31,29,26,0.68);

    font-size: 1rem;
    line-height: 1.7;
    font-style: normal;

    border-left: 1px solid rgba(31,29,26,0.16);
  }

  .event-time .program-intro {
    margin-top: 1rem;
    max-width: 26rem;
  }

  .praktisk-label,
  .course-label {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
  }

  .map-link {
    width: fit-content;
    max-width: 100%;
    margin-top: 0.25rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.75rem;
    white-space: normal;
    text-align: center;
    -webkit-tap-highlight-color: transparent;

    transition:
      background 150ms ease,
      color 150ms ease,
      transform 150ms ease;
  }

  .map-link:hover {
    background: inherit;
    color: inherit;
    transform: none;
  }

  .map-link:active {
    background: var(--ink) !important;
    color: var(--paper) !important;
    transform: scale(0.96);
  }

  .timeline {
    max-width: none;
    margin-top: 2.25rem;
    padding-left: 0.45rem;
    overflow: visible !important;
  }

  .timeline-item {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0.25rem !important;

    padding: 1.15rem 0 1.15rem 1.15rem !important;

    border-bottom: 0;
    overflow: visible !important;
  }

  .timeline-item::before {
    content: "";
    position: absolute;
    left: 0 !important;
    top: 2rem;
    bottom: -2rem;
    width: 1px;
    background: var(--line);
  }

  .timeline-item::after {
    content: "";
    position: absolute;
    left: -4px !important;
    top: 1.4rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink);
  }

  .timeline-item:last-child::before {
    display: none;
  }

  .timeline-item time {
    display: inline-block !important;
    width: fit-content !important;

    padding-top: 0 !important;

    color: var(--ink);
    font-size: 0.725rem;
    font-weight: 600;
    letter-spacing: 0.2em;
  }

  .timeline-item time::after {
	   content: "";
  display: block;

  width: 100%;
  height: 1px;

  margin-top: 0.55rem;
  margin-bottom: 0.35rem;

  background:
    linear-gradient(
      90deg,
      rgba(31,29,26,0),
      rgba(31,29,26,0.22) 18%,
      rgba(31,29,26,0.22) 82%,
      rgba(31,29,26,0)
    );
  }

  .reveal.in-view .timeline-item time::after {
    opacity: 1;
    transform: scaleX(1);
  }

  h3.timeline-tittel {
    margin: 0 !important;
    font-size: 1.38rem !important;
    line-height: 1.08 !important;
  }

  .timeline-item div p {
    margin-top: 0.45rem !important;
    margin-bottom: 0 !important;

    font-size: 0.98rem !important;
    line-height: 1.62 !important;
  }

  .timeline-item p br {
    display: none;
  }

  .menu-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .menu-toggle {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1rem;
    padding: 0.28rem;
    border-radius: 999px;
    background: rgba(31,29,26,0.045);
    border: 1px solid rgba(31,29,26,0.06);
    overflow: hidden;
  }

  .menu-toggle-btn {
    position: relative;

    width: 100%;
    border-radius: 999px;
    padding: 0.85rem 1rem;

    background: transparent;
    border: 0;

    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;

    transition:
      background 280ms cubic-bezier(.22,1,.36,1),
      color 280ms cubic-bezier(.22,1,.36,1),
      transform 280ms cubic-bezier(.22,1,.36,1),
      box-shadow 280ms cubic-bezier(.22,1,.36,1);
  }

  .menu-toggle-btn.active {
    background: var(--ink) !important;
    color: var(--paper) !important;

    transform: scale(1.02);

    box-shadow:
      0 8px 20px rgba(31,29,26,0.08),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }

  .menu-toggle-btn:active {
    transform: scale(0.97);
  }

  .menu-panel {
    margin-top: 2rem;
  }

  .menu-layout.vertical {
    gap: 1.8rem;
  }

  .course {
    padding-bottom: 1.8rem;
  }

  .course h3 {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
    line-height: 1.05;
  }

  .footer-note,
  .hotel-note,
  .transport-note {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-left: 0;
    border-radius: 1rem;
    background: rgba(31,29,26,0.035);
  }

  .hotel-item {
    display: block !important;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-top: 1rem;
    padding: 1.15rem 1rem !important;

    border: 1px solid rgba(31,29,26,0.07) !important;
    border-radius: 1rem;

    background: rgba(255,255,255,0.36);

    box-shadow:
      0 8px 22px rgba(31,29,26,0.035);
  }

  .hotel-item:first-of-type {
    margin-top: 1rem;
  }

  .hotel-item > div,
  .hotel-item h4,
  .hotel-item p {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-wrap: break-word;
    word-break: normal;
  }

  .hotel-item h4 {
    margin: 0 0 0.45rem;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .hotel-item p {
    margin-top: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }

.hotel-item .map-link {
  display: inline-flex;
  width: fit-content;

  margin-top: 0.95rem !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;

  padding: 0.68rem 0.95rem !important;
  font-size: 0.7rem !important;
}

  .hotel-note {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-wrap: break-word;
    word-break: normal;
  }

  .transport-list {
    margin-top: 1.5rem;
    border: 0;
    background: transparent;
  }

  .transport-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;
    padding: 1rem 0.2rem;

    border-bottom: 1px solid rgba(31,29,26,0.08);

    font-size: 0.95rem;
    background: transparent;

    transition: opacity 200ms ease;
  }

  .transport-item:first-child {
    border-top: 1px solid rgba(31,29,26,0.08);
  }

  .transport-item span:first-child {
    font-weight: 500;
    color: var(--ink);
  }

  .transport-item span:last-child {
    color: var(--muted);
    font-size: 0.92rem;
    letter-spacing: 0.03em;
  }

  .transport-note {
    margin-top: 1.25rem !important;

    padding: 1rem 1.05rem !important;

    border-radius: 1rem;
    border-left: 0 !important;

    background: rgba(31,29,26,0.035);

    font-size: 0.9rem;
    line-height: 1.65;
  }

  #onskeliste .map-link {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.25rem;
  }

  .event-time {
    margin-top: 2.25rem;
    margin-bottom: 3rem;
  }

  .event-time-value {
    font-size: clamp(3.2rem, 18vw, 5.4rem);
  }

  .site-footer-inner {
    width: min(90vw, 900px);
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 2rem 0;
  }

  .mobile-scroll-nav {
    position: fixed;
    z-index: 100;
    right: 0.85rem;
    top: 50%;

    display: flex;
    flex-direction: column;

    width: 52px;
    min-height: 360px;

    padding: 0;
    gap: 0;

    overflow: hidden;

    border-radius: 999px;

    background:
	  linear-gradient(
		180deg,
		rgba(255,255,255,0.16),
		rgba(255,255,255,0.06)
	  );
	  
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);

    border: 1px solid rgba(255,255,255,0.22);

	  box-shadow:
	  inset 0 1px 0 rgba(255,255,255,0.28),
	  0 8px 24px rgba(31,29,26,0.08);
	  
    opacity: 0;
    pointer-events: none;

    transform: translateY(-50%) translateX(10px);

    transition:
      opacity 300ms ease,
      width 300ms cubic-bezier(.22,1,.36,1),
      transform 300ms cubic-bezier(.22,1,.36,1);

    touch-action: none;
    user-select: none;
  }

  .mobile-scroll-nav::before {
    content: "";
    position: absolute;
    top: -1rem;
    bottom: -1rem;
    right: -2.25rem;
    width: 7.5rem;
    background: transparent;
  }

  .mobile-scroll-nav.visible {
	  opacity: 1;
	  pointer-events: auto;

	  transform: translateY(-50%) translateX(0);
	}

  .mobile-scroll-nav.is-dragging {
    width: 82px;
  }

  .mobile-scroll-nav button {
    flex: 1;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    appearance: none;
    -webkit-appearance: none;

    pointer-events: none;
  }

  .mobile-scroll-nav button::after {
    content: "";

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: rgba(31,29,26,0.16);

    transition:
      width 260ms cubic-bezier(.22,1,.36,1),
      height 260ms cubic-bezier(.22,1,.36,1),
      background 260ms ease,
      box-shadow 260ms ease,
      transform 260ms cubic-bezier(.22,1,.36,1);
  }

  .mobile-scroll-nav button.active::after {
    width: 24px;
    height: 24px;

    background: rgba(31,29,26,0.88);

    box-shadow: 0 0 18px rgba(31,29,26,0.14);

    transform: scale(1.08);
  }

  .mobile-scroll-nav.is-dragging button::after {
    width: 14px;
    height: 14px;
    transition-duration: 180ms;
  }

  .mobile-scroll-nav.is-dragging button.active::after {
    width: 28px;
    height: 28px;
    transform: scale(1.12);
  }

  .mobile-scroll-label {
    display: block;
    position: fixed;
    z-index: 101;
    right: 4.4rem;
    top: 50%;

    opacity: 0;
    pointer-events: none;
    white-space: nowrap;

    transform: translateY(-50%) translateX(12px);

    will-change: top, transform, opacity;

    padding: 0.7rem 1rem;
    border-radius: 999px;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0.74)
      );

    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);

    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 12px 30px rgba(31,29,26,0.14);

    color: var(--ink);

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    transition:
  opacity 120ms ease,
  transform 90ms linear;
  }

  .mobile-scroll-label::after {
    content: "";

    position: absolute;
    right: -2rem;
    top: 50%;

    width: 2rem;
    height: 1px;

    background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0),
      rgba(255,255,255,0.55) 40%,
      rgba(255,255,255,0.55) 60%,
      rgba(255,255,255,0)
    );

    transform: translateY(-50%);
  }

  .mobile-scroll-label.visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .mobile-scroll-label.is-changing {
    opacity: 0;
    transform:
      translateY(-50%)
      translateX(8px)
      scale(0.96);
  }
}
@media (max-width: 780px) {
  .hero::before {
    transform:
      scale(1.02)
      translateY(calc(var(--hero-shift, 0px) * -0.10));
  }

  .hero-copy {
    transform:
      translateY(calc(var(--hero-shift, 0px) * 0.55));
  }
}
@media (max-width: 780px) {
  .hero::before {
    animation: heroOpacityMobile 1600ms ease 250ms forwards !important;

    transform:
      scale(1.035)
      translate3d(
        0,
        calc(var(--hero-shift, 0px) * -0.45),
        0
      ) !important;

    will-change: transform, opacity;
  }

  .hero-copy {
    transform:
      translate3d(
        0,
        calc(var(--hero-shift, 0px) * 0.65),
        0
      ) !important;

    will-change: transform;
  }

  @keyframes heroOpacityMobile {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}
@media (max-width: 780px) {
  .menu-toggle {
    position: relative;
    isolation: isolate;
  }

  .menu-toggle::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 0.28rem;
    left: 0.28rem;

    width: calc(50% - 0.28rem);
    height: calc(100% - 0.56rem);

    border-radius: 999px;

    background: var(--ink);

    box-shadow:
      0 8px 20px rgba(31,29,26,0.12),
      inset 0 1px 0 rgba(255,255,255,0.18);

    transform: translateX(0);
    transition:
      transform 320ms cubic-bezier(.22,1,.36,1),
      box-shadow 320ms ease;
  }

  .menu-toggle[data-active="drink"]::before {
    transform: translateX(100%);
  }

  .menu-toggle-btn {
    position: relative;
    z-index: 1;
  }

  .menu-toggle-btn.active {
    background: transparent !important;
    color: var(--paper) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .menu-toggle-btn:not(.active) {
    color: var(--muted);
  }
}
@media (max-width: 780px) {
  .timeline-item time {
    color: rgba(31,29,26,0.92) !important;
    font-weight: 650;
  }

  .timeline-item time::after {
    background:
      linear-gradient(
        90deg,
        rgba(31,29,26,0),
        rgba(31,29,26,0.24) 18%,
        rgba(31,29,26,0.24) 82%,
        rgba(31,29,26,0)
      ) !important;
  }

  .timeline-item div p {
    color: rgba(31,29,26,0.56) !important;
  }
}
@media (max-width: 780px) {

  .mobile-scroll-nav.is-dragging {
    width: 120px;
  }

  .mobile-scroll-nav button {
    position: relative;
  }

  .mobile-scroll-nav button::before {
    content: attr(data-label);

    position: absolute;
    left: 2.2rem;
    top: 50%;

    transform: translateY(-50%);

    color: var(--ink);

    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    white-space: nowrap;

    opacity: 0;

    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .mobile-scroll-nav.is-dragging button::before {
    opacity: 0.45;
  }

  .mobile-scroll-nav.is-dragging button.active::before {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
  }
}
@media (max-width: 780px) {
  .mobile-scroll-nav.is-dragging {
    width: 148px;
    padding: 0.4rem;
    border-radius: 1.35rem;
  }

  .mobile-scroll-nav.is-dragging button {
    position: relative;
    justify-content: flex-start;
    padding: 0 0.8rem;
    border-radius: 999px;
  }

  .mobile-scroll-nav.is-dragging button::after {
    display: none !important;
  }

  .mobile-scroll-nav.is-dragging button::before {
    content: attr(data-label);

    opacity: 0.55;

    color: var(--ink);

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;

    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .mobile-scroll-nav.is-dragging button.active {
    background: rgba(31,29,26,0.88);
  }

  .mobile-scroll-nav.is-dragging button.active::before {
    opacity: 1;
    color: var(--paper);
    transform: translateX(2px);
  }

  .mobile-scroll-nav.is-dragging + .mobile-scroll-label,
  .mobile-scroll-label.visible.is-hidden-while-dragging {
    opacity: 0 !important;
  }
}
@media (max-width: 780px) {
  .mobile-scroll-nav.is-dragging {
    width: 152px;
    padding: 0.42rem;
    border-radius: 1.45rem;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.24),
        rgba(255,255,255,0.10)
      );

    border: 1px solid rgba(255,255,255,0.28);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.34),
      0 12px 32px rgba(31,29,26,0.10);
  }

  .mobile-scroll-nav.is-dragging button {
    justify-content: flex-start;
    padding: 0 0.85rem;
    border-radius: 999px;

    transition:
      background 140ms ease,
      box-shadow 140ms ease;
  }

  .mobile-scroll-nav.is-dragging button::after {
    display: none !important;
  }

  .mobile-scroll-nav.is-dragging button::before {
    content: attr(data-label);

    position: static !important;
    transform: none !important;

    opacity: 0.56;

    color: var(--ink);

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;

    transition: none !important;
  }

	.mobile-scroll-nav.is-dragging button.active {
	  background:
		linear-gradient(
		  180deg,
		  rgba(255,255,255,0.48),
		  rgba(255,255,255,0.24)
		);

	  border: 1px solid rgba(255,255,255,0.30);

	  box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.55),
		0 4px 14px rgba(31,29,26,0.06);
	}

  .mobile-scroll-nav.is-dragging button.active::before {
	  color: var(--ink);
	  opacity: 1;
	}
}
@media (max-width: 780px) {
  .mobile-scroll-nav.is-dragging::after {
    content: "";

    position: absolute;
    left: 0.42rem;
    right: 0.42rem;
    top: calc(0.42rem + (var(--active-index, 0) * ((100% - 0.84rem) / 7)));

    height: calc((100% - 0.84rem) / 7);

    border-radius: 999px;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.52),
        rgba(255,255,255,0.24)
      );

    border: 1px solid rgba(255,255,255,0.32);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.58),
      0 5px 16px rgba(31,29,26,0.07);

    pointer-events: none;
    z-index: 0;

    transition:
      top 220ms cubic-bezier(.22,1,.36,1),
      opacity 180ms ease;
  }

  .mobile-scroll-nav.is-dragging button {
    position: relative;
    z-index: 1;
    background: transparent !important;
  }

  .mobile-scroll-nav.is-dragging button.active {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}
@media (max-width: 780px) {
  .mobile-scroll-nav:not(.is-dragging) {
    background: rgba(255,255,255,0.34) !important;

    backdrop-filter: blur(12px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(130%) !important;

    border: 1px solid rgba(31,29,26,0.055) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      0 5px 18px rgba(31,29,26,0.045) !important;
  }

  .mobile-scroll-nav:not(.is-dragging) button::after {
    background: rgba(31,29,26,0.16) !important;

    border: 1px solid rgba(255,255,255,0.42);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.45),
      0 2px 7px rgba(31,29,26,0.045);
  }

  .mobile-scroll-nav:not(.is-dragging) button.active::after {
    background: #cdb38a !important;

    border: 1px solid rgba(255,255,255,0.65);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.62),
      0 0 0 5px rgba(205,179,138,0.18),
      0 5px 16px rgba(31,29,26,0.09);

    transform: scale(1.08);
  }

  .mobile-scroll-label::after {
    background:
      linear-gradient(
        90deg,
        rgba(205,179,138,0),
        rgba(205,179,138,0.48) 42%,
        rgba(205,179,138,0.48) 58%,
        rgba(205,179,138,0)
      ) !important;
  }
}
@media (max-width: 780px) {
  .drink-course {
    padding-left: 1.45rem;
    overflow: visible !important;
  }

  .drink-course::before {
    left: 0.32rem;
  }

  .drink-entry {
    overflow: visible !important;
  }

  .drink-entry::before {
    left: -1.36rem;
    width: 9px;
    height: 9px;
  }
}
@media (max-width: 780px) {
  .hero-copy {
    text-align: center;
  }

  .hero-copy h1 {
    text-align: center;
  }

  .save-the-date,
  .save-the-date p,
  .save-the-date-label {
    text-align: left;
  }
}