:root {
  --u: min(1vw, 1.6vh);
  --stage-w: min(100vw, 160vh);
  --knot-w: clamp(60px, calc(var(--stage-w) * 0.16), 264px);
  --knot-tile: calc(var(--knot-w) * 3.755);
  --knot-repeats: 2;
  --bg-outer: #686868;
  --frame-top: #e8e8e8;
  --frame-bottom: #949494;
  --ink: #101010;
  --acid: #e6ff78;
}

* { box-sizing: border-box; }

@font-face {
  font-family: "Geist Pixel";
  src: url("assets/GeistPixel-Regular-VariableFont_ELSH.ttf") format("truetype-variations"),
       url("assets/GeistPixel-Regular-VariableFont_ELSH.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

.title {
	position: absolute;
	left: 35%;
	top: 28%;
	z-index: 6;
	font-size: calc(var(--u) * 3);
}

.pixel-heading {
	font-family: "Geist Pixel", monospace;
}

p {
	font-family: "Geist Pixel", monospace;
}

html, body {
  margin: 0;
}

body {
  position: relative;
  min-height: 100dvh;
  background: var(--bg-outer);
  color: var(--ink);
  font-family: Verdana, Geneva, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;
  overflow-x: hidden;
}

.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;
}

.stage {
  position: relative;
  width: min(100vw, 160vh);
  height: min(62.5vw, 100vh);
  flex: none;
}

.knot-rail {
  position: absolute;
  top: 0;
  left: 53%;
  transform: translateX(-50%);
  width: var(--stage-w);
  height: max(100dvh, calc(var(--knot-tile) * var(--knot-repeats)));
  z-index: 3;
  pointer-events: none;
}

.knot-rail::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--knot-w);
  height: 100%;
  background-image: url("assets/knotwork-column-cropped.png");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

body:has(.knot-rail) {
  min-height: max(100dvh, calc(var(--knot-tile) * var(--knot-repeats)));
  justify-content: flex-start;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   The framed panel
   -------------------------------------------------------------------------- */

.frame {
  position: absolute;
  left: 7.2%;
  top: 18.1%;
  width: 73.1%;
  height: 70.1%;
  z-index: 1;
  border: calc(var(--u) * 0.24) solid #0a0a0a;
  background: linear-gradient(180deg, var(--frame-top) 0%, #cfcfcf 42%, #b0b0b0 68%, var(--frame-bottom) 100%);
  box-shadow:
    0 calc(var(--u) * 0.6) calc(var(--u) * 2.2) rgba(0, 0, 0, 0.28),
    inset 0 0 calc(var(--u) * 6) rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------------
   Chrome stars
   -------------------------------------------------------------------------- */

.star {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: rotate(var(--rot)) scale(var(--sx), var(--sy)) rotate(var(--spin));
  filter: drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35));
  --rot: -9.5deg;
  --spin: 0deg;
}

.star--big {
  left: 40.55%;
  top: -5.52%;
  width: 31.25%;
  --spin: 344deg;
  --sx: 2.54;
  --sy: 0.364;
}

.star--small {
  left: 71.56%;
  top: 16.09%;
  width: 12.5%;
  --spin: 0deg;
  --sx: 2.606;
  --sy: 0.621;
}

/* --------------------------------------------------------------------------
   Graffiti navigation
   -------------------------------------------------------------------------- */

.nav-item {
  position: absolute;
  z-index: 5;
  display: block;
  transform-origin: 20% 60%;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}

.nav-item img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.nav-item__alt {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.nav-item:hover .nav-item__alt,
.nav-item:focus-visible .nav-item__alt {
  opacity: 1;
}

.nav-item:hover,
.nav-item:focus-visible {
  outline: none;
  filter:
    contrast(1.12);
}

.nav-item--about   { left: 0.72%; top: 9.68%; width: 24.6%; }
.nav-item--blog    { left: -0.5%; top: 29%; width: 29.0%; }
.nav-item--reviews { left: -0.7%; top: 49%; width: 39.4%; }
.nav-item--links   { left: 2.3%;  top: 70%; width: 28.2%; }

.nav-item--about:hover,
.nav-item--about:focus-visible   { transform: rotate(-2.2deg) scale(1.07); }
.nav-item--blog:hover,
.nav-item--blog:focus-visible    { transform: rotate(1.8deg)  scale(1.07); }
.nav-item--reviews:hover,
.nav-item--reviews:focus-visible { transform: rotate(-1.4deg) scale(1.06); }
.nav-item--links:hover,
.nav-item--links:focus-visible   { transform: rotate(2.4deg)  scale(1.08); }

.nav-item:active { transform: scale(0.98) rotate(0deg); }

@keyframes nav-jitter {
  0%   { translate: 0 0; }
}

/* --------------------------------------------------------------------------
   Font test box
   Sits in the gap between the REVIEWS tag and the samurai. If the two sample
   lines below look identical, Geist Pixel did not load and you are seeing the
   monospace fallback in both.
   -------------------------------------------------------------------------- */

.fonttest {
  position: absolute;
  left: 40.5%;
  top: 54.5%;
  width: 19%;
  z-index: 6;
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1);
  border: calc(var(--u) * 0.18) solid #0a0a0a;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: calc(var(--u) * 0.25) calc(var(--u) * 0.35) 0 rgba(0, 0, 0, 0.35);
}

.fonttest p {
  margin: 0 0 calc(var(--u) * 0.55);
  font-size: calc(var(--u) * 0.92);
  line-height: 1.55;
}

.fonttest p:last-child { margin-bottom: 0; }

.fonttest .label {
  font-family: Verdana, Geneva, sans-serif;
  font-size: calc(var(--u) * 0.62);
  letter-spacing: calc(var(--u) * 0.06);
  text-transform: uppercase;
  opacity: 0.6;
}

/* ELSH (0-100) thins the strokes toward the middle of its range and fills them
   back in at either end, so 50 is the value that visibly differs from the
   default 0. If this line looks lighter than the one above, variable-axis
   support is working too. */
.fonttest .elsh { font-variation-settings: "ELSH" 50; }

/* The control: deliberately never Geist Pixel. */
.fonttest .fallback { font-family: monospace; }

/* --------------------------------------------------------------------------
   Samurai
   -------------------------------------------------------------------------- */

.samurai {
  position: absolute;
  left: 60.85%;
  top: 48.25%;
  width: 26.2%;
  z-index: 6;
  transform-origin: 50% 10%;
}

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

.page .frame {
  overflow: hidden;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3);
}

.panel {
  position: absolute;
  left: 7.2%;
  top: 18.1%;
  width: 73.1%;
  height: 70.1%;
  z-index: 4;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3.2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel h2 {
  margin: 0 0 calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 3.2);
  letter-spacing: calc(var(--u) * 0.12);
  text-transform: lowercase;
}

.panel h3 {
  margin: calc(var(--u) * 2.2) 0 calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 1.7);
}

.panel p,
.panel li {
  font-size: calc(var(--u) * 1.25);
  line-height: 1.7;
  max-width: 62ch;
}

.panel a { color: #1a1a1a; }

.panel hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  margin: calc(var(--u) * 2) 0;
}

.entry {
  border-left: calc(var(--u) * 0.3) solid rgba(0, 0, 0, 0.6);
  padding-left: calc(var(--u) * 1.2);
  margin-bottom: calc(var(--u) * 2.4);
}

.entry .meta {
  font-size: calc(var(--u) * 1);
  opacity: 0.65;
  margin: 0 0 calc(var(--u) * 0.4);
}

.stub {
  font-style: italic;
  opacity: 0.7;
}

/* 16:9 box for embeds; drop an iframe straight in and it fills. */
.embed {
  position: relative;
  width: min(100%, calc(var(--u) * 42));
  aspect-ratio: 16 / 9;
  margin-top: calc(var(--u) * 1);
  border: 1px dashed rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 1.1);
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  margin: calc(var(--u) * 1.2) 0;
}

.wall img {
  display: block;
  width: calc(var(--u) * 8.8);
  height: auto;
  image-rendering: pixelated;
}

.wall .slot {
  width: calc(var(--u) * 8.8);
  height: calc(var(--u) * 3.1);
  border: 1px dashed rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 0.85);
}

.snippet {
  font-size: calc(var(--u) * 1);
  background: rgba(0, 0, 0, 0.07);
  border-left: calc(var(--u) * 0.3) solid rgba(0, 0, 0, 0.5);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1);
  overflow-x: auto;
}

/* Back tag sits where ABOUT does on the home page. */
.back {
  position: absolute;
  left: 1.6%;
  top: 9.8%;
  width: 11%;
  z-index: 5;
  display: block;
  transform-origin: 20% 60%;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(calc(var(--u) * 0.25) calc(var(--u) * 0.4) calc(var(--u) * 0.7) rgba(0, 0, 0, 0.4));
}

.back img {
  display: block;
  width: 100%;
  height: auto;
}

.back:hover,
.back:focus-visible {
  outline: none;
  transform: rotate(-2.2deg) scale(1.07);
}

/* Interior pages pull the furniture back so the text has room. */
.page .samurai {
  left: 68%;
  top: 55%;
  width: 20%;
}

.page .star--big { top: -17.9%; }
.page .star--small { display: none; }

/* --------------------------------------------------------------------------
   Small screens: let the page scroll rather than crushing the stage.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --u: min(1.6vw, 1.6vh); }

  .stage {
    width: 100vw;
    height: 62.5vw;
    min-height: 480px;
  }
}