/* ============================================================
   TYPE AND LINKS — typography round, 2026-10-01

   The last stylesheet on every page (build-pages.ps1 and
   build-exhibitions.ps1 put it there). Nothing in site.css,
   work.css, home.css or pages.css was edited: every change of
   this round is in this one file, so it can be read, reviewed
   or reverted as a unit.

   1. ONE HEBREW FAMILY
   Measured before this round, a Hebrew page ran on three faces:
   Rubik 300 for headings and paragraphs, IBM Plex Sans Hebrew for
   the small lines, Frank Ruhl Libre for project names - plus the
   system fallback (Arial / Segoe UI) wherever a rule named a Latin
   family: the Exhibitions title, its "Selected work" label, the
   film buttons and its closing line were not in a webfont at all.
   Rubik at 300 is what read as thin and dated.

   Now every Hebrew role is IBM Plex Sans Hebrew. It was already
   the site's Hebrew caption face and it is the same superfamily
   as the IBM Plex Mono the English captions use. On a Hebrew page
   the Latin tokens point at it too, so a client name, an email or
   a year inside Hebrew copy is set in the same family (Plex's own
   Latin) instead of falling to a system font. The wordmark is an
   image and is not affected.

   Weight: only the 400 file is served, so every Hebrew request
   (300 included) renders at 400 - paragraphs and headings alike,
   which is the brief's starting point. Hebrew is never tracked.
   ============================================================ */
:root{
  --he:'IBM Plex Sans Hebrew','IBM Plex Sans Hebrew fallback','Segoe UI','Arial Hebrew','Noto Sans Hebrew',Arial,sans-serif;
  --sans-he:var(--he);
  --mono-he:var(--he);
  --serif-he:var(--he);

  /* The scale, by role. English and Hebrew differ by half a pixel to a pixel
     where Plex Hebrew sets visibly smaller than the Latin face beside it -
     matched by eye on the rendered pages, not by number. */
  --t-body:clamp(17px, 16px + .2vw, 18px);     /* reading paragraphs */
  --t-body-he:clamp(17px, 16.4px + .2vw, 18px);
  --t-action:15px;                             /* small actions: view project, play, copy, close */
  --t-action-he:16px;
  --t-nav:14px;                                /* header links */
  --t-nav-he:15px;
  --t-foot:15px;                               /* footer links */
  --t-foot-he:15.5px;
  --t-cap:13px;                                /* mono captions and labels, the floor */
  --t-cap-he:14.5px;
}
html[lang="he"]{
  --sans:var(--he);
  --mono:var(--he);
  --serif:var(--he);
}
html[lang="he"] body *{ letter-spacing:0 !important; font-style:normal; }

/* ------------------------------------------------------------
   2. READING PARAGRAPHS — 17px on a phone, 18px from ~1000px.
   Space Grotesk moves from 300 to 400 for running text only: at
   18px on near-black, 300 thinned out the same way Rubik 300 did.
   Display headings and statements keep their 300 - that is the
   site's voice at size, and it was never the legibility problem.
   ------------------------------------------------------------ */
.page-proj .w-open .p-text,
.page-work .w-open p,
.page-exh .e-offer .body,
.a-say p:not(.claim),
.a-steps dd,
.c-open .lead,
.c-col p, .c-col a.place, .c-col a.tel, .c-col p a{
  font-size:var(--t-body); font-weight:400; line-height:1.6;
}
html[lang="he"] :is(
  .page-proj .w-open .p-text,
  .page-work .w-open p,
  .page-exh .e-offer .body,
  .a-say p:not(.claim),
  .a-steps dd,
  .c-open .lead,
  .c-col p, .c-col a.place, .c-col a.tel, .c-col p a){
  font-size:var(--t-body-he); line-height:1.75;
}

/* ------------------------------------------------------------
   3. HEBREW HEADINGS AND NAMES
   Plex Hebrew at 400 is a little wider and a little taller than
   Rubik 300 was, so the em measures written for Rubik's "0" are
   restated for Plex (its "0" is .6em at 400). Project names drop a
   step on desktop, because an upright sans at Fraunces' size reads
   larger than the italic it stands in for.
   ------------------------------------------------------------ */
html[lang="he"] .w-item .name{ font-size:clamp(24px,2.9vw,40px); line-height:1.22; }
html[lang="he"] .p-next .to,
html[lang="he"] .h-all span,
html[lang="he"] .a-go span,
html[lang="he"] .c-next span{ font-size:clamp(20px,2.4vw,32px); }
html[lang="he"] .h-exh .go{ font-size:clamp(19px,2vw,26px); }
html[lang="he"] .h-hero h1{ line-height:1.12; }
html[lang="he"] .h-identity p{ line-height:1.45; max-inline-size:17em; }

/* ------------------------------------------------------------
   4. CAPTIONS AND LABELS — one floor
   ------------------------------------------------------------ */
.p-slot .where, .p-turn span, .p-next .lead, .p-cta .lead,
.h-trust h2, .h-authority p,
.page-exh .e-work > .wrap > h2,
:is(.page-exh,.page-proj) .lb-cap,
.site-foot .copy{ font-size:var(--t-cap); }
html[lang="he"] :is(
  .w-item .line, .p-slot .where, .p-turn span, .p-next .lead, .p-cta .lead,
  .h-trust h2, .h-authority p, .h-exh p,
  .page-exh .e-work > .wrap > h2, .page-exh .build figcaption,
  :is(.page-exh,.page-proj) .lb-cap,
  .site-foot .copy){ font-size:var(--t-cap-he); line-height:1.6; }

/* ------------------------------------------------------------
   5. ACTIONS — 15px English, 16px Hebrew
   The film buttons, Copy email, the gold button and Close were
   11-12.5px mono: legible as labels, too small to read as things
   you do. Same voice (mono in English), action size.
   ------------------------------------------------------------ */
:is(.page-exh,.page-proj) .plays .play,
:is(.page-exh,.page-proj) .lb-x,
.c-copy,
.page-exh .e-cta a.go{ font-size:var(--t-action); letter-spacing:.03em; }
:is(.page-exh,.page-proj) .plays .play .mk{ border-width:5px 0 5px 8px; }
html[lang="he"] :is(
  :is(.page-exh,.page-proj) .plays .play,
  :is(.page-exh,.page-proj) .lb-x,
  .c-copy, .c-live,
  .page-exh .e-cta a.go){ font-size:var(--t-action-he); }

/* header and footer links. The header height is locked (52 / 69), and the bar
   is its padding plus its tallest child - so the larger links get a pinned
   16px line box, the same one the menu button already has, and the bar does
   not grow by a pixel. */
header.site nav a,
header.site .narrow > .lang{ line-height:16px; }
header.site nav a{ font-size:var(--t-nav); }
html[lang="he"] header.site nav a{ font-size:var(--t-nav-he); }
.site-foot .f-nav a, .site-foot .f-mail a, .site-foot .f-social a{ font-size:var(--t-foot); }
html[lang="he"] :is(.site-foot .f-nav a, .site-foot .f-mail a, .site-foot .f-social a){ font-size:var(--t-foot-he); }
@media (max-width:767px){
  header.site .narrow > .lang{ font-size:14px; }
  html[lang="he"] header.site .narrow > .lang{ font-size:15px; }
  header.site .narrow .menu > summary{ font-size:13.5px; }
  html[lang="he"] header.site .narrow .menu > summary{ font-size:15px; }
}

/* ============================================================
   6. WHAT OPENS A PROJECT

   Every card whose image and title lead to a project page now
   says so, all the time: "View project" and an arrow, in the
   card's head, on every device - no hover needed to discover it.
   The card was already one link (image, name and line in one
   <a>), so the whole card stays the target; the label is the
   sign that it is one.

   Only real links carry it. Exhibition builds without a page,
   project-page photographs and the film buttons do not - a film
   is a play control with its own triangle, and opening a project
   is an arrow; the two never share a mark.
   ============================================================ */
.view{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:400; font-size:var(--t-action);
  letter-spacing:.02em; line-height:1.4; white-space:nowrap;
  color:var(--ivory);
  padding-block-end:5px; border-block-end:1px solid var(--hair-strong);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
html[lang="he"] .view{ font-size:var(--t-action-he); }
.view .arr{
  inline-size:18px; block-size:10px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease);
}
/* An arrow points where reading goes. Mirrored in Hebrew - unlike the play
   triangle, which follows playback and stays pointing right. */
[dir="rtl"] .view .arr, html[dir="rtl"] .view .arr{ transform:scaleX(-1); }

/* Hover and keyboard focus: the whole card answers - the name and the label
   warm to gold, the arrow steps forward 4px. Touch never enters this state. */
@media (hover:hover) and (pointer:fine){
  .w-item:hover .view, a.build:hover .view{ color:var(--gold); border-block-end-color:var(--gold); }
  .w-item:hover .view .arr, a.build:hover .view .arr{ transform:translateX(4px); }
  html[dir="rtl"] .w-item:hover .view .arr, html[dir="rtl"] a.build:hover .view .arr{ transform:scaleX(-1) translateX(4px); }
}
.w-item:focus-visible .view, a.build:focus-visible .view{ color:var(--gold); border-block-end-color:var(--gold); }
.w-item:focus-visible .name{ color:var(--gold); }

/* Home and Work cards: on desktop the label sits at the end of the head row,
   on the line under the name, so it lands right above the image's corner. */
.w-item .head{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(20px,3vw,48px); align-items:end; }
.w-item .head > .name, .w-item .head > .line{ grid-column:1; }
.w-item .head > .view{ grid-column:2; grid-row:1 / span 2; justify-self:end; align-self:end; }
@media (max-width:767px){
  .w-item .head{ display:block; }
  .w-item .head > .view{ margin-block-start:16px; }
}

/* Exhibitions: a build with a page carries the label on its caption row. */
.page-exh a.build figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 24px; }
.page-exh a.build figcaption .view{ font-family:var(--sans); letter-spacing:.02em; }
.page-exh a.build img{ transform:scale(1.001); transition:transform 1.1s var(--ease-slow); }
@media (hover:hover) and (pointer:fine){
  .page-exh a.build:hover img, .page-exh a.build:focus-visible img{ transform:scale(1.015); }
}
@media (prefers-reduced-motion:reduce){
  .view, .view .arr, .page-exh a.build img{ transition:none; }
}