/* Swiss grid: small stacked labels, very large tight type, one red accent. */
:root { --bg:#f4f4f2; --band:#dddcd8; --ink:#111110; --mute:#6c6b67; --red:#e0150c; --gut:clamp(16px,3vw,40px);
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.45 var(--sans); }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--red); }
a:focus-visible, button:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
h1,h2,h3,p { margin:0; }
[hidden] { display:none !important; }
img { display:block; max-width:100%; }

.top { display:grid; grid-template-columns:repeat(12,1fr); gap:0 16px; padding:20px var(--gut) 0; font-size:13px; font-weight:500; }
.mark { grid-column:1 / span 4; }
.top nav { grid-column:7 / span 3; display:flex; flex-direction:column; }
.top nav .on { color:var(--red); }
.place { grid-column:10 / span 3; text-align:right; }

.giant { font-size:clamp(48px,10.5vw,180px); font-weight:500; line-height:.95; letter-spacing:-.05em; padding:clamp(40px,7vw,90px) var(--gut) clamp(20px,3vw,36px); margin-left:-.04em; }
.giant.small { font-size:clamp(44px,7.5vw,128px); }
.label { color:var(--red); font-size:12px; font-weight:500; }

.art { margin-top:clamp(0px,1vw,12px); }
.art svg { display:block; width:100%; height:clamp(300px,40vw,680px); overflow:hidden; }
.art .spin-slow { transform-origin:470px 250px; animation:spin 90s linear infinite; }
.art .drift { transform-origin:800px 320px; animation:drift 24s ease-in-out infinite alternate; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes drift { to { transform:rotate(4deg); } }

.statement { display:grid; grid-template-columns:1fr minmax(0,4fr) 1fr; gap:16px; align-items:center; padding:clamp(72px,12vw,170px) var(--gut); }
.statement p { font-size:clamp(24px,3.3vw,46px); font-weight:500; line-height:1.04; letter-spacing:-.035em; text-align:center; text-wrap:balance; }
.side { font-size:12px; font-weight:500; }
.side:last-child { text-align:right; }

.band { background:var(--band); display:grid; grid-template-columns:repeat(12,1fr); gap:32px 16px; padding:clamp(40px,6vw,72px) var(--gut); align-items:start; }
.band-text { grid-column:1 / span 6; display:grid; gap:14px; }
.band-lead { font-size:clamp(20px,2.1vw,27px); font-weight:500; line-height:1.18; letter-spacing:-.02em; max-width:30em; }
.langs { color:var(--mute); font-size:13px; }
.band-img { grid-column:9 / span 4; width:100%; height:auto; filter:grayscale(1) contrast(1.05); }

.sheet { padding:clamp(64px,9vw,120px) var(--gut) 0; }
.sheet.first { padding-top:16px; }
.head { font-size:clamp(30px,4vw,54px); font-weight:500; letter-spacing:-.035em; line-height:1; }
.head-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.arrow { font-weight:500; font-size:14px; }
.arrow.more { display:inline-block; margin-top:48px; }

.cases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,5vw,72px) clamp(24px,8vw,120px); margin-top:clamp(32px,5vw,64px); }
.case { display:grid; grid-template-columns:1fr 1.6fr; gap:6px 20px; align-content:start; }
.case .label, .case h3 { grid-column:1 / -1; }
.case h3 { font-size:clamp(23px,2.3vw,30px); font-weight:500; line-height:1.12; letter-spacing:-.025em; margin-bottom:14px; }
.short { font-size:12px; font-weight:500; }
.long { font-size:13px; line-height:1.4; color:#3a3936; max-width:44ch; }

.selected { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:32px; align-items:start; }
.sel-big { grid-column:1 / span 8; }
.sel-small { grid-column:10 / span 3; display:grid; gap:24px; }
figure { margin:0; min-width:0; }
.tile, figure iframe { display:block; width:100%; aspect-ratio:16/9; border:0; background:var(--band); }
.tile { position:relative; overflow:hidden; }
.tile img { width:100%; height:100%; object-fit:cover; opacity:0; }
.tile.has-img img { opacity:1; }
.tile::after { content:""; position:absolute; inset:0; background:var(--red); mix-blend-mode:multiply; opacity:0; transition:opacity .2s; }
.tile:hover::after, .tile:focus-visible::after { opacity:1; }
figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:7px; font-size:13px; font-weight:500; line-height:1.25; }
.cap-len { white-space:nowrap; color:var(--red); font-variant-numeric:tabular-nums; }

.rows { list-style:none; margin:32px 0 0; padding:0; }
.rows li { display:grid; grid-template-columns:repeat(12,1fr); gap:4px 16px; padding:12px 0; border-top:1px solid var(--ink); font-size:14px; }
.rows li > :nth-child(1) { grid-column:1 / span 2; color:var(--red); font-weight:500; font-size:13px; }
.rows strong { grid-column:3 / span 4; font-weight:500; }
.rows li > :nth-child(3) { grid-column:7 / span 3; }
.rows li > :nth-child(4) { grid-column:10 / span 3; color:var(--mute); }

.tag { position:absolute; left:8px; top:8px; z-index:1; background:var(--bg); padding:2px 7px; font-size:11px; font-weight:600; }
.trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:32px; }

.player { position:fixed; inset:0; z-index:50; background:rgba(17,17,16,.88); display:grid; place-items:center; padding:56px 16px 16px; }
.player .close { all:unset; cursor:pointer; position:absolute; top:16px; right:20px; color:#f4f4f2; font-size:14px; font-weight:500; }
.player .frame { width:min(92vw,1100px); aspect-ratio:16/9; }
.player .frame.tall { width:min(92vw,420px); aspect-ratio:auto; height:min(84vh,760px); }
.player iframe { width:100%; height:100%; border:0; background:#fff; }

.posts li > :nth-child(3) { grid-column:7 / -1; color:var(--mute); }
.posts strong a:hover { color:var(--red); }
.intro { font-size:clamp(18px,1.8vw,22px); font-weight:500; letter-spacing:-.015em; margin-bottom:40px; max-width:32em; }
.cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 16px; }
.card a { display:grid; gap:8px; }
.card img, .card-art { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#e9e6df; }
.card strong { font-size:clamp(20px,1.9vw,26px); font-weight:500; letter-spacing:-.02em; line-height:1.15; }
.card .sum { color:var(--mute); font-size:14px; }
.card-art.n0 { background:radial-gradient(circle at 70% 35%,var(--red) 0 30%,transparent 30.5%),radial-gradient(circle at 25% 80%,#1d2a4d 0 22%,transparent 22.5%),#e9e6df; }
.card-art.n1 { background:radial-gradient(circle at 30% 40%,#e8841f 0 28%,transparent 28.5%),radial-gradient(circle at 80% 85%,var(--red) 0 25%,transparent 25.5%),#e9e6df; }
.card-art.n2 { background:radial-gradient(circle at 75% 20%,#1d2a4d 0 34%,transparent 34.5%),radial-gradient(circle at 30% 75%,#e8841f 0 16%,transparent 16.5%),#e9e6df; }
.card-art.n3 { background:radial-gradient(circle at 40% 55%,#1d4f9c 0 30%,transparent 30.5%),radial-gradient(circle at 78% 30%,var(--red) 0 9%,transparent 9.5%),#e9e6df; }

.post { max-width:760px; margin:0 auto; padding:clamp(48px,7vw,96px) var(--gut) 0; }
.post h1 { font-size:clamp(36px,5.5vw,72px); font-weight:500; letter-spacing:-.04em; line-height:1.02; margin:14px 0 18px; }
.post .lede { font-size:clamp(19px,1.8vw,23px); font-weight:500; letter-spacing:-.015em; line-height:1.3; color:#3a3936; }
.post .cover { width:100%; margin:36px 0 0; }
.post .body { margin-top:36px; font-size:17px; line-height:1.65; }
.post .body p, .post .body ul, .post .body ol, .post .body blockquote { margin:0 0 1.1em; }
.post .body h2 { font-size:26px; font-weight:500; letter-spacing:-.02em; margin:1.6em 0 .5em; }
.post .body img { margin:1.4em 0; }
.post .body a { color:var(--red); text-decoration:underline; text-underline-offset:3px; }
.post .body blockquote { border-left:3px solid var(--red); padding-left:18px; color:#3a3936; }
.post .label a:hover { text-decoration:underline; }

.filters { display:flex; flex-wrap:wrap; gap:4px 20px; margin-bottom:28px; }
.filters button { all:unset; cursor:pointer; font-size:13px; font-weight:500; }
.filters button:hover { color:var(--red); }
.filters button[aria-pressed="true"] { color:var(--red); text-decoration:underline; text-underline-offset:4px; }
.filters button:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.vgrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 16px; }
.vgrid .wide { grid-column:1 / span 3; grid-row:span 2; }

.foot { margin-top:clamp(72px,10vw,140px); background:var(--band); padding:clamp(40px,6vw,72px) var(--gut) 24px; }
.mail { font-size:clamp(24px,4.2vw,64px); font-weight:500; letter-spacing:-.04em; line-height:1.05; margin:10px 0 clamp(40px,6vw,72px); overflow-wrap:anywhere; }
.foot-links { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13px; font-weight:500; }

@media (max-width:760px) {
  .place { display:none; }
  .mark { grid-column:1 / span 6; }
  .top nav { grid-column:7 / -1; }
  .statement { grid-template-columns:1fr 1fr; }
  .statement p { grid-column:1 / -1; grid-row:1; }
  .band-text { grid-column:1 / -1; }
  .band-img { grid-column:1 / span 8; }
  .cases { grid-template-columns:1fr; }
  .case { grid-template-columns:1fr; }
  .short { margin-bottom:2px; }
  .sel-big, .sel-small { grid-column:1 / -1; }
  .sel-small { grid-template-columns:1fr 1fr; gap:24px 16px; }
  .sel-small figure:first-child { grid-column:1 / -1; }
  .rows strong, .rows li > :nth-child(1), .rows li > :nth-child(3), .rows li > :nth-child(4) { grid-column:1 / -1; }
  .vgrid { grid-template-columns:1fr 1fr; }
  .trio { grid-template-columns:1fr 1fr; }
  .trio figure:first-child { grid-column:1 / -1; }
  .cards { grid-template-columns:1fr; }
  .vgrid .wide { grid-column:1 / -1; grid-row:auto; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } }