/* ============================================================
   Journey — CV sheet with editor-canvas panel
   ============================================================ */

.jr {
  --paper:  #f0efee;
  --accent: #ee5b2a;
  --ink:    #232323;
  --hair:   rgba(0,0,0,.28);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 84px 22px 30px;   /* clears the fixed site nav */
}

.jr-sheet {
  width: min(1200px, 100%);
  display: flex; flex-direction: column;
  gap: clamp(18px, 2.6vh, 34px);
}

/* ---------- top toolbar ---------- */
.jr-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.jr-bar__home { color: var(--accent); font-size: 21px; line-height: 1; }
.jr-bar__rule { width: 1px; align-self: stretch; background: var(--hair); margin-inline: 4px; }
.jr-tab { padding: 3px 9px; }
.jr-tab.is--on { background: var(--accent); color: #fff; }
.jr-bar__sw { display: flex; flex-direction: column; gap: 2px; }
.jr-bar__sw i { width: 17px; height: 7px; background: var(--accent); display: block; }
.jr-bar__sw i:last-child { width: 11px; }
.jr-bar__caret { font-size: 10px; }
.jr-bar__toggle { width: 44px; height: 20px; border: 1.6px solid var(--ink); display: flex; }
.jr-bar__toggle i { width: 50%; background: var(--ink); }
.jr-bar__find {
  display: flex; align-items: center; gap: 6px;
  border: 1.4px solid var(--hair); border-radius: 3px;
  padding: 3px 10px; font-weight: 400; font-size: 11px; color: #8a8a8a;
}

/* ---------- two columns ---------- */
.jr-cols { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 940px) { .jr-cols { grid-template-columns: 1.06fr 1fr; } }

/* ---------- left: the CV ---------- */
.jr-head { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .jr-head { grid-template-columns: auto 1fr; gap: 22px; } }

.jr-name {
  margin: 0;
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 4.4vh, 3.5rem); line-height: .95; letter-spacing: -.045em;
}
.jr-quote, .jr-bio {
  margin: 0; text-align: justify; hyphens: auto;
  font-size: clamp(12.5px, 1.6vh, 15px); line-height: 1.42;
}
.jr-bio { margin-top: clamp(12px, 1.8vh, 20px); }

.jr-h {
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vh, 2.1rem); letter-spacing: -.035em;
  margin: clamp(18px, 3vh, 34px) 0 clamp(10px, 1.8vh, 18px);
}

.jr-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vh, 18px) 30px; }
.jr-fields li { display: flex; align-items: center; gap: 12px; }
.jr-fields li:first-child { flex-basis: 100%; }
.jr-ico {
  width: clamp(38px, 5vh, 50px); aspect-ratio: 1; flex: none;
  display: grid; place-items: center; background: var(--accent); color: #fff;
}
.jr-ico svg { width: 56%; height: 56%; }
.jr-fields span { font-size: clamp(13px, 1.7vh, 16px); font-weight: 600; }

/* experience */
.jr-exp { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vh, 20px) 34px; }
@media (min-width: 560px) { .jr-exp { grid-template-columns: 1fr 1fr; } }
.jr-job { display: grid; grid-template-columns: auto 1px 1fr; gap: 12px; }
.jr-job__yr  { font-size: clamp(11px, 1.5vh, 13px); white-space: nowrap; }
.jr-job__bar { background: var(--hair); }
.jr-job__role{ font-size: clamp(12.5px, 1.7vh, 15px); font-weight: 700; display: block; }
.jr-job__org { font-size: clamp(10px, 1.3vh, 11.5px); color: #7d7d7d; display: block; margin-top: 1px; }

/* software */
.jr-soft {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap;
  /* the heading's own margin is zeroed below, so the block carries the gap */
  margin-top: clamp(26px, 4.5vh, 56px);
}
.jr-soft .jr-h { margin: 0; max-width: 4.5ch; line-height: .95; }
.jr-apps { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 14px); }
.jr-app {
  width: clamp(44px, 6.2vh, 62px); aspect-ratio: 1; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: 'Inter Tight', sans-serif; font-weight: 700;
  font-size: clamp(16px, 2.4vh, 24px); letter-spacing: -.02em;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.jr-app:hover { transform: translateY(-4px); }
.jr-learning {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1.4px solid var(--hair); padding: 5px 8px;
}
.jr-learning .row { display: flex; gap: 8px; }
.jr-learning .jr-app { width: clamp(26px, 3.4vh, 34px); background: transparent; color: var(--ink); font-size: clamp(11px, 1.5vh, 14px); }
.jr-learning small { font-size: 9px; font-style: italic; color: #6f6f6f; }

/* ---------- right: editor canvas ---------- */
.jr-canvas {
  position: relative; align-self: start;
  border: 1.4px solid var(--accent);
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, #eceae9, #dedbd9);
}
.jr-canvas__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.02); }

.jr-hd { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.4px solid var(--accent); z-index: 6; }
.jr-hd.tl{left:-4px;top:-4px}      .jr-hd.tr{right:-4px;top:-4px}
.jr-hd.bl{left:-4px;bottom:-4px}   .jr-hd.br{right:-4px;bottom:-4px}
.jr-hd.tm{left:50%;top:-4px;transform:translateX(-50%)}
.jr-hd.bm{left:50%;bottom:-4px;transform:translateX(-50%)}
.jr-hd.lm{left:-4px;top:50%;transform:translateY(-50%)}
.jr-hd.rm{right:-4px;top:50%;transform:translateY(-50%)}

.jr-win { position: absolute; top: 9px; right: 12px; display: flex; align-items: center; gap: 11px; z-index: 7; font-size: 13px; }
.jr-win i { display: block; }
.jr-win .min { width: 11px; height: 1.6px; background: var(--ink); }
.jr-win .max { width: 10px; height: 10px; border: 1.6px solid var(--ink); }
.jr-win .cls { width: 11px; height: 11px; position: relative; }
.jr-win .cls::before, .jr-win .cls::after { content:""; position:absolute; inset:0 0 auto 0; top:50%; height:1.6px; background: var(--ink); }
.jr-win .cls::before { transform: rotate(45deg); } .jr-win .cls::after { transform: rotate(-45deg); }

/* tool palette */
.jr-palette {
  position: absolute; left: 5%; top: 12%; z-index: 6;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  padding: 4px; background: #2c2c2e; border-top: 3px solid var(--accent);
}
.jr-palette i { width: 12px; height: 12px; border: 1.3px solid #dcdcdc; display: block; }
.jr-palette i:nth-child(4n) { border-radius: 50%; }

/* layers */
.jr-layers {
  position: absolute; right: 4%; top: 8%; width: 33%; z-index: 6;
  background: #efeeed; border: 1px solid var(--hair);
  font-family: 'Space Mono', monospace; font-size: 6.5px;
}
.jr-layers h4 { margin: 0; padding: 4px; font-size: 7.5px; text-align: center; border-bottom: 1px solid var(--hair); }
.jr-layers ul { margin: 0; padding: 0; list-style: none; }
.jr-layers li { display: flex; align-items: center; gap: 4px; padding: 2px 5px; border-bottom: 1px solid rgba(0,0,0,.06); }
.jr-layers li b { width: 5px; height: 5px; background: var(--accent); flex: none; }

/* role tag with its own selection */
.jr-role {
  position: absolute; left: 6%; top: 36%; z-index: 7;
  padding: 5px 10px; border: 1.3px solid var(--accent);
  font-family: 'Inter Tight', sans-serif; font-weight: 800;
  font-size: clamp(12px, 1.7vh, 17px); line-height: 1.05; color: var(--ink);
  transform: rotate(-5deg);
}
.jr-role .jr-hd { background:#fff; }

/* pen tool + path, bridging the columns */
.jr-pen { position: absolute; left: -19%; top: 26%; width: 26%; z-index: 5; pointer-events: none; }
.jr-pen path { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.jr-pen .nib { fill: var(--ink); stroke: none; }
.jr-pen rect { fill: #fff; stroke: var(--accent); stroke-width: 1.2; }

.jr-cursor { position: absolute; right: 9%; top: 46%; width: 9%; z-index: 7; }
.jr-cursor path { fill: #fff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }

.jr-dots { position: absolute; right: 4%; top: 40%; display: flex; flex-direction: column; gap: 4px; z-index: 6; }
.jr-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.jr-swatch { position: absolute; left: 4%; bottom: 22%; z-index: 6; width: 15%; aspect-ratio: 1; }
.jr-swatch i { position: absolute; inset: 22% 0 0 22%; background: #63625f; }
.jr-swatch b { position: absolute; inset: 0 22% 22% 0; background: var(--accent); }

.jr-grid6 { position: absolute; right: 4%; bottom: 16%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; z-index: 6; }
.jr-grid6 i { width: clamp(18px, 2.6vh, 26px); aspect-ratio: 1; background: var(--accent); display: grid; place-items: center; }
.jr-grid6 i::after { content:""; width: 45%; height: 45%; border: 1.4px solid #fff; }
.jr-grid6 i:nth-child(2n)::after { border-radius: 50%; }

.jr-bottombar {
  position: absolute; left: 8%; right: 8%; bottom: 8px; height: 11px; z-index: 6;
  border: 1.3px solid var(--accent); border-radius: 6px; background: rgba(255,255,255,.5);
}
.jr-bottombar::after { content:""; position:absolute; left:3%; top:1.5px; bottom:1.5px; width:22%; background: var(--accent); border-radius: 5px; }

@media (prefers-reduced-motion: reduce) { .jr-app { transition: none; } }