/* ===== REVEAL NAVIGATION — the page steps aside to show the menu =====
   After details.so "Reveal Navigation 2.0": the page itself becomes a card
   that slides left, rounds and dims, uncovering a light panel beneath it.
   Five colour sheets — the nav's own five link colours — trail behind the
   card's edge as it moves and settle into a thin spine.

   Mechanics (see reveal-nav.js):
   · #rn-page wraps the page content; the fixed .nav gets the same clip and
     slide so the pill travels with its page.
   · The card is a clip-path inset() plus translateX, never a scale — the
     content keeps its size and the right edge retracts faster than the
     content moves, which is what gives the reference its parallax.
   · #rn-page is document-tall, so its insets are offset by the scroll
     position (--rn-t / --rn-b, set by JS); the sheets and .nav are
     viewport-fixed and use plain insets.
   · html.rn-active holds the layers in place for the whole open→close
     cycle; html.rn-open is the target state the transitions run to. */

:root{
  --rn-g:10px;                                /* margin around the card */
  --rn-r:18px;                                /* card radius */
  --rn-s:clamp(40px,6vw,96px);                /* how far the content slides */
  --rn-p:clamp(440px,45vw,720px);             /* width the panel claims */
  --rn-k:5px;                                 /* each colour sheet's stripe */
  --rn-dur:.65s;
  --rn-ease:cubic-bezier(.76,0,.24,1);
  --rn-bg:#EFEAE0;                             /* the panel: the site's second paper */
  --rn-fg:var(--ink);
  --rn-mut:#6E675F;                           /* muted labels, AA on the panel */
  --rn-t:0px; --rn-b:0px;
}
@media(max-width:800px){
  .rn-col{justify-content:flex-start;padding-top:84px;}
  .rn-sub{margin-top:26px;} .rn-acts{margin-top:20px;}
  :root{--rn-p:min(calc(100vw - 72px),460px);--rn-s:6vw;--rn-g:8px;--rn-r:14px;--rn-k:4px;}
}

/* ---------- the trigger, in the navbar ---------- */
.rn-btn{display:flex;align-items:center;gap:10px;justify-self:end;cursor:pointer;
  font:inherit;color:var(--ink);background:rgba(20,18,31,0.035);
  border:1px solid rgba(20,18,31,0.14);border-radius:999px;padding:9px 13px 9px 16px;
  transition:background .35s var(--e-quart),border-color .35s var(--e-quart),padding .55s var(--e-expo);}
@media(hover:hover){.rn-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}}
.rn-btn:focus-visible{outline:2px solid var(--zone);outline-offset:3px;}
body.nav-shrink .rn-btn{padding:6px 11px 6px 13px;}
.rn-btn-l{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;line-height:1;}
.rn-btn-i{position:relative;width:10px;height:10px;flex:none;}
.rn-btn-i::before,.rn-btn-i::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;
  background:currentColor;border-radius:1px;transition:transform .6s var(--e-expo);}
.rn-btn-i::after{transform:rotate(90deg);}
@media(hover:hover){.rn-btn:hover .rn-btn-i::before{transform:rotate(90deg);}}
@media(hover:hover){.rn-btn:hover .rn-btn-i::after{transform:rotate(180deg);}}
/* the reveal replaces the phone dropdown */
.navtoggle{display:none !important;}
@media(max-width:800px){
  body.nav-open .navbar .nl{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;}
}

/* ---------- the panel under the page ---------- */
.rn-panel{position:fixed;inset:0;z-index:1;background:var(--rn-bg);color:var(--rn-fg);
  display:none;}
html.rn-active .rn-panel{display:block;}
.rn-col{position:absolute;top:0;right:0;bottom:0;width:var(--rn-p);
  display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;
  padding:88px clamp(24px,3vw,44px) 40px calc(var(--rn-k) * 5 + clamp(28px,3vw,48px));}
/* fixed, so it stays put while the menu column scrolls on short screens */
.rn-close{position:fixed;top:18px;right:18px;z-index:2;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;
  transform:scale(.6) rotate(-90deg);opacity:0;
  transition:transform .6s var(--e-expo),opacity .3s var(--e-quart),background .3s var(--e-quart);}
@media(hover:hover){.rn-close:hover{background:#000;}}
.rn-close:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.rn-close svg{width:14px;height:14px;}
html.rn-open .rn-close{transform:none;opacity:1;transition-delay:.24s;}
/* v1 has no colour spine, so the column needn't clear one */
html.rn-v1 .rn-col{padding-left:clamp(28px,3vw,48px);}

.rn-lab{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--rn-mut);margin-bottom:18px;}
.rn-links{list-style:none;margin:0;padding:0;}
.rn-links li{overflow:hidden;}
.rn-links a{display:flex;align-items:baseline;text-decoration:none;color:var(--ink);
  font-family:var(--ff-display);font-optical-sizing:auto;font-variation-settings:var(--fx-d);font-weight:400;
  font-size:clamp(2.3rem,3.6vw,3.5rem);line-height:1.12;letter-spacing:-0.02em;
  transition:color .35s var(--e-quart);}
.rn-dash{display:inline-block;overflow:hidden;width:0;opacity:0;color:var(--hc);
  transform:translateX(-.35em);transition:width .5s var(--e-expo),opacity .35s var(--e-quart),transform .5s var(--e-expo);}
.rn-links a:focus-visible{color:var(--hc);outline:none;}
@media(hover:hover){.rn-links a:hover{color:var(--hc);outline:none;}}

.rn-links a:focus-visible .rn-dash,
.rn-links a[aria-current="page"] .rn-dash{width:.72em;opacity:1;transform:none;}
@media(hover:hover){.rn-links a:hover .rn-dash{width:.72em;opacity:1;transform:none;}}
.rn-links a[aria-current="page"]{color:var(--hc);}

.rn-meta{margin-top:36px;display:flex;flex-direction:column;gap:9px;}
.rn-meta a,.rn-meta span{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--rn-mut);text-decoration:none;width:max-content;transition:color .3s var(--e-quart);}
.rn-meta a:focus-visible{color:var(--ink);outline:none;}
@media(hover:hover){.rn-meta a:hover{color:var(--ink);outline:none;}}
.rn-mo{font:inherit;font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--rn-mut);background:none;border:none;padding:0;cursor:pointer;width:max-content;text-align:left;min-height:28px;}
.rn-mo[hidden]{display:none;}
.rn-mo:focus-visible{color:var(--ink);outline:none;}
@media(hover:hover){.rn-mo:hover{color:var(--ink);outline:none;}}

/* selected work, the actions */
.rn-sub{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--rn-mut);margin:34px 0 12px;}
.rn-work{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:520px;}
.rn-work a{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#E3DDD1;outline:none;
  box-shadow:0 0 0 1px rgba(20,18,31,0.08);transition:box-shadow .35s var(--e-quart);}
.rn-work img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--e-expo),opacity .35s var(--e-quart);}
.rn-work a:focus-visible img{transform:scale(1.05);}
@media(hover:hover){.rn-work a:hover img{transform:scale(1.05);}}
.rn-work a:focus-visible{box-shadow:0 0 0 2px var(--ink);}
.rn-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;}
.rn-cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--ink);color:var(--paper);border-radius:999px;padding:12px 20px;
  font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;
  transition:background .3s var(--e-quart),gap .45s var(--e-expo);}
.rn-cta:focus-visible{background:#000;gap:14px;outline:none;}
@media(hover:hover){.rn-cta:hover{background:#000;gap:14px;outline:none;}}
.rn-cz{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:inherit;color:var(--ink);
  background:rgba(230,165,25,0.1);border:1px solid rgba(230,165,25,0.45);border-radius:999px;padding:11px 16px;
  font-family:var(--ff-mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  transition:background .3s var(--e-quart),border-color .3s var(--e-quart);}
.rn-cz span{color:var(--gold);font-size:14px;line-height:1;}
.rn-cz:focus-visible,.rn-cz[aria-expanded="true"]{background:rgba(230,165,25,0.2);border-color:var(--gold);outline:none;}
@media(hover:hover){.rn-cz:hover{background:rgba(230,165,25,0.2);border-color:var(--gold);outline:none;}}
/* the chizuk opens in place, inside the menu */
.rn-czbox{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--e-expo),opacity .35s var(--e-quart);}
.rn-czbox.is-open{grid-template-rows:1fr;opacity:1;}
.rn-czbox > div{overflow:hidden;min-height:0;}
.rn-czin{margin-top:16px;max-width:520px;padding:18px 20px 16px;border-radius:14px;background:var(--paper);
  border:1px solid rgba(230,165,25,0.38);box-shadow:0 14px 30px -22px rgba(60,30,10,0.35);}
.rn-czin .chizuk-he{font-family:var(--ff-heb);font-weight:500;font-size:1.2rem;line-height:1.7;color:var(--ink);margin:0 0 8px;}
.rn-czin .chizuk-en{font-family:var(--ff-display);font-style:italic;font-variation-settings:var(--fx-i);font-size:1rem;line-height:1.42;color:var(--soft-ink);margin:0 0 9px;text-wrap:balance;}
.rn-czfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.rn-czin .chizuk-ref{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:#A87412;}
.rn-czmore{font-family:var(--ff-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:12px 2px;min-height:44px;white-space:nowrap;flex:none;}
.rn-czmore:focus-visible{color:#A87412;outline:none;}
@media(hover:hover){.rn-czmore:hover{color:#A87412;outline:none;}}
@media (prefers-reduced-motion: reduce){.rn-czbox{transition:none;}}
/* short screens (phones in landscape): tighter, top-aligned, scrollable */
@media (max-height:500px){
  .rn-col{justify-content:flex-start;padding-top:24px;padding-bottom:28px;}
  .rn-links a{font-size:clamp(1.7rem,6.5vh,2.3rem);line-height:1.08;}
  .rn-lab{margin-bottom:10px;} .rn-sub{margin-top:20px;} .rn-meta{margin-top:22px;}
  .rn-work{max-width:380px;}
  .rn-close{top:12px;right:12px;}
}

/* staggered arrival of the panel's content */
.rn-lab,.rn-links a,.rn-sub,.rn-work,.rn-acts,.rn-meta > *{opacity:0;transform:translateY(24px);
  transition:opacity .45s var(--e-quart),transform .8s var(--e-expo),color .35s var(--e-quart);}
.rn-links a{transform:translateY(105%);}
html.rn-open .rn-lab,html.rn-open .rn-links a,html.rn-open .rn-sub,html.rn-open .rn-work,html.rn-open .rn-acts,html.rn-open .rn-meta > *{opacity:1;transform:none;}
html.rn-open .rn-sub,html.rn-open .rn-work{transition-delay:.37s,.37s,0s;}
html.rn-open .rn-acts{transition-delay:.41s,.41s,0s;}
html.rn-open .rn-lab{transition-delay:.2s;}
html.rn-open .rn-links li:nth-child(1) a{transition-delay:.22s,.22s,0s;}
html.rn-open .rn-links li:nth-child(2) a{transition-delay:.25s,.25s,0s;}
html.rn-open .rn-links li:nth-child(3) a{transition-delay:.28s,.28s,0s;}
html.rn-open .rn-links li:nth-child(4) a{transition-delay:.31s,.31s,0s;}
html.rn-open .rn-links li:nth-child(5) a{transition-delay:.34s,.34s,0s;}
html.rn-open .rn-meta > *{transition-delay:.44s,.44s,0s;}

/* ---------- the colour sheets (2.0) ---------- */
.rn-sheet{position:fixed;inset:0;z-index:2;background:var(--c);display:none;
  clip-path:inset(0px 0px 0px 0px round 0px);transform:none;
  transition:clip-path var(--rn-dur) var(--rn-ease),transform var(--rn-dur) var(--rn-ease);
  transition-delay:var(--dc);}
html.rn-active .rn-sheet{display:block;}
html.rn-open .rn-sheet{
  clip-path:inset(var(--rn-g) calc(var(--rn-p) + var(--rn-g) - var(--rn-s) - var(--rn-k) * var(--i)) var(--rn-g) calc(var(--rn-s) + var(--rn-g)) round var(--rn-r));
  transform:translateX(calc(-1 * var(--rn-s)));
  transition-delay:var(--do);}

/* ---------- the page becomes a card ---------- */
html.rn-active{overflow:hidden;scrollbar-gutter:stable;scroll-behavior:auto;}
html.rn-active #rn-page{position:relative;z-index:3;background:var(--paper);
  clip-path:inset(var(--rn-t) 0px var(--rn-b) 0px round 0px);transform:none;
  transition:clip-path var(--rn-dur) var(--rn-ease),transform var(--rn-dur) var(--rn-ease);
  transition-delay:.08s;}
html.rn-open #rn-page{
  clip-path:inset(calc(var(--rn-t) + var(--rn-g)) calc(var(--rn-p) + var(--rn-g) - var(--rn-s)) calc(var(--rn-b) + var(--rn-g)) calc(var(--rn-s) + var(--rn-g)) round var(--rn-r));
  transform:translateX(calc(-1 * var(--rn-s)));
  transition-delay:0s;}
/* the fixed pill travels with its page */
html.rn-active header.nav{bottom:0;pointer-events:none;
  clip-path:inset(0px 0px 0px 0px round 0px);transform:none;
  transition:clip-path var(--rn-dur) var(--rn-ease),transform var(--rn-dur) var(--rn-ease);
  transition-delay:.08s;}
html.rn-open header.nav{
  clip-path:inset(var(--rn-g) calc(var(--rn-p) + var(--rn-g) - var(--rn-s)) var(--rn-g) calc(var(--rn-s) + var(--rn-g)) round var(--rn-r));
  transform:translateX(calc(-1 * var(--rn-s)));
  transition-delay:0s;}
/* dimming — on the page and its pill alike */
html.rn-active #rn-page::after,html.rn-active header.nav::after{content:'';position:absolute;inset:0;z-index:2147483000;
  background:var(--ink);opacity:0;pointer-events:none;transition:opacity var(--rn-dur) var(--rn-ease);}
/* a light panel wants a softer step back than the dark one did */
html.rn-open #rn-page::after,html.rn-open header.nav::after{opacity:.34;}
html.rn-open body{cursor:pointer;}
/* taps on the dimmed card fall through to the panel, which closes the menu */
html.rn-open #rn-page{pointer-events:none;}
html.rn-open .rn-col{cursor:auto;}
/* floating page furniture would detach from a moving page; it steps out */
html.rn-active .rail,html.rn-active .wa,html.rn-active .motionbtn,html.rn-active .mega,
html.rn-active .ambient,html.rn-active .vignette,html.rn-active .bloom{opacity:0 !important;visibility:hidden !important;transition:opacity .3s var(--e-quart),visibility 0s .3s;}

@media (prefers-reduced-motion: reduce){
  #rn-page,header.nav,.rn-sheet,.rn-close,.rn-lab,.rn-links a,.rn-sub,.rn-work,.rn-acts,.rn-meta > *,
  html.rn-active #rn-page,html.rn-active header.nav,html.rn-active #rn-page::after,html.rn-active header.nav::after{
    transition-duration:.01s !important;transition-delay:0s !important;}
}