/* Night drive — 3D transforms. A neon grid floor running to the horizon: a gradient grid tipped back with
   perspective() and rotateX(), scrolling towards you; a striped sun from gradients. The words stay flat, on dark
   glass, and readable. Under reduced motion the road stops.
   Designed by machine for the Slopwright. */
:root {
  color-scheme: dark;
  --night: #0b0420;
  --violet: #241046;
  --pink: #ff4fc3;
  --cyan: #4ff0ff;
  --sun1: #ffd65a;
  --sun2: #ff4f8b;
  --text: #f2ecff;
  --soft: #cbbcf0;
  --glass: rgba(14, 6, 36, .9);
  --head: "Archivo Black", "Arial Black", Impact, sans-serif;
}
@font-face { font-family: "Archivo Black"; src: url(/fonts/archivo-black-latin.woff2) format("woff2"); font-weight: 400 1000; font-display: swap; }
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { min-width: 320px; margin: 0; color: var(--text); font: 17px/1.65 "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  background: linear-gradient(var(--night) 0%, var(--violet) 55%, #4a1060 62%, var(--night) 62.2%) fixed; background-color: var(--night); }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--pink); }
:where(a, [tabindex]):focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; box-shadow: 0 0 14px var(--cyan); }
img { max-width: 100%; height: auto; }
.skip { position: absolute; top: -80px; left: 8px; z-index: 10; padding: 8px 14px; background: var(--pink); color: var(--night); font-weight: 700; }
.skip:focus { top: 8px; }
.page { position: relative; z-index: 1; max-width: 960px; margin: auto; padding: 0 20px; }
.main:focus { outline: none; }
h1, h2 { margin: 0; font-family: var(--head); font-weight: 400; line-height: 1.05; }

/* the scenery, fixed behind everything */
.extra { position: fixed; pointer-events: none; z-index: 0; }
.extra-1 { /* the sun */
  left: 50%; top: 18vh; width: min(46vw, 420px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(var(--sun1), var(--sun2) 75%);
  -webkit-mask: linear-gradient(#000 52%, transparent 0), repeating-linear-gradient(#000 0 14px, transparent 14px 20px);
  mask: linear-gradient(#000 52%, transparent 0), repeating-linear-gradient(#000 0 14px, transparent 14px 20px);
  box-shadow: 0 0 80px rgba(255, 79, 139, .6);
  opacity: .9;
}
.extra-2 { /* the grid floor */
  left: 0; right: 0; bottom: 0; height: 38vh;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 1px), var(--pink) calc(50% - 1px) calc(50% + 1px), transparent 0) 0 0 / 60px 100%,
    linear-gradient(transparent 0 calc(100% - 2px), var(--pink) 0) 0 0 / 100% 40px,
    linear-gradient(#2a0838, var(--night));
  transform: perspective(240px) rotateX(58deg) scaleX(2.4);
  transform-origin: 50% 100%;
  animation: road 1.2s linear infinite;
  filter: drop-shadow(0 0 4px var(--pink));
}
.extra-3 { /* haze on the horizon */
  left: 0; right: 0; bottom: 37vh; height: 6vh; background: linear-gradient(transparent, rgba(255, 79, 195, .35), transparent);
}
.extra-4 { display: none; }
@keyframes road { to { background-position: 0 0, 0 40px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .extra-2 { animation: none; } }

.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px; margin-top: 20px; padding: 10px 18px; border: 1px solid rgba(79, 240, 255, .5); border-radius: 12px; background: var(--glass); }
.masthead { display: flex; align-items: center; gap: 14px; }
.masthead .brand { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: 6px; background: var(--text); }
.masthead .brand img { display: block; height: 22px; width: auto; }
.site-name { display: inline-flex; align-items: center; min-height: 40px; padding-left: 14px; border-left: 1px solid var(--pink); color: var(--pink); font-family: var(--head); letter-spacing: .12em; 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(--text); }

.title-block { padding: 46vh 0 40px; text-align: center; }
.edition { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 4px; background: var(--glass); color: var(--cyan); font-size: 14px; letter-spacing: .25em; text-transform: uppercase; }
.title { display: inline-block; margin: 14px 0 0; padding: 6px 18px; border-radius: 10px; background: rgba(11, 4, 32, .85); color: #fff; font-size: clamp(40px, 8.4vw, 104px); letter-spacing: .01em; text-transform: uppercase; font-style: italic;
  text-shadow: 0 0 6px var(--pink), 0 0 22px var(--pink), 3px 3px 0 var(--cyan); }
.subtitle { max-width: 36ch; margin: 18px auto 0; padding: 10px 16px; border-radius: 8px; background: var(--glass); color: var(--text); font-size: 19px; }

.contents, .chapter, .outfits { margin: 0 0 28px; padding: 28px 32px; border: 1px solid rgba(255, 79, 195, .55); border-radius: 14px; background: var(--glass); box-shadow: 0 0 24px rgba(255, 79, 195, .25), inset 0 0 0 1px rgba(79, 240, 255, .12); }
.contents-title { color: var(--cyan); font-size: 15px; letter-spacing: .25em; text-transform: uppercase; font-family: inherit; font-weight: 700; }
.contents-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.contents-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--cyan); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 15px; }
.contents-list a:hover { background: var(--cyan); color: var(--night); }
.chapter { scroll-margin-top: 16px; }
.chapter-title { margin-bottom: 14px; font-size: clamp(26px, 4vw, 40px); color: #fff; font-style: italic; text-transform: uppercase; text-shadow: 0 0 10px rgba(255, 79, 195, .8); }
.chapter-num { margin-right: .3em; color: var(--cyan); text-shadow: 0 0 10px rgba(79, 240, 255, .8); }
.chapter-body { max-width: 66ch; }
.plate { margin: 22px 0; }
.plate img { display: block; width: 100%; border-radius: 8px; filter: saturate(1.4) hue-rotate(-20deg); box-shadow: 0 0 0 2px var(--pink), 0 0 26px rgba(255, 79, 195, .5); }
.plate figcaption { margin-top: 8px; color: var(--soft); font-size: 15px; }
.tools li::marker, .rules li::marker { color: var(--pink); }
.tools li, .rules li { margin: 6px 0; }
b, strong, dt { color: #fff; }
.note { margin: 20px 0; padding: 14px 18px; border-left: 4px solid var(--sun1); border-radius: 6px; background: rgba(255, 214, 90, .1); }
.note p { margin: 0; }
.saying { margin: 24px 0 0; color: var(--sun1); font-size: 23px; font-style: italic; }
.saying p { margin: 0; }
.saying footer { color: var(--soft); font-size: 14px; font-style: normal; }
.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: 9px 10px; border-bottom: 1px solid rgba(79, 240, 255, .3); text-align: left; vertical-align: top; }
thead th { color: var(--cyan); text-transform: uppercase; font-size: 13px; letter-spacing: .1em; }
.hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0; }
.hazard { padding: 14px 16px; border: 1px solid rgba(79, 240, 255, .4); border-radius: 10px; }
.hazard dt { color: var(--cyan); font-weight: 700; }
.hazard dd { margin: 4px 0 0; font-size: 15px; }
.glossary dt { color: var(--cyan); font-weight: 700; }
.glossary dd { margin: 0 0 10px 1.5em; }

.outfits-title { font-size: clamp(24px, 4vw, 34px); text-transform: uppercase; font-style: italic; color: #fff; }
.outfits-lede { color: var(--soft); }
.outfit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.outfit { padding: 8px 0; border-bottom: 1px solid rgba(203, 188, 240, .2); font-size: 14px; }
.outfit-link { display: inline-block; min-height: 26px; font-weight: 700; font-size: 16px; }
.outfit-by, .outfit-note { display: none; }
.outfit-technique { display: block; color: var(--soft); }
#th-nightdrive { padding: 10px 14px; border: 2px solid var(--pink); border-radius: 10px; box-shadow: 0 0 16px rgba(255, 79, 195, .6); }
#th-nightdrive .outfit-link { color: var(--pink); }
#th-nightdrive .outfit-link::after { content: " ◀ now playing"; color: var(--text); font-weight: 400; font-size: 13px; }

.site-foot { margin: 0 0 40px; padding: 16px 20px; border-radius: 12px; background: var(--glass); color: var(--soft); font-size: 14px; }
.site-foot p { margin: 4px 0; }

@media (max-width: 600px) {
  .page { padding: 0 14px; }
  .contents, .chapter, .outfits { padding: 22px 18px; }
  .title-block { padding-top: 38vh; }
}

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