/* Going down — a scroll-driven counter. The Backrooms by service lift: the manual is read on the way down, one floor
   per chapter, from the mono-yellow showroom through the stockroom, the poolrooms and the car park to floors nobody
   lists. The indicator above the door is an odometer: a strip of floor numbers rolled one floor at a time by a
   stepped transform on the page's scroll timeline (no relayout per frame). The contents list numbers its floors with
   a custom @counter-style (G, B1, B2…). Each floor's wallpaper runs edge to edge from a
   layer as wide as the window behind the chapter, so the text column stays narrow. The cables in the shaft
   run past on the same scroll timeline; the tubes flicker on keyframes. Without scroll timelines (Firefox, today) the
   indicator says "Out of order"; under reduced motion nothing moves.
   Designed by machine for the Slopwright. */
@counter-style lift { system: fixed 0; symbols: "G" "B1" "B2" "B3" "B4" "B5" "B6" "B7"; fallback: decimal; }
:root {
  color-scheme: light;
  --steel: #c3c7c9;
  --steel-lo: #7d8386;
  --plaque: #1d1c17;
  --led: #ffb21a;
  --card: #fbf8ee;
  --ink: #1d1b14;
  --soft: #575345;
  --link: #6b4300;
  --sans: "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
}
* { box-sizing: border-box; }
html { overflow-x: clip; background: #2b2a26; }
body { min-width: 320px; margin: 0; color: var(--ink); font: 17px/1.6 var(--sans); background: #2b2a26; }
a { color: var(--link); text-underline-offset: 3px; }
:where(a, [tabindex]):focus-visible { outline: 3px solid #0b62d6; outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; top: -80px; left: 8px; z-index: 60; padding: 8px 14px; background: var(--led); color: #1b1205; }
.skip:focus { top: 8px; }
.main:focus { outline: none; }
h1, h2 { margin: 0; line-height: 1.08; }
.page { position: relative; z-index: 3; max-width: 820px; margin: auto; padding: 0 24px; }

/* ------------------------------------------------------------------ the lift car around you
   .extra-1  the floor indicator over the door     .extra-2  the shaft cables, left and right
   .extra-3  the fluorescent tube's flicker over everything (very faint)     .extra-4  the car's steel sill at the bottom */
.extra { position: fixed; pointer-events: none; }
.extra-1 {
  top: 12px; right: 14px; z-index: 10; display: flex; align-items: center; gap: 10px; overflow: hidden;
  min-width: 128px; height: 58px; padding: 0 16px; border-radius: 10px;
  background: linear-gradient(#3a3a36, #1a1a17); box-shadow: inset 0 0 0 2px #b7a36a, inset 0 0 0 4px #1a1a17, 0 8px 22px rgb(0 0 0 / .5);
  color: var(--led); font: 700 30px/1 "Courier New", ui-monospace, monospace; text-shadow: 0 0 8px rgb(255 178 26 / .7);
}
.extra-1::before { content: "▼"; font-size: 18px; }
.extra-1::after { content: "Out of\A order"; white-space: pre; font-size: 14px; line-height: 1.15; }
.extra-2 {
  top: 0; left: 0; right: 0; height: 300vh; z-index: 1;
  background:
    repeating-linear-gradient(170deg, #6f6c63 0 3px, #2c2b27 3px 6px) 2.5% 0 / 10px 100% no-repeat,
    repeating-linear-gradient(170deg, #6f6c63 0 3px, #2c2b27 3px 6px) 4.5% 0 / 10px 100% no-repeat,
    repeating-linear-gradient(10deg, #6f6c63 0 3px, #2c2b27 3px 6px) 95.5% 0 / 10px 100% no-repeat,
    repeating-linear-gradient(10deg, #6f6c63 0 3px, #2c2b27 3px 6px) 97.5% 0 / 10px 100% no-repeat,
    /* the shaft's brick, passing */
    repeating-linear-gradient(transparent 0 46px, rgb(0 0 0 / .25) 46px 48px);
}
.extra-3 { inset: 0; z-index: 9; background: rgb(255 255 240 / 0); }
.extra-4 {
  left: 0; right: 0; bottom: 0; z-index: 9; height: 14px;
  background: repeating-linear-gradient(90deg, #8d9295 0 3px, #c8cccf 3px 6px);
  box-shadow: 0 -2px 0 #4c5053;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* an odometer: the floor numbers in a strip behind the window, rolled one floor at a time by a stepped
       transform on the scroll timeline, so the numbers change without the page being laid out again */
    .extra-1::after {
      content: "G\A B1\A B2\A B3\A B4\A B5\A B6\A B7"; white-space: pre; align-self: flex-start;
      font-size: 30px; line-height: 58px; --step: 58px;
      animation: descend steps(7, jump-none) both; animation-timeline: scroll(root);
    }
    .extra-2 { animation: shaft linear both; animation-timeline: scroll(root); }
  }
}
@keyframes descend { from { transform: translateY(0); } to { transform: translateY(calc(var(--step) * -7)); } }
@keyframes shaft { from { transform: translateY(0); } to { transform: translateY(-200vh); } }
@media (prefers-reduced-motion: no-preference) {
  .extra-1::before { animation: blink 1.6s steps(2, jump-none) infinite; }
  .extra-3 { animation: tube 7s linear infinite; }
}
@keyframes blink { 50% { opacity: .25; } }
@keyframes tube { 0%, 91%, 93%, 96%, 100% { background: rgb(255 255 240 / 0); } 92%, 95% { background: rgb(20 20 10 / .12); } }

/* ------------------------------------------------------------------ the lobby: the lift doors */
.site-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
  margin: 18px 150px 0 0; padding: 8px 16px; border-radius: 8px;
  background: var(--card); box-shadow: 0 0 0 1px var(--steel-lo), 0 6px 18px rgb(0 0 0 / .4);
}
.masthead { display: flex; align-items: center; gap: 12px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 40px; }
.masthead .brand img { display: block; height: 24px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 12px; border-left: 1px solid var(--steel-lo); color: var(--ink); font-weight: 700; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 15px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); }

/* the doors: two brushed steel leaves with a seam down the middle, and the manual's title on a call plate */
.title-block {
  position: relative; margin: 48px 0 0; padding: 70px 30px 60px; text-align: center; border-radius: 6px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #50565a calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #9da3a6, #d7dbdd 25%, #a7adb0 49%, #a7adb0 51%, #d7dbdd 75%, #9da3a6);
  box-shadow: inset 0 0 0 10px #5d6366, inset 0 0 0 12px #2c3033, 0 20px 50px rgb(0 0 0 / .5);
}
.title-block > * { position: relative; }
.edition, .title, .subtitle { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.edition { margin-top: 0; padding: 4px 12px; background: var(--plaque); color: var(--led); font: 700 13px/1.4 "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; }
.title { margin: 18px auto; padding: 14px 24px; border-radius: 8px; background: var(--card); color: var(--ink); font: 900 clamp(38px, 7vw, 76px)/.98 var(--sans); letter-spacing: -.03em; box-shadow: 0 3px 0 #8b8f91, 0 10px 20px rgb(0 0 0 / .25); }
.subtitle { padding: 8px 14px; border-radius: 6px; background: rgb(251 248 238 / .92); font-size: 18px; }
.contents {
  margin: 26px 0 0; padding: 18px 22px; border-radius: 8px; background: var(--card);
  box-shadow: 0 0 0 1px var(--steel-lo), 0 10px 26px rgb(0 0 0 / .45);
}
.contents-title { margin-bottom: 8px; color: var(--soft); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.contents-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; counter-reset: fl -1; }
.contents-list li { counter-increment: fl; }
.contents-list a { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; }
.contents-list a::before { content: counter(fl, lift); display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: 4px; background: var(--plaque); color: var(--led); font: 700 13px "Courier New", monospace; }

/* ------------------------------------------------------------------ the floors */
.chapter {
  position: relative; isolation: isolate; margin: 150px 0 0; padding: 0 0 30px; scroll-margin-top: 80px;
}
/* the floor's wallpaper, edge to edge: a layer behind the chapter that is exactly as wide as the window */
.chapter::before {
  content: ""; position: absolute; z-index: -1; top: -64px; bottom: -64px; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--wall); box-shadow: inset 0 14px 0 #1d1c17, inset 0 -14px 0 #1d1c17;
}
.chapter-title { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 6px; background: var(--plaque); color: #fffaf0; font-size: clamp(24px, 3.4vw, 32px); box-shadow: 0 8px 20px rgb(0 0 0 / .4); }
.chapter-num { display: grid; place-items: center; flex: none; min-width: 64px; height: 44px; padding: 0 6px; border-radius: 6px; background: #000; color: var(--led); font: 700 18px "Courier New", monospace; text-shadow: 0 0 6px rgb(255 178 26 / .7); }
.chapter-name::after { display: block; margin-top: 2px; color: #d9d2bd; font: 400 14px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.chapter-body { padding: 24px 28px; border-radius: 6px; background: var(--card); box-shadow: 0 14px 30px rgb(0 0 0 / .35); }
.chapter-body > :first-child { margin-top: 0; }

/* which floor is which: the number plate and the department, and each floor's wallpaper */
#welcome { --wall: repeating-linear-gradient(90deg, #d8c869 0 2px, #e6d77a 2px 22px, #d8c869 22px 24px, #efe39a 24px 46px); }
#welcome .chapter-num { font-size: 0; } #welcome .chapter-num::before { content: "G"; font-size: 18px; }
#welcome .chapter-name::after { content: "Showroom"; }
#bench { --wall: repeating-linear-gradient(#8a8d8f 0 6px, #4f5254 6px 10px, #a49378 10px 70px, #8c7b60 70px 74px, #b7a585 74px 120px); }
#bench .chapter-num { font-size: 0; } #bench .chapter-num::before { content: "B1"; font-size: 18px; }
#bench .chapter-name::after { content: "Stockroom"; }
#lamp { --wall: conic-gradient(from 90deg at 2px 2px, #e9f4f5 0 90deg, #9fc9cf 0) 0 0 / 34px 34px; }
#lamp .chapter-num { font-size: 0; } #lamp .chapter-num::before { content: "B2"; font-size: 18px; }
#lamp .chapter-name::after { content: "Poolrooms"; }
#containers { --wall: linear-gradient(90deg, transparent 0 46%, #e3c22c 46% 48%, transparent 48% 96%, #e3c22c 96% 98%, transparent 98%), radial-gradient(#8a8a84 1px, transparent 1.5px) 0 0 / 9px 9px, #6f6f69; }
#containers .chapter-num { font-size: 0; } #containers .chapter-num::before { content: "B3"; font-size: 18px; }
#containers .chapter-name::after { content: "Car park"; }
#rules { --wall: radial-gradient(#a0703a 1.2px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(#7c5326 1px, transparent 1.4px) 3px 4px / 9px 9px, #b9864b; }
#rules .chapter-num { font-size: 0; } #rules .chapter-num::before { content: "B4"; font-size: 18px; }
#rules .chapter-name::after { content: "Staff room"; }
#hazards { --wall: repeating-linear-gradient(45deg, #1d1c17 0 26px, #e3c22c 26px 52px); }
#hazards .chapter-num { font-size: 0; } #hazards .chapter-num::before { content: "B5"; font-size: 18px; }
#hazards .chapter-name::after { content: "Plant room"; }
#glossary { --wall: radial-gradient(circle at 50% 10%, rgb(255 230 160 / .35), transparent 50%), #191813; }
#glossary .chapter-num { font-size: 0; } #glossary .chapter-num::before { content: "B6"; font-size: 18px; }
#glossary .chapter-name::after { content: "Sub-basement"; }

.first { font-size: 19px; }
.plate { margin: 22px 0 0; }
.plate img { display: block; width: 100%; border-radius: 4px; filter: saturate(.75) sepia(.2); }
.plate figcaption { margin-top: 8px; color: var(--soft); font-size: 14px; }
.tools, .rules { padding-left: 1.3em; }
.tools li, .rules li { margin: 8px 0; }
.note { margin: 20px 0; padding: 14px 18px; border-left: 6px solid #e3c22c; background: #fff2b8; }
.note p { margin: 0; }
.saying { margin: 24px 0 0; padding: 14px 18px; border: 1px dashed var(--steel-lo); }
.saying p { margin: 0; font-size: 21px; font-style: italic; }
.saying footer { margin-top: 6px; color: var(--soft); font-size: 14px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { padding-bottom: 8px; color: var(--soft); text-align: left; }
th, td { padding: 8px 10px; border-bottom: 1px solid #d8d2bf; text-align: left; vertical-align: top; }
thead th { color: var(--soft); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; }
.hazard { padding: 14px; border: 2px solid #1d1c17; background: #fff6cf; }
.hazard dt { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 0 0 10px 1.3em; }
.sign-off { font-weight: 700; }

/* the last stop: lost property */
.outfits {
  position: relative; isolation: isolate; margin: 150px 0 0; padding: 26px 28px; border-radius: 6px; background: var(--card); scroll-margin-top: 80px;
  box-shadow: 0 0 0 14px #1d1c17, 0 20px 40px rgb(0 0 0 / .5);
}
.outfits-title { display: flex; align-items: center; gap: 14px; font-size: clamp(24px, 3.4vw, 32px); }
.outfits-title::before { content: "B7"; display: grid; place-items: center; min-width: 64px; height: 44px; border-radius: 6px; background: #000; color: var(--led); font: 700 18px "Courier New", monospace; }
.outfits-lede { color: var(--soft); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.outfit { padding: 8px 0; border-bottom: 1px solid #ddd6c2; font-size: 15px; }
.outfit-link { display: inline-flex; align-items: center; min-height: 28px; font-weight: 700; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; color: var(--soft); font-size: 14px; }
#th-elevator { padding: 10px 12px; border: 0; border-radius: 6px; background: var(--plaque); color: #fffaf0; }
#th-elevator .outfit-link { color: var(--led); }
#th-elevator .outfit-link::before { content: "You are in: "; color: #fffaf0; font-weight: 400; }
#th-elevator .outfit-technique, #th-elevator .outfit-note { display: block; color: #e6dfca; font-size: 14px; }

.site-foot { position: relative; z-index: 3; max-width: 772px; margin: 40px auto 60px; padding: 14px 20px; border-radius: 6px; background: var(--card); color: var(--soft); text-align: center; font-size: 14px; }
.site-foot p { margin: 4px 0; }

/* the indicator only floats where it has a margin to float in; narrower, it is a plate at the top of the shaft that
   scrolls away with it, so it never covers the text */
@media (max-width: 1099px) {
  .extra-1 { position: absolute; }
  .extra-4 { display: none; }
}
@media (max-width: 700px) {
  .page { padding: 0 16px; }
  .extra-1 { left: 50%; right: auto; translate: -50% 0; top: 8px; min-width: 0; height: 44px; padding: 0 12px; font-size: 22px; }
  .site-head { margin-right: 0; margin-top: 76px; }
  .extra-1::after { font-size: 12px; }
  .title-block { padding: 48px 16px 40px; }
  .chapter, .outfits { margin-top: 110px; }
  .chapter-body, .outfits { padding: 20px 18px; }
  .chapter-title { padding: 12px 14px; }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 700px) and (prefers-reduced-motion: no-preference) { .extra-1::after { font-size: 22px; line-height: 44px; --step: 44px; } }
}
@media (prefers-reduced-motion: reduce) {
  .extra-1, .extra-1::before, .extra-1::after, .extra-2, .extra-3 { animation: none; }
}

/* moving between outfits: a cross-document view transition where the browser has them (Chromium did, Firefox did not, when check.mjs last ran), with the
   masthead and the title carried across; an ordinary page load elsewhere, and under reduced motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.title { view-transition-name: manual-title; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }