@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
--color-white: #fff;
--spacing: 0.25rem;
--container-xs: 20rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--tracking-tight: -0.025em;
--tracking-wide: 0.025em;
--radius-lg: 0.5rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--color-berry-100: #f6dbe4;
--color-berry-700: #84244a;
--color-berry-800: #6b1c3c;
--color-berry-900: #4d1329;
--color-blush-50: #fcf8f5;
--color-blush-100: #f6ebe4;
--color-blush-200: #ecd9ce;
--color-blush-300: #dfc2b3;
--color-gold-400: #cfae78;
--color-gold-500: #b08d57;
--color-gold-600: #8a6c3c;
--color-cocoa-700: #5a4745;
--color-cocoa-800: #3d2c2d;
--color-cocoa-900: #2a1d1f;
}
}
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-x-0 {
inset-inline: 0px;
}
.top-\(--bar-h\) {
top: var(--bar-h);
}
.top-3 {
top: calc(var(--spacing) * 3);
}
.top-\[9\%\] {
top: 9%;
}
.top-\[40\%\] {
top: 40%;
}
.top-\[44\%\] {
top: 44%;
}
.top-full {
top: 100%;
}
.right-\[5\%\] {
right: 5%;
}
.-bottom-\[0\.1em\] {
bottom: calc(0.1em * -1);
}
.left-3 {
left: calc(var(--spacing) * 3);
}
.left-\[26\%\] {
left: 26%;
}
.left-\[68\%\] {
left: 68%;
}
.isolate {
isolation: isolate;
}
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-40 {
z-index: 40;
}
.mx-auto {
margin-inline: auto;
}
.-mt-2 {
margin-top: calc(var(--spacing) * -2);
}
.mt-1\.5 {
margin-top: calc(var(--spacing) * 1.5);
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
margin-top: calc(var(--spacing) * 5);
}
.mt-6 {
margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mt-9 {
margin-top: calc(var(--spacing) * 9);
}
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mt-14 {
margin-top: calc(var(--spacing) * 14);
}
.mb-1\.5 {
margin-bottom: calc(var(--spacing) * 1.5);
}
.block {
display: block;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.inline-flex {
display: inline-flex;
}
.aspect-\[4\/3\] {
aspect-ratio: 4/3;
}
.size-5 {
width: calc(var(--spacing) * 5);
height: calc(var(--spacing) * 5);
}
.size-7 {
width: calc(var(--spacing) * 7);
height: calc(var(--spacing) * 7);
}
.size-10 {
width: calc(var(--spacing) * 10);
height: calc(var(--spacing) * 10);
}
.size-full {
width: 100%;
height: 100%;
}
.h-\[4\.5rem\] {
height: 4.5rem;
}
.h-\[23rem\] {
height: 23rem;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-6xl {
max-width: var(--container-6xl);
}
.max-w-7xl {
max-width: var(--container-7xl);
}
.max-w-lg {
max-width: var(--container-lg);
}
.max-w-md {
max-width: var(--container-md);
}
.max-w-xl {
max-width: var(--container-xl);
}
.max-w-xs {
max-width: var(--container-xs);
}
.min-w-6 {
min-width: calc(var(--spacing) * 6);
}
.flex-1 {
flex: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.place-items-center {
place-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: var(--spacing);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.gap-10 {
gap: calc(var(--spacing) * 10);
}
.gap-12 {
gap: calc(var(--spacing) * 12);
}
.gap-x-7 {
column-gap: calc(var(--spacing) * 7);
}
.gap-y-4 {
row-gap: calc(var(--spacing) * 4);
}
:where(.divide-y > :not(:last-child)) {
--tw-divide-y-reverse: 0;
border-bottom-style: var(--tw-border-style);
border-top-style: var(--tw-border-style);
border-top-width: calc(1px * var(--tw-divide-y-reverse));
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
:where(.divide-blush-200 > :not(:last-child)) {
border-color: var(--color-blush-200);
}
:where(.divide-white\/10 > :not(:last-child)) {
border-color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
.self-end {
align-self: flex-end;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-2xl {
border-radius: var(--radius-2xl);
}
.rounded-3xl {
border-radius: var(--radius-3xl);
}
.rounded-\[0_2\.5rem_0_2\.5rem\] {
border-radius: 0 2.5rem 0 2.5rem;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-y {
border-block-style: var(--tw-border-style);
border-block-width: 1px;
}
.border-t {
border-top-style: var(--tw-border-style);
border-top-width: 1px;
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-dotted {
--tw-border-style: dotted;
border-style: dotted;
}
.border-berry-700 {
border-color: var(--color-berry-700);
}
.border-blush-200 {
border-color: var(--color-blush-200);
}
.border-blush-200\/80 {
border-color: color-mix(in srgb, #ecd9ce 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-blush-200) 80%, transparent);
}
}
.border-gold-500\/50 {
border-color: color-mix(in srgb, #b08d57 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gold-500) 50%, transparent);
}
}
.border-gold-500\/60 {
border-color: color-mix(in srgb, #b08d57 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gold-500) 60%, transparent);
}
}
.border-white\/10 {
border-color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
.bg-\[\#efe0e3\] {
background-color: #efe0e3;
}
.bg-berry-700 {
background-color: var(--color-berry-700);
}
.bg-blush-50 {
background-color: var(--color-blush-50);
}
.bg-blush-50\/90 {
background-color: color-mix(in srgb, #fcf8f5 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-blush-50) 90%, transparent);
}
}
.bg-blush-100 {
background-color: var(--color-blush-100);
}
.bg-cocoa-900 {
background-color: var(--color-cocoa-900);
}
.bg-current {
background-color: currentcolor;
}
.bg-white {
background-color: var(--color-white);
}
.bg-white\/90 {
background-color: color-mix(in srgb, #fff 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
}
}
.object-cover {
object-fit: cover;
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-5 {
padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-6 {
padding-block: calc(var(--spacing) * 6);
}
.py-7 {
padding-block: calc(var(--spacing) * 7);
}
.py-14 {
padding-block: calc(var(--spacing) * 14);
}
.py-20 {
padding-block: calc(var(--spacing) * 20);
}
.pt-0\.5 {
padding-top: calc(var(--spacing) * 0.5);
}
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
.pt-5 {
padding-top: calc(var(--spacing) * 5);
}
.pt-6 {
padding-top: calc(var(--spacing) * 6);
}
.pt-9 {
padding-top: calc(var(--spacing) * 9);
}
.pr-3 {
padding-right: calc(var(--spacing) * 3);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.pb-3\.5 {
padding-bottom: calc(var(--spacing) * 3.5);
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.pl-8 {
padding-left: calc(var(--spacing) * 8);
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.font-serif {
font-family: var(--font-serif);
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-5xl {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.text-6xl {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[0\.62rem\] {
font-size: 0.62rem;
}
.text-\[0\.65rem\] {
font-size: 0.65rem;
}
.text-\[0\.68rem\] {
font-size: 0.68rem;
}
.text-\[1\.7rem\] {
font-size: 1.7rem;
}
.text-\[2rem\] {
font-size: 2rem;
}
.text-\[clamp\(3\.3rem\,14vw\,4\.8rem\)\] {
font-size: clamp(3.3rem, 14vw, 4.8rem);
}
.text-\[clamp\(7rem\,27vw\,24rem\)\] {
font-size: clamp(7rem, 27vw, 24rem);
}
.leading-5 {
--tw-leading: calc(var(--spacing) * 5);
line-height: calc(var(--spacing) * 5);
}
.leading-6 {
--tw-leading: calc(var(--spacing) * 6);
line-height: calc(var(--spacing) * 6);
}
.leading-7 {
--tw-leading: calc(var(--spacing) * 7);
line-height: calc(var(--spacing) * 7);
}
.leading-8 {
--tw-leading: calc(var(--spacing) * 8);
line-height: calc(var(--spacing) * 8);
}
.leading-\[0\.8\] {
--tw-leading: 0.8;
line-height: 0.8;
}
.leading-\[0\.9\] {
--tw-leading: 0.9;
line-height: 0.9;
}
.leading-\[1\.02\] {
--tw-leading: 1.02;
line-height: 1.02;
}
.leading-none {
--tw-leading: 1;
line-height: 1;
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-normal {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[-0\.015em\] {
--tw-tracking: -0.015em;
letter-spacing: -0.015em;
}
.tracking-\[0\.2em\] {
--tw-tracking: 0.2em;
letter-spacing: 0.2em;
}
.tracking-\[0\.14em\] {
--tw-tracking: 0.14em;
letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
--tw-tracking: 0.16em;
letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
--tw-tracking: 0.18em;
letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
--tw-tracking: 0.22em;
letter-spacing: 0.22em;
}
.tracking-tight {
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.tracking-wide {
--tw-tracking: var(--tracking-wide);
letter-spacing: var(--tracking-wide);
}
.text-balance {
text-wrap: balance;
}
.whitespace-nowrap {
white-space: nowrap;
}
.text-berry-100 {
color: var(--color-berry-100);
}
.text-berry-700 {
color: var(--color-berry-700);
}
.text-berry-900 {
color: var(--color-berry-900);
}
.text-blush-100 {
color: var(--color-blush-100);
}
.text-blush-100\/80 {
color: color-mix(in srgb, #f6ebe4 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-blush-100) 80%, transparent);
}
}
.text-cocoa-700 {
color: var(--color-cocoa-700);
}
.text-cocoa-700\/75 {
color: color-mix(in srgb, #5a4745 75%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-cocoa-700) 75%, transparent);
}
}
.text-cocoa-700\/80 {
color: color-mix(in srgb, #5a4745 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-cocoa-700) 80%, transparent);
}
}
.text-cocoa-700\/85 {
color: color-mix(in srgb, #5a4745 85%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-cocoa-700) 85%, transparent);
}
}
.text-cocoa-800 {
color: var(--color-cocoa-800);
}
.text-cocoa-900 {
color: var(--color-cocoa-900);
}
.text-gold-400 {
color: var(--color-gold-400);
}
.text-gold-500 {
color: var(--color-gold-500);
}
.text-gold-600 {
color: var(--color-gold-600);
}
.text-white {
color: var(--color-white);
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.underline {
text-decoration-line: underline;
}
.decoration-1 {
text-decoration-thickness: 1px;
}
.underline-offset-\[7px\] {
text-underline-offset: 7px;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-70 {
opacity: 70%;
}
.opacity-90 {
opacity: 90%;
}
.opacity-\[0\.06\] {
opacity: 0.06;
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-1 {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-berry-900\/15 {
--tw-shadow-color: color-mix(in srgb, #4d1329 15%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-berry-900) 15%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.ring-blush-200 {
--tw-ring-color: var(--color-blush-200);
}
.ring-blush-300 {
--tw-ring-color: var(--color-blush-300);
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-300 {
--tw-duration: 300ms;
transition-duration: 300ms;
}
.duration-500 {
--tw-duration: 500ms;
transition-duration: 500ms;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
@media (hover: hover) {
.group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
--tw-translate-x: calc(var(--spacing) * 0.5);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-hover\:scale-105:is(:where(.group):hover *) {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.hover\:-translate-y-0\.5:hover {
--tw-translate-y: calc(var(--spacing) * -0.5);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.hover\:-translate-y-1:hover {
--tw-translate-y: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.hover\:bg-berry-700:hover {
background-color: var(--color-berry-700);
}
.hover\:bg-berry-800:hover {
background-color: var(--color-berry-800);
}
.hover\:bg-white:hover {
background-color: var(--color-white);
}
.hover\:text-berry-700:hover {
color: var(--color-berry-700);
}
.hover\:text-white:hover {
color: var(--color-white);
}
.hover\:opacity-75:hover {
opacity: 75%;
}
.hover\:shadow-xl:hover {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.hover\:shadow-berry-900\/10:hover {
--tw-shadow-color: color-mix(in srgb, #4d1329 10%, transparent);
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:shadow-berry-900\/10:hover {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-berry-900) 10%, transparent) var(--tw-shadow-alpha), transparent);
}
}
}
.focus-visible\:outline-2:focus-visible {
outline-style: var(--tw-outline-style);
outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
outline-offset: 2px;
}
.focus-visible\:outline-offset-4:focus-visible {
outline-offset: 4px;
}
.focus-visible\:outline-berry-700:focus-visible {
outline-color: var(--color-berry-700);
}
.focus-visible\:outline-blush-100:focus-visible {
outline-color: var(--color-blush-100);
}
@media (width < 64rem) {
.max-lg\:hidden {
display: none;
}
}
@media (width < 40rem) {
.max-sm\:hidden {
display: none;
}
}
@media (width >= 40rem) {
.sm\:inline {
display: inline;
}
.sm\:inline-flex {
display: inline-flex;
}
.sm\:h-\[30rem\] {
height: 30rem;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:items-center {
align-items: center;
}
.sm\:px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.sm\:text-6xl {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
.sm\:text-\[1\.7rem\] {
font-size: 1.7rem;
}
.sm\:text-\[clamp\(4\.8rem\,8\.4vw\,7\.4rem\)\] {
font-size: clamp(4.8rem, 8.4vw, 7.4rem);
}
}
@media (width >= 48rem) {
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:gap-8 {
gap: calc(var(--spacing) * 8);
}
}
@media (width >= 64rem) {
.lg\:absolute {
position: absolute;
}
.lg\:static {
position: static;
}
.lg\:sticky {
position: sticky;
}
.lg\:inset-y-0 {
inset-block: 0px;
}
.lg\:top-40 {
top: calc(var(--spacing) * 40);
}
.lg\:top-\[38\%\] {
top: 38%;
}
.lg\:top-\[39\%\] {
top: 39%;
}
.lg\:right-0 {
right: 0px;
}
.lg\:right-\[7\%\] {
right: 7%;
}
.lg\:left-\[27\%\] {
left: 27%;
}
.lg\:left-\[70\%\] {
left: 70%;
}
.lg\:mt-0 {
margin-top: 0px;
}
.lg\:flex {
display: flex;
}
.lg\:hidden {
display: none;
}
.lg\:h-auto {
height: auto;
}
.lg\:w-\[66\%\] {
width: 66%;
}
.lg\:max-w-\[41rem\] {
max-width: 41rem;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-\[\.8fr_1\.2fr\] {
grid-template-columns: .8fr 1.2fr;
}
.lg\:grid-cols-\[1\.1fr_\.9fr\] {
grid-template-columns: 1.1fr .9fr;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:items-center {
align-items: center;
}
.lg\:gap-9 {
gap: calc(var(--spacing) * 9);
}
.lg\:gap-16 {
gap: calc(var(--spacing) * 16);
}
.lg\:self-start {
align-self: flex-start;
}
.lg\:border-0 {
border-style: var(--tw-border-style);
border-width: 0px;
}
.lg\:bg-transparent {
background-color: transparent;
}
.lg\:p-0 {
padding: 0px;
}
.lg\:px-0 {
padding-inline: 0px;
}
.lg\:px-7 {
padding-inline: calc(var(--spacing) * 7);
}
.lg\:py-0 {
padding-block: 0px;
}
.lg\:py-20 {
padding-block: calc(var(--spacing) * 20);
}
.lg\:pt-14 {
padding-top: calc(var(--spacing) * 14);
}
.lg\:pb-24 {
padding-bottom: calc(var(--spacing) * 24);
}
.lg\:text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.lg\:shadow-none {
--tw-shadow: 0 0 #0000;
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
@media (width >= 80rem) {
.xl\:w-\[68\%\] {
width: 68%;
}
}
.\[\&\.is-open\]\:flex.is-open {
display: flex;
}
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-400.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-500.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-600.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Instrument Serif";
src: url("../fonts/instrument-serif.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Instrument Serif";
src: url("../fonts/instrument-serif-italic.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@layer base {
.mn, .mn *, .mn ::before, .mn ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
.mn {
font-family: var(--font-sans);
line-height: 1.5;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
.mn h1, .mn h2, .mn h3, .mn h4 {
font-size: inherit;
font-weight: inherit;
}
.mn a {
color: inherit;
text-decoration: inherit;
}
.mn ul, .mn ol {
list-style: none;
}
.mn button {
font: inherit;
color: inherit;
background: transparent;
cursor: pointer;
text-align: inherit;
}
.mn svg {
display: block;
}
.mn em {
font-style: italic;
}
}
@layer components {
.mn .mn-photo {
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%), linear-gradient(0deg, transparent 0, #000 8%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, transparent 0, #000 24%), linear-gradient(0deg, transparent 0, #000 8%);
mask-composite: intersect;
}
.mn .mn-spark {
transform-box: fill-box;
transform-origin: center;
animation: mn-twinkle 3.6s ease-in-out calc(var(--k) * 1.1s) infinite;
filter: drop-shadow(0 4px 10px rgb(77 19 41 / .2));
}
.mn .mn-tag {
animation: mn-tag-in .9s cubic-bezier(.2, .9, .25, 1) .7s both, mn-float 6s ease-in-out 1.6s infinite;
}
}
@media (min-width: 64rem) {
.mn .mn-photo {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 0, #000 10%);
mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 0, #000 10%);
}
}
@keyframes mn-twinkle {
0%, 100% {
transform: scale(.35);
opacity: 0;
}
50% {
transform: scale(1);
opacity: .95;
}
}
@keyframes mn-tag-in {
from {
transform: translateY(22px) rotate(0);
opacity: 0;
}
to {
transform: translateY(0) rotate(-7deg);
opacity: 1;
}
}
@keyframes mn-float {
0%, 100% {
transform: translateY(0) rotate(-7deg);
}
50% {
transform: translateY(-8px) rotate(-5deg);
}
}
@media (prefers-reduced-motion: reduce) {
.mn .mn-spark, .mn .mn-tag {
animation: none;
}
.mn .mn-spark {
opacity: .9;
transform: scale(.7);
}
.mn .mn-tag {
transform: rotate(-7deg);
}
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-leading {
syntax: "*";
inherits: false;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-tracking {
syntax: "*";
inherits: false;
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-shadow-alpha {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false;
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false;
}
@property --tw-ring-offset-width {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-backdrop-blur {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-brightness {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-contrast {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-grayscale {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-hue-rotate {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-invert {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-opacity {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-saturate {
syntax: "*";
inherits: false;
}
@property --tw-backdrop-sepia {
syntax: "*";
inherits: false;
}
@property --tw-duration {
syntax: "*";
inherits: false;
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--tw-leading: initial;
--tw-font-weight: initial;
--tw-tracking: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-backdrop-blur: initial;
--tw-backdrop-brightness: initial;
--tw-backdrop-contrast: initial;
--tw-backdrop-grayscale: initial;
--tw-backdrop-hue-rotate: initial;
--tw-backdrop-invert: initial;
--tw-backdrop-opacity: initial;
--tw-backdrop-saturate: initial;
--tw-backdrop-sepia: initial;
--tw-duration: initial;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
--tw-outline-style: solid;
}
}
}