/* =========================================
   MOON OF BEGINNINGS
   JIGYASA VERSE
========================================= */

:root {
  --forest: #273a30;
  --forest-dark: #17261e;

  --sage: #71846b;
  --sage-soft: #bcc9b4;

  --cream: #f6f0dc;
  --paper: #fffaf0;
  --oat: #e8ddbd;

  --mustard: #e0b743;
  --coral: #df806b;
  --plum: #765d78;

  --ink: #27332b;
  --muted: #677168;

  --line: rgba(39, 51, 43, 0.18);

  --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(--cream);

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

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

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

button {
  cursor: pointer;
}

::selection {
  color: var(--paper);
  background: var(--forest);
}



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

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

  color: inherit;
  text-decoration: none;

  flex-shrink: 0;
}

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

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

  flex-shrink: 0;
}

.wv-brand-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

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

  justify-content: center;

  line-height: 1.05;
}

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

  font-size: 1.1rem;
  font-weight: 600;

  letter-spacing: -0.02em;
}

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

  font-size: 0.53rem;
  font-weight: 600;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  opacity: 0.58;
}



/* =========================================
   HEADER
========================================= */

.site-header {
  position: absolute;

  z-index: 100;

  top: 0;
  left: 0;

  width: 100%;
}

.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;
  align-items: center;

  gap: 2.1rem;

  font-size: 0.7rem;
  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.nav-links a {
  opacity: 0.58;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.nav-links a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.menu-button {
  display: none;

  margin-left: auto;

  padding: 10px;

  background: transparent;
  border: 0;
}

.menu-button span {
  display: block;

  width: 26px;
  height: 1px;

  margin: 6px 0;

  background: var(--ink);
}



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

.hero {
  min-height: 100vh;

  position: relative;

  padding:
    160px
    max(5vw, 2rem)
    90px;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(430px, 0.85fr);

  align-items: center;

  gap: 7vw;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(113,132,107,.28),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #f7f1df,
      #eef0df 60%,
      #dce6d6
    );
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.2;

  background-image:
    linear-gradient(
      rgba(39,51,43,.15) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(39,51,43,.15) 1px,
      transparent 1px
    );

  background-size: 34px 34px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent 60%
    );
}

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

  max-width: 720px;

  margin-left: auto;
}

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

  gap: 0.7rem;

  margin: 0;

  font-size: 0.63rem;
  font-weight: 700;

  letter-spacing: 0.17em;
}

.moon-label span {
  padding: 0.35rem 0.65rem;

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

  border-radius: 999px;
}


/* main title */

.hero h1 {
  margin:
    1.5rem
    0
    1.6rem;

  font-family: var(--serif);

  font-size:
    clamp(
      4.4rem,
      7vw,
      8.3rem
    );

  font-weight: 500;

  letter-spacing: -0.06em;

  line-height: 0.87;
}

.hero h1 > span,
.hero h1 > em {
  display: inline-block;
}

.watch-word {
  color: #68756b;

  text-decoration: line-through;

  text-decoration-thickness: 5px;

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

.hero h1 small {
  display: block;

  margin:
    0.55rem
    0;

  font-family: var(--sans);

  font-size: 0.8rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}

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

  font-style: italic;

  text-decoration: underline;

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

  text-decoration-thickness: 7px;

  text-underline-offset: 10px;
}

.hero-line {
  max-width: 590px;

  margin-top: 2.1rem;

  font-family: var(--serif);

  font-size: 1.35rem;
}

.hero-hit {
  margin: 0.7rem 0;

  font-size: 1rem;
}

.hero-hit strong {
  display: inline-block;

  margin-left: 0.35rem;

  padding: 0.15rem 0.5rem;

  background: var(--mustard);

  transform: rotate(-2deg);
}

.hero-soft {
  max-width: 590px;

  color: var(--muted);

  font-size: 0.94rem;
}

.big-start-button {
  margin-top: 2.2rem;

  padding:
    1rem
    1.25rem;

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

  gap: 4rem;

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

  border-radius: 999px;

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.13em;

  transition: transform 0.2s ease;
}

.big-start-button:hover {
  transform: translateY(-4px);
}



/* =========================================
   HERO PATH VISUAL
========================================= */

.path-art {
  position: relative;

  min-height: 620px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-content: end;

  gap: 4rem;

  padding:
    150px
    3rem
    2rem;
}

.goal-star {
  position: absolute;

  top: 15px;
  left: 50%;

  transform: translateX(-50%);

  color: var(--mustard);

  font-family: var(--serif);

  font-size: 5rem;
}

.goal-label {
  position: absolute;

  top: 100px;
  left: 50%;

  transform: translateX(-50%);

  margin: 0;

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.18em;

  text-align: center;
}

.path-split {
  position: absolute;

  top: 160px;
  left: 50%;

  width: 70%;
  height: 100px;

  transform: translateX(-50%);

  border-top: 2px dashed rgba(39,51,43,.4);

  border-radius: 50%;
}

.path-column {
  position: relative;

  min-height: 320px;

  padding: 2rem;

  display: flex;
  flex-direction: column;

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

  gap: 0.7rem;

  text-align: center;
}

.path-column span:not(.path-title) {
  color: var(--muted);

  font-family: var(--serif);

  font-size: 1.35rem;
}

.path-column i {
  color: var(--sage);

  font-style: normal;
}

.path-column strong {
  margin-top: 0.5rem;

  font-size: 0.75rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.path-title {
  margin-bottom: 1rem;

  padding:
    0.5rem
    1rem;

  border-radius: 999px;

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.15em;
}

.watch-path {
  border:
    1px
    solid
    rgba(39,51,43,.2);

  background:
    rgba(255,255,255,.22);

  transform: rotate(-2deg);
}

.watch-path .path-title {
  border: 1px solid var(--ink);
}

.begin-path {
  color: var(--paper);

  background: var(--forest);

  transform: rotate(2deg);

  box-shadow:
    12px
    14px
    0
    rgba(39,51,43,.13);
}

.begin-path span:not(.path-title) {
  color: #e0e7dc;
}

.begin-path i {
  color: var(--mustard);
}

.begin-path .path-title {
  color: var(--ink);

  background: var(--mustard);
}


/* handwritten excuse */

.excuse-note {
  position: absolute;

  right: -1rem;
  top: 170px;

  width: 175px;

  padding: 1rem;

  display: flex;
  flex-direction: column;

  gap: 0.5rem;

  background: var(--paper);

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

  box-shadow:
    6px
    7px
    0
    rgba(39,51,43,.12);

  transform: rotate(7deg);
}

.excuse-note > span {
  font-size: 0.55rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.excuse-note s {
  color: var(--muted);

  font-family: var(--serif);
}

.excuse-note b {
  margin-top: 0.6rem;

  color: var(--coral);

  font-family: var(--serif);

  font-size: 1rem;

  line-height: 1.1;
}



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

.truth-strip {
  overflow: hidden;

  padding: 1rem 0;

  color: var(--paper);
  background: var(--forest-dark);
}

.truth-track {
  width: max-content;

  display: flex;
  align-items: center;

  gap: 2rem;

  animation:
    stripMove
    30s
    linear
    infinite;

  font-size: 0.64rem;
  font-weight: 700;

  letter-spacing: 0.14em;
}

.truth-track i {
  color: var(--mustard);
}

.truth-track strong {
  color: var(--mustard);
}

@keyframes stripMove {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-30%);
  }

}



/* =========================================
   GLOBAL SECTION
========================================= */

.section {
  padding:
    130px
    max(5vw, 2rem);
}

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

  margin:
    0
    auto
    4rem;
}

.section-number,
.start-heading > p,
.proof-heading > p {
  margin: 0;

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.section-heading h2,
.start-heading h2,
.proof-heading h2 {
  margin:
    1rem
    0;

  font-family: var(--serif);

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

  font-weight: 500;

  letter-spacing: -0.055em;

  line-height: 0.92;
}

.section-heading h2 em,
.start-heading h2 em,
.proof-heading h2 em {
  color: var(--forest);

  font-style: italic;
}

.section-heading > p:last-child {
  color: var(--muted);
}



/* =========================================
   HONESTY
========================================= */

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

.honesty-grid {
  width: min(1220px, 100%);

  margin: auto;

  display: grid;

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

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

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

.honesty-card {
  min-height: 220px;

  padding: 1.6rem;

  position: relative;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  text-align: left;

  background: transparent;

  border: 0;

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

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

  transition:
    background .25s ease,
    transform .25s ease;
}

.honesty-card:hover {
  z-index: 2;

  background: #edf0e4;

  transform: translateY(-5px);
}

.honesty-card.active {
  background: var(--mist, #dbe3d3);

  box-shadow:
    inset
    0
    -6px
    var(--coral);
}

.honesty-card > span {
  font-size: 0.6rem;

  letter-spacing: 0.13em;
}

.honesty-card strong {
  margin: auto 0;

  max-width: 250px;

  font-family: var(--serif);

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

  line-height: 1.15;
}

.honesty-card i {
  margin-left: auto;

  color: var(--coral);

  font-style: normal;

  font-size: 1.5rem;
}

.honesty-response {
  width: min(850px, 100%);

  min-height: 160px;

  margin:
    3rem
    auto
    0;

  padding: 2rem;

  display: grid;

  place-items: center;

  background: var(--cream);

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

  text-align: center;
}

.honesty-response > span {
  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.14em;
}

.honesty-response p {
  max-width: 680px;

  margin:
    0.6rem
    0
    0;

  font-family: var(--serif);

  font-size: 1.55rem;

  line-height: 1.25;
}



/* =========================================
   THE DOOR
========================================= */

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

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

  display: grid;

  grid-template-columns:
    1fr
    0.7fr;

  align-items: center;

  gap: 8vw;

  color: var(--paper);

  background: var(--forest-dark);
}

.door-copy {
  max-width: 760px;

  margin-left: auto;
}

.door-copy > p {
  color: var(--mustard);

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing: 0.16em;
}

.door-copy h2 {
  margin:
    1rem
    0
    2rem;

  font-family: var(--serif);

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

  font-weight: 500;

  letter-spacing: -0.06em;

  line-height: 0.88;
}

.door-copy h2 em {
  display: block;

  color: var(--mustard);

  font-style: italic;
}

.door-short-copy {
  max-width: 620px;

  color: #c9d4cc;
}

.door-short-copy p {
  margin:
    0
    0
    1rem;
}

.stay-line {
  margin-top: 2rem !important;

  color: var(--paper);

  font-family: var(--serif);

  font-size: 1.4rem;
}

.stay-line strong {
  color: var(--mustard);
}

.door-visual {
  display: grid;

  justify-items: center;

  gap: 2rem;
}

.door-frame {
  width: min(310px, 70vw);

  height: 430px;

  padding:
    25px
    25px
    0;

  border:
    4px
    solid
    var(--mustard);

  border-bottom: 0;
}

.door-panel {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;

  place-items: center;

  color: var(--ink);

  background: var(--mustard);

  transform-origin: left;

  transition:
    transform
    0.6s
    cubic-bezier(.2,.75,.2,1);
}

.door-frame:hover .door-panel {
  transform:
    perspective(700px)
    rotateY(-18deg);
}

.door-panel > span {
  font-family: var(--serif);

  font-size: 2.5rem;
}

.door-handle {
  position: absolute;

  right: 25px;
  top: 52%;

  width: 14px;
  height: 14px;

  background: var(--forest);

  border-radius: 50%;
}

.door-button {
  padding:
    0.9rem
    1.2rem;

  display: flex;

  gap: 2rem;

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

  border-radius: 999px;

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.1em;
}



/* =========================================
   START STUDIO
========================================= */

.start-studio {
  color: var(--paper);

  background: var(--sage);
}

.start-heading {
  width: min(1100px, 100%);

  margin:
    0
    auto
    4rem;
}

.start-heading h2 em {
  color: var(--mustard);
}

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

  margin: auto;

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

  color: var(--ink);

  background: var(--paper);

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

  box-shadow:
    15px
    18px
    0
    rgba(39,51,43,.22);

  transform: rotate(-0.4deg);
}

.start-question {
  margin-bottom: 2.5rem;
}

.start-question label {
  display: block;

  margin-bottom: 0.8rem;

  font-family: var(--serif);

  font-size: 1.6rem;
}

.start-question input {
  width: 100%;

  padding:
    1rem
    0;

  background: transparent;

  border: 0;

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

  outline: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.7rem
    );
}

.start-question input::placeholder {
  color: #a5aca4;
}

.start-question input:focus {
  border-bottom-color: var(--coral);
}


/* times */

.time-choice {
  margin:
    3rem
    0;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.8rem;

  border: 0;
}

.time-choice legend {
  width: 100%;

  margin-bottom: 1rem;

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.time-choice label {
  position: relative;
}

.time-choice input {
  position: absolute;

  opacity: 0;
}

.time-choice label span {
  width: 62px;
  height: 62px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  font-family: var(--serif);

  font-size: 1.4rem;

  cursor: pointer;

  transition: 0.2s ease;
}

.time-choice input:checked + span {
  color: var(--paper);

  background: var(--forest);

  transform: scale(1.08);
}

.time-choice small {
  margin-left: 0.4rem;

  font-size: 0.55rem;
  font-weight: 700;

  letter-spacing: 0.13em;
}

.commit-button {
  width: 100%;

  min-height: 65px;

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

  padding:
    0
    1.5rem;

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

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

  font-weight: 700;

  letter-spacing: 0.13em;
}

.privacy-note {
  margin:
    1rem
    0
    0;

  color: var(--muted);

  font-size: 0.7rem;

  text-align: center;
}



/* =========================================
   ACTIVE BEGINNING
========================================= */

.active-section {
  background: #dce5d6;
}

.active-shell {
  width: min(1050px, 100%);

  margin: auto;

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

  background: var(--paper);

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

  box-shadow:
    14px
    16px
    0
    rgba(39,51,43,.12);
}

.active-top {
  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.14em;
}

.active-top button {
  color: var(--muted);

  background: none;

  border: 0;

  text-decoration: underline;
}

.active-shell h2 {
  margin:
    2rem
    0;

  font-family: var(--serif);

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

  font-weight: 500;

  letter-spacing: -0.05em;

  line-height: 0.95;
}

.active-divider {
  height: 70px;

  display: grid;

  place-items: center;

  color: var(--coral);

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

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

.today-label {
  margin-top: 2rem;

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.15em;
}

.active-shell h3 {
  margin:
    0.7rem
    0;

  color: var(--forest);

  font-family: var(--serif);

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

  font-weight: 500;

  line-height: 1.05;
}

.timer-area {
  margin-top: 4rem;

  padding-top: 2rem;

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

  text-align: center;
}

.timer-label {
  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.16em;
}

.timer-display {
  margin:
    0.5rem
    0
    1.5rem;

  font-family: var(--serif);

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

  line-height: 1;
}

.timer-controls {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 0.7rem;
}

.timer-controls button {
  padding:
    0.8rem
    1.2rem;

  border-radius: 999px;

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

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.08em;
}

#timerButton {
  background: var(--mustard);
}

#doneButton {
  color: var(--paper);
  background: var(--forest);
}

.timer-controls button:disabled {
  cursor: not-allowed;

  opacity: 0.4;
}



/* =========================================
   EXCUSE WALL
========================================= */

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

.excuse-wall {
  width: min(1220px, 100%);

  margin: auto;

  display: grid;

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

  gap: 1.4rem;
}

.flip-card {
  height: 290px;

  padding: 0;

  perspective: 1000px;

  background: transparent;

  border: 0;
}

.flip-inner {
  position: relative;

  width: 100%;
  height: 100%;

  display: block;

  transform-style: preserve-3d;

  transition:
    transform
    0.65s
    cubic-bezier(.2,.8,.2,1);
}

.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;

  inset: 0;

  padding: 1.8rem;

  display: flex;
  flex-direction: column;

  backface-visibility: hidden;

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

  box-shadow:
    8px
    9px
    0
    rgba(39,51,43,.12);
}

.flip-front {
  background: var(--paper);
}

.flip-card:nth-child(2n) .flip-front {
  background: #e5ebdf;

  transform: rotate(1deg);
}

.flip-card:nth-child(3n) .flip-front {
  background: #f0d2c9;

  transform: rotate(-1deg);
}

.flip-front small {
  font-size: 0.55rem;

  letter-spacing: 0.13em;
}

.flip-front strong {
  margin: auto;

  font-family: var(--serif);

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

  line-height: 1.1;
}

.flip-front i {
  margin-left: auto;

  color: var(--coral);

  font-style: normal;

  font-size: 0.65rem;
}

.flip-back {
  justify-content: center;

  color: var(--paper);

  background: var(--forest);

  transform: rotateY(180deg);

  text-align: center;
}

.flip-back strong {
  font-family: var(--serif);

  font-size: 1.4rem;

  font-weight: 500;
}

.flip-back b {
  margin-top: 1rem;

  color: var(--mustard);

  font-family: var(--serif);

  font-size: 2rem;

  line-height: 1.05;
}



/* =========================================
   MOTIVATION
========================================= */

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

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

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-items: center;

  gap: 8vw;

  color: var(--paper);

  background: var(--forest);
}

.motivation-stage {
  min-height: 300px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 2rem;

  overflow: hidden;
}

.motivation-word {
  padding:
    1.5rem
    2rem;

  color: var(--ink);

  background: var(--mustard);

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

  border-radius:
    48% 52% 45% 55%;

  font-family: var(--serif);

  font-size: 1.7rem;

  animation:
    runAway
    4s
    ease-in-out
    infinite;
}

.run-arrow {
  color: var(--mustard);

  font-size: 2rem;
}

.exit-door {
  font-size: 4rem;
}

@keyframes runAway {

  0%,
  15% {
    transform:
      translateX(-20px)
      rotate(-5deg);
  }

  70%,
  100% {
    transform:
      translateX(170px)
      rotate(8deg);

    opacity: 0;
  }

}

.motivation-message > p {
  color: var(--mustard);

  font-size: 0.62rem;
  font-weight: 700;

  letter-spacing: 0.15em;
}

.motivation-message h2 {
  margin: 0;

  font-family: var(--serif);

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

  font-weight: 500;

  letter-spacing: -0.06em;

  line-height: 0.9;
}

.motivation-message strong {
  display: block;

  margin-top: 1rem;

  color: var(--mustard);

  font-family: var(--serif);

  font-size: 2rem;
}



/* =========================================
   PROOF
========================================= */

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

.proof-heading {
  width: min(1100px, 100%);

  margin:
    0
    auto
    4rem;
}

.proof-board {
  width: min(1050px, 100%);

  margin: auto;

  display: grid;

  grid-template-columns:
    0.6fr
    1.4fr;

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

  background: var(--cream);

  box-shadow:
    12px
    14px
    0
    rgba(39,51,43,.12);
}

.proof-count {
  padding: 3rem;

  display: flex;
  flex-direction: column;

  justify-content: center;

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

.proof-count > span {
  font-family: var(--serif);

  font-size: 7rem;

  line-height: 1;
}

.proof-count p {
  font-size: 0.64rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.proof-marks {
  padding: 3rem;
}

.proof-marks > p {
  margin-top: 0;

  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.14em;
}

.return-marks {
  min-height: 180px;

  display: flex;

  align-content: flex-start;
  align-items: flex-start;

  flex-wrap: wrap;

  gap: 0.8rem;

  padding-top: 1.5rem;
}

.return-mark {
  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  font-family: var(--serif);

  font-size: 0.8rem;

  animation:
    markPop
    .35s
    ease;
}

@keyframes markPop {

  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }

}

.return-message {
  max-width: 750px;

  margin:
    3rem
    auto
    0;

  color: var(--muted);

  text-align: center;
}

.return-message strong {
  color: var(--forest);
}



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

.final-section {
  min-height: 700px;

  padding:
    120px
    2rem;

  display: flex;
  flex-direction: column;

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

  color: var(--ink);

  background: var(--mustard);

  text-align: center;
}

.final-section > p {
  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.18em;
}

.final-section h2 {
  margin:
    0.4rem
    0
    2rem;

  font-family: var(--serif);

  font-size:
    clamp(
      8rem,
      20vw,
      18rem
    );

  font-weight: 500;

  letter-spacing: -0.08em;

  line-height: 0.8;
}

.final-link {
  padding-bottom: 0.4rem;

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

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.final-link span {
  margin-left: 1rem;
}



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

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

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 3rem;

  color: var(--paper);

  background: var(--forest-dark);
}

footer > p {
  max-width: 500px;

  margin: 0;

  color: #bfc9c0;
}

.footer-links {
  display: flex;

  flex-wrap: wrap;

  gap: 2rem;

  font-size: 0.65rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

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

  padding-top: 2rem;

  color: #8f9c92;

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

  font-size: 0.62rem;
}



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

.reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity
    0.8s ease,
    transform
    0.8s ease;
}

.reveal.visible {
  opacity: 1;

  transform: none;
}



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

@media (max-width: 980px) {

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

  .nav-links {
    position: absolute;

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

    display: none;

    padding: 1.5rem;

    flex-direction: column;
    align-items: flex-start;

    color: var(--ink);

    background: var(--paper);

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

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

  .menu-button {
    display: block;
  }

  .hero {
    grid-template-columns:
      1fr;

    padding-top: 150px;
  }

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

  .path-art {
    width: min(700px,100%);

    margin: auto;
  }

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

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

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

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

}



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

@media (max-width: 640px) {

  .wv-brand {
    gap: 8px;
  }

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

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

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


  .hero {
    padding:
      130px
      1.2rem
      70px;
  }

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

  .hero-line {
    font-size: 1.15rem;
  }

  .big-start-button {
    width: 100%;

    justify-content: space-between;
  }


  .path-art {
    min-height: 720px;

    grid-template-columns:
      1fr 1fr;

    gap: 0.7rem;

    padding:
      180px
      0
      0;
  }

  .path-column {
    min-height: 340px;

    padding:
      1.1rem
      0.6rem;
  }

  .path-column span:not(.path-title) {
    font-size: 1rem;
  }

  .excuse-note {
    top: 85px;
    right: 5px;

    width: 150px;
  }


  .section {
    padding:
      90px
      1.2rem;
  }

  .section-heading h2,
  .start-heading h2,
  .proof-heading h2 {
    font-size:
      clamp(
        3rem,
        15vw,
        5rem
      );
  }

  .honesty-grid,
  .excuse-wall {
    grid-template-columns:
      1fr;
  }

  .honesty-card {
    min-height: 180px;
  }


  .door-section {
    padding:
      90px
      1.2rem;
  }

  .door-copy h2 {
    font-size:
      clamp(
        3.8rem,
        17vw,
        6rem
      );
  }

  .door-frame {
    height: 370px;
  }


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

  .start-question input {
    font-size: 1.7rem;
  }


  .active-shell {
    padding:
      2rem
      1.3rem;
  }


  .proof-board {
    grid-template-columns:
      1fr;
  }

  .proof-count {
    border-right: 0;

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


  .motivation-stage {
    transform: scale(.8);
  }


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

}



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

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

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }

  .truth-track,
  .motivation-word {
    animation: none;
  }

}