/* /led-content (site/tools/pages/led-content.mjs), on top of styles.css + css/pages.css. The work leads: a real stand photo beside the
   H1, wide frames in the installed-work rows, the birch explained as a triptych of equal 7:12 panels (schematic · flat master · photo).
   Paper language: hairlines, mono labels, square chips; nothing rounded, no shadows. Headings balance their lines (no orphan words). */
main.led .sec-head{margin-bottom:32px}

/* ---- hero: H1 + line + CTAs at the foot of the left column, the photo of the installed birch on the right */
.led-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:32px 48px;align-items:end;padding-top:40px;padding-bottom:48px}
.led-hero .lh-text{align-self:stretch;display:flex;flex-direction:column;padding-bottom:36px}
.led-hero .lh-text>.label{margin-bottom:auto;padding-bottom:32px}
.led-hero h1{max-width:18ch}
.lh-photo img{aspect-ratio:4/5;object-fit:cover;object-position:50% 72%}
.lh-photo figcaption,.led figcaption{line-height:1.5}
@media (max-width:719px){
  .led-hero{grid-template-columns:1fr;padding-top:28px;padding-bottom:40px}
  .led-hero .lh-text{padding-bottom:0}
}

/* ---- installed work: media left (the birch photo larger), facts right; one column below 1024 px */
.inst{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px 40px;align-items:start;padding:40px 0;border-top:var(--hair)}
.inst-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);padding-top:0;border-top:0}
.inst:last-child{padding-bottom:0}
.inst-text .kind{color:var(--accent);margin:0 0 12px}
.inst-title{margin:0 0 14px}
.inst-main .inst-title{font-size:clamp(26px,2.8vw,40px)}
.inst-text>p:not(.kind):not(.note),.p-text>p{font-size:16px;line-height:1.5;color:var(--body-ink);margin:0 0 20px;max-width:52ch}
.inst-specs{margin:0 0 18px;border-top:var(--hair)}
.inst-specs div{display:grid;grid-template-columns:minmax(0,12ch) minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:var(--hair)}
.inst-specs dt{color:var(--mid);padding-top:2px}
.inst-specs dd{margin:0;font-size:15px;line-height:1.4}
.inst .note{color:var(--mid);margin:0 0 18px;line-height:1.5}
.inst-open,.b-more{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 20px}
.inst-open>span.mono,.b-more>span.mono{color:var(--mid);margin-right:6px}
@media (max-width:1023px){.inst,.inst-main{grid-template-columns:1fr;gap:20px}}
.inst-text .copy{margin-top:2px}

/* ---- live 3D previews (site/js/scene-preview.js, SPEC §8.2, §8.10): a dark viewport on the paper page with the player's dotted world
   inside. While the scene loads, the poster (a real frame of the work) resolves out of the living halftone of veil.js (canvas.veil);
   on the scene's first full frame the WebGL canvas is there at once under the veil, whose cells drop out onto it: never a crossfade of
   two pictures. The hairline tag says what it is, the accent chip opens the work in the player, the dimension guides are the player's. */
.scene{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:16/9;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
figure.media .scene img.scene-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;cursor:grab;touch-action:pan-y}
.scene canvas:active{cursor:grabbing}
.scene canvas.veil{inset:auto;opacity:1;z-index:1;pointer-events:none;cursor:auto;image-rendering:pixelated}
.scene.live img.scene-poster{visibility:hidden}
.scene canvas.px{image-rendering:pixelated}   /* a phone's lower DPR is an integer fraction of the device's: whole device pixels per cell */
.scene.live canvas{opacity:1}
.scene-tag,.scene-hint{position:absolute;top:12px;z-index:2;pointer-events:none;line-height:1}
.scene-tag{left:12px;color:var(--paper);background:var(--ink);border:1px solid rgba(242,243,245,.42);padding:6px 8px 5px}   /* on ink: readable over the loading dots too */
.scene-hint{right:12px;padding:7px 8px 6px;color:rgba(242,243,245,.6);background:var(--ink);opacity:0;transition:opacity .4s}   /* on ink: the birch's ring passes behind it */
.scene.live .scene-hint{opacity:1}
@media not ((hover:hover) and (pointer:fine)){.scene-hint{display:none}}
.scene-open{all:unset;box-sizing:border-box;position:absolute;right:12px;bottom:12px;z-index:2;cursor:pointer;padding:8px 12px 7px;line-height:1.2;color:var(--paper);background:var(--accent);font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s}
.scene-open:hover{background:var(--paper);color:var(--ink)}
.scene-open:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.scene .dims{position:absolute;left:0;top:0;pointer-events:none;overflow:hidden;z-index:1;opacity:0;transition:opacity .7s}
.scene.live .dims{opacity:1}
.scene .dims path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:2 2;stroke-linecap:butt}
.scene .dims path.heads{stroke-dasharray:none;stroke-width:1.5}
.scene .dims path.ext{opacity:.7}
.scene .dims rect{fill:var(--accent)}
.scene .dims text{font:10px "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;fill:var(--paper);dominant-baseline:middle}
/* the caption names the 3D mockup; where it cannot run (no WebGL: data-gl="0", or no script) the poster stays and so does its own caption */
.scene-fig .cap-flat{display:none}
.scene-fig[data-gl="0"] .cap-3d{display:none}
.scene-fig[data-gl="0"] .cap-flat{display:inline}
.scene[data-gl="0"] .scene-tag,.scene[data-gl="0"] .scene-hint{display:none}
@media (scripting:none){.scene-fig .cap-3d,.scene-tag,.scene-hint,.scene-open{display:none}.scene-fig .cap-flat{display:inline}}
/* the Open chip sits bottom right, clear of the guides along the left and bottom edges (the facade's storey, the truck's rear).
   The birch: the live trunk beside the real stand photo, one height, both chips bottom right */
.inst-pair .pair{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:2px;aspect-ratio:3/2}
.inst-pair .scene{aspect-ratio:auto}
.pair-photo{position:relative;overflow:hidden;min-height:0}
figure.media .pair-photo img{width:100%;height:100%;object-fit:cover;object-position:54% 50%}
.pair-photo .play-mark{left:auto;right:12px}
@media (max-width:719px){
  .scene{aspect-ratio:4/3}
  .inst-pair .pair{grid-template-columns:minmax(0,1fr);grid-template-rows:none;aspect-ratio:auto}
  .inst-pair .scene{aspect-ratio:1/1}
  .pair-photo{aspect-ratio:3/2}
  .scene-tag{left:10px;top:10px}
  .scene-open{right:10px;bottom:10px}
  .pair-photo .play-mark{right:10px;bottom:10px}
  .scene .dims{display:none}   /* too small to read beside the tag and the chip; the card's specs give the same figures */
}

/* ---- types of work: a numbered hairline list, the project that shows each type on the right */
.types{list-style:none;margin:0;padding:0;border-top:var(--hair)}
.types li{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,auto);gap:8px 24px;align-items:baseline;padding:20px 0;border-bottom:var(--hair)}
.types h3{margin:0;font-size:clamp(20px,2.3vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.types .ex{margin:0;color:var(--mid);text-align:right;line-height:1.6}
.types .ex a{color:var(--ink);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.types .ex a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.types-note{margin:24px 0 0;max-width:62ch;font-size:16px;line-height:1.5;color:var(--body-ink)}
@media (max-width:719px){.types li{grid-template-columns:32px minmax(0,1fr);gap:6px 10px;padding:16px 0}.types .ex{grid-column:2;text-align:left}}

/* ---- one construction, explained: three equal 7:12 panels; on phones each step is a row (panel left, text right) */
.build{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.build li{display:grid;grid-template-rows:auto 1fr;gap:18px;align-content:start;min-width:0}
.b-fig img,.b-schem svg{display:block;width:100%;height:auto;aspect-ratio:7/12}
.b-txt .n{margin:0}
@media (min-width:720px){.build figcaption{min-height:3em}}   /* the step numbers line up when a caption wraps */
.b-txt h3{margin:6px 0 8px;font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.b-txt p:not(.n){margin:0;font-size:16px;line-height:1.5;color:var(--body-ink);max-width:44ch}
.b-more{margin:32px 0 0}
/* phones: the three panels side by side in a swipeable row (scroll-snap), the next one peeking; the page itself never scrolls sideways */
@media (max-width:719px){
  .build{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 8px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .build::-webkit-scrollbar{display:none}
  .build li{scroll-snap-align:start}
  .b-txt h3{font-size:19px}
  .b-txt p:not(.n){font-size:15px}
}
/* the schematic: the slim LED trunk, dark with paper dots and a plain top cap, beside the same screen unrolled into its 4 × 7 modules
   (the gaps between them are the panel's ground); accent pixel-dash guides with accent chips (the player's guides) */
.b-schem svg{background:#E4E6EB}
.schem .body{fill:var(--ink)}
.schem .dot{fill:var(--paper)}
.schem .sh-edge{stop-color:var(--ink);stop-opacity:.82}
.schem .sh-mid{stop-color:var(--ink);stop-opacity:0}
.schem .edge{fill:none;stroke:var(--ink);stroke-width:2}
.schem .edge.top{fill:var(--paper)}
.schem .edge.back,.schem .proj{stroke:var(--mid);stroke-dasharray:6 8}
.schem .proj{fill:none;stroke-width:2}
.schem .seam{fill:none;stroke:#E4E6EB;stroke-width:3}
.schem .dim{stroke:var(--accent);stroke-width:3;stroke-dasharray:6 6}
.schem .chip-bg{fill:var(--accent)}
.schem .chip-t{fill:var(--paper);font:500 25px "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-anchor:middle;text-transform:uppercase}
.schem .lbl{fill:var(--ink);font:500 26px "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.schem .lbl.mid{fill:var(--mid)}
/* the block alive (site/js/birch-explain.js, SPEC §8.9): one canvas behind the three panels (z-index -1 inside the isolated list, so
   the SVG's lines and labels, the play buttons and their focus rings stay on top), absolute inside the list so that on phones it
   scrolls with the swipeable row; shown from its first frame. Each panel hands over in the same frame the canvas draws it: .gl hides
   the panel's own picture (the schematic's dotted trunk fades), .v-on shows the playing master in panel 02 */
.build[data-scene]{position:relative;isolation:isolate}
.build>canvas.xcv{position:absolute;left:0;top:0;z-index:-1;display:block;pointer-events:none;opacity:0}
.build>canvas.xcv.on{opacity:1}
.build>canvas.xcv.px{image-rendering:pixelated}
.b-schem .body-g{transition:opacity .3s}
.b-schem.gl svg{background:transparent}
.b-schem.gl .body-g{opacity:0}
.b-fig.gl img{opacity:0}
.b-fig .b-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none;background:var(--ink)}
.b-fig.v-on .b-vid{opacity:1}
.b-fig .media-play .play-mark{z-index:1}

/* ---- what gets delivered: the brief line and the scope note left, the five steps as one column right */
.led-deliver{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px 64px;align-items:start}
.led-deliver .sec-head{margin-bottom:24px}
.led-deliver .steps{grid-template-columns:1fr}
.led-deliver .scope{margin:0;padding-top:14px;border-top:var(--hair);max-width:52ch;font-size:15px;line-height:1.5;color:var(--body-ink)}
@media (max-width:1023px){.led-deliver{grid-template-columns:1fr}}

/* ---- key visuals and print (HONGQI): a compact pair, photo and text */
.led-print{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 48px;align-items:center}
.led-print .sec-head{margin-bottom:20px}
@media (max-width:1023px){.led-print{grid-template-columns:1fr}.led-print .p-text{order:-1}}

/* ---- FAQ: heading left, questions right (as the form below it) */
.led-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px 64px;align-items:start}
@media (max-width:1023px){.led-faq{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){main.led .types .ex a,.scene-hint,.scene-open,.scene .dims{transition:none}}

/* ---- the kinetic headline (js/kinetic.js): the type fills the column beside the picture, every line fitted to its width, the letters
   moving through the width and weight axes of the variable face. With scripts the <h1> takes the column's free height from the first
   paint and stays hidden until it is fitted (no jump); without them it is the ordinary headline. */
@media (scripting:enabled){
  /* flex-basis 0 and no overflow: the headline takes what the column leaves and never sets the column's height itself, neither as
     plain text before it is fitted nor after (a taller unfitted headline used to stretch the row, and everything jumped at the fit) */
  .led-hero h1[data-kinetic]{max-width:none;flex:1 1 0;min-height:clamp(180px,30vw,360px);overflow:hidden;margin:0 0 28px}   /* never thinner than a headline: on a tablet the photo leaves it under 100 px */
  /* one column: its box is reserved from the first paint, 4:5 of the width and at most half the screen (kinetic.js fits into it) */
  @media (max-width:719px){.led-hero h1[data-kinetic]{flex:none;width:100%;aspect-ratio:4/5;max-height:50vh;max-height:50svh}}
  .led-hero h1[data-kinetic]:not(.kin-on){visibility:hidden}
  .led-hero .lh-text:has(h1[data-kinetic])>.label{margin-bottom:0;padding-bottom:22px}
}
h1.kin{display:flex;flex-direction:column;justify-content:flex-start;letter-spacing:0;line-height:.8;overflow:hidden;position:relative}
.kin-l{display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap;line-height:.8;font-weight:700;text-transform:uppercase;transform-origin:0 0}
.kin-l i{display:block;font-style:normal;font-kerning:none;margin-right:-.035em;font-variation-settings:"wdth" 75,"wght" 640}
.kin-l i:last-child{margin-right:0}
.kin-l i.kin-s{flex:0 0 .2em;margin-right:0}
.kin-probe{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;font-size:100px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:0;font-kerning:none;font-variation-settings:"wdth" 86,"wght" 700}

/* the standing dots on a photo (js/dot-mask.js): a canvas exactly over the picture, under the play mark, never in the way of the click */
.dots-cv{position:absolute;pointer-events:none}