/* DESKTOP ONLY: tiny black square cursor + project title */
@media (min-width: 701px) {
  body,
  a,
  button,
  .work-item,
  .work-item img,
  .work-item video {
    cursor: none !important;
  }

  .cursor {
    display: block !important;
    position: fixed !important;
    left: -100px;
    top: -100px;
    width: 7px !important;
    height: 7px !important;
    background: #000 !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
  }

  .cursor-title {
    display: block !important;
    position: fixed !important;
    left: 0;
    top: 0;
    transform: translate(16px, 16px);
    z-index: 999998 !important;
    pointer-events: none;

    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    padding: 6px 8px;
    border-radius: 3px;

    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);

    box-shadow:
      0 1px 4px rgba(157, 157, 157, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16);

    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .cursor-title.is-visible {
    opacity: 1;
    mix-blend-mode: hard-light;
  }
}

/* MOBILE/TABLET: normal cursor, no hover label */
@media (max-width: 700px) {
  body,
  a,
  button,
  .work-item,
  .work-item img,
  .work-item video {
    cursor: auto !important;
  }

  .cursor,
  .cursor-title {
    display: none !important;
  }
}

/* DESKTOP ONLY: push items left/right inside each column */
@media (min-width: 701px) {

  /* Full-size but aligned */
  .work-item.push-left,
  .work-item.push-right,
  .work-item.small-left,
  .work-item.small-right,
  .work-item.medium-left,
  .work-item.medium-right {
    display: flex !important;
    align-items: center !important;
  }

  .work-item.push-left {
    justify-content: flex-start !important;
  }

  .work-item.push-right {
    justify-content: flex-end !important;
  }

  .work-item.push-left img,
  .work-item.push-left video,
  .work-item.push-right img,
  .work-item.push-right video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Medium items */
  .work-item.medium-left {
    justify-content: flex-start !important;
  }

  .work-item.medium-right {
    justify-content: flex-end !important;
  }

  .work-item.medium-left img,
  .work-item.medium-left video,
  .work-item.medium-right img,
  .work-item.medium-right video {
    width: 75% !important;
    max-width: 75% !important;
    height: auto !important;
    display: block !important;
  }

  /* Small items */
  .work-item.small-left {
    justify-content: flex-start !important;
  }

  .work-item.small-right {
    justify-content: flex-end !important;
  }

  .work-item.small-left img,
  .work-item.small-left video,
  .work-item.small-right img,
  .work-item.small-right video {
    width: 50% !important;
    max-width: 50% !important;
    height: auto !important;
    display: block !important;
  }
}

/* MOBILE: everything full width again */
@media (max-width: 700px) {
  .work-item.push-left,
  .work-item.push-right,
  .work-item.small-left,
  .work-item.small-right,
  .work-item.medium-left,
  .work-item.medium-right {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .work-item.push-left img,
  .work-item.push-left video,
  .work-item.push-right img,
  .work-item.push-right video,
  .work-item.small-left img,
  .work-item.small-left video,
  .work-item.small-right img,
  .work-item.small-right video,
  .work-item.medium-left img,
  .work-item.medium-left video,
  .work-item.medium-right img,
  .work-item.medium-right video {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
  }
}
/* FINAL INFO BUTTON STAR — same soft frosted/shaded style as logo */
.info-button {
  position: fixed !important;
  top: 20px !important;
  right: 22px !important;

  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;

  width: auto !important;
  height: auto !important;

  color: rgba(255, 255, 255, 0.42) !important;
  font-family: "JoustFont", Arial, Helvetica, sans-serif !important;
  font-size: 190px !important;
  font-weight: 400 !important;
  line-height: 0.8 !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1001 !important;

  mix-blend-mode: normal !important;

  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.18),
    0 0 8px rgba(255, 255, 255, 0.14);

  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Turn off old pseudo star if it exists */
.info-button::before,
.info-button::after {
  content: none !important;
  display: none !important;
}

/* Gentle hover only */
.info-button:hover {
  transform: scale(1.08) rotate(8deg) !important;
  opacity: 0.85 !important;
}

.info-button.is-open {
  transform: rotate(45deg) !important;
  opacity: 0.55 !important;
}

/* DESKTOP: info panel appears instead of sliding */
@media (min-width: 701px) {
  .info-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    background: #f4f1ea !important;
    color: #111 !important;
    z-index: 2000 !important;
    padding: 110px 32px 32px !important;
    overflow-y: auto !important;

    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

  transition: none !important;
  }

  .info-panel.is-open {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .info-button {
    z-index: 3000 !important;
  }
}

/* DESKTOP INFO PAGE — Joy-style mirrored layout */
@media (min-width: 701px) {
  .info-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 0 !important;

    background: #ffffff !important;
    color: #000943 !important;

    z-index: 2000 !important;
    padding: 0 !important;
    overflow: hidden !important;

    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition: opacity 0.18s ease !important;
  }

  .info-panel.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .info-layout {
    width: 100%;
    height: 100%;
    max-width: none !important;

    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    column-gap: 70px;

    align-items: start;

    padding: 120px 140px 80px 120px;
  }

  .info-text {
    max-width: 900px;
  }

  .info-intro {
    font-family: "JoustFont", Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4.2vw, 86px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.055em;
    margin: 0 0 34px !important;
  }

  .info-contact {
    margin-top: 70px;
  }

  .info-contact p {
    font-family: "JoustFont", Arial, Helvetica, sans-serif;
    font-size: clamp(24px, 1.8vw, 38px) !important;
    line-height: 1 !important;
    letter-spacing: -0.035em;
    margin: 0 0 34px !important;
  }

  .info-contact a {
    color: inherit !important;
    text-decoration: none !important;
  }

  .info-contact a:hover {
    text-decoration: underline !important;
    text-underline-offset: 4px;
  }

  .info-brand {
    font-family: "JoustFont", Arial, Helvetica, sans-serif;
    font-size: clamp(90px, 10vw, 210px);
    line-height: 0.75;
    letter-spacing: -0.12em;
    color: #000943;

    justify-self: end;
    margin-top: 8px;
    transform: scaleX(0.72);
    transform-origin: right top;
    white-space: nowrap;
  }

  .info-button {
    z-index: 3000 !important;
  }
}

/* MOBILE INFO PAGE */
@media (max-width: 700px) {
  .info-panel {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: #f4f1ea !important;
    color: #000943 !important;
    overflow-y: auto !important;
  }

  .info-layout {
    display: block !important;
    padding: 86px 18px 30px !important;
  }

  .info-brand {
    font-family: "JoustFont", Arial, Helvetica, sans-serif;
    font-size: 72px;
    line-height: 0.8;
    letter-spacing: -0.12em;
    transform: scaleX(0.72);
    transform-origin: left top;
    margin-bottom: 34px;
  }

  .info-intro {
    font-family: "JoustFont", Arial, Helvetica, sans-serif;
    font-size: 34px !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em;
    margin: 0 0 26px !important;
  }

  .info-contact {
    margin-top: 48px;
  }

  .info-contact p {
    font-size: 22px !important;
    line-height: 1.05 !important;
    margin-bottom: 26px !important;
  }
}


/* CLEAN JOUST LOGO — original font, no cut-offs, easy position controls */

/* DESKTOP CONTROLS */
@media (min-width: 701px) {
  .logo {
    position: fixed !important;

    /* CHANGE THESE YOURSELF */
    top: 0vw !important;
    left: -0.6vw !important;
    width: 50.6vw !important;
    height: 14.2vw !important;

    display: block !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .logo::before,
  .logo::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Ctext x='-60' y='255' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    -webkit-mask-position: center !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Ctext x='-60' y='255' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E") !important;
    mask-repeat: no-repeat !important;
    mask-size: 100% 100% !important;
    mask-position: center !important;
  }

  .logo::before {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(14px) saturate(1.8) contrast(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.8) contrast(1.08) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16)) !important;
  }

  .logo::after {
    background: rgba(0, 0, 0, 0.18) !important;
  }
}

/* MOBILE CONTROLS */
@media (max-width: 700px) {
  .logo {
    position: fixed !important;

    /* CHANGE THESE YOURSELF */
    top: 130px !important;
    left: 50% !important;
    width: 114vw !important;
    height: 30vw !important;
    transform: translateX(-50%) !important;

    display: block !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .logo::before,
  .logo::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Ctext x='-60' y='255' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    -webkit-mask-position: center !important;

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Ctext x='-60' y='255' textLength='1079.5' lengthAdjust='spacingAndGlyphs' font-family='Arial, Helvetica, sans-serif' font-size='330' font-weight='600' fill='white'%3EJOUST%3C/text%3E%3C/svg%3E") !important;
    mask-repeat: no-repeat !important;
    mask-size: 100% 100% !important;
    mask-position: center !important;
  }

  .logo::before {
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(14px) saturate(1.8) contrast(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.8) contrast(1.08) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16)) !important;
  }

  .logo::after {
    background: rgba(0, 0, 0, 0.18) !important;
  }
}

/* FINAL SVG LOGO USING AVOKAZT */
.logo::before,
.logo::after {
  content: none !important;
  display: none !important;
}

.logo {
  position: fixed !important;
  top: 0vw !important;
  left: -0.5vw !important;
  width: 50.5vw !important;
  height: 11.8vw !important;
  z-index: 1000 !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.logo-svg,
.logo .logo-svg,
.logo svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.logo-word {
  transform: translateY(8px) scaleY(0.84);
  transform-origin: top left;
}

.logo-letter {
  font-family: "Avokazt", Arial, Helvetica, sans-serif !important;
  font-size: 350px;
  font-weight: 700;
  fill: rgba(210, 210, 210, 0.88);
}

.logo-studio-word {
  /* move the whole studio word */
  --studio-left: 72px;      /* positive = right, negative = left */
  --studio-top: 25px;       /* positive = down, negative = up */

  /* make whole studio smaller without changing letter spacing */
  --studio-scale: 0.88;

  transform:
    translateX(var(--studio-left))
    translateY(var(--studio-top))
    scale(var(--studio-scale));

  transform-origin: top left;
  transform-box: fill-box;
}

.logo-studio-letter {
  font-family: "Avokazt", Arial, Helvetica, sans-serif !important;
  font-size: 58px; /* keep original size */
  font-weight: 700;
  fill: rgb(210, 210, 210);
}

/* MOBILE: remove tiny white hairline gaps between projects */
@media (max-width: 700px) {
  .work-scroll,
  .work-column,
  .work-item {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }

  .work-item {
    display: block !important;
    overflow: hidden !important;
    margin-bottom: -1px !important;
  }

  .work-item:last-child {
    margin-bottom: 0 !important;
  }

  .work-item img,
  .work-item video {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }
}

/* MOBILE: make JOUSTstudio fill the full phone width */
@media (max-width: 700px) {
  .logo {
    position: fixed !important;

    /* move logo up/down */
    top: 0px !important;

    /* full-width mobile positioning */
    left: 49% !important;
    width: 101.5vw !important;
    height: 22vw !important;

    transform: translateX(-50%) !important;
    overflow: hidden !important;

    z-index: 1000 !important;
    pointer-events: auto !important;
  }

  .logo-svg,
  .logo .logo-svg,
  .logo svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }
}

/* MOBILE: move menu star to bottom corner and make it smaller */
@media (max-width: 700px) {
  .info-button {
    position: fixed !important;

    /* bottom-right corner */
    top: auto !important;
    right: 18px !important;
    bottom: calc(env(safe-area-inset-bottom) + 92px) !important;
    left: auto !important;

    width: 54px !important;
    height: 54px !important;

    font-size: 72px !important;
    line-height: 0.75 !important;

    z-index: 3000 !important;
    pointer-events: auto !important;
    transform-origin: center center !important;
  }

  .info-button:hover {
    transform: none !important;
    opacity: 1 !important;
  }

  .info-button.is-open {
    transform: rotate(45deg) !important;
    opacity: 0.55 !important;
  }
}

/* MOBILE: make JOUSTstudio + menu star more transparent / less grey */
@media (max-width: 700px) {
  .logo {
    opacity: 0.62 !important;
    mix-blend-mode: normal !important;
  }

  .logo-letter,
  .logo-studio-letter {
    fill: rgba(255, 255, 255, 0.34) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16)) !important;
  }

  .info-button {
    color: rgba(255, 255, 255, 0.34) !important;
    opacity: 0.72 !important;
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.16),
      0 0 6px rgba(255, 255, 255, 0.12) !important;
    mix-blend-mode: normal !important;
  }

  .info-button::before,
  .info-button::after {
    opacity: 0.55 !important;
  }
}

/* MOBILE: visible soft glass logo + menu star */
@media (max-width: 700px) {
  .logo {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  .logo-letter,
  .logo-studio-letter {
    fill: rgba(220, 220, 220, 0.62) !important;
    stroke: rgba(255, 255, 255, 0.18) !important;
    stroke-width: 1.2px !important;

    filter:
      drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22))
      drop-shadow(0 0 5px rgba(255, 255, 255, 0.18)) !important;
  }

  .info-button {
    color: rgba(220, 220, 220, 0.62) !important;
    opacity: 1 !important;

    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.24),
      0 0 6px rgba(255, 255, 255, 0.18) !important;

    mix-blend-mode: normal !important;
  }
}

/* COLOUR-REACTIVE LOGO — picks up colours from projects underneath */
.logo {
  mix-blend-mode: luminosity !important;
  opacity: 1 !important;
}

.logo-letter,
.logo-studio-letter {
  fill: rgba(235, 235, 235, 0.9) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

/* ELEGANT TRANSLUCENT LOGO — less white, more frosted/see-through */
.logo {
  mix-blend-mode: soft-light !important;
  opacity: 1 !important;
}

.logo-letter,
.logo-studio-letter {
  fill: rgba(255, 255, 255, 0.92) !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* INFO BUTTON — same translucent effect as JOUST logo */
.info-button {
  color: rgba(145, 150, 165, 0.34) !important;

  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.10))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.06)) !important;

  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  mix-blend-mode: normal !important;
}

/* make sure old pseudo-mask star is not showing */
.info-button::before,
.info-button::after {
  content: none !important;
  display: none !important;
}

/* MOBILE: make info/menu button match JOUST logo */
@media (max-width: 700px) {
  .info-button {
    position: fixed !important;
    top: 18px !important;
    right: 16px !important;

    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;

    color: rgba(210, 210, 210, 0.88) !important;
    font-family: "Avokazt", Arial, Helvetica, sans-serif !important;
    font-size: 74px !important;
    font-weight: 700 !important;
    line-height: 0.75 !important;

    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.16);

    z-index: 3000 !important;
    mix-blend-mode: normal !important;
    cursor: pointer !important;
  }

  .info-button::before,
  .info-button::after {
    content: none !important;
    display: none !important;
  }

  .info-button:hover {
    transform: none !important;
    opacity: 1 !important;
  }

  .info-button.is-open {
    transform: rotate(45deg) !important;
    opacity: 0.7 !important;
  }
}

/* FINAL: make menu star use the EXACT same visual treatment as JOUST logo */
:root {
  --joust-ui-fill: rgba(255, 255, 255, 0.92);
  --joust-ui-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  --joust-ui-blend: soft-light;
}

/* JOUST logo */
.logo {
  mix-blend-mode: var(--joust-ui-blend) !important;
  opacity: 1 !important;
}

.logo-letter,
.logo-studio-letter {
  fill: var(--joust-ui-fill) !important;
  filter: var(--joust-ui-filter) !important;
  stroke: none !important;
}

/* Menu star button — same colour/blend/filter as logo */
.info-button {
  color: var(--joust-ui-fill) !important;
  filter: var(--joust-ui-filter) !important;
  mix-blend-mode: var(--joust-ui-blend) !important;

  background: transparent !important;
  border: 0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* stop old fake/pseudo stars interfering */
.info-button::before,
.info-button::after {
  content: none !important;
  display: none !important;
}

/* MOBILE: keep the star clean and matching */
@media (max-width: 700px) {
  .info-button {
    color: var(--joust-ui-fill) !important;
    filter: var(--joust-ui-filter) !important;
    mix-blend-mode: var(--joust-ui-blend) !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 86px !important;
    font-weight: 400 !important;
    line-height: 0.75 !important;

    text-shadow: none !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  .info-button.is-open {
    transform: rotate(45deg) !important;
    opacity: 1 !important;
  }
}

/* FINAL MOBILE POSITIONING: logo bottom, info button top-right */
@media (max-width: 700px) {
  /* JOUSTstudio at bottom of phone */
  .logo {
    position: fixed !important;

    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + -10px) !important;

    left: 49% !important;
    width: 101.5vw !important;
    height: 22vw !important;

    transform: translateX(-50%) !important;
    overflow: hidden !important;

    z-index: 1000 !important;
    pointer-events: auto !important;
  }

  /* info/menu button back to top-right */
  .info-button {
    position: fixed !important;

    top: calc(env(safe-area-inset-top) + 12px) !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    font-size: 74px !important;
    line-height: 0.75 !important;

    z-index: 3000 !important;
    pointer-events: auto !important;
  }
}

/* MOBILE LOGO: stop letters being clipped */
@media (max-width: 700px) {
  .logo {
    overflow: visible !important;
  }

  .logo-svg,
  .logo .logo-svg,
  .logo svg {
    overflow: visible !important;
  }

  .logo-letter,
  .logo-studio-letter {
    overflow: visible !important;
    clip-path: none !important;
  }
}