/* ==========================================================================
   AlgaLabs — algalabs.co.nz
   Palette and typography follow the AlgaLabs homepage handoff.
   ========================================================================== */

:root{
  /* Brand palette */
  --ivory:      #F3F0E7;   /* page ground */
  --paper:      #FAF8F2;   /* off-white panels */
  --white:      #FFFFFF;
  --deep:       #123B3A;   /* primary brand colour */
  --teal:       #2F7F78;   /* secondary accent */
  --seaglass:   #8FC7B5;   /* occasional soft accent */
  --charcoal:   #263332;   /* body copy */
  --gold:       #C9A45C;   /* very small accents only */

  /* Derived hairlines */
  --hair:        rgba(38,51,50,.17);
  --hair-soft:   rgba(38,51,50,.10);
  --hair-ivory:  rgba(243,240,231,.22);

  /* Type */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Measure and page */
  --measure: 34rem;
  --page:    1180px;
  --edge:    clamp(1.25rem, 5vw, 3.5rem);
  --side:    13rem;   /* width of the side-heading column */
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

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

body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:1.0625rem;          /* 17px */
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--deep); }

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--deep); color:var(--ivory);
  padding:.65rem 1rem; z-index:100; font-size:.875rem;
}
.skip:focus{ left:0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--edge);
}

.section{
  padding-block:clamp(3.25rem, 6.5vw, 5.75rem);
}

.section:not(:first-of-type) > .wrap::before{
  content:"";
  display:block;
  border-top:1px solid var(--hair);
  margin-bottom:clamp(3.25rem, 6.5vw, 5.75rem);
  margin-top:calc(-1 * clamp(3.25rem, 6.5vw, 5.75rem));
}

/* Side-heading grid: heading hangs in the left column, prose sits in the right. */
.grid{
  display:grid;
  grid-template-columns:var(--side) minmax(0, 1fr);
  column-gap:clamp(1.75rem, 4vw, 3.5rem);
  row-gap:1.5rem;
}

.col{ max-width:var(--measure); }
.col--wide{ max-width:46rem; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3{
  font-family:var(--serif);
  font-weight:600;
  color:var(--deep);
  margin:0;
  text-wrap:balance;
}

.side-head{
  font-size:clamp(1.5rem, 2.1vw, 1.875rem);
  line-height:1.15;
  letter-spacing:-.005em;
  padding-top:.15em;
}

.intro{
  max-width:var(--measure);
  font-size:1.1875rem;
  line-height:1.6;
  color:var(--charcoal);
}

.lede{
  font-size:clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height:1.62;
  max-width:31rem;
}

.place{
  margin-top:2rem;
  font-size:.8125rem;
  letter-spacing:.03em;
  color:var(--teal);
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--ivory);
  border-bottom:1px solid var(--hair);
}

.masthead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:4.5rem;
}

.logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:0;
}

.logo__img{
  height:2.05rem;
  width:auto;
}

.nav__list{
  display:flex;
  gap:clamp(1.1rem, 2.4vw, 2.1rem);
  align-items:center;
}

.nav__list a{
  font-size:.9375rem;
  text-decoration:none;
  color:var(--charcoal);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}

.nav__list a:hover{ color:var(--teal); border-bottom-color:var(--seaglass); }
.nav__list a[aria-current="true"]{ color:var(--deep); border-bottom-color:var(--gold); }

.nav-toggle{
  display:none;
  font-family:inherit;
  font-size:.9375rem;
  color:var(--charcoal);
  background:none;
  border:1px solid var(--hair);
  padding:.4rem .85rem;
  cursor:pointer;
}
.nav-toggle:hover{ border-color:var(--teal); color:var(--teal); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,44%);
  align-items:stretch;
  /* Percentages here resolve against the full page width, so the first column
     lines up with the .wrap content edge in the masthead. */
  padding-inline-start:max(var(--edge), calc((100% - var(--page)) / 2 + var(--edge)));
}

.hero__text{
  padding-inline-end:clamp(1.5rem, 3.5vw, 3rem);
  padding-block:clamp(3.25rem, 7vw, 6rem);
  display:flex;
  align-items:center;
}

.hero__inner{ max-width:33rem; }

.hero__title{
  font-size:clamp(2.35rem, 5.4vw, 3.9rem);
  line-height:1.06;
  letter-spacing:-.018em;
  margin-bottom:1.5rem;
}

.hero__figure{ position:relative; overflow:hidden; }

.hero__figure img{
  width:100%;
  height:100%;
  min-height:24rem;
  object-fit:cover;
  object-position:58% 42%;
}

/* --------------------------------------------------------------------------
   Research areas
   -------------------------------------------------------------------------- */

.area{
  margin-top:clamp(2.75rem, 5vw, 4.25rem);
  padding-top:clamp(1.75rem, 3vw, 2.5rem);
  border-top:1px solid var(--hair-soft);
}

.area h3{
  font-size:1.4375rem;
  line-height:1.2;
  letter-spacing:-.005em;
  padding-top:.1em;
}

.area__body{ max-width:var(--measure); }

.topics{
  margin-top:1.75rem;
  border-top:1px solid var(--teal);
  max-width:19rem;
}

.topics li{
  border-bottom:1px solid var(--hair-soft);
  padding:.5rem 0;
  font-size:.9375rem;
  color:var(--charcoal);
}

/* --- Figures ------------------------------------------------------------- */

.figure figcaption{
  margin-top:.85rem;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--teal);
}

.figure--panel{
  grid-column:2 / -1;
  margin-top:2.25rem;
}

.figure--panel picture{
  display:block;
  background:var(--white);
  border:1px solid var(--hair);
  padding:clamp(.75rem, 1.5vw, 1.25rem);
}

/* The diatom plate: text held to the left, image running off the right edge. */
.area--plate{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  align-items:center;
  column-gap:clamp(2rem, 4vw, 3.5rem);
  padding-inline-start:max(var(--edge), calc((100% - var(--page)) / 2 + var(--edge)));
  padding-inline-end:0;
  margin-top:clamp(3.25rem, 6vw, 5.25rem);
  padding-top:0;
  border-top:0;
}

.bleed-text{ max-width:24rem; }
.bleed-text h3{ margin-bottom:1rem; }

.figure--plate img{ width:100%; }

/* --------------------------------------------------------------------------
   How we work
   -------------------------------------------------------------------------- */

.two-col{
  margin-top:1.25rem;
  columns:2;
  column-gap:2.5rem;
}

.two-col p{ break-inside:avoid; margin-bottom:1em; }

/* --------------------------------------------------------------------------
   Collaboration call to action
   -------------------------------------------------------------------------- */

.cta-row{ margin-top:2rem; }

.cta{
  display:inline-block;
  font-size:.9375rem;
  color:var(--deep);
  text-decoration:none;
  padding-bottom:.3rem;
  border-bottom:1px solid var(--teal);
  transition:color .18s ease, border-color .18s ease;
}

.cta:hover{ color:var(--teal); border-bottom-color:var(--gold); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer{
  background:var(--deep);
  color:var(--ivory);
  padding-block:clamp(3rem, 5.5vw, 4.5rem);
  border-top:2px solid var(--gold);
}

.footer__inner{
  display:grid;
  grid-template-columns:var(--side) minmax(0,1fr) auto;
  column-gap:clamp(1.75rem, 4vw, 3.5rem);
  row-gap:2rem;
  align-items:start;
}

.footer__logo{
  height:4.75rem;
  width:auto;
  margin-bottom:1.1rem;
}

.footer__line{
  font-size:.9375rem;
  color:rgba(243,240,231,.78);
  margin-bottom:.2rem;
}

.footer__email{ margin-top:.55rem; font-size:.9375rem; }
.footer__email a{ color:var(--seaglass); text-decoration:none; border-bottom:1px solid rgba(143,199,181,.45); }
.footer__email a:hover{ color:var(--ivory); border-bottom-color:var(--ivory); }

.footer__nav{ justify-self:end; }

.footer__nav ul{ display:flex; flex-wrap:wrap; gap:1.4rem; }

.footer__nav a{
  font-size:.9375rem;
  color:rgba(243,240,231,.78);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.footer__nav a:hover{ color:var(--ivory); border-bottom-color:var(--seaglass); }

/* --------------------------------------------------------------------------
   Anchor offset for the sticky masthead
   -------------------------------------------------------------------------- */

.section, .footer, .hero{ scroll-margin-top:5rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1000px){
  :root{ --side:10.5rem; }
  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,38%); }
  .hero__title{ font-size:clamp(2rem, 4vw, 2.6rem); }
}

@media (max-width:860px){
  .grid{ grid-template-columns:1fr; row-gap:1.1rem; }
  .side-head{ padding-top:0; }
  .figure--panel{ grid-column:1 / -1; }

  .hero{ grid-template-columns:1fr; padding-inline-start:0; }
  .hero__text{
    padding-inline:var(--edge);
    padding-block:clamp(2.5rem, 8vw, 3.5rem);
  }
  .hero__figure img{
    min-height:0;
    aspect-ratio:4 / 3;
    max-height:58vh;
    object-position:56% 34%;
  }

  .area--plate{
    grid-template-columns:1fr;
    row-gap:1.75rem;
    padding-inline:var(--edge);
  }
  .figure--plate{
    margin-inline:calc(-1 * var(--edge));
  }
  .figure--plate figcaption{ padding-inline:var(--edge); }
  .bleed-text{ max-width:var(--measure); }

  .two-col{ columns:1; }

  .footer__inner{ grid-template-columns:1fr; row-gap:1.75rem; }
  .footer__nav{ justify-self:start; }

  .logo__img{ height:1.8rem; }
  .footer__logo{ height:4.25rem; }

  /* Navigation collapses to a simple menu */
  .nav-toggle{ display:block; }
  .nav{
    display:none;
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--ivory);
    border-bottom:1px solid var(--hair);
    padding:.5rem var(--edge) 1.1rem;
  }
  .nav[data-open]{ display:block; }
  .masthead__inner{ position:relative; }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:0; }
  .nav__list li{ width:100%; border-top:1px solid var(--hair-soft); }
  .nav__list a{ display:block; padding:.7rem 0; border-bottom:0; }
  .nav__list a[aria-current="true"]{ color:var(--teal); }
}

@media (max-width:520px){
  body{ font-size:1rem; }
  .intro{ font-size:1.0625rem; }
  .topics{ max-width:none; }
}

/* --------------------------------------------------------------------------
   Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  .hero__inner > *{
    animation:settle .7s cubic-bezier(.22,.61,.36,1) backwards;
  }
  .hero__inner > *:nth-child(1){ animation-delay:.04s; }
  .hero__inner > *:nth-child(2){ animation-delay:.12s; }
  .hero__inner > *:nth-child(3){ animation-delay:.18s; }
  .hero__inner > *:nth-child(4){ animation-delay:.24s; }

  @keyframes settle{
    from{ opacity:0; transform:translateY(.5rem); }
    to{ opacity:1; transform:none; }
  }
}

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

@media print{
  .masthead, .nav-toggle, .skip{ display:none; }
  body{ background:#fff; font-size:11pt; }
  .footer{ background:#fff; color:#000; border-top:1px solid #000; }
  .footer__line, .footer__nav a{ color:#000; }
}