/* ============================================================
   GÜLSÜN ERDAŞ STUDIO — Layout
   A 12-column editorial grid. Each item places itself with custom
   properties set in markup (--col, --row, --align, --drop, plus
   --col-m / --drop-m below 900px), so every asymmetric composition
   is written where its content lives.
   ============================================================ */

/* clip, not hidden: bleeds and watermarks can't create sideways
   scroll, and the cinematic's position: sticky keeps working. */
main { display: block; overflow-x: clip; }

.ge-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  max-width: var(--max);
  margin-inline: auto;
}
.ge-grid > * {
  position: relative;
  z-index: 1;
  min-width: 0;
  grid-column: var(--col, 1 / -1);
  grid-row: var(--row, auto);
  align-self: var(--align, auto);
  margin-top: var(--drop, 0px);
}
.ge-grid > .ge-watermark { position: absolute; z-index: 0; margin: 0; }

@media (max-width: 900px) {
  .ge-grid > * {
    grid-column: var(--col-m, 1 / -1);
    grid-row: auto;
    align-self: auto;
    margin-top: var(--drop-m, 0px);
  }
  .ge-grid > .ge-caption { margin-top: var(--drop-m, 16px); }
}

.ge-grid > .ge-signature__name { margin-bottom: var(--space-m); }

.ge-stack > * + * { margin-top: var(--space-s); }
.ge-stack--tight > * + * { margin-top: 10px; }
.ge-stack--loose > * + * { margin-top: var(--space-m); }
.ge-links { display: flex; flex-wrap: wrap; gap: 0 clamp(24px, 2.6vw, 44px); }

/* Full-bleed toward one viewport edge, from inside a centered grid. */
.ge-bleed-l { margin-left: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2)); }
.ge-bleed-r { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2)); }

/* ============================================================
   Page regions
   ============================================================ */

.ge-section { position: relative; padding: var(--space-l) var(--gutter); }
.ge-section--flush-top { padding-top: 0; }
.ge-intro { position: relative; padding: calc(var(--header-h) + var(--space-m)) var(--gutter) var(--space-l); }
.ge-chapter { padding-top: var(--space-l); }
.ge-exhibit { padding: 0 var(--gutter); }
.ge-plate { padding-top: var(--space-l); }
.ge-interlude { padding-block: var(--space-xl) var(--space-m); }

/* Every page settles from the ground into the anthracite footer
   through its last section, so there is no hard seam. */
main > section:last-of-type:not([class*="ge-tone--"]) { background: linear-gradient(180deg, var(--ground) 0%, var(--anthracite) 100%); }
main > section.ge-tone--bordo:last-of-type { background: linear-gradient(180deg, var(--tone-bg) 0%, var(--tone-bg) 62%, #2b1a1b 100%); }

/* ============================================================
   Header
   ============================================================ */

.ge-header {
  position: absolute; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: var(--gap);
  padding: clamp(14px, 2vw, 32px) var(--gutter);
}
.ge-logo { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.ge-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 56px); }
.ge-header__aside { justify-self: end; }
.ge-nav-toggle { display: none; }

@media (max-width: 900px) {
  .ge-header { grid-template-columns: 1fr auto; }
  .ge-header__aside { display: none; }
  .ge-logo, .ge-nav-toggle { position: relative; z-index: 2; }
  .ge-nav-toggle { display: inline-flex; justify-self: end; }
  .ge-nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: flex-end;
    gap: 2px;
    padding: 120px var(--gutter) max(48px, calc(env(safe-area-inset-bottom) + 32px));
    background: var(--anthracite);
    opacity: 0; visibility: hidden;
    transition: opacity 500ms var(--ease-silk), visibility 0s linear 500ms;
  }
  html.ge-nav-open { overflow: hidden; }
  html.ge-nav-open .ge-nav { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease-silk); }
}

/* ============================================================
   Home hero — tall portrait frame, colossal name crossing it
   ============================================================ */

.ge-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto auto;
  column-gap: var(--gap);
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--header-h) + clamp(8px, 2vh, 28px)) var(--gutter) clamp(28px, 4.5vh, 56px);
}
.ge-hero > * { position: relative; min-width: 0; }
.ge-hero__meta { grid-column: 1 / 7; grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px clamp(24px, 3vw, 56px); }
.ge-hero .ge-hero__media { grid-column: 7 / 12; grid-row: 1 / -1; aspect-ratio: auto; min-height: 60vh; z-index: 1; }
.ge-hero__title { grid-column: 1 / -1; grid-row: 2; align-self: end; z-index: 3; }
.ge-hero__lede { grid-column: 1 / 5; grid-row: 3; z-index: 3; margin-top: var(--space-s); }
.ge-hero__index { grid-column: 1 / 8; grid-row: 4; z-index: 3; margin-top: var(--space-m); display: flex; flex-wrap: wrap; gap: 6px clamp(24px, 3vw, 52px); }

@media (max-width: 900px) {
  .ge-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
  .ge-hero > * { grid-column: 1; grid-row: auto; }
  .ge-hero .ge-hero__media { grid-column: 1; grid-row: auto; min-height: 0; height: 58svh; margin: 16px 0 0 16%; }
  .ge-hero__title { margin-top: -0.34em; }
  .ge-hero__lede { margin-top: var(--space-s); }
  .ge-hero__index { flex-direction: column; }
}

/* ============================================================
   Cinematic — a small frame that grows to full bleed on scroll
   ============================================================ */

.ge-cinematic { position: relative; height: 230vh; }
.ge-cinematic__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ge-cinematic__frame {
  position: absolute; inset: 0; overflow: hidden;
  transform: scale(calc(0.4 + var(--ge-cine, 0) * 0.6));
  will-change: transform;
}
.ge-cinematic__scrim { position: absolute; inset: 0; pointer-events: none; }
.ge-cinematic__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 var(--gutter) clamp(40px, 8vh, 110px);
  opacity: var(--ge-cine, 0);
  transform: translateY(calc((1 - var(--ge-cine, 0)) * 24px));
}
.ge-cinematic__caption > * + * { margin-top: var(--space-s); }

html:not(.ge-js) .ge-cinematic { height: auto; }
html:not(.ge-js) .ge-cinematic__stage { position: relative; height: auto; aspect-ratio: 4 / 5; }
html:not(.ge-js) .ge-cinematic__frame { transform: none; }
html:not(.ge-js) .ge-cinematic__caption { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ge-cinematic { height: auto; }
  .ge-cinematic__stage { position: relative; height: auto; aspect-ratio: 4 / 5; }
  .ge-cinematic__frame { transform: none; }
  .ge-cinematic__caption { opacity: 1; transform: none; }
}

/* Phones: the landscape film plays whole at 16:9 instead of a
   portrait crop, with its caption beneath. */
@media (max-width: 900px) {
  .ge-cinematic { height: auto; padding-top: var(--space-l); }
  .ge-cinematic__stage { position: relative; height: auto; overflow: visible; }
  .ge-cinematic__frame { position: relative; inset: auto; aspect-ratio: 16 / 9; transform: none; }
  .ge-cinematic__scrim { display: none; }
  .ge-cinematic__caption { position: relative; opacity: 1; transform: none; padding: var(--space-s) var(--gutter) 0; }
}

/* ============================================================
   Footer
   ============================================================ */

.ge-footer { position: relative; overflow: hidden; padding: var(--space-l) var(--gutter) max(20px, calc(env(safe-area-inset-bottom) + 12px)); }
.ge-footer__links { display: flex; flex-direction: column; align-items: flex-start; }
.ge-footer__mark { max-width: var(--max); margin: var(--space-l) auto 0; text-align: center; white-space: nowrap; }
.ge-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--gap); max-width: var(--max); margin: clamp(16px, 2vw, 28px) auto 0; }

/* ============================================================
   Custom cursor
   ============================================================ */

.ge-cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 150;
  width: 8px; height: 8px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  pointer-events: none; opacity: 0;
  transition: width 600ms var(--ease-silk), height 600ms var(--ease-silk), opacity 300ms ease;
}