/* ============================================================================
   MORTIMER LAB — SHARED STYLESHEET
   Every page links this one file. Edit here once and the whole site updates.
   Sections:
     1. Design tokens (colour, type, layout) — your main dials
     2. Base + links
     3. Header + navigation
     4. Page header (interior pages)
     5. Hero (home page only)
     6. Prose + dividers + figures
     7. Acknowledgement of Country
     8. Lab members (roster)
     9. Publications + patents
    10. News
    11. Research topics
    12. Resources + link lists
    13. Opportunities
    14. Contact + footer
    15. Motion
   ========================================================================== */

/* ====================== 1. DESIGN TOKENS ================================== */
:root{
  /* Colour — botanical palette, deliberately away from flat grey */
  --paper:    #F7F9F4;  /* page background — warm white with a green tint   */
  --band:     #EEF3E8;  /* deeper panel for set-apart sections              */
  --ink:      #1B2620;  /* main text — deep forest charcoal, not pure black */
  --ink-soft: #45524A;  /* secondary text, captions                        */
  --leaf:     #2F5D3A;  /* primary accent — links, rules, emphasis         */
  --leaf-deep:#20412A;  /* darker green for hover                          */
  --stem:     #6E8A74;  /* muted sage — hairlines, quiet detail            */
  --clay:     #A6612F;  /* warm earth accent, used very sparingly          */

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --measure: 44rem;     /* comfortable reading width                       */
  --wide:    64rem;     /* header / footer / roster width                  */
  --gap:     clamp(2.5rem, 6vw, 4.5rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* ====================== 2. BASE + LINKS =================================== */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Content columns */
.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:1.5rem; }
.wrap-wide{ max-width:var(--wide); }

a{
  color:var(--leaf);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--leaf) 35%, transparent);
  transition:color .15s ease, border-color .15s ease;
}
a:hover{ color:var(--leaf-deep); border-bottom-color:var(--clay); }
a:focus-visible{ outline:2px solid var(--leaf); outline-offset:3px; border-radius:2px; }

/* A reusable eyebrow label */
.eyebrow{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay); font-weight:600; margin:0 0 1rem;
}

/* ====================== 3. HEADER + NAV =================================== */
.site-header{
  border-bottom:1px solid color-mix(in srgb, var(--stem) 45%, transparent);
  background:var(--paper);
}
.site-header .wrap{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem 2rem; padding-block:1.25rem;
}
.wordmark{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:600; font-size:1.4rem;
  letter-spacing:-0.01em; color:var(--ink); border:0; white-space:nowrap;
}
.wordmark span{ color:var(--leaf); }
.wordmark-logo{
  height:2.6rem; width:auto; display:block;
}

nav.primary{ margin-left:auto; display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.93rem; }
nav.primary a{ border:0; color:var(--ink-soft); padding-block:.15rem; }
nav.primary a:hover{ color:var(--leaf); }
nav.primary a[aria-current="page"]{ color:var(--leaf); border-bottom:2px solid var(--clay); }

/* ====================== 4. PAGE HEADER (interior pages) =================== */
.page-head{ padding-block:clamp(2.5rem,6vw,4rem) var(--gap); }
.page-title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.15;
  letter-spacing:-0.015em; margin:0;
}
.page-head .standfirst{
  font-size:1.15rem; color:var(--ink-soft); margin:1rem 0 0; max-width:46ch;
}

/* ====================== 5. HERO (home only) ============================== */
.hero{ padding-block:clamp(2.5rem,7vw,5rem) var(--gap); animation:rise .6s ease both; }
.hero h1{
  font-family:var(--display); font-weight:500;
  /* Kept deliberately restrained — large enough to lead, not to shout */
  font-size:clamp(1.5rem, 3.4vw, 2.25rem); line-height:1.2;
  letter-spacing:-0.01em; margin:0 0 1.25rem; max-width:30ch;
}
.hero .lede{ font-size:1.15rem; color:var(--ink-soft); max-width:42ch; margin:0; }
.systems{
  margin-top:2.25rem; padding-top:1.25rem;
  border-top:1px solid color-mix(in srgb, var(--stem) 40%, transparent);
  font-size:.9rem; color:var(--ink-soft);
}
.systems strong{ color:var(--ink); font-weight:600; }

/* ====================== 6. PROSE + DIVIDERS + FIGURES ==================== */
main section{ padding-block:0 var(--gap); }

h2{
  font-family:var(--display); font-weight:600; font-size:1.6rem;
  letter-spacing:-0.01em; margin:0 0 1rem; scroll-margin-top:1.5rem;
}
h3{ font-family:var(--display); font-weight:600; font-size:1.2rem; margin:0 0 .5rem; }
p{ margin:0 0 1.15rem; }
ul, ol{ margin:0 0 1.15rem; padding-left:1.25rem; }
li{ margin-bottom:.35rem; }

/* Eyebrow that sits above an h2 (e.g. a place name) */
.kicker{
  display:block; font-family:var(--body); font-weight:600; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--clay); margin-bottom:.4rem;
}

/* Thin divider with a small node — a quiet nod to plant stems */
.divider{
  border:0; height:1px; background:color-mix(in srgb, var(--stem) 45%, transparent);
  max-width:var(--measure); margin:0 auto var(--gap); position:relative;
}
.divider::before{
  content:""; position:absolute; left:50%; top:50%;
  width:7px; height:7px; transform:translate(-50%,-50%) rotate(45deg); background:var(--clay);
}

figure{ margin:0 0 var(--gap); }
figure img{ width:100%; height:auto; border-radius:3px; display:block; }
figcaption{ font-size:.875rem; color:var(--ink-soft); font-style:italic; margin-top:.6rem; line-height:1.5; }

/* ====================== 7. ACKNOWLEDGEMENT OF COUNTRY ==================== */
.acknowledgement{ background:var(--band); padding-block:var(--gap); margin-bottom:var(--gap); }
.acknowledgement p{ font-size:.98rem; color:var(--ink-soft); margin-bottom:1rem; }
.acknowledgement p:last-child{ margin-bottom:0; }

/* ====================== 8. LAB MEMBERS (roster) ========================= */
.roster-nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.9rem; margin-bottom:var(--gap); }
.roster-nav a{ border:0; color:var(--ink-soft); }
.roster-nav a:hover{ color:var(--leaf); }

.person{ display:flex; gap:1.1rem; margin-bottom:2rem; }
.person .avatar{
  width:120px; height:120px; flex:none; object-fit:cover; border-radius:3px;
  background:var(--band);
}
.person-name{ margin:0 0 .15rem; font-size:1.1rem; }
.person-role{
  display:block; font-family:var(--body); font-weight:500; font-size:.9rem;
  color:var(--ink-soft); margin-top:.1rem;
}
.person-meta{ list-style:none; padding:0; margin:.5rem 0 .4rem; font-size:.9rem; color:var(--ink-soft); }
.person-meta li{ margin-bottom:.15rem; }
.person-links{ font-size:.88rem; margin:0; }

/* all roster photos share one size (PI included) */

/* Alumni / "where they went next" — compact list */
.alumni{ list-style:none; padding:0; margin:0; }
.alumni li{ margin-bottom:.7rem; font-size:.95rem; }
.alumni strong{ color:var(--ink); }

/* ====================== 9. PUBLICATIONS + PATENTS ======================= */
.pub-list{ list-style:none; padding:0; margin:0 0 var(--gap); }
.pub-list li{
  padding-left:1.4rem; text-indent:-1.4rem;   /* hanging indent for references */
  margin-bottom:.85rem; font-size:.96rem; line-height:1.6;
}
.pub-list li::before{ content:"–"; color:var(--clay); margin-right:.55rem; }

/* ====================== 10. NEWS ======================================== */
.news-entry{ padding-bottom:1.75rem; margin-bottom:1.75rem;
  border-bottom:1px solid color-mix(in srgb, var(--stem) 30%, transparent); }
.news-entry:last-child{ border-bottom:0; }
.news-date{
  font-family:var(--body); font-weight:600; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--clay); margin:0 0 .4rem;
}

/* ====================== 11. RESEARCH TOPICS ============================= */
.topic{ padding-bottom:.5rem; }
.topic-meta{ font-size:.9rem; color:var(--ink-soft); margin:.4rem 0 0; }
.topic-meta strong{ color:var(--ink); }

/* ====================== 12. RESOURCES + LINK LISTS ===================== */
.link-group{ margin-bottom:var(--gap); }
.link-group ul{ list-style:none; padding:0; }
.link-group li{ margin-bottom:.5rem; }

/* ====================== 13. OPPORTUNITIES ============================== */
.position{
  border:1px solid color-mix(in srgb, var(--stem) 40%, transparent);
  border-radius:4px; padding:1.25rem 1.4rem; margin-bottom:1.25rem; background:#fff;
}
.position h3{ margin-top:0; }

/* ====================== 14. CONTACT + FOOTER ========================== */
.contact .email{ font-family:var(--display); font-size:1.25rem; }

.site-footer{
  border-top:1px solid color-mix(in srgb, var(--stem) 45%, transparent);
  padding-block:2rem; font-size:.85rem; color:var(--ink-soft);
}

/* ====================== 15. MOTION ==================================== */
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ====================== RESPONSIVE ==================================== */
@media (max-width:30rem){
  .person{ flex-direction:column; gap:.6rem; }
  .person .avatar{ width:100px; height:100px; }
}

/* ----------------------------------------------------------------
   16. Contact blocks + misc helpers (added with the final pages)
   ---------------------------------------------------------------- */
.contact-block {
  margin: 2rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--band);
}
.contact-block h2 {
  margin-top: 0;
}
.person-body {
  flex: 1 1 auto;
  min-width: 0;
}