@font-face{font-family:"Cormorant Garamond";src:url("cormorant-garamond-500.ttf") format("truetype");font-weight:500;font-display:swap}
*{box-sizing:border-box}html{background:#f6f1e8;color-scheme:light}::selection{background:#dcd3c5;color:#111}
.work-page.work-dialog{background:#f6f1e8;backdrop-filter:none;-webkit-backdrop-filter:none}
.work-page-header{position:fixed;z-index:8;inset:0 0 auto;height:10svh;display:flex;align-items:center;justify-content:flex-end;padding-inline:calc(6% + 24px)}
.work-page-header nav{display:flex;gap:36px}
.work-page h1{margin:0 0 44px;text-align:center;font:500 2rem/1.1 "Cormorant Garamond",Baskerville,Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
.work-page .work-project{scroll-margin-block:12px}
.work-skip{position:fixed;z-index:10;left:calc(6% + 24px);top:16px;padding:10px 16px;border:1px solid #111;background:#f6f1e8;color:#111;font:13px "Courier New",monospace;transform:translateY(-180%)}
.work-skip:focus{transform:none;outline:2px solid #111;outline-offset:4px}
.work-dialog-scroll:focus{outline:none}
html.work-page-motion .work-page:not([data-work-phase]) :is(.work-dialog-wash,.work-frame-line,.work-dialog-mark,.work-title-ink,.work-project-preview,.work-project-caption){opacity:0}
@media(max-width:600px){.work-page-header{padding-inline:calc(6% + 22px)}.work-page-header nav{gap:24px}}
@media(max-width:480px){.work-page h1{font-size:1.75rem;margin-bottom:36px}}
@media(max-width:360px){.work-page-header nav{gap:16px}}

.work-page .work-project h2{display:grid;margin:0;text-align:left;font:400 .8125rem/1.45 "Courier New",Courier,monospace;letter-spacing:0;text-wrap:balance}
.work-page .work-project h2>span{grid-area:1/1;min-width:0}