/* ======================================================================
   Case study layout — long-form project pages built as a sequence of
   chapters. Loaded after style.css and motion.css.
   ====================================================================== */
.cs {
  --sky:    #7fcbe8;
  --sky-2:  #bfe6f4;
  --red:    #e8412f;
  --yellow: #f6b81c;
  --woody:  #f3c64a;
  --buzz:   #7b5bb6;
  --lime:   #9fd94a;
}
.cs main { display: block; }

/* ---------- clouds ---------- */
.cs-clouds {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--sky);
  background-image:
    radial-gradient(closest-side, #fff 96%, transparent) ,
    radial-gradient(closest-side, #fff 96%, transparent),
    radial-gradient(closest-side, #fff 96%, transparent);
  background-size: 140px 56px, 90px 52px, 110px 44px;
  background-position: 0 0, 50px -14px, 100px 6px;
  -webkit-mask: none;
  opacity: 1;
}
.cs-clouds {
  background-image:
    radial-gradient(ellipse 34px 18px at 40px 40px, #fff 98%, transparent 100%),
    radial-gradient(ellipse 22px 22px at 62px 30px, #fff 98%, transparent 100%),
    radial-gradient(ellipse 26px 16px at 84px 42px, #fff 98%, transparent 100%);
  background-size: 220px 150px;
  background-position: 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .cs-clouds { animation: clouds 60s linear infinite; }
  @keyframes clouds { to { background-position: 220px 0; } }
}

/* ---------- hero ---------- */
.cs-hero {
  position: relative; isolation: isolate;
  padding: clamp(1rem, 2.4vw, 2rem) clamp(1rem, 2.6vw, 2.4rem) clamp(1.2rem, 2.6vw, 2.4rem);
  color: var(--ink);
}
.cs-hero > :not(.cs-clouds) { position: relative; z-index: 1; }
.cs-hero-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cs-hero .eyebrow { margin: 0; color: var(--ink); font-size: 0.78rem; }
.cs-hero .eyebrow a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cs-stamp {
  margin: 0; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.35rem 0.8rem; font-size: 0.75rem; transform: rotate(2deg);
}
.cs-title {
  margin: clamp(0.6rem, 2vw, 1.4rem) 0 0; text-align: center; line-height: .82;
  font-family: var(--chunk); font-weight: 400; text-transform: none;
  font-size: clamp(4.2rem, 17vw, 17rem); letter-spacing: -0.02em;
}
.cs-title span { display: inline-block; -webkit-text-stroke: 0.035em var(--ink); paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 var(--ink); }
.cs-t1 { color: var(--red); transform: rotate(-5deg); }
.cs-t2 { color: var(--yellow); transform: rotate(3deg); }
@media (prefers-reduced-motion: no-preference) {
  .cs-t1 { animation: hop 2.6s var(--spring) infinite; }
  .cs-t2 { animation: hop 2.6s var(--spring) infinite .18s; }
  @keyframes hop {
    0%, 70%, 100% { translate: 0 0; }
    80% { translate: 0 -8%; }
    90% { translate: 0 2%; }
  }
}
.cs-sub {
  max-width: 46ch; margin: clamp(1rem, 2.4vw, 1.6rem) auto clamp(1.2rem, 3vw, 2rem);
  text-align: center; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); line-height: 1.45;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; padding: 0.8rem 1.1rem;
}
html[lang="ko"] .cs-sub, html[lang="ko"] .cs-lead, html[lang="ko"] .cs-card p { word-break: keep-all; }
.cs-hero-film { margin: 0; border: 1.5px solid var(--ink); border-radius: calc(var(--win-r) * .8); overflow: hidden; background: #000; }
.cs-vid { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cs-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 1rem 0 0;
}
.cs-meta > div { background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; padding: 0.6rem 0.8rem; }
.cs-meta dt { font-size: 0.68rem; text-transform: uppercase; color: var(--ink-2); }
.cs-meta dd { margin: 0.15rem 0 0; font-size: 0.86rem; line-height: 1.3; }

/* ---------- chapters ---------- */
.cs-sec { padding: clamp(1.4rem, 3.6vw, 3.4rem); }
.cs-head { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(0.8rem, 2vw, 1.6rem); align-items: end; margin-bottom: clamp(1.4rem, 3vw, 2.6rem); }
.cs-n {
  grid-row: span 2; font-family: var(--chunk); font-size: clamp(3rem, 8vw, 7.5rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
}
.cs-kick { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.cs-h {
  margin: 0.3rem 0 0; font-family: var(--chunk); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.6vw, 4.4rem); line-height: .95; letter-spacing: -0.01em; color: var(--ink);
}
html[lang="ko"] .cs-h .ko { font-family: "Noto Sans KR", var(--body); font-weight: 500; letter-spacing: -0.04em; line-height: 1.12; }
.cs-lead { margin: 0; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.5; max-width: 52ch; }
.cs-lead.narrow { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.cs figure { margin: 0; }
.cs figure img, .cs figure video {
  display: block; width: 100%; height: auto; border-radius: calc(var(--win-r) * .6);
  border: 1.5px solid var(--ink); background: var(--paper-2);
}
.cs figure.cs-plain img { border: 0; background: transparent; border-radius: 0; }
.cs figcaption { margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); max-width: 56ch; }
.cs figcaption b { display: block; color: var(--ink); font-family: var(--chunk); font-weight: 400; text-transform: uppercase; font-size: 1rem; margin-bottom: 0.2rem; }
.cs-wide { margin-top: clamp(1.4rem, 3vw, 2.4rem) !important; }
.cs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 2.2rem); align-items: start; }

/* brief */
.cs-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.cs-stats li { border: 1.5px solid var(--ink); border-radius: 18px; padding: 1rem; background: var(--sky-2); }
.cs-stats li:nth-child(2) { background: #fde9a6; }
.cs-stats li:nth-child(3) { background: #ffd3c9; }
.cs-stats li:nth-child(4) { background: #e2f3c6; }
.cs-stats b { display: block; font-family: var(--chunk); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; }
.cs-stats li > span { display: block; margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.4; }
.cs-timeline {
  list-style: none; margin: clamp(1.8rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative;
}
.cs-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 0.6rem; height: 2px; background: var(--ink); }
.cs-timeline li { position: relative; padding-top: 1.8rem; font-size: 0.84rem; line-height: 1.35; padding-right: 0.6rem; }
.cs-timeline li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink);
}
.cs-timeline i { display: block; font-style: normal; font-family: var(--chunk); font-size: 1.3rem; }
.cs-timeline .next::before { background: var(--yellow); }
.cs-timeline .next { color: var(--ink); }
.cs-timeline .next i { color: var(--red); }

/* insight */
.cs-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: center; }
.cs-quote {
  margin: 0; font-family: "Caveat", cursive; font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.05;
  color: var(--ink); transform: rotate(-3deg); text-align: center;
  background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 24px; padding: 1.2rem 1rem;
  box-shadow: 6px 6px 0 var(--ink);
}

/* flavours */
.cs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.6rem); margin-top: 1rem; }
.cs-card { border: 1.5px solid var(--ink); border-radius: 22px; padding: clamp(1rem, 2.4vw, 1.8rem); }
.cs-card h3 { margin: 0 0 0.6rem; font-family: var(--chunk); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1; text-transform: uppercase; }
.cs-card p { margin: 0; font-size: 0.98rem; line-height: 1.5; }
.cs-woody {
  background-color: #fbe08a;
  background-image: linear-gradient(rgba(176,70,40,.18) 2px, transparent 2px), linear-gradient(90deg, rgba(176,70,40,.18) 2px, transparent 2px);
  background-size: 26px 26px;
}
.cs-buzz { background: linear-gradient(135deg, #efe7fb 0 60%, #dcf2c0 60% 100%); }

/* posters */
.cs-posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.6rem, 1.6vw, 1.4rem); }
.cs-posters figure { transform: rotate(var(--r, 0deg)); transition: transform .5s var(--spring); }
.cs-posters figure:hover { transform: rotate(0) scale(1.06); z-index: 2; position: relative; }
.cs-posters img { box-shadow: 0 18px 30px -18px rgba(17,17,17,.5); }

/* touchpoints line */
.cs-line { list-style: none; margin: clamp(1.6rem, 3.6vw, 2.8rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; counter-reset: tp; }
.cs-line li {
  counter-increment: tp; border: 1.5px solid var(--ink); border-radius: 999px; padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  font-size: 0.86rem; background: #fff; display: inline-flex; align-items: center; gap: 0.5rem;
}
.cs-line li::before {
  content: counter(tp); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 0.72rem;
}

/* goods */
.cs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); }
.cs-good { border: 1.5px solid var(--ink); border-radius: 22px; padding: 0.8rem; background: #fff; transition: transform .45s var(--spring), box-shadow .3s; }
.cs-good:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 22px 34px -22px rgba(17,17,17,.6); }
.cs-good img { aspect-ratio: 1 / 1; object-fit: contain; border: 0 !important; background: #fff !important; }
.cs-good figcaption { margin-top: 0.4rem; }

/* andy */
.cs-andy { position: relative; overflow: hidden; }
.cs-andy-word {
  position: absolute; right: -2%; top: 2%; margin: 0; z-index: 0; pointer-events: none;
  font-family: "Caveat", cursive; font-size: clamp(6rem, 22vw, 20rem); line-height: 1; color: rgba(17,17,17,.08);
  transform: rotate(-8deg);
}
.cs-andy > :not(.cs-andy-word) { position: relative; z-index: 1; }

/* social */
.cs-social .cs-vid { aspect-ratio: 16 / 9; }
.cs-social figure:nth-child(2) .cs-vid { aspect-ratio: 16 / 9; object-position: 50% 60%; }
.cs-ideas { list-style: none; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-ideas li { background: var(--sky-2); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.86rem; }

/* map */
.cs-orbit { display: grid; place-items: center; gap: 1.2rem; margin: 0 auto clamp(1.6rem, 4vw, 3rem); }
.cs-core {
  display: grid; place-items: center; text-align: center; width: clamp(9rem, 22vw, 15rem); aspect-ratio: 1;
  border-radius: 50%; border: 1.5px solid var(--ink); background: var(--yellow);
  font-family: var(--chunk); font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: .9; color: var(--red);
  -webkit-text-stroke: 1px var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .cs-core { animation: wobble2 5s ease-in-out infinite alternate; }
  @keyframes wobble2 { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
}
.cs-orbit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 46rem; }
.cs-orbit li { border: 1.5px solid var(--ink); border-radius: 999px; padding: 0.5rem 1rem; background: #fff; font-size: 0.9rem; }
.cs-map .credit { max-width: 70ch; color: var(--ink-2); font-size: 0.8rem; line-height: 1.5; border-top: 1.5px solid var(--ink); padding-top: 1rem; }
.cs-map .pnav { border-top: 0; padding-left: 0; padding-right: 0; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .cs-meta, .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-posters, .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cs-hero-top { flex-direction: column; gap: 0.5rem; }
  .cs-split, .cs-duo { grid-template-columns: 1fr; }
  .cs-timeline { grid-template-columns: 1fr; }
  .cs-timeline::before { left: 0.55rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .cs-timeline li { padding: 0 0 1rem 2rem; }
  .cs-timeline li::before { top: 0.1rem; }
}

/* uneven pairs: wide image + tall image */
.cs-pack .cs-split, .cs-andy .cs-split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 600px) {
  .cs-pack .cs-split, .cs-andy .cs-split { grid-template-columns: 1fr; }
}

/* ---------- a case-study block inside a regular project page ---------- */
.cs-in {
  max-width: var(--max); margin: clamp(2rem, 6vh, 4rem) auto; padding: clamp(1.4rem, 3.6vw, 3rem) var(--pad);
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  background: linear-gradient(180deg, #eaf8f2, #fff 30%);
}
.cs-in .cs-head { margin-top: clamp(2.4rem, 6vw, 4.5rem); }
.cs-in .cs-head:first-child { margin-top: 0; }
.cs-in .credit { margin-top: clamp(1.6rem, 4vw, 2.6rem); font-size: 0.8rem; color: var(--ink-2); }

/* Mangbingo route */
.mb-journey { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: start; }
.mb-journey > figcaption { display: none; }
.mb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.mb-steps li {
  display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.7rem; align-items: center;
  border: 1.5px solid var(--ink); border-radius: 14px; padding: 0.45rem 0.7rem; background: #fff;
  transition: transform .35s var(--spring), background .2s;
}
.mb-steps li:hover { transform: translateX(6px); background: #fff7b8; }
.mb-num {
  grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: #f6e94a; border: 1.5px solid var(--ink); font-family: var(--chunk); font-size: 0.9rem;
}
.mb-steps b { font-family: var(--chunk); font-weight: 400; text-transform: uppercase; font-size: 0.92rem; line-height: 1.1; }
.mb-steps li > span:last-child { font-size: 0.8rem; color: var(--ink-2); line-height: 1.3; }
.mb-film { margin-bottom: clamp(1rem, 2.6vw, 2.2rem) !important; }
.mb-film .cs-vid { aspect-ratio: 16 / 9; }
.mb-renders figure img { aspect-ratio: 16 / 9; object-fit: cover; }
.mb-renders figure:nth-child(4) img, .mb-renders figure:nth-of-type(4) img { object-fit: contain; background: #fff; }
.mb-elev { margin-top: clamp(1rem, 2.6vw, 2rem); }
.mb-goods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); margin-top: clamp(1rem, 2.6vw, 2rem); }
.mb-goods .cs-good img { aspect-ratio: 4 / 3; }
.mb-goods .mb-wide2 { grid-column: span 2; }
.mb-goods .mb-wide2 img { aspect-ratio: 2.4 / 1; }
@media (max-width: 860px) {
  .mb-journey { grid-template-columns: 1fr; }
  .mb-goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- breathing room on case-study pages ---------- */
.cs-hero, .cs-sec { padding-left: clamp(1.25rem, 7vw, 8rem); padding-right: clamp(1.25rem, 7vw, 8rem); }
.cs-hero > :not(.cs-clouds), .cs-sec > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.cs-in { padding-left: clamp(1rem, 3vw, 2.5rem); padding-right: clamp(1rem, 3vw, 2.5rem); border-radius: calc(var(--win-r) * .8); border: 1.5px solid var(--ink); }

/* store panels: three photos at their own proportions, same height */
.cs-store { display: flex; gap: clamp(0.6rem, 1.6vw, 1.2rem); margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.cs-store figure { flex: var(--f, 1) 1 0; }
.cs-store figure:nth-child(1) { --f: 0.553; }
.cs-store figure:nth-child(2) { --f: 0.677; }
.cs-store figure:nth-child(3) { --f: 1.307; }
.cs-store img { height: 100%; object-fit: cover; }
.cs-cap { margin: 0.6rem 0 0; font-size: 0.86rem; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 600px) { .cs-store { flex-wrap: wrap; } .cs-store figure:nth-child(3) { flex-basis: 100%; } }
/* goods: show the whole product */
.cs-good img { aspect-ratio: 4 / 3; object-fit: contain; padding: 0.4rem; }

/* research boards and collages */
.cs-board img { background: #fff; }
.cs-gap { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.cs-mb { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.cs-sub-h { margin: clamp(2rem, 5vw, 3.4rem) 0 0.6rem; font-family: var(--chunk); font-weight: 400; text-transform: uppercase; font-size: clamp(1.1rem, 2.2vw, 1.7rem); line-height: 1.05; }
html[lang="ko"] .cs-sub-h .ko { font-family: "Noto Sans KR", var(--body); font-weight: 500; letter-spacing: -0.03em; }
.cs-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 1.4vw, 1rem); }
.cs-collage figure img { aspect-ratio: 1 / 1; object-fit: cover; }
.cs-collage-4 figure img { object-fit: contain; background: #fff; padding: 0.4rem; }
.cs-collage figure:nth-child(odd) { transform: rotate(-1.2deg); }
.cs-collage figure:nth-child(even) { transform: rotate(1deg); }
.cs-collage figure { transition: transform .45s var(--spring); }
.cs-collage figure:hover { transform: scale(1.05) rotate(0); position: relative; z-index: 2; }
.cs-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
@media (max-width: 860px) { .cs-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-stats-3 { grid-template-columns: 1fr; } }

/* hero with the main poster */
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3.5rem); align-items: center; margin: clamp(0.6rem, 2vw, 1.4rem) 0 clamp(1rem, 2.4vw, 1.6rem); }
.cs-hero-grid .cs-title { font-size: clamp(4rem, 12vw, 12rem); margin: 0; }
.cs-hero-grid .cs-sub { margin-left: 0; margin-right: 0; text-align: left; }
.cs-poster-main { margin: 0; transform: rotate(2.5deg); }
.cs-poster-main img { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); border-radius: calc(var(--win-r) * .6); box-shadow: 10px 12px 0 var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .cs-poster-main { animation: posterIn 1s var(--spring) both .3s; }
  @keyframes posterIn { from { opacity: 0; transform: translateY(40px) rotate(9deg); } }
}
@media (max-width: 760px) { .cs-hero-grid { grid-template-columns: 1fr; } .cs-poster-main { max-width: 26rem; margin: 0 auto; } }

/* board grids (plan slides shown whole) */
.cs-boards { display: grid; gap: clamp(0.8rem, 2vw, 1.6rem); margin-top: clamp(1.2rem, 3vw, 2.2rem); }
.cs-boards.cols-1 { grid-template-columns: 1fr; }
.cs-boards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-boards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-boards .cs-board img { cursor: zoom-in; transition: transform .4s var(--spring), box-shadow .3s; }
.cs-boards .cs-board img:hover { transform: translateY(-4px); box-shadow: 0 20px 30px -18px rgba(17,17,17,.55); }
.cs-stats + .cs-boards, .cs-lead + .cs-boards { margin-top: clamp(1.2rem, 3vw, 2rem); }
.cs-lead.narrow + .cs-stats { margin-top: 0; }
@media (max-width: 700px) { .cs-boards.cols-2, .cs-boards.cols-3 { grid-template-columns: 1fr; } }
.cs-title-long { font-size: clamp(3rem, 11vw, 11rem); }

/* per-IP hero backdrops (Toy Story keeps the clouds) */
.cs-sea .cs-clouds {
  background-color: #0b4f7d;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60'%3E%3Cpath d='M0 30 Q25 12 50 30 T100 30 T150 30 T200 30' fill='none' stroke='%23e9f8ff' stroke-opacity='.5' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20 Q15 9 30 20 T60 20 T90 20 T120 20' fill='none' stroke='%237fd6ff' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 40% at 70% 0%, rgba(120,220,255,.35), transparent 70%),
    linear-gradient(180deg, #1683b8 0%, #0b5a8f 45%, #06304f 100%);
  background-size: 200px 64px, 120px 34px, 100% 100%, 100% 100%;
  background-position: 0 0, 60px 18px, 0 0, 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .cs-sea .cs-clouds { animation: waves 16s linear infinite; }
  @keyframes waves { to { background-position: 200px 0, -60px 18px, 0 0, 0 0; } }
}
.cs-sea .cs-hero .eyebrow, .cs-sea .cs-hero .eyebrow a { color: #fff; }
.cs-sea .cs-t1 { color: #e8412f; } .cs-sea .cs-t2 { color: #f6c21c; }
.cs-ditto .cs-clouds {
  background-color: #b48cf5;
  background-image:
    radial-gradient(circle at 30% 40%, #2b1340 0 2.2px, transparent 3px),
    radial-gradient(circle at 70% 40%, #2b1340 0 2.2px, transparent 3px),
    radial-gradient(ellipse 34px 22px at 50% 55%, #c9a7fb 98%, transparent 100%);
  background-size: 64px 48px, 64px 48px, 64px 48px;
}
@media (prefers-reduced-motion: no-preference) {
  .cs-ditto .cs-clouds { animation: clouds 50s linear infinite; }
}
.cs-ditto .cs-t1 { color: #b48cf5; } .cs-ditto .cs-t2 { color: #f6d21c; }
.cs-ditto .cs-stats li { background: #efe4ff; }

/* title with an official logo */
.cs-logo-title { display: flex; flex-direction: column; align-items: center; gap: clamp(0.2rem, 1vw, 0.8rem); }
.cs-logo { background: transparent !important; display: block; width: min(44rem, 88%); height: auto; filter: drop-shadow(0 10px 0 rgba(0,0,0,.25)); }
.cs-logo-title .cs-t2 { font-size: clamp(3rem, 10vw, 9.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .cs-logo { animation: logoIn 1s var(--spring) both, bob 4s ease-in-out 1s infinite alternate; }
  @keyframes logoIn { from { opacity: 0; transform: translateY(-30px) scale(.85) rotate(-3deg); } }
}

/* titles stay still */
.cs-title, .cs-title span, .cs-logo { animation: none !important; translate: none !important; }

/* ---------- finale: the whole line-up lands at once ---------- */
.cs-finale { background: radial-gradient(ellipse 80% 60% at 50% 40%, #1d6fa8, #082a45 75%); color: #fff; overflow: hidden; }
.cs-finale .ms-head { text-align: center; max-width: 52rem; margin: 0 auto clamp(0.6rem, 2vw, 1.4rem); }
.cs-finale .cs-kick { color: rgba(255,255,255,.7); }
.cs-finale .cs-h { color: #fff; }
.cs-finale .ms-logo { display: block; width: min(24rem, 60%); height: auto; margin: 0.6rem auto 0.4rem; background: transparent !important; }
.ms-sub { margin: 0.8rem auto 0; max-width: 46ch; color: rgba(255,255,255,.8); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.5; }
.ms-stage { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; aspect-ratio: 100 / 64; }
.ms-i {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  transform: rotate(var(--r)); filter: drop-shadow(0 14px 18px rgba(0,0,0,.45));
  transition: transform .45s var(--spring), filter .3s;
}
.ms-i:hover { transform: rotate(0deg) scale(1.12); z-index: 5; filter: drop-shadow(0 22px 26px rgba(0,0,0,.55)); }
@media (prefers-reduced-motion: no-preference) {
  .js .cs-finale .ms-i { opacity: 0; transform: translate(calc(50vw * 0 + (50% - var(--x)) * 4), 40%) scale(.2) rotate(calc(var(--r) * 6)); }
  .js .cs-finale.in .ms-i {
    opacity: 1; transform: rotate(var(--r));
    transition: opacity .35s ease, transform .9s var(--spring);
    transition-delay: calc(var(--k) * 55ms + 250ms);
  }
  .js .cs-finale.in .ms-i:hover { transform: rotate(0deg) scale(1.12); transition-delay: 0s; }
}
@media (max-width: 700px) {
  .ms-stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; align-items: center; }
  .ms-i { position: static; width: 100%; }
}
.cs-ditto .cs-finale { background: radial-gradient(ellipse 80% 60% at 50% 40%, #b48cf5, #3d1f6e 78%); }
.cs-finale.ms-ts { background: radial-gradient(ellipse 80% 60% at 50% 40%, #7fcbe8, #1d4f7a 78%); }

/* ---------- item cards, grouped like the plan ---------- */
.it-wrap { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); margin-top: clamp(1.2rem, 3vw, 2rem); }
.it-h { margin: 0 0 0.8rem; font-family: var(--chunk); font-weight: 400; text-transform: uppercase; font-size: clamp(1rem, 1.8vw, 1.4rem); display: flex; align-items: center; gap: 0.6rem; }
.it-h::after { content: ""; flex: 1; height: 1.5px; background: var(--ink); opacity: .25; }
html[lang="ko"] .it-h .ko { font-family: "Noto Sans KR", var(--body); font-weight: 500; }
.it-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 44%), 1fr)); gap: clamp(0.7rem, 1.8vw, 1.2rem); }
.it { margin: 0; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; padding: 0.8rem 0.8rem 0.9rem; transition: transform .45s var(--spring), box-shadow .3s; }
.it:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 22px 34px -22px rgba(17,17,17,.6); }
.it-img { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 14px; background: radial-gradient(circle at 50% 45%, #fff, #f1efec); }
.it-img img { width: 84%; height: 84%; object-fit: contain; background: transparent !important; border: 0 !important; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); }
.it figcaption { margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.35; color: var(--ink); font-weight: 500; }
html[lang="ko"] .it figcaption { word-break: keep-all; }
.ms-mid .ms-stage { aspect-ratio: 100 / 58; }
.it-img { position: relative; }
.cs .it-img img { position: absolute; inset: 8%; width: 84%; height: 84%; }

/* ---------- cover hero, after the plan deck's first page ---------- */
.cs-cover { position: relative; isolation: isolate; aspect-ratio: 1083 / 750; min-height: 26rem; max-height: 92svh; width: auto; overflow: hidden; background: #0a2a44; }
.cv-art { position: absolute; inset: 0; z-index: 0; }
.cv-art video, .cv-art img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0 !important; border-radius: 0 !important; }
.cv-num {
  position: absolute; z-index: 1; top: 50%; translate: 0 -50%;
  font-family: "Inter Tight", var(--display); font-weight: 900; line-height: .78; letter-spacing: -0.06em;
  font-size: clamp(14rem, 62vw, 52rem); color: var(--num); pointer-events: none; user-select: none;
  font-variation-settings: "wght" 900; -webkit-text-stroke: 0.06em var(--num);
}
.cv-left .cv-num { left: -2%; }
.cv-right .cv-num { right: -1%; }
.cv-title { position: absolute; z-index: 2; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.cv-left .cv-title { left: 4%; bottom: 14%; max-width: 46%; padding: 1rem 1.2rem; background: rgba(20,40,70,.28); backdrop-filter: blur(3px); border-radius: 8px; }
.cv-right .cv-title { left: 32%; top: 34%; max-width: 40%; text-align: center; }
.cv-logo { display: block; width: min(22rem, 100%); height: auto; margin: 0 0 0.6rem; background: transparent !important; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.cv-right .cv-logo { margin: 0 auto 0.6rem; }
.cv-k { margin: 0; font-size: clamp(0.8rem, 1.2vw, 1rem); font-weight: 500; letter-spacing: 0.02em; opacity: .9; }
.cv-h { margin: 0.2rem 0 0.4rem; font-family: "Noto Sans KR", var(--display); font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 3.4rem); line-height: 1.12; letter-spacing: -0.03em; color: #fff; }
.cv-d { margin: 0; font-size: clamp(0.72rem, 1vw, 0.9rem); opacity: .85; }
.cv-poster { position: absolute; z-index: 2; right: 3%; top: 4%; bottom: 4%; aspect-ratio: 4 / 5; margin: 0; transform: rotate(2deg); }
.cv-poster img { width: 100%; height: 100%; object-fit: cover; border: 0 !important; border-radius: 6px !important; box-shadow: 0 24px 40px -18px rgba(0,0,0,.6); }
.cv-poster ~ .cv-title, .cs-cover:has(.cv-poster) .cv-title { left: 4%; top: 6%; bottom: auto; max-width: 44%; }
.cs-intro { padding: clamp(1.4rem, 3.4vw, 3rem) clamp(1.25rem, 7vw, 8rem); }
.cs-intro > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.cs-intro .cs-sub { margin: 1rem auto 0; text-align: left; font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem); border: 0; background: none; padding: 0; max-width: 60ch; margin-left: 0; }
.cs-intro .cs-hero-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cs-intro .eyebrow { margin: 0; color: var(--ink); }
@media (max-width: 700px) {
  .cs-cover { aspect-ratio: 3 / 4; min-height: 0; }
  .cv-num { font-size: 90vw; }
  .cv-left .cv-title, .cv-right .cv-title, .cs-cover:has(.cv-poster) .cv-title { left: 5%; right: 5%; max-width: none; bottom: 5%; top: auto; text-align: left; }
  .cv-right .cv-logo { margin: 0 0 0.6rem; }
  .cv-poster { top: 4%; bottom: auto; height: 52%; right: 6%; }
}
.cv-ts .cv-title { background: rgba(60,120,190,.45); }
.cv-logo-ts { width: min(14rem, 70%); }
.cv-ts .cv-num { left: 22%; top: 58%; }
.cv-ts .cv-art.cs-clouds { position: absolute; }
.cv-num { font-size: clamp(12rem, 44vw, 38rem); }
.cv-left .cv-num { left: 4%; }
.cv-ts .cv-num { left: 3%; top: auto; bottom: -6%; translate: none; }
.cv-ts .cv-poster { width: 40%; top: 5%; bottom: auto; height: auto; aspect-ratio: 4 / 5; right: 4%; }
.cv-ts .cv-title { top: 6%; left: 4%; max-width: 42%; }

/* as-built photos */
.cs-space-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); }
.cs-space-grid .sp-1, .cs-space-grid .sp-2 { grid-column: span 1; }
.cs-space-grid img { aspect-ratio: auto; }
.cs-space:not(:has(img)) { display: none; }
@media (max-width: 700px) { .cs-space-grid { grid-template-columns: 1fr; } }
.cs-space-grid .sp-1 { grid-column: 1 / -1; }
.cs-space-grid .sp-2 { grid-column: 1 / -1; }

/* Toy Story cover, as in the deck */
.cv-ts .cv-art img { object-fit: cover; object-position: 50% 30%; }
.cv-ts .cv-num { left: 3%; top: auto; bottom: -8%; translate: none; font-size: clamp(14rem, 50vw, 42rem); }
.cv-ts .cv-title { top: 8%; left: 4%; bottom: auto; max-width: 46%; background: rgba(90,130,170,.55); border-radius: 6px; padding: 1rem 1.4rem 1.1rem; backdrop-filter: none; }
.cv-ts .cv-h { font-size: clamp(1.8rem, 4.2vw, 4rem); }
.cv-ts .cv-poster { right: 3%; top: 3%; bottom: 3%; height: auto; width: auto; aspect-ratio: 900 / 1125; transform: rotate(2.5deg); }
@media (max-width: 700px) { .cv-ts .cv-poster { top: 30%; bottom: 3%; right: 4%; } .cv-ts .cv-title { top: 4%; bottom: auto; } }
.cv-ts .cv-art img { height: 122%; object-position: 50% 0; }
.cv-ts .cv-num { left: -3%; top: 14%; bottom: auto; font-size: clamp(16rem, 60vw, 52rem); z-index: 1; }
.cv-ts .cv-title { left: 0; top: 7%; border-radius: 0; padding: 1.1rem 1.6rem 1.2rem 4%; max-width: 44%; background: rgba(70,110,150,.62); z-index: 2; }
.cv-ts .cv-h { font-weight: 700; letter-spacing: -0.04em; }
.cv-ts .cv-d { font-weight: 500; opacity: .95; }
.cs-cover.cv-ts .cv-title { left: 0 !important; top: 7% !important; }
.cs-cover.cv-ts .cv-num { font-size: clamp(13rem, 42vw, 36rem); top: 17%; left: -1%; }

/* ---------- cover titles: set on the image, deck-like type ---------- */
.cv-title { text-shadow: 0 2px 2px rgba(0,0,0,.18), 0 6px 24px rgba(0,0,0,.35); }
.cv-h, .cv-h .en { font-family: "Inter Tight", var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.2rem, 5.4vw, 5.4rem); }
html[lang="ko"] .cv-h .ko, .cv-h .ko { font-family: "Gothic A1", "Noto Sans KR", sans-serif; font-weight: 800; letter-spacing: -0.06em; line-height: 1.12; }
.cv-k { font-family: "Gothic A1", "Inter Tight", sans-serif; font-weight: 700; font-size: clamp(0.9rem, 1.4vw, 1.2rem); letter-spacing: -0.01em; }
.cv-d { font-family: "Gothic A1", "Inter Tight", sans-serif; font-weight: 700; font-size: clamp(0.78rem, 1.05vw, 0.98rem); }
.cs-cover:not(.cv-ts) .cv-title { background: none !important; backdrop-filter: none !important; padding: 0; }
.cv-left:not(.cv-ts) .cv-title { left: 5%; bottom: 10%; max-width: 50%; }
.cv-right .cv-title { left: 30%; top: 30%; max-width: 44%; }
.cv-right .cv-h { font-size: clamp(2.4rem, 6vw, 6rem); }
.cv-logo { width: min(26rem, 100%); }
.cv-ts .cv-title { background: rgba(70,110,150,.6); }
.cv-ts .cv-h { font-size: clamp(2rem, 4.6vw, 4.4rem); }

/* ---------- no white padding around images ---------- */
.cs-good { padding: 0; overflow: hidden; }
.cs-good img, .cs .cs-good img { aspect-ratio: auto !important; height: auto; object-fit: initial; padding: 0 !important; border-radius: 0 !important; }
.cs-good figcaption { padding: 0 0.9rem 0.9rem; }
.cs-collage-4 figure img { aspect-ratio: auto; object-fit: initial; padding: 0; }
.mb-renders figure:nth-child(4) img, .mb-renders figure:nth-of-type(4) img { object-fit: cover; }
.cs-board img { background: transparent !important; }

/* no numbers: cover numerals and chapter numbers are gone */
.cv-num, .cs-n { display: none !important; }
.cs-head { grid-template-columns: 1fr; }
.cv-h .en, .cv-h .ko { white-space: normal; }
.cv-lockup { display: block; width: min(26rem, 92%); height: auto; margin-top: 1rem; background: transparent !important; border: 0 !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.cv-ts .cv-art img { height: 100% !important; object-position: 50% 50%; }
.cs-cover.cv-ts .cv-h { font-size: clamp(1.7rem, 3.5vw, 3.3rem); }
.cs-cover.cv-ts .cv-title { max-width: 42%; }
.cs-cover.cv-ts .cv-poster { width: 37%; right: 5%; }
.cs-cover.cv-ts .cv-poster { width: auto; height: 92%; top: 4%; bottom: auto; right: 4%; }
.cs-cover.cv-ts .cv-h { font-size: clamp(1.6rem, 3.1vw, 3rem); }
.cs-cover.cv-ts .cv-title { max-width: 46%; }
.cs-cover.cv-ts .cv-h, .cs-cover.cv-ts .cv-h .en, .cs-cover.cv-ts .cv-h .ko { font-size: clamp(1.6rem, 3vw, 2.9rem); }
.cs-cover.cv-ts .cv-h, .cs-cover.cv-ts .cv-h .en, .cs-cover.cv-ts .cv-h .ko { font-size: clamp(2rem, 3.4vw, 3.2rem); }

/* Pokemon cover: title block on the right, clear of the characters */
.cs-cover.cv-right .cv-title { left: auto !important; right: 5%; top: auto !important; bottom: 10%; max-width: 46%; text-align: right; }
.cs-cover.cv-right .cv-logo { margin: 0 0 0.6rem auto; }
.cs-cover.cv-right .cv-h, .cs-cover.cv-right .cv-h .en, .cs-cover.cv-right .cv-h .ko { font-size: clamp(2rem, 4.4vw, 4.4rem); }
@media (max-width: 700px) { .cs-cover.cv-right .cv-title { right: 5%; left: 5% !important; max-width: none; } }

/* One Piece: as-built store photos (2 landscape over 3 portrait, no crops) */
.op-space { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); }
.op-space figure { margin: 0; border-radius: 14px; overflow: hidden; }
.op-space img { display: block; width: 100%; height: auto; }
.op-space .os-a, .op-space .os-b { grid-column: span 3; }
.op-space .os-c, .op-space .os-d, .op-space .os-e { grid-column: span 2; }
@media (max-width: 700px) { .op-space { grid-template-columns: 1fr; } .op-space figure { grid-column: auto !important; } }

/* store chapter: renders, as-built row, then the best photo as the closing shot */
.ts-built { display: grid; grid-template-columns: 1.33fr .75fr .75fr; gap: clamp(0.8rem, 2vw, 1.4rem); align-items: start; }
.ts-built img { aspect-ratio: auto; }
.cs-final-shot { margin-top: clamp(1.4rem, 3vw, 2.4rem) !important; }
.cs .cs-final-shot img { border-radius: calc(var(--win-r) * .8); }
@media (max-width: 700px) { .ts-built { grid-template-columns: 1fr; } }

/* Monchhichi: deck cover — pink, dolls bottom-left, brown title card top-right */
.cs-mon { --sky-2: #fde3ea; }
.cs-mon .cs-stats li { background: #fde3ea; }
.cv-mon { background: #E77A91; }
.cv-mon .cv-art img { object-position: left bottom; }
.cs-cover.cv-mon .cv-title { left: auto !important; right: 5%; top: 9% !important; bottom: auto; max-width: 40%; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: clamp(1rem, 2.4vw, 2rem) clamp(1.1rem, 2.6vw, 2.2rem); background: #5b3a3c; border-radius: 10px; text-shadow: none; }
.cv-mon .cv-k { order: 1; }
.cs-cover.cv-mon .cv-logo { order: 2; width: min(30rem, 100%); margin: .7rem 0 .6rem; filter: none; }
.cv-mon .cv-d { order: 3; }
@media (max-width: 700px) { .cs-cover.cv-mon .cv-title { left: 5% !important; right: 5%; top: 5% !important; bottom: auto; max-width: none; } }
.cs-mon-end { background: linear-gradient(180deg, #E77A91 0%, #c98a52 100%) !important; color: #fff; text-align: center; }
.cs-mon-end .ms-logo { display: block; width: min(30rem, 80%); height: auto; margin: .6rem auto; background: none; }
.cs-mon-end .cs-kick { color: #fff; font-size: clamp(1rem, 1.6vw, 1.3rem); text-transform: none; }
.cs .mon-end-kv { margin: clamp(1.4rem, 3vw, 2.4rem) auto 0; max-width: 34rem; }
.cs .mon-end-kv img { border-radius: 14px; border: 0; box-shadow: 0 30px 60px -30px rgba(60,20,10,.6); }

/* covers where the lockup is the title: let it fill the title area */
.cs-cover.cv-ts .cv-title { max-width: 48%; }
.cs-cover.cv-ts .cv-lockup { width: 100%; margin-top: 1.2rem; margin-bottom: 1rem; }
.cs-cover.cv-mon .cv-title { max-width: 52%; right: 4%; top: 7% !important; }
.cs-cover.cv-mon .cv-logo { width: 100%; margin: 1rem 0 .9rem; }
.cs-cover.cv-mon .cv-k, .cs-cover.cv-mon .cv-d { font-size: clamp(0.85rem, 1.3vw, 1.1rem); }
@media (max-width: 700px) {
  .cs-cover.cv-ts .cv-title, .cs-cover.cv-mon .cv-title { max-width: none; }
  .cs-cover.cv-ts .cv-lockup { width: 80%; }
  .cs-cover.cv-mon .cv-logo { width: 88%; }
}

/* stat figures: even, tabular numerals instead of the display face */
.cs-stats b { font-family: "Inter Tight", var(--body); font-weight: 900; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* mobile Toy Story cover: poster on top, title card below it, never overlapping */
@media (max-width: 700px) {
  .cs-cover.cv-ts { aspect-ratio: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1rem 1.4rem; }
  .cs-cover.cv-ts .cv-poster { position: relative; inset: auto; width: 78%; height: auto; margin: 0 auto; order: 1; }
  .cs-cover.cv-ts .cv-title { position: relative; inset: auto !important; left: auto !important; right: auto; top: auto !important; bottom: auto; max-width: none; order: 2; }
}

/* cover lockup: Baskin-Robbins logo × the IP logo, in place of a typed title */
.cs-cover .cv-title:has(.cv-lock) { display: flex; flex-direction: column; }
.cs-cover .cv-title:has(.cv-lock) .cv-k { order: 1; }
.cs-cover .cv-title:has(.cv-lock) .cv-lock { order: 2; }
.cs-cover .cv-title:has(.cv-lock) .cv-d { order: 3; }
.cv-lock { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.2rem); margin: clamp(.7rem, 1.6vw, 1.2rem) 0; }
.cv-lock img { display: block; height: auto; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.cv-lock .cv-br { width: clamp(11rem, 24vw, 22rem); filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.cv-lock .cv-ip { width: clamp(12rem, 30vw, 28rem); filter: drop-shadow(0 6px 12px rgba(0,0,0,.3)); }
.cv-lock .cv-x { color: #fff; font: 300 clamp(1.6rem, 3vw, 2.6rem)/1 "Inter Tight", sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.cs-cover.cv-right .cv-title:has(.cv-lock) { align-items: flex-end; }
.cs-cover.cv-mon .cv-title { align-items: flex-start !important; }
.cs-cover.cv-mon .cv-lock .cv-ip { width: clamp(12rem, 28vw, 26rem); filter: none; }
.cs-cover .cv-title:has(.cv-lock) { max-width: 62% !important; }
@media (max-width: 700px) {
  .cs-cover.cv-right .cv-title:has(.cv-lock) { align-items: flex-start; }
  .cv-lock .cv-br { width: 38vw; } .cv-lock .cv-ip { width: 40vw; }
}

.cs-finale.ms-mon { background: radial-gradient(ellipse 80% 70% at 50% 35%, #f6a9b8, #c9784f 85%) !important; }
.ms-mon .ms-logo { width: min(26rem, 70%); }

/* Monchhichi cover v2: the friends on the meadow, lockup in the sky top-left */
.cs-cover.cv-mon .cv-title { left: 4% !important; right: auto; top: 7% !important; bottom: auto; max-width: 52% !important;
  background: none; padding: 0; text-shadow: 0 2px 12px rgba(80,40,120,.35); }
.cs-cover.cv-mon .cv-art img { object-position: 60% 60%; }
.cs-cover.cv-mon .cv-lock .cv-br { filter: drop-shadow(0 3px 10px rgba(80,40,120,.45)); }
.cs-cover.cv-mon .cv-lock .cv-ip { filter: drop-shadow(0 6px 14px rgba(80,40,120,.35)); }
@media (max-width: 700px) { .cs-cover.cv-mon .cv-title { left: 5% !important; right: 5%; top: 5% !important; max-width: none !important; } }
.cs-cover.cv-mon .cv-lock .cv-br { width: clamp(8rem, 15vw, 14rem); }
.cs-cover.cv-mon .cv-lock .cv-ip { width: clamp(9rem, 19vw, 17rem); }
@media (max-width: 700px) { .cs-cover.cv-mon .cv-lock .cv-br { width: 34vw; } .cs-cover.cv-mon .cv-lock .cv-ip { width: 40vw; } }

/* covers: "campaign plan" reads as a clear badge, not a whisper */
.cs-cover .cv-title:has(.cv-lock) .cv-k {
  display: inline-block; align-self: flex-start; padding: .45rem 1rem; border-radius: 999px;
  background: #fff; color: var(--ink); text-shadow: none; opacity: 1;
  font: 700 clamp(0.95rem, 1.5vw, 1.25rem)/1.1 "Inter Tight", var(--body); letter-spacing: .01em;
  box-shadow: 3px 3px 0 var(--ink); border: 1.5px solid var(--ink);
}
.cs-cover.cv-right .cv-title:has(.cv-lock) .cv-k { align-self: flex-end; }
.cs-cover .cv-title:has(.cv-lock) .cv-d { font-size: clamp(0.85rem, 1.2vw, 1.05rem); opacity: 1; font-weight: 500; }
.cs-cover.cv-mon .cv-lock .cv-ip { width: clamp(9rem, 18vw, 16rem); filter: drop-shadow(0 4px 10px rgba(80,40,120,.35)); }
@media (max-width: 700px) { .cs-cover.cv-right .cv-title:has(.cv-lock) .cv-k { align-self: flex-start; } }