/* Case pages (tools/build_cases.py) — the same Swiss editorial look as the page after the story (/_release/65175ad31403e8ef/retro/about.css):
   white paper, ink #051727, one 12-column grid with the same margins, Coolvetica Heavy Compressed for display, Inter for text.
   Ref: bleibtgleich.dev/work — a two-column grid of big previews; a case = sticky info left, the work itself right. */
@font-face { font-family: "Coolvetica HC"; src: url(/_release/65175ad31403e8ef/retro/assets/fonts/coolvetica-heavy-compressed.otf) format("opentype"); font-weight: 850; font-display: block; }
@font-face { font-family: "Inter"; src: url(/_release/65175ad31403e8ef/retro/assets/fonts/inter/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Inter"; src: url(/_release/65175ad31403e8ef/retro/assets/fonts/inter/inter-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url(/_release/65175ad31403e8ef/retro/assets/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; }

:root { --paper: #ffffff; --ink: #051727; --ink2: rgba(5, 23, 39, .68); --line: rgba(5, 23, 39, .14); --soft: #eef2f7;
  --m: clamp(20px, 7vw, 150px); --g: clamp(10px, 1.2vw, 20px); color-scheme: light; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.5 "Inter", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); }
.ico { width: 14px; height: 14px; flex: none; }
.label { margin: 0; font: 500 clamp(13px, .85vw, 15px)/1.3 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
img { display: block; width: 100%; height: auto; background: var(--soft); opacity: 0; transition: opacity .6s ease; }
img.in { opacity: 1; }

/* header: the site's own (logo · name · language), dark on the paper */
.top { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: max(20px, env(safe-area-inset-top)) 28px 14px;
  background: linear-gradient(#fffffff2 60%, #ffffff00); }
.brand img { width: 64px; background: none; opacity: 1; filter: invert(1) brightness(.12) sepia(1) hue-rotate(180deg) saturate(3); }
.who { display: flex; flex-direction: column; font: 500 13px/1.35 "Inter", sans-serif; } .who b { font-weight: 600; white-space: nowrap; } .who span { color: var(--ink2); }
.lng { margin-left: auto; padding: 9px 12px; border: 1px solid currentColor; border-radius: 40px; background: none; color: inherit; font: 600 12px/1 "Inter", sans-serif; letter-spacing: .1em; cursor: pointer; }
.lng:focus-visible, .chip:focus-visible, .tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- all works */
.work-head { padding-top: clamp(130px, 16vw, 230px); padding-bottom: clamp(28px, 3vw, 48px); row-gap: 18px; }
.work-head .label { grid-column: 1 / -1; }
.big { grid-column: 1 / -1; margin: 0; font: 850 clamp(84px, 15vw, 290px)/.86 "Coolvetica HC", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: -.005em; }
.big sup { margin-left: .12em; font: 500 clamp(16px, 1.4vw, 24px)/1 "Inter", sans-serif; letter-spacing: 0; vertical-align: top; position: relative; top: .5em; }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { padding: 11px 18px; border: 1px solid var(--line); border-radius: 40px; background: none; color: var(--ink); font: 500 14px/1 "Inter", sans-serif; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px) var(--g); padding: 0 var(--m); }
.tile { display: block; text-decoration: none; }
.tile[hidden] { display: none; }
.tile-img { display: block; overflow: hidden; aspect-ratio: 1400 / 1095; background: var(--soft); }
.tile-img img { height: 100%; object-fit: cover; transform: scale(1.001); transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.tile:hover .tile-img img { transform: scale(1.04); }
.tile-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.tile-meta b { font: 600 clamp(16px, 1.15vw, 20px)/1.25 "Inter", sans-serif; }
.tile-sub { margin-left: auto; color: var(--ink2); font-size: 14px; white-space: nowrap; }
.pill { flex: none; padding: 6px 10px 5px; border-radius: 40px; background: var(--ink); color: #fff; font: 600 11px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.work-foot { padding-top: clamp(60px, 7vw, 120px); padding-bottom: clamp(48px, 6vw, 100px); align-items: center; }
.back, .more { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.3 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.back:hover, .more:hover { text-decoration: underline; text-underline-offset: 4px; }
.work-foot .back { grid-column: 1 / 7; } .work-foot .more { grid-column: 7 / -1; justify-self: end; }

/* ---- one case: info on the left (sticky), the work on the right */
.case { padding-top: clamp(110px, 10vw, 150px); align-items: start; }
.info { grid-column: 1 / 5; position: sticky; top: 110px; display: grid; gap: 22px; padding-right: var(--g); padding-bottom: 40px; }
.info .back { margin-bottom: 18px; }
.title { margin: 0; font: 850 clamp(56px, 5.6vw, 110px)/.88 "Coolvetica HC", "Arial Narrow", sans-serif; text-transform: uppercase; }
.desc { margin: 0; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.info dt { color: var(--ink2); } .info dd { margin: 0; }
.btn { justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 17px 24px 16px; border-radius: 14px; background: var(--ink); color: #fff;
  font: 500 14px/1 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.btn:hover { transform: translateY(-2px); }
.media { grid-column: 5 / -1; display: grid; gap: clamp(10px, 1vw, 16px); padding-left: var(--g); border-left: 1px solid var(--line); }
.m { margin: 0; }
.mgrid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: clamp(8px, .8vw, 14px); }
.video { position: relative; display: block; overflow: hidden; }
.video img { transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.video:hover img { transform: scale(1.02); }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 13px; border-radius: 40px;
  background: #051727e0; color: #fff; font: 600 13px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 30px #05172740; }
.play svg { width: 14px; height: 14px; }

.next { margin-top: clamp(80px, 9vw, 160px); padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(56px, 6vw, 100px); border-top: 1px solid var(--line);
  text-decoration: none; align-items: end; row-gap: 14px; }
.next .label { grid-column: 1 / -1; }
.next-title { grid-column: 1 / 8; font: 850 clamp(64px, 9vw, 180px)/.86 "Coolvetica HC", "Arial Narrow", sans-serif; text-transform: uppercase; transition: color .3s; }
.next-img { grid-column: 9 / -1; overflow: hidden; aspect-ratio: 1400 / 1095; }
.next-img img { height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.next:hover .next-img img { transform: scale(1.04); }

/* ---- phones */
@media (max-width: 800px) {
  .top { padding: max(14px, env(safe-area-inset-top)) 16px 12px; }
  .brand img { width: 52px; }
  .tiles { grid-template-columns: 1fr; }
  .tile-meta { flex-wrap: wrap; row-gap: 6px; } .tile-sub { margin-left: 0; width: 100%; }
  .info { grid-column: 1 / -1; position: static; padding: 0 0 28px; }
  .media { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .work-foot .back, .work-foot .more { grid-column: 1 / -1; justify-self: start; } .work-foot { row-gap: 22px; }
  .next-title { grid-column: 1 / -1; } .next-img { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 380px) { .who { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { img, .tile-img img, .next-img img { transition: none; } }
.video.live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }   /* the still frame shows until the player starts */
.catalog-credit { grid-column:1/-1; margin:12px 0 0; font:12px/1.6 Inter,sans-serif; color:#677080; }
.catalog-count {grid-column:1/-1;margin:3px 0 0;color:var(--ink2);font-size:13px}
.tile-meta {align-items:flex-start;flex-wrap:wrap}.tile-meta .pill {max-width:100%;line-height:1.35}.tile-meta b {flex:1 1 200px}
.tile-img {aspect-ratio:4/3}.tile-img img {object-fit:cover;background:var(--soft)}
.media video {display:block;width:100%;height:auto;background:#071827;border:0}
.media figcaption {font:13px/1.5 Inter,sans-serif;color:var(--ink2);padding:12px 0}
.case-brief {font:14px/1.5 Inter,sans-serif;text-underline-offset:4px}
.related {border-top:1px solid var(--line);padding-top:28px;margin-top:20px;display:grid;gap:18px}
.related-link {display:grid;grid-template-columns:140px 1fr 16px;gap:20px;align-items:center;text-decoration:none;font:600 16px/1.3 Inter,sans-serif}
.related-link img {width:140px;aspect-ratio:8/5;object-fit:contain;background:#071827}
@media(max-width:600px){.related-link{grid-template-columns:100px 1fr 16px;gap:12px;font-size:14px}.related-link img{width:100px}.tile-meta{gap:8px}.pill{font-size:9px}.chips{gap:6px}.chip{font-size:12px;padding:10px 12px}.info{position:relative;top:auto}}