/* Personal site v1 (2026-10-15). Same look as the Revea product page (white, Geist 300 display, v2 photo cards), but
   the small mono text is no longer decor: it appears only where it carries a value (live Reveal Progress, blur
   radius, case facts such as year and role). Layout: one long page (Works, Plug-ins, About); a project opens into a
   full-screen case view on top of it, addressed by #work-<id>.
   Light by default; dark follows the system or the theme button (data-theme on <html>, saved in localStorage
   "theme"; user 2026-10-15). Photo cards stay dark in both themes. */
:root {
  --paper: #ffffff;
  --shell: #ffffff;   /* hero card frame */
  --ink: #0e0e0f;     /* headings, CTA */
  --body: #4a4b4f;    /* running text */
  --muted: #8a8b90;   /* mono values, captions */
  --rule: #e6e6e8;
  --photo: #0c0a09;   /* ground under photos and the portrait */
  --on-dark: #ffffff; --on-dark-soft: rgba(255,255,255,.66);
  --shadow: none;   /* flat (user 2026-10-15): no shadows anywhere, nothing lifts */
  --revea: linear-gradient(100deg, #0d0d0e 4%, #123f42 17%, #2c9894 26%, #7fae9f 35%, #b8c9ad 44%, #f1e7cf 51%, #f3c193 60%, #cf6d24 71%, #5a2a14 82%, #151012 94%);
  --max: 1360px;     /* content column */
  --gutter: clamp(16px, 4vw, 56px);   /* page side padding, grows with the window */
  /* Type (2026-10-15): one grotesque on EN and RU (Geist Cyrillic was thin and uneven at 300), Geist Mono for values.
     Serif headings were tried and rejected. Display tracking is relaxed at the end of this file. */
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --display: "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
/* Dark: warm near-black from the portrait backdrop; ink and CTA flip to light. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0d0c0b; --shell: #1a1816; --ink: #f2f0ec; --body: #b3b0aa; --muted: #7d7a75; --rule: #2a2724; --photo: #000000; color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #0d0c0b; --shell: #1a1816; --ink: #f2f0ec; --body: #b3b0aa; --muted: #7d7a75; --rule: #2a2724; --photo: #000000; color-scheme: dark; }
body { transition: background-color .3s ease, color .3s ease; }
.theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -6px -6px 4px; border: 0; border-radius: 9999px;
  background: transparent; color: var(--body); cursor: pointer; }
.theme:hover { color: var(--ink); background: var(--rule); }
.theme svg { width: 17px; height: 17px; }

html, body { min-height: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; padding-inline: var(--gutter); padding-block: 0 72px;
  box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
.wrap { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(112px, 12vw, 176px); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Top bar */
/* Solid bar: a translucent one left a pale band across the cards scrolling under it (user 2026-10-15). */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); margin-inline: calc(-1 * var(--gutter)); padding: 20px var(--gutter);
  box-shadow: 0 1px 0 var(--rule); }
.topbar .in { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.name { font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; }
nav { display: flex; align-items: center; gap: 32px; }
nav a { font-size: 16px; color: var(--body); text-decoration: none; }
nav a:hover { color: var(--ink); }

/* Intro */
.intro { display: flex; flex-direction: column; gap: 36px; padding-top: clamp(80px, 9vw, 140px); }
h1 { font-weight: 300; font-size: clamp(44px, 8vw, 112px); line-height: .96; letter-spacing: -.05em; margin: 0; text-wrap: balance; max-width: 12ch; }
.lede { margin: 0; color: var(--body); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; max-width: 46ch; }

/* Section heads */
.sec { display: flex; flex-direction: column; gap: clamp(40px, 4.5vw, 64px); scroll-margin-top: 80px; }
.sh { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-top: 1px solid var(--ink); padding-top: 18px; }
h2 { font-weight: 300; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.04em; line-height: 1; margin: 0; }
.sh p { margin: 0; color: var(--body); font-size: 17px; max-width: 38ch; text-align: right; }

/* Works grid */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); }
.work { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--photo); color: var(--on-dark);
  text-decoration: none; box-shadow: var(--shadow); isolation: isolate; transition: transform .25s ease; cursor: pointer; border: 0; padding: 0; font: inherit; text-align: left; width: 100%; }
.work.wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.work:hover .cover { opacity: .86; }
.cover { position: absolute; inset: 0; }
.cover img, .cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Work placeholder (user 2026-10-15: tech minimal instead of the Revea gradient): fine drawing grid, a crosshair
   at the centre, corner ticks and a mono "In development" tag. */
.cover.ph { --g: rgba(255,255,255,.055); --g2: rgba(255,255,255,.11); background-color: #111113;
  background-image: linear-gradient(var(--g2) 1px, transparent 1px), linear-gradient(90deg, var(--g2) 1px, transparent 1px),
    linear-gradient(var(--g) 1px, transparent 1px), linear-gradient(90deg, var(--g) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: center; }
.cover.ph::before { content: ""; position: absolute; inset: 14px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 0 0 / 14px 1px no-repeat, linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 0 0 / 1px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 100% 0 / 14px 1px no-repeat, linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 0 100% / 14px 1px no-repeat, linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 0 100% / 1px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 100% 100% / 14px 1px no-repeat, linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 100% 100% / 1px 14px no-repeat; }
.ph-x { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; translate: -50% -50%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.ph-x::before, .ph-x::after { content: ""; position: absolute; background: rgba(255,255,255,.55); }
.ph-x::before { left: 50%; top: -14px; bottom: -14px; width: 1px; }
.ph-x::after { top: 50%; left: -14px; right: -14px; height: 1px; }
.ph-tag { position: absolute; top: 30px; left: 34px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.ph-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f3c193; animation: ph-blink 1.6s ease-in-out infinite; }
@keyframes ph-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cover.ph::before { content: none; }   /* placeholder: plain drawing grid only (no tag, crosshair, corner ticks; user 2026-10-15) */ }
.work::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 32%, rgba(0,0,0,0) 60%); }
.work .cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.4vw, 28px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.work h3 { font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -.025em; margin: 0; }
.work .cap p { margin: 8px 0 0; color: var(--on-dark-soft); font-size: 16px; }
.work .mono { color: var(--on-dark-soft); flex: none; }

/* Plug-ins: Revea product */
.prod { display: flex; flex-direction: column; gap: clamp(96px, 10vw, 160px); }
.prod .ph-head { margin-bottom: clamp(-72px, -4vw, -32px); }   /* the head stays close to its hero */
.ph-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.ph-head h1 { font-weight: 300; font-size: clamp(64px, 11vw, 150px); line-height: .9; letter-spacing: -.06em; margin: 0; max-width: none; }
.ph-head h1 span { display: block; margin-top: 18px; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.03em; color: var(--body); text-wrap: balance; }

/* Plug-in page */
.page { gap: 64px; }
.crumb { display: flex; gap: 10px; padding-top: 48px; margin-bottom: -24px; font-size: 15px; color: var(--muted); }
.crumb a { color: var(--body); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
nav a[aria-current] { color: var(--ink); }
.sh .more { font-size: 17px; color: var(--body); text-decoration: none; white-space: nowrap; }
.sh .more:hover { color: var(--ink); }

/* Plug-in bento: 6 columns; a tile spans 2-6 columns and 1-2 rows (size classes below). With one plug-in it is
   one large tile and the in-development tile; more plug-ins drop in as more tiles. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 22vw, 340px); gap: clamp(20px, 2vw, 32px); }
.pl { position: relative; display: block; border-radius: 22px; overflow: hidden; background: var(--photo); color: var(--on-dark); text-decoration: none;
  box-shadow: var(--shadow); isolation: isolate; transition: transform .25s ease; }
a.pl:hover .media { opacity: .86; }
.pl-l { grid-column: span 4; grid-row: span 2; }
.pl-m { grid-column: span 3; grid-row: span 2; }
.pl-s { grid-column: span 2; grid-row: span 2; }
.pl-w { grid-column: span 6; grid-row: span 2; }
.pl-sq { grid-column: span 2; grid-row: span 1; }
.pl .media { position: absolute; inset: 0; }
.pl .media img, .pl .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 34%, rgba(0,0,0,0) 62%); }
.pl .cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.4vw, 28px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pl h3 { font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -.03em; margin: 0; }
.pl .cap p { margin: 10px 0 0; color: var(--on-dark-soft); font-size: 17px; max-width: 40ch; }
.pl .go { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 9999px; background: var(--on-dark); color: var(--ink); font-size: 15px; font-weight: 500; }
.pl.soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.pl.soon::after { content: none; }
.pl.soon .cap p { color: var(--body); }
.ph-head .lede { grid-column: 1; }
.acts { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pname { font-size: 15px; font-weight: 500; }
.cta { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 9999px; background: var(--ink); color: var(--paper);
  font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; }
.cta.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent); }
.cta.off { color: var(--muted); cursor: default; }

.hero { position: relative; display: block; color: inherit; text-decoration: none; transition: transform .2s ease; background: var(--shell); border-radius: 32px; padding: 12px; box-shadow: var(--shadow); }
.hero:hover .tile { opacity: .92; }
.hero .tile { aspect-ratio: 16 / 9; border-radius: 24px; }
.hero .cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: clamp(18px, 3vw, 32px); }
.hero h4 { font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); margin: 0; letter-spacing: -.02em; }
.hero .cap p { margin: 6px 0 0; color: var(--on-dark-soft); font-size: 16px; max-width: 52ch; }
.val { position: absolute; z-index: 3; right: clamp(18px, 3vw, 32px); top: clamp(16px, 2.6vw, 28px); color: var(--on-dark); font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; pointer-events: none; }
.btn { flex: none; display: inline-flex; align-items: center; height: 48px; padding: 0 32px; border-radius: 14px; background: var(--on-dark); color: #0c0a09; font-size: 16px; font-weight: 500; }

.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); }
.card { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--photo); color: var(--on-dark); box-shadow: var(--shadow); isolation: isolate; }
.tile { position: relative; overflow: hidden; background: var(--photo); color: var(--on-dark); isolation: isolate; touch-action: pan-y; }
.card .tile { position: absolute; inset: 0; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 30%, rgba(0,0,0,0) 58%); }
.card .cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 20px; pointer-events: none; }
.bh { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(-96px, -5vw, -40px); }
.bh h2 { font-size: clamp(30px, 3.4vw, 48px); }
.bh p { margin: 0; color: var(--body); font-size: 18px; max-width: 46ch; }
.card h4 { font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.card .cap p { margin: 10px 0 0; color: var(--on-dark-soft); font-size: 16px; line-height: 1.45; max-width: 40ch; }
.label { position: absolute; z-index: 2; left: 20px; top: 18px; right: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 500; pointer-events: none; }
.label .mono { color: var(--on-dark); font-size: 11px; text-transform: none; letter-spacing: .02em; }
.track { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.12); }
.bar { height: 100%; width: 0; background: var(--on-dark); }
.split .top { clip-path: inset(0 0 0 var(--x, 50%)); }
.split .handle { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--x, 50%); width: 1px; background: rgba(255,255,255,.8); }
.lens .top { -webkit-mask: radial-gradient(circle at var(--lx, 50%) var(--ly, 40%), #000 0 var(--lr, 70px), transparent calc(var(--lr, 70px) + 1px));
  mask: radial-gradient(circle at var(--lx, 50%) var(--ly, 40%), #000 0 var(--lr, 70px), transparent calc(var(--lr, 70px) + 1px)); }
.blur .top { filter: blur(var(--b, 8px)); transform: scale(1.04); -webkit-mask: url("../media/far.f87ad300.jpg") center / cover; mask: url("../media/far.f87ad300.jpg") center / cover; -webkit-mask-mode: luminance; mask-mode: luminance; }
.smooth .top { opacity: var(--o, .5); }

.film { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.film .bh { margin-bottom: 0; }
.film video { width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; background: var(--photo); display: block; object-fit: cover; }

/* Buy block: the only bordered object on the page (it is the place where money changes hands) */
.buy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px clamp(48px, 6vw, 96px); border-radius: 32px; padding: clamp(28px, 5vw, 64px);
  box-shadow: inset 0 0 0 1px var(--rule); scroll-margin-top: 80px; }
.buy h4 { font-weight: 300; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 20px; }
.buy p { margin: 0; color: var(--body); font-size: 18px; line-height: 1.6; max-width: 44ch; }
/* Buy (2026-10-15 calm pass): one big heading + one paragraph on the left; on the right one line item (licence ...
   price), a full-width button and a note. The price is body size, muted until Paddle fills it (.set). */
.buy-r { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-width: 0; }
.buy-line { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding-bottom: 16px;
  border-bottom: 1px solid var(--rule); font-size: 17px; }
.price { color: var(--muted); font-variant-numeric: tabular-nums; }
.price.set { color: var(--ink); font-weight: 500; }
.buy .cta { width: 100%; justify-content: center; height: 48px; padding: 0 28px; border: 0; font-family: var(--sans); font-size: 16px; cursor: pointer; }
.buy .cta:disabled { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); cursor: default; }
.note { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: end; }
.portrait { margin: 0; border-radius: 22px; overflow: hidden; background: var(--photo); box-shadow: var(--shadow); aspect-ratio: 1; max-width: 100%; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bio .big { font-weight: 300; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; margin-bottom: 12px !important; letter-spacing: -.03em; margin: 0; text-wrap: balance; color: var(--ink); }
.bio p { margin: 0; color: var(--body); font-size: 18px; line-height: 1.6; max-width: 52ch; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 8px; }

footer { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--rule); padding-top: 24px; color: var(--muted); font-size: 15px; }

/* Full-screen case view */
.case { position: fixed; inset: 0; z-index: 50; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; transform: translateY(100%); visibility: hidden;
  transition: transform .55s cubic-bezier(.2,.7,.1,1), visibility 0s linear .55s; padding-inline: var(--gutter); }
.case.open { transform: none; visibility: visible; transition: transform .55s cubic-bezier(.2,.7,.1,1); }
.case-bar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; padding: calc(16px + env(safe-area-inset-top, 0px)) 0 0; pointer-events: none; }
.close { pointer-events: auto; height: 40px; padding: 0 18px; border-radius: 9999px; border: 0; background: var(--ink); color: var(--paper); font: 500 14px var(--sans); cursor: pointer; }
.case-in { max-width: var(--max); margin: -56px auto 0; display: flex; flex-direction: column; gap: clamp(64px, 7vw, 112px); padding-block: 0 120px; }
.case-hero { position: relative; margin-inline: calc(-1 * var(--gutter)); height: min(82vh, 760px); min-height: 360px; background: var(--photo); overflow: hidden; color: var(--on-dark); }
.case-hero .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 55%); }
.case-hero .t { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(28px, 4vw, 56px); box-sizing: content-box; }
.case-hero h2 { font-size: clamp(44px, 8vw, 120px); letter-spacing: -.05em; line-height: .94; max-width: 14ch; text-wrap: balance; }
.case-hero .t p { margin: 14px 0 0; color: var(--on-dark-soft); font-size: 18px; max-width: 48ch; }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; border-top: 1px solid var(--ink); padding-top: 16px; }
.meta div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.meta b { font-weight: 400; font-size: 18px; }
.blk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 48px; }
.blk h3 { font-weight: 400; font-size: 24px; letter-spacing: -.02em; margin: 0; }
.blk p { margin: 0; color: var(--body); font-size: 20px; line-height: 1.6; max-width: 60ch; }
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gal .m { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--photo); }
.gal .m.full { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gal .m .mono { position: absolute; left: 18px; bottom: 16px; color: var(--on-dark-soft); }
.next { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid var(--ink); padding-top: 18px; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.next span:last-child { font-weight: 300; font-size: clamp(30px, 4vw, 52px); letter-spacing: -.04em; }

@media (max-width: 1024px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .wrap { gap: 96px; }
  nav { gap: 18px; }
  .works, .gal, .about, .blk, .buy, .row { grid-template-columns: 1fr; }
  .work.wide, .work { aspect-ratio: 4 / 5; }
  .gal .m.full { aspect-ratio: 4 / 3; }
  .ph-head { grid-template-columns: 1fr; }
  .acts { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sh { flex-direction: column; align-items: flex-start; } .sh p { text-align: left; }
  .hero .tile { aspect-ratio: 4 / 5; }
  .hero .cap { flex-direction: column; align-items: stretch; }
  .btn { height: 44px; justify-content: center; }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pl { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 5; }
  .pl.soon { aspect-ratio: auto; min-height: 160px; }
  .pl .cap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } nav a.opt { display: none; }
  /* Phone top bar: one line; Works is dropped (the home page scrolls into it anyway). */
  .topbar .name, .topbar nav a { white-space: nowrap; font-size: 15px; } .topbar nav { gap: 14px; } .topbar .in { gap: 12px; }
  .topbar nav a:first-child { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero, .work, .case, .case.open { transition: none; } }

/* Display face: Inter Tight for headings only; running text uses Inter (Tight was cramped at 17-18 px).
   Tracking relaxed for Inter Tight (already tight; Geist values above were -.04..-.06em). */
h1, h2, h3, h4, .big, .next span:last-child { font-family: var(--display); }
h1, .case-hero h2 { letter-spacing: -.035em; }
.ph-head h1 { letter-spacing: -.045em; }
h2, .buy h4, .next span:last-child { letter-spacing: -.028em; }
.ph-head h1 span, .bio .big, .pl h3 { letter-spacing: -.02em; }
.work h3, .card h4 { letter-spacing: -.015em; }

/* v3 flat technical (user 2026-10-15, after the grid redesign was rejected: "grids must not be a background").
   Technical, lightly brutalist, minimal: no shadows, no lifts, no white hero shell, no background grid. The technical
   feel comes from ink hairlines, "+" crop marks on section rules and small mono notes (index numbers, figure
   captions, counts); big medium-weight type carries the page. Photo cards keep the dark fade, original roundings stay. */
.hero { background: none; padding: 0; border-radius: 24px; }   /* original roundings kept (user 2026-10-15) */
.hero .tile { border-radius: 24px; }
.card .tile::before, .hero .tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }   /* label legibility without text-shadow */
.cta.ghost, .pl.soon { box-shadow: inset 0 0 0 1px var(--ink); }
.buy { box-shadow: inset 0 0 0 1px var(--ink); align-items: end; }

/* Top bar: ink hairline, mono nav */
.topbar { box-shadow: none; border-bottom: 1px solid var(--ink); }
nav a { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.lang { font-family: var(--mono); }

/* Big type: medium weight, tight */
h1 { font-weight: 500; font-size: clamp(52px, 10.5vw, 196px); line-height: .88; letter-spacing: -.06em; max-width: 13ch; }
.ph-head h1 { --hs: clamp(104px, 23vw, 380px); font-weight: 500; font-size: var(--hs); line-height: .78; letter-spacing: -.075em; margin-left: calc(var(--hs) * -.05); }   /* optical: the R stem sits on the text edge */
.ph-head h1 span { margin: 28px 0 0 calc(var(--hs) * .05);   /* undo the h1 pull so the subline aligns with the lede */ font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.02em; color: var(--ink); }
h2, .case-hero h2 { font-weight: 500; letter-spacing: -.055em; line-height: .9; }
h2 { font-size: clamp(44px, 7.2vw, 128px); }
.bh h2 { font-size: clamp(36px, 5vw, 80px); }
.case-hero h2 { font-size: clamp(52px, 10vw, 180px); }
.buy h4, .bio .big, .next span:last-child { font-weight: 500; letter-spacing: -.04em; }
.work h3, .card h4, .pl h3, .hero h4 { font-weight: 500; letter-spacing: -.03em; }

/* Mono notes and headings stay clean: no rules or crop marks above headings (user 2026-10-15: they spoil the heading
   that follows). Technical detail comes from mono notes, figure captions and the dot-matrix meters below. */
.tick { display: flex; justify-content: space-between; gap: 16px; margin-bottom: clamp(8px, 2vw, 28px); }
.intro { gap: 32px; padding-top: clamp(56px, 7vw, 112px); }
.sh { border-top: 0; padding-top: 0; }
.fig { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
.work .no { position: absolute; z-index: 2; top: 26px; right: 30px; color: var(--on-dark-soft); }
.cover.ph::before { content: none; }   /* placeholder: plain drawing grid only (no tag, crosshair, corner ticks; user 2026-10-15) */
footer { border-top-color: var(--ink); padding-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) { .tick span:nth-child(2) { display: none; } }

/* Dot-matrix meter, Nothing OS style: columns of square dots on a faint dot field, heights stepped (never smooth).
   .vz = live "voice" strip (home intro); .vz[data-p] = Reveal Progress meter (Revea page, lit up to the value).
   Columns are drawn by the shared script in build_site.py; one dot cell = 6 px. */
.vz { --dot: var(--ink); --faint: color-mix(in srgb, var(--ink) 12%, transparent); display: flex; align-items: flex-end; overflow: hidden;
  height: calc(var(--rows, 9) * 6px); background: radial-gradient(circle, var(--faint) 0 1.6px, transparent 2px) 0 100% / 6px 6px; }
.vz i { flex: none; width: 6px; height: 6px; background: radial-gradient(circle, var(--dot) 0 2px, transparent 2.4px) 0 100% / 6px 6px; }
.vz i.off { background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 30%, transparent) 0 2px, transparent 2.4px); }
.intro .vz { margin-top: clamp(16px, 3vw, 40px); }
.hfig .vz { --rows: 5; margin-top: 14px; }
/* Shadow only as hover feedback on whole, content-filled, clickable elements (user 2026-10-15): work cards, plug-in
   tiles, the Revea hero link. Static elements, look cards and buttons stay flat. */
.work, a.pl, .hero { transition: box-shadow .35s ease; }
.work:hover, a.pl:hover, .hero:hover { box-shadow: 0 28px 56px -30px rgba(12,10,9,.45), 0 4px 12px -6px rgba(12,10,9,.12); }
:root[data-theme="dark"] :is(.work, a.pl, .hero):hover { box-shadow: 0 28px 56px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.work, a.pl, .hero):hover { box-shadow: 0 28px 56px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); } }
/* v4 calm (user 2026-10-15, ElevenLabs reference, docs/critique-home-2026-10-15.md): Onest display face for
   headings (Cyrillic + latin), short home hero at a moderate size, normal tracking, sans sentence-case nav,
   quieter dot meter. Overrides the v3 rules above. */
:root { --display: "Onest", "Inter", "Segoe UI", system-ui, sans-serif; }
h1 { font-weight: 500; font-size: clamp(40px, 6vw, 76px); line-height: 1.04; letter-spacing: -.025em; max-width: 16ch; }
h2, .case-hero h2 { font-weight: 500; letter-spacing: -.025em; line-height: 1.04; }
.bh h2 { font-size: clamp(32px, 4vw, 56px); }
.case-hero h2 { font-size: clamp(40px, 6vw, 84px); }
.ph-head h1 { letter-spacing: -.05em; }
.buy h4, .bio .big, .next span:last-child, .work h3, .card h4, .pl h3, .hero h4 { letter-spacing: -.015em; }
.intro { gap: 24px; padding-top: clamp(64px, 9vw, 136px); }
.lede { max-width: 40ch; }
nav a { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; }
.lang { font-family: var(--sans); }
.intro .vz { --rows: 5; --dot: color-mix(in srgb, var(--ink) 38%, transparent); margin-top: clamp(24px, 4vw, 56px); }
.lede { text-wrap: pretty; }