@charset "utf-8"; /* must be the first line */
/* mockup for cdv17c1 ---- vim: set sw=2 ai sm ts=2: */
/*
Running through the W3C "nu" validator turned out a few issues I did not expect:
- They really hate l
- You can't label an article with aria-labelledby, it must be an actual h1
- article kind of doesn't mean what you think it should mean
But apparently you can make up your own elements provided it has a hyphen (not just x- but anything with a hyphen)

Lato - 5 8
Noto - 4 7
Noto is 1 weight heavier than Lato but doesn't have 600, so Lato need to use 500 and 800
*/
/* Alegreya Sans: 100, 300, 500, 700, 800, 900 - Alegreya: 400, 700, 900 */
@import url(https://brick.freetls.fastly.net/Alegreya+Sans:300,300i,500,500i,700,700i/Alegreya:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=VT323&subset=latin-ext);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
html {
	/* aalt is weird. Do not use aalt */
	/* case is also weird (it changes headings to all caps). Do not use case */
	font-feature-settings: "calt", "kern", "liga", "onum", "pnum";
	overflow: hidden; overflow-y: scroll;
	overflow-wrap: break-word;
	/* background: #d7c4c4; /* scanned from Bringhurst's book */
	font-family: Alegreya, serif;
}
.bibliography,
[epub\:type=bibliography],
[role=doc-bibliography], /* allowed on section only */
.note,
.notes {
	font-size: inherit; line-spacing: inherit; /* override AWTT */
}
#colophon {
  font-size: 91.6667%;
}
h1,
h2,
h3 {
	break-after: avoid;
}
h1:first-letter,
h2:first-letter,
h3:first-letter,
dt:first-letter,
li:first-letter,
li > *:first-child:first-letter,
li > *:first-child > *:first-letter,
:lang(ja),
:lang(ko),
:lang(yue),
:lang(zh),
/* x-textblock ol > li::marker::first-letter, */
.lnum {
	/* This will look odd if the first word is a two-digit or longer number, but there's no first-word */
	font-feature-settings: "calt", "kern", "liga", "lnum", "pnum";
}
abbr,
.sc,
.smallcap  {
	/* Fonts hosted on Google Fonts have the smcp/c2sc capabilities nuked, so to do small caps you need a separate font.
	 * Brick does not have the separate font and does not have the smcp/c2sc capabilities. This might be a WOFF problem. */
	/* Note: cpsp is "caps spacing" so without smcp or c2sc it's pretty useless too (and it doesn't seem to work either) */
	font-feature-settings: "kern", "lnum";
	font-size: 91.66667%; /* 1 point smaller assuming 12pt body */
	letter-spacing: 1px; /*letter-spacing: 0.05em; /* need 50 [/1000] in InDesign, but em-based spacing is unpredictable in browsers */
}
abbr.sup,
abbr.lc,
abbr.i {
	font-feature-settings: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}
.hexadecimal {
	font-feature-settings: "kern", "lnum", "zero", "c2sc";
}
ruby {	/* added 20250601 - not sure why we need this */
	display: inline-flex;
	flex-direction: column;
	text-indent: 0;
	vertical-align: bottom;
}
ruby rb {
	order: 2;
}
ruby rt {
	order: 1;
	margin: 0 -0.5em;
	text-align: center;
}
svg.icon {
	height: 1em;
	width: auto;
	fill: currentColor;
}
body > svg:first-child {
	position: absolute;
	display: none;
}
sup {
	font-feature-settings: "sups";
}
a.fnnum-a[data-ctx-l="fnnum-a"] > sup.fnnum:before {
	/* this is inside sup, but unfortunately , does not have a sups form */
	position: relative;
	font-size: 80%;
	bottom: 1ex;
	content: ",";
}
a.fnnum-a[data-ctx-l="fnnum-a"] > sup.fnnum:lang(zh-HK):before {
	content: unset;
}
sup.fnnum {
	white-space: nowrap;
}
sup.fnnum:lang(zh-HK) {
	font-feature-settings: none;
}
sup.fnnum:lang(yue-HK):before,
sup.fnnum:lang(zh-hant):before,
sup.fnnum:lang(zh-HK):before,
sup.fnnum:lang(zh-TW):before {
	content: "（註";
}
sup.fnnum:lang(yue-HK):after,
sup.fnnum:lang(zh-hant):after,
sup.fnnum:lang(zh-HK):after,
sup.fnnum:lang(zh-TW):after {
	content: "）";
}
[data-ctx-l="fnnum-a"] sup.fnnum:lang(yue-HK):before,
[data-ctx-l="fnnum-a"] sup.fnnum:lang(zh-hant):before,
[data-ctx-l="fnnum-a"] sup.fnnum:lang(zh-HK):before,
[data-ctx-l="fnnum-a"] sup.fnnum:lang(zh-TW):before {
	content: "註";
}
[data-ctx-r="fnnum-a"] sup.fnnum:lang(yue-HK):after,
[data-ctx-r="fnnum-a"] sup.fnnum:lang(zh-hant):after,
[data-ctx-r="fnnum-a"] sup.fnnum:lang(zh-HK):after,
[data-ctx-r="fnnum-a"] sup.fnnum:lang(zh-TW):after {
	content: "，";
}
a {
	color: #8c7a34; /* see BRANDING/COLOUR */
	text-decoration: inherit;
}
a.url {
}
.url {
	word-break: break-all;
}
#figpanel #tagline,
#figpanel l { /* tagline */
	font-style: italic;
	line-height: 1.618em;
}
h2,
div.columns + h3 + .legend,
#notes li,
x-textblock {
	max-width: 40em;
	overflow-y: visible;
}
footer#footnotes li,
#notes li {
	margin-left: 2em;
}
dl.legend dt {
	min-width: 2em;
}
dl.production dd:before {
	content: " → "
}
x-textblock {
	widows: 2;
	orphans: 2;
}
x-textblock p {
	margin-top: 0;
	margin-bottom: 0;
}
.fn p + p, /* AWTT footnotes */
x-textblock p + p {
	text-indent: 2em; /* conventional for Chinese */
}
.notes ol li {
	margin-left: 2em;
}
x-textblock [role=note] + p,
x-textblock p + p.noindent {
	text-indent: 0;
}
x-textblock p + hr {
	border: 0;
	margin: 0.9444em 0;
	display: flex;
	width: 100%;
	justify-content: center;
}
x-textblock p + hr:after {
	content: "* * *";
}
abbr.i,
footer#footnotes .fn em,
footer#footnotes .fn i,
x-textblock h1 + [role=note],
x-textblock h1 + address + [role=note],
x-textblock h1 + subline + [role=note],
x-textblock h1 em,
x-textblock h1 i,
x-textblock h2 em,
x-textblock h2 i,
x-textblock h3 em,
x-textblock h3 i,
x-textblock dt em,
x-textblock dt i,
x-textblock dd em,
x-textblock dd i,
x-textblock li em,
x-textblock li i,
x-textblock blockquote em,
x-textblock blockquote i,
x-textblock pre em,
x-textblock pre i,
x-textblock p em,
x-textblock p i {
	font-style: italic;
}
x-textblock h1 + [role=note] cite,
x-textblock h1 + [role=note] em,
x-textblock h1 + address + [role=note] cite,
x-textblock h1 + address + [role=note] em,
x-textblock h1 + subline + [role=note] cite,
x-textblock h1 + subline + [role=note] em,
x-textblock h1 em cite,
x-textblock h1 em em,
x-textblock h2 em cite,
x-textblock h2 em em,
x-textblock h3 em cite,
x-textblock h3 em em,
x-textblock dd em cite,
x-textblock dd em em,
x-textblock li em cite,
x-textblock li em em,
x-textblock blockquote em cite,
x-textblock blockquote em em,
x-textblock pre em cite,
x-textblock pre em em,
x-textblock p em cite,
x-textblock p em em,
cite em,
i cite,
i em {
	font-style: normal;
}
x-textblock dd em.highlight,
x-textblock li em.highlight,
x-textblock blockquote em.highlight,
x-textblock pre em.highlight,
x-textblock p em.highlight {
	font-family: inherit;
	font-style: inherit;
	background: #ffff00;
}
footer#footnotes .fn em:lang(yue-HK),
footer#footnotes .fn em:lang(zh-HK),
x-textblock h1 em:lang(yue-HK),
x-textblock h1 em:lang(zh-HK),
x-textblock h2 em:lang(yue-HK),
x-textblock h2 em:lang(zh-HK),
x-textblock h3 em:lang(yue-HK),
x-textblock h3 em:lang(zh-HK),
x-textblock dd em:lang(yue-HK),
x-textblock dd em:lang(zh-HK),
x-textblock li em:lang(yue-HK),
x-textblock li em:lang(zh-HK),
x-textblock blockquote em:lang(yue-HK),
x-textblock blockquote em:lang(zh-HK),
x-textblock p em:lang(yue-HK),
x-textblock p em:lang(zh-HK) {
	font-style: normal;
	font-weight: bold; /* XXX text-emphasis doesn't even work in Brave */
}
x-textblock h1 + [role=note]:lang(yue-HK),
x-textblock h1 + [role=note]:lang(zh-HK),
x-textblock h1 + address + [role=note]:lang(yue-HK),
x-textblock h1 + address + [role=note]:lang(zh-HK),
x-textblock h1 + subline + [role=note]:lang(yue-HK),
x-textblock h1 + subline + [role=note]:lang(zh-HK),
x-textblock h1 i:lang(yue-HK),
x-textblock h1 i:lang(zh-HK),
x-textblock h2 i:lang(yue-HK),
x-textblock h2 i:lang(zh-HK),
x-textblock h3 i:lang(yue-HK),
x-textblock h3 i:lang(zh-HK),
x-textblock dd i:lang(yue-HK),
x-textblock dd i:lang(zh-HK),
x-textblock li i:lang(yue-HK),
x-textblock li i:lang(zh-HK),
x-textblock blockquote:lang(yue-HK),
x-textblock blockquote:lang(zh-HK),
x-textblock p[role=note]:lang(yue-HK),
x-textblock p[role=note]:lang(zh-HK),
x-textblock p i:lang(yue-HK),
x-textblock p i:lang(zh-HK),
h3:lang(yue-HK),
h3:lang(zh-HK),
header #coordinates a:lang(yue-HK),
header #coordinates a:lang(zh-HK),
.gallery-project-type:lang(yue-HK),
.gallery-project-type:lang(zh-HK),
#figpanel #tagline:lang(yue-HK),
#figpanel #tagline:lang(zh-HK),
#figpanel #tagline *:lang(yue-HK),
#figpanel #tagline *:lang(zh-HK),
#figpanel l:lang(yue-HK), /* tagline */
#figpanel l:lang(zh-HK) { /* tagline */
	font-style: normal;
	/*font-family: "DFKai-SB", "KaiU", BiauKai, Kai, "AR PL KaitiM Big5"; /* FIXME */
	font-weight: 100;
}
x-textblock dd strong,
x-textblock dd b,
x-textblock li strong,
x-textblock li b,
x-textblock p strong,
x-textblock p b {
	font-weight: 900;
}
x-textblock img {
	max-width: 100%;
	max-height: 70.7vh; /* this works on Firefox, hope this really is okay */
}
x-textblock ol,
x-textblock ul {
	margin-left: 0;
	padding-left: 1em;
}
x-textblock ul.bare,
x-textblock ul.reflist {
	padding-left: 0;
}
ul.inline,
ul.inline > li,
x-textblock ul.inline {
	display: inline;
}
x-textblock ol > li {
	display: list-item;
	list-style-type: decimal;
	counter-increment: ol;
}
x-textblock ol > li::marker {
	font-weight: bold;
	content: counter(ol) "  ";
}
x-textblock ul > li {
	list-style-type: none;
}
x-textblock ul > li:before {
	content: "–";
	position: absolute;
	margin-left: -1em;
}
/* This should be a :marker; alas, :marker seems to be really new, too new */
x-textblock ul.fancy > li:before {
	display: inline-block;
	position: relative;
	top: 0.035ex;
	margin-right: 0.28em; /* there's no reason it's this value, this was an eyed value */
	/* This draws a triangle. Not using the Unicode character because it's out of character and we're using a drawn triangle elsewhere */
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 0.325em solid transparent;
	border-bottom: 0.325em solid transparent;
	border-left: 0.528125em solid currentColor;
}
ul.inline > li:before,
x-textblock ul.bare > li:before,
x-textblock ul.inline > li:before,
x-textblock ul.reflist > li:before {
	content: "";
}
x-textblock ul.reflist > li {
	margin-left: 1em;
	text-indent: -1em;
}
x-textblock aside.footnotes:before {
	content: "";
	display: block;
	max-width: 100%;
	width: 1in;
	border-top: 1pt solid;
	margin-top: 2em;
	padding-top: calc(0.618em - 1pt);
}
x-textblock [role=note] {
	font-size: 0.92em; /* emulate 12pt -> 11pt */
	margin-right: 3em; /* XXX empiracal */
}
x-textblock aside.footnotes {
	font-size: 1rem;
	line-height: 1.414em;
}
:lang(ja-latn) {
	font-family: unset;
}
abbr {
	text-decoration: inherit;
}
cite {
	font-style: italic;
	text-indent: 0; /* for some reason this MIGHT be needed if we trigger citation marks otherwise we could get zero width */
}
cite:lang(ja),
cite:lang(ko),
cite:lang(yue-HK),
cite:lang(zh-HK-hant),
cite:lang(zh-TW-hant),
cite:lang(zh-hant),
cite:lang(zh-HK),
cite:lang(zh-TW) {
	font-style: inherit;
	display: inline-flex;
}
cite :lang(ja),
cite :lang(ko),
cite :lang(yue-HK),
cite :lang(zh-HK-hant),
cite :lang(zh-TW-hant),
cite :lang(zh-hant),
cite :lang(zh-HK),
cite :lang(zh-TW) {
	font-style: normal; /* XXX this is wrong, but can't do better than this */
	display: inline-flex;
}
.cite:lang(ja):after,
.cite:lang(ko):after,
.cite:lang(yue-HK):after,
.cite:lang(zh-HK-hant):after,
.cite:lang(zh-TW-hant):after,
.cite:lang(zh-hant):after,
.cite:lang(zh-HK):after,
.cite:lang(zh-TW):after {
	position: absolute;
	padding-top: 1em;
	align-self: baseline;
	content: "﹋";
}
.gallery-thumbnail {
	position: relative; /* because :hover sets this - we need to be consistent */
}
subline,
l {
	display: block;
}
section.gallery-item > h2 + div > subline,
i.heading,
.blog x-textblock h1,
.toc-entry a,
dt,
h2 ~ subline,
h2 {
	font-family: "Alegreya Sans", sans-serif;
}
h2 {
	font-weight: 600;
}
h3 {
	font-style: italic;
}
main figure {
	margin-bottom: 2em;
}
figcaption:before {
	/* This draws a triangle. Not using the Unicode character because it's not supported on my Mac */
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 0.4em solid transparent;
	border-right: 0.4em solid transparent;
	border-bottom: 0.65em solid currentColor;
}
figcaption:empty:before {
	content: none;
}
figcaption p,
figcaption,
dt,
.red {
	font-weight: 500;
}
.red,
figcaption {
	margin-top: 0.9em;
	color: #555555; /* NOTE */
	font-size: 1rem;
	line-height: 1.2em;
}
body.blog figcaption {		/* Dec 28 2023 tweaks for blog ONLY (otherwise it breaks portfolio galleries) */
	margin-left: 2.472em;		/* 2em at x-textblock copy size */
	text-indent: -1.236em;	/* 1em at x-textblock copy size */
}
div.artwork {
	background-size: cover;
	mix-blend-mode: multiply; /* NOTE: background-blend-mode won't have any effect */
	width: 20em;
	height: 20em;
}
div.artwork.c1 {
	background-image: url("../images/IMGP2816_rot2.2_cropped.jpg");
	background-position: center;
}
div.artwork.c2 {
	background-image: url("../images/IMGP0015_w1600.jpg");
	background-position: center;
}
div.artwork.g3, /* FIXME - THIS (g3) SHOULD NOT BE HERE */
div.artwork.c3 {
	background-image: url("../images/IMGP0077_w1024.jpg");
	background-position: center;
}
div.artwork.c4 {
	background-image: url("../images/colour_panel_a3v2d22_copy_A-01.png");
	background-position: center;
}
div.artwork > img {
	opacity: 0;
}
figcaption > cite {
}
figcaption p {
	display: inline;
}
img {
	mix-blend-mode: multiply;
}
body.cat-g x-textblock img { /* design mode */
	mix-blend-mode: normal;
}
img.logo {
	display: inline-block;
	position: relative;
	top: 0.333ex;
	height: 1em;
}
img.logo.EAC,
img.logo.RGD {
	height: 2em;
}
img.logo.EAC {
	margin-bottom: -1.55em;
}
img.logo.RGD {
	margin-bottom: -0.95em;
}
img.logo.EAC,
img.logo.RGD {
	height: 3em;
}
dl {
	display: grid;
	grid-template-columns: [dt] auto [dd] 1fr;
	align-items: baseline;
}
dt {
	padding-right: 1em;
	grid-column: dt;
	white-space: nowrap;
}
[epub\:type=index-term] {
	font-style: inherit;
	font-weight: inherit;
}
dd {
	grid-column: dd;
}
body.js-hidden section {
	margin-bottom: 3em;
}
body.js-hidden section + section {
	margin-top: 3em;
	border-top: currentColor solid 1em;
}
section#bio dt,
section#contact dt {
	font-weight: bold;
}
section#bio dt,
section#contact dd {
}
section#bio dd + dt,
section#contact dd + dt {
}
section.tab {
	display: none;
}
section.tab.active {
	display: block;
}
.rdquo {
	position: absolute;
	font-size: 0;
	color: transparent;
}
.rdquo + .comma:after {
	content: "”";
}
.LaTeX .e {
	text-transform: uppercase;
	position: relative;
	margin-left: -0.1em;
	top: 0.25em;
}
.LaTeX .a {
	text-transform: uppercase;
	position: relative;
	margin-left: -0.25em;
	bottom: 0.25em;
	font-size: 80.9%;
}
.has-border {
	border: 1px solid currentColor;
}
header img.wordmark {
	display: block;
	z-index: -100;				/* send to back */
	position: relative;		/* needed for z-index to work */
}
header {
	display: flex;
	flex-direction: column;
}
header #coordinates a {
	font-style: italic;
}
header addr {
	display: flex;
	flex-direction: column;
	align-items: center;
}
nav,
nav > ul {
	display: inline-block;
}
nav > ul:first-child {
	/* XX this is more needed on the desktop site because the left edge of the monitor throws the balance off, not really needed for phones */
	margin-left: -0.125em;
}
nav li,
[role=button],
[role=link] {
	cursor: pointer;
	color: #8c7a34; /* see BRANDING/README */
}
nav li {
	display: inline-block;
}
nav li.nav-js-btn,
nav li a {
	padding-top: 1em;
	padding-bottom: 1.5em; border-bottom: 0.5em solid transparent; /* enlarge touch target */
	padding-left: 0.5em;
	padding-right: 0.5em;
}
nav li a {
	display: block;
}
nav li.active a,
nav li.active { /* NOTE we need this because active links are now non-links due to ARIA */
	color: white;
	background-color: #8c7a34; /* see BRANDING/README */
}
nav li.semi-active {
	border-bottom-color: #8c7a34; /* see BRANDING/README */
	mix-blend-mode: multiply;
}
[role=button]:hover,
[role=link]:hover,
[role=menuitem]:hover,
a[href]:hover *,
a[href]:hover {
	background-color: white;
}
[role=button]:hover,	/* for the curious case of .toc-folio, where a is display:content */
[role=link]:hover,
a[href]:hover {
	outline: 1pt dashed currentColor;
}
[role=button]:hover,
[role=link]:hover,
a[href]:hover,
nav li.active,
nav li.semi-active:hover {
	mix-blend-mode: normal;
}
[role=button].has-bghack:hover,
[role=link].has-bghack:hover,
a[href].has-bghack:hover:hover {
	position: relative; /* create positioning context */
	background-color: inherit;
	mix-blend-mode: inherit;
}
[role=button]:hover .bghack,
[role=link]:hover .bghack,
a[href]:hover .bghack {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	mix-blend-mode: normal;
	z-index: -9999;
}
nav#prev a:hover,
nav#next a:hover {
	background-color: white;
}
nav li.active a:hover,
nav li.active:hover {
	background-color: black;
}
footer.work-details,
footer#work-details {
	border-top: 2pt solid;
	padding-top: 1em;
	padding-bottom: 1em;
}
div + [role=button],
#relevant-experience > ul > li + li {
  margin-top: 1em;
}
hr.smallskip,
hr.medskip,
hr.bigskip {
	border: 0;
}
hr.smallskip {
	height: 0.5em; /*FIXME - need to relate to line-height, not em size */
}
hr.medskip {
	height: 1em; /*FIXME - need to relate to line-height, not em size */
}
hr.bigskip {
	height: 3em; /*FIXME - need to relate to line-height, not em size */
}
code {
	/*font-size: 125%; /* within running text we need to adjust font size */
}
code,
pre.code {
	font-family: VT323, monospaced;
	font-feature-settings: "liga" 0, "lnum";
}
p + dl.index {
	margin: 0;
}
x-textblock pre.code,
x-textblock pre.poetry {
	overflow-x: auto;
}
x-textblock table {
	margin-left: -1ch;
}
x-textblock table.table {
	margin-right: -1ch;
}
x-textblock table th {
	text-align: left;
	font-weight: 800;
}
x-textblock table th[colspan] {
	text-align: center;
}
x-textblock table th[rowspan] {
	vertical-align: middle;
}
x-textblock table tr + tr th {
	border-top: 1px dotted currentColor;
}
x-textblock table th,
x-textblock table td {
	padding-left: 1ch;
	padding-right: 1ch;
}
x-textblock table td {
	border-bottom: 1px solid currentColor;
	border-top: 1px solid currentColor;
}
x-textblock table thead + tbody > tr:first-child td {
	border-top: 2px solid currentColor;
}
x-textblock ul.index {
	padding-left: 0;
}
x-textblock ul.index li {
	line-height: 1.25em;
}
x-textblock ul.index li + li {
	margin-top: 0.5em;
}
x-textblock ul.index ul.index li + li {
	margin-top: 0;
}
x-textblock [role=doc-biblioentry],
x-textblock [epub\:type=biblioentry],
x-textblock ul.index li {
	text-indent: -3em;
	margin-left: 3em;
}
x-textblock dd[role=doc-biblioentry],
x-textblock dd[epub\:type=biblioentry] {
	/* undo effects of the above if we're in a dl */
	text-indent: 0;
	margin-left: 0;
}
x-textblock ul.index li > ul {
	margin-left: -2em;
}
x-textblock ul.index > li:before {
	content: "";
	margin-left: 0;
}
x-textblock blockquote {
	margin-left: 2em; /* sync with p+p or it looks like an error */
}
x-textblock svg.icon {
	/* FIXME: there doesn't seem to be anything we can do to move it to compensate for the baseline that won't cause spacing weirdness */
}
x-textblock span.icon { width: 1em; display: inline-block; height: 1ex; overflow: visible; position: relative; } x-textblock span.icon svg.icon { position: absolute; left: 0; bottom: -0.1em; } /* stupid hack to compensate for the baseline */
dl.index {
	line-height: 1.414em;
	margin-top: -1.414em; /* XXX I hate W3C for not creating a container for dt+dd */
	display: block;
}
dl.index > dt:first-child:before {
	margin-top: 1.414em; /* XXX I hate W3C for not creating a container for dt+dd */
}
dl.index > dt:before {
	display: block;
	content: "";
}
dl.index > dt:after {
	content: ", ";
}
dl.index > dt {
	font-family: inherit;
	font-weight: inherit;
	padding-right: 0;
}
dl.index > dt,
dl.index > dd {
	display: inline;
}
i.heading {
	text-decoration: underline;
}
.hidden {
	display: none; /* do not use absolute positioning or hidden visibility, otherwise the :visible selector will not work */
}
.invisible {
	color: transparent; /* hidden from graphical browsers but visible to screen readers and text browsers */
}
.squashed {
	font-size: 0;
	height: 0;
}
.optional-heading {
	color: transparent;
	height: 0;
}
dl.index,
ul.index,
div.columns + h3 + .legend,
div.columns + h3 + .legend + #notes > ol.awtt-endnotes,
.tiny {
	font-size: 1rem;
}
#notes > ol.awtt-endnotes {
	columns: 20em; /* XXX just do it =P */
}
#notes > ol.awtt-endnotes.eq1 {
	columns: unset;
}
#notes > ol.awtt-endnotes.eq2 {
	columns: unset;
}
.two.columns {
	columns: 19em 2; /* (40 - 2*1)/2 */
	column-gap: 2em;
}
.three.columns {
	columns: 12em 3; /* (40 - 2*2)/3 */
	column-gap: 2em;
}
.four.columns {
	columns: 9.6em 4; /* (40 - 1*2)/2 */
	column-gap: 1em;
}
.columns > h1:first-child,
.columns > h2:first-child,
.columns > h3:first-child {
	margin-top: 0;
}
.columns > ul,
.columns > ol {
	break-inside: avoid;
}
.p-job-title {
	white-space: nowrap;
}
/* Blog */
.blog x-textblock h1 {
	font-weight: 800;
}
.watermark {
	position: fixed; right: 0; bottom: 3em; transform: rotate(-45deg); text-transform: uppercase;
	font-size: 2rem; font-weight: 900;
	opacity: 0.12;
	mix-blend-mode: overlay;
}
ul.toc {
	display: grid;
	grid-template-columns: [folio] 2em [folio-suffix] 2em [sep] 1ch [entry] auto [end];
	padding: 0;
}
ul.toc li {
	display: contents;
}
x-textblock ul.toc > li:before {
	content: none;
}
.toc-folio {
	display: contents;
}
.toc-folio-base {
	grid-column: folio;
	text-align: right;
	font-style: italic;
}
.toc-folio-suffix {
	margin-left: 1pt;
	grid-column: folio-suffix;
	font-size: 1rem;
	font-style: italic;
	white-space: nowrap;
}
.toc-sep {
	grid-column: sep;
}
.toc-entry {
	grid-column: entry;
}
#tags > ul > li {
	display: inline;
	margin-right: 1ch;
}
#tags > ul > li:before {
	content: none;
}
/* These kerning values are specific to Noto */
cjk-l[data-ch="《"] {
	margin-left: -0.45em;
}
.fnnum-a[data-ctx-l=none] sup.fnnum:lang(yue-HK):before,
.fnnum-a[data-ctx-l=none] sup.fnnum:lang(zh-hant):before,
.fnnum-a[data-ctx-l=none] sup.fnnum:lang(zh-HK):before,
.fnnum-a[data-ctx-l=none] sup.fnnum:lang(zh-TW):before,
cjk-l[data-ch="（"] {
	margin-left: -0.6em;
}
cjk-l[data-ch="「"] {
	margin-left: -0.5em;
}
cjk-l {
	margin-left: -0.4em;
}
/* Do not do this. This looks very reasonable but in practice will cause weird formatting issues *//*
cjk-l:before {
	content: " ";
}
cjk-l[data-ch="「"]:before,
cjk-r[data-ch="」"]:after {
	font-size: 0.6em;
}
cjk-l[data-ctx-l="none"]:before {
	content: none;
}
*/
cjk-r {
	margin-right: -0.4em;
}
cjk-r[data-ctx-r="latin"]:after/*,
cjk-r[data-ctx-r="cjk"]:after*/ {
	content: " ";
}
cjk-r[data-ch="》"] {
		margin-right: -0.52em;
}
cjk-r[data-ch="）"] {
		margin-right: -0.6em;
}
cjk-r[data-ch="」"] {
		margin-right: -0.57em;
}
cjk-r[data-ctx-r="latin-c"] {
	margin-right: -0.55em;
}
.fnnum-a[data-ctx-r=none] sup.fnnum:lang(yue-HK):after,
.fnnum-a[data-ctx-r=none] sup.fnnum:lang(zh-hant):after,
.fnnum-a[data-ctx-r=none] sup.fnnum:lang(zh-HK):after,
.fnnum-a[data-ctx-r=none] sup.fnnum:lang(zh-TW):after,
cjk-r[data-ch="）"][data-ctx-r="latin-c"] {
	margin-right: -0.75em;
}
html[lang=yue-hk] p {
	text-align:justify;
}
#langnav:before {
	position: relative; left: -0.3em;
	background-image: url("../icons/globe.svg");
}
@media print {
	a {
		color: inherit;
	}
	footer[role=button],
	nav {
		display: none;
	}
	#leadin > #wordmark > img {
		position: absolute;
		top: -0.5in; /* relative to printable area, not realtive to paper edge */
		right: 0in;
		width: 0.5in;
		height: auto;
	}
	#leadin > #figpanel {
		position: absolute;
		top: 0in; /* relative to printable area, not realtive to paper edge */
		right: 0.75in;
		width: 1.5in;
	}
	div.artwork {
		width: 1.5in;
		height: 1.5in;
	}
	main {
		margin-right: calc(0.25in + 1.5in + 0.75in);
		margin-top: 2in;
	}
}
@media screen {
	/* paper colour */
	#nav,
	html {
		background-color: rgb(255, 239, 219); /* AntiqueWhite1 */
	}
	.gallery-thumbnail > figure,
	.gallery-thumbnail > figure:hover {
		display: grid;
		grid-template-columns: 0.5em 0.5em 1fr 0.5em 0.5em;
		grid-template-areas:
			"img img img img ."
			". type type type type"
			"arrow arrow caption caption caption";
	}
	.gallery-thumbnail-item img {
		grid-area: img;
	}
	.gallery-thumbnail > figure > figcaption {
		display: contents;
	}
	.gallery-thumbnail > figure > figcaption:before {
		grid-area: arrow;
	}
	.gallery-project-type {
		color: rgb(255, 239, 219); /* AntiqueWhite1 */
		grid-area: type;
		width: fit-content;
		padding-top: 0.25em;
		padding-left: 0.25em;
		padding-right: 0.25em;
		font-style: italic;
		background: #8c7a34; /* see BRANDING/COLOUR */
		z-index: 1;
		margin-top: -1em;
		margin-bottom: 0.75em;
		line-height: 1em;
	}
	.gallery-project-type > .sep {
		visibility: hidden;
		font-size: 0;
	}
	.gallery-project-caption {
		grid-area: caption;
	}
	body {
		padding-bottom: 9em;
	}
	#leadin {
		display: flex;
		flex-direction: row-reverse;
	}
	#figpanel {
		width: 20em;
		display: flex;
		flex-direction: column;
		margin-top: 5em;
	}
	#figpanel #tagline,
	#figpanel l { /* tagline */
		align-self: end;
		width: 45%;
		margin-top: -1.9em; /* FIXME: height should be 3.5em for some reason */
		height: 5.4em; /* NOTE: 5em needed if we change line-height */
		z-index: 10000;
	}
	#nav {
		z-index: 10000;
		border-bottom-right-radius: 1em;
		padding-right: 1em;
	}
	nav:after {
		margin-left: 1em;
		mix-blend-mode: luminosity; /* in case the system gave us a colour icon */
	}
	#langnav:before,
	#nav > ul:after {
		content: "";
		display: inline-block;
		position: relative;
		background-repeat: no-repeat;
		background-size: contain;
		margin-left: 1ex;
		margin-bottom: -0.5ex;
		width: 1em;
		height: 1em;
		filter: invert(0.5) sepia(1) hue-rotate(11deg) saturate(63) brightness(0.55); /* convert black into #8c7a34 */
		opacity: 0.2; /* make the colour wrong enough it won't be mistaken as clickable */
	}
}
@media screen and (min-width: 60em) { /* DESKTOP - NOTE: This was 40em, but just the two rightmost panels are 28.6em */
	x-textblock pre.code,
	x-textblock pre.poetry,
	x-textblock table,
	article[role=doc-index] [role=note] + .two.columns {
		margin-right: -20em; /* XXX TEMPORARY HACK */
	}
	.writing body {
		max-width: 55em;
		margin-left: auto;
		margin-right: auto;
	}
	#layout {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	#layout main { order: 3; }
	#layout #prev { order: 4; }
	#layout #next { order: 2; }
	#layout #prev,
	#layout #next {
		display: block;
		width: 3em;
	}
	#layout #prev > a,
	#layout #next > a {
		position: fixed;
		bottom: 61.8%;
		padding: 1em;
	}
	body.cat-c #layout #next > a {
		right: calc(3.6em + 2.5em);
	}
	.mobile-only {
		display: none;
	}
	#figpanel,
	main {
		margin-top: 5em;
	}
	main {
		padding-top: 1.888em;
		display: flex;
		margin-left: auto;
		margin-right: auto;
	}
	main x-textblock {
		padding-left: 1em;
	}
	footer.work-details,
	footer#work-details,
	main x-textblock p + hr,
	main x-textblock p {
		max-width: 30em;
	}
	main x-textblock .awtt-endnotes p,
	main x-textblock blockquote p {
		max-width: unset;
	}
	main > div {
		flex: 3;
		padding-left: 1em;
	}
	main nav ul,
	header nav ul {
		flex-direction: column;
	}
	main nav ul li,
	header nav ul li {
		align-self: flex-end;
	}
	main nav ul li a,
	header nav ul li a {
		max-width: 10em;
		margin-bottom: 1ex;
	}
	header {
		align-items: flex-end;
	}
	/*
	header#wordmark {
		position: absolute;
	}
	*/
	header img.wordmark {
		width: 3.6em;
		height: auto;
		margin-top: -4em;
		margin-left: 2.5em;
		margin-right: 2.5em;
	}
	header img.wordmark + address,
	header img.wordmark + l,
	header nav {
		margin-left: 55%;
	}
	body.cat-c main x-textblock div[role=button] img,
	body.cat-c main x-textblock div[role=link] img { /* art mode - painting in gallery list */
		max-height: 61.8vh;
		width: auto;
	}
	body.cat-c .gallery-item.visible > h2 + div, /* art mode - pictures in individual gallery */
	body.cat-c .gallery-thumbnail-collection { /* art mode - gallery thumbnail list */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	body.cat-w .gallery-thumbnail-collection,
	body.cat-g .gallery-thumbnail-collection { /* design mode - gallery thumbnail list */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
	}
	body.cat-c .gallery-thumbnail-item { /* art mode - clickable gallery thumbnail */
		display: flex; /* solely to make hover action look less ridiculous */
	}
	body.cat-w .gallery-thumbnail-item,
	body.cat-g .gallery-thumbnail-item { /* design mode - clickable gallery thumbnail */
		display: inline-block;
		padding-right: 1em;
	}
	body.cat-w .gallery-thumbnail-item {
		width: 14%;
		width: calc(20% - 1em); /* NOTE: this was 16.66667% (1/6) but that was way too narrow for French */
	}
	body.cat-g .gallery-thumbnail-item {
		width: 30%;
		width: calc(30% - 1em);
	}
	body.cat-c .gallery-item.visible img { /* art mode - pictures in individual gallery */
		max-width: 100%;
	}
	body.cat-c .gallery-item.visible > h2 + div, /* art mode - pictures in individual gallery */
	.gallery-thumbnail-collection {
		width: calc(100% + 40vw - 3.6em - 2.5em); /* take up the space that would have been taken up by the feature image */
		position: relative;
	}
	.gallery-thumbnail-collection {
		margin-right: calc(3.6em + 2.5em); /* fudge right margin - this is not ideal but we can't do any better unless we redo the layout */
	}
	#fn { width: calc(100% - 5.3em); } /* avoid the colophon link - 5.3em from colophon */
	footer#footnotes #footnotes-inner { columns: 2; column-fill: balance; widows: 1; orphans: 1; }
	footer#footnotes #footnotes-inner > div:first-child { orphans: 2; }
	.blog x-textblock h1,
	h2,
	x-textblock {
		font-size: 1.236rem;
		line-height: 1.888rem;
	}
	x-textblock:lang(yue) h2,
	x-textblock:lang(yue) {
		line-height: 2.2rem;
	}
	/* NOTE: if you got here, remember to update the corresponding rule in the mobile section */
	main > figure:first-child + x-textblock,
	x-textblock p + p.noindent,
	x-textblock p + dl,
	x-textblock p + ol,
	x-textblock p + ul,
	x-textblock p + pre,
	x-textblock p + footer,
	x-textblock p + .columns,
	x-textblock blockquote,
	x-textblock blockquote + p,
	x-textblock [role=note] + p,
	x-textblock [role=note] + dl,
	x-textblock [role=note] + ol,
	x-textblock [role=note] + ul,
	x-textblock [role=note] + footer,
	x-textblock [role=note] + .columns,
	dl + figure,
	ol + figure,
	ul + figure,
	p + figure,
	p + table,
	dl + p,
	ol + p,
	ul + p,
	pre + p,
	h1 + address + p, /* blog byline without e-content div */
	h1 + address + div, /* blog byline with e-content div */
	h1 + address + dl,
	h1 + address + ul,
	.blog x-textblock h1,
	subline + [role=note],
	subline + p,
	subline + dl,
	subline + ul,
	subline + .columns,
	h2 + div > figure:first-child,
	h2,
	h3 {
		margin-top: 1.888rem;
	}
	x-textblock ol.long-items > li + li,
	x-textblock ul.long-items > li + li {
		margin-top: 0.944rem; /* half of above value */
	}
	#btn-colophon {
		z-index: 9999;
		position: fixed;
		width: 5.3em; right: 0; /* visually align with wordmark */
		bottom: 4em;
	}
	#langnav {
		position: fixed;
		width: 5.3em; /* XXX hack */
		right: 1em; /* XXX hack */
		bottom: 7em;
	}
	#nav { position: fixed; top: 0; }
	#nav > ul:after { background-image: url("../icons/monitor.svg"); }
	main { padding-top: 2em; } /* compensates for #nav's fixed position */
	main > section.gallery-item { margin-top: -2em; padding-top: 2em; }
}
@media screen and (max-width: 59.9999em) { /* MOBILE - NOTE: This was 40em - 0.0001, but just the two rightmost panels are 28.6em */
	#layout #prev,
	#layout #next {
		display: block;
	}
	#layout #prev a,
	#layout #next a {
		display: block;
		padding-top: 2em;
		padding-bottom: 1em;
	}
	.blog x-textblock h1,
	h2,
	x-textblock {
		font-size: 1.236rem;
		line-height: 1.888rem;
	}
	x-textblock:lang(yue) h2,
	x-textblock:lang(yue) {
		line-height: 2.2rem;
	}
	/* NOTE: if you got here, remember to update the corresponding rule in the desktop section */
	main > figure:first-child + x-textblock,
	x-textblock p:first-child, /* p without a preceding h2 */
	x-textblock p + dl,
	x-textblock p + ol,
	x-textblock p + ul,
	x-textblock p + footer,
	x-textblock p + .columns,
	x-textblock blockquote,
	x-textblock blockquote + p,
	x-textblock [role=note] + p,
	x-textblock [role=note] + dl,
	x-textblock [role=note] + ol,
	x-textblock [role=note] + ul,
	x-textblock [role=note] + footer,
	x-textblock [role=note] + .columns,
	dl + figure,
	ol + figure,
	ul + figure,
	p + figure,
	p + table,
	dl + p,
	ol + p,
	ul + p,
	h1 + address + p, /* blog bylines */
	h1 + address + dl,
	h1 + address + ul,
	.blog x-textblock h1,
	subline + p,
	subline + dl,
	subline + ul,
	subline + .columns,
	h2 + div > figure:first-child,
	h2,
	h3 {
		margin-top: 1.707rem;
	}
	x-textblock ol.long-items > li + li,
	x-textblock ul.long-items > li + li {
		margin-top: 0.8535rem; /* half of above value */
	}
	x-textblock,
	figcaption,
	footer,
	#notes {
		padding-left: 0.25em;
		padding-right: 0.25em;
	}
	#layout {
		display: flex;
		flex-direction: column;
	}
	#figpanel.hidden {
		height: 0;
	}
	#figpanel {
		width: 100%;
	}
	#figpanel.unimportant .artwork {
		height: 40vw;
	}
	div.artwork {
		width: 80vw;
		height: 80vw;
		transition: ease 0.05s;
	}
	div.artwork.c4 { transition: 0.25s; } /* give more time for rotations */
	#figpanel.unimportant div.artwork.c1 { background-position: 50% 75%; }
	#figpanel.unimportant div.artwork.c2 { background-position: 50% 85%; }
	#figpanel.unimportant div.artwork.c4 { background-position: 50% 40%;
			width: 40vw; height: 80vw; transform-origin: right center;
			//transform: rotate(90deg); margin-bottom: -40vw;
			transform: rotate(-90deg); margin-top: -40vw;
		}
	#figpanel.unimportant figcaption { display: none; }
	header img.wordmark {
		width: 3.6em;
		width: calc(100% - 3em);
		height: auto;
		margin-top: -4em;
		margin-left: 1em;
	}
	/* XXX Something needs to be here (even just a comment) to prevent the above and the following from getting mixed up. I don't know why. */
	.w {
		position: absolute;
		left: -9999px;
	}
	#btn-colophon {
		position: fixed; /* FIXME this really should be absolute but bottom: 0 doesn't make it appear at the bottom */
		right: -0.5em;
		bottom: -0.75em;
	}
	#langnav {
		position: fixed; /* FIXME this really should be absolute but bottom: 0 doesn't make it appear at the bottom */
		width: 5.3em; /* XXX hack */
		right: -0.75em; /* XXX hack */
		bottom: 1.75em;
	}
	#nav > ul:after { background-image: url("../icons/phone.svg"); }
}