/* Generated by scripts/build-css-bundles.py from the sources below. Never hand-edit:
   change the source file and rebuild. */
/* fonts/fonts.css */
/* Generated by tools/fonts/subset.py. Never hand-edit: rerun the tool. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B0, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+2212;
}
@font-face {
  font-family: 'Cinzel fallback';
  src: local('Times New Roman'), local('Liberation Serif');
  size-adjust: 132.68%;
  ascent-override: 73.56%;
  descent-override: 28.04%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B0, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Inter fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 106.94%;
  ascent-override: 90.59%;
  descent-override: 22.56%;
  line-gap-override: 0.00%;
}
/* styles.css */
:root{--ink:#100e10;--steel:#211e1e;--steel-light:#645752;--brass:#b68b52;--brass-light:#dfbd82;--brass-dark:#765338;--horde:#a5362f;--horde-light:#da7060;--blue:#2e7ce6;--glow:#7fc4ff;--silver:#e7eef8;--violet:#8a77e8;--green:#58b46a;--muted:#a5afbe;--line:rgba(182,139,82,.25);--display:'Cinzel','Cinzel fallback',Georgia,serif;--body:'Inter','Inter fallback',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--ink);color:var(--silver);font:15px/1.7 var(--body);-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;cursor:pointer}button:disabled{cursor:wait}img{max-width:100%;display:block}button{border:0}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--glow);outline-offset:6px}::selection{background:var(--brass-dark);color:var(--silver)}[hidden]{display:none!important}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.25}h2{font-size:clamp(32px,3.6vw,49px);letter-spacing:-.025em}h2>span{color:var(--muted)}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.section{padding-top:108px;padding-bottom:108px}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:.17em;font-weight:600;line-height:1.5}.gold{color:var(--brass)}.skip-link{position:fixed;top:12px;left:12px;padding:10px 20px;transform:translateY(-200%);z-index:1000;background:var(--silver);color:var(--ink)}.skip-link:focus{transform:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 23px;min-height:52px;font-size:12px;font-weight:550;letter-spacing:.01em;transition:background .2s,border-color .2s,color .2s,transform .2s}@media (hover: hover) { .button:hover {transform:translateY(-2px)} }.button-primary{background:var(--blue);border:1px solid var(--blue);color:var(--silver)}@media (hover: hover) { .button-primary:hover {background:#2466c3;border-color:var(--glow)} }.button-primary .icon:last-child{width:17px;margin-left:8px}.button-quiet{border:1px solid rgba(231,238,248,.25);background:rgba(16,14,16,.35)}@media (hover: hover) { .button-quiet:hover, .button-outline:hover {border-color:var(--brass-light);background:rgba(182,139,82,.08)} }.button-outline{border:1px solid var(--brass);color:var(--brass-light);background:transparent}.text-link{display:inline-flex;align-items:center;gap:18px;color:var(--brass-light);font-size:12px;font-weight:500;padding-block:5px}.text-link .icon{width:20px;transition:transform .2s}@media (hover: hover) { .text-link:hover .icon {transform:translateX(5px)} }.site-header{height:94px;position:absolute;top:0;left:0;width:100%;z-index:20;border-bottom:1px solid rgba(231,238,248,.1);background:rgba(16,14,16,.45)}.header-inner{height:100%;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:12px}.brand-emblem{width:52px;height:52px;object-fit:contain}.brand>span{font:600 21px var(--display);letter-spacing:.08em;color:var(--brass-light)}.main-nav{display:flex;align-items:center;gap:30px;margin-left:auto}.main-nav>a{font-size:11px;color:var(--muted);position:relative;padding:12px 0;transition:color .2s}@media (hover: hover) { .main-nav>a:hover {color:var(--silver)} }.main-nav>a::after{content:"";position:absolute;bottom:4px;left:0;right:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .2s}@media (hover: hover) { .main-nav>a:hover::after {transform:scaleX(1)} }.header-channel{display:flex;align-items:center;gap:10px;margin-left:12px;padding:10px 0 10px 26px;border-left:1px solid var(--line);font-size:11px;color:var(--brass-light)}.header-channel .icon{width:17px}.header-channel .arrow{width:14px}@media (hover: hover) { .header-channel:hover {color:var(--silver)} }.menu-toggle{display:none}.hero{position:relative;isolation:isolate;height:780px;overflow:hidden;background:var(--ink)}.hero-art{position:absolute;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-3}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(16,14,16,.82) 0%,rgba(16,14,16,.54) 35%,rgba(16,14,16,.12) 61%,rgba(16,14,16,.04) 100%),linear-gradient(0deg,var(--ink),transparent 20%,transparent 75%,rgba(16,14,16,.3))}.hero-content{position:relative;padding-top:235px}.hero-eyebrow{display:flex;align-items:center;gap:12px;color:var(--silver);font-size:11px;letter-spacing:.2em}.small-rule{display:block;width:36px;height:1px;background:var(--brass)}.hero h1{font-size:clamp(62px,7.6vw,111px);text-transform:uppercase;font-weight:600;letter-spacing:.025em;line-height:1.25;margin-top:17px;color:var(--brass-light);text-shadow:0 2px 12px rgba(0,0,0,.3)}.hero-context{font-size:11px;color:var(--silver);letter-spacing:.045em;margin-top:7px}.hero-context>span{padding-inline:6px;color:var(--brass)}.hero-description{max-width:470px;font-size:15px;line-height:1.9;color:#b7c0ce;margin-top:28px}.hero-actions{display:flex;gap:14px;margin-top:32px}.hero-scroll{display:inline-flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:74px}.hero-scroll .icon{width:14px;color:var(--brass)}.scroll-line{width:40px;height:1px;background:var(--line)}@media (hover: hover) { .hero-scroll:hover {color:var(--silver)} }.hero-art-caption{position:absolute;right:56px;bottom:95px;display:flex;align-items:center;gap:14px;text-transform:uppercase;font-size:8px;line-height:1.9;letter-spacing:.16em;color:rgba(231,238,248,.55)}.hero-art-caption b{font-weight:400;font-size:9px;color:var(--silver)}.tiny-diamond{width:7px;height:7px;border:1px solid var(--brass);transform:rotate(45deg)}.hero-index{position:absolute;top:177px;right:56px;writing-mode:vertical-rl;font-size:8px;letter-spacing:.22em;color:rgba(231,238,248,.5)}.hero-index span{margin-block:12px;color:var(--brass)}.schedule-section{position:relative;margin-top:-20px;z-index:3;scroll-margin-top:40px}.schedule-panel{display:grid;grid-template-columns:1.18fr 1fr auto;align-items:center;border:1px solid var(--line);border-top-color:var(--brass-dark);background:var(--steel);padding:28px 32px;position:relative;gap:30px}.schedule-panel::before,.schedule-panel::after{content:"";position:absolute;width:5px;height:5px;background:var(--brass-dark);top:-3px;transform:rotate(45deg)}.schedule-panel::before{left:-3px}.schedule-panel::after{right:-3px}.schedule-title{display:flex;align-items:center;gap:22px}.schedule-sigil{border:1px solid var(--line);width:48px;height:48px;display:grid;place-items:center;color:var(--brass-light)}.schedule-sigil .icon{width:25px;height:25px}.schedule-title .eyebrow{color:var(--brass);font-size:9px}.schedule-title h2{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:0;margin-top:6px}.schedule-time{padding-left:32px;border-left:1px solid var(--line)}.schedule-time .eyebrow{font-size:8px;color:var(--muted)}.schedule-time>p:nth-child(2){font-family:var(--display);font-size:26px;color:var(--silver);line-height:1.5}.schedule-time>p>span{font:11px var(--body);margin-left:7px;color:var(--muted)}.schedule-time>small{color:var(--muted);font-size:9px}.schedule-time>small>span{padding-inline:7px;color:var(--brass)}.calendar-button{background:transparent;display:flex;align-items:center;gap:10px;border:1px solid rgba(231,238,248,.16);padding:12px 15px;font-size:10px;min-height:44px;transition:border-color .2s}.calendar-button .icon{width:15px}.calendar-button .icon:last-child{width:13px;color:var(--brass)}@media (hover: hover) { .calendar-button:hover {border-color:var(--brass)} }.chapter-label{display:flex;align-items:center;gap:13px;font-size:9px;text-transform:uppercase;letter-spacing:.17em;color:var(--muted);margin-bottom:36px}.chapter-label>span:first-child{color:var(--brass)}.chapter-line{width:35px;height:1px;background:var(--brass-dark)}.build-layout{display:grid;grid-template-columns:.95fr 1fr;gap:120px;align-items:center}.build-intro h2{font-size:clamp(37px,4vw,56px)}.build-intro h2>span{color:var(--brass-light)}.section-copy{font-size:13px;color:var(--muted);line-height:1.9;max-width:400px}.build-intro .section-copy{margin-top:25px;margin-bottom:24px;max-width:380px}.build-sheet{border-top:1px solid var(--line);padding-top:20px}.sheet-topline{display:flex;justify-content:space-between;align-items:center}.sheet-topline .eyebrow{font-size:9px;letter-spacing:.13em;color:var(--muted)}.sheet-index{font-size:8px;color:var(--brass);letter-spacing:.13em}.talent-points{display:flex;justify-content:space-between;align-items:center;padding-top:24px;gap:14px}.talent-points>div{display:flex;flex-direction:column;align-items:center;flex:1}.talent-points strong{font:400 55px/1.2 var(--display);color:var(--steel-light)}.talent-points .balance-points strong{color:var(--silver)}.talent-points .resto-points strong{color:var(--brass-light)}.talent-points div>span{font-size:9px;color:var(--muted);letter-spacing:.06em;margin-top:10px}.point-slash{font:300 28px var(--display);color:var(--line);margin-top:-20px}.talent-line{height:2px;display:flex;gap:5px;margin-top:25px;background:rgba(100,87,82,.25)}.talent-line span:first-child{width:68.63%;background:var(--violet)}.talent-line span:last-child{width:31.37%;background:var(--green)}.form-tabs{display:flex;gap:28px;border-bottom:1px solid rgba(100,87,82,.35);margin-top:28px}.form-tab{display:flex;align-items:center;gap:9px;background:none;padding:0 0 13px;font-size:10px;color:var(--muted);position:relative}.form-tab .icon{width:16px;height:16px}.form-tab.active{color:var(--silver)}.form-tab::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--brass);transform:scaleX(0);transition:transform .2s}.form-tab.active::after{transform:scaleX(1)}.form-panel{padding-top:20px;min-height:139px}.form-panel h3{font-family:var(--body);font-size:12px;font-weight:500}.form-panel>p{font-size:11px;line-height:1.85;color:var(--muted);margin-top:8px;max-width:430px}.form-caption{display:flex;align-items:center;gap:8px;margin-top:15px;font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;flex-shrink:0}.violet{background:var(--violet)}.green{background:var(--green)}.gold-dot{background:var(--brass)}.addons-section{background:rgba(33,30,30,.28);border-top:1px solid rgba(100,87,82,.18);border-bottom:1px solid rgba(100,87,82,.18)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:46px}.section-heading>.section-copy{max-width:340px;padding-bottom:4px}.workshop{display:grid;grid-template-columns:.66fr 1.34fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.project-list{border-right:1px solid var(--line);padding:26px 32px 24px 0}.project-tab{width:100%;text-align:left;display:flex;align-items:flex-start;gap:17px;background:none;border-bottom:1px solid rgba(100,87,82,.25);padding:25px 16px;transition:background .2s}@media (hover: hover) { .project-tab:hover {background:rgba(182,139,82,.04)} }.project-number{font-size:9px;color:var(--steel-light);padding-top:5px}.project-tab b{font-family:var(--display);font-weight:500;font-size:22px;color:var(--muted);transition:color .2s}.project-tab small{font-size:10px;color:var(--muted);display:block;margin-top:8px}.project-tab .icon{width:17px;height:17px;align-self:center;margin-left:auto;color:var(--steel-light);transition:transform .2s,color .2s}.project-tab.active{background:rgba(182,139,82,.06);border-left:2px solid var(--brass);padding-left:14px}.project-tab.active b{color:var(--brass-light)}.project-tab.active .icon{color:var(--brass);transform:translateX(3px)}.project-tab.active .project-number{color:var(--brass)}.workshop-note{display:flex;align-items:flex-start;gap:10px;font-size:10px;line-height:1.8;margin-top:32px;padding-left:16px;color:var(--silver)}.workshop-note .status-dot{margin-top:6px}.workshop-note p>span{font-size:9px;color:var(--muted)}.project-stage{padding:26px 0 25px 38px;min-width:0}.stage-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:19px}.stage-label>span:last-child{color:var(--brass)}.addon-window{background:var(--ink);border:1px solid var(--brass-dark);box-shadow:0 12px 28px rgba(0,0,0,.2);height:255px;overflow:hidden;position:relative}.addon-window::after{content:"";position:absolute;inset:4px;border:1px solid rgba(100,87,82,.25);pointer-events:none}.addon-title{display:flex;align-items:center;gap:10px;height:49px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(33,30,30,.7)}.addon-title b{font:500 19px var(--display);color:var(--brass-light)}.addon-badge{color:var(--brass);display:grid;place-items:center}.addon-badge .icon{width:22px;height:22px}.addon-window-dots{margin-left:auto;color:var(--brass-dark);font-size:9px}.addon-nav{display:flex;align-items:center;gap:22px;height:33px;padding-inline:20px;border-bottom:1px solid var(--line);font-size:8px;color:var(--muted)}.addon-nav .selected{color:var(--brass-light);height:100%;display:flex;align-items:center;border-bottom:1px solid var(--brass)}.addon-content{display:grid;grid-template-columns:.8fr 1.4fr;height:173px}.bg-list{border-right:1px solid var(--line);padding:14px 10px;font-size:8px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}.bg-list>span{display:flex;align-items:center;gap:8px;padding:8px 7px;white-space:nowrap}.bg-list .chosen{background:var(--steel);color:var(--brass-light);border-left:1px solid var(--brass)}.flag-icon{display:inline-block;width:10px;height:14px;border-left:1px solid var(--brass);position:relative}.flag-icon::before{content:"";display:block;width:9px;height:7px;background:var(--brass-dark);clip-path:polygon(0 0,100%0,70% 100%,0 100%)}.flag-icon.basin::before{background:var(--steel-light)}.flag-icon.valley::before{background:var(--violet)}.bg-summary{padding:17px 20px;min-width:0}.bg-summary .eyebrow{font-size:6px;color:var(--muted);letter-spacing:.13em}.bg-summary h4{font-size:15px;color:var(--brass-light);margin-top:3px}.demo-stats{display:flex;gap:26px;margin-top:11px}.demo-stats>div{display:flex;flex-direction:column}.demo-stats strong{font:400 19px var(--display)}.demo-stats strong>span{font-size:11px}.demo-stats small{font-size:6px;color:var(--muted);margin-top:2px}.demo-chart{display:flex;gap:5px;align-items:flex-end;height:32px;margin-top:10px;border-bottom:1px solid var(--line)}.demo-chart i{flex:1;height:var(--bar);background:var(--brass);opacity:.48}.demo-chart i:nth-last-child(-n+3){opacity:.9}.project-description{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:22px}.project-description>p{font-size:11px;color:var(--muted);line-height:1.9;max-width:290px}.project-description .text-link{font-size:10px;white-space:nowrap;gap:10px;padding-top:1px}.project-description .icon{width:15px}.roster-top{display:flex;align-items:center;justify-content:space-between;margin:17px 20px 8px;font-size:9px}.roster-top>span:last-child{font-size:7px;color:var(--muted)}.roster-table{margin:0 18px}.roster-row{display:grid;grid-template-columns:1.05fr .4fr 1.5fr .3fr;align-items:center;gap:12px;font-size:8px;padding:8px 4px;border-bottom:1px solid rgba(100,87,82,.25)}.roster-row>span:first-child{display:flex;align-items:center;gap:7px}.roster-head{font-size:7px;color:var(--muted);padding-top:3px;padding-bottom:5px}.class-dot{display:block;width:6px;height:6px;background:var(--brass)}.class-dot.mage{background:var(--glow)}.class-dot.priest{background:var(--silver)}.rest-bar{position:relative;height:16px;background:rgba(100,87,82,.25);font-size:6px;display:grid;place-items:center}.rest-bar>i{position:absolute;inset:0 auto 0 0;background:rgba(46,124,230,.38)}.rest-bar>b{z-index:1;font-weight:400}.roster-bottom{font-size:6px;color:var(--muted);margin:11px 22px}.roster-bottom>span{float:right}.notes-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px}.notes-heading .section-copy{margin-top:17px;max-width:470px}.note-filters{display:flex;gap:5px}.note-filters button{min-height:37px;padding:8px 13px;background:transparent;font-size:9px;color:var(--muted);border:1px solid transparent}.note-filters button.active{color:var(--brass-light);border-color:var(--line);background:rgba(182,139,82,.05)}@media (hover: hover) { .note-filters button:hover {color:var(--silver)} }.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}.note-card{min-width:0}.note-card>a{display:block;height:100%}.note-art{height:210px;position:relative;overflow:hidden;border:1px solid rgba(100,87,82,.35);display:flex;align-items:center;justify-content:center;background:var(--steel);transition:border-color .2s}@media (hover: hover) { .note-card>a:hover .note-art {border-color:var(--brass)} }.note-art::after{content:"";position:absolute;inset:8px;border:1px solid rgba(182,139,82,.12);pointer-events:none}.art-corner{position:absolute;top:22px;left:24px;font-size:6px;color:var(--muted);letter-spacing:.15em}.note-body{padding:24px 3px 0}.note-meta{display:flex;justify-content:space-between;align-items:center;font-size:7px;text-transform:uppercase;letter-spacing:.13em;color:var(--brass)}.note-meta>span:last-child{color:var(--steel-light)}.note-body h3{font-size:26px;margin-top:17px;line-height:1.35}.note-body>p{font-size:11px;line-height:1.9;color:var(--muted);margin-top:14px;max-width:290px}.note-read{display:flex;justify-content:space-between;align-items:center;padding-top:23px;margin-top:23px;border-top:1px solid rgba(100,87,82,.35);font-size:9px;color:var(--silver)}.note-read .icon{width:16px;color:var(--brass);transition:transform .2s}@media (hover: hover) { .note-card>a:hover .note-read .icon {transform:translate(2px,-2px)} }.site-footer{display:flex;align-items:center;gap:25px;min-height:108px;font-size:8px;color:var(--muted)}.footer-wordmark{font:500 15px var(--display);letter-spacing:.08em;color:var(--brass-light)}.footer-separator{padding-inline:8px;color:var(--brass-dark)}.footer-links{display:flex;align-items:center;gap:22px;margin-left:auto}.footer-links a{display:flex;align-items:center;gap:5px}.footer-links .icon{width:11px;height:11px}.footer-links button{padding:5px 0;background:none;font-size:8px;color:var(--muted)}@media (hover: hover) { .footer-links a:hover, .footer-links button:hover {color:var(--brass-light)} }.privacy-dialog{max-width:520px;width:calc(100% - 40px);border:1px solid var(--brass-dark);padding:44px;color:var(--silver);background:var(--ink)}.privacy-dialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(5px)}.privacy-dialog .eyebrow{font-size:9px;color:var(--brass)}.privacy-dialog h2{font-size:28px;margin-top:15px}.privacy-dialog>p:not(.eyebrow){font-size:12px;line-height:1.9;color:var(--muted);margin-top:18px}.dialog-close{position:absolute;right:13px;top:13px;display:grid;place-items:center;width:32px;height:32px;background:transparent;color:var(--muted)}@media (hover: hover) { .dialog-close:hover {color:var(--silver)} }.article-page .site-header{position:relative;background:var(--ink)}.article-masthead{padding-top:63px;padding-bottom:55px;border-bottom:1px solid var(--line);position:relative}.back-link{font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:10px}.back-link svg{transform:rotate(180deg);width:15px}.article-masthead .eyebrow{margin-top:55px;color:var(--brass);font-size:9px}.article-masthead h1{font-size:clamp(35px,5vw,62px);max-width:800px;margin-top:22px}.article-deck{font-size:15px;line-height:1.9;color:var(--muted);max-width:630px;margin-top:25px}.article-layout{display:grid;grid-template-columns:190px minmax(0,720px);gap:75px;padding-top:55px;padding-bottom:90px}.article-aside{font-size:10px;color:var(--muted)}.article-aside .eyebrow{color:var(--brass);font-size:8px}.article-aside>p{margin-bottom:20px}.article-aside>a{display:block;margin-top:8px;font-size:10px}@media (hover: hover) { .article-aside>a:hover {color:var(--brass-light)} }.prose{font-size:15px;line-height:1.95;color:#bac4d2}.prose h2{font-size:27px;color:var(--silver);margin-top:40px;margin-bottom:18px}.prose h2:first-child{margin-top:0}.prose p{margin-block:0 21px}.prose ul{padding-left:22px}.prose li{padding-left:6px;margin-block:9px}.prose strong{color:var(--silver);font-weight:550}.prose a{color:var(--brass-light);border-bottom:1px solid var(--line)}.prose blockquote{margin:30px 0;border-left:2px solid var(--brass);padding:10px 0 10px 25px;color:var(--silver);font-family:var(--display);font-size:22px;line-height:1.6}.article-end{border-top:1px solid var(--line);margin-top:40px;padding-top:25px;display:flex;justify-content:space-between;gap:20px}.article-end .text-link{border:0;font-size:11px}.article-figure{border:1px solid var(--line);padding:25px;margin:28px 0;background:var(--steel)}.article-figure .talent-points{padding-top:0}.article-figure figcaption{font-size:9px;line-height:1.8;color:var(--muted);margin-top:20px;text-align:center}.development-callout{border:1px solid var(--line);padding:18px 22px;font-size:12px;background:rgba(182,139,82,.04);margin:26px 0}.development-callout b{display:block;color:var(--brass-light);font-weight:500;margin-bottom:5px}@media (min-width:1600px){.hero-art{object-position:60% 45%}.hero{height:850px}.hero-content{padding-top:265px}.hero-art-caption{right:max(56px,calc((100vw - 1280px)/2));bottom:110px}.hero-index{right:max(56px,calc((100vw - 1280px)/2))}}@media (max-width:1190px){.wrap{width:calc(100% - 80px)}.header-inner{gap:20px}.main-nav{gap:22px}.brand>span{font-size:18px}.brand-emblem{width:48px;height:48px}.header-channel{margin-left:0;padding-left:20px}.hero-content{padding-top:225px}.hero{height:740px}.hero-art{object-position:63% 45%}.hero-description{font-size:14px}.schedule-panel{grid-template-columns:1fr 1fr auto;padding:25px 26px;gap:22px}.schedule-title{gap:14px}.schedule-title h2{font-size:12px}.schedule-sigil{width:40px;height:40px}.schedule-time{padding-left:22px}.schedule-time>p:nth-child(2){font-size:23px}.calendar-button{font-size:9px;padding-inline:10px}.build-layout{gap:70px}.project-list{padding-right:22px}.project-tab{padding-inline:10px;gap:12px}.project-tab.active{padding-left:8px}.project-tab b{font-size:20px}.project-stage{padding-left:28px}.project-description{flex-direction:column;gap:10px}.project-description>p{max-width:none}.note-art{height:190px}.note-body h3{font-size:23px}.section-heading>.section-copy{max-width:300px}.site-footer{gap:20px}}@media (max-width:950px){.header-channel>span{display:none}.header-channel .arrow{display:none}.header-channel{border:0;padding-left:10px}.hero-art{width:115%;max-width:none;right:-8%;object-position:70% 45%}.hero-shade{background:linear-gradient(90deg,rgba(16,14,16,.87),rgba(16,14,16,.6) 43%,rgba(16,14,16,.08)),linear-gradient(0deg,var(--ink),transparent 25%)}.hero h1{font-size:76px}.hero-context{font-size:10px}.hero-art-caption{display:none}.schedule-panel{grid-template-columns:1fr 1fr}.calendar-button{grid-column:1/-1;justify-self:start;margin-left:54px}.schedule-title h2{font-size:14px}.schedule-time>p:nth-child(2){font-size:26px}.section{padding-block:85px}.build-layout{gap:40px;grid-template-columns:.9fr 1fr}.section-copy{font-size:12px}.build-intro h2{font-size:40px}.talent-points strong{font-size:44px}.workshop{grid-template-columns:.7fr 1.3fr}.project-stage{padding-left:22px}.project-list{padding-right:20px}.project-tab small{font-size:9px}.addon-content{grid-template-columns:.8fr 1.2fr}.bg-list{padding:13px 6px;font-size:6px}.bg-list>span{gap:5px;padding-inline:4px}.bg-summary{padding-inline:12px}.bg-summary h4{font-size:13px}.demo-stats{gap:18px}.addon-title b{font-size:17px}.roster-row{gap:7px;font-size:6px}.roster-head{font-size:6px}.roster-table{margin:0 12px}.rest-bar{font-size:5px}.section-heading>.section-copy{max-width:250px;font-size:11px}.notes-heading{align-items:flex-start;flex-direction:column;gap:22px}.note-grid{gap:20px}.note-art{height:170px}.note-body h3{font-size:21px}.note-body>p{font-size:10px}.art-corner{top:17px;left:18px}.note-meta{font-size:6px}.site-footer{flex-wrap:wrap;gap:15px;padding-block:30px}.site-footer>p{font-size:7px}.article-layout{grid-template-columns:140px minmax(0,1fr);gap:40px}}@media (max-width:720px){html{scroll-padding-top:30px}.wrap{width:calc(100% - 44px)}.site-header{height:80px}.header-inner{gap:15px}.brand{gap:10px}.brand-emblem{width:48px;height:48px}.brand>span{font-size:18px}.header-channel{margin-left:auto;padding:10px}.header-channel .icon{width:19px;height:19px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:36px;height:40px;background:none;order:3;z-index:23;padding:5px}.menu-toggle>span{height:1px;width:20px;background:var(--silver);transition:transform .2s}.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.main-nav{display:none;position:absolute;top:80px;left:0;width:100%;height:calc(100dvh - 80px);background:var(--ink);padding:40px 30px;flex-direction:column;align-items:flex-start;gap:12px;overflow:auto;border-top:1px solid var(--line)}.main-nav.open{display:flex}.main-nav>a{font:400 27px var(--display);width:100%;padding:18px 0;border-bottom:1px solid var(--line);color:var(--silver)}.main-nav>a::after{display:none}.hero{height:780px;min-height:0}.hero-art{width:148%;height:77%;right:-26%;object-position:75% 38%;top:18px;opacity:.86}.hero-shade{background:linear-gradient(0deg,var(--ink) 7%,rgba(16,14,16,.97) 26%,rgba(16,14,16,.65) 53%,rgba(16,14,16,.05) 88%),linear-gradient(90deg,rgba(16,14,16,.3),transparent)}.hero-content{padding-top:402px}.hero-eyebrow{font-size:8px;letter-spacing:.17em;gap:9px}.small-rule{width:25px}.hero h1{font-size:clamp(41px,10.6vw,74px);letter-spacing:.025em;margin-top:14px}.hero-context{font-size:8px;letter-spacing:.015em;margin-top:9px}.hero-context>span{padding-inline:4px}.hero-description{font-size:12px;line-height:1.85;margin-top:21px;max-width:330px}.hero-actions{gap:10px;margin-top:24px}.hero-actions .button{font-size:10px;min-height:47px;padding:12px 16px;gap:9px}.hero-actions .icon{width:17px;height:17px}.hero-actions .button-primary .icon:last-child{width:14px;margin-left:4px}.hero-scroll{margin-top:31px;font-size:7px;gap:10px}.scroll-line{width:25px}.hero-index{display:none}.schedule-section{margin-top:0}.schedule-panel{grid-template-columns:1fr;padding:25px 22px;gap:24px}.schedule-title h2{font-size:13px}.schedule-sigil{width:40px;height:40px}.schedule-time{border:0;padding-left:54px}.schedule-time>p:nth-child(2){font-size:29px}.schedule-time>p>span{font-size:10px}.schedule-time .eyebrow{font-size:8px}.schedule-time>small{font-size:9px}.calendar-button{grid-column:auto;margin-left:54px;min-height:42px;font-size:10px;gap:10px;padding:10px 15px}.calendar-button .icon{width:16px}.section{padding-block:70px}.chapter-label{font-size:8px;margin-bottom:28px;gap:11px}.chapter-line{width:25px}.build-layout{grid-template-columns:1fr;gap:43px}.build-intro h2{font-size:40px}.section-copy{font-size:12px}.build-intro .section-copy{margin-top:20px;margin-bottom:17px;max-width:390px}.text-link{font-size:11px}.build-sheet{padding-top:19px}.sheet-topline .eyebrow{font-size:8px}.talent-points strong{font-size:49px}.talent-points div>span{font-size:9px}.talent-points{padding-top:22px}.form-tab{font-size:11px}.form-panel h3{font-size:12px}.form-panel>p{font-size:11px}.form-panel{min-height:137px}.form-caption{font-size:8px}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:34px}.section-heading>.section-copy{font-size:12px;max-width:400px;margin-top:20px}.workshop{grid-template-columns:1fr}.project-list{padding:0;display:grid;grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line)}.project-tab{padding:21px 12px;gap:10px;border:0}.project-tab.active{border-left:0;padding-left:12px;border-bottom:2px solid var(--brass)}.project-tab b{font-size:17px}.project-tab small{font-size:8px;margin-top:6px}.project-tab .icon{display:none}.project-number{font-size:7px;padding-top:4px}.workshop-note{grid-column:1/-1;order:3;margin:0;padding:17px 10px;border-top:1px solid rgba(100,87,82,.25)}.workshop-note p{display:flex;gap:8px;align-items:center;font-size:8px;flex-wrap:wrap}.workshop-note p>span{font-size:8px}.workshop-note p>br{display:none}.workshop-note .status-dot{margin-top:5px}.project-stage{padding:24px 0;min-height:405px}.stage-label{font-size:7px;margin-bottom:14px}.addon-window{height:245px}.addon-content{grid-template-columns:.85fr 1.15fr}.addon-nav{gap:19px;font-size:7px}.addon-title{padding-inline:15px}.bg-list{font-size:7px;gap:5px;padding:15px 6px}.bg-summary{padding:17px 12px}.bg-summary h4{font-size:12px}.demo-stats{gap:16px}.demo-stats strong{font-size:17px}.demo-stats small{font-size:5px}.demo-chart{height:37px;gap:4px}.project-description{gap:12px;margin-top:20px}.project-description>p{font-size:11px}.project-description .text-link{font-size:10px}.roster-row{font-size:7px;gap:6px;grid-template-columns:.9fr .3fr 1.4fr .3fr;padding-block:10px}.rest-bar{font-size:5px}.roster-head{font-size:5px}.roster-top{font-size:9px;margin-inline:15px}.roster-top>span:last-child{font-size:6px}.roster-bottom{font-size:6px;margin-inline:15px}.notes-heading h2{font-size:38px}.notes-heading .section-copy{margin-top:15px}.notes-heading{margin-bottom:25px;gap:23px}.note-filters button{font-size:10px;padding:7px 15px}.note-grid{grid-template-columns:1fr;gap:34px}.note-art{height:210px}.note-body{padding:20px 3px 0}.note-body h3{font-size:28px;margin-top:14px}.note-body h3>br{display:none}.note-body>p{font-size:12px;max-width:350px;margin-top:12px}.note-meta{font-size:8px}.note-read{font-size:10px;margin-top:20px;padding-top:17px}.art-corner{font-size:7px;top:22px;left:24px}.site-footer{padding-block:27px;gap:13px;align-items:flex-start}.footer-wordmark{font-size:17px}.site-footer>p{font-size:8px;width:100%;order:3;margin-top:4px}.footer-links{gap:14px;margin-top:3px}.footer-links a,.footer-links button{font-size:8px}.footer-links .icon{width:10px}.privacy-dialog{padding:34px 25px}.privacy-dialog h2{font-size:26px}.article-masthead{padding-top:35px;padding-bottom:35px}.article-masthead .eyebrow{margin-top:35px;font-size:8px}.article-masthead h1{font-size:37px;margin-top:18px}.article-deck{font-size:13px;margin-top:20px}.article-layout{display:flex;flex-direction:column;gap:25px;padding-top:28px;padding-bottom:50px}.article-aside{display:flex;flex-wrap:wrap;gap:8px 20px;padding-bottom:20px;border-bottom:1px solid var(--line)}.article-aside>.eyebrow{width:100%;margin:0}.article-aside>p{margin:0}.article-aside>a{font-size:9px;margin:0}.prose{font-size:13px;line-height:1.95}.prose h2{font-size:24px;margin-top:30px}.prose blockquote{font-size:20px;padding-left:20px}.article-end{flex-direction:column;gap:10px}.article-end .text-link{font-size:10px}.article-figure{padding:20px 15px}.article-figure .talent-points strong{font-size:38px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}@media (max-width:720px){.workshop{grid-template-columns:minmax(0,1fr)}.project-list{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}.project-tab,.project-tab>span{min-width:0}.project-tab b{font-size:clamp(14px,4.3vw,17px)}.project-tab small{white-space:normal}.hero-actions .button{padding-inline:12px;white-space:nowrap}}.brand-emblem{border-radius:50%;object-fit:cover}.site-header{background:rgba(16,14,16,.66)}.main-nav .nav-blog{color:var(--brass-light);font-weight:600}.main-nav .nav-blog::after{transform:scaleX(1);background:var(--horde-light)}.hero{height:670px}.hero-content{padding-top:184px}.hero-art{object-position:60% 44%}.hero-shade{background:linear-gradient(90deg,rgba(16,14,16,.85),rgba(16,14,16,.59) 35%,rgba(16,14,16,.09) 64%),linear-gradient(0deg,var(--ink),transparent 23%,transparent 75%,rgba(16,14,16,.23))}.hero h1{color:var(--silver);font-size:clamp(62px,7.2vw,105px)}.hero-eyebrow .gold{color:var(--horde-light)}.small-rule{background:var(--horde-light)}.hero-description{margin-top:23px;font-size:14px}.hero-actions{margin-top:28px}.button-primary{background:var(--horde);border-color:var(--horde);font-size:12px}@media (hover: hover) { .button-primary:hover {background:#87302b;border-color:var(--horde-light)} }.hero-scroll{margin-top:28px}.hero-art-caption{bottom:62px}.hero-index{color:rgba(231,238,248,.45)}.hero-socials{display:flex;align-items:center;gap:20px;margin-top:20px;font-size:9px;color:var(--muted)}.hero-socials>span{text-transform:uppercase;font-size:7px;letter-spacing:.14em;color:var(--brass)}.hero-socials a{display:flex;align-items:center;gap:7px}.hero-socials .icon{width:13px;height:13px}.social-pending{cursor:default;color:var(--muted)}[data-social-pending]{font:500 6px var(--body);text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(182,139,82,.28);padding:2px 4px;color:var(--brass-light);margin-left:2px}.social-pending .icon{opacity:.75}.schedule-section{margin-top:0}.schedule-panel{background:var(--steel);border-top-color:var(--horde)}.schedule-sigil{color:var(--horde-light)}.chapter-label{font-size:10px}.chapter-label>span:first-child{color:var(--horde-light)}.chapter-line{background:var(--horde)}.section-copy{font-size:14px}.hero-context{font-size:11px}.build-intro .section-copy{max-width:390px}.project-description>p{font-size:12px}.note-body>p{font-size:12px}.header-channel{font-size:12px}.main-nav>a{font-size:12px}.blog-all-link{margin-bottom:5px;white-space:nowrap;font-size:11px}.blog-masthead{position:relative;isolation:isolate;padding:70px 0 60px;border-bottom:1px solid var(--line);background:var(--ink);overflow:hidden}.blog-masthead::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink) 10%,rgba(16,14,16,.73) 65%,rgba(16,14,16,.55)),url(../tauren-horde.webp)right 37%/cover no-repeat;opacity:.75}.blog-masthead .eyebrow{display:flex;align-items:center;gap:12px;color:var(--brass-light);font-size:10px}.horde-rule{width:30px;height:1px;background:var(--horde-light)}.blog-masthead h1{font-size:72px;margin-top:21px}.blog-masthead .article-deck{font-size:14px;margin-top:20px}.blog-identity{display:block;margin-top:25px;font-size:9px;color:var(--muted);letter-spacing:.035em}.blog-identity>span{color:var(--horde-light);margin-inline:7px}.blog-posts{padding-top:40px;padding-bottom:75px}.blog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:30px}.blog-toolbar .note-filters button{font-size:11px;min-height:42px;padding-inline:17px}.blog-toolbar .note-filters button.active{border-color:var(--horde);background:rgba(165,54,47,.08);color:var(--silver)}.blog-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);min-height:44px;padding:0 15px;width:265px;background:rgba(33,30,30,.3)}.blog-search .icon{width:16px;height:16px;color:var(--brass)}.blog-search input{border:0;background:transparent;font:12px var(--body);color:var(--silver);min-width:0;width:100%;padding:10px 0;outline:0}.blog-search input::placeholder{color:var(--muted)}.blog-search:focus-within{outline:2px solid var(--horde-light);outline-offset:3px}.posts-count{font-size:9px;color:var(--muted);margin-top:20px;margin-bottom:25px}.blog-archive .note-art{height:230px}.blog-archive .note-body h3{font-size:28px}.blog-archive .note-read{font-size:11px}.notes-empty{padding:65px 20px;text-align:center;border-block:1px solid var(--line)}.notes-empty h2{font-size:30px}.notes-empty p{font-size:13px;color:var(--muted);margin-top:15px}.notes-empty .button{margin-top:25px;font-size:11px}.site-footer{gap:20px;min-height:112px;flex-wrap:wrap;padding-block:26px}.footer-links{gap:18px;flex-wrap:wrap}.footer-links a,.footer-links button{font-size:9px}.footer-links a{gap:5px}.footer-links .social-pending{color:var(--muted)}@media (hover: hover) { .footer-links .social-pending:hover {color:var(--muted)} }.footer-links [data-social-pending]{font-size:5px;padding:2px 3px}.site-footer>p{font-size:8px}.article-masthead{border-bottom-color:var(--horde)}.article-aside .eyebrow{color:var(--horde-light)}@media (min-width:1600px){.hero{height:740px}.hero-content{padding-top:220px}.hero-art-caption{bottom:80px}}@media (max-width:1150px){.footer-links{gap:14px}.site-footer>p{font-size:7px}.hero-content{padding-top:183px}}@media (max-width:950px){.hero h1{font-size:76px}.hero{height:660px}.hero-art{width:115%;right:-8%;object-position:67% 42%}.site-footer .footer-links{width:100%;margin-left:0}.site-footer>p{margin-left:auto}.blog-archive .note-body h3{font-size:23px}}@media (max-width:720px){.main-nav>a{font:400 27px var(--display)}.hero{height:840px}.hero-art{width:148%;right:-26%;height:72%;top:16px;object-position:72% 40%;opacity:.94}.hero-shade{background:linear-gradient(0deg,var(--ink) 10%,rgba(16,14,16,.98) 28%,rgba(16,14,16,.65) 54%,rgba(16,14,16,.05) 88%),linear-gradient(90deg,rgba(16,14,16,.3),transparent)}.hero-content{padding-top:398px}.hero h1{font-size:clamp(41px,10.6vw,74px)}.hero-eyebrow{font-size:8px}.hero-context{font-size:8px}.hero-description{font-size:12px;margin-top:21px;max-width:350px}.hero-actions{margin-top:24px}.hero-actions .button{font-size:10px;padding-inline:12px;white-space:nowrap}.hero-socials{gap:18px;margin-top:20px;font-size:8px;flex-wrap:wrap}.hero-socials>span{display:none}.hero-socials .icon{width:13px;height:13px}.hero-socials [data-social-pending]{font-size:5px}.hero-scroll{margin-top:27px}.schedule-section{margin-top:0}.section-copy{font-size:12px}.blog-masthead{padding:43px 0 40px}.blog-masthead h1{font-size:48px;margin-top:19px}.blog-masthead .eyebrow{font-size:8px}.blog-masthead .article-deck{font-size:12px;margin-top:18px;max-width:340px}.blog-masthead .article-deck br{display:none}.blog-identity{font-size:8px;margin-top:22px;line-height:1.9;max-width:285px}.blog-identity>span{margin-inline:5px}.blog-posts{padding-top:27px;padding-bottom:45px}.blog-toolbar{flex-direction:column;align-items:stretch;gap:21px}.blog-toolbar .note-filters{align-self:flex-start}.blog-toolbar .note-filters button{min-height:42px;font-size:10px;padding-inline:16px}.blog-search{width:100%;min-height:46px}.blog-search input{font-size:12px}.posts-count{font-size:9px;margin-top:20px;margin-bottom:20px}.blog-archive .note-art{height:210px}.blog-archive .note-body h3{font-size:28px}.site-footer>p{width:100%;order:3;margin-left:0;font-size:8px}.site-footer .footer-links{width:100%;order:2;gap:14px 17px;margin-top:0}.footer-links a,.footer-links button{font-size:9px}.footer-links [data-social-pending]{font-size:5px}.site-footer{gap:15px}.privacy-dialog{background:var(--ink)}}@media (max-width:360px){.hero-actions .button{font-size:9px;padding-inline:10px;gap:7px}.hero-actions .button-primary .icon:last-child{display:none}.hero-socials{gap:12px}.hero{height:850px}}@media (max-width:720px){.hero{height:790px}.hero-content{padding-top:370px}}@media (max-width:360px){.hero{height:810px}}.header-socials{display:flex;align-items:center;gap:3px;flex-shrink:0;margin-left:2px}.header-socials>a{display:grid;place-items:center;width:34px;height:44px;color:var(--muted);transition:color .2s,background .2s}@media (hover: hover) { .header-socials>a:hover {color:var(--brass-light);background:rgba(182,139,82,.06)} }.header-socials .icon{width:17px;height:17px;stroke-width:1.7}.header-channel{margin-left:0;padding-left:18px}@media (min-width:721px) and (max-width:1080px){.header-inner{gap:15px}.main-nav{gap:18px}.header-channel>span,.header-channel .arrow{display:none}.header-channel{border-left:0;padding:10px 0}.brand>span{font-size:17px}.header-socials{gap:0}.header-socials>a{width:31px}}@media (min-width:721px) and (max-width:830px){.header-inner{gap:11px}.brand{gap:8px}.brand>span{font-size:16px}.brand-emblem{width:44px;height:44px}.main-nav{gap:15px}.main-nav>a{font-size:11px}.header-socials>a{width:29px}}@media (max-width:720px){.header-socials{margin-left:auto;gap:0}.header-socials>a{width:36px;height:44px}.header-channel{margin-left:0;padding:0;width:36px;height:44px;justify-content:center;flex-shrink:0}.header-channel>span,.header-channel .arrow{display:none}.header-inner{gap:10px}.menu-toggle{flex-shrink:0}.header-socials .icon{width:18px;height:18px}}@media (max-width:560px){.header-inner{gap:8px}.brand>span{display:none}.brand{flex-shrink:0}.brand-emblem{width:48px;height:48px}.header-socials{margin-left:auto}.menu-toggle{width:34px;padding-inline:0}}
/* refinements.css */
.hero{height:auto;min-height:710px}.hero-content{padding-top:160px;padding-bottom:55px}.hero h1{font-size:clamp(62px,7.3vw,103px);line-height:1.12}.hero-schedule{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:12px;line-height:1.7;color:var(--muted)}.hero-schedule>.status-dot{margin-top:7px;flex-shrink:0}.hero-schedule strong{font-weight:500;color:var(--silver)}.hero-schedule>span>span{display:block}.hero-schedule a{color:var(--brass-light);text-decoration:underline;text-underline-offset:4px}.hero-scroll{margin-top:25px;font-size:10px}.note-meta{font-size:11px;letter-spacing:.035em;line-height:1.5;gap:8px;flex-wrap:wrap}.note-meta time{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);letter-spacing:0}.note-read{font-size:12px;margin-top:11px;padding-top:10px}.blog-archive .note-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 34px}.blog-archive .note-art{height:225px}.blog-archive .note-body h3{font-size:28px;line-height:1.3}.blog-archive .note-body>p{font-size:14px;line-height:1.8}.search-scope{font-size:12px;color:var(--muted);margin-top:15px;line-height:1.7}.posts-count{font-size:12px}.blog-search input{font-size:14px}.blog-identity,.hero-context{font-size:12px;line-height:1.7}.schedule-time .eyebrow,.schedule-time>small{font-size:12px}.calendar-button{font-size:12px}.article-masthead h1{max-width:980px;font-size:clamp(34px,4.3vw,58px);line-height:1.22}.article-masthead .eyebrow,.back-link{font-size:12px}.article-deck{font-size:16px}.article-aside,.article-aside>a{font-size:12px}.article-aside .eyebrow{font-size:11px}.article-aside>.article-date{font-size:12px;color:var(--muted);line-height:1.7}.article-aside time{display:block;color:var(--silver)}.prose{font-size:16px;line-height:1.85}.prose h3{font-size:22px;margin-bottom:8px;color:var(--silver)}.prose .button{color:var(--silver);border:1px solid var(--horde)}.prose .text-link{border:0;font-size:13px}.related-reference{margin-top:30px!important;font-size:14px}.decision-questions{list-style:none;counter-reset:decision;padding-left:0!important;margin:25px 0}.decision-questions li{counter-increment:decision;position:relative;padding:18px 0 18px 48px;border-top:1px solid var(--line);margin:0}.decision-questions li::before{content:"0"counter(decision);position:absolute;left:0;top:22px;font:12px var(--body);color:var(--horde-light)}.decision-questions li p{margin:0}.review-template{border:1px solid var(--line);margin:26px 0;background:var(--steel)}.template-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 17px;border-bottom:1px solid var(--line);font-size:12px;color:var(--brass-light)}.copy-template{background:transparent;color:var(--silver);border:1px solid var(--brass-dark);padding:9px 12px;min-height:44px;font-size:12px;white-space:nowrap}@media (hover: hover) { .copy-template:hover {border-color:var(--brass-light)} }.review-template pre{font:12px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:24px 21px;color:var(--silver)}.review-template .copy-status{padding:0 20px 17px;margin:0;font-size:12px;line-height:1.7;color:var(--muted)}.stage-label,.sheet-topline .eyebrow{font-size:10px}.workshop-note p,.workshop-note p>span{font-size:11px}.footer-links a,.footer-links button{font-size:11px;min-height:28px}.site-footer>p{font-size:11px}@media (max-width:1080px) and (min-width:721px){.hero-content{padding-top:155px}}@media (max-width:720px){.hero{height:auto;min-height:0}.hero-content{padding-top:258px;padding-bottom:35px}.hero-art{height:68%;top:0}.hero-eyebrow{font-size:10px;letter-spacing:.12em}.hero h1{font-size:clamp(40px,10.6vw,72px);margin-top:12px}.hero-context{font-size:11px;line-height:1.7;max-width:340px;margin-top:10px}.hero-description{font-size:14px;line-height:1.75;margin-top:16px}.hero-actions{margin-top:22px;gap:10px}.hero-actions .button{font-size:12px;min-height:48px;padding:12px 13px;gap:8px}.hero-schedule{font-size:12px;margin-top:18px;line-height:1.8}.hero-scroll{font-size:10px;margin-top:22px}.menu-toggle{width:44px;height:44px}.main-nav{position:fixed;top:80px;bottom:0;height:auto;padding:24px 22px}.blog-archive .note-grid{grid-template-columns:1fr;gap:35px}.blog-archive .note-art{height:205px}.blog-archive .note-body h3{font-size:28px}.blog-archive .note-body>p,.blog-masthead .article-deck{font-size:14px}.blog-identity{font-size:11px;max-width:340px;line-height:1.8}.schedule-time .eyebrow,.schedule-time>small{font-size:12px}.schedule-title h2{font-size:16px}.schedule-time{padding-left:0}.calendar-button{margin-left:0;font-size:12px;min-height:44px}.build-layout{gap:28px}.build-section,.addons-section{padding-block:55px}.build-intro .section-copy,.section-heading>.section-copy{font-size:14px;line-height:1.8}.form-panel>p,.form-caption{font-size:12px}.workshop-note p,.workshop-note p>span{font-size:11px}.workshop-note p{display:block}.workshop-note p>span{display:block}.project-stage{min-height:0;padding-bottom:12px}.project-description{flex-direction:column;gap:8px}.project-description>p,.project-description .text-link{font-size:13px}.article-masthead h1{font-size:35px;overflow-wrap:break-word}.article-masthead .eyebrow,.back-link{font-size:11px}.article-deck{font-size:15px}.article-aside,.article-aside>a{font-size:12px}.article-aside .eyebrow{font-size:11px}.article-aside>.article-date{width:100%;margin:0}.article-aside time{display:inline}.prose{font-size:15px;line-height:1.85;min-width:0}.template-toolbar{align-items:flex-start;flex-direction:column;gap:10px}.review-template pre{padding:20px 15px;font-size:11px}.review-template .copy-status{padding-inline:15px}.footer-links a,.footer-links button,.site-footer>p{font-size:11px}}@media (max-width:360px){.hero-content{padding-top:235px}.hero-actions{flex-direction:column;align-items:stretch;max-width:310px}.hero-actions .button{font-size:12px;padding:12px 15px}.hero-eyebrow{gap:7px;font-size:9px}.hero-schedule{font-size:11px}}@media print{.site-header,.site-footer,.article-end,.article-aside,.copy-template,.copy-status,.back-link{display:none!important}body,.review-template{background:#fff!important;color:#111!important}.article-layout{display:block;padding:20px 0}.wrap{width:100%}.article-masthead{padding:0 0 20px}.article-masthead .eyebrow{margin-top:0}.prose,.prose h2,.prose h3,.review-template pre{color:#111!important}.decision-questions li{break-inside:avoid}}

/* Mobile contents: a guide label paragraph sits on its own line, not inline with the links */
@media (max-width:720px){.article-aside>p:not(.article-date){width:100%;margin:0}}

/* Long posts: "Back to contents" links injected by site.js before each section. */
.prose .to-contents{display:table;margin:34px 0 -18px auto;padding:10px 0;font-size:12px;line-height:1.5;color:var(--muted);border:0}
.prose .to-contents::after{content:" \2191";color:var(--brass)}
@media (hover: hover) { .prose .to-contents:hover {color:var(--brass-light)} }
@media (min-width:921px){.talent-layout .prose .to-contents{display:none}}

/* Readability floor: real text never drops below 10px for uppercase labels or 11px for sentences.
   Decorative mock-ups (addon windows, card art) keep their miniature sizes. */
.sheet-index,.form-caption,.project-number,.schedule-title .eyebrow,.schedule-time .eyebrow,.guide-status,.hero-art-caption,.art-corner{font-size:10px!important}
.hero-art-caption b{font-size:11px}
.project-tab small,.schedule-time>small{font-size:12px}
.talent-points div>span{font-size:10px}
.form-tab{font-size:11px}
.blog-masthead .eyebrow{font-size:10px!important}
@media (max-width:720px){.project-tab small{font-size:12px}}

/* Contrast: the empty Feral column and inactive project numbers were below 3:1. */
.talent-points strong{color:#8c7d76}
.project-number{color:var(--muted)}
.bg-summary-title{font:500 15px/1.25 var(--display);color:var(--brass-light);margin-top:3px}
@media (max-width:950px){.bg-summary-title{font-size:13px}}

/* Until the channel debuts at 60, the schedule panel shows this note in place of the times. */
.schedule-pending{font-size:13px;line-height:1.8;color:var(--muted);max-width:460px}
.schedule-panel:has(.schedule-pending){grid-template-columns:1.18fr 1fr}
@media (max-width:950px){.schedule-panel:has(.schedule-pending){grid-template-columns:1fr}}

/* Pre-launch posts: a dated marker under the masthead; tested follow-ups get linked from it. */
.prelaunch-note{max-width:720px;margin-top:22px;padding:12px 16px;border:1px solid var(--line);border-left:2px solid var(--brass);background:rgba(182,139,82,.05);font-size:13px;line-height:1.7;color:var(--muted)}
.prelaunch-label{margin-right:8px;font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--brass-light)}
.prelaunch-note a{color:var(--brass-light);text-decoration:underline;text-underline-offset:4px}

/* Navigation: the current section is marked by aria-current, not by Blog being permanently lit. */
.main-nav .nav-blog{color:var(--muted);font-weight:400}
.main-nav .nav-blog::after{transform:scaleX(0);background:var(--brass)}
@media (hover: hover) { .main-nav .nav-blog:hover::after {transform:scaleX(1)} }
.main-nav>a[aria-current]{color:var(--brass-light);font-weight:600}
.main-nav>a[aria-current]::after{transform:scaleX(1);background:var(--horde-light)}
@media (max-width:720px){.main-nav .nav-blog{color:var(--silver)}.main-nav>a[aria-current]{color:var(--brass-light)}}

/* Footer: site sections first, then channels, separated by a thin rule. */
.footer-sitelinks{display:inline-block;width:1px;height:12px;background:var(--line)}
@media (max-width:720px){.footer-sitelinks{display:none}}
/* Copy buttons on commands, and the phone Contents button on long guides */
pre.has-copy{position:relative;padding-right:76px!important}
.copy-command{display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;margin:6px 0 0;background:transparent;border:1px solid var(--brass-dark);color:var(--brass-light);font:600 11px/1 var(--body);letter-spacing:.04em;cursor:pointer}
.copy-command:focus-visible {border-color:var(--brass-light);color:var(--silver)}
@media (hover: hover) { .copy-command:hover {border-color:var(--brass-light);color:var(--silver)} }
pre .copy-command{position:absolute;top:8px;right:8px;margin:0}
td small .copy-command{display:flex;margin-top:6px}
.contents-pill{display:none}
@media (max-width:950px){.contents-pill{display:inline-flex;position:fixed;right:16px;bottom:16px;z-index:30;align-items:center;min-height:44px;padding:0 16px;background:rgba(16,14,16,.92);border:1px solid var(--brass-dark);color:var(--brass-light);font:600 12px/1 var(--body);letter-spacing:.04em;box-shadow:0 6px 18px rgba(0,0,0,.4)}.contents-pill[hidden]{display:none}}
@media print{.copy-command,.contents-pill{display:none!important}}
.footer-disclaimer{flex-basis:100%;width:100%;margin-top:10px;font-size:11px;line-height:1.6;color:var(--muted)}
/* Review-style card covers: give the grid a full-width track so the cover's percentage width resolves against the card, not its own content. */



/* Header that stays with the reader: site.js fixes it in place on load (.header-fixed), then shrinks
   it smoothly past the top (.header-compact) and, on phones, slides it away whilst reading down (.header-hidden). */
.header-fixed .site-header{position:fixed;top:0;left:0;width:100%;z-index:40;transition:height .28s ease,background-color .28s ease,box-shadow .28s ease,border-color .28s ease,transform .28s ease}
.header-fixed .brand-emblem,.header-fixed .brand>span,.header-fixed .header-socials{transition:width .28s ease,height .28s ease,font-size .28s ease,opacity .2s ease}
.header-compact .site-header{height:60px;background-color:var(--ink);border-bottom-color:rgba(182,139,82,.22);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.header-compact .brand-emblem{width:36px;height:36px}
.header-compact .brand>span{font-size:16px}
.header-compact .header-socials{opacity:0;visibility:hidden;width:0;overflow:hidden}
.header-compact.header-hidden .site-header{transform:translateY(-100%);box-shadow:none}
@media (max-width:720px){.header-compact .site-header{height:56px}.header-compact .main-nav{top:56px}}
@media (prefers-reduced-motion:reduce){.header-fixed .site-header,.header-fixed .brand-emblem,.header-fixed .brand>span,.header-fixed .header-socials{transition:none}}
@media print{.header-fixed .site-header{position:static!important}.header-compact .site-header{display:none!important}}
@media (max-width:720px){html{scroll-padding-top:70px}}
@media (min-width:721px){body.header-compact .article-aside{top:84px}}

@media (max-width:720px){.blog-search input{font-size:16px}}

/* Sweep 4 Nov: wide reference tables show a copper edge shadow on the side that still has columns to scroll to. */
@media (max-width:720px){.table-scroll{background:linear-gradient(90deg,var(--ink) 35%,rgba(16,14,16,0)) left/36px 100% no-repeat local,linear-gradient(270deg,var(--ink) 35%,rgba(16,14,16,0)) right/36px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(223,189,130,.35),rgba(223,189,130,0)) left/16px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(223,189,130,.35),rgba(223,189,130,0)) right/16px 100% no-repeat scroll}}
/* Sweep 4 Nov: archive blurbs use the card's width, cards in a row end on one line, and the search placeholder fits. */
.blog-archive .note-body>p{max-width:60ch}
@media (min-width:721px){.blog-archive .note-card>a{display:flex;flex-direction:column}.blog-archive .note-body{flex:1 0 auto;display:flex;flex-direction:column}.blog-archive .note-body>p{flex-grow:1}.blog-search{width:320px}}
/* Sweep 4 Nov: a whole guide printed on white. Prose, mastheads and boxed notes print dark on white, figures keep their own colours (figures.css), and the skip link stays off the page. */
@media print{.skip-link{display:none!important}main :is(p,li,span,a,time,strong,em,b,i,small,h1,h2,h3,h4,caption,th,td,code,pre,dt,dd,blockquote,label,cite,div,button):not(figure *):not(.printable *){color:#111!important;text-shadow:none!important}main :is(div,section,aside,ul,ol,pre,table,p,li,blockquote,dl,article,header):not(figure):not(figure *):not(.printable):not(.printable *){background:transparent!important;box-shadow:none!important}main .guide-status:not(figure *),main .changelog-kind{color:#111!important}main a:not(figure *){text-decoration:underline}}

/* Tap targets on phones and tablets: the inline Contents links and the short versions' Detail links reach 24px */
@media (max-width:920px){body .article-layout .article-aside>a{display:flex;align-items:center;min-height:24px}}
.guide-quick-list li a{display:inline-block;min-height:24px;padding-top:4px;line-height:1.35}
/* The Contents pill lines up with the page margin on phones. Settings tables sit above it (settings-guide.css) */
@media (max-width:720px){.contents-pill{right:22px;bottom:14px}}

/* New-visitor pass, 4 Nov: the byline name links to the About page. */
.talent-byline a,.article-aside>p>a[href$="about.html"]{display:inline;margin:0;color:var(--silver);text-decoration:underline;text-decoration-color:var(--brass-dark);text-underline-offset:3px}
@media (hover: hover) { .talent-byline a:hover, .article-aside>p>a[href$="about.html"]:hover {color:var(--brass-light);text-decoration-color:var(--brass)} }
/* Styled lists inside prose keep their own zero left padding. The base .prose ul rule (22px) outranked them, which left a strip the skill-sheet fills couldn't reach and pushed their text further in on the left than the right. */
.prose :is(.skill-sheet,.status-key,.diagram-legend,.drill-checklist){padding-left:0}
/* Numbered questions: the heading sits at the top of its row, and the number shares the heading's line so the two read as one. */
.prose .decision-questions li>h3{margin-top:0;margin-bottom:8px}
.decision-questions li::before{top:18px;line-height:27.5px;font-weight:600;letter-spacing:.08em}
/* The dated update banner a field note gets once the moment it read has passed. */
.prelaunch-note.live-update{margin-top:10px;border-left-color:#58b46a}
/* The live key is one long item, so it reads as a sentence with its label inline, not as flex pieces. */
.prose .status-key li{display:block;font-size:14px}
.prose .status-key li>.guide-status:first-child{display:inline-block;margin-right:8px;vertical-align:1px}
.prose .status-key li a:not(.guide-status){display:inline}

/* The What's new link's dot: something on the site changed after the reader's last visit to What's new
   (site.js, from the link's generated data-latest-change). A shape plus hidden text, never colour alone. */
.main-nav>a.has-news{padding-right:11px}
.nav-dot{position:absolute;top:50%;right:0;width:7px;height:7px;margin-top:-5px;border-radius:50%;background:var(--horde-light);box-shadow:0 0 0 2px var(--ink)}
@media (max-width:720px){.main-nav>a.has-news{padding-right:0}.nav-dot{position:relative;display:inline-block;top:auto;right:auto;margin:0 0 0 10px;vertical-align:.3em}}
@media (prefers-contrast:more){.nav-dot{box-shadow:none;outline:1px solid var(--silver)}}
@media print{.nav-dot{display:none}}
/* 44px tap targets in the footer and on the masthead's "All guides" link, without moving anything: the
   extra padding is cancelled by an equal negative margin. */
.footer-links a, .footer-links button { min-height: 44px; min-width: 44px; justify-content: center; padding-inline: 11px; margin-inline: -11px; }
.back-link { padding-block: 12px; margin-block: -12px; }
@media (max-width:720px){.site-footer .footer-links{row-gap:2px}}

/* 404: Did you mean (site.js fills it from the page's #rk-routes). */
.notfound-guess { margin: 0 0 24px; padding: 14px 18px; border-left: 2px solid var(--brass); background: rgba(182, 139, 82, .06); font-size: 16px; color: var(--silver); }
.notfound-guess a { color: var(--brass-light); text-decoration: underline; text-underline-offset: 4px; }

/* Search in the phone menu (built by site.js), handing the words to the blog's search. Phones only. */
.nav-search{display:none}
@media (max-width:720px){.main-nav .nav-search{display:flex;gap:10px;width:100%;margin-top:18px}.main-nav .nav-search .blog-search{flex:1 1 auto;width:auto}.main-nav .nav-search .button{min-height:46px;padding:10px 18px}}

/* The blog and What's new masthead art: the 900px hero on phones (preloaded with the same media query). */
@media (max-width:720px){.blog-masthead::before{background-image:linear-gradient(90deg,var(--ink) 10%,rgba(16,14,16,.73) 65%,rgba(16,14,16,.55)),url(../tauren-horde-900.webp)}}

/* Offline reading: the notice site.js shows on a page the service worker served from its saved copy. */
.offline-note{margin:0;padding:12px 22px;background:var(--steel);border-bottom:1px solid var(--brass-dark);color:var(--silver);font-size:14px;line-height:1.6;text-align:center}

/* Note cards are one object (visual pass, 8 Nov): one edge on the card itself, the cover inside it with no box of
   its own (covers.css), and the text padded off the edge, so the fill covers everything the card holds.
   The homepage's own layouts are in home-blog.css. */
.note-card>a{border:1px solid rgba(100,87,82,.45);transition:border-color .2s}
.note-card>a:focus-visible {border-color:rgba(182,139,82,.6)}
@media (hover: hover) { .note-card>a:hover {border-color:rgba(182,139,82,.6)} }
.note-body{padding:20px 22px 0}
.note-read{padding-bottom:18px}
/* The archive's meta line reads left to right with one gap, as on the homepage, so a wrapped line starts at the text edge. */
.blog-archive .note-meta{justify-content:flex-start;gap:4px 14px}
@media (max-width:720px){
  .note-body{padding:18px 18px 0}
  .note-read{padding-bottom:16px}
  /* Archive rows on phones: the medallion tile and the text side by side inside the card's padding. */
  .blog-archive .note-card>a{padding:16px}
  .blog-archive .note-card .note-body{padding:0}
  .blog-archive .note-card .note-read{padding-bottom:0}
}

/* Blog and What's new masthead art from 721px: cropped from near the top, so the horns and face show in the band. */
@media (min-width:721px){.blog-masthead::before{background-position:0 0,right 9%}}

/* Blog filters: each label on one line, so "All posts" never wraps to two lines and every chip in the row
   shares one height and one baseline (alignment sweep, 8 Nov). Tighter at 360px and below so the four fit. */
.blog-toolbar .note-filters button{white-space:nowrap}
@media (max-width:360px){.blog-toolbar .note-filters button{padding-inline:12px}}
/* watch.css */
/* Twitch and YouTube: where the site points at the stream, and how those links look.

   Placements, kept deliberately few:
   - header: one quiet pair of links on every page (icons only on phones)
   - homepage #stream: the one full schedule, calendar button and channel cards
   - end of each post and the archive: one compact .stream-invite that links back to #stream
   - footer: plain text links, styled like the other footer links (styles.css)

   Channel colours are defined once here. Contrast against the site's charcoal (#100E10)
   and dark iron (#211E1E), WCAG 2.x:
     --twitch      #9146FF  icon/border 4.14 on charcoal, 3.56 on iron (UI, needs 3:1)
     --twitch-fill #9146FF  white label on fill 4.64 (text, needs 4.5:1)
     --youtube     #FF0000  icon/border 4.81 on charcoal, 4.14 on iron (UI, needs 3:1)
     --youtube-fill #E00000 white label on fill 5.04 (text, needs 4.5:1); pure #FF0000 is 4.00 and fails
   Labels at rest stay moon silver (16.46 on charcoal). Brand red stays distinct from the
   site's Horde crimson (#A5362F), which remains the action colour. */
:root {
  --twitch: #9146ff;
  --twitch-fill: #9146ff;
  --twitch-tint: rgba(145, 70, 255, .1);
  --twitch-line: rgba(145, 70, 255, .55);
  --youtube: #ff0000;
  --youtube-fill: #e00000;
  --youtube-tint: rgba(255, 0, 0, .08);
  --youtube-line: rgba(255, 0, 0, .5);
}

/* Shared hover and focus: the full brand colour, white label and icon. */
.watch-nav-twitch:focus-visible, .stream-destination-twitch:focus-visible, .channel-links .channel-link-twitch:focus-visible {
  background: var(--twitch-fill);
  border-color: var(--twitch-fill);
  color: #fff;
}
@media (hover: hover) { .watch-nav-twitch:hover, .stream-destination-twitch:hover, .channel-links .channel-link-twitch:hover {
  background: var(--twitch-fill);
  border-color: var(--twitch-fill);
  color: #fff;
} }
.watch-nav-youtube:focus-visible, .stream-destination-youtube:focus-visible, .channel-links .channel-link-youtube:focus-visible {
  background: var(--youtube-fill);
  border-color: var(--youtube-fill);
  color: #fff;
}
@media (hover: hover) { .watch-nav-youtube:hover, .stream-destination-youtube:hover, .channel-links .channel-link-youtube:hover {
  background: var(--youtube-fill);
  border-color: var(--youtube-fill);
  color: #fff;
} }
:is(.watch-nav-link, .stream-destination, .channel-link):is(:focus-visible) .icon, :is(.stream-destination):is(:focus-visible) small { color: #fff !important; }
@media (hover: hover) { :is(.watch-nav-link, .stream-destination, .channel-link):is(:hover, :focus-visible) .icon, :is(.stream-destination):is(:hover, :focus-visible) small { color: #fff !important; } }

/* Header: a quiet pair of links, no boxes. */
.header-watch {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.watch-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
}
.watch-nav-link > .icon { width: 17px; height: 17px; }
.watch-nav-twitch > .icon { color: var(--twitch); }
.watch-nav-youtube > .icon { color: var(--youtube); }

/* Homepage schedule: the one place with the full times and both channel cards. */
.stream-destinations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  background: rgba(33, 30, 30, .55);
}
.stream-destination {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 28px;
  border-top: 2px solid transparent;
  transition: background .2s, color .2s;
}
.stream-destination:first-child { border-right: 1px solid var(--line); }
.stream-destination-twitch { border-top-color: var(--twitch-line); }
.stream-destination-youtube { border-top-color: var(--youtube-line); }
.stream-destination > .icon:first-child { width: 25px; height: 25px; }
.stream-destination-twitch > .icon { color: var(--twitch); }
.stream-destination-youtube > .icon { color: var(--youtube); }
.stream-destination strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.6; }
.stream-destination small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.stream-destination > .icon:last-child { width: 16px; margin-left: auto; }

/* End of a post, and the archive: one compact invitation, no schedule repeated. */
.stream-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.stream-invite-copy { min-width: 0; flex: 1 1 280px; }
.prose .stream-invite p { margin: 0; }
.stream-invite-copy a { white-space: nowrap; color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .5); text-underline-offset: 4px; }
.prose .stream-invite-copy a { border-bottom: 0; }
@media (hover: hover) { .stream-invite-copy a:hover { text-decoration-color: var(--brass-light); } }
.stream-invite-title {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--silver);
}
.stream-invite-copy > p:last-child { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.stream-invite-page { margin-top: 0; margin-bottom: 60px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }

.channel-links { display: flex; gap: 10px; flex-shrink: 0; }
.channel-links .channel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid;
  color: var(--silver);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.channel-link > .icon { width: 17px; height: 17px; }
.channel-links .channel-link-twitch { border-color: var(--twitch-line); background: var(--twitch-tint); }
.channel-link-twitch > .icon { color: var(--twitch); }
.channel-links .channel-link-youtube { border-color: var(--youtube-line); background: var(--youtube-tint); }
.channel-link-youtube > .icon { color: var(--youtube); }

/* The hero keeps one strong action: Read the blog. */
.hero-actions { flex-wrap: wrap; gap: 12px; }
.hero-actions > .button-primary { min-height: 48px; }

@media (max-width: 1080px) and (min-width: 721px) {
  .header-inner { gap: 14px; }
  .header-watch { padding-left: 10px; }
  .watch-nav-link { padding-inline: 8px; }
}

@media (max-width: 950px) and (min-width: 721px) {
  .watch-nav-link { width: 38px; padding-inline: 0; justify-content: center; }
  .watch-nav-link > span { display: none; }
}

@media (max-width: 720px) {
  /* One header row: brand, the two channel icons, menu. Social icons live in the footer. */
  .header-inner > .header-socials { display: none; }
  .header-watch { margin-left: auto; padding-left: 0; border: 0; gap: 0; }
  .watch-nav-link { width: 42px; padding: 0; justify-content: center; }
  .watch-nav-link > span { display: none; }
  .watch-nav-link > .icon { width: 20px; height: 20px; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 414px; }
  .hero-actions .button { width: 100%; min-width: 0; }
  .stream-destinations { grid-template-columns: minmax(0, 1fr); }
  .stream-destination { padding: 18px 22px; min-height: 82px; gap: 14px; }
  .stream-destination:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .channel-links { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-links .channel-link { justify-content: center; }
}

@media print {
  .header-watch, .stream-destinations, .stream-invite { display: none !important; }
}

/* Level progress (build-guides.py, from design/level.json) on the homepage stream card and About#stream. */
/* The level number keeps the line's own font and size (it was 18px Cinzel, which sat oddly beside the Inter numbers and stretched the line box). */
.level-progress { margin-top: 18px; }
.level-line { font-size: 13px; line-height: 1.6; color: var(--silver); }
.level-line b { font-weight: 600; color: var(--brass-light); font-variant-numeric: tabular-nums; }
.level-bar { display: block; height: 4px; margin-top: 8px; background: rgba(100, 87, 82, .35); overflow: hidden; }
.level-bar > span { display: block; height: 100%; background: var(--brass); }
.level-when { margin-top: 6px; font-size: 11px; color: var(--muted); }
.talent-prose .level-progress { margin: 0 0 21px; }
.talent-prose .level-line { color: inherit; margin: 0; }
.talent-prose .level-when { margin: 6px 0 0; }
.talent-prose .level-bar { background: rgba(43, 32, 22, .18); }
.talent-prose .level-bar > span { background: var(--p-copper, #6A4612); }
.talent-prose .level-line b { color: var(--p-accent, #8A2C24); }
.talent-prose .level-when { color: var(--p-soft, #5B4A3A); }
@media (prefers-contrast: more) { .level-bar { outline: 1px solid currentColor; } }
@media print { .level-bar { border: 1px solid #000; background: #fff; } .level-bar > span { background: #000; } }
/* druid-article.css */
/* Restokins Druid talents editorial feature — progressive, no JavaScript required.
   Figures are native HTML so text remains selectable and readable on small screens. */









.talent-masthead{padding-bottom:52px}
.talent-masthead h1{max-width:1020px;font-size:clamp(36px,4.5vw,62px);line-height:1.13;letter-spacing:-.035em;text-wrap:balance}
.talent-masthead .article-deck{max-width:760px;line-height:1.8}
.talent-byline{margin-top:20px;color:var(--muted);font-size:12px;line-height:1.8}
.talent-byline span{color:var(--brass);padding-inline:6px}
.talent-layout{align-items:start}
.talent-layout .article-aside{position:sticky;top:38px}
.talent-layout .article-aside a{display:block;margin-top:10px}
.talent-prose{min-width:0;max-width:820px}
.talent-prose>p{font-size:15px;line-height:1.95;margin-block:0 23px}
.talent-prose>p:first-of-type{font-size:17px;line-height:1.86;color:var(--silver)}
.talent-prose h2{scroll-margin-top:100px;margin-top:63px;margin-bottom:23px;line-height:1.3;text-wrap:balance}
.talent-prose h3{margin-top:35px;margin-bottom:17px}
.talent-prose a:not(.button):not(.text-link):not(.channel-link){text-decoration:underline;text-decoration-color:rgba(223,189,130,.5);text-underline-offset:4px}
@media (hover: hover) { .talent-prose a:not(.button):not(.text-link):not(.channel-link):hover {text-decoration-color:var(--brass-light)} }
.talent-prose .talent-hero{margin:36px 0 38px}
.talent-hero img{width:100%;height:auto;max-height:465px;aspect-ratio:16/9;object-fit:cover;object-position:60% 44%;border:1px solid rgba(223,189,130,.22)}
.talent-hero figcaption,.talent-visual figcaption{font:12px/1.7 var(--body);color:var(--muted);margin-top:10px}
.talent-prose .article-visual{width:100%;max-width:100%;margin:38px 0 42px}
.talent-visual{border:1px solid rgba(182,139,82,.35);background:linear-gradient(160deg,#26232a,#18171d 62%);padding:26px 27px 22px;border-radius:3px;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.talent-visual-head{margin-bottom:20px}
.talent-visual-head .diagram-number{display:block;color:var(--brass-light);font:600 10px/1.5 var(--body);letter-spacing:.15em;margin-bottom:10px}
.talent-prose .talent-visual :is(h2,h3){font:500 clamp(20px,2vw,25px)/1.26 var(--display);letter-spacing:0;color:var(--silver);margin:0}
.talent-visual-head p{font:13px/1.7 var(--body);color:var(--muted);margin:9px 0 0}
.talent-prose .talent-visual h4,.talent-prose .talent-visual h3.spec-title{font:600 16px/1.35 var(--body);letter-spacing:0;margin:0;color:var(--silver)}
.talent-visual p{margin:0}
.talent-visual figcaption{border-top:1px solid var(--line);padding-top:15px;margin-top:20px}
.spec-snapshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.spec-cell{border:1px solid rgba(231,238,248,.10);border-top:3px solid #8a77e8;background:#181b2a;padding:20px 14px 17px;min-width:0}
.spec-feral{border-top-color:#c08a4c;background:#24201d}
.spec-resto{border-top-color:#58b46a;background:#15231d}
.spec-glyph{display:inline-block;font:36px/1 var(--display);color:#baa9ff;margin-bottom:13px}
.spec-feral .spec-glyph{color:#d7a563}.spec-resto .spec-glyph{color:#74c88d}
.spec-cell h4,.spec-cell .spec-title{margin:0}.spec-focus{font:11px/1.6 var(--body);color:var(--muted);margin:7px 0 18px!important}
.spec-detail{padding-top:13px;border-top:1px solid rgba(231,238,248,.13)}
.spec-detail strong{display:block;font:700 10px/1.5 var(--body);text-transform:uppercase;letter-spacing:.085em;color:var(--brass-light);margin:9px 0 4px}
.spec-detail p{font:12px/1.65 var(--body);color:#ced3dc}
.scenario-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.scenario-pair section{border:1px solid rgba(231,238,248,.12);padding:18px;background:rgba(7,11,20,.35);min-width:0}
.scenario-pair h4{margin-bottom:19px!important}
.scenario-pair section>p{font:12px/1.7 var(--body);color:var(--muted);margin-top:15px}
.cast-flow{list-style:none!important;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0!important;margin:0!important}
.cast-flow li{display:inline-flex;align-items:center;gap:7px;margin:0!important;padding:9px 11px!important;border:1px solid rgba(231,238,248,.19);font:600 11px/1.4 var(--body);background:rgba(138,119,232,.09);color:var(--silver)}
.cast-flow li{position:relative}.cast-flow li:not(:last-child)::after{content:'→';position:absolute;left:100%;top:50%;transform:translateY(-50%);width:18px;text-align:center;color:var(--brass-light)}
.cast-flow li:not(:first-child){margin-left:10px!important}
.cast-flow li.highlight{border-color:rgba(138,119,232,.5)}
.cast-flow li.break{border-color:rgba(182,139,82,.48)}
.mana-source{width:max-content;max-width:100%;margin:0 auto 31px;border:1px solid #7fc4ff;padding:13px 30px;text-align:center;background:rgba(46,124,230,.09);display:flex;align-items:center;gap:12px}
.mana-source span{font-size:26px;color:#7fc4ff}.mana-source strong{font-size:15px}
.mana-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.mana-branches::before{content:'';position:absolute;top:-20px;left:16.66%;right:16.66%;height:1px;background:rgba(127,196,255,.4)}
.mana-branches section{position:relative;padding:18px 14px;background:rgba(14,20,32,.66);border:1px solid rgba(127,196,255,.20);min-height:145px}
.mana-branches section::before{content:'';position:absolute;left:50%;top:-20px;height:20px;border-left:1px solid rgba(127,196,255,.4)}
.branch-title{font:600 13px var(--body);color:#d5e9ff}
.mana-branches p{font:12px/1.75 var(--body);color:var(--muted);margin-top:11px}
.bloom-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bloom-steps section{padding:19px 13px;background:rgba(17,35,28,.62);border:1px solid rgba(88,180,106,.3);min-width:0}
.bloom-steps section:nth-child(2){background:rgba(47,36,30,.52);border-color:rgba(182,139,82,.45)}
.bloom-steps section:nth-child(3){background:rgba(27,28,41,.5);border-color:rgba(138,119,232,.38)}
.bloom-label{display:block;color:#c0d5c4;font:700 10px/1.5 var(--body);text-transform:uppercase;letter-spacing:.09em;min-height:32px}
.bloom-steps strong{font:500 clamp(16px,2.2vw,22px)/1.3 var(--display);color:var(--silver);display:block;margin:16px 0 9px}
.bloom-steps p{font:12px/1.6 var(--body);color:var(--muted)}
.change-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.change-grid section{padding:18px;border:1px solid rgba(231,238,248,.14);background:rgba(13,16,22,.45);min-width:0}
.change-grid section.change-balance{border-top:2px solid #8a77e8}.change-grid section.change-feral{border-top:2px solid #c08a4c}.change-grid section.change-resto{border-top:2px solid #58b46a}
.change-tag{font:600 9px var(--body);letter-spacing:.14em;color:var(--brass-light)}
.change-grid h4{margin:12px 0 9px!important;font-size:14px!important}
.change-grid p{font:12px/1.75 var(--body);color:#c5cbd4}
.change-grid small{display:block;border-top:1px solid rgba(231,238,248,.1);padding-top:13px;margin-top:14px;color:#9fabbc;font:11px/1.65 var(--body)}
.talent-sources{border-top:1px solid var(--line);padding-top:12px;margin-top:55px}
.talent-sources h2{font-size:25px!important}
.talent-sources ul{padding-left:20px;margin:10px 0 30px}
.talent-sources li{font-size:13px;line-height:1.8;margin:9px 0}
.talent-sources p{font-size:13px;line-height:1.85}


@media(max-width:920px){.talent-layout .article-aside{position:static}.talent-prose{max-width:none}}
@media(max-width:720px){.talent-masthead{padding-bottom:32px}.talent-masthead h1{font-size:clamp(29px,7vw,42px);line-height:1.2}.talent-prose>p{font-size:14px;line-height:1.9}.talent-prose>p:first-of-type{font-size:15px}.talent-prose h2{margin-top:43px}.talent-visual{padding:19px 15px 17px}.spec-snapshot,.mana-branches,.bloom-steps{grid-template-columns:1fr}.spec-cell{display:grid;grid-template-columns:38px 1fr;column-gap:13px;padding:15px}.spec-glyph{grid-row:1/3;font-size:31px;margin:0}.spec-focus{grid-column:2;margin:2px 0 10px!important}.spec-detail{grid-column:1/-1}.scenario-pair,.change-grid{grid-template-columns:1fr}.mana-branches::before{display:none}.mana-branches section{min-height:0}.mana-branches section::before{display:none}.mana-source{margin-bottom:15px}.bloom-label{min-height:0}.bloom-steps strong{margin:9px 0 5px}.cast-flow{gap:5px}.cast-flow li{font-size:10px;padding:8px!important}.talent-hero img{aspect-ratio:4/3;object-position:68%}.talent-sources li{overflow-wrap:anywhere}}
@media(max-width:365px){.talent-visual{padding:16px 11px}.talent-masthead h1{font-size:29px}.cast-flow{display:grid;justify-items:start}.cast-flow li:not(:first-child){margin-left:0!important}.cast-flow li:not(:last-child)::after{display:none}}
















.revision-note{border:1px solid rgba(182,139,82,.4);border-left:3px solid var(--brass);background:rgba(182,139,82,.07);padding:14px 18px;margin:0 0 30px}
.revision-note p{font:13px/1.8 var(--body);color:#d4d9e2;margin:0}
.revision-note strong{color:var(--brass-light)}
.omen-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.omen-flow section{padding:16px 14px;border:1px solid rgba(127,196,255,.22);background:rgba(14,20,32,.66);min-width:0;position:relative}
.omen-flow section:not(:last-child)::after{content:'→';position:absolute;right:-10px;top:14px;color:var(--brass-light);font-size:15px;z-index:1}
.talent-prose .omen-flow ul{list-style:none;padding:0;margin:10px 0 0}
.talent-prose .omen-flow li{font:12px/1.6 var(--body);color:#ced3dc;padding:7px 0 7px 16px;border-top:1px solid rgba(231,238,248,.08);margin:0;position:relative}
.omen-flow li::before{content:'+';position:absolute;left:0;color:#74c88d}
.omen-flow li.no::before{content:'×';color:#e3867f}
.cost-line{display:flex;justify-content:space-between;gap:10px;font:12px/1.6 var(--body);color:#ced3dc;padding:7px 0;border-top:1px solid rgba(231,238,248,.08)}
.cost-line b{color:var(--silver);font-weight:600;text-align:right}
@media(max-width:720px){.omen-flow{grid-template-columns:1fr}.omen-flow section:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-14px}}

/* Sweep 4 Nov: cast-flow arrows sit in an even gap, and wrapped rows start flush with the first. */
.cast-flow{column-gap:18px!important}.cast-flow li:not(:first-child){margin-left:0!important}
/* pvp-mechanics.css */
/* Restokins PvP mechanics guide - skill sheets, figure layouts and the printable checklist.
   Diagram, map and frame styling lives in figures.css.
   Everything is native HTML or inline SVG so it stays readable without JavaScript. */
.guide-hero{margin:36px 0 38px}
.guide-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(223,189,130,.22);display:block}
.guide-hero figcaption{font:11px/1.7 var(--body);color:var(--muted);margin-top:10px}
.guide-status{display:inline-block;font:700 9px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:4px 7px;border:1px solid rgba(231,238,248,.2);border-radius:2px;color:var(--silver);vertical-align:middle;margin-left:6px;white-space:nowrap}
.guide-status.confirmed{border-color:rgba(88,180,106,.6);color:#8fd7a1}
.guide-status.probable{border-color:rgba(223,189,130,.6);color:var(--brass-light)}
.guide-status:is(.unverified,.untested){border-color:rgba(138,119,232,.6);color:#c3b6ff}
.guide-status.obsolete{border-color:rgba(165,54,47,.7);color:#e3867f}
.status-key{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 23px;padding:0;list-style:none}
.status-key li{font:12px/1.6 var(--body);color:var(--muted);display:flex;align-items:center;gap:7px}
.status-key .guide-status{margin:0}
/* Tier ladder (roadmap) */
.tier-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;position:relative}
.tier-ladder::before{content:'';position:absolute;left:12.5%;right:12.5%;top:-6px;height:1px;background:rgba(223,189,130,.35)}
.tier{position:relative;border:1px solid rgba(231,238,248,.12);background:rgba(7,11,20,.4);padding:18px 14px 16px;min-width:0;border-top:3px solid var(--brass)}
.tier-2{border-top-color:#9fb3c8}.tier-3{border-top-color:#8a77e8}.tier-4{border-top-color:var(--horde)}
.tier-num{display:block;font:500 28px/1 var(--display);color:var(--brass-light);margin-bottom:12px}
.tier-2 .tier-num{color:#c7d6e6}.tier-3 .tier-num{color:#baa9ff}.tier-4 .tier-num{color:#e3867f}
.talent-prose .talent-visual .tier h4{font-size:15px}
.tier-buys{font:12px/1.65 var(--body);color:var(--muted);margin:8px 0 14px!important;min-height:58px}
.tier ol{list-style:none;padding:0;margin:0;border-top:1px solid rgba(231,238,248,.08)}
.tier ol li{font:12px/1.5 var(--body);color:#ced3dc;padding:6px 0;margin:0}
.tier ol li:first-child{padding-top:10px}
/* Skill entries */
.skill{scroll-margin-top:100px;margin-top:44px;padding-top:6px}
.skill-tag{display:block;font:700 10px/1.5 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--brass-light);margin-bottom:6px}
.talent-prose .skill h3{margin-top:0;margin-bottom:14px;font-size:clamp(21px,2.6vw,27px);line-height:1.3}
.skill>p{font-size:15px;line-height:1.95;margin:0 0 20px}
.skill-sheet{list-style:none;padding:0;margin:0 0 10px;border:1px solid rgba(182,139,82,.3);background:linear-gradient(160deg,#211f26,#17161b 70%);border-radius:3px}
.skill-sheet li{margin:0;padding:14px 18px;border-bottom:1px solid rgba(231,238,248,.08);font:13.5px/1.85 var(--body);color:#d4d9e2}
.skill-sheet li:last-child{border-bottom:0}
.skill-sheet li strong{color:var(--silver)}
.skill-sheet code{font-size:12px}
.skill-sheet li.drill{background:rgba(182,139,82,.07)}
.skill-sheet li.mastery{background:rgba(88,180,106,.06)}
/* Decision map (forms) */
.decision-map{display:grid;gap:9px}
.decision-row{display:grid;grid-template-columns:minmax(0,1.15fr) 28px minmax(0,1fr);gap:0 8px;align-items:stretch}
.decision-q{border:1px solid rgba(231,238,248,.14);background:rgba(7,11,20,.45);padding:14px 15px;min-width:0}
.decision-q p{font:13px/1.65 var(--body);color:var(--silver)}
.decision-q small{display:block;margin-top:6px;font:11px/1.6 var(--body);color:var(--muted)}
.decision-arrow{display:flex;align-items:center;justify-content:center;color:var(--brass-light);font-size:18px}
.decision-a{border:1px solid rgba(182,139,82,.45);background:rgba(182,139,82,.08);padding:14px 15px;min-width:0}
.decision-a.form-bear{border-color:rgba(192,138,76,.6);background:rgba(36,32,29,.75)}
.decision-a.form-travel{border-color:rgba(88,180,106,.55);background:rgba(21,35,29,.8)}
.decision-a.form-caster{border-color:rgba(138,119,232,.55);background:rgba(24,27,42,.85)}
.decision-a.form-cat{border-color:rgba(223,189,130,.6);background:rgba(43,36,26,.8)}
.decision-a strong{display:block;font:600 14px/1.35 var(--body);color:var(--silver);margin-bottom:5px}
.decision-a p{font:12px/1.65 var(--body);color:#ced3dc}
/* Encounter tree */
.tree-root{width:max-content;max-width:100%;margin:0 auto 28px;border:1px solid #dfbd82;padding:12px 26px;text-align:center;background:rgba(182,139,82,.12);font:600 14px/1.4 var(--body);color:var(--silver)}
.tree-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.tree-branches::before{content:'';position:absolute;top:-18px;left:16.66%;right:16.66%;height:1px;background:rgba(223,189,130,.4)}
.tree-branch{position:relative;border:1px solid rgba(231,238,248,.14);background:rgba(7,11,20,.45);padding:16px 13px;min-width:0}
.tree-branch::before{content:'';position:absolute;left:50%;top:-18px;height:18px;border-left:1px solid rgba(223,189,130,.4)}
.tree-branch h4{font-size:14px!important;margin-bottom:12px!important}
.tree-steps{list-style:none;padding:0;margin:0;counter-reset:step}
.tree-steps li{counter-increment:step;position:relative;padding:8px 0 8px 28px;font:12px/1.6 var(--body);color:#ced3dc;border-top:1px solid rgba(231,238,248,.08);margin:0}
.tree-steps li::before{content:counter(step);position:absolute;left:0;top:9px;width:18px;height:18px;border-radius:50%;border:1px solid var(--brass);color:var(--brass-light);font:600 10px/18px var(--body);text-align:center}
.tree-steps li.fork{color:var(--silver)}
.tree-steps li.fork::before{background:rgba(182,139,82,.2)}
/* Scenario blocks */
.scenario-meta{margin:0 0 18px;padding:14px 16px;background:rgba(7,11,20,.6);border:1px solid rgba(231,238,248,.12);border-left:3px solid var(--brass);font:12.5px/1.8 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;color:#d4d9e2;white-space:pre-wrap;overflow-wrap:anywhere}
.scenario-meta b{color:var(--brass-light);font-weight:600}
/* Checklist */
.drill-checklist{list-style:none;padding:0;margin:0;columns:2;column-gap:28px}
.drill-checklist li{break-inside:avoid;position:relative;padding:7px 0 7px 30px;font:13px/1.65 var(--body);color:#d4d9e2;margin:0}
.drill-checklist li::before{content:'';position:absolute;left:2px;top:11px;width:14px;height:14px;border:1px solid var(--brass-light);border-radius:2px;background:rgba(7,11,20,.5)}
.drill-checklist li.group{padding-left:0;margin-top:14px;font:700 10px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-light);break-after:avoid}
.drill-checklist li.group::before{display:none}
.checklist-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.checklist-actions button{font:600 12px/1.4 var(--body);letter-spacing:.06em;padding:10px 16px;border:1px solid var(--brass);background:transparent;color:var(--brass-light);cursor:pointer;border-radius:2px}
@media (hover: hover) { .checklist-actions button:hover {background:rgba(182,139,82,.14)} }
.checklist-actions small{font:11px/1.6 var(--body);color:var(--muted)}
/* Verification table */
.verify-table{width:100%;border-collapse:collapse;font:12.5px/1.6 var(--body);color:#d4d9e2}
.verify-table th{text-align:left;font:700 10px/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-light);padding:8px 10px 10px 0;border-bottom:1px solid rgba(223,189,130,.35)}
.verify-table td{padding:10px 10px 10px 0;border-bottom:1px solid rgba(231,238,248,.08);vertical-align:top}
.verify-table td:first-child{color:var(--silver);font-weight:600;width:30%}
.verify-table td:nth-child(2){width:120px;white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:920px){.tier-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.tier-ladder::before{display:none}.tier-buys{min-height:0}}
@media(max-width:720px){.tree-branches{grid-template-columns:1fr}.tree-branches::before,.tree-branch::before{display:none}.drill-checklist{columns:auto}.decision-row{grid-template-columns:1fr}.decision-arrow{transform:rotate(90deg);height:22px}.skill-sheet li{padding:12px 13px;font-size:13px}.verify-table td:first-child{width:auto}.verify-table td:nth-child(2){white-space:normal;width:auto}.tier-ladder{grid-template-columns:1fr}}
@media print{
  body{background:#fff;color:#111}
  .site-header,.site-footer,.article-aside,.article-end,.privacy-dialog,.checklist-actions,.back-link,.guide-hero{display:none!important}
  body.print-checklist main>*{display:none}
  body.print-checklist main .article-layout{display:block}
  body.print-checklist .article-layout>*{display:none}
  body.print-checklist .talent-prose{display:block;max-width:none}
  body.print-checklist .talent-prose>*{display:none}
  body.print-checklist .talent-prose>#visual-08,body.print-checklist .talent-prose>.printable{display:block;border:0;background:#fff;box-shadow:none;padding:0;color:#111}
  body.print-checklist #visual-08 *,body.print-checklist .printable *{color:#111!important;background:transparent!important}
  body.print-checklist .drill-checklist li::before{border-color:#111;background:#fff}
  body.print-checklist #visual-08 .diagram-number,body.print-checklist .printable .diagram-number{color:#555!important}
  body.print-checklist #visual-08 figcaption,body.print-checklist .printable figcaption{border-top-color:#999}
}
.talent-prose ul.cast-flow{padding:0 24px 0 0!important;margin:0 0 22px!important}
@media(max-width:920px){.talent-layout .talent-prose{align-self:stretch;width:100%;min-width:0}.talent-layout .article-aside{align-self:stretch;width:100%}}

/* Sweep 4 Nov: the key pills share one width so the definitions start on one line. */
.status-key .guide-status{min-width:92px;text-align:center;flex:none}
/* From 1081px, where the body is 18px, checklist lines (the short versions, cheat sheets and drills) step up to 14px. */
@media(min-width:1081px){.drill-checklist li{font-size:14px}}
/* patch-notes.css */
/* Restokins patch-notes figures: native HTML charts with selectable text, no JavaScript.
   Palette (validated on the #1f1d23 chart panel): de-emphasis #6e6a74, Feral #c07a2c,
   Starfire #8a77e8, Restoration #3f9d55. Marks carry dark ink, the gray carries silver. */

/* Field note 01: verdicts and change lists inside the shared spec cells */
.pn-verdict{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid;font:700 10px/1.5 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--silver)}
.pn-verdict-up{border-color:#58b46a;background:rgba(88,180,106,.14)}
.pn-verdict-mixed{border-color:var(--brass);background:rgba(182,139,82,.12)}
.pn-verdict-down{border-color:#da7060;background:rgba(165,54,47,.18)}
.talent-prose .pn-list{list-style:none;padding:0;margin:4px 0 0}
.talent-prose .pn-list li{position:relative;margin:0;padding:7px 0 7px 17px;border-top:1px solid rgba(231,238,248,.08);font:12px/1.6 var(--body);color:#ced3dc}
.talent-prose .pn-list li:first-child{border-top:0}
.pn-list li::before{position:absolute;left:0;top:7px;font-weight:700;line-height:1.6}
.pn-list li.pn-gain::before{content:'+';color:#74c88d}
.pn-list li.pn-loss::before{content:'\2212';color:#e3867f}
.pn-list li.pn-same::before{content:'\2022';color:var(--brass-light)}
.pn-list b{color:var(--silver);font-weight:600}
.pn-list small{color:var(--muted);font-size:11px}
.pn-was{color:#9aa3b1;text-decoration:line-through;text-decoration-color:rgba(231,238,248,.4)}

/* Shared chart panel */
.pn-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px;font:600 11px/1.4 var(--body);color:#ced3dc}
.pn-legend span{display:inline-flex;align-items:center;gap:7px}
.pn-swatch{display:inline-block;width:14px;height:10px;border-radius:2px}
.pn-swatch-before{background:#6e6a74}
.pn-swatch-feral{background:#c07a2c}
.pn-bars,.pn-timeline,.pn-table-wrap{background:#1f1d23;border:1px solid rgba(231,238,248,.07);padding:10px 16px 12px}

/* Field note 02: paired bars, beta in gray beneath the launch value in the accent */
.talent-prose .pn-bars{list-style:none;margin:0}
.talent-prose .pn-bars li{display:grid;grid-template-columns:62px minmax(0,1fr) 132px;align-items:center;gap:14px;margin:0;padding:11px 0;border-top:1px solid rgba(231,238,248,.07)}
.talent-prose .pn-bars li:first-child{border-top:0}
.pn-bars-label{font:600 13px/1.3 var(--body);color:var(--silver)}
.pn-bars-track{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:30px;background-image:repeating-linear-gradient(90deg,rgba(231,238,248,.11) 0 1px,transparent 1px 22.2222%)}
.pn-bar{display:block;width:var(--w);border-radius:0 4px 4px 0;transition:filter .15s ease}
@media (hover: hover) { .pn-bar:hover {filter:brightness(1.18)} }
.pn-bar-before{height:9px;background:#6e6a74}
.pn-bar-feral{height:15px;background:#c07a2c}
.pn-bars-value{font:11px/1.45 var(--body);color:var(--muted)}
.pn-bars-value b{display:block;font:600 17px/1.2 var(--body);color:var(--silver)}
.pn-bars-value small{font-size:11px}
.talent-prose .pn-bars li.pn-bars-axis{border-top:0;padding:0 0 2px}
.pn-bars-ticks{position:relative;height:16px}
.pn-bars-ticks span{position:absolute;top:0;left:calc(var(--x) * 1%);transform:translateX(-50%);font:10px/1.4 var(--body);color:var(--muted);white-space:nowrap}
.pn-bars-ticks span:first-child{transform:none}

/* Field notes 03 and 04: timelines, one second per grid line */
.pn-timeline{display:grid;gap:10px;container-type:inline-size}
.pn-tl-row{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:14px}
.pn-tl-label{font:600 12px/1.35 var(--body);color:var(--silver)}
.pn-tl-track{position:relative;height:32px;background-image:repeating-linear-gradient(90deg,rgba(231,238,248,.09) 0 1px,transparent 1px calc(100% / var(--scale)))}
.pn-seg{position:absolute;top:0;bottom:0;left:calc(var(--s) / var(--scale) * 100%);width:calc(var(--l) / var(--scale) * 100% - 2px);display:flex;align-items:center;justify-content:center;gap:4px;padding:0 6px;overflow:hidden;white-space:nowrap;border-radius:3px;font:600 11px/1 var(--body);transition:filter .15s ease}
@media (hover: hover) { .pn-seg:hover {filter:brightness(1.15)} }
.pn-seg-arcane{background:#8a77e8;color:#100e10}
.pn-seg-resto{background:#3f9d55;color:#100e10}
.pn-seg-muted{background:#6e6a74;color:#f3f5f9}
.pn-seg-ghost{border:1px solid rgba(138,119,232,.75);color:var(--muted);font-weight:500}
.pn-seg-open{border:1px solid #da7060;background:rgba(165,54,47,.2);color:var(--silver)}
.pn-seg-time{font-weight:400}
.pn-tl-total{position:absolute;top:0;bottom:0;left:calc(var(--s) / var(--scale) * 100% + 6px);display:flex;align-items:center;font:600 12px/1 var(--body);color:var(--silver);white-space:nowrap}
.pn-tl-axis{margin-top:-4px}
.pn-tl-ticks{position:relative;height:16px}
.pn-tl-ticks span{position:absolute;top:0;left:calc(var(--x) / var(--scale) * 100%);transform:translateX(-50%);font:10px/1.4 var(--body);color:var(--muted);white-space:nowrap}
.pn-tl-ticks span:first-child{transform:none}
.pn-tl-ticks .pn-tick-end{transform:translateX(-100%)}
@container (max-width:560px){
  .pn-tl-row{grid-template-columns:1fr;gap:6px}
  .pn-tl-axis .pn-tl-label{display:none}
  .pn-seg-name{display:none}
}

/* Field note 05: matchup table, stacked into cards on narrow screens */
.pn-table-wrap{overflow-x:auto;padding-top:4px;padding-bottom:4px}
.pn-matchups{width:100%;border-collapse:collapse;font:12px/1.6 var(--body);color:#ced3dc}
.pn-matchups th,.pn-matchups td{padding:10px 10px 10px 0;border-top:1px solid rgba(231,238,248,.08);text-align:left;vertical-align:top}
.pn-matchups thead th{border-top:0;font:700 10px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-light)}
.pn-matchups tbody th{font:600 13px/1.45 var(--body);color:var(--silver)}
.pn-matchups td:last-child,.pn-matchups th:last-child{padding-right:0;white-space:nowrap}
.pn-tag{display:inline-block;padding:2px 8px;border:1px solid;font:700 10px/1.6 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--silver)}
.pn-tag-harder{border-color:#da7060;background:rgba(165,54,47,.18)}
.pn-tag-easier{border-color:#58b46a;background:rgba(88,180,106,.14)}
.pn-tag-mixed{border-color:var(--brass);background:rgba(182,139,82,.12)}

@media(max-width:720px){
  .pn-bars,.pn-timeline,.pn-table-wrap{padding-left:11px;padding-right:11px}
  .talent-prose .pn-bars li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "track track";row-gap:7px;column-gap:10px}
  .pn-bars-label{grid-area:label;font-size:12px}
  .pn-bars-value{grid-area:value;text-align:right}
  .pn-bars-value b{display:inline;font-size:15px;margin-right:4px}
  .pn-bars-track,.pn-bars-ticks{grid-area:track}
  .talent-prose .pn-bars li.pn-bars-axis{grid-template-areas:"track track"}
  .pn-bars-axis .pn-bars-label,.pn-bars-axis .pn-bars-value{display:none}
  .pn-bars-ticks span:nth-child(2),.pn-bars-ticks span:nth-child(4){display:none}
  .pn-matchups thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .pn-matchups,.pn-matchups tbody,.pn-matchups tr,.pn-matchups th,.pn-matchups td{display:block}
  .pn-matchups tr{padding:12px 0;border-top:1px solid rgba(231,238,248,.08)}
  .pn-matchups tr:first-child{border-top:0}
  .pn-matchups th,.pn-matchups td{border:0;padding:3px 0}
  .pn-matchups td::before{content:attr(data-label);display:block;font:700 9px/1.6 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-light)}
  .pn-matchups td:last-child{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.pn-bar,.pn-seg{transition:none}}
@media(forced-colors:active){.pn-bar,.pn-seg,.pn-swatch{forced-color-adjust:none;border:1px solid CanvasText}}
/* figures.css */
/* Restokins figures: one file owns every diagram and figure panel.
   Two materials. Parchment war maps for battleground maps (.diagram-map), and
   iron and copper game panels (.ui-frame, .diagram-ui) for every other figure.
   Glyphs come from glyphs.svg, proxied inside each SVG's own defs. No raster images.
   Load after druid-article.css, pvp-mechanics.css and patch-notes.css so it wins ties. */
:root{
  --paper:#eee0c0;--paper-edge:#d6bf91;
  --ink-map:#33241a;--ink-soft:#47331f;--ink-terrain:#80684d;
  --ink-horde:#8c2a24;--ink-alliance:#23477c;--ink-green:#245a2f;--ink-violet:#4a3a9c;--ink-copper:#7a4f1c;
  --iron-0:#100e10;--iron-1:#1b1819;--iron-2:#211e1e;--copper:#b68b52;--copper-hi:#dfbd82;--copper-lo:#765338;--slot-bg:#120f11;
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .24 0 0 0 0 .13 0 0 0 .5 -.16'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --paper-blot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .8 -.36'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url%28%23b%29'/%3E%3C/svg%3E");
}

/* ---------- Diagram base (moved from pvp-mechanics.css, unchanged) ---------- */
.diagram{display:block;width:100%;height:auto;max-width:100%}
.diagram text{font-family:var(--body)}
.diagram .lbl{font-size:12px;fill:#e7eef8}
.diagram .lbl-sm{font-size:10.5px;fill:#a5afbe}
.diagram .lbl-brass{font-size:11px;fill:#dfbd82;font-weight:600;letter-spacing:.08em}
.diagram .lbl-display{font-family:var(--display);font-size:15px;fill:#e7eef8}
.diagram-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0;list-style:none}
.diagram-legend li{font:11px/1.6 var(--body);color:var(--muted);display:flex;align-items:center;gap:7px}
.diagram-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--brass)}
.diagram-legend i.violet{background:#8a77e8}.diagram-legend i.green{background:#58b46a}.diagram-legend i.red{background:#c0564d}.diagram-legend i.dot{width:9px;height:9px;border-radius:50%;margin-inline:2.5px}.diagram-legend i{flex:none}
.diagram-legend .key-num{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#f3e8cf;color:var(--ink-map);font:700 10px/1 var(--display);box-shadow:inset 0 0 0 1.5px var(--ink-map)}
.diagram-legend .key-glyph{width:16px;height:14px;flex:none}
.diagram-scroll{width:100%}
.talent-visual .diagram-hint{display:none;font:11px/1.6 var(--body);color:var(--brass-light);margin:8px 0 0}
@media(max-width:720px){
  .talent-visual .diagram-hint{display:block}
  .diagram-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--panel-pad,0px));padding:0 var(--panel-pad,0px) 6px;scrollbar-width:thin}
  .diagram-scroll .diagram{min-width:640px}
  .diagram-scroll .diagram-map{min-width:660px}
  .diagram-scroll .diagram.ui-frame,.diagram-scroll .diagram-ui{min-width:700px}
}

/* ---------- Parchment war map ---------- */
.diagram-map{color:var(--ink-map);border-radius:3px;
  background:var(--paper-grain),var(--paper-blot),radial-gradient(ellipse 75% 70% at 50% 46%,var(--paper) 55%,var(--paper-edge));
  background-size:240px 240px,600px 600px,100% 100%;
  box-shadow:0 0 0 1px var(--copper-lo),0 10px 24px rgba(0,0,0,.45),inset 0 0 38px rgba(86,65,44,.4)}
.m-frame{fill:none;stroke:var(--ink-map);stroke-width:1.6}
.m-frame.thin{stroke-width:.6}
.m-terrain{color:var(--ink-terrain)}
.m-compass{color:var(--ink-map);--g-accent:var(--ink-horde)}
.diagram .m-n{font:700 12px var(--display);fill:var(--ink-map);text-anchor:middle}
.m-field{fill:rgba(86,65,44,.06);stroke:var(--ink-soft);stroke-width:1.1;stroke-opacity:.7}
.m-earth{fill:rgba(86,65,44,.13);stroke:none}
.diagram .m-place{font:700 13.5px var(--display);letter-spacing:.05em;fill:var(--ink-map)}
.diagram .m-head{font:700 12px var(--display);letter-spacing:.1em;fill:var(--ink-map)}
.diagram-map .m-lbl{font-size:12.5px;font-weight:600;fill:var(--ink-map)}
.diagram-map .m-sm{font-size:11px;fill:var(--ink-soft)}
.diagram-map .m-note{font-size:11px;letter-spacing:.04em;fill:var(--ink-soft)}
.m-route{fill:none;stroke:var(--ink-map);stroke-linecap:round}
.m-route.r1{stroke-width:3.5}
.m-route.r2{stroke-width:2.4;stroke-dasharray:10 6}
.m-route.r3{stroke-width:3.2;stroke-dasharray:.1 7}
.m-line{fill:none;stroke:var(--ink-map);stroke-width:2}
.m-line.soft{stroke:var(--ink-soft);stroke-width:1.5;stroke-opacity:.75}
.m-line.thick{stroke-width:3.5}.m-line.ground{stroke-width:2.6}
.m-line.horde{stroke:var(--ink-horde)}.m-line.copper{stroke:var(--ink-copper);stroke-width:2}
.m-line.violet{stroke:var(--ink-violet)}
.m-base{stroke-width:2}
.m-base.alliance{fill:rgba(35,71,124,.1);stroke:var(--ink-alliance)}
.m-base.horde{fill:rgba(140,42,36,.12);stroke:var(--ink-horde)}
.m-wall{fill:var(--ink-horde);stroke:none}
.m-wall.alliance{fill:var(--ink-alliance)}
.m-ally{color:var(--ink-alliance)}.m-horde{color:var(--ink-horde)}
.m-speed{color:var(--ink-violet)}
.m-resto{color:var(--ink-green)}.m-berserk{color:var(--ink-horde)}
.m-ledge{fill:rgba(86,65,44,.08);stroke:var(--ink-soft);stroke-dasharray:4 3}
.m-num circle,circle.m-node{fill:#f3e8cf;stroke:var(--ink-map);stroke-width:1.5}
circle.m-node{stroke-width:2}
.m-num text{font:700 11.5px var(--display);fill:var(--ink-map);text-anchor:middle}
.m-carry{stroke:var(--ink-map);stroke-width:2}
.m-carry-head,.m-fill{fill:var(--ink-map)}
.m-fill.horde{fill:var(--ink-horde)}.m-fill.alliance{fill:var(--ink-alliance)}
.m-fill.violet{fill:var(--ink-violet)}.m-fill.green{fill:var(--ink-green)}.m-fill.copper{fill:var(--ink-copper)}
.m-pin{stroke:#f3e8cf;stroke-width:2}
.m-ring{fill:none;stroke-width:2.5}
.m-ring.green{stroke:var(--ink-green)}
.m-cave{fill:none;stroke-width:1.6;stroke-dasharray:5 4}
.m-cave.alliance{stroke:var(--ink-alliance)}.m-cave.horde{stroke:var(--ink-horde)}
.m-mine{fill:rgba(86,65,44,.12);stroke:var(--ink-soft);stroke-width:1.5}
.m-halo text{paint-order:stroke;stroke:#efe2c3;stroke-width:3px;stroke-linejoin:round}
.m-cartouche{fill:#f3e8cf;fill-opacity:.7;stroke:var(--ink-soft);stroke-width:1}

/* Map legend swatches on the dark card, so the key matches the ink on the page */
.legend-map i{background:var(--paper)!important;height:4px;box-shadow:0 0 0 1px var(--copper-lo)}

/* ---------- Iron and copper frame ----------
   One rule frames an inline SVG or an HTML panel: riveted copper corners, a faint
   copper bevel and an iron fill, all painted as backgrounds so no extra markup is needed. */
.ui-frame{
  --k:linear-gradient(var(--copper),var(--copper));
  --v:linear-gradient(rgba(223,189,130,.13),rgba(223,189,130,.13));
  --r:radial-gradient(circle,var(--copper-hi) 0 2.3px,var(--iron-0) 2.6px 3.1px,transparent 3.5px);
  background:
    var(--r) left 1px top 1px/10px 10px no-repeat,var(--r) right 1px top 1px/10px 10px no-repeat,
    var(--r) left 1px bottom 1px/10px 10px no-repeat,var(--r) right 1px bottom 1px/10px 10px no-repeat,
    var(--k) left 4px top 4px/22px 2px no-repeat,var(--k) left 4px top 4px/2px 22px no-repeat,
    var(--k) right 4px top 4px/22px 2px no-repeat,var(--k) right 4px top 4px/2px 22px no-repeat,
    var(--k) left 4px bottom 4px/22px 2px no-repeat,var(--k) left 4px bottom 4px/2px 22px no-repeat,
    var(--k) right 4px bottom 4px/22px 2px no-repeat,var(--k) right 4px bottom 4px/2px 22px no-repeat,
    var(--v) left 10px top 10px/calc(100% - 20px) 1px no-repeat,var(--v) left 10px bottom 10px/calc(100% - 20px) 1px no-repeat,
    var(--v) left 10px top 10px/1px calc(100% - 20px) no-repeat,var(--v) right 10px top 10px/1px calc(100% - 20px) no-repeat,
    linear-gradient(180deg,#201b1a,var(--iron-1) 45%,#161314);
  border:2px solid var(--copper-lo);border-radius:4px;padding:24px 24px 20px;
  box-shadow:inset 0 1px 0 rgba(223,189,130,.1),0 8px 18px rgba(0,0,0,.35)}
@media(max-width:720px){.ui-frame{padding:20px 16px 16px}}
@media(max-width:365px){.ui-frame{padding:18px 12px 14px}}
/* One frame is enough. Inside a figure the figure's iron band is the frame, so the .ui-frame
   drops its own border, corner brackets, rivets, bevel and fill, and lays out its slots bare. */
.talent-visual .ui-frame{background:none;border:0;border-radius:0;padding:0;box-shadow:none}

/* Inside a framed SVG: Cinzel section heads in copper, boxes as slots */
.diagram .ui-h{font:600 12.5px var(--display);letter-spacing:.09em;fill:var(--copper-hi)}
.ui-box{stroke-width:1.5px;stroke-opacity:.9}
.diagram.ui-frame .lbl-display{font-weight:600}

/* Slots: every cell inside a framed HTML panel. --slot is the cell's own accent,
   carried over from the colour it had before, so the meaning is unchanged.
   A slot has one edge only: the slot fill and either one quiet hairline in its accent, or,
   for tiers, spec cells, review steps and change columns, the coloured top alone. */
.ui-frame :is(.tier,.decision-q,.decision-a,.tree-branch,.spec-cell),
.ui-frame:is(.scenario-pair,.omen-flow,.bloom-steps,.change-grid)>section,
.ui-frame .mana-branches>section,.ui-frame .review-steps>li{
  --slot:#a5afbe;--tint:color-mix(in srgb,var(--slot) 7%,transparent);
  background:linear-gradient(var(--tint),var(--tint)),var(--slot-bg);
  border:1px solid color-mix(in srgb,var(--slot) 30%,transparent);border-radius:2px;
  box-shadow:none}
.ui-frame :is(.tier,.spec-cell),.ui-frame.change-grid>section,.ui-frame .review-steps>li{border:0;border-radius:0}
.ui-frame .tier{--slot:var(--copper);border-top:3px solid var(--slot)}
.ui-frame .tier-2{--slot:#9fb3c8}.ui-frame .tier-3{--slot:#8a77e8}.ui-frame .tier-4{--slot:#c0564d}
.ui-frame.tier-ladder::before{display:none}
.ui-frame .decision-a{--slot:var(--copper)}
.ui-frame .decision-a.form-bear{--slot:#c08a4c}.ui-frame .decision-a.form-travel{--slot:#58b46a}
.ui-frame .decision-a.form-caster{--slot:#8a77e8}.ui-frame .decision-a.form-cat{--slot:var(--copper-hi)}
.ui-frame .decision-arrow{color:var(--copper-hi)}
.ui-frame .spec-cell{border-top:3px solid var(--slot);--slot:#8a77e8}
.ui-frame .spec-feral{--slot:#c08a4c}.ui-frame .spec-resto{--slot:#58b46a}
.ui-frame.omen-flow>section,.ui-frame .mana-branches>section{--slot:#7fc4ff}
.ui-frame.bloom-steps>section:nth-child(1){--slot:#58b46a}
.ui-frame.bloom-steps>section:nth-child(2){--slot:var(--copper)}
.ui-frame.bloom-steps>section:nth-child(3){--slot:#8a77e8}
.ui-frame.change-grid>section.change-balance{border-top:2px solid #8a77e8}
.ui-frame.change-grid>section.change-feral{border-top:2px solid #c08a4c}
.ui-frame.change-grid>section.change-resto{border-top:2px solid #58b46a}

/* Plates: the one heading that sits over a panel, as on the talent pane's title bar. One edge. */
.ui-frame .tree-root,.ui-frame .mana-source{background:linear-gradient(180deg,#1d1918,var(--iron-0));border:1px solid var(--copper-lo);border-radius:2px;box-shadow:none}
.ui-frame .tree-root{font-family:var(--display);letter-spacing:.03em;color:var(--copper-hi)}
.ui-frame .tree-branches::before,.ui-frame .tree-branch::before{background:var(--copper-lo);border-color:var(--copper-lo)}
.ui-frame .mana-source{border-color:rgba(127,196,255,.55)}
.ui-frame .mana-branches::before,.ui-frame .mana-branches>section::before{background:rgba(127,196,255,.4)}

/* Checklists and cheat sheets: tick boxes become small iron slots */
.drill-checklist.ui-frame{column-rule:1px solid rgba(182,139,82,.18)}
.ui-frame.drill-checklist li::before{border:1.5px solid var(--copper);background:var(--slot-bg);box-shadow:inset 1px 1px 0 rgba(223,189,130,.3);border-radius:2px}
.ui-frame.drill-checklist li.group{font:600 12px/1.5 var(--display);letter-spacing:.09em;color:var(--copper-hi);padding-bottom:6px;border-bottom:1px solid rgba(182,139,82,.35);margin-bottom:4px}
.ui-frame.drill-checklist li.group:first-child{margin-top:0}

/* Field-note charts and tables: same frame, the chart colours inside are untouched */
.ui-frame .pn-matchups thead th{font-family:var(--display);font-weight:600;letter-spacing:.09em;color:var(--copper-hi);border-bottom:1px solid rgba(182,139,82,.35)}

/* ---------- Links inside iron figures ----------
   No underline at rest: copper ink and a heavier weight say "link" on the iron, and the weight
   also keeps inline links (Detail, caption links) distinct from the text around them. Hover and
   keyboard focus shift the copper lighter and draw the underline, and focus adds a ring.
   Status labels keep their own pill edge and lose only the underline. */
.reading-page .talent-prose :is(.talent-visual,.ui-frame) a:not(.button,.text-link,.channel-link){text-decoration:none}
.reading-page .talent-prose :is(.talent-visual,.ui-frame) a:not(.guide-status):not(.button,.text-link,.channel-link){border-bottom:0;color:var(--copper-hi);font-weight:600;transition:color .15s}
.reading-page .talent-prose :is(.talent-visual,.ui-frame) a:not(.guide-status):not(.button,.text-link,.channel-link):is(:focus-visible) {color:#f4e0b8;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:currentColor;text-underline-offset:4px}
@media (hover: hover) { .reading-page .talent-prose :is(.talent-visual,.ui-frame) a:not(.guide-status):not(.button,.text-link,.channel-link):is(:hover,:focus-visible) {color:#f4e0b8;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:currentColor;text-underline-offset:4px} }
.reading-page .talent-prose :is(.talent-visual,.ui-frame) a:focus-visible{outline:2px solid var(--glow);outline-offset:2px;border-radius:1px}
.reading-page .talent-prose .ui-frame .tier li a:not(.guide-status){font-weight:500}
@media(prefers-reduced-motion:reduce){.reading-page .talent-prose :is(.talent-visual,.ui-frame) a{transition:none}}

/* ---------- Iron and copper talent pane (build guide, Figure 01) ---------- */
.diagram-ui text{font-family:var(--body)}
.ui-panel{fill:var(--iron-1);stroke:var(--copper-lo);stroke-width:2}
.ui-pane.bal .ui-panel{fill:#1d1918}
.ui-pane.res .ui-panel{fill:#171a17}
.ui-bevel{display:none}
.ui-plate{fill:var(--iron-0);stroke:rgba(182,139,82,.45)}
.diagram .ui-title{font:600 15px var(--display);letter-spacing:.08em;fill:var(--copper-hi)}
.diagram .ui-count{font-size:12px;font-weight:600;fill:#e7eef8}
.ui-corner{color:var(--copper);--g-accent:var(--copper-hi)}
.ui-gatebg{color:var(--copper-lo)}
.diagram .ui-gate{font-size:11px;font-weight:700;fill:var(--copper-hi)}
.ui-cell.bal{color:var(--copper-hi)}
.ui-cell.res{color:#58b46a}
.ui-cell.max use{filter:drop-shadow(0 0 3px color-mix(in srgb,currentColor 55%,transparent))}
.diagram .ui-name{font-size:10.5px;fill:#e7eef8;text-anchor:middle}
.diagram .ui-cell.off .ui-name{fill:#a5afbe}
.ui-pip{fill:none;stroke:#4d433f;stroke-width:5;stroke-linecap:round;stroke-dasharray:0 7}
.ui-pip.on{stroke:currentColor}
.diagram .ui-rank{font-size:11px;font-weight:700;fill:#e7eef8;text-anchor:middle}
.diagram .ui-cell.off .ui-rank{fill:#a5afbe;font-weight:400}
.diagram .ui-feral{font:600 11.5px var(--display);letter-spacing:.06em;fill:var(--copper-hi)}

/* ---------- Figures on a plain .prose page (no .talent-prose), and the review loop ---------- */
.prose:not(.talent-prose) .article-visual{margin:34px 0 40px}
.prose:not(.talent-prose) .talent-visual-head h3{font:500 clamp(22px,2.8vw,30px)/1.26 var(--display);color:var(--silver);margin:0}
.review-steps{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ui-frame .review-steps>li{--slot:var(--copper);position:relative;margin:0;padding:14px 14px 15px;border-top:3px solid var(--slot)}
.ui-frame .review-steps>li.review-after{--slot:#9fb3c8}
.review-steps>li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-17px;width:12px;height:12px;border-top:2px solid var(--copper-hi);border-right:2px solid var(--copper-hi);transform:translateY(-50%) rotate(45deg)}
.review-when{display:block;font:600 10px/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--copper-hi);margin-bottom:8px}
.review-after .review-when{color:#c4d2e0}
.review-steps strong{display:block;font:600 16px/1.35 var(--display);color:var(--silver);margin-bottom:6px}
.review-steps p,.review-cue{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.ui-frame .review-cue{margin-top:20px;padding:12px 15px;background:linear-gradient(180deg,#1d1918,var(--iron-0));border:1px dashed var(--copper);border-radius:2px;color:var(--silver)}
.review-cue em{color:var(--copper-hi)}
@media(max-width:1080px){.review-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.review-steps>li:nth-child(2)::after{display:none}}
@media(max-width:520px){.review-steps{grid-template-columns:1fr;gap:20px}.review-steps>li:not(:last-child)::after{display:block;top:auto;bottom:-15px;right:50%;transform:translateX(50%) rotate(135deg)}}

/* ---------- Print ----------
   Maps keep their ink and lose the paper texture. Iron panels lose the iron. */
@media print{
  /* Sweep 4 Nov: a whole guide prints its figures as they look on screen, so light labels keep their dark ground. The white versions are for the printed checklists only. */
  .talent-visual{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:not(.print-checklist) .talent-visual{color:#bac4d2!important}
  body:not(.print-checklist) .talent-visual :is(h2,h3,h4):not(.pn-seg *){color:var(--silver)!important}
  body.print-checklist .diagram-map{background:#fff!important;box-shadow:none!important;border:1px solid #555}
  body.print-checklist .m-halo text{stroke:#fff}
  body.print-checklist :is(.m-cartouche,.m-num circle,circle.m-node){fill:#fff}
  body.print-checklist .ui-frame{background:#fff!important;box-shadow:none!important;border:1px solid #999!important}
  body.print-checklist .ui-frame :is(.tier,.decision-q,.decision-a,.tree-branch,.spec-cell),body.print-checklist .ui-frame>section,body.print-checklist .ui-frame .mana-branches>section,body.print-checklist .ui-frame .review-steps>li,body.print-checklist .ui-frame .review-cue{background:#fff!important;box-shadow:none!important}
  body.print-checklist .printable .ui-frame,body.print-checklist #visual-08 .ui-frame{border:0!important;padding:0!important;column-rule:none}
  body.print-checklist .ui-frame.drill-checklist li::before{border:1px solid #111!important;box-shadow:none!important;background:#fff!important}
  body.print-checklist .ui-frame.drill-checklist li.group{color:#111!important;border-bottom-color:#999}
  /* A whole guide printed: the short version sheet and the cheat sheets print ink on white, as they do on their own. */
  body:not(.print-checklist) :is(#short-version-sheet,.printable){background:#fff!important;box-shadow:none!important;border:1px solid #999!important;color:#111!important;print-color-adjust:economy;-webkit-print-color-adjust:economy}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) :is(*:not(svg *)){color:#111!important;background-color:transparent!important;box-shadow:none!important;text-shadow:none!important}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) .ui-frame{background:#fff!important;border:0!important;padding:0!important;column-rule:none}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) .ui-frame.drill-checklist li::before{border:1px solid #111!important;box-shadow:none!important;background:#fff!important}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) .ui-frame.drill-checklist li.group{border-bottom-color:#999}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) .guide-status{border-color:#555!important}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) .diagram-number{color:#555!important}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) figcaption{border-top-color:#999}
  body:not(.print-checklist) :is(#short-version-sheet,.printable) .diagram-map{background:#fff!important;box-shadow:none!important;border:1px solid #555}

}

/* ---------- Figure pairs: a wide SVG and a narrow one for phones (patch watch notes) ---------- */
.diagram-pair .diagram-phone{display:none}
@media(max-width:720px){
  .diagram-pair .diagram-wide{display:none}
  .diagram-scroll.diagram-pair .diagram.diagram-phone{display:block;min-width:0}
}
/* reading.css */
/* Reading layout and reading aids for every reading page (guides, field notes, About).
   This file owns every reading-layout and reading-aid rule: the text size, the full-bleed figure geometry, the
   two-column grid (the parchment page, then one sticky reading column on the right), the
   heading and change log link buttons, the toast, the return-visit notice, progress and time
   left, and the text size control. reading.js (loaded after site.js) builds the column around
   the contents aside, and the buttons and notices. Without it the page still reads well, with
   the contents above the text as on a phone.

   Tokens:
   --read-base   body size for the width band (15 / 17 / 18px)
   --read-scale  the reader's text size step (90, 100, 110 or 120%), set as html[data-read-size]
   --col-w, --col-gap   the reading column and the one gutter between it and the page, from 921px
   --panel-pad   the parchment page's inner padding (set in backgrounds.css)
   There's no measure: text runs the full width of the page, from its inner padding on the
   left to its inner padding on the right, at every width. */

:root { --read-scale: 1; --read-base: 15px; --col-w: 0px; --col-gap: 0px; --panel-pad: 0px; }
html[data-read-size="1"] { --read-scale: .9; }
html[data-read-size="3"] { --read-scale: 1.1; }
html[data-read-size="4"] { --read-scale: 1.2; }
@media (min-width: 721px) { :root { --read-base: 17px; } }
@media (min-width: 1081px) { :root { --read-base: 18px; } }

/* Body copy follows one size token. Captions, tables, labels, sources and the change log keep their own sizes. */
.talent-prose > p:not([class]),
.talent-prose > p.status-key-more,
.talent-prose > section:not(.talent-sources, .guide-changelog, .stream-invite) > p:not([class]),
.talent-prose > :is(ul, ol):not([class]) > li,
.talent-prose > section.skill > :is(ul, ol):not([class]) > li,
.talent-prose .decision-questions > li > p {
  font-size: calc(var(--read-base) * var(--read-scale));
  line-height: 1.75;
}
.talent-prose > p:not([class]):first-of-type { font-size: calc((var(--read-base) + 1px) * var(--read-scale)); }

/* Heading scale on the page. Section headings (H2) clearly outrank everything else on the page,
   figure titles included (druid-article.css caps those at 25px), and a subsection heading (H3, and
   a mechanics skill's heading) sits a clear step below. A heading is bound to the text it heads:
   more space above than below. Back matter (sources, change log) keeps its own smaller sizes.
   H2 25 / 28 / 32px, H3 19 / 21 / 23px, skill heads 20 to 26px, on phones / 721px / 1081px. */
.reading-page .talent-prose > h2,
.reading-page .talent-prose > section:not(.talent-sources, .guide-changelog, .stream-invite) > h2 { font-size: 25px; margin-bottom: 16px; }
.reading-page .talent-prose > h3,
.reading-page .talent-prose > section:not(.skill) > h3 { font-size: 19px; line-height: 1.3; margin-top: 34px; margin-bottom: 10px; }
.reading-page .talent-prose .skill > h3 { font-size: clamp(20px, 1.9vw, 26px); }
@media (min-width: 721px) {
  .reading-page .talent-prose > h2,
  .reading-page .talent-prose > section:not(.talent-sources, .guide-changelog, .stream-invite) > h2 { font-size: 28px; margin-bottom: 18px; }
  .reading-page .talent-prose > h3,
  .reading-page .talent-prose > section:not(.skill) > h3 { font-size: 21px; margin-top: 44px; margin-bottom: 12px; }
}
@media (min-width: 1081px) {
  .reading-page .talent-prose > h2,
  .reading-page .talent-prose > section:not(.talent-sources, .guide-changelog, .stream-invite) > h2 { font-size: 32px; }
  .reading-page .talent-prose > h3,
  .reading-page .talent-prose > section:not(.skill) > h3 { font-size: 23px; }
}
.talent-prose .skill-sheet > li { font-size: calc((var(--read-base) - 2px) * var(--read-scale)); }

/* Iron figures run to the parchment's edges. Every figure (the iron plates, the short version
   sheet, cheat sheets, map cards and the hero images) takes negative margins equal to the
   page's inner padding, so it crosses the page edge to edge as a band. An iron figure's own
   inner padding is the same token, so its heading and caption line up with the text above
   and below it. On phones the page already runs edge to edge, so the figures do too. The
   band's top and bottom edges are set in backgrounds.css. */
.reading-page .talent-prose > :is(figure, .article-visual),
.reading-page .talent-prose > section > :is(figure, .article-visual) { width: auto; max-width: none; margin-inline: calc(-1 * var(--panel-pad)); }
.reading-page .talent-prose > .talent-visual,
.reading-page .talent-prose > section > .talent-visual { padding-inline: var(--panel-pad); }
.reading-page .talent-prose > :is(.talent-hero, .guide-hero) > figcaption { padding-inline: var(--panel-pad); }
/* The masthead: compact, so the first lines of the text show in the first screen. Its back link,
   eyebrow, title, deck and byline start on the page's outer left edge (the line of the logo, the
   rule under the masthead and the parchment's edge), and the title and deck run the page's full
   width, stopping where the parchment does (the reading column's width is padded off from 921px). */
.reading-page .talent-masthead { padding-top: 26px; padding-bottom: 26px; }
.reading-page .talent-masthead .eyebrow { margin-top: 22px; }
.reading-page .talent-masthead h1 { max-width: none; margin-top: 10px; font-size: clamp(34px, calc(1.5vw + 20px), 44px); line-height: 1.12; text-wrap: pretty; }
.reading-page .talent-masthead .article-deck { max-width: none; margin-top: 12px; line-height: 1.65; }
.reading-page .talent-masthead .talent-byline { margin-top: 10px; }
.reading-page .talent-masthead .guide-meta { max-width: none; margin-top: 12px; padding: 8px 14px; gap: 0 16px; }
/* The status line follows the dates and the change log link follows the status, each on the same
   line where it fits. */
.reading-page .talent-masthead .guide-meta-status { flex-basis: auto; }
.reading-page .talent-layout.article-layout { padding-top: 26px; }
@media screen and (max-width: 720px) {
  .reading-page .talent-masthead { padding-top: 18px; padding-bottom: 20px; }
  .reading-page .talent-masthead .eyebrow { margin-top: 16px; }
  .reading-page .talent-masthead h1 { margin-top: 8px; font-size: clamp(26px, calc(5.2vw + 8px), 34px); line-height: 1.15; }
  .reading-page .talent-masthead .article-deck { margin-top: 10px; line-height: 1.6; }
  .reading-page .talent-masthead .guide-meta { margin-top: 10px; padding: 8px 12px; }
  .reading-page .talent-masthead .guide-jump { margin-top: 12px; }
  .reading-page .talent-layout.article-layout { padding-top: 20px; }
}

/* The reading grid from 921px: the parchment page on the left, filling the wrap from its left
   edge, then one gutter, then the reading column on the right. The column comes first in the
   DOM (so the tab order runs contents and tools, then the text) and grid places it.
   Inside the page the text fills the page between its inner padding, figures run edge to edge
   (above), and wide tables span the inner width. Tables still too wide scroll inside the page. */
@media screen and (min-width: 921px) {
  :root { --col-w: 188px; --col-gap: 24px; }
  .talent-layout.article-layout { grid-template-columns: minmax(0, 1fr) var(--col-w); column-gap: var(--col-gap); }
  .talent-layout .reading-column { grid-column: 2; grid-row: 1; }
  .talent-layout .talent-prose { grid-column: 1; grid-row: 1; max-width: none; }
  /* The masthead starts on the page's outer left edge and stops where the page does. */
  .reading-page .talent-masthead { padding-left: 0; padding-right: calc(var(--col-w) + var(--col-gap)); }
}
@media screen and (min-width: 1081px) { :root { --col-w: 216px; --col-gap: 32px; } }
@media screen and (min-width: 1280px) { :root { --col-w: 264px; --col-gap: 44px; } }
@media screen and (min-width: 1500px) { :root { --col-w: 280px; --col-gap: 48px; } }

/* The reading column: an iron panel, sticky under the compact header. When it's taller than the
   window the contents scroll inside their own box and the other blocks stay put. Below 921px it
   takes no box of its own (display: contents), so the contents aside lays out exactly as before. */
.reading-column .rail-now, .reading-column .reading-rail, .reading-column .rail-since { display: none; }
@media screen and (max-width: 920px) {
  .reading-column { display: contents; }
}
@media screen and (min-width: 921px) {
  .reading-column {
    position: sticky; top: 84px; align-self: start;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 100px);
    padding: 16px 18px 6px;
    border: 1px solid var(--line);
    border-top-color: var(--brass-dark);
    background: linear-gradient(180deg, #1a1617, #141112);
    box-shadow: inset 0 1px 0 rgba(223, 189, 130, .06), 0 10px 26px rgba(0, 0, 0, .35);
    font-size: 12px; line-height: 1.5; color: var(--muted);
  }
  .reading-column .rail-now, .reading-column .reading-rail, .reading-column .rail-since { display: block; flex: none; }
  .reading-column .rail-now { padding: 0 0 12px; }
  /* The contents: the only part that scrolls. Its left padding leaves room for the "you are here" bar. */
  .reading-column .article-aside {
    position: static; flex: 0 1 auto; min-height: 72px; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -18px; padding: 12px 18px 12px 30px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    scrollbar-width: thin; scrollbar-color: var(--brass-dark) transparent;
  }
  /* About has no This section block, so its contents start the panel. */
  .reading-column > .article-aside:first-child { border-top: 0; padding-top: 0; }
  .reading-column .article-aside > .eyebrow { margin: 0 0 4px -12px; }
  .reading-column .article-aside > p:not(.eyebrow) { margin: 0 0 6px -12px; }
  .reading-column .article-aside > a,
  .reading-column .article-aside .guide-toc-links > a { display: block; margin-top: 0; padding: 3px 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  @media (hover: hover) { .reading-column .article-aside > a:hover, .reading-column .article-aside .guide-toc-links > a:hover { color: var(--brass-light); } }
  .reading-column .article-aside .aside-tools { display: none; }
}
.rail-now .eyebrow { color: var(--brass); margin: 0 0 6px; }
.rail-block { padding: 12px 0; border-top: 1px solid var(--line); }
.reading-rail > .rail-block:first-child, .rail-now { border-top: 0; }
.rail-section { margin: 0; font: 500 16px/1.3 var(--display); color: var(--silver); }
@media (hover: hover) { .rail-section a:hover { color: var(--brass-light); } }
.read-bar { position: relative; height: 3px; margin: 9px 0 6px; overflow: hidden; background: #2c2726; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.read-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brass); }
.read-time { margin: 0; font-variant-numeric: tabular-nums; }
.rail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rail-button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px; border: 1px solid var(--brass-dark); background: transparent; color: var(--silver); font: 500 12px/1 var(--body); }
@media (hover: hover) { .rail-button:hover { border-color: var(--brass-light); color: var(--brass-light); } }
.rail-button .icon { width: 15px; height: 15px; }
.rail-intents { margin: 8px 0 0; line-height: 1.8; }
.rail-intents > span { white-space: nowrap; }
.rail-intents a { margin-left: 8px; color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 3px; }
@media (hover: hover) { .rail-intents a:hover { text-decoration-color: var(--brass-light); } }
.rail-size { padding: 8px 0 10px; }
@media (prefers-contrast: more) { .reading-column { background: #141112; box-shadow: none; } }

/* Text size: two "A" buttons, smaller and larger. */
.read-size { display: flex; align-items: center; gap: 6px; }
.read-size > span { margin-right: auto; }
.size-button { min-width: 36px; min-height: 36px; border: 1px solid var(--brass-dark); background: transparent; color: var(--silver); font: 600 13px/1 var(--body); }
@media (hover: hover) { .size-button:hover { border-color: var(--brass-light); } }
.size-button[aria-disabled="true"] { opacity: .4; cursor: default; }
.rail-size .size-button { min-width: 32px; min-height: 32px; }
.size-button .a-sm { font-size: 11px; }
.size-button .a-lg { font-size: 17px; }
.aside-tools { display: none; }
/* 920px and below: the text size row sits in the contents (the column's tools are hidden). */
@media (max-width: 920px) {
  .size-button { min-width: 44px; min-height: 44px; }
  .aside-tools { display: flex; padding: 10px 0 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); width: 100%; }
  .reading-norail .aside-tools { margin-top: 18px; padding-top: 14px; }
}

/* Link buttons on every H2 and every change log entry. On desktop they show on hover and focus,
   on touch screens and narrow windows they always show. */
.talent-prose h2 { position: relative; }
/* They sit on the parchment page, so they use its copper ink and rules (tokens from backgrounds.css). */
.h-link { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 8px; vertical-align: middle; border: 1px solid transparent; background: transparent; color: var(--p-copper, var(--brass)); opacity: 0; transition: opacity .15s; }
.h-link:focus-visible { opacity: 1; border-color: var(--p-edge, var(--brass-dark)); background: var(--p-tint, transparent); }
@media (hover: hover) { .talent-prose h2:hover .h-link, .h-link:hover { opacity: 1; border-color: var(--p-edge, var(--brass-dark)); background: var(--p-tint, transparent); } }
.h-link .icon { width: 16px; height: 16px; }
@media (hover: none), (max-width: 920px) { .h-link { opacity: 1; border-color: var(--p-rule, rgba(182, 139, 82, .35)); } }
.prose .changelog-entry { grid-template-columns: 92px 104px minmax(0, 1fr) 30px; }
.changelog-entry .h-link { width: 30px; height: 30px; margin: 0; align-self: start; opacity: 1; }
.changelog-entry .h-link .icon { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .prose .changelog-entry { grid-template-columns: auto minmax(0, 1fr) 30px; }
  .prose .changelog-entry .h-link { grid-column: 3; grid-row: 1; }
  .prose .changelog-entry p { grid-column: 1 / -1; }
}

/* Toast for "Link copied" and the text size. */
/* An iron chip, so it reads the same over the parchment page and the stone. */
.read-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px); padding: 11px 16px; transform: translateX(-50%); background: linear-gradient(180deg, #24201f, #171415); border: 1px solid var(--brass-dark); color: var(--silver); font: 500 13px/1.4 var(--body); box-shadow: 0 0 0 1px #0a0909, 0 8px 22px rgba(0, 0, 0, .5); }
.read-toast:empty { display: none; }
@media (max-width: 950px) { .read-toast { bottom: 74px; } }

/* One notice under the dateline: pick up where you left off, and what changed since the last visit.
   It sits in the masthead on the stone, so it's a solid iron plate like the dateline. */
.read-notice { position: relative; max-width: 720px; margin: 14px 0 0; padding: 4px 16px; border: 1px solid var(--line); border-left: 2px solid var(--brass); background: linear-gradient(rgba(182, 139, 82, .07), rgba(182, 139, 82, .07)), #171415; color: var(--silver); font-size: 14px; line-height: 1.55; }
.notice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0; }
/* Dismiss sits beside Go there in the pick-up row, the pair sharing one 44px height and one centre. With only
   the list of changes, it sits in the notice's top right corner level with the summary line, which alone makes
   room for it, so the list runs the notice's full width (visual pass, 8 Nov). */
.notice-changes.notice-row:first-child > summary { margin-right: 84px; }
.notice-row + .notice-row { border-top: 1px solid var(--line); }
.notice-row p { flex: 1 1 260px; margin: 0; }
.notice-actions { display: inline-flex; align-items: stretch; gap: 10px; }
.notice-go, .notice-dismiss { display: inline-flex; align-items: center; justify-content: center; height: 44px; }
.notice-go { padding: 0 14px; background: var(--horde); color: #fff; font: 600 13px/1 var(--body); }
@media (hover: hover) { .notice-go:hover { background: #b8433b; } }
.notice-changes { display: block; }
.notice-changes > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 3px; }
.notice-changes > summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.notice-changes ul { margin: 6px 0 4px; padding-left: 18px; font-size: 13px; color: var(--read-text, #c9d0db); }
.notice-changes li { margin: 4px 0; }
.notice-changes a { color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 3px; }
.read-notice > .notice-dismiss { position: absolute; top: 14px; right: 16px; }
.notice-dismiss { padding: 0 12px; border: 1px solid rgba(231, 238, 248, .2); background: transparent; color: var(--muted); font: 500 12px/1 var(--body); }
@media (hover: hover) { .notice-dismiss:hover { color: var(--silver); border-color: var(--brass-light); } }

/* Changed since your last visit (reading.js, rules in site.js). A "Changed" marker on each touched
   section's heading and on its contents link, real text in a ruled box so it never rests on colour alone:
   the parchment's accent ink in the text, brass on the iron of the contents. The badge and Next change
   sit in the reading column from 921px, and Next change sits beside the Contents pill below that. The
   markers fade in once, stay still under reduced motion, and print as ink. The controls don't print. */
.since-mark { display: inline-block; margin-left: 10px; padding: 0 6px; border: 1px solid currentColor; color: var(--p-accent, var(--brass-light)); font: 600 11px/1.7 var(--body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; vertical-align: .3em; animation: since-in .6s ease-out both; }
.talent-prose h3 .since-mark { vertical-align: .15em; }
.article-aside .since-mark { margin-left: 8px; padding: 0 5px; color: var(--brass-light); font-size: 9.5px; line-height: 1.6; vertical-align: 1px; }
.article-aside a:has(.since-mark) { color: var(--silver); }
.since-target { scroll-margin-top: 100px; }
.talent-prose :is(h2, h3)[tabindex="-1"]:focus { outline: none; }
.talent-prose :is(h2, h3)[tabindex="-1"]:focus-visible { outline: 2px solid var(--p-link, var(--glow)); outline-offset: 4px; }
@keyframes since-in { from { opacity: 0; } to { opacity: 1; } }

.rail-since { padding: 10px 0 12px; border-top: 1px solid var(--line); }
.since-badge-link { display: block; padding-left: 9px; border-left: 2px solid var(--brass); color: var(--brass-light); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 3px; }
.since-badge-link:not([href]) { text-decoration: none; }
.since-next { display: inline-flex; align-items: center; gap: 8px; }
.rail-since .since-next { margin-top: 10px; }
.since-next-count { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.pill-dock { display: none; }
.since-next-pill { display: none; }
@media (max-width: 950px) {
  .pill-dock { display: flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 16px; z-index: 30; }
  .pill-dock .contents-pill { position: relative; right: auto; bottom: auto; }
}
@media (max-width: 920px) {
  .since-next-pill { display: inline-flex; min-height: 44px; padding: 0 14px; background: rgba(16, 14, 16, .92); border: 1px solid var(--brass-dark); color: var(--brass-light); font: 600 12px/1 var(--body); letter-spacing: .04em; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
}
@media (max-width: 720px) { .pill-dock { right: 22px; bottom: 14px; } }
@media (max-width: 400px) { .since-next-pill .since-next-count { display: none; } }

/* The notice's list of changes: date and kind, the entry's words, and where to go. */
.notice-changes .since-list { margin: 4px 0 6px; padding: 0; list-style: none; }
.since-item { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.since-item:first-child { border-top: 0; }
.since-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 12px; color: var(--read-lead, var(--silver)); }
.since-kind { padding: 0 6px; border: 1px solid rgba(223, 189, 130, .55); color: var(--brass-light); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7; }
.since-kind-correction { border-color: rgba(218, 112, 96, .6); color: var(--horde-light); }
.since-item-text { margin: 4px 0 0; font-size: 13.5px; color: var(--read-text, #c9d0db); }
.since-item-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.since-item-links a, .since-more > summary { color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 3px; }
.since-item-links a { display: inline-flex; align-items: center; min-height: 28px; }
.since-more > summary { display: flex; align-items: center; min-height: 44px; margin-block: -4px; cursor: pointer; font-size: 13px; }
.since-more > summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { .since-mark { animation: none; } }
@media (prefers-contrast: more) {
  .since-mark { border-width: 2px; color: var(--p-ink-strong, var(--silver)); }
  .article-aside .since-mark { color: var(--silver); }
}

/* A first visit: one quiet line in the reading column, "Updated <date>, N changes", linking to the change log. */
.since-quiet { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .35); text-underline-offset: 3px; }
@media (hover: hover) { .since-quiet:hover { color: var(--brass-light); } }

/* Skip to the text: the article takes focus without a ring round the whole page. */
.talent-prose[tabindex="-1"]:focus { outline: none; }

/* Tickable checklists (reading.js). Each line is a two-column grid: the checkbox itself, drawn as an 18px box
   (appearance: none, so it renders the same in every engine, iOS Safari included), then one 12px gap, then the
   text, its label, with the meta row (who and Detail) under the text on the same edge. The box is centred on
   the text's first line. The li::before box in pvp-mechanics.css and figures.css is the no-script fallback only.
   A tick is the box's own background when checked, and keyboard focus rings the box. On paper the boxes print
   empty and the reset buttons don't print. */
.drill-checklist li.is-checkable { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; padding-left: 0; cursor: pointer; }
.drill-checklist li.is-checkable::before { display: none; }
.drill-checklist li.is-checkable > :not(.check-input) { grid-column: 2; }
.drill-checklist .check-input { -webkit-appearance: none; appearance: none; grid-column: 1; grid-row: 1; box-sizing: border-box; width: 18px; height: 18px; margin: 2px 0 0; font: inherit; margin-top: calc((1lh - 18px) / 2); border: 1.5px solid var(--copper, var(--brass-light)); border-radius: 2px; background: var(--slot-bg, rgba(7, 11, 20, .5)) no-repeat center / 14px 14px; cursor: pointer; }
.drill-checklist .check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23dfbd82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.drill-checklist .check-input:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.drill-checklist .check-label { display: block; grid-row: 1; cursor: pointer; }
.reading-page .talent-prose .drill-checklist:not(.ui-frame) .check-input { border-color: #7a4f1c; background-color: rgba(255, 252, 240, .55); }
.reading-page .talent-prose .drill-checklist:not(.ui-frame) .check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231F160F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.reading-page .talent-prose .drill-checklist:not(.ui-frame) .check-input:focus-visible { outline-color: var(--p-link, var(--glow)); }
@media (prefers-contrast: more) {
  .drill-checklist .check-input { border-width: 2px; }
  .drill-checklist .check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23dfbd82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .reading-page .talent-prose .drill-checklist:not(.ui-frame) .check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231F160F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
@media (forced-colors: active) { .drill-checklist .check-input { -webkit-appearance: auto; appearance: auto; border: 0; } }

/* The phone Contents jump (site.js): the contents land clear of the header, with a way back. */
@media (max-width: 920px) { .article-aside { scroll-margin-top: 76px; } }
@media (max-width: 720px) { .article-aside { scroll-margin-top: 8px; } } /* html already pads 70px for the header here */
.contents-back { display: none; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 10px; padding: 0 14px; border: 1px solid var(--brass-dark); background: transparent; color: var(--brass-light); font: 600 13px/1 var(--body); }
@media (hover: hover) { .contents-back:hover { border-color: var(--brass-light); } }
.contents-back .icon { width: 15px; height: 15px; transform: rotate(180deg); }
@media (max-width: 920px) { .contents-back:not([hidden]) { display: inline-flex; } }

/* Phones and tablets: the floating Contents pill carries time left and a progress line. */
.contents-pill .pill-time { margin-left: 8px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.contents-pill .pill-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2c2726; }
.contents-pill .pill-bar > span { display: block; width: 0; height: 100%; background: var(--brass); }

@media (prefers-reduced-motion: reduce) { .h-link { transition: none; } }
@media print {
  :root { --read-base: 15px; --read-scale: 1; }
  .reading-column > :not(.article-aside), .h-link, .read-notice, .read-toast, .aside-tools, .pill-time, .pill-bar, .pill-dock, .since-next, .check-reset, .contents-back { display: none !important; }
  .drill-checklist .check-input { border: 1px solid #111 !important; background: #fff !important; outline: none !important; }
  .since-mark { animation: none; color: #000 !important; border-color: #000 !important; }
  .reading-page .talent-masthead { padding-inline: 0; }
  /* The page has no padding on paper, so figures sit in the text width and keep a small inset. */
  .reading-page .talent-prose > :is(figure, .article-visual),
  .reading-page .talent-prose > section > :is(figure, .article-visual) { margin-inline: 0; }
  .reading-page .talent-prose > .talent-visual,
  .reading-page .talent-prose > section > .talent-visual { padding-inline: 18px; }
  .reading-page .talent-prose > :is(.talent-hero, .guide-hero) > figcaption { padding-inline: 0; }
  .prose .changelog-entry { grid-template-columns: 92px 104px minmax(0, 1fr); }
}

/* Earlier and Later in a field note series (build-guides.py writes nav.note-series before the end block). */
.note-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 36px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.note-series-label { grid-column: 1 / -1; font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); }
.note-series-link { display: flex; flex-direction: column; gap: 4px; min-height: 44px; font-size: 14px; line-height: 1.5; color: var(--brass-light); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.note-series-link > span { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.note-series-later { grid-column: 2; text-align: right; align-items: flex-end; }
@media (max-width: 720px) { .note-series { grid-template-columns: minmax(0, 1fr); } .note-series-later { grid-column: 1; text-align: left; align-items: flex-start; } }
@media print { .note-series { display: none; } }

/* The reading column's link to every printable sheet, on a guide that has one. */
.rail-sheets a { color: var(--brass-light); font-size: 13px; text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 3px; }

/* Contents tap targets. About's contents links are 44px tall in both layouts. A field note's contents,
   wrapped in rows on phones, get the same 44px to tap with no change to the layout, from a hit area
   10px above and below each link (rows sit 42px apart, so neighbouring targets meet). */
.reading-norail .article-layout .article-aside > a { display: flex; align-items: center; min-height: 44px; }
@media (min-width: 921px) { .reading-norail .reading-column .article-aside > a { padding: 0; min-height: 44px; } }
@media (max-width: 920px) { .reading-norail .article-layout .article-aside { row-gap: 2px; } }
@media (max-width: 920px) {
  body:not(.reading-norail) .article-layout .article-aside > a { position: relative; }
  body:not(.reading-norail) .article-layout .article-aside > a::after { content: ""; position: absolute; inset: -10px 0; }
}
/* backgrounds.css */
/* Surfaces. This file owns every page surface and every parchment component.
   Three materials, as in the game's own windows:
   - Stone: the mottled dark surround behind every page, with faint firelight and a vignette.
   - Parchment: the page the prose sits on, on every reading page (guides, field notes, About).
   - Iron: the header, footer, the reading column and every figure. Iron is unchanged
     here; inside the parchment page this file only restores the dark tokens for figures.
   The hero art is never touched. Textures are SVG data URIs (pre-rendered as tiles by the
   browser) and gradients only. No image files, no filter on a scrolling element.

   Ink on parchment (#e6d8bb), all at least 4.5:1, also at the darkened edge:
   --p-ink body #2b2016, --p-ink-strong headings #1f160f, --p-soft small text #5b4a3a,
   --p-link links #7c2a22, --p-accent skill tags #8a2c24, --p-copper accents #6a4612.
   Status inks: confirmed #1f5a33, probable #6a4612, unverified #4a36a0, obsolete #852821.
   Text on dark: --read-text #cdc7bf, --read-lead #ddd7cf, and --silver (cool white) for headings only. */

:root {
  --stone: #0f0d0e;
  --read-text: #cdc7bf;
  --read-lead: #ddd7cf;
  --parch: #e6d8bb;
  --parch-flat: #efe6d1;
  --p-ink: #2b2016;
  --p-ink-strong: #1f160f;
  --p-soft: #5b4a3a;
  --p-link: #7c2a22;
  --p-accent: #8a2c24;
  --p-copper: #6a4612;
  --p-ok: #1f5a33;
  --p-probable: #6a4612;
  --p-unverified: #4a36a0;
  --p-obsolete: #852821;
  --p-line: rgba(92, 64, 36, .24);
  --p-rule: rgba(92, 64, 36, .42);
  --p-edge: #86663f;
  --p-tint: rgba(92, 64, 36, .07);
  --p-burn: rgba(110, 72, 34, .085);
  --noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .66 0 0 0 0 .52 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --noise-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .0075' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .40 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29'/%3E%3C/svg%3E");
  --noise-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .31 0 0 0 0 .16 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23p%29'/%3E%3C/svg%3E");
  --stud: radial-gradient(circle, #b68b52 0 2px, #765338 2.5px 3.2px, transparent 3.6px);
}

/* ---------- Stone surround, every page ---------- */
body {
  background-color: var(--stone);
  background-image: var(--noise-fine);
}
/* The stone's fog: two untiled layers drifting in opposite directions, so they roll through each other.
   Light wisps (body::before) slide 1,600px left over 15 seconds and back, and dark smoke (html::before)
   slides 1,200px right over 20 seconds and back, both as transforms, so nothing repaints. Never tile
   either (a repeated tile shows a hard seam). The light layer's opacity is the contrast budget: at .09
   the lightest stone pixel measured on 5 November 2026 keeps --horde-light text at 4.6:1, so don't raise
   it without remeasuring. The firelight and vignette sit still above both on body::after. */
:root {
  --fog-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0036 .006' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .66 0 0 0 0 .58 0 0 0 0 .50 3.2 0 0 0 -1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E");
  --fog-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .007' numOctaves='3' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E");
}
body::before,
html::before {
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
body::before {
  left: 0;
  width: calc(100vw + 1600px);
  background: var(--fog-light) center / cover no-repeat;
  opacity: .09;
  animation: fog-light 15s ease-in-out infinite alternate;
}
html::before {
  left: -1200px;
  width: calc(100vw + 1200px);
  background: var(--fog-dark) center / cover no-repeat;
  opacity: .8;
  animation: fog-dark 20s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0, rgba(182, 139, 82, .045), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .55));
}
@keyframes fog-light { to { transform: translate3d(-1600px, 0, 0); } }
@keyframes fog-dark { to { transform: translate3d(1200px, 0, 0); } }
/* Fog pause (site.js): html.fog-still holds both layers, and the smoke on iron below, where they are whilst
   the page scrolls, whilst the tab is hidden, and for good after 60 seconds on a page. The look on
   arrival doesn't change, and reduced motion and more contrast still win. */
html.fog-still::before,
html.fog-still body::before,
html.fog-still .reading-page .talent-prose .talent-visual::before,
html.fog-still .reading-page .reading-column::before { animation-play-state: paused; }
.site-header { background-color: rgba(15, 13, 14, .86); }
.article-page .site-header { background: var(--stone); }

/* Text on dark surfaces: warm body and lead, cool white for headings only. */
.prose { color: var(--read-text); }
.article-masthead .article-deck, .talent-masthead .article-deck { color: var(--read-lead); }

/* Cards and panels sit on the stone as objects: a solid iron fill, a lifted edge and a soft shadow. */
:is(.guide-card, .about-card, .note-card, .schedule-panel) {
  background-color: #171415;
  box-shadow: inset 0 1px 0 rgba(223, 189, 130, .06), 0 10px 26px rgba(0, 0, 0, .35);
}
.guide-card:focus-visible { background-color: #1c1817; }
@media (hover: hover) { .guide-card:hover { background-color: #1c1817; } }
.start-path { background: #151213; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.start-path a:focus-visible { background: rgba(182, 139, 82, .07); }
@media (hover: hover) { .start-path a:hover { background: rgba(182, 139, 82, .07); } }
.addons-section { background: rgba(10, 9, 9, .55); }
.blog-search { background: #151213; }
/* The masthead's dateline and notice are iron plates on the stone. */
.guide-meta { background: linear-gradient(rgba(88, 180, 106, .05), rgba(88, 180, 106, .05)), #151213; }
.prelaunch-note { background: linear-gradient(rgba(182, 139, 82, .05), rgba(182, 139, 82, .05)), #151213; }
.article-aside .guide-toc { background: transparent; }

/* ---------- Parchment page, every reading page ---------- */
.reading-page { --panel-pad: 44px; }
@media (max-width: 1279px) { .reading-page { --panel-pad: 36px; } }
@media (max-width: 1080px) { .reading-page { --panel-pad: 30px; } }
@media (max-width: 920px) { .reading-page { --panel-pad: 24px; } }
@media (max-width: 720px) { .reading-page { --panel-pad: 22px; } }

.reading-page .talent-prose {
  /* Inside the page the shared tokens become inks, so every component that uses them reads on parchment. */
  --silver: var(--p-ink-strong);
  --muted: var(--p-soft);
  --brass: #7a4f1c;
  --brass-light: var(--p-copper);
  --brass-dark: var(--p-edge);
  --line: var(--p-line);
  --horde-light: var(--p-obsolete);
  --green: var(--p-ok);
  --ink: var(--parch);
  --steel: #ddceb0;
  --glow: #1d4f91;
  position: relative;
  padding: 40px var(--panel-pad) 48px;
  color: var(--p-ink);
  background-color: var(--parch);
  background-image:
    var(--stud), var(--stud), var(--stud), var(--stud),
    linear-gradient(90deg, var(--p-burn), transparent),
    linear-gradient(270deg, var(--p-burn), transparent),
    linear-gradient(180deg, var(--p-burn), transparent),
    linear-gradient(0deg, var(--p-burn), transparent),
    radial-gradient(ellipse 70% 100% at 50% 0, rgba(255, 248, 230, .35), transparent 70%),
    var(--noise-paper);
  background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 36px 100%, 36px 100%, 100% 44px, 100% 44px, 100% 900px, 320px 320px;
  background-position: left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px, left top, right top, left top, left bottom, center top, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  border: 1px solid #765338;
  box-shadow: 0 0 0 1px #0a0909, 0 14px 34px rgba(0, 0, 0, .5);
}
@media (max-width: 720px) {
  /* Phones: the page runs edge to edge. */
  .reading-page .talent-layout .talent-prose { margin-inline: -22px; width: calc(100% + 44px); max-width: none; padding: 28px var(--panel-pad) 34px; border-inline: 0; box-shadow: 0 0 0 1px #0a0909; }
}
.reading-page .talent-prose ::selection { background: rgba(124, 42, 34, .25); color: var(--p-ink-strong); }

/* Figures, the short version sheet, cheat sheets and maps are dark iron bands across the page.
   reading.css runs them to the page's edges. Here their left and right edges go (no border, square
   corners), so a band meets the page edge cleanly, and their top and bottom keep a copper hairline,
   a dark line outside it and a short shadow down onto the parchment that never reaches the sides.
   The corner studs sit inside the page's top and bottom padding, which no figure covers. */
.reading-page .talent-prose :is(.talent-visual, .ui-frame, .talent-hero, .guide-hero) {
  --ink: #100e10; --steel: #211e1e; --silver: #e7eef8; --muted: #a5afbe;
  --brass: #b68b52; --brass-light: #dfbd82; --brass-dark: #765338; --line: rgba(182, 139, 82, .25);
  --horde-light: #da7060; --green: #58b46a; --glow: #7fc4ff;
  color: var(--read-text);
}
.reading-page .talent-prose .talent-visual { border-inline: 0; border-radius: 0; box-shadow: 0 -1px 0 #0a0909, 0 1px 0 #0a0909, 0 12px 12px -12px rgba(60, 35, 15, .55); }
.reading-page .talent-prose :is(.talent-hero, .guide-hero) img { border-inline: 0; }
.reading-page .talent-prose .talent-visual ::selection { background: var(--brass-dark); color: var(--silver); }
/* Hero images are dark, but their captions sit below them on the parchment, so they take its small-text ink. */
.reading-page .talent-prose :is(.talent-hero, .guide-hero) > figcaption { color: var(--p-soft); }

/* Prose type */
.reading-page .talent-prose > p:not([class]):first-of-type { color: var(--p-ink-strong); }
.reading-page .talent-prose :is(h2, h3, h4, strong):not(:is(.talent-visual, .ui-frame) *) { color: var(--p-ink-strong); }
.reading-page .talent-prose a:not(.guide-status, .button, .text-link, .channel-link, .h-link):not(:is(.talent-visual, .ui-frame) *) {
  color: var(--p-link);
  border-bottom-color: transparent;
  text-decoration-color: rgba(124, 42, 34, .45);
}
@media (hover: hover) { .reading-page .talent-prose a:not(.guide-status, .button, .text-link, .channel-link, .h-link):not(:is(.talent-visual, .ui-frame) *):hover { text-decoration-color: var(--p-link); } }
.reading-page .talent-prose .text-link:not(:is(.talent-visual, .ui-frame) *) { color: var(--p-link); }
.reading-page .talent-prose hr { border: 0; border-top: 1px solid var(--p-rule); }
.reading-page .talent-prose blockquote:not(:is(.talent-visual, .ui-frame) *) { color: var(--p-ink-strong); border-left-color: #7a4f1c; }
.reading-page .talent-prose .to-contents { color: var(--p-soft); }
@media (hover: hover) { .reading-page .talent-prose .to-contents:hover { color: var(--p-link); } }

/* Inline code, pre and the copy buttons */
.reading-page .talent-prose code:not(:is(.talent-visual, .ui-frame, pre) *) { padding: .05em .3em; border-radius: 2px; background: rgba(92, 64, 36, .1); color: #3a2a1c; }
.reading-page .talent-prose pre:not(.scenario-meta):not(:is(.talent-visual, .ui-frame, .review-template) *) { padding: 12px 14px; border: 1px solid var(--p-line); border-left: 2px solid #7a4f1c; background: var(--p-tint); color: #3a2a1c; }
.reading-page .talent-prose .copy-command:not(:is(.talent-visual, .ui-frame) *) { color: var(--p-copper); border-color: var(--p-edge); background: rgba(255, 252, 240, .4); }
.reading-page .talent-prose .copy-command:not(:is(.talent-visual, .ui-frame) *):is(:focus-visible) { color: var(--p-ink-strong); border-color: var(--p-ink); }
@media (hover: hover) { .reading-page .talent-prose .copy-command:not(:is(.talent-visual, .ui-frame) *):is(:hover, :focus-visible) { color: var(--p-ink-strong); border-color: var(--p-ink); } }

/* Status labels and the key */
.reading-page .talent-prose .guide-status:not(:is(.talent-visual, .ui-frame) *) { background: rgba(255, 252, 240, .45); }
.reading-page .talent-prose .guide-status.confirmed:not(:is(.talent-visual, .ui-frame) *) { color: var(--p-ok); border-color: rgba(31, 90, 51, .6); }
.reading-page .talent-prose .guide-status.probable:not(:is(.talent-visual, .ui-frame) *) { color: var(--p-probable); border-color: rgba(106, 70, 18, .6); }
.reading-page .talent-prose .guide-status:is(.unverified, .untested):not(:is(.talent-visual, .ui-frame) *) { color: var(--p-unverified); border-color: rgba(74, 54, 160, .6); }
.reading-page .talent-prose .guide-status.obsolete:not(:is(.talent-visual, .ui-frame) *) { color: var(--p-obsolete); border-color: rgba(133, 40, 33, .6); }
@media (hover: hover) { .reading-page .talent-prose a.guide-status:not(:is(.talent-visual, .ui-frame) *):hover { background: rgba(255, 252, 240, .8); } }
.reading-page .talent-prose .status-key li { color: var(--p-ink); }

/* Skill sheets */
.reading-page .talent-prose .skill-tag { color: var(--p-accent); }
.reading-page .talent-prose .skill-sheet { background: rgba(92, 64, 36, .05); border-color: rgba(92, 64, 36, .32); }
.reading-page .talent-prose .skill-sheet li { color: var(--p-ink); border-bottom-color: rgba(92, 64, 36, .18); }
.reading-page .talent-prose .skill-sheet li.drill { background: rgba(92, 64, 36, .09); }
.reading-page .talent-prose .skill-sheet li.mastery { background: rgba(31, 90, 51, .07); }

/* Change log and sources */
.reading-page .talent-prose .changelog-entry { border-bottom-color: var(--p-line); }
.reading-page .talent-prose .changelog-entry:target { background: rgba(31, 90, 51, .08); }
.reading-page .talent-prose .changelog-entry time { color: var(--p-soft); }
.reading-page .talent-prose .changelog-major { border-color: rgba(106, 70, 18, .55); }
.reading-page .talent-prose .changelog-correction { border-color: rgba(133, 40, 33, .55); }
.reading-page .talent-prose :is(.guide-changelog, .talent-sources, .stream-invite, .article-end) { border-top-color: var(--p-rule); }

/* Reference tables */
.reading-page .talent-prose :is(.settings-table, .verify-table):not(:is(.talent-visual, .ui-frame) *) { color: var(--p-ink); }
.reading-page .talent-prose :is(.settings-table, .verify-table):not(:is(.talent-visual, .ui-frame) *) th { color: var(--p-copper); border-bottom-color: var(--p-rule); }
.reading-page .talent-prose :is(.settings-table, .verify-table):not(:is(.talent-visual, .ui-frame) *) td { border-bottom-color: var(--p-line); }
.reading-page .talent-prose .settings-table:not(:is(.talent-visual, .ui-frame) *) td:nth-child(2) { color: var(--p-ink-strong); }
@media (max-width: 720px) {
  .reading-page .talent-prose .settings-table :is(th, td):first-child { background: var(--parch); box-shadow: inset -1px 0 0 var(--p-rule); }
  .reading-page .talent-prose .table-scroll {
    background:
      linear-gradient(90deg, var(--parch) 35%, rgba(230, 216, 187, 0)) left / 36px 100% no-repeat local,
      linear-gradient(270deg, var(--parch) 35%, rgba(230, 216, 187, 0)) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(92, 64, 36, .3), rgba(92, 64, 36, 0)) left / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(92, 64, 36, .3), rgba(92, 64, 36, 0)) right / 16px 100% no-repeat scroll;
  }
}
@media (max-width: 950px) { .reading-page .talent-prose .table-scroll { background-color: var(--parch); } }

/* Checklists outside figures, the checklist and filter buttons */
.reading-page .talent-prose .drill-checklist:not(.ui-frame) li { color: var(--p-ink); }
.reading-page .talent-prose .drill-checklist:not(.ui-frame) li::before { border-color: #7a4f1c; background: rgba(255, 252, 240, .55); }
.reading-page .talent-prose .guide-spec-filter button[aria-pressed="true"] { background: rgba(92, 64, 36, .1); }
@media (hover: hover) { .reading-page .talent-prose .checklist-actions button:hover { background: rgba(92, 64, 36, .1); } }
.reading-page .talent-prose .guide-spec-filter button { border-color: var(--p-rule); }

/* Fight scenarios: the opponent block and the cast flow */
.reading-page .talent-prose .scenario-meta { background: var(--p-tint); border-color: var(--p-line); border-left-color: #7a4f1c; color: var(--p-ink); }
.reading-page .talent-prose .scenario-meta b { color: var(--p-copper); }
.reading-page .talent-prose .cast-flow:not(:is(.talent-visual, .ui-frame) *) li { background: rgba(255, 252, 240, .4); border-color: rgba(92, 64, 36, .35); color: var(--p-ink-strong); }
.reading-page .talent-prose .cast-flow:not(:is(.talent-visual, .ui-frame) *) li.highlight { background: rgba(74, 54, 160, .08); border-color: rgba(74, 54, 160, .55); }
.reading-page .talent-prose .cast-flow:not(:is(.talent-visual, .ui-frame) *) li.break { background: rgba(106, 70, 18, .1); border-color: rgba(106, 70, 18, .6); }

/* Callouts, revision banners, decision questions and the review template */
/* A field note's dated update banner sits inside the page, so it's a parchment plate, not the masthead's
   iron one: the parchment tint, ink text and copper label (the iron fill left parchment ink at about 2.2:1). */
.reading-page .talent-prose .prelaunch-note { background: var(--p-tint); border-color: var(--p-rule); color: var(--p-ink); }
.reading-page .talent-prose .prelaunch-note .prelaunch-label { color: var(--p-copper); }
.reading-page .talent-prose .prelaunch-note.live-update { border-left-color: var(--p-ok); }
.reading-page .talent-prose .prelaunch-note a { color: var(--p-link); }
.reading-page .talent-prose :is(.development-callout, .revision-note) { background: rgba(92, 64, 36, .07); }
.reading-page .talent-prose .revision-note { border-color: var(--p-rule); border-left-color: #7a4f1c; }
.reading-page .talent-prose .revision-note p { color: var(--p-ink); }
.reading-page .talent-prose .review-template { background: rgba(92, 64, 36, .06); border-color: var(--p-rule); }
.reading-page .talent-prose .template-toolbar { border-bottom-color: var(--p-rule); }
.reading-page .talent-prose .copy-template { border-color: var(--p-edge); }
@media (hover: hover) { .reading-page .talent-prose .copy-template:hover { border-color: var(--p-ink); } }

/* The about block and the article-end links */
.reading-page .talent-prose .stream-invite-copy > p:last-child { color: var(--p-soft); }
.reading-page .talent-prose .stream-invite-copy a { color: var(--p-link); text-decoration-color: rgba(124, 42, 34, .45); }
.reading-page .talent-prose .channel-links .channel-link { color: var(--p-ink-strong); }
.reading-page .talent-prose .channel-links .channel-link-twitch { background: rgba(145, 70, 255, .1); border-color: rgba(98, 40, 190, .6); }
.reading-page .talent-prose .channel-links .channel-link-twitch > .icon { color: #6b2fd0; }
.reading-page .talent-prose .channel-links .channel-link-youtube { background: rgba(224, 0, 0, .07); border-color: rgba(180, 0, 0, .55); }
.reading-page .talent-prose .channel-links .channel-link-youtube > .icon { color: #c40000; }
.reading-page .talent-prose .channel-links .channel-link:is(:focus-visible) { color: #fff; }
@media (hover: hover) { .reading-page .talent-prose .channel-links .channel-link:is(:hover, :focus-visible) { color: #fff; } }
/* Hover and focus on parchment: the full brand fill behind the white label, as on dark surfaces (white on #9146FF is 4.64:1, on #E00000 5.04:1). */
.reading-page .talent-prose .channel-links .channel-link-twitch:is(:focus-visible) { background: var(--twitch-fill); border-color: var(--twitch-fill); }
@media (hover: hover) { .reading-page .talent-prose .channel-links .channel-link-twitch:is(:hover, :focus-visible) { background: var(--twitch-fill); border-color: var(--twitch-fill); } }
.reading-page .talent-prose .channel-links .channel-link-youtube:is(:focus-visible) { background: var(--youtube-fill); border-color: var(--youtube-fill); }
@media (hover: hover) { .reading-page .talent-prose .channel-links .channel-link-youtube:is(:hover, :focus-visible) { background: var(--youtube-fill); border-color: var(--youtube-fill); } }
.reading-page .talent-prose .channel-links .channel-link:is(:focus-visible) > .icon { color: #fff; }
@media (hover: hover) { .reading-page .talent-prose .channel-links .channel-link:is(:hover, :focus-visible) > .icon { color: #fff; } }

/* ---------- More contrast: flat surfaces, no textures ---------- */
@media (prefers-contrast: more) {
  body { background-image: none; }
  html::before, body::before, body::after { display: none; }
  .reading-page .talent-prose { background: var(--parch-flat); box-shadow: none; border-color: #3a2a1c; --p-ink: #17110c; --p-soft: #3a2d22; }
  .prose { color: #ebe6df; }
  .reading-page .talent-prose .guide-status:not(:is(.talent-visual, .ui-frame) *) { background: #fff; }
}

/* ---------- Print: ink on white, no textures ---------- */
@media print {
  body { background: #fff !important; }
  html::before, body::before, body::after { display: none !important; }
  .reading-page .talent-prose { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; }
  .reading-page .talent-prose :is(code, pre, .scenario-meta, .skill-sheet, .cast-flow li) { border-color: #999 !important; }
}

/* Smoke on iron: the stone's mottle and firelight from above, on every iron figure and the reading
   column, so iron reads as a lit surface and an empty corner of a figure isn't a flat block. The mottle
   and its veil sit on a ::before layer that drifts slowly (20 to 24 second sweeps) (a transform, so it never repaints), and
   the drift only moves the same texture, so the lightest patch measured on 5 November 2026 (4.54:1 for
   the faintest ink) holds wherever it ends up. Still under reduced motion, flat under more contrast. */
.reading-page .talent-prose .talent-visual { position: relative; isolation: isolate; overflow: clip; }
.reading-page .reading-column { isolation: isolate; overflow: clip; }
.reading-page .talent-prose .talent-visual {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0, rgba(182, 139, 82, .065), transparent 70%) no-repeat,
    linear-gradient(160deg, #26232a, #18171d 62%);
}
.reading-page .reading-column {
  background:
    radial-gradient(ellipse 90% 30% at 50% 0, rgba(182, 139, 82, .065), transparent 70%) no-repeat,
    linear-gradient(#1a1617, #141112);
}
.reading-page .talent-prose .talent-visual::before,
.reading-page .reading-column::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(16, 14, 16, var(--smoke-veil, .3)), rgba(16, 14, 16, var(--smoke-veil, .3))),
    var(--noise-mottle) center top / 1100px 1100px repeat;
  animation: smoke-drift 20s ease-in-out infinite alternate;
}
.reading-page .reading-column::before { animation-duration: 24s; animation-delay: -9s; }
@keyframes smoke-drift {
  from { transform: translate3d(-32px, 12px, 0) scale(1.02); }
  to   { transform: translate3d(32px, -16px, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html::before,
  body::before,
  .reading-page .talent-prose .talent-visual::before,
  .reading-page .reading-column::before { animation: none; }
}
@media (prefers-contrast: more) {
  .reading-page .talent-prose .talent-visual { background: #1d1b21; }
  .reading-page .reading-column { background: #141112; }
  .reading-page .talent-prose .talent-visual::before,
  .reading-page .reading-column::before { display: none; }
}
@media print {
  .reading-page .talent-prose .talent-visual::before,
  .reading-page .reading-column::before { display: none; }
}
@media (max-width: 920px) { .reading-page .reading-column::before { display: none; } }