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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Level progress (build-guides.py, from design/level.json) on the homepage stream card and About#stream. */
/* The level number keeps the line's own font and size (it was 18px Cinzel, which sat oddly beside the Inter numbers and stretched the line box). */
.level-progress { margin-top: 18px; }
.level-line { font-size: 13px; line-height: 1.6; color: var(--silver); }
.level-line b { font-weight: 600; color: var(--brass-light); font-variant-numeric: tabular-nums; }
.level-bar { display: block; height: 4px; margin-top: 8px; background: rgba(100, 87, 82, .35); overflow: hidden; }
.level-bar > span { display: block; height: 100%; background: var(--brass); }
.level-when { margin-top: 6px; font-size: 11px; color: var(--muted); }
.talent-prose .level-progress { margin: 0 0 21px; }
.talent-prose .level-line { color: inherit; margin: 0; }
.talent-prose .level-when { margin: 6px 0 0; }
.talent-prose .level-bar { background: rgba(43, 32, 22, .18); }
.talent-prose .level-bar > span { background: var(--p-copper, #6A4612); }
.talent-prose .level-line b { color: var(--p-accent, #8A2C24); }
.talent-prose .level-when { color: var(--p-soft, #5B4A3A); }
@media (prefers-contrast: more) { .level-bar { outline: 1px solid currentColor; } }
@media print { .level-bar { border: 1px solid #000; background: #fff; } .level-bar > span { background: #000; } }
/* 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; }
}
/* 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}
/* figures.css */
/* Restokins figures: one file owns every diagram and figure panel.
   Two materials. Parchment war maps for battleground maps (.diagram-map), and
   iron and copper game panels (.ui-frame, .diagram-ui) for every other figure.
   Glyphs come from glyphs.svg, proxied inside each SVG's own defs. No raster images.
   Load after druid-article.css, pvp-mechanics.css and patch-notes.css so it wins ties. */
:root{
  --paper:#eee0c0;--paper-edge:#d6bf91;
  --ink-map:#33241a;--ink-soft:#47331f;--ink-terrain:#80684d;
  --ink-horde:#8c2a24;--ink-alliance:#23477c;--ink-green:#245a2f;--ink-violet:#4a3a9c;--ink-copper:#7a4f1c;
  --iron-0:#100e10;--iron-1:#1b1819;--iron-2:#211e1e;--copper:#b68b52;--copper-hi:#dfbd82;--copper-lo:#765338;--slot-bg:#120f11;
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .24 0 0 0 0 .13 0 0 0 .5 -.16'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --paper-blot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .8 -.36'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url%28%23b%29'/%3E%3C/svg%3E");
}

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

/* Sweep 4 Nov: the key pills share one width so the definitions start on one line. */
.status-key .guide-status{min-width:92px;text-align:center;flex:none}
/* From 1081px, where the body is 18px, checklist lines (the short versions, cheat sheets and drills) step up to 14px. */
@media(min-width:1081px){.drill-checklist li{font-size:14px}}
/* reading.css */
/* Reading layout and reading aids for every reading page (guides, field notes, About).
   This file owns every reading-layout and reading-aid rule: the text size, the full-bleed figure geometry, the
   two-column grid (the parchment page, then one sticky reading column on the right), the
   heading and change log link buttons, the toast, the return-visit notice, progress and time
   left, and the text size control. reading.js (loaded after site.js) builds the column around
   the contents aside, and the buttons and notices. Without it the page still reads well, with
   the contents above the text as on a phone.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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