/* ==========================================================================
   Base: document defaults, typography, links, buttons, small shared pieces
   and layout helpers. Loaded after Bootstrap and tokens.css.
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

/* Bootstrap turns on native smooth scrolling. Lenis does the smoothing
   itself, and the two fight each other if both are active. */
html.lenis {
  scroll-behavior: auto;
}

body {
  background: var(--white);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  word-spacing: var(--word-space);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Browsers reset word spacing on form controls; keep it with the page's */
button,
input,
select,
textarea {
  word-spacing: inherit;
}

::selection {
  background: var(--sun);
  color: var(--ink);
}

/* Icons come from assets/icons/sprite.svg and take the text colour */
.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

/* Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
.heading {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.08;
  word-spacing: var(--word-space-display);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: -0.022em;
  line-height: 1.22;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lede {
  color: var(--body);
  font-size: var(--text-lead);
  line-height: 1.6;
}

/* Brand-green emphasis inside a heading */
.accent {
  color: var(--green);
}

/* Links
   ========================================================================== */

a {
  color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--fast) ease;
}

a:hover {
  color: var(--green-deep);
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.on-dark :focus-visible,
.on-dark:focus-visible {
  outline-color: var(--sun);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: calc(var(--z-preloader) + 1);
  padding: 0.75rem 1.2rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-250%);
}

.skip-link:hover,
.skip-link:focus {
  color: var(--white);
}

.skip-link:focus {
  transform: none;
}

/* Text link with an arrow that nudges on hover */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.link-arrow .icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--green);
  transition: transform var(--medium) var(--ease-out);
}

.link-arrow:hover {
  color: var(--green);
}

.link-arrow:hover .icon {
  transform: translate(3px, -3px);
}

/* Larger tap area than the visible text */
.link-arrow::after {
  content: "";
  position: absolute;
  inset: -0.6rem -0.25rem;
}

/* Buttons
   --------------------------------------------------------------------------
   <a class="button button--sun"> Label
     <span class="button__chip"> two copies of the arrow icon </span>
   </a>
   The chip holds two arrows; on hover one leaves as the other arrives.
   ========================================================================== */

.button {
  --bg: var(--green);
  --bg-hover: var(--green-deep);
  --fg: var(--white);
  --chip-bg: var(--white);
  --chip-fg: var(--green);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-height: 3.25rem;
  padding: 0.4rem 1.6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--fast) ease,
    color var(--fast) ease,
    box-shadow var(--fast) ease,
    transform var(--medium) var(--ease-out);
}

.button:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.button:active {
  transform: scale(0.97);
}

/* A button that carries the arrow chip sits tighter on that side */
.button:has(.button__chip) {
  padding-right: 0.5rem;
}

.button__chip {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-fg);
  overflow: hidden;
}

.button__chip .icon {
  grid-area: 1 / 1;
  width: 1rem;
  height: 1rem;
  transition: transform var(--medium) var(--ease-out);
}

.button__chip .icon + .icon {
  transform: translate(-160%, 160%);
}

.button:hover .button__chip .icon:first-child {
  transform: translate(160%, -160%);
}

.button:hover .button__chip .icon + .icon {
  transform: none;
}

.button--sun {
  --bg: var(--sun);
  --bg-hover: var(--sun-bright);
  --fg: var(--ink);
  --chip-bg: var(--ink);
  --chip-fg: var(--sun);
}

.button--ink {
  --bg: var(--ink);
  --bg-hover: var(--pine-3);
  --chip-fg: var(--ink);
}

.button--outline {
  --bg: transparent;
  --fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.button--outline:hover {
  background: var(--ink);
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* For use over photos and dark surfaces only: the label is white */
.button--glass {
  --bg: rgba(6, 40, 29, 0.35);
  --fg: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.button--glass:hover {
  background: var(--white);
  color: var(--ink);
}

.button--lg {
  min-height: 3.75rem;
  padding-inline: 1.9rem;
  font-size: var(--text-base);
}

.button--lg .button__chip {
  width: 2.75rem;
  height: 2.75rem;
}

.button--sm {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
}

.button--block {
  width: 100%;
}

/* Round icon button (carousel arrows, close buttons) */
.round-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color var(--fast) ease,
    border-color var(--fast) ease,
    color var(--fast) ease,
    opacity var(--fast) ease,
    transform var(--medium) var(--ease-out);
}

.round-btn:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

.round-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.round-btn:disabled,
.round-btn.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

.round-btn.swiper-button-lock {
  display: none;
}

/* Chip: the small label above a section heading */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem 0.35rem 0.4rem;
  border-radius: var(--r-pill);
  background: var(--mist-deep);
  color: var(--green-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
}

.chip__dot {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
}

.chip__dot .icon {
  width: 0.85rem;
  height: 0.85rem;
}

.chip--glass {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Marks placeholder content. Remove `data-draft` from <html> to hide them. */
.sample-flag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 0.15rem 0.65rem;
  border: 1px dashed var(--sun-deep);
  border-radius: var(--r-pill);
  background: #fff7e8;
  color: #7c5000;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
}

html:not([data-draft]) .sample-flag {
  display: none;
}

/* Stars and avatars
   ========================================================================== */

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--sun);
}

.stars .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--mist-deep);
  color: var(--green-deep);
  font-size: var(--text-xs);
  font-weight: 800;
}

.avatar--sun {
  background: #fdecc8;
  color: #7c5000;
}

.avatar--pine {
  background: var(--pine-2);
  color: var(--mint);
}

/* Layout helpers
   ========================================================================== */

.container-xxl {
  --bs-gutter-x: calc(var(--gutter) * 2);
}

.section {
  position: relative;
  padding-block: var(--section);
}

.section--mist {
  background: var(--mist);
}

/* Section heading: chip, title and optional text; `__aside` sits on the
   right on wide screens (links, carousel arrows). */
.section-head {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

.section-head .chip {
  justify-self: start;
  margin-bottom: 1.25rem;
}

.section-head h2 {
  max-width: 15em;
}

.section-head .lede {
  max-width: 992px;
  margin-top: 1.25rem;
}

@media (min-width: 992px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.section-head--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.section-head--center .chip {
  justify-self: center;
}

.section-head--center .lede {
  margin-inline: auto;
}

/* Photo frame: clips zoom and parallax movement */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--mist-deep);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Motion defaults
   --------------------------------------------------------------------------
   `html.motion` is set by an inline script in the page head when the visitor
   has not asked for reduced motion. Elements that animate in start
   transparent so they do not flash before the scripts run. Without the class
   everything is visible, so the page works with scripts off.

   Opacity is used, not visibility, so links and fields that have not faded
   in yet can still be reached with the Tab key.
   ========================================================================== */

html.motion [data-reveal],
html.motion [data-reveal-group] > * {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}