/* ROUTE, How it works: the six features as the home's big tiles, two to a row (Leo 10/21 09:42, on "Everything in one
   body": "这部分建议两个板块两个两个展示而且建议也用主页那那种大方块"). Square tiles 12 px apart across the window, the
   name and its line centred at the top, the render filling the bottom edge to edge (16 : 10) and fading into the tile,
   whose colour is the render's own top edge, so there is no seam. Light tiles in both themes, as on the home (the
   renders are light). The demo above keeps its own width. One column on phones. Loaded after route.css / route-x.css. */
.rt-fns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none;margin:0 12px;
  padding:clamp(20px,3vw,30px) 0 clamp(28px,4vw,48px)}
.rt-fns > :not(.rt-fn){grid-column:1 / -1}
.rt-fns > .rt-demo{margin-bottom:clamp(36px,5vw,64px)}
.rt-fn{--wt:#e8e8ea;position:relative;display:flex;flex-direction:column;align-items:center;margin:0;padding:0;overflow:hidden;
  border-radius:0;background:var(--wt);color:#1d1d1f;text-align:center}
.rt-fn figcaption{order:-1;max-width:30em;margin:0;padding:clamp(34px,3.6vw,56px) clamp(20px,3vw,44px) 0}
.rt-fn h3{margin:0;font:600 clamp(24px,2.3vw,34px)/1.1 var(--display);letter-spacing:-.025em;color:#1d1d1f}
.rt-fn p{margin:8px 0 0;font-size:clamp(14px,1.1vw,16px);line-height:1.4;color:#424245;text-wrap:balance}
.rt-fn img{display:block;flex:none;width:100%;max-width:none;height:auto;aspect-ratio:16 / 10;margin-top:auto;padding-top:clamp(16px,2.2vw,30px);
  box-sizing:content-box;object-fit:cover;object-position:50% 50%;border-radius:0;box-shadow:none;background:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent clamp(16px,2.2vw,30px),#000 32%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent clamp(16px,2.2vw,30px),#000 32%)}
/* each tile in its render's own top colour */
.rt-fn:has(img[src*="route/top.jpg"]){--wt:#ebebeb}
.rt-fn:has(img[src*="route/handle.jpg"]){--wt:#e3e4e6}
.rt-fn:has(img[src*="route/strap.jpg"]){--wt:#d8d9dc}
.rt-fn:has(img[src*="route/sensors.jpg"]){--wt:#dcdde0}
.rt-fn:has(img[src*="route/voice.jpg"]){--wt:#e4e5e7}
.rt-fn:has(img[src*="route/dock.jpg"]){--wt:#e2e3e5}
[data-theme="dark"] .rt-fn,[data-theme="dark"] .rt-fn h3{color:#1d1d1f}
[data-theme="dark"] .rt-fn p{color:#424245}
@media (max-width:734px){
  .rt-fns{grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding-left:0;padding-right:0}
  .rt-fns > .rt-kicker,.rt-fns > .cs-h{padding:0 16px}
  .rt-fn figcaption{padding:34px 20px 0}
  .rt-fn img{padding-top:16px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 16px,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,transparent 16px,#000 30%)}
}