@layer foundation-layout, foundation-weather, foundation-page, foundation-design, foundation-default, components-default, components-design, components-page, components-weather, components-layout;
@layer foundation-default{.page-calendars :is(#phaseOrderAtticCalendar, #phaseOrderRomanRepublicanCalendar) .classical-calendar-section-subtitle{margin: -8px auto 20px;color: #aebed0;font-size: .92rem;text-align: center}
.page-calendars .classical-calendar-card{box-sizing: border-box;width: min(100%, 940px);margin: 0 auto;padding: 22px clamp(14px, 3vw, 28px) 24px;border: 1px solid rgba(116, 153, 185, .42);border-radius: 18px;background: #14283a;box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 32px rgba(3, 12, 24, .25)}
.page-calendars .classical-calendar-card-roman{border-color: rgba(169, 139, 116, .44);background: #2a2428}
.page-calendars .classical-current-date{display: grid;justify-items: center;gap: 5px;width: min(100%, 690px);margin: 0 auto 16px;padding: 14px 18px;border: 1px solid rgba(100, 167, 207, .52);border-radius: 14px;background: #0e3049;text-align: center}
.page-calendars .classical-calendar-card-roman .classical-current-date{border-color: rgba(194, 154, 113, .52);background: #3a2928}
.page-calendars .classical-current-date > span{color: #9ebed2;font-size: .76rem;font-weight: 700;letter-spacing: .07em;text-transform: uppercase}
.page-calendars .classical-current-date > strong{color: #eef9ff;font-family: Georgia, "Times New Roman", serif;font-size: clamp(1.18rem, 3vw, 1.58rem);font-weight: 500;line-height: 1.25}
.page-calendars .classical-calendar-card-roman .classical-current-date > strong{color: #f4ddbd;font-family: "Times New Roman", Georgia, serif;letter-spacing: .035em}
.page-calendars .classical-current-date > small, .page-calendars .classical-calendar-description{color: #bdcbd8;line-height: 1.55}
.page-calendars .classical-calendar-description{max-width: 760px;margin: 0 auto 12px;text-align: center}
.page-calendars .classical-calendar-wheel{position: relative;width: min(100%, 500px);aspect-ratio: 1;margin: 4px auto}
.page-calendars .classical-calendar-wheel svg{display: block;width: 100%;height: 100%;overflow: visible}
.page-calendars .classical-wheel-outer, .page-calendars .classical-wheel-inner{fill: none;stroke: rgba(157, 197, 220, .68);stroke-width: 2}
.page-calendars .roman-calendar-wheel :is(.classical-wheel-outer, .classical-wheel-inner){stroke: rgba(207, 169, 126, .68)}
.page-calendars .classical-wheel-segment{fill: hsl(calc(203 + var(--segment-index) * 2) 42% calc(24% + var(--segment-index) * .38%));stroke: rgba(6, 20, 32, .92);stroke-width: 1.35}
.page-calendars .roman-calendar-wheel .classical-wheel-segment{fill: hsl(calc(18 + var(--segment-index) * 1.5) 30% calc(25% + var(--segment-index) * .32%));stroke: rgba(31, 18, 18, .92)}
.page-calendars .classical-wheel-segment.is-current{fill: #397ba2;stroke: #aee4ff;stroke-width: 2.2}
.page-calendars .roman-calendar-wheel .classical-wheel-segment.is-current{fill: #895e42;stroke: #f2cf9f}
.page-calendars .classical-wheel-label{fill: #d9e8f1;font-family: Georgia, "Times New Roman", serif;font-size: 9.2px;font-weight: 600}
.page-calendars .roman-calendar-wheel .classical-wheel-label{fill: #eadbc9;font-family: "Times New Roman", Georgia, serif}
.page-calendars .classical-wheel-label.is-current{fill: #fff;font-weight: 800}
.page-calendars .classical-wheel-progress-track{fill: none;stroke: rgba(126, 155, 177, .2);stroke-width: 5}
.page-calendars .classical-wheel-progress{fill: none;stroke: #67c8ec;stroke-width: 5;stroke-linecap: round}
.page-calendars .roman-calendar-wheel .classical-wheel-progress{stroke: #d8a46f}
.page-calendars .classical-wheel-marker{fill: #eefcff;stroke: #21739b;stroke-width: 2}
.page-calendars .roman-calendar-wheel .classical-wheel-marker{fill: #fff0d7;stroke: #875a3d}
.page-calendars .classical-wheel-center{position: absolute;inset: 35%;display: grid;place-content: center;gap: 3px;text-align: center;pointer-events: none}
.page-calendars .classical-wheel-center span{color: #c6ddea;font-family: Georgia, "Times New Roman", serif;font-size: clamp(.8rem, 1.9vw, 1.02rem);line-height: 1.1}
.page-calendars .classical-wheel-center strong{color: #fff;font-size: clamp(1.3rem, 3.3vw, 1.75rem)}
.page-calendars .classical-wheel-center small{color: #9db4c5;font-size: clamp(.7rem, 1.6vw, .85rem);line-height: 1.2}
.page-calendars .classical-full-calendar{width: min(100%, 820px);margin: 0 auto}
.page-calendars .classical-full-calendar > h3{margin: 0 0 12px;color: #dfeef6;font-size: 1.06rem;text-align: center}
.page-calendars .classical-month-grid{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 8px}
.page-calendars .classical-month-tile{position: relative;display: grid;gap: 2px;min-width: 0;padding: 10px 9px;border: 1px solid rgba(105, 146, 174, .34);border-radius: 10px;background: #11283a;text-align: center}
.page-calendars .classical-calendar-card-roman .classical-month-tile{border-color: rgba(171, 135, 105, .34);background: #302526}
.page-calendars .classical-month-tile.is-current{border-color: #74c8ed;background: #1d4861}
.page-calendars .classical-calendar-card-roman .classical-month-tile.is-current{border-color: #e2b27d;background: #654433}
.page-calendars .classical-month-tile > span{position: absolute;top: 7px;left: 8px;color: #7997aa;font-size: .62rem}
.page-calendars .classical-month-tile > b{color: #e4f1f8;font-family: Georgia, "Times New Roman", serif;font-size: .9rem;overflow-wrap: anywhere}
.page-calendars .classical-month-tile > em{color: #a9bdca;font-size: .72rem;font-style: normal}
.page-calendars .classical-month-tile > small{color: #86a4b7;font-size: .67rem}
.page-calendars .classical-calendar-accuracy{max-width: 800px;margin: 16px auto 0;padding: 10px 12px;border-left: 3px solid #4c96bb;border-radius: 6px;background: rgba(6, 20, 32, .32);color: #9fb3c1;font-size: .76rem;line-height: 1.5}
.page-calendars .classical-calendar-card-roman .classical-calendar-accuracy{border-left-color: #a47750}
@media (max-width: 640px){.page-calendars .classical-calendar-card{padding: 16px 8px 18px}
.page-calendars .classical-calendar-wheel{width: min(100%, 390px)}
.page-calendars .classical-month-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}}}