/* ==========================================================================
   YehEastWest : interactive East x West component  ([data-yh-eastwest])
   Tokens (optional, each has a fallback):
     --yh-ink --yh-paper --yh-accent --yh-accent-2 --yh-sage --yh-muted
     --yh-radius --yh-serif --yh-sans --yh-shadow
   data-variant="light" (default, for paper pages) | "dark" (for burgundy/photo pages)
   ========================================================================== */
.yh-ew{
  --ew-ink:var(--yh-ink,#2b2024);
  --ew-sub:var(--yh-muted,#6c605c);
  --ew-w:var(--yh-accent,#7a1d3a);
  --ew-e:var(--yh-sage,#4d6e58);
  --ew-g:var(--yh-accent-2,#b58a35);
  --ew-disc:var(--yh-paper,#faf6ee);
  --ew-yy:var(--yh-accent,#7a1d3a);
  --ew-card:rgba(255,255,255,.72);
  --ew-line:rgba(60,40,40,.15);
  --ew-on:#fff;
  --ew-lens:var(--yh-paper,#faf6ee);
  --ew-lens-o:.78;
  --ew-lens-hi:.95;
  --ew-lens-lo:.5;
  --ew-r:var(--yh-radius,16px);
  --ew-shadow:var(--yh-shadow,0 18px 40px -26px rgba(58,20,30,.45));
  --ew-serif:var(--yh-serif,"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif);
  --ew-sans:var(--yh-sans,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
  position:relative;box-sizing:border-box;width:100%;color:var(--ew-ink);font-family:var(--ew-sans);
  display:grid;gap:clamp(14px,2.4vw,28px);align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(320px,430px) minmax(0,1fr);
  grid-template-areas:"west center east" "merge merge merge";
  text-align:left;
}
.yh-ew *,.yh-ew *::before,.yh-ew *::after{box-sizing:border-box}
.yh-ew[data-variant="dark"]{
  --ew-ink:var(--yh-paper,#fbf3e8);
  --ew-sub:rgba(251,243,232,.76);
  --ew-w:var(--yh-paper,#fbf3e8);
  --ew-e:var(--yh-accent-2,#e2b866);
  --ew-g:var(--yh-accent-2,#e2b866);
  --ew-disc:var(--yh-paper,#fbf3e8);
  --ew-yy:var(--yh-ink,#2a0f1a);
  --ew-card:rgba(255,255,255,.07);
  --ew-line:rgba(251,243,232,.22);
  --ew-on:var(--yh-ink,#2a0f1a);
  --ew-lens:var(--yh-accent-2,#e2b866);
  --ew-lens-o:.3;
  --ew-lens-hi:.42;
  --ew-lens-lo:.16;
  --ew-shadow:0 20px 44px -26px rgba(0,0,0,.6);
}
.yh-ew[data-layout="mid"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"center center" "west east" "merge merge";align-items:stretch}
.yh-ew[data-layout="narrow"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"center" "west" "east" "merge";align-items:stretch}

/* ---------- centre : venn + toggle ---------- */
.yh-ew__center{grid-area:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.yh-ew__venn{width:100%;max-width:520px;margin:0 auto}
.yh-ew__venn svg{display:block;width:100%;height:auto;overflow:visible}
.yh-ew[data-layout="narrow"] .yh-ew__venn{max-width:400px}

.yh-ew__side{cursor:pointer;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;transform-box:fill-box;transform-origin:center}
.yh-ew__disc{stroke-width:1.6;transition:fill-opacity .5s,stroke-opacity .5s;transform-box:fill-box;transform-origin:center;animation:yhew-breathe 9s ease-in-out infinite alternate}
.yh-ew__side--e .yh-ew__disc{animation-delay:-4.5s}
.yh-ew__side--w .yh-ew__disc{fill:var(--ew-w);stroke:var(--ew-w);fill-opacity:.15;stroke-opacity:.7}
.yh-ew__side--e .yh-ew__disc{fill:var(--ew-e);stroke:var(--ew-e);fill-opacity:.17;stroke-opacity:.75}
.yh-ew__ring{fill:none;stroke:var(--ew-g);stroke-width:1;stroke-opacity:.55;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;animation:yhew-spin 90s linear infinite}
.yh-ew__side--e .yh-ew__ring{animation-direction:reverse}
.yh-ew__lens{fill:var(--ew-lens,var(--ew-g));fill-opacity:var(--ew-lens-o,.3);stroke:var(--ew-g);stroke-width:1.4;stroke-opacity:.85;cursor:pointer;transition:fill-opacity .5s}
.yh-ew__lens-glow{fill:var(--ew-g);fill-opacity:0;pointer-events:none;transition:fill-opacity .5s}

.yh-ew__tx{pointer-events:none;transition:opacity .5s;fill:var(--ew-ink)}
.yh-ew__jp{font:500 24px/1 "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","MS Mincho",serif;opacity:.55}
.yh-ew__nm{font:600 31px/1 var(--ew-serif);letter-spacing:.01em}
.yh-ew__sb{font:600 9.5px/1 var(--ew-sans);letter-spacing:.17em;fill:var(--ew-sub)}
.yh-ew__you{font:italic 600 27px/1 var(--ew-serif);fill:var(--ew-ink)}
.yh-ew__you-sb{font:700 9.5px/1 var(--ew-sans);letter-spacing:.2em;fill:var(--ew-ink);opacity:.8}
.yh-ew__dot{fill:var(--ew-g)}
.yh-ew__yy{transform-box:fill-box;transform-origin:center;animation:yhew-spin 36s linear infinite}
.yh-ew__yy .d{fill:var(--ew-disc);stroke:var(--ew-yy);stroke-width:3}
.yh-ew__yy .y{fill:var(--ew-yy)}
.yh-ew__yy .l{fill:var(--ew-disc)}

/* highlight states :  data-hl = both | west | east */
.yh-ew[data-hl="west"] .yh-ew__side--w{transform:scale(1.04)}
.yh-ew[data-hl="west"] .yh-ew__side--w .yh-ew__disc{fill-opacity:.3;stroke-opacity:1}
.yh-ew[data-hl="west"] .yh-ew__side--e{transform:scale(.97)}
.yh-ew[data-hl="west"] .yh-ew__side--e .yh-ew__disc{fill-opacity:.06;stroke-opacity:.35}
.yh-ew[data-hl="west"] .yh-ew__tx--e{opacity:.4}
.yh-ew[data-hl="east"] .yh-ew__side--e{transform:scale(1.04)}
.yh-ew[data-hl="east"] .yh-ew__side--e .yh-ew__disc{fill-opacity:.32;stroke-opacity:1}
.yh-ew[data-hl="east"] .yh-ew__side--w{transform:scale(.97)}
.yh-ew[data-hl="east"] .yh-ew__side--w .yh-ew__disc{fill-opacity:.06;stroke-opacity:.35}
.yh-ew[data-hl="east"] .yh-ew__tx--w{opacity:.4}
.yh-ew[data-hl="west"] .yh-ew__lens,.yh-ew[data-hl="east"] .yh-ew__lens{fill-opacity:var(--ew-lens-lo)}
.yh-ew[data-hl="both"] .yh-ew__lens-glow{fill-opacity:.2}
.yh-ew[data-hl="both"] .yh-ew__lens{fill-opacity:var(--ew-lens-hi)}

/* ---------- toggle ---------- */
.yh-ew__toggle{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--ew-line);background:var(--ew-card);max-width:100%}
.yh-ew__toggle button{
  appearance:none;-webkit-appearance:none;border:0;margin:0;cursor:pointer;background:transparent;color:var(--ew-ink);
  min-height:44px;min-width:44px;padding:0 clamp(14px,3vw,22px);border-radius:999px;
  font:600 .88rem/1 var(--ew-sans);letter-spacing:.06em;-webkit-tap-highlight-color:transparent;
  transition:background .3s,color .3s,transform .3s;
}
.yh-ew__toggle button:hover{background:rgba(127,127,127,.14)}
.yh-ew__toggle button[aria-checked="true"]{background:var(--ew-g);color:var(--ew-on);cursor:default}
.yh-ew:not([data-variant="dark"]) .yh-ew__toggle button[aria-checked="true"]{background:var(--yh-accent,#7a1d3a)}
.yh-ew__toggle button:focus-visible,.yh-ew__head:focus-visible{outline:3px solid var(--ew-g);outline-offset:2px}

/* ---------- cards ---------- */
.yh-ew__card{
  position:relative;overflow:hidden;min-width:0;border-radius:var(--ew-r);padding:clamp(18px,2.2vw,26px);
  background:var(--ew-card);border:1px solid var(--ew-line);box-shadow:var(--ew-shadow);cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .45s,border-color .4s,box-shadow .4s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.yh-ew__card--w{grid-area:west;--c:var(--ew-w)}
.yh-ew__card--e{grid-area:east;--c:var(--ew-e)}
.yh-ew__card::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:var(--c);opacity:.05;pointer-events:none;transition:opacity .4s}
.yh-ew__card::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--c);opacity:.55;transition:opacity .4s,top .4s,bottom .4s}
.yh-ew__card--e::after{left:auto;right:0;border-radius:3px 0 0 3px}
.yh-ew[data-hl="west"] .yh-ew__card--w,.yh-ew[data-hl="east"] .yh-ew__card--e{transform:translateY(-3px);border-color:var(--c)}
.yh-ew[data-hl="west"] .yh-ew__card--w::before,.yh-ew[data-hl="east"] .yh-ew__card--e::before{opacity:.13}
.yh-ew[data-hl="west"] .yh-ew__card--w::after,.yh-ew[data-hl="east"] .yh-ew__card--e::after{opacity:1;top:0;bottom:0}
.yh-ew[data-hl="west"] .yh-ew__card--e,.yh-ew[data-hl="east"] .yh-ew__card--w{opacity:.55}

.yh-ew__head{
  appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:10px;min-height:48px;position:relative;z-index:1;
}
.yh-ew__kj{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--c);color:var(--c);font:600 1.25rem/1 "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","MS Mincho",serif;
  transition:background .4s,color .4s;
}
.yh-ew[data-hl="west"] .yh-ew__card--w .yh-ew__kj,.yh-ew[data-hl="east"] .yh-ew__card--e .yh-ew__kj{background:var(--c);color:var(--ew-on)}
.yh-ew[data-variant="dark"][data-hl="west"] .yh-ew__card--w .yh-ew__kj{color:var(--yh-ink,#2a0f1a)}
.yh-ew__ttl{display:block;font:600 clamp(1.45rem,2.4vw,1.8rem)/1.05 var(--ew-serif);letter-spacing:.005em}
.yh-ew__tag{display:block;margin-top:5px;font:700 .68rem/1 var(--ew-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ew-sub)}
.yh-ew__body{position:relative;z-index:1;display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.yh-ew__body>div{overflow:hidden;min-height:0}
.yh-ew__desc{margin:14px 0 4px;font-size:.96rem;line-height:1.55;color:var(--ew-sub)}
.yh-ew__chips{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.yh-ew__chips li{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--c);
  background:transparent;color:var(--ew-ink);font:600 .8rem/1.2 var(--ew-sans);letter-spacing:.01em;
  transition:background .3s,color .3s,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.yh-ew__chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none;transition:background .3s}
.yh-ew__chips li:hover{background:var(--c);color:var(--ew-on);transform:translateY(-2px)}
.yh-ew__chips li:hover::before{background:var(--ew-on)}
.yh-ew[data-variant="dark"] .yh-ew__card--w .yh-ew__chips li:hover{color:var(--yh-ink,#2a0f1a)}
.yh-ew[data-variant="dark"] .yh-ew__card--w .yh-ew__chips li:hover::before{background:var(--yh-ink,#2a0f1a)}

/* narrow : the unselected card folds to its heading, tap toggles West / Together / East */
.yh-ew[data-layout="narrow"][data-sel="west"] .yh-ew__card--e .yh-ew__body,
.yh-ew[data-layout="narrow"][data-sel="east"] .yh-ew__card--w .yh-ew__body{grid-template-rows:0fr}
.yh-ew[data-layout="narrow"] .yh-ew__ttl{font-size:1.45rem}

/* ---------- integration line ---------- */
.yh-ew__merge{grid-area:merge;margin:clamp(6px,1.5vw,16px) auto 0;max-width:46rem;text-align:center;position:relative}
.yh-ew__merge-k{display:inline-block;margin:0 0 10px;font:700 .7rem/1 var(--ew-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ew-g)}
.yh-ew__merge p{margin:0;font:italic 500 clamp(1.2rem,2.3vw,1.6rem)/1.5 var(--ew-serif);color:var(--ew-ink)}
.yh-ew__stroke{display:block;width:min(260px,64%);height:18px;margin:14px auto 0;overflow:visible}
.yh-ew__stroke path{fill:none;stroke-linecap:round}
.yh-ew__stroke .a{stroke:var(--ew-g);stroke-width:5;stroke-opacity:.9}
.yh-ew__stroke .b{stroke:var(--ew-ink);stroke-width:1.6;stroke-opacity:.4}

.yh-ew__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- entrance (JS adds .is-prep then .is-in; no JS => nothing is hidden) ---------- */
.yh-ew.is-prep .yh-ew__side--w{transform:translateX(70px);opacity:0}
.yh-ew.is-prep .yh-ew__side--e{transform:translateX(-70px);opacity:0}
.yh-ew.is-prep .yh-ew__lens,.yh-ew.is-prep .yh-ew__tx,.yh-ew.is-prep .yh-ew__yy-wrap{opacity:0}
.yh-ew.is-prep .yh-ew__card,.yh-ew.is-prep .yh-ew__toggle,.yh-ew.is-prep .yh-ew__merge{opacity:0;transform:translateY(16px)}
.yh-ew.is-prep .yh-ew__chips li{opacity:0;transform:translateY(8px)}
.yh-ew.is-prep .yh-ew__stroke path{stroke-dasharray:1;stroke-dashoffset:1}
.yh-ew.is-in .yh-ew__side{transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity 1s}
.yh-ew.is-in .yh-ew__lens,.yh-ew.is-in .yh-ew__tx,.yh-ew.is-in .yh-ew__yy-wrap{transition:opacity 1s .7s,fill-opacity .5s}
.yh-ew.is-in .yh-ew__card,.yh-ew.is-in .yh-ew__toggle,.yh-ew.is-in .yh-ew__merge{transition:opacity .9s .5s,transform .9s .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.yh-ew.is-in .yh-ew__card--e{transition-delay:.65s,.65s,0s,0s}
.yh-ew.is-in .yh-ew__merge{transition-delay:1.1s,1.1s,0s,0s}
.yh-ew.is-in .yh-ew__chips li{transition:opacity .6s calc(.8s + var(--i,0)*45ms),transform .6s calc(.8s + var(--i,0)*45ms) cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.yh-ew.is-in .yh-ew__stroke path{transition:stroke-dashoffset 1.4s 1.5s cubic-bezier(.5,.1,.2,1)}
.yh-ew.is-in .yh-ew__stroke .b{transition-delay:1.9s}
/* once settled, normal hover transitions return */
.yh-ew.is-done .yh-ew__card{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .45s,border-color .4s,box-shadow .4s}
.yh-ew.is-done .yh-ew__chips li{transition:background .3s,color .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}

@keyframes yhew-spin{to{transform:rotate(360deg)}}
@keyframes yhew-breathe{from{transform:scale(1)}to{transform:scale(1.018)}}

@media (prefers-reduced-motion:reduce){
  .yh-ew *,.yh-ew *::before,.yh-ew *::after{animation:none!important;transition:none!important}
  .yh-ew.is-prep .yh-ew__side--w,.yh-ew.is-prep .yh-ew__side--e,.yh-ew.is-prep .yh-ew__lens,.yh-ew.is-prep .yh-ew__tx,
  .yh-ew.is-prep .yh-ew__yy-wrap,.yh-ew.is-prep .yh-ew__card,.yh-ew.is-prep .yh-ew__toggle,.yh-ew.is-prep .yh-ew__merge,.yh-ew.is-prep .yh-ew__chips li{opacity:1;transform:none}
  .yh-ew.is-prep .yh-ew__stroke path{stroke-dashoffset:0}
}