/**
* NexDirectory — single listing / event templates.
*
* Namespace: .nds (root) and .nds-* (parts). Templates add .nds--{key}.
* Colours come only from design-system tokens (--nd-*) so Settings › Design wins.
* Breakpoints: phone < 768 (app layout), compact < 1024 (no side card), desktop ≥ 1024.
*/
/* ==========================================================================
1. Root + base
========================================================================== */
.nds {
--nds-max: 1200px;
--nds-read: 700px;
--nds-gap: 64px;
--nds-section: 56px;
--nds-radius: var(--nd-radius-xl);
--nds-bar-h: var(--nd-sticky-bar-h, 0px);
--nds-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--nds-glass: saturate(1.6) blur(14px);
--nds-press: scale(0.97);
/* Full-bleed root (heroes go edge to edge); content sits on the shared container edge. */
--nds-gutter: var(--nd-page-x, 24px);
position: relative;
width: auto;
max-width: none !important;
margin-inline: calc(50% - (50vw - var(--ndn-sbw, 0px) / 2));
background: var(--nd-surface);
color: var(--nd-ink);
font-family: var(--nd-font);
font-size: 16px;
line-height: 1.6;
overflow-x: clip;
padding-bottom: 96px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nds *, .nds *::before, .nds *::after { box-sizing: border-box; }
.nds :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; }
.nds :where(ul[role="list"], ol[role="list"]) { list-style: none; }
.nds :where(img, video, iframe) { display: block; max-width: 100%; }
.nds :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.nds :where(a) { color: inherit; text-decoration: none; }
.nds [hidden] { display: none !important; }
.nds [x-cloak] { display: none !important; }
.nds .nds-icon { flex: none; display: inline-block; vertical-align: middle; }
.nds-wrap {
width: 100%;
max-width: calc(var(--nds-max) + var(--nds-gutter) * 2);
margin-inline: auto;
padding-inline: var(--nds-gutter);
}
.nds-wrap--wide { --nds-max: 1320px; }
.nds-wrap--read { --nds-max: var(--nds-read); }
.nds-mobile-only { display: none; }
/* ==========================================================================
2. Layout
========================================================================== */
.nds-body { position: relative; }
.nds-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 72px;
align-items: start;
}
.nds-main { min-width: 0; }
.nds-aside { min-width: 0; height: 100%; }
.nds-sticky { position: sticky; top: calc(var(--nd-sticky-top) + 24px); display: grid; gap: 16px; }
.nds-section { margin-top: var(--nds-section); scroll-margin-top: calc(var(--nd-sticky-top) + 72px); }
.nds-main > .nds-section:first-child,
.nds-titleblock + .nds-section { margin-top: 40px; }
.nds--clarity .nds-main > .nds-section,
.nds--compact .nds-main > .nds-section,
.nds--immersive .nds-main > .nds-section,
.nds--split .nds-split__inner > .nds-section {
padding-top: var(--nds-section);
border-top: 1px solid var(--nd-line);
}
.nds--clarity .nds-main > .nds-msummary + .nds-section,
.nds--immersive .nds-main > .nds-msummary + .nds-section,
.nds--immersive .nds-main > .nds-hostline + .nds-section,
.nds--compact .nds-main > .nds-msummary + .nds-section,
.nds--split .nds-split__inner > .nds-msummary + .nds-section { border-top: 0; padding-top: 0; }
/* ==========================================================================
3. Type
========================================================================== */
.nds-eyebrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 14px;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--nd-ink-2);
}
/* Accent is for action and state only: category eyebrows read as ink-2 13/600. */
.nds-eyebrow__link { color: var(--nd-ink-2); border-radius: var(--nd-radius-xs); }
.nds-eyebrow__link:hover { color: var(--nd-ink); text-decoration: underline !important; text-underline-offset: 3px; }
.nds-eyebrow--light, .nds-eyebrow--light .nds-eyebrow__link { color: rgba(255, 255, 255, 0.92); }
.nds-title {
font-family: var(--nd-font-display);
font-size: clamp(32px, 1.6vw + 22px, 48px);
font-weight: 720;
line-height: 1.08;
letter-spacing: -0.032em;
color: var(--nd-ink);
text-wrap: balance;
}
.nds-title--display {
font-size: clamp(40px, 4.6vw + 10px, 84px);
line-height: 1.0;
letter-spacing: -0.042em;
color: #fff;
max-width: 16ch;
}
.nds-standfirst {
margin-top: 16px;
max-width: 60ch;
font-size: 20px;
line-height: 1.5;
color: var(--nd-ink-2);
text-wrap: pretty;
}
.nds-hostline {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
font-size: 15px;
color: var(--nd-muted);
}
.nds-hostline a, .nds-hostline strong { color: var(--nd-ink); font-weight: 600; }
.nds-hostline a:hover { color: var(--nd-accent); }
.nds-hostline--lead { margin: 0 0 28px; }
.nds-verified { display: inline-flex; color: var(--nd-accent); }
.nds-h2 {
margin-bottom: 20px;
font-family: var(--nd-font-display);
font-size: 22px;
font-weight: 680;
line-height: 1.25;
letter-spacing: -0.022em;
color: var(--nd-ink);
}
.nds-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.nds-sectionhead .nds-h2 { margin-bottom: 0; }
.nds-sectionhead__meta { font-size: 14px; color: var(--nd-muted); }
.nds-prose { max-width: var(--nds-read); font-size: 17px; line-height: 1.72; color: var(--nd-ink-2); }
.nds-prose > * + * { margin-top: 1.1em; }
.nds-prose :where(h2, h3, h4) { margin-top: 1.6em; color: var(--nd-ink); font-weight: 680; letter-spacing: -0.02em; line-height: 1.3; }
.nds-prose a { color: var(--nd-accent); text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; }
.nds-prose :where(ul, ol) { padding-left: 1.25em; }
.nds-prose li + li { margin-top: 0.4em; }
.nds-prose img { border-radius: var(--nd-radius-lg); height: auto; }
.nds-about--lead .nds-prose { font-size: 19px; line-height: 1.7; }
.nds-about--lead .nds-prose > p:first-child { font-size: 21px; color: var(--nd-ink); }
.nds-clamp.is-clamped { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.nds-clamp__toggle { margin-top: 12px; }
.nds-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 24px; font-size: 14px; }
.nds-tags a, .nds-tags span { color: var(--nd-muted); font-weight: 500; }
.nds-tags a:hover { color: var(--nd-accent); }
.nds-truncate { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ==========================================================================
4. Components
========================================================================== */
.nds-iconbtn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
border-radius: 50%;
border: 1px solid var(--nd-line);
background: var(--nd-surface);
color: var(--nd-ink-2);
transition: background-color var(--nd-dur-2) var(--nd-ease), color var(--nd-dur-2) var(--nd-ease), border-color var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
.nds-iconbtn:hover { background: var(--nd-surface-2); border-color: var(--nd-line-strong); color: var(--nd-ink); }
.nds-iconbtn:active { transform: var(--nds-press); }
.nds-iconbtn--sm { width: 36px; height: 36px; }
.nds-iconbtn[aria-pressed="true"] { background: var(--nd-accent-soft); border-color: var(--nd-accent-line); color: var(--nd-accent-ink); }
.nds-iconbtn[aria-pressed="true"] .nds-icon path { fill: currentColor; fill-opacity: 0.18; }
.nds-textbtn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 2px;
font-size: 15px;
font-weight: 600;
color: var(--nd-accent);
border-radius: 6px;
}
.nds-textbtn:hover { color: var(--nd-accent-hover); }
.nds-textbtn .nds-icon { transition: transform var(--nd-dur-2) var(--nd-ease); }
.nds-textbtn:hover .nds-icon:last-child { transform: translateX(2px); }
.nds .nds-btn-quiet { min-height: 44px; padding: 0 16px; border: 1px solid var(--nd-line-strong); border-radius: 12px; background: var(--nd-surface); box-shadow: none; font-size: 14px; }
.nds .nds-btn-quiet:hover { background: var(--nd-surface-2); }
.nds .nds-cta.nd-btn--lg { min-height: 52px; border-radius: 14px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.nds .nds-cta:active { transform: var(--nds-press); }
.nds .nds-rsvp-form { margin: 0; }
.nds .nds-rsvp-form--secondary { text-align: center; margin-top: 8px; }
/* Extension (ticketing) CTA blends in as the primary button. */
.nds .nds-ticket-slot { display: grid; }
.nds .nexdirectory-pro-ticket-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 52px;
padding: 0 20px;
border: 0;
border-radius: 14px;
background: var(--nd-accent);
color: var(--nd-on-accent) !important;
font: 650 16px/1 var(--nd-font);
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 24px -12px rgba(var(--nd-accent-rgb), 0.7);
transition: background-color var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
.nds .nexdirectory-pro-ticket-cta:hover { background: var(--nd-accent-hover); }
.nds .nexdirectory-pro-ticket-cta:active { transform: var(--nds-press); }
.nds .nds-ticket-slot--bar .nexdirectory-pro-ticket-cta { min-height: 48px; }
.nds-chip, .nds-countdown {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
border-radius: var(--nd-radius-pill);
background: var(--nd-accent-soft);
color: var(--nd-accent-ink);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.nds-chip--live, .nds-countdown--live { background: var(--nd-danger-soft); color: var(--nd-danger); }
.nds-chip--ended, .nds-countdown--ended { background: var(--nd-surface-2); color: var(--nd-muted); }
.nds-chip--soldout, .nds-countdown--soldout { background: var(--nd-warning-soft); color: var(--nd-warning); }
.nds-chip--cancelled { background: var(--nd-danger-soft); color: var(--nd-danger); }
.nds-countdown--glass { background: rgba(255, 255, 255, 0.16); color: #fff; -webkit-backdrop-filter: var(--nds-glass); backdrop-filter: var(--nds-glass); }
.nds-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.nds-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: nds-pulse 1.8s var(--nd-ease) infinite; }
@keyframes nds-pulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
.nds-avatar {
display: inline-grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: var(--nd-accent-soft-2);
color: var(--nd-accent-ink);
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
}
.nds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nds-avatar--xs { width: 28px; height: 28px; font-size: 12px; }
.nds-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.nds-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.nds-avatar--stack { width: 30px; height: 30px; font-size: 12px; margin-left: -8px; border: 2px solid var(--nd-surface); }
.nds-avatar--stack:first-child { margin-left: 0; }
.nds-avatar--stack:nth-child(5n+2) { background: color-mix(in srgb, var(--nd-accent) 26%, #fde68a); color: var(--nd-ink); }
.nds-avatar--stack:nth-child(5n+3) { background: color-mix(in srgb, var(--nd-accent) 20%, #bae6fd); color: var(--nd-ink); }
.nds-avatar--stack:nth-child(5n+4) { background: color-mix(in srgb, var(--nd-accent) 22%, #bbf7d0); color: var(--nd-ink); }
.nds-avatar--stack:nth-child(5n+5) { background: color-mix(in srgb, var(--nd-accent) 24%, #fbcfe8); color: var(--nd-ink); }
.nds-avatar--more { background: var(--nd-surface-2) !important; color: var(--nd-ink-2) !important; }
.nds-going {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
font-size: 14px;
color: var(--nd-ink-2);
}
a.nds-going { border-radius: 12px; }
a.nds-going:hover .nds-going__text { color: var(--nd-ink); }
.nds-stack { display: inline-flex; }
.nds-going__text { font-weight: 600; }
.nds-going__chev { margin-left: auto; color: var(--nd-subtle); }
/* Calendar tile date block */
.nds-dateblock {
display: inline-flex;
flex-direction: column;
align-items: center;
overflow: hidden;
border-radius: 14px;
background: var(--nd-surface);
box-shadow: 0 0 0 1px var(--nd-line), var(--nd-shadow-2);
text-align: center;
line-height: 1;
}
.nds-dateblock__month {
display: block;
width: 100%;
padding: 6px 12px 5px;
background: var(--nd-accent);
color: var(--nd-on-accent);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
}
.nds-dateblock__day { display: block; padding: 8px 14px 10px; font-size: 28px; font-weight: 750; letter-spacing: -0.03em; color: var(--nd-ink); font-variant-numeric: tabular-nums; }
.nds-dateblock__dash { margin: 0 0.06em; opacity: 0.5; }
.nds-dateblock--xl { border-radius: var(--nd-radius-xl); }
.nds-dateblock--xl .nds-dateblock__month { padding: 10px 20px 8px; font-size: 16px; letter-spacing: 0.12em; }
.nds-dateblock--xl .nds-dateblock__day { padding: 12px 22px 16px; font-size: clamp(56px, 6vw, 88px); letter-spacing: -0.05em; }
.nds-minidate { display: grid; place-items: center; line-height: 1; }
.nds-minidate span { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--nd-muted); }
.nds-minidate strong { margin-top: 3px; font-size: 17px; font-weight: 750; color: var(--nd-ink); letter-spacing: -0.02em; }
/* Tappable info rows */
.nds-rows { display: grid; gap: 2px; }
.nds-row {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 60px;
margin: 0 -10px;
width: calc(100% + 20px);
padding: 8px 10px;
border-radius: 14px;
text-align: left;
color: inherit;
transition: background-color var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
:is(a, button).nds-row:hover { background: var(--nd-surface-2); }
:is(a, button).nds-row:active { transform: scale(0.985); }
.nds-row__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
border-radius: 12px;
background: var(--nd-surface-2);
box-shadow: inset 0 0 0 1px var(--nd-line);
color: var(--nd-ink-2);
}
.nds-row__icon--date { background: var(--nd-surface); }
.nds-row__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.nds-row__title { font-size: 15px; font-weight: 620; line-height: 1.35; color: var(--nd-ink); }
.nds-row__sub { font-size: 14px; line-height: 1.4; color: var(--nd-muted); }
.nds-row__aside { flex: none; color: var(--nd-subtle); transition: color var(--nd-dur-2) var(--nd-ease); }
:is(a, button).nds-row:hover .nds-row__aside { color: var(--nd-accent); }
.nds-localtime { display: block; margin-top: 2px; font-size: 13px; color: var(--nd-subtle); }
/* Card + registration */
.nds-card {
background: var(--nd-surface);
border: 1px solid var(--nd-line);
border-radius: var(--nds-radius);
box-shadow: var(--nd-shadow-2);
}
.nds-register { display: grid; gap: 18px; padding: 24px; }
.nds-register__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nds-price { display: flex; align-items: baseline; gap: 8px; }
.nds-price__value { font-size: 28px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; color: var(--nd-ink); font-variant-numeric: tabular-nums; }
.nds-price__unit { font-size: 14px; color: var(--nd-muted); }
.nds-register .nds-rows { margin-top: -4px; }
.nds-register__cta { display: grid; gap: 4px; }
.nds-register .nds-going { padding: 0; justify-content: center; }
.nds-register .nds-going__chev { margin-left: 0; }
.nds-register__foot { padding-top: 16px; border-top: 1px solid var(--nd-line); }
.nds-actions { display: flex; justify-content: center; gap: 10px; }
.nds-capacity { display: grid; gap: 8px; }
.nds-capacity__label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--nd-ink-2); }
.nds-capacity__total { color: var(--nd-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.nds-progress { height: 6px; border-radius: 999px; background: var(--nd-surface-2); box-shadow: inset 0 0 0 1px var(--nd-line); overflow: hidden; }
.nds-progress span { display: block; height: 100%; border-radius: inherit; background: var(--nd-accent); transition: width var(--nd-dur-3) var(--nd-ease); }
.nds-register--glass {
background: rgba(255, 255, 255, 0.78);
background: color-mix(in srgb, var(--nd-surface) 78%, transparent);
-webkit-backdrop-filter: var(--nds-glass);
backdrop-filter: var(--nds-glass);
border-color: rgba(255, 255, 255, 0.7);
box-shadow: var(--nd-shadow-4);
}
.nds-register--flat { padding: 0; border: 0; box-shadow: none; background: transparent; margin-top: 28px; }
.nds-register--flat .nds-register__foot { border-top: 0; padding-top: 0; }
.nds-register--flat .nds-actions { justify-content: flex-start; }
.nds-register--flat .nds-going { justify-content: flex-start; }
/* State banner */
.nds-banner {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
padding: 14px 18px;
border-radius: 16px;
background: var(--nd-surface-2);
box-shadow: inset 0 0 0 1px var(--nd-line);
font-size: 15px;
line-height: 1.45;
color: var(--nd-ink-2);
}
.nds-banner__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--nd-surface); color: var(--nd-muted); }
.nds-banner__text { flex: 1; }
.nds-banner__text strong { color: var(--nd-ink); margin-right: 4px; }
.nds-banner__link { flex: none; font-weight: 600; color: var(--nd-accent-ink); }
.nds-banner--live { background: var(--nd-danger-soft); box-shadow: none; }
.nds-banner--live .nds-banner__icon { color: var(--nd-danger); }
.nds-banner--soldout { background: var(--nd-warning-soft); box-shadow: none; }
.nds-banner--soldout .nds-banner__icon { color: var(--nd-warning); }
.nds-banner--cancelled { background: var(--nd-danger-soft); box-shadow: none; }
.nds-banner--cancelled .nds-banner__icon { color: var(--nd-danger); }
.nds-ownerbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 24px;
padding: 8px 8px 8px 16px;
border-radius: 14px;
background: var(--nd-accent-soft);
font-size: 14px;
color: var(--nd-ink-2);
}
.nds-ownerbar__text { display: inline-flex; align-items: center; gap: 8px; }
.nds-ownerbar__text .nds-icon { color: var(--nd-accent); }
.nds-ownerbar__link {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
border-radius: 10px;
background: var(--nd-surface);
color: var(--nd-ink);
font-weight: 600;
box-shadow: var(--nd-shadow-1);
}
.nds-ownerbar__link:hover { color: var(--nd-accent); }
.nds-notice { padding: 16px; border-radius: 14px; background: var(--nd-warning-soft); font-size: 14px; }
/* Image skeleton: shimmer until the image has loaded */
.nds-img { position: relative; overflow: hidden; background: var(--nd-surface-2); }
.nds-img::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
transform: translateX(-100%);
animation: nds-shimmer 1.4s var(--nd-ease) infinite;
pointer-events: none;
}
.nds-img.is-loaded::before { display: none; }
.nds-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--nd-dur-3) var(--nd-ease), transform var(--nd-dur-3) var(--nd-ease); }
.nds-img.is-loaded img, .nds-no-js .nds-img img { opacity: 1; }
@keyframes nds-shimmer { to { transform: translateX(100%); } }
/* ==========================================================================
5. Sections
========================================================================== */
/* Editorial prose: drop cap + pull quote + image breaks */
.nds-prose--editorial { max-width: 680px; font-family: var(--nds-serif); font-size: 21px; line-height: 1.7; color: var(--nd-ink); }
.nds-prose--editorial > p:first-child::first-letter {
float: left;
margin: 0.06em 0.12em 0 0;
font-size: 4.2em;
line-height: 0.82;
font-weight: 600;
color: var(--nd-accent);
}
.nds-pullquote {
margin: 1.6em 0 !important;
padding: 0.2em 0 0.2em 0.9em;
border-left: 3px solid var(--nd-accent);
font-family: var(--nds-serif);
font-size: clamp(24px, 1.4vw + 16px, 32px);
line-height: 1.32;
font-style: italic;
letter-spacing: -0.01em;
color: var(--nd-ink);
text-wrap: balance;
}
.nds-imgbreak { margin: 2em 0 !important; }
.nds-imgbreak .nds-img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--nd-radius-lg); }
/* Agenda */
.nds-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.nds-tabs::-webkit-scrollbar { display: none; }
.nds-tab {
display: grid;
gap: 2px;
flex: none;
min-width: 116px;
padding: 10px 16px;
border-radius: 14px;
border: 1px solid var(--nd-line);
background: var(--nd-surface);
text-align: left;
scroll-snap-align: start;
transition: background-color var(--nd-dur-2) var(--nd-ease), border-color var(--nd-dur-2) var(--nd-ease), color var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
.nds-tab:hover { border-color: var(--nd-line-strong); }
.nds-tab:active { transform: var(--nds-press); }
.nds-tab__k { font-size: 13px; font-weight: 600; color: var(--nd-muted); }
.nds-tab__v { font-size: 15px; font-weight: 650; color: var(--nd-ink); }
.nds-tab[aria-selected="true"] { background: var(--nd-ink); border-color: var(--nd-ink); }
.nds-tab[aria-selected="true"] .nds-tab__k { color: rgba(255, 255, 255, 0.7); }
.nds-tab[aria-selected="true"] .nds-tab__v { color: #fff; }
.nds-agenda__day { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--nd-muted); }
.nds-agenda__hint { margin-top: 16px; font-size: 14px; color: var(--nd-muted); }
.nds-agenda__hint a { color: var(--nd-accent); font-weight: 600; }
.nds-timeline { display: grid; }
.nds-session {
position: relative;
display: grid;
grid-template-columns: 88px minmax(0, 1fr) auto;
gap: 20px;
padding: 18px 0;
border-top: 1px solid var(--nd-line);
}
.nds-session:first-child { border-top: 0; }
.nds-session__time { display: grid; align-content: start; gap: 2px; padding-top: 2px; font-size: 15px; font-weight: 650; color: var(--nd-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nds-session__end { font-size: 13px; font-weight: 500; color: var(--nd-muted); }
.nds-session__title { font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -0.012em; color: var(--nd-ink); }
.nds-session__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 14px; color: var(--nd-muted); }
.nds-session__meta span { display: inline-flex; align-items: center; gap: 6px; }
.nds-session__note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--nd-warning-soft); font-size: 14px; color: var(--nd-ink-2); white-space: pre-wrap; }
.nds-session__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nds-filechip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
background: var(--nd-surface-2);
box-shadow: inset 0 0 0 1px var(--nd-line);
font-size: 13px;
font-weight: 550;
color: var(--nd-ink-2);
}
.nds-filechip:hover { color: var(--nd-accent); box-shadow: inset 0 0 0 1px var(--nd-accent-line); }
.nds-session__tools { display: flex; gap: 6px; align-items: flex-start; opacity: 0.7; transition: opacity var(--nd-dur-2) var(--nd-ease); }
.nds-session:hover .nds-session__tools, .nds-session__tools:focus-within { opacity: 1; }
.nds-session.is-saved::before { content: ""; position: absolute; left: -16px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--nd-accent); }
.nds-agenda--conference .nds-session { grid-template-columns: 120px minmax(0, 1fr) auto; padding: 22px 0; }
.nds-agenda--conference .nds-session__title { font-size: 19px; }
/* Rails (horizontal swipe lists) */
.nds-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 1fr);
gap: 16px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--nds-rail-pad, 0px);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nds-rail::-webkit-scrollbar { display: none; }
.nds-rail > * { scroll-snap-align: start; min-width: 0; }
.nds-railnav { display: inline-flex; gap: 8px; }
.nds-railnav [disabled] { opacity: 0.35; pointer-events: none; }
/* Speakers */
.nds-speakers--rail .nds-rail { grid-auto-columns: calc((100% - 32px) / 3); }
.nds-speaker { display: grid; gap: 14px; align-content: start; }
.nds-speaker__photo { aspect-ratio: 4 / 5; border-radius: var(--nd-radius-lg); }
.nds-speaker__photo img { transition: transform var(--nd-dur-3) var(--nd-ease), opacity var(--nd-dur-3) var(--nd-ease); }
.nds-speaker:hover .nds-speaker__photo img { transform: scale(1.035); }
.nds-speaker__initials {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient(150deg, var(--nd-accent-soft-2), var(--nd-accent-soft));
color: var(--nd-accent);
font-size: 40px;
font-weight: 700;
letter-spacing: -0.03em;
}
.nds-speaker__photo:has(.nds-speaker__initials)::before { display: none; }
.nds-speaker__name { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; color: var(--nd-ink); }
.nds-speaker__role { margin-top: 2px; font-size: 14px; color: var(--nd-muted); }
.nds-speaker__talk { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--nd-ink-2); }
.nds-speaker__bio { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--nd-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nds-speakergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
/* Lineup (festival): typographic list */
.nds-speakers--lineup .nds-speakergrid { grid-template-columns: 1fr; gap: 0; }
.nds-speakers--lineup .nds-speaker {
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
gap: 24px;
padding: 20px 0;
border-top: 1px solid var(--nd-line);
}
.nds-speakers--lineup .nds-speaker__photo { aspect-ratio: 1; border-radius: 50%; }
.nds-speakers--lineup .nds-speaker__initials { font-size: 22px; }
.nds-speakers--lineup .nds-speaker__body { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; }
.nds-speakers--lineup .nds-speaker__name { font-size: clamp(26px, 2.6vw + 8px, 48px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; transition: color var(--nd-dur-2) var(--nd-ease); }
.nds-speakers--lineup .nds-speaker:hover .nds-speaker__name { color: var(--nd-accent); }
.nds-speakers--lineup .nds-speaker__role { font-size: 15px; }
.nds-speakers--lineup .nds-speaker__talk { flex-basis: 100%; margin-top: 0; }
/* Gallery */
.nds-gallery__item { display: block; width: 100%; border-radius: 14px; cursor: zoom-in; }
.nds-gallery__item img { transition: transform var(--nd-dur-3) var(--nd-ease), opacity var(--nd-dur-3) var(--nd-ease); }
.nds-gallery__item:hover img { transform: scale(1.04); }
.nds-gallery__more {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(15, 23, 42, 0.45);
color: #fff;
font-size: 24px;
font-weight: 700;
}
.nds-gallery--mosaic .nds-gallery__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 180px 180px;
gap: 8px;
border-radius: var(--nd-radius-lg);
overflow: hidden;
}
.nds-gallery--mosaic .nds-gallery__item { border-radius: 0; height: 100%; }
.nds-gallery--mosaic .nds-gallery__item:nth-child(1) { grid-row: span 2; }
.nds-gallery--mosaic .nds-gallery__item:nth-child(n+6) { display: none; }
.nds-gallery--mosaic .nds-gallery__grid[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 360px; }
.nds-gallery--mosaic .nds-gallery__grid[data-count="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 300px; }
.nds-gallery--mosaic .nds-gallery__grid[data-count="2"] .nds-gallery__item:nth-child(1) { grid-row: auto; }
.nds-gallery--mosaic .nds-gallery__grid[data-count="3"] { grid-template-columns: 2fr 1fr; }
.nds-gallery--mosaic .nds-gallery__grid[data-count="4"] { grid-template-columns: 2fr 1fr 1fr; }
.nds-gallery--mosaic .nds-gallery__grid[data-count="4"] .nds-gallery__item:nth-child(4) { grid-column: span 2; }
.nds-gallery--rail .nds-gallery__grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 38%);
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.nds-gallery--rail .nds-gallery__grid::-webkit-scrollbar { display: none; }
.nds-gallery--rail .nds-gallery__item { aspect-ratio: 4 / 3; scroll-snap-align: start; }
/* Wall: even rows. The CSS-columns masonry left a tall hole whenever the photo count didn't balance. */
.nds-gallery--wall .nds-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nds-gallery--wall .nds-gallery__item { aspect-ratio: 4 / 5; }
/* Never end on a half-empty row; "View all" still opens every photo. */
@media (min-width: 768px) {
.nds-gallery--wall .nds-gallery__grid:has(> :nth-child(3n+4):last-child) > :last-child,
.nds-gallery--wall .nds-gallery__grid:has(> :nth-child(3n+5):last-child) > :nth-last-child(-n+2) { display: none; }
}
/* Videos */
.nds-rail--videos { grid-auto-columns: minmax(260px, calc((100% - 16px) / 2)); }
.nds-video { display: grid; gap: 10px; width: 100%; text-align: left; }
.nds-video__thumb { aspect-ratio: 16 / 9; border-radius: 14px; background: #0f172a; }
.nds-video__play {
position: absolute;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--nd-ink);
box-shadow: var(--nd-shadow-3);
transition: transform var(--nd-dur-2) var(--nd-ease-spring);
}
.nds-video:hover .nds-video__play { transform: scale(1.08); }
.nds-video__title { font-size: 15px; font-weight: 600; color: var(--nd-ink); }
/* Venue */
.nds-venue__card { overflow: hidden; border-radius: var(--nd-radius-lg); border: 1px solid var(--nd-line); background: var(--nd-surface); }
.nds-venue__map, .nds-place__map {
position: relative;
height: 260px;
background-color: var(--nd-surface-2);
background-image:
linear-gradient(var(--nd-line) 1px, transparent 1px),
linear-gradient(90deg, var(--nd-line) 1px, transparent 1px),
radial-gradient(circle at 50% 50%, var(--nd-accent-soft-2) 0 28px, transparent 29px);
background-size: 32px 32px, 32px 32px, 100% 100%;
background-position: center;
}
.nds-venue__map iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.85); pointer-events: none; }
.nds-venue__expand { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px; cursor: zoom-in; }
.nds-venue__expandlabel {
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: var(--nds-glass);
backdrop-filter: var(--nds-glass);
box-shadow: var(--nd-shadow-2);
font-size: 13px;
font-weight: 600;
color: var(--nd-ink);
opacity: 0;
transform: translateY(4px);
transition: opacity var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-2) var(--nd-ease);
}
.nds-venue__expand:hover .nds-venue__expandlabel, .nds-venue__expand:focus-visible .nds-venue__expandlabel { opacity: 1; transform: none; }
.nds-venue__info { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.nds-venue__text { min-width: 0; }
.nds-venue__name { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; color: var(--nd-ink); }
.nds-venue__addr { margin-top: 2px; font-size: 14px; color: var(--nd-muted); }
.nds-venue__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nds-venue--wide .nds-venue__card { display: grid; grid-template-columns: 1.4fr 1fr; }
.nds-venue--wide .nds-venue__map { height: 100%; min-height: 320px; }
.nds-venue--wide .nds-venue__info { flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px; gap: 20px; }
.nds-venue--wide .nds-venue__name { font-size: 22px; }
/* Host + contact */
.nds-host__card { display: grid; gap: 20px; }
.nds-host__who { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nds-host__id { flex: 1; min-width: 180px; }
.nds-host__name { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; color: var(--nd-ink); }
.nds-host__meta { margin-top: 2px; font-size: 14px; color: var(--nd-muted); }
.nds-host__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nds-contact { display: grid; border-radius: 16px; border: 1px solid var(--nd-line); overflow: hidden; }
.nds-contact li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 16px; font-size: 15px; }
.nds-contact li + li { border-top: 1px solid var(--nd-line); }
.nds-contact__icon { color: var(--nd-muted); display: inline-flex; }
.nds-contact__label { flex: none; width: 96px; color: var(--nd-muted); font-size: 14px; }
.nds-contact__value { flex: 1; min-width: 0; color: var(--nd-ink); font-weight: 550; }
a.nds-contact__value:hover { color: var(--nd-accent); }
.nds-contact .nds-textbtn { margin-right: auto; }
.nds-host--plain .nds-host__who { flex-direction: row; }
/* Documents */
.nds-doclist { display: grid; gap: 8px; }
.nds-doc {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 12px 16px 12px 12px;
border-radius: 14px;
border: 1px solid var(--nd-line);
background: var(--nd-surface);
text-align: left;
transition: border-color var(--nd-dur-2) var(--nd-ease), box-shadow var(--nd-dur-3) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
.nds-doc:hover { border-color: var(--nd-line-strong); box-shadow: var(--nd-shadow-2); }
.nds-doc:active { transform: scale(0.99); }
.nds-doc__ext { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--nd-info-soft); color: var(--nd-info-ink, var(--nd-info)); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.nds-doc__ext--pdf { background: var(--nd-danger-soft); color: var(--nd-danger); }
.nds-doc__body { display: grid; min-width: 0; flex: 1; }
.nds-doc__title { font-size: 15px; font-weight: 620; color: var(--nd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nds-doc__file { font-size: 13px; color: var(--nd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nds-doc__go { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 14px; font-weight: 600; color: var(--nd-accent); }
/* Details */
.nds-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.nds-facts:has(> .nds-fact:only-child) { grid-template-columns: minmax(0, 1fr); }
.nds-fact { display: grid; align-content: start; gap: 4px; padding: 16px 0; border-top: 1px solid var(--nd-line); min-width: 0; }
.nds-fact dt { font-size: 14px; color: var(--nd-muted); }
.nds-fact dd { font-size: 15px; font-weight: 550; color: var(--nd-ink); overflow-wrap: anywhere; }
.nds-fact dd a { color: var(--nd-accent); }
.nds-detail__img { max-height: 72px; border-radius: 10px; }
.nds-detail__thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.nds-detail__thumbs img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.nds-faq { display: grid; border-top: 1px solid var(--nd-line); }
.nds-faq__item { border-bottom: 1px solid var(--nd-line); }
.nds-faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 60px;
padding: 14px 0;
list-style: none;
cursor: pointer;
font-size: 17px;
font-weight: 620;
color: var(--nd-ink);
}
.nds-faq__item summary::-webkit-details-marker { display: none; }
.nds-faq__item summary .nds-icon { color: var(--nd-muted); transition: transform var(--nd-dur-3) var(--nd-ease); }
.nds-faq__item[open] summary .nds-icon { transform: rotate(45deg); color: var(--nd-accent); }
.nds-faq__item summary:hover { color: var(--nd-accent); }
.nds-faq__a { padding: 0 0 20px; max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--nd-ink-2); }
/* Related */
.nds-related { margin-top: 96px; padding: 64px 0 24px; border-top: 1px solid var(--nd-line); }
.nds-rail--cards { grid-auto-columns: calc((100% - 48px) / 4); }
.nds-relcard { display: grid; gap: 8px; }
.nds-relcard__img { aspect-ratio: 4 / 3; border-radius: 16px; }
.nds-relcard__img img { transition: transform var(--nd-dur-3) var(--nd-ease), opacity var(--nd-dur-3) var(--nd-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .nds-relcard:hover .nds-relcard__img img { transform: scale(1.03); } }
.nds-relcard__meta { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--nd-muted); }
.nds-relcard__title { font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -0.012em; color: var(--nd-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nds-relcard:hover .nds-relcard__title { color: var(--nd-accent); }
/* Footer meta (claim / report) */
.nds-footmeta { margin-top: var(--nds-section); padding-top: 24px; border-top: 1px solid var(--nd-line); }
.nds-footmeta__row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.nds-footmeta__item { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; color: var(--nd-muted); border-radius: 8px; }
:is(a, button).nds-footmeta__item:hover { color: var(--nd-ink); }
.nds-report { margin-top: 12px; max-width: 520px; }
.nds-report__form { display: grid; gap: 10px; justify-items: start; }
.nds-report__form textarea { width: 100%; }
.nds-report a { color: var(--nd-accent); }
.nds-crumbs { padding: 16px 0 12px; font-size: 13px; }
.nds-crumbs :is(nav, ol, ul) { margin: 0 !important; padding: 0 !important; }
/* ==========================================================================
6. Chrome: app bar, float buttons, action bar, sheets, toast
========================================================================== */
.nds-appbar { display: none; }
.nds-floatbtns { display: none; }
.nds-floatbtn {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.86);
color: var(--nd-ink);
-webkit-backdrop-filter: var(--nds-glass);
backdrop-filter: var(--nds-glass);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.16);
transition: transform var(--nd-dur-1) var(--nd-ease), background-color var(--nd-dur-2) var(--nd-ease);
}
.nds-floatbtn:hover { background: #fff; }
.nds-floatbtn:active { transform: var(--nds-press); }
/* Sticky CTA bar: driven by nexdirectoryStickyCta() (design system). Hidden and inert until the
inline CTA has scrolled away; hidden again while the footer is in view; works at every width. */
.nds-bar { display: none; }
.nds-bar.nd-sticky-cta { display: block; z-index: var(--nd-z-bar, 9000); }
.nds-bar__inner { display: flex; align-items: center; gap: 16px; max-width: calc(var(--nd-max) - 2 * var(--nd-gutter)); margin-inline: auto; }
.nds-bar__info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.nds-bar__thumb { width: 44px; height: 44px; flex: none; border-radius: var(--nd-radius-sm); object-fit: cover; }
.nds-bar__text { display: grid; gap: 2px; min-width: 0; }
.nds-bar__title { overflow: hidden; color: var(--nd-ink); font: 600 17px/1.25 var(--nd-font); letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.nds-bar__meta { display: flex; gap: 8px; color: var(--nd-muted); font: 500 13px/1.3 var(--nd-font); white-space: nowrap; }
.nds-bar__price { color: var(--nd-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.nds-bar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nds-bar .nds-cta { min-height: 48px; padding: 0 22px; border-radius: var(--nd-radius); font-size: 15px; }
@media (min-width: 1024px) {
/* Templates with a sticky purchase card keep the CTA in view on desktop: no dock needed. */
.nds[data-nds-desktop-bar="0"] .nds-bar.nd-sticky-cta { display: none; }
}
.nds-bar .nds-rsvp-form .nds-cta { width: 100%; }
.nds-sheet {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: 24px;
}
.nds-sheet__scrim { position: absolute; inset: 0; background: var(--nd-overlay); opacity: 0; transition: opacity var(--nd-dur-2) var(--nd-ease); }
.nds-sheet__panel {
position: relative;
display: grid;
gap: 16px;
width: min(440px, 100%);
max-height: calc(100vh - 48px);
overflow: auto;
padding: 24px;
border-radius: 24px;
background: var(--nd-surface);
box-shadow: var(--nd-shadow-4);
outline: 0;
opacity: 0;
transform: translateY(8px) scale(0.97);
transition: transform var(--nd-dur-3) var(--nd-ease), opacity var(--nd-dur-2) var(--nd-ease);
font-family: var(--nd-font);
color: var(--nd-ink);
}
.nds-sheet.is-open .nds-sheet__scrim { opacity: 1; }
.nds-sheet.is-open .nds-sheet__panel { opacity: 1; transform: none; }
.nds-sheet__grab { display: none; }
.nds-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nds-sheet [data-nds-copy].nd-btn { font-weight: 600; }
.nds-sheet__title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.nds-sheet__sub { margin-top: 2px; font-size: 14px; color: var(--nd-muted); }
.nds-sheet__list { display: grid; gap: 2px; }
.nds-sheetrow {
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 8px 12px;
margin: 0 -12px;
border-radius: 14px;
font-size: 16px;
font-weight: 560;
color: var(--nd-ink);
transition: background-color var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
.nds-sheetrow:hover { background: var(--nd-surface-2); }
.nds-sheetrow:active { transform: scale(0.985); }
.nds-sheetrow__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--nd-surface-2); box-shadow: inset 0 0 0 1px var(--nd-line); color: var(--nd-ink-2); }
.nds-sheetrow > span:nth-child(2) { flex: 1; }
.nds-sheetrow__go, .nds-sheetrow__hint { color: var(--nd-subtle); font-size: 13px; }
.nds-sharecard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--nd-surface-2); }
.nds-sharecard img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.nds-sharecard__title { font-size: 15px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nds-sharecard__url { font-size: 13px; color: var(--nd-muted); }
.nds-sharegrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.nds-sharegrid a { display: grid; justify-items: center; gap: 6px; padding: 6px 0; font-size: 12px; font-weight: 550; color: var(--nd-ink-2); border-radius: 12px; }
.nds-sharegrid a span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--nd-surface-2); box-shadow: inset 0 0 0 1px var(--nd-line); color: var(--nd-ink); transition: background-color var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease); }
.nds-sharegrid a:hover span { background: var(--nd-accent-soft); color: var(--nd-accent-ink); }
.nds-sharegrid a:active span { transform: var(--nds-press); }
html.nds-locked, html.nds-locked body { overflow: hidden; }
.nds-toast {
position: fixed;
z-index: 100001;
left: 50%;
bottom: calc(24px + var(--nds-bar-h));
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 14px;
background: var(--nd-ink);
color: #fff;
font: 550 14px/1.3 var(--nd-font);
box-shadow: var(--nd-shadow-4);
transform: translate(-50%, 16px);
opacity: 0;
transition: transform var(--nd-dur-3) var(--nd-ease-spring), opacity var(--nd-dur-2) var(--nd-ease);
}
.nds-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.nds-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
/* ==========================================================================
7. Heroes
========================================================================== */
/* Cover (Clarity) */
.nds-wrap--clarity { padding-bottom: 32px; }
.nds-cover { position: relative; }
.nds-cover__media {
display: block;
width: 100%;
aspect-ratio: 3 / 1;
max-height: 400px;
border-radius: var(--nds-radius);
box-shadow: var(--nd-shadow-2);
}
button.nds-cover__media { cursor: zoom-in; }
.nds-cover__count {
position: absolute;
right: 16px;
bottom: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: var(--nds-glass);
backdrop-filter: var(--nds-glass);
font-size: 13px;
font-weight: 600;
color: var(--nd-ink);
box-shadow: var(--nd-shadow-2);
}
.nds-cover__count:hover { background: #fff; }
.nds--clarity .nds-crumbs, .nds--compact .nds-crumbs { padding-top: 16px; }
/* Full-bleed (Immersive / Cinematic) */
.nds-full {
position: relative;
display: flex;
align-items: flex-end;
min-height: min(86vh, 860px);
padding: 160px 0 200px;
overflow: hidden;
background: #0b0d12;
isolation: isolate;
}
.nds-full__media { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.nds-full__media img, .nds-full__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nds-full__video { opacity: 0; transition: opacity var(--nd-dur-3) var(--nd-ease); }
.nds-full__video.is-playing { opacity: 1; }
.nds-full__scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(8, 10, 16, 0.35) 0%, rgba(8, 10, 16, 0) 30%),
linear-gradient(0deg, rgba(8, 10, 16, 0.86) 0%, rgba(8, 10, 16, 0.5) 38%, rgba(8, 10, 16, 0) 70%),
linear-gradient(90deg, rgba(8, 10, 16, 0.45) 0%, rgba(8, 10, 16, 0) 60%);
}
.nds-full__content { position: relative; }
.nds-full__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-size: 18px; font-weight: 550; color: rgba(255, 255, 255, 0.9); }
.nds-full__meta span { display: inline-flex; align-items: center; gap: 8px; }
.nds-full__meta .nds-icon { opacity: 0.8; }
.nds-full__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.nds-full__ctas .nds-cta { min-width: 220px; }
.nds-actions--glass .nds-iconbtn { width: 52px; height: 52px; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: #fff; -webkit-backdrop-filter: var(--nds-glass); backdrop-filter: var(--nds-glass); }
.nds-actions--glass .nds-iconbtn:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.nds-grid--overlap { position: relative; z-index: 2; }
.nds-grid--overlap .nds-aside { margin-top: -240px; }
.nds-grid--overlap .nds-main { padding-top: 56px; }
/* Cinematic */
.nds-full--cinematic { min-height: 100vh; min-height: 100svh; align-items: center; text-align: center; padding: 120px 0; }
.nds-full--cinematic .nds-full__content { display: grid; justify-items: center; }
.nds-full--cinematic .nds-eyebrow { justify-content: center; }
.nds-full--cinematic .nds-title--display { max-width: 18ch; font-size: clamp(44px, 6vw + 8px, 112px); }
.nds-full--cinematic .nds-full__meta, .nds-full--cinematic .nds-full__ctas { justify-content: center; }
.nds-full--cinematic .nds-full__scrim { background: radial-gradient(120% 90% at 50% 45%, rgba(8, 10, 16, 0.25), rgba(8, 10, 16, 0.82)); }
.nds-scrollcue {
position: absolute;
left: 50%;
bottom: 28px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-left: -22px;
border-radius: 50%;
color: rgba(255, 255, 255, 0.85);
animation: nds-cue 2.4s var(--nd-ease) infinite;
}
@keyframes nds-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.nds-strip { background: #0b0d12; color: #fff; }
.nds-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; padding-top: 32px; padding-bottom: 32px; }
.nds-strip__item { display: grid; gap: 2px; }
.nds-strip__k { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.nds-strip__v { font-size: 17px; font-weight: 650; }
.nds-strip__s { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.nds-strip .nds-going { margin-left: auto; }
.nds--cinematic .nds-wrap--read > .nds-section:first-of-type, .nds--cinematic .nds-wrap--read > .nds-banner:first-child { margin-top: 64px; }
/* ==========================================================================
8. Templates
========================================================================== */
/* Compact */
.nds-compact-head { padding-bottom: 40px; }
.nds-compact-head__row { display: flex; align-items: center; gap: 28px; padding: 8px 0 32px; border-bottom: 1px solid var(--nd-line); }
.nds-compact-head__thumb { width: 160px; height: 160px; flex: none; border-radius: 24px; box-shadow: var(--nd-shadow-2); }
.nds-titleblock--compact .nds-title { font-size: clamp(28px, 1.4vw + 18px, 40px); }
/* Editorial */
.nds-ed__head { padding-top: 64px; padding-bottom: 48px; text-align: center; }
.nds-ed__head .nds-titleblock { display: grid; justify-items: center; }
.nds-ed__head .nds-banner, .nds-ed__head .nds-ownerbar { max-width: 760px; margin-inline: auto; text-align: left; }
.nds-ed__head .nds-eyebrow { justify-content: center; }
.nds-titleblock--editorial .nds-title {
max-width: 18ch;
font-family: var(--nds-serif);
font-size: clamp(44px, 5.4vw + 8px, 104px);
font-weight: 600;
line-height: 1.0;
letter-spacing: -0.03em;
}
.nds-titleblock--editorial .nds-standfirst { margin-inline: auto; max-width: 46ch; font-family: var(--nds-serif); font-size: clamp(20px, 0.6vw + 16px, 24px); font-style: italic; color: var(--nd-ink-2); }
.nds-titleblock--editorial .nds-hostline { justify-content: center; }
.nds-ed__byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nd-line); max-width: 760px; margin-inline: auto; font-size: 15px; color: var(--nd-ink-2); }
.nds-ed__byline span { display: inline-flex; align-items: center; gap: 8px; }
.nds-ed__byline .nds-icon { color: var(--nd-muted); }
.nds-ed__lead { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.nds-ed__leadimg { aspect-ratio: 21 / 9; max-height: 640px; width: 100%; border-radius: 6px; }
.nds-ed__lead figcaption { margin-top: 12px; text-align: right; font-size: 13px; font-style: italic; color: var(--nd-muted); }
.nds-ed__cols { display: grid; grid-template-columns: 260px minmax(0, 680px); justify-content: center; gap: 80px; padding-top: 64px; }
.nds-ed__rail .nds-sticky { gap: 16px; }
.nds-ed__rail .nds-dateblock { justify-self: start; }
.nds-ed__rail .nds-actions { justify-content: flex-start; }
.nds-ed__railcta { margin-top: 4px; }
.nds-ed__read > .nds-section:first-child { margin-top: 0; }
.nds-ed__read .nds-speakergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nds-ed__tail { max-width: calc(680px + 340px + 48px); }
.nds--editorial .nds-gallery--wall { margin-top: 96px; }
/* Conference */
.nds-conf-hero { background: var(--nd-canvas); border-bottom: 1px solid var(--nd-line); }
.nds-conf-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 24px 0 64px; }
.nds-conf-hero__media { order: 2; aspect-ratio: 4 / 3; border-radius: var(--nds-radius); box-shadow: var(--nd-shadow-3); }
.nds-conf-hero__media .nds-dateblock { position: absolute; left: 20px; top: 20px; }
.nds-titleblock--conf .nds-title { font-size: clamp(36px, 2.4vw + 18px, 60px); }
.nds-keyfacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.nds-keyfacts li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--nd-surface); box-shadow: 0 0 0 1px var(--nd-line); font-size: 14px; font-weight: 550; color: var(--nd-ink-2); }
.nds-keyfacts .nds-icon { color: var(--nd-accent); }
.nds-conf-hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.nds-conf-hero__ctas .nds-cta { min-width: 200px; }
.nds-spy {
position: sticky;
top: var(--nd-sticky-top);
z-index: 40;
background: rgba(255, 255, 255, 0.86);
background: color-mix(in srgb, var(--nd-surface) 88%, transparent);
-webkit-backdrop-filter: var(--nds-glass);
backdrop-filter: var(--nds-glass);
border-bottom: 1px solid var(--nd-line);
transition: top var(--nd-dur-3) var(--nd-ease);
}
.nds-spy__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.nds-spy__links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nds-spy__links::-webkit-scrollbar { display: none; }
.nds-spy__link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 60px;
padding: 0 14px;
font-size: 15px;
font-weight: 600;
color: var(--nd-muted);
white-space: nowrap;
}
.nds-spy__link:hover { color: var(--nd-ink); }
.nds-spy__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--nd-accent); transform: scaleX(0); transition: transform var(--nd-dur-3) var(--nd-ease); }
.nds-spy__link.is-active { color: var(--nd-ink); }
.nds-spy__link.is-active::after { transform: scaleX(1); }
.nds-spy__cta .nds-cta { min-height: 40px; padding: 0 18px; border-radius: 12px; }
.nds-spy__cta .nexdirectory-pro-ticket-cta { min-height: 40px; }
.nds-conf { max-width: calc(980px + var(--nds-gutter) * 2); }
.nds-conf > .nds-section { margin-top: 80px; }
.nds-conf .nds-h2 { font-size: 30px; letter-spacing: -0.028em; margin-bottom: 24px; }
.nds-conf .nds-sectionhead .nds-h2 { margin-bottom: 0; }
.nds-conf .nds-speakergrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nds-conf .nds-prose { max-width: 760px; font-size: 18px; }
/* Festival (dark) */
.nds--festival {
--nd-ink: #f6f6f9;
--nd-ink-2: rgba(246, 246, 249, 0.8);
--nd-muted: rgba(246, 246, 249, 0.58);
--nd-subtle: rgba(246, 246, 249, 0.42);
--nd-line: rgba(255, 255, 255, 0.1);
--nd-line-strong: rgba(255, 255, 255, 0.2);
--nd-surface: #0c0c12;
--nd-surface-2: rgba(255, 255, 255, 0.06);
--nd-canvas: #0c0c12;
--nd-accent-soft: rgba(var(--nd-accent-rgb), 0.18);
--nd-accent-soft-2: rgba(var(--nd-accent-rgb), 0.28);
--nd-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
--nd-danger-soft: rgba(220, 38, 38, 0.16);
--nd-warning-soft: rgba(194, 124, 14, 0.18);
--nd-info-soft: rgba(37, 99, 235, 0.18);
background: #0c0c12;
color-scheme: dark;
}
.nds--festival .nd-btn:not(.nd-btn--primary) { --_bg: rgba(255, 255, 255, 0.06); --_bg-h: rgba(255, 255, 255, 0.12); --_bd: rgba(255, 255, 255, 0.14); --_fg: #f6f6f9; }
.nds-fest__hero { position: relative; padding: 48px 0 96px; overflow: hidden; }
.nds-fest__glow {
position: absolute;
inset: -20% -10% auto;
height: 120%;
background:
radial-gradient(40% 50% at 70% 35%, rgba(var(--nd-accent-rgb), 0.55), transparent 70%),
radial-gradient(30% 40% at 15% 70%, rgba(var(--nd-accent-rgb), 0.22), transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.nds-fest__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.nds-fest__media { order: 2; aspect-ratio: 4 / 5; max-height: 720px; border-radius: 32px; box-shadow: 0 40px 120px -40px rgba(var(--nd-accent-rgb), 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08); transform: rotate(1.2deg); }
.nds-fest__text .nds-dateblock { margin-bottom: 32px; background: #fff; box-shadow: 0 20px 60px -20px rgba(var(--nd-accent-rgb), 0.8); }
.nds-fest__text .nds-dateblock__day { color: #0c0c12; }
.nds-titleblock--fest .nds-title { font-size: clamp(44px, 4.8vw + 10px, 96px); font-weight: 700; line-height: 0.95; letter-spacing: -0.05em; }
.nds-titleblock--fest .nds-eyebrow { color: var(--nd-accent); }
.nds-fest__meta { display: grid; gap: 4px; margin-top: 24px; font-size: 18px; font-weight: 550; color: var(--nd-ink-2); }
.nds-fest__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.nds-fest__ctas .nds-cta { min-width: 220px; min-height: 58px; border-radius: 999px; font-size: 17px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 48px -12px rgba(var(--nd-accent-rgb), 0.9); }
.nds-fest__price { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.nds-actions--dark .nds-iconbtn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #fff; }
.nds-actions--dark .nds-iconbtn:hover { background: rgba(255, 255, 255, 0.14); }
.nds-fest__text .nds-going { margin-top: 28px; }
.nds-fest__body > .nds-section { margin-top: 96px; }
.nds-fest__body .nds-h2 { font-size: clamp(28px, 1.6vw + 16px, 40px); font-weight: 700; letter-spacing: -0.035em; margin-bottom: 28px; }
.nds-fest__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; margin-top: 96px; }
.nds-fest__cols > div > .nds-section { margin-top: 0; }
.nds--festival .nds-tab[aria-selected="true"] { background: var(--nd-accent); border-color: var(--nd-accent); }
.nds--festival .nds-tab[aria-selected="true"] .nds-tab__v { color: var(--nd-on-accent); }
.nds--festival .nds-tab[aria-selected="true"] .nds-tab__k { color: var(--nd-on-accent); opacity: 0.8; }
.nds--festival .nds-venue__map iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.6); }
.nds--festival .nds-avatar--stack { border-color: #0c0c12; }
.nds--festival .nds-img::before { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.06) 50%, transparent 80%); }
.nds--festival .nds-bar__inner { background: rgba(20, 20, 28, 0.86); }
.nds--festival .nds-sheet__panel { --nd-surface: #16161f; }
.nds--festival .nds-floatbtn { background: rgba(12, 12, 18, 0.6); color: #fff; }
.nds--festival .nds-related { border-color: rgba(255, 255, 255, 0.1); }
/* Split */
.nds-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; }
.nds-split__media { position: sticky; top: var(--nd-sticky-top); height: calc(100vh - var(--nd-sticky-top)); background: var(--nd-surface-2); }
.nds-split__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.nds-split__track::-webkit-scrollbar { display: none; }
.nds-split__slide { display: block; height: 100%; scroll-snap-align: start; cursor: zoom-in; }
.nds-split__nav { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.nds-split__nav > * { pointer-events: auto; }
.nds-split__count { padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.6); -webkit-backdrop-filter: var(--nds-glass); backdrop-filter: var(--nds-glass); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nds-split__content { min-width: 0; }
.nds-split__inner { max-width: 640px; padding: 16px 56px 64px; }
.nds-split .nds-crumbs { padding-top: 16px; }
.nds--split .nds-related { margin-top: 0; }
/* Minimal */
.nds-min { max-width: calc(680px + var(--nds-gutter) * 2); margin: 0 auto; padding: 0 var(--nds-gutter); }
.nds-min__head { padding: 96px 0 56px; text-align: center; }
.nds-min__when { font-size: 15px; font-weight: 600; color: var(--nd-accent); }
.nds-min__when span { color: var(--nd-muted); font-weight: 500; }
.nds-title--min { margin-top: 16px; font-size: clamp(36px, 3vw + 18px, 64px); letter-spacing: -0.04em; line-height: 1.04; }
.nds-min__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-top: 20px; font-size: 15px; color: var(--nd-muted); }
.nds-min__meta span + span::before { content: "·"; margin: 0 10px; color: var(--nd-subtle); }
.nds-min__meta a { color: var(--nd-ink); font-weight: 550; border-bottom: 1px solid var(--nd-line-strong); }
.nds-min__meta a:hover { border-color: var(--nd-accent); color: var(--nd-accent); }
.nds-min__cta { display: grid; justify-items: center; gap: 16px; margin-top: 36px; }
.nds-min__cta .nds-cta { min-width: 240px; }
.nds-min__cta .nds-going { padding: 0; }
.nds-min__head .nds-banner, .nds-min__head .nds-ownerbar { text-align: left; }
.nds-min__img { aspect-ratio: 3 / 2; border-radius: var(--nds-radius); }
.nds-min__body > .nds-section { margin-top: 64px; }
.nds-min__body > .nds-about:first-child { margin-top: 56px; }
.nds-min__share { margin-top: 56px; }
.nds-min__share .nds-actions { justify-content: center; }
.nds--minimal .nds-speakers--rail .nds-rail { grid-auto-columns: calc((100% - 16px) / 2); }
/* Venue / place */
.nds-place__map { height: 440px; }
.nds-place__map iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: saturate(0.9); }
.nds-place__mapbtn { position: absolute; inset: 0; cursor: zoom-in; }
.nds-place__fallback { width: 100%; height: 100%; object-fit: cover; }
.nds-place__headwrap { position: relative; z-index: 2; margin-top: -120px; }
.nds-place__card {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 8px 28px;
align-items: center;
padding: 28px;
border-radius: var(--nds-radius);
background: var(--nd-surface);
border: 1px solid var(--nd-line);
box-shadow: var(--nd-shadow-4);
}
.nds-place__thumb { width: 120px; height: 120px; border-radius: 20px; grid-row: span 2; }
.nds-titleblock--place .nds-title { font-size: clamp(28px, 1.4vw + 18px, 40px); }
.nds-titleblock--place .nds-hostline { display: none; }
.nds-titleblock--place .nds-eyebrow { margin-bottom: 8px; }
.nds-place__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; font-size: 15px; color: var(--nd-muted); }
.nds-place__sep { color: var(--nd-subtle); }
.nds-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nd-success); }
.nds-dot--danger { background: var(--nd-danger); }
.nds-place__actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.nds-placebtn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px 0 12px;
border-radius: 999px;
border: 1px solid var(--nd-line);
background: var(--nd-surface);
font-size: 14px;
font-weight: 600;
color: var(--nd-ink);
transition: background-color var(--nd-dur-2) var(--nd-ease), border-color var(--nd-dur-2) var(--nd-ease), transform var(--nd-dur-1) var(--nd-ease);
}
.nds-placebtn span { display: inline-flex; color: var(--nd-accent); }
.nds-placebtn:hover { background: var(--nd-surface-2); border-color: var(--nd-line-strong); }
.nds-placebtn:active { transform: var(--nds-press); }
.nds-place__primary { margin-left: auto; }
.nds-place__primary .nds-cta { min-height: 44px; border-radius: 999px; font-size: 15px; padding: 0 22px; }
.nds-grid--place { margin-top: 24px; }
.nds-place__facts { padding: 12px 20px; box-shadow: none; }
.nds--venue .nds-aside .nds-host { margin-top: 8px; }
.nds--venue .nds-aside .nds-host__who { padding: 4px 4px 0; }
.nds--venue .nds-aside .nds-footmeta { margin-top: 8px; }
/* ==========================================================================
9. Motion
========================================================================== */
.nds-js [data-nds-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--nd-ease), transform 320ms var(--nd-ease); }
.nds-js [data-nds-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.nds *, .nds *::before, .nds *::after { animation: none !important; transition-duration: 1ms !important; }
.nds-js [data-nds-reveal] { opacity: 1; transform: none; }
.nds-full__media { transform: none !important; }
}
/* ==========================================================================
10. Responsive
========================================================================== */
@media (max-width: 1279px) {
.nds-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
.nds-conf .nds-speakergrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nds-rail--cards { grid-auto-columns: calc((100% - 32px) / 3); }
}
/* Compact: no side card — show the phone summary + persistent bar. */
@media (max-width: 1023px) {
.nds-grid, .nds-ed__cols, .nds-fest__grid, .nds-conf-hero__grid, .nds-fest__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
.nds-aside { display: none; }
.nds--venue .nds-aside { display: block; margin-top: var(--nds-section); }
.nds-mobile-only { display: block; }
.nds-desktop-only { display: none !important; }
.nds-msummary { margin-top: 24px; display: grid; gap: 8px; }
.nds-ed__rail { display: none; }
.nds-grid--overlap .nds-main { padding-top: 32px; }
.nds-full { padding-bottom: 96px; }
.nds-fest__media { order: 0; transform: none; max-height: none; }
.nds-conf-hero__media { order: 0; }
.nds-fest__cols > div + div { margin-top: var(--nds-section); }
.nds-bar__thumb, .nds-bar__share { display: none; }
.nds-bar__inner { gap: 12px; }
.nds-bar .nds-cta, .nds-bar .nds-rsvp-form, .nds-bar .nds-ticket-slot { min-width: 168px; }
.nds-split { grid-template-columns: minmax(0, 1fr); }
.nds-split__media { position: relative; top: 0; height: auto; aspect-ratio: 4 / 3; }
.nds-split__inner { max-width: 760px; margin: 0 auto; padding: 8px var(--nds-gutter) 0; }
.nds-place__card { grid-template-columns: 88px minmax(0, 1fr); }
.nds-place__thumb { width: 88px; height: 88px; grid-row: auto; }
.nds-place__actions { grid-column: 1 / -1; }
.nds-speakers--rail .nds-rail { grid-auto-columns: minmax(200px, 40%); }
.nds-conf .nds-speakergrid, .nds-speakergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone: app layout. */
@media (max-width: 767px) {
.nds { --nds-section: 40px; }
.nexdirectory-plugin-page:has(.nds) .ndn.ndn--sticky { position: relative; top: auto; }
/* Detail screen: its own action bar replaces the global tab bar (like a pushed view in an app). */
.nexdirectory-plugin-page:has(.nds) .ndn-tabbar { display: none !important; }
.nds-crumbs { display: none; }
/* App header */
.nds-appbar {
position: fixed;
z-index: 95;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 4px;
height: calc(52px + env(safe-area-inset-top));
padding: env(safe-area-inset-top) 6px 0;
background: rgba(255, 255, 255, 0.9);
background: color-mix(in srgb, var(--nd-surface) 90%, transparent);
-webkit-backdrop-filter: var(--nds-glass);
backdrop-filter: var(--nds-glass);
border-bottom: 1px solid var(--nd-line);
transform: translateY(-100%);
transition: transform var(--nd-dur-3) var(--nd-ease);
}
.nds-appbar-on .nds-appbar { transform: none; }
.admin-bar .nds-appbar { top: 0; }
.nds-appbar__btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: var(--nd-ink); }
.nds-appbar__btn:active { background: var(--nd-surface-2); transform: var(--nds-press); }
.nds-appbar__title { flex: 1; min-width: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nd-ink); }
.nds-floatbtns { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; }
.nds-floatbtns__spacer { flex: 1; }
/* Content sheet slides over edge-to-edge media */
.nds-body:not(.nds-body--flat) { margin-top: -24px; border-radius: 24px 24px 0 0; background: var(--nd-surface); padding-top: 28px; z-index: 2; }
.nds-body > .nds-wrap:first-child { padding-top: 0; }
.nds-title { font-size: clamp(28px, 7.4vw, 34px); letter-spacing: -0.03em; line-height: 1.12; }
.nds-eyebrow { margin-bottom: 10px; }
.nds-h2 { font-size: 20px; margin-bottom: 16px; }
.nds-prose { font-size: 16px; line-height: 1.68; }
.nds-about--lead .nds-prose, .nds-about--lead .nds-prose > p:first-child { font-size: 17px; }
.nds-standfirst { font-size: 17px; }
.nds-msummary { margin-top: 20px; padding-top: 4px; }
.nds-msummary .nds-going { padding: 8px 0 0; }
.nds--clarity .nds-main > .nds-section,
.nds--compact .nds-main > .nds-section,
.nds--immersive .nds-main > .nds-section,
.nds--split .nds-split__inner > .nds-section { padding-top: 32px; margin-top: 32px; }
.nds-banner { margin-bottom: 20px; padding: 12px 14px; font-size: 14px; align-items: flex-start; }
.nds-banner__text span { display: none; }
.nds-banner { align-items: center; }
/* Rails bleed to the screen edge */
.nds-rail, .nds-gallery--rail .nds-gallery__grid, .nds-gallery--mosaic .nds-gallery__grid {
margin-inline: calc(var(--nds-gutter) * -1);
padding-inline: var(--nds-gutter);
scroll-padding-inline: var(--nds-gutter);
}
.nds-speakers--rail .nds-rail { grid-auto-columns: 62%; gap: 12px; }
.nds-rail--cards { grid-auto-columns: 72%; gap: 12px; }
.nds-rail--videos { grid-auto-columns: 84%; }
.nds-railnav { display: none; }
.nds-gallery--mosaic .nds-gallery__grid,
.nds-gallery--mosaic .nds-gallery__grid[data-count] {
display: grid;
grid-template-columns: none;
grid-template-rows: none;
grid-auto-flow: column;
grid-auto-columns: 78%;
gap: 8px;
border-radius: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.nds-gallery--mosaic .nds-gallery__grid::-webkit-scrollbar { display: none; }
.nds-gallery--mosaic .nds-gallery__item,
.nds-gallery--mosaic .nds-gallery__item:nth-child(n) { display: block; grid-row: auto; grid-column: auto; aspect-ratio: 4 / 3; border-radius: 14px; scroll-snap-align: start; }
.nds-gallery__more { display: none; }
.nds-gallery--rail .nds-gallery__grid { grid-auto-columns: 78%; }
.nds-gallery--wall .nds-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nds-gallery--wall .nds-gallery__item { aspect-ratio: 1; }
.nds-gallery--wall .nds-gallery__grid:has(> :nth-child(2n+3):last-child) > :last-child { display: none; }
.nds-session { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 0; }
.nds-session__tools { flex-direction: column; opacity: 1; gap: 4px; }
.nds-session__title { font-size: 16px; }
.nds-session__time { font-size: 14px; }
.nds-session.is-saved::before { left: -12px; }
.nds-agenda--conference .nds-session { grid-template-columns: 60px minmax(0, 1fr) auto; }
.nds-agenda--conference .nds-session__title { font-size: 16px; }
.nds-tabs { margin-inline: calc(var(--nds-gutter) * -1); padding-inline: var(--nds-gutter); scroll-padding-inline: var(--nds-gutter); }
.nds-venue__map { height: 200px; }
.nds-venue__info { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.nds-venue__actions .nds-btn-quiet { flex: 1; }
.nds-venue--wide .nds-venue__card { grid-template-columns: 1fr; }
.nds-venue--wide .nds-venue__map { min-height: 200px; }
.nds-venue--wide .nds-venue__info { padding: 16px; }
.nds-facts { grid-template-columns: minmax(0, 1fr); }
.nds-contact__label { display: none; }
.nds-host__actions { width: 100%; }
.nds-host__actions .nds-btn-quiet { flex: 1; }
.nds-speakergrid, .nds-conf .nds-speakergrid, .nds-ed__read .nds-speakergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.nds-speaker__name { font-size: 15px; }
.nds-speakers--lineup .nds-speaker { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
.nds-related { margin-top: 56px; padding-top: 40px; }
/* Sheets become bottom sheets */
.nds-sheet { place-items: end stretch; padding: 0; }
.nds-sheet__panel {
width: 100%;
max-height: 88vh;
padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
border-radius: 24px 24px 0 0;
transform: translateY(100%);
opacity: 1;
transition: transform var(--nd-dur-3) var(--nd-ease);
}
.nds-sheet.is-dragging .nds-sheet__panel { transition: none; }
.nds-sheet__grab { display: block; justify-self: center; width: 40px; height: 5px; margin: 4px 0 4px; border-radius: 999px; background: var(--nd-line-strong); }
.nds-sheet__head .nds-iconbtn { display: none; }
/* Cover hero → edge-to-edge */
.nds-wrap--clarity { padding: 0; }
.nds-cover__media { aspect-ratio: 4 / 3.3; max-height: none; border-radius: 0; box-shadow: none; }
.nds-cover__count { bottom: 36px; right: 12px; min-height: 32px; padding: 0 12px; font-size: 12px; }
/* Immersive */
.nds-full { min-height: 78vh; min-height: 78svh; padding: 96px 0 56px; }
.nds-full__media { inset: 0; }
.nds-title--display { font-size: clamp(36px, 10vw, 46px); max-width: none; }
.nds-full__meta { gap: 6px 18px; margin-top: 16px; font-size: 15px; }
.nds-full__ctas { display: none; }
.nds-grid--overlap .nds-main { padding-top: 0; }
.nds-full--cinematic { min-height: 86vh; min-height: 86svh; }
.nds-full--cinematic .nds-title--display { font-size: clamp(38px, 11vw, 52px); }
.nds-scrollcue { bottom: 40px; }
.nds--cinematic .nds-strip { margin-top: 0; border-radius: 24px 24px 0 0; }
.nds--cinematic .nds-body { background: #0b0d12; }
.nds--cinematic .nds-body > .nds-wrap { background: var(--nd-surface); }
.nds-strip__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; padding-top: 24px; padding-bottom: 24px; }
.nds-strip .nds-going { grid-column: 1 / -1; margin-left: 0; }
.nds--cinematic .nds-msummary { display: none; }
/* Compact */
.nds-compact-head { padding-bottom: 0; }
.nds-compact-head__row { padding: 20px 0 28px; gap: 16px; align-items: flex-start; }
.nds-compact-head__thumb { width: 88px; height: 88px; border-radius: var(--nd-radius-lg); }
.nds-titleblock--compact .nds-title { font-size: 24px; }
.nds--compact .nds-body:not(.nds-body--flat) { margin-top: 0; padding-top: 0; border-radius: 0; }
.nds--compact .nds-hostline { margin-top: 10px; font-size: 14px; }
/* Editorial */
.nds-ed__head { padding-top: 32px; padding-bottom: 28px; text-align: left; }
.nds-ed__head .nds-titleblock, .nds-ed__head .nds-eyebrow, .nds-titleblock--editorial .nds-hostline { justify-items: start; justify-content: flex-start; }
.nds-titleblock--editorial .nds-title { font-size: clamp(38px, 11vw, 48px); line-height: 1.02; }
.nds-titleblock--editorial .nds-standfirst { margin-inline: 0; font-size: 19px; }
.nds-ed__byline { display: none; }
.nds-ed__lead { padding: 0; }
.nds-ed__leadimg { aspect-ratio: 4 / 3; border-radius: 0; }
.nds-ed__lead figcaption { padding-inline: var(--nds-gutter); text-align: left; }
.nds--editorial .nds-floatbtns { display: none; }
.nds--editorial .nds-body:not(.nds-body--flat) { margin-top: 0; border-radius: 0; padding-top: 8px; }
.nds-ed__cols { padding-top: 16px; }
.nds-prose--editorial { font-size: 19px; }
.nds--editorial .nds-msummary { margin: 0 0 32px; }
.nds--editorial .nds-gallery--wall { margin-top: 56px; }
/* Conference */
.nds-conf-hero { background: var(--nd-surface); border: 0; }
.nds-conf-hero > .nds-wrap { padding: 0; }
.nds-conf-hero__grid { padding: 0 0 8px; }
.nds-conf-hero__media { aspect-ratio: 16 / 11; border-radius: 0; box-shadow: none; }
.nds-conf-hero__media .nds-dateblock { left: auto; right: 16px; top: auto; bottom: 40px; }
.nds-conf-hero__media .nds-floatbtns + * { display: none; }
.nds-conf-hero__text { padding: 28px var(--nds-gutter) 0; }
.nds-titleblock--conf .nds-title { font-size: clamp(30px, 8vw, 36px); }
.nds-keyfacts { flex-wrap: nowrap; margin: 20px calc(var(--nds-gutter) * -1) 0; padding: 0 var(--nds-gutter) 2px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.nds-keyfacts::-webkit-scrollbar { display: none; }
.nds-keyfacts li { flex: none; }
.nds-keyfacts li { min-height: 36px; padding: 0 12px; font-size: 13px; }
.nds-spy__link { min-height: 52px; padding: 0 12px; font-size: 14px; }
.nds-spy__inner { min-height: 52px; padding-inline: 8px; }
.nds-spy { top: 0; }
.nds-appbar-on .nds-spy { top: calc(52px + env(safe-area-inset-top)); }
.nds-conf > .nds-section { margin-top: 48px; }
.nds-conf .nds-h2 { font-size: 24px; }
.nds-conf .nds-prose { font-size: 16px; }
/* Festival */
.nds-fest__hero { padding: 0 0 48px; }
.nds-fest__hero > .nds-wrap { padding: 0; }
.nds-fest__media { aspect-ratio: 4 / 4.4; border-radius: 0; box-shadow: none; }
.nds-fest__text { padding: 0 var(--nds-gutter); background: transparent !important; }
.nds-fest__text .nds-dateblock { margin: -64px 0 24px; position: relative; z-index: 3; }
.nds-dateblock--xl .nds-dateblock__day { font-size: 56px; padding: 8px 18px 12px; }
.nds-dateblock--xl .nds-dateblock__month { font-size: 13px; padding: 8px 16px 6px; }
.nds-titleblock--fest .nds-title { font-size: clamp(38px, 11vw, 52px); }
.nds-fest__meta { font-size: 16px; }
.nds-fest__body > .nds-section, .nds-fest__cols { margin-top: 56px; }
.nds--festival .nds-body:not(.nds-body--flat) { margin-top: 0; border-radius: 0; padding-top: 0; }
.nds-fest__glow { inset: 20% -40% auto; }
/* Split */
.nds-split__media { aspect-ratio: 1 / 1.05; }
.nds-split__nav { left: 16px; right: 16px; bottom: 40px; }
.nds-split__nav .nds-railnav { display: none; }
.nds-split__inner { padding: 0 var(--nds-gutter); }
/* Minimal */
.nds-min__head { padding: 40px 0 32px; }
.nds-title--min { font-size: clamp(32px, 9vw, 42px); }
.nds-min__cta { margin-top: 28px; }
.nds-min__cta [data-nds-cta-sentinel], .nds-min__cta > .nds-cta, .nds-min__cta > .nds-rsvp-form { width: 100%; }
.nds-min__cta .nds-rsvp-form .nds-cta { width: 100%; }
.nds-min__img { margin-inline: calc(var(--nds-gutter) * -1); border-radius: 0; }
.nds--minimal .nds-floatbtns { display: none; }
/* Venue */
.nds-place__map { height: 300px; }
.nds-place__headwrap { margin-top: 0; padding: 0; }
.nds-place__card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px var(--nds-gutter) 8px; border: 0; box-shadow: none; }
.nds-place__thumb { display: none; }
.nds-place__actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; }
.nds-placebtn { flex-direction: column; justify-content: center; gap: 6px; min-height: 68px; padding: 8px 4px; border-radius: 16px; background: var(--nd-surface-2); border: 0; font-size: 12px; }
.nds-placebtn span { width: 24px; height: 24px; place-items: center; }
.nds-grid--place { margin-top: 0; }
}
@media (max-width: 767px) and (hover: none) {
.nds-gallery__item:hover img, .nds-speaker:hover .nds-speaker__photo img, .nds-relcard:hover .nds-relcard__img img { transform: none; }
}
@media (min-width: 1024px) {
.nds-msummary { display: none; }
}
@media print {
.nds-bar, .nds-appbar, .nds-floatbtns, .nds-sheet { display: none !important; }
}
/* ==========================================================================
11. Refinements
========================================================================== */
/* Secondary (soft) CTA sitting on imagery or dark grounds. */
.nds-full .nd-btn--soft.nds-cta,
.nds--festival .nd-btn--soft.nds-cta {
--_bg: rgba(255, 255, 255, 0.14);
--_bg-h: rgba(255, 255, 255, 0.24);
--_fg: #fff;
border: 1px solid rgba(255, 255, 255, 0.22);
-webkit-backdrop-filter: var(--nds-glass);
backdrop-filter: var(--nds-glass);
}
.nds-strip .nds-going, .nds-strip .nds-going__text { color: rgba(255, 255, 255, 0.85); }
.nds-strip .nds-avatar--stack { border-color: #0b0d12; }
.nds--cinematic .nds-strip + .nds-wrap--read { padding-top: 56px; }
.nds-aside .nds-contact__label { display: none; }
.nds-aside .nds-contact li { padding-left: 14px; }
.nds--minimal .nds-speakers--rail .nds-rail { grid-auto-columns: calc((100% - 32px) / 3); }
@media (max-width: 767px) {
.nds--minimal .nds-speakers--rail .nds-rail { grid-auto-columns: 46%; }
}
.nds-wrap--texthero { padding-bottom: 8px; }
.nds-min__img--top { margin-top: 32px; }
.nds-dateblock__dash { font-weight: 300; opacity: 0.35; }
.nds-titleblock--fest .nds-title { font-size: clamp(44px, 4vw + 12px, 84px); }
@media (max-width: 767px) {
.nds-min__img--top { margin-top: 0; }
.nds-wrap--texthero + .nds-body, .nds-wrap--texthero { padding-top: 0; }
}
/* Scoped Tailwind preflight resets button backgrounds (.nxd-ui button); restore ours. */
.nds .nd-btn { background: var(--_bg); border: 1px solid var(--_bd); color: var(--_fg) !important; }
.nds .nd-btn:hover { background: var(--_bg-h); }
.nds .nds-btn-quiet { border-color: var(--nd-line-strong); }
@media (max-width: 767px) {
.nds-min__meta span:nth-child(n+4) { display: none; }
/* "Hosted by …" gets its own line so the next line never starts with a stray "·". */
.nds-min__meta .nds-min__by { flex-basis: 100%; }
.nds-min__meta .nds-min__by + span::before { content: none; }
}
/* ==========================================================================
Pass 3 — media fallbacks, host line, place card, alignment
========================================================================== */
/* No image: a quiet, on-brand surface instead of a broken ![]()
. */
.nds-ph {
position: absolute; inset: 0; display: grid; place-items: center;
color: var(--nd-accent);
background:
radial-gradient(120% 90% at 15% 0%, var(--nd-accent-soft-2), transparent 60%),
radial-gradient(90% 80% at 100% 100%, var(--nd-accent-soft), transparent 60%),
var(--nd-surface-2);
}
.nds-ph .nds-icon { opacity: 0.5; }
.nds-img:has(> .nds-ph)::before { display: none; }
.nds-place__thumb .nds-ph .nds-icon { width: 28px; height: 28px; }
.nds-full__media:not(:has(img, video)) {
background:
radial-gradient(70% 90% at 80% 10%, rgba(var(--nd-accent-rgb, 99, 102, 241), 0.45), transparent 65%),
radial-gradient(60% 70% at 0% 100%, rgba(var(--nd-accent-rgb, 99, 102, 241), 0.25), transparent 70%),
#0d0f14;
}
/* Host line: "Hosted by " reads as one phrase. */
.nds-hostline__text a, .nds-hostline__text strong { color: var(--nd-ink); font-weight: 600; text-decoration: none; }
.nds-hostline__text a:hover { color: var(--nd-accent); }
/* Breadcrumb sits on the content grid, not indented. */
.nds-crumbs .nexdirectory-breadcrumb-shell { margin: 0 !important; padding: 0 !important; max-width: none !important; }
/* Very long titles (3+ lines): step the display sizes down so the hero keeps its shape. */
.nds--longtitle .nds-title { font-size: clamp(28px, 1.2vw + 20px, 40px); }
.nds--longtitle .nds-title--display,
.nds--longtitle .nds-full--cinematic .nds-title--display { font-size: clamp(34px, 2.6vw + 12px, 56px); max-width: 24ch; }
.nds--longtitle .nds-titleblock--fest .nds-title,
.nds--longtitle .nds-titleblock--editorial .nds-title,
.nds--longtitle .nds-title--min { font-size: clamp(32px, 2vw + 16px, 52px); }
.nds--longtitle .nds-titleblock--conf .nds-title { font-size: clamp(30px, 1.4vw + 18px, 44px); }
@media (max-width: 767px) {
.nds--longtitle .nds-title, .nds--longtitle .nds-title--display, .nds--longtitle .nds-titleblock--fest .nds-title,
.nds--longtitle .nds-titleblock--editorial .nds-title, .nds--longtitle .nds-title--min, .nds--longtitle .nds-titleblock--conf .nds-title { font-size: clamp(26px, 7vw, 32px); }
}
.nds-place__status > .nds-place__sep:first-child { display: none; }
/* ==========================================================================
Pass 3 — listing types (jobs, products, places)
========================================================================== */
.nds-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nds-chipx { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--nd-surface-2); color: var(--nd-ink-2); font-size: 14px; font-weight: 550; }
.nds-chipx .nds-icon { color: var(--nd-success); }
.nds-chipx .nds-dot { width: 7px; height: 7px; }
.nds-chipx--sold .nds-dot, .nds-chipx--expired .nds-dot { background: var(--nd-subtle); }
.nds-chipx--reserved .nds-dot { background: var(--nd-warning); }
.nds-ticks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nds-ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.6; color: var(--nd-ink-2); }
.nds-ticks li .nds-icon { margin-top: 3px; color: var(--nd-accent); }
.nds-ticks--plain li .nds-icon { color: var(--nd-muted); }
.nds-note { margin-top: 16px; padding: 12px 16px; border-radius: var(--nd-radius-sm, 10px); background: var(--nd-surface-2); color: var(--nd-ink-2); font-size: 14px; line-height: 1.5; }
.nds-facts--tight .nds-fact { padding: 12px 0; }
.nds-row.is-muted .nds-row__title { color: var(--nd-muted); }
.nds-cta--off { cursor: default; opacity: 0.85; pointer-events: none; }
.nds-pricelevel { color: var(--nd-ink-2); font-weight: 600; letter-spacing: 0.04em; }
/* Open / closed */
.nds-openword { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.nds-openword--open { color: var(--nd-success-ink); }
.nds-openword--open .nds-dot { background: var(--nd-success); }
.nds-openword--closed { color: var(--nd-danger-ink, var(--nd-danger)); }
.nds-openword--closed .nds-dot { background: var(--nd-danger); }
.nds-row__icon--open { color: var(--nd-success); }
.nds-openpill { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.nds-openpill--open { background: var(--nd-success-soft); color: var(--nd-success-ink); }
.nds-openpill--open .nds-dot { background: var(--nd-success); }
.nds-openpill--closed { background: var(--nd-danger-soft); color: var(--nd-danger-ink); }
.nds-openpill--closed .nds-dot { background: var(--nd-danger); }
.nds-openpill__detail { color: var(--nd-ink-2); font-weight: 500; }
.nds-hours { width: 100%; max-width: 480px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.nds-hours th, .nds-hours td { padding: 10px 0; border-top: 1px solid var(--nd-line); text-align: left; vertical-align: top; }
.nds-hours tr:first-child th, .nds-hours tr:first-child td { border-top: 0; }
.nds-hours th { width: 40%; color: var(--nd-ink-2); font-weight: 500; }
.nds-hours td { color: var(--nd-ink); }
.nds-hours tr.is-closed td { color: var(--nd-muted); }
.nds-hours tr.is-today th, .nds-hours tr.is-today td { color: var(--nd-ink); font-weight: 650; }
.nds-hours__today { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--nd-accent-soft); color: var(--nd-accent-ink); font-size: 12px; font-weight: 650; }
/* Company + safety */
.nds-company { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--nd-line); border-radius: var(--nd-radius-lg); background: var(--nd-surface); }
.nds-company__logo { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--nd-surface-2); color: var(--nd-ink-2); }
.nds-company__id { flex: 1; min-width: 0; }
.nds-company__name { font-size: 17px; font-weight: 650; color: var(--nd-ink); }
.nds-company__meta { margin-top: 2px; font-size: 14px; color: var(--nd-muted); }
.nds-safety { display: flex; gap: 16px; margin-top: var(--nds-section); padding: 20px; border-radius: var(--nd-radius-lg); background: var(--nd-info-soft, var(--nd-surface-2)); color: var(--nd-ink-2); font-size: 14px; line-height: 1.55; }
.nds-safety__icon { color: var(--nd-info, var(--nd-accent)); }
.nds-safety__title { margin-bottom: 4px; font-size: 15px; font-weight: 650; color: var(--nd-ink); }
/* Job template */
.nds-job { padding-top: 8px; }
.nds-job__head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 24px 0 40px; border-bottom: 1px solid var(--nd-line); }
.nds-job__logo { width: 72px; height: 72px; border-radius: var(--nd-radius-lg); box-shadow: inset 0 0 0 1px var(--nd-line); }
.nds-job__logo img { border-radius: var(--nd-radius-lg); }
.nds-job__company { font-size: 15px; font-weight: 600; color: var(--nd-ink-2); }
.nds-title--job { margin-top: 4px; font-size: clamp(30px, 1.6vw + 18px, 44px); }
.nds-job__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--nd-ink-2); font-size: 15px; }
.nds-job__facts li { display: inline-flex; align-items: center; gap: 6px; }
.nds-job__facts li + li::before { content: ""; width: 4px; height: 4px; margin-right: 14px; border-radius: 50%; background: var(--nd-subtle); }
.nds-job__pay { color: var(--nd-ink); font-weight: 650; }
.nds-job__pay .nds-icon, .nds-job__closing .nds-icon { color: var(--nd-muted); }
.nds-job__closing.is-closed { color: var(--nd-danger-ink, var(--nd-danger)); font-weight: 600; }
.nds-job__cta { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.nds-grid--job { padding-top: 8px; }
.nds-register--job .nds-rows { margin-top: 0; }
/* Product template */
.nds-prod { padding-top: 8px; }
.nds-prod__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: 56px; align-items: start; padding-top: 16px; }
.nds-prod__main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--nd-radius-xl, 20px); background: var(--nd-surface-2); }
.nds-prod__mainbtn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.nds-prod__main.is-sold img { filter: grayscale(0.6); opacity: 0.8; }
.nds-prod__flag { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--nd-ink); color: #fff; font-size: 13px; font-weight: 700; }
.nds-prod__flag--reserved { background: var(--nd-warning); }
.nds-prod__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.nds-prod__thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; cursor: zoom-in; transition: opacity var(--nd-dur-1) var(--nd-ease); }
.nds-prod__thumb:hover { opacity: 0.85; }
.nds-prod__side .nds-sticky { gap: 20px; }
.nds-title--prod { font-size: clamp(26px, 1vw + 18px, 34px); }
.nds-prod__price { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.nds-prod__amount { font-size: 32px; font-weight: 750; letter-spacing: -0.03em; color: var(--nd-ink); font-variant-numeric: tabular-nums; }
.nds-prod__ptype { font-size: 14px; font-weight: 550; color: var(--nd-muted); }
.nds-prod__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.nds-prod__where { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--nd-muted); font-size: 14px; }
.nds-prod__cta { display: grid; gap: 8px; }
.nds-prod__rows .nds-rows { margin: 0; }
.nds-prod__actions { display: flex; justify-content: flex-start; }
.nds-prod__body { max-width: 760px; padding-bottom: 24px; }
@media (max-width: 959.98px) {
.nds-prod__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.nds-job__head { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.nds-job__logo { width: 56px; height: 56px; border-radius: 14px; }
}
@media (max-width: 767.98px) {
.nds-prod__main { margin-inline: calc(-1 * var(--nds-gutter, 20px)); border-radius: 0; aspect-ratio: 1; }
.nds-prod__thumbs { grid-template-columns: repeat(5, 56px); overflow-x: auto; }
.nds-prod__amount { font-size: 28px; }
.nds-job__facts li + li::before { display: none; }
.nds-job__facts { gap: 8px 16px; }
.nds-hours { max-width: none; }
}
.nds-prod__flag { top: auto; bottom: 16px; }
.nds-bar__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
.nds-job__head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; }
.nds-job__logo { width: 48px; height: 48px; border-radius: 12px; }
.nds-job__facts { gap: 6px 14px; font-size: 14px; }
}
.nds-hours th { width: 32%; } .nds-hours td { text-wrap: balance; }
/* Phones: the floating back/share buttons own the top corners of the hero image,
so the Sold / Reserved flag moves to the bottom-left. */
@media (max-width: 767px) {
.nds-prod__flag { top: auto; bottom: 14px; left: 14px; }
}
/* ===================================================================
* Product (marketplace) — v2 layout
* Photos + content left, a buy panel right that stays in view.
* Phones: photos → buy panel → content.
* ================================================================= */
.nds-prod2__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
grid-template-areas: "media aside" "content aside";
column-gap: 56px;
row-gap: 48px;
align-items: start;
padding-top: 16px;
}
.nds-prod2__media { grid-area: media; min-width: 0; }
.nds-prod2__content { grid-area: content; min-width: 0; max-width: 720px; padding-bottom: 32px; }
.nds-prod2__aside { grid-area: aside; align-self: stretch; min-width: 0; }
.nds-prod2__sticky {
position: sticky;
top: calc(var(--nd-sticky-top, 0px) + 24px);
display: grid;
gap: 16px;
}
.nds-prod2 .nds-prod__main { aspect-ratio: 4 / 3; overflow: hidden; }
.nds-prod2__count {
position: absolute; right: 14px; bottom: 14px; z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: 999px;
background: rgba(15, 23, 42, 0.72); color: #fff;
font-size: 12px; font-weight: 650; backdrop-filter: blur(8px);
}
/* The buy panel */
.nds-prod2__buy {
display: grid;
gap: 20px;
padding: 28px;
border: 1px solid var(--nd-line);
border-radius: var(--nd-radius-xl, 20px);
background: var(--nd-surface);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -24px rgba(15, 23, 42, 0.18);
}
.nds-prod2 .nds-title--prod { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.nds-prod2 .nds-prod__price { margin-top: 14px; }
.nds-prod2 .nds-prod__amount { font-size: 34px; }
.nds-prod2__facts { display: grid; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--nd-line); }
.nds-prod2__facts li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--nd-line); font-size: 14px; }
.nds-prod2__k { color: var(--nd-muted); }
.nds-prod2__v { display: inline-flex; align-items: center; gap: 6px; color: var(--nd-ink); font-weight: 600; text-align: right; }
.nds-prod2__v--available .nds-dot { background: var(--nd-success); }
.nds-prod2__v--reserved .nds-dot { background: var(--nd-warning); }
.nds-prod2__v--sold .nds-dot { background: var(--nd-muted); }
.nds-prod2 .nds-prod__cta { display: grid; gap: 10px; }
/* Seller inside the panel: compact, no repeated Message button */
.nds-prod2__seller .nds-section { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--nd-line); }
.nds-prod2__seller .nds-h2 { display: none; }
.nds-prod2__seller .nds-host__actions { margin-top: 0; }
.nds-prod2__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.nds-prod2__listed { font-size: 13px; color: var(--nd-muted); }
.nds-prod2__foot .nds-prod__actions { margin: 0; }
.nds-prod2__safety .nds-section { margin: 0; }
.nds-prod2__safety .nds-safety, .nds-prod2__safety [class*="safety"] { font-size: 13px; }
/* Content column rhythm */
.nds-prod2__content > .nds-section + .nds-section { margin-top: 48px; }
@media (max-width: 1100px) {
.nds-prod2__layout { column-gap: 32px; grid-template-columns: minmax(0, 1fr) 340px; }
.nds-prod2__buy { padding: 22px; }
}
@media (max-width: 959px) {
.nds-prod2__layout {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "media" "aside" "content";
row-gap: 24px;
}
.nds-prod2__sticky { position: static; }
.nds-prod2__content { max-width: none; }
}
@media (max-width: 767px) {
.nds-prod2__buy { padding: 0; border: 0; box-shadow: none; background: transparent; }
.nds-prod2 .nds-prod__amount { font-size: 30px; }
.nds-prod2__count { bottom: 14px; right: 14px; }
}
/* Marketplace: contact goes through "Message seller" — don't expose phone/email/website rows. */
.nds-prod2__seller .nds-contact { display: none; }
.nds-prod2__seller .nds-host__actions { margin-top: 10px; }
.nds-prod2__media + .nds-prod2__content, .nds-prod2__content { margin-top: -8px; }
@media (min-width: 960px) { .nds-prod2__layout { row-gap: 40px; } }
/* Phones: share already floats on the photo — don't repeat it in the panel. */
@media (max-width: 767px) { .nds-prod2__foot .nds-prod__actions { display: none; } }
/* Venue/place: photo-led hero (map lives in the Location section). */
.nds-place__map--photo { background: var(--nd-surface-2); overflow: hidden; }
.nds-place__map--photo > img, .nds-place__map--photo picture, .nds-place__map--photo .nds-img, .nds-place__map--photo > .nds-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nds-place__map--photo img { width: 100%; height: 100%; object-fit: cover; }
/* Polish pass: wrapping on narrow screens */
.nds-sectionhead { flex-wrap: wrap; row-gap: 8px; }
.nds-openpill { white-space: nowrap; }
.nds-hours + .nds-note { max-width: 480px; }
@media (max-width: 767.98px) {
.nds-hours + .nds-note { max-width: none; }
/* Company card: the website button drops under the name instead of squeezing it. */
.nds-company { flex-wrap: wrap; }
.nds-company > .nd-btn { flex: 1 0 100%; justify-content: center; }
/* Sticky bar: long pay ranges wrap instead of being cut off mid-word. */
.nds-bar__meta { white-space: normal; overflow: visible; }
.nds-bar__price { line-height: 1.25; }
}
/* Exactly three speakers: one full row (editorial's 2-up and conference's 4-up left an orphan / an empty slot). */
@media (min-width: 768px) {
.nds-ed__read .nds-speakergrid:has(> li:nth-child(3):last-child),
.nds-conf .nds-speakergrid:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nds-ed__read .nds-speakergrid:has(> li:nth-child(3):last-child) { gap: 32px 20px; }
}
/* ---------------------------------------------------------------------------
* 1.6 polish: save, summary, seller row, specs, safety tip, approximate area
* ------------------------------------------------------------------------- */
.nds-save svg { transition: transform var(--nd-dur-2) var(--nd-ease-spring, var(--nd-ease)), fill var(--nd-dur-2) var(--nd-ease); }
.nds-save[aria-pressed="true"] { color: var(--nd-accent); }
.nds-save[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.nds-save:active svg { transform: scale(0.88); }
}
.nds-bar__save { flex: none; }
/* Summary: price → condition chip → one location line. */
.nds-prod2__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.nds-prod2__loc { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--nd-ink-2); font: 500 14px/1.4 var(--nd-font); }
.nds-prod2__loc svg { flex: none; color: var(--nd-muted); }
.nds-prod2 .nds-prod__ptype { color: var(--nd-muted); font-size: 14px; font-weight: 500; }
/* Seller row: the whole row is the link. */
.nds-seller-wrap { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--nd-line); }
.nds-seller {
display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 -8px; padding: 6px 8px;
border-radius: var(--nd-radius); color: var(--nd-ink); text-decoration: none;
transition: background-color var(--nd-dur-2) var(--nd-ease);
}
a.nds-seller:hover { background: var(--nd-surface-2); }
a.nds-seller:focus-visible { outline: none; box-shadow: var(--nd-ring); }
.nds-seller__avatar { width: 44px; height: 44px; flex: none; font-size: 15px; }
.nds-seller__id { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nds-seller__name { overflow: hidden; color: var(--nd-ink); font: 600 15px/1.3 var(--nd-font); text-overflow: ellipsis; white-space: nowrap; }
.nds-seller__meta { color: var(--nd-muted); font: 500 13px/1.35 var(--nd-font); }
.nds-seller__chev { display: grid; place-items: center; flex: none; color: var(--nd-subtle); }
a.nds-seller:hover .nds-seller__chev { color: var(--nd-ink-2); }
/* Specs: one two-column grid of 44px rows (label left, value right). */
.nds-facts--tight { gap: 0 32px; }
.nds-facts--tight .nds-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 0; }
.nds-facts--tight .nds-fact dd { text-align: right; }
/* "Buy safely" is a neutral tip, not an alert. */
.nds-safety { background: var(--nd-surface-2); color: var(--nd-ink-2); box-shadow: inset 0 0 0 1px var(--nd-line); }
.nds-safety__icon { color: var(--nd-muted); }
/* Approximate area for private sellers: a designed area, never a pin. */
.nds-venue__map--area {
display: grid; place-items: center;
background-color: var(--nd-surface-2);
background-image: radial-gradient(var(--nd-line-strong) 1px, transparent 1.2px);
background-size: 16px 16px;
background-position: center;
}
.nds-venue__areaRing {
grid-area: 1 / 1; width: 168px; height: 168px; border-radius: 50%;
border: 1.5px dashed var(--nd-accent-line, var(--nd-line-strong));
background: color-mix(in srgb, var(--nd-accent-soft) 70%, transparent);
}
.nds-venue__areaLabel {
grid-area: 1 / 1; padding: 6px 12px; border-radius: 999px;
background: var(--nd-surface); box-shadow: var(--nd-shadow-1), 0 0 0 1px var(--nd-line);
color: var(--nd-ink-2); font: 600 13px/1.2 var(--nd-font);
}
.nds-venue__name--icon { display: flex; align-items: center; gap: 8px; }
.nds-venue__name--icon svg { flex: none; color: var(--nd-muted); }
/* Phone hero: edge to edge, square corners, a "1 / n" pill. */
@media (max-width: 767px) {
.nds-prod2__layout { padding-top: 0; }
/* Flush under the nav: no strip of canvas between the bar and the photo. */
.nds-wrap.nds-prod2 { padding-top: 0; }
/* The photo button carried a 10px radius of its own, which rounded the full-width photo's corners. */
.nds-prod2 .nds-prod__main, .nds-prod2 .nds-prod__mainbtn, .nds-prod2 .nds-prod__main img { border-radius: 0; }
.nds-prod2 .nds-prod__thumbs { padding-inline: var(--nds-gutter); }
.nds-venue__areaRing { width: 132px; height: 132px; }
}
.nds-prod2__count { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* ---------------------------------------------------------------------------
* 1.6 polish (round 2): short items never sit in one narrow column (DESIGN.md rule 6).
* Delivery & returns, payment, amenities, services and benefits: an auto-fill grid that
* reads left to right (2–3 columns in the content column, 2 on tablets, 1 on small phones
* only when the rows are long), one meaningful icon per row on a shared baseline.
* ------------------------------------------------------------------------- */
.nds-shortlist {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
gap: var(--nd-space-3, 12px) var(--nd-space-6, 24px);
margin: 0;
padding: 0;
list-style: none;
}
.nds-shortlist__item {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
min-height: 44px;
margin: 0;
color: var(--nd-ink);
font: 500 15px/1.4 var(--nd-font);
}
.nds-shortlist__icon {
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
border-radius: var(--nd-radius-sm, 10px);
background: var(--nd-surface-2);
box-shadow: inset 0 0 0 1px var(--nd-line);
color: var(--nd-ink-2);
}
.nds-shortlist__text { min-width: 0; overflow-wrap: anywhere; }
/* "No returns" reads as a muted negative, never as an error. */
.nds-shortlist__item--undo-off .nds-shortlist__icon,
.nds-shortlist__item--undo-off .nds-shortlist__text { color: var(--nd-muted); }
/* 1–2 rows stay inline as chips. */
.nds-shortlist--inline { display: flex; flex-wrap: wrap; gap: 8px; }
.nds-shortlist--inline .nds-shortlist__item {
min-height: 36px; gap: 8px; padding: 0 14px 0 6px; border-radius: 999px;
background: var(--nd-surface-2); box-shadow: inset 0 0 0 1px var(--nd-line); font-size: 14px;
}
.nds-shortlist--inline .nds-shortlist__icon { width: 26px; height: 26px; border-radius: 50%; background: var(--nd-surface); box-shadow: none; }
.nds-shortlist + .nds-note { margin-top: 16px; }
/* Short requirement lists: the same grid, ticks kept. */
.nds-ticks--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--nd-space-3, 12px) var(--nd-space-6, 24px); }
/* Dark (festival) template. */
.nds--festival .nds-shortlist__item { color: inherit; }
.nds--festival .nds-shortlist__icon { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); }
@media (max-width: 479.98px) {
/* Small phones: two columns while rows are short, one when they wrap. */
.nds-shortlist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 16px; }
.nds-shortlist__item { font-size: 14px; gap: 10px; }
.nds-shortlist__icon { width: 32px; height: 32px; }
}
/* More like this: the designed media fallback sits under every photo, so a tile is never a blank
grey box while a lazy image loads or when it fails; the photo fades in over it. */
.nds-relcard__img::before { display: none; }
.nds-relcard__img .nds-relcard__fallback { position: absolute; inset: 0; border-radius: inherit; }
.nds-relcard__img img { position: relative; z-index: 1; display: block; }
.nds-img img.is-broken { visibility: hidden; }
/* Calmer hand-off from the content to the rail (was 96px margin + 64px padding). */
.nds-related { margin-top: 48px; padding-top: 56px; }
@media (max-width: 767.98px) { .nds-related { margin-top: 40px; padding-top: 40px; } }
/* ---------------------------------------------------------------------------
* Message composer (R2-B request): bottom sheet on phones, 480px dialog from 768px.
* ------------------------------------------------------------------------- */
.nds-msg { position: fixed; inset: 0; z-index: 105; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: var(--nd-font); }
.nds-msg[hidden] { display: none !important; }
.nds-msg__scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.56); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nds-msg__panel {
position: relative; display: grid; gap: 16px; width: 100%; max-width: 480px; max-height: calc(100dvh - 48px); overflow-y: auto;
padding: 24px; border-radius: var(--nd-radius-xl, 24px); background: var(--nd-surface); color: var(--nd-ink);
box-shadow: var(--nd-shadow-4), 0 0 0 1px var(--nd-line);
}
.nds-msg__grab { display: none; }
.nds-msg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nds-msg__title { margin: 0; color: var(--nd-ink); font: 700 20px/1.25 var(--nd-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.nds-msg__close { flex: none; }
.nds-msg__about { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--nd-radius, 12px); background: var(--nd-surface-2); box-shadow: inset 0 0 0 1px var(--nd-line); }
.nds-msg__thumb { display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--nd-radius-sm, 10px); background: var(--nd-surface); color: var(--nd-subtle); }
.nds-msg__thumb img { width: 100%; height: 100%; object-fit: cover; }
.nds-msg__listing { display: grid; gap: 2px; min-width: 0; }
.nds-msg__label { color: var(--nd-muted); font: 500 13px/1.3 var(--nd-font); }
.nds-msg__name { overflow: hidden; color: var(--nd-ink); font: 600 15px/1.3 var(--nd-font); text-overflow: ellipsis; white-space: nowrap; }
.nds-msg__price { color: var(--nd-ink-2); font: 600 13px/1.3 var(--nd-font); font-variant-numeric: tabular-nums; }
.nds-msg__form { display: grid; gap: 16px; margin: 0; }
.nds-msg__field { display: grid; gap: 8px; }
.nds-msg__field .nd-input, .nds-msg__field .nd-textarea { width: 100%; font-size: 16px; }
.nds-msg__field .nd-textarea { min-height: 128px; resize: vertical; }
.nds-msg__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.nds-msg__actions .nd-btn { gap: 8px; min-height: 44px; padding-inline: 20px; }
.nds-msg-enter, .nds-msg-leave { transition: transform var(--nd-dur-3) var(--nd-ease), opacity var(--nd-dur-2) var(--nd-ease); }
.nds-msg-from { opacity: 0; transform: translateY(12px) scale(0.98); }
.nds-msg-to { opacity: 1; transform: none; }
@media (max-width: 767.98px) {
.nds-msg { align-items: flex-end; padding: 0; }
.nds-msg__panel {
max-width: none; max-height: calc(100dvh - 32px); padding: 8px 16px calc(16px + var(--nd-safe-bottom, env(safe-area-inset-bottom, 0px)));
border-radius: var(--nd-radius-xl, 24px) var(--nd-radius-xl, 24px) 0 0;
}
.nds-msg__grab { display: block; justify-self: center; width: 40px; height: 4px; margin: 4px 0 4px; border-radius: 999px; background: var(--nd-line-strong); }
.nds-msg-from { opacity: 1; transform: translateY(100%); }
.nds-msg__actions { display: grid; grid-template-columns: 1fr 2fr; }
.nds-msg__actions .nd-btn { justify-content: center; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .nds-msg-enter, .nds-msg-leave { transition: none; } }
/* ---------------------------------------------------------------------------
* 1.6 round 3 (DESIGN.md rule 6): job role lists and venue hours use their column.
* ------------------------------------------------------------------------- */
/* Longer short rows ("Partner with engineering and product on weekly releases"): two columns. */
.nds-shortlist--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.nds-shortlist--wide .nds-shortlist__item { align-items: flex-start; }
.nds-shortlist--wide .nds-shortlist__text { padding-top: 8px; }
@media (max-width: 479.98px) {
.nds-shortlist--wide { grid-template-columns: minmax(0, 1fr); }
.nds-shortlist--wide .nds-shortlist__text { padding-top: 6px; }
}
/* Opening hours use the whole content column (row rules span it); hours start at one third, so the
eye never travels across an empty middle. */
.nds-hours { max-width: none; }
.nds-hours th { width: 34%; padding-right: 16px; }
.nds-hours td { text-align: left; }
.nds-hours + .nds-note { max-width: none; }