:root { --paper: #eee8db; --ink: #25231f; font-family: 'Newsreader', Georgia, serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { position: relative; min-width: 320px; min-height: 100vh; margin: 0; }
body::before, body::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: multiply; }
body::before { opacity: .34; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
body::after { opacity: .24; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='540'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='540' height='540' filter='url(%23b)' opacity='.45'/%3E%3C/svg%3E"); }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; }
a:hover { opacity: .52; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 20px; top: -80px; z-index: 10; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip-link:focus { top: 16px; }
.page { width: min(calc(100% - 80px), 1280px); margin-inline: auto; padding: 38px 0 88px; }
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 16px; line-height: 24px; }
.masthead h1 { margin: 0; font-size: inherit; line-height: inherit; font-weight: 500; }
.masthead span { white-space: nowrap; }
.page main { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 390px); column-gap: 80px; justify-content: space-between; align-items: start; }
.illustration { grid-column: 1; grid-row: 1; position: relative; margin: 44px 0 0; }
.illustration img { display: block; width: 100%; height: auto; }
.abstract { grid-column: 2; grid-row: 1; align-self: center; width: 100%; border: 1px solid var(--ink); padding: 17px 18px 16px; background: rgba(255, 253, 247, .23); }
.abstract p { margin: 0; font-size: 18px; line-height: 1.36; text-align: justify; text-wrap: pretty; }
.abstract p + p { margin-top: 18px; }
.people { grid-column: 1; grid-row: 2; width: min(100%, 480px); list-style: none; margin: 16px 0 0; padding: 0; }
.people li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 11px 0; font-size: 17px; line-height: 24px; }
.people a { display: inline-flex; flex: none; padding: 4px; text-decoration: none; transition: opacity 500ms cubic-bezier(.32,.72,0,1); }
.people svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 1000px) { .page { width: min(calc(100% - 40px), 490px); padding-top: 24px; } .page main { display: block; } .illustration { margin-top: 36px; } .abstract { width: min(100%, 335px); margin-top: 40px; } .people { width: min(100%, 335px); margin-top: 40px; } }