.transform {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

.filter {
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
}

/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */

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

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* a elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
}

@font-face {
  font-family: 'BBHHegarty';
  src: url('/fonts/BBHSansHegarty-Regular.otf') format('opentype');
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'BBHBartle';
  src: url('/fonts/BBHSansBartle-Regular.otf') format('opentype');
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'BBHBogle';
  src: url('/fonts/BBHSansBogle-Regular.otf') format('opentype');
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Italic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

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

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

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

@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/dm-mono-v14-latin-500.woff2') format('woff2');
}

:root {
  --color-dark: oklch(14.69% 0.0041 49.25);
  --color-dark-glare: #1C1917;
  --color-mid: #A8A29E;
  --color-light: #FAFAF9;
  --color-primary: #D97706;
  --color-white: oklch(100% 0 0);
  --color-black: oklch(0% 0 0);
  --color-slate-50: oklch(98.42% 0.0034 247.86);
  --color-slate-100: oklch(96.83% 0.0069 247.9);
  --color-slate-200: oklch(92.88% 0.0126 255.51);
  --color-slate-300: oklch(86.9% 0.0198 252.89);
  --color-slate-400: oklch(71.07% 0.0351 256.79);
  --color-slate-500: oklch(55.44% 0.0407 257.42);
  --color-slate-600: oklch(44.55% 0.0374 257.28);
  --color-slate-700: oklch(37.17% 0.0392 257.29);
  --color-slate-800: oklch(27.95% 0.0368 260.03);
  --color-slate-900: oklch(20.77% 0.0398 265.75);
  --color-slate-950: oklch(12.88% 0.0406 264.7);
  --color-gray-50: oklch(98.46% 0.0017 247.84);
  --color-gray-100: oklch(96.7% 0.0029 264.54);
  --color-gray-200: oklch(92.76% 0.0058 264.53);
  --color-gray-300: oklch(87.17% 0.0093 258.34);
  --color-gray-400: oklch(71.37% 0.0192 261.32);
  --color-gray-500: oklch(55.1% 0.0234 264.36);
  --color-gray-600: oklch(55.1% 0.0234 264.36);
  --color-gray-700: oklch(37.29% 0.0306 259.73);
  --color-gray-800: oklch(27.81% 0.0296 256.85);
  --color-gray-900: oklch(21.01% 0.0318 264.66);
  --color-gray-950: oklch(12.96% 0.0274 261.69);
  --color-zinc-50: oklch(98.51% 0 0);
  --color-zinc-100: oklch(96.74% 0.0013 286.38);
  --color-zinc-200: oklch(91.97% 0.004 286.32);
  --color-zinc-300: oklch(87.11% 0.0055 286.29);
  --color-zinc-400: oklch(71.18% 0.0129 286.07);
  --color-zinc-500: oklch(55.17% 0.0138 285.94);
  --color-zinc-600: oklch(44.19% 0.0146 285.79);
  --color-zinc-700: oklch(37.03% 0.0119 285.81);
  --color-zinc-800: oklch(27.39% 0.0055 286.03);
  --color-zinc-900: oklch(21.03% 0.0059 285.89);
  --color-zinc-950: oklch(14.08% 0.0044 285.82);
  --color-neutral-50: oklch(98.51% 0 0);
  --color-neutral-100: oklch(97.02% 0 0);
  --color-neutral-200: oklch(92.19% 0 0);
  --color-neutral-300: oklch(86.99% 0 0);
  --color-neutral-400: oklch(71.55% 0 0);
  --color-neutral-500: oklch(55.55% 0 0);
  --color-neutral-600: oklch(43.86% 0 0);
  --color-neutral-700: oklch(37.15% 0 0);
  --color-neutral-800: oklch(26.86% 0 0);
  --color-neutral-900: oklch(20.46% 0 0);
  --color-neutral-950: oklch(14.48% 0 0);
  --color-stone-50: oklch(98.48% 0.0013 106.42);
  --color-stone-100: oklch(96.99% 0.0013 106.42);
  --color-stone-200: oklch(92.32% 0.0026 48.72);
  --color-stone-300: oklch(86.87% 0.0043 56.37);
  --color-stone-400: oklch(71.61% 0.0091 56.26);
  --color-stone-500: oklch(55.34% 0.0116 58.07);
  --color-stone-600: oklch(44.44% 0.0096 73.64);
  --color-stone-700: oklch(37.41% 0.0087 67.56);
  --color-stone-800: oklch(26.85% 0.0063 34.3);
  --color-stone-900: oklch(21.61% 0.0061 56.04);
  --color-stone-950: oklch(14.69% 0.0041 49.25);
  --color-red-50: oklch(97.05% 0.0129 17.38);
  --color-red-100: oklch(93.56% 0.0309 17.72);
  --color-red-200: oklch(88.45% 0.0593 18.33);
  --color-red-300: oklch(80.77% 0.1035 19.57);
  --color-red-400: oklch(71.06% 0.1661 22.22);
  --color-red-500: oklch(63.68% 0.2078 25.33);
  --color-red-600: oklch(57.71% 0.2152 27.33);
  --color-red-700: oklch(50.54% 0.1905 27.52);
  --color-red-800: oklch(44.37% 0.1613 26.9);
  --color-red-900: oklch(39.58% 0.1331 25.72);
  --color-red-950: oklch(25.75% 0.0886 26.04);
  --color-orange-50: oklch(97.96% 0.015771618519989913 73.68407794443895);
  --color-orange-100: oklch(95.42% 0.03715446392304164 75.16435946755645);
  --color-orange-200: oklch(90.15% 0.0729 70.7);
  --color-orange-300: oklch(83.66% 0.1165 66.29);
  --color-orange-400: oklch(75.76% 0.159 55.93);
  --color-orange-500: oklch(70.49% 0.1867 47.6);
  --color-orange-600: oklch(64.61% 0.1943 41.12);
  --color-orange-700: oklch(55.34% 0.1739 38.4);
  --color-orange-800: oklch(46.98% 0.143 37.3);
  --color-orange-900: oklch(40.84% 0.1165 38.17);
  --color-orange-950: oklch(26.59% 0.0762 36.26);
  --color-amber-50: oklch(98.69% 0.021403008259500936 95.27742336745216);
  --color-amber-100: oklch(96.19% 0.058 95.62);
  --color-amber-200: oklch(92.43% 0.1151 95.75);
  --color-amber-300: oklch(87.9% 0.1534 91.61);
  --color-amber-400: oklch(83.69% 0.1644 84.43);
  --color-amber-500: oklch(76.86% 0.1647 70.08);
  --color-amber-600: oklch(66.58% 0.1574 58.32);
  --color-amber-700: oklch(55.53% 0.1455 49);
  --color-amber-800: oklch(47.32% 0.1247 46.2);
  --color-amber-900: oklch(41.37% 0.1054 45.9);
  --color-amber-950: oklch(27.91% 0.0742 45.64);
  --color-yellow-50: oklch(98.73% 0.0262 102.21);
  --color-yellow-100: oklch(97.29% 0.0693 103.19);
  --color-yellow-200: oklch(94.51% 0.1243 101.54);
  --color-yellow-300: oklch(90.52% 0.1657 98.11);
  --color-yellow-400: oklch(86.06% 0.1731 91.94);
  --color-yellow-500: oklch(79.52% 0.1617 86.05);
  --color-yellow-600: oklch(68.06% 0.1423 75.83);
  --color-yellow-700: oklch(55.38% 0.1207 66.44);
  --color-yellow-800: oklch(47.62% 0.1034 61.91);
  --color-yellow-900: oklch(42.1% 0.0897 57.71);
  --color-yellow-950: oklch(28.57% 0.0639 53.81);
  --color-lime-50: oklch(98.57% 0.031 120.76);
  --color-lime-100: oklch(96.69% 0.0659 122.33);
  --color-lime-200: oklch(93.82% 0.1217 124.32);
  --color-lime-300: oklch(89.72% 0.1786 126.67);
  --color-lime-400: oklch(84.93% 0.2073 128.85);
  --color-lime-500: oklch(76.81% 0.2044 130.85);
  --color-lime-600: oklch(64.82% 0.1754 131.68);
  --color-lime-700: oklch(53.22% 0.1405 131.59);
  --color-lime-800: oklch(45.28% 0.1129 130.93);
  --color-lime-900: oklch(40.5% 0.0956 131.06);
  --color-lime-950: oklch(27.41% 0.0688 132.11);
  --color-green-50: oklch(98.19% 0.0181 155.83);
  --color-green-100: oklch(96.24% 0.0434 156.74);
  --color-green-200: oklch(92.5% 0.0806 155.99);
  --color-green-300: oklch(87.12% 0.1363 154.45);
  --color-green-400: oklch(80.03% 0.1821 151.71);
  --color-green-500: oklch(72.27% 0.192 149.58);
  --color-green-600: oklch(62.71% 0.1699 149.21);
  --color-green-700: oklch(52.73% 0.1371 150.07);
  --color-green-800: oklch(44.79% 0.1083 151.33);
  --color-green-900: oklch(39.25% 0.0896 152.54);
  --color-green-950: oklch(26.64% 0.0628 152.93);
  --color-emerald-50: oklch(97.93% 0.0207 166.11);
  --color-emerald-100: oklch(95.05% 0.0507 163.05);
  --color-emerald-200: oklch(90.49% 0.0895 164.15);
  --color-emerald-300: oklch(84.52% 0.1299 164.98);
  --color-emerald-400: oklch(77.29% 0.1535 163.22);
  --color-emerald-500: oklch(69.59% 0.1491 162.48);
  --color-emerald-600: oklch(59.6% 0.1274 163.23);
  --color-emerald-700: oklch(50.81% 0.1049 165.61);
  --color-emerald-800: oklch(43.18% 0.0865 166.91);
  --color-emerald-900: oklch(37.8% 0.073 168.94);
  --color-emerald-950: oklch(26.21% 0.0487 172.55);
  --color-teal-50: oklch(98.36% 0.0142 180.72);
  --color-teal-100: oklch(95.27% 0.0498 180.8);
  --color-teal-200: oklch(91% 0.0927 180.43);
  --color-teal-300: oklch(85.49% 0.1251 181.07);
  --color-teal-400: oklch(78.45% 0.1325 181.91);
  --color-teal-500: oklch(70.38% 0.123 182.5);
  --color-teal-600: oklch(60.02% 0.1038 184.7);
  --color-teal-700: oklch(51.09% 0.0861 186.39);
  --color-teal-800: oklch(43.7% 0.0705 188.22);
  --color-teal-900: oklch(38.61% 0.059 188.42);
  --color-teal-950: oklch(27.73% 0.0447 192.52);
  --color-cyan-50: oklch(98.41% 0.0189 200.87);
  --color-cyan-100: oklch(95.63% 0.0443 203.39);
  --color-cyan-200: oklch(91.67% 0.0772 205.04);
  --color-cyan-300: oklch(86.51% 0.1153 207.08);
  --color-cyan-400: oklch(79.71% 0.1339 211.53);
  --color-cyan-500: oklch(71.48% 0.1257 215.22);
  --color-cyan-600: oklch(60.89% 0.1109 221.72);
  --color-cyan-700: oklch(51.98% 0.0936 223.13);
  --color-cyan-800: oklch(45% 0.0771 224.28);
  --color-cyan-900: oklch(39.82% 0.0664 227.39);
  --color-cyan-950: oklch(30.18% 0.0541 229.7);
  --color-sky-50: oklch(97.71% 0.012485946526696063 236.61974498403976);
  --color-sky-100: oklch(95.14% 0.025 236.82);
  --color-sky-200: oklch(90.14% 0.0555 230.9);
  --color-sky-300: oklch(82.76% 0.1013 230.32);
  --color-sky-400: oklch(75.35% 0.139 232.66);
  --color-sky-500: oklch(68.47% 0.1479 237.32);
  --color-sky-600: oklch(58.76% 0.1389 241.97);
  --color-sky-700: oklch(50% 0.1193 242.75);
  --color-sky-800: oklch(44.34% 0.1 240.79);
  --color-sky-900: oklch(39.12% 0.0845 240.88);
  --color-sky-950: oklch(29.35% 0.0632 243.16);
  --color-blue-50: oklch(97.05% 0.01418224665972208 254.6041641690868);
  --color-blue-100: oklch(93.19% 0.0316 255.59);
  --color-blue-200: oklch(88.23% 0.0571 254.13);
  --color-blue-300: oklch(80.91% 0.0956 251.81);
  --color-blue-400: oklch(71.37% 0.1434 254.62);
  --color-blue-500: oklch(62.31% 0.188 259.81);
  --color-blue-600: oklch(54.61% 0.2152 262.88);
  --color-blue-700: oklch(48.82% 0.2172 264.38);
  --color-blue-800: oklch(42.44% 0.1809 265.64);
  --color-blue-900: oklch(37.91% 0.1378 265.52);
  --color-blue-950: oklch(28.23% 0.0874 267.94);
  --color-indigo-50: oklch(96.19% 0.0179 272.31);
  --color-indigo-100: oklch(92.99% 0.0334 272.79);
  --color-indigo-200: oklch(86.99% 0.0622 274.04);
  --color-indigo-300: oklch(78.53% 0.1041 274.71);
  --color-indigo-400: oklch(68.01% 0.1583 276.93);
  --color-indigo-500: oklch(58.54% 0.2041 277.12);
  --color-indigo-600: oklch(51.06% 0.2301 276.97);
  --color-indigo-700: oklch(45.68% 0.2146 277.02);
  --color-indigo-800: oklch(39.84% 0.1773 277.37);
  --color-indigo-900: oklch(35.88% 0.1354 278.7);
  --color-indigo-950: oklch(25.73% 0.0861 281.29);
  --color-violet-50: oklch(96.19% 0.0179 272.31);
  --color-violet-100: oklch(94.33% 0.0284 294.59);
  --color-violet-200: oklch(89.43% 0.0549 293.28);
  --color-violet-300: oklch(81.12% 0.1013 293.57);
  --color-violet-400: oklch(70.9% 0.1592 293.54);
  --color-violet-500: oklch(60.56% 0.2189 292.72);
  --color-violet-600: oklch(54.13% 0.2466 293.01);
  --color-violet-700: oklch(49.07% 0.2412 292.58);
  --color-violet-800: oklch(43.2% 0.2106 292.76);
  --color-violet-900: oklch(37.96% 0.1783 293.74);
  --color-violet-950: oklch(28.27% 0.1351 291.09);
  --color-purple-50: oklch(97.68% 0.0142 308.3);
  --color-purple-100: oklch(94.64% 0.0327 307.17);
  --color-purple-200: oklch(90.24% 0.06040838720918992 306.7029975247675);
  --color-purple-300: oklch(82.68% 0.1082 306.38);
  --color-purple-400: oklch(72.17% 0.1767 305.5);
  --color-purple-500: oklch(62.68% 0.2325 303.9);
  --color-purple-600: oklch(55.75% 0.2525 302.32);
  --color-purple-700: oklch(49.55% 0.2369 301.92);
  --color-purple-800: oklch(43.83% 0.1983 303.72);
  --color-purple-900: oklch(38.07% 0.1661 304.99);
  --color-purple-950: oklch(29.05% 0.1432 302.72);
  --color-fuchsia-50: oklch(97.73% 0.017319799618005262 320.057924702978);
  --color-fuchsia-100: oklch(95.2% 0.035966474160176905 318.851883433472);
  --color-fuchsia-200: oklch(90.3% 0.0732 319.62);
  --color-fuchsia-300: oklch(83.3% 0.1322 321.43);
  --color-fuchsia-400: oklch(74.77% 0.207 322.16);
  --color-fuchsia-500: oklch(66.68% 0.2591 322.15);
  --color-fuchsia-600: oklch(59.15% 0.2569 322.9);
  --color-fuchsia-700: oklch(51.8% 0.2258 323.95);
  --color-fuchsia-800: oklch(45.19% 0.1922 324.59);
  --color-fuchsia-900: oklch(40.07% 0.1601 325.61);
  --color-fuchsia-950: oklch(29.32% 0.1309 325.66);
  --color-pink-50: oklch(97.14% 0.0141 343.2);
  --color-pink-100: oklch(94.82% 0.0276 342.26);
  --color-pink-200: oklch(89.94% 0.0589 343.23);
  --color-pink-300: oklch(82.28% 0.1095 346.02);
  --color-pink-400: oklch(72.53% 0.1752 349.76);
  --color-pink-500: oklch(65.59% 0.2118 354.31);
  --color-pink-600: oklch(59.16% 0.218 0.58);
  --color-pink-700: oklch(52.46% 0.199 3.96);
  --color-pink-800: oklch(45.87% 0.1697 3.82);
  --color-pink-900: oklch(40.78% 0.1442 2.43);
  --color-pink-950: oklch(28.45% 0.1048 3.91);
  --color-rose-50: oklch(96.94% 0.0151 12.42);
  --color-rose-100: oklch(94.14% 0.0297 12.58);
  --color-rose-200: oklch(89.24% 0.0559 10);
  --color-rose-300: oklch(80.97% 0.1061 11.64);
  --color-rose-400: oklch(71.92% 0.169 13.43);
  --color-rose-500: oklch(64.5% 0.2154 16.44);
  --color-rose-600: oklch(58.58% 0.222 17.58);
  --color-rose-700: oklch(51.43% 0.1978 16.93);
  --color-rose-800: oklch(45.46% 0.1713 13.7);
  --color-rose-900: oklch(41.03% 0.1502 10.27);
  --color-rose-950: oklch(27.08% 0.1009 12.09);
  --space-xs: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
  --space-s: clamp(0.875rem, 0.83rem + 0.20vw, 1rem);
  --space-m: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
  --space-l: clamp(2.1875rem, 2.09rem + 0.49vw, 2.5rem);
  --space-xl: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
  --space-2xl: clamp(3.5rem, 3.34rem + 0.78vw, 4rem);
  --space-3xl: clamp(4.375rem, 4.17rem + 0.98vw, 5rem);
  --space-4xl: clamp(6.5625rem, 6.26rem + 1.47vw, 7.5rem);
  --space-xs-l: clamp(0.4375rem, -0.23rem + 3.24vw, 2.5rem);
  --space-m-l: clamp(1.3125rem, 0.93rem + 1.86vw, 2.5rem);
  --space-2xl-4xl: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
  --size-step-000: clamp(0.740625rem, 0.73rem + 0.06vw, 0.78125rem);
  --size-step-00: clamp(0.833125rem, 0.80rem + 0.16vw, 0.9375rem);
  --size-step-0: clamp(0.9375rem, 0.88rem + 0.29vw, 1.125rem);
  --size-step-1: clamp(1.055rem, 0.96rem + 0.46vw, 1.35rem);
  --size-step-2: clamp(1.18625rem, 1.05rem + 0.68vw, 1.62rem);
  --size-step-3: clamp(1.335rem, 1.14rem + 0.95vw, 1.94375rem);
  --size-step-4: clamp(1.501875rem, 1.23rem + 1.30vw, 2.3325rem);
  --size-step-5: clamp(1.689375rem, 1.33rem + 1.74vw, 2.799375rem);
  --size-step-6: clamp(1.900625rem, 1.43rem + 2.29vw, 3.359375rem);
  --size-step-7: clamp(2.138125rem, 1.53rem + 2.97vw, 4.03125rem);
  --size-step-8: clamp(2.405625rem, 1.62rem + 3.81vw, 4.8375rem);
  --size-step-9: clamp(2.70625rem, 1.70rem + 4.86vw, 5.805rem);
  --size-step-10: clamp(3.03125rem, 1.76rem + 6.17vw, 6.965625rem);
  --size-step-11: clamp(3.78875rem, 1.63rem + 10.45vw, 10.448125rem);
  --size-step-12: clamp(3.78875rem, 0.36rem + 16.61vw, 14.375rem);
  --leading-micro: 0.85;
  --leading-flat: 1;
  --leading-fine: 1.2;
  --leading-standard: 1.4;
  --leading-loose: 1.7;
  --font-base: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,Adwaita Sans,Cantarell,Ubuntu,roboto,noto,helvetica,arial,sans-serif;
  --font-heading: BBHHegarty;
  --font-mono: DM Mono,monospace;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
   --gutter: var(--space-m-l);
   --transition-base: 250ms ease;
   --transition-movement: 200ms linear;
   --transition-fade: 300ms ease;
   --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
   --stroke-width: 1px;
   --stroke: var(--stroke-width) solid var(--color-mid);
   --stroke-solid: var(--stroke-width) solid var(--color-mid);
   --radius-s: 0.2rem;
   --radius-m: 0.75rem;
   --radius-l: 2.5rem;
   --uppercase-kerning: 0.08ch;
   /* Define --indent-space so our calc() rules work for the inspo pattern */
   --indent-size: var(--space-xs-l);

   /* Branding colors & automated palettes */
   --brand: var(--color-stone-700);

   /* Palette type: Complementary
      Desc: Maximum contrast
      Notes: Careful of clashing colours. A less saturated hue can be useful.
      Pseudocode:
      Primary colour = Branding colour
         Uses: All interactive elements.
         Proportion: 60%
         Purpose: Define overall feel of the design.
      Secondary colour = Accent colour
         Uses: Higher hierarchy objects
         Proportion: 20-30%
      Primary & secondary colours are opposite each other on the colour wheel
   */
   --accent: oklch(from var(--brand) calc(l * 1.3 + 0.3) c calc((h * 1deg) + 180deg) / 90%);

   /* --accent-bright: oklch(from var(--accent) calc(l*1.2) c h);
   --accent-muted: oklch(from var(--accent) calc(l/2 + 0.2) c h);
   --accent-bg: oklch(from var(--accent) calc(l*2.2) c h); */

   /* Palette type: Analogous
      Desc: Lower contrast, but close matching of colours makes the colours feel cohesive
      Notes: Analogous colours abound in nature. Good fit for fashion, interior design, web design & business logos
      Pseudocode:
      Primary colour = Branding colour
         Uses: All interactive elements.
         Proportion: 60%
         Purpose: Define overall feel of the design.
      Secondary colour = Accent colour
         Uses: Higher hierarchy objects
         Proportion: 20-30%
      Tertiary colour
         Uses: Used for highlights and CTAs
      Primary, secondary & tertiary colours are closely clustered on the hue wheel
   */
   /*--accent: var(--color-orange-700);
   --brand: oklch(from var(--accent) l c calc(h + 45));
   --tertiary: oklch(from var(--accent) l c calc(h - 45)); */

   /* Palette type: Triangle
      Desc: A playful palette that tends to be vibrant with lots of contrast
      Notes: A more contrasty version of the split complementary palette
      Pseudocode:
      Primary colour = Branding colour
         Uses: All interactive elements.
         Proportion: 60%
         Purpose: Define overall feel of the design.
      Secondary colour = Accent colour
         Uses: Higher hierarchy objects
         Proportion: 20-30%
      Tertiary colour
         Uses: Used for highlights and CTAs
      Primary, secondary & tertiary colours are closely clustered on the hue wheel
   */
   /* --accent: var(--color-sky-400);
   --brand: oklch(from var(--accent) l c calc(h + 60));
   --tertiary: oklch(from var(--accent) l c calc(h - 60)); */

   /* Palette type: Split complementary
      Desc: Splitting the complementary colours to a primary or brand colour gives things a playful feel
      Notes: Use the colour on the point of the triangle as the primary colour and the other 2 colours as accents
      Pseudocode:
      Primary colour = Branding colour
         Uses: All interactive elements.
         Proportion: 60%
         Purpose: Define overall feel of the design.
      Secondary colour = Accent colour
         Uses: Higher hierarchy objects
         Proportion: 20-30%
      Tertiary colour
         Uses: Used for highlights and CTAs
      Secondary & tertiary colours are closely clustered on the hue wheel
   */
   /* --brand: var(--color-orange-700);
   --accent: oklch(from var(--accent) l c calc(h + 160));
   --tertiary: oklch(from var(--accent) l c calc(h - 160)); */

   /* Palette type: Rectangular
      Desc: One dominant colour and 3 accent colours.
      Notes: A blend of warm and cool shades tend to result. A safe, starter palette that allows a lot of freedom to match hues
      Pseudocode:
      Primary colour = Branding colour
         Uses: All interactive elements.
         Proportion: 60%
         Purpose: Define overall feel of the design.
      Secondary colour = Accent colour
         Uses: Higher hierarchy objects
         Proportion: 20-30%
      Tertiary colour
         Uses: Used for highlights and CTAs
      Quaternary colour
      Primary, secondary & tertiary colours are closely clustered on the hue wheel
   */
   /* --brand: var(--color-teal-700);
   --accent: oklch(from var(--accent) l c calc(h + 55));
   --tertiary: oklch(from var(--accent) l c calc(h + 180));
   --quarternary: oklch(from var(--accent) l c calc(h - 125)); */

   /* Palette type: Square
      Desc: One dominant colour and 3 accent colours.
      Notes: A blend of warm and cool shades tend to result. A safe, starter palette that allows a lot of freedom to match hues
      Pseudocode:
      Primary colour = Branding colour
         Uses: All interactive elements.
         Proportion: 60%
         Purpose: Define overall feel of the design.
      Secondary colour = Accent colour
         Uses: Higher hierarchy objects
         Proportion: 20-30%
      Tertiary colour
         Uses: Used for highlights and CTAs
      Quaternary colour
      Primary, secondary & tertiary colours are closely clustered on the hue wheel
   */
   /* --brand: var(--color-orange-700);
   --accent: oklch(from var(--accent) l c calc(h + 90));
   --tertiary: oklch(from var(--accent) l c calc(h + 180));
   --quarternary: oklch(from var(--accent) l c calc(h - 90)); */
}

/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

body {
  background: var(--color-dark);
  color: var(--color-primary);
  font-size: var(--size-step-1);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  font-size-adjust: from-font;
  margin: 0;
}

:is(h1, h2, h3, h4) {
  line-height: var(--leading-fine);
  text-wrap: balance;
  font-family: var(--font-heading);
}

h1 {
  font-size: var(--size-step-6);
  max-width: 20ch;
}

h2 {
  font-size: var(--size-step-5);
  max-width: 35ch;
}

h3 {
  font-size: var(--size-step-4);
  max-width: 35ch;
}

/*
  What we’re doing here is, determining if a heading has either a text-step-10, text-step-11 or text-step-12 utility class on it. This is achieved by using the [*=""] attribute selector, which determines if an attribute contains the string we put between the quotes.

  All three of those are inside a :where() pseudo-class. The reason we use :where() instead of :is(), is because :where() has zero specificity. It’s a global style, so we want this to be easily overridable in CUBE blocks for example.
*/

:is(h1, h2, h3, h4):where(
  [class*='text-step-10'],
  [class*='text-step-11'],
  [class*='text-step-12']
) {
  line-height: var(--leading-micro);
  font-weight: var(--font-black);
}

:is(h4, h5, h6) {
  font-size: var(--size-step-3);
}

small {
  font-size: var(--size-step-0);
}

ins {
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-dark);
  padding-inline: 0.3em;
}

:is(code, kbd, samp) {
  /* The reason this isn't var(--font-mono) is so the stroke on kbd inherits the colour from the text as --font-mono uses mid shade by default  */
  font-family: monospace;
  padding: 0.2em 0.2em 0.05em 0.2em;
  -webkit-hyphens: none;
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* This is quite a new property, so we want code styles to at least not be huge or tiny */

@supports not (font-size-adjust: from-font) {
  :is(code, kbd, samp) {
    font-size: 0.8em;
  }
}

pre:has(code) {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

pre code {
  border: none;
  background: none;
  padding: 0;
}

kbd {
  border: 1px solid;
  padding-block-end: 0.1em;
}

var {
  font-style: normal;
  font-weight: var(--font-medium);
}

q {
  font-style: italic;
}

ul:not([class]) {
  padding-inline-start: 1.7ch;
  list-style-type: disc;
}

ul:not([class])>li {
  padding-inline-start: var(--space-xs);
}

ul ::marker {
  font-size: 0.8lh;
}

ol ::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

/* Lists with classes and roles will be out of standard flow, so remove the default spacing */

[role='list'][class],
[role='tablist'][class] {
  margin-block: 0;
  padding: 0;
}

dt {
  font-weight: var(--font-medium);
}

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

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

dd {
  margin-inline-start: 1.5ch;
}

blockquote {
  margin-inline: 0;
  color: var(--color-light);
}

blockquote footer {
  margin-block-start: var(--space-s);
  color: var(--color-primary);
  font-size: var(--size-step-0);
}

blockquote q {
  font-style: normal;
}

/* some nice default styles for embeds a YouTube of Vimeo video, or uses a native <video> element */

:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

img {
  height: auto;
  max-width: 100%;
  /* Adding display: block gets rid of that annoying space at the bottom that shows up otherwise. */
  display: block;
}

/* a touch of padding and some typography treatment for the figcaption */

figcaption {
  padding-block-start: 0.5em;
  font-size: var(--size-step-0);
  font-family: monospace;
}

table {
  border: var(--stroke);
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
}

thead th {
  padding-block: var(--space-s);
}

td,
th {
  padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
  border-block-end: var(--stroke);
}

th:only-of-type {
  border-inline-end: var(--stroke);
}

:is(th, td)~ :is(th, td) {
  border-inline-start: var(--stroke);
}

tr+tr :is(th, td) {
  border-block-start: var(--stroke);
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-s);
}

a:not([class]):hover {
  text-underline-offset: 0.2lh;
}

:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.3ex;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.2lh);
}

/* Firefox is the only browser that doesn't outline the whole element unless you make it display inline-block. That in itself causes multiple flow issues so we can detect it, using its own vendor prefix and reduce focus offset */

@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}

:target {
  scroll-margin-block: 5lh;
}

::selection {
  color: var(--color-dark);
  background: var(--color-light);
}

hr {
  /* Remove borders */
  border: none;
  /* Define top border using stroke var */
  border-block-start: var(--hr-stroke, var(--stroke));
  /* Look for flow-space, and fallback to a spacing design token */
  margin-block: var(--flow-space, var(--space-xl));
}

/* Ensure svg without width and height attributes isn't massive */

svg:not([class]) {
  width: auto;
  height: 1lh;
}

/* Tell all svgs not to shrink - flex:none also works but slex-shrink: 0 is easier to understand */

svg {
  flex-shrink: 0;
}

/* An svg with a role of img is treated as an image. We allow the width and height to take over - we know they're there due to checking for their presence. */

svg[role='img'][width][height] {
  width: revert;
  height: revert;
  background: var(--color-light);
  padding: var(--space-xs);
}

/* There's a.flow composition, but this prevents forms from having to have that applied where the markup is harder to control in certain systems. It still uses the --flow-space vars though to make managing space easier */

form>*+* {
  margin-top: var(--flow-space, 1rem);
}

:is(input, select, textarea) {
  accent-color: var(--color-primary);
}

:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea) {
  /* We're using em units for padding here rather than the spacing scale - allowing the padding to scale with the text */
  padding: 0.5em 0.8em;
  border-radius: var(--radius-s);
  border: var(--stroke-solid);
  background: var(--color-dark-glare);
  color: var(--color-light);
  /* 100% width to force inputs to fill their container which allows a compositional layout to determine the size instead. */
  width: 100%;

  /* CSS nesting here - use nesting sparingly, just for little flourishes like this, to reduce confusion when intepreting the code. */
}

:is(input:not([type='checkbox'],[type='radio'],[type='color']),select,textarea)::placeholder {
    color: var(--color-mid);
    /* For some reason, Firefox adds opacity to placeholders */
    opacity: 1;
  }

/* Set heavier weight and finer leading for the form labels */

label {
  line-height: var(--leading-fine);
  font-weight: var(--font-medium);
}

/* Add an inline element via the ::after rule that creates a new line */

label::after {
  content: '\A';
  white-space: pre;
}

/* Usually the label wraps the checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex:
  - Align to baseline aligns the control to the first line of text - so if the text wraps across multiple lines, the control doesn't end up being spaced awkwardly in the center.
*/

label:has(input) {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-weight: var(--font-normal);
}

label:has(input)+label:has(iniput) {
  --flow-space: var(--space-s-m);
}

/* Optical adjustement - Slightly adjusts the vertical position of the check/radio */

label:has(input) input {
  transform: translateY(0.1ex);
}

/* Apply some treatment to disabled inputs */

input:disabled {
  background: var(--color-mid);
}

/* Visual hint that the element is disabled */

input:disabled,
label input:disabled {
  cursor: not-allowed;
}

/* On a <textarea>you can define rows which add height. Without that attribute,
they’re quite shallow. With a little :not() rule, we can detect those that are shallow and make them taller. */

textarea:not([rows]) {
  min-height: 10em;
}

/* Makes the <fieldset>and <legend>elements look nicer because they don’t look great by default. */

fieldset {
  border: var(--stroke);
  padding: var(--space-s);
}

legend {
  font-weight: var(--font-medium);
  padding-inline: var(--space-xs);
}

/* Tidy up the <details> and <summary> elements */

summary {
  font-weight: var(--font-bold);
  cursor: pointer;
}

details[open] summary {
  margin-block-end: var(--space-s);
}

/* Adding support for smooth transitions as per:
  https://htmhell.dev/adventcalendar/2024/3/
  Supported in Chrome and Safari TP as of 3/12/24
*/

@view-transition {
  navigation: auto;
}

/* Turn off the smooth transitions for those users who prefer-reduced-motion */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Debug overlay labels */

*[data-label],
.debug-label * {
  position: relative;
  /* outline: 1px dashed rgba(0, 150, 255, 0.5); optional skeleton outline */
}

*[data-label]::before,
.debug-label *::before {
  content: attr(class); /* or use attr(class), attr(id) */
  position: absolute;
  top: -0.8em;
  left: 0;
  font-size: 12px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 0 4px;
  border-radius: 2px;
  pointer-events: none; /* don’t interfere with clicks */
  z-index: 9999;
}

/* Base: drop-in responsive placeholder image */

img.placeholder {
  display: block;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 1/1); /* default ratio if none set */
  background: #ddd;
  border: 1px dashed #aaa;
  object-fit: cover;
  position: relative;
  color: transparent;
}

/* Centered text (uses alt if present; falls back to “Placeholder”) */

img.placeholder::after {
  content: attr(alt) / "Placeholder";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 0.9rem/1.1 system-ui, sans-serif;
  font-size: clamp(0.75rem, 2.5cqw, 1.1rem);
  color: #666;
  background: linear-gradient(to bottom right, transparent 0 49%, rgba(0,0,0,.06) 50%, transparent 51% 100%);
  pointer-events: none;
}

/* When the container grows, change the ratio */

@container (min-width: 380px) {
  img.placeholder { --ph-ratio: 4/3; }
}

@container (min-width: 680px) {
  img.placeholder { --ph-ratio: 16/9; }
}

.button {
   --button-bg: var(--color-primary);
   --button-text: var(--color-dark);
   --button-x-padding: 2em;
   --button-y-padding: 1.1em;
   --button-gutter: 0.5ch;
   /* When a user focuses a button, they get a nice outline in a colour that matches the rest of the design by using a global colour */
   --focus-color: var(--color-primary);

   /* Inline-flex makes positioning the icon and the text easier */
   display: inline-flex;
   gap: var(--button-gutter);
   align-items: center;
   line-height: var(--leading-flat);
   /* Relative positioning for the parent because we'll use absolute positioning in the corner */
   position: relative;
   border: none;
   /* Use of pointer for cursor explained here: https://piccalil.li/blog/how-i-build-a-button-component/ */
   cursor: pointer;
   background: var(--button-bg);
   color: var(--button-text);
   padding: var(--button-y-padding) var(--button-x-padding);
   /* When using the uppercase text transform, we also need to use the uppercase-kerning var to add a bit of room between letters */
   text-transform: uppercase;
   letter-spacing: var(--uppercase-kerning);
   text-decoration: none;
   font-size: var(--size-step-00);
   font-weight: var(--font-bold);
}

/* The corner is also absolutely positioned, so it’s been pulled out of the button’s flow, which means we need to add more space to account for it. Doubling the --button-x-padding works nicely for that. */

.button:has(.corner) {
   padding-inline-end: calc(var(--button-x-padding) * 2);
}

/* For sizing the corner, we define a --corner-size and make it absolutely positioned. We could use the data-corner-docked exception, but I prefer in this case, to be more explicit. It’s likely that when a developer comes to work on this, they won’t go and look at the corner component, so with that presumption in mind, it makes sense for them to see the absolute positioning rule. */

.button .corner {
   --corner-size: 100%;

   position: absolute;
   right: 0;
   top: 0;
}

/* Slightly brighten the button on hover */

.button:hover {
   filter: brightness(105%);
}

/* Animate the state change slightly */

.button:hover .corner {
   --corner-offset: 60%;
}

/* This makes the button feel 'squishy' when the user clicks */

.button:active {
   transform: scale(99%);
}

/* Secondary variant exceptions */

.button[data-button-variant='secondary'] {
   --button-bg: var(--color-dark-glare);
   --button-text: var(--color-primary);
   --focus-color: var(--color-dark);
   --corner-secondary-color: var(--color-primary);
}

.card {
   --focus-color: var(--color-primary);
   border: var(--stroke);
   border-radius: var(--radius-m);
   position: relative;
   background-color: var(--color-dark-glare);
   background-blend-mode:screen;
}

.card__runner {
   font-size: var(--size-step-00);
   text-transform: uppercase;
   letter-spacing: calc(var(--uppercase-kerning)*2);
   color: var(--color-primary);
   font-weight: var(--font-black);
}

.card__title {
   --flow-space: var(--space-s);
   font-size: var(--size-step-4);
   line-height: var(--leading-flat);
   color: var(--color-light);
   text-transform: uppercase;
}

/* This is the meta text text and we're adding a bit more space above it */

.card__meta {
   --flow-space: var(--space-s);

   font-size: var(--size-step-00);
   line-height: var(--leading-flat);
   color: var(--color-light);
   text-transform: uppercase;
   text-decoration: none;
}

.card__body {
   --flow-space: var(--space-s);
   font-size: var(--size-step-0);
   line-height: var(--leading-flat);
   color: var(--color-light);
   flex-grow: 1;
}

/* The card__content element needs space above it which is consistent with the card's padding, so we use --space-l */

.card__content {
   margin-block-start: var(--space-l);
      padding: 0 var(--space-m) var(--space-m) var(--space-m);

}

.card__alert {
   /* This element is in a flow context so we need to remove the inherited margin */
   --flow-space: 0;

   /* display: grid and place-items:center combo will place the content right in the center. display:block and align-content: center is another way of doing the same thing (although this latter option is Chromium only at this point (1/12/24) */
   display: grid;
   place-items: center;
   /* We’ve got a set width and height for the alert. Tread really carefully when applying set width and height values in CSS though. We’re almost always going to have the text, “Last few spots” in our alert element, but even with that knowledge, this feels slightly risky. I guess the message is only use this sort of element with fixed dimension if you know you have absolute control, long term. */
   width: 10em;
   height: 10em;
   background: var(--color-light);
   color: var(--color-dark);
   text-transform: uppercase;
   letter-spacing: var(--uppercase-kerning);
   font-size: var(--size-step-000);
   font-weight: bold;
   position: absolute;
   /* A triangle (using the Clippy site (https://bennettfeely.com/clippy/), with a z-index: 1 so that it sits above everything in this current stacking context (https://web.dev/learn/css/z-index?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fcss%23article-https%3A%2F%2Fweb.dev%2Flearn%2Fcss%2Fz-index) */
   clip-path: polygon(0 0, 100% 0, 100% 100%);
   z-index: 1;
   /* To get a negative value for a variable, multiply it by -1. When looking for stroke-width, we're adding 1px as a fallback just in case. */
   top: calc(var(--stroke-width, 1px) * -1);
   right: calc(var(--stroke-width, 1px) * -1);
}

/* Rotating the text and also shifting it up by -1lh - this ensures the text is visible once the clip runs through the middle of the box */

.card__alert > span {
   transform: rotate(45deg) translateY(-1lh);
   line-height: var(--leading-flat);
}

.card picture {
   display: block;
   aspect-ratio: 1/1;
   overflow: hidden;
}

/* Make the image square with apsect ratio. object-fit:cover is used to ensure the image isn't squashed if it doesn't happen to be square at source, then tidying it up with a bit of border-radius from our global variables */

.card picture > img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   object-position: 50% 50%;
   border-radius: var(--radius-m);
}

/* Add a touch more space to the button with a flow-space adjustment */

.card .button {
   --flow-space: var(--space-l);
}

/* If something has a href attribute that is overed in the card element */

.card:has([href]:hover) {
   background: rgb(from var(--color-light) r g b / 5%);
   transition: background var(--transition-fade);
}

.hover-anim img {
   display: block;
   width: 100%;
   height: auto;
   cursor: pointer;
   transition: opacity 0.2s ease;
}

.closer {
   background: var(--color-primary);
   color: var(--color-dark);
   /* The clamp() function is trying to generate a top padding size that is:
      - At least 10rem (approx 150px based on type scale)
      - Ideally 50vb (50% of the height of the viewport)
      - At most, 20rem (roughly 360px based on our type scale)
   */
   padding-block: clamp(10rem, 50vb, 20rem) var(--gutter);
   font-weight: var(--font-bold);
}

/* For the <svg>, we unset background and padding to override the global CSS */

.closer svg[role='img'][width][height] {
   width: 100%;
   height: auto;
   background: unset;
   padding: unset;
}

.container-fill-text {
  --container-fill-text-captured-length: initial;

  display: flex;
  container-type: inline-size;

  /* Overrides a global style on headings */
  max-width: unset;

  line-height: var(--leading-micro);
  font-weight: var(--font-black);
  }

.container-fill-text__reference {
  visibility: hidden;
  }

.container-fill-text__container {
  --container-fill-text-captured-length: 100cqi;
  --container-fill-text-available-space: var(--container-fill-text-captured-length);

  flex-grow: 1;
  container-type: inline-size;
  }

.container-fill-text__display {
  --container-fill-text-captured-length: 100cqi;
  --container-fill-text-ratio: tan(
    atan2(
        var(--container-fill-text-available-space),
        var(--container-fill-text-available-space) -
        var(--container-fill-text-captured-length)
    )
  );

  display: block;

  /* AKA, width */
  inline-size: var(--container-fill-text-available-space);

  /* Apply the calculated size with sensible fallbacks for no support */
  font-size: var(--size-step-11);

  /* The initial fallback value for no support now becomes our minimum clamp value */
  font-size: clamp(
    var(--size-step-11),
    1em * var(--container-fill-text-ratio),
    var(--container-fill-text-max-font-size, infinity * 1px)
  );
  }

@property --container-fill-text-captured-length {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
  }

/* We make the corner element square with the aspect ratio, and importantly making the block a relative parent. We define a height as we're using aspect-ratio, and that height is configurable with --corner-size, which defaults to a sensible 100px. This means that any element that has a corner as a child element can control the size. If a user's browser doesn't support aspect-ratio, they won't see anything */

.corner {
   display: block;
   position: relative;
   aspect-ratio: 1/1;
   height: var(--corner-size, 100px);
}

/* For the pseudo-elements (::before and ::after), we're specifying content so that they actually render and making them block elements as they are inline by default. We also make them absolutely positioned to fill the relative parent with inset. The transition is addeded in case a parent wants to animate them. */

.corner::before, .corner::after {
   content: '';
   display: block;
   position: absolute;
   inset: 0;
   transition: clip-path var(--transition-bounce);
}

/* For both pseudo elements we have made them configurable colour-wise. By default they're black and white. Then the clip path uses a bit of maths to work out the polygon value, whic can be created visually by using Clippy (https://bennettfeely.com/clippy/). */

/* The large clip path */

.corner::before {
   background: var(--corner-primary-color, var(--color-light));
   clip-path: polygon(100% 0, var(--corner-offset, 30%) 0, 100% 100%);
}

/* The small clip path */

.corner::after {
   background: var(--corner-secondary-color, var(--color-dark));
   clip-path: polygon(var(--corner-offset, 30%) 0, 0 0, 100% 100%);
}

/* The corner component is already highly configurable, but it'll be useful to be able to change the state of it, rather than every context it appears in having to repeat itself */

/* Docked state suitable for the top-right corner of its parent */

.corner[data-corner-docked] {
   position: absolute;
   top: 0;
   right: 0;
}

/* For the colour theme variant, it’s a case of changing --corner-secondary-color and job done. */

.corner[data-corner-theme='primary'] {
   --corner-secondary-color: var(--color-primary);
}

/* Just a quick note here too, notice how we’ve got a difference in how we’re presenting our exceptions? We have data-corner-docked and data-corner-theme='primary'. The first one is treated like a boolean (true/false), much like HTML attributes like checked and disabled. It can only ever be on or off. The second, could be many values over time, so it is a string.

It can only ever be one value at a time — this is why I like exceptions over BEM modifiers. For example — by using a string, the data-corner-theme attribute has lots of long-term flexibility which isn’t needed for data-corner-docked. */

/* We override the --grid-placement var to auto-fit from auto-fill, so instead of creating extra columms to fill the space, the grid will try to fill the space instead */

.gallery {
   --grid-placement: auto-fit;
   --flow-space: var(--space-m);
}

.gallery p {
   margin: 0;
}

.gallery img {
   aspect-ratio: 1/1;
   object-fit: cover;
   border-radius: var(--radius-m);
}

.gallery__byline {
   font-size: var(--size-step-00);
   font-weight: var(--font-bold);
   text-transform: uppercase;
   letter-spacing: var(--uppercase-kerning);
}

/* We're controlling repel by defining --gutter to be smaller and setting --repel-vertical-alignment on the baseline. With a little bit of bottom padding and border the core block is done */

.headline {
   --repel-vertical-alignment: baseline;
   --gutter: var(--space-s);

   padding-block-end: var(--space-2xl);
   border-block-end: var(--stroke);
}

/* The font-size is bumped up to step-10 because in Figma it was 111.45. Because step-10 is large, we are using leading-flat (which brings the line-height down to 1). If the typeface has longer ascenders or descenders it may need to be bumped to a line height of 1.1 */

.headline__heading {
   font-size: var(--size-step-10);
   line-height: var(--leading-flat);
   font-weight: var(--font-normal);
   text-transform: uppercase;
}

/* Main layout grid */

.smart-layout {
  --cols: 1;
  --rows: 3;
  background-color: var(--color-dark);
  border: 1px solid var(--color-light);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: var(--space-xs);
}

@media (min-width: 640px) {

.smart-layout {
    --cols: 4;
    --rows: 2;
}
  }

@media (min-width: 768px) {

.smart-layout {
    --cols: 6;
    --rows: 1;
}
  }

@media (min-width: 1024px) {

.smart-layout {
    --cols: 8;
    --rows: 3;
}
  }

.smart-layout-item {
  container-name: smart-layout-item;
  /* This allows selectively applying CSS rules to the container's children based on inline-size */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}

/* Quotes */

.smart-layout-item:nth-child(1) {
  background-color: papayawhip;
  grid-column: 1 / -1;
  grid-row: 2;
}

@media (min-width: 640px) {

.smart-layout-item:nth-child(1) {
    grid-column: 4 / 5;
    grid-row: 1;
}
  }

@media(min-width: 768px) {

.smart-layout-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
}
  }

@media (min-width: 1024px) {

.smart-layout-item:nth-child(1) {
    grid-column: 1 / 5;
    grid-row: 2;
}
  }

@media (min-width: 1280px) {

.smart-layout-item:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 2;
}
  }

/* Featured */

.smart-layout-item:nth-child(2) {
  background-color: #D9F99D;
  grid-column: 1 / -1;
  grid-row: 1;
}

@media (min-width: 640px) {

.smart-layout-item:nth-child(2) {
    grid-column: 1 / 4;
}
  }

@media(min-width: 768px) {

.smart-layout-item:nth-child(2) {
    grid-column: 3 / 5;
}
  }

@media (min-width: 1024px) {

.smart-layout-item:nth-child(2) {
    grid-column: 1 / -1;
}
  }

/* Misc */

.smart-layout-item:nth-child(3) {
  background-color: #BAE6FD;
  grid-column: 1 / -1;
  grid-row: 3;
}

@media (min-width: 640px) {

.smart-layout-item:nth-child(3) {
    grid-row: 2;
}
  }

@media(min-width: 768px) {

.smart-layout-item:nth-child(3) {
    grid-column: 5 / 7;
    grid-row: 1;
}
  }

@media (min-width: 1024px) {

.smart-layout-item:nth-child(3) {
    grid-column: 5 / 9;
    grid-row: 2;
}
  }

@media (min-width: 1280px) {

.smart-layout-item:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
}
  }

/* 1) When a smart-layout-item contains 3+ quote cards... */

.smart-layout-item:has(> .smart-card[data-type="quote"]:nth-of-type(3)) {
  /* Make this section span full grid width, regardless of previous placement */
  grid-column: 1 / -1;

  /* Switch the wrapper to a responsive horizontal grid of cards */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr); /* card width floor */
  gap: var(--space-xs);
  overflow-x: auto;          /* graceful horizontal scroll if needed */
  scroll-snap-type: x proximity; /* optional nicety */
  padding-inline: var(--space-xs);
}

/* 2) Make each quote card snap nicely and behave like a tile */

.smart-layout-item:has(> .smart-card[data-type="quote"]:nth-of-type(3))
> .smart-card[data-type="quote"] {
  scroll-snap-align: start;
  min-height: 200px; /* keep your card rhythm */
}

/* 3) At wider viewports/containers, you may prefer wrapping rather than scrolling */

@media (min-width: 1024px) {
  .smart-layout-item:has(> .smart-card[data-type="quote"]:nth-of-type(3)) {
    grid-auto-flow: row; /* turn off the forced horizontal flow */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    overflow-x: visible;
  }
}

/* 4) Optional: scope to container width instead of viewport */

@container smart-layout-item (min-width: 700px) {
  .smart-layout-item:has(> .smart-card[data-type="quote"]:nth-of-type(3)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    overflow-x: visible;
  }
}

/* Card */

.smart-card {
  border: 1px solid var(--color-dark);
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

@container smart-layout-item (min-width: 500px) {

.smart-card {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
  }

.smart-card[data-type="quote"] p {
  font-size: var(--font-step-00);
}

@container smart-layout-item (min-width: 300px) {
  .smart-layout-item:has(> .smart-card[data-type="quote"]:nth-of-type(4):last-of-type)
  > .smart-card[data-type="quote"]:nth-of-type(n+3) {
    flex-direction: column;
  }
}

/* Button - corner shapes */

.bevel {
  border: 1px solid #aaa;

  /* Relative positioning to accommodate different text directions */
  padding-inline-end: 1rem;
}

@supports (corner-shape: bevel) {
  .bevel {
    /* Only apply the advanced corner styling when the browser supports it */
    corner-shape: bevel;
    border-bottom-right-radius: 1rem;
    /* border-radius: 2rem; */
  }
}

/* Main layout grid */

.layout {
  --cols: 1;
  color: var(--color-dark);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  background-color: gray;
  /* Stack the zones first */
  grid-template-areas:
    "featureWrapper"
    "quoteWrapper"
    "recentWrapper";
    /* If bigger than 600px width, use extra space */
}

@media (min-width: 600px) {

.layout {
    --cols: 4;
    grid-template-areas:
      "featureWrapper featureWrapper featureWrapper featureWrapper"
      "quoteWrapper quoteWrapper quoteWrapper quoteWrapper"
      "recentWrapper recentWrapper recentWrapper recentWrapper";
}
  }

/* If no quote zone is specified in the HTML, use the full width of the container for the remaining zones */

.layout:not(:has(.quoteWrapper)) {
  --cols: 3;
  grid-template-areas:
    "featureWrapper featureWrapper featureWrapper"
    "recentWrapper recentWrapper recentWrapper"
}

/* If .layout has AT LEAST 3 .quote children */

.layout:has(.quoteWrapper:nth-last-child(n + 3)) {
  --cols: 4;
  grid-template-areas:
  "featureWrapper featureWrapper featureWrapper featureWrapper"
  "quoteWrapper quoteWrapper"
  "quoteWrapper quoteWrapper"
  "recentWrapper recentWrapper recentWrapper recentWrapper";
}

.featureWrapper {
  grid-area: featureWrapper;
}

.quoteWrapper {
  grid-area: quoteWrapper;
}

.recentWrapper {
  grid-area: recentWrapper;
}

.featureWrapper, .quoteWrapper, .recentWrapper {
  container-type: inline-size;
}

.cardWrapper {
  container-name: cardWrapper;
  /* This allows selectively applying CSS rules to the container's children based on inline-size */
  container-type: inline-size;
  border-radius: calc(var(--space-s)/2);
}

.cardArticle {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  /* If the parent container (inline-size) is wider than 400px change to horizontal display */
}

@container (min-width: 400px) {

.cardArticle {
    flex-direction: row;
    gap: 0.5rem;
}
  }

.quote {
  /* grid-area: quote; */
  background-color: rgba(187, 247, 208, 1);
  border: 1px solid rgba(20, 83, 45, 1);
}

/* TODO: Check this more closely */

/* :has(.quote:nth-last-child(n+3)) {
  @container (min-width: 200px) {
    display: flex;
  }
} */

.quote blockquote {
  color: var(--color-dark);
}

.feature {
  grid-area: feature;
  background-color: rgba(250, 204, 21, 1);
  border: 1px solid rgba(113, 63, 18, 1);
}

/* Make a larger sized feature if there is suitable space */

@container (min-width: 500px) {

.feature .cardArticle {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
  }

.recent {
  grid-area: recent;
  background-color: rgba(165, 243, 252, 1);
  border: 1px solid rgba(22, 78, 99, 1);
}

/* If one item & zone > 560px -> Set img width to 30% of its parent container, .cardArticle */

/* body:has(.cardArticle:only-child) {
  @container (min-width: 560px) {
    .cardThumb {
      flex: 0 0 30%;
    }
  }
} */

.cardThumb {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: clamp(3.75rem, 2.218rem + 12.9cqw, 6.25rem);
  aspect-ratio: 16/9;
  border: 1px solid var(--color-dark);
}

.feature .cardThumb {
  background-image: url(https://placehold.co/200x200?text=Feature&font=roboto);
}

.quote .cardThumb {
  background-image: url(https://placehold.co/200x200?text=Quote&font=roboto);
}

.recent .cardThumb {
  background-image: url(https://placehold.co/200x200?text=Recent&font=roboto);
}

/* This creates a single column with a three row grid layout. It also places the skip link in the centre and allows our image to span the entire layout. Then we add a border-radius along with an overflow:hidden which will act as a mask for the image that spanes the entire hero element. */

.hero {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr minmax(0,auto) 1fr;
   justify-items: center;
   position: relative;
   border-radius: var(--radius-m);
   overflow: hidden;
}

/* Referencing grid lines rather than columns or rows - 3 row layout = 4 lines */

.hero picture {
   grid-column: 1;
   grid-row: 1/4;
   display: block;
}

.hero picture,
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Using a subtle linear gradient as an overlay to guarantee a certain level of contrast for our skip link. We use a ::before pseudo-element, absolutely position it in all the corners with inset, then create a 50% opacity black to transparent gradient. */

.hero::before {
   content: '';
   display: block;
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgb(0 0 0/ 0%) 0%, rgb(0 0 0 / 50%) 100%);
}

/* Shrink the flow space a touch. Define --skip-link-color because we need to colour our text , but also the icon's circle consistently. We position it on our hero grid so it's placed on grid-row: 2. We limit the width of it so that the text wraps nicely by applying max-width: 12ch, which keeps our icon container, contained. */

.hero__skip-link {
   --skip-link-color: var(--color-primary);
   --flow-space: var(--space-xs);

   grid-column: 1;
   grid-row: 2;
   z-index: 1;
   font-weight: var(--font-medium);
   font-size: var(--size-step-8);
   /* CUSTOM BEGIN */
   -webkit-text-stroke: 4px rgb(255, 200, 97);
   -webkit-text-fill-color: currentColor;
   paint-order: stroke fill;
   letter-spacing: 0.15rem;
   text-transform: uppercase;
   /* CUSTOM END */
   text-align: center;
   text-decoration: none;
   line-height: var(--leading-fine);
   color: var(--skip-link-color);
   max-width: 12ch;
}

/* We use the same place-items: center grid trick to stick the icon in the middle of our square, which we create with an aspect-ratio: 1/1 and then turn it into a circle with border-radius: 50% */

.hero__skip-link-icon {
   display: grid;
   place-items: center;
   margin-inline: auto;
   font-size: var(--size-step-2);
   /* We use max to pick the largest value between 50px and step seven on our fluid type scale */
   height: max(50px, var(--size-step-7));
   aspect-ratio: 1/1;
   background: var(--skip-link-color);
   /* We can't use currentColor here as the icon would vanish as soon as we apply the color value, it would also become currentColor which would cause the icon to vanish */
   color: var(--color-dark);
   border-radius: 50%;
}

/* We make label a block element so that --flow-space takes effect. It was inline, being a <span>, so vertical margin would be ignored by the browser */

.hero__skip-link-label {
   display: block;
}

/* A small animation when the skip link is hovered. Adding a transition at the point of hover in this animation allows it to snap-back into place - a top tip for making UIs feel nice and snappy */

.hero__skip-link:hover .hero__skip-link-icon {
   transform: translateY(5%);
   transition: transform var(--transition-bounce);
}

/*
   Setting --indent-color to var(--color-dark) isn’t a mistake. Let me explain:

   Because the yellow indent only covers half of the screen, we’re going to make inspo__stripe indent an absolutely positioned element. We also need the content to be indented with an invisible indent, so we’ve applied our utility to the base inspo element.
*/

.inspo {
   --region-space: var(--space-2xl-4xl) 0;
   --indent-color: var(--color-dark);
}

/*
   We’re not declaring a font size because our container fill text is in place already. That wil handle the sizing for us. The reason we add z-index: 1 is because the text lines come before the image in the markup, so we can’t lean into natural z-index or the text will end up behind the image.
*/

.inspo__heading {
   font-weight: var(--font-black);
   line-height: var(--leading-micro);
   text-wrap: balance;
   z-index: 1;
}

/*
   A 3 row and 2 column grid. The reason it is two columns is because we want that bit of space on the right for the image.

   In terms of the rows, we’re doing a little magic trick - by setting the font-size on the grid. We can now use relative units to roughly size the rows based on the largest value in our type scale, using cap units. It also means that if the container fill text were to fail, the headings will inherit step 12 on the typography scale. We want the text to bleed into the image, so we can be a bit loosey-goosey here.
*/

.inspo__grid {
   display: grid;
   font-size: var(--size-step-12);
   /* The minmax(1cap, auto) sizing for the text rows allow the text to wrap on smaller viewports without messing up the inspo and as well as whatever follows it in a page flow. */
   grid-template-rows: minmax(1cap, auto) max-content minmax(1cap, auto);
   grid-template-columns: 1fr;
}

/*
   Using the same trick as before, we’re using the Figma asset size as our aspect ratio. It’s important to remind you that this is a <div> element that contains an <img>. We’ve got that setup because if the grid row was an <img>, the aspect-ratio would be ignored and the <img>, stretched.
*/

.inspo__img {
   aspect-ratio: 1240/620;
   grid-row: 2;
   grid-column: 1;
   border-radius: var(--radius-m);
   overflow: hidden;
}

.inspo__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/*
   A little cap adjustment has been added to set our type nicely over the image in each case
*/

.inspo__heading:first-of-type {
   grid-row: 1;
   transform: translateY(0.3cap);
}

.inspo__heading:last-of-type {
   grid-row: 3;
   transform: translateY(-0.5cap);
}

/*
   The little stripe now. The first thing we do is set the --indent-color to be our primary, yellow colour. Then, it’s a case of making it a 40% height block with the lighter dark background and positioning it at the bottom.

   We use calc() on the width and left values. For the width, we add --indent-size to 100% and for the left, we create a negative --indent-size to pull the stripe flush with the side. We need to do this because our base inspo also has an indent.

   Lastly, we set z-index: 0 because we want the stripe to sit behind everything. Let’s make sure the content sits above with the next bit of CSS. */

.inspo__stripe {
   --indent-color: var(--color-primary);

   background: var(--color-dark-glare);
   width: calc(100% + var(--indent-size));
   height: 40%;
   position: absolute;
   bottom: 0;
   left: calc(var(--indent-size) * -1);
   z-index: 0;
}

/*
   The first part sits our content on top of the stripe. All of the content is in the .wrapper which is also a relative parent. This is the thing with z-index: as long as you keep a track of where you are with it, you don’t need bonkers numbers!

   We are undoing the max-width and padding of the wrapper and that’s us, nearly done.
*/

.inspo .wrapper {
   z-index: 1;
   /* TODO: Ask Andy about this - it makes the inspo pattern full-width but this isn't represented in the same way on https://bloom-barista.academy/ so for now it is commented out */
   /* max-width: unset;
   padding: 0; */
}

/* We set the gap so that it is column-only. If it was changed to allow wrapping, there'd be a big old gap between the icon and text */

.labelled-icon {
   display: flex;
   align-items: baseline;
   line-height: var(--leading-fine);
   gap: 0 var(--space-xs);
}

/* The icon is straightforward because it is the same size as text allowing us to use 1lh as the height and then put it down a smidge to sit nicely, visually, using an optical adjustment */

.labelled-icon svg {
   height: 1lh;
   transform: translateY(
      0.5ex
   );
}

/* As I see it, this is a flexible component that should inherit colour - so we apply a utility class:

<p class="labelled-icon text-light text-step-2">
   ...
</p>

This is also detailed in the pattern library
*/

/* Set up a two column and four row layout. The 23% and 1.5vi values are still a bit smelly magic numbers, but it's those that create the illusion of "Bloom" being one SVG. */

.masthead {
   display: grid;
   grid-template-columns: 1fr 23.35%;
   gap: 0 1.5vi;
   grid-template-rows: repeat(4, auto);
}

/* Remove the global styles for sizing in favour or 100% width and auto height combo */

.masthead svg {
   width: 100%;
   height: auto;
}

/* Positioning the SVG logo parts on the grid layout */

.masthead__logo-left {
   grid-row: 1;
   grid-column: 1;
   align-self: start;
}

/* Positioning the SVG logo parts on the grid layout */

.masthead__logo-right {
   grid-row: 1;
   grid-column: 2;
   align-self:start;
}

/* Positioning the text content in terms of grid positioning. After finding the actual design tokens to work with in Figma, we can add them after matching them to our pattern library documentation. */

.masthead__heading {
   grid-row: 2;
   grid-column: 1/3;
   font-size: var(--size-step-6);
   font-weight: var(--font-medium);
   margin-block-start: var(--space-m);
   line-height: var(--leading-flat);
}

.masthead__location {
   grid-row: 3;
   grid-column: 1/3;
   margin-block-start: var(--space-2xs);
}

.masthead__meta {
   grid-row: 4;
   grid-column: 1/3;
   text-align: right;
   margin-block-start: var(--space-m);
}

.masthead__location, .masthead__meta {
   text-transform: uppercase;
   font-size: var(--size-step-00);
   font-weight: var(--font-bold);
}

/* Using Tailwind's screen() for the media query so it uses our design tokens */

@media (min-width: 940px) {
   .masthead {
      grid-template-rows: repeat(3, auto);
   }
   .masthead__heading {
      grid-row: 2;
      grid-column: 2;
   }
   .masthead__meta {
    grid-row: 3;
    grid-column: 2;
    text-align: left;
    margin-block-start: var(--space-s);
  }
   .masthead__location {
      grid-row: 3;
      grid-column: 1;
      margin-block-start: var(--space-s);
   }
}

/* Layouts that are completely controlled by the layout compositions, flow and cluster. All we do in this component is configure their spacing and the visual appearance of links. */

/* We set flow-space to a medium value on the space scale and then given --gutter two values - medium for row space and large for coulmn space */

.nav {
   --flow-space: var(--space-m);
   --gutter: var(--space-m) var(--space-l);

   line-height: var(--leading-flat);
}

/* The default behaviour for links is to have an underline. We remove that only if the item isn't being hovered or is the current active page. aria-current='page' is the attribute which communicates the current page to assistive technology. It’s a useful hook to visually communicate that with a persistent underline. */

.nav a:not(:hover):not([aria-current='page']) {
   text-decoration: none;
}

.rss__subscribe {
   font-size: var(--size-step-2);
   text-align: center;
}

.rss__subscribe a {
   text-decoration: none;
   color: currentColor;
}

.prose {
   --flow-space: var(--space-l);
}

/* This prevents large text from blowing out and blowing up the design on large headings on small screens, by allowing hyphens to do the heavy lifting but where a long word might be used, it falls back to overflow-wrap: anywhere will allow the text to wrap */

.prose :is(h1,h2,h3) {
   overflow-wrap: anywhere;
   hyphens: auto;
}

/* Set up quite a short length on paragraphs, lists, figcaptions and blockquotes, while also encouraging the browser to wrap the text nicely */

.prose :is(p, li, dl, figcaption, blockquote) {
   max-width: 60ch;
   text-wrap: pretty;
}

/* Trimming away the unwanted extra space of the textbox around the typeface - a progressive enhancement - https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/ */

@supports (text-box: cap alphabetic) {
	.prose :is(h2, h3, h4, p, ul, ol, li, blockquote, figure) {
	  --flow-space: var(--space-l);

	  text-box: cap alphabetic
	}
}

/* Handy block - reduces the space of anything that follows a heading, so that the content looks like part of a section. This works by first looking for headings one through four, then targeting any direct sibling (+ * combinators) that don't have a class (:not([class]), then when selected, we reduce the space by stepping down the scale. */

/* Using a combinator (+ *) to add space before and after figures and tables, then for headings wit no class (:not([class])), we're upping the scale to again make headings feel like sections of content */

.prose :is(h1,h2,h3,h4) + *:not([class]) {
   --flow-space: var(--space-m)
}

/* For lists and sub-lists (li > is(ol, ul)), we're driving down the --flow-space to make them a bit higher. */

.prose :is(ul ,ol):not([class]) li + li,
 .prose :is(ul, ol):not([class]) li >  :is(ol, ul) {
   --flow-space: var(--space-xs);
 }

/* Adding more space around the <hr> element (remember its margin-block value is looking for --flow-space) */

.prose hr {
   --flow-space: var(--space-2xl);
 }

/* Adding a little border that creates a little frame to ensure that the image background does not blend in with the background colour - we did the same with SVGs. We don't do this globally though, as then we'd need to remove the border in other CSS blocks, which is an unnecessary faff. */

.prose :is(img, picture, video) {
   border: var(--stroke-solid);
 }

/* Adding as media query for medium veiwports (as defined in src/design-tokens/viewports.json). Tailwind steps in here with its screen() function, which loads our design token for the viewport. This is in keeping with using media queries for small adjustments, and here we're undoing the text wrapping stuff from above, with unset */

@media (min-width: 760px) {
   .prose :is(h1,h2,h3) {
      overflow-wrap: unset;
      hyphens: unset;
   }
}

/* Getting the spacing right by increasing --guter and also, setting a whopping large --flow-space. There is no need to remove list styles or anything like that as the CSS reset we're using has already done it for us because we added role="list" to the rolodex__list item, which also has flow composition attached */

.rolodex {
   --flow-space: var(--space-3xl);
   --gutter: var(--space-l);
}

/* There's at least 3 different colour themes with this pattern, so just like with buttons, we're making state changes configurable with custom properties. We've defined a text colour, a background colour and a clip colour */

.rolodex__item {
   --rolodex-text: var(--color-dark);
   --rolodex-bg: var(--color-light);
   --rolodex-clip: var(--rolodex-triangle-color, var(--color-dark));

   padding: var(--space-l);
   background: var(--rolodex-bg);
   color: var(--rolodex-text);
   text-decoration: none;
   position: relative;
}

/* The little triangle clip is a pseudo element of the rolodex__item. We make it square with aspect-ratio and the width is clamp()-powered. The logic is:
   1. Be at least 2rem
   2. Try to make yourself 10vi (10% of viewport width)
   3. At most, be 7.5rem

   This allows the clip to scale much like the text and spacing.

   For the clip-path, we're making a triangle like we did for the card pattern. This is also using the --rolodex-clip custom property for the background colour too.

   Finally, we push it out to the right with absolute positioning and prevent it from getting in the way of taps and clicks with pointer-events: none;
*/

.rolodex__item::before {
   content: '';
   width: clamp(2rem, 10vi, 7.5rem);
   aspect-ratio: 1/1;
   pointer-events: none;
   clip-path: polygon(0 0, 100% 0, 100% 100%);
   background: var(--rolodex-clip);
   position: absolute;
   top: 0;
   right: 0;
}

/* We know the rolodex__item is an <a> element, so it's safe to attach a hover like we have here. */

.rolodex__item:hover {
   filter: brightness(105%);
}

/* Taking the values from the Figma and matching them to the pattern library documentation for fluid typography and space. The heading is the smaller text and the number is an absolute whopper of a number  */

.rolodex__heading {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: var(--space-l);
   margin: 0;
   font-weight: var(--font-black);
   font-size: var(--size-step-4);
}

.rolodex__number {
   font-size: var(--size-step-10);
}

/* Using an aspect ratio of the (rounded) pixel value of the image in the artwork will give us the correct aspect ratio for scaling responsively.

Because we're forcing the aspect ratio, it's a good idea to apply object-fit: cover to avoid stretching. Then we also add border radius to finish.
*/

.rolodex img {
   aspect-ratio: 787/524;
   object-fit: cover;
   border-radius: var(--radius-m);
}

/* Add a couple of theme exceptions */

.rolodex__item[data-rolodex-theme='primary'] {
   --rolodex-text: var(--color-dark);
   --rolodex-bg: var(--color-primary);
}

.rolodex__item[data-rolodex-theme='dark'] {
   --rolodex-text: var(--color-light);
   --rolodex-bg: var(--color-dark-glare);
}

/* Add a sticky position treatment only for viewports that are large and up.
   To get sticky to work, it is necessary to apply either a top or bottom for vertical scrolling and left or right for horizontal scrolling, lest the browser doesn't know where to 'stick' them
*/

@media (min-width: 940px) {
   .rolodex__list li {
      position: sticky;
      top: var(--gutter);
   }
}

.site-foot {
   background: var(--color-dark-glare);
   color: var(--color-orange-500);
   line-height: var(--leading-flat);
   padding-block: var(--space-m);
   font-size: var(--size-step-00);
}

/* Removing margin from everything that's in the wrapper element. Although its only a couple of <p> elements now, this covers us if anything else finds itself in the footer in the future
   TODO:
*/

.site-foot .wrapper * {
   margin: 0;
}

.site-foot .madeInAustralia {
   /* font-size: var(--size-step-000); */
   text-transform: uppercase;
   display: grid;
   text-align: center;
}

.madeInAustralia hr {
   border: 1px solid #f97316;
}

.made {
   font-size: 10px;
   letter-spacing: 0.3rem;
   font-weight: var(--font-regular);
   padding-top: 0.5rem;
}

.au {
   font-size: var(--size-step-000);
   text-transform: uppercase;
   font-weight: var(--font-black);
   letter-spacing: 0.1rem;
}

.madeInAustralia img {
   justify-self: center;
   width: 50px;

}

/* Setting some design tokens - note that the padding is only set to apply at the top, not the bottom */

.site-head {
   text-transform: uppercase;
   letter-spacing: var(--uppercase-kerning);
   line-height: var(--leading-flat);
   font-size: var(--size-step-00);
   font-weight: var(--font-bold);
   padding-block-start: var(--space-m);
}

/* The gutter is only adjusted on the repel layout because we don't want the space of the wrapper to be affected */

.site-head .repel {
   --gutter: var(--space-m);
}

/* The brand element is still a container, but because we're using the repel layout, it doesn't apply a flex-basis like the others, so as soon as we set container-type: inline-size, it will size itself with min-content, effectively putting each word on a new line. By setting a clamp-based flex-basis, we're setting setting sensible lock values (25ch and 50rem) while saying "it would be ideal if you're 60%". The flex-grow: 1 line says "where there is space, grow" */

.site-head__brand {
   container-type: inline-size;
   container-name: site-head-brand;
   flex-basis: clamp(25ch, 60%, 50rem);
   flex-grow: 1;
}

/* Only show an underline on hover */

.site-head__brand a:not(:hover) {
   text-decoration: none;
}

/* The <hr> uses --flow-space for margin from the global styles, so we're going to match that top padding from .site-head on the <hr>'s margin. We've defined a --hr-stroke variable to be solid and yellow. */

.site-head hr {
   --flow-space: var(--space-m);
   --hr-stroke: var(--stroke-width) solid var(--color-primary);
}

/* The container query that determines the brand element is at least 68vi (68% of the viewport) wide and less than 50rem wide. If it is true, we style the child <a> element white. Remember we cannot apply styles to containers in a container query, so we have to target the <a> */

@container site-head-brand (68vi <=width <=50rem) {
   .site-head__brand a {
      color: var(--color-light);
   }
}

.container-tag-list {
   margin: var(--space-l) 0;
}

.tag-list {
   background: white;
   background: var(--brand);
   /* fallback */
   border-top: 3px solid var(--accent);
   /* border-top: 3px solid var(--tertiary); */

   border-bottom: 3px solid #fff;
   border-bottom: 3px solid var(--accent);
   /* border-bottom: 3px solid var(--quarternary); */

   border-left: none;
   border-right: none;

   display: block;
   padding: 1rem 0;
   margin: var(--space-2xl) 0;

   text-transform: uppercase;
   font-weight: var(--font-medium);
   font-size: var(--size-step-00);
}

li.tag-list-title {
   color: var(--accent);
   font-weight: var(--font-black);
   margin-left: 1rem;
}

.tag-list li {
   padding: var(--space-xs) 0;
}

.tag-list li a {
   color: var(--accent);
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start): How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment (center): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/blog/my-favourite-3-lines-of-css/ 
*/

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

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-l));
}

/* A split 50/50 layout */

.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--repel-vertical-alignment (center): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
  flex-direction: row-reverse;
}

.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment (flex-start): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is ful width */

.switcher > :nth-child(n + 3) {
  flex-basis: 100%;
}

/*
WRAPPER COMPOSITION
A common wrapper/container
*/

.wrapper {
  margin-inline: auto;
  max-width: var(--wrapper-max-width, 1360px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

/* We're looking for an --indent-size variable which falls back to a custom spacing pair, starting off as the extra small size and growing to the large size and the viewport increase in size - so there's a thin indent on smaller viewports and a chunky one on large viewports.
   For the colour, we're looking for an --indent-color variable which falls back to currentColor. It means that wherever we use it, we will probably need to set a colour.
*/

.indent {
   border-inline-start: var(--indent-size, var(--space-xs-l)) solid var(--indent-color, currentColor);
}

/*
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-m));
  position: relative;
}

/*
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.mb-xl {
  margin-bottom: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
}

.mt-2xl-4xl {
  margin-top: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
}

.mt-xs {
  margin-top: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.max-w-\[25ch\] {
  max-width: 25ch;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.bg-dark {
  background-color: oklch(14.69% 0.0041 49.25);
}

.bg-dark-glare {
  background-color: #1C1917;
}

.bg-primary {
  background-color: #D97706;
}

.p-\[3px\] {
  padding: 3px;
}

.p-m {
  padding: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
}

.py-m {
  padding-top: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
  padding-bottom: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
}

.pt-2xl {
  padding-top: clamp(3.5rem, 3.34rem + 0.78vw, 4rem);
}

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

.text-step-1 {
  font-size: clamp(1.055rem, 0.96rem + 0.46vw, 1.35rem);
}

.text-step-10 {
  font-size: clamp(3.03125rem, 1.76rem + 6.17vw, 6.965625rem);
}

.text-step-2 {
  font-size: clamp(1.18625rem, 1.05rem + 0.68vw, 1.62rem);
}

.text-step-4 {
  font-size: clamp(1.501875rem, 1.23rem + 1.30vw, 2.3325rem);
}

.text-step-9 {
  font-size: clamp(2.70625rem, 1.70rem + 4.86vw, 5.805rem);
}

.uppercase {
  text-transform: uppercase;
}

.leading-\[0\.75\] {
  line-height: 0.75;
}

.leading-\[1\] {
  line-height: 1;
}

.text-dark {
  color: oklch(14.69% 0.0041 49.25);
}

.text-light {
  color: #FAFAF9;
}

.text-primary {
  color: #D97706;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.flow-space-xs {
  --flow-space: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
}

.flow-space-m {
  --flow-space: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
}

.flow-space-l {
  --flow-space: clamp(2.1875rem, 2.09rem + 0.49vw, 2.5rem);
}

.flow-space-xl {
  --flow-space: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
}

.flow-space-3xl {
  --flow-space: clamp(4.375rem, 4.17rem + 0.98vw, 5rem);
}

.flow-space-2xl-4xl {
  --flow-space: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
}

.region-space-2xl-4xl {
  --region-space: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
}

.gutter-xs {
  --gutter: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
}

.gutter-s {
  --gutter: clamp(0.875rem, 0.83rem + 0.20vw, 1rem);
}

.indent-color-primary {
  --indent-color: #D97706;
}

@media (min-width: 760px) {

  .md\:text-step-10 {
    font-size: clamp(3.03125rem, 1.76rem + 6.17vw, 6.965625rem);
  }

  .md\:text-step-11 {
    font-size: clamp(3.78875rem, 1.63rem + 10.45vw, 10.448125rem);
  }
}

@media (min-width: 1350px) {

  .xl\:text-step-11 {
    font-size: clamp(3.78875rem, 1.63rem + 10.45vw, 10.448125rem);
  }

  .xl\:text-step-12 {
    font-size: clamp(3.78875rem, 0.36rem + 16.61vw, 14.375rem);
  }
}