/*
 * Font faces
 */

@font-face {
    font-family: "EB Garamond";
    src: url(/font/eb-garamond/regular.ttf);
}

@font-face {
    font-family: "EB Garamond";
    src: url(/font/eb-garamond/medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: "EB Garamond";
    src: url(/font/eb-garamond/semi-bold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: "EB Garamond";
    src: url(/font/eb-garamond/bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "EB Garamond";
    src: url(/font/eb-garamond/italic.ttf);
    font-style: italic;
}

/*
 * Colour scheme
 */

:root {
    --bg-light: #f7f4ea;
    --bg-dark: #121d28;

    --text-dark: #0a0a0a;
    --text-dark-snd: #656666;
    --text-light: #f8f9f9;
    --text-light-snd: #cccdcd;
    --text-accent: #dc1e35;
}

body {
    --bg-default: var(--bg-light);
    --text-normal: var(--text-dark);
    --text-snd: var(--text-dark-snd);
    background: var(--bg-default);
    color: var(--text-normal);
}

.bg-light {
    --bg-default: var(--bg-light);
    --text-normal: var(--text-dark);
    --text-snd: var(--text-dark-snd);
    background: var(--bg-default);
    color: var(--text-normal);
}

.bg-dark {
    --bg-default: var(--bg-dark);
    --text-normal: var(--text-light);
    --text-snd: var(--text-light-snd);
    background: var(--bg-default);
    color: var(--text-normal);
}

/*
 * Typography
 */

body {
    font-family: "EB Garamond", Garamond, serif;
    font-size: calc(0.8rem + 1vh);
}

h1 {
    font-size: 3em;
    font-weight: normal;
}

h2 {
    font-size: 2em;
    font-weight: normal;
    text-align: center;
}

h3 {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
}

a {
    color: var(--text-snd);
}

a:hover {
    color: var(--text-accent);
}

ul {
    list-style-type: disc;
}

::marker {
    color: var(--text-accent);
}

.text-accent {
    color: var(--text-accent);
}

.text-snd {
    color: var(--text-snd);
}

.text-label {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.sic {
    font-style: italic;
    color: var(--text-snd);
}

/*
 * Layout
 */

body {
    margin: 0;
}

.centre-vert-axis {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centre-horiz-axis {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 4vh;
}

.rows {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1vh;
}

/*
 * Swiper.js overrides
 */

.swiper {
    height: 100vh;
    background: var(--bg-default);
}

.swiper-slide {
    /* TODO */
}

.swiper-pagination-bullet-active {
    background: var(--text-accent);
}

/*
 * Decoration
 */

.flat-box-shadow {
    box-shadow: -2em 2em 0 var(--bg-dark);
}

.testimonial {
    width: 25em;
    text-align: center;
}

.testimonial blockquote {
    text-align: left;
}

.listing {
    width: 15em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.listing img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.marquee {
    overflow: hidden;
}

.marquee-inner {
    display: inline-flex;
    animation: marquee 120s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.shimmer {
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { color: var(--text-normal); }
    50%       { color: var(--text-snd); }
}

.slide-bottom-hint {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.slide-watermark {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    color: color-mix(in srgb, var(--text-snd), transparent 80%);
    font-size: 25vw;
    white-space: nowrap;
    overflow: hidden;
}