/* 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; } }
/* guides.css */
/* Guides: the /guides/ hub, guide cards (hub and homepage), and the guide page furniture
   (last-revised line, revision log). This file owns every .guide-* and .start-* rule. */

/* Guide page: the line under the deck that says how current the guide is. */
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  max-width: 720px;
  margin-top: 22px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--green);
  background: rgba(88, 180, 106, .05);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.guide-meta time { color: var(--silver); }
.guide-meta a { color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .5); text-underline-offset: 4px; }
@media (hover: hover) { .guide-meta a:hover { text-decoration-color: var(--brass-light); } }
.guide-meta-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--green);
}


/* Guide cards: hub and homepage. */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 24px 20px;
  border: 1px solid rgba(100, 87, 82, .45);
  border-top: 2px solid var(--brass-dark);
  background: rgba(33, 30, 30, .45);
  transition: border-color .2s, background .2s, transform .2s;
}
.guide-card:focus-visible { border-color: var(--brass); background: rgba(182, 139, 82, .06); transform: translateY(-2px); }
@media (hover: hover) { .guide-card:hover { border-color: var(--brass); background: rgba(182, 139, 82, .06); transform: translateY(-2px); } }
.guide-card-kind { font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); }
.guide-card-title { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.35; color: var(--silver); margin-top: 12px; }
.guide-card p { font-size: 13px; line-height: 1.8; color: var(--muted); margin-top: 10px; }
.guide-card-meta { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--muted); }
.guide-card-meta time { color: var(--silver); }
.guides-section .notes-heading { margin-bottom: 30px; }

/* Hub page. */
.guides-masthead .article-deck a { color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .5); text-underline-offset: 4px; }
.guides-start, .guides-all { padding-top: 56px; }
.guides-all { padding-bottom: 90px; }
.guides-start h2, .guides-all h2 { font-size: clamp(26px, 3vw, 36px); }
.guides-start .section-copy { margin-top: 10px; font-size: 14px; max-width: 520px; }
.start-path { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 28px 0 0; border: 1px solid var(--line); }
.start-path li { counter-increment: step; min-width: 0; }
.start-path li + li { border-left: 1px solid var(--line); }
.start-path a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 24px; transition: background .2s; }
.start-path a::before { content: counter(step, decimal-leading-zero); font: 500 28px/1 var(--display); color: var(--brass-dark); }
.start-path a:focus-visible { background: rgba(182, 139, 82, .06); }
@media (hover: hover) { .start-path a:hover { background: rgba(182, 139, 82, .06); } }
.start-step-kind { margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); }
.start-path b { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.35; color: var(--silver); }
.start-path a > span:last-child { font-size: 13px; line-height: 1.7; color: var(--muted); }
.guides-all .guide-grid { margin-top: 26px; }
.guides-next { margin-top: 26px; font-size: 13px; color: var(--muted); }
.guides-next a { color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 4px; }
@media (hover: hover) { .guides-next a:hover { text-decoration-color: var(--brass-light); } }

@media (max-width: 1180px) and (min-width: 951px) {
  .start-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-path li:nth-child(odd) { border-left: 0; }
  .start-path li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* A group of exactly four cards (the four maps) sits two by two rather than three and one alone. */
@media (min-width: 951px) {
  .guide-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 950px) {
  .guide-grid, .start-path { grid-template-columns: minmax(0, 1fr); }
  .start-path li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .guide-meta { font-size: 12px; }
  .guides-start, .guides-all { padding-top: 40px; }
}
@media print {
  .guide-meta-log, .guide-fresh-tag { display: none; }
}
@media (max-width: 720px) {
  .start-path a { padding: 18px 20px; gap: 4px; }
  .start-path a::before { font-size: 20px; }
  .start-path b { font-size: 18px; }
}

/* Dateline: Published and Updated together, then the status line and the change log link.
   scripts/build-guides.py writes it from the change log. */
.guide-meta-date { color: var(--muted); }
.guide-meta-status { flex-basis: 100%; }
.guide-meta-log { font-size: 12px; }
/* A 44px tap target that takes no more room: the padding is cancelled by the margin. */
.guide-meta-log { padding: 12px 0; margin: -12px 0; }
.guide-meta a.guide-fresh { text-decoration: none; color: var(--muted); }
.guide-meta a.guide-fresh time { color: var(--silver); text-decoration: underline; text-decoration-color: rgba(88, 180, 106, .6); text-underline-offset: 4px; }
.guide-meta a.guide-fresh::after, .guide-fresh-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid rgba(88, 180, 106, .6);
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); vertical-align: 1px;
}
.guide-meta a.guide-fresh::after { content: "New"; }
@media (hover: hover) { .guide-meta a.guide-fresh:hover time { text-decoration-color: var(--green); } }
.guide-fresh-tag { margin-left: 10px; padding: 0 6px; font-size: 9px; }
.guide-card-meta .guide-fresh-tag { vertical-align: 1px; }

/* Change log: newest first, each entry dated, sized and linkable. */
.guide-changelog { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.anchor-alias { display: block; height: 0; overflow: hidden; }
.prose .guide-changelog h2 { font-size: 22px; margin: 0 0 14px; }
/* Back to contents (site.js) sits over a heading by a negative margin, which needs the heading's own top margin.
   The change log heading has none, so here the link takes its own line. */
.prose .guide-changelog > .to-contents { margin-top: 0; margin-bottom: 6px; }
.prose .changelog { list-style: none; padding: 0; margin: 0; }
.prose .changelog-entry { display: grid; grid-template-columns: 92px 104px minmax(0, 1fr); gap: 6px 14px; align-items: baseline; padding: 10px 0; margin: 0; border-bottom: 1px solid rgba(100, 87, 82, .25); scroll-margin-top: 30px; }
.prose .changelog-entry:last-child { border-bottom: 0; }
.prose .changelog-entry:target { background: rgba(88, 180, 106, .06); }
.changelog-entry time { color: var(--brass-light); font-size: 13px; }
.changelog-kind { justify-self: start; padding: 1px 7px; border: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.8; }
.changelog-major { border-color: rgba(223, 189, 130, .6); color: var(--brass-light); }
.changelog-correction { border-color: rgba(218, 112, 96, .6); color: var(--horde-light); }
.prose .changelog-entry p { margin: 0; font-size: 14px; line-height: 1.75; }
@media (max-width: 720px) {
  .prose .changelog-entry { grid-template-columns: auto minmax(0, 1fr); }
  .prose .changelog-entry p { grid-column: 1 / -1; }
}
.start-path .guide-fresh-tag { align-self: flex-start; margin-left: 0; }

/* New marker for a guide in its first fortnight (build-guides.py adds .guide-new to the Published date) */
.guide-meta .guide-new::after { content: "New"; display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid rgba(88, 180, 106, .6); color: #8fd09c; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 18px; vertical-align: 1px; }
@media print { .guide-meta .guide-new::after { display: none; } }

/* Sweep 4 Nov: group intros on the hub match the Start here intro. */
.guides-all .section-copy { margin-top: 10px; font-size: 14px; max-width: 640px; }
/* Settings guide: the short version, spec filter and quick list */
.guide-spec-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 18px}
.guide-spec-filter-label{font:600 10px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.guide-spec-filter button{min-height:40px;padding:8px 14px;border:1px solid var(--line);background:transparent;color:var(--muted);font:500 12px/1 var(--body);border-radius:2px;transition:border-color .2s,color .2s,background .2s}
@media (hover: hover) { .guide-spec-filter button:hover {color:var(--silver);border-color:var(--brass)} }
.guide-spec-filter button[aria-pressed="true"]{color:var(--brass-light);border-color:var(--brass);background:rgba(182,139,82,.1)}
.guide-quick-list li:not(.group){padding-top:10px;padding-bottom:10px;border-bottom:1px solid rgba(182,139,82,.12)}
.guide-quick-list li strong{color:var(--silver);font-weight:600}
.guide-quick-list li a{color:var(--brass-light);border-bottom:1px solid var(--line);white-space:nowrap}
/* One quiet line under each item: who it's for, then how sure (a dot and a word, no box), then Detail on the right. */
.guide-quick-list .quick-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px;font:600 10px/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase}
.guide-quick-list .quick-who{color:var(--muted)}
.guide-quick-list .quick-meta .guide-status{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit}
.guide-quick-list .quick-meta .guide-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
@media (hover: hover) { .guide-quick-list .quick-meta .guide-status:hover {background:none;text-decoration:underline;text-underline-offset:3px} }
.guide-quick-list .quick-meta a:not(.guide-status){display:inline-flex;align-items:center;margin-left:auto;min-height:24px;padding:0;font:inherit;letter-spacing:inherit}
.guide-quick-list .quick-meta a:not(.guide-status)::after{content:"\00a0\203A";content:"\00a0\203A" / ""}
.guide-quick-list li[hidden]{display:none}
@media print{.guide-quick-list li a{border:0}.guide-spec-filter{display:none}}

/* New-visitor pass, 4 Nov: answer first on phones. The masthead's jump link to the short
   version (phones only), and the contents list folded into a details element below 920px,
   open and sticky beside the article above it. */
.guide-jump { display: none; margin: 16px 0 0; }
.guide-jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; background: var(--horde); color: #fff; font: 600 14px/1.2 var(--body); letter-spacing: .01em; }
@media (hover: hover) { .guide-jump a:hover { background: #b8433b; } }
.guide-jump .icon { width: 17px; height: 17px; }
@media (max-width: 720px) { .guide-jump { display: block; } }
.guide-toc > summary { list-style: none; }
.guide-toc > summary::-webkit-details-marker { display: none; }
@media (min-width: 921px) {
  .guide-toc > summary { display: none; }
  .guide-toc::details-content { content-visibility: visible; display: block; height: auto; }
}
@media (max-width: 920px) {
  .article-aside:has(> .guide-toc) > p { display: none; }
  .article-aside:has(> .guide-toc) { padding-bottom: 0; border-bottom: 0; }
  .guide-toc { flex: 1 1 100%; width: 100%; }
  .guide-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .guide-toc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; color: var(--brass-light); font: 600 12px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; }
  .guide-toc > summary::after { content: ""; width: 8px; height: 8px; margin-right: 6px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
  .guide-toc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
  .guide-toc-links { padding: 4px 0 14px; }
  body .article-layout .guide-toc-links > a { display: flex; align-items: center; min-height: 32px; margin-top: 2px; font-size: 13px; }
}
@media (hover: hover) { .guide-toc-links > a:hover { color: var(--brass-light); } }

/* "You are here" in the desktop contents aside, set by site.js as the reader scrolls. */
.article-aside a[aria-current="true"] { position: relative; color: var(--brass-light); }
.article-aside a[aria-current="true"]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 2px; height: 1.3em; transform: translateY(-50%); background: var(--brass); }

/* Status labels link to the guide's own status key. */
a.guide-status { text-decoration: none; cursor: help; }
@media (hover: hover) { a.guide-status:hover { background: rgba(231, 238, 248, .08); } }
.status-key-more { font-size: 14px; margin-top: -6px; }
@media print { a.guide-status { cursor: auto; } .guide-jump { display: none !important; } }
/* Short version groups: each group stays whole, and groups sit side by side in rows so their headings line up. */
.guide-quick-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 36px;align-items:start}
.guide-quick-group[hidden]{display:none}
.guide-quick-groups .guide-quick-list{columns:auto}
.guide-quick-groups>.guide-quick-group:has(>.guide-quick-list>li:only-child){grid-column:1/-1}
.talent-prose .guide-quick-groups .guide-quick-head,.guide-quick-head{margin:0 0 4px;padding:0 0 6px;border-bottom:1px solid rgba(182,139,82,.35);font:600 12px/1.5 var(--display);letter-spacing:.09em;color:var(--copper-hi)}
@media(max-width:720px){.guide-quick-groups{grid-template-columns:1fr;gap:22px}}
@media print{.guide-quick-head{color:#111!important;border-bottom-color:#999!important}}

/* Changed since your visit: a badge on a guide or post card the reader has visited and that changed after
   that visit (site.js compares the card's generated data-changed with this browser's rk:visit date). Real
   text in a ruled box, brass on the iron card. The blog archive loads this file for its note cards too. */
.since-badge {
  display: inline-block; margin-left: 10px; padding: 0 6px; border: 1px solid rgba(223, 189, 130, .6);
  color: var(--brass-light); font-size: 9px; font-weight: 600; letter-spacing: .12em; line-height: 1.8;
  text-transform: uppercase; vertical-align: 1px; white-space: nowrap; animation: since-badge-in .6s ease-out both;
}
.note-card .note-meta > span.since-badge { margin-left: 0; color: var(--brass-light); font-size: 9px; letter-spacing: .1em; }
/* On a guide card the badge takes its own line at the text's edge, so it never wraps in indented after the reading time. */
.guide-card-meta > .since-badge { display: table; margin: 8px 0 0; }
@keyframes since-badge-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .since-badge { animation: none; } }
@media (prefers-contrast: more) { .since-badge { border-color: var(--brass-light); } }
@media print { .since-badge { color: #000; border-color: #000; animation: none; } }

/* Read next, straight after a guide's closing (written by build-guides.py from the end links and the hub
   card). One link, the whole card, on the parchment's inks. The end links below it stay as they are. */
.guide-next { margin: 34px 0 8px; }
.guide-next-label { margin: 0 0 8px; font: 600 11px/1.5 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.guide-next-link, .reading-page .talent-prose .guide-next a.guide-next-link.guide-next-link { text-decoration: none; }
.guide-next-link { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--p-rule, var(--line)); border-left: 3px solid var(--p-accent, var(--horde)); background: var(--p-tint, rgba(182, 139, 82, .06)); color: inherit; text-decoration: none; }
.guide-next-title { font: 600 20px/1.3 var(--display); color: var(--p-link, var(--brass-light)); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.guide-next-why { font-size: 14px; line-height: 1.6; color: var(--p-ink, var(--silver)); }
.guide-next-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--p-soft, var(--muted)); }
.guide-next-link:focus-visible .guide-next-title { text-decoration-color: currentColor; }
@media (hover: hover) { .guide-next-link:hover .guide-next-title { text-decoration-color: currentColor; } }
@media (hover: hover) { .guide-next-link:hover { border-color: var(--p-edge, var(--brass-dark)); border-left-color: var(--p-accent, var(--horde)); } }
@media print { .guide-next { display: none; } }

/* Reading time on cards (build-guides.py writes span.card-time). */
.guide-card-meta .card-time::before { content: "·"; margin: 0 8px; color: var(--brass); }
.note-card .note-meta > span.card-time { color: var(--muted); }

/* Coming back (site.js): Continue reading and Next you haven't read, on the homepage and the hub.
   Two rows on one grid: the labels in the first column, the links in the second, so both links start at the
   same edge and share the label's baseline. The section, percentage and Dismiss go on a line under the link. Below 600px each label
   sits over its link, all on the bar's one left edge. */
.continue-bar { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 18px; align-items: baseline; margin: 28px 0 0; padding: 8px 20px; border: 1px solid var(--line); border-left: 2px solid var(--brass); background: rgba(182, 139, 82, .05); }
.continue-bar[hidden] { display: none; }
.continue-bar + .start-path { margin-top: 16px; }
.continue-item { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.continue-kind { font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.continue-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; min-width: 0; }
/* 44px tap targets that take no more room: the padding is cancelled by the margin. */
.continue-item a { display: inline-block; padding-block: 12px; margin-block: -8px; color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 4px; }
@media (hover: hover) { .continue-item a:hover { text-decoration-color: var(--brass-light); } }
/* The resume line: the page title is the link, then a second line with the section (sentence case, as its
   contents link names it), the percentage and Dismiss, split by quiet middle dots that screen readers skip. */
.continue-where { display: flex; flex-wrap: wrap; align-items: baseline; flex-basis: 100%; gap: 0 8px; min-width: 0; }
.continue-section::after, .continue-where .continue-pct::after { content: "\00b7"; content: "\00b7" / ""; margin-left: 8px; color: var(--brass-dark, var(--muted)); }
.continue-pct { font-variant-numeric: tabular-nums; }
.continue-dismiss { min-height: 44px; margin-block: -10px; padding: 0 10px; margin-inline: -10px; background: transparent; border: 1px solid transparent; font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(165, 165, 165, .4); text-underline-offset: 4px; }
@media (hover: hover) { .continue-dismiss:hover { color: var(--silver); text-decoration-color: currentColor; } }
@media (max-width: 600px) {
  .continue-section { flex-basis: 100%; }
  .continue-section::after { content: none; }
  .continue-bar { grid-template-columns: minmax(0, 1fr); padding: 10px 16px; }
  .continue-item { grid-template-columns: minmax(0, 1fr); }
  .continue-item + .continue-item { margin-top: 8px; }
}

/* Start here markers, on the hub's cards: Read, Changed and New on one wrapping row (site.js builds span.start-marks
   under the step's kind), every marker the same height and starting at the text's edge. */
.start-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.start-path .start-marks > * { margin: 0; align-self: auto; }
.start-path .start-read { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .12em; line-height: 1.8; text-transform: uppercase; color: var(--green); }
.start-path .start-read::before { content: ""; flex: none; width: 9px; height: 5px; margin: 0 1px 3px 2px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.start-path .since-badge { align-self: flex-start; }

/* The homepage's Start here: one numbered strip of four links (ol.start-strip), one row from 721px and two by two
   on phones. A small tick for a guide this browser has read, and a brass dot when it changed since that visit. */
.start-path.start-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.start-path.start-strip li + li { border-left: 1px solid var(--line); border-top: 0; }
.start-strip a { flex-direction: row; align-items: baseline; gap: 10px; min-height: 52px; padding: 13px 18px; }
.start-strip a::before { font-size: 17px; min-width: 1.3em; } /* Cinzel's figures differ in width, so every title starts at one edge */
.start-strip-title { font: 500 17px/1.3 var(--display); color: var(--silver); }
/* The marks sit inside the title, inline after its last word on its baseline: the box is .7em tall (about
   Cinzel's cap height) with no text in flow, so its bottom edge is its baseline and the tick and dot centre on
   the capitals. Where a title and its marks don't fit, the marks wrap to a second line. */
.start-strip .start-marks { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 5px; height: .7em; vertical-align: baseline; line-height: 1; }
.start-strip .start-read { gap: 0; }
.start-strip .start-read::before { margin-left: 0; }
.start-strip .start-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brass-light); box-shadow: 0 0 0 2px rgba(223, 189, 130, .2); }
@media (max-width: 720px) {
  .start-path.start-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .start-path.start-strip li:nth-child(odd) { border-left: 0; }
  .start-path.start-strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .start-strip a { gap: 8px; min-height: 48px; padding: 17px 14px 10px; }
  .start-strip a::before { font-size: 15px; }
  .start-strip-title { font-size: 16px; }
  /* Every row the same height, marks or not. */
  .start-path.start-strip { grid-auto-rows: 1fr; }
  .start-strip a { padding: 14px 12px; }
}
/* Small phones: a point smaller, so "03 Mechanics" and its marks still fit one line at 390px. */
@media (max-width: 400px) {
  .start-strip-title { font-size: 15px; }
}
@media (max-width: 360px) {
  .start-strip a { gap: 6px; }
}
@media print { .start-strip .start-marks { display: none; } }

/* Follow a guide's changes (build-guides.py), under the change log heading. */
.changelog-follow { margin: -4px 0 18px; font-size: 13px; color: var(--muted); }
.changelog-follow a { color: var(--brass-light); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* /sheets/ (generated list) and /open-questions/. */
.sheets-body, .oq-intro, .oq-body { padding-block: 40px 20px; }
.oq-body { padding-top: 0; padding-bottom: 80px; }
.sheets-body { padding-bottom: 80px; }
.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sheet-item { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-top-color: var(--brass-dark); background: var(--steel); }
.sheet-guide { font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--brass); }
.sheet-title { font-size: 22px; line-height: 1.35; letter-spacing: 0; color: var(--silver); }
.sheet-line { font-size: 13px; line-height: 1.7; color: var(--muted); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: auto; padding-top: 8px; }
.sheet-actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 4px; }
.sheet-actions a.sheet-print { font-weight: 600; }
@media (hover: hover) { .sheet-actions a:hover { text-decoration-color: var(--brass-light); } }
.oq-intro h2, .oq-guide h2 { font-size: 26px; letter-spacing: 0; color: var(--silver); }
.oq-intro p { max-width: 760px; margin-top: 14px; font-size: 14px; line-height: 1.85; color: var(--muted); }
.oq-intro a, .oq-guide h2 a, .oq-rests a { color: var(--brass-light); text-decoration: underline; text-decoration-color: rgba(223, 189, 130, .45); text-underline-offset: 4px; }
.oq-guide { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.oq-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.oq-list li { padding-left: 18px; border-left: 2px solid var(--brass-dark); }
.oq-q { font-size: 15px; line-height: 1.7; color: var(--silver); }
.oq-rests { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.oq-rests a { display: inline-block; padding-block: 10px; margin-block: -10px; }
@media (max-width: 720px) {
  .sheet-list { grid-template-columns: minmax(0, 1fr); }
  .oq-intro h2, .oq-guide h2 { font-size: 22px; }
}
@media print { .continue-bar { display: none; } }

/* Search at the top of the guides hub. It hands the words to the blog's search (blog/?q=...#search). */
.guide-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 28px; max-width: 630px; }
.guide-search .blog-search { flex: 1 1 240px; width: auto; }
.guide-search .button { min-height: 44px; padding: 10px 20px; }

/* Card density. From 721 to 950px a card grid runs two across instead of one card to a row, and on
   phones the cards are tighter (18px padding, a 20px title and 12px between cards), so a group of
   five reads as a list rather than five screens. */
@media (min-width: 721px) and (max-width: 950px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .guide-grid { gap: 12px; }
  .guide-card { padding: 18px 18px 16px; }
  .guide-card-title { font-size: 20px; margin-top: 10px; }
  .guide-card p { margin-top: 8px; }
  .guide-card-meta { padding-top: 14px; }
}

/* Phones: the spec filter's label takes its own line, so the four buttons fit one row at 390px
   instead of leaving Restoration alone on a second, and each is a full 44px to tap. */
@media (max-width: 480px) {
  .guide-spec-filter { row-gap: 6px; }
  .guide-spec-filter-label { flex-basis: 100%; }
  .guide-spec-filter button { min-height: 44px; padding: 8px 12px; }
}
/* 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; } }