@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-symbols.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

/* wolo.digital neutral ramp — dark only, strictly black & white */
:root {
  --bg: #0a0a0a;
  --text: #ededed;
  --text-2: #a3a3a3;
  --muted: #767676;
  --line: #1e1e1e;
  --surface: #141414;
  --indent: 1.5rem;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
::selection { background: var(--text); color: var(--bg); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
:focus { outline: none; }
:focus-visible { outline: 1px dashed var(--muted); outline-offset: 3px; }

.ascii-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* quieter behind the text column */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 360px), rgba(0, 0, 0, .3) calc(50% - 280px), rgba(0, 0, 0, .3) calc(50% + 280px), #000 calc(50% + 360px));
  mask-image: linear-gradient(90deg, #000 calc(50% - 360px), rgba(0, 0, 0, .3) calc(50% - 280px), rgba(0, 0, 0, .3) calc(50% + 280px), #000 calc(50% + 360px));
}

.wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(3.5rem, 15vh, 8.5rem) 1rem 2rem;
}
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }

/* ── header ─────────────────────────────────────── */
.prompt {
  min-height: 1.5em;
  font-size: .8125rem;
  color: var(--muted);
}
.prompt .sign { color: var(--text); }

h1 {
  margin-top: .5rem;
  min-height: 1.1em;
  font-size: clamp(2.1rem, 8.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.cursor {
  display: inline-block;
  width: .55em;
  height: .95em;
  margin-left: .1em;
  background: var(--text);
  vertical-align: baseline;
  transform: translateY(.13em);
  animation: blink 1.1s steps(1) infinite;
}
.cursor.typing { animation: none; }
.prompt .cursor { margin-left: .05em; }
@keyframes blink { 50% { opacity: 0; } }

.tagline {
  margin-top: .75rem;
  font-size: .875rem;
  color: var(--text-2);
}
.slash { color: var(--text); }
.tagline .seg { white-space: nowrap; }

.status {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .65rem;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.status[hidden] { display: none; }
.dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
  flex: none;
}
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--text);
  animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
#status + #clock:not(:empty)::before { content: "· "; }

/* ── reveal after typing ────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.ready .reveal { opacity: 1; transform: none; }

/* ── accordion ──────────────────────────────────── */
nav { margin-top: 2.5rem; }
.item { border-bottom: 1px solid var(--line); }
.item > button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .9rem 0;
}
.arrow {
  flex: none;
  width: var(--indent);
  font-size: .875rem;
  user-select: none;
}
.arrow > span { display: inline-block; transition: transform .2s; }
.item[data-open] .arrow > span { transform: rotate(90deg); }
.label {
  padding: .05em .3em;
  margin-left: -.3em;
  font-size: 1rem;
  transition: background-color .12s, color .12s;
}
.item > button:hover .label,
.item > button:focus-visible .label { background: var(--text); color: var(--bg); }
.item > button:focus-visible { outline: none; }
.hint {
  display: none;
  margin-left: auto;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 640px) { .hint { display: inline; } }

.panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s cubic-bezier(.2, .7, .2, 1);
}
.item[data-open] .panel { grid-template-rows: 1fr; }
.panel > div { overflow: hidden; min-height: 0; }
.panel-body {
  padding: 0 0 1.5rem var(--indent);
  opacity: 0;
  transition: opacity .2s;
}
.item[data-open] .panel-body { opacity: 1; transition-delay: .05s; }

.desc {
  max-width: 52ch;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-2);
}

/* links  ❯ text ↗ */
.actions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: 1.1rem; }
.go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  text-decoration: none;
}
.go .out { color: var(--muted); transition: transform .15s, color .15s; }
.go:hover .txt { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.go:hover .out { transform: translate(2px, -2px); color: var(--text); }

/* small uppercase chip, wolo-style label */
.chip {
  display: inline-block;
  padding: .15em .45em;
  border: 1px solid var(--line);
  font-size: .625rem;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── works ──────────────────────────────────────── */
.stage {
  position: relative;
  margin: .25rem 0 0 calc(var(--indent) * -1);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.stage video,
.stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.stage video { object-fit: contain; }
.stage iframe.vertical {
  left: 50%;
  width: auto;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
}

.static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.vf { position: absolute; inset: 0; pointer-events: none; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.vf .c { position: absolute; width: 12px; height: 12px; border-color: var(--text); border-style: solid; border-width: 0; }
.vf .c1 { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.vf .c2 { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.vf .c3 { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.vf .c4 { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }
.vf .tl, .vf .tr, .vf .bl, .vf .br { position: absolute; padding: 0 .3em; background: var(--surface); }
.vf .tl { top: 14px; left: 28px; }
.vf .tr { top: 14px; right: 28px; }
.vf .bl { bottom: 14px; left: 28px; }
.vf .br { bottom: 14px; right: 28px; font-variant-numeric: tabular-nums; }
.stage .ov { transition: opacity .25s; }
.stage.playing .ov { opacity: 0; }
.vf [hidden] { display: none; }
.vf .rec::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .5em; border: 1px solid currentColor; border-radius: 50%; vertical-align: .05em; }
.vf .mid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .55rem .8rem;
  background: var(--bg);
  border: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}
.vf .mid b { display: block; font-weight: 500; font-size: .75rem; letter-spacing: .22em; color: var(--text); }
.vf .mid span { display: block; margin-top: .3rem; letter-spacing: .06em; text-transform: none; color: var(--muted); }
@media (max-width: 420px) { .vf .tr, .vf .bl { display: none; } }

.now {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: .6rem 0 0 calc(var(--indent) * -1);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.now b { font-weight: 400; color: var(--text); }

.reel { margin-top: 1.1rem; list-style: none; }
.reel button {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 1.25ch;
  width: 100%;
  padding: .38rem 0;
  font-size: .8125rem;
  color: var(--text-2);
}
.reel .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.reel .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel .t > span { padding: .05em .3em; margin-left: -.3em; transition: background-color .12s, color .12s; }
.reel .m { color: var(--muted); font-size: .75rem; }
.reel .d { min-width: 5ch; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.reel .empty .t { color: var(--muted); }
.reel button:hover .t > span,
.reel button:focus-visible .t > span { background: var(--text); color: var(--bg); }
.reel button:focus-visible { outline: none; }
.reel button[aria-current="true"] { color: var(--text); }
.reel button[aria-current="true"] .n { color: var(--text); }
@media (max-width: 480px) { .reel .m { display: none; } .reel button { grid-template-columns: 3ch minmax(0, 1fr) auto; } }

/* ── experience / plugins / contact rows ────────── */
.rows { display: flex; flex-direction: column; gap: .8rem; margin-top: .2rem; font-size: .8125rem; line-height: 1.5; }
.rows .row { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 1.5ch; }
.rows .k { color: var(--muted); }
.rows .v a { text-decoration: none; }
.rows .v a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.rows .v a .out { color: var(--muted); }
.rows .note { display: block; color: var(--muted); }
.tools { gap: .45rem; }
.tools .row { grid-template-columns: 16ch minmax(0, 1fr); }
.tools .k { color: var(--muted); }
.articles .v > a { text-decoration: none; }
.articles .v > a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.articles .note a { text-decoration: none; color: var(--muted); }
.articles .note a:hover { color: var(--text); }

.plugins { margin-top: 1rem; }
.plugins .row { grid-template-columns: 10ch minmax(0, 1fr) auto; align-items: baseline; }
.chips { display: inline-flex; gap: .3rem; }
.plugins .soon { color: var(--muted); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }

.contacts { gap: .45rem; margin-top: 1rem; }
.contacts .row { grid-template-columns: 11ch minmax(0, 1fr) auto; align-items: baseline; }
.contacts .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy {
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .15s;
}
.copy:hover, .copy.done { color: var(--text); }

/* ── article reader: a terminal window over the site ── */
html.reading { overflow: hidden; }
.reader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vh, 3rem) 1rem;
  background: rgba(0, 0, 0, .58); /* the page stays visible, just dimmed */
  opacity: 0;
  transition: opacity .2s ease-out;
}
.reader[hidden] { display: none; }
.reader.in { opacity: 1; }
.reader-win {
  --dx: 0px;
  --dy: 0px;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(860px, 100%);
  min-width: 340px;
  min-height: 260px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 30px 90px rgba(0, 0, 0, .8);
  transform: translate(var(--dx), var(--dy)) scale(.94);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1.05), opacity .18s ease-out, border-radius .25s;
}
.reader.in .reader-win { transform: translate(var(--dx), var(--dy)); opacity: 1; }
.reader-win.dragging { transition: none; user-select: none; }
.reader.maxed { padding: 0 !important; }
.reader-win.max { width: 100% !important; height: 100% !important; --dx: 0px !important; --dy: 0px !important; border-radius: 0 !important; border: 0; }
@media (min-width: 641px) and (pointer: fine) {
  .reader-win { resize: both; } /* drag the corner like an app window */
  .reader-win.max { resize: none; }
}

.term-bar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  background: #141414;
  border-bottom: 1px solid #262626;
  cursor: default;
  user-select: none;
}
@media (min-width: 641px) and (pointer: fine) { .term-bar { cursor: grab; } .dragging .term-bar { cursor: grabbing; } }
.lights { position: relative; z-index: 1; display: flex; gap: 8px; }
.light {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3d3d3d;
  border: 1px solid #4a4a4a;
  color: transparent;
  font-size: 10px;
  line-height: 1;
  transition: background-color .12s, color .12s;
}
.light.close { background: #d6d6d6; border-color: #ededed; }
.lights:hover .light { color: #0a0a0a; }
.lights:hover .light:not(.close) { background: #8a8a8a; border-color: #9a9a9a; }
.term-title {
  position: absolute;
  inset: 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.reader-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem clamp(1rem, 5vw, 2.75rem) 2rem; outline: none; }
.term-cmd { font-size: .8125rem; color: var(--text-2); }
.term-cmd .ps { color: var(--muted); }
.term-cmd .cursor { width: .55em; height: 1em; margin-left: .05em; }
.term-err { margin-top: .75rem; font-size: .8125rem; color: var(--text-2); }
.term-out { animation: term-in .35s ease-out both; }
@keyframes term-in { from { opacity: 0; transform: translateY(4px); } }
.reader-body h1 { margin-top: 1.5rem; font-size: clamp(1.5rem, 4.6vw, 2.2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance; }
.reader-body .meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5ch; margin-top: .9rem; font-size: .75rem; letter-spacing: .04em; color: var(--muted); }
.reader-body .meta span::before { content: "· "; }
.reader-body .meta a { text-decoration: none; color: var(--text-2); }
.reader-body .meta a:hover { color: var(--text); }
.reader-body .cover { display: block; width: 100%; height: auto; margin-top: 1.75rem; border: 1px solid var(--line); }
.reader-body .prose { margin-top: 2rem; }
.reader-end { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8125rem; }
.reader-end .eof { display: inline-block; padding: 0 .5ch; background: var(--text); color: var(--bg); }
.reader-end .links { display: flex; flex-wrap: wrap; gap: .6rem 2.5ch; margin-top: 1rem; }
.reader-end .links a { text-decoration: none; color: var(--text-2); }
.reader-end .links a:hover, .reader-end .links button:hover { color: var(--text); }
.reader-end .links button, .reader .retry { color: var(--text-2); }
.reader-end .term-cmd { margin-top: 1.25rem; }

.term-status {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2ch;
  height: 30px;
  padding: 0 12px;
  background: #141414;
  border-top: 1px solid #262626;
  font-size: .6875rem;
  color: var(--muted);
  white-space: nowrap;
}
.term-status .fname { overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.term-status .pos { font-variant-numeric: tabular-nums; }
.term-status .grow { flex: 1; }
.term-status button { color: var(--muted); transition: color .12s; }
.term-status button:hover { color: var(--text); }

.reader-dock {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 49;
  display: inline-flex;
  align-items: center;
  gap: 1ch;
  padding: .45rem .9rem;
  background: #141414;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  font-size: .75rem;
  color: var(--text);
  transform: translateX(-50%);
}
.reader-dock .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.reader-dock:hover { border-color: var(--muted); }

@media (max-width: 640px) {
  /* phone: the terminal slides up as a sheet; the dimmed page shows above it */
  .reader { align-items: flex-end; padding: min(24vh, 13rem) .5rem 0; }
  .reader-win { width: 100%; height: 100%; min-width: 0; border-bottom: 0; border-radius: 12px 12px 0 0; transform: translateY(48px); }
  .reader.in .reader-win { transform: none; }
  .term-status .grow, .term-status .pos { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .reader { padding: .5rem; align-items: center; }
  .reader-win { height: 100%; border-radius: 10px; }
}

/* ── footer ─────────────────────────────────────── */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 3.5rem;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.foot-right { display: flex; align-items: center; gap: 1.25rem; }
.kbd-hint { display: none; }
@media (min-width: 640px) and (hover: hover) { .kbd-hint { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}