/* Section 2: features (owner: structure). Three benefit scenes on calm black (art from
   build/world/tools/gen-benefits.mjs --site): side by side on desktop, stacked on phones. Only
   the three window frames of the building art show (a mask cut to their rectangles), so
   the facade, the lower windows and the neighbours stay out of the way. The h2 sits above
   the scenes, each h3 under its scene. The posters are
   baked into the building; a window's strip of changing cells shows only while it plays
   (features.js). Light lives in the art, in ramp steps. */
@property --fcell{syntax:"<length>";inherits:true;initial-value:3px}
.ft{--bw:500;--bh:270;--sh:178;--fcell:var(--cell);padding-block:calc(var(--sec-gap) / 2)}
/* The section starts inside the hero room's ending: below the fold the desk's front edge
   and the floor under it fall to black in ragged stepped bands, and the heading sits on the
   last, darkest one (art and box from build/site/tools/gen-hero.py, in page cells, centred
   like the room). */
.ft{position:relative;isolation:isolate;padding-top:0}
.ft::before{content:"";position:absolute;top:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
/* The page cell, unless the building's body (440 cells) would not fit: the neighbours at
   both ends may be cut by the screen edge, the body never (site.css --fc, which also sets
   the page's content width). */
.ft{--fcell:var(--fc)}
.ft-scene{position:relative;height:calc(var(--sh) * var(--fcell));overflow:hidden;overflow:clip}
.ft-bld{position:absolute;top:0;left:calc(50% - var(--bw) / 2 * var(--fcell));width:calc(var(--bw) * var(--fcell));height:calc(var(--bh) * var(--fcell));background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.ft.is-near .ft-bld{background-image:url(assets/features/d5-building-87929a3a84.webp)}
/* Only the windows: three solid mask rectangles (frame and sill included), nothing else. */
.ft-bld{--wy:76;--ww:126;--wh:81;
  -webkit-mask:linear-gradient(#000,#000) no-repeat,linear-gradient(#000,#000) no-repeat,linear-gradient(#000,#000) no-repeat;
  mask:linear-gradient(#000,#000) no-repeat,linear-gradient(#000,#000) no-repeat,linear-gradient(#000,#000) no-repeat;
  -webkit-mask-size:calc(var(--ww) * var(--fcell)) calc(var(--wh) * var(--fcell));mask-size:calc(var(--ww) * var(--fcell)) calc(var(--wh) * var(--fcell));
  -webkit-mask-position:calc(47 * var(--fcell)) calc(var(--wy) * var(--fcell)),calc(187 * var(--fcell)) calc(var(--wy) * var(--fcell)),calc(327 * var(--fcell)) calc(var(--wy) * var(--fcell));
  mask-position:calc(47 * var(--fcell)) calc(var(--wy) * var(--fcell)),calc(187 * var(--fcell)) calc(var(--wy) * var(--fcell)),calc(327 * var(--fcell)) calc(var(--wy) * var(--fcell))}
/* A window's strip: hidden (but loading) until it plays; it never shows on a hidden scene. */
.ft-v{position:absolute;overflow:hidden;overflow:clip;visibility:hidden}
.ft-v.is-play{visibility:inherit}
.ft-v>i{position:absolute;left:0;top:0;width:100%;transform:translate3d(0,0,0);background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.ft-v1{left:calc(77 * var(--fcell));top:calc(124 * var(--fcell));width:calc(18 * var(--fcell));height:calc(18 * var(--fcell))}
.ft-v2{left:calc(193 * var(--fcell));top:calc(94 * var(--fcell));width:calc(112 * var(--fcell));height:calc(58 * var(--fcell))}
.ft-v3{left:calc(335 * var(--fcell));top:calc(80 * var(--fcell));width:calc(112 * var(--fcell));height:calc(70 * var(--fcell))}
.ft-v1>i{height:300%}.ft-v2>i{height:700%}.ft-v3>i{height:500%}
.ft.is-near .ft-v1>i{background-image:url(assets/features/v1b-strip-4dfa8eec9b.webp)}
.ft.is-near .ft-v2>i{background-image:url(assets/features/v2b-strip-44bfe90820.webp)}
.ft.is-near .ft-v3>i{background-image:url(assets/features/v3b-strip-d4e3658064.webp)}
.ft-tag{position:absolute;display:block;height:calc(11 * var(--fcell));image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}

/* The words on the facade (building cells: x from the building's left, y from its top). */
.ft-title,.ft-cap{position:absolute;left:calc(50% + (var(--x) - var(--bw) / 2) * var(--fcell));top:calc(var(--y) * var(--fcell))}
.ft-title{--x:47;--y:38;width:calc(406 * var(--fcell));font-size:clamp(28px,calc(var(--fcell) * 15),64px)}
/* The heading starts on the page's content edge (site.css --gutter), like every heading. */
@media (min-width:760px) and (min-aspect-ratio:4/5){.ft-title{left:var(--gutter)}}
.ft-caps{margin:0}
.ft-cap{--y:162;width:calc(126 * var(--fcell));text-align:center;font-size:max(15px,calc(var(--fcell) * 6));line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--tx);white-space:nowrap}
.ft-cap:nth-child(1){--x:47}.ft-cap:nth-child(2){--x:187}.ft-cap:nth-child(3){--x:327}

@media (max-width:759px),(max-aspect-ratio:4/5){
  .ft{--bw:192;--bh:554;--sh:464}
  .ft-bld{-webkit-mask-position:calc(33 * var(--fcell)) calc(94 * var(--fcell)),calc(33 * var(--fcell)) calc(222 * var(--fcell)),calc(33 * var(--fcell)) calc(350 * var(--fcell));
    mask-position:calc(33 * var(--fcell)) calc(94 * var(--fcell)),calc(33 * var(--fcell)) calc(222 * var(--fcell)),calc(33 * var(--fcell)) calc(350 * var(--fcell))}
  @supports (width:round(nearest,1px,1px)){
    .ft{--fcell:clamp(1.5px,min(var(--cell),round(down,(100vw - 16px) / 160,.5px)),4px)}
  }
  .ft.is-near .ft-bld{background-image:url(assets/features/p6-building-ce40b1b7a9.webp)}
  .ft-v1{left:calc(63 * var(--fcell));top:calc(142 * var(--fcell))}
  .ft-v2{left:calc(39 * var(--fcell));top:calc(240 * var(--fcell))}
  .ft-v3{left:calc(41 * var(--fcell));top:calc(354 * var(--fcell))}
  .ft-title{--x:33;--y:41;width:calc(140 * var(--fcell));font-size:clamp(22px,calc(var(--fcell) * 13),34px)}
  .ft-cap{--x:33;font-size:max(15px,calc(var(--fcell) * 7.5))}
  .ft-cap:nth-child(1){--x:33;--y:182}.ft-cap:nth-child(2){--x:33;--y:310}.ft-cap:nth-child(3){--x:33;--y:438}
}

/* Without JS the art loads at once (no lazy class), the words stay where they are. */
@media (scripting:none){
  .ft .ft-bld{background-image:url(assets/features/d5-building-87929a3a84.webp)}
}
@media (scripting:none){
  @media (max-width:759px),(max-aspect-ratio:4/5){.ft .ft-bld{background-image:url(assets/features/p6-building-ce40b1b7a9.webp)}}
}

/* Phones (portrait, not tablets): the three windows as wide as the screen allows between
   the gutters (126 cells each), at whole device pixels, so the scenes read at arm's length
   on short phones too; the heading on the gutter like every other heading. */
@media (max-width:759px){
  @supports (width:round(nearest,1px,1px)){
    .ft{--fcell:clamp(1.5px,round(down,(100vw - 2 * var(--gutter)) / 126,.5px),4px)}
  }
  .ft-title{left:var(--gutter);width:calc(100% - 2 * var(--gutter))}
}
@media (max-width:759px) and (min-resolution:2.5dppx){
  @supports (width:round(nearest,1px,1px)){
    .ft{--fcell:clamp(1.5px,round(down,(100vw - 2 * var(--gutter)) / 126,calc(1px / 3)),4px)}
  }
}
/* Landscape phones: the desktop row at a small cell; the captions fit their windows. */
@media (max-height:500px) and (min-aspect-ratio:4/5) and (max-width:1000px){
  .ft-cap{font-size:13px}
}