/*
Theme Name: New Design Studio
Theme URI: https://www.newdesign.studio/
Author: New Design Studio
Description: Bilingual (EN/KR toggle) theme reproducing the New Design Studio site — yellow/black/white/purple system, vertical section rail, Work/Thoughts carousels, People/Partners grids.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: new-design-studio
License: GPLv2 or later
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--nds-yellow: #fcff6d;
	--nds-black: #000000;
	--nds-white: #ffffff;
	--nds-purple: #3700ff;
	--nds-grey: #e9e9e6;

	/* NDS Display is Neue Machina in production. Neue Machina is a paid
	   commercial font and is NOT bundled here until its license is
	   confirmed — see assets/fonts/README.md. Space Grotesk is a close,
	   freely licensed stand-in so the layout still reads correctly. */
	--nds-font-en: 'NDS Display', 'Space Grotesk', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	--nds-font-kr: 'NDS Korean', 'SUIT Variable', -apple-system, 'Apple SD Gothic Neo', sans-serif;

	--nds-rail-width: 4.5rem;
	--nds-gap: clamp(1rem, 2vw, 2rem);
	--nds-container-pad: clamp(1.25rem, 4vw, 3rem);
	--nds-line: 1px solid currentColor;
	--nds-transition: 500ms ease;
}

@font-face {
	font-family: 'NDS Display';
	src: url('assets/fonts/NeueMachina-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'NDS Korean';
	src: url('assets/fonts/SUIT-Variable.woff2') format('woff2-variations'),
	     url('assets/fonts/SUIT-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--nds-white);
	color: var(--nds-black);
	font-family: var(--nds-font-en);
	font-size: 16px;
	line-height: 1.4;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* Language font swap: Korean spans always render in the Korean face,
   regardless of which language is currently visible. */
.lang-kr { font-family: var(--nds-font-kr); }
.lang-en { font-family: var(--nds-font-en); }

/* ==========================================================================
   3. Language toggle
   The default (no attribute yet, before JS runs) shows English so the
   page is never blank. JS sets data-lang as early as possible (see
   header.php inline script) to avoid a visible flash.
   ========================================================================== */

html:not([data-lang="kr"]) .lang-kr { display: none !important; }
html[data-lang="kr"] .lang-en { display: none !important; }

.nds-lang-toggle {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
}
.nds-lang-toggle__divider { opacity: 0.4; }
.nds-lang-toggle button {
	padding: 0.15rem 0;
	opacity: 0.45;
}
.nds-lang-toggle button[aria-pressed="true"] { opacity: 1; text-decoration: underline; }

/* ==========================================================================
   4. Layout shell
   ========================================================================== */

.nds-container {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: var(--nds-container-pad);
}

.nds-site-header {
	position: relative;
	padding: 1.75rem var(--nds-container-pad) 0;
}
.nds-site-header--yellow { background: var(--nds-yellow); }
.nds-site-header--white { background: var(--nds-white); }
.nds-site-header__bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1.5rem;
}
.nds-logo {
	display: block;
	font-size: clamp(2.2rem, 7vw, 5.5rem);
	line-height: 0.95;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 0.4em;
	border-bottom: 3px solid var(--nds-black);
}

/* Vertical section rail label, e.g. ABOUT / WORK / THOUGHTS / CONTACT */
.nds-rail {
	display: flex;
	gap: var(--nds-gap);
	align-items: flex-start;
}
.nds-rail__label {
	flex: 0 0 var(--nds-rail-width);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.85rem;
	white-space: nowrap;
	padding-top: 0.2rem;
}
.nds-rail__body { flex: 1 1 auto; min-width: 0; }

.nds-section { padding: clamp(2.5rem, 6vw, 5rem) var(--nds-container-pad); }
.nds-section--yellow { background: var(--nds-yellow); }
.nds-section--white { background: var(--nds-white); }
.nds-section--black { background: var(--nds-black); color: var(--nds-white); }

/* ==========================================================================
   5. About / hero
   ========================================================================== */

.nds-about__text {
	max-width: 44rem;
	font-size: clamp(1.05rem, 1.6vw, 1.4rem);
	line-height: 1.45;
}
.nds-about__text a { color: var(--nds-purple); }
.nds-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.25rem;
}

/* Pill buttons, e.g. "Our People ↘" / "Read More ↗" */
.nds-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.85rem 1.9rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: clamp(1rem, 1.4vw, 1.4rem);
	text-decoration: none;
	transition: background var(--nds-transition), color var(--nds-transition);
}
.nds-pill:hover { background: currentColor; }
.nds-pill:hover .nds-pill__inner { color: var(--nds-white); }
.nds-section--black .nds-pill:hover .nds-pill__inner { color: var(--nds-black); }
.nds-pill__inner { color: var(--nds-black); transition: color var(--nds-transition); }
.nds-section--black .nds-pill__inner { color: var(--nds-white); }
.nds-pill--small { padding: 0.6rem 1.3rem; font-size: 1rem; }

/* ==========================================================================
   6. Carousel (Work / Thoughts)
   ========================================================================== */

.nds-carousel { position: relative; }
.nds-carousel__viewport {
	display: flex;
	gap: var(--nds-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
	margin-top: 2rem;
}
.nds-carousel__viewport::-webkit-scrollbar { display: none; }

.nds-card {
	flex: 0 0 clamp(260px, 28vw, 380px);
	scroll-snap-align: start;
	min-width: 0;
}
.nds-card__image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 1.1rem;
	background: var(--nds-grey);
}
.nds-section--black .nds-card__image { background: #1a1a1a; }
.nds-card__image img { width: 100%; height: 100%; object-fit: cover; }
.nds-card__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-bottom: 0.6rem;
}
.nds-card h3 {
	font-size: clamp(1.2rem, 1.7vw, 1.6rem);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 0.85rem;
}
.nds-card p { line-height: 1.4; margin-bottom: 0.4rem; opacity: 0.9; }
.nds-card .nds-pill { margin-top: 1.1rem; }

.nds-carousel__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.nds-carousel__arrow {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 1px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.nds-carousel__arrow[disabled] { opacity: 0.3; cursor: default; }
.nds-carousel__dots { display: flex; gap: 0.5rem; margin-left: 0.5rem; }
.nds-carousel__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; opacity: 0.3; }
.nds-carousel__dot[aria-current="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.nds-carousel__viewport { scroll-behavior: auto; }
}

/* ==========================================================================
   7. People / Partners grids
   ========================================================================== */

.nds-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--nds-gap) clamp(1.5rem, 3vw, 3rem);
	margin-top: 1rem;
}
.nds-grid--partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nds-person, .nds-partner {
	border-top: var(--nds-line);
	padding-top: 0.9rem;
}
.nds-person__portrait, .nds-partner__logo {
	aspect-ratio: 1 / 1;
	background: var(--nds-grey);
	margin-bottom: 0.9rem;
	overflow: hidden;
}
.nds-person__portrait img, .nds-partner__logo img { width: 100%; height: 100%; object-fit: cover; }
.nds-person__name, .nds-partner__name { font-size: 1.05rem; margin-bottom: 0.3rem; }
.nds-person__name a, .nds-partner__name a { text-decoration: none; }
.nds-person__role, .nds-person__period, .nds-partner__period { font-size: 0.9rem; opacity: 0.75; }

.nds-group-heading {
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 3rem 0 0.5rem;
}
.nds-group-heading:first-child { margin-top: 0; }

.nds-lead {
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	max-width: 40rem;
	margin-bottom: 2.5rem;
}

/* ==========================================================================
   8. Contact / footer
   ========================================================================== */

.nds-contact__block + .nds-contact__block { margin-top: 3.5rem; }
.nds-contact__block h2 {
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	font-weight: 400;
	margin-bottom: 1rem;
}
.nds-contact__block p { max-width: 34rem; line-height: 1.5; margin-bottom: 1.25rem; }
.nds-contact__email {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.1rem;
	text-decoration: underline;
}

.nds-site-footer__follow { margin-top: 4rem; }
.nds-site-footer__follow h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; margin-bottom: 0.9rem; }
.nds-site-footer__links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nds-site-footer__links a { color: var(--nds-purple); text-decoration: underline; }
.nds-site-footer__links span[aria-hidden="true"] { opacity: 0.5; padding: 0 0.2rem; }

.nds-copyright {
	background: var(--nds-yellow);
	padding: 2.25rem var(--nds-container-pad);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   9. Responsive breakpoints (matches the source Webflow project)
   ========================================================================== */

@media (min-width: 1920px) {
	.nds-container, .nds-site-header, .nds-section, .nds-copyright { max-width: 1920px; margin-inline: auto; }
}

@media (max-width: 991px) {
	.nds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nds-grid--partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.nds-rail__label { font-size: 0.7rem; }
	.nds-card { flex-basis: 78vw; }
}

@media (max-width: 479px) {
	.nds-site-header__bar { justify-content: space-between; }
	.nds-rail { gap: 1rem; }
	.nds-rail__label { flex-basis: 2.5rem; letter-spacing: 0.2em; }
	.nds-carousel__arrow { display: none; }
	.nds-about__actions { flex-direction: column; align-items: flex-start; }
}

.nds-visually-hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}