
/* Scoped to this single article. Tuned to match the waterserver site presentation look. */
.wsfj-article,
.wsfj-article *,.wsfj-article *::before,.wsfj-article *::after{box-sizing:border-box}
.wsfj-article{
  --wsfj-navy:#123047;
  --wsfj-navy-dark:#0b202f;
  --wsfj-teal:#236f70;
  --wsfj-teal-dark:#185759;
  --wsfj-aqua:#eaf6f4;
  --wsfj-sand:#f5f1e8;
  --wsfj-paper:#fcfbf8;
  --wsfj-white:#ffffff;
  --wsfj-ink:#263238;
  --wsfj-muted:#65717a;
  --wsfj-line:#d8e1df;
  --wsfj-terracotta:#a95443;
  --wsfj-gold:#e7c978;
  --wsfj-shadow:0 22px 54px rgba(18,48,71,.09);
  color:var(--wsfj-ink);overflow-wrap:anywhere;font-size:16px;line-height:1.95
}
.wsfj-article a{color:var(--wsfj-teal-dark);font-weight:750;text-decoration-thickness:.08em;text-underline-offset:3px}
.wsfj-article a:focus-visible{outline:3px solid rgba(35,111,112,.35);outline-offset:3px}
.wsfj-article p{line-height:1.95;margin:0 0 1.15em}
.wsfj-article > *:last-child{margin-bottom:0!important}
.wsfj-article .ws-pr-disclosure{font-size:.82em;color:var(--wsfj-muted);margin:0 0 .5em}
.wsfj-article .wsfj-image-note{font-size:.78em;color:var(--wsfj-muted);margin:0 0 1.8em}
.wsfj-article .wsfj-ref{color:var(--wsfj-teal);font-size:.66em;font-weight:500;white-space:nowrap;margin-left:.2em}

/* Headings */
.wsfj-article h2.wp-block-heading{
  background:linear-gradient(90deg,var(--wsfj-aqua),transparent 78%);
  border-left:6px solid var(--wsfj-teal);
  color:var(--wsfj-navy);
  font-size:clamp(24px,3vw,32px);
  line-height:1.45;
  margin:64px 0 24px;
  padding:11px 0 11px 20px;
}
.wsfj-article h3.wp-block-heading{
  color:var(--wsfj-navy);
  font-size:22px;
  line-height:1.55;
  margin:46px 0 15px;
  padding-bottom:9px;
  position:relative;
}
.wsfj-article h3.wp-block-heading::after{
  background:linear-gradient(90deg,var(--wsfj-teal),transparent);
  bottom:0;content:"";height:2px;left:0;position:absolute;width:90px;
}

/* Quote blocks */
.wsfj-article .wp-block-quote{
  background:var(--wsfj-aqua);border:0;border-left:5px solid var(--wsfj-teal);border-radius:16px;
  color:#304047;margin:30px 0;padding:22px 26px;box-shadow:none;font-style:normal
}
.wsfj-article .wp-block-quote:first-of-type{
  background:#fff4cf;border:1px solid var(--wsfj-gold);border-left:7px solid var(--wsfj-terracotta);
  box-shadow:var(--wsfj-shadow);font-size:1.04em;padding:26px 30px
}
.wsfj-article .wp-block-quote::before,.wsfj-article .wp-block-quote::after{display:none}
.wsfj-article .wp-block-quote p:last-child{margin-bottom:0}

/* Tables */
.wsfj-article .wp-block-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:32px 0;border:1px solid var(--wsfj-line);border-radius:15px}
.wsfj-article .wp-block-table table{width:100%;min-width:680px;border-collapse:collapse;line-height:1.65;font-size:.88em;table-layout:auto}
.wsfj-article .wp-block-table th,.wsfj-article .wp-block-table td{border:0;border-bottom:1px solid var(--wsfj-line);padding:14px;text-align:left;vertical-align:top;word-break:normal}
.wsfj-article .wp-block-table thead th{background:var(--wsfj-navy);color:#fff;font-weight:700}
.wsfj-article .wp-block-table tbody tr:nth-child(even) td{background:var(--wsfj-sand)}
.wsfj-article .wp-block-table tbody tr:nth-child(odd) td{background:#fff}

/* Dialogue */
.wsfj-article .ws-dialogue{display:grid;gap:24px;margin:clamp(44px,7vw,76px) auto;max-width:920px;padding:0;clear:both}
.wsfj-article .ws-dialogue__turn{align-items:center;display:grid;gap:18px;grid-template-columns:92px minmax(0,1fr);margin:0}
.wsfj-article .ws-dialogue__turn--editor{grid-template-columns:minmax(0,1fr) 92px}
.wsfj-article .ws-dialogue__turn--editor .ws-dialogue__speaker{grid-column:2;grid-row:1}
.wsfj-article .ws-dialogue__turn--editor .ws-dialogue__bubble{grid-column:1;grid-row:1}
.wsfj-article .ws-dialogue__speaker{align-items:center;color:var(--wsfj-navy);display:flex;flex-direction:column;gap:7px;text-align:center}
.wsfj-article .ws-dialogue__avatar{
  background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:cover;
  border:4px solid #f2d6cb;border-radius:50%;box-shadow:0 10px 26px rgba(18,48,71,.1);
  display:block;height:76px;overflow:hidden;width:76px;color:transparent;font-size:0;line-height:0
}
.wsfj-article .ws-dialogue__turn--reader .ws-dialogue__avatar--initial{background-image:url("mizuhiro-reader-avatar.webp")}
.wsfj-article .ws-dialogue__turn--editor .ws-dialogue__avatar{border-color:#bfded9}
.wsfj-article .ws-dialogue__turn--editor .ws-dialogue__avatar--initial{background-image:url("shirube-editor-avatar.webp")}
.wsfj-article .ws-dialogue__identity{display:grid;gap:2px;justify-items:center;line-height:1.25}
.wsfj-article .ws-dialogue__identity strong{font-size:12px;white-space:nowrap}
.wsfj-article .ws-dialogue__identity small{color:var(--wsfj-muted);font-size:10px;font-weight:700}
.wsfj-article p.ws-dialogue__bubble{
  background:#fff;border:1px solid var(--wsfj-line);border-left:5px solid var(--wsfj-terracotta);border-radius:20px;
  box-shadow:0 12px 34px rgba(18,48,71,.05);color:#22363f;font-size:1.18em;font-weight:700;line-height:1.85;
  margin:0!important;padding:26px 28px;position:relative
}
.wsfj-article p.ws-dialogue__bubble::before{
  background:#fff;border-bottom:1px solid var(--wsfj-line);border-left:1px solid var(--wsfj-line);
  content:"";height:16px;left:-9px;position:absolute;top:24px;transform:rotate(45deg);width:16px
}
.wsfj-article .ws-dialogue__turn--editor p.ws-dialogue__bubble{border-left:1px solid var(--wsfj-line);border-right:5px solid var(--wsfj-teal)}
.wsfj-article .ws-dialogue__turn--editor p.ws-dialogue__bubble::before{left:auto;right:-9px;transform:rotate(225deg)}

/* FAQ area */
.wsfj-article .wsfj-kicker{color:var(--wsfj-gold);font-size:12px!important;font-weight:900;letter-spacing:.15em;line-height:1.5!important;margin:0 0 13px!important}
.wsfj-article .wsfj-faq{
  background:#fff;border:1px solid #cbd9d7;border-radius:26px;box-shadow:0 22px 56px rgba(18,48,71,.09);
  clear:both;margin:clamp(66px,9vw,104px) 0 52px;overflow:hidden;padding:0
}
.wsfj-article .wsfj-faq h2{border:0!important;color:#fff!important;font-size:clamp(27px,4vw,40px)!important;line-height:1.35;margin:0 0 12px!important;padding:0!important;background:none!important;box-shadow:none!important}
.wsfj-article .wsfj-faq h2::before,.wsfj-article .wsfj-faq h2::after{display:none!important}
.wsfj-article .wsfj-faq__intro{color:#c9d9dc;margin:0;font-size:13px;line-height:1.8}

/* Header background follows natural text height; no clipping on narrow screens. */
.wsfj-article .wsfj-faq{position:relative;background:radial-gradient(circle at 92% 0,rgba(98,170,165,.28),transparent 18rem),linear-gradient(145deg,#123047,#0d2638)}
.wsfj-article .wsfj-faq::before,.wsfj-article .wsfj-faq::after{content:none;display:none}
.wsfj-article .wsfj-faq > .wsfj-kicker{color:var(--wsfj-gold);padding:clamp(28px,5vw,46px) clamp(24px,6vw,54px) 0!important;margin:0 0 13px!important}
.wsfj-article .wsfj-faq > h2{padding:0 clamp(24px,6vw,54px)!important;margin:0 0 12px!important}
.wsfj-article .wsfj-faq > .wsfj-faq__intro{padding:0 clamp(24px,6vw,54px) 36px;margin:0;color:#c9d9dc}
.wsfj-article .wsfj-author .wsfj-kicker,.wsfj-article .wsfj-cta .wsfj-kicker{color:var(--wsfj-teal-dark)}
.wsfj-article .wsfj-faq__grid{display:grid;grid-template-columns:1fr;gap:15px;align-items:start;padding:clamp(18px,4vw,34px);background:#f3f7f6}
.wsfj-article .wsfj-faq__item{background:#fff;border:1px solid #d6e1df;border-radius:18px;overflow:hidden;margin:0;box-shadow:none;min-width:0}
.wsfj-article .wsfj-faq__item summary{align-items:flex-start;display:grid;gap:16px;grid-template-columns:46px minmax(0,1fr);list-style:none;padding:22px 24px 18px;cursor:pointer;position:relative;font-weight:700;line-height:1.6;background:transparent;border:0;color:var(--wsfj-ink)}
.wsfj-article .wsfj-faq__item summary::-webkit-details-marker{display:none}
.wsfj-article .wsfj-faq__item summary::after{content:"＋";position:absolute;right:18px;top:18px;font-size:17px;color:var(--wsfj-teal);font-weight:700}
.wsfj-article .wsfj-faq__item[open] summary::after{content:"−"}
.wsfj-article .wsfj-faq__item summary:focus-visible{outline:3px solid rgba(35,111,112,.35);outline-offset:-4px}
.wsfj-article .wsfj-faq__number{align-items:center;background:var(--wsfj-teal);border-radius:13px;color:#fff;display:inline-flex;flex:0 0 46px;font-family:Georgia,serif;font-size:17px;font-weight:700;height:46px;justify-content:center;letter-spacing:-.03em}
.wsfj-article .wsfj-faq__summary{display:block;flex:1;min-width:0;padding-right:18px}
.wsfj-article .wsfj-faq__label{background:rgba(169,84,67,.1);border-radius:999px;color:var(--wsfj-terracotta);display:inline-flex;font-size:9px;font-weight:900;letter-spacing:.08em;margin-bottom:8px;padding:4px 9px}
.wsfj-article .wsfj-faq__question{color:var(--wsfj-navy);display:block;font-size:18px;line-height:1.55}
.wsfj-article .wsfj-faq__answer{background:#fbfaf6;border-top:1px solid #e4e9e7;display:grid;gap:16px;grid-template-columns:46px minmax(0,1fr);padding:20px 24px 22px;font-size:14px;line-height:1.9}
.wsfj-article .wsfj-faq__answer::before{content:"A";align-items:center;border:1px solid #b9d1ce;border-radius:50%;color:var(--wsfj-teal);display:inline-flex;font-family:Georgia,serif;font-size:18px;font-weight:700;height:38px;justify-content:center;margin:2px 0 0 4px;width:38px}
.wsfj-article .wsfj-faq__answer > *{grid-column:2}
.wsfj-article .wsfj-faq__answer p{color:#344951;font-size:14px;line-height:1.9;margin:0 0 10px}
.wsfj-article .wsfj-faq__answer .wsfj-faq__check{align-items:center;border-top:1px dashed #cbd9d7;color:var(--wsfj-muted);display:flex;font-size:10px;gap:9px;line-height:1.7;margin-top:14px!important;padding-top:13px}
.wsfj-article .wsfj-faq__check strong{background:var(--wsfj-navy);border-radius:999px;color:#fff;font-size:9px;letter-spacing:.08em;margin-right:0;padding:4px 8px}

/* Sources */
.wsfj-article .wsfj-sources{background:#fff;border:1px solid var(--wsfj-line);border-radius:18px;box-shadow:0 14px 36px rgba(18,48,71,.05);padding:0;font-size:.82em;margin:2.4em 0;overflow:hidden}
.wsfj-article .wsfj-sources summary{background:var(--wsfj-navy);color:#fff;cursor:pointer;font-weight:900;line-height:1.7;list-style:none;padding:18px 22px}
.wsfj-article .wsfj-sources summary::-webkit-details-marker{display:none}
.wsfj-article .wsfj-sources ol{margin:0;padding:20px 28px 24px 48px}
.wsfj-article .wsfj-sources li{margin:0 0 1.1em;line-height:1.8}
.wsfj-article .wsfj-sources code{font-size:11px;white-space:normal;word-break:break-all;background:#f3f6f4;color:#526971;padding:2px 4px}

/* Author & CTA */
.wsfj-article .wsfj-author{background:#f6f9f8;border-top:3px solid var(--wsfj-teal);border-radius:0 0 12px 12px;margin:2em 0;padding:26px 28px}
.wsfj-article .wsfj-author h3{border:0!important;padding:0!important;background:none!important;font-size:1.06em!important;line-height:1.7;color:var(--wsfj-ink)!important;margin:.3em 0 1em!important}
.wsfj-article .wsfj-author h3::before,.wsfj-article .wsfj-author h3::after{display:none!important}
.wsfj-article .wsfj-author p:not(.wsfj-kicker){font-size:.86em;margin:.7em 0}
.wsfj-article .wsfj-cta{background:#eef7f3;border:1px solid #c9e1d9;border-radius:16px;margin:2.3em 0;padding:30px;text-align:center}
.wsfj-article .wsfj-cta p{margin:0 0 12px}
.wsfj-article .wsfj-cta__button{display:block;background:var(--wsfj-teal);color:#fff!important;border:2px solid var(--wsfj-teal);border-radius:10px;padding:17px 20px;font-size:.94em;line-height:1.7;text-decoration:none!important;font-weight:700;box-shadow:0 3px 0 var(--wsfj-teal-dark);transition:background .15s ease}
.wsfj-article .wsfj-cta__button:hover{background:var(--wsfj-teal-dark)}
.wsfj-article .wsfj-cta__button:focus-visible{outline:3px solid #e6b557;outline-offset:4px}
.wsfj-article .wsfj-cta small{display:block;font-size:10px;color:var(--wsfj-muted);margin-top:12px}

@media(max-width:700px){
  .wsfj-article h2.wp-block-heading{font-size:24px;padding:10px 0 10px 16px}
  .wsfj-article h3.wp-block-heading{font-size:19px}
  .wsfj-article .wp-block-table table{min-width:560px}
  .wsfj-article .wsfj-faq{border-radius:20px;margin:58px -4px 42px}
  .wsfj-article .wsfj-faq > .wsfj-kicker{padding-top:27px}
  .wsfj-article .wsfj-faq h2{font-size:26px!important}
  .wsfj-article .wsfj-faq__grid{gap:12px;padding:13px}
  .wsfj-article .wsfj-faq__item summary,.wsfj-article .wsfj-faq__answer{gap:11px;grid-template-columns:39px minmax(0,1fr);padding:18px 16px}
  .wsfj-article .wsfj-faq__number{border-radius:11px;font-size:14px;height:39px;width:39px;flex-basis:39px}
  .wsfj-article .wsfj-faq__answer::before{height:34px;width:34px;margin-left:2px}
  .wsfj-article .wsfj-faq__question{font-size:16px}
  .wsfj-article .wsfj-faq__answer p{font-size:13px;line-height:1.85}
}
@media(max-width:480px){
  .wsfj-article .ws-dialogue{gap:18px;margin:46px auto}
  .wsfj-article .ws-dialogue__turn,.wsfj-article .ws-dialogue__turn--editor{align-items:start;gap:10px;grid-template-columns:62px minmax(0,1fr)}
  .wsfj-article .ws-dialogue__turn--editor{grid-template-columns:minmax(0,1fr) 62px}
  .wsfj-article .ws-dialogue__avatar{border-width:3px;height:54px;width:54px}
  .wsfj-article .ws-dialogue__identity strong{font-size:10px}
  .wsfj-article .ws-dialogue__identity small{font-size:8px}
  .wsfj-article p.ws-dialogue__bubble{border-radius:16px;font-size:14px;line-height:1.75;padding:17px 18px}
  .wsfj-article p.ws-dialogue__bubble::before{height:12px;left:-7px;top:20px;width:12px}
  .wsfj-article .ws-dialogue__turn--editor p.ws-dialogue__bubble::before{right:-7px}
  .wsfj-article .wp-block-quote{padding:16px 18px}
  .wsfj-article .wsfj-author{padding:22px 18px}
  .wsfj-article .wsfj-cta{padding:24px 18px}
}
@media(prefers-reduced-motion:reduce){.wsfj-article *{scroll-behavior:auto!important;transition:none!important}}
@media print{.wsfj-article .wp-block-table{overflow:visible}.wsfj-article .wp-block-table table{min-width:0}.wsfj-article .wsfj-faq__grid{display:block}.wsfj-article .wsfj-faq__item{break-inside:avoid;margin-bottom:12px}.wsfj-article .wsfj-cta{display:none}}

/* v1.1.1: retain original portraits; keep their accent borders unbroken. */
.wsfj-article p.ws-dialogue__bubble::before,.wsfj-article p.ws-dialogue__bubble::after{content:none;display:none}
.wsfj-article .wsfj-faq__answer{row-gap:8px}
.wsfj-article .wsfj-faq__answer::before{grid-column:1;grid-row:1}
.wsfj-article .wsfj-faq__answer > p:first-of-type{grid-column:2;grid-row:1}
@media(max-width:700px){
 .wsfj-article .wsfj-faq > .wsfj-kicker{padding:27px 21px 0!important}
 .wsfj-article .wsfj-faq > h2{padding:0 21px!important}
 .wsfj-article .wsfj-faq > .wsfj-faq__intro{padding:0 21px 25px}
}
