/* 

Update: 03. 05. 2025

[Typography Stylesheet]

––>	Creator: Joshua Bankes
    Studio: Bankes Design
    Copyright 2022


*/


/* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts: http://www.fontshop.com */





@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=3a6dbce8-cc31-4c4a-b0ca-3f3286b59e12&fontids=5510770,5510773,5510776,5510779,5510782,5510785,5510812,5510815,5510824,5639256");
@font-face{
  font-family: "Real Text W01 Extralight";
  src:url("../fonts/5510770/aab833aa-0527-49da-bc19-1c753a5f97ce.woff2") format("woff2"),url("Fonts/5510770/ec2f49f0-7521-460b-8e69-c5ace3721a80.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Extralight Italic";
  src:url("../fonts/5510773/d7410e86-93b2-40ac-891e-08ee0e0682ea.woff2") format("woff2"),url("Fonts/5510773/ed8eb3dd-50eb-44b3-adc7-2e9ec77635b7.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Light";
  src:url("../fonts/5510776/0ec03df7-9e85-4706-b275-ce861bad991d.woff2") format("woff2"),url("Fonts/5510776/b9d5b438-ee4b-493f-b394-7b9531f0e7fc.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Light Italic";
  src:url("../fonts/5510779/4b1185e4-833b-42a3-9123-d008d20d9e19.woff2") format("woff2"),url("Fonts/5510779/22a9232e-02f4-477f-b831-0bc86822d8fc.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Semilight";
  src:url("../fonts/5510782/a2f26d9b-d6f2-416c-85f0-8698824bee1b.woff2") format("woff2"),url("Fonts/5510782/7311c945-6dc0-4fc4-9af0-0d616b7354b4.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Semilight Italic";
  src:url("../fonts/5510785/3473ba66-16ca-4603-8ca9-816bb10ee0c9.woff2") format("woff2"),url("Fonts/5510785/8c63bae9-08a2-41c7-a099-ea841bb5b38b.woff") format("woff");
}
@font-face{
font-family: "Real Text W01 Medium";
src:url("../fonts/5510800/ef5d877e-5591-4550-bff2-3e974a0e2bb7.woff2") format("woff2"),url("Fonts/5510800/8ccfcdd9-6c47-4f24-90e5-5cd4d59c4c45.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Bold";
  src:url("../fonts/5510812/7d6dcd37-607a-4fe6-930a-4bd57cd4bf63.woff2") format("woff2"),url("Fonts/5510812/9a53f47f-5da6-429c-bdee-d6f9cc03e6d4.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Bold Italic";
  src:url("../fonts/5510815/7ef47a0f-a9cb-4cbf-b965-25216f2ed906.woff2") format("woff2"),url("Fonts/5510815/f3f4db76-97ba-436d-9cd6-0b7d56f01c84.woff") format("woff");
}
@font-face{
  font-family: "Real Text W01 Black";
  src:url("../fonts/5510824/b1c01681-d879-4783-94fa-d3ecbfc93557.woff2") format("woff2"),url("Fonts/5510824/2e93aa79-ecb7-472c-8be0-9ebd6e673f5b.woff") format("woff");
}
@font-face{
  font-family: "Walbaum_18pt W01 Regular";
  src:url("../fonts/5639256/29467e7a-b4ec-427f-ba73-94b1532478ba.woff2") format("woff2"),url("Fonts/5639256/8a458843-bbc2-4bd4-a6d1-997b4589bdb0.woff") format("woff");
}







/* ************** [ Basic HTML ] ************** */

  :root {
    font-size: 1 rem;
    font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum";
    word-spacing: 0.001em;
    
    /* ---  Variables: Colors  --- */
    --wht: white;
    --blk: black;
    --dark-gray-bg: rgb(30, 26, 27);
    --darkest-gray: rgb(60, 56, 57);
    --darker-gray: rgb(85, 81, 82);
    --dark-gray: rgb(115, 111, 112);
    --med-gray: rgb(145, 141, 142);
    --light-gray: rgb(185, 181, 182);
  }
  
  
  /* ---  Variables: Global  --- */
  #dark,
  .dark,
  i.dark,
  ul.dark,
  li.dark,
  cite.dark {
    color: var(--dark-gray);
    border-color: var(--dark-gray);
  }
  
  .blk-rule {
    border-color: var(--blk);
  }
  
  .med-gray-rule {
    color: var(--med-gray);
    border-color: var(--med-gray);
  }
  
  #darker,
  .darker,
  i.darker,
  ul.darker,
  li.darker,
  cite.darker  {
    color: var(--darker-gray);
  }
  
  #darkest,
  .darkest,
  i.darkest,
  ul.darkest,
  li.darkest,
  cite.darkest  {
    color: var(--darkest-gray);
  }
  
  .medium {
    color: var(--med-gray);
  }
  
  #light,
  .light,
  i.light,
  ul.light,
  li.light,
  cite.light {
    color: var(--light-gray);
    border-color: var(--light-gray);
  }
  
  #black,
  .black,
  i.black,
  ul.black,
  li.black,
  cite.black {
    color: var(--blk);
    border-color: var(--blk);
  }
  
  .white {
    color: var(--wht);
    border-color: var(--wht);
  }
  
  .white-text,
  ul.white-text {
    color: var(--wht);
    border-color: var(--wht);
  }


      /* --- [ Typography ] --- */
@supports (font-kerning: normal) and (font-variant ligatures: 
common-ligatures contextual) and (fontvariant-numeric: oldstyle-nums proportional-nums) {
  :root {
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-variant-numeric: ordinal;
    font-feature-settings: normal;
    font-variant-alternates: styleset(1) styleset(3);
    hyphens: auto;
    -webkit-hyphenate-limit-before: 2;
    -webkit-hyphenate-limit-after: 2;
    hyphenate-limit-chars: 6 3 2;
    hyphenate-limit-zone: 12%;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
  }
}

abbr {
  font-feature-settings: "kern" , "liga" , "clig", "calt", "c2sc", "smcp";
}

@supports (font-variant-caps: all-small-caps) {
  abbr {
    font-variant-caps: all-small-caps;
    font-feature-settings: normal;
  }
}


    /* --- [ Basic HTML ] --- */
body {
  font-family: "Real Text W01 Light";
}

a,
a.faculty {
  text-decoration: none;
  color: rgba(0 0 0 / 100%); /* rgba(0 0 0 / 68%) */
}

a.faculty {
  padding: 0 2px;
  margin: 0 -2px;
}

a:hover {
  text-decoration-thickness: 0.085em;
  text-decoration-line: underline;
  color: var(--dark-gray);
}


a.faculty:hover {
  text-decoration: none;
  background-color: rgba(0 0 0 / 100%); /* rgba(218,41,28,0.8) */
  color: rgba(255 255 255 / 100%);
  padding: 0 2px;
}

p {
  color: black;
  font-family:"Real Text W01 Light";
  font-size: 1.625rem; /* 16px */
  line-height: 1.375; /* 22px */
  letter-spacing: 0.03rem;
  text-align: left;
}

i {
  font-family: "Real Text W01 Semilight Italic";
}

cite { 
  font-family:"Real Text W01 Book Italic";
}

ul {
  color: white;
}

h2 {
  font-family: "Real Text W01 Bold";
  font-size: 3.25vmin; /* 12px / 16px = 0.75 */
  line-height: 1.18125;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1875em;
  border-bottom: 1px solid black;
  padding-bottom: 0.5rem;
}

h3 {
  font-family: "Real Text W01 Bold";
  font-size: 3.25vmin; /* 12px / 16px = 0.75 */
  line-height: 1.25;
  letter-spacing: 0.09375em;
  margin-left: 25%; /* 2 units / 8 units = 0.25 */
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  /* margin-right: -20px; */
  border-bottom: 1px solid black;
}

h3.m-rule-bleed {
  margin-right: -20px;
}

h3.m-home-projects-title,
h3.m-posters-title {
  font-size: 4.625vmin; /* 12px / 16px = 0.75 */
  text-align: center;
  margin-left: 0; /* clear */
  padding: 7vmin 0;
  border-bottom: 0px solid black;
}

h4,
h4.services {
  font-size: 2.8125vmin; /* 12px / 16px = 0.75 */
  line-height: 1.25;
  letter-spacing: 0.04125em;
}

h4 {
  font-family: "Real Text W01 Bold";
  margin-top: 8vmin; /* margin = space before title + paragraph */
}

h4.services {
  font-family: "Real Text W01 Medium";
  margin-top: 2vmin; /* margin = space before title + paragraph */
}



/* ************** [ Navigation ] ************** */

/* **** CURTAIN OVERLAY **** */
li.curtain-info {
  font-family:"Real Text W01 Extralight";
  border-top: 0.5px solid;
  margin-top: 4.5px; /* compensates for 4px rule of head */
}

li.curtain-info-head {
  font-family: "Real Text W01 Medium";
  letter-spacing: 0.05em;
  border-top: 5px solid;
}

li.curtain-info-head,
li.curtain-info {
  font-size: 0.8125rem; /* 13px / 16px = 0.8125 */
  line-height: 1.125; /* 18px / 16px = 1.125em */
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.3125rem 0 calc(0.3125rem * 5) 2px;
}



div.project {
  text-align: center;
  color: black;
}



/* ************** [ Main ] ************** */
p.description,
.description-middle-column,
.description-prop-lining {
  font-size: 4.8125vmin;
}

p.description-home {
  font-size: 4.625vmin; /* 3.43125vmin */
  font-variant-numeric: ordinal;
  font-family: "Real Text W01 Medium";/*font-family: "Walbaum_18pt W01 Regular";*/
  line-height: 1.6;
  font-feature-settings: "liga" 1;
  margin-bottom: -1.25vmin;
}

p.description-home {
  color: var( --wht);
  padding: 3.5vmin 1.25rem 6vmin 1.25rem;
}

p.description,
.description-middle-column,
.description-prop-lining {
  font-variant-numeric: ordinal;
  font-family: "Walbaum_18pt W01 Regular";
  line-height: 1.25;
  font-feature-settings: "liga" 1;
  margin-bottom: 0.5rem; /* 32px / 16px = 2 */
  color: var(--dark-gray);
}

p.description:first-child,
.description-middle-column {
  margin-top: 1rem;
  hyphens: auto;
}

.description-prop-lining {
  font-variant-numeric: oldstyle-nums;
}

p.description-sans-serif {
  font-family: "Real Text W01 Medium";
  font-size: 3.625vmin; /* 18px / 16px = 1.125 */
  line-height: 1.33333; /* 24px / 18px = 1.166666 */
  margin: 5vmin 0;
  padding-bottom: 7vmin;
  color: var(--light-gray);
  /* border-bottom: 5px solid; */
}

p.m-description-rule {
  margin: 5vmin 0;
  padding-bottom: 7vmin;
  border-bottom: 3px solid; 
}

p.blk-rule {
  border-bottom: 2px solid;
}

p.med-gray-rule {
  border-bottom: 2px solid;
}

p.description-web {
  font-family: "Real Text W01 Light Italic";
  font-size: 3.625vmin; /* 23px / 16px = 1.4375 */
  line-height: 1.25;
  margin: 1rem 0 0 0; /* 32px / 16px = 2 */
}

p.aside,
p.aside-home,
.aside-link {
  font-size: 4.625vmin; /* 3.0625vmin */
  color: rgba(0 0 0 / 100%)
}

p.aside,
p.aside-home {
  font-family: "Real Text W01 Bold";
  margin-top: 1rem;
  margin-bottom: 3rem;
  line-height: 1.6; /* 3.2 */
  hyphens: auto;
}

.aside-link {
  font-family: "Real Text W01 Semilight";
}


.description-copyright {
  font-family: "Real Text W01 Light Italic";
  font-size: 2.0625vmin; /* 13px / 16px = 0.8125 */
  text-align: right;
}



/* --- [ Tagline ] --- */
p.tagline {
  font-family: "Real Text W01 Black";
  font-size: 19.25vmin; /* 60px / 16px = 3.75 | 16.25vmin */
  line-height: 0.9em; /* 72px / 80px = 0.9*/
  text-align: right;
  margin-top: 1.5rem;
  margin-right: -1.25rem;
  color: rgba(0 0 0 / 100%)
}



/* --- [ Body ] --- */



/* --- [ Buttons ] --- */
.button-project-overlay-text {
  color: white;
  font-size: 5.625vmin;
  line-height: 1.25;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.see-more {
  font-family: "Real Text W01 Semilight";
  font-size: 3.25vmin;
  text-align: center;
  color: white;
  padding: 3.75vmin 0;
}

a.hover-no-underline {
  text-decoration-line: none;
}



/* ************** [ PROJECTS ] ************** */

/* --- [ Project Descriptions ] --- */
.m-h3-no-description {
  margin-bottom: 9vmin;
}

.aside-A,
.aside-B,
.aside-C,
.aside-D,
.aside-E,
.aside-F {
  font-family: "Real Text W01 Light";
  color: var(--med-gray);
}

.aside-subhead {
  font-family:"Real Text W01 Medium";
  color: black;
}

.aside-A,
.aside-B,
.aside-C,
.aside-D,
.aside-E,
.aside-F,
.aside-subhead {
  font-size: 2.875vmin;
}

i.italic-aside-A,
i.italic-aside-B,
i.italic-aside-C,
i.italic-aside-D,
i.italic-aside-E,
i.italic-aside-F {
  font-family: "Real Text W01 Light Italic";
}




/* --- [ Design Credit ] --- */
.m-title-text-overlay,
.m-credits-text-head-overlay,
.m-credits-text-overlay {
  font-size: 2.375vmin;
  line-height: 1.25;
  margin-left: 0.5%;
  color: white;
}

.m-title-text-overlay {
  font-family: "Real Text W01 Bold";
  letter-spacing: 0.045em;
}

.m-credits-text-head-overlay {
  margin-left: 0;
  padding-top: 1.375vmin;
}

i.title {
  font-family: "Real Text W01 Bold Italic";
}



/* --- [ Publications ] --- */

cite.m-cite {
  font-family: "Real Text W01 Bold";
  font-size: 2.875vmin;
  letter-spacing: 0.04125em;
  color: var(--dark-gray);
}

.m-credit-publication,
.m-credit-pub-head,
.credit-pub-head,
.services-unit {
  font-family: "Real Text W01 Semilight";
  font-size: 2.875vmin;
  color: black;
}

.m-credit-pub-head {
  line-height: 1.1875;
  padding-bottom: 0.1875rem;
  margin-top: 0.375rem;
}



.m-credit-pub,
.services-item {
  font-family: "Real Text W01 Semilight";
  font-size: 2.875vmin;
  line-height: 1.1875;
  padding-bottom: 0.1875rem;
}

i.m-credit-pub {
  font-family: "Real Text W01 Semilight Italic";
}



/* ************** [ Footer ] ************** */

    /* --  Variables: COLOR  -- */
ul.foot,
ul.foot-mail,
li.mail,
.copyright-E {
  color: var(--blk);
}

.dark-text,
ul.dark-text,
il.dark-text,
ul.foot-mail-dark,
li.mail-dark-text {
  color: var(--dark-gray);
}


  /* --  Footer  -- */
ul.foot { 
  font-family: "Real Text W01 Bold";
  font-size: 4.375vmin;
  line-height: 1.125; /* 22px */
  letter-spacing: 0.03125em;
  grid-column: 3 / span 6;
}

li.foot-VC {
  font-family: "Walbaum_18pt W01 Regular";
  font-size: 3.75vmin;
  letter-spacing: 0.04125em;
}

ul.foot-mail,
ul.foot-mail-dark { 
  font-family: "Real Text W01 light";
  font-size: 3.125vmin;
  line-height: 1.125; /* 22px */
  letter-spacing: 0.021725em;
}

li.mail {
  padding-top: 4.5vmin;
}

.copyright-A,
.copyright-B,
.copyright-C,
.copyright-D,
.copyright-E {
  font-family: "Real Text W01 Light Italic";
  font-size: 2.5vmin; /* 13px / 16px = 0.8125 */
}





/* ******************************************
************** [ Media Queries ] ************** 
****************************************** */

/*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
When the width of the screen is more than 740 pixels, change to TABLET layout 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
@media (min-width: 46.25rem) { /* 740 / 16 = 46.25 */

/* ************** [ Basic HTML ] ************** */
h2 {
  font-size: 1.03125vmin;
}

h3 {
  font-size: 1.03125vmin;
  margin-bottom: 0.25vmin;
  padding-left: 2px;
  margin-left: 0; /* clears mobile margin */
  padding-bottom: 0; /* clears mobile margin */
  border-bottom: 0px solid black; /* clears mobile bottom rule */
  border-top: 1px solid black; /* rule above title */
  padding-top: 0.3125rem; /* 8px / 16px = 0.5 */ /* space above for rule */
}

h3.m-rule-bleed {
  margin-right: 0px; /* clear */
}

h3.m-home-projects-title,
h3.m-posters-title {
  display: none;
}

h4,
h4.services  {
  font-size: 1.03125vmin;
  line-height: 1.25;
  letter-spacing: 0.04125em;
  margin-top: 2vmin; /* margin = space before title + paragraph */
}


/* ************** [ Main ] ************** */
p.description,
p.description-home,
.description-middle-column,
.description-prop-lining  {
  font-size: 1.02vmin; /* 4.75vmin */
  line-height: 1.6; /* 47px / 34px = 1.3823529  |  34px / 26px = 1.3079623 */
  margin-bottom: 1vmin;
}

p.description-home {
  padding: 0; /* clear */
  padding-bottom: 0; /* clear */
  margin-top: 7.75rem;
  color: rgba(0 0 0 / 100%);
}

p.description {
  font-size: 1.5375vmin; /* 4.75vmin */
  line-height: 1.3823529; /* 47px / 34px = 1.3823529  |  34px / 26px = 1.3079623 */
  margin-bottom: 1vmin;
}

p.description:first-child,
.description-middle-column {
  margin-top: 0;
}

p.description-sans-serif {
  font-size: 1.08125vmin; /* 18px / 16px = 1.125 */
  line-height: 1.33333; /* 24px / 18px = 1.166666 */
  margin-bottom: 1vmin; /* 32px / 16px = 2 */
  padding-bottom: 0.25vmin;
  margin-top: 0; /* clear */
  border-bottom: 0px solid;  /* clear */
}

p.m-description-rule {
  margin: 0vmin 0; /* clear */
  padding-bottom: 3vmin; /* clear */
  border-bottom: 0px solid; /* clear */
}

.blk-rule {
  border-bottom: 2px solid;
}

.med-gray-rule {
  height: 2px;
}

p.description-web {
  font-size: 1.25vmin;
  margin-top: 1.25vmin;
  padding-bottom: 1vmin;
}

.description-copyright {
  font-size: 1vmin;
  text-align: left;
  grid-column: 1 / span 5;
  margin-top: 0.25vmin;
}

/* --- [ Tagline ] --- */
p.tagline {
  font-size: 5.3125vmin; /* 60px / 16px = 3.75 */
  text-align: right;
  margin-top: 2.75vmin;
  margin-right: 0; /* clear */
}

p.aside,
p.aside-home,
.aside-link {
  font-size: 0.8125vmin;
  line-height: 1.45454545; /* 16px / 11px = 1.45454545 */
}

p.aside {
  margin: 18.51vmin 0 1rem 0;
  padding-left: 0.125vmin;
}

p.aside-home {
  margin: 0.3125rem 0 1rem 0;
  padding-left: 0.125vmin;
}

/* --- [ Buttons ] --- */
.button-project-overlay-text {
  font-size: 1.4375vmin;
}

.see-more {
  font-size: 1.125vmin;
  padding: 1.5vmin 0;
}


/* ************** [ Navigation ] ************** */

/* **** CURTAIN OVERLAY **** */
.overlay-content {
  /* font-size: 3vmin; /* 23 px / 16px = 1.4375 */
}

li.curtain-info,
li.curtain-info-head {
  /* font-size: 1rem; /* 14px / 16px = 0.8125 */
  /* padding: 1rem 0 2rem 0; */
}

li.curtain-info-head {
  /* margin-top: 4vmin; */
  /* padding-bottom: 2vmin; */
}

li.curtain-info {
  /* padding-bottom: 3vmin; */
}


/* ************** [ PROJECTS ] ************** */

/* --- [ Project Descriptions ] --- */
.aside-A,
.aside-B,
.aside-C,
.aside-D,
.aside-E,
.aside-F,
.aside-subhead {
  font-size: 1.03125vmin;
  line-height: 1.1875;
}

.aside-A {
  grid-column: 2 / span 2;
}

h3.aside-E {
  grid-column: 1 / span 3;
}

/* .m-credits-text-head-overlay, */
.credits-text-head {
  font-size: 1.03125vmin;
  margin-left: 0;
  line-height: 1.1875;
  padding-top: 0.375vmin;
}


/* --- [ Description Title ] --- */
/* h2.description-title-left {
  text-align: right;
} /*



/* --- [ Design Credit ] --- */
.m-poster-credits-overlay {
  visibility: hidden;
}

/* .m-title-text-overlay,
.m-credits-text-head-overlay,
.m-credits-text-overlay {
  font-size: 0.875rem;
  line-height: 1.25;
  margin-left: 0.5%;
  color: white;
} */

.title-text {
  font-size: 1.03125vmin;
  line-height: 1.1875;
  letter-spacing: 0.045em;
  padding-top: 0.5vmin; /* 8px / 16px = 0.5 */
  grid-column: 1 / span 3;
}

/* .m-credits-text-head-overlay, */
.credits-text-head {
  margin-left: 0;
  padding-top: 0.375vmin;
}

/* .m-credits-text-head-overlay:first-child, */
.credits-text-head:first-child {
  padding-top: 0.1875rem;
}

.credits-text-head,
.credits-text-head-sb,
.credits-text {
  font-size: 1.03125vmin;
  line-height: 1.1875;
}

.credits-text-head-sb { /* space before 6px */
  padding-top: 0.375vmin; /* 6px / 16px = 0.375 */
}



/* --- [ Publications ] --- */

cite {
  font-family: "Real Text W01 Bold";
  font-size: 1.03125vmin;
  letter-spacing: 0.04125em;
  color: black;
}

.credit-publication,
.credit-pub-head,
.services-unit {
  font-family: "Real Text W01 Semilight";
  font-size: 1.03125vmin;
}

.credit-pub-head {
  line-height: 1.03125vmin;
  padding-bottom: 0.1875rem;
  margin-top: 0.75vmin;
}



.credit-pub,
.services-item {
  font-size: 1.03125vmin;
  padding-bottom: 0.375vmin;
}

i.credit-pub {
  font-family: "Real Text W01 Semilight Italic";
}




/* ************** [ Footer ] ************** */
ul.foot { 
  font-size: 1.75vmin;
  grid-column: 3 / span 4;
}

li.foot-VC {
  font-size: 1.531495vmin;
}

li.foot-sb {
  padding-top: 0.375rem;
}

li.mail{
  font-size: 1.3125vmin;
  padding-top: 0vmin; /* clear */
}

.copyright-A,
.copyright-B,
.copyright-C,
.copyright-D,
.copyright-E  {
  font-size: 1.0625vmin; /* 13px / 16px = 0.8125 */
}








/*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
When the width of the screen is more than 1200 pixels, change to DESKTOP layout 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
@media (min-width: 75rem) { /* 1200 / 16 = 75 */

/* ************** [ Basic HTML ] ************** */
h2 {
  font-size: 1rem; /* 16px */
  line-height: 1.125; /* 18px / 16px = 1.125 */
  margin-bottom: 1rem; /* 32px / 16px = 2 */
}

h3 {
  /* font-family: "Real Text W01 Bold"; */
  font-size: 0.75rem; /* 11px / 16px = 0.75 */
  letter-spacing: 0.05em;
  padding-left: 2px;
  margin-bottom: 0.1875rem;
}

h4,
h4.services {
  font-size: 0.6875rem; /* 12px / 16px = 0.6875 */
  line-height: 1.2272727; /* 13.5px / 11px = 1.2272727 */
  letter-spacing: 0.04125em;
  
  /* margin = space before title + paragraph */
  margin-top: 1.625rem; /* 26px / 16px = 2.125 */
}



/* ************** [ Main ] ************** */

p.description-home {
  font-size: 0.9375rem; /* 15px / 16px = 0.9375 */
  line-height: 1.6; /* 24px / 15px = 1.6 */
  margin-top: 13.9375rem;
  margin-bottom: 0rem; /* 32px / 16px = 2 */
  padding-bottom: 0;
}


p.description-middle-column,
.description-prop-lining {
  font-size: 2.0625rem; /* 34px / 16px = 2.125  |  26px / 16px = 1.625 */
  line-height: 1.3823529; /* 47px / 34px = 1.3823529  |  34px / 26px = 1.3079623 */
  margin-bottom: 1rem; /* 32px / 16px = 2 */
}

p.description{
  font-size: 1.625rem; /* 26px / 16px = 1.625 */
  line-height: 1.3823529; /* 47px / 34px = 1.3823529  |  34px / 26px = 1.3079623 */
  margin-bottom: 1rem; /* 32px / 16px = 2 */
}

p.description-middle-column {
  margin-top: 16.675rem;
}

p.description {
  grid-column: 1 / span 13;
}

p.description-sans-serif {
  font-size: 1.125rem; /* 18px / 16px = 1.125 */
  line-height: 1.33333; /* 24px / 18px = 1.166666 */
  margin-bottom: 1rem; /* 32px / 16px = 2 */
  padding-bottom: 0.125rem;
}

p.description-web {
  font-size: 1rem; /* 23px / 16px = 1.4375 */
  line-height: 1.3913; /* 30px / 23px = 1.3913 */
  padding-bottom: 0rem; /* clear */
  margin-bottom: 1rem; /* 32px / 16px = 2 */
}

p.aside-home {
  margin: 0;
  padding-left: 2px;
}
p.aside {
  margin: 17.43125rem 0 1rem 0;
  padding-left: 2px;
}

p.aside,
p.aside-home,
.aside-link {
  font-size: 0.6875rem; /* 11px / 16px = 0.6875 */
}

p.aside-home,
.aside-link  {
  line-height: 1.45454545; /* 16px / 11px = 1.45454545 */
  padding-top: 0.5rem; /* 8px / 16px = 0.5 */
}

.button-project-overlay-text {
  font-size: 1.3125rem; /* 21px / 16px = 1.3125 */
  line-height: 1.3809; /* 29px / 21px = 1.1034 */
}

.description-copyright {
  font-size: 0.75rem; /* 13px / 16px = 0.8125 */
  text-align: left;
  /* padding-bottom: 2vmin; */
}



/* ************** [ Navigation ] ************** */

/* **** CURTAIN OVERLAY **** */
.overlay-content {
  /* font-size: 1.4375rem; /* 23 px / 16px = 1.4375 */
  /* line-height: 1.25; */
}

li.curtain-info {
  /* font-size: 1rem; /* 14px / 16px = 0.8125 */
}

li.curtain-info-head {
  /* margin-top: 4rem; */
  /* padding-bottom: 1rem; */
}

li.curtain-info {
  /* padding-bottom: 2rem; */
}



/* ************** [ PROJECTS ] ************** */
.m-h3-no-description {
  margin-bottom: 0vmin; /* clear */
}


/* --- [ Buttons ] --- */
.see-more {
  font-size: 0.875rem; /* 14px / 16px = 0.875 */
  padding: 0.875rem 0;
}


/* --- [ Tagline ] --- */
p.tagline {
  font-size: 6.4375rem; /* 80px / 16px = 5 */
  margin-top: 1.3125rem;

  /* KNOCK OUT TEST
  color: black;
  mix-blend-mode: lighten;
  background-color: rgb(255, 255, 255);
  opacity: 49%; 
  */
}



/* --- [ Project Descriptions ] --- */
.aside-A,
.aside-B,
.aside-C,
.aside-D,
.aside-E,
.aside-F,
.aside-subhead {
  font-size: 0.75rem; /* 13px / 16px = 0.8125 */
  padding-left: 2px;
}

.aside-A {
  grid-column: 2 / span 4;
}

.aside-subhead {
  padding-left: 0px;
}



/* --- [ Design Credit ] --- */
.m-poster-credits-overlay {
  visibility: hidden;
}

/* .m-title-text-overlay,
.m-credits-text-head-overlay,
.m-credits-text-overlay {
  font-size: 0.875rem;
  line-height: 1.25;
  margin-left: 0.5%;
  color: white;
} */

.title-text {
  font-size: 0.8125rem; /* 13px / 16px = 0.8125 */
  line-height: 1.2307692; /* 16px / 13px = 1.2307692  */
  letter-spacing: 0.045em;
  padding-top: 0.5rem; /* 8px / 16px = 0.5 */
  grid-column: 1 / span 5;
}

/* .m-credits-text-head-overlay, */
.credits-text-head {
  margin-left: 0;
  padding-top: 0.375rem;
}

/* .m-credits-text-head-overlay:first-child, */
.credits-text-head:first-child {
  padding-top: 0.1875rem;
}


/* ++++ Desktop ++++ */
.credits-text-head,
.credits-text-head-sb,
.credits-text {
  font-size: 0.6875rem; /* 11px / 16px = 0.6875 */
  line-height: 1.2272727; /* 13.5px / 11px = 1.2272727 */
}

.credits-text-head-sb { /* space before 6px */
  padding-top: 0.375rem; /* 6px / 16px = 0.375 */
}




/* --- [ Publications ] --- */

cite {
  letter-spacing: 0.04125em;
}

cite,
.credit-publication,
.credit-pub,
.credit-pub-head,
.services-item  {
  font-size: 0.6875rem; /* 11px / 16px = 0.6875 */
  line-height: 1.2272727; /* 13.5px / 11px = 1.2272727 */
}

.credit-pub-head {
  padding-bottom: 0.1875rem;
  margin-top: 0.375rem;
}

.credit-pub,
.services-item {
  padding-bottom: 0.25rem;
}



/* ************** [ Footer ] ************** */
ul.foot { 
  /* grid-column: 2 / span 14; */
  font-size: 1rem; /* 16px */
  line-height: 1.125; /* 22px */
  grid-column: 3 / span 6;
}

li.foot-VC {
  font-size: 0.85714rem;
}

li.foot-sb {
  padding-top: 0.375rem;
}

li.mail {
  font-size: 0.8125rem; /* 16px */
  grid-column: 8 / span 8;
}

.copyright-A,
.copyright-B,
.copyright-C,
.copyright-D,
.copyright-E,
.copyright-E-dark {
  font-size: 0.625rem; /* 13px / 16px = 0.8125 */
  padding-left: 0;
}