/* progplan_v1 · BOOKSHELF (Rowan 12:55 plan items 1–3, via Relay). LOCAL BUILD. Loaded after allprograms.css + glass_v1.css; allprograms.* untouched.
   Rollback: remove the <link> to this file (and the pp-shelf.js <script>) from programs.html. */
/* 1a. Smaller 'Online course' tag (stays >= 10px; #3E4866 on #FBF8F2 = 9.0:1) */
.ap-cf.pp-shelf .ap-book .ap-cover .ap-plate.ap-plate-st{font:700 10px/1.2 var(--font,inherit);letter-spacing:.05em;padding:.28em .7em;
  bottom:calc(18.4cqw - .7em);box-shadow:0 1px 2px rgba(20,32,74,.14)}
/* 1b. Coming-soon books: small corner ribbon (top-right; the imprint sits top-left). White on #BF5508 = 4.65:1 */
.ap-cover .pp-ribbon{position:absolute;top:0;right:0;width:62cqw;height:62cqw;overflow:hidden;pointer-events:none;z-index:3;border-top-right-radius:10px}
.ap-cover .pp-ribbon span{position:absolute;top:calc(21cqw - .92em);right:-29cqw;width:100cqw;transform:rotate(45deg);background:#BF5508;color:#fff;text-align:center;
  font:800 clamp(10px,4.2cqw,11px)/1 var(--font,inherit);letter-spacing:.03em;text-transform:uppercase;padding:.42em 0;white-space:nowrap;
  box-shadow:0 2px 5px rgba(20,32,74,.28)}
/* 3. Centre book (Rowan 13:11, v3): orange Enroll centred, 'See the course' stacked UNDER it (centred, all widths), chips line below. No arrows. */
.ap-cf.pp-shelf .ap-book,.ap-cf.pp-shelf .ap-book:has(.ap-enroll){display:grid;grid-template-columns:100cqw;justify-content:center;align-items:center;
  row-gap:0;container-type:inline-size}
.ap-cf.pp-shelf .ap-book>.ap-cover,.ap-cf.pp-shelf .ap-book>.ap-ledge{grid-column:1;width:100cqw;justify-self:center;box-sizing:border-box}
.ap-cf.pp-shelf .ap-book>.ap-enroll{grid-column:1;grid-row:2;justify-self:center;margin:14px 0 0;padding:6px 22px;min-height:32px;font:700 14px/20px var(--font,inherit)}
.ap-cf.pp-shelf .ap-book>.ap-see{grid-column:1;grid-row:3;justify-self:center;white-space:nowrap;margin:8px 0 8px;font-size:14px}
.ap-cf.pp-shelf .ap-book:not(:has(.ap-enroll))>.ap-see{grid-row:2;margin:14px 0 8px}
.ap-cf.pp-shelf .ap-book>.ap-tags{grid-column:1;grid-row:4;justify-self:center;width:max-content;max-width:none;display:flex;flex-wrap:nowrap;gap:6px;margin:0}
.ap-cf.pp-shelf .ap-book:not(:has(.ap-enroll))>.ap-tags{grid-row:3}
.ap-cf.pp-shelf .ap-book>.ap-tags li{font-size:11.5px;line-height:1.5;padding:1px 9px;border-color:#E2D5BD;background:rgba(255,255,255,.85);color:#14204A;white-space:nowrap}
@media (max-width:600px){
  .ap-cf.pp-shelf .ap-book>.ap-enroll{margin:12px 0 0;padding:5px 18px;min-height:30px;font-size:13.5px}
  .ap-cf.pp-shelf .ap-book>.ap-see{margin:6px 0 6px;font-size:13px}
  .ap-cf.pp-shelf .ap-book:not(:has(.ap-enroll))>.ap-see{margin:12px 0 6px}
  .ap-cf.pp-shelf .ap-book>.ap-tags li{font-size:11px;padding:1px 8px}
}
/* 2 (Rowan 13:06 naming rule). Two-line title on every cover band: small uppercase kicker (existing site kicker, e.g. 'AI for Creative')
   over the bold course name, like the site's card label. Courses without a kicker show the bold name only. */
.ap-cover .ap-band .pp-2l{display:flex;flex-direction:column;align-items:center;gap:.5cqw;max-width:100%}
.ap-cover .ap-band .pp-2l .pp-k{display:block;font:700 clamp(10px,4.3cqw,12px)/1.1 var(--font,inherit);letter-spacing:.08em;text-transform:uppercase;color:inherit;opacity:1}
.ap-cover .ap-band .pp-2l .pp-n{display:block;font:800 clamp(10px,7.6cqw,22px)/1.08 var(--font-d,inherit);letter-spacing:-.01em;color:inherit;text-wrap:balance}
/* v3 (Rowan 13:13 mobile bug): Enroll, 'See the course', chips and the arc ornament sit clearly BELOW the centre book (incl. its page edge and
   shadow): taller shelf, fixed-px perspective origin (so the extra height does not move the books), arc placed by pp-shelf.js under the chips. */
.ap-cf.pp-shelf.ap-shelf{height:560px;perspective-origin:50% 188px}
.ap-cf.pp-shelf .ap-book>.ap-enroll{margin-top:30px}
.ap-cf.pp-shelf .ap-book:not(:has(.ap-enroll))>.ap-see{margin-top:30px}
.ap-cfwrap .ap-cf-arc.pp-arc{top:auto;height:40px}
@media (max-width:600px){
  .ap-cf.pp-shelf.ap-shelf{height:440px;perspective-origin:50% 160px}
  .ap-cf.pp-shelf .ap-book>.ap-enroll{margin-top:24px}
  .ap-cf.pp-shelf .ap-book:not(:has(.ap-enroll))>.ap-see{margin-top:24px}
}
/* v3 (Rowan 13:13): subtle texture on the yellow shelf panel. Reuses the panel's own dot grid (same rgba(122,74,18) ink, a touch stronger)
   plus a faint linen weave in the same ink. CSS gradients only, no new colours, no images. */
.ap-cfwrap{background:
  radial-gradient(rgba(122,74,18,.07) 1px,transparent 1.2px) 0 0/4px 4px,
  repeating-linear-gradient(0deg,rgba(122,74,18,.022) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(122,74,18,.018) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 85%,#F3E3BF 0,transparent 60%),linear-gradient(180deg,#FCF6E2,#F4E7C8)}
/* v3 (Rowan 13:15): books look more like books. CSS only, transforms/gradients, no filters. Sizes in cqw of the book (li is the container).
   (1) Thicker page block: cream pages with faint lines on the fore-edge (right) AND the bottom edge; deeper spine shading on the cover. */
.ap-cf.pp-shelf .ap-book::before{left:4cqw;right:-3.6cqw;top:1.6cqw;height:calc(133.333cqw + 2.8cqw);border-radius:0 10px 8px 0;
  background:
   repeating-linear-gradient(0deg,#FBF5E6 0 2px,#E6DCC3 2px 3px) left bottom/100% 4.4cqw no-repeat,
   repeating-linear-gradient(90deg,#FBF5E6 0 2px,#E6DCC3 2px 3px);
  box-shadow:inset -1px -1px 0 #D9CBB3,0 20px 34px -12px rgba(20,32,74,.4)}
.ap-cf.pp-shelf .ap-book .ap-cover{box-shadow:inset 5.2cqw 0 0 rgba(0,0,0,.24),inset 6.2cqw 0 0 rgba(255,255,255,.16),inset 7cqw 0 6px -4px rgba(0,0,0,.18),0 18px 30px -10px rgba(20,32,74,.45)}
.ap-cf.pp-shelf .ap-book.is-c .ap-cover:hover{box-shadow:inset 5.2cqw 0 0 rgba(0,0,0,.24),inset 6.2cqw 0 0 rgba(255,255,255,.16),0 0 0 3px #BF5508,0 26px 40px -12px rgba(20,32,74,.5)}
/* (2) Metal binder rings along the spine: evenly spaced, scaled with the book, below the imprint roundel and clear of the title band text
   (band text starts at 9cqw from the left; rings end at 4.6cqw). Brushed steel gradient + a highlight; mask cuts it into rings. */
.ap-cf.pp-shelf .ap-book::after{content:"";position:absolute;left:-2.2cqw;top:17cqw;width:6.8cqw;height:calc(133.333cqw - 25cqw);z-index:4;pointer-events:none;
  transform:translateZ(1px);
  background:linear-gradient(90deg,#6F7783 0%,#B8BFC9 28%,#F4F6F9 46%,#A3AAB5 64%,#5F6672 100%);
  -webkit-mask:radial-gradient(50% 22% at 50% 50%,#000 88%,transparent 100%) 0 0/100% 9cqw repeat-y;
          mask:radial-gradient(50% 22% at 50% 50%,#000 88%,transparent 100%) 0 0/100% 9cqw repeat-y}
/* Relay 13:29 (b): Ted chip yields while the shelf is under it on phones (class set by pp-shelf.js, programs.html only) */
.hb-chip.pp-yield{transform:translateY(140%)!important;opacity:0!important;pointer-events:none!important;visibility:hidden}
@media (prefers-reduced-motion:reduce){.hb-chip.pp-yield{transition:none}}

/* Rowan 14:02: no arrows on older buttons, scoped to this page set (homepage untouched): footer newsletter link ::after arrow */
html body .site-footer .f-title.big + p a::after{content:none}