/*
Theme Name: Shiro Inoue
Description: Quiet journal theme with a red circle mark.
Version: 0.4.2
Requires at least: 6.4
Requires PHP: 7.3
Author: Audrey Cruz
License: GPL-2.0-or-later
Text Domain: shiro-inoue
*/

.wp-site-blocks>* {
  margin-block-start: 0 !important;
}

.wp-site-blocks main>*:first-child {
  margin-block-start: 0;
}

.jr-set>li,
.jr-run>li {
  margin: 0 !important;
}

.jr-pl {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-start;
}

.jr-pl>* {
  margin-block-start: 0 !important;
}

.jr-pl-posts {
  flex: 999 1 620px;
  min-width: 0;
}

.jr-pl-posts>* {
  margin-block-start: 0;
}

.jr-pl-posts>.jr-text,
.jr-pl-posts>.jr-who,
.jr-pl-posts>.jr-hook {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.jr-pl>.jr-secondary {
  flex: 1 1 290px;
  max-width: 100%;
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (max-width:1000px) {
  .jr-pl>.jr-secondary {
    padding-top: 0;
  }
}

:root {
  --sh-ink: #1B1B1B;
  --sh-ver: #E0482F;
  --sh-ver-t: #C13A22;
  --sh-indigo: #2E4A9E;
  --sh-mustard: #D9A21B;
  --sh-matcha: #6B8F3C;
  --sh-blush: #FDEBE5;
  --sh-cream: #FFF3D1;
  --sh-line: #E2E2E2;
  --sh-muted: #4A4A4A;
  --sh-d: var(--wp--preset--font-family--display);
}

body {
  margin: 0;
  background: #fff;
  color: var(--sh-ink);
}

.jr-contain {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.jr-jmp {
  position: absolute;
  left: -9999px;
}

.jr-jmp:focus {
  left: 16px;
  top: 16px;
  background: #fff;
  padding: 8px 12px;
  z-index: 99;
}

.jr-nav-wrap-ct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0;
}

.jr-emblem {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--sh-ink);
}

.jr-emblem span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.jr-emblem b {
  font-family: var(--sh-d);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .12em;
}

.jr-emblem small {
  font-size: 12px;
  color: #5C5C5C;
  letter-spacing: .04em;
}

.jr-mn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-size: 14px;
  letter-spacing: .04em;
}

.jr-mn a {
  color: var(--sh-ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.jr-mn a:hover {
  border-bottom-color: var(--sh-ver);
}

.jr-link-btn {
  display: inline-block;
  background: var(--sh-ver);
  color: #fff !important;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.3;
}

.jr-link-btn:hover {
  background: var(--sh-ver-t);
}

.jr-link-btn-indigo {
  background: var(--sh-indigo);
}

.jr-link-btn-indigo:hover {
  background: #223A80;
}

.jr-link {
  display: inline-flex;
  gap: 10px;
  color: var(--sh-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--sh-ver);
  padding-bottom: 6px;
}

.jr-heroband {
  background: var(--sh-blush);
}

.jr-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-end;
  padding: 56px 0 72px;
}

.jr-showcase-txt {
  flex: 1 1 520px;
  min-width: 0;
}

.jr-showcase-art {
  flex: 1 1 380px;
  min-width: 0;
}

.jr-showcase-art svg {
  width: 100%;
  height: auto;
  display: block;
}

.jr-kicker {
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--sh-ver-t);
}

.jr-showcase h1 {
  margin: 0 0 26px;
  font-size: clamp(38px,5.5vw,62px);
  line-height: 1.12;
}

.jr-lead {
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.75;
  color: var(--sh-muted);
  max-width: 500px;
}

.jr-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}

.jr-cats a {
  display: block;
  padding: 22px 24px;
  border-top: 5px solid;
  color: var(--sh-ink);
  text-decoration: none;
  font-family: var(--sh-d);
  font-weight: 700;
  font-size: 18px;
}

.jr-cats a:hover {
  background: #FAFAFA;
}

.jr-c1 {
  border-color: var(--sh-indigo) !important;
}

.jr-c2 {
  border-color: var(--sh-mustard) !important;
}

.jr-c3 {
  border-color: var(--sh-matcha) !important;
}

.jr-c4 {
  border-color: var(--sh-ver) !important;
}

.jr-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 56px 0 72px;
}

.jr-posts {
  flex: 999 1 560px;
  min-width: 0;
}

.jr-secondary {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.jr-secondary>* {
  margin: 0 !important;
}

.jr-h2 {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sh-ink);
  font-size: 26px;
  letter-spacing: .04em;
}

.jr-run {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jr-item2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
  padding: 28px 0;
  border-bottom: 1px solid var(--sh-line);
}

.jr-item2>* {
  margin-block: 0 !important;
}

.jr-item2 .taxonomy-category {
  flex: 0 0 150px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 6px;
}

.jr-item2 .taxonomy-category a {
  color: var(--sh-indigo);
  text-decoration: none;
}

.jr-run>li:nth-child(4n+2) .taxonomy-category a {
  color: var(--sh-ver-t);
}

.jr-run>li:nth-child(4n+3) .taxonomy-category a {
  color: #4F6F2A;
}

.jr-run>li:nth-child(4n+4) .taxonomy-category a {
  color: #8A6410;
}

.jr-item2-bz {
  flex: 1 1 420px;
  min-width: 0;
}

.jr-item2-bz>*+* {
  margin-block-start: 8px;
}

.jr-item2 .wp-block-post-title {
  font-family: var(--sh-d);
  font-size: 24px;
  line-height: 1.35;
}

.jr-item2 .wp-block-post-title a {
  color: var(--sh-ink);
  text-decoration: none;
}

.jr-item2 .wp-block-post-title a:hover {
  color: var(--sh-ver-t);
}

.jr-item2 .wp-block-post-excerpt {
  font-size: 16px;
  line-height: 1.75;
  color: var(--sh-muted);
}

.wp-block-query-pagination {
  margin-top: 36px;
  gap: 10px;
  font-size: 15px;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--sh-ink);
  color: var(--sh-ink);
  text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
  background: var(--sh-ink);
  color: #fff;
}

.jr-slab {
  padding: 30px;
  background: var(--sh-cream);
}

.jr-slab h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.jr-slab p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sh-muted);
}

.jr-slab-indigo {
  background: var(--sh-indigo);
}

.jr-slab-indigo h2 {
  color: #fff;
}

.jr-slab-indigo p {
  color: #DCE3F5;
}

.jr-ttl {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sh-ink);
  font-size: 17px !important;
  letter-spacing: .06em;
}

.jr-bucket {
  background: #fff;
  padding: 0 !important;
}

.jr-bucket ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jr-bucket li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--sh-line);
  font-size: 15px;
  line-height: 1.5;
}

.jr-bucket li a {
  color: var(--sh-ink);
  text-decoration: none;
}

.jr-bucket li a:hover {
  color: var(--sh-ver-t);
}

.jr-bucket .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.jr-bucket .wp-block-tag-cloud a {
  font-size: 13px !important;
  color: var(--sh-ink);
  border: 1px solid var(--sh-ink);
  padding: 5px 10px;
  text-decoration: none;
}

.jr-bucket .wp-block-tag-cloud a:hover {
  background: var(--sh-ver);
  border-color: var(--sh-ver);
  color: #fff;
}

.jr-shelf2 .jr-zone {
  padding-top: 0;
}

.jr-shelf-title-area {
  padding: 48px 0 32px;
}

.jr-shelf-title-area h1 {
  margin: 0;
}

.jr-text {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 24px;
  box-sizing: border-box;
}

.jr-text .taxonomy-category {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}

.jr-text .taxonomy-category a {
  color: var(--sh-indigo);
  text-decoration: none;
}

.jr-text h1.wp-block-post-title {
  margin: 12px 0 18px;
  font-size: clamp(32px,5vw,46px);
  line-height: 1.2;
}

.jr-line2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--sh-muted);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sh-line);
}

.jr-line2 .wp-block-post-author__avatar img {
  border-radius: 0;
}

.jr-line2 .wp-block-post-author__byline {
  font-size: 11px;
}

.jr-text .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
}

.jr-textflow {
  font-size: 18px;
  line-height: 1.85;
}

.jr-textflow h2 {
  margin-top: 2em;
  font-size: clamp(24px,3.5vw,30px);
}

.jr-textflow h3 {
  margin-top: 1.6em;
}

.jr-textflow img {
  max-width: 100%;
  height: auto;
}

.jr-textflow table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  display: block;
  overflow-x: auto;
}

.jr-textflow th,
.jr-textflow td {
  border-bottom: 1px solid var(--sh-line);
  padding: 10px 12px;
  text-align: left;
}

.jr-textflow th {
  border-bottom: 2px solid var(--sh-ink);
}

.jr-textflow blockquote {
  border-left: 4px solid var(--sh-ver);
  margin: 1.5em 0;
  padding: 4px 0 4px 22px;
  color: var(--sh-muted);
}

.jr-textflow a {
  text-underline-offset: 3px;
}

.jr-who {
  max-width: 780px;
  margin: 36px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}

.jr-who-ct {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
  border-top: 2px solid var(--sh-ink);
  border-bottom: 2px solid var(--sh-ink);
  padding: 28px 0;
}

.jr-who .wp-block-avatar img {
  display: block;
}

.jr-who-te {
  flex: 1 1 300px;
  min-width: 0;
}

.jr-label2 {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sh-ver-t);
  margin: 0 0 6px;
  text-transform: uppercase;
}

.jr-who .wp-block-post-author-name {
  font-family: var(--sh-d);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
}

.jr-who .wp-block-post-author-name a {
  color: var(--sh-ink);
  text-decoration: none;
}

.jr-who .wp-block-post-author-biography {
  color: var(--sh-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.jr-hook {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  box-sizing: border-box;
}

.jr-hook .jr-slab {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.jr-hook .jr-slab p {
  margin: 0;
}

.jr-paper-title-area {
  background: var(--sh-blush);
}

.jr-paper-title-area .jr-contain {
  padding-top: 56px;
  padding-bottom: 56px;
}

.jr-paper-title-area h1 {
  margin: 0;
}

.jr-paper-body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  box-sizing: border-box;
}

.jr-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.jr-lanes>.jr-posts {
  flex: 999 1 480px;
}

.jr-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  margin: 28px 0;
}

.jr-pillars div {
  padding: 22px;
  border-top: 4px solid;
}

.jr-pillars b {
  display: block;
  font-family: var(--sh-d);
  font-size: 19px;
  margin-bottom: 6px;
}

.jr-team {
  background: var(--sh-cream);
  padding: 28px;
}

.jr-team img {
  width: 88px;
  height: 88px;
  display: block;
  margin-bottom: 14px;
}

.jr-team .nm {
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 4px;
}

.jr-team .rl {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--sh-ver-t);
  margin: 0 0 10px;
}

.jr-team p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sh-muted);
  margin: 0;
}

.jr-charter section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding: 26px 0;
  border-bottom: 1px solid var(--sh-line);
}

.jr-charter h2 {
  flex: 0 0 200px;
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 13px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
}

.jr-charter p {
  flex: 1 1 440px;
  margin: 0;
  line-height: 1.8;
  color: #3A3A3A;
}

.jr-charter section:nth-child(1) h2,
.jr-charter section:nth-child(5) h2 {
  color: var(--sh-indigo);
}

.jr-charter section:nth-child(2) h2 {
  color: var(--sh-ver-t);
}

.jr-charter section:nth-child(3) h2 {
  color: #8A6410;
}

.jr-charter section:nth-child(4) h2 {
  color: #4F6F2A;
}

.jr-charter .jr-charter-c {
  background: var(--sh-blush);
  padding: 30px;
  margin-top: 32px;
  border: 0;
  display: block;
}

.jr-charter .jr-charter-c h2 {
  color: var(--sh-ver-t);
  margin-bottom: 8px;
}

.jr-legal {
  border-top: 2px solid var(--sh-ink);
}

.jr-legal-ct {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  padding: 40px 0;
}

.jr-legal-pitch2 {
  flex: 1 1 360px;
  min-width: 0;
}

.jr-legal-pitch2 b {
  display: block;
  font-family: var(--sh-d);
  font-weight: 900;
  letter-spacing: .12em;
  margin-bottom: 8px;
}

.jr-legal-pitch2 p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sh-muted);
}

.jr-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 14px;
  align-content: flex-start;
}

.jr-cr {
  margin: 0;
  padding: 0 24px 28px;
  text-align: center;
  font-size: 13px;
  color: #5C5C5C;
}

.jr-404 {
  padding: 80px 0 100px;
}

.wpcf7-form {
  max-width: 560px;
}

.wpcf7-form p {
  margin: 0 0 22px;
}

.wpcf7-form label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sh-muted);
}

.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form select,
.wpcf7-form textarea {
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--sh-ink);
  background: transparent;
  font: 17px var(--wp--preset--font-family--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sh-ink);
}

.wpcf7-form input[type=submit] {
  padding: 12px 34px;
  border: 1px solid var(--sh-ink);
  background: var(--sh-ink);
  color: #fff;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.wpcf7-form input[type=submit]:hover {
  background: var(--sh-ver);
  border-color: var(--sh-ver);
}

