/* 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}}
/* 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}
/* 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; } }
/* whats-new.css */
/* What's new: the timeline page (docs/whats-new/, built by scripts/build-whats-new.py).
   Stone surround, iron cards, a copper rail down the left with one marker per entry.
   Type colours come from the shared tokens: guides copper, new guides Restoration green,
   corrections the site's correction crimson (as .changelog-correction), posts lunar glow,
   addons violet, small updates muted, and videos YouTube red (#E00000 behind white, per watch.css). */

.whats-new-page { --wn-rail: 18px; --wn-gutter: 54px; --wn-iron: #171415; }

.wn-entry { --wn: var(--brass-light); --wn-edge: rgba(223, 189, 130, .55); }
.wn-entry[data-wn-type="new-guide"] { --wn: var(--green); --wn-edge: rgba(88, 180, 106, .6); }
.wn-entry[data-wn-type="correction"] { --wn: var(--horde-light); --wn-edge: rgba(218, 112, 96, .6); }
.wn-entry:is([data-wn-type="post"], [data-wn-type="post-update"]) { --wn: var(--glow); --wn-edge: rgba(127, 196, 255, .5); }
.wn-entry:is([data-wn-type="addon"], [data-wn-type="addon-release"]) { --wn: #a99af0; --wn-edge: rgba(138, 119, 232, .65); }
.wn-entry[data-wn-type="update"] { --wn: var(--muted); --wn-edge: rgba(165, 175, 190, .35); }
.wn-entry[data-wn-type="video"] { --wn: #fff; --wn-edge: #e00000; }

/* Masthead */
.wn-masthead .article-deck { max-width: 720px; }
.wn-feed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; font-size: 12px; color: var(--muted); }
.wn-feed a { color: var(--brass-light); font-weight: 600; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; }
.wn-feed a:focus-visible { color: var(--silver); }
@media (hover: hover) { .wn-feed a:hover { color: var(--silver); } }
/* A 44px tap target that takes no more room: the padding is cancelled by the margin. */
.wn-feed a { display: inline-block; min-width: 44px; padding: 14px 0; margin: -14px 0; text-align: center; }

/* Toolbar */
.wn-body { padding-top: 40px; padding-bottom: 90px; }
.wn-toolbar { display: flex; flex-direction: column; gap: 14px; }
.wn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wn-chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; background: var(--wn-iron); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; }
@media (hover: hover) { .wn-chips button:hover { color: var(--silver); border-color: var(--brass-dark); } }
.wn-chips button[aria-pressed="true"] { color: var(--silver); border-color: var(--horde); background: linear-gradient(rgba(165, 54, 47, .12), rgba(165, 54, 47, .12)), var(--wn-iron); }
.wn-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass-light); flex-shrink: 0; }
[data-wn-filter="all"] .wn-chip-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--brass-light); }
[data-wn-filter="corrections"] .wn-chip-dot { background: var(--horde-light); }
[data-wn-filter="updates"] .wn-chip-dot { background: var(--muted); }
[data-wn-filter="posts"] .wn-chip-dot { background: var(--glow); }
[data-wn-filter="videos"] .wn-chip-dot { background: #e00000; }
[data-wn-filter="addons"] .wn-chip-dot { background: #a99af0; }
.wn-chip-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.wn-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.wn-small-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 2px; background: none; color: var(--read-text); font-size: 13px; }
.wn-switch { position: relative; width: 34px; height: 18px; border: 1px solid var(--brass-dark); border-radius: 9px; background: var(--wn-iron); flex-shrink: 0; transition: background-color .2s, border-color .2s; }
.wn-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: transform .2s, background-color .2s; }
.wn-small-toggle[aria-pressed="true"] .wn-switch { border-color: var(--brass-light); background: rgba(182, 139, 82, .2); }
.wn-small-toggle[aria-pressed="true"] .wn-switch::after { transform: translateX(16px); background: var(--brass-light); }
@media (hover: hover) { .wn-small-toggle:hover { color: var(--silver); } }
.wn-search { margin-left: auto; width: 300px; }
.wn-count { margin: 20px 0 6px; font-size: 12px; color: var(--muted); }
.wn-empty { margin-top: 24px; padding: 40px 24px; text-align: center; border-block: 1px solid var(--line); }
.wn-empty-title { font: 500 24px/1.3 var(--display); color: var(--silver); }
.wn-empty p:not(.wn-empty-title) { max-width: 560px; margin: 12px auto 0; font-size: 14px; line-height: 1.7; color: var(--read-text); }
.wn-empty .button { margin-top: 20px; }

/* Since you were here (whats-new.js): two groups side by side above the toolbar, each a short list of
   quick links into the timeline. Pages you've read is marked brass with a filled diamond, Since your
   last look silver with an open ring, and each marked entry says which group it's in, in words. */
.wn-since { margin-bottom: 26px; padding: 18px 20px 16px; background: var(--wn-iron); border: 1px solid var(--line); border-top-color: var(--brass-dark); box-shadow: inset 0 1px 0 rgba(223, 189, 130, .06), 0 10px 26px rgba(0, 0, 0, .35); }
.wn-since > h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; color: var(--silver); }
.wn-since-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px 28px; }
.wn-since-group { min-width: 0; }
.wn-since-group h3 { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 12px/1.6 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--read-lead); }
.wn-since-key { width: 9px; height: 9px; flex-shrink: 0; }
.wn-group-since-read .wn-since-key { transform: rotate(45deg); background: var(--brass-light); }
.wn-group-since-look .wn-since-key { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--silver); }
.wn-since-lede { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--read-text); }
.wn-since-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; }
.wn-since-list li { padding: 3px 0; }
.wn-since-list a { color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 3px; }
@media (hover: hover) { .wn-since-list a:hover { text-decoration-color: currentColor; } }
.wn-since-what { color: var(--muted); white-space: nowrap; }
.wn-since-all { min-height: 36px; margin-top: 6px; padding: 0 12px; background: transparent; border: 1px solid var(--brass-dark); color: var(--silver); font-size: 12px; }
@media (hover: hover) { .wn-since-all:hover { border-color: var(--brass-light); color: var(--brass-light); } }
[data-wn-filter="since-read"] .wn-chip-dot { border-radius: 0; transform: rotate(45deg) scale(.9); background: var(--brass-light); }
[data-wn-filter="since-look"] .wn-chip-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--silver); }
.wn-since-tag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 7px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.8; }
.wn-since-tag::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; }
.wn-tag-since-read { border: 1px solid rgba(223, 189, 130, .6); color: var(--brass-light); }
.wn-tag-since-read::before { transform: rotate(45deg); background: var(--brass-light); }
/* The look marker is quiet (the ring and its words, no box): on a first visit it falls on nearly every entry,
   so the boxed read marker keeps the weight. */
.wn-tag-since-look { border: 1px solid transparent; padding-inline: 0; color: var(--read-text); }
.wn-tag-since-look::before { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--silver); }
.wn-hit-since-read .wn-card { box-shadow: inset 3px 0 0 var(--brass-light), inset 0 1px 0 rgba(223, 189, 130, .06), 0 10px 26px rgba(0, 0, 0, .35); animation: wn-since-in .6s ease-out both; }
.wn-entry:target .wn-card, .wn-entry:focus .wn-card { outline: 2px solid var(--brass-light); outline-offset: 3px; }
.wn-entry:focus { outline: none; }
@keyframes wn-since-in { from { opacity: .4; } to { opacity: 1; } }

/* Months and days */
.wn-month { margin-top: 34px; }
.wn-month-head { display: flex; align-items: center; gap: 14px; font-size: clamp(24px, 2.6vw, 32px); color: var(--brass-light); letter-spacing: .01em; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.wn-day { position: relative; padding-top: 22px; }
.wn-day::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--wn-rail) - 1px); width: 2px; background: linear-gradient(rgba(182, 139, 82, .55), rgba(118, 83, 56, .55)); }
.wn-day-head { position: relative; padding-left: var(--wn-gutter); font: 600 12px/1.6 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--read-lead); }
.wn-day-head::before { content: ""; position: absolute; left: calc(var(--wn-rail) - 6px); top: 50%; width: 10px; height: 10px; margin-top: -5px; transform: rotate(45deg); background: var(--stone, #0f0d0e); border: 1px solid var(--brass-light); }
.wn-dnum { font-family: var(--display); font-size: 15px; color: var(--brass-light); letter-spacing: .04em; }
.wn-list { list-style: none; margin: 14px 0 0; padding: 0 0 6px; }

/* Entries */
.wn-entry { position: relative; padding-left: var(--wn-gutter); margin-bottom: 14px; }
.wn-marker { position: absolute; left: calc(var(--wn-rail) - 18px); top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wn-iron); border: 1px solid var(--wn-edge); color: var(--wn); box-shadow: 0 0 0 4px var(--stone, #0f0d0e); }
.wn-marker svg { width: 22px; height: 22px; --g-accent: var(--wn); }
.wn-marker .icon { width: 18px; height: 18px; }
.wn-entry[data-wn-type="video"] .wn-marker { background: #e00000; border-color: #e00000; color: #fff; }
.wn-entry[data-wn-type="update"] .wn-marker { width: 24px; height: 24px; left: calc(var(--wn-rail) - 12px); top: 12px; }
.wn-entry[data-wn-type="update"] .wn-marker .icon { width: 14px; height: 14px; }
.wn-card { padding: 14px 18px 16px; background: var(--wn-iron); border: 1px solid rgba(100, 87, 82, .35); border-left: 2px solid var(--wn-edge); box-shadow: inset 0 1px 0 rgba(223, 189, 130, .06), 0 10px 26px rgba(0, 0, 0, .35); min-width: 0; }
.wn-entry[data-wn-type="update"] .wn-card { padding-block: 10px 12px; background: rgba(23, 20, 21, .82); box-shadow: none; }
.wn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.wn-kind { padding: 1px 7px; border: 1px solid var(--wn-edge); color: var(--wn); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.8; }
.wn-entry[data-wn-type="video"] .wn-kind { background: #e00000; border-color: #e00000; color: #fff; }
.wn-time { color: var(--read-lead); font-variant-numeric: tabular-nums; }
.wn-title { margin-top: 8px; font-size: 19px; line-height: 1.35; font-weight: 500; color: var(--silver); overflow-wrap: anywhere; }
.wn-entry[data-wn-type="update"] .wn-title { font-size: 16px; }
.wn-title a { text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .35); text-underline-offset: 5px; }
.wn-title a:focus-visible { color: var(--brass-light); text-decoration-color: currentColor; }
@media (hover: hover) { .wn-title a:hover { color: var(--brass-light); text-decoration-color: currentColor; } }
.wn-out { width: 15px; height: 15px; margin-left: 6px; color: var(--brass); }
.wn-text { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--read-text); max-width: 78ch; }

/* Desktop: the day sits in a column of its own beside the rail. */
@media (min-width: 921px) {
  .whats-new-page { --wn-date: 150px; }
  .wn-tools { flex-wrap: nowrap; }
  .wn-day { display: grid; grid-template-columns: var(--wn-date) minmax(0, 1fr); column-gap: 0; }
  .wn-day::before { left: calc(var(--wn-date) + var(--wn-rail) - 1px); }
  .wn-day-head { padding: 22px 24px 0 0; text-align: right; align-self: start; position: sticky; top: 70px; }
  .wn-day-head::before { left: auto; right: -6px; top: 34px; margin-top: 0; display: none; }
  .wn-day-head time { display: grid; justify-items: end; gap: 2px; }
  .wn-dnum { font-size: 30px; line-height: 1.1; }
  .wn-list { margin-top: 0; padding-top: 0; }
}

@media (max-width: 720px) {
  .whats-new-page { --wn-rail: 14px; --wn-gutter: 40px; }
  .wn-body { padding-top: 28px; }
  .wn-search { margin-left: 0; width: 100%; }
  .wn-chips button { padding-inline: 11px; }
  .wn-marker { width: 28px; height: 28px; left: calc(var(--wn-rail) - 14px); }
  .wn-marker svg { width: 17px; height: 17px; }
  .wn-marker .icon { width: 15px; height: 15px; }
  .wn-card { padding: 12px 14px 14px; }
  .wn-title { font-size: 17px; }
  .wn-text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) { .wn-switch, .wn-switch::after { transition: none; } .wn-hit-since-read .wn-card { animation: none; } }
@media (prefers-contrast: more) {
  .wn-card, .wn-since { box-shadow: none; border-color: var(--brass-dark); }
  .wn-hit-since-read .wn-card { box-shadow: none; border-left: 3px solid var(--brass-light); }
}
@media print {
  .wn-toolbar, .wn-feed, .wn-marker, .wn-day::before, .wn-day-head::before, .wn-since-all { display: none !important; }
  .wn-since { background: #fff !important; border: 1px solid #111; box-shadow: none; }
  .wn-since-tag, .wn-since-list a { color: #111 !important; border-color: #111 !important; }
  .wn-entry, .wn-day-head { padding-left: 0; }
  .wn-card { background: #fff !important; border: 0; border-left: 2px solid #111; box-shadow: none; break-inside: avoid; }
}
/* 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; } }