/* Shared site styles. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --paper:#f4f2e9;
  --ink:#24362b;
  --line:#c9cebd;
  --green:#dce9a7;
  --orange:#f0b58e
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:17px;
  line-height:1.65
}

a {
  color:inherit;
  text-underline-offset:5px
}

a:focus-visible {
  outline:3px solid #b65830;
  outline-offset:6px
}

header,main,footer {
  max-width:1160px;
  margin:auto;
  padding-left:44px;
  padding-right:44px
}

header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.wordmark {
  font-family:'Space Grotesk',sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:-1px;
  text-decoration:none
}

nav {
  display:flex;
  gap:30px;
  font-size:14px
}

nav a {
  text-decoration:none
}

nav a:hover {
  text-decoration:underline
}

.hero {
  padding:82px 0 88px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:36px;
  align-items:center
}

.eyebrow {
  font-size:12px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:9px
}

.dot {
  width:8px;
  height:8px;
  background:#6e873e;
  border-radius:50%
}

h1,h2,h3 {
  font-family:'Space Grotesk',sans-serif;
  line-height:1.08;
  letter-spacing:-2px
}

h1 {
  font-size:clamp(54px,6vw,78px);
  font-weight:500;
  margin:25px 0
}

.intro {
  max-width:500px;
  font-size:19px;
  color:#536052
}

.hero-link {
  display:inline-block;
  margin-top:18px;
  font-size:15px;
  font-weight:600
}

.illustration {
  height:340px;
  position:relative;
  display:grid;
  place-items:center
}

.orbit {
  width:290px;
  height:290px;
  border:1px dashed #b4bca6;
  border-radius:50%;
  position:absolute
}

.screen {
  width:240px;
  height:172px;
  background:var(--ink);
  border-radius:13px;
  padding:13px;
  transform:rotate(-8deg);
  position:relative;
  box-shadow:9px 12px 0 #c9cebd
}

.display {
  height:100%;
  background:var(--green);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px
}

.display b {
  font-family:'Space Grotesk',sans-serif;
  font-size:24px;
  letter-spacing:-1px;
  line-height:1.1
}

.display span {
  display:block;
  height:6px;
  background:#8da254;
  width:67%
}

.display span:last-child {
  width:42%
}

.stand {
  position:absolute;
  bottom:-41px;
  left:95px;
  width:42px;
  height:30px;
  background:var(--ink)
}

.stand:after {
  content:'';
  position:absolute;
  width:95px;
  height:9px;
  background:var(--ink);
  bottom:-5px;
  left:-27px;
  border-radius:4px
}

.mini {
  position:absolute;
  bottom:39px;
  right:4px;
  background:var(--orange);
  border:8px solid #a97455;
  border-radius:10px;
  padding:15px 18px;
  transform:rotate(8deg);
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  line-height:1.25;
  box-shadow:5px 6px 0 #d8cfba
}

.spark {
  position:absolute;
  left:20px;
  top:32px;
  font-size:48px;
  font-weight:400
}

.caption {
  position:absolute;
  bottom:-15px;
  left:40px;
  font-family:monospace;
  font-size:11px;
  color:#6a735f;
  transform:rotate(-4deg)
}

.about {
  padding:35px 0 42px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:50px
}

.section-label {
  font-family:monospace;
  font-size:12px;
  margin-top:5px
}

.about p {
  margin:0;
  max-width:650px;
  font-size:21px;
  line-height:1.6
}

.projects {
  padding:36px 0 64px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:25px
}

h2 {
  font-size:36px;
  font-weight:500;
  margin:0
}

.small {
  font-size:13px;
  color:#65705d
}

.project-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:23px
}

.project {
  border:1px solid var(--line);
  padding:29px 30px 30px;
  border-radius:3px
}

.project-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:35px
}

.number {
  font-family:monospace;
  font-size:12px
}

.badge {
  font-size:11px;
  background:#e2e6d6;
  padding:4px 10px;
  border-radius:20px
}

.project h3 {
  font-size:27px;
  letter-spacing:-1px;
  font-weight:500;
  margin:0 0 16px
}

.project p {
  font-size:15px;
  margin:0;
  color:#58634f
}

.project .footnote {
  margin-top:24px;
  font-family:monospace;
  font-size:11px;
  color:#58634f
}

.contact {
  background:var(--green);
  padding:40px 42px;
  margin-bottom:65px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:40px;
  align-items:center;
  border-radius:3px
}

.contact h2 {
  font-size:33px
}

.contact p {
  font-size:15px;
  margin:12px 0 0
}

.contact a {
  font-size:clamp(14px,2vw,21px);
  overflow-wrap:anywhere;
  font-weight:500
}

footer {
  padding-top:23px;
  padding-bottom:30px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#65705d
}

footer p {
  margin:0
}

@media(max-width:700px) {
  header,main,footer {
    padding-left:24px;
    padding-right:24px
  }

  header {
    height:85px
  }

  .wordmark {
    font-size:21px
  }

  nav {
    gap:18px
  }

  nav a:first-child {
    display:none
  }

  .hero {
    grid-template-columns:1fr;
    padding:49px 0 48px;
    gap:15px
  }

  h1 {
    font-size:57px
  }

  .intro {
    font-size:18px
  }

  .illustration {
    height:290px;
    max-width:350px;
    width:100%;
    margin:auto
  }

  .orbit {
    height:250px;
    width:250px
  }

  .screen {
    width:215px;
    height:155px
  }

  .mini {
    right:0;
    bottom:29px
  }

  .about {
    grid-template-columns:1fr;
    gap:15px
  }

  .about p {
    font-size:19px
  }

  .section-heading {
    display:block
  }

  .section-heading .small {
    display:block;
    margin-top:10px
  }

  .project-grid {
    grid-template-columns:1fr
  }

  .project {
    padding:25px
  }

  .contact {
    grid-template-columns:1fr;
    padding:28px;
    gap:24px;
    margin-bottom:45px
  }

  .contact a {
    font-size:16px
  }

  footer {
    display:block
  }

  footer p+p {
    margin-top:7px
  }

}

.section-copy h2 {
  font-size:34px;
  letter-spacing:-1px;
  margin:0 0 22px
}

.section-copy p {
  font-size:19px
}

.state-of-play p {
  font-size:17px;
  color:#58634f
}

.state-of-play {
  padding-bottom:48px
}

@media(max-width:700px) {
  .section-copy h2 {
    font-size:30px
  }

  .section-copy p {
    font-size:18px
  }

}

.hero {
  grid-template-columns:1fr 1.12fr;
  gap:40px
}

.lab-photo {
  margin:0;
  min-width:0
}

.lab-photo img {
  display:block;
  width:100%;
  height:400px;
  object-fit:cover;
  border-radius:5px
}

.lab-photo figcaption {
  font-family:monospace;
  font-size:10px;
  line-height:1.6;
  margin-top:12px;
  color:#65705d
}

@media(max-width:700px) {
  .hero {
    grid-template-columns:1fr;
    gap:32px
  }

  .lab-photo img {
    height:auto;
    aspect-ratio:3/2
  }

  .lab-photo figcaption {
    font-size:10px
  }

}

.desk-illustration {
  width:100%;
  max-width:520px;
  margin:auto
}

.desk-illustration svg {
  display:block;
  width:100%;
  height:auto
}

.classroom-concept {
  margin:0 0 48px
}

.classroom-concept img {
  display:block;
  width:100%;
  height:auto;
  max-height:570px;
  object-fit:cover;
  border-radius:5px
}

.classroom-concept figcaption {
  font-family:monospace;
  font-size:11px;
  line-height:1.6;
  color:#65705d;
  margin-top:12px
}

@media(max-width:700px) {
  .desk-illustration {
    max-width:390px
  }

  .classroom-concept img {
    aspect-ratio:3/2;
    object-fit:cover
  }

}

.project .desk-illustration,.project .board-illustration {
  margin:18px auto 0;
  width:100%;
  max-width:420px
}

.board-illustration svg {
  width:100%;
  height:auto;
  display:block
}

.project .footnote {
  margin-top:12px
}

header {
  height:130px
}

.brand {
  display:flex;
  flex-direction:column;
  gap:9px
}

.wordmark {
  font-size:33px;
  line-height:1.1
}

.brand .eyebrow {
  font-size:10px;
  letter-spacing:1.35px
}

.dot {
  position:relative;
  flex:0 0 8px;
  background:#8da94b;
  box-shadow:0 0 7px #94b654;
  animation:lab-pulse 2.6s ease-in-out infinite
}

.dot:after {
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid #9bb867;
  border-radius:50%;
  animation:lab-ring 2.6s ease-out infinite
}

@keyframes lab-pulse {
  0%,100% {
    opacity:.65;
    box-shadow:0 0 3px #94b654
  }

  50% {
    opacity:1;
    box-shadow:0 0 11px #94b654
  }

}

@keyframes lab-ring {
  0% {
    transform:scale(.5);
    opacity:.6
  }

  80%,100% {
    transform:scale(1.6);
    opacity:0
  }

}

@media(prefers-reduced-motion:reduce) {
  .dot,.dot:after {
    animation:none
  }

  .dot:after {
    display:none
  }

}

@media(max-width:700px) {
  header {
    height:110px
  }

  .wordmark {
    font-size:27px
  }

  .brand .eyebrow {
    font-size:8px;
    letter-spacing:.8px
  }

  .brand {
    gap:8px
  }

  .hero h1 {
    margin-top:0
  }

  nav {
    font-size:12px
  }

}

.section-label {
  color:#65705d
}

.principles {
  margin:28px 0 0;
  padding-left:21px
}

.principles li {
  padding-left:6px;
  margin-bottom:25px
}

.principles li:last-child {
  margin-bottom:0
}

.principles li::marker {
  color:#8da254
}

.principles strong {
  font-family:'Space Grotesk',sans-serif;
  font-size:21px;
  font-weight:600
}

.principles li p {
  margin-top:7px;
  font-size:17px;
  line-height:1.7
}

@media(max-width:700px) {
  .principles li p {
    font-size:16px
  }

}

/* A soft spectrum: moss, amber, clay, rose, plum, periwinkle and teal. */
.dot {
  animation:lab-spectrum 18s ease-in-out infinite;
  box-shadow:none
}

.dot:after {
  border-color:currentColor;
  animation:lab-ring 3s ease-out infinite
}

@keyframes lab-spectrum {
  0%,100% {
    background:#8a9b62;
    color:#8a9b62;
    opacity:.18;
    box-shadow:0 0 2px currentColor
  }

  7% {
    background:#8a9b62;
    color:#8a9b62;
    opacity:1;
    box-shadow:0 0 10px currentColor
  }

  14% {
    opacity:.12;
    box-shadow:0 0 1px currentColor
  }

  21% {
    background:#c59a54;
    color:#c59a54;
    opacity:1;
    box-shadow:0 0 10px currentColor
  }

  28% {
    opacity:.14;
    box-shadow:0 0 1px currentColor
  }

  35% {
    background:#c88167;
    color:#c88167;
    opacity:1;
    box-shadow:0 0 10px currentColor
  }

  42% {
    opacity:.1;
    box-shadow:0 0 1px currentColor
  }

  49% {
    background:#b67d91;
    color:#b67d91;
    opacity:1;
    box-shadow:0 0 10px currentColor
  }

  56% {
    opacity:.12;
    box-shadow:0 0 1px currentColor
  }

  63% {
    background:#9479ad;
    color:#9479ad;
    opacity:1;
    box-shadow:0 0 10px currentColor
  }

  70% {
    opacity:.1;
    box-shadow:0 0 1px currentColor
  }

  77% {
    background:#7c91b8;
    color:#7c91b8;
    opacity:1;
    box-shadow:0 0 10px currentColor
  }

  84% {
    opacity:.12;
    box-shadow:0 0 1px currentColor
  }

  91% {
    background:#659c94;
    color:#659c94;
    opacity:1;
    box-shadow:0 0 10px currentColor
  }

}

@media(prefers-reduced-motion:reduce) {
  .dot {
    animation:none;
    background:#8a9b62;
    opacity:1;
    box-shadow:0 0 4px #8a9b62
  }

  .dot:after {
    animation:none;
    display:none
  }

}

.things-colours {
  white-space:nowrap
}

.things-colours>span:nth-child(1) {
  color:#7d8f51
}

.things-colours>span:nth-child(2) {
  color:#b48b45
}

.things-colours>span:nth-child(3) {
  color:#ba7058
}

.things-colours>span:nth-child(4) {
  color:#a06b87
}

.things-colours>span:nth-child(5) {
  color:#8274aa
}

.things-colours>span:nth-child(6) {
  color:#518e86
}

.vision-followup {
  margin-top:20px!important;
  font-size:17px!important
}

nav {
  gap:24px
}

@media(max-width:700px) {
  nav {
    gap:14px
  }

}

.footer-links {
  font-size:12px;
  margin-right:22px;
  color:#65705d
}


/* Keep all imagery within its container, including narrow phone screens. */
img, svg { max-width: 100%; }
img { height: auto; }
.desk-illustration img, .board-illustration img { display: block; width: 100%; height: auto; }
.hero > *, .project-grid > *, .contact > * { min-width: 0; }
@media (max-width: 700px) {
  .lab-photo img, .classroom-concept img { width: 100%; max-width: 100%; height: auto; object-fit: contain; }
  .wordmark { font-size: clamp(22px, 6.5vw, 27px); }
}

/* Newsletter signup: hosted Substack form within our own lavender banner. */