/*
  jessewilson.us
  One continuous sky. No borders, no rules, no bands, no hard edges.
  data-tone on a section names its TEXT colour: "light" text or "dark" text.
  When Jesse's real signature replaces assets/img/jesse-signature.svg,
  bump the ?v= on its url() below (images are cached for a year).
*/

/* ------------------------------------------------------------ base */

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

html {
  background: var(--sky-0-top);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  margin: 0;
}

p { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

[data-tone="light"] { color: var(--text-on-dark); }
[data-tone="dark"] { color: var(--text-on-light); }

main:focus { outline: none; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
  border-radius: 10px;
}

/* Inline links: a soft wave instead of a flat underline */
.soft-link {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: auto;
}

.ext-mark {
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .22em;
  vertical-align: .32em;
  opacity: .7;
}
.menu__link .ext-mark {
  position: relative;
  top: -.62em;
  width: .24em;
  height: .24em;
  margin-left: .08em;
  vertical-align: baseline;
}

.skip-link {
  position: fixed;
  z-index: 90;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding: .7rem 1.15rem;
  border-radius: var(--radius-small);
  background: var(--paper);
  color: var(--ink);
  font-size: .95rem;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 300ms var(--ease-soft);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------ the sky */

/* No JavaScript: one static gradient laid down the whole page, with stops
   placed so each section sits on the tone its text was checked against. */
.sky {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--sky-0-top) 0,
    var(--sky-0-bottom) 100vh,
    var(--sky-1-top) 125vh,
    var(--sky-1-bottom) 200vh,
    var(--sky-2-bottom) calc(100% - 160vh),
    var(--sky-3-bottom) calc(100% - 110vh),
    var(--sky-4-top) calc(100% - 75vh),
    var(--sky-4-bottom) 100%);
}
.sky__layer, .sky__mist { display: none; }

/* JavaScript: a fixed sky, five states cross-faded by sky.js */
.js .sky {
  position: fixed;
  inset: 0;
  height: auto;
  background: var(--sky-0-top);
}
.js .sky__layer {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%);
  will-change: opacity;
}
.js .sky__layer--0 { opacity: 1; }
.sky__layer--0 { --top: var(--sky-0-top); --bottom: var(--sky-0-bottom); }
.sky__layer--1 { --top: var(--sky-1-top); --bottom: var(--sky-1-bottom); }
.sky__layer--2 { --top: var(--sky-2-top); --bottom: var(--sky-2-bottom); }
.sky__layer--3 { --top: var(--sky-3-top); --bottom: var(--sky-3-bottom); }
.js .sky__layer--4 {
  --top: var(--sky-4-top);
  --bottom: var(--sky-4-bottom);
  background:
    radial-gradient(75% 42% at 50% 74%, rgb(var(--ember-glow) / .34), rgb(var(--ember-glow) / 0) 72%),
    linear-gradient(180deg, var(--top) 0%, var(--bottom) 100%);
}
.js .sky__mist {
  display: block;
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(42% 11% at 28% 62%, rgb(243 237 227 / .09), transparent 70%),
    radial-gradient(36% 9% at 74% 72%, rgb(243 237 227 / .07), transparent 70%);
  filter: blur(8px);
  transform: translate3d(calc(var(--p, 0) * -5%), calc(var(--p, 0) * -9vh), 0);
}

/* ------------------------------------------------------------ signature (the menu button) */

.signature {
  position: fixed;
  z-index: 70;
  top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 2.4vw, 22px));
  right: calc(env(safe-area-inset-right, 0px) + clamp(12px, 2.6vw, 28px));
  display: block;
  width: clamp(96px, 9vw, 124px);
  aspect-ratio: 12 / 5;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--chrome-ink);
  opacity: .78;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 600ms var(--ease-soft), color 900ms var(--ease-soft);
}
.signature__mark {
  position: absolute;
  inset: 8% 6%;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/jesse-signature.svg?v=2") center / contain no-repeat;
  mask: url("/assets/img/jesse-signature.svg?v=2") center / contain no-repeat;
  transform-origin: 50% 60%;
}
/* Light ink over bright footage (the hero mist): a soft local halo, not a box */
.signature {
  filter: drop-shadow(0 0 5px rgb(16 21 27 / .55)) drop-shadow(0 0 14px rgb(16 21 27 / .3));
  transition: opacity 600ms var(--ease-soft), color 900ms var(--ease-soft), filter 900ms var(--ease-soft);
}
:root[data-chrome-ink="dark"] .signature,
.is-menu-open .signature { filter: none; }
.signature::before,
.signature::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1px currentColor, 0 0 28px 0 currentColor;
}
.signature::after {
  transform: scale(.55);
  transition: transform 1000ms var(--ease-soft), opacity 700ms var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .signature:hover { opacity: 1; color: var(--chrome-warm); }
  .signature:hover::after { opacity: .22; transform: scale(1.22); }
}
.signature:focus-visible { opacity: 1; }

.signature.is-rippling::before { animation: sig-ripple 2600ms var(--ease-soft) 1; }
.signature.is-rippling .signature__mark { animation: sig-wave 2600ms var(--ease-water) 1; }
@keyframes sig-ripple {
  0% { opacity: 0; transform: scale(.4); }
  22% { opacity: .32; }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes sig-wave {
  0%, 100% { transform: none; }
  30% { transform: skewX(-5deg) scaleY(1.04); }
  55% { transform: skewX(3deg) scaleY(.985); }
  78% { transform: skewX(-1deg); }
}

.is-menu-open .signature { opacity: 1; color: var(--menu-ink, var(--paper)); }

/* No JavaScript: the signature is a link down to the menu list */
.signature--static { text-decoration: none; }
.js .signature--static { display: none; }

/* ------------------------------------------------------------ menu */

/* No JavaScript: a quiet list near the end of the page */
.menu {
  padding: 16vh var(--gutter) 14vh;
  color: var(--ink);
  text-align: center;
}
.menu__nav { width: 100%; max-width: 46rem; margin: 0 auto; }
.menu__primary, .menu__secondary { list-style: none; margin: 0; padding: 0; }
.menu__link {
  display: inline-block;
  padding: .02em .25em;
  border-radius: 18px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2.5rem, 1.45rem + 5.2vw, 5.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
}
.menu__secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.4rem;
  margin-top: clamp(2.25rem, 7vh, 4.5rem);
  font-size: 1.0625rem;
  letter-spacing: .02em;
}
.menu__secondary a {
  display: inline-block;
  padding: .6rem .55rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

/* JavaScript: full-screen overlay revealed from the signature */
.js .menu {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 13vh) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 8vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  background-color: rgb(var(--tint, 38 49 59) / .8);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  backdrop-filter: blur(20px) saturate(1.12);
  clip-path: circle(0px at var(--mx, calc(100% - 64px)) var(--my, 44px));
  transition: clip-path 1000ms var(--ease-water), visibility 0s linear 1000ms;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .js .menu { background-color: rgb(var(--tint, 38 49 59) / .96); }
}
.js .menu.is-open {
  visibility: visible;
  clip-path: circle(var(--r, 160vmax) at var(--mx, calc(100% - 64px)) var(--my, 44px));
  transition: clip-path 1000ms var(--ease-water), visibility 0s;
}
.js .menu .menu__nav { margin: auto; }
.menu[data-tone="light"] { color: var(--paper); }
.menu[data-tone="dark"] { color: var(--ink); }

.js .menu .menu__link,
.js .menu .menu__secondary a {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(.18em);
  transition:
    opacity 350ms var(--ease-soft),
    filter 350ms var(--ease-soft),
    transform 350ms var(--ease-soft);
}
.js .menu.is-open .menu__link,
.js .menu.is-open .menu__secondary a {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 900ms var(--ease-soft),
    filter 1100ms var(--ease-soft),
    transform 1100ms var(--ease-soft);
  transition-delay: calc(240ms + var(--i, 0) * 90ms);
}
.js .menu.is-open.is-settled .menu__link,
.js .menu.is-open.is-settled .menu__secondary a {
  transition-delay: 0s;
  transition-duration: 500ms;
}
@media (hover: hover) and (pointer: fine) {
  .js .menu.is-open.is-settled .menu__primary:hover .menu__link:not(:hover) { opacity: .64; }
  .js .menu.is-open.is-settled .menu__link:hover { filter: blur(0); transform: translateY(-.03em); }
}

html.is-menu-open,
html.is-menu-open body { overflow: hidden; }
html.is-menu-open body { padding-right: var(--sbw, 0px); }

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 16vh var(--gutter) 14vh;
  isolation: isolate;
}
.hero__frame {
  position: absolute;
  z-index: -2;
  inset: 0 0 -8vh 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgb(0 0 0 / .55) 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgb(0 0 0 / .55) 80%, transparent 100%);
}
/* The camera always moves, even over the fallback gradient. */
.hero__media {
  position: absolute;
  inset: -5%;
  background:
    radial-gradient(120% 60% at 50% 96%, rgb(215 184 148 / .26), transparent 62%),
    radial-gradient(80% 45% at 28% 38%, rgb(147 166 177 / .20), transparent 70%),
    linear-gradient(180deg, var(--sky-0-top) 0%, #34444f 56%, var(--sky-0-bottom) 100%);
  animation: camera-drift 46s var(--ease-water) infinite alternate;
  will-change: transform;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 14% at 36% 70%, rgb(243 237 227 / .14), transparent 72%),
    radial-gradient(45% 11% at 70% 78%, rgb(243 237 227 / .10), transparent 72%);
  filter: blur(10px);
  animation: mist-drift 70s linear infinite alternate;
  pointer-events: none;
}
@keyframes camera-drift {
  from { transform: scale(1.04) translate3d(-1%, .6%, 0); }
  to { transform: scale(1.1) translate3d(1.2%, -1.3%, 0); }
}
@keyframes mist-drift {
  from { transform: translate3d(-6%, 0, 0); }
  to { transform: translate3d(6%, -2%, 0); }
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2600ms var(--ease-soft);
}
.hero__media.is-playing .hero__video,
.hero__video[poster] { opacity: 1; }

.hero__scrim {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(72% 48% at 50% 52%, rgb(16 21 27 / .52), rgb(16 21 27 / 0) 76%);
}
.hero__title {
  max-width: 15ch;
  font-size: clamp(2.3rem, 1.25rem + 4.7vw, 5.4rem);
  line-height: 1.07;
  letter-spacing: -.012em;
  text-align: center;
  text-wrap: balance;
  color: var(--paper);
  text-shadow: 0 1px 28px rgb(16 21 27 / .4);
}
.hero__title span { display: block; font-style: italic; }
.js .hero__title { animation: arrive 2200ms var(--ease-soft) 350ms both; }
@keyframes arrive {
  from { opacity: 0; filter: blur(14px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ------------------------------------------------------------ reveal (shared) */

.js [data-reveal] {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 1200ms var(--ease-soft) var(--reveal-delay, 0ms),
    filter 1300ms var(--ease-soft) var(--reveal-delay, 0ms),
    transform 1400ms var(--ease-soft) var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed { opacity: 1; filter: blur(0); transform: none; }

/* ------------------------------------------------------------ recognition */

.recognition { padding: 26vh var(--gutter) 30vh; }
.recognition__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 58rem;
}
.recognition__item { margin: 0 0 clamp(5rem, 22vh, 13rem); }
.recognition__item:last-child { margin-bottom: 0; }
.recognition__item:nth-child(even) { padding-left: clamp(0rem, 9vw, 9rem); }

.recognition__line {
  display: block;
  max-width: 22ch;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.65rem, 1.05rem + 2.4vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -.005em;
  text-wrap: pretty;
  color: inherit;
}
button.recognition__line {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.recognition__hint {
  display: inline-block;
  position: relative;
  width: .36em;
  height: .36em;
  margin-left: .32em;
  vertical-align: .12em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px currentColor;
  opacity: .55;
  transition: transform 900ms var(--ease-soft), opacity 700ms var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .has-unfold:hover .recognition__hint { opacity: .9; transform: scale(1.5); }
}
.has-unfold.is-open .recognition__hint { opacity: .9; transform: scale(1.8); box-shadow: 0 0 0 1px currentColor, 0 0 12px currentColor; }

/* The unfold panel grows open; its content arrives out of blur */
.unfold { display: grid; grid-template-rows: 1fr; }
.js .unfold {
  grid-template-rows: 0fr;
  transition: grid-template-rows 1000ms var(--ease-soft);
}
.js .unfold.is-open { grid-template-rows: 1fr; }
.unfold__inner { position: relative; min-height: 0; overflow: hidden; }
.js .unfold__inner { visibility: hidden; transition: visibility 0s linear 1000ms; }
.js .unfold.is-open .unfold__inner { visibility: visible; transition-delay: 0s; }

.unfold__content {
  position: relative;
  max-width: 34rem;
  padding: 1.75rem 0 .5rem;
}
.js .unfold__content {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 700ms var(--ease-soft), filter 700ms var(--ease-soft);
}
.js .unfold.is-open .unfold__content {
  opacity: 1;
  filter: blur(0);
  transition-duration: 1100ms;
  transition-delay: 200ms;
}
.unfold__body {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem);
  line-height: 1.6;
}
.unfold__body p + p { margin-top: 1em; }
.unfold__source {
  margin-top: 1.1rem;
  font-size: .875rem;
  letter-spacing: .02em;
}
.unfold__hand {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: min(85%, 28rem);
  height: auto;
  opacity: .12;
  filter: blur(1.2px);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

/* ------------------------------------------------------------ footer */

.site-footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 85vh;
  min-height: 85svh;
  padding: 20vh var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 2.25rem);
  text-align: center;
}
.site-footer__sig {
  display: block;
  width: 112px;
  aspect-ratio: 12 / 5;
  margin: 0 auto .85rem;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/jesse-signature.svg?v=2") center / contain no-repeat;
  mask: url("/assets/img/jesse-signature.svg?v=2") center / contain no-repeat;
}
.site-footer__role {
  margin-bottom: clamp(3.5rem, 11vh, 6.5rem);
  font-size: .9375rem;
  letter-spacing: .03em;
}
.site-footer__closing {
  max-width: 22ch;
  margin: 0 auto clamp(4.5rem, 15vh, 8.5rem);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
  line-height: 1.25;
  text-wrap: balance;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .3rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
  letter-spacing: .02em;
}
.site-footer__legal a {
  display: inline-block;
  padding: .55rem .2rem;
  text-decoration: none;
}
.site-footer__legal a:hover { text-decoration: underline wavy 1px; text-underline-offset: .3em; }

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero__media::after,
  .js .hero__title { animation: none; }
  .hero__video:not([poster]) { display: none; }
  .js .sky__mist { transform: none; }

  .js [data-reveal] {
    filter: none;
    transform: none;
    transition: opacity 150ms linear;
  }
  .js .unfold { transition: none; }
  .js .unfold__inner { transition: none; }
  .js .unfold__content,
  .js .unfold.is-open .unfold__content { filter: none; transition: opacity 150ms linear; transition-delay: 0s; }
  .recognition__hint { transition: none; }

  .signature,
  .signature::after { transition: opacity 150ms linear; }
  .signature.is-rippling::before,
  .signature.is-rippling .signature__mark { animation: none; }
  @media (hover: hover) and (pointer: fine) {
    .signature:hover::after { transform: scale(.55); opacity: 0; }
  }

  /* Menu: a plain 150ms crossfade instead of ripple, clip-path and blur */
  .js .menu,
  .js .menu.is-open {
    clip-path: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgb(var(--tint, 38 49 59) / .97);
  }
  .js .menu { opacity: 0; transition: opacity 150ms linear, visibility 0s linear 150ms; }
  .js .menu.is-open { opacity: 1; transition: opacity 150ms linear, visibility 0s; }
  .js .menu .menu__link,
  .js .menu .menu__secondary a,
  .js .menu.is-open .menu__link,
  .js .menu.is-open .menu__secondary a {
    filter: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}