@charset "UTF-8";
:root {
  --paper: #f7f5ed;
  --ink: #29392f;
  --muted: #747a6c;
  --line: #dddcd0;
  --orange: #b75f3c;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}
button {
  touch-action: manipulation;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
button[hidden],
[hidden] {
  display: none !important;
}
::selection {
  background: #eed6aa;
}
.wrap {
  max-width: 1320px;
  width: calc(100% - 112px);
  margin-inline: auto;
}
.site-header {
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0 56px;
  gap: 24px;
}
.wordmark {
  font-size: 29px;
  font-weight: 780;
  letter-spacing: -1.6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wordmark svg {
  width: 28px;
  height: 28px;
  fill: var(--orange);
}
.wordmark > span {
  font-size: 10px;
  align-self: flex-start;
  margin-top: 5px;
  letter-spacing: 0;
}
.site-header nav {
  display: flex;
  gap: 32px;
  font-size: 13px;
  font-weight: 550;
}
.site-header nav a {
  padding: 10px 0;
  position: relative;
}
.site-header nav a:hover:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--orange);
}
.edition {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.edition > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #869473;
}
.intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 58px;
  padding-bottom: 38px;
  gap: 35px;
}
.eyebrow {
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1.6px;
  font-weight: 650;
  margin: 0 0 18px;
  color: var(--muted);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font: normal clamp(48px, 5.1vw, 78px) / 1.05 var(--serif);
  letter-spacing: -3.5px;
  margin-bottom: 0;
}
h1 em,
h2 em {
  font-weight: normal;
  color: var(--orange);
}
.intro-aside {
  padding: 0 6px 5px 0;
  min-width: 255px;
}
.intro-aside p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #677162;
}
.tiny-star {
  font-size: 30px;
  line-height: 1;
  display: block;
  color: var(--orange);
  margin-bottom: 17px;
}
.text-link {
  font-size: 12px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 30px;
}
.text-link > span {
  font-size: 20px;
}
.world-art {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  isolation: isolate;
  background: #e3d9bf;
  aspect-ratio: 1672 / 941;
}
.world-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  transition: filter 1s ease;
}
.light-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 42, 32, 0.48), transparent 45%);
  pointer-events: none;
  transition: background 1s;
}
.world-art[data-mood="night"] .world-image {
  filter: brightness(0.62) saturate(0.76) hue-rotate(13deg);
}
.world-art[data-mood="night"] .light-wash {
  background: linear-gradient(
    0deg,
    rgba(29, 32, 62, 0.5),
    rgba(60, 76, 127, 0.19)
  );
}
.art-label {
  position: absolute;
  left: 25px;
  top: 24px;
  background: rgba(249, 247, 236, 0.92);
  border: 1px solid #fff7;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 20px;
  padding: 9px 12px;
  font-size: 10px;
}
.live-dot {
  width: 6px;
  height: 6px;
  background: #9eac80;
  border-radius: 50%;
}
.world-note {
  position: absolute;
  left: 30px;
  bottom: 28px;
  color: #fff7e7;
  pointer-events: none;
}
.world-note > span {
  font-size: 8px;
  letter-spacing: 1.8px;
}
.world-note p {
  font: 31px/1.13 var(--serif);
  margin: 10px 0 0;
  letter-spacing: -0.7px;
}
.map-pin {
  position: absolute;
  border: 1px solid #fff9;
  background: #faf6dfce;
  width: 35px;
  height: 35px;
  box-shadow:
    0 0 0 6px #fff2,
    0 3px 14px #242f3426;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  transition:
    transform 0.2s,
    background 0.2s;
  backdrop-filter: blur(8px);
}
.map-pin span {
  font-size: 10px;
  font-weight: 650;
}
.map-pin:hover,
.map-pin[aria-expanded="true"] {
  transform: scale(1.12);
  background: #f8cd7f;
}
.pin-street {
  left: 44%;
  top: 39%;
}
.pin-river {
  left: 82%;
  top: 58%;
}
.pin-cave {
  left: 93%;
  top: 13%;
}
.place-popover {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: min(300px, calc(100% - 44px));
  border: 1px solid #ede8d6;
  background: #fffaf0f5;
  backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 7px 24px #26342818;
}
.place-popover .eyebrow {
  font-size: 8px;
  margin-bottom: 10px;
}
.place-popover h3 {
  font: 25px/1.1 var(--serif);
  margin-bottom: 10px;
}
.place-popover p:last-child {
  font-size: 12px;
  line-height: 1.6;
  color: #636b5d;
  margin: 0;
}
.close-place {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  font-size: 22px;
}
.art-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.art-caption p {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}
.caption-index {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ink);
  margin-right: 14px;
}
.caption-dot {
  padding: 0 7px;
}
.mood-controls {
  display: flex;
  gap: 3px;
}
.mood-controls button {
  font-size: 10px;
  border: 1px solid transparent;
  background: none;
  border-radius: 20px;
  padding: 7px 12px;
  white-space: nowrap;
}
.mood-controls button[aria-pressed="true"] {
  border-color: #d1d4c5;
  background: #e8ebdf;
}
.world-description {
  display: grid;
  grid-template-columns: 1fr 1.15fr 46px;
  align-items: center;
  gap: 50px;
  padding: 40px 0 64px;
}
.world-description h2 {
  font: 32px/1.13 var(--serif);
  letter-spacing: -0.7px;
  margin: 0;
}
.world-description p {
  font-size: 13px;
  line-height: 1.85;
  color: #717666;
  margin: 0;
}
.round-link {
  border: 1px solid #bec4b5;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: background 0.2s;
}
.round-link:hover {
  background: #e3e7d9;
}
.beings-section {
  background: #eeeee3;
  border-block: 1px solid #e1e2d6;
  padding: 66px 0 54px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
  margin-bottom: 32px;
}
.section-heading .eyebrow {
  margin-bottom: 15px;
}
.section-heading h2 {
  font: normal clamp(34px, 3.7vw, 51px) / 1.1 var(--serif);
  letter-spacing: -1.5px;
  margin: 0;
}
.section-heading > p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 5px 5px 0;
}
.beings-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid #e6e2d4;
  border-radius: 18px;
  background: #f3eedf;
}
.beings-stage img {
  aspect-ratio: 2;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.being-art { position: relative; }
.stage-note {
  display: block;
  text-align: center;
  padding: 0 12px 14px;
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  color: #8a8d7e;
}

.resident-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 15px 0 0;
}
.resident-tabs button {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 12px;
  border: 1px solid #d9ddce;
  border-radius: 11px;
  padding: 15px;
  background: transparent;
  transition:
    background 0.2s,
    border 0.2s;
}
.resident-tabs button[aria-pressed="true"] {
  background: var(--paper);
  border-color: #9ba48a;
}
.resident-tabs button:hover {
  background: #f7f5ed80;
}
.resident-tabs button > span:nth-child(2) {
  font-family: var(--serif);
  font-size: 20px;
}
.resident-tabs small {
  display: block;
  font: 9px var(--sans);
  color: var(--muted);
  margin-top: 5px;
}
.resident-dot {
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  border-radius: 50% 45% 45% 45%;
  box-shadow: inset -3px -3px 5px #53674112;
}
.mica {
  background: #a5c6b1;
}
.pip {
  background: #e8ba90;
}
.luma {
  background: #b3a9c7;
}
.moss {
  background: #a3bfc2;
}
.resident-arrow {
  font-size: 15px;
  margin-left: auto;
  color: #969e87;
}
.resident-story {
  display: grid;
  grid-template-columns: 45px 1fr 125px;
  gap: 18px;
  align-items: center;
  max-width: 920px;
  padding: 32px 0;
  margin: 0 auto;
  min-height: 155px;
}
.story-number {
  font: italic 29px var(--serif);
  color: #b9bdab;
}
.resident-story .eyebrow {
  font-size: 8px;
  margin: 0 0 8px;
}
.resident-story p:last-child {
  font-size: 12px;
  line-height: 1.75;
  margin: 0;
  color: #697161;
}
.resident-size {
  font: 26px var(--serif);
  text-align: center;
  border-left: 1px solid #d5dacb;
}
.resident-size small {
  font: 9px var(--sans);
  color: var(--muted);
}
.form-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 42px;
  row-gap: 20px;
  border-top: 1px solid #d6daca;
  padding: 28px 0;
}
.form-notes .eyebrow {
  font-size: 9px;
  margin-bottom: 12px;
}
.form-notes h3 {
  font: 25px/1.15 var(--serif);
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.form-notes article > p:last-child {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}
.form-footnote {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 700px) {
  .form-notes {
    grid-template-columns: 1fr;
    gap: 23px;
    padding: 25px 0;
  }
  .form-notes h3 {
    font-size: 23px;
  }
  .form-notes article > p:last-child {
    font-size: 11px;
  }
  .form-footnote {
    font-size: 9px;
    line-height: 1.7;
  }
}
.anatomy-grid {
  border-top: 1px solid #d6daca;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  padding-top: 30px;
}
.anatomy-grid h3 {
  font-size: 12px;
  margin: 14px 0 10px;
}
.anatomy-grid p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}
.detail-icon {
  height: 23px;
  display: inline-flex;
  align-items: center;
}
.eyes-icon {
  gap: 6px;
  padding-top: 2px;
}
.eyes-icon i {
  width: 12px;
  height: 17px;
  background: #34414e;
  border-radius: 50%;
  position: relative;
  transform: rotate(-9deg);
}
.eyes-icon i:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}
.eyes-icon i:last-child {
  transform: rotate(9deg);
}
.heart-icon {
  color: #d4a352;
  font-size: 29px;
  text-shadow: 0 0 12px #e5c286;
}
.hat-icon {
  font-size: 40px;
  color: #a9825b;
  line-height: 1;
}
.wildlife-section {
  padding-block: 77px 70px;
}
.life-token {
  position: absolute;
  left: var(--core-x, 50%);
  top: var(--core-y, 50%);
  width: var(--core-size, 8%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--facet-a, #ffe9a0), var(--token-edge, #aa6218) 65%, var(--facet-c, #e7a02c));
  box-shadow: 0 0 var(--halo-near, 10px) var(--halo-color, #ffb835bb), 0 0 var(--halo-far, 26px) var(--halo-soft, #ffbf4b77), inset 0 0 2px #713f24;
  pointer-events: none;
  transition: box-shadow .2s, background .2s;
}
.life-token::before {
  content: "";
  position: absolute;
  inset: 9%;
  clip-path: polygon(29% 0, 70% 0, 97% 28%, 100% 70%, 72% 100%, 28% 100%, 0 72%, 0 28%);
  background: conic-gradient(from 22deg at 49% 48%,
    var(--facet-a, #ffe9a0) 0deg 52deg,
    var(--facet-b, #e49320) 52deg 111deg,
    var(--facet-c, #ffd36d) 111deg 169deg,
    var(--facet-d, #b97210) 169deg 232deg,
    var(--facet-e, #f7b843) 232deg 293deg,
    var(--facet-f, #ffe195) 293deg 360deg);
}
.life-token::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 31%, #fffbea 0 9%, #fff9d580 10%, transparent 16%),
    radial-gradient(circle at 66% 23%, #fffef2 0 6%, #fff5ca80 7%, transparent 12%),
    linear-gradient(150deg, #fffbd445, transparent 40%);
  opacity: var(--token-shine, .9);
}
.token-study {
  display: grid;
  grid-template-columns: 1.05fr 135px 1fr;
  gap: 27px;
  align-items: center;
  padding: 26px;
  background: #eeeee1;
  border: 1px solid #dce0cf;
  border-radius: 15px;
  margin: 0 0 30px;
}
.token-study .eyebrow { font-size: 8px; margin-bottom: 12px; }
.token-study h3 { font: 29px/1.1 var(--serif); letter-spacing: -.7px; margin-bottom: 12px; }
.token-study-copy > p:last-child { font-size: 11px; line-height: 1.8; color: var(--muted); margin-bottom: 0; }
.token-preview { text-align: center; }
.token-emblem { width: 90px; height: 90px; position: relative; margin: 0 auto; border-radius: 50%; background: #e2e5d5; }
.token-emblem .life-token { --core-size: 54%; }
.token-preview p { font: italic 12px/1.5 var(--serif); color: #847449; margin: 11px 0 0; }
.token-control-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; }
.token-control-label output { color: #aa7939; font-variant-numeric: tabular-nums; }
#token-balance { width: 100%; margin: 5px 0; height: 35px; accent-color: #aa7939; cursor: pointer; }
#token-balance:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 5px; }
.token-presets { display: flex; gap: 6px; }
.token-presets button { font-size: 9px; border: 1px solid #d3d8c4; background: transparent; border-radius: 14px; padding: 7px 10px; }
.token-presets button[aria-pressed="true"] { background: #334735; color: #fff9e9; border-color: #334735; }
#token-hint { font-size: 9px; line-height: 1.7; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 1100px) {
  .token-study { grid-template-columns: 1fr 130px; gap: 20px; }
  .token-control { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .token-study { padding: 21px 18px; grid-template-columns: minmax(0, 1fr) 80px; gap: 17px; }
  .token-study h3 { font-size: 26px; }
  .token-study-copy > p:last-child { font-size: 10px; }
  .token-emblem { width: 66px; height: 66px; }
  .token-preview p { font-size: 10px; }
}
.atlas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 25px;
}
.animal-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.animal-filters button {
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 9px 13px;
  background: none;
  font-size: 10px;
}
.animal-filters button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.animal-filters button:not([aria-pressed="true"]):hover {
  background: #e9ebdf;
}
.animal-filters button span {
  font-size: 8px;
  opacity: 0.65;
  margin-left: 4px;
}
.atlas-hint {
  font-size: 9px;
  color: #8a8f81;
}
.creature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}
.creature-card {
  border: 1px solid #e3e1d4;
  background: #f2eedf;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.creature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px #4346370b;
}
.creature-visual {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f3eedf;
}
.creature-art {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("assets/wildlife-v3.png");
  background-size: 500% 200%;
  background-position: var(--x) var(--y);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}
.creature-num {
  position: absolute;
  top: 11px;
  left: 11px;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: #9a9d8e;
}
.creature-open {
  position: absolute;
  right: 11px;
  top: 8px;
  color: #adb09f;
  font-size: 15px;
}
.creature-info {
  padding: 14px 13px 15px;
  border-top: 1px solid #e5e1d4;
  background: #f9f7ef;
}
.creature-info h3 {
  font: 17px/1.2 var(--serif);
  letter-spacing: -0.3px;
  margin-bottom: 7px;
}
.creature-info p {
  font-size: 9px;
  margin: 0;
  color: var(--muted);
}
.creature-tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  gap: 5px;
}
.creature-tags span {
  font-size: 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8b907f;
}
.creature-tags .apex-tag {
  color: #9b6955;
}
.wild-note {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 27px;
  padding: 23px 25px;
  border: 1px solid #e1e1d3;
  border-radius: 10px;
  background: #eeefe5;
}
.wild-note > span:first-child {
  font-size: 28px;
  color: #8e9b76;
}
.wild-note p {
  font-size: 11px;
  line-height: 1.8;
  color: #78816d;
  max-width: 725px;
  margin: 0;
}
.wild-note p strong {
  color: #52614d;
}
.note-tail {
  font: italic 14px/1.5 var(--serif);
  color: #8f9881;
  white-space: nowrap;
  margin-left: auto;
}
.design-section {
  background: #e8ecdf;
  border-top: 1px solid #d9dfce;
  padding: 58px 0 0;
}
.design-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
}
.design-grid h3 {
  font: 25px var(--serif);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.design-grid article > p:last-child {
  font-size: 12px;
  line-height: 1.8;
  color: #78816d;
  max-width: 450px;
  margin: 0;
}
.design-grid .eyebrow {
  font-size: 8px;
  margin-top: 22px;
  margin-bottom: 13px;
}
.shape-composition {
  height: 140px;
  display: flex;
  gap: 23px;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  padding-bottom: 7px;
}
.shape {
  display: block;
  box-shadow:
    inset -12px -15px 24px #45423212,
    0 12px 12px -9px #515a3529;
}
.shape-one {
  width: 78px;
  height: 78px;
  background: #d6a887;
  border-radius: 44% 56% 48% 46%;
  transform: rotate(-12deg);
}
.shape-two {
  width: 87px;
  height: 119px;
  background: #afbca2;
  border-radius: 47% 49% 40% 45%;
  transform: rotate(8deg);
}
.shape-three {
  width: 102px;
  height: 63px;
  background: #d8c27f;
  border-radius: 51% 51% 46% 42%;
  transform: rotate(-8deg);
}
.shape-four {
  width: 51px;
  height: 66px;
  background: #a8b8c1;
  border-radius: 48% 49% 35% 55%;
  transform: rotate(17deg);
}
.swatches {
  height: 140px;
  display: flex;
  align-items: stretch;
  gap: 7px;
  padding: 16px 0 0;
}
.swatches button {
  position: relative;
  flex: 1;
  border: 0;
  background: var(--swatch);
  border-radius: 40px 40px 5px 5px;
  transition: transform 0.2s;
}
.swatches button:hover {
  transform: translateY(-6px);
}
.swatches button span {
  position: absolute;
  bottom: 11px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: #27382feb;
}
.swatches button:last-child span {
  color: #fff9ef;
}
#color-value {
  font-size: 8px;
  letter-spacing: 0.7px;
  margin-left: 8px;
  color: var(--orange);
}
.closing-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  position: relative;
  border-top: 1px solid #d1d9c6;
  margin-top: 48px;
  padding: 40px 60px;
}
.closing-note > span {
  font-size: 30px;
  color: #afbd94;
}
.closing-note p {
  font: 25px/1.35 var(--serif);
  margin: 0;
  letter-spacing: -0.3px;
}
.closing-note em {
  color: #899777;
}
.closing-note .round-link {
  position: absolute;
  right: 0;
}
footer {
  display: flex;
  align-items: center;
  gap: 25px;
  padding-block: 28px;
}
footer .wordmark {
  font-size: 22px;
}
footer p {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}
footer > a:not(.wordmark) {
  font-size: 10px;
  margin-left: auto;
}
footer > span {
  font-size: 8px;
  color: #8d9382;
}
dialog {
  width: min(790px, calc(100% - 32px));
  border: 1px solid #e1dfd0;
  padding: 0;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  box-shadow: 0 28px 100px #17201833;
}
dialog[open] {
  display: grid;
  grid-template-columns: 43% 57%;
}
dialog::backdrop {
  background: #1f302e85;
  backdrop-filter: blur(6px);
}
.dialog-close {
  position: absolute;
  right: 13px;
  top: 11px;
  border: 1px solid #dadbcd;
  background: var(--paper);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  font-size: 21px;
  z-index: 1;
  line-height: 1;
}
.dialog-art {
  background: #f3eedf;
  display: flex;
  align-items: center;
  padding: 15px;
}
.dialog-art .creature-art {
  position: relative;
  height: auto;
  aspect-ratio: 1;
}
.dialog-content {
  padding: 44px 30px 30px;
}
.dialog-content h2 {
  font: 34px/1.06 var(--serif);
  letter-spacing: -1px;
  margin-bottom: 8px;
}
.dialog-content .eyebrow {
  font-size: 8px;
  margin-bottom: 12px;
}
.dialog-nickname {
  font: italic 17px var(--serif);
  color: var(--orange);
  margin-bottom: 20px;
}
.dialog-content > p:not(.eyebrow):not(.dialog-nickname) {
  font-size: 12px;
  line-height: 1.8;
  color: #737c69;
}
.dialog-content dl {
  margin: 24px 0;
}
.dialog-content dl > div {
  display: grid;
  grid-template-columns: 87px 1fr;
  border-top: 1px solid var(--line);
  padding: 11px 0;
  gap: 10px;
  font-size: 10px;
}
.dialog-content dt {
  color: #989e8d;
}
.dialog-content dd {
  margin: 0;
  line-height: 1.6;
}
.dialog-instinct {
  padding: 12px;
  background: #e9edde;
  border-radius: 7px;
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -60px;
  left: 20px;
  padding: 12px;
  background: white;
  z-index: 20;
}
.skip-link:focus {
  top: 12px;
}
@media (min-width: 1600px) {
  .site-header {
    padding-inline: calc((100vw - 1320px) / 2);
  }
}
@media (max-width: 1100px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .site-header {
    padding: 0 32px;
  }
  .edition {
    display: none;
  }
  .intro-aside {
    min-width: 215px;
  }
  .intro-aside p {
    font-size: 12px;
  }
  .world-description {
    gap: 25px;
  }
  .creature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .creature-info h3 {
    font-size: 20px;
  }
  .atlas-hint {
    display: none;
  }
  .resident-tabs button {
    padding: 12px 9px;
    gap: 8px;
  }
  .resident-tabs small {
    font-size: 8px;
  }
  .resident-arrow {
    display: none;
  }
  .creature-visual {
    aspect-ratio: 1;
  }
  footer > span {
    display: none;
  }
  .beings-stage img {
    aspect-ratio: 2;
  }
}
@media (max-width: 700px) {
  :root {
    scroll-padding-top: 25px;
  }
  .wrap {
    width: calc(100% - 36px);
  }
  .site-header {
    height: 73px;
    padding: 0 18px;
    gap: 12px;
  }
  .wordmark {
    font-size: 24px;
  }
  .wordmark svg {
    width: 23px;
  }
  .site-header nav {
    gap: 15px;
    font-size: 10px;
  }
  .site-header nav a:last-child {
    display: none;
  }
  .intro {
    padding-top: 37px;
    padding-bottom: 25px;
    display: block;
  }
  .intro .eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
    margin-bottom: 16px;
  }
  h1 {
    font-size: clamp(41px, 9.5vw, 65px);
    letter-spacing: -2.1px;
  }
  .intro-aside {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 23px;
    padding: 0;
  }
  .intro-aside .tiny-star {
    font-size: 27px;
    margin: 0;
  }
  .intro-aside p {
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
  }
  .intro-aside .text-link {
    font-size: 10px;
    margin-left: auto;
    max-width: 95px;
    gap: 9px;
    line-height: 1.5;
  }
  .world-art {
    aspect-ratio: 1672 / 941;
    border-radius: 14px;
  }
  .world-image {
    object-position: center;
  }
  .world-note {
    display: none;
  }
  .world-note p {
    font-size: 25px;
  }
  .world-note > span {
    font-size: 7px;
  }
  .art-label {
    top: 10px;
    left: 10px;
    font-size: 7px;
    padding: 6px 8px;
  }
  .map-pin {
    width: 29px;
    height: 29px;
  }
  .map-pin span {
    font-size: 8px;
  }
  .pin-street {
    left: 42%;
    top: 39%;
  }
  .pin-river {
    left: 80%;
    top: 58%;
  }
  .pin-cave {
    left: 89%;
    top: 12%;
  }
  .place-popover {
    right: 12px;
    bottom: 12px;
    padding: 21px;
    width: 245px;
  }
  .art-caption {
    align-items: flex-start;
    gap: 8px;
  }
  .art-caption p {
    font-size: 8px;
    line-height: 1.8;
    max-width: 160px;
  }
  .caption-index {
    display: block;
    font-size: 7px;
    margin: 0;
  }
  .caption-dot {
    padding: 0 2px;
  }
  .mood-controls button {
    padding: 7px 8px;
    font-size: 8px;
  }
  .world-description {
    grid-template-columns: 1fr 42px;
    gap: 17px;
    padding: 29px 0 39px;
  }
  .world-description h2 {
    font-size: 28px;
    grid-column: 1;
  }
  .world-description h2 br {
    display: none;
  }
  .world-description p {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 12px;
  }
  .world-description .round-link {
    grid-row: 1;
    grid-column: 2;
  }
  .section-heading {
    display: block;
    margin-bottom: 24px;
  }
  .section-heading h2 {
    font-size: 37px;
    letter-spacing: -1.2px;
  }
  .section-heading > p {
    font-size: 11px;
    margin: 15px 0 0;
  }
  .section-heading > p br {
    display: none;
  }
  .section-heading .eyebrow {
    font-size: 8px;
  }
  .beings-section {
    padding: 39px 0 34px;
  }
  .beings-stage {
    border-radius: 12px;
  }
  .beings-stage img {
    aspect-ratio: 2;
    object-fit: contain;
  }
  .stage-note {
    font-size: 9px;
    bottom: 12px;
  }
  .resident-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 11px;
  }
  .resident-tabs button {
    padding: 12px;
  }
  .resident-tabs button > span:nth-child(2) {
    font-size: 19px;
  }
  .resident-tabs small {
    font-size: 8px;
  }
  .resident-dot {
    width: 22px;
    height: 22px;
  }
  .resident-story {
    grid-template-columns: 27px 1fr;
    gap: 12px;
    padding: 25px 0;
    min-height: 175px;
  }
  .resident-size {
    display: none;
  }
  .resident-story p:last-child {
    font-size: 11px;
  }
  .anatomy-grid {
    gap: 22px;
    grid-template-columns: 1fr;
    padding-top: 25px;
  }
  .anatomy-grid article {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 12px;
  }
  .anatomy-grid h3 {
    margin: 0 0 7px;
    align-self: center;
  }
  .anatomy-grid p {
    grid-column: 2;
  }
  .anatomy-grid .detail-icon {
    grid-row: 1 / 3;
  }
  .wildlife-section {
    padding-block: 42px;
  }
  .atlas-toolbar {
    margin-bottom: 17px;
    padding-bottom: 13px;
  }
  .animal-filters {
    gap: 2px;
  }
  .animal-filters button {
    font-size: 9px;
    padding: 8px 10px;
  }
  .creature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
  }
  .creature-info {
    padding: 11px;
  }
  .creature-info h3 {
    font-size: 17px;
  }
  .creature-info p {
    font-size: 8px;
  }
  .creature-tags {
    margin-top: 12px;
  }
  .creature-tags span {
    font-size: 6px;
  }
  .creature-visual {
    aspect-ratio: 1;
  }
  .wild-note {
    gap: 13px;
    padding: 18px 16px;
    margin-top: 20px;
    align-items: flex-start;
  }
  .wild-note p {
    font-size: 10px;
    line-height: 1.75;
  }
  .note-tail {
    display: none;
  }
  .design-section {
    padding-top: 37px;
  }
  .design-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .shape-composition {
    height: 119px;
    gap: 19px;
  }
  .shape-one {
    width: 65px;
    height: 65px;
  }
  .shape-two {
    width: 73px;
    height: 102px;
  }
  .shape-three {
    width: 84px;
    height: 55px;
  }
  .shape-four {
    width: 40px;
    height: 56px;
  }
  .design-grid h3 {
    font-size: 25px;
  }
  .design-grid article > p:last-child {
    font-size: 11px;
  }
  .swatches {
    height: 125px;
    padding: 0;
  }
  .closing-note {
    padding: 30px 40px 30px 0;
    margin-top: 32px;
    gap: 12px;
    justify-content: flex-start;
  }
  .closing-note p {
    font-size: 18px;
  }
  .closing-note > span {
    font-size: 22px;
  }
  .closing-note .round-link {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
  footer {
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 23px;
  }
  footer p {
    font-size: 9px;
    order: 3;
    width: 100%;
  }
  footer > a:not(.wordmark) {
    font-size: 9px;
  }
  dialog[open] {
    display: block;
    width: min(430px, calc(100% - 30px));
  }
  .dialog-art {
    height: 235px;
    padding: 10px;
    justify-content: center;
  }
  .dialog-art .creature-art {
  position: relative;
    height: 100%;
    width: auto;
    aspect-ratio: 1;
  }
  .dialog-content {
    padding: 25px;
  }
  .dialog-content h2 {
    font-size: 30px;
  }
  .dialog-content dl {
    margin: 18px 0;
  }
  .dialog-content > p:not(.eyebrow):not(.dialog-nickname) {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}