/* THE REEL (/services): four riso prints on one strip of film. Each service is a frame: its
   print, drawn in the material of the home page's pill (a body in the service's own ink under a
   black keyline, a paper halftone lifting its top left, a black halftone shading its bottom right,
   a paper glint), centred over the frame's halftone in that ink, three pointers that say what the
   service is, and its name in the logotype with the service's word lit on a block of the same ink.
   Everything in a frame is centred. Nothing is borrowed from the channels: no stills, no counters.
   Phone (below 900px): the current frame fills the stage above a film strip of four thumbnails
   (the prints small), and the strip picks the frame (reel.js); the frame itself carries no print
   and no arrow (the founder's phone review, 28 Sep): its name heads it and its three pointers,
   large, take the face under it. Desktop: the four frames side by side between sprocket bands, each its
   print over its name band, no strip. Every word reads left
   to right. Every size is capped by the stage (cqh), so a short phone keeps the whole frame. */
.reel {
  --strip: clamp(120px, 24cqh, 160px);
  --sprockets: repeating-linear-gradient(90deg, var(--paper) 0 10px, transparent 10px 26px);
  background: var(--ink); container-type: size;
}
.frames { position: absolute; inset: 0; }
.frame {
  display: none; position: relative; overflow: hidden; container-type: size;
  background: var(--paper); color: var(--ink); text-decoration: none; transition: var(--flip);
}
/* each service's colour: the print's body, its halftone ground, its lit word and its hover. A
   print's ground (--g) and its colour ink (--b) are set where the colour is known; hover swaps them */
.frame, .thumb { --g: var(--paper); --b: var(--c); }
[data-service="micro_dramas"] { --c: var(--sun); --hi-ink: var(--ink); }   /* black reads on sunflower */
[data-service="ai_production"] { --c: var(--teal); --hi-ink: var(--paper); }
[data-service="instagram_ip"] { --c: var(--purple); --hi-ink: var(--paper); }
[data-service="youtube_ip"] { --c: var(--scarlet); --hi-ink: var(--paper); }
/* the dock prints in the ink of the service that is up (site.css): on a phone the strip's pick,
   on a desktop the frame under the pointer */
body:has(.frame[data-current][data-service="micro_dramas"]) { --dock-ink: var(--sun); --dock-on: var(--ink); }
body:has(.frame[data-current][data-service="ai_production"]) { --dock-ink: var(--teal); --dock-on: var(--paper); }
body:has(.frame[data-current][data-service="instagram_ip"]) { --dock-ink: var(--purple); --dock-on: var(--paper); }
body:has(.frame[data-current][data-service="youtube_ip"]) { --dock-ink: var(--scarlet); --dock-on: var(--paper); }
.frame[data-current] { display: grid; grid-template-rows: minmax(0, 1fr) auto var(--strip); position: absolute; inset: 0; }
/* the halftone ground under every print and thumbnail */
.frame::before, .thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--c) 42%, transparent) .9px, transparent 1.1px); background-size: 4px 4px;
}

/* the face: the print centred in its box (xMidYMid) and the three pointers; each layout below
   places and sizes them */
.face { display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; min-height: 0; }
/* the print's box is its row of the face, and the print is laid in it absolutely, so its size
   comes from the row and never from the drawing: Safari resolves an SVG's percentage height in
   a grid row against the whole face, which drew the print down over the pointers */
.art { position: relative; min-height: 0; }
.art > .plate { position: absolute; inset: 0; }
.plate { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; transition: opacity var(--dur-2) var(--ease); }
.notes { /* the pointers: caps on square bullets in the service's ink, the list centred as a block */
  position: relative; list-style: none; margin: 0; padding: 0; display: grid; justify-content: center;
  font: 700 15px/1.3 var(--text); letter-spacing: .06em; text-transform: uppercase;
}
.notes li { max-width: none; display: grid; grid-template-columns: .6em 1fr; column-gap: .6em; align-items: baseline; white-space: nowrap; }
.notes li::before { content: ""; width: .6em; height: .6em; background: var(--c); border: 2px solid var(--ink); align-self: center; }
.plate .rb { fill: var(--b); transition: fill var(--dur-1) var(--ease); } /* the service's colour */
.plate .rg { fill: var(--g); transition: fill var(--dur-1) var(--ease); } /* the paper, knocked out */
.plate .rk { fill: var(--ink); }                                          /* black ink */
.plate .rl { fill: none; }                                                /* the black keyline */
.plate .rl, .plate .k { stroke: var(--ink); stroke-width: 7; stroke-linejoin: miter; }
.plate .rh { fill: url(#pd); }                                            /* the paper halftone (the highlight) */
.plate .rs { fill: url(#kd); }                                            /* the black halftone (the shade) */
.defs { position: absolute; }
.go { /* in the face's top right corner on a desktop; none on a phone */
  position: absolute; top: 20px; right: 20px; width: 52px; height: 52px; display: grid; place-items: center;
  border: var(--rule); background: var(--paper); color: var(--ink);
}
.go svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* the slate band: the name in the logotype, centred, one word to a line, the service's word in
   its colour. Every name is one size and every band three lines of it (--s: PRODUCTION, the
   widest word, across the band, capped by the stage's height), so the names match
   from frame to frame and the rule over them sits at one height. */
.slate {
  position: relative; padding: 12px 16px; background: var(--paper); border-top: var(--rule); container-type: inline-size; transition: var(--flip);
  --s: min(72px, (100cqw - 4px) / 7.6, 11cqh);
}
/* a name of one or two lines sits in the middle of its three-line band, not at its head */
.name { display: grid; align-content: center; justify-items: center; margin: 0; max-width: none; min-height: calc(3 * .9 * var(--s)); font-size: var(--s); line-height: .9; text-align: center; --hi: var(--c); }
.name span { display: block; white-space: nowrap; }
.name .hi { display: inline-block; }

/* hover or focus floods the frame with the service's ink (its own text colour on it), swaps the
   print's inks to match (its ink goes paper, its paper and its highlight the ink), and on a
   desktop lets the pointers take the face */
.frame:hover, .frame:focus-visible { --g: var(--c); --b: var(--paper); color: var(--hi-ink); }
.frame:is(:hover, :focus-visible) .name .hi { background: var(--hi-ink); color: var(--c); }
.frame:is(:hover, :focus-visible) .notes li::before { background: var(--hi-ink); border-color: var(--hi-ink); }
.frame[data-service="micro_dramas"]:is(:hover, :focus-visible) .rh { fill: url(#cd-micro_dramas); }
.frame[data-service="ai_production"]:is(:hover, :focus-visible) .rh { fill: url(#cd-ai_production); }
.frame[data-service="instagram_ip"]:is(:hover, :focus-visible) .rh { fill: url(#cd-instagram_ip); }
.frame[data-service="youtube_ip"]:is(:hover, :focus-visible) .rh { fill: url(#cd-youtube_ip); }
.frame:hover, .frame:focus-visible, .frame:hover .slate, .frame:focus-visible .slate { background: var(--c); }

/* the strip: a black film band, paper sprockets, four thumbnails carrying the prints small; the
   current one is a solid card in its service's colour with its print in paper */
.strip { position: absolute; left: 0; right: 0; bottom: 0; height: var(--strip); padding: 20px 15px; background: var(--ink); }
.strip::before, .strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--sprockets); background-position: 7px 0;
}
.strip::before { top: 4px; }
.strip::after { bottom: 4px; }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: calc(var(--strip) - 40px); }
.thumb {
  position: relative; display: block; overflow: hidden; box-sizing: border-box; padding: 10px 8px;
  border: 4px solid var(--paper); background: var(--paper); color: var(--ink); text-decoration: none; transition: var(--flip);
}
.thumb .plate { position: relative; }
.thumb .rh, .thumb .rs { display: none; } /* too small for a halftone */
.thumb:hover, .thumb[aria-current="true"] { --g: var(--c); --b: var(--paper); background: var(--c); border-color: var(--c); color: var(--paper); }
.thumb[aria-current="true"] { outline: 4px solid var(--c); }
.thumb:hover::before, .thumb[aria-current="true"]::before { display: none; }
/* focus on the current thumbnail adds a paper ring inside the blue card, so it differs from the
   current one at rest */
.thumb[aria-current="true"]:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--paper); }

/* the phone: no print and no arrow. The name band heads the frame (its rule under it) and the
   three pointers alone take the face (their container), as large as it allows, whichever is
   larger: one line each (the longest, bullet and all, is 18.8em wide; three lines and their gaps
   are 4.5em tall) or two lines each (six lines, 7.7em, lines 13.5em wide so none needs a third),
   centred in the face. */
@media (max-width: 899px) {
  .frame[data-current] { grid-template-rows: auto minmax(0, 1fr) var(--strip); }
  .slate { grid-row: 1; border-top: 0; border-bottom: var(--rule); }
  .face {
    grid-row: 2; grid-template-rows: auto; align-content: center; justify-items: center;
    padding: 16px 24px; container-type: size;
  }
  .art { display: none; }
  .notes {
    justify-self: stretch; margin: 0; padding: 0; gap: .6em; letter-spacing: .03em; line-height: 1.08;
    font-size: clamp(12px, max(min(5.2cqw, 100cqh / 4.5), min(7.4cqw, 100cqh / 7.7)), 40px);
  }
  .notes li { white-space: normal; grid-template-columns: .5em minmax(0, 1fr); column-gap: .5em; align-items: start; }
  .notes li::before { margin-top: .27em; align-self: start; width: .5em; height: .5em; }
  .go { display: none; }
}
@media (min-width: 900px) {
  .reel::before, .reel::after {
    content: ""; position: absolute; left: 0; right: 0; height: 10px; z-index: 2;
    background: var(--sprockets); background-position: 8px 0;
  }
  .reel::before { top: 2px; }
  .reel::after { bottom: 2px; }
  .frames { inset: 14px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .frame, .frame[data-current] { display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; inset: auto; }
  .frame + .frame { border-left: var(--rule); }
  .frame::before { top: 96px; } /* a paper head above the halftone, as in the still */
  .face { grid-template-rows: minmax(0, 1fr); padding: 112px 24px 24px; }
  /* the pointers wait under the print and take the face while the pointer is over the frame */
  /* large enough to fill the face: three lines of caps that wrap, sized by the frame's height and width */
  .notes { position: absolute; inset: 96px 0 0; margin: 0; align-content: center; justify-content: stretch; padding: 0 28px 24px; gap: 6cqh; font-size: clamp(20px, min(4.8cqh, 9.4cqw), 46px); line-height: 1.06; /* 9.4cqw keeps MONEYMAKER. inside the frame */ letter-spacing: .03em; opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
  .notes li { white-space: normal; grid-template-columns: .5em minmax(0, 1fr); column-gap: .45em; align-items: start; }
  .notes li::before { margin-top: .28em; align-self: start; width: .5em; height: .5em; }
  .frame:is(:hover, :focus-visible) .plate { opacity: 0; }
  .frame:is(:hover, :focus-visible) .notes { opacity: 1; }
  .strip { display: none; }
  body:has(.frame[data-service="micro_dramas"]:hover) { --dock-ink: var(--sun); --dock-on: var(--ink); }
  body:has(.frame[data-service="ai_production"]:hover) { --dock-ink: var(--teal); --dock-on: var(--paper); }
  body:has(.frame[data-service="instagram_ip"]:hover) { --dock-ink: var(--purple); --dock-on: var(--paper); }
  body:has(.frame[data-service="youtube_ip"]:hover) { --dock-ink: var(--scarlet); --dock-on: var(--paper); }
  .slate { padding: 20px 24px 22px; --s: min(66px, (100cqw - 4px) / 7.6, 11cqh); }
}
/* a landscape phone scrolls (stage.css) and has the dock at its foot: the band is as tall as its
   words and the strip is shorter, so the pointers keep a face; they are wide enough there to
   stay one line each. A short desktop window keeps its prints and drops the pointers. */
@media (max-height: 479px) {
  .reel { --strip: 104px; }
  .slate { --s: min(72px, (100cqw - 4px) / 7.6, 9cqh); }
  .name { min-height: 0; }
}
@media (max-height: 479px) and (max-width: 899px) {
  .notes { font-size: clamp(12px, min(5.2cqw, 100cqh / 4.5), 28px); }
}
@media (max-height: 479px) and (min-width: 900px) {
  .notes { display: none; }
}