*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: #fff;
  color: #000;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0; color: #000;
}

/* ── NAVBAR ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: 56px; background: #fff;
  display: flex; align-items: center;
  padding: 0 24px;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}
nav.scrolled {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.nav-logo {
  flex-shrink: 0;
  display: flex; align-items: center;
}
.nav-logo svg { width: 30px; height: 34px; }

.nav-views {
  display: flex; gap: 20px; align-items: center;
  flex: 1;
}

.nav-views button {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; text-transform: uppercase;
  opacity: 0.35;
  transition: opacity 0.2s ease-out;
}
.nav-views button:hover { opacity: 1; }
.nav-views button.active { opacity: 1; }
.nav-views button .bkt { display: inline-block; position: relative; }
.nav-views button.active .bkt::after {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.nav-center {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.nav-center img { height: 36px; width: auto; }

@media (max-width: 600px) {
  nav { padding: 0 16px; height: 52px; }
  .nav-center img { height: 24px; }
  .nav-views { gap: 12px; }
  .nav-right { gap: 16px; }
  .nav-right button, .nav-right a { font-size: 11px; }
}

.nav-right {
  display: flex; gap: 22px; align-items: center; flex: 1; justify-content: flex-end;
}
.nav-right button, .nav-right a {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}
.nav-right button:hover, .nav-right a:hover { opacity: 0.4; }

.nav-back {
  display: none;
}

/* ── ABOUT OVERLAY ── */
#about-panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  background: #fff;
  padding: 70px 24px 48px 24px;
  display: none;
  grid-template-columns: 380px 1fr auto auto;
  gap: 0 60px;
  min-height: 220px;
}
#about-panel.open { display: grid; }

.about-col h4 {
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 18px;
}

.about-col p, .about-col a, .about-col span {
  font-size: 11px; line-height: 1.8;
  color: #999; display: block;
}
.about-col p.black { color: #000; }

.about-col .newsletter-btn {
  color: #000; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; margin-top: 14px; cursor: pointer;
}

.about-addresses {
  display: flex; flex-direction: column; gap: 24px;
}
.address-group p { color: #999; font-size: 11px; line-height: 1.7; }
.address-group p.name { color: #000; }

/* ── MAIN ── */
main { padding-top: 56px; }

/* ── LIST VIEW ── */
#list-view {
  padding: 80px 20px 100px 20px;
}

.project-grid {
  column-count: 4;
  column-gap: 28px;
}
@media (max-width: 1200px) { .project-grid { column-count: 3; } }
@media (max-width: 760px)  { .project-grid { column-count: 2; } }

.project-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: 34px;
}

.project-thumb {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ececec;
  padding: 14px;
  transition: opacity 0.4s;
}

.project-thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.project-grid:has(.project-item:hover) .project-item:not(:hover) .project-thumb {
  opacity: 0.06;
}

.project-grid:has(.project-item:hover) .project-item:not(:hover) .project-label {
  opacity: 0;
}

.project-label {
  padding: 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  transition: opacity 0.4s;
}

.project-label span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  line-height: 1.4;
}

.project-label .count {
  color: #000;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

/* ── FLOW VIEW ── */
#flow-view {
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  height: calc(100vh - 56px);
  cursor: grab;
}
#flow-view::-webkit-scrollbar { display: none; }
#flow-view.active { display: flex; }
#flow-view.grabbing { cursor: grabbing; }

.flow-track {
  display: flex;
  gap: 10px;
  padding: 40px 60px 0;
  align-items: flex-start;
  height: 100%;
  min-width: max-content;
}

.flow-card {
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: opacity 0.4s cubic-bezier(0.49, 0, 0.53, 1);
}

.flow-thumb {
  height: calc(100vh - 56px - 90px);
  aspect-ratio: 4/5;
  overflow: hidden;
  transition: opacity 0.4s;
}

.flow-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.49, 0, 0.53, 1);
}

.flow-card:hover .flow-thumb img {
  transform: scale(1.05);
}

.flow-track:has(.flow-card:hover) .flow-card:not(:hover) .flow-thumb {
  opacity: 0.06;
}

.flow-track:has(.flow-card:hover) .flow-card:not(:hover) .flow-card-label {
  opacity: 0;
}

.flow-card-label {
  padding: 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  max-width: calc((100vh - 56px - 90px) * 0.8);
  transition: opacity 0.4s;
}

.flow-card-label span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-card-label .count {
  color: #000;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

/* ── IMAGE PLACEHOLDERS (editorial palette) ── */
.c1  { background: linear-gradient(135deg, #c8a08a 0%, #8b5e4a 100%); }
.c2  { background: linear-gradient(135deg, #d4b896 0%, #9e7060 100%); }
.c3  { background: linear-gradient(135deg, #2a1e18 0%, #5a3c2c 100%); }
.c4  { background: linear-gradient(135deg, #b8927a 0%, #7c4e38 100%); }
.c5  { background: linear-gradient(135deg, #1a1a1a 0%, #3c3c3c 100%); }
.c6  { background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%); }
.c7  { background: linear-gradient(135deg, #8b0000 0%, #5c1a1a 100%); }
.c8  { background: linear-gradient(135deg, #4a3728 0%, #2a1e14 100%); }
.c9  { background: linear-gradient(135deg, #d4c5b0 0%, #a89070 100%); }
.c10 { background: linear-gradient(135deg, #1e2d1e 0%, #3a5a3a 100%); }
.c11 { background: linear-gradient(135deg, #b8c8d8 0%, #7890a8 100%); }
.c12 { background: linear-gradient(135deg, #f0e8d8 0%, #c8b898 100%); }
.c13 { background: linear-gradient(135deg, #2c1a2e 0%, #5c3a60 100%); }
.c14 { background: linear-gradient(135deg, #1a1a2e 0%, #3a3a5c 100%); }
.c15 { background: linear-gradient(135deg, #2e2a1a 0%, #5c5030 100%); }
.c16 { background: linear-gradient(135deg, #e8ddd0 0%, #c0a890 100%); }
.c17 { background: linear-gradient(135deg, #d0e8d0 0%, #90b890 100%); }
.c18 { background: linear-gradient(135deg, #e8d0d0 0%, #b88080 100%); }
.c19 { background: linear-gradient(135deg, #3a2010 0%, #6a4020 100%); }
.c20 { background: linear-gradient(135deg, #f5f0e8 0%, #d8c8a8 100%); }

/* ── FOOTER ── */
footer {
  border-top: 1px solid #e8e8e8;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 40px;
  align-items: start;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.footer-links {
  display: flex; gap: 18px; align-items: center;
}
.footer-links a, .footer-links button {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #999;
}

.footer-copyright { color: #999; font-size: 10px; }

.footer-credit { color: #999; font-size: 10px; text-transform: uppercase; }
.footer-credit a { color: #000; }

/* ── NEWSLETTER MODAL ── */
#newsletter-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(255,255,255,0.96);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 20px;
}
#newsletter-modal.open { display: flex; }
#newsletter-modal h3 {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
}
#newsletter-modal form {
  display: flex; gap: 0;
}
#newsletter-modal input {
  border: 1px solid #000; border-right: none;
  padding: 10px 16px; font-family: inherit; font-size: 11px;
  outline: none; width: 280px;
}
#newsletter-modal button[type="submit"] {
  border: 1px solid #000; padding: 10px 20px;
  background: #000; color: #fff;
  font-family: inherit; font-size: 11px; cursor: pointer;
  letter-spacing: 0.06em; text-transform: uppercase;
}
#newsletter-modal .close-modal {
  position: absolute; top: 24px; right: 24px;
  font-size: 11px; cursor: pointer; letter-spacing: 0.06em;
}