/***GLOBAL VARIABLES
*****************************************************/
:root {
/***TEXT***/
    /*--fontSize: clamp(1rem, 1.25vw, 1.5rem);*/
    --fontSizeSiteName: 2.2vw;
    --fontSizeXXSmall: 0.75vw;
    --fontSizeXSmall: 0.975vw;
    --fontSizeSmall: 1.2vw;
    --fontSizeMedium: 1.45vw;
    --fontSizeMediumSerif: 1.8vw;
    --fontSizeLarge: 1.5vw;
    --fontSizeLargeSerif: 3vw;
    --fontSizeXLarge: 2.6vw;
    --fontSizeSemiXLargeSerif: 3.6vw;
    --fontSizeXLargeSerif: 4.8vw;
    --fontSizeXXLarge: 5.25vw;
    --fontSizeXXLargeSerif: 6.3vw;
    /*--fontSizeXXLargeSerif: clamp(4.2rem, 6.3vw, 5.75rem);*/
    --fontWeight: 400;
    --letterSpacing: .02em;
    --wordSpacing: 0em;
    --lineHeight: 1.2;
    --lineHeightXLow: 0.9;
    --lineHeightLow: 1;
    --lineHeightMidLow: 1.1;
    --lineHeightHigh: 1.35;

/***SPACES***/
    --spaceY: calc(var(--fontSizeSmall) * 1);
    --spaceX: calc(var(--fontSizeMedium) * 1);
    --bodySpaces: 0 auto;
    --rowGutterXSmall: calc(var(--fontSizeXSmall) * var(--lineHeight));
    --rowGutterSmall: calc(var(--fontSizeSmall) * var(--lineHeight));
    --rowGutter: calc(var(--fontSizeMedium) * var(--lineHeight));
    --rowGutterLarge: calc(var(--fontSizeLarge) * var(--lineHeightHigh));
    --colGutter: calc(var(--spaceX) * 1.5);
    --mainTopSpace: calc(var(--rowGutter) * 2);
    --mainBottomSpace: calc(var(--rowGutter) * 3);

/***SIZES***/
    --sitenameHeight: calc(var(--fontSizeSiteName) * var(--lineHeight));
    --headerHeight: calc(var(--spaceY)*1.5 + var(--sitenameHeight) + var(--rowGutterSmall));
    --panelHeaderHeight: calc(var(--rowGutterXSmall)*2 + var(--spaceY));
    --panelHeight: calc(100vh - var(--headerHeight) - var(--spaceY));
    /*--maxWidth: 1600px;*/
    --maxWidth: 100%;
    --mainWidth: 100%;
    --mainHeight: calc(100vh - var(--headerHeight) - var(--mainTopSpace) - var(--mainBottomSpace) - var(--footerHeight));
    --panelWidth: calc(100vw - var(--spaceX)*2);
    --footerHeight: calc(var(--spaceY)*2 + var(--rowGutter));

/***GRIDS***/
    --oneColGrid: repeat(1, 1fr);
    --twoColsGrid: repeat(2, 1fr);
    --threeColsGrid: repeat(3, 1fr);
    --fourColsGrid: repeat(4, 1fr);
    --sixColsGrid: repeat(6, 1fr);
    --twelveColsGrid: repeat(12, 1fr);
    --gridGap: calc(var(--rowGutter)*1.5) var(--colGutter);

/***COLOR***/
    --paletteWhite: #FFFFFF;
    --paletteGray: #f0f1ea;
    --paletteBlack: #000000;
    --paletteYellow: #f7df03;
    --paletteAlpha: transparent;
    --backColor: var(--paletteGray);
    --textColor: var(--paletteBlack);
    --linkColor: var(--paletteBlack);
    --hoverColor: var(--paletteGray);

/***DECORATION***/
    --linkDeco: underline;
    --borderWidth: 1px;
    --borderWidthThick: 3px;
    --borderLine: var(--borderWidth) solid var(--paletteBlack);
    --borderLineThick: var(--borderWidthThick) solid var(--paletteBlack);
    --borderLineWhite: var(--borderWidth) solid var(--paletteWhite);
    --borderRadiusBig: 3.25vw;
    --borderRadiusSmall: 0.5vw;

/***TRANSITION***/
    --transitionDuration: 0.15s;
    --transitionDurationSlow: 0.3s;
    --transitionDurationVerySlow: 0.9s;
}
  
/***FONTS
*****************************************************/
* {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
	text-size-adjust: 100%;
    -webkit-font-smoothing: smooth;
	-moz-font-smoothing: smooth;
    -moz-osx-font-smoothing: smooth;
	-ms-font-smoothing: smooth;
    -o-font-smoothing: smooth;
    text-rendering: geometricPrecision;
}
@font-face {
    font-family: Garamond Bold Condensed;
    src: url("fonts/ITCGaramondStd-BdCond.woff");
}
@font-face {
    font-family: Garamond Condensed;
    src: url("fonts/ITCGaramondStd-BkCond.woff");
}
@font-face {
    font-family: Roobert Light;
    src: url("fonts/Roobert-Light.woff");
}
@font-face {
    font-family: Roobert Medium;
    src: url("fonts/Roobert-Medium.woff");
}
@font-face {
    font-family: Roobert Regular;
    src: url("fonts/Roobert-Regular.woff");
}
@font-face {
    font-family: Roobert Regular Italic;
    src: url("fonts/Roobert-RegularItalic.woff");
}
@font-face {
    font-family: Roobert Bold;
    src: url("fonts/Roobert-SemiBold.woff");
}
@font-face {
    font-family: Roobert Bold Italic;
    src: url("fonts/Roobert-SemiBoldItalic.woff");
}
.font_size_Sitename {
    font-family: 'Garamond Bold Condensed', 'Times New Roman', Times, serif;
    font-size: var(--fontSizeSiteName);
    line-height: var(--lineHeight);
}
.font_size_XS_Sans, sup {
    font-family: 'Roobert Regular', Arial, Helvetica, sans-serif;
    font-size: var(--fontSizeXSmall);
    line-height: var(--lineHeight);
}

.font_size_S_Sans {
    font-family: 'Roobert Regular', Arial, Helvetica, sans-serif;
    font-size: var(--fontSizeSmall);
    line-height: var(--lineHeight);
}
.font_size_S_Serif {
    /*font-family: 'Garamond Bold Condensed', 'Times New Roman', Times, serif;*/
    font-family: 'Garamond Condensed', 'Times New Roman', Times, serif;
    font-size: var(--fontSizeSmall);
    line-height: var(--lineHeight);
}
.font_size_M_Serif {
    font-family: 'Garamond Condensed', 'Times New Roman', Times, serif;
    font-size: var(--fontSizeMediumSerif);
    line-height: var(--lineHeight);
}
.font_size_M_Sans {
    font-family: 'Roobert Regular', Arial, Helvetica, sans-serif;
    font-size: var(--fontSizeMedium);
    line-height: var(--lineHeight);
}
.font_size_L_Sans {
    font-family: 'Roobert Regular', Arial, Helvetica, sans-serif;
    font-size: var(--fontSizeLarge);
    line-height: var(--lineHeightHigh);
}
.font_size_L_Serif {
    font-family: 'Garamond Condensed', 'Times New Roman', Times, serif;
    font-size: var(--fontSizeLargeSerif);
    line-height: var(--lineHeightLow);
}
.font_size_XL_Sans {
    font-family: 'Roobert Medium', Arial, Helvetica, sans-serif;
    font-size: var(--fontSizeXLarge);
    line-height: var(--lineHeight);
}
.font_size_Semi_XL_Serif {
    font-family: 'Garamond Condensed', 'Times New Roman', Times, serif;
    font-size: var(--fontSizeSemiXLargeSerif);
    line-height: var(--lineHeightLow);
}
.font_size_XL_Serif {
    font-family: 'Garamond Condensed', 'Times New Roman', Times, serif;
    font-size: var(--fontSizeXLargeSerif);
    line-height: var(--lineHeightLow);
}
.font_size_XXL_Sans {
    font-family: 'Roobert Regular', Arial, Helvetica, sans-serif;
    font-size: var(--fontSizeXXLarge);
    line-height: var(--lineHeightLow);
}
.font_size_XXL_Serif {
    font-family: 'Garamond Condensed', 'Times New Roman', Times, serif;
    font-size: var(--fontSizeXXLargeSerif);
    line-height: var(--lineHeightXLow);
}
.font_size_XS_Sans b,
.font_size_S_Sans b,
.font_size_M_Sans b {
    font-family: 'Roobert Bold', Arial, Helvetica, sans-serif;
}
.font_size_L_Sans b,
.font_size_XL_Sans b,
.font_size_XXL_Sans b {
    font-family: 'Roobert Medium', Arial, Helvetica, sans-serif;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}

/***RESET
*****************************************************/
::-webkit-scrollbar {
    display: none;
}
::-webkit-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::-moz-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::-ms-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::-o-selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
::selection {
    color: var(--backColor);
    background-color: var(--textColor);
}
img::-webkit-selectio {
    color: transparent;
    background-color: transparent;
}
img::-moz-selection {
    color: transparent;
    background-color: transparent;
}
img::-ms-selection {
    color: transparent;
    background-color: transparent;
}
img::-o-selection {
    color: transparent;
    background-color: transparent;
}
img::selection {
    color: transparent;
    background-color: transparent;
}
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    /*color-scheme: light dark;*/
    scroll-behavior: smooth;
}
body {
    max-width: var(--maxWidth);
    position: relative;
    margin: var(--bodySpaces);
    color: var(--textColor);
    background: var(--backColor);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fontSizeMedium);
    line-height: var(--lineHeight);
    /*overflow: hidden;*/
}
ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
li {
  display: inline;
}
a {	
    color: var(--linkColor);
    text-decoration: none;
    transition-property: color;
    transition-duration: var(--transitionDuration);
}
a:hover {	
    /*text-decoration: var(--linkDeco);*/
    transition-property: color;
    transition-duration: var(--transitionDuration);
}
h1, h2, h3 {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding: 0;
    font-size: var(--fontSizeMedium);
    font-style: normal;
    font-weight: 400;
}
p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}
span {
    display: inline;
}
img, video {
    vertical-align: middle;
}
img.lazy,
video.lazy {
    opacity: 0;
    transition: opacity var(--transitionDuration);
}
img.lazy.loaded,
video.lazy.loaded {
    opacity: 1;
}

/***ON SCROLL EFFECT
*****************************************************/
.onscroll {
	transform: translateY(20%);
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: var(--transitionDurationVerySlow);
}
.onscroll.scrolled {
	transform: translateY(0);
    opacity: 1;
}

/***HEADER AND MENU
*****************************************************/
header {
    width: var(--mainWidth);
    max-width: var(--maxWidth);
    min-height: var(--headerHeight);
    /*
    position: -webkit-sticky;
    position: sticky;
    */
    position: fixed;
    top: 0;
    /*left: var(--spaceX);*/
    /*padding: calc(var(--spaceY)*2.2) calc(var(--spaceX) + var(--spaceX)*2) var(--rowGutterSmall);*/
    padding: calc(var(--spaceY)* 1.5) calc(var(--spaceX)*4) var(--spaceY);
    display: flex;
    justify-content: space-between;
    align-items: end;
    background: var(--backColor);
    /*border-radius: 0 0 var(--borderRadiusBig) var(--borderRadiusBig);*/
    z-index: 100;
    transform: translateY(0);
    transition: transform var(--transitionDuration);
}
header.hide {
    transform: translateY(-100%);
}
h1.site_name {
    /*min-height: var(--headerHeight);*/
}
nav.menu {
    min-height: var(--sitenameHeight);
    display: inherit;
    /*line-height: var(--lineHeightHigh);*/
}
nav.menu ul {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: calc(var(--colGutter)*0.25);
}
nav.menu li.menu_item {
    display: inherit;
}
nav.menu li.menu_item.lang_switch {
    margin-left: calc(var(--colGutter)*0.5);
}
nav.menu li.menu_item a {
    transition: opacity var(--transitionDuration);
}
nav.menu li.menu_item a:hover {
    opacity: 0.5;
}

/***MAIN CONTENT
*****************************************************/
main.content {
    max-width: var(--mainWidth);
    min-height: var(--mainHeight);
    position: relative;
    margin-inline: auto;
    margin-top: var(--headerHeight);
    /*margin-block: var(--mainTopSpace) var(--mainBottomSpace);*/
    padding-inline: calc(var(--spaceX)*2); 
    scroll-snap-type: y mandatory;   
}
/***SECTION PANELS***/
section.panel {
    position: -webkit-sticky;
    position: sticky;
    top: var(--headerHeight);
    padding: calc(var(--rowGutterLarge)*1) calc(var(--spaceX)*2) calc(var(--spaceY)*3);
    overflow-y: hidden; /* or 'scroll' depending on desired behavior */
    /*scroll-snap-align: start;*/
    overflow-x: hidden;
}
section.panel:not(.home) {
    /*padding-bottom: calc(var(--rowGutter)*2);*/
    border-radius: var(--borderRadiusBig) var(--borderRadiusBig) 0 0;
    margin-bottom: calc(var(--spaceY)* 2);
}
section.panel .section_title {
    margin-bottom: calc(var(--spaceY)*1);
}
section.panel .section_header,
section.panel .section_slide {
	height: 100%;
    display: flex;
    margin-top: var(--spaceY);
}
/*
section.panel .section_header .headline_1 {
}
*/
section.panel .section_header .headline_1 .description {
    margin-top: calc(var(--spaceY)*1);
}
/*
section.panel .section_header .illus {
}
*/
section.panel .section_header .illus img,
section.panel .section_header .illus video {
    width: 100%;
    height: auto;
}

/***HOME PAGE (STICKY VERSION)***/
/*
body.index section.panel.home {
    height: var(--panelHeight);
    margin-bottom: var(--spaceY);
    overflow: hidden;
    border-radius: var(--borderRadiusBig);
}
body.index section.panel.work {
    height: calc(var(--panelHeight) - var(--panelHeaderHeight) + var(--spaceY));
    top: calc(var(--headerHeight) + var(--panelHeaderHeight));
    display: flex;
    flex-direction: column;
}
body.index section.panel.people {
    height: calc(var(--panelHeight) - var(--panelHeaderHeight)*2 + var(--spaceY));
    top: calc(var(--headerHeight) + var(--panelHeaderHeight)*2);
}
body.index section.panel.people .section_header {
    height: calc(var(--panelHeight) - var(--panelHeaderHeight)*3 - var(--spaceY)*0.7 - var(--rowGutter)*6);
}
*/

/***HOME PAGE (SCROLL VERSION)***/
body.index section.panel.home {
	height: var(--panelHeight);
    margin-bottom: var(--spaceY);
    overflow: hidden;
    border-radius: var(--borderRadiusBig);
    z-index: 0;
}
body.index section.panel:not(.home) {
	position: relative;
    border-radius: var(--borderRadiusBig);
    z-index: 1;
}
body.index .patch {
	width: calc(100% - var(--spaceX)* 4);
    height: calc(var(--spaceY)*8);
    position: absolute;
    margin-top: calc(var(--spaceY)*1);
    z-index: 0;
    background: var(--backColor);
}

/***HOME ANCHORS ***/
.anchor {
    position: absolute;
    width: var(--spaceX);
    /*height: calc(var(--headerHeight));*/
    height: var(--spaceY);
    /*top: calc((var(--headerHeight))*-1);*/
    top: calc((var(--spaceY))*-1);
    background: red;
}
/*
#work.anchor {
    height: calc(var(--headerHeight) + var(--panelHeaderHeight));
    top: calc((var(--headerHeight) + var(--panelHeaderHeight))*-1);
}
#people.anchor {
    height: calc(var(--headerHeight) + var(--panelHeaderHeight)*2);
    top: calc((var(--headerHeight) + var(--panelHeaderHeight)*2)*-1);
}
#about.anchor {
    height: calc(var(--headerHeight));
    top: calc(var(--headerHeight)*-1);
}
*/
/*
section.panel:not(.active) {
    overflow-y: hidden;
}
section.panel.active {
    overflow-y: scroll;
}
*/
/*
section.panel:not(.home):not(.about) {
    height: calc(var(--panelHeight) + var(--spaceY));
}
*/

/***HOME PANEL***/
section.panel.home {
	padding: calc(var(--rowGutterLarge)* 1) calc(var(--spaceX)* 2);
}
section.home {
    display: flex;
    flex-direction: column;
    background: var(--paletteYellow);
    overflow-y: hidden;
    /*position: relative;*/
    transition-property: color, background;
    transition-duration: var(--transitionDuration);
}
section.home article {
    height: calc(var(--panelHeight) - var(--rowGutterSmall)* 4 - var(--rowGutter)* 1.5);
    position: relative;
    /*overflow: hidden;*/
}
section.panel.home .section_header,
section.panel.home .section_slide {
    height: calc(100% - var(--rowGutterSmall)* 2);
}
section.panel.home .section_slide {
	width: 100%;
    position: absolute;
    top: 0;
}
section.home .section_header > .headline_1,
section.home .section_slide > .headline_1 {
    flex: 1;
}
section.home .section_header > .headline_1 > .headline_1,
section.home .section_slide > .headline_1 > .headline_1 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
section.home article .section_header .illus,
section.home article .section_slide .illus {
    max-width: 100%;
    height: 100%;
    margin-bottom: calc(var(--rowGutter)*-1);
    /*
    transform: scale(1.15) translateY(calc(var(--rowGutter)*1.25));
    transform-origin: bottom right;
    */
    align-self: end;
    flex: 1.5;
}
section.panel.home .section_header .illus video,
section.panel.home .section_slide .illus img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}
article .section_slide {
	position: absolute;
	transition: opacity 0.5s;
}
article .section_slide:not(.active) {
	opacity: 0;
	pointer-events: none;
}
article .section_slide.active {
	opacity: 1;
	pointer-events: auto;
}
article .count_dots {
	width: 100%;
	display: flex;
	gap: calc(var(--rowGutterSmall)* 0.5);
	position: absolute;
    bottom: calc(var(--rowGutterSmall)*-0.5);
    transform: translateY(33%);
    justify-content: center;
    z-index: 300;
}
article .count_dots > div {
	width: calc(var(--rowGutterSmall)* 0.5);
    height: calc(var(--rowGutterSmall)* 0.5);
    border-radius: calc(var(--rowGutterSmall)* 0.5);
	background-color: white;
	transition: background 0.5s;
    cursor: pointer;
}
article .count_dots > div.active {
	background-color: black;
}
section.home .section_footer {
    /*margin-top: calc(var(--rowGutterXSmall)*4.5);*/
}

/***WORK PANEL AND PROJECT***/
section.work {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
section.work a {
    color: var(--paletteWhite);
}
body.work section.work {
    border-radius: var(--borderRadiusBig);
}
body.project section.work {
    /*width: var(--panelWidth);*/
    height: calc(var(--panelHeaderHeight) * 2) !important;
    /*position: fixed;*/
    top: var(--headerHeight);
}
section.panel.work .thumb_grid {
    height: 100%;
}
body.project section.project {
    /*width: var(--panelWidth);*/
    /*height: calc(var(--panelHeight) - var(--panelHeaderHeight) + var(--spaceY));*/
    /*
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--headerHeight) + var(--panelHeaderHeight));
    margin-top: calc(var(--headerHeight) + var(--panelHeaderHeight));
    */
    /*margin-top: calc(var(--headerHeight)*1);*/
    margin-top: calc((var(--panelHeaderHeight) + var(--spaceY)) * -1);
    display: flex;
    flex-direction: column;
    background: var(--paletteGray);
    /*overflow-y: scroll;*/
}
section.project .project_header {
    margin-top: calc(var(--rowGutterLarge)*3);
    display: flex;
    flex-direction: column;
    gap: calc(var(--rowGutter)*2) 0;
}
section.project .project_header .back_button {
    margin-bottom: var(--spaceY);
}
section.project .project_header a {
    transition: opacity var(--transitionDuration);
}
section.project .project_header a:hover {
    opacity: 0.5;
}
section.project > article {
    padding-inline: calc(var(--spaceX)* 5);
}
section.project .project_cover { 
    width: var(--panelWidth);
    /*height: calc(var(--panelHeight) - var(--panelHeaderHeight)*2 + var(--spaceY));*/
    aspect-ratio: 2 / 1;
    margin-left: calc(var(--spaceX)*-2.2);
}
section.project .project_cover img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section.project .project_stack {
    display: flex;
    gap: var(--colGutter);
    margin-top: calc(var(--rowGutterLarge)*2);
}
section.project .project_stack > .text {
    flex: 2;
}
section.project .project_stack > .text .text_title{
    margin-bottom: var(--rowGutter);
}
section.project .project_stack > .image,
section.project .project_stack > .space,
section.project .project_stack > .stack_col {
    flex: 1;
}
section.project .project_stack > .image {
    padding-top: calc(var(--spaceY)*0.5);
}
section.project .project_stack .graphic_container {
	flex: 1;
	padding: calc(var(--rowGutterLarge)*1.5) var(--spaceX);
    /*
    display: flex;
    justify-content: center;
    */
}
section.project .project_stack .graphic.numbers {
    position: relative;
    flex: 1;
    display: flex;
    gap: calc(var(--rowGutterLarge)*2) var(--colGutter);
    padding: calc(var(--spaceY)*2) calc(var(--spaceX)*1.5) calc(var(--spaceY)*2);
    background: var(--paletteYellow);
    border-radius: var(--borderRadiusBig);
    align-self: start;
}
section.project .project_stack .graphic.numbers.horizontal {
    justify-content: space-between;
}
section.project .project_stack .graphic.numbers.vertical {
    flex-direction: column;
}
section.project .project_stack .graphic.numbers .first_number,
section.project .project_stack .graphic.numbers .second_number {
	flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rowGutterXSmall) var(--colGutter);
    text-align: center;
}
section.project .project_stack .graphic.numbers .number_text {
	opacity: 0.5;
}
section.project .project_stack .graphic.text {
    position: relative;
    flex: 1;
    padding: calc(var(--spaceY)*2) calc(var(--spaceX)*1.5) calc(var(--spaceY)*5);
    background: var(--paletteYellow);
    border-radius: var(--borderRadiusBig);
    align-self: start;
}
section.project .project_stack .graphic .miscellany {
    width: 65%;
    position: absolute;
    right: -15%;
    bottom: 5%;
}
section.project .project_stack .footnotes {
	margin-top: calc(var(--rowGutterSmall)*1);
    opacity: 0.75;
}
section.project .project_stack .footnotes sup {
	font-size: var(--fontSizeXXSmall);
}
section.project .project_stack .footnotes a {
	font-style: italic;
    text-decoration: underline;
}
section.project .video {
    width: 100%;
    padding-inline: calc(var(--spaceX)*2);
    margin-top: calc(var(--rowGutterLarge)*3);
}
section.project .video video {
    width: 100%;
}
section.project .video .caption {
    text-align: center;
    margin-top: var(--rowGutterXSmall);
    opacity: 0.6;
}
section.project .project_stack .image img,
section.project .project_stack .graphic img,
section.project .video img {
    width: 100%;
}
.onu_footer {
    margin-top: calc(var(--rowGutterLarge)* 3);
}
.onu_footer .onu_title span {
    padding-bottom: calc(var(--spaceY)*0.5);
    border-bottom: var(--borderLineThick);
}
.onu_footer .onu_logos {
    display: flex;
    justify-content: start;
    gap: calc(var(--colGutter)/5);
    margin-top: calc(var(--spaceY)*2);
}
.onu_footer .onu_logo {
    margin-right: var(--spaceX);
}
.onu_footer .onu_logos img {
    width: auto;
    height: calc(var(--rowGutterLarge)*2);
    /*height: 100%;*/
    object-fit: contain;
}
.panel.related {
    margin-top: calc(var(--rowGutterLarge)* 4);
    padding-inline: calc(var(--spaceX)* 3);
}
.panel.related .related_title {
    text-align: center;
    margin-bottom: var(--rowGutterLarge);
}
.panel.related .thumb .thumb_media img {
    aspect-ratio: 1 / 1;
}

/***PEOPLE***/
section.people {
    display: flex;
    flex-direction: column;
    background: var(--paletteYellow);
}
section.people article {
    padding-inline: calc(var(--spaceX)*3);
}
/*
body.people section.people .section_header {
    margin-bottom: calc(var(--rowGutterLarge)* 4);
}
*/
section.people .section_header > * {
    flex: 1;
}
section.people article .section_header .illus {
    max-width: 100%;
    max-height: 100%;
    margin-top: calc(var(--rowGutter)*-2);
    transform-origin: top right;
    transform: scale(0.85);
}
section.people .miscellany {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--spaceY)*2);
    margin-bottom: calc(var(--spaceY)*0.25);
}
section.people .miscellany img {
    width: 25vw;
    transform: scale(1.5, 1) rotate(5deg);
}
section.people .thumb_grid .thumb:first-child .thumb_media:after {
    content: "";
    width: calc(var(--spaceX)*2.5);
    height: calc(var(--spaceY)*2.5);
    background: url("https://happytogether.studio//media/vector/drops.png") no-repeat;
    background-size: 100%;
    top: calc(var(--spaceY)*-1.25);
    right: calc(var(--spaceX)*-0.5);
    position: absolute;
}
section.people .thumb_grid .thumb:nth-child(6) .thumb_media:after {
    content: "";
    width: calc(var(--spaceX)*3);
    height: 50%;
    background: url("https://happytogether.studio//media/vector/curl.png") no-repeat;
    background-size: 100%;
	top: calc(var(--spaceY)* 1.5);
    right: calc(var(--spaceX)* -1.5);
    position: absolute;
}
section.people .thumb_grid .thumb:nth-child(10) .thumb_media:after {
    content: "";
    width: calc(var(--spaceX)*4);
    height: 50%;
    background: url("https://happytogether.studio//media/vector/asterisks.png") no-repeat;
    background-size: 100%;
    bottom: calc(var(--spaceY)* 2);
    left: calc(var(--spaceX)* -2.5);
    position: absolute;
}
section.people .thumb_grid .thumb:nth-child(18) .thumb_media:after {
    content: "";
    width: calc(var(--spaceX)*4);
    height: 50%;
    background: url("https://happytogether.studio//media/vector/smile.png") no-repeat;
    background-size: 100%;
	top: calc(var(--spaceY)* -4.75);
    right: calc(var(--spaceX)* -0.5);
    position: absolute;
}

/***ABOUT***/
section.about {
    display: flex;
    flex-direction: column;
    background: var(--paletteGray);
}
section.about article {
    /*height: calc(var(--panelHeight) - var(--rowGutterSmall)*6 - var(--rowGutter)*2);*/
    padding-inline: calc(var(--spaceX)*3);
    /*overflow: hidden;*/
}
section.about .section_header {
    /*
    display: grid;
    grid-template-columns: var(--threeColsGrid);
    */
    gap: var(--colGutter);
}
section.about .section_header > .illus {
    flex: 1;
}
section.about article .section_header .illus {
    /*max-width: 33vw;*/
    max-height: 30vw;
    margin-top: calc(var(--rowGutter)*-1);
    flex: 1;
}
section.about article .section_header .illus img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
section.about .section_header .headline_1 {
    flex: 2;
}
section.about .about_stack {
    display: flex;
    gap: var(--colGutter);
    margin-top: calc(var(--rowGutterLarge)*4);
}
section.about .about_stack:not(.center) > .headline_2 {
    flex: 2;
}
section.about .about_stack.four > .headline_2 {
    flex: 8;
}
section.about .about_stack .headline_2 .description {
    margin-top: calc(var(--spaceY)* 2);
}
section.about .about_stack > .illus {
    flex: 1;
    max-height: 33vw;
    margin-top: calc(var(--rowGutter)*-2);
}
section.about .about_stack.two > .illus {
    max-height: 27.5vw;
    flex: 2;
}
section.about .about_stack.four > .illus {
    flex: 7;
}
section.about .about_stack .illus img,
section.about .about_stack .illus video {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
section.about .about_stack.center {
    width: 100%;
    justify-content: center;
}
section.about .about_stack.center .headline_2 {
    width: 60%;
    text-align: center;
}
section.about .about_stack .title {
    position: relative;
}
section.about .about_stack .miscellany {
    position: absolute;
}
section.about .about_stack.two .miscellany {
	width: calc(var(--spaceX)* 4);
    height: auto;
    top: calc(var(--spaceY)* -3);
    right: calc(var(--spaceX)* 1.5);
}
section.about .about_stack.three .miscellany {
	width: calc(var(--spaceX)* 1.5);
    height: auto;
    top: 0;
    left: calc(var(--spaceX)* -0.85);
}
section.about .about_stack.four .miscellany {
	width: calc(var(--spaceX)* 4.5);
    height: auto;
    top: calc(var(--spaceY)* -1.8);
    right: calc(var(--spaceX)* 5);
    rotate: 45deg;
}
section.about .about_stack .miscellany img {
    width: 100%;
}
section.about article > .miscellany {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--spaceY)*2);
    margin-bottom: calc(var(--spaceY)*0.25);
}
section.about article > .miscellany img {
    width: 20vw;
}

/***SERVICES***/
section.about .services {
    position: -webkit-sticky;
    position: sticky;
    top: var(--headerHeight);
    padding: calc(var(--rowGutterLarge)*2) calc(var(--spaceX)*1);
    margin-top: calc(var(--spaceY)*3);
    border-radius: var(--borderRadiusBig);
    background: var(--paletteYellow);
    display: flex;
    gap: var(--colGutter);
}
section.about .services .miscellany {
    position: absolute;
}
section.about .services .miscellany.left {
    width: calc(var(--spaceX)* 6);
    top: calc(var(--spaceY)* -6);
    left: calc(var(--spaceX)* 3);
}
section.about .services .miscellany.right {
    width: calc(var(--spaceX)* 4);
    top: calc(var(--spaceY)* -0.5);
    right: calc(var(--spaceX)* 1.75);
    rotate: 120deg;
}
section.about .services .miscellany img {
    width: 100%;
}
section.about .services .illus {
    flex: 1;
    align-self: end;
}
section.about .services .illus img,
section.about .services .illus video {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
section.about .services .data {
    flex: 2;
}
section.about .services .data .description {
    width: 80%;
    margin-top: var(--rowGutter);
}
section.about .services .data_rows {
    margin-top: calc(var(--rowGutter)*1);
    padding-right: calc(var(--colGutter)*1);
}
section.about .services .data_rows .row .row_title {
    display: flex;
    justify-content: space-between;
    padding-block: calc(var(--spaceY)*1) calc(var(--spaceY)*0.5);
    border-bottom: var(--borderLine);
}
section.about .services .data_rows .row .row_title .toggle {
    width: calc(var(--spaceX)*1.5);
    height: calc(var(--spaceX)*1.5);
    border: var(--borderLine);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(var(--spaceY)*0.25);
    cursor: pointer;
    transition-property: color, background;
    transition-duration: 0.5s;
}
section.about .services .data_rows .row .row_title .toggle:hover {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}
section.about .services .data_rows .row .row_text {
    display: grid;
    padding-block: 0;
    transition-property: padding-block, grid-template-rows;
    transition-duration: 0.5s;
}
section.about .services .data_rows .row .row_text p {
    overflow-y: hidden;
}
section.about .services .data_rows .row:not(.open) .row_text {
    grid-template-rows: 0fr;
}
section.about .services .data_rows .row.open .row_text {
    grid-template-rows: 1fr;
    padding-block: calc(var(--spaceY)*1) calc(var(--spaceY)*1.5);
    border-bottom: var(--borderLine);
}

/***CONTACT***/
section.contact {
    /*
    display: flex;
    flex-direction: column;
    */
    background: var(--paletteGray);
}
section.contact .form_container {
    padding-inline: calc(var(--spaceX)*3);
    margin-top: calc(var(--rowGutterLarge)*2);
}
section.contact .form_container form {
    margin-top: calc(var(--rowGutterLarge)*2);
}
section.contact form .inputs_container {
	display: flex;
    column-gap: calc(var(--spaceX)*0.33);
}
section.contact form .inputs_container .inputs_block {
	flex: 1;
	display: flex;
    flex-direction: column;
}
.inputs_container .inputs_block .form_block_item {
	display: flex;
    align-items: center;
    margin-bottom: calc(var(--spaceY)*0.5);
    position: relative;
}
.inputs_container .inputs_block:nth-child(2) .form_block_item:after {
	content: "↓";
	position: absolute;
	/*top: 0;*/
	left: calc(100% - var(--spaceX)* 6.25);
	pointer-events: none;
}
.inputs_container .inputs_block .form_block_item > input {
	width: calc(100% - var(--spaceX)*5);
}
.inputs_container .inputs_block .form_block_item > span {
	width: calc(var(--spaceX)*5);
    display: inline-block;
}
.inputs_block .form_block_item select.cities_select {
	width: calc(100% - var(--spaceX)*5);
    height: calc(var(--rowGutterSmall) + var(--spaceX)*0.9);
    position: relative;
	font-family: 'Roobert Regular', Arial, Helvetica, sans-serif;
    /*
    font-size: var(--fontSizeLarge);
    line-height: var(--lineHeightHigh);
    */
	background: var(--backColor);
    appearance: none;
  	-webkit-appearance:none;
	/*width: 100%;*/
}
.inputs_block .form_block_item select.cities_select option {
}
section.contact .form_container form textarea {
    width: calc(100% - var(--spaceX)*10);
    height: calc(var(--rowGutterSmall)*10);
    margin-left: calc(var(--spaceX)*5);
    resize: none;
}
section.contact .form_container form .submit_container {
    display: flex;
    justify-content: space-between;
    padding-inline: calc(var(--spaceX)*5);
    margin-top: calc(var(--spaceY)*0.25);
}
section.contact .form_container form #response_message {
	transition: opacity var(--transitionDuration);
    padding-block: calc(var(--spaceY)*0.5);
}
section.contact .form_container form .submit_container input {
    padding-inline: calc(var(--spaceX)*3);
    transition: var(--transitionDuration);
}
section.contact .form_container form .submit_container input:hover {
    color: var(--backColor);
    background: var(--textColor);
}
input, textarea, submit, select {
    margin: 0;
    padding: calc(var(--spaceY)*0.5) calc(var(--spaceX)*0.75);
    color: var(--textColor);
    background: transparent;
    border: var(--borderLine);
    outline: none;
    font: inherit;
    font-size: inherit;
    border-radius: var(--borderRadiusSmall);
}
input:focus, textarea:focus {
    outline: none;
}
input[name="submit"] {
	cursor: pointer;
}
:-webkit-input-placeholder {
	/*internet explorer*/
	color: var(--textColor);
}
::-moz-input-placeholder {
	/*mozilla edge*/
    color: var(--textColor);
}
::-ms-input-placeholder {
	/*microsoft edge*/
    color: var(--textColor);
}
::-o-input-placeholder {
	/*microsoft edge*/
    color: var(--textColor);
}
::placeholder {
	/*chrome, firefox, opera, safari*/
    color: var(--textColor);
}
.contact_footer {
	width: 100%;
    padding-inline: calc(var(--spaceX)*3);
	display: flex;
    justify-content: space-between;
    gap: var(--gridGap);
    margin-top: calc(var(--rowGutterLarge)*3);
}
.contact_footer > div {
	/*flex: 1;*/
}
.contact_footer a {
    transition: opacity var(--transitionDuration);
}
.contact_footer a:hover {
    opacity: 0.5;
}

/***THUMBNAIL GRID***/
.thumb_grid {
    display: grid;
    grid-template-columns: var(--threeColsGrid);
    grid-gap: var(--gridGap);
}
.thumb .thumb_media {
	position: relative;
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
}
.thumb .thumb_media img {
    width: 100%;
    /*max-height: auto;*/
    object-fit: cover;
    object-position: top;
    border-radius: var(--borderRadiusSmall);
    transition: opacity var(--transitionDuration);
}
.thumb a:hover img {
    opacity: 0.6;
}
section.work .thumb .thumb_media img {
    aspect-ratio: 1 / 1;
}
section.people .thumb .thumb_media img {
    aspect-ratio: 1 / 1;
}
/*
body.index section.work .thumb .thumb_media img {
    height: calc(var(--panelHeight) - var(--rowGutterSmall) - var(--rowGutterXSmall)*3.66 - var(--rowGutter)*11);
}
*/
.thumb .thumb_data {
    margin-top: calc(var(--rowGutterXSmall)*1);
}
.thumb .thumb_data .sub_title {
    margin-top: calc(var(--rowGutterXSmall)*0);
}
.thumb .thumb_data .description {
    margin-top: calc(var(--rowGutterXSmall)*0.66);
}
.thumb .thumb_data .description a {
    text-decoration: underline;
}
.more_works .more_button:not(:first-child) {
    display: none;
}
.more_button {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--rowGutter)*2);
}
.more_button span {
    padding: calc(var(--spaceY)*0.5) calc(var(--spaceX)*0.75);
    border: var(--borderLineWhite);
    border-radius: var(--borderRadiusSmall);
    cursor: pointer;
    transition: var(--transitionDuration);
}
section.work .more_button span {
    border: var(--borderLineWhite);
}
section.work .more_button:hover span{
    color: var(--paletteBlack);
    background: var(--paletteWhite);
}
section.people .more_button span {
    border: var(--borderLine);
}
section.people .more_button:hover span {
    color: var(--paletteWhite);
    background: var(--paletteBlack);
}


/***PRIVACY***/
section.privacy {
    display: flex;
    flex-direction: column;
    background: var(--paletteGray);
}
section.privacy article {
    padding-right: calc(var(--spaceX)* 3);
}
section.privacy .section_header {
    gap: var(--colGutter);
}
section.privacy .privacy_stack {
    display: flex;
    gap: var(--colGutter);
    margin-top: calc(var(--rowGutterLarge)*1);
}
section.privacy .privacy_stack > .illus {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: start;
    /*margin-top: calc(var(--rowGutter)*-2);*/
}
section.privacy .privacy_stack .illus img {
    max-width: 17.5vw;
    max-height: 17.5vw;
    /*
    width: 100%;
    max-height: 100%;
    */
    object-fit: contain;
    object-position: center;
    position: absolute;
}
section.privacy .privacy_stack .illus.hash img {
    max-width: 12.5vw;
    max-height: 12.5vw;
}
section.privacy .privacy_stack .illus.highlight img {
    max-width: 12.5vw;
    max-height: 12.5vw;
    rotate: -125deg;
}
section.privacy .privacy_stack > .headline {
    flex: 2;
}
section.privacy .privacy_stack .description {
    margin-top: calc(var(--rowGutterLarge)* 1);
}

/***FOOTER
*****************************************************/
footer {
    width: 100%;
    margin-top: calc(var(--rowGutter)* 4);
    padding-inline: calc(var(--spaceX) * 7);
}
footer .footer_container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: calc(var(--colGutter)* 3);
    padding-block: calc(var(--rowGutter)* 4);
    border-top: var(--borderLine);
}
footer .footer_logos {
    height: calc(var(--rowGutter)* 4);
    flex: 1;
    display: flex;
    justify-content: start;
    gap: var(--colGutter);
}
footer .footer_logos img {
    height: 100%;
}
footer .footer_data {
    flex: 3;
}
footer .footer_contact {
    flex: 1;
    text-align: right;
}
footer .footer_data p:first-child,
footer .footer_contact p:first-child {
    margin-bottom: var(--rowGutter);
}
/*
footer a:hover {
    text-decoration: underline;
}
*/
footer a {
    transition: opacity var(--transitionDuration);
}
footer a:hover {
    opacity: 0.5;
}