/*
 * Garrison Miyazaki — site-specific presentation layer
 *
 * This file is loaded after Miyazaki's main stylesheet. Keep custom site
 * decisions here so the upstream theme remains easy to compare and update.
 */

:root {
  --gm-black: #171717;
  --gm-white: #fff;
--gm-header-height: 125px;
  --gm-squiggle-speed: 1.4s;
  --gm-loader-speed: 2.4s;
  --gm-site-max-width: 1680px;
  --gm-reading-width: 750px;
  --gm-card-gap: 65px;
  --gm-image-radius: 0px;
  --gm-card-border-width: 4px;
  --gm-header-border-width: 2px;
}

/* Document and typography
--------------------------------------------- */

html,
body {
  margin: 0;
  min-height: 100%;
  padding: 0;
}

body {
  font-family: var(--gm-font-body);
  font-size: var(--gm-body-font-size, 17px);
  font-synthesis: none;
  font-style: var(--gm-body-font-style, inherit);
  font-weight: var(--gm-body-font-weight, inherit);
  letter-spacing: var(--gm-body-letter-spacing, 0);
  line-height: var(--gm-body-line-height, 1.5);
}

.error-404-content p,
figcaption,
.entry-content,
.entry-content figcaption,
.wp-caption-text {
  font-family: var(--gm-font-body);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.preview-title span,
.related-posts-title {
  font-family: var(--gm-font-heading);
}

.main-menu a,
.mobile-menu a,
.search-toggle,
button.toggle,
div.wpforms-container-full,
div.wpforms-container-full .wpforms-form,
div.wpforms-container-full .wpforms-form * {
  font-family: var(--gm-font-ui);
}


.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.preview-title,
.preview-title span,
.related-posts-title {
  font-style: var(--gm-heading-font-style, inherit);
  font-weight: var(--gm-heading-font-weight, inherit);
  letter-spacing: var(--gm-heading-letter-spacing, 0);
  line-height: var(--gm-heading-line-height, 1);
  text-decoration: var(--gm-heading-text-decoration, inherit);
  text-transform: var(--gm-heading-text-transform, inherit);
}

.main-menu,
.main-menu li,
.main-menu a,
.mobile-menu,
.mobile-menu li,
.mobile-menu a,
.search-toggle,
button.toggle {
  font-style: var(--gm-ui-font-style, inherit);
  font-weight: var(--gm-ui-font-weight, inherit);
  letter-spacing: var(--gm-nav-letter-spacing, 0);
  text-decoration: var(--gm-ui-text-decoration, inherit);
  text-transform: var(--gm-ui-text-transform, inherit);
}

.entry-content,
.entry-content p,
.entry-content li,
p {
  line-height: var(--gm-body-line-height, 1.5);
}

.error-404-content p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

h3 {
  font-size: var(--gm-content-heading-size, 20px);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-size: var(--gm-content-heading-size, 20px);
  margin: 0;
  padding: 12px 0 8px;
}

.entry-content h3 {
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content pre {
  margin-bottom: 0;
  padding-bottom: 20px;
}

.entry-content a:hover {
  text-decoration: line-through;
}

/* Header and navigation
--------------------------------------------- */

#site-header {
  background-color: var(--gm-white);
  border-bottom: var(--gm-header-border-width, 2px) dashed var(--gm-black);
  font-size: var(--gm-nav-font-size, 22px);
  left: 0;
  padding: 20px 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#site-content {
  padding-top: var(--gm-header-height);
}

.section-inner {
  max-width: var(--gm-site-max-width, 1680px);
}

.post-inner {
  max-width: var(--gm-reading-width, 750px);
}

.nav-toggle label {
  display: none;
}

button.toggle {
  font-size: var(--gm-mobile-nav-font-size, 25px);
}

#site-header ul.main-menu {
  padding-right: 45px;
  padding-top: 14px;
  position: absolute;
  right: 0;
}

.main-menu a {
  display: block;
  line-height: 1;
  padding-bottom: 8px;
}

.site-title a,
.header-menu a,
.search-toggle {
  border-bottom: 0;
  text-decoration: none;
  transition: none;
}

.main-menu li > a {
  position: relative;
}

.main-menu li > a::before {
  background-color: currentColor;
  bottom: 0;
  content: "";
  height: 9px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 0.16s ease;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' d='M0 4.5 C2.5 .5 7.5 .5 10 4.5 S17.5 8.5 20 4.5 C22.5 .5 27.5 .5 30 4.5 S37.5 8.5 40 4.5'/%3E%3C/svg%3E");
  -webkit-mask-position: 0 100%;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: 40px 9px;
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' d='M0 4.5 C2.5 .5 7.5 .5 10 4.5 S17.5 8.5 20 4.5 C22.5 .5 27.5 .5 30 4.5 S37.5 8.5 40 4.5'/%3E%3C/svg%3E");
  mask-position: 0 100%;
  mask-repeat: repeat-x;
  mask-size: 40px 9px;
}

.main-menu li > a:hover::before,
.header-menu .current-menu-item > a::before,
.header-menu .current-menu-ancestor > a::before {
  animation: gm-squiggle-flow var(--gm-squiggle-speed) linear infinite;
  opacity: 1;
}

.header-menu .current-menu-item > a,
.header-menu .current-menu-ancestor > a {
  background-image: none;
  color: var(--gm-accent);
}

.site-logo img {
  max-width: 270px;
}

/* Portfolio and post content
--------------------------------------------- */

.preview-title span {
  font-size: var(--gm-preview-title-size, 24px);
}

.preview-image {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .preview-image:hover img {
    animation: gm-marching-ants 12s linear infinite;
    background: linear-gradient(var(--gm-white), var(--gm-white)) padding-box,
      repeating-linear-gradient(
        -45deg,
        var(--gm-black) 0,
        var(--gm-black) 25%,
        transparent 0,
        transparent 50%
      ) 0 / 0.6em 0.6em;
    border: var(--gm-image-hover-border, 2px) solid transparent;
  }
}

@media (hover: none), (pointer: coarse) {
  .preview-image img,
  .home .preview:hover .preview-image img {
    animation: none;
    background: none;
    border: 0;
    transform: none;
  }
}


html.touch-input .preview-image img,
html.touch-input .home .preview:hover .preview-image img {
  animation: none;
  background: none;
  border: 0;
  transform: none;
}

@keyframes gm-squiggle-flow {
  from {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }

  to {
    -webkit-mask-position: -40px 100%;
    mask-position: -40px 100%;
  }
}

@keyframes gm-marching-ants {
  to {
    background-position: 100% 100%;
  }
}

.entry-header {
  display: none;
  margin: 0;
}

.entry-content {
  position: relative;
  width: 100%;
}

.featured-media img {
  display: none;
}

.post-inner {
  margin: 0 auto;
  max-width: var(--gm-reading-width, 750px);
}

.related-posts-title {
  font-size: 25px;
}

/* Footer
--------------------------------------------- */

#site-footer {
  border-top: var(--gm-footer-border-width, 2px) solid var(--gm-black);
  margin-top: var(--gm-footer-space-above-mobile, 50px);
  padding-top: var(--gm-footer-padding-top, 30px);
  position: relative;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  padding-bottom: var(--gm-footer-padding-bottom, 30px);
}

.footer-credits {
  margin: 0;
}

.footer-copyright,
ul.footer-nav {
  font-size: 18px;
}

.theme-credits {
  display: none;
}

/* WPForms
--------------------------------------------- */

body div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
body div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
body div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
  max-width: 100%;
}

body div.wpforms-container-full .wpforms-form button[type="submit"],
body .wpforms-container button[type="submit"] {
  background-color: var(--gm-black);
  border: 0;
  color: var(--gm-white);
  font-family: var(--gm-font-ui);
}

/* Responsive adjustments
--------------------------------------------- */

@media (min-width: 600px) {
  .preview-title {
    margin: 1.2rem 0 0;
  }

  .entry-content .wp-block-image {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 701px) {
  #site-footer {
    margin-top: var(--gm-footer-space-above-desktop, 70px);
  }
}

@media (max-width: 600px) {
  .site-logo img {
    max-width: 215px;
  }

  .header-menu a {
    font-size: var(--gm-mobile-nav-font-size, 25px);
  }

  .mobile-menu {
    font-size: var(--gm-mobile-nav-font-size, 25px);
  }

  .mobile-menu-wrapper .mobile-menu li {
    margin-bottom: 2rem;
  }


  .preview-title span,
  .home .preview-title span {
    font-size: var(--gm-mobile-preview-title-size, 22px);
  }

  .header-menu .current-menu-item > a {
    padding-bottom: 10px;
  }
}

/* Keep the fixed header below the WordPress admin toolbar. */
body.admin-bar #site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar #site-header {
    top: 46px;
  }
}

/* Keep the mobile menu card and its contents aligned between templates and scrollbar states. */
@media (max-width: 1019px) {
  .mobile-menu-wrapper {
    box-sizing: border-box;
    margin: 0;
    width: auto;
  }

  .mobile-menu-wrapper.active {
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    top: max(10px, env(safe-area-inset-top, 0px));
  }

  body.showing-modal #site-header {
    box-sizing: border-box;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    top: max(10px, env(safe-area-inset-top, 0px));
    width: auto;
  }

  body.showing-modal #site-header .section-inner,
  .mobile-menu-container.section-inner {
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
  }

  body.admin-bar.showing-modal #site-header,
  body.admin-bar .mobile-menu-wrapper.active {
    top: calc(32px + max(10px, env(safe-area-inset-top, 0px)));
  }
}

@media (max-width: 782px) {
  body.admin-bar.showing-modal #site-header,
  body.admin-bar .mobile-menu-wrapper.active {
    top: calc(46px + max(10px, env(safe-area-inset-top, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-menu li > a::before,
  .preview-image img,
  .squiggle-loader {
    animation: none;
  }
}


/* 0.5.0 homepage direction
--------------------------------------------- */

body {
  background: #fcfbf8;
  color: var(--gm-black);
}

#site-header {
  backdrop-filter: blur(14px);
  background-color: rgba(252, 251, 248, 0.94);
}


.home .posts .preview {
  background: #fff;
  border-top: var(--gm-card-border-width, 4px) solid var(--gm-black);
  padding-top: 1.2rem;
}

.home .posts .preview:nth-of-type(3n + 2) {
  border-top-color: var(--gm-accent);
}

.home .preview-image {
  border-radius: var(--gm-image-radius, 0);
  overflow: hidden;
}

.home .preview-image img {
  transition: transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home .preview:hover .preview-image img {
    transform: scale(var(--gm-image-hover-scale, 1.018));
  }
}

.home .preview-title span {
  font-size: var(--gm-preview-title-size, 24px);
  letter-spacing: var(--gm-heading-letter-spacing, 0);
  line-height: var(--gm-heading-line-height, 1);
}


.home .preview {
  margin-bottom: var(--gm-home-preview-gap-mobile, 40px);
}

.home .posts {
  margin-bottom: calc(0px - var(--gm-home-preview-gap-mobile, 40px));
}

@media (min-width: 600px) {
  .home .preview {
    margin-bottom: var(--gm-home-preview-gap-desktop, 65px);
  }

  .home .posts {
    margin-bottom: calc(0px - var(--gm-home-preview-gap-desktop, 65px));
  }
}

.preview-image img {
  border-radius: var(--gm-image-radius, 0);
}

/* Loader recreated from Garrison's own hand-drawn mark. */
.squiggle-loader {
  animation: gm-loader-spin var(--gm-loader-speed, 2.4s) linear infinite;
  position: relative;
  transform-origin: 50% 50%;
}

.squiggle-loader-mark {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.squiggle-loader::after {
  background: var(--gm-accent);
  border-radius: 50%;
  content: '';
  height: 0.72rem;
  position: absolute;
  right: 10%;
  top: 9%;
  width: 0.72rem;
}

.squiggle-loader.has-custom-loader::after {
  display: none;
}

#pagination.loading {
  height: auto;
  min-height: 3.8rem;
}

#pagination.loading .loading-icon {
  left: auto;
  padding-bottom: var(--gm-loader-space-below-mobile, 60px);
  position: static;
  top: auto;
  transform: none;
}

@media (min-width: 701px) {
  #pagination.loading .loading-icon {
    padding-bottom: var(--gm-loader-space-below-desktop, 40px);
  }
}

@keyframes gm-loader-spin {
  to {
    transform: rotate(360deg);
  }
}



/* Lean mobile typography controls. */
@media (max-width: 700px) {
  body,
  .entry-content,
  .entry-content p,
  .entry-content li,
  .wp-caption-text,
  figcaption {
    font-size: var(--gm-mobile-body-font-size, 16px);
  }

  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6 {
    font-size: var(--gm-mobile-content-heading-size, 19px);
  }
}