/* ==========================================================================
   Sarle Art Gallery & Studio — gallery (story) page
   Loaded after style.css + shop.css (reuses the .shop-title band).
   ========================================================================== */

.g-section { background: var(--bg); padding: clamp(56px, 9vh, 120px) clamp(18px, 4vw, 56px); }
.g-section + .g-section { padding-top: 0; }

/* Story */
.g-story.two-col { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.g-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.g-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-caption {
  margin: 14px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.g-name {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(42px, 6vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.g-sticky { position: sticky; top: 120px; }
@media (max-width: 879px) { .g-sticky { position: static; } }
.g-text { display: flex; flex-direction: column; gap: clamp(15px, 2.2vh, 20px); margin-top: clamp(26px, 4vh, 44px); max-width: 58ch; }
.g-text p { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.g-text p strong { color: var(--fg); font-weight: 500; }
.g-text p.g-lead { color: var(--fg); font-weight: 500; }
.g-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.g-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg);
}

/* Big quote */
.g-quote-wrap { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(48px, 9vh, 110px) 0; }
.g-quote {
  margin: 0;
  max-width: none;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.g-quote-by {
  margin: clamp(22px, 3.4vh, 36px) 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}

/* Values / atmosphere */
.g-values.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.g-h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(42px, 6.6vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* First year stats */
.g-stats { margin-top: clamp(30px, 5vh, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.g-stat { padding: clamp(22px, 3vh, 34px) clamp(0px, 2vw, 28px) 0 0; }
.g-stat + .g-stat { padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--hairline); }
.g-stat-num {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(56px, 8vw, 128px);
  line-height: 1.05;
  color: var(--fg);
}
.g-stat-label {
  margin: 18px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 619px) {
  .g-stats { grid-template-columns: minmax(0, 1fr); }
  .g-stat + .g-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); margin-top: 22px; }
}

/* Full-bleed image */
.g-bleed { aspect-ratio: 16 / 8; overflow: hidden; }
.g-bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Closing */
.g-closing { text-align: center; padding: clamp(80px, 14vh, 180px) clamp(18px, 4vw, 56px); background: var(--bg); }
.g-closing-line {
  margin: 0 auto;
  max-width: 18ch;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(38px, 6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.g-closing-thanks {
  margin: clamp(30px, 5vh, 56px) 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg);
}
.g-closing-memory { margin: 10px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* Intro + mosaic */
.g-intro-lead {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.12;
  color: var(--fg);
  text-wrap: pretty;
}
.g-intro-lead strong { font-weight: 400; }
.g-mosaic { margin-top: clamp(40px, 7vh, 90px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 20vw, 290px); gap: clamp(10px, 1.4vw, 20px); }
.g-tile { overflow: hidden; }
.g-tile--tall { grid-row: span 2; }
.g-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 619px) { .g-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } .g-mosaic .g-tile:last-child { grid-column: 1 / -1; } }
.g-stat-num--word { font-size: clamp(36px, 4.4vw, 72px); line-height: 1.05; padding-top: 0.28em; overflow-wrap: anywhere; }
.g-values .g-intro-lead { margin: 0; }
.g-closing-year { margin: clamp(26px, 4vh, 44px) auto 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.g-closing-label { margin: clamp(40px, 7vh, 80px) 0 0; }
.g-founder.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.g-founder-text { padding-top: clamp(0px, 8vh, 110px); }
.g-founder-media .g-photo { max-height: calc(100vh - 360px); min-height: 320px; aspect-ratio: 4 / 5; }
@media (max-width: 879px) { .g-founder-media { order: -1; } .g-founder-text { padding-top: 0; } .g-founder-media .g-photo { max-height: none; } }
#founder .g-sticky .g-photo { max-height: calc(100vh - 180px); max-height: calc(100svh - 180px); }
@media (max-width: 879px) { #founder .g-sticky .g-photo { max-height: none; } }
@media (max-width: 879px) {
  #founder { display: flex; flex-direction: column; }
  #founder > .wrap:first-child { order: 2; }
  #founder > .wrap:first-child .g-bleed { margin-bottom: 0 !important; margin-top: 16px; }
}