@font-face {
	font-family: 'Atkinson';
	src: 	url('../fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'),
	url('../fonts/Atkinson-Hyperlegible-Regular-102.woff') format('woff');
}

@font-face {
	font-family: 'Atkinson';
	font-style: italic;
	src: 	url('../fonts/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'),
	url('../fonts/Atkinson-Hyperlegible-Italic-102.woff') format('woff');

}

@font-face {
	font-family: 'Atkinson';
	font-weight: bold;
	src: 	url('../fonts/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'),
	url('../fonts/Atkinson-Hyperlegible-Bold-102.woff') format('woff');

}

@font-face {
	font-family: 'Atkinson';
	font-style: italic;
	font-weight: bold;
	src: url('/assets/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2'),
	url('/assets/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff') format('woff');
}

body {
	padding: 2rem;
	margin: 0;
	line-height: 1.5;
	font-family: Atkinson, Arial, Helvetica, sans-serif;
	font-size: calc(.6rem + 2vmin);
}

header, main {
	max-width: 54ch;
}

.sidebar body {
	font-size: 1.6rem;
}

.sidebar header, .sidebar main {
	max-width: calc(800px - 2rem);
}

img {
	max-width: 100%;
}

dl {
	display: flex;
	flex-wrap: wrap;
}

dt, dd {
	margin: 0;
	padding: 0;
}

dt {
	width: 13em;
}

dd {
	width: calc(100% - 13em);
}


.logo {
	width: 50%;
}

time.calendar {
	display: inline-block;
	width: 7em;
	text-align: right;
}

time.calendar::after {
	content: " — ";
}

.guest {
	font-weight: bold;
}

.guest::after {
	content: ": ";
}

h1, h2, h3 {
	line-height: 1.1;
}

* + h1,
* + h2, h2:first-child,
* + h3, h3:first-child {
	margin-top: 2em;
}

hgroup h1,
hgroup h2,
hgroup h3 {
	margin-bottom: 0;
}

hgroup .subline {
	margin-top: 0;
	font-weight: bold;
}

li + li {
	margin-top: .5em;
}

:root {
	--fishbowl-seats: 4;
}

.fishbowl-grid {
	width: 100%;
	display: grid;
	grid-column-gap: .5em;
	grid-template-columns: 6ch repeat(calc(var(--fishbowl-seats) - 1), 1fr);
}

.sidebar .fishbowl-grid {
	margin: 0;
}

.fishbowl-seat {
	padding: 0 .5em;
}

.fishbowl-seat:first-child {
	padding-left: 1em;
}

.fishbowl-slot {
	grid-column: 1 / span var(--fishbowl-seats);
	grid-row: var(--fishbowl-slot);
	width: auto;
	padding: .5em;
	padding-left: 1em;
	border-bottom: 1px dotted #000;
	box-sizing: border-box;
	position: relative;
}

.sidebar .fishbowl-slot {
	padding: .25em .25em .25em 1em;
}

.fishbowl-slot-final {
	grid-column: 1 / span var(--fishbowl-seats);
}

.fishbowl-slot:first-child {
	border-top: 1px dotted #000;
}

.fishbowl-slot[aria-current] {
	background-color: #555;
	color: #fff;
}

.fishbowl-slot[aria-current]:before {
	content: '';
	width: .6em;
	height: .6em;
	background-color: #fff;
	display: block;
	position: absolute;
	transform: translate(-.3em, -.3em) rotate(45deg);
	top: 50%;
	left: 0;
}

.fishbowl-person {
	grid-column: var(--fishbowl-person);
	grid-row: var(--fishbowl-slot) / span var(--fishbowl-length);
	outline: 1px solid #000;
	padding: .5em;
	width: auto;
	overflow-wrap: anywhere;
	background-color: #eee;
	position: relative;
	box-sizing: border-box;
	z-index: 1;
}

.sidebar .fishbowl-person {
	padding: .25em;
}

.fishbowl-person-final {
	grid-column: 2 / span calc(var(--fishbowl-seats) - 1);
	grid-row: var(--fishbowl-slot);
	outline: none;
	background-color: transparent;
	font-style: italic;
}

button, input {
	font: inherit;
	padding: .2em .5em;
	border: 2px solid #000;
}

input {
	box-sizing: border-box;
	width: 100%;
}

::placeholder {
	font-style: italic;
	color: #757575;
}

::-moz-placeholder {
	font-style: italic;
	color: #757575;
}

::-ms-input-placeholder {
	font-style: italic;
	color: #757575;
}

.fishbowl-remove {
	display: none;
	font-size: 50%;
	color: red;
	border-color: red;
	background-color: transparent;
	font-weight: bold;
}

.fishbowl-person:hover .fishbowl-remove {
	display: inline;
}

.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

[aria-live] p {
	border: 5px double #007500;
	padding: .5em;
	color: #007500;
}