/* Timestripe — Lite v8 */
/* Base: v7 + top progress bar */
:root{
  --bg:#fff; --fg:#111; --muted:#777;
  --strike:#000;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Liberation Sans', Arial, 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}

/* ===== Minute progress bar ===== */
.minute-progress{
  position:fixed;
  top:0; left:0; height:4px;
  background:linear-gradient(90deg, #000 0%, #333 50%, #000 100%);
  box-shadow:0 0 6px rgba(0,0,0,0.35);
  animation: minuteProgress 60s linear infinite;
  z-index:9999;
  border-radius:0 2px 2px 0;
}
@keyframes minuteProgress{
  0%{width:0}
  100%{width:100%}
}

.page{max-width:1100px; margin:28px auto 48px; padding:0 16px}
.top .logo{font-size:20px;margin:0 0 4px}
.top .subtitle{margin:0 0 12px; color:var(--muted)}

/* ===== YEARS ===== */
.years{
  position:relative;
  display:flex; flex-wrap:wrap; gap:10px 18px;
  padding:12px 0 20px;
  border-bottom:1px solid #e6e6e6;
  overflow:hidden;
  /* fade top and bottom */
  mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,1) 75%,
    rgba(0,0,0,0.15) 92%,
    rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,1) 75%,
    rgba(0,0,0,0.15) 92%,
    rgba(0,0,0,0) 100%);
}
.year{
  font-size:18px;
  color:#222;
  white-space:nowrap;
}
.year.past{
  color:#333;
  text-decoration-line: line-through;
  text-decoration-color: var(--strike);
  text-decoration-thickness: 2px;
  text-decoration-style: solid;
}
.year.current{ color:#000; font-weight:700; background: yellow; }
.year.future{ color:#222; opacity:.85 }

/* ===== CALENDAR ===== */
.calendar{ padding:20px 0 10px }
.calendar h2{ margin:10px 0 14px; font-size:18px }

.months{
  position:relative;
  display:flex; flex-direction:column; gap:12px;
  /* Bottom fade for calendar block */
  mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,0.35) 88%, rgba(0,0,0,0.2) 96%, rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0,0,0,0.35) 88%, rgba(0,0,0,0.2) 96%, rgba(0,0,0,0));
}
.month{
  display:grid;
  grid-template-columns: 48px repeat(31, minmax(18px, 1fr));
  gap:6px; align-items:center;
}
.name{
  font-weight:700; font-size:12px; color:#444; text-align:right; padding-right:6px;
}
.name.crossed{
  text-decoration-line: line-through;
  text-decoration-color: var(--strike);
  text-decoration-thickness: 2px;
  text-decoration-style: solid;
}

.day{
  text-align:center;
  font-size:12px;
  padding:3px 0;
  color:#333;
}
.day.crossed{
  text-decoration-line: line-through;
  text-decoration-color: var(--strike);
  text-decoration-thickness: 2px;
  text-decoration-style: solid;
}
.day.today{ font-weight:800; background: yellow }

.foot{ margin-top:28px; color:#fff; font-size:18px; padding-bottom: 15px; background: #000; padding-top: 15px; }