/* Artworks pages (FA 71 /artworks/, EN 2986 /en/artworks-en/) — FooGallery 2427. 2026-10-24.
   Enqueued only on those two pages, on the two about pages (body.zia-art-about) and on every single work
   (inc/artworks/artworks.php adds body.zia-artworks).
   The gallery's FooGallery settings do the structural part: masonry, 3 responsive columns, no
   rounding / shadow / border / hover zoom, captions below each painting (title + date), retina 2x
   thumbnails. This file sets the spacing, the caption typography and the lightbox fixes. */

/* ---- Page: no sidebar (agnar `_layout` = col-1c on both pages). agnar caps `.flex-inner` at 860px
   for reading; lift that cap so the gallery gets the width, and keep the TEXT at agnar's 860px measure
   (the page title's 940px box in layout.css stays aligned with it). The shortcode's wrapping <p> is
   closed by the browser before the gallery <div>, so `.entry > p` never contains the gallery. */
.zia-artworks .flex-inner { max-width: 1400px; }
.zia-artworks .entry > p,
.zia-artworks .entry > .zia-mt-notice { max-width: 860px; margin-inline: auto !important; box-sizing: border-box; } /* !important: the "under revision" box and the EN machine-translation note carry inline margins */

/* ---- Grid ---- */
#foogallery-gallery-2427.fg-masonry { --fg-gutter: 40px !important; max-width: 1320px; margin: 28px auto 44px; }
#foogallery-gallery-2427.fg-masonry .fg-item { margin-bottom: 36px; }
/* Persian: Masonry lays out from the right (originLeft:false, inc/artworks/artworks.php) and positions
   items with `right`, so FooGallery's margin-right gutter would shift every column 40px inwards and
   glue the two left columns together. Same gutter, on the other side. */
html[dir="rtl"] #foogallery-gallery-2427.fg-masonry .fg-item { margin-right: 0; margin-left: var(--fg-gutter); }
/* tablets: two columns (FooGallery itself keeps three down to 481 px) */
@media (max-width: 1024px) {
	#foogallery-gallery-2427.fg-masonry { --fg-gutter: 28px !important; }
	#foogallery-gallery-2427.fg-masonry.fg-col3 { --fg-column-width: var(--fg-col2-width); }
	#foogallery-gallery-2427.fg-masonry .fg-item { margin-bottom: 28px; }
}
/* phones: still two columns, tighter gaps (FooGallery would drop to one column at 320 px) */
@media (max-width: 600px) {
	#foogallery-gallery-2427.fg-masonry { --fg-gutter: 14px !important; margin-top: 18px; }
	#foogallery-gallery-2427.fg-masonry.fg-col3 { --fg-column-width: var(--fg-col2-width); }
	#foogallery-gallery-2427.fg-masonry .fg-item { margin-bottom: 20px; }
}

/* the painting: never cropped, no frame/rounding/shadow, a quiet hover */
#foogallery-gallery-2427 .fg-item-inner,
#foogallery-gallery-2427 .fg-thumb,
#foogallery-gallery-2427 .fg-image-wrap { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
#foogallery-gallery-2427 .fg-image { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; transition: opacity .2s ease; }
#foogallery-gallery-2427 .fg-thumb:hover .fg-image { opacity: .88; }
#foogallery-gallery-2427 .fg-thumb:focus-visible { outline: 2px solid #dd9933; outline-offset: 3px; }

/* captions under the painting: title, then the date — in the site's font (FooGallery sets a system stack) */
#foogallery-gallery-2427,
#foogallery-gallery-2427 .fg-caption,
.fg-panel, .fg-panel .fg-media-caption { font-family: inherit; }
#foogallery-gallery-2427.fg-captions-bottom .fg-item-inner .fg-caption { padding: 12px 4px 0; text-align: center; }
#foogallery-gallery-2427 .fg-caption-inner { display: block !important; padding: 0 !important; }
#foogallery-gallery-2427 .fg-caption-title { display: block; font-size: 15px; line-height: 1.6; font-weight: 600; color: #222; white-space: normal; overflow: visible; -webkit-line-clamp: unset; }
#foogallery-gallery-2427 .fg-caption-desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: #6b6b6b; white-space: normal; overflow: visible; -webkit-line-clamp: unset; }
html[data-theme="dark"] #foogallery-gallery-2427 .fg-caption-title { color: var(--title, #fff); -webkit-text-fill-color: var(--title, #fff); }
html[data-theme="dark"] #foogallery-gallery-2427 .fg-caption-desc { color: var(--muted, #9aa3ad); -webkit-text-fill-color: var(--muted, #9aa3ad); }
@media (max-width: 600px) {
	#foogallery-gallery-2427.fg-captions-bottom .fg-item-inner .fg-caption { padding-top: 8px; }
	#foogallery-gallery-2427 .fg-caption-title { font-size: 13px; }
	#foogallery-gallery-2427 .fg-caption-desc { font-size: 12px; }
}

/* ---- Lightbox (the .fg-panel FooGallery appends to <body>; theme set to dark in the gallery) ---- */
/* Title and caption on their own lines, centred (FooGallery ran them together: «امیدامید رنگ روغن…»). */
.fg-panel .fg-media-caption-title,
.fg-panel .fg-media-caption-description { display: block; text-align: center; }
.fg-panel .fg-media-caption-title { padding-bottom: 4px; border-bottom: 0; font-size: 16px; }
.fg-panel .fg-media-caption-description { font-size: 13px; opacity: .85; }
/* the "caption shown" toggle is a white box when pressed in the dark theme — a quieter grey */
.fg-panel.fg-dark .fg-panel-button[aria-pressed="true"] { background-color: #555; border-color: #444; color: #fff; }
/* Persian: FooGallery's thumbnail strip has no RTL support — it scrolls by offsetLeft, so in an RTL
   box the stage never moves (one thumbnail visible on a phone; the selected one off-screen on a
   desktop). Running the strip itself left-to-right fixes it; the rest of the panel stays RTL. */
html[dir="rtl"] .fg-panel .fg-panel-thumbs { direction: ltr; }


/* ============================================================================================================
   ---- Catalogue (2026-10-25) ----
   The hub ([artwork_catalogue], inc/artworks/shortcode.php) and the work page = the works viewer
   (inc/artworks/single.php). Everything is namespaced .zia-art-*; step 1's rules above are untouched and the
   live FooGallery page is unaffected. Markup contract: the header of inc/artworks/render.php.
   Paintings are NEVER cropped, inverted, tinted or filtered. Logical properties throughout, so one rule serves
   Persian (RTL) and English (LTR); the few physical ones are scoped (html:not([dir="rtl"]) for English).
   Light AND dark follow the site's toggle (html[data-theme="dark"]); the viewer has its own two palettes.
   NATIVE SIZE (owner, 2026-10-26: works whose only picture is small and poor are shown too): a picture is never drawn
   wider than its own file, 1 file pixel per CSS pixel (a 2x screen still gets no more). render.php prints the file's width
   as `--nw` (a plain number) beside `--ar` on the box of every picture (card, featured work, stage, strip item, detail), and
   each width formula below ends in `calc(var(--nw, 100000) * 1px)`: no `--nw` = no cap, and a picture bigger than its box is
   untouched (the cap never wins), so large pictures lay out exactly as before. A picture that ends up smaller than its slot
   (a hub card, a detail) sits centred in the slot, which keeps the row's height, so the row stays justified and the caption
   keeps the line of its neighbours.
   ============================================================================================================ */

/* ------------------------------------------------------------------------------------------------ the hub */
.zia-art-hub {
	--zia-art-title: #1f1f1f; --zia-art-text: #3a3a3a; --zia-art-muted: #666; --zia-art-line: #e6e6e6;
	--zia-art-hair: rgba(0, 0, 0, .07); --zia-art-soft: #faf7f1; --zia-art-accent: #dd9933; --zia-art-ph: #ecebe8;
	--zia-art-link: #8f5300; --zia-art-focus: #8f5300;     /* AA on the light page (the orange alone is 2.2:1) */
	max-width: 1320px; margin: 0 auto 56px;
}
html[data-theme="dark"] .zia-art-hub {
	--zia-art-title: var(--title); --zia-art-text: var(--text); --zia-art-muted: var(--muted); --zia-art-line: var(--border);
	--zia-art-hair: rgba(255, 255, 255, .07); --zia-art-soft: var(--surface); --zia-art-ph: var(--surface2);
	--zia-art-link: #dd9933; --zia-art-focus: #dd9933;
}
.zia-art-hub img { border-radius: 0 !important; }               /* the site rounds content images by 4px */
/* The page title lines up with the pictures (owner, 2026-10-26). layout.css gives every Page's title the box of agnar's 860px text column:
   940px (860 + the 40px side padding of .pad), centred. The hub is as wide as .flex-inner (the 1400px cap above, 40px side padding, 15px
   under 480px: the very padding `.page .page-title .pad` has in layout.css), so on any screen wider than about 960px the centred title
   stood inside the grid's start edge (the right one in Persian, the left one in English) by half the difference. Here the title box
   gets .flex-inner's own width: both are flex-group-wide until the 1400px content cap, i.e. 1400 + 2 x 40 = 1480px border box in agnar's
   content-box sizing (the real column is never wider than 1380px, so the cap only keeps the two rules the same). Then title text and
   first picture start at the same line at every width, in both languages (the h1's own text-align is already `start` in effect: right
   for Persian, left for English). Only where the catalogue is on the page: `:has(.zia-art-hub)` leaves the FooGallery hub (before the
   switch) alone, `:not(.zia-art-about)` the about pages, which keep the 860px text column and its centred title. A browser without
   :has() simply keeps the centred title. */
body.zia-artworks:not(.zia-art-about):has(.zia-art-hub) .page-title { max-width: 1480px; }

.zia-art-hub ul { margin: 0; padding: 0; }
.zia-art-hub ul > li { margin: 0; padding: 0; list-style: none; }   /* agnar: `.entry ul li` brings square bullets */
.zia-art-hub :focus-visible { outline: 2px solid var(--zia-art-focus); outline-offset: 3px; }
.zia-art-hub a { text-decoration: none; }

/* the featured work */
.zia-art-hub .zia-art-featured { margin: 0 0 48px; text-align: center; }
.zia-art-hub .zia-art-hero-link { display: block; width: min(100%, calc(60vh * var(--ar)), calc(var(--nw, 100000) * 1px)); margin-inline: auto; color: inherit; }   /* a small featured work is shown at its own size, title below */
.zia-art-hub .zia-art-hero-pic { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); background: var(--zia-art-ph);
	outline: 1px solid var(--zia-art-hair); outline-offset: -1px; transition: opacity .2s; }
.zia-art-hub .zia-art-hero-link:hover .zia-art-hero-pic { opacity: .92; }
.zia-art-hub .zia-art-featured .zia-art-t { font-size: 18px; }

/* captions: the name, then the year under it (spans, so the site's p / li colour rules do not reach them). No "lost" tag on the hub: its
   entries are the name and the year, nothing else (owner, 2026-10-26; the work page keeps its tag). */
.zia-art-hub .zia-art-cap { display: block; margin-top: 12px; text-align: center; line-height: 1.6; }
.zia-art-hub .zia-art-t { display: block; font-size: 15px; font-weight: 600; color: var(--zia-art-title); -webkit-text-fill-color: var(--zia-art-title); }
.zia-art-hub .zia-art-d { display: block; font-size: 13px; color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); }
.zia-art-hub .zia-art-f { display: block; font-size: 13.5px; line-height: calc(14.5px * 1.6); color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); }   /* the line height of the name beside it: one baseline */
.zia-art-hub a:hover .zia-art-t, .zia-art-hub a:focus-visible .zia-art-t { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }
html[data-theme="dark"] .entry .zia-art-hub .zia-art-t { color: var(--zia-art-title) !important; -webkit-text-fill-color: var(--zia-art-title) !important; }
html[data-theme="dark"] .entry .zia-art-hub a:hover .zia-art-t, html[data-theme="dark"] .entry .zia-art-hub a:focus-visible .zia-art-t { color: var(--zia-art-accent) !important; -webkit-text-fill-color: var(--zia-art-accent) !important; }
html[data-theme="dark"] .entry .zia-art-hub .zia-art-d, html[data-theme="dark"] .entry .zia-art-hub .zia-art-f { color: var(--zia-art-muted) !important; -webkit-text-fill-color: var(--zia-art-muted) !important; }

/* the works: ONE run of justified rows of UNCROPPED pictures, oldest first (no headings, no jump bar, no script; owner
   2026-10-26). Each li carries --ar = width / height: flex-basis = ar x row height and flex-grow = ar, so every card of a
   row ends at the same height; ::after takes the last row's spare width (that row keeps its natural height); the
   max-width stops a lone wide work ballooning. */
.zia-art-hub .zia-art-grid { --row-h: 320px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 44px 30px; margin-top: 12px; }
.zia-art-hub .zia-art-grid::after { content: ""; flex: 999 1 0; }
.zia-art-hub .zia-art-card { --zia-w: 100%; flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; max-width: calc(var(--ar) * var(--row-h) * 1.45); }
/* A card is a two-row grid: the picture's SLOT, then the caption. The slot (::before) is as wide as the card (--zia-w) and as
   tall as the ratio makes it: the height the justified row gave the picture. The picture lies in the same cell, centred; it is
   as wide as the slot unless its own file is narrower (--nw), then it sits smaller in the slot and the row, the caption and its
   neighbours stay where they were. For a picture that fills its slot (every large one) nothing differs from a plain block. */
.zia-art-hub .zia-art-link { display: grid; grid-template-columns: minmax(0, 1fr); color: inherit; }
.zia-art-hub .zia-art-link::before { content: ""; grid-area: 1 / 1; align-self: start; justify-self: center; width: var(--zia-w, 100%); aspect-ratio: var(--ar); }
.zia-art-hub .zia-art-link .zia-art-cap { grid-area: 2 / 1; }
.zia-art-hub .zia-art-pic { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); background: var(--zia-art-ph); outline: 1px solid var(--zia-art-hair); outline-offset: -1px; transition: opacity .2s; }
.zia-art-hub .zia-art-card .zia-art-pic { grid-area: 1 / 1; align-self: center; justify-self: center; width: min(var(--zia-w, 100%), calc(var(--nw, 100000) * 1px)); }
.zia-art-hub .zia-art-link:hover .zia-art-pic, .zia-art-hub .zia-art-link:focus-visible .zia-art-pic { opacity: .9; }

/* Works without a photograph: ONE compact list after the pictures, under its own heading. They have NO page of their own (owner,
   2026-10-26: "I want ALL to be UNLINKED ... only the card information should be displayed in the hub, in front of the artwork, in a
   minimal format"), so the entries are not links: each is the name, the year under it (only when the work has one) and, in front of
   them, the work's card facts as one muted line (medium, size, style, other names, whereabouts, «از میان رفته» as plain words).
   No hairline under the heading, none under the entries, no tag, no box. A row is a two-column grid, name and year on the reading
   side and the facts after them; the padding (9px each side) is the only separator, so two entries are 18px apart and the name-to-year
   gap stays at the line height. On phones (up to 719px) the facts go under the name and the year. */
.zia-art-hub .zia-art-nophoto { margin-top: 64px; }
.zia-art-hub .zia-art-nophoto-h { margin: 0 0 10px; padding: 0; border: 0; font-size: 23px; line-height: 1.5; font-weight: 700; letter-spacing: 0; text-align: start; color: var(--zia-art-title); }
.zia-art-hub .zia-art-nophoto-h span { color: inherit; }                /* agnar: `.entry h2 span` is #bbb */
html[data-theme="dark"] .entry .zia-art-hub .zia-art-nophoto-h { font-weight: 700 !important; }
.zia-art-hub .zia-art-others li { display: grid; grid-template-columns: minmax(9em, 15em) minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 9px 0; font-size: 14.5px; line-height: 1.6; }
.zia-art-hub .zia-art-others .zia-art-t { grid-column: 1; font-size: inherit; font-weight: 400; }   /* display:block and the colours come from the caption rules above */
.zia-art-hub .zia-art-others .zia-art-d { grid-column: 1; font-size: 13px; }
.zia-art-hub .zia-art-others .zia-art-f { grid-column: 2; grid-row: 1 / span 2; }

/* the closing call for photographs */
.zia-art-hub .zia-art-call { max-width: 860px; margin: 64px auto 0; padding: 18px 22px; background: var(--zia-art-soft);
	border-inline-start: 3px solid var(--zia-art-accent); font-size: 15px; line-height: 1.9; color: var(--zia-art-text); }
.zia-art-hub .zia-art-call a { font-weight: 600; color: var(--zia-art-link); -webkit-text-fill-color: var(--zia-art-link); }
.zia-art-hub .zia-art-call a:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }
html[data-theme="dark"] .entry .zia-art-hub .zia-art-call { color: var(--zia-art-text) !important; -webkit-text-fill-color: var(--zia-art-text) !important; }
html[data-theme="dark"] .entry .zia-art-hub .zia-art-call a { color: var(--zia-art-accent) !important; -webkit-text-fill-color: var(--zia-art-accent) !important; }

@media (max-width: 1024px) {
	.zia-art-hub .zia-art-grid { --row-h: 230px; gap: 34px 20px; }
	.zia-art-hub .zia-art-nophoto { margin-top: 52px; }
}
@media (max-width: 599px) {                     /* one work per line, whole, never taller than ~62% of the screen */
	.zia-art-hub .zia-art-featured { margin-bottom: 36px; }
	.zia-art-hub .zia-art-hero-link { width: min(100%, calc(62vh * var(--ar)), calc(var(--nw, 100000) * 1px)); }
	.zia-art-hub .zia-art-grid { gap: 36px; }
	.zia-art-hub .zia-art-card { flex: 1 1 100%; max-width: 100%; }
	/* A definite width from the ratio, so a lazy image that has not started loading already has its final box (with
	   width:auto the box was 0 x 0 until the file arrived and the page jumped under the reader). It is the card's slot
	   (--zia-w). One work per line here, so there is no row to keep justified: the slot is capped by the file's own width
	   too, and a small picture is a small card (caption right under it), not a small picture floating in a tall box. */
	.zia-art-hub .zia-art-card { --zia-w: min(100%, calc(62vh * var(--ar)), calc(var(--nw, 100000) * 1px)); }
	.zia-art-hub .zia-art-nophoto-h { font-size: 20px; }
}
@media (max-width: 719px) {                     /* phones: the facts under the name and the year */
	.zia-art-hub .zia-art-others li { display: block; }
	.zia-art-hub .zia-art-others .zia-art-f { margin-top: 3px; font-size: 13px; line-height: 1.7; }
}

/* ------------------------------------------------------------------------------------ the about pages
   «دربارهٔ آثار» / About the Artworks (inc/artworks/about.php; plan 2026-10-26). Ordinary Pages in the hub's wide, no-sidebar
   column (they also carry body.zia-artworks, so the 860px text measure above applies), scoped to body.zia-art-about:
   the pinned picture on top (the hub's own hero markup), the button, then the site's text with its list of works.
   The button sits OUTSIDE .zia-art-hub, so it carries its own two colours as custom properties:
     light  #8f5300 on white = 6.2:1 (AA; the plain orange is 2.2:1), hover: white on #8f5300 = 6.2:1
     dark   #dd9933 on the page's #14161a = 7.5:1, hover: #111 on #dd9933 = 7.8:1
   Like .zia-book-btn it fights agnar's dark `.entry a` (which sets color AND -webkit-text-fill-color with !important), so
   the dark rules repeat both with !important at a higher specificity. */
body.zia-art-about .zia-art-hub { margin-bottom: 0; }                       /* the button, not the hub's 56px, sets the gap under the picture */
body.zia-art-about .zia-art-hub .zia-art-featured { margin-bottom: 0; }
body.zia-art-about .zia-art-hub div.zia-art-hero-link:hover .zia-art-hero-pic { opacity: 1; }   /* an unlinked picture (its work is not public yet) does not dim like a link */

body.zia-art-about .zia-art-cta { --cta: #8f5300; --cta-ink: #fff; margin: 22px auto 40px; text-align: center; }
html[data-theme="dark"] body.zia-art-about .zia-art-cta { --cta: #dd9933; --cta-ink: #111; }
body.zia-art-about .entry > p + .zia-art-cta { margin-top: 44px; }           /* the closing button, after the list */
body.zia-art-about .zia-art-cta .zia-art-cta-btn {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 10px 30px;
	border: 1.5px solid var(--cta); border-radius: 9px; background: transparent; color: var(--cta); -webkit-text-fill-color: var(--cta);
	font-size: 16px; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
body.zia-art-about .zia-art-cta .zia-art-cta-btn:hover,
body.zia-art-about .zia-art-cta .zia-art-cta-btn:focus-visible { background: var(--cta); color: var(--cta-ink); -webkit-text-fill-color: var(--cta-ink); }
body.zia-art-about .zia-art-cta .zia-art-cta-btn:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
html[data-theme="dark"] .entry .zia-art-cta a.zia-art-cta-btn { color: var(--cta) !important; -webkit-text-fill-color: var(--cta) !important; }
html[data-theme="dark"] .entry .zia-art-cta a.zia-art-cta-btn:hover,
html[data-theme="dark"] .entry .zia-art-cta a.zia-art-cta-btn:focus-visible { color: var(--cta-ink) !important; -webkit-text-fill-color: var(--cta-ink) !important; }
@media (max-width: 599px) {                     /* phones: a full-width target, at most 420px */
	body.zia-art-about .zia-art-cta { margin: 18px auto 32px; }
	body.zia-art-about .zia-art-cta .zia-art-cta-btn { display: flex; width: 100%; max-width: 420px; margin-inline: auto; padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { body.zia-art-about .zia-art-cta .zia-art-cta-btn { transition: none; } }

/* The 30 titles of the list, each linked to its work (a.zia-art-ref, inside the page's own text). The site's link orange
   (#dd9933) is 2.2:1 on white, below WCAG 1.4.3 (4.5:1), so in light mode they take the button's #8f5300 (6.2:1), keeping agnar's
   underline (`.entry a { text-decoration: underline }`, which is what makes them links without colour, 1.4.1); only HOVER goes back
   to the accent (transient, the site's pattern). Keyboard focus keeps the readable #8f5300 (the accent would drop the text to 2.4:1
   on white, audit r2 R2-8) and gets a 2px outline of the same colour instead (6.2:1 on white). Dark mode: the text colour needs
   nothing (agnar's `html[data-theme="dark"] .entry a`, the accent, !important, applies there and wins over the colour rules, which
   carry no !important), but the outline must follow it: #8f5300 on the dark page is only 2.9:1 (below 1.4.11's 3:1), the accent 7.5:1.
   -webkit-text-fill-color is set with `color` because agnar's dark rule sets both. */
body.zia-art-about .entry a.zia-art-ref { color: #8f5300; -webkit-text-fill-color: #8f5300; }
body.zia-art-about .entry a.zia-art-ref:hover { color: #dd9933; -webkit-text-fill-color: #dd9933; }
body.zia-art-about .entry a.zia-art-ref:focus-visible { outline: 2px solid #8f5300; outline-offset: 2px; }
html[data-theme="dark"] body.zia-art-about .entry a.zia-art-ref:focus-visible { outline-color: #dd9933; }

/* ---------------------------------------------------------------------------------- the works viewer (work page)
   A closed environment, like a gallery app. The site's header and footer stay in the DOM but are hidden; a slim
   bar replaces them. Layout of the room (rows: bar, the one scrolling column, the strip):
     normal, desktop   the catalogue panel (.zia-art-side) is sticky on the reading side of the column; the painting
                       fills the first screen; the texts follow.
     fullscreen        bar, panel and strip are gone; the painting alone with its caption; scrolling goes on to the
                       texts, with the catalogue card beside them on the reading side.
     <= 1024 px        no side panel: the painting, its caption (title, date) under it, then the card, then the texts. */
body.zia-art-viewer #header, body.zia-art-viewer #footer { display: none; }
body.zia-art-viewer { overflow: hidden; padding-top: 0 !important; }
html:has(body.zia-art-viewer) { overflow: hidden; overscroll-behavior: none; }

.zia-art-room {
	--zia-art-bar: 48px; --zia-art-strip: 100px; --zia-art-panel: 340px; --zia-art-card-w: 284px;
	--zia-art-top: 0px; --zia-art-vh: 100vh;
	/* light stage (a quiet, warm light) */
	--zia-art-bg: #f4f2ee; --zia-art-strip-bg: #eae7e1; --zia-art-ink: #1d1d1d; --zia-art-text: #3b3b3b; --zia-art-muted: #6b6b6b;
	--zia-art-line: rgba(0, 0, 0, .13); --zia-art-hair: rgba(0, 0, 0, .09); --zia-art-ph: #e7e4de;
	--zia-art-link: #8f5300; --zia-art-accent: #dd9933; --zia-art-thumb: rgba(0, 0, 0, .24);
	--zia-art-focus: #8f5300; --zia-art-nav-op: .65; --zia-art-cur-line: var(--zia-art-ink);   /* light: AA / 3:1 (the orange alone is 2:1) */
	position: fixed; top: var(--zia-art-top); left: 0; right: 0; z-index: 60;
	height: calc(var(--zia-art-vh) - var(--zia-art-top));
	display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--zia-art-bar) minmax(0, 1fr) var(--zia-art-strip);
	background: var(--zia-art-bg); color: var(--zia-art-text); font-size: 15px; line-height: 1.7; font-family: inherit;
}
@supports (height: 100dvh) { .zia-art-room { --zia-art-vh: 100dvh; } }
html[data-theme="dark"] .zia-art-room {            /* near black */
	--zia-art-bg: #111214; --zia-art-strip-bg: #0c0d0f; --zia-art-ink: #fff; --zia-art-text: #d4d8dd; --zia-art-muted: #959ca4;
	--zia-art-line: rgba(255, 255, 255, .12); --zia-art-hair: rgba(255, 255, 255, .07); --zia-art-ph: #1b1d21;
	--zia-art-link: #dd9933; --zia-art-thumb: rgba(255, 255, 255, .18);
	--zia-art-focus: #dd9933; --zia-art-nav-op: .45; --zia-art-cur-line: transparent;
}
body.admin-bar .zia-art-room { --zia-art-top: 32px; }
@media (max-width: 782px) { body.admin-bar .zia-art-room { --zia-art-top: 46px; } }
.zia-art-room *, .zia-art-room *::before, .zia-art-room *::after { box-sizing: border-box; }
.zia-art-room img { border-radius: 0 !important; max-width: none; }
.zia-art-room :focus-visible { outline: 2px solid var(--zia-art-focus); outline-offset: 2px; }
.zia-art-room .zia-art-more:focus { outline: none; }   /* a focus target for the skip link, not a control */
/* The scrolling column is focused by the script (so the arrow keys, PageDown and Space scroll it): Chrome and Safari count a
   script focus before any pointer use as focus-visible, which drew a 2 px line under the bar on every work page (audit m1).
   It is a programmatic focus target like .zia-art-more, not a control. Specificity 0,3,0 beats the :focus-visible rule above. */
.zia-art-room .zia-art-scroll:focus, .zia-art-room .zia-art-scroll:focus-visible { outline: none; }
/* the skip link: first stop of the page, visible only while it has the focus */
.zia-art-room .zia-art-skip { position: absolute; z-index: 5; top: 6px; inset-inline-start: 8px; padding: 8px 14px; background: var(--zia-art-bg); border: 2px solid var(--zia-art-focus);
	color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); font-size: 14px; line-height: 1.5; transform: translateY(-300%); }
.zia-art-room .zia-art-skip:focus { transform: none; }
.zia-art-room a { text-decoration: none; }
.zia-art-room [hidden] { display: none !important; }
/* thin scrollbars that match each palette */
.zia-art-room * { scrollbar-width: thin; scrollbar-color: var(--zia-art-thumb) transparent; }
.zia-art-room ::-webkit-scrollbar { width: 8px; height: 8px; }
.zia-art-room ::-webkit-scrollbar-track { background: transparent; }
.zia-art-room ::-webkit-scrollbar-thumb { background: var(--zia-art-thumb); border-radius: 4px; }

/* ---- the slim bar */
.zia-art-bar { grid-row: 1; display: flex; align-items: center; gap: 22px; min-height: 0; overflow: hidden; padding-inline: 16px 6px;
	border-bottom: 1px solid var(--zia-art-hair); background: var(--zia-art-bg); font-size: 14px; }
.zia-art-room .zia-art-bar a { color: var(--zia-art-text); -webkit-text-fill-color: var(--zia-art-text); white-space: nowrap; }
.zia-art-room .zia-art-bar a:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }
.zia-art-room .zia-art-bar .zia-art-bar-site, .zia-art-room .zia-art-bar .zia-art-bar-all { line-height: 44px; }    /* a 44 px tap target */
.zia-art-room .zia-art-bar .zia-art-bar-site { font-weight: 700; color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); overflow: hidden; text-overflow: ellipsis; }
.zia-art-bar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; }
.zia-art-room .zia-art-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: 0; padding: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	color: var(--zia-art-text); -webkit-text-fill-color: var(--zia-art-text); }
.zia-art-room .zia-art-tool svg { width: 21px; height: 21px; display: block; }
.zia-art-room .zia-art-tool:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); background: none; }
.zia-art-room .zia-art-tool:disabled { opacity: .3; cursor: default; color: var(--zia-art-text); -webkit-text-fill-color: var(--zia-art-text); }
.zia-art-theme svg { fill: currentColor; }
.zia-art-theme .zia-art-sun { display: none; }
html[data-theme="dark"] .zia-art-theme .zia-art-moon { display: none; }
html[data-theme="dark"] .zia-art-theme .zia-art-sun { display: inline; }
.zia-art-room .zia-art-lang { padding: 0 8px; }

/* ---- the scrolling column and its flow (normal, desktop: panel + main column) */
.zia-art-scroll { grid-row: 2; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; outline: none; }
.zia-art-flow {
	--zia-art-first-h: calc(var(--zia-art-vh) - var(--zia-art-top) - var(--zia-art-bar) - var(--zia-art-strip));
	display: grid; grid-template-columns: var(--zia-art-panel) minmax(0, 1fr); grid-template-rows: var(--zia-art-first-h) auto;
}

/* the catalogue panel: sticky on the reading side, as tall as the first screen (it scrolls inside when it must) */
.zia-art-side { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; align-self: start; height: var(--zia-art-first-h);
	display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 30px 28px 22px;
	border-inline-end: 1px solid var(--zia-art-hair); }
.zia-art-room .zia-art-title { margin: 0; padding: 0; border: 0; font-size: 30px; line-height: 1.35; font-weight: 700; letter-spacing: 0; color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); }
.zia-art-date { margin-top: 6px; font-size: 16px; color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); }
.zia-art-room .zia-art-tag { display: inline-block; margin-inline-start: 8px; padding: 0 6px; font-size: 11px; line-height: 1.7; font-weight: 400; vertical-align: 2px;
	color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); border: 1px solid var(--zia-art-line); }
.zia-art-card { margin-top: 26px; }
.zia-art-room .zia-art-h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: 13px; line-height: 1.7; font-weight: 700; letter-spacing: 0; text-transform: none;
	color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); }
.zia-art-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; margin: 0; font-size: 14.5px; line-height: 1.7; }
.zia-art-card dt, .zia-art-card dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--zia-art-line); }
.zia-art-card dt { font-size: 13px; white-space: nowrap; color: var(--zia-art-muted); }
.zia-art-card dd { color: var(--zia-art-ink); }
.zia-art-card dd.zia-art-pre { white-space: pre-line; }   /* the inscription's line breaks (verses, song lines) are kept, both languages */
.zia-art-card dd small { display: block; font-size: 12.5px; color: var(--zia-art-muted); }
.zia-art-room .zia-art-card dd a { color: var(--zia-art-link); -webkit-text-fill-color: var(--zia-art-link); }
.zia-art-room .zia-art-card dd a:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }
.zia-art-room .zia-art-note { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); }
html[data-theme="dark"] .zia-art-room p.zia-art-note { color: var(--zia-art-muted) !important; -webkit-text-fill-color: var(--zia-art-muted) !important; }
/* The note is ONE paragraph: the source note («این تصویر از روی چاپ است.») and, for a picture graded fair or poor, the line «تصویری با
   کیفیت بهتر از این اثر در دست نیست؛ …» whose last words link to the call for photos. Same link colours as the card's links (light
   AA brown, dark orange); the dark rule repeats them with !important and the text-fill colour, like .zia-art-ph a, because the site
   colours links in dark mode through -webkit-text-fill-color. Inherits the room's direction, so it reads right in both languages. */
.zia-art-room .zia-art-note a { color: var(--zia-art-link); -webkit-text-fill-color: var(--zia-art-link); text-decoration: underline; text-underline-offset: 3px; }
.zia-art-room .zia-art-note a:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }
html[data-theme="dark"] .zia-art-room p.zia-art-note a { color: var(--zia-art-link) !important; -webkit-text-fill-color: var(--zia-art-link) !important; }
html[data-theme="dark"] .zia-art-room p.zia-art-note a:hover { color: var(--zia-art-accent) !important; -webkit-text-fill-color: var(--zia-art-accent) !important; }
.zia-art-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: auto; padding-top: 22px; }
.zia-art-room .zia-art-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; font: inherit; font-size: 13.5px; cursor: pointer;
	color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); background: transparent; border: 1px solid var(--zia-art-line); border-radius: 0; }
.zia-art-room .zia-art-btn:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); border-color: var(--zia-art-accent); background: transparent; }
.zia-art-btn svg { width: 17px; height: 17px; }
.zia-art-room .zia-art-morebtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--zia-art-text); -webkit-text-fill-color: var(--zia-art-text); }
.zia-art-morebtn svg { width: 18px; height: 18px; }
.zia-art-room .zia-art-morebtn:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }

/* ---- the first screen: the painting fitted to the full available height, never cropped */
.zia-art-first { grid-column: 2; grid-row: 1; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.zia-art-stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; touch-action: pan-y; }
/* the fit box keeps the margins (arrows, tools); the stage around it is the whole area, so a zoomed painting can fill it.
   Container query units give the painting EXACTLY its contained size (uncropped), from the ratio alone: nothing shifts while
   the file loads. Never larger than its own file (--nw, 1 file px per CSS px): a small picture sits centred in the box at its
   own size, in the normal layout and in fullscreen alike (the FLIP moves read the real rectangles, so they follow). */
.zia-art-fit { position: absolute; inset: 18px 76px; container-type: size; display: grid; place-items: center; pointer-events: none; }
.zia-art-img { display: block; width: min(100cqw, calc(100cqh * var(--ar)), calc(var(--nw, 100000) * 1px)); height: auto; aspect-ratio: var(--ar); max-width: none;
	background: var(--zia-art-ph); transform-origin: 0 0; transition: transform .25s ease; cursor: default; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: auto; }
/* The low-resolution placeholder: render.php prints the work's strip thumbnail as the img's own inline background-image. The img box is
   fixed by the ratio (width / aspect-ratio above), so the thumbnail fills it exactly and the large file paints over it when it arrives:
   nothing moves. A cached thumbnail (the reader clicked it in the strip of the page before) paints with the very first frame. */
.zia-art-img { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
html:not(.zia-art-full) .zia-art-room:not(.zia-art-room--noimg) .zia-art-img { cursor: zoom-in; }   /* a click goes fullscreen */
html.zia-art-full .zia-art-stage.can-zoom .zia-art-img { cursor: zoom-in; }                           /* a click zooms one step */
.zia-art-stage.is-dragging .zia-art-img, .zia-art-stage.is-live .zia-art-img { transition: none; }
html.zia-art-full .zia-art-stage.is-zoomed .zia-art-img { cursor: grab; }
html.zia-art-full .zia-art-stage.is-dragging .zia-art-img { cursor: grabbing; }
/* no container units (old browsers): the box fills the fit area and the picture is contained in it; the cap is its max size. `.zia-art-room img`
   (max-width: none, 0,1,1) would beat a bare `.zia-art-img`, hence the longer selector. */
@supports not (width: 1cqw) { .zia-art-fit { container-type: normal; } .zia-art-room .zia-art-img { width: 100%; height: 100%; max-width: calc(var(--nw, 100000) * 1px); max-height: calc(var(--nw, 100000) / var(--ar) * 1px); object-fit: contain; aspect-ratio: auto; } }

/* a work without a usable photograph: a placeholder in the work's own proportions */
.zia-art-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100cqw, calc(100cqh * var(--ar))); aspect-ratio: var(--ar);
	padding: 12px; background: var(--zia-art-ph); outline: 1px solid var(--zia-art-line); outline-offset: -1px; text-align: center; pointer-events: auto; overflow: hidden; }
.zia-art-ph p { margin: 0; padding: 2px 14px; font-size: 14px; line-height: 2; color: var(--zia-art-text); -webkit-text-fill-color: var(--zia-art-text); }
html[data-theme="dark"] .zia-art-room .zia-art-ph p { color: var(--zia-art-text) !important; -webkit-text-fill-color: var(--zia-art-text) !important; }
.zia-art-room .zia-art-ph a { font-weight: 600; color: var(--zia-art-link); -webkit-text-fill-color: var(--zia-art-link); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .zia-art-room .zia-art-ph a { color: var(--zia-art-link) !important; -webkit-text-fill-color: var(--zia-art-link) !important; }

/* arrows on the painting's edges: a plain link each; "previous" stands on the reading side (right in Persian) */
/* STICKY (owner, 2026-10-26: "keep the next previous arrows, in both the full screen and normal views sticky"): the arrows are direct
   children of .zia-art-flow (render.php), grid items that span every row of the column they stand in, so each one is
   `position: sticky` inside the whole scrolling flow, not just inside the first screen. `top` puts its middle at the middle of the
   visible scrolling column (--zia-art-first-h is that column's height, in the normal and the fullscreen layout alike), so at rest it
   sits exactly where it sat on the painting's edge, and it stays there while the column scrolls. They stand in the painting's column
   (the panel and the strip are other rows / columns and never under them); the texts keep clear of them: see .zia-art-more (a
   128px narrower box beside the arrows) and the fullscreen gutters below. "previous" stands on the reading side (right in Persian). */
.zia-art-room .zia-art-nav { --zia-art-nav-h: 120px; grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: calc(var(--zia-art-first-h) / 2 - var(--zia-art-nav-h) / 2); z-index: 2;
	display: flex; align-items: center; justify-content: center; width: 56px; height: var(--zia-art-nav-h);
	color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); opacity: var(--zia-art-nav-op); transition: opacity .15s; }
.zia-art-nav svg { width: 34px; height: 34px; }
.zia-art-nav-prev { justify-self: start; margin-inline-start: 8px; }
.zia-art-nav-next { justify-self: end; margin-inline-end: 8px; }
.zia-art-room[dir="rtl"] .zia-art-nav svg { transform: scaleX(-1); }
.zia-art-room .zia-art-nav:hover, .zia-art-room .zia-art-nav:focus-visible { opacity: 1; color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }

/* ---- a click on a strip thumbnail (artwork-viewer.js pending()): the clicked thumbnail, already loaded, stands enlarged in the
   painting's own box (the same width formula and ratio as .zia-art-img, so the new page's painting, with the same thumbnail as its
   placeholder, appears exactly there); the old painting steps aside; a thin line runs along the stage's top edge while the page loads. */
.zia-art-ghost { position: absolute; inset: 0; margin: auto; display: block; width: min(100cqw, calc(100cqh * var(--ar)), calc(var(--nw, 100000) * 1px)); height: auto; aspect-ratio: var(--ar); max-width: none;
	background: var(--zia-art-ph); pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; animation: zia-art-ghost-in .14s ease-out both; }
.zia-art-stage.has-ghost .zia-art-img, .zia-art-stage.has-ghost .zia-art-ph { opacity: 0; transition: opacity .14s ease-out; }
.zia-art-stage.is-pending::after { content: ""; position: absolute; z-index: 3; top: 0; inset-inline: 0; height: 2px; pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--zia-art-accent), transparent) no-repeat 0 0 / 40% 100%; animation: zia-art-pending 1.2s ease-in-out infinite; }
@keyframes zia-art-ghost-in { from { opacity: 0; } }
@keyframes zia-art-pending { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* the old work's title and card (and the caption under the painting, on tablets and phones) are no longer the picture's: they step back */
.zia-art-room:has(.zia-art-stage.is-pending) .zia-art-side, .zia-art-stage.is-pending ~ .zia-art-pcap { opacity: .4; transition: opacity .2s ease-out; }
/* the strip: the clicked thumbnail takes the current mark at once, the old one lets go of it */
.zia-art-strip a.is-pending img { opacity: 1; outline: 3px solid #dd9933; outline-offset: 2px; box-shadow: 0 0 0 1px var(--zia-art-cur-line); }
.zia-art-strip:has(a.is-pending) a[aria-current]:not(.is-pending) img { opacity: .55; outline-color: transparent; box-shadow: none; }

/* the caption under the painting: shown on tablets and phones and in fullscreen only */
.zia-art-pcap, .zia-art-ftools { display: none; }
.zia-art-pcap-t { font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--zia-art-ink); }
.zia-art-pcap-m { font-size: 13.5px; line-height: 1.6; color: var(--zia-art-text); }
.zia-art-pcap-m:empty { display: none; }
.zia-art-room .zia-art-down { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -8px; color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); }
.zia-art-down svg { width: 22px; height: 22px; }
.zia-art-room .zia-art-down:hover { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }

/* ---- the texts under the painting */
.zia-art-more { grid-column: 2; grid-row: 2; width: min(100% - 128px, 880px); justify-self: center; padding: 56px 40px 72px; }   /* 64px each side: the sticky arrows (8px + 56px) never cover the text */
.zia-art-room .zia-art-lead { margin: 0 0 8px; font-size: 18px; line-height: 2; color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); text-align: start; }
html[data-theme="dark"] .zia-art-room p.zia-art-lead { color: var(--zia-art-ink) !important; -webkit-text-fill-color: var(--zia-art-ink) !important; }
.zia-art-sec { margin-top: 48px; }
.zia-art-lead + .zia-art-sec { margin-top: 36px; }
.zia-art-sec > .zia-art-h2 { display: flex; align-items: center; gap: 14px; }
.zia-art-sec > .zia-art-h2::after { content: ""; flex: 1; border-top: 1px solid var(--zia-art-line); }
.zia-art-bq { margin: 0; padding: 2px 0; padding-inline-start: 22px; border: 0; border-inline-start: 2px solid var(--zia-art-line); background: none; font-style: normal; }
.zia-art-bq::before { content: none !important; }
.zia-art-room .zia-art-bq-text p { margin: 0 0 .6em; padding: 0; font-size: 17px; line-height: 2.1; color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); text-align: start; }
html[data-theme="dark"] .zia-art-room .zia-art-bq-text p { color: var(--zia-art-ink) !important; -webkit-text-fill-color: var(--zia-art-ink) !important; }
.zia-art-cite { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--zia-art-muted); }
.zia-art-about { font-size: 16px; line-height: 2.1; color: var(--zia-art-text); }
.zia-art-room .zia-art-about p { margin: 0 0 1em; padding: 0; color: var(--zia-art-text); -webkit-text-fill-color: var(--zia-art-text); text-align: justify; }
html[data-theme="dark"] .zia-art-room .zia-art-about p { color: var(--zia-art-text) !important; -webkit-text-fill-color: var(--zia-art-text) !important; }
.zia-art-room .zia-art-about a { color: var(--zia-art-link); -webkit-text-fill-color: var(--zia-art-link); text-decoration: underline; text-underline-offset: 3px; }
.zia-art-room[dir="ltr"] .zia-art-about p, .zia-art-room[dir="ltr"] .zia-art-bq-text p { text-align: start; }   /* English: ragged right */
/* quotations inside the description (Mahsha's sources, Jafari's thesis, Haghrah): set apart by a rule on the reading side, the
   source line small and quiet; the site's own blockquote and <cite> styles are reset (audit nit 4) */
.zia-art-about blockquote { margin: 0 0 1.2em; padding: 2px 0; padding-inline-start: 22px; border: 0; border-inline-start: 2px solid var(--zia-art-line); background: none; font-style: normal; }
.zia-art-about blockquote::before, .zia-art-about blockquote::after { content: none !important; }
.zia-art-room .zia-art-about blockquote p { margin-bottom: .6em; }
.zia-art-about cite { font-style: normal; font-size: 13px; line-height: 1.7; color: var(--zia-art-muted); -webkit-text-fill-color: var(--zia-art-muted); }
.zia-art-about img { max-width: 100%; height: auto; }
.zia-art-about ul, .zia-art-about ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.zia-art-about li { margin: 0 0 .3em; }

/* details, panels, other views: small uncropped thumbnails that open in fullscreen, growing out of themselves */
.zia-art-details { --row-h: 170px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 18px; margin: 0; padding: 0; list-style: none; }
.zia-art-details li { flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; max-width: calc(var(--ar) * var(--row-h) * 1.25); margin: 0; list-style: none; }
.zia-art-room .zia-art-detail { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font: inherit; text-align: center; cursor: zoom-in; color: inherit; }
/* same slot as a hub card: the thumbnail sits centred in the box the row gave it, never wider than its own file (--nw) */
.zia-art-detail::before { content: ""; grid-area: 1 / 1; align-self: start; justify-self: center; width: 100%; aspect-ratio: var(--ar); }
.zia-art-dpic { display: block; grid-area: 1 / 1; align-self: center; justify-self: center; width: min(100%, calc(var(--nw, 100000) * 1px)); height: auto; aspect-ratio: var(--ar); background: var(--zia-art-ph); outline: 1px solid var(--zia-art-hair); outline-offset: -1px; }
.zia-art-dcap { display: block; grid-area: 2 / 1; margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--zia-art-muted); }

/* related writings */
.zia-art-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 28px; margin: 0; padding: 0; list-style: none; }
.zia-art-related li { margin: 0; list-style: none; }
.zia-art-room a.zia-art-rel, .zia-art-room a.zia-art-pn-prev, .zia-art-room a.zia-art-pn-next { display: flex; align-items: center; gap: 14px; color: var(--zia-art-ink); -webkit-text-fill-color: var(--zia-art-ink); }
.zia-art-room a.zia-art-rel--noimg { min-height: 80px; padding-inline-start: 14px; border-inline-start: 2px solid var(--zia-art-line); }   /* title only (no picture, or a blocklisted one): same height as the others */
.zia-art-thumb { flex: none; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--zia-art-ph); overflow: hidden; }
.zia-art-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.zia-art-rel-text, .zia-art-pn-text { min-width: 0; }
.zia-art-k { display: block; font-size: 12.5px; line-height: 1.7; color: var(--zia-art-muted); }
.zia-art-room .zia-art-t { display: block; font-size: 15px; line-height: 1.7; font-weight: 600; }
.zia-art-room a.zia-art-rel:hover .zia-art-t, .zia-art-room a.zia-art-pn-prev:hover .zia-art-t, .zia-art-room a.zia-art-pn-next:hover .zia-art-t { color: var(--zia-art-accent); -webkit-text-fill-color: var(--zia-art-accent); }
/* The previous / next block is laid out exactly like the related cards above it (owner, 2026-10-26: the next work's picture was not
   aligned with the pictures above, and its text was on the wrong side): the SAME grid (columns and gaps), and in each item the picture
   FIRST, at the column's start edge, with the label and the title after it; «اثر پیشین» in the first column, «اثر بعدی» in the second
   (a missing one leaves its column empty, so the other stays where it is). The two pictures share the related cards' 80 x 80 box.
   RTL and LTR mirror by themselves (the markup is picture, then text); on tablets and phones one column, as the related cards. */
.zia-art-pn { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 28px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--zia-art-line); }
.zia-art-pn-prev .zia-art-k::before { content: "→ "; }
.zia-art-pn-next .zia-art-k::before { content: "← "; }
.zia-art-room[dir="ltr"] .zia-art-pn-prev .zia-art-k::before { content: "← "; }
.zia-art-room[dir="ltr"] .zia-art-pn-next .zia-art-k::before { content: "→ "; }

/* ---- the strip of every work with a picture: fixed along the bottom, uncropped thumbnails at one height */
.zia-art-strip { grid-row: 3; min-height: 0; overflow: hidden; padding: 10px 14px 0; background: var(--zia-art-strip-bg); border-top: 1px solid var(--zia-art-hair); }
.zia-art-strip ol { display: flex; justify-content: safe center; gap: 10px; margin: 0; padding: 4px; list-style: none; overflow-x: auto; overflow-y: hidden; }
.zia-art-strip li { flex: none; margin: 0; list-style: none; }
.zia-art-strip a { display: block; line-height: 0; padding-inline: 5px; margin-inline: -5px; }   /* a wider tap target over the gap */
.zia-art-strip img { display: block; height: 72px; width: calc(72px * var(--ar)); object-fit: contain; opacity: .55; transition: opacity .15s; }
.zia-art-strip a:hover img, .zia-art-strip a:focus-visible img { opacity: 1; }
.zia-art-strip a[aria-current] img { opacity: 1; outline: 3px solid #dd9933; outline-offset: 2px; box-shadow: 0 0 0 1px var(--zia-art-cur-line); }   /* light: an ink line inside the orange, so the mark reaches 3:1 */
.zia-art-strip a:focus-visible { outline: none; }
.zia-art-strip a:focus-visible img { outline: 2px solid var(--zia-art-ink); outline-offset: 2px; }

/* ---- fullscreen, desktop: the painting alone; under it the texts with the card beside them on the reading side */
@media (min-width: 1025px) {
	html.zia-art-full .zia-art-room { grid-template-rows: 0 minmax(0, 1fr) 0; }
	html.zia-art-full .zia-art-bar, html.zia-art-full .zia-art-strip { display: none; }
	html.zia-art-full .zia-art-flow {
		--zia-art-first-h: calc(var(--zia-art-vh) - var(--zia-art-top));
		grid-template-columns: minmax(72px, 1fr) var(--zia-art-card-w) 64px minmax(0, 860px) minmax(72px, 1fr);   /* 72px at least on each side: the arrows' gutter */
	}
	html.zia-art-full .zia-art-first { grid-column: 1 / -1; }
	html.zia-art-full .zia-art-room .zia-art-nav { grid-column: 1 / -1; }   /* at the two edges of the whole width */
	html.zia-art-full .zia-art-side { grid-column: 2; grid-row: 2; top: 24px; height: auto; max-height: calc(var(--zia-art-vh) - var(--zia-art-top) - 48px);
		margin-top: 56px; padding: 0; border: 0; }
	html.zia-art-full .zia-art-card { margin-top: 0; }
	html.zia-art-full .zia-art-actions { display: none; }   /* its link would be an invisible focus stop; the caption's down arrow does the job */
	html.zia-art-full .zia-art-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	html.zia-art-full .zia-art-more { grid-column: 4; width: 100%; padding-inline: 0; }
}

/* ---- fullscreen, any width: the first screen is the painting alone, its caption laid over the foot */
html.zia-art-full .zia-art-fit { inset: 52px 72px 98px; }   /* 98 px below: the caption's first line starts a few px under the painting, not touching it (was 92) */
html.zia-art-full .zia-art-pcap { display: flex; flex-direction: column; align-items: center; gap: 0; position: absolute; inset-inline: 0; bottom: 0; padding: 8px 16px 10px;
	text-align: center; pointer-events: none; transition: opacity .2s; }
html.zia-art-full .zia-art-pcap .zia-art-down { pointer-events: auto; }
/* The caption keeps to its band under the painting: one line each, cut with an ellipsis (the full title is in the texts
   below). A two-line title on a phone had started over the foot of the painting (audit m3, bandari-woman-sketch). */
html.zia-art-full .zia-art-pcap-t, html.zia-art-full .zia-art-pcap-m { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.zia-art-full .zia-art-ftools { display: flex; position: absolute; top: 4px; inset-inline-end: 6px; z-index: 3; gap: 2px; }
html.zia-art-full .zia-art-stage.is-zoomed { touch-action: none; }
html.zia-art-full .zia-art-stage.is-zoomed .zia-art-pcap { opacity: 0; }
.zia-art-room.is-below [data-zia-art-act="zoom-in"], .zia-art-room.is-below [data-zia-art-act="zoom-out"] { visibility: hidden; }
html.zia-art-full .zia-art-btn[data-zia-art-act="full"] { display: none; }

/* ---- the move into and out of fullscreen: the painting (and the card) move; whatever appears fades in */
@keyframes zia-art-fade { from { opacity: 0; } }
html.zia-art-anim .zia-art-bar, html.zia-art-anim .zia-art-strip, html.zia-art-anim .zia-art-side > *, html.zia-art-anim .zia-art-pcap,
html.zia-art-anim .zia-art-ftools, html.zia-art-anim .zia-art-nav { animation: zia-art-fade .4s ease both; }
html.zia-art-slide .zia-art-side > .zia-art-card { animation: none; }       /* the card glides into place, it does not fade */

/* ---- tablets and phones: no side panel; the painting, its caption, then the card and the texts */
@media (max-width: 1024px) {
	.zia-art-room { --zia-art-strip: 78px; }
	.zia-art-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--zia-art-first-h) auto auto auto; }
	.zia-art-side { display: contents; }
	.zia-art-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.zia-art-actions { display: none; }
	.zia-art-first { grid-column: 1; grid-row: 1; }
	.zia-art-fit { inset: 12px; }
	.zia-art-room .zia-art-nav { display: none; grid-column: 1; }
	.zia-art-pcap { display: flex; flex-direction: column; align-items: center; padding: 8px 16px 4px; text-align: center; }
	.zia-art-pcap-t { font-size: 18px; }
	.zia-art-card { grid-column: 1; grid-row: 2; width: min(100% - 40px, 560px); justify-self: center; margin: 32px 0 0; }
	.zia-art-room .zia-art-note { grid-column: 1; grid-row: 3; width: min(100% - 40px, 560px); justify-self: center; }
	.zia-art-more { grid-column: 1; grid-row: 4; width: min(100%, 880px); padding: 36px 20px 56px; }
	.zia-art-strip { padding: 8px 8px 0; }
	.zia-art-strip ol { padding: 4px; gap: 2px; }
	.zia-art-strip a { min-width: 44px; display: flex; justify-content: center; padding-inline: 4px; margin-inline: 0; }   /* tap targets of at least 44 px */
	.zia-art-strip img { height: 52px; width: calc(52px * var(--ar)); }
	.zia-art-related, .zia-art-pn { grid-template-columns: 1fr; }
	html.zia-art-full .zia-art-room { grid-template-rows: 0 minmax(0, 1fr) 0; }
	html.zia-art-full .zia-art-bar, html.zia-art-full .zia-art-strip { display: none; }
	html.zia-art-full .zia-art-flow { --zia-art-first-h: calc(var(--zia-art-vh) - var(--zia-art-top)); }
	html.zia-art-full .zia-art-fit { inset: 52px 0 98px; }
	/* fullscreen on a tablet or phone: the arrows stay (sticky, at the two edges, 40px wide) and the card, the note and the texts keep a
	   48px gutter on each side so that, scrolled below the painting, nothing is under an arrow */
	html.zia-art-full .zia-art-room .zia-art-nav { --zia-art-nav-h: 90px; display: flex; width: 40px; margin-inline: 0; }
	html.zia-art-full .zia-art-card, html.zia-art-full .zia-art-room .zia-art-note { width: min(100% - 96px, 560px); }
	html.zia-art-full .zia-art-more { padding-inline: 48px; }
}
@media (max-width: 599px) {
	.zia-art-bar { gap: 12px; padding-inline: 12px 2px; }
	.zia-art-room .zia-art-bar-site { display: none; }
	.zia-art-details { --row-h: 130px; }
	.zia-art-room .zia-art-lead { font-size: 17px; }
	.zia-art-about { font-size: 15.5px; }
}
@media (max-width: 1024px) and (max-height: 520px) {   /* a phone held sideways: give the painting the height */
	.zia-art-room { --zia-art-bar: 44px; --zia-art-strip: 62px; }
	.zia-art-bar { gap: 14px; }
	.zia-art-room .zia-art-tool { height: 44px; }
	.zia-art-strip img { height: 40px; width: calc(40px * var(--ar)); }
	.zia-art-fit { inset: 6px; }
	.zia-art-pcap { padding: 2px 16px 0; }
	.zia-art-pcap-t { font-size: 15px; }
	.zia-art-pcap-m, .zia-art-room .zia-art-down { display: none; }
	html.zia-art-full .zia-art-fit { inset: 44px 0 60px; }
}
@media (pointer: coarse) { .zia-art-room .zia-art-btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
	.zia-art-scroll { scroll-behavior: auto; }
	.zia-art-img, html.zia-art-full .zia-art-pcap { transition: none; }
	.zia-art-ghost { animation: none; }
	.zia-art-stage.has-ghost .zia-art-img, .zia-art-stage.has-ghost .zia-art-ph,
	.zia-art-room:has(.zia-art-stage.is-pending) .zia-art-side, .zia-art-stage.is-pending ~ .zia-art-pcap { transition: none; }
	.zia-art-stage.is-pending::after { animation: none; background-size: 100% 100%; opacity: .55; }   /* a still line instead of a moving one */
	html.zia-art-anim .zia-art-bar, html.zia-art-anim .zia-art-strip, html.zia-art-anim .zia-art-side > *, html.zia-art-anim .zia-art-pcap,
	html.zia-art-anim .zia-art-ftools, html.zia-art-anim .zia-art-nav { animation: none; }
}