:root {
    --foreground: #f2f2f2;
    --background: #000000;
    --page-padding-x: clamp(24px, 4vw, 56px);
    --page-padding-y: clamp(24px, 3vw, 40px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { background: var(--background); }
body {
    overflow: hidden;
    background: var(--background);
    color: var(--foreground);
    font-family: "Inter", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.navigation {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding:
        max(var(--page-padding-y), env(safe-area-inset-top))
        max(var(--page-padding-x), env(safe-area-inset-right))
        var(--page-padding-y)
        max(var(--page-padding-x), env(safe-area-inset-left));
    background: transparent;
}

.navigation--solid { background: var(--background); }

.logo,
.navigation nav a,
.sound-control {
    color: var(--foreground);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.28em;
    text-decoration: none;
}

.logo { letter-spacing: 0.46em; white-space: nowrap; }
.navigation nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 38px); }
.navigation nav a { opacity: 0.52; transition: opacity 240ms ease; }
.navigation nav a:hover,
.navigation nav a:focus-visible,
.navigation nav a.active { opacity: 1; }

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 420px;
    overflow: hidden;
    background: #000;
}

.hero video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity 900ms ease;
}
.hero video.is-ready { opacity: 1; }
.overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.25), transparent 28%),
        linear-gradient(to top, rgba(0,0,0,.20), transparent 24%),
        rgba(0,0,0,.08);
    pointer-events: none;
}
.sound-control {
    position: absolute;
    right: max(var(--page-padding-x), env(safe-area-inset-right));
    bottom: max(var(--page-padding-y), env(safe-area-inset-bottom));
    z-index: 10;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
    line-height: 44px;
    text-align: right;
    cursor: pointer;
    opacity: .62;
    transition: opacity 240ms ease;
    user-select: none;
}
.sound-control:hover,
.sound-control:focus-visible { opacity: 1; }
.logo:focus-visible,
.navigation nav a:focus-visible,
.sound-control:focus-visible,
.archive-entry a:focus-visible,
.back-link:focus-visible {
    outline: 1px solid rgba(255,255,255,.9);
    outline-offset: 6px;
}
.noscript-message {
    position: absolute;
    left: var(--page-padding-x);
    bottom: var(--page-padding-y);
    z-index: 10;
    max-width: 300px;
    font-size: 11px;
    letter-spacing: .12em;
}

.content-page {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--background);
}
.simple-page {
    min-height: 100vh;
    padding: 112px max(var(--page-padding-x), env(safe-area-inset-right)) 64px max(var(--page-padding-x), env(safe-area-inset-left));
}
.simple-copy,
.archive-list,
.work{

    width:min(100%,580px);

}
.simple-copy p,
.links-list a,
.archive-entry time,
.archive-entry a,
.archive-entry p,
.work-year,
.work-title,
.work-type,
.work-text p,
.back-link {
    font-size: 11px;
    font-weight: 300;
}
.simple-copy p { line-height: 1.9; letter-spacing: .08em; }

.links-list { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.links-list a {
    color: var(--foreground);
    text-decoration: none;
    letter-spacing: .08em;
    opacity: .55;
    transition: opacity 240ms ease;
}
.links-list a:hover,
.links-list a:focus-visible { opacity: 1; }

.archive-list { display: flex; flex-direction: column; align-items: flex-start; gap: 52px; }
.archive-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.archive-entry time {
    margin-bottom: 10px;
    color: var(--foreground);
    letter-spacing: .28em;
    opacity: .45;
}
.archive-entry a {
    color: var(--foreground);
    text-decoration: none;
    letter-spacing: .08em;
    opacity: .65;
    transition: opacity 240ms ease;
}
.archive-entry a:hover,
.archive-entry a:focus-visible { opacity: 1; }
.archive-entry p {
    color: var(--foreground);
    line-height: 1.6;
    letter-spacing: .08em;
    opacity: .35;
}

.work-header { margin-bottom: 56px; }
.work-year {
    display: block;
    margin-bottom: 20px;
    color: var(--foreground);
    letter-spacing: .28em;
    opacity: .45;
}
.work-title {
    margin: 0 0 10px;
    color: var(--foreground);
    line-height: 1.5;
    letter-spacing: .08em;
}
.work-type {
    color: var(--foreground);
    line-height: 1.6;
    letter-spacing: .08em;
    opacity: .35;
}
.work-text { display: flex; flex-direction: column; gap: 28px; }
.work-text p { color: var(--foreground); line-height: 2.15; letter-spacing: .04em; }
.back-link {
    display: inline-block;
    margin-top: 72px;
    color: var(--foreground);
    line-height: 1.5;
    letter-spacing: .08em;
    text-decoration: none;
    opacity: .55;
    transition: opacity 240ms ease;
}
.back-link:hover,
.back-link:focus-visible { opacity: 1; }

@media (max-width: 720px) {
    .navigation { align-items: flex-start; }
    .logo,
    .navigation nav a,
    .sound-control,
    .simple-copy p,
    .links-list a,
    .archive-entry time,
    .archive-entry a,
    .archive-entry p,
    .work-year,
    .work-title,
    .work-type,
    .work-text p,
    .back-link { font-size: 10px; }
    .logo { position: relative; z-index: 30; cursor: pointer; }
    .navigation nav {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 22px;
        padding: 112px max(var(--page-padding-x), env(safe-area-inset-right)) 48px max(var(--page-padding-x), env(safe-area-inset-left));
        background: var(--background);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease, visibility 240ms ease;
    }
    .navigation nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
    .navigation nav a { letter-spacing: .18em; }
    body.menu-open { overflow: hidden; }
    .simple-page { padding-top: 132px; }
    .archive-list { gap: 44px; }
    .work-header { margin-bottom: 48px; }
    .work-text { gap: 24px; }
    .back-link { margin-top: 56px; }
}

@media (max-width: 390px) {
    .logo { letter-spacing: .32em; }
}

@media (prefers-reduced-motion: reduce) {
    .hero video,
    .navigation nav,
    .navigation nav a,
    .sound-control,
    .links-list a,
    .archive-entry a,
    .back-link {
        transition: none;
    }
}

/* ==========================
   WORK READING MODE
========================== */

html.work-document {
    background: #ffffff;
}

body.work-page {
    background: #ffffff;
    color: #111111;
}

.work-page .navigation,
.work-page .navigation nav {
    background: #ffffff;
}

.work-page .logo,
.work-page .navigation nav a,
.work-page .work-year,
.work-page .work-title,
.work-page .work-type,
.work-page .work-text p,
.work-page .back-link {
    color: #111111;
}

.work-page .logo:focus-visible,
.work-page .navigation nav a:focus-visible,
.work-page .back-link:focus-visible {
    outline-color: rgba(17, 17, 17, 0.9);
}

.work-page .back-link {
    opacity: 0.45;
}

.work-page .back-link:hover,
.work-page .back-link:focus-visible {
    opacity: 1;
}