:root {
            --chart-size: clamp(320px, 95vw, 700px);
        }

        .year-clock {
        }
        .year-clock-circle {
            position: relative;
        }

        .year-cal-cntnr {
            position: relative;
            width: var(--chart-size);
            height: var(--chart-size);
            aspect-ratio: 1 / 1;
            background-color: var(--c-brown-lightest);
        }

        .year-cal-level { 
            position: absolute; 
            inset: 0; 
            border-radius: 50%; 
            overflow: hidden; 
}
        .inner-bg { 
            z-index: 5; 
            transform: scale(0.86); 
            /*
            border: 2px solid white;
            */
}

        .month-pie {
            position: absolute; width: 100%; height: 100%;
            background-color: var(--bg);
            transform: rotate(calc(var(--i) * 30deg));
            clip-path: polygon(50% 50%, 50% 0%, 76.8% 0%);
        }

        .content-layer {
            position: absolute; inset: 0; 
            z-index: 100; pointer-events: none;
        }

        .month-area {
            position: absolute; top: 50%; left: 50%; width: 0; height: 0;
            transform: rotate(calc(var(--i) * 30deg + 15deg));
        }

        .month-label {
            position: absolute; 
            top: calc(var(--chart-size) * -0.49);
            left: 50%; 
            transform: translateX(-50%);
            color: var(--c-white);
            text-transform: uppercase; 
            white-space: nowrap;
            text-align: center;
            z-index: 11998;
        }
        .month-label-link {
            position: absolute;
            transform: rotate(calc(var(--i) * 10deg + 0deg));
            left: 50%; 
            transform: translateX(-50%);
            height: 2ch;
            text-align: center;
            z-index: 900;
        }
        .month-label h2,
        .month-label p {
            font-family: var(--f-title);
            font-size: var(--fs-h2);
            margin: 0;
            padding: 0;
        }
        .month-label a,
        .month-label .month-label-link a {
            position: relative;
            font-family: var(--f-body);
            font-size: var(--fs-year-clock-link)!important;
            margin: 0;
            padding: 0 1ch;
            background: none;
            text-transform:none;
            left: 50%; 
            transform: translateX(-50%);
            color: white;
        }
        .month-label a:hover,
        .month-label .month-label-link a:hover { 
            background: rgba(255,255,255,0.05); 
            padding: 0.3ch 1.5ch;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        .month-link {
            position: absolute;
            top: calc(var(--chart-size) * -0.41);
            left: 50%;
            transform: translateX(-50%) rotate(90deg);
            display: flex; 
            flex-direction:column-reverse;
            align-items:flex-start;
            gap: 4px;
            width: auto;
        }

        .month-link a:nth-child(4),
        .month-link a:nth-child(5),
        .month-link a:nth-child(6),
        .month-link a:nth-child(7),
        .month-link a:nth-child(8),
        .month-link a:nth-child(9),
        .month-link a:nth-child(10),
        .month-link a:nth-child(11),
        .month-link a:nth-child(12) {
            display: none;
        }

        .month-link a {
            display: inline-block;
            pointer-events: auto;
            background: rgba(255,255,255,0.05); 
            color:white;
            padding: 0.3ch 1.5ch;
            border-radius: 4px;
            font-size: clamp(8px, 2vw, 10px);
            font-size: var(--fs-pack-sort-p);
            text-decoration: none; 
            font-weight: normal;
            border: 1px solid rgba(255,255,255,0.2);
            white-space: nowrap;
            font-family: var(--f-body);
        }
        .month-link a:hover {
            background: rgba(0,0,0,0.10);
        }

        .month-area[style*="--i:6"] .month-label, .month-area[style*="--i:7"] .month-label,
        .month-area[style*="--i:8"] .month-label, .month-area[style*="--i:3"] .month-label,
        .month-area[style*="--i:4"] .month-label, .month-area[style*="--i:5"] .month-label {
            transform: translateX(-50%) rotate(180deg);
            
        }

        .month-area[style*="--i:0"] .month-link, .month-area[style*="--i:01"] .month-link,
        .month-area[style*="--i:2"] .month-link, .month-area[style*="--i:3"] .month-link,
        .month-area[style*="--i:4"] .month-link, .month-area[style*="--i:5"] .month-link {
            transform: translateX(-50%) rotate(-90deg);
            top: calc(var(--chart-size) * -0.42); 
            align-items:flex-end;
        }


/* anchor link 
.year-clock-anch {
    position: relative;
  color: var(--c-white);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}
.year-clock-anch a {
    position: absolute;
    top: 2ch;
    left: 0; 
    transform: translateX(-90%) translateY(3ch) rotate(-90deg);
    color: var(--c-white);
    text-transform: lowercase;
    white-space: nowrap;
    text-align: center;
    border: none;
    padding: 0;
    margin: 0;
}
 */
/* anchor link  */

/* article-table */
.year-clock-list {
    text-align: left;
}
.year-clock-list p,
.year-clock-list h2 {
    font-family: var(--f-title);
    font-size: var(--fs-h2);
    color: var(--c-purple);
    margin: 1.5em 0 0.5em 0;
}
.year-clock-list .art-lnk {
    display: block;
    margin: 0 0 0.4ch 0;
}
a.year-clock-empty-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255,255,255,0.00);
}
a.year-clock-empty-link:after {
    display: none
}
.year-clock-list .year-clock-winter p,
.year-clock-list .year-clock-winter h2 {
    color: var(--c-brown-chocolate)!important;
}
.year-clock-list .year-clock-spring p,
.year-clock-list .year-clock-spring h2 {
    color: var(--c-orange-broken)!important;
}
.year-clock-list .year-clock-summer p,
.year-clock-list .year-clock-summer h2 {
    color: var(--c-green-light)!important;
}
.year-clock-list .year-clock-fall p,
.year-clock-list .year-clock-fall h2 {
    color: var(--c-yellow-lion)!important;
}
.year-clock-list .year-clock-winter .art-lnk {
    background: var(--c-brown-chocolate)!important;
}
.year-clock-list .year-clock-spring .art-lnk {
    background: var(--c-orange-broken)!important;
}
.year-clock-list .year-clock-summer  .art-lnk {
    background: var(--c-green-light)!important;
}
.year-clock-list .year-clock-fall .art-lnk {
    background: var(--c-yellow-lion)!important;
}

        @media (max-width: 480px) {
            .month-link { gap: 2px; }
            .month-link a { font-size: 7px; padding: 2px 6px; border-radius: 2px; }
            .month-label { font-size: 8px; }
        }

        .center-hub {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 25%;
            height: 25%;
            background: var(--c-orange);
            border-radius: 50%;
            z-index: 400;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;
        }

        .center-hub h3 { 
            font-weight: 900; 
            font-size: var(--fs-h1)!important; 
            color: var(--c-white);
            font-family: var(--f-title);
            margin: 0;
            padding: 0;
}