/* ---- "Research x Studio" toggle ---- */
:root{
  --bg: #fbfbfd;
  --fg: #111114;
  --muted: rgba(17,17,20,.72);
  --card: #ffffff;
  --border: rgba(17,17,20,.12);
  --accent: #2563eb;
  --accent2: #7c3aed;
}

body.atelier{
  --bg: #0b0b10;
  --fg: #f5f5f7;
  --muted: rgba(245,245,247,.78);
  --card: rgba(255,255,255,.06);
  --border: rgba(245,245,247,.16);
  --accent: #ff4bd2;
  --accent2: #38bdf8;
}

html, body{
  background: var(--bg);
  color: var(--fg);
}

/* A subtle “generative” noise overlay (pure CSS, no images). */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 10%, var(--accent), transparent 42%),
    radial-gradient(circle at 80% 30%, var(--accent2), transparent 38%),
    radial-gradient(circle at 40% 90%, var(--accent), transparent 45%);
  filter: blur(28px) saturate(120%);
}

a{ color: var(--accent); }
a:hover{ opacity: .9; }

.cardish{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 18px;
  padding: 1rem 1.1rem;
}

.small{
  color: var(--muted);
  font-size: .95rem;
}

/* Floating toggle button */
#modeToggle{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;

  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 999px;
  padding: .55rem .8rem;
  font: inherit;
  cursor: pointer;

  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
#modeToggle:hover{ transform: translateY(-1px); }
#modeToggle:active{ transform: translateY(0px); }

/* Layout + type */
:root{
  --radius: 18px;
}

main.content{
  max-width: 980px;
}

h1, h2, h3{
  letter-spacing: -0.02em;
}

.quarto-title-block .title{
  font-size: clamp(2.0rem, 3.2vw, 3.0rem);
  margin-bottom: .25rem;
}

/* Nicer navbar (subtle glass) */
.navbar{
  backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--bg), transparent 18%);
  border-bottom: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
}

/* Publication list as “cards” */
#refs .csl-entry{
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg), var(--fg) 4%);
  border: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
  margin: .7rem 0;
}
#refs .csl-entry:hover{
  transform: translateY(-1px);
}

.studio-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: start;
  justify-items: stretch;
}

.studio-grid > *{
  min-width: 0 !important;
  width: 100% !important;
  grid-column: auto !important; /* critical: stops full-row spanning */
}

/* Optional: stack only on truly small screens */
@media (max-width: 700px){
  .studio-grid{
    grid-template-columns: 1fr !important;
  }
}

.studio-card img{
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 6px);
  margin-bottom: .75rem;
  display: block;
}

.studio-card{
  padding: 1rem;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg), var(--fg) 4%);
  border: 1px solid color-mix(in oklab, var(--fg), transparent 88%);
}

#refs .csl-entry{
  margin: 1.25rem 0;     /* more space between entries */
  padding: .85rem 1rem;  /* keeps your “card” feel */
}

/* Make linked titles look clean */
#refs .csl-entry a{
  text-decoration: none;
}
#refs .csl-entry a:hover{
  text-decoration: underline;
}

/* Fix Pandoc/CSL hanging-indent spilling outside our publication cards */
#refs.hanging-indent .csl-entry {
  margin-left: 0 !important;
  text-indent: 0 !important;
}

/* Safety: prevent long strings/URLs from overflowing */
#refs .csl-entry {
  overflow-wrap: anywhere;
  word-break: break-word;
}