/*
 * /resume component styles. Loaded only on /resume. The lens switcher chips
 * follow the design language section 6 (rectangular, 1px hair border, ink
 * text; selected: ink fill, paper text). The loupe treatment (the sanctioned
 * BVS crossover) is reserved to its own Artlord pass; this is the mechanism
 * and the legible register. Lens block typography uses the type ramp; the
 * keywords block reuses the .pantry treatment (styled in base.css).
 */

.resume-downloads{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-block:var(--sp-6);}

/* ============================================================
   The interactive timeline (zones 1-3). Ported from the approved comp
   (canon/design/timeline-handoff/timeline-comp.html); the locked
   illumination and loupe values (spec 1.3-1.6) are verbatim, families
   and shared colours via tokens. lens.js enhances; this is the no-JS
   generalist state.
   ============================================================ */
.lens{margin-block:var(--sp-7);}

/* ---- ZONE 1: the rail (the glance) ---- */
.timeline{position:relative;height:140px;margin-top:var(--sp-6);}
.tl-rail{position:absolute;left:11.3%;right:0;top:76px;height:1px;background:var(--hair);}
.origins{position:absolute;left:0;top:44px;width:11.3%;}
.origins .o-seg{position:absolute;left:0;right:7px;top:32px;height:1px;
  background:repeating-linear-gradient(to right,#C9BB9E 0 4px,transparent 4px 8px);}
.origins .o-sub{position:absolute;top:19px;right:10px;font-family:var(--sans);
  font-size:8.5px;letter-spacing:.04em;color:#A89D89;line-height:1.1;white-space:nowrap;}

.station{position:absolute;top:0;left:var(--pos);transform:translateX(-50%);
  width:0;height:140px;font-family:var(--sans);
  text-decoration:none;color:inherit;pointer-events:none;}
.st-label{position:absolute;transform:translateX(-50%);left:50%;white-space:nowrap;
  text-align:center;font-size:12px;letter-spacing:.02em;line-height:1.15;
  transition:color .26s ease,font-weight .26s ease,opacity .26s ease,font-size .26s ease;}
.st-label.hi{top:8px;}
.st-label.lo{top:32px;}
.st-dot{position:absolute;top:66px;left:50%;transform:translate(-50%,0) scale(var(--sc,.8));
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--fill,#6E6457);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),background-color .26s ease,box-shadow .26s ease;}
.st-dot b{font-size:10px;font-weight:600;line-height:1;color:var(--numc,#FAF6EE);transition:color .26s ease;}
.st-year{position:absolute;top:94px;left:50%;transform:translateX(-50%);font-size:10px;
  letter-spacing:.02em;color:var(--muted);white-space:nowrap;}

.station.t-peripheral{--sc:.64;--fill:#CCC3B2;--numc:#6B6253;}
.station.t-present{--sc:.80;--fill:#6E6457;--numc:#FAF6EE;}
.station.t-strong{--sc:.96;--fill:#3A352E;--numc:#FAF6EE;}
.station.t-blazing{--sc:1.18;--fill:#1C1A17;--numc:#FAF6EE;}

.station.t-peripheral .st-label{color:var(--muted);font-weight:400;opacity:.9;font-size:11.5px;}
.station.t-present .st-label{color:#4A4339;font-weight:500;opacity:1;font-size:12px;}
.station.t-strong .st-label{color:#232019;font-weight:600;opacity:1;font-size:12.25px;}
.station.t-blazing .st-label{color:var(--ink);font-weight:700;opacity:1;font-size:12.5px;}
.station.t-peripheral .st-year{opacity:.7;}
.station.t-strong .st-dot{box-shadow:0 2px 7px rgba(28,26,23,.10);}
.station.t-blazing .st-dot{box-shadow:0 0 0 5px rgba(28,26,23,.035),0 3px 12px rgba(28,26,23,.16);}

/* NOW: always red; tier modulates size + brightness + glow, never hue */
.station.is-now .st-dot{background:var(--red);}
.station.is-now.t-present .st-dot{--sc:.80;opacity:.82;box-shadow:none;}
.station.is-now.t-strong .st-dot{--sc:.96;opacity:1;box-shadow:0 2px 8px rgba(192,17,26,.16);}
.station.is-now.t-blazing .st-dot{--sc:1.18;opacity:1;box-shadow:0 0 0 5px rgba(192,17,26,.06),0 3px 12px rgba(192,17,26,.26);}
.station.is-now .st-label{color:var(--red);}
.station.is-now.t-present .st-label{font-weight:600;opacity:.82;}
.station.is-now.t-strong .st-label{font-weight:600;}
.station.is-now.t-blazing .st-label{font-weight:700;}

/* ---- ZONE 2: the lens selector, carried by the loupe (the control) ---- */
.lenswrap{margin-top:46px;padding-top:32px;border-top:1px solid var(--hair);}
.lens-eyebrow{font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#B4A993;text-align:center;margin-bottom:60px;}
.lens-bar{position:relative;height:60px;max-width:600px;margin:0 auto;}
.lens-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;}
.lens-pick{flex:0 0 140px;width:140px;height:140px;display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.2;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:#A89D89;text-decoration:none;transition:color .26s ease;}
.lens-pick.active{color:var(--ink);}
.lens-pick:not(.active):hover{color:var(--muted);}

/* the loupe (JS-built): selection-driven, hairline rim, no gloss, no shadow */
.loupe{position:absolute;width:140px;height:140px;border-radius:50%;pointer-events:none;
  transition:left .3s cubic-bezier(.22,.61,.36,1),top .3s cubic-bezier(.22,.61,.36,1);
  display:flex;align-items:center;justify-content:center;background:var(--paper);
  border:1px solid rgba(28,26,23,.5);box-shadow:inset 0 0 0 1px rgba(217,205,184,.65);}
.loupe-label{font-family:var(--sans);font-weight:600;text-transform:uppercase;font-size:13px;
  letter-spacing:.10em;color:var(--ink);white-space:nowrap;}

/* ---- ZONE 3: the inline read (facts in the margin) ---- */
.lens-reads{max-width:760px;margin:54px 0 0;}
.z3-summary{font-family:var(--serif);font-size:13.5px;line-height:1.62;color:var(--ink);max-width:60ch;margin:0 0 30px;}
.z3-role{display:grid;grid-template-columns:1fr 132px;column-gap:30px;padding:18px 0;border-top:1px solid var(--hair);}
.z3-role:first-of-type{border-top:none;padding-top:0;}
.z3-date{grid-column:2;grid-row:1;font-family:var(--sans);font-size:10.5px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;padding-top:5px;}
.z3-main{grid-column:1;grid-row:1;}
.z3-title{font-family:var(--serif);font-weight:700;font-size:14px;line-height:1.3;color:var(--ink);margin:0;}
.z3-employer{font-family:var(--sans);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:3px 0 9px;}
.z3-bullets{margin:0;padding:0;list-style:none;}
.z3-bullets li{position:relative;font-family:var(--serif);font-size:12px;line-height:1.5;color:var(--ink);padding-left:16px;margin-bottom:5px;}
.z3-bullets li:last-child{margin-bottom:0;}
.z3-bullets li::before{content:'';position:absolute;left:2px;top:8px;width:3px;height:3px;border-radius:50%;background:var(--red);}
.zone3 .m{color:var(--red);font-weight:500;}
.z3-cs{margin:9px 0 0;font-family:var(--sans);}
.z3-cs-label{text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:var(--muted);margin-right:10px;}
.z3-cs a{font-size:11px;}
.z3-keys{font-family:var(--sans);font-size:11px;letter-spacing:.02em;color:var(--muted);line-height:1.65;margin-top:26px;padding-top:18px;border-top:2px solid var(--ink);}
.z3-keylabel{display:inline-block;font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-right:12px;}
.z3-patents{font-family:var(--serif);font-style:italic;font-size:11px;color:var(--muted);margin-top:10px;}
.z3-up{display:none;}  /* return-to-timeline link: mobile navigator only */

/* ---- responsive: the mobile reset (Tastemonger direction, 2026-06-17) ----
   Below 720px the zones invert top-to-bottom: the compact facet selector
   first (reachable without scrolling), then the vertical rail as a tap
   navigator, then the read. Each chip is a 44px anchor to its role; each role
   carries a return link. No loupe on mobile. (Reduced-motion is handled
   sitewide in base.css.) */
@media (max-width:720px){
  .lens{display:flex;flex-direction:column;}
  .lenswrap{order:1;margin-top:0;padding-top:0;border-top:0;}
  .timeline{order:2;}
  .lens-reads{order:3;}

  /* 1. the compact facet selector (no loupe) */
  .lens-eyebrow{margin-bottom:14px;}
  .lens-bar{max-width:none;width:100%;height:auto;}
  .lens-row{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .lens-pick{position:static;width:100%;height:auto;min-height:44px;flex:none;
    padding:11px 8px;border:1px solid var(--hair);color:var(--muted);}
  .lens-pick.active{border-color:var(--ink);color:var(--ink);}
  .loupe{display:none;}

  /* 2. the vertical rail as navigator (reverse-chron: NOW top, MSR bottom) */
  .timeline{height:420px;margin-top:28px;scroll-margin-top:16px;}
  .tl-rail{left:11px;right:auto;top:45px;width:1px;height:312px;}
  .origins{top:368px;left:0;width:auto;}
  .origins .o-seg{left:11px;right:auto;top:0;width:1px;height:34px;
    background:repeating-linear-gradient(to bottom,#C9BB9E 0 4px,transparent 4px 8px);}
  .origins .o-sub{left:34px;right:auto;top:11px;}
  .station{left:0;top:calc(34px + (6 - var(--row))*52px);transform:none;width:100%;height:auto;
    min-height:44px;pointer-events:auto;display:flex;flex-direction:row;align-items:center;gap:12px;}
  .st-dot{position:static;top:auto;left:auto;transform:scale(var(--sc,.8));order:1;flex:0 0 22px;}
  .st-label{position:static;top:auto;left:auto;transform:none;text-align:left;order:2;}
  .st-label.hi,.st-label.lo{top:auto;}
  .st-year{position:static;top:auto;left:auto;transform:none;order:3;margin-left:auto;}
  .station.t-peripheral .st-label{font-size:12.5px;}
  .station.t-present .st-label{font-size:13px;}
  .station.t-strong .st-label{font-size:13.5px;}
  .station.t-blazing .st-label{font-size:14px;}

  /* 3. the read */
  .lens-reads{max-width:none;margin-top:38px;}
  .z3-summary{font-size:14px;max-width:none;margin-bottom:24px;}
  .z3-role{grid-template-columns:1fr;column-gap:0;scroll-margin-top:16px;}
  .z3-date{grid-column:1;grid-row:1;padding-top:0;margin-bottom:5px;}
  .z3-main{grid-column:1;grid-row:2;}
  .z3-bullets li{font-size:13px;}
  .z3-up{display:inline-block;margin-top:12px;padding:11px 0;font-family:var(--sans);
    font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-decoration:none;}
  .z3-up:hover,.z3-up:focus{color:var(--ink);}
}