/* ==================================================================================================
   File: style.css
   Description: Main contemplative dark-space stylesheet for the Sense Thesis Phantom CMS theme.
   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.0
   Last Updated: 2026-05-24
   License: MIT
   ================================================================================================== */

:root {
   --st-font-main: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --st-font-serif: Georgia, "Times New Roman", serif;
   --st-bg: #02070d;
   --st-bg-soft: #061019;
   --st-plate: rgb(8 18 27 / 62%);
   --st-plate-soft: rgb(12 24 34 / 46%);
   --st-border: rgb(160 210 240 / 17%);
   --st-border-strong: rgb(180 225 255 / 28%);
   --st-text-main: #ecf5f6;
   --st-text-soft: #b7c5cc;
   --st-text-muted: #778892;
   --st-text-dim: #52636d;
   --st-cyan: #9aeaff;
   --st-blue: #57bfea;
   --st-gold: #d7b66f;
   --st-gold-soft: #f1d594;
   --st-shadow: 0 24px 70px rgb(0 0 0 / 48%);
   --st-width: min(1180px, calc(100vw - 40px));
   --st-radius-lg: 22px;
   --st-radius-md: 16px;
   --st-radius-pill: 999px;
   --st-bg-image: url("../img/sense-thesis-banner.jpg");
}

* {
   box-sizing: border-box;
}

html {
   min-height: 100%;
   background: var(--st-bg);
}

body {
   min-height: 100%;
   margin: 0;
   color: var(--st-text-soft);
   font-family: var(--st-font-main);
   font-size: 16px;
   line-height: 1.65;
   background:
      radial-gradient(circle at 74% 12%, rgb(109 155 203 / 17%), transparent 34vw),
      radial-gradient(circle at 16% 20%, rgb(103 224 255 / 7%), transparent 24vw),
      linear-gradient(180deg, rgb(1 6 11 / 72%), rgb(1 5 9 / 96%)),
      var(--st-bg-image) center top / cover fixed no-repeat;
}

body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -2;
   background:
      radial-gradient(circle at 46% 23%, rgb(154 234 255 / 13%) 0 1px, transparent 2px),
      radial-gradient(circle at 74% 8%, rgb(255 225 160 / 14%) 0 1px, transparent 2px),
      radial-gradient(circle at 20% 12%, rgb(255 255 255 / 11%) 0 1px, transparent 2px);
   background-size: 130px 130px, 190px 190px, 230px 230px;
   opacity: 0.65;
   pointer-events: none;
}

body::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   background:
      radial-gradient(ellipse at center, transparent 0%, rgb(0 0 0 / 38%) 72%, rgb(0 0 0 / 82%) 100%),
      linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 58%));
   pointer-events: none;
}

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

a {
   color: inherit;
}

.site-header {
   position: relative;
   z-index: 20;
   padding: 20px 0 0;
}

.site-header__inner {
   display: grid;
   grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 1fr);
   align-items: center;
   width: var(--st-width);
   min-height: 86px;
   margin: 0 auto;
   padding: 12px 24px;
   border: 1px solid var(--st-border-strong);
   border-radius: 14px;
   background: linear-gradient(180deg, rgb(6 15 23 / 72%), rgb(2 8 14 / 66%));
   box-shadow: 0 16px 42px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 5%);
   backdrop-filter: blur(14px) saturate(126%);
   -webkit-backdrop-filter: blur(14px) saturate(126%);
}

.brand-link {
   grid-column: 1;
   display: inline-grid;
   grid-template-columns: 74px auto;
   align-items: center;
   gap: 14px;
   width: max-content;
   color: var(--st-text-main);
   text-decoration: none;
}

.brand-logo {
   width: 74px;
   height: 54px;
   object-fit: cover;
   border-radius: 2px;
   filter: drop-shadow(0 0 18px rgb(126 226 255 / 22%));
}

.brand-title {
   display: block;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-size: 1.36rem;
   letter-spacing: 0.32em;
   line-height: 1;
   text-transform: uppercase;
}

.brand-subtitle {
   display: block;
   margin-top: 7px;
   color: var(--st-text-muted);
   font-size: 0.78rem;
   letter-spacing: 0.27em;
}

.mobile-menu-state,
.mobile-menu-button {
   display: none;
}

.language-switch {
   grid-column: 3;
   display: inline-flex;
   justify-self: end;
   align-items: center;
   gap: 6px;
   padding: 4px;
   border: 1px solid rgb(170 215 245 / 15%);
   border-radius: var(--st-radius-pill);
   background: rgb(220 245 255 / 4%);
}

.language-switch__item {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 34px;
   min-height: 26px;
   padding: 0 8px;
   border-radius: var(--st-radius-pill);
   color: var(--st-text-muted);
   font-size: 0.74rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-decoration: none;
}

.language-switch__item--active {
   color: var(--st-text-main);
   background: rgb(154 234 255 / 12%);
}

.site-main {
   width: var(--st-width);
   margin: 0 auto;
}

.home-hero {
   position: relative;
   min-height: 420px;
   padding: 52px 0 34px;
}

.home-hero__art {
   position: absolute;
   top: 18px;
   right: 0;
   width: 58%;
   height: 360px;
   border-radius: 28px;
   background:
      linear-gradient(90deg, rgb(2 7 12 / 82%) 0%, rgb(2 7 12 / 18%) 44%, rgb(2 7 12 / 0%) 100%),
      url("../img/sense-thesis-banner.jpg") center / cover no-repeat;
   opacity: 0.95;
   mask-image: linear-gradient(90deg, transparent, black 14%, black 82%, transparent);
}

.home-hero__content {
   position: relative;
   z-index: 2;
   width: min(520px, 100%);
   padding-top: 18px;
}

.home-hero h1 {
   margin: 0 0 20px;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-size: clamp(3rem, 7vw, 5.2rem);
   font-weight: 400;
   letter-spacing: 0.02em;
   line-height: 0.98;
}

.hero-rule {
   display: block;
   width: min(520px, 100%);
   height: 1px;
   margin: 0 0 24px;
   background: linear-gradient(90deg, var(--st-gold), var(--st-cyan), transparent);
   box-shadow: 0 0 20px rgb(154 234 255 / 45%);
}

.home-hero p {
   max-width: 410px;
   margin: 0 0 22px;
   color: var(--st-text-soft);
   font-size: 1.02rem;
}

.button-row {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: 24px;
}

.button-primary,
.button-secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 42px;
   padding: 0 28px;
   border-radius: var(--st-radius-pill);
   font-size: 0.9rem;
   text-decoration: none;
}

.button-primary {
   border: 1px solid rgb(134 222 255 / 46%);
   background: linear-gradient(180deg, rgb(44 152 205 / 22%), rgb(25 83 124 / 22%));
   color: var(--st-text-main);
   box-shadow: 0 0 28px rgb(69 187 243 / 18%);
}

.button-secondary {
   border: 1px solid rgb(180 220 255 / 18%);
   background: rgb(220 245 255 / 4%);
   color: var(--st-text-soft);
}

.micro-line {
   display: flex;
   align-items: center;
   gap: 11px;
   margin-top: 24px;
   color: var(--st-text-muted);
   font-size: 0.72rem;
   letter-spacing: 0.24em;
   text-transform: uppercase;
}

.micro-line::before {
   content: "";
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: radial-gradient(circle, var(--st-cyan), transparent 60%);
   box-shadow: 0 0 18px rgb(154 234 255 / 38%);
}

.principle-strip,
.quote-strip,
.footer-connect,
.home-panel,
.glass-content-plate,
.article-card,
.overview-card {
   border: 1px solid var(--st-border);
   border-radius: var(--st-radius-lg);
   background: linear-gradient(180deg, var(--st-plate), rgb(3 10 16 / 56%));
   box-shadow: var(--st-shadow), inset 0 1px 0 rgb(255 255 255 / 4%);
   backdrop-filter: blur(12px) saturate(118%);
   -webkit-backdrop-filter: blur(12px) saturate(118%);
}

.principle-strip {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0;
   margin: 12px 0 22px;
   overflow: hidden;
}

.principle-item {
   min-height: 128px;
   padding: 26px 28px;
   border-right: 1px solid rgb(160 210 240 / 12%);
}

.principle-item:last-child {
   border-right: 0;
}

.principle-item__icon {
   display: block;
   margin-bottom: 10px;
   color: var(--st-cyan);
   font-size: 1.55rem;
}

.principle-item h2,
.theme-card h2,
.home-panel h2,
.article-card h2,
.overview-card h2 {
   margin: 0 0 8px;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-weight: 400;
   line-height: 1.2;
}

.principle-item p,
.theme-card p,
.home-panel p,
.article-card p,
.overview-card p {
   margin: 0;
   color: var(--st-text-muted);
   font-size: 0.9rem;
   line-height: 1.55;
}

.section-heading {
   margin: 28px 0 20px;
   text-align: center;
}

.section-kicker,
.micro-label {
   margin: 0 0 8px;
   color: var(--st-gold-soft);
   font-size: 0.72rem;
   letter-spacing: 0.34em;
   text-transform: uppercase;
}

.section-heading h2 {
   margin: 0;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-size: clamp(1.8rem, 4vw, 2.6rem);
   font-weight: 400;
   line-height: 1.15;
}

.theme-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px 22px;
}

.theme-card {
   position: relative;
   display: grid;
   grid-template-columns: 45% 1fr;
   min-height: 204px;
   overflow: hidden;
   border: 1px solid var(--st-border);
   border-radius: var(--st-radius-md);
   background: rgb(5 13 20 / 58%);
   color: var(--st-text-soft);
   text-decoration: none;
}

.theme-card__image {
   min-height: 204px;
   background-position: center;
   background-size: cover;
   opacity: 0.68;
   filter: saturate(0.84) brightness(0.78);
}

.theme-card__body {
   position: relative;
   z-index: 2;
   padding: 28px 22px;
}

.theme-card__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   margin-bottom: 12px;
   border: 1px solid rgb(215 182 111 / 52%);
   border-radius: 50%;
   color: var(--st-gold-soft);
}

.theme-card__arrow {
   position: absolute;
   right: 20px;
   bottom: 16px;
   color: var(--st-gold-soft);
}

.theme-card--psych .theme-card__image { background-image: url("../img/sense-thesis-background-01.jpg"); }
.theme-card--myth .theme-card__image { background-image: url("../img/sense-thesis-background-02.jpg"); }
.theme-card--history .theme-card__image { background-image: url("../img/sense-thesis-background-03.jpg"); }
.theme-card--books .theme-card__image { background-image: url("../img/sense-thesis-background-04.jpg"); }
.theme-card--culture .theme-card__image { background-image: url("../img/sense-thesis-background-05.jpg"); }
.theme-card--society .theme-card__image { background-image: url("../img/sense-thesis-background-06.jpg"); }

.lower-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   margin: 18px 0;
}

.home-panel {
   min-height: 262px;
   padding: 28px;
   overflow: hidden;
}

.question-list {
   display: grid;
   gap: 14px;
   margin: 18px 0 24px;
}

.question-list a,
.reflection-list a {
   color: var(--st-text-soft);
   text-decoration: none;
}

.question-list a::before {
   content: "+";
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   margin-right: 10px;
   border: 1px solid rgb(154 234 255 / 24%);
   border-radius: 50%;
   color: var(--st-cyan);
   font-size: 0.75rem;
}

.reflection-list {
   display: grid;
   gap: 13px;
   margin-top: 18px;
}

.reflection-item {
   display: grid;
   grid-template-columns: 96px 1fr;
   gap: 16px;
   align-items: center;
}

.reflection-item img {
   width: 96px;
   height: 58px;
   object-fit: cover;
   border-radius: 8px;
   opacity: 0.72;
}

.reflection-item h3 {
   margin: 0 0 2px;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-size: 1.02rem;
   font-weight: 400;
}

.reflection-item p,
.reflection-item small {
   margin: 0;
   color: var(--st-text-muted);
   font-size: 0.82rem;
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--st-gold-soft);
   text-decoration: none;
}

.quote-strip {
   margin: 18px 0 24px;
   padding: 30px 110px;
   background:
      linear-gradient(90deg, rgb(6 15 23 / 72%), rgb(6 15 23 / 42%)),
      url("../img/sense-thesis-wide-background.jpg") center / cover no-repeat;
}

.quote-strip blockquote {
   margin: 0;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-size: clamp(1.35rem, 3vw, 2rem);
   font-style: italic;
   line-height: 1.3;
}

.quote-strip cite {
   display: block;
   margin-top: 12px;
   color: var(--st-gold-soft);
   font-style: normal;
}

.content-stack {
   display: grid;
   gap: 18px;
   margin: 54px auto 28px;
}

.glass-content-plate {
   padding: clamp(26px, 4vw, 46px);
}

.page-content h1,
.list-plate h1 {
   margin: 0 0 18px;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-size: clamp(2.2rem, 6vw, 4.2rem);
   font-weight: 400;
   line-height: 1.05;
}

.page-content h2,
.page-content h3 {
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-weight: 400;
}

.article-grid,
.overview-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
}

.article-card a,
.overview-card a {
   display: block;
   min-height: 190px;
   padding: 24px;
   color: inherit;
   text-decoration: none;
}

.card-meta {
   color: var(--st-gold-soft) !important;
   font-size: 0.72rem !important;
   letter-spacing: 0.22em;
   text-transform: uppercase;
}

.site-footer {
   width: var(--st-width);
   margin: 0 auto 24px;
   color: var(--st-text-muted);
}

.site-footer__inner {
   display: grid;
   grid-template-columns: 1.25fr 2fr 1fr;
   gap: 28px;
   padding: 22px 0;
   border-top: 1px solid rgb(160 210 240 / 10%);
}

.footer-brand-line {
   display: flex;
   align-items: center;
   gap: 14px;
   color: var(--st-text-main);
   font-family: var(--st-font-serif);
   font-size: 1.2rem;
   letter-spacing: 0.24em;
   text-transform: uppercase;
}

.footer-logo {
   width: 58px;
   height: 44px;
   object-fit: cover;
}

.site-footer__nav {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 22px;
}

.site-footer h2 {
   margin: 0 0 10px;
   color: var(--st-gold-soft);
   font-size: 0.72rem;
   letter-spacing: 0.24em;
   text-transform: uppercase;
}

.site-footer a {
   display: block;
   margin: 0 0 7px;
   color: var(--st-text-muted);
   font-size: 0.88rem;
   text-decoration: none;
}

.footer-connect {
   padding: 16px;
}

.footer-connect__input {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 32px;
   margin-top: 10px;
   padding: 0 6px 0 12px;
   border: 1px solid rgb(160 210 240 / 14%);
   border-radius: var(--st-radius-pill);
   color: var(--st-text-dim);
   font-size: 0.78rem;
}

.site-footer__bottom {
   display: flex;
   justify-content: space-between;
   gap: 18px;
   padding-top: 10px;
   border-top: 1px solid rgb(160 210 240 / 8%);
   color: var(--st-text-dim);
   font-size: 0.78rem;
   letter-spacing: 0.32em;
}

@media (max-width: 980px) {
   .site-header__inner {
      grid-template-columns: 1fr auto 1fr;
      gap: 0 8px;
   }

   .brand-link {
      grid-template-columns: 58px auto;
      gap: 10px;
   }

   .brand-logo {
      width: 58px;
      height: 44px;
   }

   .brand-title {
      font-size: 1.04rem;
      letter-spacing: 0.22em;
   }

   .principle-strip,
   .theme-grid,
   .article-grid,
   .overview-grid,
   .site-footer__inner {
      grid-template-columns: 1fr 1fr;
   }

   .site-footer__nav {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 760px) {
   :root {
      --st-width: calc(100vw - 24px);
   }

   body {
      background-attachment: scroll;
   }

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

   .site-header__inner {
      position: relative;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      min-height: 72px;
      padding: 10px 12px;
      gap: 0 8px;
   }

   .brand-link {
      grid-column: 1;
      align-self: center;
   }

   .brand-logo {
      width: 46px;
      height: 36px;
   }

   .brand-title {
      font-size: 0.82rem;
      letter-spacing: 0.16em;
   }

   .brand-subtitle {
      display: none;
   }

   .mobile-menu-button {
      grid-column: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgb(154 234 255 / 28%);
      border-radius: var(--st-radius-pill);
      background: rgb(154 234 255 / 8%);
      color: var(--st-text-main);
      font-size: 0.82rem;
      cursor: pointer;
   }

   .mobile-menu-icon {
      display: grid;
      gap: 4px;
      width: 17px;
   }

   .mobile-menu-icon span {
      display: block;
      height: 1px;
      background: var(--st-text-main);
   }

   .language-switch {
      grid-column: 3;
      justify-self: end;
      align-self: center;
   }

   .language-switch__item {
      min-width: 30px;
      padding: 0 6px;
   }

   .home-hero {
      min-height: 0;
      padding: 30px 0 18px;
   }

   .home-hero__art {
      position: relative;
      top: auto;
      right: auto;
      width: 100%;
      height: 210px;
      margin: 0 0 18px;
      mask-image: none;
      opacity: 0.86;
   }

   .home-hero__content {
      padding-top: 0;
   }

   .home-hero h1 {
      font-size: clamp(2.8rem, 14vw, 4.2rem);
   }

   .principle-strip,
   .theme-grid,
   .lower-grid,
   .article-grid,
   .overview-grid,
   .site-footer__inner,
   .site-footer__nav {
      grid-template-columns: 1fr;
   }

   .principle-item {
      min-height: auto;
      border-right: 0;
      border-bottom: 1px solid rgb(160 210 240 / 12%);
   }

   .principle-item:last-child {
      border-bottom: 0;
   }

   .theme-card {
      grid-template-columns: 38% 1fr;
   }

   .quote-strip {
      padding: 26px;
   }

   .site-footer__bottom {
      flex-direction: column;
      letter-spacing: 0.18em;
   }
}

@media (max-width: 460px) {
   .brand-title {
      max-width: 92px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .mobile-menu-text {
      display: none;
   }

   .theme-card {
      grid-template-columns: 1fr;
   }

   .theme-card__image {
      min-height: 130px;
   }

   .reflection-item {
      grid-template-columns: 76px 1fr;
   }

   .reflection-item img {
      width: 76px;
      height: 54px;
   }
}