:root {
  --paper: #efeee9;
  --ink: #11110f;
  --muted: #74716a;
  --rule: rgba(17, 17, 15, 0.25);
  --pad: clamp(18px, 3.2vw, 52px);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { min-height: 100svh; margin: 0; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; }
main { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.masthead {
  min-height: clamp(230px, 38vh, 440px);
  padding: 24px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--ink);
}
.identity { font-size: clamp(17px, 1.8vw, 25px); font-weight: 700; letter-spacing: -.055em; text-decoration: none; }
.masthead p { margin: 2px 0 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.projects { padding: 0 var(--pad); }
ol { margin: 0; padding: 0; list-style: none; }
li { border-bottom: 1px solid var(--rule); }
.project {
  min-height: clamp(116px, 16vw, 210px);
  display: grid;
  grid-template-columns: 8vw minmax(0, 1fr) minmax(130px, 20vw) auto;
  gap: 18px;
  align-items: center;
  text-decoration: none;
}
.index { align-self: start; padding-top: 24px; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-name { font-size: clamp(34px, 6.6vw, 108px); line-height: .88; letter-spacing: -.065em; }
.project-type { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.arrow { font-size: clamp(24px, 3vw, 42px); transition: transform 180ms ease; }
.project:hover .arrow { transform: translate(4px, -4px); }
.project:hover .project-name { font-style: italic; }

footer { min-height: 90px; padding: 22px var(--pad); display: flex; justify-content: space-between; align-items: flex-end; color: var(--muted); font-size: 10px; letter-spacing: .1em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

@media (max-width: 650px) {
  .masthead { min-height: 260px; }
  .project { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 20px 0; }
  .index { padding-top: 5px; }
  .project-name { font-size: clamp(38px, 13vw, 58px); }
  .project-type { grid-column: 2; grid-row: 2; }
  .arrow { grid-column: 3; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}