body:not(.cyber) .showbook{--i:var(--indigo,#29266a);--e:var(--ember,#c8441c);--y:var(--yellow,#f2c230);--cut:polygon(0 0,84% 0,100% 12%,100% 100%,16% 100%,0 88%);border-block:.5rem solid var(--i)}
body:not(.cyber) .showbook-grid{display:grid;grid-template:auto/minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);place-items:normal;min-height:0}
body:not(.cyber) .showbook-copy{display:grid;justify-items:start;gap:1.2rem;container-type:inline-size}
body:not(.cyber) .showbook-copy>*{order:0;grid-area:auto;position:static;margin:0;transform:none;text-align:left}
body:not(.cyber) .showbook h1{display:block;font:italic 400 clamp(2.4rem,6vw,5rem)/.9 var(--serif-display);font-size:clamp(2.2rem,12.5cqi,5.4rem);letter-spacing:-.02em;color:var(--i)}
body:not(.cyber) .showbook h1>span{display:block;width:fit-content;margin:.06em 0 0 .22em;padding:0 .05em;transform:none;font-size:2.55em;font-style:normal;line-height:.8;letter-spacing:-.045em;text-transform:uppercase;color:var(--i);background:linear-gradient(transparent 56%,var(--y) 56% 86%,transparent 86%)}
body:not(.cyber) .showbook .name-period{color:var(--e)}
body:not(.cyber) .showbook-line{padding:.3rem .85rem;border-left:.3rem solid var(--e);font:600 .8rem/1.55 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--i);max-width:44ch}
body:not(.cyber) .showbook-intro{max-width:40ch;font:1.1rem/1.65 var(--serif-text);color:var(--i)}
body:not(.cyber) .showbook .actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-start}
body:not(.cyber) .showbook .actions>*{min-height:44px;display:inline-flex;align-items:center}
body:not(.cyber) .showbook-portrait{grid-area:auto;position:relative;inset:auto;transform:none;margin:0 .6rem 0 0;width:min(86%,23rem);justify-self:end;display:grid;gap:1rem}
body:not(.cyber) .showbook .portrait-art{display:block;position:relative;width:100%;height:auto;aspect-ratio:auto;border-radius:0;overflow:visible;background:none;box-shadow:none;mask:none;animation:none;transform:rotate(-2deg);filter:drop-shadow(-.8rem .8rem 0 var(--e)) drop-shadow(.45rem -.45rem 0 var(--y))}
body:not(.cyber) .showbook .portrait-default{position:relative;inset:auto;display:block;width:100%;height:auto;border-radius:0;clip-path:var(--cut)}
body:not(.cyber) .showbook .portrait-cyber{border-radius:0;clip-path:var(--cut)}
body:not(.cyber) .showbook-portrait figcaption{position:static;margin:0;font:600 .75rem/1.45 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--i)}
@media (min-width:48em){body:not(.cyber) .showbook-grid{grid-template:auto/minmax(0,7fr) minmax(0,5fr)}body:not(.cyber) .showbook-copy{align-self:end}body:not(.cyber) .showbook-portrait{width:calc(100% - .6rem);max-width:29rem;align-self:start;margin-bottom:clamp(2rem,7vw,7rem);grid-template-columns:minmax(0,1fr) auto}body:not(.cyber) .showbook-portrait figcaption{writing-mode:vertical-rl;transform:rotate(180deg)}}
@media (prefers-reduced-motion:no-preference){body:not(.cyber) .showbook .portrait-default{animation:sbCut 1s ease-out both}body:not(.cyber) .showbook h1>span{animation:sbRise .8s .2s ease-out both}}
@media (prefers-reduced-motion:reduce){body:not(.cyber) .showbook *{animation:none!important;transition:none!important}}
@keyframes sbCut{from{clip-path:polygon(0 0,0 0,0 12%,0 100%,0 100%,0 88%)}}
@keyframes sbRise{from{opacity:0;transform:translateY(.2em)}}
/* Preserve the approved palette and clear the superseded arch frame. */
body:not(.cyber) .showbook{--indigo:#12162B;--ember:#D9542B;--yellow:#F2C230}
body:not(.cyber) .showbook-portrait{padding:0;border:0;border-radius:0;background:transparent}
body:not(.cyber) .showbook-portrait::before{display:none}
body:not(.cyber) .showbook-portrait figcaption{height:auto;writing-mode:horizontal-tb}
@media(min-width:48em){body:not(.cyber) .showbook-portrait figcaption{writing-mode:vertical-rl}}


/* Extend Opus's offset-name and cut-paper motif to the project index and interiors. */
body:not(.cyber) .showcase-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);border:0}
body:not(.cyber) .showcase-grid .project-row:nth-child(n){display:grid;grid-column:span 6;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:start;gap:.65rem;min-width:0;margin:0;padding:1.5rem 0 2rem;border:0;border-top:2px solid #12162B}
body:not(.cyber) .showcase-grid .project-row:nth-child(5n+1){grid-column:span 7}
body:not(.cyber) .showcase-grid .project-row:nth-child(5n+2){grid-column:span 5}
body:not(.cyber) .showcase-grid .project-row:nth-child(5n+3){grid-column:span 5}
body:not(.cyber) .showcase-grid .project-row:nth-child(5n+4){grid-column:span 7}
body:not(.cyber) .showcase-grid .project-row:nth-child(5n){grid-column:1/-1}
body:not(.cyber) .showcase-grid .project-row[hidden]{display:none!important}
body:not(.cyber) .showcase-grid .project-row:nth-child(n)::before{content:none;display:none}
body:not(.cyber) .showcase-grid .project-row:nth-child(n) .project-thumb,body:not(.cyber) .showcase-grid .project-row:nth-child(n) .project-caption,body:not(.cyber) .showcase-grid .project-row:nth-child(n) .project-body,body:not(.cyber) .showcase-grid .project-row:nth-child(n)>p{grid-column:1;grid-row:auto;min-width:0;margin:0}
body:not(.cyber) .showcase-grid .project-row:nth-child(n) .project-thumb{aspect-ratio:16/10;width:100%;padding:clamp(.75rem,3vw,2.5rem)}
body:not(.cyber) .showcase-grid .project-row:nth-child(n) .project-body{padding-top:.65rem}
body:not(.cyber) .showcase-grid .project-body h2,body:not(.cyber) .showcase-grid .project-body h3{font-size:clamp(1.7rem,2.8vw,3rem);line-height:1.15}
body:not(.cyber) .showcase-grid .project-body h2 a,body:not(.cyber) .showcase-grid .project-body h3 a{padding:0;background:linear-gradient(transparent 60%,#F2C230 60% 90%,transparent 90%);color:#12162B}
body:not(.cyber) .showcase-grid .project-row:nth-child(n)>p{max-width:60ch}
body:not(.cyber) .project-filter{justify-content:flex-start}
body:not(.cyber) .project-filter button{border-radius:0}
body:not(.cyber) .section-head h2,body:not(.cyber) .community-intro h2{max-width:22ch;text-align:left;text-wrap:balance}
body:not(.cyber) .page-heading{text-align:left}
body:not(.cyber) .page-heading h1,body:not(.cyber) .page-heading p{margin-left:0;margin-right:auto;text-align:left}
body:not(.cyber) .case-heading{text-align:left}
body:not(.cyber) .case-heading h1{margin-left:0;text-align:left}
body:not(.cyber) #article .article-title{text-align:left;margin-left:0}
body:not(.cyber) .site-footer,body:not(.cyber) .footer-top{text-align:left;align-items:flex-start}
body:not(.cyber) .footer-signature{margin-left:0;text-align:left}
body:not(.cyber) .footer-links{justify-content:flex-start}
@media(max-width:760px){body:not(.cyber) .showcase-grid{grid-template-columns:minmax(0,1fr);gap:1rem}body:not(.cyber) .showcase-grid .project-row:nth-child(n){grid-column:1}body:not(.cyber) .showcase-grid .project-row:nth-child(n) .project-thumb{aspect-ratio:16/11}}