/* Hollow Moon — styles.css (Refined Minimal + Retro Headlines) */
:root{ --bg:#0a0f1c; --panel: rgba(255,255,255,.02); --panel-strong: rgba(255,255,255,.03); --border: rgba(255,255,255,.10); --ink:#ffffff; --ink-90: rgba(255,255,255,.90); --ink-80: rgba(255,255,255,.80); --ink-60: rgba(255,255,255,.60); --accent:#9beadf; }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
.display{font-family:'Orbitron',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; letter-spacing:.01em}
a{color:var(--ink); text-decoration:none} a:hover{color:var(--ink)}
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.header{ display:flex; align-items:center; justify-content:space-between; padding:28px 0 18px 0; }
.brand{display:flex; align-items:center; gap:12px} .brand__text{display:flex; flex-direction:column}
.brand__title{font-weight:800; font-size:20px; letter-spacing:-0.01em}
.brand__sub{font-size:12px; color:var(--ink-60); letter-spacing:.18em; text-transform:uppercase}
.nav{display:none; gap:24px} .nav a{color:var(--ink-80)} .nav a:hover{color:var(--ink)} @media (min-width: 768px){ .nav{display:flex} }
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:24px; } .panel--hero{padding:32px}
.hero__copy h1{margin:0; font-size:40px; line-height:1.1; font-weight:800} @media (min-width:768px){ .hero__copy h1{font-size:52px} }
.hero__copy p{margin:12px 0 0; color:var(--ink-80); max-width:60ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.04); font-weight:600; font-size:14px; }
.btn:hover{background:rgba(255,255,255,.06)} .btn--ghost{background:rgba(255,255,255,.02)} .btn--flat{background:#0b1220}
.hero__tiles{background:#0b1220}
.section-title{ margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-60); }
.tiles{display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px}
@media (min-width:640px){ .tiles{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .tiles.tiles--three{grid-template-columns:1fr 1fr 1fr} }
.tile{display:block; padding:12px; border:1px solid var(--border); border-radius:16px; background:var(--panel)} .tile:hover{background:var(--panel-strong)}
.tile__media{height:96px; border-radius:10px; overflow:hidden; background:#111; display:grid; place-items:center}
.tile__meta{margin-top:8px} .tile__title{font-weight:700; font-size:14px} .tile__sub{font-size:12px; color:var(--ink-60)}
.list-section{margin-top:36px}
.card-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:12px}
@media (min-width:640px){ .card-grid{grid-template-columns:1fr 1fr} } @media (min-width:1024px){ .card-grid{grid-template-columns:1fr 1fr 1fr} }
.card{display:block; border:1px solid var(--border); border-radius:20px; overflow:hidden; background:var(--panel)} .card:hover{background:var(--panel-strong)}
.card__media{height:144px; background:#0b1220; display:grid; place-items:center; border-bottom:1px solid var(--border)}
.card__body{padding:16px} .card__body h3{margin:0; font-size:16px; font-weight:700}
.card__body p{margin:6px 0 10px; color:var(--ink-60); font-size:14px}
.pill{display:inline-block; font-size:11px; color:var(--ink-60)} .dot{display:inline-block; width:3px; height:3px; background:var(--ink-60); border-radius:50%; margin:0 6px; vertical-align:middle}
.badge{display:inline-block; font-size:10px; line-height:1; border:1px solid var(--border); padding:2px 6px; border-radius:999px; vertical-align:middle; margin-left:6px} .badge--new{color:var(--ink-90)}
.about-text{color:var(--ink-80); max-width:70ch; margin-top:8px}
.footer{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:24px 0 48px; color:var(--ink-60); font-size:14px; }
.footer__links{display:flex; gap:16px} .footer__links a{color:var(--ink-80)} .footer__links a:hover{color:var(--ink)}
.preview{display:grid; place-items:center; background:#0b1220; border:1px solid var(--border)}
.preview--grid{ display:grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
  background-image: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 0 0, calc(100%/6) 100%, 100% calc(100%/4); background-position: 0 0, 0 0, 0 0; border:1px solid var(--border); }