/* Factsimilar semantic press. The HTML is useful before this stylesheet or
   JavaScript arrives; CSS preserves the approved desktop instrument and mobile
   one-image stream without hiding a second copy of the page. */
:root { --ink:#1a1a1a; --grey:#8a8a8a; --hair:#d9d9d9; --paper:#fff; }
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  background:var(--paper); color:var(--ink);
  font-family:"Futura","Avenir Next","Century Gothic","Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.45; overflow:hidden;
}
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.clk, a, button { cursor:pointer; }
#app { display:flex; height:100vh; }

#rail {
  width:236px; flex:0 0 236px; border-right:1px solid var(--hair);
  display:flex; flex-direction:column;
}
.wordmark {
  display:block; font-weight:700; letter-spacing:.26em; font-size:14px;
  padding:24px 20px 6px;
}
.wordmark .wm2 { color:var(--grey); }
.strap {
  color:var(--grey); font-size:10.5px; letter-spacing:.08em;
  padding:0 20px 16px;
}
#searchbox { margin:0 20px 14px; }
#q {
  width:100%; border:none; border-bottom:1px solid var(--hair); background:none;
  font:inherit; font-size:12.5px; letter-spacing:.06em; color:var(--ink);
  padding:4px 0; outline:none;
}
#q:focus { border-bottom-color:var(--ink); }
#q::placeholder { color:var(--hair); letter-spacing:.14em; }
#register {
  overflow-y:auto; flex:1; padding:8px 0 10px;
  border-top:1px solid var(--hair);
}
.rrow {
  display:flex; align-items:center; gap:12px; padding:7px 20px;
}
.rrow:hover .rcap { color:var(--ink); }
.rrow .rfrag {
  width:46px; height:46px; flex:0 0 46px; background-repeat:no-repeat;
  outline:1px solid var(--hair); filter:grayscale(12%);
}
.rrow.active .rfrag { outline-color:var(--ink); }
.rrow .rcap {
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--grey);
}
.rrow.active .rcap { color:var(--ink); }
.rrow.all { padding-top:12px; padding-bottom:12px; }
.rrow.all .rcap { letter-spacing:.16em; }

#stage { flex:1; overflow-y:auto; padding:22px 28px 40px; }
#routecontext {
  display:flex; justify-content:space-between; align-items:baseline;
  color:var(--grey); font-size:12px; letter-spacing:.06em;
}
#routecontext h1 {
  color:var(--ink); font-size:12px; font-weight:400; letter-spacing:.06em;
}
.stagebar {
  display:flex; justify-content:flex-end; align-items:baseline;
  color:var(--grey); font-size:12px; letter-spacing:.06em;
}
.leafctl { display:flex; align-items:baseline; gap:14px; }
.leafctl .turn {
  color:var(--ink); border:0; border-bottom:1px solid var(--ink);
  background:none; line-height:1.25;
}
.leafctl a.turn { display:inline-block; }
#scopes {
  color:var(--grey); font-size:12px; letter-spacing:.06em; margin-top:8px;
}
#scopes .sc { margin-right:16px; border-bottom:1px solid transparent; }
#scopes .sc:hover { color:var(--ink); }
#scopes .sc.on { color:var(--ink); border-bottom-color:var(--ink); }
.wall { columns:4 180px; column-gap:14px; margin-top:16px; }
.tile { break-inside:avoid; margin-bottom:14px; }
.tilelink { display:block; }
.tile img {
  width:100%; height:auto; display:block; outline:1px solid var(--hair);
}
.tile:hover img { outline-color:var(--grey); }
.tile .why {
  color:var(--grey); font-size:10.5px; line-height:1.4; margin-top:5px;
  letter-spacing:.02em;
}
.feedfacts { display:none; }
.stagefoot {
  border-top:1px solid var(--hair); margin-top:26px; padding-top:12px;
}
#plateview { display:none; padding-top:8px; }
body.item-view #plateview, body.credits-view #plateview { display:block; }
#plateview img {
  max-width:100%; width:auto; height:auto; max-height:82vh; display:block;
  margin:0 auto; outline:1px solid var(--hair);
}
#plateview img + img { margin-top:18px; }
.credits { max-width:460px; margin:6vh auto 0; }
.credits h1 {
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey); font-weight:400; margin-bottom:18px;
}
.credits .src {
  display:flex; justify-content:space-between; padding:9px 0;
  border-bottom:1px solid var(--hair);
}
.credits .src:hover .srcname {
  color:var(--ink); border-bottom:1px solid var(--ink);
}
.credits .srcname, .credits .src .n { color:var(--grey); }
.credits .pd {
  margin-top:22px; color:var(--grey); font-size:12px; letter-spacing:.05em;
}

#panel {
  width:300px; flex:0 0 300px; border-left:1px solid var(--hair);
  display:flex; flex-direction:column;
}
#panelbody { flex:1; overflow-y:auto; padding:24px 22px; }
.setcard .sname { font-size:14.5px; }
.setcard .scount { color:var(--grey); margin-top:6px; }
.card h1, .card .l1 { font-size:14.5px; font-weight:400; }
.card h1 .qual, .card .l1 .qual { color:var(--grey); }
.card .l2 { margin-top:10px; }
.card .door-w { border-bottom:1px solid var(--hair); }
.card .door-w:hover { border-bottom-color:var(--ink); }
.card .supplied { color:var(--grey); }
.card .l3, .card .l4 {
  margin-top:8px; color:var(--grey); font-size:13px;
}
.card .l3 .mode-w {
  color:var(--ink); border-bottom:1px solid var(--hair);
}
.card .l3 .mode-w:hover { border-bottom-color:var(--ink); }
.gallerygrid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:30px 22px; padding-top:18px;
}
.gallerycard a { display:grid; grid-template-columns:1fr auto; gap:9px 14px; }
.gallerycard img {
  grid-column:1 / -1; width:100%; height:300px; object-fit:contain;
  background:var(--paper); outline:1px solid var(--hair);
}
.gallerycard .gtitle { font-size:13px; line-height:1.4; }
.gallerycard .gcount { color:var(--grey); font-size:12px; }
.platenav {
  font-size:11px; letter-spacing:.1em; color:var(--grey);
  display:flex; justify-content:space-between;
}
.platenav.top {
  margin:0 0 22px; padding:0 0 12px; border-bottom:1px solid var(--hair);
}
.platenav .act {
  color:var(--ink); border:0; border-bottom:1px solid var(--ink);
  background:none;
}
#paneldl { padding:12px 22px 0; border-top:1px solid var(--hair); }
#paneldl:empty { display:none; border:none; }
#paneldl .dl {
  display:flex; justify-content:space-between; padding:4px 0;
  font-size:11px; letter-spacing:.1em;
}
#paneldl .dl .lbl {
  color:var(--ink); text-transform:uppercase; border-bottom:1px solid var(--hair);
}
#paneldl .dl .px { color:var(--grey); }
#panelfoot { padding:14px 22px 20px; text-align:right; }
#panelfoot .cr {
  color:var(--grey); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; border-bottom:1px solid transparent;
}
#panelfoot .cr:hover { color:var(--ink); border-bottom-color:var(--ink); }

@media (max-width:760px) {
  html,body { height:auto; min-height:100%; }
  body { overflow:auto; -webkit-text-size-adjust:100%; }
  #app { display:block; height:auto; min-height:100svh; }

  #rail {
    position:sticky; top:0; z-index:10;
    width:100%; height:auto; border-right:0; border-bottom:1px solid var(--hair);
    display:grid; grid-template-columns:auto minmax(112px,1fr);
    align-items:end; background:rgba(255,255,255,.97);
  }
  .wordmark { padding:14px 14px 10px; font-size:13px; }
  .strap { display:none; }
  #searchbox { margin:0 14px 10px; }
  #q { min-height:32px; font-size:16px; padding:5px 0; }
  #register {
    grid-column:1 / -1; display:flex; flex-direction:row; overflow-x:auto;
    overscroll-behavior-x:contain; border-top:1px solid var(--hair);
    padding:0; scrollbar-width:none;
  }
  #register::-webkit-scrollbar { display:none; }
  .rrow {
    min-height:44px; flex:0 0 auto; gap:0; padding:9px 12px;
    border-right:1px solid var(--hair);
  }
  .rrow:last-child { border-right:0; }
  .rrow .rfrag { display:none; }
  .rrow .rcap { font-size:9.5px; white-space:nowrap; }
  .rrow.all { padding:9px 12px; }

  #stage { width:100%; overflow:visible; padding:12px 10px 26px; }
  #routecontext {
    gap:16px; padding:1px 2px 10px; font-size:11px;
  }
  #routecontext h1 {
    min-width:0; overflow:hidden; font-size:12px; text-overflow:ellipsis;
    white-space:nowrap;
  }
  .stagebar { font-size:11px; }
  #scopes {
    display:flex; gap:16px; overflow-x:auto; margin:0 -2px;
    padding:0 2px 8px; white-space:nowrap; scrollbar-width:none;
  }
  #scopes::-webkit-scrollbar { display:none; }
  #scopes .sc { min-height:36px; margin:0; padding-top:8px; }
  .wall { columns:2; column-gap:8px; margin-top:8px; }
  .tile { margin-bottom:8px; }
  .tile .why { font-size:10px; margin:4px 1px 0; }
  body.feed-view .wall {
    columns:1; max-width:560px; margin:8px auto 0;
  }
  body.feed-view .tile {
    margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--hair);
  }
  body.feed-view .tile img { outline:0; cursor:pointer; }
  body.feed-view .feedfacts { display:block; padding:12px 2px 0; }
  body.feed-view .tile.feed-pending { display:none; }
  .feedfacts .ftitle { font-size:16px; line-height:1.38; }
  .feedfacts .fcreator { margin-top:6px; color:var(--ink); font-size:13px; }
  .feedfacts .fqual, .feedfacts .fsource, .feedfacts .fdetail {
    margin-top:4px; color:var(--grey); font-size:12px; line-height:1.4;
  }
  .feedfacts .fdetail:first-of-type { margin-top:9px; }
  .feedfacts .feedlink {
    color:inherit; border-bottom:1px solid var(--hair);
  }
  .feedfacts .feedlink:hover {
    color:var(--ink); border-bottom-color:var(--ink);
  }
  .tile.expanded .feedfacts {
    margin-top:10px; padding-top:14px; border-top:1px solid var(--hair);
  }
  body.feed-view .leafctl, body.feed-view .stagefoot { display:none; }
  #feedmore { height:40vh; min-height:180px; }
  .stagefoot { margin-top:20px; }

  #panel {
    display:none; width:100%; border-left:0; border-top:1px solid var(--hair);
  }
  body.item-view #panel { display:block; }
  body.item-view #stage { padding-bottom:14px; }
  #panelbody { overflow:visible; padding:18px 14px 12px; }
  #paneldl, #panelfoot { display:none; }
  #plateview { padding-top:0; }
  #plateview img { width:auto; max-width:100%; max-height:none; }
  .platenav.top { margin-bottom:16px; padding-bottom:12px; }
  .card h1, .card .l1 { font-size:16px; line-height:1.4; }
  .card .l2, .card .l3, .card .l4 { line-height:1.5; }
  .credits { margin:20px auto 0; }
  .gallerygrid { grid-template-columns:1fr; gap:34px; padding:10px 2px 0; }
  .gallerycard img { height:auto; max-height:none; }
  .credits .src { min-height:44px; align-items:center; }
}

@media (max-width:340px) { .wall { columns:1; } }