/* ヘッダー、9セクションの主要グリッド、フッターの配置を担当する。
 * レスポンシブ上書きは media.css のみに置く。 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--soft-line);
  background: var(--surface);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2.5vw, 2rem);
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(9rem, 18vw, 15rem) clamp(8rem, 16vw, 13.75rem);
}

.hero-inner {
  position: relative;
  z-index: 3;
}

.section {
  position: relative;
  padding-block: var(--space-section);
}

.section-heading {
  margin-bottom: clamp(4.5rem, 10vw, 8rem);
}

.heading-row {
  display: grid;
  grid-template-columns: .42fr 1.58fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.darkroom-head {
  display: grid;
  grid-template-columns: .42fr 1.18fr max-content;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.darkroom-head .light-switch {
  align-self: end;
  justify-self: end;
}

.statement-grid {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: clamp(7rem, 14vw, 12rem) clamp(1.25rem, 3vw, 2.5rem);
}

.work-card-narrow {
  grid-column: span 5;
}

.work-card-wide {
  grid-column: span 7;
}

.darkroom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: clamp(5rem, 10vw, 9rem) clamp(2rem, 5vw, 5rem);
}

.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}

.comparison {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}

.comparison-control {
  grid-column: 2;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.commission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}

.about-grid {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.contact-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: end;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}