/* 04-content.css: section headers, buttons, featured, systems, repos, philosophy, footer. */
/* Section Headers */
    .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--spacing-m);
      width: 100%;
      margin-bottom: var(--spacing-l);
      flex-wrap: wrap;
    }

    .section-header__title {
      font-size: var(--h2-size);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.03em;
      text-transform: uppercase;
    }

    /* Codapress Button (cp-btn) */
    .cp-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: var(--btn-padding-block) var(--btn-padding-inline);
      background: var(--color-btn);
      border: 1px solid #444444;
      border-radius: 0;
      color: var(--color-text);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
    }

    .cp-btn:hover, .cp-btn:focus-visible {
      background: var(--color-link-hover);
      color: #000000;
      border-color: #ffffff;
      outline: none;
    }

    /* Sync button: label is fetch state, never scrambled; icon spins while fetching */
    #sync-refresh-btn .sync-icon {
      display: inline-block;
    }
    #sync-refresh-btn.is-syncing .sync-icon {
      animation: syncSpin 0.9s linear infinite;
    }
    @keyframes syncSpin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      #sync-refresh-btn.is-syncing .sync-icon { animation: none; }
    }

    /* Logo / Tech Stack Strip */
    .tech-strip {
      padding-block: var(--spacing-l);
      border-bottom: 1px solid var(--color-border);
      background: #000000;
    }

    .tech-strip__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-m);
      flex-wrap: wrap;
      opacity: 0.8;
    }

    .tech-strip__inner img {
      height: 24px;
      width: 24px;
      object-fit: contain;
      filter: grayscale(1) brightness(1.8);
      transition: filter 0.2s, opacity 0.2s;
    }

    .tech-strip__inner img:hover {
      filter: grayscale(0) brightness(2.2);
    }

    /* Compact Featured Project Spotlight */
    .home-section {
      padding-block: var(--spacing-2xl);
      border-bottom: 1px solid var(--color-border);
    }

    .featured-project {
      display: grid;
      grid-template-columns: 1fr;
      border: 1px solid var(--color-muted);
      background: #000000;
      transition: border-color 0.2s, transform 0.15s ease-out;
    }

    @media (min-width: 900px) {
      .featured-project {
        grid-template-columns: 1.2fr 1fr;
      }
    }

    .featured-project:hover {
      border-color: #888888;
    }

    .featured-project__main {
      padding: var(--spacing-l);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-bottom: 1px solid var(--color-muted);
    }

    @media (min-width: 900px) {
      .featured-project__main {
        border-bottom: none;
        border-right: 1px solid var(--color-muted);
      }
    }

    .featured-project__specs {
      padding: var(--spacing-l);
      background: #050505;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--spacing-m);
    }

    .featured-project__title {
      font-size: var(--text-2xl);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: var(--spacing-xs);
    }

    .featured-project__title a:hover {
      text-decoration: underline;
    }

    .featured-project__desc {
      font-size: var(--text-sm);
      color: var(--color-mid-grey);
      line-height: 1.5;
      max-width: 60ch;
      margin-bottom: var(--spacing-m);
    }

    .featured-project__link {
      font-size: var(--text-xs);
      color: #ffffff;
      text-decoration: underline;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .spec-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-s);
      font-size: var(--text-xs);
      color: var(--color-mid-grey);
    }

    .spec-item {
      padding-bottom: 6px;
      border-bottom: 1px solid #1c1c1c;
    }

    .spec-item__label {
      color: #666666;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 2px;
    }

    .spec-item__val {
      color: #ffffff;
      font-weight: 600;
    }

    /* Systems Architecture Block */
    .systems-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: var(--spacing-l);
    }

    .system-card {
      border: 1px solid var(--color-muted);
      padding: var(--spacing-l);
      background: #080808;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: border-color 0.2s, transform 0.15s ease-out;
    }

    a.system-card {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    a.system-card:hover .system-card__link {
      color: #ffffff;
    }

    .system-card__link {
      color: #ffffff;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .system-card:hover {
      border-color: #777777;
    }

    .system-card__tag {
      font-size: var(--text-xs);
      color: var(--color-mid-grey);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--spacing-s);
    }

    .system-card__title {
      font-size: var(--text-xl);
      font-weight: 700;
      margin-bottom: var(--spacing-xs);
      letter-spacing: -0.02em;
    }

    .system-card__desc {
      font-size: var(--text-sm);
      color: var(--color-mid-grey);
      line-height: 1.4;
      margin-bottom: var(--spacing-m);
    }

    .system-card__specs {
      padding-top: var(--spacing-s);
      border-top: 1px solid #222222;
      font-size: var(--text-xs);
      color: var(--color-mid-grey);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* Repositories Controls & Search */
    .filter-bar {
      display: flex;
      align-items: center;
      margin-bottom: var(--spacing-l);
    }

    .search-box {
      width: 100%;
      max-width: 440px;
    }

    .search-box input {
      width: 100%;
      background: #080808;
      border: 1px solid var(--color-muted);
      color: #ffffff;
      padding: 12px 16px;
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: 0.05em;
      border-radius: 0;
      outline: none;
      transition: border-color 0.2s;
    }

    .search-box input:focus {
      border-color: #ffffff;
    }

    /* Codapress Card Grid */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: var(--spacing-l);
    }

    .repo-card {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--color-muted);
      background: #000000;
      padding: var(--spacing-m);
      transition: border-color 0.2s, transform 0.15s ease-out;
    }

    .repo-card:hover {
      border-color: #888888;
    }

    .repo-card__tags {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      font-size: var(--text-xs);
      line-height: 1.1;
      padding-bottom: var(--spacing-s);
      color: var(--color-mid-grey);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .repo-card__tag {
      border: 1px solid #333333;
      padding: 3px 8px;
      background: #080808;
      font-size: var(--text-xs);
      white-space: nowrap;
      display: inline-block;
      letter-spacing: 0.06em;
    }

    .repo-card__media {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 1px solid var(--color-muted);
      background: #0a0a0a;
      overflow: hidden;
      position: relative;
      margin-bottom: var(--spacing-m);
    }

    .repo-card__media svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .repo-card__text {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      flex: 1;
    }

    .repo-card__title {
      margin: 0;
      font-size: var(--text-md);
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .repo-card__title a:hover {
      text-decoration: underline;
    }

    .repo-card__excerpt {
      margin: 0 0 var(--spacing-s);
      font-size: var(--text-sm);
      line-height: 1.35;
      color: var(--color-mid-grey);
      flex: 1;
    }

    .repo-card__meta {
      padding-top: clamp(48px, 6vw, 72px);
      border-top: 1px solid #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--text-xs);
      color: var(--color-mid-grey);
    }

    .repo-card__stats {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-lg);
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.04em;
      line-height: 1;
    }

    .repo-card__star {
      font-size: 1.25em;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      transform: translateY(-0.08em);
    }

    .repo-card__count {
      font-size: 0.85em;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }

    .repo-card__forks {
      font-size: 0.85em;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }

    .repo-card__dot {
      font-size: 0.85em;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }

    .repo-card__link {
      font-size: var(--text-xs);
      text-decoration: underline;
      text-transform: uppercase;
      color: #ffffff;
    }

    .repo-card__link, .featured-project__link, .footer__links a {
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
    }

    /* Philosophy Section */
    .philosophy-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-l);
    }

    .philosophy-item {
      padding-bottom: var(--spacing-l);
      border-bottom: 1px solid var(--color-border);
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    @media (min-width: 768px) {
      .philosophy-item {
        grid-template-columns: 320px 1fr;
        gap: var(--spacing-l);
      }
    }

    .philosophy-item__title {
      font-size: var(--text-lg);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -0.02em;
    }

    .philosophy-item__desc {
      font-size: var(--text-base);
      color: var(--color-mid-grey);
      line-height: 1.4;
      max-width: 65ch;
    }

    /* Footer */
    .footer {
      padding-block: var(--spacing-2xl) var(--spacing-l);
      background: var(--color-bg);
      border-top: 1px solid var(--color-border);
    }

    .footer__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-m);
      flex-wrap: wrap;
    }

    .footer__copy {
      font-size: var(--text-xs);
      color: var(--color-mid-grey);
    }

    .footer__links {
      display: flex;
      align-items: center;
      gap: var(--spacing-l);
      font-size: var(--text-xs);
    }

    .footer__links a {
      color: var(--color-mid-grey);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer__links a:hover {
      color: #ffffff;
      text-decoration: underline;
    }