/* Transparent seasonal illustration in each public page corner. */
.seasonal-corner-branch { position: absolute; z-index: 101; top: 0; right: 0; width: min(300px, calc((100vw - 700px) / 2 - 28px)); aspect-ratio: 1448 / 1086; overflow: hidden; pointer-events: none; user-select: none; }
.seasonal-corner-branch img { width: 100%; height: auto; transform: translate(3px, -12px); }
@media (max-width: 1199px) { .seasonal-easter-egg { display: none; } }
@media print { .seasonal-easter-egg { display: none; } }

/* Small-screen autumn detail lives on the existing navigation capsule. */
@media (max-width: 1199px) {
  :root[data-seasonal-active] .bottom-tools {
    border-color: color-mix(in srgb, #b38332 75%, var(--line));
    background: linear-gradient(155deg, color-mix(in srgb, var(--paper) 68%, #e9c478), color-mix(in srgb, var(--paper) 85%, #c99951));
    box-shadow: 0 5px 20px rgb(125 87 28 / 16%), inset 0 1px 0 rgb(255 237 193 / 35%);
  }
  :root[data-seasonal-active] .bottom-tools::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: -7px;
    width: 24px;
    height: 26px;
    background: url('/assets/img/solar-term/frost-capsule-leaf.svg') center / contain no-repeat;
    transform: rotate(-48deg);
    pointer-events: none;
  }
  :root[data-seasonal-active] :is(.back-to-top, .quick-navigation-toggle) {
    color: color-mix(in srgb, var(--text) 65%, #bc9146);
  }
  :root[data-seasonal-active] :is(.back-to-top, .quick-navigation-toggle):hover,
  :root[data-seasonal-active] .quick-navigation-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--paper-2) 65%, #e9c478);
  }
}

@media (max-width: 1199px) {
  :root[data-seasonal-active] .quick-navigation-panel { width: 196px; }
  :root[data-seasonal-active] .quick-navigation-panel nav {
    padding: 18px 9px 9px;
    border: 1px solid color-mix(in srgb, #bc9146 60%, var(--line));
    border-radius: 20px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 78%, #e9c478), color-mix(in srgb, var(--paper) 95%, #e9c478));
    box-shadow: 0 10px 32px rgb(92 62 19 / 18%), inset 0 1px 0 rgb(255 237 193 / 25%);
  }
  :root[data-seasonal-active] .quick-navigation-panel::before {
    content: "";
    position: absolute;
    top: -34px;
    right: -5px;
    width: 88px;
    height: 66px;
    background: url('/assets/img/solar-term/frost-ginkgo.png') center / contain no-repeat;
    transform: rotate(-12deg);
    pointer-events: none;
  }
  :root[data-seasonal-active] .quick-navigation-panel a { position: relative; padding-right: 34px; margin-block: 2px; border-radius: 12px; }
  :root[data-seasonal-active] .quick-navigation-panel a::after {
    content: "→";
    position: absolute;
    right: 13px;
    opacity: .5;
    color: color-mix(in srgb, var(--text) 60%, #bc9146);
  }
  :root[data-seasonal-active] .quick-navigation-panel a[aria-current="page"],
  :root[data-seasonal-active] .quick-navigation-panel a:hover,
  :root[data-seasonal-active] .quick-navigation-panel a:focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--paper-2) 53%, #deb45f);
  }
  :root[data-seasonal-active] .quick-navigation-theme {
    margin-top: 8px;
    border-top-color: color-mix(in srgb, #bc9146 30%, var(--line));
    color: color-mix(in srgb, var(--text) 80%, #bc9146);
  }
}

/* Halloween colors. */
@media (max-width: 1199px) {
  :root[data-seasonal-active][data-seasonal-theme="halloween"] .bottom-tools {
    border-color: color-mix(in srgb, #b86936 75%, var(--line));
    background: linear-gradient(155deg, color-mix(in srgb, var(--paper) 70%, #efa762), color-mix(in srgb, var(--paper) 86%, #a486a9));
  }
  :root[data-seasonal-active][data-seasonal-theme="halloween"] .bottom-tools::before {
    background-image: url('/assets/img/solar-term/halloween-pumpkin.svg');
    width: 27px;
    height: 27px;
    transform: rotate(-13deg);
  }
  :root[data-seasonal-active][data-seasonal-theme="halloween"] .quick-navigation-panel nav {
    border-color: color-mix(in srgb, #b86936 65%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 80%, #efa762), color-mix(in srgb, var(--paper) 92%, #a486a9));
  }
  :root[data-seasonal-active][data-seasonal-theme="halloween"] .quick-navigation-panel::before {
    background-image: url('/assets/img/solar-term/halloween-corner.png');
    width: 132px;
    height: 99px;
    top: -45px;
    right: -5px;
    transform: none;
  }
  :root[data-seasonal-active][data-seasonal-theme="halloween"] .quick-navigation-panel a[aria-current="page"],
  :root[data-seasonal-active][data-seasonal-theme="halloween"] .quick-navigation-panel a:hover,
  :root[data-seasonal-active][data-seasonal-theme="halloween"] .quick-navigation-panel a:focus-visible {
    background: color-mix(in srgb, var(--paper-2) 60%, #db9b61);
  }
}
:root[data-seasonal-theme="halloween"] .seasonal-corner-branch { aspect-ratio: 1 / 1.35; }
:root[data-seasonal-theme="halloween"] .seasonal-corner-branch img { width: 210%; max-width: none; transform: translate(calc(-52.38% + 3px), -4px); }

/* Christmas colors. */
@media (max-width: 1199px) {
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .bottom-tools {
    border-color: color-mix(in srgb, #657751 70%, var(--line));
    background: linear-gradient(155deg, color-mix(in srgb, var(--paper) 76%, #aabd91), color-mix(in srgb, var(--paper) 89%, #e2b875));
  }
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .bottom-tools::before {
    background-image: url('/assets/img/solar-term/christmas-bell.svg');
    width: 28px;
    height: 28px;
    transform: rotate(-17deg);
  }
  :root[data-seasonal-active][data-seasonal-theme="christmas"] :is(.back-to-top, .quick-navigation-toggle) {
    color: color-mix(in srgb, var(--text) 65%, #657751);
  }
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .quick-navigation-panel nav {
    border-color: color-mix(in srgb, #657751 65%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 86%, #aabd91), color-mix(in srgb, var(--paper) 93%, #e2b875));
  }
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .quick-navigation-panel::before {
    background-image: url('/assets/img/solar-term/christmas-corner.png');
    width: 132px;
    height: 99px;
    top: -45px;
    right: -5px;
    transform: none;
  }
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .quick-navigation-panel a[aria-current="page"],
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .quick-navigation-panel a:hover,
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .quick-navigation-panel a:focus-visible {
    background: color-mix(in srgb, var(--paper-2) 76%, #bf7361);
  }
  :root[data-seasonal-active][data-seasonal-theme="christmas"] :is(.back-to-top, .quick-navigation-toggle):hover,
  :root[data-seasonal-active][data-seasonal-theme="christmas"] .quick-navigation-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--paper-2) 72%, #aabd91);
  }
}
:root[data-seasonal-theme="christmas"] .seasonal-corner-branch { aspect-ratio: 1 / 1.4; }
:root[data-seasonal-theme="christmas"] .seasonal-corner-branch img { width: 190%; max-width: none; transform: translate(calc(-47.37% + 3px), -4px); }

/* Double Ninth Festival: chrysanthemums and autumn hills. */
@media (max-width: 1199px) {
  :root[data-seasonal-active][data-seasonal-theme="chongyang"] .bottom-tools {
    border-color: color-mix(in srgb, #a58b4c 75%, var(--line));
    background: linear-gradient(155deg, color-mix(in srgb, var(--paper) 73%, #e2b969), color-mix(in srgb, var(--paper) 91%, #879070));
  }
  :root[data-seasonal-active][data-seasonal-theme="chongyang"] .bottom-tools::before {
    background-image: url('/assets/img/solar-term/chongyang-flower.svg');
    width: 27px;
    height: 27px;
    transform: rotate(-10deg);
  }
  :root[data-seasonal-active][data-seasonal-theme="chongyang"] .quick-navigation-panel nav {
    border-color: color-mix(in srgb, #a58b4c 65%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 82%, #e2b969), color-mix(in srgb, var(--paper) 95%, #879070));
  }
  :root[data-seasonal-active][data-seasonal-theme="chongyang"] .quick-navigation-panel::before {
    background-image: url('/assets/img/solar-term/chongyang-corner.png');
    width: 132px;
    height: 99px;
    top: -65px;
    right: -5px;
    transform: none;
  }
  :root[data-seasonal-active][data-seasonal-theme="chongyang"] .quick-navigation-panel a[aria-current="page"],
  :root[data-seasonal-active][data-seasonal-theme="chongyang"] .quick-navigation-panel a:hover,
  :root[data-seasonal-active][data-seasonal-theme="chongyang"] .quick-navigation-panel a:focus-visible {
    background: color-mix(in srgb, var(--paper-2) 58%, #d9b565);
  }
}
:root[data-seasonal-theme="chongyang"] .seasonal-corner-branch { aspect-ratio: 1 / 1.03; }
:root[data-seasonal-theme="chongyang"] .seasonal-corner-branch img { width: 130%; max-width: none; transform: translate(calc(-23.08% + 3px), -4px); }

/* New Year's Day: midnight clock and champagne lights. */
@media (max-width: 1199px) {
  :root[data-seasonal-active][data-seasonal-theme="newyear"] .bottom-tools {
    border-color: color-mix(in srgb, #b59663 75%, var(--line));
    background: linear-gradient(155deg, color-mix(in srgb, var(--paper) 78%, #e4c795), color-mix(in srgb, var(--paper) 88%, #c8827c));
  }
  :root[data-seasonal-active][data-seasonal-theme="newyear"] .bottom-tools::before {
    background-image: url('/assets/img/solar-term/new-year-clock.svg');
    width: 28px;
    height: 28px;
    transform: rotate(-8deg);
  }
  :root[data-seasonal-active][data-seasonal-theme="newyear"] .quick-navigation-panel nav {
    border-color: color-mix(in srgb, #b59663 65%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 86%, #e4c795), color-mix(in srgb, var(--paper) 94%, #c8827c));
  }
  :root[data-seasonal-active][data-seasonal-theme="newyear"] .quick-navigation-panel::before {
    background-image: url('/assets/img/solar-term/new-year-corner.png');
    width: 132px;
    height: 99px;
    top: -65px;
    right: -5px;
    transform: none;
  }
  :root[data-seasonal-active][data-seasonal-theme="newyear"] .quick-navigation-panel a[aria-current="page"],
  :root[data-seasonal-active][data-seasonal-theme="newyear"] .quick-navigation-panel a:hover,
  :root[data-seasonal-active][data-seasonal-theme="newyear"] .quick-navigation-panel a:focus-visible {
    background: color-mix(in srgb, var(--paper-2) 72%, #c8827c);
  }
}
:root[data-seasonal-theme="newyear"] .seasonal-corner-branch { aspect-ratio: 1 / .95; }
:root[data-seasonal-theme="newyear"] .seasonal-corner-branch img { width: 120%; max-width: none; transform: translate(calc(-16.67% + 3px), -4px); }

/* Spring Festival: red plum blossoms and lanterns. */
@media (max-width: 1199px) {
  :root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] .bottom-tools {
    border-color: color-mix(in srgb, #b95742 75%, var(--line));
    background: linear-gradient(155deg, color-mix(in srgb, var(--paper) 78%, #e5bb73), color-mix(in srgb, var(--paper) 88%, #d37961));
  }
  :root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] .bottom-tools::before {
    background-image: url('/assets/img/solar-term/lunar-new-year-lantern.svg');
    width: 28px;
    height: 34px;
    transform: rotate(-12deg);
  }
  :root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] .quick-navigation-panel nav {
    border-color: color-mix(in srgb, #b95742 65%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 86%, #e5bb73), color-mix(in srgb, var(--paper) 94%, #d37961));
  }
  :root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] .quick-navigation-panel::before {
    background-image: url('/assets/img/solar-term/lunar-new-year-corner.png');
    width: 132px;
    height: 99px;
    top: -65px;
    right: -5px;
    transform: none;
  }
  :root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] .quick-navigation-panel a[aria-current="page"],
  :root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] .quick-navigation-panel a:hover,
  :root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] .quick-navigation-panel a:focus-visible {
    background: color-mix(in srgb, var(--paper-2) 72%, #d37961);
  }
}
:root[data-seasonal-theme="lunarnewyear"] .seasonal-corner-branch { aspect-ratio: 1 / .9; }
:root[data-seasonal-theme="lunarnewyear"] .seasonal-corner-branch img { width: 110%; max-width: none; transform: translate(calc(-9.09% + 3px), -4px); }

/* Category tabs stay simple: a soft tint and a clear selected state. */
:root[data-seasonal-theme="autumn"] { --season-category-accent: #c59b50; }
:root[data-seasonal-theme="halloween"] { --season-category-accent: #c7834e; }
:root[data-seasonal-theme="christmas"] { --season-category-accent: #85976c; }
:root[data-seasonal-theme="chongyang"] { --season-category-accent: #c5a15c; }
:root[data-seasonal-theme="newyear"] { --season-category-accent: #c79485; }
:root[data-seasonal-theme="lunarnewyear"] { --season-category-accent: #c97562; }

/* The friends' paper bookmarks follow the same schedule as the page corner. */
:root[data-seasonal-active][data-seasonal-theme="autumn"] { --friend-season-mark: url('/assets/img/solar-term/frost-capsule-leaf.svg');  --friend-season-art: url('/assets/img/solar-term/frost-ginkgo.png'); }
:root[data-seasonal-active][data-seasonal-theme="chongyang"] { --friend-season-mark: url('/assets/img/solar-term/chongyang-flower.svg');  --friend-season-art: url('/assets/img/solar-term/chongyang-corner.png'); }
:root[data-seasonal-active][data-seasonal-theme="halloween"] { --friend-season-mark: url('/assets/img/solar-term/halloween-pumpkin.svg');  --friend-season-art: url('/assets/img/solar-term/halloween-corner.png'); }
:root[data-seasonal-active][data-seasonal-theme="christmas"] { --friend-season-mark: url('/assets/img/solar-term/christmas-bell.svg');  --friend-season-art: url('/assets/img/solar-term/christmas-corner.png'); }
:root[data-seasonal-active][data-seasonal-theme="newyear"] { --friend-season-mark: url('/assets/img/solar-term/new-year-clock.svg');  --friend-season-art: url('/assets/img/solar-term/new-year-corner.png'); }
:root[data-seasonal-active][data-seasonal-theme="lunarnewyear"] { --friend-season-mark: url('/assets/img/solar-term/lunar-new-year-lantern.svg');  --friend-season-art: url('/assets/img/solar-term/lunar-new-year-corner.png'); }
:root[data-seasonal-active] .category-nav {
  border-color: color-mix(in srgb, var(--season-category-accent) 50%, var(--line));
  background: color-mix(in srgb, var(--paper) 94%, var(--season-category-accent));
}
:root[data-seasonal-active] .category-nav button.is-active,
:root[data-seasonal-active] .category-nav button:hover,
:root[data-seasonal-active] .category-nav button:focus-visible {
  background: color-mix(in srgb, var(--paper-2) 78%, var(--season-category-accent));
}
:root[data-seasonal-active] .category-nav button.is-active .category-nav__label {
  color: color-mix(in srgb, var(--ink) 85%, var(--season-category-accent));
}

/* Seasonal bookmarks use the site's watercolor artwork as part of the paper. */
.friend-blog__season-art { display: none; }
:root[data-seasonal-active] .friend-blog__season-art { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; background: var(--friend-season-art) right -16px top -6px / 220px auto no-repeat; opacity: .42; mask-image: linear-gradient(90deg,transparent 30%,#000 88%); }
:root[data-seasonal-active] .friend-blog__link { border-color: color-mix(in srgb,var(--friend-tag-color) 42%,var(--paper)); box-shadow: inset 0 0 0 3px color-mix(in srgb,var(--friend-tag-color) 5%,var(--paper)),0 2px 5px rgb(40 30 10 / 5%); }
:root[data-seasonal-active] .friend-blog__link::after { left: -12px; bottom: 6px; width: 34px; height: 37px; opacity: .9; }
:root[data-seasonal-active] .friend-blog__link::before { width: 12px; height: 28px; background: linear-gradient(90deg,color-mix(in srgb,var(--friend-tag-color) 65%,var(--paper)),color-mix(in srgb,var(--friend-tag-color) 85%,var(--paper))); }
:root[data-seasonal-active] .friend-blog__link > :not(.friend-blog__season-art) { position: relative; z-index: 1; }
:root[data-seasonal-theme="halloween"] .friend-blog__season-art { background-size: 220px auto; background-position: right -12px top -6px; opacity: .34; }
:root[data-seasonal-theme="christmas"] .friend-blog__season-art { background-size: 220px auto; background-position: right -18px top -8px; opacity: .48; }
:root[data-seasonal-theme="lunarnewyear"] .friend-blog__season-art { background-size: 220px auto; background-position: right -18px top -10px; opacity: .42; }
:root[data-seasonal-theme="newyear"] .friend-blog__season-art { background-size: 220px auto; background-position: right -18px top -8px; }
@media (max-width:560px) {
  :root[data-seasonal-active] .friend-blog__season-art { mask-image: linear-gradient(90deg,transparent 48%,#000 90%); background-position-x: right -6px; }
  :root[data-seasonal-active] .friend-blog__link::after { left: -10px; bottom: 8px; width: 30px; height: 33px; }
}

/* Eight composed variations give each bookmark its own small details. */
:root[data-seasonal-active] [data-friend-variant="1"] .friend-blog__link::before { top: auto; bottom: -1px; height: 20px; width: 10px; transform: rotate(180deg); }
:root[data-seasonal-active] [data-friend-variant="2"] .friend-blog__link::before { top: 10px; right: 12px; width: 15px; height: 15px; border-radius: 50%; clip-path: none; box-shadow: inset 0 0 0 3px color-mix(in srgb,var(--friend-tag-color) 35%,var(--paper)); }
:root[data-seasonal-active] [data-friend-variant="3"] .friend-blog__link::before { right: -1px; top: 9px; width: 24px; height: 8px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,18% 50%); }
:root[data-seasonal-active] [data-friend-variant="4"] .friend-blog__link::before { top: -1px; right: -1px; width: 20px; height: 20px; clip-path: polygon(0 0,100% 0,100% 100%); }
:root[data-seasonal-active] [data-friend-variant="5"] .friend-blog__link::before { top: 8px; right: 12px; width: 7px; height: 22px; clip-path: none; border-radius: 6px; border: 1px solid color-mix(in srgb,var(--friend-tag-color) 80%,var(--paper)); background: transparent; transform: rotate(12deg); }
:root[data-seasonal-active] [data-friend-variant="6"] .friend-blog__link::before { width: 6px; height: 18px; right: 12px; box-shadow: -9px 0 color-mix(in srgb,var(--friend-tag-color) 40%,var(--paper)); }
:root[data-seasonal-active] [data-friend-variant="7"] .friend-blog__link::before { right: 9px; top: 9px; width: 22px; height: 7px; clip-path: none; transform: rotate(-24deg); opacity: .6; }
:root[data-seasonal-active] [data-friend-variant="1"] .friend-blog__season-art { background-size: 260px auto; background-position: right -44px top -24px; opacity: .32; }
:root[data-seasonal-active] [data-friend-variant="2"] .friend-blog__season-art { background-size: 180px auto; background-position: right -2px top 6px; opacity: .44; }
:root[data-seasonal-active] [data-friend-variant="3"] .friend-blog__season-art { background-size: 250px auto; background-position: right -35px top -45px; opacity: .38; }
:root[data-seasonal-active] [data-friend-variant="4"] .friend-blog__season-art { background-size: 200px auto; background-position: right -8px top -24px; opacity: .36; }
:root[data-seasonal-active] [data-friend-variant="5"] .friend-blog__season-art { background-size: 280px auto; background-position: right -55px top -10px; opacity: .3; }
:root[data-seasonal-active] [data-friend-variant="6"] .friend-blog__season-art { background-size: 190px auto; background-position: right -8px top -2px; opacity: .4; }
:root[data-seasonal-active] [data-friend-variant="7"] .friend-blog__season-art { background-size: 240px auto; background-position: right -26px top -32px; opacity: .34; }
:root[data-seasonal-active] [data-friend-variant="1"] .friend-blog__link::after { left: -9px; bottom: 1px; width: 24px; height: 27px; transform: rotate(24deg); }
:root[data-seasonal-active] [data-friend-variant="2"] .friend-blog__link::after { left: -18px; top: 6px; bottom: auto; width: 30px; height: 32px; transform: rotate(-22deg); }
:root[data-seasonal-active] [data-friend-variant="3"] .friend-blog__link::after { left: -12px; bottom: -4px; width: 27px; height: 29px; transform: rotate(12deg); }
:root[data-seasonal-active] [data-friend-variant="4"] .friend-blog__link::after { left: -17px; top: 12px; bottom: auto; width: 28px; height: 30px; transform: rotate(18deg); }
:root[data-seasonal-active] [data-friend-variant="5"] .friend-blog__link::after { left: -12px; bottom: 9px; width: 26px; height: 28px; transform: rotate(-32deg); }
:root[data-seasonal-active] [data-friend-variant="6"] .friend-blog__link::after { left: -10px; bottom: 2px; width: 22px; height: 25px; transform: rotate(4deg); }
:root[data-seasonal-active] [data-friend-variant="7"] .friend-blog__link::after { left: -18px; top: 4px; bottom: auto; width: 32px; height: 35px; transform: rotate(-10deg); }