.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); 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). 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). 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 («같은 연작 작품»): a row standing at one height, running the wall's whole width, or, where that would leave
them small, a grid of three, each whole in a square.
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, ending with the series' works. 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:0}
.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}
.work-meta{font-size:15px;line-height:21px;color:var(--ink-2)}
.work-meta span{display:inline}
/* 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 (iroje) 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 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(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 ink */
.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(--ink);transition:left .3s var(--ease),width .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}}
/* ---------- 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: ) is small and grey, not the artist's text */
.work-body .work-note{font-size:13px;line-height:20px;color:var(--ink-2)}
/* a project whose photographs are not here yet: one quiet line where the photograph would be, the column lines showing through */
.work-empty{margin:0;font-size:15px;line-height:21px;color:var(--ink-2)}
/* ---------- 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}
.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:15px;font-weight:700;line-height:24px}
.series-works ul{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:8px}
.series-works li{flex:none;width:min-content;min-width:64px;scroll-snap-align:start}
.series-works li>a{display:block;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: its name in ink and bold, and a 2px ink line 4px under its picture — as wide as the picture itself */
.series-works [aria-current] .sw-pic img{box-shadow:0 4px 0 var(--paper),0 6px 0 var(--ink)}
.sw-title{display:block;margin-top:12px;font-size:14px;line-height:20px;color:var(--ink-2);transition:color var(--t-fast) var(--ease)}
.series-works [aria-current] .sw-title{color:var(--ink);font-weight:700}
@media(hover:hover){.series-works a:hover .sw-title{color:var(--ink)}}
/* where a row would leave the works too small (a phone always, a narrow wall: work.js), a grid of three, all in view: each work in a
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 on one line */
.series-works.is-grid ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;overflow:visible;scroll-snap-type:none;padding-bottom:0}
.series-works.is-grid li{width:auto;min-width:0}
.series-works.is-grid .sw-pic{width:100%;height:auto;aspect-ratio:1}
.series-works.is-grid .sw-pic img{width:auto;max-width:100%;height:100%;object-fit:contain;object-position:0 100%}
/* ---------- 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}
.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}
.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,.work-nav .nav-list:hover{text-decoration:underline;text-underline-offset:3px}
/* ---------- 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}
@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}
/* … 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}
}
@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}
.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}
.work .series-block{order:10;grid-column:1/-1;margin:0 10px;padding:44px 0 0}
.series-block .series-quote{max-width:34em}
/* the row of the series' works ends the block; the wordmark above names it */
.series-block>.series-works{margin-top:16px}
.series-block .series-works-head{display:none}
.work-nav{order:11}
.work-nav .nav-list{display:none}
/* 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}
/* 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:3/span 2}
}
@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}
.work-empty{font-size:14px;line-height:20px}
/* the series' works in a grid of three (work.js: .is-grid) */
.series-works.is-grid ul{gap:24px 12px}
.sw-title{margin-top:12px;font-size:13px;line-height:18px}
.work-nav{grid-template-columns:minmax(0,1fr)}
.work-nav .nav-prev,.work-nav .nav-next{grid-column:1;padding:10px;border-bottom:1px solid var(--line)}
}