@font-face {
  font-family:Grenze;
  src:url('/fonts/Grenze-SemiBold.ttf') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face {
  font-family:'Inter Tight';
  src:url('/fonts/InterTight-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'IBM Plex Mono';
  src:url('/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'Barlow Condensed';
  src:url('/fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --canvas:#0e100f;
  --cream:#fffce1;
  --muted:#b5b8aa;
  --hairline:#42433d;
  --mint:#8ff3d8;
  --page-width:1440px;
  --gutter:clamp(40px,7.778vw,112px);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  background:var(--canvas);
  color:var(--cream);
  font:400 1.125rem/1.5 'Inter Tight',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-family:Grenze,serif;
  font-weight:600;
}
a {
  color:inherit;
  text-decoration:none;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible {
  outline:2px solid var(--mint);
  outline-offset:6px;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
[hidden] {
  display:none!important;
}
.mobile-copy {
  display:none;
}
.eyebrow {
  font:400 .8125rem/1.54 'IBM Plex Mono',monospace;
  letter-spacing:.1em;
}
.skip-link {
  position:fixed;
  z-index:100;
  left:24px;
  top:12px;
  padding:12px 20px;
  color:var(--canvas);
  background:var(--cream);
  transform:translateY(-150%);
}
.skip-link:focus {
  transform:translateY(0);
}
.hero {
  max-width:var(--page-width);
  margin:auto;
  height:900px;
  position:relative;
  isolation:isolate;
  background:radial-gradient(circle farthest-corner at 84% 38% in oklab,oklab(32% -.049 .017) 0%,oklab(17% -.004 .001) 51%);
}
.navigation {
  position:absolute;
  z-index:3;
  top:28px;
  left:4.444%;
  right:4.444%;
  min-height:76px;
  padding:12px 18px 12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--hairline);
  border-radius:99px;
  background:#121412cc;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img {
  border-radius:12px;
}
.brand span {
  font:600 1.875rem/1.2 Grenze,serif;
  letter-spacing:.03em;
}
.navigation nav {
  display:flex;
  align-items:center;
  gap:40px;
}
.nav-anchor {
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:.9375rem;
}
.nav-anchor:hover,.discover:hover {
  color:var(--mint);
}
.store-link {
  display:inline-flex;
  flex-shrink:0;
  border-radius:9px;
}
.store-link img {
  width:168px;
  height:56px;
}
.navigation .store-link img {
  width:132px;
  height:44px;
}
.store-link[href] {
  transition:transform .2s;
}
.store-link[href]:hover {
  transform:translateY(-2px);
}
.is-unavailable {
  cursor:default;
}
.hero-copy {
  position:absolute;
  z-index:2;
  top:206px;
  left:var(--gutter);
  width:620px;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.hero-copy .eyebrow {
  letter-spacing:.12em;
}
.hero h1 {
  font-size:6.5rem;
  line-height:.9423;
  letter-spacing:-.025em;
}
.hero-description {
  font-size:1.3125rem;
  line-height:1.476;
  color:#c8c8b8;
  max-width:480px;
}
.hero-download {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:8px;
}
.hero-download p {
  font-size:.8125rem;
  line-height:20px;
  color:#a9ac9d;
}
.hero-wolf {
  position:absolute;
  z-index:-1;
  top:155px;
  left:65.278%;
  width:34.028%;
  height:600px;
  border-radius:190px 190px 0 0;
  opacity:.85;
  background:linear-gradient(0deg,var(--canvas),transparent 50%),radial-gradient(circle at 50% 50%,transparent 20%,var(--canvas) 76%),url('/assets/werewolf.jpg') center/cover;
}
.character-preview {
  position:absolute;
  top:172px;
  left:55.833%;
  width:326px;
  height:auto;
  filter:drop-shadow(0 32px 40px #0006);
  border-radius:42px;
}
.discover {
  position:absolute;
  left:var(--gutter);
  top:748px;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#8a8a7d;
  letter-spacing:.08em;
}
@media(min-width:761px) and (max-width:1199px) {
  .hero-copy {
    width:52%;
    top:210px;
  }
  .hero h1 {
    font-size:clamp(4rem,7.22vw,6.5rem);
  }
  .hero-description {
    max-width:95%;
    font-size:1.125rem;
  }
  .character-preview {
    left:auto;
    right:7%;
    width:28%;
  }
  .hero-wolf {
    left:auto;
    right:0;
    width:36%;
  }
  .navigation nav {
    gap:24px;
  }
  .hero {
    height:820px;
  }
  .discover {
    top:710px;
  }
}
@media(max-width:760px) {
  :root {
    --gutter:24px;
  }
  .desktop-copy {
    display:none!important;
  }
  .mobile-copy {
    display:inline;
  }
  .hero {
    height:auto;
    min-height:1320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:132px 24px 33px;
    background:radial-gradient(circle at 60% 66% in oklab,oklab(31.3% -.041 .016),oklab(17% -.004 .001) 68%);
  }
  .navigation {
    top:16px;
    left:16px;
    right:16px;
    min-height:68px;
    padding:8px 12px;
  }
  .brand {
    gap:8px;
  }
  .brand img {
    width:36px;
    height:36px;
    border-radius:10px;
  }
  .brand span {
    font-size:1.5rem;
    letter-spacing:0;
  }
  .navigation .nav-anchor {
    display:none;
  }
  .navigation nav {
    gap:0;
  }
  .hero-copy {
    position:relative;
    inset:auto;
    width:100%;
    max-width:440px;
    gap:22px;
  }
  .hero-copy .eyebrow {
    font-size:.75rem;
    line-height:18px;
    letter-spacing:.08em;
  }
  .hero h1 {
    font-size:3.875rem;
    line-height:.984;
    letter-spacing:-.02em;
  }
  .hero-description {
    font-size:1.125rem;
    line-height:27px;
    max-width:342px;
  }
  .hero-download {
    flex-direction:column;
    gap:22px;
    margin-top:0;
  }
  .hero-download p {
    text-align:center;
  }
  .character-preview {
    position:relative;
    inset:auto;
    width:min(326px,100%);
    margin-top:39px;
  }
  .hero-wolf,.discover {
    display:none;
  }
}
.section {
  max-width:var(--page-width);
  margin-inline:auto;
}
.story {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:38px;
  padding:128px clamp(24px,11.11vw,160px);
  border-bottom:1px solid var(--hairline);
  text-align:center;
}
.story>.eyebrow {
  color:#8a8a7d;
  letter-spacing:.12em;
}
.story-words {
  width:min(1080px,100%);
  font-size:4rem;
  line-height:1.125;
  letter-spacing:-.015em;
}
.story-line {
  display:block;
}
.story-ending {
  color:var(--mint);
}
.story-description {
  max-width:580px;
  line-height:28px;
  color:var(--muted);
}
.word {
  transition:opacity .14s linear;
}
.story-words.is-enhanced .word {
  opacity:.28;
}
.story-words.is-enhanced .word.is-revealed {
  opacity:1;
}
.loop {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:64px;
  padding:64px var(--gutter) 80px;
}
.loop article {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.loop .eyebrow {
  color:var(--mint);
  letter-spacing:0;
}
.loop h2 {
  font-size:2.25rem;
  line-height:40px;
}
.loop article>p:last-child {
  color:var(--muted);
  font-size:1.0625rem;
  line-height:26px;
}
.hunt {
  height:920px;
  position:relative;
  overflow:clip;
  background:radial-gradient(circle farthest-corner at 25% 70% in oklab,oklab(30.3% -.026 .013),oklab(18.8% -.004 .003) 53%);
}
.hunt-copy {
  position:absolute;
  left:var(--gutter);
  top:76px;
  width:620px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.hunt-copy .eyebrow {
  color:#a9ac9d;
}
.hunt h2,.lineages h2 {
  font-size:4.25rem;
  line-height:70px;
}
.hunt-copy>p:last-child {
  font-size:1.1875rem;
  line-height:29px;
  color:var(--muted);
  max-width:490px;
}
.guardian-art {
  position:absolute;
  left:2.778%;
  top:370px;
  width:49.306%;
  height:546px;
  background:linear-gradient(0deg,oklab(18.8% -.004 .003),transparent 25%),url('/assets/guardian.jpg') center/contain no-repeat;
}
.hunt-preview {
  position:absolute;
  top:48px;
  left:59.375%;
  width:398px;
  border-radius:44px;
}
.lineages {
  padding:112px var(--gutter) 96px;
}
.lineages-copy {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:48px;
}
.lineages h2 {
  flex:0 1 640px;
}
.lineages-copy p {
  max-width:340px;
  color:var(--muted);
  font-size:1.1875rem;
  line-height:29px;
}
.lineage-portraits {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.portrait {
  position:relative;
  overflow:hidden;
  border-radius:160px 160px 16px 16px;
  aspect-ratio:1;
}
.portrait::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,var(--canvas),transparent 40%);
  pointer-events:none;
}
.portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.footer {
  padding:88px var(--gutter) 112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  border-top:1px solid var(--hairline);
  text-align:center;
  background:radial-gradient(circle at 50% 0% in oklab,oklab(31% -.047 .018),oklab(17% -.004 .001) 65%);
}
.footer>.eyebrow {
  color:var(--muted);
}
.footer h2 {
  font-size:3.75rem;
  line-height:68px;
  margin-top:28px;
}
.availability {
  font-size:.875rem;
  line-height:20px;
  color:#a9ac9d;
}
.footer-links {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  width:100%;
  border-top:1px solid var(--hairline);
  margin-top:64px;
  padding-top:28px;
  font-size:.875rem;
  line-height:20px;
  color:#a9ac9d;
  text-align:left;
}
.footer-links nav {
  display:flex;
  gap:28px;
}
.footer-links nav:empty {
  display:none;
}
.footer-links a {
  display:flex;
  align-items:center;
  min-height:44px;
}
.footer-links a:hover {
  color:var(--cream);
}
.community-total {
  display:flex;
  flex-direction:column;
  gap:24px;
}
.total-number {
  font:600 9.375rem/154px 'Barlow Condensed',sans-serif;
  letter-spacing:.015em;
  color:var(--mint);
  font-variant-numeric:tabular-nums;
}
.community-total>p:last-child {
  font-size:1.1875rem;
  line-height:28px;
}
.community-capsule {
  position:fixed;
  z-index:10;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  width:max-content;
  max-width:calc(100% - 32px);
  padding:10px 28px;
  border:1px solid var(--hairline);
  border-radius:99px;
  background:#191919f0;
  font-size:.875rem;
  line-height:20px;
  pointer-events:none;
}
.capsule-number {
  font:600 1.625rem/30px 'Barlow Condensed',sans-serif;
  letter-spacing:.025em;
  color:var(--mint);
  font-variant-numeric:tabular-nums;
}
.has-community .footer {
  padding-bottom:calc(128px + env(safe-area-inset-bottom,0px));
}
@media(min-width:761px) and (max-width:1199px) {
  .loop {
    gap:32px;
  }
  .loop h2 {
    font-size:2rem;
  }
  .story {
    padding-inline:40px;
  }
  .story-words {
    font-size:clamp(2.75rem,4.44vw,4rem);
  }
  .hunt-copy {
    width:48%;
    top:90px;
  }
  .hunt h2,.lineages h2 {
    font-size:clamp(2.875rem,4.72vw,4.25rem);
    line-height:1.03;
  }
  .hunt-copy>p:last-child {
    max-width:95%;
  }
  .hunt-copy .eyebrow {
    font-size:.7rem;
  }
  .hunt-preview {
    width:30%;
    left:auto;
    right:7%;
    top:100px;
  }
  .hunt {
    height:820px;
  }
  .guardian-art {
    top:330px;
  }
  .lineages-copy {
    gap:36px;
  }
  .lineages-copy p {
    max-width:32%;
  }
  .lineages {
    padding-top:90px;
  }
  .footer h2 {
    font-size:3.25rem;
  }
}
@media(max-width:760px) {
  .story {
    padding:84px 24px;
    align-items:flex-start;
    gap:28px;
    text-align:left;
  }
  .story>.eyebrow {
    font-size:.75rem;
    line-height:20px;
    letter-spacing:.08em;
    color:#a9ac9d;
  }
  .story-words {
    font-size:2.5rem;
    line-height:46px;
    letter-spacing:0;
    max-width:440px;
  }
  .story-line {
    display:inline;
  }
  .story-ending {
    display:block;
    margin-top:28px;
  }
  .story-description {
    max-width:440px;
    font-size:1.125rem;
    line-height:27px;
  }
  .loop {
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0 24px;
  }
  .loop article {
    padding-block:40px;
    max-width:440px;
  }
  .loop h2 {
    font-size:2.125rem;
    line-height:39px;
  }
  .hunt {
    height:auto;
    display:flex;
    flex-direction:column;
    padding:64px 24px 0;
    gap:24px;
    background:radial-gradient(circle at 50% 75% in oklab,oklab(31.6% -.030 .015),oklab(18.8% -.004 .003) 70%);
  }
  .hunt-copy {
    position:static;
    width:100%;
    gap:24px;
  }
  .hunt h2 {
    font-size:2.875rem;
    line-height:49px;
  }
  .hunt-copy>p:last-child {
    font-size:1.125rem;
    line-height:27px;
  }
  .guardian-art {
    position:static;
    width:100%;
    height:350px;
    background:linear-gradient(0deg,oklab(18.8% -.004 .003),transparent 32%),url('/assets/guardian.jpg') center/contain no-repeat;
  }
  .hunt-preview {
    display:none;
  }
  .lineages {
    padding:80px 24px;
  }
  .lineages-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    margin-bottom:24px;
  }
  .lineages h2 {
    font-size:2.6875rem;
    line-height:47px;
    flex:auto;
  }
  .lineages-copy p {
    font-size:1.125rem;
    line-height:27px;
    max-width:440px;
  }
  .lineage-portraits {
    gap:8px;
  }
  .portrait {
    aspect-ratio:auto;
    height:160px;
    border-radius:64px 64px 0 0;
  }
  .footer {
    padding:64px 24px 104px;
    gap:20px;
  }
  .footer>.eyebrow {
    letter-spacing:.08em;
    color:var(--cream);
  }
  .footer h2 {
    font-size:2.6875rem;
    line-height:47px;
    margin-top:20px;
    max-width:440px;
  }
  .footer-links {
    margin-top:32px;
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:16px;
    padding-top:28px;
  }
  .footer-links nav {
    gap:24px;
  }
  .total-number {
    font-size:4.875rem;
    line-height:88px;
    letter-spacing:0;
  }
  .community-total {
    gap:20px;
  }
  .community-total>p:last-child {
    font-size:1rem;
    line-height:24px;
  }
  .community-capsule {
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    padding-inline:20px;
    gap:10px;
  }
  .capsule-number {
    font-size:1.5rem;
  }
  .community-capsule>span:last-child {
    font-size:.8125rem;
  }
}
@media(max-width:359px) {
  .navigation {
    left:12px;
    right:12px;
    padding-inline:10px;
  }
  .brand span {
    font-size:1.25rem;
  }
  .brand img {
    width:30px;
    height:30px;
  }
  .navigation .store-link img {
    width:120px;
    height:auto;
  }
  .hero h1 {
    font-size:3.5rem;
  }
  .eyebrow {
    letter-spacing:.04em;
  }
  .story-words {
    font-size:2.25rem;
    line-height:1.15;
  }
  .lineages h2 {
    font-size:2.35rem;
  }
  .total-number {
    font-size:4rem;
  }
  .community-capsule {
    padding-inline:16px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .story-words.is-enhanced .word {
    opacity:1;
  }
}