:root {
  --bg: #0E0F11;
  --bg-raised: #16181B;
  --bg-raised-hover: #1C1F23;
  --fg: #ECEDE9;
  --fg-muted: rgba(236,237,233,0.64);
  --fg-faint: rgba(236,237,233,0.34);
  --hairline: rgba(236,237,233,0.12);
  --accent: #D9A544;
  --accent-soft: rgba(217,165,68,0.14);
  --focus-ring: #D9A544;
  --selection-fg: #17130A;
}

:root[data-theme="light"] {
  --bg: #FAF8F3;
  --bg-raised: #F1EEE5;
  --bg-raised-hover: #E8E3D6;
  --fg: #201E19;
  --fg-muted: rgba(32,30,25,0.64);
  --fg-faint: rgba(32,30,25,0.36);
  --hairline: rgba(32,30,25,0.13);
  --accent: #A9701B;
  --accent-soft: rgba(169,112,27,0.13);
  --focus-ring: #A9701B;
  --selection-fg: #FFFAF0;
}

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.24'/%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--fg);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: settle 0.6s ease-out forwards; }
}
@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.reveal.stagger.in-view > * {
  animation: stagger-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.reveal.stagger.in-view > *:nth-child(1) { animation-delay: 0.03s; }
.reveal.stagger.in-view > *:nth-child(2) { animation-delay: 0.09s; }
.reveal.stagger.in-view > *:nth-child(3) { animation-delay: 0.15s; }
.reveal.stagger.in-view > *:nth-child(4) { animation-delay: 0.21s; }
.reveal.stagger.in-view > *:nth-child(5) { animation-delay: 0.27s; }
.reveal.stagger.in-view > *:nth-child(6) { animation-delay: 0.33s; }
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.stagger.in-view > * { animation: none; }
}

.shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 120px;
}

/* ---- top bar ---- */
header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0 0;
}
.mark {
  width: 30px; height: 30px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--fg-muted);
  flex-shrink: 0;
  text-decoration: none;
}
nav.top-links {
  display: flex;
  gap: 22px;
}
nav.top-links a {
  font-size: 13px;
  text-decoration: none;
  color: var(--fg-muted);
  transition: color 0.15s ease;
}
nav.top-links a:hover { color: var(--fg); }
nav.top-links a.resume-link {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
nav.top-links a.resume-link .ext {
  font-size: 11px;
  transform: translateY(-1px);
}

.top-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.theme-toggle {
  width: 30px; height: 30px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: transparent;
  color: var(--fg-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-soft); transform: scale(1.05); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg {
  width: 15px; height: 15px;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
:root[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: opacity 0.15s ease; transform: none !important; }
}

/* ---- hero ---- */
.hero { padding: 64px 0 8px; }
.hero h1 {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.12;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.role {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--fg-muted);
  margin: 0 0 30px;
}
.role .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 0 0 0 var(--accent-soft);
  animation: dot-pulse 2.6s ease-out infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .role .dot { animation: none; }
}

.bio p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--fg-muted);
  max-width: 62ch;
  margin: 0 0 16px;
}
.bio a {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--fg-faint), var(--fg-faint));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size 0.25s ease, background-image 0.25s ease, color 0.25s ease;
}
.bio a:hover {
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
}

.now-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 28px 0 0;
  padding: 14px 16px;
  background: var(--bg-raised);
  border-radius: 8px;
  border: 1px solid var(--hairline);
}
.now-line .now-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  flex-shrink: 0;
}
.now-line p {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.55;
}

/* ---- section scaffolding ---- */
section { padding-top: 68px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.section-head h2 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
}
.section-head span {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--fg-faint);
}

/* ---- building cards ---- */
.building-list { display: flex; flex-direction: column; gap: 10px; }
.building-item {
  display: block;
  text-decoration: none;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.building-item:hover {
  background: var(--bg-raised-hover);
  border-color: var(--accent-soft);
  transform: translateX(2px);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,0.35);
}
a.building-item:active { transform: translateX(2px) scale(0.995); }
.building-item.static { cursor: default; }
.building-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.building-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.building-tag {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  border: 1px solid rgba(217,165,68,0.35);
  border-radius: 20px;
  padding: 3px 9px;
  flex-shrink: 0;
}
.building-tag.paused {
  color: var(--fg-faint);
  border-color: var(--hairline);
}
.building-desc {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 7px 0 0;
  max-width: 50ch;
}
.building-arrow {
  font-size: 15px;
  color: var(--fg-faint);
  transition: transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
a.building-item:hover .building-arrow {
  transform: translateX(3px);
  color: var(--accent);
}

/* ---- work list ---- */
.work-list { display: flex; flex-direction: column; }
.work-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.work-row:last-child { border-bottom: none; }
.work-date {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--fg-faint);
  padding-top: 2px;
}
.work-role { font-size: 14px; color: var(--fg); margin: 0 0 2px; }
.work-company { font-size: 12.5px; color: var(--fg-muted); margin: 0; }

/* ---- writing (empty state) ---- */
.writing-empty {
  font-size: 13.5px;
  color: var(--fg-faint);
  font-style: italic;
  font-family: 'Newsreader', serif;
  padding: 4px 0 2px;
}

/* ---- footer ---- */
footer {
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a {
  font-size: 12.5px;
  text-decoration: none;
  color: var(--fg-muted);
  display: inline-block;
  transition: color 0.15s ease, transform 0.15s ease;
}
.footer-links a:hover { color: var(--accent); transform: translateY(-1px); }
.footer-links a.copied,
.footer-links a.copied:hover {
  color: var(--accent);
  transform: none;
}
.footer-note {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-faint);
}

@media (max-width: 560px) {
  .shell { padding: 0 18px 90px; }
  header.top { flex-wrap: wrap; row-gap: 14px; padding-top: 22px; }
  .top-right { width: 100%; justify-content: space-between; }
  nav.top-links { gap: 12px; flex-wrap: wrap; row-gap: 6px; }
  nav.top-links a { font-size: 12px; }
  .hero { padding-top: 36px; }
  .work-row { grid-template-columns: 74px 1fr; gap: 10px; }
}