/* MATE LOVE / WORK — distinct series atmosphere on the shared engine */
html[data-series="love"]{--series-accent:#D96F91;--series-accent-2:#8F73B6;--series-soft:#F9E9EF;--series-deep:#65435C;--series-wash:#FFF7FA}
html[data-series="work"]{--series-accent:#4C8F9E;--series-accent-2:#6682B1;--series-soft:#E7F2F2;--series-deep:#2F5362;--series-wash:#F5FBFA}
.series-home{background:var(--series-wash,#fffaf5);color:var(--ink)}
.series-head{position:absolute;inset:0 0 auto;z-index:20;background:transparent}
.series-hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;background:radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--series-accent) 18%,transparent),transparent 27%),radial-gradient(circle at 10% 86%,color-mix(in srgb,var(--series-accent-2) 16%,transparent),transparent 28%),linear-gradient(180deg,var(--series-wash),#fff)}
.series-orbit{position:absolute;inset:0;pointer-events:none}.series-orbit i{position:absolute;border:1px solid color-mix(in srgb,var(--series-accent) 26%,transparent);border-radius:50%}.series-orbit i:nth-child(1){width:58vw;height:58vw;right:-22vw;top:-18vw}.series-orbit i:nth-child(2){width:34vw;height:34vw;left:-17vw;bottom:-10vw}.series-orbit i:nth-child(3){width:14px;height:14px;left:14%;top:24%;background:var(--series-accent);border:0;box-shadow:0 0 0 18px color-mix(in srgb,var(--series-accent) 9%,transparent)}
html[data-series="work"] .series-hero:after{content:"";position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(76,143,158,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(76,143,158,.09) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 70%,transparent)}
.series-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:clamp(34px,8vw,110px);align-items:center;padding-top:96px;padding-bottom:70px}.series-copy{max-width:650px}
.series-kicker{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border:1px solid color-mix(in srgb,var(--series-accent) 30%,transparent);border-radius:999px;color:var(--series-deep);font-size:11px;font-weight:900;letter-spacing:.13em}
.series-copy h1{margin:18px 0 16px;font-size:clamp(54px,7.4vw,104px);line-height:.96;letter-spacing:-.065em;max-width:9ch}.series-lead{margin:0;max-width:40ch;font-size:clamp(18px,2vw,25px);line-height:1.55;font-weight:850;color:var(--series-deep)}.series-intro{max-width:47ch;margin:14px 0 0;color:#655f67;font-size:14px;line-height:1.85}
.series-actions{display:flex;gap:10px;align-items:center;margin-top:26px}.series-primary{min-height:58px;padding:0 22px;border:0;border-radius:18px;background:var(--series-accent);color:#fff;font:inherit;font-weight:900;box-shadow:0 8px 0 color-mix(in srgb,var(--series-deep) 80%,#000 20%)}.series-primary:active{transform:translateY(2px);box-shadow:0 6px 0 color-mix(in srgb,var(--series-deep) 80%,#000 20%)}.series-primary span{margin-left:18px}
.series-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.series-facts span{padding:6px 10px;border-radius:999px;background:#fff;color:#766e76;font-size:10px;font-weight:800;border:1px solid rgba(53,39,61,.07)}.series-note{max-width:54ch;margin:14px 0 0;color:#7c737c;font-size:11px;line-height:1.7}
.series-art{position:relative;min-height:540px;display:grid;place-items:center}.series-art:before{content:"";position:absolute;width:min(38vw,440px);aspect-ratio:1;border-radius:43% 57% 55% 45%;background:var(--series-soft);transform:rotate(-8deg)}.series-art-label{position:absolute;top:11%;right:2%;z-index:4;color:var(--series-deep);font-size:9px;font-weight:900;letter-spacing:.18em;transform:rotate(5deg)}.series-art-stack{position:relative;width:min(42vw,480px);height:470px}.series-art-stack img{position:absolute;width:48%;height:48%;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(53,39,61,.1))}.series-art-stack img:nth-child(1){left:2%;bottom:10%;transform:rotate(-5deg)}.series-art-stack img:nth-child(2){right:2%;top:7%;transform:rotate(5deg)}.series-art-stack img:nth-child(3){right:5%;bottom:0;width:40%;height:40%;transform:rotate(2deg)}
.series-statement{padding:110px 0;background:#fff}.series-statement h2{margin:10px 0 18px;max-width:13ch;font-size:clamp(44px,6vw,76px);line-height:1.04;letter-spacing:-.055em}.series-statement p{max-width:50ch;margin:0;color:#675f67;line-height:1.9}
.series-axes-section{padding:100px 0;background:var(--series-soft)}.series-section-head h2{margin:8px 0 28px;max-width:16ch;font-size:clamp(38px,5vw,64px);line-height:1.08;letter-spacing:-.05em}.series-axis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.series-axis-card{min-height:180px;padding:20px;border-radius:26px;background:rgba(255,255,255,.74);border:1px solid rgba(53,39,61,.05)}.series-axis-card small{color:var(--series-accent);font-size:9px;font-weight:900;letter-spacing:.1em}.series-axis-card b{display:block;margin-top:12px;font-size:24px}.series-axis-card p{margin:8px 0 0;color:#67606a;font-size:12px;line-height:1.7}.series-axis-card span{display:block;margin-top:18px;color:#817781;font-size:10px}
.series-types-section{padding:110px 0;background:#fff}.series-type-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.series-type-card{position:relative;min-height:270px;padding:18px;border-radius:28px;background:linear-gradient(160deg,var(--type-soft),#fff);overflow:hidden;border:1px solid rgba(53,39,61,.05)}.series-type-card img{position:absolute;right:-8px;bottom:-5px;width:64%;height:58%;object-fit:contain}.series-type-card small{font-size:9px;font-weight:900;color:var(--series-accent)}.series-type-card b{display:block;position:relative;z-index:2;margin-top:8px;max-width:8ch;font-size:24px;line-height:1.15}.series-type-card span{display:block;position:relative;z-index:2;margin-top:8px;max-width:18ch;color:#665e67;font-size:11px;line-height:1.6}
.series-switch{padding:100px 0 120px;background:#f6f1e9}.series-switch h2{margin:8px 0 28px;font-size:clamp(36px,5vw,58px)}.series-switch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.series-switch-card{min-height:160px;padding:22px;border-radius:28px;text-decoration:none;color:#35273d;background:#fff;border:1px solid rgba(53,39,61,.06)}.series-switch-card small{display:block;font-size:9px;font-weight:900;letter-spacing:.12em}.series-switch-card b{display:block;margin-top:10px;font-size:30px}.series-switch-card span{display:block;margin-top:6px;color:#756d76;font-size:12px}.series-switch-card.love{background:#fae8ef}.series-switch-card.work{background:#e5f1f1}
html[data-series="love"] #quiz .progress i{background:#D96F91}html[data-series="work"] #quiz .progress i{background:#4C8F9E}html[data-series="love"] #quiz .answer.sel{border-color:#D96F91;background:#fff1f5}html[data-series="work"] #quiz .answer.sel{border-color:#4C8F9E;background:#eef8f8}
html[data-series="love"] .reveal{background:radial-gradient(circle at 50% 30%,#f8d7e3,#68485f)}html[data-series="work"] .reveal{background:radial-gradient(circle at 50% 30%,#d9eff0,#315664)}
html[data-series="love"] #result .result-hero-scene{background:linear-gradient(180deg,#fff7fa,#f6edf1)}html[data-series="work"] #result .result-hero-scene{background:linear-gradient(180deg,#f6fbfb,#eaf2f1)}
.series-result-switch{position:relative;z-index:5;display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}.series-result-switch a{padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;text-decoration:none;font-size:10px;font-weight:900}
@media(max-width:767px){.series-hero{min-height:auto}.series-hero-inner{grid-template-columns:1fr;padding-top:94px;padding-bottom:46px;gap:12px}.series-copy h1{font-size:clamp(48px,14vw,68px);max-width:9ch}.series-lead{font-size:18px}.series-intro{font-size:13px}.series-actions{display:grid}.series-primary{width:100%}.series-art{min-height:315px}.series-art-stack{width:100%;height:300px}.series-art:before{width:300px}.series-art-label{top:0}.series-statement{padding:68px 0}.series-statement h2{font-size:39px}.series-axes-section,.series-types-section,.series-switch{padding:72px 0}.series-axis-grid{grid-template-columns:1fr 1fr;gap:9px}.series-axis-card{min-height:155px;padding:16px}.series-axis-card b{font-size:19px}.series-type-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 12px;margin-inline:-16px}.series-type-card{flex:0 0 176px;min-height:240px;scroll-snap-align:start}.series-type-card b{font-size:20px}.series-switch-grid{grid-template-columns:1fr}.series-switch-card{min-height:116px}}
@media(max-width:374px){.series-axis-grid{grid-template-columns:1fr}.series-art{min-height:275px}.series-art-stack{height:260px}}

/* 2026-09-25: approved LOVE / WORK key visuals */
.series-art{overflow:hidden;border-radius:32px;min-height:620px;box-shadow:0 28px 70px rgba(53,39,61,.13)}
.series-art:before{display:none}
.series-art-label{top:18px;right:20px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);transform:none}
.series-art-stack{width:100%;height:620px}
.series-art-stack img{display:none}
.series-art-stack:before{content:"";position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;transform:scale(1.015);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
html[data-series="love"] .series-art-stack:before{background-image:url("../assets/series/mate-love-hero.jpg")}
html[data-series="work"] .series-art-stack:before{background-image:url("../assets/series/mate-work-hero.jpg")}
.series-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(22,20,27,.12))}
@media(max-width:767px){
 .series-hero-inner{gap:22px}
 .series-art{min-height:0;aspect-ratio:9/16;border-radius:24px;box-shadow:0 18px 44px rgba(53,39,61,.12)}
 .series-art-stack{height:100%;width:100%}
 .series-art-label{top:14px;right:14px}
}
@media(max-width:374px){.series-art{min-height:0}.series-art-stack{height:100%}}
@media(prefers-reduced-motion:no-preference){
 .series-art:hover .series-art-stack:before{transform:scale(1.04)}
}

/* 2026-09-25: mobile LOVE/WORK hero follows the FRIEND first-view composition */
@media(max-width:767px){
 .series-head{position:absolute}
 .series-hero{min-height:100svh;display:block;background:var(--series-wash)}
 .series-orbit{display:none}
 .series-hero-inner{display:block;position:relative;min-height:100svh;padding:0!important}
 .series-copy{position:relative;z-index:3;max-width:none;padding:154px 20px 34px;min-height:100svh;display:flex;flex-direction:column;align-items:flex-start}
 .series-kicker{min-height:34px;padding:0 14px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);font-size:11px}
 .series-copy h1{margin:28px 0 22px;max-width:9.5ch;font-size:clamp(43px,12.6vw,58px);line-height:1.04;letter-spacing:-.055em}
 .series-lead{max-width:19em;font-size:18px;line-height:1.55}
 .series-intro{max-width:25em;margin-top:10px;font-size:13px;line-height:1.75}
 .series-actions{width:100%;margin-top:28px}
 .series-primary{min-height:72px;border-radius:20px;background:#35273d;box-shadow:0 8px 0 rgba(35,25,40,.82);font-size:17px;text-align:left;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
 .series-primary span{font-size:27px;font-weight:400}
 .series-facts{order:8;margin-top:16px;align-self:center;justify-content:center;background:rgba(255,255,255,.62);backdrop-filter:blur(8px);border-radius:999px;padding:3px 5px}
 .series-facts span{background:transparent;border:0;padding:5px 8px}
 .series-note{order:9;margin:12px auto 0;text-align:center;max-width:28em;color:#5f5860}
 .series-art{position:absolute;z-index:1;inset:0;min-height:100svh!important;aspect-ratio:auto;border-radius:0;box-shadow:none}
 .series-art-stack{position:absolute;inset:0;width:100%;height:100%}
 .series-art-stack:before{transform:none;background-position:center bottom}
 .series-art:after{inset:0;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 25%,rgba(255,255,255,.34) 52%,rgba(255,255,255,.02) 73%)}
 .series-art-label{display:none}
}

/* 2026-09-25: exact FRIEND motion language for LOVE / WORK landing */
.series-hero{isolation:isolate}
.series-art-stack:before{will-change:transform,filter}
.series-copy{will-change:transform,opacity}
.series-cinema{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.series-cinema i{position:absolute;border-radius:50%;filter:blur(1px);opacity:.28;background:rgba(255,255,255,.78)}
.series-cinema i:nth-child(1){width:18px;height:18px;left:12%;top:68%}
.series-cinema i:nth-child(2){width:9px;height:9px;left:72%;top:30%}
.series-cinema i:nth-child(3){width:28px;height:28px;right:9%;top:58%}
@media(max-width:767px){
 .series-copy{padding-left:20px;padding-right:20px}
 .series-copy h1{font-size:clamp(36px,9.8vw,49px);max-width:410px;margin-top:24px}
 .series-lead{font-size:18px;max-width:340px}
 .series-intro{max-width:335px;font-size:12px}
 .series-actions{width:min(330px,100%);margin-top:18px}
 .series-primary{min-height:58px;border-radius:18px}
 .series-art-stack:before{background-position:center top}
 .series-art:after{background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.72) 23%,rgba(255,255,255,.28) 41%,rgba(255,255,255,.04) 59%,rgba(255,255,255,0) 73%)}
}

/* 2026-09-25 v3 — FRIEND first-view geometry */
@media(max-width:767px){
 .series-hero,.series-hero-inner,.series-copy,.series-art{min-height:max(780px,calc(100svh - 62px))!important}
 .series-copy{padding:32px 20px 390px!important;justify-content:flex-start}
 .series-kicker{margin-top:0}
 .series-copy h1{font-size:clamp(36px,9.8vw,49px)!important;max-width:410px!important;margin:24px 0 16px!important;line-height:1.02!important}
 .series-lead{margin:0 0 6px!important;font-size:18px!important;line-height:1.42!important;font-weight:900}
 .series-intro{margin:0!important;max-width:335px!important;font-size:12px!important;line-height:1.75!important}
 .series-actions{width:min(330px,100%)!important;margin-top:18px!important}
 .series-primary{min-height:58px!important;border-radius:18px!important;padding:0 22px!important}
 .series-facts{align-self:flex-start!important;margin-top:17px!important;padding:8px 11px!important}
 .series-note{margin:10px 0 0!important;text-align:left!important;max-width:335px!important}
 .series-art-stack:before{background-position:center bottom!important}
 .series-art:after{background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.72) 23%,rgba(255,255,255,.28) 41%,rgba(255,255,255,.04) 59%,rgba(255,255,255,0) 73%)!important}
}

/* 2026-09-25: use uploaded 1440x2560 originals on mobile */
@media(max-width:767px){
  html[data-series="love"] .series-art-stack:before{
    background-image:url("../assets/series/mate-love-hero-mobile.png")!important;
  }
  html[data-series="work"] .series-art-stack:before{
    background-image:url("../assets/series/mate-work-hero-mobile.png")!important;
  }
}

/* 2026-09-25: improve LOVE / WORK hero copy contrast over detailed artwork */
@media(max-width:767px){
  .series-copy{isolation:isolate}
  .series-copy h1,
  .series-lead,
  .series-intro,
  .series-note{
    position:relative;
    z-index:1;
    text-shadow:0 1px 10px rgba(255,255,255,.9),0 1px 1px rgba(255,255,255,.95);
  }
  html[data-series="love"] .series-copy h1{color:#1f1820}
  html[data-series="love"] .series-lead{color:#3d2737}
  html[data-series="love"] .series-intro{color:#463b45;font-weight:650}
  html[data-series="love"] .series-note{
    color:#413740;
    background:rgba(255,255,255,.68);
    border:1px solid rgba(255,255,255,.52);
    backdrop-filter:blur(9px);
    padding:8px 10px;
    border-radius:12px;
  }
  html[data-series="love"] .series-art:after{
    background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 22%,rgba(255,255,255,.52) 42%,rgba(255,255,255,.18) 57%,rgba(255,255,255,0) 72%)!important;
  }
  html[data-series="work"] .series-copy h1{color:#142027}
  html[data-series="work"] .series-lead{color:#29444c}
  html[data-series="work"] .series-intro{color:#3f4d51;font-weight:650}
  html[data-series="work"] .series-note{
    color:#35474b;
    background:rgba(255,255,255,.64);
    border:1px solid rgba(255,255,255,.48);
    backdrop-filter:blur(9px);
    padding:8px 10px;
    border-radius:12px;
  }
}

/* 2026-09-25 v2: LOVE/WORK header must stay opaque above artwork */
.series-head{
  background:#fffaf5!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:1px solid rgba(53,39,61,.08)!important;
}
@media(max-width:767px){
  .series-head{background:#fffaf5!important}
}

/* 2026-09-26: keep MATE LOVE / MATE WORK kicker fully below the fixed header */
@media(max-width:767px){
  .series-copy{
    padding-top:88px!important;
  }
  .series-kicker{
    display:inline-flex!important;
    align-items:center!important;
    visibility:visible!important;
    opacity:1;
    position:relative!important;
    z-index:4!important;
    margin:0 0 2px 0!important;
  }
}

/* 2026-09-26: LOVE/WORK lower page now uses the same FRIEND homepage structure */
html[data-series="love"] .series-style-cinematic{background:linear-gradient(180deg,#fff4f7,#f8e3ec)}
html[data-series="work"] .series-style-cinematic{background:linear-gradient(180deg,#f5faf9,#dfeeed)}
html[data-series="love"] .series-style-cinematic .compat-mark b{background:#f8dce7;color:#a85273}
html[data-series="work"] .series-style-cinematic .compat-mark b{background:#dcefeb;color:#35727e}
html[data-series="love"] .phone-sub{background:#f8dce7;color:#7e3f58}
html[data-series="work"] .phone-sub{background:#dcefeb;color:#315f68}
html[data-series="love"] .phone-bars i{background:linear-gradient(90deg,#b55174 var(--v),#eadde2 var(--v))}
html[data-series="work"] .phone-bars i{background:linear-gradient(90deg,#397783 var(--v),#d7e4e2 var(--v))}
.mate-series-card.is-active-series{box-shadow:inset 0 0 0 2px rgba(53,39,61,.14)}
