@font-face 
	{ font-family: "SpaceGrotesk"; src: url('_font/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; }

:root {
	/* --- BEIGE --- */
  --beige-010: rgba(239, 229, 220, 1);
  --beige-020: rgba(234, 216, 200, 1);
  --beige-030: rgba(225, 203, 183, 1);
  
  /* --- BLUE --- */
  --blue-010: rgba(234, 240, 250, 1);
  --blue-020: rgba(193, 209, 240, 1);
  --blue-030: rgba(134, 162, 218, 1);
  --blue-040: rgba(83, 123, 199, 1);
  --blue-050: rgba(50, 95, 181, 1);
  --blue-060: rgba(36, 81, 167, 1);
  --blue-070: rgba(30, 67, 134, 1);
  --blue-080: rgba(22, 51, 104, 1);
  --blue-090: rgba(13, 34, 68, 1);
  --blue-100: rgba(15, 20, 25, 1);
  
  /* --- LIME --- */
  --lime-020: rgba(231, 255, 196, 1);
  --lime-050: rgba(208, 250, 92, 1);
  --lime-080: rgba(117, 141, 0, 1);
  
  /* --- SPECIALS --- */
  --pumpkinspice-020: rgba(255, 215, 182, 1);
  --pumpkinspice-050: rgba(255, 137, 80, 1);
  --pumpkinspice-080: rgba(163, 46, 0, 1);
}





/* --- BASE --- */

body { font-family: "SpaceGrotesk", sans-serif; font-weight: 350; font-feature-settings: 'case' on, 'dlig' on, 'salt' on, 'ss01' on, 'ss02' on; font-variant-numeric: lining-nums tabular-nums slashed-zero; background: var(--beige-010); color: var(--blue-100); }

.page {
	position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: 0 0 3em 0;
  overflow: clip; }

.header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	isolation: isolate; }

.header::before {
	content: "";
	position: absolute;
	inset: 0;
	bottom: -1em;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient( 
	  to bottom,
		rgba(239, 229, 220, 0.95) 0%,
		rgba(239, 229, 220, 0.6) 60%,
		rgba(239, 229, 220, 0) 100% );
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	animation: reveal-header linear both;
	animation-timeline: scroll(root);
	animation-range: 0px 150px;
	mask-image: linear-gradient(
		to bottom,
		black 0%,
		black 40%,
		transparent 100%); }

@keyframes reveal-header {
	from { opacity: 0; }
	to { opacity: 1; } }

.logo {
	margin: 1em 0 0 0;
	width: 20%;
	height: auto;
	display: block;
	transform-origin: center top;
	animation: shrink-logo linear both;
	animation-timeline: scroll(root);
	animation-range: 0px 150px; }

@keyframes shrink-logo {
	from { transform: scale(1); }
  to { transform: scale(0.6); } }

@supports not (animation-timeline: scroll()) {
	.logo { animation: none; width: 17.5%; } }


/* --- HERO --- */

.hero { 
	display: flex;
  flex-direction: column;
  justify-content: space-between; 
	margin-top: -3em;
	min-height: 42em;
	height: 80dvh; }
.cups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* grid-template-columns: repeat(4, minmax(0, 1fr)); */
	gap: 1em;
	width: 80%;
	/* width: 90%; --4col */
	margin-inline: auto;
	flex: 1; }
.flavour {
	position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-radius: 1em;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

.pumpkinspice { 
	background-image: url("_img/flavours/pumpkinspice.jpg"); }
.classic { 
	background-image: url("_img/flavours/classic.jpg"); }
.limecoco { 
	background-image: url("_img/flavours/limecoco.jpg"); }

.flavourlogo {
	position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: -1em; }
.flavourlogo img {
	width: 8.5em;
	height: auto;
	display: block;
	z-index: 2; }
.special {
	display: inline-block;
	padding: 0.45em 0.75em;
	border-radius: 0.25em;
	font-size: 1em;
	font-weight: 500;
	white-space: nowrap;
	transform: rotate(-4deg);
	margin-bottom: -0.15em;
	z-index: 0; }
.pumpkinspice .special {
	background: var(--pumpkinspice-080);
	color: var(--pumpkinspice-020); }

.cta { 
	display: flex;
	justify-content: center;
	padding: 4em 0 0.5em 0; }
.ordercta {
	background: var(--blue-050); 
	color: var(--blue-010);
	border-radius: 0.4em;
	display: inline-flex;
	padding: 0.5em 0.8em;
	align-items: center;
	text-decoration: none;
	font-size: 1.25em;
	gap: 0.4em; }
.ordercta:hover, .ordercta:active { 
	background: var(--blue-070); }

.header .cta { position: absolute; top: 2em; right: 2em; padding: 0; }
.header .ordercta { font-size: 1.1em; background: rgb(from var(--beige-010) r g b / 0.5); backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px); color: var(--blue-050); font-weight: 450; border: 0.125rem solid var(--blue-050); }
.small { display: none; }
.header .ordercta:hover, .header .ordercta:active { background: var(--beige-020); border: 0.125rem solid var(--blue-070); color: var(--blue-070); }

.layersofflavour {
	width: 100dvw;
  overflow: hidden;
  margin-top: auto;
  pointer-events: none; }
.lof-track {
	display: flex;
  width: max-content;
  animation: lof-scroll 50s linear infinite; }
.lof-track span {
	flex: 0 0 auto;
  white-space: nowrap;
  font-size: 6rem;
  font-weight: 450;
  line-height: 125%;
  color: var(--beige-020);
  padding-right: 0.3em; }
@keyframes lof-scroll {
	to { transform: translateX(-50%); } }



/* --- FAQ --- */

.faq { 
	display: grid;
	place-items: center;
	margin: 0 0 3em 0; }
.faq article { 
	border-bottom: 1px solid var(--beige-030);
	padding: 2.5em 0;
	min-width: 36em;
	max-width: 46em;
	width: 40dvw; }
.faq h3 { 
	font-size: 1.5em; 
	font-weight: 700; 
	color: var(--blue-050); 
	letter-spacing: 0.0275em; 
	margin: 0 0 0.5em 0; }
.faq h4 { 
	font-size: 1.125em; 
	font-weight: 600; 
	line-height: 150%; }
.faq p, .pricing dt, .pricing dd { 
	font-size: 1.125em; 
	font-weight: 360; 
	line-height: 150%; }
.faq p strong { font-weight: 700; }
.faq a { 
	color: var(--blue-050); 
	text-decoration: none;
	font-weight: 700; }
.faq a:hover, .faq a:active { 
	color: var(--blue-040); 
	text-decoration: underline;
	font-weight: 700; }
.pricing {
  display: grid;
  grid-template-columns: 12em 1fr;
  gap: 0.5em 1.5em;
  margin: 0.5em 0; }
.pricing dt::before {
	content: "• "; }




/* --- CONTACT --- */

.socials { 
	display: flex;
  justify-content: center;
  align-items: center;
  gap: 4em;
  height: 10em; }
.socials .link { 
	color: var(--blue-100); 
	text-decoration: none; 
	display: inline-flex; 
	align-items: center; 
	gap: 0.4em; 
	font-size: 1.5em; }
.socials .link:hover, .socials .link:active { 
	color: var(--blue-050); 
	text-decoration: underline; }
.socials .link svg { 
	width: 1.125em; 
	height: auto; 
	margin-top: 0.075em; }

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px; }




.stamp {
  position: absolute;
  bottom: -6.5em;
  right: -4em;
  width: 25em;
  height: 25em;
  z-index: -1;
  pointer-events: none; }
.stamp img {
	position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; }
.rotating { animation: rotate 40s linear infinite; }

@keyframes rotate {
	from { transform: rotate(0deg); } 
  to { transform: rotate(360deg); } }




@media (prefers-reduced-motion: reduce) { 
	.rotating, .lof-track { animation: none; } }




/* RESPONSIVE */
/* --- 1280 --- */

@media only screen and (max-width: 1280px) {
	.logo { width: 28%; }
	@keyframes shrink-logo {
		from { transform: scale(1); }
	  to { transform: scale(0.7); } }
  
	/* .hero { height: auto; margin-top: -1.5em; }
	.cups { width: 80%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.flavour { height: 20em; } */
	.flavourlogo img { width: 7.5em; } }


/* --- 720 --- */

@media only screen and (max-width: 720px) { 
	.page { padding: 0 0 8em 0; }
	.header { justify-content: flex-start; padding-left: 1.5em; }
	.logo { width: 44%; animation: none; }
	
	.hero { height: auto; margin-top: -1em; }
	.cups { grid-template-columns: 1fr; gap: 1.5em; width: 90%; }
	.flavour { height: 18em; }
	.pumpkinspice { background-image: url("_img/flavours/pumpkinspice2.jpg"); }
	.classic { background-image: url("_img/flavours/classic2.jpg"); }
	.limecoco { background-image: url("_img/flavours/limecoco2.jpg"); }
	.flavourlogo { margin-bottom: -1em; }
	.flavourlogo img { width: 6.5em; }
	.special { padding: 0.35em 0.6 5em; font-size: 0.8em; }
	
	.cta { padding: 2.5em 0 0.3em 0; }
	
	.header .cta { position: absolute; top: 1.4em; right: 2em; padding: 0; }
	.header .ordercta { font-size: 0.95em; border: 0.125rem solid var(--blue-050); padding: 0.4em 0.8em; }
	.small { display: inline; }
	.large { display: none; }
	
	.lof-track span { font-size: 3.5rem; }
	
	.faq { margin: 0 0 3em 0; }
	.faq article { min-width: 14em; max-width: 28em; width: 80dvw; }
	.faq h3 { font-size: 1.35em; }
	.faq h4, .faq p, .pricing dt, .pricing dd { font-size: 1.1em; }
	
	.socials { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 90dvw; margin-inline: auto; gap: 1.75em; height: 12em; }
	
	.stamp { bottom: -4.5em; right: -2.5em; width: 20em; height: 20em; } }


/* --- 460 --- */

@media only screen and (max-width: 460px) {  }