/* The frame: a picture hung on a wall with a small museum-style label.
 *
 * Every layout number is a custom property in :root below. The frame is laid
 * out on a stage of the design size (1920x1080 or 1080x1920), where the picture
 * shows at native pixels, and frame.js scales the stage uniformly to fit its
 * screen, centred, with the wall filling the rest. The wall colour comes from
 * the server (--wall), computed from the picture's mean colour. */

:root {
  /* The picture: a soft shadow under it and a hairline round it. */
  --shadow-blur: 14px;  /* Gaussian standard deviation; a CSS blur radius is twice that */
  --shadow-drop: 10px;
  --shadow-opacity: 0.55;
  --hairline: #ffffff14;

  /* Type. */
  --serif: "Source Serif 4", serif;
  --sans: "Inter", sans-serif;
  --title-size: 26px;
  --title-line: 31px;
  --title-colour: #f1ede4;
  --portrait-title-size: 30px;
  --portrait-title-line: 36px;
  --key-size: 10.5px;  /* rubric name, upper case, over its entry */
  --key-line: 15px;
  --key-weight: 500;
  --key-tracking: 1.47px;
  --key-colour: #8a857c;
  --entry-size: 14px;
  --entry-line: 20px;
  --entry-colour: #b9b5ad;
  --credit-size: 10.5px;
  --credit-line: 15px;
  --credit-tracking: 0.4px;
  --credit-colour: #8a857c;
  --key-to-entry: 1px;

  /* Landscape, 1920x1080: the picture top left; the label in the column to its
     right, bottom-aligned with the picture. */
  --l-picture-x: 28px;
  --l-picture-y: 28px;
  --l-label-x: 1592px;
  --l-label-width: 300px;
  --l-label-bottom: 1052px;
  --l-after-title: 16px;
  --l-between-rows: 9px;
  --l-above-rule: 16px;
  --l-below-rule: 9px;
  --l-rule: #ffffff22;

  /* Portrait, 1080x1920: under the picture, the title with the credit set
     right on its line (or on a line of its own under the cells), then the hand
     as cells side by side. If the label runs out of room the credit goes. */
  --p-picture-x: 28px;
  --p-picture-y: 112px;
  --p-label-x: 28px;
  --p-label-width: 1024px;
  --p-label-top: 1680px;
  --p-label-bottom: 1892px;
  --p-title-to-cells: 14px;
  --p-cell-gap: 44px;
  --p-cell-max: 320px;
  --p-between-cell-rows: 12px;
  --p-title-to-credit: 40px;
}

@font-face { font-family: "Source Serif 4"; font-weight: 400; src: url(/fonts/SourceSerif4-Regular.otf) format("opentype"); }
@font-face { font-family: "Inter"; font-weight: 400; src: url(/fonts/Inter-Regular.ttf) format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; src: url(/fonts/Inter-Medium.ttf) format("truetype"); }

.glim-screen { position: relative; overflow: hidden; background: var(--wall, #111); }
.glim-stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  background: var(--wall); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.glim-landscape { width: 1920px; height: 1080px; }
.glim-portrait { width: 1080px; height: 1920px; }

.glim-picture {
  position: absolute; display: block;
  box-shadow: 0 var(--shadow-drop) calc(2 * var(--shadow-blur)) rgb(0 0 0 / var(--shadow-opacity));
  outline: 1px solid var(--hairline);
}
.glim-landscape .glim-picture { left: var(--l-picture-x); top: var(--l-picture-y); }
.glim-portrait .glim-picture { left: var(--p-picture-x); top: var(--p-picture-y); }

.glim-label { position: absolute; }
.glim-title { font: 400 var(--title-size) / var(--title-line) var(--serif); color: var(--title-colour); }
.glim-key {
  font: var(--key-weight) var(--key-size) / var(--key-line) var(--sans);
  letter-spacing: var(--key-tracking); text-transform: uppercase; color: var(--key-colour);
}
.glim-entry { font: 400 var(--entry-size) / var(--entry-line) var(--sans); color: var(--entry-colour); margin-top: var(--key-to-entry); }
.glim-credit { font: 400 var(--credit-size) / var(--credit-line) var(--sans); letter-spacing: var(--credit-tracking); color: var(--credit-colour); }

.glim-landscape .glim-label { left: var(--l-label-x); width: var(--l-label-width); bottom: calc(1080px - var(--l-label-bottom)); }
.glim-landscape .glim-rows { margin-top: var(--l-after-title); }
.glim-landscape .glim-row + .glim-row { margin-top: var(--l-between-rows); }
.glim-landscape .glim-credit {
  margin-top: var(--l-above-rule); border-top: 1px solid var(--l-rule); padding-top: var(--l-below-rule);
}

.glim-portrait .glim-label { left: var(--p-label-x); width: var(--p-label-width); top: var(--p-label-top); }
.glim-portrait .glim-title { font-size: var(--portrait-title-size); line-height: var(--portrait-title-line); }
.glim-head { display: flex; align-items: baseline; gap: var(--p-title-to-credit); }
.glim-head .glim-title { flex: 1 1 auto; min-width: 0; }
.glim-head .glim-credit { flex: none; white-space: nowrap; }
.glim-cells {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  column-gap: var(--p-cell-gap); row-gap: var(--p-between-cell-rows); margin-top: var(--p-title-to-cells);
}
.glim-cell { flex: none; max-width: var(--p-cell-max); }
.glim-portrait .glim-label > .glim-credit { margin-top: var(--p-between-cell-rows); }