/*
Theme Name: Seth Stein
*/

:root {

  --padding:20px; 
  --padding-large:128px;
  --margin:80px;
  --margin-small:20px;
  --header-height:52px; 
  --footer-height:70px;
  --grid-gap:8px;
  --grid-gap-large:16px;
  --grid-gap-x-large:30px;
  --body-padding:64px;

  --font-small: 14px;
  --font-regular: 16px;
  --font-medium: 21px;
  --font-large: 24px; 
  --font-x-large: 40px; 
  --font-sans-serif: 'Gill Sans Light';

  --black: #000000;
  --grey: #9B9B9B;
  --dark-grey: #342E2E;
  --cream: #F8F7F2; 
  --white: #FFFFFF;

  --transition-height: 0.3s ease-out max-height;
  --transition-transform: 0.3s ease-out transform, 0.3s ease-out visibility;
  --transition-fade: 0.3s ease-out opacity, 0.3s ease-out visibility;
  --transition-color: 0.3s ease-out color;
  --transition-background: 0.3s ease-out background-color;

}

/* Typography */
@font-face {
	font-family: 'Gill Sans Light'; 
	src: url('../fonts/GillSansLight.woff2') format("woff2");
	font-weight: normal;
	font-style: normal;
  font-display: swap;
}

/* Colours */
.white { color: var(--white); }
.black { color: var(--black); }
.cream { color: var(--cream); }
.grey { color: var(--grey); }
.dark-grey { color: var(--dark-grey); }
.bg-white { background-color:var(--white); }
.bg-black { background-color:var(--black); }
.bg-cream { background-color:var(--cream); }
.bg-grey { background-color:var(--grey); }

/* Structure */
html, body { height: 100%; }
body { padding-top:var(--header-height); }
img { pointer-events:none; }
.container { padding: 0 var(--padding-large); }
.video video { width: 100%; height: auto; display: block; }
.image img { display: block; height: 100%; object-fit: cover; }
.grid-gap-large { grid-gap:var(--grid-gap-large); }
.grid-gap-x-large { grid-gap:var(--grid-gap-large); }
.body-padding { padding-top:var(--body-padding); }

/* Typography */
body { color: var(--black); background: var(--cream); line-height: 1.5; font-size: var(--font-regular); font-family: var(--font-sans-serif); display: flex; flex-direction: column; }
a { transition: var(--transition-fade); }
p { margin-bottom: 18px; }
p:last-of-type { margin-bottom: 0; }
button { font-family: inherit; }

.font-small { font-size: var(--font-small); }
.font-regular { font-size: var(--font-regular); }
.font-medium { font-size: var(--font-medium); }
.font-large { font-size: var(--font-large); }
.font-x-large { font-size: var(--font-x-large); }
.font-sans-serif { font-family: var(--font-sans-serif); }

/* Header */
.header { height: var(--header-height); line-height: var(--header-height); padding: 0 var(--padding); top:0; left:0; right:0; z-index: 1; transition: var(--transition-background), var(--transition-color); }
.header-menu { grid-gap:var(--padding); }
.header-logo { width: 222px; height: 14px; margin: auto 0 auto auto; transition: var(--transition-fade); }
.button-menu { display: none; }

/* Hero */
.layout-hero { z-index: 0; }
.hero-logo { width: 544px; top:50%; transform:translateY(-50%); left: 0; right: 0; margin: auto; z-index: 1; }
.button-down { width: 18px; height: 48px; bottom: 34px; left: 0; right: 0; margin: auto; z-index: 1; }

/* News */
.layout-news h3 { margin-bottom: 25px; }
.layout-news li { list-style-type: none; margin-bottom: 32px; }

/* Projects */
.layout-projects .card-project.is-initially-hidden { display: none; }
.layout-projects.is-filtered .card-project { display: none; }
.layout-projects.is-filtered .card-project.is-visible, .layout-projects.is-filtered .card-project.is-intially-hidden.is-visible { display: block; }
.card-project.col-start-1 { grid-column-start: 1; }
.card-project-image { aspect-ratio: 465/315; margin-bottom: 10px; }
.card-project-title span { padding-right: 10px; }

/* Projects : Hero */
.layout-projects-hero h2 { top:50%; transform: translateY(-50%); left: var(--padding); right: var(--padding); z-index: 1; }

/* Projects : Filters */
.project-filters { border-top:0.5px solid var(--black); border-bottom:0.5px solid var(--black); max-height: 40px; overflow: hidden; transition: var(--transition-height);}
.project-filters svg { width: 9px; height: 9px; margin: auto 0; transition: var(--transition-transform); }
.project-filters.is-open { max-height: 700px; }
.project-filters.is-open svg { transform: rotate(45deg); }
.project-filter-options { padding: 6px 0 20px 0; }
.project-filter { text-align: left; transition: var(--transition-fade); }
.project-filter svg { opacity: 0; transition: var(--transition-fade); margin: 4px auto 0 8px; }
.project-filter.is-active svg { opacity: 1; }
.button-project-filters { line-height: 40px; width: 100%; cursor:pointer; overflow: hidden; }
.is-filtered .project-filter { opacity: 0.5; }
.is-filtered .project-filter.is-active { opacity: 1; }
.projects-no-results { display: none; }
.projects-no-results.is-visible { display: block; }

/* Project */
.project-row { grid-template-columns: inherit; display: inherit; grid-gap: 8px; }
.project-image.full-width { margin-left: calc( -1 * var(--padding-large)); margin-right: calc( -1 * var(--padding-large)); }

/* Profile */
.profile-member { margin-bottom: 24px; }
.profile-member figure { margin-bottom: 10px; }
.profile-member h3 { margin-bottom: 5px; }

/* Awards */
.award-navigation { grid-gap:30px; }
.button-award { padding: 0 8px 6px 8px; opacity: 0.26; transition: var(--transition-fade); cursor: pointer; }
.button-award.is-active { border-bottom: 0.5px solid var(--dark-grey); opacity: 1; }
.award-section { display: none; }
.award-section li { list-style-type: none; }
.award-section span { margin-right: 10px; }
.award-section.is-active { display: grid; }
.award-section.grid { padding-left: 0; }
.award-book { aspect-ratio: 225/250; overflow: visible;}
.award-book-large { aspect-ratio: 482/525; }
.award-book img { right:0; bottom:0; box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.16); margin: auto; height: 100%; }

/* Footer */
.footer { padding: 0 var(--padding); margin-top:auto; }
.footer p { margin-bottom: 0; }

/* Lightbox */
body .goverlay, body.glightbox-mobile .goverlay { background-color: var(--cream); }
body .glightbox-clean .gclose path, 
body .glightbox-clean .gnext path, 
body .glightbox-clean .gprev path { fill:var(--black); }
body .glightbox-clean .gslide-media { box-shadow: none; }
body .glightbox-clean .gclose:hover, 
body .glightbox-clean .gnext:hover, 
body .glightbox-clean .gprev:hover,
body .glightbox-clean .gclose, 
body .glightbox-clean .gnext, 
body .glightbox-clean .gprev { background-color: rgba(248, 247, 242, 0.5);}

@media (hover: hover) { 
  /* Header */
  .header-menu-item { transition: var(--transition-fade); }
  .header-menu.is-hover .header-menu-item { opacity: 0.5; }
  .header-menu.is-hover .header-menu-item:hover { opacity: 1; }
}

/* Desktop : Short Screen */
@media screen and (min-width:851px) and (max-height:750px) {
  /* Profile : Unstick */
  .profile-text { position:static; }
}


/* Desktop */
@media screen and (min-width:851px) {

  /* Structure */
  .d\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .d\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .d\:grid-cols-24 { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  .d\:col-span-2 { grid-column: span 2 / span 2; }
  .d\:col-span-5 { grid-column: span 5 / span 5; }
  .d\:col-span-6 { grid-column: span 6 / span 6; }
  .d\:col-span-7 { grid-column: span 7 / span 7; }
  .d\:col-span-8 { grid-column: span 8 / span 8; }
  .d\:col-span-11 { grid-column: span 11 / span 11; }
  .d\:col-span-12 { grid-column: span 12 / span 12; }
  .d\:col-span-16 { grid-column: span 16 / span 16; }
  .d\:col-span-17 { grid-column: span 17 / span 17; }
  .d\:col-span-18 { grid-column: span 18 / span 18; }
  .d\:col-span-20 { grid-column: span 20 / span 20; }
  .d\:col-start-1 { grid-column-start: 1; }
  .d\:col-start-3 { grid-column-start: 3; }
  .d\:col-start-7 { grid-column-start: 7; }
  .d\:col-start-8 { grid-column-start: 8; }
  .d\:col-start-9 { grid-column-start: 9; }
  .d\:col-start-13 { grid-column-start: 13; }
  .d\:col-start-14 { grid-column-start: 14; }

  /* Header */
  .header.is-transparent { color: var(--white); background-color: transparent; }
  .header.is-transparent .header-logo { opacity: 0; }

  /* Hero */
  .layout-hero { height: 100vh; margin-top:calc( -1 * var(--header-height)); z-index: 0; }

  /* Awards */
  .award-section { padding: 70px 0 0 270px; }
  .award-book-large { grid-row: span 2; }

  /* Projects */
  .layout-projects-hero { margin-bottom: 36px; aspect-ratio: 1280/413; }
  .layout-projects { grid-gap:160px; grid-row-gap:var(--grid-gap); }
  .layout-projects > h2 { margin-bottom: 16px; }
  .project-filters { margin-bottom: 38px; }
  .card-project { margin-bottom: 48px; }

  /* Project */
  .layout-project-hero .image { height: calc(100vh - var(--header-height)); }
  .layout-project-hero h2 { line-height: 1.15; margin: auto;  }
  .layout-project-hero.text-below h2 { z-index: 1; left: 0; right:0; bottom: calc( 2 * var(--padding)); max-width: 805px; font-weight: bold; }
  .project-image.cover { aspect-ratio: auto !important; }

  /* Profile */
  .profile-text { top:calc( var(--body-padding) + var(--header-height)); margin-bottom: auto; }

  /* Footer */
  .footer { height: var(--header-height); line-height: var(--footer-height); }
  .footer br { display: none; }
  .footer p:last-of-type { margin-left: auto; }

}

/* Mobile */
@media screen and (max-width:850px) {

  :root {
    --padding-large:30px;
    --margin:15px;

    --font-small: 12px;
    --font-regular: 14px;
    --font-large: 21px; 
    --font-x-large: 21px; 

  }

  /* Structure */
  .m\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-hide { display: none; }

  /* Header */
  .header-logo, .button-menu { z-index: 2; }
  .button-menu { display: flex; width: 44px; height: 44px; margin: auto 0 auto -6px; flex-direction: column; }
  .button-menu:before, .button-menu:after { content:''; width: 18px; height: 1px; background: var(--black); transition: var(--transition-transform); }
  .button-menu:before { margin: auto auto 3px auto; }
  .button-menu:after { margin: 3px auto auto auto; }
  .show-menu .button-menu:before { transform: rotate(45deg) translateX(2.5px) translateY(2.5px); }
  .show-menu .button-menu:after { transform: rotate(-45deg) translateX(2.5px) translateY(-2.5px); }

  /* Menu */
  .header-menu { background-color: var(--cream); position: fixed; top:0; left: 0; bottom: 0; right: 0; transform: translateX(-100%); transition: var(--transition-fade); flex-direction: column; justify-content: center; align-items: center; font-size:var(--font-x-large); opacity: 0; visibility:hidden; }
  .header-menu-item { transition: transform ease-in 0.3s, opacity ease-in 0.3s; opacity: 0; }
  .header-menu-item:nth-of-type(1) { transform: translateY(0); transition-duration: 0.4s; }
  .header-menu-item:nth-of-type(2) { transform: translateY(-52px); }
  .header-menu-item:nth-of-type(3) { transform: translateY(-102px); }
  .header-menu-item:nth-of-type(4) { transform: translateY(-152px); }
  .header-menu-item:nth-of-type(5) { transform: translateY(-202px); }
  .show-menu .header-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0%);}
  .show-menu .header-menu-item { opacity: 1; transform:translateY(0); }

  /* Home */
  .page-home .header { color:var(--black); background-color: var(--cream); }

  /* Hero */
  .layout-hero { aspect-ratio: 375/206; }

  /* Awards */
  .award-section { grid-gap:20px; }
  .award-navigation { margin-bottom: 72px; justify-content: center; }
  .award-section li { position: relative; padding-left: 44px; }
  .award-section li span { position: absolute; top:0; left: 0; }

  /* Projects */
  .layout-projects > h2 { margin-bottom: 9px; }
  .layout-projects-hero { margin-bottom: 15px; aspect-ratio: 375/206;  }
  .project-filters { margin-bottom: 10px; }
  .project-filter { font-size: 16px; }
  .card-project { margin-bottom: 25px; }

  /* Project */
  .layout-project { grid-gap:10px; --padding-large:10px; grid-gap:0; }
  .layout-project-hero h2 { position: static; color:var(--black); }
  .layout-project-hero article { margin-bottom: 8px; }
  .layout-project-hero img, .layout-project-hero.side-by-side a { aspect-ratio: 375/379; }
  .layout-project-hero .container { padding-left: 10px; padding-right: 10px; }
  .layout-project-hero.text-below img { position: static; }
  .layout-project-hero h2 { margin-bottom: 7px; text-align: left; }
  .layout-project-hero.text-below h2 { padding:9px 10px 0 10px; }
  .layout-project-hero.side-by-side h2 { padding:0 10px 0 10px; }
  .layout-project-hero.side-by-side .image { margin-bottom: 0; }
  .related-projects { margin-top:26px; padding-left: 10px; padding-right: 10px; }

  /* Profile */
  .profile-text { position: static; margin-bottom: var(--margin-small); }

  /* Footer */
  .footer { align-items: center; flex-direction: column; text-align: center; padding:48px 0; }

}