/* sector 0100 · photography
   ------------------------------------------------------------------
   Her projects, one after another: a title, a date, the photographs at
   their own proportions, her text, then any smaller groups under it.
   ------------------------------------------------------------------ */

body {
  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --farsi: "Vazirmatn", "IRANSans", "Geeza Pro", Tahoma, sans-serif;
  --edge: clamp(18px, 6vw, 110px);
  background: var(--void);
}

main { display: block; }

/* ---------------- projects ---------------- */

#projects { padding: clamp(84px, 16vh, 170px) var(--edge) 0; }

.project { margin: 0 auto clamp(110px, 22vh, 260px); max-width: 1500px; }
.project.loose { margin-top: clamp(40px, 8vh, 90px); }

.p-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4em 1.6em;
  margin-bottom: clamp(22px, 4vh, 40px);
}
.p-title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: var(--bone);
}
.p-when { color: var(--dim); }

/* justified rows: every photograph on its own exact proportions, never
   taller than a share of the screen, never cropped */
.gallery .row {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 16px);
  width: min(100%, calc(100vh * var(--h) * var(--sum)));
  margin: 0 0 clamp(8px, 1vw, 16px);
}
.gallery .cell {
  /* scaled so a row whose ratios sum below 1 still fills its width */
  flex: calc(var(--ar) * 1000) 1 0;
  min-width: 0;
  margin: 0;
}
.gallery .frame { aspect-ratio: var(--ar); background: #1a1817; }
.gallery .frame img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* a title under its own photograph, with its text folded behind "read" */
.cap { padding-top: 12px; }
.cap-title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--bone);
}

/* her texts fold away; "read" opens them */
.read summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  color: var(--dim);
  border-bottom: 1px solid var(--p-live, #2454B9);
  padding-bottom: 1px;
  transition: color 0.3s;
}
.read summary::-webkit-details-marker { display: none; }
.read summary::before { content: "read"; }
.p-text summary::before { content: "about the project"; }
.read[open] summary::before { content: "close"; }
.read summary:hover, .read summary:focus-visible { color: var(--bone); }
.read summary:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }
.cap-read { margin-top: 6px; }

/* with a pointer, resting on the photograph shows its text over it;
   on touch screens the "read" underneath stays instead */
.gallery .frame { position: relative; }
.over { display: none; }
@media (hover: hover) and (pointer: fine) {
  .over {
    display: flex;
    align-items: flex-end;
    position: absolute;
    inset: 0;
    padding: clamp(16px, 2vw, 28px);
    background: linear-gradient(to top, rgba(19, 17, 17, 0.9) 0 45%, rgba(19, 17, 17, 0.35));
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(0.9rem, 1vw, 1.02rem);
    line-height: 1.65;
    color: var(--bone);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
  }
  .cell:hover .over { opacity: 1; }
  .cap-read { display: none; }
}
.cap-read .read-body { margin-top: 10px; max-width: 58ch; }

.read-body {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  line-height: 1.75;
  color: var(--bone);
  text-wrap: pretty;
}
.read-body p + p { margin-top: 1.1em; }
.p-text { margin-top: clamp(22px, 4vh, 40px); }
.p-text .read-body { margin-top: 18px; max-width: 64ch; }

.p-more { margin-top: clamp(40px, 7vh, 80px); }
.p-label { color: var(--dim); margin-bottom: 12px; }

/* ---------------- the foot ---------------- */

/* where the rest of the work is, stated plainly */
.elsewhere {
  max-width: min(92vw, 1060px);
  margin: 0 auto 0.9em;
  color: var(--p-dim, #9BA0A5);
}
.coda-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--p-live, #2454B9);
  padding-bottom: 1px;
  transition: opacity 0.35s ease;
}
.coda-link:hover, .coda-link:focus-visible { opacity: 0.72; }

.wing-foot {
  max-width: min(92vw, 1060px);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 5rem) 0 26vh;
}
.doors {
  margin-top: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-top: 1px solid rgba(243, 244, 243, 0.13);
}
.door {
  flex: 1 1 190px;
  padding: 26px 0 22px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}
.door .d-addr { display: block; color: var(--dim); }
.door .d-lbl { display: block; margin-top: 5px; color: var(--bone); }
.door:hover, .door:focus-visible { border-bottom-color: var(--bone); }
.door:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .coda-link, .door { transition: none; }
}