/* TG story-item.css: one History archive item (/<st>/<town>/story/<id>), carried over from the live page.
   Made once (10/10) by the historic-place method (mocks/src/historic-place/make_css.py run for this page over three
   saved live item pages + the page's signed-in markup): the live TownTapestry app.css rules the item pages use, minus
   core.css and minus community.css (the page loads it: the memory thread is the post page's reply design); rules
   shared with another page file moved to core.css by tools/css_dedupe.py. Edited in place from here (generators retired
   for built pages; css_lint guards it). docs/build/history-archive.md. */
.notice{background:var(--accent-tint);border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.pd-lb{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh}
.pd-lb::backdrop{background:rgba(10,14,22,.82)}
.pd-lb img{max-width:100%;max-height:88vh;border-radius:var(--r);display:block}
.pd-lb .cmp-x{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.9)}
.si-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:12px}
.si-stage{position:relative;border-radius:18px;background:#14181f;display:grid;place-items:center;min-height:320px;padding:18px;overflow:hidden}
.si-stage>a:not(.si-step){display:block}
.si-stage img{max-width:100%;max-height:640px;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.si-yr{position:absolute;left:14px;top:14px;font-size:13px;font-weight:800;background:rgba(255,253,245,.95);color:#5c4a2e;padding:4px 11px;border-radius:999px}
.si-yr.ask{background:#f2c879;color:#4a3410}
.si-step{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.si-step svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.si-stage>a[data-pd-zoom]{cursor:zoom-in}
.si-lb{overflow:visible}
.si-lb .cmp-x{display:grid;place-items:center;color:#111;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.si-step:hover{background:rgba(255,255,255,.28)}
.si-step.l{left:12px}
.si-step.r{right:12px}
.si-id h1{font-size:32px;letter-spacing:-.035em;line-height:1.1;margin-top:8px}
.si-when{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.si-when b{font-size:20px;letter-spacing:-.02em;color:#9c6a13}
.si-pill{font-size:12px;font-weight:600;background:var(--surface);color:var(--muted);padding:3px 9px;border-radius:999px}
.si-meta{margin:14px 0 0;border-top:1px solid var(--hair)}
.si-meta>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:14px}
.si-meta dt{color:var(--muted)}
.si-meta dd{margin:0;font-weight:600;text-align:right}
.si-credit{font-size:12.5px;color:var(--faint);margin:12px 0 0}
.si-nr{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;margin-top:16px;border:1px solid #eadfca;border-radius:14px;padding:10px;background:#fbf8f2}
.si-nr:hover{border-color:#d9c9a6;box-shadow:0 4px 16px rgba(15,22,35,.06)}
.si-nr img,.si-nr .ni{width:64px;height:50px;border-radius:8px;object-fit:cover;display:grid;place-items:center;color:#b7791f;background:#fff}
.si-nr small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9c6a13}
.si-nr b{display:block;font-size:15px}
.si-nr em{font-style:normal;font-size:13px;color:var(--accent-ink);font-weight:600}
.si-decades{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.si-decades button{height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:14px;color:var(--ink-2)}
.si-decades button:hover{border-color:#b7791f;color:#9c6a13}
.si-guess{display:flex;flex-direction:column;gap:6px;max-width:520px}
.si-guess>div{display:grid;grid-template-columns:56px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:13.5px}
.si-gb{height:10px;border-radius:5px;background:#f1ece2;overflow:hidden}
.si-gb i{display:block;height:100%;background:#b7791f;border-radius:5px}
.si-mem{padding:16px 18px}
.si-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px 44px}
.si-chips .chip{cursor:pointer;border:1px solid var(--line);background:#fff}
.si-thread{margin-top:10px}
.si-retake{margin-top:28px}
.si-report{margin-top:28px;font-size:13.5px;color:var(--muted)}
.si-report summary{cursor:pointer}
.si-report form{display:flex;gap:8px;margin-top:8px;align-items:center}
.si-report select{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font:inherit}
@media (max-width:1100px){
  .si-hero{grid-template-columns:1fr}
}
@media (max-width:640px){
  .si-stage{min-height:220px;padding:10px;border-radius:14px}
  .si-stage img{max-height:420px}
  .si-id h1{font-size:25px}
  .si-decades{grid-template-columns:repeat(4,minmax(0,1fr))}
  .si-step{width:36px;height:36px}
  .si-step svg{width:19px;height:19px}
  .si-chips{margin-left:0}
}