/* Payless home page progression.
   The chrome borrows the history site's palette so the exhibit does not look like a visitor
   from somewhere else, and then gets out of the way: twelve screenshots are the content and
   everything here exists to date them, size them and say what changed. */
:root{
  --bg:#0d0f1a; --panel:#161830; --surface:#1e2140; --rail:#12142a;
  --text:#f5f5f8; --muted:#a0a0b0; --dim:#7a7a8c; --line:#2a2d4a;
  --accent:#00e5ff; --warn:#ffe600;
  --sans:Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.6 var(--sans);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- masthead ---------- */
.top{border-bottom:1px solid var(--line);background:
  radial-gradient(1200px 300px at 18% -60%,rgba(0,229,255,.10),transparent 70%),var(--panel)}
.top .wrap{padding-top:46px;padding-bottom:34px}
.eyebrow{
  margin:0 0 12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
h1{margin:0;font-size:clamp(26px,4.6vw,40px);line-height:1.12;font-weight:700;letter-spacing:-.01em}
.stand{margin:16px 0 0;max-width:62ch;font-size:16px;line-height:1.7;color:var(--text)}
.stand + .stand{margin-top:12px;color:var(--muted);font-size:15px}

.facts{
  display:flex;flex-wrap:wrap;gap:10px 30px;margin:26px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--line);padding-top:20px;
}
.facts li{min-width:108px}
.facts b{display:block;font-size:22px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.facts span{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-top:4px}

/* ---------- year jump strip ---------- */
.jump{position:sticky;top:0;z-index:5;background:rgba(13,15,26,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:9px;padding-bottom:9px;
  scrollbar-width:thin}
.jump a{
  flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.04em;text-decoration:none;
  color:var(--muted);border:1px solid var(--line);border-radius:9999px;padding:4px 11px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.jump a:hover{color:var(--text);border-color:var(--accent)}

/* ---------- the reel ---------- */
.reel{padding:0 0 10px}

.beat{
  margin:52px 0;padding:22px 24px;border-left:3px solid var(--accent);background:var(--surface);
  border-radius:0 10px 10px 0;
}
.beat.quiet{border-left-color:var(--line)}
.beat.gap{border-left-color:var(--warn)}
.beat h2{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:.01em}
.beat p{margin:0;max-width:74ch;font-size:14.5px;color:var(--muted)}

.era{margin:0 0 56px;display:grid;gap:22px;grid-template-columns:1fr;
  scroll-margin-top:58px}
.era:target .plate{box-shadow:0 0 0 2px var(--accent)}

.said{min-width:0}
.date{
  display:inline-block;font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--bg);background:var(--accent);padding:6px 10px;border-radius:4px;
}
.era h2{margin:14px 0 8px;font-size:21px;line-height:1.25;font-weight:700}
.said p{margin:0;font-size:15px;line-height:1.66;color:var(--text);max-width:52ch}
.prov{
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:var(--dim);max-width:52ch;
}
.prov b{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.prov a{color:var(--muted)}

/* the screenshot, in a plate that reads as a browser without pretending to be one */
.plate{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  min-width:0}
.bar{
  display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--rail);
  border-bottom:1px solid var(--line);
}
.dots{display:flex;gap:5px;flex:0 0 auto}
.dots i{width:9px;height:9px;border-radius:9999px;background:var(--line);display:block}
.addr{
  font:12px/1 var(--mono);color:var(--dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;
}
.win{position:relative;background:#fff}
.win img{display:block;width:100%;height:auto}
.win.clip{max-height:min(76vh,760px);overflow:hidden}
.win.clip::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.96));
}
.more{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:9px 12px;background:var(--rail);border-top:1px solid var(--line);
}
.more button{
  appearance:none;font:600 12.5px/1 var(--sans);color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:7px 13px;cursor:pointer;
}
.more button:hover{border-color:var(--accent)}
.more .size{font:11.5px/1 var(--mono);color:var(--dim)}
.more a{font-size:12.5px;text-decoration:none;font-weight:600}
.more a:hover{text-decoration:underline}

/* ---------- closing notes ---------- */
.notes{border-top:1px solid var(--line);background:var(--panel);margin-top:20px}
.notes .wrap{padding-top:40px;padding-bottom:56px}
.notes h2{margin:0 0 18px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.notes h3{margin:26px 0 7px;font-size:15px;font-weight:700}
.notes p,.notes li{font-size:14px;line-height:1.7;color:var(--muted);max-width:76ch}
.notes p{margin:0 0 10px}
.notes ul{margin:0 0 10px;padding-left:20px}
.notes li{margin:0 0 5px}
.notes code{font:12.5px/1.4 var(--mono);color:var(--text)}

/* ---------- full size viewer ----------
   The exhibit runs inside a sandboxed frame that is not allowed to open new windows, so a
   full size picture has to open in place. With scripting off the same link is an ordinary
   link to the file and this never appears. */
.lightbox{
  position:fixed;inset:0;z-index:50;display:none;flex-direction:column;
  background:rgba(6,7,14,.97);
}
.lightbox.on{display:flex}
.lb-bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);
}
.lb-when{font:12px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.lb-bar button{
  appearance:none;font:600 13px/1 var(--sans);color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:8px 15px;cursor:pointer;
}
.lb-bar button:hover{border-color:var(--accent)}
.lb-scroll{flex:1 1 auto;overflow:auto;padding:18px;text-align:center}
.lb-scroll img{max-width:none;background:#fff;box-shadow:0 18px 50px -18px #000}

/* ---------- wider than a phone ---------- */
@media (min-width:880px){
  .era{grid-template-columns:320px minmax(0,1fr);gap:34px;align-items:start;margin-bottom:76px}
  .said{position:sticky;top:64px}
  .beat{margin:72px 0}
  /* the sourcing notes take the same rail and column as the frames above them, so the page
     keeps one spine from top to bottom instead of reflowing at the end */
  .notes .wrap{display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:34px;
    align-items:start}
  .notes h2{position:sticky;top:64px;margin:0}
}
@media (max-width:879px){
  .win.clip{max-height:560px}
  .era h2{font-size:19px}
}

/* Past about a thousand pixels the standfirst stops before the right edge and leaves a hole,
   so the counts move up beside it and close the masthead off. */
@media (min-width:1040px){
  .top .wrap{display:grid;grid-template-columns:minmax(0,1fr) 216px;column-gap:52px;
    align-items:start}
  .top .wrap > :not(.facts){grid-column:1}
  .facts{
    grid-column:2;grid-row:1 / span 5;align-self:stretch;
    flex-direction:column;gap:22px;margin:4px 0 0;padding:2px 0 2px 28px;
    border-top:none;border-left:1px solid var(--line);
  }
  .facts li{min-width:0}
}

/* ------------------------------------------------------------------ AOR additions
   Two things happen in this run that the Payless progression never had to show.

   One, a frame where the artifact did not survive. The rim sheet this whole system grew
   out of has not been recovered, and the live system cannot be photographed because real
   customer records are on every screen of it. Those frames get a hole where the picture
   goes, not a stand in.

   Two, a frame whose evidence is a column list rather than a screenshot. The argument the
   page is making is about which columns describe a wheel, so where a real file survives and
   the application around it does not, the columns themselves are the exhibit. They are drawn
   as data, deliberately unlike a browser window, so nobody can mistake one for the other. */

.hole{
  border:2px dashed var(--line);border-radius:10px;background:
    repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.017) 10px 20px),
    var(--surface);
  padding:30px 26px;min-height:240px;display:flex;flex-direction:column;justify-content:center;
}
.hole .mark{
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--warn);
  margin:0 0 12px;
}
.era.gone .hole .mark{color:var(--warn)}
.era.live .hole{border-style:solid;border-color:var(--accent)}
.era.live .hole .mark{color:var(--accent)}
.hole h3{margin:0 0 10px;font-size:19px;line-height:1.3;font-weight:700}
.hole p{margin:0 0 10px;font-size:14.5px;line-height:1.66;color:var(--muted);max-width:60ch}
.hole p:last-child{margin-bottom:0}
.hole .drop{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font:12.5px/1.6 var(--sans);color:var(--dim);max-width:60ch;
}

/* the column list, drawn as a file rather than as a window */
.plate.sheet{background:var(--rail)}
.plate.sheet .bar{background:var(--panel)}
.plate.sheet .bar .file{
  font:12px/1 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;
}
.cols{padding:16px 14px;display:flex;flex-wrap:wrap;gap:6px}
.cols span{
  font:12px/1 var(--mono);color:var(--text);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:6px 9px;white-space:nowrap;
}
.cols span.n{color:var(--dim);background:transparent;border-color:transparent;padding-left:0}
.sheetfoot{
  padding:10px 14px;border-top:1px solid var(--line);background:var(--panel);
  font:12px/1.55 var(--sans);color:var(--dim);
}
.sheetfoot b{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* a frame that links into a running exhibit */
.open{
  display:inline-block;margin-top:14px;font:600 13px/1 var(--sans);text-decoration:none;
  color:var(--bg);background:var(--accent);border-radius:6px;padding:10px 15px;
}
.open:hover{filter:brightness(1.12)}