/* Article page lab (/lab/article-a..c/): three article designs that match the V2 "Magazine" blog index. Noindex prototypes. */
.ar .post-b{font-size:1.125rem;line-height:1.7;color:var(--color-text-secondary)}
.ar .post-b h2{font-size:var(--display-xs);line-height:1.3;margin:var(--spacing-6xl) 0 var(--spacing-lg);scroll-margin-top:24px}
.ar .post-b h3{font-size:var(--text-lg)}
.ar .post-b li{margin:6px 0}
.ar .post-b table{font-size:var(--text-sm)}
.ar .ad-slot{margin:var(--spacing-6xl) 0}
.ar-lead p{font-size:1.25rem;line-height:1.6;color:var(--color-text-primary)}
.ar-by{display:flex;gap:var(--spacing-md);align-items:center;font-size:var(--text-sm);line-height:1.4;margin:0 0 var(--spacing-xl)}
.ar-by a{font-weight:800;text-decoration:none;color:inherit}.ar-by a:hover{text-decoration:underline}
.ar-bym{display:block;opacity:.8}
.ar h1{text-wrap:balance}
.ar-more{margin-top:var(--spacing-5xl)}
.ar .bl-method{margin-top:var(--spacing-5xl)}
@media (max-width:759px){.ar h1{font-size:2rem!important;line-height:1.15}.ar-lead p{font-size:1.125rem}.ar .post-b{font-size:1.0625rem}}

/* ---------- A. Cover story ---------- */
.ara-hero{display:grid;gap:var(--spacing-2xl);align-items:center;padding:var(--spacing-3xl);border:var(--outline);border-radius:28px;color:#fff;box-shadow:0 8px 0 var(--ink);margin:0 0 var(--spacing-4xl)}
.ara-hero .bl-k,.ara-hero h1,.ara-hero .ar-by{color:#fff}
.ara-hero h1{font-size:var(--display-xl);line-height:1.05;letter-spacing:-.035em;margin:0 0 var(--spacing-xl)}
.ara-hero .ar-by{margin:0}
.ara-tile{transform:rotate(2.5deg);box-shadow:0 6px 0 var(--ink);min-height:240px}
@media (min-width:900px){.ara-hero{grid-template-columns:1fr 300px;padding:var(--spacing-6xl)}}
@media (max-width:899px){.ara-hero{padding:var(--spacing-2xl) var(--spacing-xl)}.ara-tile{display:none}}
.ara-cols{max-width:1040px;margin:0 auto}
.ara-a{max-width:680px}
.ara-side{margin:0 0 var(--spacing-3xl)}
.ara-mtile{min-height:150px;margin:0 0 var(--spacing-2xl)}@media (min-width:900px){.ara-mtile{display:none}}
.ara-side .kt{margin-top:0}
.ara-toc{padding:var(--spacing-xl);border:2px dashed var(--ink);border-radius:var(--radius-2xl)}
.ara-toc ol{margin:0;padding-left:1.3em;font-size:var(--text-sm);line-height:1.45}.ara-toc li{margin:6px 0}
@media (min-width:1100px){.ara-side{float:right;clear:right;width:300px;margin:0 -360px var(--spacing-2xl) 0;font-size:var(--text-sm)}.ara-side .kt{font-size:var(--text-sm)}
  .ara-a .brk,.ara-a .yp{margin-left:-24px;margin-right:-24px}}

/* ---------- B. Answer first ---------- */
.arb-h{max-width:760px;margin:0 auto var(--spacing-2xl)}
.arb-h h1{font-size:var(--display-lg);line-height:1.1;letter-spacing:-.03em}
.arb-cols{display:grid;gap:var(--spacing-3xl)}
.arb-a{min-width:0;max-width:680px}
.arb-rail{display:none}
@media (min-width:1100px){.arb-cols{grid-template-columns:220px minmax(0,680px);justify-content:center;gap:var(--spacing-6xl)}
  .arb-h{max-width:948px;padding-left:268px}
  .arb-rail{display:block}.arb-rail nav{position:sticky;top:24px}
  .arb-rail .label{display:flex;justify-content:space-between;margin:0 0 var(--spacing-md)}.arb-rail [data-pct]{color:var(--brand-700)}
  .arb-rail ol{list-style:none;margin:0;padding:0;border-left:3px solid var(--gray-200)}
  .arb-rail a{display:block;padding:7px 12px;margin-left:-3px;border-left:3px solid transparent;text-decoration:none;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:600;line-height:1.35}
  .arb-rail a.on{border-left-color:var(--brand-600);color:var(--ink);font-weight:800;background:var(--brand-50)}
  .arb-toc{display:none}}
.arb-ans{display:grid;gap:var(--spacing-xl);padding:var(--spacing-2xl);border:var(--outline);border-radius:24px;box-shadow:0 6px 0 var(--ink);margin:var(--spacing-2xl) 0}
.arb-num{display:flex;flex-direction:column;gap:var(--spacing-md);color:#fff}
.arb-ans .kt{margin:0;font-size:var(--text-md)}
@media (min-width:760px){.arb-ans{grid-template-columns:200px 1fr;align-items:start}}
.arb-toc{margin:0 0 var(--spacing-3xl);border:var(--outline);border-radius:var(--radius-2xl);background:var(--color-bg-primary)}
.arb-toc summary{cursor:pointer;padding:var(--spacing-lg) var(--spacing-xl);font-weight:800;color:var(--color-text-primary);min-height:44px}
.arb-toc ol{margin:0;padding:0 var(--spacing-xl) var(--spacing-lg) 2.6em;font-size:var(--text-md)}

/* ---------- C. Calendar alongside ---------- */
.arc-hero{display:grid;gap:var(--spacing-2xl);padding:var(--spacing-2xl);border:var(--outline);border-radius:28px;background:var(--color-bg-primary);box-shadow:0 8px 0 var(--ink);margin:0 0 var(--spacing-4xl)}
.arc-hero h1{font-size:var(--display-lg);line-height:1.1;letter-spacing:-.03em}
.arc-hero .ar-lead p:last-child{margin-bottom:0}
.arc-htile{min-height:140px}
@media (min-width:900px){.arc-hero{grid-template-columns:1fr 340px;padding:var(--spacing-5xl);align-items:stretch}.arc-htile{min-height:320px}}
.arc-cols{display:grid;gap:var(--spacing-3xl)}
.arc-a{min-width:0;max-width:680px}
.arc-panel{display:none}
@media (min-width:1100px){.arc-cols{grid-template-columns:minmax(0,680px) 380px;justify-content:space-between}
  .arc-panel{display:block}.arc-stick{position:sticky;top:24px;display:flex;flex-direction:column;gap:var(--spacing-lg)}
  .arc-stick .label{display:flex;justify-content:space-between;margin:0}.arc-stick [data-pct]{color:var(--brand-700)}
  .arc-scene .brk,.arc-scene .yp{margin:0}.arc-scene .yp-l{max-height:340px;overflow:auto}
  .arc-scene{animation:arcin .25s ease}
  .arc-inline{display:none}}
@keyframes arcin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.arc-scene{animation:none}}
.arc-tile{min-height:260px}

/* ================= A2 "Cover story, simpler" (picked A, 2026-10-03 feedback) =================
   Few boxes, one colour hero, big friendly numbers, a tappable year, day tiles, a quiet sticky chapter list. */
.ar-a2{--a2-gap:72px}
.a2-hero{position:relative;display:grid;gap:var(--spacing-2xl);align-items:center;padding:var(--spacing-3xl) var(--spacing-2xl);border-radius:32px;color:#fff;margin:0 0 var(--spacing-3xl);overflow:hidden}
.a2-hero::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.a2-k{display:inline-block;margin:0 0 var(--spacing-lg);font-size:var(--text-sm);font-weight:800;background:#fff;color:var(--ink);border-radius:var(--radius-full);padding:4px 12px}
.a2-hero h1{color:#fff;font-size:var(--display-xl);line-height:1.04;letter-spacing:-.04em;margin:0 0 var(--spacing-lg);max-width:15ch;text-wrap:balance}
.a2-by{margin:0;font-size:var(--text-sm);color:rgba(255,255,255,.85)}.a2-by a{color:#fff;font-weight:800}
.a2-tile{background:transparent;border:0;min-height:0;padding:0;align-items:flex-start;gap:var(--spacing-md)}
.a2-tile .bl-flag{display:none}
.a2-tile .bl-num{font-size:7rem;padding:8px 26px;border-radius:24px;box-shadow:0 8px 0 var(--ink);transform:rotate(-5deg);animation:a2pop .6s cubic-bezier(.3,1.6,.5,1) both .1s}
.a2-tile .bl-lab{font-size:var(--text-md);max-width:18ch;color:#fff}
.a2-hero:hover .bl-num{animation:a2wig .5s ease}
@keyframes a2pop{from{transform:rotate(-5deg) scale(.4);opacity:0}to{transform:rotate(-5deg) scale(1);opacity:1}}
@keyframes a2wig{0%,100%{transform:rotate(-5deg)}30%{transform:rotate(3deg) scale(1.04)}60%{transform:rotate(-8deg)}}
@media (min-width:900px){.a2-hero{grid-template-columns:1fr auto;padding:var(--spacing-6xl) var(--spacing-6xl)}}
@media (max-width:899px){.a2-tile{display:none}.a2-hero{padding:var(--spacing-2xl) var(--spacing-xl);border-radius:24px;margin-bottom:var(--spacing-2xl)}.a2-hero h1{font-size:var(--display-sm)}.a2-k{margin-bottom:var(--spacing-md)}}

/* layout: one reading column; on wide screens a quiet right rail (takeaways scroll away, chapters stick) */
.a2-a{position:relative;max-width:680px}
.a2-a .ar-lead p{font-size:1.25rem;line-height:1.6;color:var(--color-text-primary)}
@media (min-width:1100px){.ar-a2 .a2-a{max-width:none;padding-right:calc(250px + var(--a2-gap))}.a2-a>*{max-width:680px}
  .a2-side{position:absolute;top:0;right:0;bottom:0;width:250px;max-width:none}
}

/* key takeaways: no box, numbered friendly dots */
.ar-a2 .kt{background:none;border:0;padding:0;margin:var(--spacing-xl) 0 var(--spacing-2xl);counter-reset:kt}
.ar-a2 .kt-h{background:none;border:0;padding:0;font-size:var(--text-xs);color:var(--brand-700);letter-spacing:.08em}
.ar-a2 .kt ul{list-style:none;padding:0}
.ar-a2 .kt li{position:relative;padding-left:40px;margin:0 0 var(--spacing-lg);font-size:var(--text-md);line-height:1.5;color:var(--color-text-primary)}
.ar-a2 .kt li::before{counter-increment:kt;content:counter(kt);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:var(--text-sm);font-weight:900;color:var(--ink);background:var(--color-sticker)}
.ar-a2 .kt li:nth-child(3n+2)::before{background:var(--pink-200)}.ar-a2 .kt li:nth-child(3n)::before{background:var(--brand-100)}
@media (min-width:1100px){.ar-a2 .kt{margin-top:6px}.ar-a2 .kt li{font-size:var(--text-sm)}}

/* chapters: short labels on a thin progress line; collapsed button on small screens */
.a2-toc{position:relative;font-size:var(--text-sm)}
.a2-tl{display:none;justify-content:space-between;margin:0 0 var(--spacing-md);font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary)}
.a2-tl [data-pct]{color:var(--brand-700)}
.a2-toc ol{list-style:none;margin:0;padding:0;position:relative}
.a2-toc li{margin:0}
.a2-toc a{position:relative;display:flex;align-items:center;gap:14px;min-height:36px;padding:2px 0;color:var(--color-text-tertiary);text-decoration:none;font-weight:600;transition:color .2s,transform .2s}
.a2-toc a:hover{color:var(--ink);transform:translateX(3px)}
.a2-toc a i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--color-bg-primary);border:2px solid var(--gray-300);transition:all .2s;position:relative;z-index:1}
.a2-toc a.done i{background:var(--brand-600);border-color:var(--brand-600)}
.a2-toc a.on{color:var(--ink);font-weight:800}
.a2-toc a.on i{width:14px;height:14px;margin:0 -2px;background:var(--color-sticker);border-color:var(--ink);box-shadow:0 0 0 4px var(--brand-100)}
.a2-track{display:none}
.a2-tb{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0 var(--spacing-lg);font:inherit;font-weight:800;color:var(--ink);background:var(--brand-25);border:0;border-radius:var(--radius-full);cursor:pointer}
.a2-tb::after{content:"";width:8px;height:8px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.a2-tb[aria-expanded="true"]::after{transform:rotate(225deg)}
.a2-tn{margin-left:auto;margin-right:var(--spacing-md);font-size:var(--text-xs);background:#fff;border-radius:var(--radius-full);padding:2px 8px}
.a2-tb[aria-expanded="false"]+.a2-tl+.a2-track+ol{display:none}
@media (max-width:1099px){.a2-toc{margin:0 0 var(--spacing-3xl)}.a2-toc ol{padding:var(--spacing-md) var(--spacing-lg) 0}}
@media (min-width:1100px){.a2-toc{position:sticky;top:32px;margin-top:var(--spacing-5xl)}.a2-tb{display:none}.a2-tl{display:flex}.a2-toc ol{display:block!important}
  .a2-track{display:block;position:absolute;left:4px;top:calc(var(--spacing-md) + 1.5em + 18px);bottom:18px;width:2px;background:var(--gray-300);border-radius:2px}
  .a2-track span{display:block;width:100%;height:100%;background:var(--brand-600);transform-origin:0 0;transform:scaleY(var(--p,0));transition:transform .15s linear}}
.a2-prog{display:block}@media (min-width:1100px){.a2-prog{display:none}}

/* body rhythm: chapter number pills, airy sections */
.ar-a2 .post-b{counter-reset:ch}
.ar-a2 .post-b h2{counter-increment:ch;font-size:var(--display-sm);letter-spacing:-.025em;line-height:1.15;margin:var(--spacing-7xl,96px) 0 var(--spacing-xl)}
.ar-a2 .post-b h2::before{content:counter(ch,decimal-leading-zero);display:table;margin:0 0 var(--spacing-md);font-size:var(--text-xs);font-weight:900;letter-spacing:.08em;color:var(--brand-700);background:var(--brand-50);padding:3px 10px;border-radius:var(--radius-full)}
@media (max-width:759px){.ar-a2 .post-b h2{font-size:var(--display-xs);margin-top:var(--spacing-6xl)}}


/* best single days: calendar-page day tiles */
.dt-g{list-style:none;margin:var(--spacing-2xl) 0 var(--spacing-md);padding:0;display:grid;gap:var(--spacing-xl) var(--spacing-2xl)}
@media (min-width:640px){.dt-g{grid-template-columns:1fr 1fr}}
.dt{display:flex;gap:var(--spacing-lg);align-items:center;margin:0!important}
.dt-cal{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;width:84px;border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 0 var(--ink);transform:rotate(-3deg);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.dt:nth-child(even) .dt-cal{transform:rotate(3deg)}
.dt:hover .dt-cal{transform:rotate(0) scale(1.06)}
.dt-mon{align-self:stretch;text-align:center;font-size:.6875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:4px 0;color:#fff;background:var(--brand-600)}
.dt-p .dt-mon{background:var(--pink-500)}.dt-s .dt-mon{background:var(--color-sticker);color:var(--ink)}
.dt-day{font-size:2.25rem;font-weight:900;line-height:1.05;color:var(--ink);padding-top:4px}
.dt-wd{font-size:.6875rem;font-weight:700;color:var(--color-text-tertiary);padding:0 0 6px}
.dt-more{position:absolute;top:-2px;right:-2px;font-size:.625rem;font-weight:900;background:var(--color-sticker);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-full);padding:0 5px}
.dt-t{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.4}
.dt-h{font-size:var(--text-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-700)}
.dt-deal{font-size:var(--text-md);color:var(--ink)}
.dt-k{font-size:var(--text-sm);color:var(--color-text-tertiary)}

/* calendar cards: numbers left, a real mini calendar right */
.bk2{display:grid;gap:var(--spacing-2xl);margin:var(--spacing-2xl) 0;padding:var(--spacing-2xl);border-radius:28px;background:#fff;box-shadow:0 0 0 2px var(--ink),0 6px 0 2px var(--ink)}
.bk2 figcaption{display:flex;flex-direction:column;gap:2px;margin:0 0 var(--spacing-xl)}
.bk2-n{font-size:var(--text-xl);font-weight:900;color:var(--ink);letter-spacing:-.01em}
.bk2-r{font-size:var(--text-sm);color:var(--color-text-tertiary);font-weight:600}
.bk2-s{display:flex;flex-wrap:wrap;gap:var(--spacing-lg) var(--spacing-2xl);margin:0 0 var(--spacing-xl)}
.bk2-s span{display:flex;flex-direction:column;font-size:var(--text-xs);font-weight:700;color:var(--color-text-tertiary);line-height:1.3}
.bk2-s b{font-size:2.25rem;font-weight:900;line-height:1;color:var(--ink);letter-spacing:-.03em}
.bk2-s .bk2-hi b{color:#fff;background:var(--pink-700);padding:2px 10px;border-radius:12px;transform:rotate(-3deg);align-self:flex-start;margin-bottom:4px}
.bk2-k{margin:0 0 var(--spacing-lg);font-size:var(--text-sm);line-height:1.5;color:var(--color-text-secondary)}
.bk2-lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:var(--text-xs);font-weight:700;color:var(--color-text-tertiary)}
.bk2-lg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bk2-lg .h::before{background:var(--color-day-holiday)}.bk2-lg .l::before{background:var(--color-day-leave)}.bk2-lg .w::before{background:var(--color-day-weekend)}
.mc{align-self:center}
.mc-h,.mc-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mc-h{margin:0 0 6px}.mc-h span{text-align:center;font-size:.6875rem;font-weight:800;color:var(--gray-500)}
.mc-d{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:10px;font-weight:800;font-size:var(--text-sm);color:var(--ink);background:var(--color-day-work)}
.mc-d i{position:absolute;top:1px;left:0;right:0;text-align:center;font-style:normal;font-size:.5625rem;font-weight:800;text-transform:uppercase;opacity:.8}
.mc-d.m{padding-top:9px}
.mc-d.w{background:var(--color-day-weekend)}.mc-d.h{background:var(--color-day-holiday);color:#fff}.mc-d.l{background:var(--color-day-leave);color:#fff}
.mc-d.l::after{content:"";position:absolute;inset:-3px;border:2px dashed var(--pink-700);border-radius:12px}
@media (min-width:760px){.bk2{grid-template-columns:1fr minmax(0,300px);align-items:center;padding:var(--spacing-3xl)}}
@media (max-width:759px){.bk2{padding:var(--spacing-xl);margin-left:calc(-1 * var(--spacing-sm));margin-right:calc(-1 * var(--spacing-sm))}.bk2-s b{font-size:1.875rem}}

/* FAQ as tap-to-open questions */
.a2-faq{border-top:2px solid var(--gray-200)}.a2-faq:last-of-type{border-bottom:2px solid var(--gray-200)}
.a2-faq summary{display:flex;justify-content:space-between;gap:var(--spacing-lg);align-items:center;min-height:56px;padding:var(--spacing-md) 0;cursor:pointer;list-style:none;font-weight:800;color:var(--ink);font-size:var(--text-lg)}
.a2-faq summary::-webkit-details-marker{display:none}
.a2-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-sticker);font-size:1.25rem;font-weight:900;transition:transform .2s}
.a2-faq[open] summary::after{transform:rotate(45deg)}
.a2-faq>div{padding:0 0 var(--spacing-lg)}
.ar-a2 .bl-cta{border-radius:28px}
@media (prefers-reduced-motion:reduce){.a2-tile .bl-num,.a2-hero:hover .bl-num,.gl-pop{animation:none}.gl-b,.dt-cal,.a2-toc a{transition:none}}
.ar-a2 details.a2-faq{background:none;border:0;border-top:2px solid var(--gray-200);border-radius:0;margin:0}
.ar-a2 details.a2-faq:last-of-type{border-bottom:2px solid var(--gray-200)}
.ar-a2 details.a2-faq summary{padding:var(--spacing-lg) 0}
.ar-a2 details.a2-faq[open] summary::after{content:"+"}
.ar-a2 details.a2-faq p{padding:0;margin:0 0 var(--spacing-md)}
.ar-a2 details.gl-d{background:none;border:0;margin:var(--spacing-md) 0 0}
.ar-a2 details.gl-d summary{padding:0}.ar-a2 details.gl-d summary::after{content:none}
.ar-a2 details.gl-d p{padding:0}

/* A3 fixes: '+N more' sits under the weekday (was over the month band); hero sticker never clipped */
.dt-more{position:static;margin:-2px 0 6px;padding:1px 6px;border-width:1.5px}
.a2-tile{overflow:visible;width:250px;padding:20px 14px 10px;justify-content:center}
.a2-tile .bl-num{font-size:6rem;background:var(--color-sticker)}
.a2-tile .bl-lab{padding-left:4px;max-width:none}
@media (min-width:900px) and (max-width:1199px){.a2-hero{padding:var(--spacing-5xl) var(--spacing-4xl)}.a2-hero h1{font-size:var(--display-lg)}.a2-tile{width:210px}.a2-tile .bl-num{font-size:4.75rem}}

/* day tiles are buttons (popover on hover/tap/focus); multi-day bookings fan out as small pages, no badges */
.dt-wrap{position:relative}
.dt-btn{display:flex;gap:var(--spacing-lg);align-items:center;width:100%;padding:8px;margin:-8px;font:inherit;text-align:left;color:inherit;background:none;border:0;border-radius:18px;cursor:pointer;transition:background .2s}
.dt-btn:hover,.dt-btn.cur{background:var(--brand-25)}
.dt-btn:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px}
.dt-btn:hover .dt-cal,.dt-btn.cur .dt-cal{transform:rotate(0) scale(1.06)}
.dt-fan{position:relative;display:block;flex:none;width:84px;height:92px}
.dt-pg{position:absolute;top:6px;left:calc(var(--k) * 14px);display:flex;flex-direction:column;align-items:center;width:52px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 0 var(--ink);transform:rotate(calc(var(--k) * 7deg - 7deg));transform-origin:50% 100%;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.dt-n2 .dt-pg{left:calc(var(--k) * 24px)}
.dt-pg .dt-mon{font-size:.625rem;padding:2px 0}
.dt-pg .dt-day{font-size:1.375rem;padding-top:2px}
.dt-pg .dt-wd{font-size:.625rem;padding-bottom:4px}
.dt-btn:hover .dt-pg,.dt-btn.cur .dt-pg{transform:rotate(calc(var(--k) * 12deg - 12deg)) translateY(-3px)}
.dt-more{display:none}
@media (prefers-reduced-motion:reduce){.dt-pg,.dt-btn{transition:none}}
.dt-btn>span[aria-hidden]{display:block;flex:none}
.dt-pg{width:34px;left:calc(var(--k) * 25px);transform:rotate(calc(var(--k) * 6deg - 6deg))}
.dt-n2 .dt-pg{left:calc(12px + var(--k) * 28px)}
.dt-pg .dt-mon{font-size:.5625rem;letter-spacing:.02em}.dt-pg .dt-day{font-size:1.125rem}.dt-pg .dt-wd{font-size:.5625rem}
.dt-btn:hover .dt-pg,.dt-btn.cur .dt-pg{transform:rotate(calc(var(--k) * 10deg - 10deg)) translateY(-3px)}

/* A4: year at a glance as the homepage mini year calendar (4 / 3 / 2 months per row) */
.gl4 .gl-cal{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-xl) var(--spacing-lg);font-size:.6875rem;margin:0 0 var(--spacing-lg)}
.gl4 .mo h3{font-size:1.15em}
.gl4 .days i[data-pop]{cursor:pointer}
.gl4 .days i[data-pop]:hover{z-index:1}
.gl4 .days i.on::after{content:"";position:absolute;inset:1px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);pointer-events:none}
.gl4 .days i.on.rs::after{border-left:2px solid var(--ink);border-radius:999px 0 0 999px}.gl4 .days i.on.re::after{border-right:2px solid var(--ink);border-radius:0 999px 999px 0}
.gl4 .days i.on.rs.re::after{border-radius:999px}
.yb{position:absolute;z-index:3;top:-.9em;left:-.55em;min-width:1.85em;height:1.85em;padding:0 .3em;display:grid;place-items:center;font:inherit;font-size:.95em;font-weight:900;line-height:1;color:#fff;background:var(--brand-600);border:2px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 var(--ink);cursor:pointer;transform:rotate(-8deg);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.yb.gl-p{background:var(--pink-500)}.yb.gl-s{background:var(--color-sticker);color:var(--ink)}
.yb:hover,.yb.cur,.yb.on{transform:rotate(0) scale(1.18)}
.yb:focus-visible{outline:3px solid var(--brand-500);outline-offset:2px}
.year.hl .yb:not(.on){opacity:.35}
.gl4 .cal-legend{margin:var(--spacing-md) 0 0}
/* 4 / 3 / 2 per row, but never narrower than a month grid needs (drops to fewer per row with large text) */
.gl4 .gl-cal{--g:var(--spacing-lg);gap:var(--spacing-xl) var(--g);grid-template-columns:repeat(auto-fill,minmax(max(10.2em,calc((100% - 3 * var(--g)) / 4 - 1px)),1fr))}
@media (max-width:1099px){.gl4 .gl-cal{grid-template-columns:repeat(auto-fill,minmax(max(10.2em,calc((100% - 2 * var(--g)) / 3 - 1px)),1fr))}}
@media (max-width:640px){.gl4 .gl-cal{--g:var(--spacing-md);row-gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(max(10.2em,calc((100% - var(--g)) / 2 - 1px)),1fr))}}
@media (prefers-reduced-motion:reduce){.yb{transition:none}}
.yb{top:-.75em;left:auto;right:-.7em;min-width:1.6em;height:1.6em;font-size:.85em;padding:0 .25em}
.gl4 .days i[data-s]{z-index:2}