/* Photodiary — a projection in a dark room.
   Each night is one frame on a screen; its light spills onto the wall, flickers now and then (diary.js)
   and turns red while the record plays. The record is printed over it as subtitles.
   Everything else is typed, like a note left on the desk at night. */

@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/courier-prime.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/courier-prime-italic.woff2") format("woff2"); }

:root {
  --room: #000;
  --paper: #b9b2a3;       /* typed text, read in the light of the screen */
  --faint: #6c665b;
  --subtitle: #ece3b4;    /* the slightly yellow white of old subtitles */
  --spill: rgba(205, 198, 178, .09);
  --red: rgba(150, 12, 8, .55);
  --edge: 2.75rem;        /* width of the frame edges with the name and links */
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--room); overflow-x: clip; }
body { color: var(--paper); font: 400 1rem/1.65 "Courier Prime", "Courier New", monospace; overflow-x: clip; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--faint); }
a:hover { color: var(--subtitle); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 1px dashed var(--subtitle); outline-offset: 4px; }
cite { font-style: italic; }
::selection { background: #5a0a07; color: var(--subtitle); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 4rem; top: -4rem; z-index: 6; background: var(--paper); color: var(--room); padding: .3rem .7rem; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ── The edges: the name and the links run along the sides, like markings on a strip of film ── */
.edge {
  position: fixed; top: 0; bottom: 0; z-index: 4; width: var(--edge);
  display: flex; align-items: center; justify-content: center; gap: 2.5rem;
  writing-mode: vertical-rl; font-size: .8125rem; color: var(--faint);
}
.edge a { text-decoration: none; white-space: nowrap; }
.edge a[aria-current] { color: var(--paper); }
.edge-left { left: 0; transform: rotate(180deg); }
.edge-right { right: 0; }

main, footer { margin-inline: var(--edge); }
footer { padding: 6rem 1rem 2.5rem; text-align: center; font-size: .8125rem; color: var(--faint); }

/* ── Tonight: the screen fills the first view; nothing else is lit ── */
.today { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 1.1rem; padding: 2rem 0 3rem; }
.today { --screen: min(100vw - 2 * var(--edge) - 2rem, (100svh - 15rem) * 9 / 5, 74rem); }
.screen { position: relative; margin: 0; width: var(--screen); }

/* the light of the screen falls on the wall around it; while the record plays, it goes red */
.screen::before, .screen::after {
  content: ""; position: absolute; inset: -30% -18%; z-index: -1; pointer-events: none;
  transition: opacity 5s ease-in-out;
}
.screen::before { background: radial-gradient(closest-side, var(--spill), transparent); }
.screen::after { background: radial-gradient(closest-side, var(--red), transparent); opacity: 0; }
.red-lamp .screen::before { opacity: 0; }
.red-lamp .screen::after { opacity: 1; }

.print { position: relative; width: 100%; aspect-ratio: 9 / 5; background: #030303; overflow: hidden; }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.15); transition: opacity 3.5s cubic-bezier(.6, 0, .3, 1), filter 6s cubic-bezier(.6, 0, .3, 1); }
.print img.developed { opacity: 1; filter: none; }
.print iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: #000; }

/* a flicker: no transition, so it is gone before you are sure you saw it */
.flicker .print img.developed { filter: brightness(.45); transition: none; }
.flicker .screen::before, .flicker .screen::after { opacity: .2; transition: none; }

.play { position: absolute; inset: 0; z-index: 1; width: 100%; background: none; border: 0; cursor: pointer; }
.progress { position: absolute; left: 0; bottom: 0; z-index: 3; height: 2px; width: 0; background: #9c1c14; transition: width .25s linear; }
.close { position: absolute; top: .75rem; right: .75rem; z-index: 3; font: inherit; font-size: .875rem; color: var(--paper); background: #000; border: 0; padding: .1rem .55rem; cursor: pointer; }

/* printed over the photo: the moment in the top corner, the record as subtitles at the bottom */
.caption { position: absolute; inset: 0; z-index: 2; pointer-events: none; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px #000; }
.caption a, .caption button { pointer-events: auto; }
.stamp { position: absolute; top: 4%; left: 3%; font-size: clamp(.6875rem, 1vw, .875rem); line-height: 1.45; color: var(--paper); opacity: .8; }
.subtitle {
  position: absolute; left: 6%; right: 6%; bottom: 6%; z-index: 2; pointer-events: none;
  text-align: center; font-size: clamp(.8125rem, 1.45vw, 1.25rem); line-height: 1.4; color: var(--subtitle);
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px #000;
}
.subtitle a { text-decoration-color: rgba(236, 227, 180, .4); }
.subtitle a:hover { text-decoration-color: var(--subtitle); }
.subtitle .info { margin-top: .2em; font-size: .72em; color: var(--paper); }
.playing-video .caption, .playing-video .play { display: none; }

/* under the screen: what this is, whether it plays, and the way to the other nights */
.under { width: var(--screen); display: grid; gap: 1rem 3rem; font-size: .875rem; line-height: 1.6; }
@media (min-width: 760px) { .under { grid-template-columns: minmax(0, 40rem) auto; justify-content: space-between; } }
.note { color: var(--faint); }
.note cite { color: var(--paper); }
.reel { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; color: var(--faint); white-space: nowrap; }
.reel a { text-decoration: none; }
.listen { font: inherit; color: var(--paper); background: none; border: 0; padding: 0; cursor: pointer; }
.listen:hover { color: var(--subtitle); }

/* ── Archive: a contact sheet ── */
.archive { padding: 4.5rem 1.5rem 0; }
.sheet-head { max-width: 36rem; }
.sheet-head h1 { font: inherit; color: var(--paper); }
.sheet-head p { color: var(--faint); }
.sheet { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 2.25rem .6rem; margin-top: 3.5rem; }
.sheet a { display: block; text-decoration: none; color: var(--faint); }
.frame { position: relative; display: block; aspect-ratio: 9 / 5; background: #050505; overflow: hidden; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.6); transition: opacity 1.6s ease-out, filter .8s; }
.frame img.developed { opacity: .8; }
.frame .subtitle { font-size: .75rem; bottom: 8%; left: 4%; right: 4%; opacity: 0; transition: opacity .35s; }
.sheet a:hover .frame img.developed, .sheet a:focus-visible .frame img.developed { opacity: 1; filter: none; }
.sheet a:hover .subtitle, .sheet a:focus-visible .subtitle { opacity: 1; }
.sheet a:hover { color: var(--paper); }
.mark { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .75rem; }
.sheet:empty { display: none; }
.sheet:not(:empty) + .empty { display: none; }
.empty { margin-top: 3rem; color: var(--faint); }

@media (max-width: 600px) {
  :root { --edge: 2rem; }
  .edge { font-size: .75rem; gap: 1.75rem; }
  .screen { width: calc(100vw - 2 * var(--edge) - .5rem); }
  .today { padding-bottom: 4rem; }
  .reel { align-items: flex-start; }
  .caption .subtitle { font-size: .6875rem; bottom: 4%; left: 3%; right: 3%; }
  .stamp { font-size: .625rem; }
  .archive { padding-inline: .25rem; }
  .sheet { grid-template-columns: 1fr 1fr; gap: 1.5rem .35rem; }
  .mark { font-size: .6875rem; }
  .frame .subtitle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .print img, .frame img, .screen::before, .screen::after, .frame .subtitle { transition: none; }
}