/* Showcase styles are self-contained so content does not depend on a CDN reset. */
.showcase-site, .showcase-site *, .showcase-site *::before, .showcase-site *::after { box-sizing:border-box; }
.showcase-site { margin:0; min-height:100vh; display:flex; flex-direction:column; background:#fcfcfc; color:#151515; font-size:16px; line-height:1.5; }
.showcase-site :is(h1,h2,h3,h4,h5,h6,p,ul,ol) { margin:0; }
.showcase-site a { color:inherit; text-decoration:none; }
.showcase-site button, .showcase-site select { font:inherit; }
.showcase-site button { cursor:pointer; }
.showcase-site [hidden] { display:none !important; }
.showcase-site ::selection { color:#fff; background:#151515; }
.showcase-site :is(a,button,select,[tabindex="0"]):focus-visible { outline:3px solid #151515; outline-offset:5px; }
.showcase-site svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.showcase-skip { position:fixed; z-index:100; top:12px; left:16px; transform:translateY(-180%); padding:12px 20px; border:2px solid #151515; border-radius:6px; background:#fff; font-weight:600; }
.showcase-skip:focus { transform:none; }
.showcase-site-header { display:flex; align-items:center; justify-content:space-between; gap:12px 32px; padding:14px 32px; border-bottom:1px solid #151515; background:#fcfcfc; }
.showcase-brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-family:Outfit,Inter,sans-serif; font-size:20px; font-weight:800; letter-spacing:-.04em; }
.showcase-brand > span { width:10px; height:10px; border-radius:50%; background:#151515; }
.showcase-site-nav { display:flex; align-items:center; gap:28px; }
.showcase-site-nav a { display:flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#595959; }
.showcase-site-nav a[aria-current] { color:#151515; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.showcase-site-nav a:hover { color:#151515; text-decoration:underline; text-underline-offset:6px; }
.showcase-main { width:100%; max-width:1184px; flex:1; margin:0 auto; padding:0 32px; }
.showcase-main:focus { outline:none; }
.showcase-site-footer { width:calc(100% - 64px); max-width:1120px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px; margin:72px auto 0; padding:24px 0; border-top:1px solid #151515; font-size:14px; font-weight:600; }
.showcase-site-footer nav { display:flex; gap:24px; }
.showcase-site-footer a { display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.showcase-site-footer a:hover { text-decoration:underline; text-underline-offset:5px; }

/* One type scale and one action style across the collection and detail pages. */
.showcase-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 18px; border:1.5px solid #151515; border-radius:8px; background:#fff; color:#151515; box-shadow:3px 3px 0 #151515; font-size:16px; font-weight:600; line-height:1.4; text-align:center; transition:background .15s,color .15s,box-shadow .15s,transform .15s; }
.showcase-site .showcase-button-primary { background:#151515; color:#fff; }
@media (hover:hover) {
  .showcase-button:hover { background:#151515; color:#fff; box-shadow:5px 5px 0 #151515; transform:translate(-2px,-2px); }
  .showcase-button-primary:hover { background:#353535; }
}
.showcase-button:active { box-shadow:none; transform:translate(3px,3px); }
.showcase-hero { max-width:900px; margin:0 auto; padding:64px 0 56px; text-align:center; }
.showcase-hero h1 { font-family:Outfit,Inter,sans-serif; font-size:clamp(56px,8vw,96px); font-weight:800; letter-spacing:-.055em; line-height:1; text-transform:uppercase; }
.showcase-hero .showcase-intro { max-width:520px; margin:24px auto 0; color:#595959; font-size:20px; line-height:1.6; text-wrap:pretty; }
.showcase-projects { padding-bottom:8px; }
.showcase-controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px 24px; padding-bottom:24px; border-bottom:1px solid #151515; }
.showcase-filters { display:flex; flex-wrap:wrap; gap:10px; }
.showcase-filters button { min-height:46px; padding:11px 18px; border:1px solid #bcbcbc; border-radius:8px; background:#fff; font-size:15px; font-weight:600; line-height:1.4; transition:background .15s,border-color .15s,color .15s; }
.showcase-filters button:hover { border-color:#151515; background:#eee; }
.showcase-filters button[aria-pressed="true"] { color:#fff; background:#151515; border-color:#151515; }
.showcase-sort { display:flex; align-items:center; gap:12px; position:relative; font-size:15px; }
.showcase-sort label { color:#595959; }
.showcase-sort select { appearance:none; min-height:46px; padding:11px 42px 11px 14px; border:1px solid #bcbcbc; border-radius:8px; background:#fff; font-size:15px; font-weight:500; color:#151515; cursor:pointer; }
.showcase-sort select:hover { border-color:#151515; }
.showcase-sort svg { position:absolute; right:14px; pointer-events:none; width:18px; height:18px; }
.showcase-projects .showcase-count { margin:22px 0; color:#595959; font-size:14px; }
.showcase-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:stretch; }
.showcase-card { min-width:0; display:flex; flex-direction:column; padding:30px; border:1.5px solid #151515; border-radius:12px; background:#fff; box-shadow:4px 4px 0 #151515; overflow-wrap:anywhere; }
.project-status { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #c4c4c4; border-radius:6px; font-size:13px; font-weight:600; line-height:1.4; white-space:nowrap; }
.status-in-progress { color:#454545; background:#fff; }
.status-in-progress > span { width:7px; height:7px; border:1.5px solid currentColor; border-radius:50%; }
.status-completed { background:#ededed; color:#151515; }
.status-completed > span { font-size:13px; line-height:1; }
.showcase-card h2 { margin:20px 0 14px; font-size:28px; font-weight:700; line-height:1.2; letter-spacing:-.035em; }
.showcase-card-primary:hover { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.showcase-card-description { color:#595959; font-size:16px; line-height:1.75; }
.showcase-card-footer { display:flex; flex-direction:column; margin-top:auto; padding-top:26px; }
.showcase-contributors { display:flex; align-items:baseline; gap:10px; padding-top:18px; border-top:1px solid #dedede; font-size:15px; }
.showcase-author-label { color:#595959; font-size:14px; flex-shrink:0; }
.showcase-author-list { display:flex; flex-wrap:wrap; gap:0 18px; padding:0; list-style:none; min-width:0; }
.showcase-author-list li { min-width:0; max-width:100%; }
.showcase-author { display:inline-block; padding:8px 0; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.showcase-author span { display:inline-block; font-size:15px; color:#595959; }
.showcase-author:hover { text-decoration:underline; text-underline-offset:4px; }
.showcase-card-footer .showcase-published { margin:4px 0 0; color:#595959; font-size:14px; line-height:1.6; }
.showcase-card-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:24px; margin-top:auto; }
.showcase-card-links .showcase-button { flex:1 1 auto; }
.showcase-grid-single { grid-template-columns:minmax(0,1fr); }
.showcase-grid-single .showcase-card { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(310px,1fr); gap:36px; padding:36px; }
.showcase-grid-single .showcase-card-content { padding-right:8px; }
.showcase-grid-single .showcase-card-footer { margin:0; padding:0 0 0 36px; border-left:1px solid #dedede; }
.showcase-grid-single .showcase-contributors { padding:0; border:0; }
.showcase-empty { padding:56px 24px; border:1px dashed #bcbcbc; border-radius:12px; text-align:center; }
.showcase-empty h2 { font-size:26px; line-height:1.3; }
.showcase-empty p { max-width:440px; margin:14px auto 24px; font-size:16px; line-height:1.7; color:#595959; }
.showcase-noscript { padding-top:24px; font-size:14px; color:#595959; }

/* Article typography stays aligned to a comfortable reading measure. */
.project-detail { max-width:960px; margin:0 auto; padding-top:40px; }
.project-breadcrumb { margin-bottom:48px; }
.project-back { font-size:16px; }
.project-heading { text-align:center; }
.project-heading h1 { font-family:Outfit,Inter,sans-serif; font-size:clamp(40px,6vw,72px); font-weight:700; letter-spacing:-.045em; line-height:1.08; overflow-wrap:anywhere; text-wrap:balance; }
.project-heading .project-lede { max-width:740px; margin:24px auto 0; color:#595959; font-size:20px; line-height:1.65; text-wrap:pretty; }
.project-detail-meta { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px 20px; margin:24px 0 36px; color:#595959; font-size:14px; line-height:1.6; }
.project-byline { max-width:760px; display:flex; justify-content:space-between; align-items:center; gap:24px 32px; margin:0 auto 44px; padding:24px 0; border-top:1px solid #dedede; border-bottom:1px solid #dedede; text-align:left; }
.project-authors { min-width:0; }
.project-authors .showcase-author-list { font-size:16px; }
.project-repository { flex-shrink:0; }
.project-prose { max-width:760px; margin:0 auto; font-size:18px; line-height:1.85; overflow-wrap:anywhere; }
.project-prose > :first-child { margin-top:0; }
.project-prose > :last-child { margin-bottom:0; }
.project-prose :is(h1,h2) { margin:44px 0 18px; font-size:30px; font-weight:700; letter-spacing:-.035em; line-height:1.25; }
.project-prose h3 { margin:32px 0 14px; font-size:24px; font-weight:650; line-height:1.35; }
.project-prose :is(h4,h5,h6) { margin:28px 0 12px; font-size:20px; line-height:1.4; }
.project-prose :is(p,ul,ol,blockquote,pre,table,figure) { margin:20px 0; }
.project-prose :is(ul,ol) { padding-left:26px; }
.project-prose li + li { margin-top:8px; }
.project-prose li > :is(ul,ol) { margin:8px 0; }
.project-prose a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.project-prose a:hover { text-decoration-thickness:2px; }
.project-prose :is(img,video) { display:block; max-width:100%; height:auto; margin:28px auto; border:1px solid #dedede; border-radius:8px; }
.project-prose iframe { display:block; width:100%; max-width:100%; aspect-ratio:16/9; height:auto; border:0; margin:28px 0; }
.project-prose figure { margin-inline:0; }
.project-prose figcaption { margin-top:12px; font-size:14px; line-height:1.6; color:#595959; text-align:center; }
.project-prose pre { max-width:100%; padding:22px; background:#f0f0f0; border:1px solid #dedede; border-radius:8px; overflow-x:auto; font-size:14px; line-height:1.7; }
.project-prose :not(pre) > code { background:#ededed; padding:2px 5px; border-radius:3px; font-size:.9em; }
.project-prose blockquote { margin-inline:0; border-left:3px solid #151515; padding:4px 0 4px 24px; color:#595959; }
.project-prose blockquote p { margin:8px 0; }
.project-table { max-width:100%; overflow-x:auto; margin:20px 0; }
.project-prose table { width:100%; margin:0; border-collapse:collapse; font-size:16px; overflow-wrap:normal; }
.project-prose :is(th,td) { border:1px solid #ccc; padding:12px 16px; text-align:left; }
.project-prose th { background:#f0f0f0; }
.project-prose hr { margin:36px 0; border:0; border-top:1px solid #dedede; }
.project-next { max-width:760px; margin:56px auto 0; }
.project-explore { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:56px; padding:10px 24px; border:1.5px solid #151515; border-radius:10px; background:#fff; box-shadow:4px 4px 0 #151515; font-size:24px; font-weight:650; letter-spacing:-.025em; line-height:1.3; transition:background .15s,color .15s; }
.project-explore svg { width:28px; height:28px; }
.project-explore:hover { background:#151515; color:#fff; }
.project-explore:active { background:#353535; color:#fff; }

@media(max-width:900px) {
  .showcase-grid-single .showcase-card { gap:28px; padding:28px; grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr); }
  .showcase-grid-single .showcase-card-footer { padding-left:28px; }
  .showcase-card { padding:26px; }
}
@media(max-width:720px) {
  .showcase-site-header { flex-direction:column; gap:0; padding:8px 20px; }
  .showcase-site-nav { justify-content:center; gap:24px; }
  .showcase-main { padding:0 24px; }
  .showcase-site-footer { width:calc(100% - 48px); margin-top:56px; }
  .showcase-hero { padding:48px 0 40px; }
  .showcase-hero .showcase-intro { max-width:440px; font-size:18px; }
  .showcase-controls { gap:20px; }
  .showcase-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .showcase-grid-single .showcase-card { display:flex; gap:0; padding:28px; }
  .showcase-grid-single .showcase-card-content { padding:0; }
  .showcase-grid-single .showcase-card-footer { margin-top:auto; padding:26px 0 0; border-left:0; }
  .showcase-grid-single .showcase-contributors { padding-top:18px; border-top:1px solid #dedede; }
  .project-detail { padding-top:28px; }
  .project-breadcrumb { margin-bottom:36px; }
  .project-detail-meta { gap:12px 16px; margin-bottom:28px; }
  .project-byline { margin-bottom:36px; }
}
@media(max-width:480px) {
  .showcase-site-nav { gap:16px; }
  .showcase-site-nav a { font-size:13px; letter-spacing:.02em; }
  .showcase-main { padding:0 20px; }
  .showcase-site-footer { width:calc(100% - 40px); font-size:14px; }
  .showcase-hero { padding:36px 0; }
  .showcase-hero h1 { font-size:clamp(48px,12.8vw,62px); }
  .showcase-hero .showcase-intro { margin-top:20px; font-size:18px; }
  .showcase-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
  .showcase-filters button { padding:12px 6px; font-size:14px; }
  .showcase-sort { width:100%; justify-content:space-between; }
  .showcase-sort select { min-width:170px; }
  .showcase-card, .showcase-grid-single .showcase-card { padding:24px; }
  .showcase-card h2 { font-size:26px; }
  .showcase-card-links { gap:12px; }
  .showcase-card-links .showcase-button { padding:12px; }
  .project-heading h1 { font-size:40px; }
  .project-heading .project-lede { font-size:18px; }
  .project-byline { flex-direction:column; align-items:stretch; gap:18px; }
  .project-byline .project-repository { align-self:flex-start; }
  .project-prose { font-size:17px; line-height:1.8; }
  .project-prose :is(h1,h2) { font-size:27px; margin-top:36px; }
  .project-next { margin-top:44px; }
  .project-explore { padding:10px 18px; font-size:21px; gap:16px; }
}
@media(max-width:360px) {
  .showcase-site-header { padding-inline:16px; }
  .showcase-site-nav { gap:12px; }
  .showcase-main { padding-inline:16px; }
  .showcase-site-footer { width:calc(100% - 32px); }
  .showcase-card, .showcase-grid-single .showcase-card { padding:20px; }
  .showcase-card-links .showcase-button { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .showcase-site *, .showcase-site *::before, .showcase-site *::after { animation:none !important; transition:none !important; }
  .showcase-button:hover, .showcase-button:active { transform:none; }
}