/* ─── Design tokens ─────────────────────────────────────────────────── */
:root {
  --bg: oklch(0.972 0.005 80);
  --fg: oklch(0.18 0.008 70);
  --muted: oklch(0.55 0.012 70);
  --faint: oklch(0.78 0.008 70);
  --line: oklch(0.86 0.006 70);
  --paper: oklch(0.985 0.004 80);
  --accent: oklch(71.157% 0.13852 312.138);
  --accent-ink: oklch(0.18 0.008 70);

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-display-weight: 500;
  --font-display-tracking: -0.025em;
  --font-emph: normal;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --density: 0.8;
  --max: 1320px;
  --pad: calc(40px * var(--density));
  --gap: calc(28px * var(--density));
  --sgap: calc(120px * var(--density));

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Base ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "cv11";
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 480ms var(--ease), color 480ms var(--ease);
  cursor: none;
}
@media (hover: none) { body { cursor: auto; } .cursor { display: none; } }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--bg); }

/* ─── Custom cursor ─────────────────────────────────────────────────── */
.cursor, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
}
.cursor {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.96 0.005 80);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid oklch(0.96 0.005 80);
  transform: translate(-50%, -50%);
  transition: width 240ms var(--ease), height 240ms var(--ease),
              border-radius 240ms var(--ease), opacity 240ms;
}
.cursor-ring[data-state="hover"] { width: 56px; height: 56px; }
.cursor-ring[data-state="drag"]  { width: 70px; height: 70px; border-radius: 8px; }
.cursor-ring[data-state="text"]  { width: 4px; height: 24px; border-radius: 1px; }

/* ─── Layout ────────────────────────────────────────────────────────── */
.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.section {
  padding-top: var(--sgap);
  padding-bottom: calc(var(--sgap) * 0.5);
  position: relative;
}
.section + .section { border-top: 1px solid var(--line); }

.s-head {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: var(--gap);
  margin-bottom: calc(var(--gap) * 2);
  align-items: baseline;
}
.s-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.s-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 0.95;
  letter-spacing: var(--font-display-tracking);
}
.s-title em { font-style: var(--font-emph); color: var(--accent); }

/* ─── Top bar ───────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px var(--pad);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: linear-gradient(180deg, var(--bg) 60%, transparent);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar .nick { color: var(--fg); font-weight: 500; }
.topbar nav { display: flex; gap: 22px; }
.topbar nav a { position: relative; transition: color 200ms; }
.topbar nav a:hover { color: var(--fg); }
.topbar .cv-btn { margin-top: 0; padding: 8px 16px; font-size: 10px; }
/* ─── Hero ──────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  padding-top: calc(var(--pad) * 2.5);
  padding-bottom: var(--sgap);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-meta {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--gap);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: calc(var(--gap) * 1.5);
}
.hero-meta .k { display: block; color: var(--faint); margin-bottom: 6px; font-size: 10px; }
.hero-meta .v { color: var(--fg); font-family: var(--font-body); font-size: 13px;
                text-transform: none; letter-spacing: 0; }
.hero-name {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(64px, 14vw, 240px);
  line-height: 0.86;
  letter-spacing: var(--font-display-tracking);
}
.hero-name em {
  font-style: var(--font-emph);
  color: var(--accent);
}
.hero-name .nudge { display: inline-block; transform: translateX(0.1em); }
.hero-tag {
  font-family: var(--font-display);
  font-style: var(--font-emph);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  max-width: 58ch;
  color: var(--muted);
  margin-top: calc(var(--gap) * 1.2);
}
.hero-tag b { color: var(--fg); font-weight: 400; font-style: normal;
              border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

.scroll-cue {
  position: absolute; bottom: calc(var(--pad) * 0.6); right: var(--pad);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: ""; display: block; width: 1px; height: 48px;
  background: linear-gradient(180deg, var(--fg), transparent);
  animation: drop 2.4s infinite var(--ease);
}
@keyframes drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── About ─────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: var(--gap);
}
.about-photo {
  position: sticky; top: 100px;
}
.about-photo-frame {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
}
.about-photo-shape {
  position: absolute;
  inset: 16% -6% -8% -6%;
  background: var(--accent);
  border-radius: 28px;
  transform: rotate(-9deg);
  z-index: 1;
  transition: background 300ms var(--ease), transform 600ms var(--ease);
  transform-origin: 50% 100%;
  will-change: transform;
}
.about-photo-frame:hover .about-photo-shape {
  transform: rotate(-6deg) scale(1.02);
}
.about-photo image-slot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: transparent;
  border: 0;
  z-index: 2;
}
.about-photo image-slot::part(frame) {
  background: transparent;
}
.about-photo image-slot::part(ring) {
  border-color: transparent;
}
.about-photo .cap {
  margin-top: 18px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.about-text {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  max-width: 26ch;
}
.about-text p + p { margin-top: 0.8em; }
.about-text em { color: var(--accent); font-style: var(--font-emph); }
.about-meta {
  margin-top: calc(var(--gap) * 1.5);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: calc(var(--gap));
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--muted);
}
.about-meta .v { display: block; color: var(--fg); font-family: var(--font-body);
                 font-size: 14px; letter-spacing: 0; margin-top: 6px; }

/* ─── Stack ─────────────────────────────────────────────────────────── */
.stack-grid {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: var(--gap);
}
.stack-groups {
  display: flex; flex-direction: column;
  gap: calc(var(--gap) * 0.8);
}
.stack-group {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--gap);
  padding: calc(var(--gap) * 0.6) 0;
  border-top: 1px solid var(--line);
}
.stack-group:first-child { border-top: 0; padding-top: 0; }
.stack-group .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.stack-items {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: -0.005em;
  background: var(--paper);
  transition: all 240ms var(--ease);
  user-select: none;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

/* ─── Projects ──────────────────────────────────────────────────────── */
.projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); }
.layout-switch {
  display: inline-flex; gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.layout-switch button {
  padding: 6px 12px; border-radius: 5px;
  color: var(--muted);
  transition: all 200ms;
}
.layout-switch button[aria-pressed="true"] {
  background: var(--fg); color: var(--bg);
}

/* Grid (drag board) layout */
.projects-board {
  position: relative;
  min-height: 720px;
  background-image:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 24px 24px;
  background-position: -1px -1px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
  overflow: hidden;
}
.proj-card {
  position: absolute;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px 20px;
  box-shadow: 0 1px 0 var(--line), 0 12px 32px -16px oklch(0.2 0.01 70 / 0.18);
  transition: box-shadow 240ms var(--ease), border-color 200ms;
  cursor: none;
  user-select: none;
  will-change: transform;
}
.proj-card.dragging {
  z-index: 10;
  box-shadow: 0 1px 0 var(--line), 0 30px 50px -10px oklch(0.2 0.01 70 / 0.35);
  border-color: var(--accent);
}
.proj-card .pin {
  position: absolute; top: -6px; right: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 2px oklch(0.2 0.01 70 / 0.4),
              inset 0 1px 1px oklch(1 0 0 / 0.3);
}
.proj-num {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase;
  margin-bottom: 10px;
}
.proj-title {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.proj-desc {
  color: var(--muted);
  font-size: 13.5px; line-height: 1.5;
  margin-bottom: 14px;
}
.proj-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.proj-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--muted);
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px;
}
.proj-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--fg);
  transition: color 200ms;
}
.proj-link:hover { color: var(--accent); border-color: var(--accent); }

/* List layout */
.projects-list { border-top: 1px solid var(--line); }
.proj-row {
  display: grid;
  grid-template-columns: 60px 1fr 2fr 1.6fr 80px;
  gap: var(--gap);
  align-items: baseline;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 320ms var(--ease), background 320ms var(--ease);
  position: relative;
}
.proj-row:hover {
  padding-left: 24px;
  background: var(--paper);
}
.proj-row::before {
  content: "→";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--accent);
  transition: opacity 320ms, transform 320ms var(--ease);
}
.proj-row:hover::before { opacity: 1; transform: translateY(-50%) translateX(8px); }
.proj-row .n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.proj-row .t { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.015em; line-height: 1; }
.proj-row .d { color: var(--muted); font-size: 14px; max-width: 42ch; }
.proj-row .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-row .y { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: right; letter-spacing: 0.06em; }

.board-help {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
  display: flex; align-items: center; gap: 8px;
}
.board-help kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
}

/* ─── Experience ────────────────────────────────────────────────────── */
.xp-list {
  display: flex; flex-direction: column;
}
.xp-row {
  display: grid;
  grid-template-columns: 200px 1fr 1.2fr;
  gap: var(--gap);
  padding: calc(var(--gap) * 0.9) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.xp-row:first-child { border-top: 0; }
.xp-when {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.xp-who {
  font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.01em; line-height: 1.1;
}
.xp-who .role { display: block; font-family: var(--font-body);
                font-size: 12px; letter-spacing: 0.04em; color: var(--muted);
                margin-top: 6px; text-transform: uppercase; }
.xp-what { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ─── Contact ───────────────────────────────────────────────────────── */
.contact {
  padding-top: var(--sgap);
  padding-bottom: var(--sgap);
}
.contact-big {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 130px);
  line-height: 0.95;
  letter-spacing: var(--font-display-tracking);
  font-weight: var(--font-display-weight);
}
.contact-big em { font-style: var(--font-emph); color: var(--accent); }
.contact-row {
  margin-top: calc(var(--gap) * 1.5);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: calc(var(--gap));
}
.contact-row a {
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  transition: color 200ms;
}
.contact-row a .v {
  display: block; margin-top: 8px;
  font-family: var(--font-body);
  font-size: 15px; letter-spacing: -0.005em; text-transform: none;
  color: var(--fg);
  transition: color 200ms;
}
.contact-row a:hover .v { color: var(--accent); }
.cv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: calc(var(--gap) * 1.2);
  padding: 16px 22px;
  background: var(--fg); color: var(--bg);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 240ms var(--ease);
}
.cv-btn:hover { background: var(--accent); }
.cv-btn .arrow {
  display: inline-block;
  transition: transform 240ms var(--ease);
}
.cv-btn:hover .arrow { transform: translate(2px, -2px); }

/* ─── Project modal ─────────────────────────────────────────────────── */
.proj-card { cursor: none; }
.proj-row { cursor: pointer; }
@media (hover: none) { .proj-row { cursor: auto; } }

.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: oklch(0.18 0.01 70 / 0.55);
  backdrop-filter: blur(5px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--pad) * 1.1);
  overflow-y: auto;
  animation: modal-fade 240ms var(--ease);
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative;
  width: 100%; max-width: 880px;
  margin: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: calc(var(--gap) * 1.6);
  box-shadow: 0 40px 80px -24px oklch(0.15 0.01 70 / 0.5);
  animation: modal-rise 340ms var(--ease);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted);
  transition: all 200ms var(--ease);
}
.modal-close:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.modal-head {
  border-bottom: 1px solid var(--line);
  padding: 0 48px calc(var(--gap)) 0;
  margin-bottom: calc(var(--gap));
}
.modal-num {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.02;
  letter-spacing: var(--font-display-tracking);
  margin-bottom: 16px;
}
.modal-body { display: flex; flex-direction: column; gap: calc(var(--gap) * 1.15); }
.modal-sec-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.modal-text { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 64ch; }
.modal-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.modal-list li {
  position: relative; padding-left: 24px;
  color: var(--muted); font-size: 14.5px; line-height: 1.5;
}
.modal-list li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--accent);
}
.modal-list.tight li { font-size: 14px; gap: 7px; }
.modal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.modal-card {
  border: 1px solid var(--line); border-radius: 6px;
  padding: calc(var(--gap) * 0.7); background: var(--paper);
}
.modal-card-h {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg); margin-bottom: 12px;
}
.modal-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.modal-tech { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tech-card {
  border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 16px; background: var(--paper);
}
.tech-name {
  font-family: var(--font-display); font-size: 16px;
  letter-spacing: -0.01em; margin-bottom: 7px;
}
.tech-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.modal-links {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  border-top: 1px solid var(--line); padding-top: calc(var(--gap));
}
.modal-links .cv-btn { margin-top: 0; }

@media (max-width: 820px) {
  .modal-overlay { padding: 0; }
  .modal {
    border-radius: 0; border-left: 0; border-right: 0;
    min-height: 100%; padding: calc(var(--gap) * 1.2);
  }
  .modal-cards, .modal-tech { grid-template-columns: 1fr; }
}

/* ─── Reveal animation ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─── Responsive ────────────────────────────────────────────────────── */

/* Tablet / small laptop — the free-drag desk board can't fit its canvas,
   so collapse it into a stacked card list. */
@media (max-width: 1024px) {
  :root { --pad: 30px; --sgap: 96px; }
  .projects-board {
    position: static;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .proj-card {
    position: static;
    width: 100%;
    transform: none !important;
  }
  .proj-card .pin { display: none; }
  .board-help { display: none; }
  .xp-row { grid-template-columns: 160px 1fr; }
  .xp-row .xp-what { grid-column: 1 / -1; }
}

/* Mobile / large phone */
@media (max-width: 820px) {
  :root { --pad: 22px; --gap: 18px; --sgap: 72px; }
  .s-head, .about-grid, .stack-grid { grid-template-columns: 1fr; }
  .s-head { margin-bottom: var(--gap); }
  .hero { min-height: 100svh; padding-top: calc(var(--pad) * 3.4); }
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .stack-grid > div:first-child { display: none; }
  .stack-group { grid-template-columns: 1fr; gap: 10px; }
  .about-photo { position: static; }
  .about-photo image-slot { max-width: 320px; }
  .about-meta { grid-template-columns: 1fr 1fr; }
  .xp-row { grid-template-columns: 1fr; gap: 6px; }
  .xp-row .xp-what { grid-column: auto; }
  .contact-row { grid-template-columns: 1fr 1fr; }
  .topbar nav { display: none; }
  .proj-row { grid-template-columns: 40px 1fr; row-gap: 10px; }
  .proj-row .d, .proj-row .tags, .proj-row .y { grid-column: 1 / -1; padding-left: 50px; }
  .proj-row .y { text-align: left; }
  .proj-row:hover { padding-left: 4px; }
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }

  /* About: stop the sticky photo from overlaying text, and shrink it */
  .about-photo { position: static; top: auto; max-width: 280px; margin: 0 auto 8px; }
  .about-photo-frame { aspect-ratio: 4/5; }
  .about-text { max-width: none; }
  .about-meta { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Topbar tightening */
  .topbar { padding: 14px 36px; }

  /* Hero meta */
  .hero { padding-top: 110px; }
}

@media (max-width: 480px) {
  :root { --pad: 36px; }
  .topbar { padding: 12px 36px; }
  .about-meta { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: 1fr; }
  .about-photo { max-width: 220px; }
}

/* Small phone */
@media (max-width: 480px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .about-meta { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; }
  .topbar { padding: 14px var(--pad); }
  .scroll-cue { display: none; }
  .proj-card { padding: 16px 16px 18px; }
  .projects-head { flex-wrap: wrap; gap: 12px; }
}