/* ==========================================================================
   site-polish.css — editorial polish layer on top of the Minimal Mistakes theme.
   Loaded after main.css (see _includes/head/custom.html) so it wins the cascade.
   Theme-aware via the theme's own CSS custom properties + html[data-theme="dark"].
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  --accent:            #b0432e;   /* terracotta */
  --accent-2:          #c97b3c;   /* warm amber  */
  --accent-3:          #8c2f39;   /* garnet      */
  --bg-base:           #f3ede4;   /* warm paper  */
  --panel:             rgba(255, 252, 247, 0.74);
  --panel-solid:       #fffdf9;
  --panel-border:      rgba(120, 90, 60, 0.16);
  --rail:              rgba(176, 67, 46, 0.30);
  --dot-ring:          var(--bg-base);
  --masthead-bg:       rgba(255, 252, 247, 0.72);
  --blob-1:            rgba(176, 67, 46, 0.28);
  --blob-2:            rgba(201, 123, 60, 0.26);
  --blob-3:            rgba(199, 122, 138, 0.22);
  --blob-4:            rgba(120, 150, 140, 0.18);
  --grain-opacity:     0.05;
  /* retint the theme's link colour to the accent, site-wide */
  --global-link-color:         var(--accent);
  --global-link-color-hover:   var(--accent-3);
  --global-link-color-visited: var(--accent-3);
}

html[data-theme="dark"] {
  --accent:            #e3936b;
  --accent-2:          #e7b27a;
  --accent-3:          #f0b48d;
  --bg-base:           #1e1c22;
  --panel:             rgba(34, 31, 40, 0.40);   /* obsidian-style translucent glass */
  --panel-solid:       #2b2830;
  --panel-border:      rgba(255, 255, 255, 0.09);
  --rail:              rgba(227, 147, 107, 0.32);
  --dot-ring:          #26242a;
  --masthead-bg:       rgba(30, 28, 34, 0.62);
  --blob-1:            rgba(227, 147, 107, 0.30);
  --blob-2:            rgba(231, 178, 122, 0.22);
  --blob-3:            rgba(150, 110, 150, 0.26);
  --blob-4:            rgba(90, 130, 130, 0.22);
  --grain-opacity:     0.07;
  --global-link-color:         var(--accent);
  --global-link-color-hover:   var(--accent-3);
  --global-link-color-visited: var(--accent-3);
}

/* ---- Fonts --------------------------------------------------------------- */
body {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: 0.003em;
  background: var(--bg-base);
}
h1, h2, h3, h4, h5, h6,
.page__title, .archive__item-title, .author__name, .sidebar .author__name,
.greedy-nav .visible-links a, .page__footer {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
}
h1, h2, h3, h4, .page__title { letter-spacing: -0.012em; font-weight: 600; }
code, pre, kbd, samp, tt { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* slightly larger, airier reading column */
.page__content { font-size: 1.06rem; line-height: 1.72; }
.page__content p { margin: 0 0 1.15em; }

/* hero greeting */
.greeting {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.25rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin: 0.15rem 0 0.6rem;
  color: var(--global-text-color);
}

/* editorial lead paragraph (first paragraph of any page) */
.page__content > p:first-of-type {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.62;
  font-weight: 400;
  color: var(--global-text-color);
}
.page__content > p:first-of-type::first-letter {
  color: var(--global-text-color);
  font-family: "Fraunces", serif;
  font-weight: 600;
}

/* ---- Animated atmospheric background ------------------------------------ */
/* gradient mesh on body::before, fine grain on body::after, both fixed */
body::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 16% 18%, var(--blob-1) 0%, transparent 62%),
    radial-gradient(34% 42% at 84% 12%, var(--blob-2) 0%, transparent 58%),
    radial-gradient(46% 52% at 78% 82%, var(--blob-3) 0%, transparent 60%),
    radial-gradient(42% 50% at 22% 88%, var(--blob-4) 0%, transparent 60%);
  filter: blur(8px);
  will-change: transform;
  animation: drift 42s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0)        scale(1);    }
  50%  { transform: translate3d(-2.5%, 1.8%, 0) scale(1.08); }
  100% { transform: translate3d(2%, -2%, 0)     scale(1.04); }
}

/* keep all real content above the background layers */
.masthead, #main, .page__footer { position: relative; z-index: 1; }
/* masthead (and its overflow/hamburger dropdown) must sit ABOVE #main,
   otherwise the dropdown renders behind the floating content panel */
.masthead { z-index: 30; }
.greedy-nav .hidden-links { z-index: 31; }

/* ---- Frosted reading panel ---------------------------------------------- */
#main {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  box-shadow: 0 18px 50px -22px rgba(40, 25, 15, 0.40);
  margin-top: 2rem;
  margin-bottom: 3rem;
  padding-top: 0.6rem;
  padding-bottom: 1.4rem;
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  backdrop-filter: blur(10px) saturate(1.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #main { background: var(--panel-solid); }
}
/* Night mode: more transparent "obsidian glass" — stronger blur reads through
   the translucent panel while keeping text legible, plus a faint top highlight. */
html[data-theme="dark"] #main {
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 60px -24px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Masthead ------------------------------------------------------------ */
.masthead {
  background: var(--masthead-bg);
  border-bottom: 1px solid var(--panel-border);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}
.greedy-nav,
.greedy-nav .visible-links,
.masthead__menu-item,
.masthead__menu-item a,
#theme-toggle,
#theme-toggle a { background: transparent; }
.greedy-nav .visible-links a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.greedy-nav .visible-links a:before { background: var(--accent); height: 3px; }
#theme-toggle a:hover #theme-icon { color: var(--accent); }

/* ---- Masthead layout & spacing -------------------------------------------
   Even spacing between route links; brand left, links + toggle grouped right.
   .visible-links MUST stay content-sized (inline-flex, NOT block) so the
   greedy-nav JS overflow/collapse measurement still works. */
.masthead__inner-wrap { padding-top: 0.7em; padding-bottom: 0.7em; }
.greedy-nav .visible-links {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
}
.greedy-nav .visible-links li { display: flex; align-items: center; }
.greedy-nav .visible-links a { margin: 0; padding: 0.45rem 0; }
.greedy-nav .visible-links .masthead__menu-item--lg {
  padding-right: 0;
  margin-right: 2.6rem;
}
.greedy-nav .visible-links .masthead__menu-item--lg a {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}
.greedy-nav .visible-links #theme-toggle { margin-left: 0.4rem; }
.greedy-nav .visible-links #theme-toggle a {
  align-items: center;
  padding: 0.45rem 0;
  line-height: 1;
}

/* collapsed-nav hamburger + dropdown — replace the theme's gray box */
.greedy-nav button,
.greedy-nav .greedy-nav__toggle {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.greedy-nav button:hover,
.greedy-nav .greedy-nav__toggle:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}
.greedy-nav .navicon,
.greedy-nav .navicon::before,
.greedy-nav .navicon::after { background: var(--global-masthead-link-color); }
.greedy-nav .hidden-links {
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px -14px rgba(40, 25, 15, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.greedy-nav .hidden-links a { color: var(--global-text-color); }
.greedy-nav .hidden-links a:hover { color: var(--accent); background: transparent; }
.greedy-nav .hidden-links::before { display: none; }

/* ---- Author sidebar ------------------------------------------------------ */
.author__avatar img {
  border: 2px solid var(--panel-border);
  box-shadow: 0 6px 18px -8px rgba(40, 25, 15, 0.45);
}
.author__name { font-weight: 600; letter-spacing: -0.01em; }
.author__bio  { font-style: italic; opacity: 0.92; }

/* ---- Links --------------------------------------------------------------- */
.page__content a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.2s ease;
}
.page__content a:not(.btn):hover { background-size: 100% 1.5px; }

/* ==========================================================================
   News timeline
   ========================================================================== */
.news { margin-top: 2.4rem; }
.section-heading {
  font-family: "Fraunces", serif;
  font-size: 1.95rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--panel-border), transparent);
}
.section-heading::before {
  content: "";
  width: 1.7rem;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  column-gap: 1.4rem;
  align-items: start;
}
.timeline__year {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 0.08rem;
  white-space: nowrap;
}
.timeline__text {
  position: relative;
  border-left: 2px solid var(--rail);
  padding: 0 0 1.5rem 1.5rem;
  font-size: 1.04rem;
  line-height: 1.55;
  transition: transform 0.22s ease;
}
.timeline__item:last-child .timeline__text { padding-bottom: 0.2rem; }
.timeline__text::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.42em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--dot-ring), 0 0 0 5px var(--rail);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.timeline__item:hover .timeline__text { transform: translateX(3px); }
.timeline__item:hover .timeline__text::before {
  transform: scale(1.35);
  background: var(--accent-2);
}
.timeline__text strong { font-weight: 600; color: var(--global-text-color); }

/* ---- Expandable news (first 4 shown; rest behind "Show more") ------------ */
.news-toggle-cb {            /* visually hidden but focusable */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.timeline__item.news-extra { display: none; }
.news-toggle-cb:checked ~ .timeline .timeline__item.news-extra {
  display: grid;
  opacity: 1;                /* override the page-load reveal state */
  transform: none;
  animation: none;
}
/* the control: a vertical 3-dot affordance that animates and reveals its
   label ("read more news") on hover. It's a <label> (clickable, no JS). */
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.4rem 0 0 4.55rem;  /* align under the timeline text column */
  padding: 0.2rem 0.25rem;
  color: var(--accent);
  font-family: "Fraunces", serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.news-more__dots {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: transform 0.3s ease;
}
.news-more__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.25s ease;
}
/* hover: gentle staggered bounce of the dots */
.news-more:hover .news-more__dots i { animation: newsDot 0.7s ease-in-out infinite; }
.news-more:hover .news-more__dots i:nth-child(2) { animation-delay: 0.12s; }
.news-more:hover .news-more__dots i:nth-child(3) { animation-delay: 0.24s; }
@keyframes newsDot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px) scale(1.3); }
}
/* label text — hidden until hover, then slides + fades in */
.news-more__t {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.32s ease, opacity 0.25s ease;
}
.news-more__t--less { display: none; }
.news-more:hover .news-more__t--more { max-width: 14ch; opacity: 1; }
/* expanded: swap label to "show less" (dots stay vertical) */
.news-toggle-cb:checked ~ .news-more .news-more__t--more { display: none; }
.news-toggle-cb:checked ~ .news-more .news-more__t--less { display: inline; }
.news-toggle-cb:checked ~ .news-more:hover .news-more__t--less { max-width: 14ch; opacity: 1; }
/* keyboard focus ring on the dots */
.news-toggle-cb:focus-visible ~ .news-more .news-more__dots {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .news-more:hover .news-more__dots i { animation: none; }
}

/* ==========================================================================
   Page-load reveal (staggered) — disabled for reduced-motion users
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .greeting,
  .page__content > p:first-of-type,
  .news .section-heading,
  .timeline__item {
    opacity: 0;
    transform: translateY(10px);
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .greeting { animation-delay: 0s; }
  .page__content > p:first-of-type { animation-delay: 0.1s; }
  .news .section-heading           { animation-delay: 0.18s; }
  .timeline__item:nth-child(1) { animation-delay: 0.28s; }
  .timeline__item:nth-child(2) { animation-delay: 0.36s; }
  .timeline__item:nth-child(3) { animation-delay: 0.44s; }
  .timeline__item:nth-child(4) { animation-delay: 0.52s; }
  .timeline__item:nth-child(5) { animation-delay: 0.60s; }
  .timeline__item:nth-child(6) { animation-delay: 0.68s; }
  .timeline__item:nth-child(7) { animation-delay: 0.76s; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 600px) {
  #main { margin-top: 1rem; border-radius: 12px; }
  .page__content > p:first-of-type { font-size: 1.04rem; }
  .timeline__item { grid-template-columns: 2.9rem 1fr; column-gap: 1rem; }
  .section-heading { font-size: 1.7rem; }
  .news-more { margin-left: 3.9rem; }
}

/* ==========================================================================
   Sidebar fit fix — let long links WRAP instead of forcing one line.
   The theme's `.author__urls li { white-space: nowrap }` kept "Georgia
   Institute of Technology" on one line, overflowing the percentage-width
   sidebar; combined with `.sidebar { overflow-y: auto }` that produced a
   horizontal scrollbar. Allowing the link to wrap fixes it with NO width
   change, so the content column never overlaps the sidebar (at any width).
   ========================================================================== */
.sidebar .author__urls li { white-space: normal; }
.sidebar .author__urls li a { display: inline-block; line-height: 1.3; }
.sidebar { overflow-x: hidden; }
/* On wide desktops (>=1200px) the fixed sidebar can grow enough for the
   employer name to sit on ONE line while staying clear of the content text
   (there's ~60px of dead space before it). Below 1200px the column is too
   narrow, so the link keeps wrapping (rule above). */
@media screen and (min-width: 1200px) {
  .sidebar { width: 14rem; max-width: 14rem; }
  .sidebar .author__urls li { white-space: nowrap; }
}
/* Mobile/tablet: drop the "Follow" toggle button and show the author links
   inline (no floating dropdown) so the contact/social links are always visible. */
.author__urls-wrapper button { display: none; }
@media screen and (max-width: 1023px) {
  .author__urls-wrapper .author__urls {
    display: block;
    position: static;
    margin: 0.4rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .author__urls-wrapper .author__urls::before,
  .author__urls-wrapper .author__urls::after { content: none; display: none; }
}
/* Phones/small tablets (<925px): the theme lays the profile out as a table row
   (tiny 36px avatar on the left). Stack it instead — large avatar on top,
   then name, bio, and links, all centered. */
@media screen and (max-width: 924px) {
  .author__avatar { display: block; width: 116px; margin: 0 auto 0.85rem; padding: 0; float: none; }
  .author__avatar img { width: 116px; height: 116px; max-width: 116px; border-radius: 50%; object-fit: cover; display: block; }
  .author__content { display: block; text-align: center; }
  .author__name, .author__bio { text-align: center; }
  .author__bio { margin-top: 0.15rem; }
  .author__urls-wrapper { display: block; text-align: center; }
  .author__urls { text-align: center; }
  .author__urls li { display: block; }
}

/* ==========================================================================
   Night sky — constellation drift (dark mode only). The inline script in
   _layouts/default.html fills .cd-field--a / --b with stars; the two layers
   drift slowly in opposite directions (parallax), stars twinkle, and a rare
   shooting star crosses. Layered above body::before/::after (z-index 0),
   below content (z-index 1). Disabled under prefers-reduced-motion.
   ========================================================================== */
#constellation-drift { display: none; }
html[data-theme="dark"] #constellation-drift {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
html[data-theme="dark"] #constellation-drift .cd-field {
  position: absolute;
  inset: -3%;
  will-change: transform;
}
html[data-theme="dark"] #constellation-drift .cd-field--a { animation: cd-drift-a 70s ease-in-out infinite alternate; }
html[data-theme="dark"] #constellation-drift .cd-field--b { animation: cd-drift-b 56s ease-in-out infinite alternate; }
html[data-theme="dark"] #constellation-drift .cd-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 1.6px);
  height: var(--s, 1.6px);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 0 4px 1px rgba(255, 253, 248, 0.5), 0 0 9px 2px rgba(214, 226, 255, 0.18);
  filter: blur(0.4px);
  opacity: 0.5;
  will-change: opacity, transform;
  animation: cd-twinkle var(--d, 6s) ease-in-out infinite;
  animation-delay: var(--t, 0s);
}
html[data-theme="dark"] #constellation-drift .cd-star.cd-lg {
  box-shadow: 0 0 6px 1.5px rgba(255, 253, 248, 0.6), 0 0 14px 3px rgba(214, 226, 255, 0.2);
  filter: blur(0.5px);
}
html[data-theme="dark"] #constellation-drift .cd-star.cd-warm {
  background: rgba(247, 217, 198, 0.92);
  box-shadow: 0 0 5px 1px rgba(227, 147, 107, 0.4), 0 0 12px 3px rgba(227, 147, 107, 0.15);
}
html[data-theme="dark"] #constellation-drift .cd-shoot {
  position: absolute;
  top: var(--sy);
  left: var(--sx);
  width: 90px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 253, 248, 0) 0%, rgba(255, 253, 248, 0.85) 60%, rgba(255, 253, 248, 0.98) 100%);
  border-radius: 1px;
  opacity: 0;
  transform: rotate(18deg);
  filter: blur(0.4px) drop-shadow(0 0 5px rgba(255, 253, 248, 0.6));
  will-change: transform, opacity;
  animation: cd-shoot 1.5s cubic-bezier(0.3, 0.1, 0.2, 1) forwards;
}
@keyframes cd-twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.92); } 50% { opacity: 0.95; transform: scale(1.06); } }
@keyframes cd-drift-a { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(3.8%, 2.6%, 0); } }
@keyframes cd-drift-b { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-3.2%, -2.2%, 0); } }
@keyframes cd-shoot {
  0%   { opacity: 0;    transform: rotate(18deg) translateX(0)    scaleX(0.4); }
  10%  { opacity: 0.95; transform: rotate(18deg) translateX(24px) scaleX(1); }
  100% { opacity: 0;    transform: rotate(18deg) translateX(320px) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] #constellation-drift .cd-field { animation: none; }
  html[data-theme="dark"] #constellation-drift .cd-star { animation: none; opacity: 0.6; }
  html[data-theme="dark"] #constellation-drift .cd-shoot { display: none; }
}