/* nowhere.fit/light: the home page in light colours, for review before it follows the phone's light mode.
   Figma: laptop 310:881, phone 310:1320 on the Website page. Photos and the brown reserve block stay as they are, the
   flat black panels go bone with ink type, the app's phone screens stay dark. The engraved figures are the same videos
   turned light: inverted, hue turned back, lifted so the ground lands on white, then multiplied onto bone. */
html.light { --line: rgba(20, 20, 20, .14); }
html.light body { background: #eeeae2; }
html.light main > section.y-session, html.light main > section.y-rep, html.light main > section.y-box { background: #eeeae2; color: #141414; }
html.light .y-k { color: #604e45; }
html.light .y-of, html.light .y-step p, html.light .y-repcopy p, html.light .y-box li span, html.light .y-read dd span { color: #5a6670; }

/* now you can move: the body's pane goes bone, the heading ink so it reads on the sky and on the pane */
html.light .y-suit { background: #eeeae2; border-left-color: rgba(20, 20, 20, .08); border-top-color: rgba(20, 20, 20, .08); }
html.light .y-suit .y-cap { color: rgba(20, 20, 20, .7); }
html.light .y-now { color: #141414; text-shadow: none; }

/* the engraved figures on bone */
html.light .y-suit video, html.light .y-repart video, html.light .y-repart img { filter: invert(1) hue-rotate(180deg) brightness(1.09); mix-blend-mode: multiply; }
html.light .y-repart { background: #eeeae2; }
html.light .y-read dd b { color: #141414; }
html.light .y-read .y-r43 dd b { color: #604e45; }

/* the session: ink on bone, the phones keep the app's own dark screen */
html.light .y-session .y-rail::before { background: rgba(20, 20, 20, .14); }
html.light .y-stations li::before { background: rgba(20, 20, 20, .3); }
html.light .y-stations button { color: rgba(20, 20, 20, .62); }
html.light .y-stations button:hover, html.light .y-stations button:focus-visible, html.light .y-stations li.on button { color: #141414; }
html.light .app-screen { color: #eeeae2; --line: rgba(238, 234, 226, .16); }
/* a phone the clock is not at stays a solid dark phone with its screen dimmed, not a see-through grey one */
html.light .y-phones .y-phone { opacity: 1; }
html.light .y-phones .y-phone:not(.on) .app-screen > * { opacity: .38; transition: opacity .5s; }

/* in the box: the photo melts into bone instead of ink */
html.light .y-box figure::after { background: linear-gradient(90deg, #eeeae2 0%, rgba(238, 234, 226, 0) 22%); }
@media (max-width: 899px) { html.light .y-box figure::after { background: linear-gradient(0deg, #eeeae2 0%, rgba(238, 234, 226, 0) 30%); } }

html.light footer { background: #eeeae2; color: #5a6670; }
html.light footer .nwh { color: #141414; }
html.light footer .legal, html.light footer .links a { color: #5a6670; }
html.light footer .legal a { color: #141414; }