*{box-sizing:border-box;margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing: antialiased;outline:none}

::-moz-selection { background: rgb(0 0 0 / 10%); }
::selection { background: rgb(0 0 0 / 10%); }
::placeholder { color: rgb(0 0 0 / 10%); }

::-webkit-scrollbar {width: max(.25vw, .25rem);}

/* Track */
::-webkit-scrollbar-track {background: #f1f1f1;}

/* Handle */
::-webkit-scrollbar-thumb {background: #d1d1d1; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555; }

html {scroll-behavior: smooth;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4, .h5, .h6{font-weight: normal;text-wrap: balance;line-height: 1}
strong, .strong {font-weight: 600;}
.stronger {font-weight: 900;}
small, .small {font-size:90%;}
ul {list-style:none;}
input {font-family:inherit}
a {color:inherit;text-decoration: none;}
a.active {color:black;}
a.ul {text-decoration: underline;text-decoration-color:color-mix(in srgb, currentColor 50%, transparent);text-decoration-thickness: 1px;text-underline-offset: .15em;transition: text-decoration-color .25s;border:none !important}
a.ul:hover, a.ul.active {text-decoration-color:inherit;}
a.tick {transition: translate .5s;display:inline-block}
a.tick:hover {translate:.25em}
a.zoom {transition: scale .5s;display:inline-block;}
a.zoom:hover {scale:1.1}

a.button{padding:.5em 1em;display:inline-block;width:auto;min-width:10rem;color:inherit;transition:all .5s;cursor:pointer;font-weight:500;border-radius:.25em;text-align: center;background: var(--dark);color:var(--light);opacity: .8;transition:opacity .5s;border:1px solid;}
a.button:hover{opacity: 1;scale:1.01;}
/*a.button:hover{background:#000;color:#fff;}*/
a.button.small {padding:.5rem;font-size:1rem;}

a.more{display:block;border:none;text-align:center;font-size:90%;}
a.more:hover{background:rgba(151,152,141,.5);}
a.tooltip {position:relative}
a.tooltip:before {position:absolute;content:attr(data-tt);left:0;top:100%;background:rgb(0 0 0 /75%);color:#fff;padding:.25em;pointer-events:none;opacity:0;transition:opacity .5s;}
a.tooltip:hover:before {opacity:1;}
a.arw {padding-left:1rem;position:relative;}
a.arw:before {content: '';position: absolute;width: .4em;height: .4em;transform: rotate(-135deg);margin-left: -1rem;top: .6rem;border-left: 1px solid;border-bottom: 1px solid;}
a.download {display:inline-block;min-width:80%;}
a.file{margin: 1rem 0;padding: 0.25em 0.57em;border: 1px solid;display: inline-block;transition:scale .25s;}
a.file:hover{scale:1.05}

a figure{overflow:hidden;margin-bottom:.5rem;}
a figure img{display:block;transition:scale .5s;}
a figure:hover img{scale:1.01;}

.bullet{position:relative;display:block;margin:1em 0;padding-left:2em;font-style:normal;}
.bullet:before{position:absolute;translate:-1.25em;content:'●';}

hr {border:none;border-top:1px solid;margin:.5rem 0;}
hr.inset {margin:.5rem;}

figure {position:relative;overflow: hidden;}
figure img, figure video {width:100%;display: block;}

figure img{transition:opacity 2s;pointer-events: none}
figure figcaption {padding:.5em 0;font-size: 0.8rem;}
figure figcaption strong{font-weight:300;}
figure figcaption .author{	position: absolute;	left: 100%;top: 0;rotate: -90deg;white-space: nowrap;transform-origin: left top;font-size:.75rem;padding-top:.5em;}
figure.nocaption figcaption {display:none;}
figure.r50 {aspect-ratio:2;}
figure.r60 {aspect-ratio:10/6;}
figure.r75 {aspect-ratio:4/3;}
figure.r100 {aspect-ratio:1;}
figure.r150 {aspect-ratio:2/1;}
figure.r169 {aspect-ratio:16/9;}
figure.fit {width:100%;height:100%;}
figure.fix img{width:100%;height:100%;object-fit:cover;}
figure.fix.fit img{width:100%;height:100%;}
figure.fix.contain img{object-fit:contain;background:linear-gradient(45deg, #f0f0f0, #fff);}

figure.hero {height:calc(100vh - 16rem);}
figure.hero img{width:100%;height:100%;object-fit:cover;}
figure.hero figcaption{padding-left:2rem}
figure.hero .author {left: unset;right: 2rem;text-align:right;rotate: 0deg;}

figure.circled img {aspect-ratio:1/1;border-radius:100%;overflow:hidden}
figure.circled.half {width:50%;}
figure.circled.third {width:33.33%;}
figure.circled picture img{width:100%;height:100%;object-fit:cover;}

figure.grey {filter:grayscale(1);mix-blend-mode: multiply;transition:filter .5s}
figure.grey:hover {filter:grayscale(0);mix-blend-mode:unset;}

figure.shaded img{box-shadow: 0 0 1em rgb(0 0 0 / 10%)}
iframe {border:0;width:100%;aspect-ratio:16/9;display:block;}
figure.zoom img{transition:scale 2.5s;}
figure.zoom:hover img{scale:1.05;filter:brightness(.75)}
figure:has(.lazy) {background:linear-gradient(0deg, transparent, #f0f0f0)}
figure:has(.loaded) {background:none}
img.lazy {opacity:0;scale:.5;translate:0 50%;transition:scale .25s, opacity 2s, translate .5s;}
img.loaded {opacity:1;scale:1;translate:0}

ul.inline{display:block;}
ul.inline li{padding-left:20px;margin:5px 0;background:url(/lib/gfx/arw.svg) no-repeat 0 7px;}

.darken {filter:brightness(.95);transition:filter .5s;}
.darken:hover {filter:brightness(.5)}
ion-icon {	display: inline-block;	vertical-align: text-bottom;}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display: block;}
.up {text-transform:uppercase}

.row{/*margin:.5vw 3vw;*/}
.row.inset{margin:0 -.5rem}

.col {padding:.5rem;display:inline-block;vertical-align:top;/*background:rgba(255, 200, 200, .5)*/}

.col.m1{width:8.3333333333%;}
.col.m2{width:16.6666666667%;}
.col.m3{width:25%;}
.col.m4{width:33.3333333333%;}
.col.m5{width:41.6666666667%;}
.col.m6{width:50%;}
.col.m7{width:58.3333333333%;}
.col.m8{width:66.6666666667%;}
.col.m9{width:75%;}
.col.m10{width:83.3333333333%;}
.col.m11{width:91.6666666667%;}
.col.m12{width:100%;}

.offset-m1{margin-left:12.5%;}
.offset-m2{margin-left:25%;}
.offset-m3{margin-left:37.5%;}
.offset-m4{margin-left:50%;}

.placeholder {aspect-ratio:3/4;background:rgb(0 0 255 / 10%)}
.c0 {margin:0;}
.c1 {margin:0 8vw;}
.c2 {margin:0 auto;max-width:80rem;padding:1rem;}
.c3 {margin:0 auto;max-width:60rem;padding:1rem;}
.c4 {width:50%;margin:0 auto;padding:1rem;}
.c5 {width:33.33333%;display:inline-block;}

.c1 .read {max-width: inherit}
.col-3 {column-count: 3}
.pr {padding-right:1em;}
.read {max-width:40em}
.read.c {margin:0 auto;}

.mb0 {display:block;margin-bottom:.5vw;}
.mb {display:block;margin-bottom:1vw;}
.mb2 {display:block;margin-bottom:2rem;}
.mb3 {display:block;margin-bottom:2vw;}
.mb4 {display:block;margin-bottom:4vw;}

.lo {text-transform:lowercase;}
.mr {margin-right:1em;}
.pd0 {padding:.5rem;}
.pd {padding:1rem;}
.pd2 {padding:2rem;}
.pd3 {padding:3rem;}
.pd4 {padding:4rem;}
.pv00 {padding:.25rem 0;}
.pv0 {padding:.5rem 0;}
.pv {padding:1rem 0;}
.pv2 {padding:2rem 0;}
.pv3 {padding:3rem 0;}
.ph0 {padding:0 .5rem ;}
.ph {padding:0 1rem ;}
.ph2 {padding:0 2rem;}
.ph3 {padding:0 3rem;}
.spacer {height:4rem;}
.spacer-0 {height:2rem;}
.spacer-2 {height:8rem;}

.max-3 {max-height:4em;overflow: hidden;mask-image: linear-gradient(to bottom, black 50%, transparent 100%);}
.max-12 {height:12em;overflow: hidden;mask-image: linear-gradient(to bottom, black 50%, transparent 100%);transition:height 2s;}
.max-12:hover {height:18em;mask-image: linear-gradient(to bottom, black 90%, transparent 100%)}

.lft {text-align: left;}
.rgt {text-align: right;}
.ctr {text-align: center;}

.bb {border-bottom:1px solid;}
.wfg {color:#fff;}
.dfg {color:#000;}
.wbg {background:#fff;}
.dbg {background:#000;}
.ll {border-left:1px solid;}

.vv {padding-top:2em;}
.vv:before {position:absolute;content:attr(data-title);margin-top:-1.75em;font-size:75%;line-height:1.75}
.quoted {position:relative}
.quoted:before {content:'“';position: absolute;translate:-.75em 0;font-size:150%;}
.quoted:after {content:'”';position: absolute;margin-left:.25em;font-size:150%;line-height: 1;}
.tc {display:grid;grid-template-rows:2.5em 0fr; transition:grid-template-rows .5s linear}
.t {padding:1rem 2em 1rem 0;cursor:pointer;position:relative;}
.t:after {content:'+';position:absolute;right:0;top:0rem;transition:rotate .5s;font-size:150%;}
.c {overflow:hidden;	border-bottom: 1px solid;}
.c .c-inner {padding:1rem 0;}

.tc.active {grid-template-rows:2.5em 1fr}
.tc.active .t:after {rotate:45deg}
.tc .col {padding: 0 .5rem}

@media (max-width: 740px) {
	.row.inset{margin:0 -.5rem}
	.col {width:100%;padding:.5rem;}
	.col.s1 {width:12.5%;}
	.col.s2 {width:25%;}
	.col.s3 {width:37.5%;}
	.col.s4 {width:50%;}
	.col.s5 {width:62.5%;}
	.col.s6 {width:75%;}
	.col.s7 {width:87.5%;}
	.col.s8 {width:100%;}
}
