/* v2.9: compact opening, tactile browsing, directly accessible project details. */
#tian-coverflow-live .cf-page{max-width:1120px;padding:0 40px;--header-clearance:100px;--project-type-size:14px;--project-copy-size:16px;--project-copy-leading:1.55}
#tian-coverflow-live .cf-header{position:sticky;top:0;z-index:40;isolation:isolate;margin-bottom:0;padding:24px 0 16px;border-bottom:1px solid var(--line);background:var(--paper)}
#tian-coverflow-live .cf-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax);pointer-events:none}
#tian-coverflow-live :is(#work-start,.site-view h1,.si-section,.cf-gallery,[id^="manual-"]){scroll-margin-top:var(--header-clearance)}
#tian-coverflow-live .cf-logo{font-size:28px;letter-spacing:0}
#tian-coverflow-live .cf-nav{gap:26px}
#tian-coverflow-live h1,#tian-coverflow-live h2,#tian-coverflow-live h3{letter-spacing:0;word-spacing:normal}
.home-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px 0 8px}
.home-intro h1{font:400 clamp(24px,2.6vw,32px)/1.3 var(--sans);margin:0}
.home-intro h1 em{font-family:var(--typewriter);font-size:.86em;font-weight:400;font-style:italic;color:var(--red)}
.home-index-link{display:flex;align-items:center;gap:8px;font:13px var(--typewriter);min-height:44px;text-decoration:none;white-space:nowrap}
#tian-coverflow-live .cf-gallery{position:relative;width:min(1200px,calc(100vw - 80px));max-width:none;left:50%;transform:translateX(-50%);margin:0}
#tian-coverflow-live .cf-stage{height:calc(var(--cf-size) + 80px);perspective:none}
#tian-coverflow-live .cf-covers{transform-style:flat}
#tian-coverflow-live .cf-cover{transform-style:flat}
#tian-coverflow-live .cf-stage-wrap{position:static;margin-top:0}
#tian-coverflow-live .cf-summary{inset:0;grid-template-columns:minmax(0,1fr)}
#tian-coverflow-live .cf-cover{box-shadow:0 7px 16px rgb(24 30 24 / .08)}
#tian-coverflow-live .cf-progress{margin:0 auto 20px}
#tian-coverflow-live .cf-progress-fill{background:var(--red)}
#tian-coverflow-live .cf-caption{position:relative;height:0;min-height:0;margin:0;padding:0}
#tian-coverflow-live .cf-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#tian-coverflow-live .cf-title{font-size:20px;line-height:1.35;letter-spacing:0}
#tian-coverflow-live .cf-kind{font:italic 16px/1.4 var(--sans);color:var(--red);margin:3px 0 0}
#tian-coverflow-live .cf-link{font-size:13px;min-width:44px;justify-content:end}
#tian-coverflow-live .cf-footer{max-width:184px;margin:8px auto 0;border:0;padding:0;gap:16px;justify-content:center}
#tian-coverflow-live .cf-count{font-size:12px}
#tian-coverflow-live .cf-footer button{min-width:44px;min-height:44px}
#tian-coverflow-live .pp-card{width:min(470px,calc(100vw - 32px));max-width:none;aspect-ratio:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);column-gap:20px;padding:20px}
#tian-coverflow-live .pp-top{grid-column:1/-1;grid-row:1;margin:0}
#tian-coverflow-live .pp-summary-bottom{grid-column:2;grid-row:2;min-width:0;align-self:center;margin:0}
#tian-coverflow-live .pp-hero{grid-column:1;grid-row:2;align-self:center;width:100%;height:auto;max-height:none;aspect-ratio:1}
#tian-coverflow-live .pp-title{font-size:24px;line-height:1.2;letter-spacing:0}
#tian-coverflow-live .pp-kind{font:italic var(--project-type-size)/1.4 var(--typewriter);color:var(--muted);margin:2px 0 0}
#tian-coverflow-live .pp-description{font-size:var(--project-copy-size);line-height:var(--project-copy-leading);color:var(--muted);margin:10px 0 0}
#tian-coverflow-live .si-section{width:100%;max-width:800px;margin:34px auto 0;padding:0;border-top:1px solid var(--line)}
.index-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0 12px}
.index-heading h2,.index-heading>span{font:12px/1.5 var(--typewriter);color:var(--muted);margin:0}
#tian-coverflow-live .si-entry{scroll-margin-top:var(--header-clearance);border:0;border-bottom:1px solid var(--line)}
#tian-coverflow-live .si-row{display:grid;grid-template-columns:32px minmax(0,1fr) 20px;gap:1px 20px;padding:18px 0;min-height:72px;border:0;align-items:center;font:400 23px/1.3 var(--sans);letter-spacing:0;list-style:none}
#tian-coverflow-live .si-row::-webkit-details-marker{display:none}
#tian-coverflow-live .si-row-number{font:12px/1.5 var(--typewriter);color:var(--muted);letter-spacing:0}
#tian-coverflow-live .si-row-title{grid-column:2;grid-row:1}
#tian-coverflow-live .si-row-category{grid-column:2;grid-row:2;font:italic var(--project-type-size)/1.4 var(--typewriter);color:var(--muted);letter-spacing:0}
#tian-coverflow-live .si-row .si-row-number{grid-column:1;grid-row:1/3}
#tian-coverflow-live .si-row .si-disclosure{grid-column:3;grid-row:1/3}
.si-disclosure{width:18px;height:18px;transition:transform 180ms}
.si-entry[open] .si-disclosure,.si-entry[data-disclosure-open="true"] .si-disclosure{transform:rotate(180deg)}
.si-entry[data-disclosure-open="false"] .si-disclosure{transform:rotate(0)}
#tian-coverflow-live .si-expansion{display:grid;grid-template-columns:1fr;gap:18px;padding:8px 0 36px;animation:none}
.index-note p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:14px;max-width:56ch}
.index-note .text-action{font-size:13px}
#tian-coverflow-live .index-note .icon{width:18px;height:18px;max-height:none;aspect-ratio:auto;background:transparent;display:inline-block}
.index-media{min-width:0}
#tian-coverflow-live .index-media img{display:block;width:var(--media-width);max-width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.site-footer{margin-top:32px;padding:18px 0}
.site-footer a{font-size:12px}
.project-hero{max-width:840px;margin-inline:auto}
.project-hero img{display:block;aspect-ratio:auto;height:auto}
.page-project-kind{font-size:16px;line-height:1.4;margin:-6px 0 18px}
.resource-kind{font-size:14px;line-height:1.4}
@media(max-width:900px){
 #tian-coverflow-live .cf-gallery{width:calc(100vw - 56px)}
 #tian-coverflow-live .cf-page{padding:0 28px}
 #tian-coverflow-live .cf-header{padding-top:22px}
 #tian-coverflow-live .si-row{grid-template-columns:24px minmax(0,1fr) 20px;gap:1px 16px;font-size:22px}
 #tian-coverflow-live .si-row-category{grid-column:2;font-size:14px}
 #tian-coverflow-live .si-row .si-disclosure{grid-column:3;grid-row:1/3;align-self:center}
 #tian-coverflow-live .si-row .si-row-number{grid-column:1;grid-row:1/3;align-self:center}
 #tian-coverflow-live .si-expansion{grid-template-columns:1fr;padding-inline:0;gap:18px}
 .index-note p{max-width:48ch}
}
@media(max-width:560px){
 #tian-coverflow-live .cf-gallery{width:calc(100vw - 24px)}
 #tian-coverflow-live .cf-page{padding:0 20px;--header-clearance:90px;--project-copy-size:14px}
 #tian-coverflow-live .cf-header{padding:18px 0 12px;gap:12px}
 #tian-coverflow-live .cf-logo{font-size:25px}
 #tian-coverflow-live .cf-nav{gap:24px;font-size:12px}
 .home-intro{padding:24px 0 0;align-items:start;gap:14px}
 .home-intro h1{font-size:24px;max-width:none;line-height:1.35}
 .home-index-link{font-size:12px}
 #tian-coverflow-live .cf-stage{height:calc(var(--cf-size) + 64px)}
 #tian-coverflow-live .cf-progress{margin-bottom:14px}
 #tian-coverflow-live .cf-title{font-size:19px;line-height:1.35}
 #tian-coverflow-live .cf-kind{font-size:16px}
 #tian-coverflow-live .cf-caption{position:relative;height:0;min-height:0;margin:0;padding:0}
 #tian-coverflow-live .cf-link{font-size:12px;min-width:44px;max-width:none;align-items:center}
 #tian-coverflow-live .cf-footer{margin-top:4px}
 #tian-coverflow-live .pp-card{width:min(350px,100%);max-width:none;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);column-gap:12px;padding:12px}
 #tian-coverflow-live .pp-title{font-size:20px;line-height:1.2}
 #tian-coverflow-live .pp-kind{font-size:var(--project-type-size);line-height:1.4}
 #tian-coverflow-live .pp-description{font-size:var(--project-copy-size);line-height:var(--project-copy-leading);margin-top:8px}
 #tian-coverflow-live .si-section{margin-top:24px}
 #tian-coverflow-live .si-row{font-size:20px;grid-template-columns:20px minmax(0,1fr) 18px;gap:1px 12px;padding:17px 0}
 #tian-coverflow-live .si-row-category{font-size:var(--project-type-size)}
 #tian-coverflow-live .si-expansion{padding:2px 0 28px;gap:12px}
 .index-note p{font-size:14px;margin-bottom:8px}
 .site-footer{margin-top:24px;gap:16px;flex-wrap:wrap}
 .site-footer>div{gap:16px}
 .site-footer .footer-guide{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.si-disclosure{transition:none}}

/* Regular 400 throughout; hierarchy comes from size, spacing and small serif notes. */
.about-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px}
.about-layout>img{width:100%;max-width:440px;height:auto;aspect-ratio:auto;justify-self:center}
.about-layout article{padding-top:0}
.about-layout .reading h2{margin-top:0;margin-bottom:20px}
.about-layout .reading p{font:16px/1.65 var(--typewriter);color:var(--muted);margin:0 0 20px}
.about-contact{margin-top:28px}
.about-contact p{margin-bottom:2px!important}
@media(max-width:760px){.about-layout{grid-template-columns:1fr;gap:32px}.about-layout>img{max-width:440px}.about-layout article{max-width:54ch;margin:auto;width:100%}}
@media(max-width:560px){.about-layout .reading p{font-size:14px}.about-contact{margin-top:24px}}
#tian-coverflow-live .cf-logo,
#tian-coverflow-live .cf-title,
#tian-coverflow-live .pp-title,
#tian-coverflow-live .si-row,
.site-view h2,.site-view h3{font-weight:400}
#tian-coverflow-live .si-row-category{font-weight:400}
#tian-coverflow-live :is(.home-index-link,.cf-link,.pp-back,.pp-details,.text-action,.back-link,.plain-control,.row-action),
#tian-coverflow-live .project-facts a,.skip-link{
 font-family:var(--typewriter);font-style:italic;font-weight:400;font-size:14px;letter-spacing:0;
}
#tian-coverflow-live :is(.home-index-link,.cf-link,.pp-back,.pp-details,.text-action,.back-link,.plain-control),
#tian-coverflow-live .project-facts a{min-height:44px}
#tian-coverflow-live :is(.home-index-link,.cf-link,.pp-back,.pp-details,.text-action,.back-link,.plain-control):is(:hover,:focus-visible),
.resource-row:is(:hover,:focus-visible) .row-action{text-decoration:underline;text-underline-offset:4px}
.chapter-nav a:hover{color:var(--ink);text-decoration:underline}
.tool-help{display:flow-root}
/* One small footer, with its toy kept inside a 44px target. */
.site-footer{border:0;margin-top:40px;padding:16px 0 24px;display:flex;flex-wrap:nowrap;gap:20px}
.footer-credit{font:12px/1.5 var(--typewriter);color:var(--muted)}
.site-footer .footer-tools{display:flex;align-items:center;gap:24px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .studio-egg{min-width:44px;width:44px;min-height:44px;padding:0;gap:0;flex:none}
.site-footer .studio-egg__label{position:absolute;min-width:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.site-footer .studio-egg__track::before{opacity:0;transition:opacity 160ms}
.site-footer .studio-egg:is(:hover,:focus-visible) .studio-egg__track::before{opacity:1}
@media(max-width:560px){.site-footer{margin-top:24px;gap:16px;padding-bottom:20px}.site-footer .footer-tools{gap:20px}}
@media(prefers-reduced-motion:reduce){.site-footer .studio-egg__track::before{transition:none}}

/* Resource types follow their names on every screen. */
.resource-row h2{margin:0 0 2px}
.resource-row .resource-kind{display:block;margin:0 0 12px}

/* v2.8: project hints, compact excerpts and direct detail navigation. */
#tian-coverflow-live .si-row-number{position:relative}
#tian-coverflow-live .si-row-number::after{content:"";position:absolute;top:50%;left:0;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--project-accent);opacity:0;transform:scale(.7);transition:opacity 140ms,transform 140ms}
#tian-coverflow-live .si-row:focus-visible .si-row-number{color:transparent}
#tian-coverflow-live .si-row:focus-visible .si-row-number::after{opacity:1;transform:scale(1)}
@media(hover:hover){#tian-coverflow-live .si-row:hover .si-row-number{color:transparent}#tian-coverflow-live .si-row:hover .si-row-number::after{opacity:1;transform:scale(1)}}
#tian-coverflow-live .index-note{width:min(44ch,calc(100% - 32px));max-width:100%;margin-inline:auto;font-family:var(--typewriter);font-size:var(--project-copy-size);text-align:left}
#tian-coverflow-live .index-note p{max-width:none;font-size:var(--project-copy-size);line-height:var(--project-copy-leading);max-height:7.75em;overflow:hidden;margin-bottom:4px;mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 100%)}
#tian-coverflow-live .index-note .text-action{display:flex;width:max-content;margin-left:auto;justify-content:flex-end}
#tian-coverflow-live .pp-back{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;width:44px;height:44px;padding:0;color:var(--red)}
#tian-coverflow-live .pp-back .icon{width:20px;height:20px}
#tian-coverflow-live .pp-details{align-self:flex-end;display:flex;align-items:center;justify-content:flex-end;margin:4px 0 0;padding:0;min-width:44px}
@media(prefers-reduced-motion:reduce){#tian-coverflow-live .si-row-number::after{transition:none}}

/* Centered square photographs sit above the narrower reading measure. */
#tian-coverflow-live .index-media{width:min(50ch,100%);margin-inline:auto;font-family:var(--typewriter);font-size:var(--project-copy-size)}
#tian-coverflow-live .index-media img{margin-inline:auto}
.resource-row .resource-kind{font-size:var(--project-type-size)}
.resource-row p{font-size:var(--project-copy-size);line-height:var(--project-copy-leading)}
.library-controls{flex-direction:column;align-items:stretch;gap:22px;padding-bottom:20px}
.library-refinements{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(240px,1.2fr);gap:24px}
.library-select,.library-refinements .search-label{width:auto;min-width:0;font:12px/1.5 var(--typewriter);color:var(--muted)}
.library-refinements select,.library-refinements input{margin-top:4px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;font:14px/1.5 var(--typewriter);min-height:44px}
.library-refinements select{appearance:none;padding-right:30px;background:transparent url('../assets/chevron-down.svg') no-repeat right 4px center;background-size:16px}
.library-refinements select:disabled{opacity:.4;cursor:default}
.library-select:has(select:disabled){color:var(--muted)}
.library-refinements input::placeholder{color:var(--muted);opacity:.85}
.library-results{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px}
.library-results .library-count{margin:0}
.library-results .text-action{font:italic 14px/1.5 var(--typewriter)}
#library-reset[hidden]{display:none}
@media(max-width:640px){
 .library-controls{gap:16px}
 .library-refinements{grid-template-columns:minmax(0,1fr) 110px;gap:16px 24px}
 .library-refinements .search-label{grid-column:1 / -1}
 .library-refinements input,.library-refinements select{font-size:16px}
 .library-results{min-height:54px}
 .filter-list{gap:2px 20px}
}

@media(max-width:360px){
 #tian-coverflow-live .cf-header{gap:10px}
 #tian-coverflow-live .cf-nav{gap:20px}
 #tian-coverflow-live .pp-title{font-size:18px}
}

/* Work opens out into the complete image gallery. */
.cf-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:8px}
#tian-coverflow-live .cf-controls .cf-footer{margin:0}
#tian-coverflow-live .cf-gallery-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:italic 14px/1.4 var(--typewriter);white-space:nowrap;text-decoration:none;color:var(--red)}
.cf-gallery-link img{width:18px;height:18px}
.gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:36px 0 30px}
#tian-coverflow-live .gallery-heading h1{display:flex;align-items:baseline;gap:14px;margin:0;font:400 32px/1.25 var(--sans)}
.gallery-total{color:var(--muted);font:12px/1.4 var(--typewriter)}
.gallery-views{display:flex;align-items:center;gap:24px}
.gallery-views .text-action{min-height:44px;display:flex;align-items:center;font:italic 14px/1.4 var(--typewriter);text-decoration:none;white-space:nowrap}
.project-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 28px}
.project-grid>li{min-width:0}
.project-tile{display:block;color:var(--ink);text-decoration:none;position:relative}
.project-tile>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--line);transition:transform 180ms ease-out}
#tian-coverflow-live .project-tile h2{position:relative;margin:12px 0 2px;font:400 21px/1.2 var(--sans)}
.project-tile p{margin:0;font:italic 14px/1.4 var(--typewriter);color:var(--muted)}
.project-tile h2::before{content:"";position:absolute;left:-18px;top:.36em;width:10px;height:10px;border-radius:50%;background:var(--project-accent);opacity:0;transition:opacity 140ms}
.project-tile:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.project-tile:focus-visible h2::before{opacity:1}
@media(hover:hover){.project-tile:hover>img{transform:translateY(-3px)}.project-tile:hover h2::before{opacity:1}}
@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}}
@media(max-width:560px){
 .cf-controls{gap:12px;margin-top:4px}
 #tian-coverflow-live .cf-controls .cf-footer{gap:8px}
 .gallery-heading{align-items:flex-start;flex-direction:column;gap:4px;padding:24px 0 20px}
 #tian-coverflow-live .gallery-heading h1{font-size:26px}
 .gallery-views{gap:28px}
 .project-grid{gap:28px 16px}
 #tian-coverflow-live .project-tile h2{font-size:18px;margin-top:10px}
 .project-tile h2::before{left:-13px;width:8px;height:8px}
}
@media(prefers-reduced-motion:reduce){.project-tile>img,.project-tile h2::before{transition:none}.project-tile:hover>img{transform:none}}

/* Desktop sketch field: independent placement, scroll arrival and quiet idle motion. */
#tian-coverflow-live .si-section{position:relative}
#tian-coverflow-live .si-item{position:relative;--sketch-tilt:0deg;--sketch-scale:1;--sketch-gap:24px;--sketch-scroll:0px;--sketch-scroll-turn:0deg}
#tian-coverflow-live .index-sketch{position:absolute;top:5px;width:120px;height:100px;display:block;user-select:none;text-decoration:none;z-index:2;transform-origin:50% 55%;transform:translateY(var(--sketch-scroll)) rotate(calc(var(--sketch-tilt) + var(--sketch-scroll-turn))) scale(var(--sketch-scale));transition:opacity 420ms ease,translate 600ms cubic-bezier(.16,1,.3,1),scale 220ms ease;opacity:1;translate:0 0;scale:1}
#tian-coverflow-live .si-item[data-sketch-side="left"] .index-sketch{right:calc(100% + var(--sketch-gap))}
#tian-coverflow-live .si-item[data-sketch-side="right"] .index-sketch{left:calc(100% + var(--sketch-gap))}
#tian-coverflow-live .index-sketch img{display:block;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none}
#tian-coverflow-live .index-sketch:focus-visible{outline:2px solid var(--red);outline-offset:7px;opacity:1;translate:0 0;scale:1.06}
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
 #tian-coverflow-live [data-sketch-motion="ready"] .index-sketch:not(.is-visible):not(:focus-visible){opacity:0;translate:0 20px;scale:.84;pointer-events:none}
 #tian-coverflow-live .index-sketch img{animation:sketch-drift var(--sketch-period,7s) ease-in-out var(--sketch-delay,0s) infinite alternate;animation-play-state:paused}
 #tian-coverflow-live .index-sketch.is-visible img{animation-play-state:running}
 #tian-coverflow-live .index-sketch:is(:hover,:focus-visible) img,#tian-coverflow-live .sketches-paused .index-sketch img{animation-play-state:paused}
 #tian-coverflow-live .si-item:has(.si-row:focus-visible) .index-sketch,
 #tian-coverflow-live .si-item:has([data-disclosure-open="true"]) .index-sketch{scale:1.06}
}
@keyframes sketch-drift{from{transform:translateY(3px) rotate(-1.5deg)}to{transform:translateY(-3px) rotate(1.5deg)}}
@media(hover:hover){#tian-coverflow-live .index-sketch:hover,#tian-coverflow-live .si-item:has(.si-row:hover) .index-sketch{scale:1.08}}
@media(max-width:1100px){
 #tian-coverflow-live .si-item .si-row{grid-template-columns:44px minmax(0,1fr) 20px}
 #tian-coverflow-live .si-item[data-sketch-side] .si-row-number{visibility:hidden}
 #tian-coverflow-live .si-item[data-sketch-side] .index-sketch{left:0;right:auto;top:18px!important;width:44px;height:48px;opacity:1;translate:0 0;scale:1;transform:rotate(var(--sketch-phone-tilt,0deg));transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
 #tian-coverflow-live .index-sketch img{animation:none}
 #tian-coverflow-live .si-item:has(.si-row:focus-visible) .index-sketch,
 #tian-coverflow-live .si-item:has([data-disclosure-open="true"]) .index-sketch{transform:translateY(-3px) rotate(0deg) scale(1.05)}
}
@media(prefers-reduced-motion:reduce){
 #tian-coverflow-live .index-sketch{transition:none;opacity:1;translate:0 0;scale:1}
 #tian-coverflow-live .index-sketch img{animation:none}
}

/* v3 gallery: equal tiles, visible continuous corners and one shared preview layout. */
:root{--image-radius:24px}
html{scrollbar-gutter:stable}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
#tian-coverflow-live img:not(.icon):not(.si-disclosure),#tian-coverflow-live video{border-radius:var(--image-radius);corner-shape:superellipse(1.6)}
#tian-coverflow-live .cf-cover{border-radius:var(--image-radius);background:transparent}
#tian-coverflow-live .cf-gallery-link,.gallery-collapse{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;color:var(--red);text-decoration:none}
.cf-gallery-link svg,.gallery-collapse svg{width:20px;height:20px;transition:transform 200ms cubic-bezier(.2,.8,.2,1)}
.cf-gallery-link:focus-visible,.gallery-collapse:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:8px}
@media(hover:hover){.cf-gallery-link:hover svg,.gallery-collapse:hover svg{transform:scale(1.18)}}
#tian-coverflow-live .project-gallery{width:calc(100vw - 80px);max-width:none;margin-left:calc((100% - (100vw - 80px))/2);padding-top:8px}
.project-gallery .gallery-views{display:flex;justify-content:flex-end;gap:0;padding:6px 0 12px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.project-grid>li{position:relative;min-width:0;aspect-ratio:1}
.project-grid>li:has(:hover),.project-grid>li:has(:focus-visible){z-index:3}
.project-tile{display:block;width:100%;height:100%;aspect-ratio:1;position:relative;transition:transform 230ms cubic-bezier(.2,.8,.2,1);transform-origin:center}
.project-tile>img,.project-tile>.motion-media{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.project-tile>img{transition:none}
.project-tile:focus-visible{transform:scale(1.065);outline:2px solid var(--red);outline-offset:4px;border-radius:var(--image-radius)}
@media(hover:hover){.project-tile:hover{transform:scale(1.065)}.project-tile:hover>img{transform:none}}
.project-tile.is-preview-source{visibility:hidden;transform:none}
.motion-media{display:block;position:relative;isolation:isolate;overflow:hidden;border-radius:var(--image-radius)}
.motion-media>.project-motion{border-radius:0!important;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0}
.motion-media>.project-motion.is-ready{opacity:1}
#tian-coverflow-live .cf-cover>.motion-media,#tian-coverflow-live .pp-hero>.motion-media{width:100%;height:100%}
#tian-coverflow-live .tile-summary{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgb(245 244 239 / .72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#tian-coverflow-live .tile-summary[hidden]{display:none}
#tian-coverflow-live .tile-summary .pp-card{width:min(470px,calc(100vw - 32px),calc(100dvh - 32px));box-sizing:border-box;transform-origin:center;border-radius:16px;position:relative}
.tile-summary .pp-top{display:flex;align-items:center;justify-content:space-between}
.tile-summary .pp-count{font:12px var(--typewriter);color:var(--muted)}
.tile-summary .pp-description{max-height:9.3em;overflow:auto}
.tile-summary .pp-details{font:italic 14px var(--typewriter);color:var(--red);text-decoration:none;min-height:44px;display:flex;align-items:center;margin-left:auto!important;width:max-content}
.tile-flight{position:fixed;top:0;left:0;z-index:2;transform-origin:0 0;overflow:hidden;border-radius:var(--image-radius);pointer-events:none}
.tile-flight>img,.tile-flight>video{display:block;width:100%;height:100%;object-fit:cover;border-radius:0!important}
@media(max-width:900px){#tian-coverflow-live .project-gallery{width:calc(100vw - 48px);margin-left:calc((100% - (100vw - 48px))/2)}}
@media(max-width:560px){
 :root{--image-radius:20px}
 #tian-coverflow-live .project-gallery{width:calc(100vw - 24px);margin-left:calc((100% - (100vw - 24px))/2)}
 .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .project-gallery .gallery-views{padding:0 0 8px}
 #tian-coverflow-live .tile-summary .pp-card{width:min(350px,calc(100vw - 32px),calc(100dvh - 32px));grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.cf-gallery-link svg,.gallery-collapse svg,.project-tile{transition:none}.project-tile:hover,.project-tile:focus-visible{transform:none}.tile-summary{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

/* Preserve margin clearance on compact desktop widths. */
@media(min-width:1101px) and (max-width:1200px){
 #tian-coverflow-live .si-item .index-sketch:is(:hover,:focus-visible),
 #tian-coverflow-live .si-item:has(.si-row:hover) .index-sketch,
 #tian-coverflow-live .si-item:has(.si-row:focus-visible) .index-sketch,
 #tian-coverflow-live .si-item:has([data-disclosure-open="true"]) .index-sketch{scale:1}
}

#tian-coverflow-live .pp-hero{background:transparent}
@media(max-width:560px){
 #tian-coverflow-live .tile-summary .pp-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:4.65em}
}
@media(max-width:360px){
 #tian-coverflow-live .tile-summary .pp-title{font-size:18px}
 #tian-coverflow-live .tile-summary .pp-kind{font-size:12px;line-height:1.4}
 #tian-coverflow-live .tile-summary .pp-description{font-size:13px;line-height:1.45;-webkit-line-clamp:2;max-height:2.9em}
}

/* Archives: one project record, reached from both Work and Library. */
.archive-page{max-width:980px;margin-inline:auto;padding-bottom:8px}
.archive-topline{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:20px;font:13px/1.5 var(--typewriter);color:var(--muted)}
.archive-topline .text-action{font:italic 14px var(--typewriter)}
.archive-heading{padding:20px 0 32px;max-width:780px;margin-inline:auto}
#tian-coverflow-live .archive-heading h1{font:400 clamp(34px,4.2vw,54px)/1.1 var(--sans);margin:0 0 8px}
.archive-heading .project-kind{font:italic 15px/1.4 var(--typewriter);color:var(--muted);margin:0}
.archive-intro{font:16px/1.6 var(--typewriter);color:var(--muted);margin:20px 0 0;max-width:48ch}
.archive-meta{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:24px;font:12px/1.5 var(--typewriter);color:var(--muted)}
.archive-date{display:inline-flex;gap:4px;white-space:nowrap}
.archive-meta time{white-space:nowrap}
.archive-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.archive-tags li{padding:4px 9px;border:1px solid var(--line);border-radius:999px;line-height:1.2}
.archive-hero{max-width:780px;margin-inline:auto}
.archive-page figure img{display:block;width:100%;height:auto;aspect-ratio:var(--media-ratio,16/9);object-fit:contain}
.archive-hero.archive-square{max-width:560px}
.archive-hero.archive-portrait{max-width:420px}
.archive-photo-sequence{display:grid;gap:32px}
.archive-photo{width:100%;margin-inline:auto}
.archive-photo.archive-portrait{max-width:440px}
.archive-photo.archive-square{max-width:540px}
.archive-page figcaption{font:12px/1.5 var(--typewriter);color:var(--muted);margin-top:10px}
.archive-body{display:grid;grid-template-columns:160px minmax(0,640px);justify-content:space-between;gap:48px;margin:60px auto 0;max-width:900px}
.archive-rail{align-self:start;position:sticky;top:calc(var(--header-clearance) + 20px);display:flex;flex-direction:column;gap:8px}
.archive-rail a{display:flex;align-items:center;min-height:36px;font:italic 13px/1.5 var(--typewriter);text-decoration:none;color:var(--muted)}
.archive-rail a:hover,.archive-rail a:focus-visible{color:var(--red)}
.archive-reading{min-width:0}
.archive-reading section{scroll-margin-top:calc(var(--header-clearance) + 24px)}
.archive-reading section+section{margin-top:48px}
#tian-coverflow-live .archive-reading h2{font:400 28px/1.2 var(--sans);margin:0 0 20px}
.archive-reading p{font:16px/1.65 var(--typewriter);color:var(--muted);max-width:54ch;margin:0}
.archive-reading p+p{margin-top:20px}
.archive-facts dd{overflow-wrap:anywhere}
.archive-facts{display:grid;grid-template-columns:1fr 1.6fr;gap:0;margin:0;font:14px/1.6 var(--typewriter)}
.archive-facts dt,.archive-facts dd{margin:0;padding:14px 0;border-top:1px solid var(--line)}
.archive-facts dt{color:var(--muted);padding-right:20px}
.archive-links,.archive-end{display:flex;justify-content:space-between;align-items:center;gap:24px}
.archive-links{margin-top:16px;flex-wrap:wrap}
.archive-links .text-action,.archive-end .text-action{font:italic 14px var(--typewriter)}
.archive-end{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:60px;padding:20px 0 0;border-top:1px solid var(--line)}
.archive-end .archive-prev{justify-self:start}
.archive-end .archive-home{justify-self:center}
.archive-end .archive-next{justify-self:end}
.archive-end button:disabled{color:#a3a6a1;cursor:default;text-decoration:none;opacity:1}
.social-posts{display:grid;gap:16px}
.social-post{display:block;padding:20px;border:1px solid var(--line);border-radius:24px;text-decoration:none;color:var(--ink);transition:border-color 180ms ease}
.social-post-head{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px;font:12px/1.5 var(--typewriter);color:var(--muted)}
.social-post-author{overflow-wrap:anywhere}
.social-post-body{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:28px}
.social-post-image{display:block;min-width:0;overflow:hidden;border-radius:var(--image-radius)}
.social-post-image>img,.social-post-image>.motion-media{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.social-post-image img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.social-post-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:18px}
.social-post-title{font:400 28px/1.2 var(--sans);max-width:9ch}
.social-post-action{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:italic 14px/1.4 var(--typewriter);color:var(--red)}
.social-post-action svg{width:16px;height:16px;transition:transform 180ms ease}
.social-post:hover,.social-post:focus-visible{border-color:var(--muted)}
.social-post:focus-visible{outline:2px solid var(--red);outline-offset:4px}
@media(hover:hover){.social-post:hover .social-post-action svg{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){.social-post,.social-post-action svg{transition:none}.social-post:hover .social-post-action svg{transform:none}}
@media(max-width:760px){
 .archive-body{grid-template-columns:1fr;gap:26px;margin-top:32px}
 .archive-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 22px;border-bottom:1px solid var(--line);padding-bottom:10px}
 .archive-heading{padding:18px 0 26px}
 .archive-topline{padding-top:12px}
 .archive-reading section+section{margin-top:36px}
 .archive-end{margin-top:40px}
}
@media(max-width:560px){
 .archive-meta{gap:12px;margin-top:20px}
 .archive-date{width:100%}
 .archive-tags{gap:6px}
 .archive-tags li{font-size:11px;padding:4px 8px}
 .social-post{padding:16px;border-radius:20px}
 .social-post-head{gap:4px;font-size:11px;margin-bottom:14px}
 .social-post-head>span{width:100%}
 .social-post-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px}
 .social-post-title{font-size:23px}
 .social-post-copy{gap:8px}
 .social-post-action{font-size:13px;gap:8px}
 .archive-intro,.archive-reading p{font-size:14px}
 #tian-coverflow-live .archive-reading h2{font-size:25px}
 .archive-facts{grid-template-columns:1fr 1.3fr;font-size:13px}
 .archive-links{gap:4px 20px}
 .archive-end{gap:16px}
}