/* ============================================================
   GÜLSÜN ERDAŞ STUDIO — Story archive & viewer (koleksiyon)
   ============================================================ */

.ge-archive { position: relative; max-width: var(--max); margin-inline: auto; }

/* Sticky filter / view bar — fades into the ground, never a box. */
.ge-archive__bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 var(--gap);
  padding: 10px 0 26px;
  background: linear-gradient(180deg, var(--tone-bg) 58%, transparent);
}
html:not(.ge-js) .ge-archive__bar { display: none; }

/* Phones: filters become one swipeable line, views sit beneath. */
@media (max-width: 900px) {
  .ge-archive__bar { padding: 4px 0 18px; }
  .ge-archive__bar > .ge-chips:first-child {
    flex: 1 1 100%; flex-wrap: nowrap; gap: 0 24px;
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: calc(var(--gutter) + 12px) var(--gutter);
  }
  .ge-archive__bar > .ge-chips:first-child::-webkit-scrollbar { display: none; }
  .ge-chip { flex: none; white-space: nowrap; }
}

.ge-chips { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2vw, 34px); }
.ge-chip {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 7px;
  min-height: 44px; padding: 12px 0 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-text); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 500ms var(--ease-silk);
}
.ge-chip__n { font-family: var(--font-display); font-style: italic; font-size: 1.45em; letter-spacing: 0; color: var(--bronze); transition: color 500ms var(--ease-silk); }
.ge-chip[aria-pressed="true"] { color: var(--ivory); }
.ge-chip[aria-pressed="true"] .ge-chip__n { color: var(--accent); }
.ge-chip[aria-pressed="true"]::before {
  content: ''; position: absolute; left: -12px; top: calc(50% + 6px);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

/* ============================================================
   Gallery — a seven-beat asymmetric rhythm, re-dealt by JS after
   each filter so the composition never breaks.
   ============================================================ */

.ge-gallery {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: clamp(64px, 8vw, 140px);
  margin: var(--space-s) 0 0; padding: 0; list-style: none;
}
.ge-story { position: relative; min-width: 0; }
.ge-story[hidden], .ge-index__row[hidden] { display: none; }
.ge-story__link { display: block; }
.ge-story__cap { margin-top: clamp(14px, 1.3vw, 22px); }

.ge-story[data-slot="0"] { grid-column: 1 / 8; }
.ge-story[data-slot="1"] { grid-column: 9 / 13; margin-top: clamp(90px, 16vw, 300px); }
.ge-story[data-slot="2"] { grid-column: 2 / 6; }
.ge-story[data-slot="3"] { grid-column: 7 / 12; margin-top: clamp(60px, 11vw, 200px); }
.ge-story[data-slot="4"] { grid-column: 1 / 5; margin-top: clamp(40px, 6vw, 110px); }
.ge-story[data-slot="5"] { grid-column: 6 / 13; }
.ge-story[data-slot="6"] { grid-column: 3 / 9; }

.ge-story[data-slot="0"] .ge-frame, .ge-story[data-slot="6"] .ge-frame { aspect-ratio: 4 / 5; }
.ge-story[data-slot="1"] .ge-frame, .ge-story[data-slot="3"] .ge-frame { aspect-ratio: 3 / 4; }
.ge-story[data-slot="5"] .ge-frame { aspect-ratio: 5 / 4; }
.ge-story .ge-img { object-position: 50% 30%; }

/* Second frame of the story, injected on first hover (desktop only). */
.ge-story__hover { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-silk); }

@media (hover: hover) and (pointer: fine) {
  .ge-story__link:hover .ge-story__hover.is-ready { opacity: 1; }
  .ge-story__link:hover .ge-caption__title { color: var(--accent); }
  .ge-chip:hover { color: var(--ink); }
}
.ge-caption__title { transition: color 600ms var(--ease-silk); }

@media (max-width: 900px) {
  .ge-gallery { row-gap: 44px; }
  .ge-story[data-slot] { grid-column: 1 / -1; margin-top: 0; }
  .ge-story[data-slot-m="1"] { grid-column: 1 / 7; }
  .ge-story[data-slot-m="2"] { grid-column: 7 / -1; margin-top: 64px; }
  .ge-story[data-slot] .ge-frame { aspect-ratio: 2 / 3; }
  .ge-story[data-slot-m="0"] .ge-frame { aspect-ratio: 4 / 5; }
  .ge-story[data-slot-m="1"] .ge-caption__title, .ge-story[data-slot-m="2"] .ge-caption__title { font-size: 19px; }
}

/* ============================================================
   Index — the archive as a typographic list with a cursor preview
   ============================================================ */

.ge-index { display: none; margin: var(--space-s) 0 0; padding: 0; list-style: none; }
.ge-archive[data-view="index"] .ge-gallery { display: none; }
.ge-archive[data-view="index"] .ge-index { display: block; }

.ge-index__link {
  display: grid; grid-template-columns: minmax(40px, 1fr) 8fr 3fr 2fr; align-items: baseline;
  column-gap: var(--gap);
  padding: clamp(10px, 1.2vw, 18px) 0;
}
.ge-index__no { font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 1.3vw, 22px); color: var(--accent); }
.ge-index__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5.6vw, 104px); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--ivory);
  transition: color 500ms var(--ease-silk), transform 900ms var(--ease-silk);
}
.ge-index__count { text-align: right; }

.ge-index__preview {
  position: fixed; top: 0; left: 0; z-index: 30;
  width: clamp(200px, 17vw, 300px); aspect-ratio: 3 / 4; overflow: hidden;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 450ms var(--ease-silk), transform 700ms var(--ease-silk);
}
.ge-index__preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ge-index__preview img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--grade); }

@media (hover: hover) and (pointer: fine) {
  .ge-index:hover .ge-index__title { color: var(--ink-faint); }
  .ge-index .ge-index__link:hover .ge-index__title { color: var(--ivory); transform: translateX(clamp(12px, 2vw, 40px)); }
}
@media (max-width: 900px) {
  .ge-index__link { grid-template-columns: 34px 1fr; row-gap: 2px; padding: 12px 0; }
  .ge-index__meta { grid-column: 2; }
  .ge-index__count { display: none; }
  .ge-index__title { font-size: clamp(36px, 11vw, 60px); }
  .ge-index__preview { display: none; }
}

/* ============================================================
   Viewer — full-screen story reader
   ============================================================ */

html.ge-viewer-open { overflow: hidden; }
.ge-viewer {
  position: fixed; inset: 0; z-index: 400;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(14, 13, 12, 0.98);
  opacity: 0; transition: opacity 500ms var(--ease-silk);
}
.ge-viewer[hidden] { display: none; }
.ge-viewer.is-open { opacity: 1; }

.ge-viewer__head, .ge-viewer__foot {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px var(--gap);
  padding: clamp(10px, 1.6vw, 24px) var(--gutter);
}
.ge-viewer__title { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.1; color: var(--ivory); }
.ge-viewer__count { margin-left: auto; }
.ge-viewer__close {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-family: var(--font-text); font-size: var(--t-micro); letter-spacing: 0.3em; text-transform: uppercase;
}
.ge-viewer__x { position: relative; width: 22px; height: 22px; }
.ge-viewer__x::before, .ge-viewer__x::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.ge-viewer__x::after { transform: rotate(-45deg); }

.ge-viewer__stage { position: relative; margin: 0 clamp(64px, 9vw, 150px); touch-action: pan-y; }
.ge-viewer__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; filter: var(--grade);
  opacity: 0; transform: scale(1.03);
  transition: opacity 700ms var(--ease-silk), transform 1200ms var(--ease-slow);
}
.ge-viewer__img.is-current { opacity: 1; transform: none; }

.ge-viewer__nav {
  position: absolute; top: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: clamp(64px, 9vw, 150px); height: 70vh;
  transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.ge-viewer__nav--prev { left: 0; }
.ge-viewer__nav--next { right: 0; }
.ge-viewer__nav .ge-arrow__icon { width: 46px; height: 15px; opacity: 0.55; transition: opacity 400ms ease; }
.ge-viewer__nav--prev .ge-arrow__icon { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
  .ge-viewer__nav:hover .ge-arrow__icon { opacity: 1; }
  .ge-viewer__nav:hover .ge-arrow__icon::before { transform: translateX(115%); }
  .ge-viewer__nav:hover .ge-arrow__icon::after { transform: none; }
  .ge-viewer__close:hover { color: var(--accent); }
}

.ge-viewer__progress { display: flex; gap: 6px; flex: 1 1 100%; margin: 0 0 6px; padding: 0; list-style: none; }
.ge-viewer__progress li { position: relative; flex: 1; height: 1px; overflow: hidden; background: var(--ink-faint); }
.ge-viewer__progress li::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-silk); }
.ge-viewer__progress li.is-on::after { transform: none; }

@media (max-width: 900px) {
  .ge-viewer__stage { margin: 0; }
  .ge-viewer__nav { display: none; }
  .ge-viewer__count { margin-left: 0; }
}

/* The trailing cursor must stay visible above the viewer. */
.ge-cursor-dot { z-index: 450; }