/* בית הדיל - הדוכן.
   Drenched crate blue, one fluorescent accent, hand-cut price plates with hard
   shadows that have no blur in them. Nothing here eases into a colour.

   Authored for dir="rtl" only. All box offsets are logical; rotations, hard
   shadows and the rail transform are physical and are authored for RTL on
   purpose. See lib/layout.mjs before mirroring anything. */

:root{
  --crate-deep:#032D66;
  --crate:#004A9C;
  --crate-lit:#116BB5;
  --bone:#F2EFE0;
  --hivis:#FF8600;
  --ink:#09121F;
  --alarm:#E11D2E;
  --shadow:#010A17;
  --rule:rgb(242 239 224 / .18);
  --rule-ink:rgb(9 18 31 / .28);

  --t-mega:clamp(64px,13vw,200px);
  --t-board:clamp(44px,8.5vw,132px);
  --t-title:clamp(24px,3.4vw,46px);
  --t-h2:clamp(22px,2.4vw,30px);
  --t-lead:18px; --t-body:16px; --t-small:13.5px;
  --t-data:13px; --t-data-lg:17px; --t-micro:10.5px;
  --lh-tight:1.05; --lh-title:1.14; --lh-body:1.7;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --gutter:clamp(12px,4vw,48px);

  --shadow-plate:10px 10px 0 var(--shadow);
  --shadow-plate-lg:16px 16px 0 var(--shadow);
  --shadow-plate-rest:3px 3px 0 var(--shadow);

  --z-band:1; --z-rail:2; --z-ledger:3; --z-plate:5;
  --z-tile:20; --z-sticky:60; --z-head:80;

  --ease-land:cubic-bezier(.2,.9,.25,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);

  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; border-radius:0; }

body{
  margin:0;
  background:var(--crate-deep);
  color:var(--bone);
  font:400 var(--t-body)/var(--lh-body) Heebo,'Arial Hebrew','Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
h1,h2{ margin:0; }

h1,h2,.plate-title,.plate-price,.mast-name,.hang-price{
  font-family:Karantina,'Arial Hebrew',sans-serif;
  font-weight:700; line-height:var(--lh-title);
}
.mono,.code,.ledger,.idx,.sizes,.usd,.codes,.blurb,.plate-usd,.lb-n,.head-code{
  font-family:Cousine,ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
bdi,.iso{ unicode-bidi:isolate; }

/* Graft 2: nothing on this site eases into a colour. Painted signage does not
   fade in, it is either painted or it is not. Two discrete jumps, 90ms. */
a,button,.filter{ transition:background-color 90ms steps(2), color 90ms steps(2); }

a{ color:inherit; }
:focus-visible{ outline:3px solid var(--hivis); outline-offset:3px; }

.skip{
  position:absolute; inline-size:1px; block-size:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip:focus{
  inline-size:auto; block-size:auto; clip-path:none;
  inset-block-start:var(--s2); inset-inline-start:var(--s2);
  z-index:var(--z-head); padding:var(--s3) var(--s5);
  background:var(--hivis); color:var(--ink); font-weight:800;
}

/* ---------------------------------------------------------------- the board */

.board{
  min-block-size:100svh;
  background:var(--hivis); color:var(--ink);
  padding:var(--s7) var(--gutter) var(--s6);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s6);
}

.mast-name{ font-size:var(--t-mega); line-height:.86; }

.list{ list-style:none; margin:0; padding:0; }
.list li + li{ margin-block-start:var(--s2); }
.list a{
  display:flex; align-items:baseline; gap:var(--s3);
  text-decoration:none;
  font-family:Karantina,'Arial Hebrew',sans-serif; font-weight:700;
  font-size:clamp(22px,3vw,38px); line-height:1.16;
}
.list a:hover,.list a:focus-visible{ background:var(--ink); color:var(--hivis); }
.bn{ flex:0 1 auto; }
.dots{
  flex:1 1 auto; min-inline-size:var(--s5);
  border-block-end:2px dotted var(--rule-ink);
  transform:translateY(-.34em);
}
.list a:hover .dots{ border-color:currentColor; }
.bp{ flex:0 0 auto; }

/* The shekel sign is bidi class ET and migrates across the digits depending on
   its neighbours. Inside an explicit LTR isolate, ET-then-EN resolves the same
   way in every engine. */
.bp,.plate-price,.hang-price{ direction:ltr; unicode-bidi:isolate; }
.cur{ font-size:.34em; vertical-align:.72em; }

.filters{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.filter{
  font:800 var(--t-small)/1 Heebo,sans-serif; letter-spacing:.02em;
  padding:var(--s3) var(--s4);
  background:transparent; color:var(--ink);
  border:2px solid var(--ink); cursor:pointer;
}
.filter:hover{ background:var(--ink); color:var(--hivis); }
.filter[aria-pressed="true"]{ background:var(--ink); color:var(--hivis); }

/* ---------------------------------------------------------------- the bands */

.band{
  position:relative; z-index:var(--z-band);
  min-block-size:clamp(420px,66vh,760px);
  background:var(--crate);
  padding-block:var(--s7) var(--s6);
  display:flex; flex-direction:column; justify-content:center;
  border-block-end:2px solid var(--crate-deep);
  /* auto lets the band remember its last rendered size, so filtering and the
     scrollbar do not jump. */
  content-visibility:auto; contain-intrinsic-size:auto 640px;
}
.band[hidden]{ display:none; }

.rail{ position:relative; z-index:var(--z-rail); overflow:hidden; }
.rail-track{
  /* transform is physical and has no logical equivalent, so rather than reason
     about the sign per direction, the track's layout origin is pinned. It holds
     only images, so the override has no text consequence. */
  direction:ltr;
  display:flex; inline-size:max-content;
  animation:rail var(--dur) linear infinite;
  animation-play-state:paused;
}
.band.is-live .rail-track{ animation-play-state:running; will-change:transform; }
.band:hover .rail-track,.band:focus-within .rail-track{ animation-play-state:paused; }
.rail-track[data-drift="b"]{ animation-direction:reverse; }
.rail-run{ display:flex; }
.rail img{
  block-size:clamp(132px,17vw,224px); inline-size:auto;
  max-width:none; object-fit:cover;
}
/* -50% of the doubled track is exactly one copy width, so the loop never gaps. */
@keyframes rail{ from{ transform:translate3d(-50%,0,0) } to{ transform:translate3d(0,0,0) } }

.plate{
  position:absolute; z-index:var(--z-plate);
  inset-inline-end:var(--gutter);
  inline-size:min(440px,calc(100% - var(--gutter) * 2));
  background:var(--hivis); color:var(--ink);
  padding:var(--s5) var(--s5) var(--s4);
  text-decoration:none;
  clip-path:var(--cut);
  box-shadow:var(--shadow-plate-rest);
  transform:rotate(calc(var(--tilt) - 5deg)) translate3d(0,26px,0);
  transition:transform 620ms var(--ease-land), box-shadow 620ms var(--ease-land);
}
.band[data-side="start"] .plate{ inset-inline-start:var(--gutter); inset-inline-end:auto; }
.band[data-side="end"] .plate{ inset-block-start:var(--s7); }
.band[data-side="start"] .plate{ inset-block-end:var(--s7); }
.band.is-in .plate{ transform:rotate(var(--tilt)); box-shadow:var(--shadow-plate); }
.plate:hover{ background:var(--ink); color:var(--hivis); }

.plate-title{ font-size:var(--t-title); }
.plate-price{ font-size:var(--t-board); line-height:.9; margin:var(--s2) 0 0;
  clip-path:inset(0 0 100% 0); transition:clip-path 420ms 200ms var(--ease-land); }
.band.is-in .plate-price,.product .plate-price{ clip-path:inset(0 0 0 0); }
.plate-usd{ font-size:15px; margin:0; opacity:.72; }
.go{
  display:inline-flex; align-items:center; gap:var(--s2);
  font:800 var(--t-small)/1 Heebo,sans-serif; margin-block-start:var(--s3);
}
/* The document is rtl and the mark must point inline-end. */
.out{ transform:scaleX(-1); }

.ledger{
  position:relative; z-index:var(--z-ledger);
  margin:var(--s5) 0 0; padding:var(--s3) var(--gutter) 0;
  border-block-start:1px solid var(--rule);
  font-size:var(--t-data); color:rgb(242 239 224 / .72);
}

/* -------------------------------------------------------------- the product */

/* The banner photo is shown WHOLE, never as a cover-cropped background. A wide
   short strip crops a 3:4 product shot down to a slice of the midsole, which is
   what "it is cut" meant. It sits in its own column at its own aspect ratio, at
   full opacity, because a product photo is worth looking at. */
.head{
  background:var(--crate);
  padding:var(--s6) var(--gutter) var(--s7);
  border-block-end:2px solid var(--crate-deep);
  display:grid; gap:clamp(20px,3vw,48px);
  grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);
  align-items:center;
}
.head-shot{ margin:0; }
.head-shot img{ inline-size:100%; block-size:auto; }
.head-text{ min-inline-size:0; }
.head h1{ font-size:var(--t-title); max-inline-size:20ch; }

.plate-lg{
  position:relative; inset:auto; margin-block-start:var(--s5);
  display:block; inline-size:min(460px,100%);
  box-shadow:var(--shadow-plate-lg);
  transform:rotate(var(--tilt));
  transition:background-color 90ms steps(2), color 90ms steps(2);
}

.grid-wrap{ padding:var(--s6) var(--gutter); }
.shots{
  list-style:none; margin:0; padding:0;
  display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(clamp(104px,15vw,176px),1fr));
}
.shots li[hidden]{ display:none; }
.shots .shot{
  display:block; inline-size:100%; padding:0; border:0;
  background:var(--crate); cursor:zoom-in;
  aspect-ratio:1;
}
/* The uniform frame is made here, not in the files. object-position is pulled
   down because the supplier burns a red style code into the top of the portrait
   shots; the lightbox still opens the whole uncropped photo. */
.shots img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 62%; }

.shots li{ transition:box-shadow 180ms linear; }
.shots li:hover,.shots li:focus-within{ box-shadow:0 0 0 3px var(--hivis); }

.more-shots{
  margin-block-start:var(--s4);
  padding:var(--s3) var(--s5);
  background:transparent; color:var(--bone);
  border:2px solid var(--rule); cursor:pointer;
  font:800 var(--t-small)/1 Heebo,sans-serif;
}
.more-shots:hover{ background:var(--hivis); color:var(--ink); border-color:var(--hivis); }
.more-shots[hidden]{ display:none; }

.slab{ padding:var(--s7) var(--gutter); border-block-start:1px solid var(--rule); }
.slab h2{ font-size:var(--t-h2); margin-block-end:var(--s4); }

.codes{ list-style:none; margin:0 0 var(--s4); padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--s2); font-size:var(--t-data); }
.codes li{ border:1px solid var(--rule); padding:var(--s2) var(--s3); display:flex; flex-direction:column; gap:2px; }
.cc{ color:var(--bone); }
.cw{ color:var(--hivis); font-size:var(--t-micro); font-weight:800; }

.how{ background:var(--crate); }
.steps{ margin:0; padding-inline-start:var(--s5); max-inline-size:70ch; }
.steps li{ margin-block-end:var(--s3); font-size:var(--t-small); line-height:1.7; }
.steps li::marker{ color:var(--hivis); font-weight:800; }
.steps strong{ font-weight:800; color:var(--hivis); }

.note{ margin:0 0 var(--s3); font-size:var(--t-small); max-inline-size:68ch; color:rgb(242 239 224 / .82); }
.note strong{ font-weight:800; color:var(--bone); }

.sizes{ font-size:var(--t-data-lg); font-weight:700; margin:0 0 var(--s5); }

.chart{ margin:0; }
.chart figcaption{ font:800 var(--t-small)/1 Heebo,sans-serif; margin-block-end:var(--s3); }
.chart img{ inline-size:100%; background:var(--bone); }

.more{ padding-block-start:var(--s7); border-block-start:1px solid var(--rule); }
.more > h2{ font-size:var(--t-h2); padding-inline:var(--gutter); margin-block-end:var(--s5); }
.more .band{ min-block-size:clamp(260px,38vh,420px); }
.more .rail img{ block-size:clamp(96px,11vw,150px); }
.more .plate-title{ font-size:clamp(22px,2.2vw,30px); }
.more .plate-price{ font-size:clamp(32px,5vw,74px); }

/* The only commercial action on the page, permanently in thumb reach. */
.hang{
  position:fixed; z-index:var(--z-sticky);
  inset-block-end:var(--s5); inset-inline-start:var(--s5); inset-inline-end:auto;
  inline-size:auto; padding:var(--s4) var(--s5);
  display:flex; align-items:center; gap:var(--s4);
  transform:rotate(var(--tilt)); box-shadow:var(--shadow-plate);
  transition:background-color 90ms steps(2), color 90ms steps(2);
}
.hang-price{ font-size:34px; line-height:1; }
.hang .go{ margin:0; }

/* ------------------------------------------------------------------ dialog */

dialog{
  border:0; padding:0; max-inline-size:96vw; max-block-size:96svh;
  background:transparent; color:var(--bone);
}
dialog::backdrop{ background:rgb(3 45 102 / .94); }
dialog[open]{ animation:pop 160ms var(--ease-land); }
dialog::backdrop{ animation:fade 160ms linear; }
@keyframes pop{ from{ transform:scale(.965); opacity:0 } }
@keyframes fade{ from{ opacity:0 } }
#lb-img{ max-block-size:88svh; inline-size:auto; margin-inline:auto; }
.lb-x{
  position:absolute; inset-block-start:0; inset-inline-end:0; z-index:1;
  inline-size:48px; block-size:48px; font-size:28px; line-height:1;
  background:var(--hivis); color:var(--ink); border:0; cursor:pointer;
}
.lb-n{ text-align:center; margin:var(--s3) 0 0; font-size:var(--t-data); }

/* ------------------------------------------------------------------- foot */

.foot{
  padding:var(--s7) var(--gutter) var(--s8);
  border-block-start:2px solid var(--hivis);
  background:var(--crate-deep);
}
.foot-name{
  margin:0 0 var(--s5);
  font-family:Karantina,'Arial Hebrew',sans-serif; font-weight:700;
  font-size:clamp(28px,4vw,44px); line-height:1; color:var(--hivis);
}
.foot nav{ display:flex; flex-wrap:wrap; gap:var(--s5); }
.foot nav a{ font:800 var(--t-small)/1 Heebo,sans-serif; text-decoration:none; }
.foot nav a:hover{ color:var(--hivis); }

/* ------------------------------------------------------------ small screens */

@media (max-width:700px){
  /* Scoped to band plates on purpose. A bare .plate here also matches the
     sticky buy bar, which carries both classes, and would drop it out of the
     fixed layer and out of thumb reach. */
  .band .plate{
    position:static; inline-size:auto;
    margin:var(--s5) var(--gutter) 0;
  }
  .band{ justify-content:flex-start; }
  /* Photo above the title on a phone, still whole and still uncropped. */
  .head{ grid-template-columns:1fr; padding-block:var(--s5) var(--s6); }
  .hang{
    position:fixed;
    inset-inline:0; inset-block-end:0;
    inline-size:100%; justify-content:space-between;
    transform:none; clip-path:none; box-shadow:none;
    border-block-start:3px solid var(--ink);
  }
  .product{ padding-block-end:96px; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce){
  /* Rails become swipeable shelves. No content is lost, and the stepped colour
     change survives at full 90ms because it is state, not decoration. */
  .rail-track{ animation:none; direction:rtl; inline-size:auto; }
  .rail-track [aria-hidden="true"]{ display:none; }
  .rail{ overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline-start:var(--gutter); }
  .rail-run > *{ scroll-snap-align:start; }

  .plate{ transform:rotate(var(--tilt)); box-shadow:var(--shadow-plate); transition:none; }
  .plate-price{ clip-path:none; transition:none; }

  .shots li{ transition:none; }
  .shots li:hover,.shots li:focus-within{
    box-shadow:none;
    outline:3px solid var(--hivis); outline-offset:2px;
  }
  dialog[open],dialog::backdrop{ animation:none; }
}