@font-face{
  font-family:"WineStack EB Garamond";
  src:url("../scripts/wine-tech-sheet-template/fonts/EBGaramond.ttf") format("truetype");
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
}

:root{
  --calendar-launch-brass:#e2b969;
  --header-control-center:30.5px;
}

.header-menu-toggle{
  top:calc(var(--safe-top) + var(--header-control-center));
}

.header-calendar-launch{
  position:absolute;
  top:calc(var(--safe-top) + var(--header-control-center));
  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:15px;
  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:48px;
  height:48px;
  color:#d6aa62;
  border:1.25px solid transparent;
  border-radius:15px;
  background:
    linear-gradient(#6e4b26,#6e4b26) padding-box,
    var(--v172-metal-line) border-box;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  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:-6px;
  z-index:2;
  width:4px;
  height:11px;
  border-radius:999px;
  border:.5px solid #996f36;
  background:linear-gradient(90deg,#6c431c,#e7c582 32%,#fff1bb 48%,#bc9150 72%,#6f461e);
  box-shadow:0 1px 1px #21050bd9;
}

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

.header-calendar-month,
.header-calendar-day{
  display:grid;
  place-items:center;
  color:inherit;
  font-family:"WineStack EB Garamond","EB Garamond",Garamond,"Iowan Old Style",Georgia,serif;
  font-weight:500;
  line-height:1;
}

.header-calendar-month{
  z-index:1;
  padding-top:1px;
  border-radius:13px 13px 0 0;
  background:linear-gradient(155deg,#a14b5a 0%,#67172c 22%,#440619 67%,#270310);
  box-shadow:none;
  color:#f0d491;
  font-size:.67rem;
  letter-spacing:.08em;
  text-indent:.08em;
  font-weight:600;
  transform:translateY(.5px);
}

.header-calendar-day{
  padding:0 0 3px;
  border-radius:0 0 13px 13px;
  color:#2c1711;
  background:linear-gradient(115deg,#ddc497 0%,#c3a679 25%,#a4875b 62%,#b99b6e 88%,#d3b785);
  box-shadow:none;
  font-size:1.60rem;
  font-weight:600;
  letter-spacing:-.045em;
  text-shadow:0 1px rgba(255,239,208,.2);
}

.header-calendar-notification{
  position:absolute;
  top:-3px;
  right:-3px;
  z-index:8;
  display:grid;
  place-items:center;
  min-width:13px;
  height:13px;
  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:.48rem;
  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 3.2s 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:15px;
}

@keyframes headerCalendarNotificationGlow{
  0%,100%{box-shadow:0 0 2px rgba(255,52,75,.55),0 0 5px rgba(231,21,54,.34),inset 0 1px rgba(255,235,229,.4)}
  50%{box-shadow:0 0 3px rgba(255,80,96,.7),0 0 7px rgba(241,29,62,.46),inset 0 1px rgba(255,245,240,.45)}
}

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

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