/* ============================================================
   studio.INTERVAL — v2 work pages
   Re-tones the existing view engine (site.css + projekte.css)
   to the calm v2 language. Variable overrides cascade through
   everything that uses var(). v1 untouched.
   ============================================================ */

/* one font, white ground, sparse accent — override the engine tokens */
body.v2-work{
  --paper:#ffffff; --paper-2:#f5f4f1; --card:#ffffff;
  --ink:#111111; --ink-2:#444444; --grey:#8a8a8a; --grey-2:#b4b4b4;
  --line:#e4e4e4; --line-2:#efefef;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --grotesk:"Helvetica Neue", Helvetica, Arial, sans-serif;
  background:#fff;
}

/* header offset (fixed .hdr ~ 60px) */
body.v2-work .proj-head{ padding-top:104px; }

/* drop the [ ] brackets finagle on the title */
body.v2-work .range-title::before,
body.v2-work .range-title::after{ content:none; }
body.v2-work .proj-head h1{ font-weight:500; letter-spacing:-0.03em; }

/* meta labels: keep small + grey, but un-shout (no heavy tracking) */
body.v2-work .meta{ letter-spacing:0.01em; text-transform:none; font-size:12.5px; }
body.v2-work .meta--acc{ color:var(--grey); }
body.v2-work .proj-sub{ border-color:var(--line); }

/* view switch + toggles — flatter, monochrome, accent only when active */
body.v2-work .vswitch{ border-color:var(--ink); }
body.v2-work .vswitch button{ letter-spacing:0.02em; text-transform:none; font-size:12.5px; }
body.v2-work .mtoggle{ letter-spacing:0.02em; text-transform:none; font-size:12.5px; }

/* grid icon for the strict-gallery toggle */
body.v2-work .ico--grid::before,
body.v2-work .ico--grid::after{ content:none; }
body.v2-work .ico--grid{ background:
  linear-gradient(currentColor 0 0) 0 0/5px 5px no-repeat,
  linear-gradient(currentColor 0 0) 8px 0/5px 5px no-repeat,
  linear-gradient(currentColor 0 0) 0 8px/5px 5px no-repeat,
  linear-gradient(currentColor 0 0) 8px 8px/5px 5px no-repeat; }

/* ---- scatter cards: smooth "pull together" when toggling strict ---- */
body.v2-work .scard{ transition:left .55s cubic-bezier(.2,.7,.2,1), top .55s cubic-bezier(.2,.7,.2,1), width .55s cubic-bezier(.2,.7,.2,1); }
body.v2-work .scard .ph{ transition:aspect-ratio .4s; background:#f2f1ee; }
body.v2-work .scard__no{ color:var(--grey); }
body.v2-work .scard:hover .scard__ttl{ color:var(--accent); }
/* strict mode: uniform, quiet captions */
body.v2-work .scatter.is-strict .scard__cap{ align-items:baseline; }

/* index rows: hairline, accent only on hover */
body.v2-work .idx-row:hover .idx-no{ color:var(--accent); }

/* graph + raster on plain white — no field/box, no dot-grid */
body.v2-work .graph{ background:#fff !important; border:none !important; height:660px; }
body.v2-work .scatter{ background:none; }
body.v2-work .raum{ background:#fff; border:none; }
body.v2-work .scard .ph{ background:#fafafa; }
body.v2-work .graph__legend span,
body.v2-work .raum__hud span{ text-transform:none; letter-spacing:0.01em; }

/* footer (v2 .ft used instead of .foot) sits fine; ensure spacing */
body.v2-work .ft{ margin-top:clamp(50px,7vw,110px); }

/* 3D massing models on plain white (raster + timeline), not grey */
body.v2-work .massing{ background:#fff !important; }
body.v2-work .massing__shadow{ opacity:.5; }
body.v2-work .scard.is-3d .ph,
body.v2-work .tlcard.is-3d .ph{ background:#fff; }

/* ===== refinements ===== */
/* no monospace subtitle + no horizontal rule under the title … */
body.v2-work .proj-sub{ display:none; }
/* … except in Zeit mode, where it hosts the (very subtle) axis controls */
body.v2-work .proj-sub.zeit-on{ display:flex; align-items:center; gap:2px; border:none; padding:0; margin-top:2px; min-height:22px; }
body.v2-work .proj-sub.zeit-on .flow-note{ display:none; }
body.v2-work .proj-sub.zeit-on .tl-flip{ display:inline-flex; }
body.v2-work .proj-sub.zeit-on .tl-flip:first-of-type{ margin-left:0; }

/* images: never any outline/border */
body.v2-work .scard .ph,
body.v2-work .scard .ph img,
body.v2-work .tlcard .ph,
body.v2-work .tlcard .ph img{ border:none; outline:none; }

/* title + number only on hover (scatter) */
body.v2-work .scard__cap{ opacity:0; transition:opacity .28s ease; }
body.v2-work .scard:hover .scard__cap,
body.v2-work .scard:focus-visible .scard__cap{ opacity:1; }

/* view switch + toggles: symbols, no rectangle outlines */
body.v2-work .vtools{ gap:24px; flex-wrap:wrap; }
body.v2-work .vswitch button,
body.v2-work .mtoggle{ font-family:var(--mono); }
body.v2-work .scard__no,
body.v2-work .tlcard__no,
body.v2-work .i-no{ font-family:var(--mono); }
body.v2-work .vswitch{ border:none !important; display:flex; gap:20px; }
body.v2-work .vswitch button,
body.v2-work .mtoggle{
  border:none !important; background:none !important; padding:5px 0 !important;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--grey); font-size:13px; letter-spacing:0.01em; text-transform:none;
  transition:color .18s;
}
body.v2-work .vswitch button svg,
body.v2-work .mtoggle svg{ width:17px; height:17px; flex:none; }
body.v2-work .vswitch button:hover,
body.v2-work .mtoggle:hover{ color:var(--ink); background:none !important; }
body.v2-work .vswitch button[aria-pressed="true"],
body.v2-work .mtoggle[aria-pressed="true"]{ color:var(--ink); background:none !important; }
body.v2-work .vswitch button[aria-pressed="true"] svg,
body.v2-work .mtoggle[aria-pressed="true"] svg{ color:var(--accent); }
@media(max-width:760px){
  body.v2-work .vswitch button span,
  body.v2-work .mtoggle span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}