/* Ahmad Bilal archive
   Two colours: a wall slightly darker than the paper, and his blue-black ink.
   One text family (Newsreader). One script (Pinyon Script), used once, on His life.
   The drawings are the only visual event: whole sheets, never cropped, filtered or animated. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #E8E6E4;   /* the wall: a step darker than the paper, so every sheet reads as an object */
  --ink: #232940;      /* his blue-black fountain-pen ink, sampled from sheet AB 24 */
  --margin: 64px;
  --label: 208px;      /* wall label column */
  --gap: 40px;         /* sheet to label */
  --sheet: max(360px, calc(100svh - 236px));  /* one sheet per screen: viewport minus bars and air */
  color-scheme: light;
}

html {
  background: var(--ground);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-optical-sizing: auto;
  word-spacing: 0.05em;   /* Newsreader's word space is narrow; this brings it to a normal reading measure */
  background: var(--ground);
}
h1, h2, p, figure, ol, ul { margin: 0; padding: 0; }
h1, h2 { font: inherit; }
cite { font-style: italic; }
img { display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: var(--margin);
  top: 0;
  padding: 10px 0;
  clip: rect(0 0 0 0);
}
.skip:focus { clip: auto; }

/* ── Bars ─────────────────────────────────────────── */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 18px var(--margin) 0;
}
.bar a, .bar p, .bar span { display: block; padding: 10px 0; }
.bar nav { display: flex; gap: 32px; }
footer.bar { padding: 0 var(--margin) 18px; }
[aria-current], .doors a, .enlarge a, .contact a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* One-screen pages: Home and each drawing */
.screen-page { min-height: 100svh; display: flex; flex-direction: column; }
.screen-page > main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 var(--margin); }

/* ── The wall: sheet centred, label beside it ─────── */
.wall {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gap);
}
.wall > .spacer, .wall > .label { flex: 0 0 var(--label); }
.wall > .sheet { flex: 0 1 auto; min-width: 0; }
.sheet img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--sheet);
}
a.sheet[data-enlarge] { cursor: zoom-in; }
.label .enlarge { margin-top: 24px; }

/* ── Drawings: the viewing room, one sheet per screen ── */
.room { list-style: none; }
.room > li {
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 0 var(--margin);
  scroll-margin-top: 0;
}
.room > li:first-child { min-height: calc(100svh - 62px); }

/* ── Home: intro, sheet, label ───────────────────── */
.home-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: end;
}
.intro { justify-self: start; max-width: 300px; }
.intro h1 { font-size: 30px; line-height: 36px; }
.intro .identity { margin-top: 8px; }
.intro .sentence { margin-top: 32px; }
.doors { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.doors a { display: block; padding: 10px 0; }
.home-grid > figure {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
}
.home-grid > figure .label { justify-self: start; max-width: var(--label); }

/* ── His life ─────────────────────────────────────── */
.life { padding: 96px var(--margin) 128px; }
.life-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.life-head, .essay, .signature { grid-column: 1 / span 6; }
.portrait { grid-column: 8 / span 5; grid-row: 1 / span 3; }
.portrait img { width: 100%; height: auto; }
.portrait figcaption { margin-top: 12px; }
.script {
  display: block;
  font-family: "Pinyon Script", "Snell Roundhand", cursive;
  font-size: 96px;
  line-height: 124px;
  font-weight: 400;
}
.essay-title { display: block; margin-top: 4px; font-style: italic; font-size: 28px; line-height: 36px; }
.life-head .identity { margin-top: 12px; }
.essay {
  margin-top: 72px;
  max-width: 620px;
  font-size: 20px;
  line-height: 32px;
  display: grid;
  gap: 24px;
}
.essay p { text-wrap: pretty; hanging-punctuation: first; }
.signature { margin-top: 48px; }
.contact { margin-top: 96px; }
.contact a { display: inline-block; padding: 10px 0; }

/* ── Enlarged: the drawing at the scan's own resolution ── */
dialog.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ground);
  color: var(--ink);
}
dialog.viewer::backdrop { background: var(--ground); }
.viewer-bar {
  box-sizing: border-box;
  height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 8px var(--margin) 0;
}
.viewer-stage {
  position: absolute;
  top: 62px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  cursor: grab;
  overscroll-behavior: contain;
}
.viewer-stage.dragging { cursor: grabbing; }
.viewer-stage picture { width: max-content; margin: 0 auto; }
.viewer-stage img { max-width: none; max-height: none; height: auto; }

/* ── Not found ───────────────────────────────────── */
.notfound { display: grid; gap: 24px; justify-items: start; }

/* ── Phone ───────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --margin: 24px; --gap: 16px; }
  .bar { padding-top: 8px; gap: 24px; }
  .bar nav { gap: 24px; }
  footer.bar { padding-bottom: 8px; flex-wrap: wrap; row-gap: 0; }
  footer.bar .seq { order: -1; width: 100%; justify-content: space-between; }

  .screen-page > main { padding: 32px var(--margin) 48px; }
  .wall { flex-direction: column; align-items: stretch; gap: 16px; }
  .wall > .spacer { display: none; }
  .wall > .label, .wall > .sheet { flex: none; }
  .sheet img { max-width: 100%; max-height: 70svh; }
  .label .enlarge { margin-top: 12px; }

  .room > li, .room > li:first-child { min-height: 92svh; padding: 48px var(--margin); }

  .home-grid { display: flex; flex-direction: column; align-items: stretch; gap: 40px; }
  .intro h1 { font-size: 26px; line-height: 32px; }
  .intro .sentence, .doors { margin-top: 20px; }
  .home-grid > figure { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }

  .life { padding: 40px var(--margin) 64px; }
  .life-grid { display: flex; flex-direction: column; }
  .portrait { margin-top: 40px; }
  .script { font-size: 60px; line-height: 78px; }
  .essay-title { font-size: 22px; line-height: 30px; margin-top: 2px; }
  .essay { margin-top: 40px; font-size: 18px; line-height: 29px; gap: 20px; }
  .signature { margin-top: 40px; }
  .contact { margin-top: 56px; }

  .viewer-bar { padding-top: 0; }
}

@media print {
  .bar nav, .skip, .enlarge, dialog { display: none !important; }
  .room > li { min-height: auto; break-inside: avoid; padding: 24px 0; }
  .sheet img { max-height: 24cm; }
}