html,
body {
  font-family: var(--font-body);
  font-weight: var(--base-font-weight);
  background-color: var(--background);
  color: var(--text);
  font-size: var(--base-font-size);
  line-height: var(--line-height);
  text-rendering: optimizeSpeed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0; }

*,
::before,
::after {
  min-height: 0;
  min-width: 0;
  box-sizing: border-box; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: all 0.3s ease; }
  a:hover {
    color: var(--core); }

.header {
  margin: var(--space-s) var(--space-s);
  position: fixed;
  z-index: 100;
  font-family: var(--font-heading);
  font-size: var(--base-font-size); }
  .header a {
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    transition: color 0.3s ease; }
    .header a:hover {
      color: var(--primary); }
  .header .logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important; }
  .header .site-logo {
    height: 5em;
    width: 5em;
    background-color: var(--primary);
    mask-image: url("/favicon.png");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("/favicon.png");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: background-color 0.3s ease; }
  .header .logo-link:hover .site-logo {
    background-color: var(--accent); }
  .header .links {
    display: flex;
    justify-content: flex-end; }

.frontmatter {
  margin-left: var(--space-m);
  margin-bottom: var(--space-m);
  line-height: 1.2em; }
  .frontmatter .page-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.1; }
  .frontmatter .page-meta {
    margin-top: var(--space-2xs);
    line-height: var(--step-3); }
    .frontmatter .page-meta .page-subtitle {
      font-size: var(--step-0);
      font-weight: 300;
      font-family: var(--font-body);
      text-transform: lowercase;
      letter-spacing: 0.05em; }
    .frontmatter .page-meta .page-date {
      font-size: var(--step-3);
      font-style: medium;
      font-family: var(--font-body); }
    .frontmatter .page-meta .page-links {
      margin-top: var(--space-2xs);
      line-height: var(--step-3);
      font-size: var(--step--1);
      font-family: var(--font-body); }

.backlink .nav {
  margin: var(--space-3xs); }

.nav {
  margin: var(--space-s) var(--space-s-m);
  line-height: 1.5em;
  color: var(--soft); }
  .nav h1,
  .nav h2,
  .nav h3,
  .nav h4,
  .nav h5,
  .nav h6 {
    text-transform: lowercase; }
  .nav h1,
  .nav h2,
  .nav h3,
  .nav h4,
  .nav h5,
  .nav h6,
  .nav p,
  .nav a,
  .nav blockquote,
  .nav code {
    display: inline;
    font-size: var(--base-font-size); }
  .nav blockquote {
    border-left: 2px solid var(--primary-soft);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: 2px;
    background-color: var(--container-dark); }

h1 {
  font-size: var(--step-2); }

h2 {
  font-size: var(--step-1); }

h3 {
  font-size: var(--step-1); }

h4 {
  font-size: var(--step-0); }

h5 {
  font-size: var(--step-0); }

h6 {
  font-size: var(--step--1); }

h1 {
  color: var(--text-heavy);
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.02em; }

h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heavy);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.02em; }

.varied-letters,
h1.varied-letters,
h2.varied-letters,
h3.varied-letters,
h4.varied-letters,
h5.varied-letters,
h6.varied-letters,
.page-title {
  overflow: visible !important;
  padding-top: 0.15em; }

.varied-letters .word {
  display: inline-block;
  white-space: nowrap; }

.varied-letters .tall {
  display: inline-block;
  font-size: 1.08em;
  vertical-align: baseline;
  line-height: 0.9; }

.varied-letters .small {
  display: inline-block;
  font-size: 0.94em; }

.varied-letters .space {
  display: inline-block;
  width: 0.3em; }

h1,
h2,
h3,
h4,
h5,
h6,
p,
code,
blockquote,
em,
form,
input,
ul,
ol {
  margin: 0;
  padding: 0;
  line-height: var(--line-height);
  overflow: hidden; }

p,
code,
blockquote,
em,
form,
input,
ul,
ol {
  margin: 0; }

.area {
  max-width: 100%;
  margin: var(--space-l) auto;
  width: var(--max-width); }
  .area p {
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6; }

.rounded {
  border-radius: var(--border-radius); }

.link-section {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping to multiple lines */
  flex-direction: row;
  /* Default direction is row */
  justify-content: center;
  /* Center the links horizontally */
  align-items: center;
  /* Align items vertically */
  text-align: center;
  /* Center text alignment */
  max-width: 100%;
  /* Ensures it doesn't exceed the parent width */
  box-sizing: border-box;
  /* Includes padding and borders in width calculations */
  padding: 0 var(--space-m);
  /* Adjust padding as needed */
  font-size: var(--step--1); }
  .link-section .links {
    margin: var(--space-m);
    display: flex;
    /* Enables flexbox for links */
    flex-wrap: wrap;
    /* Allows wrapping */
    justify-content: center;
    /* Center links inside */
    row-gap: var(--space-l);
    /* Adds vertical spacing between rows */
    column-gap: var(--space-xs);
    /* Adds horizontal spacing between links */ }
  .link-section a {
    margin: 0;
    /* Resets margin (spacing handled by gaps) */
    text-decoration: none;
    /* Optional: removes underlines */ }

.subscribe {
  color: var(--text);
  padding: var(--space-s); }
  .subscribe .container {
    text-align: center;
    flex: 1; }
    .subscribe .container p,
    .subscribe .container form {
      margin: var(--space-s) auto; }

.backlink {
  margin: 1em 0;
  padding: var(--space-2xs);
  background-color: var(--backlink-container);
  border-radius: var(--border-radius); }

pre {
  margin: 0.5em;
  background-color: var(--container);
  padding: 1em;
  border-radius: var(--border-radius);
  display: block;
  overflow-x: scroll; }
  pre code {
    background-color: none; }

code {
  border-radius: 4px;
  background-color: var(--container);
  padding: 0.2em 0.5em; }

blockquote {
  border-radius: var(--border-radius);
  background-color: var(--container);
  border-left: 4px solid var(--primary);
  padding: var(--space-xs); }

.header {
  display: flex;
  flex-direction: column; }

.header-top {
  display: flex;
  flex-direction: row;
  align-items: baseline; }
  .header-top .left,
  .header-top .right {
    flex: 1; }

video {
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: var(--background-video-opacity); }

#content,
.header-top,
.header-bottom,
.link-section {
  position: relative;
  bottom: 0; }

#content {
  flex-grow: 1; }
  #content.note .page-title, #content.post .page-title {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em; }
  #content.note h1, #content.note h2, #content.note h3, #content.note h4, #content.note h5, #content.note h6, #content.post h1, #content.post h2, #content.post h3, #content.post h4, #content.post h5, #content.post h6 {
    font-family: var(--font-heading); }
  #content.note p, #content.note li, #content.note td, #content.note th, #content.post p, #content.post li, #content.post td, #content.post th {
    font-family: var(--font-body);
    font-weight: 300; }

.home {
  position: relative; }
  .home .header a {
    color: var(--primary-soft);
    text-shadow: none; }
  .home #content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 80vh;
    z-index: 1;
    background-color: var(--background-faded);
    backdrop-filter: blur(10px);
    border-top: 4px solid var(--primary-soft);
    border-bottom: 4px solid var(--primary-soft);
    border-top-left-radius: var(--big-border-radius);
    border-top-right-radius: var(--big-border-radius);
    border-bottom-right-radius: var(--big-border-radius);
    border-bottom-left-radius: var(--big-border-radius);
    box-shadow: 10px -10px 15px 0px rgba(0, 0, 0, 0.25);
    /* Overlaps the top section by 10% of its height */ }
  .home .search-result {
    text-shadow: none; }
    .home .search-result .page-title {
      display: block; }
  .area .home .main {
    width: auto; }
  .home .page-title {
    display: none; }
  .home .pre-block-actions {
    visibility: hidden; }
  .home :hover > .pre-block-actions > .block-collapse-button.collapsible {
    visibility: hidden; }
  .home .post-block-actions {
    display: none; }
  .home .inline {
    margin: var(--space-l) 0px;
    padding: var(--space-2xs) var(--space-s-m); }
  .home .footer {
    height: 120vh;
    display: flex;
    justify-content: center;
    align-items: flex-end; }
    .home .footer .footer-quote {
      padding: var(--space-s);
      margin: var(--space-xl);
      text-align: center;
      font-weight: lighter;
      box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
      z-index: 2;
      background-color: var(--background-faded);
      backdrop-filter: blur(10px);
      color: var(--text); }

.hidden {
  display: none; }

#video-background-container {
  -webkit-filter: blur(var(--background-video-blur));
  -moz-filter: blur(var(--background-video-blur));
  -o-filter: blur(var(--background-video-blur));
  -ms-filter: blur(var(--background-video-blur));
  filter: blur(var(--background-video-blur));
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0; }
  #video-background-container h1 {
    position: absolute;
    z-index: 1;
    object-fit: cover;
    margin-top: 10vh; }
  #video-background-container video-js {
    object-fit: cover;
    height: 100%;
    width: 100%;
    opacity: var(--background-video-opacity); }

circle {
  fill: var(--text-heavy); }

/* Video.js Controls Style Overrides */
.vjs-default-skin .vjs-progress-control,
.vjs-default-skin .vjs-time-controls,
.vjs-default-skin .vjs-time-divider,
.vjs-default-skin .vjs-captions-button,
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-control,
.vjs-default-skin .vjs-fullscreen-control {
  display: none; }

#video-background-container .vjs-big-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

img {
  max-width: 100%;
  max-height: 40vh;
  height: auto;
  object-fit: contain;
  /* Ensures the entire image is visible */
  border-radius: var(--border-radius);
  /* Optional for rounded corners */
  display: block;
  /* Prevents inline spacing issues */ }

/* COSMOVISION Focus Mode Styles */
.cosmovision-button {
  background: var(--background-faded);
  color: var(--text);
  border: 2px solid var(--primary-soft);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease; }
  .cosmovision-button:hover {
    background: var(--primary-soft);
    color: var(--background);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
  .cosmovision-button:active {
    transform: translateY(0); }

.focus-controls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none; }
  .focus-controls .focus-mute-btn, .focus-controls .focus-exit-btn {
    position: absolute;
    background: var(--background-faded);
    color: var(--text);
    border: 2px solid var(--primary-soft);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--step--1);
    font-weight: 500;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    pointer-events: auto; }
    .focus-controls .focus-mute-btn:hover, .focus-controls .focus-exit-btn:hover {
      background: var(--primary-soft);
      color: var(--background);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
    .focus-controls .focus-mute-btn:active, .focus-controls .focus-exit-btn:active {
      transform: translateY(0); }
  .focus-controls .focus-mute-btn .speaker-icon {
    transition: all 0.3s ease; }
    .focus-controls .focus-mute-btn .speaker-icon.muted {
      opacity: 0.5;
      filter: grayscale(1); }
      .focus-controls .focus-mute-btn .speaker-icon.muted .sound-lines {
        opacity: 0.3; }
    .focus-controls .focus-mute-btn .speaker-icon.unmuted {
      opacity: 1;
      filter: grayscale(0); }
      .focus-controls .focus-mute-btn .speaker-icon.unmuted .sound-lines {
        opacity: 1; }
  .focus-controls .focus-mute-btn {
    bottom: 20px;
    left: 20px;
    font-size: var(--step-0);
    padding: var(--space-xs); }
  .focus-controls .focus-exit-btn {
    bottom: 20px;
    right: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px; }

/* Landing Mode Styles */
.landing-controls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10vh; }
  .landing-controls .landing-enter-btn {
    background: var(--background-faded);
    color: var(--text);
    border: 2px solid var(--primary-soft);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--step-0);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    pointer-events: auto; }
    .landing-controls .landing-enter-btn:hover {
      background: var(--primary-soft);
      color: var(--background);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
    .landing-controls .landing-enter-btn:active {
      transform: translateY(0); }

.landing-mode {
  overflow: hidden; }
  .landing-mode #video-background-container {
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
    z-index: 999; }
  .landing-mode video {
    opacity: 1; }

.focus-mode {
  overflow: hidden; }
  .focus-mode #video-background-container {
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -o-filter: none;
    -ms-filter: none;
    z-index: 999; }
  .focus-mode video {
    opacity: 1; }