:root {
  --bg: #fff;
  --fg: #0a0a0a;
  --muted: #8c8c8c;
  --line: #e6e6e6;
  --soft: #eeeeee;
  --gutter: 16px;
  --bar-h: 44px;
  --spring: cubic-bezier(.2, .9, .25, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font: 400 10px/1.5 "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* translucent top bar; content scrolls beneath */
.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.bar nav { display: flex; gap: 1.5rem; }
.bar a { transition: opacity .2s; }
.bar a:hover { opacity: .5; }

/* public header: 4 columns — brand | Info | Index | Contact */
.bar.site { display: grid; grid-template-columns: 1fr 1fr 1fr auto; }
.bar.site nav { display: contents; }
.bar.site .brand { text-transform: uppercase; }
.bar.site nav a:last-child { justify-self: end; }
@media (max-width: 640px) {
  .bar.site { display: flex; }
  .bar.site nav { display: flex; gap: 1rem; }
}

main { padding: 78px var(--gutter) 10vh; flex: 1 0 auto; }

/* project collage: images keep their own proportions (never cropped);
   width follows orientation, with small offsets for a loose, editorial rhythm */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 56px var(--gutter); align-items: start; grid-auto-flow: row dense; }
.card { display: block; grid-column: span 5; -webkit-tap-highlight-color: transparent; }
.card.l { grid-column: span 7; }   /* landscape */
.card.m { grid-column: span 5; }   /* near-square */
.card.p { grid-column: span 4; }   /* portrait */
.thumb { background: var(--soft); transition: transform .4s var(--spring); }
.thumb img, .thumb .ph { width: 100%; height: auto; transition: transform 1s var(--spring); }
.thumb .ph { aspect-ratio: 4 / 5; }
.thumb { overflow: hidden; }
.card:hover .thumb img { transform: scale(1.025); }
.card:active .thumb { transform: scale(.99); transition-duration: .1s; }

/* loose offsets, repeating */
.card:nth-child(5n+2) { margin-top: 2vw; }
.card:nth-child(5n+3) { margin-top: 1vw; }
.card:nth-child(5n+4) { margin-top: 6vw; }
.card:nth-child(5n+5) { margin-top: 2vw; }
/* tidy-but-loose: cards sit on a shared 12-col grid, alternating between the
   left and right of their cell so the rhythm feels intentional, not random */
.card:nth-child(4n+2), .card:nth-child(4n+3) { justify-self: end; width: 92%; }
.card:nth-child(4n+4) { justify-self: center; width: 96%; }

@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 40px var(--gutter); }
  .card:nth-child(n), .card.l, .card.m, .card.p { grid-column: span 1; margin-top: 0; width: auto; justify-self: stretch; }
  .card.l { grid-column: span 2; }
  .card:nth-child(2n) { margin-top: 12vw; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .card:nth-child(n), .card.l { grid-column: span 1; margin-top: 0; }
}

.cap { display: flex; justify-content: space-between; gap: 1rem; padding-top: .55rem; }
.cap .n { font-variant-numeric: tabular-nums; }
.cap .t { text-align: right; }
.empty { color: var(--muted); }
.empty a { text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }

/* index (list view) */
.index { list-style: none; border-top: 1px solid var(--line); }
.index a {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--gutter);
  padding: .8rem 0; border-bottom: 1px solid var(--line); transition: opacity .2s;
}
.index a:hover { opacity: .5; }
.index .r { justify-self: end; }
@media (max-width: 640px) { .index a { grid-template-columns: auto 1fr auto; } .index .hide { display: none; } }

/* project page */
.project { max-width: 1500px; }
.phead { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--gutter); margin-bottom: 40px; }
.phead h1 { font-size: inherit; font-weight: 400; }
.phead .meta { color: var(--muted); }
@media (max-width: 640px) { .phead { grid-template-columns: 1fr 1fr; } }
.desc { max-width: 60ch; margin: 0 0 56px calc((100% - 2 * var(--gutter)) / 3 + var(--gutter)); }
@media (max-width: 640px) { .desc { margin-left: 0; } }
.gallery { display: grid; gap: var(--gutter); }
.gallery figure { background: var(--soft); }
.gallery img { width: 100%; height: auto; }
.pnav { display: flex; justify-content: space-between; margin-top: 80px; }
.pnav a:hover { opacity: .5; }

/* info page */
.about { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--gutter); }
.about .lead { grid-column: 1 / span 3; }
.about h1 { font-size: inherit; font-weight: 400; color: var(--muted); margin-bottom: 1rem; }
.about .prose { font-size: 10px; line-height: 1.3; letter-spacing: -.02em; max-width: 36em; }
@media (max-width: 640px) { .about { display: block; } }

/* contact page */
.contactpage { border-top: 1px solid var(--line); }
.crow { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--gutter); padding: .9rem 0; border-bottom: 1px solid var(--line); }
.crow .lbl { color: var(--muted); }
.crow > span:last-child { grid-column: 2 / span 2; }
.crow a { transition: opacity .2s; }
.crow a:hover { opacity: .5; }
@media (max-width: 640px) { .crow { grid-template-columns: 7rem 1fr; } .crow > span:last-child { grid-column: auto; } }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.5rem var(--gutter); color: var(--muted); }
.foot a { transition: opacity .2s; }
.foot a:hover { opacity: .5; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--spring), transform .8s var(--spring); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity .3s; }
  .thumb, .thumb img { transition: none; }
  .card:hover .thumb img { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.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; }

/* info page: services + FAQ as dropdowns */
.about h2 { font-size: inherit; font-weight: 400; color: var(--muted); margin: 6vh 0 .6rem; }
.about .txt { max-width: 56em; }
.acc { margin-top: 6vh; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; -webkit-tap-highlight-color: transparent; transition: opacity .2s; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--muted); font-size: 14px; line-height: 1; transition: transform .35s var(--spring); }
.acc details:not(.js)[open] > summary::after, .acc details.js.is-open > summary::after { transform: rotate(45deg); }
.acc summary:hover { opacity: .55; }
.acc .plain { list-style: none; padding: 0 0 1rem; }
.acc .plain li { padding: .3rem 0; }
.acc .txt { padding: 0 0 1rem; color: var(--muted); }
.acc .faq { padding: 0 0 .5rem 1.25rem; }
.acc .faq details { border-bottom: 0; }
.acc .faq summary { padding: .5rem 0; color: var(--fg); }
.acc .faq p { color: var(--muted); max-width: 56em; padding: 0 0 .9rem; }
@media (prefers-reduced-motion: reduce) { .acc summary::after { transition: none; } }

.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; }

/* info page: services + FAQ */
.about h2 { font-size: inherit; font-weight: 400; color: var(--muted); margin: 6vh 0 .6rem; }
.about .txt { max-width: 56em; }

/* project gallery, desktop: photos sit side by side on a 12-col grid at their natural proportions
   (never cropped); width follows orientation, with small offsets for a loose-but-structured rhythm */
@media (min-width: 961px) {
  .gallery { grid-template-columns: repeat(12, 1fr); gap: 72px var(--gutter); align-items: start; grid-auto-flow: row dense; }
  .gallery figure.l { grid-column: span 7; }
  .gallery figure.m { grid-column: span 5; }
  .gallery figure.p { grid-column: span 4; }
  .gallery figure:nth-child(4n+2) { margin-top: 5vw; justify-self: end; }
  .gallery figure:nth-child(4n+3) { margin-top: 1vw; }
  .gallery figure:nth-child(4n+4) { margin-top: 7vw; justify-self: end; width: 94%; }
  .gallery figure:only-child { grid-column: 3 / span 8; }
}