/*
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;

	/* Font roles, per the official NDS Visual Identity Guidelines (2022),
	   section 3 (Typefaces) and 6 (UI Typography):
	   - Neue Machina:  Headline & Display, Side Header, Button, Thumbnail Title (EN)
	   - Space Grotesk: Bodytext & Description, Thumbnail Description (EN)
	   - Gowun Batang:  Headline & Bodytext / "Main Text" (KR editorial copy)
	   - SUIT:          Title/Bodytext/Description inside UI components —
	                     card & thumbnail titles/descriptions (KR)
	   NDS Display is the licensed Neue Machina Regular (see assets/fonts/README.md). */
	--nds-font-en-display: 'NDS Display', 'Space Grotesk', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	--nds-font-en-body: 'Space Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--nds-font-kr-display: 'Gowun Batang', 'SUIT Variable', 'Apple SD Gothic Neo', serif;
	--nds-font-kr-ui: 'SUIT Variable', 'Gowun Batang', 'Apple SD Gothic Neo', sans-serif;

	/* Picture the page as 5 equal columns: column 1 is the empty rail-label
	   margin, columns 2-4 are the content, column 5 is an empty mirror of
	   column 1. At 1920px and up that's a flat 1:3:1 ratio HELD (not just
	   reached once) — each column keeps growing as exactly viewport/5,
	   however wide the window gets. At 440px (iPhone 17 Pro Max — the
	   reference for "the smallest phone"; anything narrower just holds
	   this same floor) it's 0.3:3:0 — column 1 shrinks to a sliver just
	   wide enough for the rotated rail label, column 5 vanishes to
	   nothing (content runs out to the ordinary container padding, with
	   no rail label to make room for on that side). Between 440 and
	   1920 both sides interpolate linearly with viewport width, so the
	   shrink is continuous with no jump at either breakpoint — the outer
	   clamp() bound itself grows past 1920 (rather than sitting at a
	   flat px cap) so the ratio keeps holding instead of the gutter's
	   share shrinking again on very wide monitors. Left is split into
	   rail-width (the label's own box, own small floor/ceiling so the
	   rotated text always has room) and rail-gap (pure empty space, gets
	   whatever's left of the column-1 target); right has no label to
	   protect, so --nds-content-inset is one direct formula. */
	--nds-rail-width: clamp(1.5rem, 6vw, 4.5rem);
	--nds-gap: clamp(1rem, 2vw, 2rem);
	--nds-rail-gap: clamp(0px, calc(23.24vw - 77.27px - var(--nds-rail-width)), calc(297px + max(0px, 20vw - 384px)));
	--nds-container-pad: 15px;
	--nds-content-inset: clamp(0px, calc(25.95vw - 129.16px), calc(369px + max(0px, 20vw - 384px)));
	/* Shared cap for the content column: logo, About text, carousel, and
	   People/Partners grids all use this as their max-width, so the whole
	   block is inset from the right by --nds-content-inset — matching the
	   left side's column-1 width at 1920px+, and shrinking faster than it
	   (down to 0, vs. rail-width's floor on the left) toward phone width. */
	--nds-content-max: calc(100% - var(--nds-content-inset));
	--nds-line: 1px solid currentColor;
	--nds-transition: 500ms ease;
}

@font-face {
	font-family: 'NDS Display';
	src: url('assets/fonts/NeueMachina-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/* SUIT is kept as a self-hosted fallback for the (rare) case the Google
   Fonts request for Gowun Batang is blocked; Gowun Batang itself is loaded
   via Google Fonts, see functions.php. */
@font-face {
	font-family: 'SUIT Variable';
	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-body);
	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; }

/* Font family follows the actual script (via lang="ko"/"en", always set
   alongside .lang-kr/.lang-en — including on the English text shown as a
   fallback in Korean mode when no translation exists), not the toggle
   class, which only controls show/hide. This is the "Main Text" /
   "Bodytext & Description" default; specific components below upgrade to
   the Display/Title/UI faces per the brand guideline. */
[lang="ko"] { font-family: var(--nds-font-kr-display); }
[lang="en"] { font-family: var(--nds-font-en-body); }

/* ==========================================================================
   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: 1.35rem;
	font-size: 1.425rem;
	letter-spacing: 0.05em;
}
.nds-lang-toggle__divider { opacity: 0.4; }
.nds-lang-toggle button {
	padding: 0.225rem 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;
	/* The logo lines up with the content column below it, i.e. past the
	   rail label's own width plus the rail-to-content gap — not just the
	   ordinary section padding. --nds-header-top-gap scales with viewport
	   width (like --nds-content-max itself does) rather than sitting at a
	   fixed rem value, so the gap above the logo stays roughly
	   proportional to the logo's own (also viewport-scaled) size instead
	   of shrinking to near nothing on wide screens. That gap is split
	   evenly here and on .nds-site-header__bar's margin-bottom, so the
	   EN|KR row sits about midway between the browser top and the logo
	   instead of pinned right up against the logo. */
	--nds-header-top-gap: clamp(1.5rem, 7vw, 6rem);
	padding: calc((var(--nds-header-top-gap) + 1.5rem) / 2) var(--nds-container-pad) 0
		calc(var(--nds-container-pad) + var(--nds-rail-width) + var(--nds-rail-gap));
}
.nds-site-header--yellow { background: var(--nds-yellow); }
.nds-site-header--white { background: var(--nds-white); }
.nds-site-header__bar {
	/* Same --nds-content-max cap as the logo below it, so flex-end lands
	   EN|KR at the same inset right edge as the rest of the content column
	   instead of the header's own (wider, uninset) right edge. */
	display: flex;
	justify-content: flex-end;
	max-width: var(--nds-content-max);
	margin-bottom: calc((var(--nds-header-top-gap) + 1.5rem) / 2);
}
.nds-logo {
	/* Full-width block (not shrink-wrapped) so the logo image can stretch
	   to fill the content column; the border-bottom still ends exactly
	   where the logo ends because both now span the same 100%. */
	display: block;
	max-width: var(--nds-content-max);
	padding-bottom: 0.8rem;
	border-bottom: 3px solid var(--nds-black);
}
.nds-logo__img {
	width: 100%;
	height: auto;
	display: block;
}

/* Vertical section rail label, e.g. ABOUT / WORK / THOUGHTS / CONTACT.
   It's a "Side Header" per the brand guideline, always set in Neue Machina
   regardless of the active language (it's never translated). */
.nds-rail {
	display: flex;
	gap: var(--nds-rail-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: 1.02rem;
	font-weight: 700;
	font-family: var(--nds-font-en-display);
	white-space: nowrap;
	padding-top: 0.2rem;
}
/* Work/Thoughts: the label reads bottom-up because of the 180deg rotation
   above, which also flips which physical padding side controls the
   rendered top — padding-bottom (not padding-top) is what pushes the
   visible text down to meet the carousel's own margin-top, so the label's
   top lines up with the card images' top instead of sitting above them. */
.nds-rail:has(.nds-carousel) .nds-rail__label { padding-bottom: 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 {
	/* Same --nds-content-max cap as the logo/toggle above it, so its right
	   edge lines up with the same inset column those use. */
	max-width: var(--nds-content-max);
	font-size: clamp(1.365rem, 2.08vw, 1.82rem);
	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 ↗" — "Button" in the
   brand guideline, always set in Neue Machina. */
.nds-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.85rem 1.9rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-family: var(--nds-font-en-display);
	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)
   ========================================================================== */

/* Same --nds-content-max cap as the logo/toggle/About paragraph above it,
   so the 2nd card's right edge lines up with the same inset column. */
/* overflow: hidden here (in addition to .nds-carousel__viewport's own
   overflow-x: auto, which does the actual scroll clipping) is a hard
   backstop: the viewport's width is a computed 100% of this box, and in
   Safari that can round to a hair wider than the carousel's own box,
   letting a sliver of the next card's text peek past the mask at the
   trailing edge. Clipping here too guarantees nothing can ever render
   past this element's own (unambiguous, not derived) box. */
.nds-carousel { position: relative; max-width: var(--nds-content-max); overflow: hidden; }
.nds-carousel__viewport {
	display: flex;
	gap: var(--nds-gap);
	overflow-x: auto;
	/* No scroll-snap: even "proximity" snapping was found to correct the
	   scroll position back toward the nearest card on every change, which
	   fought a slow trackpad drag and made it feel like it was stepping
	   card-by-card instead of following the gesture continuously. Free
	   scrolling here; the arrow buttons/dots still move by exactly one
	   card via scrollBy/scrollIntoView. */
	scrollbar-width: none;
	padding-bottom: 0.5rem;
	margin-top: 2rem;
}
.nds-carousel__viewport::-webkit-scrollbar { display: none; }

.nds-card {
	/* Exactly 2 cards (plus the one gap between them) fill the carousel's
	   full width, so the 2nd card's right edge lands flush with the same
	   content-column right edge everything above it uses — instead of a
	   fixed percentage that leaves a 3rd card partway peeking in. */
	flex: 0 0 calc((100% - var(--nds-gap)) / 2);
	min-width: 0;
}

/* A frosted "more to see" mask fixed to the trailing edge of the viewport
   itself, not to whichever card happens to be sitting under it. Cards
   scroll smoothly underneath (native trackpad/drag scrolling, untouched
   by JS) instead of the blur+arrow jumping from card to card as an
   earlier version did by toggling a class per-card on scroll. */
.nds-carousel__mask {
	/* height is set inline by site.js to match the first card's own full
	   height (image + caption) — bottom:0.5rem here is only a fallback
	   for before that JS runs. */
	/* right: -2px (not 0) as a small safety overlap past the true edge —
	   on real devices a hairline sliver of unmasked content could show at
	   the very edge from subpixel/scrollbar rounding; nudging the mask
	   past the edge instead of flush to it closes that gap regardless of
	   which way the rounding goes. */
	position: absolute;
	top: 0;
	bottom: 0.5rem;
	right: -2px;
	width: clamp(5rem, 22%, 14rem);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.nds-carousel__mask.is-visible { opacity: 1; cursor: pointer; pointer-events: auto; }
/* The blur/scrim lives on its own layer (not the arrow's) so it can carry
   a gradient mask: backdrop-filter's blur radius is a fixed amount, but
   fading this whole layer's own opacity in via mask-image — transparent
   at the leading edge, fully opaque toward the true edge — makes the
   transition into it read as a gradual softening instead of a hard-edged
   cutoff from sharp to blurred. */
.nds-carousel__mask::before {
	content: '';
	position: absolute;
	inset: 0;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: var(--nds-white);
	-webkit-mask-image: linear-gradient(to right, transparent, black);
	mask-image: linear-gradient(to right, transparent, black);
}
.nds-section--black .nds-carousel__mask::before,
.nds-section--yellow .nds-carousel__mask::before { background: var(--nds-black); }
.nds-carousel__mask::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 3.25rem;
	height: 3.25rem;
	pointer-events: none;
	background-color: var(--nds-black);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 60%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 60%;
}
.nds-section--black .nds-carousel__mask::after { background-color: var(--nds-white); }
.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; }
/* Thumbnail Description (card eyebrow/byline): Space Grotesk for English,
   SUIT for Korean — a UI/thumbnail context, not the Gowun Batang used for
   longer editorial copy elsewhere. */
.nds-card__eyebrow {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.0065em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-bottom: 0.6rem;
}
.nds-card__eyebrow [lang="ko"], .nds-card p[lang="ko"] { font-family: var(--nds-font-kr-ui); }
/* Thumbnail Title: Neue Machina for English, SUIT for Korean. */
.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 h3[lang="en"] { font-family: var(--nds-font-en-display); }
.nds-card h3[lang="ko"] { font-family: var(--nds-font-kr-ui); }
/* Byline/description: same size as the eyebrow above it, but keeping the
   default (not tightened) letter-spacing — only the eyebrow got the
   tighter tracking. */
.nds-card p { font-size: 1.125rem; 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;
	/* Same --nds-content-max cap as the logo/toggle/About text/carousel, so
	   the last column's right edge lines up with the same inset column. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: var(--nds-content-max);
	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 {
	padding-top: 0.9rem;
}
.nds-partner { text-align: center; }
.nds-person__portrait, .nds-partner__logo {
	margin-bottom: 0.9rem;
	overflow: hidden;
}
.nds-partner__logo { aspect-ratio: 1 / 1; }
/* Portrait (taller than wide), matching the live site's actual headshot
   crop (~235x294) — a square crop made every photo look cropped/awkward,
   especially in the 2-column mobile grid. */
.nds-person__portrait { aspect-ratio: 4 / 5; }
/* People photos are opaque, so they get a placeholder background while
   loading; partner logos are transparent PNGs meant to sit directly on
   the section's own background (no grey box behind them), matching the
   source site. */
.nds-person__portrait { background: var(--nds-grey); }
.nds-person__portrait img, .nds-partner__logo img { width: 100%; height: 100%; object-fit: cover; }
/* People/Partner names are "Thumbnail Title": Neue Machina (EN) / SUIT (KR). */
.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__name [lang="en"], .nds-partner__name [lang="en"] { font-family: var(--nds-font-en-display); }
.nds-person__name [lang="ko"], .nds-partner__name [lang="ko"] { font-family: var(--nds-font-kr-ui); }
/* Role/period are "Thumbnail Description": Space Grotesk (EN) / SUIT (KR). */
.nds-person__role, .nds-person__period, .nds-partner__period { font-size: 0.9rem; opacity: 0.75; }
.nds-person__role [lang="ko"], .nds-person__period [lang="ko"], .nds-partner__period [lang="ko"] { font-family: var(--nds-font-kr-ui); }

/* Group headings (CURRENT MEMBERS / ALUMNI / PARTNERS) are a section
   "Title", set bold — not the Neue Machina/SUIT used for card titles. */
.nds-group-heading {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 3rem 0 0.5rem;
}
/* Keep the Korean label in the same typeface as the English one — this is
   a section label like WORK/THOUGHTS, not body prose, so it shouldn't
   switch to the Korean serif body font. */
.nds-group-heading [lang="ko"] { font-family: var(--nds-font-en-body); }
.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; }
/* Section headings are a "Title": Space Grotesk Bold (EN) / Gowun Batang
   Bold (KR) — bold weight of the same body-tier face, not Neue Machina. */
.nds-contact__block h2 {
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	font-weight: 700;
	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: 700; 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);
	/* Left edge matches the content column (same offset the header/logo
	   uses), not just the ordinary section padding — it was sitting flush
	   against the page edge before. */
	padding: 2.25rem var(--nds-container-pad) 2.25rem
		calc(var(--nds-container-pad) + var(--nds-rail-width) + var(--nds-rail-gap));
	font-size: 1.275rem;
}
/* The source text is already typed in caps, and the live site sets no
   letter-spacing here — Neue Machina, like the Side Header/Button
   treatment elsewhere, not the Space Grotesk body face. Targets the
   bilingual span directly: it carries its own [lang] font-family rule
   (see section 3) that would otherwise win over anything set here on
   the parent .nds-copyright. */
.nds-copyright [lang="en"] { font-family: var(--nds-font-en-display); }

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

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

@media (max-width: 767px) {
	/* --nds-rail-width/--nds-rail-gap are no longer overridden here — both
	   are continuous clamp()s now (see :root) that already reach their
	   small mobile values on their own, so nothing needs to step down at
	   this breakpoint. */
	.nds-rail__label { font-size: 0.84rem; letter-spacing: 0.2em; }
	.nds-card { flex-basis: 78vw; }
}

@media (max-width: 479px) {
	.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;
}