/* ==========================================================================
   home-v2.css  -  new home page, site navbar and footer (PLAN-home-page.md)
   Ported from home-preview.html. Do not redesign; change tokens only.

   SCOPING
   - Every class starts with "hv-". Every rule is under .hv (home page) or
     .hv-footer (site footer), so nothing leaks into Bootstrap or old pages.
     The site navbar (.hv-nav, section 8b) shares the same scoping through the :is(...) lists.
   - Only custom properties named --hv-* are defined on <body>. Nothing else
     in the project uses that prefix.
   - Theme: <body data-home-theme="gold|crimson|glitch">. Missing = Gold.
   ========================================================================== */

/* ---- 1. THE ONE PLACE THE LOGO IS CHOSEN (watermark mask) ----------------
   Swap the file here. The nav/footer chip uses an <img> instead (Step 3),
   with src ~/img/home/hfe-mark-128.png and asp-append-version. */
body {
  --hv-logo: url("../img/home/hfe-mark-768.png");
}

/* ---- 2. THEME TOKENS (exact preview values) ----------------------------- */
body {
  --hv-bg: #0c0b0a; --hv-bg2: #14110e; --hv-ink: #efe3d0; --hv-mut: #a39a8a;
  --hv-acc: #d9b98a; --hv-line: rgba(217,185,138,.32); --hv-card: rgba(217,185,138,.06);
  --hv-glow: rgba(217,185,138,.35); --hv-o1: #f3dcb6; --hv-o2: #8a6a3c;
  --hv-body: 'DM Sans', system-ui, sans-serif;
  --hv-disp: 'Anton', 'Impact', sans-serif;
  --hv-r: 16px;
}
body[data-home-theme="gold"] { /* same as default; explicit for clarity */
  --hv-bg: #0c0b0a; --hv-bg2: #14110e; --hv-ink: #efe3d0; --hv-mut: #a39a8a;
  --hv-acc: #d9b98a; --hv-line: rgba(217,185,138,.32); --hv-card: rgba(217,185,138,.06);
  --hv-glow: rgba(217,185,138,.35); --hv-o1: #f3dcb6; --hv-o2: #8a6a3c;
}
body[data-home-theme="crimson"] {
  --hv-bg: #0d0707; --hv-bg2: #150a0a; --hv-ink: #f1e5d3; --hv-mut: #a69590;
  --hv-acc: #d9424c; --hv-line: rgba(217,66,76,.45); --hv-card: rgba(217,66,76,.07);
  --hv-glow: rgba(192,48,58,.4); --hv-o1: #e0505a; --hv-o2: #4a0a10;
}
body[data-home-theme="glitch"] {
  --hv-bg: #050805; --hv-bg2: #09100a; --hv-ink: #e9ece9; --hv-mut: #8fa68d;
  --hv-acc: #39ff14; --hv-line: rgba(57,255,20,.4); --hv-card: rgba(57,255,20,.05);
  --hv-glow: rgba(57,255,20,.35); --hv-o1: #9dff85; --hv-o2: #0b3a05;
  --hv-body: 'JetBrains Mono', ui-monospace, monospace;
  --hv-r: 0px;
}

/* ---- 3. BASE (scoped reset, shared pieces) ------------------------------ */
.hv { background: var(--hv-bg); color: var(--hv-ink); font: 400 15px/1.6 var(--hv-body); overflow-x: clip; }
.hv-footer { background: var(--hv-bg2); color: var(--hv-ink); font: 400 15px/1.6 var(--hv-body); }
.hv-nav { background: var(--hv-bg); color: var(--hv-ink); font: 400 15px/1.6 var(--hv-body); }
.hv *, .hv *::before, .hv *::after,
.hv-footer *, .hv-footer *::before, .hv-footer *::after,
.hv-nav *, .hv-nav *::before, .hv-nav *::after { box-sizing: border-box; margin: 0; }
:is(.hv, .hv-footer, .hv-nav) a { color: inherit; text-decoration: none; }
:is(.hv, .hv-footer, .hv-nav) a:focus-visible,
:is(.hv, .hv-footer, .hv-nav) button:focus-visible,
:is(.hv, .hv-footer, .hv-nav) select:focus-visible { outline: 2px solid var(--hv-acc); outline-offset: 3px; }

:is(.hv, .hv-footer, .hv-nav) .hv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; }
:is(.hv, .hv-footer, .hv-nav) .hv-sm { font-size: 12px; letter-spacing: .12em; color: var(--hv-mut); text-transform: uppercase; }

/* buttons */
:is(.hv, .hv-footer, .hv-nav) .hv-btn { border: 1px solid var(--hv-line); border-radius: 30px; padding: 11px 22px; font: 700 13px var(--hv-body); display: inline-flex; gap: 8px; align-items: center; background: transparent; color: var(--hv-ink); cursor: pointer; transition: .2s; }
:is(.hv, .hv-footer, .hv-nav) .hv-btn--s { padding: 8px 16px; }
:is(.hv, .hv-footer, .hv-nav) .hv-btn--p { background: var(--hv-acc); border-color: var(--hv-acc); color: var(--hv-bg); }
:is(.hv, .hv-footer, .hv-nav) .hv-btn:hover { border-color: var(--hv-acc); color: var(--hv-acc); }
:is(.hv, .hv-footer, .hv-nav) .hv-btn--p:hover { color: var(--hv-bg); opacity: .9; }
body[data-home-theme="glitch"] :is(.hv, .hv-footer, .hv-nav) .hv-btn { border-radius: 0; }

/* logo lockup: light chip + wordmark (nav and footer) */
:is(.hv, .hv-footer, .hv-nav) .hv-logo { font: 400 24px var(--hv-disp); letter-spacing: .04em; display: flex; align-items: center; gap: 10px; }
:is(.hv, .hv-footer, .hv-nav) .hv-lg { height: 48px; width: auto; display: block; object-fit: contain; flex: none; }

/* ---- 4. HERO ------------------------------------------------------------- */
.hv .hv-hero { position: relative; overflow: hidden; padding: 22px 0 40px; isolation: isolate; }
/* decoration: behind everything, never catches clicks */
.hv .hv-cloud { position: absolute; inset: 0; pointer-events: none; }
.hv .hv-cloud i { position: absolute; border-radius: 50%; filter: blur(70px); background: var(--hv-glow); opacity: .55; animation: hv-drift 26s ease-in-out infinite alternate; }
.hv .hv-cloud i:nth-child(1) { width: 46vw; height: 46vw; left: -10vw; top: -12vw; }
.hv .hv-cloud i:nth-child(2) { width: 36vw; height: 36vw; right: -8vw; top: 6vw; animation-duration: 34s; opacity: .35; }
.hv .hv-cloud i:nth-child(3) { width: 30vw; height: 30vw; left: 35vw; top: 22vw; animation-duration: 30s; opacity: .25; }
@keyframes hv-drift { to { transform: translate(6vw, 4vw) scale(1.12); } }
.hv .hv-cloud::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--hv-line) 1px, transparent 1px), linear-gradient(90deg, var(--hv-line) 1px, transparent 1px); background-size: 64px 64px; opacity: .12; -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); }
.hv .hv-wm { position: absolute; left: 50%; top: 46%; width: min(66vw, 760px); aspect-ratio: 1.15; transform: translate(-50%, -50%); background: var(--hv-acc); opacity: .1; -webkit-mask: var(--hv-logo) center/contain no-repeat; mask: var(--hv-logo) center/contain no-repeat; z-index: 0; pointer-events: none; animation: hv-flt 16s ease-in-out infinite alternate; }
@keyframes hv-flt { to { transform: translate(-50%, -53%) scale(1.04); } }
.hv .hv-hero > .hv-wrap { z-index: 1; }

.hv .hv-big { font: 400 clamp(70px, 19vw, 270px)/.88 var(--hv-disp); text-transform: uppercase; text-align: center; position: relative; z-index: 1; margin-top: 20px; }
/* Glitch effect on the hero word (the only Glitch-specific motion) */
body[data-home-theme="glitch"] .hv .hv-big { text-shadow: -3px 0 rgba(57,255,20,.5), 3px 0 rgba(255,255,255,.12); }
body[data-home-theme="glitch"] .hv .hv-big::before,
body[data-home-theme="glitch"] .hv .hv-big::after { content: attr(data-t); position: absolute; inset: 0; overflow: hidden; }
body[data-home-theme="glitch"] .hv .hv-big::before { color: var(--hv-acc); clip-path: inset(20% 0 60% 0); animation: hv-gl 3.2s steps(1) infinite; transform: translateX(-6px); }
body[data-home-theme="glitch"] .hv .hv-big::after { color: #fff; clip-path: inset(65% 0 10% 0); animation: hv-gl 2.6s steps(1) infinite reverse; transform: translateX(6px); }
@keyframes hv-gl { 0%, 86% { opacity: 0; } 87% { clip-path: inset(10% 0 70% 0); opacity: 1; } 92% { clip-path: inset(55% 0 25% 0); opacity: 1; } 96% { clip-path: inset(80% 0 5% 0); opacity: 1; } 100% { opacity: 0; } }

.hv .hv-herobar { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 40px; align-items: end; margin-top: 34px; position: relative; z-index: 3; }
.hv .hv-herobar h1, .hv .hv-herobar h2 { font: 400 clamp(26px, 3.4vw, 40px)/1.05 var(--hv-disp); text-transform: uppercase; color: var(--hv-acc); margin: 8px 0 12px; }
.hv .hv-herobar p { color: var(--hv-mut); max-width: 44ch; }
.hv .hv-herobar .hv-lead { font-size: 16px; color: var(--hv-ink); margin-top: 10px; }
.hv .hv-herobar .hv-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* spotlight rail */
.hv .hv-railhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hv .hv-arrows { display: flex; gap: 8px; align-items: center; }
.hv .hv-arrows[hidden] { display: none; }
.hv .hv-arrows button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hv-line); background: transparent; color: var(--hv-ink); cursor: pointer; font-size: 16px; }
body[data-home-theme="glitch"] .hv .hv-arrows button { border-radius: 0; }
.hv .hv-arrows button:hover { border-color: var(--hv-acc); color: var(--hv-acc); }
.hv .hv-count { font: 400 26px var(--hv-disp); color: var(--hv-acc); margin-left: 8px; }
/* The rail scrolls sideways, which also clips vertically. Cards lift 6px on hover/focus, so the rail needs
   more than 6px of room above them (plus a little below for the border). The negative margin gives that
   room back so the layout does not move. */
.hv .hv-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 12px 0 6px; margin: -8px 0 -2px; }
.hv .hv-rail::-webkit-scrollbar { display: none; }
.hv .hv-tall { flex: 0 0 184px; height: 256px; scroll-snap-align: start; border: 1px solid var(--hv-line); border-radius: var(--hv-r); padding: 56px 14px 14px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--hv-acc) 22%, var(--hv-bg)), var(--hv-bg2)); transition: .3s; }
.hv .hv-tall:hover, .hv .hv-pj:hover { transform: translateY(-6px); border-color: var(--hv-acc); }
.hv .hv-tall::before { content: attr(data-n); position: absolute; top: 8px; right: 12px; font: 400 40px var(--hv-disp); color: var(--hv-acc); opacity: .35; }
/* Long titles / tags / owner names are clamped so a card never grows past its box or runs into the big number. */
.hv .hv-tall b { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.hv .hv-tall span { font-size: 11px; line-height: 1.45; color: var(--hv-mut); margin-top: 4px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* Step 7: keyboard focus. The angled cards are clipped by clip-path and the rail / strip scroll, so a
   normal outline would be cut off. Give keyboard focus the same cue as hover instead, plus an inset ring. */
.hv .hv-ag:focus-visible { outline: none; filter: brightness(1.25); }
.hv .hv-ag:focus-visible::after { transform: scaleX(1); }
.hv .hv-tall:focus-visible { outline-offset: -3px; transform: translateY(-6px); border-color: var(--hv-acc); }
.hv .hv-pj:focus-visible { transform: translateY(-6px); border-color: var(--hv-acc); }
.hv .hv-strip a:focus-visible, .hv .hv-strip button:focus-visible { outline-offset: -4px; }

/* ---- 5. PROJECT TYPE STRIP ---------------------------------------------- */
.hv .hv-strip { display: flex; gap: 0; border: 1px solid var(--hv-line); border-left: 0; border-right: 0; background: var(--hv-card); overflow-x: auto; scrollbar-width: none; }
.hv .hv-strip a, .hv .hv-strip button { flex: 1; min-width: 120px; padding: 16px; border: 0; border-right: 1px solid var(--hv-line); background: transparent; color: var(--hv-mut); font: 700 12px var(--hv-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-align: center; }
.hv .hv-strip > :last-child { border-right: 0; }
.hv .hv-strip a[aria-current="true"], .hv .hv-strip [aria-pressed="true"], .hv .hv-strip a:hover, .hv .hv-strip button:hover { color: var(--hv-acc); background: var(--hv-card); }
.hv .hv-strip a[aria-current="true"], .hv .hv-strip [aria-pressed="true"] { box-shadow: inset 0 -2px var(--hv-acc); }

/* ---- 6. SECTIONS, FILTERS, CARDS ---------------------------------------- */
.hv .hv-sec { margin-top: 70px; }
.hv .hv-sh { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.hv .hv-sh h2 { font: 400 clamp(28px, 3.4vw, 40px)/1 var(--hv-disp); text-transform: uppercase; }
.hv .hv-sh h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--hv-acc); margin-top: 8px; }
.hv .hv-sh i { flex: 1; min-width: 20px; height: 1px; background: var(--hv-line); }
.hv select { background: var(--hv-card); color: var(--hv-ink); border: 1px solid var(--hv-line); border-radius: 30px; padding: 8px 14px; font: 500 13px var(--hv-body); }
body[data-home-theme="glitch"] .hv select { border-radius: 0; }
.hv select option { background: #111; color: #eee; }

/* angled portfolio cards */
.hv .hv-angled { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 6px; }
.hv .hv-ag { display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; padding: 22px 26px 20px; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--hv-acc) 16%, var(--hv-bg2)), var(--hv-bg2)); position: relative; transition: .3s; margin-left: -4%; }
.hv .hv-ag:first-child { margin-left: 0; }
.hv .hv-ag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--hv-acc); transform: scaleX(0); transform-origin: left; transition: .3s; }
.hv .hv-ag:hover { filter: brightness(1.25); }
.hv .hv-ag:hover::after { transform: scaleX(1); }
.hv .hv-mono { font: 400 64px/1 var(--hv-disp); color: var(--hv-acc); margin-bottom: auto; padding-top: 20px; padding-left: 12%; }
.hv .hv-ag b { font: 400 22px/1.1 var(--hv-disp); text-transform: uppercase; padding-left: 8%; }
.hv .hv-ag small { color: var(--hv-acc); font-size: 12px; padding-left: 8%; letter-spacing: .1em; text-transform: uppercase; }
.hv .hv-ag p { font-size: 12px; color: var(--hv-mut); padding-left: 8%; padding-right: 10%; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* project cards */
.hv .hv-projs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hv .hv-pj { border: 1px solid var(--hv-line); border-radius: var(--hv-r); overflow: hidden; background: var(--hv-card); transition: .3s; display: flex; flex-direction: column; }
.hv .hv-pj .hv-im { aspect-ratio: 4/3.2; display: flex; align-items: flex-end; padding: 14px; position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--hv-acc) 26%, var(--hv-bg)), var(--hv-bg2)); }
.hv .hv-pj .hv-im::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, var(--hv-glow), transparent 60%); }
.hv .hv-pj .hv-im em { position: relative; font: 400 26px/1 var(--hv-disp); font-style: normal; text-transform: uppercase; }
.hv .hv-pj .hv-tx { padding: 14px 16px 16px; display: grid; gap: 4px; }
.hv .hv-pj .hv-tx small { color: var(--hv-mut); font-size: 12px; }
.hv .hv-pj .hv-tx p { font-size: 13px; color: var(--hv-mut); }
/* Safety net under the 140-character excerpt: never more than 4 lines, so cards stay even. */
.hv .hv-pj .hv-tx p { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hv .hv-badge { font-size: 11px; font-weight: 700; color: var(--hv-acc); letter-spacing: .1em; text-transform: uppercase; }
.hv .hv-empty { padding: 40px; text-align: center; color: var(--hv-mut); border: 1px dashed var(--hv-line); border-radius: var(--hv-r); grid-column: 1 / -1; }

/* Step 4 additions: pieces the real (server-rendered) page needs that the static preview did not. */
/* Flash messages (TempData Message / Error) above the hero. */
.hv .hv-alert { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--hv-line); border-radius: min(var(--hv-r), 14px); background: var(--hv-card); font-size: 14px; }
.hv .hv-alert--ok { border-color: var(--hv-acc); }
.hv .hv-alert--err { border-color: #d9424c; color: #ffb4b9; }
/* The filter form sits in the section header row, next to the title and the rule. */
.hv .hv-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
/* A project with a real thumbnail: the image fills the card's picture area. */
.hv .hv-pj .hv-im--img { padding: 0; overflow: hidden; }
.hv .hv-pj .hv-im--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Space under the last section. The join band has its own top margin; without the band the
   footer would sit tight against the last card (the old footer had a 3rem margin). */
.hv .hv-content--end { padding-bottom: 90px; }

/* ---- 7. JOIN BAND (light) ------------------------------------------------ */
.hv .hv-join { margin-top: 90px; position: relative; padding: 70px 0 80px; color: #17120b; background: linear-gradient(135deg, color-mix(in srgb, var(--hv-acc) 62%, #fff), color-mix(in srgb, var(--hv-acc) 22%, #f6efe4)); }
.hv .hv-join .hv-w { font: 400 clamp(80px, 17vw, 230px)/.85 var(--hv-disp); text-transform: uppercase; letter-spacing: -.01em; }
.hv .hv-panel { position: relative; margin: -30px 0 0 auto; width: min(620px, 100%); border-radius: 28px; padding: 30px; background: rgba(12,11,10,.9); color: var(--hv-ink); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
body[data-home-theme="glitch"] .hv .hv-panel { border-radius: 0; }
.hv .hv-panel h3 { font: 400 28px/1.05 var(--hv-disp); text-transform: uppercase; color: var(--hv-acc); }
.hv .hv-panel p { color: var(--hv-mut); margin: 8px 0 16px; }
.hv .hv-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.hv .hv-three div { background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 18px; backdrop-filter: blur(6px); }
body[data-home-theme="glitch"] .hv .hv-three div { border-radius: 0; }
.hv .hv-three b { display: block; font: 400 22px var(--hv-disp); text-transform: uppercase; }
.hv .hv-three span { font-size: 13px; opacity: .75; }

/* ---- 8. SITE FOOTER (lives outside .hv, in _Layout) ---------------------- */
.hv-footer { padding: 50px 0 90px; border-top: 1px solid var(--hv-line); position: relative; z-index: 40; /* below the sidebar drawer (50) and backdrop (45) */ }
.hv-footer .hv-fg { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.hv-footer .hv-fg h4 { font: 700 12px var(--hv-body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.hv-footer .hv-fg a:not(.hv-logo) { display: block; color: var(--hv-mut); font-size: 14px; padding: 3px 0; }
.hv-footer .hv-fg a:not(.hv-logo):hover { color: var(--hv-acc); }
.hv-footer .hv-fg .hv-logo { padding: 0; }
.hv-footer .hv-fg .hv-sm { margin-top: 14px; text-transform: none; letter-spacing: 0; }
.hv-footer form { margin: 0; }
.hv-footer .hv-linkbtn { background: none; border: 0; padding: 3px 0; color: var(--hv-mut); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.hv-footer .hv-linkbtn:hover { color: var(--hv-acc); }
.hv-footer .hv-copy { margin-top: 30px; font-size: 12px; color: var(--hv-mut); }


/* ---- 8b. SITE NAVBAR (lives outside .hv, in _Layout; markup in _SiteNav) -- */
.hv-nav { position: sticky; top: 0; z-index: 40; /* below the sidebar drawer (50) and backdrop (45) */ border-bottom: 1px solid var(--hv-line); transition: background-color .35s, border-color .35s; }
.hv-nav .hv-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.hv-nav .hv-nav-left { display: flex; align-items: center; min-width: 0; }
.hv-nav .hfe-sidebar-toggle { color: var(--hv-ink); }
.hv-nav .hv-nav-links { display: flex; gap: 26px; font-size: 13px; color: var(--hv-mut); }
.hv-nav .hv-nav-links a:hover, .hv-nav .hv-nav-reg:hover { color: var(--hv-acc); }
.hv-nav .hv-nav-auth { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hv-nav .hv-nav-reg { font-size: 13px; color: var(--hv-mut); padding: 0 6px; }
.hv-nav .hv-nav-hi { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hv-mut); padding: 0 6px; }
.hv-nav .hv-nav-hi:hover { color: var(--hv-acc); }
.hv-nav .hv-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--hv-line); }
.hv-nav .hv-av--fb { display: grid; place-content: center; background: var(--hv-card); color: var(--hv-acc); font: 400 14px var(--hv-disp); }
body[data-home-theme="glitch"] .hv-nav .hv-av { border-radius: 0; }
.hv-nav .hv-nav-auth form { display: inline-flex; }

/* Home page only: the bar floats over the hero (no band, no border), like the preview. The hero gets
   extra top padding so the big title clears it. Below 900px signed-in users have no header at all. */
.hv-nav.hv-nav--over { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; }
.hv-nav--over ~ .hfe-shell .hv-hero { padding-top: 88px; }
@media (max-width: 900px) { body.hfe-authed .hv-nav--over ~ .hfe-shell .hv-hero { padding-top: 22px; } }

/* ---- 8c. NAVBAR ON SCROLL (js/site-nav.js adds .is-scrolled) -----------------------------
   Once the page has scrolled, the bar drops its band and splits into floating glass "islands"
   (logo, links, auth buttons) so nothing blends into the content under it. For visitors the logo and
   the auth buttons also slide out towards the screen edges (the inner wrapper widens); the
   links pill stays centred. Signed-in users only get the links pill (their account area is the sidebar). */
.hv-nav .hv-nav-in { pointer-events: none; transition: max-width .55s cubic-bezier(.22,1,.36,1), padding .55s cubic-bezier(.22,1,.36,1); }
.hv-nav .hv-nav-in > * { pointer-events: auto; }
.hv-nav .hv-logo, .hv-nav .hv-nav-links, .hv-nav .hv-nav-auth {
  border: 1px solid transparent; border-radius: 999px;
  transition: background-color .35s, border-color .35s, box-shadow .35s, padding .45s cubic-bezier(.22,1,.36,1), backdrop-filter .35s;
}
.hv-nav .hv-nav-links { align-items: center; }
.hv-nav.is-scrolled { background: transparent; border-bottom-color: transparent; }
.hv-nav.is-scrolled .hv-logo,
.hv-nav.is-scrolled .hv-nav-links,
.hv-nav.is-scrolled .hv-nav-auth {
  background: color-mix(in srgb, var(--hv-bg) 68%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  border-color: var(--hv-line); box-shadow: 0 8px 26px rgba(0,0,0,.32);
}
.hv-nav.is-scrolled .hv-logo { padding: 3px 18px 3px 10px; }
.hv-nav.is-scrolled .hv-nav-links { padding: 10px 24px; }
.hv-nav.is-scrolled .hv-nav-auth { padding: 5px 8px; }
.hv-nav.is-scrolled .hv-nav-auth:not(:has(*)) { display: none; }
.hv-nav.is-scrolled .hv-nav-in { padding-top: 10px; padding-bottom: 10px; }
.hv-nav--guest.is-scrolled .hv-nav-in { max-width: 100%; padding-left: 22px; padding-right: 22px; }
body[data-home-theme="glitch"] .hv-nav .hv-logo,
body[data-home-theme="glitch"] .hv-nav .hv-nav-links,
body[data-home-theme="glitch"] .hv-nav .hv-nav-auth { border-radius: 0; }

/* Notification bell + its dropdown (shared partial, old look) recolored to the theme. */
.hv-nav .hv-nav-bell .hfe-nav-bell { color: var(--hv-mut) !important; }
.hv-nav .hv-nav-bell .hfe-nav-bell:hover { background: var(--hv-card); color: var(--hv-acc) !important; }
.hv-nav .hv-nav-bell .hfe-nav-dropdown-menu { background: var(--hv-bg2); border-color: var(--hv-line); border-radius: min(var(--hv-r), 14px); }
.hv-nav .hv-nav-bell .hfe-nav-dropdown-item { color: var(--hv-mut); }
.hv-nav .hv-nav-bell .hfe-nav-dropdown-item:hover,
.hv-nav .hv-nav-bell .hfe-nav-dropdown-item:focus { background: var(--hv-card); color: var(--hv-acc); }
.hv-nav .hv-nav-bell .hfe-notif-item-message { color: var(--hv-ink); }
.hv-nav .hv-nav-bell .hfe-notif-markall-btn { color: var(--hv-acc); }
.hv-nav .hv-nav-bell .hfe-notif-dropdown-header { color: var(--hv-ink); border-color: var(--hv-line); }

/* ---- Step 6: pages that hide the site chrome (Editorial portfolio / project pages) ------------
   _Layout adds body.hfe-chrome-off and skips _SiteNav and _SiteFooter. What stays: the sidebar drawer
   and backdrop. Added here: the logo chip back to the home page (everyone) and the sidebar toggle
   (signed-in), a fixed pair in the top-left corner above page content (z 41: below backdrop 45 and
   drawer 50), and some top clearance so the page's own top bar is not covered. */
body.hfe-chrome-off .hfe-sidebar-toggle-floating { display: inline-flex; } /* all widths, not only phones */
body.hfe-chrome-off .hfe-sidebar-mobile-header { display: flex; }          /* drawer header (home link + bell) at all widths, since the nav's bell is gone */
.hv-chrome-chip { position: fixed; top: .5rem; left: .75rem; z-index: 41; width: 44px; height: 50px; background: none; display: grid; place-content: center; }
.hv-chrome-chip img { height: 46px; width: auto; display: block; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.hv-chrome-chip:focus-visible { outline: 2px solid var(--hv-acc, #d9b98a); outline-offset: 3px; }
body[data-home-theme="glitch"] .hv-chrome-chip { border-radius: 0; }
body.hfe-authed .hv-chrome-chip { left: 3.6rem; } /* sits right of the sidebar toggle */
body.hfe-chrome-off .hfe-main-col { padding-top: 64px; }

/* Full-width wrapper used instead of Bootstrap's .container on the home page (see _Layout). */
.hfe-main-col > .hv-fullbleed { flex: 1 0 auto; width: 100%; min-width: 0; }

/* ---- 9. RESPONSIVE ------------------------------------------------------- */
@media (max-width: 960px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr track will not shrink below its content, so the spotlight rail
     (a row of cards) stretched to its full width and could not scroll. Same reason for min-width: 0. */
  .hv .hv-herobar { grid-template-columns: minmax(0, 1fr); }
  .hv .hv-herobar > * { min-width: 0; }
  .hv .hv-angled { grid-template-columns: 1fr 1fr; }
  .hv .hv-ag { margin-left: 0; min-height: 260px; }
  .hv .hv-projs { grid-template-columns: 1fr 1fr; }
  .hv .hv-three, .hv-footer .hv-fg { grid-template-columns: 1fr 1fr; }
  .hv-nav .hv-nav-links { display: none; }
}
@media (max-width: 560px) {
  .hv .hv-angled, .hv .hv-projs, .hv .hv-three, .hv-footer .hv-fg { grid-template-columns: 1fr; }
  .hv .hv-panel { margin-top: -10px; }
}

/* ---- 10. REDUCED MOTION -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* The Glitch copies of the hero word are hidden by their animation (opacity 0 most of the time).
     With the animation off they would sit on screen permanently as offset ghost text, so drop them. */
  body[data-home-theme="glitch"] .hv .hv-big::before,
  body[data-home-theme="glitch"] .hv .hv-big::after { display: none; }
  .hv *, .hv *::before, .hv *::after,
  .hv-footer *, .hv-footer *::before, .hv-footer *::after,
  .hv-nav *, .hv-nav *::before, .hv-nav *::after { animation: none !important; transition: none !important; }
}

/* Spotlight tiles with a project picture (same picture the project cards below use). The picture fills the tile; a dark
   fade from the bottom keeps the name readable on any picture, and the big number sits above it. Tiles with no picture
   keep the colour gradient. */
.hv .hv-tall__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hv .hv-tall--img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.82) 100%); pointer-events: none; }
.hv .hv-tall--img::before { z-index: 2; opacity: .75; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.hv .hv-tall--img b, .hv .hv-tall--img span { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.hv .hv-tall--img span { color: rgba(255,255,255,.82); }
/* Member card with a picture: the portfolio photo fills the angled card; a bottom fade keeps the text readable. */
.hv .hv-ag { overflow: hidden; }
.hv .hv-ag__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hv .hv-ag--img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%); pointer-events: none; }
.hv .hv-ag--img b, .hv .hv-ag--img small, .hv .hv-ag--img p { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.hv .hv-ag--img small { color: var(--hv-acc); }
.hv .hv-ag--img p { color: rgba(255,255,255,.82); }
.hv .hv-ag::after { z-index: 3; }