@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400&display=swap');

@font-face {
    font-family: 'Sans Regular';
    src: url('fonts/AUTHENTICSans-90.woff2') format('woff2'),
         url('fonts/AUTHENTICSans-90.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Sans Bold';
    src: url('fonts/AUTHENTICSans-130.woff2') format('woff2'),
         url('fonts/AUTHENTICSans-130.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Sans Bold Condensed';
    src: url('fonts/AUTHENTICSans-condensed-150.woff2') format('woff2'),
         url('fonts/AUTHENTICSans-condensed-150.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Faune';
    src: url('fonts/Faune-Text_Italic.woff2') format('woff2'),
         url('fonts/Faune-Text_Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

:root {
	    
    --desktop-page-margin: 5rem;
	--mobile-page-margin: 1.5rem;

    --typo-p-space-after: 2.5rem;
    --typo-indent: 4rem;

    --typo-kana-00-left: 4.5%;
    --typo-kana-00-top: 7.5%;
    --typo-kana-00-transform: rotate(-35deg);

    --typo-kana-01-left: 20.5%;
    --typo-kana-01-top: 56%;
    --typo-kana-01-transform: rotate(-35deg);

    --typo-kana-02-left: 44.5%;
    --typo-kana-02-top: 21.5%;
    --typo-kana-02-transform: rotate(-35deg);

    --typo-kana-03-left: 61%;
    --typo-kana-03-top: 70%;
    --typo-kana-03-transform: rotate(-35deg);

    --typo-kana-04-left: 87%;
    --typo-kana-04-top: 36.5%;
    --typo-kana-04-transform: rotate(-35deg);

    --typo-font-size-large: 2rem;
    --typo-font-size-xx-large: 2.5rem;

	--color-cover: #FFFFBC;
	--color-page: #FFFFBC;
    --color-post: #FFFFBC;
    	
    --color-text: #222222;
    --color-text-link: #222222;
    --color-accent: #222222;

    --image-scale: .75;
    --image-posX: 0;
    --image-posY: 0;

    --color-error: #FF3333;

    --layout-maxwidth: 54rem; 

    /* wordpress overwrites */
    
    --wp--preset--font-size--small: .75em;
    --wp--preset--font-size--medium: 1.25em;
    --wp--preset--font-size--large: 1.5em;
    --wp--preset--font-size--x-large: 1.75em;

}



/* TYPO */



body {
    font-size: 1rem;
}
#page {
    /* text-rendering: geometricPrecision; */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
#page {
    font-family: 'Sans Regular', sans-serif;
}
h1,
h2,
h3,
h4 {
    font-weight: normal;
}
h1,
h2 {
    font-size: var(--typo-font-size-xx-large);
    font-family: 'Faune', serif;
}
article > h2,
.project-link h2 {
    font-size: var(--typo-font-size-large);
}
main article p {
    font-size: 1.05em;
}
article p.post-date {
    font-size: .8em;
}
#masthead .main-navigation,
#colophon .footer-navigation,
.add-text-boldspecial {
    font-family: 'Sans Bold', serif;
    text-transform: lowercase;
    font-size: .95rem;
}
#masthead .site-title {
    font-family: "Zen Kaku Gothic Antique", sans-serif, system-ui;
    font-weight: 500;
    font-style: normal;
    font-size: 1.65em;
}
main article p {
    line-height: 1.7;
}
main .error-404 p {
    text-align: center;
    font-size: 5rem;
}
footer#colophon .bft-form-group.button .bft-button span {
    text-transform: lowercase;
    font-weight: normal;
}
.rights p {
    font-size: var(--wp--preset--font-size--small);
}



/* COLORS */



body {
    color: var(--color-text);
    background-color: var(--color-page);
}
a,
a:visited {
    color: var(--color-text);
}
.site-title a,
.site-title a:visited,
#site-navigation a,
.footer-navigation a {
    color: var(--color-accent);
}
#primary .entry-content,
#site-navigation .current-menu-item a,
.current-menu-item a {
    color: var(--color-text);
}
.entry-meta a,
body.single .entry-footer a {
    color: var(--color-text-link);
    border-bottom-color: var(--color-text-link);
}
#secondary {
    background-color: var(--color-cover);
}
footer#colophon .bft-form-group.button button .circle {
    background-color: var(--color-text);
}
input[type="email"] {
    border-color: var(--color-text);
    background-color: transparent;
}
footer#colophon .bft-form-group.button .bft-button {
    border-color: var(--color-text);
    background-color: var(--color-page);
}
footer#colophon form.bft-front-form.has-error .error-message {
    color: var(--color-error);
}
footer#colophon form.bft-front-form.has-confirmation .confirmation-message {
    background-color: var(--color-page);
}



/* MARGINS, PADDINGS, GAPS */



html {
	margin-top: 0 !important;
}
#masthead,
#page main,
#page footer,
.rights {
    margin: 0 auto;
}
#page {
    margin: 0 var(--desktop-page-margin);
}
h1,
ul,
ol,
body,
.post,
.page,
#masthead p,
.page-content,
.entry-content,
.entry-summary,
.site-title,
#site-navigation,
.page-content,
.entry-content,
.entry-summary,
figure,
#secondary .widget_simpleimage,
#secondary .widget_simpleimage p,
footer#colophon form.bft-front-form .confirmation-message p {
    margin: 0;
}
.main-navigation ul li a,
.footer-navigation ul li a {
    margin-left: 2.5rem;
}
.main-navigation ul li:first-child a,
.footer-navigation ul li:first-child a {
    margin-left: 0;
}
#page main h1:first-child,
#page main h2:first-child,
#primary .entry-content p:first-child,
#primary > article > div > p:first-child,
footer#colophon form.bft-front-form.bft-vertical .error-message p {
    margin-top: 0;
}
#page main p:last-child,
#page main figure:last-child {
    margin-bottom: 0;
}
#page main h1,
#page main h2 {
    margin-bottom: .3em;
}
.project-link div h2 {
    margin: 0 0 2rem !important;
}
.project-link div p {
    margin: 0 !important;
}
main article {
    margin: 16vh 0 !important;
}
.info main article {
    margin: 16vh 0 4vh !important;
}
main article p,
main article figure,
.wp-block-image :where(figcaption) {
    margin: var(--typo-p-space-after) 0;
}
.wp-block-columns figure {
    margin: 0;
}
article p.post-date {
    margin-bottom: calc(var(--typo-p-space-after) * .65);
}
main article p.has-small-font-size {
    margin: calc(var(--typo-p-space-after) * .5) 0;
}
main .error-404 p {
    margin: 22vh 0 !important;
}
.wp-block-image :where(figcaption) {
    margin-top: calc(var(--typo-p-space-after) / 3);
}
.entry-content p {
    margin-bottom: var(--typo-p-space-after);   
}
/* #secondary .widget_simpleimage {
    padding: var(--desktop-page-margin);
} */
#secondary .widget_simpleimage img {
    transform-origin: 50% 50%;
    transform: scale(var(--image-scale)) translate(var(--image-posX), var(--image-posY));
}
footer#colophon {
    margin-top: -1rem; /* visual correction */
}
footer#colophon form.bft-front-form.bft-vertical.bft-inline-label label {
    margin: 0 0 calc(var(--typo-p-space-after) / 2) 0;
}
footer#colophon form.bft-inline-label .bft-form-group {
    margin: 0;
}
footer#colophon .bft-form-group.button .bft-button {
    margin: 0;
    padding: 0;
}
.rights {
    margin-top: 3.5rem;
    margin-bottom: calc(var(--desktop-page-margin) * 1.05)
}
input[type="email"] {
    padding: 1.25rem 1.1rem 1.35rem; /* vertical alignment */
}
.confirmation-message p {
    padding: 1rem 1.1rem;
}
.confirmation-message .button span {
    margin-bottom: -1px;
}



/* LAYOUT */



html {
    min-width: 320px; /* iphone SE */
}
a {
    text-underline-offset: 40%;
}
nav a,
article > h2 a,
article a.project-link,
article p.post-date a,
.footer-navigation a {
    text-decoration: none;
}
#page header,
#page main,
#page footer,
.rights {
    max-width: var(--layout-maxwidth);
}
#wpadminbar { /* remove top admin bar */
    display: none;
}
body.single .entry-meta a {
    border-bottom: unset;
}
#primary .post-navigation {
    display: none;
}
#masthead,
footer#colophon,
#masthead .site-branding {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#masthead .site-branding {
    flex: 1;
}
#masthead {
    height: 15.5em;
}
.contact header > h1 {
    display: none;
}
footer#colophon {
    height: 0;
}
.info footer#colophon {
    height: 16em;
}
/* main head, navigation */
#masthead,
footer#colophon {
    justify-content: space-between;
}
#masthead .main-navigation {
    width: unset;
}
#masthead .site-branding,
#masthead .main-navigation,
.menu-main-menu-container {
    height: 100%;
}
/*  ----> site branding */
#masthead .site-branding .site-title {
    /* position: relative; */
    position: absolute;
    left: 1rem;
    top: 2rem;
    aspect-ratio: 1.77 / 1;
    width: auto;
    height: 11.5rem; /* keep in absolute */
}
#masthead .site-branding .site-title a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
#masthead .site-branding .site-title a span {
    position: absolute;
}
#masthead .site-branding .site-title a span.hide {
    visibility: hidden;
}
#masthead .site-branding .site-title a span.kana_00 {
    left: var(--typo-kana-00-left);
    top: var(--typo-kana-00-top);
    transform: var(--typo-kana-00-transform);
}
#masthead .site-branding .site-title a span.kana_01 {
    left: var(--typo-kana-01-left);
    top: var(--typo-kana-01-top);
    transform: var(--typo-kana-01-transform);
}
#masthead .site-branding .site-title a span.kana_02 {
    left: var(--typo-kana-02-left);
    top: var(--typo-kana-02-top);
    transform: var(--typo-kana-02-transform);
}
#masthead .site-branding .site-title a span.kana_03 {
    left: var(--typo-kana-03-left);
    top: var(--typo-kana-03-top);
    transform: var(--typo-kana-03-transform);
}
#masthead .site-branding .site-title a span.kana_04 {
    left: var(--typo-kana-04-left);
    top: var(--typo-kana-04-top);
    transform: var(--typo-kana-04-transform);
}
#masthead .site-branding .site-description {
    display: none;
}
/* ----> navigation */
.footer-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation ul {
    position: relative;
    top: 100%;
    transform: translateY(-100%);
}
.main-navigation ul,
.main-navigation ul li,
.footer-navigation ul,
.footer-navigation ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 4rem;
}
.main-navigation ul li a,
.footer-navigation ul li a {
    height: 100%;
    width: 100%;
}
.footer-navigation ul li a {
    transform: translateY(68%);
}
.current-menu-item a {
    transform: translateY(70%);
}
article footer,
article footer .cat-links,
#comments {
	display: none;
}
.entry-meta a,
.entry-footer a {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/* projects list items */
.project-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
}
.project-link figure {
    max-width: 18rem;
    min-width: 13rem;
    flex: 0 0 16vw; /* don't grow / shrink */
    margin: 0;
}
.project-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.traveling-matsutake .project-link div:last-child img {
    transform: scale(1.15);
}
/* footer */
footer#colophon > .form-wrapper {
    flex: 1;
}
footer#colophon form.bft-front-form.bft-vertical {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    width: 45%;
}
footer#colophon form.bft-front-form.bft-vertical .error-message {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
}
footer#colophon form.bft-front-form.has-error .error-message {
    visibility: visible;
}
footer#colophon form.bft-front-form .confirmation-message {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: -10;
}
footer#colophon form.bft-front-form.has-confirmation .confirmation-message {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    z-index: 10;
}
footer#colophon .bft-form-group.name {
    position: absolute;
    left: -9999px; 
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}
footer#colophon form.bft-front-form.has-confirmation .bft-form-group.email,
footer#colophon form.bft-front-form.has-confirmation .bft-form-group.button {
    visibility: hidden;
}
footer#colophon form.bft-inline-label .bft-form-group.email {
    width: unset;
    flex: 1;
}
footer#colophon form.bft-inline-label .bft-form-group.button {
    width: unset;
}
footer#colophon form.bft-front-form.bft-vertical.bft-inline-label label {
    width: unset;
    display: block;
    text-align: left;
}
input[type="email"],
footer#colophon .bft-form-group.button .bft-button,
.confirmation-message p,
.confirmation-message .button {
    height: 3rem;
}
input[type="email"] {
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
}
footer#colophon form.bft-vertical.bft-inline-label input[type="email"] {
    width: 100% !important;
}
input[type="email"]:focus {
    outline: none;
}
footer#colophon .bft-form-group.button .bft-button,
.confirmation-message .button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    aspect-ratio: 2.25 / 1;
}
footer#colophon .bft-form-group.button .bft-button {
    border-left: none;
}
footer#colophon .bft-form-group.button .bft-button:hover,
.confirmation-message .button:hover {
    cursor: pointer;
}
footer#colophon .bft-form-group.button .bft-button span {
    position: relative;
    top: -1px;
}
input[type="email"],
footer#colophon .bft-form-group.button .bft-button span {
    vertical-align: text-top; /* align with button */
}
#page.short .rights {
    position: absolute;
    bottom: 0;
    width: calc(100% - (var(--desktop-page-margin) * 2));
    left: 0;
    max-width: unset;
    margin: 0 var(--desktop-page-margin);
    p {
        max-width: var(--layout-maxwidth);
        margin: 3.5rem auto calc(var(--desktop-page-margin) * 1.05);
    }
}



/* WORDPRESS HACKS */



/* typo */
.add-text-pretty {
    text-wrap: balance;
}
.add-text-indent {
    text-indent: var(--typo-indent);
}
.add-text-boldspecial {
    text-transform: none;
    font-size: 1.5em;
}
.add-indent-left-single {
    margin-left: 4rem;
}
.add-indent-left-double {
    margin-left: 8rem;
}
/* margins */
.add-nomargin-top {
    margin-top: 0;
}
.add-nomargin-bottom {
    margin-bottom: 0;
}
/* layout */
main article figure {
    display: block;
    clear: both;
}
.add-layout-custom-ad {
    transform: translateX(5rem);
}
.add-layout-custom-mushroom {
    position: relative;
    height: 0;
}
.add-layout-custom-mushroom img {
    position: absolute;
    top: 0;
    left: -6rem;
    margin-top: 8.25rem;
}



/* COVER IMAGE WITH SIDEBAR WIDGET */



body.hide {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100dvh;
    background-color: var(--color-cover);
}
#secondary {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}
body.hide #secondary { /* show sidebar on load */
    display: unset;   
}
#secondary .widget_simpleimage,
#secondary .widget_simpleimage p {
    width: 100%;
    height: 100%;
}
#secondary .widget_simpleimage p img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#secondary .widget_simpleimage p img:hover {
    cursor: pointer;
}
#secondary .widget_simpleimage p:last-child { /* hide color text field */
    position: absolute;
    visibility: hidden;
    z-index: -50;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
}