/* Project detail (works/<id>.html) — builds on base.css. «A white wall, the work hung on it as large as the screen allows, nothing over it.»
   Columns 1–2, read from the top: one white block (.work-head.on-paper: tags — the kind in black, the rest outlined, each a link into
   the list · title 35px/700 · Korean title · programme words · where the photographs stand together under «모두 21장», «사진 21장 ↓»,
   the way down to them); right under it the hairline table of facts (work.js fills it from the
   data; the column lines run on through its rows; a series in it is a link into the list); then, for every project of a series that has
   words of its own (Rose in Flux — its works, its shows and the series' own page), the series' block, white too, so the column line stops
   once above it and goes on below (.series-block: the artist's wordmark · the series' first sentence word for word, in ink, a hairline
   at its left, its source «Roses — 연작 글 →» right under it · on a line of its own «Rose in Flux 모두 →»; the series' own page has
   nothing to quote, and a hairline over its block as the table would have). On a wide screen the column stays beside the words while
   they are read, when it fits the screen (work.js: .is-sticky — not beside the big wall, whose line it would cover). What is left of
   the columns below is the grid.
   Columns 3–6: a white wall (.work-main — no frame, no box, no line: the column lines stop under the header's rule and go on below the
   words), the photograph hung on it whole (contain), level with the tags, and nothing drawn over it; the wall as tall as the tallest
   scene of the project needs, up to what the first screen allows (--wall), set once (work.js: --wh), so nothing under it moves, and a
   lower photograph hung in its middle; a show's or a collaboration's photographs that stand upright hang two by two when both fit
   (work.js). One work the wall is too large for (an upright painting, a fan, a scroll, a square work: its height binds it — work.js
   .is-big) has the whole first screen: the white wall runs from the header's rule to 10px above the screen's foot and the
   work hangs in its middle as large as that allows — its line on the white beside the work, at its lower right, as a label beside a
   work on a gallery's wall: the photograph's own line, ‹ 01 / 05 ›, its dots (small, a window of 9 past nine photographs — never
   wider than the label), and «크게 보기» level with the work's foot, one over another; each
   photograph of the project as large as it hangs without reaching it, beside it or over it (work.js hang).
   Elsewhere, under the wall one quiet line: «크게 보기» ·
   ‹ the dots › · the scene's own line (its caption) and «01 / 55»; then, under a
   hairline, the words — headed by the project's name a step over them, the artist's line breaks kept, short lines as headings, short
   lines with nothing under them as a quiet list, an English paragraph that follows a Korean one smaller and grey as its pair — and,
   for a series, its works («같은 연작 작품», under a hairline as «장면별» and «모두 21장» are: every group under the wall opens the same
   way — a hairline and a head 18/700, a step over the names under it): a row standing at one height, running the wall's whole width,
   each card at least as wide as its name's longest word (96px at least), or, where that would leave them small, one line of squares
   (a phone: a grid of two or three), each whole, named under it as the series' home names its cards (name 15/700 in ink; medium and
   size as one line, 14/400 thinned) — at 1440 every page of the series holds the block at about one height, 300–350px — the names of
   a row on one line and their second lines on the next (subgrid). A show's photographs once more, gathered by scene («장면별» —
   work.js): each group
   under its name and count («Lounge · 9»), or after the words of the heading that names it (a quiet line names it again); its
   photographs whole, each its own shape, in rows at one height across the whole column — three or four to a row on a wide screen, all
   the rows of the page near one height — the cuts chosen for the whole group so no row is left short and none stands taller than an
   ordinary row (a phone: two to a row), on silk until they arrive, always in their own colours, the one on show in the slider marked by
   a line under it in the colour of its own work (--tone, work.js; ink until the photograph has arrived — a line, never a word or a
   ground; the series' row marks this work so too); the same number of rows in every group of the page, the rest behind «모두 9장 보기»
   (a long rest a dozen at a time), every group ending as far from the next. A project gathered in no scenes, with six photographs or
   more, has them all in the same rows under «모두 21장» — after the words, or right under the wall where there are none (.is-lead) —
   each named under it where the data names each a work of its own (Objects). A project with no photographs has no wall: its words
   stand in columns 3–6 from the top, their first line level with the tags (.is-words). At the foot, under a hairline: ← the project
   before · the list of its kind · the project after → — 60px under the words; where there are no words, under 20px of white after
   the photographs, and under 40px after the series' works where they end the page (no stub of column lines between).
   A heading of the words that names one photograph (a collaboration's works: Lenovo's three, KEP1ER's five tracks) has it right under
   it, across the column at its own shape (.is-plate); a group gathered from a show, or named after one, says that show and leads to it
   (.set-from) — and where the words are that show's, heads them in the project's name's place (.work-caption.is-show). Editions' two
   parts («제품 Studio», «진열 Display» — not by show) stand one after the other, each under its own hairline and head (.is-lone),
   whole. On a wide screen the column beside is white to its foot: the line between its two columns
   stands only inside the table of facts.
   Tablets and phones, in the order a keyboard meets them too (work.js moves the parts): head → what steps («01 / 55» on the title's
   edge · a hairline of how far along · ‹ › at the right end — over the photograph, so the arrows never move under the finger) → the
   photograph (from column line to column line; the wall as tall as the photograph on show needs, no band under a wide one) → «크게 보기»
   and its caption (a project of one scene, where nothing steps, has only that line, under it) → table → this project's words → the
   series' block, under a hairline after «장면별», ending with the series' works → ← before · the list · after → (one under another on
   a phone; the block's way to the same list gives way to it there); on a page longer than
   three screens, once the header is out of sight, ↑ at the bottom right goes back up to it (it steps aside where the foot is in sight).
   Content stops 10px inside the column lines on both sides on wide screens. */
.work{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:auto 1fr;padding:0 var(--m)}
.work-info{grid-column:1/span 2;grid-row:1/span 2;align-self:start;display:flex;flex-direction:column;padding:10px 0 0}
/* the facts beside the words while they are read (work.js: only when the whole column fits the screen) */
.work-info.is-sticky{position:sticky;top:var(--bar,0px)}
.work-info>*:not(.info){margin-left:10px;margin-right:10px}
/* the head's white begins at the header's rule (its 10px are inside it), so no stub of line is left above the tags; it holds its
   30px under it too, so the column line goes on only under the table */
.work-head{margin-top:-10px;padding:10px 0 30px}
.work .tags{margin-bottom:5px}
/* a tag is a way into the list: a 44px tall target around the small square, the square itself unchanged */
.tag-link{display:inline-flex;padding:11px 0;margin:-11px 0}
.tag-link .tag{transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
@media(hover:hover){
  .tag-link:hover .tag{background:var(--ink);color:var(--paper)}
  .tag-link:hover .tag.is-solid{background:var(--paper);color:var(--ink)}
}
.tag-link:focus-visible{outline:0}
.tag-link:focus-visible .tag{outline:2px solid var(--ink);outline-offset:2px}
.work-title{font-size:var(--fs-title);font-weight:700;line-height:1.2}
.work-title-ko{font-size:15px;line-height:27px;margin-top:5px}
/* a Korean line that only names the shows the photographs come from (Editions) gives way on a wide screen to the table beside it,
   which names each with its place; a tablet or a phone keeps it, the table being a screen down (work.js) */
@media(min-width:1024px){.work-title-ko.is-wide-hidden{display:none}}
.work-meta{font-size:15px;line-height:21px;color:var(--ink-2)}
.work-meta span{display:inline}
/* «사진 21장 ↓» (work.js — a wide screen, a page whose photographs stand together under «모두 21장»): the way down to them, a quiet
   line of the head as the venue's is, in a 44px target, the line's own height unchanged; under the pointer it is underlined and its
   arrow steps down */
.work-count{margin-top:4px}
.work-count a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-11.5px 0;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.work-count-arrow{transition:transform var(--t-fast) var(--ease)}
@media(hover:hover){
  .work-count a:hover{color:var(--ink)}
  .work-count a:hover span:first-child{text-decoration:underline;text-underline-offset:3px}
  .work-count a:hover .work-count-arrow{transform:translateY(3px)}
}
/* a series in the table leads to its list, as its tag does; a target at least 44px tall, the row unchanged. With a mouse the table keeps
   only its rules and the word is underlined under the pointer; a finger cannot hover, so on touch a grey hairline stays under it */
.info-link{display:inline-flex;vertical-align:top;min-width:44px;padding:calc((46px - 1.3em)/2) 0;margin:calc((1.3em - 46px)/2) 0}
.info-link span{text-decoration:underline 1px var(--grey);text-underline-offset:3px;transition:text-decoration-color var(--t-fast) var(--ease)}
@media(hover:hover){.info-link span{text-decoration-color:transparent}.info-link:hover span{text-decoration-color:var(--ink)}}
.info-link:focus-visible{outline:0}
.info-link:focus-visible span{outline:2px solid var(--ink);outline-offset:2px}
/* the shows a page's photographs come from, in one row (work.js — Editions' «Exhibitions»): each its way there, its place under it */
.info-show{display:block}
.info-show+.info-show{margin-top:12px}
.info-place{display:block;color:var(--ink-2)}

/* ---------- the series: under the facts, its name (the artist's wordmark), its first sentence quoted, the ways on ---------- */
/* one white block under the table (the column line stops above it and goes on below): the series' name first, so the quotation under
   it reads as the series' words, not as this project's caption; the quotation in ink, a hairline at its left; then «Roses — 연작 글 →»
   and «Rose in Flux 모두 →». The wordmark is the ink of the mark only, 44px high (the file's own white margin is left outside the window,
   as the header does with the logo). No table (the series' own page): the block follows the head */
.series-block{padding:30px 0}
/* no table (the series' own page): the table's hairline stands above the block all the same, from column line to column line, so the
   wordmark reads as the series' block and not as the title's second line */
.work-head+.series-block{position:relative}
.work-head+.series-block::before{content:'';position:absolute;top:0;left:-10px;right:-10px;border-top:1px solid var(--line)}
.series-mark{--mh:44px;position:relative;display:block;width:calc(var(--mh)*1005/272);max-width:100%;height:var(--mh);margin:0;overflow:hidden}
.series-mark img{position:absolute;max-width:none;width:calc(var(--mh)*1250/272);height:auto;left:calc(var(--mh)*-107/272);top:calc(var(--mh)*-489/272)}
.series-name{font-size:19px;font-weight:700;line-height:24px}
.series-quote{margin:20px 0 0}
.series-quote blockquote{margin:0;padding-left:12px;border-left:1px solid var(--line);font-size:15px;line-height:27px;color:var(--ink)}
/* the quotation's source, right under it and in from the hairline as it is: the way to the series' words */
.series-quote figcaption{margin-top:-6px;padding-left:13px}
.series-quote figcaption a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;line-height:20px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.series-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:8px;font-size:15px;line-height:21px}
.series-mark+.series-links,.series-name+.series-links{margin-top:12px}
.series-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.series-links a span,.series-quote figcaption a span{transition:transform var(--t-fast) var(--ease)}
@media(hover:hover){
  .series-links a:hover,.series-quote figcaption a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .series-links a:hover span,.series-quote figcaption a:hover span{transform:translateX(3px)}
}

/* ---------- the wall ---------- */
/* columns 3–6 are white from the header's rule to the end of the words: the photograph hangs on a wall, not in a frame.
   The wall stops 10px inside the outer column lines, so the line between the facts and the wall (and the page's right line) stay */
.work-main{--dot:10px;--gap:6px;--dpad:2px;--tg:6px;--pair:20px;grid-column:3/span 4;grid-row:1;position:relative;display:flex;flex-direction:column;padding:11px 10px 0;min-width:0;container-type:inline-size;
  background:linear-gradient(var(--paper),var(--paper)) 10px 0/calc(100% - 20px) 100% no-repeat}
.work-text,.work>.work-body{grid-column:3/span 4;grid-row:2;padding:0 10px;min-width:0}
.work .work-text{display:flow-root;scroll-margin-top:24px;background:linear-gradient(var(--paper),var(--paper)) 10px 0/calc(100% - 20px) 100% no-repeat}
/* the photograph's place, up to --wall: what the first screen leaves under the header and the line below the wall (a laptop's low
   screen too — the line stays in the first screen; never under 420px, never taller than it is wide). A wide screen: as tall as the
   tallest scene of the project needs (--wh, work.js), set once — a wide photograph hangs from the top and the white wall goes on under
   it, so the line under the wall never moves. A tablet or a phone (the line is over the wall): as tall as the photograph on show needs
   (--rs: its shape, or a pair's two added; --sg: the width a pair gives to its gap — work.js), no band under a wide one; the next one's
   height is reached in .4s. (.slider-wall is --wall itself, for work.js to read.) */
.slider{--wall:clamp(420px,100svh - 280px,100cqw);position:relative;flex:none;height:min(var(--wall),(100cqw - var(--sg,0px))/var(--rs,.1));background:var(--paper);transition:height .4s var(--ease)}
.slider-wall{position:absolute;top:0;left:0;width:1px;height:var(--wall);visibility:hidden;pointer-events:none}
.slides{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;container-type:size}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.slide.is-active{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
/* two upright photographs side by side (work.js pairs them only when both stand nearly as tall as one alone would):
   each as wide as its own shape at the shared height (--rs: the two shapes added), centred together, 20px apart */
.slide.is-pair{grid-template-columns:auto auto;grid-template-rows:auto;place-content:start center;column-gap:var(--pair)}
.slide.is-pair .cell{--ph:min(100cqh,(100cqw - var(--pair))/var(--rs,1.4));width:calc(var(--ph)*var(--r,.7));height:var(--ph)}
/* the photograph stands whole in its place, its own shape, on the white wall — never cropped */
.cell{position:relative;min-width:0;min-height:0;container-type:size}
.shot{position:relative;margin:0;width:100%;height:100%}
.slide-open{position:relative;display:block;width:100%;height:100%;cursor:zoom-in}
.slide-open img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 0}
.slide-open:focus-visible{outline:0}
.slide-open:focus-visible::after{content:'';position:absolute;inset:6px;border:2px solid var(--ink);box-shadow:0 0 0 2px var(--paper),inset 0 0 0 2px var(--paper)}

/* ---------- the wall's line: «크게 보기» at the left, ‹ the dots › in the middle, the scene's own line and «01 / 55» at the right ---------- */
.slider-tools{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px;min-height:44px;margin-top:var(--tg)}
.slider-zoom{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;font-size:14px;line-height:20px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.slider-zoom svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.2}
@media(hover:hover){.slider-zoom:hover{color:var(--ink)}}
/* the arrows: off the work, one at each side of the dots, each a 44px target (the keys ← → step too) */
.slider-nav{grid-column:2;display:flex;align-items:center}
.slider-prev,.slider-next{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink)}
.slider-prev svg,.slider-next svg{width:10px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible;transition:transform var(--t-fast) var(--ease)}
@media(hover:hover){.slider-prev:hover svg{transform:translateX(-3px)}.slider-next:hover svg{transform:translateX(3px)}}
.is-single .slider-nav{display:none}
/* dots: one per photograph (both of a pair dark); more than 18 photographs → a window of 9 that follows the shown one */
.slider-dots{padding:var(--dpad);overflow:hidden}
.slider-dots.is-window{width:calc(var(--win,9)*(var(--dot) + var(--gap)) - var(--gap) + 2*var(--dpad))}
.slider-dots i{display:flex;gap:var(--gap);transform:translateX(calc(var(--off,0)*-1*(var(--dot) + var(--gap))));transition:transform .3s var(--ease)}
.slider-dots span{flex:none;display:block;width:var(--dot);height:var(--dot);border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:50%;background:var(--paper);cursor:pointer;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.slider-dots span[aria-current]{background:var(--ink);border-color:var(--ink)}
.slider-dots span.is-edge{transform:scale(.66)}
.slider-dots span.is-out{visibility:hidden}
/* the scene's own line (its caption, each once — off the photograph, as the viewer sets it) and which one of how many, in the same
   place for every photograph (figures of one width) */
.slider-meta{grid-column:3;justify-self:end;display:flex;align-items:baseline;gap:14px;min-width:0;max-width:100%;margin:0}
.slider-credit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:20px;color:var(--ink-2)}
.slider-index{flex:none;font-size:15px;line-height:20px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.slider-caption{margin:0}
/* a tablet's or a phone's foot of the photograph: its own line and «크게 보기» (work.css below) */
.slider-foot{display:none}
/* a tablet's or a phone's hairline in place of the dots: how far along the photographs one is, the scene on show in the colour of its
   own work (--tone, work.js tint — read again at every step; deepened to 3:1 on the white, so a pale gold is no fainter than the ink
   it replaces; the ink for a work in ink, and until the photograph has arrived) */
.slider-bar{display:none;position:relative;height:1px;background:var(--line)}
.slider-bar b{--bw:max(var(--w,0%),12px);position:absolute;top:-.5px;left:calc((100% - var(--bw))*var(--f,0));width:var(--bw);height:2px;background:var(--tone,var(--ink));transition:left .3s var(--ease),width .3s var(--ease),background-color .3s var(--ease)}
.slider-credit[hidden],.slider-caption[hidden]{display:none}
/* a finger cannot pick a 5px dot: on touch the dots only show where one is (work.js lets a tap on them do nothing) — the photograph is swiped,
   or the arrows pressed — so no hand cursor says otherwise */
@media(pointer:coarse){.slider-dots span{cursor:auto}}
/* the scene's own line where it names a heading of her words (work.js): the way to them, underlined as the table's ways are — a grey
   hairline on touch, the ink under the pointer — and the words it leads to come in a little under the screen's top (or the bar) */
.slider-to{color:inherit;text-decoration:underline 1px var(--grey);text-underline-offset:3px;transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease)}
@media(hover:hover){.slider-to{text-decoration-color:transparent}.slider-to:hover{color:var(--ink);text-decoration-color:var(--ink)}}
.slider-to:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.work [id$="-words"]{scroll-margin-top:calc(var(--bar,0px) + 24px)}

/* ---------- words ---------- */
/* the project's name heads the words, a step over them and bold, so where the words begin is seen at once (the headings inside the
   words stay in the words' own size) */
.work-caption{margin-top:30px;font-size:24px;font-weight:700;line-height:32px}
.work-body{margin-top:16px}
.work-body p{margin-bottom:20px;white-space:pre-line}
/* a short line without a full stop (a room, a floor, a work's name) heads the words after it, as the project's name does; the artist's
   words are not changed, only set */
.work-body .work-sub{margin:44px 0 10px;font-size:19px;font-weight:700;line-height:30px}
.work-body>.work-sub:first-child{margin-top:0}
/* short lines with nothing to head (last, or one after another): a quiet list */
.work-body .work-line{margin:0;font-size:15px;line-height:24px;color:var(--ink-2)}
.work-body .work-line:last-child{margin-bottom:20px}
/* English after a Korean paragraph is its pair: a step smaller, grey, close under it. English that comes first — the artist's own
   voice, a collaboration's introduction — is set as the words are (work.js marks only the pairs) */
.work-body p.is-pair{font-size:16px;line-height:28px;color:var(--ink-2)}
.work-body p:not([lang=en])+p.is-pair{margin-top:-8px}
/* a site notice among the words (build-pages: <p class="work-note">) is small and grey, not the artist's text. Where it is all the
   body holds, right under «모두 9장» (Objects — work.js keeps it there, the series' works after it), it is about the names over it:
   it comes close under their foot, not a paragraph's step further */
.work-body .work-note{font-size:13px;line-height:20px;color:var(--ink-2)}
.work-text>.sets.is-lead+.work-body:not(:has(>:not(.work-note))){margin-top:0}
/* no photographs (work.js: .is-words): the words take the wall's place — no name over them, the title is beside — their first line's
   box beginning where the tags' squares begin (10px under the header's rule, as the wall's photograph does), so the two columns share
   one top line */
.work.is-words .work-text{grid-row:1/span 2;padding-top:0}
.work.is-words .work-body{margin-top:10px}

/* ---------- «장면별»: a show's photographs gathered by scene (work.js) ---------- */
/* the column of the words is the measure the groups run across, also where one stands inside the words (they keep their 34em) */
.work .work-text{container-type:inline-size}
/* after the words, under a hairline as the words' own, from column line to column line: «장면별» and the line of its groups — each
   name in ink, its count beside it in ink-2, each a 44px target */
.sets{margin:56px -10px 0;padding:20px 10px 0;border-top:1px solid var(--line)}
.sets-head{display:flex;flex-wrap:wrap;align-items:center;column-gap:28px;margin-bottom:4px}
/* a group's head a step over the names under it (a work's name, a scene's: 15/700), so «모두 9장» does not read as one more name */
.sets-head h2{font-size:18px;font-weight:700;line-height:24px}
.sets-index{display:flex;flex-wrap:wrap;column-gap:20px;margin:0;font-size:15px;line-height:21px}
.sets-index a{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--ink)}
.set-n{color:var(--ink-2);font-weight:400;font-variant-numeric:tabular-nums}
@media(hover:hover){.sets-index a:hover{text-decoration:underline;text-underline-offset:3px}}
.set{margin-top:18px;scroll-margin-top:24px}
.sets-head+.set{margin-top:20px}
/* «모두 21장» (work.js: one group, its count in the head) — right under the wall where there are no words (.is-lead): the hairline as
   the words' own would stand, as close under the wall's line as the project's name stands over the words */
.sets.is-all .sets-head+.set{margin-top:14px}
.sets.is-lead{margin-top:24px}
.set-head{margin:0 0 12px;font-size:15px;font-weight:700;line-height:24px}
/* with the heading of the words that names it (work.js: after the words it heads): the whole column's width, the words keeping their
   measure; a quiet line over the photographs names them again (none when they follow the heading itself) */
.work-body>.set{width:100cqw;margin:32px 0 0}
.set-label{margin:0 0 10px;font-size:13px;line-height:20px;color:var(--ink-2)}
.work-sub+.set .set-label:not(.set-from){display:none}
/* one photograph a heading names (work.js .is-plate — Lenovo's three artworks, KEP1ER's five tracks): right under its heading, as a
   plate under its title, across the words at its own shape (1440: their measure, 646px — below; a phone: 350px) — an upright one no taller than 80% of the
   screen — and the words it heads follow it. It never folds: no foot */
.work-body>.set.is-plate{margin:4px 0 26px}
.set.is-plate .set-pic{width:min(100%,calc(80svh*var(--r,1.5)))}
.set.is-plate .set-foot{display:none}
/* … and it is not marked as the slider's photograph (the 2px line under one of three works read as a stray rule: the wall is a screen
   and more above it) */
.set.is-plate .set-pic.is-here .set-open{box-shadow:none}
/* a group from a show (work.js fromHTML): the show's name, dates and place, the way to it, quiet
   as the line it stands in (under her words, or beside the group's own name), in a 44px target, the line's own height unchanged */
.set-from{color:var(--ink-2)}
.set-label.set-from{font-size:14px}
.set-from a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;vertical-align:middle;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.set-from-arrow{display:inline-block;transition:transform var(--t-fast) var(--ease)}
@media(hover:hover){
  .set-from a:hover{color:var(--ink)}
  .set-from a:hover span:first-child{text-decoration:underline;text-underline-offset:3px}
  .set-from a:hover .set-from-arrow{transform:translateX(3px)}
}
.set-head+.set-from{margin:-8px 0 10px;font-size:14px;line-height:20px}
/* the one group no heading names, where it is the only one — and each of Editions' two parts (work.js apart): its own name heads it
   in «장면별»'s place, the way to its show beside it where it has one, its photographs as close under it as «모두 21장»'s */
.sets-head .set-from{margin:0;font-size:14px;line-height:20px}
.sets.is-lone .sets-head+.set{margin-top:14px}
/* the show whose words these are (work.js g.words — a group from a show headed by her words on it): in the project's name's place
   and under its hairline, as a group is headed by its show — the same 18px (a phone: 16px) name and count, the way to it beside;
   her heading a step under it, at her words' size */
.work-caption.is-show{font-size:inherit;font-weight:400;line-height:inherit}
.work-caption.is-show+.work-body{margin-top:14px}
.work-caption.is-show+.work-body>h3.work-sub:first-child{font-size:inherit;line-height:inherit}
/* rows at one height: work.js gives each place its width — its share of the row by its own shape, so the row's places stand equally
   tall and run the whole width (a row that would stand taller than an ordinary one: at that height, from the left, the rest of its
   line kept) — and the places wrap into those rows; nothing is moved */
.set-rows{--sg:12px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sg)}
/* the place holds the photograph's own shape (the button), and under it, where the data names each work, its name */
.set-pic{flex:none;width:calc((100% - 3*var(--sg))/4);min-width:0;margin:0}
.set-pic[hidden]{display:none}
.set-open{position:relative;display:block;width:100%;aspect-ratio:var(--r,1.5);background:var(--mat);cursor:zoom-in}
.set-open img{display:block;width:100%;height:100%;object-fit:contain}
/* a work's name under its photograph (Objects: 화병 — 장미 메달리온), as a card's on the series' home: 15/700 in ink, clear of the line
   that marks the one on show; the rows stand further apart, so each name reads as its own photograph's, not the next row's */
.set-name{margin:12px 0 0;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink)}
.set-rows.has-names{row-gap:26px}
.set-open:focus-visible{outline:0}
.set-open:focus-visible::after{content:'';position:absolute;inset:0;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--paper)}
/* a wide screen, while «장면별» is read (work.js: .is-on): the same groups one under another in the empty foot of the column beside,
   under a hairline as the table's, the group in view in ink, the others in ink-2 (as rose-in-flux.html's band marks its part) */
.sets-aside{display:none}
@media(min-width:1024px){
  .work-info{position:relative}
  .work-info>.sets-aside{position:absolute;left:0;right:0;top:calc(100% + 20px);display:block;padding-top:14px;
    opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease),visibility 0s var(--t-fast)}
  .sets-aside::before{content:'';position:absolute;top:0;left:-10px;right:-10px;border-top:1px solid var(--line)}
  .sets-aside.is-on{opacity:1;visibility:visible;transition:opacity var(--t-fast) var(--ease)}
  .sets-aside-head{margin:0 0 4px;font-size:15px;font-weight:700;line-height:24px}
  .sets-aside a{display:flex;align-items:center;gap:5px;min-height:36px;font-size:15px;line-height:21px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
  .sets-aside a.is-at{color:var(--ink)}
  @media(hover:hover){.sets-aside a:hover{color:var(--ink)}}
}
/* the photograph on show in the slider above (work.js): a 2px line 4px under it, as the series' row marks this work — in the colour of
   its own work (--tone: work.js tint, read from the photograph, 3:1 on the white; ink until it has arrived, and for a work in ink).
   A line, never a word or a ground */
.set-pic.is-here .set-open{box-shadow:0 4px 0 var(--paper),0 6px 0 var(--tone,var(--ink))}
/* «모두 9장 보기» · «12장 더 보기 · 46장 남음» · «접기»: quiet, under the rows, as «크게 보기» is under the wall. The foot keeps its
   room when it has nothing to hold, so the photographs of every group end as far from the next group's name (1440: 64px) */
.set-foot{display:flex;flex-wrap:wrap;column-gap:28px;min-height:44px;margin-top:2px}
/* … but the last group of the words, all on show, has no next group to keep that room for (Lenovo's store: the foot's hairline comes
   as far under its photographs as under words) */
.work-body>.set:last-child .set-foot:not(:has(>:not([hidden]))){min-height:0}
.set-more,.set-fold{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;line-height:20px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.set-more svg,.set-fold svg{flex:none;width:11px;height:7px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform var(--t-fast) var(--ease)}
.set-fold svg{transform:rotate(180deg)}
.set-more[hidden],.set-fold[hidden]{display:none}
@media(hover:hover){.set-more:hover,.set-fold:hover{color:var(--ink)}}

/* ---------- the series' other works: hung at one height, each as wide as its own shape, like works along one wall; this one marked ---------- */
/* whole, never cropped (the height is the row's, the width the photograph's own); more than the wall holds → the row scrolls sideways */
.series-works{--sw:220px;--sw-min:120px;margin-top:40px}
/* under the wall or the words: a hairline from column line to column line and the head 20px under it, as «장면별» and «모두 21장» open
   (on a tablet or a phone the row ends the series' block, whose wordmark names it: no head, no hairline) */
.work-text>.series-works{margin-left:-10px;margin-right:-10px;padding:20px 10px 0;border-top:1px solid var(--line)}
.work-text>.series-works:first-child{margin-top:34px}
/* its head says what the row is («같은 연작 작품»); the series' name and the way to all of it are the block's, in the column beside */
.series-works-head{margin:0 0 14px}
.series-works-head h2{font-size:18px;font-weight:700;line-height:24px}
/* each work a column of three rows — picture · name · medium and size — shared across the row (subgrid), so the names begin on one
   line and the second lines on the next, however many lines a name takes */
.series-works ul{display:grid;grid-auto-flow:column;grid-auto-columns:min-content;grid-template-rows:repeat(3,auto);gap:0 20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:8px}
.series-works li{display:grid;grid-row:span 3;grid-template-rows:subgrid;width:min-content;min-width:96px;scroll-snap-align:start}
.series-works li>a{display:grid;grid-row:span 3;grid-template-rows:subgrid;min-height:44px}
/* the row runs the wall's whole width (work.js): the last work ends on its edge */
.series-works.is-full ul{justify-content:space-between}
.sw-pic{position:relative;display:block;width:fit-content;height:var(--sw-h,var(--sw))}
.sw-pic img{display:block;width:auto;max-width:none;height:100%}
/* this one: a 2px line 4px under its picture — as wide as the picture itself — in the colour of the work (--tone: work.js tint;
   ink until its picture has arrived). Its picture keeps its colours (work.js: no .bw), so the line is never greyed with it */
.series-works [aria-current] .sw-pic img{box-shadow:0 4px 0 var(--paper),0 6px 0 var(--tone,var(--ink))}
/* each work named as the series' home names its cards (rose-in-flux.html .rif-name · .rif-meta): its name 15/700 in ink, and under it
   its medium and its size as one line, «Oil on Silk, 130 × 97 cm», 14/400 thinned — one rule for a work's name wherever it stands; a
   name of two or three lines breaks evenly (its dash kept with the word before it — work.js), the size never inside itself */
.sw-title{display:contents}
.sw-name{display:block;margin-top:12px;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);text-wrap:balance}
.sw-meta{display:block;margin-top:2px;font-size:14px;line-height:1.35;color:var(--ink-2);text-wrap:pretty}
.sw-meta .nb{white-space:nowrap}
@media(hover:hover){.series-works a:hover .sw-name{text-decoration:underline;text-underline-offset:3px}}
/* where a row would leave the works too small (work.js): squares, all in view — on a wide screen one line of them (--sw-cols: all
   six, about a row's height), on a 1024 screen or a tablet a grid of three, on a phone of three or two. Each work in its square,
   whole (contain), its own shape, standing at the square's foot and at its left, so picture, name and this one's line all begin on
   the same left edge and the names of a line on one line. A wide work's square is as wide as its shape asks (work.js --sq: the
   line's column, or two or three of a grid's), so it stands as tall as the others, not a third of a square. The space between two lines is the works' own (padding — the grid's gap
   would part each name from its picture too); the last line's is taken back by the list's own margin */
.series-works.is-grid ul{grid-auto-flow:row;grid-template-columns:repeat(var(--sw-cols,3),minmax(0,1fr));grid-template-rows:none;column-gap:20px;overflow:visible;scroll-snap-type:none;padding-bottom:0;margin-bottom:-28px}
.series-works.is-grid li{width:auto;min-width:0;padding-bottom:28px}
.series-works.is-grid .sw-pic{width:100%;height:auto;aspect-ratio:var(--sq,1)}
.series-works.is-grid .sw-pic img{width:auto;max-width:100%;height:100%;object-fit:contain;object-position:0 100%}

/* ---------- the column beside, on a wide screen ---------- */
/* its white runs to the column's foot (8바퀴 심사 ①: under the facts, the series' block or a bare head, the line between its two columns
   stood up again out of nothing — x 247, from y 341 to 900 on a page with no table): the column line between the two columns stands
   only inside the table of facts, drawn there by the table itself, in the very place of the grid's line (the label's cell's right edge);
   the column's outer lines stay */
@media(min-width:1024px){
  .work::before{content:'';grid-column:1/span 2;grid-row:1/span 2;margin:0 10px;background:var(--paper)}
  .work .info th{box-shadow:inset -1px 0 var(--line)}
}

/* ---------- neighbours ---------- */
.work-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));margin-top:60px;border-top:1px solid var(--line);font-size:15px;line-height:21px}
/* no words (Cat & Animals, a fan, Objects): the page ends with its photographs — the wall's line or «모두 21장 보기» — and the foot
   comes 20px under them, not after a band of bare column lines: those 20px are the white of the words' column itself, so no stub of
   column line stands between the photographs and the foot's hairline either. The same where the series' works end the page (a work
   of Rose in Flux, a show of it — or, with no words, the series' works and the site's notice under them): 40px of that white under
   the names, then the foot's hairline (on a phone: work.css below, the series' block that holds them) */
.work:not(:has(.work-caption)) .work-text{padding-bottom:20px}
.work:not(:has(.work-caption)) .work-text:has(>.series-works),.work .work-text:has(>.series-works:last-child){padding-bottom:40px}
.work:not(:has(.work-caption)) .work-nav,.work:has(>.work-text>.series-works:last-child) .work-nav{margin-top:0}
.work-nav a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px}
.work-nav .nav-prev{grid-column:1/span 2}
.work-nav .nav-list{grid-column:3/span 2}
.work-nav .nav-next{grid-column:5/span 2;justify-content:flex-end;text-align:right}
.work-nav .nav-arrow{flex:none}
.work-nav .nav-title{text-wrap:balance}
.work-nav a:hover .nav-title{text-decoration:underline;text-underline-offset:3px}
/* ↑ is for tablets and phones (below) */
.work-up{display:none}

/* ---------- until the page is built: what would move waits unseen (the title stays, its tags' place held) ---------- */
.js .work:not(.is-ready) .work-title{margin-top:29.4px}
.js .work:not(.is-ready) .tags+.work-title{margin-top:0}
.js .work:not(.is-ready) .info,.js .work:not(.is-ready)>.work-body{visibility:hidden;animation:work-show 0s 4s forwards}
.js body:has(.work:not(.is-ready)) .site-footer{visibility:hidden;animation:work-show 0s 4s forwards}
/* the wall takes the height of the photograph the address names at once, not in .4s, while the page is built */
.js .work:not(.is-ready) .slider{transition:none}
@keyframes work-show{to{visibility:visible}}

@media(min-width:1024px){
  /* the wall set once for the project (work.js), so the line under it stays put */
  .slider{height:var(--wh,var(--wall));transition:none}
  /* one work the wall is too large for (work.js: .is-big — an upright or square work its height binds, short of the wall's sides): the
     white wall takes the first screen, from the header's rule to 10px above the screen's foot (the band, its 1px rule, the wall's 11px
     over the work and those 10px: 22px besides the band — 1440 × 900: 674px), never taller than it is wide; the work hangs in its
     middle as large as that allows. */
  .work-main.is-big .slider{--wall:clamp(420px,100svh - var(--head) - 22px,100cqw)}
  /* its line on the white beside the work, as a label on a gallery's wall: in the wall's lower right corner — its right end on the
     wall's (the words' end of column 6: 1440, x 1420), «크게 보기»'s words level with the wall's foot (its 44px row reaches 10px under
     the wall, into the white kept over the screen's foot) — the photograph's own line, then ‹ 01 / 05 ›, then the dots, then «크게 보기»,
     one over another, each to the right (the arrow's mark, not its target, on the edge). One place on every such page, whatever the
     screen's width or the work's: standing 24px from the work it had stood at x 1230–1287 at 1440, page to page, 7–89px from the work
     (1920: 157px) — no place of its own (7바퀴 후 심사 ①·②). Its box reaches from 24px past the widest photograph hung beside it (work.js:
     --lx) to the wall's right end: the photograph's own line wraps there, never into the work. Under ‹ 01 / 26 ›, on a line of their
     own, the dots: without them a page of twenty-six photographs looked like a page of one (round 7's artist, first-time reader and art
     director) — as large as the ordinary wall's (10px: at 6px the way through the photographs read as a hairline's dashes, 7바퀴 후 심사
     ①·②), so a window of 5 past five photographs (--win, work.js WIN_BIG: 78px, inside ‹ 01 / 26 ›'s width, about 107px — they take
     nothing from the work); they stand in the white between the arrows' line and «크게 보기» (no row of their own: -7px over and under),
     so the label is no taller either. Only its buttons and dots take a pointer. Why beside the work: under the wall the line fell just
     past the first screen, and a project of five or twenty-six photographs looked like one of a single photograph; at the foot of the
     column of facts beside (round 7's third draft) it read as the column's, away from the work it works — a first-time reader picked
     the line under the ordinary wall over it, «it is clearer what they control» */
  .work-main.is-big .slider-tools{position:absolute;left:calc(10px + var(--lx,0px));right:10px;bottom:-10px;z-index:1;margin:0;pointer-events:none;
    grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-rows:auto auto auto 44px;align-content:end;justify-items:end;column-gap:0}
  .work-main.is-big .slider-tools button,.work-main.is-big .slider-tools a{pointer-events:auto}
  .work-main.is-big:not(.is-single) .slider-nav,.work-main.is-big .slider-meta{display:contents}
  .work-main.is-big .slider-dots{--win:5;grid-column:1/-1;grid-row:3;margin:-7px 0;pointer-events:auto}
  .work-main.is-big .slider-credit:not([hidden]){grid-column:1/-1;grid-row:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    white-space:normal;margin-bottom:4px;text-align:right}
  .work-main.is-big .slider-prev{grid-column:2;grid-row:2;margin-left:-17px}
  .work-main.is-big .slider-index{grid-column:3;grid-row:2;align-self:center}
  .work-main.is-big .slider-next{grid-column:4;grid-row:2;margin-right:-17px}
  .work-main.is-big .slider-zoom{grid-column:1/-1;grid-row:4;justify-self:end}
  /* each photograph as large as it hangs without reaching the label (work.js hang): beside it, in the wall less the label's width
     on both sides (--side), or over it, in the wall less the label's height (--foot: .is-above). The slide is the measure a pair of
     photographs reads (a container), so two side by side keep to it too */
  .work-main.is-big .slide{container-type:size;padding:0 var(--side,0px)}
  .work-main.is-big .slide.is-above{padding:0 0 var(--foot,0px)}
  /* … and a photograph lower than the wall hangs in its middle, not from its top: a wide room under upright works leaves the white
     above and below it alike, not one band under it */
  .slide-open img{object-position:50% 50%}
  .slide.is-pair{place-content:center}
  /* where the words begin: a hairline as the table's, from column line to column line, over the project's name */
  .work-caption{margin:24px -10px 0;padding:24px 10px 0;border-top:1px solid var(--line)}
  /* a measure for reading: about 34 characters of Korean to the line, the English pair a little longer */
  .work-body{max-width:34em}
  .work-body p.is-pair{max-width:38em}
  /* a heading's one photograph stands in the words' own measure (1440: 646px), its edges on the paragraphs' — the figure of her text,
     not the wall again at the wall's size (the work's first plate is the wall's first photograph) */
  .work-body>.set.is-plate{width:auto}
}
@media(max-width:1023px){
  .work{grid-template-rows:none;padding-top:10px}
  /* head (tags → title → Korean → programme) → what steps (01 / 55 · the hairline · ‹ ›) → photograph → «크게 보기» and its line →
     table → this project's words → the series' block (wordmark · quotation and its source · the way to all · the row of its works).
     work.js moves the parts into this order (so a keyboard meets them in it too); the order below only says it again */
  .work-info{display:contents}
  .work-info>*{grid-column:1/-1}
  .work-head,.work-info>.work-title{order:1}
  .work-info>.work-title-ko{order:2}
  /* the wall runs from column line to column line: the photograph may use the whole width of the grid; its white goes on 16px under
     the photograph (or its caption), so no stub of column line is left above the table */
  .work-main{order:5;grid-column:1/-1;grid-row:auto;padding:0 0 16px;background-position:0 0;background-size:100% 100%}
  .work-head{padding-bottom:0}
  /* «사진 21장 ↓» is a wide screen's: here «모두 21장» comes right under the photograph and the table, a thumb's move away, and the
     line would stand between the head and what steps over the photograph */
  .work-count{display:none}
  .work .info{order:6;grid-column:1/-1}
  .work-text,.work>.work-body{order:9;grid-column:1/-1;grid-row:auto;padding:20px 10px 0}
  .work .work-text{background-position:0 0;background-size:100% 100%}
  /* nothing between the photograph and the words (the series' own page): the words come right on; no words (a work whose words are
     the series'), no block for them */
  .work:not(:has(.info)) .work-text{padding-top:0}
  .work .work-text:empty{display:none}
  /* «모두 21장» right after the table (no words between — Cat & Animals, Objects): the table's last rule is its rule, so no second one
     stands 28px under it like an empty row; its head comes close under it, as a row of the table would */
  .work>.info+.work-text:has(>.sets.is-lead:first-child){padding-top:0}
  .work>.info+.work-text>.sets.is-lead:first-child{margin-top:0;border-top:0;padding-top:14px}
  .work .series-block{order:10;grid-column:1/-1;margin:0 10px;padding:44px 0 0}
  /* after «장면별» the block opens under a hairline, as «장면별» did after the words: words / scenes / series, three parts */
  .work-text:has(.set)+.series-block{position:relative;margin-top:24px;padding-top:16px}
  .work-text:has(.set)+.series-block::before{content:'';position:absolute;top:0;left:-10px;right:-10px;border-top:1px solid var(--line)}
  /* the foot's list, right after the block, is the way to the same list in the same words: the block's gives way to it */
  .series-links a.is-twice{display:none}
  .series-links:not(:has(a:not(.is-twice))){display:none}
  .series-block .series-quote{max-width:34em}
  /* the row of the series' works ends the block; the wordmark above names it. The block's white goes on 40px under the names and the
     foot's hairline comes right under it, so no stub of column line stands between (as on a wide screen) */
  .series-block>.series-works{margin-top:16px}
  .series-block .series-works-head{display:none}
  .work .series-block:has(>.series-works){padding-bottom:40px}
  .work:has(>.series-block>.series-works) .work-nav{margin-top:0}
  .work-nav{order:11}
  .work-nav .nav-prev{grid-column:1}
  .work-nav .nav-list{grid-column:2/span 2}
  /* the tallest a photograph may hang: an upright one is never a thumbnail (4:5 of the grid's width), short enough to leave the
     screen's foot in view; a wide one is as wide as the grid and the wall ends at its foot */
  .slider{--wall:min(125cqw,62svh,560px)}
  /* the wall's line stands over the photograph (work.js puts it first): whatever the photograph's height, the arrows stay where the
     finger left them. One light line close under the head: «01 / 55» at the left, on the title's edge — the head's last line, as it
     were — the hairline of how far along one is, and ‹ › together at the right end, under the thumb; each arrow a 44px target, its
     box reaching a little into the head's white so the line stands close */
  .slider-tools{position:relative;z-index:1;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;margin:-4px 0 0;padding:0 0 0 10px}
  .slider-tools .slider-zoom,.slider-dots{display:none}
  .slider-meta{grid-column:1;grid-row:1;justify-self:start}
  .slider-bar{display:block;grid-column:2;grid-row:1}
  .slider-nav{grid-column:3;grid-row:1}
  .slider-prev svg,.slider-next svg{width:8px;height:16px}
  /* under the photograph, as the wide screen's line has them: «크게 보기» at the left — pressed once, it may follow the photograph's
     height; what is pressed again and again (‹ ›) stays over it — and the scene's own line at the right, as a caption */
  .slider-credit{display:none}
  .slider-foot{display:flex;align-items:flex-start;gap:16px;margin:2px 10px 0}
  .slider-foot .slider-zoom{flex:none}
  .slider-caption{flex:1;min-width:0;padding-top:12px;font-size:13px;line-height:20px;color:var(--ink-2);text-align:right}
  .slider-caption .slider-to{display:inline-block;min-width:44px;padding:12px 0;margin:-12px 0}
  /* one scene only: nothing steps, so nothing can move — «크게 보기» (and the photograph's own line) stands under it, as a caption */
  .work-main.is-single{padding-top:16px}
  .is-single .slider-tools{margin:var(--tg) 0 0;padding:0 10px}
  .is-single .slider-tools .slider-zoom{display:inline-flex}
  .is-single .slider-meta{grid-column:2/-1;justify-self:end}
  .is-single .slider-credit:not([hidden]){display:block}
  .is-single .slider-foot{display:none}
  .work-nav .nav-next{grid-column:4}
  .work.is-words .work-text{grid-row:auto;padding-top:20px}
  .work.is-words .work-body{margin-top:16px}
  .work.is-words .work-head{padding-bottom:16px}
  /* ↑ (work.js: .is-on once the header is out of sight on a long page) — as rose-in-flux.html's */
  .work-up{position:fixed;right:10px;bottom:16px;z-index:40;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:19px;font-weight:700;line-height:1;
    opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease),visibility 0s var(--t-fast)}
  .work-up.is-on{opacity:1;visibility:visible;transition:opacity var(--t-fast) var(--ease)}
  .menu-open .work-up{visibility:hidden}
}
@media(max-width:767px){
  .work-title-ko{font-size:14px;line-height:22px}
  .work-meta{font-size:13px;line-height:20px}
  .work .tag{font-size:13px;line-height:21px}
  .js .work:not(.is-ready) .work-title{margin-top:28px}
  .js .work:not(.is-ready) .tags+.work-title{margin-top:0}
  .work .info{font-size:14px}
  .work .info th,.work .info td{font-weight:500}
  .series-quote blockquote{line-height:26px}
  .series-links{font-size:14px;line-height:20px}
  .series-quote figcaption a{font-size:13px}
  .work-main{--dot:5px;--gap:4px;--dpad:1px;--tg:2px;--pair:10px}
  .slider-zoom{font-size:13px}
  .slider-index{font-size:14px;line-height:20px}
  /* the project's name a clear step over the headings in the words (15px) and under the title (23px) */
  .work-caption{margin-top:20px;font-size:19px;line-height:26px}
  .work-body{font-size:15px;line-height:27px}
  .work-body .work-sub{margin-top:36px;font-size:15px;line-height:24px}
  .work-body .work-line{font-size:14px;line-height:22px}
  .work-body p.is-pair{font-size:14px;line-height:24px}
  /* «장면별»: two to a row (work.js), closer together; a group with its heading follows the words that heading leads */
  .sets{margin-top:44px;padding-top:16px}
  .sets-head h2,.series-works-head h2{font-size:16px;line-height:22px}
  .sets-index{column-gap:16px;font-size:14px;line-height:20px}
  .set{margin-top:10px}
  .set-head{margin-bottom:10px}
  /* the rows stand 14px apart, the photographs of a row 8px: the line under the one on show (6px under it) is its own, not the top
     edge of the photograph under it */
  .set-rows{--sg:8px;row-gap:14px}
  .set-more,.set-fold{font-size:13px}
  .work-body>.set{margin-top:24px}
  .set-label{margin-bottom:8px}
  /* the series' works in a grid of two (390: 179px squares) or three (work.js: .is-grid) */
  .series-works.is-grid ul{column-gap:12px;margin-bottom:-24px}
  .series-works.is-grid li{padding-bottom:24px}
  /* a work's name 14/700, its medium and size 13 (rose-in-flux.html's cards on a phone) */
  .sw-name{margin-top:10px;font-size:14px;line-height:19px}
  .sw-meta{margin-top:1px;font-size:13px;line-height:18px}
  .set-name{margin-top:10px;font-size:14px;line-height:19px}
  .set-rows.has-names{row-gap:20px}
  .sets.is-lead{margin-top:8px}
  .work-nav{grid-template-columns:minmax(0,1fr)}
  .work-nav .nav-prev,.work-nav .nav-list,.work-nav .nav-next{grid-column:1;padding:10px;border-bottom:1px solid var(--line)}
}