/*
  justincook.dev · personal (the front room) · ART LAYER (styles)
  Include after the page's own <style>:  <link rel="stylesheet" href="art/personal-art.css">
  Every rule here targets an element that art/personal-art.js marks ONLY once its image has loaded. With no image,
  nothing matches and the code drawing (the stand, the watercolour map, the flat spines and sleeves) shows exactly
  as before. Slot sizes: art/README.md, section "Personal".
*/
:root{
  /* P1 · the band: full bleed, 1280 x 700 at a 1280 window, never taller than 700 */
  --jc-art-room-h:clamp(280px,54.6875vw,700px);
  --jc-art-room-pos:50% 18%;          /* keeps the map on the wall and the dogs on the rug in frame */
  --jc-art-room-gap:56px;             /* space between the front matter and the band */
  --jc-art-room-opacity:1;
  /* P6 · the Musician chapter's picture */
  --jc-art-case-pos:50% 50%;
  --jc-art-case-opacity:1;
  /* P4 · the map: the sheet's own padding (page: 16px); the route svg sits over the image by map-frame */
  --jc-art-map-pad:16px;
  --jc-art-map-opacity:1;
  /* P5 · a painted spine fills its code spine (fill keeps its top cap and whole width; cover crops) */
  --jc-art-spine-fit:fill;
  --jc-art-spine-opacity:1;
  /* P3 · a sleeve fills its code sleeve */
  --jc-art-sleeve-fit:cover;
  --jc-art-sleeve-pos:50% 50%;
  --jc-art-sleeve-opacity:1;
  /* the crate (P_crate.png, 2240 x 905), measured on the file as fractions of it */
  --jc-art-crate-ratio:.40402;       /* height / width */
  --jc-art-crate-rim:24.862%;        /* the front board's top edge, y 225 */
  --jc-art-crate-inl:9.554%;         /* the front board's inner edges between the posts, x 214 ... */
  --jc-art-crate-inr:9.732%;         /* ... and x 2022, from the right */
  --jc-art-crate-foot:.09392;        /* clear ground under the posts, y 820 to 905 */
  --jc-art-crate-seat:.43978;        /* where the sleeves stand, y 422: halfway down the front board, so it hides their foot */
  --jc-art-crate-sw:230px;           /* the page's crate sleeve */
  --jc-art-crate-lift:66px;          /* the page lifts the front sleeve 54 px; 12 px of air above it */
  /* the open book (P_open_book.png, 640 x 501); drawn mirrored so its ribbon lies on the left page, clear of the line */
  --jc-art-book-w:330px;
  --jc-art-book-drop:-120px;         /* opens lower than the code book did, so the taller book stays off the shelf's name */
  /* review aid */
  --jc-art-outline:#FF2E9A;
}

/* every art image: decorative, never catches input */
img.jc-art{display:block;max-width:none;border:0;pointer-events:none;user-select:none;-webkit-user-drag:none}

/* ---- P1 · the room's opening band ----
   The <img> is a grid item of the front matter (#c0), placed in its own row under both columns, so the title and
   the contents keep their places above it. It bleeds to the window edges and is cover-fit. */
.front.jc-art-room-on{row-gap:var(--jc-art-room-gap)}
.front>img.jc-art-room{grid-row:2;grid-column:1 / -1;width:100vw;height:var(--jc-art-room-h);margin-inline:calc(50% - 50vw);object-fit:cover;object-position:var(--jc-art-room-pos);opacity:var(--jc-art-room-opacity)}

/* ---- P6 · the Musician chapter's slot ----
   The <img> covers the code stand's own box (380 x 430 at 1x); the svg keeps the layout and is hidden under it. */
.stand-art.jc-art-on{position:relative}
.stand-art>img.jc-art-case{position:absolute;left:0;top:0;width:100%;aspect-ratio:380 / 430;height:auto;object-fit:cover;object-position:var(--jc-art-case-pos);opacity:var(--jc-art-case-opacity)}
.stand-art.jc-art-on>svg{visibility:hidden}

/* ---- P4 · the map chapter's map ----
   The image takes the svg's place inside the pinned sheet (the sheet, its tacks, tilt and caption stay code).
   The page's svg is laid over the image by the registration in map-frame and stretched to it (the stretch is
   8 percent taller than wide, so the stop circles stay round to the eye); only its route and stops draw.
   The page's route draw-on (DrawSVG on #route) is untouched. */
.sheet.jc-art-map-on>img.jc-art-map{position:relative;width:100%;height:auto;opacity:var(--jc-art-map-opacity)}
.sheet.jc-art-map-on>svg#map{position:absolute;
  left:calc(var(--jc-art-map-pad) + (100% - 2 * var(--jc-art-map-pad)) * var(--jc-art-map-left));
  top:calc(var(--jc-art-map-pad) + (100% - 2 * var(--jc-art-map-pad)) * var(--jc-art-map-top));
  width:calc((100% - 2 * var(--jc-art-map-pad)) * var(--jc-art-map-width));
  height:calc((100% - 2 * var(--jc-art-map-pad)) * var(--jc-art-map-height));
  overflow:visible}
.sheet.jc-art-map-on>svg#map>:not(.route):not(.stops):not(defs){visibility:hidden}

/* ---- P5 · the Read shelf ----
   The <img> is inside the code spine, which the page slides on hover and tilts when opened, so the art moves with
   it. The code spine's colour stays underneath; its code marks are hidden while the art is on. */
.spine>img.jc-art-spine{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--jc-art-spine-fit);opacity:var(--jc-art-spine-opacity)}
.spine.jc-art-on>:not(img.jc-art){visibility:hidden}

/* ---- P3 · the crate ----
   The <img> fills the sleeve rectangle (crate, grid and the pulled sleeve's front face), under the page's top
   shade line; the code record-hole drawing is hidden while the art is on. */
.sleeve>img.jc-art-sleeve,.face.front>img.jc-art-sleeve{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--jc-art-sleeve-fit);object-position:var(--jc-art-sleeve-pos);opacity:var(--jc-art-sleeve-opacity)}
.sleeve.jc-art-on>.hole,.face.front.jc-art-on>.hole{visibility:hidden}
.sleeve.jc-art-on::before{z-index:1}

/* ---- the crate ----
   The stage is a size container so the crate's height follows its painted width (the image is never stretched).
   Behind: the whole painting, first child of #crate, under the track. The crate clips the sleeves to the space
   between the posts. In front: the same painting in the stage, clipped to the front board and the two corner
   columns, above the sleeves (where the code front board and end posts were). The code crate is hidden. */
.cratestage.jc-art-on,.cratestage:has(>.crate.jc-art-on){container-type:inline-size}
.crate.jc-art-on{--jc-art-crate-h:calc(100cqw * var(--jc-art-crate-ratio));
  height:max(calc(var(--jc-art-crate-h) * (1 - var(--jc-art-crate-foot))),calc(var(--jc-art-crate-h) * var(--jc-art-crate-seat) + var(--jc-art-crate-sw) + var(--jc-art-crate-lift)));
  clip-path:inset(0 var(--jc-art-crate-inr) 0 var(--jc-art-crate-inl))}
.crate.jc-art-on::before,.crate.jc-art-on::after,.crate.jc-art-on>.cfront{display:none}
.crate.jc-art-on>.track{bottom:calc(var(--jc-art-crate-h) * var(--jc-art-crate-seat))}
.crate>img.jc-art-crate,.cratestage>img.jc-art-cratefront{position:absolute;left:0;width:100%;height:auto;bottom:calc(-100cqw * var(--jc-art-crate-ratio) * var(--jc-art-crate-foot))}
.crate>img.jc-art-crate{z-index:0}
.cratestage>img.jc-art-cratefront{z-index:260;
  clip-path:polygon(0 0,var(--jc-art-crate-inl) 0,var(--jc-art-crate-inl) var(--jc-art-crate-rim),calc(100% - var(--jc-art-crate-inr)) var(--jc-art-crate-rim),calc(100% - var(--jc-art-crate-inr)) 0,100% 0,100% 100%,0 100%)}
.cratestage>.crate[hidden]~img.jc-art-cratefront,.cratestage>.crate:not(.jc-art-on)~img.jc-art-cratefront{display:none}

/* ---- the Meaning to read shelf ----
   Each code spine is a window onto its own spine in the one painted row (the JS sizes the spine and offsets the
   image); the page's hover slide and open tilt move the window with the painting in it. */
.spine.jc-art-next{overflow:hidden;border-radius:3px 3px 0 0}
.spine>img.jc-art-spinenext{position:absolute;height:auto;opacity:var(--jc-art-spine-opacity)}

/* ---- the open book ----
   The painted book fills the box; the page's two page texts are laid on its pages. The code cover and paper
   pages are hidden. */
.openbook.jc-art-on{width:var(--jc-art-book-w);height:auto;margin-bottom:var(--jc-art-book-drop)}
.openbook.jc-art-on>img.jc-art-openbook{position:relative;width:100%;height:auto;transform:scaleX(-1)}
.openbook.jc-art-on>.cv{display:none}
.openbook.jc-art-on>.pg{background:none;transform:none;border:0;padding:0;bottom:auto;top:10%}
.openbook.jc-art-on>.pg.l{left:9.4%;width:25.8%}
.openbook.jc-art-on>.pg.r{left:54.7%;right:auto;width:36.7%}
@media (max-width:760px){
  :root{--jc-art-crate-sw:170px;--jc-art-book-w:280px;--jc-art-book-drop:-100px}
}

/* review aid: ?art=outline outlines every art image */
html.jc-art-outline img.jc-art{outline:1px dashed var(--jc-art-outline);outline-offset:-1px}