/* The long corridor — a showroom corridor after closing, built in 3D: the floor, the ceiling and both walls are
   planes folded out of one perspective with rotateX and rotateY, and the chapters hang on the walls as framed
   notices, turned a few degrees toward you. Scrolling walks you down it: a scroll() timeline slides the floor tiles,
   ceiling lights and wallpaper toward the camera (transform only). Without scroll timelines the corridor stands
   still; on phones it is a straight hallway. Designed by machine for the Slopwright. */
@font-face { font-family: "Archivo Black"; src: url(/fonts/archivo-black-latin.woff2) format("woff2"); font-weight: 400 1000; font-display: swap; }
:root {
  color-scheme: light;
  --wall: #cdbb6a;
  --wall-dark: #8f7d35;
  --paper: #fbf6e4;
  --ink: #1e1b12;
  --muted: #554c33;
  --frame: #3a2c1a;
  --focus: #0b56c4;
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { min-width: 320px; margin: 0; color: var(--ink); font: 17px/1.6 Arial, Helvetica, sans-serif; background: #3d3519; }
a { color: #4a2f00; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; padding: 10px 16px; background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
.page { position: relative; z-index: 1; max-width: 1180px; margin: auto; padding: 0 4% 60px; }
.main:focus { outline: none; }
h1, h2 { margin: 0; font-family: "Archivo Black", "Arial Black", Arial, sans-serif; font-weight: 1000; font-synthesis: none; line-height: 1.05; }

/* ---------------------------------------------------------------- the corridor itself: four planes, fixed */
.extra { position: fixed; z-index: 0; pointer-events: none; }
/* floor: carpet tiles running away from you */
.extra-1 { left: -20vw; right: -20vw; bottom: 0; height: 170vh; transform-origin: 50% 100%;
  transform: perspective(500px) rotateX(78deg);
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 120px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .22) 0 2px, transparent 2px 120px),
    radial-gradient(ellipse at 50% 100%, #7d7146, #4a4224 70%); }
/* ceiling: fluorescent panels */
.extra-2 { left: -20vw; right: -20vw; top: 0; height: 170vh; transform-origin: 50% 0;
  transform: perspective(500px) rotateX(-78deg);
  background:
    linear-gradient(90deg, transparent 46%, #fffbe0 46.5% 53.5%, transparent 54%) 0 0 / 100% 240px,
    repeating-linear-gradient(0deg, rgb(0 0 0 / .12) 0 2px, transparent 2px 120px),
    linear-gradient(#e9e2c4, #b9ad7c); }
/* left and right walls: the mono-yellow showroom wallpaper */
.extra-3, .extra-4 { top: -50vh; bottom: -50vh; width: 150vw;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgb(120 98 30 / .28) 34px 36px, transparent 36px 70px),
    linear-gradient(0deg, #6d5b20 0 12%, transparent 12%),
    linear-gradient(var(--wall), #bba657); }
.extra-3 { left: 0; transform-origin: 0 50%; transform: perspective(500px) rotateY(78deg); }
.extra-4 { right: 0; transform-origin: 100% 50%; transform: perspective(500px) rotateY(-78deg); }
/* the far end, where the corridor fades into dark */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 18% 22% at 50% 50%, #0b0a05 0 40%, transparent 100%), radial-gradient(ellipse at 50% 50%, transparent 30%, rgb(10 8 2 / .55) 100%); }

/* walking: scroll moves each plane toward you, transform only */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .extra-1 { animation: walk-floor linear both; animation-timeline: scroll(root); }
    .extra-2 { animation: walk-ceiling linear both; animation-timeline: scroll(root); }
    .extra-3 { animation: walk-left linear both; animation-timeline: scroll(root); }
    .extra-4 { animation: walk-right linear both; animation-timeline: scroll(root); }
  }
}
@keyframes walk-floor { to { transform: perspective(500px) rotateX(78deg) translateY(480px); } }
@keyframes walk-ceiling { to { transform: perspective(500px) rotateX(-78deg) translateY(-480px); } }
@keyframes walk-left { to { transform: perspective(500px) rotateY(78deg) translateX(-480px); } }
@keyframes walk-right { to { transform: perspective(500px) rotateY(-78deg) translateX(480px); } }

/* the lights buzz, a little */
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: corridor-buzz 5s steps(1) infinite; }
}
@keyframes corridor-buzz { 0%, 91%, 95%, 100% { opacity: 1; } 92%, 94% { opacity: .82; } }

/* ---------------------------------------------------------------- the masthead: a door sign */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin: 20px auto 0; max-width: 980px; padding: 8px 18px;
  background: var(--paper); border: 3px solid var(--frame); box-shadow: 0 10px 24px rgb(0 0 0 / .45); }
.masthead { display: flex; align-items: center; min-width: 0; }
.masthead .brand { display: flex; align-items: center; min-height: 42px; }
.masthead .brand img { display: block; width: auto; height: 26px; }
.site-name { display: inline-flex; align-items: center; min-height: 42px; margin-left: 14px; padding-left: 14px; border-left: 1px solid #b9ad7c; color: var(--ink); font-weight: 700; text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; font-weight: 700; }
.site-nav a { display: inline-flex; align-items: center; min-height: 42px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- notices on the walls */
.manual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 22%; padding: 60px 0 0; perspective: 1400px; }
.title-block, .contents, .chapter, .outfits {
  position: relative; padding: 26px 28px; background: var(--paper); border: 10px solid var(--frame);
  box-shadow: inset 0 0 0 2px #c9a35a, 0 18px 30px rgb(0 0 0 / .5);
  transform-style: preserve-3d;
}
/* a picture light over each frame */
.chapter::before { content: ""; position: absolute; left: 30%; right: 30%; top: -24px; height: 10px; border-radius: 4px 4px 0 0; background: linear-gradient(#5b5b55, #2b2b28); transform: translateZ(14px); }
.title-block { grid-column: 1 / -1; justify-self: center; max-width: 760px; text-align: center; transform: translateZ(-60px); }
/* left wall turns right, right wall turns left: mild, so the text stays easy */
.manual > :nth-child(even):not(.title-block) { transform: rotateY(9deg); transform-origin: 0 50%; }
.manual > :nth-child(odd):not(.title-block) { transform: rotateY(-9deg); transform-origin: 100% 50%; }
.chapter-1, .chapter-5 { grid-column: 1 / -1; justify-self: center; max-width: 760px; transform: translateZ(-40px) !important; }
.outfits { margin: 80px auto 0; max-width: 980px; }

.edition { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.title { font-size: clamp(40px, 6.6vw, 84px); letter-spacing: -.02em; }
.subtitle { margin: 12px auto 0; max-width: 36ch; font-size: 19px; }
.contents-title { font-size: 22px; }
.contents-list { margin: 10px 0 0; padding-left: 22px; line-height: 1.95; }
.chapter-title { display: flex; gap: 12px; align-items: baseline; font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 10px; }
.chapter-num { display: inline-grid; place-items: center; min-width: 34px; height: 34px; background: var(--frame); color: var(--paper); font: 700 16px Arial, Helvetica, sans-serif; }
.chapter-num::before { content: "Aisle "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.chapter-body > :first-child { margin-top: 0; }
.first { font-size: 18px; }
.plate { margin: 16px 0 0; border: 6px solid var(--frame); }
.plate img { display: block; width: 100%; }
.plate figcaption { padding: 6px 8px; background: var(--paper); color: var(--muted); font-size: 13px; }
.note { margin: 16px 0; padding: 12px 14px; background: #ffe36b; border: 2px solid var(--ink); }
.note p { margin: 0; }
.saying { margin: 18px 0 0; padding: 10px 16px; border-left: 4px solid var(--frame); font-size: 18px; font-style: italic; }
.saying p { margin: 0; }
.saying footer { margin-top: 4px; color: var(--muted); font-size: 14px; font-style: normal; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; color: var(--muted); padding-bottom: 6px; }
th, td { padding: 7px 10px 7px 0; border-top: 1px solid #d9cfa8; text-align: left; vertical-align: top; }
thead th { border-top: 0; border-bottom: 2px solid var(--ink); font-size: 13px; }
.hazards { display: grid; gap: 10px; margin: 0; }
.hazard { padding: 8px 12px; border: 2px solid var(--ink); background: #fff; }
.hazard dt { font-weight: 700; }
.hazard dd { margin: 2px 0 0; font-size: 15px; }
.glossary dt { font-weight: 700; margin-top: 8px; }
.glossary dd { margin: 0 0 0 16px; }

.outfits-title { font-size: clamp(26px, 3.2vw, 38px); }
.outfits-lede { color: var(--muted); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; }
.outfit-link { display: inline-flex; align-items: center; min-height: 26px; font-weight: 700; }
.outfit-by, .outfit-technique, .outfit-note { display: none; }
#th-corridor { grid-column: span 2; padding: 6px 10px; background: var(--ink); }
#th-corridor .outfit-link { color: #ffe36b; }
#th-corridor .outfit-link::after { content: " · you are here"; font-weight: 400; }

.site-foot { position: relative; z-index: 1; max-width: 980px; margin: 40px auto 0; padding: 14px 20px; background: var(--paper); border: 3px solid var(--frame); font-size: 14px; }
.site-foot p { margin: 4px 0; }

/* ---------------------------------------------------------------- phones: a straight hallway */
@media (max-width: 760px) {
  .extra-3, .extra-4 { display: none; }
  body { background: linear-gradient(90deg, #8f7d35, var(--wall) 12%, var(--wall) 88%, #8f7d35); }
  body::before { background: linear-gradient(180deg, rgb(255 251 224 / .5) 0 3px, transparent 3px 160px) 50% 0 / 30% 160px repeat-y; opacity: .5; }
  .manual { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 28px; perspective: none; }
  .manual > * { transform: none !important; max-width: none !important; }
  .title-block, .contents, .chapter, .outfits { padding: 18px 16px; border-width: 7px; }
  .masthead .brand img { height: 22px; }
  #th-corridor { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .extra-1, .extra-2, .extra-3, .extra-4, body::before { 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; } }