/* GARLAND "Armory Black (Amber)" theme for adfxsound.com.
 *
 * Mirrors the design language of GARLAND's RmlUi documents
 * (Plugins/RmlUi/UI/mainmenu.rcss, mainhud.rcss, prematch.rcss): flat near-black
 * surfaces, zero border-radius, no gradients or shadows, and amber as a strict BUDGET
 * rather than a theme colour. Amber appears only on the active nav rail, audio
 * progress, CTA buttons and hover rails; everything else sits in the neutral tiers.
 *
 * Purely additive, so it must load LAST. It re-points the `futura-pt` family at
 * IBM Plex Sans rather than rewriting site.css's minified selectors, which only works
 * because a later @font-face for the same family/style/weight wins the match. The
 * same trick is what fonts.css already uses to map Jost onto futura-pt.
 */


/* ---- font voices (GARLAND: garland-ui / garland-display / garland-mono) ---- */

@font-face {
  font-family: 'futura-pt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../Fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'futura-pt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../Fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'futura-pt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../Fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'futura-pt';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../Fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'garland-display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../Fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'garland-mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../Fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}


/* ---- palette ---- */

:root {
  --bg: #0a0b10;
  --strip: #0e1015;
  --row: #16181d;
  --row-hover: #1c1f25;
  --row-sel: #26292f;
  --hairline: #1f2228;
  --steel: #2a2e35;

  --amber: #f2a83c;
  --amber-bright: #ffc15a;
  --amber-press: #d8902a;
  --amber-dim: #6b4a14;

  /* Deliberately outside the GARLAND scale. The play button borrows the universal
     video-player red because being instantly recognisable matters more there than
     staying on palette; nothing else on the site should reach for these. */
  --play: #fe3038;
  --play-press: #c31f27;

  --text: #c7d4e0;
  --text-bright: #ffffff;
  --text-soft: #9aa6b6;
  --text-muted: #6a7482;
  --on-amber: #101216;
  --on-play: #ffffff;

  --ui: 'futura-pt', 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --display: 'garland-display', 'Barlow Condensed', 'Bahnschrift', sans-serif;
  --mono: 'garland-mono', 'IBM Plex Mono', Consolas, monospace;
}


/* ---- surfaces + body copy ---- */
/* Plex Sans sets wider than Jost, so drop 17px -> 16px and neutralise the tracking. */

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65em;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body a,
body a:visited {
  color: var(--text);
}

body a:hover {
  color: var(--text-bright);
}

#pageWrapper {
  border-color: var(--hairline);
}


/* ---- display tier (GARLAND .mm-title / .hero-title) ---- */

body h1,
body h2,
body h3,
body h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 2px;
  line-height: 1.15em;
  text-transform: uppercase;
}

body h1 { font-size: 40px; }
body h2 { font-size: 30px; }
body h3 { font-size: 22px; }
body h4 { font-size: 18px; }

/* The logo lives inside an h1 and must not inherit the display tier. */
#logo h1.logo,
#logo .logo {
  font-size: 0;
  letter-spacing: 0;
}

body blockquote {
  border-left-color: var(--amber-dim);
  color: var(--text-soft);
  font-style: normal;
}


/* ---- nav ---- */
/* Amber marks the current page, which is the one thing in the nav that carries state.
   GARLAND's 3dp selection rail is a vertical-stack idiom, so on a horizontal nav the
   accent rides the label itself. */

body .main-nav a,
body .main-nav a:visited {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-muted);
  transition: color .15s ease-out;
}

body .main-nav a:hover {
  color: var(--text-bright);
}

/* amber-bright rather than amber: at 14px the apparent weight of a nav label is driven
   by contrast, not stroke width, so the mid-luminance amber read lighter than the white
   hover state despite being a heavier face. #ffc15a closes most of that gap. */

body .main-nav .active-link > a,
body .main-nav .active-link > a:visited {
  color: var(--amber-bright);
  font-weight: 700;
}

#mobileNav,
#mobileMenuLink {
  background-color: var(--row);
}


/* ---- metadata tier: gear captions become telemetry readouts ---- */
/* The captions are already caps with `//` separators - mono is all they were missing. */

.image-caption,
.image-caption p,
.sqs-block-image .image-caption p,
.video-caption,
.video-caption p {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7d8da0;
}


/* ---- audio players as HUD meters (GARLAND .bar-fuel) ---- */
/* The stock `played` fill is rgba(0,0,0,.03), i.e. invisible on a dark panel. */

.audio-block .sqs-widgets-audio-player:not(.classic).dark {
  --primary-text: var(--text-bright);
  --secondary-text: var(--text-muted);
  background: #0e131a;
  border-left: 3px solid var(--amber-dim);
  transition: border-color .15s ease-out, background-color .15s ease-out;
}

.audio-block .sqs-widgets-audio-player:not(.classic).dark:hover {
  border-left-color: var(--amber);
  background: #141b24;
}

.audio-block .sqs-widgets-audio-player:not(.classic).dark .played {
  background: rgba(242, 168, 60, .14);
}

.audio-block .sqs-widgets-audio-player:not(.classic).dark .played .icon,
.audio-block .sqs-widgets-audio-player:not(.classic).dark:hover .played .icon {
  width: 2px;
  background-color: var(--amber);
}

.audio-block .sqs-widgets-audio-player:not(.classic).dark .title-wrapper .title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-bright);
}

.audio-block .sqs-widgets-audio-player:not(.classic).dark .time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.audio-block .sqs-widgets-audio-player:not(.classic).dark .action:hover {
  background-color: rgba(242, 168, 60, .12);
}


/* ---- buttons as amber CTAs (GARLAND .btn-apply) ---- */
/* GARLAND has no box-shadow, so the raised edge is a darker bottom border. The
   !important is needed because site.css sets button colour via the body-level
   button-style-solid class at higher specificity. */

.sqs-block-button-element {
  background-color: var(--amber) !important;
  color: var(--on-amber) !important;
  border: 0;
  border-bottom: 2px solid var(--amber-press);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 1;
  transition: background-color .15s ease-out;
}

.sqs-block-button-element:hover {
  background-color: var(--amber-bright) !important;
  color: var(--on-amber) !important;
  opacity: 1;
}


/* ---- dividers: hairline + amber tick ---- */

.sqs-block-horizontalrule {
  position: relative;
}

.sqs-block-horizontalrule hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  height: 0;
}

.sqs-block-horizontalrule::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 2px;
  background: var(--amber-dim);
}

/* ---- media: dim structural framing ---- */
/* The brushsmear divider is decorative and full-bleed, so it opts out of the frame.
   It carries a per-page block id, hence matching on the image src instead. */

.sqs-block-image .image-block-wrapper:not(:has(img[src*='brushsmear'])),
.sqs-block-embed .embed-block-wrapper {
  border: 1px solid var(--hairline);
}

/* Flattened image blocks put padding-bottom on .image-block-wrapper itself.
   Keep the img filling that box even when the old Squarespace shape container is gone. */
.sqs-block-image .image-block-wrapper {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.sqs-block-image .image-block-wrapper > img,
.sqs-block-image .image-block-wrapper > video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* GIF stand-ins stay decorative: no native chrome, no player HUD. */
.sqs-block-image video.loaded {
  pointer-events: none;
}

.sqs-block-image video.loaded::-webkit-media-controls,
.sqs-block-image video.loaded::-webkit-media-controls-overlay-play-button,
.sqs-block-image video.loaded::-webkit-media-controls-start-playback-button {
  display: none !important;
}
.sqs-block-image .image-block-wrapper.has-ratio > img,
.sqs-block-image .image-block-wrapper.has-ratio > video,
.sqs-block-image .image-block-wrapper[style*="padding-bottom:"] > img,
.sqs-block-image .image-block-wrapper[style*="padding-bottom:"] > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Pinegrow Move up/down only swaps siblings. A click on a full-bleed <img>,
   .yt-facade, or inner <p> lands on an only-child, so the editor reports
   "already at the top/bottom". Pass those hits through to the outer .sqs-block,
   which sits next to the other blocks in the column. iframes and links keep
   pointer-events so a playing YouTube player and mailto/hrefs stay usable. */
.sqs-block-image > .sqs-block-content,
.sqs-block-image > .sqs-block-content *,
.sqs-block-embed > .sqs-block-content,
.sqs-block-embed > .sqs-block-content *:not(iframe),
.sqs-block-html > .sqs-block-content,
.sqs-block-html > .sqs-block-content *,
.sqs-block-horizontalrule > .sqs-block-content,
.sqs-block-horizontalrule > .sqs-block-content * {
  pointer-events: none;
}

.sqs-block-html .sqs-html-content a {
  pointer-events: auto;
}

.sqs-block-embed {
  cursor: pointer;
}

.sqs-gallery-block-grid .slide img {
  border: 1px solid var(--hairline);
}


/* ---- long-form content pages ---- */
/* about.html sets its entire bio paragraph in an <h1>, so it is lead copy rather than
   a title and opts out of the condensed display tier. It takes the mono voice like the
   rest of that page, sized down from 23px because mono's fixed advance width reads
   heavier, and held above the 14px body tier so it still leads. It is the only
   content-level h1 on the site; every other h1 is the header logo. */

.sqs-html-content h1 {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

/* site.css leaves inline links undecorated and the same colour as body text, so they
   are indistinguishable from their surroundings. An amber-dim rule is the affordance. */

.sqs-html-content a,
.sqs-html-content a:visited {
  color: var(--text-bright);
  text-decoration: underline;
  text-decoration-color: var(--amber-dim);
  text-underline-offset: 3px;
  transition: color .15s ease-out, text-decoration-color .15s ease-out;
}

.sqs-html-content a:hover {
  color: var(--amber);
  text-decoration-color: var(--amber);
}

.sqs-html-content ul li::marker {
  color: var(--amber-dim);
}

/* reaper-scripts.html is technical documentation end to end: .lua filenames in <strong>,
   the instructions that follow them, and keybinding lists. The whole content column takes
   the mono voice. Filenames stay at the bright tier so they still read as headings, and
   drop to regular weight because only the 400 weight of Plex Mono is self-hosted. */

#page-62a942a05b80b358fd299205 .sqs-html-content p,
#page-62a942a05b80b358fd299205 .sqs-html-content ul li p {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7em;
  letter-spacing: 0;
  color: var(--text-soft);
}

#page-62a942a05b80b358fd299205 .sqs-html-content p strong {
  font-weight: 400;
  color: var(--text-bright);
}

#page-62a942a05b80b358fd299205 .sqs-html-content ul li {
  margin-bottom: 10px;
}

#page-62a942a05b80b358fd299205 .sqs-html-content ul li p {
  margin: 0;
}

/* about.html credentials + testimonials take the same mono voice as the gear captions.
   Mono is set 2px below the sans body because its fixed advance width reads larger at
   a matched size, and leading is opened up because long mono runs need the air.
   Scoped to the two block ids so the bio lead above stays in the sans voice. */

#block-yui_3_17_2_1_1664131710108_14342 .sqs-html-content ul li p {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6em;
  letter-spacing: 0;
  margin: 0;
  color: var(--text-soft);
}

#block-yui_3_17_2_1_1664131710108_14342 .sqs-html-content ul {
  margin-top: 28px;
}

#block-yui_3_17_2_1_1664131710108_14342 .sqs-html-content ul li {
  margin-bottom: 16px;
}

#block-yui_3_17_2_1_1691268470418_7081 .sqs-html-content p {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.85em;
  letter-spacing: 0;
  margin-bottom: 28px;
}

/* Only the 400 weight of Plex Mono is self-hosted, so bold attributions would render
   as faux bold. They drop to regular in the soft tier instead, which also echoes the
   muted speaker caption on GARLAND's dialogue box. */

#block-yui_3_17_2_1_1691268470418_7081 .sqs-html-content p strong {
  font-weight: 400;
  color: var(--text-soft);
}

/* unreal.html pairs each plugin with a <strong> title paragraph followed by a plain
   description paragraph. Only the descriptions take the mono voice; :not(:has(strong))
   is what separates them from the titles. The footer sits outside this page id. */

#page-68d40e8760c52067f4a0f6b6 .sqs-html-content p:not(:has(strong)) {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7em;
  letter-spacing: 0;
  color: var(--text-soft);
}


/* ---- youtube player scaling (driven by Scripts/youtube.js) ---- */
/* The player is handed a 1920px internal viewport and scaled back down to the frame it
   occupies, which is what makes YouTube commit to a 1080p rendition in a box this size.
   Its layout box is therefore far wider than anything visible, so the wrapper has to clip
   or the excess would push a horizontal scrollbar onto the page, and the scale has to be
   pinned to the top-left corner to stay registered with the frame. */

.embed-block-wrapper.embed-block-provider-YouTube {
  overflow: hidden;
}

.embed-block-wrapper.embed-block-provider-YouTube > iframe {
  transform-origin: top left;
}


/* ---- youtube facade (driven by Scripts/youtube.js) ---- */
/* The facade button takes the iframe's place inside .embed-block-wrapper, whose aspect
   ratio comes from an inline padding-bottom, so it needs the same absolute fill that
   blocks.css gives the iframe. */

.yt-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
}

.yt-facade:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

/* Flat red slab with a white triangle. The slab keeps GARLAND's square, unshaded badge
   shape; only the colours are borrowed, so it reads as a play control on sight without
   turning into a rounded YouTube lozenge. */

.yt-facade-play {
  position: relative;
  display: block;
  width: 62px;
  height: 44px;
  background-color: var(--play);
  border-bottom: 2px solid var(--play-press);
}

.yt-facade-play::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  /* Optical rather than geometric centring: a right-pointing triangle carries its mass
     on the left, so it needs less than half its width taken back. */
  margin-left: -6px;
  margin-top: -9px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--on-play);
}


/* ---- live youtube HUD (driven by Scripts/youtube.js) ---- */
/* Controls live in our document, not inside the scaled iframe. The Pinegrow
   pointer-events: none rule above would otherwise swallow every click on them. */

.sqs-block-embed > .sqs-block-content .yt-player,
.sqs-block-embed > .sqs-block-content .yt-player * {
  pointer-events: auto;
}

.sqs-block-embed > .sqs-block-content .yt-player iframe,
.sqs-block-embed > .sqs-block-content .yt-player .yt-html5 {
  pointer-events: none;
}

.yt-player {
  position: absolute;
  inset: 0;
  outline: none;
  background: var(--bg);
}

.yt-player:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

.yt-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.yt-mount,
.yt-stage iframe,
.yt-html5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transform-origin: top left;
}

.yt-html5 {
  object-fit: cover;
  background: #000;
  pointer-events: none;
}

/* Chrome/Safari draw a circular play/pause on <video> even with controls=false. */
.yt-html5::-webkit-media-controls,
.yt-html5::-webkit-media-controls-overlay-play-button,
.yt-html5::-webkit-media-controls-start-playback-button,
.yt-html5::-webkit-media-controls-play-button {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.yt-hit {
  position: absolute;
  inset: 0 0 44px 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.yt-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px;
  background: #0e1015;
  border-top: 1px solid var(--hairline);
}

.yt-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-bright);
  cursor: pointer;
  appearance: none;
}

.yt-btn:hover,
.yt-btn:focus-visible {
  color: var(--amber-bright);
  background: rgba(242, 168, 60, .12);
}

.yt-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

.yt-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.yt-stop {
  color: var(--text);
}

.yt-track {
  position: relative;
  flex: 1 1 auto;
  height: 14px;
  cursor: pointer;
  background: var(--steel);
}

.yt-track:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.yt-played {
  position: absolute;
  top: 5px;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--amber);
}

.yt-knob {
  position: absolute;
  right: -5px;
  top: -3px;
  width: 10px;
  height: 10px;
  background: var(--text-bright);
}

.yt-time {
  flex: 0 0 auto;
  min-width: 86px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-align: right;
  user-select: none;
}

.yt-error {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  z-index: 4;
  margin: 0;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-bright);
  text-align: center;
}

.yt-player:fullscreen,
.yt-player:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #000;
}

@media (max-width: 640px) {
  .yt-bar {
    height: 48px;
    gap: 6px;
    padding: 0 6px;
  }

  .yt-hit {
    bottom: 48px;
  }

  .yt-time {
    min-width: 72px;
    font-size: 10px;
  }

  .yt-btn {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
}


/* ---- footer strip ---- */

#footer {
  border-top: 1px solid var(--hairline);
  background-color: var(--strip);
}

#footer,
#footer .sqs-html-content p,
#footer a,
#footer a:visited {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

#footer a:hover {
  color: var(--amber);
}