/* ------------------------------------------------------------------
   erickuribe.com — the split. Two worlds, one guy.
   Left  = PRO  : parchment, terracotta, jade. The letterpress brand.
   Right = NERD : phosphor CRT, now with cyan and magenta in the mix.
   ------------------------------------------------------------------ */

:root {
  /* Pro world — pulled from the Pencreus brand art */
  --p-bg:     #f2e9db;
  --p-bg2:    #e8dcc8;
  --p-ink:    #1c1714;
  --p-terra:  #b8482a;
  --p-jade:   #1d6b60;
  --p-gold:   #c08a24;
  --p-mut:    #6b5c4c;

  /* Nerd world */
  --n-bg:     #070b08;
  --n-bg2:    #0d1410;
  --n-green:  #4dffa6;
  --n-cyan:   #4de8ff;
  --n-amber:  #ffc857;
  --n-magenta:#ff6bc4;
  --n-mut:    #8fbfa4;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
          "Cascadia Mono", Consolas, monospace;
  --slab: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--n-bg); }

body {
  margin: 0;
  font-family: var(--mono);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--n-bg);
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- BRAND */

.brandbar {
  background: var(--p-bg);
  border-bottom: 3px solid var(--p-ink);
  text-align: center;
  padding: 1.1rem 1.25rem 0.9rem;
  color: var(--p-ink);          /* the mark is all currentColor */
}
.mark {
  width: 100%;
  max-width: 860px;
  height: auto;
  display: inline-block;
}
/* Text inside the inlined mark. Kept here so the wordmark uses the same
   font stack as the rest of the page. */
.mk-t, .mk-l, .mk-rev {
  fill: currentColor; stroke: none;
  font-family: var(--slab); font-weight: 800;
}
.mk-l   { font-size: 26px; letter-spacing: 2px; }
.mk-rev { fill: var(--p-bg); }   /* reversed out of the solid bar */

/* ----------------------------------------------------------- THE SPLIT */

.split {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

/* Each side is a pitch plus the guy making it. They stand back-to-back at
   the seam, each gesturing at his own half — the yin/yang read. */
.side {
  flex: 1 1 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: flex-grow 0.45s cubic-bezier(.2,.8,.3,1);
}

.pitch {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
/* Both sides now run pitch-then-avatar — text hugs the seam, avatar sits
   at the outer edge. Left-aligned reads naturally on both. */

/* --------------------------------------------------------------- AVATARS */

.avatar {
  flex: none;
  width: clamp(96px, 15vw, 210px);
  aspect-ratio: 600 / 802;
  position: relative;
}
.avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* Neither needs a CSS flip. The Pro art is mirrored inside the SVG file
   (label counter-flipped so #81 still reads) so he faces right, toward his
   own pitch. The Nerd art gestures left natively — now sitting outside its
   pitch, that same leftward point lands right back on the text. */
.pro .avatar::before {
  background: var(--p-ink);
  -webkit-mask-image: url(assets/erick_pro.svg);
          mask-image: url(assets/erick_pro.svg);
}
.nerd .avatar::before {
  background: var(--n-green);
  filter: drop-shadow(0 0 10px rgba(77,255,166,.35));
  -webkit-mask-image: url(assets/erick.svg);
          mask-image: url(assets/erick.svg);
}

/* The yin/yang eye: each figure carries a dot of the other world. */
.avatar::after {
  content: "";
  position: absolute;
  bottom: 4%;
  width: 14px; height: 14px;
  border-radius: 50%;
}
.pro  .avatar::after { right: 2%; background: var(--n-green);
                       box-shadow: 0 0 10px rgba(77,255,166,.7); }
.nerd .avatar::after { left: 2%;  background: var(--p-terra);
                       box-shadow: 0 0 10px rgba(184,72,42,.7); }

/* Hovering one side gives it more room. Pure sugar, but it makes the
   choice feel like a choice. */
@media (hover: hover) and (min-width: 48rem) {
  .split:hover .side          { flex-grow: 0.85; }
  .split .side:hover          { flex-grow: 1.3; }
}

/* -- PRO -- */
.side.pro {
  background: var(--p-bg);
  color: var(--p-ink);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(184,72,42,.10), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(29,107,96,.12), transparent 50%);
}
/* Faint crosshatch wash instead of a raster watermark — 0 bytes, same warmth. */
.side.pro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,
      var(--p-ink) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg,
      var(--p-ink) 0 2px, transparent 2px 22px);
}

/* -- NERD -- */
.side.nerd {
  background: var(--n-bg);
  color: var(--n-mut);
  background-image:
    radial-gradient(circle at 75% 25%, rgba(77,232,255,.10), transparent 45%),
    radial-gradient(circle at 25% 80%, rgba(255,107,196,.09), transparent 45%),
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 3px 4px);
}

/* ------------------------------------------------------------- CONTENT */

.eyebrow {
  font-size: clamp(.62rem, 1.4vw, .72rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 700;
}
.pro  .eyebrow { color: var(--p-terra); }
.nerd .eyebrow { color: var(--n-cyan); }

.side h2 {
  font-family: var(--slab);
  font-size: clamp(2rem, 6.5vw, 3.6rem);
  line-height: .95;
  margin: 0;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-weight: 800;
}
.pro  h2 { color: var(--p-ink); }
.nerd h2 { color: var(--n-green); text-shadow: 0 0 14px rgba(77,255,166,.4); }

.side .blurb {
  margin: 0;
  font-size: clamp(.82rem, 1.7vw, .95rem);
  line-height: 1.6;
  max-width: 34ch;
}
.pro  .blurb { color: var(--p-mut); }
.nerd .blurb { color: var(--n-mut); }

.side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(.74rem, 1.5vw, .84rem);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}
.pro  li::before { content: "◆ "; color: var(--p-gold); }
.nerd li::before { content: "▸ "; color: var(--n-magenta); }

.enter {
  margin-top: .4rem;
  align-self: flex-start;
  font-size: clamp(.72rem, 1.5vw, .8rem);
  letter-spacing: .18em;
  font-weight: 700;
  padding: .6rem 1.1rem;
  border: 2px solid currentColor;
  text-transform: uppercase;
  transition: transform .2s, background .2s, color .2s;
}
.pro  .enter { color: var(--p-terra); }
.nerd .enter { color: var(--n-green); }
.side:hover .enter, .side:focus-visible .enter { transform: translateX(6px); }
.pro:hover  .enter { background: var(--p-terra); color: var(--p-bg); }
.nerd:hover .enter { background: var(--n-green); color: var(--n-bg); }

.side:focus-visible { outline: 4px solid var(--n-amber); outline-offset: -8px; }

/* Plain amber seam — a simple rule marking the boundary, no motif. */
.seamline {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--n-amber);
  opacity: .85;
}

/* ---------------------------------------------------------------- FOOT */

footer {
  background: var(--p-ink);
  color: var(--p-bg2);
  font-size: .68rem;
  letter-spacing: .12em;
  text-align: center;
  padding: .85rem 1rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
footer a { color: var(--n-amber); text-decoration: none; border-bottom: 1px solid currentColor; }
footer a:hover { background: var(--n-amber); color: var(--p-ink); }

/* ---------------------------------------------------------- RESPONSIVE */

@media (max-width: 48rem) {
  .split { flex-direction: column; }
  .side  { flex: 1 1 auto; min-height: 42vh; gap: .9rem; padding: 1.75rem 1.25rem; }
  .avatar { width: clamp(84px, 24vw, 140px); }
  .avatar::after { width: 10px; height: 10px; }
  .seamline {
    position: relative;   /* in-flow between the panels = the true boundary */
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; height: 3px;
    transform: none;
    flex: none;
  }
}

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