/* Google font definitions generated by Google fonts. They are not used explicitly. */

.bodoni-moda-heading {
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.nunito-sans-body {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}

html, body {font-size: 16px;}

body {background-color: #FFFFFF; color: #000000; margin: 0; padding: 0; word-wrap: break-word; overflow-wrap: break-word;}

footer, header, main, nav, section {display: block;}

img {border: none;}	/* We shouldn't need this, it should be the html default */

hr {box-sizing: content-box;}

/* We may need this for older browsers to respect later modifications to h1 used inside <section> tags */
:where(h1) {margin-block: 0.67em; font-size: 2em;}

.flex-row {display: flex; flex-flow: row wrap;}	/* vertical stretch, justify-content: flex-start; */
.flex-column {display: flex; flex-direction: column;}

.flex-row.left {justify-content: flex-start;}
.flex-column.left {align-items: flex-start;}
.flex-row.center {justify-content: center;}
.flex-column.center {align-items: center;}
.flex-row.right {}justify-content: flex-end;}
.flex-column.right {align-items: flex-end;}
.flex-row.top {align-items: flex-start;}
.flex-column.top {justify-content; flex-start;}
.flex-row.middle {align-items: center;}
.flex-column.middle {justify-content: center;}
.flex-row.bottom {align-items: flex-end;}
.flex-column.bottom {justify-content: flex-end;}

/* Setup the document fonts. Use an Adobe font present on Apple devices or fallback to google fonts */
h1, h2, h3, h4 {font-family: "Didot", "Bodoni Moda", serif; font-weight: 500;}
h1 {font-size: 3.4rem; line-height: 1.26em;}	/* Was 3.5rem for Didot but is too big on phone with Bodoni Moda */
h2 {font-size: 2.5rem; line-height: 1.316em;}	/* 2.4rem For Bodoni Moda, fixed by moving max-width to 1070 */
h3 {font-size: 2rem; line-height: 1.344em;}		/* 1.9rem For Bodoni Moda, fixed by moving max-width to 1070 */
h4 {font-size: 1.4rem; line-height: 1.3776em;}
/* The font is inherited from .site-wrapper, should we use the inherited line-height as well? */
p, .lg-text, .sm-text {margin: 1rem 0; line-height: 1.8rem;} /* Text font is set by the site-wrapper */
.lg-text {font-size: 1.3rem;}	/* large body text size */
.sm-text {font-size: 0.9rem;}	/* small body text size */

/* 
 * The iPhone 16 pro is 402px wide, iPhone 16 promax is 440px wide.
 * For h1@3.4rem Avenir requires 436px, Bodoni Moda requires 451px.
 * If we set for the iPhone promax then any android phone between 440px and 450px will wrap
 * h1 and h2 titles. But if we set for Android the titles on iPhone promax will be nearly
 * 18% smaller than designed.
*/
@media (max-width: 439px) {
h1 {font-size: 2.8rem;}	/* Bodoni Moda on iPhone 7/8, 2.9rem for iPhone 12 or Avenir on iPhone 7 */
h2 {font-size: 2.2rem;}	/* Bodoni Moda on iPhone 7/8, 2.3rem for iPhone 12 or Avenir on iPhone 7 */
}

.site-wrapper .content > :first-child {margin-top: 0;}
.site-wrapper .content > :last-child {margin-bottom: 0;}

.clearfix:after {content: ""; display: block; clear: both;}	/* IE 8 and newer */

a {cursor: pointer; color: inherit; text-decoration: none;}
/* a:visited {color: inherit;} Is this needed? */
a:hover {text-decoration: none;}
p a {color: rgb(0,0,0);}
.content-blk a {
	background-repeat: repeat-x;
	background-image: linear-gradient(to right, currentColor 100%, currentColor 0);
	background-size: 1px 1px;
	background-position: 0 100%;
	white-space: initial;
	color: rgb(0,0,0);
}
@supports (text-decoration-thickness: 1px) and (text-underline-offset: 0.2em) {
  .content-blk a {
	background-repeat: unset;
	background-image: unset;
	background-size: unset;
	background-position: unset;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-skip: auto;
	text-decoration-skip-ink: auto;
  }
}

#SiteWrapper {display: flex; flex-direction: column; min-height: 100vh;}
.site-wrapper {
	font-family: "Avenir", "Nunito Sans", sans-serif;	/* body font */
	font-style: normal;
	font-weight: 300;
	font-size: 1rem;									/* body text size */
	line-height: 1.8em;									/* body text line-height */
	letter-spacing: 0em;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

/* The fixed header bar and associated classes */

.header {
	z-index: 10;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	line-height: 1;
	background-color: #FFFFFF;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	pointer-events: none;
	transition: transform 140ms ease-in-out;
}

.header .header-bar {
	position: relative;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
	padding: 1.8vw 3vw; /* Is padding 6vw on phones? maybe but not for the main-title-photo */
	pointer-events: auto;
}
@media (max-width: 600px) {
.header .header-bar {padding: 6vw;}
}

.header-inner {position: relative; z-index: 1; display: flex; align-items: center; width: 100%; height: inherit;}
.header-title-nav-wrapper {display: flex; flex-wrap: nowrap; flex: 1 0 67%; align-items: center;}
.header-title {flex-grow: 0; flex-shrink: 0; backface-visibility: hidden;}
.header-title-text {
	font-family: "Didot", "Bodoni Moda", serif;	/* title font = heading font */
	font-weight: 500;
	font-size: 1.8em;							/* title font size = 2em adjusted */
	line-height: 1.3552em;						/* title line-height = heading font line-height adjusted */
	margin: 0;
	margin-right: auto;	/* temporary padding until the nav and action buttons are added */
}
.header-title-text a {color: #000000;}

@media (max-width: 439px) {
.header-title-text {font-size: 1.6em;}
}
@media (max-width: 375px) {
.header-title-text {font-size: 1.5em;}
.header .header-bar {padding: 4vw 5vw;}
}

/* The footer and associated classes */

#Footer.site-section {background-color: #EEEDEB;}
#Footer .content {padding: 3vw 6vw;}
#Footer .content-blk {max-width: 35rem;}	/* To force footer line wrap on large displays */
#Footer hr {border: none; background-color: #BBBBBB; height: 1px; margin: 2.5rem 0;}
@media(max-width: 600px) {
#Footer .content {padding: 6vw;}
}
@media (min-width: 601px) {
#Footer .content-blk {padding: 0 6vw;}
}
.copyright {font-size: 1rem; text-align: center; max-width: 44rem;}
.copyright :last-child {font-size: 0.75rem; line-height: 1.4rem;}
.copyright p {margin: 0;}

/* Document sections */

.site-section {position: relative; display: flex; align-items: center;}
.site-section > .content {width: 100%; height: 100%; max-width: 100vw;}

#MainTitle > .content {padding: 7.125rem 6vw 12vmax; text-align: center;}	/* 5.125rem fixed header height, 2rem padding-top */
@media (max-width: 439px) {
#MainTitle > .content {padding-top: 9.125rem;}
}
@media (min-width: 440px) and (max-width: 600px) {
#MainTitle > .content {padding-top: 11.125rem;}
}

#MainPhoto {min-height: 33vh; padding: 3vw; align-items: flex-start;}	/* section settings */

.img-blk img {display: block; height: 100%; width: 100%; position: relative; object-fit: contain; object-position: 50% 50%;}
#MainPhoto .img-blk img {object-fit: cover;}
@media (max-width: 600px) {
#MainPhoto .img-blk img {min-height: 90vh;}
}

.quote {font-family: "Didot", "Bodoni Moda", serif; font-weight: 500; color: #757263;}
.quote.large {font-size: 1.4rem; line-height: 1.3776em;}
.quote.normal {font-size: 1rem; line-height: 1.8em;}
.quote > p:first-of-type {margin-top: 9vw;}
.quote > p:last-of-type {font-size: 0.9rem; align-self: flex-end;}

#AboutMsTanaka > .content {padding: 6vw;}
#AboutMsTanaka .flex-row.content > div {flex: 0 0 96%;}			/* single column, no inset */
#AboutMsTanaka .flex-column.content-blk > * {margin-top: 0;}	/* margins don't collapse in a flex container */
#AboutMsTanaka .flex-column.content-blk.quote > p:first-of-type {margin-top: 11.25vw;}	/* quote vertical offset */

@media (max-width: 600px) {
#AboutMsTanaka .flex-row.content > div:first-child {order: 2; flex-basis: 90%; padding: 0 3%;}
#AboutMsTanaka .flex-row.content > div:first-child h2 {display: none;}
#AboutMsTanaka .flex-row.content > div:last-child h2 {display: block; margin-top: 0;}	/* margins don't collapse in a flex container */
}
@media (min-width: 601px) and (max-width: 1069px) {
#AboutMsTanaka > .content {padding: 3vw;}
#AboutMsTanaka .flex-row.content > div:first-child {flex: 0 0 48%; margin-right: 6%;}	/* quote column */
#AboutMsTanaka .flex-row.content > div:last-child {flex: 0 0 46%;}						/* text column */
#AboutMsTanaka .flex-row.content > div:last-child h2 {display: none;}
}
@media (min-width: 1070px) {
/* two column, inset 5vw */
#AboutMsTanaka > .content {padding: 3vw 8vw;}
#AboutMsTanaka .flex-row.content > div:first-child {flex: 0 0 38.6%; margin-right: 15%;}	/* quote column */
#AboutMsTanaka .flex-row.content > div:last-child {flex: 0 0 34%;}							/* text column */
#AboutMsTanaka .flex-row.content > div:last-child > p {padding-right: 0.375rem;}	/* approximate proxima-nova metrics */
#AboutMsTanaka .flex-row.content > div:last-child h2 {display: none;}
#AboutMsTanaka .flex-column.content-blk.quote > p {padding-right: 14%;}				/* approximate proxima-nova metrics */
}

.bg-accent {background-color: #EEEDEB;}
#StudyIkebana > .content {padding-top: 6vw; padding-bottom: 6vw;}
#StudyIkebana .bg-none .flex-column.content-blk > * {margin-top: 0;}	/* margins don't collapse in a flex container */
#StudyIkebana .bg-none .quote > p:first-of-type {margin-top: 6.25vw;}	/* quote text needs a vertical offset */
#StudyIkebana .flex-row.content > div.bg-accent p {text-align: center; margin-bottom: 0;}	/* margins don't collapse in a flex container */
#StudyIkebana .flex-row.content > div {flex: 0 0 88%; padding: 4%;}		/* single column, no inset */
/*
 * If padding is applied to all divs in single column mode it will appear that the bg-none
 * boxes have inset while the bg_accent boxes do not. Remove horizontal padding from bg-none boxes.
 * This will also align the Section title located in the 1st bg-none box with the section left margin.
 * The reclaimed padding is added back to the box width.
*/
@media (max-width: 600px) {
#StudyIkebana > .content {padding: 6vw;}
#StudyIkebana .flex-row.content > div {margin-bottom: 4vw;}					/* row gap */
#StudyIkebana .bg-none .quote > p:first-of-type {margin-top: 0.25vw;}		/* quote text needs a vertical offset */
#StudyIkebana .flex-row.content-blk > div:last-child {margin-bottom: 0;}	/* remove row gap from last row */
}
@media (min-width: 601px) and (max-width: 1069px) {			/* Note: content padding added as margin-left */
#StudyIkebana .flex-row.content > div {flex: 0 0 40%; padding: 3%; margin-left: 3%; margin-bottom: 3vw;}	/* two column, inset, row gap */
#StudyIkebana .flex-row.content > div:first-child {padding-left: 0; padding-right: 0; flex-basis: 46%;}
#StudyIkebana .bg-none .quote > p:first-of-type {margin-top: 10.25vw;}										/* quote text needs a vertical offset */
#StudyIkebana .flex-row.content > div:nth-last-child(-n + 2) {margin-bottom: 0;}							/* remove row gap from last row */
}

@media (min-width: 1070px) {

#StudyIkebana .flex-row.content > div {flex: 0 0 19%; margin-right: 1%; padding: 2%;}	/* four column, no inset */

/* Adjust right margin to compensate for the removal of padding-left below. Also, add left */
/* margin for the section gutter. Adding padding in the normal place did not work. Changing */
/* the flex-row to justify-content: center might work too. */
#StudyIkebana .flex-row.content > div:first-child {margin-right: 2%; margin-left: 3vw;}
#StudyIkebana .flex-row.content > div:last-child {margin-right: 0;}					/* Remove right margin from last box */
#StudyIkebana .flex-row.content > div.bg-none {padding-left: 0; padding-top: 0; flex-basis: 20%;}	/* Align section title with section left margin */
}

#WorkByMsTanaka .flex-column.content {padding: 6vw;}			/* single column, no inset */
#WorkByMsTanaka .img-blk {flex: 0 0 88%;}						/* single column, no inset */
@media (max-width: 600px) {
#WorkByMsTanaka .img-blk {margin-bottom: 6vw;}					/* single column */
#WorkByMsTanaka .flex-row.content-blk > .img-blk:last-child {margin-bottom: 0;}
#WorkByMsTanaka .flex-row.content-blk {justify-content: center;}	/* center images */	
#WorkByMsTanaka .flex-column.content {padding-bottom: 12vw;}
}
@media (min-width: 601px) and (max-width: 1069px) {
#WorkByMsTanaka .flex-column.content {padding: 3vw 3vw 6vw 3vw;}
#WorkByMsTanaka .img-blk {flex: 0 0 48%; margin-bottom: 4vw; max-height: 90vh;}				/* two column, no inset */
#WorkByMsTanaka .flex-row.content-blk > .img-blk:nth-child(2n + 1) {margin-right: 4%;}		/* column gap at 1st, 3rd, 5th, etc. */
#WorkByMsTanaka .flex-row.content-blk > .img-blk:nth-last-child(-n + 2) {margin-bottom: 0;}	/* remove row gap from last row */
}
@media (min-width: 1070px) {
#WorkByMsTanaka .flex-column.content {padding: 3vw 3vw 6vw 3vw;}
#WorkByMsTanaka .img-blk {flex: 0 0 24.25%; margin-right: 1%;}						/* four column, no inset, column gap */
#WorkByMsTanaka .flex-row.content-blk > .img-blk:nth-child(4n) {margin-right: 0;}	/* remove column gap after last column */
}