/* ===============================
   MOE — palette, type, layout
   =============================== */

/* brand palette */
:root {
  --bjornbar: #18112c;
  /* primary background */
  --renlav: #d8ddd8;
  /* primary text / image bg */
  --makadam: #a9ada1;
  /* lines / frames */
  --mossa: #91893e;
  /* micro accents */
  --ljung: #634a72;
  /* hover / highlight */
  --rost: #9a624a;
  /* emphasis */
  --copper: #e07a5f;
  /* emphasis */


}

/* typography scale */
:root {
  --font-size-compact: 14px;
  --font-size-normal: 20px;
  --font-size-airy: 32px;
}

/* rhythm */
:root {
  --line-height-compact: 1.4;
  --line-height-normal: 1.6;
  --line-height-airy: 1.8;

  --spacing-compact: 12px;
  --spacing-normal: 24px;
  --spacing-airy: 48px;
}

/* motion */
@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeOut {
  from {
    opacity: 1
  }

  to {
    opacity: 0;
    visibility: hidden
  }
}


/* base */
*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  margin: 0
}

body {
  font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--font-size-normal);
  /* normal */
  line-height: var(--line-height-airy);
  /* airy */
  letter-spacing: .3px;
  color: var(--renlav);
  background: var(--bjornbar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* home override */
body.home {
  background: var(--renlav);
  /* #d8ddd8 */
  color: var(--bjornbar);
  /* #18112c */
}

body.home .video-wrap {
  border: none;
}

/* headings */
h1 {
  font-size: var(--font-size-airy);
  /* airy */
  line-height: var(--line-height-airy);
  font-weight: 600;
  text-transform: lowercase;
}

h2 {
  font-size: var(--font-size-normal);
  /* normal */
  line-height: var(--line-height-normal);
  font-weight: 600;
  text-transform: lowercase;
}

h3 {
  font-size: var(--font-size-compact);
  /* compact */
  line-height: var(--line-height-compact);
  font-weight: 600;
  text-transform: lowercase;
}

img,
video {
  max-width: 100%;
  display: block;
  background: var(--renlav)
}

a {
  font-size: inherit;
  /* inherits from parent */
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  color: var(--mossa);
  border-bottom-color: var(--mossa);
}

:focus-visible {
  outline: 2px solid var(--ljung);
  outline-offset: 2px
}

/* wrappers */
.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--spacing-airy) var(--spacing-normal);
}

.info {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--spacing-airy) var(--spacing-normal);
}

/* type utilities */
.text-compact {
  font-size: var(--font-size-compact);
  line-height: var(--line-height-normal);
}

/* .text-normal {
  font-size: var(--font-size-normal);
  line-height: var(--line-height-airy);
} */

.text-airy {
  font-size: var(--font-size-airy);
  line-height: var(--line-height-compact);
}

.page-title {
  margin: 0 0 var(--spacing-normal);
  font-size: calc(var(--font-size-normal) + 6px);
  line-height: var(--line-height-compact);
  font-weight: 600;
  text-transform: lowercase;
}

p {
  font-size: var(--font-size-normal);
  /* normal */
  line-height: var(--line-height-airy);
  /* airy */
  margin: 0 0 var(--spacing-normal);
}

/* intro overlay */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 100;
  animation: fadeOut 1s ease .6s both;
}

/* top nav (0 · e · c) */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  z-index: 20;
  animation: fadeIn .8s ease .2s both;
}

.left,
.right {
  display: flex;
  align-items: center;
  gap: 18px
}

/* dots */
.dot {
  --size: 72px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: var(--bjornbar);
  display: grid;
  place-items: center;
  transition: transform .18s ease, box-shadow .18s ease;
  border: none;
}



.dot:hover {
  transform: scale(1.05);
  box-shadow: none;
  color: inherit;
}

.dot::before {
  content: "";
  width: 36%;
  height: 36%;
  border-radius: 999px;
  background: var(--renlav);
}

.dot.label::before {
  display: none
}

.dot.label span {
  display: grid;
  place-items: center;
  width: 74%;
  height: 74%;
  border-radius: 999px;
  background: var(--renlav);
  color: var(--bjornbar);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: lowercase;
  outline: none;
}

.dot[aria-label] {
  position: relative
}

.dot[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-compact);
  line-height: var(--line-height-normal);
  opacity: 0;
  transition: opacity .18s ease;
  color: var(--renlav);
}

body.home .dot[aria-label]::after {
  color: var(--bjornbar);
}

.dot:hover::after {
  opacity: 1
}

/* views */
main {
  padding-top: 80px
}

.view {
  display: none;
  opacity: 0;
  transition: opacity .25s ease
}

.view.active {
  display: block;
  opacity: 1
}

/* home */
.center {
  min-height: calc(100vh - 80px);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 var(--spacing-normal) calc(var(--spacing-airy)*.75);
  gap: var(--spacing-normal);
}

/* tagline */
.tagline {
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
  /* or center */
}

body.home .tagline,
body.home .tagline-store-link {
  color: var(--bjornbar);
}

.tagline span {
  display: block;
}

.tagline-store-link a {
  border-bottom: 1px solid var(--bjornbar);
  padding-bottom: 2px;
}

.tagline-store-link a:hover {
  color: var(--mossa);
  border-bottom-color: var(--mossa);
}


.fade-step {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
  animation-delay: calc(var(--step) * 1s);
  /* or 0.6s, 0.8s, etc. */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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


/* responsive hero video */
.video-wrap {
  position: relative;
  width: min(92vw, 920px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--makadam);
  background: var(--renlav);
}

.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cinematic crop for hero */
}

.video-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: none;
}

.video-link-overlay:hover {
  border: none;
}

/* experiments / cards */

/* list */
.cards {
  display: block;
  margin-top: var(--spacing-airy);
}

/* card shell */
.card {
  width: 100%;
  border: 1px solid var(--makadam);
  border-radius: 0;
  background: rgba(216, 221, 216, 0.06);
  overflow: hidden;
  margin-bottom: var(--spacing-airy);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
}

/* main media */
.card-media {
  position: relative;
  background: var(--renlav);
}

/* fixed teaser ratio for gallery */
.card-media.teaser {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--renlav);
}

.card-media.teaser img,
.card-media.teaser video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* legacy / optional container */
.media-experiments {
  width: 100%;
  min-height: 200px;
  background: rgba(216, 221, 216, 0.15);
  /* renlav tint */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* shared styling for either media type */
.media-experiments img,
.media-experiments video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  background: var(--renlav);
}

/* hover overlay */
.card-hover-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(24, 17, 44, 0.8), rgba(24, 17, 44, 0));
  color: var(--renlav);
  font-size: var(--font-size-normal);
  line-height: var(--line-height-normal);
  opacity: 0;
  transition: opacity .25s ease;
}

.card-media:hover .card-hover-text {
  opacity: 1
}

/* header */
.card-header {
  padding: 16px 18px 10px;
}

.card-title {
  font-size: var(--font-size-airy);
  line-height: var(--line-height-airy);
  text-transform: lowercase;
}

.card-meta {
  font-size: var(--font-size-normal);
  line-height: var(--line-height-normal);
  opacity: .75;
  margin-top: 4px;
  text-transform: lowercase;
}

/* expanded body (kept for backwards compatibility) */
.card-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

.card-body {
  padding: 0 18px var(--spacing-normal);
}

.card.is-open .card-expanded {
  max-height: 2000px;
  /* large enough for lighter experiments */
}

/* stacked media (one column) */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.card-stack img,
.card-stack video {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 1px solid var(--makadam);
  background: var(--renlav);
}

/* links */
.card-links {
  margin-top: 12px;
  font-size: var(--font-size-normal);
}

.card-links a {
  border-bottom: 1px solid var(--renlav);
}

.card-links a:hover {
  color: var(--mossa);
  border-bottom-color: var(--mossa);
}

/* contact */
.info p a {
  border-bottom: 1px solid var(--renlav);
  padding-bottom: 1px;
}

/* DETAIL PAGES */

.experiment-detail {
  padding-top: 120px;
  /* to clear fixed topbar */
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: var(--font-size-normal);
}

/* media blocks for detail pages */
.media-block {
  margin: 32px 0;
}

.media-block.landscape video,
.media-block.landscape img {
  width: 100%;
  height: auto;
  display: block;
}

.media-block.portrait {
  max-width: 480px;
  margin: 32px auto;
}

.media-block.portrait img,
.media-block.portrait video {
  width: 100%;
  height: auto;
  display: block;
}

/* placeholder visuals */
.media-placeholder {
  width: 100%;
  min-height: 200px;
  border: 1px dashed var(--makadam);
  background: rgba(216, 221, 216, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-compact);
  color: var(--renlav);
  text-align: center;
  padding: 16px;
}

/* responsive */
@media (min-width:780px) {
  .dot {
    --size: 80px
  }
}

@media (max-width:600px) {

  .wrap,
  .info {
    padding: var(--spacing-airy) 16px;
  }

  .card-title {
    font-size: 18px
  }
}