/* Boring mode: the ice put away. The same night (a still of the sky, dimmed), the same type: light Archivo for names,
   small mono for facts. Three columns of plain cards; a work opens as a sheet over the page. */
html.is-boring #gl,html.is-boring .ui,html.is-boring .apanel,html.is-boring .dpanel,html.is-boring .dctl,html.is-boring .viewer,
html.is-boring .cursor,html.is-boring #iposter,html.is-boring #itemp,html.is-boring .navui,html.is-boring #ph{display:none!important}
html.is-boring,html.is-boring body{height:auto;overflow-y:auto;overflow-x:hidden}
html.is-boring body{background:var(--night)}
html.bo-open body{overflow:hidden}
html.is-boring body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url(img/sky-desk.webp) center/cover no-repeat;filter:brightness(.32) saturate(.8)}

.bo{position:relative;z-index:1;margin:0 auto;padding:0 var(--g) 64px;color:var(--ink);font-family:var(--display)}
.bo a{color:inherit;text-decoration:none}
.bo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 0 0;min-height:64px}
.bo-id b{display:block;font-weight:500;font-size:18px;letter-spacing:-.005em}
.bo-id span,.bo-links,.bo-meta,.bo-sub,.bo-kick,.bo-foot,.bo-close{font-family:var(--mono);font-size:clamp(10.5px,.18vw + 8px,14px);letter-spacing:.14em;text-transform:uppercase}
.bo-id span{display:block;margin-top:5px;color:var(--dim)}
.bo-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;padding-top:4px;color:var(--dim)}
.bo-links a{transition:color .3s}.bo-links a:hover{color:var(--ink)}
.bo-intro{display:flex;align-items:center;gap:clamp(18px,2.4vw,48px);padding:clamp(56px,12vh,160px) 0 clamp(40px,8vh,110px);max-width:min(100%,62vw)}
.bo-me{flex:none;width:clamp(64px,5.4vw,150px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.bo-intro p{margin:0;font-weight:300;font-size:clamp(20px,1.75vw,46px);line-height:1.32;letter-spacing:-.015em;text-wrap:pretty}

.bo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(420px,36vw,820px)),1fr));gap:clamp(40px,4.4vw,96px) clamp(16px,1.8vw,40px)}
.bo-card{display:block;outline:none}
.bo-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:2px}
.bo-media img,.bo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--out),opacity .35s linear}
.bo-media video{opacity:0}.bo-media video.on{opacity:1}
.bo-card:hover .bo-media img,.bo-card:hover .bo-media video{transform:scale(1.02)}
.bo-card:focus-visible .bo-media{outline:1px solid #A9D6FF;outline-offset:4px}
.bo-meta{display:flex;gap:14px;margin-top:16px;color:var(--mute)}
.bo-field{color:#A9D6FF}
.bo-title{display:block;margin-top:10px;font-weight:300;font-size:clamp(24px,.9vw + 14px,48px);line-height:1.12;letter-spacing:-.02em}
.bo-title::after{content:"";display:block;width:32px;height:1px;margin-top:14px;background:#A9D6FF;opacity:.6;transition:width .6s var(--out),opacity .3s}
.bo-card:hover .bo-title::after{width:64px;opacity:1}
.bo-sub{display:block;margin-top:12px;color:var(--dim);line-height:1.6}
.bo-foot{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(64px,12vh,140px);padding-top:22px;border-top:1px solid var(--faint);color:var(--dim)}
.bo-foot a{color:var(--ink)}

/* a work, as a sheet */
.bo-sheet{position:fixed;inset:0;z-index:20;overflow-y:auto;background:var(--night);color:var(--ink);font-family:var(--display);animation:bo-in .45s var(--out)}
.bo-sheet[hidden]{display:none}
@keyframes bo-in{from{opacity:0;transform:translateY(14px)}}
.bo-sheet-in{max-width:1280px;margin:0 auto;padding:clamp(72px,12vh,120px) var(--g) 96px}
.bo-close{position:fixed;top:20px;right:var(--g);z-index:2;padding:8px 0;color:var(--dim);transition:color .3s}.bo-close:hover{color:var(--ink)}
.bo-close span{font-family:var(--display);font-size:18px;letter-spacing:0;margin-left:6px;vertical-align:-2px}
.bo-kick{margin:0;color:#A9D6FF}
.bo-wh h1{margin:18px 0 0;font-weight:300;font-size:clamp(40px,5vw,84px);line-height:1.02;letter-spacing:-.03em}
.bo-role{margin:18px 0 0;color:var(--dim);font-size:clamp(16px,1.2vw,19px)}
.bo-text{max-width:62ch;margin:18px 0 0;font-weight:300;font-size:clamp(17px,1.25vw,21px);line-height:1.55;color:#cfcdc7}
.bo-ext{display:inline-block;margin-top:22px;color:var(--ink);border-bottom:1px solid #A9D6FF;padding-bottom:3px}
.bo-sec{margin-top:clamp(56px,9vh,110px)}
.bo-sec h2{margin:0;font-weight:300;font-size:clamp(26px,2.4vw,40px);letter-spacing:-.02em}
.bo-rows{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bo-rows::after{content:"";flex-grow:999}
.bo-rows:has(>.bo-tile:only-child) .bo-tile{flex:0 1 auto;width:min(100%,calc(70vh * var(--ar)))}
.bo-tile{position:relative;margin:0;flex-grow:var(--ar);flex-basis:calc(var(--ar) * 240px);aspect-ratio:var(--ar);max-height:78vh;overflow:hidden;border-radius:2px;content-visibility:auto;contain-intrinsic-size:auto 240px}
.bo-tile img,.bo-tile video{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:639px){.bo-head{flex-direction:column}.bo-links{justify-content:flex-start}.bo-intro{flex-direction:column;align-items:flex-start}.bo-tile{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.bo-sheet{animation:none}.bo-media img,.bo-title::after{transition:none}}

/* the switch, top centre, on both pages */
.mode{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:10px;padding:6px 4px;
 font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .3s,opacity .6s}
.mode:hover{color:var(--ink)}
.mode i{position:relative;width:26px;height:14px;border:1px solid var(--mute);border-radius:99px;transition:background .35s,border-color .35s}
.mode i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--ink);transition:transform .35s var(--out),background .35s}
.mode[aria-checked=true]{color:var(--ink)}
.mode[aria-checked=true] i{background:rgba(169,214,255,.15);border-color:#A9D6FF}
.mode[aria-checked=true] i::after{transform:translateX(12px);background:#A9D6FF}
.mode:focus-visible{outline:1px solid #A9D6FF;outline-offset:4px}
html.intro.i-ui .mode{opacity:0}
html.is-phone .mode,html.bo-open .mode{display:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s}
@media (max-width:900px){html.is-boring .mode{top:auto;bottom:16px;padding:8px 14px;border-radius:99px;background:rgba(9,9,11,.85)}}

/* ice <-> cards: what exists in both morphs (the name, the role, the portrait, the line; the work in front becomes its card) */
#who-role,.bo-id span{view-transition-name:fa-role}
#fa-me,.bo-me{view-transition-name:fa-me}
#fa-line,.bo-intro p{view-transition-name:fa-line}
.bo-id b{view-transition-name:fa-name}
#mode{view-transition-name:mode-switch}
html.bo-morph:not(.is-boring) #gl,html.bo-morph .bo-card.cur .bo-media{view-transition-name:bo-hero}
html.bo-morph:not(.is-boring) #sc-title,html.bo-morph .bo-card.cur .bo-title{view-transition-name:bo-title}
::view-transition-group(*){animation-duration:.75s;animation-timing-function:cubic-bezier(.22,.8,.2,1)}
::view-transition-old(bo-hero),::view-transition-new(bo-hero){height:100%;object-fit:cover}