/* =============================================
   CSS Custom Properties
   ============================================= */
:root {
  --color-background: #f9f9f7;
  --color-primary: #000000;
  --color-outline: #747878;
  --color-outline-variant: #c4c7c7;
  --color-surface-variant: #e2e3e1;
  --color-on-primary: #ffffff;
  --color-tonal-block: #c1b4a6;
  --color-on-tertiary-container: #838484;
  --color-tertiary: #000000;

  --font-hanken: 'Hanken Grotesk', system-ui, sans-serif;
  --font-caslon: 'Libre Caslon Text', Georgia, serif;

  --spacing-mobile: 12px;
  --spacing-desktop: 32px;
  --gutter: 8px;
  --unit: 6px;
}

/* =============================================
   Base Reset
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-background);
  color: var(--color-primary);
  font-family: var(--font-hanken);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================
   Typography Utilities
   ============================================= */
.label-sm {
  font-family: var(--font-hanken);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  display: block;
}

.display-title {
  font-family: var(--font-hanken);
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 300;
  color: var(--color-primary);
  text-transform: uppercase;
}

/* Hero / Site title */
.site-hero {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--unit) * 4) 0;
}

.display-title.boxed {
  background-color: rgba(0,0,0,0.03);
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--color-outline-variant);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.label-sm.white {
  color: var(--color-on-primary);
}

.label-sm.muted-60 {
  opacity: 0.6;
}

/* =============================================
   Navigation
   ============================================= */
.nav-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-tertiary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--unit) * 4) var(--spacing-mobile);
}

@media (min-width: 768px) {
  .nav-header {
    padding-left: var(--spacing-desktop);
    padding-right: var(--spacing-desktop);
  }
}

/* Brand */
.brand {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.brand-m {
  font-family: var(--font-hanken);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: -0.04em;
  line-height: 1;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text .label-sm {
  color: var(--color-primary);
}

.brand-text .label-sm:last-child {
  line-height: 1;
}

/* Desktop Nav */
.main-nav {
  display: none;
  gap: 32px;
}

@media (min-width: 768px) {
  .main-nav {
    display: flex;
  }
}

.nav-link {
  font-family: var(--font-hanken);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.nav-link:hover {
  opacity: 0.7;
}

.nav-link.active {
  border-bottom: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.nav-link.muted {
  color: var(--color-outline);
}

/* Mobile menu button */
.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: 4px;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
}

@media (min-width: 768px) {
  .menu-btn {
    display: none;
  }
}

/* =============================================
   Main Content
   ============================================= */
.main-content {
  flex: 1;
  padding: var(--spacing-mobile);
}

@media (min-width: 768px) {
  .main-content {
    padding: var(--spacing-desktop);
  }
}

/* =============================================
   Masonry Grid (CSS Columns)
   ============================================= */
.masonry-grid {
  /* Use CSS columns for a true masonry flow */
  column-gap: var(--gutter);
  -webkit-column-gap: var(--gutter);
  /* Responsive column counts */
  column-count: 1;
}

/* Grid items base (column layout) */
.grid-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--gutter) 0;
  overflow: hidden;
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}

/* Image transition and natural sizing */
.grid-item img {
  transition: filter 0.7s ease;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.grid-item img.grayscale {
  filter: grayscale(100%);
}

.grid-item:hover img.grayscale {
  filter: grayscale(0%);
}

/* ---- Item Layout: Mobile (stacked) ---- */
.item-tall-left,
.item-title-center,
.item-square-right,
.item-wide-center,
.item-small-sq-1,
.item-small-sq-2,
.item-tall-right,
.item-wide-bottom,
.item-wide-right-bottom,
.item-long-landscape,
.item-sq-bottom-right {
  grid-column: span 12;
}

.item-tonal-block {
  grid-column: span 12;
  background-color: var(--color-tonal-block);
  padding: calc(var(--unit) * 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-height: 120px;
}

/* Mobile aspect ratios */
.item-tall-left { aspect-ratio: 0.67; }
.item-title-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-mobile) 0;
}
.item-square-right { aspect-ratio: 1; }
.item-wide-center { aspect-ratio: 1.75; }
.item-small-sq-1 { aspect-ratio: 1; }
.item-small-sq-2 { aspect-ratio: 1; }
.item-tall-right { aspect-ratio: 0.67; }
.item-wide-bottom { aspect-ratio: 1.75; }
.item-wide-right-bottom { aspect-ratio: 1.75; }
.item-long-landscape { aspect-ratio: 1.75; }
.item-sq-bottom-right { aspect-ratio: 1; }

/* ---- Item Layout: Desktop ---- */
@media (min-width: 768px) {
  .masonry-grid {
    column-count: 2;
  }
  /*
    Row 1-2: [tall-left:4cols x 2rows] [title:4cols x 1row] [square-right:4cols x 1row]
                                        [wide-center:8cols x 1row]
    Row 3:   [small-sq-1:3cols] [small-sq-2:3cols] [tall-right:6cols x 2rows]
    Row 4:   [wide-bottom:6cols]
    Row 5:   [tonal-block:4cols] [wide-right-bottom:8cols]
    Row 6:   [long-landscape:8cols] [sq-bottom-right:4cols]
  */

  .item-tall-left {
    grid-column: span 4;
    grid-row: span 2;
    aspect-ratio: unset;
  }

  .item-title-center {
    grid-column: span 4;
    grid-row: 1;
    padding: 0;
  }

  .item-square-right {
    grid-column: span 4;
    grid-row: 1;
    aspect-ratio: 1;
  }

  @media (min-width: 992px) {
    .masonry-grid {
      column-count: 3;
    }
  }

  @media (min-width: 1200px) {
    .masonry-grid {
      column-count: 4;
    }
  }

  .item-wide-center {
    grid-column: span 8;
    grid-row: 2;
    aspect-ratio: unset;
    min-height: 260px;
  }

  .item-small-sq-1 {
    grid-column: span 3;
    aspect-ratio: 1;
  }

  .item-small-sq-2 {
    grid-column: span 3;
    aspect-ratio: 1;
  }

  .item-tall-right {
    grid-column: span 6;
    grid-row: span 2;
    aspect-ratio: unset;
    min-height: 420px;
  }

  .item-wide-bottom {
    grid-column: span 6;
    aspect-ratio: unset;
    min-height: 220px;
  }

  .item-tonal-block {
    grid-column: span 4;
    min-height: 180px;
  }

  .item-wide-right-bottom {
    grid-column: span 8;
    aspect-ratio: unset;
    min-height: 180px;
  }

  .item-long-landscape {
    grid-column: span 8;
    aspect-ratio: unset;
    min-height: 300px;
  }

  .item-sq-bottom-right {
    grid-column: span 4;
    aspect-ratio: 1;
  }
}

/* =============================================
   Footer
   ============================================= */
.site-footer {
  width: 100%;
  border-top: 1px solid var(--color-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 2);
  padding: var(--spacing-mobile);
  background-color: var(--color-background);
}

@media (min-width: 768px) {
  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--spacing-desktop);
    padding-right: var(--spacing-desktop);
  }
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .footer-right {
    flex-direction: row;
    align-items: center;
  }
}

.copyright {
  color: var(--color-primary);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-link {
  font-family: var(--font-hanken);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-on-tertiary-container);
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--color-primary);
}