@charset "utf-8";

/* ==========================================================================
   CamTalk / biz/goods.php - 굿즈, the phone.

   SCOPE. Every rule is inside `@media only screen and (max-width: 1000px)`,
   the project's own breakpoint, and under `.cgd-page` (a class only this
   page puts on <body>, js/camtalk-goods-mobile.js) or `.cgd`, the page's
   own <main>, which a wide window never shows.

   THE SYSTEM
     red      #f5123f             the accent word, icons, both buttons
     ink      #16161c / #4d4f5a   headings / copy
     ground   milk #fff .. blush #fff4f7, burgundy for the closing banner
     type     the site's Paperozi
     gutter   20px at 360 .. 24px at 430
     shadow   one family: a long, soft rose drop plus a 1-2px contact edge

   THE PICTURES keep their colours: no blend mode, no filter, no opacity.
   Over the hero photograph the only veil is a pale wash local to the words.

   STABILITY. Ordinary vertical scrolling: no pinning, no snap on the page,
   no scroll handler on the window. Screen heights are `svh` (the height WITH
   the address bar), so the bar sliding away resizes nothing. Every picture
   has width and height in the markup. The strip scrolls only sideways and
   owns no vertical gesture.

   STACKING. The hero and the banner are `isolation: isolate` at z-index 0,
   so their layers stay inside them and under the fixed bar (.gnb is 1).

   THE AI LAUNCHER stands in the lowest 80px on the right of every screen;
   the hero's words keep its room (--gd-launch), and its button, at the
   left, stays clear of the launcher's corner.

   NO PAUSE KEYS (2026-10-05): the strip drifts on its own and stops for a
   finger, a hover, keyboard focus, an unseen strip, a hidden tab and
   reduced motion - there is no visible play / pause control.
   ========================================================================== */

@media only screen and (max-width: 1000px) {

	.cgd-page {
		--gd-red: #f5123f;
		--gd-ink: #16161c;
		--gd-ink-2: #4d4f5a;
		--gd-gutter: clamp(20px, 5.6vw, 24px);
		--gd-header: 66px;                          /* .gnb's height on the phone */
		--gd-launch: 92px;                          /* the launcher's 80px, and air */
		--gd-shadow: 0 16px 30px -18px rgba(130, 30, 62, 0.34), 0 1px 3px rgba(20, 20, 30, 0.07);
		--gd-seam: #e0d4d3;                         /* banner.webp's top row, averaged */
	}

	.cgd, .cgd *, .cgd *::before, .cgd *::after { box-sizing: border-box; }

	/* The wide window's block: never filled on a phone (see the script),
	   and hidden here so its empty box takes no room. */
	.cgd-page .ct-goods-desktop { display: none; }

	.cgd-page .cgd[hidden] { display: block; }
	.cgd {
		color: var(--gd-ink);
		background: #fff;
		overflow: hidden;
	}
	.cgd img { display: block; max-width: none; }
	.cgd em { font-style: normal; }
	:where(.cgd) :where(h1, h2, p, ul, li) { margin: 0; padding: 0; }
	.cgd ul { list-style: none; }
	.cgd li { word-break: keep-all; }
	.cgd a { text-decoration: none; }

	.cgd-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* ---- shared type -------------------------------------------------------- */

	/* The small label of every section: red capitals on a blush pill. */
	.cgd-tag {
		display: inline-block;
		padding: 6px 11px 6px 12px;
		border-radius: 999px;
		background: #ffe9ef;
		color: var(--gd-red);
		font-size: clamp(11px, 2.95vw, 12px);
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.cgd-title {
		margin-top: 14px;
		font-size: clamp(28px, 7.9vw, 33px);        /* 31px at 390 */
		font-weight: 800;
		line-height: 1.24;
		letter-spacing: -0.045em;
		color: var(--gd-ink);
		word-break: keep-all;
	}
	.cgd-desc {
		margin-top: 12px;
		font-size: clamp(16px, 4.3vw, 17px);        /* 16.8px at 390 */
		font-weight: 400;
		line-height: 1.58;
		letter-spacing: -0.03em;
		color: var(--gd-ink-2);
		word-break: keep-all;
		text-wrap: pretty;
	}

	/* ---- buttons ------------------------------------------------------------ */

	.cgd-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		min-height: 52px;
		padding: 0 26px 0 28px;
		border-radius: 999px;
		font-size: clamp(16px, 4.3vw, 17px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.03em;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
		transition: transform 0.2s ease;
	}
	.cgd-btn:active { transform: scale(0.98); }
	.cgd-btn__arrow { width: 19px; height: 19px; flex: 0 0 auto; }
	.cgd-btn--red {
		background: linear-gradient(90deg, #ff2a55 0%, #f20a3c 100%);
		box-shadow: 0 16px 28px -14px rgba(242, 10, 60, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
	.cgd-btn--red span,
	.cgd-btn--red .cgd-btn__arrow { color: #fff; }
	.cgd-btn:focus-visible { outline: 3px solid var(--gd-ink); outline-offset: 3px; }

	/* ======================================================================
	   1. HERO - one screen with the bar
	   ====================================================================== */

	/* The bar is the site's white one (the page forces it) and lies over the
	   top 66px of this block, so the block is exactly one screen and the bar
	   is never counted twice. The height is 100svh - the screen WITH the
	   browser's bars - so when they slide away nothing here resizes and the
	   words held to the foot do not move. If the words ever need more room
	   (a very short screen), the block grows instead of clipping.
	   --gd-hero-drop lowers the words' group: it is taken off the foot's
	   padding, so the group moves and the block keeps its height. The
	   button stays at the left, clear of the launcher's corner. */
	.cgd-hero {
		--gd-hero-drop: 24px;
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		min-height: 100vh;
		min-height: 100svh;
		padding: calc(var(--gd-header) + 20px) var(--gd-gutter)
			calc(var(--gd-launch) - var(--gd-hero-drop) + env(safe-area-inset-bottom, 0px));
		overflow: hidden;
		/* the studio wall at the photograph's top edge, sampled */
		background: linear-gradient(90deg, #fbfafa 0%, #f6f3f2 30%, #ebe6e6 55%, #efe9e9 80%, #ece6e6 100%);
	}

	/* The photograph, edge to edge and never stretched. It starts a little
	   below the bar, its top edge melting into the wall. It is 6% wider than
	   the screen and held by its left edge (the glass at the right edge gives
	   up a sliver), and covers the rest of the block: a tall phone crops a
	   few pixels at the right, a short one gives up the socks at the foot. */
	.cgd .cgd-hero__img {
		position: absolute;
		z-index: -2;
		left: 0;
		top: calc(var(--gd-header) + var(--gd-img-drop));
		width: 106%;
		height: calc(100% - var(--gd-header) - var(--gd-img-drop));
		object-fit: cover;
		object-position: 0 0;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 var(--gd-img-fade));
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 var(--gd-img-fade));
	}
	.cgd-hero { --gd-img-drop: 9vw; --gd-img-fade: 16vw; }

	/* A pale ramp under the words only: it rises from the foot, strongest at
	   the left where the words start, and is gone well before the middle of
	   the picture - no box, no veil over the rest. It moves down with the
	   words (by --gd-hero-drop; the block clips the overhang). */
	.cgd-hero__wash {
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: calc(-1 * var(--gd-hero-drop));
		height: calc(var(--gd-launch) + 380px);
		pointer-events: none;
		background:
			radial-gradient(135% 72% at 0% 74%,
				rgba(255, 253, 253, 0.92) 0%,
				rgba(255, 253, 253, 0.8) 40%,
				rgba(255, 253, 253, 0.36) 64%,
				rgba(255, 253, 253, 0) 84%),
			linear-gradient(0deg, rgba(255, 253, 253, 0.42) 0%, rgba(255, 253, 253, 0.2) 45%, rgba(255, 253, 253, 0) 75%);
	}

	.cgd-hero__tag { flex: 0 0 auto; }

	/* The words: one group, held to the foot by the column's free space
	   (margin-top: auto), above the room the assistant's launcher needs. */
	.cgd-hero__words {
		position: relative;
		margin-top: auto;
		padding-top: 24px;
	}

	.cgd-hero__title {
		display: block;
		font-weight: 800;
		color: var(--gd-ink);
		word-break: keep-all;
	}
	.cgd-hero__lead,
	.cgd-hero__name { display: block; }
	.cgd-hero__lead {
		font-size: clamp(23px, 6.4vw, 27px);        /* 25px at 390 */
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.045em;
	}
	.cgd-hero__name {
		margin-top: 2px;
		font-size: clamp(36px, 10.3vw, 42px);       /* 40px at 390 */
		line-height: 1.12;
		letter-spacing: -0.05em;
	}
	.cgd-hero__name em { color: var(--gd-red); }
	.cgd-hero__lead,
	.cgd-hero__name,
	.cgd-hero__desc { text-shadow: 0 0 14px rgba(255, 255, 255, 0.85), 0 0 3px rgba(255, 255, 255, 0.7); }

	.cgd-hero__desc {
		margin-top: 14px;
		font-size: clamp(16px, 4.25vw, 17px);       /* 16.6px at 390 */
		font-weight: 500;
		line-height: 1.55;
		letter-spacing: -0.035em;
		color: #2f3039;
		word-break: keep-all;
		max-width: calc(59vw - var(--gd-gutter));
	}

	.cgd-hero__cta { margin-top: 22px; }

	/* A short screen gives up spacing first, never type size. */
	@media (max-height: 760px) {
		.cgd-hero {
			--gd-hero-drop: 16px;
			padding-top: calc(var(--gd-header) + 14px);
			padding-bottom: calc(86px - var(--gd-hero-drop) + env(safe-area-inset-bottom, 0px));
			--gd-img-drop: 6vw;
		}
		.cgd-hero__words { padding-top: 16px; }
		.cgd-hero__desc { margin-top: 10px; line-height: 1.5; }
		.cgd-hero__cta { margin-top: 16px; min-height: 48px; }
	}
	/* The English button is ~30px wider and, on a narrow phone, reaches the
	   launcher's column: it keeps its distance above the launcher there. */
	@media (max-width: 400px) {
		.cgd-page.lang-en .cgd-hero { --gd-hero-drop: 10px; }
	}

	/* ======================================================================
	   THE FOUR PLATES - a compact row under the hero
	   ====================================================================== */

	/* An ordinary sideways scroller in the page's flow - no motion, no dots,
	   no key, nothing pinned. A plate is 62% of the screen, so the next one
	   shows at the edge; each swipe rests on a plate. Vertical drags pass to
	   the page. */
	.cgd-feats-row {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gd-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		background: linear-gradient(180deg, #fff3f6 0%, #ffeef3 100%);
	}
	.cgd-feats-row::-webkit-scrollbar { display: none; }
	.cgd .cgd-feats {
		display: flex;
		gap: 10px;
		width: max-content;
		padding: 14px var(--gd-gutter) 16px;
	}
	.cgd-feat {
		flex: 0 0 auto;
		width: clamp(214px, 62vw, 270px);
		padding: 11px 13px 12px;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 8px 18px -12px rgba(130, 30, 62, 0.32), 0 1px 2px rgba(20, 20, 30, 0.06);
		scroll-snap-align: start;
	}
	.cgd-feat__head {
		display: flex;
		align-items: center;
		gap: 7px;
	}
	.cgd-feat__icon {
		width: 22px;
		height: 22px;
		flex: 0 0 auto;
		fill: none;
		stroke: var(--gd-red);
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.cgd-feat__head strong {
		font-size: clamp(14.5px, 3.9vw, 15.5px);
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: -0.04em;
		color: var(--gd-ink);
		white-space: nowrap;
	}
	.cgd-feat__desc {
		margin-top: 5px;
		font-size: clamp(12.5px, 3.35vw, 13.5px);
		font-weight: 500;
		line-height: 1.42;
		letter-spacing: -0.03em;
		color: #6a6c77;
		word-break: keep-all;
	}

	/* ======================================================================
	   2. OFFICIAL GOODS LINEUP - about one screen under the bar
	   ====================================================================== */

	/* The cards take what the screen leaves: their picture is the height
	   left over after the words and the name block, between 0.76 and 1.2
	   of the card's width. However many products there are, they are one
	   row: the section's height never depends on the count.
	   The section is as tall as its content - no screen-high box with the
	   content centred in it, which left ~115px of empty ground under the
	   cards. The strip's own foot (the room for the cards' shadow) is the
	   whole gap to the banner. */
	.cgd-lineup {
		--gd-card-w: clamp(240px, 72vw, 318px);
		--gd-card-gap: 16px;
		--gd-lineup-rest: 436px;                    /* everything but the picture */
		--gd-card-img: clamp(calc(var(--gd-card-w) * 0.76),
			calc(100svh - var(--gd-header) - var(--gd-lineup-rest)),
			calc(var(--gd-card-w) * 1.2));
		position: relative;
		padding: clamp(34px, 9vw, 44px) 0 0;
		scroll-margin-top: var(--gd-header);
		/* The foot settles into the banner photograph's top-edge colour
		   (--gd-seam, its top row averaged) over the last 56px - a smoothstep,
		   so it starts and lands without a visible edge. It starts behind the
		   cards' name blocks (the white cards cover it) and is fully in the
		   seam colour where the banner begins. */
		background:
			linear-gradient(180deg,
				rgba(224, 212, 211, 0) calc(100% - 56px),
				rgba(224, 212, 211, 0.06) calc(100% - 47.6px),
				rgba(224, 212, 211, 0.22) calc(100% - 39.2px),
				rgba(224, 212, 211, 0.42) calc(100% - 30.8px),
				rgba(224, 212, 211, 0.65) calc(100% - 22.4px),
				rgba(224, 212, 211, 0.84) calc(100% - 14px),
				rgba(224, 212, 211, 0.97) calc(100% - 5.6px),
				var(--gd-seam) 100%),
			radial-gradient(90% 46% at 50% 66%, rgba(255, 214, 226, 0.38) 0%, rgba(255, 214, 226, 0) 72%),
			linear-gradient(180deg, #fff 0%, #fffafb 100%);
	}
	.cgd-lineup:focus { outline: none; }

	.cgd-lineup__head { padding: 0 var(--gd-gutter); }
	/* the label as a block of its own width, so no line box adds to it */
	.cgd-lineup__head .cgd-tag { display: block; width: fit-content; }

	/* The strip is an ordinary sideways scroller: the finger moves it
	   natively, and the script's slow drift is the same scroll position
	   moving on its own - one mechanism, never two. It takes no vertical
	   gesture, so the page scrolls freely over it. */
	.cgd-strip {
		margin-top: clamp(22px, 6.4vw, 28px);
		padding: 8px var(--gd-gutter) 22px;          /* the foot: the cards' shadow, then the banner */
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-padding-inline: var(--gd-gutter);
	}
	.cgd-strip::-webkit-scrollbar { display: none; }
	.cgd-strip:focus-visible { outline: 3px solid var(--gd-red); outline-offset: -3px; }

	.cgd .cgd-strip__list {
		display: flex;
		gap: var(--gd-card-gap);
		width: max-content;
	}
	/* every card is as tall as the tallest (a third title line in ENG), so
	   no card ends short of the strip's foot */
	.cgd-card { display: flex; flex: 0 0 var(--gd-card-w); width: var(--gd-card-w); }

	.cgd-card__link {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 18px 32px -20px rgba(130, 30, 62, 0.4), 0 2px 6px -2px rgba(20, 20, 30, 0.08);
		-webkit-tap-highlight-color: transparent;
		-webkit-user-drag: none;
	}
	/* THE PICTURE AREA has one height for every card. Each product picture
	   is a square cut from the store photo with even air around the item
	   (img/goods-mobile/products/), shown whole - contain, never cropped,
	   never tinted - on its own photo ground (the inline background-color),
	   so the square's edge disappears into it. */
	.cgd-card__media {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		height: var(--gd-card-img);
		padding: 4%;
	}
	.cgd .cgd-card__img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		-webkit-user-drag: none;
		user-select: none;
	}
	/* The photo cards come on a studio-grey gradient that cannot be
	   continued: they are shown as a rounded tile on the store's white. */
	.cgd .cgd-card__media--tile { padding: 6%; }
	.cgd .cgd-card__media--tile .cgd-card__img { border-radius: 14px; }

	/* THE NAME is the store's exact name in two lines of type: its series
	   ("캠톡플레이 굿즈 3월호") small, the rest as the title, in their own
	   order. The series runs the full width; the title shares its row with
	   the arrow. Room is kept for one series line and two title lines on
	   every card, so all cards are one height and every title starts at the
	   same place; nothing is cut or ellipsised. */
	.cgd-card__foot {
		position: relative;
		display: block;
		flex: 1 0 auto;
		padding: 13px 14px 15px 16px;
		border-top: 1px solid rgba(22, 22, 28, 0.06);
	}
	.cgd-card__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.cgd-card__foot .cgd-card__go {
		position: absolute;
		right: 14px;
		bottom: 16px;
	}
	.cgd-card__series {
		min-height: 1.3em;
		font-size: 12.5px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.02em;
		color: #8a8c96;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.cgd-card__name {
		min-height: 2.6em;
		margin-top: 3px;
		padding-right: 38px;                        /* the arrow's column */
		font-size: clamp(16.5px, 4.4vw, 18px);
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.04em;
		color: var(--gd-ink);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	/* the small arrow in a ring, as on the reference */
	.cgd-card__go {
		position: relative;
		flex: 0 0 auto;
		width: 28px;
		height: 28px;
		border: 1.6px solid var(--gd-red);
		border-radius: 50%;
	}
	.cgd-card__go::before,
	.cgd-card__go::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
	}
	.cgd-card__go::before {
		width: 11px;
		height: 1.6px;
		margin: -0.8px 0 0 -6px;
		border-radius: 1px;
		background: var(--gd-red);
	}
	.cgd-card__go::after {
		width: 6px;
		height: 6px;
		margin: -3.4px 0 0 -1px;
		border-top: 1.6px solid var(--gd-red);
		border-right: 1.6px solid var(--gd-red);
		transform: rotate(45deg);
	}
	.cgd-card__link:focus-visible { outline: 3px solid var(--gd-red); outline-offset: 3px; }

	/* A short screen gives up the lineup's spacing before its type. */
	@media (max-height: 760px) {
		.cgd-lineup { padding-top: 26px; }
		.cgd-lineup .cgd-title { margin-top: 10px; }
		.cgd-lineup .cgd-desc { margin-top: 8px; }
		.cgd-strip { margin-top: 16px; }
		.cgd-card__foot { padding-top: 11px; padding-bottom: 13px; }
		.cgd-card__foot .cgd-card__go { bottom: 14px; }
	}

	/* Reduced motion: no drift, no copies - the products themselves, which
	   stop on a card edge when flicked. */
	.cgd-strip--still { scroll-snap-type: x mandatory; }
	.cgd-strip--still .cgd-card { scroll-snap-align: start; }

	/* ======================================================================
	   3. BANNER
	   ====================================================================== */

	/* The goods photograph is the whole section, edge to edge, at its own
	   proportions (1263 : 1246) - never stretched, never cropped, never
	   tinted. The button sits on it, centred near its foot: below the
	   pouch's CAMTALKPLAY print (79-84% down) and far from the face (8-32%
	   down, right of centre). It is the hero's red capsule (.cgd-btn--red),
	   white words on the brand red; behind it only a faint shade local to
	   the foot. */
	.cgd-banner {
		position: relative;
		z-index: 0;
		isolation: isolate;
		background: #f1dedd;                        /* the picture's foot, while it loads */
	}
	.cgd .cgd-banner__img {
		position: relative;
		z-index: 0;
		width: 100%;
		height: auto;
	}
	/* THE SEAM. The lineup's foot ends in --gd-seam, and this veil starts in
	   it and is gone within 40-48px (11vw): it eases out fast, so only the
	   studio wall, the tote's handles and the crown of the hair (from ~4% of
	   the photo's height) are touched; the face (from ~8%), the prints and
	   the goods are not. A plain colour over the picture - no blur, no
	   blend mode. */
	.cgd-banner::before {
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		top: 0;
		height: clamp(40px, 11vw, 48px);
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(224, 212, 211, 0.92) 0%,
			rgba(224, 212, 211, 0.72) 12%,
			rgba(224, 212, 211, 0.52) 25%,
			rgba(224, 212, 211, 0.33) 40%,
			rgba(224, 212, 211, 0.17) 56%,
			rgba(224, 212, 211, 0.06) 74%,
			rgba(224, 212, 211, 0) 100%);
	}
	.cgd-banner__shade {
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 0;
		height: 26%;
		pointer-events: none;
		background: linear-gradient(0deg, rgba(40, 10, 20, 0.22) 0%, rgba(40, 10, 20, 0.1) 45%, rgba(40, 10, 20, 0) 100%);
	}
	.cgd-banner__cta {
		position: absolute;
		z-index: 2;
		left: 50%;
		bottom: clamp(13px, 3.8vw, 17px);           /* under the pouch's print and its reflection */
		min-height: 50px;
		padding: 0 24px 0 26px;
		transform: translateX(-50%);
		box-shadow: 0 14px 28px -12px rgba(40, 6, 18, 0.55), 0 2px 6px rgba(40, 6, 18, 0.12);
	}
	.cgd-banner__cta:active { transform: translateX(-50%) scale(0.98); }
	.cgd-banner__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

	/* ---- ENG -----------------------------------------------------------------
	   Latin runs wider and wants less of the Korean tightening; the English
	   copy carries fewer forced breaks and is balanced by the browser. */
	.cgd-page.lang-en .cgd-hero__lead { font-size: clamp(22px, 6vw, 25px); letter-spacing: -0.03em; }
	.cgd-page.lang-en .cgd-hero__name { letter-spacing: -0.035em; }
	.cgd-page.lang-en .cgd-hero__desc { letter-spacing: -0.015em; text-wrap: balance; }
	.cgd-page.lang-en .cgd-title { font-size: clamp(26px, 7.3vw, 31px); letter-spacing: -0.03em; text-wrap: balance; }
	.cgd-page.lang-en .cgd-desc { letter-spacing: -0.01em; text-wrap: balance; }
	.cgd-page.lang-en .cgd-feat__head strong { font-size: clamp(14px, 3.75vw, 15px); letter-spacing: -0.025em; }
	.cgd-page.lang-en .cgd-feat__desc { letter-spacing: -0.01em; }
	.cgd-page.lang-en .cgd-card__name { font-size: clamp(16px, 4.2vw, 17.5px); letter-spacing: -0.02em; }
	.cgd-page.lang-en .cgd-card__series { letter-spacing: -0.005em; }
	.cgd-page.lang-en .cgd-card__name,
	.cgd-page.lang-en .cgd-card__series { word-break: normal; }
	.cgd-page.lang-en .cgd-hero__title,
	.cgd-page.lang-en .cgd-hero__desc,
	.cgd-page.lang-en .cgd-title,
	.cgd-page.lang-en .cgd-desc,
	.cgd-page.lang-en .cgd-feat__desc { word-break: normal; overflow-wrap: break-word; }

	@media (prefers-reduced-motion: reduce) {
		.cgd-btn { transition: none; }
	}
}