/* /journal — Claude's lab journal. Every class is jr- prefixed so this sheet sits next to vault/style.css and
 * music/style.css on the landing page. Colors come from the shared tokens in music/style.css. */
.jr{max-width:1180px; margin:0 auto; padding:0 24px 120px; color:var(--text)}
.jr *{box-sizing:border-box}
.jr-state{color:var(--muted); text-align:center; padding:60px 0}

/* ---- hero ---- */
.jr-hero{padding:34px 0 8px}
.jr-kicker{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin:0 0 8px}
.jr-hero h1{font-size:clamp(32px,5.4vw,56px); line-height:1.02; letter-spacing:-.035em; margin:0 0 12px}
.jr-hero h1 span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.jr-lede{color:var(--muted); font-size:17px; line-height:1.55; max-width:68ch; margin:0}

.jr-index{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0}
.jr-index-link{display:inline-flex; gap:8px; align-items:baseline; padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel2); color:var(--muted); text-decoration:none; font-size:13px}
.jr-index-link b{color:var(--text)}
.jr-index-link:hover{border-color:#3a4653; color:var(--text)}

/* ---- entry ---- */
.jr-entry{position:relative; margin:28px 0 0; padding:28px; border-radius:24px; scroll-margin-top:16px;
  background:linear-gradient(180deg,rgba(20,24,29,.92),rgba(14,18,22,.92)); border:1px solid var(--line);
  box-shadow:0 30px 80px -40px rgba(92,200,255,.18), 0 20px 60px -40px rgba(255,92,138,.22)}
.jr-entry::before{content:""; position:absolute; inset:0; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,92,138,.55),rgba(92,200,255,.35) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.jr-entry-head{display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:center}
.jr-num{font-size:64px; font-weight:800; letter-spacing:-.05em; line-height:.9;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.9}
.jr-entry-meta{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.jr-date{font-size:13px; font-weight:700; color:var(--cyan); letter-spacing:.04em}
.jr-tags{display:flex; flex-wrap:wrap; gap:6px}
.jr-chip{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted)}
.jr-entry-title{font-size:clamp(22px,3vw,32px); line-height:1.12; letter-spacing:-.025em; margin:6px 0 0}
.jr-summary{font-size:17px; line-height:1.65; color:#c9d3de; max-width:78ch; margin:20px 0 0}

/* ---- stat tiles ---- */
.jr-stats{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.jr-stat{background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:16px; padding:16px 16px 14px; display:flex; flex-direction:column; gap:6px}
.jr-stat b{font-size:30px; letter-spacing:-.03em; line-height:1}
.jr-stat small{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; line-height:1.35}
.jr-stat.jr-tone-lime b{color:var(--lime)}
.jr-stat.jr-tone-cyan b{color:var(--cyan)}
.jr-stat.jr-tone-pink b{color:var(--pink)}

/* ---- sections ---- */
.jr-sec{margin:40px 0 0}
.jr-sec-head{margin:0 0 16px}
.jr-sec-title{font-size:21px; letter-spacing:-.02em; margin:0; display:flex; align-items:center; gap:10px}
.jr-sec-title::before{content:""; width:18px; height:3px; border-radius:3px; background:var(--grad); flex:none}
.jr-sec-intro{color:var(--muted); font-size:15px; line-height:1.55; max-width:78ch; margin:8px 0 0}
.jr-note{color:var(--muted); font-size:14px; line-height:1.55; max-width:84ch; margin:14px 0 0; padding:12px 16px;
  border-left:3px solid var(--cyan); background:rgba(92,200,255,.05); border-radius:0 12px 12px 0}

/* gallery */
.jr-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.jr-shot{margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000; position:relative}
.jr-shot-wide{grid-column:1/-1}
.jr-shot-btn{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; line-height:0}
.jr-shot img{width:100%; height:auto; display:block; transition:transform .5s ease, filter .3s ease}
.jr-shot:hover img{transform:scale(1.02); filter:brightness(1.08)}
.jr-shot-video{width:100%; height:auto; display:block; background:#000}
.jr-shot:has(video) figcaption{top:12px; bottom:auto}
.jr-shot figcaption{position:absolute; left:12px; bottom:12px; font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:5px 11px; border-radius:999px; background:rgba(11,13,16,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08); pointer-events:none}
.jr-lightbox{max-width:min(96vw,1400px); padding:0; border:1px solid var(--line); border-radius:16px; background:#000; color:var(--text)}
.jr-lightbox::backdrop{background:rgba(5,6,8,.86); backdrop-filter:blur(6px)}
.jr-lightbox img{display:block; width:100%; height:auto; max-height:84vh; object-fit:contain}
.jr-lb-cap{margin:0; padding:10px 16px; font-size:14px; color:var(--muted)}
.jr-lb-close{position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:rgba(11,13,16,.8); color:var(--text); font-size:22px; line-height:1; cursor:pointer}

/* table */
.jr-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.015)}
.jr-table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
.jr-table th,.jr-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.jr-table thead th{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; background:rgba(255,255,255,.02)}
.jr-table tbody th{font-weight:600; white-space:normal}
.jr-table tbody tr:last-child th,.jr-table tbody tr:last-child td{border-bottom:0}
.jr-table td:nth-child(3){color:var(--lime); font-weight:700}
.jr-table tbody tr:hover{background:rgba(92,200,255,.04)}

/* bars */
.jr-bars{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; max-width:860px}
.jr-bar-row{display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:6px}
.jr-bar-label{color:#c9d3de}
.jr-bar-val{white-space:nowrap}
.jr-bar-track{height:10px; border-radius:999px; background:rgba(255,255,255,.05); overflow:hidden}
.jr-bar-fill{height:100%; border-radius:999px}
.jr-tone-pink .jr-bar-fill{background:linear-gradient(90deg,#ff5c8a,#ff8fb0)}
.jr-tone-cyan .jr-bar-fill{background:linear-gradient(90deg,#3aa8e8,#5cc8ff)}
.jr-tone-lime .jr-bar-fill{background:linear-gradient(90deg,#6fc23a,#9be15d)}
.jr-tone-amber .jr-bar-fill{background:linear-gradient(90deg,#f0a43a,#ffc45c)}
.jr-tone-muted .jr-bar-fill{background:#3a4653}
.jr-tone-pink .jr-bar-val{color:var(--pink)} .jr-tone-cyan .jr-bar-val{color:var(--cyan)}
.jr-tone-lime .jr-bar-val{color:var(--lime)} .jr-tone-amber .jr-bar-val{color:var(--amber)}

/* compare */
.jr-compare{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.jr-cmp{border:1px solid var(--line); border-radius:16px; padding:18px; background:rgba(255,255,255,.02); border-top-width:3px}
.jr-cmp-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.jr-cmp h4,.jr-card h4,.jr-step h4{margin:0; font-size:16px; letter-spacing:-.01em; line-height:1.3}
.jr-cmp p,.jr-card p,.jr-step p{margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.55}
.jr-pill{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius:999px; white-space:nowrap}
.jr-verdict-pass{border-top-color:var(--lime)} .jr-verdict-pass .jr-pill{background:var(--lime); color:#0b0d10}
.jr-verdict-fail{border-top-color:var(--pink)} .jr-verdict-fail .jr-pill{background:var(--pink); color:#0b0d10}
.jr-verdict-mixed{border-top-color:var(--amber)} .jr-verdict-mixed .jr-pill{background:var(--amber); color:#0b0d10}

/* ladder */
.jr-ladder{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; max-width:860px; position:relative}
.jr-step{display:grid; grid-template-columns:44px 1fr; gap:16px; position:relative; padding:0 0 18px}
.jr-step:not(:last-child)::after{content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:linear-gradient(var(--cyan),transparent)}
.jr-step-num{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:18px; color:#0b0d10; background:var(--grad)}
.jr-step-body{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.02)}
.jr-step-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline}
.jr-step-cost{font-size:13px; font-weight:700; color:var(--lime); white-space:nowrap}
.jr-step:last-child .jr-step-cost{color:var(--pink)}

/* cards */
.jr-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.jr-card{border:1px solid var(--line); border-radius:16px; padding:18px; background:rgba(255,255,255,.02); transition:border-color .15s ease, transform .15s ease}
.jr-card:hover{border-color:#3a4653; transform:translateY(-2px)}
.jr-tag{display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; padding:3px 8px; border-radius:999px;
  margin:0 0 10px; color:#0b0d10; background:var(--cyan)}
.jr-tag-mistake .jr-tag{background:var(--pink)}
.jr-tag-habit .jr-tag{background:var(--lime)}
.jr-tag-skill-idea .jr-tag{background:var(--grad)}
.jr-tag-cost .jr-tag,.jr-tag-safety .jr-tag{background:var(--amber)}

/* next */
.jr-next{margin:0; padding:0; list-style:none; counter-reset:jr; display:flex; flex-direction:column; gap:8px; max-width:860px}
.jr-next li{counter-increment:jr; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:baseline; font-size:15px; line-height:1.5;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px}
.jr-next li::before{content:counter(jr,decimal-leading-zero); font-weight:800; color:var(--cyan); font-size:13px}

@media (max-width:760px){
  .jr{padding:0 16px 100px}
  .jr-entry{padding:20px 16px; border-radius:20px}
  .jr-entry::before{border-radius:20px}
  .jr-num{font-size:44px}
  .jr-entry-head{gap:4px 14px}
  .jr-gallery{grid-template-columns:1fr}
  .jr-stats{grid-template-columns:repeat(2,1fr)}
  .jr-stat b{font-size:24px}
  .jr-step{grid-template-columns:36px 1fr; gap:12px}
  .jr-step-num{width:36px; height:36px; font-size:15px}
  .jr-step:not(:last-child)::after{left:17px; top:36px}
}
@media (prefers-reduced-motion:reduce){
  .jr-shot img,.jr-card{transition:none}
  .jr-shot:hover img,.jr-card:hover{transform:none}
}