/* ============================================================
   ELIN EGHOLM — "STILL" theme (Höllsberg-inspired minimal gallery)
   Custom theme we're building together. Tweak the tokens below.
   ============================================================ */

/* Brand font: Bitcount Prop Single (Google Fonts, variable) */
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@300..700&display=swap');

:root {
  /* --- palette: CAYENNE (weathered-glass ground / bitter-cocoa ink / cayenne accent) --- */
  --paper: #dde2dc;   /* pale weathered-glass ground */
  --ink:   #391b17;   /* bitter cocoa text */
  --muted: #889a92;   /* sage grey */
  --line:  #c9d1cb;   /* hairline borders */
  --panel: #ccd4ce;   /* player / placeholder bg */
  --accent: #9d3f0d;  /* cayenne dust — active-nav underline & small accents */

  /* --- type --- */
  --brand: 'Bitcount Prop Single', 'Courier New', monospace;   /* the display/brand font you chose */
  --plain: -apple-system, 'Helvetica Neue', Arial, sans-serif;  /* fallback for tiny legal text */

  /* --- knobs you can tweak --- */
  --edge: clamp(20px, 3.4vw, 46px);   /* page side/top padding */
  --nav-size: 17.5px;                  /* nav + wordmark size */
  --nav-gap: clamp(20px, 3vw, 54px);   /* space between nav items */
  --shot-gap: clamp(70px, 14vh, 190px);/* vertical space between photos */
  --shot-med: 560px;                   /* default image width */
  --shot-lg: 780px;
  --shot-sm: 440px;
}

/* ---------- optional colour palettes — set html data-palette="cherry|cayenne|aubergine" ---------- */
/* (default / no attribute = current black & white) */
html[data-palette="cherry"]    { --paper:#e8dccb; --ink:#7d2a2a; --muted:#b0948a; --line:#d9c7b6; --panel:#ded0bf; --accent:#5f8b99; }
html[data-palette="cayenne"]   { --paper:#dde2dc; --ink:#391b17; --muted:#889a92; --line:#c9d1cb; --panel:#ccd4ce; --accent:#9d3f0d; }
html[data-palette="aubergine"] { --paper:#e9e2da; --ink:#401f28; --muted:#9c8f91; --line:#dcd4c9; --panel:#ded6cb; --accent:#7d94a6; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--brand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding: var(--edge);
  background: var(--paper);
  mix-blend-mode: normal;
}
.wordmark {
  font-family: var(--brand);
  font-weight: 600;
  font-size: var(--nav-size);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav {
  display: flex; align-items: baseline; gap: var(--nav-gap);
  font-family: var(--brand);
  font-weight: 600;
  font-size: var(--nav-size);
}
.nav a {
  position: relative;
  color: var(--muted);
  transition: color 0.25s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--accent);
}

/* ---------- gallery (the Höllsberg column) ---------- */
.gallery {
  padding: calc(var(--edge) * 3.4) var(--edge) calc(var(--edge) * 3);
  display: flex; flex-direction: column; align-items: center;
}
.shot { width: 100%; text-align: center; margin-block: calc(var(--shot-gap) / 2); }
.shot:first-child { margin-top: clamp(30px, 8vh, 90px); }
.shot img {
  width: 100%; height: auto; margin: 0 auto;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}
.shot.in img { opacity: 1; transform: none; }

/* image widths — set per figure with these classes */
.shot.med { max-width: var(--shot-med); }
.shot.lg  { max-width: var(--shot-lg); }
.shot.sm  { max-width: var(--shot-sm); }

/* optional tiny caption under a photo (Höllsberg shows none — off by default) */
.shot figcaption {
  font-family: var(--brand);
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.04em; margin-top: 14px;
}

/* ---------- single-item viewer + slider (video page) ---------- */
.viewer {
  padding: calc(var(--edge) * 3.4) var(--edge) var(--edge);
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.stage {
  position: relative; width: 100%; max-width: 900px; margin: 0 auto; height: 74vh;
  display: flex; align-items: center; justify-content: center;
}
.slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.55s ease;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide img, .slide video {
  width: 100%; height: 100%; object-fit: contain;
}
/* click zones: left half = prev, right half = next */
.stage .zone { position: absolute; top: 0; bottom: 0; width: 42%; z-index: 3; }
.stage .zone.left  { left: 0;  cursor: w-resize; }
.stage .zone.right { right: 0; cursor: e-resize; }

.slide-cap {
  margin-top: 20px; text-align: center;
  font-family: var(--brand); font-size: 13px; color: var(--muted);
  letter-spacing: 0.04em; min-height: 1em;
}
.viewer-nav {
  display: flex; align-items: center; gap: 26px; margin-top: 14px;
  font-family: var(--brand); font-size: var(--nav-size);
}
.viewer-nav button {
  background: none; border: 0; cursor: pointer; padding: 6px 4px;
  font-family: var(--brand); font-size: var(--nav-size); color: var(--ink);
  transition: color 0.2s ease;
}
.viewer-nav button:hover { color: var(--muted); }
.counter { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 8ch; text-align: center; }

/* clickable slide (leads to the watch/detail page) */
.slide[data-href] { cursor: pointer; }
.slide[data-href]:hover img { opacity: 0.9; transition: opacity 0.3s ease; }

/* ---------- watch / detail page ---------- */
.watch {
  padding: calc(var(--edge) * 3.4) var(--edge) var(--edge);
  max-width: 980px; margin: 0 auto; min-height: 100vh;
}
.back {
  display: inline-block; font-family: var(--brand); font-size: var(--nav-size);
  color: var(--muted); margin-bottom: 34px;
}
.back:hover { color: var(--ink); }
.player { width: 100%; aspect-ratio: 16 / 9; background: var(--panel); margin-bottom: 30px; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player.link-only { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.player.link-only img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player .external {
  position: relative; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-family: var(--brand); font-size: 15px; padding: 15px 24px;
  transition: opacity 0.2s ease;
}
.player .external:hover { opacity: 0.85; }
.watch h1 { font-family: var(--brand); font-weight: 500; font-size: clamp(26px, 4vw, 46px); line-height: 1.05; }
.watch .project { color: var(--muted); font-family: var(--brand); margin-top: 10px; font-size: 15px; }
.specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 44px; border-top: 1px solid var(--line); padding-top: 28px;
}
.specs dt { font-family: var(--brand); font-size: 12px; color: var(--muted); letter-spacing: 0.08em; margin-bottom: 8px; }
.specs dd { font-family: var(--brand); font-size: 15px; line-height: 1.5; }
@media (max-width: 680px) { .specs { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- intro line (optional, for non-photo pages) ---------- */
.intro {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--edge);
}
.intro h1 { font-weight: 400; font-size: clamp(26px, 5vw, 60px); line-height: 1.15; max-width: 22ch; }

/* ---------- app studio cards (different content, same restraint) ---------- */
.apps { padding: calc(var(--edge) * 4) var(--edge); max-width: 900px; margin: 0 auto; }
.app-row {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end;
  padding: 46px 0; border-top: 1px solid var(--line);
}
.app-row:last-child { border-bottom: 1px solid var(--line); }
.app-row h2 { font-weight: 500; font-size: clamp(30px, 6vw, 66px); line-height: 1; }
.app-row p { color: var(--muted); font-size: 14px; margin-top: 16px; max-width: 46ch; font-family: var(--brand); }
.app-row .link { font-size: 13px; color: var(--ink); white-space: nowrap; }
.app-row .link:hover { color: var(--muted); }

/* ---------- footer ---------- */
.foot {
  padding: calc(var(--edge) * 2) var(--edge) var(--edge);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--muted); letter-spacing: 0.04em;
}
.foot a:hover { color: var(--ink); }

/* ---------- language toggle (in nav) ---------- */
.lang {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--brand); font-size: var(--nav-size); line-height: 1;
  letter-spacing: 0.02em; color: var(--muted);
}
.lang [data-flag] { color: var(--muted); transition: color 0.2s ease; }
.lang [data-flag].on { color: var(--ink); }
.lang:hover [data-flag] { color: var(--ink); }

/* ---------- prices page ---------- */
.prices {
  max-width: 760px; margin: 0 auto;
  padding: calc(var(--edge) * 3.4) var(--edge) var(--edge); min-height: 100vh;
}
.prices h1 { font-family: var(--brand); font-weight: 500; font-size: clamp(30px, 6vw, 60px); line-height: 1; }
.prices .note { color: var(--muted); font-family: var(--brand); margin-top: 10px; font-size: 13px; letter-spacing: 0.06em; }
.price-block { margin-top: 58px; }
.price-block h2 {
  font-family: var(--brand); font-weight: 500; font-size: 13px;
  letter-spacing: 0.12em; color: var(--muted); margin-bottom: 20px;
}
.price-list > div {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--brand); font-size: 15px;
}
.price-list dt { color: var(--ink); }
.price-list dd { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-list .total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 6px; }
.price-list .total dt, .price-list .total dd { font-weight: 600; }

/* ---------- contact page ---------- */
.contact {
  max-width: 760px; margin: 0 auto;
  padding: calc(var(--edge) * 3.4) var(--edge) var(--edge); min-height: 100vh;
}
.contact h1 { font-family: var(--brand); font-weight: 500; font-size: clamp(30px, 6vw, 60px); line-height: 1; }
.contact-email {
  display: inline-block; margin-top: 30px;
  font-family: var(--brand); font-size: clamp(22px, 4vw, 40px);
}
.contact-email:hover { color: var(--muted); }
.contact-info { margin-top: 60px; }
.contact-info > div {
  display: flex; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--brand); font-size: 15px;
}
.contact-info dt { color: var(--muted); min-width: 130px; }
.contact-info dd { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 680px) {
  /* header sits in normal flow on mobile so tall wrapped nav never hides content */
  .site-header { position: static; flex-direction: column; gap: 10px; }
  .nav { gap: 18px; flex-wrap: wrap; }
  /* content no longer needs to clear a fixed header — trim the top padding */
  .gallery, .watch, .apps, .prices, .contact { padding-top: calc(var(--edge) * 1.6); }
  .viewer { min-height: auto; padding-top: calc(var(--edge) * 1.6); }
  :root { --shot-med: 92vw; --shot-lg: 94vw; --shot-sm: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .shot img { opacity: 1; transform: none; transition: none; }
}

/* ---------- cursor paper plane ---------- */
.cursor-plane {
  position: fixed; left: 0; top: 0; width: 22px; height: 22px;
  color: var(--accent); pointer-events: none; z-index: 9999;
  opacity: 0; transition: opacity 0.3s ease; will-change: transform;
}
.cursor-plane svg { width: 100%; height: 100%; display: block; }
@media (pointer: coarse) { .cursor-plane { display: none; } }