/* Wylis Labs — Colors & Type
 * "Linear Midnight" — operator-grade, dark-first, tight density.
 * Source: admin/index.css + admin/components/*.tsx
 */

/* ————— Fonts: Inter + Inter Display (self-hosted) ————— */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Inter-Thin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Inter-ThinItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Inter-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Inter-ExtraLightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Inter-Light.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Inter-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Inter-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Inter-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Inter-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Inter-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Inter-ExtraBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Inter-Black.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Inter-BlackItalic.woff2') format('woff2'); }

@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/InterDisplay-Thin.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/InterDisplay-ThinItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/InterDisplay-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/InterDisplay-ExtraLightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/InterDisplay-Light.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/InterDisplay-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/InterDisplay-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/InterDisplay-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/InterDisplay-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/InterDisplay-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/InterDisplay-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/InterDisplay-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/InterDisplay-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/InterDisplay-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/InterDisplay-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/InterDisplay-ExtraBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/InterDisplay-Black.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/InterDisplay-BlackItalic.woff2') format('woff2'); }

:root {
  --wl-bg:              #0F0F10;
  --wl-sidebar:         #111113;
  --wl-surface:         rgba(255, 255, 255, 0.03);
  --wl-surface-hover:   rgba(255, 255, 255, 0.05);
  --wl-surface-active:  rgba(255, 255, 255, 0.06);
  --wl-surface-faint:   rgba(255, 255, 255, 0.02);

  --wl-border:          rgba(255, 255, 255, 0.04);
  --wl-border-subtle:   rgba(255, 255, 255, 0.025);
  --wl-border-strong:   rgba(255, 255, 255, 0.08);

  --wl-fg1:             #EEEFF1;
  --wl-fg2:             #8C8D96;
  --wl-fg3:             #575861;
  --wl-fg4:             #3B3C44;
  --wl-fg5:             #2A2B32;

  --wl-accent:          #5E6AD2;
  --wl-accent-hover:    #6872D9;
  --wl-accent-bg:       rgba(94, 106, 210, 0.12);
  --wl-accent-selection:rgba(94, 106, 210, 0.35);

  --wl-success:         #26B558;

  --wl-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wl-font-display:    'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wl-font-mono:       'Berkeley Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --wl-tracking-tight:  -0.006em;
  --wl-tracking-title:  -0.02em;
  --wl-tracking-display:-0.03em;

  --wl-radius-sm:       4px;
  --wl-radius:          5px;
  --wl-radius-md:       6px;

  --wl-dur:             150ms;
  --wl-ease:            cubic-bezier(0.2, 0, 0, 1);
}

/* ————— Base ————— */
html, body { margin: 0; padding: 0; }
body {
  background: var(--wl-bg);
  color: var(--wl-fg1);
  font-family: var(--wl-font-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: var(--wl-tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--wl-accent); text-decoration: none; }
a:focus-visible { outline: 1px solid var(--wl-accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--wl-accent-selection); }

.page { max-width: 960px; margin: 0 auto; padding: 0 28px; }

/* ————— Masthead ————— */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--wl-fg1); }
.brand-badge {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--wl-accent); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: -0.02em;
  display: grid; place-items: center;
}
.brand-word { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.nav { display: flex; gap: 24px; }
.nav a {
  font-size: 13px; color: var(--wl-fg3);
  transition: color var(--wl-dur) var(--wl-ease);
}
.nav a:hover { color: var(--wl-fg1); }

/* ————— Hero ————— */
.hero { padding: 88px 0 96px; }
.positioning {
  font-family: var(--wl-font-display);
  font-size: 44px; font-weight: 500; color: var(--wl-fg1);
  letter-spacing: -0.028em; line-height: 1.1;
  margin: 0; max-width: 22ch; text-wrap: balance;
}
.positioning .dim { color: var(--wl-fg3); }
.hero-meta {
  margin: 32px 0 0; display: flex; align-items: center; gap: 16px;
  color: var(--wl-fg4); font-size: 12px;
}
.hero-meta .dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--wl-success); display: inline-block;
}
.hero-meta .sep { color: var(--wl-fg5); }
.hero-meta .mono { font-family: var(--wl-font-mono); }

/* ————— Sections ————— */
.section { padding: 72px 0; border-top: 1px solid var(--wl-border); }
.section-label {
  font-size: 11px; font-weight: 500; color: var(--wl-fg4);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 20px;
}
.section-title {
  font-family: var(--wl-font-display);
  font-size: 20px; font-weight: 500; color: var(--wl-fg1);
  letter-spacing: -0.02em; margin: 0 0 24px;
}

/* ————— Prose ————— */
.prose p {
  font-size: 14px; line-height: 1.65; color: var(--wl-fg1);
  max-width: 60ch; margin: 0 0 16px;
}
.prose p.muted { color: var(--wl-fg3); }
.prose p:last-child { margin-bottom: 0; }
.prose a.inline {
  color: var(--wl-fg1); text-decoration: underline;
  text-decoration-color: var(--wl-accent);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* ————— Portfolio cards ————— */
.portfolio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--wl-border);
  border: 1px solid var(--wl-border); border-radius: 5px; overflow: hidden;
}
.p-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 22px 20px; background: var(--wl-bg); color: inherit;
  min-height: 168px;
  transition: background-color var(--wl-dur) var(--wl-ease);
}
.p-card:hover {
  background: color-mix(in oklab, var(--app-accent, #ffffff) 6%, var(--wl-bg));
}
.p-card .top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.p-card .glyph { width: 20px; height: 20px; display: block; }
.p-card .arrow {
  font-size: 13px; color: var(--wl-fg5);
  transition: color var(--wl-dur) var(--wl-ease), transform var(--wl-dur) var(--wl-ease);
}
.p-card:hover .arrow {
  color: var(--app-accent, var(--wl-fg1));
  transform: translate(2px, -2px);
}
.p-card .name {
  font-size: 14px; font-weight: 600; color: var(--wl-fg1);
  letter-spacing: -0.01em; margin: 0 0 4px;
  transition: color var(--wl-dur) var(--wl-ease);
}
.p-card:hover .name { color: var(--app-accent, var(--wl-fg1)); }
.p-card .desc {
  font-size: 13px; color: var(--wl-fg3); line-height: 1.5; margin: 0; flex: 1;
}
.p-card .domain {
  margin-top: 20px; font-family: var(--wl-font-mono);
  font-size: 11px; color: var(--wl-fg4);
}

/* ————— How we build ————— */
.hwb { display: flex; flex-direction: column; }
.hwb-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  padding: 18px 0; border-bottom: 1px solid var(--wl-border);
}
.hwb-row:first-child { border-top: 1px solid var(--wl-border); }
.hwb-k { font-size: 13px; color: var(--wl-fg3); font-weight: 500; letter-spacing: -0.01em; }
.hwb-v { font-size: 14px; color: var(--wl-fg1); line-height: 1.55; max-width: 60ch; }

/* ————— Contact ————— */
.contact { display: flex; flex-direction: column; }
.c-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  padding: 12px 0; border-bottom: 1px solid var(--wl-border-subtle);
}
.c-row:first-child { border-top: 1px solid var(--wl-border); }
.c-row:last-child { border-bottom: 1px solid var(--wl-border); }
.c-k { font-size: 13px; color: var(--wl-fg4); letter-spacing: -0.01em; }
.c-v { font-size: 14px; color: var(--wl-fg1); }
.c-v.mono { font-family: var(--wl-font-mono); font-size: 13px; }
.c-v a {
  color: var(--wl-fg1); text-decoration: underline;
  text-decoration-color: var(--wl-accent);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* ————— Footer + egg ————— */
.footer {
  padding: 40px 0 56px; border-top: 1px solid var(--wl-border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--wl-fg4); gap: 24px; flex-wrap: wrap;
}
.footer-links { display: flex; gap: 18px; font-family: var(--wl-font-mono); font-size: 11px; }
.footer-links a {
  color: var(--wl-fg3); transition: color var(--wl-dur) var(--wl-ease);
}
.footer-links a:hover { color: var(--wl-fg1); }

.egg {
  color: inherit; text-decoration: none;
  padding: 2px 3px; margin: 0 -3px; cursor: default; border-radius: 2px;
}
.egg:focus-visible { outline: 1px solid var(--wl-accent); outline-offset: 2px; }

/* ————— Responsive ————— */
@media (max-width: 720px) {
  .page { padding: 0 20px; }
  .masthead { padding: 20px 0; }
  .nav { gap: 14px; }
  .nav a { font-size: 12px; }
  .hero { padding: 56px 0 64px; }
  .positioning { font-size: 30px; max-width: 18ch; letter-spacing: -0.025em; }
  .section { padding: 48px 0; }
  .portfolio { grid-template-columns: 1fr; }
  .hwb-row, .c-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .hwb-k, .c-k { font-size: 12px; }
  .footer { font-size: 11px; }
}
@media (max-width: 420px) {
  .brand-word { display: none; }
  .positioning { font-size: 26px; }
}