@charset "utf-8";

/* ==========================================================================
   CamTalk / creator.php + creators.php - the phone.

   SCOPE. Everything that lays the phone out is inside
   `@media only screen and (max-width: 1000px)`, which is the project's own
   breakpoint, and every selector under it is nested in `.ctc-page`, a class
   only these two pages put on <body>. The one block outside that media query
   is at the foot of this file: four rules that give the WIDE window the white
   bar this page has always had, replacing the `setInterval` that used to add
   `.gnb_invert` ten times a second. Nothing here can be seen by another page,
   and no global selector for a card, a heading or an image is touched.

   THE TWO PAGES.
     .ctc-page--landing  creator.php  - hero, 모든 크리에이터, AI 크리에이터,
                                        closing banner, footer.
     .ctc-page--catalog  creators.php - search, categories, heading, grid.
   They share the card, the grid, the gutter and the type scale; they differ
   in what sits above the grid and in what the header looks like.

   THE SYSTEM. One gutter, one gap, one radius, one accent. The gutter is 18px
   at 360, 21px at 390 and 22px at 430 - the reference's own share of the
   width - and every section uses it, so nothing steps in or out down the
   page. Cards are two to a row at every width including 360, because the
   reference is two to a row at every width including 360.

   STABILITY, which is most of the brief.
     * The hero's picture is an <img> INSIDE the hero. No
       `background-attachment: fixed`, no scroll-driven transform, no scale
       per scroll event - so there is nothing for the scroller to fight.
     * The hero's height is an aspect-ratio off its own width, capped in
       `svh`. `svh` is the viewport WITH the address bar showing, so it does
       not change when the bar slides away; `vh`/`dvh` would re-measure the
       hero on every flick.
     * Every picture on the page has width and height attributes and a box
       with a known ratio, so a late image cannot move the card under it or
       the section after it.
     * Every section carries `z-index: 0; isolation: isolate` next to its
       `position: relative`. `.gnb` is z-index 1 in the ROOT stacking context
       and `.gnb_fixed` adds no z-index of its own, so a positioned child
       anywhere below would otherwise paint straight over the bar on the way
       past it. Isolated, each section's layers are compared among themselves.
     * The reveal is opacity plus an 8px lift on the CARD, never on anything
       that holds space, and it is one-shot: scrolling back up cannot hide
       anything that has already been shown.
   ========================================================================== */

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

	.ctc-page {
		/* 18px at 360, 21px at 390, 22px at 430. */
		--cc-gutter: clamp(18px, 5.4vw, 22px);
		--cc-gap: clamp(10px, 3.1vw, 14px);
		--cc-radius: 14px;

		--cc-bg: #f7f7f8;
		--cc-card: #ffffff;
		--cc-ink: #16161a;
		--cc-ink-2: #3a3a42;
		--cc-muted: #8b8b93;
		--cc-line: #ebebef;
		--cc-accent: #ff2e55;
		--cc-ai: #3d4bb0;
		--cc-night: #0c0c10;

		--cc-header: 65px;               /* .gnb's own height on the phone */
	}

	/* This project sets no global `box-sizing`, so the renewal declares its
	   own on its own elements. Site-wide it would move every existing block
	   on every page; without it a 100%-wide block with a gutter is wider than
	   the window, which is how a full-bleed banner overflows. */
	.ctc, .ctc *, .ctc *::before, .ctc *::after { box-sizing: border-box; }

	/* The wide window's page. Same markup, same strings, simply not laid out
	   here. */
	.ctc-page .ct-creator-desktop { display: none; }

	/* `hidden` is on <main> in the HTML so that a wide window never shows the
	   phone's markup even for the frame before this file arrives. Below the
	   breakpoint it is this rule that decides, not the attribute. */
	.ctc-page .ctc[hidden] { display: block; }

	.ctc { background: var(--cc-bg); color: var(--cc-ink); }
	.ctc img { display: block; max-width: 100%; }
	/* NOT `color: inherit` - common.css already gives every element that
	   through its `*` reset, and at (0,2,0) a rule here would outrank the
	   colour each link sets for itself. The closing CTA's label came out
	   #16161a on a near-black button exactly that way. */
	.ctc a { text-decoration: none; }
	.ctc ul { list-style: none; }
	.ctc em { font-style: normal; }
	/* `:where()` scores zero, so this resets the UA's button skin and still
	   loses to every single class below it. Written as `.ctc button` it was
	   (0,1,1) and quietly beat `.ctc-chip` (0,1,0): the inactive chips lost
	   their grey, the empty state's "전체 보기" lost its black pill, and
	   `font: inherit` - a shorthand - reset all four buttons to the body's
	   15px. */
	:where(.ctc) button { background: none; font: inherit; cursor: pointer; }

	/* Outline only. A `border-radius` here is not the outline's radius - it
	   is the ELEMENT's, so focusing the search field turned the pill into a
	   6px rectangle. The outline already follows whatever radius the element
	   has. */
	.ctc a:focus-visible,
	.ctc button:focus-visible,
	.ctc input:focus-visible {
		outline: 3px solid var(--cc-accent);
		outline-offset: 2px;
	}

	/* Screen-reader-only. The external-link glyph is aria-hidden, so each
	   card ends with the words the glyph stands for. */
	.ctc-sr {
		position: absolute; width: 1px; height: 1px; margin: -1px;
		padding: 0; overflow: hidden; clip: rect(0 0 0 0);
		clip-path: inset(50%); white-space: nowrap; border: 0;
	}

	/* ======================================================================
	   THE HEADER

	   One bar, the shared one. What changes is its skin.

	   LANDING: the hero starts at y=0 and `.gnb` is `position: absolute`, so
	   the bar sits ON the picture exactly as the reference draws it. The
	   picture's top is the bright curtain and the window, so the type is DARK
	   over it rather than white - white is what `.gnb` is by default and it
	   would be invisible here. Past 150px js/common.js adds `.gnb_invert` and
	   the bar becomes the solid white one the light sections need; that rule
	   needs the extra class to outrank the transparent one above it.

	   CATALOG: there is no hero, so the bar is white and fixed from the
	   first frame and the page is padded by its height.
	   ====================================================================== */

	.ctc-page--landing .gnb {
		background-color: transparent;
		border-bottom-color: transparent;
		color: #1b1b20;
	}
	.ctc-page--landing .gnb .logo a b { color: #e0102f; }
	.ctc-page--landing .gnb .right img { filter: invert(100%); opacity: 0.25; }

	.ctc-page--landing .gnb.gnb_invert {
		background-color: #fff;
		border-bottom: 1px solid var(--cc-line);
		color: #333;
	}
	.ctc-page--landing .gnb.gnb_invert .logo a b { color: #cc0c0c; }

	.ctc-page--catalog .gnb {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		border-bottom: 1px solid var(--cc-line);
		color: #333;
		z-index: 20;
	}
	.ctc-page--catalog .gnb .logo a b { color: #cc0c0c; }
	.ctc-page--catalog .gnb .right img { filter: invert(100%); opacity: 0.2; }

	/* ======================================================================
	   1. THE HERO
	   ====================================================================== */

	/* ONE FULL SCREEN, header included.

	   The hero starts at y=0 and `.gnb` is `position: absolute` over it, so
	   `100svh` is the whole first screen and the bar's height is NOT added a
	   second time - it is already inside this box, and the copy is padded
	   clear of it.

	   `svh` and not `vh`/`dvh`: the small viewport unit is the height WITH
	   the address bar showing, so the hero keeps one height while the bar
	   slides away instead of being re-measured on every flick.

	   `min-height`, not `height`: on a short screen, or when a translation
	   runs to an extra line, the hero grows rather than clipping the copy -
	   which is why the copy is a flex child in the flow here and not an
	   absolutely positioned layer. */
	.ctc-hero {
		position: relative;
		z-index: 0;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		overflow: hidden;
		min-height: 100vh;
		min-height: 100svh;
		background: #ece7e4;
	}

	.ctc-hero__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* The frame is 941 x 1672 (1 : 1.78) and a full-screen hero is about
		   1 : 2.17, so `cover` scales by HEIGHT: the whole height of the
		   photograph is on screen and it is the sides that are cropped, by
		   about 18%. Nothing is stretched and nothing is enlarged beyond
		   what filling the screen requires; the face, which sits at 37-54%
		   of the height and just right of centre, stays whole at 360, 390
		   and 430. */
		object-position: 50% 50%;
	}

	/* Nine stops rather than two. A linear ramp over a photograph shows its
	   own edge - a faint horizontal line where the eye expects none - and the
	   bedding under this text is the brightest part of the shot, so the ramp
	   has to travel a long way and arrive at nothing.

	   It is measured in PIXELS, not in a share of the hero: what it has to
	   cover is the copy, which is the same height on every phone, so a
	   percentage would spread it over half the screen on a tall one. 440px
	   from the foot reaches 74% at the very bottom and is gone well below
	   the face, which ends at 47% of the height - about 450px from the foot
	   at 844. The curtain, the sweater and the bedding are all still there
	   as picture. */
	.ctc-hero__shade {
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			/* A light haze under the bar, 120px tall and gone by the end of
			   it. The bar's type is DARK here - the reference draws it dark
			   and the top of this picture is a sunlit window - but the
			   subject's hair reaches the top right corner, and KOR / ENG /
			   the burger sat on it unreadable. White and not black because
			   the other two thirds of that strip are already white: this is
			   invisible over the curtain and only lifts the hair. */
			linear-gradient(
				to bottom,
				rgba(255, 255, 255, 0.42) 0%,
				rgba(255, 255, 255, 0.32) 34%,
				rgba(255, 255, 255, 0.17) 66%,
				rgba(255, 255, 255, 0) 100%
			) top / 100% 115px no-repeat,
			linear-gradient(
				to top,
				rgba(20, 14, 16, 0.72) 0%,
				rgba(20, 14, 16, 0.71) 12%,
				rgba(20, 14, 16, 0.67) 30%,
				rgba(20, 14, 16, 0.59) 48%,
				rgba(20, 14, 16, 0.47) 64%,
				rgba(20, 14, 16, 0.31) 76%,
				rgba(20, 14, 16, 0.17) 86%,
				rgba(20, 14, 16, 0.06) 94%,
				rgba(20, 14, 16, 0) 100%
			) bottom / 100% 460px no-repeat;
	}

	/* In the flow, not on top of it. As a flex child of a `flex-end` column
	   it still sits at the foot of the screen, but when the copy is taller
	   than the room it has - a short phone, or a translation that runs long -
	   it pushes the hero taller instead of being clipped or sliding under
	   the bar.

	   The top padding is the bar's own height plus a little: that is the
	   guard that keeps the heading out from under the header on the shortest
	   screen, and it costs nothing on a tall one.

	   The bottom padding clears the assistant's launcher, which is fixed at
	   56px square, 14px from the corner - so the lowest line of the
	   paragraph ends above it rather than behind it. */
	.ctc-hero__copy {
		position: relative;
		z-index: 2;
		padding: calc(var(--cc-header) + 16px) var(--cc-gutter)
			calc(clamp(70px, 18vw, 84px) + env(safe-area-inset-bottom));
		color: #fff;
	}

	/* The typography of the second reference: one heavy weight of the
	   project's own Paperozi, white, set tight, with the stop after 모델 in
	   the accent. The paragraph is a third of its size, light, and opened up
	   - that RATIO is what the reference is showing, not just the colour. */
	.ctc-hero__copy h1 {
		font-size: clamp(50px, 15.5vw, 62px);
		font-weight: 800;
		line-height: 1.04;
		letter-spacing: -0.025em;
		word-break: keep-all;
	}
	/* The stop is a glyph with its own left side bearing, and at 60px that
	   bearing is a visible gap between 델 and the dot the reference sets
	   tight against it. */
	.ctc-hero__copy h1 em { color: var(--cc-accent); margin-left: -0.1em; }

	.ctc-hero__copy p {
		margin-top: clamp(12px, 3.6vw, 16px);
		max-width: 22em;
		font-size: clamp(14px, 4.15vw, 17px);
		font-weight: 400;
		line-height: 1.72;
		color: rgba(255, 255, 255, 0.9);
		word-break: keep-all;
	}

	/* English sets longer words and must be allowed to break them rather than
	   push the paragraph past the gutter. */
	html[lang="en"] .ctc-hero__copy h1,
	html[lang="en"] .ctc-hero__copy p {
		word-break: normal;
		overflow-wrap: break-word;
	}
	html[lang="en"] .ctc-hero__copy h1 { letter-spacing: -0.03em; }

	/* ======================================================================
	   2. THE LIGHT SECTIONS AND THEIR HEADINGS
	   ====================================================================== */

	.ctc-section {
		position: relative;
		z-index: 0;
		isolation: isolate;
		padding: clamp(34px, 9.8vw, 44px) var(--cc-gutter) clamp(28px, 7.6vw, 36px);
		background: var(--cc-bg);
	}

	/* The delicate separation the reference puts between the two card
	   sections: a hairline inset by the gutter, not a band of empty page. */
	.ctc-section--all::after {
		content: "";
		position: absolute;
		left: var(--cc-gutter);
		right: var(--cc-gutter);
		bottom: 0;
		height: 1px;
		background: var(--cc-line);
	}

	.ctc-head h1,
	.ctc-head h2 {
		font-size: clamp(22px, 6.3vw, 26px);
		font-weight: 800;
		line-height: 1.25;
		letter-spacing: -0.025em;
		color: var(--cc-ink);
		word-break: keep-all;
	}
	.ctc-head p {
		margin-top: 7px;
		font-size: clamp(12.5px, 3.5vw, 14px);
		font-weight: 400;
		line-height: 1.6;
		color: var(--cc-muted);
		word-break: keep-all;
	}
	html[lang="en"] .ctc-head h1,
	html[lang="en"] .ctc-head h2,
	html[lang="en"] .ctc-head p {
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* ======================================================================
	   3. THE GRID AND THE CARD
	   ====================================================================== */

	.ctc-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cc-gap);
		margin-top: clamp(16px, 4.6vw, 20px);
	}

	/* `minmax(0, 1fr)` above and `min-width: 0` here are what let a long name
	   wrap instead of widening its column: without them a grid item's minimum
	   is its content and the two columns stop being equal. */
	.ctc-card { min-width: 0; }

	.ctc-card__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: var(--cc-card);
		border-radius: var(--cc-radius);
		overflow: hidden;
		box-shadow:
			0 1px 2px rgba(17, 17, 26, 0.04),
			0 8px 20px -14px rgba(17, 17, 26, 0.30);
	}

	.ctc-card__media {
		position: relative;
		display: block;
		aspect-ratio: 1 / 1;          /* the reference's cards are 143 x 139 */
		background: #ececed;          /* the box is reserved before the file lands */
	}
	.ctc-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Portraits: when a square source has to be cropped at all, the head
		   is at the top of it. */
		object-position: 50% 22%;
	}

	.ctc-card__flag {
		position: absolute;
		top: 9px;
		left: 9px;
		padding: 4px 8px 5px;
		border-radius: 999px;
		background: rgba(18, 18, 22, 0.48);
		color: #fff;
		font-size: 9px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0.09em;
		white-space: nowrap;
	}
	/* The one thing that has to separate an AI profile from a CamTalk one at
	   a glance. The words inside are each profile's own. */
	.ctc-card--ai .ctc-card__flag {
		background: linear-gradient(135deg, rgba(74, 90, 200, 0.94), rgba(41, 47, 118, 0.94));
		padding-left: 7px;
		padding-right: 7px;
		letter-spacing: 0.05em;
	}

	.ctc-card__foot {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: auto;             /* an unequal name keeps the rows level */
		padding: 9px 11px 11px;
	}
	.ctc-card__id { flex: 1 1 auto; min-width: 0; }

	.ctc-card__name {
		display: block;
		font-size: clamp(13.5px, 3.85vw, 15.5px);
		font-weight: 700;
		line-height: 1.22;
		letter-spacing: -0.015em;
		color: var(--cc-ink);
		/* Lovelyelllang is thirteen characters in a 140px column. It wraps to
		   a second line; it is never cut, and it never reaches the glyph,
		   which is a flex sibling and not an overlay.

		   `keep-all` because common.css sets `li { word-break: break-all }`,
		   which would otherwise break Camtalker and Viewchatter mid-word;
		   `anywhere` so the one name that cannot fit still wraps. */
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	.ctc-card__role {
		display: block;
		margin-top: 3px;
		font-size: clamp(10.5px, 3vw, 12px);
		font-weight: 400;
		line-height: 1.3;
		color: var(--cc-muted);
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.ctc-card__go {
		flex: 0 0 auto;
		width: 19px;
		height: 19px;
		fill: none;
		stroke: #1b1b20;
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* ======================================================================
	   4. "더 많은 … 보기"
	   ====================================================================== */

	.ctc-more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: clamp(20px, 5.6vw, 26px);
		font-size: clamp(13px, 3.6vw, 14px);
		font-weight: 600;
		color: var(--cc-ink-2);
	}
	.ctc-more__dot {
		display: grid;
		place-items: center;
		width: 30px;
		height: 30px;
		border: 1px solid #dcdce1;
		border-radius: 50%;
		background: #fff;
	}
	.ctc-more__dot svg {
		width: 15px;
		height: 15px;
		fill: none;
		stroke: #26262c;
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* ======================================================================
	   5. THE CLOSING BANNER
	   ====================================================================== */

	.ctc-cta {
		position: relative;
		z-index: 0;
		isolation: isolate;
		background: var(--cc-night);
	}

	.ctc-cta__media { position: relative; }
	.ctc-cta__media img {
		width: 100%;
		height: auto;                  /* 880 x 586 - the supplied 1672 x 941
		                                  frame with 259px taken off its RIGHT,
		                                  which is pillow, to reach the 1.5 : 1
		                                  this banner has always been. Cropping
		                                  that side and not the other is what
		                                  keeps the head at the right edge and
		                                  leaves the left half plain bedding,
		                                  which is what the copy below sits on.
		                                  Nothing of the face is lost. */
	}

	/* The picture does not stop, it becomes the dark foot. Six stops for the
	   same reason the hero has seven. */
	.ctc-cta__fade {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 56%;
		pointer-events: none;
		background: linear-gradient(
			to bottom,
			rgba(12, 12, 16, 0) 0%,
			rgba(12, 12, 16, 0.10) 26%,
			rgba(12, 12, 16, 0.30) 48%,
			rgba(12, 12, 16, 0.62) 68%,
			rgba(12, 12, 16, 0.88) 85%,
			var(--cc-night) 100%
		);
	}

	.ctc-cta__copy {
		position: absolute;
		z-index: 1;
		left: var(--cc-gutter);
		right: 46%;                    /* the face has the right of the frame */
		bottom: 15%;
	}
	.ctc-cta__title {
		font-size: clamp(22px, 6.2vw, 26px);
		font-weight: 600;
		line-height: 1.42;
		letter-spacing: -0.02em;
		color: #93414c;
		word-break: keep-all;
	}
	.ctc-cta__claim {
		margin-top: clamp(12px, 3.6vw, 16px);
		font-size: clamp(9.5px, 2.7vw, 11px);
		font-weight: 600;
		line-height: 1.85;
		letter-spacing: 0.18em;
		color: rgba(64, 48, 50, 0.92);
		white-space: nowrap;
	}
	html[lang="en"] .ctc-cta__copy { right: 40%; }
	html[lang="en"] .ctc-cta__title { word-break: normal; overflow-wrap: break-word; }

	.ctc-cta__foot {
		padding: clamp(16px, 4.6vw, 22px) var(--cc-gutter) clamp(28px, 7.6vw, 36px);
		background: var(--cc-night);
	}
	.ctc-cta__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 56px;
		padding: 0 18px;
		border: 1.5px solid var(--cc-accent);
		border-radius: 999px;
		background: rgba(255, 46, 85, 0.07);
		color: #fff;
		font-size: clamp(14px, 4vw, 16px);
		font-weight: 700;
		letter-spacing: -0.01em;
		/* The reference's glow. Two soft rings and one inner wash - no filter,
		   no blurred pseudo-element, nothing the compositor has to re-rasterise
		   while the page moves. */
		box-shadow:
			0 0 0 1px rgba(255, 46, 85, 0.16),
			0 0 24px rgba(255, 46, 85, 0.26),
			inset 0 0 18px rgba(255, 46, 85, 0.10);
	}
	.ctc-cta__arrow svg {
		display: block;
		width: 17px;
		height: 17px;
		fill: none;
		stroke: #fff;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* ======================================================================
	   6. THE CATALOG
	   ====================================================================== */

	.ctc-catalog {
		position: relative;
		z-index: 0;
		isolation: isolate;
		padding-top: var(--cc-header);
		min-height: 100svh;
	}

	.ctc-tools { padding: clamp(12px, 3.4vw, 16px) var(--cc-gutter) 0; }

	.ctc-search {
		position: relative;
		display: flex;
		align-items: center;
		gap: 8px;
		height: 46px;
		padding: 0 8px 0 14px;
		border-radius: 999px;
		background: #ededf0;
	}
	.ctc-search__icon {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		fill: none;
		stroke: #6f6f78;
		stroke-width: 1.9;
		stroke-linecap: round;
	}
	.ctc-search__input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		border: 0;
		/* The field is a rectangle inside a pill, so its own focus ring came
		   out as a rectangle across the middle of one. The radius is on the
		   INPUT, which is what the outline follows. */
		border-radius: 999px;
		background: none;
		font-size: 14px;
		font-weight: 400;
		color: var(--cc-ink);
		/* iOS zooms a focused field below 16px unless the page allows zoom
		   and the field is large enough; the field is 46px and the page keeps
		   pinch-to-zoom, so this is only about the caret sitting straight. */
		line-height: 46px;
		-webkit-appearance: none;
		appearance: none;
	}
	.ctc-search__input::placeholder { color: #9a9aa3; }
	.ctc-search__input::-webkit-search-cancel-button { display: none; }

	.ctc-search__clear,
	.ctc-search__opts {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}
	.ctc-search__clear svg,
	.ctc-search__opts svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: #55555e;
		stroke-width: 1.8;
		stroke-linecap: round;
	}
	.ctc-search__clear svg { stroke: #6f6f78; width: 15px; height: 15px; }
	/* `display: grid` above is (0,1,0) and so is the UA's `[hidden]`, and this
	   file wins on order - so the clear button was painted over an empty
	   field. Every element this renewal hides with the attribute states it. */
	.ctc-search__clear[hidden] { display: none; }
	.ctc-search__opts[aria-expanded="true"] { background: #dededf; }

	.ctc-opts {
		margin-top: 10px;
		padding: 12px 14px 14px;
		border: 1px solid var(--cc-line);
		border-radius: 12px;
		background: #fff;
	}
	.ctc-opts[hidden] { display: none; }
	.ctc-opts__title {
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--cc-muted);
	}
	.ctc-opts__row { display: flex; gap: 8px; margin-top: 9px; }
	.ctc-opt {
		padding: 8px 14px 9px;
		border: 1px solid var(--cc-line);
		border-radius: 999px;
		font-size: 12.5px;
		font-weight: 500;
		color: var(--cc-ink-2);
	}
	.ctc-opt.is-on {
		border-color: var(--cc-ink);
		background: var(--cc-ink);
		color: #fff;
		font-weight: 600;
	}

	/* One row, and it scrolls sideways if a translation makes the four
	   labels wider than the window rather than wrapping into two rows or
	   pushing the page sideways. The negative margin lets the row bleed to
	   the screen edge while its first and last chip stay on the gutter. */
	.ctc-cats {
		display: flex;
		gap: 8px;
		margin: clamp(12px, 3.4vw, 15px) calc(var(--cc-gutter) * -1) 0;
		padding: 0 var(--cc-gutter);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ctc-cats::-webkit-scrollbar { display: none; }

	.ctc-chip {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 0 17px;
		border-radius: 999px;
		background: #efeff1;
		color: var(--cc-ink-2);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: -0.01em;
	}
	.ctc-chip.is-on {
		background: #17171b;
		color: #fff;
		font-weight: 600;
	}

	.ctc-head--catalog { padding: clamp(22px, 6vw, 28px) var(--cc-gutter) 0; }

	.ctc-grid--catalog {
		padding: 0 var(--cc-gutter) clamp(34px, 9vw, 44px);
		margin-top: clamp(14px, 4vw, 18px);
	}
	/* Filtering hides items; it never rebuilds the grid, so a card that comes
	   back comes back in its own place. */
	.ctc-card[hidden] { display: none; }

	.ctc-empty { padding: clamp(46px, 13vw, 64px) var(--cc-gutter) clamp(60px, 16vw, 80px); text-align: center; }
	.ctc-empty[hidden] { display: none; }
	.ctc-empty__title { font-size: 16px; font-weight: 700; color: var(--cc-ink); }
	.ctc-empty__desc { margin-top: 7px; font-size: 13px; color: var(--cc-muted); }
	.ctc-empty__reset {
		margin-top: 18px;
		min-height: 40px;
		padding: 0 20px;
		border-radius: 999px;
		background: #17171b;
		color: #fff;
		font-size: 13px;
		font-weight: 600;
	}

	/* ======================================================================
	   7. THE REVEAL

	   `.ctc-veil` is put on by the script and ONLY on the cards that are
	   already below the fold when it runs. Nothing on screen is ever hidden
	   and then shown, so there is no flash; a page whose script never
	   arrives shows every card from the first paint; and a card that is
	   revealed keeps its class for good, so scrolling back up cannot hide it
	   again and a fast flick past one leaves it visible rather than
	   half-way through a fade.

	   The transform is 8px on the card itself. Its box is already reserved by
	   the grid and by the picture's ratio, so the lift moves paint and
	   nothing else - the card's place in the grid is the same before and
	   after.
	   ====================================================================== */

	.ctc-veil {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}
	.ctc-veil.ctc-in {
		opacity: 1;
		transform: none;
		transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	@media (prefers-reduced-motion: reduce) {
		.ctc-veil,
		.ctc-veil.ctc-in {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}
}

/* ==========================================================================
   THE WIDE WINDOW

   The only thing this file says above 1000px, and it is not a redesign: it is
   the four declarations of `.gnb_invert` that camtalk/creator.php used to get
   by adding the class from a `setInterval` running for the life of the page.
   This page's first section is white, so a transparent bar with white type is
   invisible on it - which is why that timer existed.

   `body:not(.ctn-open)` is the whole of the care needed here: while the mega
   menu is open, camtalk-header.css paints the bar dark over the panel, and
   that rule and this one would otherwise be at the same specificity with this
   file loading later. Guarded, the open panel is exactly as it was.
   ========================================================================== */

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

	/* Background and colour only. NOT the border: `.gnb_invert` in common.css
	   asks for `1px solid #e5e5e5`, but camtalk-header.css sets
	   `.gnb { border-bottom-color: rgba(255,255,255,.16) }` at the same
	   specificity and later in the cascade, so the wide window's bar has an
	   invisible rule on every inner page of this site. Declaring the grey one
	   here drew a line that was not there before - the only pixel difference
	   a before/after render of the desktop page turned up. */
	body.ctc-page:not(.ctn-open) .gnb {
		background-color: #fff;
		color: #333;
	}
	body.ctc-page:not(.ctn-open) .gnb .logo a b { color: #cc0c0c; }
	body.ctc-page:not(.ctn-open) .gnb .right img { filter: invert(100%); opacity: 0.2; }
	body.ctc-page:not(.ctn-open) .gnb .menu .on,
	body.ctc-page:not(.ctn-open) .gnb .menu a:hover { text-decoration-color: #cc0c0c; }

	/* camtalk-header.css gives the bar a text shadow while it is transparent,
	   for the main page's video hero. On a white bar it is just dirt. */
	body.ctc-page:not(.ctn-open) .gnb:not(.gnb_invert) .logo,
	body.ctc-page:not(.ctn-open) .gnb:not(.gnb_invert) .menu,
	body.ctc-page:not(.ctn-open) .gnb:not(.gnb_invert) .right { text-shadow: none; }

	/* The phone's markup never reaches this width. */
	body.ctc-page .ctc[hidden] { display: none; }
}