/*@media NOT (prefers-reduced-motion) {*/
/*	@view-transition {*/
/*		navigation: auto;*/
/*	}*/
/*	::view-transition-group(root) {*/
/*	    animation-duration: 0.1s;*/
/*	}*/
/*}*/


/*::view-transition-old(root) {*/
/*   animation-delay: 300ms;*/
/*}*/

/*::view-transition-new(root) {*/
/*	animation: circle-in 300ms;*/
/*}*/

/*@keyframes circle-in {*/
/*	from {clip-path: circle(0% at 96% 1%)}*/
/*	to {clip-path: circle(140% at 96% 1%)}*/
/*}*/

.material-icon {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	vertical-align: bottom;
	user-select: none;
}

.material-icon.warning {
	--icon-color: red;
	color: red;
}

.material-icon::after {
    content: attr(data-icon);
}

/* Reset */

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

* {
	margin: 0;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	min-height: 100dvh;
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
button, input, label {
	line-height: 1.3;
	text-wrap: balance;
	overflow: hidden;
}

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

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 1rem;
}

img.fhrrating {
	width: 200px;
	height: 48px;
	justify-self: end;
}

hr {
  display: none;
}

input, button, textarea, select {
	font: inherit;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--whiteblack);
}
.radios {
	display: flex;
	gap: var(--padding);
}

figure {
	margin-bottom: var(--padding);
}

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

/* Theme */

:root {
	--font-scale: 1.1;
	--p: 1rem;
	--h5: calc(var(--p) * var(--font-scale));
	--h4: calc(var(--h5) * var(--font-scale));
	--h3: calc(var(--h4) * var(--font-scale));
	--h2: calc(var(--h3) * var(--font-scale));
	--h1: calc(var(--h2) * var(--font-scale));
	--hero: clamp(var(--h1), 6vw, 10vw);
	--small: calc(var(--p) / var(--font-scale));
	--x-small: calc(var(--small) / var(--font-scale));
	--padding: 1.5rem;
	--border-radius: .6rem;
	--border: #66666666;
	--compass: 0deg;
	--compassoffset: 0deg;
	--daytime: #66A2D2DD;
	--goldenhour: rgba(237, 127, 93, 0.87);
	--civiltwilight: #5b73b9DD;
	--nauticaltwilight: #313e65DD;
	--astronomicaltwilight: #21252dDD;
	--darkofnight: #1E1E1EDD;
	--primary: hsl(22, 96%, 50%);
	--primary-alt: hsl(22, 96%, 45%);
	--link: hsl(191, 78%, 50%);
}

:root[data-theme="light"] {
	--text: #000000EE;
	--background: hsl(22, 60%, 90%);
	--secondary: hsl(151, 77%, 30%);
	--secondary-alt: hsl(151, 77%, 20%);
	--accent: hsl(191, 78%, 75%);
	--accent-alt: hsl(191, 78%, 40%);
	--content-background: #FBFBFB;
	--blackwhite: #FFFFFFDD;
	--whiteblack: #000000CC;
	--black: #000000CC;
	--white: #FFFFFFEE;
}

:root[data-theme="dark"] {
	--text: #EEEEEECC;
	--background: hsl(17, 12%, 17%);
	--secondary: hsl(151, 77%, 35%);
	--secondary-alt: hsl(151, 77%, 40%);
	--accent: hsl(191, 58%, 25%);
	--accent-alt: hsl(191, 68%, 40%);
	--content-background: #222222;
	--blackwhite: #000000DD;
	--whiteblack: #FFFFFFCC;
	--black: #000000CC;
	--white: #FFFFFFEE;
}

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

a, a:visited {
	color: inherit;
	text-decoration: var(--link) 2px underline;
	text-underline-offset: 2px;
	cursor: pointer;
	font-weight: 500;
	width: fit-content;
}
a.panel-body {
	width: 100%;
}
a.current .material-icon {
	  font-variation-settings: 'FILL' 1;
}
header a, nav a, footer a, #filters a, #results a {
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	font-weight: unset;
}
#catlinks {
	display: none;
}

a.current {
	font-weight: 600;
}

h1, h2, h3, h4, h5 {
	font-family: 'Merriweather', serif;
	font-weight: 700;
}
h1 {
	font-size: var(--h1);
}
h2 {
	font-size: var(--h2);
}
.content.fill > h2 {
	margin-top: .5rem;
	padding-top: .5rem;
	text-wrap: balance;
}
h3 {
	font-size: var(--h3);
}
summary h3 {
	display: inline-block;
}
h4 {
	font-size: var(--h4);
}
h5 {
	font-size: var(--h5);
}
th {
	text-align: left;
}
.title {
	font-weight: 700;
	text-wrap: pretty;
}
.related {
	padding-block-start: calc(var(--padding) / 2);
	opacity: .8;
	font-size: var(--small);
}
.small {
	font-size: var(--small);
}
.x-small {
	font-size: var(--x-small);
	text-wrap: pretty;
}
.centered {
	text-align: center;
	justify-content: center;
}
.right {
	font-family: "Poppins", sans-serif;
	float: right;
}
.padded {
	padding: var(--padding);
}

ul[class], ol[class], ul[class] li, ol[class] li {
	list-style: none;
}
ul[class], ol[class] {
	padding: 0;
}

ol.chart {
	padding: 0 var(--padding);
}
ol.chart li {
	list-style: decimal;
	padding-block: calc(var(--padding) / 2);
	margin-left: var(--padding);
	font-weight: bold;

}
ol.chart li::marker {
    font-size: var(--h2);
	color: var(--primary);
}
ol.chart .chartrow {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: calc(var(--padding) / 4);
}

.closed {
	filter: grayscale(1);
	opacity: .65;
}
.tempclosed {
	filter: grayscale(.5);
	opacity: .65;
}
.hint {
	filter: grayscale(1);
	opacity: .35;
}
.vert-center {
	align-content: center;
}
.nowrap {
	text-wrap: nowrap;
}
figcaption {
	font-size: var(--small);
}

form {
	display: grid;
	gap: var(--padding);
	grid-template-columns: auto minmax(20rem, auto) 2fr;
	align-items: center;
}
form span {
	position: relative;
}

form label {
	font-weight: bold;
	justify-self: end;
}
form .form-note {
	grid-column: 1 / -1;
}
.account-links {
	display: flex;
	gap: var(--padding);
	flex-wrap: wrap;
	padding-block-end: calc(var(--padding) / 4);
}

details summary {
	cursor: pointer;
	width: fit-content;
	transition: margin 150ms ease-out;
	color: var(--primary);
	font-weight: 500;
}
details[open] summary {
	margin-bottom: 10px;
}

body {
	font-family: "Poppins", sans-serif;
	font-optical-sizing: auto;
	font-size: var(--p);
	color: var(--text);
	max-height: 100vh;
	max-height: 100dvh;
	display: grid;
	grid-template-areas:
		'header'
	    'main'
	    'footer';
	grid-template-rows: auto 1fr auto;
	background: var(--content-background);
}
body.cats {
	grid-template-areas:
		'header header'
	    'main nav'
	    'footer footer';
}

header {
	grid-area: header;
	display: grid;
	height: 60px;
	grid-template-areas: 'logo navbar weather icon icon';
	grid-template-columns: auto 1fr auto auto auto;
	gap: var(--padding);
	background: var(--primary);
	color: var(--white);
	padding: 0 var(--padding);
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px;
	align-items: center;
}
header > #logo {
	display: flex;
	font-size: var(--h5);
}
header .material-icon {
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	vertical-align: top;
}
header .material-icon.spinning {
	animation: spin 1s linear infinite;
}

footer {
	grid-area: footer;
	display: grid;
	grid-template-columns: 1fr 160px auto;
	padding: var(--padding);
	font-size: var(--small);
	text-wrap: balance;
	background: var(--blackwhite);
	box-shadow: inset rgba(33, 35, 38, 0.1) 0 5px 10px;
}

footer .about {
	display: flex;
}
footer .about li:not(.copy) {
	padding-inline-start: 1rem;
}
footer .about a {
	opacity: .65;
}
footer ul {
	display: flex;
	flex-direction: column;
	gap: calc(var(--padding) / 1.5);
}
footer .material-icon {
    font-size: inherit;
    vertical-align: middle;
}
footer .dev {
	opacity: .5;
}

#all {
	height: max-content;
	padding-top: 30px;
}

#all ul {
	padding: 0 var(--padding);
}
nav li {
	padding: 2px;
}
#all li a {
    font-weight: 700;
}
#all li ul a {
    font-weight: 400;
}

#favouritesbar {
	grid-area: navbar;
	top: 0;
	display: flex;
	grid-auto-rows: 1fr;
	gap: calc(var(--padding) * 2);
    margin-inline: auto;
	transition: bottom 0.2s;
	z-index: 1010;
}

.pagination {
	 margin-inline: auto;
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
}
.pagination.pageno {
	 padding: 0;
}
.pagination span {
	 background-color: var(--background);
	 padding: calc(var(--padding) / 4);
}
.pagination .disabled {
	opacity: .5;
	 cursor: default;
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--padding) / 2);
	align-items: center;
}
.cluster.plain {
	justify-content: space-evenly;
}
.cluster > span {
	--background: var(--primary);
	--text: var(--white);
	cursor: default;
	border-radius: calc(var(--border-radius) / 2);
	border: 2px solid transparent;
	padding: calc(var(--padding) / 8) calc(var(--padding) / 3);
	background: var(--background);
	color: var(--text);
	font-size: var(--x-small);
	text-transform: uppercase;
	font-weight: 500;
	opacity: .9;
}
.cluster > span.xmas {
	--background: red;
}
.cluster > span.outlined {
	background: none;
	--text:  var(--background);
	border: 2px solid var(--text);
}
.cluster.filters {
	gap: calc(var(--padding) / 1.5);
}
.cluster.filters > span {
	padding: calc(var(--padding) / 5) calc(var(--padding) / 3) calc(var(--padding) / 5) calc(var(--padding) / 4);
	--background: var(--whiteblack);
	--text: var(--blackwhite);
	font-size: var(--small);
	font-weight: 600;
	cursor: pointer;
	opacity: 1;
}
.cluster.filters > span.outlined {
	--background: none;
	--text: var(--whiteblack);
	opacity: .65;
}
.cluster img {
	max-block-size: 50px;
}
.cluster .material-icon {
	vertical-align: middle;
}
.cluster > .logo {
	border-radius: calc(var(--border-radius) / 2);
}
.cluster.filters.types {
	margin: 0 auto;
	justify-content: center;
}
.cluster.filters.types > span {
	padding: calc(var(--padding) / 6) calc(var(--padding) / 3) calc(var(--padding) / 6) calc(var(--padding) / 4)
}

button {
	background-color: var(--background);
	cursor: pointer;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: calc(var(--border-radius) / 2);
	border: 1px solid;
	padding: calc(var(--padding) / 3);
	color: var(--whiteblack);
}
button:active, button:focus-visible {
	background-color: color-mix(in srgb, var(--background), white 10%);
}

a:hover .material-icon, header span:hover .material-icon, button:hover .material-icon, .filterlink:hover .material-icon, #gttLink:hover .material-icon {
    transform: scale(1.1);
	/*font-variation-settings: 'FILL' 1;*/
}
span.material-icon:has(~ a:hover), img.social-icon:has(~ a:hover) {
	transform: scale(1.1);
	/*font-variation-settings: 'FILL' 1;*/
}

blockquote {
	font-family: "Merriweather", serif;
	font-style: italic;
	font-size: var(--h5);
	opacity: 0.65;
	padding-left: calc(var(--padding) / 2);
	text-wrap: balance;
	border-left: 3px solid var(--primary);
}

cite {
	--citeSize: var(--h5);
	font-size: var(--citeSize);
	font-weight: 300;
	display: block;
}

:not(h1) ~ cite {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

address {
	text-wrap: balance;
	font-size: var(--p);
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding);
	font-weight: 500;
	align-items: center;
}

address .distance {
	margin-inline: auto;
}

.day {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.icon {
	max-height: 1rem;
	max-width: 1rem;
	display: inline-block;
	vertical-align: baseline;
}

.distance {
	text-wrap: balance;
	font-size: small;
	line-height: 1.2;
}
.distance.guide-distance {
	color: var(--secondary);
	font-style: initial;
	font-size: var(--p);
	text-align: center;
}
.distance.guide-distance > .bearing {
	font-weight: 600;
}
.distance:first-letter {
	text-transform: capitalize;
}
.distance > .bearing {
	font-size: inherit;
	vertical-align: middle;
}
.duration {
	font-size: small;
	opacity: 0.95;
}

aside {
	display: grid;
	height: max-content;
	justify-content: start;
}

.content {
	container: content / inline-size;
	--full: minmax(0, 100vw);
	--content: calc(100% - var(--padding) * 2);
	grid-area: main;
	display: grid;
	grid-template-columns:
        [full-start] var(--full) [content-start] var(--content) [content-end] var(--full) [full-end];
	align-content: start;
	gap: var(--padding);
	padding-bottom: var(--padding);
}
.content > * {
	grid-column: content;
}
.content .full {
	grid-column: full;
}
.content h1:not(#hero) {
	padding-top: var(--padding);
}

.auto-grid {
	grid-column: content;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: calc(var(--padding) / 2);
}
main.content.fill .auto-grid, .auto-grid.fill {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
}
.extras {
	grid-column: content;
}
.extras ul {
	display: flex;
	flex-wrap: wrap;
}

#town {
	display: grid;
	grid-template-areas:
		'heading heading'
		'description brief';
	grid-template-columns: 3fr 1fr;
	gap: calc(var(--padding) / 1.5);
	align-items: start;
}
#details {
	display: grid;
	grid-template-areas:
		'title title title'
		'info description map'
		'favs brief map'
		'facilities facilities map';
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: var(--padding) calc(var(--padding) * 1.25);
	align-items: start;
}
#details.foodanddrink, #details.place {
	grid-template-areas:
		'title title title'
		'info description map'
		'info brief map'
		'favs openinghours map'
		'facilities facilities map';
	grid-template-columns: 1.2fr 1fr 1fr;
}
#info {
	display: grid;
	gap: var(--padding);
	color: var(--text);
	position: relative;
	cursor: default;
	overflow: hidden;
}
#account {
	display: grid;
	gap: calc(var(--padding) / 2);
}
#details h1 {
	grid-area: title;
}
#details #info {
	grid-area: info;
}
#info .title {
	font-size: var(--h5);
}
#details .cluster.plain > span {
	font-size: var(--small);
	font-weight: 400;
	text-transform: none;
	border: none;
	background: none;
	color: var(--whiteblack);
}
#details .cluster.plain > span.outlined {
	border: 1px solid var(--whiteblack);
}
#contact {
    display: flex;
	flex-wrap: wrap;
    width: fit-content;
    gap: var(--padding);
}
#add-buttons {
	grid-area: favs;
    display: grid;
	gap: calc(var(--padding) / 2);
    grid-template-columns: 1fr 2fr 2fr 1fr;
    font-size: var(--small);
	border-radius: 0;
	padding:0;
}
#add-buttons button {
	background-color: transparent;
}
#add-buttons button.active {
	color: var(--secondary);
	font-variation-settings: 'FILL' 1;
}
#ratings {
	display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
#openinghours {
	grid-area: openinghours;
	display: grid;
	gap: calc(var(--padding) / 2);
}
#openinghours .title {
	font-family: "Poppins", sans-serif;
	font-size: var(--p);
}
#photos {
	container: photos / inline-size;
	aspect-ratio: 16 / 9;
	/*display: flex;*/
	/*column-gap: var(--padding);*/
	/*overflow-x: scroll;*/
	/*overflow-y: hidden;*/
	/*scroll-snap-type: x mandatory;*/
	/*scrollbar-color: var(--primary) transparent;*/
}
.photo {
	aspect-ratio: 16 / 9;
}
.whereisit {
	position: absolute;
    width: 100%;
	border-radius: 0 var(--border-radius);
	opacity: 0.6;
}
.panel:has(.whereisit) {
	padding-top: calc(var(--padding) * 9.5);
}
.placeholder {
	aspect-ratio: 16 / 9;
}
html[data-theme='dark'] .photo, html[data-theme='dark'] img:not(.weathericon) {
	filter: brightness(.85);
}
img.social-icon {
	max-height: 1.3rem;
    max-width: 1.3rem;
	vertical-align: text-top;
}
html[data-theme='dark'] img.social-icon {
	filter: invert(1) brightness(.85);
}
html[data-theme='dark'] #hero {
	opacity: .85;
}

#photos .photo {
	border-radius: var(--border-radius);
	/*scroll-snap-align: center;*/
	--x: 50%;
	--y: 50%;
	transform: scale(var(--zoom));
	transform-origin: var(--x) var(--y);
	clip-path: inset(
		calc((1 - 1/var(--zoom)) * (var(--y)))
		calc((1 - 1/var(--zoom)) * (100% - var(--x)))
		calc((1 - 1/var(--zoom)) * (100% - var(--y)))
		calc((1 - 1/var(--zoom)) * (var(--x))) round calc(var(--border-radius) / 2)
  );
  cursor: zoom-in;
}
#photos .photo.zoomed {
  --zoom: 2;
	cursor: zoom-out;
}
/*html[data-theme='dark'] .photo, html[data-theme='dark'] img:not(.weathericon) {*/
/*	filter: sepia(100%) hue-rotate(190deg) saturate(110%) brightness(0.35);*/
/*}*/

#hero {
	grid-column: full;
	display: grid;
	align-content: start;
	text-transform: uppercase;
	line-height: 1;
	background-size: cover;
	background-position: center 65%;
	/*aspect-ratio: 16 / 3;*/
	height: 18vw;
	border-radius: 0 0 calc(var(--border-radius)*2) 0;
	font-weight: 700;
	font-size: var(--hero);
	color: var(--blackwhite);
	margin-right: var(--padding);
	box-shadow: rgba(33, 35, 38, 0.1) 0 5px 10px;
	letter-spacing: 3px;
	position: relative;
	pointer-events: none;
}
#hero.category {
	color: var(--black);
	background-position: center 65%;
}
#hero span {
	opacity: .85;
	padding: var(--padding);
}
#hero cite {
	--citeSize: var(--h4);
	text-transform: none;
}
#heropanels {
	display: grid;
	grid-template-areas:
		'birchington broadstairs margate ramsgate westgate-on-sea'
		'hints hints hints hints hints';
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
	gap: var(--padding);
	align-items: start;
}
#heropanels > .heropanel {
	--border-color: var(--link);
}
#heropanels > .heropanel.margate{
	grid-area: margate;
}
#heropanels > .heropanel.broadstairs{
	grid-area: broadstairs;
}
#heropanels > .heropanel.ramsgate{
	grid-area: ramsgate;
}
#heropanels > .heropanel.birchington{
	grid-area: birchington;
}
#heropanels > .heropanel.westgate-on-sea{
	grid-area: westgate-on-sea;
}
#heropanels > .heropanel.hints{
	grid-area: hints;
	opacity: .5;
}
#heropanels > .heropanel.hints .panel-body {
	padding: calc(var(--padding) / 4);
}
#heropanels > .heropanel > .photo {
	padding: calc(var(--padding) / 2);
    aspect-ratio: auto;
	height: 11rem;
	font-size: var(--h1);
	color: var(--blackwhite);
}

#heropanels > .heropanel > .popover {
    position: absolute;
	bottom: -100%;
    padding: calc(var(--padding) / 2);
	width: 100%;
    background: var(--accent-alt);
    color: var(--blackwhite);
	opacity: .9;
	transition: bottom 0.2s ease-in-out;
}
#heropanels > .heropanel:hover > .popover {
	bottom: 0;
}

#map-container {
	grid-area: map;
	display: grid;
	gap: var(--padding);
	color: var(--text);
	position: relative;
	cursor: default;
	overflow: hidden;
}
#map {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 67.5%;
	border-radius: var(--border-radius);
}

#brief {
	grid-area: brief;
}
#description {
	grid-area: description;
	display: grid;
	gap: calc(var(--padding) / 2);
	column-count: 1;
}
#description p {
	padding-inline: calc(var(--padding) * 0.1);
	break-inside: avoid-column;
}
#town #description {
	display: block;
}
:not(#details #description) > p:not(:last-child) {
	padding-block-end: calc(var(--padding) / 2);
}

#transport, #facilities {
	display: flex;
	gap: var(--padding);
	flex-wrap: wrap;
}
#transport .title, #facilities .title {
	flex-basis: 100%;
	font-size: var(--h3);
}
.transportmode, .facility {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr;
	gap: calc(var(--padding) / 8);
}
.transportmode .distance, .facility .distance {
	text-wrap: nowrap;
}
.transportmode .bearing, .facility .bearing {
	font-size: var(--small);
	align-self: center;
	width: fit-content;
	justify-self: center;
	font-weight: bold;
}
#facilities {
	grid-area:facilities;
	grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
}

.panel {
	--text: var(--whiteblack);
	--icon-color: var(--primary-alt);
	display: grid;
	border-radius: calc(var(--border-radius)*2) calc(var(--border-radius)*1) calc(var(--border-radius)*3) calc(var(--border-radius)*1);
	background: var(--background);
	color: var(--text);
	position: relative;
	cursor: pointer;
	grid-column: span 2;
	overflow: hidden;
	transition: all 200ms;
}
.panel.double {
	grid-column: span 4;
}
.panel.double-height {
    grid-row: span 2;
}
.panel.triple-height {
    grid-row: span 3;
}
.panel:not(.info) {
	--border-color: var(--icon-color);
	background-clip: content-box;
	border-bottom: 2px solid var(--border-color);
}
.panel:not(.info):hover, .panel:not(.info):active {
	box-shadow: rgba(33, 35, 38, 0.1) 0 5px 10px;
	transition: all 100ms;
	opacity: .95;
}
.free::before {
	content: "FREE";
	position: absolute;
	top: 12px;
    right: -22px;
	width: 90px;
	letter-spacing: 2px;
	background: var(--primary);
	color: var(--white);
	transform: rotate(45deg);
	text-align: center;
	font-weight: 500;
	z-index: 1;
}
.recommended::after {
	content: "TOP PICK";
	position: absolute;
	top: 28px;
	right: -28px;
	width: 137px;
	background: var(--accent-alt);
	color: var(--white);
	transform: rotate(45deg);
	text-align: center;
	font-weight: 500;
	z-index: 1;
}
.panel:has(.photo) {
	grid-template-rows: auto 1fr;
}

.panel-body {
	display: grid;
	gap: calc(var(--padding) / 2);
	padding: var(--padding);
	z-index: 1;
}
.panel-body .contact {
	margin-block: calc(var(--padding) /4);
}
.panel-body .contact a {
	font-weight: 500;
}
.panel-body .gps {
	font-weight: 600;
}
.panel-body .budget {
	text-wrap: balance;
	font-weight: 600;
}
.panel-body .type {
	text-wrap: balance;
	font-weight: 500;
}
.panel .two-cols {
	display: grid;
    grid-template-columns: 1fr auto;
}
.panel-body > .logo {
	max-height: 6ch;
	opacity: 0.2;
	margin-inline: auto;
	mix-blend-mode: luminosity;
}
.crest {
	margin: 1rem 1rem auto auto;
	width: max(64px,var(--hero));
	height: max(64px,var(--hero));
	opacity: .85;
}
.primary {
	color: var(--primary);
}
.secondary {
	color: var(--secondary);
}
.accent {
	color: var(--accent);
}
.note {
	font-weight: 300;
	font-style: italic;
	font-size: var(--small);
}
.open {
	color: var(--secondary);
}

.panel.new {
	--background: var(--secondary);
	--icon-color: var(--secondary-alt);
}
.panel.new .cluster > span {
	--background: var(--secondary-alt);
}

.panel.recommended {
	--background: var(--accent);
	--icon-color: var(--accent-alt);
	--border-color: var(--accent-alt);
}
.panel.recommended .cluster > span {
	--background: var(--accent-alt);
}

.panel.info, .panel.info:active {
	--background: var(--accent);
	--icon-color: var(--accent-alt);
	cursor: default;
}
.panel.outlined, .panel.outlined:active {
	--background: transparent;
	border: 2px solid var(--accent);
}

div:not(#results) .panel.result {
	font-size: var(--small);
}
.panel.result .panel-body {
    grid-template-columns: auto 1fr;
	gap: calc(var(--padding) / 4);
}

.panel.weather, .panel.weather:active, .panel.dayinfo, .panel.dayinfo:active {
	--background: var(--dayinfostage);
	--text: var(--white);
	font-size: var(--small);
	align-items: normal;
	opacity: 1;
}
.panel.weather .panel-body, .panel.weather:active .panel-body {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	line-height: 1.3;
}
.panel.weather.compact .panel-body, .panel.weather.compact:active .panel-body {
	grid-template-columns: 1fr;
}
.panel.seaweather {
	--text: var(--whiteblack);
	font-size: var(--small);
}
.panel.compact.seaweather .panel-body {
	grid-template-rows: auto auto 1fr 2fr auto;
	align-items: center;
}
.seaweather.date {
	font-size: var(--h4);
	font-weight: 500;
}
.seatemperature {
	font-size: var(--h2);
	font-weight: 500;
}
.seaweather .waves .material-icon {
	border: 2px dashed var(--text);
	border-radius: 100%;
	padding: 10px;
	margin-bottom: .5rem;
}

.tiny-panel {
	display: flex;
	font-family: "Poppins", sans-serif;
	font-size: var(--x-small);
	font-weight: 400;
	align-items: center;
	cursor: help;
}
.tiny-panel img {
	height: var(--h1);
	padding-right: calc(var(--padding) / 8);
	filter: saturate(0.5) brightness(2.5);
}

.panel.dayinfo, .panel.dayinfo:active {
	align-items: center;
}
.panel.dayinfo .small {
	opacity: .7;
}
.panel.dayinfo .large {
	font-size: var(--h3);
}
.panel.dayinfo.compact .large {
	font-size: var(--h4);
}

.panel.beach {
	align-items: normal;
}
.panel.beach .panel-body {
	grid-template-rows: auto auto minmax(50px, auto) 1fr auto;
}
.panel.beach.geo .panel-body {
	grid-template-rows: auto auto auto minmax(50px, auto) 1fr auto;
}

.panel.foodanddrink .panel-body {
	grid-template-rows: auto auto auto 1fr auto;
}
.panel.foodanddrink.geo .panel-body {
	grid-template-rows: auto auto auto auto 1fr auto;
}

.panel.place .panel-body, .panel.transport .panel-body {
	grid-template-rows: auto auto auto 1fr;
}
.panel.place.geo .panel-body, .panel.transport.geo .panel-body {
	grid-template-rows: auto auto auto auto 1fr;
}

.panel.poi .panel-body {
	grid-template-rows: auto auto auto 1fr;
}
.panel.poi.geo .panel-body {
	grid-template-rows: auto auto auto auto 1fr;
}
.panel.haunted {
	filter: grayscale(90%);
}
.panel.haunted .panel-body {
	grid-template-rows: auto 1fr;
}
.flicker {
	animation: flicker 6s infinite alternate;
}
@keyframes flicker {
	84% {
		opacity: 1;
		transform: none;
	}
	86% {
		opacity: .8;
		transform: skew(20deg, 0deg);
	}
	87% {
		opacity: 1;
		transform: none;
	}
	88% {
		opacity: .2;
		transform: skew(-50deg, 0deg) translate(0, -1px);
	}
	89% {
		opacity: 1;
		transform: none;
	}
}
.panel.compact {
	align-items: normal;
	grid-column: span 1;
}
.panel.compact.double {
	grid-column: span 2;
}
.panel.compact.double-height {
	grid-row: span 2;
}
.compact.free::before {
	font-size: var(--x-small);
	top: 11px;
	right: -19px;
	width: 75px;
}
.compact.recommended::after {
	font-size: var(--x-small);
	top: 24px;
	right: -24px;
	width: 110px;
	display: none;
}
.panel.compact .panel-body {
	grid-template-rows:  auto 1fr auto auto;
	--padding: 1rem;
	--h2: var(--h5);
	--p: var(--small);
	--detail-weight: normal;
	min-height: 160px;
	gap: calc(var(--padding) / 4);
}
.panel.compact .panel-body cite {
	--citeSize: var(--p);
	padding-top: calc(var(--padding) / 6);
}
.panel.compact .panel-body .budget {
	font-size: var(--small);
	color: var(--icon-color);
}
.panel.compact .panel-body .type {
	display: grid;
	grid-template: 1fr / 1fr auto;
	align-items: end;
}
.panel.compact .panel-body .type .icons {
	text-align-last: end;
	white-space: nowrap;
}
.panel.compact.beach .icons {
	opacity: .7;
}
.panel .icons, .panel .type .material-icon {
	color: var(--icon-color);
}
.panel.compact.geo .panel-body {
	grid-template-rows: auto auto 1fr auto auto;
}
.panel.compact.category .panel-body {
	grid-template-rows: auto 1fr;
}
.panel.compact.beach .panel-body {
	grid-template-rows: 1fr auto auto auto;
}
.panel.compact.beach.geo .panel-body {
	grid-template-rows: 1fr auto auto auto auto;
}
.panel.compact.foodanddrink .panel-body {
	grid-template-rows: auto auto 1fr;
}
.panel.compact.foodanddrink.geo .panel-body {
	grid-template-rows: auto auto auto 1fr;
}
.panel.compact.foodanddrink .small, .panel.compact.foodanddrink address {
	font-weight: 400;
}
#events {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: var(--padding);
}
.panel.compact.event .panel-body {
	grid-template-rows: auto auto auto 1fr auto auto;
	gap: calc(var(--padding) / 2);
	min-height: unset;
}
#events h3 {
	font-size: var(--h5);
	font-weight: 700;
}
#town #events {
	column-span: all;
	margin: var(--padding) 0 calc(var(--padding) / 2) 0;
}
#brief #events {
	margin: var(--padding) 0 0 0;
}
.event {}

.event.inthepast {
	display: none;
}
.event.advert {

}
.event h2 {
    position: absolute;
    right: calc(var(--padding) / 2);
    writing-mode: tb;
    color: var(--accent);
    font-family: poppins, sans-serif;
}

.event .material-icon {
	writing-mode: lr;
}
.event .brief {
	font-family: "Merriweather", serif;
	font-style: italic;
	opacity: 0.65;
	margin-inline-end: 1rem;
 }
.event p {
	text-wrap: balance;
 }

#route, #theroute {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: calc(var(--padding) / 2);
	gap: calc(var(--padding) / 4);
}

#gttLink {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	opacity: 0;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	transform: translateY(20px);
	transition: opacity 0.1s, transform 0.2s;
	z-index: 1;
}
#gttLink.active {
	opacity: .8;
	transform: translateY(0);
	transition: opacity 0.1s, transform 0.2s;
}
#gttLink > .material-icon {
	font-size: 56px;
	-webkit-tap-highlight-color: transparent;
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

div#compass {
    width: 16px;
    height: 16px;
}

dialog[open]::backdrop {
	background-color: rgb(0 0 0 / 25%);
}

.policy {
	background: var(--blackwhite);
	color: var(--text);
	border-radius: var(--whiteblack);
	margin: auto;
	max-width: 400px;
}
.policy p {
	grid-column: span 2;
}
#policybuttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.policy button {
	display: block;
	margin: calc(var(--padding) / 4);
	padding: 6px;
	border: 2px solid var(--text);
	background: none;
}
.policy button:focus, .policy button:focus-visible {
	outline: none;
}
.policy button.policygo {
	background: var(--secondary);
	color: var(--white);
}

#custompolicy[open] {
    display: grid;
    gap: calc(var(--padding) / 2);
	grid-auto-columns: 1fr auto;
	height: fit-content;
}
.cookiedescription {
	grid-column: span 2;
	font-size: var(--small);
	font-weight: 300;
}
#custompolicy label {
    font-weight: 600;
	text-wrap: nowrap;
	font-size: var(--h5);
}
#custompolicy input {
    align-self: center;
    justify-self: end;
	-webkit-tap-highlight-color: transparent;
}
textarea,input,select {
	padding: calc(var(--padding) / 2);
	background: var(--blackwhite);
	color: var(--whiteblack);
	border: 1px solid var(--text);
	border-radius: var(--border-radius);
	width: 100%;
	position: relative;
}
select {
	appearance: none;
}
#db-form input:not([type="checkbox"]) {
	width: fit-content;
}
select:focus-within + span.input-icon {
	transform: rotateZ(180deg);
	transition: 0.1s transform;
}
select.key {
	font-weight: bold;
}
select.filters {
	padding: calc(var(--padding) / 3);
    border-radius: calc(var(--border-radius) / 2);
	border: 2px solid var(--text);
	text-align: center;
	font-weight: 600;
}
#search {
	width: unset;
}
input[type=radio] {
	cursor: pointer;
	margin: 0 1em;
	width: unset;
	accent-color: var(--primary);
}
input[type=checkbox] {
    appearance: none;
    display: inline-grid;
    position: relative;
    background-color: #98989d;
	height: 24px;
	width: 48px;
    border-radius: 20px;
	cursor: pointer;
}
input[type=checkbox]:checked {
	appearance: none;
    display: inline-grid;
    position: relative;
    background-color: var(--secondary);
    border-radius: 20px;
}
input[type=checkbox]::before {
    content: "〇" / "";
    font-weight: bold;
    position: absolute;
	font-size: var(--p);
    margin: 1px 6px;
    top: 0;
	right: 0;
    color: var(--white);
	transition: right 200ms;
}
input[type=checkbox]:not(:checked)::before {
    translate: -20px 0;
}
input[type=checkbox]:checked::before {
    content: "I" / "";
    right: 4px;
	margin: 0 6px;
}
.invalid-input {
	color: var(--primary);
}
:user-invalid {
    color: var(--primary);
	outline: auto;
}
label:has(+ :user-invalid), label:has(+ span :user-invalid) {
    color: var(--primary);
}
#account-form input:valid:not(:placeholder-shown):focus {
	outline-color: var(--secondary);
}
#account-form input:invalid:not(:placeholder-shown):focus {
	outline-color: var(--primary-alt);
}
span.hasnote {
    display: flex;
    gap: var(--padding);
    align-items: center;
}

span.input-icon {
	font-family: 'Material Symbols Outlined', sans-serif;
	position: absolute;
	font-weight: bold;
	padding: calc(var(--padding) / 2);
	right: 0;
	cursor: pointer;
	transition: 0.1s transform;
}

select + span.input-icon {
	pointer-events: none;
}

.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border:0;
}
html[data-theme='dark'] .responsive-iframe {
	filter: opacity(0.85) brightness(0.7)  contrast(1.5);
}

#toast {
	min-width: fit-content;
    background-color: var(--background);
    color: var(--text);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: calc(var(--padding) / 2) var(--padding);
    position: fixed;
	left: calc(var(--padding) * 1.5);
	right: calc(var(--padding) * 1.5);
	text-align: center;
	font-weight: 600;
    z-index: 1;
    font-size: var(--p);
    transform: translateY(-100px);
    transition: 0.8s transform;
	transition-delay: 1.5s;
    transition-timing-function: cubic-bezier(.38,.52,.37,1);
	text-wrap: balance;
	box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px;
}
#toast.error {
	--background: red;
	--text: white;
}
#toast.show {
	transform: translateY(60px);
	transition: .4s transform;
	transition-timing-function: cubic-bezier(.38,.52,.37,1);
}

@media screen and (min-height: 560px) {
	#all {
		top: 80px;
		position: sticky;
   }
}

.cols {
	column-count: 1;
}
@media screen and (min-width: 900px) {
	.cols {
		margin-inline: auto;
	}
}
@media screen and (min-width: 1200px) {
	.cols {
		column-count: 2;
	}
}
@media screen and (min-width: 1800px) {
	.cols {
		column-count: 3;
		margin-inline: inherit;
	}
	#town #description {
		columns: 2;
	}
}
@media screen and (min-width: 2400px) {
	.cols {
		column-count: 4;
	}
	#town #description {
		columns: 3;
	}
}

@container content (max-width: 1800px) {

	#details {
		grid-template-areas:
			'title title'
			'info map'
			'brief map'
			'favs map'
			'heading map'
			'description map'
			'facilities map';
		grid-template-columns: 1.2fr 1fr;
	}
	#details.foodanddrink, #details.place {
		grid-template-areas:
			'title title'
			'info map'
			'brief map'
			'favs map'
			'description openinghours'
			'facilities openinghours';
		grid-template-columns: 1.2fr 1fr;
	}
	#hero {
		/*aspect-ratio: 16 / 5;*/
		height: 20vw;
	}
	#hero.category {
		/*aspect-ratio: 16 / 5;*/
		height: 11vw;
	}
	#heropanels {
		grid-template-areas:
			'birchington broadstairs margate'
			'ramsgate westgate-on-sea hints';
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
	}

}

@container content (max-width: 1200px) {
	#details {
		grid-template-areas:
			'title title'
			'info map'
			'brief map'
			'favs map'
			'description description'
			'facilities facilities';
	}
	#details.foodanddrink, #details.place {
		grid-template-areas:
			'title title'
			'info map'
			'brief map'
			'favs map'
			'description map'
			'facilities openinghours';
	}
}

@media (max-width: 1200px) {

	body {
		grid-template-areas:
		'header'
        'main'
        'footer';
	}
	body.cats {
		grid-template-areas:
		'header'
		'main'
		'nav'
        'footer';
	}
	body::after {
		content: "";
		position: fixed;
		width: 100%;
		height: 100%;
		pointer-events: none;
		background-color: var(--black);
		opacity: 0;
	}

	header {
		grid-template-areas: 'logo navbar weather icon icon';
		grid-template-columns: auto 1fr auto auto auto;
	}

	#favouritesbar {
		gap: var(--padding);
	}

	#all {
		padding-right: var(--padding);
		padding-bottom: 30px;
        box-shadow: inset rgba(33, 35, 38, 0.1) 0 5px 10px;
	}
	#all ul li ul {
	    padding: 0;
	}
	#all ul.quicklinks {
	    padding: 0 var(--padding);
	}
	#all ul.quicklinks li:has(ul) {
		columns: 4;
		column-gap: 0;
		padding-left: var(--padding);
	}

	nav li {
	    padding: 4px 0;
	}

	#hero {
		border-radius: 0;
		margin: 0;
	}
	#hero cite {
		--citeSize: var(--h5);
	}
	#heropanels > .heropanel > .popover {
		top: 100%;
	}
	#heropanels > .heropanel:hover > .popover {
		top: 100%;
	}

	/* Sticky Footer */
	/*body {*/
	/*	background: var(--content-background);*/
	/*}*/
	/*body footer {*/
	/*	position: sticky;*/
	/*	bottom: 0;*/
	/*	box-shadow: none;*/
	/*}*/
	/*body .content {*/
	/*	background: var(--content-background);*/
	/*	box-shadow: rgba(33, 35, 38, 0.1) 0 5px 10px;*/
	/*	z-index: 1;*/
	/*}*/

}

@media (max-width: 900px) {

	form {
		grid-template-columns: auto;
		gap: calc(var(--padding) / 2);
	}

	form label {
		justify-self: start;
	}

	#db-form input:not([type="checkbox"]) {
		width: 100%;
	}

	#hero {
		/*aspect-ratio: 16 / 7;*/
		height: 44vw;
	}
	#hero.category {
		/*aspect-ratio: 16 / 5;*/
		height: 22vw;
	}
	#hero cite {
		--citeSize: var(--p);
	}
	#heropanels {
		grid-template-areas:
			'birchington broadstairs'
			'margate ramsgate'
			'westgate-on-sea hints';
		grid-template-columns: 1fr 1fr;
	}

	.content {
		--content: calc(100% - var(--padding));
		gap: var(--padding) calc(var(--padding) / 2);
	}

	#town {
		grid-template-areas:
			'catlinks'
			'heading'
			'brief'
			'description';
		grid-template-columns:1fr;
	}

	#details {
		grid-template-areas:
			'title'
			'info'
			'brief'
			'favs'
			'description'
			'facilities'
			'map';
		grid-template-columns: 1fr;
	}
	#details.foodanddrink, #details.place {
		grid-template-areas:
			'title'
			'info'
			'brief'
			'favs'
			'description'
			'openinghours'
			'facilities'
			'map';
		grid-template-columns: 1fr;
	}
	#details.nodesc.foodanddrink, #details.nodesc.place {
		grid-template-areas:
			'title'
			'info'
			'favs'
			'openinghours'
			'facilities'
			'map';
	}

	header {
		grid-template-areas: 'logo weather icon icon';
		grid-template-columns: 1fr auto auto auto;
	}
	#town #catlinks {
		grid-area: catlinks;
	}
	#catlinks {
		display: block;
		font-size: var(--small);
	}
	#catlinks .panel-body {
	    grid-template-columns: 1fr 1fr;
	    padding: calc(var(--padding) / 2);
		min-height: 6rem;
	}
	#catlinks h2 {
	    position: absolute;
	    right: calc(var(--padding) / 2);
	    writing-mode: tb;
	    color: var(--accent);
		line-height: 1;
	    font-size: var(--h5);
	    font-family: poppins, sans-serif;
	}
	#catlinks .material-icon {
	    font-size: var(--p);
	    vertical-align: middle;
	}

	div:not(#results) .panel.result {
		grid-column: span 1;
	}

	.panel.compact.seaweather {
		grid-column-start: 2;
		grid-row-start: 1;
	}

	#add-buttons {
		grid-template-columns: 1fr 1fr;
	}

	#all ul.quicklinks li:has(ul) {
		columns: 2;
		padding-left: var(--padding);
	}

	#favouritesbar {
		grid-area: unset;
		inset-inline: 0;
		justify-content: space-between;
		top: unset;
	    position: fixed;
		bottom: calc(0px - var(--padding));
		background: var(--blackwhite);
		color: var(--whiteblack);
	    padding: calc(var(--padding) / 4) var(--padding);
	    border-radius: var(--border-radius) var(--border-radius) 0 0;
		box-shadow: rgba(33, 35, 38, 0.1) 0 -5px 10px;
	}
	#favouritesbar.active,#favouritesbar:hover {
		bottom: 0;
	}
	#favouritesbar span.material-icon {
		display: block;
	}
	#favouritesbar a {
		text-align: center;
		font-size: var(--small);
	}

	.panel.double {
	    grid-column: span 2;
	}

	.cluster.filters {
		justify-content: center;
	}
	.cluster.filters > span {
		font-size: var(--x-small);
	}

	.event.inthepast, .hidemobile {
		display: none;
	}

	footer {
		grid-template-columns: 1fr;
		gap: calc(var(--padding) * 2);
		padding-bottom: calc(var(--padding) * 3);
	}
	footer .about {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}
	footer ul.quicklinks {
	    padding-inline: calc(var(--padding) / 2);
		flex-wrap: wrap;
		flex-direction: row;
		gap: var(--padding);
	}

	#gttLink {
		bottom: 4rem;
	}
}

/* Weather */

.weather .date {
	font-size: var(--h4);
	font-weight: 500;
	grid-column: span 3;
}

.weather.compact .date {
	font-size: var(--h5);
	grid-column: span 1;
}

.weather .dayrange {
	grid-column: span 3;
	opacity: .6;
}

.weather.compact .dayrange {
	font-size: var(--small);
	grid-column: span 1;
}

.weather .temperature {
	font-size: var(--h2);
	font-weight: 500;
	grid-column: span 3;
}

.weather.compact .temperature {
	font-size: var(--h5);
	grid-column: span 1;
}

.weather .feelslike {
	font-size: var(--x-small);
	opacity: 0.6;
	grid-column: span 3;
}

.weather.compact .feelslike {
	grid-column: span 1;
}

.weather .cloudcoverage {
	font-weight: 500;
	grid-column: span 3;
}

.weather.compact .cloudcoverage {
	font-size: var(--small);
	grid-column: span 1;
}

.weather .weathericon {
	max-width: 12rem;
	height: auto;
	margin: auto;
	grid-column: span 3;
}

.weather.compact .weathericon {
	max-width: 5rem;
	grid-column: span 1;
}

.weather .material-icon {
	border: 2px dashed var(--text);
	border-radius: 100%;
	padding: 10px;
	margin-bottom: .5rem;
}

.weather .windfromdirection, .humidity {
	text-wrap: pretty;
}

.weather .forecasttint {
	font-size: var(--x-small);
	opacity: .6;
}

.weather .rainforecast {
	font-weight: 500;
}

.weather .forecast {
	grid-column: span 3;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.weather .forecast > div {
	display: grid;
	padding-top: calc(var(--padding) / 6);
	align-content: center;
	justify-content: center;
	justify-items: center;
	row-gap: 4px;
}

.weather .forecast .material-icon {
	border: 0;
	padding: 0;
	margin-bottom: 0;
}

@supports (animation-timeline: view()) {

	@keyframes shift-background {
		from {
			background-position-y: 65%;
		}
		to {
			background-position-y: 35%;
		}
	}
	@keyframes hero-text {
		from {
			transform: translate3d(0, 0, 0);
			opacity: .85;
		}
		85% {
			transform: translate3d(15%, 5%, 0);
			scale: 150%;
			opacity: .1;
		}
		100% {
			scale: 0;
			opacity: 0;
		}
	}
	@keyframes hero-cite {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@keyframes panel-highlight {
		from {
			background-position: 100% 0;
		}
		to {
			background-position: 0 0;
		}
	}
	@media (prefers-reduced-motion) {
		@keyframes hero-text {
			from {
				opacity: 1;
			}
			75% {
				opacity: 0;
			}
			to {
				opacity: 0;
			}
		}
		@keyframes panel-highlight {
			from {
				background-position: 0 0;
			}
			to {
				background-position: 0 0;
			}
		}
	}
	#hero {
		animation: shift-background linear forwards;
		animation-timeline: view();
		animation-range: exit -60px exit 80%;
	}
	#hero.category {
		animation: none;
		/*animation: shift-background linear forwards;*/
		/*animation-timeline: view();*/
		/*animation-range: exit -60px exit 80%;*/
	}
	#hero span {
		position: fixed;
		opacity: 1;
		animation: hero-text linear forwards;
		animation-timeline: view();
		animation-range: exit -60px exit 80%;
	}
	#hero.category span {
		position: relative;
		opacity: 1;
		animation: none;
		/*animation: hero-text linear forwards;*/
		/*animation-timeline: view();*/
		/*animation-range: exit -60px exit 80%;*/
	}
	#hero cite {
		animation: hero-cite linear forwards;
		animation-timeline: view();
		animation-range: exit -60px exit -50px;
	}
	html[data-theme="light"] .panel:not(.info) {
		background: linear-gradient(240deg, rgba(245,226,214,1) 40%, rgba(245,226,214,0.8) 50%, rgba(245,226,214,1) 55%);
		background-size: 300%;
		animation: panel-highlight ease-in forwards;
		animation-timeline: view();
		animation-range: contain 20% contain 70%;
	}
	html[data-theme="light"] .panel.recommended:not(.info) {
		background: linear-gradient(240deg, rgba(142,223,241,1) 40%, rgba(142,223,241,0.85) 50%, rgba(142,223,241,1) 55%);
		background-size: 300%;
	}
}