/* ============================================
   HOSHI NO ISAN — Global Design System
   spaceshipadventures.com
   Version: 1.0 — February 2026
============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
============================================ */
:root {
    --jaxa-navy:       #0a0e1a;
    --jaxa-deep:       #0d1528;
    --jaxa-blue:       #1a2a4a;
    --jaxa-gold:       #c9a227;
    --jaxa-gold-light: #f0c84a;
    --jaxa-white:      #e8eef8;
    --jaxa-muted:      #8899bb;
    --jaxa-accent:     #4a90d9;
    --jaxa-sakura:     #d4789a;
    --jaxa-text:       #aabbd4;
    --jaxa-border:     rgba(255,255,255,0.06);
    --jaxa-border-gold: rgba(201,162,39,0.2);
}

/* ============================================
   GLOBAL DARK BASE
============================================ */
body {
    background-color: var(--jaxa-navy);
    color: var(--jaxa-text);
}

/* Override Bootstrap / template white backgrounds */
.main,
.overflow_wrapper {
    background: var(--jaxa-navy);
}

/* ============================================
   TYPOGRAPHY OVERRIDES
============================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--jaxa-white);
}

p {
    color: var(--jaxa-text);
    line-height: 1.9;
}

a {
    color: var(--jaxa-gold);
    transition: color 0.2s;
}

a:hover {
    color: var(--jaxa-gold-light);
    text-decoration: none;
}

/* ============================================
   STARFIELD UTILITY
============================================ */
.jaxa-dark,
.dark_section {
    background-color: var(--jaxa-deep);
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 15%, rgba(255,255,255,0.28) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 75%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 65%, rgba(255,255,255,0.22) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 48%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(2px 2px at 35% 12%, rgba(201,162,39,0.22) 0%, transparent 100%),
        radial-gradient(2px 2px at 68% 80%, rgba(74,144,217,0.15) 0%, transparent 100%);
    color: var(--jaxa-white);
}

/* ============================================
   GOLD RULE DIVIDER
============================================ */
.jaxa-rule {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--jaxa-gold), transparent);
    margin: 20px auto;
    border: none;
}

/* ============================================
   SECTION HEADER
============================================ */
.jaxa-section-header {
    text-align: center;
    margin-bottom: 55px;
}

.jaxa-section-header .s-label,
.jaxa-section-header .jp-label {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--jaxa-muted);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.jaxa-section-header h2 {
    color: var(--jaxa-white);
    font-size: 34px;
    margin-bottom: 8px;
}

.jaxa-section-header h2 em {
    color: var(--jaxa-gold);
    font-style: normal;
}

.jaxa-section-header p {
    color: var(--jaxa-muted);
    max-width: 560px;
    margin: 14px auto 0;
    line-height: 1.8;
    font-size: 15px;
}

/* ============================================
   PULL QUOTE
============================================ */
.jaxa-pull,
.concept-pull {
    border-left: 3px solid var(--jaxa-gold);
    padding: 20px 30px;
    margin: 30px 0;
    background: rgba(201,162,39,0.04);
    border-radius: 0 4px 4px 0;
}

.jaxa-pull p,
.concept-pull p {
    font-size: 19px;
    font-style: italic;
    color: var(--jaxa-white);
    margin: 0;
    line-height: 1.7;
}

/* ============================================
   INFO BOX
============================================ */
.jaxa-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--jaxa-border-gold);
    border-radius: 4px;
    padding: 22px 26px;
    margin: 22px 0;
}

.jaxa-box h4 {
    color: var(--jaxa-gold);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    margin: 0 0 12px;
}

.jaxa-note {
    background: rgba(201,162,39,0.05);
    border-left: 3px solid var(--jaxa-gold);
    border-radius: 0 4px 4px 0;
    padding: 14px 20px;
    margin: 20px 0;
}

.jaxa-note p {
    font-size: 13px;
    color: #cca830;
    margin: 0;
    line-height: 1.7;
}

/* ============================================
   BUTTONS — Bootstrap overrides + JAXA variants
============================================ */
.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, rgba(201,162,39,0.9), rgba(240,200,74,0.9)) !important;
    color: var(--jaxa-navy) !important;
    border: none !important;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 2px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover,
a.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(201,162,39,0.3);
    color: var(--jaxa-navy) !important;
}
.btn-default,
a.btn-default {
    background: transparent !important;
    color: var(--jaxa-white) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}
.btn-default:hover,
a.btn-default:hover {
    border-color: var(--jaxa-gold) !important;
    color: var(--jaxa-gold) !important;
}

.btn-jaxa-primary {
    background: linear-gradient(135deg, rgba(201,162,39,0.9), rgba(240,200,74,0.9));
    color: var(--jaxa-navy) !important;
    border: none;
    padding: 12px 32px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 700;
    border-radius: 2px;
    display: inline-block;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none !important;
}

.btn-jaxa-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(201,162,39,0.3);
    color: var(--jaxa-navy) !important;
}

.btn-jaxa-secondary {
    background: transparent;
    color: var(--jaxa-white) !important;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 12px 32px;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 2px;
    display: inline-block;
    transition: border-color 0.2s, color 0.2s;
    text-decoration: none !important;
}

.btn-jaxa-secondary:hover {
    border-color: var(--jaxa-gold);
    color: var(--jaxa-gold) !important;
}

.btn-jaxa-ghost {
    background: transparent;
    color: var(--jaxa-gold) !important;
    border: 1px solid var(--jaxa-border-gold);
    padding: 7px 18px;
    font-size: 11px;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
    transition: background 0.2s;
    text-decoration: none !important;
}

.btn-jaxa-ghost:hover {
    background: rgba(201,162,39,0.1);
    color: var(--jaxa-gold-light) !important;
}

/* ============================================
   MISSION BADGE / STATUS PILL
============================================ */
.jaxa-badge {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--jaxa-gold);
    border-radius: 2px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--jaxa-gold);
    font-family: 'Courier New', monospace;
}

.jaxa-pill {
    display: inline-block;
    background: rgba(201,162,39,0.08);
    border: 1px solid rgba(201,162,39,0.25);
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--jaxa-gold);
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

/* ============================================
   RARITY BADGES
============================================ */
.rarity-legendary { color: var(--jaxa-gold); }
.rarity-epic      { color: var(--jaxa-sakura); }
.rarity-rare      { color: var(--jaxa-accent); }

.rarity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.rarity-badge.rarity-legendary { background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.3); }
.rarity-badge.rarity-epic      { background: rgba(212,120,154,0.12); border: 1px solid rgba(212,120,154,0.3); }
.rarity-badge.rarity-rare      { background: rgba(74,144,217,0.12);  border: 1px solid rgba(74,144,217,0.3); }

/* ============================================
   CARD COMPONENTS
============================================ */

/* Mission card */
.mission-card {
    background: var(--jaxa-blue);
    border: 1px solid var(--jaxa-border-gold);
    border-radius: 4px;
    padding: 28px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.mission-card:hover { border-color: rgba(201,162,39,0.4); }

.mission-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, var(--jaxa-gold), transparent);
}

.mission-card .mission-name {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--jaxa-gold);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.mission-card h4 { color: var(--jaxa-white); font-size: 18px; margin-bottom: 10px; }
.mission-card p  { color: var(--jaxa-muted); font-size: 14px; line-height: 1.8; margin-bottom: 10px; }

.mission-card .mission-tag {
    display: inline-block;
    background: rgba(201,162,39,0.07);
    border: 1px solid rgba(201,162,39,0.18);
    padding: 2px 9px;
    font-size: 10px;
    color: var(--jaxa-gold-light);
    border-radius: 2px;
    margin-right: 5px;
    font-family: 'Courier New', monospace;
}

.mission-card .ship-location {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: var(--jaxa-accent);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.mission-card .ship-location::before { content: '▸ '; }

/* Crew card */
.crew-card {
    background: var(--jaxa-navy);
    border: 1px solid rgba(74,144,217,0.18);
    border-radius: 4px;
    padding: 24px 18px;
    margin-bottom: 18px;
    text-align: center;
    transition: transform 0.25s, border-color 0.25s;
}

.crew-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201,162,39,0.3);
}

.crew-card .crew-role {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--jaxa-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.crew-card h4 { color: var(--jaxa-white); font-size: 15px; margin-bottom: 5px; }

.crew-card .ancestor {
    font-size: 11px;
    color: var(--jaxa-gold);
    margin-bottom: 10px;
    font-style: italic;
    line-height: 1.5;
}

.crew-card p {
    color: var(--jaxa-muted);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

/* Ship area rows */
.ship-area {
    display: flex;
    gap: 22px;
    margin-bottom: 26px;
    align-items: flex-start;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--jaxa-border);
    border-radius: 4px;
    padding: 22px;
    transition: background 0.2s;
}

.ship-area:hover { background: rgba(74,144,217,0.04); }
.ship-area-icon { font-size: 32px; min-width: 52px; text-align: center; padding-top: 4px; }
.ship-area-info h4 { color: var(--jaxa-white); font-size: 16px; margin-bottom: 3px; }
.ship-area-info .area-mission {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: var(--jaxa-gold);
    letter-spacing: 2px;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
}
.ship-area-info p { color: var(--jaxa-muted); font-size: 13px; line-height: 1.7; margin: 0; }

/* Roadmap steps */
.roadmap-item {
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
    align-items: flex-start;
}

.roadmap-number {
    min-width: 42px;
    height: 42px;
    background: rgba(201,162,39,0.08);
    border: 1px solid rgba(201,162,39,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--jaxa-gold);
    flex-shrink: 0;
}

.roadmap-content h4 { color: var(--jaxa-white); font-size: 15px; margin-bottom: 5px; }
.roadmap-content p  { color: var(--jaxa-muted); font-size: 14px; line-height: 1.7; margin: 0; }

/* ============================================
   EQUAL-HEIGHT CARD GRID (Bootstrap 3 fix)
============================================ */
.row-cards {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.row-cards > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
}

.row-cards .mission-card,
.row-cards .crew-card,
.row-cards .pillar-card,
.row-cards .jaxa-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.row-cards .mission-card p:last-of-type,
.row-cards .crew-card p:last-child,
.row-cards .pillar-card p:last-child {
    flex: 1;
}

/* ============================================
   PILLAR CARD
============================================ */
.pillar-card {
    text-align: center;
    padding: 36px 20px;
    border-top: 2px solid rgba(201,162,39,0.15);
    transition: border-color 0.3s;
}

.pillar-card:hover { border-top-color: var(--jaxa-gold); }
.pillar-icon { font-size: 42px; margin-bottom: 16px; display: block; }
.pillar-card h3, .pillar-card h4 { color: var(--jaxa-white); font-size: 17px; margin-bottom: 10px; }
.pillar-card p { color: var(--jaxa-muted); font-size: 14px; line-height: 1.9; }

/* ============================================
   NAV / HEADER OVERRIDES
============================================ */
header {
    background: rgba(10,14,26,0.96) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,162,39,0.1) !important;
}
header .logo img { max-height: 48px; height: auto; }

/* Force menu visible on desktop (mainmenu uses height:0 by default for mobile) */
@media (min-width: 768px) {
    .menu_container > ul {
        height: auto !important;
        overflow: visible !important;
        min-height: 1px;
    }
}

.menu_container {
    background: transparent !important;
}
.menu_container > ul > li > a {
    color: var(--jaxa-white) !important;
}
.menu_container > ul > li > a:hover {
    color: var(--jaxa-gold) !important;
}
.menu_container .dropdown-menu {
    background: var(--jaxa-deep) !important;
    border: 1px solid var(--jaxa-border-gold) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.menu_container .dropdown-menu li a {
    color: var(--jaxa-text) !important;
    border-bottom-color: var(--jaxa-border) !important;
}
.menu_container .dropdown-menu li a:hover {
    background: rgba(201,162,39,0.1) !important;
    color: var(--jaxa-gold) !important;
}
.menu_container .dropdown-menu li:last-child a { border-bottom: none !important; }

.mobile_collapser {
    background: var(--jaxa-deep) !important;
    border-bottom-color: var(--jaxa-border-gold) !important;
    color: var(--jaxa-white) !important;
}
.menu_container > ul.collapsed {
    border-bottom-color: var(--jaxa-border) !important;
}
.menu_container > ul.collapsed > li {
    border-color: var(--jaxa-border) !important;
}
.menu_container > ul.collapsed > li > a {
    color: var(--jaxa-white) !important;
}
@media (max-width: 767px) {
    .menu_container .dropdown-menu {
        background: var(--jaxa-navy) !important;
        border: none !important;
    }
    .menu_container .dropdown-menu li a {
        background: rgba(255,255,255,0.03) !important;
        border-bottom-color: var(--jaxa-border) !important;
    }
}

/* ============================================
   FOOTER OVERRIDES
============================================ */
footer {
    background: var(--jaxa-navy) !important;
}

footer .footer_teasers_wrapper,
footer .dark_section {
    background: var(--jaxa-deep) !important;
    border-top: 1px solid var(--jaxa-border-gold);
}

footer h3 {
    color: var(--jaxa-gold);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

footer p, footer a { color: var(--jaxa-muted); font-size: 13px; }
footer a:hover    { color: var(--jaxa-gold); }

footer .copyright {
    background: var(--jaxa-navy) !important;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding: 16px 0;
    font-size: 12px;
    color: rgba(136,153,187,0.5);
}

footer .social_wrapper a {
    color: var(--jaxa-muted);
    font-size: 18px;
    margin-right: 14px;
    transition: color 0.2s;
}

footer .social_wrapper a:hover { color: var(--jaxa-gold); }

/* ============================================
   HERO / FULL PAGE PHOTO (hgroup)
============================================ */
.full_page_photo .hgroup .hgroup_title,
.full_page_photo .hgroup .hgroup_subtitle {
    background: rgba(0,0,0,0.5) !important;
}
.full_page_photo.no_photo {
    background-color: var(--jaxa-deep) !important;
}
.full_page_photo.no_photo .hgroup .hgroup_title,
.full_page_photo.no_photo .hgroup .hgroup_subtitle {
    background: rgba(10,14,26,0.85) !important;
}
.full_page_photo .hgroup .hgroup_title h1,
.full_page_photo .hgroup .hgroup_subtitle p {
    color: var(--jaxa-white) !important;
}

/* ============================================
   HORIZONTAL TEASER (legacy border)
============================================ */
.horizontal_teaser .horizontal_teaser_left {
    border-right-color: var(--jaxa-border) !important;
}
.horizontal_teaser .horizontal_teaser_right {
    border-left-color: var(--jaxa-border) !important;
}
.main .dark_section.horizontal_teaser .horizontal_teaser_right {
    border-left-color: var(--jaxa-border) !important;
}

/* ============================================
   HERO BANNER (clean, no animation)
============================================ */
.page-header {
    background: var(--jaxa-deep);
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 100%);
}
.page-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}
.page-header-sub {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--jaxa-muted);
}

/* Developer / Team page */
.developer-card {
    background-color: var(--jaxa-deep) !important;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 70%, rgba(201,162,39,0.08) 0%, transparent 100%);
    border: 1px solid rgba(201,162,39,0.2);
    border-radius: 4px;
    padding: 40px;
}
.developer-photo {
    margin-bottom: 0;
    text-align: center;
}
.developer-photo img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 50%;
    border: 3px solid rgba(201,162,39,0.25);
    object-fit: cover;
    aspect-ratio: 1;
}
.developer-card h2 {
    margin: 0 0 6px;
    font-size: 26px;
    color: var(--jaxa-white);
}
.developer-role {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--jaxa-gold);
    text-transform: uppercase;
    margin-bottom: 20px;
}
.developer-social {
    margin-bottom: 24px;
}
.developer-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid var(--jaxa-border);
    border-radius: 4px;
    margin-right: 8px;
    color: var(--jaxa-muted);
    transition: border-color 0.2s, color 0.2s;
}
.developer-social a:hover {
    border-color: var(--jaxa-gold);
    color: var(--jaxa-gold);
}
@media (max-width: 767px) {
    .developer-card { padding: 28px 20px; }
    .developer-photo img { max-width: 200px; }
}
.developer-bio {
    margin-bottom: 28px;
}
.developer-bio p {
    margin-bottom: 16px;
    color: var(--jaxa-text);
    line-height: 1.8;
}
.developer-bio p:last-child {
    margin-bottom: 0;
}

.hero-banner {
    height: 360px;
    width: 100%;
    background: no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner__inner {
    text-align: center;
    padding: 40px 20px;
}

.hero-banner__title {
    margin: 0 0 16px 0;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,0.7);
    line-height: 1.2;
}

.hero-banner__title em {
    display: block;
    font-size: 24px;
    color: var(--jaxa-gold);
    font-style: normal;
    margin-top: 8px;
}

.hero-banner__tagline {
    margin: 0;
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 12px rgba(0,0,0,0.6);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .hero-banner { height: 240px; }
    .hero-banner__title { font-size: 28px; }
    .hero-banner__title em { font-size: 20px; }
    .hero-banner__tagline { font-size: 14px; }
}

/* ============================================
   LEGACY FULL_PAGE_PHOTO → hero-style fallback
   (blog/legacy posts that haven't been migrated)
============================================ */
.full_page_photo {
    height: 280px;
    min-height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.full_page_photo.no_photo { height: 140px; background: var(--jaxa-deep); }

/* ============================================
   HERO SLIDER OVERRIDES (legacy)
============================================ */
.slider_wrapper .carousel-caption h1 {
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}

.slider_wrapper .carousel-caption .lead {
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}

/* ============================================
   TRIANGLES (template decorative elements)
============================================ */
.container.triangles-of-section .triangle-up-left:after,
.container.triangles-of-section .triangle-up-right:after {
    background: var(--jaxa-navy) !important;
}
.container.triangles-of-section .square-left:after,
.container.triangles-of-section .square-right:after {
    background: var(--jaxa-navy) !important;
}

/* ============================================
   TABLE OVERRIDES
============================================ */
.jaxa-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14px;
}

.jaxa-table th {
    background: var(--jaxa-navy);
    color: var(--jaxa-gold);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
}

.jaxa-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--jaxa-border);
    color: var(--jaxa-muted);
    vertical-align: top;
}

.jaxa-table tr:last-child td { border-bottom: none; }
.jaxa-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ============================================
   DEVLOG GRID & BLOG CARDS
============================================ */
.devlog-grid {
    margin-top: 20px;
}
.service_teaser {
    background: var(--jaxa-deep) !important;
    border: 1px solid var(--jaxa-border) !important;
    border-radius: 4px !important;
}

.service_teaser .service_details {
    background: var(--jaxa-deep) !important;
    padding: 22px !important;
}

.service_teaser h2 {
    color: var(--jaxa-white) !important;
    font-size: 17px !important;
}

.service_teaser p { color: var(--jaxa-muted) !important; }

/* Section header (legacy template) */
.section_header {
    color: var(--jaxa-white) !important;
    border-bottom-color: var(--jaxa-border-gold) !important;
}
.section_header small { color: var(--jaxa-muted); }

/* ============================================
   JAPANESE TYPOGRAPHY UTILITIES
============================================ */
.jp-kanji {
    font-size: 22px;
    color: rgba(201,162,39,0.35);
    letter-spacing: 8px;
    display: block;
}

.jp-label,
.s-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--jaxa-muted);
    text-transform: uppercase;
    display: block;
}

/* ============================================
   SECTION SPACING UTILITIES
============================================ */
.jaxa-section {
    padding: 80px 0;
}

.jaxa-section-sm {
    padding: 50px 0;
}

/* ============================================
   HOME PAGE
============================================ */
.home-title-block {
    padding: 70px 0 60px;
    background: var(--jaxa-navy);
    text-align: center;
    border-bottom: 1px solid rgba(201,162,39,0.2);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(74,144,217,0.1) 0%, transparent 65%),
        radial-gradient(1px 1px at 12% 35%, rgba(255,255,255,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(2px 2px at 40% 12%, rgba(201,162,39,0.2) 0%, transparent 100%);
}
.home-title-block .eyebrow {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--jaxa-muted);
    text-transform: uppercase;
    border: 1px solid rgba(201,162,39,0.25);
    padding: 5px 16px;
    border-radius: 2px;
    margin-bottom: 24px;
}
.home-title-block h1 { font-size: 48px; color: var(--jaxa-white); line-height: 1.1; margin-bottom: 10px; font-weight: 700; }
.home-title-block h1 em { color: var(--jaxa-gold); font-style: normal; }
.home-title-block .jp-kanji { font-size: 22px; color: rgba(201,162,39,0.4); letter-spacing: 10px; margin-bottom: 28px; display: block; }
.home-title-block .tagline { color: var(--jaxa-muted); font-size: 17px; max-width: 600px; margin: 0 auto 36px; line-height: 1.9; }
.home-title-block .tagline strong { color: var(--jaxa-white); }
.status-pill {
    display: inline-block;
    background: rgba(201,162,39,0.08);
    border: 1px solid rgba(201,162,39,0.25);
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--jaxa-gold);
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}
.concept-bar { background: var(--jaxa-deep); padding: 60px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.concept-bar .pull-quote { border-left: 3px solid var(--jaxa-gold); padding: 22px 32px; background: rgba(201,162,39,0.04); border-radius: 0 4px 4px 0; }
.concept-bar .pull-quote p { font-size: 20px; font-style: italic; color: var(--jaxa-white); line-height: 1.7; margin: 0; }
.concept-bar .concept-body { color: var(--jaxa-text); font-size: 16px; line-height: 2; }
.concept-bar .concept-body strong { color: var(--jaxa-white); }
.pillars-section { background: var(--jaxa-navy); padding: 70px 0; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header .s-label { display: block; font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 4px; color: var(--jaxa-muted); text-transform: uppercase; margin-bottom: 12px; }
.section-header h2 { color: var(--jaxa-white); font-size: 30px; margin-bottom: 8px; }
.section-header h2 em { color: var(--jaxa-gold); font-style: normal; }
.pillar { text-align: center; padding: 36px 22px; border-top: 2px solid rgba(201,162,39,0.15); transition: border-color 0.3s; height: 100%; }
.pillar:hover { border-top-color: var(--jaxa-gold); }
.pillar-icon { font-size: 44px; margin-bottom: 18px; display: block; }
.pillar h3 { color: var(--jaxa-white); font-size: 18px; margin-bottom: 12px; }
.pillar p { color: var(--jaxa-muted); font-size: 14px; line-height: 1.9; margin-bottom: 20px; }
.pillar .btn-pillar { display: inline-block; border: 1px solid rgba(201,162,39,0.3); color: var(--jaxa-gold); font-size: 11px; letter-spacing: 1px; padding: 7px 18px; border-radius: 2px; text-decoration: none; transition: background 0.2s, color 0.2s; font-family: 'Courier New', monospace; text-transform: uppercase; }
.pillar .btn-pillar:hover { background: rgba(201,162,39,0.1); color: var(--jaxa-gold-light); text-decoration: none; }
.missions-teaser { background: var(--jaxa-deep); padding: 70px 0; }
.mission-strip { display: flex; align-items: center; gap: 20px; padding: 22px 26px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; margin-bottom: 14px; transition: background 0.2s, border-color 0.2s; text-decoration: none; }
.mission-strip:hover { background: rgba(74,144,217,0.05); border-color: rgba(201,162,39,0.2); text-decoration: none; }
.mission-strip .ms-icon { font-size: 28px; min-width: 44px; text-align: center; }
.mission-strip .ms-body { flex: 1; }
.mission-strip .ms-code { font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 2px; color: var(--jaxa-gold); text-transform: uppercase; margin-bottom: 4px; }
.mission-strip .ms-name { color: var(--jaxa-white); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.mission-strip .ms-tagline { font-size: 12px; color: var(--jaxa-muted); }
.mission-strip .ms-location { font-family: 'Courier New', monospace; font-size: 11px; color: var(--jaxa-accent); white-space: nowrap; }
.missions-teaser .view-all { text-align: center; margin-top: 28px; }
.crew-teaser { background: var(--jaxa-navy); padding: 70px 0; }
.crew-mini { background: rgba(255,255,255,0.02); border: 1px solid rgba(74,144,217,0.15); border-radius: 4px; padding: 22px 18px; text-align: center; margin-bottom: 20px; transition: transform 0.25s, border-color 0.25s; }
.crew-mini:hover { transform: translateY(-3px); border-color: rgba(201,162,39,0.25); }
.crew-mini .rarity { font-size: 13px; letter-spacing: 1px; margin-bottom: 6px; }
.crew-mini h4 { color: var(--jaxa-white); font-size: 15px; margin-bottom: 4px; }
.crew-mini .c-role { font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 2px; color: var(--jaxa-muted); text-transform: uppercase; margin-bottom: 8px; }
.crew-mini .c-ancestor { font-size: 11px; color: var(--jaxa-gold); font-style: italic; line-height: 1.5; }
.devlog-section { background: var(--jaxa-deep); padding: 70px 0; }
.home-cta { background: var(--jaxa-navy); padding: 80px 0; text-align: center; border-top: 1px solid rgba(201,162,39,0.1); }
.home-cta h2 { color: var(--jaxa-white); font-size: 34px; margin-bottom: 14px; }
.home-cta .jp-sub { font-size: 18px; color: rgba(201,162,39,0.35); letter-spacing: 6px; display: block; margin-bottom: 24px; }
.home-cta p { color: var(--jaxa-muted); font-size: 16px; max-width: 520px; margin: 0 auto 40px; line-height: 1.9; }
.btn-cta-primary { background: linear-gradient(135deg, rgba(201,162,39,0.9), rgba(240,200,74,0.9)); color: var(--jaxa-navy); border: none; padding: 14px 36px; font-size: 14px; letter-spacing: 1px; font-weight: 700; border-radius: 2px; margin: 0 8px 10px; display: inline-block; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; }
.btn-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,162,39,0.3); color: var(--jaxa-navy); text-decoration: none; }
.btn-cta-secondary { background: transparent; color: var(--jaxa-white); border: 1px solid rgba(255,255,255,0.18); padding: 14px 36px; font-size: 14px; letter-spacing: 1px; border-radius: 2px; margin: 0 8px 10px; display: inline-block; transition: border-color 0.2s, color 0.2s; text-decoration: none; }
.btn-cta-secondary:hover { border-color: var(--jaxa-gold); color: var(--jaxa-gold); text-decoration: none; }
@media (max-width: 768px) {
    .home-title-block h1 { font-size: 34px; }
    .section-header h2 { font-size: 26px; }
    .mission-strip { flex-direction: column; align-items: flex-start; }
    .mission-strip .ms-location { margin-top: 6px; }
    .btn-cta-primary, .btn-cta-secondary { display: block; margin: 8px auto; width: 260px; text-align: center; }
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 768px) {
    .jaxa-section  { padding: 50px 0; }
    .ship-area     { flex-direction: column; }
    .roadmap-item  { gap: 12px; }
    .row-cards     { flex-direction: column; }
    .jaxa-section-header h2 { font-size: 26px; }
    .btn-jaxa-primary,
    .btn-jaxa-secondary {
        display: block;
        margin: 8px auto;
        width: 260px;
        text-align: center;
    }
}