/* Mascots are frameless cut-outs: each one stands on the edge of the block it belongs to and reaches over that edge.
   --mw  mascot width     --ar  mascot height / width (its viewBox)     --ov  how far it reaches over the block's edge
   --mr  offset from the block's right edge (negative hangs past it)     --hm  space between the section head and the block */
.mascot { pointer-events: none; }
.mascot svg { display: block; width: 100%; height: auto; overflow: visible; }

/* work: the monk and his city straddle the Feedwrk card's bottom-left corner, half on the card and half below it.
   --up  how much of the mascot sits on the card; it covers only the card's padding and the diagram panel's empty lower-left.
   --wl  how far it hangs past the card's left edge, inside the page gutter */
#work { --mw: clamp(250px, 22vw, 320px); --ar: .63; --up: calc(var(--mw) * var(--ar) / 2); --wl: min(40px, var(--gut) - 12px); }
.fw-card { position: relative; }
.fw-card > .mascot { position: absolute; z-index: 3; left: calc(-1 * var(--wl)); top: calc(100% - var(--up)); width: var(--mw); --mascot-bg: var(--paper-2); }
/* room for the half that hangs below the card */
@media (min-width: 1081px) { #work .projects { margin-bottom: calc(var(--mw) * var(--ar) - var(--up) - 40px); } }
@media (max-width: 1080px) { #work .fw-card { margin-bottom: calc(var(--mw) * var(--ar) - var(--up) - 12px); } }

/* tools: Cha's drafting table stands over the bottom-right corner of the board, in the space the last two columns leave */
#tools .board { position: relative; }
#tools { --tr: min(40px, var(--gut) - 12px); } /* how far the mascot hangs past the board's right edge, inside the page gutter */
#tools .board > .mascot { position: absolute; z-index: 3; right: calc(-1 * var(--tr)); bottom: -36px; width: calc((100% - 44px) * 2 / 7 + var(--tr)); transform: translateY(8.9%); }
#tools .mu { margin-top: 96px; }
/* the columns under the mascot keep its height clear at their foot, so a longer column grows the board instead of running under the table.
   A grid item's padding % is of its column width: the mascot's drawn part rises .88 of its height (.658 of its width) above its bottom. */
#tools .map li:nth-child(6), #tools .map li:nth-child(7) { padding-bottom: calc(116% + .58 * var(--tr) - 50px); }
@media (max-width: 1080px) {
  /* four columns: the board's last cell is empty; the mascot covers it and the right part of column 7 */
  #tools .board > .mascot { bottom: -28px; width: calc((100% - 44px) * .4 + var(--tr)); }
  #tools .map li:nth-child(6) { padding-bottom: 14px; }
  #tools .map li:nth-child(7) { padding-bottom: calc(93% + .58 * var(--tr) - 42px); }
  #tools .mu { margin-top: 80px; }
}


/* content and contact: the hook is the last child of the section head and stands on the next block's top edge */
#content { --mw: clamp(260px, 30vw, 400px); --ar: .75; --ov: 14px; --mr: 8px; --hm: clamp(40px, 5vw, 64px); }
#contact { --mw: clamp(280px, 33vw, 450px); --ar: .5075; --ov: 18px; --mr: 6px; --hm: clamp(40px, 5vw, 64px); }
.head:has(> .mascot) { position: relative; margin-bottom: var(--hm); padding-right: calc(var(--mw) + var(--mr) + 24px);
  min-height: calc(var(--mw) * var(--ar) - var(--ov) - var(--hm)); }
.head > .mascot { position: absolute; z-index: 3; right: var(--mr); bottom: calc(-1 * var(--hm) - var(--ov)); width: var(--mw); }

/* one column: each mascot stands above its block, reaching a little over the block's top edge */
@media (max-width: 860px) {
  #content, #contact { --mw: min(calc(100vw - 2 * var(--gut)), 420px); --mr: 0px; --hm: calc(var(--mw) * var(--ar) - var(--ov) + 12px); }
  .head:has(> .mascot) { padding-right: 0; min-height: 0; }
  #contact { --ov: 4px; } /* the form opens with a line of text, not an edge: only the faded foot of the hill reaches it */
  #content { --ov: 10px; } /* the first card opens with text 20px below its edge */
}
/* the diagram stacks once its panel is 540px or narrower (about 680px wide): the card then ends in the feeds list,
   so the mascot only reaches 36px over the card's bottom padding */
@media (max-width: 680px) { #work { --mw: min(calc(100vw - 2 * var(--gut)), 230px); --up: 36px; } }
@media (max-width: 640px) {
  /* the board is two columns: Cha's table stands on its top edge instead */
  #tools .head { margin-bottom: calc(min(100%, 380px) * .658 - 8px); }
  #tools .board > .mascot { right: 0; bottom: calc(100% - 12px); width: min(100%, 380px); transform: none; }
  #tools .map li:nth-child(7) { padding-bottom: 14px; }
  #tools .mu { margin-top: 40px; }
}
/* phones: the script moves the Feedwrk mascot to the top of the work list; it stands on the first card's top edge */
@media (max-width: 680px) {
  #work .fw-card { margin-bottom: 0; }
  #work .projects > .mascot { position: relative; z-index: 3; justify-self: end; width: min(100%, 300px); margin: -8px -6px -34px 0; --mascot-bg: var(--paper-2); }
}