/* ==========================================================================
   Base & Variables
   ========================================================================== */

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-grey-f5: #f5f5f7;
  --color-grey-ui: #ececf1;
  --color-red-bright: #cc0000;
  --color-red-soft: #aa0000;
  --shadow-soft: 0 6px 16px rgba(0,0,0,.08);
  --shadow-soft-lg: 0 10px 24px rgba(0,0,0,.12);
}

/* Avoid horizontal scroll when using full-bleed blocks */
body {
  overflow-x: hidden;
}

/* Visually hidden (for accessible labels/headings) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Remove top margin after navbar */
main.content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

main.content h1:first-of-type,
main.content h2:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove vertical gaps between stacked full-bleed sections */
.full-bleed h1,
.full-bleed h2,
.full-bleed h3,
.full-bleed p {
  margin-top: 5rem;
  margin-bottom: 0;
}

.font-rock {
  font-family: 'Rock Salt', cursive;
}

/* ==========================================================================
   Title - homepage
   ========================================================================== */

#title-block-header {
  text-align: center;
}

#title-block-header .title {
  color: white;
  margin-top: 1rem;
}

/* ==========================================================================
   Hero typing (typed.js)
   ========================================================================== */

#typed-output,
.typed-cursor {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Tamil", "Tamil Sangam MN", Latha, sans-serif;
  font-size: clamp(2rem, 8vw, 8rem);
  font-weight: bold;
  line-height: 1;
  color: var(--color-white);
}

.typed-cursor {
  margin-left: .1em;
  font-weight: 500;
}

.scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.scroll-down .arrow {
  font-size: 1rem;
  color: #fff;
  animation: flash-bob 1.2s ease-in-out infinite;
}

@keyframes flash-bob {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  40%  { opacity: 0; transform: translateY(6px) scale(1.1); }
  60%  { opacity: 0; transform: translateY(6px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

/* Full-bleed: make a block span the viewport width even inside a centered container */
.full-bleed {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Make Quarto "page-full" sections truly full width */
.page-columns.page-full { margin: 0; }
.page-columns.page-full + .page-columns.page-full { margin-top: 0; }

.page-columns.page-full .column-page {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* Full-bleed on Quarto pages */
.page-full .content { max-width: none; padding-left: 0; padding-right: 0; }
.page-full main       { padding-left: 0; padding-right: 0; }

/* Background helper */
.bg-grey-f5 { background-color: var(--color-grey-f5); }

/* Section spacing helpers */
.section-gray { background: var(--color-grey-f5); }
.section-pad  { padding: 4rem 0; }

/* ==========================================================================
   About page bits
   ========================================================================== */

.about-photo {
  max-width: 280px;
  width: 100%;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Waveform look */
#waveform {
  height: 120px;
  background: var(--color-white);
  overflow: hidden;
}

/* Transcript */
.transcript p {
  margin: 0 0 .6rem 0;
  padding: .4rem .6rem;
  border-radius: .5rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.transcript p:hover   { background-color: var(--color-grey-ui); }
.transcript p.highlight {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Social icon grid */
.social-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 1.25rem;
  justify-content: center;
}
.social-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  border-radius: .75rem;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.social-logos a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-lg);
}
.social-logos img {
  width: 100%;
  height: auto;
}
/* Style only logos inside Jump section */
.jump-logos img {
  width: 48px;
  height: auto;
}
.jump-logos a {
  display: flex;
  flex-direction: column;   /* stack image + text */
  align-items: center;
  text-decoration: none;
  color: inherit;           /* inherit text color */
}
.jump-logos a span {
  margin-top: .25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.nav-page p {
  margin-bottom: 4rem;   /* space after each paragraph */
  line-height: 2.6;      /* more readable line spacing */
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  max-width: 900px;      /* optional: limit max size */
  margin: 1.5rem auto 0; /* center with some top margin */
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.slides-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
}

.slides-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Make iframe taller on phones in portrait */
@media (max-width: 640px) and (orientation: portrait) {
  .slides-wrapper {
    padding-bottom: 75%; /* 4:3 ratio — taller */
  }
}

/* ================================
   Static (non-expandable) text cols
   ================================ */

/* Static (non-expandable) text columns */
.static-item {
  background: #000 !important;  /* black columns */
  color: #fff !important;       /* white text */
  cursor: default;
  max-height: none;
  transition: none;

  /* center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* fixed-but-responsive height */
  min-height: clamp(220px, 38vh, 420px);
  padding: 2rem;
}

/* readable line length for the text block */
.static-item .static-text {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 32rem;
}

/* kill any hover/transform inherited from cards */
.phd-grid--static .phd-item { transform: none !important; }
.phd-grid--static .phd-item:hover { transform: none !important; }

/* ==========================================================================
   PhD page: grid, cards, image, poem, chart, footer/signature
   ========================================================================== */

/* Remove space between navbar and first section on PhD page */
body.page-phd main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page-phd .content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page-phd .page-columns:first-of-type,
body.page-phd .full-bleed:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Grid: three columns, edge-to-edge */
.phd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;                       /* set >0 for gutters if you like */
  margin: 0;
  padding: 0 0 2rem;            /* tiny bottom breathing room */
}

/* Cards (collapsed state) */
.phd-item {
  background: #fff;
  padding: 2rem;
  cursor: pointer;
  overflow: hidden;
  max-height: 700px;            /* teaser height */
  border-radius: 0;
  transition: max-height .35s ease, transform .2s ease, opacity .2s ease;
}

/* Make static text columns never clip */
.phd-item.static-item {
  overflow: visible !important;
  max-height: none !important;
}

/* Expanded mode (canonical rule) */
.phd-grid.expanded-mode { grid-template-columns: 1fr; }
.phd-grid.expanded-mode .phd-item:not(.expanded) { display: none; }

.phd-grid.expanded-mode .phd-item.expanded {
  grid-column: 1 / -1;
  max-height: none;
  min-height: 100vh;            /* full-screen height */
  padding: 4rem 6vw;            /* page-aligned inner padding */
  position: relative;           /* anchor footer/signature */
}

/* Only the section containing an expanded grid sits above neighbors */
.full-bleed.section-on-top {
  position: relative;
  z-index: 10;
}

/* Expanded cards paint a solid background so nothing shows through */
.phd-grid.expanded-mode .phd-item.expanded {
  background: #fff; /* override any transparency */
}

/* Thick black bars above & below each 3-column section */
.phd-band {
  border-top: 10px solid #000;
  border-bottom: 10px solid #000;
  /* vertical breathing room between sections */
  margin-block: 0;
}

/* Band title inside the black bars */
.phd-band-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 200;
  padding: 1rem 0;         /* breathing room above/below */
  background: #000;        /* same as band color */
  color: #fff;             /* white text */
  border-bottom: 10px solid #000; /* ensures the band’s bottom bar stays intact */
}

/* ----------------------------- Image block ------------------------------ */

.phd-image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 4px;
}

/* Collapsed: crop to show the left side */
.phd-image-crop {
  width: 100%;
  height: 650px;                /* visible slice height */
  overflow: hidden;
  margin-bottom: 1rem;
}
.phd-image-crop .phd-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left center;
}

/* Expanded: reveal full image */
.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop { height: auto; }
.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop .phd-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}

/* ------------------------------- Poem ---------------------------------- */

.poem {
  font-family: 'Kenac', serif;
  line-height: 1.6;
}

/* Collapsed: centre the first word and frame it with a pattern */
.phd-grid:not(.expanded-mode) .poem {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.poem-first {
  position: relative;                 /* for ::before/::after */
  display: block;
  font-weight: bold;
  color: var(--color-red-bright, #cc0000);
  font-size: clamp(2rem, 10vh, 6rem);
  line-height: 1.2;                   /* a touch more room for the pattern */
}

/* Top pattern */
.phd-grid:not(.expanded-mode) .poem-first::before {
  content: "⸻ 𓂃𓂂𓏲𓏲𓂂𓂃 ⸻";
  display: block;
  font-size: clamp(.85rem, 2.4vw, 1rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: inherit;                     /* same red as the word */
}

/* Bottom pattern */
.phd-grid:not(.expanded-mode) .poem-first::after {
  content: "⸻ 𓂃𓂂𓏲𓏲𓂂𓂃 ⸻";
  display: block;
  font-size: clamp(.85rem, 2.4vw, 1rem);
  line-height: 1.2;
  margin-top: 0.5rem;
  color: inherit;
}

/* Hide the rest of the poem when collapsed */
.poem-rest {
  display: none;
  color: var(--color-red-soft, #aa0000);
}

/* Expanded: centre full poem and use calmer sizes/colour */
.phd-grid.expanded-mode .phd-item.expanded .poem {
  display: flex;
  flex-direction: column;
  align-items: center;       /* center horizontally */
  justify-content: center;   /* center vertically */
  text-align: center;
  min-height: 100vh;         /* full-screen height to allow vertical centering */
  width: 100%;
}

.phd-grid.expanded-mode .phd-item.expanded .poem-first {
  display: block;
  margin-bottom: .5rem;
  font-weight: normal;
  font-size: clamp(2rem, 4vh, 3rem);
  color: var(--color-red-soft, #aa0000);
}

.phd-grid.expanded-mode .phd-item.expanded .poem-rest {
  display: block;
  font-size: 1.2rem;
  color: var(--color-red-soft, #aa0000);
}

/* ------------------------------- Chart --------------------------------- */

/* Base container */
.chart-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Collapsed state:
   - show the first graph as a thumbnail
   - hide the slider UI */
.phd-item--chart .chart-thumb { display: block; width: 100%; height: auto; }
.phd-item--chart .slider      { display: none; }

/* Expanded state:
   - hide thumb, show slider
   - stack links directly under slider, right-aligned, no gap */
.phd-grid.expanded-mode .phd-item.expanded.phd-item--chart .chart-thumb { display: none; }
.phd-grid.expanded-mode .phd-item.expanded.phd-item--chart .slider {
  display: block;
  width: min(900px, 88vw);
  margin: 0; /* no extra gap above dots/footer */
}

/* Slider layout */
.slider {
  position: relative;
  overflow: hidden;   /* container clips the moving track */
}

.slides {
  display: flex;
  /* overflow: hidden;  <-- removed */
  width: 100%;
  touch-action: pan-y;
  margin: 0;
  padding: 0;
}

.slide {
  min-width: 100%;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Prevent swipe gestures & text selection inside the slider */
.slider, .slides {
  touch-action: none;     /* ignore horizontal swipes */
  user-select: none;      /* avoid accidental text/image selection */
}

/* Nav arrows — plain text < and > */
.slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;         /* remove grey background */
  color: #000;              /* black arrows */
  font-size: 2rem;          /* arrow size */
  font-weight: 700;         /* make them bold */
  border: none;             /* remove border */
  width: auto;              /* shrink to text width */
  height: auto;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  line-height: 1;
  box-shadow: none;         /* no shadow */
}

.slider .nav.prev { left: 0.75rem; }
.slider .nav.next { right: 0.75rem; }

.slider .nav:hover {
  color: #4739a2;           /* accent color on hover */
}

/* Phones: slightly smaller */
@media (max-width: 640px) {
  .slider .nav {
    font-size: 1.5rem;
  }
}

/* Dots */
.slider .dots {
  display: flex;
  gap: .4rem;
  justify-content: center;
  margin-top: .5rem; /* sits snug under the image */
}
.slider .dots button {
  width: .5rem; height: .5rem;
  border-radius: 999px;
  border: 0;
  background: #cfcfcf;
  cursor: pointer;
}
.slider .dots button[aria-selected="true"] { background: #4739a2; }

/* Footer directly under slider, stacked vertically, aligned right */
.phd-grid.expanded-mode .phd-item.expanded.phd-item--chart .phd-footer {
  position: static;          /* stay in normal flow */
  display: flex;
  flex-direction: column;    /* stack links */
  align-items: flex-end;     /* right align */
  gap: 0.25rem;              /* tiny space between links */
  margin: 0; padding: 0;     /* no extra gap */
}

/* (Optional) Keep support for a D3 chart if you switch back later */
.phd-grid:not(.expanded-mode) .chart {
  width: 70%;
  max-width: 560px;
  height: 260px;
}
.phd-grid.expanded-mode .phd-item.expanded.phd-item--chart .chart {
  width: 100%;
  height: 520px;
  margin-bottom: 0;
}

/* Expanded chart layout: stack slider and footer, no gaps */
.phd-grid.expanded-mode .phd-item.expanded.phd-item--chart .chart-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* slider full width */
  justify-content: flex-start;
  gap: 0;                   /* no gap between slider and footer */
  margin: 0;
  padding: 0;
}

.phd-grid.expanded-mode .phd-item.expanded.phd-item--chart .slider {
  display: block;
  width: min(900px, 88vw);
  margin: 0;
  align-self: center;       /* keep slider centered in the card */
}

/* D3 tooltip (harmless if not using D3) */
.d3-tip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  padding: .35rem .5rem;
  border-radius: .25rem;
  font-size: .85rem;
  background: rgba(0,0,0,.8);
  color: var(--color-white, #fff);
  transform: translate(-50%, -120%);
  white-space: nowrap;
}

/* -------------------------
   FOOTER LINKS & SIGNATURE
   ------------------------- */

/* Hidden by default */
.phd-footer,
.phd-signature {
  display: none;
}

/* Expanded cards anchor positioned children */
.phd-grid.expanded-mode .phd-item.expanded {
  position: relative;
}

/* ===== Image card (artwork): footer & signature over the image ===== */
.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop {
  position: relative; /* anchor to image */
}

.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop .phd-footer {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop .phd-signature {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: block;
  width: clamp(2rem, 5vw, 4rem); /* smaller signature */
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35)); /* white */
}

/* -------------------------
   FOOTER LINKS & SIGNATURE
   ------------------------- */

/* Hidden by default */
.phd-footer,
.phd-signature {
  display: none;
}

/* Expanded cards anchor positioned children */
.phd-grid.expanded-mode .phd-item.expanded {
  position: relative;
}

/* ===== Image card (artwork): footer & signature over the image ===== */
.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop {
  position: relative; /* anchor to image */
}

.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop .phd-footer {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.phd-grid.expanded-mode .phd-item.expanded .phd-image-crop .phd-signature {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: block;
  width: clamp(2rem, 5vw, 4rem); /* smaller signature */
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35)); /* white */
}

/* ===== Poem card: footer sits directly under the poem, centered ===== */
.phd-grid.expanded-mode .phd-item.expanded.phd-item--poem .poem {
  display: block;           /* normal flow */
  text-align: center;
  min-height: auto;         /* no full-screen stretch */
  margin-bottom: 0.5rem;    /* snug gap before links */
}

.phd-grid.expanded-mode .phd-item.expanded.phd-item--poem .phd-footer {
  position: static;         /* not absolute — sits under poem */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

/* ===== Chart card: (handled in Chart section) — no rules here ===== */

/* -------------------------
   LINK COLOURS
   ------------------------- */
.phd-link {
  font-size: 0.95rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

/* Light background → dark link text */
.phd-item.expanded.light-bg .phd-link {
  color: #222;
  border-color: #222;
}

/* Dark background → white link text */
.phd-item.expanded.dark-bg .phd-link {
  color: #fff;
  border-color: #fff;
}

.phd-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* -------------------------
   RESPONSIVE TWEAKS
   ------------------------- */
@media (max-width: 640px), (max-width: 768px) and (orientation: portrait) {

  /* 1) Stack the three cards */
  .phd-grid {
    grid-template-columns: 1fr;     /* one column */
    gap: 0;
  }

  /* 2) Comfortable padding for small screens */
  .phd-item {
    padding: 1rem;
    max-height: none;
  }

  /* 3) Expanded card: reduce inner padding */
  .phd-grid.expanded-mode .phd-item.expanded {
    padding: 1.25rem;
    min-height: 100svh;
  }

  /* 4) Image slice shorter teaser height */
  .phd-image-crop {
    height: 50vh;
    margin-bottom: 0.5rem;
  }

  /* 5) Poem typography tweaks */
  .poem-first {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }
  .phd-grid.expanded-mode .phd-item.expanded .poem-first {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  }
  .phd-grid.expanded-mode .phd-item.expanded .poem-rest {
    font-size: 1rem;
  }

  /* 6) Slider arrows & dots compact */
  .slider { padding-inline: 0.5rem; }
  .slider .nav { width: 2rem; height: 2rem; }
  .slider .dots { margin-top: 0.35rem; }

  /* 7) Footer links & signature adjustments */
  .phd-grid.expanded-mode .phd-item.expanded .phd-footer {
    gap: 0.5rem;
  }
  .phd-grid.expanded-mode .phd-item.expanded .phd-image-crop .phd-footer {
    left: 0.5rem;
    bottom: 0.5rem;
  }
  .phd-grid.expanded-mode .phd-item.expanded .phd-image-crop .phd-signature {
    right: 0.5rem;
    bottom: 0.5rem;
    width: clamp(1.5rem, 14vw, 3rem);
  }
  /* 8) Section bars: tighter spacing on small screens */
  .phd-band { margin-block: 1.25rem; }
}