@font-face { font-family: "Jost"; src: url("/assets/Jost-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/SourceSerif4-wght.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
:root { --page: #FBF7F0; --street: #F0EAE0; --ink: #252422; --ink-muted: #656360; --quiet: #D1CABE; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --page: #1F231C; --street: #171A14; --ink: #ECEDE2; --ink-muted: #9EA097; --quiet: #454B3E; --glass: #E6D38B; } }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--street); color: var(--ink); font: 18px/29px "Source Serif 4", Charter, Georgia, serif; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 48px clamp(20px, 6vw, 40px); }
h1 { font: 500 clamp(22px, 6vw, 30px)/1 Jost, Futura, sans-serif; letter-spacing: .28em; margin: 0 0 18px; padding-left: .28em; }
.line { font: 400 clamp(15px, 4vw, 17px)/26px Jost, Futura, sans-serif; color: var(--ink-muted); margin: 0; }
.line a { color: inherit; }
/* The drawing at dusk is layers: the plants that stand in front of the glass, the glass, the lines, and the
   same plants again in the dark of the page, so they show pale with the lights off and dark against the light.
   It is a label around a hidden checkbox, so a click or the space bar turns the lights off and on with no script;
   lights.js adds the dimmer and sets --lights, from 0 to 1. */
.drawing { --lights: 1; display: block; position: relative; width: min(100%, 880px); aspect-ratio: 1507 / 354; margin: 0 auto 36px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.drawing input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.drawing i { position: absolute; inset: 0; pointer-events: none; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.drawing .lines { background: var(--ink); -webkit-mask-image: url(/assets/butterfly.svg); mask-image: url(/assets/butterfly.svg); }
.drawing .glass, .drawing .plants { display: none; }
@media (prefers-color-scheme: dark) {
  .drawing input { cursor: pointer; }
  .drawing:has(input:focus-visible) { outline: 1px solid var(--ink-muted); outline-offset: 12px; }
  .drawing .lines { -webkit-mask-image: url(/assets/butterfly-dusk.svg); mask-image: url(/assets/butterfly-dusk.svg); }
  .drawing .plants { display: block; background: var(--ink); -webkit-mask-image: url(/assets/butterfly-plants.svg); mask-image: url(/assets/butterfly-plants.svg); }
  .drawing .glass { display: block; background: var(--glass); -webkit-mask-image: url(/assets/butterfly-glass.svg); mask-image: url(/assets/butterfly-glass.svg); }
  .drawing .plants.front { background: var(--street); }
  .drawing .glass, .drawing .plants.front { opacity: 0; transition: opacity .35s ease; }
  .drawing input:checked ~ .glass { opacity: var(--lights); }
  .drawing input:checked ~ .plants.front { opacity: min(1, calc(var(--lights) * 2.5)); }
  .drawing.dragging i { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .drawing i { transition: none !important; } }
footer { padding: 20px; text-align: center; font: 400 13px/18px Jost, Futura, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
footer a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--quiet); padding-bottom: 2px; }