@font-face{font-family:Pagella;src:url('fonts/texgyrepagella-regular.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Pagella;src:url('fonts/texgyrepagella-italic.otf') format('opentype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Mynerve;src:url('fonts/mynerve-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:Mynerve;src:url('fonts/mynerve-greek.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}
:root{--paper:#f8f7f3;--ink:#242521;--muted:#62635b;--line:#cbc9bf;--serif:Pagella,Palatino,'Book Antiqua',Georgia,serif;--sans:'Helvetica Neue',Arial,sans-serif;--hand:Mynerve,cursive;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{position:relative;min-height:100vh;margin:0;background:var(--paper);color:var(--ink);font:17px/1.75 var(--serif);isolation:isolate}
.paper-grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.22;background-image:url('img/paper.svg');mix-blend-mode:multiply}
a{color:inherit;text-decoration-color:#9d9c91;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
img{max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
::selection{background:#dedbd0;color:#111}
h1,h2,h3,p,figure{margin-top:0}
h1,h2,h3{font-weight:400;line-height:1.22;letter-spacing:-.035em}
h1{font-size:clamp(36px,4vw,52px);margin-bottom:32px}
h2{font-size:28px;margin:38px 0 18px}
h3{font-size:23px}
p{margin-bottom:20px}
.skip{position:fixed;left:20px;top:-100px;background:var(--paper);padding:10px 20px;z-index:10}
.skip:focus{top:16px}
.sheet{position:relative;max-width:1080px;width:calc(100% - 240px);margin:auto;z-index:1}
.masthead{display:flex;justify-content:space-between;align-items:center;padding:36px 0 30px;border-bottom:1px solid var(--ink)}
.wordmark{display:flex;align-items:center;gap:13px;text-decoration:none;font:36px/1 var(--serif);letter-spacing:.07em}
.wordmark .dragon-emblem{width:64px;height:64px;flex:none;object-fit:contain}
/* The header dragon comes alive while the pointer is over the wordmark (or it has keyboard focus):
   the wing flaps about its root on the back, the tail swishes, the tongue flicks, the body bobs.
   Rotation centres are in the drawing's own 80×80 coordinates. Reduced motion stops all of it. */
.dragon-emblem{overflow:visible}
.dragon-emblem .de-dragon,.dragon-emblem .de-wing,.dragon-emblem .de-tail,.dragon-emblem .de-tongue{transform-box:view-box}
.dragon-emblem .de-dragon{transform-origin:40px 40px}
.dragon-emblem .de-wing{transform-origin:43.8px 42.3px}
.dragon-emblem .de-tail{transform-origin:68px 54px}
.dragon-emblem .de-tongue{transform-origin:5.6px 29.6px}
@media(hover:hover){.wordmark:hover .de-dragon{animation:de-bob 1.8s ease-in-out infinite alternate}
.wordmark:hover .de-wing{animation:de-flap .45s ease-in-out infinite alternate}
.wordmark:hover .de-tail{animation:de-swish 1.1s ease-in-out infinite alternate}
.wordmark:hover .de-tongue{animation:de-flick 1.6s ease-in-out infinite}}
.wordmark:focus-visible .de-wing{animation:de-flap .45s ease-in-out 6 alternate}
.wordmark:focus-visible .de-tail{animation:de-swish 1.1s ease-in-out 2 alternate}
@keyframes de-bob{from{transform:translateY(.8px)}to{transform:translateY(-1.6px)}}
@keyframes de-flap{from{transform:rotate(-9deg)}to{transform:rotate(6deg)}}
@keyframes de-swish{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}
@keyframes de-flick{0%,55%,100%{transform:scaleX(1)}65%,85%{transform:scaleX(1.45)}75%{transform:scaleX(1.05)}}
.wordmark-sub{display:block;font:8px/1 var(--sans);letter-spacing:.17em;margin-top:9px}
/* Top right: university and observatory in the wordmark's serif, then the UJ crest. */
.masthead-place{display:flex;align-items:center;gap:16px;text-align:right}
.masthead-names>span{display:block}
.place-name{font:19px/1.3 var(--serif);letter-spacing:.07em}
.place-sub{font-size:15px}
/* same lettering as "JAGIELLONIAN UNIVERSITY" under the DRAC wordmark */
.place-city{font:8px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;margin-top:5px}
.uj-crest{display:block;width:auto;height:68px;flex:none}
nav{border-bottom:1px solid var(--line)}
nav ul{display:flex;justify-content:space-between;gap:12px;list-style:none;margin:0;padding:0}
nav a{position:relative;display:block;text-decoration:none;font:12px/1.4 var(--sans);letter-spacing:.045em;text-transform:capitalize;padding:19px 0}
nav a:after{content:'';position:absolute;bottom:12px;left:-2px;right:-2px;height:3px;border-bottom:1px solid var(--ink);border-radius:50%;transform:scaleX(0) rotate(-2deg);transition:transform .2s}
nav a:hover:after,nav a[aria-current=page]:after{transform:scaleX(1) rotate(-2deg)}
nav a[aria-current=page]{font-weight:600}
main{padding:64px 0 80px;min-height:470px}
main:focus{outline:none}
body:not(.page-index) main{max-width:850px;margin:auto;padding-top:65px}
body:not(.page-index) main>h1:before{content:'DRAC / ';display:block;margin-bottom:20px;font:10px var(--sans);letter-spacing:.16em;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.13fr 1fr;align-items:center;gap:0;margin-bottom:25px}
.eyebrow{font:10px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;margin-bottom:25px}
.tiny-cross{font-family:var(--hand);font-size:19px;line-height:0;vertical-align:-1px;margin-right:9px}
.hero h1{font-size:clamp(45px,4.8vw,68px);line-height:1.08;letter-spacing:-.055em;margin:0 0 27px}
.amp{font-style:italic;font-weight:400}
.hero-affiliation{font-size:16px;line-height:1.65;color:var(--muted);margin-bottom:25px}
.text-link{display:inline-flex;align-items:center;gap:28px;font:12px/1.8 var(--sans);padding:0 0 5px;text-decoration:none;border-bottom:1px solid #77786e}
.text-link span{font-size:21px;line-height:1;transition:transform .25s}
.text-link:hover span{transform:translate(2px,-2px)}
.hero-figure{margin:0 -26px 0 -15px;align-self:center}
.drawing{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;color:var(--ink)}
.drawing img{display:block;width:100%;pointer-events:none}
.black-hole{width:100%;transform:rotate(-5deg)}
.black-hole>img{transition:transform .6s ease;transform:translate(var(--pull-x,0px),var(--pull-y,0px))}
.drawing>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;pointer-events:none}
.equation-divider{display:flex;align-items:center;gap:30px;margin:42px 0 55px}
.rule{height:1px;background:var(--line);flex:1}
.equation{font:23px/1.4 var(--hand);white-space:nowrap;padding:8px 5px;transform:rotate(-2deg)}
.sub{font-size:.62em;vertical-align:sub;margin-left:-2px}
.fraction{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.8em;line-height:1.1;margin:0 3px}
.fraction span:first-child{border-bottom:1px solid currentColor;padding:0 4px 2px}
.equation>svg{top:auto;bottom:-5px;height:15px;stroke-width:1;stroke-dasharray:750;stroke-dashoffset:750}
.introduction{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-bottom:55px}
.introduction h2{font-size:34px;line-height:1.3;margin:0}
.introduction .eyebrow{margin-bottom:20px}
.intro-copy{font-size:16px;line-height:1.8;padding-top:0}
.intro-copy p+p{color:var(--muted)}
.intro-copy .text-link{margin-top:5px}
.notebook-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.index-entry{padding:27px 24px 30px 0}
.index-entry+.index-entry{border-left:1px solid var(--line);padding-left:24px}
.index-entry:last-child{padding-right:0}
.index-number{font:9px var(--sans);letter-spacing:.14em;color:var(--muted)}
.mini-drawing{width:100%;max-width:280px;margin:14px auto 4px;aspect-ratio:28/15}
.index-entry h2{font-size:23px;margin:7px 0 12px;letter-spacing:-.025em}
.index-entry h2 a{text-decoration:none;display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.index-entry h2 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.index-entry h2 span{font:18px var(--sans)}
.index-entry p{font-size:14px;line-height:1.75;color:var(--muted);margin:0}
.site-footer{border-top:1px solid var(--ink);padding:30px 0 25px}
.footer-top{display:flex;justify-content:space-between;gap:30px;margin-bottom:26px}
.footer-name{text-decoration:none;font-size:17px;line-height:1.5}
.footer-address{font:11px/1.9 var(--sans);text-align:right;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px;font:9px/1.6 var(--sans);color:var(--muted)}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.colophon{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px;padding-top:15px;border-top:1px solid var(--line);font:9px/1.5 var(--sans);color:var(--muted)}
.colophon a{text-decoration:none}
.hand{font:22px var(--hand);transform:rotate(-6deg);white-space:nowrap}
/* Loose manuscript leaves: each scan is cropped BEFORE rotation and fading. */
.margin{position:absolute;top:180px;bottom:125px;width:max(90px,calc((100vw - 1120px)/2));max-width:380px;overflow:hidden;pointer-events:none;z-index:0;color:#77786c}
.margin-left{left:0}
.margin-right{right:0}
.manuscript{position:absolute;width:340px;height:390px;opacity:.34;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15);mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 84%,transparent)}
.scan-crop{position:absolute;inset:0;overflow:hidden;clip-path:inset(1px);background:var(--paper)}
.scan-crop img{position:absolute;max-width:none;pointer-events:none}
/* The source's upper and lower 11.5% lie outside the visible writing area.
   A second edge mask removes the remaining scanning rim without dark bands. */
.scan-crop .facsimile{width:110%;height:130%;left:-5%;top:-15%;object-fit:cover;opacity:0;mask-image:linear-gradient(to bottom,transparent 9%,#000 18%,#000 82%,transparent 91%)}
.scan-crop .facsimile.loaded{opacity:1}
.scan-crop .manuscript-fallback{inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.scan-crop:has(.facsimile.loaded) .manuscript-fallback{opacity:0}
.margin-left .manuscript{right:5px;mask-image:linear-gradient(to right,#000 35%,transparent 100%)}
.margin-right .manuscript{left:5px;mask-image:linear-gradient(to left,#000 35%,transparent 100%)}
.margin-left .leaf-1{top:0;transform:rotate(-14deg)}
.margin-left .leaf-2{top:220px;right:-15px;width:365px;transform:rotate(9deg);opacity:.27}
.margin-left .leaf-3{top:830px;right:20px;transform:rotate(-8deg);opacity:.29}
.margin-left .leaf-4{top:1100px;right:-25px;transform:rotate(15deg);opacity:.26}
.margin-right .leaf-1{top:70px;transform:rotate(12deg)}
.margin-right .leaf-2{top:360px;left:-22px;transform:rotate(-11deg);opacity:.29}
.margin-right .leaf-3{top:700px;left:25px;transform:rotate(16deg);opacity:.26}
.margin-right .leaf-4{top:1080px;left:-15px;transform:rotate(-7deg);opacity:.3}
.margin-diagram{position:absolute;top:615px;left:5%;width:90%;max-width:310px;opacity:.8;transform:rotate(-4deg);pointer-events:auto;cursor:zoom-in;text-decoration:none}
.margin-diagram img{display:block;width:100%;background:var(--paper)}
.margin-diagram:hover{opacity:1}
.margin-tensor{position:absolute;top:940px;left:8px;width:220px;max-width:none;opacity:.4;transform:rotate(13deg)}
.margin-note{position:absolute;top:570px;right:-5px;font:19px var(--hand);white-space:nowrap;opacity:.55;transform:rotate(-12deg)}
.margin-right .margin-note{top:10px;left:10px;right:auto;writing-mode:vertical-rl;transform:rotate(8deg)}
/* Home page: the dragon sits at the top of the footer, under its line (build.py, footer-art). */
.draco-tailpiece{max-width:202.5px;width:39.4%;margin:0 auto 26px;text-align:center}
.draco-tailpiece img{display:block;width:100%;filter:grayscale(1);opacity:.78}
.diagram-dialog{width:min(720px,92vw);max-height:90vh;border:1px solid var(--line);padding:28px 24px 20px;background:var(--paper);color:var(--ink)}
.diagram-dialog:not([open]){display:none}
.diagram-dialog::backdrop{background:rgb(35 36 30 / .45)}
.diagram-dialog>img{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain}
.diagram-dialog form{position:absolute;right:12px;top:3px;margin:0}
.diagram-close{border:0;background:none;font:28px var(--serif);padding:2px 10px;cursor:pointer}
/* Inner pages retain the original content and functionality. */
.topic{display:flow-root;border-top:1px solid var(--line);margin-top:35px;padding-top:0}
.topic figure{float:right;width:260px;margin:5px 0 20px 30px}
.topic figure img{filter:grayscale(1);mix-blend-mode:multiply}
.topic figcaption{font:italic 13px/1.6 var(--serif);color:var(--muted)}
.refs li{margin-bottom:12px;font-size:15px}
.columns{columns:2 16rem;column-gap:50px;padding-left:22px}
.columns li{margin-bottom:15px;break-inside:avoid}
address{font-style:normal;color:var(--muted)}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:5px 22px;margin:25px 0}
.facts dt{font:11px/2.5 var(--sans);color:var(--muted)}
.facts dd{margin:0;overflow-wrap:anywhere}
.people{list-style:none;padding:0;margin-bottom:40px}
.people li{padding:13px 0;border-bottom:1px solid var(--line)}
.people a{text-decoration:none}
.people a:hover{text-decoration:underline}
.role{color:var(--muted);font-size:14px}
.person-head{display:flex;gap:32px;align-items:flex-start}
.person-head .photo{flex:none;width:130px;filter:grayscale(1);padding:5px;border:1px solid var(--line);transform:rotate(-2deg)}
.person-head h1{font-size:36px;margin-bottom:22px}
.person-head address{font-size:15px}
.note{color:var(--muted);font-size:15px}
.pub-filters{display:flex;flex-wrap:wrap;gap:15px;margin:28px 0;padding:20px 0;border-block:1px solid var(--line)}
.pub-filters[hidden]{display:none}
.pub-filters label{display:flex;flex-direction:column;font:11px/1.5 var(--sans);color:var(--muted);flex:1 1 180px}
.pub-filters select,.pub-filters input{width:100%;font:14px var(--serif);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:0;padding:9px 8px;margin-top:7px}
.count,.status{font-size:14px;color:var(--muted)}
.year{margin:35px 0 20px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.pubs{list-style:none;padding:0}
.pubs li{margin:0 0 25px;line-height:1.6}
.pubs .authors,.pubs .title,.pubs .venue,.pubs .links{display:block}
.pubs .authors{font-size:14px}
.pubs .title{font-size:18px}
.pubs .venue,.pubs .links{font-size:13px;color:var(--muted)}
.orcid-profiles{font-size:14px;overflow-wrap:anywhere}
/* All motion is short, local, and initiated by the visitor. */
.orbit-trail{opacity:0;stroke-dasharray:3 6}
.orbit-star{opacity:0;fill:var(--ink);offset-path:path('M50 270C92 380 460 315 453 210C448 124 71 130 50 270');offset-rotate:0deg}
.playing .orbit-star{animation:orbit 2.2s ease-in-out both}
.playing .orbit-trail{animation:appear 2.2s both}
.playing.equation>svg{animation:write 1.8s ease-in-out both}
.trace{stroke-width:2;stroke-dasharray:25 250;stroke-dashoffset:40;opacity:0}
.playing .trace{animation:trace 1.8s ease both}
.wave-pulse{opacity:0;stroke-dasharray:2 8}
.playing .wave-pulse{animation:wave 1.8s both}
.spaceship{transform:translate(53px,105px) rotate(34deg);fill:var(--paper)}
.playing .spaceship{animation:voyage 2.2s ease-in-out both}
@keyframes orbit{0%{offset-distance:0%;opacity:0}10%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes appear{0%,100%{opacity:0}30%,70%{opacity:.2}}
@keyframes write{0%{stroke-dashoffset:750;opacity:0}15%{opacity:.6}70%{stroke-dashoffset:0;opacity:.6}100%{stroke-dashoffset:0;opacity:0}}
@keyframes trace{0%{stroke-dashoffset:40;opacity:0}15%,80%{opacity:.8}100%{stroke-dashoffset:-250;opacity:0}}
@keyframes wave{0%,100%{opacity:0;transform:translateY(0)}25%{opacity:.45;transform:translateY(-8px)}50%{opacity:.45;transform:translateY(8px)}75%{opacity:.45;transform:translateY(-4px)}}
@keyframes voyage{0%{transform:translate(53px,105px) rotate(34deg);opacity:1}40%{transform:translate(128px,76px) rotate(75deg) scale(.25);opacity:0}60%{transform:translate(151px,73px) rotate(75deg) scale(.25);opacity:0}85%{transform:translate(229px,44px) rotate(35deg);opacity:1}100%{transform:translate(246px,24px) rotate(35deg);opacity:0}}
@media(min-width:1600px){.sheet{max-width:1140px}.hero h1{font-size:73px}.margin{width:calc((100vw - 1180px)/2)}}
@media(max-width:1150px){.sheet{width:calc(100% - 150px)}.margin{width:60px}.margin-diagram{display:none}.hero h1{font-size:54px}.introduction{gap:40px}.hero-figure{margin-right:-15px}.index-entry h2{font-size:21px}}
@media(max-width:900px){.sheet{width:calc(100% - 80px)}.margin{width:27px;opacity:.7}.hero h1{font-size:47px}.hero-figure{margin-left:-30px;margin-right:-15px}.hero-affiliation{font-size:15px}.introduction h2{font-size:29px}.index-entry{padding-right:16px}.index-entry+.index-entry{padding-left:16px}.index-entry h2{font-size:19px}.introduction{gap:30px}.equation-divider{gap:20px}.footer-links{gap:12px}}
@media(max-width:650px){body{font-size:16px}.sheet{width:calc(100% - 42px)}.margin{display:none}.masthead{padding:24px 0}.wordmark{font-size:30px;gap:9px}.wordmark .dragon-emblem{width:48px;height:48px}.wordmark-sub{font-size:6px}.masthead-place{gap:10px}.place-name{font-size:11.5px;letter-spacing:.04em;white-space:nowrap}.place-sub{font-size:10px}.place-city{font-size:6px;margin-top:4px}.uj-crest{height:46px}nav ul{justify-content:flex-start;gap:0 21px;flex-wrap:wrap;padding:7px 0}nav a{font-size:11px;padding:10px 0}nav a:after{bottom:5px}main{padding:42px 0 45px}.hero{grid-template-columns:1fr;gap:10px;margin:0}.hero h1{font-size:clamp(43px,10.5vw,62px);line-height:1.07}.hero-copy .eyebrow{margin-bottom:22px}.hero-affiliation{font-size:15px}.hero-figure{width:85%;max-width:370px;margin:0 auto}.hero .text-link{margin-bottom:5px}.equation-divider{gap:10px;margin:35px 0 40px}.equation{font-size:clamp(14px,4vw,19px)}.introduction{grid-template-columns:1fr;gap:22px;padding-bottom:38px}.introduction h2{font-size:31px}.introduction .eyebrow{margin-bottom:15px}.intro-copy{font-size:16px}.notebook-index{grid-template-columns:1fr}.index-entry,.index-entry+.index-entry,.index-entry:last-child{border-left:0;padding:25px 0;display:grid;grid-template-columns:1fr 125px;column-gap:20px}.index-entry+.index-entry{border-top:1px solid var(--line)}.index-number{grid-column:1}.mini-drawing{grid-column:2;grid-row:1/4;margin:0;align-self:center}.index-entry h2{font-size:23px;grid-column:1;margin-top:13px}.index-entry h2 span{display:none}.index-entry p{grid-column:1;font-size:14px}.footer-top{flex-direction:column;gap:18px}.footer-address{text-align:left}.footer-links{flex-direction:column;gap:9px}.colophon{align-items:flex-start}.colophon a{max-width:240px}.colophon .hand{font-size:20px}body:not(.page-index) main{padding:42px 0 45px}h1{font-size:36px}h2{font-size:26px}.person-head{flex-direction:column;gap:25px}.person-head h1{font-size:32px}.topic figure{float:none;width:auto;max-width:320px;margin:0 auto 20px}.facts{gap:5px 15px}.paper-grain{opacity:.18}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.black-hole>img{transform:none}.drawing:hover{opacity:.8}}
@media print{.margin,.paper-grain,nav,.mini-drawing,.colophon,.skip,.draco-tailpiece,.diagram-dialog{display:none}.sheet{width:100%;max-width:none}body{background:#fff;font-size:12pt}.masthead{padding:10px 0}.hero h1{font-size:40pt}.site-footer{break-inside:avoid}main{padding:25px 0}.pub-filters{display:none}}
/* Animated Draco (assets/dragon.js): the canvas takes the image's place and look. */
.draco-tailpiece .dragon-canvas{display:block;width:100%;height:auto;filter:grayscale(1);opacity:.78}
.draco-tailpiece.dragon-live{cursor:default;touch-action:pan-y}
.draco-tailpiece.dragon-live img{display:none}
/* Very narrow phones: the university names and crest move under the DRAC wordmark. */
@media(max-width:380px){.masthead{flex-wrap:wrap;row-gap:14px}.masthead-place{margin-left:auto}}