/* r8 resources lane (13 Nov 2026): "Resources and reading" band on Get support and "Read for <department>" on department pages.
   Option 13 tokens only (fif13.css). Yellow stays for actions; the jump chips for the two press rows use ink, not yellow. */
.sys13 .res-band{padding-top:var(--rowgap);margin-top:0;border-top:1px solid var(--line)}
.sys13 .res-head h2{font:800 clamp(30px,1.4rem + 2.2vw,52px)/1.02 var(--f-display);font-stretch:var(--ds);letter-spacing:-.02em;margin:.25em 0 .3em;max-width:22ch}
.sys13 .res-jump ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.sys13 .res-jump a{display:inline-block;padding:9px 14px;border-radius:var(--pill);background:#fff;box-shadow:var(--sh);font:600 14.5px/1.1 var(--f-body);color:var(--ink);text-decoration:none}
.sys13 .res-jump a:hover{box-shadow:var(--sh2)}
.sys13 .res-jump a.hot{background:var(--ink);color:#fff}
.sys13 .res-row,.sys13 .res-gridwrap{scroll-margin-top:90px}
.sys13 .res-foot{padding-top:24px}

/* Masthead cards for the trade and craft magazines: a big logo panel, or the title set as a masthead */
.sys13 .xc-mag .xc-l{height:auto;aspect-ratio:16/7;place-items:center;padding:14px 22px;background:#fff;border:1px solid var(--line)}
.sys13 .xc-mag .xc-l.xc-dk{background:#1d1d1f;border-color:#1d1d1f}
.sys13 .xc-mag .xc-l img{height:auto;max-height:72%;width:auto;max-width:86%}
.sys13 .xc-l.xc-txt{background:var(--bg3)}
.sys13 .xc-mag .xc-l.xc-txt{background:#1d1d1f;border-color:#1d1d1f}
.sys13 .xc-mag .xc-txt .xc-mono{color:#fff;font:800 clamp(24px,1rem + 1.4vw,36px)/1 var(--f-display);font-stretch:85%;letter-spacing:-.02em;text-align:center}
.sys13 .xc-txt .xc-mono{font-size:19px;line-height:1.1;font-stretch:90%}
.sys13 .res-feature .xc{min-height:300px}

/* Book cards: 2:3 cover, title, author, one line */
.sys13 .bk{position:relative;display:flex;flex-direction:column;gap:5px;height:100%;color:var(--ink);text-decoration:none}
.sys13 .bk-im{display:block;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--bg3);box-shadow:var(--sh)}
.sys13 .bk:hover .bk-im{box-shadow:var(--sh2)}
.sys13 .bk-im img{width:100%;height:100%;object-fit:cover;display:block}
.sys13 .bk-type{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:16px 14px;background:#2b2b30;color:#fff}
.sys13 .bk-type b{font:800 20px/1.05 var(--f-display);font-stretch:88%}
.sys13 .bk-type i{font:600 13px/1.2 var(--f-body);font-style:normal;color:var(--on-dark2,#c7c7cc)}
.sys13 .bk-t{font:800 17px/1.12 var(--f-display);font-stretch:var(--ds);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sys13 .bk-a{font:600 13.5px var(--f-body);color:var(--ink2)}
.sys13 .bk-o{font-size:14px;line-height:1.38;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sys13 .bk .xc-go{font-size:14px;margin-top:auto;padding-top:4px}
/* The band holds its own rows: let its wrapper run full width like a plain .x-row (fif13.css §433) */
.sys13 .wide>.wrap:has(>.res-band),.sys13 .wide>.wrap:has(>.res-gridwrap){max-width:none;width:100%;padding-inline:0;margin-inline:0}
@media (max-width:640px){
 .sys13 .res-jump ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 10px}
 .sys13 .res-jump ul::-webkit-scrollbar{display:none}
 .sys13 .res-jump li{flex:0 0 auto}
}
.sys13 .wide>.wrap:has(>.res-dept){max-width:none;width:100%;padding-inline:0;margin-inline:0}
.sys13 .res-dept .res-feature .xc{min-height:0}
.sys13 .res-more{padding-top:18px;font:600 15px var(--f-body)}
.sys13 .res-more a{color:var(--ink);text-underline-offset:5px}
.sys13 .res-books .g{grid-template-columns:repeat(auto-fit,minmax(150px,190px))}
.sys13 .res-mixed .g{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),260px));align-items:start}
.sys13 .res-mixed .xc{min-height:0}
@media (max-width:640px){.sys13 .res-mixed .g{grid-template-columns:1fr 1fr}.sys13 .res-mixed .xc-mag{grid-column:1/-1}.sys13 .res-mixed .g:not(:has(.xc-mag)){grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}}
/* r11 design: mixed magazines-and-books carousel; cards sit at the top so covers and mastheads keep their own heights */
.sys13 .res-mixed .rail{align-items:start}
/* A single book: cover beside its text, not a lone tall card */
.sys13 .res-mixed .g:has(>li:only-child){grid-template-columns:minmax(0,38rem)}
.sys13 .res-mixed li:only-child .bk{display:grid;grid-template-columns:clamp(110px,28vw,150px) 1fr;column-gap:20px;row-gap:4px;align-content:start;align-items:start}
.sys13 .res-mixed li:only-child .bk-im{grid-row:1/span 5}
.sys13 .res-mixed li:only-child .bk-t{margin-top:0;font-size:20px}
.sys13 .res-mixed li:only-child .xc-go{margin-top:6px}
.sys13 .xc-mag .xc-l{container-type:inline-size}
.sys13 .xc-mag .xc-txt .xc-mono{font-size:clamp(18px,10.5cqi,38px);text-wrap:balance;overflow-wrap:anywhere}
@media (min-width:641px){.sys13 .res-mixed .g:not(:has(>li:nth-child(4))){grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}.sys13 .res-mixed .g:has(>li:only-child){grid-template-columns:minmax(0,38rem)}}