section.padding {padding:2.5rem 2rem;}
h1 {font-size:2.2rem;margin:0 0 2rem 0;line-height:1.2;}
h2 {font-size:1.4rem;margin:0 0 2rem 0;line-height:1.2;}
h3 {font-size:1.2rem;margin:0 0 2rem 0;line-height:1.2;}
@media (min-width:768px) {
	section.padding {padding:3.5rem 2rem;}
	h1 {font-size:2.5rem;margin:0 0 2.5rem 0;}
	h2 {font-size:1.6rem;margin:0 0 2.5rem 0;}
	h3 {font-size:1.4rem;margin:0 0 2.5rem 0;}
}
@media (min-width:1280px) {
	section.padding {padding:5rem 2rem;}
	h1 {font-size:3.2rem;margin:0 0 3rem 0;}
	h2 {font-size:2rem;margin:0 0 3rem 0;}
	h3 {font-size:1.6rem;margin:0 0 3rem 0;}
}

.column-spacer {width:100%;margin:0 auto;display:flex;justify-content:center;align-items:flex-start;gap:2rem;flex-direction:column;}
.column-spacer > div {width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;}
@media (min-width:768px) {
	.column-spacer {gap:4rem;flex-direction:row;}
	.column-spacer.reverse {flex-direction:row-reverse;}
	.column-spacer > div {width:50%;}
}
@media (min-width:1280px) {
	.column-spacer {font-size:1.125rem;font-weight:300;}
}
.column-spacer p {text-align:justify;text-indent:2rem;line-height:1.4;margin:0 0 1.5rem 0;}

figure.image {width:100%;margin:0 auto;}
figure.image div {width:100%;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;}
figure.image svg {width:100%;height:100%;opacity:0;position:relative;z-index:-1;}
figure.image noscript {width:100%;height:100%;position:absolute;}
figure.image img {width:100%;height:100%;position:absolute;-webkit-transition:transform 0.5s;-moz-transition:transform 0.5s;-ms-transition:transform 0.5s;-o-transition:transform 0.5s;transition:transform 0.5s;}
figure.image figcaption {padding:0.2rem 0.9rem;font-size:0.8rem;font-weight:300;font-style:italic;color:#666666;}


.home--hero {width:100%;max-width:1460px;margin:0 auto;padding:2.5rem 1.25rem;text-align:center;}
.home--hero h1 {font-size:2rem;margin:0;}
.home--hero a.href {font-weight:400;text-decoration:none;color:var(--color-accent-100);}


@media only screen and (min-width:768px) {
	.home--hero h1 {font-size:3.2rem;}
}
@media only screen and (min-width:1280px) {
	.home--hero h1 {font-size:4.2rem;}
}

.home--section {width:100%;max-width:1460px;margin:0 auto;padding:3rem;}
.home--section > div {width:100%;max-width:768px;margin:0 0 0 auto;}
@media only screen and (min-width:1080px) {
	.home--section {display:flex;justify-content:space-between;gap:4rem;}
	.home--section > div {width:70%;margin:0;}
}
@media only screen and (min-width:1280px) {
	.home--section > div {width:70%;max-width:1080px;}
}

.home--section .intro {font-size:1rem;}
.home--section .intro p {margin:0 0 1.5em 0;max-width:50ch;}
.home--section .intro .desc {font-size:1.4em;}
.home--section .intro .more {display:block;margin:2rem 0 0 0;text-decoration:underline;}
@media only screen and (min-width:1080px) {.home--section .intro {font-size:1.1rem;}}
@media only screen and (min-width:1280px) {.home--section .intro {font-size:1.2rem;}}

.home--section .portfolio {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4rem;}
.home--section .portfolio > a,
.home--section .portfolio > a > div,
.home--section .portfolio img, .home--section .portfolio svg {min-width:320px;max-width:320px;min-height:480px;max-height:480px;}
.home--section .portfolio > a {display:block;}
.home--section .portfolio > a > div {border-radius:0.5rem;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;}
.home--section .portfolio img {position:absolute;transform:scale(1.1);transition-duration:0.5s;}
.home--section .portfolio svg {background:#000;opacity:0.5;}
.home--section .portfolio > a > div > div {position:absolute;right:0;bottom:0;left:0;padding:0 0 1rem 0;margin:0 2.5rem 3rem 2.5rem;color:#fff;border-bottom:1px solid #fff;font-weight:600;}
.home--section .portfolio > a > div > div > span {font-size:1.2rem;}
.home--section .portfolio > a > div > div > div {font-size:1.6rem;}
.home--section .portfolio > a > div p {font-weight:300;font-size:1rem;}
.home--section .portfolio > a:hover svg {opacity:0.2;}
.home--section .portfolio > a:hover img {transform:scale(1.5);}
@media only screen and (min-width:1080px) {
	.home--section .portfolio {justify-content:flex-start;}
}

.home--section .articles {display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:4rem;}
.home--section .articles > div {display:flex;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap;}
.home--section .articles > div > figure {margin:0;border-radius:0.5rem;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;}
.home--section .articles > div > div,
.home--section .articles img, .home--section .articles svg {width:320px;max-width:320px;height:200px;max-height:200px;overflow:hidden;line-height:1.25;position:relative;}
.home--section .articles img {position:absolute;transform:scale(1.1);transition-duration:0.5s;}
.home--section .articles svg {background:#000;opacity:0.3;}
.home--section .articles > div > figure > div {position:absolute;right:0;bottom:0;left:0;padding:0 0 0.75rem 0;margin:0 1.5rem 1.5rem 1.5rem;color:#fff;border-bottom:1px solid #fff;font-weight:600;}
.home--section .articles > div > figure > div > span {font-size:0.75rem;font-weight:300;}
.home--section .articles > div > figure > div > div {font-size:1.1rem;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home--section .articles > div > div > div {position:absolute;width:100%;bottom:0;text-align:right;background:#fff;padding:0.25rem 0;font-size:0.9rem;}
.home--section .articles h3 {font-size:1.1rem;margin:0 0 0.9rem 0;}
.home--section .articles time {font-size:0.9rem;opacity:0.5;margin:0 0 0.9rem 0;display:block;}
.home--section .articles p {font-size:0.9rem;margin:0;}
.home--section .articles .more {display:block;margin:1rem 0 0 0;text-decoration:underline;}
.home--section .articles > div:hover > figure svg {opacity:0.125;}
.home--section .articles > div:hover > figure img {transform:scale(1.25);}


.faq {margin-bottom:1rem;border-top:1px solid #000;border-bottom:1px solid #000;}
.faq input {display:none;}
.faq label {display:block;padding:0.75rem 1rem;cursor:pointer;transition:background-color 0.3s;}
.faq:hover {color:var(--color-accent-100);border-top:1px solid var(--color-accent-100);border-bottom:1px solid var(--color-accent-100);}
.faq .faq-answer {display:none;color:var(--color-primary-100);padding:0.5rem 1rem;max-width:640px;}
.faq input:checked + label {font-weight:700;}
.faq input:checked + label + .faq-answer {display:block;}


.link_external::after {
	content:"";display:inline-block;width:1em;height:1em;margin-left:0.3em;
	-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M83.29,16.81a2,2,0,0,0-1.41-.58l-50.59,0h0a2,2,0,0,0,0,4H77.05L17.56,79.72a2,2,0,1,0,2.82,2.82L79.87,23.06l-.08,45.65a2,2,0,0,0,2,2h0a2,2,0,0,0,2-2l.09-50.49A2,2,0,0,0,83.29,16.81Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M83.29,16.81a2,2,0,0,0-1.41-.58l-50.59,0h0a2,2,0,0,0,0,4H77.05L17.56,79.72a2,2,0,1,0,2.82,2.82L79.87,23.06l-.08,45.65a2,2,0,0,0,2,2h0a2,2,0,0,0,2-2l.09-50.49A2,2,0,0,0,83.29,16.81Z'/%3E%3C/svg%3E") no-repeat center / contain;
	background-color:currentColor;
}
nav.back {font-size:1rem;display:flex;align-items:center;gap:1rem;color:var(--color-primary-100);fill:var(--color-primary-100);margin:0 0 1rem 0;}