/* Post components: shared blog layout, colours from Content UI Kit tokens. */
.blog-layout .blog-wrapper .tw-calendar { table-layout: fixed; }
.blog-layout .blog-wrapper .tw-calendar tbody th { font-size: inherit; }
.blog-layout .blog-wrapper .tw-calendar :is(th, td):first-child { inline-size: 45%; }
.blog-layout .blog-wrapper .tw-calendar time { white-space: nowrap; }
.blog-layout .blog-wrapper .tw-sub { display: block; font-size: .8125rem; color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
/* Week tables: one table per region, grouped by series; past weeks recede, the current (or next) week is marked by the script. */
.blog-layout .blog-wrapper .tw-calendar .tw-group-head th { padding-block: 1.4rem .5rem; font-size: .8125rem; color: var(--mcui-muted, oklch(.777 0.038 275.2)); border-block-end-color: var(--mcui-line, oklch(.777 0.038 275.2 / .12)); }
.blog-layout .blog-wrapper .tw-calendar tbody:first-of-type .tw-group-head th { padding-block-start: .9rem; }
.blog-layout .blog-wrapper .tw-calendar tr.is-past > * { color: var(--mcui-muted, oklch(.777 0.038 275.2)); font-weight: 400; }
.blog-layout .blog-wrapper .tw-calendar tr.is-now > * { color: var(--mcui-ink, oklch(.956 0.007 277.2)); }
.blog-layout .blog-wrapper .tw-calendar tr.is-now > :first-child { position: relative; }
.blog-layout .blog-wrapper .tw-calendar tr.is-now > :first-child::before { content: ""; position: absolute; inset-block: .7rem; inset-inline-start: -.75rem; inline-size: 2px; border-radius: 1px; background: var(--mcui-tint, oklch(.705 .164 288.2)); }
.blog-layout .blog-wrapper .tw-now { display: block; font-size: .8125rem; font-weight: 700; color: var(--mcui-tint, oklch(.705 .164 288.2)); }
/* Week types: one colour each, in the timeline and in the text. Bronze is Timewalking's own colour; blue the regular weeks.
   A diamond marks weeks with a Timewalking raid, so the code never rests on colour alone. */
.blog-layout .blog-wrapper { --wow-tw-turbulent: oklch(.80 .13 75); --wow-tw-regular: oklch(.76 .11 235); }
.blog-layout .blog-wrapper .tw-key { --c: var(--wow-tw-regular); display: inline-flex; align-items: center; gap: .45rem; }
.blog-layout .blog-wrapper .tw-key--turbulent { --c: var(--wow-tw-turbulent); }
.blog-layout .blog-wrapper .tw-key::before { content: ""; flex: none; inline-size: .625rem; block-size: .625rem; border-radius: 2px; background: var(--c); }
.blog-layout .blog-wrapper .tw-key--raid::before { inline-size: .45rem; block-size: .45rem; margin-inline: .09rem; border-radius: 1px; rotate: 45deg; background: var(--mcui-ink, oklch(.956 0.007 277.2)); }
.blog-layout .blog-wrapper .tw-group-head .tw-key { color: var(--c); }
.blog-layout .blog-wrapper .tw-raid { display: flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 400; color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-raid::before { content: ""; flex: none; inline-size: .4rem; block-size: .4rem; border-radius: 1px; rotate: 45deg; background: currentColor; }
/* Year timeline: one mark per event week on a Jan–Dec track, series brackets and regular-week labels under it, a line for today. */
.blog-layout .blog-wrapper .tw-timeline { margin-block: 1.25rem 0; margin-inline: 0; }
.blog-layout .blog-wrapper .tw-tl-axis { position: relative; block-size: 1.25rem; font-size: .75rem; line-height: 1.25rem; color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-tl-axis > span { position: absolute; inset-inline-start: var(--s); padding-inline-start: .3rem; }
.blog-layout .blog-wrapper .tw-tl-track { position: relative; block-size: 2.75rem; margin-block-start: .25rem; border: 1px solid var(--mcui-line, oklch(.777 0.038 275.2 / .12)); border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, oklch(.286 0.038 273.0)); }
.blog-layout .blog-wrapper .tw-tl-tick { position: absolute; inset-block: 0; inset-inline-start: var(--s); inline-size: 1px; background: var(--mcui-row-line, oklch(.777 0.038 275.2 / .07)); }
.blog-layout .blog-wrapper .tw-tl-week { --c: var(--wow-tw-regular); position: absolute; inset-block: .8rem .55rem; inset-inline-start: calc(var(--s) + 1px); inline-size: max(3px, calc(var(--w) - 2px)); border-radius: 2px; background: var(--c); }
.blog-layout .blog-wrapper .tw-tl-week.is-turbulent { --c: var(--wow-tw-turbulent); }
.blog-layout .blog-wrapper .tw-tl-week.is-past { background: color-mix(in oklch, var(--c) 40%, transparent); }
.blog-layout .blog-wrapper .tw-tl-week.is-now { outline: 2px solid var(--mcui-ink, oklch(.956 0.007 277.2)); outline-offset: 1px; }
.blog-layout .blog-wrapper .tw-tl-week.has-raid::after { content: ""; position: absolute; inset-block-start: -.5rem; inset-inline-start: 50%; inline-size: 5px; block-size: 5px; translate: -50% 0; rotate: 45deg; border-radius: 1px; background: var(--mcui-ink, oklch(.956 0.007 277.2)); }
.blog-layout .blog-wrapper .tw-tl-week.has-raid.is-past::after { background: color-mix(in oklch, var(--mcui-ink, oklch(.956 0.007 277.2)) 45%, transparent); }
.blog-layout .blog-wrapper .tw-tl-today { position: absolute; inset-block: -.35rem; inset-inline-start: var(--s); inline-size: 2px; margin-inline-start: -1px; border-radius: 1px; background: var(--mcui-ink, oklch(.956 0.007 277.2)); }
.blog-layout .blog-wrapper .tw-tl-under { position: relative; block-size: 2.5rem; margin-block-start: .4rem; font-size: .75rem; line-height: 1.1rem; }
.blog-layout .blog-wrapper .tw-tl-series { position: absolute; inset-inline-start: var(--s); inline-size: var(--w); padding-block-start: .3rem; border-block-start: 1px solid var(--wow-tw-turbulent); font-weight: 700; white-space: nowrap; color: var(--wow-tw-turbulent); }
.blog-layout .blog-wrapper .tw-tl-series::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0; block-size: .3rem; border-inline: 1px solid var(--wow-tw-turbulent); }
.blog-layout .blog-wrapper .tw-tl-tag { position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--s) + var(--w) / 2); translate: -50% 0; font-weight: 700; white-space: nowrap; color: var(--wow-tw-regular); }
.blog-layout .blog-wrapper .tw-tl-tag.is-low { inset-block-start: 1.25rem; }
.blog-layout .blog-wrapper .tw-tl-tag.is-end { translate: -100% 0; }
.blog-layout .blog-wrapper .tw-tl-tag.is-past { display: none; }
.blog-layout .blog-wrapper .tw-tl-keys { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-block: .5rem 0; margin-inline: 0; font-size: .8125rem; color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-tl-now { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem 1rem; min-block-size: 2.9rem; max-inline-size: none; margin-block: .75rem 0; margin-inline: 0; padding-block-start: .75rem; border-block-start: 1px solid var(--mcui-row-line, oklch(.777 0.038 275.2 / .07)); font-size: .875rem; line-height: 1.5; color: var(--mcui-copy, oklch(.868 0.021 274.0)); }
.blog-layout .blog-wrapper .tw-tl-now b { font-weight: 700; color: var(--mcui-ink, oklch(.956 0.007 277.2)); }
.blog-layout .blog-wrapper .tw-tl-now > span { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.blog-layout .blog-wrapper .tw-tl-now .tw-tl-label { color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-tl-dates { white-space: nowrap; }
.blog-layout .blog-wrapper .tw-tl-now .is-now .tw-tl-label { color: var(--mcui-tint, oklch(.705 .164 288.2)); font-weight: 700; }
.blog-layout .blog-wrapper .tw-us-calendar { padding-inline: 1rem; border: 1px solid var(--mcui-line, oklch(.777 0.038 275.2 / .12)); border-radius: var(--mcui-radius, 8px); }
.blog-layout .blog-wrapper .tw-us-calendar > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 3rem; list-style: none; cursor: pointer; font-weight: 700; color: var(--mcui-ink, oklch(.956 0.007 277.2)); }
.blog-layout .blog-wrapper .tw-us-calendar > summary::-webkit-details-marker { display: none; }
.blog-layout .blog-wrapper .tw-us-calendar > summary::after { content: ""; flex: none; inline-size: 1rem; block-size: 1rem; background: currentColor; -webkit-mask: var(--mcui-chevron-mask) center / 1rem no-repeat; mask: var(--mcui-chevron-mask) center / 1rem no-repeat; }
.blog-layout .blog-wrapper .tw-us-calendar[open] > summary::after { rotate: 180deg; }
.blog-layout .blog-wrapper .tw-us-calendar > summary:focus-visible { outline: 2px solid var(--mcui-focus, oklch(.956 0.007 277.2)); outline-offset: 2px; }
.blog-layout .blog-wrapper .tw-us-calendar > table { margin-block: 0 1rem; }
/* Expansion cards: the expansion's 2026 EU weeks in the timeline colours, its dungeons, vendor and raid. */
.blog-layout .blog-wrapper .tw-exp-grid { --flow-space: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.blog-layout .blog-wrapper .tw-exp { display: flex; flex-direction: column; padding-block: 1rem; padding-inline: 1.1rem; border: 1px solid var(--mcui-line, oklch(.777 0.038 275.2 / .12)); border-radius: var(--mcui-radius-card, 12px); background: var(--mcui-reference, oklch(.286 0.038 273.0)); }
.blog-layout .blog-wrapper .tw-exp h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.blog-layout .blog-wrapper .tw-exp-weeks { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-block: .6rem 0; margin-inline: 0; }
.blog-layout .blog-wrapper .tw-wk { --c: var(--wow-tw-regular); display: inline-flex; align-items: center; gap: .35rem; padding-block: .1rem; padding-inline: .45rem .55rem; border: 1px solid color-mix(in oklch, var(--c) 40%, transparent); border-radius: 999px; font-size: .8125rem; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c); }
.blog-layout .blog-wrapper .tw-wk.is-turbulent { --c: var(--wow-tw-turbulent); }
.blog-layout .blog-wrapper .tw-wk::before { content: ""; inline-size: .4rem; block-size: .4rem; border-radius: 1px; background: var(--c); }
.blog-layout .blog-wrapper .tw-wk.is-past { border-color: var(--mcui-row-line, oklch(.777 0.038 275.2 / .07)); color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-wk.is-past::before { background: color-mix(in oklch, var(--c) 45%, transparent); }
.blog-layout .blog-wrapper .tw-wk.is-now { border-color: var(--mcui-tint, oklch(.705 .164 288.2)); background: color-mix(in oklch, var(--mcui-tint, oklch(.705 .164 288.2)) 18%, transparent); color: var(--mcui-ink, oklch(.956 0.007 277.2)); font-weight: 700; }
.blog-layout .blog-wrapper .tw-wk-none { font-size: .8125rem; color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-exp .tw-dungeons { margin-block: .75rem 0; margin-inline: 0; padding-inline-start: 1.15em; font-size: .875rem; }
.blog-layout .blog-wrapper .tw-exp .tw-dungeons > li { margin: 0; padding-inline-start: .15em; list-style-type: square; line-height: 1.6; color: var(--mcui-copy, oklch(.868 0.021 274.0)); }
.blog-layout .blog-wrapper .tw-exp .tw-dungeons > li::marker { color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-exp-note { margin-block: .5rem 0; margin-inline: 0; font-size: .8125rem; color: var(--mcui-muted, oklch(.777 0.038 275.2)); }
.blog-layout .blog-wrapper .tw-exp-meta { display: grid; gap: .35rem; margin-block: auto 0; margin-inline: 0; font-size: .8125rem; line-height: 1.45; }
.blog-layout .blog-wrapper .tw-exp-meta::before { content: ""; display: block; margin-block: .85rem .4rem; border-block-start: 1px solid var(--mcui-row-line, oklch(.777 0.038 275.2 / .07)); }
.blog-layout .blog-wrapper .tw-exp-meta > div { display: grid; grid-template-columns: .9rem minmax(0, 1fr); gap: .5rem; align-items: start; }
.blog-layout .blog-wrapper .tw-exp-meta dt { position: relative; block-size: 1.15rem; overflow: clip; font-size: 0; }
.blog-layout .blog-wrapper .tw-exp-meta dt::before { content: ""; position: absolute; inset-block-start: .15rem; inset-inline: 0; block-size: .9rem; background: var(--mcui-muted, oklch(.777 0.038 275.2)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14.5s4.5-4.2 4.5-7.75a4.5 4.5 0 0 0-9 0C3.5 10.3 8 14.5 8 14.5Z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6.75' r='1.6' fill='%23000'/%3E%3C/svg%3E") center / .9rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14.5s4.5-4.2 4.5-7.75a4.5 4.5 0 0 0-9 0C3.5 10.3 8 14.5 8 14.5Z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6.75' r='1.6' fill='%23000'/%3E%3C/svg%3E") center / .9rem no-repeat; }
.blog-layout .blog-wrapper .tw-exp-meta .is-raid dt::before { inset-block-start: .38rem; inset-inline: .22rem; block-size: .45rem; -webkit-mask: none; mask: none; rotate: 45deg; border-radius: 1px; background: var(--mcui-ink, oklch(.956 0.007 277.2)); }
.blog-layout .blog-wrapper .tw-exp-meta dd { margin: 0; color: var(--mcui-copy, oklch(.868 0.021 274.0)); }
.blog-layout .blog-wrapper .tw-exp-meta .is-raid dd { font-weight: 700; }
.blog-layout .blog-wrapper .tw-chat { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 2.75rem; padding-block: 0; padding-inline: 1.1rem; border: 1px solid var(--mcui-line, oklch(.777 0.038 275.2 / .12)); border-radius: var(--mcui-radius-sm, 4px); background: var(--mcui-reference, oklch(.265 0.034 274.2)); color: var(--mcui-ink, oklch(.956 0.007 277.2)); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.blog-layout .blog-wrapper .tw-chat::before { content: ""; inline-size: 1rem; block-size: 1rem; background: currentColor; -webkit-mask: var(--mcui-chat-mask) center / 1rem no-repeat; mask: var(--mcui-chat-mask) center / 1rem no-repeat; }
.blog-layout .blog-wrapper .tw-chat:focus-visible { outline: 2px solid var(--mcui-focus, oklch(.956 0.007 277.2)); outline-offset: 2px; }
.blog-layout .blog-wrapper .tw-chat:active { scale: .98; }
@media (hover: hover) and (pointer: fine) { .blog-layout .blog-wrapper .tw-chat:hover { background: var(--mcui-reference-hover, oklch(.286 0.038 273.0)); border-color: var(--mcui-line-strong, oklch(.777 0.038 275.2 / .24)); } }
.blog-layout .blog-wrapper .tw-us-calendar > summary:active { color: var(--mcui-copy, oklch(.868 0.021 274.0)); }
/* The US table opens with a height animation where the browser supports it, like the template's change log. */
.blog-layout .blog-wrapper .tw-us-calendar { interpolate-size: allow-keywords; }
.blog-layout .blog-wrapper .tw-us-calendar::details-content { block-size: 0; overflow: clip; }
.blog-layout .blog-wrapper .tw-us-calendar[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  .blog-layout .blog-wrapper .tw-chat { transition: background-color .15s ease-out, border-color .15s ease-out, scale .12s ease-out; }
  .blog-layout .blog-wrapper .tw-us-calendar > summary::after { transition: rotate .25s ease-out; }
  .blog-layout .blog-wrapper .tw-us-calendar::details-content { transition: block-size .3s ease-out, content-visibility .3s allow-discrete; }
}