@import url("/assets/kokoro-themes.css?v=1");

:root{--ivory:#faf9f4;--cream:#f2f0e7;--ink:#29463a;--forest:#355b46;--leaf:#6f9280;--gold:#b49b6d;--line:#dce1d5;--muted:#697c70;--paper:#fffefa;--font-heading:"Shippori Mincho",serif;--font-body:"Noto Sans JP",sans-serif;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--ivory);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:2;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #779a84;outline-offset:3px}button{font:inherit;cursor:pointer}figure{margin:0}p{margin:0 0 1.15em}.site-container{width:min(1130px,calc(100% - 48px));margin-inline:auto}.site-header{position:relative;z-index:5;border-bottom:1px solid #e1e5dc;background:rgba(255,254,248,.97)}.header-wrap{min-height:91px;display:flex;align-items:center;justify-content:space-between;gap:22px}.logo{display:flex;align-items:center;gap:12px;white-space:nowrap}.logo-mark{width:38px;height:38px;display:grid;place-items:center}.logo b{display:block;font:600 clamp(16px,1.65vw,21px)/1.5 var(--font-heading);letter-spacing:.025em}.logo small{display:block;color:#879488;font:600 11px/1.4 Georgia,serif;letter-spacing:.08em}.menu{display:flex;align-items:center;flex-wrap:wrap;justify-content:end;gap:clamp(10px,2vw,26px)}.menu a{font-size:12px;font-weight:600;color:#557361}.menu a.active,.menu a:hover{color:#263e2f;text-decoration:underline;text-underline-offset:6px}.menu .menu-cta{background:var(--forest);color:#fff;border-radius:30px;padding:9px 17px;text-decoration:none}.bread{margin:21px 0 24px;display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:#819083;font-size:11px}.bread a{text-decoration:underline;text-decoration-color:transparent}.bread a:hover{text-decoration-color:currentColor}.intro-hero{position:relative;padding:65px clamp(24px,5vw,66px) 76px;border-radius:22px;background:radial-gradient(ellipse 45% 60% at 95% 24%,rgba(243,224,181,.67),transparent 80%),radial-gradient(ellipse 40% 60% at 75% 85%,rgba(152,187,155,.37),transparent 80%),linear-gradient(135deg,#fcfbf6,#f0f1e8);overflow:hidden;border:1px solid #e4e5d9}.intro-hero h1{position:relative;z-index:2;max-width:810px;font:500 clamp(29px,4.25vw,50px)/1.65 var(--font-heading);letter-spacing:.025em;margin:15px 0 22px}.intro-hero .intro-copy{max-width:710px;font-size:14px;line-height:2.25;color:#627969;margin:0;position:relative;z-index:2}.microtitle{font:600 12px/1.5 Georgia,serif;letter-spacing:.24em;color:#a68c62;text-transform:uppercase}.hero-puzzles{position:absolute;right:-60px;top:0;width:min(38%,340px);opacity:.24;transform:rotate(-11deg);pointer-events:none}.hero-puzzles svg{width:100%;height:auto}.intro-hero .hero-pieces-phrase{position:relative;z-index:2;display:inline-flex;gap:12px;align-items:center;padding:8px 14px;margin-top:23px;color:#547563;font-size:11px;border:1px solid #cbd9ca;background:#ffffff92;border-radius:30px}.copy-divider{height:1px;background:linear-gradient(90deg,transparent,#bdad8f,transparent);margin:74px auto 45px;width:90px}.content-section{padding:56px 0 25px}.section-kicker{font:600 12px/1.2 Georgia,serif;letter-spacing:.19em;color:var(--gold);margin:0 0 10px}.section-title{font:500 clamp(24px,2.6vw,34px)/1.65 var(--font-heading);margin:0 0 16px;color:#2f513c}.section-desc{color:var(--muted);font-size:13px;line-height:2.05;max-width:820px}.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:28px}.info-card{display:flex;flex-direction:column;position:relative;border:1px solid #dbe1d6;border-radius:17px;background:linear-gradient(150deg,#fffefa,#f6f7f0);padding:24px 24px 22px;min-width:0;box-shadow:0 12px 35px #2e493b0b;transition:transform .25s,box-shadow .25s,border-color .25s}.info-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px #2e493b18;border-color:#a8bba9}.card-symbol{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:12px}.card-symbol svg{height:47px;width:47px;flex-shrink:0}.card-symbol span{font:600 10px/1.3 Georgia,serif;color:#9da994;letter-spacing:.14em}.info-card h3{font:500 20px/1.6 var(--font-heading);margin:0 0 9px;color:var(--ink)}.info-card p{font-size:12px;color:#6e7f72;line-height:1.95;flex-grow:1;margin-bottom:20px}.info-card .read-more{font-size:11px;font-weight:700;color:#4f7660}.featured-card{grid-column:span 2;display:grid;grid-template-columns:1.2fr .7fr;align-items:center;gap:20px;background:radial-gradient(circle at 80% 50%,#dfebdb,#f8f7ec 65%)}.featured-card .featured-puzzle{display:grid;grid-template-columns:repeat(3,1fr);transform:rotate(-7deg);opacity:.86}.featured-puzzle .shape{aspect-ratio:1;display:grid;place-items:center;margin:-3px}.featured-puzzle svg{width:100%;height:auto}.featured-card h3{font-size:26px}.category-group{padding:35px 0 16px;border-top:1px solid #e1e6dd}.category-heading{display:flex;align-items:start;gap:14px;margin-bottom:17px}.category-heading .badge{width:45px;height:45px;border-radius:50%;background:#eff3ed;display:grid;place-items:center;font:600 18px Georgia,serif;color:#6c8c74}.category-heading h2{font:500 25px/1.6 var(--font-heading);margin:0}.category-heading p{font-size:12px;color:#78907b;margin:2px 0 0}.puzzle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.puzzle-link{position:relative;display:flex;gap:14px;align-items:flex-start;padding:19px 20px;border-radius:15px;background:#fffefa;border:1px solid #dee4d7;min-height:133px;transition:transform .25s,box-shadow .25s}.puzzle-link:hover{transform:translateY(-4px);box-shadow:0 15px 30px #39514012}.puzzle-link .piece{flex-shrink:0;width:42px;height:42px}.puzzle-link b{font:500 17px/1.5 var(--font-heading)}.puzzle-link small{display:block;color:#718576;font-size:11px;line-height:1.8;margin-top:5px}.puzzle-link .puzzle-number{position:absolute;right:15px;top:12px;font:600 10px Georgia,serif;color:#adb8a9}.prose-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:49px;margin-top:52px;align-items:start}.prose{min-width:0;font-size:14px;color:#445b4a;line-height:2.26}.prose h2{font:500 27px/1.7 var(--font-heading);color:#2f523e;margin:55px 0 20px}.prose h2:first-child{margin-top:0}.prose h3{font:600 17px/1.7 var(--font-heading);margin:30px 0 11px;color:#385c46}.prose p{margin-bottom:20px}.prose ul,.prose ol{padding-left:24px}.prose li{margin:9px 0}.prose .example{border-left:3px solid #a8baaa;background:#f1f4ed;padding:17px 22px;margin:25px 0;border-radius:0 10px 10px 0;font-size:14px}.prose .reflect{padding:23px 25px;background:linear-gradient(125deg,#f5f1e8,#eff3ec);border-radius:14px;border:1px solid #e2e3d6;margin:29px 0}.prose .reflect b{color:#436f55}.prose .reflect p{margin-bottom:0}.sidebox{position:sticky;top:24px;border:1px solid #dce5d9;border-radius:17px;padding:24px 23px;background:#f5f7f0}.sidebox h3{font:500 20px/1.6 var(--font-heading);margin:0 0 14px}.sidebox a{display:block;border-top:1px solid #dce4d9;padding:13px 0;color:#56725c;font-size:12px;line-height:1.6}.sidebox a:hover{text-decoration:underline;text-underline-offset:4px}.related-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.related-links a{padding:8px 12px;border:1px solid #d7e1d7;border-radius:30px;background:#f7faf5;color:#4f725b;font-size:11px}.related-links a:hover{background:#eaf2e9}.bottom-cta{position:relative;margin:70px 0 80px;padding:38px clamp(24px,5vw,59px);border:1px solid #d8decf;border-radius:20px;background:radial-gradient(circle at 95% 15%,#f0e4c9,transparent 45%),linear-gradient(125deg,#e9f0e5,#f9f7f0)}.bottom-cta h2{font:500 25px/1.6 var(--font-heading);margin:0 0 14px}.bottom-cta p{max-width:710px;font-size:13px;color:#64786a}.bottom-cta a{display:inline-block;background:#335b45;color:white;padding:11px 19px;border-radius:28px;font-size:12px;font-weight:600;margin:5px 10px 0 0}.bottom-cta a.secondary{color:#355b45;background:#fffefa;border:1px solid #cbdccc}.source-note{margin-top:36px;border-top:1px solid #e1e6de;padding-top:22px;color:#748577;font-size:11px}.source-note a{text-decoration:underline;text-underline-offset:3px}.site-footer{background:#2d4c3d;color:#e9eee5;margin-top:50px;padding:39px 0 32px;font-size:11px}.footer-wrap{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}.footer-wrap strong{font:500 20px var(--font-heading)}.footer-wrap p{margin:8px 0 0;color:#bfd0bd}.footer-links{display:flex;gap:19px;flex-wrap:wrap}.footer-links a:hover{text-decoration:underline}.puzzle-art-intro{display:flex;gap:26px;align-items:center;padding:27px;margin:35px 0;border-radius:18px;background:#f0f3ea;border:1px solid #dce4d6}.puzzle-art-intro .art-icon{flex:0 0 85px}.puzzle-art-intro svg{width:85px;height:85px}.puzzle-art-intro p{font-size:13px;color:#5e7865;margin:0}.toc{border:1px solid #e0e5da;border-radius:14px;background:#fffefa;padding:23px 25px;margin:24px 0}.toc b{display:block;font:500 18px var(--font-heading);margin:0 0 10px}.toc a{display:block;color:#567361;padding:4px 0;font-size:12px;text-decoration:underline;text-decoration-color:transparent}.toc a:hover{text-decoration-color:currentColor}.marker{position:relative;display:inline-block;padding:3px 9px;background:#e8efdf;border-radius:4px;color:#547357;font-size:11px}.small-path{color:#8aa18a;font:600 11px Georgia,serif;letter-spacing:.18em}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.chip-list span{padding:5px 11px;background:#edf2e9;color:#5c765e;border-radius:30px;font-size:11px}
@media(max-width:900px){.prose-layout{grid-template-columns:1fr;gap:30px}.sidebox{position:static}.menu{gap:12px}.menu a{font-size:11px}.info-grid,.puzzle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-wrap{min-height:82px}}
@media(max-width:620px){.site-container{width:calc(100% - 36px)}.header-wrap{padding:15px 0;flex-wrap:wrap;min-height:0}.logo{gap:8px}.logo b{font-size:17px}.logo small{font-size:9px}.menu{width:100%;justify-content:start;gap:17px;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;padding-bottom:5px}.menu .menu-cta{padding:6px 11px}.intro-hero{padding:46px 22px 52px;border-radius:17px}.intro-hero h1{font-size:30px}.intro-hero .intro-copy{font-size:13px}.hero-puzzles{width:55%;opacity:.14}.info-grid,.puzzle-grid{grid-template-columns:1fr}.featured-card{grid-column:span 1;grid-template-columns:1fr}.featured-card .featured-puzzle{max-width:180px}.puzzle-link{min-height:110px}.portal-section,.content-section{padding-top:46px}.prose-layout{margin-top:33px}.prose h2{font-size:23px;margin:35px 0 14px}.puzzle-art-intro{gap:13px;padding:20px}.puzzle-art-intro .art-icon{flex-basis:55px}.puzzle-art-intro svg{width:55px;height:55px}.bottom-cta{margin-top:50px}.footer-wrap{flex-direction:column}.site-footer{margin-top:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.info-card,.puzzle-link{transition:none;transform:none!important}}


/* Mobile reading order: show the article table of contents before the body. */
@media (max-width: 900px) {
  /* Only sidebars with in-page anchors are contents lists; keep related-link sidebars unchanged. */
  .prose-layout > .sidebox:has(a[href^="#"]) {
    order: -1;
    margin-bottom: 2px;
  }
  .prose-layout > .sidebox:has(a[href^="#"]) h3 {
    margin-bottom: 12px;
  }
  .prose-layout > .sidebox:has(a[href^="#"]) a[href^="#"] {
    padding-block: 12px;
  }
  .prose-layout > .prose [id] {
    scroll-margin-top: 20px;
  }
}


/* ReHeart psychology articles: typographic headings, not colored advice callouts. */
.guide-theme article.prose > h2 {
  position: relative;
  font-family: var(--font-heading,"Shippori Mincho",serif);
  font-size: clamp(25px,2.5vw,32px);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: .025em;
  color: var(--theme-ink,#2c4e3a);
  margin: 60px 0 23px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--theme-border,#dce2d7);
  background: transparent;
}
.guide-theme article.prose > h2::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 57px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,var(--theme-accent,#86a58b),var(--theme-warm,#d9c49e));
}
.guide-theme article.prose > h2:first-child { margin-top: 0; }
.guide-theme article.prose > h3 {
  position: relative;
  font-family: var(--font-heading,"Shippori Mincho",serif);
  font-size: clamp(18px,1.7vw,21px);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .01em;
  color: var(--theme-ink,#355a46);
  margin: 34px 0 15px;
  padding-left: 26px;
  background: transparent;
}
.guide-theme article.prose > h3::before {
  content: "";
  position: absolute;
  top: .78em;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 3px;
  background: var(--theme-accent,#94b099);
}
.guide-theme .content-section > .section-title {
  font-weight: 600;
  letter-spacing: .015em;
}
@media(max-width:620px) {
  .guide-theme article.prose > h2 {
    font-size: clamp(23px,5.8vw,27px);
    line-height: 1.65;
    margin: 45px 0 20px;
    padding-bottom: 14px;
  }
  .guide-theme article.prose > h2::after { width: 47px; }
  .guide-theme article.prose > h3 {
    font-size: 18px;
    margin: 29px 0 13px;
    padding-left: 23px;
  }
  .guide-theme article.prose > h3::before { width: 14px; }
}


/* Readable in-article links: distinguish navigation from body prose and filled callouts. */
.prose > p:not(.source-note) a[href],
.prose > ul li a[href],
.prose > ol li a[href],
.prose .hsp-article-section > p a[href],
.prose .hsp-article-section li a[href],
.content-section > p.section-desc a[href],
.hsp-summary > p a[href] {
  color: #216b5e;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: #4b9b84;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  border-radius: 2px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.prose > p:not(.source-note) a[href]:visited,
.prose > ul li a[href]:visited,
.prose > ol li a[href]:visited,
.prose .hsp-article-section > p a[href]:visited,
.prose .hsp-article-section li a[href]:visited {
  color: #28675e;
}
.prose > p:not(.source-note) a[href]:hover,
.prose > ul li a[href]:hover,
.prose > ol li a[href]:hover,
.prose .hsp-article-section > p a[href]:hover,
.prose .hsp-article-section li a[href]:hover,
.content-section > p.section-desc a[href]:hover {
  color: #144f43;
  text-decoration-color: currentColor;
}
.prose a[href]:focus-visible,
.content-section a[href]:focus-visible,
.hsp-summary a[href]:focus-visible {
  outline: 2px solid #327e69;
  outline-offset: 4px;
  border-radius: 3px;
}
@media(prefers-reduced-motion: reduce) {
  .prose a[href] { transition: none; }
}


/* Clear inline links in every psychology guide, including nested relationship articles. */
body.guide-theme article.prose p a[href],body.guide-theme article.prose li a[href]{
 color:#205e4a;font-weight:700;text-decoration-line:underline;
 text-decoration-color:#418a6a;text-decoration-thickness:2px;
 text-underline-offset:4px;text-decoration-skip-ink:auto;border-radius:2px;
 transition:color .15s,background-color .15s,text-decoration-color .15s
}
body.guide-theme article.prose p a[href]:visited,body.guide-theme article.prose li a[href]:visited{
 color:#285b4c;text-decoration-color:#588a71
}
body.guide-theme article.prose p a[href]:hover,body.guide-theme article.prose li a[href]:hover{
 color:#114d38;background:#e8f3ea;text-decoration-color:currentColor
}
body.guide-theme article.prose p a[href]:focus-visible,body.guide-theme article.prose li a[href]:focus-visible{
 outline:2px solid #327e69;outline-offset:3px;background:#e8f3ea
}
/* Related-theme text is a link, not an ordinary caption. */
body.guide-theme.relationship-page .relationship-related a[href]{
 color:#265c46;font-weight:700;background:#f8fcf9;border-color:#b7d2bf;
 text-decoration-line:underline;text-decoration-color:#78a78c;
 text-decoration-thickness:1.5px;text-underline-offset:4px
}
body.guide-theme.relationship-page .relationship-related a[href]:hover,
body.guide-theme.relationship-page .relationship-related a[href]:focus-visible{
 background:#e5f2e8;color:#174a35;border-color:#77a88a;text-decoration-color:currentColor
}
@media(prefers-reduced-motion:reduce){
 body.guide-theme article.prose p a[href],body.guide-theme article.prose li a[href]{transition:none}
}