:root{
  /* edgelegant brand identity */
  --bjornbar:#18112c;   /* deep purple-blue — primary text / outer dot */
  --renlav:#d8ddd8;     /* light green-grey — background / image bg */
  --makadam:#a9ada1;    /* neutral green-grey — grids / frames / lines */
  --mossa:#91893e;      /* muted yellow-green — micro accents */
  --ljung:#634a72;      /* plum-violet — soft highlights */
  --rost:#9a624a;       /* iron-oxide red-brown — emphasis */
}

/* Intro animation keyframes */
@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;
  font-family: 'Mulish', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color: var(--bjornbar);
  background: var(--renlav);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 22px;
  line-height: 1.7;
  letter-spacing: .3px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* dots */
.dot {
  --size: 72px;
  position: relative;
  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;
}

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

.dot:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 8px rgba(99, 74, 114, .10);
}

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

.dot[aria-label]:after {
  content: attr(aria-label);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: lowercase;
  opacity: 0;
  transition: opacity .18s ease;
  color: var(--bjornbar);
}

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

.dot.label {
  --size: 72px;
}

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

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

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

@media (min-width: 780px) { /* Desktop padding */
  main {
    padding-top: 0;
  }
  .view:not(#home) {
    padding-top: 96px;
  }
}

.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 16px 15vh;
  overflow: hidden; /* Prevent transformed children from causing horizontal scroll */
  gap:16px;
}

@media (min-width: 780px) {
  .center {
    min-height: calc(100vh - 160px);
  }
}

.tagline {
  max-width: 920px;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 0;
}

/* Home view animation delays */
.tagline {
  opacity: 0;
}
.tagline-first {
  animation: fadeIn 2s ease-in 9.0s forwards;
}
.tagline-second {
  animation: fadeIn 2s ease-in 10.0s forwards;
  transform: translateX(5%); /* Default for mobile */
}
#home .store-link {
  opacity: 0;
  animation: fadeIn 1s ease-in 11.0s forwards;
}
#bg-video {
  opacity: 1;
}

.intro-done .tagline,
.intro-done #home .store-link {
  opacity: 1;
  animation: none;
}

/* top nav */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  z-index: 20;
  /* Animation */
  opacity: 0;
  animation: fadeIn 1s ease-in 12.0s forwards;
}
.intro-done .topbar {
  opacity: 1;
  animation: none;
}

/* Black screen fade out */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 100;
  animation: fadeOut 1s ease-in 0.5s forwards;
}

/* experiments */
.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 20px;
}

.page-title {
  margin: 6px 0 12px 0;
  text-transform: lowercase;
  font-size: 28px;
  letter-spacing: 2px;
}

.lead {
  margin: 0 0 28px 0;
  font-size: 22px;
  opacity: .9;
}

.cards {
  display: block;
}

.card {
  background: rgba(24, 17, 44, 0.035);
  border: 1px solid var(--makadam);
  border-radius: 18px;
  padding: 28px 22px;
  margin-bottom: 44px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(24, 17, 44, 0.05);
}

.meta {
  font-size: 24px;
  opacity: .7;
  margin-bottom: 6px;
  text-transform: lowercase;
}

.card h3 {
  margin: .25rem 0 .35rem 0;
  font-size: 26px;
  text-transform: lowercase;
}

.card-preview {
  margin-top: 12px;
}

.card img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px; /* Add rounded corners to the image */
  font-size: 16px;
  line-height: 1.6;
  color: var(--bjornbar);
  opacity: 0.8;
  margin-top: 8px;
}

.card-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  font-size: 20px;
  line-height: 1.7;
}

.card.expanded .card-preview {
  display: none;
}

.card.expanded .card-content {
  max-height: 2000px; /* Large enough to fit any content */
  margin-top: 12px;
}

.desc p {
  margin: .35rem 0;
}

/* open animation */
.card[open] .desc {
  animation: fadein .25s ease;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}

.ph {
  aspect-ratio: 4/3;
  border: 1px dashed var(--makadam);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(24, 17, 44, .04), rgba(24, 17, 44, .01));
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--bjornbar);
  opacity: .9;
}

.links {
  margin-top: 10px;
  font-size: 14px;
}

.links a {
  border-bottom: 1px solid var(--makadam);
  padding-bottom: 2px;
}

.links a:hover {
  color: var(--rost);
}

/* inspiration + contact placeholders */
.info {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 20px;
  font-size: 20px;
  line-height: 1.7;
}

.back-link {
  margin-bottom: 24px;
  font-size: 25px;
}

.back-link a,
.info a,
.store-link a {
  border-bottom: 1px solid var(--makadam);
  padding-bottom: 2px;
}

.info p {
  margin: 0.4rem 0;
}

/* responsive */
@media (min-width: 780px) {
  .dot { --size: 90px; }
  .dot.label { --size: 84px; }
  .tagline { font-size: 32px; }
  .tagline-second {
    transform: translateX(25%); /* Desktop override */
  }
  .back-link {
    font-size: 30px;
  }
} /* Closing brace for min-width: 780px */

@media (min-width: 860px) {
  .card { grid-column: span 6; }
}

@media (min-width: 960px) { /* New media query for larger screens */
  .dot.label { --size: 92px; }
  .tagline { font-size: 28px; }
} /* Closing brace for min-width: 960px */

@media (max-width: 480px) { /* New media query for smaller screens */
  .dot.label { --size: 78px; }
  .tagline { font-size: 22px; }
  .gallery { grid-template-columns: 1fr; }
}
@media (max-width: 550px) {
  /* The video is now handled by the general #bg-video rule */
}
#bg-video {
  width: 550px; /* adjust to your desired width */
  max-width: 550px; /* Set a max-width for larger screens */
  width: 100%;      /* Make it responsive by default */
  height: auto;     /* Maintain aspect ratio */
  display: block;
  margin: 0 auto;   /* Center the video */
}

/* footer */
footer {
  padding: 2rem 20px;
  text-align: center;
  font-size: 16px;
  opacity: 0.7;
  margin-top: 4rem;
}

footer a {
  border-bottom: 1px solid var(--makadam);
  padding-bottom: 2px;
}

footer a:hover {
  color: var(--rost);
}