/* ============================================================
   HOME — the opening page.

   A separate stylesheet, like work.css. It loads after site.css
   (tokens, header, footer) and after work.css, because the five
   selected projects reuse the Work index module exactly: the same
   hairline, the same client name, the same 16:9 full measure.

   That reuse is deliberate. The homepage is a short, curated
   reading of the Work index, not a second design language, so
   there is one vocabulary on the site instead of two.

   Everything here is written in logical properties, so the Hebrew
   build is a dir="rtl" attribute and nothing else.
   ============================================================ */

/* ------------------------------------------------------------
   The opening.

   One room, built and waiting. The headline sits on the same
   72px line the rest of the site aligns to, low in the frame,
   where the photograph is darkest.
   ------------------------------------------------------------ */
.h-hero{
  position:relative; overflow:hidden;
  min-block-size:min(92svh, 860px);
  display:flex; align-items:flex-end;
  background:var(--black-2);
}
.h-hero img{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  object-fit:cover; object-position:var(--focal-d,50% 46%);
  display:block;
}
/* Calibrated for this photograph and no other. The room is the reason the
   picture is here, so the wash is the lightest one that still clears 4.5:1
   under every letter - measured on the glyph pixels themselves, not on the
   band average, which a single bright lamp would flatter.

   The lighting truss keeps the top almost black, so the nav needs very
   little: the layer drops to 6% by the 16% mark and leaves the stage, the
   LED wall and the counters at full strength.

   The headline lands on open floor in the lower third. The magenta and warm
   pools on that floor are the brightest thing anywhere near a letter, and at
   a lighter setting one of them measured 2.32:1 behind a glyph while the
   average read a comfortable 13.4 - which is exactly why the average is not
   the test. The wash now starts climbing at 52% and reaches 82%: worst pixel
   5.10:1 at 1536x795 and 6.43:1 at 1536x860, with the text-shadow on top. */
.h-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,5,4,.42) 0%, rgba(5,5,4,.06) 16%, rgba(5,5,4,.16) 52%,
    rgba(5,5,4,.66) 74%, rgba(5,5,4,.82) 100%);
}
.h-hero .wrap{ position:relative; z-index:1; inline-size:100%; }
.h-hero h1{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(32px,5.2vw,68px); line-height:1.04; letter-spacing:-.025em;
  color:var(--ivory); margin:0 0 clamp(40px,7vh,88px);
  max-inline-size:17ch; text-align:start;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
html[lang="he"] .h-hero h1{ font-family:var(--sans-he); letter-spacing:0; }

/* ------------------------------------------------------------
   Identity — one sentence, and room around it.
   ------------------------------------------------------------ */
.h-identity{ padding-block:clamp(64px,11vh,132px); }
.h-identity p{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(20px,2.5vw,32px); line-height:1.36; letter-spacing:-.01em;
  color:var(--ivory); margin:0; max-inline-size:26ch; text-align:start;
}
html[lang="he"] .h-identity p{ font-family:var(--sans-he); letter-spacing:0; }

/* ------------------------------------------------------------
   Selected work.

   The five items are .w-item from work.css. Only the heading and
   the closing link belong here.
   ------------------------------------------------------------ */
.h-work h2,
.h-exh h2,
.h-close h2{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(22px,2.6vw,34px); line-height:1.2; letter-spacing:-.015em;
  color:var(--ivory); margin:0 0 clamp(26px,3.6vh,44px); text-align:start;
}
html[lang="he"] .h-work h2,
html[lang="he"] .h-exh h2,
html[lang="he"] .h-close h2{ font-family:var(--sans-he); letter-spacing:0; }

/* The way out of the five and into all of them. Same weight as a
   project name, so it reads as the last entry in the list rather
   than as a button bolted to the end. */
.h-all{
  display:block; text-decoration:none;
  border-block-start:1px solid var(--hair);
  padding-block:clamp(30px,4.4vh,54px) clamp(46px,8vh,92px);
}
.h-all span{
  display:inline-block;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.8vw,38px); line-height:1.2; color:var(--ivory);
  border-block-end:1px solid var(--hair); padding-block-end:7px;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
html[lang="he"] .h-all span{ font-family:var(--serif-he); font-style:normal; }
.h-all:hover span,
.h-all:focus-visible span{ color:var(--gold); border-block-end-color:var(--gold); }

/* ------------------------------------------------------------
   Exhibitions — one band, one image, one way through.
   ------------------------------------------------------------ */
.h-exh{ padding-block:clamp(50px,8vh,100px) clamp(60px,9vh,110px); border-block-start:1px solid var(--hair); }
.h-exh a{ display:block; text-decoration:none; color:inherit; }
.h-exh figure{
  margin:0 0 clamp(22px,3vh,34px); position:relative; overflow:hidden;
  background:var(--black-2); aspect-ratio:21/9;
}
.h-exh 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);
}
/* The exhibitions card was the last image on the site still moving to 1.03,
   and under a plain (hover:hover) - the query a touch laptop also satisfies,
   which would leave a finger stuck in the hovered state. Same two-query shape
   and the same 1.015 as every other image and link on the site. */
@media (hover:hover){ .h-exh a:hover img{ transform:scale(1.001); } }
@media (hover:hover) and (pointer:fine){
  .h-exh a:hover img,
  .h-exh a:focus-visible img{ transform:scale(1.015); }
}
.h-exh p{
  font-family:var(--mono); font-size:13px; letter-spacing:.045em; line-height:1.55;
  color:var(--ivory-dim); margin:0; max-inline-size:52ch; text-align:start;
}
html[lang="he"] .h-exh p{ font-family:var(--mono-he); letter-spacing:0; font-size:14.5px; }
.h-exh .go{
  display:inline-block; margin-block-start:clamp(18px,2.4vh,26px);
  font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.2vw,28px);
  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"] .h-exh .go{ font-family:var(--serif-he); font-style:normal; }
.h-exh a:hover .go,
.h-exh a:focus-visible .go{ color:var(--gold); border-block-end-color:var(--gold); }

/* ------------------------------------------------------------
   Trust and authority.

   Selected clients, as logos (approved 2026-09-29). One-colour ivory
   marks in a 5 x 2 grid. No cards, no rules between cells: the grid is
   carried by alignment alone, and nothing moves sideways. Each logo is
   sized by its own optical weight, not by a shared box - --w, set on
   the li from projects.json, is the width that gives it the same visual
   mass as its neighbours. The cell only places it.

   The marks sit at .74 of the ivory at rest so the band stays a quiet
   line of evidence under the work, never a second headline.
   ------------------------------------------------------------ */
.h-trust{ border-block-start:1px solid var(--hair); padding-block:clamp(40px,6vh,72px) clamp(14px,2vh,22px); }
.h-trust h2{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; line-height:1.5;
  color:var(--ivory-dim); margin:0 0 clamp(20px,2.6vh,30px); font-weight:400; text-align:start;
}
html[lang="he"] .h-trust h2{ font-family:var(--mono-he); letter-spacing:0; font-size:14px; }
.h-trust .clients{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(34px,5vh,58px) clamp(16px,2.4vw,40px);
  margin-block:clamp(14px,2.4vh,28px) clamp(26px,4vh,46px);
  list-style:none; padding:0;
}
.h-trust .clients li{
  display:flex; align-items:center; justify-content:center;
  block-size:clamp(64px,7.2vw,96px);
}
.h-trust .clients img{
  display:block; inline-size:min(calc(var(--w) * 1px * var(--k, 1)), 100%);
  block-size:auto; opacity:.74;
  transition:opacity .45s var(--ease);
}
/* A written name under a mark that does not carry its own (2026-10-01:
   the Dermatology emblem). Out of flow, so the emblem stays centred on the
   same line as its neighbours; the band's bottom margin makes room for up
   to two lines of it. */
.h-trust .clients:has(.with-cap){ margin-block-end:calc(clamp(26px,4vh,46px) + 44px); }
.h-trust .clients li.with-cap{ position:relative; }
.h-trust .clients .cap{
  position:absolute; inset-inline:0; inset-block-start:calc(100% + 6px);
  font-family:var(--sans); font-weight:400; font-size:13px; line-height:1.35; letter-spacing:.01em;
  color:var(--ivory-dim); text-align:center; text-wrap:balance;
}
html[lang="he"] .h-trust .clients .cap{ font-family:var(--sans-he); letter-spacing:0; font-size:14px; }
@media (max-width:767px){
  .h-trust .clients .cap{ font-size:14px; }
  html[lang="he"] .h-trust .clients .cap{ font-size:15px; }
}
/* Mid widths, where five columns narrow before the phone layout. */
@media (max-width:1180px){ .h-trust .clients{ --k:.84; } }
/* Desktop: the outer columns hold the text edges of the page, so the
   first mark starts where the heading starts and the last ends where the
   measure ends. Logical values, so Hebrew mirrors with no extra rule. */
@media (min-width:768px){
  .h-trust .clients li:nth-child(5n+1){ justify-content:flex-start; }
  .h-trust .clients li:nth-child(5n){ justify-content:flex-end; }
}
/* Mouse and trackpad only: a quiet lift in opacity. No colour, no
   scale, no movement. A touch device never enters this state. */
@media (hover:hover) and (pointer:fine){
  .h-trust .clients li:hover img{ opacity:1; }
}
/* Phone: two centred columns, smaller marks, no hover, nothing moves. */
@media (max-width:767px){
  .h-trust .clients{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 18px; --k:.64; }
  .h-trust .clients li{ block-size:62px; }
  .h-trust .clients img{ transition:none; opacity:.8; }
}
.h-authority{ padding-block:0 clamp(56px,9vh,104px); }
.h-authority p{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
  color:var(--ivory-dim); margin:0; text-align:start;
}
html[lang="he"] .h-authority p{ font-family:var(--mono-he); letter-spacing:0; font-size:14px; }

/* ------------------------------------------------------------
   The close.
   ------------------------------------------------------------ */
.h-close{ border-block-start:1px solid var(--hair); padding-block:clamp(56px,9vh,110px) clamp(64px,11vh,130px); }
.h-close h2{ font-size:clamp(26px,3.6vw,52px); margin-block-end:clamp(22px,3vh,34px); }
.h-close a{
  display:inline-block; text-decoration:none;
  font-family:var(--sans); font-weight:300; font-size:clamp(18px,2.1vw,26px);
  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"] .h-close a{ font-family:var(--sans-he); }
.h-close a:hover,
.h-close a:focus-visible{ color:var(--gold); border-block-end-color:var(--gold); }

/* ============================================================
   MOTION - balanced cinematic. Home page prototype only.

   Every hidden state below is scoped to html.js, and that class is set by
   one line in the head before first paint. The consequence matters: with
   scripting off the rules simply never match, so nothing is ever hidden and
   there is no flash of content that then vanishes. The older .no-js pattern
   could not do that - the class only comes off at the end of the body, which
   is after the first paint.

   Everything animates opacity and transform, so none of it can move the
   layout and CLS stays at zero. The boxes are all reserved before the motion
   starts: the figures carry aspect-ratio, the images carry width and height.
   ============================================================ */

/* ---- the opening headline, as before ---- */
.h-hero h1{ opacity:0; transform:translateY(14px); }
.h-hero.in h1{ opacity:1; transform:none; transition:opacity 1.1s var(--ease) .15s, transform 1.1s var(--ease) .15s; }
.no-js .h-hero h1{ opacity:1; transform:none; }

/* ---- the hero settles once ----
   1.00 to 1.035 over twenty seconds and then it stops. Linear, because over
   that duration any easing is below the threshold of noticing and linear is
   what a slow dolly actually does.

   It starts on the image's load event, never before, so it cannot compete
   with the LCP paint. transform does not touch object-position, so the crop
   and the focal point are exactly what was approved; the picture grows
   inside a box that already clips it, so no edge can ever appear. The
   headline and the header are outside the transformed element and do not
   move by a pixel. */
.h-hero img{ transform:scale(1); transform-origin:50% 50%; }
html.js .h-hero.settled img{ transform:scale(1.035); transition:transform 20s linear; }

/* ---- one reveal each, on the way in ---- */
html.js .h-identity p{ opacity:0; transform:translateY(16px); }
html.js .h-identity.in p{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}

/* The name lands first and the photograph follows it by 120ms. That order is
   the whole idea: it reads like a caption being spoken before a curtain
   opens, which is the company's own work. The figure moves, not the image
   inside it, so the frame never shows a strip of background at its edge. */
html.js .h-work .w-item .head{ opacity:0; transform:translateY(16px); }
html.js .h-work .w-item figure{ opacity:0; transform:translateY(16px); }
html.js .h-work .w-item.in .head{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
html.js .h-work .w-item.in figure{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease) .12s, transform .8s var(--ease) .12s;
}

/* The client band enters once, as one section: the same opacity and 16px
   rise as every other reveal, no stagger between the marks. */
html.js .h-trust .wrap{ opacity:0; transform:translateY(16px); }
html.js .h-trust.in .wrap{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}

/* ---- hover, desktop pointers only ----
   pointer:fine as well as hover:hover, so a device that merely reports hover
   support - some touch laptops and stylus devices do - does not get a state
   it cannot leave. 1.015 rather than the 1.028 the Work index still uses;
   this is the prototype, and the two will be reconciled when the system is
   propagated.

   The affordance is a real underline on the name, not an arrow bolted to the
   text. It matches the word exactly, it needs no extra element, and it
   mirrors itself in Hebrew with no extra code. Colour is a paint change, not
   a layout one, so it costs nothing. */
/* work.css raises the Work index image to 1.028 under a plain (hover:hover).
   A touch laptop or a stylus reports hover support with a coarse pointer, so
   that rule would fire on the home page for a finger that cannot leave the
   state again. Held at rest for those devices first, then raised only where
   the pointer is genuinely fine. Equal specificity, so source order decides
   and this file is loaded last. */
@media (hover:hover){
  .page-home .w-item:hover img{ transform:scale(1.001); }
}
@media (hover:hover) and (pointer:fine){
  .page-home .w-item:hover img,
  .page-home .w-item:focus-visible img{ transform:scale(1.015); }
  .page-home .w-item:hover .name,
  .page-home .w-item:focus-visible .name{ color:var(--gold); text-decoration-color:var(--gold); }
}
.page-home .w-item .name{
  text-decoration:underline; text-decoration-color:transparent;
  text-decoration-thickness:1px; text-underline-offset:6px;
  transition:color .5s var(--ease), text-decoration-color .5s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .h-hero h1{ opacity:1; transform:none; }
  .h-hero.in h1{ transition:none; }
  .h-exh img{ transition:none; }
  .h-exh a:hover img{ transform:none; }
  /* The photograph holds still. Not slower - still. */
  html.js .h-hero.settled img{ transform:scale(1); transition:none; }
  html.js .h-identity p,
  html.js .h-work .w-item .head,
  html.js .h-work .w-item figure,
  html.js .h-trust .wrap{ opacity:1; transform:none; transition:none; }
  .h-trust .clients img{ transition:none; }
  .page-home .w-item .name{ transition:none; }
  .page-home .w-item:hover img,
  .page-home .w-item:focus-visible img{ transform:none; }
}

/* ------------------------------------------------------------
   Phone
   ------------------------------------------------------------ */
@media (max-width:767px){
  .h-hero{ min-block-size:min(84svh, 620px); }
  .h-hero img{ object-position:var(--focal-m,50% 46%); }
  .h-exh figure{ aspect-ratio:4/3; inline-size:auto; margin-inline:calc(-1 * clamp(24px,5vw,84px)); }
}

/* There used to be a second wash here, deepened only below 375. It existed
   because the header wrapped onto two rows at those widths and dropped the
   nav out of the dark band at the top and into the lighting truss, where the
   worst pixel behind a nav letter measured 4.24:1.

   The header stopped wrapping when the phone menu replaced the inline row, so
   the nav sits in the darkest band again: the chrome moved from 18-53px to
   18-39px, 8.2% of the hero instead of 11%. Measured at 320 without the extra
   wash - nav 7.65:1, headline 10.70:1 - so it was no longer doing any work,
   and a layer that darkens a photograph for no reason is a layer to remove.
   Deleted 2026-09-23 on Liran's ruling. The single calibrated wash above is
   unchanged and is the only one. */

/* ------------------------------------------------------------
   STAGE 4 - PHONE LEGIBILITY AND THE BOTTOM OF THE PAGE

   Measured at 375 before any of this: the exhibition paragraph and
   every project line sat at 13px of mono tracked out to .045em. That
   size is fine on a 27" display at a desk and it is not fine on a
   phone held at arm's length, which is where most of this page is
   read. Hebrew was already carrying its own larger size for the same
   strings (14.5px), so English was the outlier, not the rule.

   The bottom of the page had a second, separate fault. "Selected
   clients" closes with a wrapped list of 15px names; "Founded 1999."
   follows at 12.5px with 16px of air between them. Two quiet lines
   of near-identical size, 16px apart, stop reading as two statements
   and start reading as one paragraph that lost its way. The founding
   line is a separate beat and now gets the space to be one.

   Nothing here touches the desktop layout, the hero, the focal
   points or the order of the work.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .h-exh p{ font-size:15px; letter-spacing:.03em; line-height:1.6; }
  html[lang="he"] .h-exh p{ font-size:15.5px; line-height:1.72; }

  /* The row gap that used to sit here belonged to the old wrapped list of
     names; the logo band carries its own phone grid above. */
  .h-authority{ padding-block-start:clamp(34px,4.6vh,44px); }
}