@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500;1,600&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
    --sp-bg: #f6fbff;
    --sp-bg-2: #eef7ff;
    --sp-sky: #edf9ff;
    --sp-aqua: #eaf9f7;
    --sp-lilac: #f2f0ff;
    --sp-blush: #faf3ff;
    --sp-warm: #fffaf5;
    --sp-panel: rgba(255, 255, 255, 0.78);
    --sp-panel-strong: rgba(255, 255, 255, 0.92);
    --sp-ink: #142236;
    --sp-text: #34445a;
    --sp-muted: #63748a;
    --sp-faint: #8292a6;
    --sp-line: rgba(48, 111, 161, 0.16);
    --sp-line-strong: rgba(0, 151, 196, 0.32);
    --sp-blue: #1476d9;
    --sp-cyan: #00aacc;
    --sp-purple: #6554ff;
    --sp-glow: rgba(0, 170, 204, 0.16);
    --sp-shadow: 0 22px 58px rgba(43, 93, 132, 0.13);
    --sp-shadow-hover: 0 30px 76px rgba(43, 93, 132, 0.19);
    --sp-radius: 8px;
    --sp-mx: 50vw;
    --sp-my: 18vh;
}

html {
    scroll-behavior: smooth;
    background: var(--sp-bg);
}

body {
    color: var(--sp-text) !important;
    font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 17px;
    line-height: 1.78;
    background:
        linear-gradient(rgba(20, 118, 217, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 118, 217, 0.045) 1px, transparent 1px),
        radial-gradient(circle at var(--sp-mx) var(--sp-my), rgba(0, 170, 204, 0.16), transparent 32rem),
        radial-gradient(circle at 86% 42%, rgba(101, 84, 255, 0.10), transparent 34rem),
        radial-gradient(circle at 16% 82%, rgba(20, 118, 217, 0.08), transparent 30rem),
        linear-gradient(180deg,
            #fbfdff 0%,
            var(--sp-sky) 20%,
            var(--sp-aqua) 40%,
            var(--sp-lilac) 62%,
            var(--sp-blush) 81%,
            var(--sp-warm) 100%) !important;
    background-size: 72px 72px, 72px 72px, auto, auto, auto, auto !important;
    background-attachment: fixed !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.58) 42% 43%, transparent 43%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.58) 0%,
            rgba(255, 255, 255, 0.16) 26%,
            rgba(235, 252, 250, 0.08) 48%,
            rgba(247, 240, 255, 0.13) 74%,
            rgba(255, 248, 240, 0.26) 100%);
}

#wrapper {
    position: relative;
    width: min(1180px, calc(100% - 2rem));
    max-width: 1180px;
    perspective: 1200px;
}

a {
    color: var(--sp-blue);
    border-bottom-color: rgba(20, 118, 217, 0.24);
    transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
    color: #4936d6;
    border-bottom-color: rgba(101, 84, 255, 0.34);
}

strong,
b {
    color: var(--sp-ink) !important;
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--sp-ink) !important;
    font-family: "Inter", "Segoe UI", sans-serif;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

p {
    color: var(--sp-text);
}

#header {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 2rem 4.25rem;
    color: var(--sp-text);
}

#header::before {
    content: "SPATIAL / EMBODIED / INTERACTIVE / INTELLIGENT";
    display: inline-flex;
    margin-bottom: 1.1rem;
    padding: 0.48rem 0.72rem;
    border: 0.5px solid var(--sp-line-strong);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(235, 249, 255, 0.68));
    color: #087089;
    box-shadow: 0 0 34px var(--sp-glow), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(18px) saturate(1.18);
}

#header::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: min(720px, 82vw);
    height: min(720px, 82vw);
    transform: translate(-50%, -50%);
    border: 0.5px solid rgba(0, 170, 204, 0.12);
    pointer-events: none;
    box-shadow: inset 0 0 90px rgba(0, 170, 204, 0.055);
}

#header h1 {
    position: relative;
    z-index: 1;
    color: var(--sp-ink) !important;
    font-size: clamp(2.35rem, 5vw, 4.8rem);
    line-height: 1.05;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 16px 44px rgba(20, 118, 217, 0.12);
}

#header p {
    position: relative;
    z-index: 1;
    color: var(--sp-muted) !important;
    font-size: 1.05rem;
}

.motto {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 1.35rem auto 0;
    padding: 1.05rem 1.25rem 1rem;
    border: 0.5px solid rgba(0, 170, 204, 0.22);
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.80),
        rgba(233, 249, 255, 0.72) 58%,
        rgba(247, 242, 255, 0.66));
    box-shadow: var(--sp-shadow);
    color: #24405e !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    font-style: italic;
    line-height: 1.28;
    text-align: center !important;
    backdrop-filter: blur(18px) saturate(1.18);
}

#nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.86),
        rgba(239, 248, 255, 0.76)) !important;
    border: 0.5px solid var(--sp-line) !important;
    box-shadow: 0 18px 48px rgba(43, 93, 132, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(22px) saturate(1.16);
    border-radius: 0 !important;
}

/* Temporarily hide Resources until the section is ready to publish. */
#nav .nav-resources {
    display: none !important;
}

#nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    width: min(100%, 31rem);
    margin: 0 auto;
}

#nav ul li {
    display: block;
    min-width: 0;
    margin: 0;
}

#nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.5rem;
    box-sizing: border-box;
    padding: 0 1rem;
    line-height: 1;
    color: rgba(20, 34, 54, 0.64) !important;
    border-radius: 0 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#nav ul li a:hover {
    background: rgba(0, 170, 204, 0.08) !important;
    color: var(--sp-ink) !important;
}

#nav ul li a.active {
    background: linear-gradient(135deg, rgba(0, 170, 204, 0.15), rgba(101, 84, 255, 0.08)) !important;
    box-shadow: inset 0 0 0 0.5px rgba(0, 170, 204, 0.28);
    color: #074f6b !important;
}

#main {
    color: var(--sp-text);
    background: transparent !important;
}

#main > section,
.publication-entry,
.project-item,
.resource-card,
.category-section,
.service-item,
.post-content,
#footer section {
    position: relative;
    border: 0.5px solid var(--sp-line) !important;
    border-radius: var(--sp-radius) !important;
    background:
        radial-gradient(circle at 0 0, rgba(0, 170, 204, 0.09), transparent 24rem),
        radial-gradient(circle at 100% 100%, rgba(101, 84, 255, 0.07), transparent 28rem),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(241, 250, 255, 0.80) 54%,
            rgba(250, 246, 255, 0.76) 100%) !important;
    box-shadow: var(--sp-shadow) !important;
    backdrop-filter: blur(20px) saturate(1.18);
}

#main > section::before,
.publication-entry::before,
.project-item::before,
.resource-card::before,
.category-section::before,
.service-item::before,
#footer section::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--sp-cyan) 0 42px, transparent 42px calc(100% - 42px), var(--sp-purple) calc(100% - 42px)),
        linear-gradient(90deg, var(--sp-purple) 0 42px, transparent 42px calc(100% - 42px), var(--sp-cyan) calc(100% - 42px));
    background-size: 100% 1px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    opacity: 0.28;
}

#main > section {
    margin-bottom: 1.25rem;
}

.main {
    padding: 4rem 0;
}

header.major h2,
.resources-header h2,
.section-title {
    position: relative;
    display: inline-block;
    color: var(--sp-ink) !important;
}

header.major h2::before,
.resources-header h2::before {
    content: "scan / decode";
    display: block;
    margin-bottom: 0.48rem;
    color: #087089;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

header.major h2::after,
.section-title::after {
    height: 2px !important;
    background: linear-gradient(90deg, var(--sp-cyan), var(--sp-blue), var(--sp-purple)) !important;
    border-radius: 0 !important;
}

.spotlight {
    align-items: center;
    gap: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.spotlight .content {
    max-width: 760px;
}

.spotlight .image {
    position: relative;
    padding: 0.55rem;
    border: 0.5px solid rgba(0, 170, 204, 0.22);
    border-radius: var(--sp-radius);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 22px 54px rgba(43, 93, 132, 0.17);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.spotlight .image::before,
.image-container::before,
.card-image::before {
    content: "x 22.3193 / y 114.1694";
    position: absolute;
    left: 0;
    top: -1.18rem;
    color: rgba(8, 112, 137, 0.72);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.spotlight .image::after,
.image-container::after,
.card-image::after {
    content: "";
    position: absolute;
    inset: 0.55rem;
    height: 30%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0, 170, 204, 0.16), transparent);
    animation: spatial-scan 5.4s ease-in-out infinite;
    mix-blend-mode: multiply;
}

.spotlight .image img,
.image-container img,
.card-image img {
    border-radius: 6px !important;
}

.spotlight .image:hover,
.publication-entry:hover,
.project-item:hover,
.resource-card:hover,
.category-section:hover {
    transform: translateY(-5px) scale(1.006) !important;
    box-shadow: var(--sp-shadow-hover) !important;
}

.publication-entry {
    align-items: stretch;
    gap: 1.25rem;
    margin-bottom: 1rem !important;
    padding: 1.2rem !important;
}

.publication-thumbnail {
    width: 128px !important;
    min-height: 92px;
    margin-right: 0 !important;
    border: 0.5px solid rgba(0, 170, 204, 0.24);
    border-radius: 6px !important;
    background: linear-gradient(135deg, #e6f8ff, #dfeeff) !important;
    color: #07536f !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.publication-content .pub-title,
.publication-content .pub-title a,
.project-item h3,
.card-title {
    color: var(--sp-ink) !important;
}

.publication-content .pub-title a:hover,
.card-title:hover {
    color: var(--sp-blue) !important;
}

.publication-content .pub-authors,
.publication-content .pub-venue,
.project-info p,
.card-excerpt,
.resources-header p {
    color: var(--sp-muted) !important;
}

.award-badge,
.post-tag,
.card-tag {
    border: 0.5px solid rgba(20, 118, 217, 0.22) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(0, 170, 204, 0.15), rgba(101, 84, 255, 0.12)) !important;
    color: #07536f !important;
    box-shadow: none !important;
    animation: spatial-breathe 4s ease-in-out infinite;
}

span[style*="color:red"],
span[style*="color: red"] {
    color: #0a6f8a !important;
    font-weight: 700;
}

.news-list li {
    border-left: 2px solid rgba(0, 170, 204, 0.52) !important;
    border-radius: 6px !important;
}

.news-list .date {
    color: #087089 !important;
    font-family: "JetBrains Mono", monospace;
}

#toggle-news,
.toggle-category,
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    border: 0.5px solid rgba(0, 170, 204, 0.34) !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(225, 247, 255, 0.82)) !important;
    color: #084c66 !important;
    box-shadow: 0 12px 30px rgba(0, 170, 204, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    font-family: "JetBrains Mono", monospace !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#toggle-news:hover,
.toggle-category:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    border-color: rgba(101, 84, 255, 0.42) !important;
    color: #142236 !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 44px rgba(0, 170, 204, 0.17);
}

.image-container {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem !important;
    margin: 2.2rem 0 1.5rem !important;
}

.image-container img {
    width: 100%;
    max-width: none !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 0.5px solid rgba(0, 170, 204, 0.18);
    box-shadow: 0 14px 34px rgba(43, 93, 132, 0.13) !important;
}

.project-item {
    margin-bottom: 1.6rem !important;
    padding: clamp(1.25rem, 3vw, 2rem) !important;
}

.project-item h3 {
    max-width: 860px;
    font-size: clamp(1.2rem, 2.3vw, 1.65rem) !important;
    line-height: 1.28;
}

.resources-header h2,
.resources-header p,
.category-title,
.category-count,
.toggle-category,
.post-title,
.post-meta,
.back-link {
    color: var(--sp-ink) !important;
}

.resources-header {
    margin-bottom: 2rem !important;
}

.category-section {
    padding: 1.35rem;
}

.category-header {
    border-bottom: 0.5px solid var(--sp-line) !important;
}

.category-title {
    gap: 0.7rem;
}

.category-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0.5px solid rgba(0, 170, 204, 0.24);
    border-radius: 6px;
    background: rgba(230, 248, 255, 0.78);
    font-size: 0.95rem !important;
}

.category-count {
    background: rgba(0, 170, 204, 0.1) !important;
    color: #07536f !important;
}

.category-cards {
    gap: 1rem !important;
}

.resource-card {
    overflow: hidden;
}

.card-image {
    position: relative;
    background: linear-gradient(135deg, #dff7ff, #e8eeff) !important;
}

.card-link::after {
    content: " -> " !important;
}

.back-link::before {
    content: none !important;
}

.back-link {
    color: #07536f !important;
}

.post-container {
    max-width: 920px !important;
}

.post-content {
    color: var(--sp-text) !important;
}

.post-content h2,
.post-content h3 {
    color: var(--sp-ink) !important;
    border-bottom-color: rgba(0, 170, 204, 0.2) !important;
}

.post-content blockquote {
    border-left-color: var(--sp-cyan) !important;
    background: rgba(230, 248, 255, 0.62) !important;
    color: #42536a !important;
}

.post-content code {
    background: #edf7ff !important;
    color: #07536f !important;
}

.post-content pre {
    background: #142236 !important;
    color: #e9f8ff !important;
}

#footer {
    color: var(--sp-text) !important;
    background: transparent !important;
    margin-top: 1.5rem !important;
}

#footer h2,
#footer .spotlight .content h2 {
    color: var(--sp-ink) !important;
}

#footer section {
    padding: 2rem !important;
}

#footer dl.alt,
#footer dl.alt dt,
#footer dl.alt dd {
    color: var(--sp-muted) !important;
}

#footer dl.alt dt {
    color: var(--sp-ink) !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#footer a {
    color: var(--sp-blue) !important;
}

#footer .copyright {
    color: rgba(20, 34, 54, 0.48) !important;
    text-align: center !important;
}

.decode-char {
    display: inline-block;
    animation: spatial-decode 0.55s cubic-bezier(.2, .9, .2, 1) both;
    animation-delay: calc(var(--char-index) * 22ms);
}

.spatial-depth {
    transform-style: preserve-3d;
    will-change: transform;
}

@keyframes spatial-decode {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes spatial-scan {
    0%, 100% {
        opacity: 0;
        transform: translateY(-10%);
    }

    45%, 60% {
        opacity: 0.55;
    }

    50% {
        transform: translateY(220%);
    }
}

@keyframes spatial-breathe {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0, 170, 204, 0);
    }

    50% {
        box-shadow: 0 0 24px rgba(0, 170, 204, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 980px) {
    #wrapper {
        width: min(100% - 1rem, 1180px);
    }

    #header {
        padding: 5rem 1rem 3.5rem;
    }

    .spotlight {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    #nav ul li a {
        font-size: 0.64rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .main {
        padding: 2.6rem 0;
    }

    .publication-entry {
        flex-direction: column;
    }

    .publication-thumbnail {
        width: 100% !important;
    }

    .image-container {
        grid-template-columns: 1fr;
    }

    .motto {
        font-size: 1.18rem;
    }

    #header::before {
        padding: 0.45rem 0.55rem;
        font-size: 0.55rem;
        letter-spacing: 0.11em;
    }
}