/* ==========================================================
   dricciardelli.com
   Fonts are self-hosted (Inter, SIL OFL). No third parties.
   ========================================================== */

@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("/assets/fonts/InterDisplay-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #07080B;
  --text: #F4F6FA;
  --muted: #A9B4C6;
  --line: rgba(244, 246, 250, 0.12);

  --red: #FF5A5F;
  --red-label: #FF8A8E;
  --red-text: #FFE1E2;
  --red-soft: #FFC2C4;
  --red-bg: #0E0607;

  --blue: #4C9BFF;
  --blue-label: #8FBFFF;
  --blue-text: #E6F0FF;
  --blue-soft: #B7C3D6;
  --blue-bg: #06090F;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Display", "Inter", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --x: 0%;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: #E8ECF2; text-decoration: none; }
a:hover { color: #FFFFFF; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: var(--text); color: var(--bg);
}
.skip:focus { top: 16px; color: var(--bg); }

/* ---------- Nav (shared) ---------- */

.nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px 5%;
}
.nav ul { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 6px; }
.logo { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; }
.slash-red { color: var(--red); }
.slash-blue { color: var(--blue); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: max(100svh, 860px);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
.hero .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }

.layer {
  position: absolute; inset: 0;
  background-size: 56px 56px;
}
.layer--blue {
  background-color: var(--blue-bg);
  background-image:
    linear-gradient(rgba(76,155,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,155,255,0.05) 1px, transparent 1px);
}
.layer--red {
  background-color: var(--red-bg);
  background-image:
    linear-gradient(rgba(255,90,95,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,90,95,0.05) 1px, transparent 1px);
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
  z-index: 1;
}

.hero__center {
  position: absolute; top: 150px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 0 24px; text-align: center;
}
.eyebrow {
  margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
}
.layer--blue .eyebrow { color: var(--blue-label); }
.layer--red .eyebrow { color: var(--red-label); }

.name {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(46px, 7.2vw, 116px); line-height: 0.92; letter-spacing: -0.045em;
  color: var(--text);
}
.name--outline {
  color: var(--red-bg);
  -webkit-text-stroke: 2px var(--red);
}
.tagline { margin: 4px 0 0; font-size: 20px; line-height: 1.5; }
.layer--blue .tagline { color: var(--blue-soft); }
.layer--red .tagline { color: var(--red-soft); }

/* ---------- Panels ---------- */

.panel {
  position: absolute; bottom: 96px;
  width: min(430px, 42%);
  padding: 20px 24px;
  border-radius: 14px;
  font-family: var(--mono); font-size: 13px;
}
.panel--red { left: 5%; border: 1px solid rgba(255,90,95,0.35); background: rgba(24,6,8,0.72); }
.panel--blue { right: 5%; border: 1px solid rgba(76,155,255,0.35); background: rgba(6,12,24,0.72); }

.panel__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 12px;
}
.panel__head h2 {
  margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.panel__status { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.panel--red h2 { color: var(--red-label); }
.panel--red .panel__status { color: var(--red-text); }
.panel--blue h2 { color: var(--blue-label); }
.panel--blue .panel__status { color: var(--blue-text); }

.rows { margin: 0; }
.row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0;
}
.panel--red .row { border-top: 1px solid rgba(255,90,95,0.14); }
.panel--blue .row { border-top: 1px solid rgba(76,155,255,0.14); }
.row dt { flex: none; }
.row dd { margin: 0; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel--red dt { color: var(--red-label); }
.panel--red dd { color: var(--red-text); }
.panel--blue dt { color: var(--blue-label); }
.panel--blue dd { color: var(--blue-text); }
.row dd.is-pending, .row dd.is-off { color: var(--muted); }
.noscript { margin: 8px 0 0; color: var(--muted); }

/* ---------- The line ---------- */

.divider {
  position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 4;
  width: 44px; margin-left: -22px;   /* wide, invisible hit area */
  cursor: ew-resize; touch-action: none;
}
.divider::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--text); box-shadow: 0 0 22px rgba(244,246,250,0.5);
}
.handle {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--text); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
}
.divider.is-dragging .handle { cursor: grabbing; transform: scale(1.06); }

/* ---------- Hero footer strip ---------- */

.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 14px 5%;
  border-top: 1px solid var(--line); background: rgba(7,8,11,0.82);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.hint { letter-spacing: 0.16em; text-transform: uppercase; color: #E8ECF2; }
.btn-ghost {
  min-height: 44px; padding: 0 16px; border-radius: 8px;
  border: 1px solid rgba(244,246,250,0.22); background: transparent; color: #E8ECF2;
  font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.btn-ghost:hover { border-color: rgba(244,246,250,0.5); }

/* ---------- Site footer ---------- */

.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  padding: 28px 5%; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }

/* ---------- Simple pages (work, projects, timeline, resume, contact, 404) ---------- */

.page {
  min-height: calc(100svh - 90px);
  display: flex; flex-direction: column;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(244,246,250,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,246,250,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
}
.page__body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 48px 5% 96px;
}
.terminal {
  width: 100%; max-width: 720px;
  border: 1px solid rgba(244,246,250,0.14); border-radius: 14px; background: #0A0C0E;
  overflow: hidden;
}
.terminal__bar {
  padding: 14px 18px; border-bottom: 1px solid rgba(244,246,250,0.10);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.terminal__body { padding: 24px 26px 30px; font-family: var(--mono); font-size: 15px; line-height: 1.9; }
.terminal__body p { margin: 0; }
.ok { color: #5BF59A; }
.warn { color: #FFB547; }
.prompt { color: var(--muted); }
.page h1 {
  margin: 18px 0 6px; font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 5vw, 52px); line-height: 1; letter-spacing: -0.035em;
}
.page .lead { margin: 0 0 8px; font-family: var(--sans); font-size: 18px; line-height: 1.5; color: var(--muted); }
.links { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.links a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero { height: max(100svh, 1000px); }
  .hero__center { top: 180px; }
  .tagline { font-size: 17px; }
  /* Both panels share the same spot and size: the line decides which one you see. */
  .panel, .panel--red, .panel--blue { left: 5%; right: 5%; width: auto; bottom: 124px; min-height: 336px; }
  .panel__head h2, .panel__status { font-size: 11px; letter-spacing: 0.1em; }
  .hero__foot { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 5%; }
  .nav ul { gap: 0 16px; font-size: 14px; }
  .panel { padding: 18px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}