/* Thomas Wagensommerer — works, research, communal tools.
   One markup, two media: print (1920×1080 pages) and web (full-viewport sections).
   Rhythm per project: chapter page (type) → one full-frame image → one full-bleed collage. */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  --bg:#0a0a0a;
  --fg:#ebe9e4;
  --soft:#c4c1ba;      /* running text */
  --muted:#8f8c86;     /* labels, years */
  --rule:#252422;
  --u:1px;             /* 1 design unit = 1px of the 1920×1080 page */
  --gut:calc(6*var(--u));
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
#site{background:var(--bg);color:var(--fg);font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
img{display:block}
a{color:inherit}

.label{font-size:calc(15*var(--u));letter-spacing:.24em;text-transform:uppercase;font-weight:400;line-height:1.4;color:var(--muted)}

/* ---------- page ---------- */
.pg{position:relative;width:calc(1920*var(--u));height:calc(1080*var(--u));overflow:hidden;background:var(--bg)}
.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- cover (print) ---------- */
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 45%);pointer-events:none}
.cover .txt{position:absolute;z-index:1;left:calc(96*var(--u));right:calc(96*var(--u));bottom:calc(88*var(--u))}
.cover .name{margin:0 0 calc(20*var(--u));font-size:calc(56*var(--u));font-weight:400;line-height:1;letter-spacing:-.005em}
.cover .label{color:var(--fg);opacity:.82}

/* ---------- index ---------- */
.index{display:grid;grid-template-rows:auto 1fr;padding:calc(96*var(--u))}
.index .vhead .big{margin:calc(22*var(--u)) 0 0;font-size:calc(80*var(--u));font-weight:400;line-height:1;letter-spacing:-.02em}
.index ol{list-style:none;margin:0;padding:0;align-self:end;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;column-gap:calc(120*var(--u))}
.index li{display:flex;justify-content:space-between;align-items:baseline;gap:calc(24*var(--u));padding:calc(9*var(--u)) 0 calc(10*var(--u));border-top:1px solid var(--rule);font-size:calc(19*var(--u));line-height:1.3}
.index li a{text-decoration:none}
.index li .yr{flex:none;font-size:calc(14*var(--u));letter-spacing:.14em;color:var(--muted)}

/* ---------- chapter page: one per project, the clear start ---------- */
.chap{display:grid;grid-template-rows:auto 1fr auto;padding:calc(96*var(--u)) calc(96*var(--u)) calc(100*var(--u))}
.chap .kick{margin-bottom:calc(26*var(--u))}
.chap .ctitle{margin:0;max-width:calc(1500*var(--u));font-size:calc(80*var(--u));font-weight:400;line-height:1.02;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
.chap .csub{margin:calc(22*var(--u)) 0 0;max-width:calc(1300*var(--u));font-size:calc(26*var(--u));line-height:1.35;color:var(--muted);text-wrap:balance}
.chap .cbody{grid-row:3;display:grid;grid-template-columns:calc(560*var(--u)) 1fr;column-gap:calc(140*var(--u));align-items:start;border-top:1px solid var(--rule);padding-top:calc(36*var(--u))}
.facts{margin:0;display:flex;flex-direction:column;gap:calc(14*var(--u))}
.facts div{display:grid;grid-template-columns:calc(150*var(--u)) 1fr;gap:calc(18*var(--u));align-items:baseline}
.facts dt{font-size:calc(13*var(--u))}
.facts dd{margin:0;font-size:calc(18*var(--u));line-height:1.5;color:var(--fg);overflow-wrap:anywhere}
.facts dd span{display:block}
.abstract{margin:0;max-width:44em;font-size:calc(24*var(--u));line-height:1.62;font-weight:400;color:var(--soft);
  text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3;text-wrap:pretty;hanging-punctuation:first}
.abstract.long{font-size:calc(22*var(--u));line-height:1.6}

/* ---------- images ---------- */
.full .fill{object-fit:cover}
.collage{--gut:calc(6*var(--u))}
.collage .cbox{position:absolute;overflow:hidden;background:#000}
.collage .cbox .fill{object-fit:cover}
.collage:not(.laid) .cbox{position:relative;float:left;width:33.33%;height:50%}

/* ---------- end (print) ---------- */
.end{display:flex;align-items:center;justify-content:center}
.end .label{color:var(--fg);letter-spacing:.3em;opacity:.8}

/* =================== PRINT =================== */
@page{size:1920px 1080px;margin:0}
.print .pg{break-after:page;page-break-after:always}
.print .pg:last-child{break-after:auto}

/* =================== WEB =================== */
.web{--u:clamp(.62px,calc(100vw / 1920),2px);--gut:max(3px,calc(6*var(--u)))}
.web .collage{--gut:max(3px,calc(6*var(--u)))}
.web .pg{width:100%;height:100vh;height:100svh}
.web main{scroll-snap-type:y proximity}
.web .pg{scroll-snap-align:start}
.web .chap,.web .index{height:auto;min-height:100vh;min-height:100svh}
.web .label{font-size:max(10.5px,calc(15*var(--u)))}
.web .index .vhead .big,.web .chap .ctitle{font-size:max(32px,calc(80*var(--u)))}
.web .chap .csub{font-size:max(17px,calc(26*var(--u)))}
.web .index li{font-size:max(15px,calc(19*var(--u)))}
.web .index li .yr{font-size:max(10.5px,calc(14*var(--u)))}
.web .facts dt{font-size:max(10px,calc(13*var(--u)))}
.web .facts dd{font-size:max(13.5px,calc(18*var(--u)))}
.web .abstract{font-size:max(15.5px,calc(24*var(--u)))}
.web .abstract.long{font-size:max(15px,calc(22*var(--u)))}

/* header: no name — the current project, quietly; index + home on the right */
.web .hdr{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:calc(env(safe-area-inset-top,0px) + 40*var(--u)) max(calc(96*var(--u)),env(safe-area-inset-right,0px)) calc(28*var(--u)) max(calc(96*var(--u)),env(safe-area-inset-left,0px));
  color:#ebe9e4;text-shadow:0 0 14px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4);pointer-events:none}
.web .hdr a{pointer-events:auto;color:#ebe9e4;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.web .hdr .cur{font-size:max(11px,calc(15*var(--u)));letter-spacing:.24em;text-transform:uppercase;opacity:0;transition:opacity .45s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.web .hdr .cur.on{opacity:.9}
.web .hdr nav{display:flex;gap:calc(40*var(--u));flex:none}
.web .hdr nav a{font-size:max(11px,calc(15*var(--u)));letter-spacing:.24em;text-transform:uppercase;padding:0 2px}
.web a:focus-visible{outline:1px solid currentColor;outline-offset:4px}

.web .fill{transition:opacity .9s ease}
.web .fill[data-loading]{opacity:0}
.web .full img,.web .collage img{cursor:zoom-in}

/* dust: one still layer over everything, web only */
.dust{position:fixed;inset:0;z-index:100;pointer-events:none;background:url(../assets/dust-6952998c9a.webp) center center/cover no-repeat;transform:translateZ(0) scale(1.01);backface-visibility:hidden;contain:strict}
@media print{.dust{display:none}}

@media (prefers-reduced-motion:reduce){.web .fill,.web .hdr .cur{transition:none}}

@media (max-width:820px),(max-aspect-ratio:1/1){
  .web{--u:.62px}
  .web .hdr{padding:calc(env(safe-area-inset-top,0px) + 6px) max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}
  .web .hdr nav{gap:18px}
  .web main{scroll-snap-type:none}
  .web .pg{height:auto}
  .web .index{display:block;padding:96px 20px 56px}
  .web .index ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;margin-top:48px}
  .web .chap{display:block;min-height:0;padding:112px 20px 56px}
  .web .chap .cbody{display:block;margin-top:40px;padding-top:28px}
  .web .chap .ctitle{font-size:34px;line-height:1.06}
  .web .facts div{grid-template-columns:96px 1fr}
  .web .abstract{margin-top:32px;font-size:16px;line-height:1.6}
  .web .full .fill{position:static;height:auto;aspect-ratio:auto}
  .web .collage{height:auto;aspect-ratio:4/5}
  .web .collage + .chap,.web .full + .chap{margin-top:0}
}

/* ---------- fullscreen viewer (web) ---------- */
.lb{position:fixed;inset:0;z-index:60;background:rgba(5,5,5,.97);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:94vw;max-height:88vh;width:auto;height:auto;object-fit:contain;display:block}
.lb .lbcap{position:absolute;left:24px;bottom:18px;right:120px;color:#8f8c86;font:400 12px/1.4 "Instrument Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.lb button{position:absolute;background:none;border:0;color:#ebe9e4;font:400 30px/1 "Instrument Sans",sans-serif;cursor:pointer;min-width:48px;min-height:48px;opacity:.7}
.lb button:hover,.lb button:focus-visible{opacity:1;outline:1px solid currentColor;outline-offset:2px}
.lb .lbx{top:12px;right:16px}
.lb .lbp{left:8px;top:50%;transform:translateY(-50%)}
.lb .lbn{right:8px;top:50%;transform:translateY(-50%)}
.chap .ctitle.xl{font-size:calc(58*var(--u));letter-spacing:-.01em;overflow-wrap:anywhere}
.web .chap .ctitle.xl{font-size:max(22px,calc(58*var(--u)))}
@media (max-width:820px),(max-aspect-ratio:1/1){.web .chap .ctitle.xl{font-size:22px}}
.web .hdr .cur{display:block;line-height:44px;min-height:44px;max-width:calc(100% - 220px)}
@media (max-width:820px),(max-aspect-ratio:1/1){.web .hdr .cur{max-width:calc(100% - 150px)}}
@media (max-width:560px){.web .abstract,.web .ovw .agg,.web .lists .it{text-align:left;-webkit-hyphens:manual;hyphens:manual}}

/* ===== Research + Communal Tools additions (same system as the works) ===== */

/* type cover (research, print) */
.tcover .ghost{position:absolute;left:calc(80*var(--u));top:calc(120*var(--u));font-size:calc(380*var(--u));line-height:.9;letter-spacing:-.045em;color:#151514;font-weight:500;white-space:nowrap;user-select:none}
.tcover .txt{position:absolute;left:calc(96*var(--u));right:calc(96*var(--u));bottom:calc(88*var(--u))}
.tcover .name{margin:0 0 calc(20*var(--u));font-size:calc(56*var(--u));font-weight:400;line-height:1;letter-spacing:-.005em}

/* research overview */
.ovw{display:grid;grid-template-rows:auto 1fr auto;row-gap:calc(48*var(--u));padding:calc(96*var(--u))}
.ovw table{border-collapse:collapse;width:100%;align-self:end;font-size:calc(18*var(--u));color:var(--soft)}
.ovw th{text-align:left;font-size:calc(13*var(--u));padding:0 calc(20*var(--u)) calc(14*var(--u)) 0;white-space:nowrap}
.ovw td{border-top:1px solid var(--rule);padding:calc(10*var(--u)) calc(20*var(--u)) calc(13*var(--u)) 0;vertical-align:baseline;line-height:1.35}
.ovw td.t{font-size:calc(20*var(--u));color:var(--fg)}
.ovw td.num{white-space:nowrap}
.ovw tr.contrib td{color:var(--muted)}
.ovw tr.contrib td.t{color:var(--soft)}
.ovw .agg{margin:0;max-width:70em;color:var(--muted);font-size:calc(17*var(--u));line-height:1.55;text-align:justify;-webkit-hyphens:auto;hyphens:auto}

/* research lists */
.lists{display:grid;grid-template-rows:auto 1fr auto;padding:calc(96*var(--u)) calc(96*var(--u)) calc(72*var(--u))}
.lists .cols{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(96*var(--u));align-content:start;margin-top:calc(56*var(--u))}
.lists h3{margin:0 0 calc(14*var(--u));font-size:calc(13*var(--u))}
.lists .col h3:not(:first-child){margin-top:calc(40*var(--u))}
.lists .it{margin:0;padding:calc(11*var(--u)) 0 calc(12*var(--u)) calc(26*var(--u));border-top:1px solid var(--rule);font-size:calc(17*var(--u));line-height:1.5;color:var(--muted);position:relative;text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty}
.lists .it.own{color:var(--soft)}
.lists .it.own::before,.lists .dot{content:"";position:absolute;left:0;top:calc(21*var(--u));width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--soft)}
.lists .legend{position:relative;padding-left:calc(26*var(--u));font-size:calc(13*var(--u))}
.lists .legend .dot{top:50%;transform:translateY(-50%)}

/* web */
.web .lists,.web .ovw{height:auto;min-height:100vh;min-height:100svh}
.web .lists .it{font-size:max(13.5px,calc(17*var(--u)))}
.web .ovw table{font-size:max(13px,calc(18*var(--u)))}
.web .ovw td.t{font-size:max(14px,calc(20*var(--u)))}
.web .ovw .agg{font-size:max(13px,calc(17*var(--u)))}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .web .ovw{display:block;padding:96px 16px 48px}
  .web .ovw table,.web .ovw tbody,.web .ovw tr{display:block;width:100%}
  .web .ovw thead{display:none}
  .web .ovw tr{display:block;border-top:1px solid var(--rule);padding:12px 0}
  .web .ovw td{display:block;border:0;padding:0;font-size:13px}
  .web .ovw td.t{font-size:16px;margin-bottom:4px}
  .web .ovw .agg{margin-top:32px;font-size:14px}
  .web .lists{display:block;padding:48px 20px}
  .web .lists .cols{grid-template-columns:1fr;row-gap:32px;margin-top:32px}
  .web .lists .it{font-size:14px}
  .web .lists .legend{margin-top:24px}
}
.web .lists .lh{visibility:hidden}

/* body font */
@font-face{font-family:"Archivo Text";font-style:normal;font-display:swap;font-weight:300;src:url(fonts/archivo-latin-standard-normal-w300-d88.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Text";font-style:normal;font-display:swap;font-weight:300;src:url(fonts/archivo-latin-ext-standard-normal-w300-d88.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
.abstract,.facts dd,.lists .it,.ovw table,.ovw .agg{font-family:"Archivo Text","Instrument Sans","Helvetica Neue",Arial,sans-serif;font-weight:300;letter-spacing:0}