/* The ideas you stopped imagining (film: Within Reach). Everything is scoped to .reach.
   Palette follows the film: warm = the person, ice = the machine passage, sage = tested in the world. */
.reach{--reach-warm:#9a4f26;--reach-warm-soft:#f4e6d8;--reach-warm-line:#dcb99c;--reach-ice:#3d6a82;--reach-ice-soft:#e2ecf0;--reach-sage:#3f6a4b;--reach-sage-soft:#e2ebdc;--reach-paper:#fffaf2;--reach-line:#d5d6ca;--reach-muted:#5f6659}
.reach-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Header: a faint circle of reach behind the title */
.reach .minds-head{position:relative;isolation:isolate;overflow:hidden}
.reach .minds-head::before,.reach .minds-head::after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.reach .minds-head::before{width:min(580px,90vw);aspect-ratio:1;border:1.5px dashed var(--reach-warm-line);opacity:.75}
.reach .minds-head::after{width:min(340px,58vw);aspect-ratio:1;background:radial-gradient(circle,#f4e3d1 0,#f4e3d100 70%)}
.reach h1 em{color:var(--reach-warm)}

/* Text-only chapters */
@media(min-width:801px){.reach .minds-chapters{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reach .reach-chapter{min-height:44px}
.reach .reach-chapter>span{padding:14px 16px 15px}
.reach .reach-chapter strong{font-size:14px}

/* Short answer and claim labels */
.reach-answer{background:var(--reach-paper);border:1px solid var(--reach-line);border-radius:18px;padding:34px 36px 26px;margin:0 0 6px}
.reach-answer .minds-label{display:block;margin:0 0 6px}
.reach-answer h2{font-size:clamp(32px,4vw,46px);line-height:1.08;margin:0 0 18px}
.reach-answer h2 em{color:var(--reach-warm)}
.reach-answer p{margin:0 0 14px}
.reach .reach-answer-link{display:inline-block;font-size:15px;font-weight:600;padding:8px 0;color:var(--reach-warm)}
.reach-legend{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--reach-line);display:flex;flex-wrap:wrap;gap:10px 20px;font-size:13px;line-height:1.5;color:var(--reach-muted)}
.reach-legend li{display:flex;align-items:center;gap:8px}
.reach-kind,.reach .reach-kinds>span:not(.reach-sr){display:inline-block;font:10px/1 var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:#46523f;border:1px solid #b6bcaa;border-radius:30px;padding:5px 9px 4px;background:#fbf9f3}
.reach .reach-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}

/* The circle of reach (metaphor diagram) */
.reach-circle{margin:28px 0}
.reach-circle-frame{background:#fbf8f1;border:1px solid var(--reach-line);border-radius:14px;padding:12px}
.reach-circle svg{display:block;width:100%;max-width:520px;height:auto;margin:auto}
.reach-circle text{font-family:inherit;font-size:16px;fill:#41493c}
.reach-circle .t-muted{fill:#62685c;font-style:italic}
.reach-circle .t-warm{fill:var(--reach-warm);font-weight:600}
.reach-circle .t-sage{fill:var(--reach-sage);font-weight:600}
.reach-circle .c-known{fill:#f4e3d1;stroke:#c99b78;stroke-width:1.5}
.reach-circle .c-new{fill:none;stroke:#7d9b86;stroke-width:1.6;stroke-dasharray:6 7}
.reach-circle .c-path{fill:none;stroke:var(--reach-warm);stroke-width:1.6;stroke-dasharray:3 5}
.reach-circle .c-head{fill:none;stroke:var(--reach-warm);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reach-circle .c-idea{fill:var(--reach-warm)}
.reach-circle .c-idea-new{fill:#fbf8f1;stroke:var(--reach-sage);stroke-width:2}

/* How a model reaches the world */
.reach-flow-figure{margin:26px 0}
.reach-flow{list-style:none;padding:0;margin:0 0 4px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.reach-flow li{position:relative;padding:15px 15px 17px;border-radius:12px}
.reach-flow li:not(:last-child)::after{content:'';position:absolute;right:-12px;top:50%;width:7px;height:7px;border-top:2px solid #8a917f;border-right:2px solid #8a917f;transform:translateY(-50%) rotate(45deg)}
.reach-flow span{display:block;font:10px/1.5 var(--mono,monospace);letter-spacing:.09em;margin-bottom:6px}
.reach-flow strong{display:block;font-weight:500;font-size:15px;line-height:1.5;color:#2b3328}
.reach-flow .is-human{background:var(--reach-warm-soft)}.reach-flow .is-human span{color:var(--reach-warm)}
.reach-flow .is-machine{background:var(--reach-ice-soft)}.reach-flow .is-machine span{color:var(--reach-ice)}
.reach-flow .is-world{background:var(--reach-sage-soft)}.reach-flow .is-world span{color:var(--reach-sage)}

/* Three drawers */
.reach-drawers{display:grid;gap:14px;margin:24px 0 26px}
.reach-drawer{background:var(--reach-paper);border:1px solid var(--reach-line);border-radius:14px;padding:12px 22px 20px}
.reach-drawer::before{content:'';display:block;width:46px;height:5px;border-radius:5px;background:#dcc6b1;margin:0 auto 12px}
.reach-drawer h3{font-size:24px;line-height:1.25;margin:0 0 12px}
.reach-drawer dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:0}
.reach-drawer dt{font:10px/1.5 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.reach-drawer dl>div:first-child dt{color:var(--reach-ice)}
.reach-drawer dl>div:last-child dt{color:var(--reach-warm)}
.reach-drawer dd{margin:0;font-size:15px;line-height:1.65}

/* Felt versus measured */
.reach-gap-figure{margin:24px 0 26px}
.reach-gap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.reach-gap>div{padding:17px 18px 19px;border-radius:12px;background:#ecebe2;border:1px solid transparent}
.reach-gap span{display:block;font:10px/1.5 var(--mono,monospace);letter-spacing:.09em;color:var(--reach-muted)}
.reach-gap strong{display:block;font:400 25px/1.15 var(--serif,Georgia,serif);letter-spacing:-.02em;margin-top:8px}
.reach-gap .is-measured{background:var(--reach-sage-soft);border-color:#a9bfa5}
.reach-gap .is-measured strong{color:var(--reach-sage)}

/* Worked example */
.reach-example{border-block:1px solid var(--reach-line);margin:22px 0 24px}
.reach-example summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px;padding:10px 0;font-size:16px;color:#2f4a36}
.reach-example summary::-webkit-details-marker{display:none}
.reach-example summary span{font-size:20px;transition:transform .2s}
.reach-example[open] summary span{transform:rotate(45deg)}
.reach .reach-sample{background:#f0ede2;color:#2f3a2b;border-radius:12px;padding:18px 20px;margin:4px 0 18px}

/* The five-step worksheet */
.reach-sheet{background:var(--reach-paper);border:1px solid var(--reach-line);border-radius:18px;padding:30px 30px 26px;margin:24px 0 6px}
.reach-steps{list-style:none;padding:0;margin:0}
.reach-step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 18px;padding-bottom:28px}
.reach-step:not(:last-child)::before{content:'';position:absolute;left:21px;top:50px;bottom:6px;width:2px;background:repeating-linear-gradient(var(--reach-warm-line) 0 6px,transparent 6px 11px)}
.reach-step-num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 16px/1 var(--mono,monospace);border:2px solid var(--reach-warm);color:var(--reach-warm);background:var(--reach-paper)}
.reach-step.is-machine .reach-step-num{border-color:var(--reach-ice);color:var(--reach-ice)}
.reach-step.is-world .reach-step-num{border-color:var(--reach-sage);color:#fff;background:var(--reach-sage)}
.reach-step h3{font-size:25px;line-height:1.2;margin:7px 0 6px}
.reach .reach-step p{font-size:16px;line-height:1.7;margin:0;color:#3e463a}
.reach-fields{display:grid;gap:12px;margin-top:14px}
.reach-fields-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.reach-field label{display:block;font:10px/1.5 var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--reach-muted);margin-bottom:5px}
.reach-field input{box-sizing:border-box;width:100%;min-height:46px;font-family:inherit;font-size:16px;line-height:1.4;padding:10px 12px;border:1px solid #c4c7b8;border-radius:9px;background:#fff;color:#252b23}
.reach-field input::placeholder{color:#686e60;opacity:1}
.reach-field input:focus-visible{outline:3px solid #2955bb;outline-offset:2px;border-color:#2955bb}
.reach .reach-redraw{font-size:16px;line-height:1.7;margin:0 0 20px;padding:16px 18px;border-radius:12px;background:var(--reach-sage-soft);color:#2f4a36}

/* The assembled brief */
.reach-brief{background:#243f30;color:#f2f1e4;border-radius:14px;padding:22px 24px}
.reach-brief[hidden]{display:none}
.reach-brief-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.reach-brief h3{font-size:24px;margin:0;color:#f7f6e8}
.reach-brief-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:13.5px/1.75 var(--mono,monospace);color:#e9eedf}
.reach-copy{flex-shrink:0;min-height:44px;padding:10px 20px;border:0;border-radius:30px;background:#edf3df;color:#243f30;font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer}
.reach-copy:hover{background:#ffffff}
.reach .reach-copy:focus-visible{outline:3px solid #9fc1ff;outline-offset:3px}
.reach .reach-brief-status{min-height:1.6em;font-size:13px;line-height:1.6;color:#cfe0c4;margin:10px 0 0}
.reach .reach-brief-hint{font-size:13px;line-height:1.65;color:#c3d1b9;margin:4px 0 0}

/* Closing card, transcript and offer note */
.reach-bottom{position:relative;overflow:hidden;isolation:isolate;margin:44px 0 30px;padding:34px 36px;border-radius:18px;background:var(--reach-warm-soft)}
.reach-bottom::after{content:'';position:absolute;right:-70px;top:-70px;width:220px;aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--reach-warm-line);z-index:-1}
.reach-bottom .minds-label{display:block;margin:0 0 6px}
.reach-bottom h2{font-size:clamp(30px,3.6vw,40px);line-height:1.12;margin:0 0 14px}
.reach-bottom p{margin:0;font-size:17px;line-height:1.75}
.reach-transcript p{font-size:15px;line-height:1.8;margin:0 0 14px}
.reach-transcript p.minds-small{font-size:12px;margin-top:14px}
.reach .reach-offer-note{margin:4px 0 0}

@media(max-width:800px){.reach-answer{padding:30px 28px 24px}}
@media(max-width:640px){
  .reach-flow{grid-template-columns:1fr}
  .reach-flow li:not(:last-child)::after{right:auto;top:auto;left:50%;bottom:-12px;transform:translateX(-50%) rotate(135deg)}
  .reach-fields-3,.reach-drawer dl,.reach-gap{grid-template-columns:1fr}
  .reach-circle text{font-size:19px}
}
@media(max-width:480px){
  .reach-answer{padding:24px 20px 20px;border-radius:14px}
  .reach-sheet{padding:22px 16px 18px;border-radius:14px}
  .reach-step{grid-template-columns:34px minmax(0,1fr);gap:0 12px}
  .reach-step-num{width:34px;height:34px;font-size:14px}
  .reach-step:not(:last-child)::before{left:16px;top:40px}
  .reach-step h3{font-size:22px;margin-top:3px}
  .reach-drawer{padding:12px 18px 18px}
  .reach-bottom{padding:26px 20px}
  .reach-brief{padding:18px 16px}
  .reach-brief-top{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.reach *,.reach *::before,.reach *::after{transition:none!important;animation:none!important}}
@media print{
  .reach .minds-watch,.reach .minds-nav,.reach .minds-actions,.reach .minds-invitation,.reach .minds-next,.reach-copy{display:none!important}
  .reach .minds-head::before,.reach .minds-head::after,.reach-bottom::after{display:none}
  .reach-step{break-inside:avoid}
}