/* Ribbon Garden editorial theme for /articles/ and every article detail. */
:is(body.article-index,body.article-detail) {
  --journal-ink:#66505f;--journal-rose:#d27e9c;--journal-mint:#a8d9c4;
  color:var(--journal-ink);
  background:radial-gradient(circle at 8% 13%,#f8e6ed 0,transparent 21%),
    radial-gradient(circle at 93% 33%,#e8f6ef 0,transparent 22%),#fffbf9;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
:is(body.article-index,body.article-detail) .g-header {background:#fffdfbf2;border-bottom:1px solid #efd7e0;box-shadow:0 5px 20px #b16e8b0a}
:is(body.article-index,body.article-detail) .g-header .inner {max-width:1180px;margin:auto;min-height:78px;padding:12px 22px;gap:24px}
:is(body.article-index,body.article-detail) .g-header .inner a.logo {display:block;flex-shrink:0;text-decoration:none;color:#66505f}
:is(body.article-index,body.article-detail) .g-header .brand-lines {display:block;line-height:1.4}
:is(body.article-index,body.article-detail) .g-header .brand-tagline {display:block;color:#ab728f;font-size:9px;font-weight:600;letter-spacing:.08em}
:is(body.article-index,body.article-detail) .g-header .brand-name {display:block;font-size:19px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
:is(body.article-index,body.article-detail) .g-header .brand-name span {font-size:.77em;margin-left:3px}
:is(body.article-index,body.article-detail) .g-header .inner .g-nav {margin-left:auto;gap:24px;align-items:center}
:is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link {display:none;color:#73586b;font-size:12px;font-weight:600}
:is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(2),
:is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(3),
:is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(4),
:is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(5) {display:block}
:is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:hover {color:#c77898}
:is(body.article-index,body.article-detail) .g-header .theme-toggle {display:none}

/* The article index shares the home page's ribbon, pastel wash and framed photos. */
body.article-index .journal-head {max-width:1440px;margin:auto;min-height:485px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);align-items:center;gap:55px;padding:60px max(6%,28px);position:relative;overflow:hidden;
  background:radial-gradient(circle at 10% 70%,#fff8e7 0,transparent 25%),radial-gradient(circle at 86% 30%,#ddf3e8 0,transparent 26%),repeating-linear-gradient(-42deg,#fce8ef 0 22px,#f9e0e9 22px 24px,#fce8ef 24px 46px)}
body.article-index .journal-head::before {content:"";position:absolute;inset:22px 3%;border:1px solid #fffc;pointer-events:none}
body.article-index .journal-head::after {content:"✦";position:absolute;top:52px;right:7%;font-size:30px;color:#d99fbb;pointer-events:none}
body.article-index .journal-head-copy {position:relative;z-index:1}
body.article-index .journal-kicker {padding:0;margin:0 0 15px;font-size:10px;letter-spacing:.2em;font-weight:700;color:#b06e92}
body.article-index .journal-ribbon {display:table;padding:8px 32px;background:linear-gradient(100deg,#eaa3ba,#b8dfca);clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%);font-size:13px;font-weight:700;color:#6d4b66;transform:rotate(-2deg)}
body.article-index .journal-head h1 {margin:20px 0 15px;font-size:clamp(31px,3.8vw,50px);line-height:1.5;letter-spacing:.02em;color:#8f667d}
body.article-index .journal-head h1 em {font-style:normal;color:#ce789b;text-shadow:2px 3px 0 #f7dce5}
body.article-index .journal-head-copy>p:not(.journal-kicker) {max-width:520px;font-size:14px;line-height:2;color:#806c78;padding:0}
body.article-index .journal-back {display:inline-flex;align-items:center;gap:25px;margin-top:24px;border-bottom:1px solid #bc7798;padding:0 0 6px;color:#a65d83;font-size:12px;font-weight:700}
body.article-index .journal-head-photo {justify-self:center;position:relative;width:min(100%,300px);height:335px;background:#fff;padding:9px 9px 30px;box-shadow:8px 12px 0 #ce9cb839,0 12px 24px #81576d26;transform:rotate(5deg)}
body.article-index .journal-head-photo img {display:block;width:100%;height:100%;object-fit:cover;object-position:center}
body.article-index .journal-head-photo span {position:absolute;right:-31px;bottom:25px;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:#b9e3d0;color:#527d70;text-align:center;font-size:12px;font-weight:700;line-height:1.45;transform:rotate(9deg);border:4px solid #fff}
body.article-index main.main-content {max-width:1180px;margin:0 auto;padding:50px 30px 70px}
body.article-index .main-content .section-title {display:flex;align-items:center;gap:18px;font-size:27px;line-height:1.4;color:#8a5f77;margin:0 0 26px}
body.article-index .main-content .section-title::before {content:"";width:34px;height:22px;border-top:2px solid #dfa1bb;border-left:2px solid #dfa1bb}
body.article-index .main-content .section-title::after {content:"";height:1px;flex:1;background:#e8cad9}
body.article-index .main-content .news-list {counter-reset:article-card}
body.article-index .main-content .list.list-card {grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:0}
body.article-index .main-content .pinned-section .list-card {grid-template-columns:repeat(2,minmax(0,1fr))}
body.article-index .main-content .list.list-card .card {position:relative;min-width:0;margin:0}
body.article-index .main-content .list.list-card .card a {display:flex;flex-direction:column;min-height:255px;padding:60px 25px 24px;border:2px solid #e5c6d4;border-radius:7px;box-shadow:7px 8px 0 #eedce6;background:#fffefa;color:#67525e;text-decoration:none;transition:transform .2s,box-shadow .2s}
body.article-index .main-content .list.list-card .card a:hover {transform:translateY(-4px);box-shadow:7px 12px 0 #eedce6}
body.article-index .main-content .list.list-card .card a::before {content:"READ • ARTICLE";position:absolute;top:18px;left:20px;padding:4px 13px;background:#d4efdf;color:#528771;font-size:10px;letter-spacing:.1em;font-weight:700;clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%)}
body.article-index .main-content .list.list-card .card a::after {content:"✦";position:absolute;top:16px;right:19px;color:#dea4bd;font-size:22px}
body.article-index .main-content .list.list-card .card:nth-child(3n+2) a {border-color:#c5dfd3;box-shadow:7px 8px 0 #e5f1eb}
body.article-index .main-content .list.list-card .card:nth-child(3n+2) a::before {background:#f2dbe9;color:#a76484}
body.article-index .main-content .list.list-card .card:nth-child(3n) a {border-color:#dfcde4;box-shadow:7px 8px 0 #f0e5f3}
body.article-index .main-content .list.list-card .card a h3 {margin:0;color:#715669;font-size:18px;line-height:1.65}
body.article-index .main-content .list.list-card .card a p {margin-top:auto;padding:18px 0 0;color:#a77994;font-size:11px}
body.article-index .main-content .list.list-card .card a .muted {color:#776a73;font-size:12px;line-height:1.8}

/* Article pages keep the individual article title as their semantic h1. */
body.article-detail > main {position:relative;max-width:900px;margin:62px auto 70px;padding:48px clamp(24px,5vw,68px) 70px;background:#fffefa;border:1px solid #edd5e0;box-shadow:10px 12px 0 #f2e2e9;overflow-wrap:anywhere}
body.article-detail > main::before {content:"THE CHAT LADY JOURNAL  /  READ AT YOUR PACE";display:block;margin:0 0 20px;color:#ac7092;font-size:10px;letter-spacing:.16em;font-weight:700}
body.article-detail > main::after {content:"";position:absolute;right:18px;top:18px;width:30px;height:30px;border-right:1px solid #d99dbc;border-top:1px solid #d99dbc;pointer-events:none}
body.article-detail > main h1 {margin:0 0 33px;padding:16px 0 26px;background:none;border-bottom:4px double #e6b8cb;color:#8d607c;font-size:clamp(29px,3.3vw,42px);line-height:1.55;letter-spacing:.02em}
body.article-detail > main h2 {position:relative;margin:52px 0 22px;padding:14px 18px;border-left:5px solid #d58ca8;background:linear-gradient(90deg,#fae9ef,#fff9f9);color:#825a72;font-size:clamp(22px,2.5vw,28px);line-height:1.55}
body.article-detail > main h3 {margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid #e4c4d3;color:#937082;font-size:21px;line-height:1.55}
body.article-detail > main p {padding:0;margin:0 0 22px;color:#5d565a;font-size:16px;line-height:2.05}
body.article-detail > main strong {color:#a85f80}
body.article-detail > main a {color:#b76187;text-decoration:underline;text-underline-offset:3px}
body.article-detail > main ul,body.article-detail > main ol {margin:24px 0 28px;padding:15px 24px 15px 33px;background:#f7f5f3;border:1px solid #ecdfdf;border-radius:7px}
body.article-detail > main ul.article-checklist-striped {background:#fff0f6;border-color:#e9c7d7;border-radius:0}
body.article-detail > main ul li,body.article-detail > main ol li {font-size:16px;line-height:1.9;padding:5px 0}
body.article-detail > main ul li::before {color:#d58ca8}
body.article-detail > main blockquote,body.article-detail > main .phrase {margin:32px 0;padding:26px 30px;border:1px solid #e6c7d7;border-left:5px solid #d58ca8;background:#fff8fa}
body.article-detail > main img,body.article-detail > main table {max-width:100%;height:auto}
body.article-detail > main table {display:block;overflow-x:auto;border-collapse:collapse;margin:30px 0}
body.article-detail > main th,body.article-detail > main td {border:1px solid #e9d5df;padding:10px 14px}
body.article-detail > main th {background:#f9eaf1}

/* Shared footer modules repeat the chosen palette without changing content. */
:is(body.article-index,body.article-detail) .author-card,
:is(body.article-index,body.article-detail) .related-posts {max-width:1100px;margin:60px auto;background:#fffefa;border:1px solid #eacddc;border-radius:9px;box-shadow:7px 9px 0 #f0e0e7;padding:28px}
:is(body.article-index,body.article-detail) .author-heading,
:is(body.article-index,body.article-detail) .related-title {color:#986780}
:is(body.article-index,body.article-detail) .author-card {padding:30px 28px 28px}
:is(body.article-index,body.article-detail) .author-card h2.author-heading {position:relative;z-index:1;display:table;margin:0 0 -13px 11px;padding:10px 39px;background:linear-gradient(100deg,#df7ca4,#aa70aa);clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%);color:#fff;font-size:24px;line-height:1.35;letter-spacing:.05em;text-shadow:0 1px 2px #89546b55}
:is(body.article-index,body.article-detail) .author-card .inner {padding:47px clamp(24px,4vw,50px) 38px;border:1px solid #efcddd;background:radial-gradient(circle at 87% 12%,#fffafc 0,transparent 38%),radial-gradient(circle at 7% 89%,#f9dbe8 0,transparent 43%),#f9e9f0;color:#71596a}
:is(body.article-index,body.article-detail) .author-card .inner .top .avatar {border:3px solid #fff;box-shadow:0 4px 13px #b87a9b35}
:is(body.article-index,body.article-detail) .author-card .inner .text-wrap .bio::before {background:#d99fba}
:is(body.article-index,body.article-detail) .author-card .inner .text-wrap .detail-heading {color:#a45f84}
:is(body.article-index,body.article-detail) .related-posts {position:relative;overflow:hidden;border:2px solid #edb9d2;background:radial-gradient(circle at 94% 10%,#dcf4e8 0 50px,transparent 51px),radial-gradient(circle at 6% 100%,#fff0c8 0 55px,transparent 56px),#fffdfb;box-shadow:9px 11px 0 #efd8e5;padding:34px 38px 40px}
:is(body.article-index,body.article-detail) .related-posts::before {content:"";position:absolute;top:0;left:0;right:0;height:9px;background:repeating-linear-gradient(110deg,#f4b5cf 0 25px,#d1ecdc 25px 50px,#ffe2a6 50px 75px)}
:is(body.article-index,body.article-detail) .related-posts::after {content:"✳";position:absolute;top:24px;right:34px;color:#e58fb1;font-size:29px;line-height:1}
:is(body.article-index,body.article-detail) .related-posts h2.related-title {position:relative;z-index:1;gap:14px;color:#b9638b;font-size:27px;line-height:1.4}
:is(body.article-index,body.article-detail) .related-posts h2.related-title::before {width:28px;height:3px;background:#e9a0bc}
:is(body.article-index,body.article-detail) .related-posts h2.related-title::after {height:2px;background:linear-gradient(90deg,#efb8ce,#c4e9d6);margin-right:40px}
:is(body.article-index,body.article-detail) .related-posts ul.related-list {display:grid;gap:13px;margin:24px 0 0;padding:0;border:0;counter-reset:related}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li {position:relative;counter-increment:related;margin:0;padding:0;list-style:none;line-height:1.5}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li a {display:flex;align-items:center;gap:15px;min-height:75px;padding:14px 46px 14px 17px;border:1px solid #f2cbdc;background:#fff0f6;box-shadow:4px 4px 0 #f6dfe9;color:#725267;font-size:16px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li a:hover {transform:translateY(-2px);box-shadow:4px 7px 0 #f6dfe9}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li a::before {content:counter(related, decimal-leading-zero);position:static;top:auto;display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0;border-radius:50%;background:#e884ab;color:#fff;font-size:12px;font-weight:700}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li a::after {content:"↗";position:absolute;right:18px;color:#c57499;font-size:19px}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li:nth-child(3n+2) a {border-color:#c9e8d8;background:#eefaf4;box-shadow:4px 4px 0 #d9f0e4}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li:nth-child(3n+2) a::before {background:#80c6a6}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li:nth-child(3n+2) a::after {color:#66a98a}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li:nth-child(3n) a {border-color:#f4dfab;background:#fff8df;box-shadow:4px 4px 0 #faebc3}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li:nth-child(3n) a::before {background:#e5b758}
:is(body.article-index,body.article-detail) .related-posts ul.related-list li:nth-child(3n) a::after {color:#cba24d}
:is(body.article-index,body.article-detail) .cta-box {margin-top:75px;padding-top:35px;padding-bottom:45px;background:radial-gradient(circle at 12% 30%,#fff3c7 0,transparent 28%),radial-gradient(circle at 88% 22%,#c9f0dc 0,transparent 27%),linear-gradient(115deg,#ffd8e7,#f4daf0 56%,#d7f4e7)}
:is(body.article-index,body.article-detail) .cta-box .inner {position:relative;max-width:960px;margin:auto;padding:78px 45px 55px;overflow:hidden;border:7px solid #fff;background:radial-gradient(circle at 8% 82%,#ffedb8 0 25px,transparent 26px),radial-gradient(circle at 92% 18%,#c8efdc 0 37px,transparent 38px),#fffafc;outline:2px solid #eaa8c4;box-shadow:10px 12px 0 #dba6c755,0 18px 42px #a65e8129}
:is(body.article-index,body.article-detail) .cta-box .inner::before {content:"✦  MY STYLE, MY PACE  ✦";position:absolute;top:0;left:50%;transform:translateX(-50%);display:block;width:max-content;max-width:82%;padding:9px 30px;background:linear-gradient(100deg,#f5aec8,#bee9d5);clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%);color:#815474;font-size:11px;font-weight:700;letter-spacing:.14em}
:is(body.article-index,body.article-detail) .cta-box .inner::after {content:"✳";position:absolute;right:36px;top:64px;color:#e88eae;font-size:36px;line-height:1;transform:rotate(18deg)}
:is(body.article-index,body.article-detail) .cta-box .inner h2 {position:relative;z-index:1;color:#c05d89;font-size:clamp(25px,3vw,35px);line-height:1.55;text-shadow:2px 2px 0 #ffe2ee}
:is(body.article-index,body.article-detail) .cta-box .inner h2::after {content:"";display:block;width:80px;height:4px;margin:20px auto 0;background:linear-gradient(90deg,#f4abc5,#bce7d1)}
:is(body.article-index,body.article-detail) .cta-box .inner p {position:relative;z-index:1;color:#705866;font-size:clamp(15px,1.55vw,18px);line-height:1.9}
:is(body.article-index,body.article-detail) .cta-box .inner .cta-buttons {position:relative;z-index:1}
:is(body.article-index,body.article-detail) .cta-box .inner .cta-buttons .cta-button {background:linear-gradient(100deg,#e875a5,#ba72ab);border:2px solid #fff;color:#fff;border-radius:40px;box-shadow:0 8px 0 #e9c1d4,0 14px 25px #b76b932d}
:is(body.article-index,body.article-detail) .g-footer {background:#fffdfb;border-top:1px solid #edd4df;margin-top:0;padding-top:24px}
:is(body.article-index,body.article-detail) .g-footer::before {display:none}
:is(body.article-index,body.article-detail) .g-footer .inner {max-width:1100px;margin:auto}
:is(body.article-index,body.article-detail) .g-footer .copy {border-color:#efd9e2;color:#8c7783}

@media(max-width:900px) {
  body.article-index .main-content .list.list-card {grid-template-columns:repeat(2,minmax(0,1fr))}
  body.article-index .journal-head {grid-template-columns:1fr 260px;gap:25px}
}
@media(max-width:768px) {
  :is(body.article-index,body.article-detail) .g-header .inner {min-height:72px;padding:10px 18px}
  :is(body.article-index,body.article-detail) .g-header .brand-name {font-size:16px}
  :is(body.article-index,body.article-detail) .g-header .brand-tagline {font-size:8px}
  :is(body.article-index,body.article-detail) .g-header .inner .menu-btn {display:flex;width:38px;height:38px;background:#faeaf0;border-radius:50%;margin-left:auto}
  :is(body.article-index,body.article-detail) .g-header .inner .g-nav {top:72px;left:0;right:0;width:100%;padding:24px;background:#fffdfb;visibility:hidden;pointer-events:none;box-shadow:0 16px 20px #8c5b7522}
  :is(body.article-index,body.article-detail) .g-header.is-open .inner .g-nav {visibility:visible;pointer-events:auto}
  :is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(2),
  :is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(3),
  :is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(4),
  :is(body.article-index,body.article-detail) .g-header .inner .g-nav .g-nav-link:nth-child(5) {font-size:14px}
  body.article-index .journal-head {min-height:0;grid-template-columns:1fr;gap:25px;padding:46px 24px 44px}
  body.article-index .journal-head-photo {width:190px;height:210px;justify-self:end;margin-right:20px}
  body.article-index main.main-content {padding:40px 20px 60px}
  body.article-index .main-content .section-title {font-size:23px}
  body.article-index .main-content .list.list-card,body.article-index .main-content .pinned-section .list-card {display:grid;grid-template-columns:1fr;gap:18px}
  body.article-index .main-content .list.list-card .card a {min-height:185px;padding:55px 22px 22px}
  body.article-detail > main {margin:26px 15px 50px;padding:28px 22px 45px}
  body.article-detail > main h1 {font-size:27px;margin-bottom:25px}
  body.article-detail > main h2 {font-size:22px;margin-top:38px;padding:12px 14px}
  body.article-detail > main h3 {font-size:19px}
  body.article-detail > main p,body.article-detail > main li {font-size:15px}
  :is(body.article-index,body.article-detail) .author-card,
  :is(body.article-index,body.article-detail) .related-posts {margin:35px 15px;padding:20px}
  :is(body.article-index,body.article-detail) .author-card {padding:24px 17px 22px}
  :is(body.article-index,body.article-detail) .author-card h2.author-heading {margin-left:4px;padding:9px 28px;font-size:20px}
  :is(body.article-index,body.article-detail) .author-card .inner {padding:44px 23px 30px}
  :is(body.article-index,body.article-detail) .related-posts {padding:25px 18px 28px}
  :is(body.article-index,body.article-detail) .related-posts h2.related-title {font-size:23px}
  :is(body.article-index,body.article-detail) .related-posts ul.related-list li a {gap:11px;min-height:72px;padding:12px 38px 12px 12px;font-size:14px}
  :is(body.article-index,body.article-detail) .related-posts ul.related-list li a::before {width:32px;height:32px;font-size:11px}
  :is(body.article-index,body.article-detail) .cta-box {padding:30px 22px 42px}
  :is(body.article-index,body.article-detail) .cta-box .inner {padding:75px 22px 38px}
  :is(body.article-index,body.article-detail) .cta-box .inner::after {right:16px;top:53px;font-size:25px}
  :is(body.article-index,body.article-detail) .cta-box .inner p {width:100%}
}