@charset "utf-8";

/* ==========================================================================
   CamTalk - desktop header and mega menu.

   EVERYTHING in this file is inside `min-width: 1001px`, which is the project
   breakpoint (see common_mobile.css, whose whole body is `max-width: 1000px`).
   Below that not one declaration applies, so the phone keeps the header, the
   menu and the behaviour it already had.

   Two things this file deliberately does NOT touch, because they belong to
   scripts that were here first:

     .gnb's transform and opacity   written every frame by the follower in
                                    js/camtalk-scroll3d.js while the main
                                    page's 3D scenes are on screen
     .gnb_invert                    added and removed by js/common.js past
                                    150px of scroll

   The panel is a separate element from the bar - it always was - so opening
   it cannot fight either of them.
   ========================================================================== */

/* The line under the wordmark belongs to the desktop bar only: the phone's
   header is 65px tall and has never had one. Declared here, outside the
   media query, because a phone loads this file too and an unstyled <p> is
   visible by default. */
.ctn-tagline {
	display: none;
}

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

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

	/* ----------------------------------------------------------------------
	   THE BAR
	   ---------------------------------------------------------------------- */

	.gnb {
		height: 96px;
		border-bottom-color: rgba(255, 255, 255, 0.16);
	}

	/* While the bar is transparent it is white type over whatever the page
	   happens to start with, and the main page's hero is a video whose
	   brightness is not ours to choose - one frame of it is nearly white. A
	   soft shadow costs nothing on a dark hero and is the difference between
	   readable and not on a light one. It is dropped the moment the bar gets
	   its own background. */
	.gnb:not(.gnb_invert) .logo,
	.gnb:not(.gnb_invert) .menu,
	.gnb:not(.gnb_invert) .right {
		text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
	}

	body.ctn-open .gnb .logo,
	body.ctn-open .gnb .menu,
	body.ctn-open .gnb .right {
		text-shadow: none;
	}

	.gnb .logo {
		top: 24px;
		left: 56px;
	}

	.gnb .logo a {
		font-size: 25px;
		font-weight: 300;
		letter-spacing: -0.01em;
		line-height: 1.1;
	}

	.gnb .logo a b {
		font-weight: 800;
	}

	/* The line under the wordmark belongs to the OPEN panel, not to the bar.

	   `position: absolute` is the whole of the "it must not shift anything"
	   requirement: the line is out of the flow, so the wordmark above it, the
	   navigation beside it and the page below it cannot move whether it is
	   there or not. It fades with the panel and it is aria-hidden, so it never
	   enters or leaves the reading order either. */
	.ctn-tagline {
		display: block;
		position: absolute;
		left: 2px;
		top: 100%;
		margin: 5px 0 0;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: -0.01em;
		line-height: 1.2;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.21s ease;
	}

	body.ctn-open .ctn-tagline {
		opacity: 0.62;
		visibility: visible;
	}

	.gnb .logo {
		position: absolute;
	}

	/* --- the six links --------------------------------------------------- */

	.gnb .menu {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 96px;
		width: 100%;
		text-align: center;
	}

	/* The capsule is the link itself rather than a pseudo-element behind it:
	   one box to size, one to round, one to outline, and the hit area is the
	   capsule the reader can see. */
	.gnb .menu a {
		position: relative;
		display: inline-flex;
		align-items: center;
		margin: 0;
		padding: 11px 22px;
		border: 1px solid transparent;
		border-radius: 999px;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: -0.015em;
		white-space: nowrap;
		transition: background-color 0.2s ease, border-color 0.2s ease,
			color 0.2s ease;
	}

	/* the small glow under an active capsule */
	.gnb .menu a::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -1px;
		width: 34px;
		height: 3px;
		border-radius: 999px;
		background: #ff3d76;
		box-shadow: 0 0 10px 2px rgba(255, 61, 118, 0.7);
		transform: translateX(-50%) scaleX(0);
		transform-origin: center;
		opacity: 0;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	/* the underline treatment from common.css has no place on a capsule */
	.gnb .menu .on,
	.gnb .menu a:hover,
	.gnb_invert .menu .on,
	.gnb_invert .menu a:hover {
		text-decoration: none;
		font-weight: 600;
	}

	.gnb .menu a:hover,
	.gnb .menu a:focus-visible,
	.gnb .menu a.is-open,
	.gnb .menu a.on {
		background: rgba(255, 61, 118, 0.16);
		border-color: rgba(255, 61, 118, 0.55);
	}

	.gnb .menu a:hover::after,
	.gnb .menu a:focus-visible::after,
	.gnb .menu a.is-open::after,
	.gnb .menu a.on::after {
		transform: translateX(-50%) scaleX(1);
		opacity: 1;
	}

	.gnb .menu a:focus-visible {
		outline: 2px solid rgba(255, 61, 118, 0.9);
		outline-offset: 3px;
	}

	/* --- language, and the round button ----------------------------------- */

	.gnb .right {
		top: 34px;
		right: 48px;
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.gnb .right a[data-lang-switch] {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.02em;
		opacity: 0.85;
		transition: opacity 0.2s ease, color 0.2s ease;
	}

	.gnb .right a[data-lang-switch]:hover {
		opacity: 1;
		color: #ff3d76;
	}

	.gnb .right img {
		width: 1px;
		height: 12px;
	}

	/* The original button, restored.

	   The round pink ring that replaced it was not asked for and is not in the
	   reference's own bar; what was here before the header was rebuilt is a
	   plain Material icon with 20px of space before it, and that is what this
	   puts back. Nothing else in this file touches .ham, and the phone never
	   saw these rules anyway - the whole file is inside min-width: 1001px. */
	.gnb .right .ham {
		display: inline-flex;
		align-items: center;
		margin-left: 8px;
		border: none;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.gnb .right .ham span {
		margin: 0 0 3px 12px;
		font-size: 24px;
		line-height: 1;
		vertical-align: middle;
	}

	.gnb .right .ham:focus-visible {
		outline: 2px solid rgba(255, 61, 118, 0.9);
		outline-offset: 4px;
		border-radius: 6px;
	}

	/* ----------------------------------------------------------------------
	   THE BAR'S DARK SKIN WHILE THE PANEL IS OPEN

	   The panel is dark whatever is behind it, so the bar over it has to be
	   too - including on an inner page, where js/common.js has made the bar
	   white. Scoped to the open state and to nothing else, so the scroll
	   behaviour underneath is exactly as it was the moment the panel closes.
	   ---------------------------------------------------------------------- */

	body.ctn-open .gnb,
	body.ctn-open .gnb.gnb_invert {
		background-color: rgba(10, 7, 12, 0.72);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-bottom-color: rgba(255, 255, 255, 0.10);
		color: #fff;
	}

	body.ctn-open .gnb.gnb_invert .logo a b {
		color: #fff;
	}

	body.ctn-open .gnb.gnb_invert .right img {
		filter: none;
		opacity: 0.3;
	}

	/* ----------------------------------------------------------------------
	   THE PANEL

	   `.submenu` keeps its name and its place in the document. What changes is
	   that it is no longer shown and hidden with display, which cannot be
	   animated and cannot be kept out of the tab order while it fades:
	   `visibility` does both, and the two properties it animates - opacity and
	   a small lift - are the only ones.
	   ---------------------------------------------------------------------- */

	/* The box starts BELOW the bar rather than behind it. It used to start at
	   the top of the window with 96px of padding, and an open panel then
	   covered the six links it belongs to: the pointer could not reach them
	   and neither could a click. The dark surface still reaches up behind the
	   bar - that is the bar's own skin while the panel is open. */
	.submenu,
	.submenu.submenu_fixed {
		display: block;
		position: fixed;
		top: 96px;
		left: 0;
		width: 100%;
		padding: 0;
		border-bottom: none;
		background: none;
		z-index: 10;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(0, -10px, 0);
		transition: opacity 0.21s ease, transform 0.21s ease,
			visibility 0s linear 0.21s;
	}

	.submenu.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
		transition: opacity 0.21s ease, transform 0.21s ease,
			visibility 0s linear 0s;
	}

	/* the surface the whole thing sits on: one dark band with a soft pink
	   field in it, wide enough to reach behind the bar above */
	.submenu::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background:
			radial-gradient(64% 120% at 16% 40%, rgba(255, 61, 118, 0.20) 0%, rgba(255, 61, 118, 0) 62%),
			radial-gradient(52% 110% at 86% 30%, rgba(214, 20, 96, 0.16) 0%, rgba(214, 20, 96, 0) 60%),
			linear-gradient(180deg, rgba(11, 8, 13, 0.92) 0%, rgba(11, 8, 13, 0.88) 78%, rgba(11, 8, 13, 0.82) 100%);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		pointer-events: none;
	}

	.ctn-panel {
		position: relative;
		display: grid;
		grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
		align-items: start;
		gap: 26px;
		width: min(1760px, calc(100% - 96px));
		margin: 0 auto;
		padding: 10px 0 34px;
		color: #fff;
	}

	/* --- the words on the left -------------------------------------------- */

	.ctn-panel__aside {
		padding: 30px 0 0 8px;
	}

	.ctn-script {
		margin: 0;
		font-size: 25px;
		font-weight: 300;
		line-height: 1.66;
		letter-spacing: -0.02em;
		word-break: keep-all;
		color: #fff;
		/* the reference sets this in a Korean handwriting face, which the
		   project does not ship; the slant and the airy leading carry the same
		   idea in the site's own family */
		font-style: italic;
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
	}

	.ctn-claim {
		margin: 30px 0 0;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.7;
		letter-spacing: 0.16em;
		color: rgba(255, 255, 255, 0.52);
		font-style: normal;
	}

	/* --- the board -------------------------------------------------------- */

	.ctn-panel__board {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 268px;
		gap: 0;
		border: 1px solid rgba(255, 255, 255, 0.13);
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.045);
		overflow: hidden;
	}

	/* The five groups.

	   Every selector here is anchored on .ctn-panel__board, which no rule in
	   common.css knows about. That is not decoration: common.css sizes this
	   same .menu at 550px and its columns at 78px and 103px for the panel this
	   one replaces, at the same specificity, and matching it selector for
	   selector left the outcome depending on which rule happened to be read
	   last. Anchoring lifts the whole block clear of that argument. */
	.ctn-panel__board .menu {
		position: relative;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 26px 8px 28px;
	}

	.ctn-panel__board .menu ul {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ctn-panel__board .menu li,
	.ctn-panel__board .menu li:nth-child(1) {
		float: none;
		width: auto;
		min-width: 0;
		padding: 0 20px;
		border-left: 1px solid rgba(255, 255, 255, 0.09);
	}

	.ctn-panel__board .menu li:first-child {
		border-left: none;
	}

	.ctn-col__head {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: 10px;
		/* A reserved height rather than whatever the note happens to need: the
		   five notes are different lengths and one of them wraps at 1440, and
		   without this the five link lists start on five different rows. */
		min-height: 52px;
		align-content: start;
		margin: 0 0 18px;
	}

	.ctn-col__icon {
		grid-row: 1 / span 2;
		font-size: 24px;
		color: #ff3d76;
	}

	.ctn-col__name {
		font-size: 17px;
		font-weight: 800;
		letter-spacing: -0.015em;
		color: #ff5b87;
	}

	.ctn-col__note {
		grid-column: 2;
		margin-top: 3px;
		font-size: 11.5px;
		font-weight: 400;
		line-height: 1.35;
		letter-spacing: -0.01em;
		word-break: keep-all;
		color: rgba(255, 255, 255, 0.45);
	}

	.ctn-col__links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.ctn-panel__board .menu li a {
		display: inline-block;
		padding: 7px 0;
		font-size: 14.5px;
		font-weight: 500;
		letter-spacing: -0.01em;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.80);
		text-decoration: none;
		transition: color 0.18s ease;
	}

	.ctn-panel__board .menu li .on,
	.ctn-panel__board .menu li a:hover,
	.ctn-panel__board .menu li a:focus-visible {
		font-weight: 700;
		color: #fff;
		text-decoration: none;
	}

	.ctn-panel__board .menu li a:focus-visible {
		outline: 2px solid #ff3d76;
		outline-offset: 2px;
		border-radius: 4px;
	}

	/* --- the card on the right -------------------------------------------- */

	.ctn-promo {
		position: relative;
		display: block;
		margin: 14px 14px 14px 0;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 16px;
		overflow: hidden;
		isolation: isolate;
		background: #17121a;
		text-decoration: none;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.ctn-promo:hover {
		border-color: rgba(255, 61, 118, 0.55);
		box-shadow: 0 0 24px rgba(255, 61, 118, 0.22);
	}

	.ctn-promo:focus-visible {
		outline: 2px solid #ff3d76;
		outline-offset: 3px;
	}

	.ctn-promo__photo {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 70% 24%;
		display: block;
	}

	.ctn-promo__veil {
		position: absolute;
		inset: 0;
		background:
			linear-gradient(200deg, rgba(255, 61, 118, 0.26) 0%, rgba(255, 61, 118, 0) 46%),
			linear-gradient(180deg, rgba(10, 6, 12, 0.30) 0%, rgba(10, 6, 12, 0.10) 40%, rgba(10, 6, 12, 0.78) 100%);
	}

	.ctn-promo__lead {
		position: absolute;
		top: 16px;
		right: 16px;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: -0.01em;
		text-align: right;
		font-style: italic;
		color: #fff;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	}

	.ctn-promo__foot {
		position: absolute;
		left: 16px;
		bottom: 14px;
		display: block;
	}

	.ctn-promo__brand {
		display: block;
		font-size: 16px;
		font-weight: 300;
		color: #fff;
	}

	.ctn-promo__brand b {
		font-weight: 800;
		color: #ff5b87;
	}

	.ctn-promo__note {
		display: block;
		margin-top: 2px;
		font-size: 11.5px;
		color: rgba(255, 255, 255, 0.62);
	}

	/* --- 1440 and below: the same composition, a little tighter ------------ */

	@media screen and (max-width: 1560px) {
		.gnb .logo { left: 40px; }
		.gnb .right { right: 34px; }

		.gnb .menu {
			gap: 2px;
		}

		.gnb .menu a {
			padding: 10px 16px;
			font-size: 15px;
		}

		.ctn-panel {
			width: calc(100% - 64px);
			grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
			gap: 18px;
		}

		.ctn-script { font-size: 21px; line-height: 1.6; }
		.ctn-claim { font-size: 11px; margin-top: 22px; }

		.ctn-panel__board {
			grid-template-columns: minmax(0, 1fr) 228px;
		}

		.ctn-panel__board .menu { padding: 22px 4px 24px; }
		.ctn-panel__board .menu li,
		.ctn-panel__board .menu li:nth-child(1) { padding: 0 14px; }
		.ctn-col__head { min-height: 58px; }
		.ctn-col__note { font-size: 11px; }
		.ctn-panel__board .menu li a { font-size: 13.5px; padding: 6px 0; }
	}

	/* --- English sets wider ----------------------------------------------- */

	body.lang-en .ctn-col__note,
	html[lang="en"] .ctn-col__note {
		font-size: 11px;
		line-height: 1.3;
	}

	/* English words are longer than the column, so they wrap rather than push
	   it wider - `keep-all` keeps a word whole while it does. */
	html[lang="en"] .ctn-panel__board .menu li a {
		white-space: normal;
		word-break: keep-all;
	}

	html[lang="en"] .gnb .menu a {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14.5px;
	}

	/* --- reduced motion ---------------------------------------------------- */

	@media (prefers-reduced-motion: reduce) {
		.submenu,
		.submenu.is-open,
		.gnb .menu a,
		.gnb .menu a::after,
		.gnb .right .ham,
		.ctn-promo {
			transition: none;
		}

		.submenu { transform: none; }
	}
}