/* LIFTED VERBATIM FROM THE PROTOTYPE - do not edit this file.
 *
 * Source: docs/prototype/standing-close.html  (its single <style> block)
 *
 * Every value here is a decision Jacki already took. Re-authoring them is how a design
 * gets quietly replaced by an approximation of itself (CLAUDE.md 13).
 *
 * To change anything here, change the prototype and re-run scripts/adopt_prototype.py.
 * A test asserts the body of this file is byte-identical to the prototype's <style>.
 */

  * { box-sizing: border-box; }

  :root,
  [data-wall="dark"] {
    --wall: #101113;
    --wall-2: #17181B;
    --ink: #EDEBE5;
    --ink-soft: #9C9B94;
    --ink-faint: #6E6D67;
    --line: #2A2B2F;
    --gold: #C79A4B;
    --glow: rgba(255, 246, 228, .12);
    --shadow: 0 40px 90px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .05);
  }

  [data-wall="gallery"] {
    --wall: #F2F1ED;
    --wall-2: #E9E8E3;
    --ink: #17181A;
    --ink-soft: #56584F;
    --ink-faint: #8A8C83;
    --line: #DCDAD3;
    --gold: #7C5C22;
    --glow: rgba(0, 0, 0, .05);
    --shadow: 0 34px 64px -34px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .07);
  }

  [data-wall="cream"] {
    --wall: #EFE7D8;
    --wall-2: #E6DCC9;
    --ink: #1B1813;
    --ink-soft: #5A5347;
    --ink-faint: #8D8677;
    --line: #DCD1BC;
    --gold: #7C5C22;
    --glow: rgba(0, 0, 0, .05);
    --shadow: 0 34px 64px -34px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .07);
  }

  [data-wall="white"] {
    --wall: #FFFFFF;
    --wall-2: #F5F5F5;
    --ink: #131313;
    --ink-soft: #545454;
    --ink-faint: #8A8A8A;
    --line: #E2E2E2;
    --gold: #7C5C22;
    --glow: rgba(0, 0, 0, .04);
    --shadow: 0 34px 64px -34px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .06);
  }

  html, body { height: 100%; }

  body {
    margin: 0;
    background: var(--wall);
    color: var(--ink);
    font-family: Assistant, system-ui, -apple-system, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    transition: background .5s ease, color .5s ease;
  }

  .app {
    direction: rtl;
    height: 100dvh;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);   /* without this the widest row sets the width and a phone scrolls sideways */
  }

  /* ---------------- top bar ---------------- */

  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 26px; border-bottom: 1px solid var(--line);
  }

  .brand { font-size: 17px; font-weight: 400; letter-spacing: .07em; }

  .topnav { display: flex; align-items: center; gap: 20px; }
  .navlink {
    font: inherit; font-size: 13px; background: none; border: none; padding: 2px 0 3px;
    color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
  }
  .navlink:hover { color: var(--ink); }
  .navlink[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
  .navlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .tools { display: flex; align-items: center; gap: 14px; }

  .toolbtn {
    font: inherit; font-size: 12.5px;
    background: none; border: 1px solid var(--line); color: var(--ink-soft);
    padding: 6px 13px; cursor: pointer; border-radius: 2px;
    transition: color .2s, border-color .2s;
  }
  .toolbtn:hover { color: var(--ink); border-color: var(--ink-faint); }
  .toolbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* wall swatches — a column under the name, below the rule.
     They were beside the search field and read as "find me a picture in this
     colour"; here they clearly belong to the wall, and they appear only on it. */
  /* in the top bar, under the name and above the rule */
  .swatches { display: flex; flex-direction: row; gap: 6px; align-items: center; }
  .swatches .sw { width: 14px; height: 14px; }
  @media (max-width: 899px) {
    /* one row: the name, the menu, and a small English chip in the corner;
       the four wall squares sit under the name, no wider than the name itself. */
    .topbar { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; padding: 12px 16px; }
    .brand { order: 1; }
    /* the menu shares the name's row; five items do not fit a phone, so the row
       scrolls sideways rather than pushing the menu onto a line of its own */
    .topnav {
      order: 2; flex: 1 1 0; min-width: 0; justify-content: flex-start; gap: 12px;
      overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav .navlink { font-size: 12px; white-space: nowrap; flex: none; }
    .tools { order: 3; }
    .swatches { order: 4; width: 100%; margin-top: 0; }
  }
  .sw {
    width: 20px; height: 20px; padding: 0; cursor: pointer; border-radius: 1px;
    border: 1px solid var(--ink-faint);
    transition: transform .18s, box-shadow .18s, border-color .18s;
  }
  .sw:hover { transform: translateY(-1px); }
  .sw[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
  .sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .sw.d { background: #101113; }
  .sw.g { background: #F2F1ED; }
  .sw.c { background: #EFE7D8; }
  .sw.w { background: #FFFFFF; }

  /* ---------------- stage ---------------- */

  .main { position: relative; overflow: hidden; min-width: 0; }   /* a grid item will not shrink below min-content without this — it cost 32px on a phone */

  .stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }

  /* ---------------- search ---------------- */

  .searchbox { position: relative; }
  .searchbox input {
    font: inherit; font-size: 13px; direction: rtl; width: 230px; height: 32px;
    background: none; border: 1px solid var(--line); color: var(--ink);
    padding: 0 12px; border-radius: 2px;
    transition: width .25s ease, border-color .2s, background .2s;
  }
  .searchbox input::placeholder { color: var(--ink-faint); transition: opacity .3s; }
  .searchbox input.fading::placeholder { opacity: 0; }
  .searchbox input:hover { border-color: var(--ink-faint); }
  .searchbox input:focus {
    width: 300px; outline: none; border-color: var(--gold); background: var(--wall-2);
  }
  .sugg .try {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px;
  }
  .sugg .try button {
    width: auto; padding: 6px 11px; border: 1px solid var(--line); border-radius: 2px;
    font-size: 12.5px; color: var(--ink-soft);
  }
  .sugg .try button:hover { border-color: var(--gold); color: var(--gold); background: none; }

  .sugg {
    position: absolute; top: 36px; inset-inline-start: 0; min-width: 260px; z-index: 30;
    background: var(--wall-2); border: 1px solid var(--line);
    box-shadow: 0 24px 44px -28px rgba(0,0,0,.8);
    padding: 8px 0; max-height: 60vh; overflow-y: auto;
  }
  .sugg[hidden] { display: none; }
  .sugg .sg { font-size: 10px; letter-spacing: .16em; color: var(--ink-faint); padding: 8px 14px 4px; }
  .sugg button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: right;
    font: inherit; font-size: 13px; background: none; border: none; cursor: pointer;
    color: var(--ink-soft); padding: 7px 14px;
  }
  .sugg button:hover, .sugg button:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); outline: none; }
  .sugg .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
  .sugg .sub { color: var(--ink-faint); font-size: 11.5px; margin-inline-start: auto; }

  .facets { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .facet-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .facet-row .fl { margin: 0; min-width: 62px; }
  .swatch-chip { display: inline-flex; align-items: center; gap: 7px; }
  .swatch-chip i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(128,128,128,.5); display: inline-block; }

  .active-filters { margin-top: 12px; }
  .active-filters .cat { border-color: var(--gold); color: var(--gold); }
  .active-filters .cat::after { content: " ×"; }

  /* results keep the equal-area feel but read in strict order — rank is information */
  .results { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px 26px; align-items: end; }
  .results .plate { margin-top: 0 !important; }

  .noresults { padding: 30px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
  .noresults p { margin: 0; color: var(--ink-soft); font-size: 15px; }

  .setnote {
    display: inline-flex; align-items: center; gap: 8px; font-size: 11px;
    color: var(--gold); margin-inline-start: 10px;
  }
  .setnote button {
    font: inherit; font-size: 11px; background: none; border: none; padding: 0;
    color: var(--ink-faint); cursor: pointer; border-bottom: 1px solid var(--line);
  }
  .setnote button:hover { color: var(--ink-soft); }

  @media (max-width: 720px) {
    .searchbox input { width: 110px; }
    .searchbox input:focus { width: 160px; }
    .results { grid-template-columns: 1fr; gap: 30px; }
  }

  /* ---------------- static pages ---------------- */

  .page { position: absolute; inset: 0; overflow-y: auto; display: none; }
  .app[data-view="gallery"] .stage { display: block; }
  .app[data-view="gallery"] .page { display: none; }
  .app:not([data-view="gallery"]) .stage { display: none; }
  .app[data-view="category"] #pageCategory { display: block; }
  .app[data-view="about"] #pageAbout { display: block; }
  .app[data-view="photogs"] #pagePhotogs { display: block; }
  .app[data-view="photog"] #pagePhotog { display: block; }
  .app[data-view="admin"] #pageAdmin { display: block; }
  .app[data-view="search"] #pageSearch { display: block; }
  .app[data-view="checkout"] #pageCheckout { display: block; }
  .app[data-view="thanks"] #pageThanks { display: block; }
  .app[data-view="legal"] #pageLegal { display: block; }
  .app[data-view="shared"] #pageShared { display: block; }
  .app[data-view="work"] #pageWork { display: block; }
  .app[data-view="contact"] #pageContact { display: block; }
  .app[data-view="recs"] #pageRecs { display: block; }

  /* ---------------- admin: collection editor ---------------- */

  /* the wall label always sits on the reading side, so this cluster lives on the
     opposite one — in both directions, and never on top of the text */
  .bottombar {
    position: fixed; inset-block-end: 14px; inset-inline-end: 20px; z-index: 22;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end;
    max-width: min(62vw, 640px);
  }

  .adminlink {
    font: inherit; font-size: 11px; letter-spacing: .18em;
    background: none; border: 1px solid var(--line); color: var(--ink-faint);
    padding: 6px 12px; border-radius: 2px; cursor: pointer;
    transition: color .2s, border-color .2s;
  }
  .adminlink:hover { color: var(--ink); border-color: var(--ink-faint); }
  .adminlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .app[data-view="admin"] .adminlink { display: none; }

  .admin-head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
  .ad-intro { display: flex; flex-direction: column; gap: 10px; }

  .ad-controls {
    display: flex; flex-wrap: wrap; gap: 30px;
    border-block: 1px solid var(--line); padding: 16px 0; margin-bottom: 34px;
  }
  .ad-field { display: flex; flex-direction: column; gap: 0; }
  .ad-count { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; font-size: 14px; }

  .ad-wall { position: relative; }

  .ad-tile { position: relative; cursor: grab; }
  .ad-tile.dragging { opacity: .35; cursor: grabbing; }
  .ad-tile.over::before {
    content: ""; position: absolute; inset-inline-start: -12px; top: 0; bottom: 0;
    width: 3px; background: var(--gold);
  }
  .ad-tile canvas { display: block; width: 100%; box-shadow: var(--shadow); }

  .ad-bar {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
    font-size: 12px; color: var(--ink-faint); flex-wrap: wrap;
  }
  .ad-bar .pos {
    font-variant-numeric: tabular-nums; letter-spacing: .1em;
    border: 1px solid var(--line); padding: 2px 7px; border-radius: 2px;
  }
  .ad-tile.pinned .pos { border-color: var(--gold); color: var(--gold); }
  .ad-bar .nm { color: var(--ink-soft); }
  .ad-bar .wm { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .ad-bar .wm.strong { color: var(--gold); }
  .ad-act {
    font: inherit; font-size: 11.5px; background: none; border: none; padding: 2px 0;
    color: var(--ink-faint); border-bottom: 1px solid transparent; cursor: pointer;
  }
  .ad-act:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
  .ad-act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .ad-tile.hidden-work { opacity: .38; }
  .ad-tile.hidden-work canvas { filter: grayscale(1); }

  .ad-divider {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
    margin: 8px 0 22px; color: var(--gold); font-size: 12px; letter-spacing: .1em;
  }
  .ad-divider::before, .ad-divider::after {
    content: ""; height: 1px; background: color-mix(in srgb, var(--gold) 45%, transparent); flex: 1;
  }

  .ad-note { font-size: 12px; }

  /* ---------------- language ---------------- */
  .app[data-lang="en"] { direction: ltr; text-align: left; }
  .app[data-lang="en"] .spec, .app[data-lang="en"] .wl { text-align: left; }
  .t-en { display: none; }
  .app[data-lang="en"] .t-he { display: none; }
  .app[data-lang="en"] .t-en { display: inline; }
  .app[data-lang="en"] div.t-en, .app[data-lang="en"] p.t-en { display: block; }

  /* ---------------- favourites ---------------- */
  .ghost.fav { display: inline-flex; align-items: center; gap: 7px; }
  .ghost.fav svg { width: 15px; height: 15px; flex: none; }
  .ghost.fav.on { color: var(--gold); border-bottom-color: var(--gold); }
  .ghost.fav.on svg { fill: var(--gold); }

  .savedwrap { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
  .savedgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .saveditem { position: relative; background: none; border: none; padding: 0; cursor: pointer; text-align: inherit; }
  .saveditem canvas { display: block; width: 100%; aspect-ratio: 4/3; box-shadow: var(--shadow); }
  .saveditem span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
  .sharebox {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    border: 1px solid var(--line); padding: 12px 14px; font-size: 13px; color: var(--ink-soft);
  }
  .sharebox code {
    font-family: ui-monospace, monospace; font-size: 12px; color: var(--gold);
    direction: ltr; unicode-bidi: embed;
  }

  /* ---------------- footer ---------------- */
  .footlinks {
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
    font-size: 11.5px; color: var(--ink-faint);
  }
  .footlinks button {
    font: inherit; background: none; border: none; padding: 0; color: inherit; cursor: pointer;
    border-bottom: 1px solid transparent;
  }
  .footlinks button:hover { color: var(--ink-soft); border-bottom-color: var(--line); }
  .app:not([data-view="gallery"]) .footlinks { display: none; }

  .sitefoot {
    border-top: 1px solid var(--line); margin-top: 40px; padding: 22px 0 6px;
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--ink-faint);
  }
  .sitefoot nav { display: flex; gap: 16px; flex-wrap: wrap; }
  .sitefoot button {
    font: inherit; background: none; border: none; padding: 0; color: var(--ink-soft); cursor: pointer;
    border-bottom: 1px solid transparent;
  }
  .sitefoot button:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }

  .ad-tabs { display: flex; gap: 20px; margin-top: 4px; }
  .adtab {
    font: inherit; font-size: 19px; background: none; border: none; padding: 2px 0 6px;
    color: var(--ink-faint); cursor: pointer; border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s;
  }
  .adtab:hover { color: var(--ink-soft); }
  .adtab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
  .adtab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .ad-pane[hidden] { display: none; }

  /* ---------------- captured events ---------------- */

  .ev-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
  .ev-chip {
    border: 1px solid var(--line); padding: 7px 12px; border-radius: 2px;
    font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  }
  .ev-chip b { color: var(--gold); font-weight: 600; margin-inline-start: 6px; }
  .ev-table td, .ev-table th { text-align: right; font-size: 12.5px; }
  .ev-table tbody td:first-child { color: var(--ink-faint); }
  .ev-empty { padding: 26px 0; color: var(--ink-faint); font-size: 13px; }

  /* ---------------- price lists ---------------- */

  .pr-params {
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    border-block: 1px solid var(--line); padding: 14px 0; margin-bottom: 24px;
  }
  .pr-p { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
  .pr-p input {
    font: inherit; font-size: 13px; width: 72px; text-align: center;
    background: var(--wall-2); border: 1px solid var(--line); color: var(--ink);
    padding: 6px 4px; border-radius: 2px; font-variant-numeric: tabular-nums;
  }
  .pr-p input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

  .pr-bar { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 14px; }
  .pr-info { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 16px; }
  .pr-info strong { color: var(--gold); }

  .pr-tablewrap { overflow-x: auto; border: 1px solid var(--line); }
  .pr-table { border-collapse: collapse; width: 100%; min-width: 640px; font-variant-numeric: tabular-nums; }
  .pr-table th, .pr-table td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line); font-size: 13px; }
  .pr-table thead th {
    position: sticky; top: 0; background: var(--wall-2); z-index: 1;
    font-weight: 400; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--line);
  }
  .pr-table thead th small { display: block; font-size: 10.5px; color: var(--ink-faint); }
  .pr-table tbody th { text-align: right; font-weight: 400; color: var(--ink); white-space: nowrap; }
  .pr-table tbody th small { color: var(--ink-faint); font-size: 11px; margin-inline-start: 6px; }
  .pr-table tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }

  .pr-cell {
    font: inherit; font-size: 13px; width: 76px; text-align: center;
    background: none; border: 1px solid transparent; color: var(--ink);
    padding: 4px 2px; border-radius: 2px; font-variant-numeric: tabular-nums;
  }
  .pr-cell:hover { border-color: var(--line); }
  .pr-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }

  .pr-missing { color: var(--gold); font-size: 12px; }
  .pr-over { color: var(--ink-faint); font-size: 11.5px; }
  .pr-final { color: var(--ink); }
  .pr-final b { font-weight: 600; }

  @media (max-width: 720px) {
    .ad-tabs { gap: 14px; }
    .adtab { font-size: 16px; }
    .pr-params { gap: 8px 16px; }
  }

  /* Two panels, weighted for where the work actually happens: the library is the
     workbench and gets the room; the wall is the reference and stays in view. */
  .ad-layout { display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: start; }
  .ad-main {
    min-width: 0; position: sticky; top: 12px;
    max-height: 84vh; overflow-y: auto; padding-inline-end: 4px;
  }
  .ad-wallhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
  .ad-hint { font-size: 12px; color: var(--ink-faint); }
  .ad-wall { min-height: 200px; gap: 22px 10px; }
  .ad-wall .ad-bar { gap: 7px; font-size: 11px; margin-top: 7px; }
  .ad-wall .ad-act { font-size: 11px; }
  .ad-wall.drop-open { outline: 2px dashed color-mix(in srgb, var(--gold) 60%, transparent); outline-offset: 14px; }

  .ad-lib {
    border: 1px solid var(--line); background: var(--wall-2);
    display: flex; flex-direction: column; min-width: 0;
  }
  .ad-libhead {
    padding: 14px 16px 13px; border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 10px 22px; align-items: start;
  }
  .ad-libhead .fl { grid-column: 1 / -1; margin-bottom: 0; }
  .ad-libhead .ad-search { grid-row: span 3; align-self: start; }
  .ad-libhead .ad-check, .ad-libhead .ad-libcount { grid-column: 1; }
  .ad-search {
    font: inherit; font-size: 13px; direction: rtl;
    background: var(--wall); border: 1px solid var(--line); color: var(--ink);
    padding: 8px 10px; border-radius: 2px; width: 100%;
  }
  .ad-search:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
  .ad-check { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; cursor: pointer; }
  .ad-libcount { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

  /* same thumbnail size as before — more of them per row, not bigger ones */
  .ad-libgrid {
    padding: 14px; display: grid; gap: 14px 12px;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  }

  .ad-libitem {
    position: relative; cursor: grab; border: 1px solid transparent;
    background: none; padding: 0; text-align: right;
    transition: border-color .18s, opacity .18s;
  }
  .ad-libitem canvas { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .ad-libitem .lt { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 5px; line-height: 1.35; }
  .ad-libitem .lby { display: block; font-size: 10.5px; color: var(--ink-faint); }
  .ad-libitem .lstat { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
  .ad-libitem .lstat span { font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .lflag { font-size: 10px; letter-spacing: .04em; color: var(--ink-soft); border-inline-start: 2px solid var(--line); padding-inline-start: 5px; margin-top: 3px; }
  .lflag.strong { color: var(--gold); border-inline-start-color: var(--gold); }
  .ad-sublabel { font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); margin-top: 4px; }
  .ad-libitem:hover { border-color: var(--ink-faint); }
  .libact {
    display: block; width: 100%; margin-top: 6px;
    font: inherit; font-size: 11px; text-align: center;
    background: none; border: 1px solid var(--line); color: var(--ink-soft);
    padding: 5px 0; border-radius: 2px; cursor: pointer;
    transition: color .18s, border-color .18s;
  }
  .libact:hover { color: var(--ink); border-color: var(--ink-faint); }
  .libact:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .ad-libitem.in .libact { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }

  .ad-libitem.in { opacity: .55; cursor: default; }
  .ad-libitem.in canvas, .ad-libitem.in .lt, .ad-libitem.in .lby, .ad-libitem.in .lstat { opacity: .7; }
  .ad-libitem.in::after {
    content: "באוסף"; position: absolute; top: 5px; inset-inline-end: 5px;
    font-size: 10px; letter-spacing: .06em; background: var(--gold); color: var(--wall);
    padding: 2px 6px; border-radius: 2px;
  }
  .ad-libitem.dragging { opacity: .35; }
  .ad-libitem.sel { border-color: var(--gold); }
  .ad-libitem.sel::before {
    content: "✓ נבחרה"; position: absolute; top: 5px; inset-inline-start: 5px; z-index: 1;
    font-size: 10px; letter-spacing: .04em; background: var(--gold); color: var(--wall);
    padding: 2px 6px; border-radius: 2px;
  }

  .ad-selbar {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 16px; border-top: 1px solid var(--line);
    background: var(--wall-2);
  }
  .ad-selbar[hidden] { display: none; }
  .ad-selbar .selcount { font-size: 12.5px; color: var(--gold); font-variant-numeric: tabular-nums; }
  .ad-selbar .ad-act { font-size: 12.5px; }
  .ad-libitem:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  @media (max-width: 1000px) {
    .ad-layout { grid-template-columns: 1fr; }
    .ad-main { position: static; max-height: none; }
    .ad-libhead { grid-template-columns: 1fr; }
    .ad-libhead .ad-search { grid-row: auto; }
  }
  @media (max-width: 560px) {
    .ad-libgrid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px 10px; }
  }

  @media (max-width: 720px) {
    .ad-controls { gap: 18px; }
    .adminlink { inset-block-end: 12px; inset-inline-end: 12px; }
  }
  .app:not([data-view="gallery"]) .labelbar { display: none; }

  .page-in { max-width: 1120px; margin: 0 auto; padding: 54px 30px 70px; }
  .page-in.narrow { max-width: 760px; }

  .page-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 44px; }
  .eyebrow { font-size: 11px; letter-spacing: .22em; color: var(--ink-faint); }
  .page h1 { font-size: 27px; font-weight: 400; margin: 0; line-height: 1.35; color: var(--ink); }
  .page .lead { margin: 0; font-size: 15px; line-height: 1.9; color: var(--ink-soft); max-width: 62ch; }

  .cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .cat {
    font: inherit; font-size: 13px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line); padding: 7px 15px; cursor: pointer; border-radius: 1px;
    transition: color .18s, border-color .18s;
  }
  .cat:hover { color: var(--ink); border-color: var(--ink-faint); }
  .cat[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
  .cat:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* the hang, unrolled down the page — never a uniform grid */
  .plates { display: grid; grid-template-columns: repeat(12, 1fr); gap: 64px 34px; }

  .plate { padding: 0; border: none; background: none; cursor: pointer; text-align: right; display: block; }
  .plate canvas { display: block; width: 100%; box-shadow: var(--shadow); transition: transform .35s ease; }
  .plate:hover canvas { transform: translateY(-4px); }
  .plate .pl { display: flex; flex-direction: column; gap: 2px; margin-top: 13px; }
  .plate .pt { font-size: 14px; color: var(--ink-soft); }
  .plate .pp { font-size: 12.5px; color: var(--ink-faint); }
  .plate:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

  /* span comes from each photograph's own ratio — set per work in script */
  .plate { grid-column: var(--gc, 1 / span 6); }

  /* the photographer's credit — a link wherever it appears */
  .plink {
    font: inherit; font-size: inherit; background: none; border: none; padding: 0;
    color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid var(--line);
    transition: color .18s, border-color .18s;
  }
  .plink:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
  .plink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* photographers index */
  .pgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px 30px; }
  .pg { display: flex; flex-direction: column; gap: 14px; cursor: pointer; background: none; border: none; padding: 0; text-align: right; }
  .pg canvas { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow); transition: transform .35s ease; }
  .pg:hover canvas { transform: translateY(-4px); }
  .pg .pgn { font-size: 16px; color: var(--ink); }
  .pg .pgm { font-size: 12.5px; color: var(--ink-faint); }
  .pg .pgb { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
  .pg:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

  .page-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    border-top: 1px solid var(--line); margin-top: 58px; padding-top: 20px;
    font-size: 13px; color: var(--ink-faint);
  }

  .band { margin: 40px 0 44px; }
  .band canvas { display: block; width: 100%; aspect-ratio: 21/9; box-shadow: var(--shadow); }

  .prose { display: flex; flex-direction: column; gap: 26px; }
  .prose h2 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
  .prose p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--ink-soft); max-width: 62ch; }
  .prose strong { color: var(--ink); font-weight: 600; }
  .stage.dragging { cursor: grabbing; }

  .stage::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 42%, var(--glow), transparent 72%);
    pointer-events: none; transition: opacity .5s ease;
  }
  .app[data-mode="wall"] .stage::before { opacity: .35; }

  .track {
    position: absolute; inset: 0;
    transition: transform .72s cubic-bezier(.22, .68, .24, 1);
    will-change: transform;
  }

  .item {
    position: absolute; padding: 0; border: none; background: none; cursor: pointer;
    transition:
      width .72s cubic-bezier(.22,.68,.24,1), height .72s cubic-bezier(.22,.68,.24,1),
      top .72s cubic-bezier(.22,.68,.24,1), right .72s cubic-bezier(.22,.68,.24,1),
      opacity .6s ease, filter .6s ease;
    opacity: .3; filter: saturate(.55);
  }
  .item.near { opacity: .5; }
  .item.active { opacity: 1; filter: none; cursor: default; }
  .app[data-mode="wall"] .item { opacity: .82; filter: none; cursor: pointer; }
  .app[data-mode="wall"] .item:hover { opacity: 1; }
  .app[data-mode="wall"] .item.active { opacity: 1; }

  .item canvas { display: block; width: 100%; height: 100%; box-shadow: var(--shadow); transition: box-shadow .5s ease; }

  .item .tag {
    position: absolute; inset-inline-start: 0; bottom: -22px;
    font-size: 11px; color: var(--ink-faint); opacity: 0; transition: opacity .3s ease;
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .app[data-mode="wall"] .item:hover .tag,
  .app[data-mode="wall"] .item:focus-visible .tag { opacity: 1; }
  .item:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }

  .nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--wall) 70%, transparent);
    color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer;
    transition: color .2s, border-color .2s, opacity .4s; backdrop-filter: blur(4px);
  }
  .nav:hover { color: var(--ink); border-color: var(--ink-faint); }
  .nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .nav.prev { right: 22px; }
  .nav.next { left: 22px; }
  .app[data-mode="wall"] .nav { opacity: 0; pointer-events: none; }

  /* ---------------- label bar ---------------- */

  /* the footer links sit on the other side of this bar — on a wide screen the
     text must stop before them; on a phone they are below, so it must not. */
  @media (min-width: 900px) { .wl { max-width: min(62ch, calc(100% - 330px)); } }
  /* on a phone the footer links sit over the bottom of the label — leave them room */
  /* on a phone the floating footer covered the label — put it in the flow instead */
  @media (max-width: 899px) {
    .bottombar {
      position: static; max-width: none; width: 100%;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
      gap: 10px 14px; padding: 10px 16px 14px;
      border-top: 1px solid var(--line);
    }
    .bottombar .footlinks { justify-content: center; flex-wrap: wrap; }
  }

  .labelbar {
    border-top: 1px solid var(--line);
    padding: 14px 26px 18px;
    display: block;
    min-height: 76px;
  }

  .wl { display: flex; flex-direction: column; gap: 3px; max-width: 62ch; }
  .wl .counter { font-size: 11px; letter-spacing: .22em; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
  .wl .t { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); }
  .wl .place { font-size: 13.5px; color: var(--ink-soft); }
  .wl .story { font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); margin: 8px 0 0; }

  .actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

  /* the actions belong to the photograph, so they sit on the wall with it —
     in the reserved strip at the foot of the stage, never over the work */
  .stage-actions {
    position: absolute; inset-inline: 26px; bottom: 0; height: 44px;
    justify-content: center; z-index: 3;
  }
  .app[data-mode="wall"] .stage-actions { opacity: 0; pointer-events: none; }
  .stage-actions { transition: opacity .4s ease; }

  .ghost {
    font: inherit; font-size: 13.5px; background: none; border: none;
    color: var(--ink-soft); border-bottom: 1px solid var(--line);
    padding: 0 0 3px; cursor: pointer; transition: color .2s, border-color .2s;
  }
  .ghost:hover { color: var(--ink); border-color: var(--ink-faint); }
  .ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  .ghost.lead { color: var(--gold); border-bottom-color: color-mix(in srgb, var(--gold) 45%, transparent); }
  .ghost.lead:hover { border-bottom-color: var(--gold); }
  .ghost.cart { display: inline-flex; align-items: center; gap: 8px; }
  .ghost.cart svg { width: 16px; height: 16px; flex: none; }

  .app[data-mode="wall"] .wl .story,
  .app[data-mode="wall"] .wl .place { opacity: 0; }
  .wl .story, .wl .place { transition: opacity .4s ease; }

  /* ---------------- money format ---------------- */

  .money {
    display: inline-flex; direction: ltr; gap: .3em; align-items: baseline;
    font-variant-numeric: tabular-nums;
  }

  /* ---------------- drawers ---------------- */

  .scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .4s ease; z-index: 25;
  }
  .app[data-panel="buy"] ~ .scrim,
  .app[data-panel="wallview"] ~ .scrim,
  .app[data-panel="room"] ~ .scrim,
  .app[data-panel="saved"] ~ .scrim { opacity: 1; pointer-events: auto; }

  .drawer {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30; direction: rtl;
    background: var(--wall-2); border-top: 1px solid var(--line);
    box-shadow: 0 -30px 60px -30px rgba(0,0,0,.8);
    transform: translateY(101%);
    transition: transform .5s cubic-bezier(.22,.68,.24,1);
    padding: 46px 30px 28px;
    max-height: 88dvh; overflow-y: auto;
  }
  .app[data-panel="buy"] ~ #drawerBuy { transform: translateY(0); }
  .app[data-panel="wallview"] ~ #drawerWall { transform: translateY(0); }
  .app[data-panel="saved"] ~ #drawerSaved { transform: translateY(0); }
  .app[data-panel="subscribe"] ~ #drawerSubs { transform: translateY(0); }
  .app[data-panel="room"] ~ #drawerRoom { transform: translateY(0); }

  .drawer h3 { font-size: 17px; font-weight: 400; margin: 0 0 3px; }
  .drawer .sub { font-size: 12.5px; color: var(--ink-faint); }
  .drawer .col { display: flex; flex-direction: column; gap: 16px; }
  .fl { font-size: 11px; letter-spacing: .16em; color: var(--ink-faint); display: block; margin-bottom: 9px; }
  .note-small { font-size: 12.5px; color: var(--ink-faint); line-height: 1.7; margin: 0; }

  /* ---- "הקיר שלי" — the request roll-up (A2) ----
     The numerals are the site's gold, not the green of the live page: green carries
     no meaning here, and a colourblind eye should never have to read one (CLAUDE.md §1). */
  .rqwrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
  .rq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
  .rq-work { flex: none; width: 120px; text-align: center; }
  .rq-work canvas { display: block; width: 100%; height: auto; box-shadow: var(--shadow); }
  .rq-sku { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); }
  .rq-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .rq-steps li { display: flex; flex-direction: column; gap: 6px; }
  .rq-n { font-size: 22px; line-height: 1; color: var(--gold); }
  .rq-t { font-size: 14px; color: var(--ink); }
  .rq-d { font-size: 12.5px; line-height: 1.7; color: var(--ink-faint); margin: 0; }
  .rq-route { display: flex; flex-direction: column; gap: 14px; }
  .rq-drop {
    border: 1px dashed var(--line); padding: 26px 18px; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--ink-soft); font-size: 13.5px;
  }
  .rq-drop:hover, .rq-drop.over { border-color: var(--gold); color: var(--ink); }
  .rq-drop small { font-size: 11.5px; color: var(--ink-faint); }
  .rq-plus { font-size: 22px; line-height: 1; color: var(--gold); }
  .rq-shot img { display: block; max-width: 100%; max-height: 260px; box-shadow: var(--shadow); }
  .rq-shot[hidden] { display: none; }
  .rq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .rq-fields input {
    width: 100%; height: 36px; padding: 0 10px; font: inherit; font-size: 13px;
    border: 1px solid var(--line); background: var(--field, #F2F1ED); color: var(--ink);
  }
  .rq-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .rq-or { font-size: 12.5px; color: var(--ink-faint); }
  .rq-route[hidden] { display: none; }

  /* the legal pages: long text, read rather than scanned — one column, generous line
     height, and headings that are quiet because nothing here is a headline. */
  .legal { max-width: 68ch; }
  .legal h2 {
    font-size: 15px; font-weight: 400; color: var(--ink);
    margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--line);
  }
  .legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .legal h3 { font-size: 13.5px; font-weight: 400; color: var(--ink-soft); margin: 20px 0 8px; }
  .legal p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); }
  .legal ul { margin: 0 0 14px; padding-inline-start: 20px; }
  .legal li { font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); margin-bottom: 5px; }
  .legal dl { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
  .legal dt { font-size: 13.5px; color: var(--ink-faint); }
  .legal dd { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

  /* the personal link: the hang, small, with a name on it */
  .sh-fav { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
  .sh-fav button {
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-faint);
    font: inherit; font-size: 12px; display: flex; align-items: center; gap: 5px;
  }
  .sh-fav button:hover { color: var(--ink); }
  .sh-fav button[aria-pressed="true"] { color: var(--gold); }
  .sh-fav svg { width: 14px; height: 14px; }
  .sh-more, .sh-subs { border-top: 1px solid var(--line); }
  #shGrid { margin-bottom: 6px; }
  #shManage, #shAddr { max-width: 68ch; }

  #lgNote { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 68ch; }


  /* the order, on the thanks page: one line per work, the total in the same weight */
  #thSum {
    max-width: 480px; margin: 26px auto 22px; text-align: start;
    display: grid; grid-template-columns: 1fr auto; gap: 10px 18px;
    border-top: 1px solid var(--line); padding-top: 18px;
  }
  #thSum dt { font-size: 13.5px; color: var(--ink); margin: 0; }
  #thSum dd { font-size: 12.5px; color: var(--ink-faint); margin: 0; text-align: end; }
  #thSum dt.grand, #thSum dd.grand {
    border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px;
    font-size: 14px; font-weight: 400; color: var(--ink);
  }
  @media (max-width: 899px) {
    .rq-steps { grid-template-columns: 1fr; gap: 16px; }
    .rq-head { flex-direction: column-reverse; align-items: flex-start; }
    /* the close ✕ sits in that corner — the thumbnail goes to the other one */
    .rq-work { width: 92px; align-self: flex-end; }
  }

  /* updates: a quiet invitation, never a pop-up, never a discount */
  .subswrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
  .subsrow { display: flex; gap: 10px; flex-wrap: wrap; }
  .subsrow input {
    flex: 1 1 240px; min-width: 0;
    background: transparent; border: 1px solid var(--line);
    color: var(--ink); font: inherit; font-size: 14px;
    padding: 11px 13px; border-radius: 2px;
  }
  .subsrow input:focus { outline: none; border-color: var(--ink-faint); }
  .subschoice { display: flex; flex-direction: column; gap: 9px; }
  .subschoice label { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
  .subschoice input { accent-color: var(--accent); margin-top: 2px; }
  .subsdone { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
  /* ---------------- contact and recommendations ---------------- */
  .ct-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 46px; align-items: start; }
  .ct-details { display: flex; flex-direction: column; gap: 20px; font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
  .ct-details a { color: inherit; }
  .ct-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .rec-grid { columns: 2; column-gap: 26px; }
  .rec {
    break-inside: avoid; margin: 0 0 26px; border: 1px solid var(--line);
    padding: 0 0 18px; display: flex; flex-direction: column; gap: 12px;
  }
  .rec canvas { width: 100%; height: auto; display: block; }
  .rec blockquote { margin: 0; padding: 0 18px; font-size: 14.5px; line-height: 1.9; color: var(--ink); }
  .rec .who { padding: 0 18px; font-size: 12.5px; color: var(--ink-faint); }
  .rec .more { align-self: flex-start; margin: 0 18px; }
  .placeholder {
    border: 1px dashed var(--line); padding: 12px 15px; font-size: 12.5px;
    color: var(--ink-faint); line-height: 1.8; margin: 0 0 26px;
  }
  @media (max-width: 900px) {
    .ct-wrap { grid-template-columns: 1fr; gap: 26px; }
    .rec-grid { columns: 1; }
  }

  /* ================= checkout =================
     Four blocks in reading order, and a summary that never shouts.
     The payment block is a SLOT: PayPal today, card clearing later,
     without redesigning the screen. */
  .co-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 46px; align-items: start; }
  .co-block { border-top: 1px solid var(--line); padding: 24px 0 30px; }
  .co-block:first-child { border-top: 0; padding-top: 4px; }
  .co-block h2 {
    font-size: 12px; font-weight: 400; letter-spacing: .16em;
    color: var(--ink-faint); margin: 0 0 18px;
  }
  .co-line { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); }
  .co-line:last-of-type { border-bottom: 0; }
  .co-line canvas { width: 132px; height: 99px; object-fit: cover; background: #0000000d; flex: none; }
  .co-line .co-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .co-line .co-meta strong { font-weight: 400; font-size: 15px; }
  .co-line .co-meta span { font-size: 12.5px; color: var(--ink-faint); }
  .co-line .co-amt { font-size: 15px; white-space: nowrap; }
  .co-rm {
    background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px;
    color: #b3261e; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px;
  }
  .co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .co-fields .wide { grid-column: 1 / -1; }
  .co-fields[hidden] { display: none; }
  .co-fields label { display: block; }
  .co-fields input, .co-fields select, .co-fields textarea {
    width: 100%; background: transparent; border: 1px solid var(--line);
    color: var(--ink); font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 2px;
  }
  .co-fields input:focus, .co-fields select:focus, .co-fields textarea:focus { outline: none; border-color: var(--ink-faint); }
  .co-fields textarea { resize: vertical; line-height: 1.7; }
  .co-fields input.bad { border-color: #b3261e; }
  .co-pay { display: flex; flex-direction: column; gap: 12px; }
  .co-pay label {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    border: 1px solid var(--line); padding: 14px 15px; border-radius: 2px; font-size: 14px;
  }
  .co-pay label[data-on="true"] { border-color: var(--accent); }
  .co-pay input { accent-color: var(--accent); margin-top: 3px; }
  .co-pay small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 4px; line-height: 1.6; }
  .co-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
  .co-side .sum { margin: 0; }
  .co-side .buybtn { width: 100%; }
  .co-err { font-size: 13px; color: #b3261e; }
  .co-opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .co-opt > span { font-size: 12px; color: var(--ink-faint); letter-spacing: .08em; }
  .co-opt .cat { font-size: 12px; padding: 5px 10px; }
  .co-acts { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
  .co-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
  .co-terms input { accent-color: var(--accent); margin-top: 3px; }
  .co-block[hidden] { display: none; }
  .co-done { max-width: 560px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; gap: 16px; }
  .co-done .mark { font-size: 30px; color: var(--accent); }
  .co-done h1 { margin: 0; }
  .co-done[hidden] { display: none; }   /* display:flex would otherwise beat the hidden attribute */
  @media (max-width: 900px) {
    .co-wrap { grid-template-columns: 1fr; gap: 26px; }
    .co-side { position: static; }
    .co-fields { grid-template-columns: 1fr; }
    .co-line canvas { width: 92px; height: 69px; }
  }
  .linklike {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    font: inherit; font-size: 12.5px; color: var(--ink-faint);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .linklike:hover { color: var(--ink); }


  .closebtn {
    position: absolute; top: 12px; inset-inline-start: 20px;
    font: inherit; font-size: 22px; line-height: 1; background: none; border: none;
    color: var(--ink-faint); cursor: pointer; padding: 6px; z-index: 2;
  }
  .closebtn:hover { color: var(--ink); }

  /* --- purchase drawer --- */

  .buy-in {
    max-width: 1160px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr .95fr 1fr; gap: 38px; align-items: start;
  }

  .sample { display: flex; flex-direction: column; gap: 10px; }
  .sample canvas {
    display: block; width: 100%; aspect-ratio: 4/3; background: var(--wall);
    border: 1px solid var(--line);
  }
  .sample .cap { font-size: 12px; color: var(--ink-faint); }

  .types { display: flex; flex-direction: column; }
  .type {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
    font: inherit; font-size: 14px; width: 100%; text-align: right;
    background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 11px 2px; cursor: pointer; color: var(--ink-soft);
    transition: color .18s, border-color .18s;
  }
  .type:hover { color: var(--ink); }
  .type[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
  .type .from { font-size: 12px; color: var(--ink-faint); }
  .type:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .row2 { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
  @media (max-width: 900px) { .row2 { grid-template-columns: 1fr; gap: 16px; } }

  /* the select and the delivery buttons are the same control height */
  .chips.tight { gap: 6px; }
  .chips.tight .cat {
    height: 36px; padding: 0 13px; font-size: 12.5px;
    display: inline-flex; align-items: center;
  }

  .dsel {
    /* wide enough for the largest label the ladder can produce — 250 × 250 ס״מ */
    font: inherit; font-size: 13px; width: 10.5em; height: 36px; direction: rtl;
    background: var(--wall); border: 1px solid var(--line); color: var(--ink);
    padding: 0 10px; border-radius: 2px; font-variant-numeric: tabular-nums;
  }
  .dsel:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

  .sum { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 0; }
  .sum div { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px; color: var(--ink-soft); }
  .sum div.grand { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 2px; color: var(--ink); }
  .sum dt, .sum dd { margin: 0; }
  .sum .grand dd { font-weight: 400; }   /* a price is information, not a call to action */

  .sizes { display: flex; flex-direction: column; }
  .size-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    font: inherit; font-size: 14px; width: 100%; text-align: right;
    background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 11px 2px; cursor: pointer; color: var(--ink-soft);
    transition: color .18s, border-color .18s;
  }
  .size-row:hover { color: var(--ink); }
  .size-row[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
  .size-row .dim { display: flex; gap: 10px; align-items: baseline; }
  .size-row .hint { font-size: 11.5px; color: var(--ink-faint); }
  .size-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
  .total { font-size: 15px; font-weight: 600; color: var(--ink); }
  .buybtn {
    font: inherit; font-size: 14.5px;
    background: var(--gold); border: 1px solid var(--gold); color: var(--wall);
    padding: 13px 30px; cursor: pointer; border-radius: 2px; transition: opacity .2s;
  }
  .buybtn:hover { opacity: .86; }
  .buybtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* --- wall-view drawer --- */

  .wallview-in { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
  .wv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
  .wv-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
  .wv-size {
    font: inherit; font-size: 12.5px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line); padding: 6px 11px; cursor: pointer; border-radius: 1px;
    font-variant-numeric: tabular-nums; transition: color .18s, border-color .18s;
  }
  .wv-size:hover { color: var(--ink); border-color: var(--ink-faint); }
  .wv-size[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
  .wv-size:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .wv-body { display: grid; grid-template-columns: 1fr 186px; gap: 14px; align-items: start; }

  .wv-main { width: 100%; }
  .wv-main canvas {
    display: block; width: 100%; aspect-ratio: 3/2; background: var(--wall);
    border: 1px solid var(--line);
  }

  .wv-thumbs { display: flex; flex-direction: column; gap: 10px; }
  .wv-thumb {
    padding: 0; border: 1px solid var(--line); background: none; cursor: pointer;
    position: relative; transition: border-color .2s, opacity .2s; opacity: .75;
  }
  .wv-thumb canvas { display: block; width: 100%; aspect-ratio: 3/2; }
  .wv-thumb:hover { opacity: 1; }
  .wv-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--gold); }
  .wv-thumb .cap {
    position: absolute; inset-inline-start: 8px; bottom: 6px;
    font-size: 11px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  }
  .wv-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .wv-upload {
    border: 1px dashed var(--line); background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    color: var(--ink-soft); font: inherit; font-size: 13px; padding: 14px; text-align: center;
    transition: border-color .2s, color .2s;
  }
  .wv-upload:hover { color: var(--ink); border-color: var(--ink-faint); }
  .wv-upload .plus { font-size: 22px; line-height: 1; color: var(--gold); }
  .wv-upload small { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }

  /* ---------------- close-up viewer ---------------- */

  .zoomer {
    position: fixed; inset: 0; z-index: 40; direction: rtl;
    background: #0A0B0C; display: flex; align-items: center; justify-content: center;
  }
  .zoomer[hidden] { display: none; }
  .zoomer canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
  .zoomer canvas.dragging { cursor: grabbing; }

  .zoom-bar {
    position: absolute; inset-inline: 0; top: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 22px; color: #E9E7E1;
    background: linear-gradient(rgba(10,11,12,.85), rgba(10,11,12,0));
  }
  .zoom-bar .zt { font-size: 14px; color: #B4B2AA; }
  .zoom-ctl { display: flex; align-items: center; gap: 8px; }
  .zbtn {
    font: inherit; font-size: 15px; line-height: 1;
    width: 34px; height: 34px; border-radius: 2px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
    color: #E9E7E1; cursor: pointer; transition: background .18s;
  }
  .zbtn.wide { width: auto; padding: 0 14px; font-size: 13px; }
  .zbtn:hover { background: rgba(255,255,255,.15); }
  .zbtn:focus-visible { outline: 2px solid #C79A4B; outline-offset: 2px; }
  .zbtn[aria-pressed="true"] { background: #C79A4B; border-color: #C79A4B; color: #0A0B0C; }
  .zlevel { font-size: 12.5px; color: #9A988F; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

  .zoom-note {
    position: absolute; inset-inline-start: 22px; bottom: 16px; margin: 0;
    font-size: 12px; color: #6E6C66;
  }

  @media (max-width: 720px) {
    .zoom-bar { padding: 10px 12px; }
    .zoom-bar .zt { display: none; }
    .zoom-note { font-size: 11px; inset-inline-start: 12px; bottom: 10px; }
  }

  /* ---------------- share, attached to the heart ---------------- */

  .sharepop {
    position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);
    width: min(340px, calc(100% - 32px)); z-index: 6;
    background: var(--wall-2); border: 1px solid var(--line);
    padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 11px;
    box-shadow: 0 26px 50px -30px rgba(0,0,0,.85);
    animation: noticeIn .32s cubic-bezier(.22,.68,.24,1);
  }
  .sharepop[hidden] { display: none; }
  .sp-head { font-size: 12px; color: var(--ink-faint); }

  /* what the recipient actually sees: the photograph and the site. Nothing else. */
  .sp-card { border: 1px solid var(--line); background: var(--wall); }
  .sp-card canvas { display: block; width: 100%; aspect-ratio: 1.91/1; }
  .sp-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
  .sp-meta span { font-size: 12.5px; color: var(--ink); }
  .sp-meta .sp-site { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }

  .sp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
  .sp-btn {
    font: inherit; font-size: 12.5px; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: none; border: 1px solid var(--line); color: var(--ink-soft);
    padding: 8px 10px; border-radius: 2px; cursor: pointer; flex: 1; white-space: nowrap;
    transition: color .18s, border-color .18s;
  }
  .sp-btn svg { width: 15px; height: 15px; flex: none; }
  #spWa:hover { color: #25D366; border-color: #25D366; }
  .sp-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
  .sp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .sp-foot { display: flex; justify-content: space-between; gap: 12px; }
  .sp-remove, .sp-close {
    font: inherit; font-size: 11.5px; background: none; border: none; padding: 0;
    color: var(--ink-faint); cursor: pointer; border-bottom: 1px solid transparent;
  }
  .sp-remove:hover, .sp-close:hover { color: var(--ink-soft); border-bottom-color: var(--line); }

  @media (max-width: 720px) {
    .sharepop { bottom: 50px; }
  }

  /* ---------------- quiet notice ----------------
     Never on arrival, never over the photograph, one at a time. */

  .notice {
    position: fixed; inset-block-end: 52px; inset-inline-start: 20px; max-width: 320px;
    background: var(--wall-2); border: 1px solid var(--line);
    border-inline-start: 2px solid var(--gold);
    padding: 14px 16px 12px; z-index: 24;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 0 20px 44px -28px rgba(0,0,0,.8);
    animation: noticeIn .5s cubic-bezier(.22,.68,.24,1);
  }
  .notice[hidden] { display: none; }
  @keyframes noticeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .notice { animation: none; } }

  .notice .ntag { font-size: 10px; letter-spacing: .18em; color: var(--gold); }
  .notice .ntitle { font-size: 14.5px; font-weight: 400; color: var(--ink); }
  .notice .nbody { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
  .notice .nrow { display: flex; align-items: center; gap: 16px; margin-top: 5px; }
  .notice .ncta {
    font: inherit; font-size: 13px; background: none; border: none; padding: 0;
    color: var(--gold); cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  }
  .notice .ncta:hover { border-bottom-color: var(--gold); }
  .notice .nclose {
    font: inherit; font-size: 12px; background: none; border: none; padding: 0;
    color: var(--ink-faint); cursor: pointer; margin-inline-start: auto;
  }
  .notice .nclose:hover { color: var(--ink-soft); }
  .notice button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  @media (max-width: 720px) {
    .notice { inset-inline: 12px; inset-block-end: 12px; max-width: none; }
    .bottombar { inset-inline-end: 12px; inset-block-end: 10px; gap: 12px; max-width: 70vw; }
    .footlinks { gap: 10px; font-size: 11px; }
  }

  @media (max-width: 1000px) {
    .ad-layout { grid-template-columns: 1fr; }
    .ad-main { position: static; max-height: none; }
    .ad-libhead { grid-template-columns: 1fr; }
    .ad-libhead .ad-search { grid-row: auto; }
  }
  @media (max-width: 560px) {
    .ad-libgrid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px 10px; }
  }

  @media (max-width: 720px) {
    .ad-controls { gap: 18px; }
    .adminlink { inset-block-end: 12px; inset-inline-end: 12px; }
  }
  .app:not([data-view="gallery"]) .labelbar { display: none; }

  .page-in { max-width: 1120px; margin: 0 auto; padding: 54px 30px 70px; }
  .page-in.narrow { max-width: 760px; }

  .page-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 44px; }
  .eyebrow { font-size: 11px; letter-spacing: .22em; color: var(--ink-faint); }
  .page h1 { font-size: 27px; font-weight: 400; margin: 0; line-height: 1.35; color: var(--ink); }
  .page .lead { margin: 0; font-size: 15px; line-height: 1.9; color: var(--ink-soft); max-width: 62ch; }

  .cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .cat {
    font: inherit; font-size: 13px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line); padding: 7px 15px; cursor: pointer; border-radius: 1px;
    transition: color .18s, border-color .18s;
  }
  .cat:hover { color: var(--ink); border-color: var(--ink-faint); }
  .cat[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
  .cat:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* the hang, unrolled down the page — never a uniform grid */
  .plates { display: grid; grid-template-columns: repeat(12, 1fr); gap: 64px 34px; }

  .plate { padding: 0; border: none; background: none; cursor: pointer; text-align: right; display: block; }
  .plate canvas { display: block; width: 100%; box-shadow: var(--shadow); transition: transform .35s ease; }
  .plate:hover canvas { transform: translateY(-4px); }
  .plate .pl { display: flex; flex-direction: column; gap: 2px; margin-top: 13px; }
  .plate .pt { font-size: 14px; color: var(--ink-soft); }
  .plate .pp { font-size: 12.5px; color: var(--ink-faint); }
  .plate:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

  /* span comes from each photograph's own ratio — set per work in script */
  .plate { grid-column: var(--gc, 1 / span 6); }

  /* the photographer's credit — a link wherever it appears */
  .plink {
    font: inherit; font-size: inherit; background: none; border: none; padding: 0;
    color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid var(--line);
    transition: color .18s, border-color .18s;
  }
  .plink:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
  .plink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* photographers index */
  .pgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px 30px; }
  .pg { display: flex; flex-direction: column; gap: 14px; cursor: pointer; background: none; border: none; padding: 0; text-align: right; }
  .pg canvas { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow); transition: transform .35s ease; }
  .pg:hover canvas { transform: translateY(-4px); }
  .pg .pgn { font-size: 16px; color: var(--ink); }
  .pg .pgm { font-size: 12.5px; color: var(--ink-faint); }
  .pg .pgb { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
  .pg:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

  .page-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    border-top: 1px solid var(--line); margin-top: 58px; padding-top: 20px;
    font-size: 13px; color: var(--ink-faint);
  }

  .band { margin: 40px 0 44px; }
  .band canvas { display: block; width: 100%; aspect-ratio: 21/9; box-shadow: var(--shadow); }

  .prose { display: flex; flex-direction: column; gap: 26px; }
  .prose h2 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
  .prose p { margin: 0; font-size: 14.5px; line-height: 2; color: var(--ink-soft); max-width: 62ch; }
  .prose strong { color: var(--ink); font-weight: 600; }
  .stage.dragging { cursor: grabbing; }

  .stage::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 42%, var(--glow), transparent 72%);
    pointer-events: none; transition: opacity .5s ease;
  }
  .app[data-mode="wall"] .stage::before { opacity: .35; }

  .track {
    position: absolute; inset: 0;
    transition: transform .72s cubic-bezier(.22, .68, .24, 1);
    will-change: transform;
  }

  .item {
    position: absolute; padding: 0; border: none; background: none; cursor: pointer;
    transition:
      width .72s cubic-bezier(.22,.68,.24,1), height .72s cubic-bezier(.22,.68,.24,1),
      top .72s cubic-bezier(.22,.68,.24,1), right .72s cubic-bezier(.22,.68,.24,1),
      opacity .6s ease, filter .6s ease;
    opacity: .3; filter: saturate(.55);
  }
  .item.near { opacity: .5; }
  .item.active { opacity: 1; filter: none; cursor: default; }
  .app[data-mode="wall"] .item { opacity: .82; filter: none; cursor: pointer; }
  .app[data-mode="wall"] .item:hover { opacity: 1; }
  .app[data-mode="wall"] .item.active { opacity: 1; }

  .item canvas { display: block; width: 100%; height: 100%; box-shadow: var(--shadow); transition: box-shadow .5s ease; }

  .item .tag {
    position: absolute; inset-inline-start: 0; bottom: -22px;
    font-size: 11px; color: var(--ink-faint); opacity: 0; transition: opacity .3s ease;
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .app[data-mode="wall"] .item:hover .tag,
  .app[data-mode="wall"] .item:focus-visible .tag { opacity: 1; }
  .item:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }

  .nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--wall) 70%, transparent);
    color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer;
    transition: color .2s, border-color .2s, opacity .4s; backdrop-filter: blur(4px);
  }
  .nav:hover { color: var(--ink); border-color: var(--ink-faint); }
  .nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .nav.prev { right: 22px; }
  .nav.next { left: 22px; }
  .app[data-mode="wall"] .nav { opacity: 0; pointer-events: none; }

  /* ---------------- label bar ---------------- */

  .labelbar {
    border-top: 1px solid var(--line);
    padding: 14px 26px 18px;
    display: block;
    min-height: 76px;
  }

  .wl { display: flex; flex-direction: column; gap: 3px; max-width: 62ch; }
  .wl .counter { font-size: 11px; letter-spacing: .22em; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
  .wl .t { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); }
  .wl .place { font-size: 13.5px; color: var(--ink-soft); }
  .wl .story { font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); margin: 8px 0 0; }

  .actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

  /* the actions belong to the photograph, so they sit on the wall with it —
     in the reserved strip at the foot of the stage, never over the work */
  .stage-actions {
    position: absolute; inset-inline: 26px; bottom: 0; height: 44px;
    justify-content: center; z-index: 3;
  }
  .app[data-mode="wall"] .stage-actions { opacity: 0; pointer-events: none; }
  .stage-actions { transition: opacity .4s ease; }

  .ghost {
    font: inherit; font-size: 13.5px; background: none; border: none;
    color: var(--ink-soft); border-bottom: 1px solid var(--line);
    padding: 0 0 3px; cursor: pointer; transition: color .2s, border-color .2s;
  }
  .ghost:hover { color: var(--ink); border-color: var(--ink-faint); }
  .ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  .ghost.lead { color: var(--gold); border-bottom-color: color-mix(in srgb, var(--gold) 45%, transparent); }
  .ghost.lead:hover { border-bottom-color: var(--gold); }
  .ghost.cart { display: inline-flex; align-items: center; gap: 8px; }
  .ghost.cart svg { width: 16px; height: 16px; flex: none; }

  .app[data-mode="wall"] .wl .story,
  .app[data-mode="wall"] .wl .place { opacity: 0; }
  .wl .story, .wl .place { transition: opacity .4s ease; }

  /* ---------------- money format ---------------- */

  .money {
    display: inline-flex; direction: ltr; gap: .3em; align-items: baseline;
    font-variant-numeric: tabular-nums;
  }

  /* ---------------- drawers ---------------- */

  .scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .4s ease; z-index: 25;
  }
  .app[data-panel="buy"] ~ .scrim,
  .app[data-panel="wallview"] ~ .scrim,
  .app[data-panel="room"] ~ .scrim,
  .app[data-panel="saved"] ~ .scrim { opacity: 1; pointer-events: auto; }

  .drawer {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30; direction: rtl;
    background: var(--wall-2); border-top: 1px solid var(--line);
    box-shadow: 0 -30px 60px -30px rgba(0,0,0,.8);
    transform: translateY(101%);
    transition: transform .5s cubic-bezier(.22,.68,.24,1);
    padding: 46px 30px 28px;
    max-height: 88dvh; overflow-y: auto;
  }
  .app[data-panel="buy"] ~ #drawerBuy { transform: translateY(0); }
  .app[data-panel="wallview"] ~ #drawerWall { transform: translateY(0); }
  .app[data-panel="saved"] ~ #drawerSaved { transform: translateY(0); }
  .app[data-panel="subscribe"] ~ #drawerSubs { transform: translateY(0); }
  .app[data-panel="room"] ~ #drawerRoom { transform: translateY(0); }

  .drawer h3 { font-size: 17px; font-weight: 400; margin: 0 0 3px; }
  .drawer .sub { font-size: 12.5px; color: var(--ink-faint); }
  .drawer .col { display: flex; flex-direction: column; gap: 16px; }
  .fl { font-size: 11px; letter-spacing: .16em; color: var(--ink-faint); display: block; margin-bottom: 9px; }
  .note-small { font-size: 12.5px; color: var(--ink-faint); line-height: 1.7; margin: 0; }

  .closebtn {
    position: absolute; top: 12px; inset-inline-start: 20px;
    font: inherit; font-size: 22px; line-height: 1; background: none; border: none;
    color: var(--ink-faint); cursor: pointer; padding: 6px; z-index: 2;
  }
  .closebtn:hover { color: var(--ink); }

  /* --- purchase drawer --- */

  .buy-in {
    max-width: 1160px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr .95fr 1fr; gap: 38px; align-items: start;
  }

  .sample { display: flex; flex-direction: column; gap: 10px; }
  .sample canvas {
    display: block; width: 100%; aspect-ratio: 4/3; background: var(--wall);
    border: 1px solid var(--line);
  }
  .sample .cap { font-size: 12px; color: var(--ink-faint); }

  .types { display: flex; flex-direction: column; }
  .type {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
    font: inherit; font-size: 14px; width: 100%; text-align: right;
    background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 11px 2px; cursor: pointer; color: var(--ink-soft);
    transition: color .18s, border-color .18s;
  }
  .type:hover { color: var(--ink); }
  .type[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
  .type .from { font-size: 12px; color: var(--ink-faint); }
  .type:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .row2 { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
  @media (max-width: 900px) { .row2 { grid-template-columns: 1fr; gap: 16px; } }

  /* the select and the delivery buttons are the same control height */
  .chips.tight { gap: 6px; }
  .chips.tight .cat {
    height: 36px; padding: 0 13px; font-size: 12.5px;
    display: inline-flex; align-items: center;
  }

  .dsel {
    /* wide enough for the largest label the ladder can produce — 250 × 250 ס״מ */
    font: inherit; font-size: 13px; width: 10.5em; height: 36px; direction: rtl;
    background: var(--wall); border: 1px solid var(--line); color: var(--ink);
    padding: 0 10px; border-radius: 2px; font-variant-numeric: tabular-nums;
  }
  .dsel:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

  .sum { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 0; }
  .sum div { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px; color: var(--ink-soft); }
  .sum div.grand { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 2px; color: var(--ink); }
  .sum dt, .sum dd { margin: 0; }
  .sum .grand dd { font-weight: 400; }   /* a price is information, not a call to action */

  .sizes { display: flex; flex-direction: column; }
  .size-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    font: inherit; font-size: 14px; width: 100%; text-align: right;
    background: none; border: none; border-bottom: 1px solid var(--line);
    padding: 11px 2px; cursor: pointer; color: var(--ink-soft);
    transition: color .18s, border-color .18s;
  }
  .size-row:hover { color: var(--ink); }
  .size-row[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
  .size-row .dim { display: flex; gap: 10px; align-items: baseline; }
  .size-row .hint { font-size: 11.5px; color: var(--ink-faint); }
  .size-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
  .total { font-size: 15px; font-weight: 600; color: var(--ink); }
  .buybtn {
    font: inherit; font-size: 14.5px;
    background: var(--gold); border: 1px solid var(--gold); color: var(--wall);
    padding: 13px 30px; cursor: pointer; border-radius: 2px; transition: opacity .2s;
  }
  .buybtn:hover { opacity: .86; }
  .buybtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* --- wall-view drawer --- */

  .wallview-in { max-width: 1160px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
  .wv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
  .wv-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
  .wv-size {
    font: inherit; font-size: 12.5px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line); padding: 6px 11px; cursor: pointer; border-radius: 1px;
    font-variant-numeric: tabular-nums; transition: color .18s, border-color .18s;
  }
  .wv-size:hover { color: var(--ink); border-color: var(--ink-faint); }
  .wv-size[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
  .wv-size:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .wv-body { display: grid; grid-template-columns: 1fr 186px; gap: 14px; align-items: start; }

  .wv-main { width: 100%; }
  .wv-main canvas {
    display: block; width: 100%; aspect-ratio: 3/2; background: var(--wall);
    border: 1px solid var(--line);
  }

  .wv-thumbs { display: flex; flex-direction: column; gap: 10px; }
  .wv-thumb {
    padding: 0; border: 1px solid var(--line); background: none; cursor: pointer;
    position: relative; transition: border-color .2s, opacity .2s; opacity: .75;
  }
  .wv-thumb canvas { display: block; width: 100%; aspect-ratio: 3/2; }
  .wv-thumb:hover { opacity: 1; }
  .wv-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--gold); }
  .wv-thumb .cap {
    position: absolute; inset-inline-start: 8px; bottom: 6px;
    font-size: 11px; color: #FFFFFF; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  }
  .wv-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .wv-upload {
    border: 1px dashed var(--line); background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    color: var(--ink-soft); font: inherit; font-size: 13px; padding: 14px; text-align: center;
    transition: border-color .2s, color .2s;
  }
  .wv-upload:hover { color: var(--ink); border-color: var(--ink-faint); }
  .wv-upload .plus { font-size: 22px; line-height: 1; color: var(--gold); }
  .wv-upload small { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }

  /* ---------------- close-up viewer ---------------- */

  .zoomer {
    position: fixed; inset: 0; z-index: 40; direction: rtl;
    background: #0A0B0C; display: flex; align-items: center; justify-content: center;
  }
  .zoomer[hidden] { display: none; }
  .zoomer canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
  .zoomer canvas.dragging { cursor: grabbing; }

  .zoom-bar {
    position: absolute; inset-inline: 0; top: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 22px; color: #E9E7E1;
    background: linear-gradient(rgba(10,11,12,.85), rgba(10,11,12,0));
  }
  .zoom-bar .zt { font-size: 14px; color: #B4B2AA; }
  .zoom-ctl { display: flex; align-items: center; gap: 8px; }
  .zbtn {
    font: inherit; font-size: 15px; line-height: 1;
    width: 34px; height: 34px; border-radius: 2px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
    color: #E9E7E1; cursor: pointer; transition: background .18s;
  }
  .zbtn.wide { width: auto; padding: 0 14px; font-size: 13px; }
  .zbtn:hover { background: rgba(255,255,255,.15); }
  .zbtn:focus-visible { outline: 2px solid #C79A4B; outline-offset: 2px; }
  .zbtn[aria-pressed="true"] { background: #C79A4B; border-color: #C79A4B; color: #0A0B0C; }
  .zlevel { font-size: 12.5px; color: #9A988F; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

  .zoom-note {
    position: absolute; inset-inline-start: 22px; bottom: 16px; margin: 0;
    font-size: 12px; color: #6E6C66;
  }

  @media (max-width: 720px) {
    .zoom-bar { padding: 10px 12px; }
    .zoom-bar .zt { display: none; }
    .zoom-note { font-size: 11px; inset-inline-start: 12px; bottom: 10px; }
  }

  /* ---------------- explainer ---------------- */

  .note {
    position: fixed; inset-block-end: 20px; inset-inline-start: 20px; max-width: 330px;
    background: var(--wall-2); border: 1px solid var(--line); padding: 15px 17px;
    font-family: Archivo, system-ui, sans-serif; direction: ltr; text-align: left;
    font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
    display: flex; flex-direction: column; gap: 7px; z-index: 20;
    box-shadow: 0 20px 40px -26px rgba(0,0,0,.8);
  }
  .note strong { color: var(--ink); font-weight: 500; }
  .note .close {
    align-self: flex-start; font: inherit; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; background: none; border: none; color: var(--gold);
    padding: 0; cursor: pointer;
  }
  .note[hidden] { display: none; }

  @media (max-width: 1000px) {
    .buy-in { grid-template-columns: 1fr 1fr; }
    .sample { grid-column: 1 / -1; }
    .sample canvas { aspect-ratio: 16/9; }
    .wv-body { grid-template-columns: 1fr 150px; }
  }

  /* ---------------- phone ---------------- */

  @media (max-width: 720px) {
    .topnav { display: none; }
    .topbar { padding: 10px 14px; }
    .brand { font-size: 15px; }
    .tools { gap: 10px; }
    .sw { width: 17px; height: 17px; }
    .toolbtn { padding: 7px 11px; font-size: 12px; }

    .labelbar { min-height: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
    .stage-actions { inset-inline: 12px; height: 40px; gap: 14px; justify-content: space-evenly; }
    .wl .counter { margin-bottom: 3px; }
    .wl .t { font-size: 14.5px; }
    .wl .place { font-size: 12.5px; }
    .wl .story { display: none; }
    .actions { padding-bottom: 0; gap: 22px; }
    .ghost { font-size: 14px; padding: 6px 0; }

    .nav { width: 38px; height: 38px; font-size: 15px; }
    .nav.prev { right: 6px; }
    .nav.next { left: 6px; }
    .app[data-mode="wall"] .nav { display: none; }

    .note { display: none; }

    .drawer {
      padding: 44px 14px calc(16px + env(safe-area-inset-bottom));
      max-height: 92dvh; border-radius: 10px 10px 0 0;
    }
    .drawer::before {
      content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
      width: 42px; height: 4px; border-radius: 2px; background: var(--line);
    }
    .closebtn { top: 14px; font-size: 24px; }
    .buy-in { grid-template-columns: 1fr; gap: 20px; }
    .sample canvas { aspect-ratio: 3/2; }

    /* the money stays put while the finger scrolls the options */
    .buy-in .col:last-child .foot {
      position: sticky; bottom: 0; z-index: 2;
      background: var(--wall-2); border-top: 1px solid var(--line);
      margin: 0 -14px; padding: 12px 14px calc(6px + env(safe-area-inset-bottom));
      justify-content: space-between;
    }
    .buybtn { flex: 1; min-width: 150px; padding: 14px 20px; }
    .buy-in .foot .ghost { display: none; }

    .wv-head { gap: 10px; }
    .wv-body { grid-template-columns: 1fr; gap: 10px; }
    .wv-thumbs {
      flex-direction: row; overflow-x: auto; padding-bottom: 4px;
      scroll-snap-type: x mandatory;
    }
    .wv-thumb { flex: 0 0 46%; scroll-snap-align: start; }
    .wv-upload { flex: 0 0 46%; padding: 10px; }
    .wv-upload small { display: none; }
  }

  @media (max-width: 900px) {
    .plates { gap: 46px 24px; }
  }

  @media (max-width: 720px) {
    .topbar { flex-wrap: wrap; }
    .page-in { padding: 30px 16px 50px; }
    .page h1 { font-size: 22px; }
    .page .lead, .prose p { font-size: 14px; line-height: 1.85; }
    .page-head { margin-bottom: 30px; }
    .plates { grid-template-columns: 1fr; gap: 38px; }
    .plate { grid-column: 1 / -1 !important; margin-top: 0 !important; }
    .plate canvas { max-height: 74dvh; width: auto; max-width: 100%; margin: 0 auto; }
    .band { margin: 26px 0 30px; }
    .band canvas { aspect-ratio: 16/9; }
  }

  @media (max-width: 380px) {
    .wl .t { font-size: 13.5px; }
    .actions { gap: 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .track, .item, .wl, .actions, .drawer { transition: none !important; }
  }
  /* ---- the finish sample ----
     Drawn flat and exactly. CSS 3D produced distorted corners and stray seams,
     so the print is shown straight, and the magnifier paints a precise corner. */
  .fin {
    position: relative; direction: ltr; min-width: 0; contain: paint;
    aspect-ratio: 4/3; width: 100%;
    border: 1px solid var(--line); overflow: hidden;
    background: linear-gradient(180deg, #FAF9F7, #E7E5E0);
    display: flex; align-items: center; justify-content: center;
  }
  /* ===== the print, exactly as photo-art.co.il builds it =====
     These rules are taken verbatim from Jacki's own site (read from the live
     product page 29/08/26, with his permission). Only the sizing variables are
     set from JS, so any ratio and any print type can use them. */
  .ev_perspective { position: relative; perspective: 1200px;
    --ddd: calc(var(--dd) / 2); width: var(--ww); height: var(--hh); }
  .ev_canvas { width: inherit; height: inherit; transform-style: preserve-3d;
    transform: rotateY(-32deg) rotateX(0deg); }
  .ev_edge { position: absolute; backface-visibility: hidden; overflow: hidden;
    outline: rgba(255,255,255,.3) solid 1px; width: inherit; height: inherit; background: #fff; }
  .ev_edge.front { transform: translateZ(0px); }
  .ev_edge.front > img { height: inherit; width: var(--ww); }
  .ev_edge.right { height: inherit; width: var(--dd); right: calc(-1 * var(--ddd));
    transform: rotateY(90deg) translateZ(0px) translateX(var(--ddd)); }
  .ev_edge.right > img { height: inherit; width: var(--ww); transform: rotate(180deg) rotateX(180deg); }
  .ev_edge.left { height: inherit; width: var(--dd);
    transform: rotateY(-90deg) translateZ(var(--ddd)) translateX(calc(-1 * var(--ddd))); }
  .ev_edge.left > img { height: inherit; width: var(--ww); transform: rotate(180deg) rotateX(180deg); }
  .ev_edge.top { height: var(--dd); width: inherit; top: calc(-1 * var(--ddd));
    transform: rotateX(90deg) translateZ(0px) translateY(calc(-1 * var(--ddd))); }
  .ev_edge.top > img { height: var(--hh); width: var(--ww); transform: rotate(180deg) rotateY(180deg); }
  .ev_edge.bottom { height: var(--dd); width: inherit; bottom: calc(-1 * var(--ddd));
    transform: rotateX(-90deg) translateZ(0px) translateY(var(--ddd)); }
  .ev_edge.bottom > img { height: var(--hh); width: var(--ww);
    transform: rotate(180deg) rotateY(180deg); backface-visibility: visible; }
  .ev_edge > img { position: absolute; left: 0; top: 0; max-width: var(--ww); max-height: var(--hh); }
  .ev_back { position: absolute; left: -15px; top: 0; height: inherit; width: calc(100% + 15px);
    transform: rotateY(180deg) translateZ(var(--dd)); box-shadow: rgba(0,0,0,.4) -9px 10px 8px 4px; }
  .ev_canvas .left, .ev_canvas .right, .ev_canvas .top { filter: brightness(93%); }

  /* the three products, exactly as the site distinguishes them */
  .ev_w .ev_edge.right, .capa .ev_edge.right { border: 1px solid rgba(0,0,0,.4); }
  /* his rule, which I had only half-applied — the back panel is narrower on kapa */
  .capa .ev_back { left: -5px !important; width: calc(100% + 5px) !important; }
  .ev_w .ev_edge:not(.front) > img, .capa .ev_edge:not(.front) > img { display: none; }
  .bblack .ev_edge.right { background: #000; }
  .bblack .ev_edge:not(.front) > img { display: none; }
  .bblack .ev_edge.front > img { border: 8px solid #000; }

  .chip-amt { color: var(--ink-faint); font-size: 11.5px; margin-inline-start: 6px; }

  /* ---- the phone's search ----
     The field lived only in the top bar, and three rows of filter chips pushed the
     results off the screen. On a phone the field is on the page itself, and the
     facets sit behind one button — the results come first. */
  .srbar { display: none; gap: 10px; margin-top: 4px; }
  .srbar input {
    flex: 1; min-width: 0; font: inherit; font-size: 16px;
    background: var(--wall-2); border: 1px solid var(--line); color: var(--ink);
    padding: 12px 14px; border-radius: 2px;
  }
  .srbar input:focus { outline: none; border-color: var(--ink-faint); }
  .srbar .ghost { white-space: nowrap; }
  /* the facet wall is gone on every device: what the AI understood is shown as
     words that can be removed, which is an explanation and a correction at once */
  #pageSearch .facets { display: none; }
  .srbar { display: flex; }
  @media (max-width: 899px) {
    #pageSearch .page-head { margin-bottom: 22px; }
    #pageSearch .lead { display: none; }
  }

  /* ---- the phone's actions on a work ----
     On a phone a tap on a photograph did nothing legible. Now the photograph
     opens full screen, and three large targets sit beside the title: save, buy,
     enlarge. Large because they have to be hit without aiming. */
  .pfoot { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
  .pfoot .pl { flex: 1; min-width: 0; }
  .pacts { display: none; }
  .pact {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    background: var(--wall-2); border: 1px solid var(--line);
    color: var(--ink-soft); cursor: pointer;
  }
  .pact svg { width: 22px; height: 22px; }
  .pact[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
  .pact.buy { color: var(--gold); border-color: var(--gold); }

  .bigview {
    position: fixed; inset: 0; z-index: 90; background: #0B0B0C;
    display: flex; align-items: center; justify-content: center;
  }
  .bigview[hidden] { display: none; }
  .bigview img { max-width: 100%; max-height: 82dvh; display: block; }
  .bigclose {
    position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
    color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  }
  .bigbar {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 18px 20px; color: #EDEBE5; font-size: 14px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7));
  }
  .bigacts { display: flex; gap: 10px; }
  .bigbar .pact { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }

  @media (max-width: 899px) {
    .pacts { display: flex; gap: 10px; }
    .plate .pt { font-size: 15px; }
  }

  /* ---- the phone's home page ----
     On a phone the wall (one work, neighbours at the edges, swipe) does not work:
     the screen is too narrow for the neighbours to mean anything. There the home
     page IS the collection hang, without its title and categories. The wall stays
     the front door on a wide screen — design-principles.md §0. */
  #pageHome { display: none; }
  @media (max-width: 899px) {
    .app[data-view="gallery"] .stage { display: none; }
    .app[data-view="gallery"] #pageHome { display: block; }
    .app[data-view="gallery"] .labelbar { display: none; }
    .app[data-view="gallery"] #modeBtn { display: none; }
  }

  /* the phone's search sheet: one field, and the words other people used */
  .searchsheet {
    position: fixed; inset: 0; z-index: 88; display: flex; align-items: flex-start;
    justify-content: center; padding: 64px 16px 16px; background: rgba(0,0,0,.45);
  }
  .searchsheet[hidden] { display: none; }
  .ss-card {
    position: relative; width: 100%; max-width: 460px;
    background: var(--wall); border: 1px solid var(--line); border-radius: 2px;
    padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 12px;
    box-shadow: var(--shadow);
  }
  .ss-card h3 { margin: 0; font-size: 18px; font-weight: 400; }
  .ss-card textarea {
    font: inherit; font-size: 16px; line-height: 1.7; padding: 13px 14px; resize: vertical;
    background: var(--wall-2); border: 1px solid var(--line); color: var(--ink); border-radius: 2px;
  }
  .ss-card textarea:focus { outline: none; border-color: var(--ink-faint); }
  /* the sentence is written in the reader's own direction — set from JS, because
     the sheet sits outside .app and never matched a language selector on it */
  .ss-card { direction: rtl; text-align: right; }
  .searchsheet { align-items: center; padding: 16px; }
  .ss-close {
    position: absolute; top: 8px; inset-inline-end: 10px;
    background: none; border: 0; color: var(--ink-faint); font-size: 24px; line-height: 1; cursor: pointer;
  }

  /* ---- the phone's top bar and plates, last so nothing above overrides them ---- */
  @media (max-width: 899px) {
    /* one row: the name, the menu, English. Then the squares and the collection. */
    .topbar {
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: flex-start; gap: 8px; padding: 12px 16px;
    }
    .brand { order: 1; flex: none; }
    .topnav {
      order: 2; display: flex; flex: 1 1 0; min-width: 0; width: auto;
      justify-content: flex-start; gap: 12px;
      border-top: 0; padding-top: 0; margin-top: 0;
      overflow-x: auto; scrollbar-width: none;
    }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav .navlink { font-size: 12px; white-space: nowrap; flex: none; }
    .tools { display: contents; }
    #langBtn { order: 3; flex: none; font-size: 11px; padding: 4px 8px; letter-spacing: .04em; }
    .swatches { order: 4; width: auto; flex: none; gap: 5px; margin-top: 0; }
    .swatches .sw { width: 16px; height: 16px; }
    #savedBtn { order: 6; margin-inline-start: auto; font-size: 12px; padding: 5px 11px; }
    #modeBtn, .tools .searchbox { display: none; }
  }
  @media (max-width: 899px) {
    /* 1. the four squares together are as wide as the name */
    .swatches { gap: 5px; }
    .swatches .sw { width: 16px; height: 16px; }

    /* 3. English shrinks to a chip in the corner; 4. the search field is gone —
       חיפוש in the menu opens it */
    #modeBtn { display: none; }
    /* the tools stop being a box, so each control can take its own place:
       row 1 — the name, the menu, a small English chip;
       row 2 — the four squares under the name, the collection pinned to the far end. */
    .tools { display: contents; }
    #langBtn { order: 3; flex: none; }
    .swatches { order: 4; width: auto; }
    #savedBtn { order: 6; margin-inline-start: auto; font-size: 12px; padding: 5px 11px; }
    .tools .searchbox { display: none; }
    #langBtn { font-size: 11px; padding: 4px 8px; letter-spacing: .04em; }

    /* 6. smaller action buttons, held a little away from the photograph */
    .pfoot { margin-top: 14px; align-items: center; }
    .pacts { gap: 8px; }
    .pact { width: 38px; height: 38px; }
    .pact svg { width: 18px; height: 18px; }
  }

  /* ---- placement fixes, last so they win over the duplicated block above ---- */
  @media (min-width: 900px) { .wl { max-width: min(62ch, calc(100% - 330px)); } }
  /* on a phone the floating footer covered the label — put it in the flow instead */
  @media (max-width: 899px) {
    .bottombar {
      position: static; max-width: none; width: 100%;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
      gap: 10px 14px; padding: 10px 16px 14px;
      border-top: 1px solid var(--line);
    }
    .bottombar .footlinks { justify-content: center; flex-wrap: wrap; }
  }
  /* in the top bar, under the name and above the rule */
  .swatches { display: flex; flex-direction: row; gap: 6px; align-items: center; }
  .swatches .sw { width: 14px; height: 14px; }
  @media (max-width: 899px) {
    /* one row: the name, the menu, and a small English chip in the corner;
       the four wall squares sit under the name, no wider than the name itself. */
    .topbar { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; padding: 12px 16px; }
    .brand { order: 1; }
    /* the menu shares the name's row; five items do not fit a phone, so the row
       scrolls sideways rather than pushing the menu onto a line of its own */
    .topnav {
      order: 2; flex: 1 1 0; min-width: 0; justify-content: flex-start; gap: 12px;
      overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav .navlink { font-size: 12px; white-space: nowrap; flex: none; }
    .tools { order: 3; }
    .swatches { order: 4; width: 100%; margin-top: 0; }
  }
  /* the text a crawler always has and a visitor opens */
  .pmore {
    background: none; border: 0; padding: 0 6px; cursor: pointer;
    color: var(--ink-faint); font-size: 12px; line-height: 1;
  }
  .pmore:hover { color: var(--ink); }
  .ptext {
    margin: 8px 0 0; max-width: 62ch;
    font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
  }
  .ptext[hidden] { display: none; }

  /* the offer at the head of the column */
  .wv-upload { order: -1; gap: 8px; }
  .wv-hand { width: 34px; height: 34px; color: var(--gold); }
  .wv-lead { font-size: 14px; color: var(--ink); }
  .wv-upload small { max-width: 22ch; }

  /* ---- the work page ---- */
  .crumbs { font-size: 12px; color: var(--ink-faint); margin-bottom: 18px; display: flex; gap: 6px; flex-wrap: wrap; }
  .crumbs button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .crumbs button:hover { color: var(--ink); }
  .wk-hero { margin-bottom: 22px; }
  .wk-hero canvas { display: block; width: 100%; height: auto; box-shadow: var(--shadow); }
  .wk-head { margin-bottom: 34px; }
  /* the title is quiet — the photograph is the headline (design-principles §4) */
  .wk-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .wk-titles { min-width: 0; }
  .wk-head h1 { font-size: 15px; font-weight: 400; margin: 0 0 5px; color: var(--ink-faint); }
  .wk-meta { margin: 0; font-size: 13px; color: var(--ink-faint); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
  #wkBuyBtn { flex: none; }
  .wk-block { border-top: 1px solid var(--line); padding: 26px 0 30px; }
  .wk-h2 { font-size: 12px; font-weight: 400; letter-spacing: .16em; color: var(--ink-faint); margin: 0 0 18px; }
  /* never cropped: each work keeps its own proportions and its own width, and the row
     wraps — the strip reads as a small collection hang, not as a grid of squares. */
  .wk-related { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 20px; }
  .wk-rel { background: none; border: 0; padding: 0; cursor: pointer; text-align: start; width: var(--rw, 220px); }
  .wk-rel canvas { display: block; width: 100%; height: auto; box-shadow: var(--shadow); }
  .wk-rel span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
  /* the promoted block: real, visible, and low on the page */
  .wk-promo { border-top: 1px solid var(--line); padding: 26px 0 10px; max-width: 70ch; }
  .wk-promo h2 { font-size: 15px; font-weight: 400; color: var(--ink-soft); margin: 0 0 10px; }
  .wk-promo p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.9; color: var(--ink-faint); }
  /* the purchase panel and the simulations are the drawers' own markup, moved here */
  #wkSimSlot .wallview-in { padding: 0; }
  /* a drawer has to name the work it belongs to; the page already has it as the h1
     directly above, so the panel's own title is hidden here rather than removed —
     one markup, two presentations. The cross-link to the purchase drawer stays,
     because on this page the purchase panel IS a drawer. */
  /* and the panel's own רכישה link goes too — the page already has that button
     beside the title, a few centimetres above it. */
  #wkSimSlot #wvTitle, #wkSimSlot #toBuy { display: none; }
  #wkSimSlot .wv-head { margin-bottom: 14px; }
  @media (max-width: 899px) {
    .wk-related { gap: 16px 14px; }
    .wk-rel { width: calc(var(--rw, 220px) * .62); }
    .wk-titlerow { flex-direction: column; align-items: stretch; gap: 12px; }
  }

  /* ---- the hint popup on the three tool buttons — Jacki, 30/08 ----
     Three of the buttons name something the site invented: an "אוסף" that is not a
     shopping basket, a "צעד אחורה" that is a distance and not a back button, and a
     search that expects a sentence. Each says so on hover, in a sentence. */
  .hintpop {
    position: fixed; z-index: 90; max-width: 280px;
    background: var(--paper, #fff); color: var(--ink-soft);
    border: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 11px 13px; font-size: 12.5px; line-height: 1.65;
    pointer-events: none;
  }
  .hintpop[hidden] { display: none; }

  .rowbreak { display: none; }

  /* ================= final phone header — appended last on purpose =================
     The stylesheet exists twice in this file (an old duplication), so a rule that is
     not at the very end can be overridden by the copy below it. Everything the phone
     header needs is therefore repeated here, once, at the end. */
  @media (max-width: 899px) {
    .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; padding: 12px 16px; }
    .brand { order: 1; flex: none; }
    .topnav {
      order: 2; display: flex; flex: 1 1 0; min-width: 0; width: auto;
      justify-content: flex-start; gap: 12px;
      border-top: 0; padding-top: 0; margin-top: 0;
      overflow-x: auto; scrollbar-width: none;
    }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav .navlink { font-size: 12px; white-space: nowrap; flex: none; }
    .tools { display: contents; }
    #langBtn { order: 3; flex: none; font-size: 11px; padding: 4px 8px; letter-spacing: .04em; }
    /* a zero-height break: the squares and the collection start a second row */
    .rowbreak { display: block; order: 4; width: 100%; height: 0; }
    .swatches { order: 5; width: auto !important; flex: none; gap: 5px; margin-top: 0; }
    .swatches .sw { width: 16px; height: 16px; }
    #savedBtn { order: 6; margin-inline-start: auto; font-size: 12px; padding: 5px 11px; }
    #modeBtn, .tools .searchbox { display: none; }
    .pfoot { margin-top: 14px; align-items: center; }
    .pacts { display: flex; gap: 8px; }
    .pact { width: 38px; height: 38px; }
    .pact svg { width: 18px; height: 18px; }
  }