/* ============================================================
   Home — shared components across the three directions
   ============================================================ */

/* ---- Direction switcher (compare A / B / C) --------------- */
.switcher {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 16px; border-radius: 100px;
  background: rgba(var(--paper-rgb) / 0.86);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 30px -12px rgba(20,16,40,0.35);
}
.switcher .sw-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-right: 4px; }
.switcher a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  padding: 7px 13px; border-radius: 100px; color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.switcher a:hover { background: var(--paper-3); color: var(--ink); }
.switcher a.active { background: var(--ink); color: var(--paper); }
@media (max-width: 720px){ .switcher .sw-label { display:none; } .switcher a { padding:7px 10px; } }

/* ---- Journal (blog) cards --------------------------------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jcard { display: flex; flex-direction: column; gap: 0; text-decoration: none; group: card; }
.jcard .jthumb { aspect-ratio: 16/11; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); background: var(--paper-2); position: relative; }
.jcard .jthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.jcard:hover .jthumb img { transform: scale(1.04); }
/* Placeholder shown when a post has no featured image — a per-world accent
   wash with the Mathaesthetics wordmark overlaid, instead of a blank square.
   (Mixes toward black, not --ink, so the white wordmark reads in both themes.) */
.jcard .jph { position: absolute; inset: 0; display: grid; place-items: center;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  background: linear-gradient(150deg, color-mix(in oklch, var(--accent) 78%, #0b0b14) 0%, var(--accent) 100%); }
.jcard .jph img { width: 62%; max-width: 190px; opacity: .92; }
.jcard:hover .jph { transform: scale(1.04); }
.jcard .jkind {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px; color: #fff; background: rgba(22,18,32,.62);
  backdrop-filter: blur(6px);
}
.jcard .jmeta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 16px; letter-spacing: 0.01em; }
.jcard .jtitle { font-family: var(--serif); font-size: 21px; line-height: 1.18; margin-top: 8px; color: var(--ink); letter-spacing: -0.01em; }
.jcard:hover .jtitle { color: var(--accent); }
.jcard .jdesc { font-size: 14px; color: var(--ink-mute); margin-top: 8px; line-height: 1.5; }

@media (max-width: 880px){ .journal-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Launch tag ------------------------------------------- */
.launch-tag {
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.launch-tag::before { content:''; width:7px; height:7px; border-radius:100px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent); }