/* NewSpaces.org — layout on top of broadsheet.css (tokens + components). */
body { background: var(--color-bg); color: var(--color-text); text-wrap: pretty; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ns-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.ns-muted, .ns-topline, .ns-dateline, .ns-kicker, .ns-meta, .ns-row-meta, .ns-aside, .ns-foot-row, .ns-quote figcaption {
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.ns-topline, .ns-dateline, .ns-kicker, .ns-meta, .ns-row-meta, .ns-aside-label {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

/* masthead */
.ns-topline { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; padding-top: 20px; }
.ns-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ns-nav a { color: inherit; }
.ns-brand, .ns-brand:hover { display: block; color: var(--color-text); text-decoration: none; padding: clamp(28px,5vw,56px) 0 clamp(20px,3vw,32px); }
.ns-title { margin: 0 0 0 -0.04em; font-size: clamp(48px, 10.5vw, 150px); line-height: 0.9; letter-spacing: -0.035em; }
.ns-title .cmyk-head { display: block; }
.ns-rule-head { height: 5px; border: 0; margin: 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-text); }
.ns-rule-cut { height: 0; border: 0; margin: 0; border-top: 1px solid var(--color-text); }
.ns-dateline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 28px; padding: 12px 0; }

/* shared */
.ns-meta { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ns-meta-sm { font-size: 12px; }
.ns-kicker-link, .ns-spot { color: var(--color-accent-700); }
.ns-kicker { display: block; margin-bottom: 24px; }
.ns-h1 { margin: 0 0 0 -0.035em; font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -0.03em; }
.ns-h2 { margin: 0; font-size: 40px; letter-spacing: -0.02em; }
.ns-lede { font-size: 19px; line-height: 1.6; margin: 24px 0 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.ns-justify { margin: 0; font-size: 15.5px; line-height: 1.7; text-align: justify; hyphens: auto; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.ns-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.ns-actions .btn:hover { text-decoration: none; }
.ns-actions .btn-primary, .ns-actions .btn-primary:hover { color: var(--color-bg); }
.ns-plates, .ns-screen { margin: 0; }
.ns-plates { overflow: visible; }
.ns-plates .print, .ns-screen { aspect-ratio: var(--ratio, 4/3); }
.ns-plates img, .ns-screen img, .ns-thumb img, .ns-arow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-thumb { display: block; aspect-ratio: 3/2; }

/* home */
.ns-lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px clamp(28px,5vw,80px); align-items: end; padding: 56px 0 84px; }
.ns-lead-fig { display: block; }
.ns-lead-copy { max-width: 52ch; }
.ns-lead-copy .ns-meta { margin-bottom: 20px; }
.ns-lead-title { margin: 0 0 0 -0.03em; font-size: clamp(40px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.025em; }
.ns-lead-noimg .ns-lead-copy { max-width: 760px; }
.ns-lead-title a, .ns-second-title a { color: var(--color-text); }
.ns-seconds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 48px clamp(28px,4vw,56px); padding-bottom: 96px; }
.ns-second { display: flex; flex-direction: column; gap: 16px; }
.ns-second-title { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
.ns-elements { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 48px clamp(28px,6vw,112px); padding-bottom: 104px; }
.ns-index { display: flex; flex-direction: column; gap: 6px; }
.ns-ix { display: flex; align-items: baseline; gap: 10px; color: var(--color-text); font-size: 30px; line-height: 1.35; letter-spacing: -0.015em; }
.ns-ix:hover { color: var(--color-accent-700); text-decoration: none; }
.ns-ix-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.ns-ix-leader { flex: 1; min-width: 28px; align-self: flex-end; margin-bottom: 0.38em; border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 45%, transparent); }
.ns-ix-num { font-size: 17px; font-feature-settings: "pnum" 1; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.ns-quote { margin: 0; align-self: center; }
.ns-quote blockquote { margin: 0; font-style: italic; font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.38; letter-spacing: -0.01em; max-width: 28ch; text-indent: -0.45em; }
.ns-quote figcaption { margin-top: 28px; font-size: 15.5px; line-height: 1.6; }
.ns-list-sec { padding-bottom: 96px; }
.ns-list-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.ns-list { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.ns-row { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; color: var(--color-text); }
.ns-row:hover { color: var(--color-accent-700); text-decoration: none; }
.ns-row-title { font-size: 22px; line-height: 1.3; font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.01em; }
.ns-row-meta { color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* article */
.ns-article { padding: 56px 0 96px; }
.ns-article-head { max-width: 880px; }
.ns-article-head .ns-meta { margin-bottom: 24px; gap: 14px; }
.ns-article-title { margin: 0 0 0 -0.035em; font-size: clamp(44px, 7vw, 96px); line-height: 1.02; letter-spacing: -0.03em; }
.ns-article-lede { margin: 32px 0 0; font-style: italic; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.5; max-width: 40ch; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.ns-hero { margin-top: 56px; }
.ns-article-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 64ch); gap: 40px clamp(28px,5vw,80px); margin-top: 64px; }
@media (max-width: 760px) { .ns-article-grid { grid-template-columns: minmax(0, 1fr); } .ns-aside { order: 2; } }
.ns-aside { font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; gap: 20px; }
.ns-aside-label { font-size: 12px; margin-bottom: 4px; }
.ns-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ns-tags .tag:hover { text-decoration: none; }
.ns-body { min-width: 0; font-size: 19px; line-height: 1.7; hyphens: auto; }
.ns-body > * { margin: 0 0 24px; }
.ns-body h2, .ns-body h3 { margin-top: 48px; line-height: 1.2; }
.ns-body h2 { font-size: 30px; } .ns-body h3 { font-size: 24px; }
.ns-body img { display: block; width: 100%; height: auto; filter: grayscale(0.35) contrast(1.15); margin: 16px 0 0; }
.ns-body blockquote { margin: 40px 0; font-style: italic; font-size: 28px; line-height: 1.4; letter-spacing: -0.01em; }
.ns-body blockquote p { margin: 0; }
.ns-body ol, .ns-body ul { padding-left: 1.2em; }
.ns-body li { margin-bottom: 8px; }
.ns-related { padding-bottom: 96px; }
.ns-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px clamp(28px,4vw,56px); }
.ns-related-item { display: flex; flex-direction: column; gap: 14px; color: var(--color-text); }
.ns-related-item:hover { color: var(--color-accent-700); text-decoration: none; }
.ns-related-title { font-size: 22px; line-height: 1.2; font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.ns-page { padding: 56px 0 96px; max-width: 64ch; }
.ns-page .ns-body { margin-top: 40px; }

/* archive */
.ns-archive-head { padding: 56px 0 40px; max-width: 760px; }
.ns-filters { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 48px; }
.ns-filters .tag:hover { text-decoration: none; }
.ns-filters .tag span { opacity: 0.7; margin-left: 4px; }
.ns-archive { display: flex; flex-direction: column; gap: 36px; padding-bottom: 104px; }
.ns-arow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; color: var(--color-text); }
.ns-arow[hidden] { display: none; }
.ns-arow:hover { color: var(--color-accent-700); text-decoration: none; }
.ns-arow-thumb { aspect-ratio: 3/2; background: var(--color-neutral-100); }
.ns-arow-copy { display: flex; flex-direction: column; gap: 6px; max-width: 68ch; }
.ns-arow-title { font-size: 24px; line-height: 1.2; font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.01em; }
.ns-arow-excerpt { font-size: 15.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 75%, transparent); }

/* footer */
.ns-foot { padding-bottom: 48px; }
.ns-foot .ns-rule-head { margin-bottom: 20px; }
.ns-foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; font-size: 13px; line-height: 1.6; }
.ns-foot-links { display: flex; gap: 20px; }

/* eco look (default): warm paper, forest ink, sea-green accent, photos in natural colour */
[data-look="eco"] {
  --color-bg: oklch(0.965 0.014 95);
  --color-text: oklch(0.27 0.03 160);
  --color-accent: oklch(0.52 0.09 172);
  --color-accent-600: oklch(0.47 0.085 172);
  --color-accent-700: oklch(0.42 0.08 172);
  --color-accent-800: oklch(0.35 0.07 172);
  --color-accent-100: oklch(0.93 0.035 165);
  --color-accent-2-700: oklch(0.46 0.1 65);
  --color-neutral-100: oklch(0.92 0.02 110);
}
[data-look="eco"] .halftone { filter: none; }
[data-look="eco"] .halftone::after { display: none; }
[data-look="eco"] .halftone img, [data-look="eco"] .ns-screen img, [data-look="eco"] .ns-body img { border-radius: var(--radius-md); }
[data-look="eco"] .ns-body img { filter: none; }
.ns-tld { color: var(--color-accent); }