/* ─────────────────────────────────────────────────────────────────────────
   Fyvie AI — site header.

   One header for every page, so it carries its own palette rather than
   reading the page's: the pages do not agree on one. Home and contact are
   paper/ink (css/home.css); team and research are the older dark/orange
   sheet (css/styles.css). Two palettes are defined here — paper by default,
   ink via .is-ink for pages sitting on a dark ground — and the header stays
   monochrome in both, so the hover wipe reads as a straight inversion either
   way. The background is left transparent: the home hero drifts a canvas
   behind this row and the other pages already paint the right ground.

   Load this AFTER the page's own stylesheet. Several rules here tie on
   specificity with selectors in css/styles.css (`nav a:hover`) and win only
   on source order.

   Lengths follow home.css's 80%-scale hero: fixed px values are 0.8x their
   natural size, clamp bounds included.
   ───────────────────────────────────────────────────────────────────────── */

.hv-header{
  --hd-fg:#0E0E0E;              /* ink: the text, and the colour of the cover */
  --hd-bg:#FBFBFA;              /* paper: what the text inverts to */
  --hd-hair:rgba(14,14,14,.08);
  --hd-display:'Stack Sans Notch',Helvetica,Arial,sans-serif;
  --hd-mono:'DM Mono',ui-monospace,monospace;
  --headpad:clamp(17.6px,2.5vw,27.2px);
  --hd-itempad:clamp(11.2px,1.6vw,20px);
  --hd-fly:212px;               /* width of the second-level column — sized
                                   for its longest row, CRITICAL
                                   INFRASTRUCTURE, at nowrap */
  --hd-flyfall:40%;             /* how far it may hang below the first */
}
.hv-header.is-ink{--hd-fg:#f2f0ea;--hd-bg:#080808;--hd-hair:rgba(242,240,234,.13)}

/* Wordmark and menus sit as one group at the left edge; CONTACT is the one
   thing pushed across, by an auto margin inside the nav (which is why the
   nav is allowed to grow). It is filled rather than plain — a solid block of
   --hd-fg running the full height of the row, so it reads as the same black
   the hover covers are made of, already down. */
.hv-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:flex-start;gap:clamp(9.6px,2vw,25.6px);padding:var(--headpad) var(--pad);border-bottom:1px solid var(--hd-hair);color:var(--hd-fg);font-family:var(--hd-mono)}
.hv-header .wordmark{display:flex;align-items:baseline;font-family:var(--hd-display);font-size:clamp(14.4px,1.7vw,17.6px);font-weight:600;line-height:1;letter-spacing:.34em}
.hv-header .wordmark span{color:inherit}

/* The negative margin pulls the nav out to the header's padding box, which
   is what lets the black run the full height of the row and the panel hang
   straight off the hairline. The header's own height still comes from the
   wordmark, since the nav's margin box contributes almost nothing.
   The nav gap is 0 on purpose: what separates one item from the next is the
   items' own horizontal padding, so the cover owns every pixel between two
   words and there is no dead strip for it to stop short of. Widen or narrow
   the spacing with --hd-itempad, never with a gap. */
.hv-header .hv-nav{align-self:stretch;flex:1 1 auto;margin:calc(var(--headpad) * -1) 0;display:flex;align-items:center;gap:0;font-size:8.8px;font-family:var(--hd-mono);letter-spacing:.24em;text-transform:uppercase}
.hv-header .hv-menu{position:relative;align-self:stretch;display:flex}
.hv-header .hv-trigger{position:relative;display:flex;align-items:center;color:inherit;text-decoration:none;isolation:isolate}
.hv-header .hv-trigger:hover{color:inherit}
.hv-header .hv-label{display:block;padding:0 var(--hd-itempad);white-space:nowrap}

/* The cover and the inversion, in one clip. The fill is the same label in
   the opposite colours, laid exactly over the flow copy and clipped away
   from the bottom; opening the clip walks a single hard edge down the row. */
.hv-header .hv-label-fill{position:absolute;inset:0;display:flex;align-items:center;background:var(--hd-fg);color:var(--hd-bg);clip-path:inset(0 0 100% 0);transition:clip-path .26s cubic-bezier(.16,1,.3,1) .14s}
.hv-header .hv-drop{position:absolute;top:100%;left:0;min-width:max(100%,192px);padding-bottom:6.4px;background:var(--hd-fg);color:var(--hd-bg);clip-path:inset(0 0 100% 0);transition:clip-path .28s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hv-header .hv-drop a{display:block;padding:11.2px 11.2px 10.4px;color:inherit;text-decoration:none;opacity:.6;white-space:nowrap;transition:opacity .18s}
.hv-header .hv-drop>*+*{box-shadow:inset 0 1px 0 rgba(128,128,128,.28)}
.hv-header .hv-drop a:hover{color:inherit;opacity:1}

/* Opening: label first, panel a beat behind. Closing runs the delays the
   other way, so the panel retracts before the label does and the whole
   shape only ever moves in one direction.
   A clip-path clips descendants, so a panel carrying a second level has to
   let its own clip out past the column beside it — at inset(0 0 0 0) that
   column is cut away entirely. --hd-fly is the release to the right,
   --hd-flyfall how far the column may run below the panel's floor (it
   shares the panel's top, so the overrun is just its extra rows — one, at
   present: five industries to the panel's four rows). The fall is a
   percentage of the panel's own height, so it follows the row count rather
   than a measured pixel; 40% covers one extra row about twice over. It is
   also the end of the downward wipe, which is why releasing further would
   finish that wipe earlier in the transition. Raise it only if the column
   grows enough to be cut off. Only menus that have a second level are
   released, so the other two keep the sweep exactly. */
.hv-header .hv-menu:hover .hv-label-fill,
.hv-header .hv-menu:focus-within .hv-label-fill{clip-path:inset(0 0 0 0);transition-delay:0s}
.hv-header .hv-menu:hover .hv-drop,
.hv-header .hv-menu:focus-within .hv-drop{clip-path:inset(0 0 0 0);transition-delay:.14s;pointer-events:auto}
.hv-header .hv-menu:hover .hv-drop:has(.hv-sub),
.hv-header .hv-menu:focus-within .hv-drop:has(.hv-sub){clip-path:inset(0 calc(var(--hd-fly) * -1) calc(var(--hd-flyfall) * -1) 0)}


/* Second level: the INDUSTRIES column, hung off the first panel's right
   edge and open whenever the panel is — no second hover to discover. It
   anchors to the panel's top rather than to its own row (the .hv-sub
   wrapper is left unpositioned, so the panel is the containing block), and
   min-height ties its floor to the panel's: the two read as one panel in
   two columns sharing the header rule, with the INDUSTRIES row's arrow
   pointing into the column beside it, rather than as a flyout hanging off
   one row. The column still wipes in sideways — the one direction left that
   does not repeat the rows beside it — delayed until the panel's own wipe
   has landed, so the shape grows down and then right on the way in and
   retracts all at once on the way out (the base transition carries no
   delay, and the closing panel's clip cuts the column with it). */
.hv-header .hv-drop .hv-sub-trigger{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hv-header .hv-drop .hv-sub-trigger span{font-size:11.2px}
.hv-header .hv-subdrop{position:absolute;top:0;left:100%;width:var(--hd-fly);min-height:100%;padding-bottom:6.4px;background:var(--hd-fg);color:var(--hd-bg);box-shadow:inset 1px 0 0 rgba(128,128,128,.28);clip-path:inset(0 100% 0 0);transition:clip-path .26s cubic-bezier(.16,1,.3,1);pointer-events:none}
.hv-header .hv-subdrop a+a{box-shadow:inset 0 1px 0 rgba(128,128,128,.28)}
.hv-header .hv-menu:hover .hv-subdrop,
.hv-header .hv-menu:focus-within .hv-subdrop{clip-path:inset(0 0 0 0);transition-delay:.3s;pointer-events:auto}
.hv-header .hv-drop .hv-sub:hover .hv-sub-trigger{opacity:1}



.hv-header .hv-cta{align-self:stretch;margin-left:auto;display:flex;align-items:center;gap:5.6px;padding:0 clamp(16px,2.2vw,27.2px);background:transparent;color:var(--hd-fg);text-decoration:none;transition:opacity .2s}
.hv-header .hv-cta:hover{color:var(--hd-fg);opacity:.78}
.hv-header .hv-cta span{font-size:11.2px}

/* Narrow: there is no pointer to hover with, so the whole mechanism goes —
   panels, cover and all — and the triggers are left as the plain links to
   the section each menu is about. The nav wraps to its own row rather than
   squeezing five labels in beside the wordmark, which also means the
   negative margin has to come off: it only exists to give the cover the
   full header height, and there is no cover here. */
@media(max-width:760px){
  .hv-header{flex-wrap:wrap;gap:12.8px 16px}
  .hv-header .hv-nav{align-self:auto;margin:0;flex:1 1 100%;flex-wrap:wrap;gap:clamp(6.4px,2.4vw,16px);font-size:8px;letter-spacing:.16em}
  .hv-header .hv-menu{align-self:auto}
  .hv-header .hv-label{padding:0}
  .hv-header .hv-label-fill,.hv-header .hv-drop{display:none}
  .hv-header .hv-cta{align-self:auto;margin-left:auto;padding:8px 12.8px}
}