/* ZECTRIX brand-preserving redesign: variance 6, motion 2, density 4.
   Existing brand light theme, fonts, photographs and compact project actions. */
/* Exact Developer-page chrome variables; layout and behavior come from public/site-chrome.*. */
.zectrix-site-header, .zectrix-site-footer { --max:1280px; --orange:#bd4918; --line:rgba(23,24,23,.15); font:400 16px/1.65 Inter,system-ui,sans-serif; }
.community-page > main { padding-bottom:48px; }
.community-hero { padding:42px 0 30px; }
.community-hero-heading { display:grid; grid-template-columns:1.3fr 1fr; align-items:end; gap:48px; margin-bottom:30px; }
.community-hero h1 { font-size:clamp(40px,4.4vw,60px); line-height:1.2; letter-spacing:-.035em; margin-top:14px; }
.community-hero h1 span { color:var(--accent); }
.community-hero-intro { max-width:340px; justify-self:end; padding-bottom:4px; }
.community-hero-intro p { font-size:15px; color:var(--muted); line-height:1.85; margin-bottom:22px; }
.community-hero-intro .primary-button { gap:25px; padding-inline:21px; }
.community-photo-stage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.community-photo-stage figure { margin:0; min-width:0; }
.community-photo-stage figure>a { display:block; background:var(--surface-soft); overflow:hidden; border-radius:4px; }
.community-photo-stage img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.community-photo-stage figcaption a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; color:var(--muted); font-size:12px; }
.community-photo-stage figcaption a:hover { color:var(--accent); }
.community-photo-stage figcaption span { font-size:18px; }
.community-catalog { border-top:1px solid var(--line); padding-top:32px; margin:4px 0 62px; scroll-margin-top:24px; }
.catalog-family-tabs { margin-bottom:28px; gap:30px; }
.catalog-family-tabs button { display:inline-flex; align-items:baseline; gap:10px; font-size:15px; }
.catalog-family-tabs button>span { font-size:11px; font-weight:400; color:var(--muted); }
.community-section { margin-block:62px; }
.community-section-heading { margin-bottom:26px; }
.community-section-heading h2, .story-heading h2, .community-contribute h2, .story-contribute h2 { font-size:30px; line-height:1.35; letter-spacing:-.025em; }
.community-section-heading>p, .story-heading p { margin-top:10px; color:var(--muted); font-size:13px; }
.community-resources { padding-top:42px; border-top:1px solid var(--line); }
.community-resource-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 40px; }
.community-resource-list a { display:grid; grid-template-columns:1fr auto; gap:6px 24px; padding:18px 0; border-bottom:1px solid var(--line); }
.community-resource-list strong { font-size:16px; font-weight:600; }
.community-resource-list span { grid-column:1; font-size:12px; color:var(--muted); }
.community-resource-list b { grid-column:2; grid-row:1/3; align-self:center; color:var(--accent); font-size:22px; font-weight:400; }
.community-resource-list a:hover strong { color:var(--accent); }
.community-contribute, .story-contribute { display:flex; align-items:center; justify-content:space-between; gap:35px; margin:60px 0 24px; padding:34px; border:1px solid var(--line); border-radius:6px; }
.community-contribute p, .story-contribute p { margin-top:10px; color:var(--muted); font-size:13px; }
.community-contribute button, .story-contribute>a { flex-shrink:0; white-space:nowrap; }
.catalog-intro { padding:2px 0 22px; }
.catalog-intro h1 { font-size:34px; letter-spacing:-.03em; line-height:1.3; }
.catalog-intro p { margin-top:10px; font-size:13px; color:var(--muted); }
.catalog-paths { display:flex; gap:26px; align-items:center; margin-bottom:28px; border-bottom:1px solid var(--line); }
.catalog-paths a { display:inline-flex; align-items:center; gap:10px; min-height:48px; position:relative; font-size:13px; color:var(--muted); white-space:nowrap; }
.catalog-paths a[aria-current] { color:var(--ink); font-weight:600; }
.catalog-paths a[aria-current]::after { content:""; position:absolute; height:2px; bottom:-1px; left:0; right:0; background:var(--accent); }
.catalog-paths a:last-child { margin-left:auto; font-size:12px; }
.catalog-paths span { font-size:11px; color:var(--muted); font-weight:400; }
.story-section { margin-block:70px 62px; }
.story-heading { margin-bottom:26px; }
.story-heading>.text-link { margin-top:12px; min-height:32px; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.story-card { min-width:0; display:flex; flex-direction:column; }
.story-image { display:block; overflow:hidden; background:var(--surface-soft); border-radius:4px; }
.story-image img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.story-image-contain img { object-fit:contain; }
.story-body { padding:16px 0 0; display:flex; flex-direction:column; flex:1; }
.story-meta { display:flex; align-items:center; gap:16px; justify-content:space-between; color:var(--muted); font-size:10px; margin-bottom:11px; }
.story-body h3 { font-size:21px; line-height:1.45; letter-spacing:-.02em; }
.story-summary { color:var(--muted); font-size:13px; line-height:1.8; margin-top:10px; margin-bottom:18px; }
.story-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:13px; border-top:1px solid var(--line); }
.story-author { min-width:0; overflow-wrap:anywhere; }
.story-author strong { display:block; font-size:11px; font-weight:600; }
.story-author small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.story-original { display:flex; gap:7px; align-items:center; min-height:44px; color:var(--accent-dark); font-size:12px; white-space:nowrap; }
.story-project { color:var(--accent-dark); font-size:12px; margin-top:14px; }
.story-intro { padding:6px 0 34px; }
.story-intro .kicker { margin-bottom:12px; }
.story-intro h1 { font-size:40px; line-height:1.25; }
.story-intro>p:last-child { color:var(--muted); max-width:620px; font-size:14px; margin-top:14px; }
.story-collection-heading { display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:28px; }
.story-collection-heading>p { font-size:11px; color:var(--muted); }
.story-collection-heading>.text-link { margin-left:auto; font-size:12px; }
.story-filters { display:flex; gap:8px; }
.story-filters button { min-height:38px; padding:7px 12px; font-size:12px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--muted); }
.story-filters button[aria-pressed="true"] { color:var(--accent-dark); background:var(--accent-soft); border-color:var(--accent-soft); }
.story-filters button:hover { border-color:var(--line); }
.story-grid-full { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.story-grid-full .story-card:first-child { grid-column:1/-1; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.story-grid-full .story-card:first-child .story-body { padding:25px 0; justify-content:center; }
.story-grid-full .story-card:first-child h3 { font-size:30px; }
.story-grid-full .story-card:first-child .story-bottom { margin-top:25px; }
.story-grid-full .story-card:first-child .story-summary { font-size:15px; }
.story-contribute .kicker { margin:0 0 10px; }
@media (max-width:1050px) {
  .community-hero-heading { gap:30px; }
  .story-grid { gap:20px; }
}
@media (max-width:767px) {
  .community-page > main { padding-bottom:32px; }
  body:has(.mobile-install-bar) .zectrix-site-footer { padding-bottom:calc(108px + env(safe-area-inset-bottom)) !important; }
  .community-hero { padding:28px 0 18px; }
  .community-hero-heading { grid-template-columns:1fr; gap:22px; margin-bottom:25px; }
  .community-hero h1 { font-size:40px; margin-top:10px; }
  .community-hero-intro { justify-self:start; max-width:440px; }
  .community-hero-intro p { font-size:13px; margin-bottom:16px; }
  .community-photo-stage { grid-template-columns:1fr; gap:18px; }
  .community-photo-stage figure:not(:first-child) { display:none; }
  .community-photo-stage img { aspect-ratio:4/3; object-fit:cover; object-position:center 48%; }
  .community-section, .story-section { margin-block:40px; }
  .community-section-heading h2, .story-heading h2, .community-contribute h2, .story-contribute h2 { font-size:25px; }
  .community-catalog { padding-top:24px; margin-bottom:40px; }
  .catalog-family-tabs { margin-bottom:22px; gap:24px; }
  .catalog-family-tabs button { font-size:13px; gap:7px; }
  .community-resources { padding-top:28px; }
  .community-resource-list { grid-template-columns:1fr; gap:0; }
  .community-contribute, .story-contribute { flex-direction:column; align-items:flex-start; padding:24px; margin-top:38px; gap:22px; }
  .catalog-intro h1 { font-size:28px; }
  .catalog-paths { gap:20px; margin-bottom:23px; }
  .catalog-paths a { font-size:12px; gap:5px; }
  .catalog-paths a:last-child { font-size:11px; }
  .story-grid, .story-grid-full { grid-template-columns:1fr; gap:30px; }
  .story-grid-full .story-card:first-child { display:flex; gap:0; padding:0; border:0; }
  .story-grid-full .story-card:first-child .story-body { padding:16px 0 0; }
  .story-grid-full .story-card:first-child h3 { font-size:21px; }
  .story-grid-full .story-card:first-child .story-summary { font-size:13px; }
  .story-grid-full .story-card:first-child .story-bottom { margin-top:auto; }
  .story-intro h1 { font-size:32px; }
  .story-collection-heading { flex-wrap:wrap; gap:8px 16px; }
  .story-collection-heading>.text-link { margin-left:0; }
  .story-filters { width:100%; }
}
@media (max-width:440px) {
  .community-photo-stage img { aspect-ratio:1; object-fit:contain; }
  .catalog-paths { gap:15px; }
  .catalog-paths a:last-child { margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

/* Keep long translated labels legible in the compact catalog. */
html[lang="ja"] body.community-page { --body-font:Inter,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --display-font:"Space Grotesk",Inter,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
.project-bottom { flex-wrap:wrap; row-gap:8px; }
html[lang="en"] .community-hero h1, html[lang="ja"] .community-hero h1 { overflow-wrap:anywhere; }