@font-face { font-family: Montserrat; font-weight: 500; font-display: fallback; src: url("/fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 600; font-display: fallback; src: url("/fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: fallback; src: url("/fonts/montserrat-700.woff2") format("woff2"); }

:root {
  --clr-base: #fff;
  --clr-black: #000;
  --clr-contrast: #000033;
  --clr-accent-1: #0076c0;
  --clr-accent-2: #8dce00;
  --clr-accent-3: #da3bee;
  --clr-accent-4: #282828;
  --clr-accent-5: #074999;
  --clr-accent-6: #d5ecfa;
  --clr-navy: #010d35;
  --clr-ocean: #0268a8;
  --clr-sky: #2b87da;

  --gradient-dark-blue: linear-gradient(90deg, var(--clr-navy) 0%, var(--clr-ocean) 99%);
  --gradient-light-blue: linear-gradient(0deg, color-mix(in srgb, var(--clr-ocean) 70%, transparent) 0%, var(--clr-base) 74%);

  --font-size-small: 0.875rem;
  --font-size-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.223), 1.125rem);
  --font-size-large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 1.563), 2rem);
  --font-size-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.232), 3rem);
  --font-size-xx-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 4.911), 4.5rem);

  --radius-m: 1rem;
  --radius-full: 999rem;

  --shadow-2xl: 0 1.5625rem 3.125rem -0.75rem color-mix(in srgb, var(--clr-black) 25%, transparent);
  --shadow-main: 0 0.5rem 1rem color-mix(in srgb, var(--clr-black) 7%, transparent);

  --content-width: 76rem;
  --header-height: 5.625rem;
  --section-pad: 3rem;
  --gap: 2rem;

  @media (min-width: 64rem) {
    --section-pad: 8rem;
    --gap: 4rem;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-padding-block-start: var(--header-height);
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--clr-base);
  color: var(--clr-accent-4);
  font-family: Montserrat, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.1px;
  line-height: 1.65;

  &:has(dialog[open]) { overflow: hidden; }
}

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; }
  @view-transition { navigation: none; }
}

::selection { background: var(--clr-accent-1); color: var(--clr-base); }

h1,
h2,
h3 {
  margin-block: 0 2rem;
  color: var(--clr-contrast);
  font-weight: 700;
  line-height: 1.125;
  text-wrap: pretty;
}

h1 { font-size: var(--font-size-xx-large); }
h2 { font-size: var(--font-size-x-large); }
h3 { margin-block-end: 1rem; font-size: var(--font-size-large); }

p {
  margin-block: 0 2rem;
  text-wrap: pretty;

  &:last-child { margin-block-end: 0; }
}

strong { font-weight: 600; }

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;

  &:hover { text-decoration-color: var(--clr-accent-1); }
}

ul,
ol {
  margin-block: 0 2rem;

  &:last-child { margin-block-end: 0; }
}

li {
  margin-block-end: 0.75rem;

  &::marker { color: var(--clr-accent-1); font-size: 1.5rem; }
}

section { position: relative; padding: var(--section-pad) 1.5rem; }

.inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin-inline: auto;
}

.two-col {
  display: grid;
  gap: var(--gap);
  align-items: center;

  @media (min-width: 48rem) { grid-template-columns: 1fr 1fr; }
}

.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shadow { box-shadow: var(--shadow-2xl); }
.framed { display: block; border: 2px solid var(--clr-contrast); }
.accent { color: var(--clr-accent-1); }

.bar {
  max-width: 16rem;
  height: 0.25rem;
  margin-block-end: 2rem;
  background: var(--clr-accent-1);
}

/* Scroll-driven reveals */

@supports (animation-timeline: view()) {
  .scroll-fade-up {
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 20%;
  }

  .scroll-grow {
    animation: grow linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 20%;
  }

  .scroll-rotate {
    animation: rotate linear both;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes grow {
  from { opacity: 0; clip-path: inset(45% 20% 45% 20%); }
  to { opacity: 1; clip-path: inset(0); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Buttons */

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  @media (max-width: 64rem) {
    > .button { width: 100%; }
  }
}

.button {
  display: inline-block;
  padding: 1rem 2.25rem;
  border-radius: var(--radius-full);
  background: var(--clr-contrast);
  color: var(--clr-base);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s;

  &:hover { opacity: 0.85; }
  &:focus-visible { outline: 2px solid var(--clr-accent-4); outline-offset: 2px; }
}

.button-accent-1 { background: var(--clr-accent-1); }
.button-accent-2 { background: var(--clr-accent-2); color: var(--clr-contrast); }
.button-accent-3 { background: var(--clr-accent-3); }

/* Header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 99;
  padding: 0.5rem 1.5rem;
  background: var(--clr-base);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 104rem;
  margin-inline: auto;
}

.logo {
  display: block;
  width: 4rem;

  @media (min-width: 64.0625rem) { width: 8rem; }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.5rem;
  height: 1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;

  span {
    display: block;
    height: 2px;
    background: var(--clr-contrast);
    transition: transform 0.3s ease-in-out;
  }

  &[aria-expanded="true"] {
    span:first-child { transform: translateY(7px) rotate(45deg); }
    span:last-child { transform: translateY(-7px) rotate(-45deg); }
  }

  @media (min-width: 64.0625rem) { display: none; }
}

.main-nav {
  display: none;
  font-weight: 600;

  ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    position: relative;
    margin: 0;
    line-height: normal;

    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      height: 2px;
      background: var(--clr-accent-1);
      transform: scaleX(0);
      transform-origin: 100% 50%;
      transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    &:hover::after {
      transform: scaleX(1);
      transform-origin: 0 50%;
    }
  }

  li a {
    display: block;
    color: var(--clr-accent-6);
    text-decoration: none;
  }

  .nav-toggle[aria-expanded="true"] ~ & {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-height: calc(100dvh - 100%);
    padding: 3rem 1.5rem;
    overflow-y: auto;
    background: var(--clr-contrast);
  }

  @media (min-width: 64.0625rem) {
    display: flex;
    gap: 2rem;
    align-items: center;

    ul { flex-direction: row; gap: 2rem; }
    li { padding-block: 0.5rem; }
    li a { color: var(--clr-contrast); }
  }
}

.shop-pill {
  display: block;
  margin-block-end: 2rem;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
  background: var(--clr-accent-1);
  color: var(--clr-base);
  text-align: center;
  text-decoration: none;

  @media (min-width: 64.0625rem) {
    margin: 0;
    background: var(--clr-accent-2);
    color: var(--clr-contrast);
  }
}

/* Home */

.hero {
  overflow: clip;

  .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* The background tints the photo; the path fill lays the white stripes over that */
.hero-stripes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--clr-ocean) 0%, color-mix(in srgb, var(--clr-base) 65%, transparent) 100%);
  fill: color-mix(in srgb, var(--clr-base) 82%, transparent);
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: var(--content-width);
  margin-inline: auto;

  @media (min-width: 64rem) {
    grid-template-columns: repeat(12, 1fr);

    .hero-text { grid-column: span 7; }
    .hero-badge { grid-column: span 5; }
  }
}

.hero-kicker {
  font-size: var(--font-size-large);
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-lede { margin-block-start: 2rem; }

.hero-badge {
  margin: auto;

  @media (min-width: 64rem) { margin: 0; }
}

.banner {
  padding-block: 3rem;
  background: var(--gradient-dark-blue);

  h2 {
    max-width: var(--content-width);
    margin: 0 auto;
    color: var(--clr-base);
    text-align: center;
    text-wrap: balance;
  }
}

.parallax {
  min-height: 32rem;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;

  @media (hover: none) { background-attachment: scroll; }
}

.main-info {
  background: var(--gradient-dark-blue);
  color: var(--clr-base);

  h2 { color: var(--clr-base); }
}

.universe {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: center;
  margin-block-end: var(--gap);

  > :last-child { flex: 1; }

  @media (min-width: 48rem) { flex-direction: row; }
}

.spark-circle {
  flex-shrink: 0;
  padding: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--clr-base);

  img { width: 16rem; }
}

.peak {
  background: var(--gradient-light-blue);

  .two-col { align-items: center; }
}

.peak-intro {
  display: grid;
  gap: var(--gap);
  align-items: center;
  margin-block-end: var(--gap);

  h2 { margin: 0; }

  @media (min-width: 48rem) { grid-template-columns: 1fr 1fr; }
  @media (min-width: 64rem) { grid-template-columns: 7fr 5fr; }
}

/* Wavy band behind the FAQ heading */
.faq::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--section-pad) + 1.75rem);
  inset-inline: 0;
  height: 18rem;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='10'%3E%3Cpath d='M40 5c13.333 5 26.667 5 40 0M0 5c13.333-5 26.667-5 40 0' stroke='%23fff' stroke-width='2' fill='transparent'/%3E%3C/svg%3E") var(--clr-accent-6);
}

.faq h2 { text-align: center; }

.faq-panel {
  padding: 1.5rem;
  border-radius: var(--radius-m);
  background: var(--clr-accent-1);
  color: var(--clr-base);

  li::marker { color: var(--clr-accent-2); }
}

details {
  &::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
  }

  &[open]::details-content { height: auto; }

  /* Space the answer with padding: a margin escapes the clipped box and lands after the height transition */
  > summary + * { padding-block-start: 1.5rem; }

  &[open] > summary::after { transform: rotate(180deg); }
}

summary {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-block-end: 1px solid var(--clr-base);
  font-size: clamp(1.2rem, 1.2rem + 0.5vw, 1.5rem);
  list-style: none;
  cursor: pointer;

  &::-webkit-details-marker { display: none; }

  &::after {
    content: "";
    position: absolute;
    inset-block-start: 47%;
    inset-inline-end: 0;
    width: 18px;
    height: 14px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 8 6' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1 3 3 3-3' stroke-width='.75'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease-in-out;
  }

  &:focus-visible { outline: 2px solid var(--clr-base); outline-offset: 2px; }
}

/* Experiments */

.page-intro {
  padding-block: 3rem;
  background: var(--gradient-light-blue);

  .inner {
    display: grid;
    gap: clamp(1.875rem, 5vw, 3.125rem) clamp(4.375rem, 10vw, 8.75rem);
    align-items: center;

    @media (min-width: 48.875rem) { grid-template-columns: 2fr 1fr; }
  }

  h1 { color: var(--clr-accent-1); text-wrap: balance; }

  @media (min-width: 64rem) { padding-block: 6rem; }
}

.chapters {
  padding-inline: 0.75rem;

  .inner { max-width: 100rem; }

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

.videos {
  display: grid;
  gap: 2rem;
  margin-block-end: 3rem;

  @media (min-width: 48rem) { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 64rem) { grid-template-columns: repeat(3, 1fr); }
}

.lightbox {
  max-width: min(90vw, 40rem);
  padding: 0;
  border: 0;
  background: none;

  &::backdrop { background: color-mix(in srgb, var(--clr-black) 85%, transparent); }

  img { max-height: 90dvh; margin-inline: auto; }
}

.lightbox-close {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--clr-base);
  color: var(--clr-contrast);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Author and Illustrator */

.meet {
  display: grid;
  padding: 0;
  background: var(--clr-contrast);
  color: var(--clr-base);

  @media (min-width: 64rem) { grid-template-columns: 1fr 1fr; }
}

.meet-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 70vh;
  overflow: clip;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--clr-black) 80%, transparent) 100%);
  }

  .bar { background: var(--clr-base); }
}

.meet-text {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 1.5rem;

  h2 {
    color: var(--clr-base);
    text-shadow: 0.5rem 0.5rem 3rem var(--clr-black);
  }

  .meet-author & {
    margin-inline-start: auto;
    text-align: end;

    .bar { margin-inline-start: auto; }
    .buttons { justify-content: flex-end; }
  }

  @media (min-width: 64rem) { padding: 3rem; }
}

.intro-pair-grid {
  display: grid;
  gap: var(--gap);
  align-items: center;

  h2 { color: var(--clr-accent-1); font-size: var(--font-size-large); }

  @media (min-width: 48rem) { grid-template-columns: 1fr 1fr; }
  @media (min-width: 64rem) { grid-template-columns: 4fr 8fr; }
}

.intro-card {
  display: grid;
  gap: var(--gap);
  margin-block-start: var(--gap);
  padding: 1.5rem;
  border-radius: var(--radius-m);
  background: var(--clr-accent-1);
  color: var(--clr-base);

  li::marker { color: var(--clr-accent-2); }

  @media (min-width: 48rem) { grid-template-columns: 1fr 1fr; }
  @media (min-width: 64rem) { padding: 3rem; }
}

.bio {
  display: grid;
  gap: var(--gap);
  align-items: center;
  padding: 0;

  @media (min-width: 64rem) { grid-template-columns: 1fr 1fr; }
}

.bio-text > p {
  max-width: 38rem;
  margin-block-start: 2rem;
  margin-inline-start: auto;
  padding-inline: 1.5rem;
  color: var(--clr-accent-5);

  @media (min-width: 64rem) { margin-block-start: 6rem; }
}

.name-tab {
  margin-inline-end: 1.5rem;
  padding: 1.5rem;
  border-inline-end: 1.5rem solid var(--clr-accent-3);
  border-start-end-radius: var(--radius-m);
  border-end-end-radius: var(--radius-m);
  background: var(--clr-accent-5);
  color: var(--clr-base);
  text-align: center;

  h2 { margin-block-end: 1rem; color: var(--clr-base); }
}

.bio-photo {
  position: relative;
  min-height: 70vh;
  overflow: clip;

  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--clr-base) 0%, color-mix(in srgb, var(--clr-base) 5%, transparent) 45%);
  }
}

.highlights {
  overflow: clip;
  color: var(--clr-accent-5);

  .two-col {
    @media (min-width: 64rem) { column-gap: 6rem; }
  }

  h3 { margin-block-start: var(--gap); color: var(--clr-accent-5); }
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  text-align: center;
}

.stat-number { margin: 0; font-size: var(--font-size-x-large); }
.stat-label { color: var(--clr-accent-4); text-transform: uppercase; }

.logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
  margin-block-start: 2rem;

  img { box-shadow: var(--shadow-main); }

  @media (min-width: 64rem) { grid-template-columns: repeat(4, 1fr); }
}

.quote {
  background: var(--clr-accent-5);
  color: var(--clr-base);
  text-align: center;

  > * { max-width: var(--content-width); margin-inline: auto; }
}

.quote-mark {
  display: block;
  width: 6rem;
  fill: var(--clr-base);
}

.quote-text {
  margin-block-end: 2rem;
  font-size: var(--font-size-large);

  @media (min-width: 64rem) { margin-block-end: 4rem; }
}

.gallery {
  padding-block: 3rem;
  overflow: clip;
  background: linear-gradient(180deg, var(--clr-sky) 0%, var(--clr-base) 100%);

  > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.pattern-hatch { fill: color-mix(in srgb, var(--clr-black) 20%, transparent); }
.pattern-wave { fill: var(--clr-base); }

.gallery-grid {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: end;
  max-width: 96rem;
  min-height: 16rem;
  margin-inline: auto;

  .arch { border-end-start-radius: 50%; border-end-end-radius: 50%; }

  @media (min-width: 48rem) { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 64rem) { grid-template-columns: repeat(5, 1fr); }
}

.gallery-stack {
  display: grid;
  gap: 2rem;
}

.badge {
  padding: 3rem;
  border: 2px solid var(--clr-accent-4);
  border-radius: var(--radius-full);
  background: var(--clr-base);

  img { aspect-ratio: 1; object-fit: contain; }
}

.lift-16 {
  @media (min-width: 64rem) { margin-block-end: 4rem; }
}

.lift-12 {
  @media (min-width: 64rem) { margin-block-end: 3rem; }
}

/* Privacy */

.legal {
  padding-block: 3rem;

  .inner { max-width: 48rem; }
}

/* Footer */

.site-footer {
  padding: 4rem 1.5rem 1.5rem;
  font-size: 1.06rem;
}

.footer-inner {
  display: grid;
  gap: 4rem;
  max-width: var(--content-width);
  margin-inline: auto;
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  color: var(--clr-contrast);

  a { display: block; margin-block-end: 0.25rem; color: var(--clr-accent-1); text-decoration: none; }

  p { margin-block-end: 0; }
}

.footer-logo { width: 100%; max-width: 16rem; }

.footer-col-heading {
  margin-block-end: 2rem !important;
  font-weight: 700;
}

.socials {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;

  li { margin: 0; }

  svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--clr-accent-1);
  }
}

.footer-tagline { margin-block: 2rem 1rem !important; }

.footer-cols p:last-child a { display: inline; }

.footnote { margin: 0; }