/* ------------------------------------------------------------------
   sidspanos.me — HUD front page
   Scoped entirely under .hud so nothing here can leak into Salient's
   other templates. Delete this file + front-page.php to revert.
   ------------------------------------------------------------------ */

.hud {
  --bg:        #070a0c;
  --panel:     #0b1013;
  --panel-2:   #0e1519;
  --line:      rgba(56, 255, 200, 0.20);
  --line-soft: rgba(214, 228, 230, 0.08);
  --accent:    #38ffc8;
  --accent-dim:rgba(56, 255, 200, 0.55);
  --warn:      #ff7a3d;
  --text:      #d6e4e6;
  --dim:       #6c8085;
  --display: "Chakra Petch", "Arial Narrow", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --body:    "Archivo", Helvetica, sans-serif;

  position: relative;
  z-index: 10;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  max-width: 100%;
  isolation: isolate;
}

/* Salient ships a fixed footer (position:fixed, z-index:1) that paints over
   the bottom of the viewport. On the front page only, let it flow normally
   so it appears after the content instead of covering it. */
body.home #footer-outer {
  position: relative;
  z-index: 1;
}

body.home #ajax-content-wrap {
  position: relative;
  z-index: 10;
  background: #070a0c;
}

/* Salient capitalises headings site-wide; our copy sets its own case. */
.hud h1,
.hud h2,
.hud h3 {
  text-transform: none;
}

/* atmosphere ------------------------------------------------------- */

.hud::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(56,255,200,0.10), transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 100%, rgba(255,122,61,0.07), transparent 70%);
}

.hud::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.hud__inner { position: relative; z-index: 2; }

.hud__wrap {
  width: min(1240px, calc(100% - 3rem));
  margin-inline: auto;
}

/* shared bracket frame --------------------------------------------- */

.hud-frame { position: relative; }

.hud-frame::before,
.hud-frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent-dim);
  transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease;
}
.hud-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud-frame::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* reveal ----------------------------------------------------------- */

@keyframes hud-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hud-sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes hud-blip {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.hud [data-rise] {
  opacity: 0;
  animation: hud-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hud [data-rise] { animation: none; opacity: 1; }
  .hud__scan { display: none; }
}

/* hero -------------------------------------------------------------- */

.hud-hero {
  padding: clamp(6rem, 16vh, 11rem) 0 clamp(3.5rem, 8vh, 6rem);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The front page carries its image behind the existing hero rather than
   above it, so the headline and telemetry strip stay where they are and
   the page matches every other template. */
.hud-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/wp-content/uploads/2026/09/Circuit-inspection-%E2%80%94-hero.jpg");
  background-size: cover;
  background-position: center right;
  filter: saturate(1) contrast(1.1) brightness(1.22);
}

.hud-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(7,10,12,0.95) 0%, rgba(7,10,12,0.84) 34%, rgba(7,10,12,0.34) 64%, rgba(7,10,12,0.06) 100%),
    linear-gradient(to bottom, rgba(7,10,12,0.5) 0%, rgba(7,10,12,0.04) 45%, rgba(7,10,12,0.72) 100%);
}

.hud-hero > .hud__wrap { position: relative; z-index: 2; }

.hud-hero__tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
  animation-delay: 0.05s;
}

.hud-hero__tag span.dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  animation: hud-blip 2.4s ease-in-out infinite;
  flex: none;
}

.hud-hero__tag span.rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, var(--accent-dim), transparent);
  transform-origin: left;
  animation: hud-sweep 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hud-hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.9rem, 8.5vw, 6.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
  color: #fff;
  animation-delay: 0.15s;
}

.hud-hero h1 em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 34px rgba(56,255,200,0.4);
}

.hud-hero__lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--dim);
  margin: 0 0 2.8rem;
  animation-delay: 0.25s;
}

/* telemetry strip ---------------------------------------------------- */

.hud-telemetry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  animation-delay: 0.35s;
}

.hud-telemetry__cell {
  background: var(--panel);
  padding: 1.15rem 1.35rem;
}

.hud-telemetry__k {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 0.5rem;
}

.hud-telemetry__v {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.hud-telemetry__v.is-live { color: var(--accent); }

/* section header ----------------------------------------------------- */

.hud-section { padding: clamp(4rem, 10vh, 7rem) 0; }

.hud-section__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 2.75rem;
}

.hud-section__idx {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  flex: none;
}

.hud-section__head h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  color: #fff;
  flex: none;
}

.hud-section__head .rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, var(--line), transparent);
}

/* work grid ---------------------------------------------------------- */

.hud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.5rem;
}

.hud-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.75rem 1.75rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  min-height: 270px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.hud-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
}
.hud-card:hover.hud-frame::before,
.hud-card:hover.hud-frame::after { width: 30px; height: 30px; }

.hud-card__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hud-card:hover .hud-card__scan { opacity: 1; }

.hud-card__shot {
  display: block;
  margin: -1.9rem -1.75rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  position: relative;
}

.hud-card__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7,10,12,0.1), rgba(7,10,12,0.75));
  pointer-events: none;
}

.hud-card__shot img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: top left;
  filter: saturate(1.1) contrast(1.05);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hud-card:hover .hud-card__shot img { transform: scale(1.04); }

.hud-card__meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hud-card__status {
  color: var(--accent);
}
.hud-card__status.is-draft { color: var(--warn); }

.hud-card h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.85rem;
  color: #fff;
}

.hud-card p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--dim);
  margin: 0 0 1.5rem;
}

.hud-card__title {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s ease, color 0.3s ease;
}

.hud-card:hover .hud-card__title { background-size: 100% 1px; }
.hud-card__title:hover { color: var(--accent); }

.hud-card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.35rem;
}

.hud-card__live {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warn);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s ease;
}

.hud-card__live svg { width: 12px; height: 12px; }
.hud-card__live:hover { opacity: 0.7; }

.hud-card__more {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.hud-card__more svg {
  width: 13px; height: 13px;
  transition: transform 0.3s ease;
}
.hud-card:hover .hud-card__more svg { transform: translateX(5px); }

.hud-card__empty {
  border-style: dashed;
  border-color: var(--line-soft);
  align-items: flex-start;
  justify-content: center;
}

/* capability rows ----------------------------------------------------- */

.hud-caps {
  border-top: 1px solid var(--line-soft);
}

.hud-cap {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.5rem;
  padding: 1.65rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s ease, padding-left 0.3s ease;
}

.hud-cap:hover {
  background: rgba(56,255,200,0.03);
  padding-left: 0.85rem;
}

.hud-cap__n {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding-top: 0.35rem;
}

.hud-cap h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
  color: #fff;
}

.hud-cap p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--dim);
  max-width: 68ch;
}

/* contact -------------------------------------------------------------- */

.hud-contact {
  padding: clamp(4rem, 10vh, 7rem) 0 clamp(5rem, 12vh, 8rem);
  border-top: 1px solid var(--line-soft);
}

.hud-contact h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 1.5rem;
  color: #fff;
  max-width: 18ch;
}

.hud-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.hud-btn {
  position: relative;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.hud-btn:hover {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.hud-btn--ghost { border-color: var(--line-soft); color: var(--dim); }
.hud-btn--ghost:hover { color: var(--bg); }

/* draft notice --------------------------------------------------------- */

.hud-notice {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px dashed rgba(255,122,61,0.4);
  padding: 0.85rem 1.1rem;
  margin-bottom: 2rem;
  display: inline-block;
}

/* =====================================================================
   SINGLE ENTRY
   ===================================================================== */

/* Salient renders its header light on this template, while the logo file
   is the light-on-dark variant and the page below is near-black. Match
   the header to the page on portfolio entries only. */
body.single-portfolio #header-outer,
body.single-portfolio #header-outer .container,
body.single-portfolio #header-secondary-outer,
body.single-portfolio #search-outer,
body.single-post #header-outer,
body.single-post #header-outer .container,
body.single-post #header-secondary-outer,
body.single-post #search-outer,
body.page #header-outer,
body.page #header-outer .container,
body.page #header-secondary-outer,
body.page #search-outer {
  background-color: #070a0c !important;
  box-shadow: none !important;
}

body.single-portfolio #header-outer,
body.single-post #header-outer,
body.page #header-outer {
  border-bottom: 1px solid rgba(214, 228, 230, 0.08);
}

body.single-portfolio #header-outer #top nav > ul > li > a,
body.single-portfolio #header-outer .sf-menu a,
body.single-post #header-outer #top nav > ul > li > a,
body.single-post #header-outer .sf-menu a,
body.page #header-outer #top nav > ul > li > a,
body.page #header-outer .sf-menu a {
  color: #d6e4e6 !important;
}

body.single-portfolio #ajax-content-wrap,
body.single-post #ajax-content-wrap,
body.page #ajax-content-wrap {
  background: #070a0c;
}

/* Salient's footer is position:fixed and sits at z-index 1. The content
   above has an opaque background and a higher stacking order, so on every
   template except the front page the footer was being painted over and
   never appeared. Let it flow normally on the HUD templates too. */
body.single-portfolio #footer-outer,
body.single-post #footer-outer,
body.page #footer-outer {
  position: relative;
  z-index: 1;
}

/* Footer background: the skyline strip from the montage.
 *
 * There were THREE dark layers stacked here, which is why the skyline read as
 * grey mud rather than a city at night:
 *   1. our own gradient, in the element's background-image
 *   2. Salient's #footer-outer[data-using-bg-img="true"]::after — a FLAT
 *      scrim of the inherited background colour at opacity .8, painted over
 *      everything below it
 *   3. the image's own low contrast
 * Alpha layers multiply rather than add, so .8 over .3 left roughly 14% of
 * the image showing through at its clearest point.
 *
 * So: the image moves to ::before where a filter can reach it, Salient's
 * ::after is taken over as the single wash, and the element itself carries
 * no background image at all. Note #footer-outer still has an inline
 * background-image pointing at source.unsplash.com, left over from the
 * Salient demo import — killing it here also stops that request.
 */
#footer-outer {
  background-image: none !important;
  background-color: #070a0c !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft, rgba(214,228,230,0.08));
}

#footer-outer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/wp-content/uploads/2026/09/Stockholm-skyline-%E2%80%94-footer.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Contrast does the work of un-murking; brightness alone only makes grey
     haze. Kept modest so the skyline stays a backdrop, not a postcard. */
  filter: saturate(1.1) contrast(1.14) brightness(1.1);
}

/* Both selectors are needed: Salient's opacity rule carries the extra
   [data-bg-img-overlay] attribute and outranks the single-attribute one. */
#footer-outer::after,
#footer-outer[data-using-bg-img="true"]::after,
#footer-outer[data-using-bg-img="true"][data-bg-img-overlay="0.8"]::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  background-color: transparent;
  /* Heavier through the middle, where the copyright text sits over the
     brightest part of the sunset. The ends only need to meet the page. */
  background-image: linear-gradient(
    to bottom,
    rgba(7, 10, 12, 0.80) 0%,
    rgba(7, 10, 12, 0.56) 30%,
    rgba(7, 10, 12, 0.63) 62%,
    rgba(7, 10, 12, 0.82) 100%
  );
}

#footer-outer .row,
#footer-outer #copyright {
  position: relative;
  z-index: 1;
}

/* With the wash lightened, the footer text needs its own backing to stay
   readable over the brighter part of the skyline. */
#footer-outer .row .col,
#footer-outer #copyright .col {
  text-shadow: 0 1px 10px rgba(7, 10, 12, 0.95), 0 0 24px rgba(7, 10, 12, 0.8);
}

#footer-outer .textwidget,
#footer-outer #copyright p {
  color: #cddcde !important;
}

/* Menu underline + current state.
   Salient's animated_underline draws with its own accent colour (blue) for
   the current item and white on hover. Both are repainted in the HUD accent
   so navigation matches the rest of the site. */

#header-outer #top nav > ul > li > a .menu-title-text::after,
#header-outer #top nav > ul > li > a::after,
#header-outer .sf-menu > li > a .menu-title-text::after,
#header-outer .sf-menu > li > a::after,
#header-outer nav > ul > li.current-menu-item > a .menu-title-text::after,
#header-outer nav > ul > li.current_page_item > a .menu-title-text::after,
#header-outer nav > ul > li.current-menu-ancestor > a .menu-title-text::after {
  background-color: #38ffc8 !important;
  background-image: none !important;
  border-color: #38ffc8 !important;
  color: #38ffc8 !important;
}

#header-outer #top nav > ul > li.current-menu-item > a,
#header-outer #top nav > ul > li.current_page_item > a,
#header-outer #top nav > ul > li.current-menu-ancestor > a,
#header-outer #top nav > ul > li > a:hover,
#header-outer #top nav > ul > li > a:focus,
#header-outer .sf-menu > li.current-menu-item > a .menu-title-text,
#header-outer .sf-menu > li.current_page_item > a .menu-title-text,
#header-outer .sf-menu > li > a:hover .menu-title-text {
  color: #38ffc8 !important;
}

/* Catch-all: whatever Salient uses to draw the marker on a nav item —
   pseudo-element background, or a border on the link — repaint it. Scoped
   to the header nav, so nothing else on the page is affected. */
html body #header-outer nav ul li a::after,
html body #header-outer nav ul li a::before,
html body #header-outer nav ul li a .menu-title-text::after,
html body #header-outer nav ul li a .menu-title-text::before,
html body #header-outer nav ul li[class*="current"] > a::after,
html body #header-outer nav ul li[class*="current"] > a .menu-title-text::after {
  background-color: #38ffc8 !important;
  background-image: none !important;
  border-color: #38ffc8 !important;
}

html body #header-outer nav ul li[class*="current"] > a,
html body #header-outer nav ul li a[aria-current="page"] {
  border-bottom-color: #38ffc8 !important;
  color: #38ffc8 !important;
}

html body #header-outer nav ul li a[aria-current="page"] .menu-title-text,
html body #header-outer nav ul li[class*="current"] > a .menu-title-text {
  color: #38ffc8 !important;
}

/* The underline itself is a border-top on .menu-title-text:after, not a
   background — so the background rules above never touched it. On the two
   templates that render a transparent header (front page, single post)
   Salient paints that border white with !important at (2,3,5):

     #header-outer[data-lhe="animated_underline"].transparent
       #top nav > ul > li > a .menu-title-text:after { border-color:#fff!important }

   which outranked the green rule and left Work and Writing white while
   About, Status and Contact went green. Match .transparent explicitly and
   add html body to clear it at (2,3,7). The .dark-slide half covers the
   state Salient swaps in when the header scrolls over a light section. */
html body #header-outer[data-lhe="animated_underline"].transparent #top nav > ul > li > a .menu-title-text:after,
html body #header-outer[data-lhe="animated_underline"].transparent.dark-slide #top nav > ul > li > a .menu-title-text:after {
  border-color: #38ffc8 !important;
}

/* the slide-out / mobile panel uses the same accent */
#slide-out-widget-area .menu-item a:hover,
#slide-out-widget-area .current-menu-item > a,
#mobile-menu .current-menu-item > a,
#mobile-menu li a:hover {
  color: #38ffc8 !important;
}

/* The logo ships as srcset "light 1x, dark 2x". On a high-DPI screen the
   browser fetches the dark variant, which disappears against the dark
   header. Pin the light file at every pixel ratio — content: on an img
   replaces the rendered image and bypasses srcset selection entirely. */
body.single-portfolio #header-outer #logo img.default-logo,
body.single-post #header-outer #logo img.default-logo,
body.page #header-outer #logo img.default-logo,
body.home #header-outer #logo img.default-logo {
  content: url("/wp-content/uploads/2026/07/logo-robot-retina-light-new.png");
}

/* hero band ------------------------------------------------------------- */

.hud-band {
  position: relative;
  min-height: clamp(300px, 40vh, 430px);
  display: flex;
  align-items: flex-end;
  padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(2.2rem, 5vh, 3.2rem);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}

.hud-band__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transform: scale(1.02);
  filter: saturate(1) contrast(1.1) brightness(1.24);
}

/* Left-weighted scrim: solid enough under the text to stay readable at
   AA, fading out to the right so the image still reads as an image. */
.hud-band__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(7,10,12,0.95) 0%, rgba(7,10,12,0.84) 34%, rgba(7,10,12,0.34) 64%, rgba(7,10,12,0.06) 100%),
    linear-gradient(to bottom, rgba(7,10,12,0.5) 0%, rgba(7,10,12,0.04) 45%, rgba(7,10,12,0.72) 100%);
}

/* Rack indicator lights over the data centre band. Sits above the image
   and below the scrim, so the left-hand text side stays readable and the
   lights only really show where the photo does. */
.hud-band__leds {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hud-band__leds span {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 1px rgba(56, 255, 200, 0.85), 0 0 16px 3px rgba(56, 255, 200, 0.35);
  opacity: 0.18;
  animation-name: hud-led;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity;
}

@keyframes hud-led {
  0%, 100% { opacity: 0.12; }
  45%      { opacity: 0.85; }
  55%      { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-band__leds span { animation: none; opacity: 0.45; }
}

.hud-band__inner { position: relative; z-index: 2; }

.hud-band .hud-back { margin-bottom: 1.8rem; }
.hud-band .hud-entry__title { margin-bottom: 1rem; }
.hud-band .hud-entry__lede { margin-bottom: 0; max-width: 52ch; }

.hud-band--flat { min-height: 0; padding-top: clamp(4rem, 11vh, 7rem); }

.hud--single .hud-entry { padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2rem, 5vh, 3rem); }

.hud-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  margin-bottom: 2.6rem;
  transition: color 0.3s ease;
}
.hud-back:hover { color: var(--accent); }
.hud-back svg { width: 13px; height: 13px; transition: transform 0.3s ease; }
.hud-back:hover svg { transform: translateX(-4px); }

.hud-entry__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.4rem;
}
.hud-entry__tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
  animation: hud-blip 2.4s ease-in-out infinite;
}
.hud-entry__tag .rule {
  height: 1px; flex: 1;
  background: linear-gradient(to right, var(--accent-dim), transparent);
}

.hud-entry__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 1.3rem;
  text-transform: none;
  animation-delay: 0.08s;
}

.hud-entry__lede {
  max-width: 58ch;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.65;
  color: var(--dim);
  margin: 0 0 2.4rem;
  animation-delay: 0.14s;
}

.hud-entry__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  animation-delay: 0.2s;
}
.hud-entry__cell { background: var(--panel); padding: 1rem 1.2rem; }
.hud-entry__cell .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.45rem;
}
.hud-entry__cell .v {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1;
}
.hud-entry__cell .v.is-live { color: var(--accent); }

.hud-entry__cta { margin: 2.2rem 0 0; animation-delay: 0.26s; }
.hud-btn--live {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border-color: var(--accent-dim);
  color: var(--accent);
}
.hud-btn--live:hover { color: var(--bg); background: var(--accent); }
.hud-btn--live svg { width: 13px; height: 13px; }

.hud-entry__shot {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  overflow: hidden;
  animation-delay: 0.3s;
}
.hud-entry__shot img { display: block; width: 100%; height: auto; }

.hud-entry__body {
  max-width: 68ch;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--text);
  animation-delay: 0.34s;
}
.hud-entry__body p { margin: 0 0 1.45rem; }
.hud-entry__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.hud-entry__body h2,
.hud-entry__body h3 {
  font-family: var(--display);
  font-weight: 600;
  color: #fff;
  text-transform: none;
  margin: 2.4rem 0 1rem;
  line-height: 1.2;
}
.hud-entry__body h2 { font-size: 1.6rem; }
.hud-entry__body h3 { font-size: 1.25rem; }
.hud-entry__body ul,
.hud-entry__body ol { margin: 0 0 1.45rem 1.2rem; }
.hud-entry__body li { margin-bottom: 0.5rem; }
.hud-entry__body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  padding: 0.12em 0.4em;
}
.hud-entry__body pre {
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.65;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  padding: 1.2rem 1.35rem;
  overflow-x: auto;
  margin: 0 0 1.6rem;
}
.hud-entry__body blockquote {
  border-left: 2px solid var(--accent-dim);
  padding-left: 1.3rem;
  margin: 0 0 1.6rem;
  color: var(--dim);
}

.hud-entry__body--wide { max-width: 76ch; }

/* inline figures inside page/post content ------------------------------ */

.hud .hud-figure {
  margin: 0 0 2.2rem;
  padding: 0;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  position: relative;
  overflow: hidden;
}

.hud .hud-figure::before,
.hud .hud-figure::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--accent-dim);
  z-index: 2;
}
.hud .hud-figure::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud .hud-figure::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hud .hud-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.hud .hud-figure figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: var(--dim);
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  margin: 0;
}

/* the hero image on a page sits full-bleed inside its wrap */
.hud-entry--page .hud-entry__shot { margin-top: clamp(2rem, 5vh, 3rem); }

/* two-column blocks inside page content -------------------------------- */

.hud-entry__body .hud-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin: 0 0 2rem;
}
.hud-entry__body .hud-cols > div {
  background: var(--panel);
  padding: 1.35rem 1.4rem;
  overflow: hidden;
}

/* Descriptor strip at the top of a column cell. Bleeds to the cell edges
   by cancelling the padding, and is dimmed so it reads as texture behind
   the heading rather than competing with it. */
.hud-entry__body .hud-cols__img {
  display: block;
  width: calc(100% + 2.8rem);
  height: 104px;
  object-fit: cover;
  object-position: center;
  margin: -1.35rem -1.4rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0.78;
  filter: saturate(0.9) contrast(1.05);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hud-entry__body .hud-cols > div:hover .hud-cols__img {
  opacity: 1;
  transform: scale(1.03);
}
.hud-entry__body .hud-cols h3 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
}
.hud-entry__body .hud-cols p { margin: 0; font-size: 0.93rem; color: var(--dim); }
.hud-entry__body .hud-cols ul { margin: 0.6rem 0 0 1.1rem; font-size: 0.92rem; color: var(--dim); }

/* roles list ------------------------------------------------------------ */

.hud-entry__body .hud-roles {
  border-top: 1px solid var(--line-soft);
  margin: 0 0 1.8rem;
}

.hud-entry__body .hud-role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 6.5rem;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.05rem 0.5rem 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.3s ease, padding-left 0.3s ease;
}

.hud-entry__body .hud-role:hover {
  background: rgba(56, 255, 200, 0.03);
  padding-left: 0.75rem;
}

.hud-entry__body .hud-role .r {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  line-height: 1.3;
}

.hud-entry__body .hud-role .o {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--dim);
}

.hud-entry__body .hud-role .y {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}

.hud-entry__body .hud-cv-note {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dim);
  border-left: 2px solid var(--accent-dim);
  padding-left: 1.2rem;
  margin: 0 0 2.4rem;
}
.hud-entry__body .hud-cv-note strong { color: var(--text); }

@media (max-width: 680px) {
  .hud-entry__body .hud-role {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .hud-entry__body .hud-role .y { text-align: left; }
}

.hud-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
}
.hud-links li { margin: 0; }

/* form ------------------------------------------------------------------ */

.hud-form { max-width: 640px; margin: 0.5rem 0 0; }

.hud-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hud-form__field { display: block; margin-bottom: 1.15rem; }
.hud-form__field .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.5rem;
}
.hud-form__field input,
.hud-form__field textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-family: var(--body);
  font-size: 0.97rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hud-form__field input:focus,
.hud-form__field textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
  background: var(--panel-2);
}
.hud-form__field textarea { resize: vertical; line-height: 1.6; }

.hud-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hud-form__note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--accent-dim);
  color: var(--accent);
  margin: 0 0 1.6rem;
}
.hud-form__note--err {
  border-color: rgba(255, 122, 61, 0.45);
  color: var(--warn);
}

/* Salient styles inputs, buttons and content lists globally and wins on
   specificity. These overrides are scoped to .hud so nothing leaks. */

.hud .hud-links {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.hud .hud-links li::before,
.hud .hud-links li::marker { content: none !important; }

.hud .hud-entry__body a.hud-btn,
.hud a.hud-btn {
  text-decoration: none !important;
  border-radius: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.hud .hud-form__field input[type="text"],
.hud .hud-form__field input[type="email"],
.hud .hud-form__field textarea {
  background: var(--panel) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 0.85rem 0.95rem !important;
  font-family: var(--body) !important;
  font-size: 0.97rem !important;
}
.hud .hud-form__field input[type="text"]:focus,
.hud .hud-form__field input[type="email"]:focus,
.hud .hud-form__field textarea:focus {
  border-color: var(--accent-dim) !important;
  background: var(--panel-2) !important;
  outline: none !important;
}

.hud .hud-form button[type="submit"] {
  cursor: pointer;
  font-family: var(--mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--accent-dim) !important;
  border-radius: 0 !important;
  color: var(--accent) !important;
  padding: 0.95rem 1.6rem !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.7rem;
  transition: color 0.3s ease, background 0.3s ease !important;
}
.hud .hud-form button[type="submit"]:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}
.hud .hud-form button[type="submit"] svg { width: 13px; height: 13px; }

.hud-entry__nav {
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 6rem);
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(3rem, 8vh, 5rem);
}
.hud-entry__navgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.hud-navlink {
  display: block;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  text-decoration: none;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.hud-navlink:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.hud-navlink .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.hud-navlink .t {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.25;
}
.hud-navlink--next { text-align: right; }

/* responsive ----------------------------------------------------------- */

@media (max-width: 640px) {
  .hud__wrap { width: calc(100% - 2rem); }
  .hud-grid { grid-template-columns: 1fr; }
  .hud-cap { grid-template-columns: 1fr; gap: 0.5rem; }
  .hud-card { min-height: 0; }
  .hud-entry__navgrid { grid-template-columns: 1fr; }
  .hud-form__row { grid-template-columns: 1fr; gap: 0; }
  .hud-navlink--next { text-align: left; }
}