/* Shared by every page: wallpaper, fluorescent light, plastic surfaces, header, footer, buttons. */
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: var(--step-0) / 1.6 var(--font-text);
  background-color: var(--wall);
  background-image:
    var(--noise),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--wall-2) 26px 28px);
}
/* The light fixture: a fixed wash from the top that hums. */
body::before {
  content: ""; position: fixed; z-index: 1; left: 0; right: 0; top: 0; height: 38vh;
  background: linear-gradient(180deg, var(--glow), transparent);
  mix-blend-mode: screen; opacity: 0.5; pointer-events: none;
  animation: hum 9s linear infinite;
}
@keyframes hum {
  0%, 100% { opacity: 0.5; } 6% { opacity: 0.42; } 7% { opacity: 0.56; }
  47% { opacity: 0.48; } 51% { opacity: 0.36; } 52% { opacity: 0.53; }
}
/* Lights (site/js/lights.js): a dimmer and a flash over the whole room, driven by script. Both are invisible without it. */
.dim, .flash { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 70ms linear; }
.dim { background: #000; }
.flash { background: var(--glow); mix-blend-mode: screen; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0 0 var(--space-2); line-height: 1.1; }
h1 {
  font-size: var(--step-3); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
  text-shadow: 0 1px 0 var(--gloss), 0 3px 4px var(--shade);
}
h2 { margin-bottom: var(--space-1); color: var(--muted); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; scroll-margin-top: var(--space-2); }
h3 { font-size: var(--step-1); }
p, ol, ul, dl { margin: 0 0 var(--space-2); }
main :is(p, ol, ul, dl) { max-width: var(--measure); }
small { font-size: 0.85rem; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; z-index: 10; padding: var(--space-1) var(--space-2); background: var(--plastic-hi); color: var(--ink); }
.skip:focus { left: var(--space-2); top: var(--space-1); }

main { position: relative; z-index: 2; display: block; max-width: 56rem; margin-inline: auto; padding: var(--space-4) var(--space-2); }

/* A molded plastic surface: gradient body, hard edge, a gloss cap and a drop shadow. */
.panel {
  position: relative; isolation: isolate; padding: var(--space-3); border: 1px solid var(--edge); border-radius: 18px;
  background: linear-gradient(180deg, var(--plastic-hi) 0%, var(--plastic) 48%, var(--plastic-lo) 100%);
  box-shadow: inset 0 1px 0 var(--gloss), inset 0 -3px 0 var(--shade-soft), 0 12px 28px var(--shade);
}
.panel::before {
  content: ""; position: absolute; z-index: -1; left: 3px; right: 3px; top: 2px; height: 44%;
  border-radius: 15px 15px 50% 50% / 15px 15px 100% 100%;
  background: linear-gradient(180deg, var(--gloss), transparent); pointer-events: none;
}
/* A small screwed-on sign. */
.plaque {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--space-2); padding: 0.3rem 0.9rem;
  border: 1px solid var(--edge); border-radius: 8px; color: var(--ink);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic-lo));
  box-shadow: inset 0 1px 0 var(--gloss), 0 2px 6px var(--shade);
}
.plaque::before, .plaque::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--plastic-hi), var(--edge) 70%); }
.notice { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ways ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin: 0; padding: 0; list-style: none; }
.ways a { display: inline-flex; align-items: center; min-height: 44px; }

.btn {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 var(--space-1) var(--space-1) 0; padding: 0.5rem 1.5rem;
  border: 1px solid var(--btn-lo); border-radius: 999px; color: #fff; text-decoration: none; overflow-wrap: normal;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--btn-hi) 0%, var(--btn) 50%, var(--btn-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 12px 12px -8px rgba(255, 255, 255, 0.6), 0 6px 14px var(--shade);
}
.btn:hover { text-decoration: underline; filter: brightness(1.06); }

.site-head {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-1) var(--space-3); margin: var(--space-2); padding: var(--space-1) var(--space-2);
  border: 1px solid var(--edge); border-radius: 14px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 55%, var(--plastic-lo));
  box-shadow: inset 0 1px 0 var(--gloss), 0 8px 20px var(--shade);
}
.site-head .mark { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--ink); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.site-head ul, .site-foot ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-head nav a, .site-foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem; border-radius: 999px; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.site-head nav a { color: var(--ink); }
.site-head nav a:hover { background: var(--gloss); }

/* The carpet. */
.site-foot {
  position: relative; z-index: 2; margin: var(--space-5) var(--space-2) var(--space-2); padding: var(--space-3);
  border: 1px solid var(--carpet-2); border-radius: 18px; color: var(--carpet-ink);
  background-color: var(--carpet);
  background-image: repeating-linear-gradient(45deg, var(--shade-soft) 0 2px, transparent 2px 7px), linear-gradient(180deg, var(--carpet), var(--carpet-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px var(--shade);
}
.site-foot > * { max-width: 56rem; margin-inline: auto; }
.site-foot p { margin-bottom: var(--space-1); }
.site-foot a { color: var(--carpet-ink); }
.site-foot nav a { padding-left: 0; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot .foot-name { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; }
.site-foot small { color: var(--carpet-line); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The tuner (site/js/lights-tuner.js): a floating box, bottom right, for playing with the lighting values. */
.tuner { position: fixed; right: 12px; bottom: 12px; z-index: 20; width: min(21rem, calc(100vw - 24px)); max-height: 70vh; overflow: auto; padding: 0.4rem 0.7rem 0.7rem; background: var(--plastic); color: var(--ink); border: 1px solid var(--edge); border-radius: 10px; box-shadow: 0 6px 18px var(--shade); font-size: 0.78rem; line-height: 1.4; }
.tuner summary { cursor: pointer; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.3rem 0; }
.tuner .tuner-help, .tuner .tuner-sound { margin: 0.4rem 0; color: var(--muted); }
.tuner-grid { display: grid; grid-template-columns: 1fr minmax(0, 9rem); gap: 0.3rem 0.6rem; align-items: center; }
.tuner-grid label { margin: 0; }
.tuner-grid input[type="number"], .tuner-grid input[type="text"] { width: 100%; padding: 0.2rem 0.35rem; font: inherit; color: var(--ink); background: var(--plastic-hi); border: 1px solid var(--edge); border-radius: 4px; }
.tuner-grid input[type="checkbox"] { justify-self: start; }
.tuner-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.tuner-row button { padding: 0.3rem 0.6rem; font: inherit; font-weight: 700; color: #fff; background: var(--btn); border: 1px solid var(--btn-lo); border-radius: 5px; cursor: pointer; }
.tuner-row button:hover { background: var(--btn-hi); }
@media print { .tuner, .dim, .flash { display: none; } }