/* Layout: Dayos system on NEXA — warm gray canvas, flat white cards, black top-arc blocks,
   condensed uppercase display at gallery scale, floating pill nav. Single committed look. */
:root {
  --canvas: #e5e5e5;
  --card: #ffffff;
  --ink: #000000;
  --mist: #f3f3f3;
  --ash: #c6c6c6;
  --smoke: #979797;
  --slate: #444444;
  --graphite: #2f2f2f;
  --tag: #e6ffb8;
  --volt: #c0ff00;
  --blue: #5b6cff;
  --pink: #ff56bb;

  --f-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --max: 1200px;
  --sec: clamp(64px, 8vw, 112px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 500 16px/1.3 var(--f-body); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 10;
  height: env(safe-area-inset-top, 0px); background: var(--canvas);
}
body.on-dark::before { background: var(--ink); }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap {
  width: 100%; max-width: calc(var(--max) + 64px); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

/* ---------- type ---------- */
.d-xl, .d-l, .d-m, .d-s { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; margin: 0; text-wrap: balance; }
.d-xl { font-size: clamp(64px, 10vw, 140px); line-height: .88; letter-spacing: -.03em; }
.d-l { font-size: clamp(52px, 7vw, 96px); line-height: .9; letter-spacing: -.03em; }
.d-m { font-size: clamp(44px, 5vw, 64px); line-height: .9; letter-spacing: -.03em; }
.d-s { font-size: 48px; line-height: .9; letter-spacing: -.03em; }
.h2 { font: 500 clamp(28px, 3.2vw, 40px)/1.1 var(--f-body); text-transform: uppercase; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.h3 { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--f-body); text-transform: uppercase; letter-spacing: -.02em; margin: 0; }
.p { font-size: 16px; line-height: 1.3; color: var(--slate); margin: 0; max-width: 52ch; }
.p-l { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.25; margin: 0; max-width: 46ch; }
.mono { font: 400 12px/1.6 var(--f-mono); letter-spacing: -.02em; text-transform: uppercase; }
.muted { color: var(--smoke); }
.dim { color: #8a8a8a; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--f-mono); text-transform: uppercase; background: var(--tag); color: var(--ink); padding: 8px 14px; border-radius: 64px; }
.tag.dark { background: var(--graphite); color: var(--card); }
.volt { color: var(--volt); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: 500 16px/1 var(--f-body); padding: 16px 24px; border-radius: 8px; border: 0;
  transition: background .2s, color .2s, transform .2s;
}
.btn-ink { background: var(--ink); color: var(--card); }
.btn-ink:hover { background: var(--graphite); }
.btn-volt { background: var(--volt); color: var(--ink); }
.btn-volt:hover { background: #d4ff4d; }
.btn-ghost { background: transparent; color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--slate); border-radius: 4px; }
.btn-ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.link { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.arr { transition: transform .2s; }
.btn:hover .arr, .link:hover .arr { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; transition: background .35s; background: rgba(229, 229, 229, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-row { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.logo { display: inline-flex; align-items: center; padding: 6px 0; }
.logo img { height: 34px; width: auto; display: block; }
.logo .on-dark, body.on-dark .logo .on-light { display: none; }
body.on-dark .logo .on-dark { display: block; }
.pill { display: none; background: var(--card); border-radius: 48px; padding: 6px; gap: 2px; transition: background .35s; }
.pill > a, .pill > button {
  font: 500 14px/1 var(--f-body); color: var(--slate); text-decoration: none; padding: 12px 16px; border-radius: 48px;
  border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, background .2s;
}
.pill > a:hover, .pill > button:hover, .pill > button[aria-expanded="true"], .pill > a[aria-current="page"] { color: var(--ink); background: var(--mist); }
.pill .chev { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-end { display: flex; align-items: center; gap: 8px; }
.lang { display: flex; background: var(--card); border-radius: 48px; padding: 4px; transition: background .35s; }
.lang button { font: 400 12px/1 var(--f-mono); border: 0; background: none; color: var(--smoke); padding: 10px; border-radius: 48px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.nav .cta { display: none; }
.burger { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: var(--card); cursor: pointer; font: 500 12px var(--f-mono); }
@media (min-width: 1060px) { .pill { display: flex; } .nav .cta { display: inline-flex; } .burger { display: none; } }

/* dark-mode nav, when a black block sits under it */
body.on-dark .nav { background: var(--ink); }
body.on-dark .pill, body.on-dark .lang { background: #161616; }
body.on-dark .pill > a, body.on-dark .pill > button { color: #b8b8b8; }
body.on-dark .pill > a:hover, body.on-dark .pill > button:hover, body.on-dark .pill > button[aria-expanded="true"] { background: #262626; color: var(--card); }
body.on-dark .nav .cta, body.on-dark .burger { background: var(--volt); color: var(--ink); }
body.on-dark .lang button[aria-pressed="true"] { background: var(--card); color: var(--ink); }

/* mega menu */
.mega {
  position: absolute; top: 88px; left: 50%; transform: translateX(-50%) translateY(-6px); width: min(760px, calc(100vw - 32px));
  background: var(--card); border-radius: 24px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; color: var(--ink);
}
.mega.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega a { display: grid; gap: 6px; padding: 18px; border-radius: 16px; text-decoration: none; }
.mega a:hover { background: var(--mist); }
.mega b { font: 700 24px/1 var(--f-cond); text-transform: uppercase; letter-spacing: -.01em; }
.mega span { font-size: 14px; color: var(--slate); }
#m-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(900px, calc(100vw - 32px)); }
@media (max-width: 1059px) { .mega { display: none; } } /* only the desktop pill opens them; hidden, they still widened the page on phones */
#m-sys .wide { grid-column: auto; }
.mega .wide { grid-column: 1 / -1; background: var(--ink); color: var(--card); }
.mega .wide span { color: var(--smoke); }
.mega .wide:hover { background: var(--graphite); }

/* mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--card); padding: calc(24px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.sheet nav { display: grid; gap: 4px; margin-top: 32px; }
.sheet a { font: 700 44px/1 var(--f-cond); text-transform: uppercase; text-decoration: none; padding: 6px 0; }
.sheet .sub a { font: 500 16px/1.2 var(--f-body); text-transform: none; color: var(--smoke); padding: 4px 0 4px 2px; }
.sheet .close { float: right; }
body.on-dark .pill > a[aria-current="page"] { background: #262626; color: var(--card); }