:root {
  --bg: #050505;
  --fg: #f4f3ef;
  --muted: rgba(244, 243, 239, 0.46);
  --edge: clamp(1rem, 2.2vw, 2.1rem);
  --top-gap: clamp(1rem, 2.2vw, 2.1rem);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.9s;
}

/* Light theme when viewing a section */
body.section-open {
  --bg: #f4f3ef;
  --fg: #0a0a0a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Film-grain overlay ---- */
/* Faint fractal noise that jitters in place (like film-grain static) for
   organic texture over the background. Tile size matches the SVG so the
   stitched noise repeats seamlessly — no visible grid. */
.grain {
  position: fixed;
  inset: -15%;
  width: 130%;
  height: 130%;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  background-repeat: repeat;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain-jitter 0.7s steps(1) infinite;
}

/* Small stepped hops around the centre so the grain "boils" in place
   rather than drifting across the screen. */
@keyframes grain-jitter {
  0%   { transform: translate3d(0, 0, 0); }
  12%  { transform: translate3d(-2%, 1.5%, 0); }
  24%  { transform: translate3d(1.5%, -2%, 0); }
  36%  { transform: translate3d(-1%, -1.5%, 0); }
  48%  { transform: translate3d(2%, 1%, 0); }
  60%  { transform: translate3d(-1.5%, 2%, 0); }
  72%  { transform: translate3d(1%, -1%, 0); }
  84%  { transform: translate3d(-2%, -0.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ---- Layout ---- */
.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--top-gap) var(--edge) clamp(1.5rem, 2.6vw, 2.75rem);
  gap: clamp(2rem, 8vh, 6rem);
}

/* When a section is open: content stacks from the top, wordmark rises above it */
body.section-open .stage { justify-content: flex-start; }
body.section-open .top { display: none; }
body.section-open .wordmark { order: -1; }

/* ---- Home header (nav + meta, then bio) ---- */
.top {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 5vh, 3rem);
}

.top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.nav,
.meta {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  font-size: clamp(0.95rem, 1.1vw, 1.22rem);
  line-height: 1.34;
  white-space: nowrap;
}

.meta {
  align-items: flex-end;
  text-align: right;
}

.nav a,
.meta a {
  color: var(--muted);
  transition: color 0.25s ease;
}

.nav a.is-active { color: var(--fg); }

.nav a:hover,
.nav a:focus-visible,
.meta a:hover,
.meta a:focus-visible { color: var(--fg); }

/* Locked nav items: show a lock, stay muted, and can't be clicked */
.nav a.locked {
  cursor: default;
}
.nav a.locked:hover,
.nav a.locked:focus-visible { color: var(--muted); }

.nav a.locked::after {
  content: "";
  display: inline-block;
  width: 0.84em;
  height: 0.84em;
  margin-left: 0.1em;
  margin-right: -0.14em;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a3 3 0 0 0-3 3V7H4.2c-.66 0-1.2.54-1.2 1.2v4.6c0 .66.54 1.2 1.2 1.2h7.6c.66 0 1.2-.54 1.2-1.2V8.2c0-.66-.54-1.2-1.2-1.2H11V4.5a3 3 0 0 0-3-3Zm1.6 5.5H6.4V4.5a1.6 1.6 0 0 1 3.2 0V7Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a3 3 0 0 0-3 3V7H4.2c-.66 0-1.2.54-1.2 1.2v4.6c0 .66.54 1.2 1.2 1.2h7.6c.66 0 1.2-.54 1.2-1.2V8.2c0-.66-.54-1.2-1.2-1.2H11V4.5a3 3 0 0 0-3-3Zm1.6 5.5H6.4V4.5a1.6 1.6 0 0 1 3.2 0V7Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.clock,
.sep { color: var(--muted); }

/* Mobile nav is hidden on desktop; the desktop nav shows instead. */
.nav-mobile { display: none; }

.nav-top { display: inline; }

.nav-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible { color: var(--fg); }

.nav-rest { display: none; }
.sep-menu { display: none; }

/* ---- Bio ---- */
.bio {
  max-width: none; /* let the forced line breaks define the line lengths */
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  line-height: 1.34;
  letter-spacing: -0.008em;
  font-weight: 400;
}

/* ---- Inner nav (sections) — animated underline ---- */
.inner-nav a {
  position: relative;
  transition: opacity 0.25s ease;
}

.inner-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.1, 1);
}

.inner-nav a:hover::after,
.inner-nav a:focus-visible::after,
.inner-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (hover: hover) {
  .inner-nav:hover a { opacity: 0.45; }
  .inner-nav:hover a:hover { opacity: 1; }
}

/* ---- Inner content (sections) ---- */
.inner {
  display: none;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}
body.section-open .inner { display: flex; }

/* Wordmark and nav are flush so they pin as one header block */
body.section-open .stage { gap: 0; }

/* Pin the wordmark at its resting offset (the page's top padding) so it
   doesn't jump upward when it becomes stuck on scroll. */
body.section-open .wordmark {
  position: sticky;
  top: var(--top-gap);
  z-index: 6;
  padding-bottom: 0.2rem; /* clearance so the pinned nav never touches the glyphs */
}

/* Header backgrounds go opaque only after the transition settles, so they
   don't flash light early while the theme is still inverting. Until then
   they're transparent and show the body background through — always in sync. */
body.header-solid .wordmark,
body.header-solid .inner-nav {
  background-color: var(--bg);
}

/* Mask the strip above the pinned wordmark so content can't peek through it */
body.header-solid .wordmark {
  box-shadow: 0 calc(-1 * var(--top-gap)) 0 var(--bg);
}

.inner-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5em;
  width: 100%;
  font-size: clamp(0.95rem, 1.15vw, 1.28rem);
  /* Stay pinned just below the sticky wordmark while content scrolls under */
  position: sticky;
  top: calc(var(--top-gap) + var(--wm-h, 0px) - 1px);
  z-index: 5;
  padding: clamp(0.75rem, 1.6vh, 1.15rem) 0;
}

.inner-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3rem);
}

/* Section title + description are visually hidden (kept for a11y/SEO) */
.inner-head {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.inner-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.inner-desc {
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.15vw, 1.28rem);
  line-height: 1.4;
  opacity: 0.72;
}

/* ---- Works grid ---- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 30vw, 380px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
  width: 100%;
}

.work {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: inherit;
}

.work-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--tone);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}

.work:hover .work-thumb,
.work:focus-visible .work-thumb {
  transform: translateY(-4px);
  filter: brightness(1.06);
}

.work-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.work:hover .work-img,
.work:focus-visible .work-img {
  transform: scale(1.04);
}

/* Index + arrow stay legible on any tone via difference blend */
.work-index,
.work-arrow {
  position: absolute;
  color: #fff;
  mix-blend-mode: difference;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.work-index {
  top: 0.85rem;
  left: 1rem;
  opacity: 0.85;
}

.work-arrow {
  right: 0.85rem;
  bottom: 0.7rem;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.work:hover .work-arrow,
.work:focus-visible .work-arrow {
  opacity: 0.95;
  transform: translate(0, 0);
}

.work-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.work-title {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.work-cat {
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  opacity: 0.6;
}

/* ---- Playground grid ---- */
.play-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 26vw, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  width: 100%;
}

.play {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.play-thumb {
  aspect-ratio: 1 / 1;
  background: var(--tone);
  border-radius: 3px;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}

.play:hover .play-thumb {
  transform: translateY(-4px);
  filter: brightness(1.06);
}

.play-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.play-caption {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.play-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.5;
}

/* ---- Writings list ---- */
.posts {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.post {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.15rem, 2vw, 1.7rem) 0;
  border-top: 1px solid rgba(10, 10, 10, 0.14);
  color: inherit;
}

.post:last-child {
  border-bottom: 1px solid rgba(10, 10, 10, 0.14);
}

.post-year {
  font-size: 0.95rem;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.post-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.post-title {
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: opacity 0.25s ease;
}

.post-excerpt {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.4;
  opacity: 0.6;
  max-width: 62ch;
}

.post-arrow {
  align-self: center;
  font-size: 1.3rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-4px, 0);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.post:hover .post-title,
.post:focus-visible .post-title { opacity: 0.6; }

.post:hover .post-arrow,
.post:focus-visible .post-arrow {
  opacity: 0.9;
  transform: translate(0, 0);
}

/* ---- About ---- */
.about {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.75rem);
  width: 100%;
}

.about-lede {
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 16ch;
}

.about-intro {
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.42;
  max-width: 54ch;
  opacity: 0.78;
}

.about-intro strong { font-weight: 500; opacity: 1; }

.about-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
  border-top: 1px solid rgba(10, 10, 10, 0.14);
}

.about-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.about-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 500;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.about-col p {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.5;
}

.about-link {
  position: relative;
  width: fit-content;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.5;
}

.about-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.1, 1);
}

.about-link:hover::after,
.about-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Wordmark ---- */
.wordmark {
  width: 100%;
  line-height: 0;
}

body.section-open .wordmark { cursor: pointer; }

.wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* don't clip glyph bottoms sitting at the viewBox edge */
}

.wordmark svg path {
  fill: var(--fg);
  transition: fill var(--dur) var(--ease);
}

/* Fade-in on load */
.top { opacity: 0; transform: translateY(8px); animation: rise 0.9s var(--ease) 0.05s forwards; }
.wordmark { opacity: 0; animation: fade 0.9s var(--ease) 0.2s forwards; }

@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .top, .wordmark {
    animation: none;
    opacity: 1;
    transform: none;
  }
  body, .wordmark svg path { transition: none; }
}

/* ---- Small screens ---- */
@media (max-width: 640px) {
  .top-row { gap: 1rem; } /* stays a row: Index/Menu left, clock right-aligned */
  .bio { max-width: none; }
  .br-d { display: none; } /* bio wraps naturally on mobile */
  .stage { gap: 3rem; }

  /* Socials live inside the Menu on mobile, not in the top-right */
  .socials { display: none; }

  /* Show the mobile nav (Index + Menu), hide the desktop one */
  .nav-desktop { display: none; }
  .nav-mobile {
    display: block;       /* inline flow so revealed items continue on the line */
    white-space: normal;  /* and wrap */
  }
  .nav-mobile.open .nav-rest,
  .nav-mobile.open .sep-menu { display: inline; }

  .inner-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4em 1.2em;
  }

  .post {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1.15rem 0;
  }
  .post-arrow { display: none; }
}