:root {
  --bg: #ffffff; --fg: #111111; --muted: #9a9a9a; --ph: #e4e4e4; --line: #cfcfcf;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e0e0e; --fg: #eeeeee; --muted: #7d7d7d; --ph: #232323; --line: #3a3a3a; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 11px; line-height: 1.45; padding: 3.5rem 1rem 4rem; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; gap: .4rem; padding: .7rem 1rem; background: linear-gradient(var(--bg) 60%, transparent); }
.chip { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: .15rem .5rem; cursor: pointer; }
.chip:hover { border-color: var(--fg); text-decoration: none; }

.info { position: fixed; top: 2.8rem; left: 1rem; z-index: 10; max-width: 26rem; padding: .8rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; }

.board { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3rem 1.1rem; padding-bottom: 4rem; }
.item { margin: 0; }
.item.w1 { width: clamp(120px, 12vw, 180px); }
.item.w2 { width: clamp(200px, 20vw, 300px); }
.item.w3 { width: clamp(280px, 30vw, 440px); }
.ph { width: 100%; background: var(--ph); color: var(--muted); display: grid; place-items: center; transition: opacity .15s; }
.item a:hover .ph { opacity: .7; }
.r45 { aspect-ratio: 4/3; } .r56 { aspect-ratio: 16/10; } .r70 { aspect-ratio: 10/7; }
.r75 { aspect-ratio: 4/3; } .r100 { aspect-ratio: 1; } .r130 { aspect-ratio: 3/4; }
figcaption { margin-top: .35rem; color: var(--muted); }

.text { max-width: 46rem; padding: 2rem 0; border-top: 1px solid var(--line); margin-bottom: 1rem; scroll-margin-top: 3rem; }
.text h2 { font-size: 11px; font-weight: 400; color: var(--muted); margin-bottom: .8rem; }
.text p { margin-bottom: .4rem; }
.text a { text-decoration: underline; text-underline-offset: 2px; }
table { border-collapse: collapse; width: 100%; }
td { padding: .25rem 1.5rem .25rem 0; vertical-align: top; }
td:first-child { color: var(--muted); white-space: nowrap; }

.stamp { position: fixed; left: 1rem; bottom: .8rem; color: var(--muted); background: var(--bg); padding: 0 .3rem; border: 1px solid var(--line); border-radius: 3px; }

@media (max-width: 640px) {
  .item.w1 { width: calc(50% - .55rem); }
  .item.w2, .item.w3 { width: 100%; }
  .bar { flex-wrap: wrap; }
}

.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; padding-bottom: 4rem; scroll-margin-top: 3rem; }
.feature-text { max-width: 34rem; }
.feature-text h1 { font-size: 11px; font-weight: 400; margin: .3rem 0 .8rem; }
.feature-text p { margin-bottom: .8rem; }
.feature-text .q { color: var(--fg); }
.feature-text .meta { color: var(--muted); }
.feature-text a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } }

.gallery { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .8rem; margin: 0 -1rem 4rem; padding-inline: 1rem; scroll-snap-type: x proximity; }
.gallery img { height: clamp(280px, 44vw, 520px); width: auto; flex: none; display: block; scroll-snap-align: start; background: var(--ph); }
.feature + .gallery { margin-top: -2.5rem; }
.feature-media img { width: 100%; height: auto; display: block; }
.gallery.photos img { height: clamp(200px, 30vw, 340px); }
.gallery { margin-bottom: 2rem; }
.feature + .gallery { margin-top: -2.5rem; }
.gallery video { height: clamp(280px, 44vw, 520px); width: auto; flex: none; display: block; background: var(--ph); }

figure { margin: 0; }
figcaption { display: none; color: var(--muted); }
.project { display: block; }
.lead-d { display: none; }

.desc p { margin-bottom: .6rem; }
.desc .more { display: none; }
.desc.open span.more { display: inline; }
.desc.open p.more { display: block; }
.more-btn { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.more-btn:hover { color: var(--fg); }

@media (min-width: 900px) {
  body { padding-inline: 1.25rem; }
  .project { margin-bottom: 3rem; }
  .project .feature { display: block; padding: 0; }
  .project .feature-media { display: none; }
  .project .feature-text { max-width: 46rem; margin-bottom: .9rem; }
  .project .feature-text h1 { margin-bottom: .5rem; }
  .lead-d { display: block; }
  .project .gallery { display: flex; gap: .45rem; align-items: flex-end; overflow-x: auto; margin: 0; padding: 0 0 .7rem; scroll-snap-type: none; }
  .project .gallery figure { flex: none; }
  .project .gallery img, .project .gallery video { height: clamp(220px, 22vw, 320px); width: auto; display: block; background: var(--ph); }
  .project .gallery figcaption { display: block; margin-top: .35rem; }
}
.desc ul { margin: 0 0 .6rem 1.1rem; padding: 0; list-style: none; }
.desc ul li { margin-bottom: .25rem; position: relative; }
.desc ul li::before { content: "–"; position: absolute; left: -1.1rem; color: var(--muted); }
.desc ul.more { display: none; }
.desc.open ul.more { display: block; }