/* ==================================================================================================
   File: style.css
   Description: Light project hub theme for stephan-kuehn.com.
   Author: LoTeK (Stephan Kühn)
   Mail: info@lotek-zone.com
   Web: https://lotek-zone.com/
   GitHub: https://github.com/LoTeK-Zone
   Repository: https://github.com/LoTeK-Zone/phantom-cms
   Version: 0.1.3
   Last Updated: 2026-05-27
   License: MIT
   ================================================================================================== */

:root {
   --page-bg: #f7f8fb;
   --surface: #ffffff;
   --surface-soft: #fbfcfe;
   --text: #11182d;
   --text-soft: #3f485c;
   --muted: #6d7688;
   --line: #e2e6ef;
   --line-soft: #edf0f5;
   --accent: #1e63bd;
   --accent-hover: #164d99;
   --max-width: 1440px;
   --content-width: 1320px;
   --shadow-soft: 0 16px 46px rgba(29, 48, 82, 0.08);
   --shadow-light: 0 8px 24px rgba(29, 48, 82, 0.06);
   --radius-lg: 18px;
   --radius-md: 12px;
   --night-transition-speed: 8s;
   --site-header-fixed-height: 98px;
   --site-footer-fixed-height: 82px;
}

* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   min-height: 100vh;
   font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   color: var(--text);
   background: var(--page-bg);
   line-height: 1.55;
}

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

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

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

/* Keeps fixed header and footer from covering page content. */
.site-shell {
   position: relative;
   min-height: 100vh;
   padding-top: var(--site-header-fixed-height);
   padding-bottom: var(--site-footer-fixed-height);
   isolation: isolate;
}

/* Footer-hover darkness layer that rises from the bottom of the viewport. */
.site-shell::before {
   content: "";
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 80;
   height: 0;
   pointer-events: none;
   opacity: 0;
   background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.78) 46%, rgba(0, 0, 0, 0.34) 78%, rgba(0, 0, 0, 0));
   transition:
      height var(--night-transition-speed) ease,
      opacity var(--night-transition-speed) ease;
}

.site-shell:has(.site-footer:hover)::before {
   height: 100vh;
   opacity: 1;
}

/* Fixed top header. */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 120;
   width: 100%;
   border-bottom: 1px solid var(--line);
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 4px 18px rgba(20, 32, 54, 0.04);
}

.site-header-inner {
   display: grid;
   grid-template-columns: minmax(260px, auto) 1fr auto;
   align-items: center;
   gap: 28px;
   width: min(calc(100% - 64px), var(--max-width));
   min-height: var(--site-header-fixed-height);
   margin: 0 auto;
}

.brand-mark {
   display: inline-flex;
   align-items: center;
   gap: 18px;
   color: var(--text);
}

.brand-mark:hover {
   color: var(--text);
}

.brand-mark img {
   width: 60px;
   height: 60px;
   object-fit: cover;
   border-radius: 50%;
}

.brand-text {
   display: grid;
   gap: 4px;
}

/* Direct brand name styling. Change the visible name size here. */
.brand-name {
   font-family: Georgia, "Times New Roman", serif;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -0.03em;
}

.brand-tagline {
   color: var(--muted);
   font-size: 1rem;
}

.site-nav {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 38px;
}

.site-nav a {
   position: relative;
   display: inline-flex;
   align-items: center;
   min-height: 42px;
   color: var(--text);
   font-weight: 500;
}

.site-nav a::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 1px;
   height: 2px;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: center;
   transition: transform 160ms ease;
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
   transform: scaleX(1);
}

.language-switch {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--muted);
}

.language-switch a {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 34px;
   color: var(--muted);
   font-weight: 500;
}

.language-switch a:hover,
.language-switch a.is-active {
   color: var(--text);
}

.language-switch img {
   width: 18px;
   height: 12px;
   object-fit: cover;
}

.language-separator {
   width: 1px;
   height: 22px;
   background: var(--line);
}

.site-main {
   width: 100%;
}

.hub-hero {
   position: relative;
   min-height: 430px;
   overflow: hidden;
   background-color: #dce6f2;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   border-bottom: 1px solid var(--line);
}

/* Night banner overlay for the footer-hover transition. */
.hub-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   opacity: 0;
   background-image: url("../img/sk-banner-berlin-city-night.jpg");
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   transition: opacity var(--night-transition-speed) ease;
}

.site-shell:has(.site-footer:hover) .hub-hero::before {
   opacity: 1;
}

.hub-hero-inner {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   min-height: 430px;
   width: min(calc(100% - 64px), var(--max-width));
   margin: 0 auto;
}

.hub-hero-copy {
   width: min(620px, 100%);
   padding: 34px 0 46px;
}

.hub-hero h1 {
   margin: 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(3.5rem, 5.4vw, 5.45rem);
   line-height: 0.98;
   letter-spacing: -0.045em;
   white-space: nowrap;
   color: var(--text);
}

.title-line {
   display: block;
   width: 64px;
   height: 3px;
   margin: 26px 0 22px;
   background: var(--accent);
}

.hub-hero p {
   margin: 0;
   color: var(--text-soft);
   font-size: clamp(1.02rem, 1.45vw, 1.24rem);
   line-height: 1.58;
}

.hero-button {
   display: inline-flex;
   align-items: center;
   gap: 13px;
   min-height: 54px;
   margin-top: 34px;
   padding: 0 28px;
   border-radius: 5px;
   background: var(--accent);
   color: #ffffff;
   font-weight: 650;
   box-shadow: 0 14px 26px rgba(30, 99, 189, 0.24);
}

.hero-button:hover {
   background: var(--accent-hover);
   color: #ffffff;
}

.hero-button span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.58);
   font-size: 0.88rem;
}

.hub-intro,
.project-grid,
.content-card,
.site-footer-inner {
   width: min(calc(100% - 64px), var(--content-width));
   margin-left: auto;
   margin-right: auto;
}

.hub-intro {
   padding: 44px 0 22px;
}

.hub-intro h2 {
   margin: 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(2rem, 3vw, 3.2rem);
   letter-spacing: -0.035em;
}

.hub-intro p {
   width: min(780px, 100%);
   margin: 12px 0 0;
   color: var(--muted);
   font-size: 1.05rem;
}

.project-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px 28px;
   padding-bottom: 54px;
}

.project-item {
   display: grid;
   grid-template-columns: minmax(220px, 0.58fr) minmax(180px, 0.42fr);
   align-items: stretch;
   min-height: 250px;
   overflow: hidden;
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-md);
   background: rgba(255, 255, 255, 0.82);
   box-shadow: var(--shadow-light);
}

.project-preview {
   display: flex;
   align-items: stretch;
   justify-content: center;
   min-height: 250px;
   padding: 22px 0 22px 22px;
}

.project-preview img {
   width: 100%;
   height: 100%;
   min-height: 196px;
   object-fit: cover;
   border-radius: 6px;
   box-shadow: 0 8px 18px rgba(25, 35, 50, 0.08);
}

.project-text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 26px 32px;
}

.project-text h3 {
   margin: 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(1.42rem, 2vw, 2rem);
   line-height: 1.1;
   letter-spacing: -0.03em;
}

.project-text p {
   margin: 18px 0 0;
   color: var(--text-soft);
   font-size: 1.05rem;
   line-height: 1.5;
}

.project-text a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 28px;
   color: var(--accent);
   font-weight: 600;
}

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

.project-item--placeholder .project-preview {
   padding: 22px 0 22px 22px;
}

.project-item--placeholder .project-preview span {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 196px;
   border-radius: 6px;
   color: rgba(30, 99, 189, 0.74);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 5rem;
   background:
      linear-gradient(135deg, rgba(30, 99, 189, 0.08), rgba(255, 255, 255, 0.84)),
      radial-gradient(circle at 80% 20%, rgba(30, 99, 189, 0.14), transparent 42%);
}

.content-card {
   margin-top: 56px;
   margin-bottom: 58px;
   padding: clamp(30px, 5vw, 64px);
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-lg);
   background: var(--surface);
   box-shadow: var(--shadow-soft);
}

.page-content > :first-child {
   margin-top: 0;
}

.page-content > :last-child {
   margin-bottom: 0;
}

.page-content h1,
.page-content h2,
.page-content h3 {
   font-family: Georgia, "Times New Roman", serif;
   color: var(--text);
   line-height: 1.18;
}

.page-content h1 {
   font-size: clamp(2.4rem, 4vw, 4rem);
   letter-spacing: -0.04em;
}

.page-content p,
.page-content li {
   color: var(--text-soft);
   font-size: 1.04rem;
}

/* Fixed bottom footer and hover trigger area. */
.site-footer {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 120;
   width: 100%;
   border-top: 1px solid var(--line);
   background: rgba(255, 255, 255, 0.86);
}

.site-footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   min-height: var(--site-footer-fixed-height);
   color: var(--muted);
}

.site-footer-inner p {
   margin: 0;
}

.site-footer nav {
   display: flex;
   gap: 42px;
}

.site-footer a {
   color: var(--text-soft);
}

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

@media (max-width: 1180px) {
   .site-header-inner {
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 10px;
      padding: 10px 0;
   }

   .site-nav {
      gap: 28px;
   }

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

@media (max-width: 760px) {
   :root {
      --site-header-fixed-height: 124px;
      --site-footer-fixed-height: 118px;
   }

   .site-header-inner,
   .hub-hero-inner,
   .hub-intro,
   .project-grid,
   .content-card,
   .site-footer-inner {
      width: min(calc(100% - 28px), var(--content-width));
   }

   .brand-mark {
      align-items: flex-start;
   }

   .brand-mark img {
      width: 58px;
      height: 58px;
   }

   .brand-name {
      font-size: 22px;
   }

   .site-nav {
      flex-wrap: wrap;
      gap: 12px 22px;
   }

   .hub-hero,
   .hub-hero-inner {
      min-height: 390px;
   }

   .hub-hero {
      background-position: 58% center;
   }

   .hub-hero-copy {
      padding: 36px 0;
   }

   .hub-hero h1 {
      white-space: normal;
   }

   .project-item {
      grid-template-columns: 1fr;
   }

   .project-preview {
      min-height: auto;
      padding: 18px 18px 0;
   }

   .project-preview img,
   .project-item--placeholder .project-preview span {
      min-height: 180px;
   }

   .project-text {
      padding: 24px;
   }

   .site-footer-inner {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 18px 0;
   }

   .site-footer nav {
      gap: 24px;
      flex-wrap: wrap;
   }
}