/* HAUTE LUMIÈRE — THE INSTRUMENT.
   One statement at a time, on a hairline, with the gold as a mark and never a
   fill. Nothing snaps, bounces or pops: it turns, and it settles.
   Canonical copy: ~/Bastion/Pipeline/lib/hl-instrument.css — edit there and run
   bin/instrument-sync.mjs. */

.hli{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:78px 0}
.hli-in{max-width:46em;margin:0 auto;container-type:inline-size}
.hli-kick{display:block;font-family:"Manrope",sans-serif;font-size:9px;letter-spacing:.30em;
  text-transform:uppercase;color:var(--gold);font-weight:600}
.hli-h{margin:.16em 0 0;font-size:clamp(28px,3.4cqi,42px);line-height:1.06;font-weight:300;
  letter-spacing:-.014em;text-wrap:balance}
.hli-say{margin:16px 0 0;font-size:19px;line-height:1.5;color:var(--muted);font-style:italic;max-width:34em}

.hli-stage{margin-top:34px;border:1px solid var(--rule);position:relative;overflow:hidden}
.hli-rail{height:1px;background:var(--rule);position:relative}
.hli-rail i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--gold);
  transition:width 400ms cubic-bezier(.165,.84,.44,1)}

.hli-card{padding:48px 40px 40px;min-height:15em;display:flex;flex-direction:column;
  gap:34px;justify-content:space-between}
.hli-n{display:block;font-family:"Manrope",sans-serif;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);font-weight:600}
.hli-stmt{margin:20px 0 0;font-size:clamp(23px,3cqi,32px);line-height:1.24;font-weight:300;text-wrap:pretty;
  transition:opacity 200ms cubic-bezier(.165,.84,.44,1),transform 200ms cubic-bezier(.165,.84,.44,1)}
.hli-stage[data-turning="1"] .hli-stmt{opacity:0;transform:translate3d(0,-8px,0)}

.hli-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hli-picks button{min-height:52px;padding:14px 18px;background:transparent;border:1px solid var(--rule);
  color:var(--muted);font-family:"Manrope",sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;cursor:pointer;
  transition:border-color 200ms cubic-bezier(.165,.84,.44,1),color 200ms cubic-bezier(.165,.84,.44,1)}
.hli-picks button:hover{border-color:var(--gold);color:var(--gold)}
.hli-picks button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.hli-foot{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.hli-foot span{font-family:"Manrope",sans-serif;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.hli-back,.hli-again{background:transparent;border:0;padding:12px 0;min-height:44px;color:var(--muted);
  cursor:pointer;font-family:"Manrope",sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.hli-back:hover,.hli-again:hover{color:var(--gold)}
.hli-back[hidden]{display:none}

.hli-con{padding:52px 40px 44px}
.hli-lede{font-size:clamp(21px,2.6cqi,28px);line-height:1.3;font-weight:300;margin:4px 0 0;text-wrap:pretty}
.hli-lede em{font-style:italic;color:var(--gold)}
.hli-why{font-size:17.5px;line-height:1.6;color:var(--muted);margin:14px 0 0;max-width:36em}
.hli-rows{margin:34px 0 0;border-top:1px solid var(--rule)}
.hli-row{display:grid;grid-template-columns:11em 1fr 3.2em;gap:18px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--rule)}
.hli-row .nm{font-size:18px;line-height:1.2}
.hli-row .nm b{font-weight:400;color:var(--gold)}
.hli-row .bar{position:relative;height:1px;background:var(--rule)}
.hli-row .bar i{position:absolute;left:0;top:0;height:1px;background:var(--gold);width:0;
  transition:width 700ms cubic-bezier(.165,.84,.44,1)}
.hli-row .bar u{position:absolute;top:-5px;width:1px;height:11px;background:var(--gold);left:0;
  text-decoration:none;transition:left 700ms cubic-bezier(.165,.84,.44,1)}
.hli-row .v{font-family:"Manrope",sans-serif;font-size:9px;letter-spacing:.14em;color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums}
.hli-acts{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hli-fine{margin:22px 0 0;font-size:15.5px;line-height:1.5;color:var(--muted);font-style:italic}
.hli-con .hli-fine{margin-top:18px}

@media (max-width:640px){
  .hli-card,.hli-con{padding-left:24px;padding-right:24px}
  .hli-row{grid-template-columns:8.4em 1fr 3.2em;gap:12px}
  .hli-row .nm{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .hli-rail i,.hli-row .bar i,.hli-row .bar u,.hli-stmt{transition:none}
}

/* THE TWO-AXIS ROW. A stage read twice: how alive its gift is, and how
   compressed it is. They are not two ends of one line — a stage can be high on
   both at once, which is the most useful thing that map says — so the shadow is
   a second, softer measure lying under the gift rather than opposite it. */
.hli-two .bar s{position:absolute;left:0;top:3px;height:1px;width:0;background:var(--muted);
  text-decoration:none;opacity:.85;transition:width 700ms cubic-bezier(.165,.84,.44,1)}
.hli-two .bar{height:5px;background:transparent}
.hli-two .bar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.hli-two .bar i{top:0}
.hli-two .bar u{top:-4px;height:9px}
.hli-two .row .v,.hli-two .hli-row .v{letter-spacing:.1em}
/* The legend marks are hairlines, 14 by 1 — the same rule the rows draw. The
   dimensions sit on the same declaration as the colour so the checker can see
   for itself that this is a mark and not a fill. */
.hli-swatch{display:inline-block;width:14px;height:1px;vertical-align:middle;margin-right:2px}
.hli-swatch.hli-gift{width:14px;height:1px;background:var(--gold)}
.hli-swatch.hli-shadow{width:14px;height:1px;background:var(--muted)}
@media (prefers-reduced-motion:reduce){ .hli-two .bar s{transition:none} }

/* THE COMPONENT CARRIES ITS OWN BUTTON. It used to emit `.btn` and trust the
   host page to have defined one — which the landing page it was written on had,
   and the volume pages of the canon did not, so the second surface it ever
   landed on rendered its two calls to action as bare blue underlined links.
   A component that assumes the room is not portable. These rules are the house
   button exactly, so on a page that also defines `.btn` the two agree and
   neither fights. Ink for the emphasis, gold as the rule and the caps —
   gold is a mark, never a fill. */
.hli-btn{display:inline-block;font-family:"Manrope",sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;padding:15px 26px;border:1px solid var(--gold);
  color:var(--gold);background:transparent;cursor:pointer;min-height:44px;line-height:1.4;
  text-decoration:none;
  transition:background-color 400ms cubic-bezier(.165,.84,.44,1),color 400ms cubic-bezier(.165,.84,.44,1),
             border-color 400ms cubic-bezier(.165,.84,.44,1)}
.hli-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hli-btn.hli-solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hli-btn.hli-solid:hover{background:transparent;border-color:var(--gold);color:var(--gold)}
.hli-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}