/*
Title: Praathamesh Pai
Description: CSS for my work website Transducent.com
Author: Prathamesh Pai
Author URI: http://transducent.com/
 */
@import url("https://use.typekit.net/wqr3ctc.css");
@import url("/assets/fonts/junction/junction.css");
:root {
		--font-size: clamp(16px, 1.875vw, 22px);

		--font-scale-0: 1.0rem;
		--font-scale-1: 1.3195rem;
		--font-scale-2: 1.7411rem;
		--font-scale-3: 2.2974rem;
		--font-scale-4: 3.0314rem;
		--font-scale-5: 4.0rem;
		--font-scale-sm: 0.7579rem;

		--typeface-serif: ff-meta-serif-web-pro, Georgia, serif;
		--typeface-sans: "Junction-Bold", Verdana, serif;
		--typeface-meta: "Junction-Regular", Verdana, serif;

		--colour-sand: #FDB664;
		--colour-sand-tint-1: #FDC88A;
		--colour-sand-tint-2: #FEDAB1;
		--colour-sand-tint-3: #FEECD8;
		--colour-sand-shade-1: #BD884B;
		--colour-sand-shade-2: #7E5B32;
		--colour-sand-shade-3: #3F2D19;
		--colour-salmon: #E57455;
		--colour-salmon-tint-1: #EB967F;
		--colour-salmon-tint-2: #F2B9AA;
		--colour-salmon-tint-3: #F8DCD4;
		--colour-salmon-shade-1: #AB573F;
		--colour-salmon-shade-2: #723A2A;
		--colour-salmon-shade-3: #391D15;
		--colour-blue-sea: #88C5E5;
		--colour-blue-sea-tint-1: #A5D3EB;
		--colour-blue-sea-tint-2: #C3E2F2;
		--colour-blue-sea-tint-3: #E1F0F8;
		--colour-blue-sea-shade-1: #6693AB;
		--colour-blue-sea-shade-2: #446272;
		--colour-blue-sea-shade-3: #223139;
		--colour-raw-mango: #A6C3AD;
		--colour-raw-mango-tint-1: #BCD2C1;
		--colour-raw-mango-tint-2: #D2E1D6;
		--colour-raw-mango-tint-3: #E8F0EA;
		--colour-raw-mango-shade-1: #7C9281;
		--colour-raw-mango-shade-2: #536156;
		--colour-raw-mango-shade-3: #29302B;
		--colour-navy: #0B3640;
		--colour-navy-tint-1: #48686F;
		--colour-navy-tint-2: #859A9F;
		--colour-navy-tint-3: #C2CCCF;
		--colour-navy-shade-1: #082830;
		--colour-navy-shade-2: #051B20;
		--colour-navy-shade-3: #020D10;
		--colour-black: #000000;
		--colour-grey: #808080;
		--colour-grey-tint-1: #9F9F9F;
		--colour-grey-tint-2: #BFBFBF;
		--colour-grey-tint-3: #DFDFDF;
		--colour-grey-shade-1: #606060;
		--colour-grey-shade-2: #404040;
		--colour-grey-shade-3: #202020;
		--colour-white: #FFFFFF;
		--colour-almost-white: #FAFAFA;
		--colour-text: var(--colour-navy-shade-3);
		--spacing: 1em;
		--spacing-sm: 0.5em;
		--spacing-xs: 0.25em;
		--spacing-lg: 1.5em;
		--spacing-xl: 2em;
		--spacing-xxl: 3em;
		--border-radius: 4px;
}

/*RESET*/
*, ::before, ::after { box-sizing: border-box; }
@supports not (-ms-ime-align: auto) {
		details summary { cursor: pointer; }
		details summary > * { display: inline; }
}


/*ACCESSIBILITY*/
::selection {
		background-color: var(--colour-blue-sea);
		color: white;
}
:focus {
		transition: outline-offset 1s ease;
		outline: 2px solid var(--colour-salmon-tint-1) !important;
		outline-offset: 3px;
}
.non-visual {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
}


/*TYPOGRAPHY*/
html {
		font-size: var(--font-size);
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		scroll-behavior: smooth;
}
body {
		font-family: var(--typeface-serif);
		font-size: var(--font-scale-0);
		line-height: 1.5;
		color: var(--colour-text);
		margin: 0;
}
h1, h2, h3, h4, h5, h6 {
		font-family: var(--typeface-sans);
		letter-spacing: -0.04em;
		font-weight: 700;
		line-height: 1;
		margin: 0;
		margin-top: var(--spacing);
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child, 
h5:first-child,
h6:first-child {
		margin-top: 0;
}
h1 { font-size: var(--font-scale-5); }
h2 { font-size: var(--font-scale-4); }
h3 { font-size: var(--font-scale-3); }
h4 { font-size: var(--font-scale-2); }
h5 { font-size: var(--font-scale-1); }
h6 {
		font-weight: 500;
		text-transform: uppercase;
		color: var(--colour-grey);
		font-size: var(--font-scale-0);
}
p { margin: var(--spacing) 0; }
p:first-child { margin-top: 0; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
ul, ol {
		margin: var(--spacing-lg) 0;
		padding: 0;
		list-style: none;
		counter-reset: li;
}
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
li {
		margin-bottom: var(--spacing-sm);
		margin-left: var(--spacing);
		counter-increment: li;
}
li::marker { color: var(--colour-salmon); }
sup, sub {
		position: relative;
		vertical-align: baseline;
		top: -0.8em;
		font-size: var(--font-scale-sm);
}
sub { top: 0.8em; }

.with-dropcap::first-letter {
		font-size: 5rem;
		color: var(--colour-salmon);
		float: left;
		margin: 0.1em 0.1em 0 0;
		line-height: 0.65;
		font-weight: 700;
}
.sectionhead:after {
		content: "";
		width: 2em;
		height: 0.1em;
		border-radius: 1px;
		display: block;
		background-color: var(--colour-sand);
}


/*NAV*/
a {
		color: var(--colour-text);
		text-decoration: underline;
		text-decoration-color: var(--colour-salmon);
		text-decoration-thickness: 2px;
		transition: all 0.2s ease;
}
a:hover { color: var(--colour-salmon); }
.btn, a.btn {
		display: inline-block;
		padding: var(--spacing) var(--spacing-sm);
		margin: var(--spacing-sm) 0;
		background-color: var(--colour-sand);
		border-radius: var(--border-radius);
		color: var(--colour-black);
		font-family: var(--typeface-meta);
		line-height: 1;
		text-decoration: none;
}
.btn:hover, a.btn:hover {
		text-decoration: none;
		background-color: var(--colour-sand-tint-1);
		color: var(--colour-grey-shade-2);
}
#toggle-menu {
		fill: var(--colour-salmon);
		cursor: pointer;
		margin: 0 auto;
		width: 2rem;
}
#toggle-menu path {
		transform-origin: center center;
		transition: all 0.25s ease-in-out;
}
#toggle-menu.active {
		rect { fill: var(--colour-salmon); }
}
#toggle-menu.active #bar1, #toggle-menu.active #bar4 { opacity: 0; }
#toggle-menu.active #bar2 { transform: rotate(45deg); }
#toggle-menu.active #bar3 { transform: rotate(-45deg); }
#menu {
		position: fixed;
		top: 1.5em;
		right: 1.5em;
		z-index: 100;
		text-align: right;
		font-size: var(--font-scale-sm);
}
#menu > summary {
		display: inline-flex;
		justify-content: flex-end;
		text-align: right;
}
#menu ul {
		padding: 0;
		margin: 0;
		list-style: none;
}
#menu > nav {
		min-width: 10rem;
		margin: 0.25em 0 0 0;
		border-radius: var(--border-radius);
		background: white;
		box-shadow: rgba(209, 217, 224, 0.5) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px;
		padding: 1em;
		animate: animateDown 0.25s ease forwards;
		font-family: var(--typeface-meta);
}
#menu li { 
		margin: 0; 
		border-bottom: 1px solid #efefef;
}
#menu li:last-child { border: none; }
#menu[open] a {
		display: block;
		padding: var(--spacing-sm);
		margin: 0;
		text-decoration: none;
}
#menu[open] a:hover {
		background: #efefef;
}
#contact a { color: var(--colour-sand); }
#contact a:hover { color: var(--colour-salmon); }
#mysites dd {
		margin: 0 0 var(--gap) 0;
		opacity: 0.7;
		font-family: var(--typeface-meta);
		font-size: var(--font-scale-sm);
}
#mysites dt.this-site::before {
		content: "\2192";
}
#mysites[open] dl {
		animation: animateDown 0.5s ease forwards;
}



/*IMAGES*/
img { max-width: 100%; }
figure {
		display: block;
		margin-bottom: var(--spacing);
}
figure img { display: block; }
figcaption { font-family: var(--typeface-meta); }


/*LAYOUT*/
.grid {
		display: grid;
		grid-gap: var(--spacing);
		gap: var(--spacing);
		padding: var(--spacing-xl);
		justify-content: center;
		width: 90vw;
		max-width: 1600px;
		margin: auto;
}
@media (min-width: 45em) {
		.grid {
				grid-template-columns: repeat(12, 1fr);
		}
}
.grid > h2 {
		grid-row: 1;
		grid-column: 1/-1;
}

section {
		min-height: 100vh;
		display: flex;
		align-items: center;
}

#start #logo { text-align: center; }
#start #logo svg { max-width: 30em; }
#start header > h3 {
		margin-top: 0;
		font-style: italic;
}
@media (min-width: 45em) {
		#start figure {
				grid-row: 1/3;
				grid-column: 1/6;
				align-self: center;
		}
		#start header {
				grid-row: 1;
				grid-column: 6/-1;
		}
		#start article {
				grid-row: 2;
				grid-column: 7/-1;
		}
}
@media (min-width: 90em) {
		#start figure {
				grid-row: 1/3;
				/*grid-column: 3/6;*/
				align-self: center;
		}
		#start header {
				grid-row: 1;
				grid-column: 6/-3;
				align-self: end;
		}
		#start article {
				grid-row: 2;
				grid-column: 7/-3;
		}
}

#services { background-color: var(--colour-almost-white); }
@media (min-width: 45em) {
		#services .grid > header {
				grid-column: 1/5;
				position: sticky;
				top: var(--spacing-xl);
		}
		#services .grid > div {
				grid-column: 5/-1;
		}
}
#services .grid > div figure { max-width: 15em; }
@media (min-width: 40em) {
		#services .grid > div {
				display: grid;
				grid-template-rows: auto auto;
				grid-template-columns: 1fr 1fr;
		}
		#services .grid > div figure {
				grid-row: 1/-1;
				grid-column: 1;
				justify-self: end;
		}
		#services .grid > div h3 {
				grid-row: 1;
				grid-column: 2;
		}
		#services .grid > div ul {
				grid-row: 2;
				grid-column: 2;
		}
}

#work {
		background-color: var(--colour-blue-sea-shade-2);
		color: var(--colour-sand-tint-3);
		display: block;
}
#work > header {
		padding: var(--spacing-xl);
		width: 90vw;
		max-width: 1600px;
		margin: auto;
}
#work > article.krsna { background-color: var(--colour-blue-sea-shade-1); }
#work > article.genesis { background-color: var(--colour-blue-sea-shade-3); }
#work > article.vbcl { background-color: var(--colour-raw-mango-shade-2); }
#work > article.eikonax { background-color: var(--colour-raw-mango-shade-2); }
#work > article.besant { background-color: var(--colour-raw-mango-shade-3); }
#work > article.ourlady { background-color: var(--colour-navy-shade-2); }
#work > article.ibv { background-color: #342220; }
#work > article .grid > .desc {
		grid-row: 1;
		grid-column: 1/7;
}
@media (min-width: 45em) {
		#work > article .grid > .desc {
				position: sticky;
				top: var(--spacing-xl);
		}
}
#work > article .grid > .desc > ul {
		font-family: var(--typeface-meta);
		list-style: none;
}
#work > article .grid > .desc > ul li {
		margin: 0;
		display: inline-block;
}
#work > article .grid > .desc > ul li::after { content: " // "; }
#work > article .grid > .desc > ul li:last-child::after { content: ""; }
#work > article .grid > aside {
		display: block;
		grid-row: 2;
		grid-column: 7/-1;
}
@media (min-width: 64em) {
		#work > article .grid > aside {
				position: sticky;
				top: var(--spacing-xl);
		}
}

@media (min-width: 45em) {
		#about header {
				grid-column: 1/3;
				position: sticky;
				top: var(--spacing-xl);
		}
}
@media (min-width: 64em) {
		#about header { grid-column: 1/4; }
}
#about #stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: var(--spacing);
		gap: var(--spacing);
		margin: var(--spacing-xl) 0;
}
#about #stats .stat {
		align-self: start;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: var(--typeface-meta);
		text-align: center;
}
#about #stats .stat svg { max-width: 96px; }
#about #stats .stat h4, #about #stats .stat p { margin: 0; }
@media (min-width: 45em) {
		#about #stats {
				grid-row: 2;
				grid-column: 5/-1;
		}
}
@media (min-width: 64em) {
		#about #stats {
				grid-row: 2;
				grid-column: 5/-1;
		}
}
@media (min-width: 90em) {
		#about #stats {
				grid-template-columns: repeat(5, 1fr);
		}
}
@media (min-width: 45em) {
		#about #bio {
				grid-row: 3/5;
				grid-column: 5/-1;
		}
}
@media (min-width: 64em) {
		#about #bio { grid-column: 5/-2; }
}
@media (min-width: 90em) {
		#about #bio { grid-column: 5/9; }
}
@media (min-width: 45em) {
		#about #freq {
				grid-row: 5;
				grid-column: 5/9;
		}
}
@media (min-width: 64em) {
		#about #freq { grid-column: 5/9; }
}
@media (min-width: 90em) {
		#about #freq {
				grid-row: 3;
				grid-column: 9/-1;
		}
}
@media (min-width: 45em) {
		#about #infreq {
				grid-row: 5;
				grid-column: 9/-1;
		}
}
@media (min-width: 64em) {
		#about #infreq { 
				grid-column: 9/-1; 
		}
}
@media (min-width: 90em) {
		#about #infreq { 
				grid-row: 4;
		}
}

#contact {
		background-color: var(--colour-blue-sea-shade-2);
		font-family: var(--typeface-meta);
}
#contact .adr { grid-column: 2/-1; }


/*ANAIMATION*/
@keyframes animateDown {
		0% {
				opacity: 0;
				transform: translatey(-25px);
		}
		100% {
				opacity: 1;
				transform: translatey(0);
		}
}