:root {
  --font-family-serif:'Roboto Slab',Avenir Next W02,system-ui,-apple-system,Segoe UI,Roboto;
  --color-accent-green: #247527;
  --color-accent-green-highlight: #2e9031;
  --color-links: #d1941a;
  --color-links-highlight: #f0b53f;
  --color-foliage: #1a621c;
  --color-foliage-dark: #134a15;
  --color-cream: #f7f3ec;
  --color-tan: #e3c08f;
  --color-ink: #1f241f;
  --color-ink-soft: #4a4f4a;
  --color-bark: #6b3f17;
  --color-line: #e4dccf;
  --color-speech-bubble: rgb(135, 124, 24);
  --val-menu-bar-height: 80px;
}

@font-face {
  font-family: 'Natural Log';
  src: url('fonts/NaturalLog.woff2') format('woff2'),
      url('fonts/NaturalLog.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-Regular.woff2') format('woff2'),
      url('fonts/RobotoSlab-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-Bold.woff2') format('woff2'),
      url('fonts/RobotoSlab-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-Thin.woff2') format('woff2'),
      url('fonts/RobotoSlab-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-ExtraLight.woff2') format('woff2'),
      url('fonts/RobotoSlab-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-Light.woff2') format('woff2'),
      url('fonts/RobotoSlab-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-Medium.woff2') format('woff2'),
      url('fonts/RobotoSlab-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-SemiBold.woff2') format('woff2'),
      url('fonts/RobotoSlab-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-ExtraBold.woff2') format('woff2'),
      url('fonts/RobotoSlab-ExtraBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('fonts/RobotoSlab-Black.woff2') format('woff2'),
      url('fonts/RobotoSlab-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/***************************************/
/********** Body and Main DIV **********/
/***************************************/

/* What shows when a phone's page is dragged past its top or bottom ("rubber banding"), and in the
   strip Safari adds under its bottom toolbar at the end of the page: the navbar's and the footer's
   dark green, instead of white. Both the html and the body element are green, because Safari
   looks at the body too; the page itself is white (see .main). */
html,
body {
  background-color: var(--color-foliage-dark);
}

body {
  width: 100%;
  margin: 0;
  font-family: var(--font-family-serif);
  color: #212121;
}

/* Keep images flush with the bottom of their line, as before the page had a doctype */
img {
  vertical-align: bottom;
}

.main {
  margin-top: var(--val-menu-bar-height);
  background-color: white;
}

/* self-clear floats */
.self-clearing:after {
  content: "";
  clear: both;
  display: table;
}

/****************************************/
/********** The Navigation Bar **********/
/****************************************/

/* The navbar is part of the tree's foliage, a tone darker than the crown below it on the home page,
   with a ragged row of leaves hanging under it. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--val-menu-bar-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: url("/img/foliage.svg") 0 0 / 320px 320px repeat, var(--color-foliage-dark);
}

/* A ragged row of leaves hanging under the bar: two rows of rounded bumps of different sizes,
   overlapping, so the edge doesn't repeat visibly. */
.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  margin-top: -1px;
  background: url("/img/foliage.svg") 0 0 / 320px 320px repeat, var(--color-foliage-dark);
  -webkit-mask-image:
    radial-gradient(18px 12px at 50% 0, #000 98%, transparent 100%),
    radial-gradient(27px 17px at 50% 0, #000 98%, transparent 100%);
  -webkit-mask-size: 44px 18px, 71px 18px;
  -webkit-mask-position: 0 0, 23px 0;
  -webkit-mask-repeat: repeat-x;
  mask-image:
    radial-gradient(18px 12px at 50% 0, #000 98%, transparent 100%),
    radial-gradient(27px 17px at 50% 0, #000 98%, transparent 100%);
  mask-size: 44px 18px, 71px 18px;
  mask-position: 0 0, 23px 0;
  mask-repeat: repeat-x;
}

/* The bar and its leaves cast a shadow, so the leaves stand out against the crown's foliage and
   against whatever scrolls under them */
.navbar {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.navbar-brand img {
  display: block;
  height: 60px;
  width: auto;
}

.navbar-menu {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 500;
  color: var(--color-cream);
  text-decoration: none;
}

.navbar-link:hover {
  background-color: rgba(247, 243, 236, 0.12);
  color: var(--color-cream);
}

.navbar-link:focus-visible,
.navbar-burger:focus-visible {
  outline: 2px solid var(--color-tan);
  outline-offset: 2px;
}

/* The page you're on */
.navbar-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-tan);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* The menu toggle, only shown on narrow screens (see mobile.css) */
.navbar-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.navbar-burger {
  display: none;
}

/* To make sure anchor links scroll to the right position (taking navbar into account)*/
a.anchor {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}

/*****************************************/
/********** Text & Link Styling **********/
/*****************************************/

p.shout-out {
  font-size: 1.6em;
  font-weight: 600;
}

p.home-subtext {
  font-size: 1.2em;
  font-weight: normal;
}

a {
	color: var(--color-links);
	text-decoration: none;
	font-weight: 600;
}

a:hover {
  color: var(--color-links-highlight);
}

#scientific-author a {
  padding-left: 25px;
  background: url(/img/orcid_id.svg) 0px 0px no-repeat;
}

h1 {
   font-weight: 600;
   line-height: 100%;
}

h2 {
   font-weight: 600;
   line-height: 100%;
}

hr.separator {
  border-top: 1px dashed black;
  border-bottom: none;
  margin-top: 40px;
  margin-bottom: 40px;
}

pre {
  margin-left: 40px;
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-left: 3px solid #f36d33;
  color: #333;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
}

code {
  font-family: monospace;
  font-size: 1.2em;
}

span.em {
  color: #157084;
  font-weight: 700;
}

div.doc-remark {
  background-color: #D5D5D5;
  border: 3px solid black;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 15px;
}

li {
    margin: 10px 0;
}

/**************************************/
/********** Breadcrumb Trail **********/
/**************************************/

.breadcrumb-logo {
  width: 50px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 10px;
}

span.breadcrumb-trail {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 60px;
}

span.breadcrumb-title {
  font-size: 32px;
  font-weight: 800;
}

span.breadcrumb-separator {
  margin-left: 6px;
  margin-right: 6px;
}

/***********************************/
/********** Home Page: Hero **********/
/***********************************/

/* The top of the home page is the tree's crown: a rounded shape of deep green foliage with a faint
   scattering of leaves, its lower edge made of a few large lobes, with the trunk growing out from
   under it. */
.hero {
  position: relative;
  z-index: 1;
}

.hero-crown {
  position: relative;
  background: url("/img/foliage.svg") 0 0 / 320px 320px repeat, var(--color-foliage);
  color: var(--color-cream);
  /* Full width, with only its lower corners rounded off */
  border-radius: 0 0 140px 140px / 0 0 120px 120px;
}

/* The lobes along the crown's lower edge: the same foliage, cut into overlapping ellipses. Each
   ellipse stays inside this box, and the box inside the crown's rounded corners, so no ellipse is
   cut off by the box's edges where it would show as a straight line. */
.hero-crown::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -46px;
  height: 110px;
  background: url("/img/foliage.svg") 0 0 / 320px 320px repeat, var(--color-foliage);
  -webkit-mask-image:
    radial-gradient(9.5% 44% at 10% 50%, #000 98%, transparent 100%),
    radial-gradient(10% 48% at 26% 50%, #000 98%, transparent 100%),
    radial-gradient(9.5% 44% at 42% 52%, #000 98%, transparent 100%),
    radial-gradient(10% 48% at 58% 50%, #000 98%, transparent 100%),
    radial-gradient(9.5% 44% at 74% 52%, #000 98%, transparent 100%),
    radial-gradient(9.5% 44% at 90% 50%, #000 98%, transparent 100%);
  mask-image:
    radial-gradient(9.5% 44% at 10% 50%, #000 98%, transparent 100%),
    radial-gradient(10% 48% at 26% 50%, #000 98%, transparent 100%),
    radial-gradient(9.5% 44% at 42% 52%, #000 98%, transparent 100%),
    radial-gradient(10% 48% at 58% 50%, #000 98%, transparent 100%),
    radial-gradient(9.5% 44% at 74% 52%, #000 98%, transparent 100%),
    radial-gradient(9.5% 44% at 90% 50%, #000 98%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 5% 80px;
}

.hero-text {
  flex: 1 1 0;
  min-width: 0;
}

.hero-wordmark {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin-bottom: 36px;
}

.hero-eyebrow {
  margin: 0 0 12px;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tan);
}

.hero-title {
  margin: 0 0 20px;
  font-size: 3.2em;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-cream);
}

.hero-lead {
  margin: 0 0 32px;
  max-width: 34em;
  font-size: 1.25em;
  line-height: 1.55;
  color: rgba(247, 243, 236, 0.88);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Buttons that are links */
a.button {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 1.1em;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}

/* Buttons on the foliage green */
a.button-primary {
  background-color: var(--color-cream);
  border: 2px solid var(--color-cream);
  color: var(--color-foliage);
}

a.button-primary:hover {
  background-color: white;
  border-color: white;
  color: var(--color-foliage);
}

a.button-secondary {
  background-color: transparent;
  border: 2px solid rgba(247, 243, 236, 0.7);
  color: var(--color-cream);
}

a.button-secondary:hover {
  background-color: rgba(247, 243, 236, 0.12);
  border-color: var(--color-cream);
  color: var(--color-cream);
}

/* The .dlb script card next to the hero text */
.hero-script {
  flex: 0 1 480px;
  min-width: 0;
  margin: 0;
}

.script-card {
  background-color: white;
  border: 1px solid var(--color-line);
  border-left: 6px solid var(--color-bark);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.script-card-header {
  padding: 10px 18px;
  border-bottom: 1px solid var(--color-line);
  font-family: monospace;
  font-size: 0.85em;
  color: var(--color-ink-soft);
}

.script-code {
  margin: 0;
  padding: 18px;
  background: none;
  border: none;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink);
}

.dlb-key {
  color: var(--color-bark);
  font-weight: 600;
}

.dlb-rule {
  color: #9a9a9a;
}

.dlb-reply {
  color: var(--color-accent-green);
  font-weight: 600;
}

.hero-script-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.95em;
  color: rgba(247, 243, 236, 0.8);
}

/**************************************************
 ********** Home Page: Branching Content **********
 **************************************************/

.branching-content {
  width: 100%;
  /* Room for the trunk's fork under the crown */
  position: relative;
  padding-top: 190px;
  margin-top: -20px;
  /* The fork's box is wider than a phone screen */
  overflow-x: clip;
}

/* The trunk: a tall, repeating image with irregular edges, from where the fork under the crown ends
   (see .trunk-fork) down to the footer. Its repeats are stretched slightly to fit a whole number,
   so it always ends in the same shape it starts in: the fork's base at the top, and the top of the
   footer's trunk at the bottom. Behind the content (see below), so the branches and the owl sit on
   it. */
.branching-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 274px;
  bottom: 0;
  left: 50%;
  width: 140px;
  margin-left: -70px;
  /* Twice, the second 2px lower: stretched repeats can leave hairline gaps between them, which the
     other copy covers */
  background:
    url("/img/trunk-tile.svg") center top / 140px 600px,
    url("/img/trunk-tile.svg") center 2px / 140px 600px;
  background-repeat: no-repeat round;
}

/* The sections, with their thin branches and the owl, sit in front of the trunk */
.branching-content > div:not(.trunk-fork) {
  position: relative;
  z-index: 1;
}

/* The top of the trunk forks in the white space under the crown, its limbs reaching up behind the
   crown's lower lobes. Centred on the trunk; starts at the crown's lower edge and ends where the
   trunk image starts. */
.trunk-fork {
  position: absolute;
  z-index: 0;
  top: 20px;
  left: 50%;
  width: 900px;
  height: 260px;
  margin-left: -450px;
  background: url("/img/trunk-fork.svg") 0 0 / 900px 260px no-repeat;
  pointer-events: none;
}

/* On the home page the trunk is wider than the footer's trunk was drawn for: scale it so its top
   (100px wide, at x 200-300 of 500) matches the bottom of the trunk (x 12.3-136.9 of its 140px) */
.home #footer-trunk {
  width: 623px;
  height: 249px;
  margin-left: -307px;
  background-size: 623px 249px;
}

.branching-content::after {
  content: "";
  display: table;
  clear: both;
}

/***** Left Side: Intro *****/

.branching-content-intro {
  position: relative;
  float: left;
  width: 50%;
  background-image: url("/img/branch-thin-left.svg");
  background-repeat: no-repeat;
  background-position: right 0px bottom 20px;
  background-size: 500px 125px;
  padding-bottom: 140px;
}

.branching-content-intro-inner {
  padding-right: 90px;
  padding-left: 5%;
  text-align: center;
}

/***** Right Side: Demonstrator *****/

.branching-content-demo {
  position: relative;
  float: left;
  width: 50%;
  padding: 0;
  padding-top: 200px;
  padding-bottom: 100px;
}

/* Martin: inline SVG in the corner of the demo; he is decoration and takes no clicks */
.martin {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300px;
  height: 300px;
  pointer-events: none;
}

/* Talking: the beak opens and closes in a big, lively rhythm (the page script switches the .talking class on while
   Martin speaks). Silent, it is closed. The mouth inside grows with the opening, from its top edge. */
.owl-mouth { transform-origin: 20px 20.1px; transform: scaleY(0); }

.martin.talking .owl-beak-lower { animation: owl-talk-lower 0.9s ease-in-out infinite; }
.martin.talking .owl-beak-upper { animation: owl-talk-upper 0.9s ease-in-out infinite; }
.martin.talking .owl-mouth { animation: owl-talk-mouth 0.9s ease-in-out infinite; }

@keyframes owl-talk-lower {
  0% { transform: translateY(0.00px); }
  12% { transform: translateY(2.60px); }
  26% { transform: translateY(0.26px); }
  40% { transform: translateY(2.21px); }
  54% { transform: translateY(0.13px); }
  68% { transform: translateY(2.60px); }
  82% { transform: translateY(0.65px); }
  100% { transform: translateY(0.00px); }
}

@keyframes owl-talk-upper {
  0% { transform: translateY(0.00px); }
  12% { transform: translateY(-0.60px); }
  26% { transform: translateY(-0.06px); }
  40% { transform: translateY(-0.51px); }
  54% { transform: translateY(-0.03px); }
  68% { transform: translateY(-0.60px); }
  82% { transform: translateY(-0.15px); }
  100% { transform: translateY(0.00px); }
}

@keyframes owl-talk-mouth {
  0% { transform: scaleY(0.00); }
  12% { transform: scaleY(1.00); }
  26% { transform: scaleY(0.10); }
  40% { transform: scaleY(0.85); }
  54% { transform: scaleY(0.05); }
  68% { transform: scaleY(1.00); }
  82% { transform: scaleY(0.25); }
  100% { transform: scaleY(0.00); }
}

/* Eyebrows: the look is data-emotion on the svg ("neutral", "angry", "surprised", "sad" or "happy"). Each brow is the same little
   arch, moved (translate), tilted (rotate: the left brow's inner end is its right end) and flattened or arched (scale). */
.owl-brow {
  transition: transform 0.3s ease-in-out;
  /* The line is always the same thickness, whatever the brow's scale does to its shape: the stroke is measured on
     the screen, not in the picture (0.9 units of the picture, which is drawn 300px wide = about 4.1px) */
  vector-effect: non-scaling-stroke;
  stroke-width: 4.1px;
}

.owl-brow-left { transform: translate(-0.8px, 0.9px) rotate(-7deg) scale(0.95, 0.8); }
.owl-brow-right { transform: translate(-0.4px, -0.8px) rotate(1deg) scale(1.4, 1.4); }

.martin[data-emotion="angry"] .owl-brow-left { transform: translate(0.3px, 1.6px) rotate(24deg) scale(1.1, 0.35); }
.martin[data-emotion="angry"] .owl-brow-right { transform: translate(-0.3px, 1.6px) rotate(-24deg) scale(1.1, 0.35); }

.martin[data-emotion="surprised"] .owl-brow-left { transform: translate(-0.2px, -1.1px) scale(1.1, 1.8); }
.martin[data-emotion="surprised"] .owl-brow-right { transform: translate(0.2px, -1.1px) scale(1.1, 1.8); }

.martin[data-emotion="sad"] .owl-brow-left { transform: translate(-0.1px, 0.6px) rotate(-22deg) scale(1.05, 0.6); }
.martin[data-emotion="sad"] .owl-brow-right { transform: translate(0.1px, 0.6px) rotate(22deg) scale(1.05, 0.6); }

.martin[data-emotion="happy"] .owl-brow-left { transform: translate(0, 0.1px) rotate(-10deg) scale(1, 1.2); }
.martin[data-emotion="happy"] .owl-brow-right { transform: translate(0, 0.1px) rotate(10deg) scale(1, 1.2); }

/* The wings: both are the same shape, so a pose is only a rotation about the shoulder (the SVG origin of each wing) */
.owl-wing {
  transform: rotate(0deg);
  transition: transform 0.4s ease-in-out;
}
.owl-wing-folded { transform: rotate(8deg); }
.owl-wing-raised { transform: rotate(-140deg); }

/* Where he looks: only the pupils (and their glints) move. data-look is "left", "center" or "right" */
.owl-pupils {
  transform: translateX(0);
  transition: transform 0.25s ease-in-out;
}

/* a quick glance towards the tree is faster than a normal change of look */
.martin.glancing .owl-pupils { transition-duration: 0.12s; }

.martin[data-look="center"] .owl-pupils { transform: translateX(-1.5px); }
.martin[data-look="left"] .owl-pupils { transform: translateX(-3px); }

/* The blink: the upper lid comes down and the lower lid comes up, they meet in a curved line, hold a moment, and open again */
.owl-lid-top { transform: translateY(-8px); }
.owl-lid-bottom { transform: translateY(8px); }
.owl-lid-line { opacity: 0; }

.martin.blink .owl-lid-top { animation: owl-lid-top 0.7s both; }
.martin.blink .owl-lid-bottom { animation: owl-lid-bottom 0.7s both; }
.martin.blink .owl-lid-line { animation: owl-lid-line 0.7s both; }

@keyframes owl-lid-top {
  0% { transform: translateY(-8px); animation-timing-function: ease-in; }
  32% { transform: translateY(0); }
  55% { transform: translateY(0); animation-timing-function: ease-out; }
  100% { transform: translateY(-8px); }
}

@keyframes owl-lid-bottom {
  0% { transform: translateY(8px); animation-timing-function: ease-in; }
  32% { transform: translateY(0); }
  55% { transform: translateY(0); animation-timing-function: ease-out; }
  100% { transform: translateY(8px); }
}

@keyframes owl-lid-line {
  0%, 28% { opacity: 0; }
  34%, 53% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

/* The owl's home: a hole in the trunk next to where it sits, at the height of its head */
.branching-content-demo::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: 171px;
  width: 52px;
  height: 72px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 5px solid #6b3510;
  background: radial-gradient(ellipse at 50% 70%, #2a1102 0%, #140700 70%);
  box-shadow: inset 0 8px 8px rgba(0, 0, 0, 0.55), 0 -2px 0 #4a2205;
}

.branching-content-demo-inner {
  padding-top: 60px;
  padding-left: 90px;
  padding-right: 5%;
}

.speech-bubble {
  position: relative;
  float: right;
  width: 86%;
  min-width: 300px;
  min-height: 150px;
  font-weight: normal;
  font-size: 1.2em;
  color: #fff;
  background: var(--color-speech-bubble);
  padding: 20px;
  border-radius: 16px;
}

/* While it is typing, a click on the bubble shows the whole text at once */
.speech-bubble.typing {
  cursor: pointer;
}

/* The tail: long and pointed, curving down-left towards the owl */
.speech-bubble::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -70px;
  width: 50px;
  height: 72px;
  background: var(--color-speech-bubble);
  clip-path: path("M0 0 L46 0 C42 30 24 54 2 72 C12 52 12 24 0 0 Z");
}

#demo-reply-container {
  width: 92%;
  float: right;
  height: 220px;
}

/* Text for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The replies fade in once Martin has finished speaking */
#demo-reply-container .reply-button {
  animation: reply-in 0.35s ease-out both;
}

@keyframes reply-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.reply-button {
  font-family: var(--font-family-serif);
  background-color: var(--color-accent-green);
  font-size: 1.2em;
  color: white;
  padding: 12px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  float: right;
  margin-top: 10px;
  clear: right;
}

/* A reply that is a link (the demo's "Get started") looks like the other replies */
.reply-link {
  text-decoration: none;
  text-align: center;
  line-height: normal;
}

.reply-button:hover {
  background-color: var(--color-accent-green-highlight);
}

/***** Below the demo: one branch per section, alternating sides of the trunk *****/

.branch-rows {
  clear: both;
  display: flow-root;
}

/* The first row starts beside the owl's demo, in the space the shorter intro leaves on the left */
.branch-rows > .branch-row:first-of-type {
  margin-top: -200px;
}

.branch-row {
  position: relative;
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  background-repeat: no-repeat;
  background-size: 500px 125px;
}

.branch-left {
  padding: 0 90px 160px 5%;
  background-image: url("/img/branch-thin-left.svg");
  background-position: right 0 bottom 20px;
}

.branch-right {
  margin-left: 50%;
  padding: 0 5% 160px 90px;
  background-image: url("/img/branch-thin-right.svg");
  background-position: left 0 bottom 20px;
}

/* Rows on opposite sides of the trunk overlap a little, so the branches alternate closely */
.branch-row ~ .branch-row {
  margin-top: -140px;
}

/* The Web Service row tucks in a little further under the Studio row */
.branch-rows > .branch-row:nth-of-type(2) {
  margin-top: -300px;
}

/* The app row tucks in a little further under the Web Service row */
.branch-rows > .branch-row:nth-of-type(3) {
  margin-top: -220px;
}

/* The GitHub row tucks in a little further under the app row */
.branch-rows > .branch-row:nth-of-type(4) {
  margin-top: -300px;
}

.branch-last {
  background-image: none;
  padding-bottom: 60px;
}

/* Feature rows: Studio, the Web Service, your app */
.feature-title {
  margin: 0 0 12px;
  font-size: 1.7em;
  line-height: 1.25;
  color: var(--color-ink);
}

.feature-text {
  max-width: 32em;
  margin: 0 auto 14px;
  font-size: 1.1em;
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.feature-text code {
  font-size: 0.95em;
  color: var(--color-bark);
}

a.feature-link {
  display: inline-block;
  margin: 4px 10px;
  font-weight: 600;
  color: var(--color-foliage);
  text-decoration: none;
}

a.feature-link:hover {
  text-decoration: underline;
}

/* A screenshot of Studio's graph editor; opens full size when clicked */
/* The Web Service's place in a deployment */
.architecture-diagram {
  max-width: 440px;
  margin: 22px auto 16px;
  padding: 18px 18px 12px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.architecture-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-family-serif);
}

.architecture-diagram figcaption {
  margin-top: 10px;
  font-size: 0.8em;
  color: var(--color-ink-soft);
}

.arch-box {
  fill: var(--color-cream);
  stroke: var(--color-tan);
  stroke-width: 1.5;
}

.arch-yours {
  fill: #fff;
  stroke: var(--color-bark);
  stroke-dasharray: 5 4;
}

.arch-service {
  fill: var(--color-foliage);
}

.arch-label {
  font-size: 14px;
  text-anchor: middle;
  fill: var(--color-ink);
}

.arch-service-title {
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--color-cream);
}

.arch-service-sub {
  font-size: 12px;
  text-anchor: middle;
  fill: var(--color-tan);
}

.arch-note {
  font-size: 11px;
  fill: var(--color-ink-soft);
}

.arch-lines line {
  stroke: var(--color-bark);
  stroke-width: 1.5;
}

.arch-arrowhead {
  fill: var(--color-bark);
}

/* Code sample with a JavaScript / Java switch */
.code-card {
  max-width: 500px;
  margin: 22px auto 16px;
  border-radius: 8px;
  overflow: hidden;
  background: #2a1d10;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.code-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  background: #1c1309;
}

.code-tabs button {
  padding: 6px 14px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--color-tan);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}

.code-tabs button:hover {
  color: var(--color-cream);
}

.code-tabs button[aria-selected="true"] {
  background: #2a1d10;
  color: var(--color-cream);
  font-weight: 700;
}

.code-tabs button:focus-visible {
  outline: 2px solid var(--color-links-highlight);
  outline-offset: -2px;
}

.code-card pre {
  margin: 0;
  padding: 16px 18px 18px;
  border: 0;
  background: none;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-cream);
}

.code-card pre[hidden] {
  display: none;
}

.code-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

.tk-kw {
  color: var(--color-links-highlight);
}

.tk-str {
  color: #a8d59a;
}

.tk-com {
  color: #a08a6c;
  font-style: italic;
}

/* A GitHub-style card for the platform repository */
.repo-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 22px auto 16px;
  padding: 18px 20px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  text-align: left;
  color: var(--color-ink);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

.repo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.repo-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15em;
  color: var(--color-ink-soft);
}

.repo-name strong {
  color: var(--color-ink);
}

.repo-name svg {
  width: 24px;
  height: 24px;
  fill: var(--color-ink);
  flex: none;
}

.repo-languages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repo-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.repo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.85em;
  color: var(--color-ink-soft);
}

.repo-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
}

.repo-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  font-size: 0.85em;
}

.repo-facts > span {
  display: contents;
}

.repo-facts b {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.repo-facts code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1em;
  color: var(--color-bark);
}

.repo-facts code span {
  white-space: nowrap;
}

.feature-screenshot {
  display: block;
  max-width: 560px;
  margin: 22px auto 16px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transition: box-shadow 0.2s, transform 0.2s;
}

.feature-screenshot:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.feature-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pop-up for enlarged screenshots; Esc, the close button or a click outside closes it */
.lightbox {
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  display: block;
  max-width: 96vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* The closing call to action */
.start-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 8px;
}

.start-button {
  padding: 12px 22px;
  border: 2px solid var(--color-accent-green);
  border-radius: 8px;
  font-family: var(--font-family-serif);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-accent-green);
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}

.start-button:hover {
  border-color: var(--color-accent-green-highlight);
  color: var(--color-accent-green-highlight);
}

.start-button-primary {
  background: var(--color-accent-green);
  color: #fff;
}

.start-button-primary:hover {
  background: var(--color-accent-green-highlight);
  color: #fff;
}

/* Contributor logos, each in a card with its role */
.contributor-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 440px;
  margin: 22px auto 16px;
}

.contributor-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 14px 12px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}

.contributor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.contributor-logo {
  width: auto; /* the width/height attributes only tell the browser the shape, the height below sets the size */
  display: block;
  max-width: 100%;
  height: 84px;
  object-fit: contain;
}

/* A wide logo gets a card of its own, the full width of the row */
.contributor-card-wide {
  flex-basis: 100%;
}

#contributor-logo-ccare {
  height: 52px;
  width: auto;
  margin: 16px 0;
}

.contributor-role {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/****************************/
/********** Footer **********/
/****************************/

.footer-area {
  position: relative;
  /* The grass colour right under the grass, fading to a darker green further down, with a few
     loose tufts scattered over it (the grass strip itself covers the top 100px) */
  background:
    url("/img/footer-tufts.svg") 40px 60px / 760px 320px repeat,
    linear-gradient(to bottom, #247527 100px, var(--color-foliage-dark) 100%);
  font-size: 12px;
  font-weight: 400;
  color: #DDDDDD;
  padding-bottom: 50px;
  width: 100%;
}

#footer-grass {
  width: 100%;
  height: 100px;
  background-image: url("/img/grass.svg");
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: 350px 50px;
  background-color: white;
  position: relative;
  /* Overlap the green below by a pixel, so no hairline shows where the two meet */
  box-shadow: 0 1px 0 #247527;
}

#footer-trunk {
  background-image: url("/img/trunk-clear.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: fill;
  width: 500px;
  height: 200px;
  position: absolute;
  top: 0px;
  left:50%;
  margin-left:-250px;
}

/* Three columns under the roots, then one small line of legal text */
.footer-columns {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  max-width: 960px;
  margin: 150px auto 0;
  padding: 0 5%;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-cream);
}

.home .footer-columns {
  margin-top: 190px;
}

.footer-brand img {
  display: block;
  width: 249px;
  max-width: 100%;
  height: auto;
}

.footer-brand p {
  max-width: 22em;
  margin: 14px 0 0;
  color: rgba(247, 243, 236, 0.85);
}

.footer-col h2 {
  margin: 0 0 10px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-tan);
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li + li {
  margin-top: 4px;
}

.footer-area a {
  color: var(--color-cream);
  text-decoration: none;
}

.footer-area a:hover {
  color: var(--color-links-highlight);
  text-decoration: underline;
}

.footer-legal {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 32px;
  max-width: 960px;
  margin: 40px auto 0;
  padding: 18px 5% 0;
  border-top: 1px solid rgba(247, 243, 236, 0.25);
  box-sizing: border-box;
  font-size: 12px;
  color: rgba(247, 243, 236, 0.75);
}

.footer-legal p {
  flex: 1;
  margin: 0;
}

.footer-legal p a {
  text-decoration: underline;
}

/* The privacy page, on its own at the end of the bottom bar */
.footer-area a.footer-privacy {
  flex: none;
  font-weight: 700;
  white-space: nowrap;
}

.footer-brand p a {
  text-decoration: underline;
}

/**********************************/
/********** Blog Styling **********/
/**********************************/

/* The News overview: one entry per post, newest first */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-item {
  padding: 22px 0;
}

.news-item + .news-item {
  border-top: 1px solid var(--color-line);
}

.fullpage-main-inner .news-item h2 {
  margin: 0 0 8px;
}

.news-item h2 a {
  color: var(--color-ink);
  text-decoration: none;
}

.news-item h2 a:hover {
  color: var(--color-foliage);
  text-decoration: underline;
}

.news-item p {
  margin: 0 0 8px;
}

a.news-more,
.news-back a {
  color: var(--color-foliage);
  font-weight: 600;
  text-decoration: none;
}

/* A news post's date line, above its title (on the overview and on the post's own page) */
.news-date {
  margin: 0 0 6px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-foliage);
}

/* A post on its own page */
.news-back {
  margin: 0 0 22px;
}

.news-post-full h1 {
  margin-bottom: 20px;
}

/* Long addresses in posts wrap instead of running off narrow screens */
.news-post a {
  overflow-wrap: anywhere;
}

/* "Discuss this post on Bluesky", under a post that has been announced there */
.news-discuss {
  margin: 28px 0 0;
}

.news-discuss a {
  color: var(--color-foliage);
  font-weight: 600;
  text-decoration: none;
}

.news-discuss a:hover {
  text-decoration: underline;
}

/* Links to the older and newer post, under a post */
.news-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

.news-nav a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48%;
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}

.news-nav a:hover {
  color: var(--color-foliage);
}

.news-nav a span {
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-foliage);
}

.news-nav-newer {
  margin-left: auto;
  text-align: right;
}

/* Code in posts, in the style of the home page's script card */
.news-post pre {
  margin: 16px 0 20px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 6px solid var(--color-bark);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink);
}

img.image-wide {
  width: 100%;
}

img.image-medium {
  width: 75%;
}

img.image-slim {
  width: 50%;
}

img.showcase-logo {
  width: 50%;
}

.news-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  border: 1px solid #555;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}