:root {
    --bg: #e7e1d7; --text: #0c0c0b; --muted: rgba(12,12,11,.6); --line: rgba(12,12,11,.16); --card: rgba(12,12,11,.06);
    --panel: #fcfcfb; --button: #0c0c0b; --button-text: #fcfcfb;
    --sans: "Instrument Sans", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --mono: "Geist Mono", ui-monospace, Menlo, monospace;
    --strip-h: clamp(152px, 14vw, 240px);
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    --bg: #0d0d0c; --text: #ede8df; --muted: rgba(237,232,223,.6); --line: rgba(237,232,223,.16); --card: rgba(237,232,223,.07);
    --panel: #171716; --button: #ede8df; --button-text: #0d0d0c;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0d0d0c; --text: #ede8df; --muted: rgba(237,232,223,.6); --line: rgba(237,232,223,.16); --card: rgba(237,232,223,.07);
      --panel: #171716; --button: #ede8df; --button-text: #0d0d0c;
      color-scheme: dark;
    }
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--sans);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px;
}

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

.project { padding: clamp(96px, 14vw, 160px) 16px 0; max-width: 1120px; margin: 0 auto; }

/* Labels: small mono caps */

.about__name, .index-label {
  margin: 0; font: 400 12px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

/* About block */

.about { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.about__title {
  margin: 0; font: 400 clamp(44px, 7vw, 104px)/.98 var(--serif); letter-spacing: -.02em;
}
.about__text { margin: 0; color: var(--muted); max-width: 60ch; font-size: 17px; line-height: 1.5; }
.about__links { margin: 0; color: var(--muted); }
.about__links a, .about__text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.about__links a:hover, .about__text a:hover { color: var(--muted); }

/* Word mask for headings that rise in */

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wi { display: inline-block; }

/* Frames: landscape frames run full width, portrait frames sit in pairs */

.frames { display: flex; flex-direction: column; gap: 8px; margin: 112px auto 0; }
.line { display: flex; gap: 8px; justify-content: center; }
.line--pair { width: min(100%, 760px); margin: 0 auto; }

.frame { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; background: var(--card); }
.frame--wide { flex: 1 1 100%; }
.frame img { display: block; width: 100%; height: auto; }

/* Stand-in frames for projects that do not have screenshots yet */

.frame--ph { aspect-ratio: 1900 / 2160; }
.frame--ph.frame--wide { aspect-ratio: 16 / 9; }

.t-navy { background: #16254d; }
.t-gold { background: #c9a24a; }
.t-paper { background: #ece7da; }
.t-type { display: grid; place-items: center; font: 500 22px var(--sans); letter-spacing: -.02em; color: #fff; height: 100%; }
.t-type.dk { color: #16254d; }
.t-lawn { background: repeating-linear-gradient(90deg, #2f5d3a 0 22px, #3a6d46 22px 44px); }
.t-lawn2 { background: repeating-linear-gradient(0deg, #1f4429 0 14px, #26502f 14px 28px); }
.t-sky { background: linear-gradient(180deg, #f3c58a, #f7e7cf 70%); }
.t-mint { background: #dbe8dc; }
.t-ink { background: #161616; }
.t-clock { background: #f2f2ef; }
.t-clock::after { content: ""; position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(#161616 0 62%, #d7d7d2 0); -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px); }
.t-glow { background: #0b0b12; }
.t-glow::before { content: ""; position: absolute; inset: 0; background:
  repeating-linear-gradient(115deg, transparent 0 14px, rgba(120,170,255,.55) 14px 15px, transparent 15px 30px),
  repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,140,200,.4) 22px 23px, transparent 23px 44px);
}
.t-glow.b::before { transform: scaleX(-1); }

/* Index list (Work page) */

.index { list-style: none; margin: 96px 0 0; padding: 0; border-top: 1px solid var(--line); }
.index a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.index__name { font: 500 clamp(24px, 3vw, 40px)/1.1 var(--sans); letter-spacing: -.03em; transition: opacity .25s; }
.index a:hover .index__name { opacity: .5; }
.index__kind { color: var(--muted); font-size: 15px; text-align: right; }
.index a:hover .index__kind { color: var(--text); }

.body-copy { margin: 96px 0 0; max-width: 60ch; display: flex; flex-direction: column; gap: 16px; font-size: 18px; line-height: 1.5; }
.body-copy p { margin: 0; color: var(--muted); }
.body-copy a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (max-width: 720px) {
  .project { padding-top: 88px; }
  .frames { margin-top: 80px; }
  .index { margin-top: 64px; }
  .index a { flex-direction: column; gap: 4px; }
  .index__kind { text-align: left; }
}