:root {
  --ink: #26333a;
  --ink-soft: #52616a;

  --blue: #86aabd;
  --blue-light: #dce9ef;
  --blue-pale: #edf4f6;
  --blue-dark: #39596a;

  --paper: #fcfaf3;
  --cream: #f4f0e5;

  --coral: #dc806c;
  --yellow: #e3bc58;

  --line: rgba(38, 51, 58, .17);

  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}


/* ========================================
   RESET
======================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  overflow-x: hidden;

  color: var(--ink);
  background: var(--paper);

  font-family: var(--sans);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

textarea,
input {
  outline: none;
}



/* ========================================
   BRAND
======================================== */

.wv-brand {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  flex-shrink: 0;
}

.wv-brand-image-wrap {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;
}

.wv-brand-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}

.wv-brand-copy {
  display: flex;
  flex-direction: column;

  line-height: 1.05;
}

.wv-brand-name {
  font-family: var(--serif);

  font-size: 1.08rem;
  font-weight: 600;
}

.wv-brand-note {
  margin-top: 5px;

  font-size: .5rem;
  font-weight: 700;

  letter-spacing: .13em;
  text-transform: uppercase;

  opacity: .56;
}



/* ========================================
   NAV
======================================== */

.site-header {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 50;
}

.navbar {
  width: min(1380px, calc(100% - 4rem));
  height: 100px;

  margin: auto;

  display: flex;
  align-items: center;

  border-bottom: 1px solid var(--line);
}

.nav-links {
  margin-left: auto;

  display: flex;

  gap: 2rem;

  font-size: .68rem;
  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;
}

.nav-links a {
  opacity: .58;
}

.nav-links a:hover {
  opacity: 1;
}

.menu-button {
  display: none;

  margin-left: auto;

  padding: .7rem;

  background: none;
  border: 0;
}

.menu-button span {
  display: block;

  width: 25px;
  height: 1px;

  margin: 6px;

  background: var(--ink);
}



/* ========================================
   HERO
======================================== */

.hero {
  position: relative;

  min-height: 100vh;

  padding:
    160px
    max(6vw, 2rem)
    100px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, .85fr);

  align-items: center;

  gap: 7vw;

  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(134, 170, 189, .38),
      transparent 30%
    ),
    linear-gradient(
      140deg,
      #fbf9f1,
      #eaf2f4
    );
}

.hero::before {
  content: "?";

  position: absolute;

  right: -2vw;
  bottom: -15vw;

  color: rgba(57, 89, 106, .055);

  font-family: var(--serif);

  font-size: 50vw;

  line-height: 1;

  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;

  max-width: 760px;

  margin-left: auto;
}

.world-label {
  display: flex;
  align-items: center;

  gap: .7rem;

  font-size: .62rem;
  font-weight: 700;

  letter-spacing: .17em;
}

.world-label span {
  padding: .32rem .65rem;

  border: 1px solid var(--ink);

  border-radius: 999px;
}

.hero h1 {
  margin:
    1.3rem
    0
    1.7rem;

  font-family: var(--serif);

  font-size:
    clamp(4.5rem, 7.8vw, 8.5rem);

  font-weight: 500;

  letter-spacing: -.065em;

  line-height: .88;
}

.hero h1 em {
  color: var(--blue-dark);

  font-style: italic;

  text-decoration: underline;

  text-decoration-color: var(--coral);

  text-decoration-thickness: 6px;

  text-underline-offset: 10px;
}

.hero-question {
  max-width: 570px;

  font-family: var(--serif);

  font-size: 1.35rem;
}

.hero-question strong {
  color: var(--blue-dark);
}

.enter-button {
  margin-top: 2rem;

  padding: .9rem 1.2rem;

  display: inline-flex;
  align-items: center;

  gap: 4rem;

  color: white;
  background: var(--blue-dark);

  border-radius: 999px;

  font-size: .65rem;
  font-weight: 700;

  letter-spacing: .12em;
}



/* ========================================
   ORBIT
======================================== */

.hero-orbit {
  position: relative;

  min-height: 600px;

  display: grid;
  place-items: center;
}

.orbit {
  position: absolute;

  border: 1px dashed rgba(38,51,58,.28);

  border-radius: 50%;
}

.orbit-one {
  width: 240px;
  height: 240px;

  transform: rotate(12deg);
}

.orbit-two {
  width: 380px;
  height: 300px;

  transform: rotate(-12deg);
}

.orbit-three {
  width: 510px;
  height: 420px;

  transform: rotate(16deg);
}

.inner-self {
  z-index: 4;

  width: 170px;
  height: 170px;

  display: grid;
  place-items: center;

  align-content: center;

  color: white;
  background: var(--blue-dark);

  border-radius: 50%;

  box-shadow:
    10px
    12px
    0
    rgba(38,51,58,.11);

  text-align: center;
}

.inner-self small {
  font-size: .48rem;

  letter-spacing: .13em;
}

.inner-self strong {
  font-family: var(--serif);

  font-size: 3.4rem;
  font-weight: 500;
}

.voice {
  position: absolute;

  padding: .45rem .7rem;

  background: var(--paper);

  border: 1px solid var(--ink);

  box-shadow:
    4px
    5px
    0
    rgba(38,51,58,.1);

  font-size: .55rem;
  font-weight: 700;

  letter-spacing: .1em;
}

.voice-one {
  top: 15%;
  left: 16%;

  transform: rotate(-8deg);
}

.voice-two {
  top: 22%;
  right: 12%;

  transform: rotate(6deg);
}

.voice-three {
  bottom: 20%;
  left: 8%;

  transform: rotate(7deg);
}

.voice-four {
  bottom: 10%;
  right: 18%;

  transform: rotate(-5deg);
}

.voice-five {
  top: 47%;
  right: 1%;
}



/* ========================================
   STRIP
======================================== */

.question-strip {
  padding: 1rem 2rem;

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

  gap: 1.8rem;

  flex-wrap: wrap;

  color: white;
  background: var(--blue-dark);

  font-size: .62rem;
  font-weight: 700;

  letter-spacing: .13em;
}

.question-strip i {
  color: var(--yellow);

  font-family: var(--serif);

  font-size: 1.5rem;
}

.question-strip strong {
  color: var(--yellow);
}



/* ========================================
   SECTIONS
======================================== */

.section {
  padding:
    125px
    max(6vw, 2rem);
}

.section-intro {
  width: min(1100px, 100%);

  margin:
    0
    auto
    4rem;
}

.section-intro > p:first-child {
  font-size: .6rem;
  font-weight: 700;

  letter-spacing: .16em;
}

.section-intro h2 {
  margin:
    1rem
    0;

  font-family: var(--serif);

  font-size:
    clamp(3.5rem, 6vw, 7rem);

  font-weight: 500;

  letter-spacing: -.055em;

  line-height: .92;
}

.section-intro h2 em {
  color: var(--blue-dark);

  font-style: italic;
}

.section-intro > p:last-child {
  color: var(--ink-soft);
}



/* ========================================
   VOICES
======================================== */

.voices-section {
  background: var(--paper);
}

.voice-cloud {
  width: min(1080px, 100%);

  margin: auto;

  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 1rem;
}

.voice-cloud button {
  padding:
    clamp(.8rem, 2vw, 1.3rem)
    clamp(1rem, 3vw, 2rem);

  background: transparent;

  border: 1px solid var(--ink);

  border-radius: 999px;

  font-family: var(--serif);

  font-size:
    clamp(1rem, 2vw, 1.45rem);

  transition: .2s;
}

.voice-cloud button:hover {
  transform: translateY(-4px);

  background: var(--blue-pale);
}

.voice-cloud button.active {
  color: white;
  background: var(--blue-dark);
}

.voice-result {
  max-width: 750px;

  margin:
    3rem
    auto
    0;

  padding: 2rem;

  background: var(--blue-pale);

  border-left: 5px solid var(--coral);

  text-align: center;
}

.voice-result small {
  font-size: .55rem;
  font-weight: 700;

  letter-spacing: .13em;
}

.voice-result p {
  margin:
    .6rem
    0
    0;

  font-family: var(--serif);

  font-size: 1.3rem;
}



/* ========================================
   AUDIENCE
======================================== */

.audience-section {
  min-height: 760px;

  padding:
    110px
    max(6vw, 2rem);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8vw;

  align-items: center;

  color: white;
  background: #26333a;
}

.audience-visual {
  min-height: 500px;

  display: flex;
  flex-direction: column;

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

  gap: 3rem;
}

.audience-row {
  display: flex;

  gap: 1.3rem;

  color: #79909a;

  font-size: 3rem;
}

.stage-person {
  width: 150px;
  height: 190px;

  display: grid;
  place-items: center;

  color: var(--ink);
  background: var(--yellow);

  border-radius: 75px 75px 15px 15px;

  font-family: var(--serif);

  font-size: 1.4rem;
}

.audience-copy > p:first-child {
  color: var(--yellow);

  font-size: .6rem;
  font-weight: 700;

  letter-spacing: .15em;
}

.audience-copy h2 {
  margin:
    1rem
    0;

  font-family: var(--serif);

  font-size:
    clamp(4rem, 7vw, 8rem);

  font-weight: 500;

  letter-spacing: -.06em;

  line-height: .88;
}

.large-question {
  color: var(--yellow);

  font-family: var(--serif);

  font-size: 2rem;
}

.audience-copy textarea {
  width: min(600px, 100%);

  min-height: 150px;

  margin-top: 1rem;

  padding: 1.2rem;

  color: white;
  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.35);

  resize: vertical;
}



/* ========================================
   MOTIVE CARDS
======================================== */

.motive-section {
  background: var(--cream);
}

.motive-grid {
  width: min(1200px,100%);

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3,1fr);
}

.motive-card {
  min-height: 270px;

  padding: 1.7rem;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  background: var(--paper);

  border: 1px solid var(--line);

  text-align: left;

  transition: .2s;
}

.motive-card:nth-child(2n) {
  background: var(--blue-pale);
}

.motive-card:hover,
.motive-card.active {
  z-index: 2;

  transform: translateY(-7px);

  box-shadow:
    9px
    11px
    0
    rgba(38,51,58,.1);
}

.motive-card.active {
  outline: 3px solid var(--coral);
}

.motive-card small {
  font-size: .55rem;

  letter-spacing: .13em;
}

.motive-card strong {
  margin: auto 0;

  font-family: var(--serif);

  font-size: 1.7rem;
  font-weight: 500;

  line-height: 1.15;
}

.motive-card span {
  margin-left: auto;

  color: var(--coral);
}

.motive-response {
  width: min(820px,100%);

  min-height: 110px;

  margin:
    3rem
    auto
    0;

  padding: 2rem;

  display: grid;
  place-items: center;

  color: var(--blue-dark);

  font-family: var(--serif);

  font-size: 1.35rem;

  text-align: center;
}



/* ========================================
   MIRROR
======================================== */

.mirror-section {
  min-height: 800px;

  padding:
    120px
    max(6vw,2rem);

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 8vw;

  background: var(--blue-light);
}

.mirror-wrap {
  display: grid;
  place-items: center;
}

.mirror {
  position: relative;

  width: min(420px,80vw);
  height: 560px;

  padding: 30px;

  display: grid;
  place-items: center;

  border:
    12px
    solid
    var(--blue-dark);

  border-radius:
    50% 50% 46% 46% / 12% 12% 8% 8%;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.9),
      rgba(176,203,215,.45)
    );

  box-shadow:
    20px
    25px
    0
    rgba(38,51,58,.1);
}

.mirror::before {
  content: "";

  position: absolute;

  inset: 20px;

  border: 1px solid rgba(38,51,58,.25);

  border-radius:
    50% 50% 46% 46% / 12% 12% 8% 8%;
}

.mirror-top {
  position: absolute;

  top: 35px;

  font-size: .55rem;
  font-weight: 700;

  letter-spacing: .14em;
}

.mirror-question {
  position: relative;

  z-index: 2;

  text-align: center;
}

.mirror-question small {
  font-size: .55rem;

  letter-spacing: .14em;
}

.mirror-question h2 {
  margin: 1rem 0;

  font-family: var(--serif);

  font-size:
    clamp(2.8rem,5vw,4.8rem);

  font-weight: 500;

  letter-spacing: -.055em;

  line-height: .95;
}

.mirror-question h2 em {
  color: var(--coral);
}

.mirror-copy > p {
  font-size: .6rem;
  font-weight: 700;

  letter-spacing: .15em;
}

.mirror-prompts {
  display: grid;

  gap: .7rem;
}

.mirror-prompt {
  padding:
    1rem
    1.2rem;

  background: transparent;

  border: 0;
  border-bottom: 1px solid var(--ink);

  font-family: var(--serif);

  font-size: 1.25rem;

  text-align: left;
}

.mirror-prompt:hover {
  padding-left: 1.8rem;

  color: var(--blue-dark);
}



/* ========================================
   QUESTION CHAMBER
======================================== */

.question-chamber {
  color: white;
  background: var(--blue-dark);
}

.chamber-label {
  width: min(950px,100%);

  margin:
    0
    auto
    2rem;

  display: flex;
  align-items: center;

  gap: .8rem;

  font-size: .6rem;
  font-weight: 700;

  letter-spacing: .15em;
}

.chamber-label span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  color: var(--ink);
  background: var(--yellow);

  border-radius: 50%;
}

.question-card {
  width: min(950px,100%);

  margin: auto;

  padding:
    clamp(2rem,6vw,5rem);

  color: var(--ink);
  background: var(--paper);

  box-shadow:
    15px
    18px
    0
    rgba(0,0,0,.15);
}

.question-card > p:first-child {
  font-size: .58rem;
  font-weight: 700;

  letter-spacing: .14em;
}

.question-card h2 {
  margin:
    2rem
    0
    3rem;

  font-family: var(--serif);

  font-size:
    clamp(2.8rem,5vw,5rem);

  font-weight: 500;

  letter-spacing: -.05em;

  line-height: 1;
}

.question-card textarea {
  width: 100%;

  min-height: 180px;

  padding: 1rem 0;

  background: transparent;

  border: 0;
  border-bottom: 2px solid var(--ink);

  resize: vertical;

  font-family: var(--serif);

  font-size: 1.25rem;
}

.question-controls {
  margin-top: 2rem;

  display: flex;

  justify-content: space-between;

  gap: 1rem;
}

.question-controls button {
  padding: .8rem 1rem;

  background: transparent;

  border: 1px solid var(--ink);
}

.question-controls .save-answer {
  color: white;
  background: var(--blue-dark);
}

.save-status {
  min-height: 25px;

  color: var(--blue-dark);

  font-size: .7rem;

  text-align: center;
}



/* ========================================
   SIGNAL / NOISE
======================================== */

.signal-section {
  min-height: 650px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 5vw;

  padding:
    110px
    max(6vw,2rem);

  background: var(--paper);
}

.noise-side,
.signal-side {
  min-height: 350px;

  display: flex;
  flex-direction: column;

  justify-content: center;
}

.noise-side {
  align-items: flex-end;

  color: #8b959a;
}

.noise-side small,
.signal-side small {
  margin-bottom: 1.5rem;

  font-size: .57rem;
  font-weight: 700;

  letter-spacing: .15em;
}

.noise-side span {
  font-family: var(--serif);

  font-size:
    clamp(1.5rem,3vw,3rem);

  text-decoration: line-through;

  text-decoration-color: var(--coral);
}

.signal-divider {
  color: var(--coral);

  font-family: var(--serif);

  font-size: 4rem;
}

.signal-side h2 {
  max-width: 550px;

  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(3rem,6vw,6rem);

  font-weight: 500;

  letter-spacing: -.06em;

  line-height: .92;
}

.signal-side h2 em {
  color: var(--blue-dark);
}

.signal-side p {
  color: var(--coral);

  font-family: var(--serif);

  font-size: 1.5rem;
}



/* ========================================
   FINAL TRUTH
======================================== */

.final-truth {
  color: white;
  background: #26333a;
}

.final-inner {
  width: min(950px,100%);

  margin: auto;
}

.final-inner > p {
  color: var(--yellow);

  font-size: .6rem;
  font-weight: 700;

  letter-spacing: .15em;
}

.final-inner h2 {
  margin:
    1rem
    0;

  font-family: var(--serif);

  font-size:
    clamp(3.5rem,7vw,8rem);

  font-weight: 500;

  letter-spacing: -.06em;

  line-height: .88;
}

.final-inner h3 {
  margin:
    2rem
    0
    4rem;

  color: var(--yellow);

  font-family: var(--serif);

  font-size:
    clamp(2rem,4vw,3.8rem);

  font-weight: 500;
}

#finalForm {
  display: grid;

  gap: .8rem;
}

#finalForm label {
  margin-top: 1rem;

  font-size: .65rem;
  font-weight: 700;

  letter-spacing: .12em;
}

#finalForm input {
  width: 100%;

  padding:
    1rem
    0;

  color: white;
  background: transparent;

  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.6);

  font-family: var(--serif);

  font-size:
    clamp(1.5rem,3vw,2.5rem);
}

#finalForm input::placeholder {
  color: #85939a;
}

#finalForm button {
  margin-top: 2rem;

  padding: 1rem 1.3rem;

  display: flex;
  justify-content: space-between;

  color: var(--ink);
  background: var(--yellow);

  border: 0;

  font-size: .65rem;
  font-weight: 700;

  letter-spacing: .12em;
}

.final-result {
  margin-top: 2rem;

  color: var(--yellow);

  font-family: var(--serif);

  font-size: 1.5rem;
}



/* ========================================
   SAVED
======================================== */

.saved-section {
  background: var(--blue-pale);
}

.saved-list {
  width: min(950px,100%);

  margin: auto;

  display: grid;

  gap: 1rem;
}

.saved-answer {
  padding: 1.5rem;

  background: var(--paper);

  border: 1px solid var(--line);

  box-shadow:
    5px
    6px
    0
    rgba(38,51,58,.08);
}

.saved-answer small {
  font-size: .55rem;

  letter-spacing: .12em;
}

.saved-answer strong {
  display: block;

  margin: .5rem 0;

  font-family: var(--serif);

  font-size: 1.2rem;
  font-weight: 500;
}

.saved-answer p {
  margin: 0;

  color: var(--ink-soft);
}



/* ========================================
   EXIT
======================================== */

.exit-section {
  min-height: 720px;

  padding: 100px 2rem;

  display: flex;
  flex-direction: column;

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

  color: var(--ink);
  background: var(--yellow);

  text-align: center;
}

.exit-section p {
  font-size: .62rem;
  font-weight: 700;

  letter-spacing: .18em;
}

.exit-section h2 {
  margin:
    .2rem
    0
    2.5rem;

  font-family: var(--serif);

  font-size:
    clamp(6rem,17vw,15rem);

  font-weight: 500;

  letter-spacing: -.08em;

  line-height: .85;
}

.exit-section a {
  padding-bottom: .4rem;

  border-bottom: 1px solid;

  font-size: .65rem;
  font-weight: 700;

  letter-spacing: .1em;
}



/* ========================================
   FOOTER
======================================== */

footer {
  padding:
    70px
    max(6vw,2rem)
    30px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  color: white;
  background: #1c292f;
}

footer > p {
  margin: 0;

  color: #acbbc1;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;

  gap: 2rem;

  font-size: .65rem;

  letter-spacing: .1em;

  text-transform: uppercase;
}

footer small {
  grid-column: 1 / -1;

  padding-top: 2rem;

  color: #829098;

  border-top: 1px solid rgba(255,255,255,.14);
}



/* ========================================
   REVEAL
======================================== */

.reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity .75s,
    transform .75s;
}

.reveal.visible {
  opacity: 1;

  transform: none;
}



/* ========================================
   TABLET
======================================== */

@media (max-width: 980px) {

  .navbar {
    width: calc(100% - 2rem);
  }

  .nav-links {
    position: absolute;

    top: 88px;
    left: 1rem;
    right: 1rem;

    display: none;

    padding: 1.3rem;

    flex-direction: column;

    background: var(--paper);

    border: 1px solid var(--ink);
  }

  .nav-links.open {
    display: flex;
  }

  .menu-button {
    display: block;
  }


  .hero,
  .audience-section,
  .mirror-section {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    margin-left: 0;
  }

  .hero-orbit {
    min-height: 540px;
  }

  .motive-grid {
    grid-template-columns: repeat(2,1fr);
  }

}



/* ========================================
   MOBILE
======================================== */

@media (max-width: 640px) {

  .wv-brand-image-wrap {
    width: 45px;
    height: 45px;
  }

  .wv-brand-name {
    font-size: .95rem;
  }

  .wv-brand-note {
    font-size: .43rem;
  }


  .hero {
    padding:
      135px
      1.2rem
      80px;
  }

  .hero h1 {
    font-size:
      clamp(4rem,17vw,6rem);
  }

  .hero-orbit {
    min-height: 470px;

    transform: scale(.84);
  }


  .section,
  .audience-section,
  .mirror-section,
  .signal-section {
    padding:
      90px
      1.2rem;
  }


  .question-strip {
    justify-content: flex-start;

    flex-wrap: nowrap;

    overflow-x: auto;
  }

  .question-strip > * {
    flex: 0 0 auto;
  }


  .motive-grid {
    grid-template-columns: 1fr;
  }


  .audience-row {
    gap: .6rem;

    font-size: 2rem;
  }


  .signal-section {
    grid-template-columns: 1fr;
  }

  .noise-side {
    align-items: flex-start;
  }

  .signal-divider {
    transform: rotate(90deg);
  }


  .question-card {
    padding: 2rem 1.3rem;
  }


  footer {
    grid-template-columns: 1fr;
  }

}



/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

}