@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root {
  --paper:#f2efe6;
  --ink:#292a25;
  --red:#cd472b;
  --muted:#72736a;
  --line:#c9c7bc;
  --mono:'Courier New',monospace;
  --sans:'Noto Sans SC','Microsoft YaHei',sans-serif;
  --page:1360px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  -webkit-font-smoothing:antialiased
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10;
  opacity:.065;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}

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

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

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  border-radius:0;
  background:none
}

button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--red);
  outline-offset:6px
}

svg {
  display:block
}

h1,h2,h3,p {
  margin:0
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:var(--paper);
  padding:15px;
  z-index:100
}

.skip-link:focus {
  top:10px
}

.site-header {
  max-width:var(--page);
  margin:auto;
  padding:30px 54px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}

.brand {
  display:flex;
  gap:17px;
  align-items:center;
  font-family:var(--mono);
  font-weight:bold;
  font-size:14px;
  letter-spacing:-.4px
}

.brand small {
  display:block;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:1.1px;
  font-weight:400;
  margin-top:5px
}

.brand-symbol {
  font-family:Arial,sans-serif;
  font-size:48px;
  font-weight:900;
  line-height:1;
  letter-spacing:-7px
}

.brand-symbol>span {
  color:var(--red);
  font-size:29px;
  position:relative;
  top:-13px;
  left:5px
}

.main-nav {
  display:flex;
  gap:38px;
  font-size:12px
}

.main-nav a {
  padding:8px 0;
  position:relative
}

.main-nav a::after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:var(--red);
  transition:width .2s
}

.main-nav a:hover::after {
  width:100%
}

.header-contact {
  border:1px solid var(--ink);
  padding:10px 15px;
  font-size:12px;
  display:flex;
  gap:28px
}

.header-contact:hover {
  background:var(--ink);
  color:var(--paper)
}

.hero {
  max-width:var(--page);
  padding:0 54px;
  margin:auto
}

.hero-meta {
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  padding:18px 0;
  font:10px var(--mono);
  letter-spacing:1.3px
}

.hero-meta span:last-child {
  font:10px var(--sans);
  letter-spacing:2px
}

.hero-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:28px 0 45px
}

.eyebrow {
  font-size:12px;
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:12px
}

.tiny-cross {
  font-size:21px;
  color:var(--red)
}

h1 {
  font-size:clamp(72px,7.6vw,108px);
  line-height:1.2;
  letter-spacing:-7px;
  font-weight:900;
  margin:22px 0 25px
}

.hero-last {
  color:var(--red)
}

.sun-character {
  position:relative
}

.sun-character svg {
  position:absolute;
  left:76%;
  top:-12%;
  width:57px;
  height:57px;
  stroke:var(--red);
  stroke-width:2.5;
  transform:rotate(13deg)
}

.hero-description {
  line-height:1.95;
  font-size:14px;
  color:#62635b
}

.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
  border-bottom:1px solid var(--ink);
  padding:12px 0;
  font-size:13px;
  font-weight:500;
  transition:color .2s,gap .2s
}

.text-link>span {
  font-size:24px;
  font-family:Arial;
  line-height:1
}

.text-link:hover {
  color:var(--red);
  gap:57px
}

.hero-link {
  margin-top:24px
}

.specimen {
  position:relative;
  padding:15px 21px 0;
  border:1px solid var(--line);
  background:linear-gradient(90deg,transparent 23px,#292a2506 24px,transparent 25px),linear-gradient(transparent 23px,#292a2506 24px,transparent 25px);
  background-size:25px 25px;
  transform:rotate(1.5deg)
}

.specimen::before,.specimen::after {
  content:"+";
  position:absolute;
  top:-10px;
  color:var(--muted);
  font:17px var(--mono)
}

.specimen::before {
  left:-6px
}

.specimen::after {
  right:-6px
}

.specimen-top {
  display:flex;
  justify-content:space-between;
  font:9px var(--mono);
  letter-spacing:.7px
}

.wheel-stage {
  width:100%;
  aspect-ratio:1.14;
  position:relative;
  display:grid;
  place-items:center;
  margin:6px 0
}

.axis {
  position:absolute;
  background:var(--line);
  opacity:.7
}

.axis-x {
  height:1px;
  width:100%;
  top:50%
}

.axis-y {
  height:100%;
  width:1px;
  left:50%
}

.axis-label {
  position:absolute;
  font:7px var(--mono);
  letter-spacing:2px;
  color:var(--muted);
  background:var(--paper);
  padding:3px 7px;
  left:50%;
  transform:translateX(-50%);
  z-index:2
}

.axis-top {
  top:0
}

.axis-bottom {
  bottom:0
}

.orbit-type {
  position:absolute;
  width:92%;
  height:auto;
  transform:rotate(-70deg)
}

.orbit-type text {
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:3.4px;
  fill:var(--muted)
}

.wheel {
  width:71%;
  aspect-ratio:1;
  border-radius:50%;
  position:relative;
  z-index:1
}

.wheel-orbit {
  position:absolute;
  inset:-10%;
  border:1px solid var(--ink);
  border-radius:50%
}

.wheel-orbit::after {
  content:"";
  inset:7px;
  border:1px dashed #99998f;
  border-radius:50%;
  position:absolute
}

.wheel-orbit>span {
  position:absolute;
  z-index:1;
  background:var(--paper);
  padding:5px;
  font:10px var(--mono);
  color:var(--red)
}

.wheel-orbit>span:nth-child(1) {
  top:9%;
  left:15%
}

.wheel-orbit>span:nth-child(2) {
  right:-3%;
  top:47%
}

.wheel-orbit>span:nth-child(3) {
  bottom:3%;
  left:21%
}

.wheel-disc {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--red);
  border-radius:50%;
  transform:rotate(-18deg);
  transition:transform 1s cubic-bezier(.22,.8,.25,1),background .7s;
  box-shadow:5px 9px 14px #292a2520
}

.disc-lines {
  position:absolute;
  inset:10px;
  border:1px solid #f2efe677;
  border-radius:50%
}

.disc-lines::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid #f2efe644;
  border-radius:50%
}

.wheel-disc::after {
  content:"";
  height:120%;
  width:1px;
  background:#f2efe67a;
  position:absolute;
  top:-10%;
  left:50%;
  transform:rotate(55deg)
}

.disc-label {
  position:absolute;
  top:17%;
  left:28%;
  font:9px/1.5 var(--mono);
  letter-spacing:2px;
  color:var(--paper)
}

.disc-mark {
  position:absolute;
  bottom:10%;
  left:17%;
  font:900 110px/.9 Arial;
  letter-spacing:-10px;
  color:var(--paper)
}

.disc-number {
  position:absolute;
  right:16%;
  bottom:20%;
  font:13px var(--mono);
  color:var(--paper);
  writing-mode:vertical-rl
}

.wheel-center {
  position:absolute;
  inset:39%;
  border-radius:50%;
  background:var(--paper);
  display:grid;
  place-items:center;
  box-shadow:0 0 0 1px var(--ink);
  z-index:2
}

.wheel-center>span {
  font:50px Arial;
  line-height:1;
  transition:transform 1s
}

.wheel[data-mode=write] .wheel-disc {
  transform:rotate(-138deg);
  background:#5c6954
}

.wheel[data-mode=collect] .wheel-disc {
  transform:rotate(102deg);
  background:#647b87
}

.wheel[data-mode=write] .wheel-center>span {
  transform:rotate(-120deg)
}

.wheel[data-mode=collect] .wheel-center>span {
  transform:rotate(120deg)
}

.wheel-pointer {
  position:absolute;
  right:4%;
  top:47%;
  font-size:21px;
  color:var(--red);
  z-index:2
}

.handwritten {
  position:absolute;
  bottom:2%;
  left:0;
  font-size:12px;
  transform:rotate(-8deg);
  font-family:KaiTi,STKaiti,serif;
  color:var(--red)
}

.scribble-arrow {
  position:absolute;
  bottom:-1%;
  left:25%;
  width:52px;
  fill:none;
  stroke:var(--red);
  stroke-width:1.5
}

.specimen-controls {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ink);
  margin-top:17px;
  background:var(--paper)
}

.specimen-controls button {
  border:0;
  padding:13px 3px;
  font-size:11px;
  transition:background .2s,color .2s
}

.specimen-controls button+button {
  border-left:1px solid var(--ink)
}

.specimen-controls button>span {
  font:9px var(--mono);
  margin-right:6px;
  opacity:.65
}

.specimen-controls button[aria-pressed=true] {
  background:var(--ink);
  color:var(--paper)
}

.specimen-controls button:hover {
  background:var(--red);
  color:var(--paper)
}

.specimen-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:54px;
  font-size:10px;
  color:#64655c
}

.specimen-caption a {
  font:26px Arial;
  color:var(--red);
  padding:4px 6px
}

.hero-bottom {
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:10px;
  letter-spacing:1px
}

.hero-bottom>span:first-child {
  display:flex;
  align-items:center;
  gap:8px
}

.hero-bottom-center {
  color:var(--muted)
}

.status-dot {
  width:6px;
  height:6px;
  background:var(--red);
  border-radius:50%
}

.hero-bottom>a>span {
  margin-left:17px
}

.section-shell {
  max-width:var(--page);
  padding:76px 54px 0;
  margin:auto
}

.section-label {
  display:flex;
  justify-content:space-between;
  font:10px var(--mono);
  letter-spacing:1.3px;
  color:var(--muted)
}

.section-label>span:first-child {
  font:11px var(--sans);
  color:var(--ink);
  letter-spacing:1.3px
}

.about-layout {
  display:grid;
  grid-template-columns:1fr 2.1fr;
  gap:60px;
  padding:54px 0
}

.margin-note {
  padding:10px 0 0 25px
}

.note-star {
  display:block;
  color:var(--red);
  font:64px/1 Arial;
  margin-bottom:24px
}

.margin-note>p {
  font-size:13px;
  line-height:2;
  color:var(--muted)
}

.note-sign {
  display:block;
  font:11px var(--mono);
  margin-top:16px;
  transform:rotate(-5deg);
  transform-origin:left
}

.about-copy h2 {
  font-size:clamp(30px,3.5vw,47px);
  letter-spacing:-1.8px;
  line-height:1.5;
  font-weight:700
}

.underline {
  position:relative;
  white-space:nowrap
}

.underline::after {
  content:"";
  position:absolute;
  bottom:-5px;
  left:0;
  width:100%;
  height:9px;
  border-top:3px solid var(--red);
  border-radius:50%;
  transform:rotate(-2deg)
}

.about-body {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  margin-top:30px;
  font-size:13px;
  line-height:2.1;
  color:#66675f
}

.interest-strip {
  display:flex;
  align-items:center;
  gap:30px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:12px
}

.interest-strip>span:first-child {
  color:var(--muted);
  font-size:10px;
  min-width:calc(33.333% - 20px)
}

.interest-strip p {
  flex:1
}

.interest-strip i {
  font-style:normal;
  color:var(--red);
  padding:0 14px
}

.interest-strip>span:last-child {
  font:24px Arial
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin:42px 0 45px;
  gap:30px
}

.section-heading h2 {
  font-size:clamp(33px,3.7vw,49px);
  line-height:1.45;
  font-weight:700;
  letter-spacing:-2px
}

.section-heading>p {
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  margin-bottom:7px
}

.project {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  border-top:1px solid var(--ink)
}

.project-art {
  min-height:486px;
  position:relative;
  overflow:hidden
}

.project-info {
  padding:33px 0 35px 54px;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.project-number {
  font:13px var(--mono);
  color:var(--red);
  display:flex;
  align-items:center;
  gap:20px
}

.project-number>span {
  font:10px var(--sans);
  letter-spacing:.5px;
  color:var(--muted)
}

.project-info h3 {
  font-size:49px;
  line-height:1.2;
  letter-spacing:-1.7px;
  margin:33px 0 20px
}

.red-dot {
  color:var(--red)
}

.project-question {
  font-size:13px;
  font-weight:500;
  margin-bottom:17px
}

.project-description {
  font-size:12px;
  line-height:2;
  color:#6d6e64;
  max-width:335px
}

.project-tags {
  list-style:none;
  display:flex;
  gap:8px;
  padding:0;
  margin:20px 0 29px;
  flex-wrap:wrap
}

.project-tags li {
  border:1px solid var(--line);
  font-size:9px;
  padding:5px 8px
}

.project-info .text-link {
  margin-top:auto;
  min-width:170px
}

.art-meta {
  position:absolute;
  inset:22px 24px auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font:8px var(--mono);
  letter-spacing:1px;
  z-index:3
}

.wolf-art {
  background:#303b38;
  color:#e9e8d8;
  transition:background .6s,color .6s
}

.wolf-art::before {
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  border:1px solid #e9e8d822;
  border-radius:50%;
  top:55px;
  left:50%;
  transform:translateX(-50%)
}

.wolf-art::after {
  content:"";
  position:absolute;
  width:410px;
  height:410px;
  border:1px solid #e9e8d812;
  border-radius:50%;
  top:25px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none
}

.wolf-moon {
  position:absolute;
  right:55px;
  top:75px;
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:-13px 7px 0 -2px #d5cfad;
  transform:rotate(-20deg);
  transition:all .6s
}

.wolf-table {
  position:absolute;
  inset:80px 0 100px;
  display:flex;
  justify-content:center;
  align-items:center
}

.role-card {
  position:absolute;
  width:146px;
  height:215px;
  border:1px solid #363f38;
  outline:4px solid #e4dfcd;
  outline-offset:-8px;
  box-shadow:3px 10px 18px #0003;
  background:#e4dfcd;
  color:#303b38;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .6s
}

.role-card>span {
  display:flex;
  justify-content:space-between;
  font-size:12px
}

.role-card>small {
  font:8px var(--mono);
  letter-spacing:2px
}

.role-back {
  transform:translate(-100px,9px) rotate(-18deg);
  background:#c0c8b1;
  outline-color:#c0c8b1
}

.role-front {
  transform:translate(100px,16px) rotate(17deg);
  background:#d2b990;
  outline-color:#d2b990
}

.role-main {
  z-index:2;
  transform:translateY(-14px) rotate(-4deg)
}

.role-main svg {
  height:132px;
  fill:#303b38;
  margin-top:5px
}

.role-main .wolf-face {
  fill:none;
  stroke:#e4dfcd;
  stroke-width:3
}

.eye-symbol,.villager-symbol {
  font:89px/1 Georgia;
  text-align:center
}

.phase-control {
  position:absolute;
  bottom:62px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:5px;
  z-index:3
}

.phase-control button {
  border:1px solid #e9e8d83a;
  color:inherit;
  font-size:10px;
  padding:9px 14px
}

.phase-control button[aria-pressed=true] {
  background:#e9e8d8;
  color:#303b38
}

.art-footnote {
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  text-align:center;
  font-size:10px;
  letter-spacing:1px;
  opacity:.65
}

.wolf-art.is-day {
  background:#c6cbb7;
  color:#303b38
}

.wolf-art.is-day .wolf-moon {
  background:#d6a04b;
  box-shadow:0 0 0 8px #d6a04b1a;
  transform:rotate(0)
}

.wolf-art.is-day .role-main {
  transform:translateY(0) rotate(4deg)
}

.wolf-art.is-day .role-back {
  transform:translate(-103px,-3px) rotate(-13deg)
}

.wolf-art.is-day .role-front {
  transform:translate(103px,-9px) rotate(12deg)
}

.wolf-art.is-day .phase-control button {
  border-color:#303b3850
}

.wolf-art.is-day .phase-control button[aria-pressed=true] {
  background:#303b38;
  color:#e9e8d8
}

.project-phrase {
  grid-template-columns:1fr 1.15fr;
  margin-top:45px;
  border-bottom:1px solid var(--ink)
}

.project-phrase .project-info {
  padding:33px 40px 35px 0
}

.project-phrase h3 {
  font-family:Arial,sans-serif;
  font-size:68px;
  letter-spacing:-4px;
  margin-top:52px
}

.phrase-art {
  background:#e3b9a6;
  color:#523c34
}

.phrase-art::before {
  content:"X";
  position:absolute;
  inset:-44px -20px auto auto;
  font:900 500px/.9 Arial;
  color:#f2efe628;
  transform:rotate(-12deg);
  pointer-events:none
}

.phrase-demo {
  position:absolute;
  left:9%;
  right:9%;
  top:98px;
  transform:rotate(3deg);
  box-shadow:7px 10px 0 #513d3414;
  border:1px solid #523c344d;
  background:#f6f2e9
}

.demo-heading {
  font-size:9px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:13px 15px;
  border-bottom:1px solid #523c3420
}

.demo-led {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--red)
}

.demo-heading button {
  margin-left:auto;
  border:0;
  font-size:9px;
  padding:3px
}

.demo-heading button:hover {
  color:var(--red)
}

.phrase-output {
  height:94px;
  padding:22px 17px;
  font-size:17px;
  line-height:1.8;
  overflow-wrap:anywhere
}

.placeholder {
  color:#8e887e;
  font-size:12px
}

.typing-cursor {
  display:inline-block;
  width:2px;
  height:20px;
  background:var(--red);
  vertical-align:middle;
  margin-left:3px;
  animation:blink 1.1s steps(1) infinite
}

.keyboard {
  background:#dad7ce;
  padding:13px 11px 9px;
  border-top:1px solid #523c3433
}

.keyboard-brand {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px
}

.keyboard-brand strong {
  font:700 13px Arial;
  letter-spacing:-.6px
}

.keyboard-brand>span {
  font-size:8px;
  color:#817d72
}

.phrase-buttons {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-bottom:9px
}

.phrase-buttons button {
  border:1px solid #523c3420;
  background:#f6f2e9;
  padding:12px 7px;
  box-shadow:0 2px 0 #bbb6a9;
  font-size:9px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:3px;
  transition:background .2s,transform .2s
}

.phrase-buttons button>span {
  color:var(--red)
}

.phrase-buttons button:hover,.phrase-buttons button.is-active {
  background:var(--red);
  color:#fff
}

.phrase-buttons button:hover>span,.phrase-buttons button.is-active>span {
  color:#fff
}

.phrase-buttons button:active {
  transform:translateY(2px)
}

.letter-keys {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:4px
}

.letter-keys span {
  background:#edeae1;
  box-shadow:0 2px 0 #bbb6a9;
  text-align:center;
  padding:8px 0;
  font:10px Arial;
  border-radius:2px
}

.space-row {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
  font-size:12px
}

.space-row>span:nth-child(2) {
  width:70%;
  background:#edeae1;
  font-size:8px;
  text-align:center;
  padding:7px;
  box-shadow:0 2px 0 #bbb6a9;
  border-radius:2px
}

.sites {
  padding-top:83px
}

.directory-layout {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  margin-top:42px
}

.index-symbol {
  font:64px/1 Arial;
  color:var(--red);
  display:block;
  margin-bottom:15px
}

.directory-intro h2 {
  font-size:36px;
  line-height:1.4;
  letter-spacing:-1px
}

.directory-intro>p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-top:20px
}

.wander-button {
  display:flex;
  gap:40px;
  align-items:center;
  font-size:11px;
  border:1px solid var(--ink);
  padding:11px 13px;
  margin-top:27px
}

.wander-button span {
  font:22px Arial
}

.wander-button:hover {
  background:var(--ink);
  color:var(--paper)
}

.directory-intro>.wander-result {
  font-size:10px;
  max-width:210px;
  min-height:38px
}

.site-directory {
  border-top:1px solid var(--ink)
}

.directory-row {
  display:grid;
  grid-template-columns:30px 1fr auto 25px;
  align-items:center;
  gap:16px;
  padding:23px 0;
  border-bottom:1px solid var(--line);
  transition:padding .25s,background .25s
}

.directory-no {
  font:10px var(--mono);
  color:var(--red);
  align-self:start;
  margin-top:6px
}

.directory-row h3 {
  font-size:21px;
  letter-spacing:-.5px;
  font-weight:600
}

.directory-row p {
  color:var(--muted);
  font-size:10px;
  margin-top:7px
}

.directory-type {
  font:8px var(--mono);
  letter-spacing:1px;
  color:var(--muted)
}

.directory-arrow {
  font:26px Arial;
  transition:transform .25s
}

.directory-row:hover,.directory-row.is-picked {
  background:#e8e4d8;
  padding-left:13px;
  padding-right:13px
}

.directory-row:hover .directory-arrow,.directory-row.is-picked .directory-arrow {
  color:var(--red);
  transform:rotate(45deg)
}

.directory-row.is-picked {
  box-shadow:inset 3px 0 var(--red)
}

.contact {
  margin-top:85px;
  background:var(--red);
  color:var(--paper);
  padding-top:34px;
  padding-bottom:34px
}

.contact .section-label {
  color:#f2efe6b0
}

.contact .section-label>span:first-child {
  color:var(--paper)
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr auto;
  gap:45px;
  align-items:center;
  margin:52px 0 60px
}

.contact-prelude {
  font-size:11px;
  color:#f2efe6c4;
  margin-bottom:20px
}

.contact h2 {
  font-size:clamp(36px,4.7vw,61px);
  line-height:1.45;
  letter-spacing:-2px;
  font-weight:700
}

.contact h2 span {
  display:inline-block;
  position:relative
}

.contact h2 span::after {
  content:"";
  position:absolute;
  inset:5px -10px -2px;
  border:1px solid var(--paper);
  border-radius:50%;
  transform:rotate(-9deg)
}

.email-link {
  display:inline-flex;
  gap:38px;
  align-items:center;
  font:15px var(--mono);
  padding:14px 0;
  border-bottom:1px solid #f2efe6a0;
  margin-top:27px
}

.email-link>span {
  font:25px Arial
}

.email-link:hover {
  border-color:var(--paper)
}

.postmark {
  border:1px dashed var(--paper);
  outline:1px solid #f2efe6b3;
  outline-offset:9px;
  width:194px;
  height:235px;
  margin:0 26px 0 0;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  transform:rotate(9deg);
  transition:transform .3s
}

.postmark:hover {
  transform:rotate(0)
}

.postmark span {
  font-size:9px;
  letter-spacing:2px
}

.postmark svg {
  width:120px;
  fill:none;
  stroke:var(--paper);
  stroke-width:1.3
}

.contact-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  border-top:1px solid #f2efe65c;
  padding-top:25px
}

.contact-bottom>p {
  font-size:10px;
  line-height:1.8;
  letter-spacing:1px
}

.social-links {
  display:flex;
  gap:24px;
  font:11px var(--mono)
}

.social-links a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.footer {
  max-width:var(--page);
  margin:auto;
  padding:28px 54px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.footer-brand {
  font:900 35px Arial;
  letter-spacing:-3px
}

.footer-brand>span {
  font:24px Arial;
  color:var(--red);
  position:relative;
  top:-7px;
  left:3px
}

.footer p {
  font:9px var(--mono);
  color:var(--muted);
  letter-spacing:.2px
}

.footer-separator {
  margin:0 9px
}

.footer>a:last-child {
  font-size:10px
}

.footer>a:last-child:hover {
  color:var(--red)
}

@keyframes blink {
  50% {
    opacity:0
  }
}

@media(min-width:1500px) {
  .hero-layout {
    padding-top:35px;
    padding-bottom:55px
  }
  .specimen {
    max-width:545px;
    justify-self:end;
    width:100%
  }
}

@media(max-width:1050px) {
  .site-header {
    padding:25px 32px
  }
  .hero {
    padding:0 32px
  }
  .hero-layout {
    gap:25px
  }
  .section-shell {
    padding-left:32px;
    padding-right:32px
  }
  .hero-copy h1 {
    font-size:8.7vw
  }
  .specimen {
    padding:14px 14px 0
  }
  .disc-mark {
    font-size:90px
  }
  .specimen-controls button {
    font-size:10px
  }
  .specimen-controls button>span {
    display:none
  }
  .specimen-caption {
    font-size:9px
  }
  .about-layout {
    gap:35px;
    grid-template-columns:1fr 2.2fr
  }
  .about-body {
    gap:25px
  }
  .project-info {
    padding-left:32px
  }
  .project-info h3 {
    font-size:43px
  }
  .project-art {
    min-height:465px
  }
  .role-card {
    width:130px;
    height:195px
  }
  .role-back {
    transform:translate(-82px,9px) rotate(-18deg)
  }
  .role-front {
    transform:translate(82px,16px) rotate(17deg)
  }
  .wolf-art.is-day .role-back {
    transform:translate(-85px,-3px) rotate(-13deg)
  }
  .wolf-art.is-day .role-front {
    transform:translate(85px,-9px) rotate(12deg)
  }
  .phrase-demo {
    left:6%;
    right:6%;
    top:100px
  }
  .phrase-output {
    font-size:15px
  }
  .directory-layout {
    gap:35px
  }
  .directory-type {
    display:none
  }
  .directory-row {
    grid-template-columns:25px 1fr 25px
  }
  .footer {
    padding:25px 32px
  }
  .interest-strip {
    gap:20px
  }
  .interest-strip i {
    padding:0 7px
  }
}

@media(max-width:760px) {
  .site-header {
    padding:22px 23px;
    gap:15px
  }
  .brand {
    font-size:12px;
    gap:13px
  }
  .brand-symbol {
    font-size:40px
  }
  .brand-symbol>span {
    font-size:24px;
    top:-11px
  }
  .brand small {
    font-size:8px;
    letter-spacing:.6px
  }
  .main-nav {
    gap:18px;
    font-size:10px
  }
  .header-contact {
    display:none
  }
  .hero {
    padding:0 23px
  }
  .hero-meta {
    font-size:8px;
    letter-spacing:.8px;
    padding:15px 0
  }
  .hero-meta span:last-child {
    font-size:8px;
    letter-spacing:1px
  }
  .hero-layout {
    grid-template-columns:1fr;
    gap:39px;
    padding:28px 0 35px
  }
  .hero-copy h1 {
    font-size:clamp(72px,13vw,99px);
    letter-spacing:-5px;
    line-height:1.16;
    margin:19px 0 23px
  }
  .hero-copy {
    position:relative
  }
  .hero-description {
    font-size:12px
  }
  .hero-link {
    position:absolute;
    right:3px;
    bottom:8px;
    gap:23px;
    font-size:11px
  }
  .sun-character svg {
    width:45px;
    height:45px
  }
  .eyebrow {
    font-size:10px
  }
  .specimen {
    width:85%;
    max-width:430px;
    justify-self:center;
    padding:17px 19px 0;
    transform:rotate(1.5deg)
  }
  .disc-mark {
    font-size:100px
  }
  .specimen-controls button {
    font-size:11px
  }
  .specimen-controls button>span {
    display:inline
  }
  .specimen-caption {
    font-size:10px
  }
  .hero-bottom {
    font-size:9px;
    padding:17px 0;
    letter-spacing:0
  }
  .hero-bottom-center {
    display:none
  }
  .section-shell {
    padding:55px 23px 0
  }
  .section-label {
    font-size:8px;
    letter-spacing:.5px
  }
  .section-label>span:first-child {
    font-size:10px
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:27px;
    padding:35px 0
  }
  .margin-note {
    padding:0;
    display:flex;
    align-items:center;
    gap:20px
  }
  .note-star {
    font-size:42px;
    margin:0
  }
  .margin-note>p {
    font-size:10px;
    line-height:1.7
  }
  .margin-note>p br {
    display:none
  }
  .note-sign {
    margin:0 0 0 auto;
    font-size:9px;
    white-space:nowrap
  }
  .about-copy h2 {
    font-size:36px
  }
  .about-body {
    gap:22px;
    font-size:12px;
    margin-top:24px
  }
  .interest-strip {
    display:block;
    padding:16px 0
  }
  .interest-strip>span:first-child {
    display:block;
    font-size:9px;
    margin-bottom:12px
  }
  .interest-strip p {
    font-size:11px
  }
  .interest-strip>span:last-child {
    display:none
  }
  .interest-strip i {
    padding:0 8px
  }
  .section-heading {
    margin:30px 0;
    gap:12px
  }
  .section-heading h2 {
    font-size:32px;
    letter-spacing:-1px
  }
  .section-heading>p {
    font-size:10px;
    max-width:130px
  }
  .project,.project-phrase {
    grid-template-columns:1fr
  }
  .project-info {
    padding:28px 0 32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:23px
  }
  .project-number {
    grid-column:1/-1;
    font-size:11px
  }
  .project-info h3 {
    font-size:39px;
    grid-column:1;
    grid-row:2/5;
    margin:25px 0 0
  }
  .project-question {
    font-size:11px;
    line-height:1.8;
    margin:25px 0 12px;
    grid-column:2
  }
  .project-description {
    font-size:11px;
    grid-column:2
  }
  .project-tags {
    grid-column:2;
    margin:16px 0 22px;
    gap:5px
  }
  .project-tags li {
    font-size:8px;
    padding:4px 5px
  }
  .project-info .text-link {
    grid-column:2;
    min-width:0;
    font-size:11px;
    gap:15px;
    justify-self:start
  }
  .project-art {
    min-height:450px
  }
  .role-card {
    width:145px;
    height:212px
  }
  .role-back {
    transform:translate(-95px,9px) rotate(-18deg)
  }
  .role-front {
    transform:translate(95px,16px) rotate(17deg)
  }
  .project-phrase {
    margin-top:5px
  }
  .project-phrase .project-art {
    grid-row:1
  }
  .project-phrase .project-info {
    padding:28px 0 32px
  }
  .project-phrase h3 {
    font-size:47px;
    letter-spacing:-3px;
    margin-top:25px
  }
  .phrase-demo {
    left:10%;
    right:10%;
    top:88px
  }
  .phrase-output {
    font-size:17px
  }
  .phrase-buttons button {
    font-size:10px
  }
  .directory-layout {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:30px
  }
  .directory-intro {
    position:relative;
    padding-left:63px
  }
  .index-symbol {
    position:absolute;
    left:0;
    top:3px;
    font-size:49px
  }
  .directory-intro h2 {
    font-size:31px
  }
  .directory-intro>p {
    font-size:11px;
    margin-top:16px
  }
  .wander-button {
    position:absolute;
    right:0;
    top:0;
    gap:16px;
    font-size:10px;
    margin-top:7px
  }
  .directory-intro>.wander-result {
    position:absolute;
    right:0;
    top:51px;
    max-width:120px;
    font-size:9px;
    margin-top:12px
  }
  .directory-row {
    padding:21px 0
  }
  .directory-row h3 {
    font-size:20px
  }
  .directory-type {
    display:block;
    font-size:8px
  }
  .directory-row {
    grid-template-columns:22px 1fr auto 20px;
    gap:12px
  }
  .contact {
    margin-top:55px;
    padding:26px 23px
  }
  .contact-layout {
    margin:35px 0;
    gap:25px
  }
  .contact h2 {
    font-size:37px;
    letter-spacing:-1.5px
  }
  .contact-prelude {
    font-size:9px;
    max-width:240px;
    line-height:1.9
  }
  .postmark {
    width:120px;
    height:157px;
    padding:15px 8px;
    margin-right:9px;
    outline-offset:6px
  }
  .postmark span {
    font-size:7px;
    letter-spacing:.5px
  }
  .postmark svg {
    width:80px
  }
  .email-link {
    font-size:11px;
    gap:15px;
    margin-top:15px
  }
  .contact .section-label>span:last-child {
    font-size:6px
  }
  .social-links {
    font-size:10px;
    gap:16px
  }
  .footer {
    padding:21px 23px;
    gap:10px
  }
  .footer p {
    font-size:8px
  }
  .footer-separator {
    margin:0 4px
  }
  .footer>a:last-child {
    font-size:9px
  }
}

@media(max-width:430px) {
  .main-nav {
    gap:12px;
    font-size:9px
  }
  .brand small {
    letter-spacing:0
  }
  .hero-copy h1 {
    font-size:78px
  }
  .hero-link {
    position:static;
    margin-top:15px;
    gap:40px
  }
  .hero-layout {
    gap:30px
  }
  .specimen {
    width:96%;
    padding:15px 14px 0
  }
  .specimen-top {
    font-size:8px
  }
  .disc-mark {
    font-size:87px
  }
  .disc-label {
    font-size:8px
  }
  .wheel-center>span {
    font-size:41px
  }
  .handwritten {
    font-size:10px
  }
  .about-body {
    grid-template-columns:1fr;
    gap:13px
  }
  .note-sign {
    font-size:8px
  }
  .margin-note {
    gap:13px
  }
  .margin-note>p {
    max-width:127px
  }
  .about-copy h2 {
    font-size:32px
  }
  .interest-strip i {
    padding:0 4px
  }
  .interest-strip p {
    font-size:10px
  }
  .section-heading h2 {
    font-size:29px
  }
  .section-heading>p {
    font-size:9px;
    max-width:107px
  }
  .project-art {
    min-height:397px
  }
  .wolf-table {
    inset:55px 0 95px
  }
  .role-card {
    width:123px;
    height:184px;
    padding:17px 15px
  }
  .role-main svg {
    height:110px
  }
  .role-back {
    transform:translate(-79px,9px) rotate(-18deg)
  }
  .role-front {
    transform:translate(79px,16px) rotate(17deg)
  }
  .wolf-art.is-day .role-back {
    transform:translate(-80px,-3px) rotate(-13deg)
  }
  .wolf-art.is-day .role-front {
    transform:translate(80px,-9px) rotate(12deg)
  }
  .role-card>small {
    font-size:7px;
    letter-spacing:1px
  }
  .role-card>span {
    font-size:10px
  }
  .eye-symbol,.villager-symbol {
    font-size:75px
  }
  .art-meta {
    inset:19px 17px auto;
    font-size:7px;
    letter-spacing:.5px
  }
  .project-info {
    column-gap:18px;
    grid-template-columns:.8fr 1.2fr
  }
  .project-info h3 {
    font-size:33px
  }
  .project-phrase h3 {
    font-size:40px
  }
  .project-question {
    font-size:10px
  }
  .project-number>span {
    font-size:9px
  }
  .project-description {
    font-size:11px
  }
  .project-tags {
    gap:4px
  }
  .project-tags li {
    font-size:7px
  }
  .phrase-demo {
    left:6%;
    right:6%;
    top:72px
  }
  .phrase-output {
    font-size:14px;
    height:82px
  }
  .demo-heading {
    font-size:8px;
    padding:11px
  }
  .phrase-buttons button {
    font-size:9px;
    padding:12px 6px
  }
  .keyboard {
    padding:11px 9px 8px
  }
  .phrase-art .art-footnote {
    font-size:9px;
    bottom:20px
  }
  .directory-intro {
    padding-left:52px
  }
  .directory-intro h2 {
    font-size:29px
  }
  .directory-intro>p {
    font-size:10px
  }
  .wander-button {
    gap:10px;
    padding:9px;
    font-size:9px
  }
  .directory-intro>.wander-result {
    max-width:101px;
    font-size:8px
  }
  .directory-type {
    display:none
  }
  .directory-row {
    grid-template-columns:22px 1fr 20px
  }
  .directory-row p {
    font-size:9px
  }
  .contact-layout {
    grid-template-columns:1fr;
    position:relative
  }
  .contact h2 {
    font-size:36px
  }
  .postmark {
    position:absolute;
    right:5px;
    top:0;
    width:74px;
    height:89px;
    padding:9px 4px;
    outline-offset:4px;
    transform:rotate(10deg)
  }
  .postmark svg {
    width:44px
  }
  .postmark span {
    font-size:5px;
    letter-spacing:0
  }
  .contact-prelude {
    max-width:220px;
    padding-right:30px
  }
  .contact-bottom {
    align-items:flex-start
  }
  .social-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 15px;
    font-size:9px
  }
  .footer-brand {
    font-size:28px
  }
  .footer-brand>span {
    font-size:18px
  }
  .footer p {
    max-width:180px;
    line-height:1.8;
    text-align:center
  }
  .footer>a:last-child {
    font-size:8px;
    white-space:nowrap
  }
}

@media(max-width:760px) {
  .phase-control button,.specimen-controls button {
    min-height:44px
  }
  .phrase-buttons button {
    min-height:44px
  }
  .demo-heading button {
    min-height:32px;
    padding:5px
  }
  .project-description,.about-body {
    font-size:13px
  }
  .directory-row p {
    font-size:11px
  }
  .directory-intro>p {
    font-size:12px
  }
  .contact-bottom>p {
    font-size:11px
  }
  .social-links a {
    padding:5px 0
  }
  .section-heading {
    display:block
  }
  .section-heading>p {
    max-width:none;
    font-size:12px;
    margin-top:18px
  }
  .section-heading>p br {
    display:none
  }
  .section-heading h2 {
    font-size:32px
  }
  .hero-link:hover {
    gap:23px
  }
}

@media(max-width:430px) {
  .brand small {
    display:none
  }
  .main-nav {
    font-size:9px;
    gap:10px
  }
  .hero-copy h1 {
    font-size:clamp(62px,20vw,78px)
  }
  .project-info {
    display:flex;
    align-items:flex-start;
    padding-bottom:35px
  }
  .project-info h3 {
    font-size:40px;
    line-height:1.25;
    margin:22px 0 18px
  }
  .project-phrase h3 {
    font-size:52px;
    margin:22px 0 18px
  }
  .project-question {
    font-size:12px;
    margin:0 0 12px
  }
  .project-description {
    font-size:13px;
    max-width:none
  }
  .project-tags {
    margin:17px 0
  }
  .project-tags li {
    font-size:10px;
    padding:5px 8px
  }
  .project-info .text-link {
    min-width:180px;
    font-size:12px
  }
  .directory-intro>p {
    font-size:11px
  }
  .directory-intro>.wander-result {
    font-size:9px
  }
  .section-heading h2 {
    font-size:30px
  }
  .phrase-art {
    min-height:420px
  }
  .contact h2 {
    font-size:clamp(28px,9.2vw,36px)
  }
}

@media(max-width:430px) {
  .wander-button {
    position:static;
    margin-top:20px;
    min-height:44px;
    gap:25px
  }
  .directory-intro>.wander-result {
    position:static;
    max-width:none;
    margin-top:12px;
    font-size:10px;
    min-height:0
  }
  .main-nav a {
    white-space:nowrap
  }
}

@media(max-width:360px) {
  .site-header {
    padding:22px 18px;
    gap:8px
  }
  .brand {
    font-size:11px;
    gap:8px
  }
  .brand-symbol {
    font-size:32px
  }
  .brand-symbol>span {
    font-size:21px;
    top:-8px
  }
  .main-nav {
    gap:9px;
    font-size:8px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}