/* ==========================================
   CUSTOM PURCHASED FONTS (@font-face)
   ========================================== */

/* 1. Concourse 7 (For Headings, Brand & Navigation) */
@font-face {
  font-family: 'Concourse 7';
  src: url('fonts/Concourse 7 Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Concourse 7';
  src: url('fonts/Concourse 7 Regular.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Concourse 7';
  src: url('fonts/Concourse 7 Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 2. Equity A (For Body & Paragraphs) */
@font-face {
  font-family: 'Equity A';
  src: url('fonts/Equity A Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Equity A';
  src: url('fonts/Equity A Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Equity A';
  src: url('fonts/Equity A Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Equity A';
  src: url('fonts/Equity A Bold Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* 3. Triplicate A (For Paper Meta Info: Journal, Year, Co-Author) */
@font-face {
  font-family: 'Triplicate A';
  src: url('fonts/Triplicate A Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Triplicate A';
  src: url('fonts/Triplicate A Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Triplicate A';
  src: url('fonts/Triplicate A Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
   ACADEMIC RESEARCH PORTFOLIO - UNIFIED COLOR SYSTEM
   (Light mode only — inverted jade-green canvas with parchment cards)
   ========================================== */

:root {
  /* Jade Green Canvas (formerly the accent, now the page background) */
  --bg-dark: #3E7760;
  --bg-surface: #f4f0ea;
  --bg-surface-hover: #e9e1d0;
  --bg-card: #f4f0ea;
  --bg-card-border: rgba(15, 23, 42, 0.1);

  /* UNIFIED ACCENT (JADE GREEN, #3E7760) — still used for text/icons/buttons
     inside the (now parchment) cards, where it reads the same as before */
  --accent-primary: #3E7760;    /* Primary accent */
  --accent-hover: #2E5E4B;      /* Rich jade green hover state */
  --accent-gradient: linear-gradient(135deg, #3E7760 0%, #2E5E4B 100%);
  --accent-text: #3E7760;       /* Accent color */

  /* Text/headings sitting directly on the green page background (hero,
     section titles, about text, contact, footer) — parchment-toned so it
     reads clearly against the green, mirroring the card color */
  --text-on-accent: #f4f0ea;
  --text-on-accent-muted: rgba(244, 240, 234, 0.72);

  /* Black / Dark Navy Body Text (used inside parchment cards, unchanged) */
  --text-paragraph: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;

  /* Custom Font Families */
  --font-heading: 'Concourse 7', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-serif: 'Equity A', 'Lora', Georgia, serif;
  --font-mono: 'Triplicate A', monospace;

  /* Layout */
  --max-width: 1100px;

  /* Corner radius shared by all buttons, the search field, and content cards */
  --radius-content: 14px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-paragraph);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Rules - ALL HEADINGS USE THE UNIFIED ACCENT COLOR */
h1, h2, h3, h4, h5, h6, .sans-text {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

p, li, blockquote, .serif-text {
  font-family: var(--font-serif);
  color: var(--text-paragraph);
}

p {
  margin-bottom: 1.25rem;
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.inline-contact-link {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.inline-contact-link:hover {
  color: var(--accent-hover);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Section Common Styling */
section {
  padding: 2.5rem 0;
}

.section-title {
  font-size: 2.6rem;
  margin-bottom: 1.65rem;
  color: var(--text-on-accent);
  display: inline-block;
}

/* ==========================================
   HERO SECTION & PROFILE PORTRAIT
   ========================================== */
.hero-section {
  padding-top: 4.5rem;
  padding-bottom: 3rem;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 3.5rem;
  align-items: flex-start;
}

.portrait-wrapper {
  position: relative;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: var(--radius-content);
  overflow: hidden;
}

.portrait-img {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-content);
  z-index: 1;
  box-shadow: none;
  display: block;
}

.hero-content {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  justify-content: flex-start;
  gap: 1.2rem;
}

/* HERO MAIN HEADING STYLING */
.hero-heading {
  font-size: 5.75rem;
  font-weight: 800;
  color: var(--text-on-accent);
  margin-top: -1.4714rem;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* HERO AFFILIATION BADGES ROW (PLACED ELEGANTLY BETWEEN HEADING & INTRO) */
.hero-badges-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 30px;
  color: var(--accent-text);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
  margin-bottom: 0;
}

.hero-intro {
  font-size: 1.2rem;
  color: var(--text-on-accent);
  line-height: 1.72;
  margin-bottom: 0;
  max-width: 670px;
}

/* PROFILE LINKS ROW (Scholar, ORCiD, PhilPapers) — reuses the .contact-btn
   pill styling from the Contact section below, since these sit on the same
   green page background. */
.hero-profile-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ==========================================
   SHARED BUTTON SYSTEM
   All pill/CTA buttons share one corner radius, one hover treatment (a
   slight lift, no color/background shift), and no ambient glow.
   ========================================== */
.pdf-btn,
.contact-btn {
  transition: transform var(--transition-fast);
}

.pdf-btn:hover,
.contact-btn:hover {
  transform: translateY(-1px);
}

/* ==========================================
   ABOUT SECTION
   ========================================== */
.about-text {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

.about-text p {
  font-size: 1.15rem;
  margin-bottom: 1.15rem;
  color: var(--text-on-accent);
  line-height: 1.78;
}

.about-text p:last-child {
  margin-bottom: 0;
}

/* ==========================================
   PUBLICATIONS SECTION
   ========================================== */

/* Accordion Container */
.accordion-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-content);
  overflow: hidden;
  transition: transform var(--transition-fast);
}

.accordion-item:hover {
  transform: translateY(-1px);
}

.accordion-item.active {
  border-color: var(--accent-text);
}

/* Accordion header is a real <button> for native keyboard/AT support;
   these declarations neutralize default button chrome. Card rows keep
   their background-tint hover (not the lift used by pill/CTA buttons),
   matching the conventional pattern for clickable rows. */
.accordion-header {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  padding: 1.5rem 1.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  user-select: none;
}

/* Holds just the title and the reveal chevron — the chevron only needs to
   share width with the title's own line, not with the meta row below it,
   so that row is kept out of this flex pair (see .pub-meta-row) and gets
   the card's full width to itself. */
.accordion-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.pub-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-paragraph);
}

/* ALWAYS VISIBLE Journal/Book Title, Year & Co-Author */
.pub-meta-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 400;
}

.pub-journal-year {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent-text);
}

.pub-journal-year .pub-type-icon {
  flex-shrink: 0;
  stroke: var(--accent-text);
}

.pub-journal-year .venue-name {
  font-style: italic;
  font-family: var(--font-mono);
  color: var(--accent-text);
}

.pub-year-coauthor .pub-year {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-style: normal;
}

.pub-year-coauthor {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pub-meta-separator {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.pub-coauthor {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
  font-style: italic;
}

.accordion-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.25rem;
  transition: transform var(--transition-normal), background var(--transition-fast);
}

.accordion-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--text-paragraph);
  transition: transform var(--transition-normal);
}

.accordion-item.active .accordion-icon {
  background: var(--accent-primary);
  transform: rotate(180deg);
}

.accordion-item.active .accordion-icon svg {
  fill: #ffffff;
}

/* Accordion Content — a CSS Grid row animated between 0fr and 1fr. Unlike
   a fixed max-height, this always sizes itself exactly to the content's
   real height, so there's no pixel cap to outgrow regardless of how long
   an abstract is or how narrow the screen is (which is what let a couple
   of abstracts get clipped, Read button and all, on narrow phones under
   the old max-height: 800px approach). */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.accordion-item.active .accordion-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion-body {
  /* min-height: 0 lets the grid row actually shrink to 0fr — grid items
     default to min-height: auto, which would otherwise keep the collapsed
     row pinned open at the content's intrinsic height. Vertical padding is
     gated on .active for the same reason: padding on the grid item itself
     doesn't shrink away with the row, so left unconditional it would leave
     a fixed-height gap even at 0fr. Horizontal padding is unaffected by
     this (it doesn't add height) so it stays on unconditionally. */
  min-height: 0;
  overflow: hidden;
  padding: 0 1.75rem;
  transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}

.accordion-item.active .accordion-body {
  padding-top: 1.25rem;
  padding-bottom: 1.75rem;
}

.abstract-text {
  font-size: 1.05rem;
  color: var(--text-paragraph);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* COMPACT EQUAL SIZE BUTTONS */
.pub-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pdf-btn {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  height: 36px;
  min-width: 100px;
  border-radius: var(--radius-content);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
}

/* MAIN BUTTON: READ */
.pdf-btn {
  background: var(--accent-gradient);
  color: #ffffff;
  border: none;
}

.pdf-btn:hover {
  color: #ffffff !important;
}

/* ==========================================
   PIPELINE SECTION (TWO INDEPENDENT COLUMNS — each column is its own flex
   stack, so expanding a card only grows its own column, never the other one)
   ========================================== */
.pipeline-grid {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.pipeline-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
  min-width: 0;
}

/* Odd card count: script.js pulls the last (lowest-priority) card out of the
   two columns and renders it here instead, centered under them at the same
   width a column card would have, rather than left-stuck in a column with
   empty space beside it. */
.pipeline-solo-row {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.pipeline-solo-row .pipeline-column {
  flex: 0 0 calc(50% - 0.625rem);
}

/* Each card's reading-order position (1st, 2nd, 3rd...) is set as an inline
   `order` style by script.js, since the number of cards per column varies —
   see the comment there. On desktop this changes nothing visible; on mobile
   (below), where the columns collapse into a single stack, it's what makes
   the cards read in a straight 1-2-3-4... line instead of column-by-column. */

.pipeline-grid .accordion-item,
.pipeline-solo-row .accordion-item {
  display: flex;
  flex-direction: column;
  height: auto;
}

.wip-accordion .accordion-header {
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 96px;
  box-sizing: border-box;
}

.wip-title {
  font-size: 1.18rem;
  line-height: 1.35;
}

.wip-accordion .abstract-text {
  margin-bottom: 0;
  font-size: 1.02rem;
  line-height: 1.72;
}

/* ==========================================
   CONTACT & FOOTER SECTION
   ========================================== */
.contact-section {
  background: var(--bg-dark);
  padding-bottom: 3rem;
}

.contact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 3rem;
}

.contact-header-text {
  max-width: 500px;
}

.contact-invitation {
  font-size: 1.15rem;
  color: var(--text-on-accent);
  line-height: 1.78;
  max-width: 440px;
  margin-bottom: 0;
}

/* Scholar, ORCiD, PhilPapers & Email all share one button style — a solid
   parchment pill with green text/icon, the same pairing used for the hero
   badge, since these sit directly on the green page rather than on a card. */
.contact-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-top: 4.75rem;
}

.contact-btn {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  height: 42px;
  padding: 0.65rem 1.4rem;
  background: var(--bg-card);
  color: var(--accent-text);
  border-radius: var(--radius-content);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

/* Pin hover color to the resting color — otherwise the global a:hover rule
   (color: var(--accent-hover)) would shift it, leaving only the shared
   elevation hover (see .pdf-btn:hover, .contact-btn:hover above). */
.contact-btn:hover {
  color: var(--accent-text);
}

.contact-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: currentColor;
}

/* ==========================================
   PROMINENT UNIFIED SCROLL REVEAL ANIMATION SYSTEM
   ========================================== */
.reveal-on-scroll {
  opacity: 0 !important;
  transform: translateY(46px) scale(0.95) !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Staggered card entrance effects */
.accordion-list .accordion-item:nth-child(1) { transition-delay: 0.05s !important; }
.accordion-list .accordion-item:nth-child(2) { transition-delay: 0.12s !important; }
.accordion-list .accordion-item:nth-child(3) { transition-delay: 0.19s !important; }

.pipeline-column:nth-child(1) .accordion-item:nth-child(1) { transition-delay: 0.05s !important; }
.pipeline-column:nth-child(2) .accordion-item:nth-child(1) { transition-delay: 0.05s !important; }
.pipeline-column:nth-child(1) .accordion-item:nth-child(2) { transition-delay: 0.12s !important; }
.pipeline-column:nth-child(2) .accordion-item:nth-child(2) { transition-delay: 0.12s !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* FOOTER BOTTOM */
.footer-bottom {
  margin-top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: flex-start;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: var(--text-on-accent-muted);
}

.copyright-text {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-on-accent);
}

.credits-text {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--text-on-accent-muted);
}

.credits-text em {
  font-style: italic;
}

/* ==========================================
   RESPONSIVE LAYOUT
   ========================================== */
@media (max-width: 985px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .hero-content {
    align-items: center;
    height: auto;
    gap: 1.25rem;
  }

  .portrait-wrapper {
    max-width: 310px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .portrait-img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .hero-badges-row {
    justify-content: center;
  }

  .hero-heading {
    font-size: 3.75rem;
    margin-top: 0;
  }

  /* Icon-only Scholar/ORCiD/PhilPeople buttons: at narrow widths the three
     full text+icon pills can't fit on one row (confirmed down to 360px).
     Dropping the labels removes the dominant width driver entirely rather
     than trying to squeeze padding/gaps, which wouldn't scale to narrower
     phones. Scoped to .hero-profile-links so the Contact section's Email
     button (which also uses .contact-btn) keeps its label at all widths. */
  .hero-profile-links .contact-btn {
    width: 42px;
    padding: 0;
    gap: 0;
  }

  .hero-profile-links .contact-btn-label {
    display: none;
  }

  /* On narrower phones the full "Department of Philosophy, Stockholm
     University" badge text wraps onto two lines. Dropping the department
     keeps the badge on one line without needing per-device width tuning. */
  .hero-badge-department {
    display: none;
  }

}

/* Stacks earlier than the general 900px breakpoint: at two-column widths
   below ~1080px the narrower columns can force a long pipeline card title
   onto two lines, which would make that card taller than its neighbor. */
@media (max-width: 1100px) {
  .pipeline-grid {
    flex-direction: column;
  }

  /* Dissolve the column wrapper's own box so its cards become direct flex
     items of .pipeline-grid — combined with the explicit `order` values
     above, this is what makes the mobile stack read 1-2-3-4 in a straight
     line rather than left-column-then-right-column. */
  .pipeline-column {
    display: contents;
  }
}

/* Below this width, the widest publication card's journal name, year, and
   co-author no longer all fit on one line. Rather than letting each card
   wrap individually (which looked inconsistent — some cards single-line,
   others split, depending on how long their own venue/co-author text is),
   every card switches to the two-line layout together: journal name on its
   own line, year (and co-author, if any) on the line below. Metadata text
   also shrinks slightly here, since this is exactly the range where the
   longest journal name most needs the extra room. */
@media (max-width: 720px) {
  .pub-year-coauthor {
    flex-basis: 100%;
  }

  .pub-meta-row {
    font-size: 0.82rem;
  }

  .pub-year-coauthor .pub-year {
    font-size: 0.75rem;
  }

  .pub-coauthor {
    font-size: 0.8rem;
  }
}

@media (max-width: 950px) {
  .contact-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }

  .contact-buttons {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2.2rem;
  }
}