/* Flaneau. Paper and ink for the work; black only for the contact sheets, where red marks the pick.
   EB Garamond for every word; a monospace only for frame numbers on a sheet. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/ebgaramond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/ebgaramond-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plexmono-400.woff2") format("woff2");
}

:root {
  --paper: #fafaf8;
  --ink: #161616;
  --quiet: #6e6e6e;
  --rule: #dddad3;
  --film: #161616;
  --edge: #fafaf8;
  --pencil: #d2281e;
  --gut: clamp(16px, 4vw, 56px);
  --bar: 4.5rem;
  --meta: 3.5rem;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M11 22C15 6 72 1 90 13c12 8 8 44-22 50C40 68 6 62 5 40 4 26 22 12 50 10' fill='none' stroke='%23d2281e' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  font: 400 19px/1.5 var(--serif);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
h1, h2 { font-weight: 400; margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bar */
.bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5em;
  min-height: var(--bar); padding: 1.4rem var(--gut) 0;
}
.bar .name { font-size: 26px; letter-spacing: .01em; }
.bar nav { display: flex; gap: 1.6em; color: var(--quiet); }
.bar nav a { border-bottom: 1px solid transparent; }
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current] { color: var(--ink); border-color: var(--ink); }
@media (max-width: 560px) {
  .bar { flex-direction: column; gap: .2em; padding-top: 1rem; }
  .bar nav { gap: 1.2em; font-size: 17px; }
  :root { --bar: 5.5rem; }
}

/* Home: one picture, the name, Enter */
.home {
  min-height: 100svh; padding: 6svh var(--gut) 5svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.home .pic { width: min(100%, calc((100svh - 15rem) * var(--ar))); }
.home .pic img { width: 100%; height: auto; }
.home h1 { margin-top: 2.2rem; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: .01em; }
.home .enter {
  margin-top: 1.1rem; font-size: 21px; letter-spacing: .1em; text-transform: lowercase;
  font-variant-caps: all-small-caps; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
.home .enter:hover { color: var(--ink); border-color: var(--ink); }

/* Work: one picture per screen, on paper */
.frame { margin: 0 auto 10vh; padding: 0 var(--gut); max-width: 1500px; }
.frame img { width: 100%; height: auto; margin: 0 auto; }
figcaption { margin-top: .9rem; text-align: center; color: var(--quiet); font-size: 17px; }
figcaption i { color: var(--ink); }
figcaption .see { margin-left: 1.2em; border-bottom: 1px solid var(--quiet); }
figcaption .see:hover { color: var(--ink); border-color: var(--ink); }
.js .viewer .stage {
  height: calc(100svh - var(--bar) - var(--meta)); padding: 1.5rem var(--gut) 0;
}
.js .frame { display: none; height: 100%; margin: 0; padding: 0; max-width: none; }
.js .frame.on { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.js .frame img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - var(--bar) - var(--meta) - 1.5rem - 2.9rem); }
.js .stage.l { cursor: w-resize; }
.js .stage.r { cursor: e-resize; }
.meta {
  display: flex; justify-content: space-between; align-items: center; gap: 1em;
  height: var(--meta); padding: 0 var(--gut); color: var(--quiet); font-size: 17px;
}
.meta .ctl { display: flex; gap: 1.4em; }
.meta .ctl button:hover { color: var(--ink); }
.meta .ctl button:disabled { opacity: .35; cursor: default; }
.meta .counter { font-variant-numeric: lining-nums tabular-nums; }
.prev, .next { display: none; }
@media (max-width: 560px) {
  .js .frame.on { justify-content: flex-start; padding-top: 12svh; }
}
.js .prev, .js .next { display: inline; }

/* Text pages: Contact sheets list, About, not found */
.text { padding: 8svh var(--gut); max-width: 40rem; }
.text h1 { font-size: 32px; margin-bottom: .6rem; }
.about h1.hello { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; margin-bottom: 1.6rem; }
.lost h1 { font-size: 24px; color: var(--ink); }
.text p { margin: 0 0 1rem; }
.text a { border-bottom: 1px solid var(--rule); }
.text a:hover { border-color: var(--ink); }
.list { list-style: none; margin: 2rem 0 0; padding: 0; }
.list li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding: .8rem 0; border-top: 1px solid var(--rule); border-bottom: 0;
}
.list li:last-child a { border-bottom: 1px solid var(--rule); }
.list .t { font-size: 24px; }
.list .c { color: var(--quiet); }
.list li a:hover .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lost { text-align: center; margin: 0 auto; padding-top: 20svh; color: var(--quiet); }

/* Contact sheet: every frame of one roll, in shooting order, the pick circled */
.sheet-page .head { padding: 4svh var(--gut) 1.6rem; max-width: 46rem; }
.sheet-page .head h1 { font-size: 32px; }
.sheet-page .head a { color: var(--ink); border-bottom: 1px solid var(--quiet); }
.sheet-page .head p { margin: .3rem 0 0; color: var(--quiet); }
.sheet {
  background: var(--film); margin: 0 var(--gut) 8vh; padding: 18px 18px 8px;
  display: grid; gap: 8px 14px; grid-template-columns: repeat(6, 1fr);
}
.sheet > * { display: flex; flex-direction: column; gap: 5px; position: relative; }
.sheet .cell { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.sheet .cell { min-height: 0; overflow: hidden; }
.sheet img { width: 100%; height: 100%; object-fit: contain; }
.sheet .n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--edge); padding-bottom: 6px; }
.sheet a:hover img { opacity: .85; }
.sheet a:focus-visible { outline: none; }
.sheet a:focus-visible img { outline: 2px solid var(--paper); outline-offset: 2px; }
.sheet .pick::after {
  content: ""; position: absolute; inset: -9px -11px 6px -11px; pointer-events: none;
  background: var(--circle) center / 100% 100% no-repeat;
}
@media (max-width: 900px) { .sheet { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) {
  .sheet { grid-template-columns: repeat(3, 1fr); padding: 12px 12px 4px; gap: 6px 10px; margin: 0 0 6vh; }
  .sheet .n { font-size: 10px; }
}