/* Sky Porch · open-source hub (/open-source) and project pages (/open-source/*) */
.os-hero{
  padding-block:28px 24px;
}
.os-hero .page-breadcrumbs{
  margin-block-end:40px;
}
.os-hero .hero-title{
  max-inline-size:100%;
  font-size:clamp(36px,5vw,64px);line-height:1.2;
}
.os-hero .hero-sub{
  max-inline-size:760px;font-size:17px;
}
.os-facts{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  list-style:none;margin-block:24px 16px;
  color:var(--muted);font-size:12px;
}
.os-facts li::before{
  content:'✓';color:#178366;margin-inline-end:7px;
}
.os-section{
  padding-block:48px;
}
.os-section .sec-head{
  margin-block-end:28px;
}
.os-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
}
.os-category{
  margin-block-end:12px;color:var(--c-sky);font:600 11px var(--font-mono);letter-spacing:.06em;
}
.os-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--glass-s);border:1px solid var(--glass-br);
  border-radius:24px;box-shadow:var(--sh-glass);
}
.os-preview{
  display:block;aspect-ratio:16/10;overflow:hidden;
  background:#0f1424;border-block-end:1px solid var(--line);
}
.os-preview img{
  inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 0;
  transition:transform .4s ease;
}
.os-card:hover .os-preview img{
  transform:scale(1.02);
}
.os-body{
  display:flex;flex-direction:column;flex:1;
  padding-block:24px 26px;padding-inline:26px;
}
.os-head{
  display:flex;align-items:center;gap:14px;
}
.os-icon{
  inline-size:52px;block-size:52px;border-radius:12px;flex:none;
}
.os-head > div{
  flex:1;min-inline-size:0;
}
.os-head h2{
  font-size:22px;line-height:1.25;
}
.os-head h2 a{
  color:inherit;text-decoration:none;
}
.os-head h2 a:hover{
  color:var(--c-sky);
}
.os-head small{
  display:block;margin-block-start:3px;color:var(--muted);font-size:12px;
}
.os-version{
  flex:none;padding-block:5px;padding-inline:10px;
  border:1px solid var(--line-2);border-radius:999px;
  color:var(--muted);font:11px var(--font-mono);
}
.os-summary{
  margin-block:18px 14px;color:var(--ink-soft);font-size:14px;line-height:1.8;
}
.os-meta{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;
  margin-block-end:22px;
}
.os-meta li{
  padding-block:4px;padding-inline:10px;border-radius:999px;
  background:rgba(49,87,213,.07);color:var(--c-sky);font-size:12px;
}
.os-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-block-start:auto;
}
.os-actions .btn-ink,.os-actions .btn-glass{
  padding-block:11px;padding-inline:18px;font-size:14px;
}
.os-more{
  margin-block-start:16px;color:var(--c-sky);font-size:14px;font-weight:600;text-decoration:none;
}
.os-more:hover{
  text-decoration:underline;
}
.os-note{
  margin-block-start:12px;color:var(--muted);font-size:12px;line-height:1.7;
}
.os-feedback-box{
  padding-block:44px;padding-inline:40px;
  background:var(--glass-s);border:1px solid var(--glass-br);
  box-shadow:var(--sh-glass);border-radius:28px;text-align:center;
}
.os-feedback-box h2{
  font-size:clamp(24px,2.6vw,34px);line-height:1.3;margin-block-end:12px;
}
.os-feedback-box > p{
  color:var(--muted);max-inline-size:660px;margin-inline:auto;margin-block-end:24px;
  line-height:1.8;
}

/* project page */
.app-lockup{
  display:flex;align-items:center;gap:14px;margin-block-end:28px;
}
.app-lockup img{
  inline-size:64px;block-size:64px;border-radius:14px;
}
.app-lockup b{
  display:block;font-size:24px;line-height:1.2;
}
.app-lockup small{
  display:block;color:var(--muted);font-size:12px;
}
.app-game{
  margin-block-start:22px;color:var(--c-sky);
  font:600 13px var(--font-mono);text-align:start;inline-size:fit-content;
}
.app-hero .hero-cta{
  margin-block-start:28px;
}
.app-hero .os-facts{
  margin-block:24px 40px;
}
.app-main-shot{
  max-inline-size:900px;
}
.app-main-shot img,.app-gallery img{
  inline-size:100%;block-size:auto;border-radius:16px;
  box-shadow:0 22px 60px -24px rgba(14,18,32,.32);
  border:1px solid rgba(255,255,255,.92);
}
.opensource-page figcaption{
  margin-block-start:12px;color:var(--muted);font-size:12px;line-height:1.6;
}
.app-feature-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.app-feature{
  padding-block:26px;padding-inline:28px;
  background:var(--glass);border:1px solid var(--glass-br);
  border-radius:22px;box-shadow:var(--sh-glass);backdrop-filter:blur(20px);
}
.app-feature-num{
  display:block;color:var(--c-sky);font:12px var(--font-mono);margin-block-end:20px;
}
.app-feature h3,.app-steps h3{
  font-size:18px;line-height:1.4;margin-block-end:10px;
}
.app-feature p,.app-steps p{
  color:var(--muted);font-size:14px;line-height:1.8;
}
.app-gallery{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;
}
.app-steps{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;
}
.app-steps li{
  border-block-start:1px solid var(--line-2);padding-block-start:22px;
}
.app-steps .app-feature-num{
  font-size:24px;
}
.app-faq{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start;
}
.app-faq details{
  background:var(--glass-s);border:1px solid var(--glass-br);
  border-radius:16px;box-shadow:var(--sh-glass);
}
.app-faq summary{
  position:relative;cursor:pointer;list-style:none;
  padding-block:20px;padding-inline:22px 48px;
  font-size:14px;font-weight:650;line-height:1.5;
}
.app-faq summary::-webkit-details-marker{
  display:none;
}
.app-faq summary::after{
  content:'+';position:absolute;inset-inline-end:20px;inset-block-start:17px;
  color:var(--c-sky);font-size:20px;font-weight:400;
}
.app-faq details[open] summary::after{
  content:'−';
}
.app-faq details p{
  padding-block:0 22px;padding-inline:22px;
  color:var(--muted);font-size:13px;line-height:1.8;
}
.app-cta > img{
  inline-size:72px;block-size:72px;border-radius:16px;margin-inline:auto;margin-block-end:20px;
}
.app-cta .hero-cta{
  justify-content:center;margin-block-start:24px;
}
.app-disclaimer{
  text-align:center;font-size:12px;color:var(--muted);margin-block-start:24px;line-height:1.7;
}
.opensource-page a:focus-visible,.opensource-page summary:focus-visible{
  outline:3px solid var(--c-sky);outline-offset:4px;
}

@media (max-width:1100px){
  .os-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .app-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .os-hero{padding-block:16px 12px}
  .os-hero .page-breadcrumbs{margin-block-end:28px}
  .os-hero .hero-title{font-size:34px}
  .os-section{padding-block:30px}
  .os-grid,.app-feature-grid,.app-gallery,.app-steps,.app-faq{grid-template-columns:minmax(0,1fr)}
  .os-body{padding-block:20px 22px;padding-inline:20px}
  .os-feedback-box{padding-block:30px;padding-inline:20px}
  .app-main-shot img,.app-gallery img{border-radius:10px}
}