/* The home page's motion: the gate for the arrival (arrive.ts) and the canvas both scripts lay over
   the desk picture. Everything here sits behind data-blog-arriving or a class the scripts add, so
   with scripts off, with reduced motion, and when Back or Forward brings the page back, none of it
   matches and the page is the still. blog-home.css has the desk scene itself.

   data-blog-arriving is set on <html> by /blog/look.js, which runs before the desk scene is
   painted, and only when the arrival is due: the scene is on the page, the browser can watch it
   scroll into view, motion is allowed, and this is not Back or Forward. It plays every time the
   home page opens (Azhar, Oct 11), so a refresh plays it again.
     "waiting"  the drawing and the printed headline are out of sight and the lure and bulb are
                scaled to nothing, until arrive.ts has its cover over the picture. If it has not
                taken over after 4 seconds (it did not load, or it broke), the animations at the
                end of this block show everything, which is the still.
     "playing"  arrive.ts has put the cover over the picture and shows each piece (class
                blog-desk-on) as the arrival reaches it. It removes the attribute when it ends. */

@media screen and (scripting: enabled) {
  html[data-blog-arriving] .blog-desk-booktext,
  html[data-blog-arriving="waiting"] .blog-desk-art {
    visibility: hidden;
  }
  html[data-blog-arriving] .blog-desk-lure,
  html[data-blog-arriving] .blog-desk-bulb {
    transform: scale(0);
  }
  html[data-blog-arriving="playing"] .blog-desk-scene > .blog-desk-on {
    visibility: visible;
  }
  html[data-blog-arriving="playing"] .blog-desk-scene > svg.blog-desk-on {
    transform: none;
  }
  /* the way out if the script never takes over: after 4 seconds everything shows as the still */
  html[data-blog-arriving="waiting"] .blog-desk-art,
  html[data-blog-arriving="waiting"] .blog-desk-booktext {
    animation: blog-desk-show 1ms 4s forwards;
  }
  html[data-blog-arriving="waiting"] .blog-desk-lure,
  html[data-blog-arriving="waiting"] .blog-desk-bulb {
    animation: blog-desk-grow 1ms 4s forwards;
  }
}
@keyframes blog-desk-show {
  to {
    visibility: visible;
  }
}
@keyframes blog-desk-grow {
  to {
    transform: none;
  }
}

/* While the arrival writes the headline letter by letter, the printed copy's own colour is taken
   away and each letter carries the ink itself. Without this the line clamp's ellipsis (on a long
   title, at the end of its last line) would show before any letter was written there. The arrival
   takes the class off at its last letter, so the ellipsis arrives with the end of the line. */
.blog-desk-booktext.blog-desk-writing {
  color: transparent;
}
.blog-desk-booktext.blog-desk-writing > span {
  color: #2a1d10;
}

/* The canvas over the desk picture: the arrival's cover, which is cut away stroke by stroke, and
   the page turn's drawing. The scene is its box, so it sits exactly on the picture. */
.blog-desk-cover {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* The home page: the desk scene and Contents. The title block (which also holds the desk scene
   beside it), the labels, the rules and the arrow links are shared with the search and missing
   pages (blog-title.css), and the colours, the page and one line of a list, a numbered one too,
   are the look's (blog-look.css). The desk scene's sizes and positions are copied from the
   approved reference home page; the contents page is the layout Azhar chose on Oct 11.

   THE DESK SCENE. The picture is the container (container-type), so every size inside it is a
   percentage of the picture or a cqw (1% of the picture's width) and stays on the drawing at any
   width. The lure is an svg in the picture's own pixels (1400 by 796). The bulb is a small svg of
   a fixed size, placed in percent. The headline is live text printed on the book's right page
   and slanted to lie on it: its box and slant were fitted to the page's four corners, and they
   differ a little between the two looks (the two pictures are not drawn to the same pixel) and
   on a phone (the book is shown larger there). The motion scripts read the same pieces by class
   name (DeskScene.astro). */

/* ----------------------------------------------------------------------------- the desk scene */

/* The scene stands at the right of the title block (blog-title.css, .blog-title-top), and under
   it below 1100px. It is pulled out 12px at the right, where its picture has some empty margin,
   so the drawing lines up with the page's text edge. */
.blog-desk {
  --scene-width: clamp(420px, 40vw, 560px);
  margin-right: -12px;
}
.blog-desk-box {
  position: relative;
}
.blog-desk-scene {
  position: relative;
  width: var(--scene-width);
  aspect-ratio: 1400 / 796;
  container-type: inline-size;
}
.blog-desk-scene > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* the lure: a filled outline of the line and nib in the lure's colour, a thin echo of its centre,
   and the same two shapes again in book ink where they lie over the paper (the group is clipped
   to the page's corners) */
.blog-desk-scene > svg.blog-desk-lure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.blog-desk-lure-line,
.blog-desk-lure-ink {
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.blog-desk-lure-line {
  fill: var(--lure);
  stroke: var(--lure);
}
.blog-desk-lure-ink {
  fill: #2a1d10;
  stroke: #2a1d10;
}
.blog-desk-lure-echo,
.blog-desk-lure-ink-echo {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.42;
}
.blog-desk-lure-echo {
  stroke: var(--lure);
}
.blog-desk-lure-ink-echo {
  stroke: #2a1d10;
}

/* the bulb on the end of the lure, resting on the book's page; (x, y) is its centre. The motion
   scripts know the same place as bulbRest in ../art/desk-geometry.ts, in picture pixels (972.5,
   434.5 and 971.1, 434.15), so the two must move together. */
.blog-desk-bulb {
  position: absolute;
  width: 18px;
  height: 18px;
  overflow: visible;
}
.blog-desk-bulb.blog-dark {
  left: calc(69.464% - 9px);
  top: calc(54.588% - 9px);
}
.blog-desk-bulb.blog-light {
  left: calc(69.364% - 9px);
  top: calc(54.542% - 9px);
}
.blog-desk-bulb path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.blog-desk-bulb-body {
  fill: #e9dfca;
  stroke: #2a1d10;
  stroke-width: 1.8;
}
.blog-desk-bulb-hatch {
  stroke: #8a5410;
  stroke-width: 1.4;
}

/* The headline printed on the page: live text in book ink, slanted by an affine matrix to lie
   on the page, in a box fitted to it. --size and --lines are what fits (a long title steps down
   through -mid and -long, chosen in DeskScene.astro from its length; --lines is the whole lines
   the box holds at that size, and the last one is cut with an ellipsis). */
.blog-desk-booktext {
  --size: 2.05cqw;
  --lines: 5;
  position: absolute;
  top: var(--top);
  left: var(--left);
  display: -webkit-box;
  box-sizing: border-box;
  width: var(--width);
  height: var(--height);
  /* the box ends at the last whole line, so no part of a line past the clamp shows under the
     ellipsis (the page is a little taller than a whole number of lines) */
  max-height: calc(var(--lines) * 1.17 * var(--size));
  margin: 0;
  overflow: hidden;
  color: #2a1d10;
  font: 600 var(--size) / 1.17 "Newsreader", Georgia, serif;
  letter-spacing: -0.004em;
  mix-blend-mode: multiply;
  overflow-wrap: anywhere;
  text-wrap: balance;
  transform-origin: 0 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
}
.blog-desk-booktext.blog-dark {
  --left: 51.866%;
  --top: 56.042%;
  --width: 15.284cqw;
  --height: 12.513cqw;
  transform: matrix(0.99637, -0.08515, 0.28708, 0.95791, 0, 0);
}
.blog-desk-booktext.blog-light {
  --left: 51.997%;
  --top: 55.951%;
  --width: 15.12cqw;
  --height: 12.538cqw;
  transform: matrix(0.99643, -0.08438, 0.28513, 0.95849, 0, 0);
}
.blog-desk-booktext-mid {
  --size: 1.7cqw;
  --lines: 6;
}
.blog-desk-booktext-long {
  --size: 1.45cqw;
  --lines: 7;
}

/* ----------------------------------------------------------------------------- contents */

/* The label at the left, the note at the right, a rule under them, then the list. The rows are
   PostRow with a number (blog-look.css has the number's column); what is set here is the
   entries' own sizes. The newest entry is larger. */
.blog-contents-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
}
.blog-contents-note {
  margin: 0;
  color: var(--ink-soft);
  font: italic 400 17px / 1.4 "Newsreader", Georgia, serif;
}
.blog-contents-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.blog-entry .blog-row-line {
  gap: 12px;
}
.blog-entry .blog-row-title {
  font-size: 27px;
  line-height: 1.2;
}
.blog-entry-newest .blog-row-title {
  font-size: 40px;
  line-height: 1.08;
}
/* the number's small top space puts it level with the title's first line, whose height is the
   title's size times its line height (27 by 1.2 and 40 by 1.08) */
.blog-entry .blog-row-number {
  padding-top: 7px;
}
.blog-entry-newest .blog-row-number {
  padding-top: 14px;
}
.blog-entry .blog-row-summary {
  max-width: 860px;
}
.blog-entry-newest .blog-row-summary {
  font-size: 21px;
}
/* the reading time in the mono face and, when the writer filled it in, who the post was written
   for in the text face, which is the writer's own words and so is not changed in any way. The dot
   between them is a mark, not a number, so it is in the text face too (the site's checks hold every
   mono string to a named source). */
.blog-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font: 500 13px / 1.3 var(--font-data);
  letter-spacing: 0.02em;
}
.blog-entry-for,
.blog-entry-sep {
  font: 500 14px / 1.3 var(--font-text);
  letter-spacing: 0;
}
/* the writer's words can be one long name or address; they break rather than run off the page,
   which the ground would then cut off (a flex item does not break a word by itself) */
.blog-entry-for {
  min-width: 0;
  overflow-wrap: anywhere;
}
.blog-contents-empty {
  margin: 0 0 8px;
  color: var(--ink);
  font: italic 400 26px / 1.3 "Newsreader", Georgia, serif;
}

/* ----------------------------------------------------------------------------- narrower screens */

@media (max-width: 1099px) {
  .blog-desk {
    margin: 26px 0 0;
  }
  .blog-desk-scene {
    width: 100%;
    max-width: 560px;
  }
}

/* On a phone the picture is shown larger than the screen is wide and cropped to the fish's head
   and the book, so the printed headline is fitted again to that larger book. In each entry the
   number is above the title (blog-look.css), and the title is a little smaller. */
@media (max-width: 599px) {
  .blog-desk-box {
    width: 100%;
    overflow: hidden;
  }
  .blog-desk-scene {
    --scene-width: max(500px, 156%);
    position: relative;
    width: var(--scene-width);
    max-width: none;
    margin-left: calc(100% - var(--scene-width) * 0.8214);
  }
  .blog-desk-booktext {
    --size: 2.25cqw;
    --lines: 4;
  }
  .blog-desk-booktext.blog-dark {
    --left: 50.903%;
    --top: 56.737%;
    --width: 18.233cqw;
    --height: 12.889cqw;
  }
  .blog-desk-booktext.blog-light {
    --left: 51.039%;
    --top: 56.644%;
    --width: 18.045cqw;
    --height: 12.917cqw;
  }
  .blog-desk-booktext-mid {
    --size: 1.85cqw;
    --lines: 5;
  }
  .blog-desk-booktext-long {
    --size: 1.6cqw;
    --lines: 6;
  }
  .blog-entry .blog-row-number,
  .blog-entry-newest .blog-row-number {
    padding-top: 0;
  }
  .blog-entry .blog-row-title {
    font-size: 24px;
  }
  .blog-entry-newest .blog-row-title {
    font-size: 32px;
  }
  .blog-entry .blog-row-summary,
  .blog-entry-newest .blog-row-summary {
    font-size: 18px;
  }
}