/* ============================================================
   WORK — index of projects, and the project page template.

   A separate stylesheet on purpose. index.html and exhibitions.html
   are approved and frozen; nothing here can reach them.

   Written in logical properties throughout, so the Hebrew build is a
   dir="rtl" attribute and nothing else. See BILINGUAL_REQUIREMENT.md.
   ============================================================ */

:root{
  /* Hebrew type — chosen 2026-09-23 after seeing three pairings in this
     page's own CSS rather than on a specimen sheet.

     The English page runs three voices: Space Grotesk for the headline,
     Fraunces italic for the client names, IBM Plex Mono for the small
     lines. Hebrew has no italic, so the middle voice needs a designed
     substitute rather than the same sans at another weight — otherwise
     the Hebrew page has one voice where the English has three, and the
     two builds stop being the same design.

     Rubik carries the headline: it is the widest, most confident Hebrew
     sans in the shortlist and the nearest thing to Space Grotesk's
     register. Frank Ruhl Libre carries the names — a real Hebrew serif
     with contrast, standing where Fraunces stands. IBM Plex Sans Hebrew
     carries the small lines: it is the same superfamily as the Latin
     IBM Plex Mono, so that role maps exactly across the two languages.

     The fallbacks stay for the swap period; only weight 300 of Rubik and
     400 of the other two are ever requested. */
  --sans-he:'Rubik','Rubik fallback','Segoe UI','Arial Hebrew','Noto Sans Hebrew',Arial,sans-serif;
  --mono-he:'IBM Plex Sans Hebrew','IBM Plex Sans Hebrew fallback','Segoe UI','Arial Hebrew','Noto Sans Hebrew',Arial,sans-serif;
  --serif-he:'Frank Ruhl Libre','Frank Ruhl Libre fallback','Segoe UI','Arial Hebrew','Noto Sans Hebrew',Georgia,serif;
}

html[lang="he"] body{ font-family:var(--sans-he); }

/* ------------------------------------------------------------
   Header legibility over the covers.

   The header is fixed and transparent, so every frame scrolls under
   it. Measured against the top band of all seven covers, the nav ran
   from 17:1 over the dark halls down to 1.56:1 over the Physics
   Olympiad facade and 1.00:1 at its worst pixel — invisible.

   Same device as the exhibitions page: a gradient scrim that belongs
   to the header, not to the images, so no photograph is altered and
   the bar keeps its height. Scoped here, so site.css is untouched.
   ------------------------------------------------------------ */
.page-work header.site::before,
.page-proj header.site::before{
  content:""; position:absolute; inset:0 0 auto 0;
  block-size:calc(100% + 34px); pointer-events:none; z-index:-1;
  background:linear-gradient(180deg,
    rgba(5,5,4,.86) 0%, rgba(5,5,4,.72) 40%, rgba(5,5,4,.34) 74%, rgba(5,5,4,0) 100%);
}

/* ------------------------------------------------------------
   Shared: the page opener used by both Work and a project page
   ------------------------------------------------------------ */
.w-open{ padding-block:calc(26px + 16vh) 0; }
.w-open h1{
  font-family:var(--sans); font-weight:300; font-size:clamp(30px,4.4vw,56px);
  line-height:1.08; letter-spacing:-.02em; color:var(--ivory);
  margin:0; max-inline-size:16ch; text-align:start;
}
html[lang="he"] .w-open h1{ font-family:var(--sans-he); font-weight:300; letter-spacing:0; }
.w-open p{
  font-family:var(--sans); font-weight:400; font-size:14px; letter-spacing:.02em;
  color:var(--ivory-dim); margin:18px 0 0; max-inline-size:46ch; line-height:1.55;
  text-align:start;
}
html[lang="he"] .w-open p{ font-family:var(--sans-he); letter-spacing:0; }

/* A project page's approved copy (2026-10-01): under the client name, one
   heading sentence and one paragraph. Same family and the same two colours as
   the opener; the heading sits between the name and the body in size, and the
   paragraph is set to be read (17-19px, 300) rather than at the 14px of the
   caption line it replaces. Measures keep both off the full 1382px wrap.
   Hebrew measures are in em, for the reason given at .page-work below: ch is
   the "0" of the latin subset, which a Hebrew page may not have yet.
     24ch x .616 = 14.78em      58ch x .616 = 35.73em   (Rubik 300 "0") */
.page-proj .w-open .p-title{
  font-family:var(--sans); font-weight:300; font-size:clamp(22px,2.2vw,32px);
  line-height:1.22; letter-spacing:-.01em; color:var(--ivory);
  margin:clamp(24px,3.4vh,36px) 0 0; max-inline-size:24ch; text-align:start;
  text-wrap:balance; /* two even lines, never one word left on the second */
}
.page-proj .w-open .p-text{
  font-family:var(--sans); font-weight:300; font-size:clamp(17px,1.3vw,19px);
  line-height:1.62; letter-spacing:0; color:var(--ivory-soft);
  margin:18px 0 0; max-inline-size:58ch; text-align:start;
}
html[lang="he"] .page-proj .w-open .p-title{ font-family:var(--sans-he); letter-spacing:0; line-height:1.3; max-inline-size:14.78em; }
html[lang="he"] .page-proj .w-open .p-text{ font-family:var(--sans-he); line-height:1.78; max-inline-size:35.73em; }

/* ------------------------------------------------------------
   WORK — the index
   Seven projects, one frame each, all the same size. An index carries
   no hierarchy between clients, so the frames must not imply one.
   ------------------------------------------------------------ */
.w-index{ margin-block-start:clamp(48px,7vh,90px); }

.w-item{
  display:block; text-decoration:none; color:inherit;
  border-block-start:1px solid var(--hair);
  padding-block:clamp(26px,3.4vh,42px) clamp(34px,4.4vh,56px);
}
.w-item:last-of-type{ border-block-end:1px solid var(--hair); }

.w-item .head{ margin-block-end:clamp(18px,2.2vh,28px); }
.w-item .name{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.3vw,44px); line-height:1.2; letter-spacing:-.01em;
  color:var(--ivory); margin:0; text-align:start;
}
html[lang="he"] .w-item .name{
  font-family:var(--serif-he); font-style:normal; font-weight:400; letter-spacing:0;
}

/* ------------------------------------------------------------
   A measure for the client name.

   Eleven names run from four characters to forty-six, and at one
   display size that was a 9.8x spread across the same column — the
   name looked like a different decision in every row, and every row
   was the same 944px tall. Giving the name a measure lets the long
   institutional names wrap on purpose. Nothing about the frames
   changes, so no client is ranked above another; the page simply
   stops being eleven identical blocks.

   One value serves both languages because ch is measured on each face's
   own zero: 20ch is 510px in Fraunces italic and 495px in Frank Ruhl
   Libre, which is the same measure expressed in each font's own terms.

   20ch rather than 18ch. Swept both at 1536: 18ch broke the longest
   name over three lines, and 20ch holds every name to two while still
   wrapping the Dermatology society, the President's office and the
   Physics Olympiad. Above 21ch only one row wraps at all and the page
   goes back to being one block repeated.

   Desktop only. The problem this solves is a 9.8x spread across a
   1367px column, and that does not exist on a phone: there the column
   is already narrower than the measure, and capping it only cost the
   longest name an extra line - 2 became 3 at 375. Below 768 the
   column is the measure.
   ------------------------------------------------------------ */
@media (min-width:768px){
  .w-item .name{ max-inline-size:20ch; }
}
/* The colour was never the problem here — ivory-dim on black measures
   9.57:1. What made these hard was 12px of monospace tracked out to
   .08em. A little more size, a little less tracking, and a line-height
   that is not "normal". */
.w-item .line{
  font-family:var(--mono); font-size:13px; letter-spacing:.045em; line-height:1.5;
  color:var(--ivory-dim); margin:12px 0 0; text-align:start;
}
html[lang="he"] .w-item .line{
  font-family:var(--mono-he); letter-spacing:0; font-size:14.5px; line-height:1.6;
}

.w-item figure{ margin:0; position:relative; overflow:hidden; background:var(--black-2); aspect-ratio:16/9; }
.w-item img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
  object-position:var(--focal-d,50% 50%);
  transform:scale(1.001);
  transition:transform 1.1s var(--ease-slow);
}
/* Two queries, not one. A plain (hover:hover) is also true on some touch
   laptops and stylus devices, which report hover support and then leave the
   element stuck in the hovered state because there is no pointer to move
   away. So hover:hover holds the image at rest and only (pointer:fine)
   actually moves it.

   1.015, not the 1.028 this rule used to carry. The home page prototype
   settled on 1.015 and this is the same photograph in the same frame one
   page over; two figures for one gesture is how a site starts to feel
   assembled rather than designed. */
@media (hover:hover){
  .w-item:hover img{ transform:scale(1.001); }
  .w-item:hover .name{ color:var(--gold); }
}
@media (hover:hover) and (pointer:fine){
  .w-item:hover img,
  .w-item:focus-visible img{ transform:scale(1.015); }
}
.w-item .name{ transition:color .5s var(--ease); }

/* ------------------------------------------------------------
   PROJECT PAGE — Teva is the template
   Two frame ratios only, inherited: 16:9 at full measure, 4:3 in pairs.
   ------------------------------------------------------------ */
.p-body{ margin-block-start:clamp(48px,7vh,90px); }

.p-slot{ margin-block-end:clamp(30px,4vh,52px); }
.p-slot figure{ margin:0; position:relative; overflow:hidden; background:var(--black-2); }
.p-slot img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
  object-position:var(--focal-d,50% 50%);
}
.p-slot.full figure{ aspect-ratio:16/9; }
.p-slot.pair{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,30px);
}
.p-slot.pair figure{ aspect-ratio:4/3; }
.p-slot .where{
  grid-column:1 / -1;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; line-height:1.5;
  color:var(--ivory-dim); margin:12px 0 0; text-align:start;
}
html[lang="he"] .p-slot .where{
  font-family:var(--mono-he); letter-spacing:0; font-size:14px; line-height:1.6;
}

/* ------------------------------------------------------------
   Going to the next project.

   This sat too close to the caption pattern: small mono label above a
   name in Fraunces italic is exactly how a captioned image reads, so
   the block looked like it belonged to the photograph above it rather
   than pointing away from the page. Three things separate them now —
   the label names the destination instead of saying "Next", the name
   carries a rule that no caption ever has, and the whole block is the
   link, with a section's worth of air above it.
   ------------------------------------------------------------ */
/* The margin here collapses against the last slot's, so it has to be the
   larger of the two on its own — measured at 54px before this was raised. */
/* ------------------------------------------------------------
   A turn inside a project — used where KPMG moves from one edition
   to the next. It is the page's existing vocabulary and nothing more:
   the same hairline that separates index rows, and one line in the
   same mono register the captions use. No new system, no new rule.
   ------------------------------------------------------------ */
.p-turn{
  border-block-start:1px solid var(--hair);
  margin-block-start:clamp(28px,4vh,48px);
  margin-block-end:clamp(30px,4vh,52px);
  padding-block-start:clamp(20px,2.6vh,32px);
}
.p-turn span{
  display:block; text-align:start;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; line-height:1.5;
  color:var(--ivory-dim);
}
html[lang="he"] .p-turn span{
  font-family:var(--mono-he); letter-spacing:0; font-size:14px; line-height:1.6;
}

.p-next{
  display:block; text-decoration:none; color:inherit;
  border-block-start:1px solid var(--hair);
  margin-block-start:clamp(64px,9vh,112px);
  padding-block:clamp(40px,5.6vh,72px) clamp(56px,10vh,110px);
}
.p-next .lead{
  display:block;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; line-height:1.5;
  color:var(--ivory-dim); margin:0 0 14px; text-align:start;
}
html[lang="he"] .p-next .lead{
  font-family:var(--mono-he); letter-spacing:0; font-size:14px; line-height:1.6;
}
/* Phone (2026-10-01): the two English mono labels go to 14px, the size the
   Hebrew already uses and the floor for labels on a phone. Desktop unchanged. */
@media (max-width:767px){
  .p-turn span, .p-next .lead{ font-size:14px; letter-spacing:.03em; }
}
.p-next .to{
  display:inline-block;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.4vw,32px); line-height:1.25; color:var(--ivory);
  border-block-end:1px solid var(--hair);
  padding-block-end:6px;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
html[lang="he"] .p-next .to{ font-family:var(--serif-he); font-style:normal; font-weight:400; }
@media (hover:hover){
  .p-next:hover .to{ color:var(--gold); border-block-end-color:var(--gold); }
}
.p-next:focus-visible .to{ color:var(--gold); border-block-end-color:var(--gold); }

/* The Work page closes with a contact invitation, not navigation to a
   sibling project. Same rhythm, but it is a sentence, not a name. */
.p-cta{
  border-block-start:1px solid var(--hair);
  margin-block-start:clamp(64px,9vh,112px);
  padding-block:clamp(40px,5.6vh,72px) clamp(56px,10vh,110px);
}
.p-cta .lead{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; line-height:1.5;
  color:var(--ivory-dim); margin:0 0 14px; text-align:start;
}
html[lang="he"] .p-cta .lead{
  font-family:var(--mono-he); letter-spacing:0; font-size:14px; line-height:1.6;
}
.p-cta a{
  display:inline-block; text-decoration:none;
  font-family:var(--sans); font-weight:300; font-size:clamp(20px,2.4vw,32px);
  line-height:1.25; color:var(--ivory);
  border-block-end:1px solid var(--hair); padding-block-end:6px;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
html[lang="he"] .p-cta a{ font-family:var(--sans-he); }
.p-cta a:hover, .p-cta a:focus-visible{ color:var(--gold); border-block-end-color:var(--gold); }

/* ------------------------------------------------------------
   Language switch — the target language, in its own script.
   Never a flag, never "EN | HE": the reader should not have to work
   out which one is currently active.
   ------------------------------------------------------------ */
header.site nav a.lang{ color:var(--ivory-dim); }
header.site nav a.lang:hover{ color:var(--ivory); opacity:1; }
html[lang="he"] header.site nav a{ font-family:var(--sans-he); letter-spacing:0; }
html[lang="he"] header.site .mark{ font-family:var(--sans); } /* the mark stays Latin */

/* ------------------------------------------------------------
   Phone — everything goes 4:3 and full bleed, as on every other page
   ------------------------------------------------------------ */
@media (max-width:767px){
  .w-open{ padding-block:calc(18px + 13vh) 0; }
  .w-item{ padding-block:22px 30px; }

  .w-item figure,
  .p-slot.full figure{
    inline-size:auto;
    margin-inline:calc(-1 * clamp(24px,5vw,84px));
    aspect-ratio:4/3;
  }
  .p-slot.pair{ grid-template-columns:1fr; gap:14px; }
  .p-slot.pair figure{
    inline-size:auto;
    margin-inline:calc(-1 * clamp(24px,5vw,84px));
    aspect-ratio:4/3;
  }
  .w-item img, .p-slot img{ object-position:var(--focal-m,50% 50%); }
  .p-slot{ margin-block-end:26px; }
}

@media (prefers-reduced-motion:reduce){
  .w-item img{ transition:none; }
  .w-item:hover img{ transform:none; }
}

/* ------------------------------------------------------------
   STAGE 4 - THE PROJECT LINE ON A PHONE

   The line under each client name was 13px mono at .045em. The name
   above it is 24px on a phone, so there was plenty of hierarchy to
   spend; the line could take a little size without ever competing.
   Hebrew already ran at 14.5px here, which is the size this is
   moving English towards rather than away from.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .w-item .line{ font-size:14px; letter-spacing:.035em; line-height:1.55; }
  html[lang="he"] .w-item .line{ font-size:15px; line-height:1.65; }
}

/* ============================================================
   STAGE 5 - MOTION ON THE WORK INDEX AND THE PROJECT PAGES

   Same contract as the home page, because it is the same system:
   every hidden state below hangs off html.js, which one line in
   the head sets before the first paint. With scripting off the
   rules never match, so nothing is ever hidden and there is no
   flash of content that then disappears.

   Only opacity and transform appear here. Nothing in this block
   can move the layout: the figures already carry aspect-ratio and
   the images already carry width and height, so every box is
   reserved before any of it starts and CLS stays at zero.
   ============================================================ */

/* The opener. One reveal for the heading and its sentence - this
   is a title, not a sequence, and staggering it would invent a
   rhythm the content does not have. */
html.js .w-open h1,
html.js .w-open h2,
html.js .w-open p{ opacity:0; transform:translateY(14px); }
html.js .w-open.in h1,
html.js .w-open.in h2,
html.js .w-open.in p{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
/* A project's approved heading and paragraph arrive with the line under the
   title: the same single reveal, not a second one. */
html.js .w-open.in h2,
html.js .w-open.in p{ transition-delay:.1s; }

/* The index carries the home page's order unchanged - name first,
   frame 120ms behind it - because it is the same object seen on a
   different page, and two different timings for one thing is how
   a site starts to feel assembled rather than designed. */
html.js .w-index .w-item .head{ opacity:0; transform:translateY(16px); }
html.js .w-index .w-item figure{ opacity:0; transform:translateY(16px); }
html.js .w-index .w-item.in .head{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
html.js .w-index .w-item.in figure{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease) .12s, transform .8s var(--ease) .12s;
}

/* Project frames. A full-measure frame is one reveal. A pair is one
   reveal with 80ms between the two, which reads as two frames that
   belong to each other rather than two things that happened to
   arrive together - the slot is observed as a unit, so the offset
   is a property of the pair and not of how fast someone scrolled.

   No continuous zoom and no parallax on a project page. The
   photograph is the subject here, and a subject that keeps moving
   while it is being looked at is just harder to look at. The hero
   on the home page earns its twenty-second settle because it is
   the first thing on the site; a project frame is not. */
html.js .p-slot figure{ opacity:0; transform:translateY(16px); }
html.js .p-slot.in figure{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
html.js .p-slot.pair.in figure:nth-of-type(2){ transition-delay:.08s; }
/* A project film button, when a project has one, belongs to the frame above
   it and arrives with it - the same frame-then-label order Exhibitions uses. */
html.js .p-slot .plays{ opacity:0; }
html.js .p-slot.in .plays{ opacity:1; transition:opacity .75s var(--ease) .1s; }

/* Reduced motion shows the rest state, not the end of a transition
   that was skipped. The global reset zeroes durations but still
   applies the final rule, so these have to be stated. */
@media (prefers-reduced-motion:reduce){
  html.js .w-open h1, html.js .w-open h2, html.js .w-open p,
  html.js .w-index .w-item .head, html.js .w-index .w-item figure,
  html.js .p-slot figure, html.js .p-slot .plays{
    opacity:1; transform:none; transition:none;
  }
}

/* ------------------------------------------------------------
   THE WORK HEADING, ONE LINE ON DESKTOP

   .w-open h1 carries a 16ch measure, which is right for a project
   page - those headings are client names and 16ch keeps them from
   running the full width of a 1367px wrap. The Work index heading
   is a sentence, and at 1536 it needs more:

     Hebrew   "פרויקטים והחללים שנבנו עבורם."   705px = 20.5ch
     English  "The rooms people were in."        677px = 19.0ch
     measure at 16ch                             552px / 572px

   Both were breaking to two lines. 21ch is the smallest whole
   value that clears the longer of the two, with 19px to spare;
   the type is untouched - same family, same weight, same
   clamp(30px, 4.4vw, 56px), same line-height and tracking.

   Scoped to .page-work so the eleven project pages keep the 16ch
   measure they were set with, and to min-width:768px so the phone
   keeps its own break - at 375 the wrap is narrower than 16ch
   anyway, so the measure is not what decides the break there.
   ------------------------------------------------------------ */
@media (min-width:768px){
  .page-work .w-open h1{ max-inline-size:21ch; }
}
/* The Work introduction is three sentences since 2026-10-01, so it is set to
   be read - the project paragraphs' style - rather than at the 14px of a
   caption line. Its measure is unchanged (46ch, and 29.21em in Hebrew, which
   scales with the new size). */
.page-work .w-open p{
  font-weight:300; font-size:clamp(17px,1.3vw,19px); line-height:1.62;
  letter-spacing:0; color:var(--ivory-soft);
}
html[lang="he"] .page-work .w-open p{ line-height:1.78; }

/* THE HEBREW WORK OPENER, MEASURED IN EM.
   ch is the width of "0", and in Hebrew the "0" lives in Rubik's latin
   subset, not the hebrew one that is preloaded. Until that file lands
   the measure is computed from the fallback's "0" - the heading and
   the lead rewrapped by 22-60px on a cold load, and in about one load
   in three at 1366 and 1536 the stale measure (588px) was never
   recomputed and the heading stayed on two lines.

   Same widths, stated in the element's own em so no glyph decides
   them. Measured with Rubik loaded: "0" is .616em at 300, .635em at
   400.
     16ch x .616 =  9.856em   (30px -> 295.68px)
     21ch x .616 = 12.936em   (56px -> 724.416px)
     46ch x .635 = 29.21em    (14px -> 408.94px)
   Hebrew Work only; English, About and the project pages keep ch. */
html[lang="he"] .page-work .w-open h1{ max-inline-size:9.856em; }
html[lang="he"] .page-work .w-open p{ max-inline-size:29.21em; }
/* A project page's description line (optional, first used 2026-09-30) is the
   one long Hebrew string under a project title, so it takes the same em
   measure for the same reason. English keeps the 46ch of .w-open p. */
html[lang="he"] .page-proj .w-open .p-desc{ max-inline-size:29.21em; }
@media (min-width:768px){
  html[lang="he"] .page-work .w-open h1{ max-inline-size:12.936em; }
  /* The project names, same reason: 20ch x .563 (Frank Ruhl Libre 400
     "0") = 11.26em, 495.44px at 44px. */
  html[lang="he"] .page-work .w-item .name{ max-inline-size:11.26em; }
}

/* Next project, and the invitation that closes the Work index. Both are the
   page's last gesture, so each gets one quiet reveal as a single unit - the
   label and the name are one thing to read, not two to animate. */
html.js .p-next,
html.js .p-cta{ opacity:0; transform:translateY(14px); }
html.js .p-next.in,
html.js .p-cta.in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  html.js .p-next, html.js .p-cta{ opacity:1; transform:none; transition:none; }
}