/* Level zero — mono-yellow wallpaper, damp carpet and a buzzing ceiling of fluorescent panels, all built from
   stacked linear and radial gradients. No images, no texture files.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: light;
  --wall: #c9b458;
  --wall-dark: #b49f45;
  --paper: #f3ecc2;
  --ink: #2a2410;
  --muted: #5a4f22;
  --carpet: #7d6a3a;
  --strip: #6b5a24;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0; min-width: 320px; color: var(--ink);
  font: 17px/1.6 "Helvetica Neue", Arial, sans-serif;
  /* the wallpaper: a faint chevron-and-stripe repeat over sickly yellow, with a damp vignette */
  background-color: var(--wall);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 230, .45), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(120, 100, 30, .18) 46px 48px, transparent 48px 96px),
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 245, 190, .12) 10px 12px),
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(120, 100, 30, .1) 10px 12px),
    radial-gradient(circle at 24px 24px, rgba(120, 100, 30, .22) 0 3px, transparent 4px);
  background-size: auto, auto, 24px 24px, 24px 24px, 48px 48px;
  background-attachment: fixed, scroll, scroll, scroll, scroll;
}
a { color: #3d2f00; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #000; background: rgba(255, 255, 200, .6); }
a:focus-visible { outline: 3px solid #2a2410; outline-offset: 3px; background: #fffbe0; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 10px; top: -80px; z-index: 10; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 10px; }
.main:focus { outline: none; }

/* the ceiling: a row of fluorescent panels in a grid of tiles, fixed across the top */
.site-head {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
  padding: 26px 5% 24px; color: var(--ink);
  background-color: #ddd7b8;
  background-image:
    linear-gradient(#fffff4, #f6f3d8) ,
    linear-gradient(90deg, rgba(0,0,0,.12) 2px, transparent 2px),
    linear-gradient(rgba(0,0,0,.12) 2px, transparent 2px);
  background-size: 180px 12px, 90px 100%, 100% 100%;
  background-position: 30px 6px, 0 0, 0 0;
  background-repeat: repeat-x, repeat, no-repeat;
  border-bottom: 6px solid #b9b08a;
  box-shadow: 0 10px 40px rgba(255, 255, 210, .7);
}
.masthead { display: flex; align-items: center; gap: 14px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 40px; }
.masthead .brand img { display: block; height: 28px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 14px; border-left: 2px solid #8f8660; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .5px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
/* the hum: a panel that flickers, very slowly */
.site-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 220, .9) 20% 30%, transparent 32% 60%, rgba(255,255,220,.9) 62% 80%, transparent);
  animation: hum 7s steps(1) infinite;
}
@keyframes hum { 0%, 92%, 96% { opacity: 1; } 94% { opacity: .2; } }

.page { min-height: 100vh; }
.main { max-width: 980px; margin: 0 auto; padding: 0 5%; }

/* the title: printed on a department sign hanging from the ceiling */
.title-block { margin: 50px auto 30px; padding: 30px 28px; max-width: 720px; background: var(--paper); border: 2px solid #8a7c3d; box-shadow: 0 2px 0 #fff8, 0 20px 30px rgba(60, 50, 10, .3); text-align: center; position: relative; }
.title-block::before, .title-block::after { content: ""; position: absolute; top: -52px; width: 2px; height: 52px; background: #6d6235; }
.title-block::before { left: 18%; } .title-block::after { right: 18%; }
.edition { margin: 0 0 6px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.title { margin: 0; font: 800 clamp(36px, 7vw, 72px)/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: -1px; text-transform: uppercase; }
.subtitle { margin: 12px auto 0; max-width: 42ch; color: var(--muted); }

/* panels: sheets of paper tacked to the wallpaper */
.contents, .chapter, .outfits { margin: 28px 0; padding: 26px clamp(18px, 4vw, 40px); background: var(--paper); border: 1px solid #a7984f; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 24px rgba(60, 50, 10, .22); }
.chapter:nth-of-type(odd) { transform: rotate(-.3deg); }
.chapter:nth-of-type(even) { transform: rotate(.25deg); }
.contents-title { margin: 0 0 10px; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; }
.contents-list { margin: 0; padding-left: 24px; columns: 2 200px; }
.contents-list a { display: inline-block; min-height: 28px; }
.chapter-title { margin: 0 0 14px; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; text-transform: uppercase; letter-spacing: -.5px; }
.chapter-num { display: inline-block; margin-right: 10px; padding: 0 10px; background: var(--ink); color: var(--paper); font-size: .7em; vertical-align: .2em; }
.chapter-num::before { content: "Aisle "; }
.chapter-body { max-width: 66ch; }
.first { font-size: 19px; }
.plate { margin: 22px 0 0; padding: 10px; background: #fffef2; border: 1px solid #b7a960; }
.plate img { display: block; filter: sepia(.35) saturate(1.2) hue-rotate(-8deg); }
.plate figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.tools { padding-left: 22px; }
.tools li { margin: 6px 0; }
.note { margin: 20px 0; padding: 16px 18px; background: #2a2410; color: #fff6c8; border-left: 10px solid #e4c84d; }
.note p { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; padding-bottom: 8px; color: var(--muted); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
th, td { padding: 9px 10px; border-bottom: 1px solid #c7b971; text-align: left; vertical-align: top; }
thead th { background: var(--ink); color: var(--paper); }
.rules { padding-left: 26px; }
.rules li { margin: 8px 0; }
.saying { margin: 22px 0 0; padding: 16px 20px; background: #efe6b0; border-left: 4px solid var(--ink); }
.saying p { margin: 0; font-size: 20px; font-style: italic; }
.saying footer { margin-top: 6px; font-size: 14px; color: var(--muted); }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0; }
.hazard { padding: 12px 14px; background: #fffbe2; border: 1px dashed #8a7c3d; }
.hazard dt { font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.glossary dt { font-weight: 800; }
.glossary dd { margin: 0; }
.sign-off { font-weight: 700; }

.outfits-title { margin: 0; font-size: clamp(24px, 3.4vw, 34px); text-transform: uppercase; }
.outfits-lede { color: var(--muted); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.outfit { padding: 10px 12px; background: #fffbe2; border: 1px solid #c2b366; font-size: 14px; }
.outfit-link { display: inline-block; min-height: 26px; font-weight: 700; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; color: var(--muted); font-size: 13px; }
#th-backrooms { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#th-backrooms a, #th-backrooms .outfit-technique { color: #fff3b0; }
#th-backrooms .outfit-link::after { content: " · you are here. Probably."; font-weight: 400; }
#th-backrooms .outfit-by, #th-backrooms .outfit-note { display: block; color: #f1e6b4; font-size: 13px; margin-top: 4px; }

/* the carpet: damp, stained, wall to wall at the bottom */
.site-foot {
  margin-top: 40px; padding: 30px 5% 50px; color: #fff4c4;
  background-color: var(--carpet);
  background-image:
    radial-gradient(ellipse 120px 60px at 20% 40%, rgba(60, 45, 15, .45), transparent 70%),
    radial-gradient(ellipse 200px 80px at 75% 60%, rgba(60, 45, 15, .35), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 5px);
  border-top: 10px solid var(--strip);
}
.site-foot p { max-width: 70ch; margin: 0 auto 8px; text-align: center; font-size: 14px; }
.site-foot a { color: #fff4c4; }
.site-foot p { background: rgba(40, 30, 8, .65); padding: 6px 10px; }
.extra { display: none; }

@media (max-width: 600px) {
  .chapter:nth-of-type(odd), .chapter:nth-of-type(even) { transform: none; }
  .glossary { grid-template-columns: 1fr; gap: 2px; }
  .glossary dd { margin-bottom: 8px; }
  .title-block::before, .title-block::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-head::after { animation: none; }
}

@media (max-width: 600px) { table { min-width: 0; } }

/* 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; } }