/* ronilevavi, Site A, «אור».
   Plain CSS, no build step, Safari 14 floor. One stylesheet for every page.

   THE TOP BAR IS THE GALLERY'S BAR. Ilai asked for it exactly, so the numbers
   in the "bar" block below are sg-site's numbers: a 48px translucent white
   strip over the page on a desktop. On a phone it is the same white glass in
   two slim rows (Ilai, 2026-09-21; it used to be a tall black column). Two things were changed because they had to be: the mark
   is «רוני לבבי» set in type rather than the gallery's stacked logo image, and
   WhatsApp points at Roni's own number.

   THERE IS NO prefers-reduced-motion QUERY IN THIS FILE, and there must never
   be one. That setting is turned on for a whole operating system, not for a
   website, and gating content on it has broken Roni's own PC twice and one of
   Ilai's testers' phones once. The «עצירת אנימציות» switch in the
   accessibility panel is the only thing here that may stop motion. */

:root{
  /* the world, sampled from his own photographs. The greys are the tunnel's
     painted concrete; the amber is the light at the end of it in the Suzanne
     Dellal night shot. Measured in roni-design/contrast.py, 0 failing pairs. */
  --canvas:#14110f;
  --panel:#1f1b18;
  --edge:#332d27;
  --field:#8a8073;      /* 4.85:1 on canvas. WCAG 1.4.11 wants 3 */
  --bone:#ded6cb;       /* 13.06:1 */
  --muted:#a89e91;      /* 7.13:1 */
  --amber:#c9a961;      /* 8.36:1 */
  --amber-hi:#ddc084;   /* 10.70:1 */
  --amber-dim:rgba(201,169,97,.22);
  --danger:#d4694a;

  /* the bar is its own world: clean, white, hairline-ruled */
  --bar:#ffffff;
  --bar-ink:#1d1d1f;
  --hdr:48px;
  --btn-r:14px;

  --sans:"Assistant",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --a11y-scale:1;
  --gut:clamp(20px, 5vw, 64px);
  --maxw:1180px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0;background:var(--canvas);color:var(--bone);
  font-family:var(--sans);
  font-size:calc(17px * var(--a11y-scale));line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,video{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:60}
.skip:focus{inset-inline-start:12px;top:12px;background:var(--amber);color:var(--canvas);
  padding:10px 16px;border-radius:var(--btn-r);font-weight:700;text-decoration:none}

/* =====================================================================
   THE BAR. sg-site's, measurement for measurement.
   ===================================================================== */

.bar{position:fixed;left:0;right:0;z-index:30;display:flex;align-items:center;
  background:var(--bar);color:var(--bar-ink)}
.bar-top{top:0;height:var(--hdr);padding-top:env(safe-area-inset-top);
  justify-content:center;background:rgba(255,255,255,.74);
  border-bottom:1px solid rgba(0,0,0,.08)}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .bar-top{background:rgba(255,255,255,.52);
    -webkit-backdrop-filter:saturate(170%) blur(18px);
    backdrop-filter:saturate(170%) blur(18px)}
}

.menu{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  column-gap:26px;row-gap:3px;max-width:100%;padding:0 130px 0 180px;height:100%}
.menu a{color:var(--bar-ink);text-decoration:none;white-space:nowrap;
  font-family:var(--sans);
  font-size:calc(14px * var(--a11y-scale));font-weight:600;line-height:1.25;
  letter-spacing:.01em;opacity:.88;transition:opacity .15s ease;
  -webkit-tap-highlight-color:transparent}
.menu a:hover,.menu a:active{opacity:1}

.toprow{display:contents}

.logo{position:absolute;right:20px;top:50%;transform:translateY(-50%);
  display:block;text-decoration:none;color:var(--bar-ink);
  font-weight:800;font-size:calc(17px * var(--a11y-scale));letter-spacing:-.035em;
  line-height:1;white-space:nowrap}

.tools{display:flex;align-items:center;gap:10px}
@media (min-width: 901px){
  .tools{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
}

.lang{position:static;
  appearance:none;-webkit-appearance:none;background:#f5f5f7;border:0;
  border-radius:var(--btn-r);color:var(--bar-ink);
  font:700 calc(13px * var(--a11y-scale))/1 var(--sans);
  letter-spacing:.04em;height:34px;min-width:52px;padding:0 12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease}
.lang:active{background:#e8e8ed}

.a11y-btn,.wa{appearance:none;-webkit-appearance:none;border:0;background:#f2f2f4;
  color:var(--bar-ink);width:44px;height:34px;border-radius:var(--btn-r);padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease}
.a11y-btn:active,.wa:active{background:#e6e6ea}
.a11y-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.a11y-btn svg circle{fill:currentColor;stroke:none}
.wa svg{width:20px;height:20px;fill:currentColor}

@media (min-width: 901px){
  .menu a[aria-current]{position:relative;opacity:1;font-weight:800;color:var(--bar-ink)}
  .menu a[aria-current]::after{content:"";position:absolute;
    inset-inline:0;bottom:-8px;height:2px;border-radius:1px;background:#b3491d}
}

/* Phones and small tablets: the PC bar, not a black block, and one thin row
   (Ilai, 2026-09-21). No name here (the page opens on it in large type), no
   WhatsApp (it floats, below): just the links, centred, and EN + access on the
   physical left as on the PC. Fixed over the page like the PC's, so the film
   shows through it; the inner pages' heads carry the extra top room. */
@media (max-width: 900px){
  :root{ --hdr:44px; }
  /* The PC's half-transparent glass, floating over the page (Ilai asked for
     the PC look, 2026-09-21), and it slides away while scrolling down and
     back on the first scroll up (app.js adds .bar-hide). */
  .bar-top{height:calc(var(--hdr) + env(safe-area-inset-top));
    -webkit-transition:-webkit-transform .28s ease;transition:transform .28s ease}
  .bar-top.bar-hide{-webkit-transform:translateY(-100%);transform:translateY(-100%)}
  .logo,.bar .wa{display:none}
  .tools{position:absolute;left:10px;top:calc(50% + env(safe-area-inset-top) / 2);
    transform:translateY(-50%);gap:6px}
  .lang{height:30px;min-width:40px;padding:0 9px;font-size:calc(12px * var(--a11y-scale))}
  .menu{width:100%;padding:0 12px 0 96px;column-gap:20px;flex-wrap:nowrap}
  .menu a{font-size:calc(14px * var(--a11y-scale))}
  .menu a[aria-current]{position:relative;opacity:1;font-weight:800;color:var(--bar-ink)}
  .menu a[aria-current]::after{content:"";position:absolute;
    inset-inline:0;bottom:-6px;height:2px;border-radius:1px;background:#b3491d}
}

/* WhatsApp floats on phones instead of taking bar space; on a PC it stays in
   the bar. It sits on the side the text does NOT start from: left in Hebrew,
   right in English, so it never covers the hero's two lines. */
.wa-float{display:none}
@media (max-width: 900px){
  .wa-float{display:flex;position:fixed;z-index:25;
    left:14px;bottom:calc(14px + env(safe-area-inset-bottom));
    width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;
    align-items:center;justify-content:center;text-decoration:none;
    box-shadow:0 6px 18px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
  .wa-float svg{width:28px;height:28px;fill:currentColor}
  .wa-float:active{transform:scale(.94)}
  /* English text runs from the left, so there the button goes right */
  html[dir="ltr"] .wa-float{left:auto;right:14px}
}

/* These three live down HERE and not in the phone block above on purpose:
   their base rules are declared after it, and at equal specificity the later
   plain rule wins, so a phone override placed earlier is silently ignored.
   Same trap sg-site records in its own sheet. */
@media (max-width: 900px){
  .a11y-btn,.wa{width:34px;height:30px}
  .a11y-btn svg{width:16px;height:16px}
  .wa svg{width:17px;height:17px}
}

/* =====================================================================
   LAYOUT
   ===================================================================== */

main{display:block}
.inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.inner.narrow{max-width:760px}
.inner.mid{max-width:920px}
.sec{padding-block:clamp(56px, 8vw, 104px)}
/* Home: one quiet hairline between each of the six sections (story +
   timeline, gallery, People Create Reality, the tunnel, R-tip, contact),
   the width of the content and fading out at both ends (Ilai, 2026-09-21). */
.sec-about ~ .sec{position:relative}
.sec-about ~ .sec::before{content:"";position:absolute;top:0;left:50%;
  width:calc(min(100%, var(--maxw)) - var(--gut) * 2);height:1px;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  background:linear-gradient(to right, transparent, rgba(222,214,203,.22) 12%, rgba(222,214,203,.22) 88%, transparent)}
html[data-a11y-contrast][data-a11y-contrast] .sec-about ~ .sec::before{background:#000}
.sec:first-of-type{padding-block-start:clamp(48px, 7vw, 96px)}

.inner.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px, 5vw, 72px);
  align-items:start}
@media (max-width: 860px){ .inner.two{grid-template-columns:1fr} }

.h1{font-size:clamp(34px, 6.2vw, 62px)}
.h2{font-size:clamp(25px, 3.6vw, 40px)}
.h2.sub{margin-top:2.2em;font-size:clamp(20px, 2.4vw, 26px)}
.t3{font-size:calc(19px * var(--a11y-scale));font-weight:700;letter-spacing:-.02em}
.body{color:var(--muted);margin-top:1.05em;max-width:62ch}
.body.wide{max-width:70ch}
.lead{color:var(--muted);margin-top:1em;font-size:calc(19px * var(--a11y-scale));max-width:62ch}
.note{color:var(--muted);margin-top:1.2em;font-size:calc(14.5px * var(--a11y-scale));max-width:62ch}
.kicker{color:var(--amber);font-size:calc(13px * var(--a11y-scale));font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.gloss{color:var(--muted);font-style:italic;margin-top:.5em}

.h2 + .body,.h1 + .lead{margin-top:1.1em}
.col-tx > .h2:first-child{margin-top:0}

.framed{display:block;border-radius:16px;overflow:hidden;background:var(--panel);
  border:1px solid var(--edge)}
.framed img{width:100%;display:block}
.bleed img{width:100%;display:block}
.wide-ph{margin-block:clamp(24px,4vw,48px)}
.wide-ph .bleed{max-height:62vh;overflow:hidden;display:block}
.wide-ph .bleed img{object-fit:cover;width:100%;max-height:62vh}

.page-head{padding-block:clamp(40px, 7vw, 92px) 0}
@media (max-width: 900px){ .page-head{padding-top:calc(var(--hdr) + 36px)} }

/* =====================================================================
   THE HERO. The photograph carries it.
   ===================================================================== */

.hero{position:relative;min-height:clamp(440px, 82vh, 760px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--canvas)}
@media (min-width: 901px){ .hero{margin-top:calc(var(--hdr) * -1)} }
.hero-ph{position:absolute;inset:0}
.hero-ph img{width:100%;height:100%;object-fit:cover}
/* The scrim never reaches zero. A gradient that fades out has an edge
   somewhere, and every edge on a photograph reads as a bug. */
.hero-ph::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,
    rgba(18,15,13,.92) 0%,
    rgba(18,15,13,.66) 32%,
    rgba(18,15,13,.36) 62%,
    rgba(18,15,13,.22) 100%)}
.hero-txt{position:relative;z-index:2;
  padding:0 var(--gut) clamp(40px, 7vw, 86px);
  width:100%;max-width:var(--maxw);margin:0 auto}
.hero-name{font-size:clamp(46px, 10vw, 118px);line-height:.95;letter-spacing:-.045em}
.hero-line{margin-top:.55em;color:var(--muted);
  font-size:clamp(17px, 2.4vw, 25px);font-weight:400;max-width:30ch;text-wrap:balance}
.hair{display:block;width:64px;height:1px;background:var(--amber);margin-top:clamp(20px,3vw,32px)}
.nw{white-space:nowrap}

/* On the film hero the name fades in as the page opens, then the line under
   it, then the hairline (Ilai, 2026-09-21). "both" holds the start state only
   while each waits its turn; the motion switch cancels every animation, which
   leaves all three simply visible. */
.hero-film .hero-name{-webkit-animation:hero-in 1.1s var(--ease) .25s both;animation:hero-in 1.1s var(--ease) .25s both}
.hero-film .hero-line{-webkit-animation:hero-in 1.1s var(--ease) 1.25s both;animation:hero-in 1.1s var(--ease) 1.25s both}
/* the hairline DRAWS itself out from the line's starting edge the moment the
   line has landed: right in Hebrew, left in English (Ilai, 2026-09-21) */
.hero-film .hair{width:clamp(64px,9vw,120px);
  -webkit-transform-origin:right center;transform-origin:right center;
  -webkit-animation:hair-draw .9s cubic-bezier(.65,0,.35,1) 1.75s both;animation:hair-draw .9s cubic-bezier(.65,0,.35,1) 1.75s both}
html[dir="ltr"] .hero-film .hair{-webkit-transform-origin:left center;transform-origin:left center}
@-webkit-keyframes hair-draw{from{-webkit-transform:scaleX(0);opacity:.2}to{-webkit-transform:scaleX(1);opacity:1}}
@keyframes hair-draw{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
@-webkit-keyframes hero-in{from{opacity:0;-webkit-transform:translateY(12px)}to{opacity:1;-webkit-transform:none}}
@keyframes hero-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* The film hero (2026-09-21). The video lies over its own first frame and
   only shows once it is actually playing, so there is never a black box or a
   jump. Roni stands in the middle of every frame: on a wide screen the band
   is sized to the film's own 16:9 (capped at the window) so his head is never
   cropped, and on an ultra-wide the crop is taken mostly from below. */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;opacity:0;transition:opacity .3s ease}
.hero-vid.is-on{opacity:1}
html:not([data-js]) .hero-vid{opacity:1}
.hero-film .hero-ph img{object-position:50% 30%}
/* lighter than the photograph's scrim: the world changing behind him is the
   point, so only the bottom, where the two lines sit, is shaded */
.hero-film .hero-ph::after{background:
  linear-gradient(to top,
    rgba(18,15,13,.88) 0%,
    rgba(18,15,13,.55) 22%,
    rgba(18,15,13,.16) 46%,
    rgba(18,15,13,.06) 100%)}
/* The film fills the first screen, top to bottom, on every device: a black
   strip under it read as a fault (Ilai, 2026-09-21). On a phone it sits under
   the sticky bar; on a PC it runs under the translucent bar like the page
   does, and app.js (fitHero) slides the frame so Roni is whole, head clear of
   the bar and shoes on screen. Past about 2.3:1 that cannot be done at full
   width, so the frame is capped and the sides fall to the page's dark ground. */
.hero-film{min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr))}
/* on a small tablet the bar floats over the film, which takes the screen */
@media (max-width: 900px){ .hero-film{min-height:100vh;min-height:100svh} }
/* On a phone the film ALMOST fills the screen: 88% of its height, which
   trims about a fifth off the sides. Filling it all cut a third and read as
   zoomed in; showing it whole at 2:3 left too much page under it (Ilai, 2026-
   09-21). Its foot fades into the page's own black, so there is no edge. */
@media (max-width: 700px){
  .hero-film{min-height:min(88vh, 190vw);min-height:min(88svh, 190vw)}
  .hero-film .hero-ph::after{background:
    linear-gradient(to top,
      #14110f 0%,
      rgba(20,17,15,.82) 12%,
      rgba(20,17,15,.42) 30%,
      rgba(20,17,15,.12) 50%,
      rgba(20,17,15,0) 68%)}
}
@media (min-width: 901px){
  .hero-film{margin-top:0;height:100vh;min-height:0}
  .hero-film .hero-ph{left:50%;right:auto;-webkit-transform:translateX(-50%);transform:translateX(-50%);
    width:min(100%, calc((100vh - 70px) / 0.432))}
  /* the two lines go to the far edge, clear of Roni in the middle */
  .hero-film .hero-txt{max-width:none}
  /* On a PC the text sits at the right edge, so only that side is shaded,
     plus a light fade at the foot. The full-width bottom shade the phone uses
     read as "the bottom of the video is black" here (Ilai, 2026-09-21). */
  .hero-film .hero-ph::after{background:
    linear-gradient(to left, rgba(18,15,13,.58) 0%, rgba(18,15,13,.22) 26%, rgba(18,15,13,0) 46%),
    linear-gradient(to top, rgba(18,15,13,.42) 0%, rgba(18,15,13,0) 24%)}
  .hero-film .hero-name,.hero-film .hero-line{text-shadow:0 2px 28px rgba(0,0,0,.45)}
}

/* =====================================================================
   SECTIONS
   ===================================================================== */

/* the timeline, on a beam */
.time{position:relative;margin-top:clamp(30px,4vw,54px)}
/* the story and the timeline share one section; on a PC they stand side by side */
.story-two{align-items:start}
.col-time .h2{margin-bottom:0}
@media (max-width: 860px){ .col-time{margin-top:clamp(48px,8vw,72px)} }
/* the home page ends on the five contact icons */
.sec-say .reach{margin-top:clamp(22px,3vw,34px)}
.time::before{content:"";position:absolute;inset-block:6px 6px;inset-inline-start:5px;
  width:1px;background:linear-gradient(to bottom,
    var(--amber-dim), rgba(201,169,97,.42) 26%, var(--amber-dim))}
.time li{position:relative;padding-inline-start:34px;padding-block:0 clamp(26px,3.4vw,44px)}
.time li:last-child{padding-block-end:0}
.node{position:absolute;inset-inline-start:0;top:9px;width:11px;height:11px;
  border-radius:50%;background:var(--canvas);
  box-shadow:inset 0 0 0 1px var(--amber), 0 0 0 4px rgba(201,169,97,.10)}
.time li.in .node{background:var(--amber)}
.yr{display:block;color:var(--amber);font-weight:700;letter-spacing:.1em;
  font-size:calc(13px * var(--a11y-scale));min-height:1.2em}
.time .t3{margin-top:2px}
.time .body{margin-top:.35em;max-width:56ch}

/* THE CLIENT WALL GETS ITS OWN LIGHT BAND, and that is a decision rather than
   a compromise. Twenty logos drawn for white paper cannot be made to sit on a
   near-black ground: half of them arrived as dark ink, and a filter that
   rescues those destroys the ones that arrived light. Inverting and tinting
   them at bake time was tried and left eight of the twenty barely visible.
   A light band shows every mark as its owner drew it, and this family of sites
   already puts a white bar on a dark page, so a bright surface is part of the
   vocabulary rather than a break from it. It also gives the page one change of
   ground, which the long dark scroll wanted anyway. */
/* R-tip sits on the same dark ground as everything else (Ilai, 2026-09-21:
   "all the page in one colour"); the logos keep their own white tiles */
/* logos only; each <img> carries its own size from build.py (equal area) */
.wall{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(128px, 1fr))}
.wall-wrap{margin-top:clamp(26px,3.5vw,44px)}
.wall-dup{display:none}
.wall li{border:1px solid rgba(21,18,15,.12);border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  height:60px;padding:0 12px;overflow:hidden}
.wall li img{max-width:100%;height:auto}

/* Phones: one row of logos drifting in from the left and out to the right
   (Ilai, 2026-09-21), instead of a tall grid. The track holds the list twice
   and moves by exactly one copy, so the loop has no seam. */
@media (max-width: 700px){
  .wall-wrap{overflow:hidden;direction:ltr;margin-inline:calc(var(--gut) * -1);
    -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
  .wall-track{display:flex;width:-webkit-max-content;width:max-content;
    -webkit-animation:wall-drift 80s linear infinite;animation:wall-drift 80s linear infinite}
  .wall,.wall-dup{display:flex;gap:8px;padding-right:8px}
  .wall li{flex:0 0 104px;height:54px;padding:0 10px}
}
@-webkit-keyframes wall-drift{from{-webkit-transform:translateX(-50%)}to{-webkit-transform:translateX(0)}}
@keyframes wall-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* the chain */
.engraved{margin-top:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-.03em;
  line-height:1.22;font-size:clamp(25px, 4.4vw, 50px);max-width:16ch}
.engraved .w{color:var(--bone);transition:color .35s var(--ease), text-shadow .35s var(--ease)}
.engraved .w:hover,.engraved .w.lit{color:var(--amber-hi);
  text-shadow:0 0 26px rgba(201,169,97,.45)}

/* the tunnel stops */
.stops{margin-top:1.6em}
.stops li{padding-block:.5em;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.stops li:last-child{border-bottom:1px solid var(--edge)}
.stops b{font-weight:700;font-size:calc(15.5px * var(--a11y-scale))}
.stops span{color:var(--muted);font-size:calc(14px * var(--a11y-scale))}

/* press */
.mastheads{margin-top:clamp(26px,3.5vw,44px);display:grid;gap:1px;
  background:var(--edge);border-block:1px solid var(--edge)}
.mastheads li{background:var(--canvas)}
.mastheads a{display:block;padding:16px 4px;text-decoration:none;
  transition:background .2s var(--ease)}
.mastheads a:hover{background:var(--panel)}
.mastheads .outlet{display:block;color:var(--amber);font-weight:700;
  font-size:calc(12.5px * var(--a11y-scale));letter-spacing:.11em;text-transform:uppercase}
.mastheads .head{display:block;margin-top:5px;color:var(--bone);
  font-size:calc(16.5px * var(--a11y-scale));line-height:1.4;max-width:70ch}

/* the press page */
.h2.grp{margin-top:clamp(36px,5vw,64px);font-size:clamp(20px,2.4vw,26px);color:var(--amber)}
.cuts{margin-top:14px;display:grid;gap:1px;background:var(--edge);
  border-block:1px solid var(--edge)}
.cuts li{background:var(--canvas)}
.cuts a{display:block;padding:15px 4px;text-decoration:none;transition:background .2s var(--ease)}
.cuts a:hover{background:var(--panel)}
.cuts .outlet{display:block;color:var(--amber);font-weight:700;
  font-size:calc(12px * var(--a11y-scale));letter-spacing:.11em;text-transform:uppercase}
.cuts .head{display:block;margin-top:4px;font-size:calc(16px * var(--a11y-scale));line-height:1.42}
.cuts .meta{display:flex;gap:10px;align-items:center;margin-top:6px;
  color:var(--muted);font-size:calc(12.5px * var(--a11y-scale))}
.tag{border:1px solid var(--edge);border-radius:999px;padding:2px 9px;
  font-size:calc(11px * var(--a11y-scale));letter-spacing:.06em;color:var(--muted)}

/* the tunnel page */
.lit{margin-top:1.2em;color:var(--amber);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(26px,4vw,44px);text-shadow:0 0 40px rgba(201,169,97,.35)}
/* three tunnels: Suzanne Dellal, Hostages Square, and the one mobile tunnel
   that toured the Netherlands (merged 2026-09-21) */
.places{margin-top:clamp(30px,4vw,54px);display:grid;gap:clamp(26px,3.4vw,52px);
  grid-template-columns:repeat(3,1fr)}
@media (max-width: 620px){ .places{grid-template-columns:1fr} }
/* A stop with no photograph keeps the column rhythm by standing on a plate
   the same height as a picture, rather than floating with nothing above it. */
.places li.no-ph{padding-top:0}
.places li.no-ph .node{margin-top:6px}
.places li{position:relative}
.places .p-ph{margin-bottom:18px}
/* one frame for every place, so the cards end level: the three city photos
   are 9:16, the mobile-tunnel interior is 3:4 and is trimmed at the sides */
.places .p-ph img{width:100%;aspect-ratio:9/16;object-fit:cover}
.places .node{position:static;display:block;margin-bottom:10px}
.places .when{color:var(--amber);font-weight:700;letter-spacing:.08em;
  font-size:calc(12.5px * var(--a11y-scale));margin-top:5px}
.places .body{margin-top:.6em;max-width:44ch}

.credits{margin-top:1.4em}
.credits li{padding-block:.45em;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:3px 12px;align-items:baseline}
.credits li:last-child{border-bottom:1px solid var(--edge)}
.credits b{font-weight:700}
.credits span{color:var(--muted);font-size:calc(14.5px * var(--a11y-scale))}

.film{margin-top:clamp(24px,3vw,40px);display:flex;justify-content:center}
.film video{width:min(360px, 100%);height:auto;border-radius:16px;
  border:1px solid var(--edge);background:#000;display:block}

/* cards */
.cards{margin-top:clamp(28px,4vw,48px);display:grid;
  grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 860px){ .cards{grid-template-columns:1fr} }
.cards a{display:block;height:100%;padding:24px;border:1px solid var(--edge);
  border-radius:16px;background:var(--panel);text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease)}
.cards a:hover{border-color:var(--amber);transform:translateY(-2px)}
.cards p{color:var(--muted);margin-top:.5em;font-size:calc(15.5px * var(--a11y-scale))}

/* the one button on the site: solid amber with dark ink and an arrow that
   points the way the page reads. It was an outline and read as "almost not
   visible" on a PC (Ilai, 2026-09-21). Amber on the canvas is 8.4:1. */
.go{display:inline-flex;align-items:center;gap:12px;margin-top:1.8em;
  min-height:54px;padding:0 30px;border-radius:999px;border:0;
  background:var(--amber);color:#14110f;text-decoration:none;
  font-weight:800;font-size:calc(16.5px * var(--a11y-scale));letter-spacing:-.01em;
  box-shadow:0 6px 22px rgba(201,169,97,.18);
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease)}
.go::after{content:"\2190";font-weight:700;font-size:1.15em;line-height:1;
  transition:transform .2s var(--ease)}
html[dir="ltr"] .go::after{content:"\2192"}
.go:hover{background:var(--amber-hi);box-shadow:0 8px 28px rgba(201,169,97,.28)}
.go:hover::after{transform:translateX(-4px)}
html[dir="ltr"] .go:hover::after{transform:translateX(4px)}
.go:active{transform:scale(.98)}
.go.big{min-height:60px;padding:0 36px;font-size:calc(17.5px * var(--a11y-scale))}
@media (min-width: 901px){
  .go{min-height:62px;padding:0 38px;font-size:calc(18px * var(--a11y-scale))}
}

.plain{margin-top:1.6em}
.plain li{padding-block:.35em}
.plain a{color:var(--amber)}

/* prose pages */
.sec-prose .h2{margin-top:2em;font-size:clamp(21px,2.5vw,28px)}
.sec-prose .h2:first-child{margin-top:0}
.dl{margin-top:1.2em}
.dl dt{font-weight:700;margin-top:1em}
.dl dd{margin:.2em 0 0;color:var(--muted)}
.dl dd a{color:var(--amber)}

/* the form */
.form{margin-top:0}
.f{margin-bottom:18px}
.f label{display:block;font-weight:600;font-size:calc(14.5px * var(--a11y-scale));
  margin-bottom:7px;color:var(--bone)}
.f input,.f textarea{width:100%;background:var(--panel);color:var(--bone);
  border:1px solid var(--field);border-radius:12px;padding:13px 14px;
  font:inherit;font-size:calc(16px * var(--a11y-scale));min-height:50px}
.f textarea{min-height:140px;resize:vertical}
.f input:focus,.f textarea:focus{border-color:var(--amber);outline:none;
  box-shadow:0 0 0 3px rgba(201,169,97,.18)}
.f.bad input,.f.bad textarea{border-color:var(--danger)}
.f .why{color:var(--danger);font-size:calc(13.5px * var(--a11y-scale));margin-top:6px}
/* Hidden by CLIPPING, never by a -9999px offset: that trick hands the
   compositor a 10,000px wide paint area and stalls the whole page. */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.f-act{margin-top:6px}
.f-msg{margin-top:1em;min-height:1.6em;font-size:calc(15.5px * var(--a11y-scale))}
.f-msg.ok{color:var(--amber)}
.f-msg.bad{color:var(--danger)}
.aside .dl dt{color:var(--amber);font-size:calc(13px * var(--a11y-scale));
  letter-spacing:.1em;text-transform:uppercase}
.aside .dl dd{color:var(--bone)}

/* «דברו עם רוני» stands on the old home page's film (2026-09-21): full bleed,
   darkened so the words and icons read, fading into the page at top and foot */
.has-film{position:relative;overflow:hidden;isolation:isolate}
.has-film > .inner{position:relative;z-index:1}
.film-bg{position:absolute;inset:0;z-index:0;background:#14110f}
.film-bg-vid{width:100%;height:100%;object-fit:cover;display:block}
.film-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom, #14110f 0%, rgba(20,17,15,.55) 22%, rgba(20,17,15,.5) 70%, #14110f 100%),
  rgba(20,17,15,.28)}
.sec-say.has-film{padding-block:clamp(90px,12vw,170px)}
/* the contact page is short: its film fills the window down to the footer */
.page-head.has-film{padding-bottom:clamp(60px,8vw,110px);min-height:calc(100vh - 44px);
  min-height:calc(100svh - 44px);display:flex;align-items:center}
.page-head.has-film > .inner{width:100%}
main:has(> .page-head.has-film) + .foot{margin-top:0}
.page-head.has-film .reach{margin-bottom:0}
html[data-a11y-contrast][data-a11y-contrast] .film-bg{display:none}

/* contact: five round icons and nothing else, no form (Ilai, 2026-09-21) */
.reach{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,44px)}
/* frosted glass, so each circle reads over the contact film (Ilai, 2026-09-21:
   "completely transparent"). The tint alone already reads where blur is missing. */
.reach a{display:flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:50%;color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px rgba(0,0,0,.35);
  transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .reach a{-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
}
.reach a:hover,.reach a:focus-visible{border-color:var(--amber-hi);color:var(--amber-hi);
  background:rgba(255,255,255,.22)}
.reach a:active{transform:scale(.95)}
.reach svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.reach svg .f,.reach svg.solid,.reach svg.solid path{fill:currentColor;stroke:none}
@media (max-width: 560px){ .reach{gap:10px} .reach a{width:54px;height:54px} .reach svg{width:23px;height:23px} }
/* the PC bubble for phone and email (app.js) */
.reach li{position:relative}
/* room under the icons for that bubble, on the short contact page */
.page-head .reach{margin-bottom:96px}
.reach-tip{position:absolute;top:calc(100% + 12px);left:50%;z-index:6;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 16px;border-radius:14px;white-space:nowrap;
  background:var(--panel);border:1px solid var(--edge);color:var(--bone);
  box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:calc(14px * var(--a11y-scale))}
.reach-tip b{font-size:calc(17px * var(--a11y-scale));font-weight:800;letter-spacing:.01em;
  -webkit-user-select:all;user-select:all}
.reach-tip small{color:var(--amber);font-size:calc(12.5px * var(--a11y-scale));font-weight:700}
.reach-tip a{color:var(--muted);font-size:calc(13px * var(--a11y-scale));margin-top:2px}
.reach-tip a:hover{color:var(--amber-hi)}
html[data-a11y-contrast][data-a11y-contrast] .reach-tip{background:#fff;color:#000;border-color:#000}
html[data-a11y-contrast][data-a11y-contrast] .reach a{border-color:#000;color:#000;background:#fff}

/* R-tip: the studio first, then "brands I designed for" as a small heading */
.sec-brands .lead + .lead{margin-top:.7em}
.sec-brands .wall-h{margin-top:clamp(30px,4vw,48px)}
.sec-brands .note{margin-top:.4em}
/* R-tip's own link under the logo wall, which sits on a light band */
.wall-cta{margin-top:10px}

/* footer: one thin line, copyright on one side and three links on the other */
.foot{border-top:1px solid var(--edge);padding-block:12px calc(12px + env(safe-area-inset-bottom));
  margin-top:clamp(32px,5vw,64px)}
.foot .inner{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;
  justify-content:space-between}
.flinks{display:flex;flex-wrap:wrap;gap:4px 16px}
.flinks a,.fsmall{color:var(--field);text-decoration:none;
  font-size:calc(12px * var(--a11y-scale));line-height:1.5}
.flinks a:hover{color:var(--amber)}
@media (max-width: 560px){ .foot .inner{justify-content:center;text-align:center} .flinks{justify-content:center} }

/* =====================================================================
   THE ONE ENTRANCE. Sections arrive; nothing else moves.
   ===================================================================== */

.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0s)}
.reveal.in{opacity:1;transform:none}

/* AND THE PAGE MUST SURVIVE ITS OWN SCRIPT DYING. The rule above hides
   everything it is on and hands the reveal to app.js. If that script never
   parses, every word on the page would be invisible. The pre-paint script in
   the head sets data-js; if it never ran, nothing is hidden. */
html:not([data-js]) .reveal{opacity:1;transform:none;transition:none}

/* =====================================================================
   THE ACCESSIBILITY PANEL (IS 5568)
   ===================================================================== */

.a11y-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.52)}
.a11y-panel{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,380px);max-height:86vh;overflow:auto;background:#fff;color:#1d1d1f;
  border-radius:18px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.44);
  font-family:var(--sans);font-size:calc(15px * var(--a11y-scale));
  direction:rtl;text-align:right}
html[lang="en"] .a11y-panel{direction:ltr;text-align:left}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px}
.a11y-head h2{font-size:calc(17px * var(--a11y-scale));color:#1d1d1f;letter-spacing:0}
.a11y-close{appearance:none;-webkit-appearance:none;border:0;background:#f2f2f4;
  width:36px;height:36px;border-radius:50%;cursor:pointer;color:#1d1d1f;
  display:flex;align-items:center;justify-content:center}
.a11y-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.a11y-row{margin-bottom:14px}
.a11y-row > span{display:block;margin-bottom:8px;font-weight:600}
.a11y-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.a11y-steps button,.a11y-toggles button{appearance:none;-webkit-appearance:none;border:0;
  background:#f2f2f4;color:#1d1d1f;border-radius:var(--btn-r);min-height:44px;
  padding:0 10px;cursor:pointer;font:inherit;font-size:.86em;font-weight:600;
  -webkit-tap-highlight-color:transparent;width:100%}
.a11y-steps button[aria-pressed="true"],
.a11y-toggles button[aria-pressed="true"]{background:#1d1d1f;color:#fff}
.a11y-toggles{display:grid;gap:8px;margin-bottom:14px}
.a11y-reset{appearance:none;-webkit-appearance:none;border:1px solid rgba(0,0,0,.18);
  background:#fff;color:#1d1d1f;border-radius:var(--btn-r);min-height:44px;width:100%;
  cursor:pointer;font:inherit;font-weight:600}
[hidden]{display:none !important}

/* --- what the six settings do ------------------------------------- */

:root{--a11y-scale:1}
html[data-a11y-font="1"]{--a11y-scale:1.125}
html[data-a11y-font="2"]{--a11y-scale:1.25}
html[data-a11y-font="3"]{--a11y-scale:1.5}

/* Doubled attribute on purpose: it has to outrank anything else that paints
   this page, and a tie decided by source order is exactly the kind of thing
   that changes by accident. High contrast is a legal requirement. */
html[data-a11y-contrast][data-a11y-contrast]{
  --canvas:#ffffff; --panel:#ffffff; --edge:#000000; --field:#000000;
  --bone:#000000; --muted:#000000; --amber:#0000cc; --amber-hi:#0000cc;
  --amber-dim:#000000; --danger:#a00000;
  --bar:#ffffff; --bar-ink:#000000;
}
html[data-a11y-contrast][data-a11y-contrast] .bar-top{
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:2px solid #000;box-shadow:none}
html[data-a11y-contrast][data-a11y-contrast] .lang,
html[data-a11y-contrast][data-a11y-contrast] .a11y-btn,
html[data-a11y-contrast][data-a11y-contrast] .wa{
  background:#fff;box-shadow:inset 0 0 0 2px #000}
html[data-a11y-contrast][data-a11y-contrast] .menu a{color:#000;opacity:1}
html[data-a11y-contrast][data-a11y-contrast] .menu a[aria-current]{
  background:#000;color:#fff;box-shadow:none}
html[data-a11y-contrast][data-a11y-contrast] .menu a[aria-current]::after{background:#000}
/* the photograph's scrim would wash the page out, and the wall's logo filter
   would grey out marks that now need to read as marks */
html[data-a11y-contrast][data-a11y-contrast] .hero-ph::after{
  background:linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,.72))}
html[data-a11y-contrast][data-a11y-contrast] .hero-name,
html[data-a11y-contrast][data-a11y-contrast] .hero-line{color:#000}
html[data-a11y-contrast][data-a11y-contrast] .wall li{border-color:#000;background:#fff}
html[data-a11y-contrast][data-a11y-contrast] .wall li img{
  filter:grayscale(1) contrast(1.6)}
html[data-a11y-contrast][data-a11y-contrast] .lit,
html[data-a11y-contrast][data-a11y-contrast] .engraved .w{text-shadow:none}
html[data-a11y-contrast][data-a11y-contrast] .go{background:#000;color:#fff;box-shadow:none}
html[data-a11y-contrast][data-a11y-contrast] .cards a{border-color:#000}
html[data-a11y-contrast][data-a11y-contrast] .f input,
html[data-a11y-contrast][data-a11y-contrast] .f textarea{
  background:#fff;color:#000;border-color:#000}

/* Greyscale sits on the root only. The root is exempt from the rule that a
   filter makes a containing block, so fixed and sticky things keep working. */
html[data-a11y-grayscale]{filter:grayscale(1)}

html[data-a11y-links] a{text-decoration:underline !important;
  text-decoration-thickness:2px;text-underline-offset:3px}
html[data-a11y-links] a:not(:has(img)):not(:has(picture)):not(:has(svg)){
  background-color:rgba(201,169,97,.20)}

html[data-a11y-readable]{letter-spacing:normal}
html[data-a11y-readable] .h1,html[data-a11y-readable] .h2,
html[data-a11y-readable] .t3,html[data-a11y-readable] .hero-name,
html[data-a11y-readable] .engraved,html[data-a11y-readable] .logo{
  letter-spacing:normal;font-weight:700}
html[data-a11y-readable] .kicker,html[data-a11y-readable] .outlet,
html[data-a11y-readable] .yr,html[data-a11y-readable] .when{
  letter-spacing:normal;text-transform:none}

html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important}
html[data-a11y-motion] .reveal{opacity:1 !important;transform:none !important}
/* app.js pauses it; this makes sure the still underneath is what shows */
html[data-a11y-motion] .hero-vid{visibility:hidden}
html[data-a11y-motion] .wall-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html[data-a11y-motion] .wall-dup{display:none}