:where(:root) {
  --brand-color-light: oklch(86.65% 0.175 94.53);
  --brand-color-dark: oklch(42.74% 0.159 260.68);
  --theme-color-light: oklch(86.65% 0.175 94.53);
  --theme-color-dark: oklch(42.74% 0.159 260.68);
}

:where(:root) {
  --color-white: White;
  --color-black: Black;
  --color-gray: oklch(60% 0 0);
  --color-grey: var(--color-gray);
  /* CMYK */
  --color-cmyk-cyan: Cyan;
  --color-cmyk-magenta: Magenta;
  --color-cmyk-yellow: Yellow;
  --color-cmyk-key: Black;
  /* ROYGBIV */
  --color-roygbiv-red: Red;
  --color-roygbiv-orange: Orange;
  --color-roygbiv-yellow: Yellow;
  --color-roygbiv-green: Green;
  --color-roygbiv-blue: Blue;
  --color-roygbiv-indigo: Indigo;
  --color-roygbiv-violet: Violet;
  --color-grass: oklch(52% 0.075 140);
  --color-success: var(--color-roygbiv-green);
  --color-warning: var(--color-roygbiv-yellow);
  --color-error: var(--color-roygbiv-red);
  --color-light-fg: var(--color-white);
  --color-light-bg: var(--color-black);
  --color-dark-fg: var(--color-black);
  --color-dark-bg: var(--color-white);
  --color-bg-dark-tone1: var(--color-black);
  --color-bg-dark-tone2: var(--color-black);
  --color-bg-light-tone1: var(--color-white);
  --color-bg-light-tone2: var(--color-white);
  --color-bg-content-tone1: var(--color-black);
  --color-bg-content-tone2: var(--color-black);
  --color-bg-content-tone3: var(--color-black);
  --color-bg-content-tone4: var(--color-black);
  --color-accent-split-comp: var(--color-roygbiv-yellow);
  --color-accent-complement: var(--color-roygbiv-orange);
  --color-accent-triad: var(--color-roygbiv-red);
  --color-accent-tetrad1: var(--color-cmyk-magenta);
  --color-accent-analogous: var(--color-roygbiv-violet);
  --color-accent-monotone: var(--color-roygbiv-blue);
  --color-accent-analogous2: var(--color-cymk-cyan);
  --color-accent-tetrad2: var(--color-roygbiv-green);
  --color-text: var(--color-fg);
  --color-scheme-light-fg: var(--color-black);
  --color-scheme-light-bg: var(--color-white);
  --color-scheme-dark-fg: var(--color-white);
  --color-scheme-dark-bg: var(--color-black);
  --color-brand-primary: var(--brand-color-dark);
  --color-brand-secondary: var(--brand-color-light);
  --color-brand-accent: var(--color-grass);
  --color-brand-neutral: "DarkSlateGray";
  --color-brand-shadow: var(--color-gray);
}

:where(:root) {
  --icon-filter-grayscale: saturate(0);
  --icon-size: 1.2rem;
  --icon-margin: .25rem;
  --icon-menu-boxed: "▤";
  --icon-menu-equivalent: "≡";
  --icon-menu-stacked: "☰";
  --icon-menu-close: "╳";
  --icon-menu-submenu-inactive: "▸";
  --icon-menu-submenu-active: "▾";
  --icon-link: "🔗";
  --icon-link-external: "↗️";
  --icon-postal: "📬";
  --icon-email: "📧";
  --icon-phone: "📞";
  --icon-chat: "💬";
}

/*
* Screen size			Margin		Body		Layout columns
Extra-small (phone)
0-599dp					16dp		Scaling		4
Small (tablet)
600-904					32dp		Scaling		8
905-1239				Scaling		840dp		12
Medium (laptop)
1240-1439				200dp		Scaling		12
Large (desktop)
1440+					Scaling		1040		12
*/
/*
* {
	border: 1px solid var(--color-roygbiv-green);
}
*/
:where(:root) {
  color-scheme: light dark;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
  --box-shadow: 2px 2px 10px;
  --dark-image-filter: brightness(.8) contrast(1.2);
  --col1: calc(1/12);
  --col2: calc(2/12);
  --col3: calc(3/12);
  --col4: calc(4/12);
  --col5: calc(5/12);
  --col6: calc(6/12);
  --col7: calc(7/12);
  --col8: calc(8/12);
  --col9: calc(9/12);
  --col10: calc(10/12);
  --col11: calc(11/12);
  --col12: calc(12/12);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: var(--color-scheme-light-bg);
    --color-fg: var(--color-scheme-light-fg);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--color-scheme-dark-bg);
    --color-fg: var(--color-scheme-dark-fg);
  }
  iframe {
    filter: invert(0.9) saturate(0.5) hue-rotate(145deg);
  }
}
[data-theme=light] {
  --color-bg: var(--color-scheme-light-bg);
  --color-fg: var(--color-scheme-light-fg);
}

[data-theme=dark] {
  --color-bg: var(--color-scheme-dark-bg);
  --color-fg: var(--color-scheme-dark-fg);
}

a[href]::before, p[data-type=postal] {
  position: relative;
  z-index: -1;
}

p[data-type=postal] {
  margin: 0;
}

p[data-type=postal]::before {
  content: var(--icon-postal);
  display: block;
}

a[href^="mailto:"]::before {
  content: url("https://cdn.jsdelivr.net/npm/@mdi/svg@7.0.96/svg/email.svg");
  content: var(--icon-email);
}

a[href^="tel:"]::before {
  content: var(--icon-phone);
}

a[href^="sms:"]::before {
  content: var(--icon-chat);
}

a[href^="https://www.facebook.com"]::before {
  content: url("https://cdn.simpleicons.org/facebook");
  display: block;
}

/*
	--mdi-email: url("https://cdn.jsdelivr.net/npm/@mdi/svg@7.0.96/svg/email.svg");
	--si-facebook: url("https://cdn.simpleicons.org/facebook");
	--si-gmail: url("https://cdn.simpleicons.org/gmail");
	--si-instagram: url("https://cdn.simpleicons.org/instagram");
	--si-linkedin: url("https://cdn.simpleicons.org/linkedin");
	--si-pinterest: url("https://cdn.simpleicons.org/pinterest");
	--si-twitter: url("https://cdn.simpleicons.org/twitter");
	--si-youtube: url("https://cdn.simpleicons.org/youtube");
*/
nav a[href^="http://"]::after, nav a[href^="https://"]::after {
  font-family: emoji;
  content: var(--icon-link-external);
}

p[data-type=postal]::before, a[href^="mailto:"]::before, a[href^="tel:"]::before, a[href^="sms:"]::before, a[href^="https://www.facebook.com"]::before {
  font-family: emoji;
  white-space: nowrap;
  margin-right: var(--icon-margin);
  width: var(--icon-size);
  height: var(--icon-size);
}

table thead {
  color: var(--color-fg);
}

table tr:hover {
  background-color: var(--color-brand-primary);
}

/*
https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
:valid {
	box-shadow: 0 0 0 2px var(--color-success);
}

:invalid {
	box-shadow: 0 0 0 2px var(--color-error);
}
*/
:disabled, [disabled], [aria-disabled=true] {
  cursor: not-allowed !important;
}

abbr[title], [data-tooltip] {
  cursor: help;
}

summary, button, select,
input[type=submit],
input[type=button],
input[type=checkbox],
input[type=range],
input[type=radio],
input[type=reset] {
  cursor: pointer;
}

/*
input:focus,
select:focus,
button:focus,
textarea:focus {
	box-shadow: 0 0 0 2px var(--focus-color);
}
*/
:where(:root) {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

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

* {
  line-height: calc(1em + 0.5rem);
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

[hidden] {
  display: none;
}

:where(:root) {
  overflow-wrap: break-word; /* 3 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe Fluent Icons", "Segoe MDL2 Asseets", "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", "Droid Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:where(code, kbd, samp, pre) {
  font-size: 1em;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Menlo", Monaco, "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

pre {
  white-space: pre-wrap;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

body, button, input, optgroup, select, textarea {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

:where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

:where(dl[role=list], ul[role=list], ol[role=list]) {
  list-style: none;
}

hr {
  box-sizing: content-box;
  color: inherit;
  height: 0;
}

:where(abbr[title]) {
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

table {
  border-color: currentColor;
  text-indent: 0;
}

button, input, optgroup, select, textarea {
  font: inherit;
  font-size: 100%;
}

button, select {
  text-transform: none;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  -webkit-appearance: button;
}

summary {
  display: list-item;
}

progress {
  vertical-align: baseline;
}

:where([type=search]) {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

a {
  text-decoration: none;
}

/*
body {
	max-width: 100%;
}
*/
menu {
  margin: 0;
}
menu li {
  list-style: none;
}

/* responsive images */
picture {
  display: contents;
}

source {
  display: none;
}

audio:not([controls]) {
  display: none;
}

audio {
  width: 100%;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

img, svg, video, canvas {
  height: auto;
}

iframe {
  height: 100vh;
}

/*
https://jamstack.org/

eink bg=white, fg=black #readability
oled bg=black, fg=white #power savings
@media print {}
https://clrs.cc/
normal
success
warning
error


accepted/rejected
primary/secondary
sucess/warning/error

dark
gray dark
gray 
gray light
light
*/
@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
    scroll-behavior: auto !important;
    background-attachment: initial !important;
  }
}
/*
@media all, print, screen
@media (prefers-color-scheme: dark | light
fullscreen	All of the available display area is used and no user agent chrome is shown.	standalone
standalone	The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar.	minimal-ui
minimal-ui	The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser.	browser
browser	The application opens in a conventional browser tab or new window, depending on the browser and platform.	(none)
window-controls-overlay	In this mode, the application looks and feels like a standalone desktop application, and the Window Controls Overlay feature is enabled.	(none)
media (isphone)
media (istablet)
media (isglasses)
media (ismonitor)
media (orientation: portrait)
media (orientation: landscape)
*/
@media (orientation: landscape) {
  /* landscape styles */
}
@media (orientation: portrait) {
  /* portrait styles */
}
/* Exact aspect ratio */
/* Minimum aspect ratio */
/* Maximum aspect ratio */
@media (min-width: 300px) {
  :root {
    --width: 250px;
  }
}
@media (min-width: 600px) {
  :root {
    --width: 450px;
  }
}
@media (max-width: 1024px) {
  table thead {
    display: none;
  }
  table th,
  table td {
    display: flex;
  }
  table th::before,
  table td::before {
    content: attr(title);
    font-weight: bold;
    width: 120px;
    min-width: 120px;
  }
}
/*iPhone 14*/
/*iPhone 14 Pro*/
/*iPhone 14 Pro Max*/
/* iphone 13 mini */
/* 2340x1080 pixels at 476ppi */
/* iphone 13 and 13 Pro */
/* 2532x1170 pixels at 460ppi */
/* iphone 13 Pro Max */
/* 2778x1284 pixels at 458ppi */
/* iphone 11 */
/* 1792x828px at 326ppi */
/* iphone 11 Pro */
/* 2436x1125px at 458ppi */
/* iphone 11 Pro Max */
/* 2688x1242px at 458ppi */
header > section {
  isolation: isolate;
  /*
  	margin: 1em;
  	padding: 0;
  */
  border: 2px solid var(--color-brand-secondary);
  background: var(--color-brand-primary);
  color: var(--color-bg);
}

header > section > h1 {
  margin: -2.5rem 1rem;
  display: inline-block;
  vertical-align: middle;
}
header > section > h1 > a {
  line-height: 2.5;
  vertical-align: middle;
  color: var(--color-brand-secondary);
}
header > section > h1 > a img {
  position: relative;
}

header > section > details {
  display: inline-block;
}
header > section > details > summary, header > section > details summary::-webkit-details-marker {
  display: none;
}
header > section > details summary {
  content: "";
  list-style: none;
}

header > details:not([open]) > summary::after {
  width: 2em;
  list-style: disc;
  content: var(--icon-menu-stacked);
}

header > details[open] > summary::after {
  width: 2em;
  content: var(--icon-menu-close);
}

header details {
  margin: 0;
}

nav {
  align-items: center;
  display: flex;
  font-weight: bold;
  justify-content: space-between;
}
nav a, nav summary {
  color: White;
}
nav a:hover, nav summary:hover {
  color: var(--color-brand-secondary);
}
nav menu {
  list-style: none;
  padding: 0;
  display: flex;
}
nav menu li:has(> details > menu) > details > summary::after {
  content: var(--icon-menu-submenu-inactive);
}
nav menu li:has(> details > menu):hover > details > summary::after {
  content: var(--icon-menu-submenu-active);
}
nav menu li:hover > details > menu, nav menu li:focus > details > menu, nav menu li:active > details > menu {
  /* Nav Dropdown */
  display: block;
}
nav menu li:first-child {
  margin-left: 0;
}
nav menu li:last-child {
  margin-right: 0;
}
nav menu li {
  display: inline-block;
  margin: 0 0.5rem;
  position: relative;
  text-align: left;
  /* fill gap above to make mousing over them easier */
  /*
  				content: "";
  				position: absolute;
  				left: 0;
  				right: 0;
  				top: -0.5rem;
  				height: 0.5rem;
  			}
  */
}
nav menu li menu {
  background: var(--color-brand-primary);
  border: 1px solid var(--color-bg-secondary);
  border-radius: 0.2em;
  box-shadow: var(--box-shadow) var(--color-shadow);
  display: none;
  height: auto;
  left: -2px;
  padding: 0.5rem 1rem;
  position: absolute;
  white-space: nowrap;
  width: auto;
  z-index: 1;
}
nav menu li menu li, nav menu li menu li a {
  display: block;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "main" "footer";
}
body > header {
  grid-area: header;
}
body > main {
  grid-area: main;
}
body > footer {
  grid-area: footer;
}
body main {
  img-width: 25%;
}
body main > section > article {
  display: flex;
  flex-direction: column;
}
body main > section > article > p > img {
  display: inline-block;
  width: 20rem;
}

body > * {
  margin: 0.5rem;
}

main img {
  width: 10rem;
}

header img, footer img {
  width: 10rem;
}

footer > section {
  justify-content: flex-end;
  align-items: center;
  text-transform: capitalize;
}
footer > section > ul {
  display: flex;
  align-items: center;
  padding-inline-start: 0px;
}
footer > section > ul li {
  padding: 1em;
  list-style: none;
}

a:has(img) {
  display: block;
}

td a img, ul li a img {
  background-color: var(--color-white);
}

li::marker {
  vertical-align: middle;
}

li details {
  display: inline-block;
}

table td, table th {
  text-align: left;
}

table > tbody > tr {
  border: 1px solid var(--color-brand-primary);
}

table > thead > tr > th {
  background-color: var(--color-brand-primary);
}

table > tbody > tr > th {
  text-transform: capitalize;
}