/* Monochromatic colour system: warm neutrals, hierarchy through contrast. */
:root {
  --bg: #f7f7f5;
  --surface: #efefec;
  --text: #242422;
  --text-hover: #080808;
  --sub: #777772;
  --sub-hover: #363632;
  --icon-color: #777772;
  --icon-hover: #242422;
  --border: #d9d9d5;
  --border-hover: #b8b8b2;

  --pfp-bg: #b5e48c;

  --edge: 20px;          /* page padding */
  --sidebar-w: 350px;
  --col-gap: 20px;       /* sidebar → feed */
  --post-gap: 16px;
  --radius: 8px;

  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #171715;
  --surface: #20201e;
  --text: #e8e8e3;
  --text-hover: #ffffff;
  --sub: #92928b;
  --sub-hover: #d0d0c9;
  --icon-color: #92928b;
  --icon-hover: #e8e8e3;
  --border: #393936;
  --border-hover: #5a5a54;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, var(--sidebar-w)) 1px 1fr;
  column-gap: var(--col-gap);
  padding: var(--edge);
  max-width: 1720px;
  margin: 0 auto;
}

.sidebar {
  width: 100%;
  max-width: var(--sidebar-w);
  position: sticky;
  top: var(--edge);
  height: calc(100vh - var(--edge) * 2);
  height: calc(100dvh - var(--edge) * 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  scrollbar-width: none;
}

/* Full-height 1px rule between sidebar and content (Figma "Line 1").
   Negative margins let it run edge to edge without making the page taller. */
.divider {
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  margin-block: calc(var(--edge) * -1);
  background: var(--border);
}

/* ---------- Navigation ---------- */
.nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 320px;
}

.nav-item { display: flex; flex-direction: column; }
.nav-item--static { gap: 20px; }

.nav-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: var(--sub);
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.nav-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  text-align: left;
}
.nav-row:hover .nav-label { color: var(--sub-hover); }
.nav-row:focus-visible .nav-label { color: var(--sub-hover); }
.nav-row:focus-visible { outline: 1px solid var(--border-hover); outline-offset: 4px; border-radius: 2px; }

/* Nav icons: Figma SVGs used as masks so their colour follows the theme. */
.icon {
  display: block; flex: none; width: 13px; height: 13px;
  background-color: var(--icon-color);
  -webkit-mask: var(--icon) center / 13px 13px no-repeat;
          mask: var(--icon) center / 13px 13px no-repeat;
  transition: transform 0.25s ease, opacity 0.15s ease, background-color 0.15s ease;
}
.icon--caret { --icon: url("assets/caret-up.svg"); }
.icon--arrow { --icon: url("assets/arrow-up-right.svg"); }
.nav-row:hover .icon,
.nav-row:focus-visible .icon { background-color: var(--icon-hover); }
a.nav-row:hover .icon { transform: translate(1px, -1px); }

/* Caret: closed = pointing down (flipped CaretUp); hidden on the open item */
.icon--caret { transform: scaleY(-1); }
.nav-row[aria-expanded="true"] .icon--caret { opacity: 0; }
.nav-row[aria-expanded="true"] { cursor: default; }
/* The open item's label reads one step darker, as in the reference. */
.nav-row[aria-expanded="true"] .nav-label,
.nav-row[aria-expanded="true"]:hover .nav-label { color: var(--sub-hover); }

/* ---------- Quote block (intro text with rule) ---------- */
.quote {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding-left: 8px;
}
.quote::before {
  content: "";
  flex: none;
  width: 1px;
  background: var(--sub);
  border-radius: 1px;
  transition: background-color 0.15s ease;
}
.quote:hover::before { background: var(--sub-hover); }
.quote p {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.44;
  letter-spacing: -0.02em;
  color: var(--text);
}
.u {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: color 0.15s ease;
}
.u:hover { color: var(--text-hover); }

/* ---------- Accordion ---------- */
.panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.panel > .panel-inner { overflow: hidden; }
.panel-inner .quote { margin-top: 20px; }
.nav-item--accordion.is-open .panel { grid-template-rows: 1fr; }

/* ---------- Profile ---------- */
.profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;  /* same width as the nav, per the Figma footer */
  padding-top: 24px;
}
.profile-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ---------- Theme toggle ---------- */
/* 28px tile: surface fill, 0.5px border, 16px icon (Figma "Theme Toggle") */
.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 6px;
  color: var(--icon-color);
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { color: var(--icon-hover); border-color: var(--border-hover); }
.theme-toggle:focus-visible { color: var(--icon-hover); outline: 1px solid var(--border-hover); outline-offset: 2px; }

/* Icons drawn from the Figma SVGs as masks so they take the text colour in both themes. */
.theme-icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / 16px 16px no-repeat;
          mask: var(--icon) center / 16px 16px no-repeat;
  transition: transform 0.3s ease;
}
.theme-toggle:hover .theme-icon { transform: rotate(-12deg); }
.theme-icon--moon { --icon: url("assets/moon.svg"); }
.theme-icon--sun  { --icon: url("assets/sun.svg"); display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun  { display: block; }

.avatar {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
}
/* 36px square photo, 8px corners, centred in the 42px box (Figma "pfp") */
.avatar-photo {
  position: absolute;
  width: 36px;
  height: 36px;
  left: calc(50% - 18px + 0.13px);
  top: calc(50% - 18px + 0.13px);
  object-fit: cover;
  border-radius: 8px;
}

/* Two lines of Main text: handle in sub, social link in main text */
.profile-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.44;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.handle { color: var(--sub); }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text);
  transition: color 0.15s ease;
}
.social-link:hover { color: var(--text-hover); }
.social-link:focus-visible { outline: 1px solid var(--border-hover); outline-offset: 2px; border-radius: 2px; }
.social-icon {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
}
/* Swap the X icon per theme: dark tile in light mode, the light version in dark mode. */
.social-icon--dark { display: none; }
:root[data-theme="dark"] .social-icon--light { display: none; }
:root[data-theme="dark"] .social-icon--dark { display: block; }

/* ---------- Main content (one view per sidebar item) ---------- */
.content { min-width: 0; }
.view[hidden] { display: none; }

/* Intro: the about text, centred in the main area */
.view--intro {
  position: relative;
  min-height: calc(100vh - var(--edge) * 2);
  min-height: calc(100dvh - var(--edge) * 2);
  display: grid;
  place-items: center;
}
/* Background pattern: rows of dashed squares with dotted corners, traced from the reference.
   Drawn as a mask filled with --surface so it stays faint in both themes.
   One tile = a 20px square (left edge, top and bottom edges, corner dots) + 18px row gap.
   `round` fits a whole number of tiles in each direction, so nothing is cut at the edges;
   ::after adds the last column of corner dots to close the right-hand squares. */
.view--intro {
  --pattern-dot: 3.5px;
  --pattern-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 38' preserveAspectRatio='none'><g fill='black'><circle cx='1.75' cy='9' r='1.75'/><circle cx='1.75' cy='29' r='1.75'/><rect x='9.25' y='8.5' width='5' height='1'/><rect x='9.25' y='28.5' width='5' height='1'/><rect x='1.25' y='16.5' width='1' height='5'/></g></svg>");
  --pattern-end: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3.5 38' preserveAspectRatio='none'><g fill='black'><circle cx='1.75' cy='9' r='1.75'/><circle cx='1.75' cy='29' r='1.75'/><rect x='1.25' y='16.5' width='1' height='5'/></g></svg>");
}
/* Cursor glow: a 40px radial highlight painted under the pattern mask, so only the dots and
   dashes near the cursor light up. main.js eases --mx/--my toward the pointer (viewport px,
   matched by background-attachment: fixed); --glow fades the highlight in and out. */
@property --glow {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
.view--intro {
  --mx: -999px;
  --my: -999px;
  --glow: 0%;
  transition: --glow 0.45s ease;
}
.view--intro.is-glowing { --glow: 20%; }

.view--intro::before,
.view--intro::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--surface);
  background-image: radial-gradient(
    circle 40px at var(--mx) var(--my),
    color-mix(in srgb, var(--sub) var(--glow), transparent) 0%,
    color-mix(in srgb, var(--sub) calc(var(--glow) * 0.5), transparent) 55%,
    transparent 100%
  );
  background-attachment: fixed;
  pointer-events: none;
}
.view--intro::before {
  left: 0;
  right: var(--pattern-dot);
  -webkit-mask-image: var(--pattern-tile);
          mask-image: var(--pattern-tile);
  -webkit-mask-size: 20px 38px;
          mask-size: 20px 38px;
  -webkit-mask-repeat: round;
          mask-repeat: round;
}
.view--intro::after {
  right: 0;
  width: var(--pattern-dot);
  -webkit-mask-image: var(--pattern-end);
          mask-image: var(--pattern-end);
  -webkit-mask-size: var(--pattern-dot) 38px;
          mask-size: var(--pattern-dot) 38px;
  -webkit-mask-repeat: no-repeat round;
          mask-repeat: no-repeat round;
}
.view--intro > .about { position: relative; z-index: 1; }
.about {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 480px;
}
.about p {
  font-size: 14px;
  line-height: 1.72;  /* 172% = 24px at 14px */
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Projects: stacked posts */
.view--feed {
  display: flex;
  flex-direction: column;
  gap: var(--post-gap);
}
.post {
  width: 100%;
  aspect-ratio: 790 / 525;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.post > img, .post > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Real project images keep their own proportions instead of the 790/525 placeholder crop. */
.post--media { aspect-ratio: auto; }
.post--media > img { height: auto; }
/* Small exports: show at their own width, centred on the surface, so they stay sharp. */
.post--narrow { display: grid; place-items: center; padding: 40px 16px; }
.post--narrow > img { width: auto; max-width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  :root { --edge: 16px; }
  .layout { grid-template-columns: 1fr; row-gap: 40px; }
  .divider { display: none; }
  .sidebar { position: static; height: auto; overflow: visible; gap: 40px; }
  .profile { padding-top: 0; }
  .view--intro { min-height: 0; place-items: start; }
}

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