/* =====================================================================
   Refine — content-area polish that ties the light body to the cosmic
   hero. Loaded LAST so it layers on top of academic.css / night-theme.css.
   All motion is gated by prefers-reduced-motion. Dark-mode variants follow
   each block so the immersive night theme stays intact.
   ===================================================================== */

:root {
  --rf-accent: #5a73c8;          /* starlight indigo */
  --rf-accent-soft: #8aa6e8;
  --rf-gold: #ffc24d;            /* echoes the Highlight constellation star */
}

/* ===== Section headings: gradient accent bar + faint icon glow ===== */
.md-heading {
  position: relative;
  padding-bottom: 12px;
}
.md-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rf-accent), var(--rf-accent-soft) 60%, transparent);
}
.md-heading i {
  color: var(--rf-accent);
  text-shadow: 0 0 14px rgba(90, 115, 200, 0.30);
}
html[data-theme="dark"] .md-heading::after {
  background: linear-gradient(90deg, #8ab4ff, #6f8dd6 60%, transparent);
}
html[data-theme="dark"] .md-heading i {
  color: #9bb5e8;
  text-shadow: 0 0 16px rgba(138, 180, 255, 0.35);
}

/* ===== Body links nudged toward the cosmic indigo (light mode only;
   night-theme rules win in dark via higher specificity) ===== */
.page-content a { color: #3a57b0; }
.page-content a:visited { color: #3a57b0; }
.page-content a:hover { color: #1f3168; }

/* ===== Scroll reveal (class added by reveal.js → progressive enhancement) ===== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ===== Timeline polish ===== */
.timeline-entry::before {
  background: radial-gradient(circle at 35% 35%, #c0cef0, var(--rf-accent));
  box-shadow: 0 0 0 4px rgba(90, 115, 200, 0.16), 0 0 10px rgba(90, 115, 200, 0.40);
}
.timeline-entry__logo {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.timeline-entry:hover .timeline-entry__logo {
  transform: translateY(-2px) scale(1.03);
  filter: saturate(1);
}

/* incoming PhD entry — calm static golden node, echoing the Highlight star
   (a steady glow reads as "destination", a perpetual pulse read as a nervous tic) */
#education .timeline-entry:first-child::before {
  background: radial-gradient(circle at 35% 35%, #fff2cf, var(--rf-gold));
  box-shadow: 0 0 0 4px rgba(255, 194, 77, 0.20), 0 0 16px rgba(255, 194, 77, 0.55);
}
html[data-theme="dark"] .timeline-entry::before {
  background: radial-gradient(circle at 35% 35%, #cfe1ff, #6f8dd6);
  box-shadow: 0 0 0 4px rgba(138, 180, 255, 0.16), 0 0 10px rgba(138, 180, 255, 0.40);
}

/* ===== Info cards: hover lift + reveal-on-hover accent top line ===== */
.info-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rf-accent), var(--rf-accent-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(28, 46, 69, 0.12);
  border-color: #cdd8ec;
}
.info-card:hover::before { transform: scaleX(1); }
html[data-theme="dark"] .info-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  border-color: rgba(138, 180, 255, 0.30);
}
html[data-theme="dark"] .info-card::before {
  background: linear-gradient(90deg, #8ab4ff, #6f8dd6);
}

/* ===== News list: hover tint + softer gradient date pill ===== */
.news-list__item {
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
  transition: background 0.25s ease;
}
.news-list__item:hover { background: rgba(90, 115, 200, 0.05); }
.news-list__date {
  background: linear-gradient(135deg, #eef3fb, #e2eaf8);
}
html[data-theme="dark"] .news-list__item:hover { background: rgba(138, 180, 255, 0.07); }
html[data-theme="dark"] .news-list__date {
  background: linear-gradient(135deg, rgba(138, 180, 255, 0.14), rgba(138, 180, 255, 0.06));
}

/* ===== Mobile hero fixes =====
   The hero card was shifting off-screen on phones: the desktop entrance
   keyframe centers via translateX(-50%), but the mobile keyframe
   (heroRisePlain) animates translateY only, and its `both` fill clobbers
   the base translateX(-50%) — so the card lost its horizontal centering.
   Fix: center the card with symmetric left/right instead of transform, so
   the translateY-only entrance can't break it. */
@media screen and (max-width: 600px) {
  .profile-wrapper {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
  }
  #my-name {
    font-size: 22px;
    line-height: 1.25;
  }
}

/* ===== Accessibility: a visible, consistent focus ring everywhere =====
   Several elements previously did `outline: none` with no compliant
   replacement (theme toggle, constellation stars) — restore real focus. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--rf-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
.constellation__star:focus-visible {
  outline: 2px solid #ffe6a8;
  outline-offset: 4px;
}
.theme-toggle:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
html[data-theme="dark"] :focus-visible { outline-color: #8ab4ff; }
html[data-theme="dark"] .constellation__star:focus-visible { outline-color: #ffe6a8; }

/* ===== Education logos: consistent bounding box (were 170px, over-dominant) =====
   Let the degree text lead; logos read as marks, not a sponsor wall. */
@media screen and (min-width: 769px) {
  #education .timeline-entry__meta,
  #experiences .timeline-entry__meta { flex: 0 0 160px; }
}
#education .timeline-entry__logo,
#experiences .timeline-entry__logo {
  width: 88px;
  max-height: 60px;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: saturate(0.92);
}
@media screen and (max-width: 768px) {
  #education .timeline-entry__logo,
  #experiences .timeline-entry__logo { width: 78px; max-height: 52px; }
}

/* ===== Heading icon spacing: uniform optical gap regardless of glyph width ===== */
.md-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}
.md-heading i { margin-right: 0; }

/* ===== Craft: reading measure, rhythm, weights ===== */
.page-content { padding: 46px 0 64px; }
.bio-body p,
.hobbies-content p { max-width: 68ch; }
.bio-body p { line-height: 1.7; }
.info-card__text { font-weight: 400; letter-spacing: 0.01em; }
.info-card { border-radius: 12px; }

/* dates: tabular figures (no width jitter) + small caps on the news pills */
.news-list__date,
.timeline-entry__time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.news-list__date {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}
.timeline-entry__time { letter-spacing: 0.02em; }

/* bio links: permanent, subtle underline (discoverable without hover) */
.bio-body a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(90, 115, 200, 0.40);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.bio-body a:hover { text-decoration-color: var(--rf-accent); color: #1f3168; }
html[data-theme="dark"] .bio-body a { text-decoration-color: rgba(138, 180, 255, 0.45); }

/* tagline: muted caption feel, corrected italic tracking */
#my-tagline em { color: rgba(42, 58, 80, 0.72); letter-spacing: -0.005em; }
html[data-theme="dark"] #my-tagline em { color: #cdd9f7; }

/* nav links: underline-from-center, echoing the section-heading accent bar */
.site-nav .page-link { position: relative; }
.site-nav .page-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -3px;
  height: 2px;
  border-radius: 1px;
  background: var(--rf-accent);
  transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav .page-link:hover::after,
.site-nav .page-link:focus-visible::after { left: 0; right: 0; }
html[data-theme="dark"] .site-nav .page-link::after { background: #8ab4ff; }

/* social icons: real flex layout (drops the absolute `top:25px` hack) */
.social-media {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.social-media .icon-button { top: 0; margin: 0; }

/* ===== Mobile nav: show the links inline instead of a hover-only menu =====
   The hover-reveal trigger was unreachable by keyboard and touch. */
@media screen and (max-width: 600px) {
  .site-nav { position: static; border: none; background: transparent; text-align: center; }
  .site-nav .trigger { display: block; }
  .site-nav .page-link { display: inline-block; padding: 5px 8px; }
}

/* ===== Cosmic touch: a whisper-faint star substrate behind light-mode content,
   so the deep-space hero doesn't end at a hard seam. Static, ~paper texture,
   strongest near the top and thinning downward. Never in dark mode. ===== */
.page-content { position: relative; }
html:not([data-theme="dark"]) .page-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(90, 115, 200, 0.13) 0.6px, transparent 0.7px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 38%, transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 38%, transparent 78%);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .timeline-entry__logo,
  .info-card,
  .info-card::before,
  .site-nav .page-link::after { transition: none; }
}