@layer reset, base, layouts, components, utilities;

@layer reset{

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
}

/* Netsign base styles */

:root {
  color-scheme: light dark;
  --colour-scheme-anim-duration: 1.7s;
  --colour-scheme-anim-timing: ease;

  --content-width: 54rem; /* 1080 = 54x20 */
  --copy-width: 50ch;
  --nav-mobile-width: 10rem;

  /* support for media query variables is from postcss-custom-media */

  /* Text sizes *****************************************/
  /* smallest target screen is 360 https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ */
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.414,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Step -2: 11.1111px → 10.003px */
  --step--2: clamp(0.6252rem, 0.7185rem + -0.1204vi, 0.6944rem);
  /* Step -1: 13.3333px → 14.1443px */
  --step--1: clamp(0.8333rem, 0.8157rem + 0.0881vi, 0.884rem);
  /* Step 0: 16px → 20px */
  --step-0: clamp(1rem, 0.913rem + 0.4348vi, 1.25rem);
  /* Step 1: 19.2px → 28.28px */
  --step-1: clamp(1.2rem, 1.0026rem + 0.987vi, 1.7675rem);
  /* Step 2: 23.04px → 39.9879px */
  --step-2: clamp(1.44rem, 1.0716rem + 1.8422vi, 2.4992rem);
  /* Step 3: 27.648px → 56.5429px */
  --step-3: clamp(1.728rem, 1.0998rem + 3.1408vi, 3.5339rem);
  /* Step 4: 33.1776px → 79.9517px */
  /* --step-4: clamp(2.0736rem, 1.0568rem + 5.0841vi, 4.997rem); */
  /* Step 5: 39.8131px → 113.0517px */
  /* --step-5: clamp(2.4883rem, 0.8962rem + 7.9607vi, 7.0657rem); */

  /* Spacing ********************************************/
  /* https://buildexcellentwebsit.es/ => https://www.youtube.com/watch?v=5uhIiI9Ld5M */
  /* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1240,20,1.414,5,1,&s=0.75|0.5|0.25|0.15,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-4xs: clamp(0.125rem, 0.0994rem + 0.1136vi, 0.1875rem);
  --space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4489rem + 0.2273vi, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6733rem + 0.3409vi, 0.9375rem);
  --space-s: clamp(1rem, 0.8977rem + 0.4545vi, 1.25rem);
  --space-m: clamp(1.5rem, 1.3466rem + 0.6818vi, 1.875rem);
  --space-l: clamp(2rem, 1.7955rem + 0.9091vi, 2.5rem);
  --space-xl: clamp(3rem, 2.6932rem + 1.3636vi, 3.75rem);
  --space-2xl: clamp(4rem, 3.5909rem + 1.8182vi, 5rem);
  --space-3xl: clamp(6rem, 5.3864rem + 2.7273vi, 7.5rem);

  /* One-up pairs */
  --space-4xs-3xs: clamp(0.125rem, 0.0483rem + 0.3409vi, 0.3125rem);
  --space-3xs-2xs: clamp(0.25rem, 0.0966rem + 0.6818vi, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.321rem + 0.7955vi, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.5455rem + 0.9091vi, 1.25rem);
  --space-s-m: clamp(1rem, 0.642rem + 1.5909vi, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.0909rem + 1.8182vi, 2.5rem);
  --space-l-xl: clamp(2rem, 1.2841rem + 3.1818vi, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.1818rem + 3.6364vi, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.5682rem + 6.3636vi, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.3864rem + 2.7273vi, 2.5rem);

  /* Spacing roles */
  --space-side: var(--space-s-m);

  /* Fonts *******************************************/
  --system-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* To test subsetting, remove system-font-stack from list and view style page */
  /* --type-text-font: 'Inter V'; */
  --type-text-font: 'Inter V', var(--system-font-stack);
  --type-display-font: 'Inter V', var(--system-font-stack);
  --type-display-weight: 700;
  --type-mark-weight: 500;
  --type-weight: var(--theme-type-text-weight);
  /* bump up the weight a bit, it looks better */
  --type-weight-dark-on-light: 300;
  --type-slant: 0;

  /* Colours *****************************************/
  --pink-hex: #ff3ef4;
  --pink-accessible: #ec41e1;
  --pink-hottest: rgb(255, 62, 244);
  /* pink-hottest as cmyk: 0,76,4,0 */
  --pink-bright: rgb(255, 116, 244);
  --pink-light: rgb(250, 168, 241);
  --white: #fff;
  --black: #000;

  --bluegreen: lch(18% 18 207deg);
  --orange: lch(66% 84 60deg);

  /* HEX */
  /* --midnight-green: #004b4dff;
  --midnight-green-p3: oklch(37.46% 0.08 197.8588538659215);
  --robin-egg-blue: #59c3c3ff;
  --azure-web: #ecf8f8ff;
  --coquelicot: #ff3b18ff;
  --coquelicot-p3: oklch(65.27% 0.27 32.10627827043636);
  --black-bean: #4d0200ff; */

  /* HSL */
  /* --midnight-green: hsla(182, 100%, 15%, 1);
  --robin-egg-blue: hsla(180, 47%, 56%, 1);
  --azure-web: hsla(180, 46%, 95%, 1);
  --coquelicot: hsla(9, 100%, 55%, 1);
  --black-bean: hsla(2, 100%, 15%, 1); */

  /* Gradient */
  /* --gradient-top: linear-gradient(0deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-right: linear-gradient(90deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-bottom: linear-gradient(180deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-left: linear-gradient(270deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-top-right: linear-gradient(45deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-bottom-right: linear-gradient(135deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-top-left: linear-gradient(225deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-bottom-left: linear-gradient(315deg, #004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff);
  --gradient-radial: radial-gradient(#004b4dff, #59c3c3ff, #ecf8f8ff, #ff3b18ff, #4d0200ff); */

  /* colour roles */
  /* TODO: move these to light/dark themes */
  --translucent-backdrop: rgba(0, 0, 0, .7);
  --colour-primary: var(--grayscale-700);

  /* Grayscale Design palette: https://grayscale.design/app?lums=92.72,85.96,73.80,58.76,39.22,24.42,17.36,12.59,8.25,5.12,2.17&palettes=%23b3a6b3,%239eadad,%231a1616&filters=0%7C0,0%7C0,0%7C0&names=,,&labels=,, */
  --grayscale-50: #f7f7f7;
  --grayscale-100: #efefef;
  --grayscale-200: #dfdfdf;
  --grayscale-300: #cacaca;
  --grayscale-400: #a8a8a8;
  --grayscale-500: #878787;
  --grayscale-600: #747474;
  --grayscale-700: #636363;
  --grayscale-800: #515151;
  --grayscale-900: #404040;
  --grayscale-1000: #292929;
/*
  --pink-50: #f7f6f7;
  --pink-100: #f0eef0;
  --pink-200: #e3dee3;
  --pink-300: #cfc7cf;
  --pink-400: #b1a4b1;
  --pink-500: #948294;
  --pink-600: #816e81;
  --pink-700: #6e5e6e;
  --pink-800: #5a4d5a;
  --pink-900: #473d47;
  --pink-1000: #2d272d;

  --teal-50: #f5f7f7;
  --teal-100: #ecefef;
  --teal-200: #dae0e0;
  --teal-300: #c2cbcb;
  --teal-400: #9cabab;
  --teal-500: #778c8c;
  --teal-600: #657777;
  --teal-700: #576767;
  --teal-800: #475454;
  --teal-900: #384242;
  --teal-1000: #232a2a;

  --red-50: #f7f6f6;
  --red-100: #f1eeee;
  --red-200: #e3dede;
  --red-300: #d0c8c8;
  --red-400: #b3a5a5;
  --red-500: #968383;
  --red-600: #836f6f;
  --red-700: #705f5f;
  --red-800: #5c4e4e;
  --red-900: #483d3d;
  --red-1000: #2e2727;
 */
  /* end Grayscale Design */
}

@supports (color: color(display-p3 0 0 0%)){
:root {
  --pink-hottest: color(display-p3 0.98046 0.00501 0.99723);
}
}

@supports (color: oklab(0% 0 0%)){
:root {
  --pink-hottest: oklch(71.7% 0.357 330.57);
}
}

@supports (color: color(display-p3 0 0 0%)){
:root {
  --pink-bright: color(display-p3 0.9899 0.38889 0.99624);
}
}

@supports (color: oklab(0% 0 0%)){
:root {
  --pink-bright: oklch(76.76% 0.286 330.57);
  --pink-light: oklch(83.53% 0.133 330.57);
}
}

/* See https://andy-bell.co.uk/my-favourite-3-lines-of-css/ */

/* for nav type links */

/* list styles reset */

@layer base{

* {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  accent-color: var(--theme-accent-colour);
  /* NOTE: must be here instead of html to work */
  font-variation-settings: "wght" var(--type-weight), "slnt" var(--type-slant);
}

html {
  font-family: var(--type-text-font);
  font-size: var(--step-0);
  line-height: 1.5;

  /* See light.css and dark.css to which values are used */
  background: var(--theme-bg-colour);
  color: var(--theme-fg-colour);
}

/*
  universal box-sizing w/ inheritance
  https://css-tricks.com/box-sizing/#article-header-id-6
*/
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  transition: color var(--colour-scheme-anim-duration) var(--colour-scheme-anim-timing),
    background-color var(--colour-scheme-anim-duration) var(--colour-scheme-anim-timing);
}

h1,
h2,
h3 {
  line-height: 1.2;
  text-wrap: balance;
}

h1,
h2 {
  max-width: 20ch;
}

h1, h2, h3, h4, h5, h6 {
  --type-weight: var(--type-display-weight);
}

h1 {
  font-size: var(--step-3)
}
h2 {
  font-size: var(--step-2)
}
h3 {
  font-size: var(--step-1)
}
h4 {
  font-size: var(--step-0)
}
h5 {
  --type-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--theme-fg-colour-tertiary);
}

h1 + p {
  margin-block-start: var(--space-l-xl);
}

strong {
  --type-weight: 500;
}

mark {
  --type-weight: var(--type-mark-weight);
  background-color: transparent;
  color: var(--theme-mark-colour);
}

p:not([class]),
li:not([class]),
blockquote:not([class]) {
  max-width: var(--copy-width);
}

code, pre {
  font-family: monospace;
}

img {
  /* NOTE: until we work out branding make everything grayscale */
  /* filter: grayscale(1); */
  width: 100%;
  max-width: 100%;
  height: auto;
}

figcaption:not([class]) {
  margin-block-start: 1em;
  font-size: var(--step--1);
  color: var(--theme-fg-colour-tertiary);
  text-align: center;
}

a {
  color: currentColor;
  text-decoration-color: var(--theme-link-colour);
  text-decoration-thickness: 0.125ex;
  text-underline-offset: 0.3ex;
}

a:hover figcaption:not([class]),
a:hover {
  color: var(--theme-link-hover-colour);
  text-decoration: none;
}

a:active {
  color: var(--theme-link-active-colour);
}

button {
  --type-weight: 400;
  --theme-button-fg-colour: var(--white);
  --theme-button-bg-colour: var(--theme-accent-colour);
  --theme-button-radius: calc(var(--space-xs) + (1rem * 1.5 / 2));
  --theme-button-padding-block: var(--space-xs);
  --theme-button-padding-inline: var(--space-s);
  --theme-button-font: var(--type-text-font);
  font-family: var(--theme-button-font);
  background-color: var(--theme-button-bg-colour);
  color: var(--theme-button-fg-colour);
  border-radius: var(--theme-button-radius);
  border: none;
  padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
  cursor: pointer;
}

::-moz-selection {
  color: var(--grayscale-50);
  background: var(--theme-accent-colour);
}

::selection {
  color: var(--grayscale-50);
  background: var(--theme-accent-colour);
}

:focus-visible {
  outline: 1px dashed var(--theme-accent-colour);
  outline-offset: var(--space-xs);
}

p a:focus-visible {
  outline-offset: var(--space-4xs);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* See https://www.youtube.com/watch?v=eY6C_-aDdTo&t=297s */
@view-transition { navigation: auto; }
}

@layer base{

input[type="email"] {
  width: 100%;
  padding: var(--space-xs) var(--space-s);
  background-color: var(--theme-bg-colour-secondary);
  border: 2.4px solid var(--theme-fg-colour-tertiary);
  border-radius: calc(var(--space-xs) + 2.4px + (1rem * 1.5 / 2));
  line-height: 1.5;
}

/* override autocomplete styles from blink */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid initial;
  -webkit-text-fill-color: var(--theme-fg-colour);
  -webkit-box-shadow: 0 0 0px 1000px initial inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
}

@layer base{

table {
  --table-row-padding: var(--space-2xs);

  border-collapse: collapse;
}

thead {
  border-bottom: 1px solid var(--theme-bg-colour-secondary);
}

thead th {
  color: var(--theme-fg-colour-secondary);
}

tbody tr:hover {
  background-color: var(--theme-bg-colour-secondary);
}

th,
td {
  padding: var(--table-row-padding);
  font-size: var(--step--1);
}

th {
  --type-weight: 500;
  text-align: left;
  white-space: nowrap;
}
}

@layer layouts{
/*
  sticky footer with grid
*/
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header'
    'main'
    'footer';
}

header {
  grid-area: header;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}
}

@layer layouts{

.Inset {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-side);
}

.Inset-img {
  width: 100%;
  height: auto;
}
}

@layer components{

.Author-link {
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  text-decoration: none;
}

.Author-pic {
  margin-right: 0.42em;
}
}

@layer components{

.Backdrop {
  --theme-pattern-cube-1: var(--grayscale-400);
  --theme-pattern-cube-2: var(--grayscale-900);
  --theme-pattern-cube-3: var(--theme-bg-colour);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-block: var(--space-m-l);
  /* height: 20vh; */
}

.Backdrop-cubes {
  transform: rotate(30deg);
  margin-left: -2px;
  overflow: hidden;
}
}

@layer components{
.Bleed {
  aspect-ratio: 3/1;
}
}

@layer components{

.BlogPost-subtitle {
  display: none;
}

.BlogPost-main h1 {
  --step-3: var(--step-2);
}
  .BlogPost-content > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }
  .BlogPost-content > h5 + h1 {
    margin-block-start: 0;
  }
  .BlogPost-content > h1 + p {
    margin-block-start: var(--space-l-xl);
  }
  .BlogPost-content li:not([class]) {
    margin-block-start: var(--flow-space, 1lh);
  }
  .BlogPost-content a[href^="http"]:not([class]) {
    display: inline-block;
    padding-right: var(--step--1);
  }
  .BlogPost-content a[href^="http"]:not([class])::after {
    --type-weight: 400;
    /* WTF should it not use the declaration in html above? */
    font-variation-settings: "wght" var(--type-weight), "slnt" var(--type-slant);
    content: '↗';
    font-size: var(--step--1);
    width: var(--step--1);
    color: var(--theme-hl-colour-absolute);
    margin-right: -1em;
    display: inline-block;
    position: relative;
  }

.BlogPost-content {
  margin-top: var(--space-m-l);
}

.BlogPost-content ul:not([class]) {
  padding-inline: 0;
  list-style-type: none;
  list-style-position: outside;
}
  :is(.BlogPost-content ul:not([class])) li {
    padding-inline-start: 1.9rem;
    background-image: url("/images/icons/arrow-right-pink.svg");
    background-position: 0 -1px;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
  }
  :is(.BlogPost-content ul:not([class])) li + li {
    margin-block-start: var(--space-3xs-2xs);
  }

@media (min-width: 42em) {
  .BlogPost {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-s-m);
  }

  .BlogPost-sidebar {
    text-align: right;
  }

  .BlogPost-subtitle {
    display: block;
  }
}
}

@layer components{

.BlogPostCard + .BlogPostCard{
  margin-top: var(--space-xl-2xl);
}

.BlogPostCard-title {
  max-width: 30ch;
}

.BlogPostCard-titleLink {
  text-decoration: none;
}

.BlogPostCard-summary {
  margin-block-start: var(--flow-space, 1em);
  max-width: var(--copy-width);
}

.BlogPostCard-publishDate {
  margin-block-start: var(--flow-space, 1em);
  font-size: var(--step--1);
  font-weight: 300;
  color: var(--theme-fg-colour-tertiary);
}
}

@layer components{
.BlogPostCards {
  list-style-type: none;
  padding-left: 0;
  margin-top: var(--space-l-xl);
}
}

@layer components{

.BlogPostSocialCard {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.BlogPostSocialCard-sidebar {
  padding: var(--step--1) var(--space-m-l) 0 var(--space-m-l);
}

.BlogPostSocialCard-netsignLogo {
  padding: var(--step--1) var(--space-xl-2xl);
}
}

@layer components{
  .Blurb a[href^="http"]:not([class]) {
    display: inline-block;
    padding-right: var(--step--1);
  }
  .Blurb a[href^="http"]:not([class])::after {
    --type-weight: 400;
    /* WTF should it not use the declaration in html above? */
    font-variation-settings: "wght" var(--type-weight), "slnt" var(--type-slant);
    content: '↗';
    font-size: var(--step--1);
    width: var(--step--1);
    color: var(--theme-hl-colour-absolute);
    margin-right: -1em;
    display: inline-block;
    position: relative;
  }
}

@layer components{
/* NOTE: <button> is already styled w/ mixin */
.Button {
  --type-weight: 400;
  --theme-button-fg-colour: var(--white);
  --theme-button-bg-colour: var(--theme-accent-colour);
  --theme-button-radius: calc(var(--space-xs) + (1rem * 1.5 / 2));
  --theme-button-padding-block: var(--space-xs);
  --theme-button-padding-inline: var(--space-s);
  --theme-button-font: var(--type-text-font);
  font-family: var(--theme-button-font);
  background-color: var(--theme-button-bg-colour);
  color: var(--theme-button-fg-colour);
  border-radius: var(--theme-button-radius);
  border: none;
  padding: var(--theme-button-padding-block) var(--theme-button-padding-inline);
  display: inline-block;
}
}

@layer components{

.Byline {
  --byline-gap: var(--space-3xs);

  margin-block-start: var(--flow-space, 1em);
  display: flex;
  flex-wrap: wrap-reverse;
  gap: var(--byline-gap);
  flex-direction: row;
  align-items: center;
}

.Byline-publishDate,
.Byline-readTime {
  font-size: var(--step--1);
  font-weight: 300;
  color: var(--theme-fg-colour-tertiary);
}

.Byline-status {
  --type-weight: 500;

  color: var(--theme-accent-colour);
}

.Byline-item + .Byline-item:before {
  content: '•';
  margin-inline-end: var(--byline-gap);
}
}

@layer components{
.Capabilities {
  list-style-type: none;
  padding-left: 0;
}
}

@layer components{

.Capability {
  --type-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.Capability--inline {
  font-size: var(--step--2);
  display: inline-block;
  padding-inline-end: var(--space-3xs);
  color: var(--theme-fg-colour-secondary);
}
}

@layer components{

.CategoryBlogPosts-category {
  display: none;
}

@media (min-width: 42em) {
  .CategoryBlogPosts-category {
    display: block;
  }
}
}

@layer components{
.CompactTable {
  --table-row-padding: var(--space-3xs);
}
}

@layer components{
/* from https://github.com/GoogleChromeLabs/dark-mode-toggle/blob/main/demo/Slider.css */
dark-mode-toggle.Slider::part(toggleLabel) {
  display: inline-block;
  position: relative;
  height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 2);
  width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 3.5);
  background-color: var(--grayscale-300);
  border-radius: var(--dark-mode-toggle-icon-size, 1rem);
  transition: 0.4s;
}

dark-mode-toggle.Slider::part(toggleLabel)::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25);
  left: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25);
  height: calc(var(--dark-mode-toggle-icon-icon-size, 1rem) * 1.5);
  width: calc(var(--dark-mode-toggle-icon-icon-size, 1rem) * 1.5);
  border-radius: 100%;
  box-shadow: 0 0.15em 0.3em rgb(0 0 0 / 15%), 0 0.2em 0.5em rgb(0 0 0 / 30%);
  background-color: var(--grayscale-50);
  color: var(--grayscale-900);
  transition: 0.4s;
  content: "";
  background-position: center;
  background-size: var(--dark-mode-toggle-icon-icon-size, 1rem);
  background-image: var(--dark-mode-toggle-icon-light-icon, url("~/images/sun.svg"));
  box-sizing: border-box;
}

dark-mode-toggle.Slider[mode="dark"]::part(toggleLabel) {
  background-color: var(--theme-bg-colour-secondary);
}

dark-mode-toggle.Slider[mode="dark"]::part(toggleLabel)::before {
  left: calc(100% - var(--dark-mode-toggle-icon-size, 1rem) * 1.75);
  border-color: #000;
  background-color: var(--grayscale-300);
  color: var(--grayscale-1000);
  background-size: var(--dark-mode-toggle-icon-size, 1rem);
  background-image: var(--dark-mode-toggle-dark-icon, url("~/images/moon.svg"));
  filter: var(--dark-mode-toggle-icon-filter, invert(100%));
  box-shadow: 0 0.5px hsl(0deg 0% 100% / 16%);
}

dark-mode-toggle.Slider::part(toggleLabel)::after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25);
  left: calc(100% - var(--dark-mode-toggle-icon-size, 1rem) * 1.75);
  height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
  width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
  border-radius: 100%;
  color: #333;
  content: "";
  background-position: center;
  background-size: var(--dark-mode-toggle-icon-size, 1rem);
  background-image: var(--dark-mode-toggle-dark-icon, url("~/images/moon.svg"));
  background-repeat: no-repeat;
  box-sizing: border-box;
  opacity: 0.5;
}

dark-mode-toggle.Slider[mode="dark"]::part(toggleLabel)::after {
  left: calc(var(--dark-mode-toggle-icon-size, 1rem) * 0.25);
  background-image: var(--dark-mode-toggle-light-icon, url("~/images/sun.svg"));
  filter: var(--dark-mode-toggle-icon-filter, invert(100%));
}

/* Get rid of custom checkbox, use normal checkbox */
dark-mode-toggle.Slider::part(permanentCheckbox) {
  opacity: 1;
}
dark-mode-toggle.Slider::part(aside) {
  margin-block-start: 0;
  display: flex;
  align-items: center;
}
dark-mode-toggle.Slider::part(permanentLabel) {
  color: var(--theme-fg-colour-tertiary);
  font-size: var(--step--1);
}
dark-mode-toggle.Slider::part(permanentLabel)::before {
  background-image: none;
  margin-inline-end: 0.25rem;
}

dark-mode-toggle.Slider::part(fieldset) {
  display: flex;
  gap: 0.5em;
}
}

@layer components{

.DataCell {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.DataCell--center {
  text-align: center;
}
}

@layer components{

.DataPoints {
  border-bottom: 1px solid var(--theme-fg-colour-tertiary);
  max-width: var(--copy-width);
}

.DataPoints-data {
  border-top: 1px solid var(--theme-fg-colour-tertiary);
  padding-block-start: var(--space-xs-s);
  font-size: var(--step-2);
  color: var(--pink-hottest);
  line-height: 1.2;
}

.DataPoints-label {
  --type-weight: 500;

  font-size: var(--step--1);
  color: var(--theme-fg-colour-secondary);
  padding-block-end: var(--space-xs-s);
}

.DataPoints-supplement {
  margin-block-start: var(--space-xs-s);
}
}

@layer components{

.Definition {
  font-size: var(--step--1);
  background-color: var(--theme-bg-colour-near-absolute);
  margin-inline: var(--space-xs-s);
  padding: var(--space-m-l);
  border-top-left-radius: var(--space-s);
  border-bottom-right-radius: var(--space-s);

}

.Definition-term {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}
}

@layer components{

.FooterBar {
  margin-top: var(--space-2xl-3xl);
  margin-bottom: var(--space-s-m);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.FooterBar-copyright {
  font-size: var(--step--1);
  color: var(--theme-fg-colour-tertiary);
  text-transform: uppercase;
}
}

@layer components{
.Footnote {
  font-size: var(--step--1);
  color: var(--theme-fg-colour-tertiary);
  font-size: var(--step--2);
}
}

@layer components{

.Header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--space-2xl-3xl);
  margin-bottom: var(--space-l-xl);
}

.Header-logo {
  display: inline-block;
  line-height: 0; /* fixes spacing issue when wrapping an image */
}
}

@layer components{
.Illustration--napkin {
  padding: var(--space-xs-s);
}
}

@layer components{
  .Legal > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }
  .Legal > h5 + h1 {
    margin-block-start: 0;
  }
  .Legal > h1 + p {
    margin-block-start: var(--space-l-xl);
  }
  .Legal li:not([class]) {
    margin-block-start: var(--flow-space, 1lh);
  }
.Legal {
  font-size: var(--step--1);
}
}

@layer components{

.Mantra {
  margin-top: var(--space-xl-2xl);
}

.Mantra-part + .Mantra-part {
  margin-top: var(--space-l-xl);
}
  .Mantra-part > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }
  .Mantra-part > h5 + h1 {
    margin-block-start: 0;
  }
  .Mantra-part > h1 + p {
    margin-block-start: var(--space-l-xl);
  }
  .Mantra-part li:not([class]) {
    margin-block-start: var(--flow-space, 1lh);
  }

@media (min-width: 42em) {
  .Mantra {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-l-xl);
  }

  .Mantra-part + .Mantra-part{
    margin-top: 0;
  }
}
}

@layer components{

.Menu {
  --menu-size: calc(1rem * 2.5);

  display: none;
  padding: 0;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 3000;
  border: none;
  background-color: inherit;
  width: var(--menu-size);
  height: var(--menu-size);
  outline: none;
}

@media (max-width: 58rem) {
  .Menu {
    display: inline-block;
  }
}

.Menu-icon {
  fill: var(--theme-fg-colour);
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
}

.Menu.is-open .Menu-icon {
  fill: var(--theme-fg-colour-secondary);
}

.Menu-line {
  opacity: 1;
  transform: rotate(0) translateY(0) translateX(0);
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.Menu-lineTop {
  transform-origin: 0 0;
}

.Menu-lineMiddle {
  transform-origin: 0 50%;
}

.Menu-lineBottom {
  transform-origin: 0 100%;
}

 /* opened states */
.Menu.is-open .Menu-lineTop {
  transform: translateX(26.5%) translateY(1.675%) rotate(45deg);
}
.Menu.is-open .Menu-lineMiddle {
  opacity: 0;
  transform: translateX(100%) scaleX(0);
}
.Menu.is-open .Menu-lineBottom {
  transform: translateX(26.5%) translateY(-1.675%) rotate(-45deg);
}
}

@layer components{

.MoreLink-link {
  --type-weight: 400;

  text-decoration: none;

  display: inline-flex;
  margin-block-start: 1em;
  align-items: center;
  gap: calc(0.5 * 1rem);
  color: var(--theme-link-colour);
  text-shadow: var(--theme-link-shadow);
}

.MoreLink-arrow {
  transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.MoreLink:hover .MoreLink-arrow {
  transform: translateX(5px);
}

.MoreLink-link:active {
  color: var(--theme-link-active-colour);
}
}

@layer components{

.Nav-list {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-m-l);
}

.Nav-link {
  --type-weight: 500;

  position: relative;
  text-decoration: none;
}

.Nav-link.is-active {
  color: var(--theme-link-colour);
  text-decoration: underline;
  text-decoration-color: var(--theme-link-colour);
  text-decoration-thickness: 0.3ex;
}

@media (min-width: 58rem) {
  .Nav-link.is-active {
    text-underline-offset: 2.1ex;
  }
}

@media (max-width: 58rem) {
  .Nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: var(--translucent-backdrop);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.5s;
  }

  .Nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .Nav-list {
    flex-direction: column;
    align-items: start;

    background: var(--theme-bg-colour);
    margin: 0;
    padding-top: calc(1rem * 5);
    padding-left: var(--space-l-xl);
    position: absolute;
    top: 0;
    right: -100%;
    height: 100%;
    width: var(--nav-mobile-width);
    transition: 1s;
  }

  .Nav-list li {
    font-size: var(--step-1);
  }

  .Nav.is-open .Nav-list {
    right: 0;
  }

  .Nav-link.is-active {
    text-underline-offset: 1ex;
  }
}
}

@layer components{

.Pagination {
  margin-block-start: var(--space-m-l);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: self-start;
  font-size: var(--step--1);
}

.Pagination-older {
  text-align: right;
}

.Pagination-newer {
  text-align: left;
}

.Pagination-pages {
  margin-block-start: 1em;
  text-align: center;
  color: var(--theme-fg-colour-tertiary);
}
}

@layer components{

.ProgressMeter {
  position: fixed;
  right: var(--space-2xl);
  bottom: var(--space-2xl);
  width: 58px;
  height: 58px;
  z-index: 99;
  opacity: 0;
  cursor: pointer;
}

.ProgressMeter-arrow {
  font-size: 24px;
  position: absolute;
  left: 17px;
  top: 16px;
  fill: var(--theme-accent-colour);
}

.ProgressMeter-progress {
  width: 58px;
  height: 58px;
}

.ProgressMeter circle {
  fill: var(--theme-bg-colour-tertiary);
  stroke: var(--theme-bg-colour-tertiary);
}

.ProgressMeter path {
  stroke: var(--theme-accent-colour);
}
}

@layer components{
/* @import 'quote'; */
}

@layer components{

.SocialCard {
  padding-block: var(--space-m-l);
}

.SocialCard--hidden {
  display: none;
}
}

@layer components{
  .SiteMap > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }
  .SiteMap > h5 + h1 {
    margin-block-start: 0;
  }
  .SiteMap > h1 + p {
    margin-block-start: var(--space-l-xl);
  }
  .SiteMap li:not([class]) {
    margin-block-start: var(--flow-space, 1lh);
  }
}

@layer components{

.Swatch {
  height: var(--space-3xl);
  width: var(--space-3xl);
  padding: var(--space-xs);
  color: var(--theme-fg-colour);
}

.Swatch--mini {
  height: var(--space-xl);
  width: var(--space-xl);
  padding: var(--space-2xs);
  font-size: var(--step--2);
  color: var(--theme-fg-colour-absolute);
}

.Swatch--bgAbsolute {
  background-color: var(--theme-bg-colour-absolute);
}
.Swatch--bg {
  background-color: var(--theme-bg-colour);
}
.Swatch--bgSecondary {
  background-color: var(--theme-bg-colour-secondary);
}
.Swatch--bgTertiary {
  background-color: var(--theme-bg-colour-tertiary);
}
.Swatch--bgQuaternary {
  background-color: var(--theme-bg-colour-quaternary);
}

.Swatch--fgAbsolute {
  background-color: var(--theme-fg-colour-absolute);
  color: var(--theme-bg-colour);
}
.Swatch--fg {
  background-color: var(--theme-fg-colour);
  color: var(--theme-bg-colour);
}
.Swatch--fgSecondary {
  background-color: var(--theme-fg-colour-secondary);
  color: var(--theme-bg-colour);
}
.Swatch--fgTertiary {
  background-color: var(--theme-fg-colour-tertiary);
  color: var(--theme-bg-colour);
}

.Swatch--hlSecondary {
  background-color: var(--theme-hl-colour-secondary);
  color: var(--theme-bg-colour);
}
.Swatch--hl {
  background-color: var(--theme-hl-colour);
  color: var(--theme-bg-colour);
}
.Swatch--hlAbsolute {
  background-color: var(--theme-hl-colour-absolute);
  color: var(--theme-bg-colour);
}
}

@layer components{

.Swatches {
  display: flex;
  gap: var(--space-s-m);
}

.Swatches--mini {
  gap: 0;
}
}

@layer components{

.Tag {
  color: var(--theme-fg-colour-secondary);
  text-decoration: none;
}

.Tag:hover {
  color: var(--theme-link-hover-colour);
}

.Tag:active {
  color: var(--theme-link-active-colour);
}
}

@layer components{

.Tool {
  font-size: 2.75em;
  filter: grayscale(100%);
  fill: var(--theme-tool-logo-colour);
  text-align: center;
}

.Tool-label {
  font-size: var(--step--1);
  color: var(--theme-fg-colour-tertiary);
}

.Tool--ruby-on-rails {
  --color5: var(--theme-tool-logo-colour);
}

.Tool--middleman {
  --color1: var(--theme-middleman-color1);
  --color2: var(--theme-middleman-color2);
}

.Tool--JavaScriptColour {
  fill: #f7df1e;
  background-color: #000;
}
}

@layer components{

.Tools {
  display: flex;
  max-width: var(--copy-width);
  justify-content: space-evenly;
  margin-block: var(--space-l-xl);
  list-style-type: none;
  padding-left: 0;
}

.Tools--max3 .Tools-item:nth-of-type(even) {
  display: none;
}

@media (min-width: 34rem) {
  .Tools--max3 .Tools-item:nth-of-type(even) {
    display: initial;
  }
}
}

@layer components{

.UnicodeChar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.UnicodeChar-char {
  font-size: var(--step-3);
}

.UnicodeChar-label {
  font-size: var(--step--1);
}
}

@layer components{
.UnicodeChars {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20%);
}
}

@layer utilities{

.u-fadeIn {
  animation: fadeIn ease 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.u-fadeOut {
  animation: fadeOut ease 500ms;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
}

@layer utilities{
.u-border-round {
  border-radius: var(--step--2);
  overflow: hidden;
}
}

@layer utilities{
.grayscale-50 {
  background-color: var(--grayscale-50);
}
.grayscale-100 {
  background-color: var(--grayscale-100);
}
.grayscale-200 {
  background-color: var(--grayscale-200);
}
.grayscale-300 {
  background-color: var(--grayscale-300);
}
.grayscale-400 {
  background-color: var(--grayscale-400);
}
.grayscale-500 {
  background-color: var(--grayscale-500);
}
.grayscale-600 {
  background-color: var(--grayscale-600);
}
.grayscale-700 {
  background-color: var(--grayscale-700);
}
.grayscale-800 {
  background-color: var(--grayscale-800);
}
.grayscale-900 {
  background-color: var(--grayscale-900);
}
.grayscale-1000 {
  background-color: var(--grayscale-1000);
}

.black {
  background-color: var(--black);
}

.white {
  background-color: var(--white);
}
}

@layer utilities{

.u-invert {
  filter: var(--theme-filter-invert);
}

.u-fade {
  opacity: 0.8;
}

.u-grayscale {
  filter: grayscale(100%);
}
}

@layer utilities{
  .u-flow > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }
  .u-flow > h5 + h1 {
    margin-block-start: 0;
  }
  .u-flow > h1 + p {
    margin-block-start: var(--space-l-xl);
  }
  .u-flow li:not([class]) {
    margin-block-start: var(--flow-space, 1lh);
  }

.u-copy-width {
  max-width: var(--copy-width);
}
}

@layer utilities{

/* From https://css-pattern.com/ */

.pattern-cubes {
  --s: 20vmax; /* control the size */
  --c1: var(--theme-pattern-cube-1);
  --c2: var(--theme-pattern-cube-2);
  --c3: var(--theme-pattern-cube-3);

  background:
    repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg)
     calc(.5*var(--s)) calc(.5*var(--s)*0.577),
    repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);
  background-size: var(--s) calc(var(--s)*0.577);
}

.pattern-circles {
  --s: 150px; /* control the size */
  --c1: var(--theme-pattern-cube-2);
  --c2: var(--theme-pattern-cube-3);

  --_g:
     var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
     var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
     #0000 96%;
  background:
    radial-gradient(50% 50% at 100% 0,var(--_g)),
    radial-gradient(50% 50% at 0 100%,var(--_g)),
    radial-gradient(50% 50%,var(--_g)),
    radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
    var(--c1);
  background-size: var(--s) var(--s);
}

.pattern-op-art {
  --s: 70px; /* control the size */
  --c1: var(--theme-cube-2);
  --c2: var(--theme-cube-3);

  --g:,var(--c1) 25%,var(--c2) 0 50%,#0000 0;
  background:
    repeating-conic-gradient(var(--c1) 0 30deg,#0000 0 150deg,var(--c2) 0 50%)
     calc(1.5*var(--s)) calc(.865*var(--s)),
    conic-gradient(from  30deg at 75% 75%var(--g)),
    conic-gradient(from -30deg at 75% 25%var(--g)),
    conic-gradient(from 150deg at 25% 75%var(--g)),
    conic-gradient(from 210deg at 25% 25%var(--g)),
    repeating-conic-gradient(var(--c1) 0 30deg,var(--c2) 0 60deg);
  background-size: calc(3*var(--s)) calc(1.73*var(--s))
}

.pattern-hexagons {
  --s: 37px; /* control the size */

  --c:#0000, var(--theme-bg-colour-quaternary) .5deg 119.5deg,#0000 120deg;
  --g1:conic-gradient(from  60deg at 56.25% calc(425%/6),var(--c));
  --g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
  --g3:conic-gradient(from -60deg at 50%   calc(175%/12),var(--c));

  background:
    var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
    var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
    var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s)) var(--theme-fg-colour-tertiary);
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
}

.pattern-zig-zag {
  --s: var(--step--1); /* control the size */
  --c3: var(--theme-bg-colour-quaternary);
  --c2: var(--theme-bg-colour-secondary);
  --c1: var(--theme-bg-colour-tertiary);;

  --g1: conic-gradient(at calc(250%/3) calc(50%/3),var(--c2) 60deg,#0000 0 300deg,var(--c1) 0);
  --g2: conic-gradient(at calc(50%/3) 50%,#0000 75%,var(--c1) 0);
  --g3: conic-gradient(at calc(100%/3) 50%,#0000 75%,var(--c2) 0);
  --g4: conic-gradient(from 59deg at calc(200%/3) calc(249%/9),var(--c3) 61deg,#0000 62deg);
  --g5: conic-gradient(from 60deg at 50% calc(250%/3), var(--theme-fg-colour-tertiary) /*4th color*/ 60deg,var(--c1) 0 120deg,#0000 0);
  --_p: calc(9*tan(30deg)*var(--s)); /* if you don't see the pattern replace tan(30deg) with 0.577 */
  background:
    var(--g1) calc(-1*var(--s)) 0,var(--g1) calc(2*var(--s)) var(--_p),
    var(--g2),var(--g2) calc(3*var(--s)) var(--_p),
    var(--g3),var(--g3) calc(3*var(--s)) var(--_p),
    var(--g4),var(--g4) calc(3*var(--s)) var(--_p),
    var(--g5) calc(3*var(--s)) 0,var(--g5) 0 var(--_p) var(--c3);
  background-size: calc(6*var(--s)) calc(2*var(--_p))
}
}

@layer utilities{
.u-line-through {
  text-decoration-line: line-through;
}
}

/* Cutshape styles */

:root {
  color-scheme: light;

  --side-padding: var(--space-l-xl);
  --content-width: 36rem;
  --content-width-l: 40rem;
  --nav-mobile-width: 17rem;

  --type-logo-font: 'Lexend V', sans-serif;
  --type-text-font: 'Roboto', sans-serif;;
  --type-display-font: 'Roboto', sans-serif;

  /* colours */
  /*
  --clover: oklch(56% 48% 142deg);
  --moss: oklch(57% 35% 155deg);
  --old-green: oklch(55.19% 0.1825 141.36); /* #1a8a01 */
  /* --wp-emerald: #539950; */
  /* --wp-viridian: #40826d; */
  /* british racing green, lightened from #004225 */
  /* --brg: oklch(42% 0.0794 156.98);  */

  --green: rgb(52, 103, 52); /* #346734 */
  --cs-green: var(--green);
  --cs-orange: #f4a460;
  --tempus-tools-bg-colour: #fafafa;
  --tempus-tools-fg-colour: #34495e;

  /* ns variables to override */
  --theme-accent-colour: var(--cs-green);

  /* support for media query variables is from postcss-custom-media */

  /* highlight colours */
  --theme-hl-colour-absolute: var(--cs-green);
  --theme-hl-colour: oklch(from var(--cs-green) calc(l + 0.1) c h); /* #42aa34 */
  --theme-hl-colour-secondary: oklch(from var(--cs-green) calc(l + 0.2) c h); /* #63ca56 */

  --theme-bg-colour-absolute: var(--white);
  --theme-bg-colour-near-absolute: #fefefe;

  /* TEMPORARY */
  /* --theme-bg-colour: var(--grayscale-50); */
  --theme-bg-colour: var(--tempus-tools-bg-colour);

  --theme-bg-colour-secondary: var(--grayscale-100);
  --theme-bg-colour-tertiary: var(--grayscale-200);
  --theme-bg-colour-quaternary: #f3f3f3;

  --theme-fg-colour-absolute: var(--black);
  /* --theme-fg-colour: var(--grayscale-1000); */
  --theme-fg-colour: var(--tempus-tools-fg-colour);
  --theme-fg-colour-secondary: var(--grayscale-500);
  --theme-fg-colour-tertiary: var(--grayscale-500);
  --theme-mark-colour: var(--grayscale-700);

  --theme-type-text-weight: var(--type-weight-dark-on-light);

  /* --theme-link-colour: var(--grayscale-700); */
  --theme-link-colour: var(--theme-accent-colour);
  /* --theme-link-hover-colour: var(--grayscale-900); */
  --theme-link-hover-colour: var(--theme-hl-colour);
  /* --theme-link-active-colour: var(--grayscale-900); */
  --theme-link-active-colour: var(--theme-hl-colour-secondary);
  --theme-link-shadow: initial;

  --theme-case-study-card-logo: var(--grayscale-700);

  --theme-tool-logo-colour: var(--grayscale-900);

  --theme-middleman-color1: var(--black);
  --theme-middleman-color2: var(--grayscale-400);

  --theme-curtain-hero-bg-colour: var(--theme-fg-colour);
  --theme-curtain-hero-fg-colour: var(--theme-bg-colour);

  --theme-map-landscape-colour: var(--grayscale-100);
  --theme-map-road-colour: var(--grayscale-400);
  --theme-map-water-colour: var(--grayscale-200);

  --theme-portrait-bg-colour: var(--grayscale-200);

  --theme-filter-grayscale: grayscale(100%);
  --theme-filter-invert: invert(0);

  --banner-height: calc((var(--space-3xs) * 2) + (var(--step--1) * 1.5));
}

@supports (color: oklab(0% 0 0%)){
:root {

  --green: oklch(46.46% 0.097 143.82);
}
}

.Icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */

/* icomoon svg icons */

main {
  padding-inline: var(--side-padding);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

h4 {
  font-weight: 500;
}

caption {
  margin-block-start: var(--space-s-m);
  caption-side: bottom;
  font-size: var(--step--1);
}

strong {
  font-weight: 500;
}

dt {
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--grayscale-500);
}

dd + dt {
  margin-block-start: var(--space-xs-s);
}

address {
  font-style: normal;
}

/* lexend-500 */

@font-face {
  font-display: swap;
  font-family: 'Lexend V';
  font-style: normal;
  font-weight: 100 900;
  src: url("/assets/lexend_variable-ef20ef61.woff2") format('woff2');
}

/* Inter variable */

@font-face {
  font-family: 'Inter V';
  src: local('Inter V'), url("/assets/Inter.var-48ada4b7.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Roboto - as per Tempus */

@font-face {
  font-family: 'Roboto';
  src: url("/assets/roboto-v47-latin-regular-5b6e245f.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url("/assets/roboto-v47-latin-500-c27a6ffc.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url("/assets/roboto-v47-latin-700-8331e8da.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

th {
  font-weight: 500;
}

.Banner {
  background-color: var(--cs-orange);
  /* color: var(--white); */
  padding-block: var(--space-3xs);
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--white);
}

.Button {
  --type-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .03em;
  --theme-button-radius: var(--space-2xs);
  --theme-button-padding-block: var(--space-2xs);
  --theme-button-padding-inline: var(--space-xs);
  --theme-button-font: var(--type-logo-font);
  --type-weight: 400;
}

.Canadian {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--1);
}

.Contact > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }

.Contact > h5 + h1 {
    margin-block-start: 0;
  }

.Contact > h1 + p {
    margin-block-start: var(--space-l-xl);
  }

.Contact li:not([class]) {
    margin-block-start: var(--flow-space, 1lh);
  }

.Contact {
  margin-block-start: var(--space-l-xl);
  font-size: var(--step-0);
}

.FAQ {
  text-align: left;
}

.FAQ + .FAQ {
  margin-block-start: var(--space-s-m);
}

.FAQ-question {
  padding-block-end: var(--space-xs);
  cursor: help;
}

.FAQ-question h4 {
  display: inline;
  padding-inline-start: var(--space-2xs);
}

.FAQs {
  margin-block-start: var(--space-l-xl);
  text-align: center;
}

.FAQs-heading {
  margin-block-end: var(--space-s-m);
}

.FAQs-link {
  display: block;
  margin-block-start: var(--space-xs-s);
  --type-weight: 500;
}

.Flag {
  width: calc(var(--step--1) * 2);
  height: var(--step--1);
}

.Footer {
  padding-inline: var(--side-padding);
}

.FooterBar {
  border-top: 0.3ex solid var(--cs-orange);
  padding-block: var(--space-xs-s);
}

.FreeShipping {
  margin-block: var(--space-s);
  text-align: center;
  color: var(--grayscale-900);
  font-size: var(--step-1);
}

.Header {
  padding-inline: var(--side-padding);
}

.Header-content {
  height: calc(var(--step-1) + (var(--space-xs-s)* 2));
  border-bottom: 0.3ex solid var(--cs-orange);
}

.Hero {
  max-width: var(--content-width-l);
  margin-inline: auto;
  background-color: var(--theme-bg-colour-secondary);
  text-align: center;
  padding: var(--space-l-xl) var(--space-m-l);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Hero-heading {
  max-width: inherit;
}

.Hero-subheading {
  margin-block-start: var(--flow-space, 1em);
}

.Hero-button {
  margin-block-start: var(--space-m-l);
}

.Hero-bypass {
  font-size: var(--step--1);
  display: block;
  margin-inline: auto;
  margin-block-start: var(--space-m-l);
  max-width: 40ch;
}

.Iframe {
  display: block;
  height: 100vh;
  width: 100vw;
  border: none;
  background: var(--theme-bg-colour);
}

.Logo {
  text-decoration: none;
}

.Logo-type {
  --type-weight: 300;

  font-family: var(--type-logo-font);
  font-size: var(--step-1);
  color: var(--theme-accent-colour);
  display: flex;
  align-items: top;
}

.Logo-typeMedium {
  --type-weight: 400;
}

.Logo-typeHeavy {
  --type-weight: 600;
}

.Logo-tm {
  padding-left: var(--space-4xs);
  font-size: var(--step-0);
}

.Map {
  height: clamp(300px, 33vw, 420px);
  margin: var(--space-s-m) 0;
}

.Material {
  margin-block-start: var(--space-s-m);
  display: grid;
  grid-template-columns: 1fr 7fr;
  gap: var(--space-m-l);
}

.Material-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-m-l);
  max-width: 36rem;
}

.MaterialCard {
  background-color: var(--white);
  border: 1px solid var(--grayscale-500);
  border-radius: var(--space-4xs);
  text-decoration: none;
  color: inherit;
}

.MaterialCard:hover {
  background-color: var(--grayscale-100);
}

.MaterialCard-container {
  /* display: flex;
  flex-direction: row; */

  display: grid;
  grid-template-columns: 1fr 4fr;
  align-items: center;
  gap: 0;
}

.MaterialCard-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs-3xs);
  padding: var(--space-xs-s);
}

.MaterialCard-description {
  margin-block-end: auto;
}

.MaterialCards-list {
  margin-block-start: var(--space-l-xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1em;
}

.MaterialCards-footer {
  margin-block-start: var(--space-m-l);
  text-align: center;
}

@media (min-width: 55em) {
  .MaterialCards-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.Materials {
  margin-block-start: var(--space-l-xl);
}

.Menu {
  --menu-size: var(--step-1);

  top: calc(var(--space-xs-s) + var(--banner-height));
  right: var(--side-padding);
}

@media (min-width: 58rem) {
  .Nav-link.is-active {
    text-decoration: none;
    font-weight: 500;
  }
}

.Photo {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  font-size: 0;
}

.Photo--section {
  margin-top: var(--space-xl-2xl);
}

.Photo--graybg {
  background-color: var(--theme-bg-colour-secondary);
}

.Pitch {
  margin-block-start: var(--space-l-xl);
  margin-inline: auto;
  background-color: var(--theme-bg-colour-secondary);
  padding: var(--space-m-l);
}

.Pitch-heading {
  max-width: inherit;
}

.Pitch-subheading {
  margin-block-start: var(--flow-space, 1em);
}

.Pitch-button {
  margin-block-start: var(--space-m-l);
}

.Pitch-bypass {
  font-size: var(--step--1);
  display: block;
  margin-block-start: var(--space-m-l);
}

.StepCards {
  max-width: var(--content-width-l);
  margin-inline: auto;
  padding-block: var(--space-xl-2xl);
  padding-inline: var(--side-padding);
}

.StepCards-part + .StepCards-part {
  margin-top: var(--space-l-xl);
}

.StepCards-part > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }

.StepCards-part > h5 + h1 {
    margin-block-start: 0;
  }

.StepCards-part > h1 + p {
    margin-block-start: var(--space-l-xl);
  }

.StepCards-part li:not([class]) {
    margin-block-start: var(--flow-space, 1lh);
  }

@media (min-width: 42em) {
  .StepCards {
    padding-inline: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-l-xl);
  }

  .StepCards-part + .StepCards-part{
    margin-top: 0;
  }
}

.Technology-photo {
  margin-block-start: var(--space-s-m);
}

.Technology-attributes {
  margin-block-start: var(--space-xs-s);
}

.TechnologyCard {
  margin-block-start: var(--space-l-xl);
  text-align: center;
}

.TechnologyCard-pic {
  margin-block-start: var(--space-s-m);
}

.TechnologyCard-attributes {
  margin-block-start: var(--space-xs-s);
  text-align: left;
}

.TechnologyCard-link {
  text-align: left;
}

.TechnologyCards + .TechnologyCards {
  margin-block-start: var(--space-l-xl);
}

.TechnologyCards-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1em;
}

.u-bg-secondary {
  background-color: var(--theme-bg-colour-secondary);
}

.u-fadeout {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
  /* mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
}

.u-width-full {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}