/* v2.18 copy of v2.17 layer: bookshelf now scoped to .grid.shelf (course cards and reading lists only). Original: v2.17 site-wide layer: more brand orange with navy and cream, bookshelf motif, mobile fixes. Loaded after site.css on every page. */
:root{--orange-d:#C4570A;--cream:#FBF8F2;--shelf:#E8D9BE;--shelf-d:#CDB48B}
/* orange accents */
.btn-primary{background:var(--orange);color:#14204A;font-weight:700;box-shadow:0 2px 0 #C4570A}
.btn-primary:hover{background:#FF9440;color:#14204A;box-shadow:0 10px 22px -10px rgba(196,87,10,.75)}
.band.dark .btn-primary{background:var(--orange);color:#14204A}
.btn-secondary{border-color:var(--navy);color:var(--navy)}
.btn-secondary:hover{border-color:var(--orange);color:var(--navy);background:#FFF4EA}
.eyebrow::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M1 5c3-4 5 2 8-1s5-3 7 0 4 1 5-1' fill='none' stroke='%23F57E20' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.sec-head h2::after,.cp-head h2::after{content:"";display:block;width:64px;height:6px;border-radius:6px;margin-top:14px;background:linear-gradient(90deg,var(--orange) 0 70%,var(--yellow) 70%)}
.band.dark .sec-head h2::after{background:linear-gradient(90deg,var(--orange) 0 70%,var(--yellow) 70%)}
.td-title h2.td-bubble::after{display:none}
.card::before{background:var(--c,var(--orange))}
.nav li.active>a,.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--orange)}
.site-footer{border-top:6px solid var(--orange)}
.band.alt{background:var(--cream)}
.chip{border:1px solid transparent}
.tag-pending{border-color:var(--orange-d);background:#FFF1E6;color:#7A3306}
a:not(.btn):hover{text-decoration-color:var(--orange)}
::selection{background:#FFD9B8}
/* bookshelf motif (from the programs course rack): cards read as books standing on a shelf */
@media (min-width:600px){
 main .band:not(.dark) .grid.shelf{padding-bottom:26px;background:linear-gradient(180deg,var(--shelf) 0,var(--shelf) 9px,var(--shelf-d) 9px,var(--shelf-d) 13px,transparent 13px) left bottom/100% 13px no-repeat;border-radius:0 0 6px 6px}
 main .band:not(.dark) .grid.shelf>.card{border-left:9px solid var(--c,var(--orange));border-radius:6px 18px 18px 6px;box-shadow:5px 5px 0 -1px #fff,5px 5px 0 0 var(--line),9px 9px 0 -1px #fff,9px 9px 0 0 #E6EAF2;transform-origin:left center}
 main .band:not(.dark) .grid.shelf>.card::before{display:none}
 main .band:not(.dark) .grid.shelf>.card::after{content:"";position:absolute;left:-9px;top:14px;width:9px;height:18px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 2px,transparent 2px 6px)}
}
@media (min-width:600px) and (prefers-reduced-motion:no-preference){
 main .band:not(.dark) .grid.shelf>.card:hover{transform:perspective(1100px) rotateY(-7deg) translateY(-4px);box-shadow:5px 5px 0 -1px #fff,5px 5px 0 0 var(--line),9px 9px 0 -1px #fff,9px 9px 0 0 #E6EAF2,18px 24px 34px -22px rgba(20,32,74,.45)}
}
/* mobile consistency (390px audit) */
html,body{overflow-x:hidden}
h1,h2,h3{overflow-wrap:break-word;hyphens:manual}
@media (max-width:600px){
 .wrap{padding:0 20px}
 h1{font-size:clamp(30px,8.6vw,38px);line-height:1.12}
 h2{font-size:clamp(24px,6.8vw,30px);line-height:1.18}
 h3{font-size:19px}
 .band{padding:52px 0}
 .hero{padding:32px 0 40px}
 .sec-head{margin-bottom:26px}
 .sec-head p,.lead{font-size:17px}
 .btn-row{gap:10px}
 .btn-row .btn{flex:1 1 100%}
 .card{padding:22px 20px 18px}
 .grid{gap:16px}
 table{display:block;overflow-x:auto}
 img{height:auto}
}

/* v2.18 site-wide layer (1 Nov 2026). Loaded after v218-base (a scoped copy of v217.css). Own code only, no libraries. */
/* Review mode: internal codes and review notes are hidden from the public view; add ?review=1 to the URL to see them. */
html:not(.review) .rv{display:none!important}
html.review .rv-pub{display:none!important}
html.review .rv{outline:2px dashed #B4500F;outline-offset:2px}
/* Buttons: one primary colour (brand orange, ink text 5.91:1) and one height (48px) everywhere */
.btn,.nr-rack .rk-btn,.cs-cta{min-height:48px;height:auto;padding:12px 24px;font-size:16px;line-height:1.25;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}
.btn-primary,.band.dark .btn-primary,.nr-rack .rk-btn.solid,.cs-cta{background:#F57E20;color:#14204A;border:1.5px solid #F57E20;font-weight:700;box-shadow:none}
.btn-primary:hover,.nr-rack .rk-btn.solid:hover,.cs-cta:hover{background:#FF9440;border-color:#FF9440;color:#14204A}
.btn-secondary{min-height:48px}
@media (max-width:600px){.btn-row>.btn{min-height:48px;padding:12px 16px;font-size:16px}}
:focus-visible{outline:3px solid #14204A;outline-offset:3px}
.band.dark :focus-visible{outline-color:#FEC623}
/* Tap targets (WCAG 2.2: 24px minimum; 44px on phones) */
.fbase a,.site-footer li a,.site-footer a[href^="mailto"]{display:inline-block;min-height:24px;padding:3px 0}
@media (max-width:760px){.fbase a,.site-footer li a,.site-footer a[href^="mailto"]{min-height:44px;padding:12px 4px;box-sizing:border-box}}
.nl-credit a{display:inline-block;min-height:24px;padding:3px 0}
.chip{min-height:44px}
/* Footer titles are styled paragraphs, not headings */
.site-footer .f-title{font:700 14px/1.3 var(--font-d,inherit);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;color:inherit}
.site-footer .f-title.big{text-transform:none;font-size:22px;letter-spacing:-.01em}
/* Photo credits (Unsplash photographers) */
.pcredit{font-size:14px;line-height:1.4;color:#4A5578;margin:6px 2px 0}
figure.photo figcaption .pcredit{margin:0}
figure.photo figcaption{font-size:14px}
.pcredit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hero-art .pcredit{position:relative;z-index:2;text-align:right}
/* Bookshelf: only course cards and reading lists (.grid.shelf); a simple spine tab on phones */
@media (max-width:599px){main .grid.shelf>.card{border-left:6px solid var(--c,#F57E20);border-radius:6px 16px 16px 6px}main .grid.shelf>.card::before{display:none}}
/* Real diagrams with text alternatives */
.dg{margin:28px 0 8px;max-width:980px}
.dg svg{display:block;width:100%;height:auto}
.dg figcaption{font-size:14px;color:#4A5578;margin-top:8px}
.dg-steps{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.lesson-tl .dg-note{font-weight:600}
@media (max-width:640px){.dg .dg-wide{display:none}.dg .dg-tall{display:block}}
@media (min-width:641px){.dg .dg-tall{display:none}}
/* Teddy: never more than 3 faces per page is enforced in the build; keep spacing tidy where static faces were removed */
.sec-head:not(:has(.teddy)){min-height:0}

/* v2_18 verify fixes: one primary colour + 48px everywhere (header too); single-column CTA rows on phones; 24px minimum tap boxes */
.nav a.btn,.site-header .nav a.btn{min-height:48px}
.nav a.btn.btn-primary{background:#F57E20;border-color:#F57E20;color:#14204A}
.nav a.btn.btn-primary:hover{background:#FF9440;border-color:#FF9440;color:#14204A}
@media (max-width:480px){.btn-row{grid-template-columns:1fr}.btn-row>.btn{grid-column:1/-1;white-space:nowrap;overflow-wrap:normal}}
input[type=checkbox],input[type=radio]{min-width:24px;min-height:24px}

/* MKT-FR-02 FR2-04: sticky course stage. html/body overflow-x:hidden and .band overflow:hidden turned them into scroll containers, so the sticky stage scrolled away. clip keeps the no-sideways-scroll guard without making a scroll container. */
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:visible}body{max-width:100%}}
.band:has(.cs-story),.cs-band{overflow:clip;overflow-x:clip;overflow-y:visible}
/* MKT-FR-02 FR2-05: coming-soon heroes in one column */
.hero.nc-hero .wrap{display:block}.hero.nc-hero .wrap>*{max-width:820px}
.hero.nc-hero .nc-pill{margin-bottom:14px}