/* a board: one poster, one story, one post. the sheet's css, sized by the window, so the same file is every format.
   poster 1200x1800, story 1080x1920, post 1080x1080, wide 1600x900: the window is the format */
html, body { height: 100%; }
body { overflow: hidden; }
.board { position: relative; width: 100vw; height: 100vh; overflow: hidden; box-sizing: border-box; padding: 6vmin; display: flex; flex-direction: column; gap: 4vmin; background: var(--bg); color: var(--fg); }
.dark  { --fg: #ffffff; --bg: #111111; --muted: #808080; --border: #444444; }
.big   { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.big svg { display: block; width: 100%; height: 100%; }
/* a drawing that runs off the sheet: past the padding at the top and both sides, stopping above the words.
   it keeps its own frame (data-fit="own") and draws past it, so what the frame holds is whole on every format
   and the members run on to the edge of whatever box the format gives it */
.big.bleed { margin: -6vmin -6vmin 0; }
.foot  { display: flex; align-items: center; justify-content: space-between; gap: 3vmin; flex: none; }
.lockup { display: flex; align-items: center; }
.lockup svg { display: block; }
/* the display voice, on a board. styles.css sets what it is — caps, weight 100, the tighter tracking,
   and the larger a line is set the lighter it is drawn; this only says how big it gets on a sheet
   whose width is the format. it is the one size a board's own line is ever set at: a poster that needs
   a second size does not need a second size, it needs fewer words. .say is the line above a drawing,
   .line is what is read, .tiny is what is noted, .lab is what a thing is called. that is the whole
   scale, and nothing on a board is set outside it. */
.wm    { font-size: 2.4vmin; font-weight: 200; letter-spacing: .06em; text-transform: uppercase; }
.say   { font-size: 7vmin; font-weight: 200; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.line  { font-size: 3.2vmin; font-weight: 400; line-height: 1.25; }
.tiny  { font-size: 2vmin; font-weight: 400; line-height: 1.3; }
.title { font-size: min(13vw, 22vmin); }
/* .say and not .title is the board's line, and the reason is the weight. styles.css sets the display
   voice at 100 — caps, hairline — and it holds on a screen because there the line is four or five
   times anything near it and is read at arm's length. a poster is read across a room and carries a
   drawing beside the line, so the line is never that much bigger than the sheet, and at 100 it thins
   out and goes quiet. 200 is the weight that survives the distance. .title stays for the one board
   whose whole content is the line, where nothing competes and the hairline is the point.

   .one is .say fitted to its box: a designation, a dimension, a name — too short for 7vmin to reach
   the measure, and a line that stops halfway is not the sheet's line. board.js sets the size where
   the longest line spans the box exactly. one line per source line; the break is the board's own. */
.say.one { white-space: nowrap; line-height: .92; margin: 0; align-self: center; }
/* the sheet border, the way a set is framed: outer and inner */
.border { position: absolute; inset: 4vmin; border: .14vmin solid var(--fg); }
.border::after { content: ""; position: absolute; inset: 1.4vmin; border: .1vmin solid var(--fg); }
/* three kinds of board are one file each and say nothing of their own, so it is said here, once.
   a plate is the material and nothing else: no member, no joint, no thing being photographed — the surface
   runs off all four sides and the sheet is the material, in warm open light, close enough to read the grain
   and never so close it turns gritty. a material is the built thing, close: one photograph at the angle you
   lean in at, the line low on it, the caption a title block. where red lies over either it is the checker's,
   drawn in the photograph's pixels by marks.py and laid the way the picture is, so it lands on what it
   measures. a landmark is the cover's sketch alone on the sheet, drawing itself, nothing said over it: the
   one number is the hand's, already in the drawing, and the caption only says what and where. */
/* a photograph as the whole board, the line on it in the sheet's white — always, on any picture,
   with no exception. a photograph is not paper and ink is for paper; the board's one voice on a
   picture is its white, and that is what the signature is drawn in too. a photograph white does not
   read on is the wrong photograph for a board, and that is fixed in the picture, never in the ink. */
.cover { color: #ffffff; --fg: #ffffff; --bg: transparent; }
.foot .wm { text-align: right; max-width: 50%; }
.cover.top > img { object-position: 50% 0; }
/* the checker's red (marks.py) or the engineer's white note (notes.py) over a photograph: the same box and layer as the picture, after it, so it lands where it was drawn and under the words */
.cover > img.marks { pointer-events: none; }
/* a plate's line: a short measure, low on the picture — or high, on the one whose weight is at the foot */
.say.low  { margin-top: auto; max-width: 11em; }
.say.high { margin-bottom: auto; max-width: 11em; }

/* the field is the sheet's, in styles.css: a board lays out on it with data-field="6x9" like a slide or a
   page does. what is here is only what a board adds to it — the signature, in one cell of the footer row */
.board.field .lockup svg { width: 24vmin; height: auto; }

/* a board under a veil (styles.css): what fills the sheet runs to its foot, and the footer is laid over it,
   held in the board's margin like any other footer */
.board > .foot.veil { padding-left: 6vmin; padding-right: 6vmin; padding-bottom: 6vmin; }