/* Systems detail: a framework presentation, separate from Portfolio and Journal. */
.waves-system-detail{background:var(--paper);color:var(--on-light);overflow-wrap:anywhere}
.system-detail-hero{background:var(--blue);color:var(--on-dark);padding:140px 6% 55px;position:relative;isolation:isolate}
.system-detail-back{display:inline-flex;gap:14px;align-items:center;font:12px/1.6 var(--font-details,monospace);padding:10px 0;margin-bottom:30px}
.system-detail-back:hover{color:inherit;text-decoration:underline;text-underline-offset:.25em}
.system-detail-topline{display:flex;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid currentColor;font:11px/1.7 var(--font-details,monospace);letter-spacing:.13em;text-transform:uppercase}
.system-detail-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:5vw;align-items:center;max-width:1440px;margin:55px auto 50px}
.waves-system-detail #system-detail-title{font:800 clamp(64px,9.2vw,154px)/.95 var(--font-titles,Arial,sans-serif);letter-spacing:-.075em;position:static;width:auto;margin:0;text-wrap:balance}
.system-detail-title-group h1>span{display:inline;color:var(--yellow)}
.system-detail-title-group>p{font-size:clamp(23px,3vw,38px);letter-spacing:-.035em;line-height:1.25;margin:30px 0 0;max-width:500px}
.system-detail-art{margin:0;transform:rotate(3deg);background:var(--ink);border:1px solid rgba(var(--on-dark-rgb),.6);box-shadow:14px 14px 0 rgba(var(--ink-rgb),.23)}
.system-detail-art img{display:block;width:100%;height:auto;object-fit:contain}
.system-detail-explore{display:inline-flex;align-items:center;gap:30px;font:11px/1.6 var(--font-details,monospace);border-bottom:1px solid currentColor;padding-bottom:12px}
.system-detail-explore span{font-size:24px;line-height:1}
.system-detail-method{padding:80px 6% 100px;scroll-margin-top:25px}
.system-detail-body{max-width:1280px;margin:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:4vw;font:19px/1.8 var(--font-body,Arial,sans-serif)}
.system-detail-body>*{grid-column:1/-1;min-width:0}
.system-detail-body>h2{font:750 clamp(29px,4vw,52px)/1.15 var(--font-titles,Arial,sans-serif);letter-spacing:-.045em;max-width:1000px;margin:0 0 32px}
.system-detail-body>h2+p{max-width:880px;margin:0 0 35px;font-size:clamp(19px,2vw,25px);line-height:1.65}
.system-detail-body>p{margin:0 0 28px}
.system-detail-body>p:has(img),.system-detail-body>figure{margin:18px 0 60px}
.system-detail-body img{width:100%;height:auto;max-width:100%;object-fit:contain}
.system-detail-body>h3{grid-column:1/6;font:700 clamp(20px,2.2vw,30px)/1.4 var(--font-titles,Arial,sans-serif);letter-spacing:-.025em;background:var(--ink);color:var(--on-dark);padding:28px;border-top:4px solid var(--yellow);margin:0 0 28px}
.system-detail-body>h3+p{grid-column:6/-1;border-top:1px solid rgba(var(--on-light-rgb),.3);padding:28px 0;margin:0 0 28px;align-self:stretch}
.system-detail-body a{color:var(--secondary-text-on-light,var(--on-light));text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.system-detail-body blockquote{margin:35px 0;padding:0 0 0 25px;border-left:4px solid var(--blue)}
.system-detail-body figcaption{font:12px/1.6 var(--font-details,monospace);margin-top:12px}
.system-detail-body iframe,.system-detail-body video{max-width:100%}
.system-detail-end{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:35px 6%;background:var(--ink);color:var(--on-dark)}
.system-detail-end>span{color:var(--yellow);font-size:70px;line-height:1}
.system-detail-end>a{font:13px/1.8 var(--font-details,monospace);border-bottom:1px solid currentColor;padding-bottom:10px}
@media(max-width:900px){.system-detail-heading{grid-template-columns:minmax(0,1fr);gap:45px}.waves-system-detail #system-detail-title{font-size:clamp(66px,13vw,112px)}.system-detail-art{width:min(100%,620px);justify-self:center;transform:rotate(2deg)}.system-detail-body>h3{grid-column:1/6}.system-detail-body>h3+p{grid-column:6/-1}}
@media(max-width:600px){.system-detail-hero{padding:115px 6% 38px}.system-detail-topline{font-size:10px;gap:15px;flex-wrap:wrap}.system-detail-heading{margin:35px auto;gap:35px}.waves-system-detail #system-detail-title{font-size:clamp(48px,14.5vw,84px);letter-spacing:-.065em}.system-detail-title-group>p{font-size:25px;margin-top:22px}.system-detail-art{box-shadow:7px 7px 0 rgba(var(--ink-rgb),.23)}.system-detail-method{padding:45px 6% 55px}.system-detail-body{display:block;font-size:17px;line-height:1.8}.system-detail-body>h2{font-size:30px;margin-bottom:24px}.system-detail-body>h2+p{font-size:19px}.system-detail-body>h3{padding:22px;font-size:21px;margin-bottom:0}.system-detail-body>h3+p{border-top:0;padding:20px 0 30px;margin-bottom:15px}.system-detail-body>p:has(img),.system-detail-body>figure{margin:22px 0 40px}.system-detail-end{padding:30px 6%}.system-detail-end>span{font-size:48px}}
@media(prefers-reduced-motion:reduce){.system-detail-art{transform:none}}

/* Fit Systems titles to their actual column, including long names such as Mnemosyne. */
.system-detail-title-group{container-type:inline-size}
@supports(font-size:1cqi){.waves-system-detail #system-detail-title{font-size:clamp(28px,18cqi,154px);overflow-wrap:normal;word-break:normal;hyphens:none}}

/* Keep the approved light display type; improve small functional text. */
.system-detail-hero .system-detail-back,.system-detail-hero .system-detail-topline,.system-detail-hero .system-detail-explore{color:var(--on-secondary,var(--on-dark))}