/* /lenses page.  Layered on site.css. */
/* page-specific, layered on the shared static-page system */
.hero-sub{font-size:1.06rem;line-height:1.6;margin:0 0 8px}
.holds{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.holds li{font-size:.83rem;font-weight:500;color:var(--ink);border:1px solid var(--ink-12);
  border-radius:999px;padding:7px 15px;background:var(--paper)}
.lens{border-top:1px solid var(--ink-12);padding:30px 0 4px}
.lens:first-of-type{border-top:0}
.lens-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 4px}
.lens-h h2{font-family:var(--display);font-weight:400;font-size:1.62rem;margin:0;scroll-margin-top:96px}
.lens-tag{font-size:.63rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:4px 9px;border-radius:2px;white-space:nowrap}
.lens-tag.built{color:#1d4f2b;background:#d8ecdc;border:1px solid #a8cdb2}
.lens-tag.design{color:#5a4a12;background:#f0e7c8;border:1px solid #d3c489}
html.dark .lens-tag.built{color:#b6e3c1;background:#16321d;border-color:#2f5c3b}
html.dark .lens-tag.design{color:#e8d79a;background:#332c10;border-color:#5f5326}
.lens-role{font-size:.8rem;color:var(--ink-60);letter-spacing:.02em;margin:0 0 12px}
.lens p{margin:0 0 12px;color:var(--ink-60)}
.adds{list-style:none;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 20px;border-top:1px solid var(--ink-12)}
.adds li{font-size:.85rem;color:var(--ink-60);padding:10px 0 10px 15px;position:relative;border-bottom:1px solid var(--ink-12)}
.adds li::before{content:"";position:absolute;left:0;top:1.25em;width:7px;height:1px;background:var(--ink-30)}
.evid{border-left:3px solid var(--steel);background:var(--paper-mid);padding:15px 19px;border-radius:0 3px 3px 0;margin:4px 0 20px;font-size:.88rem;color:var(--ink-60)}
.evid .sl+.sl{margin-top:.32rem}
.evid-h{color:var(--ink)}
.adds{margin-bottom:8px}
.adds-x{font-size:.83rem;color:var(--ink-60);margin:0 0 18px}
.road-intro{color:var(--ink-60);margin:16px 0 0;max-width:62ch}

.adds-x span{display:inline-block;font-size:.63rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--link);margin-right:10px}
.contact{white-space:nowrap;padding:11px 16px;font-size:.68rem;letter-spacing:.12em}

/* ---- individual lens pages ---- */
.lens-h h1{margin:0}
.line{border:1px solid var(--ink-12);border-radius:8px;background:var(--paper-mid);
  padding:20px 22px;margin:6px 0 26px}
.line-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--ink-12)}
.line-id{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--link)}
.line-part{font-weight:600;font-size:.95rem;color:var(--ink);margin-right:auto}
.line-r{font-size:.9rem;color:var(--ink);font-weight:600}
.line-r b{font-weight:500;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-60);margin-right:4px}
.line-ap{font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#7a2e18;background:#f4ddd4;border:1px solid #dbb3a4;padding:4px 9px;border-radius:2px}
html.dark .line-ap{color:#f3c0ac;background:#3a1d12;border-color:#6b3a26}
.line-dl{display:grid;grid-template-columns:minmax(0,13rem) 1fr;gap:.55rem 1.4rem;margin:0}
@media(max-width:600px){.line-dl{grid-template-columns:1fr;gap:.1rem}
  .line-dl dt{margin-top:.7rem}.line-top{gap:9px}.line-part{margin-right:0;width:100%}}
.line-dl dt{font-family:var(--body);font-weight:600;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60);padding-top:2px}
.line-dl dd{margin:0;font-size:.9rem;color:var(--ink);line-height:1.55}
.line-f{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--ink-12);
  font-size:.86rem;color:var(--ink-60)}
.notyet{border:1px solid var(--ink-12);border-left:3px solid var(--steel);border-radius:0 6px 6px 0;
  background:var(--paper-mid);padding:20px 24px;margin:26px 0 6px}
.notyet-h{font-family:var(--display);font-weight:400;font-size:1.16rem;color:var(--ink);margin:0 0 .55rem}
.notyet p{font-size:.9rem;color:var(--ink-60);margin:0 0 1rem}
.notyet a{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--link);display:inline-flex;min-height:44px;align-items:center}
.lensnav{border-top:1px solid var(--ink-12);margin-top:46px;padding-top:22px}
.lensnav-h{font-family:var(--body);font-weight:600;font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--link);margin:0 0 12px}
.lensnav-l{display:flex;flex-wrap:wrap;gap:9px}
.lensnav-l a{font-size:.85rem;color:var(--ink-60);border:1px solid var(--ink-12);
  border-radius:999px;padding:9px 16px;min-height:44px;display:inline-flex;align-items:center}
.lensnav-l a:hover{border-color:var(--steel);color:var(--link);text-decoration:none}
.lensnav-l a.is-here{color:var(--ink);border-color:var(--ink-30);background:var(--paper-mid)}
.more{margin:2px 0 4px}
.more a{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--link);display:inline-flex;min-height:44px;align-items:center}
.lens-h h2 a{color:inherit}
.lens-h h2 a:hover{color:var(--link);text-decoration:none}

/* ---- lens roadmap ---- */
.road-intro{font-size:.95rem;color:var(--ink-60);margin:0 0 26px;max-width:60ch}
.road{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0;position:relative}

.road-stage{position:relative;padding:0 20px 0 0}
.road-dot{position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;
  background:var(--paper);box-sizing:border-box;z-index:1}
.is-now .road-dot{border:5px solid var(--steel)}
.is-next .road-dot{border:2px solid var(--steel)}
.is-later .road-dot{border:2px dashed var(--ink-30)}
.road-when{font-family:var(--body);font-weight:600;font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--link);margin:30px 0 14px}
.is-later .road-when{color:var(--ink-60)}
.road-lenses{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.road-lenses li{display:flex;flex-direction:column;gap:2px;
  border-left:2px solid var(--ink-12);padding:6px 0 6px 13px}
.is-now .road-lenses li{border-left-color:var(--steel)}
.is-next .road-lenses li{border-left-color:var(--ink-30)}
.road-lenses a{font-family:var(--display);font-weight:400;font-size:1.12rem;color:var(--ink);
  min-height:34px;display:inline-flex;align-items:center}
.road-lenses a:hover{color:var(--link);text-decoration:none}
.is-later .road-lenses a{color:var(--ink-60)}
.road-lenses span{font-size:.78rem;color:var(--ink-60)}
.road-base{display:flex;align-items:center;gap:14px;margin:22px 0 0;
  font-family:var(--body);font-weight:500;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60)}
.road-rule{flex:1;height:1px;background:var(--ink-12);max-width:180px}
.road-note{font-size:.9rem;line-height:1.7;color:var(--ink-60);margin:clamp(26px,3vw,38px) 0 0;max-width:70ch}
@media(max-width:820px){
  .road{grid-template-columns:1fr;gap:26px}
  .road::before{left:7px;right:auto;top:9px;bottom:9px;width:1px;height:auto;
    background:linear-gradient(to bottom,var(--steel) 0%,var(--ink-30) 55%,var(--ink-12) 100%)}
  .road-stage{padding:0 0 0 34px}
  .road-dot{left:0;top:4px}
  .road-when{margin:0 0 12px}
}

/* ---- lens families ---- */
:root{--fam-risk:#a8442a;--fam-choice:#3c6478;--fam-time:#4a6b3f}
html.dark{--fam-risk:#e0917a;--fam-choice:#8bb4ca;--fam-time:#9dbf90}
.fam li.fam-risk{--f:var(--fam-risk);--ft:var(--fam-risk)}
.fam li.fam-choice{--f:var(--fam-choice);--ft:var(--fam-choice)}
.fam li.fam-time{--f:var(--fam-time);--ft:var(--fam-time)}

/* family colour carries into the roadmap */
.road-lenses li.fam-risk{border-left-color:var(--fam-risk)}
.road-lenses li.fam-choice{border-left-color:var(--fam-choice)}
.road-lenses li.fam-time{border-left-color:var(--fam-time)}
.is-later .road-lenses li{border-left-style:dashed}
.road-lenses li .road-n{font-family:var(--display);font-weight:400;font-size:1.12rem;
  color:var(--ink-60);display:inline-flex;align-items:center;min-height:34px;line-height:1.25}

/* ---- ripple roadmap, after the Euryan mark ---- */
.ripwrap{margin:clamp(26px,3.6vw,46px) 0 0;padding:0}
.ripple{display:block;width:100%;height:auto;max-width:1180px;margin:0 auto;overflow:visible}
.rip{fill:none}
.rip.s-now{stroke:var(--steel);stroke-width:1.6}
.rip.s-next{stroke:var(--steel);stroke-width:1.3;opacity:.55}
.rip.s-later{stroke:var(--ink-30);stroke-width:1.3;stroke-dasharray:5 7}
.rip-stage{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.15em;
  fill:var(--link)}
.rip-stage.s-later{fill:var(--ink-60)}
.rip-model{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:0;
  fill:var(--ink)}
.rip-tick{stroke-width:2}
.rip-tick.f-risk{stroke:var(--fam-risk)}
.rip-tick.f-choice{stroke:var(--fam-choice)}
.rip-tick.f-time{stroke:var(--fam-time)}
.rip-name{font-family:var(--display);font-weight:400;font-size:19px;fill:var(--ink)}
.rip-sub{font-family:var(--body);font-weight:300;font-size:12.5px;fill:var(--ink-60)}

/* the stacked list is the mobile view and the text alternative */
@media(min-width:821px){
  .road,.road-base{display:none}
}
@media(max-width:820px){ .ripwrap{display:none} }

.rip-link{cursor:pointer}
.rip-ul{stroke:var(--ink-40);stroke-width:.9}
.rip-link:hover .rip-ul,.rip-link:focus-visible .rip-ul{stroke:var(--link);stroke-width:1.6}
.rip-link:hover .rip-name{fill:var(--link)}
.rip-link:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px}