/* census — one-to-one after ref-1 (Heidlmair Kommunikation, Index/).
   8 independent columns, one small type size, dark labels under photos,
   grey standalone data blocks, CPI-style figures with decimal commas,
   records repeating down the page — and the giant two-line headline sitting
   ON TOP of everything, exactly as in the reference. */

/* Hebrew renders in Narkiss Block, Latin stays in the grotesk —
   the unicode-range split does it per-glyph */
@font-face{ font-family:"Narkiss Hebrew"; src:url(/brand/fonts/NarkisBlock-Regular.woff2) format("woff2");
  font-weight:400; unicode-range:U+0590-05FF; font-display:swap; }
@font-face{ font-family:"Narkiss Hebrew"; src:url(/brand/fonts/NarkisBlock-Bold.woff2) format("woff2");
  font-weight:700; unicode-range:U+0590-05FF; font-display:swap; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:#fff; }
body{
  font-family:"Narkiss Hebrew","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; color:#111;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ---------- header, as in the reference ---------- */
/* the logo sits exactly on the sheet's frame line — same padding as the table */
#top{
  position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:12px 22px 0;
  pointer-events:none;
}
#logo{ font-weight:700; font-size:16px; line-height:1.12; letter-spacing:-.01em; }
/* ---------- the sheet: 7 ragged columns, filled ROW-FIRST ----------
   JS deals the records round-robin, so the top row holds the seven most
   important works and importance descends line by line — while each column
   keeps its own independent height, as in the reference. */
#sheet{
  display:grid; grid-template-columns:repeat(7,1fr);
  column-gap:36px; align-items:start;
  padding:12px 22px 140px;
}
#sheet .col{ min-width:0; }
@media (max-width:1200px){ #sheet{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){ #sheet{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ #sheet{ grid-template-columns:repeat(2,1fr); column-gap:18px; } }

.rec{ break-inside:avoid; margin-bottom:52px; }
.rec.clickable{ cursor:pointer; }
.rec img{ display:block; width:100%; height:auto; object-fit:contain;
  margin-bottom:10px;
  border:1px solid #e9e9e6;   /* hairline — defines the white images against the page */
  filter:none !important; transform:none !important; }

.rec .lbl{ font-size:11.5px; line-height:1.5; letter-spacing:.01em; margin-bottom:8px;
  text-align:left; white-space:pre-line; unicode-bidi:plaintext; }
.rec .fig{ font-size:11.5px; line-height:1.5; letter-spacing:.01em; color:#9a9a9a;
  text-align:left; white-space:pre-line; unicode-bidi:plaintext; }

/* a photo record speaks in ink; a standalone data record in grey */
.rec.photo .lbl{ color:#141414; }
.rec.data .lbl{ color:#a3a3a3; }
.rec.data .fig{ color:#a3a3a3; }

/* the closing about record reads as running text, not as a word stack */
.rec.about{ cursor:default; }
.rec.about .lbl{ text-align:start; line-height:1.6; }
.rec.clickable:hover .lbl{ text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; }

/* the first records leave room for the logo, like the reference's first column */
#sheet .spacer{ height:96px; break-inside:avoid; }

/* ---------- the giant headline — ON TOP, as in the reference ---------- */
#giant{
  position:absolute; z-index:20; left:21vw; top:34vh;
  pointer-events:none;
  font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:600; font-size:12vw; line-height:1.06; letter-spacing:-.032em;
  color:#000; white-space:nowrap;
}
#giant span{ display:block; }

/* ---------- panel ---------- */
#panel{ position:fixed; inset:0; z-index:60; }
#panelScrim{ position:absolute; inset:0; background:rgba(17,17,14,.55); }
#panelBody{
  position:absolute; inset-block:0; inset-inline-start:0;
  width:min(720px,94vw); background:#fff; color:#111;
  overflow-y:auto; padding:56px clamp(22px,5vw,64px) 90px;
  font-family:"Narkiss Block","Heebo",Arial,sans-serif;
}
@font-face{ font-family:"Narkiss Block"; src:url(/brand/fonts/NarkisBlock-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Narkiss Block"; src:url(/brand/fonts/NarkisBlock-Bold.woff2) format("woff2"); font-weight:700; font-display:swap; }
#panelBody h2{ font-size:34px; line-height:1.1; margin-bottom:6px; }
#panelBody .meta{ font-size:14px; opacity:.6; margin-bottom:26px; }
#panelBody p{ font-size:16px; line-height:1.65; margin-bottom:14px; max-width:60ch; }
#panelBody .blk{ margin:26px 0; }
#panelBody .blk img, #panelBody .blk video{ display:block; width:100%; height:auto; }
#panelBody .gal{ display:grid; gap:10px; }
#panelBody .yt{ position:relative; padding-top:56.25%; }
#panelBody .yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
#panelBody .lnk{ display:inline-block; margin-top:4px; font-size:15px; color:#111; }
#panelClose{ position:fixed; top:18px; inset-inline-end:22px; z-index:61;
  font-size:26px; background:none; border:0; color:#fff; cursor:pointer; }