/* Section 4: make your own (owner: the myo agent; contract in scratch/site-reimagine-
   2026-10-28/build/site/SECTIONS.md). The heading and the agents' official marks on calm
   black, beside one tower of the night city seen close: the 37th window and its name
   plate. Art from build/site/tools/gen-myo.mjs at one texel per art cell;
   an art cell is two page cells (--mc), so the typed line and the agent tag myo.js draws at
   half an art cell are 1:1 with the hero's tags. The poster is the finished window (lit,
   "Quiet Slack", 37): what reduced motion, slow devices, Save-Data and no JS show. While
   the tower is on screen myo.js plays the build on a canvas over the window and hides it
   again on the finished frame. Light is ramp steps in the art: no gradients, no halos. */
@property --mc{syntax:"<length>";inherits:true;initial-value:6px}
.my{--mc:calc(var(--cell) * 2);position:relative;padding-block:calc(var(--sec-gap) / 2)}
.my-in{display:grid;grid-template-columns:minmax(0,1fr) calc(112 * var(--mc));align-items:center;column-gap:clamp(32px,4vw,80px);padding-inline:var(--gutter)}
.my-copy{max-width:600px}

/* The agents' marks under the title: three bare symbols in white, one row, one optical
   size. The official files are served unmodified; the Claude spark ships only in clay, so
   it is drawn white here (Matyas's call, 2026-10-29; Anthropic's guidelines ask for no
   recolor: see V2-EMBARGO.md). Box heights differ because each file pads its ink differently (measured: the Blossom's
   ink is half its box, so its box is doubled and its padding pulled in). */
.my-marks{display:flex;align-items:center;gap:24px;margin-top:32px}
.my-mk{display:block;flex:none;width:auto;max-width:none}
.my-mk-claude{height:30px;filter:brightness(0) invert(1)}
.my-mk-openai{height:60px;margin-block:-15px;margin-inline:-15px}
.my-mk-grok{height:35px}
@media (max-width:759px),(max-aspect-ratio:4/5){.my-marks{gap:20px;margin-top:24px}.my-mk-claude{height:26px}.my-mk-openai{height:52px;margin:-13px}.my-mk-grok{height:30px}}

/* The art: 112 x 112 art cells. Layers: the skyline behind (lags, data-px), the tower
   (the poster), the beacon, the build canvas, the low roof in front (runs ahead). */
.my-stage{position:relative}
.my-art{position:relative;width:calc(112 * var(--mc));height:calc(112 * var(--mc));overflow:hidden;overflow:clip}
.my-art img,.my-cv{display:block;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.my-far,.my-near{position:absolute;left:0;width:100%}
.my-far{top:calc(-6 * var(--mc));height:calc(124 * var(--mc))}
.my-near{top:calc(84 * var(--mc));height:calc(34 * var(--mc));z-index:3}
.my-far>img,.my-near>img{width:100%;height:100%}
.my-tower{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}
.my-cv{position:absolute;left:calc(30 * var(--mc));top:calc(17 * var(--mc));width:calc(52 * var(--mc));height:calc(78 * var(--mc));z-index:2;visibility:hidden}
.my-cv.is-on{visibility:visible}
/* The mast's beacon (lit in the poster): myo.js shows its unlit cap between short flashes
   on the section's clock (a CSS animation here cost a style pass every step). */
.my-beacon{position:absolute;left:calc(55 * var(--mc));top:0;width:calc(2 * var(--mc));height:var(--mc);z-index:2;background:var(--dusk);visibility:hidden}
.my-beacon.is-off{visibility:visible}

/* Phones and tall screens: the words first, then the tower centred on its axis, the
   skyline cut by the screen's edges. */
@media (max-width:759px),(max-aspect-ratio:4/5){
  .my-in{grid-template-columns:minmax(0,1fr);row-gap:calc(10 * var(--mc))}
  .my-stage{margin-inline:calc(-1 * var(--gutter));overflow:hidden;overflow:clip}
  .my-art{margin-left:calc(50% - 56 * var(--mc))}
}
/* Landscape phones: a smaller tower, so the heading keeps its two lines beside it. */
@media (max-height:500px) and (min-aspect-ratio:4/5) and (max-width:1000px){
  .my{--mc:var(--cell)}
  .my-in{column-gap:40px}
}