/* Blog page specific styles (uses variables from common.css) */
:root{
  --sheet-w: clamp(260px, 34vw, 520px);
  --sheet-h: clamp(160px, 22vw, 300px);
  --sheet-r: 18px;
}

/* Article stack graphic */
.article-stack{
  position: relative;
  width: var(--sheet-w);
  height: calc(var(--sheet-h) * 1.35);
  isolation: isolate;
  filter: drop-shadow(0 20px 30px rgba(15,23,42,.12));
  perspective: 1000px;
}

/* Each sheet */
.sheet{
  position: absolute; left: 0; right: 0; margin: 0 auto;
  width: 100%; height: var(--sheet-h); border-radius: var(--sheet-r);
  background: linear-gradient(145deg, var(--surface), #ffffff);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Header bar and content lines inside each sheet */
.sheet .bar{
  height: 28px;
  background: linear-gradient(90deg, rgba(14,107,168,.18), rgba(14,107,168,.08));
}
.sheet .lines{
  position: absolute; inset: 40px 16px 14px 16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0 1px, transparent 1px 24px);
  background-size: 100% 24px;
  opacity: .6;
}

/* Stacking & subtle depth */
.s1{ transform: translateY(6%)  rotateX(6deg) rotateZ(-2deg); z-index: 3; }
.s2{ transform: translateY(16%) rotateX(6deg) rotateZ( 1deg) scale(.98); z-index: 2; }
.s3{ transform: translateY(26%) rotateX(6deg) rotateZ(-1deg) scale(.96); z-index: 1; }

/* Floating animation (very gentle) */
@keyframes floatUpDown{
  0%,100%{ transform: translateY(6%)  rotateX(6deg) rotateZ(-2deg); }
  50%    { transform: translateY(2%)  rotateX(6deg) rotateZ(-2deg); }
}
.s1{ animation: floatUpDown 8s ease-in-out infinite; }

/* Typing caret */
.caret{
  position: absolute;
  left: 28px;
  top: calc(40px + 24px*1.3);  /* sits on a “line” */
  width: 16px; height: 22px;
  border-left: 3px solid var(--brand);
  filter: drop-shadow(0 0 6px rgba(14,107,168,.35));
  animation: blink 1.1s steps(1) infinite;
  z-index: 4;
}
@keyframes blink{ 50%{ opacity: 0; } }

/* RSS “broadcast” waves */
.rss{
  position: absolute; right: -6%; top: -6%;
  width: 40%; height: 40%; border-radius: 50%;
  pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at 30% 30%, rgba(14,107,168,.25), transparent 60%);
  opacity: .75;
}
.r1{ animation: rssPulse 3.6s ease-in-out infinite; }
.r2{ animation: rssPulse 4.6s ease-in-out infinite .4s; filter: blur(1px); }

@keyframes rssPulse{
  0%  { transform: scale(.9);   opacity:.6; }
  50% { transform: scale(1.08); opacity:.95; }
  100%{ transform: scale(.9);   opacity:.6; }
}

/* Mobile tweaks — your hero-grid already stacks on small screens */
@media (max-width: 900px){
  .article-stack{ width: min(520px, 88vw); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .s1, .caret, .r1, .r2{ animation: none !important; }
}
/* Typing line (sits on a ruled line inside the top sheet) */
.type-line{
  position:absolute;
  left: 28px;
  top: calc(40px + 24px*1.3); /* matches your line grid in .lines */
  right: 16px;
  font: 600 15px/22px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  z-index: 4;
}

/* Blinking caret at the end of typed text */
.type-line::after{
  content:"";
  display:inline-block;
  width: 10px; height: 18px;
  margin-left: 6px;
  border-left: 3px solid var(--brand);
  filter: drop-shadow(0 0 6px rgba(14,107,168,.35));
  animation: blink 1.05s steps(1) infinite;
  vertical-align: -3px;
}

/* Hide the old caret if still in markup */
.caret{ display:none; }