/* ELNIKON — tokens from the ELNIKON design system (tokens.json) */
@font-face { font-family: "Lexend Exa"; src: url("/fonts/LexendExa-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("/fonts/Lexend-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --surface: #f3f4f3;
  --surface-raised: #ffffff;
  --surface-sunken: #e7e9e8;
  --carbon: #1b1e1f;
  --on-carbon: #f3f4f3;
  --line: #d3d7d6;
  --line-strong: #7a8180;
  --ink: #1b1e1f;
  --graphite: #535353;
  --ink-muted: var(--graphite);
  --ink-subtle: #6a6f6e;
  --copper: #a84b22;
  --copper-hover: #8f3e1b;
  --copper-soft: #f5e5db;
  --on-copper: #ffffff;
  --steel: #4d5d6c;
  --steel-soft: #e2e7ec;
  --verdigris: #1f6f63;
  --verdigris-soft: #dcefeb;
  --division-development: var(--copper);
  --division-housewares: var(--steel);
  --division-rnd: var(--verdigris);
  --success: var(--verdigris);
  --success-soft: var(--verdigris-soft);
  --info: var(--steel);
  --info-soft: var(--steel-soft);
  --warning: #7a4f00;
  --warning-soft: #fbefd2;
  --danger: #9b1c1c;
  --danger-soft: #f8e1df;
  --link: var(--copper);
  --shadow-sm: 0 1px 2px #1b1e1f14;
  --shadow-lg: 0 8px 24px -4px #1b1e1f29;
  --focus-ring: 0 0 0 2px #f3f4f3, 0 0 0 4px #a84b22;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-0: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-full: 9999px;
  --stroke-hairline: 1px;
  --stroke-rule: 2px;
  --stroke-marker: 4px;
  --container-max: 1280px;
  --container-text: 720px;
  --header-height: 72px;
  --font-display: "Lexend Exa", "Lexend", system-ui, sans-serif;
  --font-sans: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
  --surface: #111314;
  --surface-raised: #1a1d1e;
  --surface-sunken: #0b0c0d;
  --carbon: #2a2f31;
  --on-carbon: #eceeed;
  --line: #2c3133;
  --line-strong: #6b7476;
  --ink: #eceeed;
  --graphite: #a9adac;
  --ink-muted: var(--graphite);
  --ink-subtle: #8d9291;
  --copper: #e0895e;
  --copper-hover: #eaa27e;
  --copper-soft: #3a2216;
  --on-copper: #111314;
  --steel: #a3b4c4;
  --steel-soft: #1e2730;
  --verdigris: #5cc2b0;
  --verdigris-soft: #123430;
  --division-development: var(--copper);
  --division-housewares: var(--steel);
  --division-rnd: var(--verdigris);
  --success: var(--verdigris);
  --success-soft: var(--verdigris-soft);
  --info: var(--steel);
  --info-soft: var(--steel-soft);
  --warning: #f0b44a;
  --warning-soft: #352610;
  --danger: #f2867d;
  --danger-soft: #3d1614;
  --link: var(--copper);
  --shadow-sm: 0 1px 2px #00000099;
  --shadow-lg: 0 12px 28px -4px #000000cc;
  --focus-ring: 0 0 0 2px #111314, 0 0 0 4px #e0895e;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--copper); color: var(--on-copper); padding: var(--space-2) var(--space-4); border-radius: var(--radius-xs); text-decoration: none; font-weight: 500; }
.skip:focus { top: var(--space-4); }
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 640px) { .wrap { padding: 0 var(--space-4); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.display-xl { font-family: var(--font-display); font-size: clamp(36px, 5.2vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.02em; }
.display { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.heading { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.subheading { font-size: 18px; line-height: 28px; font-weight: 500; }
.lead { font-size: 18px; line-height: 30px; color: var(--ink-muted); max-width: 40em; }
.body-muted { color: var(--ink-muted); }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; }

/* ---------- logo ---------- */
.brandmark { color: var(--graphite); }
@media (prefers-color-scheme: dark) { .brandmark { color: var(--on-carbon); } }
.brandmark--reverse { color: var(--on-carbon); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-6); font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-decoration: none; border: var(--stroke-hairline) solid transparent; border-radius: var(--radius-xs); cursor: pointer; transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm { height: 32px; padding: 0 var(--space-4); font-size: 14px; }
.btn--primary { background: var(--copper); color: var(--on-copper); border-color: var(--copper); }
.btn--primary:hover { background: var(--copper-hover); border-color: var(--copper-hover); }
.btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--ghost { height: auto; padding: 0; background: none; color: var(--ink); }
.btn--ghost:hover { color: var(--copper); }
.btn--inverse { background: var(--on-carbon); color: var(--carbon); border-color: var(--on-carbon); }
.btn--inverse:hover { background: transparent; color: var(--on-carbon); }
.btn--outline-inverse { background: transparent; color: var(--on-carbon); border-color: var(--on-carbon); }
.btn--outline-inverse:hover { background: var(--on-carbon); color: var(--carbon); }
.carbon :focus-visible { box-shadow: 0 0 0 2px var(--carbon), 0 0 0 4px var(--on-carbon); }

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-family: var(--font-display); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.tag::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.tag--development { background: var(--copper-soft); color: var(--copper); }
.tag--housewares { background: var(--steel-soft); color: var(--steel); }
.tag--rnd { background: var(--verdigris-soft); color: var(--verdigris); }
.tag--neutral { background: var(--surface-sunken); color: var(--ink); }
.tag--neutral::before { background: var(--ink-muted); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface-raised); border-bottom: var(--stroke-hairline) solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-8); height: var(--header-height); }
.site-header__brand { display: flex; flex: none; border-radius: var(--radius-xs); }
.site-header__brand svg { height: 20px; width: auto; }
.site-nav { display: flex; gap: var(--space-6); flex: 1; min-width: 0; height: 100%; }
.site-nav a { display: flex; align-items: center; height: 100%; font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; border-top: var(--stroke-rule) solid transparent; border-bottom: var(--stroke-rule) solid transparent; transition: color 120ms ease-out, border-color 120ms ease-out; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--copper); }
@media (max-width: 820px) { .site-nav { display: none; } .site-header .wrap { justify-content: space-between; } }

/* ---------- hero ---------- */
.hero { padding: var(--space-16) 0 0; border-bottom: var(--stroke-rule) solid var(--ink); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); align-items: end; }
.hero__copy { display: flex; flex-direction: column; gap: var(--space-6); padding-bottom: var(--space-16); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero__art { width: 100%; height: auto; }
@media (max-width: 860px) {
  .hero { padding-top: var(--space-12); }
  .hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .hero__copy { padding-bottom: var(--space-12); }
  .hero__art { max-width: 480px; }
}
.art-carbon { fill: var(--carbon); }
.art-copper { fill: var(--copper); }
.art-graphite { fill: var(--graphite); }
.art-steel { fill: var(--steel); }
.art-verdigris { fill: var(--verdigris); }
.art-plus { stroke: var(--surface); stroke-width: 2; fill: none; }
.art-ground { stroke: var(--ink); stroke-width: 2; }

/* ---------- sections ---------- */
.section { padding: var(--space-24) 0; }
.section--sunken { background: var(--surface-sunken); }
@media (max-width: 640px) { .section { padding: var(--space-16) 0; } }
.section__head { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: var(--stroke-rule) solid var(--ink); margin-bottom: var(--space-12); max-width: 760px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.split__copy { display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- division cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; } }
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: var(--stroke-hairline) solid var(--line); border-top-width: var(--stroke-marker); transition: box-shadow 120ms ease-out, border-color 120ms ease-out; }
.card:hover { box-shadow: var(--shadow-sm); }
.card--development { border-top-color: var(--division-development); }
.card--housewares { border-top-color: var(--division-housewares); }
.card--rnd { border-top-color: var(--division-rnd); }
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card__icon { width: 24px; height: 24px; color: var(--ink-muted); }
.card__title { font-size: 18px; line-height: 28px; font-weight: 500; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { color: var(--copper); }
.card__text { font-size: 15px; line-height: 24px; color: var(--ink-muted); flex: 1; }
.card__more { display: inline-flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--stroke-hairline) solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); }
.card__more svg { width: 16px; height: 16px; }

/* ---------- process (development) ---------- */
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--stroke-rule) solid var(--ink); }
.steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-bottom: var(--stroke-hairline) solid var(--line); }
.steps__num { font-family: var(--font-mono); font-size: 14px; line-height: 28px; color: var(--copper); }
.steps h3 { font-size: 18px; line-height: 28px; font-weight: 500; }
.steps p { margin-top: var(--space-1); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- housewares ---------- */
.spec { margin: 0; border-top: var(--stroke-rule) solid var(--ink); }
.spec div { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--line); }
.spec dt { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.spec dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.steel-panel { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.steel-panel span { aspect-ratio: 1; background: var(--steel); }
.steel-panel span:nth-child(3n) { background: var(--steel-soft); outline: var(--stroke-hairline) solid var(--steel); outline-offset: -1px; }
.steel-panel span:nth-child(7) { background: var(--graphite); }

/* ---------- r&d ---------- */
.rnd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; }
@media (max-width: 900px) { .rnd { grid-template-columns: 1fr; gap: var(--space-8); } }
.rnd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rnd__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.rnd__list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--verdigris); }

/* ---------- contact (carbon band) ---------- */
.carbon { background: var(--carbon); color: var(--on-carbon); }
.contact { padding: var(--space-24) 0; }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); align-items: end; }
.contact__lockup { width: 100%; max-width: 440px; height: auto; }
.contact__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.contact__copy .eyebrow { color: var(--on-carbon); opacity: .8; }
.contact__copy p { color: var(--on-carbon); opacity: .85; }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 860px) { .contact { padding: var(--space-16) 0; } .contact .wrap { grid-template-columns: 1fr; gap: var(--space-12); } .contact__lockup { max-width: 300px; } }

/* ---------- footer ---------- */
.site-footer { padding: var(--space-8) 0; background: var(--surface); border-top: var(--stroke-hairline) solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: space-between; }
.site-footer svg { height: 16px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.site-footer nav a { font-size: 14px; color: var(--ink-muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }
.site-footer small { font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.split__copy > .tag, .split__copy > div > .btn { align-self: flex-start; }

/* ---------- 404 ---------- */
.notfound { min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; }
.notfound .wrap { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }

/* ---------- hero v2: carbon band, project-site art, track-record strip ---------- */
.hero.carbon { padding: var(--space-16) 0 0; border-bottom: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-12); align-items: end; }
.hero.carbon .hero__copy { padding-bottom: var(--space-16); gap: var(--space-6); }
.hero.carbon .eyebrow { color: var(--on-carbon); opacity: .75; }
.hero__title { font-family: var(--font-display); font-size: clamp(44px, 6.4vw, 84px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--on-carbon); }
.hero__lead { font-size: 18px; line-height: 30px; color: var(--on-carbon); opacity: .82; max-width: 34em; }
.hero.carbon .hero__art { width: 100%; height: auto; margin-bottom: -1px; }
.art-line { stroke: var(--on-carbon); stroke-width: 1.5; fill: none; opacity: .7; }
.art-cut { stroke: var(--carbon); stroke-width: 2; fill: none; }
.art-on { fill: var(--on-carbon); }
.proof { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--stroke-rule) solid var(--on-carbon); }
.proof__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-12) var(--space-6); border-left: var(--stroke-hairline) solid color-mix(in srgb, var(--on-carbon) 22%, transparent); }
.proof__item:first-child { border-left: 0; padding-left: 0; }
.proof dt { order: 2; font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-carbon); opacity: .8; }
.proof dd { margin: 0; }
.proof__value { order: 1; font-family: var(--font-mono); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--on-carbon); }
.proof__unit { font-size: .45em; letter-spacing: 0; margin-left: .3em; opacity: .75; }
.proof__note { order: 3; font-size: 14px; line-height: 20px; color: var(--on-carbon); opacity: .65; }
.todo { outline: 1px dashed var(--copper); outline-offset: 3px; }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero.carbon .hero__copy { padding-bottom: var(--space-12); }
  .hero.carbon .hero__art { max-width: 560px; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof__item { padding-bottom: var(--space-8); }
  .proof__item:nth-child(n+3) { border-top: var(--stroke-hairline) solid color-mix(in srgb, var(--on-carbon) 22%, transparent); }
}
.hero.carbon > .wrap:not(.hero__grid) { display: block; }

.contact__email { color: var(--on-carbon); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }