/* Foldscape: an architect's sketchbook. Paper, ink, pencil; no web fonts, no scripts. */
:root {
  --paper: #efe8da;
  --paper-deep: #e6dccb;
  --ink: #2a2622;
  --pencil: #6f675d;
  --rule: #cfc5b3;
  --red: #b2412f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --measure: 34rem;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--serif);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible, video:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

img, video { display: block; max-width: 100%; height: auto; }

.page { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }

/* The title block: the book's own cover lettering, Nokta on her line. */
.cover { text-align: center; padding: 4.5rem 0 2.5rem; }
.cover h1 { margin: 0; }
.cover h1 img { width: min(26rem, 78vw); margin: 0 auto; }
.cover .nokta { width: 5.5rem; margin: 2.2rem auto 0; }
.lead { font-size: 1.375rem; line-height: 1.45; max-width: 30rem; margin: 2.2rem auto 0; text-wrap: balance; }
.sub { color: var(--pencil); max-width: var(--measure); margin: 1rem auto 0; text-wrap: pretty; }

.film { margin: 1.5rem auto 0; max-width: 60rem; }
.film video { width: 100%; aspect-ratio: 16 / 9; background: var(--paper-deep); border: 1px solid var(--rule); }
.film figcaption, .shots figcaption, .duo figcaption { font-size: 0.875rem; color: var(--pencil); margin-top: 0.6rem; }
.film figcaption { text-align: center; }

section { padding: 4rem 0 0; }
h2 {
  font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pencil);
  margin: 0 0 1.4rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule);
}
h2.plain { text-transform: none; letter-spacing: 0.03em; font-size: 1rem; }
section > p { max-width: var(--measure); }

.duo { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 0; }
.duo figure { margin: 0; }
.duo b, .shots b {
  display: block; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pencil); margin-bottom: 0.15rem;
}
.duo figcaption { color: var(--ink); max-width: 30rem; }

.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
.shots figure { margin: 0; }
.shots img { border: 1px solid var(--rule); width: 100%; }
.shots figcaption { color: var(--ink); line-height: 1.4; }

.facts { display: grid; grid-template-columns: 1fr; gap: 0.2rem 2.5rem; margin: 0; }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--pencil); }
.facts dd { margin: 0; }

.coming { text-align: center; padding: 4.5rem 0 1rem; font-size: 1.25rem; text-wrap: balance; }
.coming span { display: block; color: var(--pencil); font-size: 1rem; margin-top: 0.3rem; }

/* Text pages: privacy, support, the pitch. */
.doc { max-width: 40rem; margin: 0 auto; padding: 3rem 0 1rem; }
.doc .home img { width: 11rem; }
.doc h1 { font-weight: 400; font-size: 2rem; line-height: 1.2; margin: 2.2rem 0 0.4rem; }
.doc .dated { color: var(--pencil); margin: 0 0 2rem; }
.doc h2 { margin-top: 2.6rem; }
.doc h3 { font-weight: 400; font-style: italic; font-size: 1.125rem; margin: 1.8rem 0 0.3rem; }
.doc p, .doc li { text-wrap: pretty; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: 0.3rem 0; }
.doc blockquote { margin: 0; padding: 0 0 0 1.2rem; border-left: 1px solid var(--rule); }
.mail { font-size: 1.25rem; }

.reel { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2rem; }
.reel figure { margin: 0; }
.reel video { width: 100%; background: var(--paper-deep); border: 1px solid var(--rule); }
.reel .tall video { max-width: 22rem; }
.reel figcaption { font-size: 0.9375rem; margin-top: 0.6rem; }
.reel figcaption b { display: block; font-weight: 400; }
.reel figcaption span { color: var(--pencil); }
.download { display: inline-block; margin-top: 0.4rem; }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem;
  margin-top: 5rem; padding: 1.4rem 0 2.5rem; border-top: 1px solid var(--rule);
  font-size: 0.875rem; color: var(--pencil);
}
footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

.lost { text-align: center; padding: 6rem 0 2rem; }
.lost img { width: 6rem; margin: 0 auto 2rem; }

@media (min-width: 40rem) {
  .shots { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 62rem) {
  .cover { padding-top: 6rem; }
  .duo { grid-template-columns: 1fr 1fr; }
  .shots { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
  .reel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }