@import url('fonts/fonts.css');

.skip-link { position: absolute; top: -100px; left: 0; background: #111; color: #fff; padding: 12px 24px; z-index: 9999; transition: top 0.3s; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.skip-link:focus { top: 0; outline: none; }
picture { display: block; width: 100%; }
body { font-family: 'Outfit', sans-serif; margin: 0; background: #fff; color: #111; overflow-x: hidden; }

/* Global Links Standard */
a { color: #888; text-decoration: none; transition: color 0.3s; }
a:hover, a.active { color: #111; }
.logo-link { font-weight: 800; }

/* Header & Nav */
.header { padding: 5rem 8vw 6rem 8vw; display: flex; justify-content: center; }
.nav { display: flex; gap: 4rem; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }

/* Index Projects */
.project { margin-bottom: 8rem; padding: 0 8vw; text-align: center; }
.project img { width: 100%; height: auto; display: block; margin-bottom: 2rem; }
.project-title { font-size: clamp(3rem, 7vw, 6rem); margin: 0 0 0.5rem 0; font-weight: 400; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; }
.project-meta { font-size: 0.9rem; color: #444; letter-spacing: 0.02em; font-weight: 400; text-transform: none; }

/* Project Detail Page */
.hero-wrapper { padding: 0 8vw; }
.hero-img { width: 100%; height: auto; display: block; }
.content-block { padding: 8rem 8vw; display: flex; justify-content: space-between; align-items: flex-start; text-align: left; }
.title-group { display: flex; flex-direction: column; }
.title-group .project-meta { margin-top: 1.5rem; }

.project-desc { max-width: 50%; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.6; color: #444; font-weight: 300; }
.gallery { padding: 0 8vw; }
.gallery-row { display: flex; gap: 2rem; margin-bottom: 2rem; }
.gallery-row img { width: 100%; object-fit: cover; }
.w-50 { width: 50%; }
.w-100 { width: 100%; margin-bottom: 2rem; }
.project-nav { padding: 8rem 8vw; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e5e5e5; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.nav-left { flex: 1; text-align: left; }
.nav-center { flex: 1; text-align: center; }
.nav-right { flex: 1; text-align: right; }

/* Sequence Page */
.sequence-container { padding: 4rem 8vw 10rem 8vw; }
.sequence-list { border-top: 1px solid #e5e5e5; display: flex; flex-direction: column; }
.sequence-item {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1.5fr 2fr 1.5fr 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.9rem;
}
div.sequence-item { color: #444; cursor: default; }
.seq-col { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seq-award { text-align: right; }

/* Dialogue Page */
.contact-line { display: flex; font-size: 1.1rem; line-height: 1.6; margin-bottom: 0.5rem; }

.contact-label { width: 7rem; color: #444; }
.dialogue-contacts { padding-top: 0.6rem; }
.contact-val { color: #444; }

/* Footer */
.footer { padding: 6rem 8vw 4rem 8vw; display: flex; justify-content: space-between; font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.6; text-align: left; }
.footer-left { max-width: 60%; }
.footer-right { text-align: right; display: flex; flex-direction: column; justify-content: space-between; }
.footer a { border-bottom: none; padding-bottom: 1px; transition: color 0.3s, border-color 0.3s; }
.footer a:hover { color: #111; }

/* Mobile */
@media (max-width: 900px) { `n  .header { padding: 4rem 5vw; }
  .hero-wrapper { padding: 0 5vw; }
  .nav { flex-wrap: nowrap; gap: clamp(1rem, 3vw, 2rem); justify-content: center; font-size: clamp(0.75rem, 3.5vw, 0.9rem); }
  .project { margin-bottom: 4rem; padding: 0 5vw; }
  .project img { margin-bottom: 1rem; }
  .content-block { flex-direction: column; align-items: flex-start; gap: 3rem; padding: 4rem 5vw; }
  .dialogue-contacts { order: 2; }
  .dialogue-vision { order: 1; margin-bottom: 2rem; }
  .project-desc { max-width: 100%; font-size: 1.1rem; }
  .gallery { padding: 0 5vw; }
  .gallery-row { flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
  .w-50 { width: 100%; }
  .w-100 { margin-bottom: 1rem; }
  .project-nav { padding: 4rem 5vw; }
  .sequence-item { grid-template-columns: 1fr 1.5fr 2fr; }
  .seq-type, .seq-client, .seq-award, .seq-loc { display: none; }
  .seq-status { text-align: right; }
  .footer { flex-direction: column; gap: 3rem; padding: 4rem 5vw; }
  .footer-left { max-width: 100%; }
  .footer-right { text-align: left; }
}