/* ============================================================
   Abby Wang — portfolio site
   Font: Cossette Texte (self-hosted, see fonts/)
   Text color: #2E2930   Hover/unselected color: #2E293046
   ============================================================ */

/* Self-hosted — no external font CDN, so no network dependency and no
   flash/swap/jitter between pages. Only Regular (400) and Bold (700)
   exist for this typeface, so every weight below maps to one of the two. */
@font-face {
  font-family: 'Cossette Texte';
  src: url('../fonts/CossetteTexte-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Cossette Texte';
  src: url('../fonts/CossetteTexte-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --text-color: #2E2930;
  --muted-color: #2E293046; /* "hover" color: same hue at ~27% opacity */
  --font-body: 'Cossette Texte', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --home-width: 26%;
  --tab-collapsed-width: 130px;

  --box-gap: 24px;
  --pad: 24px; /* inset from every box edge (top/bottom/left/right) —
                  text sits close to the border, matching the Figma spec */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* the frame is fixed to the viewport; individual
                       columns scroll internally instead of the page */
  -webkit-text-size-adjust: 100%; /* stop Safari/WebKit from auto-boosting
                                      font size based on each column's width
                                      — without this, the same font-size
                                      renders at different apparent sizes
                                      on pages whose text columns are
                                      narrower or wider than the home page */
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.211; /* 121.1% */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

a, h1, h2, h3, ul, li, span, div, p {
  font-family: inherit;
  letter-spacing: inherit;
  overflow-wrap: break-word; /* long unbroken runs (e.g. the en-dash-joined
                                "Neurodevelopment–neurobiology–neurodegeneration"
                                on In vitro) wrap instead of pushing past the
                                box edge as the column narrows */
}

a {
  text-decoration: none;
  color: inherit;
}

/* Default link hover: fade to the muted/transparent color, same target
   color the nav tabs use. More specific rules below (.tab, .home-panel)
   override this with their own hover behavior. */
a:hover {
  color: var(--muted-color);
}

ul {
  margin: 0;
  padding-left: 1.2em;
  list-style-type: "* ";
}

li {
  padding-left: 2px;
}

p {
  margin: 0 0 16px 0;
}

p:last-child {
  margin-bottom: 0;
}

.underline {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Overall frame — fixed to the viewport height so the rectangle
   is identical on every page; no box ever grows/shrinks with
   content, and the page itself never scrolls (columns that have
   more content than fits scroll internally instead — see below)
   ------------------------------------------------------------ */

.site-frame {
  display: flex;
  align-items: stretch;
  height: 100vh;
  gap: var(--box-gap);
  padding: var(--box-gap);
}

/* Bio panel — no border, just text (own column, no box) */
.panel {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable; /* always reserve scrollbar space so text
                               doesn't shift when it appears/disappears
                               between pages with different content length */
}

/* Home / bio panel */
.home-panel {
  flex: 0 0 var(--home-width);
  min-width: 240px;
  color: var(--muted-color);
}

.home-panel.active {
  color: var(--text-color);
}

a.home-panel:hover {
  color: var(--text-color);
}

.home-panel .name {
  font-weight: 400;
  font-size: 17.5px; /* keeps the 21:18 heading:body ratio at the new 15px body size */
  margin-bottom: 24px;
}

.home-panel .footer-note {
  margin-top: auto;
  padding-top: 24px;
}

/* ------------------------------------------------------------
   Accordion — ONE bordered box. Collapsed tabs, the active
   tab's content, and (on Home) the Say hello column all live
   inside it as flex children, separated by 1px divider lines
   instead of separate boxes with gaps between them.
   ------------------------------------------------------------ */

.accordion {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--text-color);
  overflow: hidden; /* content that scrolls internally is clipped at this border */
}

.accordion > * + * {
  border-left: 1px solid var(--text-color);
}

.tab {
  flex: 0 0 var(--tab-collapsed-width);
  padding: var(--pad); /* matches the padding of the expanded content
                          columns, so a tab's label doesn't jump sideways
                          when it expands */
  color: var(--muted-color);
}

a.tab:hover {
  color: var(--text-color);
}

.tab.active {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  color: var(--text-color);
  padding: 0;
  display: flex;
}

.tab-label {
  font-weight: 400;
  font-size: 17.5px; /* nav labels read at the same size as the page
                        titles/name heading, not the 15px body copy */
}

/* Expanded tab content: internal columns divided by a line, not separate boxes */
.tab-content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.tab-content > * + * {
  border-left: 1px solid var(--text-color);
}

.tab-main {
  flex: 0 0 46%;
  padding: var(--pad);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Info page: single full-width column instead of the 46% split */
.tab-main--full {
  flex: 1 1 auto;
}

.info-top {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.info-text {
  flex: 1 1 auto;
  min-width: 0;
}

.tab-timeline {
  flex: 1 1 auto;
  padding: var(--pad);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* In silico: the ONLY part of the page that scrolls. Fixed height (from
   the box above), internal scroll — new photos load and old ones slip
   behind the box border instead of the whole page growing/scrolling. */
.tab-gallery {
  flex: 1 1 auto;
  padding: var(--pad) var(--pad) var(--pad) 12px; /* tighter left inset —
                                                      the divider line already
                                                      separates it from the
                                                      text column, so a full
                                                      pad here reads as too
                                                      big a horizontal gap */
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  min-width: 0;
}

/*.photo-item {
}*/

.photo-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* 4 per row */ .photo-item.portrait  { grid-column: span 3;  }
/* 3 per row */ .photo-item.landscape { grid-column: span 4;  }
/* 2 per row */ .photo-item.wide      { grid-column: span 6;  }
/* 1 per row */ .photo-item.panoramic { grid-column: span 12; }

.gallery-sentinel {
  height: 1px;
}

/* Info: single photo next to the text column */
.tab-photo-col {
  flex: 0 0 220px;
  min-height: 0;
  padding: 0 var(--pad) var(--pad) var(--pad); /* no top padding so the photo's
                                                   top edge lines up with the
                                                   first paragraph, not sit
                                                   lower than it */
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.tab-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--muted-color);
  overflow: hidden;
}

.tab-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tab-gap {
  height: 220px;
}

.tab-title {
  font-weight: 400;
  font-size: 17.5px; /* keeps the 21:18 heading:body ratio at the new 15px body size */
  margin: 0 0 24px 0;
}

.tab-section {
  margin-bottom: 28px;
}

.tab-section:last-child {
  margin-bottom: 0;
}

.tab-section .label {
  font-weight: 400;
  margin-bottom: 8px;
  display: block;
}

/* Timeline entries */
.timeline-entry {
  margin-bottom: 32px;
}

.timeline-entry:last-child {
  margin-bottom: 0;
}

.timeline-date {
  margin-bottom: 10px;
  font-weight: 400;
}

.timeline-marker {
  width: 45px;
  height: 45px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}

.timeline-role {
  font-weight: 700;
  margin-bottom: 2px;
}

.timeline-pi {
  margin-bottom: 10px;
}

.timeline-desc {
  margin-top: 10px;
}

/* Placeholder content (In silico / Info until real designs arrive) */
.placeholder-note {
  color: var(--muted-color);
  font-style: italic;
}

/* ------------------------------------------------------------
   Say hello column — 4th column inside the accordion box on
   Home only; static info, always full color, no separate border
   ------------------------------------------------------------ */

.say-hello-panel {
  flex: 1 1 auto;
  min-width: 220px;
  min-height: 0;
  padding: var(--pad);
  color: var(--text-color);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.say-hello-panel .label {
  font-weight: 400;
  margin-bottom: 10px;
  display: block;
}

.say-hello-panel .contact-line {
  margin-bottom: 4px;
}

/* ------------------------------------------------------------
   Responsive: stack everything on smaller screens.
   Divider lines rotate from border-left to border-top so the
   single-box-with-dividers look holds once columns stack.
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  .tab-content {
    flex-direction: column;
  }

  .tab-content > * + * {
    border-left: none;
    border-top: 1px solid var(--text-color);
  }

  .photo-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .tab-photo-col {
    flex: 0 0 auto;
    width: 160px;
  }
}

@media (max-width: 700px) {
  /* Small screens: drop the fixed-viewport rectangle and let the page
     scroll normally — a rigid, non-scrolling frame doesn't work once
     everything is stacked in one column. */
  html, body {
    height: auto;
    overflow: visible;
  }

  .site-frame {
    height: auto;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .panel,
  .tab-main,
  .tab-timeline,
  .tab-gallery,
  .tab-photo-col,
  .say-hello-panel {
    overflow: visible;
  }

  .panel {
    flex: none;
    min-width: 0;
  }

  .accordion {
    flex-direction: column;
    margin: 0 var(--pad);
  }

  .accordion > * + * {
    border-left: none;
    border-top: 1px solid var(--text-color);
  }

  .tab {
    flex: none;
  }

  .tab.active {
    display: block;
    padding: 0;
  }

  .photo-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .photo-item.portrait,
  .photo-item.landscape { grid-column: span 2; }

  .photo-item.wide,
  .photo-item.panoramic { grid-column: span 4; }

  .tab-gap {
    height: 0;
  }

  .info-top {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }

  .tab-photo-col {
    width: 160px;
    padding: 0;
  }

  /* Home header: name + location share one row, bio paragraphs wrap to
     full-width lines below, and "Say hello" moves back into normal flow
     instead of being pinned to the bottom of the column. */
  .home-panel {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
  }

  .home-panel .name {
    order: 0;
  }

  .home-panel .footer-note {
    order: 1;
    margin-top: 0;
    padding-top: 0;
  }

  .home-panel p {
    order: 2;
    flex: 1 1 100%;
  }

  .home-panel p:first-of-type {
    margin-top: 48px;
  }
}