:root{
  --calendar-launch-brass:#e2b969;
}

.header-calendar-launch{
  position:absolute;
  top:calc(var(--safe-top) + 42px);
  right:18px;
  z-index:7;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin:0;
  padding:0;
  transform:translateY(-50%);
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--calendar-launch-brass);
  box-shadow:none;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.header-calendar-glyph{
  position:relative;
  display:grid;
  grid-template-rows:15px minmax(0,1fr);
  width:38px;
  height:44px;
  color:inherit;
  border:1.15px solid currentColor;
  border-radius:7px;
  background:transparent;
  box-shadow:0 0 7px rgba(226,185,105,.12);
  transition:transform .16s ease,filter .16s ease;
}

.header-calendar-glyph::after{
  content:"";
  position:absolute;
  top:15px;
  right:0;
  left:0;
  height:1px;
  background:currentColor;
}

.header-calendar-pin{
  position:absolute;
  top:-5px;
  z-index:2;
  width:1.5px;
  height:10px;
  border-radius:999px;
  background:currentColor;
}

.header-calendar-pin:first-child{left:7px}
.header-calendar-pin:nth-child(2){right:7px}

.header-calendar-month,
.header-calendar-day{
  display:grid;
  place-items:center;
  color:inherit;
  font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  line-height:1;
}

.header-calendar-month{
  z-index:1;
  padding-top:1px;
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.08em;
  text-indent:.08em;
}

.header-calendar-day{
  padding:0;
  font-size:1.42rem;
  font-weight:900;
  text-shadow:0 1px 4px rgba(0,0,0,.72);
}

.header-calendar-notification{
  position:absolute;
  top:0;
  right:0;
  z-index:8;
  display:grid;
  place-items:center;
  min-width:17px;
  height:17px;
  padding:0 2px;
  border:1px solid rgba(255,170,170,.88);
  border-radius:999px;
  background:radial-gradient(circle at 35% 28%,#ff8b8b 0 9%,#df243d 31%,#9f1028 68%,#5d0718 100%);
  color:#fff7f3;
  box-shadow:0 0 4px rgba(255,52,75,.95),0 0 9px rgba(231,21,54,.76),0 0 15px rgba(170,8,34,.44),inset 0 1px rgba(255,235,229,.56),inset 0 -1px rgba(70,0,14,.72);
  font-size:.58rem;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 1px rgba(65,0,13,.9);
  pointer-events:none;
  animation:headerCalendarNotificationGlow 2.1s ease-in-out infinite;
}

.header-calendar-notification[hidden]{display:none!important}

.header-calendar-launch:active .header-calendar-glyph{
  transform:scale(.96);
  filter:brightness(1.12);
}

.header-calendar-launch:focus-visible{
  outline:2px solid #f0cc84;
  outline-offset:3px;
  border-radius:8px;
}

@keyframes headerCalendarNotificationGlow{
  0%,100%{box-shadow:0 0 4px rgba(255,52,75,.9),0 0 8px rgba(231,21,54,.68),0 0 13px rgba(170,8,34,.36),inset 0 1px rgba(255,235,229,.56),inset 0 -1px rgba(70,0,14,.72)}
  50%{box-shadow:0 0 6px rgba(255,80,96,1),0 0 12px rgba(241,29,62,.88),0 0 18px rgba(184,10,42,.54),inset 0 1px rgba(255,245,240,.66),inset 0 -1px rgba(70,0,14,.72)}
}

@media(max-width:430px){
  .header-calendar-launch{
    right:14px;
    width:46px;
    height:46px;
  }
}

@media(prefers-reduced-motion:reduce){
  .header-calendar-notification{animation:none}
  .header-calendar-glyph{transition:none}
}