@charset "utf-8";

/* ==========================================================================
   CamTalk / biz/popupstore.php - 캠톡라운지 (Pop-up Store), the WIDE WINDOW.

   SCOPE. Every rule is inside `@media only screen and (min-width: 1001px)`
   - the far side of the project's 1000px breakpoint - and under `.cps`,
   the page's own <main>, or `.cps-page`, a class only this page's script
   puts on <body>. Below 1000px nothing here applies.

   ONE SCENE. The scene is the first block of the page and exactly one
   screen. The film fills all of it, up to the top of the window; the bar
   (96px) lies over it, transparent, with the site's white type - its
   height is not added a second time. Past 150px of scroll js/common.js
   gives the bar its usual white ground, as on every inner page. Three
   stops; the script carries the camera between them
   (js/camtalk-popupstore-desktop.js).

   LAYERS inside the media box, bottom to top: the four stop stills (the
   film's frames 0, 72, 144 and 240 - the first is the poster, and without
   the film they are the whole scene), then the forward and the backward
   clip, of which at most one is shown. A clip is only shown once it
   stands on the same frame as the still under it, so a swap is never
   seen. Over the film: a soft ramp from the top for the bar's type, and
   one from the left for the words - nothing over the whole picture.

   STACKING. The scene is `isolation: isolate` at z-index 0, so nothing in
   it can rise over the fixed bar (.gnb is 1).
   ========================================================================== */

@media only screen and (min-width: 1001px) {

	.cps-page {
		--ps-red: #f5123f;
		--ps-header: 96px;                          /* .gnb on the wide window */
		--ps-side: 40px;                            /* the wordmark's left edge (camtalk-header.css) */
		--ps-side-r: 34px;                          /* the bar's right group */
		/* The film's width on screen: it covers the scene (one screen, at
		   least 640px tall), so it is the wider of the window and 16:9 of
		   the height. The words are sized from it - see .cps-step__title. */
		--ps-film-w: max(100vw, 177.78vh, 1138px);
	}
	@media (min-width: 1561px) {
		.cps-page { --ps-side: 56px; --ps-side-r: 48px; }
	}

	.cps, .cps *, .cps *::before, .cps *::after { box-sizing: border-box; }
	.cps-page .ct-popup-mobile { display: none; }
	.cps-page .cps[hidden] { display: block; }
	.cps { background: #1a1a1d; }
	.cps img { display: block; max-width: none; }
	:where(.cps) :where(h1, h2, p) { margin: 0; padding: 0; }
	.cps a { text-decoration: none; }
	.cps-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* ---- the scene ------------------------------------------------------------ */

	.cps-scene {
		position: relative;
		z-index: 0;
		isolation: isolate;
		height: 100vh;
		min-height: 640px;
		overflow: hidden;
		background: #161214;                        /* the entrance's dark wall, while the poster loads */
	}
	.cps-scene__media {
		position: absolute;
		z-index: -2;
		inset: 0;
		overflow: hidden;
	}
	.cps .cps-scene__still,
	.cps .cps-scene__video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* held by its left edge: a window narrower than 16:9 gives up the
		   right side of the space, never the free room left of the host */
		object-position: 0 50%;
	}
	.cps .cps-scene__still { opacity: 0; transition: opacity 0.36s ease; }
	.cps .cps-scene__still.is-on { opacity: 1; }
	.cps .cps-scene__video { opacity: 0; }
	.cps .cps-scene__video.is-on { opacity: 1; }

	/* The bar's type over the film: the ceiling is white for most of the
	   walk, so a soft neutral ramp darkens the top of the picture a little,
	   fading out well below the bar - no edge, no panel. */
	.cps-scene__top {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		height: calc(var(--ps-header) * 1.9);
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(10, 8, 10, 0.42) 0%,
			rgba(10, 8, 10, 0.32) 30%,
			rgba(10, 8, 10, 0.14) 62%,
			rgba(10, 8, 10, 0.05) 84%,
			rgba(10, 8, 10, 0) 100%);
	}

	/* Stops 02 and 03: a soft dark oval under the words only, centred on
	   their group (--ps-s23-left, below) - no edge, no panel; the rest of
	   the space stays as filmed. A faint ramp from the left keeps the left
	   wall from glaring next to it. */
	.cps-scene__shade {
		position: absolute;
		z-index: -1;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(calc(var(--ps-film-w) * 0.3) 40% at calc(var(--ps-s23-left) + var(--ps-film-w) * 0.15) 47%,
				rgba(12, 10, 12, 0.58) 0%,
				rgba(12, 10, 12, 0.46) 38%,
				rgba(12, 10, 12, 0.2) 70%,
				rgba(12, 10, 12, 0) 100%),
			linear-gradient(90deg,
				rgba(12, 10, 12, 0.3) 0%,
				rgba(12, 10, 12, 0.12) 18%,
				rgba(12, 10, 12, 0) 34%);
		transition: opacity 0.4s ease;
	}
	/* Stop 01 sets its words right of the host, so its shade comes from the
	   right edge instead - gone before the host's face (from 52% across) -
	   and the left ramp is not shown then. The two cross-fade with the words. */
	.cps-scene__shade--right {
		opacity: 0;
		background:
			linear-gradient(270deg,
				rgba(12, 10, 12, 0.7) 0%,
				rgba(12, 10, 12, 0.6) 18%,
				rgba(12, 10, 12, 0.42) 31%,
				rgba(12, 10, 12, 0.14) 42%,
				rgba(12, 10, 12, 0) 48%);
	}
	.cps-scene.is-s1 .cps-scene__shade { opacity: 0; }
	.cps-scene.is-s1 .cps-scene__shade--right { opacity: 1; }

	/* ---- the words: three stacked steps on one axis ---------------------------
	   All three sit in the same place, on the wordmark's left edge, a little
	   above the middle of the picture (as on the storyboard); only the
	   current one is shown. In this film the host stands about 36% across
	   the frame - at the first frame and at stop 01 alike - so the words
	   keep to the third of the film left of her: the title is sized from the
	   film's width, and its longest line ends short of her sleeve. */
	.cps-steps {
		position: absolute;
		left: var(--ps-side);
		top: 47%;
		width: calc(var(--ps-film-w) * 0.36 - var(--ps-side));
		transform: translateY(-50%);
	}
	.cps-step {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		transform: translateY(-50%);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.22s ease, visibility 0s linear 0.22s;
	}
	.cps-step.is-on {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.42s ease, visibility 0s;
	}
	.cps-step > * {
		transform: translateY(14px);
		transition: transform 0.22s ease;
	}
	.cps-step.is-on > * {
		transform: none;
		transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.cps-step.is-on > :nth-child(2) { transition-delay: 0.04s; }
	.cps-step.is-on > :nth-child(3) { transition-delay: 0.08s; }
	.cps-step.is-on > :nth-child(4) { transition-delay: 0.12s; }

	/* STOP 01, RIGHT OF THE HOST. In this film the host's sleeve ends about
	   62% across the frame (the film is held by its left edge), so the block
	   starts just past it and ends before the 01/02/03 navigation (its 96px
	   and some air). Its title is sized from that room: 62px at 1920, about
	   39px at 1440, 34px at 1280, where the second line breaks once more.
	   Left-aligned inside, as before. --ps-sbw is the window's scrollbar
	   (set by the script), which 100vw counts and the scene does not. */
	.cps-page { --ps-s1-left: calc(var(--ps-film-w) * 0.62 + 16px); }
	.cps-page { --ps-s1-room: calc(100vw - var(--ps-sbw, 0px) - var(--ps-s1-left) - var(--ps-side-r) - 120px); }
	.cps-step[data-step="1"] {
		left: calc(var(--ps-s1-left) - var(--ps-side));
		width: var(--ps-s1-room);
	}
	.cps-step[data-step="1"] .cps-step__title { font-size: clamp(34px, calc(var(--ps-s1-room) / 7.1), 62px); }
	.cps-step[data-step="1"] .cps-step__desc { font-size: clamp(16px, 1.2vw, 20px); }
	.cps-step[data-step="1"] .cps-step__eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }

	/* STOPS 02 AND 03 (2026-10-03): the whole group - eyebrow, title, copy,
	   button - moves right, past the lounge's left wall, its two guests and
	   the pillar at 02 and the bare wall at 03, onto the middle of the
	   space. The film is held by its left edge, so a share of its width
	   lands on the same spot of the picture at every window size: 306px
	   at 1280, 344px at 1440, 413px at 1920. Type sizes and spacing are
	   unchanged; still left-aligned. */
	.cps-page { --ps-s23-left: max(var(--ps-side), calc(var(--ps-film-w) * 0.215)); }
	.cps-step[data-step="2"],
	.cps-step[data-step="3"] { left: calc(var(--ps-s23-left) - var(--ps-side)); }
	/* the red eyebrow crosses red goods at both stops: a dark halo keeps it */
	.cps-step[data-step="2"] .cps-step__eyebrow,
	.cps-step[data-step="3"] .cps-step__eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.5); }
	/* the button never breaks its label; in the narrowest room it is a
	   little tighter */
	.cps-step__btn { white-space: nowrap; }
	.cps-step[data-step="1"] .cps-step__btn { font-size: clamp(15px, 1.15vw, 17px); padding: 0 clamp(20px, 1.8vw, 28px) 0 clamp(22px, 2vw, 30px); }

	.cps-step__eyebrow {
		position: relative;
		padding-bottom: 14px;
		font-size: 15px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #ff2d55;
	}
	.cps-step__eyebrow::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: #ff2d55;
	}
	.cps-step__title {
		margin-top: 26px;
		font-size: clamp(38px, calc(var(--ps-film-w) * 0.0345), 72px);  /* 55px at 1440x900 */
		font-weight: 800;
		line-height: 1.18;
		letter-spacing: -0.04em;
		color: #fff;
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
		word-break: keep-all;
	}
	.cps-step__desc {
		margin-top: 18px;
		font-size: clamp(17px, 1.32vw, 21px);       /* 19px at 1440 */
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: -0.02em;
		color: rgba(255, 255, 255, 0.86);
		text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
		word-break: keep-all;
	}
	.cps-step__btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 56px;
		margin-top: 32px;
		padding: 0 28px 0 30px;
		border: 0;
		border-radius: 999px;
		background: #fff;
		font: inherit;
		font-size: 17px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.01em;
		cursor: pointer;
		box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.6);
		transition: background-color 0.2s ease;
	}
	.cps-step__btn span,
	.cps-step__btn svg { color: #16161c; }
	.cps-step__btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
	.cps-step__btn:hover { background: #ffeef2; }
	.cps-step__btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

	/* ---- step navigation and the counter -------------------------------------- */

	.cps-nav {
		position: absolute;
		right: var(--ps-side-r);
		top: 47%;
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 8px 12px 8px 14px;
		border-radius: 14px;
		background: rgba(12, 10, 12, 0.26);         /* legible over the bright wall and shelves */
		transform: translateY(-50%);
	}
	.cps-nav__dot {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		min-width: 44px;
		height: 36px;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		cursor: pointer;
	}
	.cps-nav__dot::after {
		content: "";
		width: 18px;
		height: 2px;
		border-radius: 1px;
		background: rgba(255, 255, 255, 0.55);
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
		transition: width 0.3s ease, background-color 0.3s ease;
	}
	.cps-nav__no {
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.08em;
		color: rgba(255, 255, 255, 0.7);
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
		transition: color 0.3s ease;
	}
	.cps-nav__dot[aria-current="step"]::after { width: 40px; background: #fff; }
	.cps-nav__dot[aria-current="step"] .cps-nav__no { color: #fff; }
	.cps-nav__dot:hover .cps-nav__no { color: #fff; }
	.cps-nav__dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; }

	/* Only when the browser will not start the film by itself: a plain
	   capsule at the foot of the picture, over the poster. */
	.cps .cps-play[hidden] { display: none; }
	.cps-play {
		position: absolute;
		left: 50%;
		bottom: 112px;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 52px;
		padding: 0 26px 0 20px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 999px;
		background: rgba(18, 14, 16, 0.42);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		font: inherit;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		color: #fff;
		cursor: pointer;
		transform: translateX(-50%);
		transition: background-color 0.2s ease;
	}
	.cps-play span { color: #fff; }
	.cps-play svg { width: 20px; height: 20px; flex: 0 0 auto; color: #fff; }
	.cps-play:hover { background: rgba(18, 14, 16, 0.6); }
	.cps-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

	/* the counter sits above the assistant's launcher (bottom-right) */
	.cps-count {
		position: absolute;
		padding: 6px 12px;
		border-radius: 999px;
		background: rgba(12, 10, 12, 0.26);
		right: var(--ps-side-r);
		bottom: 112px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.06em;
		color: rgba(255, 255, 255, 0.72);
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
	}
	.cps-count__now { font-weight: 800; color: #fff; }

	/* ---- ENG -------------------------------------------------------------------- */
	.cps-page.lang-en .cps-step__title { font-size: clamp(36px, calc(var(--ps-film-w) * 0.0315), 66px); letter-spacing: -0.03em; }
	.cps-page.lang-en .cps-step[data-step="1"] .cps-step__title { font-size: clamp(30px, calc(var(--ps-s1-room) / 7.6), 58px); }
	.cps-page.lang-en .cps-step__desc { letter-spacing: -0.005em; }
	.cps-page.lang-en .cps-step__title,
	.cps-page.lang-en .cps-step__desc { word-break: normal; text-wrap: balance; }

	@media (prefers-reduced-motion: reduce) {
		.cps .cps-scene__still,
		.cps-step, .cps-step.is-on,
		.cps-step > *, .cps-step.is-on > *,
		.cps-nav__dot::after, .cps-nav__no { transition: none; }
		.cps-step > * { transform: none; }
	}
}

/* ==========================================================================
   BELOW THE SCENE - five sections in ordinary scrolling (2026-10-02).

   Scope as above: min-width 1001px, and every class starts with .cpl
   (CamTalk popupstore lower), inside the page's own <main class="cps">.

   THE SYSTEM
     milk     #fbfafa  (the lounge picture's own ground, so it has no edge)
     graphite #0e0b0c .. #16161b
     red      #e8123f
     type     the site's Paperozi; headings 800, set tight
     wrap     about 1240px at 1440, 1320px from 1700 up; side room grows
     shadow   long and soft, one family
   ========================================================================== */

@media only screen and (min-width: 1001px) {

	.cps-page {
		--pl-red: #e8123f;
		--pl-ink: #16161b;
		--pl-ink-2: #565865;
		--pl-milk: #fbfafa;
		--pl-wrap: min(1320px, calc(100vw - 2 * clamp(48px, 7vw, 200px)));
	}

	.cpl {
		position: relative;
		scroll-margin-top: var(--ps-header);
	}
	.cpl-wrap {
		width: var(--pl-wrap);
		margin-left: auto;
		margin-right: auto;
	}
	/* resets at zero specificity, so .cpl-wrap's auto margins still centre a list */
	:where(.cpl) :where(ul) { list-style: none; margin: 0; padding: 0; }
	:where(.cpl) :where(figure) { margin: 0; }
	/* a lazy picture still on its way shows its reserved box, not its alt text */
	.cpl img { color: transparent; }
	.cpl li { word-break: keep-all; }
	:where(.cpl) :where(h2, h3, p) { margin: 0; }

	/* ---- shared type ------------------------------------------------------- */
	.cpl-eyebrow {
		font-size: 13px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--pl-red);
	}
	.cpl-title {
		margin-top: 18px;
		font-size: clamp(40px, 3.6vw, 58px);        /* 52px at 1440 */
		font-weight: 800;
		line-height: 1.17;
		letter-spacing: -0.045em;
		color: var(--pl-ink);
		word-break: keep-all;
	}
	.cpl-desc {
		margin-top: 22px;
		font-size: clamp(17px, 1.3vw, 20px);        /* 18.7px at 1440 */
		font-weight: 500;
		line-height: 1.62;
		letter-spacing: -0.02em;
		color: var(--pl-ink-2);
		word-break: keep-all;
	}

	/* ---- buttons ------------------------------------------------------------- */
	.cpl-btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 56px;
		margin-top: 34px;
		padding: 0 28px 0 30px;
		border-radius: 999px;
		font-size: 17px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.01em;
		white-space: nowrap;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}
	.cpl-btn svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.cpl-btn--white { background: #fff; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7); }
	.cpl-btn--white span, .cpl-btn--white svg { color: var(--pl-ink); }
	.cpl-btn--white:hover { background: #ffeef2; }
	.cpl-btn--red {
		background: linear-gradient(90deg, #ff2a55 0%, #e8123f 100%);
		box-shadow: 0 18px 34px -16px rgba(232, 18, 63, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	}
	.cpl-btn--red span, .cpl-btn--red svg { color: #fff; }
	.cpl-btn--red:hover { background: linear-gradient(90deg, #ff3d64 0%, #f0193f 100%); }
	.cpl-btn:active { transform: scale(0.98); }
	.cpl-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

	/* the small round keys of the two sliders */
	.cpl-ctl {
		display: inline-grid;
		place-items: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.32);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
		cursor: pointer;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}
	.cpl-ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.cpl-ctl:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); }
	.cpl-ctl:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
	.cpl-ctl--lg { width: 52px; height: 52px; }
	.cpl-ctl--lg svg { width: 20px; height: 20px; }
	.cpl-ctl__play { display: none; }
	.cpl-ctl--pause[aria-pressed="true"] .cpl-ctl__pause { display: none; }
	.cpl-ctl--pause[aria-pressed="true"] .cpl-ctl__play { display: block; fill: currentColor; stroke: none; }
	.cpl-arrows { display: flex; gap: 10px; }

	/* ---- a slider: stacked slides, a cross-fade, a box that never resizes ---- */
	.cpl-slider__frame {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 18px;
		background: #1c1517;
		box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.8);
	}
	.cpl-slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.52s ease, visibility 0s linear 0.52s;
	}
	.cpl-slide.is-on { opacity: 1; visibility: visible; transition: opacity 0.52s ease, visibility 0s; }
	.cps .cpl-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

	/* ======================================================================
	   1. CAMTALK POPUP STORE
	   ====================================================================== */
	.cpl-lounge {
		padding: 64px 0 112px;
		background: var(--pl-milk);
	}
	.cpl-lounge__grid {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 40px;
	}
	.cpl-lounge__title { font-size: clamp(46px, 4.1vw, 66px); }
	.cpl-lounge__visual {
		position: relative;
		justify-self: end;
		/* as large as the window allows, with room for the bar above and a
		   little air below: 605px at 1440x900, 680px at 1920x1080 */
		width: min(100%, clamp(460px, min(42vw, 100vh - 290px), 700px));
	}
	/* The picture is on near-white with soft shadows that reach its edges:
	   its outermost few percent fade into the section, so no rectangle shows.
	   The photographs themselves sit inside that margin. */
	.cps .cpl-lounge__img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 98.4%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 96.5%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 98.4%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 96.5%, transparent 100%);
		mask-composite: intersect;
	}
	/* exactly over the drawn arrow (1083-1201 x 1057-1173 of 1254) */
	.cpl-lounge__next {
		position: absolute;
		left: 86.4%;
		top: 84.3%;
		width: 9.4%;
		height: 9.3%;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
		transition: box-shadow 0.25s ease;
	}
	.cpl-lounge__next:hover { box-shadow: 0 0 0 8px rgba(232, 18, 63, 0.14); }
	.cpl-lounge__next:focus-visible { outline: 3px solid var(--pl-ink); outline-offset: 4px; }

	.cpl-feats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
		margin-top: 56px;
	}
	.cpl-feat {
		padding: 36px 22px 34px;
		border: 1px solid #f6e2e7;
		border-radius: 20px;
		background: linear-gradient(180deg, #fff 0%, #fff6f8 100%);
		box-shadow: 0 22px 40px -34px rgba(120, 18, 42, 0.45);
		text-align: center;
	}
	.cpl-feat__icon {
		display: block;
		width: 44px;
		height: 44px;
		margin: 0 auto;
		fill: none;
		stroke: var(--pl-red);
		stroke-width: 1.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.cpl-feat__title {
		margin-top: 20px;
		font-size: 19px;
		font-weight: 800;
		line-height: 1.3;
		letter-spacing: -0.035em;
		color: var(--pl-ink);
	}
	.cpl-feat__desc {
		margin-top: 10px;
		font-size: 15.5px;
		font-weight: 500;
		line-height: 1.62;
		letter-spacing: -0.02em;
		color: #6c6e79;
		word-break: keep-all;
	}

	/* ======================================================================
	   2. EVENT & EXPERIENCE
	   ====================================================================== */
	.cpl-event {
		isolation: isolate;
		overflow: hidden;
		padding: 120px 0;
		background: #0e0a0c;
	}
	.cpl-event__bg { position: absolute; inset: 0; z-index: -2; }
	.cps .cpl-event__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
	/* the darkening is its own layer over the photograph */
	.cpl-event::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(70% 90% at 82% 40%, rgba(150, 10, 40, 0.22) 0%, rgba(150, 10, 40, 0) 70%),
			linear-gradient(90deg, rgba(12, 8, 10, 0.94) 0%, rgba(12, 8, 10, 0.86) 36%, rgba(12, 8, 10, 0.74) 62%, rgba(12, 8, 10, 0.8) 100%);
	}
	.cpl-event__grid {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: 56px;
	}
	.cpl-event .cpl-title { color: #fff; }
	.cpl-event .cpl-desc { color: rgba(255, 255, 255, 0.76); }
	.cpl-slider__bar {
		display: flex;
		align-items: center;
		gap: 16px;
		margin-top: 18px;
	}
	.cpl-slider__bar .cpl-arrows { margin-left: auto; }
	/* the event photos: a quicker cross-fade (0.35s) for their quicker turn */
	.cpl-event__slider .cpl-slide { transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
	.cpl-event__slider .cpl-slide.is-on { transition: opacity 0.35s ease, visibility 0s; }
	.cpl-dots { display: flex; align-items: center; gap: 2px; }
	.cpl-dot {
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.cpl-dot::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.38);
		transition: width 0.3s ease, background-color 0.3s ease;
	}
	.cpl-dot[aria-current="true"]::before { width: 24px; background: #fff; }
	.cpl-dot:hover::before { background: rgba(255, 255, 255, 0.75); }
	.cpl-dot:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 6px; }

	/* ======================================================================
	   3. CAMTALK GOODS
	   ====================================================================== */
	.cpl-goods__hero {
		position: relative;
		background: #090909;                          /* the picture's own left edge */
	}
	.cps .cpl-goods__img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 2400 / 960;
		object-fit: cover;
	}
	.cpl-goods__over {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
	}
	/* the words keep to the dark room, left of the first cover (about 36%) */
	.cpl-goods__text { width: max(380px, calc(38vw - (100vw - var(--pl-wrap)) / 2)); max-width: 560px; }
	.cpl-goods .cpl-title { color: #fff; }
	.cpl-goods .cpl-desc { color: rgba(255, 255, 255, 0.74); }
	/* THE SHELF (2026-10-03): its own light band under the picture - the
	   two meet on a straight edge, nothing overlaps. The band's ground is
	   the product photos' own near-white ground, so a picture is not a white
	   card on another card: just the item, its tile showing only as a small
	   radius. Four in view from 1200px, three below; names 17-20px (19px at
	   1440) with room for two lines. The keys sit in a bar right under the
	   row, beside a thin track that shows where the row stands. */
	.cpl-goods { background: #fafafa; }
	.cpl-goods__strip { padding: clamp(44px, 4vw, 64px) 0 clamp(48px, 4.4vw, 72px); }
	.cpl-shelf {
		position: relative;
		--pl-gap: clamp(16px, 1.6vw, 28px);
		--pl-per: 4;
	}
	@media (max-width: 1199px) {
		.cpl-shelf { --pl-per: 3; }
	}
	.cpl-shelf__view {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.cpl-shelf__view::-webkit-scrollbar { display: none; }
	.cpl-shelf__view:focus-visible { outline: 3px solid var(--pl-red); outline-offset: 6px; border-radius: 12px; }
	.cps .cpl-shelf__list { display: flex; gap: var(--pl-gap); }
	.cpl-item {
		flex: 0 0 calc((100% - (var(--pl-per) - 1) * var(--pl-gap)) / var(--pl-per));
		min-width: 0;
		scroll-snap-align: start;
	}
	.cps .cpl-item__img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 10px;
		background: #fff;
	}
	.cpl-item__name {
		min-height: calc(2em * 1.34);                    /* two lines, so the row keeps one height */
		margin-top: 16px;
		font-size: clamp(17px, 1.32vw, 20px);          /* 19px at 1440 */
		font-weight: 700;
		line-height: 1.34;
		letter-spacing: -0.025em;
		color: var(--pl-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cpl-shelf__bar {
		display: flex;
		align-items: center;
		gap: 24px;
		margin-top: 18px;
	}
	.cpl-shelf__track {
		position: relative;
		flex: 1 1 auto;
		height: 2px;
		border-radius: 1px;
		background: #e6e2e3;
		overflow: hidden;
	}
	.cpl-shelf__thumb {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 57%;
		border-radius: 1px;
		background: var(--pl-ink);
		transition: transform 0.12s linear;
	}
	.cpl-shelf__btn {
		display: grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid #d9d4d6;
		border-radius: 50%;
		background: transparent;
		color: var(--pl-ink);
		cursor: pointer;
		transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	}
	.cpl-shelf__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.cpl-shelf__btn:hover:not(:disabled) { background: #fff; border-color: #bdb6b9; }
	.cpl-shelf__btn:focus-visible { outline: 3px solid var(--pl-red); outline-offset: 3px; }
	.cpl-shelf__btn:disabled { opacity: 0.32; cursor: default; }

	/* ======================================================================
	   4. THE THREE EVENT STORIES - a gallery (2026-10-03)
	   ====================================================================== */
	/* One large photograph - up to 90% of the content width, its own 16:9
	   so nothing is cut - and under it one compact bar: count, title and
	   line on the left, the three thumbnails and the arrows on the right.
	   The ground stays dark, its red glow much fainter: the photographs are
	   the accent. A change is a 0.35s cross-fade of photo and words together;
	   the box never resizes (stacked slides, stacked texts). */
	.cpl-stories {
		padding: clamp(56px, 5vw, 88px) 0 clamp(56px, 5vw, 80px);
		background:
			radial-gradient(60% 60% at 80% 0%, rgba(170, 12, 45, 0.08) 0%, rgba(170, 12, 45, 0) 70%),
			linear-gradient(180deg, #0f0c0d 0%, #0b090a 100%);
	}
	/* 90% of the content width at most, and never so tall that the photo
	   and its bar would not fit together under the site's bar with the bar
	   still above the AI launcher (which takes the lowest 80px on the
	   right): (100vh - 320px) of 16:9. That is 853px at 1280x800 (78% of
	   the content width), 1031px at 1440x900 (83%), 1188px at 1920x1080
	   (90%). */
	.cpl-gal {
		width: min(calc(var(--pl-wrap) * 0.9), calc((100vh - 320px) * 16 / 9));
		margin: 0 auto;
	}
	.cpl-gal__frame {
		border-radius: 16px;
		box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
	}
	.cpl-gal .cpl-slide { transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
	.cpl-gal .cpl-slide.is-on { transition: opacity 0.35s ease, visibility 0s; }
	.cpl-gal__bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: clamp(20px, 2.2vw, 36px);
		margin-top: 20px;
	}
	/* the count beside the title, on its baseline; the line under them */
	.cpl-gal__info {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		column-gap: 16px;
	}
	.cpl-stories__count {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.12em;
		color: rgba(255, 255, 255, 0.5);
	}
	.cpl-stories__count b { font-size: 14px; font-weight: 800; color: var(--pl-red); }
	.cpl-stories__count span { margin: 0 7px; }
	.cpl-stories__texts { display: grid; }
	.cpl-stories__text {
		grid-area: 1 / 1;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
	}
	.cpl-stories__text.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s; }
	.cpl-stories__title {
		font-size: clamp(22px, 1.8vw, 30px);          /* 26px at 1440 */
		font-weight: 800;
		line-height: 1.25;
		letter-spacing: -0.04em;
		color: #fff;
		word-break: keep-all;
	}
	.cpl-stories__desc {
		margin-top: 4px;
		font-size: clamp(16px, 1.15vw, 18px);
		font-weight: 500;
		line-height: 1.55;
		letter-spacing: -0.02em;
		color: rgba(255, 255, 255, 0.7);
		word-break: keep-all;
	}
	.cpl-gal__thumbs { display: flex; gap: 12px; }
	.cpl-thumb {
		position: relative;
		display: block;
		width: clamp(104px, 8.4vw, 144px);             /* 121px at 1440 */
		aspect-ratio: 16 / 9;
		padding: 0;
		border: 0;
		border-radius: 8px;
		overflow: hidden;
		background: #1c1517;
		cursor: pointer;
		opacity: 0.5;
		transition: opacity 0.25s ease;
	}
	.cps .cpl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
	/* the current one: whole, with a thin light line around it */
	.cpl-thumb::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0);
		transition: box-shadow 0.25s ease;
	}
	.cpl-thumb[aria-current="true"] { opacity: 1; }
	.cpl-thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92); }
	.cpl-thumb:hover { opacity: 0.85; }
	.cpl-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 3px; opacity: 1; }

	/* ======================================================================
	   5. FINAL CTA - a finished temporary banner, ready for a picture
	   ====================================================================== */
	.cpl-cta {
		isolation: isolate;
		overflow: hidden;
		display: flex;
		align-items: center;
		/* the picture's own proportions (1916 : 821), never shorter than the words need */
		min-height: max(460px, calc((100vw - var(--ps-sbw, 0px)) * 821 / 1916));
		padding: 88px 0 56px;
		background: #1c0d12;                          /* its average, while it loads */
	}
	.cpl-cta__media { position: absolute; inset: 0; z-index: -2; }
	.cps .cpl-cta__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 60% 42%;
	}
	/* a soft ramp from the left under the words only; the models stay as shot */
	.cpl-cta::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: linear-gradient(90deg,
			rgba(14, 6, 9, 0.8) 0%,
			rgba(14, 6, 9, 0.7) 28%,
			rgba(14, 6, 9, 0.46) 44%,
			rgba(14, 6, 9, 0.16) 57%,
			rgba(14, 6, 9, 0) 66%);
	}
	.cpl-cta__inner { position: relative; }
	.cpl-cta__text { max-width: min(640px, 44vw); }
	.cpl-cta .cpl-title { color: #fff; font-size: clamp(42px, 3.8vw, 62px); }
	.cpl-cta .cpl-title { margin-top: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3); }
	.cpl-cta .cpl-desc { color: rgba(255, 255, 255, 0.86); }

	/* ---- entrance: a little fade and lift, once ---------------------------- */
	.cps-reveal-on [data-cps-reveal] {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.cps-reveal-on [data-cps-reveal].is-in { opacity: 1; transform: none; }
	.cps-reveal-on .cpl-feats [data-cps-reveal]:nth-child(2) { transition-delay: 0.06s; }
	.cps-reveal-on .cpl-feats [data-cps-reveal]:nth-child(3) { transition-delay: 0.12s; }
	.cps-reveal-on .cpl-feats [data-cps-reveal]:nth-child(4) { transition-delay: 0.18s; }

	/* ---- ENG ------------------------------------------------------------------ */
	/* Latin runs wider: the section titles a step smaller, never small (46px
	   at 1440), so each stays on its two lines */
	.cps-page.lang-en .cpl-title { font-size: clamp(36px, 3.2vw, 54px); letter-spacing: -0.03em; }
	.cps-page.lang-en .cpl-lounge__title { font-size: clamp(46px, 4.1vw, 66px); }
	.cps-page.lang-en .cpl-desc,
	.cps-page.lang-en .cpl-feat__desc,
	.cps-page.lang-en .cpl-stories__desc { letter-spacing: -0.005em; }
	.cps-page.lang-en .cpl-feat__title { letter-spacing: -0.02em; }
	.cps-page.lang-en .cpl-stories__title { letter-spacing: -0.025em; }

	@media (prefers-reduced-motion: reduce) {
		.cpl-slide, .cpl-slide.is-on,
		.cpl-stories__text, .cpl-stories__text.is-on,
		.cpl-thumb, .cpl-thumb::after, .cpl-shelf__thumb,
		.cpl-gal .cpl-slide, .cpl-gal .cpl-slide.is-on,
		.cpl-btn, .cpl-dot::before { transition: none; }
		.cps-reveal-on [data-cps-reveal] { opacity: 1; transform: none; transition: none; }
	}
}