/* Journey pages (about/journey/autonomy/ and about/journey/quantum/), Chrysalis authority work, 23 Oct 2026.
   Two narrative pages in the site's light grammar (paper ground, oat and division-tint trays, white cards), each with
   its own artefact: autonomy reads as a physical archive (prints with catalogue captions, a filing-drawer timeline);
   quantum reads as a research notebook (ruled pages, dates in the margin, margin notes). Every milestone carries an
   evidence tag: "Documented" (a source the reader can open) or "Founder's account" (held until documents clear). */

.pg-journey{--jr-paper:#FBFAF7}
.pg-journey .jr-hero{padding:40px 0 8px}
.jr-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 14px/20px var(--sans);color:var(--muted)}
.jr-crumbs a{text-decoration:underline;text-underline-offset:3px}
.jr-crumbs a:hover{color:var(--ink)}
.jr-crumbs [aria-current]{color:var(--ink);font-weight:500}
.jr-hgrid{margin-top:28px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.pg-journey h1{font:600 clamp(40px,5.2vw,68px)/1.04 var(--sans);letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.jr-lead{margin-top:24px;font-size:20px;line-height:30px;color:var(--ink);max-width:36ch;text-wrap:pretty}
.jr-note{margin-top:16px;font-size:15.5px;line-height:24px;color:var(--muted);max-width:52ch}
.jr-btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.pg-journey .chap-head h2{font:500 clamp(30px,3.6vw,44px)/1.1 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.pg-journey a.tx{color:var(--t-ink,var(--brand-text));text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* evidence tags, shared */
.jr-tag{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--mono);letter-spacing:.01em;padding:6px 9px;border-radius:6px;white-space:nowrap}
.jr-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.jr-tag.doc{color:var(--t-ink,var(--ink));background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t,#1D1D1D) 45%,transparent)}
.jr-tag.held{color:#8A4B00;background:#FFF2DF;box-shadow:inset 0 0 0 1px #F3C784}
.jr-src{font:500 13px/1.5 var(--mono);color:var(--muted)}
.jr-src a{color:var(--t-ink,var(--ink));text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.jr-src a:hover{color:var(--ink)}
.pg-journey :is(.jr-src a,a.tx):focus-visible{outline:2px solid var(--t,var(--brand));outline-offset:3px;border-radius:2px}

/* ----- Autonomy: the physical archive ----- */
/* a print: white border, catalogue caption in mono, no tilt */
.jr-print{margin:0;background:#fff;padding:12px 12px 14px;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -28px rgba(0,0,0,.45),inset 0 0 0 1px var(--line)}
.jr-print .jr-img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--oat)}
.jr-print .jr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jr-print figcaption{margin-top:12px;display:grid;gap:4px;font-size:14px;line-height:20px;color:var(--ink)}
.jr-cat{font:500 12px/1.2 var(--mono);color:var(--t-ink,var(--muted));letter-spacing:.02em}
.jr-hero .jr-print{max-width:600px;justify-self:end;width:100%}
/* the contact sheet: prints laid out on the tray, captioned by what each shows and does not show */
.jr-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.jr-sheet>li{display:flex}
.jr-sheet .jr-print{flex:1}
.jr-sheet-note{margin-top:20px;font-size:14px;line-height:21px;color:var(--muted);text-align:center}

/* the filing-drawer timeline: a year tab on the left, its folder of milestones on the right */
.jr-drawer{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.jr-drawer>li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.jr-yr{position:sticky;top:120px;display:grid;gap:6px;padding:18px 20px;border-radius:16px 16px 16px 4px;background:var(--t-btn,var(--ink));color:var(--t-btn-fg,#fff)}
.jr-yr b{font:600 34px/1 var(--mono);letter-spacing:-.02em}
.jr-yr span{font:500 14px/1.3 var(--sans);opacity:.92}
.jr-folder{display:grid;gap:12px}
.jr-item{background:#fff;border-radius:16px;padding:22px 24px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:8px}
.jr-item-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.jr-item h3{font:600 19px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.jr-item p{font-size:15.5px;line-height:24px;color:var(--muted)}
.jr-item .jr-when{font:500 12.5px/1.2 var(--mono);color:var(--t-ink,var(--muted))}
.jr-item.held{background:#FFFBF4;box-shadow:inset 0 0 0 1px #F3D6A6}
.jr-item blockquote{margin:4px 0 0;padding:4px 0 4px 16px;border-left:3px solid var(--t,var(--brand));font-size:16px;line-height:25px;color:var(--ink)}
.jr-now{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--t-btn,var(--ink));color:#fff;border-radius:16px;padding:22px 24px}
.jr-now h3{font:600 19px/1.35 var(--sans);color:#fff}
.jr-now p{margin-top:4px;font-size:15.5px;line-height:24px;color:rgba(255,255,255,.88);max-width:60ch}

/* lessons: three white cards in the tray */
.jr-lessons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.jr-lessons .card{height:100%}
.jr-lessons .tt{font-size:20px}
.jr-lessons .jr-src{margin-top:auto;padding-top:8px}

/* ----- Quantum: the research notebook ----- */
/* a page of the notebook: ruled lines on a pale ground, a margin rule in the division's colour */
.jr-book{position:relative;border-radius:28px;padding:40px 40px 40px 0;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,color-mix(in srgb,var(--t,#1268F7) 14%,transparent) 31px 32px) 0 20px/100% 32px,var(--jr-paper);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t,#1268F7) 22%,var(--line))}
.jr-entries{list-style:none;margin:0;padding:0;display:grid;gap:0}
.jr-entry{display:grid;grid-template-columns:168px minmax(0,1fr) 260px;gap:0;align-items:start}
.jr-entry+.jr-entry{margin-top:40px}
.jr-margin{padding:4px 20px 0 32px;border-right:2px solid color-mix(in srgb,var(--t,#1268F7) 55%,transparent);align-self:stretch}
.jr-margin b{display:block;font:600 22px/1.2 var(--mono);color:var(--t-ink,var(--ink));letter-spacing:-.01em}
.jr-margin span{display:block;margin-top:6px;font:500 12.5px/1.3 var(--mono);color:var(--muted)}
.jr-page{padding:0 32px;display:grid;gap:10px}
.jr-page h3{font:600 22px/1.3 var(--sans);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.jr-page p{font-size:16px;line-height:26px;color:var(--ink);max-width:62ch}
.jr-page .jr-q{font-size:16px;line-height:26px;color:var(--ink);padding:12px 16px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t,#1268F7) 25%,var(--line))}
.jr-page .ph{margin-top:6px;border-radius:12px;max-width:560px}
.jr-aside{display:grid;gap:10px;align-content:start;padding:4px 8px 0 0}
.jr-aside p{font-size:13.5px;line-height:20px;color:var(--muted)}

/* where the line is: two columns, what we do and what we do not claim */
.jr-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.jr-line .card h3{font:600 20px/1.3 var(--sans);color:var(--ink)}
.jr-line ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.jr-line li{position:relative;padding-left:22px;font-size:15.5px;line-height:23px;color:var(--ink)}
.jr-line li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;border-radius:2px;background:var(--t,var(--ink))}
.jr-line .not li::before{background:none;box-shadow:inset 0 0 0 1.5px var(--muted);border-radius:50%}
.jr-line .not{background:var(--jr-paper)}

/* readiness questions: a short list of the questions we write in the margin before anyone says "quantum" */
.jr-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.jr-qs .card h3{font:600 19px/1.35 var(--sans);color:var(--ink);text-wrap:balance}

@media (max-width:1100px){
  .jr-entry{grid-template-columns:140px minmax(0,1fr)}
  .jr-aside{grid-column:2;padding:12px 32px 0}
}
@media (max-width:900px){
  .jr-hgrid{grid-template-columns:minmax(0,1fr);gap:32px}
  .jr-hero .jr-print{justify-self:start}
  .jr-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-drawer>li{grid-template-columns:minmax(0,1fr);gap:10px}
  .jr-yr{position:static;grid-template-columns:auto 1fr;align-items:baseline;gap:12px;border-radius:14px}
  .jr-lessons,.jr-line,.jr-qs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pg-journey .jr-hero{padding-top:20px}
  .jr-lead{font-size:18px;line-height:27px}
  .jr-sheet{gap:12px}
  .jr-print{padding:8px 8px 10px}
  .jr-print figcaption{font-size:13px;line-height:18px;margin-top:8px}
  .jr-item{padding:18px}
  .jr-item-h{flex-direction:column-reverse;gap:8px}
  .jr-item h3,.jr-now h3{font-size:17px}
  .jr-book{padding:24px 0;border-radius:22px}
  .jr-entry{grid-template-columns:minmax(0,1fr)}
  .jr-entry+.jr-entry{margin-top:28px}
  .jr-margin{border-right:0;border-left:3px solid color-mix(in srgb,var(--t,#1268F7) 55%,transparent);padding:0 16px;margin-left:16px;display:flex;align-items:baseline;gap:10px}
  .jr-margin span{margin-top:0}
  .jr-page{padding:10px 16px 0 19px}
  .jr-page h3{font-size:19px}
  .jr-aside{grid-column:auto;padding:10px 16px 0 19px}
}
@media (max-width:420px){.jr-sheet{grid-template-columns:minmax(0,1fr)}}
/* six neighbours sit three to a row on wide screens (the base grid takes over on phones) */
@media (min-width:1001px){.pg-journey .rel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jr-aside .jr-tag{justify-self:start}