/* ============================================================
   ABOUT and CONTACT.

   Loaded after site.css and work.css, and it adds no new vocabulary:
   the same measure, the same hairline, the same two type roles. These
   two pages are quieter than the rest of the site on purpose - one is
   an explanation and the other is an address - so the only thing they
   spend is space.

   Logical properties throughout, so the Hebrew build is a dir="rtl"
   attribute and nothing else.
   ============================================================ */

body.page-about,
body.page-contact{ background:var(--black); }

/* The fixed header has to be cleared: these pages have no hero to sit
   under it. 69px is the header at its tallest plus its breathing room,
   matched to the Work index head. */
.page-about main,
.page-contact main{ padding-block-start:calc(69px + min(6vh,64px)); }

/* ------------------------------------------------------------
   ABOUT - the opening.

   The sentence comes before the photograph. "From ambition to the
   moment it becomes real" is an order of events, so the page is read
   in that order: the claim, then the room that proves it. It also
   means no scrim is needed here - the headline is on black, where it
   is simply legible, and the photograph is never dimmed to carry text.
   ------------------------------------------------------------ */
.a-open h1{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(30px,4.4vw,58px); line-height:1.06; letter-spacing:-.022em;
  color:var(--ivory); margin:0; max-inline-size:20ch; text-align:start;
}
html[lang="he"] .a-open h1{ font-family:var(--sans-he); letter-spacing:0; line-height:1.14; }

/* One fact, set as a fact. It earns the mono face the way a caption
   does - it is data, not prose. */
/* Given a little more room and a little more weight than a caption. It is
   the only hard fact on the page and it was reading as a note under the
   headline rather than as a statement of record. Still mono, still quiet -
   the extra space above it does most of the work, not the size. */
.a-open .founded{
  font-family:var(--mono); font-size:14px; letter-spacing:.05em; line-height:1.5;
  color:var(--ivory-dim); margin:clamp(26px,3.4vh,38px) 0 0; text-align:start;
}
html[lang="he"] .a-open .founded{ font-family:var(--mono-he); letter-spacing:0; font-size:15.5px; }

/* Same max-width and same gutter as .wrap, so the photograph starts on the
   line the headline starts on. Using the slot's own 1392px measure here
   would centre it 72px inside the text at 1536 and break the alignment the
   rest of the site is built on. */
.a-open figure{
  margin:clamp(34px,5vh,64px) auto 0; max-inline-size:1560px;
  padding-inline:clamp(24px,5vw,84px);
  position:relative;
}
/* block-size:auto is not decoration. The width and height ATTRIBUTES on the
   img become a presentational height of 1365px, which is a definite height,
   and a definite height makes the browser ignore aspect-ratio entirely - the
   frame came out 1367x1365 instead of 16:9. Releasing the height lets the
   ratio do its job, and the attributes still do theirs: they reserve the
   right box before the file lands, which is what keeps CLS at zero. */
.a-open figure img{
  inline-size:100%; block-size:auto; aspect-ratio:16/9;
  object-fit:cover; display:block;
  object-position:var(--focal-d,50% 50%); background:var(--black-2);
}

/* ------------------------------------------------------------
   ABOUT - what the company is.

   Body measure is held under 70 characters. The last line is set
   larger because it is the claim the rest of the page supports, not
   because it is the last line.
   ------------------------------------------------------------ */
.a-say{ padding-block:clamp(52px,8vh,104px) 0; }
.a-say p{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(17px,1.55vw,21px); line-height:1.58; letter-spacing:-.003em;
  color:var(--ivory); margin:0 0 clamp(20px,2.6vh,30px);
  max-inline-size:62ch; text-align:start;
}
html[lang="he"] .a-say p{ font-family:var(--sans-he); letter-spacing:0; line-height:1.72; }
/* 26ch broke this sentence into three lines and left "handover." alone on
   the last one - a weak rag under the one claim the whole page supports.
   Swept the values rather than guessing: 26ch gives 31/27/9, 34ch gives
   46/22, and everything from 28ch to 32ch gives the same clean two lines,
   37 and 31 characters. 30ch sits in the middle of that band, so a font
   metric that loads a little wider or narrower cannot tip it into three
   lines or into a lopsided break. The Hebrew keeps its own 24ch, where the
   sentence already broke cleanly in two, and on a phone the viewport is
   narrower than either value so nothing there changes. */
.a-say .claim{
  font-size:clamp(21px,2.4vw,32px); line-height:1.32; letter-spacing:-.012em;
  color:var(--ivory); max-inline-size:30ch;
  margin-block-start:clamp(30px,4.4vh,52px); margin-block-end:0;
}
html[lang="he"] .a-say .claim{ letter-spacing:0; line-height:1.44; max-inline-size:24ch; }

/* ------------------------------------------------------------
   ABOUT - the four stages as one system (approved 2026-09-30).

   One photograph and one line. The four stages hang from a single
   hairline that runs the full height of the photograph beside it - the
   line is the process, so the stages read as one continuous run rather
   than four services in a table. No numbers, no icons, no cards: each
   stage is marked only by a short tick where it meets the line.

   A definition list still, because that is what it is: a term and what
   it means here. Everything is logical, so in Hebrew the photograph
   moves to the right and the line runs down the right-hand edge.
   ------------------------------------------------------------ */
.a-steps{ padding-block:clamp(56px,9vh,112px) 0; }
.a-steps .flow-img{ margin:0; }
.a-steps .flow-img img{
  display:block; inline-size:100%; block-size:auto;
  aspect-ratio:4/3; object-fit:cover;
  object-position:var(--focal-m,50% 50%); background:var(--black-2);
}
.a-steps dl{
  margin:0; border-inline-start:1px solid var(--hair);
  display:flex; flex-direction:column;
}
.a-steps .step{ position:relative; padding-inline-start:clamp(26px,2.6vw,40px); }
/* The tick: level with the first line of the term. */
.a-steps .step::before{
  content:""; position:absolute; inset-inline-start:0;
  inset-block-start:.78em; inline-size:14px; block-size:1px;
  background:var(--ivory-dim); opacity:.55;
}
.a-steps dt{
  font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.6vw,22px);
  letter-spacing:.005em; color:var(--ivory); text-align:start;
  margin:0 0 clamp(8px,1vh,12px);
}
html[lang="he"] .a-steps dt{ font-family:var(--sans-he); letter-spacing:0; }
/* balance: when a stage sentence breaks, both lines carry weight - no
   single word left alone under it. A browser without it wraps as before. */
.a-steps dd{
  margin:0; font-family:var(--sans); font-weight:300;
  font-size:clamp(16px,1.45vw,19px); line-height:1.56; letter-spacing:-.003em;
  color:var(--ivory-dim); max-inline-size:44ch; text-align:start; text-wrap:balance;
}
/* Hebrew: no ch here. ch is measured on the Latin zero, which loads in a
   different font file, so a ch width in Hebrew moves when that file lands
   (the Work page CLS lesson). The column is the measure instead. */
html[lang="he"] .a-steps dd{ font-family:var(--sans-he); letter-spacing:0; line-height:1.7; max-inline-size:none; }

/* 768 to 1023: stacked - a half column is too narrow here for the stages
   to breathe beside the photograph - inside the measure, at 16:9. */
@media (min-width:768px) and (max-width:1023px){
  .a-steps .flow-img{ margin-block-end:clamp(40px,5vh,56px); }
  .a-steps .flow-img img{ aspect-ratio:16/9; }
  .a-steps dl{ gap:36px; padding-block:4px; }
}
/* From 1024: two equal halves. The photograph goes square so it stands
   beside the column, and the spine stretches to its exact height - the
   stages spread evenly from its top edge to its bottom edge. */
@media (min-width:1024px){
  .a-steps .flow{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(40px,6vw,112px); align-items:stretch;
  }
  .a-steps .flow-img img{ aspect-ratio:1/1; object-position:var(--focal-d,50% 50%); }
  .a-steps dl{ justify-content:space-between; gap:clamp(28px,3.4vh,40px); padding-block:clamp(6px,1vh,12px); }
}

/* The way out, in the same voice as the other exits on the site. */
.a-go{
  display:inline-block; text-decoration:none;
  margin-block-start:clamp(40px,6vh,72px); margin-block-end:clamp(64px,11vh,130px);
}
.a-go span{
  display:inline-block;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.6vw,34px); 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"] .a-go span{ font-family:var(--serif-he); font-style:normal; }
.a-go:hover span, .a-go:focus-visible span{ color:var(--gold); border-block-end-color:var(--gold); }

/* ------------------------------------------------------------
   CONTACT.

   No photograph and no form. Until a real backend is chosen, a form
   would either pretend to send or hand the reader to a mail client
   that may not exist - so the address IS the interface, set at
   heading size with a working mailto behind it.

   The page is deliberately sparse. After eleven projects, one page
   that is an address and air reads as a direct line rather than more
   portfolio.
   ------------------------------------------------------------ */
.c-open h1{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(30px,4.4vw,58px); line-height:1.06; letter-spacing:-.022em;
  color:var(--ivory); margin:0; max-inline-size:18ch; text-align:start;
}
html[lang="he"] .c-open h1{ font-family:var(--sans-he); letter-spacing:0; line-height:1.14; }

.c-open .lead{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(17px,1.55vw,21px); line-height:1.58;
  color:var(--ivory-dim); margin:clamp(22px,3vh,32px) 0 0;
  max-inline-size:56ch; text-align:start;
}
html[lang="he"] .c-open .lead{ font-family:var(--sans-he); line-height:1.72; }

/* The address carries the page, so it is set like a heading and not
   like a link in a paragraph. dir="ltr" on the anchor keeps it intact
   in the Hebrew build, where an address must not be reordered. */
.c-open .addr{ margin:clamp(40px,6vh,72px) 0 0; text-align:start; }
.c-open .addr a{
  display:inline-block; text-decoration:none;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(26px,4.2vw,54px); line-height:1.1; letter-spacing:-.02em;
  color:var(--ivory);
  border-block-end:1px solid var(--hair); padding-block-end:8px;
  transition:color .5s var(--ease), border-color .5s var(--ease);
  overflow-wrap:anywhere;
}
.c-open .addr a:hover, .c-open .addr a:focus-visible{ color:var(--gold); border-block-end-color:var(--gold); }

/* A quiet text button, not a filled pill - nothing else on this site
   is a pill. It ships hidden and the script reveals it, so without
   JavaScript there is no button that cannot do anything. */
.c-copy{
  appearance:none; background:none; border:0;
  display:inline-block; margin-block-start:clamp(18px,2.4vh,26px);
  padding-block:12px; padding-inline:0; cursor:pointer;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
  color:var(--ivory-dim); text-align:start;
  border-block-end:1px solid var(--hair);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
html[lang="he"] .c-copy{ font-family:var(--mono-he); letter-spacing:0; font-size:14px; }
.c-copy:hover, .c-copy:focus-visible{ color:var(--ivory); border-block-end-color:var(--gold); }
.c-copy[hidden]{ display:none; }

/* The confirmation. It holds its own height so that saying "Copied"
   cannot push the page down - this is the one place on these pages
   where content appears after load. */
.c-live{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
  color:var(--gold); margin:10px 0 0; min-block-size:1.5em; text-align:start;
}
html[lang="he"] .c-live{ font-family:var(--mono-he); letter-spacing:0; font-size:14px; }

/* ------------------------------------------------------------
   CONTACT - one composition (second pass, 2026-09-30).

   The first pass held the email alone on a 720px first screen and put
   the details a screen below it, in 19px under a rule - it read as a
   statement, a gap, and a footer. Now the page is a single spread:

     from 1024   statement + email + copy  |  the ledger
                 (7 : 5, both starting on the heading's line)
     768-1023    statement, then the ledger as a 2 x 2 grid
     phone       statement, then the ledger, one entry per row

   The ledger is four entries under hairlines - the studio, the
   exhibitions desk, the social names, and the way on to the work - each
   opening on an ivory line at reading size, not caption size. The email
   stays the largest thing on the page by a factor of two.

   Studio links: at the smallest size the address line is 18px x 1.4 plus a
   3px underline, so an 18px gap puts the telephone's centre at least 46px
   below the address's - the two 45px targets never overlap.

   The exhibitions address always takes its own line. Sharing a line with
   the sentence before it made the ledger's height depend on whether the
   webfont had arrived: in Hebrew the fallback wrapped it, and the swap
   pulled everything below up by a line (CLS up to .058).
   ------------------------------------------------------------ */
.c-page{ padding-block-end:clamp(72px,10vh,120px); }
.c-page > .wrap{ display:grid; grid-template-columns:minmax(0,1fr); }
.c-open .addr{ margin-block-start:clamp(36px,5vh,56px); }

.c-info{
  display:grid; grid-template-columns:minmax(0,1fr);
  margin-block-start:clamp(32px,4.5vh,48px);
}
.c-col{
  margin:0; text-align:start;
  border-block-start:1px solid var(--hair);
  padding-block:24px 28px;
}
.c-next{ padding-block:26px 0; }

@media (min-width:768px) and (max-width:1023px){
  .c-info{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; }
}
@media (min-width:1024px){
  .c-page > .wrap{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(56px,6vw,120px); align-items:start;
  }
  /* The ledger's first hairline sits level with the top of the heading. */
  .c-info{ margin-block-start:clamp(6px,.8vw,12px); }
  .c-col{ padding-block:26px 30px; }
  .c-next{ padding-block:30px 0; }
}

/* Every ledger entry opens on an ivory heading - since 2026-10-01 the studio
   has its own ("Studio" / "סטודיו") - and its content is set in the reading
   style below. The address and the telephone keep 18px between them, so
   their 45px targets stay apart at every size (17px x 1.56 + 3px underline
   + 18 = 47.5px centre to centre at the smallest). */
.c-info h2{
  font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.5vw,22px);
  line-height:1.4; letter-spacing:.005em; color:var(--ivory); margin:0 0 18px; text-align:start;
}
html[lang="he"] .c-info h2{ font-family:var(--sans-he); letter-spacing:0; }
.c-info p,
.c-where .place,
.c-where .tel,
.c-social li{
  font-family:var(--sans); font-weight:300; font-size:clamp(17px,1.35vw,20px);
  line-height:1.56; color:var(--ivory-dim); margin:0; text-align:start;
}
html[lang="he"] .c-info p,
html[lang="he"] .c-where .place,
html[lang="he"] .c-where .tel,
html[lang="he"] .c-social li{ font-family:var(--sans-he); line-height:1.7; }
.c-where .place{ margin-block-end:18px; }
.c-info p{ max-inline-size:40ch; }
.c-info p.c-next{ max-inline-size:none; }

/* The studio links and the exhibitions address carry the hairline
   underline every link on this page carries, warming to gold. */
.c-where .place,
.c-where .tel,
.c-desk a{
  text-decoration:none; overflow-wrap:anywhere;
  border-block-end:1px solid var(--hair); padding-block-end:2px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.c-desk a{ color:var(--ivory); }
.c-desk p{ display:flex; flex-direction:column; align-items:flex-start; }
.c-where .place:hover, .c-where .place:focus-visible,
.c-where .tel:hover, .c-where .tel:focus-visible,
.c-desk a:hover, .c-desk a:focus-visible{ color:var(--gold); border-block-end-color:var(--gold); }
.c-where{ font-style:normal; display:flex; flex-direction:column; align-items:flex-start; }
.c-where .place{ display:inline-block; }
.c-where .tel{ display:inline-block; margin:0; }

/* Social: plain words in a row. No underline, no hover, no pointer -
   nothing that suggests they can be pressed while they have no address.
   When projects.json gives one a URL the generator makes it an <a>, and
   .c-social a gives it the page's link treatment. */
.c-social ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 28px; }
.c-social span{ color:var(--ivory-dim); }
.c-social a{
  color:var(--ivory); text-decoration:none; border-block-end:1px solid var(--hair);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.c-social a:hover, .c-social a:focus-visible{ color:var(--gold); border-block-end-color:var(--gold); }

/* The way on - the ledger's last entry, in the site's serif voice so it
   reads as the next step and not as one more fact. */
.c-next a{ display:inline-block; text-decoration:none; }
.c-next span{
  display:inline-block;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,2.2vw,32px); 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"] .c-next span{ font-family:var(--serif-he); font-style:normal; }
.c-next a:hover span, .c-next a:focus-visible span{ color:var(--gold); border-block-end-color:var(--gold); }

/* The sign-off, Contact only: the full official logo, with its own
   Conferences | Events | Exhibitions line, over the copyright - a narrow
   closing strip. The file is used exactly as supplied (595x145); its
   transparent margin is 64px on both sides, so one logical negative margin
   puts the letters on the text edge in either direction. 248px on desktop
   (496 device px at DPR 2 from a 595px file - never enlarged), 216px on a
   phone. At .88 the white of the file sits with the ivory of the page. */
/* Since 2026-10-01 the shared footer carries the four links too; on Contact
   the logo heads it, and the email and social links are not repeated because
   the page shows them a few lines above. No hairline here: the logo is the
   division. */
footer.c-sign{ padding-block:0 clamp(32px,5vh,52px); }
footer.c-sign .wrap{
  grid-template-areas:"sign sign" "nav copy";
  row-gap:14px;
}
footer.c-sign .wrap::before{ display:none; }
.c-sign .sign{
  --sw:248px; grid-area:sign;
  display:block; inline-size:var(--sw); block-size:auto; opacity:.88;
  margin-inline-start:calc(var(--sw) * -64 / 595);
  margin-block:calc(var(--sw) * -8 / 595) calc(var(--sw) * -22 / 595);
}
@media (max-width:767px){
  footer.c-sign .wrap{ grid-template-areas:"sign" "nav" "copy"; }
  .c-sign .sign{ --sw:216px; }
}

/* ------------------------------------------------------------
   Phone.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .page-about main,
  .page-contact main{ padding-block-start:calc(51px + min(5vh,44px)); }

  /* The opener goes full-bleed and turns 4:3, the ratio the rest of the
     site uses on a phone. */
  .a-open figure{ padding-inline:0; }
  .a-open figure img{ aspect-ratio:4/3; object-position:var(--focal-m,50% 50%); }

  /* The photograph first, inside the gutter - not full bleed: the About
     opener is the one full-width photograph on this page. Then the four
     stages down the line with room between them. */
  .a-steps .flow-img{ margin-block-end:40px; }
  .a-steps dl{ gap:34px; padding-block:4px; }
  .a-steps .step{ padding-inline-start:24px; }
  .a-steps dt, .a-steps dd{ font-size:16.5px; }
}

@media (prefers-reduced-motion:reduce){
  .a-go span, .c-open .addr a, .c-copy, .c-info a, .c-next span{ transition:none; }
}

/* ------------------------------------------------------------
   STAGE 4 - ABOUT AND CONTACT ON A PHONE

   "Founded 1999." was 14px and the copy button 12.5px, both below the
   15px floor the rest of the site now holds on a phone. Hebrew already
   ran both larger (15.5px and 14px), so this closes a gap that only
   ever existed in English.

   The expo address measured 136x23 - one pixel under the WCAG target
   floor, and it is a mailto link, so a missed tap costs a person the
   contact. Padding on the inline link clears it without moving the
   baseline. The copy button gets a 44px box, which is what a primary
   action deserves on a phone.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .a-open .founded{ font-size:15px; letter-spacing:.04em; }

  .c-copy{
    font-size:14px; letter-spacing:.04em;
    min-block-size:44px; display:inline-flex; align-items:center;
  }
  .c-desk a{ display:inline-block; padding-block:4px 6px; }
}

/* ============================================================
   STAGE 5 - MOTION ON ABOUT AND CONTACT

   Same html.js contract as every other page: the class is set in
   the head before first paint, so with scripting off none of these
   rules match and nothing is ever hidden. Opacity and transform
   only, so nothing here can shift the layout.
   ============================================================ */

/* About opens with one quiet reveal for the whole first screen -
   heading, founding line and photograph together. The photograph
   fades and does not scale. The home page hero earns a twenty-
   second settle because it is the first thing on the site and it
   has a whole screen to do it in; repeating that gesture here
   would just be the site doing its trick twice. */
html.js .a-open h1,
html.js .a-open .founded,
html.js .a-open figure{ opacity:0; transform:translateY(14px); }
html.js .a-open.in h1,
html.js .a-open.in .founded,
html.js .a-open.in figure{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
html.js .a-open.in .founded{ transition-delay:.1s; }
html.js .a-open.in figure{ transition-delay:.18s; }

html.js .a-say p{ opacity:0; transform:translateY(16px); }
html.js .a-say.in p{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}

/* The four stages and their photograph enter as one section, one reveal.
   The earlier 70ms stagger between stages was removed 2026-09-30: the
   stages are one system and arrive together. */
html.js .a-steps .wrap{ opacity:0; transform:translateY(16px); }
html.js .a-steps.in .wrap{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}

/* Contact's first screen is deliberately absent from all of this.
   The address is the page's primary action; holding it back 800ms
   to fade it in buys nothing and costs the one thing the page is
   for. So the heading, the lead and the address are all at rest
   from the first paint, and only what sits below the fold moves.
   Since the second pass the ledger is the page's one other reveal; on
   desktop it is in view at load and arrives just after the email. */
html.js .c-info{ opacity:0; transform:translateY(14px); }
html.js .c-info.in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  html.js .a-open h1, html.js .a-open .founded, html.js .a-open figure,
  html.js .a-say p, html.js .a-steps .wrap,
  html.js .c-info{
    opacity:1; transform:none; transition:none;
  }
}

/* Contact's first screen, revealed as one moment rather than four.

   An earlier pass left this screen static on the reasoning that the address
   is the page's primary action and must not be held back. The brief asks for
   the heading and the lead to arrive together and for the address to be the
   moment they lead to, so the screen now moves - but it is tuned so the
   address is the point, not an afterthought: heading and lead share one
   transition, and the address follows a tenth of a second later. Nothing
   waits on scroll, because .c-open is in view at load. The copy button keeps
   the action feedback it already has and gets no reveal of its own. */
html.js .c-open h1,
html.js .c-open .lead{ opacity:0; transform:translateY(14px); }
html.js .c-open .addr{ opacity:0; transform:translateY(10px); }
html.js .c-open.in h1,
html.js .c-open.in .lead,
html.js .c-open.in .addr{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
html.js .c-open.in .addr{ transition-delay:.1s; }

@media (prefers-reduced-motion:reduce){
  html.js .c-open h1, html.js .c-open .lead, html.js .c-open .addr{
    opacity:1; transform:none; transition:none;
  }
}

/* The studio line that used to sit under the email, in 12.5px mono,
   moved into the details row on 2026-09-30 (see CONTACT - the details,
   as one row). Its old padding and negative-margin hit areas belonged to
   that position and are gone with it; the row's links use the overlay
   below instead. */

/* ------------------------------------------------------------
   HIT AREAS ON CONTACT

   Three links here carry an underline drawn with border-block-end,
   so their hit area cannot be bought with padding: any padding at
   the block end moves the underline, and that is a visible change.

   Same device the exhibition film buttons already use: a transparent
   overlay centred on the link, sized to at least 44x44. It is a
   child of the anchor, so a tap anywhere on it activates the link,
   and being absolutely positioned it contributes nothing to layout.
   Nothing moves: not the text, not the underline, not the spacing.

   Centred with left/top 50% and a translate rather than inset-inline,
   so the same rule is correct in both directions.

   The outline for :focus-visible stays on the anchor itself, so the
   focus ring still traces the text and not the larger hit box.
   ------------------------------------------------------------ */
.c-open .addr a,
.c-where a,
.c-desk a,
.c-social a,
.c-next a{ position:relative; }

.c-open .addr a::after,
.c-where a::after,
.c-desk a::after,
.c-social a::after,
.c-next a::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  inline-size:100%; min-inline-size:45px;
  block-size:100%; min-block-size:45px;
}

/* The copy button from 768 up: 12px of padding around 12.5px mono is
   41px (43px in Hebrew). The phone rule already sets it to 44px; here
   the same overlay makes up the difference without touching the
   padding, so the text, its underline and the page height stay put. */
.c-copy{ position:relative; }
.c-copy::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  inline-size:100%;
  block-size:100%; min-block-size:45px;
}