@font-face {
  font-family: "Fraunces";
  src: url('/assets/fonts/fraunces-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lilita One";
  src: url('/assets/fonts/lilita-one.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  color: #fff;
  background: #252722;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
main {
  min-height: 100svh;
  min-height: 100dvh;
  isolation: isolate;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 52svh 18px max(22px, env(safe-area-inset-bottom));
}
.landscape, .shade { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.landscape {
  background: #252722 url('/assets/gavin-dunes-film-v1.webp') center center / cover no-repeat;
}
#grass-breeze { position: absolute; display: block; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.shade { background: linear-gradient(180deg, transparent 50%, rgb(15 19 14 / 4%) 100%); }
/* A web approximation of Liquid Glass: layered tint, blur and edge highlights. */
.intro {
  position: relative;
  isolation: isolate;
  width: min(100%, 620px);
  padding: 27px 32px 22px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 26px;
  background: rgb(25 30 23 / 94%);
  box-shadow:
    0 20px 56px rgb(5 10 4 / 23%),
    0 5px 20px rgb(5 10 4 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 20%),
    inset 0 -1px 0 rgb(255 255 255 / 8%);
  font-size: clamp(20px, 1.55vw, 23px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.032em;
}
.enhanced main { padding: 0; }
.enhanced .intro {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  margin-left: calc(min(620px, 100vw - 36px) / -2);
  width: min(620px, calc(100vw - 36px));
  max-height: calc(100svh - 36px);
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: center;
  z-index: 3;
}
.intro-content { position: relative; }
.enhanced h1 { padding-right: 24px; }
.thought {
  position: fixed;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 3px 4px 14px;
  transform: translate(-50%, -100%);
  border: 0;
  border-radius: 18px;
  color: white;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.thought-glass, .thought-tail, .thought-tail::after, .close span {
  border: 1px solid rgb(255 255 255 / 55%);
  background: linear-gradient(135deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 8%)), rgb(40 47 40 / 28%);
  -webkit-backdrop-filter: blur(8px) saturate(145%);
  backdrop-filter: blur(8px) saturate(145%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 3px 12px rgb(0 0 0 / 15%);
}
.thought-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 29px;
  border-radius: 50%;
  transition: background-color 180ms ease;
}
.thought-glass i { width: 3px; height: 3px; border-radius: 50%; background: white; opacity: 0.92; }
.thought-tail { position: absolute; width: 7px; height: 7px; left: 16px; top: 34px; border-radius: 50%; }
.thought-tail::after { content: ""; position: absolute; width: 3px; height: 3px; top: 8px; left: 6px; border-radius: 50%; }
.thought:hover .thought-glass { background-color: rgb(255 255 255 / 14%); }
.thought:focus-visible, .close:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: white;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.close span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; font: 22px/1 Arial, sans-serif; }
.close:hover span { background-color: rgb(255 255 255 / 15%); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .intro {
    background:
      linear-gradient(145deg, rgb(255 255 255 / 9%), transparent 38%, rgb(255 255 255 / 3%) 100%),
      rgb(17 24 16 / 43%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
  }
}
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 7%), inset -1px 0 0 rgb(255 255 255 / 4%);
}
h1, p { margin: 0 0 0.7em; font: inherit; }
h1 { font-size: clamp(37px, 3.3vw, 48px); line-height: 1.1; letter-spacing: -0.055em; margin-bottom: 0.42em; }
.name { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.12em; letter-spacing: -0.04em; }
nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 0.65em; font-size: 18px; letter-spacing: -0.02em; }
a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a[href]:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
::selection { color: #252722; background: #fff; }
@media (max-width: 700px) {
  main { align-items: start; justify-items: center; padding: calc(54svh + 12px) 18px 26px; }
  .intro { padding: 25px 24px 20px; max-width: 500px; border-radius: 24px; font-size: clamp(20px, 5.2vw, 23px); }
  .landscape { background-position: 51% center; }
  h1 { font-size: clamp(35px, 9vw, 44px); margin-bottom: 0.48em; }
  nav { gap: 4px 18px; font-size: 18px; margin-top: 0.6em; }
  .enhanced .intro {
    width: min(500px, calc(100vw - 36px));
    margin-left: calc(min(500px, 100vw - 36px) / -2);
    bottom: max(18px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 360px) {
  main { padding-inline: 14px; }
  .intro { padding-inline: 20px; }
  nav { column-gap: 16px; font-size: 17px; }
}
@media (prefers-reduced-transparency: reduce) {
  .intro { background: #1b2118; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .thought-glass, .thought-tail, .thought-tail::after, .close span { background: #344035; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #grass-breeze { display: none; }
  .thought-glass { transition: none; }
}