/* Layout and type follow kevdu.co's quiet single column; the H1 borrows ugly.cash's condensed Helvetica. */
:root {
  --bg: #fcfcfc;
  --ink: #1f1f1f;
  --muted: #5e5e5e;
  --line: #ebebeb;
  --column: 640px;
  --section-gap: 96px;
}

/* Helvetica condensed bold from the visitor's machine (every Mac has Helvetica Neue Condensed Bold);
   anywhere else it falls back to Archivo at its narrowest width. Nothing licensed is served. */
@font-face {
  font-family: 'Nazmi Display';
  src: local('Helvetica Now Display Cn Bold'), local('HelveticaNowDisplayCn-Bold'), local('Helvetica Neue Condensed Bold'), local('HelveticaNeue-CondensedBold');
  font-weight: 700;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img, video { display: block; }
a:focus-visible { outline: 2px solid #478bf4; outline-offset: 3px; border-radius: 4px; }

.muted { color: var(--muted); }
.label { font-size: 13px; line-height: 20px; font-weight: 400; }
.column { width: min(var(--column), 100% - 40px); margin-inline: auto; }

/* ---------- Hero H1 ---------- */
/* One column for everything, so every block shares the same edges. */
.hero { padding-top: 72px; overflow-x: clip; } /* scrambled letters can briefly run wider than the name */
.display {
  display: block; /* full column width, so the hover area stays put while the name scrambles to "Nazday" */
  white-space: nowrap;
  font-family: 'Nazmi Display', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-stretch: 62%;
  font-size: 107px; /* main.js scales this so the name spans the column exactly */
  line-height: .85;
  letter-spacing: -.033em;
  text-transform: uppercase;
}
.intro, .work, .experience, .projects, .writing, .stack, .footer { margin-top: var(--section-gap); }

/* ASCII texture: a fixed canvas behind the content, always moving slowly; clicks send ripples through it. */
.ascii-field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
main { position: relative; z-index: 1; }

/* ---------- Intro column ---------- */
.intro > p { margin-top: 12px; }
.intro > p:first-of-type { margin-top: 24px; }
.intro > .person + p { margin-top: 24px; }
.person-role { font-size: 14px; line-height: 20px; font-weight: 500; }
.person .muted { font-size: 14px; line-height: 20px; }

.intro a, .footer a {
  text-decoration: underline dotted;
  text-decoration-color: #b4b4b4;
  text-underline-offset: 4px;
  transition: text-decoration-color .15s;
}
.intro a:hover, .footer a:hover { text-decoration-style: solid; text-decoration-color: currentColor; }

.intro .label { margin-top: 28px; }
.link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.link-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.link-grid .label { margin-bottom: 6px; }

/* Copy email + Information buttons */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 100px; font: inherit; font-weight: 500; cursor: pointer; transition: background .15s, transform .15s; }
.pill:active { transform: scale(.97); }
.pill:focus-visible { outline: 2px solid #478bf4; outline-offset: 3px; }
.pill-dark { background: var(--ink); color: #fff; }
.pill-dark:hover { background: #333; }
.pill-light { background: #efefef; color: var(--ink); }
.pill-light:hover { background: #e6e6e6; }
.pill-plus { position: relative; width: 12px; height: 12px; }
.pill-plus::before, .pill-plus::after { content: ''; position: absolute; inset: 5.25px 0 auto; height: 1.5px; border-radius: 1px; background: currentColor; }
.pill-plus::after { transform: rotate(90deg); }

/* Information modal */
.info-modal {
  width: min(560px, 100% - 32px);
  max-height: min(720px, 100% - 32px);
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .12);
}
.info-modal::backdrop { background: rgba(20, 20, 20, .24); backdrop-filter: blur(4px); }
.info-modal[open] { animation: info-in .32s cubic-bezier(.22, 1, .36, 1); }
.info-modal[open]::backdrop { animation: info-fade .32s ease; }
@keyframes info-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes info-fade { from { opacity: 0; } }
.info-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #efefef; cursor: pointer; }
.info-close::before, .info-close::after { content: ''; position: absolute; top: 17.25px; left: 11px; width: 14px; height: 1.5px; border-radius: 1px; background: var(--ink); transform: rotate(45deg); }
.info-close::after { transform: rotate(-45deg); }
.info-close:hover { background: #e6e6e6; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.info-grid h2 { margin: 0 0 16px; }
.info-list li { line-height: 28px; }
.availability { display: flex; align-items: center; gap: 10px; }
.status-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1daf61; }
.status-dot::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: #1daf61; opacity: .2; animation: status-pulse 2s ease-out infinite; }
@keyframes status-pulse { 0% { transform: scale(.65); opacity: .4; } 75%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .info-modal[open], .info-modal[open]::backdrop, .status-dot::before { animation: none; } }
@media (max-width: 767px) {
  .info-modal { padding: 56px 24px 32px; }
  .info-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Selected work: stacked cards, like kevdu ---------- */
.work-head { margin-bottom: 16px; }
.work-list { display: flex; flex-direction: column; gap: 24px; }
.card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f4f4f4;
  text-decoration: none;
}
.card img, .card video { width: 100%; height: 100%; object-fit: cover; }
.card::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent); opacity: 0; transition: opacity .15s; pointer-events: none; }
.caption { position: absolute; left: 20px; bottom: 20px; z-index: 1; display: flex; flex-direction: column; color: #fff; opacity: 0; transition: opacity .15s; }
.caption-title { font-size: 15px; line-height: 24px; font-weight: 500; }
.caption-sub { font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .72); }
@media (hover: hover) {
  .card:hover .caption, .card:hover::after, .card:focus-visible .caption, .card:focus-visible::after { opacity: 1; }
}

/* Touch screens have no hover, so captions sit under each card. */
@media (hover: none) {
  .card { overflow: visible; aspect-ratio: auto; border: 0; background: none; }
  .card img, .card video { aspect-ratio: 4 / 3; height: auto; border: 1px solid var(--line); border-radius: 14px; background: #f4f4f4; }
  .card::after { display: none; }
  .caption { position: static; padding: 10px 2px 0; color: var(--ink); opacity: 1; }
  .caption-sub { color: var(--muted); }
}

/* ---------- Experience ---------- */
.exp-list { margin-top: 16px; }
.exp-list li { display: flex; gap: 24px; padding: 12px 0; border-top: 1px solid var(--line); }
.exp-list li:last-child { border-bottom: 1px solid var(--line); }
.exp-years { flex: none; order: 2; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.exp-note { color: #9a9a9a; }
@media (max-width: 767px) {
  .exp-note { display: block; } /* company on its own line under the role */
}

/* ---------- Writing ---------- */
.writing-list { margin-top: 16px; }
.writing-row { display: block; padding: 8px 0; text-decoration: none; }
.writing-row:hover .writing-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #b4b4b4; }

/* ---------- Personal projects ---------- */
.project-list { margin-top: 16px; }
.project-list li + li { margin-top: 4px; }
.project-year { flex: none; width: 52px; font-variant-numeric: tabular-nums; }
.project { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; }
.project img { flex: none; width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
.project-name { font-weight: 500; }
/* Unannounced projects get a neutral tile instead of an icon. */
.project-icon-anon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #f1f1f1; box-shadow: 0 0 0 1px var(--line); color: #a3a3a3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.badge { padding: 0 10px; border-radius: 100px; background: #efefef; color: var(--muted); font-size: 12px; line-height: 22px; white-space: nowrap; }
.project-desc { margin-left: auto; padding-left: 16px; text-align: right; }
a.project:hover .project-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #b4b4b4; }
@media (max-width: 767px) {
  .project-year { width: 44px; font-size: 13px; }
  .project { flex-wrap: wrap; }
  .project-desc { flex-basis: 100%; margin: -6px 0 0 92px; padding: 0; text-align: left; font-size: 13px; line-height: 20px; }
}

/* ---------- Stack ---------- */
.stack-list { margin-top: 16px; }
.stack-list li { line-height: 30px; }

/* ---------- Footer ---------- */
.footer { padding: 20px 0 128px; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; } /* the tall bottom padding lets the last line scroll clear of the progressive blur */
.clock { display: flex; gap: 24px; }
.clock + .clock { margin-top: 4px; }
.clock .muted { width: 92px; }
.clock [data-clock] { font-variant-numeric: tabular-nums; }
.footer-copy { margin-top: 8px; color: #9a9a9a; }

@media (max-width: 767px) {
  :root { --section-gap: 64px; }
  .hero { padding-top: 48px; }
}

/* ---------- Progressive blur (Osmo Supply), kept as published ---------- */
.progressive-blur {
  z-index: 40;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
  width: 100%;
  height: 15em;
  transform-style: preserve-3d;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.progressive-blur__layer {
  width: 100%;
  height: 100%;
  position: absolute;
}

.progressive-blur__layer.is--1 {
  -webkit-backdrop-filter: blur(.09375em);
  backdrop-filter: blur(.09375em);
  -webkit-mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%);
  mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%);
}

.progressive-blur__layer.is--2 {
  -webkit-backdrop-filter: blur(.1875em);
  backdrop-filter: blur(.1875em);
  -webkit-mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%);
  mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%);
}

.progressive-blur__layer.is--3 {
  -webkit-backdrop-filter: blur(.375em);
  backdrop-filter: blur(.375em);
  -webkit-mask: linear-gradient(#0000 75%, #000 87.5% 100%);
  mask: linear-gradient(#0000 75%, #000 87.5% 100%);
}

.progressive-blur__layer.is--4 {
  -webkit-backdrop-filter: blur(.75em);
  backdrop-filter: blur(.75em);
  -webkit-mask: linear-gradient(#0000 82%, #000 92% 100%);
  mask: linear-gradient(#0000 82%, #000 92% 100%);
}

.progressive-blur__layer.is--5 {
  -webkit-backdrop-filter: blur(1.5em);
  backdrop-filter: blur(1.5em);
  -webkit-mask: linear-gradient(#0000 88%, #000 100%);
  mask: linear-gradient(#0000 88%, #000 100%);
}