/* Page styles for history.html — the combined illustrated chronicle of Sneekie.
   Consolidates the look of the former making-of pages (cinematic raster figures,
   hand-drawn SVG comic panels, chapter bands, pull quotes). */
.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 (1200x676 webp) */
.page-history .story-figure{ margin:28px 0 32px; }
.page-history .story-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200 / 676;
  object-fit:cover;
  border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius:10px;
  background:#050607;
  box-shadow:0 20px 52px -32px rgba(0,0,0,.95);
}
.page-history .hero-figure{ margin-top:22px; }
/* square AI illustrations (1024x1024 png) */
.page-history .story-figure.square{ display:flex; flex-direction:column; align-items:center; }
.page-history .story-figure.square img{
  width:100%;
  max-width:460px;
  aspect-ratio:1 / 1;
}
.page-history .story-figure figcaption{
  margin-top:9px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  text-align:center;
}
.page-history .story-figure figcaption b{ color:var(--heading); }

/* hand-drawn inline-SVG comic panels (480x300) */
.page-history .panel-fig{
  max-width:560px;
  margin:26px auto 30px;
  padding:14px 14px 0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 18px 40px -28px #000;
}
.page-history .panel-fig.wide{ max-width:680px; }
.page-history .panel-fig svg{
  display:block;
  width:100%;
  height:auto;
  background:var(--codebg);
  border:1px solid var(--border);
  border-radius:8px;
}
.page-history .panel-fig figcaption{
  padding:11px 6px 14px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.page-history .panel-fig figcaption b{ color:var(--heading); }

/* chapter band */
.page-history .story-band{
  position:relative;
  margin:34px 0;
  padding:0 0 0 22px;
  border-left:3px solid color-mix(in srgb, var(--annot) 72%, var(--border));
}
.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; }

/* pull quote */
.page-history .story-pull{
  max-width:860px;
  margin:34px auto;
  padding:22px 26px;
  color:#f8ffd2;
  background:linear-gradient(135deg, rgba(227,168,87,.16), rgba(121,192,255,.09));
  border:1px solid color-mix(in srgb, var(--annot) 42%, var(--border));
  border-left:4px solid var(--annot);
  border-radius:8px;
  font:700 23px/1.35 Georgia, "Times New Roman", serif;
}

/* 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{
  margin:42px 0 0;
  padding:24px 26px;
  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;
}
.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{ padding-left:16px; }
  .page-history .story-band h2,
  .page-history .story-ending h2{ font-size:21px; }
  .page-history .story-pull{ padding:18px 20px; font-size:21px; }
}
@media (max-width:520px){
  .page-history .kicker{ text-align:left; }
  .page-history .story-figure{ margin:22px -2px 26px; }
  .page-history .panel-fig{ margin:20px auto 24px; padding:10px 10px 0; }
  .page-history .story-ending,
  .page-history .story-pull{ margin-left:0; margin-right:0; }
  .page-history .story-links{ display:grid; grid-template-columns:1fr; }
}
@media print{
  .page-history .story-figure img,
  .page-history .panel-fig,
  .page-history .story-pull,
  .page-history .story-ending{ box-shadow:none; }
}