:root{
  --bg: #000;
  --fg: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.48);
  --sun: #ff7a1a;

  --gap: clamp(6px, 1vw, 10px);
  --label: 24px;

  --h-day: 30px;
  --h-day-m: 26px;

  --year-cols: 37;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body{
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.desktop-warning{
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  z-index: 9999;
}

.year-wrap{
  width: 100vw;
  height: 100dvh;
  display: flex;
}

.calendar-panel{
  width: 100%;
  height: 100%;
  background: #000;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.header{
  width: 100%;
  font-size: clamp(90px, 7vw, 110px);
  font-weight: 800;
  text-align: right;
  line-height: 1;
  margin-bottom: 130px;
  align-self: flex-end;
}

.calendar-panel{
  --cell: calc(
    (100% - (2 * 10px) - var(--label) - ((var(--year-cols) - 1) * var(--gap)))
    / var(--year-cols)
  );
}

.months{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  padding: 6px 10px 0;
}

.dow-row{
  display: grid;
  grid-template-columns: var(--label) repeat(var(--year-cols), var(--cell));
  gap: var(--gap);
  padding: 0;
  margin: 0;
}

.spacer{
  opacity: 0;
}

.dow{
  font-size: clamp(12px, 1vw, 14px);
  color: var(--muted);
  letter-spacing: .06em;
  text-align: center;
  user-select: none;
}

.month-row{
  display: grid;
  grid-template-columns: var(--label) repeat(var(--year-cols), var(--cell));
  gap: var(--gap);
  align-items: center;
  min-height: 0;
}

.month-label{
  height: var(--h-day);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--muted);
  letter-spacing: .06em;
  user-select: none;
}

.day{
  position: relative;
  height: var(--h-day);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-size: clamp(18px, 1vw, 24px);
  color: var(--fg);
}

.day.sun{
  color: var(--sun);
}

.day.pad{
  opacity: 0;
  pointer-events: none;
}

.day.today{
  color: #000;
  font-weight: 500;
  background: transparent;
  z-index: 1;
}

.day.today::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: var(--h-day);
  height: var(--h-day);
  background: var(--sun);
  border-radius: 50%;
  z-index: -1;
}

.day.today:hover{
  background: transparent;
}

@media (max-width: 1149px), (max-height: 599px){
  .desktop-warning{
    display: flex;
  }

  .year-wrap{
    display: none;
  }
}