@charset "utf-8";
/* CSS Document */

/* Shared module stylesheet */

/* ========================================
   MODULE HEADING
======================================== */

.module-page{
	padding-bottom:80px
	}

.module-shell{
	width:calc(100% - 58px);
	max-width:1080px;
	margin:0 auto
	}

.module-hero{
	padding:48px 0 10px
	}

.module-number{
	margin:0 0 10px;
	font-size:14px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase
	}

.module-hero h1{
	position:relative;
	display:inline-block;
	margin:0 0 34px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:68px;
	font-weight:400;
	line-height:.98;
	letter-spacing:-.035em
	}

.module-hero h1::before{
	content:"";
	position:absolute;
	left:-4px;
	bottom:-8px;
	width:104%;
	height:7px;
	background:#b8440a;
	border-radius:50%;
	transform:rotate(-1.4deg);
	z-index:-1
	}

.module-lede{
	max-width:850px;
	margin:0;
	font-size:17px;
	line-height:1.78
	}

/* ========================================
   MODULE SUBSECTION
======================================== */

.module-section{
	padding:20px 0
	}

.module-section h2{
	margin:0 0 18px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:40px;
	font-weight:400;
	line-height:1.08
	}

.module-section h3{
	margin:28px 0 12px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:27px;
	font-weight:400;
	line-height:1.15
	}

.module-section p{
	margin:0 0 18px;
	font-size:16px;
	line-height:1.76
	}

.module-section ul,
.module-section ol{
	margin:12px 0 22px 24px;
	padding:0
	}

.module-section li{
	margin-bottom:8px;
	font-size:16px;
	line-height:1.55
	}

/* ========================================
   MODULE READINGS
======================================== */

.module-readings{
	margin:24px 0 6px;
	padding:16px 16px;
	background:#e3d6c8
	}

.reading-item{
	margin-bottom:16px
	}

.reading-title{
	display:block;
	font-weight:700
	}

.reading-detail{
	display:block;
	margin-top:3px;
	margin-left:18px;
	font-size:14px;
	line-height:1.5
	}

.reading-optional{
	color:#84395a;
	font-style:italic
	}

/* ========================================
   MODULE TASKS
======================================== */

.task-list{
	margin:18px 0 0;
	padding:0;
	list-style:none
	}

.task-list li{
	position:relative;
	margin:0 0 10px;
	padding-left:30px;
	font-size:16px;
	line-height:1.5
	}

.task-list li::before{
	content:"☐";
	position:absolute;
	left:0;
	top:-1px;
	font-size:18px
	}

.task-list .task-sub{
	margin-left:28px
	}

.task-list .task-heading{
	margin-top:20px;
	font-weight:700
	}

/* ========================================
   STUDIO NOTE AND FIT AND STYLE CALLOUTS
======================================== */

.module-callout{
	display:flex;
	width:100%;
	margin:38px auto;
	overflow:hidden
	}

.callout-icon-panel{
	flex:0 0 150px;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:30px 18px
	}

.callout-icon-panel img{
	width:160px;
	margin: -10px -10px -10px -10px;
	max-width:none;
	height:auto;
	mix-blend-mode:multiply
	}

.callout-body{
	flex:1;
	padding:30px 38px 32px
	}

.callout-label{
	display:block;
	margin-bottom:8px;
	font-size:14px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase
	}

.callout-body h2{
	margin:0 0 16px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:30px;
	font-weight:400;
	line-height:1.12
	}

.callout-body p{
	margin:0 0 16px;
	font-size:15.5px;
	line-height:1.65
	}

.callout-body ul{
	margin:14px 0 0 22px;
	padding:0
	}

.callout-body li{
	margin-bottom:7px;
	font-size:15.5px;
	line-height:1.5
	}

/* ========================================
   STUDIO NOTE
======================================== */

.studio-note{
	background:#ffffff;
	border: 2px solid #f29118;
	}

.studio-note .callout-icon-panel{
	background:#f29118;
	}

.studio-note .callout-label{
	color:#b8440a
	}

/* ========================================
   FIT AND STYLE REFLECTION
======================================== */

.fit-reflection{
	background:#ffffff;
	border: 2px solid #84395a;
	}

.fit-reflection .callout-icon-panel{
	background:#84395a
	}

.fit-reflection .callout-label{
	color:#84395a
	}

/* ========================================
   PROJECT
======================================== */

.module-project{
	display:flex;
	width:100%;
	margin:44px auto;
	background:#e3d6c8;
	border: 2px solid #000000;
	}

.project-art{
	background: #ffffff;
	border-right: 2px solid #000000;
	position:relative;
	flex:0 0 176px;
	overflow:hidden;
	}

.project-art img{
	position:absolute;
	left:50%;
	bottom:20px;
	width:450px;
	max-width:none;
	height:auto;
	transform:translateX(-50%);
	}

.project-body{
	flex:1;
	padding:34px 42px 38px
	}

.project-label{
	margin:0 0 8px;
	color:#84395a;
	font-size:14px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase
	}

.project-body h2{
	margin:0 0 18px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:28px;
	font-weight:400;
	line-height:1.1
	}

.project-body h3{
	margin:26px 0 10px;
	font-size:18px;
	font-weight:700;
	line-height:1.2
	}

.project-body p{
	margin:0 0 16px;
	font-size:15.5px;
	line-height:1.65
	}

/* ========================================
   LEARNING OUTCOMES
======================================== */

.learning-outcomes{
	margin:44px auto;
	padding:30px 34px 32px;
	background:#0b0b0b;
	color:#ffffff
	}

.learning-outcomes h2{
	margin:0 0 18px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:34px;
	font-weight:400
	}

.learning-outcomes ul{
	margin:0 0 0 22px;
	padding:0
	}

.learning-outcomes li{
	margin-bottom:8px;
	color:#f2f2f2;
	font-size:15.5px;
	line-height:1.55
	}

/* ========================================
   PINNED MODULE CHECKLIST
======================================== */

.module-pinned-checklist {
  	position: relative;
  	width: calc(100% - 58px);
  	max-width: 1080px;
  	margin: 80px auto 80px;
  	padding: 60px 64px 60px;
  	background: #ffffff;
  	border: none;
  	box-shadow: none;
	}

.module-pinned-checklist::before {
  	content: "";
  	position: absolute;
  	top: 10px;
  	right: 10px;
  	bottom: 10px;
  	left: 10px;
  	border: 2px dashed #0b0b0b;
  	pointer-events: none;
  	z-index: 1;
	}

.module-pinned-checklist h2,
.module-pinned-checklist p,
.module-pinned-checklist .task-list {
  	position: relative;
  	z-index: 2;
	}

.module-pinned-checklist h2 {
  	margin: 0 0 24px;
  	font-family: Georgia,"Times New Roman",serif;
  	font-size: 36px;
  	font-weight: 400;
  	line-height: 1.08;
	}

.module-pinned-checklist p {
  	max-width: 760px;
  	margin: 0 0 24px;
  	font-size: 15px;
  	line-height: 1.65;
	}

.checklist-pin {
  	position: absolute;
  	z-index: 5;
  	width: 290px;
  	max-width: none;
  	height: auto;
  	mix-blend-mode: multiply;
	transform-origin: center;
	}

.checklist-pin-top {
  	left: 20px;
  	top: -165px;
  	transform: rotate(-52deg);
	}

.checklist-pin-bottom {
  	right: 20px;
  	bottom: -165px;
  	transform: rotate(128deg);
	}

/* ========================================
   OPTIONAL MODULE REFERENCE TABLE
======================================== */

.module-resource{
	margin-top:44px;
	padding:32px 34px;
	border:1px solid #cfc5bb;
	background:#ffffff
	}

.module-resource h2{
	margin:0 0 16px;
	font-family:Georgia,"Times New Roman",serif;
	font-size:34px;
	font-weight:400
	}

.module-resource-note{
	margin-bottom:22px;
	color:#6e655e;
	font-size:13px;
	line-height:1.55
	}

.module-table-wrap{
	width:100%;
	overflow-x:auto;
	margin-top:22px
	}

.module-table{
	width:100%;
	border-collapse:collapse;
	font-size:14px
	}

.module-table th,.module-table td{
	padding:10px 12px;
	border:1px solid #cfc5bb;
	text-align:left;
	vertical-align:top
	}

.module-table th{
	background:#e3d6c8;
	font-weight:700
	}

.module-table input{
	width:100%;
	min-width:90px;
	padding:6px;
	border:1px solid #bdb3aa;
	font-family:inherit
	}

/* ========================================
   MODULE NAVIGATION PANEL
======================================== */

.module-nav{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	margin-top:60px;
	padding-top:24px;
	border-top:1px solid #cfc5bb
	}

.module-nav a{
	color:#84395a;
	font-size:14px;
	font-weight:300;
	text-decoration:none
	}

.module-nav a:hover{
	text-decoration:underline;
	text-underline-offset:4px
	}

/* ========================================
   PHONE
======================================== */

@media(max-width:800px){
.module-hero h1{font-size:54px}
.callout-icon-panel{flex-basis:120px}
.callout-icon-panel img{width:84px}
.project-art{flex-basis:150px}
.module-pinned-checklist {width: calc(100% - 30px);padding: 62px 26px 66px}
.module-pinned-checklist h2 {font-size: 30px}
.checklist-pin {width: 180px}
.checklist-pin-top {left: -48px;top: 14px}
.checklist-pin-bottom {right: -48px;bottom: 14px}
}

/* ========================================
   TABLET
======================================== */

@media(max-width:600px){
.module-shell{width:calc(100% - 30px)}
.module-hero{padding:34px 0 32px}
.module-hero h1{font-size:44px}
.module-lede{font-size:15px}
.module-section h2{font-size:32px}
.module-callout{flex-direction:column}
.callout-icon-panel{flex:none;width:100%;padding:18px}
.callout-icon-panel img{width:72px}
.callout-body{padding:24px 24px 26px}
.module-project{flex-direction:column}
.project-art{flex:none;width:100%;min-height:150px}
.project-art img{width:145px}
.project-body{padding:26px 24px 30px}
.module-nav{flex-direction:column;align-items:flex-start}
.module-pinned-checklist {width: calc(100% - 30px);padding: 62px 26px 66px}
.module-pinned-checklist h2 {font-size: 30px}
.checklist-pin {width: 180px}
.checklist-pin-top {left: -48px;top: 14px}
.checklist-pin-bottom {right: -48px;bottom: 14px}
}