@charset "UTF-8";
.site-head {
  background-color: var(--carbon);
  color: var(--chrome-warm);
  box-shadow: inset 0 -1px 0 rgba(255, 122, 46, 0.35), 0 8px 24px -8px rgba(255, 122, 46, 0.25);
}

.site-head__alerts {
  background-color: var(--charcoal-warm);
  color: var(--chrome-warm);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(255, 122, 46, 0.35);
}

.site-head__main {
  background-color: var(--carbon);
  color: var(--chrome-warm);
}

.site-head__main .icon {
  fill: var(--chrome-warm);
}

.site-head__main .site-nav__burger {
  color: var(--chrome-warm);
}

.site-head__main .site-nav__burger:hover {
  color: var(--ember);
}

.site-head__main .site-nav__burger:hover .icon {
  fill: var(--ember);
}

.site-head__actions > * {
  transition: color 0.2s ease;
}

.site-head__actions > *:hover {
  color: var(--ember);
}

.site-head__actions > *:hover .icon {
  fill: var(--ember);
}

.site-head__actions__basket__count {
  background-color: var(--carbon);
  color: var(--ember);
  font-family: var(--font-display);
  font-weight: 600;
}

/*------------------------------------*\
	MEDIA QUERY

	Wraps content in the appropriate media query.

	Usage:
	.block {
		@include media-query('768') { ... }
	}

	Available aliases:
	portrait, landscape
	768, 768-plus
	900, 900-plus
	1024, 1024-plus
	1440, 1440-plus
	1920, 1920-plus
\*------------------------------------*/
@media screen and (max-width: 1439px) {
  .site-nav {
    column-gap: var(--space-4);
  }
}
@media screen and (max-width: 1439px) {
  .site-nav__menu {
    column-gap: clamp(12px, 10vw - 108px, 25px);
  }
}
@media screen and (max-width: 1199px) {
  .site-nav__menu {
    column-gap: var(--space-3);
  }
}
.site-nav__menu__item, .site-nav__menu__item:not([class]) {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  transition: color 0.2s ease;
}

@media screen and (max-width: 1439px) {
  .site-nav__menu__item, .site-nav__menu__item:not([class]) {
    letter-spacing: 0.07em;
  }
}
@media screen and (max-width: 1199px) {
  .site-nav__menu__item, .site-nav__menu__item:not([class]) {
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.06em;
  }
}
.site-nav__menu__item:hover, .site-nav__menu__item.is-active, .site-nav__menu__item[aria-current=page], .site-nav__menu__item:not([class]):hover, .site-nav__menu__item:not([class]).is-active, .site-nav__menu__item:not([class])[aria-current=page] {
  color: var(--ember);
}

.site-nav--dark .site-nav__menu__item {
  color: var(--chrome-warm);
}

.desktop-nav {
  color: var(--chrome-warm);
  /*
   * THE GROUND GOES ON THE PSEUDO-ELEMENTS, NOT ON THIS ELEMENT.
   *
   * `.desktop-nav` is a positioning container — the global sets it
   * `position: absolute; height: 100%; background: transparent` deliberately,
   * and hangs the visible surface on `::after`, which also carries the
   * `desktop-nav-slide-in` animation. `::before` extends 200% to the left so
   * the panel reaches the viewport edge.
   *
   * Painting the container instead put an opaque carbon block the full height
   * of the DOCUMENT — measured at 11,927px — over the page: no animation,
   * because that lives on `::after`; not reaching the edge, because that is
   * `::before`'s job. Nerdworks has always coloured the pseudo-elements, which
   * is why the same shared component looks right there (2026-09-09).
   */
}

.desktop-nav::after, .desktop-nav::before {
  background-color: var(--carbon);
}

.desktop-nav::after {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.desktop-nav::backdrop {
  background-color: rgba(0, 0, 0, 0.65);
}

.desktop-nav .site-nav__close .icon {
  fill: var(--chrome-warm);
}

.desktop-nav__menu__item {
  /*
   * The submenu chevron. Inline SVG takes `fill`, and unset it inherits
   * black — on carbon that is a 6/255 contrast, which is why these two
   * marks read as faint smudges rather than as affordances.
   *
   * Found by sweeping every icon in the nav after the same fault turned up
   * three separate times as a "missing icon" report: the desktop close
   * control, the mobile list icons, and the mobile back arrow. These two
   * were the only ones left, and nobody had reported them because a
   * chevron nobody can see reads as a nav that simply has no chevrons.
   *
   * Ember, matching the mobile list — the same "there is more behind this"
   * affordance should not change colour between viewports.
   */
}

.desktop-nav__menu__item .icon {
  fill: var(--ember);
}

.desktop-nav__menu__item {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  transition: color 0.2s ease;
}

.desktop-nav__menu__item:hover, .desktop-nav__menu__item.is-active {
  color: var(--ember);
}

.desktop-nav__menu__drawer {
  /*
   * NO GROUND OF ITS OWN. A second surface colour inside the panel read
   * as a separate box rather than a deeper level of the same one — the
   * charcoal was fighting the carbon it sat on (operator, 2026-09-09).
   *
   * The level is marked the way the brand marks structure everywhere
   * else: an ember hairline down the left edge, with the run of items
   * indented off it. Nerdworks does the same thing with a 2px border and
   * no background change; this is that idea in the ARTSABERS idiom.
   */
  padding-left: var(--space-5);
  /*
   * 2px at 0.7, not 1px at 0.35. The first cut measured exactly as
   * specified and still read as a grey divider rather than a brand mark —
   * a single pixel of 35% ember on carbon carries no hue at all, so the
   * decoration was present and doing nothing. Seen only once the drawer
   * was actually opened rather than verified from the computed value.
   *
   * Nerdworks uses 2px for the same job, which is the width where the
   * colour survives.
   */
  border-left: 2px solid rgba(255, 122, 46, 0.7);
}

.desktop-nav__drawer-item {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  transition: color 0.2s ease;
}

.desktop-nav__drawer-item:hover {
  color: var(--ember);
}

.desktop-nav {
  /*
   * The archive link — an operator-ticked item pointing at the section's own
   * page, sitting first among its siblings.
   *
   * MARKED BY EMBER TEXT AND AN EMBER RULE (operator, 2026-09-15). This
   * previously took the rule alone, on the reasoning that a brighter first
   * entry would pull the eye away from the categories the panel exists for.
   * That held while a drawer was four items; in a 58-item Characters list the
   * way out of the group is the one thing a reader needs to find quickly, and
   * a hairline under the first of fifty-eight identical lines does not carry
   * it. The colour is doing navigational work now, not decoration.
   *
   * The rule is the brand's own structural mark, the same ember hairline the
   * drawer uses down its left edge. It is legible here precisely because the
   * link is IN the list: an underline above a group read as a separator
   * between two groups, which is why the earlier above-the-list version
   * deliberately had none.
   *
   * No font-size or family — see the note in the global partial. At panel
   * depth it inherits fs-small from .desktop-nav__menu__item, at drawer depth
   * fs-eyebrow from .desktop-nav__drawer-item.
   */
}

.desktop-nav__archive {
  border-bottom: 1px solid var(--ember);
  color: var(--ember);
}

.desktop-nav__archive:hover {
  color: var(--ember-bright);
}

/*
 * THE SUB-PANEL IS A SEPARATE ELEMENT AND NEEDS THE SAME GROUND.
 *
 * The global pairs `.mobile-nav, .mobile-nav__panel` for root rules, because both
 * the root drawer and each sub-panel are full-screen popovers and the sub-panel
 * renders ON TOP of the drawer in the popover top layer. Its own note says element
 * rules stay under `.mobile-nav` and compile flat so they reach inside the panel
 * too — which is why the list and header looked right in there and only the GROUND
 * was missing.
 *
 * This brand styled `.mobile-nav` alone. So tapping Shop opened a panel with no
 * background, over the page rather than over the drawer, and near-white labels sat
 * on white (operator, 2026-09-09).
 *
 * Root-level properties are paired here; the element rules below stay nested under
 * `.mobile-nav` alone, because pairing them would emit `.mobile-nav__panel__header`
 * and the panel's children are flat `.mobile-nav__header`.
 */
.mobile-nav,
.mobile-nav__panel {
  background-color: var(--carbon);
  color: var(--chrome-warm);
}

.mobile-nav__header {
  background-color: var(--carbon);
  /*
   * Lateral padding for the whole panel is set here and on `__body` rather
   * than on `.mobile-nav`, because the panel slides and a padded root would
   * animate its own inset. MENU sat hard against the screen edge and the
   * close control against the other one.
   */
  padding-inline: var(--space-4-5);
  border-bottom: 1px solid rgba(255, 122, 46, 0.2);
}

.mobile-nav__header__title {
  /*
   * The back arrow is `__title__icon` — an inline SVG before the label. It
   * takes `fill`, and unset it inherits black, which on carbon is
   * invisible. Reported as a missing icon; it was present and painted.
   * THIRD instance of this same fault in this one component, after the
   * list icons and the desktop close control.
   *
   * Chrome rather than ember: it is a CONTROL, like the close button
   * beside it, not a wayfinding mark like the list icons.
   */
}

.mobile-nav__header__title__icon {
  fill: var(--chrome-warm);
}

.mobile-nav__header__title {
  font-family: var(--font-display);
  font-size: var(--fs-prose);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--chrome-highlight);
}

.mobile-nav__header__close {
  color: var(--chrome-warm);
}

.mobile-nav__header__close .icon {
  fill: var(--chrome-warm);
}

.mobile-nav__header__close:hover {
  color: var(--ember);
}

.mobile-nav__header__close:hover .icon {
  fill: var(--ember);
}

.mobile-nav__body {
  /*
   * The ground is set here AND on the list below, deliberately. A submenu
   * slides in over this panel, and mid-transition the incoming level had no
   * ground of its own — the page behind showed through as white, with
   * near-white labels on it (operator, 2026-09-09). Painting both means no
   * state, transitional or nested, can be transparent.
   */
  background-color: var(--carbon);
  padding-block-end: var(--space-5);
}

.mobile-nav__list {
  background-color: var(--carbon);
  /*
   * The gutter lives HERE, not on `__body`. The sub-panel has no `__body` —
   * it is a sibling popover carrying its own list — so padding set there
   * reached level one and left the sub-menu flush against both screen edges.
   * `__list` exists in both, and the global's flat element rules mean this
   * one selector reaches inside the panel too.
   */
  padding-inline: var(--space-4-5);
  /*
   * Top breathing room for BOTH levels. The first item sat against the
   * header's hairline on the root drawer and on the sub-panel alike. Set
   * here rather than on `__body`, which the sub-panel does not have.
   */
  padding-block-start: var(--space-5);
}

.mobile-nav__list__item {
  /*
   * VERTICAL RHYTHM. The items shipped at `padding: 0` and 17px tall, so
   * the run read as one block of text rather than a list — and the FIRST
   * item sat flush against the header's hairline, which read as Shop
   * being clipped or missing entirely rather than merely tight
   * (operator, 2026-09-09).
   */
  padding-block: var(--space-4);
  /*
   * THE ICONS ARE INLINE SVG AND TAKE `fill`, NOT `color`. Unset, they
   * inherit black — on a carbon ground that is invisible, which reads as
   * "My Account has no icon" when the icon is present and painted. Same
   * fault as the desktop close control, one level down; the header's
   * close button already had the fill and the list never did.
   */
}

.mobile-nav__list__item .icon {
  fill: var(--ember);
}

.mobile-nav__list__item {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-warm);
  /*
   * The item is a flex row, but its LINK is a block — so an inline SVG
   * inside the anchor stacked above the label instead of sitting beside
   * it, which read as the icon being misplaced rather than the anchor
   * being the wrong display.
   */
}

.mobile-nav__list__item > a,
.mobile-nav__list__item > button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-nav__list__item {
  /*
   * A parent with children renders as a <button> rather than an <a>, and
   * the UA stylesheet sets `text-transform: none` on buttons explicitly —
   * which beats inheritance from this rule. So Shop, the only item with
   * children, rendered lower-case and half a size off while every sibling
   * was uppercase, and read as a different kind of thing rather than the
   * same item with a submenu.
   */
}

.mobile-nav__list__item > button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.mobile-nav__list__item {
  /*
   * The archive link — the operator-ticked item pointing at the
   * section's own page.
   *
   * Marked by the accent, not by a rule beneath it as on desktop:
   * every row here already carries a hairline divider, so an
   * underline would read as a second divider rather than as a
   * property of the link.
   *
   * Measured before writing this: with no pointer over the menu,
   * every item on every level computes the same chrome-warm, so the
   * archive link was genuinely indistinguishable from its siblings
   * on mobile. (It LOOKS ember in a screenshot taken straight after
   * a tap, because the row under the cursor is hovered — which is
   * what the rule below does, and is not styling this link had.)
   */
}

.mobile-nav__list__item > a.mobile-nav__archive {
  color: var(--ember);
}

.mobile-nav__list__item {
  border-bottom: 1px solid rgba(184, 176, 166, 0.1);
  transition: color 0.2s ease;
}

.mobile-nav__list__item:hover, .mobile-nav__list__item.is-active {
  color: var(--ember);
}

.mobile-nav__list__item:hover .icon, .mobile-nav__list__item.is-active .icon {
  fill: var(--ember);
}

.mobile-nav__list__item:hover > a.mobile-nav__archive, .mobile-nav__list__item.is-active > a.mobile-nav__archive {
  color: var(--chrome-highlight);
}

.footer {
  background-color: var(--carbon);
  color: var(--chrome-warm);
}

.footer__cta {
  position: relative;
  padding: var(--space-5) var(--space-6);
  background: var(--carbon);
  border-top: 1px solid var(--ember-hairline);
}

.footer__cta::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 40px;
  background: radial-gradient(ellipse at center top, var(--ember-hairline-soft), transparent 70%);
  pointer-events: none;
}

.footer__cta__inner {
  max-width: var(--site-max-width-default);
  margin: 0 auto;
}

.footer__inner {
  padding-top: var(--space-8);
  padding-right: max(var(--gutter-small), (100% - var(--site-max-width)) / 2 + var(--gutter-small));
  padding-bottom: var(--space-6);
  padding-left: max(var(--gutter-small), (100% - var(--site-max-width)) / 2 + var(--gutter-small));
  background-color: var(--carbon);
  box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.14);
}

.footer__columns {
  gap: var(--space-6);
  color: var(--chrome-warm);
}

.footer__columns__list {
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

.footer__columns__list > :first-child {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-bottom: var(--space-4);
}

.footer__columns__list > :first-child .title {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.footer__columns__list a {
  color: var(--chrome-warm);
  transition: color 0.2s ease;
}

.footer__columns__list a:hover {
  color: var(--ember);
}

.footer__promo {
  margin-bottom: var(--space-6);
}

.footer__promo__logo {
  color: var(--chrome-highlight);
}

.footer__promo__info {
  color: var(--chrome-dim);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.footer__legal {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  color: var(--chrome-dim);
  border-top: 1px solid rgba(184, 176, 166, 0.15);
  padding-top: var(--space-5);
  margin-top: var(--space-6-5);
}

.footer__legal a {
  color: var(--chrome-dim);
}

.footer__legal a:hover {
  color: var(--ember);
}

.section {
  position: relative;
  isolation: isolate;
  padding-top: var(--section-padding, var(--space-9));
  padding-bottom: var(--section-padding, var(--space-9));
  box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.85);
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.028) 0%, transparent 8%, transparent 88%, rgba(0, 0, 0, 0.32) 100%);
}

.section > .section__inner {
  position: relative;
  z-index: 1;
}

.section--imaged {
  background-image: var(--section-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section--imaged::before {
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.58) 0%, rgba(6, 6, 6, 0.66) 50%, rgba(6, 6, 6, 0.74) 100%);
}

.section > .section__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section--plate-seam-h {
  --section-bg-image: var(--bg-plate-seam-h);
}

.section--plate-seam-v {
  --section-bg-image: var(--bg-plate-seam-v);
}

.section--carbon {
  background-color: var(--carbon);
}

.section--void {
  background-color: var(--void);
}

.section--charcoal {
  background-color: var(--charcoal);
}

.section--charcoal-warm {
  background-color: var(--charcoal-warm);
}

.section--tall {
  --section-padding: 128px;
}

.section--compact {
  --section-padding: var(--space-8);
}

.section--panel-seam {
  position: relative;
  background-color: var(--charcoal);
  box-shadow: inset 0 1px 0 rgba(255, 122, 46, 0.5), inset 0 -1px 0 rgba(255, 122, 46, 0.5), 0 -8px 24px -8px rgba(255, 122, 46, 0.35), 0 8px 24px -8px rgba(255, 122, 46, 0.35);
}

.section--seam-top {
  box-shadow: inset 0 1px 0 rgba(255, 122, 46, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.85), 0 -6px 20px -6px rgba(255, 122, 46, 0.28);
}

.section--seam-bottom {
  box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.14), inset 0 -1px 0 rgba(255, 122, 46, 0.55), 0 6px 20px -6px rgba(255, 122, 46, 0.28);
}

.section--ember-band {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  background: linear-gradient(180deg, var(--ember-glow) 0%, var(--ember-bright) 25%, var(--ember) 55%, var(--ember-forge) 100%);
  color: var(--on-primary-fixed);
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255, 235, 180, 0.55), inset 0 -1px 0 rgba(90, 26, 0, 0.55), 0 -12px 40px -8px rgba(255, 122, 46, var(--ember-band-glow-alpha, 0.35));
}

.section--ember-band::before {
  background: radial-gradient(ellipse at 15% 25%, rgba(255, 235, 180, var(--ember-band-radial-alpha, 0.3)) 0%, rgba(255, 235, 180, 0) 55%), radial-gradient(ellipse at 85% 75%, rgba(209, 72, 16, var(--ember-band-radial-alpha, 0.3)) 0%, rgba(209, 72, 16, 0) 60%);
}

.section--tight {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.section--strip {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  box-shadow: inset 0 1px 0 rgba(250, 250, 250, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.section--fill {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

.section--fill > .section__inner {
  flex: 1;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
}

.section--fill > .section__inner > .grid {
  flex: 1;
}

.section--ember-underline {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  background: linear-gradient(180deg, var(--carbon) 0%, var(--charcoal) 100%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--chrome-top);
}

.section--ember-underline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ember) 40%, var(--ember-glow) 50%, var(--ember) 60%, transparent 100%);
  opacity: 0.5;
  inset: auto 0 0 0;
  z-index: 2;
  pointer-events: none;
}

.section--ember-underline::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -120px;
  left: 0;
  height: 120px;
  background: radial-gradient(ellipse at center top, var(--ember-hairline-soft), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.section--radial-ember::before {
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.58) 0%, rgba(6, 6, 6, 0.66) 50%, rgba(6, 6, 6, 0.74) 100%), radial-gradient(ellipse var(--radial-size, 30% 25%) at var(--radial-position, 92% 88%), rgba(255, 122, 46, var(--radial-alpha, 0.14)) 0%, transparent 70%);
}

@media (max-width: 1200px) {
  .grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .grid--3,
  .grid--5 {
    grid-template-columns: 100%;
  }
}
@media (min-width: 1025px) and (max-width: 1279px), (min-width: 701px) and (max-width: 959px) {
  .product-grid--shop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .grid.grid--phone-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.grid {
  margin-bottom: var(--grid-mb, 0);
}

.grid:has(+ .button) {
  margin-bottom: var(--grid-mb, var(--space-6));
}

.grid--3 {
  --grid-gap: 32px;
}

.grid--4 {
  --grid-gap: 24px;
}

.grid--framed {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(54, 54, 54, 0.5);
  border-bottom: 1px solid rgba(54, 54, 54, 0.5);
}

.grid--card-rows {
  margin-top: var(--space-6-5);
  row-gap: var(--space-6-5);
}

.grid--crosshatch {
  --grid-gap: 0;
  border-top: 1px solid rgba(54, 54, 54, 0.35);
}

.grid--crosshatch > * {
  border-bottom: 1px solid rgba(54, 54, 54, 0.35);
}

.grid--crosshatch > *:nth-child(odd) {
  border-right: 1px solid rgba(54, 54, 54, 0.35);
}

@media (max-width: 900px) {
  .grid--crosshatch > *:nth-child(odd) {
    border-right: none;
  }
}
/*# sourceMappingURL=artsabers-chrome.css.map */