* {
    box-sizing: border-box;
}

/* ---------------------------
   DAY AND NIGHT

   tree.js follows the sun on the visitor's clock and sets
   data-sky="night" a little after sunset, and --night from 0 to 1
   as the dusk deepens. Registered so the colours fade, not snap.
--------------------------- */

@property --ink {
    syntax: '<color>';
    inherits: true;
    initial-value: #29251f;
}

@property --accent {
    syntax: '<color>';
    inherits: true;
    initial-value: #6f3f25;
}

@property --accent-hover {
    syntax: '<color>';
    inherits: true;
    initial-value: #9b542d;
}

@property --paper {
    syntax: '<color>';
    inherits: true;
    initial-value: #fffaf0;
}

@property --page {
    syntax: '<color>';
    inherits: true;
    initial-value: #e9dfcf;
}

:root {
    --ink: #29251f;
    --accent: #6f3f25;
    --accent-hover: #9b542d;
    --paper: #fffaf0;
    --page: #e9dfcf;
    --night: 0;
    --dusk: 0;

    transition:
        --ink 2.5s ease,
        --accent 2.5s ease,
        --accent-hover 2.5s ease,
        --paper 2.5s ease,
        --page 2.5s ease;
}

/* moonlight on paper */
:root[data-sky='night'] {
    --ink: #e4e0d4;
    --accent: #d9a97f;
    --accent-hover: #f2c9a0;
    --paper: #131a2e;
    --page: #0a0f1e;

    color-scheme: dark;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    color: var(--ink);
    background: var(--page);

    font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
        sans-serif;
}

/* ---------------------------
   PAGE
--------------------------- */

/* ---------------------------
   LIVING BACKGROUND
--------------------------- */

.scenery {
    position: fixed;
    inset: 0;

    z-index: 0;

    display: block;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background:
        /* the night sky, deepening over the day's colours at dusk */
        linear-gradient(
            180deg,
            rgb(44 58 104 / calc(var(--dusk) * 0.55)) 0%,
            rgb(92 88 128 / calc(var(--dusk) * 0.4)) 60%,
            rgb(214 132 96 / calc(var(--dusk) * 0.45)) 100%
        ),
        linear-gradient(
            180deg,
            rgb(5 9 24 / var(--night)) 0%,
            rgb(11 18 38 / var(--night)) 55%,
            rgb(18 22 34 / var(--night)) 100%
        ),
        radial-gradient(
            circle at 12% 10%,
            rgba(242, 192, 108, 0.3),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(171, 93, 55, 0.16),
            transparent 26%
        ),
        linear-gradient(135deg, #eee6d8 0%, #e3d1b6 55%, #cba47e 100%);
}

.forest {
    position: relative;
    z-index: 1;

    min-height: 100vh;

    padding: 0 clamp(28px, 7vw, 120px) 80px;

    /* the sent letter flies off past the edge without widening the page */
    overflow-x: clip;
}

/* ---------------------------
   HEADER
--------------------------- */

.site-header {
    max-width: 1180px;

    margin: 0 auto;

    padding: 45px 0 90px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 50px;
}

.brand-name {
    color: var(--ink);

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(34px, 3.5vw, 50px);
    font-weight: 400;

    letter-spacing: -0.04em;

    text-decoration: none;
}

.tagline {
    margin: 8px 0 0;

    color: color-mix(in srgb, var(--ink) 55%, transparent);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.24em;

    text-transform: uppercase;
}

/* ---------------------------
   NAV
--------------------------- */

nav ul {
    display: flex;
    flex-wrap: wrap;

    gap: 28px;

    margin: 12px 0 0;
    padding: 0;

    list-style: none;
}

nav a {
    color: color-mix(in srgb, var(--ink) 66%, transparent);

    font-size: 14px;

    text-decoration: none;

    transition: color 150ms ease;
}

nav a:hover,
nav a:focus-visible {
    color: var(--ink);
}

/* the same page in the other language, set a little apart */
nav .lang-switch {
    padding-left: 28px;

    border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

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

/* ---------------------------
   MAIN
--------------------------- */

main {
    max-width: 1180px;

    margin: 0 auto;
}

/* ---------------------------
   HERO
--------------------------- */

.hero {
    max-width: 850px;

    padding: 70px 0 180px;
}

.section-label {
    margin: 0 0 24px;

    color: color-mix(in srgb, var(--ink) 48%, transparent);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}

.hero-name {
    margin: 0 0 24px;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(22px, 2vw, 28px);

    letter-spacing: -0.01em;

    color: var(--ink);
}

.hero h1 {
    margin: 0 0 42px;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(50px, 6vw, 88px);
    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -0.05em;

    color: var(--ink);
}

.hero-intro {
    max-width: 660px;

    margin: 0;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(20px, 1.8vw, 25px);

    line-height: 1.55;

    color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* ---------------------------
   SECTIONS
--------------------------- */

section:not(.hero) {
    max-width: 700px;

    margin-bottom: 180px;

    scroll-margin-top: 50px;
}

section:not(.hero) h2 {
    margin: 0 0 28px;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(38px, 4vw, 58px);
    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -0.04em;

    color: var(--ink);
}

section:not(.hero) p:not(.section-label) {
    margin: 0 0 22px;

    max-width: 650px;

    color: color-mix(in srgb, var(--ink) 72%, transparent);

    font-size: 18px;

    line-height: 1.7;
}

/* entries: writing, friends */

.entries {
    margin: 44px 0 0;
    padding: 0;

    list-style: none;
}

.entry {
    padding: 26px 0 4px;

    border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

section:not(.hero) .entry .entry-meta {
    margin: 0 0 10px;

    color: color-mix(in srgb, var(--ink) 48%, transparent);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}

.entry-title {
    margin: 0 0 12px;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: 26px;
    font-weight: 400;

    line-height: 1.25;

    letter-spacing: -0.02em;

    color: var(--ink);
}

section:not(.hero) .entry p:not(.entry-meta) {
    font-size: 17px;
}

section:not(.hero) .entry p.entry-note {
    margin-top: -10px;

    font-size: 14px;
    font-style: italic;

    color: color-mix(in srgb, var(--ink) 55%, transparent);
}

section:not(.hero) .more-link {
    margin-top: 28px;

    font-size: 14px;
}

.more-link a {
    color: color-mix(in srgb, var(--ink) 66%, transparent);

    text-decoration: none;

    border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);

    transition:
        color 150ms ease,
        border-color 150ms ease;
}

.more-link a:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* references: pointers into the wider web */

.references {
    margin: 36px 0 0;
    padding: 0;

    list-style: none;
}

.reference {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: baseline;

    gap: 4px 24px;

    padding: 14px 0;

    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

section:not(.hero) .reference p {
    margin: 0;
}

section:not(.hero) .reference .reference-kind {
    color: color-mix(in srgb, var(--ink) 45%, transparent);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}

section:not(.hero) .reference .reference-body {
    font-size: 16px;

    line-height: 1.6;

    color: color-mix(in srgb, var(--ink) 60%, transparent);
}

.reference-body a {
    margin-right: 8px;

    color: var(--ink);

    font-family: Georgia, 'Times New Roman', serif;
    font-size: 19px;

    text-decoration: none;

    border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);

    transition: border-color 150ms ease;
}

.reference-body a:hover {
    border-color: color-mix(in srgb, var(--ink) 60%, transparent);
}

/* smaller, quieter section */

section.section-minor h2 {
    font-size: clamp(30px, 3vw, 40px);
}

/* alternate section position */

#approach {
    margin-left: 6%;
}

#writing {
    margin-left: auto;
    margin-right: 7%;
}

#elsewhere {
    margin-left: auto;
    margin-right: 9%;
}

#about {
    margin-left: 8%;
}

#friends {
    margin-left: auto;
    margin-right: 5%;
}

#contact {
    margin-left: 4%;
}

/* ---------------------------
   WRITING INDEX
--------------------------- */

nav a[aria-current='page'] {
    color: var(--ink);
}

.page-intro {
    max-width: 760px;

    padding: 40px 0 90px;
}

.page-intro h1 {
    margin: 0 0 32px;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(44px, 5vw, 72px);
    font-weight: 400;

    line-height: 1.04;

    letter-spacing: -0.05em;

    color: var(--ink);
}

.page-intro p:not(.section-label) {
    max-width: 600px;

    margin: 0;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(19px, 1.6vw, 22px);

    line-height: 1.55;

    color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.writing-list .entries {
    margin-top: 0;
}

section.writing-list h2.entry-title {
    margin: 0 0 12px;

    font-size: 30px;

    line-height: 1.2;

    letter-spacing: -0.02em;
}

#about p a {
    color: var(--accent);

    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    text-underline-offset: 3px;
}

#about p a:hover {
    color: var(--accent-hover);
}

/* about: the profile reuses .prose, aligned with .page-intro */

.profile {
    max-width: 700px;

    margin-bottom: 120px;
}

/* ---------------------------
   ESSAY
--------------------------- */

.essay {
    max-width: 700px;

    margin: 0 auto 120px;
}

.essay-header {
    padding: 30px 0 48px;

    margin-bottom: 52px;

    border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.section-label a {
    color: inherit;

    text-decoration: none;
}

.section-label a:hover {
    color: var(--ink);
}

.essay-header h1 {
    margin: 0 0 28px;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(40px, 4.6vw, 64px);
    font-weight: 400;

    line-height: 1.06;

    letter-spacing: -0.04em;

    color: var(--ink);
}

.essay-description {
    margin: 0 0 28px;

    font-family: Georgia, 'Times New Roman', serif;

    font-size: clamp(19px, 1.6vw, 22px);

    line-height: 1.55;

    color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.essay-meta {
    margin: 0;

    color: color-mix(in srgb, var(--ink) 48%, transparent);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}

/* experiment: shown while a page is an example or not yet started */

.experiment-notice {
    margin: 28px 0 0;
    padding: 14px 18px;

    border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);

    background: color-mix(in srgb, var(--paper) 45%, transparent);

    font-size: 15px;

    line-height: 1.6;

    color: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* long-form text */

.prose {
    font-family: Georgia, 'Times New Roman', serif;

    font-size: 20px;

    line-height: 1.7;

    color: color-mix(in srgb, var(--ink) 84%, transparent);
}

.prose > * {
    margin: 0 0 26px;
}

.prose h2 {
    margin: 64px 0 20px;

    font-size: 30px;
    font-weight: 400;

    line-height: 1.2;

    letter-spacing: -0.02em;

    color: var(--ink);
}

.prose h3 {
    margin: 44px 0 14px;

    font-size: 22px;
    font-weight: 400;

    color: var(--ink);
}

.prose a {
    color: var(--accent);

    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    text-underline-offset: 3px;
}

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

.prose ul,
.prose ol {
    padding-left: 1.2em;
}

.prose li + li {
    margin-top: 8px;
}

.prose blockquote {
    margin-left: 0;
    padding-left: 24px;

    border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);

    font-style: italic;

    color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

    font-size: 0.82em;

    padding: 2px 5px;

    border-radius: 3px;

    background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.prose pre {
    overflow-x: auto;

    padding: 18px 20px;

    border-radius: 4px;

    background: color-mix(in srgb, var(--ink) 7%, transparent);

    line-height: 1.5;
}

.prose pre code {
    padding: 0;

    background: none;
}

.prose figure {
    margin-left: 0;
    margin-right: 0;
}

.prose img {
    max-width: 100%;
    height: auto;
}

.prose figcaption {
    margin-top: 10px;

    font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
        sans-serif;

    font-size: 13px;

    color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.prose hr {
    margin: 56px 0;

    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.prose .note {
    padding: 18px 22px;

    border-radius: 4px;

    background: color-mix(in srgb, var(--paper) 45%, transparent);

    font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.6;
}

.prose-pending {
    font-style: italic;

    color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.essay-footer {
    margin-top: 72px;
    padding-top: 26px;

    border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px 24px;
}

.essay-footer p {
    margin: 0;

    font-size: 14px;

    color: color-mix(in srgb, var(--ink) 60%, transparent);
}

.essay-footer a {
    color: var(--accent);

    text-decoration: none;
}

.essay-footer a:hover {
    color: var(--accent-hover);
}

/* ---------------------------
   CONTACT LETTER

   contact.js folds the paper into the envelope and sends it off.
--------------------------- */

.letter {
    max-width: 620px;

    margin-top: 44px;
}

.letter-honey,
.letter [hidden] {
    display: none;
}

.letter-desk {
    position: relative;
}

.letter-paper {
    padding: 34px 40px 30px;

    border-radius: 2px;

    background:
        /* a faint margin rule */
        linear-gradient(
                90deg,
                transparent 22px,
                color-mix(in srgb, var(--accent) 22%, transparent) 22px 23px,
                transparent 23px
            )
            no-repeat,
        /* parchment, warmed toward the page rather than bright white */
        color-mix(
                in srgb,
                color-mix(in srgb, var(--paper) 45%, var(--page)) 95%,
                var(--accent)
            );

    box-shadow:
        0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
        0 22px 44px -22px rgb(58 36 18 / 0.45);

    transform: rotate(-0.6deg);
    transform-origin: center;

    font-family: Georgia, 'Times New Roman', serif;
    font-size: 19px;

    color: var(--ink);
}

.letter-date {
    margin-bottom: 18px;

    text-align: right;

    font-size: 14px;
    font-style: italic;

    color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.letter-line {
    display: block;

    line-height: 2;
}

.letter-sign {
    margin-top: 14px;
}

.letter textarea,
.letter input {
    font: inherit;

    color: var(--accent);

    background: transparent;

    border: 0;
    border-radius: 0;

    outline: none;
}

.letter textarea::placeholder,
.letter input::placeholder {
    font-style: italic;

    color: color-mix(in srgb, var(--ink) 32%, transparent);
}

/* ruled lines that scroll with the writing */
.letter textarea {
    display: block;

    width: 100%;
    min-height: calc(4 * 34px + 4px);

    margin: 4px 0 0;
    padding: 0 2px;

    line-height: 34px;

    resize: vertical;
    field-sizing: content;

    background-image: linear-gradient(
        transparent 33px,
        color-mix(in srgb, var(--ink) 14%, transparent) 33px
    );
    background-size: 100% 34px;
    background-attachment: local;
}

.letter textarea:focus {
    background-image: linear-gradient(
        transparent 33px,
        color-mix(in srgb, var(--accent) 40%, transparent) 33px
    );
}

/* fill-in-the-blank */
.letter input {
    width: 16ch;
    max-width: 100%;

    padding: 0 4px;

    border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);

    transition: border-color 150ms ease;
}

.letter input:focus {
    border-bottom: 1px solid var(--accent);
}

.letter input[type='email'] {
    width: 22ch;
}

.letter-optional,
.letter-hint {
    font-size: 14px;
    font-style: italic;

    color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.letter-hint {
    margin: 10px 0 0;

    line-height: 1.5;
}

/* the envelope waits, unseen, behind the paper */

.envelope {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(300px, 78%);
    aspect-ratio: 1.6;

    translate: -50% -50%;

    border-radius: 3px;

    background: color-mix(in srgb, var(--paper) 80%, var(--accent));

    box-shadow: 0 18px 30px -16px rgb(58 36 18 / 0.5);

    opacity: 0;

    pointer-events: none;

    perspective: 700px;
}

/* the bottom flap */
.envelope::before {
    content: '';

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: color-mix(in srgb, var(--paper) 72%, var(--accent));

    clip-path: polygon(0 100%, 0 0, 50% 56%, 100% 0, 100% 100%);
}

.envelope-flap {
    position: absolute;
    inset: 0 0 auto;

    height: 60%;

    background: color-mix(in srgb, var(--paper) 66%, var(--accent));

    clip-path: polygon(0 0, 100% 0, 50% 100%);

    transform-origin: top;

    filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.15));
}

.envelope.is-open .envelope-flap {
    transform: rotateX(180deg);
}

.envelope-seal {
    position: absolute;
    top: 60%;
    left: 50%;

    width: 46px;
    height: 46px;

    margin: -23px 0 0 -23px;

    display: grid;
    place-items: center;

    border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;

    background: radial-gradient(
        circle at 38% 34%,
        color-mix(in srgb, #b3402c 70%, white),
        #8e2a1c 55%,
        #5f1a10
    );

    box-shadow:
        0 2px 4px rgb(0 0 0 / 0.3),
        inset 0 0 0 4px rgb(0 0 0 / 0.12);

    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-style: italic;

    color: rgb(255 220 200 / 0.75);

    opacity: 0;
}

.envelope-postmark {
    position: absolute;
    top: 12px;
    right: 14px;

    z-index: 1;

    padding: 5px 8px;

    border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent);
    border-radius: 3px;

    transform: rotate(4deg);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.18em;
    line-height: 1.5;

    text-align: center;
    text-transform: uppercase;

    color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.envelope-date {
    display: block;

    letter-spacing: 0.06em;
}

.envelope-returned {
    position: absolute;
    top: 50%;
    left: 50%;

    padding: 6px 12px;

    translate: -50% -50%;

    border: 3px double #a3301f;
    border-radius: 4px;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.2em;

    white-space: nowrap;
    text-transform: uppercase;

    color: #a3301f;

    opacity: 0;
}

/* sending */

.letter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 14px 22px;

    margin-top: 34px;
}

.letter-send,
.letter-again {
    cursor: pointer;

    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-style: italic;
}

.letter-send {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 11px 22px 11px 14px;

    border: 0;
    border-radius: 999px;

    color: var(--paper);
    background: var(--accent);

    box-shadow: 0 10px 20px -12px rgb(58 36 18 / 0.7);

    transition:
        background 150ms ease,
        transform 150ms ease;
}

/* a small wax seal on the button */
.letter-send::before {
    content: '';

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: radial-gradient(circle at 35% 35%, #c9563f, #7a2316);

    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.15);
}

.letter-send:hover {
    background: var(--accent-hover);

    transform: translateY(-1px);
}

.letter-send:disabled {
    cursor: default;

    opacity: 0.6;

    transform: none;
}

.letter-send:focus-visible,
.letter-again:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}

.letter-status {
    font-size: 15px;
    font-style: italic;

    color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.letter-status a {
    color: var(--accent);
}

/* sent */

.letter-sent {
    padding: 10px 0;
}

.letter-sent-title {
    margin-bottom: 8px;

    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28px;

    letter-spacing: -0.02em;

    color: var(--ink);

    outline: none;
}

.letter-sent-note {
    margin-bottom: 22px;

    font-size: 17px;

    color: color-mix(in srgb, var(--ink) 66%, transparent);
}

.letter-sent-email {
    color: var(--accent);
}

.letter-again {
    padding: 0;

    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);

    color: color-mix(in srgb, var(--ink) 72%, transparent);
    background: none;
}

.letter-again:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* ---------------------------
   FOOTER
--------------------------- */

footer {
    max-width: 1180px;

    margin: 40px auto 0;

    padding: 28px 0 0;

    display: flex;
    justify-content: space-between;

    border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);

    color: color-mix(in srgb, var(--ink) 45%, transparent);
}

footer p {
    margin: 0;

    font-size: 11px;
}

footer a {
    color: inherit;
}

/* ---------------------------
   TABLET
--------------------------- */

@media (max-width: 850px) {
    .site-header {
        flex-direction: column;

        gap: 28px;

        padding-bottom: 60px;
    }

    .hero {
        padding: 40px 0 130px;
    }

    #experience,
    #hobbies,
    #about,
    #contact {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------------------------
   MOBILE
--------------------------- */

@media (max-width: 600px) {
    .forest {
        padding: 0 22px 50px;
    }

    .site-header {
        padding-top: 30px;
    }

    nav ul {
        gap: 14px 20px;
    }

    nav .lang-switch {
        padding-left: 20px;
    }

    .hero h1 {
        font-size: 52px;
    }

    .hero-intro {
        font-size: 20px;
    }

    section:not(.hero) {
        margin-bottom: 120px;
    }

    section:not(.hero) h2 {
        font-size: 40px;
    }

    section.section-minor h2 {
        font-size: 30px;
    }

    .entry-title,
    section.writing-list h2.entry-title {
        font-size: 23px;
    }

    .reference {
        grid-template-columns: 1fr;
    }

    .letter-paper {
        padding: 26px 22px 24px 30px;

        font-size: 18px;
    }

    .page-intro {
        padding: 20px 0 60px;
    }

    .prose {
        font-size: 18px;
    }

    footer {
        flex-direction: column;

        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.entry-title a {
    color: var(--accent);
    text-decoration: none;

    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);

    transition:
        color 150ms ease,
        border-color 150ms ease;
}

.entry-title a:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}