/* indoor-environmental-informatics — this team's own stylesheet.

   Yours to change. It is linked automatically because it is called
   style.css and sits in this folder; nothing else refers to it.

   It starts as a copy of the standard team layout so the page looks
   right from the first day. Rewrite as much of it as you like — no
   other team is affected, and there is no shared file to break.

   Loaded after the site's stylesheet, so anything here wins. */

/* ── Team page ─────────────────────────────────────────────────────
   After the old site's group pages: a banner, members split into leader and
   the rest, a vision statement, and a cloud of research topics.

   The roster and the counts are generated. Only the vision and the topic
   list live in the team's own template, so the page cannot go stale when
   somebody joins or leaves. */
.gp-banner { background: linear-gradient(105deg, #0d2b24 0%, #10382e 55%, #1b5c48 100%);
             border-radius: 14px; padding: 34px 38px; margin: 0 0 40px;
             position: relative; overflow: hidden; }
/* The diagonal hatching on the old banner, without an image to ship. */
.gp-banner::after { content: ""; position: absolute; inset: 0 -10% 0 55%;
                    background: repeating-linear-gradient(115deg,
                      rgba(63, 224, 176, .10) 0 2px, transparent 2px 26px); }
.gp-banner h1 { font-size: 40px; color: #fff; margin: 0; letter-spacing: -.5px;
                position: relative; z-index: 1; }
.gp-banner p { color: rgba(255, 255, 255, .62); font-size: 13px; margin: 8px 0 0;
               position: relative; z-index: 1; }

/* Even columns. The old page gave the cloud the wider half, but its cloud
   was a dense shaped blob; ours is text reflowing, so the same proportion
   reads as sprawl beside a short member list. */
.gp-cols { display: grid; grid-template-columns: 1fr 1fr;
           gap: 56px; align-items: start; }
@media (max-width: 1000px) { .gp-cols { grid-template-columns: 1fr; gap: 40px; } }

.gp-h { font-size: 27px; color: var(--ink); margin: 0 0 20px;
        letter-spacing: -.3px; }
.gp-vision-h { margin-top: 44px; }
.gp-sub { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
          color: var(--accent-ink); margin: 24px 0 12px; }
.gp-sub:first-of-type { margin-top: 0; }

/* A grid, not a flex row: flex sizes each card to its name, so a member
   list looks ragged. Equal columns that wrap. */
.gm-list { display: grid; gap: 14px;
           grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gm { display: flex; align-items: center; gap: 11px; min-width: 0;
      padding: 8px 10px; border-radius: 10px; background: var(--card);
      border: 1px solid var(--line); }
.gm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-face { display: flex; align-items: center; justify-content: center;
           width: 48px; height: 48px; flex: none; border-radius: 11px;
           overflow: hidden; background: var(--card-2);
           border: 1px solid var(--line-2); font-size: 18px; color: var(--ink-2); }
.gm-face img { width: 100%; height: 100%; display: block; }
.gm-name { font-size: 17px; color: var(--ink); text-decoration: none; }
.gm-name:hover { color: var(--brand-lit); }
.gm-name em { display: block; font-style: normal; font-size: 13px;
              color: var(--muted); margin-top: 1px; }

.gp-vision { font-size: 18px; line-height: 1.9; color: var(--ink);
             margin: 0; max-width: 42ch;
             text-align: justify; word-break: keep-all; hyphens: auto; }

/* Sized by rank, not by a layout algorithm — the first topics carry the
   page and the rest fill in behind them. */
.gp-cloud { display: flex; flex-wrap: wrap; align-items: baseline;
            justify-content: center; gap: 5px 12px; line-height: 1.2; }
.gp-cloud .w { white-space: nowrap; }
/* The cloud was drowning the left-hand column: 43px in full brand teal
   against a 22px heading. Ceiling lowered in the template, and the tones
   pulled back so the page reads as two halves rather than one. */
.gp-cloud .hot { color: var(--brand-3); }
.gp-cloud .warm { color: var(--accent-ink); opacity: .92; }
.gp-cloud .cool { color: var(--muted); opacity: .8; }

/* The team's members, on their own page */
.team-roster { display: grid; gap: 14px;
               grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.team-member { display: flex; gap: 12px; align-items: flex-start; }
.face-sm { display: block; flex: none; width: 72px; aspect-ratio: 1 / 1;
           border-radius: var(--r); overflow: hidden; background: var(--card);
           border: 1px solid var(--line-2); }
.face-sm img { display: block; width: 100%; height: 100%; }
.face-sm.placeholder { display: flex; align-items: center; justify-content: center;
                       font-size: 26px; color: var(--ink-2); }
.tm-body { flex: 1; min-width: 0; }
.tm-name { font-size: 15px; color: var(--ink); }
.tm-name a { color: inherit; text-decoration: none;
             border-bottom: 1px solid transparent; }
.tm-name a:hover { border-bottom-color: var(--accent-ink); }
.tm-lead { font-size: 10px; padding: 1px 7px; border-radius: 99px;
           background: var(--brand-2); color: var(--brand-lit);
           vertical-align: 2px; margin-left: 4px; }
.tm-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tm-int { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }

/* The link from the banner to this team's papers. */
.gp-papers { display: inline-block; margin-top: 14px; font-size: 13px;
             color: var(--brand-lit); text-decoration: none;
             position: relative; z-index: 1; }
.gp-papers:hover { text-decoration: underline; }