@font-face {font-family: 'Programme-web';src: url('../fonts/Programme-Light.woff2') format('woff2');font-weight: 300;font-style: normal;}
@font-face {font-family: 'Programme-web';src: url('../fonts/Programme-Bold.woff2') format('woff2');font-weight: 400;font-style: normal;}
@font-face {font-family: 'Programme-web';src: url('../fonts/Programme-Bold-italic.woff2') format('woff2');font-weight: 400;font-style: italic;}

* {margin:0;padding:0;box-sizing:border-box;}
html {font-size:62.5%;-webkit-text-size-adjust:none;text-size-adjust:none;}
body {
  font:16.5px/1.4 Programme-web;
  font-feature-settings:"ss01" on;
  cursor: url("../img/default.png") 10 0, auto;
  cursor: -webkit-image-set( url("../img/default.png") 1x, url("../img/default-hi.png") 2x ) 10 0, auto;
  overflow-x:hidden;
}

a, .message {
  text-decoration:none;color:currentColor;transition: all .1s;
  cursor: url("../img/hover.png") 10 0, auto;
  cursor: -webkit-image-set( url("../img/hover.png") 1x, url("../img/hover-hi.png") 2x ) 10 0, auto;
}

h1, h2, h3, h4 {font-size:1em;font-weight:normal;}
img {display:block;max-width:100%;height:auto;user-select:none;}
sup, sub {line-height:0;}
p + p {text-indent:4ch;}

header {display:flex;gap:15px;padding:0 15px;overflow:hidden;position:sticky;top:0;z-index:10;background-color:#fff;}
header a {display:inline-block;padding:10px 0;}
header a:not(:hover) {color:#8b8b8b;}
header a {white-space:nowrap;}
header h1 span {font-weight:300;}
header h1 a:not(:hover) {color:#000;}
header a.selected {font-weight:400;color:#000;}
header ul {list-style:none;display:flex;gap:15px;}
header ul ul {display:none;font-weight:300;}
header nav > ul li:first-of-type {display:flex;gap:15px;}
header nav > ul li:first-of-type:hover > a {color:#000;}
header nav > ul li:first-of-type:hover ul {display:flex;}
header nav {flex-grow:1;}
header .lang ul {white-space:nowrap;gap:.25em;}
header .lang li + li:before {font-weight:300;content:"| ";opacity:.5;}

#close {display:none;}

footer {position:sticky;top:100vh;padding:30px 15px 10px;}

main {padding:15px;}

/* splash */
.splash {height:100vh;width:100vw;overflow:hidden;position:relative;}
.splash figure {position:absolute;height:100%;width:100%;}
.splash img {width:100vw;height:100vh;object-fit:cover;}
.splash .text {/*background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100%);*/z-index:1;user-select:none;position:absolute;padding:10px 30px 15px 15px;top:0;left:0;right:0;max-width:30ch;color:#fff;font-size:3.8em;font-size:clamp(3.5rem, 5vw, 8rem);line-height:1.05;}
.splash figcaption span {display:block;max-width:30ch;text-shadow:1px 1px rgba(0,0,0,.15);}
.splash .message {position:absolute;bottom:0;right:0;left:0;padding:7px 0 8px;background:#fff;text-align:center;}
.splash > figure {animation: slide 25s infinite;opacity: 0;}
.splash > figure:nth-child(2){animation-delay:5s;}
.splash > figure:nth-child(3){animation-delay:10s;}
.splash > figure:nth-child(4){animation-delay:15s;}
.splash > figure:nth-child(5){animation-delay:20s;}
@keyframes slide { 10% {opacity:1;} 20% {opacity:1;} 30% {opacity:0;} 40% {transform:scale(1.2);} }

 /* project */

 .project > * + * {margin:15px 0 0;color:#8b8b8b;}
 
 .hero {position:relative;width:calc(100% + 30px);margin:-15px 0 0 -15px;}
 .hero img {max-width:none;height:65vh;width:100%;object-fit:cover;}
 
 .hero figcaption {position:absolute;top:15px;left:15px;z-index:1;color:#fff;text-shadow:1px 1px rgba(0,0,0,.15);}
 .hero figcaption h1 {max-width:25ch;font-size:3.8em;font-size:clamp(3.5rem, 5vw, 8rem);line-height:1.05;margin:-5px 0 5px -.05em;}
 
 .quote {font-size:clamp(2.3rem, 5vw, 4rem);line-height:1.1;color:#000;padding:0 0 6px 15vw;}
 .project .description {padding-bottom:15px;padding-left:15vw;}
 .project .technique {padding-left:15vw;padding-top:15px;}
 
 @media only screen and (min-width:810px) {
   .t-project {display:flex;flex-direction:column;height:100vh;}
   .project {padding:0;}
   .project {flex:1;display:flex;align-items:stretch;overflow-x:scroll;scroll-snap-type: x mandatory;overscroll-behavior-x:contain;scroll-behavior:smooth;}
   
   .hero {position:relative;flex:0 0 100%;width:100%;margin:0 0 0 -15px;}
   .hero img {max-width:none;width:calc(100% + 15px);height:100%;object-fit:cover;}
   .hero figcaption {left:30px;}
   
   .quote {margin-top:8px;max-width:18ch;padding:0;}
   
   .project > * + * {padding-right:15px;margin-top:45px;}
   .project .technique {flex: 0 0 calc(15vw + 15px);padding-left:30px;padding-top:0;}
   .project .description {flex: 0 0 30vw;overflow:auto;padding-left:0;}
   
   .detail {max-height:100%;padding-bottom:15px;flex: 0 0 auto;display:flex;}
   .detail img {object-fit:contain;width:100%;height:100%;max-width:100vw;max-height:100%;}
   .detail.landscape img {max-height:70vh;}
   .detail.landscape + .detail.landscape {align-items:end;}
   
   .project #start {flex: 0 0 55vw;}
   .project #start img {max-height:none;object-fit:cover;max-width:100%;}
   .project figure:last-of-type img {max-height:none;object-fit:cover;max-width:none;height:100%;width:100%;}
   .project figure:last-of-type {flex: 0 0 100%;padding:0;}
 }

  /* projects grid */
.grid {margin-top:30px;display:grid;grid-auto-flow:dense;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));grid-gap:15px;}
.grid figure {position:relative;}
.grid figcaption, #mousetip {font-size:.85em;line-height:1.3;font-weight:300;color:rgba(0,0,0,.5);padding:.4em 0 .2em 0;}
.grid figcaption h2, #mousetip h2 {color:initial;}
#mousetip {margin-left:-10px;max-width:220px;background:#fff;}
  
/* news */
.news {background:#f0f0f0;padding-top:45px;}
.year + .year {border-top:1px solid;}
.year {padding-top:15px;}
.year h2 {width:156px;margin:-6px 0 8px 0;}
.year .grid {flex:1;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));margin:0 0 30px 0;}
.year .grid figcaption {background:none;}

@media only screen and (min-width:810px) {
  .year {display:flex;}
}

  
 @media screen and (hover: hover) and (pointer: fine) {
   .grid figure {display:grid;}
   .grid figcaption {display:none;max-width:80%;opacity:0;position:absolute;top:15px;left:15px;padding:.4em .6em .3em;}
   .grid figure:hover {background:#000;}
   .grid figure a:hover img {opacity:.5;filter:grayscale(1);transition:all .25s;}
   .grid figure a:hover figcaption {opacity:1;}
   .grid figure img {aspect-ratio:16/12;width:100%;height:100%;object-fit:cover;}
}

@media screen and (pointer: coarse) {
  #mousetip {display:none!important;}
}

@media only screen and (max-width:810px) {
  header {background:#fff url('../img/default-hi.png') no-repeat right 15px center;background-size:14px 14px;}
  header:hover {background-image:none;}
  header nav, .lang {display:none;padding:10px 0;}
  header:hover nav, header:hover .lang {display:block;}
  header nav > ul {display:block;}
  header nav > ul li:first-of-type {display:block;}
  header nav > ul li:first-of-type:hover ul {display:block;padding-left:30px;}
  header ul a {padding:0;}
  header .lang ul {display:none;}
  .project > * a {pointer-events:none;}
}