/* jasoncolapietro.com only. Loaded by src/build.py on every generated page of
   the hub (body.hub; body.hub-home on the home page) after the shared estate
   CSS, so every rule here is scoped to .hub and overrides the shared baseline
   without touching the sixteen other hosts. The markup it styles is the
   generator's own: no element is renamed, only wrapped (div.hero, div.facets)
   or added (nav.hub-nav, ul.proof). */

.hub{--bg:#0B0D14;--bg2:#090A0D;--panel:#0F121B;--panel-2:#121623;--ink:#E8E9EE;--mute:#9AA1B2;--line:#1E2331;--line-2:#2A3144;--accent:#1B4F8A;--accent-2:#2E6CB5;--slate:#3A6090;--glow:rgba(27,79,138,.28)}
.hub{font-size:17px}
.hub .wrap{max-width:72rem;padding:0 clamp(1.1rem,4vw,2.5rem)}

/* Header: name mark, role, and the site's own pages. */
.hub header.top{position:sticky;top:0;z-index:20;background:rgba(11,13,20,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hub header.top .wrap{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"site job nav cta";align-items:center;gap:.5rem 1.25rem;padding-top:.8rem;padding-bottom:.8rem}
.hub header.top .site{grid-area:site;font-size:1.3rem;letter-spacing:-.01em}
.hub header.top .job{grid-area:job;font-size:.85rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub nav.hub-nav{grid-area:nav;display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
.hub nav.hub-nav::-webkit-scrollbar{display:none}
.hub nav.hub-nav a{font-size:.88rem;color:var(--mute);padding:.4rem .6rem;border-radius:6px;white-space:nowrap;text-decoration:none}
.hub nav.hub-nav a:hover,.hub nav.hub-nav a[aria-current="page"]{color:var(--ink);background:var(--panel-2)}
.hub header.top a.hub-cta{grid-area:cta;font-size:.88rem;font-weight:500;color:#fff;background:var(--accent);padding:.45rem .8rem;border-radius:6px;white-space:nowrap;text-decoration:none}
.hub header.top a.hub-cta:hover{background:var(--accent-2)}
@media(max-width:1400px){.hub header.top .job{display:none}}
@media(max-width:980px){.hub header.top .wrap{grid-template-columns:1fr auto;grid-template-areas:"site cta" "nav nav";gap:.35rem 1rem}.hub nav.hub-nav{margin:0 calc(-1 * clamp(1.1rem,4vw,2.5rem));padding:0 clamp(1.1rem,4vw,2.5rem)}.hub nav.hub-nav a:first-child{padding-left:0}}

/* Page frame and type. */
.hub main{padding:0 0 4rem;animation:none}
.hub main>.wrap{padding-top:3.5rem}
.hub h1{font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 1.25rem;text-wrap:balance}
.hub h2{font-size:1.55rem;letter-spacing:-.01em;margin:0 0 .75rem}
.hub .lede{font-size:1.15rem;line-height:1.55;color:#C9CDD8;padding-left:0;border-left:0;margin:0 0 1.75rem;max-width:62ch}
.hub section p{color:#C9CDD8}
.hub a{text-decoration-thickness:1px}

/* Home hero: copy on the left, portrait on the right, brand grid behind. */
.hub-home main{background:
  radial-gradient(60rem 28rem at 12% -10%,var(--glow),transparent 60%),
  linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/4rem 4rem,
  linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/4rem 4rem;
  background-repeat:no-repeat,repeat,repeat}
.hub-home main{-webkit-mask-image:none}
.hub-home .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);gap:2rem 4rem;align-items:start;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid var(--line)}
.hub-home .hero-copy{min-width:0}
.hub-home .hero .lede{margin-bottom:1.5rem}
.hub-home .hero-cta{margin:0 0 1rem;font-size:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.hub-home .hero-cta a{font-size:1rem;text-decoration:none;font-weight:500;padding:.65rem 1.05rem;border-radius:8px;border:1px solid var(--line-2);color:var(--ink);background:var(--panel)}
.hub-home .hero-cta a:first-child{background:var(--accent);border-color:var(--accent);color:#fff}
.hub-home .hero-cta a:first-child:hover{background:var(--accent-2);border-color:var(--accent-2)}
.hub-home .hero-cta a:hover{border-color:var(--slate)}
.hub-home .hero-copy>p:not(.lede):not(.hero-cta){font-size:.92rem;color:var(--mute);margin:0}
.hub-home .hero-copy>p:not(.lede):not(.hero-cta) a{color:var(--mute)}
.hub-home .hero-copy>p:not(.lede):not(.hero-cta) a:hover{color:var(--ink)}
.hub-home .portrait{margin:0;max-width:none;position:relative}
.hub-home .portrait img{border-radius:12px;border:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hub-home .portrait::before{content:"";position:absolute;inset:-10px auto auto -10px;width:3rem;height:3rem;border-top:2px solid var(--slate);border-left:2px solid var(--slate);border-radius:12px 0 0 0;pointer-events:none}
.hub-home .portrait figcaption{font-size:.8rem}
@media(max-width:860px){.hub-home .hero{grid-template-columns:1fr;gap:1.5rem}.hub-home .portrait{max-width:13rem;order:-1}.hub-home .portrait::before{display:none}}

/* Proof strip: the figures from the lede, each linked to its record. */
.hub-home ul.proof{list-style:none;margin:-.5rem 0 3rem;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hub-home ul.proof li{background:var(--panel);margin:0;padding:1.1rem 1.25rem;min-width:0}
.hub-home ul.proof a{display:block;text-decoration:none;color:inherit}
.hub-home ul.proof strong{display:block;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:2.4rem;line-height:1;letter-spacing:-.02em}
.hub-home ul.proof span{display:block;margin-top:.4rem;font-size:.84rem;color:var(--mute);line-height:1.35}
.hub-home ul.proof a:hover strong{color:#AFC9EE}
@media(max-width:860px){.hub-home ul.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-home ul.proof li:last-child{grid-column:1/-1}}

/* Facets: the seven short sections become a two-column card grid. */
.hub-home .facets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0 0 3rem;counter-reset:facet}
.hub-home .facets>section{margin:0;padding:1.4rem 1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0}
.hub-home .facets>section:first-child{grid-column:1/-1;background:linear-gradient(135deg,var(--panel-2),var(--panel));border-color:var(--line-2)}
.hub-home .facets>section h2{margin:0 0 .6rem;font-size:1.35rem}
.hub-home .facets>section h2::before{counter-increment:facet;content:counter(facet,decimal-leading-zero);display:block;font-family:"Instrument Sans",system-ui,sans-serif;font-size:.72rem;letter-spacing:.14em;color:var(--slate);margin-bottom:.5rem}
.hub-home .facets>section p{margin:0;font-size:.98rem;line-height:1.6}
@media(max-width:760px){.hub-home .facets{grid-template-columns:1fr}}

/* Linked groups: open-source work, books, records. */
.hub section.group{margin:0 0 3rem}
.hub section.group h2{margin-bottom:.35rem}
.hub section.group>p{color:var(--mute);margin:0 0 1.25rem;max-width:70ch}
.hub section.group ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.75rem}
.hub section.group li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem 1.15rem;min-width:0;transition:border-color .15s}
.hub section.group li:hover{border-color:var(--slate)}
.hub section.group li a{font-size:1.12rem;line-height:1.3;text-decoration:none}
.hub section.group li a:hover{text-decoration:underline}
.hub section.group li span{font-size:.88rem;line-height:1.5;margin-top:.35rem;color:var(--mute)}
/* A group whose items carry covers is a shelf. */
.hub section.group ul:has(> li > img){grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem}
.hub section.group ul:has(> li > img) li{padding:1rem}
.hub section.group li>img{width:100%;height:auto;aspect-ratio:5/8;object-fit:cover;border-radius:6px;border:1px solid var(--line-2);background:var(--panel-2);margin-bottom:.85rem}
.hub section.group ul:has(> li > img) li a{font-family:"Instrument Serif",Georgia,serif;font-size:1.1rem}

/* Questions: two columns of question and answer on wide screens. */
.hub section.faq{margin:0 0 3rem}
.hub section.faq h3{font-size:1.02rem;margin:1.1rem 0 .3rem;break-after:avoid}
.hub section.faq p{font-size:.95rem;line-height:1.6;break-inside:avoid;margin:0 0 .5rem}
@media(min-width:900px){.hub section.faq{columns:2;column-gap:3rem}.hub section.faq h2{column-span:all}}

/* Records lists (the press kit's coverage, when rendered on the hub). */
.hub section.records ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.75rem;padding:0;list-style:none}
.hub section.records li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem 1.15rem}

/* Suede in the news: three publisher cards. */
.hub .press-highlights{padding-block:0;margin:0 0 3rem}
.hub .press-highlights-heading h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
.hub .press-highlights-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub .press-highlight{background:var(--panel);border-radius:12px}
.hub .press-publisher{font-size:1.15rem}
@media(max-width:900px){.hub .press-highlights-grid{grid-template-columns:1fr}}

/* The shared accomplishments record, matched to the hub's type. */
.hub .accomplishments{padding-block:0;margin:0 0 3rem}
.hub .accomplishments h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.02em}
.hub .accomplishments .accomplishments-kicker{color:var(--slate)}
.hub .accomplishments .accomplishments-intro{color:var(--mute)}
.hub .accomplishments--narrow .accomplishments-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.hub .accomplishments .accomplishment{border:1px solid var(--line);border-radius:12px;padding:1.25rem 1.4rem;background:var(--panel)}
.hub .accomplishments .accomplishment h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.3rem}
.hub .accomplishments .accomplishment .accomplishment-meta{color:var(--slate);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}
.hub .accomplishments .accomplishment p{color:#C9CDD8;font-size:.95rem}
.hub .accomplishments .accomplishment-links li{font-size:.84rem}
.hub .accomplishments .accomplishment-links a{color:var(--mute)}
.hub .accomplishments .accomplishment-links a:hover{color:var(--ink)}
.hub .accomplishments .accomplishment-links img{display:none!important}
.hub .accomplishments .accomplishments-visuals h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:1.3rem}
.hub .accomplishments .accomplishments-partner{border-radius:10px}
@media(max-width:759px){.hub .accomplishments--narrow .accomplishments-list{grid-template-columns:1fr}}

/* Training and certifications: a compact grid instead of a long list. */
.hub #training-certifications{margin:0 0 3rem}
.hub #training-certifications .section-heading p{color:var(--mute);font-size:.95rem;max-width:70ch}
.hub #training-certifications ul{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.6rem}
.hub #training-certifications li{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.75rem .9rem;font-size:.92rem;line-height:1.35;min-width:0}
.hub #training-certifications li a{text-decoration:none}
.hub #training-certifications li a:hover{text-decoration:underline}
.hub #training-certifications li p{margin:.35rem 0 0;font-size:.76rem;color:var(--mute);line-height:1.4;overflow-wrap:anywhere}
.hub #training-certifications>p:last-child{font-size:.9rem;color:var(--mute)}

/* Badges and credential galleries keep their own stylesheets; widen only. */
.hub .badge-gallery,.hub .credential-gallery{max-width:none}

/* Continue: the next pages as a grid of arrows. */
.hub nav.next{margin-top:1rem;padding-top:2rem}
.hub nav.next ul{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.6rem}
.hub nav.next a{display:block;font-size:1.05rem;text-decoration:none;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:border-color .15s}
.hub nav.next a::after{content:" →";color:var(--slate)}
.hub nav.next a:hover{border-color:var(--slate)}

/* Footer. */
.hub footer{padding:2.5rem 0 3rem}
.hub footer .wrap{gap:1rem}
.hub footer .wrap>p:first-child{font-size:1.02rem;color:#C9CDD8;max-width:70ch}

/* Inner pages: prose stays a readable measure; grids use the full width. */
.hub:not(.hub-home) main>.wrap>h1,.hub:not(.hub-home) main>.wrap>.lede,.hub:not(.hub-home) main>.wrap>section:not(.group):not(.faq):not(.accomplishments):not(#training-certifications):not(.records){max-width:46rem}
.hub:not(.hub-home) main>.wrap>section:not(.group)+section:not(.group) h2{margin-top:2rem}
.hub:not(.hub-home) main>.wrap>section:not(.group):not(.faq) p{font-size:1.02rem;line-height:1.65}
.hub:not(.hub-home) section.faq{max-width:none}
.hub:not(.hub-home) main>.wrap>section:not(.group):not(.faq):not(.accomplishments):not(#training-certifications)>img{border-radius:8px;border:1px solid var(--line-2)}

@media(prefers-reduced-motion:no-preference){.hub main{animation:in .5s ease-out both}}
@media print{.hub header.top{position:static}.hub-home main{background:none}}

/* Inner pages: a section that opens with a cover sets the cover beside its text. */
.hub:not(.hub-home) main>.wrap>section:has(>img){display:grid;grid-template-columns:6.5rem minmax(0,1fr);column-gap:1.5rem;align-items:start;margin-bottom:1rem}
.hub:not(.hub-home) main>.wrap>section:has(>img)>h2{grid-column:1/-1}
.hub:not(.hub-home) main>.wrap>section:has(>img)>img{width:6.5rem;height:auto;aspect-ratio:5/8;object-fit:cover}