:root {
  --black: #000;
  --cream: #eae5d5; /* matches Wix --color used in original */
  --text: #161616;
  --text-light: #f5f5f5;
  --max: 1180px;
  --pad: clamp(20px, 4vw, 56px);
  --font-body:
    "Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}

.fushigi #wrap {
  background: var(--black);
}

.fushigi-wrap {
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

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

  .container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    width: 100%;
  }

  .skip {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }
  .skip:focus {
    left: 12px;
    top: 12px;
    z-index: 1000;
    background: #fff;
    color: #000;
    padding: 8px 12px;
  }

  /* ---------- Brushstroke section dividers ----------------
   Uses the EXACT SVG path from the original Wix page, shipped
   in assets/brush-mask.svg, applied as a CSS mask so we can
   color it to match the section it belongs to. */

  .edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -35px;
    height: 80px;
    pointer-events: none;
    z-index: 5;
    -webkit-mask-image: url("../img/fushigi/brush-mask.svg");
    mask-image: url("../img/fushigi/brush-mask.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    mask-position: center bottom;
  }

  /* Flipped variant: the section's color drips DOWN past its bottom edge
   into the section below. Mirror vertically so the solid mass sits flush
   with the section while the wispy tendrils extend into the next one. */
  .edge--down {
    transform: scaleY(-1) translateY(-100px);
  }

  .edge--into-black {
    background-color: var(--black);
  }

  /* ---------- HERO ---------- */

  .hero {
    position: relative;
    background: var(--black);
    overflow: hidden;
    height: clamp(520px, 70vh, 760px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0;
  }
  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  .hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: clamp(40px, 6vh, 80px) var(--pad) 0;
    width: 100%;
    max-width: 1100px;
  }
  .hero__title {
    width: min(820px, 88%);
    margin: 0 auto 24px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  }
  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }
  .btn {
    display: inline-block;
    background: rgba(245, 245, 235, 0.92);
    color: #1a1a1a;
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 13px;
    padding: 14px 22px;
    border: 2px solid #1a1a1a;
    text-transform: uppercase;
    transition:
      transform 0.15s ease,
      background 0.15s ease;
    margin: 0 8px 8px 0;
  }
  .btn:hover {
    background: #fff;
    text-decoration: none;
    transform: translateY(-1px);
  }

  /* ---------- INTRO BAND (black) ---------- */

  .intro {
    position: relative;
    background: var(--black);
    color: var(--text-light);
    padding: 70px 0;
    margin: 70px 0;
  }
  .intro__inner {
    max-width: 1100px;
  }
  .intro__lede {
    font-size: 16px;
    margin: 0 0 20px;
  }
  .intro__lede strong {
    font-weight: 700;
  }
  .intro p {
    margin: 0 0 18px;
    font-size: 15.5px;
    color: #f1f1f1;
  }

  /* ---------- THE STORY ---------- */

  .story {
    position: relative;
    background: var(--cream);
    overflow: hidden;
    min-height: 540px;
    padding: 70px 0 80px;
  }
  .story__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
  }
  .story__inner {
    position: relative;
    z-index: 1;
    padding-top: 70px;
    color: var(--text);
  }
  .story__copy {
    max-width: 540px;
  }
  .story h1 {
    font-size: clamp(46px, 6vw, 74px);
    font-weight: 800;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #111;
  }
  .story p {
    font-size: 15px;
    margin: 0 0 14px;
    color: #1a1a1a;
  }
}