/* =========================================================================
   Ali Khimji — Photography  (v3)
   Editorial design tokens & system per design thesis v1.0 + §5 presentation
   ========================================================================= */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }

/* ---------- 2. Tokens ---------- */
:root {
  --paper: #ece6d8;
  --paper-deep: #e3dcc9;
  --ink: #1a1714;
  --ink-muted: #6e6357;
  --ink-faint: #a89e8e;
  --accent: #8a3a1f;

  --font-display: "Cormorant Garamond", "Apple Garamond", Georgia, serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --t-wordmark:    4rem;
  --t-display-l:   3.5rem;
  --t-display-m:   2.5rem;
  --t-display-s:   1.75rem;
  --t-body-l:      1.1875rem;
  --t-body:        1rem;
  --t-ui:          0.875rem;
  --t-mono:        0.75rem;

  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 192px;

  --page-max: 1440px;
  --outer-pad: clamp(20px, 5vw, 72px);

  /* §5 gallery vars (tightened) */
  --gallery-row-gap: 44px;
  --gallery-hero-gap: 64px;
  --gallery-gutter: 14px;

  --ease-page: cubic-bezier(0.2, 0.7, 0.3, 1);
  --d-hover: 220ms;
}

/* ---------- 3. Base ---------- */
html {
  color-scheme: only light;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
::selection { background: var(--accent); color: var(--paper); }

.skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip:focus {
  left: var(--outer-pad); top: var(--s-3);
  width: auto; height: auto;
  background: var(--paper); color: var(--ink);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  z-index: 100;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--outer-pad);
  padding-right: var(--outer-pad);
}

/* ---------- 4. Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-faint);
}
.nav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-3) var(--outer-pad);
  display: flex; align-items: center; gap: var(--s-4);
}
.nav__brand {
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  font-weight: 400; line-height: 1;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.nav__spacer { flex: 1; }
.nav__list { display: flex; align-items: center; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav__sep { width: 1px; height: 18px; background: var(--ink-faint); margin: 0 var(--s-2); }
.nav__link {
  font-family: var(--font-body); font-size: var(--t-ui);
  color: var(--ink-muted);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
.nav__link.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.nav__toggle { display: none; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.nav__toggle::after { content: " ☰"; }

.nav__overlay {
  position: fixed; inset: 0; background: var(--paper);
  display: none; flex-direction: column;
  padding: var(--s-7) var(--outer-pad);
  overflow-y: auto; z-index: 60;
}
.nav__overlay.is-open { display: flex; }
.nav__overlay-close {
  align-self: flex-end;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: var(--s-6);
}
.nav__overlay ol { list-style: none; margin: 0; padding: 0; }
.nav__overlay-item {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-faint);
}
.nav__overlay-item .num {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); min-width: 3ch;
}
.nav__overlay-item .title {
  font-family: var(--font-display); font-size: var(--t-display-s);
  color: var(--ink); line-height: 1.1;
}

/* ---------- 5. Home masthead ---------- */
.masthead { padding-top: var(--s-6); padding-bottom: var(--s-5); }
.masthead__name {
  font-family: var(--font-display);
  font-size: var(--t-wordmark);
  font-weight: 400; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0; text-wrap: pretty;
}
.masthead__meta {
  margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- 5b. Home featured plates ---------- */
.home-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-top: 0;
  padding-bottom: var(--s-6);
}
.home-plate {
  position: relative;
  margin: 0;
  background: var(--paper-deep);
}
.home-plate img {
  width: 100%;
  height: auto;
  display: block;
}
.home-plate__caption {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-4);
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  background: rgba(236, 230, 216, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.home-plate__num {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.home-plate__caption:hover { border-bottom-color: var(--accent); }
.home-plate__caption:hover .home-plate__num { color: var(--ink); }

/* ---------- 6. Home index ---------- */
.index { list-style: none; margin: 0; padding: 0; }
.index__row {
  display: grid; grid-template-columns: 5rem 1fr 4rem;
  align-items: baseline; column-gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--ink-faint);
}
.index__row > a { display: contents; }
.index__num {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  transition: transform var(--d-hover) var(--ease-page);
  will-change: transform;
}
.index__title {
  font-family: var(--font-display); font-size: var(--t-display-m);
  font-weight: 400; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink); position: relative;
  display: inline-block; width: max-content;
}
.index__title::after {
  content: ""; position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 1px; background: var(--accent);
  transition: right var(--d-hover) var(--ease-page);
}
.index__count {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); text-align: right;
}
.index__row:hover .index__num { transform: translateX(4px); }
.index__row:hover .index__title::after { right: 0; }

/* ---------- 7. Young Arts callout ---------- */
.ya-callout { margin-top: var(--s-6); display: flex; justify-content: flex-end; }
.ya-callout__inner { max-width: 36rem; text-align: right; }
.ya-callout__title { font-family: var(--font-display); font-size: var(--t-display-s); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.2; }
.ya-callout__body { margin-top: var(--s-3); font-size: var(--t-body); color: var(--ink-muted); text-wrap: pretty; }
.ya-callout__link {
  display: inline-block; margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.ya-callout__link:hover { border-bottom-color: var(--accent); }

/* ---------- 8. Colophon ---------- */
.colophon {
  margin-top: var(--s-6);
  padding: var(--s-4) 0 var(--s-5);
  text-align: center;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------- 9. Series page header ---------- */
.series-head { padding-top: var(--s-5); padding-bottom: 0; }
.series-head__num {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0;
}
.series-head__title {
  font-family: var(--font-display); font-size: var(--t-display-l);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.015em;
  margin: var(--s-3) 0 0; color: var(--ink); text-wrap: balance;
}
.series-head__intro {
  margin-top: var(--s-4); max-width: 56ch;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-body-l); line-height: 1.55;
  color: var(--ink); text-wrap: balance;
}

/* ---------- 10. Gallery (§5: CLS=0) ---------- */
.gallery {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gallery-row-gap) var(--gallery-gutter);
}

/* every figure is opacity:0 + IntersectionObserver fade-in (§5.7) */
.figure {
  margin: 0;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.figure.is-revealed { opacity: 1; }

.figure img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper-deep);
}

.figure--hero  { grid-column: 1 / -1; }
.figure--full  { grid-column: 3 / -3; max-width: 960px; justify-self: center; }
.figure--half  { grid-column: span 6; }
.figure--third { grid-column: span 4; }

/* extra hero breathing room (§5.2) */
.figure--hero + .figure,
.figure + .figure--hero { margin-top: calc(var(--gallery-hero-gap) - var(--gallery-row-gap)); }

/* Hero cap height (avoid letterboxing on ultrawide) */
.figure--hero img { max-height: 80vh; width: auto; margin: 0 auto; }

/* Framed photos (§5.3) */
.figure[data-framed="true"] img { box-shadow: inset 0 0 0 1px var(--ink-faint); }

/* Hover marginalia (§5.6) */
.figure { position: relative; }
.figure__mark {
  position: absolute;
  top: 4px; left: -56px;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  opacity: 0; transition: opacity 160ms ease-out;
  pointer-events: none; white-space: nowrap;
}
@media (hover: hover) and (min-width: 1100px) {
  .figure:hover .figure__mark { opacity: 1; }
}

/* ---------- 10b. Artist statement (Young Arts, after gallery) ---------- */
.artist-statement {
  margin-top: var(--s-6);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-body-l);
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.artist-statement p { margin: 0 0 var(--s-3) 0; }
.artist-statement p:last-child { margin-bottom: 0; }
@media (max-width: 639px) {
  .artist-statement { font-size: var(--t-body); line-height: 1.6; }
}

/* ---------- 11. End matter ---------- */
.endmatter {
  margin-top: var(--s-6); text-align: center;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.endmatter__nav {
  margin-top: var(--s-4);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.endmatter__nav a {
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.endmatter__nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- 12. Lightbox (§5.4) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  background: rgba(227, 220, 201, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.lightbox.is-open { display: block; opacity: 1; }

.lightbox__media {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--s-6);
  pointer-events: none; /* nav buttons handle clicks */
}
.lightbox__img {
  max-width: 88vw; max-height: 88vh;
  object-fit: contain;
  transform: scale(0.98);
  opacity: 0;
  transition: opacity 160ms linear, transform 200ms ease-out;
  pointer-events: auto;
  touch-action: pinch-zoom;
}
.lightbox.is-open .lightbox__img { transform: scale(1); opacity: 1; }

.lightbox__label {
  position: absolute; top: var(--s-4); left: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  z-index: 2; pointer-events: none;
}
.lightbox__index {
  position: absolute; bottom: var(--s-4); left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  z-index: 2; pointer-events: none;
}
.lightbox__close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  z-index: 3; padding: var(--s-2) var(--s-3);
}
.lightbox__nav {
  position: absolute; top: 0; bottom: 0; width: 50%; left: 0;
  cursor: w-resize; z-index: 1;
}
.lightbox__nav--next { right: 0; left: auto; cursor: e-resize; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1099px) {
  .nav__list { display: none; }
  .nav__sep { display: none; }
  .nav__toggle { display: inline-block; }
}
@media (max-width: 899px) {
  :root { --t-display-l: 2.75rem; --gallery-row-gap: 32px; --gallery-hero-gap: 48px; }
  .index__row { grid-template-columns: 4rem 1fr 3rem; column-gap: var(--s-4); padding: var(--s-3) 0; }
  .index__title { font-size: 2rem; }
  .figure--third { grid-column: span 6; }
}
@media (max-width: 639px) {
  :root { --t-wordmark: 2.75rem; --t-display-l: 2.25rem; --gallery-row-gap: 24px; --gallery-hero-gap: 32px; }
  .masthead { padding-top: var(--s-5); padding-bottom: var(--s-4); }
  .index__row { grid-template-columns: 1fr; row-gap: var(--s-2); padding: var(--s-4) 0; }
  .index__num { font-size: var(--t-mono); }
  .index__title { font-size: 1.75rem; }
  .index__count { text-align: left; }
  .ya-callout { justify-content: flex-start; }
  .ya-callout__inner { text-align: left; }
  /* Mobile: every figure full-width single column */
  .figure--hero, .figure--full, .figure--half, .figure--third {
    grid-column: span 12; max-width: 100%; justify-self: stretch;
  }
  .figure--hero img { max-height: none; width: 100%; }
  .figure--hero + .figure, .figure + .figure--hero { margin-top: 0; }
  .lightbox__img { max-width: 100vw; max-height: 92vh; }
  .nav__brand { font-size: 1.25rem; }
}

/* ---------- 14. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .figure { opacity: 1; }
  .index__row:hover .index__num { transform: none; }
}

/* ---------- 15. Print (§5.9) ---------- */
@media print {
  :root {
    --paper: #fff; --ink: #000; --ink-muted: #555; --ink-faint: #ccc;
  }
  body { background: #fff; color: #000; }
  .nav, .ya-callout, .endmatter__nav, .colophon { display: none; }
  .skip { display: none; }
  .masthead { padding-top: 24px; padding-bottom: 24px; }
  .gallery { display: block; }
  .figure {
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0 auto 24px;
    max-width: 90%;
    opacity: 1 !important;
  }
  .figure img { max-height: 90vh; width: auto; }
  .figure--hero, .figure--full, .figure--half, .figure--third {
    grid-column: auto; max-width: 90%; justify-self: center;
  }
}