/* EMIO MÈR: layout and motion of Shir's look "ab" (A's layout with B's fonts). Values come from tokens.css; the
[data-style="a"] and [data-fonts="b"] rules are the ones that were A's and B's own in the drafts (24.10.2026), kept
as they were (the other styles' rules went in WP1). Hebrew RTL, mobile first, logical properties.
Motion: transform and opacity only (the openings are CSS keyframes, so they start with the first paint). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Tap feedback for links and summaries (buttons, chips, cards and icons have their own scale on :active). */
:where(a, summary) { transition: opacity .2s; }
:where(a, summary):active { opacity: .65; }
body {
margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column;
font: var(--fw-body) var(--fs-md) / 1.6 var(--f-body); -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: var(--fw-head); font-family: var(--f-head); }
p, figure, blockquote, dl, dd { margin: 0; }
p, li, dd { text-wrap: pretty; }
.email { overflow-wrap: break-word; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
b, strong { font-weight: var(--fw-strong); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--s-2); top: -100px; background: var(--surface); padding: var(--s-2) var(--s-3); z-index: 100; }
.skip:focus { top: var(--s-2); }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--sm { width: 18px; height: 18px; }
.page { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: var(--s-6) var(--gutter); text-align: center; }
.fill { background: #F3E3A6; color: #4D3B00; padding: 2px 6px; }
.draft-banner { background: var(--draft-bg); color: var(--draft-ink); text-align: center; font: 400 .8125rem/1.4 var(--f-body); padding: 6px 16px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap);
padding: 13px 26px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: var(--r-btn);
font-size: var(--fs-sm); font-weight: 400; cursor: pointer; transition: scale .25s var(--e), opacity .2s;
}
.btn:active { scale: .96; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.is-busy { opacity: .7; cursor: wait; }
.btn--lg { min-height: 52px; font-size: var(--fs-md); padding-block: 15px; }
.btn--block { display: flex; width: 100%; white-space: normal; text-align: center; } /* a long label wraps (200% text at 320px) */
.btn--line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--light { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.link { color: var(--muted); text-decoration: underline; font-size: var(--fs-sm); }
.link-line { position: relative; display: inline-block; border-block-end: 1px solid currentColor; padding-block-end: 2px; }
.link-line::after { content: ""; position: absolute; inset: -8px -4px; } /* a 44px tap area, the underline where it was */
/* A light sweep across the main buttons: once, then on hover. */
.sheen { position: relative; overflow: hidden; isolation: isolate; }
.sheen::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, #fff0 30%, #ffffff59 50%, #fff0 70%); translate: 110% 0;
animation: sheen 1.2s var(--e) var(--sd, 1.6s) both;
}
.sheen:hover::after { animation: sheen2 1.1s var(--e) both; }
@keyframes sheen { to { translate: -110% 0; } }
@keyframes sheen2 { from { translate: 110% 0; } to { translate: -110% 0; } }
/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 30; color: var(--ink); }
.hdr::before { content: ""; position: absolute; inset: 0; background: var(--bg); z-index: -1; transition: opacity .35s; }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--hdr-h); padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); }
/* Her logo: wordmark.svg (traced from her logo file IMG_0995, 435×64) as a mask, in her mauve (#847272, from the
same file). White over the home opening photo, where the header takes the photo's text colour. */
.logo { display: block; height: min(20px, 5.6vw); aspect-ratio: 435 / 64; background: var(--logo, #847272); -webkit-mask: url(/assets/brand/wordmark.svg) center / contain no-repeat; mask: url(/assets/brand/wordmark.svg) center / contain no-repeat; }
[data-page="home"] .hdr:not(.is-solid) .logo { background: currentColor; }
.nav { display: none; gap: var(--s-6); font-size: var(--fs-sm); }
.nav a { position: relative; padding-block: var(--s-2); }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1px; background: currentColor; scale: 0 1; transform-origin: 100% 50%; transition: scale .4s var(--e); }
.nav a:hover::after, .nav a[aria-current="page"]::after { scale: 1 1; }
.hdr__tools { display: flex; align-items: center; gap: var(--s-1); }
.icon-btn { position: relative; width: var(--tap); height: var(--tap); display: inline-grid; place-items: center; transition: scale .25s var(--e); }
.icon-btn:active { scale: .9; }
/* The number comes from --cart-n on (boot.js before the first paint, cart.js after), so it never blinks. */
html { counter-reset: cartn var(--cart-n, 0); }
.badge::before { content: counter(cartn); }
html[data-cart="0"] .badge, html:not([data-cart]) .badge { display: none; }
.badge {
position: absolute; top: 4px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding-inline: 4px; border-radius: 8px;
background: var(--ink); color: var(--bg); font: 500 10px/16px var(--f-body); text-align: center;
}
/* On the home page the header lies over the opening photo, white, until the page scrolls. */
[data-style="a"] [data-page="home"] .hdr { margin-block-end: calc(var(--hdr-h) * -1); }
[data-style="a"] [data-page="home"] .hdr:not(.is-solid) { color: var(--on-photo); }
[data-style="a"] [data-page="home"] .hdr:not(.is-solid)::before { opacity: 0; }
[data-style="a"] [data-page="home"] .hdr:not(.is-solid) .badge { background: var(--on-photo); color: #000; }
.hdr { transition: color .35s; }
[data-style="a"] [data-page="home"] .hdr { animation: fadein 1s ease .9s both; }
/* The phone menu: a full-screen panel, the links rise one after another. */
/* The phone menu (Lash Room feature 21): a calm opening (the panel fades in and drops 14px, the links rise one after
another), a quick closing (.26s / .2s, all at once; the dialog closes after 300ms, core.js modal). */
.menu { position: fixed; inset: 0; padding: 0; margin: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--ink); overflow: hidden; overflow: clip; }
.menu::backdrop { background: transparent; }
.menu__panel {
position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto;
padding: 0 var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
/* The drop, fade and stagger run in core.js modal() with element.animate() (iPhone-safe, as the cart drawer); these
are the resting states only. */
opacity: 0; transform: translate3d(0, -14px, 0);
}
.menu.is-open .menu__panel { opacity: 1; transform: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); }
.menu__nav { display: grid; gap: var(--s-2); margin-block: var(--s-7) auto; }
.menu__nav a { font: var(--fw-head) clamp(30px, 9vw, 40px) / 1.25 var(--f-head); }
.menu__nav a { opacity: 0; transform: translate3d(0, 14px, 0); }
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu__foot { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--fs-sm); }
.menu__foot a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
/* ---------- Home: the openings ---------- */
.hero { position: relative; }
.hero--a { height: 86svh; min-height: 520px; overflow: hidden; color: var(--on-photo); }
.hero picture { display: contents; } /* its ![]()
is laid out as the section's own */
.hero--a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: settle 2.6s var(--e) both; }
.hero--a img { object-position: 50% 72%; } /* phones: her tall photo, the jars low in it */
@media (min-width: 900px) { .hero--a img { object-position: 50% 68%; } } /* computers: her wide photo, the jars and her hands */
/* the photo is light (cream vase, stone), so the white logo and link get a deeper shade at the bottom */
.hero--a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0000006b, #0000 26%), linear-gradient(#0000 38%, #00000026 55%, #00000085); }
.hero--a .hero__in { position: absolute; inset: auto 0 44px; z-index: 1; text-align: center; padding-inline: var(--gutter); }
.hero__mark { --mh: clamp(38px, 11vw, 90px); font-size: var(--mh); line-height: 1; }
/* The logo cut into its letters: each .ch shows its slice of the same mask (index.html gives --x and --w in the
SVG's units, of 64 high), so the letters can rise one after another. White over the photo. */
.logo-split { position: relative; display: block; margin-inline: auto; height: var(--mh); aspect-ratio: 435 / 64; direction: ltr; }
.logo-split .ch {
position: absolute; inset-block: 0; left: calc(var(--mh) * var(--x) / 64); width: calc(var(--mh) * var(--w) / 64);
background: currentColor;
-webkit-mask: url(/assets/brand/wordmark.svg) no-repeat; mask: url(/assets/brand/wordmark.svg) no-repeat;
-webkit-mask-size: calc(var(--mh) * 435 / 64) var(--mh); mask-size: calc(var(--mh) * 435 / 64) var(--mh);
-webkit-mask-position: calc(var(--mh) * var(--x) / -64) 0; mask-position: calc(var(--mh) * var(--x) / -64) 0;
}
/* The opening (her pick, option 5 on /intros, 27.10): her monogram big in the middle, then it gives way to the name,
letter by letter. At rest the monogram is gone (opacity 0), so it never covers the photo once the page is ready. */
.hero__big { position: absolute; inset: 0 0 14%; z-index: 1; display: grid; place-items: center; opacity: 0; pointer-events: none; animation: bigmono 2.4s ease both; }
.hero__mono {
display: block; height: min(64vw, 50svh); aspect-ratio: 458 / 555; background: currentColor;
-webkit-mask: url(/assets/brand/monogram.svg) center / contain no-repeat; mask: url(/assets/brand/monogram.svg) center / contain no-repeat;
}
.hero__mark .ch { animation: chin 1.1s var(--e) both; animation-delay: calc(1.75s + var(--i) * .07s); }
.hero__sub { font-family: var(--f-head); font-size: 20px; margin: 14px 0 22px; animation: rise 1s var(--e) 2.4s both; }
.hero__link { position: relative; display: inline-block; border-block-end: 1px solid currentColor; padding-block-end: 2px; font-size: 16px; animation: rise 1s var(--e) 2.55s both; }
.hero__link::after { content: ""; position: absolute; inset: -8px -12px; } /* a 44px tap area, the underline where it was */
.intro { text-align: center; padding: 64px var(--gutter) 44px; max-width: 34em; margin-inline: auto; }
.intro h2 { font-size: 30px; line-height: 1.25; margin-block-end: 14px; }
.intro p { color: var(--muted); font-size: 17px; }
/* Section headings */
.sec { padding: 44px var(--gutter) 16px; max-width: 1440px; margin-inline: auto; }
.sec h2 { font-size: 22px; }
[data-style="a"] .sec { text-align: center; padding-block: 64px 24px; }
[data-style="a"] .sec h2 { font-size: 30px; }
[data-style="a"] [data-page="home"] .products .sec { display: none; } /* the intro is a's heading */
/* ---------- Product cards and grids ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; padding-inline: 12px; max-width: 1440px; margin-inline: auto; }
.pcard { display: block; position: relative; }
.pcard .ph { position: relative; background: var(--photo); overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-img); transition: scale .25s var(--e); }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; }
.pcard:active .ph { scale: .96; }
.ph__none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-xs); }
.tag { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--bg); color: var(--ink); padding: 2px 8px; font-size: var(--fs-xs); border-radius: var(--r-chip); }
.pcard { display: flex; flex-direction: column; }
.pcard__nm { font-family: var(--f-head); font-size: 15px; margin-block-start: 12px; unicode-bidi: isolate; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 3 lines: a long name keeps its number */
.pcard__nm:lang(en), .pd__title:lang(en), .line__title:lang(en) { font-family: var(--f-name); letter-spacing: var(--ls-name); text-transform: var(--tt-name); }
/* A face drawn smaller than Heebo (Cormorant) sets --k-name, so the English names keep the Hebrew ones' size */
[data-fonts="b"] .pcard__nm:lang(en) { font-size: calc(15px * var(--k-name, 1)); }
[data-fonts="b"] .pd__title:lang(en) { font-size: calc(26px * var(--k-name, 1)); }
[data-fonts="b"] .line__title:lang(en) { font-size: calc(var(--fs-sm) * var(--k-name, 1)); }
.pcard__pr { margin-block-start: auto; padding-block-start: 2px; } /* prices line up even when a name takes two lines */
.pcard__pr { font-size: 15px; }
[data-style="a"] .pcard { text-align: center; }
[data-style="a"] .pcard__nm { font-weight: 400; }
/* ---------- Mood photos ---------- */
.mood { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 72px 12px 0; max-width: 1440px; margin-inline: auto; }
.mood figure { overflow: hidden; background: var(--photo); }
.mood img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.mood .mood__big { grid-column: 1 / -1; }
.mood .mood__big img { aspect-ratio: 3 / 2; }
/* ---------- One product: the product page and the home page's featured bowl share this ---------- */
.feat { margin-block-start: 72px; background: var(--panel); }
.feat .pd { padding-block: 28px 36px; }
.pd { display: grid; gap: 0; max-width: 1320px; margin-inline: auto; }
.pd__body { padding: 20px var(--gutter) 0; display: grid; gap: var(--s-3); align-content: start; }
.pd__title { font-family: var(--f-head); font-weight: 400; font-size: 26px; text-align: right; unicode-bidi: isolate; overflow-wrap: break-word; min-width: 0; }
.pd__title a { display: block; }
.pd__sub { color: var(--muted); }
.crumbs { max-width: 1320px; margin-inline: auto; padding: var(--s-2) var(--gutter); font-size: var(--fs-sm); }
.crumbs a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); color: var(--muted); }
/* The gallery: photos side by side, swipe on phones; tap to zoom where tapped. */
.gallery { display: grid; gap: var(--s-2); min-width: 0; }
.gallery__main { position: relative; aspect-ratio: 4 / 5; background: var(--photo); overflow: hidden; }
.gallery__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; cursor: zoom-in; }
.slide img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--e); }
.slide img[data-src] { visibility: hidden; }
.slide.zoom { cursor: zoom-out; }
.slide.zoom img { scale: 2.1; }
/* An option's photo fades in over the current one. */
.slide img.swap { position: absolute; inset: 0; opacity: 0; scale: 1.05; transition: opacity .6s var(--e), scale 1s var(--e); }
.slide img.swap.on { opacity: 1; scale: 1; }
.zoom-hint { position: absolute; bottom: 12px; inset-inline-start: 12px; font-size: 13px; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 82%, transparent); pointer-events: none; transition: opacity .4s; }
.gallery__main.is-zoomed .zoom-hint { opacity: 0; }
.gallery__dots { position: absolute; bottom: 14px; inset-inline-end: 14px; display: flex; gap: 6px; pointer-events: none; }
.gallery__dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 70%, transparent); transition: scale .4s var(--e), background .4s; }
.gallery__dots i.on { background: var(--bg); scale: 1.35; }
.gallery__thumbs { display: none; gap: var(--s-2); flex-wrap: wrap; }
.thumb { width: 72px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo); border: 1px solid transparent; opacity: .7; transition: opacity .3s, scale .25s var(--e); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.thumb:active { scale: .94; }
/* The buy box: price, options, quantity, add to cart. */
.buy { display: grid; gap: var(--s-4); }
.price { font-size: var(--fs-lg); overflow: hidden; }
.price .prv, .qn { display: inline-block; }
.opt { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt legend { padding: 0; font-size: var(--fs-sm); margin-block-end: 10px; }
.opt__list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 8px 14px; border: 1px solid var(--line);
border-radius: var(--r-chip); font-size: 15px; background: var(--surface); transition: scale .25s var(--e), border-color .2s, box-shadow .2s;
}
.chip:active span { scale: .96; }
.chip input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip input:disabled + span { opacity: .45; text-decoration: line-through; }
.chip input:disabled { cursor: not-allowed; }
.chip small { font-size: var(--fs-xs); color: var(--muted); }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--swatch-edge); flex: none; }
.qty-row { display: flex; justify-content: space-between; align-items: center; }
.qty { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; }
/* a 44px tap area; the circle (36px, 32px in the drawer) is drawn inside it, so the look stays */
.qty button { position: relative; width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; transition: scale .25s var(--e); }
.qty button::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--line); border-radius: 50%; pointer-events: none; }
.qty button:active { scale: .9; }
.qty button:disabled { opacity: .35; cursor: default; }
.qty output { min-width: 2ch; text-align: center; overflow: hidden; }
.buy__note { color: var(--danger); font-size: var(--fs-sm); }
.buy__ship { color: var(--muted); font-size: var(--fs-sm); }
/* The accordion: description, care, shipping. */
.acc { margin-block-start: var(--s-5); border-block-end: 1px solid var(--line); }
.acc details { border-block-start: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font-size: var(--fs-md); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 14px; height: 14px; flex: none; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transition: rotate .45s var(--e); }
.acc details[open] summary::after { rotate: 135deg; }
.acc__in { padding-block-end: var(--s-4); color: var(--muted); font-size: var(--fs-sm); display: grid; gap: var(--s-2); }
.acc details[open] .acc__in { animation: rise .5s var(--e) both; }
.acc ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: var(--s-1); }
.related { margin-block-start: var(--s-6); }
/* ---------- About teaser (home) ---------- */
.about-teaser { display: grid; gap: 20px; padding: 72px var(--gutter) 0; max-width: 1180px; margin-inline: auto; }
.about-teaser__img { overflow: hidden; background: var(--photo); }
.about-teaser__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-teaser h2 { font-size: 30px; line-height: 1.25; }
.about-teaser p { color: var(--muted); font-size: 17px; }
.about-teaser__txt { display: grid; gap: 18px; justify-items: start; }
/* ---------- Footer ---------- */
.ftr { margin-block-start: 72px; background: var(--ftr-bg); color: var(--ftr-ink); padding: 48px var(--gutter) 40px; }
.ftr__in { max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); justify-items: center; text-align: center; }
.ftr__mark { font-family: var(--f-mark); font-size: 26px; letter-spacing: var(--ls-mark); }
.ftr__tag { color: var(--ftr-muted); }
.ftr__list li, .contact__list li { min-width: 0; max-width: 100%; }
.ftr__list a > span, .contact__list a > span { min-width: 0; }
.ftr__list, .contact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-5); }
.ftr__list a, .ftr__city, .contact__list a, .contact__list .ftr__city { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.ftr__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1) var(--s-4); font-size: var(--fs-sm); color: var(--ftr-muted); }
.ftr__links a { min-height: var(--tap); display: inline-flex; align-items: center; }
[data-style="a"] .ftr { border-block-start: 1px solid var(--line); }
/* ---------- c: the bottom icon bar on phones ---------- */
.bnav { display: none; }
/* ---------- Cart drawer ---------- */
/* The cart drawer (as Lash Room's): the panel slides in from the inline end (the left in Hebrew) over a fading scrim,
88% wide on phones so the page and the scrim show beside it (tap there to close), 440px on desktop; the lines rise
one by one. Closing is quick (.28s ease-in, all at once), and the dialog closes after it (core.js modal). */
.drawer { position: fixed; inset: 0; padding: 0; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--ink); overflow: hidden; overflow: clip; overscroll-behavior: contain; }
/* overflow: clip, not hidden: with hidden, the focus that showModal() puts on the title (still off screen) scrolled the
dialog sideways up to 448px, so the panel was painted open on the first frame and skipped its slide (npm run motion,
25.10). clip can't be scrolled. */
.drawer::backdrop { background: transparent; }
/* The slide and the scrim are driven by core.js modal() with element.animate() (explicit from/to keyframes), not CSS
transitions: on iPhone (25.10) a transition on a panel inside a just-opened