/* Links in the AMA's notes (links.js), for the page and the desk: a link's print taped under
   the words (A, chosen on the board, 2026-10-30), and the viewer a print plays in. The
   board is public/design-system/ama-media.html. */
:root {
  --lk-print: oklch(0.995 0.002 85);
  --lk-tape: oklch(0.97 0.02 95 / 0.62);
  --lk-tape-edge: oklch(0.5 0.02 80 / 0.12);
  --lk-shadow-near: oklch(0.2 0.02 60 / 0.16);
  --lk-shadow-far: oklch(0.2 0.02 60 / 0.09);
  --vw-scrim: oklch(0.2 0.01 70 / 0.55);
  /* The sheet's shadow is a note's (ama.css), as a note casts it on the dark table by night:
     the page behind the sheet is dimmed, so a shadow drawn for the day's table can't be seen */
  --vw-shadow-near: oklch(0 0 0 / 0.55);
  --vw-shadow-far: oklch(0 0 0 / 0.35);
}
:root[data-theme="dark"] {
  --lk-print: oklch(0.86 0.006 85);
  --lk-tape: oklch(0.8 0.02 95 / 0.32);
  --lk-tape-edge: oklch(1 0 0 / 0.06);
  --lk-shadow-near: oklch(0 0 0 / 0.55);
  --lk-shadow-far: oklch(0 0 0 / 0.35);
  --vw-scrim: oklch(0.08 0.005 70 / 0.72);
}

/* An address inside a sentence stays in the words, shortened, as a link */
.ink a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklch, currentColor, transparent 55%); }

/* ── The prints, under the words ── */
.lks { display: grid; gap: 16px; margin-top: 14px; }
.lk { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* A print is a photo taped to a letter: on a wide note, about half its width */
.lk:not(.is-square) { max-width: 28rem; }
.lk-print { position: relative; display: block; padding: 6px; background: var(--lk-print); rotate: var(--lk-turn, -0.8deg);
  box-shadow: 0 1px 1px var(--lk-shadow-near), 0 5px 10px var(--lk-shadow-far);
  transition: translate 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.lk-print img { display: block; width: 100%; height: auto; aspect-ratio: var(--lk-ratio, 16 / 9); object-fit: cover; background: var(--bg-sunken); }
/* Tape over its top edge, at both corners */
.lk-tape { position: absolute; top: -9px; width: 54px; height: 17px; background: var(--lk-tape); box-shadow: 0 0 0 0.5px var(--lk-tape-edge); }
.lk-tape.l { left: 14px; rotate: -7deg; }
.lk-tape.r { right: 14px; rotate: 6deg; }
/* What plays carries a play mark, as a still from a film does */
.lk-play { position: absolute; inset: 6px; display: grid; place-items: center; pointer-events: none; }
.lk-play::before { content: ""; width: 0; height: 0; margin-left: 4px; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35)); }
.lk-words { display: grid; gap: 1px; margin-top: 9px; }
.lk-words:first-child { margin-top: 0; }
.lk-title { font: 500 0.875rem/1.3 var(--font-ui); color: var(--fg-default); text-wrap: pretty; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lk-site { font: 400 0.8125rem/1.3 var(--font-ui); color: var(--fg-muted); overflow-wrap: anywhere; }
/* Square art (an album's) sits beside its words, a smaller print */
.lk.is-square { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.lk.is-square .lk-print { padding: 5px; }
.lk.is-square .lk-words { margin-top: 0; }
.lk.is-square .lk-tape { top: -7px; width: 34px; height: 13px; }
.lk.is-square .lk-tape.l { left: 6px; }
.lk.is-square .lk-tape.r { right: 6px; }
.lk.is-square .lk-play { inset: 5px; }
.lk.is-square .lk-play::before { margin-left: 3px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
/* Lifted off the paper as the pointer or the keyboard comes to it, never boxed */
@media (hover: hover) {
  .lk:hover .lk-print { translate: 0 -2px; box-shadow: 0 2px 2px var(--lk-shadow-near), 0 10px 18px var(--lk-shadow-far); }
}
.lk:focus-visible { outline: none; }
/* By keyboard, lifted only: never a box, ring or glow (tests/no-focus-boxes.test.js) */
.lk:focus-visible .lk-print { translate: 0 -2px; }
@media (prefers-reduced-motion: reduce) { .lk-print { transition: none; } }

/* ── His pictures and videos from MovieBrain: prints at their own shape, a video's with its
   first frame, a play mark and its length ── */
.mds { display: grid; gap: 16px; justify-items: start; margin-top: 14px; }
.md { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.md .lk-print { display: inline-block; max-width: 100%; vertical-align: top; }
.md .lk-print img, .md .lk-print video { display: block; width: auto; height: auto; max-width: 100%; max-height: 320px; aspect-ratio: auto; object-fit: contain; background: var(--bg-sunken); }
.md-time { position: absolute; right: 12px; bottom: 12px; padding: 1px 5px; font: 500 0.6875rem/1.4 var(--font-ui); color: #fff; background: rgb(0 0 0 / 0.5); }
@media (hover: hover) {
  .md:hover .lk-print { translate: 0 -2px; box-shadow: 0 2px 2px var(--lk-shadow-near), 0 10px 18px var(--lk-shadow-far); }
}
.md:focus-visible { outline: none; }
.md:focus-visible .lk-print { translate: 0 -2px; }
/* Who made a picture or video, linked to where they posted it */
.md-item { display: grid; gap: 7px; justify-items: start; max-width: 100%; }
.md-credit { font: 400 0.8125rem/1.3 var(--font-ui); color: var(--fg-muted); text-decoration: none; overflow-wrap: anywhere; }
a.md-credit:hover { color: var(--fg-default); }
/* A link or a document from MovieBrain is a link's print, as wide as one */
.mds > .lk { justify-self: stretch; }
/* Saved text from MovieBrain: a clipping, a slip of the same paper torn as the notes are
   (paper.css), its words in the writing's face; a tap reads it whole. Its paper is the raised
   one (--bg-surface), as the notes' own ink is written for it by day and by night: on the
   print's paper, pale by night like a photo's mount, its pale night ink couldn't be read
   (Mustafa, 2026-10-31) */
.md-clip { display: block; width: 100%; max-width: 30rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.md-slip { position: relative; isolation: isolate; display: grid; gap: 4px; padding: 12px 16px 14px; rotate: var(--lk-turn, 0.4deg);
  filter: drop-shadow(0 1px 1px var(--lk-shadow-near)) drop-shadow(0 4px 7px var(--lk-shadow-far));
  transition: translate 200ms var(--ease-out); }
.md-slip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-surface);
  -webkit-mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  mask-image: linear-gradient(#000 0 0), var(--tear-top), var(--tear-bottom), var(--tear-left), var(--tear-right);
  -webkit-mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px; mask-size: 100% 100%, 240px 5px, 240px 5px, 5px 240px, 5px 240px;
  -webkit-mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  mask-position: 0 0, var(--tear-x, 0) 0, calc(0px - var(--tear-x, 0px)) 100%, 0 var(--tear-y, 0), 100% calc(0px - var(--tear-y, 0px));
  -webkit-mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y; mask-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over; mask-composite: subtract, add, add, add, add; }
.md-slip-title { font: 500 0.8125rem/1.3 var(--font-ui); color: var(--fg-muted); }
.md-slip-words { font: 400 1rem/1.4 var(--ama-font, "EB Garamond", Georgia, serif); color: var(--text-ink, var(--fg-default)); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .md-clip:hover .md-slip { translate: 0 -2px; } }
/* ── Two or more under one note: side by side, two to a row (Mustafa, 2026-10-31: one under
   another, four made a card very long). Each keeps its own shape within its half; square art
   stands over its words there, as a picture does; a clipping takes the whole row, and the
   next print fills the half it left (dense) ── */
.lks.is-grid, .mds.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 18px 16px; align-items: start; justify-items: stretch; }
.is-grid > .lk:not(.is-square) { max-width: none; }
.is-grid > .lk.is-square { display: block; }
.is-grid > .lk.is-square .lk-words { margin-top: 9px; }
.is-grid > .md, .is-grid > .md-item { justify-self: start; max-width: 100%; }
.is-grid .md .lk-print img, .is-grid .md .lk-print video { max-height: 240px; }
.is-grid > .md-clip { grid-column: 1 / -1; }
.md-clip:focus-visible { outline: none; }
.md-clip:focus-visible .md-slip { translate: 0 -2px; }

/* ── The viewer: the page dims, and what plays comes forward on a sheet of the same paper,
   its torn margin all round ── */
.vw { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; overscroll-behavior: contain;
  padding: max(28px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--vw-scrim); opacity: 0; transition: opacity 280ms var(--ease-out); }
.vw.is-on { opacity: 1; }
.vw-sheet { position: relative; isolation: isolate; padding: 18px; max-width: 100%; transform-origin: 0 0; }
/* The sheet's paper is a layer of its own under what plays: torn as one outline by
   links.js (paper()), from the notes' own tears, its grain inside the tear, and its shadow
   drawn from the torn paper, close and soft, as a note's. The shadow is the paper's alone:
   drawn over the player as well, it would be drawn again with every frame of the video */
.vw-paper { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 1px 1px var(--vw-shadow-near)) drop-shadow(0 4px 7px var(--vw-shadow-far)); }
.vw-paper > span { position: absolute; inset: 0; background: var(--bg-canvas);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.vw-paper > span::before { content: ""; position: absolute; inset: 0;
  background: var(--paper-texture) 0 0 / var(--paper-texture-size) repeat; filter: var(--paper-texture-filter); mix-blend-mode: var(--paper-texture-blend); opacity: var(--paper-texture-opacity); }
.vw-sheet iframe { display: block; border: 0; }
/* A clipping read whole, in the writing's face */
.vw-text { width: min(40rem, calc(100vw - 68px)); max-height: calc(100dvh - 132px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px; }
.vw-text-title { margin: 0 0 10px; font: 500 0.875rem/1.3 var(--font-ui); color: var(--fg-muted); }
.vw-text-words { margin: 0; font: 400 1.125rem/1.5 var(--ama-font, "EB Garamond", Georgia, serif); color: var(--text-ink, var(--fg-default)); white-space: pre-wrap; overflow-wrap: anywhere; }
/* A picture, and a video, as large as the window lets them be at their own shape */
.vw-picture, .vw-film video { display: block; width: auto; height: auto; max-width: min(1100px, calc(100vw - 68px)); background: var(--bg-sunken); }
.vw-picture { max-height: calc(100dvh - 132px); }
.vw-film video { max-height: calc(100dvh - 158px); background: #000; cursor: pointer; }
/* Its progress, a line of ink under it */
.vw-line { display: block; height: 2px; margin-top: 12px; background: color-mix(in oklch, var(--text-ink, currentColor), transparent 82%); }
.vw-line > i { display: block; width: 0; height: 100%; background: var(--text-ink, currentColor); }
.vw-sheet iframe.is-youtube { width: min(960px, calc(100vw - 68px), calc((100dvh - 132px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; background: #000; }
.vw-sheet iframe.is-spotify { width: min(560px, calc(100vw - 68px)); height: 352px; background: transparent; }
.vw-sheet iframe.is-spotify.is-short { height: 152px; }
.vw-close { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); color: #fff; }
/* On a phone the sheet's margin narrows, and what plays takes the width that frees */
@media (max-width: 600px) {
  .vw-sheet { padding: 10px; }
  .vw-sheet iframe.is-youtube { width: min(960px, calc(100vw - 52px), calc((100dvh - 132px) * 16 / 9)); }
  .vw-sheet iframe.is-spotify { width: calc(100vw - 52px); }
  .vw-picture, .vw-film video { max-width: calc(100vw - 52px); }
}
@media (prefers-reduced-motion: reduce) { .vw { transition: none; } }