/* ==========================================================================
   THE PROTOTYPE'S SHARED VOCABULARY
   Classes more than one page family uses: the page-top band, the breadcrumb,
   the arrow link, the feature-card trio, the check list and the two tinted
   section surfaces. They lived in course-cc.css, which only loads on a product
   page — so the pages ported whole from the prototype rendered them unstyled.

   Enqueued after shop.css on a product page and after global.css elsewhere, so
   the cascade a product page had before this split is unchanged: shop.css still
   overrides these, and course-cc.css still overrides shop.css.
   ========================================================================== */

/* ---------- PAGE-TOP BAND (.phead) ----------
   Light, always: --wash with the node mesh over it. The 404/utility "field"
   recipe — faint purple lines, strong purple dots — scoped to this one band. */
.phead{position:relative;
  background-image:
    radial-gradient(circle at 0 0, rgba(140,138,229,.55) 1.9px, transparent 2px),
    linear-gradient(to right, rgba(140,138,229,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,138,229,.09) 1px, transparent 1px),
    var(--wash);
  background-size:46px 46px,46px 46px,46px 46px,100% 100%;
  border-bottom:1px solid var(--slate-200)}
/* The mesh is a backdrop, not a row. Unpositioned it is an in-flow block adding its
   own 150px to the band — the third time this has bitten: the only bare
   .nodegrid{position:absolute} lives in home.css, which is enqueued on the front
   page alone. Positioned here so every page using this band is covered. */
.phead>.nodegrid{position:absolute;inset:0;z-index:0;pointer-events:none}
.phead .wrap{position:relative;z-index:1;padding-top:72px;padding-bottom:80px}
@media(min-width:1024px){.phead .wrap{padding-top:96px;padding-bottom:104px}}
.phead h1{font-size:2.375rem;color:var(--navy-900);margin-top:14px}
@media(min-width:768px){.phead h1{font-size:3rem}}
.phead h1 .em{color:var(--brand-700)}
.phead .lead{margin-top:18px;font-size:1.125rem}
.phead .phead-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.phead.narrow .wrap{max-width:820px}

/* breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-600)}
.crumbs a{color:var(--slate-600)}
.crumbs a:hover{color:var(--accent-800)}
.crumbs svg{width:13px;height:13px;color:var(--slate-400)}
.crumbs .here{color:var(--brand-700)}

.sec.paper{background:var(--paper-50)}

/* plain inline text link with a teal arrow — the catalogue "view all" treatment */
.arrowlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9375rem;color:var(--accent-800)}
.arrowlink svg{width:16px;height:16px;transition:transform .16s ease-out}
.arrowlink:hover{text-decoration:underline}
.arrowlink:hover svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.arrowlink svg{transition:none}.arrowlink:hover svg{transform:none}}
/* The same link pointing back the way it came. Lives here rather than with one
   page's styles because three screens now end with it. */
.arrowlink--back svg{transform:scaleX(-1)}
.arrowlink--back:hover svg{transform:scaleX(-1) translateX(3px)}

/* ---------- WHAT IT IS / WHO IT'S FOR ----------
   The audience trio. Ported from the prototype's base.css `.feat` block, which
   nothing else in this theme had needed yet. Two columns from 720px, three from
   1024px — three 26px cards side by side get too narrow to read below that. */
.feat{display:grid;gap:18px;grid-template-columns:1fr;margin-top:40px}
/* The prototype tightens this one instance: the intro paragraph above it already
   carries the breathing room, so the shared 40px reads as a gap. */
.cc-feat{margin-top:28px}
@media(min-width:720px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.feat.three{grid-template-columns:repeat(3,1fr)}}
.fitem{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-card);padding:26px;box-shadow:var(--sh-rest);transition:border-color .18s ease-out,box-shadow .18s ease-out}
.fitem:hover{border-color:var(--brand-500);box-shadow:var(--sh-hover)}
.fitem .ic{width:46px;height:46px;border-radius:10px;background:var(--brand-50);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.fitem .ic svg{width:22px;height:22px;color:var(--brand-600)}
.fitem.teal .ic{background:var(--accent-100)}
.fitem.teal .ic svg{color:var(--accent-800)}
.fitem h3{color:var(--navy-900);font-size:1.06rem;margin-bottom:8px}
.fitem p{font-size:.92rem;color:var(--slate-600)}
@media(prefers-reduced-motion:reduce){.fitem{transition:none}}

/* Plain check list. */
.checks{list-style:none;display:grid;gap:12px;margin-top:24px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;color:var(--slate-600)}
.checks li svg{width:18px;height:18px;color:var(--accent-800);flex-shrink:0;margin-top:3px}
.checks.brand li svg{color:var(--brand-600)}

.sec.brandtint{background:var(--brand-50);border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200)}

/* ---------- PARTNER LOGO BAND ----------
   Shared by the masterclass library and the events page, so it lives here
   rather than in either one's stylesheet.

   Every mark is drawn into a fixed box with object-fit:contain. The sixteen
   source files run from 400x400 squares to a 1920x1080 card, and without a box
   they set their own widths and the grid comes out ragged. The box also means
   the row reserves its full height before a single logo has loaded.

   Greyscale until hover, the same treatment the About hero gives the
   accreditation marks: sixteen logos in sixteen brand colours would be the
   loudest thing on the page, and the point of the wall is the names. */
.partners-in{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media(min-width:900px){.partners-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}
.partners-say h2{color:var(--navy-900);font-size:1.75rem;line-height:1.2;margin-bottom:16px;text-wrap:balance}
@media(min-width:900px){.partners-say{position:sticky;top:96px}.partners-say h2{font-size:2rem}}
.partners-say p{font-size:.96rem;color:var(--slate-600);max-width:44ch}

.partners-row{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px;margin:0;padding:0}
@media(min-width:560px){.partners-row{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.partners-row{grid-template-columns:repeat(4,1fr);gap:28px 20px}}
.partners-row li{display:flex;align-items:center;justify-content:center}
/* 76px, not 58. Half the source files are square with the wordmark padded
   inside them, so at 58px those marks resolved to a 58px-wide sliver in a
   154px cell while the 700x300 files filled theirs. Taller lets the squares
   scale up; the wide ones stay capped by the cell width, which is what keeps
   the row even. */
.partners-row img{display:block;width:100%;height:64px;object-fit:contain;object-position:center;filter:grayscale(1);opacity:.72;transition:filter .18s ease-out,opacity .18s ease-out}
@media(min-width:900px){.partners-row img{height:76px}}
.partners-row li:hover img{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.partners-row img{transition:none}}