/* Page styles: home. Scoped under <main class="page">. */
.page {
  --bg: #0E1320;
  --panel: #171E2E;
  --panel-edge: #232C40;
  --muted: #8D97AB;
  --label: #C9D1E0;
  --t: #4FC3F7;  /* Travel & Tech */
  --e: #FFC247;  /* Edu & Eats */
  --a: #FF6F61;  /* Apps & Adventure */
  --m: #B794FF;  /* Music & Musing */
  /* Panel width scales with the frame's width AND height,
     so the row never wraps and always fits the embed box. */
  --w: min(21vw, 46vh, 300px);
}
.page {
  /* Solid, so the embed blends into a section using section-bg-dark.png */
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  align-items: flex-start;   /* sit near the top, not centered */
  justify-content: center;
  padding: clamp(24px, 6vh, 56px) 16px 32px;
}
:where(.page) a { text-decoration: none; outline: none; }
.wrap { display: flex; flex-direction: column; align-items: center; gap: calc(var(--w) * 0.11); }
.kicker {
  color: var(--muted);
  font-weight: 600;
  font-size: max(10px, calc(var(--w) * 0.13));
  letter-spacing: 0.42em;
  padding-left: 0.42em; /* balance trailing letter-spacing */
}
.row { display: flex; align-items: flex-start; gap: min(2.2vw, 22px); }

.pillar { --c: var(--muted); width: var(--w); display: flex; flex-direction: column; align-items: center; gap: calc(var(--w) * 0.09); }
.pillar.t { --c: var(--t); }
.pillar.e { --c: var(--e); }
.pillar.a { --c: var(--a); }
.pillar.m { --c: var(--m); }

/* ---------- Flap ---------- */
.flap {
  position: relative;
  width: 100%;
  height: calc(var(--w) * 1.18);
  border-radius: calc(var(--w) * 0.09);
  background: linear-gradient(180deg, #1B2335 0%, var(--panel) 50%, #141A28 50%, #121827 100%);
  border: 1px solid var(--panel-edge);
  display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: flip .7s cubic-bezier(.2,.8,.2,1) both;
}
.pillar.e .flap { animation-delay: .08s; }
.pillar.a .flap { animation-delay: .16s; }
.pillar.m .flap { animation-delay: .24s; }
/* split-flap hairline, a touch stronger so the two halves read clearly */
.flap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; transform: translateY(-1px);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  pointer-events: none; z-index: 3;
}
.glyph {
  color: var(--c);
  font-weight: 900;
  font-size: calc(var(--w) * 0.9);
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;   /* clicks pass through to the halves */
  position: relative; z-index: 2;   /* stays bright above the hover tint */
  transition: text-shadow .2s ease;
}

/* Two clickable halves */
.half {
  position: absolute; left: 0; right: 0; height: 50%;
  z-index: 1;
  display: flex; justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
.half.top { top: 0; align-items: flex-start; }
.half.bot { bottom: 0; align-items: flex-end; }
.half em {
  font-style: normal;
  font-weight: 700;
  font-size: clamp(8px, calc(var(--w) * 0.075), 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 80%, var(--label));
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: rgba(14,19,32,0.55);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  margin: calc(var(--w) * 0.055) 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

/* ---------- Hover / focus states ---------- */
.pillar:hover .flap, .pillar:focus-within .flap {
  transform: translateY(-4px);
  border-color: var(--c);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45), 0 0 0 1px var(--c);
}
.pillar:hover .glyph, .pillar:focus-within .glyph {
  text-shadow: 0 0 calc(var(--w) * 0.18) color-mix(in srgb, var(--c) 55%, transparent);
}

.half:hover, .half:focus-visible { background-color: color-mix(in srgb, var(--c) 16%, transparent); }
.half:hover em, .half:focus-visible em { background: var(--c); color: var(--bg); border-color: var(--c); }
.half em::after { content: "\00a0→"; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; transition: width .18s ease; }
.half:hover em::after, .half:focus-visible em::after { width: 1.1em; }

@keyframes flip {
  from { transform: rotateX(-90deg); opacity: 0; }
  to   { transform: rotateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flap, .half, .half em, .half em::after { animation: none; transition: none; }
}
/* Phones: no hover, so tags stay visible; shrink the letter a bit to make room */
@media (max-width: 560px) {
  .glyph { font-size: calc(var(--w) * 0.74); }
  .half em {
    font-size: 9px; letter-spacing: 0.03em;
    padding: 0.15em 0.45em;
    margin: calc(var(--w) * 0.045) 0;
  }
}
@media (max-width: 360px) {
  .half em { font-size: 8px; letter-spacing: 0; padding: 0.15em 0.35em; }
}