/* ===========================================================
   Browne Lab — shared stylesheet
   =========================================================== */

/* ===Tokens=== */
:root {
  --paper:        #F5F6F7;   /* cool off-white */
  --ink:          #191B1F;   /* near-black with a cool cast */
  --ink-soft:     #4B4F55;   /* secondary text */
  --ink-muted:    #7C8188;   /* captions, metadata */
  --hairline:     #D9DCDF;   /* fine rules */
  --hairline-strong: #C3C7CB; /* the heavier grey rule above each research card */
  --accent:       #0E5B67;   /* deep petrol-teal, used sparingly */

  /* one soft pastel per research strand — a hint on the grey */
  --strand-1:     #6FA9AF;   /* pain circuits */
  --strand-2:     #9198C6;   /* tools  */
  --strand-3:     #9DB487;   /* translation */

  --serif:  "Newsreader", Georgia, serif;
  --sans:   "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --measure: 34rem;                       /* comfortable reading width */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --rule:    1px solid var(--hairline);
}

/* ===Reset and base=== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
.wrap { width: 100%; max-width: 62rem; margin-inline: auto; padding-inline: var(--gutter); }

/* small letterspaced mono label I reuse as a section "eyebrow" */
.eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1.4rem; }

/* ===Navigation / brand lockup=== */
/* Two-level identity: a live ridgeline mark, an uppercase wordmark so it reads
   as a group not a signature, and a subtitle carrying the science. */
.site-nav { border-bottom: var(--rule); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.05rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-mark { display: inline-flex; width: 30px; height: 22px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; overflow: hidden; }
.brand-mark .m { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.brand-logo-move { animation: brandTrace 6s linear infinite; }
@keyframes brandTrace { to { transform: translateX(-26px); } }
.brand-name { display: block; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.18em; color: var(--ink); }
.brand-sub  { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.02em; color: var(--ink-muted); margin-top: 1px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.nav-links a { text-decoration: none; color: var(--ink-soft); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); border-color: var(--accent); }
.nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }

/* ===Hero (home)=== */
.hero { padding-block: clamp(3.25rem, 8vw, 5.75rem) clamp(1.5rem, 4vw, 2.5rem); }
.hero-statement { font-family: var(--serif); font-weight: 400; font-size: clamp(1.95rem, 4.6vw, 3.2rem); line-height: 1.16; letter-spacing: -0.006em; max-width: 22ch; margin: 0; }
.hero-statement em { font-style: italic; }
.hero-statement .rest { color: var(--ink-soft); }
.hero-standfirst { max-width: var(--measure); color: var(--ink-soft); font-size: 1.075rem; margin: 0 0 0.6rem; }
.byline { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-muted); margin: 0.2rem 0 0; }

/* ===Signature trace (home)===
   A bold behavioural trace over a neural population that unravels on scroll.
   Filled with paper so front peaks make space in the lines behind. */
.trace { display: block; width: 100%; height: 132px; overflow: hidden; margin: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.25rem); }
.trace .trace-primary { fill: none; stroke: #3A3F45; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.85; }
.trace .tl-fill { fill: var(--paper); stroke: none; }
.trace .tl-line { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trace .trace-line { opacity: 0; }
.trace .trace-line.is-front { opacity: 0.9; }
.trace .trace-line.is-front .tl-line { stroke: #3A3F45; stroke-width: 1.7; }

/* ===Methods line=== */
.methods { border-top: var(--rule); }
.methods .wrap { padding-block: 1.1rem; }
.methods-line { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.035em; color: var(--ink-muted); margin: 0; line-height: 1.8; }
.methods-line i { font-style: italic; }

/* ===Section rhythm=== */
.band { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: var(--rule); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.section-head .eyebrow { margin-bottom: 0; }
.section-more { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--accent); text-decoration: none; white-space: nowrap; }
.section-more:hover, .section-more:focus-visible { text-decoration: underline; }

/* ===Research area cards=== */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.area { padding: 0 1.4rem 1.6rem 1.4rem; border-top: 2px solid var(--hairline-strong); }
.area + .area { border-left: var(--rule); }
.area:first-child { padding-left: 0; padding-right: 2.8rem; }
.area:last-child { padding-left: 2.8rem; padding-right: 0; }
.area-1 { --strand: var(--strand-1); }
.area-2 { --strand: var(--strand-2); }
.area-3 { --strand: var(--strand-3); }
.area-figure { display: block; width: 100%; height: auto; margin: 1.1rem 0 0.9rem; }
.area-figure .stroke { fill: none; stroke: var(--strand); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.area-figure .stroke-soft { fill: none; stroke: var(--strand); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.area-figure .dot { fill: var(--strand); }
.area-figure .dot-open { fill: var(--paper); stroke: var(--strand); stroke-width: 1.4; }
.area-title { font-family: var(--serif); font-weight: 500; font-size: 1.24rem; line-height: 1.24; margin: 0.4rem 0 0.7rem; }
.area-desc { color: var(--ink-soft); font-size: 0.96rem; margin: 0 0 1.1rem; }
.area-link { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--accent); text-decoration: none; }
.area-link:hover, .area-link:focus-visible { text-decoration: underline; }

/* ===Prose blocks=== */
.lede { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.35; color: var(--ink); max-width: 40ch; margin: 0 0 1.4rem; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }

/* ===Bridge + current questions=== */
.bridge-text { max-width: var(--measure); font-size: 1.075rem; color: var(--ink-soft); margin: 0; }
.q-list { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 44rem; }
.q-list li { border-top: var(--rule); padding: 0.85rem 0; font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.q-list li:last-child { border-bottom: var(--rule); }

/* ===Selected work=== */
.work-list { display: flex; flex-direction: column; }
.work-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1rem, 4vw, 3rem); padding-block: 1.6rem; border-top: var(--rule); }
.work-item:last-child { border-bottom: var(--rule); }
.work-title { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.25; margin: 0; }
.work-body { margin: 0; color: var(--ink-soft); }
.work-meta { display: block; margin-top: 0.6rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink-muted); }

/* ===Page header (interior pages)=== */
.page-head { padding-block: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.25rem); }
.page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.15; letter-spacing: -0.006em; margin: 0 0 1rem; max-width: 20ch; }

/* ===Research detail sections=== */
.research-area { border-top: var(--rule); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
/* The figure column is deliberately wide here: these schematics carry
   real detail and are wasted at thumbnail size. Figure slightly larger
   than the text column. */
.research-area .layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 3.5rem); align-items: start; }
/* Sticky only where there is room for it; a tall figure should scroll normally. */
.research-fig { position: sticky; top: 1.5rem; }
@media (max-height: 720px) { .research-fig { position: static; } }
.research-fig .area-figure { --strand: var(--fig, var(--strand-1)); margin: 0; }
.ra-1 { --fig: var(--strand-1); } .ra-2 { --fig: var(--strand-2); } .ra-3 { --fig: var(--strand-3); }
.research-area h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.75rem); line-height: 1.2; margin: 0 0 1rem; }
.q-sub { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 1.6rem 0 0.6rem; }

/* ===Publications=== */
.pub-list { display: flex; flex-direction: column; }
.pub { border-top: var(--rule); padding-block: 1.6rem; }
.pub:last-child { border-bottom: var(--rule); }
.pub-year-head { margin: 2.25rem 0 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; color: var(--ink-muted); }
.pub-title { max-width: 46rem; margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.42rem); font-weight: 500; line-height: 1.28; letter-spacing: -0.003em; }
.pub-authors { max-width: 48rem; margin: 0.55rem 0 0; font-size: 0.94rem; line-height: 1.55; }
.pub-venue { margin: 0.2rem 0 1rem; font-family: var(--mono); font-size: 0.74rem; line-height: 1.5; letter-spacing: 0.04em; }
.pub-summary { max-width: 42rem; margin: 0 0 0.8rem; color: var(--ink-soft); }
.pub-first { max-width: 42rem; margin: 0; padding-left: 0.9rem; border-left: 2px solid var(--accent); color: var(--ink-muted); font-size: 0.9rem; line-height: 1.55; }
.pub-first-label { display: block; margin-bottom: 0.2rem; font-family: var(--mono); font-size: 0.67rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pub-links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; }
.pub-links a { color: var(--accent); text-decoration: none; }
.pub-links a:hover, .pub-links a:focus-visible { text-decoration: underline; }

/* ===People=== */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem 1.4rem; margin-top: 1.5rem; }
.person { }
.person-photo { width: 100%; aspect-ratio: 1 / 1; background: #E7E9EB; border: var(--rule); display: block; }
.person-name { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; margin: 0.6rem 0 0.1rem; }
.person-role { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-muted); margin: 0; }
.pi { display: grid; grid-template-columns: 200px 1fr; gap: clamp(1.25rem, 4vw, 2.5rem); align-items: start; }
.pi .person-photo { aspect-ratio: 1 / 1; }

/* ===Tools / Join=== */
.tool { border-top: var(--rule); padding-block: 1.3rem; }
.tool:last-of-type { border-bottom: var(--rule); }
.tool h3 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; margin: 0 0 0.35rem; }
.tool p { margin: 0 0 0.5rem; color: var(--ink-soft); max-width: 46rem; }
.tool-links { display: flex; gap: 1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; }
.tool-links a { color: var(--ink-muted); text-decoration: none; }
.tool-links a:hover { color: var(--accent); }
.contact { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-soft); line-height: 1.9; margin-top: 1.5rem; }
.contact a { color: var(--accent); text-decoration: none; }

/* ===Footer=== */
.site-foot { border-top: var(--rule); padding-block: 2.5rem 3rem; color: var(--ink-muted); margin-top: clamp(3rem, 6vw, 5rem); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 2rem; }
.foot-where { font-family: var(--mono); font-size: 0.78rem; line-height: 1.7; letter-spacing: 0.02em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.85rem; }
.foot-links a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.foot-links a:hover, .foot-links a:focus-visible { color: var(--ink); border-color: var(--accent); }

/* ===Focus + motion floors=== */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
@media (prefers-reduced-motion: reduce) { .brand-logo-move { animation: none; } }

/* ===Responsive=== */
@media (max-width: 760px) {
  .areas { grid-template-columns: 1fr; }
  .area, .area + .area,
  .area:first-child, .area:last-child { padding: 0 0 1.6rem; border-left: 0; }
  .area + .area { border-top: 2px solid var(--hairline-strong); margin-top: 1.75rem; }
  .work-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .nav-links { gap: 1rem 1.2rem; }
  .trace { height: 104px; }
  .research-area .layout { grid-template-columns: 1fr; }
  .research-fig { position: static; max-width: none; }
  .pi { grid-template-columns: 1fr; }
  .pi .person-photo { max-width: 200px; }
}

/* ===Research figures=== */
.theme-figure {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;          /* the photographs are square */
  overflow: hidden;
  isolation: isolate;           /* keeps the blending inside this box */
  background: var(--duo-dark, #14343A);
  /* I default to the teal pair; each card overrides these two below. */
  --duo-dark:  #14343A;
  --duo-light: #EAF0F0;
}
.theme-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  mix-blend-mode: screen;
}
.theme-figure::after {          /* the pale wash that sets the highlight tone */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--duo-light);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.theme-figure.is-diagram,
.theme-figure.is-plain { background: transparent; }
.theme-figure.is-diagram img,
.theme-figure.is-plain img { filter: none; mix-blend-mode: normal; }
.theme-figure.is-diagram::after,
.theme-figure.is-plain::after { content: none; }

/* One duotone pair per theme, matching the three strand colours. */
.area-1 .theme-figure, .ra-1 .theme-figure { --duo-dark: #14343A; --duo-light: #EAF0F0; }
.area-2 .theme-figure, .ra-2 .theme-figure { --duo-dark: #2A2E52; --duo-light: #EDEEF5; }
.area-3 .theme-figure, .ra-3 .theme-figure { --duo-dark: #2C3A26; --duo-light: #EDF1E8; }

/* Spacing to match the slot the schematics used to occupy. */
.area .theme-figure { margin: 1.1rem 0 0.9rem; }
.research-fig .theme-figure { margin: 0; }

/* If a browser cannot blend, show the plain greyscale photograph rather
   than a solid block of colour. */
@supports not (mix-blend-mode: multiply) {
  .theme-figure { background: none; }
  .theme-figure img { mix-blend-mode: normal; }
  .theme-figure::after { content: none; }
}

/* ===Non-square photographs===
   A portrait picture would be cropped top and bottom by the square slot.
   "is-contain" shows the whole picture instead and pads the sides with
   paper. These are shown untinted: a contained image cannot be tinted
   without tinting its padding too, so this variant turns the duotone off. */
.theme-figure.is-contain { background: var(--paper); }
.theme-figure.is-contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* fit the whole picture, never crop */
  filter: none;
  mix-blend-mode: normal;
}
.theme-figure.is-contain::after { content: none; }

/* ===Duotone off switch===
   To turn the tinting off across the whole site, delete the opening and
   closing comment markers below. Everything then shows as plain colour
   photographs. Put the markers back to turn it on again. */
/*
.theme-figure { background: none; }
.theme-figure img { filter: none; mix-blend-mode: normal; }
.theme-figure::after { content: none; }
*/

/* ===Join page===
   Intro copy sits beside a map of where we are. */
.join-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: start;
}
.join-copy .prose { max-width: none; }

.join-map {
  width: 100%;
  height: 360px;              /* the map MUST have a height or it will not appear */
  border: var(--rule);
  background: #EDEEF0;        /* shown while the tiles load */
}
.map-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin: 0.6rem 0 0;
  line-height: 1.6;
}

/* Leaflet overrides: I pull the map's own furniture into the site's palette.
   The tiles keep most of their colour — I take only a little saturation out
   so parks and water sit comfortably beside the near-monochrome pages.
   Raise the number towards 1 for fuller colour, lower it to mute further. */
.join-map.leaflet-container { font-family: var(--sans); background: #EDEEF0; outline: none; }
.join-map .leaflet-tile-pane { filter: saturate(0.9); }
.join-map .leaflet-control-attribution {
  background: rgba(245, 246, 247, 0.82);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.join-map .leaflet-control-attribution a { color: var(--ink-soft); }
.join-map .leaflet-bar a { background: var(--paper); color: var(--ink-soft); border-bottom-color: var(--hairline); }
.join-map .leaflet-bar a:hover { background: #ECEEEF; color: var(--ink); }

@media (max-width: 760px) {
  .join-intro { grid-template-columns: 1fr; }
  .join-map { height: 260px; }
}

/* ===Roster (alumni, collaborators)===
   Plain rows, no list markers: name in the same serif as .person-name,
   details in the same small mono as .person-role, with a visible middot
   between them so each line reads as one sentence. */
.roster { margin: 1.4rem 0 0; padding: 0; max-width: 48rem; list-style: none; }
.roster-item,
.roster li {
  margin: 0;
  border-top: var(--rule);
  padding: 0.62rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.45rem;
}
.roster-item:last-child,
.roster li:last-child { border-bottom: var(--rule); }
.roster-name { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
.roster-sep { color: var(--ink-muted); font-size: 0.85rem; line-height: 1.3; }
.roster-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-muted); line-height: 1.5; }

/* ===Hero strip===
   A wide band of imagery directly under the navigation. It runs the full
   width of the window, so it sits outside .wrap in the markup. */
.hero-strip {
  position: relative;
  width: 100%;
  height: clamp(140px, 20vw, 250px);
  overflow: hidden;
  background: #EDEEF0;              /* shown while the image loads */
  margin-top: 1.5rem;
  /* border-bottom: var(--rule); */
}
.hero-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===Cross-fading galleries=== */
.figure-stack { position: absolute; inset: 0; isolation: isolate; }
.figure-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.figure-stack img.is-active { opacity: 1; }

/* Inside a duotone figure the tinting moves onto the stack. */
.theme-figure .figure-stack { mix-blend-mode: screen; }
.theme-figure .figure-stack img { filter: grayscale(1) contrast(1.04); mix-blend-mode: normal; }
.theme-figure.is-plain .figure-stack,
.theme-figure.is-diagram .figure-stack { mix-blend-mode: normal; }
.theme-figure.is-plain .figure-stack img,
.theme-figure.is-diagram .figure-stack img { filter: none; }

/* A gallery in the hero strip needs no tinting at all. */
.hero-strip .figure-stack { mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  .figure-stack img { transition: none; }
}