/* thomas.lewiner.org — "paper" layout
   Tunables: how much of the background image shows through. */
:root{
  --ink:#111; --muted:#4a4640; --link:#1a3e8c; --ground:#e9e6e0;
  --sheet-alpha:.975;  /* 1 = opaque sheets, lower = more background visible through the pages */
  --veil:.42;          /* strength of the grey tint over the background image in the margins */
  --veil-color:120 120 124; /* the tint itself (r g b) */
  --bg-grey:.6;        /* 0 = image in full colour, 1 = fully greyscale */
  --bg-image:url(imgs/flow.png);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:16.5px/1.5 'STIX Two Text','Times New Roman',serif;
  padding:24px clamp(8px,3vw,40px) 56px}
.backdrop{position:fixed;inset:0;z-index:-1;background:var(--bg-image) center/cover no-repeat;filter:grayscale(var(--bg-grey))}
.backdrop::after{content:"";position:absolute;inset:0;background:rgb(var(--veil-color)/var(--veil))}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a.q{color:inherit}
main{display:flex;flex-direction:column;gap:24px}
nav.top,.sheet{max-width:1120px;width:100%;margin:0 auto}
nav.top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;margin-bottom:16px;
  padding:6px 12px;background:rgb(255 255 255/.8);border-radius:2px}
nav.top .home{font-variant:small-caps;letter-spacing:.04em;color:var(--muted)}
nav.top .langs{display:flex;gap:14px}
.sheet{background:rgb(255 255 255/var(--sheet-alpha));box-shadow:0 1px 2px rgb(0 0 0/.08),0 8px 32px rgb(0 0 0/.06);
  padding:clamp(24px,4.5vw,56px) clamp(20px,6vw,92px) 24px;min-height:700px;display:flex;flex-direction:column;gap:24px}
.sheet.last{min-height:0}
.folio{margin-top:auto;padding-top:8px;text-align:center;font-size:14px;color:var(--muted)}

.title{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;padding-top:12px}
h1{margin:0;font-weight:500;font-size:clamp(34px,4.4vw,50px);line-height:1.1}
.title p{margin:0}
.affil{font-size:16px}
.contact{font-size:14.5px}
.abstract{max-width:640px;margin-top:14px;font-size:15.5px;text-align:justify;hyphens:auto}
.abstract p{margin:0 0 .5em}
.abs-head{text-align:center;font-weight:700;font-size:15px}
.kw{font-size:14.5px;text-align:left}

h2{margin:1.1em 0 .45em;font-size:20px;font-weight:700;break-after:avoid;break-inside:avoid}
h3{margin:.9em 0 .35em;font-size:16.5px;font-weight:700;font-style:italic;break-after:avoid;break-inside:avoid}
section>div>h2:first-child,.first{margin-top:0}
p{margin:0 0 .7em;text-align:justify;hyphens:auto}
abbr{text-decoration:none}
.cols{columns:2 360px;column-gap:44px;orphans:4;widows:4}
.cols p,.cols li{break-inside:avoid}
.cols p+p{text-indent:1.4em}
.cols p.flow{break-inside:auto}
.colbreak{break-before:column}
.small{font-size:15px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:12px 44px;align-items:start}
.split p{text-align:justify}
.split h3+p,.split h2+h3{margin-top:0}
.tcap{font-size:14px;margin:0 0 6px;text-align:left}

table.cv{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
table.cv th{text-align:left;padding:7px 0 1px;font-size:13.5px;font-weight:600;font-variant:small-caps;letter-spacing:.04em}
table.cv td{vertical-align:top;padding:3px 0;font-size:14px}
table.cv td.when{white-space:nowrap;font-size:13px;padding-right:12px}

ul.list{margin:0 0 .7em;padding-left:1.2em;font-size:15px}
ul.list li{margin-bottom:5px}
.p-title{font-weight:600}
ul.list .p-title a{font-weight:400;font-style:italic}
ol.people{margin:0 0 .7em;padding-left:1.6em}

.plate{margin:0;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));gap:12px}
.panels.wide{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.sub{position:relative;display:block;color:inherit}
.sub img{display:block;width:100%;aspect-ratio:1;object-fit:contain;transition:transform .35s ease}
.panels.wide .sub img{aspect-ratio:16/9;object-fit:cover}
.sub:hover img{transform:scale(1.06)}
.sub .lab{position:absolute;left:0;bottom:0;padding:0 5px 1px 3px;font-size:13px;line-height:1.3;background:rgb(255 255 255/.85)}
figcaption{margin-top:10px;font-size:14.5px;text-align:justify;hyphens:auto}

ol.refs{margin:0;padding:0;list-style:none;font-size:13.5px;line-height:1.45}
ol.refs li{display:grid;grid-template-columns:34px minmax(0,1fr);break-inside:avoid;margin-bottom:5px}
ol.refs li:target{background:rgb(26 62 140/.08);outline:6px solid rgb(26 62 140/.08)}
.ack{margin:4px 0 0;padding-top:14px;border-top:1px solid var(--ink);font-style:italic;font-size:15.5px}

/* ── page transition: pages stack like sheets of paper, and each new page's content rises in ── */
.js[data-fx="stack-rise"] .sheet{position:sticky;transform-origin:50% 0;will-change:transform,opacity}
.js[data-fx="stack-rise"] .sheet>*{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.js[data-fx="stack-rise"] .sheet>*:nth-child(2){transition-delay:.12s}
.js[data-fx="stack-rise"] .sheet>*:nth-child(n+3){transition-delay:.22s}
.js[data-fx="stack-rise"] .sheet.in>*{opacity:1;transform:none}
.js[data-fx="stack-rise"] .sheet .sub{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(.2s + var(--i,0)*60ms)}
.js[data-fx="stack-rise"] .sheet.in .sub{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .sheet,.js .sheet>*,.js .sheet .sub{opacity:1!important;transform:none!important;transition:none!important;position:static!important}
}
@media print{.backdrop,nav.top{display:none}.sheet,.sheet>*,.sheet .sub{opacity:1!important;transform:none!important}.sheet{box-shadow:none;break-after:page;position:static!important;background:#fff}body{background:#fff;padding:0}}