/* ==========================================================================
   Ink and paper (2026-10-25): the look of the owner's reference, "ink-hero".
   White paper, warm near-black ink, muted grey, hairlines, a serif for headings and a small
   spaced mono for labels. Loaded after css/v2.css; the older rules there are overridden here.
   The entrance (.ink) is driven by js/ink.js; the sections after it use the .ip-* classes.
   ========================================================================== */

:root {
  --paper: #FFFFFF;
  --ink: #1B1613;          /* the reference's ink colour; also used by the menus, drawer and a11y panel from v2.css */
  --muted: #737373;
  --rule: #E5E5E5;
  --gray: #5C5C5C;
  --line: #E5E5E5;
  --accent: #1B1613;
  --mono: "JetBrains Mono", "Heebo", ui-monospace, monospace;
}
:root.a11y-contrast { --paper: #FFFFFF; --ink: #000000; --muted: #000000; --rule: #000000; }
:root.a11y-dark { --paper: #000000; --ink: #FFFFFF; --muted: #FFFFFF; --rule: #FFFFFF; }

html:not(.a11y-contrast):not(.a11y-dark) .site-bg { background: var(--paper); }
body { color: var(--ink); }

/* ------------------------------------------------------------------ top bar: see-through over the paper, settles into a bar at the full photo */
html:not(.a11y-contrast):not(.a11y-dark) .topbar {
  background: rgba(255, 255, 255, calc(var(--ink-nav, 1) * .9));
  border-bottom: 1px solid rgba(229, 229, 229, var(--ink-nav, 1)) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 959px) {
  html:not(.a11y-contrast):not(.a11y-dark) .topbar { background: rgba(255, 255, 255, calc(var(--ink-nav, 1) * .92)); }
}
html:not(.a11y-contrast):not(.a11y-dark) .topbar .logo { color: var(--ink); font-family: var(--display); }
html:not(.a11y-contrast):not(.a11y-dark) .topnav a { color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
html:not(.a11y-contrast):not(.a11y-dark) .topnav a:hover { color: var(--muted); }
html:not(.a11y-contrast):not(.a11y-dark) .topbar :is(.icon-btn, .burger, .motion-toggle, .lang-btn),
html:not(.a11y-contrast):not(.a11y-dark) .topbar .lang:not(.lang-menu) button { background: transparent; color: var(--ink); border-color: rgba(27, 22, 19, .3); }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .lang:not(.lang-menu) button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .burger span { background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .top-call,
html:not(.a11y-contrast):not(.a11y-dark) .action-bar .ab-call { background: var(--ink); border-color: var(--ink); color: var(--paper); border-radius: 0; }
html:not(.a11y-contrast):not(.a11y-dark) .action-bar { background: rgba(255, 255, 255, .96); border-top: 1px solid var(--rule); }
html:not(.a11y-contrast):not(.a11y-dark) .ab { background: var(--paper); color: var(--ink); border-color: rgba(27, 22, 19, .3); border-radius: 0; }
html:not(.a11y-contrast):not(.a11y-dark) .to-top,
html:not(.a11y-contrast):not(.a11y-dark) .wa-float { background: var(--ink); color: var(--paper); border: 1px solid var(--paper); box-shadow: 0 2px 10px rgba(27, 22, 19, .25); }
html:not(.a11y-contrast):not(.a11y-dark) .progress { background: var(--ink); }

/* ==================================================================== ENTRANCE */
.ink { position: relative; height: calc(100svh + 240vh); background: var(--paper); color: var(--ink); }
.ink-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; background: var(--paper); }
.ink-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the photo for screen readers and for browsers without WebGL2 */
.ink-img { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ink-nogl .ink-canvas { display: none; }
.ink-nogl .ink-img { inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(calc(var(--ink-inset, .22) * 100%));
  opacity: calc(.15 + .85 * var(--ink-develop, 0));
  transform: scale(calc(1.1 - .1 * var(--ink-progress, 0))); }
.ink-scrim { position: absolute; inset-inline: 0; bottom: 0; height: 78%; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, var(--paper), rgba(255, 255, 255, .82) 48%, rgba(255, 255, 255, 0)); }

.ink-type { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding: clamp(24px, 4vw, 40px); }
.ink-text { max-width: 52rem; min-width: 0; }
.ink-mask { display: block; overflow: hidden; overflow: clip; overflow-clip-margin: .12em; }
.ink-mask > * { display: block; }
.ink-eyebrow { margin-bottom: 18px; font: 500 11px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ink-h1 { margin: 0; font: 400 clamp(3.4rem, 15vw, 9rem)/.98 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ink-meta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.ink-cta { display: inline-flex; min-height: 32px; align-items: center; border-bottom: 1px solid var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); transition: color .15s, border-color .15s; }
.ink-cta:hover { color: var(--muted); border-color: var(--muted); }
.ink .status { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.5 var(--body); color: var(--muted); }
.ink .status .dot { width: 7px; height: 7px; }

/* the name and the lines bleed in once, line by line, as the page opens */
html.js .ink [data-ink] { transform: translateY(101%); transition: transform 1.25s cubic-bezier(.16, 1, .3, 1); }
html.js .ink.is-in [data-ink] { transform: none; }
.ink [data-ink="line1"] { transition-delay: .12s !important; }
.ink [data-ink="line2"] { transition-delay: .24s !important; }
.ink [data-ink="cta"] { transition-delay: .5s !important; }
.ink [data-ink="caption"] { transition-delay: .62s !important; }

/* the rail: three dots for the start, the middle and the full photo */
.ink-rail { display: none; flex-direction: column; align-items: center; gap: 4px; }
.ink-rail button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; opacity: .3; transition: opacity .3s; }
.ink-rail button span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ink-rail button:hover, .ink-rail button:focus-visible,
.ink-rail[data-station="0"] [data-dot="0"], .ink-rail[data-station="1"] [data-dot="1"], .ink-rail[data-station="2"] [data-dot="2"] { opacity: 1; }
@media (min-width: 768px) { .ink-rail { display: flex; } }

@media (max-width: 699px) {
  .ink { height: calc(100svh + 200vh); }
  .ink-type { padding: 20px 20px 104px; }   /* clear of the call / WhatsApp / directions bar */
}

/* static: reduced motion, and the contrast modes (no photo there, plain text) */
.ink.ink-static, html.a11y-contrast .ink, html.a11y-dark .ink { height: auto; }
.ink.ink-static .ink-stage { position: relative; }
@media (prefers-reduced-motion: reduce) {
  html.js .ink [data-ink] { transform: none; transition: none; }
}
html.a11y-contrast .ink-stage, html.a11y-dark .ink-stage { position: relative; height: auto; background: var(--paper); }
html.a11y-contrast :is(.ink-canvas, .ink-img, .ink-scrim, .ink-rail), html.a11y-dark :is(.ink-canvas, .ink-img, .ink-scrim, .ink-rail) { display: none; }
html.a11y-contrast .ink-type, html.a11y-dark .ink-type { position: relative; padding-top: 48px; }
html.a11y-contrast .ink [data-ink], html.a11y-dark .ink [data-ink] { transform: none; }

/* ==================================================================== SECTIONS */
.ip-sec { padding-block: clamp(72px, 11vw, 136px); border-top: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.ip-wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.ip-narrow { max-width: 50rem; }
.ip-head { max-width: 48rem; margin-bottom: clamp(32px, 4.5vw, 52px); }
.ip-label { display: block; margin-bottom: 14px; font: 500 11px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ip-h2 { margin: 0; font: 400 clamp(2.1rem, 4.6vw, 3.25rem)/1.06 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ip-h2-xl { font-size: clamp(2.8rem, 8vw, 5.75rem); line-height: .98; }
.ip-lead { margin: 18px 0 0; max-width: 40rem; font-size: 1rem; line-height: 1.75; color: var(--muted); }
.ip-note { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: .92rem; color: var(--muted); }
.ip-age { direction: ltr; unicode-bidi: isolate; display: inline-block; padding: 3px 6px 2px; border: 1px solid currentColor; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted); vertical-align: middle; }

/* services: three columns under a line of ink */
.ip-svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 48px 32px; }
.ip-svc li { min-width: 0; padding-top: 22px; border-top: 1px solid var(--ink); }
.ip-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 20px; margin-bottom: 20px; border: 1px solid var(--rule); background: #fff; }
.ip-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ip-svc h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font: 400 1.5rem/1.2 var(--display); color: var(--ink); }
.ip-svc p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--muted); }
@media (min-width: 760px) { .ip-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* hours and location side by side on wide screens */
.ip-two { display: grid; grid-template-columns: 1fr; gap: 72px; }
.ip-two > * { min-width: 0; }
@media (min-width: 900px) { .ip-two { grid-template-columns: 1fr 1fr; gap: 88px; } }
.ip-hours { margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ip-hours > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.ip-hours dt { margin: 0; font-size: 1rem; color: var(--ink); }
.ip-hours dd { margin: 0; font: 500 .88rem/1.4 var(--mono); color: var(--ink); text-align: end; }
.ip-hours .is-today dt { font-weight: 700; }
.ip-hours .is-today dt::after { content: attr(data-today); margin-inline-start: 10px; padding: 3px 6px 2px; background: var(--ink); color: var(--paper); font: 500 10px/1 var(--mono); letter-spacing: .12em; vertical-align: middle; }
.ip-address { font-style: normal; font: 400 clamp(1.4rem, 2.6vw, 1.75rem)/1.4 var(--display); color: var(--ink); }
.ip-phone { display: inline-block; margin-top: 16px; padding-bottom: 2px; border-bottom: 1px solid var(--ink); font: 500 1.2rem/1.2 var(--mono); color: var(--ink); }
.ip-map { margin-top: 32px; aspect-ratio: 4 / 3; border: 1px solid var(--rule); background: #F5F5F5; }
.ip-map iframe { display: block; width: 100%; height: 100%; border: 0; }   /* the satellite map in its real colours */

/* buttons: ink blocks and underlined mono links, like the reference's "read the score" */
.ip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.ip-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: background-color .15s, color .15s; }
.ip-btn svg { width: 18px; height: 18px; flex: none; }
.ip-btn:hover { background: transparent; color: var(--ink); }
.ip-btn-line { background: transparent; color: var(--ink); }
.ip-btn-line:hover { background: var(--ink); color: var(--paper); }
.ip-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink);
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; }
.ip-link:hover { color: var(--muted); border-color: var(--muted); }

/* products: a two-column list of hairlines */
.ip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
.ip-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font: 400 1.35rem/1.3 var(--display); color: var(--ink); }
@media (min-width: 700px) { .ip-list { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* about: one large paragraph that darkens word by word (js/app.js) */
.ip-big { margin: 0; font: 400 clamp(1.45rem, 3vw, 2.05rem)/1.5 var(--display); color: var(--ink); }

/* closing: invitation, actions and the poster */
.ip-contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .ip-contact-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 72px; } }
.ip-contact .closing-hint { margin-top: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* footer: paper, hairline, muted */
html:not(.a11y-contrast):not(.a11y-dark) .foot { background: var(--paper); color: var(--ink); border-top: 1px solid var(--rule); }
html:not(.a11y-contrast):not(.a11y-dark) .foot .container { border-top-color: transparent; }
html:not(.a11y-contrast):not(.a11y-dark) .foot .age { color: var(--ink); border-color: var(--ink); }
html:not(.a11y-contrast):not(.a11y-dark) .foot .legal-links a { color: var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none; }
html:not(.a11y-contrast):not(.a11y-dark) .foot :is(p, address, span) { color: var(--muted); }
html:not(.a11y-contrast):not(.a11y-dark) .foot .foot-bottom { border-top-color: var(--rule); }

/* Hebrew needs a little less spacing in the mono labels; Arabic letters must never be spaced (it breaks the joins) */
:root:lang(he) :is(.ip-label, .ink-eyebrow, .ink-cta, .ip-btn, .ip-link, .topnav a, .ip-contact .closing-hint) { letter-spacing: .06em; }
:root:lang(ar) :is(.ip-label, .ink-eyebrow, .ink-cta, .ip-btn, .ip-link, .topnav a, .ip-contact .closing-hint, .ink-h1, .ip-h2) { letter-spacing: 0; }

/* ==========================================================================
   Colours from the shop (2026-10-25), sampled from the owner's storefront photo:
   the sign lettering blue leads; the mural's red, yellow and green come in small doses
   (the four-colour tile before each label, the rule over each list, the 18+ tags).
   ========================================================================== */
:root {
  --blue: #1431A4;     /* sign lettering "מפגש המזל" */
  --red: #C8102E;      /* sign "חנות נוחות" and the mural */
  --yellow: #F8B50B;   /* mural */
  --green: #086B52;    /* mural */
  --tiles: conic-gradient(var(--blue) 0 25%, var(--red) 0 50%, var(--green) 0 75%, var(--yellow) 0);
}
:root.a11y-contrast { --blue: #000; --red: #000; --yellow: #000; --green: #000; }
:root.a11y-dark { --blue: #FFF; --red: #FFF; --yellow: #FFF; --green: #FFF; }

/* the entrance: the name in the sign's blue, the dissolve inks in blue (js/ink.js) */
.ink-h1 { color: var(--blue); }
.ink-cta { color: var(--blue); border-bottom: 2px solid var(--blue); }
.ink-scrim { height: 60%; background: linear-gradient(to top, var(--paper), rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, 0)); }
.ink-rail button { color: var(--blue); }

/* top bar, phone bar, round buttons, progress */
html:not(.a11y-contrast):not(.a11y-dark) .topbar .logo { color: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .topbar .top-call,
html:not(.a11y-contrast):not(.a11y-dark) .action-bar .ab-call { background: var(--blue); border-color: var(--blue); color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .to-top,
html:not(.a11y-contrast):not(.a11y-dark) .wa-float { background: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .progress { background: linear-gradient(90deg, var(--blue) 0 25%, var(--red) 0 50%, var(--yellow) 0 75%, var(--green) 0); }

/* labels: blue, with a small four-colour tile like the mural before them */
.ip-label { color: var(--blue); }
.ip-label::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-inline-end: 10px; vertical-align: -1px; background: var(--tiles); }

/* one mural colour per section: the rule over its list */
#services { --c: var(--blue); }
#hours { --c: var(--red); }
#products { --c: var(--yellow); }
#about { --c: var(--green); }
.ip-svc li:nth-child(1) { --c: var(--blue); }
.ip-svc li:nth-child(2) { --c: var(--red); }
.ip-svc li:nth-child(3) { --c: var(--yellow); }
.ip-svc li { border-top: 4px solid var(--c); }
.ip-hours, .ip-list { border-top: 3px solid var(--c); }
.ip-hours .is-today dt::after { background: var(--blue); color: #fff; }
.ip-age { color: var(--red); }
.ip-btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.ip-btn:hover { background: transparent; color: var(--blue); }
.ip-btn-line { background: transparent; color: var(--blue); }
.ip-btn-line:hover { background: var(--blue); color: #fff; }
.ip-link { border-bottom: 2px solid var(--blue); }
.ip-phone { color: var(--blue); border-bottom: 2px solid var(--blue); }

/* the closing invitation on the sign's blue */
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact { background: var(--blue); color: #fff; border-top: 0; }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact :is(.ip-label, .ip-h2) { color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-lead,
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .closing-hint { color: rgba(255, 255, 255, .85); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn { background: #fff; border-color: #fff; color: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn:hover { background: transparent; color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn-line { background: transparent; border-color: #fff; color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn-line:hover { background: #fff; color: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-link { color: #fff; border-bottom-color: var(--yellow); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-link:hover { color: var(--yellow); }

/* the footer opens with the mural's four colours */
.foot { position: relative; }
html:not(.a11y-contrast):not(.a11y-dark) .foot { border-top: 0; }
html:not(.a11y-contrast):not(.a11y-dark) .foot::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 6px;
  background: linear-gradient(90deg, var(--blue) 0 25%, var(--red) 0 50%, var(--yellow) 0 75%, var(--green) 0); }
html:not(.a11y-contrast):not(.a11y-dark) .foot .age { color: var(--red); border-color: var(--red); }
.ink-eyebrow { color: var(--blue); }
.ink-scrim { height: 64%; background: linear-gradient(to top, var(--paper), rgba(255, 255, 255, .9) 55%, rgba(255, 255, 255, 0)); }

/* the whole photo (2026-10-25): js/ink.js fits it inside a box. Wide screens: the box sits beside the text,
   so no white scrim is needed; upright screens: the text sits over the bottom of the photo with the scrim. */
.ink-wide .ink-scrim { display: none; }
.ink-nogl .ink-img { object-fit: contain; object-position: center bottom; padding-top: 80px; }

/* Blue paper (2026-10-25): a light blue paper behind every section after the entrance,
   with soft washes of the sign's blue, like ink that spread on the paper */
html:not(.a11y-contrast):not(.a11y-dark) .site-bg { background: #F1F5FD; }
html:not(.a11y-contrast):not(.a11y-dark) .site-bg::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60vw 40vh at 85% 20%, rgba(20, 49, 164, .10), transparent 70%),
    radial-gradient(50vw 50vh at 10% 65%, rgba(7, 127, 230, .09), transparent 70%),
    radial-gradient(40vw 30vh at 70% 95%, rgba(20, 49, 164, .08), transparent 70%); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-sec:not(.ip-contact) { background: transparent; border-top-color: rgba(20, 49, 164, .14); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-logo,
html:not(.a11y-contrast):not(.a11y-dark) .ip-map { border-color: rgba(20, 49, 164, .18); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-hours > div, html:not(.a11y-contrast):not(.a11y-dark) .ip-list li { border-bottom-color: rgba(20, 49, 164, .14); }
html:not(.a11y-contrast):not(.a11y-dark) .foot { background: #E6EDFB; }

/* the white grid over the blue paper (js/grid.js); the entrance covers it with its own paper */
.kgrid { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
html.a11y-contrast .kgrid, html.a11y-dark .kgrid { display: none; }

/* Contact (2026-10-25): the closing page is no longer a blue band; it sits on the same blue paper and white grid
   as the rest of the site, with the usual ink text and blue buttons */
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact { background: transparent; color: var(--ink); border-top: 1px solid rgba(20, 49, 164, .14); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-label { color: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-h2 { color: var(--ink); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-lead,
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .closing-hint { color: var(--muted); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn { background: var(--blue); border-color: var(--blue); color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn:hover { background: transparent; color: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn-line { background: transparent; border-color: var(--blue); color: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-btn-line:hover { background: var(--blue); color: #fff; }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-link { color: var(--ink); border-bottom-color: var(--blue); }
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-link:hover { color: var(--blue); }

/* map without internet: the address in the box instead of the browser's "no internet" page */
.ip-map.is-offline { display: grid; place-items: center; padding: 24px; text-align: center; }
.ip-map.is-offline iframe { display: none; }
.ip-map.is-offline::after { content: attr(data-offline); font: 400 1.3rem/1.5 var(--display); color: var(--blue); }

/* supporting lines in a very dark blue instead of grey (2026-10-26, owner request): services line, about paragraph,
   holidays note, contact hours line, the rest of the short lines */
html:not(.a11y-contrast):not(.a11y-dark) .ip-lead,
html:not(.a11y-contrast):not(.a11y-dark) .ip-note,
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-lead,
html:not(.a11y-contrast):not(.a11y-dark) .ip-contact .ip-note { color: #0A1640; }

/* "scroll to continue" hint under the name: visible until the visitor starts to scroll */
.ink-scroll { margin: 26px 0 0; display: flex; align-items: center; gap: 10px; color: var(--blue); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .35s, transform .35s, visibility 0s; }
.ink-scroll svg { flex: none; animation: ink-nudge 1.8s ease-in-out infinite; }
@keyframes ink-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.ink.is-scrolled .ink-scroll { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity .35s, transform .35s, visibility 0s .35s; }
:root:lang(he) .ink-scroll { letter-spacing: .06em; }
:root:lang(ar) .ink-scroll { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .ink-scroll svg { animation: none; } }
.ink-static .ink-scroll, html.a11y-contrast .ink-scroll, html.a11y-dark .ink-scroll { display: none; }
@media (max-width: 699px) { .ink-type { padding-bottom: 112px; } }

/* ==========================================================================
   Mobile pass (2026-10-26)
   - the poster no longer sits in a second grid column on phones (an old v2.css rule did that and pushed the page 57px
     wider than the screen, so the page could be dragged sideways)
   - touch targets of at least 44px, labels of at least 12px, text size not inflated by the phone
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ip-contact-grid > * { min-width: 0; }
@media (max-width: 699px) {
  #contact .cloth-wrap { grid-area: auto; justify-self: center; }
  .ip-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .ip-actions { gap: 10px 18px; }
  .ip-actions .ip-btn { flex: 1 1 100%; justify-content: center; }
  .ip-hours > div { padding-block: 14px; }
}
.logo { display: inline-block; line-height: 44px; min-height: 44px; padding-block: 0; }   /* not flex: it would swallow the space between the two words */
.ip-contact .closing-hint, .closing-hint { font-size: 12px; }
.ink-cta { min-height: 44px; }
.ip-phone { display: inline-flex; align-items: center; min-height: 44px; }
.topbar .top-call { min-height: 44px; }
html:not(.a11y-contrast):not(.a11y-dark) .foot .legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.ip-label, .ink-eyebrow, .ink-scroll, .ink-cta { font-size: 12px; }
.ip-age { font-size: 11px; }
@media (pointer: coarse) { .ink-rail button { width: 44px; height: 44px; } }
@media (max-height: 520px) and (orientation: landscape) {
  .ink-h1 { font-size: clamp(2.2rem, 13vh, 4.2rem); }
  .ink-type { padding-bottom: 20px; }
  .ink-meta { margin-top: 12px; }
}

/* Smoothness on phones (2026-10-26): no blur behind the top bar while the photo changes under it, and the photo canvas
   on its own layer */
.ink-canvas { will-change: transform; transform: translateZ(0); }
@media (max-width: 959px), (pointer: coarse) {
  html:not(.a11y-contrast):not(.a11y-dark) .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Entrance text (2026-10-27): the place line sits under the name, not over it, and nothing peeks out of its mask before
   the reveal. Hebrew letters like the lamed reach above the line box and the mask lets .12em through, so a 101% push
   was not enough: push further and keep the text transparent until it rises. */
.ink .ink-eyebrow { margin: 14px 0 0; }
html.js .ink [data-ink] { transform: translateY(170%); opacity: 0; transition: transform 1.25s cubic-bezier(.16, 1, .3, 1), opacity .45s ease; }
html.js .ink.is-in [data-ink] { transform: none; opacity: 1; }
.ink [data-ink="eyebrow"] { transition-delay: .36s !important; }
html.a11y-contrast .ink [data-ink], html.a11y-dark .ink [data-ink] { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js .ink [data-ink] { transform: none; opacity: 1; transition: none; } }
@media (max-height: 520px) and (orientation: landscape) { .ink .ink-eyebrow { margin-top: 8px; } }

/* Products (2026-10-27): a second line under a list item (the kinds of alcohol), and the alcohol warning. The
   regulations ask for bold letters in a colour that stands out, a frame as thick as the letters, and at least 18px. */
.ip-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ip-sub { font: 400 .95rem/1.4 var(--body); color: #0A1640; }
.ip-warn { margin: 24px 0 0; padding: 12px 16px; border: 2px solid #0A1640; background: #fff; color: #0A1640;
  font: 700 18px/1.45 var(--body); display: flex; flex-direction: column; gap: 4px; }
.ip-warn-tr { font-weight: 700; font-size: 18px; }
.ip-warn-tr:empty { display: none; }
html.a11y-contrast .ip-warn { border-color: #000; color: #000; background: #fff; }
html.a11y-dark .ip-warn { border-color: #fff; color: #fff; background: #000; }
html.a11y-contrast .ip-sub { color: #000; }
html.a11y-dark .ip-sub { color: #fff; }

/* Every size (2026-10-28): on wide screens the text keeps to the column beside the photo (js/ink.js measures it and
   shrinks the name if needed); the status line wraps there instead of running onto the photo */
.ink-wide .ink-text { max-width: var(--ink-text-max, 36vw); }
html.a11y-contrast .ink-text, html.a11y-dark .ink-text { max-width: 52rem; }
/* the call / WhatsApp / directions bar shows up to 959px wide: the name, the dots and the scroll hint stay above it */
@media (min-width: 700px) and (max-width: 959px) { .ink-type { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* the round buttons (2026-10-28): back in the corner. An old rule from the film design put them low in the middle,
   over the text of the centred sections; between 900 and 959px the up arrow also sat on the phone bar */
@media (min-width: 900px) and (max-width: 959px) { .to-top { inset-inline-end: 16px; inset-block-end: 96px; } }
@media (min-width: 960px) {
  .wa-float { inset-inline-end: 24px; inset-block-end: 24px; }
  .to-top { inset-inline-end: 29px; inset-block-end: 92px; }
}
/* the open / closed line in the same very dark blue as the other short lines, not grey: grey faded into the photo */
html:not(.a11y-contrast):not(.a11y-dark) .ink .status { color: #0A1640; }
/* phones and tablets: the top bar has no blur there (for smooth scrolling), so it is solid white once the photo has
   opened, or the text scrolling under it showed through; and the footer ends above the up arrow */
@media (max-width: 959px), (pointer: coarse) {
  html:not(.a11y-contrast):not(.a11y-dark) .topbar { background: rgba(255, 255, 255, var(--ink-nav, 1)); }
}
@media (max-width: 959px) { .foot { padding-bottom: calc(156px + env(safe-area-inset-bottom)); } }
/* Arabic letters reach higher and lower than Latin or Hebrew ones: more room between the lines of the big titles */
:root:lang(ar) :is(.ip-h2, .ip-h2-xl) { line-height: 1.25; }
/* phones on their side: little height between the top bar and the call bar, so the name sits on one line, smaller,
   and the lines under it close up */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 959px) {
  .ink-type { padding-top: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .ink-h1 { font-size: clamp(1.8rem, 11vh, 3rem); white-space: nowrap; }
  .ink-h1 > .ink-mask { display: inline-block; vertical-align: top; }
  .ink .ink-eyebrow { margin-top: 6px; }
  .ink-meta { margin-top: 6px; gap: 0 20px; }
  .ink-scroll { display: none; }   /* no room for the scroll hint; the photo itself invites the scroll */
}
/* contrast modes: the entrance is plain text at the top of the page, so it starts below the fixed top bar (73px) */
html.a11y-contrast .ink-type, html.a11y-dark .ink-type { padding-top: 112px; }

/* The blue poster (2026-10-28, owner: make it responsive). It grows with the screen, always 3:4. The canvas is the
   box itself; js/cloth.js leaves a margin inside it (ROOM) where a pulled corner can go, so the poster you see is
   about 1/1.44 of the box: about 215px on a 390px phone, 265px on tablets, 250-285px on computers. The hint under it
   was white on the light paper (an old rule from the red closing page) and hidden on phones; now dark blue and shown
   everywhere. */
.cloth { width: min(80vw, 336px); height: auto; aspect-ratio: 3 / 4; }
@media (min-width: 700px) { .cloth { width: 384px; } }
@media (min-width: 900px) { .ip-contact-grid { grid-template-columns: minmax(0, 1fr) 380px; } .cloth { width: 360px; } }
@media (min-width: 1200px) { .ip-contact-grid { grid-template-columns: minmax(0, 1fr) 420px; } .cloth { width: 408px; } }
@media (max-height: 520px) and (orientation: landscape) { .cloth { width: min(48vw, 264px); } }
#contact .closing-hint { display: block; margin: 4px 0 0; text-align: center; font-weight: 500; }
html:not(.a11y-contrast):not(.a11y-dark) #contact .closing-hint { color: #0A1640; }
html.a11y-contrast #contact .closing-hint { color: #000; }
html.a11y-dark #contact .closing-hint { color: #fff; }
/* the call / WhatsApp / directions bar on the narrowest phones: a word never breaks in the middle ("Звонок") */
.ab span { white-space: nowrap; }
@media (max-width: 359px) { .ab { font-size: 13px; gap: 5px; } .ab svg { width: 16px; height: 16px; } }
/* the map a little smaller (2026-10-28, owner request): 16:10 instead of 4:3, about 15% less tall */
.ip-map { aspect-ratio: 16 / 10; }
/* navigation (2026-10-28, owner request): Google Maps and Waze as two equal buttons, each with its own icon; stacked on
   phones, side by side when there is room; "copy address" stays a text link under them */
.ip-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: stretch; }
.ip-nav .ip-btn { justify-content: center; text-align: center; padding-block: 10px; line-height: 1.35; }
.ip-nav .ip-link { grid-column: 1 / -1; justify-self: start; }