/* ── NAALD · tattoo artist & private studio ────────────────────────────────
   THE STRUCTURAL MOVE: a full-viewport portrait stage with the type held hard
   LEFT and never crossing into the picture, and six landscape work tiles welded
   flush to its floor — no gutter, no hairline, no change of ground — so the
   first scroll is pure photograph with no heading on it. Everything under the
   weld contracts into one bone column parted by warm hairlines: a numbered year
   stack, two counter figures far larger than anything else on the page, six
   guest-studio interiors where a logo strip would be, and four award rows.
   Photography is drained to grey so oxidised iron-red is the only colour, and
   it is spent on three things only — the links, the buttons and those figures. */
body.t-naald.ws-body {
  --bg: #f6f3ee; --fg: #3b3733; --heading: #0c0b0a; --text: #3b3733; --muted: #837c73;
  --nd-line: #dcd5c9; --nd-red: #a03a28;
  --hero-a: rgba(10, 9, 8, .28); --hero-b: rgba(10, 9, 8, .58);
}
body.t-naald { background: var(--bg); }

/* the bar — type only, never position: wordmark left, six links right */
body.t-naald .ws-brand { color: var(--heading); text-transform: uppercase; letter-spacing: .34em; font-size: 13px; font-weight: 800; }
body.t-naald .ws-nav-links a { color: var(--heading); opacity: .7; text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 700; }
body.t-naald .ws-nav-links a:hover, body.t-naald .ws-nav-links a.on { color: var(--nd-red); opacity: 1; }

/* the stage — one whole viewport, portrait carried on the right, copy kept left */
body.t-naald .ws-hero { min-height: 100vh; background-position: right center; }
body.t-naald .ws-hero h1 { font-size: clamp(40px, 7vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: .97; max-width: 13ch; text-shadow: none; }

/* red 1 of 3 — flat slabs, never a border */
body.t-naald.ws-body .btn.brand, body.t-naald.ws-body .ws-hero-cta.btn.brand { background: var(--nd-red); color: #f8f5f0; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 700; padding: 16px 32px; }
body.t-naald.ws-body .ws-cta .btn.brand { background: #0c0b0a; color: #f6f3ee; }

/* one bone ground the whole way down, blocks parted by warm hairlines */
body.t-naald .ws-section { padding: 92px 0; border-top: 1px solid var(--nd-line); }
body.t-naald.ws-body .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }
body.t-naald .ws-h2, body.t-naald .ws-story-copy h2 { color: var(--heading); font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; text-align: left; margin: 0 0 22px; }
body.t-naald .ws-contact .ws-h2, body.t-naald .ws-contact .ws-sub { text-align: center; }
body.t-naald .ws-story-copy p, body.t-naald .ws-feature p, body.t-naald .ws-list li, body.t-naald .ws-col p, body.t-naald .ws-quote blockquote { color: var(--text); font-size: 15.5px; line-height: 1.8; }
body.t-naald .ws-sub { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
body.t-naald .ws-logos-heading { color: var(--muted); text-align: left; letter-spacing: .22em; font-size: 11px; }

/* THE WELD — no padding, no gutter and no rule between the stage and the six */
body.t-naald .ws-photogrid { padding: 0; border-top: 0; }
body.t-naald .ws-photogrid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-naald .ws-photogrid-grid img { aspect-ratio: 3 / 2; }
body.t-naald .ws-photogrid-grid img, body.t-naald .ws-story-media img, body.t-naald .ws-logos-row img { border-radius: 0; filter: grayscale(1) contrast(1.06); }

/* the About reverses to contained width with the big image locked LEFT */
body.t-naald .ws-story-grid { grid-template-columns: 6fr 5fr; gap: 56px; }

/* the career timeline — a year stack, each row on its own hairline */
body.t-naald .ws-list { padding-left: 0; list-style: none; }
body.t-naald .ws-list li { border-top: 1px solid var(--nd-line); padding: 17px 0 16px; margin: 0; }

/* red 2 of 3 — the two figures that break the page's scale */
body.t-naald .ws-col-h { color: var(--nd-red); font-size: clamp(58px, 9vw, 128px); font-weight: 800; letter-spacing: -.06em; line-height: .88; margin: 0 0 16px; font-variant-numeric: tabular-nums; }

/* the logo strip rebuilt as six uniform photographs — lettering is where renderers fail */
body.t-naald .ws-logos-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; opacity: 1; }
body.t-naald .ws-logos-row img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* awards: four stacked rows, the icon in its own gutter */
body.t-naald .ws-features-grid { grid-template-columns: 1fr; gap: 0; }
body.t-naald .ws-feature { display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; text-align: left; padding: 26px 0 24px; border-top: 1px solid var(--nd-line); }
body.t-naald .ws-feature-icon { color: var(--muted); margin: 0; }
body.t-naald .ws-feature p { grid-column: 2; margin: 7px 0 0; }

/* four quotes, so the row closes; no card, no red quote mark */
body.t-naald .ws-testimonials-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-naald .ws-quote { background: transparent; border: 0; border-top: 2px solid var(--heading); border-radius: 0; box-shadow: none; padding: 18px 0 0; }
body.t-naald .ws-quote blockquote::before { content: none; }

/* the centred close — one field per row, ruled not boxed */
body.t-naald .ws-field input, body.t-naald .ws-field select, body.t-naald .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--nd-line); border-radius: 0; color: var(--heading); padding: 12px 2px; }

@media (max-width: 760px) {
  body.t-naald .ws-photogrid-grid, body.t-naald .ws-testimonials-grid, body.t-naald .ws-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-naald .ws-logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-naald .ws-story-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* night — the same room after the shutter comes down, the red one stop hotter */
html[data-theme="dark"] body.t-naald.ws-body {
  --bg: #121110; --fg: #a49d94; --heading: #f3efe8; --text: #a49d94; --muted: #7d766d;
  --nd-line: #2a2724; --nd-red: #c8513a;
  --hero-a: rgba(6, 5, 5, .32); --hero-b: rgba(6, 5, 5, .64);
}
html[data-theme="dark"] body.t-naald { background: var(--bg); }