/* =========================================================
   MARINA MUUN — site styles
   Colours, fonts and sizes live at the top so they are easy
   to tweak in one place.
   ========================================================= */

@font-face {
  font-family: "PitchSans";
  src: url("../fonts/PitchSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "PPEditorial";
  src: url("../fonts/PPEditorialOld-Ultralight.otf") format("opentype");
  font-weight: 200;
  font-display: swap;
}

:root {
  --bg: #000;
  --text: #fff;
  --hover: #8991fc;           /* lilac link hover colour */
  --mono: "PitchSans", "Courier New", monospace;
  --serif: "PPEditorial", "Times New Roman", serif;
  --small: 17.7px;            /* labels, nav, descriptions */
  --title: 33.3px;            /* project titles */
  --big: 50.5px;              /* marquee */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--small);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--hover); }

img, video { display: block; max-width: 100%; height: auto; }

/* ---------- Text styles ---------- */

.label {                       /* e.g. "JOHN TEMPLETON FOUNDATION" */
  font-family: var(--mono);
  font-size: var(--small);
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 10px;
}
.title {                       /* e.g. "Garden Poetry" */
  font-family: var(--serif);
  font-weight: 200;
  font-size: var(--title);
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin: 0 auto 24px;
  max-width: 585px;
}
.text {                        /* descriptions on the Play page */
  font-family: var(--mono);
  font-size: var(--small);
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 585px;
  margin: 0 auto 40px;
}
.text p { margin: 0 0 1.3em; }

/* ---------- Header (fixed) ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 79px;
  z-index: 50;
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
.site-header nav a {
  position: absolute;
  top: 16px;
  font-size: 18px;
  letter-spacing: -0.48px;
}
.nav-work { left: 20px; }
.nav-play { left: 75px; }
.nav-info { right: 20px; }
.logo {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 50px;
}
.logo img { width: 50px; height: 50px; transition: transform .6s; }
.logo:hover img { transform: rotate(45deg); }

/* mobile menu button + overlay */
.menu-btn {
  display: none;
  position: absolute;
  right: 20px; top: 24px;
  width: 36px; height: 20px;
  background: none; border: 0; padding: 0;
  pointer-events: auto;
}
.menu-btn span {
  display: block; height: 1.5px; background: var(--text);
  margin-bottom: 9px; transition: transform .3s;
}
.menu-open .menu-btn span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn span:last-child  { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 40;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 15px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.mobile-menu a { font-size: 25px; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; }

/* ---------- Footer bar (fixed, desktop only) ---------- */

.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  z-index: 50;
  font-size: 18px;
  pointer-events: none;
}
.site-footer a {
  position: absolute; bottom: 8px;
  pointer-events: auto;
  letter-spacing: -0.48px;
}
.site-footer .left { left: 14px; }
.site-footer .right { right: 14px; }

/* ---------- Hero ---------- */

.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 93px 5vw 60px;
}
.hero img { width: 90vw; max-width: 1600px; }

/* ---------- Wavy marquee ---------- */

.marquee-section { padding: 48px 0 140px; text-align: center; }
.marquee {
  width: 100%;
  height: 160px;
  overflow: visible;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.marquee text {
  font-family: var(--serif);
  font-weight: 200;
  font-size: var(--big);
  letter-spacing: -0.03em;
  fill: var(--text);
}

/* ---------- Project sections ---------- */

.project {
  position: relative;
  text-align: center;
  padding: 83px 20px 100px;
}
.project .media { margin: 0 auto 6px; }
.project .media + .media { margin-top: 6px; }

/* Widths — pick one of these classes for each image/video */
.w-xl  { width: 82vw; }   /* very wide (landscape pieces)   */
.w-l   { width: 73vw; }   /* wide                           */
.w-m   { width: 65vw; }   /* medium-wide                    */
.w-s   { width: 49vw; }   /* medium                         */
.w-xs  { width: 41vw; }   /* narrow (portrait pieces)       */
.w-xxs { width: 32vw; }   /* very narrow                    */

/* Freundin butterflies */
.butterfly { position: absolute; pointer-events: none; }
.butterfly.b1 { width: 12vw; left: 17vw; top: 240px; }
.butterfly.b2 { width: 16vw; right: 13vw; top: 560px; }

/* Litterati layout: bookmark | poster | bookmark, then 3 bookplates */
.litterati-top, .litterati-bottom {
  display: flex; justify-content: space-between; align-items: center;
  width: 82vw; margin: 0 auto;
}
.litterati-top { margin-top: 40px; }
.litterati-top .bookmark { width: 12vw; }
.litterati-top .poster { width: 49vw; }
.litterati-bottom { margin-top: 40px; }
.litterati-bottom img { width: 24.2vw; }

/* ---------- Info ---------- */

.info { text-align: center; padding: 124px 20px 0; }
.info .bio {
  font-family: var(--serif);
  font-weight: 200;
  font-size: var(--title);
  line-height: 1.25;
  letter-spacing: -0.03em;
  max-width: 1000px;
  margin: 0 auto 94px;
}
.info .clients { max-width: 820px; margin: 0 auto 52px; line-height: 1.3; }
.info .block { margin-bottom: 52px; line-height: 1.3; }
.info .branch { width: 65vw; margin: 0 auto; padding-bottom: 120px; }

/* ---------- Play page bits ---------- */

.play-intro { text-align: center; padding: 138px 20px 40px; }
.play-intro .logo-inline { width: 50px; margin: 0 auto 70px; display: block; }
.play-intro h1 { font-family: var(--serif); font-weight: 200; font-size: var(--title); letter-spacing: -0.03em; margin: 0 0 20px; }
.play-intro .text { max-width: 345px; }
.play-hero { width: 90vw; margin: 0 auto; }

.offset-left  { margin-left: 9vw !important;  margin-right: auto !important; }
.offset-right { margin-left: auto !important; margin-right: 9vw !important; }
.flush-left   { margin-left: 0 !important;  margin-right: auto !important; }
.flush-right  { margin-left: auto !important; margin-right: 0 !important; }

.w-24 { width: 24vw; }      /* small square-ish image */

/* Portrait (phone-shaped) videos: sized by height instead of width */
video.v      { height: 58vh; width: auto; max-width: 90vw; }
video.v-tall { height: 74vh; width: auto; max-width: 90vw; }

.text em, .text.italic { font-style: italic; }

/* Two things side by side (used in Digital Ikebana) */
.pair {
  display: flex; align-items: center; justify-content: space-between;
  width: 82vw; margin: 40px auto;
}
.pair > * { flex: 0 0 auto; }
.pair img { width: 38vw; }

.play-end { text-align: center; padding: 83px 20px 120px; line-height: 1.3; }
.play-end .branch { width: 65vw; margin: 40px auto 50px; }

/* ---------- Custom cursor (desktop with mouse only) ---------- */

@media (hover: hover) and (pointer: fine) {
  html, body, a, button { cursor: none; }
  #cursor {
    position: fixed; left: 0; top: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.8);
    mix-blend-mode: difference;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
    z-index: 9999;
  }
  #cursor.small { width: 15px; height: 15px; }
}

/* ---------- Phones & small tablets ---------- */

@media (max-width: 767px) {
  .site-header nav, .site-footer { display: none; }
  .menu-btn { display: block; }
  .logo { left: 20px; transform: none; }
  #cursor { display: none; }

  .hero { min-height: 70vh; padding: 90px 0 20px; }
  .hero img { width: 100vw; }

  .marquee-section { padding-bottom: 60px; }
  .marquee { height: 110px; }
  .marquee text { font-size: 34px; }

  .project { padding: 70px 0 40px; }
  .project .label, .project .title { padding: 0 20px; }
  .title { font-size: 28px; }
  .w-xl, .w-l, .w-m, .w-s { width: 100vw; }
  .w-xs, .w-xxs { width: 90vw; }
  .offset-left, .offset-right, .flush-left, .flush-right { margin-left: auto !important; margin-right: auto !important; }

  .butterfly.b1 { width: 22vw; left: 2vw; top: 160px; }
  .butterfly.b2 { width: 26vw; right: 2vw; top: auto; bottom: 60px; }

  .litterati-top { width: 100vw; padding: 0 8px; }
  .litterati-top .bookmark { width: 18vw; }
  .litterati-top .poster { width: 58vw; }
  .litterati-bottom { width: 100vw; padding: 0 8px; gap: 8px; }
  .litterati-bottom img { width: 32%; }

  .info .bio { font-size: 26px; margin-bottom: 60px; }
  .info .branch, .play-end .branch { width: 100vw; }
  .text { padding: 0 20px; }
  .play-hero { width: 100vw; }
  .w-24 { width: 60vw; }
  video.v, video.v-tall { height: auto; width: 80vw; }
  .pair { flex-direction: column; width: 100vw; gap: 40px; }
  .pair img { width: 100vw; }
}