*{box-sizing:border-box}html{background:#000;color:#f4f4ed;scroll-behavior:smooth}body{margin:0;font:18px/1.7 Georgia,serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:6px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid white;outline-offset:7px}header,main,footer{max-width:1400px;margin:auto;padding:30px 6vw}header,footer{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:28px;letter-spacing:-.04em}nav{display:flex;gap:25px;font:11px monospace}.hero{position:relative;min-height:730px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:0}.hero-copy{z-index:1}h1,h2,h3{font-weight:400;letter-spacing:-.045em;line-height:1.06}h1{font-size:clamp(54px,6.5vw,94px);margin:25px 0}h2{font-size:clamp(38px,4.3vw,64px)}h3{font-size:28px}em{color:#bebeb6}.eyebrow,.action,footer{font:11px/1.8 monospace;color:#b9b9ae}.eyebrow{text-transform:uppercase;letter-spacing:.08em}p{max-width:42ch;color:#bcbcb3}.art{position:relative;height:600px;width:115%;margin-left:-12%}.art img,.art canvas,.art video{position:absolute;width:100%;height:100%;object-fit:contain}.art canvas{opacity:0}.art.ready canvas{opacity:1}.art.ready img{display:none}.action{display:inline-block;color:#eee;padding:10px 0;margin-right:25px}section.copy{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:70px 0}.steps{padding:40px 0 80px}.step{display:grid;grid-template-columns:80px 1fr 1fr;gap:30px;padding:35px 0;align-items:baseline}.step p{margin:0}.number{font:11px monospace;color:#999}details{color:#bcbcb3}summary{cursor:pointer;font:12px monospace;color:#eee}footer{padding-block:45px;font-size:10px}button{background:none;border:0;color:#ccc;font:10px monospace;cursor:pointer;position:fixed;bottom:20px;right:25px;z-index:5}.skip{position:absolute;top:-80px}.skip:focus{top:12px;z-index:8;background:black}.contact{padding:55px 0 80px}.contact a{font-size:24px} @media(max-width:700px){header,main,footer{padding-inline:24px}nav{gap:15px;font-size:10px}.brand{font-size:24px}.hero{display:flex;flex-direction:column;min-height:0;align-items:stretch;padding-top:30px}h1{font-size:54px}.art{height:360px;width:100%;margin:0}section.copy{display:block;padding:45px 0}.step{grid-template-columns:25px 1fr;gap:15px;padding:22px 0}.step p{grid-column:2}.steps{padding-bottom:35px}.contact a{font-size:20px}footer{flex-wrap:wrap} }@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}/* Trifallax: an observation journal, with a dark specimen plate. */
html{background:#e9e4d7;color:#252b23}body{font-family:Georgia,serif}header{padding-top:40px}.brand{font-style:italic;font-size:34px}p,.eyebrow,.action,details,summary,footer{color:#4c5146}em{color:#69735d}h1{font-size:clamp(56px,6vw,86px)}.hero{grid-template-columns:1fr 1fr;gap:55px;min-height:700px}.hero .art{background:#080b08;width:100%;margin:0;height:510px;border-radius:50% 50% 0 0;overflow:hidden}.hero .art:after{content:'FIG. 01 — NETWORK STUDY';position:absolute;bottom:18px;left:24px;color:#bbb;font:9px monospace}.steps{counter-reset:observations}.step{border-top:1px solid #b3b5a6}.number{color:#626e50}.contact{border-top:1px solid #b3b5a6}button{background:#e9e4d7;color:#333;padding:8px}.copy h2{font-style:italic}@media(max-width:700px){.hero{display:flex;gap:20px}.hero .art{height:350px;margin:20px 0}.hero h1{font-size:53px}}

/* Open specimen presentation, without a domed frame. */
.hero .art{border-radius:0;background:transparent;overflow:visible;mask-image:radial-gradient(ellipse,#000 35%,transparent 73%)}
.hero .art:after{display:none}