@layer pages{
  .lantern-left,.lantern-right{--light-core:var(--light-lantern);--light-halo:var(--light-lantern-halo)}
  .lantern-left {--light-x:8.83%;--light-y:36.41%;--light-size:1.78%}
  .lantern-right{--light-x:90.43%;--light-y:31.79%;--light-size:1.49%;
    --flame-bright:3.1s;--flame-dance:2.3s}
  :root{
    --page-image-sm:url("/assets/site/pages/calendar-hero-1280.webp");
    --page-image-md:url("/assets/site/pages/calendar-hero-1920.webp");
    --page-image-lg:url("/assets/site/pages/calendar-hero.webp");
    --ground-edge:url("/assets/site/masks/calendar.svg");
    --calendar-side:400px;
    --calendar-main:560px;
    --calendar-gap:calc(var(--space-5) + var(--space-2));
    --side-gap:var(--space-2);
    --month-lift:18px;
    --week-gap:var(--space-4);
    --paper-ratio:1230 / 1278;
  }
  .calendar-layout{display:flex;flex-wrap:wrap;gap:var(--calendar-gap);align-items:flex-start;
    padding-top:var(--space-3)}
  .calendar-main{flex:1 1 var(--calendar-main);min-width:0;display:grid;gap:var(--week-gap)}
  .calendar-side{flex:0 1 var(--calendar-side);margin-inline:auto;display:grid;gap:var(--side-gap)}
  .week>.event-list{margin-top:var(--space-3)}
  .week>.event-list:empty{display:none}
  .week+.week{padding-top:var(--week-gap);background:var(--rule-top)}
  .week-count{margin-left:auto;font:500 13px Jost;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
  .week-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
  .week-icon{width:46px;height:46px;flex:none;background:linear-gradient(var(--gold-highlight),var(--gold-light) 35%,var(--gold) 80%);
    mask:var(--flat-leaf-crest) center/contain no-repeat;filter:drop-shadow(0 0 8px var(--button-arrow-glow-dim))}
  .week-head h2{font:500 clamp(20px,2.2vw,26px)/1.1 Cinzel;letter-spacing:.06em;text-transform:uppercase;margin:0;color:transparent;background:var(--title-metal);-webkit-background-clip:text;background-clip:text;filter:var(--metal-quiet)}
  .month{position:relative;aspect-ratio:var(--paper-ratio);padding:15% 17% 19%;margin-top:calc(var(--month-lift) * -1);
    background:url("/assets/site/decor/calendar-paper.webp") center/100% 100% no-repeat;filter:drop-shadow(0 18px 30px rgba(0,0,0,.7));
    color:var(--ink);display:grid;grid-template-rows:auto auto 1fr;gap:var(--space-2)}
  .month-head{display:flex;align-items:center;justify-content:space-between}
  .month-head h2{font:500 22px Cinzel;letter-spacing:.04em;color:var(--ink);margin:0}
  .month-step{width:28px;height:28px;border-radius:50%;border:var(--border-thin) solid var(--ink-muted);background:none;
    font:500 20px/1 Jost;color:var(--ink);cursor:var(--cursor-click);display:grid;place-content:center;padding:0 0 3px}
  .month-step:hover{background:rgba(59,42,24,.1)}
  .month-days,.month-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
  .month-days li{font:500 12px Jost;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
  .month-grid{align-content:space-evenly}
  .month-grid li{display:grid;place-items:center;height:40px}
  .month-grid .is-other{visibility:hidden}
  .day{width:min(32px,100%);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;font:500 16px/1 Jost;color:var(--ink)}
  .has-event .day{color:var(--paper-light);font-weight:600;
    background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--art-color) 82%,white),var(--art-color) 60%,color-mix(in srgb,var(--art-color) 80%,black));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--art-color) 60%,black),0 2px 5px rgba(59,42,24,.4)}
  .is-today .day{outline:2px solid var(--ink);outline-offset:3px;font-weight:700}
  .legend{padding:var(--space-3) var(--space-4);
    margin:var(--vine-rail-top) var(--vine-rail-right) 0 var(--vine-rail-left)}
  .legend .week-head{margin-bottom:var(--space-2)}
  .legend-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3)}
  .legend-list li{display:flex;align-items:center;gap:var(--space-2);font-size:16px}
  .legend-list li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--art-color);box-shadow:0 0 8px color-mix(in srgb,var(--art-color) 50%,transparent)}
  .archive-toggle{justify-self:center;margin-top:calc(var(--vine-rail-bottom) + var(--space-3))}
  .archive-toggle[aria-expanded="true"] .arrow{rotate:90deg}
  @media (max-width:1240px){
    :root{--calendar-gap:var(--space-5)}
  }
  @media (max-width:900px){
    .calendar-side{flex-basis:100%}
    .legend{margin-inline:revert-layer}
    .week-head,.week>.section-head{gap:var(--space-2)}
  }
  @media (max-width:620px){
    .week-count{flex:none;font-size:12px;letter-spacing:.14em}
    .week-icon{width:36px;height:36px}
    .week{--section-icon:36px}
    .week>.section-head{flex-wrap:wrap}
    .month-head h2{font-size:16px}
    .month-grid li{height:32px}
    .legend-list li{font-size:15px}
  }
  @media (pointer:coarse){
    .month-step{width:44px;height:44px;font-size:24px}
  }
}