*, *::before, *::after {
    box-sizing: border-box;
    margin: auto;
    padding: 0;
}

/* variables */

:root {
    color-scheme: light dark;
    --background: light-dark(#e9f3ed, #111714);
    --default: light-dark(#184306, #b8d2aa);
    --accent: light-dark(#2f8f00, #00c900);
    
    --default-15: hsl(from var(--default) h s l / 15%);
    --default-25: hsl(from var(--default) h s l / 25%);
    --default-40: hsl(from var(--default) h s l / 40%);
    --default-60: hsl(from var(--default) h s l / 60%);
    --default-70: hsl(from var(--default) h s l / 70%);
    --accent-70: hsl(from var(--accent) h s l / 70%);
    
    --font-size-sm: 1.0625rem;   /* 17px base */
    --font-size-md: 1.25rem;     /* 20px */
    --font-size-lg: 1.4375rem;   /* 23px */
    --font-size-xl: 1.625rem;    /* 26px */
    --font-size-2xl: 1.875rem;   /* 30px */
    
    --letter-spacing-normal: -0.007em;
    --letter-spacing-heading: -0.02em;
    --letter-spacing-tight: -0.0275em;
    
    --content-max-width: 37.5rem; /* 600px */
}

/* fonts */

@font-face{
    font-family: 'Source Serif 4';
    font-weight: 200 900;
    font-style: normal;
    font-display: auto;
    src: url('../fonts/SourceSerif4Variable-Roman.otf.woff2') format('woff2-variations');
}

@font-face{
    font-family: 'Source Serif 4';
    font-weight: 200 900;
    font-style: italic;
    font-display: auto;
    src: url('../fonts/SourceSerif4Variable-Italic.otf.woff2') format('woff2-variations');
}

/* base elements */

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

body {
    background-color: var(--background);
    color: var(--default);
    font-family: 'Source Serif 4', Georgia, Charter, serif;
    font-size: var(--font-size-sm);
    font-weight: 400;
    font-variation-settings: 'opsz' 17;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
    text-wrap: pretty;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas {
    display: block;
    max-inline-size: 100%;
    border-radius: 4px;
}

/* typography */

p, ul, ol, li, figcaption, footer {
    max-width: var(--content-max-width);
}

p, figcaption {
    margin-block: 1lh;
}

strong {
    font-weight: 580;
}

h1, h2, h3 {
    max-width: var(--content-max-width);
    font-variation-settings: 'opsz' 10;
    font-weight: 500;
    line-height: 1.25;
}

h1 {
    font-size: var(--font-size-2xl);
    letter-spacing: var(--letter-spacing-tight);
    margin-block: 4rem 0.25rem;
}

h1.main-title {
    text-align: center;
}

h2 {
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-heading);
    margin-block: 4rem 1rem;
}

h3 {
    font-size: var(--font-size-lg);
    letter-spacing: var(--letter-spacing-heading);
    margin-block: 3rem 1rem;
}

.links-title {
    font-size: var(--font-size-md);
    line-height: 1.375;
    font-variation-settings: 'opsz' 10;
    letter-spacing: var(--letter-spacing-heading);
}

.sub-heading {
    color: var(--default-60);
    font-size: var(--font-size-md);
    margin-block: 0.5rem;
}

.subhead {
    color: var(--default-70);
    text-align: center;
    margin-block: 0.5rem;
}

.label {
    font-weight: 540;
    font-variation-settings: 'opsz' 8;
    letter-spacing: var(--letter-spacing-heading);
    margin-block: 2rem 0;
}

.minimal-margin {
    margin-block: 0.125rem;
}

.overline {
    font-size: var(--font-size-lg);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-variation-settings: 'opsz' 8;
    margin-block: 5rem 1rem;
}

.secondary {
    color: var(--default-70);
}

.subtle {
    color: var(--default-60);
}

blockquote {
    max-width: var(--content-max-width);
    padding: 0 0 0 1.125rem;
    margin-block: 1rem;
    border-left: 0.1rem solid var(--accent-70);
}

blockquote p {
    font-style: italic;
}

.anchor {
    margin-left: 0.25rem;
    text-decoration: none;
    color: inherit;
    opacity: 0.25;
}

h2:hover .anchor,
h3:hover .anchor {
    opacity: 1;
}

@media (hover: hover) {
    .anchor {
        opacity: 0; 
    }

    h2:hover .anchor,
    h3:hover .anchor {
        opacity: 1;
    }
}

/* links */

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--default-25);
    text-decoration-thickness: 0.0875rem;
    text-underline-offset: 0.1875rem;
    transition: all 120ms ease-in-out;
}

a:hover,
a:focus-visible {
    color: var(--accent);
    text-decoration-color: var(--accent-70);
}

a:focus-visible {
    outline: 0.09375rem solid var(--accent-70);
    outline-offset: 0.125rem;
    border-radius: 0.125rem;
}

a.minimal-link {
    text-decoration: none;
}

.links-title a {
    font-weight: 500;
    text-decoration: none;
}

.minimal-link:hover,
.links-title a:hover {
    color: var(--accent);
}

/* lists */

@counter-style dash {
    system: cyclic;
    symbols: "―";
    suffix: " ";
}

ul {
    list-style-type: dash;
    padding-left: 1.25rem;
}

ul li {
    padding-left: 0.125rem;
    margin-block: 1rem;
}

ul li::marker {
    color: var(--default-40);
}

ol li {
    padding-left: 0.25rem;
    margin: 1rem 0 1rem 1.5rem;
}

ol li::marker {
    color: var(--default-60);
}

.list-compact li, p.compact {
    margin-block: 0.5rem;
}

/* layout components */

.nav-container {
    height: 2rem;
    max-width: var(--content-max-width);
}

svg.logo {
    color: var(--default);
    height: 2rem;
    width: 2rem;
    display: inline-block;
}

svg.logo:hover {
    color: var(--accent);
    transition: color 200ms ease-in-out;
}

.homepage-header, .subpage-header {
    margin-block: 10.5rem 6rem;
}

.blogpage-header {
    margin-block: 10.5rem 4rem;
}

.prev-next {
    border-top: 0.03125rem solid var(--default-25);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: var(--content-max-width);
    margin-block: 6rem 0;
}

.prev-next > div {
    margin: 0;
}

.prev-next > :nth-child(1) {
    grid-column: 1;
}

.prev-next > :nth-child(2) {
    grid-column: 2;
}

.minimal-link-container {
    max-width: var(--content-max-width);
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin-block: 1rem;
}

.minimal-link-container a {
    margin: 0;
}

footer {
    margin-block: 4rem;
}

.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding-block: 4rem 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.separator {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--default-40);
    border: none;
    height: 5rem;
    font-size: 1rem;
    font-variant-emoji: text;
    user-select: none;
    word-spacing: 0.5rem;
}

.separator::before {
    content: "✳︎ ✳︎ ✳︎";
}

/* media components */

figure {
    margin-block: 3rem;
}

figcaption {
    color: var(--default-70);
    text-align: center;
}

.media-img-small {
    max-width: var(--content-max-width);
}

.media-img-tiny {
    max-width: 400px;
}

.carousel {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 0 1.5rem 0 0;
    margin-block: 2rem 0;
    scrollbar-width: none;
}

.carousel:focus {
    outline: 0.125rem solid var(--accent);
    outline-offset: 0.25rem;
    border-radius: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .carousel {
    scroll-behavior: smooth;
  }
}

.carousel .media-img-tiny {
    display: flex;
    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    align-items: baseline;
    padding: 0 0 0 1.5rem;
    margin-block: 1.5rem;
}

.inline-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.inline-icon svg path {
    color: var(--default-60);
    transition: color 120ms ease-in-out;
}

.blog-title:hover .inline-icon svg path {
    color: var(--accent);
}

/* page specific */

.links-page {
    margin-block: 4rem;
}

.links-page-section {
    margin-block: 2rem;
}

.blog-entry {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    max-width: var(--content-max-width);
}

.blog-entry .blog-title {
    margin: 0;
}

.blog-entry .dashed-line {
    flex-grow: 1;
    border-bottom: 1px dashed var(--default-25);
    min-width: 2rem;
    margin-bottom: 0.5rem;
}

.blog-entry .blog-date {
    color: var(--default-70);
    white-space: nowrap;
}

.about-container {
    position: relative;
}

.profile-image {
    position: absolute;
    top: -18rem;
    right: 3rem;
    max-width: 230px;
    border-radius: 4px;
    border: 5px solid #fff;
    transform: rotate(-9deg);
    transition: transform 200ms ease-in-out;
}

.profile-image:hover {
    transform: rotate(-10deg);
}

/* animations */

header, main, footer {
    will-change: transform, opacity;
    animation: slideUp 600ms ease-out forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        will-change: auto;
    }
}

/* media queries */

@media screen and (max-width: 1080px) {
    .profile-image {
        top: -19rem;
        right: 3rem;
        max-width: 210px;
        transform: rotate(-9deg);
    }
}

@media screen and (max-width: 680px) {
    body {
        margin-inline: 1.5rem;
    }

    .homepage-header, .subpage-header, .blogpage-header {
        margin-block: 4rem;
    }

    .profile-image {
        top: -15rem;
        max-width: 160px;
        transform: rotate(-9deg);
    }

    .carousel {
        margin-inline: -1.5rem;
    }

    .carousel .media-img-tiny img {
        max-width: 300px;
    }
}

@media screen and (max-width: 480px) {
    .blog-entry .dashed-line {
        visibility: hidden;
    }

    .profile-image {
        display: none;
    }
}

@media screen and (max-width: 375px) {
    .minimal-link-container {
        flex-direction: column;
    }
}