/* ============================================================
   Alesia Mukhina — Selected Audio and Installation Works
   Stark white-cube system. Monochrome. Helvetica.
   ============================================================ */

:root{
  --scale: 1;                       /* set by Tweaks */
  --ink: #131313;                   /* near-black text */
  --ink-2: #555555;                 /* secondary */
  --ink-3: #8a8a8a;                 /* labels / metadata */
  --ink-4: #b7b7b7;                 /* faint */
  --line: #e6e6e6;                  /* hairline */
  --paper: #ffffff;                 /* ground */
  --frame: #f3f3f3;                 /* placeholder fill */

  --maxw: 1280px;
  --gutter: clamp(24px, 5vw, 96px);

  --sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;

  /* swappable families (set by Tweaks) */
  --font-display: var(--sans);
  --font-text: var(--sans);

  /* type scale (multiplied by --scale) */
  --t-hero: calc(clamp(2.6rem, 6.4vw, 6rem) * var(--scale));
  --t-h2:   calc(clamp(1.5rem, 2.6vw, 2.3rem) * var(--scale));
  --t-title:calc(clamp(1.05rem, 1.35vw, 1.35rem) * var(--scale));
  --t-body: calc(clamp(1rem, 1.12vw, 1.2rem) * var(--scale));
  --t-meta: calc(clamp(0.95rem, 1.0vw, 1.05rem) * var(--scale));
  --t-label:calc(0.72rem * var(--scale));
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

body.cursor-on{ cursor: none; }
body.cursor-on a,
body.cursor-on [data-cursor]{ cursor: none; }

::selection{ background: var(--ink); color: var(--paper); }

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

/* headings use the Display family */
.hero__title, .work__title, .contact__big, .index .ttl, .about__body p:not(.small){
  font-family: var(--font-display);
}

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* tiny letterspaced label */
.label{
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.mono{ font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: 0; }

/* ---------------- Top bar ---------------- */
.topbar{
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px var(--gutter);
  mix-blend-mode: difference;          /* stays legible over dark media */
  color: #fff;
  pointer-events: none;
}
.topbar .brand{ font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; pointer-events: auto; }
.topbar nav{ display: flex; gap: clamp(18px, 2.2vw, 40px); pointer-events: auto; }
.topbar nav a{ font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; opacity: .85; transition: opacity .3s; }
.topbar nav a:hover{ opacity: 1; }

/* ---------------- Hero ---------------- */
.hero{
  min-height: 96vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 8vh;
}
.hero__main{ align-self: end; }
.hero__title{
  font-size: var(--t-hero);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
}
.hero__sub{
  margin: clamp(22px, 3.4vh, 40px) 0 0;
  max-width: 44ch;
  font-size: calc(clamp(1.15rem, 1.7vw, 1.6rem) * var(--scale));
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__foot{
  align-self: end;
  display: flex; flex-wrap: wrap; gap: 8px 48px;
  border-top: 1px solid var(--line);
  padding: 18px 0 6vh;
  margin-top: clamp(40px, 8vh, 96px);
}

/* ---------------- Index (shown only in index layout) ---------------- */
.index{ display: none; border-top: 1px solid var(--ink); margin-top: 4vh; }
.index ol{ list-style: none; margin: 0; padding: 0; }
.index li{ border-bottom: 1px solid var(--line); }
.index a{
  display: grid;
  grid-template-columns: 3.5em 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: clamp(18px, 3vh, 34px) 0;
  transition: padding-left .45s cubic-bezier(.22,1,.36,1), color .3s;
}
.index a:hover{ padding-left: 24px; }
.index .num{ font-family: var(--mono); font-size: var(--t-meta); color: var(--ink-3); }
.index .ttl{ font-size: var(--t-h2); font-weight: 500; letter-spacing: -0.02em; }
.index .yr{ font-style: italic; color: var(--ink-3); font-size: var(--t-meta); }

/* ---------------- Works ---------------- */
.works{ padding-top: clamp(40px, 8vh, 120px); }

.work{ padding: clamp(56px, 12vh, 160px) 0; border-top: 1px solid var(--line); }
.work:first-child{ border-top: none; }
body[data-rules="off"] .work{ border-top: none; }

.work__head{ max-width: 62ch; }
.work__title{ font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.025em; margin: 0 0 .5em; line-height: 1.05; }
.work__meta{ margin: 0; font-style: italic; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.55; }
.work__meta .yr{ display: block; }
.work__desc{ max-width: 54ch; margin: 1.6em 0 0; font-size: var(--t-body); color: var(--ink); line-height: 1.62; text-wrap: pretty; }

.work__media{ margin-top: clamp(40px, 7vh, 88px); }

/* ---- media placeholder ---- */
.media{
  position: relative;
  background: var(--frame);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid; place-items: center;
}
.media[data-ar="portrait"]{ aspect-ratio: 4 / 5; }
.media[data-ar="tall"]{ aspect-ratio: 3 / 4; }
.media[data-ar="wide"]{ aspect-ratio: 16 / 9; }

.media__inner{ text-align: center; padding: 32px; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.media__play{
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--ink-3);
  display: grid; place-items: center; margin: 0 auto 22px;
  transition: border-color .4s, transform .5s cubic-bezier(.22,1,.36,1);
}
.media__play svg{ width: 13px; height: 13px; fill: var(--ink-2); margin-left: 2px; }
.media__name{ font-size: var(--t-meta); font-style: italic; color: var(--ink-2); }
.media__tech{ display: block; margin-top: 10px; font-size: var(--t-label); letter-spacing: 0.14em; color: var(--ink-4); }

.media:hover .media__play{ border-color: var(--ink); transform: scale(1.06); }
.media:hover .media__inner{ transform: translateY(-2px); }

/* ---- embedded video ---- */
.media--video{ background: #000; }
.media__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media__overlay{
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  background: linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.10) 40%, rgba(0,0,0,.04));
  transition: opacity .6s cubic-bezier(.22,1,.36,1);
}
.media__overlay .media__play{ border-color: rgba(255,255,255,.8); backdrop-filter: blur(2px); }
.media__overlay .media__play svg{ fill: #fff; }
.media__overlay .media__name{ color: #fff; }
.media__overlay .media__tech{ color: rgba(255,255,255,.7); }
.media--video:hover .media__overlay .media__play{ border-color: #fff; }
.media--video.playing .media__overlay{ opacity: 0; pointer-events: none; }
/* frame tweaks shouldn't repaint a video tile */
body[data-frame="striped"] .media--video,
body[data-frame="dark"] .media--video{ background: #000; background-image: none; border-color: var(--line); }

/* faint diagonal texture variant */
body[data-frame="striped"] .media{
  background-image: repeating-linear-gradient(45deg, #efefef 0 2px, transparent 2px 11px);
  background-color: #f7f7f7;
}
body[data-frame="dark"] .media{ background: #111; border-color: #111; }
body[data-frame="dark"] .media__play{ border-color: #777; }
body[data-frame="dark"] .media__play svg{ fill: #aaa; }
body[data-frame="dark"] .media__name{ color: #cfcfcf; }
body[data-frame="dark"] .media__tech{ color: #6a6a6a; }

/* ============================================================
   LAYOUT MODE: column (default-ish) — text + media stacked, centered
   ============================================================ */
body[data-layout="column"] .work{ display: block; }
body[data-layout="column"] .work__head{ margin: 0 auto; text-align: left; }
body[data-layout="column"] .work__media{ margin-left: auto; margin-right: auto; }
body[data-layout="column"] .media[data-ar="portrait"],
body[data-layout="column"] .media[data-ar="tall"]{ max-width: 560px; margin-inline: auto; }
body[data-layout="column"] .media[data-ar="wide"]{ max-width: 980px; margin-inline: auto; }

/* ============================================================
   LAYOUT MODE: editorial — asymmetric 12-col, alternating sides
   ============================================================ */
body[data-layout="editorial"] .work{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(32px, 6vh, 72px);
  align-items: start;
}
body[data-layout="editorial"] .work__head{ grid-column: 1 / 6; grid-row: 1; position: sticky; top: 16vh; }
body[data-layout="editorial"] .work__media{ grid-column: 7 / 13; grid-row: 1; margin-top: 0; }
/* alternate: odd works flip sides */
body[data-layout="editorial"] .work:nth-of-type(even) .work__head{ grid-column: 8 / 13; }
body[data-layout="editorial"] .work:nth-of-type(even) .work__media{ grid-column: 1 / 7; }
/* size variety */
body[data-layout="editorial"] .media[data-ar="wide"]{ max-width: 100%; }
body[data-layout="editorial"] .media[data-ar="portrait"]{ max-width: 480px; }
body[data-layout="editorial"] .media[data-ar="tall"]{ max-width: 440px; margin-left: auto; }

/* wide / landscape works break out to full content width below their text */
body[data-layout="editorial"] .work--wide,
body[data-layout="index"] .work--wide{ display: block; }
body[data-layout="editorial"] .work--wide .work__media,
body[data-layout="index"] .work--wide .work__media{ margin-top: clamp(40px, 7vh, 88px); }
body[data-layout="editorial"] .work--wide .media[data-ar="wide"],
body[data-layout="index"] .work--wide .media[data-ar="wide"]{ max-width: 100%; }

/* two-column header fills the full width: title + credit left, description right */
body[data-layout="editorial"] .work--wide .work__head,
body[data-layout="index"] .work--wide .work__head{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: var(--gutter);
  max-width: none;
  position: static;
  align-items: start;
}
body[data-layout="editorial"] .work--wide .work__title,
body[data-layout="index"] .work--wide .work__title{ grid-column: 1; grid-row: 1; margin-bottom: .5em; }
body[data-layout="editorial"] .work--wide .work__meta,
body[data-layout="index"] .work--wide .work__meta{ grid-column: 1; grid-row: 2; }
body[data-layout="editorial"] .work--wide .work__desc,
body[data-layout="index"] .work--wide .work__desc{
  grid-column: 2; grid-row: 1 / span 2;
  margin-top: 0; max-width: 50ch; align-self: start;
}

@media (max-width: 860px){
  body[data-layout="editorial"] .work--wide .work__head,
  body[data-layout="index"] .work--wide .work__head{ display: block; }
  body[data-layout="editorial"] .work--wide .work__desc,
  body[data-layout="index"] .work--wide .work__desc{ margin-top: 1.6em; }
}

@media (max-width: 860px){
  body[data-layout="editorial"] .work{ display: block; }
  body[data-layout="editorial"] .work__head{ position: static; }
  body[data-layout="editorial"] .work__media{ margin-top: clamp(40px,7vh,88px); }
  body[data-layout="editorial"] .media{ max-width: 560px !important; margin-inline: auto; }
}

/* ============================================================
   LAYOUT MODE: index — show index list, works render below
   ============================================================ */
body[data-layout="index"] .index{ display: block; }
body[data-layout="index"] .work{
  display: grid; grid-template-columns: repeat(12,1fr); column-gap: var(--gutter);
}
body[data-layout="index"] .work__head{ grid-column: 1 / 5; position: sticky; top: 16vh; }
body[data-layout="index"] .work__media{ grid-column: 6 / 13; margin-top: 0; }
@media (max-width: 860px){
  body[data-layout="index"] .work{ display:block; }
  body[data-layout="index"] .work__head{ position: static; }
  body[data-layout="index"] .work__media{ margin-top: clamp(40px,7vh,88px); }
}

/* ---------------- About + Contact ---------------- */
.about{ padding: clamp(80px, 16vh, 220px) 0 0; border-top: 1px solid var(--ink); }
.about__grid{ display: grid; grid-template-columns: repeat(12,1fr); column-gap: var(--gutter); row-gap: 40px; }
.about__lead{ grid-column: 1 / 4; }
.about__portrait{ grid-column: 1 / 4; margin: 8px 0 0; }
.about__portrait img{ display: block; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1); }
.about__body{ grid-column: 5 / 12; }
.about__body p{ margin: 0 0 1.1em; font-size: var(--t-h2); font-weight: 400; line-height: 1.32; letter-spacing: -0.02em; max-width: 22ch; }
.about__body p.small{ font-size: var(--t-body); line-height: 1.6; max-width: 52ch; color: var(--ink-2); font-weight: 400; letter-spacing: -0.01em; }
@media (max-width: 860px){
  .about__lead{ grid-column: 1 / -1; }
  .about__portrait{ grid-column: 1 / -1; }
  .about__body{ grid-column: 1 / -1; }
  .about__body p{ max-width: none; }
}

.contact{ padding: clamp(80px,16vh,200px) 0 0; }
.contact__big{ font-size: var(--t-hero); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin: 0 0 .4em; }
.contact__links{ display: flex; flex-wrap: wrap; gap: 12px 56px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: clamp(28px,5vh,56px); }
.contact__links a{ display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--t-body); transition: opacity .3s; }
.contact__links a .arrow{ font-family: var(--mono); transition: transform .35s cubic-bezier(.22,1,.36,1); display:inline-block; }
.contact__links a:hover .arrow{ transform: translate(4px,-4px); }
.contact__links .label{ align-self: center; }

footer.foot{ padding: clamp(60px,12vh,140px) 0 48px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--ink-3); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------------- Custom cursor ---------------- */
#cursor{
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%,-50%);
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1), background .3s;
  display: none;
}
body.cursor-on #cursor{ display: block; }
#cursor.lg{ width: 76px; height: 76px; background: #fff; }
#cursor .ctxt{
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #111;
  opacity: 0; transition: opacity .3s;
}
#cursor.lg .ctxt{ opacity: 1; }