/* Two reading surfaces: an experimental wall and a personal paper archive. */
/* Mirrors the shared secondary-page scale defined at the top of about.css. */
:root{--paper:#fff;--ink:#000;--quiet:#5b5b5b;--line:#dedede;--field-line:#808080;--reading:#f3f5f7;--academic:#24539b;--gutter:clamp(20px,3.4vw,64px);--page-top:clamp(56px,6vw,104px);--page-bottom:clamp(72px,7vw,116px);--section-gap:clamp(48px,5vw,88px);--intro-gap:clamp(52px,5.6vw,104px);--lab-gap:clamp(14px,1.4vw,24px);--fs-display:clamp(40px,5.2vw,86px);--fs-article:clamp(28px,2.8vw,44px);--fs-title:clamp(22px,1.9vw,30px);--fs-heading:clamp(19px,1.5vw,24px);--fs-lab-caption:clamp(14px,1.05vw,16px);--fs-lede:clamp(18px,1.45vw,23px);--fs-reading:17px;--fs-body:16px;--fs-small:14px;--fs-caption:13px;font-family:var(--font);font-synthesis:none;color:var(--ink);background:var(--paper);color-scheme:light}
/* The Lab page is a dark wall. The page ground becomes the surface the experiments are pinned to,
   and the paper palette above is kept for the reading pages. */
html.lab-root{background:#000}
body.lab-page{--paper:#000;--ink:#f4f4f1;--quiet:#8a8a83;--line:#2b2b28;--plate:#0d0d0c;color-scheme:dark;background:var(--paper);color:var(--ink)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img,video{display:block;width:100%;max-width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:5px}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}
.skip-link{position:fixed;left:22px;top:-80px;padding:12px 16px;background:#fff;color:#000}
.skip-link:focus{top:12px}
.research-main{width:100%;max-width:1920px;margin-inline:auto;padding:var(--page-top) var(--gutter) var(--page-bottom);margin-top:var(--header-h)}
/* The archive masthead stays a title, not a poster: the word sits close to the
   scale of the Work and About headings so the records below keep the weight. */
.research-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;padding-bottom:var(--intro-gap)}
.research-intro h1{font-size:var(--fs-display);line-height:1.02;font-weight:400;letter-spacing:-.045em}
.research-intro p{max-width:42ch;font-size:var(--fs-lede);line-height:1.65;padding-bottom:3px}
/* Lab composition follows the Stockholm Design Lab /lab page: the introduction is held in the
   right half under a modest title, and the experiments below are packed into a dense media wall
   with a small caption under each plate. */
.lab-main{padding-top:var(--page-top);padding-bottom:var(--page-bottom)}
.lab-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(18px,2.1vw,36px);row-gap:clamp(26px,3vw,50px);align-items:start;padding-bottom:var(--intro-gap)}
/* Lab is the one page whose title stays modest: the reference holds a small
   title against a generous intro, so the wall of experiments carries the page
   instead of the word above it. */
.lab-intro h1{grid-column:7/-1;font-size:clamp(30px,2.9vw,48px);line-height:1.05;font-weight:400;letter-spacing:-.035em}
.lab-intro p{grid-column:7/-1;font-size:var(--fs-lede);line-height:1.6;letter-spacing:-.005em}
.lab-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:var(--section-gap)}
.lab-filters{display:flex;flex-wrap:wrap;gap:4px 26px}
.lab-filters button{min-height:44px;line-height:1.5;color:var(--quiet);font-size:var(--fs-small);text-align:left;position:relative;transition:color .18s ease}
.lab-filters button[aria-pressed="true"]{color:var(--ink)}
.lab-filters button[aria-pressed="true"]::after{content:"";position:absolute;bottom:8px;inset-inline:0;height:1px;background:currentColor}
.lab-filters button:hover{color:var(--ink)}
.lab-count{margin-left:auto;font-size:var(--fs-caption);color:var(--quiet);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* A packed wall: three equal columns stack their plates with one shared
   measure, so nothing is left stranded in the middle of the grid. Each
   column pairs a wide piece with a tall one, which keeps the three columns
   close in height and the wall reading as one dense field. */
.lab-gallery{display:flex;align-items:flex-start;gap:var(--lab-gap)}
.lab-column{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--lab-gap)}
.lab-entry{margin:0;min-width:0}
/* Filtering hides whole plates, so the survivors reflow through a balanced
   two-column field instead of leaving their column's place empty. */
.lab-gallery.is-filtered{display:block;columns:2;column-gap:var(--lab-gap)}
.lab-gallery.is-filtered .lab-column{display:contents}
.lab-gallery.is-filtered .lab-entry{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--lab-gap)}
.lab-visual{display:block;position:relative;background:var(--plate);overflow:hidden}
.lab-visual:focus-visible{outline-offset:4px}
.lab-visual img{width:100%;height:auto}
.lab-visual video{width:100%;background:var(--plate)}
.lab-entry[data-project="material-motion"] .lab-visual video,.lab-entry[data-project="glass-light"] .lab-visual video{aspect-ratio:16/9}
.lab-entry[data-project="motion-posters"] .lab-visual video{aspect-ratio:101/180}
.lab-entry[data-project="pressure-orb"] .lab-visual video{aspect-ratio:9/16}
/* One line of information per plate: the title stays quiet and, on the two
   playable pieces, its link shares the same row instead of dropping below. */
.lab-caption{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-top:10px}
.lab-caption-heading{min-width:0}
.lab-caption h2{font-size:var(--fs-lab-caption);font-weight:400;line-height:1.3;letter-spacing:-.01em}
.lab-caption h2 a{display:inline-block;padding-block:8px;margin-block:-8px}
.lab-caption h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

.lab-launch{flex:none;white-space:nowrap;padding-block:8px;margin-block:-8px;color:var(--quiet);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:var(--fs-lab-caption)}
.lab-launch:hover{color:var(--ink)}

.lab-close{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-top:var(--section-gap);padding-top:24px;border-top:1px solid var(--line)}
.lab-close p{font-size:var(--fs-title);letter-spacing:-.03em;max-width:40ch;line-height:1.4}
body.lab-page .research-footer{background:#000}
.text-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px;font-size:var(--fs-small);white-space:nowrap}
.papers-intro{padding-bottom:var(--intro-gap)}
.papers-intro h1{font-size:var(--fs-display);font-weight:400;line-height:1.02;letter-spacing:-.045em;overflow-wrap:anywhere}
html[lang="fr"] .papers-intro h1,html[lang="es"] .papers-intro h1{font-size:var(--fs-display);overflow-wrap:normal}
html[lang="zh-CN"] .papers-intro h1{letter-spacing:-.04em}
.papers-intro p{font-size:var(--fs-lede);line-height:1.7;color:var(--quiet)}
.paper-archive{border-top:3px solid var(--ink)}
.paper-archive-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-block:24px;border-bottom:1px solid var(--line)}
.paper-archive-heading h2{font-size:var(--fs-title);font-weight:500;letter-spacing:-.03em}
.paper-archive-heading p{font-size:var(--fs-small);color:var(--quiet)}
.paper-result-count{font-size:var(--fs-small);color:var(--quiet);font-variant-numeric:tabular-nums}
.paper-result-number{color:var(--ink)}
/* The refine rail: five classifications in one sticky column, a record count
   beside every value, and the chosen filters repeated above the records the way
   the reference archives repeat them. */
.paper-applied{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding:14px 0;border-bottom:1px solid var(--line)}
.paper-applied-label{font-size:var(--fs-small);color:var(--quiet)}
.paper-applied-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;list-style:none;margin:0;padding:0}
.paper-applied-token{display:inline-flex;align-items:baseline;gap:6px;font-size:var(--fs-small);line-height:1.5;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .16s ease}
.paper-applied-token:hover{border-color:var(--ink)}
.paper-applied-cross{font-size:var(--fs-small);color:var(--quiet);transition:color .16s ease}
.paper-applied-token:hover .paper-applied-cross{color:var(--ink)}
.paper-applied-clear{margin-left:auto;font-size:var(--fs-small);color:var(--quiet);text-decoration:underline;text-underline-offset:5px;transition:color .16s ease}
.paper-applied-clear:hover{color:var(--ink)}
.paper-columns{display:grid;grid-template-columns:minmax(204px,238px) minmax(0,1fr);column-gap:clamp(30px,4.6vw,84px);padding-top:34px;align-items:start}
/* The refine column pins the search field, then lets the classifications scroll
   under it, so the query stays reachable however deep the record list goes.
   The name stays clear of the reading pages' own `.paper-rail`. */
.paper-refine{position:sticky;top:calc(var(--header-h) + 20px);max-height:calc(100svh - var(--header-h) - 40px);display:flex;flex-direction:column;min-width:0}
.paper-search{position:relative;flex:0 0 auto}
.paper-search .search-box{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border:1px solid var(--field-line);border-radius:3px;background:var(--paper);cursor:text;transition:border-color .16s ease}
.paper-search .search-box:focus-within{border-color:var(--ink)}
.paper-search .search-box input{min-width:0;width:100%;padding:12px 0;border:0;border-radius:0;background:transparent;font-size:16px;line-height:1.5;color:var(--ink);caret-color:var(--ink)}
.paper-search .search-box input:focus{outline:none}
.paper-search .search-box input::-webkit-search-cancel-button{display:none}
.paper-search .search-icon{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;color:var(--ink)}
.paper-search .search-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* The classifications scroll inside the pinned rail, but the bar itself is not
   part of the rail's structure: hiding it keeps the counts and the hairlines
   clear. The column still scrolls by wheel, touch and keyboard focus. */
.paper-facets{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-top:26px}
.paper-facets::-webkit-scrollbar{display:none}
.paper-facets-title{font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em;line-height:1.4;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.paper-facet-group{border-bottom:1px solid var(--line)}
.paper-facet-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 0 10px;font-size:var(--fs-small);font-weight:500;line-height:1.4;letter-spacing:-.005em}
.paper-facet-reset{font-size:var(--fs-caption);color:var(--quiet);text-decoration:underline;text-underline-offset:4px;transition:color .16s ease}
.paper-facet-reset:hover{color:var(--ink)}
.paper-facet-list{list-style:none;padding:0;margin:0 0 16px}
.paper-facet-option{display:flex;align-items:baseline;gap:9px;padding:6px 0;cursor:pointer;font-size:var(--fs-small);line-height:1.45;color:var(--quiet);transition:color .16s ease}
.paper-facet-option:hover{color:var(--ink)}
.paper-facet-option input{width:13px;height:13px;flex:0 0 auto;margin:0;align-self:center;accent-color:var(--ink);cursor:pointer}
.paper-facet-option input:checked+.paper-facet-name{color:var(--ink)}
.paper-facet-name{min-width:0}
.paper-facet-count{margin-left:auto;font-size:var(--fs-caption);color:var(--quiet);font-variant-numeric:tabular-nums;transition:color .16s ease}
.paper-facet-option input:checked~.paper-facet-count{color:var(--ink)}
.paper-facet-option.is-empty{color:#b7b7b7;cursor:default}
.paper-facet-option.is-empty .paper-facet-count{color:#b7b7b7}
.paper-facet-option.is-empty input{cursor:default}
.paper-list{display:flex;flex-direction:column;min-width:0}
.paper-empty{padding-block:48px;font-size:var(--fs-body);line-height:1.7;color:var(--quiet)}
.paper-entry{display:grid;grid-template-columns:minmax(0,1fr) clamp(104px,11vw,142px);gap:clamp(20px,3vw,48px);padding-block:clamp(30px,3.4vw,50px);border-bottom:1px solid var(--line);align-items:start}
.paper-entry:first-child{padding-top:0}
.paper-entry:last-child{border-bottom:0;padding-bottom:0}
.paper-entry[hidden]{display:none}
.paper-thumb{display:block;margin:0}
.paper-thumb img{border:1px solid var(--line);background:#fff}
.paper-entry-body{min-width:0}
.paper-kicker{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;font-size:var(--fs-caption);line-height:1.5;letter-spacing:.01em;color:var(--quiet)}
.paper-field{color:var(--ink)}
.paper-type{color:var(--quiet)}
.paper-kicker-sep,.paper-meta-sep{color:#c9c9c9}
.paper-title{margin-top:10px;font-size:var(--fs-heading);font-weight:400;line-height:1.3;letter-spacing:-.03em;max-width:36ch}
.paper-title a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.paper-byline{margin-top:9px;font-size:var(--fs-body);line-height:1.5}
.paper-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin-top:6px}
.paper-venue{font-size:var(--fs-small);line-height:1.7;color:var(--quiet)}
.paper-year{font-size:var(--fs-small);line-height:1.7;color:var(--ink);font-variant-numeric:tabular-nums}
.paper-doi{font-size:var(--fs-small);line-height:1.7;color:var(--quiet)}
.paper-tag{font-size:var(--fs-caption);line-height:1.5;color:var(--quiet);border:1px solid var(--line);padding:2px 8px;white-space:nowrap}
.paper-abstract{margin-top:14px;max-width:62ch;font-size:var(--fs-body);line-height:1.72;color:var(--quiet);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.paper-entry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:14px}
.paper-read{display:inline-flex;align-items:center;min-height:44px;color:var(--academic);font-size:var(--fs-small);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.paper-read:hover{text-decoration-thickness:2px}
.paper-pdf{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;color:var(--academic);font-size:var(--fs-small);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.paper-entry-actions .paper-pdf{margin-top:0}
.paper-pdf svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6}
.paper-pdf:hover{text-decoration-thickness:2px}
.research-footer{background:var(--ink)}
@media(min-width:1600px){.research-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}}
@media(max-width:1100px){.lab-gallery,.lab-gallery.is-filtered{display:block;columns:2;column-gap:var(--lab-gap)}.lab-gallery .lab-column{display:contents}.lab-gallery .lab-entry{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--lab-gap)}}
@media(max-width:1000px){.research-intro{gap:32px}.paper-columns{grid-template-columns:minmax(178px,204px) minmax(0,1fr);column-gap:36px}.paper-entry{grid-template-columns:minmax(0,1fr) clamp(92px,13vw,124px);gap:24px}}
/* On a phone the rail stops being a column: each classification becomes one
   sideways-scrolling line, so the records stay a short scroll away. */
@media(max-width:820px){.paper-columns{grid-template-columns:minmax(0,1fr);row-gap:26px}.paper-refine{position:static;max-height:none}.paper-facets{overflow:visible;padding-top:18px}.paper-empty{padding-block:36px}.paper-applied{padding:12px 0}.paper-facet-heading{padding:14px 0 8px}.paper-facet-list{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0 22px;margin:0 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.paper-facet-list::-webkit-scrollbar{display:none}.paper-facet-option{white-space:nowrap;padding:6px 0}.paper-facet-count{margin-left:6px}}
@media(max-width:700px){.research-main{padding-top:54px;padding-bottom:64px}.research-intro{grid-template-columns:minmax(0,1fr);gap:24px;padding-bottom:40px}.research-intro p{max-width:37ch}.lab-main{padding-top:44px;padding-bottom:72px}.lab-intro{grid-template-columns:minmax(0,1fr);row-gap:22px;padding-bottom:28px}.lab-intro h1,.lab-intro p{grid-column:1/-1}.lab-controls{gap:6px;margin-bottom:64px;padding-bottom:12px}.lab-filters{gap:4px 20px}.lab-count{flex-basis:100%;margin-left:0}.lab-caption{padding-top:10px}.lab-close{flex-direction:column;gap:12px;margin-top:64px}.papers-intro h1{letter-spacing:-.04em}.paper-archive-heading{padding-block:20px}.paper-entry{grid-template-columns:minmax(0,1fr) 92px;gap:16px;padding-block:26px}.paper-title{max-width:none}.paper-abstract{-webkit-line-clamp:4}}
@media(max-width:400px){.paper-archive-heading{flex-wrap:wrap;gap:8px}.paper-entry{grid-template-columns:minmax(0,1fr) 76px;gap:14px}.paper-facet-list{gap:0 18px}}
/* One column on a phone: the wall reads straight down with the same gutter it
   holds on a wide screen. */
@media(max-width:700px){.lab-gallery,.lab-gallery.is-filtered{columns:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}