/* ==========================================================================
   Braun Lab -- "fancy" site. One stylesheet, no JavaScript, no build step.

   A fixed-width white column on a grey ground, rounded tab navigation with a
   dark active tab, a banner band under the tabs, and light grey content
   blocks. Layout uses flexbox and grid, so columns are declared rather than
   floated and nothing needs clearing.

   Palette, all four in one place:
     --ink      body text and headings
     --accent   Northwestern purple: active tab, rules, hover
     --ground   the grey behind the column
     --panel    the grey inside content blocks
   ========================================================================== */

:root {
  --ink:      #303030;
  --mid:      #666;
  --accent:   #4e2a84;          /* Northwestern purple */
  --accent-2: #836eaa;
  --ground:   #e0e0e0;
  --panel:    #eeeeee;
  --rule:     #cccccc;
  --width:    920px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 20px 12px 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Helvetica, Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

#container {
  width: 100%;
  max-width: var(--width);
  margin: 0 auto 25px;
  background: #fff;
}

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--mid);
}

a:hover, a:focus { color: var(--accent); border-bottom-color: var(--accent); }

p { margin: 0 0 10px; }

h1 {
  font-size: 160%;
  margin: 18px 0 10px;
  font-weight: bold;
}

h1:first-child { margin-top: 4px; }

h2 { font-size: 125%; margin: 0 0 8px; }

/* A section heading that follows other content needs air above it; the first
   heading on a page or in a column does not. Affects the stacked sections on
   Research, Methods, Resources, Join Us and Contact. */
#contents h2 { clear: both; }
#contents h2:not(:first-child) { margin-top: 20px; }
h3 { font-size: 105%; margin: 0 0 6px; }

hr { border: 0; border-top: 1px solid var(--panel); margin: 15px 0; }

/* ----------------------------------------------- affiliation tabs (top) --- */

/* A single right-aligned group, exactly as wide as the column beneath it.
   flex-wrap means a tab that will not fit drops to a second row rather than
   overhanging the white column -- the right edge of the last tab always lines
   up with the right edge of #container. */
#affiliations {
  width: 100%;
  max-width: var(--width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  color: var(--mid);
}

.tab {
  display: inline-block;
  padding: 3px 8px;
  background: #fff;
  color: var(--mid);
  white-space: nowrap;
  border: none;
  border-radius: 5px 5px 0 0;
}

.tab:hover { background: #f2f0f6; color: var(--accent); }
.tab .where { color: #bbb; }

.affil-label { padding: 3px 4px; }

/* -------------------------------------------------------------- header --- */

#header {
  background: #fff;
  text-align: center;
  padding: 26px 20px 18px;
}

/* Futura Medium Italic, letterspaced caps. Futura is a macOS font; elsewhere
   this falls to Century Gothic (shipped with MS Office) and then Trebuchet,
   both of which are geometric but wider and larger on the body — the wordmark
   will look related, not identical. Set it as an SVG if that matters. */
#wordmark {
  display: block;
  font-family: Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 290%;
  font-style: italic;
  font-weight: 500;              /* Futura Medium */
  letter-spacing: 0.30em;
  text-transform: uppercase;
  line-height: 1.06;
  margin: 0 0 12px;
  color: var(--ink);
  /* the last letter's tracking would otherwise push the word off centre */
  text-indent: 0.30em;
}

/* Letterspaced caps, so the tagline reads as a base under the wordmark rather
   than as a first row of navigation. Futura is smaller on the body than
   Helvetica, hence 80% rather than 92%. */
#tagline {
  display: block;
  font-family: Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 80%;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  /* the last letter's tracking would otherwise push the line off centre */
  text-indent: 0.22em;
}

/* ---------------------------------------------------------- navigation --- */

#navigation {
  margin: 0 20px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nav {
  display: inline-block;
  padding: 5px 11px;
  background: var(--panel);
  color: var(--ink);
  border: none;
  border-radius: 5px 5px 0 0;
  font-size: 95%;
}

.nav:hover { background: #d6cfe4; color: var(--accent); }

.nav.active, .nav.active:hover {
  background: var(--accent);
  color: #fff;
  cursor: default;
}

/* -------------------------------------------------------------- banner --- */

/* White, not --ink: this colour shows through any transparent pixels in a
   banner and fills the box if the image is missing, so a dark value here
   turns either case into a black bar. The shipped banners are opaque and
   fill the box exactly, so they look the same against white. */
#banner { margin: 0 20px; background: #eee; line-height: 0; }
#banner img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- content --- */

#contents { padding: 14px 20px 4px; }

/* Two columns that collapse to one on a narrow window. Set --split to change
   the ratio, e.g. --split: 2fr 1fr for a wide left column. */
.row {
  display: grid;
  grid-template-columns: var(--split, 1fr 1fr);
  gap: 0 22px;
  align-items: start;
}

.row + .row { margin-top: 6px; }

.col { min-width: 0; }
.col.divider { border-right: 1px solid var(--rule); padding-right: 22px; }

@media (max-width: 620px) {
  .row { grid-template-columns: 1fr; }
  .col.divider { border-right: none; padding-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ----------------------------------------------------- content blocks --- */

.block {
  background: var(--panel);
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 93%;
}

.block :last-child { margin-bottom: 0; }
.block.plain { background: #fff; border: 1px solid var(--rule); }
.block .when { font-style: italic; font-size: 85%; color: var(--mid); }

/* A fixed-height panel the reader scrolls -- no script involved. */
.scroll {
  overflow-y: auto;
  max-height: 420px;
  padding-right: 8px;
}

/* --------------------------------------------------------------- people --- */

/* Portrait on the left, details on the right. Drop an <img> in .portrait and
   it is sized automatically; with no image the placeholder shows initials. */
.person {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;        /* keep the portrait square, not row-height */
}

.portrait {
  width: 110px;
  height: 110px;
  border-radius: 3px;
  background: var(--accent-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 170%;
  letter-spacing: 0.08em;
  overflow: hidden;
}

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

.person h3 { margin-bottom: 2px; }
.person .role { color: var(--mid); font-style: italic; }

@media (max-width: 480px) {
  .person { grid-template-columns: 1fr; }
  .portrait { width: 88px; height: 88px; font-size: 140%; }
}

/* A compact roster for alumni -- no portraits. */
.roster { margin: 0; padding: 0; list-style: none; }

.roster li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.roster li:last-child { border-bottom: none; }
.roster .name { font-weight: bold; }

.roster .thumb img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.roster .thumb.empty {
  width: 54px;
  height: 54px;
  border-radius: 3px;
  background: var(--accent-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90%;
}

/* A definition list that keeps each term on the same line as its value,
   with the values aligned in a column. */
dl.inline {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 0;
}

dl.inline dt { color: var(--mid); }
dl.inline dd { margin: 0; }

/* -------------------------------------------------------------- figures --- */

.figure { margin: 0 0 10px; }

/* Floated into the prose, which wraps around it. Percentage width so it
   tracks the column; the cap keeps it from swallowing the text measure. */
.figure.right {
  float: right;
  width: 38%;
  max-width: 340px;
  margin: 4px 0 16px 26px;
}

/* The themes diagram is sized so that it finishes level with the opening
   paragraphs rather than hanging below them. Measured, not guessed: at 290px
   it stands 248px tall against a 246px blurb. Re-check if that prose changes. */
.figure.right.intro { width: 290px; max-width: none; margin-top: 0; }

/* Too narrow to wrap text beside a figure -- let it go full width instead. */
@media (max-width: 620px) {
  .figure.right { float: none; width: 100%; max-width: none; margin: 0 0 12px; }
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.figure a { border-bottom: none; }

.figure figcaption {
  padding-top: 6px;
  font-size: 85%;
  color: var(--mid);
  line-height: 1.45;
}

/* ------------------------------------------------------------- utility --- */

.pill {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 3px 3px 0;
  background: var(--accent-2);
  color: #fff;
  border-radius: 10px;
  font-size: 80%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lead { font-size: 105%; }
.quiet { color: var(--mid); font-size: 90%; }
.callout {
  background: #fff;
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-style: italic;
}

.strip {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  margin: 12px 0 0;
  font-size: 90%;
  letter-spacing: 0.05em;
}

.strip a, .strip a:visited { color: #fff; border-bottom-color: #888; }
.strip a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* --------------------------------------------------------------- footer --- */

#footer {
  margin: 0 20px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--rule);
  font-size: 80%;
  color: var(--mid);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}

#footer a { color: var(--mid); }

/* ---------------------------------------------------------------- print --- */

@media print {
  body { background: #fff; padding: 0; }
  #container { max-width: none; }
  #affiliations, #navigation, #banner { display: none; }
  a, a:visited { color: #000; border-bottom: none; text-decoration: underline; }
  .block { background: #fff; border: 1px solid #ccc; }
  .scroll { max-height: none; overflow: visible; }
}