/*@import url("https://use.typekit.net/juc2nww.css");*/

:root {
		font-size: clamp(14px, 1.6666666666666667vw, 18px);
		/* r=3.14, n=3, f0=1.0 */
		--font-scale-sm: 0.6829rem;
		--font-scale-0: 1.0rem;
		--font-scale-1: 1.4643rem;
		--font-scale-2: 2.1443rem;
		--font-scale-3: 3.14rem;
		--typeface:  Poppins, Helvetica, Arial, sans-serif;
		--typeface-alt: Chunk, Tahoma, sans-serif;

		--spacing: clamp(1rem, 4.2vw, 3rem);
		--gap: 1rem;
		--max-text-width: 70ch;
		--rounding: 0.2rem;
		--brightness: 100%;

		--colour-text: hsl(113, 15%, 22%);
		--colour-text-dimmed: hsl(214, 10%, 42%);
		--colour-background: hsl(26, 10%, 95%);
		--colour-accent: hsl(3, 63%, 54%);
		--colour-focus: hsl(10, 11%, 40%);
		--colour-border: hsl(113, 15%, 64%);
		--colour-overlay: hsla(51, 14%, 10%, 0.8);
		--colour-headings: hsl(113, 17%, 24%);
		--colour-content-bg: white;
		--colour-logotype: var(--colour-headings);

		color-scheme: dark light;
		accent-color: var(--colour-accent);
}
[data-scheme="dark"] body {
		--colour-text: hsl(0, 0%, 79%);
		--colour-text-dimmed: hsl(214, 10%, 72%);
		--colour-accent: hsl(26, 82%, 65%);
		--colour-background: hsl(113, 17%, 15%);
		--colour-border: hsl(214, 0%, 44%);
		--colour-headings: hsl(131.7, 14.5%, 51.4%);
		--colour-card-bg: hsl(113.3, 15.8%, 22.4%);
		--colour-content-bg: hsl(113, 17%, 18%);
		--colour-logotype: white;
		/*--brightness: 84%;*/
}



/*ACCESSIBILITY*/
::selection {
		background-color: var(--colour-accent);
		color: var(--colour-text);
}
:focus {
		transition: outline-offset 1s ease;
		outline: 2px solid var(--colour-focus) !important;
		outline-offset: 3px;
}
.non-visual {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
}


/*FONTS*/
@font-face {
		font-family: 'Poppins';
		src: url('../fonts/poppins-regular.woff2') format('woff2'),
				 url('../fonts/poppins-regular.woff') format('woff');
		font-weight: 400;
		font-style: normal;
}
@font-face {
		font-family: 'Poppins';
		src: url('../fonts/poppins-italic.woff2') format('woff2'),
				 url('../fonts/poppins-italic.woff') format('woff');
		font-weight: 400;
		font-style: italic;
}
@font-face {
		font-family: 'Poppins';
		src: url('../fonts/poppins-semibold.woff2') format('woff2'),
				 url('../fonts/poppins-semibold.woff') format('woff');
		font-weight: 600;
		font-style: normal;
}
@font-face {
		font-family: 'Chunk';
		src: url('../fonts/chunk.woff2') format('woff2'),
				 url('../fonts/chunk.woff') format('woff');
		font-weight: 800;
		font-style: normal;
}


/*TYPOGRAPHY*/
body {
		-webkit-text-size-adjust: 100%;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		font-family: var(--typeface);
		font-size: var(--font-scale-0);
		line-height: 1.6;
		color: var(--colour-text);
}
h1, h2, h3, h4, h5, h6 { 
		font-family: var(--typeface-alt); 
		color: var(--colour-headings);
		line-height: 1;
}
h1 { font-size: var(--font-scale-3); }
h2 { font-size: var(--font-scale-2); }
h3 { font-size: var(--font-scale-1); }
h4 { font-size: var(--font-scale-0); }
.sm { font-size: var(--font-scale-sm); }
.cent { text-align: center; }
ul { list-style-image: url(../images/bullet.svg); }
.meta {
		font-size: var(--font-scale-sm);
		color: var(--colour-text-dimmed);
}



/*LAYOUT*/
* { box-sizing: border-box; }
body {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		min-height: 100%;
}
#sidebar {
		flex-grow: 1;
		flex-basis: clamp(20rem, 20%, 100%);
		background: var(--colour-background);
		padding-top: var(--gap);
		container-type: inline-size;
		container-name: sidebar;
}
#sidebar > * {
		position: sticky;
		top: 0;
		padding: var(--spacing);
}
@container sidebar (max-width: 99vw) {
		#sidebar > * {
				min-height: 100vh;
		}
}
#content {
		flex-basis: 0;
		flex-grow: 999;
		min-inline-size: 64%;
		padding: var(--spacing);
		background: var(--colour-content-bg);
		container-name: content;
		container-type: inline-size;
}
#content:has(main > h1) {
		padding-top: 0;
}
#content.illies {
		--colour-content-bg: var(--colour-background);
}
main {
		container-name: main;
		container-type: inline-size;
}
[role="contentinfo"] {
		margin-top: var(--spacing);
		border-top: 1px solid var(--colour-border);
		font-size: var(--font-scale-sm);
		display: flex;
		align-items: center;
		justify-content: space-between;
}
[role="contentinfo"] a {
		color: var(--colour-text);
}
.hidden { display: none; }
.main-grid {
		display: grid;
		grid-template-columns:
				[breakout-start] 1fr
				[content-start] minmax(min(100%, var(--max-text-width)), 1fr)
				[content-end] 1fr
				[breakout-end];
		row-gap: var(--gap);
		align-content: baseline;
		padding: var(--gap);
		max-width: 1280px;
		margin: 0 auto;
}
.main-grid > * { margin: 0; }
.main-grid > *:not(:is(.breakout)) { grid-column: content; }
.main-grid > .breakout { 
		grid-column: breakout;
}
.main-grid img { border-radius: var(--rounding); }
.row { 
		display: flex; 
		flex-wrap: wrap;
		justify-content: space-between;
}


/*NAVIGATION*/
a {
		color: var(--colour-accent);
		text-decoration: underline;
		text-decoration-color: var(--colour-accent);
		transition: all 0.5s ease;
}
a:hover, a[aria-selected="true"] {
		color: var(--colour-text);
		text-decoration-color: var(--colour-text);
}
a.btn {
		display: inline-block;
		width: fit-content;
		background: var(--colour-accent);
		color: white;
		border-radius: var(--rounding);
		padding: 0.5em 1em;
		text-decoration: none;
}
a.btn:hover {
		text-decoration: none;
		opacity: 0.8;
}
nav { transition: height 0.5s ease-in-out; }
nav ul {
		list-style: none;
		padding: 0;
}
nav a {
		color: var(--colour-text);
		text-decoration: none;
}
nav a:hover, nav a[aria-selected="true"] { color: var(--colour-accent); }
nav ul.primary > li {
		border-bottom: 1px dashed var(--colour-border);
}
nav ul.schemes {
		font-size: var(--font-scale-sm);
		display: flex;
		align-items: center;
		gap: 0.5em;
		line-height: 1;
}
.schemes > li > button { background: transparent; }
.schemes .select-scheme {
		padding: 0;
		color: var(--colour-text);
}
.schemes .select-scheme[aria-selected="true"],
.schemes .select-scheme:hover {
		color: var(--colour-accent);
}
@container sidebar (min-width: 100vw) {
		nav {
				display: flex;
				gap: 1em;
				flex-wrap: wrap;
				justify-content: center;
		}
		nav ul { margin: 0; }
		nav ul.primary {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 1em;
				flex-basis: 100%;
		}
		nav ul.primary > li { border: none; }
		nav ul.primary, nav ul.schemes {
				display: none;
		}
		header[role="banner"] {
				margin-block-start: var(--spacing);
		}
}
ul.social {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
		font-size: var(--font-scale-sm);
}
ul.social a {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		align-items: center;
		text-decoration: none;
		color: var(--colour-text);
}
ul.social a:hover {
		color: var(--colour-accent);
}
ul.social a > svg {
		transition: all 0.5s ease;
		fill: var(--colour-text-dimmed);
}
ul.social a:hover > svg {
		fill: var(--colour-accent);
		transform: rotate(-7deg);
}
nav.horiz > ul {
		display: flex;
		flex-wrap: wrap;
}


/*IMAGES*/
img { max-width: 100%; }
figure {
		margin: 0;
		display: inline-grid;
		grid-template-areas: "fig";
		border-radius: var(--rounding);
		overflow: hidden;
		filter: brightness(var(--brightness));
}
figure::after {
		grid-area: fig;
		content: "";
		background: url(../images/spaceballs.png);
}
figure img { grid-area: fig; }
#identity {
		display: block;
		line-height: 1;
		/*margin: calc(2*var(--gap)) 0;*/
		/*max-width: 400px;*/
		width: 220px;
		max-width: 100%;
}
@container sidebar (min-width: 360px) {
		#identity {
				width: 320px;
		}
}
#identity > svg {
		width: 100%;
		height: 100%;
}
#identity > svg {
		fill: var(--colour-logotype);
		transition: all 0.5s ease;
}
#identity:hover > svg {
		fill: var(--colour-accent);
}
.icon {
		display: flex;
		align-items: center;
		gap: 0.5em;
		line-height: 1;
}
.icon svg {
		width: 1.5em;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
}
.icon.icn svg {
		stroke: none;
		fill: currentColor;
		width: 2em;
}
.icon.icn:hover svg {
		fill: var(--colour-accent);
}
.gallery {
		--gap: clamp(0.25rem, 1rem + 0.25cqi, 3rem);
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: var(--gap);
}
.gallery > * {
		display: block;
		border-radius: var(--rounding);
		flex-shrink: 1;
		flex-basis: clamp(12rem, 33.33%, 15rem);
}
.deck {
		display: grid;
		grid-template-columns: repeat(var(--deck-cols), 1fr);
		grid-auto-rows: var(--deck-height);
		gap: var(--gap);
		--deck-cols: 1;
		--deck-height: auto;
}
.deck > button.thumb  {
		background-color: white;
		grid-column: span 2;
		border-radius: var(--rounding);
		overflow: hidden;
}
.deck .thumb figure {
		width: 100%;
		padding: var(--gap);
}
.deck .r2 figure img {
		height: calc(2 * var(--deck-height));
}
.deck .thumb figure img {
		width: 100%;
		height: var(--deck-height);
		object-fit: contain;
}
@container main (min-width: 30rem) {
		.deck {
				--deck-cols: 4;
		}
}
@container main (min-width: 50rem) {
		.deck {
				--deck-cols: 5;
				--deck-height: 15rem;
		}
		.deck > button.c1 {
				grid-column: span 1;
		}
		.deck > button.c3 {
				grid-column: span 3;
		}
		.deck > button.c4 {
				grid-column: span 4;
		}
		.deck > button.r2 {
				grid-row: span 2;
				--deck-height: calc(2 * var(--deck-height));
		}
}
.thumb > figure {
		display: grid;
}
.thumb figure > * {
		grid-row: 1;
		grid-column: 1;
}
.thumb figcaption {
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255,255,255,0.8);
		opacity: 0;
		transition: all 0.25s ease;
		font-size: var(--font-scale-0);
		line-height: 1.2;
}
.thumb:hover figcaption {
		opacity: 1;
}
#hibadge img { width: 7rem; }
.merch {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--gap);
}
.meta .merch { justify-content: flex-start; }
.merch li {
		background-position: 0 50%;
		background-repeat: no-repeat;
		padding-left: 2em;
		margin-bottom: var(--gap);
}
.meta .merch li:first-child { padding-left: 0; }
.merch li.tshirt {
		background-image: url(../images/tshirt.svg);
}
.merch li.frame {
		background-image: url(../images/frame.svg);
}
.merch li.mug {
		background-image: url(../images/mug.svg);
}
.merch li.sticker {
		background-image: url(../images/sticker.svg);
}
.merch li.bookmark {
		background-image: url(../images/bookmark.svg);
}
.merch li.postcard {
		background-image: url(../images/postcard.svg);
}


/*BUTTONS*/
button.btn {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		outline: none;
		border: none;
		cursor: pointer;
}
.btn.btn__plain {
		background-color: transparent;
		padding: 0;
		line-height: 0.5;
		display: flex;
		align-items: center;
		gap: 0.5em;
}
.btn.btn__close {
		font-family: monospace;
		line-height: 1;
		border-radius: 50%;
		width: 1.5em;
		height: 1.5em;
		position: absolute;
		top: 1em;
		right: 1em;
}
.btn.icon:hover {
		color: var(--colour-accent);
}
.btn.icon:hover svg {
		stroke: var(--colour-accent);
}


/*POPOVER*/
[popover] {
		background: var(--colour-content-bg);
		color: var(--colour-text);
		border: none;
		padding: var(--gap);
		opacity: 0;
		/*transform: scale(0);*/
		transition: all 1s allow-discrete;
		max-width: 90vw;
}
[popover]:popover-open {
		opacity: 1;
		/*transform: scale(1);*/
}
@starting-style {
		[popover]:popover-open {
				opacity: 0;
				/*transform: scale(0);*/
		}
}
[popover] > figure {
		margin: 0;
}
[popover]::backdrop {
		backdrop-filter: blur(3px);
		background: black;
		transition: all 1s allow-discrete;
}
[popover]:popover-open::backdrop {
		background: var(--colour-overlay);
}
@starting-style {
		[popover]:popover-open::backdrop {
				background: black;
		}
}


/*FULL MENU*/
#fullmenu {
		color: var(--colour-text);
		--colour-headings: var(--colour-text-dimmed);
		max-width: none;
		width: 100vw;
		height: 100vh;
		padding: var(--spacing);
		display: flex;
		gap: var(--spacing);
		flex-wrap: wrap;
}
#fullmenu > button > svg { 
		stroke-width: 2; 
}
#fullmenu[popover] {
		transform: scale(0);
}
#fullmenu[popover]:popover-open {
		opacity: 1;
		transform: scale(1);
}
@starting-style {
		#fullmenu[popover]:popover-open {
				opacity: 0;
				transform: scale(0);
		}
}
button[popovertarget="fullmenu"] {
		position: absolute;
		top: 1em;
		right: 1em;
		display: flex;
		align-items: center;
		gap: 4px;
		color: var(--colour-text);
		font-size: 18px;
		z-index: 100;
}
button[popovertarget="fullmenu"] svg {
		width: 1.5em;
		fill: currentColor;
}
button[popovertarget="fullmenu"]:hover svg {
		fill: var(--colour-accent);
}
#fullmenu h4 {
		font-family: var(--typeface);
		font-weight: normal;
		font-size: var(--font-scale-sm);
		text-transform: uppercase;
		color: var(--colour-text-dimmed);
		border-bottom: 1px dotted var(--colour-text-dimmed);
		margin-bottom: 0.5em;
		width: fit-content;
}
#fullmenu ul {
		margin-top: 0;
}
#fullmenu > section#s1 {
		flex: 1 0 100%;
}
#fullmenu ul.primary {
		font-size: var(--font-scale-1);
}
#fullmenu ul.schemes {
		display: inline-flex;
		padding: 0.5em;
		border: 1px solid var(--colour-border);
		border-radius: var(--rounding);
}
#fullmenu > section#s2 {
		flex: 1 1 auto;
}
#fullmenu ul.social {
		margin-bottom: var(--spacing);
}
#fullmenu > section#s3 {
		flex: 1;
}
#fullmenu ul.mysites li { margin-bottom: var(--gap); }
#fullmenu ul.mysites li.this-site a { color: var(--colour-text-dimmed); }
#fullmenu ul.mysites li.this-site a::before { content: "\2192"; }
#fullmenu ul.mysites a {
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: 1em;
}
#fullmenu ul.mysites a img { width: 1.5em; }
#fullmenu ul.mysites a span {
		display: block;
		color: var(--colour-text-dimmed);
		font-size: var(--font-scale-sm);
}


/*VIEW TRANSITIONS*/
@view-transition {
		navigation: auto;
}
::view-transition-group(root) {
		animation-duration: 0.8s;
}

/*FORMS*/
input[type=email] {
		font-family: inherit;
		line-height: 1.5;
		border: 1px solid var(--colour-border);
}


/*BLOG*/
.blog-post > header > h1 {
		margin: 0;
}
.blog-post > figure > img {
		width: 100%;
}
.blog-post > footer {
		border-top: 1px dashed var(--colour-border);
}
.blog-post > footer > nav > ul {
		justify-content: space-between;
}
.blog-post > footer > nav h4 {
		font-family: var(--typeface);
		font-weight: normal;
		color: var(--colour-text-dimmed);
		margin: 0;
		font-size: var(--font-scale-sm);
}
ul.archive {
		list-style: none;
		padding: 0;
}
ul.archive > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		justify-content: space-between;
		border-bottom: 1px dashed var(--colour-border);
		margin-bottom: 0.5em;
}
ul.archive > li > time {
		color: var(--colour-text-dimmed);
		font-size: var(--font-scale-sm);
}