/* Shared styles for the personal site.
   Tailwind handles layout; this file holds type treatments, interaction states, and texture.
   Colors follow Columbia Business School's palette (CBS Design Guidelines v2.0, Jan 2021),
   leaning on the bright end of the blue scale. CBS Blue (#009BDB) is ~3:1 on white, so it
   carries accents, large type, and fills with Blue 90 text; body links use Blue 60. */

:root {
  --blue-90: #002230;
  --blue-60: #0078AB;
  --blue-40: #009BDB; /* CBS Blue */
  --blue-20: #6BCCF5;
  --blue-10: #B1E5FB;
  --blue-5: #D8F2FD;
  --gray-90: #181A1C;
  --gray-80: #42474C;
  --gray-70: #687078;
  --display: "Inter Tight", Inter, system-ui, sans-serif;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  background: #fff;
  color: var(--gray-90);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- Type ---------- */

.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.lead {
  color: var(--gray-80);
  font-size: clamp(1.2rem, 2vw, 1.375rem);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ---------- Links and focus ---------- */

:focus-visible {
  outline: 2px solid var(--blue-40);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On CBS Blue fills, focus rings and links switch to Blue 90. */
.on-bright :focus-visible { outline-color: var(--blue-90); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 50;
  padding: .5rem 1rem;
  background: var(--blue-90);
  color: #fff;
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translateY(4.5rem); }

.link {
  color: var(--blue-60);
  text-decoration-line: underline;
  text-decoration-color: var(--blue-20);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.link:hover { text-decoration-color: currentColor; }
.link:active { color: var(--blue-90); }
.on-bright .link { color: var(--blue-90); text-decoration-color: rgba(0, 34, 48, .35); }
.on-bright .link:hover { text-decoration-color: currentColor; }
.on-bright .link:active { opacity: .7; }

/* ---------- Header ---------- */

.wordmark {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--gray-90);
  text-decoration: none;
}
.wordmark:hover { color: var(--blue-60); }
.wordmark:active { opacity: .7; }

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: .4rem;
  color: var(--gray-90);
  text-decoration: none;
}
/* The CBS Blue bar marks the current page and slides in on hover. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--blue-40);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link:hover { color: var(--blue-60); }
.nav-link:active { opacity: .7; }

/* ---------- Portrait ---------- */

.portrait {
  position: relative;
  overflow: hidden;
  background: var(--blue-5);
  box-shadow:
    0 1px 2px rgba(0, 120, 171, .12),
    0 14px 30px -14px rgba(0, 120, 171, .35),
    0 36px 70px -36px rgba(0, 155, 219, .35);
}
/* On wide screens the photo stays in view while the bio beside it scrolls. */
@media (min-width: 768px) {
  .portrait { position: sticky; top: 2rem; }
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
}
.portrait-tint {
  position: absolute;
  inset: 0;
  background: var(--blue-40);
  mix-blend-mode: multiply;
  opacity: .06;
}
.portrait-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
  opacity: .22;
}

/* ---------- Color slabs (the PASCL-style block row) ---------- */

.slab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 11rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  color: var(--blue-90);
  text-decoration: none;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(255, 255, 255, .10), transparent 62%);
}
@media (min-width: 768px) {
  .slab { min-height: 15rem; }
}
.slab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  mix-blend-mode: overlay;
  opacity: .18;
}
.slab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.slab:hover::after { opacity: .14; }
.slab:focus-visible { outline: 3px solid currentColor; outline-offset: -10px; }

.slab-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.25rem;
  width: 100%;
  transition: transform .55s var(--ease-spring);
}
.slab:hover .slab-inner { transform: translateY(-5px); }
.slab:active .slab-inner { transform: translateY(0) scale(.985); transition-duration: .12s; }

.slab-title { font-size: clamp(2.5rem, 4.2vw, 3.5rem); }
.slab-desc { max-width: 32ch; font-size: 1rem; line-height: 1.6; }
.slab-action {
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration-line: underline;
  text-decoration-color: rgba(0, 34, 48, .35);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
.slab:hover .slab-action { text-decoration-color: currentColor; }

/* ---------- Press ---------- */

.press-item {
  position: relative;
  display: block;
  height: 100%;
  padding-top: 1.1rem;
  border-top: 2px solid var(--blue-10);
  color: inherit;
  text-decoration: none;
}
.press-item::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue-40);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.press-item:hover::before { transform: scaleX(1); }
.press-item:active { opacity: .75; }
.press-outlet {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--gray-90);
}
.press-item:hover .press-outlet { color: var(--blue-60); }
.press-topic { display: block; margin-top: .4rem; color: var(--gray-80); font-size: .95rem; line-height: 1.55; }

/* ---------- Research list ---------- */

/* On wide screens each stream's heading and description stay in view beside its papers. */
@media (min-width: 768px) {
  .stream-head { position: sticky; top: 1.75rem; }
}

.paper { padding-block: 1.75rem; }
.paper:first-child { padding-top: .35rem; }
.paper + .paper { border-top: 1px solid var(--blue-10); }
.paper-title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.paper-title a { color: var(--gray-90); text-decoration: none; }
.paper-title a:hover {
  color: var(--blue-60);
  text-decoration-line: underline;
  text-decoration-color: var(--blue-20);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.paper-title a:active { color: var(--blue-90); }
.paper-meta { margin-top: .5rem; color: var(--gray-70); font-size: .95rem; line-height: 1.55; }
.paper-meta strong { color: var(--gray-90); font-weight: 600; }
/* Cool Gray 70 drops below 4.5:1 on the Blue 5 band, so darken meta text there. */
.on-mist .paper-meta,
.on-mist .paper-press { color: var(--gray-80); }
.paper-summary { margin-top: .9rem; max-width: 68ch; }
.paper-award { margin-top: .6rem; color: var(--blue-60); font-size: .9rem; font-weight: 600; }
.paper-press { margin-top: .75rem; color: var(--gray-70); font-size: .9rem; line-height: 1.7; max-width: 72ch; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.chip {
  display: inline-block;
  padding: .3rem .85rem;
  border: 1px solid var(--blue-20);
  border-radius: 3px;
  color: var(--blue-60);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: transform .35s var(--ease-spring);
}
.chip:hover { background: var(--blue-5); border-color: var(--blue-40); }
.chip:active { transform: translateY(1px) scale(.97); transition-duration: .1s; }

/* Abstract toggle: a chip-styled button whose arrow turns down when the abstract is open. */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.chip-toggle[aria-expanded="true"] { background: var(--blue-5); border-color: var(--blue-40); }
.chip-arrow {
  width: .75rem;
  height: .75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.chip-toggle[aria-expanded="true"] .chip-arrow { transform: rotate(90deg); }

.abstract {
  margin-top: 1.1rem;
  max-width: 68ch;
  padding-left: 1.1rem;
  border-left: 2px solid var(--blue-20);
  color: var(--gray-80);
  font-size: .975rem;
  line-height: 1.7;
}
.abstract:not([hidden]) { animation: abstract-in .4s var(--ease-out); }
@keyframes abstract-in {
  from { opacity: 0; transform: translateY(-6px); }
}

/* ---------- Tables ---------- */

.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th {
  padding: .55rem 1.25rem .55rem 0;
  border-bottom: 2px solid var(--blue-40);
  color: var(--gray-70);
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
}
.data-table td { padding: .7rem 1.25rem .7rem 0; border-bottom: 1px solid var(--blue-10); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}