* {margin:0;padding:0;box-sizing:border-box;}
@keyframes fade-in {0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}}

html {font-size:62.5%;font-synthesis:none;}
body {
  font-size: 1.8rem;
  line-height:1.4;
  font-family:"IBM Plex Sans", sans-serif;
  color:rgba(0,0,0,.8);
  background:#fff;
  padding:0 4vw 0 0;
}
a {color:inherit;text-decoration:none;}
a:hover, a.active {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;}
h1, h2 {font-size:1em;font-weight:600;}
strong {font-weight:600;}
img {display:block;max-width:100%;height:auto;}

.loadin {opacity:0;transform:translateY(20px);transition:transform 0.5s,opacity 0.7s;}
.loaded {opacity:1;transform:translateY(0);transition-delay:0s;}

header, footer {display:flex;gap:1.5em;padding:10vw 0 2em 4vw;}
.b-default footer * {display:none;}
nav ul {line-height:1.5;list-style:none;display:flex;gap:1.5em;}
.b-home h1 a {pointer-events:none;}
a.enter {position:absolute;inset:0;animation:fade-in .4s;}

@media only screen and (max-width: 680px) {
  body {font-size:1.6rem;}
  nav ul, header, footer {display:block}
}

section {position:relative;}
section + section {margin-top:4vw;}
section figure {background:#f5f5f5;}
section figure figcaption {position:absolute;inset:4vw;pointer-events:none;}
section figure figcaption div {position:sticky;top:4vw;}
section figure figcaption p {opacity:.6;}
/* .top figcaption {bottom:auto;}
.bottom figcaption {top:auto;}*/
section:nth-child(even) figure figcaption {left:auto;text-align:right;}

main {padding:0 0 0 4vw;line-height:1.45;}
.text > * + * {margin-top:1rem;}
.text > * {max-width:62ch;}
.text a {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;}
.b-default h2 {padding-block:2rem 0;}
.text small {display:block;padding-top:3rem;opacity:.7;}
.grid + .text {margin-top:8rem;}

.grid {padding:4vw 0;display:grid;grid-gap:12vw 8vw;grid-template-columns:repeat(auto-fill, minmax(1fr, 1fr));grid-auto-flow:dense;}
.grid figure img {width:auto;max-height:40vmax;transition:transform .1s!important;}
.grid figure {align-self:start;position:relative;}
.grid figure > a {float:left;}
.grid figure > a:hover * {transform:scale(1.01);}

.grid figure:nth-child(5n + 1) {grid-row-end:span 1.5;grid-column-end:span 1;align-self:center;}
.grid figure:nth-child(5n + 2) {grid-column-end:span 2;}
.grid figure:nth-child(5n + 3) {align-self:end;}
.grid figure:nth-child(5n + 4) {grid-row-end:span 1.5;align-self:center;}

.grid figure:nth-child(1) {grid-column-start:span 1;align-self:end;}
.grid figure:last-of-type {justify-self:center;}

@media only screen and (orientation : portrait) {
  section figure {height:100dvh;}
  section figure img {width:100%;height:100%;object-fit:cover;}
  .grid figure:first-of-type {grid-column-start: 1;grid-column-end:span 3}
  .grid figure:nth-child(4) {grid-column-end:span 2;}
}