/* Page styles for history.html — the illustrated chronicle of Sneekie. */
.page-history main{ max-width:1080px; }

.page-history .kicker{
  max-width:none;
  margin:18px 0 0;
  color:var(--annot);
  font:700 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}
.page-history .lead{
  max-width:820px;
  margin:2px auto 8px;
  color:#d6ded8;
  font-size:18px;
  line-height:1.65;
  text-align:center;
}

/* full-width cinematic figures, cropped shorter with per-image focal points */

.page-history .paragraph-figure{
  max-width:860px;
  margin:16px auto 24px;
}
.page-history .paragraph-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200 / 540;
  object-fit:cover;
  object-position:center var(--history-image-y, 50%);
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius:8px;
  background:#050607;
  box-shadow:0 14px 38px -28px rgba(0,0,0,.95);
}
.page-history img[src*="history-01-summer-start"]{ --history-image-y:44%; }
.page-history img[src*="history-02-sunrise-snake"]{ --history-image-y:32%; }
.page-history img[src*="history-03-screen-world"]{ --history-image-y:46%; }
.page-history img[src*="history-04-poke-bytes"]{ --history-image-y:46%; }
.page-history img[src*="history-06-steady-nerve"]{ --history-image-y:57%; }
.page-history img[src*="history-11-magazine-print"]{ --history-image-y:56%; }
.page-history img[src*="history-12-paper-release"]{ --history-image-y:54%; }
.page-history img[src*="history-15-long-vigil"]{ --history-image-y:58%; }
.page-history img[src*="history-16-sleeping-dragon"]{ --history-image-y:60%; }
.page-history img[src*="history-17-ocr-recovery"]{ --history-image-y:36%; }
.page-history img[src*="history-18-zero-o-war"]{ --history-image-y:46%; }
.page-history img[src*="history-22-snake-eternal"]{ --history-image-y:46%; }
/* chapter band */
.page-history .story-band{
  position:relative;
  --story-indent:25px;
  max-width:860px;
  margin:48px auto;
  padding:0 0 0 22px;
  border-left:3px solid color-mix(in srgb, var(--annot) 72%, var(--border));
  box-sizing:border-box;
}
.page-history .story-band .paragraph-figure{
  width:calc(100% + var(--story-indent));
  max-width:none;
  margin-left:calc(-1 * var(--story-indent));
  margin-right:0;
}
.page-history .story-band::before{
  content:"";
  position:absolute; top:0; left:0;
  width:100%; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--annot) 44%, transparent), transparent 64%);
}
.page-history .story-band h2,
.page-history .story-ending h2{
  max-width:860px;
  margin:0 0 10px;
  padding:0;
  border:0;
  color:#f2f7c1;
  font-size:24px;
  line-height:1.2;
}
.page-history .story-band p,
.page-history .story-ending p{
  max-width:860px;
  font-size:16px;
  line-height:1.72;
}
.page-history .story-band p:first-of-type{ margin-top:0; }

/* finale band accent + ending card */
.page-history .finale{ border-left-color:color-mix(in srgb, var(--blue) 72%, var(--border)); }
.page-history .finale::before{ background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 44%, transparent), transparent 64%); }
.page-history .story-ending{
  max-width:860px;
  margin:42px auto 0;
  padding:24px 0;
  background:linear-gradient(135deg, rgba(125,255,125,.1), rgba(227,168,87,.12), rgba(121,192,255,.08));
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius:10px;
  box-sizing:border-box;
}
.page-history .story-ending h2,
.page-history .story-ending p{
  padding-left:26px;
  padding-right:26px;
}
.page-history .story-ending .paragraph-figure{
  width:calc(100% + 2px);
  max-width:none;
  margin-left:-1px;
  margin-right:-1px;
}
.page-history .story-ending h2{ color:#d7ffdb; }
.page-history .story-links{
  display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0;
}
.page-history .story-links a{
  display:inline-flex; align-items:center; min-height:38px;
  padding:8px 12px;
  color:#e8ffe8;
  background:rgba(22,24,27,.78);
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius:5px;
  font:700 13px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-decoration:none;
}
.page-history .story-links a:hover{ color:#fff; border-color:var(--accent); box-shadow:0 0 16px -8px var(--accent); text-decoration:none; }

@media (max-width:720px){
  .page-history .lead{ font-size:16px; text-align:left; }
  .page-history .story-band{ --story-indent:19px; margin:40px auto; padding-left:16px; }
  .page-history .story-band h2,
  .page-history .story-ending h2{ font-size:21px; }
}
@media (max-width:520px){
  .page-history .kicker{ text-align:left; }
  .page-history .story-ending{ margin-left:0; margin-right:0; }
  .page-history .story-links{ display:grid; grid-template-columns:1fr; }
}
@media print{
  .page-history .paragraph-figure img,
  .page-history .story-ending{ box-shadow:none; }
}